/*
  RealKose styles
  Order: tokens, base, language switch, helpers, page layout, header, buttons, text,
         chips, cards, thumbnails and art, footer, breakpoints, motion.
  Page skeleton: .pf > header.top (nav.wrap.bar) + main (section.wrap.*) + footer.foot (div.wrap.foot-in).
  Put a repeated look in a class here. Keep inline style="" only for one-off thumbnail art.
  Never set letter-spacing or line-height inline on a .d element (the Korean override in .lang-ko .d needs to win).
*/

/* ---- Tokens (see CLAUDE.md, DESIGN.md) ---- */
:root{
  --canvas:#0B0B0A;            /* page background */
  --surface-1:#161615;         /* cards, secondary pills */
  --surface-2:#222221;         /* chips, icon circles */
  --surface-3:#1C1C1B;         /* cards drawn inside thumbnails */
  --hairline:#2A2A29;          /* borders inside cards */
  --hairline-soft:#1E1E1D;     /* section and footer dividers */
  --ink:#FFFFFF;               /* text */
  --ink-muted:#999999;         /* secondary text */
  --accent:#0099FF;            /* links, focus, selection only */
  --accent-hover:#4DB8FF;
  --thumb:#0E0E0D;             /* thumbnail background */
  --outline:#3A3A39;           /* outline chip border, dim bars */
  --dim:#262625;               /* faint bars inside thumbnails */
  --gutter:clamp(16px, 3vw, 30px);
  --grad-violet:radial-gradient(120% 80% at 50% 0%, #8B5CF6 0%, #6D28D9 28%, #3B1280 56%, #150A26 86%);
  --grad-orange:radial-gradient(110% 90% at 85% 0%, #FFB36B 0%, #FF6B1A 22%, #B23A06 48%, #3A1406 78%, #140805 100%);
  --grad-magenta:radial-gradient(120% 90% at 20% 0%, #F472B6 0%, #DB2777 24%, #8A1350 52%, #2A0A1C 82%, #12060D 100%);
}

/* ---- Base ---- */
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas)}
a{color:var(--accent);text-decoration:none}
a:where(:hover){color:var(--accent-hover)}  /* :where keeps this weaker than any link class that sets its own color */
h1,h2,h3,h4,p,dl,dd,ul,ol{margin:0}
.pf{min-height:100vh;background:var(--canvas);color:var(--ink);font-family:'Inter', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;font-size:15px;line-height:1.3;letter-spacing:-0.01em;font-feature-settings:'cv01', 'cv05', 'cv09', 'cv11', 'ss03', 'ss07';-webkit-font-smoothing:antialiased}
.pf ::selection{background:rgba(0,153,255,.35)}
.pf a:focus-visible,.pf button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.d{font-family:'Mona Sans','Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;font-feature-settings:'kern'}

/* ---- Language switch: every text exists twice (.en and .ko) ---- */
.lang-en .ko,.lang-ko .en{display:none !important}  /* keep !important: must beat any display a component class sets */
.lang-ko{word-break:keep-all}
.lang-ko .d{letter-spacing:-0.025em;line-height:1.1}
.lang{display:inline-flex;align-items:center;gap:2px;padding:0 2px;background:var(--surface-1);border-radius:100px}
.tg{height:44px;min-width:44px;padding:0 12px;border:solid transparent;border-width:2px 0;border-radius:20px / 22px;background:transparent;background-clip:padding-box;color:var(--ink-muted);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0.02em;cursor:pointer}
.lang-en .tg-en,.lang-ko .tg-ko{background-color:var(--hairline);color:var(--ink)}  /* background-color, not background: keeps the padding-box clip */

/* ---- Helpers: color, fill, flex, spacing (combine freely, each sets one idea) ---- */
.ink{color:var(--ink)}
.muted{color:var(--ink-muted)}
.dark{color:var(--canvas)}
.bg-ink{background:var(--ink)}
.bg-1{background:var(--surface-1)}
.bg-2{background:var(--surface-2)}
.bg-3{background:var(--surface-3)}
.bg-hair{background:var(--hairline)}
.bg-out{background:var(--outline)}
.bg-dim{background:var(--dim)}
.bg-thumb{background:var(--thumb)}
.round{border-radius:9999px}
.flex{display:flex}
.col{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.flow{display:flex;flex-wrap:wrap}
.center{display:flex;align-items:center;justify-content:center}
.between{justify-content:space-between}
.mid{justify-content:center}
.grow{flex:1}
.noshrink{flex:none}
.self-start{align-self:flex-start}
.self-stretch{align-self:stretch}
.items-c{align-items:center}
.w-360{max-width:360px}
.w-420{max-width:420px}
.w-460{max-width:460px}
.w-480{max-width:480px}
.w-720{max-width:720px}
.tc{text-align:center}
.list{padding:0;list-style:none}
.anchor{scroll-margin-top:72px}
.gap-2{gap:2px}
.gap-4{gap:4px}
.gap-5{gap:5px}
.gap-6{gap:6px}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.gap-14{gap:14px}
.gap-16{gap:16px}
.gap-20{gap:20px}
.gap-24{gap:24px}
.gap-30{gap:30px}
.gap-40{gap:40px}

/* ---- Page layout: add .wrap to a section, then one of the section classes ---- */
.wrap{max-width:1280px;margin:0 auto;box-sizing:border-box}
.sec{padding:0 var(--gutter) 96px}
.sec-col{padding:0 var(--gutter) 96px;display:flex;flex-direction:column;gap:40px}
.sec-demo{padding:40px var(--gutter) 96px}
.hero{padding:clamp(72px, 10vw, 140px) var(--gutter) 64px;display:flex;flex-direction:column;gap:40px}
.hero-case{padding:clamp(48px, 7vw, 96px) var(--gutter) 40px;display:flex;flex-direction:column;gap:30px}
.sec-work{padding:64px var(--gutter) 96px;display:flex;flex-direction:column;gap:80px}
.sec-about{padding:96px var(--gutter);display:flex;flex-direction:column;gap:60px}
.head,.cat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.cat-head{gap:12px 30px}
.head-rule{padding-top:40px;border-top:1px solid var(--hairline-soft);gap:30px 40px}
.head-title{flex:1 1 520px;min-width:0}  /* h2 and its note side by side in a .head */
.head-note{flex:1 1 340px;max-width:480px}
.cat{display:flex;flex-direction:column;gap:24px;padding-top:30px;border-top:1px solid var(--hairline-soft)}
.cat-name{display:flex;align-items:baseline;gap:16px}
.cat-desc{max-width:440px;font-size:15px;line-height:1.4}
.g3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px}

/* ---- Header and menu (.navl = muted link that turns white on hover) ---- */
.top{position:sticky;top:0;z-index:20;background:rgba(11,11,10,0.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--hairline-soft)}
.bar{padding:0 var(--gutter);height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-size:18px;font-weight:600;letter-spacing:-0.5px}
.logo{display:inline-flex;align-items:center;gap:10px}
.top .logo{min-height:44px}
.logo-dot{width:28px;height:28px;border-radius:9999px;background:var(--ink);color:var(--canvas);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.navl{color:var(--ink-muted)}
.navl:hover{color:var(--ink)}
.navl.on{color:var(--ink)}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;box-sizing:border-box;font-size:14px;font-weight:500;border-radius:100px}
.icon-btn{width:44px;height:44px;align-items:center;justify-content:center;border:0;border-radius:9999px;background:var(--surface-1);color:var(--ink);cursor:pointer}
.mobpanel{display:flex;flex-direction:column;gap:4px;padding:8px 16px 24px;border-top:1px solid var(--hairline-soft)}
.m-link{color:var(--ink);font-size:32px;font-weight:550;letter-spacing:-1px;padding:10px 0}

/* ---- Buttons, pills, links (.pill and .lift only add motion) ---- */
.pill{transition:transform .15s ease}
.pill:active{transform:scale(.97)}
.lift{transition:transform .3s ease}
.lift:hover{transform:translateY(-4px)}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;box-sizing:border-box;border-radius:100px;font-size:14px;font-weight:500;letter-spacing:-0.14px}
.btn-main{background:var(--ink);color:var(--canvas)}
.btn-sub{background:var(--surface-1);color:var(--ink)}
.panel .btn-sub{background:var(--surface-2)}  /* surface-1 on a surface-1 card would vanish */
.btn-glass{background:rgba(255,255,255,0.16);color:var(--ink)}
.tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;box-sizing:border-box;background:var(--surface-1);border-radius:100px;font-size:14px;font-weight:500}
.tool{padding:10px 15px;border-radius:100px;font-size:14px;font-weight:500;letter-spacing:-0.14px}
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;font-weight:500}

