/* ==========================================================================
   DIVA rb2026 — 인덱스 섹션 1~4 (에이전트 B)
   01 히어로(.dv-hero) · 02 WHY DIVA(.dv-why) · 03 Signature 스트립(.dv-sig) · 04 Doctor's Insight(.dv-insight)
   토큰·리셋·타이포·버튼은 diva.css. 여기서는 dv-hero / dv-why / dv-sig / dv-insight 접두어만 정의한다.
   브레이크: 1280 / 1024 / 768 / 520
   ========================================================================== */

/* --- 01. HERO ------------------------------------------------------------ */
.dv-hero{
  position:relative;z-index:1;
  min-height:640px;min-height:max(640px,100vh);min-height:max(640px,100svh);
  display:flex;flex-direction:column;
  color:#fff;background:var(--dv-navy-dp);overflow:hidden;isolation:isolate;
}
.dv-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--dv-navy-dp)}
/* .dv-root img{height:auto}(0,1,1) 보다 높은 특이성으로 높이를 강제한다 */
.dv-hero-bg .dv-hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* 앰비언트 영상: 채도·밝기를 낮춰 질감처럼 깔고(원본이 밝은 인터뷰 컷), 그 위에 navy 틴트를 한 겹 더 얹는다.
   iframe 크기는 home.js 가 cover × 1.45 로 잡아 원본의 상단 타이틀·하단 자막을 화면 밖으로 밀어낸다. */
.dv-hero-video{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;transition:opacity 1.4s var(--dv-ease)}
.dv-hero-video iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none;filter:saturate(.7) brightness(.82)}
.dv-hero-video::after{content:"";position:absolute;inset:0;background:rgba(45,54,69,.36)}
.dv-hero.is-video .dv-hero-video{opacity:1}
/* 스크림 3겹: ① 상단 240px 밴드(투명 헤더의 흰 로고·메뉴가 밝은 영상 프레임 위에서도 읽히게)
   ② 캡션 뒤 은은한 중앙 타원 밴드 ③ 상단 0 → 하단 navy .72 (4단). 캡션이 앉는 40~80% 구간에서 대비를 확보한다 */
