/* nanikiru 何切るアドバイザー — スタイル。牌の色/描画は play_ui/static/style.css から抽出。 */
:root {
  --tile-bg: #f6f0e0;
  --tile-edge: #d5cbb0;
  --tile-edge-dark: #c2b593;
  --tile-back: #2c6fb0;
  --man: #b5341f;
  --pin: #1b62a6;
  --sou: #1d7d3f;
  --honor: #2a2a2a;
  --tile-red: #e0202a;
  --shadow: rgba(0, 0, 0, 0.15);

  --bg: #12161c;
  --panel: #1b212b;
  --panel2: #222b37;
  --ink: #e8edf4;
  --muted: #9aa6b6;
  --line: #313c4b;
  --accent: #35c07a;
  --accent-ink: #04140b;
  --warn: #e0202a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 880px; margin: 0 auto; padding: 20px 16px 64px; }

header h1 { margin: 0 0 2px; font-size: 26px; letter-spacing: .02em; }
header h1 .dom { color: var(--accent); font-size: 15px; font-weight: 600; margin-left: 8px; }
header p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }

/* ---- モード切替タブ ---- */
.mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.tab { border: none; border-radius: 0; padding: 8px 24px; background: var(--panel); color: var(--muted); font-weight: 700; border-right: 1px solid var(--line); cursor: pointer; }
.tab:last-child { border-right: none; }
.tab.on { background: var(--accent); color: var(--accent-ink); }

