[hidden]{display:none!important}
body{margin:0}
/* Layout: a marathon course read top to bottom. START in the cobalt cover hero, a slim course bar that counts kilometres as you scroll, blue flags at each 9·6·3 module, FINISH at the bookstore. */
:root{
  --cobalt:#3657a8;        /* cover ground */
  --cobalt-deep:#2a4691;
  --steel:#4b7db6;         /* interior chapter-opener blue */
  --steel-soft:#a9c3e6;
  --sky:#e3eaf6;           /* track lanes */
  --orange:#f0703d;        /* belly-band accent */
  --orange-text:#ad4218;
  --orange-soft:#fde7dc;
  --paper:#f4f6fb;
  --card:#ffffff;
  --ink:#18203f;
  --ink-2:#4a5476;
  --rule:#d6deec;
  --blue-text:#2c4c9c;
  --on-cobalt:#ffffff;
  --on-cobalt-2:#d5def4;
  --on-orange:#18203f;
  --check-a:#ffffff;
  --check-b:#18203f;
  --ok:#23724a; --ok-soft:#e1f2e8;
  --warn:#8f5409; --warn-soft:#fbefd9;
  --bad:#a83322; --bad-soft:#fbe4df;
  --shadow:0 1px 2px rgba(24,32,63,.06), 0 10px 30px rgba(24,32,63,.08);
  --font-num:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --font-serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;
  --font-sans:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --bar-h:48px;
  --wrap:1120px;
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --steel-soft:#3b5d95; --sky:#1a2650;
    --orange-text:#f7996b; --orange-soft:#45261a;
    --paper:#0c1330; --card:#141d40; --ink:#e8edf9; --ink-2:#a9b4d6; --rule:#28345f;
    --blue-text:#a9c1f4;
    --ok:#72d3a2; --ok-soft:#15372a; --warn:#f0b863; --warn-soft:#3b2c13; --bad:#f3927e; --bad-soft:#43201a;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --steel-soft:#3b5d95; --sky:#1a2650;
  --orange-text:#f7996b; --orange-soft:#45261a;
  --paper:#0c1330; --card:#141d40; --ink:#e8edf9; --ink-2:#a9b4d6; --rule:#28345f;
  --blue-text:#a9c1f4;
  --ok:#72d3a2; --ok-soft:#15372a; --warn:#f0b863; --warn-soft:#3b2c13; --bad:#f3927e; --bad-soft:#43201a;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.35);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 16px);overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:17px;line-height:1.75;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%}
a{color:var(--blue-text)}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.3}
p{margin:0}
ul,ol{margin:0;padding:0}
button{font:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(var(--wrap) + 48px);margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-inline:24px}}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.section{padding-block:clamp(72px,9vw,124px)}
.section--card{background:var(--card)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(32px,5vw,52px);max-width:44em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:.05em;color:var(--orange-text)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.h2{font-family:var(--font-serif);font-weight:900;font-size:clamp(28px,2.6vw + 16px,46px);line-height:1.28;letter-spacing:-.02em}
.lead{font-size:clamp(17px,.5vw + 15px,19px);color:var(--ink-2);max-width:40em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:11px 22px;border-radius:999px;font-weight:700;font-size:16px;line-height:1.3;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .15s ease,color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn--orange{background:var(--orange);color:var(--on-orange)}
.btn--ghost{border-color:color-mix(in srgb,var(--on-cobalt) 70%,transparent);color:var(--on-cobalt)}
.btn--ghost:hover{background:color-mix(in srgb,var(--on-cobalt) 12%,transparent)}
.btn--white{background:var(--on-cobalt);color:var(--cobalt-deep)}
.btn--line{border-color:var(--blue-text);color:var(--blue-text);background:transparent}
.btn--line:hover{background:color-mix(in srgb,var(--blue-text) 10%,transparent)}
.btn--sm{min-height:40px;padding:8px 16px;font-size:15px}

/* ---------- course bar ---------- */
.coursebar{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px);background:var(--paper);background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.coursebar__in{height:var(--bar-h);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2.4vw,28px)}
.coursebar__brand{font-family:var(--font-serif);font-weight:900;font-size:15px;color:var(--ink);text-decoration:none;white-space:nowrap}
.coursebar__brand span{color:var(--orange-text)}
.coursebar__track{position:relative;height:100%;margin-inline:14px 18px}
.coursebar__line,.coursebar__fill{position:absolute;left:0;top:31px;height:2px;border-radius:2px}
.coursebar__line{right:0;background:var(--rule)}
.coursebar__fill{width:0;background:var(--cobalt)}
.coursebar__tick{position:absolute;top:31px;transform:translateX(-50%);padding-top:5px;font:600 11px/1 var(--font-num);color:var(--ink-2);white-space:nowrap}
.coursebar__tick::before{content:"";position:absolute;left:50%;top:-3px;width:1px;height:6px;background:currentColor}
.coursebar__tick--wall{color:var(--orange-text)}
.coursebar__finish{position:absolute;right:-14px;top:24px;width:14px;height:14px;border-radius:2px;background:repeating-conic-gradient(var(--check-b) 0 25%,var(--check-a) 0 50%) 0 0/7px 7px;border:1px solid var(--check-b)}
.coursebar__runner{position:absolute;left:0;top:5px;height:26px;width:auto;transform:translateX(-58%);pointer-events:none}
.coursebar__km{display:flex;align-items:baseline;gap:6px;justify-content:flex-end;min-width:7.5em;white-space:nowrap}
.coursebar__km b{font:700 22px/1 var(--font-num);font-variant-numeric:tabular-nums}
.coursebar__km small{font-size:12px;color:var(--ink-2)}
.coursebar__km em{font-style:normal;font-size:12px;font-weight:700;color:var(--orange-text)}
@media (max-width:620px){
  .coursebar__brand{display:none}
  .coursebar__in{grid-template-columns:minmax(0,1fr) auto}
  .coursebar__track{margin-left:6px}
  .coursebar__km{min-width:4.6em}
  .coursebar__km em{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--cobalt);color:var(--on-cobalt);padding-block:calc(var(--bar-h) + env(safe-area-inset-top,0px) + clamp(28px,5vw,64px)) clamp(56px,7vw,96px)}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero__kicker{display:inline-flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;font-weight:700;color:var(--on-cobalt-2)}
.hero__kicker span{display:inline-flex;align-items:center;gap:8px}
.hero__kicker span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange)}
.hero__title{margin:18px 0 20px}
.hero__title img{display:block;width:clamp(220px,26vw,340px);height:auto}
.hero__sub{font-family:var(--font-serif);font-weight:700;font-size:clamp(20px,1vw + 15px,25px);line-height:1.45}
.hero__lead{margin-top:14px;color:var(--on-cobalt-2);max-width:31em}
.hero__lead strong{color:var(--on-cobalt);font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__meta{margin-top:22px;font-size:14px;color:var(--on-cobalt-2)}
.hero__meta .num{font-size:16px}
.hero__art{position:relative;aspect-ratio:1.22;width:100%}
.art-runner{position:absolute;left:14%;top:9%;width:72%;height:auto;filter:drop-shadow(0 20px 26px rgba(12,22,64,.28))}
.art-item{position:absolute;height:auto;transform:rotate(var(--r,0deg));animation:bob 3.8s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.art-bottle{left:3%;top:4%;width:9.5%;--r:-6deg}
.art-clip{right:3%;top:2%;width:12%;--r:4deg;--d:-1.2s}
.art-cap{left:0;top:43%;width:15%;--r:-4deg;--d:-2s}
.art-flag{right:1%;top:38%;width:12%;--d:-.6s}
.art-watch{left:4%;bottom:5%;width:8%;--r:8deg;--d:-2.6s}
.art-shoe{right:0;bottom:4%;width:16%;--r:-6deg;--d:-1.6s}
.speed{position:absolute;height:0;border-top:2px dashed color-mix(in srgb,var(--on-cobalt) 60%,transparent);width:11%}
.speed--1{left:1%;top:31%;transform:rotate(-8deg)}
.speed--2{left:2%;top:67%;transform:rotate(6deg)}
.speed--3{left:8%;top:87%;transform:rotate(-14deg)}
.speed--4{right:1%;top:29%;transform:rotate(10deg)}
.speed--5{right:3%;top:64%;transform:rotate(-8deg)}
.speed--6{right:14%;top:90%;transform:rotate(14deg)}
@keyframes bob{from{transform:translateY(0) rotate(var(--r,0deg))}to{transform:translateY(-7px) rotate(var(--r,0deg))}}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__art{max-width:520px;margin-inline:auto}
}

/* ---------- principles ---------- */
.principles{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(36px,6vw,88px);align-items:end}
.plist{list-style:none;margin-top:34px;border-top:1px solid var(--rule)}
.plist li{display:grid;grid-template-columns:10.5em minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--rule)}
.plist b{font-family:var(--font-serif);font-weight:700;font-size:20px;line-height:1.45}
.plist span{color:var(--ink-2)}
.podium{margin:0}
.podium__stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;height:260px}
.podium__step{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:16px;border-radius:12px 12px 0 0;color:var(--on-cobalt)}
.podium__step .n{font:800 54px/1 var(--font-num)}
.podium__step .l{font-weight:700;font-size:17px}
.podium__step--1{height:100%;background:var(--cobalt)}
.podium__step--2{height:76%;background:var(--steel)}
.podium__step--3{height:54%;background:var(--orange);color:var(--on-orange)}
.podium__base{height:10px;border-radius:3px;background:var(--ink)}
.podium figcaption{margin-top:20px;font-family:var(--font-serif);font-size:16px;line-height:1.75;color:var(--ink-2)}
.podium figcaption cite{display:block;margin-top:8px;font:600 13px var(--font-sans);font-style:normal;color:var(--ink-2)}
@media (max-width:820px){
  .principles{grid-template-columns:1fr}
  .plist li{grid-template-columns:1fr;gap:4px}
  .podium{max-width:420px}
}

