/* ナカミド — 数字が主役・1つのテストに1色（2026-09-28 世界向けに決め直し）
   地と文字は白と黒に近い色で静かにして、色はテストごとに1色だけ強く使う。ヨツマドの4つの窓の色は窓の中だけ
   書体: 英字と数字は Inter（サイトから配る・Google から読まない）、日本語は端末の書体 */
/* Inter はサイトで使う文字（ASCII と ± × ÷ … › − など）だけに絞ってある。ファイル名の8文字は中身のハッシュ（1年キャッシュするため）
   文字を足すときは作り直して、ファイル名・下の unicode-range・_partials/head.html の preload をそろえる */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.7d6576e9.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B1-00B2, U+00B7, U+00BB, U+00D7, U+00F6-00F7, U+2013-2014, U+201C-201D, U+2026, U+2032, U+2039-203A, U+2212;
}
:root {
  --bg: #fafaf8;
  --card: #ffffff;
  --ink: #15171c;
  --ink2: #4a4f5c;
  --muted: #6b717b;
  --line: #e7e7e3;
  --frame: #15171c;
  --brand: #ff5b3a;
  --brand-t: #ffe9e3;
  /* テストの色（1つのテストに1色） */
  --c-seishin: #6c4bff;
  --c-seishin-t: #efebff;
  --c-reaction: #1f6bff;
  --c-memory: #0d855b;
  --c-yotsumado: #ffb000;
  /* ヨツマドの4つの窓 */
  --open: #ffc845;
  --open-t: #fff3d3;
  --blind: #5bb8f0;
  --blind-t: #e1f2fd;
  --hidden: #f29cb8;
  --hidden-t: #fde6ee;
  --unknown: #8fd3bb;
  --unknown-t: #e3f5ee;
  --line-green: #06c755;
  --danger: #c2334d;
  --radius: 16px;
  --f-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif;
  /* 見出しと数字（英字と数字は Inter、日本語は端末の書体） */
  --f-round: "Inter", var(--f-body);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; } /* ページ内リンクの見出しが上の帯に隠れないように */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  word-break: normal;
  overflow-wrap: anywhere;
}
h1, h2, h3 { font-family: var(--f-round); font-weight: 700; line-height: 1.35; margin: 0; text-wrap: balance; word-break: auto-phrase; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-reaction); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }

.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.wrap.wide { max-width: 760px; }

