/* ---- 文字サイズ：base 16px の N 倍で定義（最小 0.75rem = 12px）---- */
html{ font-size:16px; }   /* ← ここが base。すべての --fs-* はこの値の倍数 */
:root{
  --fs-xs:0.75rem;    /* ×0.75  = 12px（下限） */
  --fs-sm:0.8125rem;  /* ×0.8125= 13px */
  --fs-md:0.875rem;   /* ×0.875 = 14px */
  --fs-lg:0.9375rem;  /* ×0.9375= 15px */
  --fs-base:1rem;     /* ×1     = 16px（基準） */
  --fs-xl:1.125rem;   /* ×1.125 = 18px */
  --fs-2xl:1.25rem;   /* ×1.25  = 20px */
  --fs-3xl:1.5rem;    /* ×1.5   = 24px */
}

:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F7F6;
  --ink:#14171A; --ink-2:#4C545B; --ink-3:#636C74;
  --line:rgba(22,25,28,.14); --line-2:rgba(22,25,28,.07);
  /* プライマリー：紫 → ピンクのグラデーション（両端とも白文字で 5:1 以上） */
  --g1:#6D4AC8; --g2:#C22E6C;
  --grad:linear-gradient(100deg, var(--g1) 0%, var(--g2) 100%);
  --grad-text:var(--grad);
  --on-brand:#FFFFFF;
  --ai:#6D4AC8; --shu:#C22E6C; --gold:#806331;
  --thumb:#F2F2F4;
  --shadow:0 1px 2px rgba(22,25,28,.05), 0 12px 32px -18px rgba(22,25,28,.35);
  /* 角丸：--r=角丸 / --r-full=全丸。--r-btn を切り替えるとボタン全体の形が変わる */
  --r:4px;
  --r-full:999px;
  --r-btn:var(--r-full);
  --f-disp:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --f-body:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --f-mono:"Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-base); line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--f-disp); font-weight:700; line-height:1.4; text-wrap:balance; margin:0; }
p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:focus-visible{ outline:2px solid var(--shu); outline-offset:3px; }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.wrap{ width:min(100% - 40px, 720px); margin-inline:auto; }
.hidden{ display:none !important; }

/* ---------- 共通パーツ ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 30px; border-radius:var(--r-btn); background:var(--grad); color:var(--on-brand);
  font-size:var(--fs-base); font-weight:500; letter-spacing:.04em;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{ transform:translateY(-1px); opacity:.9; }
.btn.ghost{ background:transparent; color:var(--ink-2); border:1px solid var(--line); }
.btn.ghost:hover{ color:var(--ink); border-color:var(--ink-3); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- イントロ ---------- */
#intro{ padding:clamp(34px,7vh,72px) 0 40px; }
.intro-head{ border-bottom:1px solid var(--line); padding-bottom:34px; }
.intro-head .eyebrow{ margin-bottom:14px; }
.title{ font-size:clamp(2.25rem, 7vw, 3.5rem); letter-spacing:.02em; margin-top:14px; }
.title .num{
  font-family:var(--f-mono); font-weight:500;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.subtitle{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.5rem, 4.6vw, 2.125rem); line-height:1.5; color:var(--ink); margin-top:0; letter-spacing:.02em; }
.lede{ color:var(--ink-2); font-size:var(--fs-base); margin-top:20px; max-width:34em; }
.axis-list{ display:grid; gap:0; margin:34px 0 0; }
.axis-row{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--line-2);
}
.axis-row .pair{ font-family:var(--f-mono); font-size:var(--fs-base); letter-spacing:.06em; white-space:nowrap; }
.axis-row .pair .l{ color:var(--ai); } .axis-row .pair .r{ color:var(--shu); }
.axis-row .pair .sep{ color:var(--ink-3); }
.axis-row .desc{ font-size:var(--fs-lg); color:var(--ink-2); line-height:1.7; }
.axis-row .desc b{ font-weight:500; color:var(--ink); }
.meta{ display:flex; flex-wrap:wrap; gap:28px; margin:28px 0 0; }
.meta div{ font-size:var(--fs-md); color:var(--ink-2); }
.meta div span{ display:block; font-family:var(--f-mono); font-size:var(--fs-2xl); color:var(--ink); }
/* ファーストビューのメインCTA */
.fv-cta{ margin-top:26px; }
.fv-cta .btn{ width:100%; }
/* 6軸の説明の下に置くモンスター一覧への導線 */
.axis-cta{ margin-top:28px; }
.axis-cta .btn{ width:100%; text-decoration:none; }
.start-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }
.start-row .btn{ flex:1 1 0; min-width:0; }
.note{ font-size:var(--fs-md); color:var(--ink-3); line-height:1.8; margin-top:44px; }