/* ---------- 9-6-3 ---------- */
.n963{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.n963 li{display:grid;gap:10px;align-content:start;padding:24px clamp(16px,2.4vw,32px) 28px 0}
.n963 li+li{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--rule)}
.n963__big{font:800 clamp(84px,9vw,132px)/.82 var(--font-num);color:var(--blue-text);letter-spacing:-.01em}
.n963__big span{font:700 20px/1 var(--font-sans);margin-left:6px;color:var(--ink-2);letter-spacing:0}
.n963 h3{font-size:19px}
.n963 h3 + p{font-size:15.5px;line-height:1.7;color:var(--ink-2)}
@media (max-width:760px){
  .n963{grid-template-columns:1fr}
  .n963 li{grid-template-columns:auto minmax(0,1fr);column-gap:20px;padding:20px 0}
  .n963 li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .n963__big{grid-row:span 2;font-size:88px}
  .n963__big span{display:block;margin:8px 0 0 4px;font-size:16px}
}
.why3{margin-top:clamp(28px,4vw,44px);padding:clamp(20px,3vw,32px);border-radius:var(--r);background:var(--sky)}
.why3 h3{font-size:16px;letter-spacing:.02em}
.why3 ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:16px}
.why3 li{display:grid;gap:6px;align-content:start}
.why3 li b{font:800 28px/1.1 var(--font-num);color:var(--blue-text)}
.why3 li b.kr{font:900 22px/1.3 var(--font-serif)}
.why3 li span{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.why3 p{margin-top:18px;font-size:14.5px;color:var(--ink-2)}
@media (max-width:860px){.why3 ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.why3 ul{grid-template-columns:1fr}}

/* ---------- tool ---------- */
.tool{margin-top:clamp(40px,6vw,72px);background:var(--card);border:1px solid var(--rule);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.tool__head{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding:20px clamp(18px,3vw,34px);background:var(--cobalt);color:var(--on-cobalt)}
.tool__head h3{font-family:var(--font-serif);font-weight:900;font-size:clamp(20px,1vw + 15px,26px)}
.tool__head p{font-size:14.5px;color:var(--on-cobalt-2);max-width:34em}
.tool__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3.4vw,44px);padding:clamp(18px,3vw,34px)}
@media (max-width:900px){.tool__body{grid-template-columns:1fr}}
.step-label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;margin-bottom:12px;padding:0}
.step-label .num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--card);font-size:15px;font-weight:700}
fieldset{border:0;margin:0;padding:0;min-width:0}
.opts{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:14px 16px;border:1.5px solid var(--rule);border-radius:14px;background:var(--paper);cursor:pointer;transition:border-color .15s,background-color .15s}
.opt:hover{border-color:var(--steel)}
.opt input{width:18px;height:18px;margin:0;accent-color:var(--cobalt)}
.opt__t{font-weight:700;font-size:16.5px}
.opt__m{font:700 20px/1 var(--font-num);color:var(--blue-text);white-space:nowrap}
.opt__d{grid-column:2 / -1;font-size:14px;line-height:1.6;color:var(--ink-2)}
.opt.is-on{border-color:var(--cobalt);background:color-mix(in srgb,var(--cobalt) 9%,var(--card))}
.ready{margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--sky)}
.ready__t{font-weight:700;font-size:14.5px}
.ready label{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:14.5px;line-height:1.55;cursor:pointer}
.ready input{width:17px;height:17px;margin:3px 0 0;flex:none;accent-color:var(--cobalt)}
.ready__note{margin-top:6px;font-size:13.5px;font-weight:700;color:var(--warn)}
.ready__note.is-ok{color:var(--ok)}
.field{margin-top:26px}
.date-in{font:600 18px var(--font-sans);min-height:48px;width:100%;max-width:240px;padding:9px 14px;border-radius:12px;border:1.5px solid var(--rule);background:var(--paper);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:baseline;gap:6px;padding:7px 13px;border-radius:999px;border:1.5px solid var(--rule);background:transparent;color:var(--ink);font-size:14px;cursor:pointer;transition:background-color .15s,border-color .15s}
.chip b{font-family:var(--font-num);font-size:15px}
.chip:hover{border-color:var(--steel)}
.chip[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:var(--on-cobalt)}
.hint{margin-top:10px;font-size:13px;line-height:1.6;color:var(--ink-2)}

