/* =========================================================
   메인 첫 화면 — 진료 장면 슬라이드 (첫 구도)
   - 마인드레이 공식 진료 장면 사진을 화면 가득 깔고, 왼쪽에 문구를 얹는다.
     사용자가 여러 시안 중 "사진 안에 글이 들어가 세련돼 보이는" 이 구도를 골랐다.
   - 사진은 거의 자르지 않는다: 첫 화면 높이를 사진 비율(1920×750 ≒ 폭÷2.56)에 맞추고,
     문구가 들어갈 최소 높이만 보장한다. 넓은 화면일수록 사진 전체가 그대로 보인다.
   - 왼쪽은 남색으로 짙게 덮어 글자를 읽히게 하고, 오른쪽은 사진이 살아 있게 둔다.
   - 휴대폰에서는 사진을 위쪽 띠(자르지 않음)로 따로 두고 글은 그 아래 남색 바탕에 둔다.
   - 전환: 새 장면이 넓고 부드러운 경계로 왼쪽→오른쪽으로 쓸어 덮고(마스크),
     나가는 장면은 그 아래에서 남색으로 가라앉는다. 두 사진을 반투명으로 겹치지 않아
     이중 노출처럼 지저분해 보이지 않는다(사용자 지적, 2026-10-08).
     새 장면은 살짝 큰 상태(1.05)에서 머무는 동안 천천히 제자리(1.0)로 물러난다.
     시간은 main.js 의 DUR(5.5초) · FADE(1.6초).
   - '동작 줄이기' 를 켠 방문자에게는 확대·자동 전환을 하지 않는다.
   ========================================================= */

.hero-cinema {
  --hc-ink: #0A1230;
  position: relative;
  isolation: isolate;
  padding: 0;
  /* 사진 비율대로의 높이(폭÷2.56). 단, 문구가 들어갈 만큼은 확보하고 너무 커지지는 않게 */
  min-height: clamp(560px, calc(100vw / 2.56), 780px);
  display: grid;
  background: var(--hc-ink);
  color: #fff;
  overflow: hidden;
}

/* ---------- 장면 ---------- */
.hc-stage { position: absolute; inset: 0; z-index: -2; background: var(--hc-ink); }
.hc-slide {
  position: absolute; inset: 0; margin: 0;
  /* 장면마다 남색 바탕을 깔아 불투명하게 — 사진이 덜 찬 곳(휴대폰 위아래 띠)으로
     뒤 장면이 비치지 않게 */
  background: var(--hc-ink);
  opacity: 0; visibility: hidden; z-index: 0;
}
.hc-slide.is-on { opacity: 1; visibility: visible; z-index: 2; }

/* 들어오는 장면: 마스크(폭 300%) 를 오른쪽 끝 → 왼쪽 끝으로 옮겨 왼쪽부터 드러낸다.
   마스크 가운데 20% 구간(화면 폭의 60%)이 그러데이션이라 경계가 아주 부드럽다. */