/* ---- Text: .h-* heading tiers go with .d, .stat is big-number text ---- */
.h-hero,.h-case,.h-xl,.h-lg,.h-sec,.h-cta,.stat,.stat-xl,.stat-lg{font-weight:550;letter-spacing:-0.05em}
.h-hero{font-size:clamp(56px, 8vw, 110px);line-height:0.85}
.h-case{font-size:clamp(52px, 8vw, 110px);line-height:0.85}
.h-xl{font-size:clamp(44px, 6vw, 85px);line-height:0.95}
.h-lg{font-size:clamp(36px, 4.4vw, 62px);line-height:1}
.h-sec{font-size:clamp(40px, 4.4vw, 62px);line-height:1}
.h-cta{font-size:clamp(32px, 4.4vw, 62px);line-height:1}
.h-md{font-size:28px;font-weight:550;line-height:1.13;letter-spacing:-0.9px}
.h-sm,.stn{font-size:22px;font-weight:700;letter-spacing:-0.8px}
.h-sm{line-height:1.2}
.stat{font-size:clamp(40px, 3.8vw, 56px);line-height:0.95}
.stat-xl{font-size:clamp(56px, 6vw, 85px);line-height:0.95}
.stat-lg{font-size:64px;line-height:0.95}
.step-no{flex:none;width:40px;font-size:22px;font-weight:550;letter-spacing:-0.8px}
.txt{font-size:15px;line-height:1.4;letter-spacing:-0.15px}
.lead{font-size:18px;line-height:1.4;letter-spacing:-0.18px}
.quote{font-size:20px;line-height:1.3;letter-spacing:-0.2px}
.lede{max-width:720px;font-size:24px;line-height:1.3;letter-spacing:-0.2px}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:-0.13px}
.label{font-size:13px;font-weight:500}
.note{font-size:13px}
.small{font-size:12px}
.tiny{font-size:11px;font-weight:600}
.name{font-size:15px;font-weight:600}
.strong{color:var(--ink);font-weight:500}
.val{font-size:15px;font-weight:500}
.tap{display:inline-flex;align-items:center;min-height:44px}  /* inline link that needs a 44px tap target */