/* ---------- 設問 ---------- */
#quiz{ min-height:100dvh; display:flex; flex-direction:column; }
.qbar{ position:sticky; top:0; background:var(--paper); z-index:5; padding-top:18px; }
.qbar-inner{ display:flex; align-items:center; gap:16px; padding-bottom:12px; }
.seg{ display:flex; gap:3px; flex:1; }
.seg i{ flex:1; height:3px; background:var(--line); border-radius:2px; overflow:hidden; position:relative; }
.seg i b{ position:absolute; inset:0 auto 0 0; width:0; background:var(--grad); transition:width .3s ease; }
.qcount{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-3); letter-spacing:.06em; }
.qmain{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:40px 0 30px; }
.qaxis{ margin-bottom:22px; }
.qtext{ max-width:24em; }
.qtext{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.375rem, 4.4vw, 1.875rem); line-height:1.7; letter-spacing:.01em; }
.scale{ margin-top:44px; width:100%; max-width:560px; }
.scale-ends{ display:flex; justify-content:space-between; font-size:var(--fs-sm); color:var(--ink-3); margin-bottom:12px; }
.opts{ display:flex; align-items:center; justify-content:space-between; gap:clamp(6px,2.5vw,18px); }
.opt{
  --sz:56px; --c:var(--ink-3);
  width:var(--sz); height:var(--sz); border-radius:50%;
  border:1.5px solid var(--c); display:grid; place-items:center;
  position:relative; transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.opt:hover{ transform:scale(1.06); }
.opt[data-v="2"], .opt[data-v="-2"]{ --sz:56px; }
.opt[data-v="1"], .opt[data-v="-1"]{ --sz:46px; }
.opt[data-v="0"]{ --sz:36px; }
.opt[data-v="2"], .opt[data-v="1"]{ --c:var(--shu); }
.opt[data-v="-2"], .opt[data-v="-1"]{ --c:var(--ai); }
.opt .k{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-3); opacity:0; transition:opacity .15s; }
.opt:hover .k{ opacity:1; }
.opt.sel{ background:var(--c); border-color:var(--c); }
.opt.sel .k{ opacity:0; }
.opt-lab{ font-size:var(--fs-sm); color:var(--ink-3); text-align:center; margin-top:10px; height:1.4em; }
.qfoot{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0 40px; border-top:1px solid var(--line-2); }
.qfoot .qhint{ flex:1; text-align:center; }
.qhint{ font-size:var(--fs-sm); color:var(--ink-3); }
@media (max-width:560px){
  .opt{ --sz:48px !important; }
  .opt[data-v="1"],.opt[data-v="-1"]{ --sz:40px !important; }
  .opt[data-v="0"]{ --sz:32px !important; }
  .qhint{ display:none; }
}

/* ---------- 結果 ---------- */
#result{ padding:0 0 90px; }
#result .res-head{ margin-top:34px; }
.res-head{ text-align:center; padding:26px 0 34px; border-bottom:1px solid var(--line); }
.code{
  font-family:var(--f-mono); font-size:clamp(2rem, 7.5vw, 3.25rem); font-weight:500;
  letter-spacing:.06em; display:inline-block;
}
.code .base{ color:var(--ink); }
/* サブタイプの2文字は、グラデーションの両端色で表す */
.code .sub{ color:var(--shu); }
.code .sub:nth-of-type(3){ color:var(--ai); }
.code .dash{ color:var(--ink-3); }
.res-name{ font-size:clamp(1.5rem, 5vw, 2.125rem); margin-top:14px; }
.res-tag{ color:var(--ink-2); font-size:var(--fs-base); margin-top:12px; }
/* コードの直下に置くサブタイプ名。コードより一回り小さく */
.res-label{ font-size:clamp(1.25rem, 4.4vw, 1.875rem); font-weight:700; line-height:1.5; margin-top:12px; }