/* ヘッダー・フッター */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(250, 250, 248, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; }
.logo { display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; text-decoration: none; font-family: var(--f-round); font-weight: 800; font-size: 19px; letter-spacing: .02em; } /* 「ナカミド」は折り返さない・縮めない（狭いときは右のマイページのほうが小さくなる） */
.logo svg { width: 28px; height: 28px; flex: none; }
.site-header .mk { display: inline-flex; align-items: center; flex: none; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; padding: 0 14px; border-radius: 999px; background: var(--frame); color: #fff; white-space: nowrap; } /* 押せる高さは 44px（幅320pxでも1行に収まる） */
.site-footer { margin-top: 56px; padding: 28px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: #fff; font-size: 14px; color: var(--ink2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
.site-footer nav a { text-decoration: none; padding: 10px 0; } /* 押せる高さを 44px に（行の間は余白で取るので gap は 0） */
.site-footer nav a:hover { text-decoration: underline; }
.site-footer small { color: var(--muted); }

/* ボタン */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 12px 18px; border: 0; border-radius: 14px; background: var(--frame); color: #fff; font-family: var(--f-round); font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; transition: transform .08s ease, opacity .15s; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.btn[aria-busy="true"] { opacity: .6; cursor: progress; } /* 読み込み中（「はじめる」は、押したときの動きがつくまでこの形） */
.btn.sub { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn.line { background: var(--line-green); }
.btn.x { background: #0f1419; }
.btn.small { min-height: 44px; font-size: 15px; border-radius: 12px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 入口の「はじめる」（2026-10-06 ユーザーが比べる画像で案A を選んだ）: どの診断・テストでも同じナカミドの朱＋下に濃い段＋右に白い丸の▶。押すと段が浅くなって沈む
   見本のカードが朱に近い色の診断は黒＋黒の段（go-ink）。どちらにするかはビルドが色相と彩度で決める（ページの data-go="<slug>"・tools/go-color.mjs）
   ▶は ::after に描く（「続きから答える」のように JS が文字を差し替えても消えない）。他己分析シートの .sh-btn の色は :not(.go) で外してある（room-sheet.css）
   文の長い入口（「自分の窓をつくる（1分・登録なし）」など）は、かっこの中を <small class="go-sub"> で少し小さく・折り返すときはかっこの前で
     主な文は <span class="go-main">、かっこは .go-sub。どちらも割れない1かたまり（inline-block）なので、2行になるときは必ず「…つくる／（1分・登録なし）」
     text-wrap: balance は使わない（2026-10-06 確かめ: iPhone・Android と同じ全角の字の幅では、行の長さをそろえようとして「自分の窓をつく／る（…）」と言葉の途中で割れた）
   iPhone の Safari は、touchstart の受け手が無いと <button> に :active を使わない（押しても沈まない）。受け手は header.html の script で document に1つ置く。
     iOS がもともと出すタップの灰色の影は消す（-webkit-tap-highlight-color）。沈む形が押した合図になる */
.btn.go { --go: var(--brand); --go-step: #c4381c; --go-soft: rgba(196, 56, 28, .5); --go-ring: rgba(255, 255, 255, .24);
  min-height: 60px; padding: 10px 16px 10px 20px; gap: 10px; border-radius: 16px; background: var(--go); color: #fff;
  font-size: clamp(16px, 4.7vw, 18px); letter-spacing: .02em; line-height: 1.4; text-align: center; text-wrap: wrap; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 5px 0 var(--go-step), 0 12px 22px -10px var(--go-soft); transition: transform .08s ease, box-shadow .08s ease, opacity .15s; }
.btn.go.go-ink { --go: var(--frame); --go-step: #000; --go-soft: rgba(21, 23, 28, .45); --go-ring: rgba(255, 255, 255, .2); }
.btn.go::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box;
  background: var(--go-ring) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M12.4 10.3v9.4l7.6-4.7z' fill='%23fff' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat; }
.btn.go:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--go-step), 0 6px 12px -8px var(--go-soft); }
@media (hover: hover) { .btn.go:not([disabled]):not([aria-busy="true"]):hover { filter: brightness(1.06); } }
.btn.go:focus-visible { outline: 3px solid var(--c-reaction); outline-offset: 3px; border-radius: 16px; } /* 全体の :focus-visible の角丸 8px にしない */
/* 読み込み中（押したときの動きがつくまで・disabled と aria-busy）: 色と段はそのまま薄く、▶の丸は回る輪に。押しても沈まない */
.btn.go[disabled], .btn.go[aria-busy="true"] { opacity: .6; }
.btn.go[disabled]:active, .btn.go[aria-busy="true"]:active { transform: none; box-shadow: 0 5px 0 var(--go-step), 0 12px 22px -10px var(--go-soft); }
.btn.go[aria-busy="true"]::after { background: none; border: 3px solid var(--go-ring); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn.go .go-main { display: inline-block; }
.btn.go .go-sub { display: inline-block; font-size: .8em; }
/* 幅340px未満: 「はじめる（24問・約1分半）」が1行に入るように、すき間と▶を少し小さく */
@media (max-width: 339px) {
  .btn.go { padding: 10px 12px 10px 14px; gap: 8px; letter-spacing: 0; }
  .btn.go::after { width: 28px; height: 28px; background-size: 28px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.go { transition: none; }
  .btn.go[aria-busy="true"]::after { animation: none; border-color: rgba(255, 255, 255, .55); border-style: dotted; } /* 回さずに点線の輪 */
}
.linklike { background: none; border: 0; padding: 0; color: var(--ink2); text-decoration: underline; cursor: pointer; font-size: 14px; text-align: left; justify-self: start; }

/* 共通の箱 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; }
.stack { display: grid; gap: 16px; }
.section { margin-top: 36px; display: grid; gap: 14px; }
.section > h2 { font-size: 21px; }
.note { font-size: 13.5px; color: var(--muted); }
.lead { font-size: 16.5px; color: var(--ink2); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }

/* トップ */
.hero { padding: 28px 0 8px; display: grid; gap: 16px; }
.hero h1 { font-size: clamp(30px, 8.6vw, 40px); letter-spacing: .01em; }
.hero-art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; background: var(--frame); border-radius: 26px; max-width: 360px; box-shadow: 0 18px 40px -22px rgba(31, 42, 68, .55); }
.hero-art > div { border-radius: 16px; padding: 12px 12px 14px; min-height: 104px; display: grid; gap: 6px; align-content: start; }
.hero-art .t { font-family: var(--f-round); font-weight: 700; font-size: 13px; }
.hero-art .w { display: flex; flex-wrap: wrap; gap: 4px; }
.hero-art .w span { font-size: 12px; background: rgba(255, 255, 255, .78); border-radius: 999px; padding: 1px 8px; }
/* ヨツマドの入口: 背の低いスマホ（320×568 など・横向き）では、「自分の窓をつくる」がなるべく1画面目に近づくように、窓の見本と間を少し詰める（下の .sn-intro と同じ条件） */
@media (max-height: 640px) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .hero { padding-top: 14px; gap: 10px; }
  .hero-art { gap: 6px; padding: 8px; }
  .hero-art > div { min-height: 0; padding: 10px 10px 12px; }
}
.pane-open { background: var(--open); }
.pane-blind { background: var(--blind); }
.pane-hidden { background: var(--hidden); }
.pane-unknown { background: var(--unknown); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.steps li::before { counter-increment: s; content: counter(s); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--frame); color: #fff; font-family: var(--f-round); font-weight: 700; }
.steps b { display: block; font-family: var(--f-round); }
.four-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.four-exp > div { border-radius: 14px; padding: 14px; display: grid; gap: 4px; align-content: start; }
.four-exp b { font-family: var(--f-round); }
.four-exp span { font-size: 13.5px; color: var(--ink2); }
.bg-open { background: var(--open-t); }
.bg-blind { background: var(--blind-t); }
.bg-hidden { background: var(--hidden-t); }
.bg-unknown { background: var(--unknown-t); }
.uses { display: grid; gap: 10px; }
.uses a { display: grid; gap: 2px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.uses a b { font-family: var(--f-round); }
.uses a span { font-size: 14px; color: var(--ink2); }
/* トップの「読みもの」（2026-10-08）: 記事のカードの下に、一覧と使い方へのリンクを横に（せまい幅では折り返す） */
.reads-more { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: -6px; }
.mine-list { display: grid; gap: 10px; }
.mine-list a:not(.btn) { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.mine-list a b { font-family: var(--f-round); }

/* 言葉を選ぶ */
.pick-head { padding: 22px 0 6px; display: grid; gap: 8px; }
.pick-head h1, .pick-head > h2 { font-size: clamp(24px, 6.6vw, 30px); } /* 「自分の窓をつくる」の2つ目の見出しは h2（h1 は1ページに1つ）。大きさは h1 とそろえる */
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-family: var(--f-round); }
.field input { width: 100%; font: inherit; font-size: 18px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.field input:focus { border-color: var(--blind); outline: none; }
.field .err { color: var(--danger); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 14px; font-size: 15.5px; line-height: 1.3; cursor: pointer; transition: background .12s, color .12s, border-color .12s, opacity .12s; -webkit-tap-highlight-color: transparent; }
.chip[aria-pressed="true"] { background: var(--frame); border-color: var(--frame); color: #fff; font-weight: 700; }
.chips.full .chip[aria-pressed="false"] { opacity: .38; }
.sticky-bar { position: sticky; bottom: 0; z-index: 5; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, rgba(250, 250, 248, 0), var(--bg) 26%); display: grid; gap: 8px; }
.count { justify-self: center; font-family: var(--f-round); font-weight: 700; font-size: 15px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 14px; }
.count b { font-size: 18px; }

/* 結果 */
.res-head { padding: 22px 0 4px; display: grid; gap: 6px; }
.res-head h1 { font-size: clamp(24px, 6.8vw, 30px); }
.progress { display: flex; gap: 10px; justify-content: center; padding: 6px 0; }
.progress i { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 2px dashed var(--line); display: grid; place-items: center; font-style: normal; font-family: var(--f-round); font-weight: 700; color: var(--muted); }
.progress i.on { border: 0; color: #1f2a44; }
.progress i.on:nth-child(1) { background: var(--open); }
.progress i.on:nth-child(2) { background: var(--blind); }
.progress i.on:nth-child(3) { background: var(--hidden); }
.big-num { text-align: center; font-family: var(--f-round); font-weight: 700; font-size: 20px; }
.big-num b { font-size: 34px; }
.windows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; background: var(--frame); border-radius: 22px; }
.win { border-radius: 15px; padding: 12px 12px 14px; display: grid; gap: 8px; align-content: start; min-height: 150px; }
.win h3 { font-size: 15px; display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.win h3 small { font-family: var(--f-body); font-weight: 500; font-size: 11px; color: rgba(31, 42, 68, .7); white-space: nowrap; }
.win .ws { display: flex; flex-wrap: wrap; gap: 5px; }
.win .ws span { font-size: 13px; line-height: 1.3; background: rgba(255, 255, 255, .82); border-radius: 999px; padding: 4px 9px; }
.win .ws span b { font-weight: 700; margin-left: 4px; font-size: 11.5px; color: var(--ink2); }
.win .empty { font-size: 12.5px; color: rgba(31, 42, 68, .7); }
.win.open { background: var(--open); }
.win.blind { background: var(--blind); }
.win.hidden { background: var(--hidden); }
.win.unknown { background: var(--unknown); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fact { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.fact span { font-size: 12.5px; color: var(--muted); }
.fact b { font-family: var(--f-round); font-size: 18px; }
.share-url { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 12px; font-size: 14px; min-width: 0; contain: inline-size; } /* 長いリンク（引き継ぎ用など）で、外側の grid の幅が文字の長さまで広がらないように */
.share-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; color: var(--ink2); }
.share-url button { flex: none; border: 0; border-radius: 9px; background: var(--frame); color: #fff; font-weight: 700; font-size: 13px; padding: 7px 12px; cursor: pointer; }
.callout { background: #fff; border: 2px solid var(--open); border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.callout h2 { font-size: 18px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: var(--frame); color: #fff; font-size: 14px; font-weight: 700; padding: 10px 18px; border-radius: 999px; z-index: 50; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); pointer-events: none; } /* 下のボタンを押すじゃまをしない。幅は文の長さ（left:50% のままだと画面の半分で折り返す。幅320pxで「公開に戻すと送れます」が2行になった） */
.danger-zone { margin-top: 28px; padding-top: 16px; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.danger-zone .btn { background: #fff; color: var(--danger); border: 1.5px solid #f1c5cf; }
/* 作った人の「非公開」（窓も部屋も同じ見た目。窓は pages/result.js、部屋は rooms/core.js）
   .priv-band: 非公開のあいだ、見出しのすぐ下に出す帯（中に p と「公開に戻す」の button）。白地に黄色の細い枠で、目立ちすぎないように。幅が足りないときはボタンが下の段へ
   .priv-confirm: 「非公開にしますか？」の確かめの箱（p・ul.priv-list・.btn-row）。本命は .btn.small（黒地）、やめるは .btn.small.sub。
     消すの近く（.danger-zone の中）に置いても、消すときの赤い枠にしない。ボタンは幅320pxでも1行
   .priv-locked: 非公開のあいだの押せない送るボタン（aria-disabled="true"・押すと「公開に戻すと送れます」のお知らせ）。そのわけの文は .priv-note
   文は文節で折り返す（幅320pxで「見えませ／ん。」のように、語の途中で切れないように） */
.priv-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; padding: 10px 10px 10px 14px; background: #fff; border: 1.5px solid var(--open); border-radius: 14px; font-size: 14px; color: var(--ink2); }
.priv-band p { flex: 1 1 12em; min-width: 0; word-break: auto-phrase; }
.priv-band b { color: var(--ink); }
.priv-band .btn { flex: none; width: auto; padding: 0 16px; white-space: nowrap; }
.priv-confirm { display: grid; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.priv-confirm > p:first-child { font-weight: 700; color: var(--ink); word-break: auto-phrase; }
.priv-list { margin: 0; padding-left: 1.3em; display: grid; gap: 2px; font-size: 14.5px; color: var(--ink2); }
.priv-list li { word-break: auto-phrase; }
.priv-confirm .btn { padding: 0 10px; white-space: nowrap; }
.danger-zone .priv-confirm .btn { background: var(--frame); color: #fff; border: 0; }
.danger-zone .priv-confirm .btn.sub { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.priv-locked { opacity: .35; cursor: default; }
.priv-note { word-break: auto-phrase; }
.btn.priv-locked:active { transform: none; }
.ytm-owner { display: grid; gap: 8px; margin-top: 8px; } /* 下の切り替え（非公開にする・この窓を消す）と、その確かめの箱 */
.ytm-tools .linklike { min-height: 44px; } /* 別の端末で見る・非公開にする・この窓を消す: 押せる高さは 44px */

/* 読みもの */
.prose { display: grid; gap: 14px; }
.prose h1 { font-size: clamp(24px, 6.4vw, 30px); padding-top: 22px; }
.prose h2 { font-size: 20px; margin-top: 18px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; overflow-wrap: normal; } /* 単語の途中で折らない（せまい画面では .tbl の中で横に動かす） */
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; min-width: 3.5em; }
.tbl { overflow-x: auto; background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat local, linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right / 12px 100% no-repeat scroll, #fff; }
.prose .nw { white-space: nowrap; }

.spinner { width: 34px; height: 34px; margin: 60px auto; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--frame); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ナカミド（全体） */
.corner-bar { background: #fff; border-bottom: 1px solid var(--line); }
.corner-bar .wrap { display: flex; align-items: center; gap: 10px; height: 42px; }
.corner-bar a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-round); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.corner-bar svg { width: 22px; height: 22px; flex: none; }
.corner-bar span { min-width: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nk-hero { padding: 30px 0 6px; display: grid; gap: 14px; }
.nk-hero h1 { font-size: clamp(30px, 8.6vw, 42px); }
.nk-mark { width: 84px; height: 84px; }
.nk-mark svg { width: 100%; height: 100%; }
.promises { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.promises li { display: grid; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.promises b { font-family: var(--f-round); }
.promises b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); margin-right: 8px; vertical-align: 1px; }
.promises span { font-size: 14px; color: var(--ink2); }
.corners { display: grid; gap: 12px; }
.corner-card { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; text-decoration: none; color: inherit; }
a.corner-card:hover { border-color: #c9d3e3; }
.corner-card .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; }
.corner-card .ic svg { width: 34px; height: 34px; }
.corner-card .ic.ymd { background: none; }
.corner-card .ic.ymd svg { width: 56px; height: 56px; }
.corner-card b { font-family: var(--f-round); font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.corner-card span { font-size: 14px; color: var(--ink2); }
.corner-card .soon { font-family: var(--f-body); font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 9px; }
.corner-card[aria-disabled="true"] { opacity: .62; }

/* ヘッダーのマイページ（2026-10-06 案2）: アイコン＋2行「マイページ」（太字13.5px）／「過去の結果」（11px・薄い色）の角丸14pxのボタン・高さ44px
   トップの「あなたのナカミド」をやめたので、過去の結果はここから見てもらう。お知らせの数の印（.badge）は右上の角
   幅が足りないとき（「窓をつくる」などのボタン .mk があるページのスマホ）は、ロゴを割らずに、次の順で詰める:
     1. .mk の字とすき間を少し詰める（スマホの幅の .mk のページ）・幅375px未満はロゴの字も 19→17px（下の @media）
     2. マイページのボタンは残りの幅を受け取り（flex-basis 120px）、受け取った幅で形を選ぶ（コンテナクエリ）:
        2行 → 2行のまま字を少し小さく → それでも足りなければ「過去の結果」の行を省いて、アイコンの下に小さく「マイページ」
   .mk の無いページは、幅320pxでも詰めずに2行の形が入る。確かめは tools/test/ui-start-header.mjs（幅320〜430・iPhone と同じ全角の字の幅でも） */
.head-right { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.me-link { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; white-space: nowrap; }
.me-in { display: flex; align-items: center; gap: 7px; padding: 0 12px 0 9px; }
.me-link svg { width: 22px; height: 22px; flex: none; }
.me-t { display: grid; line-height: 1.15; text-align: left; }
.me-t b { font-size: 13.5px; font-weight: 700; }
.me-t small { font-size: 11px; font-weight: 600; color: var(--muted); }
.me-link .badge { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid var(--bg); }
@media (hover: hover) { .me-link:hover { border-color: #c9d3e3; } }
@media (max-width: 599px) {
  .me-link { flex: 0 1 120px; min-width: 58px; container-type: inline-size; }
  .site-header.has-mk .wrap { gap: 8px; }
  .site-header.has-mk .head-right { gap: 6px; }
  .site-header.has-mk .mk { font-size: 13px; padding: 0 11px; }
  /* コンテナクエリが使えない古いブラウザ: .mk のあるページは、はじめから小さい形（アイコンの下に「マイページ」） */
  @supports not (container-type: inline-size) {
    .site-header.has-mk .me-link { flex: none; }
    .site-header.has-mk .me-in { flex-direction: column; gap: 1px; padding: 0 6px; }
    .site-header.has-mk .me-t small { display: none; }
    .site-header.has-mk .me-t b { font-size: 10px; }
    .site-header.has-mk .me-link svg { width: 19px; height: 19px; }
  }
}
@media (max-width: 374px) {
  .site-header.has-mk .logo { font-size: 17px; gap: 6px; letter-spacing: 0; }
  .site-header.has-mk .logo svg { width: 24px; height: 24px; }
}
@media (max-width: 339px) {
  .site-header.has-mk .mk { font-size: 12px; padding: 0 10px; }
}
/* 受け取った幅（枠の内側）で形を選ぶ。全角の字（iPhone・Android の書体の幅）で、2行は 117.5px・字を小さくした2行は 98.5px 要る */
@container (max-width: 117.9px) {
  .me-in { gap: 4px; padding: 0 6px; }
  .me-link svg { width: 20px; height: 20px; }
  .me-t b { font-size: 12.5px; }
  .me-t small { font-size: 10.5px; }
}
@container (max-width: 98.9px) {
  .me-in { flex-direction: column; gap: 1px; padding: 0 3px; }
  .me-link svg { width: 19px; height: 19px; }
  .me-t small { display: none; }
  .me-t b { font-size: 10px; letter-spacing: 0; }
}

/* トップ: 分類と診断のカード */
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.cat { margin-top: 34px; display: grid; gap: 12px; }
.cat-head { display: grid; gap: 2px; }
.cat-head h2 { font-size: 21px; }
.cat-head p { font-size: 14px; color: var(--ink2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.dcard { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; }
a.dcard:hover { border-color: #c9d3e3; }
.dcard[aria-disabled="true"] .thumb { filter: saturate(.55); opacity: .75; }
.thumb { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-family: var(--f-round); font-weight: 700; font-size: 14px; line-height: 1.35; text-align: center; color: var(--ink); }
.thumb svg { width: 54px; height: 54px; flex: none; }
.th-seishin { background: linear-gradient(135deg, #ffd9cb, #ffb59a); }
.th-yotsumado { background: linear-gradient(135deg, #e1f2fd, #fff3d3); }
.th-reaction { background: linear-gradient(135deg, #fff3d3, #ffe08a); }
.th-memory { background: linear-gradient(135deg, #e1f2fd, #b9e0f7); }
.mini-win { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; width: 54px; height: 54px; background: var(--frame); border-radius: 14px; flex: none; }
.mini-win i { border-radius: 5px; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 54px; height: 54px; flex: none; }
.mini-grid i { border-radius: 5px; background: rgba(31, 42, 68, .14); }
.mini-grid i.on { background: var(--frame); }
.dbody { padding: 10px 12px 12px; display: grid; gap: 3px; align-content: start; }
.dbody b { font-family: var(--f-round); font-size: 15.5px; line-height: 1.35; }
.dbody .d-desc { font-size: 13px; line-height: 1.55; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* スマホの幅（カードが2列）: 説明文は出さない（名前と「20問・約4分」だけ）。2026-10-06 ユーザー「スマホ表示の時にTOPページで診断のなかみのことを詳細に書く必要なし」
   文は HTML に残して見た目だけ隠す（検索と読み上げには残る）
   カードの高さは分類ごとにそろえる（grid-auto-rows: 1fr。名前や「12問・約1分半・何人とでも」が2行になるカードがあっても）。「◯問・約◯分」はカードの下にそろえる */
@media (max-width: 599px) {
  .cards { grid-auto-rows: 1fr; }
  .dbody { position: relative; align-content: space-between; }
  .dbody .d-desc { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.dbody small { font-size: 11.5px; color: var(--muted); }
.dbody .soon { font-style: normal; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }

/* マイページ（トップの「あなたのナカミド」は 2026-10-06 にやめた。過去の結果は右上のマイページから） */
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.panel-head h2 { font-size: 18px; }
.notices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notices a { display: flex; gap: 10px; align-items: baseline; text-decoration: none; background: var(--brand-t); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; font-weight: 700; }
.notices .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; transform: translateY(-1px); }
.mine-list .kind { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
/* 運営が非表示にした窓や部屋（開けないのでリンクにしない・me.js） */
.mine-list .mine-off { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px dashed var(--line); border-radius: 14px; padding: 12px 16px; color: var(--muted); }
.mine-list .mine-off b { font-family: var(--f-round); }
.mine-list .mine-off .pill { flex: none; white-space: nowrap; } /* 「運営が非表示にしました」は折り返さない（呼び名のほうを折り返す） */
/* マイページ: 読み込みのあとで下の段が動かないように、一覧（読み込み中のスピナーと同じ高さ）と引き継ぎのボタンの場所を先にとる */
#items { min-height: 120px; align-content: start; }
#items > .spinner { margin: 43px auto; }
/* マイページの一覧は診断ごとのまとまり（me.js の groupBox）。見出し（名前・回数・自己ベスト・もう一度）＋記録。前の結果はたたむ */
#items { gap: 20px; }
.mine-group { display: grid; gap: 8px; }
.mine-group-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 0 4px; }
.mine-group-head h3 { margin: 0; font-size: 16px; font-family: var(--f-round); }
.mine-group-head .mine-meta { font-size: 13px; font-weight: 700; color: var(--muted); }
.mine-list a.mine-again { display: inline-flex; align-items: center; min-height: 32px; margin-left: auto; padding: 0; background: none; border: 0; border-radius: 0; font-size: 13.5px; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.mine-more > summary { display: flex; align-items: center; min-height: 40px; padding: 0 4px; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; list-style: none; }
.mine-more > summary::-webkit-details-marker { display: none; }
.mine-more > summary::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.mine-more[open] > summary::before { transform: rotate(90deg); }
.mine-more-list { display: grid; gap: 8px; }
#move-out { min-height: 56px; } /* 「引き継ぎ用のリンクを作る」のボタンの高さ */
#move-paste-open { min-height: 44px; } /* 押せる高さは 44px */
/* マイページの「整理する」: 1件ずつ消す・窓は確かめてから・続けて消したものはまとめて「元に戻す」 */
.mine-edit { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 10px 16px; }
.mine-edit > span { min-width: 0; }
.mine-edit b { font-family: var(--f-round); }
.mine-edit .del { flex: none; min-height: 40px; padding: 0 14px; border: 1.5px solid #f1c5cf; border-radius: 10px; background: #fff; color: var(--danger); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.mine-edit.ask { display: grid; gap: 10px; padding: 14px 16px; }
.undo { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--frame); color: #fff; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 700; }
.undo .linklike { color: #fff; font-weight: 700; flex: none; }
.edit-tools { display: grid; gap: 12px; }
.btn.danger { background: var(--danger); color: #fff; }
.linklike.danger-link { color: var(--danger); }
/* 別の端末に引き継ぐ */
.move-in { margin-top: 18px; }
.move-in h2 { font-size: 18px; }
.move-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.warn { font-size: 14px; font-weight: 700; color: var(--danger); background: #fdf0f2; border-radius: 12px; padding: 10px 12px; }

/* 精神年齢診断 */
.sn-intro { padding: 22px 0 6px; display: grid; gap: 14px; }
.sn-intro h1 { font-size: clamp(28px, 7.6vw, 36px); }
.sn-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sn-points li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--ink2); }
.sn-points b { display: block; font-family: var(--f-round); color: var(--ink); font-size: 15.5px; }
.sn-q { padding: 18px 0 8px; display: grid; gap: 12px; }
.sn-progress { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.sn-progress .bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.sn-progress .bar i { display: block; height: 100%; background: var(--c-seishin); border-radius: 4px; transition: width .25s ease; }
.sn-situation { font-size: clamp(21px, 5.6vw, 26px); }
.opt-card { background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 14px; display: grid; gap: 12px; }
.opt-card.sel { border-color: var(--c-seishin); }
.opt-text { font-size: 16.5px; font-weight: 700; line-height: 1.6; }
.opt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt-btn { min-height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.opt-btn.strong { border-color: color-mix(in srgb, var(--c-seishin) 35%, #fff); color: color-mix(in srgb, var(--c-seishin) 72%, #000); }
.light-theme .opt-btn.strong { color: color-mix(in srgb, var(--c-seishin) 40%, #000); } /* 明るいテーマ色（陽キャ度・メンヘラ度など）でも白地で読める濃さに */
.nw { white-space: nowrap; font-style: normal; }
.opt-btn.on { background: var(--c-seishin); border-color: var(--c-seishin); color: var(--c-on, #fff); }
.sn-or { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .1em; }
.sn-half, .sn-result { padding: 20px 0 6px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.sn-age-label { font-family: var(--f-round); font-weight: 700; color: var(--ink2); }
.sn-age { font-family: var(--f-round); font-weight: 700; font-size: 26px; line-height: 1.1; }
.sn-age b { font-size: 76px; letter-spacing: .02em; margin-right: 4px; }
.sn-title { font-size: 22px; color: var(--c-seishin); }
.sn-result .lead { text-align: left; }
.sn-place { font-size: 15px; }
.sn-place b { font-family: var(--f-round); font-size: 18px; }
.sn-result .facts { width: 100%; text-align: left; }
.axis-bars { display: grid; gap: 10px; }
.axis { display: grid; grid-template-columns: 7.2em 1fr 3.6em; gap: 10px; align-items: center; font-size: 14px; }
.axis-name { font-weight: 700; }
.axis-track { height: 12px; border-radius: 6px; background: #efefeb; overflow: hidden; }
.axis-track i { display: block; height: 100%; border-radius: 6px; background: #c9c9c2; }
.axis.old .axis-track i { background: var(--c-seishin); }
.axis.young .axis-track i { background: color-mix(in srgb, var(--c-seishin) 40%, #fff); }
.axis-age { text-align: right; font-family: var(--f-round); font-variant-numeric: tabular-nums; }
.evi { display: grid; gap: 6px; }
.evi h3 { font-size: 15px; color: var(--ink2); }
.evi ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.evi li { font-weight: 700; }
.evi li small { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.sn-pref { font-family: var(--f-round); font-size: 20px; }
.sn-pref b { font-size: 30px; margin: 0 4px; color: var(--c-seishin); }
.pref { display: grid; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.pref-q { font-weight: 700; }
.pref-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pref-opt { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 14px; font-size: 14.5px; cursor: pointer; }
.pref-opt.on { background: var(--c-seishin); border-color: var(--c-seishin); color: #fff; font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; }

/* ── 2026-09-28 世界向けの見た目 ───────────────────────── */
/* 結果のカード（数字が主役）。テストの色は --tc */
.rcard { --tc: var(--c-seishin); width: 100%; background: var(--tc); color: #fff; border-radius: 24px; padding: 18px 20px 20px; display: grid; gap: 2px; text-align: left; box-shadow: 0 18px 40px -26px rgba(21, 23, 28, .6); }
.rcard .top { display: flex; justify-content: space-between; gap: 10px; font: 800 11.5px/1.2 var(--f-round); letter-spacing: .14em; }
.rcard .eb { margin-top: 14px; font-size: 14px; font-weight: 700; }
.rcard .num { font: 800 clamp(86px, 27vw, 128px)/.95 var(--f-round); letter-spacing: -.045em; font-variant-numeric: tabular-nums; } /* 一番小さい 86px は、幅320pxで「1084ms」が1行に入る大きさ（88px だと 0.8px はみ出して単位が次の行に落ちた） */
.rcard .num small { font-size: .25em; font-weight: 700; letter-spacing: 0; margin-left: 6px; white-space: nowrap; } /* 単位（ms など）は途中で割らない（幅320pxの「1084ms」が「m」と「s」に分かれていた） */
.rcard .label { font-size: 23px; font-weight: 800; line-height: 1.3; margin-top: 8px; }
.rcard .cmp { font-size: 14.5px; line-height: 1.55; margin-top: 6px; }
.rcard .cmp b { font-family: var(--f-round); font-size: 17px; }
.rcard .meta { font-size: 12.5px; margin-top: 8px; }
.rcard.half .num { font-size: clamp(72px, 22vw, 104px); }
/* 友達に送る結果のページ（_item-r.html）で、見出しが範囲（「380〜389ms」「600ms以上」など）のカード。印は tools/items-build.mjs で付ける
   数字を小さくして幅320pxでも1行に収める。行の高さは上の .num の1行とそろえて、ページの JS がちょうどの数字に差し替えたときに下の段が動かないようにする
   long は4けた〜4けた（「2075〜2099ms」）。字の大きさは、いちばん長い見出しがカードの幅に入るように決めた */
.rcard.range .num { font-size: clamp(40px, 14vw, 76px); line-height: calc(clamp(86px, 27vw, 128px) * .95); } /* clamp は上の .num と同じ値 */
.rcard.range .num small { font-size: max(12px, .3em); line-height: .95; } /* 単位は小さくなりすぎないように。行の高さ（px）を単位に引き継ぐと、行が下に伸びて JS の数字より高くなる */
.rcard.range.long .num { font-size: clamp(32px, 11.5vw, 72px); }
.band-text { font-size: 16px; color: var(--ink2); }

/* 共有: 一番上は「画像をシェア」、下のボタンは言語ごと */
.share { display: grid; gap: 10px; }
.share-preview { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.share-preview img { width: 84px; border-radius: 10px; display: block; background: var(--line); }
.share-preview p { font-size: 13px; color: var(--ink2); }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-top: 6px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--ink2); cursor: pointer; white-space: nowrap; }
.share-preview .seg { grid-column: 1 / -1; justify-self: start; margin-top: 0; } /* 画像の下の段に、箱の幅いっぱいで */
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.share-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.share-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.share-apps .app { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--ink); cursor: pointer; padding: 0 10px; }
.share-apps .app i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.btn.x { background: #000; }
.share-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(21, 23, 28, .72); display: grid; place-items: center; padding: 20px; }
.share-sheet > div { background: #fff; border-radius: 20px; padding: 16px; display: grid; gap: 10px; max-width: 360px; width: 100%; max-height: 92vh; overflow: auto; }
.share-sheet img { width: 100%; border-radius: 12px; display: block; }
.share-sheet p { font-size: 14px; }

/* 友達の結果（/seishin-nenrei/r/<年齢>/） */
.friend-note { font-size: 14px; color: var(--ink2); }
.cta-box { background: var(--c-seishin-t); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.cta-box h2 { font-size: 19px; }

/* 広告の枠（広告を出す設定のときだけ置く）。ボタンから 150px 以上あける */
.ad-slot { min-height: 280px; display: grid; place-items: center; }
.ad-slot ins { width: 100%; }
.ad-gap { height: 150px; }

/* トップのカード: 結果の画面の小さな見本（テストの色の地に、その結果の形）
   2026-09-28 ユーザー「4つの窓より前のアイコンのほうがいけてた・結果画面のイメージが出るほうが良い」 */
.dcard .mini { --tc: var(--c-seishin); aspect-ratio: 16 / 9; background: var(--tc); color: #fff; padding: 10px 12px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px; align-items: center; overflow: hidden; }
.dcard[aria-disabled="true"] .mini { opacity: .55; }
.mini .m-num { display: block; min-width: max-content; white-space: nowrap; } /* 数字は切らない（「1084ms」「レベル38」のような長い値でも）。横の絵のほうを縮める */
.mini .m-num.long b { font-size: 28px; } /* 長い値（4けた以上など）。印は tools/items-build.mjs で付ける */
.mini .m-num b { font: 800 34px/1 var(--f-round); letter-spacing: -.035em; }
.mini .m-num small { font-size: 12px; font-weight: 700; margin-left: 2px; }
.mini .m-num small.pre { margin: 0 2px 0 0; }
.mini .m-num span { display: block; font-size: 11px; font-weight: 700; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .m-bars { display: grid; gap: 5px; }
.mini .m-bars i { display: block; height: 5px; border-radius: 3px; background: linear-gradient(#fff, #fff) no-repeat left / var(--w, 100%) 100%, rgba(255, 255, 255, .26); }
.mini .m-hist { height: 70%; display: flex; align-items: flex-end; gap: 3px; }
.mini .m-hist i { flex: 1; background: rgba(255, 255, 255, .32); border-radius: 2px 2px 0 0; }
.mini .m-hist i.you { background: #fff; }
.mini .m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; justify-self: center; align-self: center; height: 80%; aspect-ratio: 1; }
.mini .m-grid i { border-radius: 4px; background: rgba(255, 255, 255, .26); }
.mini .m-grid i.on { background: #fff; }
.mini-reaction { --tc: var(--c-reaction) !important; }
.mini-memory { --tc: var(--c-memory) !important; }
/* ヨツマド: 紺に近い黒の枠に4つの窓（結果の画面と同じ色） */
.dcard .mini-yotsu { background: var(--frame); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; padding: 5px; align-items: stretch; }
.mini-yotsu .m-win { border-radius: 9px; padding: 5px 7px; display: grid; align-content: space-between; gap: 2px; color: var(--ink); min-width: 0; }
.mini-yotsu .m-win b { font-size: 10px; line-height: 1.2; white-space: nowrap; }
.mini-yotsu .m-win span { justify-self: start; font-size: 10.5px; font-weight: 700; line-height: 1.2; background: rgba(255, 255, 255, .82); border-radius: 999px; padding: 2px 7px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mini-yotsu .open { background: var(--open); }
.mini-yotsu .blind { background: var(--blind); }
.mini-yotsu .hidden { background: var(--hidden); }
.mini-yotsu .unknown { background: var(--unknown); }

/* 精神年齢の導入 */
.sn-lead-card { margin-top: 4px; }
.sn-lead-card .num { font-size: clamp(76px, 24vw, 108px); }
/* 背の低いスマホ（320×568 の小さいスマホ・横向き）: 入口の「はじめる」が1画面目に入るように、見本のカードと間を少し詰める
   幅でもしぼる（高さだけだと、ノートパソコンの低い窓 1366×768 などでも ?? が小さくなっていた）。横向きのスマホは高さ500px以下で見る */
@media (max-height: 640px) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .sn-intro { padding-top: 14px; gap: 10px; }
  .sn-lead-card .eb { margin-top: 8px; }
  .sn-lead-card .num { font-size: clamp(56px, 17vw, 76px); }
}
.how-link { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--ink2); } /* 押せる高さは 44px */
/* 相談先の案内（気持ちにふれる診断だけ） */
.support { font-size: 14px; color: var(--ink2); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.support a { display: inline-block; margin-left: 4px; font-weight: 700; }

/* 読みもの（計算のしかた など） */
.prose .formula { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; }
.sn-result .band-text, .sn-half .note { text-align: left; justify-self: stretch; }

/* ── 診断・テストの共通の部品（2026-09-28） ─────────────── */
.rcard.light, .mini.light { color: var(--ink); }
.mini .m-digits { display: flex; gap: 3px; justify-self: end; min-width: 0; }
.mini .m-digits i { font-style: normal; font: 800 16px/1 var(--f-round); background: rgba(0, 0, 0, .18); border-radius: 5px; padding: 6px 4px; min-width: 18px; text-align: center; }
.mini.light .m-digits i { background: rgba(21, 23, 28, .1); }
.mini .m-dots i { background: rgba(255, 255, 255, .78); }
.mini .m-dots i.odd { background: rgba(255, 255, 255, .5); }
/* みんなで遊ぶものの小さな見本 */
.mini .m-guess { display: grid; gap: 4px; justify-self: end; }
.mini .m-guess i { font: 800 13px/1 var(--f-round); font-style: normal; border-radius: 999px; padding: 4px 10px; background: rgba(0, 0, 0, .18); text-align: center; }
.mini .m-guess i.near { background: #fff; color: var(--tc); }
.mini.light .m-guess i { background: rgba(21, 23, 28, .1); }
.mini.light .m-guess i.near { background: var(--ink); color: #fff; }
.mini .m-pair { width: 100%; max-width: 92px; justify-self: end; }
.mini .m-pair circle { fill: rgba(255, 255, 255, .28); stroke: #fff; stroke-width: 2.4; }
.mini.light .m-pair circle { fill: rgba(21, 23, 28, .08); stroke: var(--ink); }
.mini .m-group { height: 84%; justify-self: end; align-self: center; }
.mini .m-group path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; }
.mini .m-group circle { fill: #fff; }
.mini.light .m-group path { stroke: rgba(21, 23, 28, .35); }
.mini.light .m-group circle { fill: var(--ink); }
.mini .m-sheet { display: grid; gap: 5px; background: rgba(255, 255, 255, .92); border-radius: 8px; padding: 8px; }
.mini .m-sheet i { display: flex; align-items: center; gap: 5px; height: 10px; font-style: normal; }
.mini .m-sheet i b { font: 800 9px/1 var(--f-round); color: var(--tc); width: 8px; }
.mini .m-sheet i::after { content: ""; height: 5px; width: var(--w); border-radius: 3px; background: var(--tc); opacity: .75; }
.mini .m-timer { justify-self: center; align-self: center; height: 72%; aspect-ratio: 1; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-right-color: #fff; display: grid; place-items: center; }
.mini .m-timer i { width: 5px; height: 38%; background: #fff; border-radius: 3px; transform: translateY(-40%) rotate(25deg); }
/* トップのカード: 数字が長くて横の絵の幅が足りないときは、絵を形のまま縮める（数字に重ねない・カードの外に出さない）
   絵の大きさはカードの中の高さから出す（16:9・上下の余白10px）。cqw が使えないブラウザは、これまでどおり高さで決める */
@supports (container-type: inline-size) {
  .dcard .mini { container-type: inline-size; }
  .dcard .mini .m-grid { height: auto; width: min(100%, calc(((100cqw + 24px) * .5625 - 20px) * .8)); }
  .dcard .mini .m-timer { height: auto; width: min(100%, calc(((100cqw + 24px) * .5625 - 20px) * .72)); }
}
.mini .m-group, .mini .m-guess, .mini .m-digits { max-width: 100%; }
/* テストの遊ぶ画面 */
.it-play { padding: 14px 0 8px; display: grid; gap: 12px; }
.it-play-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.it-stage { display: grid; gap: 12px; }
.it-stage .pad { --tc: var(--c-reaction); min-height: 58vh; border-radius: 24px; display: grid; place-items: center; text-align: center; padding: 20px; font: 800 26px/1.4 var(--f-round); color: #fff; background: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; }
.it-stage .pad small { display: block; font-size: 15px; font-weight: 700; opacity: .85; margin-top: 8px; }
.it-stage .status { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--ink2); }
/* 1回ごとの記録・分布 */
.rows { display: grid; gap: 6px; }
.rows > div { display: flex; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 15px; }
.rows b { font-family: var(--f-round); font-variant-numeric: tabular-nums; }
.dist { height: 120px; display: flex; align-items: flex-end; gap: 3px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.dist i { flex: 1; background: #d9d9d2; border-radius: 3px 3px 0 0; }
.dist i.you { background: var(--ink); }
.dist-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
/* お問い合わせ */
.contact-form { display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.contact-form label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.contact-form select, .contact-form textarea, .contact-form input { font: inherit; font-weight: 400; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; width: 100%; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* フッター */
.site-footer h2 { font-size: 13px; color: var(--muted); letter-spacing: .06em; margin: 0 0 6px; }
.site-footer .foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; margin-bottom: 18px; align-items: start; }
.site-footer .foot-cols nav { display: grid; gap: 0; margin: 0; align-content: start; }

/* ─── パソコン幅の左右の列（2026-10-06 ユーザーが見本の画像で選んだ「案2 リカイド型」）──────────────
   tools/render.mjs が全ページの <main> を .pc-cols で包み、main のうしろに左右の列（_partials/side.html の nav.pc-left と aside.pc-right）を置く（HTML の並びは本文が先・列があと）
   ・1023px 以下（スマホ・タブレット縦）: 列は出さない。見た目は1pxも変えない（列を出す指定は、すべて下の min-width の中だけに書く・tools/test/pc-phone-same.mjs が画素で確かめる）
   ・1024〜1279px: 真ん中（本体 560px のまま）＋右の列（300px）の2カラム。すき間 32px・全体 892px を画面の真ん中に
   ・1280px 以上: 左の列（300px）＋真ん中（560px）＋右の列（300px）の3カラム。全体 1224px
   ・ヘッダー・フッター・ヨツマドの帯の中身の幅も列の幅に合わせる（ロゴが左の列の左はし、マイページが右の列の右はし）
   ・左右の列は、列が画面に収まる高さの窓でだけ画面の上に貼りつく（ヘッダーの下）。低い窓では貼りつけず、ページと一緒に流す（下の「貼りつく窓」）
     列の上でホイールを回したり指で動かしたりしても、ページは動く（列の中が動ききったら、そのままページへ）。overscroll-behavior: contain は付けない
     （付けると列の上ではページが動かなくなる。列が画面に収まっていて動かす中身が無いときも同じで、3カラムでは画面の半分ほど。tools/test/pc-layout.mjs が確かめる）
   ・答える画面（遊んでいる最中）は列を隠す。結果が出たら戻る（下の「答える画面」）。本体は動かさない（3カラムはもともと真ん中・2カラムは右の列だけ消えて本体はそのまま）
   ・印刷では出さない（列を出す指定は screen のときだけ）
   ・広告は AdSense に合格してから右の列に1つ置く予定（2026-10-06 ユーザー）。いまは広告の枠も見本も置かない
   --pc-shift: 本体の真ん中が画面の真ん中からどれだけずれているか（2カラムのとき -166px〈答える画面でも〉・3カラムは 0）。
     画面に固定して真ん中に出す部品（.toast・宝石の結果の下の帯 .hs-bar）を本体にそろえるのに使う（.toast は ui.js が .pc-cols の中に置く） */
.pc-side { display: none; }
/* パソコン幅では、短いページでもスクロールバーの溝をいつも出す（html { overflow-y: scroll }・2026-10-07）
   フッターの中身を列の幅に広げてフッターが低くなり、答える画面のページは 1243〜1438px ほどに短くなった。背の高い窓（2560×1440 の画面で最大化した
   見える高さ 1305px ほど・縦置きの画面など）では「はじめる」を押した瞬間にスクロールしない長さになってバーが消え、本体とロゴが右へ 8px 動いていた
   （結果で戻る）。溝をいつも出せば、ページの長さが変わっても本体は動かない
   スクロールを止める画面（集中力テストの回・反応速度テストの全画面）は、ページに直接 overflow: hidden を書くのでそちらが勝ち、溝は残らない
   （反応速度の全画面の右に帯は出ない。scrollbar-gutter: stable は止めても溝が残って白い帯になるので使わない）。集中力テストは止める前にバーの幅を測って
   body の右に足す（site/js/tests/focus.js の lockScroll）。スマホ・タブレット縦（1023px 以下）は min-width の外なので1pxも変えない（pc-phone-same）
   確かめは tools/test/pc-layout.mjs（背の高い窓 2560×1305・1080×1790 で、入口 → 答える画面 → 結果と、集中力テストの回で本体とロゴが動かない） */
@media screen and (min-width: 1024px) {
  html { overflow-y: scroll; }
}
@media screen and (min-width: 1024px) {
  .site-header .wrap, .corner-bar .wrap, .site-footer .wrap.wide { max-width: 924px; } /* 列の幅 892px＋左右の 16px */
  .pc-cols { --pc-shift: -166px; display: grid; grid-template-columns: 560px 300px; column-gap: 32px; justify-content: center; align-items: start; }
  .pc-cols > main { grid-column: 1; grid-row: 1; margin-inline: 0; min-width: 0; }
  .pc-side { align-content: start; gap: 12px; margin-inline: -4px; padding: 24px 4px; } /* 左右の 4px は、押したときの枠（:focus-visible）が列の端で切れないように。貼りつくのは下の「貼りつく窓」だけ（ほかは static のままページと流れる） */
  .pc-right { display: grid; grid-column: 2; grid-row: 1; }
  .pc-cols .toast { left: calc(50% + var(--pc-shift)); }
}
@media screen and (min-width: 1280px) {
  .site-header .wrap, .corner-bar .wrap, .site-footer .wrap.wide { max-width: 1256px; } /* 列の幅 1224px＋左右の 16px */
  .pc-cols { --pc-shift: 0px; grid-template-columns: 300px 560px 300px; }
  .pc-cols > main { grid-column: 2; }
  .pc-left { display: grid; grid-column: 1; grid-row: 1; }
  .pc-right { grid-column: 3; }
  /* 宝石性格診断の案内の絵（左の列が出るこの幅でだけ読む。画面の2倍の端末は 128px） */
  .side-gem-art { background-image: url("/img/hoseki/gem-64/INFJ-A.webp"); background-image: image-set(url("/img/hoseki/gem-64/INFJ-A.webp") 1x, url("/img/hoseki/gem-128/INFJ-A.webp") 2x); }
}
/* 貼りつく窓（2026-10-06 ユーザー決定）: 列が画面に収まる高さの窓でだけ、列を画面の上（ヘッダーの下）に貼りつける
   低い窓（ノートパソコンなど）では貼りつけず、ページと一緒に流す（position: static のまま。列の中のスクロールバーも出さない・下が切れない）
   境目 = ヘッダー 56px ＋ 列の中身の高さ（上下の 24px 込み）＋ ゆとり。出ている列のうち高いほうで決める（3カラムは左右そろえて貼りつく／流す）
     2カラム（1024〜1279・右の列だけ）: 右の列 610px → 56 + 610 = 666px にゆとり 54px で、見える高さ 720px 以上
     3カラム（1280〜・左右）        : 左の列 755px → 56 + 755 = 811px にゆとり 49px で、見える高さ 860px 以上
       （1366×657・1280×720・1440×789・1536×750 などのノートパソコンは流す。1920×1080 の画面の窓〈見える高さ 950px ほど〉は貼りつく）
   ゆとりは、別の書体で列の文が1行ふえる・左の列に診断を2〜3本足す（リンクが1段ふえる）くらいまでは境目を変えなくてよい分
   列の中身を足して（広告・診断など）境目に届いたら tools/test/pc-layout.mjs が落ちる（境目ちょうどの高さの窓で、列の中身が収まるかを測る）。そのときは下の 720px・860px を上げる
   万一、収まらないまま貼りついても、列の中を動かせる（max-height と overflow-y: auto）ので、下が切れて読めなくなることはない */
@media screen and (min-width: 1024px) and (max-width: 1279.98px) and (min-height: 720px), screen and (min-width: 1280px) and (min-height: 860px) {
  .pc-side { position: sticky; top: 56px; max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: thin; }
}
/* 答える画面（遊んでいる最中）: 列を隠す（集中できる・途中で抜けない）。結果が出たら戻る
   本体は動かさない（2026-10-06 ユーザー決定）: 3カラム（1280〜）は列ごと隠し、本体はもともと画面の真ん中のまま。
     2カラム（1024〜1279）は右の列だけ隠して、本体の位置はそのまま（真ん中に寄せない。入口 → 答える画面 → 結果で本体が左右に跳ばないように。
     前は真ん中に寄せていて、1100px の窓で 97 → 263 → 97 と 166px 跳んだ）。--pc-shift も -166px のままなので、.toast は本体の真ん中に出る
   本体（main）のすぐ下か、main の中の #app のすぐ下に何が出ているかで決める（:has。画面の JS は書きかえない）。ページごと答える画面のもの（宝石の /hoseki/test/）は body に pc-focus
     画面を出す箱 #app は、ふつうは main そのもの（main#app）。他己分析シートの入口（/shukatsu-sheet/・/koikatsu-sheet/）だけは main の中の div#app で、
     作る人の画面（#make の呼び名・自分の答え・見せ方）が main > #app > .sh-q になるので、#app の下も同じ一覧で見る
     .sn-q      診断・精神年齢診断・相性診断の問い（相性は作る人と友達の12問）      .sn-half   10問目の途中の結果（続きを答える）
     .it-play   テストを遊んでいる最中                                          .play-wait 答え終わって結果を出すまでのスピナー（item.js・seishin.js）
     .ate-q     精神年齢あてっこで友達が答える                                    .itm-q・.itm-flow  いつメン相関図の10問・仕上げ・送る前の確かめ
     .sh-q      他己分析シート（作る人の呼び名・自分の答え・見せ方〈main > #app の下〉、友達の答え・送る前の確かめ）
     .hs-test   宝石の90問と、友達が答える20問    .hs-chap  章のおわり    .hs-finish  鑑定しています
     form       ヨツマドの窓をつくる（/yotsumado/make/）・友達が言葉を選ぶ（/w/<id>。form が出るまでの読み込み中のスピナーも .play-wait・site/w/index.html）
   宝石の結果のページの中の「なりたいわたし」20問（.hs-qs-ideal・結果のカードの中）は、結果のページの一部なので列を出したまま（2026-10-06 ユーザー決定。一覧に入れない）
   :has が使えないブラウザでは、答える画面でも列が出たまま（ほかは変わらない）。:has を含む決まりは、ほかの決まりと1つにまとめない（まとめると全部が効かなくなる） */
@media screen and (min-width: 1280px) {
  body.pc-focus .pc-cols { --pc-shift: 0px; display: block; }
  body.pc-focus .pc-cols > main { margin-inline: auto; }
  .pc-cols:has(> main > :is(.sn-q, .sn-half, .it-play, .play-wait, .ate-q, .itm-q, .itm-flow, .sh-q, .hs-test, .hs-chap, .hs-finish, form), > main > #app > :is(.sn-q, .sn-half, .it-play, .play-wait, .ate-q, .itm-q, .itm-flow, .sh-q, .hs-test, .hs-chap, .hs-finish, form)) { --pc-shift: 0px; display: block; }
  .pc-cols > main:has(> :is(.sn-q, .sn-half, .it-play, .play-wait, .ate-q, .itm-q, .itm-flow, .sh-q, .hs-test, .hs-chap, .hs-finish, form), > #app > :is(.sn-q, .sn-half, .it-play, .play-wait, .ate-q, .itm-q, .itm-flow, .sh-q, .hs-test, .hs-chap, .hs-finish, form)) { margin-inline: auto; }
}
@media screen and (min-width: 1024px) {
  body.pc-focus .pc-side { display: none; }
  .pc-cols > main:has(> :is(.sn-q, .sn-half, .it-play, .play-wait, .ate-q, .itm-q, .itm-flow, .sh-q, .hs-test, .hs-chap, .hs-finish, form), > #app > :is(.sn-q, .sn-half, .it-play, .play-wait, .ate-q, .itm-q, .itm-flow, .sh-q, .hs-test, .hs-chap, .hs-finish, form)) ~ .pc-side { display: none; }
}
/* 左の列: 宝石性格診断の案内（公開のときだけ addHosekiLinks が足す）と、診断・テストの一覧 */
.side-gem { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: linear-gradient(135deg, #2a1f5c, #6447e0); color: #fff; text-decoration: none; }
.side-gem-art { width: 48px; height: 48px; display: block; background-position: center; background-size: contain; background-repeat: no-repeat; } /* 絵（background-image）は上の min-width: 1280px の中で付ける（ここで background をまとめて書くと、絵が消える） */
.side-gem b { display: flex; align-items: center; gap: 6px; font: 700 15px/1.3 var(--f-round); }
.side-gem b i { font: 800 9.5px/1 var(--f-round); font-style: normal; letter-spacing: .08em; background: #fff; color: #4b30c8; border-radius: 999px; padding: 3px 6px; }
.side-gem small { display: block; font-size: 11.5px; line-height: 1.45; color: #e6e1ff; margin-top: 2px; }
.side-gem:hover { filter: brightness(1.08); }
.side-gem[aria-current] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.side-list { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 10px; display: grid; gap: 10px; }
.side-group h2 { font-size: 12px; letter-spacing: .06em; color: var(--muted); margin: 0 0 2px; padding: 0 8px; line-height: 1.6; }
.side-links { display: grid; gap: 0 2px; }
.side-links.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.side-links a { display: flex; align-items: center; gap: 7px; min-height: 27px; padding: 2px 8px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 13px; line-height: 1.3; min-width: 0; }
.side-links a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-links a i { width: 8px; height: 8px; border-radius: 3px; background: var(--tc, var(--ink)); flex: none; }
.side-links a:hover { background: var(--bg); }
.side-links a[aria-current] { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); } /* 今いるページ（その診断の計算のしかた・結果のページも） */
/* 列の文は文節で折り返す（宝石のページだけ hoseki-app.css の .hs-page p, .hs-page li が効いて、ほかのページは「テストのサイ／トです」のように語の途中で割れていた。どのページでも同じ折り返しに） */
.pc-side p, .pc-side li { word-break: auto-phrase; }
/* 右の列: ナカミドとは・遊び方・新しい読みもの */
.side-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.side-card h2 { font-size: 14.5px; }
.side-card p { font-size: 12.8px; line-height: 1.8; color: var(--ink2); }
.side-more { font-size: 12.5px; font-weight: 700; color: var(--ink2); text-decoration: none; justify-self: start; }
.side-more:hover { text-decoration: underline; }
.side-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: side-step; }
.side-steps li { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.5; color: var(--ink2); }
.side-steps li::before { counter-increment: side-step; content: counter(side-step); align-self: center; width: 22px; height: 22px; border-radius: 50%; background: var(--frame); color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--f-round); }
.side-steps b { color: var(--ink); font-size: 13.5px; }
.side-reads { display: grid; }
.side-read { display: block; padding: 7px 0 7px 14px; position: relative; border-top: 1px dashed var(--line); text-decoration: none; font-size: 13px; font-weight: 700; line-height: 1.5; }
.side-read::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 6px; height: 6px; border-radius: 2px; background: var(--brand); }
.side-read:hover { text-decoration: underline; }
.side-read[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }