/* 合格体験記の見た目（2026-10-17 夜2・下ごしらえ S1。試作 案5「今日の分かれ道」proto/stories/stories.css から）。
   羊皮紙色の地・こげ茶の太い縁（角は階段の形・border-image の小さな SVG）・朱と深い緑の差し色。地図と印はドット絵（dpg-story-map.js）。
   当てる所を分ける（設計 1-4）:
   - ページ全体（地の色・余白・格子・張り付く地図）は body.dst-page（stories.html・story.html）にだけ。
   - 体験記の中身は .dst-article の下に限る（書く画面 story-survey・story-edit のプレビューも同じ render。ページの見た目を漏らさない）。
   - 今の古い CSS（stories.css・story-article.css・dpg-pages-a.css の「合格体験記」の段）は読まない／消す前提。id・class は dst-。
   各ページの head の最後（dpg-pages-a.css の後）で読む。色は下の --dst-* に集める。
   字はアプリの決まり（dpg-guide.css・関所B Q7）どおり 14px より小さくしない（夜3）。強弱は大きさより太さと色で付ける。 */
/* 2026-10-18 区間11 LOOK（提案 P9・P10・D3）: 色の約束と字の段を :root に写して持つ（元は dpg-pages-a.css。書く画面 story-survey・story-edit は
   dpg-pages-a.css を読まないので、ここにも同じ名前・同じ値で置く）。
   - 「合格」の字と旗は朱から金に（金＝自分が取った物）。朱は地図の道など飾りだけに残す（赤は間違いだけ）。
   - 主ボタン（［合格体験記を書く］・［もう一度読み込む］）は外の世界の金（--g-world）。ドット絵の枠はそのまま、字は藍。
   - 字はアプリの4段（40・22・17・14px）だけ。14〜15→14、16〜19→17、20〜26→22（絵柄・字の形はそのまま） */
