/* SULKIT · 2026-09-15 3판 · 세로 한 장, 24시간 뼈대
   값은 맨 위 토큰에만 적는다. 아래 규칙은 토큰 이름만 쓴다. */
:root{
  /* 색: 유백(막걸리)·먹·민트(패키지 인쇄색)·물 */
  --milk:#F1EEE6; --paper:#FAF8F3; --ink:#141311; --night:#0B0A09;
  --grey:#55514B; --grey2:#8E8981; --line:#DAD6CD; --line-d:rgba(250,248,243,.16);
  --mint:#63C4AA; --mint-deep:#2E8F79; --water:#D9E0DD;
  --paper-dim:#B7B2AA; --photo:#E6E2D9;
  --milk-rgb:241,238,230; --night-rgb:11,10,9; --paper-rgb:250,248,243;

  /* 서체: 한글 제목·한글 본문·라틴 */
  --kd:"sandoll-myeongjoneo1","gyeonggi-cheonnyeon-batang","Nanum Myeongjo",serif;
  --bf:"sandoll-achim","IBM Plex Sans KR",system-ui,sans-serif;
  --lat:"neue-haas-grotesk-display","Helvetica Neue",Arial,sans-serif;
  --num:"neue-haas-grotesk-display","sandoll-achim","IBM Plex Sans KR",sans-serif;   /* 숫자·영문은 라틴, 한글은 본문 서체로 */

  /* 활자 크기 */
  --fs-h1:clamp(28px,3.4vw,50px);
  --fs-h2:clamp(30px,4.3vw,62px);
  --fs-h3:clamp(19px,1.5vw,23px);
  --fs-fks:clamp(56px,9vw,132px);
  --fs-big:clamp(30px,3.6vw,54px);        /* 경로의 숫자 */
  --fs-body:clamp(15.5px,1.1vw,17.5px);
  --fs-eb:13px; --fs-cap:13px; --fs-fine:12.5px;

  --lh-h:1.14; --lh-body:1.85;
  --ls-h:-.02em; --ls-lat:-.02em;
  --mw-body:52ch; --mw-lead:46ch;

  /* 간격 */
  --s1:12px; --s2:20px; --s3:32px; --s4:48px; --s5:72px;
  --nav:64px;
  --gx:clamp(20px,6vw,96px); --gx-m:20px;
  --sec:clamp(88px,12vw,168px);           /* 판 위아래 */
  --colgap:clamp(32px,5vw,88px);
  --ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--milk);color:var(--ink);
  font-family:var(--bf);font-weight:300;font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  word-break:keep-all;overflow-wrap:break-word;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
figure{margin:0}
h1,h2,h3{margin:0;font-family:var(--kd);font-weight:500;letter-spacing:var(--ls-h);line-height:var(--lh-h);text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);margin-bottom:var(--s2)}
p{margin:0}

/* ---------- 상단: 띠 없이, 바탕과 반대색으로 ---------- */
#nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav);z-index:70;
  display:flex;align-items:center;gap:var(--s3);padding:0 var(--gx);
  color:#fff;mix-blend-mode:difference;pointer-events:none;
}
#nav>*{pointer-events:auto}
#nav .bi img{height:30px;width:auto}
#nav .bi .k{display:none}
#links{display:flex;gap:clamp(16px,2vw,30px);margin-left:auto;font-size:14px;font-weight:300;letter-spacing:.01em}
#links a{position:relative;padding:6px 0;opacity:.85;transition:opacity .2s}
#links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
#links a:hover,#links a.on{opacity:1}
#links a:hover::after,#links a.on::after{transform:scaleX(1)}
#nav .cta{border:1px solid currentColor;border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:700;letter-spacing:.02em;transition:background .25s,color .25s}
#nav .cta:hover{background:#fff;color:#000}
#menubtn{display:none;background:none;border:1px solid currentColor;border-radius:999px;color:inherit;padding:8px 16px;font:inherit;font-size:13px;cursor:pointer}
#menu[hidden]{display:none}
#menu{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gx-m)}
#menu a{font-family:var(--kd);font-weight:500;font-size:clamp(28px,8vw,40px);padding:14px 0;border-top:1px solid var(--line-d)}
#menu a:last-child{border-bottom:1px solid var(--line-d)}

