/* base.css — B (deep/index.html 16–375): exploration, header, gauge, layers, cards, labels, mobile.
   Dropped from B: the right .answer panel, the floating .approve, the black veil, the typed ask (founder,
   2026-09-28: no typing on the site — the visitor answers "어떤 지원이 필요하신가요?" with one of three chips).
   Added: fixed containers (CONTRACT §2), the lantern-styled answer chips (#pick), above-surface products layer, JS failsafe. */
:root{
  --ink:#EDE9E7; --ink2:rgba(237,233,231,.78); --ink3:rgba(237,233,231,.6); --ink4:rgba(237,233,231,.32);
  --teal:#10C4BE; --teal2:#63DDD7; --cyan:#BFF3F0; --warm:#F4D7B8; --amber:#FFC285; --red:#FF6B76;
  --bg:#01080a; --panel:#041114; --line:rgba(237,233,231,.12); --line2:rgba(237,233,231,.24);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,"Pretendard Variable",Pretendard,monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --ease2:cubic-bezier(.65,0,.35,1);
  --gut:clamp(20px,5vw,72px);
  /* workbench frame (CONTRACT §2): desktop 1440 ≈ x 538–1218, y 150–690; the journey may refine it */
  --convoR:calc(var(--gut) + min(400px,28vw) + 32px);
  --railL:calc(100vw - var(--gut) - 120px);
  --benchW:min(680px, calc(var(--railL) - var(--convoR) - 20px));
  --benchX:calc((var(--convoR) + var(--railL)) / 2 - var(--benchW) / 2);
  --benchY:150px;
  --benchH:clamp(360px, calc(100vh - 360px), 540px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--ink);color-scheme:dark;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(237,233,231,.16) #01080a;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;letter-spacing:-.005em;background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.mono{font-family:var(--mono);letter-spacing:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
::selection{background:rgba(16,196,190,.35);color:#fff}

/* ---------- stage ---------- */
/* the zero-byte poster (B .nogl-bg) is the first paint; the canvas crossfades in over it once the world is ready */
.nogl-bg{position:fixed;inset:0;z-index:0;background:
  radial-gradient(90% 38% at 50% -6%,rgba(150,232,228,.30),transparent 70%),
  radial-gradient(60% 40% at 70% 120%,rgba(16,196,190,.10),transparent 70%),
  linear-gradient(180deg,#0a2d33 0%,#041a1f 26%,#020d11 60%,#010507 100%)}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:#000;touch-action:pan-y;opacity:0;transition:opacity .9s var(--ease)}
html.gl-on #gl{opacity:1}
html.nogl #gl{display:none}
.scrim{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(1,7,9,.8) 0%,rgba(1,7,9,.55) 32%,rgba(1,7,9,0) 58%)}
.scrim-b{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(1,7,9,0) 30%,rgba(1,7,9,.72) 58%,rgba(1,7,9,.9) 100%)}
html.nojs .top,html.nojs .hero-foot,html.nojs .hero-title .ln{opacity:1;transform:none;filter:none}
html.nojs .gauge,html.nojs .convo{display:none}
html.nojs .pick-cur{opacity:1}
html.nojs .rv{opacity:1;transform:none}
.nojs-cta{display:none!important}
html.nojs .nojs-cta{display:inline-flex!important;margin-top:20px}
@media (max-width:760px){html.nojs .nojs-cta{white-space:normal;text-align:center}}
/* failsafe: if main.js never arrives (slow network), reveal the static page anyway (B hid its ask forever);
   the chips are plain links then, so a tap still goes somewhere useful */
html.js:not(.booted) .top,html.js:not(.booted) .hero-foot,html.js:not(.booted) .gauge,html.js:not(.booted) .pick-cur,html.js:not(.booted) #pick .pick-other{animation:rkFailsafe .4s ease 2.4s forwards}
html.js:not(.booted) .hero-title .ln,html.js:not(.booted) .hero-sub,html.js:not(.booted) .pick-q,html.js:not(.booted) #pickList .pick-c,html.js:not(.booted) .rv{animation:rkFailsafeT .4s ease 2.4s forwards}
@keyframes rkFailsafe{to{opacity:1}}
@keyframes rkFailsafeT{to{opacity:1;transform:none;filter:none}}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut) 0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.top.in{opacity:1}
.top::before{content:"";position:absolute;inset:0 0 -40px 0;background:linear-gradient(rgba(1,8,10,.62),rgba(1,8,10,0));pointer-events:none;z-index:-1}
.top>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;padding-right:6px;border-radius:8px}
.brand svg{width:46px;height:17px;display:block}
.brand-name{font-weight:600;font-size:15px;letter-spacing:-.01em}
.top-nav{display:flex;gap:2px;align-items:center}
.top-nav a{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink2);text-decoration:none;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px;transition:color .2s}
.top-nav a:hover{color:var(--ink)}
.depth-m{display:none}

/* ---------- depth gauge (top = above the surface, then 0 m and down) ---------- */
.gauge{position:fixed;right:calc(var(--gut) - 6px);top:50%;transform:translateY(-50%);z-index:60;opacity:0;transition:opacity 1s var(--ease);height:min(340px,42vh);width:120px}
.gauge.in{opacity:1}
body.journey .gauge .g-tick{pointer-events:none}
.g-track{position:absolute;right:0;top:0;bottom:0;width:1px;background:linear-gradient(rgba(244,215,184,.3),var(--line2) 22%,var(--line2) 72%,rgba(237,233,231,.08))}
.g-surf{position:absolute;right:-5px;width:11px;height:1px;background:rgba(150,232,228,.55);top:25%}
.g-tick{position:absolute;right:-10px;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;gap:10px;height:44px;min-width:44px;padding:0 0 0 10px;background:none;border:0;cursor:pointer;color:var(--ink3);border-radius:8px}
.g-tick::after{content:"";width:9px;height:1px;background:currentColor;margin-right:6px;transition:width .35s var(--ease),background .35s}
.g-tick .g-n{font-size:12px;letter-spacing:-.01em;white-space:nowrap;opacity:.0;transform:translateX(6px);transition:opacity .35s var(--ease),transform .35s var(--ease),color .35s}
.g-tick:hover .g-n,.g-tick:focus-visible .g-n{opacity:1;transform:none}
.g-tick.on{color:var(--ink)}
.g-tick.on::after{width:14px;background:var(--teal)}
.g-tick.up.on::after{background:var(--warm)}
.g-tick:hover{color:var(--ink)}
.g-marker{position:absolute;right:0;top:0;transform:translateY(-50%);display:flex;align-items:center;gap:8px;pointer-events:none;will-change:transform}
.g-marker::after{content:"";width:7px;height:7px;margin-right:-4px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(16,196,190,.18),0 0 14px rgba(16,196,190,.8);transition:background .4s,box-shadow .4s}
.gauge.above .g-marker::after{background:var(--warm);box-shadow:0 0 0 3px rgba(244,215,184,.2),0 0 14px rgba(255,194,133,.7)}
.g-read{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding-right:22px;white-space:nowrap}
.g-num{font-family:var(--mono);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.g-num i{font-style:normal;color:var(--ink3)}
.g-lay{font-size:11.5px;color:var(--teal);letter-spacing:-.01em}
.gauge.above .g-lay{color:var(--warm)}
.gauge:hover .g-marker,.gauge:focus-within .g-marker{opacity:.35}
.g-marker{transition:opacity .3s}

/* ---------- layers ---------- */
main{position:relative;z-index:20;transition:opacity .8s var(--ease)}
body.journey main{opacity:0;pointer-events:none}
.layer{position:relative;padding:0 var(--gut)}
.layer-0{height:100vh;height:100svh;min-height:600px}
/* desktop: the group (H1 → "다른 일이라면") ends ≥ 20 px above the team line at the bottom; --heroG ≈ its height plus
   that clearance. The particle logo forms around 26.5 % of the height, so the H1 never rises above ~35 %. */
.hero{position:absolute;left:0;right:0;top:min(41%,calc(100% - var(--heroG,542px)));display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--gut)}
.hero-title{margin:0;font-weight:600;font-size:clamp(40px,4.5vw,66px);line-height:1.2;letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
.hero-title .ln{display:block}
html.js .hero-title .ln{opacity:0;transform:translateY(20px);filter:blur(8px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease),filter 1.1s var(--ease)}
html.js .hero-title .ln.in{opacity:1;transform:none;filter:blur(0)}
/* the founding principle under the H1 (secondary text, like .lede). It has no intro.js hook: it fades in once
   intro.js reveals the H1's last line (.ln.in). Without :has() it is simply shown. */
.hero-sub{margin:18px auto 0;max-width:36em;font-size:17px;line-height:1.6;color:var(--ink2);letter-spacing:-.01em;text-wrap:balance}
html.js .hero-sub{opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease) .12s,transform 1.1s var(--ease) .12s}
html.js .hero:has(.hero-title .ln.in:last-child) .hero-sub{opacity:1;transform:none}
@supports not selector(:has(*)){html.js .hero-sub{opacity:1;transform:none}}
.nogl-logo{display:none}
html.nogl .nogl-logo{display:block;width:min(230px,52vw);margin:0 auto 30px}
@media (min-width:761px){html.nogl .hero{top:max(96px,calc(50vh - 330px))}}
.hero-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
html.js .hero-foot{opacity:0;transition:opacity 1.4s var(--ease)}
html.js .hero-foot.in{opacity:1}
.founder{margin:0;font-size:14px;line-height:1.6;color:var(--ink2);max-width:680px}
.founder b{color:var(--ink);font-weight:600;letter-spacing:-.01em}
.founder .mono{display:block;font-size:12px;color:var(--ink3);margin-top:4px;letter-spacing:.01em}
.cue{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:12px;white-space:nowrap}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--teal),transparent);animation:cue 2.4s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- the question and its three answers ----------
   The AI asks "어떤 지원이 필요하신가요?" and the logo's "_" is its cursor; the visitor answers with one tap.
   B's lantern language: a small glowing orb on a tether, an opaque dark surface, teal accents — never glass.
   Chip title = the area (SVC[area].area); second line = the example, marked as one (COPY.pickTag). */
.pick{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:46px}
.pick-q{margin:0;font-size:24px;line-height:1.3;font-weight:560;letter-spacing:-.018em;color:var(--ink);white-space:nowrap}
.pick-cur{display:inline-block;width:.66em;height:.14em;margin-left:.2em;border-radius:1px;background:var(--teal);vertical-align:-.02em;box-shadow:0 0 10px rgba(16,196,190,.55),0 0 26px rgba(16,196,190,.22);opacity:0;transition:opacity .22s linear}
.pick-cur.on{opacity:1;animation:blink 1.06s steps(1) infinite}
.pick-list{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:12px;width:100%;margin:26px 0 0;padding:0}
.pick-c{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:5px;align-items:center;min-height:80px;padding:15px 18px 14px 17px;border-radius:16px;border:1px solid rgba(16,196,190,.24);
  background:radial-gradient(150px 86px at 23px 27px,rgba(16,196,190,.1),rgba(16,196,190,0) 72%),#031114;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(237,233,231,.035),0 22px 50px -32px rgba(0,0,0,.95);transition:border-color .3s var(--ease),box-shadow .4s var(--ease),transform .25s var(--ease)}
/* the lantern brightens inside the chip (an opaque surface: the glow is painted on it, nothing shows through) */
.pick-c::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(240px 130px at 23px 27px,rgba(16,196,190,.17),rgba(16,196,190,0) 70%);opacity:0;transition:opacity .45s var(--ease)}
.pick-c>*{position:relative}
.pick-c .orb{grid-column:1;grid-row:1;justify-self:center;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#e8fffc 0 28%,#39d8d1 55%,#10C4BE 70%);box-shadow:0 0 8px 1px rgba(16,196,190,.6),0 0 22px 4px rgba(16,196,190,.18);transition:transform .35s var(--ease),box-shadow .35s}
.pick-c .orb::after{content:"";position:absolute;left:50%;top:13px;width:1px;height:21px;transform:translateX(-50%);background:linear-gradient(rgba(16,196,190,.5),rgba(16,196,190,0))}
.pick-t{grid-column:2;grid-row:1;font-size:18px;font-weight:620;line-height:1.3;letter-spacing:-.018em;color:var(--ink)}
.pick-e{grid-column:2;grid-row:2;display:flex;align-items:center;gap:7px;min-width:0;font-size:13.5px;line-height:1.45;color:var(--ink2);letter-spacing:-.005em}
.pick-tag{flex:none;padding:3px 5px;border-radius:5px;border:1px solid rgba(244,215,184,.3);background:rgba(244,215,184,.06);font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--warm)}
.pick-x{min-width:0}
.pick-go{grid-column:3;grid-row:1/3;width:9px;height:13px;display:block;fill:rgba(237,233,231,.42);transition:transform .35s var(--ease),fill .3s}
.pick-c:hover,.pick-c:focus-visible{border-color:rgba(16,196,190,.62);box-shadow:inset 0 1px 0 rgba(237,233,231,.05),0 0 0 1px rgba(16,196,190,.08),0 24px 64px -26px rgba(16,196,190,.42)}
.pick-c:hover::before,.pick-c:focus-visible::before{opacity:1}
.pick-c:hover .orb,.pick-c:focus-visible .orb{transform:scale(1.18);box-shadow:0 0 10px 2px rgba(191,243,240,.85),0 0 34px 10px rgba(16,196,190,.32)}
.pick-c:hover .pick-go,.pick-c:focus-visible .pick-go{transform:translateX(4px);fill:var(--ink)}
.pick-list .pick-c:active{transform:scale(.986)}
.pick-c:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:16px}
.pick-other{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;padding:0 8px;border-radius:8px;font-size:13.5px;color:var(--ink3);text-decoration:none;transition:color .25s}
.pick-other>span:first-child{text-decoration:underline;text-decoration-color:rgba(237,233,231,.22);text-underline-offset:5px;transition:text-decoration-color .25s}
.pick-arr{display:inline-block;font-family:var(--mono);transition:transform .3s var(--ease),color .25s}
.pick-other:hover,.pick-other:focus-visible{color:var(--ink)}
.pick-other:hover>span:first-child,.pick-other:focus-visible>span:first-child{text-decoration-color:rgba(237,233,231,.5)}
.pick-other:hover .pick-arr,.pick-other:focus-visible .pick-arr{transform:translateX(3px);color:var(--teal)}
/* the intro reveals the question, then the chips (they wait inert while invisible: intro.js) */
html.js .pick-q{opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
html.js .pick-q.in{opacity:1;transform:none}
html.js #pickList:not(.in) .pick-c{opacity:0}
html.js #pickList.in .pick-c{animation:pickIn .62s var(--ease) backwards}
html.js #pickList.in .pick-c:nth-child(2){animation-delay:.09s}
html.js #pickList.in .pick-c:nth-child(3){animation-delay:.18s}
@keyframes pickIn{from{opacity:0;transform:translateY(10px)}}
@keyframes pickFade{from{opacity:0}}
html.js #pick .pick-other{opacity:0;transition:opacity .9s var(--ease),color .25s}
html.js #pick .pick-other.in{opacity:1}
@media (min-width:761px) and (max-width:980px){.pick-list{grid-template-columns:minmax(0,440px)}}
/* shorter laptop screens: the whole group stays clear of the founder line (and below the particle logo) */
@media (min-width:761px) and (max-height:880px){.hero{--heroG:518px}.hero-sub{margin-top:12px}.pick{margin-top:34px}.pick-list{margin-top:20px}}
@media (min-width:761px) and (max-height:820px){.hero{top:37%}.hero-title{font-size:clamp(40px,min(4.5vw,7.6vh),66px)}.hero-sub{margin-top:10px;font-size:15px;line-height:1.5}.pick{margin-top:22px}.pick-list{margin-top:14px}.pick-c{min-height:68px;padding-top:11px;padding-bottom:10px}#pick .pick-other{margin-top:6px}}

.layer-in{position:relative;max-width:540px;padding:26vh 0 18vh}
/* eyebrow: "−200 m · Services" — the depth (mono) then " · Name" (no flex gap: the spaces around "·" match) */
.eyebrow{font-size:13px;letter-spacing:.01em;color:var(--teal);margin:0 0 20px;display:flex;gap:0;align-items:baseline}
.eyebrow b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink);letter-spacing:.02em}
.eyebrow.up{color:var(--warm)}
.h2{font-size:clamp(30px,3.2vw,48px);line-height:1.2;letter-spacing:-.024em;font-weight:600;margin:0;color:var(--ink)}
.lede{font-size:17px;line-height:1.7;color:var(--ink2);margin:20px 0 0;max-width:30em}
/* a lede's strong first line, then its explanation; a second lede paragraph sits closer */
.lede b{display:block;margin-bottom:2px;color:var(--ink);font-weight:600}
.lede+.lede{margin-top:12px}
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
/* blocks that hold buttons/links never sit at opacity 0 (focus rule): they only slide in */
html.js .rv.rv-t{opacity:1}

.svc{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.svc li{border-bottom:1px solid var(--line)}
/* the rows are links to /services/<slug>/ */
.svc a{width:100%;display:grid;grid-template-columns:40px 1fr 28px;gap:12px;align-items:center;text-align:left;background:none;border:0;padding:18px 6px 18px 2px;cursor:pointer;min-height:64px;border-radius:0;color:inherit;text-decoration:none;transition:background .35s var(--ease)}
.svc a:hover{background:linear-gradient(90deg,rgba(16,196,190,.09),transparent 80%)}
.svc .n{font-family:var(--mono);font-size:12px;color:var(--teal);align-self:start;padding-top:1px}
.svc .a{display:block;margin:0 0 3px;font-size:12.5px;line-height:1.4;color:var(--teal2);letter-spacing:-.005em}
.svc .t{font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink);display:block;line-height:1.35}
.svc .d{font-size:14.5px;color:var(--ink2);display:block;margin-top:4px;line-height:1.5}
.svc .go{font-family:var(--mono);color:var(--ink3);transition:transform .35s var(--ease),color .35s;justify-self:end}
.svc a:hover .go,.svc a:focus-visible .go{transform:translateX(4px);color:var(--teal)}
/* the line the three areas share: after launch, we keep running it */
.ops{display:flex;align-items:baseline;gap:10px;margin:20px 0 0;font-size:15px;line-height:1.6;color:var(--ink)}
.ops::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(16,196,190,.16),0 0 12px rgba(16,196,190,.7);transform:translateY(-1px)}
.proc{margin:26px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--ink3);line-height:1.9}
.proc b{color:var(--ink2);font-weight:500}
.proc .hm{color:var(--warm)}

/* product rows: name + status chip, then the mono tag (+ badge), the lead and one sentence (the /products/ panel
   reuses them with the fuller description) */
