/* =====================================================================
   MARY CLINIC — Main Hero (Premium Medical Editorial)
   레이어 구조: 모델사진(.mh-img) · 임상그래픽(.mh-anat) · 텍스트(.mh-copy) · 사례카드(.mh-case)
   이미지가 없어도 그라데이션 플레이스홀더로 정상 동작합니다.
   ===================================================================== */

.mhero{
  --mh-dur: 8000ms;              /* 슬라이드 1장 노출 시간 (hero.js와 동일) */
  --mh-ink:#F7F2E9;
  position:relative;
  background:var(--navy-900,#1C1815);
  color:var(--mh-ink);
  overflow:hidden;
  isolation:isolate;
}
.mhero__stage{
  position:relative;
  height:clamp(600px, 86svh, 940px);
}

/* ── 슬라이드 ───────────────────────────────────────────── */
.mh-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1100ms var(--ease,cubic-bezier(.22,.61,.36,1)), visibility 0s linear 1100ms;
}
.mh-slide.is-active{ opacity:1; visibility:visible; transition-delay:0s,0s; z-index:2; }
.mh-slide.is-leaving{ z-index:1; }

/* ── 레이어 1: 모델 사진 ─────────────────────────────────── */
.mh-media{ position:absolute; inset:0; overflow:hidden; }
.mh-ph{                                   /* 이미지 없을 때의 품격 있는 대체 배경 */
  position:absolute; inset:0;
  background:
    radial-gradient(70% 90% at 72% 28%, color-mix(in srgb, var(--mh-tint,#5A4A33) 70%, transparent) 0%, transparent 62%),
    radial-gradient(55% 70% at 88% 86%, rgba(192,165,108,.22) 0%, transparent 60%),
    linear-gradient(118deg, #15110E 0%, #241D17 48%, #332821 100%);
}
.mh-ph::after{                            /* 미세 노이즈 */
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.mh-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--mh-pos, 72% 28%);
  opacity:0; transition:opacity .9s ease;
}
.mh-img.is-ready{ opacity:1; }
.mh-slide.is-active .mh-img.is-ready{ animation:mh-kenburns var(--mh-dur) linear forwards; }
@keyframes mh-kenburns{ from{ transform:scale(1.001) } to{ transform:scale(1.07) } }

/* 좌측 텍스트 가독성을 위한 스크림 */
.mh-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(14,11,9,.92) 0%, rgba(14,11,9,.78) 34%, rgba(14,11,9,.28) 62%, rgba(14,11,9,.12) 100%),
    linear-gradient(to top, rgba(14,11,9,.72) 0%, transparent 38%);
}

/* ── 레이어 2: 해부학·임상 그래픽 (SVG 오버레이) ─────────── */
.mh-anat{                                  /* 사진과 같은 프레임(16:9)으로 겹쳐 정렬 */
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0; transition:opacity .8s ease .25s;
}
.mh-slide.is-active .mh-anat{ opacity:1; }
.mh-anat [data-draw]{
  stroke:var(--gold-500,#C0A56C); fill:none; stroke-width:1.1;
  vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900);
}
.mh-slide.is-active .mh-anat [data-draw]{
  animation:mh-draw 1.9s var(--ease,cubic-bezier(.22,.61,.36,1)) forwards;
  animation-delay:calc(.35s + var(--i,0) * .18s);
}
@keyframes mh-draw{ to{ stroke-dashoffset:0 } }
.mh-anat [data-soft]{ stroke:rgba(247,242,233,.42); }
.mh-anat [data-dot]{
  fill:var(--gold-500,#C0A56C); opacity:0; transform-box:fill-box; transform-origin:center;
}
.mh-slide.is-active .mh-anat [data-dot]{
  animation:mh-dot .9s ease forwards; animation-delay:calc(1.1s + var(--i,0) * .16s);
}
@keyframes mh-dot{ 0%{opacity:0;transform:scale(.4)} 60%{opacity:1;transform:scale(1.25)} 100%{opacity:.95;transform:scale(1)} }
.mh-anat [data-halo]{ fill:none; stroke:rgba(192,165,108,.55); stroke-width:1; opacity:0; }
.mh-slide.is-active .mh-anat [data-halo]{
  animation:mh-halo 2.6s ease-out infinite; animation-delay:calc(1.3s + var(--i,0) * .16s);
}
@keyframes mh-halo{ 0%{opacity:.7;r:4} 70%{opacity:0;r:17} 100%{opacity:0;r:17} }
.mh-anat text{
  font-family:var(--font-latin,"Cormorant Garamond",serif);
  font-size:17px; letter-spacing:.16em; fill:rgba(247,242,233,.78);
  paint-order:stroke; stroke:rgba(14,11,9,.55); stroke-width:3px;
  opacity:0; transition:opacity .6s ease;
}
.mh-slide.is-active .mh-anat text{ opacity:1; transition-delay:1.5s; }

/* ── 레이어 3: 텍스트 ───────────────────────────────────── */
.mh-copy{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  max-width:var(--container,1400px); margin:0 auto; padding:0 24px;
}
.mh-copy > *{ max-width:min(620px, 52%); }
.mh-line{
  opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease,cubic-bezier(.22,.61,.36,1)), transform .9s var(--ease,cubic-bezier(.22,.61,.36,1));
  transition-delay:calc(.15s + var(--i,0) * .13s);
}
.mh-slide.is-active .mh-line{ opacity:1; transform:none; }

.mh-eyebrow{
  font-family:var(--font-latin,serif);
  font-size:clamp(.74rem,1vw,.84rem); letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-500,#C0A56C); margin:0 0 18px;
}
.mh-title{
  font-family:var(--font-display,serif); font-weight:600;
  font-size:clamp(1.9rem,4vw,3.3rem); line-height:1.26; letter-spacing:-.02em;
  color:#fff; margin:0; word-break:keep-all;
}
.mh-title em{ font-style:normal; color:var(--gold-500,#C0A56C); }
.mh-rule{ width:56px; height:1px; background:var(--gold-500,#C0A56C); margin:24px 0 22px; }
.mh-desc{
  color:#DCD3C4; font-size:clamp(.94rem,1.2vw,1.06rem); line-height:1.95; margin:0;
  word-break:keep-all;
}
.mh-desc b{ color:#F3EBDC; font-weight:500; }
.mh-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:32px; }
.mh-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:999px; font-size:.92rem; font-weight:600;
  text-decoration:none; border:1px solid transparent; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.mh-btn--gold{ background:var(--gold-500,#C0A56C); color:#1C1815; }
.mh-btn--gold:hover{ background:#D4BC8A; transform:translateY(-2px); }
.mh-btn--ghost{ border-color:rgba(247,242,233,.4); color:#F7F2E9; }
.mh-btn--ghost:hover{ border-color:var(--gold-500,#C0A56C); color:var(--gold-500,#C0A56C); }

/* ── 레이어 4: 임상사례 카드 ────────────────────────────── */
.mh-case{
  position:absolute; right:max(24px, calc((100% - var(--container,1400px))/2 + 24px));
  bottom:112px; z-index:3;
  width:min(300px, 34vw);
  background:rgba(20,16,13,.62); backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  border:1px solid rgba(192,165,108,.3); border-radius:12px;
  padding:18px 20px; text-decoration:none; color:inherit;
  opacity:0; transform:translateY(18px);
  transition:opacity .9s ease 1.1s, transform .9s var(--ease,cubic-bezier(.22,.61,.36,1)) 1.1s,
             border-color .25s, background .25s;
}
.mh-slide.is-active .mh-case{ opacity:1; transform:none; }
.mh-case:hover{ border-color:var(--gold-500,#C0A56C); background:rgba(20,16,13,.78); }
.mh-case__k{
  font-family:var(--font-latin,serif); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-500,#C0A56C); display:block; margin-bottom:8px;
}
.mh-case__t{ font-size:.95rem; line-height:1.55; color:#F7F2E9; margin:0 0 10px; word-break:keep-all; }
.mh-case__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.mh-case__meta span{
  font-size:.7rem; color:#C9BFAE; border:1px solid rgba(247,242,233,.2);
  border-radius:999px; padding:3px 9px;
}
.mh-case__go{
  font-family:var(--font-latin,serif); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:#F7F2E9; display:inline-flex; align-items:center; gap:7px;
}
.mh-case:hover .mh-case__go{ color:var(--gold-500,#C0A56C); }

/* ── 하단 네비게이션 레일 ───────────────────────────────── */
.mh-rail{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  background:linear-gradient(to top, rgba(12,10,8,.78), transparent);
}
.mh-rail__inner{
  max-width:var(--container,1400px); margin:0 auto; padding:0 24px 18px;
  display:flex; align-items:flex-end; gap:20px;
}
.mh-tabs{ display:flex; gap:2px; flex:1; min-width:0; }
.mh-tab{
  flex:1; min-width:0; background:none; border:0; cursor:pointer; text-align:left;
  padding:14px 10px 12px; color:rgba(247,242,233,.55);
  border-top:1px solid rgba(247,242,233,.18);
  transition:color .25s, border-color .25s;
  font-family:inherit;
}
.mh-tab:hover{ color:#F7F2E9; }
.mh-tab[aria-selected="true"]{ color:#fff; border-top-color:transparent; }
.mh-tab__n{
  display:block; font-family:var(--font-latin,serif); font-size:.68rem;
  letter-spacing:.18em; color:var(--gold-500,#C0A56C); margin-bottom:5px;
}
.mh-tab__l{
  display:block; font-size:.84rem; font-weight:500; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.mh-tab__bar{ display:block; height:1px; background:rgba(247,242,233,.18); margin-top:12px; position:relative; }
.mh-tab__bar::after{
  content:""; position:absolute; left:0; top:0; height:100%; width:0; background:var(--gold-500,#C0A56C);
}
.mh-tab[aria-selected="true"] .mh-tab__bar::after{ animation:mh-prog var(--mh-dur) linear forwards; }
.mhero.is-paused .mh-tab[aria-selected="true"] .mh-tab__bar::after{ animation-play-state:paused; }
@keyframes mh-prog{ from{width:0} to{width:100%} }

.mh-ctrl{ display:flex; gap:6px; padding-bottom:14px; flex-shrink:0; }
.mh-ctrl button{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:rgba(247,242,233,.08); border:1px solid rgba(247,242,233,.26);
  color:#F7F2E9; display:grid; place-items:center;
  transition:background .25s, border-color .25s, color .25s;
}
.mh-ctrl button:hover{ background:var(--gold-500,#C0A56C); border-color:var(--gold-500,#C0A56C); color:#1C1815; }
.mh-ctrl svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mh-ctrl .mh-play .ico-pause{ display:block; }
.mh-ctrl .mh-play .ico-play{ display:none; }
.mhero.is-paused .mh-ctrl .mh-play .ico-pause{ display:none; }
.mhero.is-paused .mh-ctrl .mh-play .ico-play{ display:block; }

/* 스크롤 안내 (우측 퀵바가 있는 화면에서는 숨김) */
.mh-scroll{ display:none; }
.mh-scroll--on{
  position:absolute; right:max(24px, calc((100% - var(--container,1400px))/2 + 24px));
  top:50%; z-index:4; transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  font-family:var(--font-latin,serif); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(247,242,233,.5); pointer-events:none;
}
.mh-scroll::after{
  content:""; display:inline-block; width:40px; height:1px; background:rgba(247,242,233,.4);
  margin-left:12px; vertical-align:middle;
}

/* 시술 칩 (슬라이드 공통, 레일 위) */
.mh-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:28px; }
.mh-chips b{
  font-weight:500; font-size:.78rem; color:#E7DECF;
  border:1px solid rgba(247,242,233,.2); border-radius:999px; padding:6px 14px;
}

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width:1100px){
  .mh-copy > *{ max-width:min(560px, 66%); }
  .mh-case{ width:min(260px, 38vw); bottom:124px; }
  .mh-scroll{ display:none; }
}
@media (max-width:860px){
  .mhero__stage{ height:auto; min-height:clamp(620px, 92svh, 860px); }
  .mh-slide{ display:block; }
  .mh-media{ position:absolute; inset:0; }
  .mh-img{ object-position:var(--mh-pos-m, 62% 22%); }
  .mh-scrim{
    background:
      linear-gradient(to top, rgba(14,11,9,.95) 0%, rgba(14,11,9,.86) 42%, rgba(14,11,9,.42) 72%, rgba(14,11,9,.3) 100%);
  }
  .mh-anat{ opacity:.85; }
  .mh-copy{ justify-content:flex-end; padding:0 20px 210px; }
  .mh-copy > *{ max-width:100%; }
  .mh-title{ font-size:clamp(1.65rem,6.4vw,2.3rem); }
  .mh-desc{ font-size:.92rem; line-height:1.85; }
  .mh-desc .mh-desc__long{ display:none; }     /* 모바일에서는 핵심 문장만 */
  .mh-btns{ margin-top:22px; }
  .mh-btn{ padding:12px 18px; font-size:.86rem; }
  .mh-case{ display:none; }
  .mh-chips{ display:none; }
  .mh-rail__inner{ padding:0 16px 14px; flex-direction:column; align-items:stretch; gap:10px; }
  .mh-tabs{ overflow-x:auto; scrollbar-width:none; }
  .mh-tabs::-webkit-scrollbar{ display:none; }
  .mh-tab{ flex:0 0 42%; padding:10px 8px; }
  .mh-tab__l{ font-size:.78rem; }
  .mh-ctrl{ padding-bottom:6px; justify-content:center; }
}

/* ── 모션 최소화 설정 ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .mh-slide, .mh-line, .mh-case, .mh-anat{ transition-duration:.01ms !important; }
  .mh-slide.is-active .mh-img.is-ready{ animation:none; }
  .mh-slide.is-active .mh-anat [data-draw]{ animation:none; stroke-dashoffset:0; }
  .mh-slide.is-active .mh-anat [data-dot]{ animation:none; opacity:.95; }
  .mh-slide.is-active .mh-anat [data-halo]{ animation:none; opacity:0; }
  .mh-tab[aria-selected="true"] .mh-tab__bar::after{ animation:none; width:100%; }
}

/* ── 사용자가 제공하는 임상 그래픽(투명 PNG/SVG) 오버레이 ── */
.mh-anat-img{                              /* 제공 그래픽도 사진과 같은 프레임 */
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  opacity:0; transition:opacity .9s ease .3s;
  pointer-events:none;
}
.mh-slide.is-active .mh-anat-img.is-ready{ opacity:1; }
.mh-media.has-anat-img .mh-anat{ display:none; }   /* 파일이 있으면 기본 SVG는 숨김 */


/* 스크린리더 전용 */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ── 우측 퀵바(상담 아이콘)와 겹치지 않도록 여백 확보 ── */
@media (min-width:1101px){
  .mh-case{ right:max(100px, calc((100% - var(--container,1400px))/2 + 92px)); }
  .mh-rail__inner{ padding-right:96px; }
}