/* =====================================================================
   異文化“誤読タイプ”診断 ── スタイル（静的サイト版）
   デザイン方針：文化人類学のフィールドノート × 測量プロット図。
   署名要素＝7段階「サーベイ・ストリップ」ゲージ（測量スケールに“現在地”ピン）。
   ===================================================================== */

:root{
  --ink:   #17233B;   /* 測量インクの濃紺（基調の暗色） */
  --bone:  #E7E3D6;   /* 骨色の紙（背景。あえて定番クリームを外す） */
  --pin:   #2942C7;   /* ウルトラマリン＝“現在地”ピン／検証点 */
  --clay:  #B95B38;   /* 補助の暖色（誤読フラグ。ごく控えめに） */
  --fog:   #CFC9B8;   /* パネルのくすみ */
  --line:  #9C9683;   /* 罫線 */
  --paper: #F1EEE4;   /* 明るい紙（カード面） */

  --mono: "Space Mono", ui-monospace, monospace;
  --serif:"Shippori Mincho B1", serif;
  --sans: "Noto Sans JP", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--sans); line-height:1.75;
  background-image:
    linear-gradient(rgba(23,35,59,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,35,59,.035) 1px, transparent 1px);
  background-size:26px 26px;
}
.wrap{ width:min(760px, 92vw); margin-inline:auto; }
a{ color:var(--pin); }
.hidden{ display:none !important; }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.32em;
  color:var(--pin); margin:0 0 1.1rem; text-transform:uppercase;
}

