/* =========================================================
   Chapter 06 — 전기자전거 (page-specific styles)
   ========================================================= */

/* Hero stat strip */
.eb-stats { margin-top: 40px; }
.eb-stats .stat-label { max-width: 26ch; }

/* Generic two-column widget body */
.eb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 760px) { .eb-split { grid-template-columns: 1fr; } }

/* Segmented button group (radio-like chips) */
.eb-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.eb-seg .chip { padding: 7px 12px; font-size: .84rem; }
.eb-fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.eb-fieldset legend { font-size: .86rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.eb-range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.eb-range-head output { font-family: var(--mono); font-size: .88rem; color: var(--accent-ink); font-weight: 600; white-space: nowrap; }

/* ---------- Range calculator ---------- */
.eb-gauge { width: 100%; height: auto; margin: 14px 0 6px; }
.eb-gauge .shell { fill: none; stroke: color-mix(in srgb, var(--bg) 70%, transparent); stroke-width: 4; }
.eb-gauge .cap { fill: color-mix(in srgb, var(--bg) 70%, transparent); }
.eb-gauge .seg { fill: color-mix(in srgb, var(--bg) 14%, transparent); transition: fill .35s ease; }
.eb-gauge .seg.on { fill: var(--gauge, var(--green)); }
.eb-gauge .bolt { fill: var(--ink); opacity: .55; }
.eb-range-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.eb-range-figs div { border-top: 1px solid color-mix(in srgb, var(--bg) 25%, transparent); padding-top: 8px; }
.eb-range-figs b { display: block; font-family: var(--mono); font-size: 1rem; }
.eb-range-figs span { font-size: .75rem; }
.eb-mini-bars { display: grid; gap: 8px; margin-top: 16px; }
.eb-mini-bars .row { display: grid; grid-template-columns: 76px 1fr 44px; gap: 8px; align-items: center; font-size: .8rem; }
.eb-mini-bars .track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 15%, transparent); overflow: hidden; }
.eb-mini-bars .fill { height: 100%; width: 0; border-radius: 999px; transition: width .5s ease; }
.eb-mini-bars .v { font-family: var(--mono); text-align: right; }
.eb-note { font-size: .82rem; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* ---------- Assist curve chart ---------- */
.eb-chart { width: 100%; height: auto; }
.eb-chart .grid line { stroke: var(--line); stroke-width: 1; }
.eb-chart .axis { stroke: var(--line-2); stroke-width: 1.5; }
.eb-chart text { fill: var(--muted); font-size: 12px; font-family: var(--mono); }
.eb-chart .lbl { fill: var(--ink-2); font-family: var(--font); font-weight: 700; font-size: 12.5px; }
.eb-chart .cut { fill: var(--red-soft); opacity: .55; }
.eb-chart .s { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; transition: opacity .25s; }
.eb-chart .s-eco { stroke: var(--teal); }
.eb-chart .s-tour { stroke: var(--gold); }
.eb-chart .s-turbo { stroke: var(--accent); }
.eb-chart .s-c3 { stroke: var(--violet); stroke-dasharray: 7 6; }
.eb-chart .s.dim { opacity: .12; }
.eb-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.eb-legend .chip::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--c); }

