@charset "UTF-8";
/* ============================================================
   ツーリング拠点マップ — 共通スタイル
   トークンは :root（ライト）／dark メディア／[data-theme] の3系統で定義する。
   色は必ずトークン経由で参照し、メディアクエリの中で直接指定しない。
   ============================================================ */

:root{
  --ground:#e9edf2;
  --surface:#ffffff;
  --surface-2:#f3f6f9;
  --sunken:#dde4ea;
  --ink:#14202b;
  --ink-2:#3d4d5c;
  --muted:#61707e;
  --line:#c7d2dc;
  --line-soft:#dbe3ea;
  --accent:#b8781c;
  --accent-bright:#d9932a;
  --accent-ink:#ffffff;
  --c-netcafe:#2f6c9e;
  --c-camp:#2c7a52;
  --c-parking:#bf4f2c;
  --c-route:#7a4f96;
  /* 快走路の線は地図キャンバスに描くため、ダークテーマでは canvas 全体に掛かる
     --map-filter（invert + hue-rotate 180）を一緒に浴びる。だからこの2色だけは
     テーマで切り替えず、淡色地図と同じ変換に委ねる。
     #7a4f96 はフィルタ後に #a889bc（明るい紫）、白の縁取りは黒寄りになり、
     どちらのテーマでも地図の上で線が読める。ここを dark 側で上書きしないこと。 */
  --c-route-line:#7a4f96;
  --c-route-casing:#ffffff;
  --shadow:0 1px 2px rgba(20,32,43,.06),0 8px 24px -12px rgba(20,32,43,.24);
  --shadow-lift:0 2px 6px rgba(20,32,43,.10),0 18px 40px -18px rgba(20,32,43,.36);
  --map-filter:none;
  --r:10px;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --disp:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* 地理院のラスタタイルは配色を変えられないため、ダーク時は canvas だけ
   反転させる暫定処置。ベクタータイル（optimal_bvmap）へ移行したら
   --map-filter を none に戻し、スタイル JSON 側で配色を作る。 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0d141b;
    --surface:#151f29;
    --surface-2:#1b2733;
    --sunken:#0a1017;
    --ink:#e6edf3;
    --ink-2:#c2cfda;
    --muted:#8ea0b0;
    --line:#28363f;
    --line-soft:#1f2c36;
    --accent:#f0b54a;
    --accent-bright:#f7c869;
    --accent-ink:#1a1204;
    --c-netcafe:#5fa3d8;
    --c-camp:#4fb383;
    --c-parking:#e58058;
    --c-route:#b184cf;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.55),0 18px 40px -18px rgba(0,0,0,.8);
    --map-filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.85);
  }
}
:root[data-theme="dark"]{
  --ground:#0d141b;
  --surface:#151f29;
  --surface-2:#1b2733;
  --sunken:#0a1017;
  --ink:#e6edf3;
  --ink-2:#c2cfda;
  --muted:#8ea0b0;
  --line:#28363f;
  --line-soft:#1f2c36;
  --accent:#f0b54a;
  --accent-bright:#f7c869;
  --accent-ink:#1a1204;
  --c-netcafe:#5fa3d8;
  --c-camp:#4fb383;
  --c-parking:#e58058;
  --c-route:#b184cf;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55),0 18px 40px -18px rgba(0,0,0,.8);
  --map-filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--disp);margin:0;text-wrap:balance;line-height:1.35}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kicker{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px;
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}
[hidden]{display:none !important}

.shell{max-width:1320px;margin:0 auto;padding:0 24px 64px}

/* ---------- ヘッダー ---------- */
.topbar{display:flex;align-items:center;gap:20px;padding:20px 0 18px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-mark{
  width:34px;height:34px;flex:none;border-radius:9px;
  background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
}
.brand-mark svg{width:19px;height:19px}
.brand-name{font-family:var(--disp);font-weight:900;font-size:16.5px;letter-spacing:.02em;line-height:1.2}
.brand-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--muted);display:block}
.topnav{display:flex;gap:22px;margin-left:auto;font-size:13px}
.topnav a{text-decoration:none;color:var(--ink-2);padding-bottom:2px;border-bottom:1px solid transparent}
.topnav a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- ヒーロー ---------- */
.hero{padding:34px 0 26px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:end}
.hero h1{font-size:clamp(25px,3vw,36px);font-weight:900}
.hero-copy{font-size:13.5px;color:var(--ink-2);line-height:1.9}
.hero-stats{display:flex;gap:26px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats .num{font-size:20px;font-weight:500}
.hero-stats small{font-size:10.5px;color:var(--muted);letter-spacing:.04em}

/* ---------- ワークスペース ---------- */
.workspace{display:grid;grid-template-columns:296px minmax(0,1fr);gap:16px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}

.rail{padding:18px;position:sticky;top:16px;display:flex;flex-direction:column;gap:18px}
.rail h2{font-size:14.5px;font-weight:700}

.seg{display:flex;padding:3px;background:var(--sunken);border-radius:9px;gap:3px}
.seg button{flex:1;border:0;background:none;cursor:pointer;border-radius:6px;padding:8px 4px;font-size:12.5px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface);box-shadow:var(--shadow)}
#mode-regional[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

