@charset "UTF-8";
/* Design themes (Apple, Meta, Stripe, Pinterest, MMU) and the bundled Korean fonts. */
@font-face{font-family:"Pretendard MMU";src:url("./fonts/pretendard-var.woff2") format("woff2-variations"),url("./fonts/pretendard-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Gowun Dodum MMU";src:url("./fonts/gowun-dodum-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex KR MMU";src:url("./fonts/plex-kr-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex KR MMU";src:url("./fonts/plex-kr-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex KR MMU";src:url("./fonts/plex-kr-600.woff2") format("woff2");font-weight:600 700;font-display:swap}

:root,html[data-theme=mmu]{
  --chart-grid:#dae5df;--corridor:#cadfd8;--track-line:#318e99;
  --font:"Pretendard MMU",Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;--font-display:var(--font);
  --head-weight:800;--head-track:-.03em;--strong-weight:700;
  --cta:#0d2a33;--cta-ink:#fff;--nav-active:#0d2a33;--r-card:16px;--r-btn:12px;
}
html[data-theme=apple]{
  --bg:#f5f5f7;--paper:#fff;--ink:#1d1d1f;--muted:#6e6e73;--line:#e0e0e0;--green:#0066cc;--mint:#e8f1fb;--navy:#1d1d1f;--chart:#eef1f6;--track:#0066cc;
  --chart-grid:#d8dee8;--corridor:#cfe0f5;--track-line:#0066cc;--cta:#0066cc;--nav-active:#1d1d1f;--r-card:18px;--r-btn:999px;--shadow:0 1px 2px #0000000d,0 8px 28px -12px #00000026;
  --head-weight:700;--head-track:-.035em;
}
html[data-theme=meta]{
  --bg:#f1f4f7;--paper:#fff;--ink:#1c2b33;--muted:#5d6c7b;--line:#dee3e9;--green:#0064e0;--mint:#e5f0fd;--navy:#1c2b33;--chart:#e8eff7;--track:#0064e0;
  --chart-grid:#d3deeb;--corridor:#c9defa;--track-line:#0064e0;--cta:#0064e0;--nav-active:#1c2b33;--r-card:28px;--r-btn:999px;--shadow:0 2px 4px #0a13160d,0 14px 32px -16px #0a131633;
  --head-weight:800;--head-track:-.025em;
}
html[data-theme=stripe]{
  --font:"IBM Plex KR MMU","Pretendard MMU",system-ui,sans-serif;--font-display:var(--font);
  --bg:#f6f9fc;--paper:#fff;--ink:#0d253d;--muted:#64748d;--line:#e3e8ee;--green:#533afd;--mint:#efedff;--navy:#1c1e54;--chart:#eef1fb;--track:#533afd;
  --chart-grid:#d9ddf0;--corridor:#dcd7ff;--track-line:#533afd;--cta:#533afd;--nav-active:#1c1e54;--r-card:12px;--r-btn:999px;--shadow:0 15px 35px -12px #32325d26,0 5px 15px -5px #00000014;
  --head-weight:300;--head-track:-.04em;--strong-weight:600;
}
html[data-theme=pinterest]{
  --font:"Gowun Dodum MMU","Pretendard MMU",system-ui,sans-serif;--font-display:"Pretendard MMU",var(--font);
  --bg:#f6f6f3;--paper:#fff;--ink:#211922;--muted:#62625b;--line:#dadad3;--green:#e60023;--mint:#fde8eb;--navy:#211922;--chart:#ecece6;--track:#e60023;
  --chart-grid:#d8d8d0;--corridor:#f7ccd2;--track-line:#e60023;--cta:#e60023;--nav-active:#211922;--r-card:16px;--r-btn:16px;--shadow:0 1px 2px #2119220d,0 8px 24px -12px #21192233;
  --head-weight:700;--head-track:-.03em;
}

html,body,button,input,select,textarea{font-family:var(--font)}
h1,h2,h3,h4,.hm-door-title,.brand,.page-heading h1,.lesson-intro h1{font-family:var(--font-display);font-weight:var(--head-weight);letter-spacing:var(--head-track)}
b,strong{font-weight:var(--strong-weight)}
html[data-theme=pinterest] b,html[data-theme=pinterest] strong{font-family:var(--font-display)}

/* Korean line breaking: keep words together, balance headings, avoid orphans */
body{word-break:keep-all;line-break:strict;overflow-wrap:break-word}
h1,h2,h3,.hm-door-title{text-wrap:balance}
p,li,.hm-lede,.hm-door-text,figcaption{text-wrap:pretty}
.hm h1{line-height:1.2}
input,select,textarea,code,.bc-log time{word-break:normal}

/* shared shape language */
.panel,.hm-door,.hm-chart,.mission-card,.telemetry,.route-map-panel,.bridge-lessons article{border-radius:var(--r-card)}
.world-frame{border-radius:calc(var(--r-card) + 4px)}
body{background:var(--bg);color:var(--ink)}
.primary,.hm-start{background:var(--cta);border-color:var(--cta);color:var(--cta-ink);border-radius:var(--r-btn)}
.primary:hover,.hm-start:hover{filter:brightness(1.1);background:var(--cta)}
.nav-button.active{background:var(--nav-active)}
.nav-button:hover{background:var(--mint);color:var(--green)}
.brand b{color:var(--green)}
.hm h1,.hm-new h2,.hm-door-title,.hm-facts dd{color:var(--ink)}
.hm-link{color:var(--green)}
.hm-door-main{background:var(--navy);border-color:var(--navy)}
.hm-door-main .hm-door-title{color:#fff}
.hm-track,.hm-chart .hm-track{stroke:var(--track)}
.hm-chart svg>rect:first-of-type{fill:var(--chart)}
.hm-chart{background:var(--chart)}
.hm-replay{color:var(--green)}
.hm-scenes li::before{color:var(--green)}
.hm-note,.hm-facts dt{color:var(--muted)}

/* header: theme button */
.theme-toggle{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);transition:background-color .15s,border-color .15s}
.theme-toggle:hover{background:var(--mint);border-color:var(--green)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.header-tools{display:flex;align-items:center;gap:10px}

/* Stripe: gradient mesh behind the hero */
.hm-hero{position:relative;isolation:isolate}
html[data-theme=stripe] .hm-hero::before{content:"";position:absolute;z-index:-1;inset:-46px -40px auto -40px;height:440px;opacity:.85;
  background:radial-gradient(60% 90% at 12% 10%,#f5e9d4 0,transparent 60%),radial-gradient(45% 80% at 38% 0,#ffb48a 0,transparent 62%),radial-gradient(50% 90% at 66% 8%,#c9bfff 0,transparent 62%),radial-gradient(40% 80% at 92% 12%,#9a84ff 0,transparent 60%),radial-gradient(35% 70% at 82% 0,#ff6bb0 0,transparent 62%);
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
html[data-theme=stripe] .hm h1{font-weight:300}
html[data-theme=apple] .hm-door:not(.hm-door-main){background:var(--paper)}
html[data-theme=pinterest] .hm-door{border-width:0;box-shadow:var(--shadow)}
html[data-theme=meta] .hm-door-main{border-radius:32px}
@media(prefers-reduced-motion:no-preference){html{transition:background-color .25s}}

/* page headings: no accent-colored single word */
.page-heading h1 span,.lesson-intro h1 span{color:inherit}

/* track training */
#page-route .rt-heading{align-items:flex-end;padding:30px 32px;margin-bottom:22px;border-radius:calc(var(--r-card) + 4px);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}
#page-route .rt-heading::after{content:"";position:absolute;right:-30px;top:-40px;width:340px;height:240px;opacity:.9;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 31px,var(--chart-grid) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,var(--chart-grid) 31px 32px);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
#page-route .rt-heading>*{position:relative;z-index:1}
#page-route .page-heading h1{font-size:clamp(26px,3.2vw,38px);line-height:1.25;margin:0 0 8px}
#page-route .page-heading p{font-size:15px;color:var(--muted);max-width:34em}
.route-map-panel{padding:20px}
.route-toolbar{align-items:center}
.route-toolbar .primary{min-height:40px;padding:0 18px}
.route-toolbar .secondary{margin-top:0;min-height:40px;padding:0 16px;border-radius:var(--r-btn)}
#route-chart{display:block;width:100%;height:auto;border-radius:calc(var(--r-card) - 4px);box-shadow:inset 0 0 0 1px var(--line)}
.chart-legend{gap:8px;margin-top:14px;color:var(--muted)}
.chart-legend span{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--bg);font-size:12.5px}
.chart-legend i{display:inline-block;width:18px;height:4px;border-radius:2px}
.lg-wop{background:#d8962b}.lg-plan{background:var(--track-line)}.lg-actual{background:#2a6e4b}
.route-settings{padding:24px;display:flex;flex-direction:column;gap:2px}
.route-settings h2{margin:0 0 14px;font-size:22px;color:var(--ink)}
.route-inputs label,.turn-select{font-size:12.5px;font-weight:600;color:var(--muted)}
.route-inputs input,.turn-select select{padding:10px 12px;border:1px solid var(--line);border-radius:calc(var(--r-btn) > 14px ? 12px : var(--r-btn));background:var(--bg);color:var(--ink);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;transition:border-color .15s,background-color .15s}
.route-inputs input:focus,.turn-select select:focus{border-color:var(--green);background:var(--paper);outline:none;box-shadow:0 0 0 3px var(--mint)}
.turn-select{display:block;margin-top:16px}
.calculation-grid{margin-top:16px;padding:14px;border-radius:12px;background:var(--bg);gap:14px 10px}
.calculation-grid>div{min-width:0}
.calculation-grid strong{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.calculation-grid small{color:var(--muted)}
.route-actions{margin-top:18px}
.route-actions .primary{min-height:46px;font-size:14px}
.route-actions .secondary{margin-top:0;min-height:42px;font-size:13px;border-radius:var(--r-btn)}
.route-live{border-radius:var(--r-card);text-align:center;color:var(--muted);font-size:14px;padding:22px}
.route-live strong{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.rt-lessons-title{margin:34px 0 14px;font-size:22px;color:var(--ink)}
.bridge-lessons{counter-reset:none;position:relative;gap:16px}
.bridge-lessons article{position:relative;padding:22px 22px 24px}
.bridge-lessons h3{margin:14px 0 8px;font-size:17px;line-height:1.35;color:var(--ink)}
.bridge-lessons p{margin:0;font-size:14px;line-height:1.75;color:var(--muted)}
.bridge-lessons b{color:var(--ink)}
.rt-step{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cta);color:#fff;font-weight:800;font-size:15px}
.bridge-lessons article:not(:last-child)::after{content:"";position:absolute;top:39px;left:calc(22px + 34px + 6px);right:-16px;height:2px;background:linear-gradient(90deg,var(--line),var(--line));z-index:0}
@media(max-width:960px){.bridge-lessons article::after{display:none}#page-route .rt-heading{padding:22px 20px}}
.sources{border-radius:var(--r-card)}