/* ---------------------------------------------------------------------------
   Design tokens — light is the base, dark is a selected set (not a flip).
   Values follow the validated reference palette.
--------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --surface-1:      #fcfcfb;   /* card / chart surface */
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --grid:           #e1e0d9;
  --axis:           #c3c2b7;
  --border:         rgba(11, 11, 11, .10);
  --input-ink:      #2a78d6;   /* "파란색 숫자" = 입력값 */
  --input-bg:       #f2f7fe;
  --assume-bg:      #fdf6e0;   /* "노란색 배경" = 핵심 가정 */
  --pos:            #006300;
  --neg:            #d03b3b;
  --status-good:    #0ca30c;
  --status-warning: #fab219;
  --status-critical:#d03b3b;

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;

  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --grid:           #2c2c2a;
    --axis:           #383835;
    --border:         rgba(255, 255, 255, .10);
    --input-ink:      #6da7ec;
    --input-bg:       #142132;
    --assume-bg:      #2c2718;
    --pos:            #0ca30c;
    --neg:            #e66767;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --page:           #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --grid:           #2c2c2a;
  --axis:           #383835;
  --border:         rgba(255, 255, 255, .10);
  --input-ink:      #6da7ec;
  --input-bg:       #142132;
  --assume-bg:      #2c2718;
  --pos:            #0ca30c;
  --neg:            #e66767;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--page);
  color: var(--text-primary);
  font-size: 15.3px;
  line-height: 1.55;
}

/* ------------------------------- chrome -------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 9px;
  background: var(--series-1); color: #fff;
  font-weight: 700; letter-spacing: .02em;
}
.topbar h1 { margin: 0; font-size: 17.3px; font-weight: 650; letter-spacing: -.01em; }
.brand-sub { margin: 0; font-size: 13.3px; color: var(--text-secondary); }
.topbar-actions { display: flex; gap: 8px; flex: none; }

.btn {
  font: inherit; font-size: 14.3px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-secondary);
  cursor: pointer;
}
.btn:hover { color: var(--text-primary); border-color: var(--axis); }
.btn-icon { width: 34px; padding: 6px 0; text-align: center; }

.tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 0 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 65px; z-index: 19;
}
.tab {
  font: inherit; font-size: 14.3px;
  padding: 9px 13px;
  border: none; background: none; cursor: pointer;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"] { color: var(--series-1); border-bottom-color: var(--series-1); font-weight: 600; }

.view { padding: 22px 24px 40px; max-width: 1500px; margin: 0 auto; }
.footer {
  padding: 16px 24px 32px; max-width: 1500px; margin: 0 auto;
  color: var(--text-muted); font-size: 13.3px;
}

/* -------------------------------- cards -------------------------------- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.card > h2 {
  margin: 0 0 2px; font-size: 16.3px; font-weight: 650; letter-spacing: -.01em;
}
.card > .card-sub { margin: 0 0 14px; font-size: 13.8px; color: var(--text-secondary); }
.card > h2:last-child, .card > .card-sub:last-child { margin-bottom: 0; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.grid-2 > .card { margin-bottom: 0; }

.note {
  margin-top: 14px; padding: 11px 13px;
  border-left: 3px solid var(--series-1);
  background: var(--input-bg);
  border-radius: 0 8px 8px 0;
  font-size: 13.8px; color: var(--text-secondary);
}
.note b { color: var(--text-primary); }

/* -------------------------------- tables ------------------------------- */
.table-scroll { overflow-x: auto; margin: 0 -2px; }
table { border-collapse: collapse; width: 100%; font-size: 14.3px; }
th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--grid); vertical-align: middle; }
thead th {
  font-size: 12.8px; font-weight: 600; color: var(--text-muted);
  text-transform: none; white-space: pre-line;
  border-bottom: 1px solid var(--axis); background: var(--surface-1);
}
tbody tr:last-child td { border-bottom: none; }
tr.total td { border-top: 1px solid var(--axis); font-weight: 650; background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.name { color: var(--text-secondary); }
td.wide { min-width: 260px; font-size: 13.8px; color: var(--text-secondary); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--text-muted); }

/* key/value list used by 개요 & 입력 blocks */
.kv { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 4px 18px; }
.kv dt { color: var(--text-secondary); font-weight: 600; font-size: 13.8px; }
.kv dd { margin: 0; font-size: 13.8px; color: var(--text-secondary); }

/* -------------------------------- inputs ------------------------------- */
.field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0; }
.field > label { color: var(--text-secondary); font-size: 13.8px; }
input[type="number"], input[type="text"], select {
  font: inherit; font-size: 14.3px;
  color: var(--input-ink); font-weight: 600;
  background: var(--input-bg);
  border: 1px solid color-mix(in srgb, var(--input-ink) 30%, transparent);
  border-radius: 7px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}