.bib{position:relative;border:1.5px solid var(--rule);border-radius:18px;background:var(--card);overflow:hidden;box-shadow:0 1px 0 var(--rule)}
.bib__band{display:flex;justify-content:space-between;gap:10px;padding:10px 20px;background:var(--cobalt);color:var(--on-cobalt);font-size:13.5px;font-weight:700;letter-spacing:.03em}
.bib__main{position:relative;padding:22px 20px 18px;text-align:center}
.bib__hole{position:absolute;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--rule);background:var(--paper)}
.bib__hole--tl{left:12px;top:12px}.bib__hole--tr{right:12px;top:12px}.bib__hole--bl{left:12px;bottom:12px}.bib__hole--br{right:12px;bottom:12px}
.bib__no{font:800 clamp(72px,8vw,112px)/.9 var(--font-num);letter-spacing:.01em;color:var(--ink)}
.bib__race{margin-top:8px;font-weight:700;font-size:16.5px}
.bib__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px dashed var(--rule)}
.bib__stats div{padding:12px 8px;text-align:center}
.bib__stats div+div{border-left:1px solid var(--rule)}
.bib__stats dt{font-size:12.5px;color:var(--ink-2)}
.bib__stats dd{margin:2px 0 0;font:700 19px/1.2 var(--font-num)}
.status{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:13px 15px;border-radius:14px;font-size:15px;line-height:1.65}
.status__pill{flex:none;margin-top:2px;padding:3px 9px;border-radius:999px;border:1.5px solid currentColor;font-size:12.5px;font-weight:700;white-space:nowrap}
.status--ok{background:var(--ok-soft)}.status--ok .status__pill{color:var(--ok)}
.status--warn{background:var(--warn-soft)}.status--warn .status__pill{color:var(--warn)}
.status--bad{background:var(--bad-soft)}.status--bad .status__pill{color:var(--bad)}
.status p+p{margin-top:6px}
.status .btn{margin-top:10px}
.summary__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