.prod{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.prod li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:16px 0 17px;border-bottom:1px solid var(--line);transition:background .3s}
.prod li:hover,.prod li.on{background:linear-gradient(90deg,rgba(244,215,184,.07),transparent 85%)}
.prod .t{grid-column:1;grid-row:1;font-size:20px;font-weight:600;letter-spacing:-.015em}
.prod .s{grid-column:2;grid-row:1;font-family:var(--mono);font-size:11px;color:var(--amber);border:1px solid rgba(255,194,133,.35);padding:4px 9px;border-radius:999px;align-self:center;white-space:nowrap}
.prod .k{grid-column:1/-1;grid-row:2;margin-top:2px;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ink3);letter-spacing:.01em}
.prod .k em{display:inline-block;margin-left:8px;padding:0 8px;border:1px solid rgba(244,215,184,.3);border-radius:999px;font-style:normal;font-size:11px;color:var(--warm);white-space:nowrap}
.prod .d{grid-column:1/-1;grid-row:3;margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink)}
.prod .x{grid-column:1/-1;grid-row:4;margin-top:3px;font-size:14px;line-height:1.65;color:var(--ink2)}
.jr-page .prod{margin-top:18px}
/* panel row labels (English, mono) never break inside a word ("Deliverables" in the 82 px phone column) */
.jr-dl dt{overflow-wrap:normal}
.note{margin:24px 0 0;font-size:14px;color:var(--ink3)}

.tagline{margin:22px 0 0;font-family:var(--mono);font-size:13px;color:var(--ink2);line-height:1.7}
.tagline b{color:var(--teal);font-weight:500}
.tools{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px;border-top:1px solid var(--line)}
.tools li{border-bottom:1px solid var(--line)}
.tool{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:12px 4px;min-height:58px;text-align:left;cursor:pointer;border-radius:0;transition:background .3s}
.tool:hover,.tool.on{background:linear-gradient(90deg,rgba(16,196,190,.1),transparent 85%)}
.tool .tn{font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.tool .tn i{font-style:normal;font-weight:500;color:var(--ink3);margin-left:6px;font-size:13.5px}
.tool .tk{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.hint{margin:16px 0 0;font-size:13px;color:var(--ink3)}
/* −4,000 m: two branches of tools (AI Harness · AI Agent) */
.tgroup{margin-top:30px}
.tg-h{margin:0;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--teal)}
.tg-h span{color:var(--ink3);font-weight:400}
.tg-d{margin:8px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink2);max-width:560px;word-break:keep-all}
.tgroup .tagline{margin-top:10px}
.tgroup .tools{margin-top:14px}
.evid{margin:30px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.evid h3{margin:0 0 10px;font-size:12px;font-family:var(--mono);font-weight:500;color:var(--ink3);letter-spacing:.04em}
.evid p{margin:0;font-family:var(--mono);font-size:12.5px;line-height:2;color:var(--ink2)}
.evid p b{color:var(--teal);font-weight:500}
.gh{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--ink);text-decoration:none;min-height:44px;border-bottom:1px solid var(--line2)}
.gh:hover{border-color:var(--teal);color:var(--teal)}

/* kernel: the monument first, then the text over a bottom scrim (B layer-4) */
.layer-k .layer-in{max-width:760px;margin:0 auto;text-align:center;padding-top:132vh;padding-bottom:22vh}
.layer-k .eyebrow{justify-content:center}
.layer-k .lede{margin-left:auto;margin-right:auto}
/* the two-line principle heading passes over the lit monument while the text rises: a soft shadow keeps it legible */
.layer-k .h2{text-shadow:0 2px 18px rgba(4,8,10,.85),0 0 42px rgba(4,8,10,.55)}
/* the founding principle as two columns: Deterministic (Tool, teal) · Non-deterministic (AI / LLM); stacked on phones */
.split{display:grid;grid-template-columns:1fr 1fr;margin:32px auto 0;max-width:640px;text-align:left;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split-c{padding:16px 22px 16px 0}
.split-c+.split-c{padding:16px 0 16px 22px;border-left:1px solid var(--line)}
.split-h{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--teal)}
.split-h b{font-weight:500;color:var(--ink)}
.split-c.ai .split-h{color:var(--teal2)}
.split-w{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--ink)}
.split-t{margin:8px 0 0;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink3)}
.spark{margin:28px auto 0;max-width:34em;font-size:15px;color:var(--ink2);line-height:1.7}
.spark+.spark{margin-top:14px}
.spark b{color:var(--ink);font-weight:600}
.spark .mono{display:inline-block;margin-top:8px;font-size:12px;color:var(--warm);border:1px solid rgba(244,215,184,.3);border-radius:999px;padding:3px 10px}
.record{list-style:none;margin:40px auto 0;padding:0;max-width:600px;text-align:left;border-top:1px solid var(--line)}
.record li{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink2)}
.record .mono{font-size:12px;color:var(--ink3);padding-top:2px}
/* products above the surface, then the final ask */
.layer-p .layer-in{padding-top:30vh;padding-bottom:30vh}
.final-wrap{max-width:960px;margin:0 auto;padding:0 0 16vh;text-align:center}
.final{display:flex;flex-direction:column;align-items:center}
.final .h2{font-size:clamp(28px,2.8vw,40px)}
.final .pick-list{margin-top:28px}
.foot{margin:72px 0 0;font-family:var(--mono);font-size:11px;color:var(--ink3)}
.foot a{color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--ink)}
/* desktop: from the services down, every text block starts on the header logo's line, like the layers above
   (founder, 2026-09-30: "첫화면의 로고와 본문은 가운데 유지하자. 그 밑에 서비스 항목부터 왼쪽 정렬").
   The first screen stays centred; phones keep their layout. The kernel column is as wide as its two-column split. */
