/* soonwoo.alfred.pet v3 — 권순우 대표 소개 1장
   색 = 알프래드 디자인시스템 토큰만(새 색 0). 피치는 버튼·종점에만 쓴다(밝은 필드 위 피치 글자 금지 — 2.03:1).
   시그니처 = 「한 문장 레일」: 상단 단어 내비 → 스크롤하면 원형 버블 → 종점은 연락 구간의 큰 피치 버튼.
   움직임 = transform/opacity만. 숨김 초기 상태는 html.mo(스크립트 있음 + 모션 허용)일 때만 건다. */
:root{
  --coffee-dark:#3E2B22;--coffee-mid:#4A3529;--coffee-warm:#6B4F3F;
  --peach:#E8A87C;--peach-deep:#D99366;--peach-soft:#F2D4B8;
  --cream:#FAF6F0;--beige:#E8D9C4;--beige-soft:#F0E4D3;--white:#FFFFFF;
  --text-strong:#2C1D14;--text-sub:#8A7060;
  --ink:var(--text-strong);--sub:var(--coffee-warm);--line:rgba(62,43,34,.16);--focus:var(--coffee-dark);
  --pad:clamp(20px,6vw,96px);--sec:clamp(72px,15vh,168px);--r:14px;
  --io:cubic-bezier(.76,0,.24,1);--out:cubic-bezier(.22,1,.36,1);--in:cubic-bezier(.64,0,.78,0);--back:cubic-bezier(.34,1.56,.64,1);
  --font:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
}
@font-face{font-family:'Pretendard';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/Pretendard-Regular.subset.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/Pretendard-Medium.subset.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/Pretendard-Bold.subset.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:900;font-style:normal;font-display:swap;src:url('../fonts/Pretendard-Black.subset.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.75 var(--font);font-synthesis:none;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500;line-height:1.25;letter-spacing:-.025em;text-wrap:balance}
h2{max-width:22em;margin-bottom:clamp(28px,4vw,56px);font-size:clamp(28px,3.5vw,52px)}
h2.big{max-width:none;font-size:clamp(28px,4.1vw,62px);line-height:1.3}
h3{font-weight:700;font-size:18px;letter-spacing:-.01em}
p{margin:0 0 1em}
figure{margin:0}
figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:var(--sub)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:1680px;margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:0;z-index:200;padding:12px 18px;border-radius:0 0 10px 10px;background:var(--cream);color:var(--coffee-dark);font-weight:700}
.skip:focus{left:16px}
.frame{position:relative;overflow:hidden;border-radius:var(--r);background:var(--beige-soft)}
.frame picture,.frame img{display:block;width:100%;height:100%}
.frame img{object-fit:cover}
.frame.par picture{position:absolute;left:0;top:-14%;height:128%}

/* ── 로더: 인사말 → 위로 빠지며 아래 모서리가 호(弧)로 말린다. html.ld일 때만 존재한다 ── */
.loader{display:none}
html.ld .loader{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--coffee-dark);color:var(--cream);transition:transform .66s var(--io);animation:ld-safe .01s linear 3.4s forwards}
html.ld .loader.out{transform:translateY(-100%)}
.ld-w{display:flex;align-items:center;gap:.5em;margin:0;font-weight:500;font-size:clamp(28px,4vw,52px);letter-spacing:-.02em;animation:ld-in .3s ease both}
.ld-w i{width:.26em;height:.26em;border-radius:50%;background:var(--cream)}
.ld-curve{position:absolute;left:0;right:0;top:calc(100% - 1px);height:14vh;overflow:hidden;transform-origin:50% 0;transition:transform .66s var(--io)}
.ld-curve::before{content:'';position:absolute;left:-10%;top:-100%;width:120%;height:200%;border-radius:50%;background:var(--coffee-dark)}
.loader.out .ld-curve{transform:scaleY(0)}
@keyframes ld-in{from{opacity:0;transform:translateY(16px)}}
@keyframes ld-safe{to{visibility:hidden}}