.field{display:flex;flex-direction:column;gap:7px}
.label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.hint{font-size:11.5px;color:var(--muted);line-height:1.65}

select{
  appearance:none;width:100%;padding:10px 34px 10px 12px;font:inherit;font-size:13.5px;
  background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select:disabled{opacity:.45;cursor:not-allowed}

/* 地方版のときだけ、切替ボタンと同じ琥珀で地方選択パネルを染める */
.regionbox{
  padding:11px 12px;border-radius:9px;border:1px solid var(--line-soft);background:var(--surface-2);
  transition:background .18s ease,border-color .18s ease;
}
.regionbox.is-active{
  border-color:color-mix(in srgb,var(--accent) 50%,var(--line));
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
}
.regionbox.is-active .label{color:var(--accent)}
.regionbox.is-active select{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--surface)}

/* ---------- カテゴリ ---------- */
.cats{display:flex;flex-direction:column;gap:7px}
.cat{
  --c:var(--muted);
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;
  width:100%;text-align:left;cursor:pointer;padding:10px 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);
  transition:border-color .15s,background .15s;
}
.cat:hover:not(:disabled){border-color:var(--c)}
.cat[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,var(--surface))}
.cat:disabled{opacity:.5;cursor:not-allowed}
.cat-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,var(--surface));color:var(--c)}
.cat[aria-pressed="true"] .cat-ico{background:var(--c);color:var(--surface)}
.cat-ico svg{width:16px;height:16px}
.cat-name{font-size:13px;font-weight:700;line-height:1.4}
.cat-src{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.cat-count{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cat[aria-pressed="true"] .cat-count{color:var(--c)}

.locate{
  width:100%;padding:11px;border-radius:9px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;
}
.locate:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.locate svg{width:15px;height:15px}
.locate-msg{font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:7px}
.locate-msg button{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);text-decoration:underline;font-size:inherit}
.rail-note{font-size:11px;color:var(--muted);line-height:1.7;padding-top:14px;border-top:1px solid var(--line-soft)}

/* ---------- 地図 ---------- */
.mappanel{overflow:hidden;display:flex;flex-direction:column}
.maphead{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.maphead h2{font-size:14.5px;font-weight:700}
.maphead p{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.badge{margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:5px;background:var(--sunken);color:var(--muted)}

.map{position:relative;height:min(74vh,720px);min-height:440px;background:var(--surface-2)}
/* 反転はタイル画像にだけ掛ける。マーカーは canvas の外にあるので影響しない */
.maplibregl-canvas{filter:var(--map-filter)}

.map-loading{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);
}

/* ---------- マーカー ---------- */
/* MapLibre は与えた要素そのものに transform を掛けるため、
   位置決め用の外枠と見た目用の中身を分ける。 */
.pin-wrap{will-change:transform}
.pin{
  width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;display:grid;place-items:center;
  border:2px solid var(--surface);background:var(--c,var(--muted));color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .12s ease;
}
.pin svg{width:13px;height:13px}
.pin:hover{transform:scale(1.2)}
.pin.is-selected{transform:scale(1.28);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 55%,transparent),0 2px 5px rgba(0,0,0,.3)}
.pin.is-cluster{
  width:36px;height:36px;background:var(--surface);color:var(--ink);
  border:1.5px solid var(--line);font-family:var(--mono);font-size:12px;font-weight:500;
  box-shadow:var(--shadow-lift);position:relative;
}
.pin.is-cluster::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:2px solid var(--c);opacity:.55}
.pin.is-me{width:16px;height:16px;background:var(--accent);border-color:var(--surface);cursor:default;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 28%,transparent)}