/* ---------- 판 ---------- */
.p{position:relative;padding:var(--sec) 0}
.in{max-width:1320px;margin:0 auto;padding:0 var(--gx)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--colgap);align-items:center}
.head{margin-bottom:var(--s5)}
.head.two{align-items:end}
.head.two .body{margin-bottom:.4em}
.eb{font-size:var(--fs-eb);font-weight:700;color:var(--mint-deep);letter-spacing:.02em;margin-bottom:var(--s2)}
.body,.lead{color:var(--grey);max-width:var(--mw-body)}
h2+.body,h2+.lead,h2+.spec{margin-top:var(--s3)}
.body+.body{margin-top:var(--s2)}
.dk{background:var(--night);color:var(--paper)}
.dk .body,.dk .lead{color:var(--paper-dim)}
.dk .eb{color:var(--mint)}

/* 사진 */
.ph{background:var(--photo);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.tall{aspect-ratio:4/5}
.ph.wide{aspect-ratio:21/9;margin-top:var(--s5)}
.ph.wide img{object-position:50% 78%}
.ph.band{aspect-ratio:21/9;margin-top:var(--s5)}
.ph figcaption{padding:var(--s1) 0 0}
.ph figcaption span{color:var(--grey2)}

/* 표: 스펙은 문장이 아니라 표로 */
.spec{margin:0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:minmax(96px,.32fr) 1fr;gap:var(--s2);padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6}
.spec dt{font-weight:700;color:var(--ink)}
.spec dd{margin:0;color:var(--grey);font-family:var(--num)}
.spec.fine{margin-top:var(--s5)}
.spec.fine div{font-size:13.5px;padding:11px 0}
.dk .spec,.dk .spec div{border-color:var(--line-d)}
.dk .spec dt{color:var(--paper)}

/* 사진 설명 */
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);margin-top:var(--s1);font-size:var(--fs-cap);color:var(--grey)}
.cap b{font-weight:700;color:var(--ink)}
.cap span{font-family:var(--num);color:var(--grey2);letter-spacing:0}
.dk .cap span{color:var(--paper-dim)}