/* ── 상단 내비(레일) — 히어로 위에 얹혀 같이 흘러 올라간다 ── */
.top{position:absolute;left:0;right:0;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:clamp(16px,2.4vw,34px) var(--pad);color:var(--cream);--focus:var(--cream)}
.top .logo{display:inline-flex;margin-right:auto;padding:8px 0}
.top .logo img{width:auto;height:22px;filter:invert(1)}
.rail ul{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none}
.rail a{position:relative;display:block;padding:10px 14px;font-weight:500;font-size:16px;text-decoration:none}
.rail a::after{content:'';position:absolute;left:50%;bottom:1px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .4s var(--out)}
.rail a:hover::after,.rail a:focus-visible::after{transform:none}
.go{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--peach);color:var(--coffee-dark);font-weight:700;font-size:15px;text-decoration:none}
.go:hover{background:var(--peach-deep)}
.go:focus-visible{border-radius:999px}
.menu-t{display:none;align-items:center;gap:8px;min-height:44px;padding:0 2px 0 8px;border:0;background:none;color:inherit;font:500 16px/1 var(--font);cursor:pointer}
.menu-t i{width:6px;height:6px;border-radius:50%;background:currentColor}
@media (max-width:719px){
  .rail{order:3;width:100%}
  .rail a{padding:8px 10px;font-size:15px}
  html.js .rail{display:none}
  html.js .menu-t{display:inline-flex}
}

/* ── 버블 + 서랍 ── */
.fab,.now{display:none}
html.js .fab{position:fixed;top:clamp(12px,2vw,28px);right:clamp(12px,2vw,28px);z-index:70;display:flex;align-items:center;gap:12px;pointer-events:none;--focus:var(--coffee-dark)}
.fab-b{display:block;transform:scale(0);visibility:hidden;transition:transform .4s var(--in),visibility 0s .4s}
.fab.on .fab-b,.fab.open .fab-b{transform:none;visibility:visible;transition:transform .7s var(--back),visibility 0s}
.bubble{position:relative;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--coffee-dark);color:var(--cream);box-shadow:0 0 0 1px rgba(250,246,240,.24);overflow:hidden;isolation:isolate;pointer-events:auto;cursor:pointer;transition:color .3s}
.bubble:focus-visible{border-radius:50%}
.fab.inv{--focus:var(--cream)}
.fab.inv .bubble{background:var(--cream);color:var(--coffee-dark);box-shadow:0 0 0 1px rgba(62,43,34,.18)}
.bars{position:relative;display:block;width:24px;height:10px}
.bars i{position:absolute;left:0;right:0;height:1.6px;background:currentColor;transition:transform .5s var(--io)}
.bars i:first-child{top:0}
.bars i:last-child{bottom:0}
.fab.open .bars i:first-child{transform:translateY(4.2px) rotate(45deg)}
.fab.open .bars i:last-child{transform:translateY(-4.2px) rotate(-45deg)}
@media (min-width:720px){
  .bubble{width:64px;height:64px}
  html.js .now{display:block;padding:9px 16px;border-radius:999px;background:var(--cream);color:var(--coffee-dark);box-shadow:0 0 0 1px rgba(62,43,34,.14);font-weight:500;font-size:15px;line-height:1.4;opacity:0;transform:translateX(14px);transition:opacity .35s,transform .5s var(--out)}
  html.js .now.show{opacity:1;transform:none}
  html.js .now.end{background:var(--peach);box-shadow:none}
}
.scrim{position:fixed;inset:0;z-index:50;background:rgba(44,29,20,.52);opacity:0;transition:opacity .6s var(--io)}
.scrim.open{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:55;display:flex;width:min(560px,100%);background:var(--coffee-dark);color:var(--cream);transform:translateX(calc(100% + 13vw));transition:transform .8s var(--io);--focus:var(--cream)}
.drawer.open{transform:none}
.drawer[hidden],.scrim[hidden]{display:none}
.dr-curve{position:absolute;top:-10%;right:calc(100% - 1px);width:12vw;height:120%;overflow:hidden;transform-origin:100% 50%;transition:transform .85s var(--io)}
.dr-curve::before{content:'';position:absolute;left:0;top:0;width:200%;height:100%;border-radius:50%;background:var(--coffee-dark)}
.drawer.open .dr-curve{transform:scaleX(0)}
.dr-in{display:flex;flex-direction:column;justify-content:center;width:100%;padding:clamp(76px,11vh,140px) clamp(28px,5vw,72px) 36px clamp(52px,6vw,84px);overflow-y:auto}
.dr-h{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid rgba(250,246,240,.22);font-size:13px;color:var(--beige-soft)}
.dr-nav,.dr-links{margin:0;padding:0;list-style:none}
.dr-nav{margin-bottom:clamp(24px,4vh,44px)}
.dr-nav a{position:relative;display:block;padding:5px 0;font-weight:500;font-size:clamp(30px,5.2vh,54px);line-height:1.2;letter-spacing:-.035em;text-decoration:none;transition:transform .45s var(--out)}
.dr-nav a::before{content:'';position:absolute;left:-26px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--cream);transform:scale(0);transition:transform .35s var(--out)}
.dr-nav li:last-child a::before{background:var(--peach)}
.dr-nav a:hover,.dr-nav a:focus-visible,.dr-nav a[aria-current]{transform:translateX(26px)}
.dr-nav a:hover::before,.dr-nav a:focus-visible::before,.dr-nav a[aria-current]::before{transform:none}
.dr-links li{margin:2px 0}
.dr-links a{display:inline-block;padding:7px 0;font-size:16px;text-underline-offset:4px}
html.mo .drawer li{opacity:0;transform:translateX(70px);transition:transform .4s var(--in),opacity .3s}
html.mo .drawer.open li{opacity:1;transform:none;transition:transform .9s var(--out) calc(.16s + var(--n,0)*45ms),opacity .6s ease calc(.16s + var(--n,0)*45ms)}
.drawer li:nth-child(2){--n:1}.drawer li:nth-child(3){--n:2}.drawer li:nth-child(4){--n:3}.drawer li:nth-child(5){--n:4}.drawer li:nth-child(6){--n:5}.drawer li:nth-child(7){--n:6}
.dr-links li{--n:7}
@media (hover:none){html.lock{overflow:hidden}}