@media (min-width:761px){
  .layer-k .layer-in{max-width:640px;margin:0;text-align:left}
  .layer-k .eyebrow{justify-content:flex-start}
  .layer-k .lede,.layer-k .split,.layer-k .spark,.layer-k .record{margin-left:0;margin-right:0}
  .final-wrap{margin:0;text-align:left}
  .final{align-items:flex-start}
  .final .pick-list{justify-content:start}
  /* the link's own 8 px padding: its words start on the line */
  .final .pick-other{margin-left:-8px}
}

/* ---------- buttons ---------- */
.btn-warm,.btn-ghost,.btn-teal{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;font-size:15px;font-weight:600;letter-spacing:-.01em;cursor:pointer;text-decoration:none;transition:transform .25s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s,color .3s;white-space:nowrap}
.btn-warm{background:#F4D7B8;color:#1d130a;border:0;box-shadow:0 0 0 1px rgba(255,226,194,.55),0 0 42px rgba(255,184,112,.32)}
.btn-warm:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,226,194,.8),0 0 64px rgba(255,184,112,.5)}
.btn-ghost{background:#031013;color:var(--ink);border:1px solid var(--line2)}
.btn-ghost:hover{border-color:var(--ink3)}
.btn-teal{background:#031013;color:var(--ink);border:1px solid rgba(16,196,190,.6)}
.btn-teal:hover{background:#062326}

@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* ---------- conversation (B's column; the Log mounts here during a journey) ---------- */
.convo{position:fixed;left:var(--gut);bottom:112px;width:min(410px,31vw);max-height:62vh;z-index:65;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 72px);mask-image:linear-gradient(to bottom,transparent 0,#000 72px);overflow:hidden}
.convo:empty{display:none}
.convo.show{opacity:1}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.msg{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:baseline;font-size:15px;line-height:1.6;color:var(--ink2);animation:msgIn .55s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg .who{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink3);white-space:nowrap}
.msg--you .body{color:var(--ink);font-weight:500}
.msg--you .who{color:var(--warm)}
.msg--ai .who{color:var(--teal)}
.msg--ai .body{color:var(--ink)}
.msg--tool{font-family:var(--mono);font-size:12.5px;line-height:1.65}
.msg--tool .who{color:var(--teal2)}
.msg--tool .body{color:var(--ink2)}
.msg .bad{color:var(--red)}
.msg .good{color:var(--teal)}
.msg .warm{color:var(--warm)}
.cur{color:var(--teal);font-weight:600;animation:blink 1s steps(1) infinite}
.msg a{color:var(--teal);pointer-events:auto;display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}

/* ---------- 3D-anchored labels (one at a time) ---------- */
.labels{position:fixed;inset:0;z-index:62;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;font-family:var(--mono);font-size:12px;line-height:1.35;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .45s var(--ease);will-change:transform;display:flex;align-items:center;gap:8px}
.lbl.show{opacity:1}
.lbl::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;flex:none}
.lbl.left{flex-direction:row-reverse}
.lbl span{background:#01080a;padding:3px 7px;border-radius:4px}
.lbl.bad{color:var(--red)}
.lbl.good{color:var(--teal)}
.lbl.note{color:var(--ink)}
.lbl.note span{border-left:2px solid var(--teal2)}
.lbl.gate{color:var(--teal2)}
.lbl.human,.lbl.prod{color:var(--warm)}
.lbl.prod span b{font-weight:500;color:var(--ink);margin-right:6px}

/* ---------- "< _ >": the logo's brackets at the capsule's ends (projected DOM, sits in the labels layer) ---------- */
.wglyph{position:absolute;left:0;top:0;width:40px;height:57px;opacity:0;transition:opacity .45s var(--ease);will-change:transform;overflow:visible}
.wglyph.show{opacity:1}
.wglyph path{vector-effect:non-scaling-stroke}
.wglyph-l path{fill:#10C4BE}
.wglyph-l{filter:drop-shadow(0 0 6px rgba(16,196,190,.75)) drop-shadow(0 0 18px rgba(16,196,190,.35))}
.wglyph-r path{fill:none;stroke:var(--amber);stroke-width:1.6;stroke-dasharray:4 4;animation:slotWait 1.6s linear infinite}
.wglyph-r{filter:drop-shadow(0 0 8px rgba(255,194,133,.35))}
.wglyph-r.filled path{fill:#EDE9E7;stroke:#EDE9E7;stroke-dasharray:none;animation:none}
.wglyph-r.filled{filter:drop-shadow(0 0 8px rgba(255,236,214,.8)) drop-shadow(0 0 22px rgba(255,194,133,.45))}
@keyframes slotWait{to{stroke-dashoffset:-16}}

/* ---------- creature card (hidden + inert while closed) ---------- */
.card{position:fixed;z-index:88;left:0;top:0;width:min(320px,calc(100vw - 32px));background:#031013;border:1px solid var(--line);border-left:2px solid var(--teal);padding:16px 18px 12px;opacity:0;transition:opacity .35s var(--ease);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.card.show{opacity:1}
.card-h{display:flex;align-items:baseline;gap:8px;padding-right:28px}
.card-n{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.card-ko{font-size:13px;color:var(--ink3)}
.card-v{margin:4px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--teal)}
.card-r{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ink2)}
.card-q{margin:8px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--ink3)}
.card-a{display:inline-flex;align-items:center;gap:8px;margin-top:8px;min-height:44px;font-family:var(--mono);font-size:12.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.card-a:hover{color:var(--teal)}
.card-x{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;background:none;color:var(--ink3);cursor:pointer;font-size:20px;border-radius:10px}
.card-x:hover{color:var(--ink)}
.hover-tag{position:fixed;left:0;top:0;z-index:66;pointer-events:none;font-family:var(--mono);font-size:12px;color:var(--ink);background:#01080a;padding:5px 9px;border-radius:5px;border-left:2px solid var(--teal);opacity:0;transition:opacity .2s;white-space:nowrap}
.hover-tag.show{opacity:1}
body.pick #gl{cursor:pointer}
.leader{position:fixed;inset:0;width:100%;height:100%;z-index:63;pointer-events:none;overflow:visible}
.leader line{stroke:var(--teal);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .3s}
.leader.show line{opacity:.8}
.leader.warm line{stroke:var(--warm)}

/* ---------- fixed containers for the journey/studio (CONTRACT §2); every overlay starts hidden inert ---------- */
#rail{position:fixed;right:calc(var(--gut) - 6px);top:50%;transform:translateY(-50%);z-index:60}
.bench{position:fixed;z-index:40;left:var(--benchX);top:var(--benchY);width:var(--benchW);height:var(--benchH)}
#specHost{position:fixed;left:0;top:0;z-index:85}
#gate{position:fixed;z-index:85}
#ship{position:fixed;z-index:90}
#dev{position:fixed;z-index:95}
#toast{position:fixed;z-index:99;left:50%;bottom:24px;transform:translateX(-50%)}
@media (max-width:1280px){:root{--convoR:calc(var(--gut) + 360px)}}
@media (max-width:1100px){:root{--convoR:var(--gut);--railL:calc(100vw - var(--gut));--benchY:178px}}

/* ---------- mobile ---------- */
@media (max-width:760px){
  :root{--benchX:12px;--benchW:calc(100vw - 24px);--benchY:150px;--benchH:min(64svh,560px)}
  .top{padding-top:10px}
  .top-nav{display:none}
  .depth-m{display:block;font-family:var(--mono);font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;min-height:44px;display:flex;align-items:center}
  .gauge{display:none}
  .scrim{background:linear-gradient(180deg,rgba(1,7,9,0) 0%,rgba(1,7,9,.2) 30%,rgba(1,7,9,.78) 55%,rgba(1,7,9,.86) 100%)}
  .scrim-b{background:linear-gradient(180deg,rgba(1,7,9,.5) 0%,rgba(1,7,9,.78) 35%,rgba(1,7,9,.9) 100%)}
  /* first screen (static within 1 s): logo, H1 in two lines, the question, three full-width answer chips (≥56 px),
     the "다른 일이라면" link, then the founder line — in flow, so a short phone simply scrolls instead of overlapping */
  .layer-0{display:flex;flex-direction:column;height:auto;min-height:100vh;min-height:100svh}
  .hero{position:relative;top:auto;left:auto;right:auto;padding:clamp(84px,calc(50svh - 268px),200px) 0 0}
  .nogl-logo,html.nogl .nogl-logo{display:block;width:118px;margin:0 auto 26px}
  .hero-title{font-size:min(30px,6.75vw);line-height:1.28;letter-spacing:-.03em}
  html.js .hero-title .ln{transition:opacity .45s var(--ease),transform .5s var(--ease),filter .45s var(--ease);transform:translateY(8px);filter:none}
  .pick{margin-top:28px}
  .pick-q{font-size:19.5px}
  .pick-list{grid-template-columns:1fr;gap:8px;margin-top:16px}
  .pick-c{min-height:66px;padding:13px 16px 12px 16px;border-radius:15px;column-gap:13px}
  .pick-c:focus-visible{border-radius:15px}
  .pick-t{font-size:16px}
  .pick-e{font-size:13px}
  .pick-other{margin-top:8px;font-size:13px}
  .final .pick-list{margin-top:22px}
  .hero-foot{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto;padding:34px 0 calc(26px + env(safe-area-inset-bottom));flex-direction:column;align-items:flex-start;gap:10px}
  html.js .hero-foot{transition:opacity .45s var(--ease)}
  .founder{font-size:13px}
  .founder .mono{font-size:11px}
  .hero-sub{margin-top:12px;font-size:14.5px;line-height:1.55}
  .cue{display:none}
  .layer-in{padding:54vh 0 16vh;max-width:none}
  .h2{font-size:28px}
  .lede{font-size:15.5px}
  .split{grid-template-columns:1fr;margin-top:26px}
  .split-c,.split-c+.split-c{padding:14px 0}
  .split-c+.split-c{border-left:0;border-top:1px solid var(--line)}
  .split-w{font-size:14.5px}
  .svc .t{font-size:17.5px}
  .svc .d{font-size:14px}
  .ops{font-size:14px}
  .prod .t{font-size:18px}
  .prod .d{font-size:14.5px}
  .prod .x{font-size:13.5px}
  /* the products block fills the phone screen: the 3D product labels would sit on its text (the list names them) */
  .lbl.prod{display:none}
  .tools{grid-template-columns:1fr 1fr;gap:0 12px}
  .tool .tn{font-size:14.5px}
  .tool .tn i{display:block;margin:0;font-size:12.5px}
  .layer-k .layer-in{padding-top:112vh}
  .layer-p .layer-in{padding-top:50vh}
  .record li{grid-template-columns:78px 1fr;font-size:14px}
  .convo{left:16px;right:16px;width:auto;top:64px;bottom:auto!important;max-height:36vh;justify-content:flex-end}
  .msg{grid-template-columns:58px 1fr;gap:10px;font-size:14px}
  .msg--tool{font-size:11.5px}
  .card{width:calc(100vw - 32px)}
}
/* very short phones: the static logo steps aside so the question and all three chips share the first screen */
@media (max-width:760px) and (max-height:700px){.nogl-logo,html.nogl .nogl-logo{display:none}.hero{padding-top:76px}}

@media (prefers-reduced-motion:reduce){
  html.js .hero-title .ln,html.js .hero-sub{transform:none;filter:none;transition:opacity .2s ease}
  html.js .rv{transform:none;transition:opacity .2s ease}
  .cue i{animation:none}
  .msg{animation:none}
  .pick-cur.on{animation:none}
  .wglyph-r path{animation:none}
}
html.rm .hero-title .ln,html.rm .hero-sub,html.rm .rv,html.rm .pick-q{transform:none!important;filter:none!important;transition:opacity .2s ease!important}
html.rm #pickList.in .pick-c{animation:pickFade .2s linear backwards!important}
html.rm .pick-cur.on{animation:none}

/* services block (−200 m): the vertical rhythm scales with the viewport height so the whole block
   lands above the bottom edge on common laptop screens; the procedure line (also on the rail and the
   service pages) steps aside on very short screens. The H2 is COPY.svcHook (one string, no <br>). */
.layer-1 .h2{text-wrap:balance}
@media (min-width:761px){
  .layer-1 .eyebrow{margin-bottom:clamp(12px,2.2vh,20px)}
  .layer-1 .h2{font-size:clamp(28px,min(3.2vw,5.2vh),48px)}
  .layer-1 .lede{margin-top:clamp(12px,2.2vh,20px)}
  .layer-1 .svc{margin-top:clamp(18px,3.4vh,34px)}
  .layer-1 .svc a{padding-top:clamp(10px,1.8vh,18px);padding-bottom:clamp(10px,1.8vh,18px);min-height:56px}
  .layer-1 .ops{margin-top:clamp(12px,2vh,20px)}
  .layer-1 .proc{margin-top:clamp(12px,2.6vh,26px)}
}
@media (min-width:761px) and (max-height:800px){ .layer-1 .proc{display:none} }
@media (min-width:761px) and (max-height:780px){
  .layer-1 .h2 br{display:none}
  .layer-1 .h2{font-size:clamp(26px,2.4vw,34px)}
}