/* 配色と書体はロゴに寄せる：白地、ロゴの青、ひだまりの黄、見出しは丸ゴシック。
   レイアウトは mock.html のまま（ボタン→リンクにした箇所のセレクタを除く）。 */
:root{
  --paper:#FFFFFF;   /* ロゴ・OP動画の地と同じ白 */
  --card:#F6F9FC;    /* うすい空色 */
  --ink:#1D3A5C;     /* 文字：黒ではなく深い青 */
  --muted:#5F7188;
  --line:#DDE6EF;
  --accent:#2B63A0;  /* ロゴの文字の青 */
  --warm:#98650A;    /* 文字に使う琥珀（白地で読める濃さ） */
  --sun:#F6CB5A;     /* ロゴの太陽。線・塗り・マーカー用（文字には使わない） */
  --band:#EDF4FA;
  --r:12px;          /* 角丸 */
  --font-d:"Zen Maru Gothic","Zen Kaku Gothic New",system-ui,sans-serif;
  --font-b:"Zen Kaku Gothic New",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131D29;--card:#1A2635;--ink:#E4ECF5;--muted:#9DB0C5;--line:#2A3A4D;
    --accent:#8CBBEA;--warm:#F0C56A;--sun:#E4BC55;--band:#1D2C3D;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#131D29;--card:#1A2635;--ink:#E4ECF5;--muted:#9DB0C5;--line:#2A3A4D;
  --accent:#8CBBEA;--warm:#F0C56A;--sun:#E4BC55;--band:#1D2C3D;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-b);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:660px;margin:0 auto;padding-inline:18px}

header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:13px;flex-wrap:wrap}
.brand{color:inherit;text-decoration:none;font-family:var(--font-d);font-size:19px;font-weight:600;letter-spacing:.05em;white-space:nowrap}
.brand small{display:block;font-family:var(--font-b);font-size:10px;font-weight:400;letter-spacing:.16em;color:var(--muted);margin-top:1px}
nav{display:flex;gap:4px}
nav a{text-decoration:none;
  font:inherit;font-size:13px;padding:6px 14px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--muted);
}
nav a[aria-current="true"]{background:var(--ink);color:var(--paper)}
nav a:not([aria-current="true"]):hover{border-color:var(--line);color:var(--ink)}

.notice{background:var(--band);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);padding-block:9px}

h1{font-family:var(--font-d);font-weight:600;font-size:26px;line-height:1.5;margin:0 0 10px;text-wrap:balance}
h2{font-family:var(--font-d);font-weight:600;font-size:17px;margin:0 0 4px;letter-spacing:.03em}
.lede{color:var(--muted);font-size:14px;margin:0 0 30px;max-width:44ch}
section{padding-block:30px}
.sublabel{font-size:11px;letter-spacing:.14em;color:var(--muted);margin-bottom:9px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px 18px}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field > .sublabel{margin-bottom:7px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font:inherit;font-size:13px;padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  transition:background .12s,color .12s,border-color .12s;
}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:#12202F}}
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#12202F}
.chip:not([aria-pressed="true"]):hover{color:var(--ink);border-color:var(--muted)}

.resbar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.count{font-size:13px;color:var(--muted)}
.count b{font-family:var(--font-d);font-size:19px;color:var(--ink);font-weight:600;margin-inline:2px}
.reset{font:inherit;font-size:12px;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}

.list{display:grid;gap:12px}
.entry{
  width:100%;text-decoration:none;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;display:grid;grid-template-columns:auto 1fr;gap:14px;transition:border-color .12s;
}
.entry:hover{border-color:var(--muted)}
.entry:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.av{width:54px;height:54px;flex:none;border-radius:50%;display:block;overflow:hidden}
.av img{width:100%;height:100%;display:block}
.body{min-width:0}
.name{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:2px}
.name strong{font-family:var(--font-d);font-size:16px;font-weight:600}
.years{font-size:12px;color:var(--warm);font-variant-numeric:tabular-nums;white-space:nowrap}
.meta{font-size:12.5px;color:var(--muted);margin-bottom:9px}
.same{display:flex;flex-wrap:wrap;gap:5px}
.same span{font-size:11.5px;padding:2px 8px;border-radius:2px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);white-space:nowrap}
.word{font-family:var(--font-d);font-size:13.5px;color:var(--ink);margin-top:10px;padding-left:11px;border-left:3px solid var(--sun)}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:30px 20px;text-align:center;color:var(--muted);font-size:13.5px}

.dist{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.bar{display:flex;height:7px;border-radius:999px;overflow:hidden;background:var(--band);margin:12px 0 11px}
.bar i{display:block}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:2px;flex:none}
.foot{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.7}