/* ── 히어로: 중간 톤 coffee 필드 + 컷아웃 + 이름 마퀴(인물 뒤) ──
   좁은 화면 = 위에서 아래로 쌓는다(직함 → 위치 알약 → 마퀴 → 인물). 마퀴는 늘 글자 아래·인물 뒤라 서로 가리지 않는다.
   1100px 이상 = 인물 가운데, 마퀴는 바닥, 직함(오른쪽)·알약(왼쪽)은 마퀴 바로 위 같은 선에 앉는다. */
.hero{position:relative;display:flex;flex-direction:column;min-height:max(100vh,620px);overflow:hidden;background:linear-gradient(180deg,var(--coffee-warm) 55%,var(--coffee-mid) 100%);color:var(--cream);--focus:var(--cream);--mq:clamp(96px,26vw,210px);--fig:min(54vh,106vw);--top:150px}
html.js .hero{--top:clamp(104px,12vw,128px)}
.hero-info{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:var(--top) var(--pad) 28px}
.hero-role svg{margin-bottom:12px}
.hero-role p{margin:0;font-weight:500;font-size:clamp(19px,2.6vw,24px);line-height:1.45;letter-spacing:-.015em}
.hero-loc{display:flex;align-items:center;gap:14px;margin-left:calc(var(--pad)*-1);padding:8px 8px 8px var(--pad);border-radius:0 999px 999px 0;background:var(--coffee-dark)}
.hero-loc p{margin:0;font-size:14px;line-height:1.4}
.hero-loc p svg{display:inline-block;margin-right:6px;vertical-align:-1px}
.globe{display:grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--coffee-warm)}
.mer{transform-box:fill-box;transform-origin:center}
.m1{transform:scaleX(.72)}.m2{transform:scaleX(.36)}.m3{transform:scaleX(0)}
html.mo .mer{animation:mer 5.4s ease-in-out infinite alternate}
html.mo .m2{animation-delay:-1.8s}
html.mo .m3{animation-delay:-3.6s}
@keyframes mer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.mq{overflow:hidden}
.mq-t{display:flex;width:max-content;margin:0;white-space:nowrap;will-change:transform}
.mq-i{flex:0 0 auto}
.mq-i i{font-style:normal}
.hero-mq{position:relative;z-index:1;margin-top:auto;font-size:var(--mq);pointer-events:none}
.hero-mq .mq-t{max-width:none;font-weight:500;font-size:1em;line-height:1.08;letter-spacing:-.04em}
.hero-mq .mq-i{padding-right:.26em}
.hero-mq .mq-i i{display:inline-block;width:.8em;height:.045em;margin:0 .1em;overflow:hidden;vertical-align:.3em;background:currentColor;opacity:.55;text-indent:-9em}
.hero-fig{position:relative;z-index:2;flex:0 0 auto;align-self:center;height:var(--fig);aspect-ratio:1039/1176;margin-top:calc(var(--mq)*-.6)}   /* 컷아웃의 위쪽 84%만 보인다. 그 아래(팔이 이미지 좌우 끝에 닿아 잘린 곳)는 히어로 바닥 밖으로 흘러 잘린다 */
.hero-fig picture,.hero-fig img{display:block;width:100%;height:auto}
@supports (height:1svh){.hero{min-height:max(100svh,620px);--fig:min(54svh,106vw)}}
@media (min-width:720px) and (max-width:1099px){
  .hero{--mq:clamp(140px,18vw,190px);--fig:min(62vh,84vw)}
  @supports (height:1svh){.hero{--fig:min(62svh,84vw)}}
  .hero-info{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .hero-loc{flex-direction:row-reverse;margin:0 calc(var(--pad)*-1) 0 0;padding:8px var(--pad) 8px 8px;border-radius:999px 0 0 999px}
}
@media (min-width:1100px){
  .hero{display:block;min-height:max(100vh,700px);--mq:clamp(150px,15vw,300px);--fig:min(84vh,50vw)}
  .hero-info{position:static;padding:0}
  .hero-role{position:absolute;z-index:3;right:var(--pad);bottom:calc(6vh + var(--mq) + 40px)}
  .hero-role p{font-size:clamp(18px,1.65vw,28px)}
  .hero-loc{position:absolute;z-index:3;left:0;bottom:calc(6vh + var(--mq) + 40px);margin:0;padding:10px 10px 10px var(--pad)}
  .hero-mq{position:absolute;left:0;right:0;bottom:6vh;margin:0}
  .hero-fig{position:absolute;left:0;right:0;bottom:0;width:calc(var(--fig)*1039/1176);margin:0 auto}
  @supports (height:1svh){.hero{min-height:max(100svh,700px);--fig:min(84svh,50vw)}}
}

/* ── 원형 자석 버튼 · 알약 버튼 — 호버하면 안에서 색이 아래에서 차오르고, 떠날 땐 위로 빠진다 ── */
.round{position:relative;display:grid;place-items:center;width:var(--d,172px);height:var(--d,172px);border-radius:50%;background:var(--coffee-dark);color:var(--cream);font-weight:500;font-size:17px;line-height:1.3;text-align:center;text-decoration:none;overflow:hidden;isolation:isolate;transition:color .3s}
.round:focus-visible{border-radius:50%}
.round.big{background:var(--peach);color:var(--coffee-dark);font-weight:700;font-size:clamp(16px,1.35vw,20px)}
.fill{position:absolute;z-index:-1;left:-10%;top:-25%;width:120%;height:150%;border-radius:50%;background:var(--peach);transform:translateY(86%)}
.round.big .fill{background:var(--peach-deep)}
.tx{position:relative;display:block}
.pillbtn{position:relative;display:inline-flex;align-items:center;min-height:56px;padding:0 28px;border:1px solid var(--line);border-radius:999px;font-weight:500;font-size:16px;text-decoration:none;overflow:hidden;isolation:isolate;transition:color .3s}
.pillbtn:focus-visible{border-radius:999px}
.pillbtn .fill{left:-5%;top:-60%;width:110%;height:220%}
.pillbtn sup{position:relative;top:-.5em;margin-left:3px;font-size:.62em;line-height:0;vertical-align:baseline}
.is-in>.fill,a:focus-visible>.fill,button:focus-visible>.fill,html:not(.js) a:hover>.fill{transform:none;transition:transform .55s var(--out)}
.is-out>.fill{transform:translateY(-86%);transition:transform .4s var(--in)}
.round.is-in,.pillbtn.is-in,.bubble.is-in,.round:focus-visible,.pillbtn:focus-visible,.bubble:focus-visible,html:not(.js) .round:hover,html:not(.js) .pillbtn:hover{color:var(--coffee-dark)}

/* ── 인트로 ── */
.intro{padding:var(--sec) 0 calc(var(--sec)*.75)}
.intro-g{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.intro-g h2{margin:0}
.intro-side p{max-width:26em;margin:0;font-size:clamp(16px,1.2vw,18px);color:var(--sub)}
.round-w{display:inline-block;margin-top:clamp(24px,3vw,48px)}
@media (min-width:900px){
  .intro-g{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:clamp(48px,7vw,128px)}
  .intro-side{padding-top:.7em}
}
.nums,.funding{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,56px);margin:clamp(48px,7vw,112px) 0 0;padding:0;list-style:none}
.nums li,.funding li{padding-top:18px;border-top:1px solid var(--ink)}
.nums b,.funding b,.rev b{display:inline-block;font-weight:900;font-size:clamp(40px,5.2vw,88px);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.nums small,.funding small{display:block;margin-top:14px;font-size:14px;line-height:1.55;color:var(--sub)}
@media (max-width:719px){.nums,.funding{grid-template-columns:1fr;gap:26px}}

/* ── 본문 구간 공통 ── */
.block{padding:var(--sec) 0}
.alt{background:var(--beige-soft)}
.prose{max-width:36em}
.prose p{font-size:clamp(17px,1.25vw,19px)}

/* S3 이야기 */
.story{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start}
.story .frame{aspect-ratio:4/3}
@media (min-width:900px){.story{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.quote{position:relative;margin:clamp(24px,3vw,40px) 0 0;padding:26px 30px;border-radius:24px;background:var(--coffee-mid);color:var(--cream);font-size:clamp(17px,1.4vw,20px);line-height:1.7}
.quote::after{content:'';position:absolute;left:32px;bottom:-12px;border:12px solid transparent;border-bottom:0;border-top-color:var(--coffee-mid)}
.quote cite{display:block;margin-top:12px;font-style:normal;font-size:13px;color:var(--beige-soft)}

/* 질감 띠 — 글자를 얹지 않는다 */
.tex .frame{height:clamp(200px,44vh,520px);border-radius:0}
.tex figcaption{margin-top:10px;text-align:right}

/* S4 「만든 것」 — 기본은 타일(터치·스크립트 없음·모션 끔). 마우스 + 900px 이상 + 모션 허용일 때만 큰 글자 리스트로 바뀐다 */
.work-h{display:none}
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px;margin:0;padding:0;list-style:none}
@media (min-width:720px){.work{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}}
.work a{display:flex;flex-direction:column;text-decoration:none}
.work-t{font-weight:700;font-size:18px;line-height:1.35;letter-spacing:-.02em}
.work-m{margin-top:2px;font-size:14px;color:var(--sub)}
.work-thumb{position:relative;order:-1;display:block;aspect-ratio:4/3;margin-bottom:14px;border-radius:12px;overflow:hidden;background:var(--beige-soft)}
.work-thumb picture,.work-thumb img{display:block;width:100%;height:100%}
.work-thumb img{object-fit:cover}
.work-thumb.hs img{object-position:50% 16%}
.work-thumb.rep img{position:absolute;inset:0;width:auto;height:min(86%,240px);margin:auto;border-radius:6px;object-fit:contain}
.work-thumb.typo{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:9%;background:var(--coffee-dark);color:var(--cream)}
.typo small{font-size:12px;line-height:1.4;color:var(--beige-soft)}
.typo b{font-weight:900;font-size:clamp(16px,4.4vw,30px);line-height:1.15;letter-spacing:-.02em}
.more{margin:clamp(36px,4vw,64px) 0 0;text-align:center}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  html.mo .work-h{display:flex;justify-content:space-between;margin:0;padding:0 clamp(0px,2vw,36px) 14px;font-size:13px;color:var(--sub)}
  html.mo .work{display:block;border-top:1px solid var(--line)}
  html.mo .work a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:32px;padding:clamp(24px,3vw,46px) clamp(0px,2vw,36px);border-bottom:1px solid var(--line);transition:opacity .35s}
  html.mo .work .work-thumb{display:none}
  html.mo .work-t{font-weight:500;font-size:clamp(34px,4.6vw,78px);line-height:1.08;letter-spacing:-.04em;transition:transform .5s var(--out)}
  html.mo .work-m{flex:0 0 auto;margin:0;font-size:16px;transition:transform .5s var(--out)}
  html.mo .work:hover a{opacity:.34}
  html.mo .work a:hover{opacity:1}
  html.mo .work a:hover .work-t{transform:translateX(18px)}
  html.mo .work a:hover .work-m{transform:translateX(-18px)}
}
/* 커서를 따라다니는 미리보기(스크립트가 만든다) */
.pv,.pv-btn{position:fixed;left:0;top:0;z-index:40;pointer-events:none;will-change:transform}
.pv-in{--w:clamp(240px,24vw,380px);width:var(--w);aspect-ratio:4/3;margin:calc(var(--w)*-.375) 0 0 calc(var(--w)*-.5);overflow:hidden;border-radius:10px;background:var(--beige-soft);transform:scale(0);transition:transform .45s var(--io)}
.pv.on .pv-in{transform:none}
.pv-strip{height:100%;transition:transform .55s var(--io)}
.pv .work-thumb{height:100%;margin:0;border-radius:0;aspect-ratio:auto}
.pv-btn{z-index:41}
.pv-btn span{display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--peach);color:var(--coffee-dark);font-weight:500;font-size:15px;transform:scale(0);transition:transform .45s var(--io)}
.pv-btn.on span{transform:none}