.dv-hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(34,42,54,.6) 0,rgba(34,42,54,.3) 100px,rgba(34,42,54,0) 240px),
    radial-gradient(ellipse 62% 48% at 50% 50%,rgba(34,42,54,.3) 0%,rgba(34,42,54,0) 100%),
    linear-gradient(180deg,rgba(45,54,69,0) 0%,rgba(45,54,69,.16) 30%,rgba(45,54,69,.5) 62%,rgba(45,54,69,.72) 100%);
}
.dv-hero-in{
  position:relative;flex:1 0 auto;width:100%;max-width:calc(var(--dv-wrap) + var(--dv-gut)*2);margin-inline:auto;
  padding:clamp(calc(var(--dv-hdr) + 24px),17vh,190px) var(--dv-gut) 26px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.dv-hero-mark{
  font-family:var(--dv-serif);font-weight:500;font-size:clamp(47px,calc(33.2px + 3.83vw),111px);
  line-height:1;letter-spacing:-.045em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.dv-hero-mark i{font-style:italic;font-weight:400;color:var(--dv-olive-lt)}
.dv-hero-cap{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;align-items:center;max-width:820px}
.dv-hero-kicker{
  font-family:var(--dv-serif);font-style:italic;font-weight:400;font-size:clamp(21px,2vw,34px);line-height:1.1;letter-spacing:.01em;
  color:var(--dv-rose-lt);text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.dv-hero-head{margin-top:clamp(14px,1.5vw,24px);font-size:clamp(19px,1.6vw,28px);font-weight:700;line-height:1.45;letter-spacing:-.03em;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.dv-hero-lead{margin-top:clamp(10px,1vw,16px);font-size:clamp(14.5px,1.12vw,17.5px);line-height:1.7;color:rgba(255,255,255,.86);text-shadow:0 1px 10px rgba(0,0,0,.55)}
.dv-hero-focus{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 10px;margin-top:clamp(12px,1.2vw,18px);
  font-size:clamp(13px,.95vw,14.5px);font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.78);text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.dv-hero-focus i{font-style:normal;color:var(--dv-olive-lt)}
.dv-hero-actions{margin-top:clamp(28px,3vw,44px);gap:12px 14px}
.dv-hero-actions .dv-btn.dv-btn--ring{color:#fff;border-color:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dv-hero-actions .dv-btn.dv-btn--ring:hover{background:rgba(255,255,255,.12);border-color:#fff}
.dv-hero-scroll{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  margin:clamp(28px,5vh,56px) auto 0;font-size:12px;font-weight:500;letter-spacing:.2em;color:rgba(255,255,255,.8);
}
.dv-hero-scroll::after{content:"";width:1px;height:54px;background:linear-gradient(180deg,#fff,rgba(255,255,255,0))}
@keyframes dv-hero-drop{0%{transform:scaleY(.25);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:no-preference){
  .dv-hero-scroll::after{animation:dv-hero-drop 2.1s var(--dv-ease) infinite}
  .dv-hero.is-motion-off .dv-hero-scroll::after{animation-play-state:paused}
}
/* 배경영상 재생/일시정지 (aria-pressed=true → 일시정지 상태 → 재생 아이콘) */
.dv-hero-motion{
  position:absolute;right:clamp(20px,4vw,40px);bottom:28px;z-index:3;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(45,54,69,.35);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s,border-color .2s;
}
.dv-hero-motion:hover{background:rgba(255,255,255,.18);border-color:#fff}
.dv-hero-motion svg{width:16px;height:16px}
.dv-hero-motion .dv-hero-ico-play,.dv-hero-motion[aria-pressed="true"] .dv-hero-ico-pause{display:none}
.dv-hero-motion[aria-pressed="true"] .dv-hero-ico-play{display:block}

/* --- 02. WHY DIVA -------------------------------------------------------- */
.dv-why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.85fr);gap:40px clamp(32px,4.5vw,72px);align-items:start}
.dv-why-head .dv-sub{max-width:360px}
.dv-why-head .dv-more{margin-top:clamp(20px,2vw,30px)}
.dv-why-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.dv-why-card{
  position:relative;padding:clamp(24px,2.1vw,32px) clamp(20px,1.7vw,26px) clamp(26px,2.3vw,34px);
  background:#fff;border:1px solid var(--dv-hairline);border-top:1px solid var(--dv-line);border-radius:var(--dv-r);
  transition:transform .4s var(--dv-ease),box-shadow .4s var(--dv-ease),border-color .3s;
}
.dv-why-card::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:2px;background:var(--dv-rose);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .35s,transform .45s var(--dv-ease)}
.dv-why-card:hover{transform:translateY(-6px);box-shadow:var(--dv-sh);border-color:transparent}
.dv-why-card:hover::before{opacity:1;transform:none}
.dv-why-card .dv-card-t{margin-top:16px;font-size:clamp(17px,1.2vw,19.5px)}
.dv-why-list{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.dv-why-list li{position:relative;padding-left:14px;font-size:14.5px;line-height:1.65;color:var(--dv-ink-2)}
.dv-why-list li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--dv-olive)}

/* --- 03. SIGNATURE 스트립 ------------------------------------------------- */
.dv-sig-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.dv-sig-head .dv-sub{max-width:560px}
.dv-sig-all{flex:none;margin-bottom:6px}
.dv-sig-strip{display:flex;gap:10px;height:clamp(300px,21.5vw,400px);margin-top:clamp(30px,3.1vw,56px)}
.dv-sig-item{
  position:relative;flex:1 1 0;min-width:0;border-radius:var(--dv-r);overflow:hidden;
  background:var(--dv-navy-dp);color:#fff;isolation:isolate;cursor:pointer;
  transition:flex-grow .55s var(--dv-ease);
}
.dv-sig-item.is-on{flex-grow:4.4;cursor:default}
.dv-sig-item img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--dv-ease);-webkit-user-drag:none;user-select:none}
.dv-sig-item.is-on img{transform:scale(1.03)}
.dv-sig-item::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(34,42,54,.12) 0%,rgba(34,42,54,.5) 60%,rgba(34,42,54,.8) 100%);transition:opacity .5s;
}
.dv-sig-item.is-on::after{background:linear-gradient(180deg,rgba(34,42,54,0) 30%,rgba(34,42,54,.3) 62%,rgba(34,42,54,.78) 100%)}
.dv-sig-link{position:absolute;inset:0;z-index:1;display:block;border-radius:inherit}
.dv-sig-link:focus-visible{outline:2px solid var(--dv-olive-lt);outline-offset:-5px}
/* 접힌 카드 — 이름을 90° 세워 쓴다 */
.dv-sig-vert{
  position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%) rotate(90deg);white-space:nowrap;pointer-events:none;
  font-size:clamp(12.5px,1.02vw,14.5px);font-weight:700;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.8);transition:opacity .3s;
}
.dv-sig-item.is-on .dv-sig-vert{opacity:0}
/* 펼친 카드 — 번호·이름·설명·자세히 보기 + 영상 칩 */
.dv-sig-open{
  position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:clamp(18px,1.6vw,26px);opacity:0;pointer-events:none;transition:opacity .45s .1s;
}
.dv-sig-item.is-on .dv-sig-open{opacity:1}
.dv-sig-txt{display:flex;flex-direction:column;min-width:0;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.dv-sig-txt .dv-no{color:var(--dv-rose-lt)}
.dv-sig-nm{margin-top:8px;font-size:clamp(17px,1.3vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-sig-desc{margin-top:4px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dv-sig-go{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;font-weight:700;white-space:nowrap}
.dv-sig-go svg{width:24px;height:8px;overflow:visible;stroke-width:1.4;transition:transform .35s var(--dv-ease)}
.dv-sig-item.is-on .dv-sig-link:hover~.dv-sig-open .dv-sig-go svg{transform:translateX(6px)}
.dv-sig-chip,button.dv-sig-chip{
  pointer-events:auto;flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px 0 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.55);background:rgba(45,54,69,.35);color:#fff;
  font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s,border-color .2s,transform .2s var(--dv-ease);
}
.dv-sig-chip svg{width:14px;height:14px;fill:currentColor;stroke:none}
.dv-sig-chip:hover,.dv-sig-chip:focus-visible{background:var(--dv-olive);border-color:var(--dv-olive);transform:translateY(-2px)}
.dv-sig-chip:focus-visible{outline-color:#fff;outline-offset:2px}
.dv-sig-hint{display:none;margin-top:14px;font-size:12.5px;color:var(--dv-muted);text-align:center}

/* --- 04. DOCTOR'S INSIGHT ------------------------------------------------- */
.dv-insight{background:linear-gradient(180deg,var(--dv-navy-dp) 0%,var(--dv-navy) 30%,var(--dv-navy) 100%)}
.dv-insight-grid{display:grid;grid-template-columns:minmax(0,1.64fr) minmax(0,1fr);gap:clamp(24px,2.6vw,40px);align-items:stretch}
.dv-insight-main{min-width:0}
.dv-insight-player{box-shadow:0 30px 70px rgba(0,0,0,.4);background:#000}
.dv-insight-now{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;margin-top:18px}
.dv-insight-now-body{min-width:0}
.dv-insight-now-t{font-size:clamp(16px,1.3vw,20px);font-weight:700;line-height:1.45;letter-spacing:-.02em;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dv-insight-now-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.62)}
.dv-insight-topic{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:rgba(201,215,142,.16);color:var(--dv-olive-lt);font-size:12px;font-weight:600;letter-spacing:0}
.dv-insight-now-m [hidden]{display:none!important}
a.dv-insight-yt{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);font-size:13px;font-weight:600;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
a.dv-insight-yt svg{width:16px;height:16px}
a.dv-insight-yt:hover,a.dv-insight-yt:focus-visible{background:#fff;color:var(--dv-navy);border-color:#fff}
.dv-insight-side{display:flex;flex-direction:column;min-width:0;min-height:0}
.dv-insight-filters{gap:6px}
.dv-insight-filters .dv-chip{height:34px;padding:0 13px;background:transparent;border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.82)}
.dv-insight-filters .dv-chip:hover{border-color:rgba(255,255,255,.7);color:#fff}
.dv-insight-filters .dv-chip.is-active{background:#fff;border-color:#fff;color:var(--dv-navy)}
.dv-insight-cnt{margin-left:2px;font-size:11.5px;font-weight:500;opacity:.6}
.dv-insight-listwrap{position:relative;flex:1 1 0;min-height:0;margin-top:14px}
.dv-insight-list{
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;
}
.dv-insight-list::-webkit-scrollbar{width:6px}
.dv-insight-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:3px}
.dv-insight-item+.dv-insight-item{border-top:1px solid rgba(255,255,255,.08)}
.dv-insight-item[hidden]{display:none!important}
.dv-insight-btn{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:10px 8px;border-radius:10px;
  color:inherit;text-align:left;transition:background-color .2s;
}
.dv-insight-btn:hover{background:rgba(255,255,255,.06)}
.dv-insight-btn:focus-visible{outline-color:var(--dv-olive-lt);outline-offset:-2px}
.dv-insight-item.is-active .dv-insight-btn{background:rgba(255,255,255,.1)}
.dv-insight-th{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.dv-insight-th img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--dv-ease)}
.dv-insight-btn:hover .dv-insight-th img{transform:scale(1.05)}
.dv-insight-np{
  position:absolute;left:6px;bottom:6px;display:none;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:4px;
  background:rgba(17,17,17,.78);color:var(--dv-olive-lt);font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1;
}
.dv-insight-np::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dv-olive-lt)}
.dv-insight-item.is-active .dv-insight-np{display:inline-flex}
@media (prefers-reduced-motion:no-preference){
  .dv-insight-item.is-active .dv-insight-np::before{animation:dv-insight-blink 1.2s ease-in-out infinite}
}
@keyframes dv-insight-blink{0%,100%{opacity:1}50%{opacity:.25}}
.dv-insight-body{display:block;min-width:0}
.dv-insight-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;font-weight:600;line-height:1.45;letter-spacing:-.02em;color:#fff}
.dv-insight-item.is-active .dv-insight-t{color:var(--dv-olive-lt)}
.dv-insight-m{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.55)}
.dv-insight-empty{padding:32px 12px;text-align:center;font-size:14.5px;color:rgba(255,255,255,.6)}
.dv-insight-cta{margin-top:clamp(32px,3.4vw,52px)}
.dv-insight-cta .dv-btn.dv-btn--ring{color:#fff}

/* --- 05. 반응형 ----------------------------------------------------------- */
@media (max-width:1280px){
  .dv-why-grid{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
  .dv-why-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .dv-hero-in{padding-top:calc(var(--dv-hdr) + 28px)}
  .dv-why-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .dv-why-head .dv-sub{max-width:520px}
  .dv-why-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-insight-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .dv-insight-listwrap{flex:none;height:min(440px,58vh)}
  .dv-insight-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
  .dv-insight-filters::-webkit-scrollbar{display:none}
  .dv-insight-filters .dv-chip{height:44px}   /* 터치 타깃 44px (폰트·패딩 유지) */
}
@media (max-width:768px){
  .dv-hero-mark{margin-top:clamp(20px,6vw,56px)}
  .dv-hero-cap{margin-top:auto}
  .dv-hero-scroll{margin-top:34px}
  .dv-hero-motion{display:none}
  /* 시그니처 — 아코디언 대신 가로 스냅 캐러셀 */
  .dv-sig-strip{
    height:auto;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--dv-gut);
    margin-inline:calc(var(--dv-gut) * -1);padding-inline:var(--dv-gut);
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  }
  .dv-sig-strip::-webkit-scrollbar{display:none}
  /* 카드 = 사진(4:3) 위 + 흰 텍스트 패널 아래. 원본 사진이 4:3 이라 얼굴 위에 글자를 얹을 수 없다 */
  .dv-sig-item,.dv-sig-item.is-on{
    flex:0 0 min(84%,380px);display:flex;flex-direction:column;scroll-snap-align:start;cursor:default;
    background:#fff;color:var(--dv-ink);border:1px solid var(--dv-hairline);
  }
  .dv-sig-item::after,.dv-sig-item.is-on::after{display:none}
  .dv-sig-item img,.dv-sig-item.is-on img{position:relative;inset:auto;z-index:auto;width:100%;aspect-ratio:4/3;transform:none}
  .dv-sig-vert{display:none}
  .dv-sig-open{position:relative;opacity:1;padding:16px 18px 18px;align-items:flex-end}
  .dv-sig-txt{text-shadow:none}
  .dv-sig-txt .dv-no{color:var(--dv-rose)}
  .dv-sig-nm{margin-top:6px;font-size:18px;color:var(--dv-ink)}
  .dv-sig-desc{color:var(--dv-muted)}
  .dv-sig-go{margin-top:10px;color:var(--dv-ink)}
  .dv-sig-chip,button.dv-sig-chip{height:44px;border-color:var(--dv-navy);background:var(--dv-navy);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}   /* 터치 타깃 44px */
  .dv-sig-link:focus-visible{outline-color:var(--dv-olive)}
  .dv-sig-hint{display:block}
  .dv-insight-now{flex-direction:column;align-items:flex-start;gap:12px}
  .dv-insight-btn{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:9px 6px}
}
@media (max-width:520px){
  .dv-hero-mark i{display:block;margin-top:.06em}
  .dv-hero-mark{font-size:clamp(44px,13vw,56px)}
  .dv-hero-head{font-size:19px}
  .dv-hero-actions{width:100%;flex-direction:column;align-items:stretch;gap:10px}
  .dv-hero-actions .dv-btn{width:100%}
  .dv-why-cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .dv-why-card{padding:22px 20px 24px}
  .dv-why-card .dv-card-t{margin-top:12px}
  .dv-sig-head{gap:14px}
  .dv-sig-item,.dv-sig-item.is-on{flex-basis:88%}
  .dv-sig-open{padding:16px}
  .dv-sig-chip,button.dv-sig-chip{padding:0 13px 0 11px;font-size:12.5px}
  .dv-insight-listwrap{height:min(400px,56vh)}
}
@media (prefers-reduced-motion:reduce){
  .dv-hero-video,.dv-sig-item,.dv-sig-item img,.dv-sig-open,.dv-sig-vert,.dv-sig-chip,.dv-why-card,.dv-why-card::before,.dv-insight-th img{transition:none!important}
}