.back{display:inline-block;text-decoration:none;font:inherit;font-size:13px;color:var(--muted);background:none;border:none;cursor:pointer;padding:0;margin-bottom:24px}
.back:hover{color:var(--ink)}
.dhead{display:flex;gap:18px;align-items:center;margin-bottom:26px}
.dhead .av{width:78px;height:78px}
.dhead h2{font-size:23px;margin-bottom:3px}
.facts{border-top:1px solid var(--line);margin-bottom:30px}
.facts div{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.facts dt{flex:none;width:7.5em;color:var(--muted);font-size:12.5px;margin:0}
.facts dd{margin:0}
.tl{display:grid;gap:0;margin:0 0 30px}
.tl div{display:flex;gap:16px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.tl b{flex:none;width:3.4em;text-align:right;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.words{display:grid;gap:10px;margin-bottom:30px}
.words p{font-family:var(--font-d);font-size:17px;margin:0;padding:12px 16px;background:var(--card);border-left:3px solid var(--sun)}
.out{display:inline-block;font-size:13.5px;color:var(--accent);border:1px solid var(--line);border-radius:var(--r);padding:9px 16px;text-decoration:none}
.out:hover{border-color:var(--accent)}

.form-sec{margin-bottom:34px}
.form-sec h2{margin-bottom:3px}
.hint{font-size:12.5px;color:var(--muted);margin:0 0 14px;line-height:1.8}
label.f{display:block;margin-bottom:14px}
label.f span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:14px;padding:10px 12px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > *{flex:1 1 150px;min-width:0}
.avpick{display:flex;flex-wrap:wrap;gap:6px}
.avpick button{background:none;border:1px solid transparent;border-radius:6px;padding:3px;cursor:pointer;line-height:0}
.avpick button[aria-pressed="true"]{border-color:var(--accent);background:var(--card)}
.avpick .av{width:50px;height:50px}
.colorpick{display:flex;gap:8px;margin-top:12px}
.colorpick button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.colorpick button[aria-pressed="true"]{border-color:var(--ink)}
.tlrow{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.tlrow input[type=number]{flex:none;width:76px}
.tlrow input[type=text]{flex:1}
.tlrow button{font:inherit;font-size:12px;color:var(--muted);background:none;border:none;cursor:pointer;flex:none;padding:4px}
.add{font:inherit;font-size:13px;padding:8px 16px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:var(--r);cursor:pointer}
.add:hover{border-color:var(--muted)}
.consent{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 18px 18px}
.consent ol{margin:0;padding:0}
.consent li{list-style:none;padding:14px 0;border-bottom:1px solid var(--line)}
.consent li:last-child{border-bottom:none}
.consent b{display:block;font-size:14px;margin-bottom:3px}
.consent p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.75}
.checks{margin-top:18px;display:grid;gap:9px}
.checks label{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;cursor:pointer}
.checks input{margin:5px 0 0}
.submit{width:100%;font:inherit;font-size:15px;padding:14px;margin-top:22px;cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:999px}
.tagline{font-family:var(--font-d);font-size:20px;line-height:1.7;margin:0 0 8px;text-wrap:balance}
.tagsub{font-size:13px;color:var(--muted);margin:0 0 28px;line-height:1.8}
footer{border-top:1px solid var(--line);margin-top:20px;padding-block:26px;font-size:12px;color:var(--muted);line-height:1.9}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- ここから本番で足したもの ---------- */

/* 見出しを語の途中で折り返さない（折り返しは .nw の切れ目だけ） */
.nw{display:inline-block;max-width:100%}

/* トップの冒頭は中央に置く */
.hero{text-align:center;margin-bottom:30px}
.hero .lede{margin:0 auto 14px;max-width:none}
.more{font-size:13px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.more:hover{color:var(--ink)}

/* このサイトをつくった理由：中央揃え・短い行・要所を太字（note のような読み物） */
.story{max-width:30em;margin:0 auto;text-align:center}
.story h1{margin-bottom:44px}
.story p{margin:0 0 2em;font-size:15.5px;line-height:2.1}
.story strong{font-weight:700;color:var(--ink);background:linear-gradient(transparent 60%,color-mix(in srgb,var(--sun) 55%,transparent) 60%)}
.story .turn{font-family:var(--font-d);font-size:19px;font-weight:600;line-height:1.9;margin:2.6em 0}
.story .sep{width:40px;border:none;border-top:1px solid var(--line);margin:3.4em auto}
.story .sign{text-align:right;font-family:var(--font-d);font-size:16px;margin:3.2em 0 0;padding-right:.5em}
.story .go{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:48px}
@media (max-width:420px){.story p{font-size:14.5px}}
footer a{color:inherit;text-underline-offset:3px}

/* インライン style を使わない（CSP）ためのクラス */
.hue-1{background:#8DB8E2}.hue-2{background:#F4CD6A}.hue-3{background:#9FCBA6}
.hue-4{background:#F0B196}.hue-5{background:#B5B0DD}.hue-6{background:#94CFD6}
.dsame{margin-bottom:24px}
.hint.tight{margin-top:-4px}
.hint.lead{margin-bottom:12px}

/* 入力エラー */
.err{display:block;font-size:12px;color:var(--warm);margin:5px 0 0;line-height:1.6}
[aria-invalid="true"]{border-color:var(--warm)!important}
.errbox{margin-top:18px;padding:12px 14px;border:1px solid var(--warm);border-radius:var(--r);font-size:13px;line-height:1.8}
.errbox ul{margin:6px 0 0;padding-left:1.2em}
.submit:disabled{opacity:.5;cursor:default}
.ts{margin-top:16px}
.ts:empty{margin-top:0}

/* 完了画面 */
.linkbox{display:flex;gap:8px;align-items:stretch;margin:0 0 14px}
.linkbox input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.linkbox .add{flex:none}
.done .checks{margin-top:22px}

/* 編集画面 */
.saved{font-size:13px;color:var(--muted);margin:10px 0 0;min-height:1.75em}
.confirm{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.confirm p{margin:0 0 12px;font-size:13.5px}
.confirm .row{gap:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* OP（初回のみ。op-gate.js が html[data-op] を付けたときだけ出る） */
.op{display:none}
html[data-op="1"] .op{
  display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;
  background:#fff;transition:opacity .4s;cursor:pointer;
}
html[data-op="1"] body{overflow:hidden}
.op video{width:100%;height:100%;object-fit:contain;display:block}
.op.out{opacity:0}
.op-skip{
  position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  font:inherit;font-size:12px;color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;
}
.op-skip:hover{color:var(--ink);border-color:var(--muted)}

/* 承認画面 /admin */
.adm h1{margin-top:6px}
.adm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 14px}
.adm-tabs a.chip{text-decoration:none}
.adm-tabs a.chip b{font-weight:500;margin-left:4px}
.adm-tabs a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#fff}
.adm-list{display:grid;gap:16px;margin-top:18px}
.adm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px}
.adm-card .dhead{margin-bottom:16px}
.adm-card .facts{margin-bottom:20px}
.adm-card .words p{font-size:15px}
.adm-url{word-break:break-all}
.adm-url a{color:var(--accent);text-underline-offset:3px}
.adm-warn{font-size:13px;margin:0 0 14px;padding:8px 12px;border-radius:var(--r)}
.adm-warn.hit{border:1px solid var(--warm);color:var(--warm)}
.adm-warn.maybe{border:1px dashed var(--muted);color:var(--muted)}
mark.hit{background:color-mix(in srgb,var(--warm) 35%,transparent);color:inherit;padding:0 2px}
mark.maybe{background:transparent;color:inherit;border-bottom:2px dotted var(--warm)}
.adm-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:14px}
.adm-actions form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.adm-actions input[type=text]{width:14em;padding:7px 10px;font-size:13px}
.adm-actions a.add{text-decoration:none;display:inline-block}
.add.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.danger-link{margin-left:auto;color:var(--warm)!important}
.adm-done{font-size:13.5px;padding:10px 14px;border:1px solid var(--line);background:var(--card);border-radius:var(--r)}
.adm-confirm{max-width:28em;margin-top:18px}

/* ロゴ画像 */
.brand img{display:block;height:34px;width:auto}
.hero-art{display:block;width:100%;max-width:440px;height:auto;margin:0 auto 6px}
.brand img,.hero-art{mix-blend-mode:multiply} /* 白地を背景になじませる */
@media (max-width:420px){.brand img{height:28px}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand img{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) brightness(1.1)}
  :root:not([data-theme="light"]) .hero-art{mix-blend-mode:normal;background:#fff;border-radius:18px;padding:10px 14px}
}
:root[data-theme="dark"] .brand img{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) brightness(1.1)}
:root[data-theme="dark"] .hero-art{mix-blend-mode:normal;background:#fff;border-radius:18px;padding:10px 14px}

/* 欄の下の小さな補足 */
.fnote{display:block;font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.6}

/* トップ：もっと条件を選ぶ */
.more-filters{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
.more-filters summary{cursor:pointer;font-size:13px;color:var(--accent);list-style:none;display:inline-flex;align-items:center;gap:6px}
.more-filters summary::-webkit-details-marker{display:none}
.more-filters summary::before{content:"＋";font-size:12px}
.more-filters[open] summary::before{content:"－"}
.more-filters[open] summary{margin-bottom:14px}
.chips.mbti .chip{min-width:4.6em;text-align:center;font-variant-numeric:tabular-nums}

/* 統計ページ。棒は1系列なので色は1つ（ロゴの青）。表の濃さは同じ青の4段（明→暗）。
   色は dataviz の検証スクリプトで確認済み：light #2B63A0 / dark #4F95E8、段階は下記。 */
:root{--bar:#2B63A0;--x1:#94B8E0;--x2:#5F92CD;--x3:#2B63A0;--x4:#1B4677;--x-lo-ink:#12202F;--x-hi-ink:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bar:#4F95E8;--x1:#2A4E7C;--x2:#3A6FAE;--x3:#4F95E8;--x4:#9CC5F2;--x-lo-ink:#E4ECF5;--x-hi-ink:#12202F}}
:root[data-theme="dark"]{--bar:#4F95E8;--x1:#2A4E7C;--x2:#3A6FAE;--x3:#4F95E8;--x4:#9CC5F2;--x-lo-ink:#E4ECF5;--x-hi-ink:#12202F}
.stats h1{margin-top:6px}
.stats-total{font-size:13px;color:var(--muted);margin:0}
.stats-total b{font-family:var(--font-d);font-size:19px;color:var(--ink);margin-inline:2px}
.stats-list{display:grid;gap:14px}
.chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 14px;margin-bottom:14px}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.chart-head h2{font-size:16px;margin:0}
.chart-n{font-size:12px;color:var(--muted);white-space:nowrap}
.chart-note{font-size:12px;color:var(--muted);margin:4px 0 0;line-height:1.7}
.chart-empty{font-size:13px;color:var(--muted);margin:12px 0 4px}
.bars{display:grid;gap:8px;margin:14px 0 6px}
.brow{display:grid;grid-template-columns:minmax(7em,13em) 1fr 3.4em;align-items:center;gap:10px;font-size:13px;border-radius:6px}
.brow:hover{background:color-mix(in srgb,var(--bar) 7%,transparent)}
.blabel{color:var(--ink);line-height:1.4}
.btrack{height:12px;display:block}
.btrack i{display:block;height:100%;min-width:3px;background:var(--bar);border-radius:0 4px 4px 0}
.bval{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.bval small{font-size:10.5px;color:var(--muted);margin-left:1px}
.as-table{margin-top:8px}
.as-table summary{font-size:12px;color:var(--accent);cursor:pointer}
.as-table table,.xtab{border-collapse:collapse;font-size:12.5px;margin-top:8px;width:100%}
.as-table th,.as-table td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;font-weight:400}
.as-table td{text-align:right;font-variant-numeric:tabular-nums}
.xwrap{overflow-x:auto;margin-top:12px}
.xtab th{font-weight:400;color:var(--muted);padding:6px;text-align:left;white-space:nowrap}
.xtab thead th{font-size:11.5px;text-align:center}
.xtab td{text-align:center;padding:9px 6px;font-variant-numeric:tabular-nums;border:2px solid var(--card);border-radius:6px}
.xtab td.x0{color:var(--muted)}
.xtab td.x1{background:var(--x1);color:var(--x-lo-ink)}
.xtab td.x2{background:var(--x2);color:var(--x-lo-ink)}
.xtab td.x3{background:var(--x3);color:var(--x-hi-ink)}
.xtab td.x4{background:var(--x4);color:var(--x-hi-ink)}
.dist-more{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--accent)}
@media (max-width:420px){.brow{grid-template-columns:minmax(5.5em,8em) 1fr 3em;gap:8px;font-size:12.5px}}

/* ヘッダーを、ふつうのスマホ幅（375px前後）で1行に収める */
@media (max-width:420px){
  .hbar{gap:8px;flex-wrap:nowrap}
  .brand img{height:24px}
  nav{gap:2px}
  nav a{font-size:12.5px;padding:6px 10px}
}
@media (max-width:340px){.hbar{flex-wrap:wrap}}

/* お試し版の帯（mock の .notice を使う） */
.notice.beta{text-align:center;background:color-mix(in srgb,var(--sun) 22%,var(--paper));color:var(--ink);font-size:12.5px}
.notice.beta a{color:var(--accent);margin-left:4px;text-underline-offset:3px}

/* ご意見フォーム */
.fb .hero{margin-bottom:20px}
.fb .lede{max-width:none}
textarea{width:100%;font:inherit;font-size:14px;line-height:1.8;padding:12px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r);resize:vertical}
.fb .fnote{text-align:right}
.fb-back{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
footer a+a{margin-left:0}

/* 承認画面：ご意見 */
.fb-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin-bottom:10px}
.fb-cat{color:var(--accent);font-weight:500}
.fb-body{white-space:pre-wrap;font-size:14px;line-height:1.9;margin:0 0 14px}