/* 타일 2줄 — 넘치는 폭은 이 컨테이너 안에서만. 모션이 꺼져 있으면 옆으로 밀어서 본다 */
.tiles{padding:0 0 var(--sec);overflow:hidden}
.trow{position:relative;left:50%;display:flex;gap:clamp(12px,2vw,32px);width:max-content;transform:translateX(-50%);will-change:transform}
.trow+.trow{margin-top:clamp(12px,2vw,32px)}
.tile{flex:0 0 auto;width:clamp(240px,30vw,540px)}
.tile .frame{aspect-ratio:4/3}
.tile figcaption{margin-top:10px}
html:not(.mo) .tiles{overflow-x:auto}
html:not(.mo) .trow{left:0;padding:0 var(--pad);transform:none}

/* S5 연혁 원장 + 매출 */
.ledger{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:clamp(64px,14vw,240px) minmax(0,1fr);gap:16px;padding:clamp(16px,1.8vw,26px) 0;border-bottom:1px solid var(--line);font-size:clamp(15.5px,1.15vw,18px);line-height:1.7}
.ledger b{font-weight:900;font-size:clamp(22px,2.4vw,38px);line-height:1.2;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ledger span{max-width:52em}
.rev{margin-top:clamp(56px,7vw,112px)}
.rev h3{margin-bottom:24px;font-weight:500;font-size:16px;color:var(--sub)}
.rev ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,3vw,56px);margin:0;padding:0;list-style:none}
.rev li{display:flex;flex-direction:column;min-width:0}
.bar{position:relative;display:block;height:clamp(110px,13vw,200px);margin-bottom:18px;border-bottom:1px solid var(--ink);overflow:hidden}
.bar::after{content:'';position:absolute;left:0;bottom:0;width:clamp(40px,5.5vw,88px);height:calc(var(--v)*100%);border-radius:6px 6px 0 0;background:var(--coffee-dark)}
.rev b{font-size:clamp(28px,5.2vw,88px)}
.rev small{margin-top:10px;font-size:14px;color:var(--sub)}
.rev p{margin:22px 0 0;font-size:13px;color:var(--sub)}