/* ---- 練習モード ---- */
.q-instr { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.q-instr b { color: var(--ink); }
.hand.big { gap: 4px; align-items: flex-end; }
.hand.big .tile { --w: 42px; cursor: default; }
.hand .tile.selectable { cursor: pointer; transition: transform .08s; }
.hand .tile.selectable:hover { transform: translateY(-4px); }
.hand .tile.picked { outline: 2px solid var(--accent); outline-offset: 1px; }

.fb { font-size: 15px; font-weight: 600; padding: 12px 14px; border-radius: 10px; margin-bottom: 4px; line-height: 1.65; }
.fb.ok { background: #12351f; color: #b8f0cf; border: 1px solid #2f6f4a; }
.fb.near { background: #35300f; color: #f0e6a8; border: 1px solid #6f6320; }
.fb.bad { background: #3a1518; color: #f3c0c4; border: 1px solid #7a2e33; }
.fb.neutral { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
.fb.warn { background: #35300f; color: #f0e6a8; border: 1px solid #6f6320; }
.fb-head { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.fb-axes { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-axis { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fb-axis i { font-style: normal; color: var(--muted); font-weight: 600; margin-right: 6px; }
/* 順位で上位/下位を色分け */
.fb-axis.up { background: #12351f; border-color: #2f6f4a; color: #b8f0cf; }
.fb-axis.up i { color: #7fca9c; }
.fb-axis.down { background: #3a1518; border-color: #7a2e33; color: #f3c0c4; }
.fb-axis.down i { color: #cf8f95; }
.fb-note { margin-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.9; }
/* 打点ルートの後押しコメント（要求①②・選択牌が価値ルートの第一打のとき）。 */
.fb-vroute { margin-top: 8px; padding: 6px 9px; font-size: 12.5px; line-height: 1.6; border-radius: 8px; background: rgba(255, 224, 160, .10); border: 1px solid rgba(255, 224, 160, .25); color: #ffe0a0; }
/* インライン牌（文中の「打◯」・場風/自風・ベスト打牌）の整列 */
.fb .tile, .fb-note .tile { vertical-align: middle; }
.fb-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pv-main { display: inline-flex; align-items: center; gap: 3px; }

/* ---- 場況（ドラ表示牌・場風・自風・赤5） ---- */
.situation { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 12px; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; }
.situation:empty { display: none; }
.sit-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sit-lbl { color: var(--muted); font-size: 12px; }
.sit-val { font-weight: 800; }

.cand.you { border-color: #4aa3ff; }
.cand.you.best { box-shadow: 0 0 0 1px var(--accent) inset; }
.badge.you { background: #2f6dbf; color: #eaf3ff; }

/* ---- 難易度セレクタ ---- */
.diff-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }

/* ---- 未来分布パネル ---- */
.plan { margin-bottom: 14px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.plan:empty { display: none; }
.plan-loading { font-size: 13px; color: var(--muted); padding: 12px 14px; }

/* Phase 3: 解析進捗バー（段階 determinate ＋ 経過秒） */
.progress-wrap:empty { display: none; }
.prog { padding: 8px 14px 12px; }
.prog-track { height: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.prog-fill { height: 100%; width: 4%; background: linear-gradient(90deg, var(--accent), #7fe6b4); border-radius: 999px; transition: width .12s linear; }
.prog-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 11px; color: var(--muted); }
.prog-time { font-variant-numeric: tabular-nums; }
.plan-head { font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 12px 14px 0; }
.plan-head .muted { color: var(--muted); font-weight: 500; font-size: 11px; margin-left: 6px; }
.plan-bests { display: flex; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.pb { flex: 1; min-width: 96px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: center; }
.pl { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.pv { font-size: 18px; font-weight: 800; }
.plan-note { padding: 0 14px 8px; font-size: 12px; color: var(--muted); }
/* ---- 観点別ランキング（速度/良形/打点・1位=推奨） ---- */
.rank-axes { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 6px; }
.rax-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; margin-bottom: 4px; }
.rrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; font-size: 12px; }
.rrow.top { background: rgba(53, 192, 122, .10); }
.rnum { min-width: 30px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.rrow.top .rnum { color: var(--accent); }
.rtiles { display: inline-flex; gap: 2px; min-width: 44px; align-items: center; }
/* 観点別ターツ落としタグ（要求④・「速度重視なら○○払い」を推奨行に示す）。 */
.rtag { font-size: 11px; background: #4a3f22; color: #ffe0a0; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.rmet { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* 打点ルート（染め手など・向聴を戻して狙う手）カード（要求①②・§03）。 */
.vroutes { margin: 6px 14px 2px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 224, 160, .07); border: 1px solid rgba(255, 224, 160, .22); }
.vroutes-h { font-size: 12px; font-weight: 800; color: #ffe0a0; margin-bottom: 6px; }
.vroute { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
.vroute + .vroute { border-top: 1px dashed rgba(255, 224, 160, .18); }
.vr-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vr-label { font-weight: 700; }
.vr-cut { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.vr-met { font-size: 12px; color: var(--muted); }
.vr-tier { font-size: 10px; font-weight: 800; background: #5a3a2a; color: #ffcfa0; padding: 1px 6px; border-radius: 999px; }
.vroute.challenge .vr-label { color: #ffcfa0; }
.vr-fb { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.vr-fb.warn { color: #ffb0a0; }
.vroutes-sub { font-size: 11px; font-weight: 700; color: #ffcfa0; margin: 6px 0 2px; opacity: .85; }
.vroutes-note { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.plan-thin { font-size: 11.5px; color: var(--muted); margin: 2px 14px 4px; line-height: 1.5; }

.plan-factors { list-style: none; margin: 0; padding: 4px 14px 8px; display: flex; flex-direction: column; gap: 5px; }
.pf { font-size: 13px; display: flex; gap: 7px; align-items: baseline; }
.pfi { font-weight: 800; }
.pf.positive .pfi { color: var(--accent); }
.pf.negative .pfi { color: #ff8a8a; }
.pf.neutral { color: var(--muted); }
.plan-foot { padding: 0 14px 12px; font-size: 11px; color: var(--muted); }

/* Phase B B4: 役ルート見出し・打点/役の候補別内訳 */
.plan-route { margin: 8px 14px 2px; padding: 7px 10px; font-size: 13px; font-weight: 700; background: rgba(53, 192, 122, .12); border: 1px solid var(--accent); border-radius: 9px; color: #cfeede; }
.pv-sub { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.plan-sub { padding: 6px 14px 2px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.plan-cands { display: flex; flex-direction: column; gap: 4px; padding: 2px 14px 8px; }
.pc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pc-t { display: inline-flex; align-items: center; gap: 3px; min-width: 42px; font-weight: 700; }
.pc-v { min-width: 92px; font-weight: 700; color: #ffd479; }
.pc-v.none { color: var(--muted); font-weight: 500; }
.pc-y { display: flex; gap: 5px; flex-wrap: wrap; }
.ychip { font-size: 11px; background: #33405a; color: #d8e4ff; padding: 1px 8px; border-radius: 999px; }
.ychip.riichi { background: #4a3a5a; color: #e6d8ff; }
.ychip.dora { background: #5a4a1e; color: #ffe6a8; }

/* Phase 2b: 代表牌譜（テンパイ→和了の最頻ルート）＋打点役内訳 */
.examples:empty { display: none; }
.ex-loading { font-size: 12px; color: var(--muted); padding: 4px 14px 10px; }
.ex { margin: 4px 14px 8px; padding: 9px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ex-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ex-axis { font-size: 11px; font-weight: 800; background: var(--accent); color: var(--accent-ink); border-radius: 6px; padding: 1px 8px; }
.ex-freq { font-size: 11px; color: var(--muted); margin-left: auto; }
.ex-path, .ex-win { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin: 3px 0; }
.ex-lbl { font-size: 11px; color: var(--muted); margin-right: 2px; }
.ex-arrow { color: var(--muted); }
.ex-step { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; color: var(--muted); }
.ex-plus { color: var(--muted); margin: 0 1px; }
.ex-win .tile.win { outline: 2px solid var(--accent); outline-offset: 1px; }
.ex-score { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ex-score b { font-size: 16px; color: #ffd479; }

/* 役重視専念ラインカード（§4 L3・.ex を継承しつつ 🎯 アクセント）。 */
/* .vroute の amber 系配色トーンに合わせる: rgba(255,224,160,.07) 背景・amber ボーダー。 */
.ex-yline {
  background: rgba(255, 224, 160, .06);
  border-color: rgba(255, 224, 160, .28);
}
/* 役重視バッジ（ヘッダ内・通常の .ex-axis と区別するため amber 調にする）。 */
.ex-axis-yaku {
  background: rgba(255, 200, 80, .22);
  color: #ffe0a0;
  border: 1px solid rgba(255, 200, 80, .40);
}
/* ラベル（【清一色（索子）】など）。 */
.ex-yline-label {
  font-size: 12px;
  font-weight: 700;
  color: #ffe0a0;
}
/* 通常手向聴チップ（各ステップ下に「通常n」と表示）。 */
.ys-sh {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
  vertical-align: middle;
  margin-left: 2px;
}
/* コミットポイント（直前より向聴数が増えたステップ）。 */
.ys-sh.warn {
  background: rgba(224, 32, 42, .15);
  border-color: rgba(224, 32, 42, .45);
  color: #ffb0a0;
}
/* 通常手に戻れる余地あり（向聴数が基準以下）。 */
.ys-sh.ok {
  background: rgba(53, 192, 122, .12);
  border-color: rgba(53, 192, 122, .38);
  color: #b8f0cf;
}
/* フッタ注記（向聴チップの意味を説明）。 */
.ex-yline-note {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
  border-top: 1px solid rgba(255, 224, 160, .12);
  padding-top: 5px;
}

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.card h2 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

/* ---- 手牌エリア ---- */
.hand-row { display: flex; align-items: center; gap: 12px; min-height: 62px; }
.hand { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; align-items: flex-end; }
.hand:empty::before { content: "牌を選んでください"; color: var(--muted); font-size: 13px; }
.hand .tile { cursor: pointer; transition: transform .08s; }
.hand .tile:hover { transform: translateY(-3px); }
.hand-count { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--muted); white-space: nowrap; }
.hand-count b { color: var(--ink); font-size: 20px; }
.hand-count.full b { color: var(--accent); }

.controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
button { font: inherit; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); border-radius: 9px; padding: 8px 16px; cursor: pointer; }
button:hover { border-color: #4a5a6e; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
button.primary:disabled { background: var(--panel2); color: var(--muted); border-color: var(--line); }
.msg { color: var(--warn); font-size: 13px; }
.msg.ok { color: var(--muted); }

/* ---- 任意オプション（折りたたみ・既定は閉） ---- */
.options { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.options > summary { cursor: pointer; color: var(--muted); font-size: 13px; list-style: none; user-select: none; padding: 4px 0; }
.options > summary::-webkit-details-marker { display: none; }
.options > summary::before { content: "▸ "; }
.options[open] > summary::before { content: "▾ "; }
.options > summary:hover { color: var(--ink); }
.opts-body { padding: 10px 2px 2px; display: flex; flex-direction: column; gap: 12px; }
.opt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opt-label { font-size: 13px; color: var(--muted); min-width: 68px; }
.opt-none { font-size: 12px; color: var(--muted); }
.dora-list { display: flex; gap: 4px; align-items: center; min-height: 28px; }
.dora-list .tile { cursor: pointer; }
.mini { font-size: 12px; padding: 4px 10px; border-radius: 8px; }
.dora-picker { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.dora-picker .pick { cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn { border: none; border-radius: 0; padding: 5px 14px; background: var(--panel2); color: var(--muted); border-right: 1px solid var(--line); cursor: pointer; }
.seg-btn:last-child { border-right: none; }
.seg-btn.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* ---- 牌ピッカー ---- */
.picker { display: flex; flex-direction: column; gap: 8px; }
.picker-row { display: flex; gap: 4px; flex-wrap: wrap; }
.pick { cursor: pointer; position: relative; transition: transform .08s; }
.pick:hover { transform: translateY(-3px); }
.pick.dim { opacity: .32; pointer-events: none; }
.pick .used { position: absolute; top: -6px; right: -4px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; border-radius: 8px; padding: 0 4px; line-height: 15px; }

/* ---- 結果 ---- */
.results-empty { color: var(--muted); font-size: 13px; }
.summary { font-size: 14px; margin-bottom: 12px; color: var(--muted); }
.summary b { color: var(--ink); font-size: 16px; }

.cand { display: grid; grid-template-columns: 30px 46px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 8px; background: var(--panel2); }
.cand.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cand .rank { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.cand.best .rank { color: var(--accent); }
.cand .disc { display: flex; justify-content: center; }
.cand .body { min-width: 0; }
.cand .line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cand .verdict { font-weight: 700; font-size: 15px; }
.cand .badge { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.badge.rec { background: var(--accent); color: var(--accent-ink); }
.badge.sh0 { background: #2f6f4a; color: #d8ffe9; }
.badge.sh1 { background: #3a4a63; color: #cfe0ff; }
.badge.shx { background: #3a3f49; color: #c6cfdb; }
.metrics { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--muted); }
.metrics b { color: var(--ink); font-variant-numeric: tabular-nums; }
.waits { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.waits .lbl { font-size: 12px; color: var(--muted); }
.wait-item { display: flex; flex-direction: column; align-items: center; }
.wait-item .rem { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.yaku { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.yaku .chip { font-size: 11px; background: #33405a; color: #d8e4ff; padding: 1px 8px; border-radius: 999px; }
.yaku .chip.none { background: #3a3f49; color: var(--muted); }

/* =========================================================================
   牌（play_ui/static/style.css より抽出）。クラシック=自作SVG。
   ========================================================================= */
.tile {
  --w: 30px;
  position: relative;
  width: var(--w); height: calc(var(--w) * 1.36);
  background: var(--tile-bg);
  border: 1px solid var(--tile-edge);
  border-bottom: 3px solid var(--tile-edge-dark);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(var(--w) * 0.5); line-height: 1;
  color: var(--honor); user-select: none;
  box-shadow: 0 1px 2px var(--shadow);
}
.tile .num { font-size: calc(var(--w) * 0.62); }
.tile .suit { font-size: calc(var(--w) * 0.36); position: absolute; bottom: 1px; right: 3px; opacity: 1; font-weight: 800; }
.tile.m { color: var(--man); }
.tile.p { color: var(--pin); }
.tile.s { color: var(--sou); }
.tile.z { color: var(--honor); }
.tile.small { --w: 20px; }
.tile.tiny { --w: 16px; }
.tile:not(.back)::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 30%,
    rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.10) 100%);
}
body.tiles-classic .tile:not(.back)::after { inset: 3% 4% 4% 4%; border-radius: 13% / 10%; }
.tile-svg {
  display: none;
  font-family: var(--mj-kanji-font, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Source Han Serif JP", serif);
}
body.tiles-classic .tile-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
body.tiles-classic .tile { background: none; border: none; border-radius: 0; box-shadow: none; }
body.tiles-classic .tile > .num, body.tiles-classic .tile > .suit { display: none; }

@media (max-width: 560px) {
  .cand { grid-template-columns: 26px 42px 1fr; gap: 8px; }
  header h1 { font-size: 22px; }
}

/* ---- サイト共通フッター（全ページ） ---- */
footer.site { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
footer.site nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
footer.site nav a { color: var(--muted); text-decoration: none; }
footer.site nav a:hover { color: var(--ink); text-decoration: underline; }
footer.site .disclaimer { line-height: 1.75; margin: 0 0 6px; }
footer.site .copy { color: var(--line); }

/* ---- 法務・説明ページ ---- */
.legal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; font-size: 14px; line-height: 1.85; }
.legal > h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: .01em; }
.legal .lead { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.legal .updated { color: var(--muted); font-size: 12px; margin: 0 0 20px; }
.legal h2 { font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 28px 0 12px; }
.legal h3 { font-size: 14px; margin: 18px 0 6px; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); }
.legal .callout { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 8px; padding: 13px 15px; margin: 0 0 20px; }
.legal .callout.notice { border-left-color: var(--accent); }
.legal .callout p:last-child { margin-bottom: 0; }
.legal dl { margin: 0 0 12px; }
.legal dt { font-weight: 700; margin-top: 10px; }
.legal dd { margin: 2px 0 0; color: var(--ink); }
.backlink { display: inline-block; margin-bottom: 14px; color: var(--muted); font-size: 13px; text-decoration: none; }
.backlink:hover { color: var(--ink); }
/* 公開前に運営者が確定すべきプレースホルダ（草案の未確定箇所を可視化） */
.ph { color: #ffd27f; background: rgba(255, 210, 127, .1); padding: 0 4px; border-radius: 3px; font-style: normal; }