.sec{ padding:40px 0; border-bottom:1px solid var(--line-2); }
.sec h2{ font-size:var(--fs-xl); letter-spacing:.06em; margin-bottom:22px; display:flex; align-items:center; gap:12px; }
.sec h2::after{ content:""; flex:1; height:1px; background:var(--line-2); }
.body-text{ font-size:var(--fs-base); line-height:2.05; color:var(--ink); }
.body-text + .body-text{ margin-top:16px; }

/* 6軸ゲージ（発散型：左＝藍 / 右＝朱、中央が均衡点） */
.gauges{ display:grid; gap:26px; }
.gauge{ display:grid; grid-template-columns:1fr; gap:8px; }
.g-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-md); }
.g-title{ color:var(--ink-3); font-size:var(--fs-sm); letter-spacing:.12em; }
.g-poles{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:var(--fs-md); }
.g-pole{ display:flex; align-items:baseline; gap:6px; color:var(--ink-3); }
.g-pole .l{ font-family:var(--f-mono); font-size:var(--fs-lg); }
.g-pole.on{ color:var(--ink); }
.g-pole.on.left .l{ color:var(--ai); } .g-pole.on.right .l{ color:var(--shu); }
.g-pct{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:var(--fs-sm); color:var(--ink-2); }
.g-track{ position:relative; height:10px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:2px; }
.g-track::after{ content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line); }
.g-fill{ position:absolute; top:1px; bottom:1px; border-radius:2px; transition:width .6s cubic-bezier(.2,.8,.2,1), left .6s cubic-bezier(.2,.8,.2,1); }
.g-fill.left{ background:linear-gradient(280deg, var(--g1), var(--g2)); }
.g-fill.right{ background:linear-gradient(100deg, var(--g1), var(--g2)); }
.g-note{ font-size:var(--fs-md); color:var(--ink-3); }

.tablebtn{ font-size:var(--fs-sm); color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; margin-top:22px; }
.scoretable{ width:100%; border-collapse:collapse; margin-top:16px; font-size:var(--fs-md); }
.scoretable th,.scoretable td{ border-bottom:1px solid var(--line-2); padding:8px 10px; text-align:left; }
.scoretable td.n{ font-family:var(--f-mono); text-align:right; }
.scoretable th{ color:var(--ink-3); font-weight:400; font-size:var(--fs-sm); letter-spacing:.1em; }

/* 2×2 サブタイプ・マトリクス */
.matrix{ display:grid; grid-template-columns:64px 1fr 1fr; gap:8px; align-items:stretch; }
.matrix .hd{ font-size:var(--fs-sm); color:var(--ink-3); letter-spacing:.06em; display:grid; place-items:center; padding:4px; text-align:center; }
.matrix .side{ place-items:center start; line-height:1.5; }
.cell{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); padding:14px; }
.cell .c-code{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-3); }
.cell .c-lab{ font-size:var(--fs-md); margin-top:4px; line-height:1.55; word-break:auto-phrase; }
.cell.on{ border-color:var(--shu); background:var(--surface-2); box-shadow:var(--shadow); }
.cell.on .c-code{ color:var(--shu); }

.cols{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
@media (max-width:620px){ .cols{ grid-template-columns:1fr; gap:26px; } }
.list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.list li{ font-size:var(--fs-lg); line-height:1.85; padding-left:20px; position:relative; color:var(--ink-2); }
.list li::before{ content:""; position:absolute; left:2px; top:.72em; width:6px; height:1px; background:var(--ink-3); }
.list.plus li::before{ background:var(--ai); width:8px; }
.list.minus li::before{ background:var(--shu); width:8px; }
.sub-h{ font-size:var(--fs-sm); letter-spacing:.1em; color:var(--ink-3); margin-bottom:12px; }

.jobs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.jobs span{ font-size:var(--fs-md); padding:5px 12px; border:1px solid var(--line); border-radius:100px; color:var(--ink-2); }

.match-group{ margin-bottom:30px; }
.match-group:last-child{ margin-bottom:0; }
.match-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.chip{ display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:8px; padding:8px 14px 8px 8px; text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .12s ease; }
.chip:hover{ border-color:var(--shu); transform:translateY(-1px); }
.chip .thumb{ width:42px; height:42px; border-radius:6px; flex:0 0 auto; }
.chip .c-txt{ display:block; }
.chip .c1{ display:block; font-family:var(--f-mono); font-size:var(--fs-md); letter-spacing:.04em; }
.chip .c2{ display:block; font-size:var(--fs-sm); color:var(--ink-3); margin-top:2px; line-height:1.5; }
.match-why{ font-size:var(--fs-md); color:var(--ink-2); margin-top:8px; }

.res-foot{ padding-top:40px; display:flex; flex-wrap:nowrap; gap:14px; align-items:stretch; }
.res-foot .btn{ flex:1 1 0; min-width:0; }
.disclaimer{ font-size:var(--fs-sm); color:var(--ink-3); line-height:1.9; margin-top:36px; padding-top:22px; border-top:1px solid var(--line-2); }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }


/* ---------- キャラクター画像 ---------- */
.thumb{
  display:block; width:100%; aspect-ratio:1/1; background:var(--thumb);
  border-radius:8px; overflow:hidden; position:relative;
}
.thumb img{ display:block; width:100%; height:100%; object-fit:cover; }

/* 結果ヘッダーの主役画像 */
.hero{ display:grid; place-items:center; margin-bottom:22px; }
.hero .thumb{ width:min(260px, 62vw); border-radius:14px; box-shadow:var(--shadow); }

/* イントロの帯 */
.strip{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin:34px 0 4px; }
.strip .thumb{ border-radius:6px; }
@media (max-width:640px){ .strip{ grid-template-columns:repeat(4,1fr); } }
.strip-note{ font-size:var(--fs-sm); color:var(--ink-3); margin-top:10px; }

/* 2×2 マトリクスのセル内サムネイル */
.cell{ display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:center; }
.cell .thumb{ width:52px; height:52px; border-radius:6px; }
.cell .c-txt{ min-width:0; }

/* 一覧ページのタイプカード */
.tgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .tgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tgrid{ grid-template-columns:1fr; } }
.tcard{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line-2); border-radius:10px;
  overflow:hidden; transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.tcard:hover{ border-color:var(--shu); transform:translateY(-2px); box-shadow:var(--shadow); }
.tcard .thumb{ border-radius:0; }
.tcard .tbody{ display:block; padding:18px 20px 22px; }
.tcard .tcode{ font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:.04em; color:var(--ink-3); }
.tcard .tlab{ font-size:var(--fs-base); margin-top:6px; line-height:1.55; word-break:auto-phrase; }
.tcard .tdesc{ font-size:var(--fs-md); color:var(--ink-2); line-height:1.85; margin-top:12px; }

/* コピーライト：常に1行・中央寄せ。狭い画面では文字サイズで収める */
.copy{
  display:block; margin-top:80px; text-align:center;
  font-family:var(--f-mono); letter-spacing:.04em; color:var(--ink-3);
  white-space:nowrap;
  font-size:min(var(--fs-sm), calc((100vw - 44px) / 33));
}
.copy-link{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.copy-link:hover{ color:var(--ink); }

/* 設問画面のナビゲーション */
.qhome{
  font-size:var(--fs-sm); color:var(--ink-3); letter-spacing:.04em; white-space:nowrap;
  padding:4px 2px; transition:color .15s ease;
}
.qhome:hover{ color:var(--ink); }

/* 中断して保存したときの案内 */
.savenote{
  margin:30px 0 20px; padding:14px 18px; border:1px solid var(--line); border-left:3px solid var(--shu);
  border-radius:var(--r); background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-md);
}
@media (max-width:560px){
  .qfoot{ flex-wrap:wrap; }
  .qfoot .qhint{ display:none; }
}

/* ---------- マイタイプのカード ---------- */
.mytype{
  display:grid; grid-template-columns:72px 1fr auto; gap:18px; align-items:center;
  margin:34px 0 4px; padding:16px 18px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
}
.mytype .thumb{ width:72px; height:72px; border-radius:8px; }
.my-txt{ min-width:0; line-height: 1.3;}
.my-code{ font-size:var(--fs-xl); letter-spacing:.06em; margin-top:4px; }
.my-name{ font-size:var(--fs-md); color:var(--ink-2); margin-top:2px; }
.my-act{ display:flex; gap:10px; flex-wrap:wrap; }
.my-act .btn{ padding:10px 18px; font-size:var(--fs-md); text-decoration:none; }
@media (max-width:620px){
  .mytype{ grid-template-columns:60px 1fr; }
  .mytype .thumb{ width:60px; height:60px; }
  .my-act{ grid-column:1 / -1; }
}