/* ── CTA ─────────────────────────────────────────── */
.cta{
  display:inline-block; background:var(--ink); color:var(--bone);
  font-weight:700; text-decoration:none; padding:.95rem 1.6rem;
  border:none; cursor:pointer; font-size:1rem; font-family:var(--sans);
  border-radius:2px; transition:transform .12s ease, background .2s ease;
}
.cta:hover{ transform:translateY(-2px); background:#0f1930; }
.cta:disabled{ opacity:.55; cursor:default; transform:none; }
.cta.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.cta.ghost:hover{ background:var(--ink); color:var(--bone); }

/* =====================  LP  ===================== */
.hero{ padding:clamp(3rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem); }
.hero-title{
  font-family:var(--serif); font-weight:800; line-height:1.28;
  font-size:clamp(1.5rem,6.4vw,3.4rem); margin:.2rem 0 1.6rem; letter-spacing:.01em;
}
.ink-mark{ background:linear-gradient(transparent 62%, rgba(41,66,199,.22) 0); }
.lede{ font-size:1.06rem; margin:0 0 1.3rem; max-width:60ch; }
.lede strong{ color:var(--pin); font-weight:700; }
.micro{ font-family:var(--mono); font-size:.78rem; color:#5c6373; margin:.9rem 0 0; }
.hero .cta{ margin-top:.6rem; }

.section-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(2rem,5vw,3rem) 0; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card .k{ font-family:var(--mono); font-weight:700; color:var(--pin); margin:0 0 .3rem; }
.card h3{ font-family:var(--serif); font-size:1.15rem; margin:.1rem 0 .5rem; }
.card p{ font-size:.83rem; margin:0; color:#31384a; }

.thesis{ padding:clamp(2.6rem,7vw,4.5rem) 0; text-align:center; }
.thesis-line{ font-family:var(--serif); font-weight:700; font-size:clamp(1.3rem,4vw,2rem); margin:0 0 .8rem; }
.thesis-sub{ color:#31384a; margin:0 0 1.8rem; }

/* =====================  QUIZ  ===================== */
.quiz-head{ position:sticky; top:0; z-index:10; background:var(--bone); padding:1.1rem 0 .8rem; border-bottom:1px solid var(--line); }
.quiz-head .eyebrow{ margin-bottom:.7rem; }
.progress{ height:6px; background:var(--fog); border-radius:3px; overflow:hidden; }
.progress-bar{ height:100%; width:0; background:var(--pin); transition:width .35s ease; }
.counter{ font-family:var(--mono); font-size:.78rem; margin:.5rem 0 0; color:#5c6373; }

.quiz main{ padding:1.6rem 0 4rem; }
.notice{ background:#f7e9e2; color:var(--clay); border:1px solid var(--clay); padding:.7rem 1rem; border-radius:3px; font-size:.9rem; margin:0 0 1rem; }

.q{ border:none; margin:0 0 1.6rem; padding:1.3rem; background:var(--paper); border:1px solid var(--line); border-radius:4px; }
.q legend{ font-family:var(--serif); font-weight:700; font-size:1.08rem; padding:0; margin-bottom:.9rem; display:block; }
.qn{ display:inline-block; font-family:var(--mono); font-size:.78rem; color:var(--pin); margin-right:.6rem; letter-spacing:.05em; }

.opt{ display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .85rem; border:1px solid transparent; border-radius:3px; cursor:pointer; transition:background .12s, border-color .12s; }
.opt:hover{ background:#eae6d9; }
.opt input{ margin-top:.35rem; accent-color:var(--pin); flex:0 0 auto; }
.opt input:checked ~ span{ font-weight:500; }
.opt:has(input:checked){ background:#e4e7f5; border-color:var(--pin); }

.email-block .text{ display:block; margin-bottom:.6rem; }
.email-block .lbl{ display:block; font-size:.85rem; margin-bottom:.35rem; color:#31384a; }
.email-block input[type=email],
.email-block input[type=text]{
  width:100%; padding:.75rem .85rem; border:1px solid var(--line);
  border-radius:3px; font-family:var(--sans); font-size:1rem; background:#fff;
}
.consent span{ font-size:.85rem; color:#31384a; }
.hint{ font-family:var(--mono); font-size:.75rem; color:#5c6373; margin:.5rem 0 0; }
.submit{ width:100%; margin-top:.5rem; }

/* =====================  RESULT  ===================== */
.result main{ padding:clamp(2rem,6vw,3.5rem) 0 3rem; }
.state{ text-align:center; font-family:var(--mono); font-size:.9rem; color:#5c6373; padding:3rem 1rem; }
.state.err{ color:var(--clay); }

.type-card{ text-align:center; padding:2rem 1rem 1.4rem; border:2px solid var(--ink); border-radius:6px; background:var(--paper); }
.type-name{ font-family:var(--serif); font-weight:800; font-size:clamp(2rem,7vw,3.1rem); margin:.2rem 0 .4rem; }
.type-tag{ font-family:var(--mono); font-size:.9rem; color:var(--pin); margin:0; }

.sec-h{ font-family:var(--serif); font-size:1.25rem; margin:2.4rem 0 1.1rem; padding-bottom:.5rem; border-bottom:1px solid var(--line); }

/* ── 署名要素：サーベイ・ストリップ（7段階ゲージ） ── */
.strip{ margin:0 0 1.5rem; }
.strip-top{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin-bottom:.4rem; }
.pole{ font-size:.82rem; color:#31384a; flex:0 0 auto; }
.axis-name{ font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; color:var(--pin); text-transform:uppercase; }
.gauge{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cell{
  position:relative; height:38px; background:var(--fog);
  border:1px solid var(--line); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
}
.cell.mid{ background:repeating-linear-gradient(45deg,var(--fog),var(--fog) 4px,#c6c1b0 4px,#c6c1b0 5px); }
.cell.pin{ background:var(--ink); border-color:var(--ink); }
.cell .dot{ width:12px; height:12px; border-radius:50%; background:var(--pin); box-shadow:0 0 0 3px var(--bone); }
.strip-ref{ font-family:var(--mono); font-size:.72rem; color:#5c6373; margin-top:.45rem; }
.strip-ref .tick{ color:var(--pin); }

/* ── 解説ブロック ── */
.read{ margin-top:1rem; }
.block{ padding:1.15rem 1.25rem; border-left:3px solid var(--line); background:var(--paper); margin:0 0 .9rem; border-radius:0 4px 4px 0; }
.block h3{ font-family:var(--serif); font-size:1.05rem; margin:0 0 .4rem; }
.block p{ margin:0; font-size:.96rem; }
.block.strength{ border-left-color:var(--pin); }
.block.misread{ border-left-color:var(--clay); }
.block.step{ border-left-color:var(--ink); }
.block.next{ background:var(--ink); border-left-color:var(--pin); }
.block.next h3, .block.next p{ color:var(--bone); }

/* ── オプトイン ── */
.optin{ margin-top:2.4rem; padding:1.6rem; border:1px dashed var(--line); border-radius:6px; background:var(--paper); }
.optin p{ font-size:.95rem; }
.optin-form input[type=email],
.optin-form input[type=text]{ width:100%; padding:.75rem .85rem; border:1px solid var(--line); border-radius:3px; font-size:1rem; margin:.4rem 0 .7rem; background:#fff; }
.optin.done p{ margin:0; color:var(--pin); font-weight:500; }

/* ── シェア ── */
.share-btns{ display:flex; flex-wrap:wrap; gap:.7rem; }
.sh{ font-family:var(--sans); font-size:.92rem; padding:.7rem 1.1rem; border-radius:3px; text-decoration:none; cursor:pointer; border:1px solid var(--ink); background:transparent; color:var(--ink); }
.sh.x{ background:var(--ink); color:var(--bone); }
.sh:hover{ transform:translateY(-1px); }

/* ── フッター ── */
.foot{ border-top:1px solid var(--line); margin-top:2rem; }
.foot .wrap{ display:flex; justify-content:space-between; align-items:center; padding:1.3rem 0; font-family:var(--mono); font-size:.78rem; color:#5c6373; gap:1rem; flex-wrap:wrap; }
.foot a{ color:#5c6373; }

/* ── 汎用 doc（privacy等） ── */
.doc{ padding:clamp(2rem,6vw,3.5rem) 0 3rem; }
.doc h1{ font-family:var(--serif); font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 1.2rem; }
.doc h2{ font-family:var(--serif); font-size:1.2rem; margin:2rem 0 .6rem; }
.doc p, .doc li{ font-size:.96rem; }
.doc .placeholder{ color:var(--clay); font-family:var(--mono); font-size:.85rem; }

/* ── レスポンシブ ── */
@media (max-width:640px){
  .grid3{ grid-template-columns:1fr; }
  .strip-top{ flex-wrap:wrap; }
  .axis-name{ order:-1; width:100%; margin-bottom:.15rem; }
  .cell{ height:32px; }
}

/* ── モーション配慮 ── */
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
:focus-visible{ outline:3px solid var(--pin); outline-offset:2px; }