/* brand10 - 공통 토큰과 레이아웃.
 * 색: #1a1a1a / #fff / #f0f0f0 / #242424 / #292828 / #d6d6d6 와 그 알파값. 둥근 모서리 20 / 30 / 16 / 14 / 12 / 10 / 100.
 * 글꼴: Inter(라틴) + Pretendard(한국어 폴백), Geist Mono, IBM Plex Mono. */
:root {
  --ink: #1a1a1a;
  --white: #fff;
  --gray: #f0f0f0;
  --gray-2: #d6d6d6;
  --dark-2: #242424;
  --dark-3: #292828;
  --ink-03: rgba(26, 26, 26, .03);
  --ink-06: rgba(26, 26, 26, .06);
  --ink-10: rgba(26, 26, 26, .1);
  --ink-20: rgba(26, 26, 26, .2);
  --ink-40: rgba(26, 26, 26, .4);
  --ink-50: rgba(26, 26, 26, .5);
  --ink-60: rgba(26, 26, 26, .6);
  --ink-70: rgba(26, 26, 26, .7);
  --ink-80: rgba(26, 26, 26, .8);
  --w-04: rgba(255, 255, 255, .04);
  --w-06: rgba(255, 255, 255, .06);
  --w-10: rgba(255, 255, 255, .1);
  --w-20: rgba(255, 255, 255, .2);
  --w-40: rgba(255, 255, 255, .4);
  --w-50: rgba(255, 255, 255, .5);
  --w-70: rgba(255, 255, 255, .7);
  --w-80: rgba(255, 255, 255, .8);
  --font: "Inter", "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --plex: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(.2, .85, .25, 1);
  --foot-h: 100vh;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: .32px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-leaving main { opacity: 0; transition: opacity .25s ease; }
/* flow-root: 첫 섹션의 위 여백(.banner margin 12px)이 main 밖으로 빠져 뒤의 검은 푸터가 비치던 것을 막는다 */
main { display: flow-root; position: relative; z-index: 1; background: var(--white); opacity: 0; animation: pagein .5s ease forwards; }
@keyframes pagein { to { opacity: 1; } }
/* 페이지 전환: 새 페이지가 아래에서 밀고 올라오고 이전 페이지는 붙은 채 위로 나간다 (약 0.32초, 끝이 부드럽게 멈춤).
 * View Transition 을 지원하지 않는 브라우저(그리고 file://)는 main.js 의 기존 페이드로 넘어간다 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.3, .1, .3, 1); animation-fill-mode: both; mix-blend-mode: normal; }
::view-transition-old(root) { animation-name: vtOut; }
::view-transition-new(root) { animation-name: vtIn; }
@keyframes vtOut { to { transform: translateY(-100%); } }
@keyframes vtIn { from { transform: translateY(100%); } }
/* 전환으로 들어온 페이지(vt.js 가 단다)는 다 그려진 채 올라온다: 본문 페이드·등장 애니메이션 없음 */
html.vt-in main, html.vt-in .foot, html.vt-in .wd__cover img, html.vt-in :is(.hdr__pill, .hdr__right) { animation: none; opacity: 1; }
html.vt-in [data-appear] { opacity: 1; transform: none; transition: none; }
/* main 이 나타나는 동안 뒤의 고정 푸터가 비치지 않게, 푸터는 그 뒤에 켠다 */
.foot { opacity: 0; animation: pagein .01s .6s forwards; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:lang(en) { word-break: normal; }
:lang(ko) { word-break: keep-all; }

/* ---------- 글자 ---------- */
.h1 { font-size: 70px; font-weight: 500; letter-spacing: -2.8px; line-height: 77px; }
.h2 { font-size: 54px; font-weight: 500; letter-spacing: -2.16px; line-height: 59.4px; }
.h3 { font-size: 28px; font-weight: 500; letter-spacing: -.28px; line-height: 39.2px; }
.h4 { font-size: 20px; font-weight: 500; letter-spacing: -.4px; line-height: 28px; }
.h5 { font-size: 18px; font-weight: 500; letter-spacing: -.72px; line-height: 19.8px; }
.huge { font-size: 100px; font-weight: 500; letter-spacing: -4px; line-height: 100px; }
.statement { font-size: 56px; font-weight: 500; letter-spacing: -2px; line-height: 60px; }
.num { font-size: 43px; font-weight: 400; letter-spacing: -2px; line-height: 43px; }
.body { font-size: 16px; font-weight: 300; letter-spacing: .32px; line-height: 24px; }
.body-m { font-size: 15px; font-weight: 300; letter-spacing: .3px; line-height: 22.5px; }
.small { font-size: 14px; font-weight: 300; letter-spacing: .28px; line-height: 21px; }
.label { font-size: 14px; font-weight: 400; letter-spacing: .28px; line-height: 19.6px; }
.cap { font-size: 12px; font-weight: 300; letter-spacing: .12px; line-height: 16.8px; }
.mono { font-family: var(--mono); font-size: 12px; font-weight: 300; letter-spacing: 0; line-height: 19.2px; text-transform: uppercase; }
.mono-lite { font-family: var(--mono); font-size: 12px; font-weight: 200; letter-spacing: 0; line-height: 20.4px; text-transform: uppercase; }
.mono-16 { font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 22.4px; text-transform: none; }
.tag { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 16px; text-transform: uppercase; }
.plex { font-family: var(--plex); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 20.8px; text-transform: uppercase; }
.dim { color: var(--ink-40); }
.muted { color: var(--ink-70); }

/* ---------- 버튼 (Primary / Secondary / small) ---------- */
/* 버튼. 호버: 아이콘 상자가 버튼 전체로 넓어지고(1px 테두리), 라벨은 왼쪽 18px 자리로, 아이콘은 라벨 뒤로 옮겨 가며 글자색이 상자 색으로 바뀐다. 약 0.25s 스프링 */
.btn { position: relative; display: inline-flex; align-items: center; gap: 16px; padding: 3px 24px 3px 3px; background: var(--ink); color: var(--white); border-radius: 16px; overflow: hidden; white-space: nowrap; --bt: .28s cubic-bezier(.2, .7, .2, 1); }
.btn__box { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 65px; background: var(--white); border-radius: 14px; box-shadow: inset 0 0 0 1px transparent; transition: width var(--bt), box-shadow var(--bt); }
.btn__ico { position: relative; display: grid; place-items: center; width: 65px; height: 59px; color: var(--ink); flex: none; transition: transform var(--bt), color var(--bt); }
.btn__ico svg { width: 30px; height: 15px; }
/* 화살표 프레임: html[data-chev] 가 보이는 장을 고른다. hover 면 1번 */
.btn__ico path { visibility: hidden; }
html:not([data-chev]) .btn__ico path:first-child { visibility: visible; }
html[data-chev="1"] .btn__ico path:nth-child(1) { visibility: visible; }
html[data-chev="2"] .btn__ico path:nth-child(2) { visibility: visible; }
html[data-chev="3"] .btn__ico path:nth-child(3) { visibility: visible; }
html[data-chev="4"] .btn__ico path:nth-child(4) { visibility: visible; }
html[data-chev="5"] .btn__ico path:nth-child(5) { visibility: visible; }
html[data-chev="6"] .btn__ico path:nth-child(6) { visibility: visible; }
html[data-chev="7"] .btn__ico path:nth-child(7) { visibility: visible; }
html[data-chev="8"] .btn__ico path:nth-child(8) { visibility: visible; }
html[data-chev="9"] .btn__ico path:nth-child(9) { visibility: visible; }
html[data-chev="10"] .btn__ico path:nth-child(10) { visibility: visible; }
html[data-chev="11"] .btn__ico path:nth-child(11) { visibility: visible; }
html[data-chev="12"] .btn__ico path:nth-child(12) { visibility: visible; }
html[data-chev="13"] .btn__ico path:nth-child(13) { visibility: visible; }
html[data-chev="14"] .btn__ico path:nth-child(14) { visibility: visible; }
html .btn:hover .btn__ico path { visibility: hidden; }
html .btn:hover .btn__ico path:first-child { visibility: visible; }
.btn__txt { position: relative; font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 24px; transition: transform var(--bt), color var(--bt); }
.btn:hover .btn__box { width: calc(100% - 6px); box-shadow: inset 0 0 0 1px var(--ink); }
.btn:hover .btn__txt { transform: translateX(-66px); color: var(--ink); }
.btn:hover .btn__ico { transform: translateX(calc(var(--lw, 80px) + 10px)); }
.btn--sec { background: var(--dark-2); }
.btn--sec .btn__box { background: var(--ink); }
.btn--sec .btn__ico { color: var(--white); }
.btn--sec:hover .btn__box { box-shadow: none; }
.btn--sec:hover .btn__txt { color: var(--white); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white .btn__box { background: var(--ink); }
.btn--white .btn__ico { color: var(--white); }
.btn--white:hover .btn__box { box-shadow: none; }
.btn--white:hover .btn__txt { color: var(--white); }
.btn--sm { gap: 6px; padding: 3px 10px 3px 3px; border-radius: 12px; }
.btn--sm .btn__box { width: 40px; border-radius: 10px; }
.btn--sm .btn__ico { width: 40px; height: 36px; }
.btn--sm .btn__ico svg { width: 16px; height: 15px; }
.btn--sm .btn__txt { font-size: 14px; letter-spacing: .28px; line-height: 19.6px; padding: 0 4px; }
.btn--sm:hover .btn__txt { transform: translateX(-39px); }
.btn--sm:hover .btn__ico { transform: translateX(calc(var(--lw, 60px) + 4px)); }
.btn--wide { width: 100%; }
.btn--muted { opacity: .7; }

/* ---------- 공통 조각 ---------- */
.mark { display: inline-block; width: 22px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 20 20'%3E%3Cpath d='M11 11H15V15H7V7H19V19H3V3H19' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 20 20'%3E%3Cpath d='M11 11H15V15H7V7H19V19H3V3H19' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; flex: none; }
.mark--lg { width: 37px; height: 34px; }
.mark--xl { width: 85px; height: 77px; }
.mark--xs { width: 15px; height: 14px; }
.lbl { display: flex; align-items: center; gap: 20px; }
.lbl__line { flex: 1; height: 1px; background: var(--w-10); }
.on-light .lbl__line, .lbl--light .lbl__line { background: var(--ink-20); }
.pill { display: inline-flex; align-items: center; background: var(--white); color: var(--ink); border: 1px solid var(--ink-10); border-radius: 100px; padding: 8px 16px 7px; }
.wrap { padding: 0 40px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; }
.ava { width: 52px; height: 52px; border-radius: 1000px; box-shadow: 0 0 0 5px var(--white); object-fit: cover; }
.avas { display: flex; }
.avas i { display: block; width: 1px; height: 60px; position: relative; margin-right: 38px; }
.avas i:last-child { margin-right: 0; }
.avas img { max-width: none; position: absolute; left: -26px; top: 4px; width: 52px; height: 52px; border-radius: 1000px; box-shadow: 0 0 0 5px var(--white); object-fit: cover; }

/* 섹션 겹침: 앞 섹션의 둥근 아래 모서리가 다음 섹션 위에 보인다 */
main > * { position: relative; }
main > *:nth-child(1) { z-index: 30; } main > *:nth-child(2) { z-index: 29; } main > *:nth-child(3) { z-index: 28; } main > *:nth-child(4) { z-index: 27; }
main > *:nth-child(5) { z-index: 26; } main > *:nth-child(6) { z-index: 25; } main > *:nth-child(7) { z-index: 24; } main > *:nth-child(8) { z-index: 23; }
main > *:nth-child(9) { z-index: 22; } main > *:nth-child(10) { z-index: 21; } main > *:nth-child(11) { z-index: 20; } main > *:nth-child(12) { z-index: 19; }
main > *:nth-child(13) { z-index: 18; } main > *:nth-child(14) { z-index: 17; } main > *:nth-child(15) { z-index: 16; } main > *:nth-child(16) { z-index: 15; }
.rb { border-radius: 0 0 20px 20px; }
/* 밝은 섹션의 둥근 아래 모서리 뒤로 다음 어두운 섹션을 20px 끌어올린다 */
.rb:not(.dark) { margin-bottom: -20px; }
.rb:not(.dark) + .dark { border-top: 20px solid var(--ink); }
/* 어두운 섹션끼리: 둥근 모서리 아래로 한 단 밝은 띠가 받친다 */
.dark.rb + .dark::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 37px; background: var(--dark-2); border-radius: 0 0 20px 20px; z-index: -1; pointer-events: none; }
.dark { background: var(--ink); color: var(--white); }
.dark + .dark.rb-edge, .rb-edge { box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.over { margin-top: -20px; padding-top: 20px; }

/* ---------- 헤더 ---------- */
.hdr-blur { position: fixed; left: 0; right: 0; top: 0; height: 90px; z-index: 40; pointer-events: none; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
.hdr { position: fixed; left: 30px; right: 30px; top: 30px; z-index: 50; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.hdr__pill { pointer-events: auto; display: flex; align-items: center; gap: 24px; padding: 5px 26px 5px 5px; background: var(--white); border-radius: 100px; color: var(--ink); box-shadow: inset 0 0 0 1px #e8e8e8; }
/* 흰 알약 가장자리 1px #e8e8e8. 흰 바탕 페이지(소개·글 상세)에서 알약 모양이 이걸로 보인다 */
.hdr__logo { display: flex; align-items: center; height: 34px; padding: 0 4px 0 16px; flex: none; color: var(--ink); }
.hdr__logo svg { display: block; height: 15px; width: auto; }
.hdr__row { display: contents; }
.hdr__links { display: flex; align-items: center; }
.hdr__links a { display: block; padding: 7px 16px; font-size: 14px; font-weight: 400; letter-spacing: .28px; line-height: 19.6px; opacity: .65; transition: opacity .25s; white-space: nowrap; }
.hdr__links a:hover, .hdr__links a[aria-current] { opacity: 1; }
.hdr__right { pointer-events: auto; display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; background: var(--white); border-radius: 12px; box-shadow: inset 0 0 0 1px #e8e8e8; font-size: 14px; font-weight: 400; letter-spacing: .28px; line-height: 19.6px; color: var(--ink); }
.lang button { opacity: .4; transition: opacity .25s; }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang span { opacity: .3; }
.burger { display: none; }
.hdr__menu { display: none; }

/* ---------- 히어로 ---------- */
.hero { padding: 12px; }
.hero__card { position: relative; display: flex; flex-direction: column; min-height: 876px; background: var(--gray); border-radius: 20px; padding: 190px 0 0; overflow: hidden; }
.hero__bg { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
/* 히어로 첫 등장: 배경은 0.3초부터 1.1배에서 제자리로 나타나고, 헤더는 0.75초에 위에서 내려온다.
 * 패럴랙스가 transform 을 쓰므로 여기서는 scale·translate 속성을 쓴다. 히어로 안 글자·카드는 위로 뜨지 않고 투명도만 바뀐다 */
.hero__bg { opacity: 0; scale: 1.1; animation: heroBg .5s cubic-bezier(.25, .9, .3, 1) .3s forwards; }
@keyframes heroBg { to { opacity: 1; scale: 1; } }
body:has(.hero) .hdr__pill, body:has(.hero) .hdr__right { opacity: 0; translate: 0 -32px; animation: hdrIn .6s cubic-bezier(.2, .8, .2, 1) .75s forwards; }
@keyframes hdrIn { to { opacity: 1; translate: 0 0; } }
.hero [data-appear] { transform: none; }
/* 오른쪽 카드는 오른쪽 150px 에서 0.8초에 감속하며 들어온다 */
.hero .hcard[data-appear] { transform: translateX(150px); transition: opacity .8s cubic-bezier(.22, .8, .3, 1), transform .9s cubic-bezier(.22, .8, .3, 1); }
.hero .hcard[data-appear].is-in { transform: none; }
.hero__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 405px; background: linear-gradient(rgba(31, 31, 31, 0) 0%, rgba(26, 26, 26, .6) 100%); }
.hero__top { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 0 40px; }
.hero__text { display: grid; gap: 26px; max-width: 1006px; }
.hero__title span { display: block; }
.hero__text .body { max-width: 390px; }
.hcard { display: block; width: 320px; background: var(--white); border-radius: 24px; padding: 6px; color: var(--ink); align-self: flex-start; box-shadow: 0 0 0 1px var(--ink-06); }
.hcard__media { position: relative; height: 220px; background: var(--white); border-radius: 20px; overflow: hidden; }
.hcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.hcard:hover .hcard__media img { transform: scale(1.04); }
.hcard__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px; gap: 10px; }
.hcard__foot b { display: block; font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 21px; }
.hcard__foot small { display: block; margin-top: 5px; font-size: 12px; font-weight: 300; letter-spacing: .12px; line-height: 16.8px; color: var(--ink-70); }
.hcard__foot i { width: 26px; height: 26px; transition: transform .4s var(--ease); }
.hcard:hover .hcard__foot i { transform: translateX(4px); }
.hero__bottom { position: relative; margin-top: auto; padding: 0 40px 50px; display: grid; gap: 10px; }
.hero__bottom .label { max-width: 300px; color: var(--white); }
.strip { height: 57px; overflow: hidden; border-radius: 10px; }
.strip__track { display: flex; gap: 10px; width: max-content; animation: strip 28s linear infinite; }
.strip__track span { display: grid; place-items: center; width: 189px; height: 57px; color: var(--white); font-size: 22px; font-weight: 500; letter-spacing: -.44px; white-space: nowrap; }
@keyframes strip { to { transform: translateX(-50%); } }

/* ---------- 소개 문장 + 숫자 카드 ---------- */
.intro { padding: 0 12px; }
.intro__card { background: var(--gray); border-radius: 20px; padding: 12px 40px; }
.intro__in { padding: 200px 0 30px; display: grid; gap: 200px; }
.intro__text { max-width: 1042px; }
.intro__lede { max-width: 600px; margin-top: 30px; }
.stats { display: grid; grid-template-columns: 339fr 291fr 339fr 339fr; gap: 10px; margin-top: 40px; }
.stat { border-radius: 30px; padding: 24px; display: flex; flex-direction: column; min-height: 315px; }
.stat--dark { background: var(--ink); color: var(--white); }
.stat--gray { background: var(--ink-06); }
.stat--white { background: var(--white); }
.stat__ico { display: grid; place-items: center; width: 60px; height: 60px; background: var(--white); color: var(--ink); border-radius: 16px; }
.stat__ico svg { width: 30px; height: 30px; }
.stat .num { margin-top: 14px; }
.stat .label { margin-top: auto; }
.stat__col { display: grid; gap: 10px; }
.stat__dash { border: 1px dashed var(--ink-20); border-radius: 30px; padding: 24px; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.stat__dash .label strong { font-weight: 700; color: var(--ink-80); }
.stat__dash .label { color: var(--ink-60); }
.stat__x { background: var(--ink-06); border-radius: 30px; padding: 20px 27px; display: flex; align-items: center; gap: 26px; min-height: 95px; }
.stat__x .num { color: var(--dark-3); }
.stat__x .label { color: var(--ink-60); }
.radial { position: relative; width: 149px; height: 153px; margin: 7px auto 0; }
.radial__ticks { position: absolute; inset: 0; }
.radial__ticks svg { width: 100%; height: 100%; display: block; }
.radial__ticks line { stroke: var(--ink-06); transition: stroke .1s ease; }
.radial__ticks line.on { stroke: var(--ink-60); }
.radial__core { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; background: var(--ink); color: var(--white); border-radius: 100%; display: grid; place-items: center; }
.radial__core svg { width: 24px; height: 24px; }
.stat__title { margin-top: 32px; font-size: 20px; font-weight: 500; letter-spacing: -.4px; line-height: 28px; }
.stat--gray .label { color: var(--ink-60); margin-top: 8px; }
.stat__qtop { display: flex; justify-content: space-between; align-items: flex-start; }
.stat__qtop svg { width: 40px; height: 40px; }
.stat__qtop .tag { padding: 6px 12px; border: 1px solid var(--ink-10); border-radius: 100px; }
.stat__quote { margin-top: auto; font-size: 18px; font-weight: 400; letter-spacing: 0; line-height: 25.2px; color: var(--ink-80); }
.stat__by { margin-top: 20px; padding-left: 17px; color: var(--ink-60); list-style: disc; }
.stat__by li { display: list-item; }
.stat__by--plain { padding-left: 0; list-style: none; }

/* ---------- 하단 띠(흐르는 공지) ---------- */
.ticker { height: 20px; overflow: hidden; border-radius: 10px; }
.ticker__track { display: flex; align-items: center; gap: 100px; width: max-content; animation: tick 40s linear infinite; white-space: nowrap; }
.ticker__brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; background: var(--gray); }
.ticker--white .ticker__brand { background: var(--white); }
.ticker__brand .mark { width: 22px; height: 20px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- 거대 흐르는 제목 ---------- */
/* 흐르는 속도는 약 30px/s. main.js 가 트랙 폭을 재서 --giant-dur 을 넣고, GSAP 이 있으면(.giant--js) 스크롤 속도와 연동해 직접 움직인다 */
.giant { overflow: hidden; height: 220px; }
.giant__track { display: flex; align-items: center; width: max-content; animation: giant var(--giant-dur, 90s) linear infinite; will-change: transform; }
.giant--js .giant__track { animation: none; }
/* 사이 간격 60 은 gap 대신 각 조각의 오른쪽 여백으로 둔다. 그래야 트랙 절반(-50%)이 정확히 한 벌이라 되감길 때 튀지 않는다 */
.giant__track span { font-size: 200px; font-weight: 700; letter-spacing: -8px; line-height: 220px; white-space: nowrap; margin-right: 60px; }
.giant__star { width: 211px; height: 211px; flex: none; color: var(--gray); margin-right: 60px; }
.giant--light .giant__star { color: var(--w-10); }
.giant--white { color: var(--white); }
.giant--white .giant__star { color: var(--white); }
@keyframes giant { to { transform: translateX(-50%); } }

/* ---------- 작업 카드 ---------- */
.works { background: var(--white); padding: 180px 0 180px; }
.wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; margin: 30px 40px 0; }
.wcard { display: block; padding: 16px; border-left: 1px solid var(--ink-06); }
.wcard:nth-child(3n) { border-right: 1px solid var(--ink-06); }
.wcard__in { background: var(--ink-03); border-radius: 20px; padding: 1px; display: grid; gap: 1px; transition: background .4s var(--ease); }
.wcard__media { position: relative; height: 302px; background: var(--white); border-radius: 19px 19px 10px 10px; padding: 10px; overflow: hidden; }
.wcard__tag { position: relative; z-index: 2; }
/* 시안 실제 화면(어두운 바탕 위 창 합성)이 평상시에도 보인다. 그 위에 어두운 덮개, 가운데 흰 제목. 호버하면 덮개가 걷히고 화면이 1.03배 */
.wcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.wcard__media::after { content: ""; position: absolute; inset: 0; background: rgba(26, 26, 26, .5); opacity: 0; transition: opacity .5s var(--ease); }
.wcard__name { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 24px; font-weight: 500; letter-spacing: -.72px; color: var(--ink); transition: color .4s, text-shadow .4s; }
/* 평상시 흰 카드에 제목만, 호버 시 어두운 화면 + 흰 제목 + 검은 테두리 안 흰 타일 */
.wcard:hover .wcard__in { background: var(--ink); }
.wcard:hover .wcard__img { opacity: 1; transform: none; }
.wcard:hover .wcard__media::after { opacity: 1; }
.wcard:hover .wcard__name { color: var(--white); text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.wcard__logo { position: absolute; inset: 0; z-index: 1; margin: auto; width: 64%; max-width: 230px; height: 48px; background: var(--ink); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: background .4s; }
.wcard:hover .wcard__logo { background: var(--white); }
.wcard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.wcard__stats > div { background: var(--white); border-radius: 10px; padding: 14px 11px 15px 15px; }
.wcard__stats b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 22.4px; color: var(--ink-70); }
.wcard__stats small { display: block; margin-top: 4px; font-size: 12px; font-weight: 300; letter-spacing: .12px; line-height: 16.8px; color: var(--ink-70); }
.wcard__in > .wcard__stats:last-child > div:nth-child(3) { border-radius: 10px 10px 10px 19px; }
.wcard__in > .wcard__stats:last-child > div:nth-child(4) { border-radius: 10px 10px 19px 10px; }

/* ---------- 하는 일: 가로 아코디언 ---------- */
.cap { padding: 250px 40px 0; }
.cap__grid { display: grid; grid-template-columns: 1fr 1fr; }
.cap__left { display: flex; flex-direction: column; justify-content: space-between; padding-right: 70px; }
.cap__left .body { max-width: 500px; margin-top: 50px; }
.cap__left .lbl { max-width: 500px; }
.cap__bottom { display: grid; gap: 40px; justify-items: start; }
.cap__bottom .h2 { max-width: 600px; }
.hacc { display: flex; gap: 10px; height: 630px; }
.pin-spacer:has(> .cap) { background: var(--ink); } /* 하는 일 고정 중 섹션 아래 빈 자리가 흰 바탕으로 비치지 않게 */
.hacc .hacc__item { position: relative; flex: 0 1 90px; min-width: 0; height: 100%; background: var(--w-04); border-radius: 20px; overflow: hidden; cursor: pointer; --spring: cubic-bezier(.3, 1.08, .35, 1); transition: flex-basis .34s var(--spring), background .3s, box-shadow .3s, opacity var(--dur, .22s) ease-out; }
.hacc__item.is-open { flex-basis: 480px; background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px var(--w-10); cursor: default; }
.hacc__num { position: absolute; z-index: 2; top: 14px; right: 14px; border: 1px solid var(--w-10); border-radius: 100px; padding: 10px 20px; font-family: var(--mono); font-size: 12px; font-weight: 200; line-height: 20.4px; text-transform: uppercase; color: var(--w-80); }
.hacc__item.is-open .hacc__num { color: var(--white); }
.hacc__vt { position: absolute; z-index: 2; left: 50%; bottom: 30px; padding: 10px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; text-orientation: sideways; font-family: var(--mono); font-size: 13px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--w-70); white-space: nowrap; transition: opacity .2s .25s; }
.hacc__item.is-open .hacc__vt { opacity: 0; transition-delay: 0s; }
.hacc__body { position: absolute; z-index: 1; inset: 0; width: 480px; padding: 30px 70px 0 30px; opacity: 0; visibility: hidden; transition: opacity .12s, visibility 0s .12s; }
.hacc__item.is-open .hacc__body { opacity: 1; visibility: visible; transition: opacity .2s .05s, visibility 0s; }
.hacc__body .h3 { max-width: 350px; }
.hacc__body .small { max-width: 380px; margin-top: 20px; }
.hacc__fig { position: absolute; left: 50%; top: 268px; width: 270px; height: 270px; margin-left: -135px; animation: haccFloat 5s ease-in-out infinite; }
.hacc__fig img { width: 100%; height: 100%; object-fit: contain; }
.hacc__fig img[src$=".svg"] { padding: 36px; opacity: .85; } /* SVG 아이콘은 꽉 찬 흰 선이라 다른 그림 크기와 밝기에 맞춘다 */
.hacc__tex { position: absolute; left: 0; top: 130px; width: 480px; height: 500px; object-fit: cover; opacity: 0; pointer-events: none; -webkit-mask-image: linear-gradient(0deg, #000 70.15%, transparent); mask-image: linear-gradient(0deg, #000 70.15%, transparent); transition: opacity .4s; }
.hacc__item.is-open .hacc__tex { opacity: .18; }
.hacc__tex { transition: opacity .25s; }
@keyframes haccFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- 우리는 ---------- */
.vision { padding: 250px 40px 160px; display: grid; grid-template-columns: 1fr 1fr; }
.vision__photo { max-width: 320px; }
.vframe { position: relative; width: 320px; height: 320px; border-radius: 20px; overflow: hidden; }
.vframe img { width: 100%; height: 100%; object-fit: cover; }
.vframe__in { position: absolute; inset: 10px; border-radius: 14px; }
.vframe__in i { position: absolute; width: 11px; height: 11px; color: rgba(255, 255, 255, .3); }
.vframe__in i span { position: absolute; display: block; }
.vframe__in i .h { left: 0; top: 0; width: 11px; height: 1px; }
.vframe__in i .v { left: 0; top: 0; width: 11px; height: 1px; transform-origin: 0 0; transform: rotate(90deg) translateY(-1px); }
.vframe__in i svg { display: block; width: 100%; height: 100%; }
.vframe__in i:nth-child(1) { left: 11px; top: 11px; }
.vframe__in i:nth-child(2) { right: 11px; top: 11px; transform: scaleX(-1); }
.vframe__in i:nth-child(3) { right: 11px; bottom: 11px; transform: scale(-1); }
.vframe__in i:nth-child(4) { left: 11px; bottom: 11px; transform: scaleY(-1); }
.who { margin-top: 30px; }
.who b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 300; line-height: 19.2px; text-transform: uppercase; color: currentColor; }
.who small { display: block; margin-top: 6px; font-size: 12px; font-weight: 300; letter-spacing: .12px; line-height: 16.8px; color: var(--w-70); }
.on-light .who small { color: var(--ink-70); }
.vision__text { max-width: 500px; }
.vision__text .h2 { margin-top: 50px; }
.vision__text .body { margin-top: 40px; }

/* 단어 스크럽: 읽은 단어만 선명해진다 */
.scrub .w { color: var(--w-20); transition: color .3s; }
.scrub .w.on { color: inherit; }
.on-light .scrub .w, .scrub--light .w { color: rgba(26, 26, 26, .25); }
.on-light .scrub .w.on, .scrub--light .w.on { color: inherit; }

/* ---------- 네 가지 약속 ---------- */
.feat { padding: 180px 60px; }
.feat__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.feat__top .mono-lite { max-width: 380px; }
.feat__grid { display: grid; grid-template-columns: 293fr 343fr 343fr 343fr; margin-top: 84px; }
.feat__item { padding-left: 50px; }
.feat__item:first-child { padding-left: 0; }
.feat__item > i { display: block; width: 34px; height: 55px; color: var(--white); }
.fico { position: relative; display: block; width: 34px; height: 55px; color: var(--white); }
.fico svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 1 렌즈: 31x44, 두 별. 그룹이 41도와 -20도 사이를 스프링처럼 오간다 (1.5초 간격) */
.fico__grp { position: absolute; inset: 0; }
/* 네 아이콘 모두: 보일 때(.is-play) 한 번만 돌고 멈춘다, 호버하면 다시 돈다 (main.js) */
.fico__lens, .fico__star, .fico__stars { position: absolute; transform: rotate(41deg); }
.fico.is-play .fico__lens, .fico.is-play .fico__star, .fico.is-play .fico__stars { animation: ficoTilt 3s 1; }
.fico__lens { top: 11px; right: 3px; width: 31px; height: 44px; }
.fico__star { left: 33px; top: 11px; width: 12px; height: 12px; }
.fico__stars { left: 39px; top: 25px; width: 5px; height: 5px; }
@keyframes ficoTilt { 0%, 40% { transform: rotate(41deg); } 47% { transform: rotate(-24deg); } 54% { transform: rotate(-19deg); } 58%, 90% { transform: rotate(-20deg); } 96% { transform: rotate(44deg); } 100% { transform: rotate(41deg); } }
/* 2 궤도: 44 원(6초 시계)·25 원(5초 반시계)·점들 */
.fico__ring { position: absolute; left: 0; top: 6px; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 100%; }
.fico.is-play .fico__ring { animation: ficoSpin 6s linear 1; }
.fico__ring b { position: absolute; left: 8px; top: 0; width: 6px; height: 6px; background: currentColor; border-radius: 100%; }
.fico__ring2 { position: absolute; left: 9px; top: 15.5px; width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 100%; }
.fico.is-play .fico__ring2 { animation: ficoSpin 5s linear 1 reverse; }
.fico__ring2 b { position: absolute; left: 20px; top: 14px; width: 6px; height: 6px; background: currentColor; border-radius: 100%; }
.fico__core { position: absolute; left: 19px; top: 24.5px; width: 7px; height: 7px; background: currentColor; border-radius: 100%; }
@keyframes ficoSpin { to { transform: rotate(360deg); } }
/* 3 슬라이더: 7x44 네 기둥, 손잡이 7x3 이 스프링처럼 자리를 옮긴다 */
.fico--slider { display: flex; align-items: flex-end; justify-content: center; gap: 1px; }
.fico__col { position: relative; width: 7px; height: 44px; }
.fico__col::before { content: ""; position: absolute; left: 2.5px; top: 0; width: 1px; height: 100%; background: currentColor; }
.fico__col b { position: absolute; left: 0; width: 7px; height: 3px; background: currentColor; }
.fico.is-play .fico__col b { animation: ficoKnob 3s cubic-bezier(.2, 1.2, .3, 1) 1; animation-delay: calc(var(--k) * .12s); }
@keyframes ficoKnob { 0%, 30% { transform: translateY(0); } 36%, 62% { transform: translateY(-12px); } 68%, 94% { transform: translateY(8px); } 100% { transform: translateY(0); } }
/* 4 언어 상자: 양옆 선, 삼각형, 언어 코드 줄이 미끄러진다 */
.fico--lang { top: 0; height: 55px; }
.fico--lang::before, .fico--lang::after { content: ""; position: absolute; top: 12px; width: 1px; height: 43px; background: currentColor; }
.fico--lang::before { left: 0; } .fico--lang::after { right: 0; }
.fico__row { position: absolute; left: -112px; top: 23px; display: flex; align-items: center; gap: 7px; width: 200px; font-family: var(--mono); font-size: 15px; line-height: 1.28; white-space: nowrap; }
.fico.is-play .fico__row { animation: ficoLang 3s 1; }
.fico__tri { position: absolute; left: 12px; top: 12px; width: 9px; height: 9px; transform: rotate(180deg); }
.fico--lang { clip-path: inset(12px 0 0 0); }
@keyframes ficoLang { 0%, 42% { transform: translateX(0); } 48% { transform: translateX(-82px); } 54%, 92% { transform: translateX(-76px); } 98% { transform: translateX(5px); } 100% { transform: translateX(0); } }
.feat__item hr { margin: 30px 0; border: 0; height: 1px; background: var(--w-10); }
.feat__item p { max-width: 210px; }
/* 기본 제공 목록 (홈 약속 아래) */
.incl { display: grid; grid-template-columns: 293fr 1029fr; margin-top: 120px; }
.incl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 50px; margin: 0; padding: 0; list-style: none; }
.incl__grid hr { margin: 0 0 24px; border: 0; height: 1px; background: var(--w-10); }
.incl__grid .small { margin-top: 10px; max-width: 280px; opacity: .7; }

/* ---------- 경험 분야 캐러셀 ---------- */
.exp { background: var(--white); color: var(--ink); padding: 170px 0 20px; }
.exp__head { display: grid; grid-template-columns: 1fr 1fr; margin-top: 102px; padding: 0 40px; }
.exp__head .body { max-width: 440px; }
.arrows { display: flex; gap: 10px; margin-top: 40px; }
.arrow { display: grid; place-items: center; width: 40px; height: 40px; background: var(--ink); color: var(--white); border-radius: 100%; transition: transform .3s; }
.arrow svg { width: 40px; height: 40px; }
.arrow:hover { transform: scale(1.06); }

.rail { display: flex; gap: 15px; margin-top: 50px; padding: 0 118px; scroll-padding: 0 118px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.dcard { flex: none; width: 285px; height: 394px; background: var(--gray); border-radius: 20px; padding: 10px; display: flex; flex-direction: column; scroll-snap-align: start; user-select: none; --hv: .08s linear; }
.dcard, .dcard[data-reveal] { transition: background-color var(--hv), color var(--hv), opacity var(--dur, .22s) ease-out var(--d, 0s); }
.dcard__who { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border: 1px solid var(--ink-10); border-radius: 100px; padding: 6px 12px 6px 6px; transition: border-color var(--hv); }
.dcard__who img { width: 32px; height: 32px; border-radius: 100%; object-fit: cover; }
.dcard__who span { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-60); white-space: nowrap; transition: color var(--hv); }
.dcard__q { margin-top: 52px; padding: 20px 10px 10px; }
.dcard__q svg { width: 24px; height: 24px; color: var(--ink-40); transition: color var(--hv); }
.dcard__q p { margin-top: 7px; font-size: 21px; font-weight: 400; letter-spacing: -.21px; line-height: 25.2px; }
/* 호버: 약 80ms 만에 검정으로 반전 */
.dcard .byline i, .dcard .byline small { transition: background-color var(--hv), color var(--hv); }
.dcard:hover { background: var(--ink); color: var(--white); }
.dcard:hover .dcard__who { border-color: var(--w-20); }
.dcard:hover .dcard__who span { color: var(--w-70); }
.dcard:hover .dcard__q svg { color: var(--w-50); }
.dcard:hover .byline i { background: var(--w-20); }
.dcard:hover .byline small { color: var(--w-70); }
.byline { display: flex; gap: 10px; padding: 10px 10px 20px; margin-top: auto; }
.byline i { width: 3px; min-height: 42px; background: var(--ink-10); border-radius: 10px; flex: none; }
.byline b { display: block; font-family: var(--plex); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 20.8px; text-transform: uppercase; }
.byline small { display: block; margin-top: 4px; font-size: 12px; font-weight: 300; letter-spacing: .12px; line-height: 16.8px; color: var(--ink-70); }
.dark .byline i { background: var(--w-10); }
.dark .byline small { color: var(--w-70); }
.exp .ticker { margin: 170px 40px 0; }

/* ---------- 영상 ---------- */
.video { position: relative; min-height: 855px; padding: 100px 40px; display: flex; flex-direction: column; overflow: hidden; }
/* 배경은 쇼케이스 화면 콜라주(assets/img/shots/en/home-collage.webp). 화면 색이 보여야 해서 흑백 필터는 걷었다. 어둠막은 그대로 */
.video__bg { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.video__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26, 26, 26, .9), rgba(26, 26, 26, .55) 40%, rgba(26, 26, 26, .15) 75%), linear-gradient(rgba(26, 26, 26, .25), transparent 40%, rgba(26, 26, 26, .55)); } /* 콜라주 위 글이 읽히게 왼쪽을 진하게 */
.video__top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.video__top .body { max-width: 380px; }
.video__time { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 6px; background: var(--w-06); border-radius: 100px; }
.video__time svg { width: 24px; height: 24px; }
.video__play { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 1px solid var(--white); border-radius: 100%; display: grid; place-items: center; color: var(--white); transition: transform .4s var(--ease), background .3s; }
.video__play svg { width: 38px; height: 32px; transform: rotate(90deg) scale(.7); }
.video__play:hover { transform: scale(1.08); background: var(--w-10); }
/* 섹션 전체가 쇼케이스 새 창 링크. 글 블록은 클릭을 통과시킨다 */
.video__hit { position: absolute; inset: 0; }
.video__top, .video__foot { pointer-events: none; }
.video__cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.video:hover .video__cta .btn { transform: scale(1.04); }
.video__cta .btn { transition: transform .4s var(--ease); }
.video__foot { position: relative; margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.video__foot .h2 { max-width: 400px; }

/* ---------- 진행 방식 + 팀 ---------- */
.proc { padding: 200px 40px 150px; }
.proc .h2 { max-width: 800px; margin-top: 100px; }
.proc__grid { display: grid; grid-template-columns: 390px 1fr; gap: 20px; margin-top: 50px; align-items: start; }
.proc__fig { position: relative; background: var(--w-04); border-radius: 20px; overflow: hidden; height: 100%; min-height: 445px; }
.proc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .17; }
.proc__tiles { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; object-fit: contain; animation: procFloat 3.6s ease-in-out infinite; }
/* 약 17px 폭으로 위아래를 오간다 */
@keyframes procFloat { 0%, 100% { translate: 0 -8px; } 50% { translate: 0 9px; } }
.acc { display: grid; gap: 10px; }
.acc__item { background: var(--w-04); border-radius: 20px; }
.acc__head { display: flex; gap: 30px; width: 100%; padding: 20px 30px; text-align: left; align-items: center; transition: padding .3s var(--spring); }
.acc__item.is-open .acc__head { padding: 30px 30px 0; }
/* 닫힌 카드는 투명 배경 + 1px rgba(255,255,255,.1) 테두리, 열린 카드는 .04 배경 + .03 테두리 */
.acc--hover .acc__item { background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 0 1px var(--w-10); transition: background .3s, box-shadow .3s; }
.acc--hover .acc__item.is-open { background: var(--w-04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
.acc--hover .acc__head { padding: 30px; }
.acc--hover .acc__item.is-open .acc__head { padding-bottom: 0; }
.acc__num { min-width: 26px; flex: none; white-space: nowrap; font-size: 14px; font-weight: 300; letter-spacing: .28px; line-height: 21px; color: var(--w-40); }
.acc__title { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.acc__title .tag { background: var(--white); color: var(--ink); border-radius: 100px; padding: 4px 12px; opacity: 0; transition: opacity .3s; }
.acc__item.is-open .acc__title .tag { opacity: 1; }
/* 열고 닫기는 약 0.23초, 살짝 튕기는 스프링 */
.acc { --spring: cubic-bezier(.3, 1.12, .4, 1); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--spring); }
.acc__item.is-open .acc__body { grid-template-rows: 1fr; }
.acc__body > div { overflow: hidden; }
.acc__body p { max-width: 600px; padding: 20px 30px 30px 94px; opacity: 0; transition: opacity .15s; }
.acc__item.is-open .acc__body p { opacity: 1; transition: opacity .3s .08s; }
.proc__note { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 50px; }
.proc__note .mono-lite { max-width: 600px; }
.team { margin-top: 250px; }
.team .huge { max-width: 1200px; }
.team__row { display: grid; grid-template-columns: 1fr 1fr; margin-top: 50px; }
.team__row .body { max-width: 380px; }
.team__row .btn { margin-top: 40px; }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 62px; }
.tcard { position: relative; border-radius: 20px; outline: none; overflow: hidden; }
.tcard figure { position: relative; height: 402px; border-radius: 20px; overflow: hidden; background: var(--c, #f2b94b); }
.tcard figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tcard figure .mark { position: absolute; right: 14px; top: 14px; color: var(--white); opacity: .45; }
.tcard .byline { position: relative; padding: 20px 0 0 10px; }
.tcard .byline small { color: var(--w-70); }
/* 호버: 흰 카드가 카드 안에서 왼쪽에서 밀려 들어오고, 떠날 때는 오른쪽으로 빠져나간다 (시작 x-428 scaleX .84, 끝 x+386 scaleX 1.17, 약 .45s) */
.tcard__hov { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 24px 24px 0 20px; border-radius: 20px; background: radial-gradient(120% 60% at 15% 85%, rgba(0,0,0,.07), transparent 60%), linear-gradient(115deg, #fff 30%, #ececec 55%, #fff 70%, #f1f1f1); color: var(--ink); transform: translateX(-130%) scaleX(.84); pointer-events: none; }
.tcard.is-hov .tcard__hov { transform: none; pointer-events: auto; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.tcard.is-out .tcard__hov { transform: translateX(115%) scaleX(1.17); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.tcard__hov .mark { position: absolute; right: 18px; top: 22px; color: var(--ink); }
.tcard__hov p { margin-top: 32px; font-size: 18px; line-height: 25.2px; letter-spacing: -.18px; }
.tcard__hov .byline { padding: 20px 0 20px 0; }
.tcard__hov .byline i { background: var(--ink-10); }
.tcard__hov .byline small { color: var(--ink-70); }
.tcard__soc { display: flex; gap: 4px; }
.tcard__soc a { display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--white); border-radius: 100%; }
.tcard__soc svg { width: 15px; height: 15px; }

/* ---------- 플레이그라운드 (벤토 모자이크) ---------- */
/* 6열 격자에 크기가 다른 칸을 섞는다. 폰 칸과 대화 칸은 2x2, 웹 칸은 4x1, 나머지는 2x1. 레드는 대화 칸의 점 하나뿐 */
.pg { background: var(--white); padding: 150px 40px 10px; --red: #ff1715; }
.pg .giant { margin: 0 -40px; }
.pg__row { display: grid; grid-template-columns: 1fr 1fr; margin-top: 90px; }
.pg__row .body { max-width: 450px; }
.pg__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 10px; margin-top: 83px; }
.pg__tile { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 24px; border-radius: 30px; background: var(--gray); --dur: .3s; --d: calc(var(--i, 0) * .08s); }
.pg__tile, .pg__tile[data-reveal] { transition: opacity var(--dur) ease-out var(--d), transform .7s var(--ease) var(--d); }
.pg__tile[data-reveal] { transform: translateY(18px); }
.pg__tile[data-reveal].is-in { transform: none; }
.pg__tile--phone { grid-column: span 2; grid-row: span 2; }
/* 대화 칸은 문답 하나라 한 줄 높이 (2026-10-06) */
.pg__tile--chat { grid-column: span 2; }
.pg__tile--wide { grid-column: span 4; }
.pg__tile--stat, .pg__tile--lab, .pg__tile--card { grid-column: span 2; }
.pg__tile--dark { background: var(--ink); color: var(--white); }
.pg__tile--stat, .pg__tile--card { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-10); }
.pg__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-60); }
.pg__tile--dark .pg__meta { color: var(--w-70); }
.pg__kind { padding: 5px 10px; border: 1px solid var(--ink-10); border-radius: 100px; color: var(--ink); }
.pg__tile--dark .pg__kind { border-color: var(--w-20); color: var(--white); }
.pg__name { margin-top: 18px; font-size: 24px; font-weight: 500; letter-spacing: -.72px; line-height: 30px; }
.pg__desc { margin-top: 6px; max-width: 260px; color: var(--ink-60); }
.pg__tile--dark .pg__desc { color: var(--w-70); }
.pg__cta { position: relative; z-index: 2; margin-top: auto; padding-top: 20px; }
.pg__cta .btn[aria-disabled="true"] { pointer-events: none; }
/* 화면 자리. shot 이 들어오면 img 가 채우고, 없으면 라벨 하나만 가운데에 */
.pg__frame { position: absolute; display: grid; place-items: center; background: var(--white); color: var(--ink-40); overflow: hidden; transition: transform .6s var(--ease); }
.pg__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pg__bar { position: absolute; left: 50%; top: 10px; width: 56px; height: 5px; border-radius: 100px; background: var(--ink-10); transform: translateX(-50%); }
/* 폰: 오른쪽 아래에서 올라와 아래쪽이 잘린다 */
.pg__tile--phone .pg__frame { right: 24px; bottom: -36px; width: 208px; height: 300px; border-radius: 34px; background: var(--dark-3); color: var(--w-40); box-shadow: inset 0 0 0 1px var(--w-10); }
.pg__tile--phone .pg__bar { background: var(--w-20); }
/* 웹: 오른쪽 절반에 브라우저 창, 아래가 잘린다 */
.pg__tile--wide .pg__meta, .pg__tile--wide .pg__name, .pg__tile--wide .pg__desc { width: calc(50% - 40px); }
/* 설명은 한 줄로 두고 칸 안에서 필요한 만큼 늘린다. 두 줄이 되면 210 높이를 넘어 버튼이 칸 밖으로 나간다 */
.pg__tile--wide .pg__desc { width: max-content; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg__tile--wide .pg__frame { left: 50%; right: 24px; top: 24px; bottom: -20px; border-radius: 14px 14px 0 0; box-shadow: inset 0 0 0 1px var(--ink-06); }
.pg__tile--wide .pg__bar { left: 14px; top: 12px; width: 8px; height: 8px; border-radius: 50%; transform: none; box-shadow: 14px 0 0 var(--ink-10), 28px 0 0 var(--ink-10); }
/* 작은 앱: 작은 폰이 오른쪽에서 고개를 내민다 */
.pg__tile--card .pg__frame { right: 24px; bottom: -70px; width: 150px; height: 220px; border-radius: 26px; background: var(--gray); box-shadow: inset 0 0 0 1px var(--ink-06); }
/* 실험: 화면 자리 대신 캐릭터 한 컷. 그림 배경이 칸 회색과 조금 달라 가장자리를 둥글게 녹인다 */
/* 목업 배경: 1240x860 그림을 칸 가로폭에 맞춰 아래에 붙인다. 그림 바탕은 칸 색(--ink)과 같아 위 빈 자리와 이어진다 */
.pg__bg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; transition: transform .6s var(--ease); }
.pg__tile--bg > :not(.pg__bg) { position: relative; z-index: 1; }
/* 웹 칸(4x1)은 높이가 낮아 칸을 꽉 채우고, 글이 있는 왼쪽부터 잘리게 한다 */
.pg__tile--wide .pg__bg { top: 0; height: 100%; object-fit: cover; object-position: right center; }
.pg__tile--wide.pg__tile--bg .pg__meta { justify-content: flex-start; gap: 14px; }
.pg__tile--lab .pg__frame { display: none; }
.pg__tile--lab .pg__meta, .pg__tile--lab .pg__name, .pg__tile--lab .pg__desc { position: relative; z-index: 1; width: calc(100% - 230px); }
.pg__chr { position: absolute; right: -40px; bottom: -50px; height: 140%; width: auto; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); transition: transform .6s var(--ease); }
/* 통계: 큰 숫자 하나 */
.pg__num { font-size: 88px; font-weight: 500; letter-spacing: -4px; line-height: 88px; margin-bottom: auto; }
.pg__tile--stat .label { margin-top: 16px; }
.pg__tile--stat .small { color: var(--ink-60); }
/* 대화: 묻는 쪽은 흰 풍선, 만든 사람은 검은 풍선. 칸이 보이면 풍선이 하나씩 올라온다 */
.pg__who { display: flex; align-items: center; gap: 8px; color: var(--ink-60); }
.pg__who i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.pg__bubs { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.pg__bub { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 15px; font-weight: 400; letter-spacing: -.15px; line-height: 22px; opacity: 0; transform: translateY(10px); transition: opacity .35s ease-out, transform .5s var(--ease); transition-delay: calc(var(--d, 0s) + .3s + var(--k, 0) * .45s); }
.pg__bub--q { align-self: flex-start; background: var(--white); border-bottom-left-radius: 4px; }
.pg__bub--a { align-self: flex-end; background: var(--ink); color: var(--white); border-bottom-right-radius: 4px; }
.pg__tile.is-in .pg__bub { opacity: 1; transform: none; }
@media (hover: hover) {
  .pg__tile.is-in:hover { transform: translateY(-4px); transition-delay: 0s; }
  .pg__tile:hover .pg__frame, .pg__tile:hover .pg__chr { transform: translateY(-8px); }
}
.pg .ticker { margin-top: 190px; }

/* ---------- FAQ + 노트 (연회색 카드) ---------- */
.faq-card { margin: 10px 12px 0; background: var(--gray); border-radius: 20px; padding: 192px 40px 110px; }
.faq { display: grid; grid-template-columns: 1fr 1fr; }
.faq__left { display: flex; flex-direction: column; justify-content: space-between; padding-right: 70px; }
.faq__left .lbl, .faq__left .body { max-width: 500px; }
.faq__left .body { margin-top: 50px; }
.faq__bottom { display: grid; gap: 40px; justify-items: start; margin-top: 80px; }
.faq__bottom .h2 { max-width: 598px; }
.acc--light .acc__item { background: var(--ink); color: var(--white); }
.acc--light .acc__head { padding: 20px; gap: 10px; align-items: center; }
.acc--light .acc__item.is-open .acc__head { padding: 20px 20px 0; align-items: center; }
.acc--light .acc__head .h4 { flex: 1; opacity: .9; }
.acc__ico { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.acc__ico svg { width: 16px; height: 16px; transform: rotate(45deg); transition: transform .35s var(--ease); }
.acc__item.is-open .acc__ico svg { transform: rotate(0deg); }
.acc--light .acc__body p { max-width: 628px; padding: 16px 20px 20px; color: var(--w-80); }
.ins { margin-top: 190px; }
.ins .giant { margin: 0 -40px; }
.ins__row { display: grid; grid-template-columns: 1fr 1fr; margin-top: 60px; }
.ins__row .body { max-width: 450px; }
.ins__row .btn { margin-top: 34px; }
.igrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.igrid__col { display: grid; gap: 20px; align-content: start; }
.pcard { height: 258px; border-radius: 20px; overflow: hidden; }
.pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard:hover img { transform: scale(1.04); }
.ncard { display: flex; flex-direction: column; height: 366px; background: var(--gray-2); border-radius: 20px; padding: 24px; }
.ncard h3 { margin-top: 20px; font-size: 19px; font-weight: 400; letter-spacing: -.19px; line-height: 26px; }
.ncard .small { margin-top: 20px; color: var(--ink-70); }
.ncard__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.ncard__foot b { display: block; font-size: 14px; font-weight: 400; letter-spacing: .28px; line-height: 19.6px; }
.ncard__foot small { display: block; margin-top: 4px; font-size: 12px; font-weight: 300; letter-spacing: .12px; line-height: 16.8px; color: var(--ink-70); }
.ncard__go { display: grid; place-items: center; width: 49px; height: 49px; background: var(--ink); color: var(--white); border-radius: 100%; transition: transform .3s; }
.ncard__go svg { width: 25px; height: 25px; }
.ncard__go svg { transform: rotate(-45deg); transition: transform .3s; }
.ncard:hover .ncard__go svg { transform: none; }
/* 호버: 카드가 검게 바뀌고 글자는 흰색, 화살표 버튼은 흰 바탕 */
.ncard, .ncard[data-reveal] { transition: opacity var(--dur, .5s) ease-out var(--d, 0s), background-color .3s var(--ease), color .3s var(--ease); }
.ncard:hover { background: var(--ink); color: var(--white); }
.ncard:hover .small, .ncard:hover .ncard__foot small { color: var(--w-70); }
.ncard:hover .ncard__go { background: var(--white); color: var(--ink); }
.ncard__go { transition: transform .3s, background-color .3s, color .3s; }

/* ---------- 푸터 (고정, 본문이 지나가면 드러난다) ---------- */
.foot-spacer { height: var(--foot-h); }
.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; height: var(--foot-h); min-height: 760px; background: var(--ink); color: var(--white); overflow: hidden; }
.foot__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foot__shade { position: absolute; inset: 0; background: linear-gradient(rgba(26, 26, 26, .55), rgba(26, 26, 26, .25) 60%, rgba(26, 26, 26, .5)); }
/* 화면이 낮으면 위로 올려 거대 글자와 띄운다 */
.foot__grid { position: absolute; left: 40px; right: 40px; top: min(291px, calc(max(100vh, 760px) - 600px)); display: grid; grid-template-columns: 1fr 1fr; }
.foot__brand { max-width: 400px; }
.foot__name { margin-top: 20px; font-size: 44px; font-weight: 700; letter-spacing: -1.76px; line-height: 1; }
.foot__brand .body { margin-top: 24px; color: var(--w-80); }
.foot__form { margin-top: 24px; display: flex; align-items: center; gap: 10px; height: 60px; padding: 3px 3px 3px 16px; background: var(--w-10); border: 1px solid var(--w-20); border-radius: 16px; }
.foot__form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--white); font: inherit; font-size: 16px; }
.foot__form input::placeholder { color: var(--w-50); }
.foot__mail { color: var(--white); }
.foot__mail .foot__addr { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot__social { margin-top: 24px; }
.foot__social .mono { display: block; }
.foot__social div { display: flex; gap: 12px; margin-top: 12px; }
.foot__social a { display: grid; place-items: center; width: 32px; height: 32px; background: var(--w-10); border-radius: 8px; color: var(--white); transition: background .3s; }
.foot__social a:hover { background: var(--w-20); }
.foot__social svg { width: 16px; height: 16px; }
/* 링크 열은 오른쪽 끝으로 좁혀 붙인다. 가운데 캐릭터와 겹치지 않게 */
.foot__cols { display: grid; grid-template-columns: repeat(3, 130px); justify-self: end; }
.foot__cols > div { padding-left: 17px; border-left: 1px solid var(--w-20); }
.foot__cols b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 500; line-height: 22.4px; text-transform: none; }
.foot__cols ul { margin-top: 20px; }
.foot__cols a, .foot__cols span { position: relative; display: inline-block; padding: 6px 0; font-size: 14px; font-weight: 300; letter-spacing: .28px; line-height: 21px; }
.foot__cols a::before { content: ""; position: absolute; left: -35px; top: 16px; width: 15px; height: 1px; background: var(--w-50); opacity: 0; transition: opacity .3s, transform .3s; transform: translateX(-6px); }
.foot__cols a:hover::before { opacity: 1; transform: none; }
.foot__giant { position: absolute; left: 0; right: 0; bottom: -.22em; font-size: 310px; font-weight: 700; letter-spacing: -12px; line-height: 1; color: var(--white); white-space: nowrap; text-align: center; pointer-events: none; }

/* ---------- 라이트박스 ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .85); display: grid; place-items: center; padding: 40px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__frame { width: min(1100px, 100%); aspect-ratio: 16 / 9; background: var(--ink); border-radius: 20px; overflow: hidden; transform: scale(.96); transition: transform .4s var(--ease); }
.lightbox.is-open .lightbox__frame { transform: none; }
.lightbox__frame video, .lightbox__frame img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__close { position: absolute; right: 30px; top: 30px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--white); color: var(--ink); border-radius: 100%; }
.lightbox__close svg { width: 20px; height: 20px; }

/* ---------- 서브페이지 ---------- */
.phead { padding: 172px 52px 106px; }
.phead .h1 { max-width: 1000px; }
.phead .body { max-width: 800px; margin-top: 20px; }
.phead .btn { margin-top: 30px; }
.gcard { margin: 0 12px; background: var(--gray); border-radius: 20px; padding: 12px 12px 100px; }
/* 어바웃: 흰 바탕이 회색 카드를 감싸고 둥근 아래 모서리로 다음 어두운 섹션 위에 얹힌다 */
.gwrap { background: var(--white); padding: 12px; }
.gwrap .gcard { margin: 0; padding-bottom: 180px; }
.gwrap .cover { height: 616px; }
.cover { position: relative; height: 620px; border-radius: 16px; overflow: hidden; background: var(--ink); }
.cover img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.cover .mark { position: absolute; right: 24px; top: 24px; color: var(--white); }
.story { display: grid; grid-template-columns: 1fr 1fr; margin-top: 181px; padding: 0 28px; }
.story__left { padding-right: 70px; }
.story__left .lbl { max-width: 598px; }
.story__left .h2 { max-width: 598px; margin-top: 50px; }
.story__left .btn { margin-top: 40px; }
.story__right { max-width: 550px; display: grid; align-content: start; gap: 24px; color: var(--ink-80); }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 100px; padding: 0 28px; }
.nums > div { padding-right: 60px; }
.nums b { display: block; font-family: var(--mono); font-size: 32px; font-weight: 400; letter-spacing: -2px; line-height: 32px; color: #000; }
.nums p { max-width: 267px; margin-top: 20px; }
.offer { padding: 180px 40px; }
.offer .h2 { max-width: 900px; margin-top: 50px; }
.offer .body { max-width: 700px; margin-top: 40px; }
.logos { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 700px; margin-top: 70px; }
.logos span { font-size: 16px; font-weight: 600; letter-spacing: -.3px; line-height: 24px; color: var(--white); white-space: nowrap; }
.ocards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 70px; }
.ocard { display: flex; flex-direction: column; min-height: 394px; background: var(--w-04); border-radius: 20px; padding: 30px; }
.ocard .glyph { width: 100px; height: 100px; color: var(--w-20); }
.ocard .glyph svg { width: 100%; height: 100%; }
.ocard b { display: block; margin-top: auto; font-size: 20px; font-weight: 500; letter-spacing: -.4px; line-height: 28px; }
.ocard p { min-height: 63px; margin-top: 14px; color: var(--white); }
.banner { position: relative; margin: 12px; height: 510px; border-radius: 20px; overflow: hidden; background: var(--ink); display: flex; align-items: flex-end; padding-bottom: 80px; }
/* 배너 510 안에서 거대 글자(220)는 위 210 / 아래 80 */
.banner > img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.banner .giant { position: relative; width: 100%; }
.plist { padding: 10px 0 150px; }
.plist .wgrid { margin-top: 0; }
/* 표지는 헤더 아래 102px 에서 시작한다 */
/* 표지 + 제목 한 덩어리 (1416x756). 사진 629px 이 아래로 어두워지며 정보 카드 뒤까지 이어지고, 왼쪽 제목 칸(996x250)만 흰 면 */
.wd__head { position: relative; margin: 102px 12px 12px; border-radius: 20px; overflow: hidden; }
.wd__cover { position: absolute; left: 0; right: 0; top: 0; height: 629px; overflow: hidden; background: var(--ink); }
.wd__cover img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
/* 진입: 제목과 정보 카드는 처음부터 제자리, 표지 사진만 뒤따라 나타나고 메뉴는 그다음 페이드 */
.wd__cover img { animation: coverIn .6s ease .1s both; }
@keyframes coverIn { from { opacity: 0; } }
body:is([data-page="work"], [data-page="playground"]) :is(.hdr__pill, .hdr__right) { animation: hdrFade .5s ease .35s both; }
@keyframes hdrFade { from { opacity: 0; } }
/* 표지는 시안 화면이라 밝다. 어두운 덮개로 어두운 사진 + 흰 글자 명암에 맞춘다 */
.wd__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(26, 26, 26, .3), rgba(26, 26, 26, .55) 72%, var(--ink)); }
.wd__cover b { position: absolute; left: 0; right: 0; top: 0; height: 506px; z-index: 1; display: grid; place-items: center; font-size: 40px; font-weight: 500; letter-spacing: -1.6px; color: var(--white); text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.wd__title { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 420px; margin-top: 506px; }
.wd__title > div:first-child { min-height: 250px; padding: 34px 30px 40px; background: var(--white); border-radius: 0 30px 0 0; }
.wd__title .h1 { max-width: 760px; }
.wd__title > div > .body { max-width: 560px; margin-top: 24px; }
.wd__meta { background: linear-gradient(transparent 123px, var(--ink) 123px); color: var(--white); border-radius: 0 0 20px 20px; padding: 63px 30px 40px; display: grid; gap: 14px; align-content: start; }
.wd__meta > div { display: flex; align-items: center; gap: 20px; }
.wd__meta .tag { background: var(--w-10); color: var(--w-80); border-radius: 100px; padding: 4px 12px; }
.wd__meta a { text-decoration: underline; text-underline-offset: 3px; }
/* 수치 카드 넷 (표지 아래 한 줄, 연회색 r20, 숫자 32 / 제목 20 / 설명 14 / 오른쪽 위 아이콘) */
.wd__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 60px 40px 0; }
.wd__stat { background: var(--gray); border-radius: 20px; padding: 24px; min-height: 230px; display: flex; flex-direction: column; }
.wd__stat-top { display: flex; justify-content: space-between; align-items: flex-start; }
.wd__stat b { display: block; font-family: var(--mono); font-size: 32px; font-weight: 400; letter-spacing: -1.6px; line-height: 32px; }
.wd__stat-top > span { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ink-60); }
.wd__stat-top svg { width: 22px; height: 22px; }
.wd__stat h3 { margin-top: auto; padding-top: 50px; font-size: 20px; font-weight: 500; letter-spacing: -.4px; line-height: 28px; }
.wd__stat p { margin-top: 10px; font-size: 14px; font-weight: 300; letter-spacing: .28px; line-height: 21px; color: var(--ink-70); }
/* 본문은 흰 바탕. 회색은 체크 상자만 */
.wd__body { margin: 0 12px; padding: 120px 28px 0; }
.wd__quote .h2 { max-width: 1100px; }
.wd__by { margin-top: 30px; }
.wd__p { max-width: 900px; margin-top: 40px; }
.ig2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 60px; }
.ig2 figure, .ig1 figure { height: 584px; border-radius: 20px; overflow: hidden; background: var(--gray); }
.ig2 img, .ig1 img { width: 100%; height: 100%; object-fit: cover; }
.ig1 { margin-top: 10px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; padding: 0 20px; }
.cols2 .small { max-width: 600px; color: var(--ink-70); }
.cols2 + .ig1 { margin-top: 60px; }
/* 체크 상자: 연회색 판 하나(1360x304) 안에 두 열, 앞에 둥근 체크 */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; margin-top: 60px; padding: 40px; background: var(--gray); border-radius: 20px; min-height: 304px; align-content: center; }
.checks li { display: flex; align-items: flex-start; gap: 12px; max-width: 480px; }
.checks li::before { content: ""; width: 16px; height: 16px; margin-top: 3px; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 9px no-repeat; border-radius: 100%; flex: none; }
.wd__big { margin-top: 100px; padding: 0 20px; }
.wd__big .h2 { max-width: 1200px; }
.wd__big .small { max-width: 900px; margin-top: 40px; color: var(--ink-70); }
.wd__body > .ig2:last-child { margin-top: 60px; }
.more { background: var(--white); padding: 150px 0 120px; }
.more .wgrid { margin-top: 10px; }
.more__nav { display: flex; justify-content: space-between; gap: 20px; margin: 40px 56px 0; }
.link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; letter-spacing: .28px; }
.link svg { width: 16px; height: 16px; }
/* 플레이그라운드 상세 (play.html). 작업 상세 틀 위에 표지 가운데 마크와 이름, 화면 자리 플레이스홀더만 더한다 */
/* 플레이그라운드 상세: 표지는 그림만, 제목 칸과 정보 카드는 그 아래 따로 */
.pd__head { overflow: visible; border-radius: 0; }
.pd__head .wd__cover { position: relative; border-radius: 20px; }
.pd__head .wd__cover::after { content: none; }
.pd__info { padding: 56px 30px 0; }
.pd__top { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.pd__top .body { max-width: 560px; margin-top: 24px; color: var(--ink-60); }
.pd__go { display: grid; justify-items: end; gap: 12px; }
.pd__go .small { color: var(--ink-60); }
.pd__go .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.pd__meta { display: grid; grid-template-columns: repeat(4, 1fr); margin: 48px 0 0; border-top: 1px solid var(--ink-10); }
.pd__meta > div { display: grid; gap: 10px; padding: 22px 20px 0 0; }
.pd__meta > div + div { padding-left: 20px; border-left: 1px solid var(--ink-10); }
.pd__meta dt { color: var(--ink-60); }
.pd__meta dd { margin: 0; }
@media (max-width: 809px) {
  .pd__info { padding: 36px 0 0; }
  .pd__top { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .pd__go { justify-items: start; }
  .pd__meta { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .pd__meta > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
.wd__meta a[aria-disabled="true"] { text-decoration: none; color: var(--w-50); pointer-events: none; }
/* 글 상세 (1440 기준): 커버 1416x724 위로 흰 카드 991 이 195px 겹친다. 본문 928, 리드 → 큰 인용 → 소제목 */
.ad__top { padding: 102px 12px 12px; }
.ad__cover { position: relative; height: 724px; border-radius: 20px; overflow: hidden; background: var(--ink); }
.ad__cover img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.ad__card { position: relative; width: min(991px, 100%); margin: -195px auto 0; background: var(--white); border-radius: 30px; padding: 50px 40px 40px; }
.ad__card .h1 { max-width: 911px; }
.ad__desc { max-width: 540px; margin-top: 20px; font-size: 16px; line-height: 24px; color: var(--ink-80); }
.ad__meta { display: flex; gap: 30px; margin-top: 30px; }
.ad__meta div { display: grid; gap: 6px; }
.ad__meta .tag { color: var(--ink-60); }
.ad__meta b { font-size: 14px; font-weight: 400; letter-spacing: .28px; line-height: 19.6px; }
.ad__body { width: min(1008px, 100%); margin: 0 auto; padding: 40px 40px 0; }
.ad__lead { font-size: 16px; font-weight: 300; letter-spacing: .32px; line-height: 24px; color: var(--ink-80); }
.ad__quote { margin-top: 40px; font-size: 54px; font-weight: 300; letter-spacing: -2.16px; line-height: 59.4px; color: var(--ink-80); }
.ad__prose h3 { margin-top: 40px; font-size: 28px; font-weight: 500; letter-spacing: -.28px; line-height: 39.2px; }
.ad__prose h4 { margin-top: 40px; font-size: 20px; font-weight: 500; letter-spacing: -.4px; line-height: 28px; }
.ad__prose p { margin-top: 20px; font-size: 16px; font-weight: 300; letter-spacing: .32px; line-height: 24px; }
.ad__prose ul { margin-top: 0; padding-left: 19px; list-style: disc; }
.ad__prose li p { margin-top: 0; }
.ad__prose strong { font-weight: 400; }
.ad__prose strong::after { content: ":"; }
.ad__more { padding: 180px 0 120px; }
.ad__more .giant { margin: 0 -40px; }
.ad__more .igrid { margin-top: 50px; }
.contact { display: grid; grid-template-columns: 906px 1fr; gap: 0; }
.contact__photo { position: relative; margin: 12px; height: 876px; border-radius: 20px; overflow: hidden; background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; }
.contact__photo img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.contact__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(26, 26, 26, .2), rgba(26, 26, 26, .65)); }
/* 글자는 어두운 막(::after) 위로. 막이 마지막에 그려져 흰 글씨를 덮고 있었다 */
.contact__photo > :not(img) { position: relative; z-index: 1; }
.contact__photo .label { margin-top: 50px; display: flex; align-items: center; gap: 8px; }
.contact__photo .label svg { width: 18px; height: 18px; }
.contact__mail { display: block; margin-top: 16px; font-size: 32px; font-weight: 400; letter-spacing: -.64px; line-height: 1.2; }
/* 문의 아래 연회색 판 (1440폭 기준): 판은 폼 아래 12px, 위 여백 192. 왼쪽 사진 320 정사각 + 연락처 모노, 오른쪽은 가운데 선(720)에서 폭 500.
 * 라벨 아래 50 문장(56/60), 40 본문, 22 소셜(34칸, 모서리 6, 간격 10), 50 버튼. 아래 FAQ 판과 이어 붙어 한 장으로 보인다 */
.cinfo { margin: 0 12px; padding: 192px 40px 0; background: var(--gray); border-radius: 20px 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; }
.cinfo__left figure { width: 320px; height: 320px; border-radius: 12px; overflow: hidden; }
.cinfo__left img { width: 100%; height: 100%; object-fit: cover; }
.cinfo__left .mono { margin-top: 38px; }
.cinfo__right { max-width: 500px; }
.cinfo__right .statement { margin-top: 50px; }
.cinfo__right > .body { margin-top: 40px; }
.cinfo__social { display: flex; gap: 10px; margin-top: 22px; }
.cinfo__social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--ink-06); color: var(--ink); transition: background .25s; }
.cinfo__social a:hover { background: var(--ink-10); }
.cinfo__social svg { width: 16px; height: 16px; }
.cinfo__right > .btn { margin-top: 50px; }
.faq-card--joined { margin-top: 0; border-radius: 0 0 20px 20px; padding-top: 180px; }
.contact__form { padding: 150px 40px 40px 44px; }
.contact__form .body { margin-top: 30px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.field { display: grid; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field span { font-size: 14px; font-weight: 400; letter-spacing: .28px; line-height: 19.6px; }
.field input, .field textarea { width: 100%; height: 44px; padding: 0 14px; background: var(--gray); border: 0; border-radius: 10px; outline: 0; font: inherit; font-size: 16px; color: var(--ink); }
.field textarea { height: 100px; padding: 10px 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-50); }
.field--suffix { position: relative; }
.field--suffix input { padding-right: 70px; }
.field--suffix::after { content: attr(data-suffix); position: absolute; right: 14px; bottom: 12px; font-size: 14px; color: var(--ink-60); }
.form__submit { grid-column: 1 / -1; margin-top: 10px; display: grid; gap: 10px; justify-items: start; }
.form__note { min-height: 20px; color: var(--ink-60); }
.phero { position: relative; margin: 12px; height: 668px; border-radius: 20px; overflow: hidden; background: var(--ink); color: var(--white); display: flex; flex-direction: column; padding: 160px 40px 0; }
.phero > * { position: relative; }
.phero > .phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero > .phero__dim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26, 26, 26, .5), transparent 55%); }
.avapill { display: flex; align-items: center; gap: 20px; }
.avapill .avas { padding: 0 19px; }
.avapill .avas i { height: 41px; margin-right: 24px; }
.avapill .avas img { left: -16px; top: 4px; width: 34px; height: 34px; box-shadow: 0 0 0 3px var(--white); }
.phero .h1 { margin-top: 30px; max-width: 680px; }
.phero .body { max-width: 430px; margin-top: 20px; }
.phero .btn { margin-top: 30px; align-self: flex-start; }
.pnums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; padding: 100px 40px 120px; }
.pnums b { display: block; font-family: var(--mono); font-size: 32px; font-weight: 400; letter-spacing: -2px; line-height: 32px; }
.pnums p { max-width: 280px; margin-top: 20px; }
.pnums strong { font-weight: 500; }
/* 회색 그림 카드 안에 유리 창: 1416 x 732, 창 1300 x 385 */
.ops { padding: 0 12px 12px; text-align: center; }
.ops__card { position: relative; height: 732px; border-radius: 20px; overflow: hidden; padding-top: 100px; color: var(--white); background: radial-gradient(70% 90% at 20% 0%, #b9b9b9, transparent 70%), linear-gradient(160deg, #8d8d8d, #3a3a3a 55%, #1c1c1c); }
.ops .h2 { max-width: 540px; margin: 0 auto; }
.ops .body { max-width: 460px; margin: 20px auto 0; }
.ops__frame { position: absolute; left: 58px; right: 58px; bottom: 0; height: 385px; padding: 20px 20px 0; background: rgba(255, 255, 255, .2); border-radius: 20px 20px 0 0; overflow: hidden; }
.ops__bar { display: flex; align-items: center; gap: 8px; padding: 0 4px 14px; }
.ops__bar i { width: 10px; height: 10px; border-radius: 100%; background: var(--w-50); }
.ops__bar span { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--w-70); }
.ops__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px 12px 0 0; }
/* 어두운 두 카드: 그림 위로 아래쪽 어둠, 가운데 정렬 글 */
.pcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px 12px; background: var(--white); }
.pcard2 { position: relative; height: 617px; border-radius: 20px; overflow: hidden; background: var(--ink); color: var(--white); text-align: center; }
.pcard2 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(84, 84, 84, 0) 0%, var(--ink) 70.93%); }
.pcard2__txt { position: absolute; z-index: 1; left: 50%; top: 440px; width: 440px; transform: translateX(-50%); }
.pcard2 p { margin-top: 10px; color: var(--w-80); }
/* 연회색 한 장: 약속 넷 + 자주 묻는 질문 */
.pfeat-wrap { padding: 0 12px 12px; }
.pfeat { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 192px 40px 0; background: var(--gray); border-radius: 20px 20px 0 0; }
.pfeat-wrap .faq-card { margin: 0; border-radius: 0 0 20px 20px; padding-top: 190px; }
.pfeat__left { display: flex; flex-direction: column; align-items: flex-start; }
.pfeat__big { max-width: 500px; font-size: 56px; font-weight: 500; letter-spacing: -2px; line-height: 60px; }
.pfeat__big span { color: rgba(26, 26, 26, .2); }
.pfeat__left .btn { margin-top: 60px; }
.pfeat__right { padding-left: 8px; }
.pfeat__right .lbl__line { background: var(--ink-10); }
.pfeat__right > .body-m { max-width: 520px; margin-top: 50px; }
.pfeat__grid { display: grid; grid-template-columns: repeat(2, 220px); gap: 40px; margin-top: 60px; }
.pfeat__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ink); overflow: hidden; }
.pfeat__ico .fico { transform: scale(.5); }
.pfeat__grid p { margin-top: 20px; }