/* 숫자 입력은 type="text" + data-num 이다 (캐럿 복원 때문에 — views.js inp() 참고) */
input[data-num] { width: 116px; text-align: right; }
input.cell { width: 88px; padding: 3px 6px; }
input.cell-sm { width: 76px; padding: 3px 5px; font-size: 13.3px; }
input[type="text"]:not([data-num]) { min-width: 180px; }
select { font-weight: 600; }
input:focus, select:focus { outline: 2px solid var(--series-1); outline-offset: 1px; }
.assume { background: var(--assume-bg); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.3px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border);
}
.badge-good { color: var(--status-good); }
.badge-warn { color: var(--status-warning); }
.badge-crit { color: var(--status-critical); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat {
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  background: color-mix(in srgb, var(--text-primary) 2%, transparent);
}
.stat-label { font-size: 12.8px; color: var(--text-muted); }
.stat-value { font-size: 21.3px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
.stat-hint { font-size: 12.8px; color: var(--text-secondary); }

/* ------------------------------- charts -------------------------------- */
.chart-wrap { position: relative; margin-top: 6px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; font-size: 13.3px; color: var(--text-secondary); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-legend i.dash { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
svg.chart text { font-family: var(--font); }
.tick { fill: var(--text-muted); font-size: 11.8px; }
.tick.num { font-variant-numeric: tabular-nums; }
.gridline { stroke: var(--grid); stroke-width: 1; }
.baseline { stroke: var(--axis); stroke-width: 1; }
.crosshair { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; }
.serie-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.serie-label { font-size: 12.3px; font-weight: 600; }
/* 곡선 위에 겹쳐도 읽히도록 배경색 테두리를 먼저 칠한다 */
.halo { paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round; }
.group-label { font-weight: 600; fill: var(--text-secondary); }
.tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--surface-1); border: 1px solid var(--axis);
  border-radius: 8px; padding: 7px 10px;
  font-size: 13.3px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transform: translate(-50%, -110%);
  opacity: 0; transition: opacity .08s;
}
.tooltip.on { opacity: 1; }
.tooltip .tt-title { font-weight: 650; margin-bottom: 3px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); }
.tooltip .tt-row i { width: 9px; height: 9px; border-radius: 2px; }
.tooltip .tt-row b { margin-left: auto; color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 600; }

/* =========================================================================
   v10 단순화(4탭) 추가 컴포넌트
   ========================================================================= */

/* 차트 시리즈 별칭 — 6색까지 확장 */
:root {
  --c1: var(--series-1);
  --c2: var(--series-2);
  --c3: var(--series-3);
  --c4: var(--series-4);
  --c5: #7b61c4;
  --c6: var(--neg);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { --c5: #9d86e0; }
}
:root[data-theme="dark"] { --c5: #9d86e0; }

/* -------------------------------- 버튼 --------------------------------- */
.btn-primary {
  background: var(--series-1); color: #fff;
  border-color: color-mix(in srgb, var(--series-1) 70%, #000);
  font-weight: 600;
}
.btn-primary:hover { color: #fff; filter: brightness(1.08); }
.btn-sm { font-size: 13.3px; padding: 4px 9px; }
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { color: var(--neg); border-color: var(--neg); }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-head > div { min-width: 0; }
.card-head h2 { margin: 0 0 2px; font-size: 16.3px; font-weight: 650; letter-spacing: -.01em; }
.card-head .card-sub { margin: 0 0 14px; font-size: 13.8px; color: var(--text-secondary); }

/* ------------------------------ 개요 히어로 ----------------------------- */
.hero .timeline-bar { display: flex; gap: 3px; margin-top: 14px; }
.tl-seg {
  flex: 1; padding: 9px 11px; border-radius: 7px;
  display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border-left: 3px solid var(--axis);
}
.tl-seg b { font-size: 13.8px; }
.tl-seg span { font-size: 12.8px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tl-a { border-left-color: var(--c1); }
.tl-b { border-left-color: var(--c3); }
.tl-c { border-left-color: var(--c4); }
.tl-d { border-left-color: var(--c2); flex: 1.2; }

/* ------------------------------- 표 확장 -------------------------------- */
table.matrix td { font-size: 13.8px; vertical-align: top; }
/* 약어 아래 원어·부연을 한 단 작게 */
.cell-sub {
  display: block; margin-top: 1px;
  font-size: 11.8px; font-weight: 400; color: var(--text-muted);
}
/* 범례에서 '파란색 입력칸' 자체를 입력칸처럼 보이게 */
.lg-input {
  color: var(--input-ink); background: var(--input-bg);
  border: 1px solid color-mix(in srgb, var(--input-ink) 30%, transparent);
  border-radius: 6px; padding: 1px 7px;
}
table.matrix td.name { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
table.matrix td.accent { color: var(--c5); font-weight: 600; }
table.matrix td.warn-cell { color: var(--status-warning); font-weight: 600; }
table.matrix td.pos { font-weight: 600; }
table.matrix td.neg { font-weight: 600; }

table.dense th, table.dense td { padding: 3px 4px; font-size: 12.8px; }
input.mini { width: 62px; padding: 2px 4px; font-size: 12.8px; }

th.grp { text-align: center; border-bottom: 1px solid var(--grid); font-weight: 600; }
th.sub, td.sub { color: var(--text-muted); }
th.sep, td.sep { border-left: 1px solid var(--axis); }
td.strong { font-weight: 650; }
th.col-mark   { color: var(--c1); }
th.col-decide { color: var(--c5); font-weight: 700; }
th.col-ship   { color: var(--c2); }
th.th-sub, .th-sub { font-weight: 400; color: var(--text-muted); font-size: 11.8px; }

tr.row-active td { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
tr.row-total td, tfoot tr.row-total td {
  border-top: 1px solid var(--axis); font-weight: 650;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
tr.row-sub td { font-weight: 600; }
tr.row-dim td { color: var(--text-muted); font-size: 13.3px; }
tr.row-gap td { padding: 3px 0; border-bottom: none; }
tr.tl-row-decide td { background: color-mix(in srgb, var(--c5) 8%, transparent); font-weight: 600; }
tr.tl-row-roll td   { background: color-mix(in srgb, var(--c4) 8%, transparent); }

/* 타임라인 표 — 본문보다 1pt 크게, 주차 열은 내용 폭에 맞춰 좁게 */
table.timeline-table { font-size: 15.6px; }
table.timeline-table th.tl-week,
table.timeline-table td.tl-week { width: 1%; white-space: nowrap; padding-right: 22px; }
/* 용어집의 Full Name 열 — 코드가 아니라 영문 용어라 본문 글꼴을 그대로 쓴다.
   monospace 로 두면 같은 행의 다른 칸과 글자 모양이 어긋나 읽기 나쁘다. */
td.mono { font-size: 13.3px; color: var(--text-secondary); }

/* 문단 안의 수식 — 글꼴·크기는 본문 그대로 두고 옅은 배경으로만 구분한다.
   monospace 로 두면 한 문단 안에서 글자 모양이 튀어 이질적으로 읽힌다. */
code {
  font-family: inherit; font-size: inherit; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  border-radius: 5px; padding: 1px 6px;
  /* 한 덩어리로 넘긴다 — 중간에서 끊기면 배경이 두 조각으로 갈라져 지저분하다.
     좁은 화면에서는 넘침이 더 나쁘므로 아래 미디어 쿼리에서 푼다. */
  white-space: nowrap;
}

/* Exposure 현황판 — 물량·가격·Hedge 세 블록이라 열이 많다.
   width:100% 로 두면 칸마다 글자가 세로로 쪼개지므로, 내용 폭을 지키고 가로로 스크롤한다. */
table.board { width: max-content; min-width: 100%; }
table.board th, table.board td { white-space: nowrap; padding: 6px 7px; }
table.board input.cell { width: 58px; }
table.board select { padding: 3px 5px; font-size: 13.3px; }
/* 기법 칸의 최소폭을 풀어 E2 열이 화면 안에 들어오게 한다 — 경고는 아래로 흐른다 */
table.board /* 행 추가 · 삭제 열 — 요약 현황판 오른쪽 끝에서만 행 구성을 만진다 */
th.row-ctl, td.row-ctl { width: 1%; padding-left: 4px; padding-right: 4px; text-align: center; }
td.row-ctl .btn { padding: 2px 7px; line-height: 1.2; }

td.hedge-cell { min-width: 0; }
table.board .warn-inline { white-space: normal; max-width: 150px; }
table.board td.wide { white-space: normal; }
table.board td.wide input[type="text"] { min-width: 150px; width: 100%; }

td.hedge-cell { min-width: 170px; }
.warn-inline { margin-top: 3px; font-size: 12.3px; color: var(--status-warning); max-width: 210px; }

/* ------------------------- 대응 수단 배지 색상 --------------------------- */
.hk-none    { color: var(--text-muted); }
.hk-pass    { color: var(--c4); }
.hk-forward { color: var(--c3); }
.hk-future  { color: var(--c2); }
.hk-lcm     { color: var(--c5); }
.hk-cur     { color: var(--c1); }

/* -------------------------------- 기타 --------------------------------- */
.alert {
  margin-top: 12px; padding: 11px 13px; border-radius: 8px;
  border-left: 3px solid var(--neg);
  background: color-mix(in srgb, var(--neg) 9%, transparent);
  font-size: 13.8px; color: var(--text-secondary);
}
.alert b { color: var(--text-primary); }

.inline-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 20px; margin-bottom: 14px;
}
.field-hint { flex-basis: 100%; font-size: 12.3px; color: var(--text-muted); text-align: right; }
.field { flex-wrap: wrap; }

.chart-foot { margin: 6px 0 0; font-size: 12.8px; color: var(--text-muted); }

/* 표 위 도구 줄 (가격표 CSV 왕복) */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.toolbar-hint { font-size: 12.3px; color: var(--text-muted); }
.file-btn { display: inline-flex; align-items: center; cursor: pointer; }
/* 입력칸과 같은 파란 톤 — 손댈 수 있는 것임을 한눈에 */
.btn-input {
  color: var(--input-ink); background: var(--input-bg); font-weight: 600;
  border-color: color-mix(in srgb, var(--input-ink) 35%, transparent);
}
.btn-input:hover {
  color: var(--input-ink);
  border-color: var(--input-ink);
  background: color-mix(in srgb, var(--input-ink) 14%, var(--input-bg));
}

/* Hedge 파라미터 — 3열 × 2줄 */
.sub-head {
  margin: 18px 0 8px; font-size: 13.8px; font-weight: 650;
  color: var(--text-secondary);
  padding-top: 14px; border-top: 1px solid var(--grid);
}
.param-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px 24px; margin-bottom: 14px;
}
@media (max-width: 1100px) { .param-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .param-grid { grid-template-columns: 1fr; } }

/* 읽기 전용 메모 표 — 손익표와 단위가 달라 구분되게 */
table.memo { font-size: 13.3px; }
table.memo td, table.memo th { color: var(--text-secondary); }
table.memo tr.row-key td { color: var(--text-primary); }

/* 손익표에서 가장 중요한 3행 */
tr.row-key td {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  font-weight: 650;
  border-top: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
}

details.fold { margin-top: 14px; border-top: 1px solid var(--grid); padding-top: 10px; }
details.fold > summary {
  cursor: pointer; font-size: 15.3px; color: var(--text-secondary);
  font-weight: 600; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
}
/* 접기/펼치기 표시 — 눌러야 할 곳임이 보이되 글자를 누르지 않을 만큼만 */
details.fold > summary::before {
  content: "▶"; color: var(--series-1);
  font-size: 17px; line-height: .8; width: 16px; text-align: center;
}
details[open].fold > summary::before { content: "▼"; }
details.fold > summary:hover { color: var(--text-primary); }
details.fold > summary:hover::before { filter: brightness(1.25); }
details.fold > .table-scroll, details.fold > div { margin-top: 10px; }

/* ------------------- 세로로 긴 탭의 좌측 목차 (북마크) ------------------- */
.sec-layout {
  display: grid; grid-template-columns: 186px minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.sec-body { min-width: 0; }
/* topbar(약 65px) + tabs(약 39px) 아래에 붙는다 */
.sec-nav {
  position: sticky; top: 116px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-1);
}
.sec-link {
  display: block; padding: 5px 10px; border-radius: 7px;
  font-size: 13.3px; color: var(--text-secondary); text-decoration: none;
  border-left: 2px solid transparent;
}
.sec-link:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.sec-link.on {
  color: var(--series-1); font-weight: 650;
  border-left-color: var(--series-1);
  background: var(--input-bg);
}
/* 앵커로 건너뛸 때 sticky 헤더에 가리지 않게 */
.sec-body > .card { scroll-margin-top: 120px; }

@media (max-width: 980px) {
  .sec-layout { grid-template-columns: 1fr; }
  .sec-nav { display: none; }
}

/* --------------------- 표 앞에 붙는 Lead message ------------------------ */
.lead-block {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 14px;
  padding: 10px 13px; border-radius: 0 8px 8px 0;
  border-left: 3px solid var(--series-1);
  background: var(--input-bg);
}
.lead-label {
  flex: none; font-size: 12.3px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
/* 위쪽 input[type="text"]:not([data-num]) 의 min-width 를 눌러야 해서 같은 무게로 쓴다 */
input[type="text"].lead-input {
  flex: 1 1 320px; min-width: 0;
  font-size: 15.3px; font-weight: 600;
  background: transparent; border-color: transparent;
}
input[type="text"].lead-input:hover { border-color: color-mix(in srgb, var(--input-ink) 30%, transparent); }
.lead-hint { flex-basis: 100%; font-size: 12.3px; color: var(--text-muted); }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .tabs { top: 0; position: static; padding: 0 12px; }
  .view { padding: 16px 12px 32px; }
  .card { padding: 14px; }
  .hero .timeline-bar { flex-direction: column; }
  .card-head { flex-direction: column; }
  /* 좁은 화면에서는 수식이 통째로 넘치느니 줄바꿈되는 편이 낫다 */
  code { white-space: normal; }
}