/* ==========================================================
   Windmill Studio · style.css
   토스처럼 스크롤에 반응하는 장면 + 흰 설명 카드.
   [data-scrub] 섹션에는 JS가 --p(0→1, 스크롤 진행도)를 넣어 줍니다.
   ========================================================== */
:root{
  --bg:#FFFFFF; --gray:#F2F4F6; --ink:#191F28; --ink-2:#4E5968; --ink-3:#8B95A1; --line:#E5E8EB; --dim:#D1D6DB;
  --night:#0B0D12;
  --blue:#3182F6; --blue-press:#1B64DA; --blue-soft:#E8F3FF;
  --gold:#B7791F; --gold-soft:#FFF4DB;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --nav-h:64px; --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
h1,h2,h3{text-wrap:balance}
img{display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{top:16px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
section[id]{scroll-margin-top:var(--nav-h)}

/* 떠오르기 */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border-radius:14px;background:var(--blue);color:#fff;font-weight:600;white-space:nowrap;transition:background .15s,transform .15s}
.btn:hover{background:var(--blue-press)}
.btn:active{transform:scale(.97)}
.btn--sm{height:38px;padding:0 14px;border-radius:10px;font-size:.92rem}
.btn--lg{height:56px;padding:0 28px;font-size:1.05rem;border-radius:16px}

/* 상단 */
.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border-bottom:1px solid rgba(0,0,0,.05)}
.nav__inner{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em}
.brand__mark{width:22px;height:22px}
.nav__links{margin-left:auto;display:flex;gap:24px;font-size:.95rem;font-weight:500;color:var(--ink-2)}
.nav__links a:hover{color:var(--ink)}

/* 고정 무대: 섹션이 길고, 안쪽 .pin 이 화면에 붙어 있는 동안 장면이 바뀝니다 */
.pin{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));overflow:hidden}