.tool__plan{border-top:1px solid var(--rule);padding:clamp(18px,3vw,34px)}
.plan-h{font-family:var(--font-serif);font-weight:900;font-size:20px;margin-bottom:6px}
.plan-sub{font-size:14px;color:var(--ink-2)}

/* timeline */
.tl{position:relative;margin-top:18px;padding-top:50px}
.tl__flags{position:absolute;left:0;right:0;top:0;height:48px}
.tl__flag{position:absolute;bottom:0;display:flex;align-items:flex-end;gap:5px;transform:translateX(-3px)}
.tl__flag img{width:22px;height:auto;display:block}
.tl__flag span{font-size:12px;line-height:1.3;font-weight:700;white-space:nowrap}
.tl__flag span small{display:block;font:600 12px/1.2 var(--font-num);color:var(--ink-2)}
.tl__flag--end{transform:translateX(-100%);flex-direction:row-reverse;text-align:right}
.tl__flag--start{transform:none}
.tl__flag--start i{display:block;width:9px;height:22px;border-left:2px solid var(--ink)}
.tl__weather{position:relative;height:20px;margin-bottom:5px}
.tl__season{position:absolute;top:0;height:20px;border-radius:5px;padding-inline:6px;font-size:11.5px;font-weight:700;line-height:20px;white-space:nowrap;overflow:hidden}
.tl__season--hot{background:var(--orange-soft);color:var(--orange-text)}
.tl__season--cold{background:var(--sky);color:var(--blue-text)}
.tl__bar{position:relative;height:56px;border-radius:12px;background:var(--sky);overflow:hidden}
.seg{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding-inline:10px;min-width:0;overflow:hidden;border-right:2px solid var(--card);color:var(--on-cobalt)}
.seg b{font-size:14px;line-height:1.25;white-space:nowrap}
.seg small{font:700 14px/1.2 var(--font-num);white-space:nowrap;opacity:.92}
.seg--m1{background:var(--steel-soft);color:var(--ink)}
.seg--m2{background:var(--steel)}
.seg--m3{background:var(--cobalt)}
.seg--slack{border-right:0;color:var(--ink-2);background:repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,var(--ink-2) 20%,transparent) 7px 9px)}
.tl__phase{position:absolute;top:8px;bottom:8px;width:0;border-left:1.5px dashed color-mix(in srgb,var(--on-cobalt) 70%,transparent)}
.tl__past{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bad) 62%,transparent) 0 5px,transparent 5px 10px)}
.tl__phases{position:relative;height:18px;margin-top:4px}
.tl__phases span{position:absolute;transform:translateX(-50%);font-size:11.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.tl__axis{position:relative;height:34px;margin-top:4px}
.tl__tick{position:absolute;top:0;transform:translateX(-50%);text-align:center;font:600 12.5px/1.15 var(--font-num);color:var(--ink-2);white-space:nowrap}
.tl__tick::before{content:"";display:block;width:1px;height:6px;margin:0 auto 3px;background:var(--rule)}
.tl__tick i{display:block;font-style:normal;font-size:11px;color:var(--orange-text)}
.tl__today{position:absolute;top:50px;height:81px;width:2px;margin-left:-1px;background:var(--orange)}
.tl__today span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:2px;padding:1px 6px;border-radius:5px;background:var(--orange);color:var(--on-orange);font-size:11px;font-weight:700;white-space:nowrap}
@media (max-width:620px){
  .tl--dense .tl__tick:nth-child(even){visibility:hidden}
  .seg{padding-inline:6px}
  .seg b{font-size:12.5px}
  .seg small{font-size:12.5px}
}
.tl__legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.tl__legend span{display:inline-flex;align-items:center;gap:6px}
.tl__legend i{width:14px;height:10px;border-radius:3px;display:inline-block}