:root{
  --g-fs-hero:40px; --g-fs-title:22px; --g-fs-body:17px; --g-fs-small:14px;
  --g-primary:#6424ed;
  --g-world:#F2B705; --g-world-hi:#FFD95A; --g-world-lo:#E2A300; --g-world-edge:#B8860B; --g-world-ink:#1F2A5C;
  --g-world-fill:linear-gradient(180deg,#FFD95A 0%,#F2B705 52%,#E2A300 100%);
  --g-world-shadow:0 3px 0 #9A7A16,0 6px 12px rgb(184 134 11 / 22%);
  --g-gold-text:#7A5A00;
  --g-miss:#b23336;
}
.dst-page,.dst-article{
  /* 角が階段の形の枠（試作の stories/tools/frames.py で作った SVG。24×24 を 9 で切り分ける）と小さな印 */
  --dst-fr-panel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fbf6e8' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23fffdf7' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%23efe3c6' d='M6 19h12v2H6zM19 6h2v12h-2z'/%3E%3Cpath fill='%23cdb48a' d='M7 5h10v1H7zM7 18h10v1H7zM5 7h1v10H5zM18 7h1v10h-1zM6 6h1v1H6zM17 6h1v1h-1zM6 17h1v1H6zM17 17h1v1h-1z'/%3E%3Cpath fill='%233b2a1e' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-panel-plain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fbf6e8' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23fffdf7' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%23efe3c6' d='M6 19h12v2H6zM19 6h2v12h-2z'/%3E%3Cpath fill='%233b2a1e' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23f8f0dc' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23efe2c4' d='M6 19h12v2H6zM19 6h2v12h-2z'/%3E%3Cpath fill='%238a6b4a' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-shu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23c9481b' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23e0592a' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%239c3613' d='M6 18h12v3H6zM18 6h3v12h-3z'/%3E%3Cpath fill='%233b2a1e' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-shu-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23d24d1d' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23ec6a38' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%239c3613' d='M6 18h12v3H6zM18 6h3v12h-3z'/%3E%3Cpath fill='%233b2a1e' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23F2B705' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23FFD95A' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%23B8860B' d='M6 18h12v3H6zM18 6h3v12h-3z'/%3E%3Cpath fill='%233b2a1e' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-gold-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23FFC928' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23FFE58A' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%23B8860B' d='M6 18h12v3H6zM18 6h3v12h-3z'/%3E%3Cpath fill='%233b2a1e' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-ghost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fffaf0' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23ffffff' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%23e3d4b2' d='M6 18h12v3H6zM18 6h3v12h-3z'/%3E%3Cpath fill='%233b2a1e' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-ghost-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff3dc' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23ffffff' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%23e3d4b2' d='M6 18h12v3H6zM18 6h3v12h-3z'/%3E%3Cpath fill='%233b2a1e' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-green:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%232f6b3a' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%233f8a4a' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%231f4a27' d='M6 18h12v3H6zM18 6h3v12h-3z'/%3E%3Cpath fill='%233b2a1e' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-chip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fffaf0' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23ffffff' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%23eadcbf' d='M6 19h12v2H6zM19 6h2v12h-2z'/%3E%3Cpath fill='%238a6b4a' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-chip-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1da' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23ffffff' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%23eadcbf' d='M6 19h12v2H6zM19 6h2v12h-2z'/%3E%3Cpath fill='%236b5038' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-input:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fffdf8' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23efe5cf' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%236b5440' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-note:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff4cf' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23f3e2ae' d='M6 19h12v2H6zM19 6h2v12h-2z'/%3E%3Cpath fill='%23b48a3c' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-error:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff0ea' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%23f6d9cc' d='M6 19h12v2H6zM19 6h2v12h-2z'/%3E%3Cpath fill='%23a93e17' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-fr-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%233b2a1e' d='M6 3h12v3h3v12h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%234f3a2a' d='M6 3h12v2H6zM3 6h2v12H3z'/%3E%3Cpath fill='%232b1e14' d='M6 18h12v3H6zM18 6h3v12h-3z'/%3E%3Cpath fill='%232b1e14' d='M6 0h12v3H6zM6 21h12v3H6zM0 6h3v12H0zM21 6h3v12h-3zM3 3h3v3H3zM18 3h3v3h-3zM3 18h3v3H3zM18 18h3v3h-3z'/%3E%3C/svg%3E");
  --dst-px-check-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5' viewBox='0 0 6 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M5 0h1v1h-1zM4 1h2v1h-2zM0 2h1v1h-1zM3 2h2v1h-2zM0 3h3v1h-3zM1 4h1v1h-1z'/%3E%3C/svg%3E");
  --dst-px-check-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5' viewBox='0 0 6 5' shape-rendering='crispEdges'%3E%3Cpath fill='%232b1e14' d='M5 0h1v1h-1zM4 1h2v1h-2zM0 2h1v1h-1zM3 2h2v1h-2zM0 3h3v1h-3zM1 4h1v1h-1z'/%3E%3C/svg%3E");
  --dst-px-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='9' viewBox='0 0 5 9' shape-rendering='crispEdges'%3E%3Cpath fill='%233b2a1e' d='M0 0h1v1h-1zM1 1h1v1h-1zM2 2h1v1h-1zM3 3h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1zM2 6h1v1h-1zM1 7h1v1h-1zM0 8h1v1h-1zM0 1h1v1h-1zM1 2h1v1h-1zM2 3h1v1h-1zM3 4h1v1h-1zM2 5h1v1h-1zM1 6h1v1h-1zM0 7h1v1h-1z'/%3E%3C/svg%3E");
  --dst-px-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5' shape-rendering='crispEdges'%3E%3Cpath fill='%233b2a1e' d='M0 0h9v1h-9zM1 1h7v1h-7zM2 2h5v1h-5zM3 3h3v1h-3zM4 4h1v1h-1z'/%3E%3C/svg%3E");
  --dst-px-tip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6' shape-rendering='crispEdges'%3E%3Cpath fill='%233b2a1e' d='M0 0h9v1h-9zM0 1h2v1h-2zM7 1h2v1h-2zM1 2h2v1h-2zM6 2h2v1h-2zM2 3h2v1h-2zM5 3h2v1h-2zM3 4h3v1h-3zM4 5h1v1h-1z'/%3E%3Cpath fill='%23fbf6e8' d='M2 1h5v1h-5zM3 2h3v1h-3zM4 3h1v1h-1z'/%3E%3C/svg%3E");
  /* 色 */
  --dst-bg:#f4ead0; --dst-card:#fbf6e8; --dst-paper:#fffaf0; --dst-skel:#eadbb7;
  --dst-ink:#2b2118; --dst-ink2:#4a3b2d; --dst-muted:#6a5a48; --dst-placeholder:#7d6d59;
  --dst-brown:#3b2a1e; --dst-brown2:#8a6b4a; --dst-line:#dcc9a0;
  --dst-shu:#e0592a; --dst-shu-fill:#c9481b; --dst-shu-ink:#b8431a; --dst-shu-deep:#b23d12;
  --dst-green:#2f6b3a; --dst-err-ink:#7a2a0e; --dst-on-color:#fff;
  --dst-focus:#1f5fd6;
  --dst-label-bg:rgb(251 246 232 / .9); --dst-date-bg:rgb(244 236 210 / .82); --dst-hover-glow:rgb(255 241 194 / .28); --dst-ring-in:#fff6d8;
  --dst-shadow:rgb(59 42 30 / .28); --dst-shadow-soft:rgb(59 42 30 / .2); --dst-shade:rgb(59 42 30 / .22);
  --dst-scroll:#a88c62;
  --dst-font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
}
/* ---- ページ（一覧・1件） ---- */
body.dst-page{background:var(--dst-bg);color:var(--dst-ink)}
/* iOS アプリの時刻の下の帯（--page）を本文の地の色に（mode-switch.css の #fbf4e6 を上書き。本流 3-2 の直しと同じ考え）。
   本物の dpg-pages-a.css の体験記の段にあった 2026-10-16 の1行（html.is-native body[data-site-page="stories"]{--page:var(--g-paper)}）をここへ移した
   （段は S1 で消した。地は案5 の --dst-bg。tools/qa-native-top.mjs の「帯の色が本文の背景と同じ」）。ランキングの dpg-rank.css と同じやり方 */
html.is-native body[data-site-page="stories"].dst-page{--page:var(--dst-bg)}
.dst-page .dst-main{display:block;margin:0;padding:0;background:none;color:var(--dst-ink);font-family:var(--dst-font);font-size:var(--g-fs-body);line-height:1.7}
.dst-page .dst-main:focus{outline:none}
.dst-main :focus-visible{outline:3px solid var(--dst-focus);outline-offset:3px}   /* main の中だけ（メニューは殻の紫の輪のまま） */
.dst-wrap{box-sizing:border-box;max-width:1000px;margin:0 auto;padding:12px 16px 28px}
.dst-wrap *,.dst-article *{box-sizing:border-box}
.dst-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dst-px{image-rendering:pixelated;image-rendering:crisp-edges;flex:none;display:inline-block;vertical-align:middle}
.dst-article{color:var(--dst-ink);font-family:var(--dst-font);font-size:var(--g-fs-body);line-height:1.7;overflow-wrap:anywhere}

/* ---- 枠・ボタン・札・入力 ---- */
.dst-frame{border:3px solid transparent;border-image:var(--dst-fr-panel) 9 fill / 9px / 0 stretch;background:none}
.dst-frame--plain{border-image-source:var(--dst-fr-panel-plain)}
.dst-soft{border:3px solid transparent;border-image:var(--dst-fr-soft) 9 fill / 9px / 0 stretch}
.dst-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0;padding:6px 16px;border:3px solid transparent;border-radius:0;
  border-image:var(--dst-fr-ghost) 9 fill / 9px / 0 stretch;background:none;box-shadow:none;color:var(--dst-ink);font:inherit;font-weight:800;font-size:var(--g-fs-body);line-height:1.3;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:center}