/* ---------- Motor simulator ---------- */
.eb-bike { width: 100%; height: auto; }
.eb-bike .frame { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.eb-bike .thin { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.eb-bike .tyre { fill: none; stroke: var(--ink); stroke-width: 9; }
.eb-bike .spokes { stroke: var(--line-2); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: eb-spin 2.4s linear infinite; }
.eb-bike .batt { fill: var(--blue); }
.eb-bike .batt-t { fill: #fff; font: 700 11px var(--mono); }
.eb-bike .motor { fill: var(--accent); stroke: var(--surface); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1.3); }
.eb-bike .motor.on { opacity: 1; transform: none; }
.eb-bike .flow { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 9 9; animation: eb-dash .9s linear infinite; opacity: 0; transition: opacity .3s; }
.eb-bike .flow.on { opacity: 1; }
.eb-bike .flow-m { stroke: var(--accent); }
.eb-bike .flow-h { stroke: var(--teal); }
.eb-bike .cog { fill: var(--gold); stroke: var(--ink); stroke-width: 1.5; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.eb-bike .tag-t { font: 700 12px var(--font); fill: var(--ink-2); }
.eb-bike .ground { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 2 6; }
@keyframes eb-dash { to { stroke-dashoffset: -18; } }
@keyframes eb-spin { to { transform: rotate(360deg); } }

.eb-wd { margin: 14px 0 4px; }
.eb-wd-bar { display: flex; height: 26px; border-radius: 999px; overflow: hidden; font: 600 .78rem var(--mono); }
.eb-wd-bar span { display: grid; place-items: center; color: #fff; transition: flex-basis .5s ease; white-space: nowrap; overflow: hidden; }
.eb-wd-bar .f { background: var(--teal); }
.eb-wd-bar .r { background: var(--accent); }
.eb-wd-cap { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.eb-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.eb-pc h4 { font-size: .9rem; margin-bottom: 6px; }
.eb-pc ul { margin: 0; padding-left: 1.1em; font-size: .88rem; color: var(--ink-2); }
.eb-pc li { margin-bottom: .3em; }
.eb-pc .pro h4 { color: var(--green); }
.eb-pc .con h4 { color: var(--red); }
@media (max-width: 520px) { .eb-pc { grid-template-columns: 1fr; } }
.eb-score { display: grid; gap: 8px; margin-top: 16px; }
.eb-score .row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; font-size: .84rem; }
.eb-dots { display: flex; gap: 4px; }
.eb-dots i { flex: 1; height: 8px; border-radius: 3px; background: var(--bg-2); transition: background .3s; }
.eb-dots i.on { background: var(--accent); }

/* ---------- Battery anatomy ---------- */
.eb-pack { width: 100%; height: auto; }
.eb-pack [data-tip] { cursor: help; outline: none; }
.eb-pack .case { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 2; }
.eb-pack .cell { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 1.5; transition: fill .2s; }
.eb-pack .cell-top { fill: var(--teal); }
.eb-pack .group:hover .cell, .eb-pack .group:focus .cell { fill: var(--teal); }
.eb-pack .strip { fill: var(--gold); opacity: .8; }
.eb-pack .bms { fill: var(--green-soft); stroke: var(--green); stroke-width: 2; }
.eb-pack .chipx { fill: var(--green); }
.eb-pack .conn { fill: var(--ink-2); }
.eb-pack .wire-p { stroke: var(--red); stroke-width: 3; fill: none; }
.eb-pack .wire-n { stroke: var(--ink); stroke-width: 3; fill: none; }
.eb-pack text { font: 600 11.5px var(--font); fill: var(--ink-2); }
.eb-pack .mono { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.eb-pack [data-tip]:hover > .hl, .eb-pack [data-tip]:focus > .hl { stroke: var(--accent); stroke-width: 3; }
.eb-hint { font-size: .82rem; color: var(--muted); }

/* ---------- Cost / CO2 calculator ---------- */
.eb-assume { margin-top: 8px; }
.eb-assume summary { cursor: pointer; font-weight: 700; font-size: .9rem; padding: 10px 0; color: var(--ink-2); }
.eb-assume-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; padding-top: 6px; }
@media (max-width: 760px) { .eb-assume-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .eb-assume-grid { grid-template-columns: 1fr; } }
.eb-assume-grid .field label { font-size: .78rem; }
.eb-assume-grid .input { padding: 8px 10px; font-size: .9rem; }
.eb-cmp h4 { font-size: .95rem; margin: 18px 0 10px; }
.eb-cmp .bar-row { grid-template-columns: 96px 1fr 112px; }
.eb-cmp .bar-fill { transition: width .7s cubic-bezier(.2,.8,.2,1); }
.eb-cmp .bar-fill.e { background: var(--green); }
.eb-cmp .bar-fill.c { background: var(--red); }
.eb-cmp .bar-fill.t { background: var(--blue); }
@media (max-width: 640px) { .eb-cmp .bar-row { grid-template-columns: 70px 1fr 96px; } }
.eb-save { margin-top: 18px; }

/* Compact table helpers */
.eb-table td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Type cards */
.eb-types .card { padding: 22px; }
.eb-types svg { width: 100%; height: 72px; margin-bottom: 12px; color: var(--ink); }
.eb-types p { font-size: .93rem; color: var(--ink-2); }

/* Timeline */
.eb-tl { list-style: none; padding: 0 !important; margin: 1.6em 0; border-left: 2px solid var(--line); }
.eb-tl li { position: relative; padding: 0 0 18px 24px; margin: 0; }
.eb-tl li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); }
.eb-tl b { font-family: var(--mono); color: var(--accent-ink); margin-right: 8px; }