/* two-row flags when labels collide */
.tl--tall{padding-top:80px}
.tl--tall .tl__flags{height:78px}
.tl--tall .tl__today{top:80px}
.tl__flag.is-up{bottom:30px}
.tl__flag.is-up::after{content:"";position:absolute;left:1px;top:100%;height:30px;border-left:1.5px dotted var(--ink-2)}
.tl__flag--end.is-up::after{left:auto;right:1px}
/* full-marathon value sits inside its bar */
.brow--full .brow__val{left:auto!important;right:27.27%;margin:0 8px 0 0;color:var(--on-cobalt)}
@media (min-width:861px){.author__photo{position:sticky;top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 28px)}}

/* module cards */
.mods{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px;margin-top:30px}
@media (max-width:980px){.mods{grid-template-columns:1fr}}
.mod{display:grid;gap:12px;align-content:start;padding:20px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper)}
.mod__top{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between}
.mod__tag{padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--on-cobalt);background:var(--steel)}
.mod--m1 .mod__tag{background:var(--steel-soft);color:var(--ink)}
.mod--m3 .mod__tag{background:var(--cobalt)}
.mod__dates{font:600 15px/1.3 var(--font-num);color:var(--ink-2);font-variant-numeric:tabular-nums}
.mod h4{font-family:var(--font-serif);font-weight:900;font-size:21px}
.mod dl{margin:0;display:grid;gap:10px}
.mod dt{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-2)}
.mod dd{margin:1px 0 0;font-size:15px;line-height:1.65}
.phases{list-style:none;display:grid;gap:8px}
.mods--1 .phases{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.mods--1 .phases{grid-template-columns:1fr}}
.phases li{padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--rule);font-size:14.5px;line-height:1.6}
.phases b{display:block;font-size:13px;color:var(--blue-text)}
.mod__note{padding:10px 12px;border-radius:10px;background:var(--warn-soft);font-size:14px;line-height:1.6}
.mod__note b{color:var(--warn)}
.mod__book{font-size:13.5px;color:var(--ink-2)}
.mod__book b{color:var(--blue-text)}