/* ---------- 등장 ---------- */
[data-appear] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-appear].is-in { opacity: 1; transform: none; }
/* 스크롤 등장 (실측: 들어오자마자 시작해 0ms .42, 200ms .97). 바로 시작하고 0.25초에 거의 다 보인다 */
[data-reveal] { opacity: 0; transition: opacity var(--dur, .25s) ease-out; transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; }
/* 카드류는 열 순서대로 0.1s 간격 (첫 장은 즉시, 다음 장부터 한 박자씩) */
.stat, .stat__col, .wcard, .hacc__item, .tcard, .ncard, .pcard, .ocard, .pcard2, .dcard, .wd__stat { --dur: .22s; }
.stat, .stat__col, .ocard, .pcard2, .nums > div, .pnums > div, .wd__stat { --d: calc(var(--i, 0) * .1s); }
.stats > .stat, .stats > .stat__col { --d: calc(.1s + var(--i, 0) * .1s); --dur: .3s; }
.hacc__item, .ncard, .pcard, .dcard { --d: calc(var(--i, 0) * .1s); }
.feat__item, .pfeat__grid > div { --d: calc(.05s + var(--i, 0) * .1s); }
.wcard { --d: .05s; }
.tcard { --d: .1s; }
/* 줄 마스크 등장 (히어로 제목, 팀 거대 제목, 소개 h1). main.js 가 줄을 .ln 으로 감싸고 GSAP 으로 올린다 */
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: block; }
.hero__title .ln > .dim { color: var(--ink-40); }
/* 포인터 시차가 시작되면 카드의 등장 transform 전환을 끈다 (GSAP 이 바로 쓰도록) */
.hero .hcard.hcard--par[data-appear] { transition: opacity .8s cubic-bezier(.22, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  [data-appear], [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pg__tile[data-reveal], .pg__bub { opacity: 1; transform: none; transition: none; }
  .proc__tiles { animation: none; }
  .hero .hcard[data-appear] { transform: none; transition: none; }
  .foot, .hero__bg, body:has(.hero) .hdr__pill, body:has(.hero) .hdr__right { animation: none; opacity: 1; scale: none; translate: none; }
  .wd__cover img, body :is(.hdr__pill, .hdr__right) { animation: none; }
  /* 거대 배너는 CSS 마키(30px/s)로만 흐르고, 띠 둘은 멈춘다 */
  .ticker__track, .strip__track { animation: none; }
  .fico *, .fico::before, .fico::after { animation: none !important; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .wgrid { grid-template-columns: 1fr 1fr; }
  .wcard:nth-child(3n) { border-right: 0; }
  .wcard:nth-child(2n) { border-right: 1px solid var(--ink-06); }
  .feat__grid { grid-template-columns: 1fr 1fr; gap: 50px 0; }
  .incl { grid-template-columns: 1fr; gap: 40px; }
  .incl__grid { grid-template-columns: 1fr 1fr; }
  .feat__item:nth-child(3) { padding-left: 0; }
  .team__grid, .ocards, .nums, .pnums { grid-template-columns: 1fr 1fr; }
  .nums { row-gap: 50px; }
  .igrid { grid-template-columns: 1fr 1fr; }
  .huge { font-size: 72px; letter-spacing: -2.88px; line-height: 72px; }
  /* 1024: 4열. 웹 칸이 반으로 줄고 폰 칸과 대화 칸이 왼쪽 열을 차지한다 */
  .pg__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
  .pg__tile--wide { grid-column: span 2; }
  .pg__tile--chat { grid-column: span 4; }
  .pg__tile--wide .pg__meta, .pg__tile--wide .pg__name { width: calc(55% - 30px); }
  .pg__tile--wide .pg__frame { left: 55%; }
  /* 캐릭터를 오른쪽으로 비켜 세우고 링크는 왼쪽 브랜드 아래에 둔다 */
  .foot__bg { object-position: 17% 50%; }
  .foot__grid { grid-template-columns: 1fr; gap: 40px; top: 110px; }
  .foot__cols { grid-template-columns: repeat(3, 140px); justify-self: start; }
  .foot__giant { font-size: 22vw; letter-spacing: -.04em; }
  .contact { grid-template-columns: 1fr; }
  .contact__photo { height: 620px; }
  .contact__form { padding: 60px 40px; }
  /* 좁은 화면은 표지, 제목, 정보 카드를 차례로 쌓는다 */
  .wd__head { overflow: visible; border-radius: 0; }
  .wd__cover { position: relative; height: 505px; border-radius: 20px; }
  .wd__cover::after { background: linear-gradient(rgba(26, 26, 26, .3), rgba(26, 26, 26, .55)); }
  .wd__cover b { height: 100%; }
  .wd__title { grid-template-columns: 1fr; gap: 40px; margin-top: 0; padding: 40px 30px 0; }
  .wd__title > div:first-child { min-height: 0; padding: 0; border-radius: 0; background: none; }
  .wd__meta { background: var(--ink); border-radius: 20px; padding: 30px; }
  .pcards, .pfeat { grid-template-columns: 1fr; }
  .cap__grid { grid-template-columns: 1fr; gap: 60px; }
  .cap__left { padding-right: 0; }
  .cap__bottom { margin-top: 60px; }
  .hacc { height: 560px; }
}
@media (max-width: 809px) {
  body { font-size: 16px; }
  .h1 { font-size: 45px; letter-spacing: -1.8px; line-height: 49.5px; }
  .h2 { font-size: 35px; letter-spacing: -1.4px; line-height: 38.5px; }
  .h3 { font-size: 26px; letter-spacing: -.26px; line-height: 36.4px; }
  .h4 { font-size: 18px; letter-spacing: -.36px; line-height: 25.2px; }
  .huge { font-size: 56px; letter-spacing: -2.24px; line-height: 58px; }
  .statement { font-size: 36px; letter-spacing: -1.3px; line-height: 40px; }
  .giant { height: 141px; }
  .giant__track span { font-size: 128px; letter-spacing: -5.12px; line-height: 140.8px; }
  .giant__star { width: 120px; height: 120px; }
  .wrap { padding: 0 20px; }

  /* 헤더: 알약 하나에 로고와 햄버거, 열리면 아래로 늘어난다 */
  .hdr { left: 20px; right: 20px; top: 20px; }
  .hdr__pill { position: relative; flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding: 5px 16px 5px 5px; border-radius: 20px; }
  .hdr__row { display: flex; align-items: center; justify-content: space-between; height: 34px; }
  /* 메뉴 펼침: 약 0.25초에 알약이 아래로 늘어난다 (max-height + 투명도) */
  .hdr__links { display: flex; flex-direction: column; align-items: stretch; gap: 20px; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height .28s var(--ease), margin-top .28s var(--ease), opacity .2s ease, visibility 0s .28s; }
  .hdr__links a { padding: 7px 16px; font-size: 18px; letter-spacing: 0; line-height: 25.2px; }
  .hdr__pill.is-open .hdr__links { max-height: 400px; margin-top: 20px; opacity: 1; visibility: visible; transition: max-height .28s var(--ease), margin-top .28s var(--ease), opacity .2s ease .06s, visibility 0s; }
  .hdr__menu { display: grid; gap: 14px; max-height: 0; margin: 0 4px 0 16px; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height .28s var(--ease), margin .28s var(--ease), opacity .2s ease, visibility 0s .28s; }
  .hdr__pill.is-open .hdr__menu { max-height: 240px; margin: 20px 4px 11px 16px; opacity: 1; visibility: visible; transition: max-height .28s var(--ease), margin .28s var(--ease), opacity .2s ease .1s, visibility 0s; }
  .hdr__menu .btn { width: 100%; justify-content: flex-start; }
  .hdr__menu .lang { justify-self: start; height: 36px; padding: 0 10px; background: var(--gray); }
  .hdr__right { display: none; }
  .burger { display: grid; gap: 5px; width: 40px; height: 33px; align-content: center; padding: 0; }
  .burger i { display: block; width: 40px; height: 6px; background: var(--ink); border-radius: 100px; transition: transform .35s var(--ease), width .35s; }
  .burger[aria-expanded="true"] i { width: 38px; }
  .burger[aria-expanded="true"] i:first-child { transform: translateY(5.5px) rotate(45deg); }
  .burger[aria-expanded="true"] i:last-child { transform: translateY(-5.5px) rotate(-45deg); }

  .hero__card { min-height: 947px; padding-top: 130px; }
  .hero__top { flex-direction: column; padding: 0 20px; gap: 26px; }
  .hero__text .body { max-width: 326px; }
  .hcard { width: 100%; }
  .hero__bottom { padding: 0 20px 40px; margin-top: 40px; }
  .hero__shade { height: 60%; }
  .intro__card { padding: 12px 20px; }
  .intro__in { padding: 150px 0 30px; gap: 120px; }
  .stats { grid-template-columns: 1fr; }
  .works { padding: 120px 0 120px; }
  .wgrid { grid-template-columns: 1fr; gap: 0; margin: 30px 0 0; }
  .wcard { border: 0; padding: 16px 12px; }
  .wcard:nth-child(2n) { border-right: 0; }
  /* 390: 제목은 썸네일과 겹치지 않게 미디어 아래 흰 칸으로 내린다 */
  .wcard__media { height: 240px; border-radius: 19px 19px 10px 10px; }
  .wcard__media::after { opacity: 1; }
  .wcard__img { opacity: 1; transform: none; }
  .wcard__name { color: var(--white); font-size: 20px; letter-spacing: -.4px; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
  .wcard__logo { background: var(--white); height: 40px; }
  .cap { padding: 190px 20px 0; }
  .cap__grid { gap: 40px; }
  .cap__bottom { margin-top: 40px; }
  .hacc { flex-direction: column; height: auto; }
  /* 모바일은 글이 길어도 그림을 덮지 않게 그림을 글 아래로 흘린다. 높이는 max-height 로 연다 */
  .hacc .hacc__item { width: 100%; height: auto; max-height: 64px; transition: max-height .7s var(--ease), background .4s, opacity var(--dur, .22s) ease-out; }
  .hacc__item.is-open { width: 100%; max-height: 1200px; }
  .hacc__item, .hacc__item.is-open { flex: none; }
  .hacc__tex { width: 100%; }
  .hacc__num { left: 14px; right: auto; top: 12px; }
  .hacc__vt { left: 100px; right: auto; top: 22px; bottom: auto; transform: none; writing-mode: horizontal-tb; padding: 0; }
  .hacc__body { position: relative; inset: auto; width: 100%; min-height: 64px; padding: 66px 30px 30px; }
  .hacc__body .h3 { max-width: 280px; }
  .hacc__body .small { max-width: 280px; }
  .hacc__fig { position: static; margin: 24px auto 0; animation: none; }
  .vision { grid-template-columns: 1fr; padding: 150px 20px 100px; gap: 60px; }
  .vision__photo { order: 2; max-width: none; }
  .vframe { width: 100%; height: auto; aspect-ratio: 1; }
  .vision__text .h2 { margin-top: 50px; }
  .feat { padding: 120px 20px; }
  .feat__top { flex-direction: column; gap: 30px; }
  .feat__grid { grid-template-columns: 1fr; gap: 50px; margin-top: 60px; }
  .incl { margin-top: 80px; }
  .incl__grid { grid-template-columns: 1fr; }
  .feat__item { padding-left: 0; }
  .exp { padding: 120px 0 20px; }
  .exp__head { grid-template-columns: 1fr; margin-top: 50px; padding: 0 20px; }
  .rail { padding: 0 20px; scroll-padding: 0 20px; margin-top: 40px; }
  .exp .ticker { margin: 100px 20px 0; }
  .video { min-height: 760px; padding: 60px 20px; }
  .video__shade { background: linear-gradient(rgba(26, 26, 26, .85), rgba(26, 26, 26, .45) 35%, rgba(26, 26, 26, .45) 60%, rgba(26, 26, 26, .9)); }
  .video__top { flex-direction: column-reverse; gap: 20px; }
  .video__foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  .proc { padding: 150px 20px 100px; }
  .proc .h2 { margin-top: 50px; }
  .proc__grid { grid-template-columns: 1fr; }
  .proc__fig { min-height: 320px; }
  .acc__head { padding: 20px; gap: 20px; }
  .acc__item.is-open .acc__head { padding: 24px 20px 0; }
  .acc__body p { padding: 16px 20px 24px; }
  .proc__note { flex-direction: column; align-items: flex-start; gap: 30px; }
  .team { margin-top: 150px; }
  .team__row { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr; gap: 30px; margin-top: 50px; }
  .tcard figure { height: 430px; }
  .pg { padding: 120px 20px 10px; }
  .pg .giant, .ins .giant { margin: 0 -20px; }
  .pg__row { grid-template-columns: 1fr; margin-top: 50px; }
  /* 390: 2열. 통계와 실험 칸만 반 칸, 나머지는 한 줄 전체. 높이는 내용에 맞춘다 */
  .pg__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 8px; margin-top: 50px; }
  .pg__tile { padding: 20px; border-radius: 24px; grid-row: auto; }
  .pg__tile--phone, .pg__tile--wide, .pg__tile--chat, .pg__tile--card { grid-column: span 2; }
  .pg__tile--stat, .pg__tile--lab { grid-column: span 1; min-height: 200px; }
  .pg__tile--phone { min-height: 420px; }
  .pg__tile--phone .pg__frame { right: 20px; width: 180px; }
  .pg__tile--wide { min-height: 320px; padding-bottom: 160px; }
  .pg__tile--wide .pg__meta, .pg__tile--wide .pg__name, .pg__tile--wide .pg__desc, .pg__tile--lab .pg__meta, .pg__tile--lab .pg__name, .pg__tile--lab .pg__desc { width: auto; }
  .pg__tile--wide .pg__frame { left: 20px; right: 20px; top: auto; bottom: -16px; height: 136px; }
  .pg__tile--card { min-height: 220px; }
  .pg__tile--card .pg__frame { right: 20px; bottom: -60px; width: 120px; height: 180px; }
  .pg__tile--chat { min-height: 200px; }
  .pg__chr { display: none; }
  .pg__name { font-size: 20px; letter-spacing: -.4px; line-height: 26px; }
  .pg__desc { max-width: 200px; }
  .pg__num { font-size: 64px; letter-spacing: -2.5px; line-height: 64px; }
  .pg .ticker { margin-top: 100px; }
  .faq-card { padding: 140px 20px 80px; }
  .faq { grid-template-columns: 1fr; gap: 40px; }
  .faq__left { padding-right: 0; }
  .faq__bottom { margin-top: 40px; }
  .ins { margin-top: 120px; }
  .ins__row { grid-template-columns: 1fr; margin-top: 40px; }
  .igrid { grid-template-columns: 1fr; margin-top: 40px; }
  .foot { min-height: 100vh; }
  .foot__grid { left: 20px; right: 20px; top: 110px; gap: 40px; }
  .foot__bg { object-position: 50% 50%; }
  .foot__cols { grid-template-columns: repeat(3, 1fr); gap: 12px; justify-self: stretch; }
  .foot__cols b { font-size: 14px; white-space: nowrap; }
  .foot__cols > div { padding-left: 0; border-left: 0; }
  .foot__cols a::before { display: none; }
  .foot__giant { font-size: 120px; letter-spacing: -4px; }
  .phead { padding: 120px 20px 60px; }
  /* 390 기준: 소개 표지 346x240 */
  .cover, .gwrap .cover { height: 240px; }
  .story { grid-template-columns: 1fr; margin-top: 60px; padding: 0 8px; gap: 40px; }
  .story__left { padding-right: 0; }
  .nums { grid-template-columns: 1fr; padding: 0 8px; margin-top: 60px; gap: 30px; }
  .offer { padding: 150px 20px 100px; }
  .ocards { grid-template-columns: 1fr; }
  .ocard { min-height: 300px; }
  .gwrap .gcard { padding-bottom: 100px; }
  .logos { grid-template-columns: repeat(3, 1fr); row-gap: 16px; margin-top: 50px; }
  .ocards { margin-top: 50px; }
  /* 모바일(390폭): 배너 441, 거대 글자 아래 85 / 표지는 위 101, 좌우 20, 높이 312 */
  .banner { height: 441px; padding-bottom: 85px; }
  .wd__head { margin: 101px 20px 12px; }
  .wd__cover { height: 312px; }
  .wd__cover b { font-size: 28px; }
  .wd__title { padding: 30px 0 0; }
  .wd__stats { grid-template-columns: 1fr; margin: 40px 20px 0; }
  .wd__stat { min-height: 0; }
  .wd__stat h3 { padding-top: 30px; }
  .wd__body { margin: 0 20px; padding: 80px 0 0; }
  .ig2, .cols2, .checks { grid-template-columns: 1fr; }
  .cols2, .wd__big { padding: 0; }
  .checks { padding: 24px 20px; min-height: 0; gap: 16px; }
  .ig2 figure, .ig1 figure { height: 300px; }
  .wd__big { margin-top: 60px; }
  .more { padding: 100px 0 80px; }
  .more__nav { margin: 30px 20px 0; flex-direction: column; }
  .wcard--plain .wcard__media { background: var(--ink); } /* shot 없는 플레이그라운드 카드는 폰에서 잉크 면으로 */
  .ad__top { padding: 90px 8px 8px; }
  .ad__cover { height: 420px; }
  .ad__card { margin-top: -120px; padding: 30px 20px 24px; border-radius: 20px; }
  .ad__body { padding: 30px 20px 0; }
  .ad__quote { font-size: 32px; letter-spacing: -1.28px; line-height: 38px; }
  .ad__prose h3 { font-size: 24px; line-height: 32px; }
  .ad__more { padding: 100px 0 80px; }
  .ad__more .giant { margin: 0 -20px; }
  /* 390 순서: 폼이 먼저, 사진은 그 아래. 팀 소개도 글이 먼저, 사진은 그 아래 */
  .contact__photo { height: 560px; padding: 24px; order: 2; }
  .contact__mail { font-size: 24px; }
  .cinfo { grid-template-columns: 1fr; gap: 50px; padding: 100px 20px 0; }
  .cinfo__left { order: 2; }
  .cinfo__left figure { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; }
  .cinfo__right .statement { font-size: 36px; line-height: 40px; letter-spacing: -1.2px; }
  .faq-card--joined { padding-top: 100px; }
  .contact__form { padding: 120px 20px 50px; }
  .form { grid-template-columns: 1fr; }
  .phero { height: auto; min-height: 600px; padding: 130px 20px 40px; }
  .phero > .phero__bg { object-position: 75% center; }
  .phero > .phero__dim { background: linear-gradient(rgba(26, 26, 26, .78) 45%, rgba(26, 26, 26, .4)); }
  .pnums { grid-template-columns: 1fr; padding: 60px 20px; gap: 30px; }
  .ops__card { height: auto; padding: 80px 20px 0; }
  .ops__frame { position: relative; left: auto; right: auto; height: 260px; margin-top: 40px; padding: 12px 12px 0; }
  .pcards { grid-template-columns: 1fr; }
  .pcard2 { height: 520px; }
  .pcard2__txt { top: auto; bottom: 40px; width: calc(100% - 40px); }
  .pfeat { padding: 120px 20px 0; gap: 60px; }
  .pfeat__big { font-size: 40px; line-height: 44px; letter-spacing: -1.4px; }
  .pfeat__right { padding-left: 0; }
  .pfeat__right > .body-m { margin-top: 30px; }
  .pfeat__grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; margin-top: 40px; }
  .pfeat-wrap .faq-card { padding-top: 120px; }
}
@media (max-width: 420px) {
  .huge { font-size: 48px; letter-spacing: -1.9px; line-height: 50px; }
}