.dst-btn:hover{border-image-source:var(--dst-fr-ghost-hover)}
.dst-btn:active{transform:translateY(1px)}
/* 白い字の札は、枠の絵（border-image の fill）と同じ色を padding-box の地にも敷く（2026-10-17 夜2 axe）。
   枠の絵の透ける所は外側 3px の角だけなので見た目は変わらない。axe は border-image を読めず、地をページの色と見て 1.19:1 と数えていた（実際は 4.74:1・緑 6.39:1） */
.dst-btn--world,.dst-btn--shu{border-image-source:var(--dst-fr-gold);color:var(--g-world-ink);background:var(--g-world) padding-box}   /* 金の地に藍の字 7.5:1（区間11 D3。前は朱の地に白） */
.dst-btn--world:hover,.dst-btn--shu:hover{border-image-source:var(--dst-fr-gold-hover);background-color:#FFC928}
.dst-btn--sm{min-height:44px;padding:4px 12px;font-size:var(--g-fs-small)}
.dst-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.dst-btn .dst-px{margin:-4px 0}
.dst-chip,.dst-page #stories-exam-candidates button{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:4px 12px;border:3px solid transparent;border-radius:0;
  border-image:var(--dst-fr-chip) 9 fill / 9px / 0 stretch;background:none;box-shadow:none;color:var(--dst-ink);font:inherit;font-weight:700;font-size:var(--g-fs-small);line-height:1.3;
  cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left;text-decoration:none}
.dst-chip:hover,.dst-page #stories-exam-candidates button:hover{border-image-source:var(--dst-fr-chip-hover);background:none}
.dst-page #stories-exam-candidates button[aria-pressed="true"]{border-image-source:var(--dst-fr-green);color:var(--dst-on-color);background:var(--dst-green) padding-box}
.dst-page #stories-exam-candidates button[aria-pressed="true"]::before{content:"";width:12px;height:10px;background:var(--dst-px-check-w) center/12px 10px no-repeat;flex:none}
.dst-page #stories-exam-candidates button:focus-visible{outline:3px solid var(--dst-focus);outline-offset:3px}
.dst-seg{position:relative;display:inline-flex}
.dst-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.dst-seg span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:2px 11px;border:3px solid transparent;border-image:var(--dst-fr-chip) 9 fill / 9px / 0 stretch;font-weight:700;font-size:var(--g-fs-small);cursor:pointer}
.dst-seg input:hover + span{border-image-source:var(--dst-fr-chip-hover)}
.dst-seg input:checked + span{border-image-source:var(--dst-fr-green);color:var(--dst-on-color);background:var(--dst-green) padding-box}
.dst-seg input:checked + span::before{content:"";width:12px;height:10px;background:var(--dst-px-check-w) center/12px 10px no-repeat}
.dst-seg input:focus-visible + span{outline:3px solid var(--dst-focus);outline-offset:3px}
.dst-input{display:block;width:100%;min-height:48px;margin:0;padding:8px 12px;border:3px solid transparent;border-radius:0;border-image:var(--dst-fr-input) 9 fill / 9px / 0 stretch;
  background:none;box-shadow:none;font:inherit;font-size:var(--g-fs-body);color:var(--dst-ink)}