/* key dates */
.dates{margin-top:34px}
.dates ol{list-style:none;columns:2 340px;column-gap:40px;margin-top:10px}
.dates li{break-inside:avoid;display:grid;grid-template-columns:30px 6.8em minmax(0,1fr);gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--rule)}
.dates li.is-past{opacity:.55}
.dates .ico{width:30px;height:30px;object-fit:contain}
.dates .dot{width:30px;display:grid;place-items:center;padding-top:8px}
.dates .dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--steel)}
.dates time{font:700 17px/1.25 var(--font-num);font-variant-numeric:tabular-nums}
.dates time small{display:block;font:600 12.5px/1.3 var(--font-num);color:var(--ink-2)}
.dates b{font-size:15.5px}
.dates p{margin-top:2px;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ---------- mileage ---------- */
.mile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.mile{grid-template-columns:1fr}}
.week{list-style:none;display:grid;gap:0;margin-top:26px;border-top:1px solid var(--rule)}
.week li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.week b{font-weight:700}
.chart{padding:clamp(18px,3vw,28px);border-radius:var(--r);border:1px solid var(--rule);background:var(--paper)}
.chart__t{font-weight:700;font-size:15px}
.chart__s{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.bars{display:grid;gap:14px;margin-top:20px}
.brow{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:12px;align-items:center}
.brow__l{font-size:14px;font-weight:700;line-height:1.35}
.brow__l small{display:block;font-weight:400;color:var(--ink-2);font-size:12.5px}
.brow__track{position:relative;height:34px;background-image:linear-gradient(to right,var(--rule) 1px,transparent 1px);background-size:calc(100% / 5.5) 100%}
.brow__bar{position:absolute;left:0;top:5px;bottom:5px;border-radius:0 7px 7px 0;background:var(--steel)}
.brow__bar--range{background:repeating-linear-gradient(135deg,var(--steel) 0 4px,color-mix(in srgb,var(--steel) 45%,transparent) 4px 8px);border-radius:0 7px 7px 0}
.brow__val{position:absolute;top:50%;transform:translateY(-50%);margin-left:8px;font:700 15px/1 var(--font-num);white-space:nowrap}
.brow--full .brow__bar{background:var(--cobalt)}
.brow--full .brow__bar--range{background:repeating-linear-gradient(135deg,var(--cobalt) 0 4px,color-mix(in srgb,var(--cobalt) 45%,transparent) 4px 8px)}
.baxis{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:12px;margin-top:4px}
.baxis__in{position:relative;height:18px}
.baxis__in span{position:absolute;transform:translateX(-50%);font:600 12px/1 var(--font-num);color:var(--ink-2)}
.verdict{margin-top:26px;padding-top:20px;border-top:1px dashed var(--rule)}
.verdict__strip{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:12px;align-items:center;margin-top:12px}
.verdict__bar{position:relative;height:14px;border-radius:7px;overflow:hidden;display:flex}
.verdict__bar i{display:block;height:100%}
.v-bad{background:var(--bad)}.v-warn{background:var(--warn)}.v-mid{background:color-mix(in srgb,var(--ok) 55%,var(--card))}.v-ok{background:var(--ok)}
.vlist{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin-top:14px}
@media (max-width:480px){.vlist{grid-template-columns:1fr}}
.vlist li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:9px;font-size:14px;line-height:1.5}
.vlist li i{width:12px;height:12px;border-radius:3px;margin-top:5px}
.vlist b{font-family:var(--font-num);font-size:15px}
.chart blockquote{margin:18px 0 0;padding-left:14px;border-left:3px solid var(--orange);font-family:var(--font-serif);font-size:15px;line-height:1.75;color:var(--ink-2)}
.chart blockquote cite{display:block;margin-top:6px;font:600 12.5px var(--font-sans);font-style:normal}

