/* Cosmos Kart — pit-lane technical sheet.
   Concrete-grey pages that match the studio renders, graphite for the two "workshop" sections,
   frame-paint red as the only accent, hazard yellow only on the safety section. */
:root{
  --concrete:#e6e7ea;
  --concrete-2:#d9dbdf;
  --ink:#16181c;
  --ink-2:#4a4f58;
  --graphite:#1c1f25;
  --graphite-2:#262a32;
  --kart:#e2432a;
  --hazard:#f3c236;
  --on-dark:#eceef2;
  --on-dark-2:#9aa1ad;
  --rule:rgba(22,24,28,.14);
  --rule-dark:rgba(255,255,255,.12);
  --f-kr-display:"Black Han Sans","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-num:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --maxw:1240px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--concrete);color:var(--ink);font:400 16px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--kart);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}

/* nav */
.nav{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 14px;transition:background .3s,color .3s}
.nav.solid{background:rgba(230,231,234,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--rule)}
.nav.dark{color:var(--on-dark)}
.nav.dark.solid{background:rgba(28,31,37,.86);box-shadow:0 1px 0 var(--rule-dark)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:22px;height:22px;border-radius:6px;background:var(--kart);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.brand-name{font:italic 900 19px/1 var(--f-num);font-stretch:72%;letter-spacing:.01em;text-transform:uppercase}
.nav nav{display:flex;gap:clamp(12px,2.4vw,28px)}
.nav nav a{text-decoration:none;font-size:14px;font-weight:500;opacity:.72}
.nav nav a:hover{opacity:1}

/* hero */
.hero{height:420vh;position:relative;background:#cdced2}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#spin,.hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-fallback{z-index:0}
#spin{z-index:1}
.hero-copy{position:absolute;z-index:2;left:var(--gutter);bottom:clamp(28px,6vh,64px)}
.hero-kicker{font-size:clamp(14px,1.3vw,17px);font-weight:500;color:var(--ink-2);margin-bottom:10px}
.hero-title{font-family:var(--f-kr-display);font-size:clamp(76px,14.5vw,232px);line-height:.86;letter-spacing:-.02em;color:var(--ink)}
.hero-steps{position:absolute;z-index:2;right:var(--gutter);bottom:clamp(36px,8vh,84px);width:min(360px,40vw);margin:0;padding:18px 20px;list-style:none;display:grid;gap:14px;
  background:rgba(236,237,240,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:10px}
.hero-steps li{font-size:clamp(15px,1.25vw,18px);line-height:1.55;font-weight:500;color:var(--ink);opacity:.3;padding-left:16px;border-left:2px solid transparent;transition:opacity .4s,border-color .4s}
.hero-steps li.on{opacity:1;border-left-color:var(--kart)}
.hero-dial{position:absolute;z-index:2;right:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 76px);display:flex;align-items:center;gap:10px;
  font:600 13px/1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.hero-dial span{width:34px;text-align:right}
.hero-dial i{display:block;width:80px;height:2px;background:linear-gradient(90deg,var(--kart) var(--p,0%),rgba(22,24,28,.15) var(--p,0%))}
.hero-hint{position:absolute;z-index:2;left:50%;top:calc(env(safe-area-inset-top,0px) + 78px);transform:translateX(-50%);font-size:13px;color:var(--ink-2);transition:opacity .4s}

/* shared section bits */
section{position:relative;scroll-margin-top:64px}
.h2{font-family:var(--f-kr-display);font-size:clamp(40px,6.2vw,88px);line-height:1.02;letter-spacing:-.01em}
.sec-head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 56px;align-items:end}
.sec-head p{color:var(--ink-2);max-width:44ch;font-size:16.5px}
.sec-head.light p{color:var(--on-dark-2)}

/* why */
.why{max-width:var(--maxw);margin:0 auto;padding:clamp(88px,14vh,160px) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.why-text{display:grid;gap:18px}
.why-text .h2{margin-bottom:8px}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.65;font-weight:500}
.why-text p:not(.lead){color:var(--ink-2);max-width:46ch}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0 0;border-top:1px solid var(--rule)}
.facts div{padding:14px 0 0}
.facts dt{font-size:13px;color:var(--ink-2)}
.facts dd{margin:2px 0 0;font:800 clamp(30px,3.4vw,44px)/1 var(--f-num);font-stretch:78%;font-variant-numeric:tabular-nums}
.facts small{font-size:.45em;font-weight:700;margin-left:2px;color:var(--ink-2)}
.why-img img{border-radius:6px}
.why-img figcaption{font-size:13.5px;color:var(--ink-2);margin-top:10px}

/* plan */
.plan{padding:0 0 clamp(96px,14vh,160px)}
.stages{max-width:var(--maxw);margin:48px auto 0;padding:0 var(--gutter);list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:none}
.stages > li{position:relative;padding:22px 20px 26px 0;border-top:2px solid var(--ink)}
.stages > li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--concrete);border:2px solid var(--ink)}
.stages > li:last-child::before{background:var(--kart);border-color:var(--kart)}
.st-n{display:block;font:italic 900 64px/1 var(--f-num);font-stretch:66%;color:var(--kart);margin:8px 0 10px}
.stages h3{font-size:18px;font-weight:700;line-height:1.4;margin-bottom:10px}
.stages ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.stages ul li{font-size:14.5px;color:var(--ink-2);line-height:1.55;padding-left:12px;position:relative}
.stages ul li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1.5px;background:var(--ink-2)}