/* ---------- ポップアップ（MapLibre 既定の見た目を上書き） ---------- */
.maplibregl-popup-content{
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-top:3px solid var(--c,var(--accent));border-radius:9px;
  box-shadow:var(--shadow-lift);padding:13px 32px 13px 14px;font-family:var(--sans);
}
.maplibregl-popup-tip{display:none}
.maplibregl-popup-close-button{
  width:24px;height:24px;font-size:16px;line-height:1;color:var(--muted);
  border-radius:5px;right:5px;top:5px;background:none;border:0;
}
.maplibregl-popup-close-button:hover{background:var(--surface-2);color:var(--ink)}
.popup-cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--c,var(--accent))}
.popup h3{font-size:14.5px;font-weight:700;margin:3px 0 8px}
.popup dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;margin:0 0 9px;font-size:11.5px;line-height:1.6}
.popup dt{color:var(--muted);white-space:nowrap}
.popup dd{margin:0;color:var(--ink-2)}
.popup .tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px}
.popup .tags span{font-size:10.5px;padding:2px 7px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line-soft);color:var(--ink-2)}
.popup-foot{display:flex;align-items:center;gap:12px;padding-top:9px;border-top:1px solid var(--line-soft);font-size:11.5px}
.popup-foot a{color:var(--accent);text-decoration:none;font-weight:700}
.popup-foot a:hover{text-decoration:underline}
.popup .coord{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:auto}

/* ---------- SP 用カテゴリバー ---------- */
.spbar{display:none}
.spchip{
  --c:var(--muted);display:flex;align-items:center;gap:7px;cursor:pointer;width:100%;
  padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  font-size:12px;font-weight:700;white-space:nowrap;text-align:left;
}
.spchip[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface));color:var(--c)}
.spchip:disabled{opacity:.45}
.spchip svg{width:14px;height:14px;flex:none}
.spchip span:not(.num){overflow:hidden;text-overflow:ellipsis}
.spchip .num{margin-left:auto;font-weight:400;font-size:11px;opacity:.75}

/* ---------- 下段 ---------- */
.below{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
.block{padding:18px}
.block-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.block-head h2{font-size:15px;font-weight:700}
.block-head p{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}

.spots{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:8px}
.spot{
  --c:var(--muted);display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  text-align:left;cursor:pointer;padding:10px 11px;
  border:1px solid var(--line);border-left:3px solid var(--c);border-radius:8px;background:var(--surface);
}
.spot:hover{background:var(--surface-2)}
.spot-ico{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,var(--surface));color:var(--c)}
.spot-ico svg{width:12px;height:12px}
.spot strong{display:block;font-size:12.5px;font-weight:700;line-height:1.45}
.spot span{display:block;font-size:11px;color:var(--muted);line-height:1.6}
.spot .km{font-family:var(--mono);color:var(--accent)}
.empty{padding:30px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.9}

.adslot{
  min-height:238px;max-width:336px;margin:0 auto;
  border:1px dashed var(--line);border-radius:8px;display:grid;place-items:center;background:var(--surface-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);text-align:center;padding:10px;line-height:1.9;
}
.promo-note{margin-top:14px;font-size:11.5px;color:var(--muted);line-height:1.8}

/* ---------- 法的リンク帯 ---------- */
.legal{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px;align-items:start;
}
.legal h2{font-size:13px;font-weight:700;margin-bottom:6px}
.legal p{font-size:11.5px;color:var(--muted);line-height:1.9;max-width:78ch}
.legal .kicker{margin:0;padding-top:2px}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
.legal-links a{font-size:11.5px;font-weight:700;color:var(--accent);text-decoration:none}
.legal-links a:hover{text-decoration:underline}

/* ---------- 単独ページ（免責事項ほか） ---------- */
.page{max-width:70ch;margin:0 auto;padding:32px 0 24px}
.page-back{display:inline-block;margin-bottom:22px;font-size:12px;font-weight:700;color:var(--accent);text-decoration:none}
.page-back:hover{text-decoration:underline}
.page h1{font-size:clamp(21px,2.4vw,27px);font-weight:900;margin-bottom:20px}
.page h2{font-size:15px;font-weight:700;margin:26px 0 10px}
.page p{font-size:13.5px;line-height:2.05;color:var(--ink-2);margin-bottom:16px}
.page-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);padding-top:14px;border-top:1px solid var(--line-soft)}
.page-status{
  font-size:12.5px;font-weight:700;color:var(--ink);
  background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--line));
  border-radius:8px;padding:11px 14px;margin-bottom:20px;
}
.todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.todo li{position:relative;padding-left:26px;font-size:12.5px;line-height:1.85;color:var(--ink-2)}
.todo li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border:1.5px solid var(--line);border-radius:3px}
.todo b{color:var(--ink)}

/* ---------- フッター ---------- */
.foot{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;font-size:11.5px;color:var(--muted);
}
.foot-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:20px}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* ============================================================
   スマートフォン — 現地で使う前提のため地図を最上部に置く
   ============================================================ */