.dst-input::placeholder{color:var(--dst-placeholder)}
.dst-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--dst-ink2);font:inherit;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;cursor:pointer}
.dst-link:hover{color:var(--dst-brown)}
.dst-hint{margin:6px 0 0;font-size:var(--g-fs-small);color:var(--dst-muted);line-height:1.6}
.dst-h2{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:var(--g-fs-body);font-weight:800;line-height:1.35;color:var(--dst-ink);letter-spacing:0}
.dst-h2--gap{margin-top:16px}

/* ---- 状態の一文（cloud-stories.js が class を付け替えるので id で当てる） ---- */
.dst-page #stories-status{min-height:0;margin:6px 0;padding:0;font-size:var(--g-fs-small);font-weight:700;color:var(--dst-ink2)}
.dst-page #stories-status:empty{display:none}
.dst-page #stories-status.is-error{padding:10px 12px;border:3px solid transparent;border-image:var(--dst-fr-error) 9 fill / 9px / 0 stretch;color:var(--dst-err-ink)}
/* 1件の状態の一文は読み上げだけ（見つからない・失敗は箱に同じ言葉を出す） */
.dst-page #story-status{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- 一覧の見出し ---- */
.dst-hero{margin:4px 0 0}
.dst-hero__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px}
.dst-title{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--g-fs-title);font-weight:900;line-height:1.2;letter-spacing:.02em;color:var(--dst-ink);text-wrap:balance}
.dst-title .dst-px{width:16px;height:16px}
.dst-btn--write{min-height:46px;padding:4px 12px;font-size:var(--g-fs-body)}   /* 区間11 P10: 主ボタンの字は本文の段（17px） */
.dst-guide{display:flex;align-items:center;gap:8px;margin:8px 0 0}
.dst-guide__sticker{flex:none;display:block;width:48px;line-height:0}
.dst-guide__sticker img{width:48px;height:auto;display:block}
.dst-guide__bubble{position:relative;flex:1;min-width:0;padding:5px 10px 6px}
.dst-guide__bubble::before{content:"";position:absolute;left:-12px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--dst-px-arrow) center/6px 11px no-repeat;transform:scaleX(-1)}
.dst-guide__lead{margin:0;font-weight:900;font-size:var(--g-fs-small);line-height:1.45}
.dst-guide__note{margin:1px 0 0;font-size:var(--g-fs-small);color:var(--dst-muted);line-height:1.5}