/* parts */
.parts{background:var(--graphite);color:var(--on-dark);padding:clamp(88px,14vh,150px) 0}
.parts-grid{max-width:var(--maxw);margin:44px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:stretch}
.viewer{position:relative;border-radius:10px;overflow:hidden;min-height:420px;aspect-ratio:4/3;max-width:100%;
  background:radial-gradient(90% 80% at 50% 45%, #3a3f49, #1a1d22 75%)}
#kart3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
#kart3d:active{cursor:grabbing}
.viewer-state{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--on-dark-2);font-size:14px}
.viewer-reset{position:absolute;right:14px;bottom:14px;appearance:none;border:1px solid var(--rule-dark);background:rgba(0,0,0,.35);color:var(--on-dark);
  font:500 13px/1 var(--f-body);padding:10px 14px;border-radius:999px;cursor:pointer}
.viewer-reset:hover{background:rgba(0,0,0,.6)}
.part-list{display:flex;flex-direction:column;border-top:1px solid var(--rule-dark)}
.part-btn{appearance:none;border:0;border-bottom:1px solid var(--rule-dark);background:none;color:var(--on-dark-2);text-align:left;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 4px;font:500 17px/1.3 var(--f-body);transition:color .2s,padding .25s}
.part-btn .pn{font:italic 800 15px/1 var(--f-num);font-stretch:70%;color:rgba(255,255,255,.3);width:18px}
.part-btn .pv{font:700 13px/1 var(--f-num);font-stretch:85%;color:rgba(255,255,255,.35);font-variant-numeric:tabular-nums}
.part-btn:hover{color:var(--on-dark)}
.part-btn[aria-selected="true"]{color:#fff;padding-left:12px;background:linear-gradient(90deg,rgba(226,67,42,.18),transparent 70%)}
.part-btn[aria-selected="true"] .pn{color:var(--kart)}
.part-btn[aria-selected="true"] .pv{color:#fff}
.part-detail{max-width:var(--maxw);margin:28px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:28px}
.part-detail > div{border-top:1px solid var(--rule-dark);padding-top:14px;min-width:0}
.pd-k{font-size:13px;color:var(--on-dark-2);margin-bottom:6px}
.pd-big{font:800 clamp(34px,3.6vw,48px)/1 var(--f-num);font-stretch:76%;color:var(--kart);font-variant-numeric:tabular-nums}
.pd-sub{font-size:14px;color:var(--on-dark-2);margin-top:6px}
.part-detail ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.part-detail li{font-size:15.5px;line-height:1.55}
.part-detail .pd-eff{font-size:15.5px;line-height:1.6}

/* choice */
.choice{padding:clamp(96px,14vh,160px) 0}
.choice-grid{max-width:var(--maxw);margin:48px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.choice figure,.wide-shot{margin:0}
.choice img{border-radius:6px}
.choice figcaption{margin-top:18px;display:grid;gap:8px}
.choice h3{font-size:21px;font-weight:700}
.choice figcaption p{color:var(--ink-2);max-width:56ch}
.wide-shot{max-width:var(--maxw);margin:56px auto 0;padding:0 var(--gutter)}
.wide-shot img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 55%;border-radius:6px}
.wide-shot figcaption{margin-top:12px;font-size:14px;color:var(--ink-2)}

/* budget */
.budget{padding:0 0 clamp(96px,14vh,160px)}
.budget-wrap{max-width:var(--maxw);margin:44px auto 0;padding:0 var(--gutter)}
.budget-split{display:flex;height:54px;border-radius:6px;overflow:hidden;gap:3px}
.budget-split div{position:relative;min-width:0;display:flex;align-items:flex-end;padding:0 10px 8px;color:#fff;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden}
.budget-rows{margin-top:28px;display:grid;gap:0}
.b-group{font-size:13px;color:var(--ink-2);padding:22px 0 6px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;font-weight:500}
.b-group b{font:700 14px/1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.b-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) 110px;gap:18px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule)}
.b-name{font-size:15px;font-weight:500;min-width:0}
.b-bar{height:10px;background:var(--concrete-2);border-radius:5px;overflow:hidden}
.b-bar i{display:block;height:100%;border-radius:5px;background:var(--ink);transform-origin:left;transform:scaleX(var(--w));transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.b-row.big .b-bar i{background:var(--kart)}
.budget-wrap:not(.shown) .b-bar i{transform:scaleX(0)}
.b-val{text-align:right;font:700 17px/1 var(--f-num);font-stretch:85%;font-variant-numeric:tabular-nums}
.b-total{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0 0;gap:12px}
.b-total span{font-size:15px;font-weight:700}
.b-total b{font:900 clamp(34px,4vw,52px)/1 var(--f-num);font-stretch:74%;color:var(--kart);font-variant-numeric:tabular-nums}

/* safety */
.safety{background:var(--graphite);color:var(--on-dark);padding:0 0 clamp(96px,14vh,150px)}
.hazard{height:18px;margin-bottom:clamp(72px,11vh,120px);background:repeating-linear-gradient(-45deg,var(--hazard) 0 22px,var(--graphite) 22px 44px)}
.safety-grid{max-width:var(--maxw);margin:48px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.s-block{background:var(--graphite-2);border-radius:10px;padding:26px 26px 28px;min-width:0}
.s-block h3{font-size:20px;font-weight:700;margin-bottom:16px;line-height:1.4}
.s-note{font-size:14px;color:var(--on-dark-2);margin:-8px 0 14px}
.checks{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.checks li{font-size:15px;line-height:1.65;color:var(--on-dark-2);padding-left:28px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:4px;border:2px solid var(--hazard)}
.checks li::after{content:"";position:absolute;left:5px;top:calc(.35em + 3px);width:5px;height:8px;border:solid var(--hazard);border-width:0 2px 2px 0;transform:rotate(40deg)}
.checks b{display:block;color:var(--on-dark);font-weight:700}
.ppe{width:100%;border-collapse:collapse;font-size:14.5px}
.ppe th{text-align:left;font-weight:500;color:var(--on-dark-2);font-size:12.5px;padding:0 8px 8px 0;border-bottom:1px solid var(--rule-dark)}
.ppe td{padding:10px 8px 10px 0;border-bottom:1px solid var(--rule-dark);vertical-align:top;line-height:1.5}
.ppe td:first-child{color:var(--hazard);font-weight:700;white-space:nowrap}
.ppe td:last-child{color:var(--on-dark-2)}
.course-map{width:100%;height:auto;margin-bottom:14px}
.course-map .field{fill:#2e4a33;stroke:rgba(255,255,255,.18)}
.course-map .lane{fill:none;stroke:rgba(255,255,255,.35);stroke-width:18}
.course-map .cone{fill:#ff7a2e}
.course-map .scale{stroke:var(--on-dark);stroke-width:2}
.course-map .scale-t{fill:var(--on-dark);font:500 12px var(--f-body)}
.course-map .arrow{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.course p{font-size:15px;color:var(--on-dark-2);line-height:1.65}

/* footer */
.foot{background:var(--ink);color:var(--on-dark-2);padding:72px var(--gutter) calc(env(safe-area-inset-bottom,0px) + 48px)}
.foot-big{font-family:var(--f-kr-display);font-size:clamp(56px,11vw,160px);line-height:.9;color:var(--on-dark);margin-bottom:24px}
.foot p:not(.foot-big){max-width:62ch;font-size:13.5px}

/* responsive */
@media (max-width:900px){
  .sec-head{grid-template-columns:1fr}
  .why{grid-template-columns:1fr;gap:36px}
  .stages{grid-template-columns:1fr 1fr;row-gap:12px}
  .parts-grid{grid-template-columns:1fr}
  .viewer{min-height:0}
  .part-list{flex-direction:row;overflow-x:auto;border-top:0;gap:8px;padding-bottom:4px;scrollbar-width:none}
  .part-list::-webkit-scrollbar{display:none}
  .part-btn{flex:none;border:1px solid var(--rule-dark);border-radius:999px;padding:10px 14px;grid-template-columns:auto auto;font-size:15px}
  .part-btn .pv{display:none}
  .part-btn[aria-selected="true"]{padding-left:14px;background:var(--kart);border-color:var(--kart)}
  .part-btn[aria-selected="true"] .pn{color:#fff}
  .part-detail{grid-template-columns:1fr;gap:18px}
  .choice-grid,.safety-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav nav{display:none}
  .hero-steps{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 236px);padding:12px 14px}
  .hero-copy{bottom:calc(env(safe-area-inset-bottom,0px) + 28px)}
  .hero-title{font-size:clamp(72px,24vw,120px)}
  .hero-dial{top:calc(env(safe-area-inset-top,0px) + 64px)}
  .hero-steps li:not(.on){display:none}
  .hero-hint{display:none}
  .facts{grid-template-columns:1fr 1fr;row-gap:10px}
  .stages{grid-template-columns:1fr}
  .stages > li{padding-right:0}
  .b-row{grid-template-columns:minmax(0,1fr) 92px;row-gap:8px}
  .b-bar{grid-column:1 / -1;grid-row:2}
  .budget-split div span{display:none}
  .s-block{padding:20px 18px 22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .b-bar i,.hero-steps li{transition:none}
}