.hc-slide.is-entering {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: hcWipe 1.6s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes hcWipe {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

/* 나가는 장면: 새 장면 아래에서 남색으로 가라앉는다(어두워지며 물러남) */
.hc-slide.is-leaving {
  opacity: 1; visibility: visible; z-index: 1;
  animation: hcSink 1.6s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes hcSink { to { opacity: .35; } }

.hc-slide img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform-origin: 60% 50%;
  will-change: transform;
}
/* 들어올 때 살짝 크게(1.05) 시작해 머무는 동안 천천히 제자리로 — 카메라가 물러나는 느낌.
   나가는 장면도 같은 애니메이션을 이어 가서 전환 순간 사진이 튀지 않는다. */
.hc-slide.is-on img,
.hc-slide.is-leaving img { animation: hcSettle 7.5s cubic-bezier(.2, .6, .25, 1) forwards; }
@keyframes hcSettle {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* 글자 쪽(왼쪽)을 짙게, 사진 쪽(오른쪽)은 살짝만 */
.hc-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(10, 18, 48, .92) 0%,
      rgba(10, 18, 48, .80) 28%,
      rgba(10, 18, 48, .38) 52%,
      rgba(10, 18, 48, .06) 78%,
      rgba(10, 18, 48, 0) 100%),
    linear-gradient(0deg, rgba(10, 18, 48, .62) 0%, rgba(10, 18, 48, 0) 30%);
}

/* ---------- 글 ---------- */
.hc-inner {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: inherit;
  padding-top: clamp(36px, 6vh, 84px);
  padding-bottom: 26px;
}
.hc-copy { align-self: center; max-width: 600px; text-align: left; }
.hc-copy .hero-badge { margin-left: 0; width: fit-content; }
.hc-copy h1 { text-shadow: 0 2px 28px rgba(5, 10, 30, .4); }
.hc-copy .hero-lead { text-shadow: 0 1px 16px rgba(5, 10, 30, .5); }
.hc-copy .hero-actions { justify-content: flex-start; }

.hc-assure {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .8);
}
.hc-assure li { display: inline-flex; align-items: center; gap: 7px; }
.hc-assure li::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: rgba(94, 214, 227, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ED6E3' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---------- 모델 이름 + 진행 표시 ---------- */
.hc-meta {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-top: 28px;
}
.hc-model {
  display: grid; gap: 2px; text-align: left; color: #fff;
  padding: 10px 18px 11px 16px;
  border-left: 2px solid var(--teal-300, #5ED6E3);
  background: linear-gradient(90deg, rgba(10, 18, 48, .55), rgba(10, 18, 48, 0));
  transition: opacity .55s ease, transform .55s ease;
}
.hc-model.is-swapping { opacity: 0; transform: translateY(6px); }
.hc-model em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-300, #5ED6E3); }
.hc-model b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.hc-model span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.hc-model span svg { width: 14px; height: 14px; transition: transform .2s ease; }
.hc-model:hover span { color: #fff; }
.hc-model:hover span svg { transform: translateX(3px); }

.hc-dots { display: flex; gap: 6px; }
.hc-dots button {
  width: 46px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; align-items: center;
}
.hc-dots i {
  position: relative; display: block; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .3); overflow: hidden;
}
.hc-dots i::after {
  content: ""; position: absolute; inset: 0; transform-origin: left;
  transform: scaleX(0); background: #fff; border-radius: inherit;
}
/* 지금 장면의 막대가 다음 전환까지 차오른다. 시간은 main.js 가 --hc-dur 로 맞춘다 */
.hc-dots button.is-on i::after { animation: hcFill var(--hc-dur, 5.5s) linear forwards; }
.hc-dots button.is-done i::after { transform: scaleX(1); }
@keyframes hcFill { to { transform: scaleX(1); } }
.hc-dots button:hover i { background: rgba(255, 255, 255, .5); }
.hc-dots button:focus-visible { outline: 2px solid var(--teal-300, #5ED6E3); outline-offset: 2px; border-radius: 4px; }
.hero-cinema.is-paused .hc-dots button.is-on i::after { animation-play-state: paused; }

/* ---------- 넓은 화면: 사진이 최대한 통째로 보이게 글 높이를 줄인다 ----------
   첫 화면 높이는 글이 정한다. 글이 낮을수록 사진 비율(폭÷2.56)에 가까워져 덜 잘린다.
   모델 이름·진행 막대는 오른쪽 아래 사진 위로 옮겨 한 줄을 아낀다. */
@media (min-width: 1024px) {
  .hc-inner { grid-template-rows: 1fr; padding-top: clamp(28px, 4.5vh, 64px); padding-bottom: clamp(28px, 4.5vh, 64px); }
  .hc-copy h1 { margin-bottom: 18px; }
  .hc-copy .hero-lead { margin-bottom: 24px; }
  .hc-copy .hero-tel { margin-top: 18px; }
  .hc-assure { margin-top: 16px; }
  .hc-meta {
    position: absolute; right: 0; bottom: clamp(22px, 3.4vh, 40px);
    margin: 0; flex-direction: column; align-items: flex-end; gap: 10px;
  }
  .hc-model {
    text-align: right; padding: 0 0 0 0; border: 0; background: none;
    text-shadow: 0 1px 14px rgba(5, 10, 30, .55);
  }
  .hc-model span { justify-content: flex-end; }
}

/* ---------- 휴대폰: 사진 띠(자르지 않음) + 아래 문구 ---------- */
@media (max-width: 760px) {
  .hero-cinema { display: block; min-height: 0; }
  /* 띠는 사진 비율들(1920×750 ~ 1920×925)의 중간값. 사진마다 비율이 달라
     '통째로 넣기(contain)'를 하면 위아래에 남색 빈 띠가 생겨 지저분해 보였다(2026-10-08).
     그래서 띠를 꽉 채우되(cover), 잘리는 양은 가장자리 10% 안쪽으로 묶는다. */
  .hc-stage { position: relative; inset: auto; z-index: 0; aspect-ratio: 1920 / 840; overflow: hidden; }
  .hc-shade { display: none; }

  .hc-inner { display: flex; flex-direction: column; min-height: 0; padding-top: 0; padding-bottom: 40px; }
  .hc-copy { max-width: none; }
  .hc-copy h1, .hc-copy .hero-lead { text-shadow: none; }
  .hc-meta {
    order: -1; align-items: center;
    margin: 0 0 24px; padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .hc-model { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 0; border: 0; background: none; }
  .hc-model b { font-size: 17px; }
  .hc-model span { display: none; }
  .hc-dots { gap: 4px; }
  .hc-dots button { width: 28px; }
  .hc-assure { gap: 6px 16px; font-size: 13px; }
}

/* ---------- 동작 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hc-slide.is-entering, .hc-slide.is-leaving { animation: none; -webkit-mask-image: none; mask-image: none; }
  .hc-slide.is-on img, .hc-slide.is-leaving img, .hc-dots button.is-on i::after { animation: none; }
  .hc-dots button.is-on i::after { transform: scaleX(1); }
}