/* ---- 探す ---- */
.dst-find{margin:12px 0 0}
.dst-search{display:flex;gap:8px;align-items:stretch;margin:0;padding:0;border:0;background:none;box-shadow:none}
.dst-search__box{position:relative;flex:1;min-width:0}
.dst-search__box .dst-px{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.dst-search__box .dst-input{padding-left:44px}
.dst-search .dst-btn{flex:none;min-height:48px;padding:4px 12px}
.dst-candbox{margin:10px 0 0;padding:10px 12px;border:3px solid transparent;border-image:var(--dst-fr-soft) 9 fill / 9px / 0 stretch}
.dst-candbox:not(:has(#stories-exam-candidates button)){display:none}
.dst-page #stories-exam-candidates{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.dst-candbox .dst-hint{margin:8px 0 0}
/* 並び（2つ。しぼりの札は S5） */
.dst-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;padding:0;border:0;min-width:0}
.dst-bar > *{flex:none;max-width:100%}
.dst-bar__label{font-size:var(--g-fs-small);font-weight:800;color:var(--dst-ink2);min-width:3.4em}
.dst-tune{display:none}
@media (max-width:719px){
  .dst-tune{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0;min-width:0}
  .dst-tune__btn{flex:none;gap:8px;padding:4px 12px}
  .dst-tune__now{flex:1 1 9em;min-width:0;margin:0;font-size:var(--g-fs-small);font-weight:700;line-height:1.4;color:var(--dst-ink2);overflow-wrap:anywhere;word-break:auto-phrase}
  .dst-tune__panel{margin:8px 0 0;padding:2px 12px 12px;border:3px solid transparent;border-image:var(--dst-fr-soft) 9 fill / 9px / 0 stretch}
  .dst-tune__panel:not(.is-open){display:none}
  .dst-tune__panel .dst-bar__label{flex-basis:100%;margin:0 0 -2px}
}
.dst-tune__caret{width:10px;height:6px;background:var(--dst-px-down) center/10px 6px no-repeat;transition:transform .15s}
.dst-tune__btn[aria-expanded="true"] .dst-tune__caret{transform:rotate(180deg)}
.dst-tune__btn[aria-expanded="true"]{border-image-source:var(--dst-fr-chip-hover)}
.dst-summary{margin:8px 2px 0}

/* ---- カード ---- */
.dst-list{display:grid;gap:16px;margin:10px 0 0}
.dst-card{position:relative;padding:14px 14px 12px;min-width:0}
.dst-card__exam{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:var(--g-fs-title);font-weight:900;line-height:1.3}
.dst-card__examname{min-width:0;overflow-wrap:anywhere}
.dst-cat{display:inline-block;flex:none;padding:0 6px;font-size:var(--g-fs-small);font-weight:700;color:var(--dst-ink2);border:2px solid var(--dst-brown2);background:var(--dst-paper);line-height:1.45;vertical-align:2px}
.dst-pass{display:inline-flex;align-items:center;gap:4px;color:var(--g-gold-text)}   /* 区間11 P9: 朱 → 濃い金 #7A5A00（カードの地で 5.9:1・ページの地で 5.3:1）。旗の絵も金（dpg-story-sprites.js） */
.dst-pass .dst-px{margin-top:-2px}
.dst-card__title{margin:6px 0 0;font-size:var(--g-fs-body);font-weight:800;line-height:1.5;color:var(--dst-ink);overflow-wrap:anywhere}
.dst-card__link{color:var(--dst-ink);text-decoration:none;display:inline}
.dst-card__link::after{content:"";position:absolute;inset:0;z-index:1}
.dst-card__link:focus-visible{outline:none}
.dst-card__link:focus-visible::after{outline:3px solid var(--dst-focus);outline-offset:3px}
/* 触る端末では :hover が触った後も残る（戻った時にカードが朱のまま）ので、指す物がある端末だけ（夜3） */
@media (hover:hover){
  .dst-card__link:hover{color:var(--dst-brown);text-decoration:underline;text-underline-offset:3px}
  .dst-card:hover .dst-card__link{color:var(--dst-brown)}
}
.dst-card__sub{margin:2px 0 0;font-size:var(--g-fs-small);color:var(--dst-muted);overflow-wrap:anywhere}
.dst-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:10px 0 0;padding:10px 0 0;font-size:var(--g-fs-small);color:var(--dst-muted);
  background:linear-gradient(90deg,var(--dst-line) 50%,transparent 0) left top/8px 2px repeat-x}
.dst-card__who,.dst-card__passed{font-weight:800;color:var(--dst-ink2);overflow-wrap:anywhere;min-width:0}

/* ---- 0件・失敗・読み込み中 ---- */
.dst-empty{padding:22px 16px;text-align:center}
.dst-empty__title{margin:8px 0 4px;font-size:var(--g-fs-body);font-weight:900;text-wrap:balance;word-break:auto-phrase;overflow-wrap:anywhere}
.dst-empty p{margin:6px 0}
.dst-empty .dst-btn{margin-top:10px}
.dst-empty__icons{display:flex;justify-content:center;gap:10px}
#dst-empty-top:not(:empty){margin:14px 0 0}
.dst-is-empty #dst-write-top,.dst-is-empty .dst-invite{display:none}
.dst-is-error .dst-invite{display:none}   /* 読み込めなかった間は下の誘いを隠す（金の主ボタンは見出しの1つだけ。区間11） */
/* 読み込み中（cloud-stories.js が一覧を空にしている間）: 骨組みのカード2枚 */
.dst-list:empty::before,.dst-list:empty::after{content:"";display:block;height:168px;border:3px solid var(--dst-line);
  background:linear-gradient(var(--dst-skel),var(--dst-skel)) 14px 16px/55% 22px no-repeat,linear-gradient(var(--dst-skel),var(--dst-skel)) 14px 52px/85% 14px no-repeat,
  linear-gradient(var(--dst-skel),var(--dst-skel)) 14px 78px/70% 14px no-repeat,linear-gradient(var(--dst-skel),var(--dst-skel)) 14px 130px/40% 14px no-repeat,var(--dst-card)}
.dst-skel{padding:14px}
.dst-skel i{display:block;height:14px;margin:8px 0;background:var(--dst-skel)}
.dst-skel i:nth-child(1){width:60%;height:22px}
.dst-skel i:nth-child(3){height:110px}
.dst-skel i:nth-child(4){width:80%}
.dst-more{display:flex;justify-content:center;margin:18px 0 0}
.dst-more .dst-btn[hidden]{display:none}
.dst-invite{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 0;padding:14px 16px}
.dst-invite p{flex:1 1 220px;margin:0;font-weight:800;font-size:var(--g-fs-body)}
.dst-foot-note{margin:14px 2px 0;font-size:var(--g-fs-small);color:var(--dst-muted)}

/* ---- 1件 ---- */
.dst-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 4px;color:var(--dst-ink2);font-weight:800;text-decoration:none}
.dst-back::before{content:"";width:6px;height:11px;background:var(--dst-px-arrow) center/6px 11px no-repeat;transform:scaleX(-1)}
.dst-back:hover{color:var(--dst-brown);text-decoration:underline}
.dst-story{display:grid;gap:16px;margin:6px 0 0}
.dst-story > .dst-back{margin:-6px 0 -6px;justify-self:start}
.dst-shead{padding:16px 16px 14px}
.dst-shead__h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:var(--g-fs-title);font-weight:900;line-height:1.3;color:var(--dst-ink);text-wrap:balance}
.dst-shead__exam{min-width:0;overflow-wrap:anywhere}
.dst-shead__h .dst-pass{font-size:var(--g-fs-title)}
.dst-shead__title{flex:1 1 100%;display:block;margin:2px 0 0;font-size:var(--g-fs-body);font-weight:800;line-height:1.5;color:var(--dst-ink2);text-wrap:balance}
.dst-meta{display:flex;flex-wrap:wrap;gap:6px 8px;margin:12px 0 0;padding:0;list-style:none}
.dst-meta li{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:2px 10px;font-size:var(--g-fs-small);font-weight:800;color:var(--dst-ink2);border:2px solid var(--dst-line);background:var(--dst-paper);min-width:0;overflow-wrap:anywhere}
.dst-meta .dst-px{margin:-4px 0}
.dst-route{padding:14px 12px 12px;min-width:0}
.dst-route__lead{margin:-4px 0 10px;font-size:var(--g-fs-small);color:var(--dst-muted);text-wrap:balance;word-break:auto-phrase;overflow-wrap:anywhere}
.dst-routelist{margin:10px 0 0}
.dst-routelist summary{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:800;cursor:pointer;color:var(--dst-ink2);list-style:none}
.dst-routelist summary::-webkit-details-marker{display:none}
.dst-routelist summary::before{content:"";flex:none;width:9px;height:5px;background:var(--dst-px-down) center/9px 5px no-repeat;transform:rotate(-90deg);transition:transform .15s}
.dst-routelist[open] summary::before{transform:none}
.dst-routelist ol{list-style:none;margin:4px 0 0;padding:0}
.dst-routelist li{display:grid;grid-template-columns:32px 1fr;gap:2px 10px;padding:8px 0;border-top:2px dashed var(--dst-line)}
.dst-routelist li .dst-px{grid-row:span 2}
.dst-routelist .d{font-size:var(--g-fs-small);font-weight:700;color:var(--dst-muted)}
.dst-routelist .t{font-weight:800}