/* 등장: 헤드라인과 사진만, 조용히 */
.r{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.r.on{opacity:1;transform:none}

/* ---------- 0 · 첫 화면 ---------- */
.p-hero{height:100svh;min-height:560px;padding:0;overflow:hidden}
.p-hero .iv{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.p-hero .iscrim{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 55%,rgba(var(--night-rgb),.25),rgba(var(--night-rgb),.7) 75%)}
.p-hero .itx{position:absolute;z-index:2;inset:var(--nav) 0 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:0 var(--gx)}
.p-hero .ie{color:rgba(255,255,255,.8);font-family:var(--lat);font-weight:700;font-size:clamp(12px,.95vw,14px);letter-spacing:.2em;text-transform:uppercase;opacity:0}
.p-hero .il{color:rgba(var(--paper-rgb),.8);font-family:var(--lat);font-weight:400;letter-spacing:-.02em;font-size:var(--fs-h1);line-height:1.1;text-wrap:initial}
.p-hero .sw{display:inline-grid;text-align:left;vertical-align:baseline;clip-path:inset(-.6em 0);transition:width .55s cubic-bezier(.2,.7,.2,1)}
.p-hero .sw span{grid-area:1/1;justify-self:start;width:max-content;white-space:nowrap;font-weight:700;color:#fff;opacity:0;transform:translateY(12px);filter:blur(6px);transition:opacity .55s ease,transform .55s ease,filter .55s ease}
.p-hero .sw span.on{opacity:1;transform:none;filter:blur(0)}
.p-hero .sw span.out{opacity:0;transform:translateY(-10px);filter:blur(6px)}
.p-hero .il.en>span{display:block;overflow:hidden;padding-bottom:.35em;margin-bottom:-.35em}
.p-hero .il.en>span>i{display:block;font-style:normal;transform:translateY(112%);opacity:0}
.p-hero .ik{color:rgba(255,255,255,.72);font-weight:300;font-size:clamp(14px,1.05vw,15.5px);line-height:1.5;opacity:0;transform:translateY(8px)}
.p-hero.go .il.en>span>i{animation:irise 1.1s cubic-bezier(.2,.7,.1,1) .4s both}
.p-hero.go .ie{animation:ifade 1.2s var(--ease) .25s both}
.p-hero.go .ik{animation:ikup 1.1s var(--ease) 1.1s both}
@keyframes irise{from{transform:translateY(112%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes ifade{from{opacity:0}to{opacity:1}}
@keyframes ikup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cue{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.6);font-size:12.5px;letter-spacing:.04em;opacity:0}
.p-hero.go .cue{animation:ifade 1.2s var(--ease) 2s both}
.cue i{width:1px;height:38px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.cue i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* 한글판 첫 줄: 가·양·주가 하나씩 오르고, 글자 위에 누룩꽃이 피었다가 家·釀·酒로 남는다 */
.p-hero .il.ko{padding-top:1.15em;font-family:var(--kd);font-weight:500;font-size:clamp(36px,5vw,76px);letter-spacing:-.01em;color:#fff;line-height:1.2;text-wrap:initial}
.p-hero .il.ko .gy{display:inline-block;white-space:nowrap}
.p-hero .il.ko .gy b{position:relative;display:inline-block;font-weight:inherit;opacity:0;transform:translateY(.5em)}
.p-hero .il.ko .fl{position:absolute;left:50%;top:-.82em;width:.26em;height:.26em;margin-left:-.13em;border-radius:52% 48% 55% 45%;
  background:radial-gradient(circle at 42% 40%,#fff 0,rgba(var(--milk-rgb),.95) 38%,rgba(var(--milk-rgb),.35) 62%,rgba(var(--milk-rgb),0) 74%);
  filter:blur(.3px);opacity:0;transform:scale(0)}
.p-hero .il.ko i{position:absolute;left:50%;top:-1.5em;transform:translate(-50%,.25em);font-style:normal;font-weight:300;font-size:.38em;line-height:1;letter-spacing:.04em;
  font-family:"neue-haas-grotesk-display","Noto Sans KR",sans-serif;color:rgba(var(--milk-rgb),.9);opacity:0;white-space:nowrap}
.p-hero .il.ko .rest{margin-left:.24em}
.p-hero .il.ko .rest,.p-hero .il.ko .cm{display:inline-block;opacity:0;transform:translateY(.35em);color:rgba(var(--paper-rgb),.9)}
.p-hero.go .il.ko .gy b{animation:kup .9s var(--ease) both}
.p-hero.go .il.ko .gy b:nth-child(1){animation-delay:.35s}
.p-hero.go .il.ko .gy b:nth-child(2){animation-delay:.6s}
.p-hero.go .il.ko .gy b:nth-child(3){animation-delay:.85s}
.p-hero.go .il.ko .fl{animation:bloom 1.7s var(--ease) both}
.p-hero.go .il.ko .gy b:nth-child(1) .fl{animation-delay:1.5s}
.p-hero.go .il.ko .gy b:nth-child(2) .fl{animation-delay:1.75s}
.p-hero.go .il.ko .gy b:nth-child(3) .fl{animation-delay:2s}
.p-hero.go .il.ko i{animation:hanja 1s var(--ease) both}
.p-hero.go .il.ko .gy b:nth-child(1) i{animation-delay:2.55s}
.p-hero.go .il.ko .gy b:nth-child(2) i{animation-delay:2.8s}
.p-hero.go .il.ko .gy b:nth-child(3) i{animation-delay:3.05s}
.p-hero.go .il.ko .rest,.p-hero.go .il.ko .cm{animation:kup 1.1s var(--ease) 3.5s both}
.p-hero.go.ko .ik{animation-delay:4.3s}
.p-hero.go.ko .cue{animation-delay:5s}
@keyframes kup{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}
@keyframes bloom{0%{opacity:0;transform:scale(0)}35%{opacity:1;transform:scale(1.25)}55%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes hanja{from{opacity:0;transform:translate(-50%,.25em)}to{opacity:1;transform:translate(-50%,0)}}
.p-hero.ko .ie{display:none}
.p-hero.ko .il.ko{padding-top:.7em}
.p-hero .ik.ko{font-family:var(--bf);font-weight:300;letter-spacing:-.01em;color:rgba(255,255,255,.72)}

/* ---------- 1 · 술킷: 잡지 특집 ---------- */
.p-sulkit{padding-top:0}
/* 여는 화면: 가양주 판과 같은 틀. 글은 왼쪽 단, 사진은 오른쪽 끝까지 화면 높이로 */
.p-sulkit .open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,52vw);column-gap:0;align-items:center}
.p-sulkit .open .tx{padding:var(--sec) clamp(32px,4vw,64px) var(--sec) var(--gx);max-width:calc(600px + var(--gx) + 64px);justify-self:end}
.p-sulkit .open h2{font-size:clamp(30px,3.9vw,56px)}
.p-sulkit .ph.bleed{height:min(100vh,960px)}
.p-sulkit .ph.bleed img{object-position:50% 50%}
.folio{margin-top:var(--s4);font-family:var(--lat);font-size:12.5px;letter-spacing:.08em;color:var(--grey2);text-transform:uppercase}
.p-sulkit .in{padding-top:var(--sec)}
.feat{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);column-gap:var(--colgap);align-items:start}
.cols2{columns:2;column-gap:var(--colgap);max-width:none}
.cols2 .body{max-width:none;break-inside:avoid;margin:0 0 1.2em}
.spec.side{border-top:1px solid var(--ink)}
.spec.side div{grid-template-columns:minmax(72px,.36fr) 1fr;font-size:13.5px;padding:11px 0}
.pull{margin:var(--s5) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);column-gap:var(--colgap)}
.pull p{font-family:var(--kd);font-weight:500;font-size:clamp(24px,2.6vw,40px);line-height:1.35;letter-spacing:-.01em;color:var(--ink);text-indent:-.5em}
.pull p::before{content:"\201C";color:var(--mint-deep)}
.grid3{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(14px,2.2vw,32px);align-items:end}
.grid3 .a .ph{aspect-ratio:4/3}
.grid3 .b .ph{aspect-ratio:3/4}
.grid3 .c{margin-bottom:clamp(24px,5vw,72px)}
.grid3 .c .ph{aspect-ratio:3/4}
.grid3 .cap{display:block}
.marks{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);align-items:start}
.marks .body{font-size:15px}

/* ---------- 1.5 · 화보: 셋이 다른 높이로 ---------- */
.p-mat{padding-top:0}
.spread{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.05fr .9fr 1.05fr;gap:clamp(14px,2.2vw,32px);align-items:start}
.spread li:nth-child(1) .ph{aspect-ratio:4/5}
.spread li:nth-child(2){margin-top:clamp(40px,9vw,140px)}
.spread li:nth-child(2) .ph{aspect-ratio:1}
.spread li:nth-child(3){margin-top:clamp(20px,4vw,64px)}
.spread li:nth-child(3) .ph{aspect-ratio:4/5}
.spread .cap{display:block}
.spread .cap b{display:block}
.spread .cap span{display:block;margin-top:2px}

/* ---------- 2 · 빚는 법 ---------- */
.p-how{background:var(--paper)}
.p-how .head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:var(--colgap);align-items:end}
.p-how .head .eb{grid-column:1/-1}
.p-how .head .body{margin:0 0 .3em}
.p-how .late{margin-top:var(--s5);grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
.p-how .late .ph.wide{margin:0;aspect-ratio:3/2}
.p-how .late .spec.fine{margin:0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.steps figure{aspect-ratio:4/5;overflow:hidden;background:var(--photo)}
.steps video{width:100%;height:100%;object-fit:cover}

/* ---------- 3 · 국경 ---------- */
.p-why{overflow:hidden}
.p-why .side{position:absolute;top:0;right:0;bottom:0;width:46vw;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.p-why .side img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.8)}
.p-why .side::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0,rgba(var(--night-rgb),0) 22%,rgba(var(--night-rgb),0) 78%,var(--night) 100%)}
.p-why .in{position:relative}
.p-why .tx{max-width:min(100%,600px)}
.route{margin-top:var(--s5);max-width:min(100%,820px)}
.route .ends{display:flex;justify-content:space-between;font-size:var(--fs-cap);color:var(--paper-dim);margin-bottom:var(--s2)}
.route .ln{position:relative;height:1px;background:var(--line-d)}
.route .ln i{position:absolute;inset:0;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.65,0,.2,1) .3s}
.p.on .route .ln i{transform:scaleX(1)}
.route ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.route li{position:relative;padding-top:var(--s3)}
.route li::before{content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--paper)}
.route li:last-child::before{background:var(--mint)}
.route li b{display:block;font-family:var(--num);font-weight:700;font-size:var(--fs-big);letter-spacing:var(--ls-lat);line-height:1;color:var(--paper)}
.route li span{display:block;margin-top:var(--s1);font-size:var(--fs-cap);color:var(--paper-dim);max-width:12em}

