/* D 첫 화면 3판 — 슬로건 배경 글씨 + 한 줄 제목 겹침 · 같은 바탕 위 계단 · 아래 보라 띠에 광고주 로고가 흐름 (지수님 10-19) */
.hv .nav{position:absolute;left:0;right:0;top:0;z-index:10}
.hvD .hd{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;min-height:max(780px,100dvh);display:flex;flex-direction:column}
.hvD .in3{flex:1;display:flex;flex-direction:column;width:100%;max-width:1296px;margin:0 auto;padding:118px 48px 0}

/* 슬로건(배경) + 제목(앞) — 둘 다 칸 폭에 맞춤 */
.hvD .stage{position:relative;container-type:inline-size}
.hvD .slogan{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:10.6cqw;line-height:1;letter-spacing:-.025em;color:#DCD1E6;white-space:nowrap;margin-left:-.03em;user-select:none}
.hvD .stage h1{position:relative;z-index:2;margin-top:-.42em;font-size:8.8cqw;line-height:1.15;letter-spacing:-.055em;font-weight:800;white-space:nowrap}
.hvD .stage h1 .ln{display:inline-block}
.hvD .stage h1 em{font-style:normal;color:var(--brand)}
.hvD .stage h1 em:after{display:none}

/* 가운데 — 왼쪽 글 · 단추 / 오른쪽 계단(같은 바탕 위) */
.hvD .mid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;min-height:260px}
.hvD .sub3{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--muted)}
.hvD .cta3{display:flex;align-items:center;gap:24px;margin-top:26px}
.hvD .cta3 .pill{height:56px;font-size:16px;padding-left:26px}.hvD .cta3 .pill i{width:42px;height:42px}
.hvD .art3{align-self:end;justify-self:end;width:min(100%,560px);margin-bottom:-6px}
.hvD .art3 img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,#000 86%,transparent 100%)}

/* 아래 — 왼쪽 끝까지 붙은 보라 로고 띠 · 오른쪽 숫자 셋 */
.hvD .bot{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch;position:relative;z-index:2}
.hvD .mq{background:var(--brand);overflow:hidden;display:flex;align-items:center;min-height:120px;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%)}
.hvD .mq .tr{list-style:none;display:flex;flex:none;align-items:center}
.hvD .mq li{flex:none;display:grid;place-items:center;width:168px;height:120px;border-right:1px solid rgba(255,255,255,.14)}
.hvD .mq img{display:block;height:calc(var(--h) * .82);width:auto;max-width:120px}
.hvD .stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;padding:22px max(48px,calc((100vw - 1296px) / 2 + 48px)) 26px 32px;background:var(--paper)}
.hvD .stats3 div{padding:0 14px 0 0}
.hvD .stats3 div+div{padding-left:16px;border-left:1px solid var(--rule)}
.hvD .stats3 b{display:block;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:clamp(24px,2.1vw,34px);line-height:1.05;letter-spacing:-.04em;color:var(--brand);white-space:nowrap}
.hvD .stats3 b small{font-family:Pretendard,sans-serif;font-weight:800;font-size:.55em;margin-left:2px}
.hvD .stats3 span{display:block;margin-top:8px;font-size:13.5px;font-weight:700;line-height:1.45}
.hvD .stats3 em{display:block;margin-top:4px;font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.5}

@media(max-width:1100px){
  .hvD .bot{grid-template-columns:minmax(0,1fr)}
  .hvD .stats3{padding:22px 48px 26px}
  .hvD .mq{-webkit-mask-image:none;mask-image:none}
}
/* 폰 — 제목은 두 줄(한 줄이면 글이 너무 작아짐) */
@media(max-width:720px){
  .hvD .hd{min-height:0}
  .hvD .in3{padding:92px 20px 0}
  .hvD .stage h1{font-size:clamp(36px,11.2cqw,46px);white-space:normal;margin-top:-.32em}
  .hvD .stage h1 .ln{display:inline}
  .hvD .mid{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:18px;min-height:0}
  .hvD .cta3{display:none}
  .hvD .art3{width:auto;margin:10px -20px 0 24%}
  .hvD .mq{min-height:88px}.hvD .mq li{width:118px;height:88px}.hvD .mq img{height:calc(var(--h) * .6);max-width:90px}
  .hvD .stats3{grid-template-columns:minmax(0,1fr);padding:8px 20px 24px}
  .hvD .stats3 div,.hvD .stats3 div+div{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:14px;align-items:baseline;padding:14px 0;border-left:0}
  .hvD .stats3 div+div{border-top:1px solid var(--rule)}
  .hvD .stats3 b{grid-row:1/3;font-size:26px}.hvD .stats3 span{margin-top:0;font-size:15px}.hvD .stats3 em{grid-column:2}
}

