/* ══════════════════════════════════════════════════════════
   テイスト統一層（Issue #19）＿ 入口（案A2）の語彙を
   設問UI と 結果ページ に持ち込む。shindan.css の "後" に読む。

   狙いの違い（本人判断 2026-09-10）:
   ・設問UI  … 素材だけ揃える。地色・罫の太さ・角丸・選択色・書体を
                入口に合わせるが、「1画面1問」の静けさ（余白・1問の
                間合い）は保つ。12問続けて読ませる画面なので。
   ・結果ページ … 完全に合わせる。シェアされた人の着地点なので、
                入口と同じ世界に見えないと別サイトに見える。

   entry.css には触らない。あちらは #entry 配下に閉じており、
   ここは #quiz と body[data-type]（結果ページ）にだけ効かせる。
   ══════════════════════════════════════════════════════════ */

:root {
  /* 入口（案A2）と同じ値。--a2-* は #entry の中に閉じていて外から
     読めないので、共有したいぶんだけ --t-* として置き直している。
     値を変えるときは entry.css の :root 相当（#entry ブロック）と
     必ず一緒に動かすこと */
  --t-line: #3d2f26; /* 太罫の黒。文字色と同じ墨 */
  --t-paper-2: #fff1d9; /* 入口の一段濃い生成り。shindan の --paper-2 より濃い */
  --t-ink-soft: #6a594b; /* 生成り地で 5.9:1 */
  --t-yellow: #ffb703; /* CTAの面。文字は #3a2a10 を載せる前提 */
  --t-yellow-ink: #3a2a10; /* #ffb703 の上で 8.9:1 */
  --t-yellow-soft: #fff3d6; /* 選択中の淡い面 */
  --t-shadow: 4px 4px 0 rgba(61, 47, 38, 0.14); /* カードのベタ影 */
}

/* ══════════════════════════════════════════════════════════
   1. 設問UI（素材だけ揃える）
   余白・行間・1問1画面の構造には触らない
   ══════════════════════════════════════════════════════════ */

#quiz .q-progress {
  font-family: var(--maru);
  font-weight: 700;
}

/* 進行バー: 細い罫 → 入口と同じ「黒縁＋黄の面」 */
#quiz .q-bar {
  height: 12px;
  border: 2px solid var(--t-line);
  border-radius: 999px;
  background: #fff;
  padding: 0;
  overflow: hidden;
}
#quiz .q-bar i {
  background: var(--t-yellow);
}

#quiz .q-back {
  font-family: var(--maru);
  font-weight: 700;
}

/* 質問文: 明朝 → 丸ゴシック。ただし字送り・行間は設問のまま
   （入口の見出しほど詰めると12問が読みづらくなる） */
#quiz .q-text {
  font-family: var(--maru);
  font-weight: 700;
}

/* 選択肢: 細罫の白ボタン → 入口のカードと同じ 2px 黒罫＋角丸 */
#quiz .q-opts button {
  border: 2px solid var(--t-line);
  border-radius: 12px;
  background: #fff;
  font-family: var(--maru);
  font-weight: 700;
  color: var(--ink);
}
#quiz .q-opts button:hover {
  background: var(--t-yellow-soft);
  border-color: var(--t-line);
}
/* 選択中は「黄の面＋朱の縁」。入口の .tags__free と同じ朱を使う */
#quiz .q-opts button[aria-pressed="true"] {
  background: var(--t-yellow-soft);
  border-color: var(--vermilion);
  box-shadow: inset 0 0 0 1px var(--vermilion);
}
#quiz .q-opts button:focus-visible {
  outline: 3px solid var(--vermilion);
  outline-offset: 2px;
}

#quiz .q-note {
  color: var(--t-ink-soft);
}

/* ══════════════════════════════════════════════════════════
   2. 結果ページ（完全に合わせる）
   body[data-type] が付くのは 01〜04 の4枚だけ。index.html には
   付かないので、ここから下が入口に漏れることはない
   ══════════════════════════════════════════════════════════ */

body[data-type] {
  --paper-2: var(--t-paper-2); /* 地の濃い生成りを入口と同じに */
  --ink-soft: var(--t-ink-soft);
}

/* 見出しは全部 丸ゴシック 900 へ。shindan.css 末尾の「寄せる層」が
   700 で当てているので、そこに勝つ強さで書き直す */
body[data-type] h1,
body[data-type] h2,
body[data-type] h3,
body[data-type] .rc-name,
body[data-type] .disp {
  font-family: var(--maru);
  font-weight: 900;
  letter-spacing: 0.01em;
}

/* セクションの英字ラベル → 入口の .sec-title__en と同じ字面 */
body[data-type] .eyebrow,
body[data-type] .rc-kicker {
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--vermilion);
}

/* ── 結果ヒーロー ─────────────────────────────────
   入口のヒーローと同じ「点々の地＋下に太罫」 */