/* 地図の窓（幅 1024px 未満で、地図が窓より長い時）。開いた時は下（はじまり） */
.dst-mapvp{position:relative}
.dst-mapvp__hint,.dst-mapvp__shade{display:none}
.dst-mapvp.is-on{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--dst-scroll) transparent}
.dst-mapvp.is-on .dst-mapvp__hint{display:block;position:sticky;top:0;height:36px;margin-bottom:-36px;z-index:5;pointer-events:none;transition:opacity .2s;
  background:var(--dst-card);box-shadow:0 2px 0 var(--dst-shadow)}
.dst-mapvp.is-on .js-dst-bigmap{padding-top:36px}
.dst-mapvp__pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;white-space:nowrap;
  font-size:var(--g-fs-small);font-weight:800;line-height:1.4;color:var(--dst-ink);border:3px solid transparent;border-image:var(--dst-fr-panel-plain) 9 fill / 9px / 0 stretch}
.dst-mapvp__pill .dst-px{margin:-3px 0}
.dst-mapvp__up{width:10px;height:6px;background:var(--dst-px-down) center/10px 6px no-repeat;transform:rotate(180deg)}
.dst-mapvp.is-top .dst-mapvp__hint{opacity:0}
.dst-mapvp.is-on .dst-mapvp__shade{display:block;position:sticky;bottom:0;height:0;z-index:5;pointer-events:none;transition:opacity .2s}
.dst-mapvp.is-on .dst-mapvp__shade::before{content:"";position:absolute;left:0;right:0;bottom:0;height:20px;background:linear-gradient(transparent,var(--dst-shade))}
.dst-mapvp.is-bottom .dst-mapvp__shade{opacity:0}