/* ---------- 첫 화면 ---------- */
.hero{height:230svh;--q:min(1, calc(var(--p,0) * 1.5))}
.hero .pin{display:grid;place-items:center;background:#fff}
.hero__media{position:absolute;inset:0;overflow:hidden;clip-path:inset(calc(var(--q) * 8%) calc(var(--q) * 7%) round calc(var(--q) * 40px));background:var(--night)}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.2 - var(--q) * .2))}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,14,.2),rgba(8,10,14,.55))}
.hero__copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center;color:#fff}
.hero__copy--a{opacity:calc(1 - var(--p,0) * 3.2);transform:translateY(calc(var(--p,0) * -90px))}
.hero__copy--b{--r:clamp(0, calc((var(--p,0) - .42) * 3.5), 1);opacity:var(--r);transform:translateY(calc((1 - var(--r)) * 50px)) scale(calc(.96 + var(--r) * .04))}
.kicker{font-size:.85rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hero h1{margin-top:18px;font-size:clamp(2.4rem,7vw,5rem);font-weight:800;letter-spacing:-.045em;line-height:1.18}
.hero__sub{margin-top:20px;font-size:clamp(1.02rem,1.8vw,1.2rem);color:rgba(255,255,255,.85)}
.hero__big{font-size:clamp(2rem,5.6vw,4.2rem);font-weight:800;letter-spacing:-.045em;line-height:1.25}


/* ---------- 한 단어씩 채워지는 문장 ---------- */
.words{height:220svh}
.words .pin{display:grid;place-items:center}
.words__text{font-size:clamp(1.6rem,4.2vw,3.3rem);font-weight:800;letter-spacing:-.04em;line-height:1.4;text-align:center}
.words__line{display:block;text-wrap:balance}
.words__line--gap{margin-top:.8em}
.words .w{color:var(--dim);transition:color .35s}
.words .w.on{color:var(--ink)}

/* ---------- 서비스 장면: 작은 사진 → 화면 가득 ---------- */
.scene{height:260svh;background:var(--night);--ix:30%;--iy:20%;--q:min(1, calc(var(--p,0) * 1.7))}
.scene .pin{background:var(--night)}
.scene__media{position:absolute;inset:0;overflow:hidden;clip-path:inset(calc((1 - var(--q)) * var(--iy)) calc((1 - var(--q)) * var(--ix)) round calc((1 - var(--q)) * 32px))}
.scene__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(calc(1.12 - var(--q) * .12))}
.scene__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,14,.05) 30%,rgba(8,10,14,.75));opacity:var(--q)}
.scene__copy{--r:clamp(0, calc((var(--p,0) - .5) * 4), 1);position:absolute;left:0;right:0;bottom:0;z-index:1;width:min(1120px,100% - 40px);margin-inline:auto;padding-bottom:clamp(48px,9vh,96px);color:#fff;opacity:var(--r);transform:translateY(calc((1 - var(--r)) * 60px))}
.scene__copy h2{margin-top:16px;font-size:clamp(3.4rem,12vw,9.5rem);font-weight:800;letter-spacing:-.055em;line-height:1}
.scene__copy p{margin-top:16px;font-size:clamp(1.25rem,2.6vw,2rem);font-weight:600;letter-spacing:-.03em;color:rgba(255,255,255,.9)}

.badge{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;font-size:.88rem;font-weight:700;background:var(--gray);color:var(--ink-2)}
.badge--award{background:var(--gold-soft);color:var(--gold)}
.badge--entry{background:var(--blue-soft);color:var(--blue)}

/* ---------- 한 줄 설명 + 아주 큰 수상 ---------- */
.detail{padding-block:clamp(88px,12vw,150px);background:#fff;text-align:center}
.detail__one{font-size:clamp(1.3rem,2.8vw,2rem);font-weight:700;letter-spacing:-.035em;line-height:1.45;color:var(--ink-2)}
.prize{margin-top:clamp(48px,7vw,88px)}
.prize.reveal{transform:translateY(40px) scale(.94)}
.prize.reveal.in{transform:none}
.prize__rank{display:block;font-size:clamp(6.4rem,22vw,17rem);font-weight:900;letter-spacing:-.06em;line-height:.95;background:linear-gradient(170deg,#F6D27A 0%,#D99A2B 45%,#9C6414 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em}
.prize--entry .prize__rank{background:linear-gradient(170deg,#7DB4FF 0%,#3182F6 50%,#1B4FB8 100%);-webkit-background-clip:text;background-clip:text}
.prize__name{margin-top:clamp(16px,2.5vw,28px);font-size:clamp(1.25rem,3vw,2.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.35}
.prize__sub{margin-top:10px;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--ink-3)}
.prize__btn{margin-top:36px}

/* ---------- 수상 ---------- */
.awards{padding-block:clamp(88px,12vw,150px);background:var(--gray)}
.awards h2,.contact h2{font-size:clamp(1.75rem,4vw,2.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.3}
.alist{margin-top:32px;border-top:2px solid var(--ink)}
.alist li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center;padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--line)}
.alist__rank{font-size:clamp(3rem,9vw,7rem);font-weight:900;letter-spacing:-.06em;line-height:1;background:linear-gradient(170deg,#F6D27A,#D99A2B 45%,#9C6414);-webkit-background-clip:text;background-clip:text;color:transparent}
.alist b{display:block;font-weight:800;font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:-.03em;line-height:1.35}
.alist div span{display:block;margin-top:6px;font-size:1rem;color:var(--ink-3)}
.press{margin-top:40px;display:grid;gap:4px;padding:28px 32px;border-radius:24px;background:#fff;transition:transform .3s var(--ease),box-shadow .3s}
.press:hover{transform:translateY(-3px);box-shadow:0 16px 40px -20px rgba(0,27,55,.25)}
.press__src{font-size:.9rem;color:var(--ink-3)}
.press b{font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:700;letter-spacing:-.03em;line-height:1.4}
.press__go{margin-top:8px;font-weight:600;color:var(--blue)}
.press__go::after{content:" \203A"}

/* ---------- 문의 ---------- */
.contact{padding-block:clamp(88px,12vw,150px);text-align:center}
.contact p{margin-top:14px;color:var(--ink-2)}
.contact .btn{margin-top:32px}

/* ---------- 하단 ---------- */
.footer{padding:36px 0 48px;font-size:.9rem;color:var(--ink-3);border-top:1px solid var(--line)}
.footer b{color:var(--ink-2)}
.footer__inner{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}

/* ---------- 좁은 화면 ---------- */
@media (max-width:900px){
  .nav__links{display:none}
  .nav .btn{margin-left:auto}
}
@media (max-width:640px){
  .hero{height:210svh}
  .scene{height:230svh;--ix:9%;--iy:24%}
  .words{height:200svh}
  .words__text{text-align:left;font-size:1.55rem}
  .scene__copy{padding-bottom:44px}
  .prize__btn{width:100%}
  .alist li{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .press{padding:24px}
  .contact{text-align:left}
  .contact .btn{width:100%}
  .footer__inner{flex-direction:column;align-items:flex-start}
}