/* ---------- タイプを選ぶ ---------- */
.picker{ margin-top:40px; padding-top:26px; border-top:1px solid var(--line-2); }
/* 上段：モンスターのプルダウン（全幅）／下段：A・O ＋ H・C ＋ このタイプを見る */
.picker-row{ display:grid; grid-template-columns:auto auto 1fr; gap:10px; align-items:stretch; }
.picker-row select{ grid-column:1 / -1; width:100%; min-width:0; }
.picker select{
  font:inherit; font-size:var(--fs-md); color:var(--ink); min-width:12em;
  -webkit-appearance:none; appearance:none;
  border:1.5px solid var(--line); border-radius:var(--r-btn);
  padding:11px 40px 11px 20px;   /* 右は矢印のぶん広めに */
  background-color:var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%, currentColor calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(-45deg, transparent 50%, currentColor 50%, currentColor calc(50% + 1.5px), transparent calc(50% + 1.5px));
  background-position: right 24px center, right 18px center;
  background-size: 7px 7px, 7px 7px;
  background-repeat:no-repeat;
}
.picker select:hover{ border-color:var(--ink-3); }
.seg-toggle{ display:inline-flex; gap:8px; }
.picker-row .seg-toggle button{ padding:11px 16px; }
.seg-toggle button{
  padding:11px 14px; font-size:var(--fs-md); color:var(--ink-2); white-space:nowrap;
  border:1.5px solid var(--line); border-radius:var(--r-btn); background:var(--surface);
  transition:border-color .12s ease, color .12s ease;
}
.seg-toggle button:hover{ color:var(--ink); border-color:var(--ink-3); }
/* 選択状態：枠線をグラデーション（padding-box と border-box の重ね塗り） */
.seg-toggle button.on{
  border-color:transparent;
  background:linear-gradient(var(--surface), var(--surface)) padding-box,
             var(--grad) border-box;
}
.seg-toggle button.on > span{
  font-weight:700;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.picker .btn{ padding:11px 20px; font-size:var(--fs-md); }
.picker-note{ margin-top:14px; font-size:var(--fs-md); color:var(--ink-2); }
.picker-note .mono{ color:var(--shu); letter-spacing:.04em; }

/* マイタイプ登録ボタンの状態 */
.btn.done{ border-color:var(--shu); color:var(--shu); }

/* マトリクスのセルはリンク */
a.cell{ text-decoration:none; color:inherit; }
a.cell:hover{ border-color:var(--shu); }
.cell .c-txt{ display:block; }
.cell .c-code, .cell .c-lab{ display:block; }

/* ---------- ページ上部の固定ナビ（一覧ページ用） ---------- */
.topbar{
  position:sticky; top:0; z-index:10; background:var(--paper);
  padding:14px 0; margin-bottom:8px;
}
.topbar .wrap-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar .tb-title{ letter-spacing:.06em; }
.topbar .tb-title{ font-size:var(--fs-md); color:var(--ink-3); letter-spacing:.04em; }

/* ---------- SP：開始ボタン群とタイプ選択のレイアウト ---------- */
@media (max-width:560px){
  /* 診断をはじめる / 前回の結果を見る / 64タイプ一覧を見る は横幅いっぱい */
  .start-row, .res-foot{ flex-direction:column; align-items:stretch; gap:12px; }
  .start-row .btn, .res-foot .btn{ width:100%; flex:0 0 auto; }

  /* 上段：モンスタープルダウン ／ 中段：A or O + H or C ／ 下段：このタイプを見る */
  .picker-row{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch;
  }
  .picker-row select{ grid-column:1 / -1; width:100%; min-width:0; }
  .picker-row .seg-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .picker-row .seg-toggle button{ padding:11px 6px; }
  .picker-row .btn{ grid-column:1 / -1; width:100%; }
}

/* ---------- 表示設定：文字サイズ ---------- */
html[data-fs="s"]{ font-size:15px; }
html[data-fs="m"]{ font-size:16px; }
html[data-fs="l"]{ font-size:18px; }

/* ---------- 表示設定：ダークモード ---------- */
html[data-theme="dark"]{ color-scheme:dark; }
html[data-theme="dark"]{
  --paper:#15181B; --surface:#1B1F23; --surface-2:#20252A;
  --ink:#EAECEE; --ink-2:#B3BAC1; --ink-3:#8D959C;
  --line:rgba(255,255,255,.17); --line-2:rgba(255,255,255,.09);
  /* 暗い背景の上でも 3:1 以上を保つよう、両端を少し明るく */
  --g1:#7A5AD8; --g2:#C93872;
  --grad:linear-gradient(100deg, var(--g1) 0%, var(--g2) 100%);
  --grad-text:linear-gradient(100deg, #A98BF5 0%, #F282B4 100%);
  --on-brand:#FFFFFF;
  --ai:#A98BF5; --shu:#F282B4; --gold:#D2B26B;
  --thumb:#252A30;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.8);
}

/* ---------- 共通ヘッダー（中央ロゴ／右上に設定） ---------- */
:root{ --head-h:58px; }
.site-head{
  position:sticky; top:0; z-index:60;
  background:var(--paper); border-bottom:1px solid var(--line-2);
}
.sh-inner{
  height:var(--head-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
}
.sh-side{ display:flex; align-items:center; min-width:38px; }
.sh-right{ justify-content:flex-end; }
.sh-logo{ display:block; line-height:0; color:var(--ink); }
.sh-logo .logo{ display:block; height:26px; width:auto; }
/* ロゴはライト／ダークで差し替える */
.sh-logo .logo-dark{ display:none; }
html[data-theme="dark"] .sh-logo .logo-light{ display:none; }
html[data-theme="dark"] .sh-logo .logo-dark{ display:block; }
.sh-logo:hover{ opacity:.85; }
.settings-fab{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line); box-shadow:var(--shadow);
  transition:color .12s ease, border-color .12s ease, transform .12s ease;
}
.settings-fab:hover{ color:var(--ink); border-color:var(--ink-3); transform:translateY(-1px); }
/* 画面ごとの固定バーは共通ヘッダーの下にとどまる */
.qbar{ top:var(--head-h) !important; }
.topbar{ top:var(--head-h); }

/* ---------- モーダル ---------- */
body.modal-open{ overflow:hidden; }
.modal{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; }
.modal-back{ position:absolute; inset:0; background:rgba(10,12,14,.5); }
.modal-card{
  position:relative; width:min(100%, 420px);
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:22px 22px 24px;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:14px; border-bottom:1px solid var(--line-2); }
.modal-title{ font-size:var(--fs-xl); letter-spacing:.04em; }
.modal-x{ font-size:var(--fs-2xl); line-height:1; color:var(--ink-3); padding:2px 10px; border-radius:var(--r-full); }
.modal-x:hover{ color:var(--ink); }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 0; border-bottom:1px solid var(--line-2); }
.set-row:last-child{ border-bottom:0; padding-bottom:0; }
.set-h{ font-size:var(--fs-base); font-weight:500; }
.set-note{ font-size:var(--fs-sm); color:var(--ink-3); margin-top:2px; line-height:1.6; }
.set-fs button{ padding:9px 18px; }
.set-link{
  margin-top:8px; padding:0; font-size:var(--fs-sm); color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
}
.set-link:hover{ color:var(--ink); }

/* トグルスイッチ */
.switch{
  flex:0 0 auto; width:48px; height:28px; border-radius:100px;
  background:var(--surface-2); border:1px solid var(--line);
  position:relative; transition:background .16s ease, border-color .16s ease;
}
.switch .knob{
  position:absolute; top:50%; left:3px; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; background:var(--ink-3);
  transition:left .16s ease, background .16s ease;
}
.switch.on{ background:var(--grad); border-color:transparent; }
.switch.on .knob{ left:23px; background:#FFFFFF; }

@media (max-width:560px){
  .set-row.col{ flex-direction:column; align-items:stretch; gap:12px; }
  .set-row.col .set-fs{ display:grid; grid-template-columns:repeat(3,1fr); }
}