body[data-type] .result-hero {
  background:
    radial-gradient(circle at 1px 1px, rgba(176, 53, 15, 0.13) 1px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(180deg, #fff5e1 0%, var(--paper) 100%);
  border-bottom: 3px solid var(--t-line);
}
body[data-type] .rc-formal {
  color: var(--t-ink-soft);
}

/* 診断名の下の帯。入口の .promise と同じ朱ベタ */
body[data-type] .rc-kicker {
  display: inline-block;
  border: 2px solid var(--t-line);
  border-radius: 999px;
  background: #fff;
  padding: 5px 14px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}

/* ── 見出しの丸番号。入口の .type__no / .check-list__n と同じ形 ── */
body[data-type] .rc-sec h2 {
  font-family: var(--maru);
  font-weight: 900;
  font-size: clamp(17px, 4.6vw, 21px);
  gap: 10px;
}
/* 見出しの印。入口のシールと同じ「黒縁＋タイプ色の面」。
   大きくすると空のラジオボタンに見えるので 14px で止める */
body[data-type] .rc-sec h2::before {
  width: 14px;
  height: 14px;
  border: 2px solid var(--t-line);
  background: var(--accent);
  flex: none;
}

/* ── 本文カード。細罫 → 入口の 3px 黒罫＋角丸＋ベタ影 ────── */
body[data-type] .rc-list {
  background: #fff;
  border: 3px solid var(--t-line);
  border-radius: 16px;
  box-shadow: var(--t-shadow);
  padding: 12px 16px;
  /* list-style は none のまま。li::before の「・」と二重になる */
}

/* 「言いがち」は吹き出しにする。入口の .quote と同じしっぽ付き */
body[data-type] .rc-say {
  position: relative;
  background: #fff;
  border: 3px solid var(--t-line);
  border-radius: 16px 16px 16px 4px;
  box-shadow: var(--t-shadow);
  padding: 14px 16px;
  list-style: none;
}
body[data-type] .rc-say li {
  font-family: var(--maru);
  font-weight: 700;
}
body[data-type] .rc-say li + li {
  margin-top: 6px;
}
body[data-type] .rc-say::before,
body[data-type] .rc-say::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -14px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 14px 0 0;
  border-color: var(--t-line) transparent transparent transparent;
}
body[data-type] .rc-say::after {
  bottom: -9px;
  left: 21px;
  border-width: 10px 10px 0 0;
  border-color: #fff transparent transparent transparent;
}

/* トリセツ本文は囲まない（4本続くので、囲むと重い）。
   代わりに見出しの罫を入口と同じ太さにする */
body[data-type] .torisetsu .rc-sec h2 {
  border-top: 3px solid var(--t-line);
  padding-top: 18px;
}
body[data-type] .torisetsu .rc-sec:first-child h2 {
  border-top: 0;
  padding-top: 0;
}

/* ── 節の境目。入口のジグザグ罫を、地色が変わる所に置く ──── */
body[data-type] .share,
body[data-type] .signup {
  position: relative;
  border-top: 3px solid var(--t-line);
  border-bottom: 3px solid var(--t-line);
}
/* 入口の .zig と同じギザギザ。太罫のすぐ下に敷いて「ここから別の話」を出す */
body[data-type] .share::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background:
    linear-gradient(-45deg, var(--paper-2) 50%, transparent 50%) 0 0 / 16px 16px repeat-x,
    linear-gradient(45deg, var(--paper-2) 50%, transparent 50%) 0 0 / 16px 16px repeat-x,
    var(--orange);
}

/* ── ボタン。入口の .cta と同じ「黄の面＋黒罫＋ベタ影」 ──── */
body[data-type] .btn {
  border: 3px solid var(--t-line);
  border-radius: 999px;
  background: var(--t-yellow);
  color: var(--t-yellow-ink);
  font-family: var(--maru);
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 5px 0 var(--t-line);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
body[data-type] .btn:hover {
  background: var(--t-yellow);
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--t-line);
}
body[data-type] .btn small {
  color: var(--t-yellow-ink);
  opacity: 1;
  font-weight: 700;
}
body[data-type] .btn:focus-visible {
  outline: 3px solid var(--vermilion);
  outline-offset: 3px;
}
/* 白抜きボタン（ストーリーズ用画像）は面を白にして同じ骨格に */
body[data-type] .btn--ghost {
  background: #fff;
  color: var(--vermilion);
}
body[data-type] .btn--ghost:hover {
  background: #fff;
}

/* シェアのピル。入口の .tags と同じ 2px 黒罫の丸 */
body[data-type] .share-pills a,
body[data-type] .share-pills button {
  border: 2px solid var(--t-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--maru);
  font-weight: 700;
}
body[data-type] .share-pills a:hover,
body[data-type] .share-pills button:hover {
  background: var(--t-yellow-soft);
}

/* ── 他の3タイプ。入口の .type カードと同じ見え方に ──────── */
body[data-type] .others details {
  border: 3px solid var(--t-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--t-shadow);
  padding: 4px 12px;
}
body[data-type] .others details + details {
  margin-top: 12px;
}
body[data-type] .others summary::after {
  font-family: var(--maru);
  font-weight: 900;
  color: var(--vermilion);
}
body[data-type] .others summary .no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--t-line);
  background: var(--vermilion);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}
/* 顔は丸く切らない（全身の絵なので頭が欠ける）。白地の角丸カードに載せる */
body[data-type] .others summary .other-char {
  border: 2px solid var(--t-line);
  border-radius: 10px;
  background: #fff;
  padding: 2px;
}
body[data-type] .send-friend {
  border: 2px solid var(--t-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--maru);
  font-weight: 700;
}
body[data-type] .send-friend:hover {
  background: var(--t-yellow-soft);
  border-color: var(--t-line);
}

/* ── 同意文。細罫 → 入口の破線カード（.maker-list と同じ調子） ── */
body[data-type] .signup .consent {
  border: 2px dashed var(--t-line);
  border-left-width: 2px;
  border-radius: 12px;
  background: #fff;
}

body[data-type] .story-out img {
  border: 2px solid var(--t-line);
  border-radius: 8px;
}

/* ── 上部の帯（シェアで来た人向け）も入口の語彙で ───────── */
body[data-type] .visitor-band {
  border-bottom: 3px solid var(--t-line);
}

/* ── 動きを減らす設定 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-type] .btn,
  #quiz .q-opts button {
    transition: none !important;
  }
}