/* ---- Chips and status dots: .chip-state + .dot-on = built, + .dot-mid = in progress, .chip-out = concept ---- */
.chip,.chip-state,.chip-out,.chip-glass,.chip-glass-state,.chip-solid{border-radius:6px;font-size:12px}
.chip,.chip-state,.chip-out,.chip-glass,.chip-glass-state{font-weight:500}
.chip{padding:4px 8px;background:var(--surface-2);color:var(--ink-muted)}
.chip-state{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--surface-2);color:var(--ink)}
.chip-out{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--outline);color:var(--ink-muted)}
.chip-glass{padding:4px 8px;background:rgba(255,255,255,0.16);color:var(--ink)}
.chip-glass-state{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:rgba(255,255,255,0.16);color:var(--ink)}
.chip-solid{padding:4px 8px;background:var(--ink);color:var(--canvas);font-weight:600;letter-spacing:-0.12px}
.chip-s{padding:3px 7px;border-radius:6px;background:var(--surface-2);font-size:11px;font-weight:500}
.ls-12{letter-spacing:-0.12px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.dot,.dot-s,.dot-lg{border-radius:9999px}
.dot{width:6px;height:6px}
.dot-s{width:7px;height:7px}
.dot-lg{width:8px;height:8px}
.dot-on{background:var(--ink)}
.dot-mid{background:var(--ink-muted)}
.dot-glass{background:rgba(255,255,255,0.6)}

/* ---- Cards: .panel is the shell, the rest are layouts that go with it ---- */
.panel{box-sizing:border-box;background:var(--surface-1);border-radius:20px}
.card{min-width:0;display:flex;flex-direction:column;gap:18px;padding:14px}
.card-body{display:flex;flex-direction:column;gap:10px;padding:2px 8px 8px}
.card-links{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:8px}  /* link buttons pinned to the bottom of a .card-body.grow */
.feature{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:20px;padding:16px}
.feature-text{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:14px 12px}
.tile{flex:1 1 300px;min-width:0;min-height:260px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.info{flex:1 1 300px;min-width:0;padding:24px;display:flex;flex-direction:column;gap:16px}
.ico{width:40px;height:40px;border-radius:9999px;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center}
.facts{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:20px 30px}
.fact{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--hairline)}
.kv{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-top:1px solid var(--hairline)}
.gcard{min-width:0;display:flex;flex-direction:column;box-sizing:border-box;border-radius:30px}
.g-violet{background:var(--grad-violet)}
.g-orange{background:var(--grad-orange)}
.g-magenta{background:var(--grad-magenta)}
.gcard-game{min-height:480px;padding:28px;justify-content:space-between;gap:24px}
.gcard-contact{flex:999 1 560px;min-height:480px;padding:30px;justify-content:flex-end;gap:24px}
.gcard-stat{flex:1 1 440px;min-height:520px;padding:30px;justify-content:space-between;gap:30px}
.feat{flex:1 1 480px;min-width:0;padding:24px;display:flex;gap:20px;align-items:flex-start}
.step{flex:1;padding:24px;display:flex;gap:20px}
.step-wrap{flex:1 1 320px;min-width:0}  /* .step that wraps into columns instead of sharing one row */
.steps{flex:1 1 440px;min-width:0}  /* numbered list (ol.col.list) next to a stat card */
.ship{flex:1 1 300px;min-width:0;padding:16px;display:flex;flex-direction:column;gap:20px}
.ship-body{display:flex;flex-direction:column;gap:8px;padding:0 8px 8px}
.cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px}
.cta-half{flex:1 1 380px;min-width:0}  /* two .cta side by side in a .flow */
.cta-arrow{width:56px;height:56px;flex:none;border-radius:9999px;background:var(--ink);color:var(--canvas);display:inline-flex;align-items:center;justify-content:center}