/* 움직임 — 슬로건이 옅게 떠오르고 → 제목 한 줄이 왼쪽부터 쓸리듯 → 나머지 · 로고 띠는 계속 흐름(손대면 멈춤) */
@media (prefers-reduced-motion:no-preference){
  .hvD .slogan{animation:dG 1.1s cubic-bezier(.16,1,.3,1) both}
  .hvD .stage h1 .ln{animation:dH .95s .3s cubic-bezier(.65,0,.35,1) both}
  .hvD .sub3,.hvD .cta3,.hvD .art3,.hvD .bot{animation:dU .9s cubic-bezier(.16,1,.3,1) both}
  .hvD .sub3{animation-delay:.75s}.hvD .cta3{animation-delay:.85s}.hvD .art3{animation-delay:.7s}.hvD .bot{animation-delay:.95s}
  .hvD .mq .tr{animation:mq 42s linear infinite}
  .hvD .mq:hover .tr{animation-play-state:paused}
}
@keyframes dG{from{opacity:0;transform:translateY(24%)}to{opacity:1;transform:none}}
@keyframes dH{from{clip-path:inset(0 100% 0 0);transform:translateX(-12px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes dU{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* 첫 화면 안에 아래 띠까지 들게 · 슬로건 기울임이 칸 밖으로 안 나가게 */
.hvD .slogan{font-size:10.1cqw}
.hvD .in3{padding-top:104px}
.hvD .mid{min-height:0;padding-top:18px}
.hvD .art3{width:min(100%,clamp(300px,34vw,520px))}
.hvD .mq{min-height:104px}.hvD .mq li{height:104px;width:156px}
.hvD .stats3{padding-top:18px;padding-bottom:20px}
@media(max-width:720px){.hvD .slogan{font-size:10.1cqw}.hvD .in3{padding-top:92px}.hvD .mq{min-height:88px}.hvD .mq li{width:118px;height:88px}}
/* 지수님 그림대로 — 띠 끝은 또렷하게 자름 · 숫자 칸 넓힘 · 부제는 제목 바로 아래 */
.hvD .mq{-webkit-mask-image:none;mask-image:none}
.hvD .bot{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)}
.hvD .mid{align-items:start}
.hvD .lft{padding-top:40px}
.hvD .art3{align-self:end}
@media(max-width:720px){.hvD .lft{padding-top:0}}
@media(max-width:720px){.hvD .art3{align-self:stretch}}
@media(max-width:1100px){.hvD .bot{grid-template-columns:minmax(0,1fr)}}

/* 4판(지수님 「저기를 아예 새로 디자인해도 돼」) — 숫자는 단추 밑 왼쪽에 선 한 줄로 · 아래는 화면 폭 전체 보라 띠에 로고만 흐름 */
.hvD .bot,.hvD .bot{display:block}
.hvD .mq{min-height:96px}.hvD .mq li{height:96px;width:176px}
.hvD .mq img{height:calc(var(--h) * .78)}
.hvD .lft .stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;padding:0;background:none;max-width:620px;border-top:1.5px solid var(--ink)}
.hvD .lft .stats3 div{padding:16px 16px 0 0;border:0}
.hvD .lft .stats3 div+div{padding-left:18px;border-left:1px solid var(--rule)}
.hvD .lft .stats3 b{font-size:clamp(26px,2.2vw,34px)}
.hvD .lft .stats3 span{font-size:13.5px}
.hvD .lft .stats3 em{font-size:12.5px}
.hvD .mid{padding-bottom:28px}
.hvD .art3{margin-bottom:-28px}
@media(max-width:1100px){.hvD .mid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
@media(max-width:720px){
  .hvD .lft .stats3{grid-template-columns:minmax(0,1fr);margin-top:22px;max-width:none}
  .hvD .lft .stats3 div,.hvD .lft .stats3 div+div{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:14px;align-items:baseline;padding:14px 0;border-left:0}
  .hvD .lft .stats3 div+div{border-top:1px solid var(--rule)}
  .hvD .lft .stats3 b{grid-row:1/3;font-size:26px}.hvD .lft .stats3 span{margin-top:0;font-size:15px}.hvD .lft .stats3 em{grid-column:2}
  .hvD .mid{padding-bottom:0}.hvD .art3{margin-bottom:-4px}
  .hvD .mq{min-height:80px}.hvD .mq li{width:120px;height:80px}.hvD .mq img{height:calc(var(--h) * .6)}
}

/* 5판(지수님 10-19) — 화면 폭 전체를 씀 · 슬로건 더 크게 · 제목은 가운데 조금 작게 · 로고 띠 얇게 */
.hv .nav{max-width:none;padding-left:clamp(20px,4vw,80px);padding-right:clamp(20px,4vw,80px)}
.hvD .in3{max-width:none;padding-left:clamp(20px,4vw,80px);padding-right:clamp(20px,4vw,80px);padding-top:96px}
.hvD .slogan{font-size:10.4cqw;text-align:center;margin-left:0;letter-spacing:-.03em}
.hvD .stage h1{text-align:center;font-size:6.2cqw;margin-top:-.62em}
.hvD .mid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hvD .art3{width:min(100%,clamp(300px,32vw,640px))}
.hvD .mq{min-height:64px}.hvD .mq li{height:64px;width:150px}
.hvD .mq img{height:calc(var(--h) * .58);max-width:96px}
@media(max-width:720px){
  .hvD .stage h1{text-align:left;font-size:clamp(34px,10.4cqw,44px);margin-top:-.3em}
  .hvD .slogan{text-align:left}
  .hvD .mq{min-height:56px}.hvD .mq li{width:104px;height:56px}.hvD .mq img{height:calc(var(--h) * .5);max-width:76px}
}
@media(min-width:721px){.hvD .lft{align-self:center;padding-top:0}}
/* 6판(지수님 그림 10-19) — 슬로건을 머리 줄 가까이 · 부제 한 줄 · 부제 → 숫자 → 단추 · 숫자 칸 넓게 · 계단 크게 */
.hvD .in3{padding-top:66px}
.hvD .mid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);padding-top:28px}
.hvD .lft{align-self:center}
.hvD .lft .stats3{max-width:860px;margin-top:34px}
.hvD .lft .stats3 em{white-space:nowrap}
.hvD .cta3{margin-top:36px}
.hvD .art3{width:min(100%,clamp(340px,36vw,720px))}
@media(min-width:1101px){.hvD .sub3 br{display:none}.hvD .sub3 .nw:first-of-type{margin-left:.45em}}
@media(max-width:1100px){.hvD .lft .stats3 em{white-space:normal}.hvD .mid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}}
@media(max-width:720px){.hvD .in3{padding-top:92px}.hvD .mid{padding-top:0}}
@media(min-width:721px){.hvD .lft{align-self:start;padding-top:46px}}
/* 7판(지수님 10-19 「좌측 여백이 좀 더 많은 느낌」) — 좌우 여백 줄이고, 왼쪽 글 묶음을 가운데 칸 높이 안에 고르게 펼쳐 아래 빈자리를 없앰 */
.hv .nav,.hvD .in3{padding-left:clamp(20px,3vw,60px);padding-right:clamp(20px,3vw,60px)}
@media(min-width:721px){
  .hvD .mid{align-items:stretch;padding-top:0}
  .hvD .lft{align-self:stretch;display:flex;flex-direction:column;justify-content:space-evenly;padding:24px 0 36px}
  .hvD .lft .stats3,.hvD .cta3{margin-top:0}
}
/* 7판 다듬기 — 간격은 촘촘히, 글 묶음을 화면 폭에 맞춰 키워 왼쪽 빈자리를 채움 */
@media(min-width:721px){
  .hvD .lft{justify-content:center;gap:clamp(26px,2.4vw,44px);padding:20px 0 40px}
  .hvD .sub3{font-size:clamp(16px,1.2vw,23px)}
  .hvD .lft .stats3{max-width:min(100%,52vw)}
  .hvD .lft .stats3 div{padding-top:clamp(14px,1.1vw,22px)}
  .hvD .lft .stats3 b{font-size:clamp(26px,2.5vw,48px)}
  .hvD .lft .stats3 span{font-size:clamp(13.5px,.85vw,16px)}
  .hvD .lft .stats3 em{font-size:clamp(12.5px,.75vw,14px)}
  .hvD .cta3 .pill{height:clamp(52px,3.3vw,64px);font-size:clamp(15px,1vw,18px)}
}
@media(max-width:1600px){.hvD .lft .stats3 em{white-space:normal}}
/* 10-19 지수님 그림: 부제는 제목 바로 아래 가운데 · 로고는 왼쪽 위 모서리 쪽으로 */
.hvD .stage .sub3{position:relative;z-index:2;text-align:center;margin-top:clamp(10px,1.4vw,28px)}
@media(min-width:1101px){.hvD .lft{padding-top:clamp(36px,4vw,80px)}}
@media(max-width:720px){.hvD .stage .sub3{text-align:left;margin-top:14px}}
/* 10-19 지수님 「어떤 PC 화면에서 열어도 아래 띠배너까지 화면 안에」 — 첫 화면 = 화면 높이 한 장. 글 크기 · 간격 · 계단은 화면 높이에도 맞춰 줄어듦 */
@media(min-width:721px){
  .hvD .hd{height:100dvh;min-height:600px}
  .hvD .in3{min-height:0;padding-top:clamp(44px,7.5vh,66px)}
  .hvD .slogan{font-size:min(10.4cqw,17vh)}
  .hvD .stage h1{font-size:min(6.2cqw,10.5vh)}
  .hvD .stage .sub3{margin-top:clamp(8px,1.6vh,28px);font-size:clamp(15px,min(1.2vw,2.3vh),23px)}
  .hvD .mid{flex:1;min-height:0}
  .hvD .lft{gap:clamp(14px,min(2.4vw,3.4vh),44px);padding-top:clamp(10px,min(4vw,4.5vh),80px);padding-bottom:clamp(10px,3vh,40px)}
  .hvD .lft .stats3 b{font-size:clamp(24px,min(2.5vw,4.6vh),48px)}
  .hvD .lft .stats3 div{padding-top:clamp(10px,min(1.1vw,1.8vh),22px)}
  .hvD .cta3 .pill{height:clamp(46px,min(3.3vw,6vh),64px)}
  .hvD .art3{min-height:0;display:flex;align-items:flex-end;justify-content:flex-end}
  .hvD .art3 img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
}
/* 10-21 밤 지수님 그림 「메인도 조금 위로 쏠린 느낌 · 조금씩 아래로」: 첫 화면 글 묶음 전체를 약 64px(903 높이 기준) 아래로 — 슬로건 · 제목 · 부제 · 숫자 · 단추가 같이 내려가고 단추 아래 빈자리가 그만큼 줄어듦 */
/* 10-22 폰에서 제목 둘째 줄이 안 보이던 것 — 인라인 줄이 두 줄로 접히면 움직임의 clip-path 가 첫 줄만 남김 → 폰은 블록으로 */
@media(max-width:720px){.hvD .stage h1 .ln{display:block}}
@media(min-width:721px){.hvD .in3{padding-top:clamp(56px,14vh,150px)}.hvD .lft{padding-top:clamp(24px,min(5.4vw,12vh),140px);padding-bottom:clamp(8px,1.6vh,24px)}}