/* ---------- 4 · 제품 ---------- */
.p-products .head.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--colgap)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.cards figure{aspect-ratio:1;overflow:hidden;background:var(--photo)}
.cards img{width:100%;height:100%;object-fit:cover}
.cards .cap b{font-family:var(--num);font-size:18px;letter-spacing:var(--ls-lat)}

/* ---------- 5 · 이야기 ---------- */
.p-story{background:var(--paper);padding:0}
/* 글은 왼쪽 단, 사진은 오른쪽 화면 끝까지 꽉 차게 */
.p-story .in.two{max-width:none;padding:0;grid-template-columns:minmax(0,1fr) minmax(0,54vw);column-gap:0;align-items:center}
.p-story .tx{padding:var(--sec) clamp(36px,5vw,80px) var(--sec) var(--gx);max-width:calc(560px + var(--gx) + 80px);justify-self:end}
.p-story .ph.tall{aspect-ratio:auto;height:min(100vh,960px)}
.p-story .ph.tall figcaption{padding:var(--s1) var(--gx) 0 var(--s2)}
.namefig{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s2);font-family:var(--lat);line-height:1}
.namefig .was{position:relative;font-size:18px;color:var(--grey2)}
.namefig .was::after{content:"";position:absolute;left:-.06em;right:-.06em;top:50%;height:1px;background:var(--grey2)}
.namefig .now{font-size:clamp(34px,3.6vw,52px);font-weight:700;letter-spacing:-.04em}
.anat{display:flex;align-items:flex-end;gap:var(--s2);margin-bottom:var(--s2);max-width:400px}
.anat img{width:112px}
.anat .note{font-size:var(--fs-cap);color:var(--grey);padding-bottom:6px}
.anat .note span::before{content:"";display:inline-block;width:22px;height:1px;background:var(--ink);vertical-align:middle;margin-right:8px}
.anat .n2{margin-left:auto}