/* S6 특허 */
.pat{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start}
@media (min-width:900px){.pat{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.facts{margin:clamp(20px,2.4vw,36px) 0 0;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:clamp(96px,10vw,160px) minmax(0,1fr);gap:4px 20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.7}
.facts dt{font-weight:700;color:var(--sub)}
.facts dd{margin:0}
.shots{display:grid;grid-template-columns:minmax(0,1fr) clamp(112px,14vw,160px);gap:16px;align-items:end}
.shots .sq{aspect-ratio:1/1}
.shots .tall{aspect-ratio:2/3}
@media (max-width:559px){.facts>div{grid-template-columns:1fr}}

/* ── 어두운 구간 공통 ── */
.dark,.contact,footer{--ink:var(--cream);--sub:var(--beige-soft);--line:rgba(250,246,240,.22);--focus:var(--cream)}
.dark{background:var(--coffee-dark);color:var(--cream)}
.dark .quote{max-width:34em;background:var(--cream);color:var(--coffee-dark)}
.dark .quote::after{border-top-color:var(--cream)}
.dark .quote cite{color:var(--coffee-warm)}

/* S7 미국 */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,56px);max-width:1120px;margin-bottom:clamp(40px,6vw,96px)}
.pair .frame{aspect-ratio:4/5}
.pair img{transform:scale(1.025);transform-origin:50% 100%}   /* 원본 사진 맨 위 6px 흰 띠를 프레임 밖으로 */
@media (min-width:720px){.pair .low{margin-top:clamp(40px,8vw,128px)}}
@media (max-width:559px){.pair{grid-template-columns:1fr;gap:28px}}
.facts.wide{max-width:60em}