/* ---------- FAQ ---------- */
.faqwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.faqwrap .sec-head{position:sticky;top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 28px);margin-bottom:0}
@media (max-width:900px){.faqwrap{grid-template-columns:1fr}.faqwrap .sec-head{position:static}}
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.faq summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 20px;cursor:pointer;list-style:none;font-weight:700;font-size:17px;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq .q{font:800 24px/1 var(--font-num);color:var(--orange-text)}
.faq .pm{position:relative;width:18px;height:18px;flex:none}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--ink-2);transition:transform .2s}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq .a{padding:0 20px 20px 58px;color:var(--ink-2);font-size:16px}
.faq .a p+p{margin-top:8px}
.faq .pg{display:inline-block;margin-top:10px;font:600 13px var(--font-num);color:var(--blue-text)}

/* ---------- TOC ---------- */
.front{display:flex;flex-wrap:wrap;gap:6px 26px;margin-bottom:16px;font-size:15px;color:var(--ink-2)}
.front span{display:inline-flex;gap:8px}
.front .num{color:var(--ink)}
.toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;border-top:2px solid var(--ink)}
@media (max-width:820px){.toc{grid-template-columns:1fr}}
.toc__col{min-width:0}
.toc details{border-bottom:1px solid var(--rule)}
.toc summary{display:grid;grid-template-columns:3.3em minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:16px 0;cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc .ch{font:800 28px/1 var(--font-num);color:var(--blue-text)}
.toc .ti{font-family:var(--font-serif);font-weight:700;font-size:18px;line-height:1.45}
.toc .ti small{display:block;margin-top:2px;font:400 14px/1.5 var(--font-sans);color:var(--ink-2)}
.toc .pg{font:600 15px var(--font-num);color:var(--ink-2)}
.toc ol{list-style:none;padding:0 0 16px calc(3.3em + 12px);display:grid;gap:2px}
.toc ol li{display:flex;align-items:baseline;gap:10px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.toc ol li::after{content:"";order:1;flex:1 1 auto;min-width:16px;border-bottom:1px dotted var(--rule);transform:translateY(-4px)}
.toc ol li .num{order:2;flex:none;color:var(--ink)}
.toc summary:hover .ti{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------- quotes ---------- */
.quotes{background:var(--cobalt);color:var(--on-cobalt)}
.quotes .eyebrow{color:var(--on-cobalt-2)}
.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px) clamp(24px,4vw,64px);margin-top:clamp(28px,4vw,44px)}
@media (max-width:760px){.qgrid{grid-template-columns:1fr}}
.qgrid figure{margin:0;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--on-cobalt) 35%,transparent)}
.qgrid blockquote{margin:0;font-family:var(--font-serif);font-weight:700;font-size:clamp(19px,.8vw + 15px,24px);line-height:1.6}
.qgrid figcaption{margin-top:12px;font:600 14px var(--font-num);letter-spacing:.02em;color:var(--on-cobalt-2)}

/* ---------- praise ---------- */
.praise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:820px){.praise{grid-template-columns:1fr}}
.pcard{display:grid;gap:14px;align-content:start;padding:clamp(20px,2.6vw,28px);border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.pcard blockquote{margin:0;font-family:var(--font-serif);font-weight:700;font-size:18.5px;line-height:1.65}
.pcard blockquote::before{content:"“";display:block;height:.55em;font:900 52px/1 var(--font-serif);color:var(--orange)}
.who b{font-size:16px}
.who span{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.pcard details summary{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--blue-text);cursor:pointer}
.pcard details p{margin-top:10px;font-size:15px;line-height:1.8;color:var(--ink-2)}
.press{margin-top:clamp(40px,6vw,64px)}
.press h3{font-size:15px;letter-spacing:.03em;color:var(--ink-2)}
.press ul{list-style:none;margin-top:10px;border-top:1px solid var(--rule)}
.press a{display:grid;grid-template-columns:8.5em 6.5em minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.press .src{font-weight:700}
.press time{font:600 14px var(--font-num);color:var(--ink-2)}
.press .ttl{font-family:var(--font-serif);font-weight:700;font-size:17px;line-height:1.5}
.press .go{font-size:13px;color:var(--blue-text);white-space:nowrap}
.press a:hover .ttl{text-decoration:underline;text-underline-offset:4px}
@media (max-width:680px){.press a{grid-template-columns:auto auto;gap:4px 12px}.press .ttl{grid-column:1 / -1}.press .go{display:none}}

/* ---------- author ---------- */
.author{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.author{grid-template-columns:1fr}}
.author__photo{margin:0;border-radius:22px;overflow:hidden;background:var(--orange);aspect-ratio:560/465;max-width:520px}
.author__photo img{display:block;width:100%;height:100%;object-fit:cover}
.author__name{font-family:var(--font-serif);font-weight:900;font-size:clamp(34px,3vw + 16px,52px);line-height:1.1}
.author__role{margin-top:10px;font-size:16px;color:var(--ink-2)}
.astats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:26px 0;border-block:1px solid var(--rule)}
.astats div{padding:14px 12px 14px 0}
.astats div+div{padding-left:14px;border-left:1px solid var(--rule)}
.astats b{display:block;font:800 30px/1.05 var(--font-num);color:var(--blue-text)}
.astats span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--ink-2)}
@media (max-width:560px){.astats{grid-template-columns:repeat(2,minmax(0,1fr))}.astats div:nth-child(3){padding-left:0;border-left:0}.astats div:nth-child(n+3){border-top:1px solid var(--rule)}}
.author__bio p+p{margin-top:12px}
.author__bio{color:var(--ink-2)}
.career{list-style:none;display:grid;gap:4px;margin-top:20px;font-size:15px}
.career li{display:flex;gap:10px}
.career li::before{content:"前";font-weight:700;color:var(--orange-text)}
.works{margin-top:18px;font-size:15px;color:var(--ink-2)}