/* ---- Thumbnails and art (drawings inside aria-hidden frames) ---- */
.thumb,.frame{position:relative;overflow:hidden;border-radius:15px}
.thumb{height:240px}
.frame{flex:999 1 560px;min-width:0}
.shot{height:180px;border-radius:15px;background:var(--thumb)}
.pad-20{padding:20px;box-sizing:border-box}
.pad-24{padding:24px}
.svg-fill{position:absolute;inset:0;display:block}
.block{display:block}
.line-no{border-radius:9999px;background:#00843D;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.avatar{width:28px;height:28px;flex:none;border-radius:9999px}
.avatar-s{width:24px;height:24px;flex:none;border-radius:9999px}
.item{padding:10px 12px;border-radius:10px;background:var(--surface-1)}
.item-s{padding:10px;border-radius:10px;background:var(--surface-1)}
.bar-7{height:7px;border-radius:4px}
.bar-5{height:5px;border-radius:3px}
.bar-8{height:8px;border-radius:4px}
.sport{width:72px;font-size:12px;font-weight:600}
.mini-phone{width:60px;height:124px;box-sizing:border-box;border-radius:12px;background:var(--surface-1)}
.legend-chip{padding:6px 10px;border-radius:100px;background:rgba(22,22,21,0.92);font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.phone{width:280px;height:560px;box-sizing:border-box;border:8px solid var(--surface-2);border-radius:44px;background:var(--canvas);overflow:hidden;display:flex;flex-direction:column}
.phone-map{height:200px;flex:none;position:relative;background:var(--thumb)}
.phone-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px}
.phone-card{padding:12px;border-radius:15px;background:var(--surface-1);display:flex;justify-content:space-between;align-items:center}
.phone-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:100px;background:var(--ink);color:var(--canvas);font-size:14px;font-weight:500}
.phone-auto{height:auto}  /* .phone that wraps a screenshot at its own height */

/* Real screenshots: <img class="block"> plus one of the img classes. The base rule has zero
   specificity (:where), so every class here wins over it. Nothing but work pages has an <img>. */
:where(.pf) img{max-width:100%;height:auto}
.img-fluid{width:100%;height:auto}  /* wide screenshot at the width of its box */
.img-fill{width:100%;height:100%;object-fit:cover}  /* fills a .frame, .thumb or .phone */
.img-top{object-position:top}  /* with .img-fill: crop from the bottom, keep the top of a phone screen */
.img-round{border-radius:24px}  /* bare phone screenshot, rounded like the device */
.showcase{padding:16px;box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.10)}  /* .panel that holds the first screenshots of a case study */
.showcase-side{flex:1 1 300px;min-width:0;padding:8px 0}  /* phone next to the wide .frame */
.showcase-stack{flex:1 1 380px;min-width:0}  /* stack of .thumb next to the wide .frame */
.pin{position:absolute;left:12px;top:12px}  /* .legend-chip label in the corner of a .thumb */
.pin-lg{left:16px;top:16px}  /* same on a large .frame */
.art-title{font-weight:600;line-height:1;letter-spacing:-0.04em}
.art-tagline{font-size:17px;font-weight:600;line-height:0.9;letter-spacing:-0.05em}

/* ---- Footer ---- */
.foot{border-top:1px solid var(--hairline-soft)}
.foot-in{padding:64px var(--gutter) 40px;display:flex;flex-direction:column;gap:48px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.foot-brand{display:flex;flex-direction:column;gap:12px;max-width:320px}
.foot-note{font-size:13px;line-height:1.4}
.foot-cols{display:flex;flex-wrap:wrap;gap:64px}
.foot-col{display:flex;flex-direction:column;font-size:13px;font-weight:500}
.foot-col a{display:flex;align-items:center;min-height:44px}  /* links stack with no gap, each is a full 44px row */
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid var(--hairline-soft);color:var(--ink-muted);font-size:12px}

/* ---- Breakpoints (keep after the component rules) ---- */
.mob{display:none}
@media (max-width:1023px){.g3{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width:809px){.desk{display:none}.mob{display:inline-flex}}
@media (max-width:639px){.g3{grid-template-columns:minmax(0, 1fr)}}
@media (min-width:810px){.mobpanel{display:none}}

/* ---- Hidden and reduced motion ---- */
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.pill,.lift{transition:none}.lift:hover{transform:none}}