:root {
  --ink: #1d2827;
  --forest: #123d3b;
  --pine: #126b65;
  --paper: #f7f4ee;
  --soft: #eee9df;
  --line-soft: #dcd6ca;
}

body { background: var(--paper); color: var(--ink); }
html { scroll-padding-top: 92px; }

.map-header { background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.map-header__inner { width: min(1160px, calc(100% - 48px)); min-height: 70px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.map-header__brand { color: var(--forest); font-weight: 850; font-size: 1.05rem; text-decoration: none; letter-spacing: -.03em; white-space: nowrap; }
.map-header__brand span { color: #b98c72; padding: 0 8px; }
.map-header nav { display: flex; align-items: center; gap: 30px; }
.map-header nav a { color: #566461; font-size: .86rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.map-header nav a:hover { color: var(--pine); }

.map-hero { background: var(--forest); color: #fffdf8; overflow: hidden; }
.map-hero__inner { width: min(1160px, calc(100% - 48px)); margin: auto; padding: 88px 0 80px; position: relative; }
.map-hero__inner::after { content: ''; width: 470px; height: 470px; position: absolute; right: -100px; top: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.025); pointer-events: none; }
.map-kicker { margin: 0 0 26px; display: flex; align-items: center; gap: 11px; color: #b9d7ca; font-size: .74rem; font-weight: 750; letter-spacing: .19em; }
.map-kicker__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d6ad7b; box-shadow: 0 0 0 5px rgba(214,173,123,.14); }
.map-hero h1 { max-width: none; margin: 0; font-size: clamp(3.15rem, 6.8vw, 6.3rem); line-height: 1.13; letter-spacing: -.07em; font-weight: 780; }
.map-hero h1 em { color: #d8b992; font-style: normal; }
.map-hero__lead { max-width: 690px; margin: 27px 0 0; color: #c5d8d0; font-size: 1.11rem; line-height: 1.85; }
.map-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.map-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; padding: 0 18px; border: 1px solid #bdd3c8; border-radius: 5px; color: #fff; font-size: .91rem; font-weight: 750; text-decoration: none; }
.map-button--light { background: #e9e3d5; color: var(--forest); border-color: #e9e3d5; }
.map-button--outline { border-color: #6d9290; }
.map-button:hover { transform: translateY(-1px); }
.map-hero__line { display: flex; gap: 6px; width: 260px; margin-top: 75px; }
.map-hero__line span { height: 3px; flex: 1; background: #d6ad7b; }
.map-hero__line span:nth-child(2) { background: #638a81; }
.map-hero__line span:nth-child(3) { background: #466c66; }

.map-container { width: min(1160px, calc(100% - 48px)); margin: auto; }
.map-label { color: #a34d34; display: inline-block; font-size: .71rem; font-weight: 850; letter-spacing: .13em; }
.now-card { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(230px, .65fr); gap: 44px; padding: 34px 42px; margin: -27px 0 108px; background: #fffdf8; border: 1px solid #dcd5c8; border-radius: 8px; position: relative; box-shadow: 0 12px 30px rgba(31,44,39,.06); }
.now-card h2 { margin: 17px 0 12px; font-size: clamp(1.8rem, 3vw, 2.55rem); letter-spacing: -.05em; }
.now-card p { max-width: 630px; margin: 0 0 18px; color: #606a65; line-height: 1.8; }
.now-card a { color: var(--pine); font-weight: 750; text-decoration: none; border-bottom: 1px solid #a6c2b6; padding-bottom: 3px; }
.now-card__progress { border-left: 1px solid var(--line-soft); padding-left: 40px; display: flex; flex-direction: column; justify-content: center; }
.now-card__progress strong { color: var(--forest); font-size: 3.25rem; font-weight: 750; line-height: 1; letter-spacing: -.07em; }
.now-card__progress strong span { color: #9ca7a0; font-size: 1.65rem; letter-spacing: -.04em; }
.now-card__progress > span { margin-top: 8px; color: #5d6d66; font-size: .8rem; font-weight: 700; }
.progress-steps { display: flex; gap: 3px; margin: 22px 0 9px; }
.progress-steps i { height: 5px; flex: 1; background: #deded5; border-radius: 2px; }
.now-card__progress small { color: #89928b; font-size: .72rem; }

.roadmap__top { display: flex; justify-content: space-between; align-items: end; gap: 45px; }
.roadmap__top h2 { margin-top: 14px; font-size: clamp(2.4rem, 4vw, 3.5rem); letter-spacing: -.065em; }
.roadmap__top p { max-width: 420px; margin-bottom: 3px; color: #66716b; line-height: 1.75; font-size: .93rem; }
.stage-nav { display: flex; flex-wrap: wrap; gap: 9px; margin: 34px 0 54px; }
.stage-nav a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-soft); border-radius: 4px; padding: 9px 14px; background: #fffdf8; color: var(--forest); text-decoration: none; font-size: .86rem; font-weight: 700; }
.stage-nav a span { color: #ab654b; font-size: .75rem; }
.stage-nav a:hover { border-color: var(--pine); }
.stage { margin-bottom: 74px; }
.stage__intro { display: grid; grid-template-columns: 88px 1fr auto; gap: 22px; align-items: start; margin-bottom: 22px; border-top: 1px solid #b8beb4; padding-top: 27px; }
.stage__index { color: #a75037; font-size: .78rem; font-weight: 850; letter-spacing: .08em; padding-top: 5px; }
.stage__intro h2 { margin: 0 0 8px; color: var(--forest); font-size: 1.85rem; letter-spacing: -.05em; }
.stage__intro p { margin: 0; color: #69736c; font-size: .92rem; line-height: 1.6; }
.stage__count { color: #8d9a90; font-size: .78rem; font-weight: 700; padding-top: 5px; }
.chapter-list { display: grid; gap: 10px; }
.chapter { border: 1px solid #ddd8cf; border-radius: 5px; background: #fffdf9; }
.chapter[open] { border-color: #b4cbc0; box-shadow: 0 8px 20px rgba(32,60,48,.04); }
.chapter__summary { display: grid; grid-template-columns: 55px minmax(0, 1fr) auto 20px; gap: 16px; align-items: center; min-height: 90px; padding: 17px 24px; list-style: none; cursor: pointer; }
.chapter__summary::-webkit-details-marker { display: none; }
.chapter__summary:hover { background: #f8f8f2; }
.chapter__number { align-self: start; padding-top: 5px; color: #a8543b; font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.chapter__heading { display: flex; flex-direction: column; gap: 5px; }
.chapter__heading strong { color: #24413b; font-size: 1.13rem; letter-spacing: -.03em; }
.chapter__heading > span { max-width: 670px; color: #78817a; font-size: .81rem; line-height: 1.45; }
.chapter__state { color: #8e978f; border: 1px solid #e3e2da; border-radius: 3px; padding: 4px 7px; font-size: .69rem; font-weight: 700; white-space: nowrap; }
.chapter__chevron { color: #5c7669; font-size: 1.35rem; transition: transform .2s ease; }
.chapter[open] .chapter__chevron { transform: rotate(180deg); }
.chapter__body { margin: 0 24px 24px 95px; border-top: 1px solid #e9e7df; padding-top: 21px; }
.chapter__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 22px; color: #7c8a81; font-size: .76rem; }
.chapter__meta a { color: var(--pine); font-weight: 750; text-decoration: none; }
.chapter__meta a:hover { text-decoration: underline; }
.chapter__body h4 { margin: 0 0 12px; color: #38544a; font-size: .84rem; }
.chapter__body ul { margin: 0 0 24px; padding-left: 19px; display: grid; gap: 9px; color: #4e5b53; font-size: .89rem; line-height: 1.67; }
.chapter__body li::marker { color: #bb7856; }
.chapter__goal { display: flex; gap: 18px; padding: 16px 18px; background: #f0f3eb; border-left: 3px solid #438576; }
.chapter__goal span { flex: none; color: #2a6c5f; font-size: .8rem; font-weight: 800; }
.chapter__goal p { margin: 0; color: #3d574f; font-size: .87rem; line-height: 1.6; }
code { color: #9b4c35; background: #f2eee5; padding: 1px 3px; border-radius: 2px; }

.method { margin: 108px 0 70px; }
.method__heading h2 { margin: 13px 0 26px; font-size: clamp(2rem, 3.5vw, 3rem); letter-spacing: -.06em; }
.method__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.method__grid article { min-height: 186px; padding: 25px; border-top: 3px solid #a9bcb0; background: #ebece5; }
.method__grid article > span { color: #a04f39; font-size: .76rem; font-weight: 800; }
.method__grid h3 { margin: 25px 0 10px; font-size: 1.08rem; color: #2d473d; }
.method__grid p { margin: 0; color: #66716a; line-height: 1.7; font-size: .89rem; }
.boundary { display: grid; grid-template-columns: 1fr 1.6fr; gap: 35px; padding: 38px 42px; margin-bottom: 85px; background: #e4ece5; border-radius: 6px; }
.boundary h2 { margin: 13px 0 0; color: var(--forest); font-size: 1.75rem; letter-spacing: -.05em; }
.boundary p { margin: 0; color: #4e6256; line-height: 1.83; font-size: .9rem; }
.boundary a { display: inline-block; margin-left: 5px; color: var(--pine); font-weight: 750; text-decoration: none; }

a:focus-visible, summary:focus-visible { outline: 3px solid #c18965; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: 0s !important; } }

@media (max-width: 760px) {
  .map-header__inner, .map-hero__inner, .map-container { width: min(100% - 30px, 1160px); }
  .map-header__inner { min-height: 62px; }
  .map-header nav { gap: 14px; }
  .map-header nav a { font-size: .74rem; }
  .map-header nav a:nth-child(2) { display: none; }
  .map-hero__inner { padding: 64px 0 60px; }
  .map-hero__inner::after { width: 230px; height: 230px; right: -140px; top: 170px; }
  .map-hero h1 { font-size: clamp(2.55rem, 10vw, 4.5rem); letter-spacing: -.06em; }
  .map-hero__lead { font-size: .96rem; }
  .map-hero__line { margin-top: 55px; }
  .now-card { grid-template-columns: 1fr; gap: 25px; padding: 27px 24px; margin-bottom: 72px; }
  .now-card__progress { border-left: 0; border-top: 1px solid var(--line-soft); padding: 22px 0 0; }
  .roadmap__top { display: block; }
  .roadmap__top p { margin-top: 12px; }
  .stage-nav { margin-bottom: 45px; }
  .stage__intro { grid-template-columns: 1fr auto; gap: 8px; }
  .stage__index { grid-column: 1 / -1; }
  .stage__intro h2 { font-size: 1.5rem; }
  .chapter__summary { grid-template-columns: 30px minmax(0, 1fr) 15px; gap: 10px; padding: 16px 14px; }
  .chapter__heading strong { font-size: 1rem; }
  .chapter__heading > span { font-size: .74rem; }
  .chapter__state { display: none; }
  .chapter__body { margin: 0 14px 17px 54px; }
  .chapter__goal { display: block; }
  .chapter__goal p { margin-top: 6px; }
  .method { margin-top: 80px; }
  .method__grid { grid-template-columns: 1fr; }
  .method__grid article { min-height: auto; }
  .method__grid h3 { margin-top: 15px; }
  .boundary { grid-template-columns: 1fr; padding: 27px 24px; gap: 19px; }
}