@media (max-width:900px){
  .shell{padding:0 12px 40px}
  /* ブランドとナビを1行に詰めるとリンクが1文字ずつ折り返るので、ナビを2行目へ送る */
  .topbar{padding:14px 0 12px;gap:10px 12px;flex-wrap:wrap}
  .topnav{
    margin-left:0;width:100%;gap:18px;font-size:12px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{white-space:nowrap}
  .hero{grid-template-columns:1fr;gap:16px;padding:20px 0 18px}
  .hero h1{font-size:22px}

  .workspace{grid-template-columns:1fr;gap:10px}
  .mappanel{order:1}
  .rail{position:static;order:2;padding:14px}
  .rail .cats-wrap{display:none}      /* カテゴリは地図直下のバーへ集約 */
  .map{height:52vh;min-height:320px}
  .maphead{padding:10px 12px}
  .badge{display:none}

  /* minmax(0,1fr) にしないと、長いラベルの列だけが広がって2列が揃わない */
  .spbar{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;padding:9px 11px;
    border-top:1px solid var(--line);background:var(--surface-2);
  }

  .below{grid-template-columns:1fr;gap:10px;margin-top:10px}
  .spots{grid-template-columns:1fr}
  .legal{grid-template-columns:1fr;gap:4px;margin-top:24px}
  .foot{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-links{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ============================================================
   検証用ページの告知バー（preview/ でのみ使う）
   ============================================================ */
.previewbar{
  margin:14px 0 0;padding:10px 14px;border-radius:8px;
  background:color-mix(in srgb,var(--accent) 14%,var(--surface));
  border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));
  font-size:12px;line-height:1.8;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
}
.previewbar b{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--accent-ink);background:var(--accent);padding:3px 8px;border-radius:4px;flex:none;
}
.previewbar a{color:var(--accent);font-weight:700;margin-left:auto}

/* ============================================================
   工事中の仮トップページ
   ============================================================ */
.wip{max-width:64ch;margin:0 auto;padding:64px 0 48px;text-align:center}
.wip .kicker{margin-bottom:10px}
.wip h1{font-family:var(--disp);font-size:clamp(26px,3.4vw,40px);font-weight:900;margin-bottom:24px}
.wip-lead{font-size:13.5px;line-height:2.1;color:var(--ink-2);text-align:left;max-width:56ch;margin:0 auto}
.wip-lead strong{color:var(--ink);font-weight:700}

.wip-cats{
  list-style:none;margin:34px auto 0;padding:24px 0 0;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.wip-cats li{
  display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 15px 5px 5px;background:var(--surface);
}
.wip-ico{
  width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 16%,var(--surface));color:var(--c);
}
.wip-ico svg{width:13px;height:13px}

.wip-cta{margin-top:40px;padding-top:28px;border-top:1px solid var(--line-soft)}
.wip-btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:13.5px;
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  padding:12px 26px;border-radius:8px;box-shadow:var(--shadow);
}
.wip-btn:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.wip-cta p{margin-top:13px;font-size:11.5px;color:var(--muted);line-height:1.8}

/* ============================================================
   法務ページの本文要素（見出し3・箇条書き条項・外部送信先の表）
   ============================================================ */
.page h3{font-size:13px;font-weight:700;margin:20px 0 8px;color:var(--ink)}
.page a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 38%,transparent)}
.page a:hover{border-bottom-color:var(--accent)}
.page b{color:var(--ink);font-weight:700}
.mono{font-family:var(--mono);word-break:break-all}
.page p .mono{font-size:12.5px}

.clauses{margin:0 0 16px;padding-left:1.9em;display:flex;flex-direction:column;gap:9px}
.clauses li{font-size:13px;line-height:1.95;color:var(--ink-2);padding-left:.3em}
.clauses li::marker{color:var(--muted);font-family:var(--mono);font-size:11.5px}

.ext{width:100%;border-collapse:collapse;margin:0 0 18px;border:1px solid var(--line)}
.ext th,.ext td{
  text-align:left;padding:10px 12px;font-size:12px;line-height:1.75;
  border-bottom:1px solid var(--line-soft);vertical-align:top;
}
.ext th{background:var(--surface-2);font-weight:700;color:var(--ink);font-size:11.5px}
.ext td{color:var(--ink-2)}
.ext tbody tr:last-child td{border-bottom:0}
.ext .mono{font-size:10.5px;color:var(--muted);line-height:1.6}

@media (max-width:900px){
  .previewbar{font-size:11.5px}
  .previewbar a{margin-left:0}
  .wip{padding:36px 0 32px}
  .wip-lead{font-size:13px;line-height:2}
  .wip-cats li{font-size:11.5px}
  .ext th,.ext td{padding:8px 9px;font-size:11.5px}
}