/*
 * 데모 진입 페이지 전용 스타일.
 *
 * 사이트(main.css)에는 "이미지 + 제목 + 설명 + 버튼" 2열 카드 패턴이 없다.
 * #sec-service 는 33/67 비대칭 그리드, #sec-aboutus 는 아이콘 크기(86px) 3열이라
 * 둘 다 이 용도로 비틀면 깨진다. 그래서 새로 만들되 **사이트의 어휘만 쓴다** —
 * 팔레트, 폰트 크기(rem), 화살표 :before hover, 각진 모서리, 768px 브레이크포인트.
 *
 * 팔레트 (main.css 실측)
 *   #7D001A  브랜드 액센트 (푸터 배경, 최다 사용)
 *   #1A3357  네이비 (섹션 배경, -eng 제목)
 *   #3D3338  본문 먹색
 *   #FFF674  hover 노랑 (헤더 CTA 와 동일 계열)
 *   #FFF017  네이비 위 -eng 노랑
 *   #CAD0D8  옅은 청회색 (섹션 배경)
 */

/* ── 히어로 ──
 * 원본의 #sec-bgmovie 를 대체한다. 저장된 유튜브 iframe 이라 로컬에서 재생되지
 * 않아 화면 맨 위가 빈 칸으로 남았고, 데모에서 그건 고장으로 읽힌다.
 */
#sec-demohero {
  background: #1A3357;
  padding: 7rem 0 3.5rem;
}
#sec-demohero > .flex {
  display: block;
}
#sec-demohero .-eng {
  font-family: 'Barlow', sans-serif;
  font-weight: 200;
  line-height: 1;
  color: #FFF017;
  font-size: 3rem;
  margin: 0 0 12px;
}
#sec-demohero .-jp {
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}
#sec-demohero .-lead {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
  margin: 20px 0 0;
  max-width: 46em;
}
@media screen and (min-width: 768px) {
  /* #sec-header 는 position:absolute 로 히어로 위에 얹힌다(높이 95px).
     그만큼 비워주지 않으면 제목이 내비게이션에 붙는다. */
  #sec-demohero { padding: 10rem 0 5.5rem; }
  #sec-demohero .-eng { font-size: 3.875rem; margin: 0 0 20px; }
}

/* ── 카드 목록 ── */
#sec-demo {
  background: #fff;
  padding: 3.5rem 0 5rem;
}
#sec-demo > .flex {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 30px;
}
#sec-demo .-card {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  background: #fff;
  border: 1px solid #CAD0D8;
  text-decoration: none;
  transition: all ease-out 0.15s;
}
@media screen and (min-width: 768px) {
  #sec-demo .-card { width: calc(50% - 15px); }
}
#sec-demo .-card:hover {
  border-color: #7D001A;
  box-shadow: 0 10px 30px rgba(26, 51, 87, 0.12);
}

#sec-demo .-card > .-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #CAD0D8;
}
#sec-demo .-card > .-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all ease-out 0.15s;
}
#sec-demo .-card:hover > .-thumb > img { transform: scale(1.06); }

/* 순번 배지 — 영업이 "1번부터 보여주세요" 라고 말할 수 있게 한다 */
#sec-demo .-card > .-thumb > .-no {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 54px;
  padding: 8px 14px;
  background: #7D001A;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.06em;
}

#sec-demo .-card > .-body {
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
  padding: 26px 28px 24px;
}
@media screen and (min-width: 768px) {
  #sec-demo .-card > .-body { padding: 32px 36px 30px; }
}
#sec-demo .-card > .-body > .-title {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  color: #3D3338;
  margin: 0 0 14px;
}
#sec-demo .-card > .-body > .-desc {
  font-size: 1rem;
  line-height: 1.9;
  color: #3D3338;
  margin: 0 0 24px;
}
#sec-demo .-card > .-body > .-meta {
  font-size: 0.875rem;
  line-height: 1.8;
  color: #6B6469;
  margin: 0 0 24px;
  padding-top: 16px;
  border-top: 1px solid #E4E8ED;
}
#sec-demo .-card > .-body > .-meta > b {
  color: #7D001A;
  font-weight: bold;
}

/* CTA — 사이트의 화살표 :before hover 패턴을 그대로 따른다 */
#sec-demo .-card > .-body > .-cta {
  position: relative;
  align-self: flex-start;
  margin-top: auto;
  padding: 14px 62px 14px 26px;
  background: #7D001A;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: all ease-out 0.15s;
}
#sec-demo .-card > .-body > .-cta:before {
  content: "";
  display: block;
  position: absolute;
  right: 26px;
  top: 0;
  width: 1em;
  height: 100%;
  background-image: url('./shizugin_web/arrow-white.svg');
  background-size: 100% auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transition: all ease-out 0.15s;
}
#sec-demo .-card:hover > .-body > .-cta { background: #5C0013; }
#sec-demo .-card:hover > .-body > .-cta:before { right: 18px; }

/* 준비중 카드 — 링크가 아니라 안내다 */
#sec-demo .-card.-soon { opacity: 0.55; pointer-events: none; }
#sec-demo .-card.-soon > .-body > .-cta { background: #969696; }