/* ---------- 6 · 닫는 판 ---------- */
.p-soul{overflow:hidden;padding-bottom:0}
.p-soul .side{position:absolute;top:0;right:0;height:min(100%,900px);width:50vw;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);mask-image:linear-gradient(90deg,transparent 0,#000 45%)}
.p-soul .side img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.75)}
.p-soul .side::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0,rgba(var(--night-rgb),0) 24%,rgba(var(--night-rgb),0) 70%,var(--night) 100%)}
.p-soul .in{position:relative}
.p-soul .tx{max-width:min(100%,640px)}
.fks{font-family:var(--lat);font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:.9;font-size:var(--fs-fks);color:var(--paper)}
.fks span{display:block}
.p-soul .lead{margin-top:var(--s4);max-width:var(--mw-lead)}
.ask{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-d);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--colgap);row-gap:var(--s2);align-items:center;max-width:min(100%,820px)}
.ask .eb{grid-column:1/-1;margin:0}
.ask .body{max-width:44ch}
.btn{display:inline-block;background:var(--mint);color:var(--ink);font-weight:700;font-size:14.5px;padding:14px 26px;border-radius:999px;transition:background .25s;justify-self:start}
.btn:hover{background:#7ad3bb}
.ask .who{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s3);font-family:var(--num);font-size:14px;color:var(--paper-dim)}
.ask .who a:hover{color:var(--paper)}
.foot{position:relative;margin-top:var(--s5);padding:var(--s3) var(--gx) var(--s4);border-top:1px solid var(--line-d);font-size:var(--fs-fine);line-height:1.8;color:var(--grey2);font-family:var(--num)}
.foot p{max-width:1320px;margin:0 auto}