/* ---------- buy ---------- */
.buy{position:relative;overflow:hidden;background:var(--cobalt);color:var(--on-cobalt)}
.finishline{height:28px;background:repeating-conic-gradient(var(--check-b) 0 25%,var(--check-a) 0 50%) 0 0/28px 28px}
.buy__in{padding-block:clamp(64px,8vw,112px)}
.buy__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,88px);align-items:center}
@media (max-width:860px){.buy__grid{grid-template-columns:1fr}}
.buy .eyebrow{color:var(--on-cobalt-2)}
.buy .h2{margin-top:12px}
.buy__lead{margin-top:14px;color:var(--on-cobalt-2);max-width:32em}
.specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;margin:28px 0;font-size:15.5px}
.specs dt{color:var(--on-cobalt-2)}
.specs dd{margin:0;font-weight:500}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.share{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;color:var(--on-cobalt-2)}
.book3d{perspective:1500px;width:min(300px,68vw);margin-inline:auto;padding-block:10px 30px}
.book3d__in{position:relative;aspect-ratio:145/215;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.book3d:hover .book3d__in{transform:rotateY(-10deg) rotateX(2deg)}
.book3d__cover{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:2px 5px 5px 2px;transform:translateZ(12px);box-shadow:inset 3px 0 6px rgba(255,255,255,.18)}
.book3d__pages{position:absolute;top:1.2%;bottom:1.2%;right:0;width:24px;transform:translateX(12px) rotateY(90deg);background:repeating-linear-gradient(90deg,#fbfaf6 0 2px,#e2dfd6 2px 3px)}
.book3d__back{position:absolute;inset:0;border-radius:2px 5px 5px 2px;background:var(--cobalt-deep);transform:translateZ(-12px)}
.book3d::after{content:"";display:block;width:80%;height:26px;margin:12px auto 0;border-radius:50%;background:radial-gradient(closest-side,rgba(8,14,40,.45),transparent)}

/* ---------- footer ---------- */
.foot{padding-block:40px 48px;font-size:14px;color:var(--ink-2)}
.foot__in{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.foot b{color:var(--ink);font-family:var(--font-serif)}
.foot a{color:var(--ink-2)}
.foot p+p{margin-top:4px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;transform:translate(-50%,16px);padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14.5px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.copybox{margin-top:12px}
.copybox textarea{width:100%;min-height:180px;padding:12px;border-radius:12px;border:1.5px solid var(--rule);background:var(--paper);color:var(--ink);font:14px/1.6 var(--font-sans)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .art-item{animation:none}
  .btn,.book3d__in,.toast,.faq .pm::before,.faq .pm::after{transition:none}
}


.skip-link{position:fixed;top:8px;left:16px;z-index:9999;background:white;color:#18203f;padding:12px 20px;transform:translateY(-180%);border-radius:8px}
.skip-link:focus{transform:translateY(0)}
.hero__nav{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:24px;font-size:14px}
.hero__nav a{color:var(--on-cobalt-2);text-underline-offset:5px}
.hero__nav a:hover{color:white}
.tool-note{padding:20px;color:var(--ink-2)}