/*! UPINTER v3 · shared styles · 2026-09-29
   Tokens follow AXIS v3.2 (ink · warm white · vermilion, Pretendard). Motion rules are relaxed for this draft only. */
/* fonts are linked from each page head (fonts/pretendard/pretendard.css · fonts/plexmono/plexmono.css) — no @import chains */

:root{
  --bg:#F4F2EE; --paper:#FFFFFF; --ink:#121113; --t2:#5F5F5F; --t3:#8A8A86;
  --rule:#D9D6D0; --rule2:#EAE7E1; --brand:#F9431C; --brand-ink:#DE2F00;
  --on-ink:#FFFFFF; --on-ink2:#BDBDBD;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gx:clamp(20px,3.6vw,64px);
  --hd:68px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--bg);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss06"}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
::selection{background:var(--brand);color:#fff}

.sr,.visually-hidden:where(:not(:focus-within,:active)){position:absolute!important;clip-path:inset(50%)!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;white-space:nowrap!important}
.skip{position:fixed;left:12px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:2px;text-decoration:none;font-weight:700;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;height:var(--hd);z-index:60;display:flex;align-items:center;gap:28px;padding:0 var(--gx);color:var(--ink);transition:color .4s var(--ease)}
.hd .logo{display:block;position:relative;width:132px;height:24px;flex:none}
.hd .logo img{position:absolute;inset:0;height:24px;width:auto;transition:opacity .4s var(--ease)}
.hd .logo .lw{opacity:0}
.hd nav{margin-left:auto;display:flex;gap:26px}
.hd nav a{font-size:15px;font-weight:600;text-decoration:none;opacity:.62;transition:opacity .25s;white-space:nowrap}
.hd nav a:hover,.hd nav a[aria-current="true"],.hd nav a[aria-current="page"]{opacity:1}
.hd nav a[aria-current="true"],.hd nav a[aria-current="page"]{text-decoration:underline 2px var(--brand);text-underline-offset:7px}
[data-tone="dark"] .hd{color:#fff}
[data-tone="dark"] .hd .logo .lk{opacity:0}
[data-tone="dark"] .hd .logo .lw{opacity:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:2px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:#2C2B2D;border-color:#2C2B2D}
.btn.o{background:transparent;color:var(--ink)}
.btn.o:hover{background:var(--ink);color:#fff}
.btn.sm{height:40px;padding:0 16px;font-size:14px}
.tone-dark .btn,[data-tone="dark"] .hd .btn{background:#fff;color:var(--ink);border-color:#fff}
.tone-dark .btn:hover,[data-tone="dark"] .hd .btn:hover{background:var(--on-ink2);border-color:var(--on-ink2)}
.tone-dark .btn.o{background:transparent;color:#fff;border-color:#fff}
.tone-dark .btn.o:hover{background:#fff;color:var(--ink)}

/* ---------- film: fixed stage + scroll track ---------- */
.track{position:relative;z-index:0}
.track .mk{display:block;height:0}
.stage{position:relative}
.js .stage{position:fixed;inset:0;overflow:hidden;z-index:1}
.scene{position:relative}
.js .scene{position:absolute;inset:0;opacity:0;pointer-events:none}
.js .scene.is-on,.js .scene.is-exit{opacity:1}
.js .scene.is-on{pointer-events:auto}
.no-js .scene{min-height:100vh;padding:calc(var(--hd) + 40px) var(--gx) 64px}
.no-js .idx,.no-js .ctl.mo{display:none}
.no-js .hd{position:absolute}

/* copy block — each scene keeps one sentence as the protagonist */
.copy{position:absolute;left:var(--gx);bottom:clamp(48px,9vh,112px);width:min(40vw,620px);z-index:3}
.no-js .copy{position:relative;left:auto;bottom:auto;width:auto;max-width:640px}
.label{display:block;font-size:14px;font-weight:650;color:var(--t2);margin:0 0 18px;letter-spacing:-.005em}
.tone-dark .label{color:var(--on-ink2)}
.h1{font-size:clamp(44px,7vw,124px);font-weight:820;letter-spacing:-.048em;line-height:1.02;margin:0}
.h2{font-size:clamp(34px,4.3vw,72px);font-weight:800;letter-spacing:-.038em;line-height:1.1;margin:0}
.lead{font-size:clamp(16px,1.2vw,19px);line-height:1.62;color:var(--t2);margin:22px 0 0;max-width:36ch}
.tone-dark .lead{color:var(--on-ink2)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.more{display:inline-block;margin-top:24px;font-size:15px;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.more:hover{color:var(--brand)}

/* numbers — each number keeps its basis line */
.stats{display:flex;flex-wrap:wrap;gap:18px 36px;margin:28px 0 0;padding:0;list-style:none}
.stats li{min-width:0}
.stats .n{display:block;font-size:clamp(30px,3vw,52px);font-weight:820;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stats .n.hot{color:var(--brand)}
.stats .t{display:block;font-size:14px;font-weight:600;margin-top:8px}
.basis{display:block;font-size:13px;line-height:1.5;color:var(--t3);margin-top:16px;font-variant-numeric:tabular-nums}
.tone-dark .basis{color:#8F8E8C}

/* split text (V3.split) */
.v3w{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding:.04em 0 .12em;margin:-.04em 0 -.12em}
.v3c{display:inline-block;will-change:transform}

/* keywords inside a scene's main sentence: <em class="kw"> (never across a <br>).
   Base: vermilion letters. Each direction draws its own mark on top (b/b.css · c/c.css); the drawn state
   is keyed to .scene.is-on so it replays on every visit, and shows at once without JS or with reduced motion. */
.kw{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.kwrap{white-space:nowrap}

/* ---------- scene index (where you are in the film) ---------- */
.idx{position:fixed;right:clamp(12px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ix{display:flex;align-items:center;gap:10px;height:22px;text-decoration:none;color:var(--ink)}
.ix .bar{display:block;width:14px;height:2px;background:currentColor;opacity:.28;transition:width .35s var(--ease),opacity .35s,background .35s}
.ix .lb{font-size:13px;font-weight:650;opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--ease);white-space:nowrap}
.ix:hover .lb,.ix:focus-visible .lb{opacity:1;transform:none}
.ix .lb{background:var(--bg);padding:2px 6px;border-radius:2px}
[data-tone="dark"] .ix .lb{background:var(--ink)}
.ix[aria-current="true"] .bar{width:30px;opacity:1;background:var(--brand)}
[data-tone="dark"] .ix{color:#fff}

/* ---------- bottom controls ---------- */
.ctl{position:fixed;bottom:clamp(12px,2vh,22px);z-index:55;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:17px;border:1px solid var(--rule);background:rgba(244,242,238,.86);color:var(--ink);font-size:13px;font-weight:650;text-decoration:none;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ctl:hover{border-color:var(--ink)}
.ctl.alt{left:var(--gx)}
.ctl.mo{right:var(--gx)}
.ctl .i{display:inline-block;width:10px;height:10px;position:relative}
.ctl .i::before,.ctl .i::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:currentColor;border-radius:1px}
.ctl .i::before{left:1px}.ctl .i::after{right:1px}
.is-paused .ctl.mo .i::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;border-radius:0}
.is-paused .ctl.mo .i::after{display:none}
[data-tone="dark"] .ctl{background:rgba(18,17,19,.7);border-color:rgba(255,255,255,.22);color:#fff}
[data-tone="dark"] .ctl:hover{border-color:#fff}

/* ---------- small screens ---------- */
@media (max-width:1023px){
  .hd nav:not(.crumb){display:none}
  .hd .cta{margin-left:auto}
}
@media (max-width:767px){
  :root{--hd:58px}
  .hd .logo{width:110px;height:20px}
  .hd .logo img{height:20px}
  .copy{left:20px;right:20px;width:auto;bottom:calc(64px + env(safe-area-inset-bottom))}
  .h1{font-size:clamp(38px,11.4vw,56px)}
  .h2{font-size:clamp(28px,8vw,40px)}
  .lead{font-size:15px;margin-top:14px}
  .acts{margin-top:18px}
  .stats{gap:12px 22px;margin-top:18px}
  .stats .n{font-size:28px}
  .stats .t{font-size:13px;margin-top:6px}
  .basis{margin-top:10px;font-size:11px}
  .idx{display:none}
  .ctl{height:30px;font-size:12px;padding:0 11px}
  /* short phones: the engine marks scenes whose pictures would run into the copy (see freeBoxes in v3.js) */
  .js .scene.is-tight .copy .lead,.js .scene.is-tight .copy .basis{display:none}
  .js .scene.is-tighter .copy .meta,.js .scene.is-tighter .copy .acts .btn.o,.js .scene.is-tighter .copy .label{display:none}
}

/* narrow phones (iPhone SE · 320–380px): logo, crumb and the inquiry button must share one line */
@media (max-width:380px){
  .hd{gap:10px;padding:0 14px}
  .hd .logo{width:92px;height:17px}
  .hd .logo img{height:17px}
  .crumb{margin-left:0}
  .hd nav.crumb{margin-left:0}
  .crumb .up{height:28px;padding:0 9px 0 7px;font-size:13px}
  .hd .btn.sm{height:34px;padding:0 11px;font-size:12.5px}
}

/* ---------- reduced motion ---------- */
/* transitions are switched off outright: a 1ms duration on every property would delay layout reads */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- hierarchy: a detail page is a sheet laid over the home ----------
   body.detail[data-page] · .homelayer (a still of the home scene it belongs to, receded and dimmed)
   · .peek (the strip of home left visible above the sheet — click to go back) · .crumb (메인 / page).
   Page to page, the browser morphs the home into the receding layer and slides the sheet up (and back). */
.detail{--peek:clamp(18px,3.6vh,38px);--sheet-r:18px}
.js .detail{background:var(--ink)}
.js .detail .stage{top:var(--peek);border-radius:var(--sheet-r) var(--sheet-r) 0 0;background:var(--bg);transition:transform .45s var(--ease)}
.detail .hd{top:var(--peek);transition:transform .45s var(--ease),color .4s var(--ease)}
.detail .skip{top:calc(var(--peek) + 12px)}
.homelayer{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink);pointer-events:none}
.homelayer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 0;transform:translateY(calc(var(--peek) * .16)) scale(.955);border-radius:14px;opacity:.46;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.no-js .homelayer,.no-js .peek{display:none}
.peek{position:fixed;left:0;right:0;top:0;height:var(--peek);z-index:71;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;text-decoration:none;font-size:12px;font-weight:650;letter-spacing:-.005em}
.peek .t{opacity:0;transform:translateY(-3px);transition:opacity .3s,transform .3s var(--ease)}
.peek:hover .t,.peek:focus-visible .t{opacity:.92;transform:none}
.peek:focus-visible{outline-offset:-4px}
.detail:has(.peek:hover) .stage,.detail:has(.peek:focus-visible) .stage,
.detail:has(.peek:hover) .hd,.detail:has(.peek:focus-visible) .hd{transform:translateY(10px)}
.detail:has(.peek:hover) .homelayer img,.detail:has(.peek:focus-visible) .homelayer img{opacity:.62;transform:translateY(calc(var(--peek) * .1)) scale(.965)}
.crumb{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;margin-left:6px;white-space:nowrap}
.hd nav.crumb{margin-left:6px;gap:8px}   /* `.hd nav` (margin-left:auto · gap 26px) would otherwise float the crumb mid-header */
.hd nav.crumb a{font-size:14px}
.crumb .up{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border:1px solid currentColor;border-radius:15px;text-decoration:none;opacity:.8}
.crumb .up:hover{opacity:1;color:var(--brand)}
.crumb .sep{opacity:.35}
.hd .cta{gap:0}   /* 「프로젝트」 and 「문의」 are two pieces (the narrowest phones drop the first): no icon gap between them */
/* the sheet's close — back to the home, at the scene the reader was on (v3.js · legal.js keep the way back) */
.hd .close{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;margin-left:-14px;border:1px solid currentColor;border-radius:50%;color:inherit;text-decoration:none;opacity:.8;transition:opacity .25s,background-color .25s,color .25s,border-color .25s}
.hd .close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hd .close:hover{opacity:1;background:var(--ink);border-color:var(--ink);color:var(--bg)}
.hd .close:focus-visible{opacity:1;outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:767px){
  /* a detail page's header holds logo, ← 메인, the inquiry button and × on one line */
  .detail .hd{gap:10px;padding:0 14px}
  .detail .hd .logo{width:92px;height:17px}
  .detail .hd .logo img{height:17px}
  .detail .crumb .up{height:28px;padding:0 9px 0 7px;font-size:13px}
  .detail .hd .btn.sm{height:34px;padding:0 11px;font-size:12.5px}
  .hd .close{width:34px;height:34px;margin-left:0}
  .hd .close svg{width:14px;height:14px}
}
@media (max-width:380px){ .detail .hd .cta .cta-l{display:none} }
.hd .cta{gap:0}   /* the label is 「프로젝트&nbsp;」+「문의」: no extra gap between them */
.crumb [aria-current]{opacity:.9}
@media (max-width:1023px){.crumb [aria-current],.crumb .sep{display:none}}

@view-transition{navigation:auto}
.js body:not(.detail) .stage{view-transition-name:v3-home}
.js .detail .homelayer{view-transition-name:v3-home}
.js .detail[data-page="marketing"] .stage{view-transition-name:v3-sheet-marketing}
.js .detail[data-page="sales"] .stage{view-transition-name:v3-sheet-sales}
.js .detail[data-page="md"] .stage{view-transition-name:v3-sheet-md}
.js .detail[data-page="upro"] .stage{view-transition-name:v3-sheet-upro}
.js .detail[data-page="contact"] .stage{view-transition-name:v3-sheet-contact}
.js .detail[data-page="privacy"] .sheet,.js .detail[data-page="terms"] .sheet{view-transition-name:v3-sheet-legal}
.js .detail .hd{view-transition-name:v3-sheet-hd}
.idx{view-transition-name:v3-index}
.ctl.alt{view-transition-name:v3-alt}
.ctl.mo{view-transition-name:v3-motion}
@keyframes v3-sheet-in{from{transform:translateY(100vh)}}
@keyframes v3-sheet-out{to{transform:translateY(100vh)}}
::view-transition-group(v3-home){animation-duration:.75s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-new(v3-sheet-marketing),::view-transition-new(v3-sheet-sales),::view-transition-new(v3-sheet-md),::view-transition-new(v3-sheet-upro),::view-transition-new(v3-sheet-contact),::view-transition-new(v3-sheet-legal),::view-transition-new(v3-sheet-hd){animation:v3-sheet-in .78s cubic-bezier(.16,1,.3,1) both}
::view-transition-old(v3-sheet-marketing),::view-transition-old(v3-sheet-sales),::view-transition-old(v3-sheet-md),::view-transition-old(v3-sheet-upro),::view-transition-old(v3-sheet-contact),::view-transition-old(v3-sheet-legal),::view-transition-old(v3-sheet-hd){animation:v3-sheet-out .62s cubic-bezier(.7,0,.84,0) both}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .js .detail .stage,.detail .hd,.homelayer img{transition:none}
}

/* ---------- v4 · languages: KO · EN · 中文 (header from 768px, footer always) ---------- */
.hd nav.lang{margin-left:0;gap:2px;font-size:13px;flex:none}
.hd nav.lang a{font-size:13px;font-weight:650;letter-spacing:.02em;padding:4px 6px;border-radius:2px;opacity:.55}
.hd nav.lang a[aria-current="true"]{opacity:1;text-decoration:none;box-shadow:inset 0 -2px 0 var(--brand)}
.ft-lang{display:flex;gap:12px}
.ft-lang a{text-decoration:none}
.ft-lang a[aria-current="true"]{color:inherit;font-weight:750;text-decoration:underline 2px var(--brand);text-underline-offset:4px}
@media (max-width:1023px){
  .hd nav.lang{display:flex;margin-left:auto}
  .hd nav.lang ~ .cta{margin-left:0}
}
@media (max-width:767px){
  .hd nav.lang{display:none}
  .hd nav.lang ~ .cta{margin-left:auto}
}
/* Chinese: Han characters from a Chinese font (Pretendard's own Hanja are Korean shapes); Latin and digits stay Pretendard.
   keep-all would never break a line of Han characters, so Chinese breaks normally. */
:root:lang(zh-Hans){--sans:"UP Latin","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif}
:lang(zh-Hans) body{word-break:normal;line-break:strict}
:lang(zh-Hans) *{word-break:normal}
:lang(en) body{word-break:normal;hyphens:manual}