/* S8 상장·선정 */
.awards{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,96px);align-items:start}
@media (min-width:900px){.awards{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:clamp(96px,9vw,140px) minmax(0,1fr);gap:4px 20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.7}
.rows b{font-weight:700;color:var(--sub)}
@media (max-width:559px){.rows li{grid-template-columns:1fr}}
.certs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:480px}
.certs .frame{aspect-ratio:3/4;background:var(--white);box-shadow:0 12px 32px rgba(62,43,34,.08)}

/* S9 프로그램 */
.stage{margin-bottom:clamp(32px,4vw,64px)}
.stage .frame{aspect-ratio:16/9}
.stage img{object-position:50% 46%}
.fold{border-top:1px solid var(--line)}
.fold:last-of-type{border-bottom:1px solid var(--line)}
.fold summary{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;min-height:48px;padding:clamp(18px,2vw,30px) 48px clamp(18px,2vw,30px) 0;cursor:pointer;list-style:none}
.fold summary::-webkit-details-marker{display:none}
.fold summary span{font-weight:500;font-size:clamp(22px,2.6vw,40px);line-height:1.2;letter-spacing:-.03em}
.fold summary small{font-size:14px;color:var(--sub)}
.fold summary::before,.fold summary::after{content:'';position:absolute;right:4px;top:50%;width:20px;height:1.6px;background:currentColor;transition:transform .45s var(--io)}
.fold summary::after{transform:rotate(90deg)}
.fold[open] summary::after{transform:none}
.fold-in{max-width:56em;padding:0 0 28px;font-size:16px;line-height:1.75}
.fold-in p{margin:0 0 10px}