/* ---------- 잔: 내려갈수록 차오른다 ---------- */
#cup{--lvl:0;--milk:0%;position:fixed;right:clamp(16px,2.4vw,36px);bottom:clamp(16px,2.4vw,32px);z-index:65;width:44px;text-align:center;pointer-events:none;color:var(--ink);transition:color .4s}
#cup svg{width:30px;height:89px;overflow:visible}
#cup .rim{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.7}
#cup .cap{fill:currentColor;opacity:.55;stroke:none}
#cup .liq{fill:color-mix(in srgb,var(--water),#FAF3E1 var(--milk));transform:translateY(calc(var(--lvl) * -114px));transition:transform .5s var(--ease),fill .6s}
#cup .bub circle{fill:rgba(255,255,255,.9);opacity:0}
#cup.live .bub circle{animation:bub 3.2s linear infinite}
#cup.live .bub circle:nth-child(2){animation-delay:.9s}
#cup.live .bub circle:nth-child(3){animation-delay:1.7s}
@keyframes bub{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(-90px)}}
#cup p{margin:4px 0 0;font-family:var(--lat);font-size:12px;letter-spacing:.02em;opacity:.8}
body.dark #cup{color:var(--paper)}

/* ---------- 세로 화면 ---------- */
@media (max-width:860px){
  :root{--gx:var(--gx-m);--sec:72px;--s5:44px}
  #nav{gap:var(--s2)}
  #nav .bi img{height:26px}
  #links,#nav .cta{display:none}
  #menubtn{display:block;margin-left:auto}
  .two,.p-sulkit .open,.p-how .head,.p-products .head.two,.p-how .late,.feat,.pull{display:block}
  .p-sulkit .ph.bleed{height:auto;aspect-ratio:4/5}
  .p-sulkit .open .tx{padding:var(--sec) var(--gx-m) var(--s4);max-width:none}
  .p-sulkit .in{padding-top:var(--s5)}
  .cols2{columns:1}
  .spec.side{margin-top:var(--s3)}
  .grid3{grid-template-columns:1fr 1fr;gap:12px}
  .grid3 .a{grid-column:1/-1}
  .grid3 .c{margin-bottom:0}
  .marks article+article{margin-top:var(--s4)}
  .p-story .in.two{display:block}
  .p-story .tx{padding:var(--sec) var(--gx-m) var(--s4);max-width:none}
  .p-story .ph.tall{height:auto;aspect-ratio:4/5;margin:0}
  .p-story .ph.tall figcaption{padding:var(--s1) var(--gx-m) var(--s4)}
  .spread{grid-template-columns:1fr 1fr;gap:14px}
  .spread li:nth-child(2),.spread li:nth-child(3){margin-top:0}
  .spread li:nth-child(3){grid-column:1/-1}
  .spread li:nth-child(3) .ph{aspect-ratio:3/2}
  .p-how .late .ph.wide{margin:0 0 var(--s3)}
  .ph.tall{margin-bottom:var(--s3)}
  .p-how .head .body{margin-top:var(--s2)}
  .steps,.cards{grid-template-columns:1fr 1fr;gap:14px}
  .ph.wide,.ph.band{aspect-ratio:4/3;margin-top:var(--s4)}
  .p-why .side,.p-soul .side{position:static;width:auto;height:64vw;margin:0 0 var(--s4);-webkit-mask-image:none;mask-image:none}
  .p-why .side::after,.p-soul .side::after{display:none}
  .p-why{padding-top:0}
  .p-soul{padding-top:0}
  .route ol{grid-template-columns:1fr 1fr;row-gap:var(--s3)}
  .ask{grid-template-columns:1fr}
  .foot{padding-left:var(--gx-m);padding-right:var(--gx-m)}
  #cup{width:30px;right:14px;bottom:14px}
  #cup svg{width:22px;height:64px}
  .p-hero .il{font-size:min(7.4vw,30px);white-space:normal}
  .p-hero .il.ko{font-size:min(8.6vw,36px)}
  .p-hero .il.ko .rest{display:block;margin-left:0}
  .p-hero .itx{padding:0 var(--gx-m);gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r,.route .ln i,.p-hero .ie,.p-hero .ik,.p-hero .il>span>i,.cue,.p-hero .il.ko .gy b,.p-hero .il.ko i,.p-hero .il.ko .rest,.p-hero .il.ko .cm{transition:none!important;animation:none!important;opacity:1;transform:none}
  .p-hero .il.ko i{transform:translate(-50%,0)}
  .p-hero .il.ko .fl{display:none}
  #cup .liq{transition:none}
}