/* 大きな地図 */
.dst-bigmap{position:relative;width:100%;margin:0 auto}
.dst-bigmap__cv{position:absolute;left:0;top:0;display:block;image-rendering:pixelated}
.dst-bigmap__marks{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.dst-mk{position:absolute;width:0;height:0}
.dst-mk__btn{position:absolute;left:-26px;top:-26px;width:52px;height:52px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dst-mk__btn--goal{left:-26px;top:-46px;width:52px;height:66px;border-radius:10px}
.dst-mk__btn:hover{background:var(--dst-hover-glow)}
.dst-mk__btn[aria-expanded="true"]{box-shadow:0 0 0 3px var(--dst-ring-in),0 0 0 6px var(--dst-brown)}
.dst-mk__label{position:absolute;top:0;transform:translateY(-50%);display:flex;flex-direction:column;gap:0;pointer-events:none;line-height:1.3;text-wrap:balance}
.dst-mk__label--left{right:28px;align-items:flex-end;text-align:right}
.dst-mk__label--right{left:28px;align-items:flex-start}
.dst-mk__label--goal{top:-14px;left:40px}
.dst-mk__date{display:inline-flex;align-items:center;gap:4px;font-size:var(--g-fs-small);font-weight:800;color:var(--dst-muted);padding:0 3px;background:var(--dst-date-bg)}
.dst-mk__name{font-size:var(--g-fs-small);font-weight:800;color:var(--dst-ink);padding:1px 4px;background:var(--dst-label-bg);box-shadow:0 0 0 2px var(--dst-label-bg);text-wrap:balance;line-break:strict;overflow-wrap:anywhere;max-width:100%}
.dst-mk__has{margin:-2px 0}
.dst-mk__pre{display:block}
.dst-mk--goal .dst-mk__name{font-size:var(--g-fs-body);color:var(--g-gold-text)}
.dst-bubble{position:absolute;z-index:6;padding:10px 46px 12px 14px;border:3px solid transparent;border-image:var(--dst-fr-panel-plain) 9 fill / 9px / 0 stretch;
  filter:drop-shadow(0 4px 0 var(--dst-shadow-soft));text-align:left;animation:dst-pop .18s ease-out}
.dst-bubble::after{content:"";position:absolute;left:calc(var(--tip) - 9px);bottom:-14px;width:18px;height:12px;background:var(--dst-px-tip) center/18px 12px no-repeat}
.dst-bubble--below::after{bottom:auto;top:-14px;transform:scaleY(-1)}
.dst-bubble__date{margin:0;font-size:var(--g-fs-small);font-weight:800;color:var(--dst-muted)}
.dst-bubble__nth{display:block;color:var(--dst-ink2)}
.dst-bubble__name{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:var(--g-fs-body);font-weight:900;line-height:1.4}
.dst-bubble__note{margin:6px 0 0;font-size:var(--g-fs-small);line-height:1.65;color:var(--dst-ink)}
.dst-bubble__note--none{color:var(--dst-muted);font-size:var(--g-fs-small)}
.dst-bubble__close{position:absolute;right:2px;top:2px;width:44px;height:44px;margin:0;padding:0;border:0;background:none;font-size:var(--g-fs-title);font-weight:900;line-height:1;color:var(--dst-ink2);cursor:pointer}
@keyframes dst-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dst-bigmap.is-compact .dst-mk__label{display:none}

/* 道具・記録・節 */
.dst-sec{padding:16px 16px 14px;min-width:0}
.dst-toolrow{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 6px;padding:0}
.dst-toolrow li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;text-align:center;font-size:var(--g-fs-small);font-weight:800;line-height:1.35;overflow-wrap:anywhere;text-wrap:balance;word-break:auto-phrase}
.dst-toolrow--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dst-toolrow--1{grid-template-columns:minmax(0,1fr)}
.dst-group{margin:14px 0 0}
.dst-group__h{margin:0 0 8px;font-size:var(--g-fs-small);font-weight:800;color:var(--dst-ink2)}
.dst-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.dst-tag{display:inline-flex;align-items:center;gap:8px;min-height:40px;max-width:100%;padding:4px 12px 4px 8px;font-size:var(--g-fs-small);font-weight:800;line-height:1.35;text-wrap:balance;overflow-wrap:anywhere;
  border:3px solid transparent;border-image:var(--dst-fr-chip) 9 fill / 9px / 0 stretch}
.dst-tag span{min-width:0}
.dst-tag .dst-px{margin:-4px 0}
.dst-tag--sub{font-weight:700;color:var(--dst-ink2)}
.dst-facts{margin:0;display:grid;grid-template-columns:fit-content(48%) minmax(0,1fr);gap:0}
.dst-facts > div{display:contents}
.dst-facts dt,.dst-facts dd{margin:0;padding:10px 0;border-top:2px dashed var(--dst-line)}
.dst-facts dt{padding-right:14px;font-size:var(--g-fs-small);font-weight:800;color:var(--dst-ink2)}
.dst-facts dd{font-weight:700;min-width:0;overflow-wrap:anywhere}
.dst-facts > div:first-child dt,.dst-facts > div:first-child dd{border-top:0}
.dst-rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dst-rating__val{font-size:var(--g-fs-title);font-weight:900}
.dst-rating__hearts{display:inline-flex;gap:2px}
.dst-rating__hearts .is-off{opacity:.22;filter:grayscale(1)}
.dst-rating__word{margin:0}
.dst-comment{margin:0;padding:12px 14px;font-size:var(--g-fs-body);line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.dst-plain{margin:0}
.dst-date{margin:12px 2px 0;font-size:var(--g-fs-small);font-weight:700;color:var(--dst-muted)}
.dst-sbody{display:grid;gap:16px;min-width:0}
.dst-actions:empty{display:none}
.dst-notfound{padding:26px 18px;text-align:center}
.dst-notfound__h{margin:6px 0 8px;font-size:var(--g-fs-title);font-weight:900;line-height:1.4;color:var(--dst-ink);text-wrap:balance}
.dst-notfound__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* 通報（cloud-stories.js の buildReport の部品。class は今のまま） */
.dst-article .story-report{margin:2px 0 0;padding:4px 0 0;color:var(--dst-ink2);font-size:var(--g-fs-small);line-height:1.7}
.dst-article .story-report .linkbtn,.dst-article [data-role="story-report-login"]{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:0;padding:0 8px;border:0;background:none;
  color:var(--dst-ink2);font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;cursor:pointer}
.dst-article .story-report .linkbtn:hover{color:var(--dst-brown)}
.dst-article .story-report .linkbtn:disabled{color:var(--dst-muted);cursor:default}
.dst-article .story-report .linkbtn[hidden],.dst-article [data-role="story-report-login"][hidden]{display:none}
.dst-article .story-report__reasons{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:6px 0 0}
.dst-article .story-report__reasons[hidden]{display:none}
.dst-article .story-report__reasons > span{font-weight:800;margin-right:4px}
.dst-article .story-report__status{margin:6px 0 0;min-height:1.7em;font-weight:700}

/* ---- 書く画面のプレビュー（.dst-article--preview。ページの外の見た目は変えない） ---- */
.dst-article--preview{padding:12px;background:var(--dst-bg)}
.dst-article--preview .dst-story{margin:0}

/* ---- 広い画面 ---- */
@media (min-width:720px){
  .dst-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dst-wrap{padding:20px 24px 32px}
}
@media (min-width:1024px){
  .dst-wrap{padding:24px 32px 40px}
  .dst-page--story .dst-wrap{padding-top:16px}
  .dst-page--story .dst-story{grid-template-columns:minmax(340px,440px) minmax(0,1fr);grid-template-areas:"map back" "map head" "map body";grid-template-rows:auto auto 1fr;align-items:start;column-gap:24px}
  .dst-page--story .dst-story > .dst-back{grid-area:back;justify-self:start;margin:-6px 0 -8px}
  .dst-page--story .dst-shead{grid-area:head}
  .dst-page--story .dst-route{grid-area:map;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain}
  .dst-page--story .dst-sbody{grid-area:body;min-width:0}
  .dst-article--preview .dst-story{grid-template-columns:minmax(260px,360px) minmax(0,1fr);grid-template-areas:"map head" "map body";align-items:start;column-gap:20px}
  .dst-article--preview .dst-shead{grid-area:head}
  .dst-article--preview .dst-route{grid-area:map}
  .dst-article--preview .dst-sbody{grid-area:body;min-width:0}
}

/* ---- とても狭い時（200% 拡大など） ---- */
@media (max-width:260px){
  .dst-wrap{padding-left:10px;padding-right:10px}
  .dst-tune__panel{padding-left:8px;padding-right:8px}
  .dst-shead__h,.dst-shead__h .dst-pass{font-size:var(--g-fs-body)}
  .dst-card__exam{font-size:var(--g-fs-body)}
  .dst-title{font-size:var(--g-fs-title)}
  .dst-bar .dst-seg span{white-space:normal}
  .dst-card,.dst-sec,.dst-shead{padding-left:10px;padding-right:10px}
  .dst-route{padding-left:8px;padding-right:8px}
  .dst-search{flex-wrap:wrap}
  .dst-search .dst-btn{flex:1 1 100%}
  .dst-guide{flex-direction:column;align-items:stretch}
  .dst-guide__sticker,.dst-guide__sticker img{width:44px}
  .dst-guide__bubble::before{display:none}
  .dst-title .dst-px{display:none}
  .dst-toolrow{grid-template-columns:minmax(0,1fr)}
  .dst-facts{grid-template-columns:minmax(0,1fr)}
  .dst-facts dd{padding-top:0;border-top:0}
}

/* ---- 動きを減らす ---- */
@media (prefers-reduced-motion:reduce){
  .dst-bubble{animation:none!important}
  .dst-btn:active{transform:none}
  .dst-tune__caret,.dst-mapvp__hint,.dst-mapvp__shade,.dst-routelist summary::before{transition:none!important}
}