/* S10 언론 — 매체 이름 마퀴 + 사진 카드 + 목록 */
.pmq{margin:0 0 clamp(36px,5vw,72px);padding:clamp(14px,1.6vw,24px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:500;font-size:clamp(26px,3.4vw,52px);line-height:1.2;letter-spacing:-.03em;color:var(--coffee-dark)}
.pmq .mq-i i{padding:0 .5em;color:var(--coffee-warm)}
.press-pics{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:clamp(32px,4vw,56px)}
.press .card{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start;padding:20px 22px;border-radius:var(--r);background:var(--white);box-shadow:0 12px 32px rgba(62,43,34,.06);transition:transform .4s var(--out)}
.press .card:hover{transform:translateY(-4px)}
.press .card .frame{aspect-ratio:3/2;border-radius:10px}
.press .card.wide{grid-column:1 / -1;grid-template-columns:minmax(0,1fr) clamp(200px,24vw,340px);align-items:center}
.press .card.wide h3{font-size:clamp(19px,1.7vw,26px);line-height:1.45}
.press .card.wide.small{grid-template-columns:minmax(0,1fr) 160px}
.press .card.wide.small h3{font-size:16px;line-height:1.5}
.press .card.wide.small .frame{aspect-ratio:16/9}
.press .meta{margin:0 0 8px;font-size:13px;color:var(--sub)}
.press h3{font-weight:700;font-size:16px;line-height:1.5}
.press h3 a{text-decoration:none}
.press h3 a::after{content:'';position:absolute;inset:0;border-radius:var(--r)}
.press h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.press h3 a:focus-visible{outline:none}
.press h3 a:focus-visible::after{outline:2px solid var(--focus);outline-offset:3px}
.press .more{margin:6px 0 0;font-size:13px;text-align:left;color:var(--sub)}
.press .more a{position:relative;z-index:1;display:inline-block;padding:6px 2px;text-underline-offset:3px}
.press .credit{margin:8px 0 0;font-size:12px}
.press-tv{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:clamp(32px,4vw,56px)}
.press .card.tv{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
.press .card.tv:hover{transform:none}
.press .card.tv .frame{aspect-ratio:16/9}
.press-list{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,72px);margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.press-list li{position:relative;padding:18px 0;border-bottom:1px solid var(--line)}
.press-list h3 a::after{border-radius:0}
@media (max-width:719px){
  .press-pics,.press-tv,.press-list{grid-template-columns:1fr}
  .press .card,.press .card.wide,.press .card.wide.small,.press .card.tv{grid-template-columns:1fr}
  .press .card.wide figure{order:-1}
  .press .card.wide.small figure{order:0;width:160px}
}

/* S11 AI — 큰 글자 링크 2줄 */
.ai{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ai a{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:6px 32px;padding:clamp(24px,3vw,44px) clamp(0px,2vw,36px);border-bottom:1px solid var(--line);text-decoration:none}
.ai h3{grid-row:1 / span 2;font-weight:500;font-size:clamp(28px,3.8vw,60px);line-height:1.12;letter-spacing:-.04em;transition:transform .5s var(--out)}
.ai p{grid-column:2;align-self:end;margin:0;font-size:16px}
.ai .url{grid-column:2;align-self:start;font-size:14px;color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.ai svg{grid-column:3;grid-row:1 / span 2;width:clamp(24px,2.4vw,40px);height:auto;transition:transform .5s var(--out)}
@media (hover:hover){.ai a:hover h3{transform:translateX(18px)}.ai a:hover svg{transform:translate(6px,-6px)}}
@media (max-width:719px){
  .ai a{grid-template-columns:minmax(0,1fr) auto}
  .ai h3{grid-row:auto}
  .ai p,.ai .url{grid-column:1}
  .ai svg{grid-column:2;grid-row:1}
}

/* S12 연락 — 밝은 구간의 바닥이 호(弧)로 내려와 있다가 스크롤할수록 납작해진다 */
.contact{position:relative;padding:calc(var(--ch) + clamp(40px,7vh,96px)) 0 clamp(28px,4vw,56px);background:var(--coffee-dark);color:var(--cream);--ch:clamp(56px,13vh,150px);--d:clamp(150px,15vw,220px)}
.curve{position:absolute;left:0;right:0;top:-1px;height:var(--ch);overflow:hidden;transform-origin:50% 0;pointer-events:none}
.curve::before{content:'';position:absolute;left:-10%;top:-100%;width:120%;height:200%;border-radius:50%;background:var(--white)}
.c-head{display:flex;align-items:flex-start;gap:clamp(14px,2.4vw,40px)}
.avatar{flex:0 0 auto;width:clamp(52px,7vw,116px);aspect-ratio:1/1;margin-top:.35em;border-radius:50%;overflow:hidden;background:var(--white)}
.avatar picture,.avatar img{display:block;width:100%;height:100%}
.avatar img{object-fit:cover}
.contact h2{max-width:none;margin:0;font-size:clamp(32px,7vw,118px);line-height:1.12;letter-spacing:-.045em}
@media (max-width:719px){.contact h2{padding-right:calc(clamp(12px,2vw,28px) + 68px - var(--pad))}}   /* 우상단 고정 버블 자리(56px + 여백 12px)를 비운다 — 페이지 끝에서 제목이 버블 밑에 깔리지 않게 */
@media (max-width:479px){.c-head{flex-direction:column;gap:16px}.avatar{margin-top:0}.contact h2{font-size:min(32px,7.8vw)}}   /* 좁은 폭: 아바타를 제목 위로 올려 두 줄 줄바꿈을 지킨다 */
.c-line{position:relative;height:1px;margin:calc(var(--d)*.5 + clamp(28px,4vw,64px)) 0 0;background:var(--line)}
.c-line .round-w{position:absolute;right:clamp(0px,8vw,160px);top:calc(var(--d)*-.5);margin:0}
@media (max-width:719px){.c-line .round-w{right:calc(clamp(12px,2vw,28px) + 68px - var(--pad))}}   /* 같은 이유 — 원형 버튼도 버블 세로줄 밖으로 */
.c-pills{display:flex;flex-wrap:wrap;gap:12px;margin:calc(var(--d)*.5 + 24px) 0 0;padding:0;list-style:none}
@media (min-width:900px){.c-pills{margin-top:clamp(36px,4vw,64px);padding-right:calc(var(--d) + clamp(0px,8vw,160px) + 24px)}}
.c-foot{display:flex;flex-wrap:wrap;gap:20px clamp(32px,6vw,104px);margin:clamp(48px,7vw,112px) 0 0}
.c-foot dt{margin-bottom:6px;font-size:13px;color:var(--beige-soft)}
.c-foot dd{margin:0;font-size:16px}
#kst{font-variant-numeric:tabular-nums}

/* S13 푸터 */
footer{padding:28px 0 40px;border-top:1px solid rgba(250,246,240,.16);background:var(--coffee-dark);color:var(--beige-soft);font-size:13px;line-height:1.7}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
footer img{width:auto;height:18px;filter:invert(1)}
footer a{text-underline-offset:3px}
footer .slogan{font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--peach)}

/* ── 모션 상태 — html.mo일 때만 숨긴다(스크립트가 없거나 모션을 끈 사람에겐 처음부터 전부 보인다) ── */
html.mo .top{opacity:0;transform:translateY(-14px)}
html.mo .hero .up{opacity:0;transform:translateY(36px)}
html.mo .hero-mq{opacity:0}
html.mo .hero-fig{transform:translateY(5%)}
html.mo.run .top,html.mo.run .hero .up{opacity:1;transform:none;transition:opacity 1s var(--out) var(--dl,.1s),transform 1.2s var(--out) var(--dl,.1s)}
html.mo.run .hero-mq{opacity:1;transition:opacity 1.2s ease .15s}
html.mo.run .hero-fig{transform:none;transition:transform 1.4s var(--out)}
html.mo .rv{opacity:0;transform:translateY(28px)}
html.mo .rv.in{opacity:1;transform:none;transition:opacity .9s var(--out) var(--dl,0s),transform 1.1s var(--out) var(--dl,0s)}
html.mo [data-lines]{opacity:0}
html.mo [data-lines].sp,html.mo [data-lines].dn{opacity:1}
.w{display:inline-block}
.ln{display:block;margin-bottom:-.12em;padding-bottom:.12em;overflow:hidden}
.ln-i{display:block;transform:translateY(110%)}
.in .ln-i{transform:none;transition:transform 1s var(--out) calc(var(--i)*80ms)}
html.mo .rev .bar::after{transform:translateY(101%)}
html.mo .rev.in .bar::after{transform:none;transition:transform 1.3s var(--out) calc(var(--i)*.16s)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.ln{white-space:nowrap}