/* 第二創業プログラム 診断システム
 *
 * 色・余白・角丸はすべてこのファイル冒頭のトークンで一元管理する（値の直書き禁止）。
 * 公開側＝紙とインク（落ち着いた配色。対象は誇り高い経営者）
 * 管理側＝青基調（body.admin でトークンを上書きする。作りは公開側と共通）
 *
 * コントラストは WCAG AA（本文 4.5:1 以上）を満たす組み合わせのみ採用している。
 */

:root{
  /* 文字 */
  --ink:#14181c;          /* 本文 */
  --ink-2:#3d464e;        /* 補足 */
  --ink-3:#6b757e;        /* 弱い文字（白背景で 4.7:1） */
  --ink-on-accent:#ffffff;

  /* 面 */
  --paper:#faf9f7;        /* ページ背景 */
  --card:#ffffff;         /* カード・表の背景 */
  --line:#e2ddd6;         /* 罫線 */
  --th-bg:#f3f0ec;        /* 表見出し */

  /* 主色 */
  --accent:#1f4e5f;
  --accent-soft:#eef4f5;  /* 選択中・通知の背景 */
  --accent-line:#cfe0e3;

  /* ヘッダー */
  --head-bg:#14181c;
  --head-ink:#ffffff;
  --head-link:#cfd8dc;

  /* 状態 */
  --ok:#2f6b4f;
  --watch:#7a6a2f;
  --warn:#9a5b23;
  --crit:#8b2f2f;
  --crit-soft:#fdf3f3;
  --crit-line:#e5c9c9;

  /* 形 */
  --radius:10px;
  --radius-sm:6px;
  --gap:12px;
}

/* 管理画面＝青基調。トークンだけを差し替え、部品のCSSは共通のまま使う */
body.admin{
  --ink:#0f1e2e;
  --ink-2:#2f4a68;
  --ink-3:#5c7086;        /* 白背景で 5.0:1 */

  --paper:#eef3f9;
  --card:#ffffff;
  --line:#cfdcea;
  --th-bg:#e3ecf7;

  --accent:#1b4f8f;       /* 白背景で 8.2:1 */
  --accent-soft:#e8f0fb;
  --accent-line:#b8d0ec;

  --head-bg:#0f2540;
  --head-ink:#ffffff;
  --head-link:#cfe0f5;    /* ヘッダー上で 11.5:1 */

  --crit-soft:#fdf1f1;
  --crit-line:#e8c9c9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.85;font-size:16px;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
a{color:var(--accent)}
h1,h2,h3{line-height:1.5;letter-spacing:.02em}
h1{font-size:1.6rem;margin:0 0 .6em}
h2{font-size:1.15rem;margin:2em 0 .6em}
strong{font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;word-break:break-all}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.site-head{border-bottom:1px solid var(--line);background:var(--card)}
.site-head .wrap{display:flex;gap:14px;align-items:baseline;padding-top:14px;padding-bottom:14px}
.brand{font-weight:700;letter-spacing:.06em}
.brand-sub{color:var(--ink-3);font-size:.82rem}
.site-foot{margin-top:64px;border-top:1px solid var(--line);background:var(--card);
  color:var(--ink-3);font-size:.8rem;padding:22px 0}
.site-foot p{margin:.2em 0}

.hero{padding:48px 0 8px}
.hero.small{padding:32px 0 4px}
.hero h1{font-size:1.9rem}
.lead{color:var(--ink-2);font-size:1.05rem}
.via{display:inline-block;margin-top:10px;padding:4px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);font-size:.85rem;color:var(--ink-3)}

.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;margin:22px 0}
.card h2:first-child,.panel h2:first-child{margin-top:0}
.note{color:var(--ink-3);font-size:.9rem}
.fine{color:var(--ink-3);font-size:.8rem;margin-top:1.2em}
ul.plain,ol.plain{padding-left:1.3em}
ul.plain li,ol.plain li{margin:.4em 0}

.cta{margin:28px 0 8px}
.btn{display:inline-block;background:var(--accent);color:var(--ink-on-accent);text-decoration:none;
  border:0;border-radius:var(--radius-sm);padding:14px 30px;font-size:1rem;cursor:pointer;
  font-family:inherit;letter-spacing:.05em}
.btn:hover{opacity:.9}
.btn.small{padding:8px 16px;font-size:.85rem}
.link{margin-left:14px;font-size:.9rem}

/* 設問 */
.quiz{margin-top:20px}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:16px 0}
.q legend{font-weight:700;padding:0;display:block;width:100%;margin-bottom:.4em}
.q legend .n{display:inline-block;min-width:1.8em;color:var(--accent);font-size:.85rem}
.choices{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.choices label{flex:1 1 120px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 10px;text-align:center;cursor:pointer;background:var(--paper)}
.choices input{margin-right:6px}
.choices label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);font-weight:700}

.field{display:block;margin:14px 0;font-size:.9rem;color:var(--ink-2)}
.field input,.field select,.field textarea{display:block;width:100%;margin-top:6px;
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:1rem;
  font-family:inherit;background:var(--card);color:var(--ink)}
.req{color:var(--crit);font-size:.72rem;margin-left:4px}
.check{display:block;margin:12px 0;font-size:.9rem}
.check input{margin-right:8px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

.errors{background:var(--crit-soft);border:1px solid var(--crit-line);color:var(--crit);
  border-radius:var(--radius-sm);padding:14px 18px;margin:18px 0}
.errors p{margin:.2em 0}
.flash{background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--radius-sm);padding:12px 18px}

/* 結果 */
.result-head{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--ink-3);
  border-radius:var(--radius);padding:34px 26px;margin:28px 0}
.result-head.ok{border-top-color:var(--ok)}
.result-head.watch{border-top-color:var(--watch)}
.result-head.warn{border-top-color:var(--warn)}
.result-head.crit{border-top-color:var(--crit)}
.result-head .for{color:var(--ink-3);font-size:.85rem;margin:0}
.score{margin:10px 0 0}
.score .num{font-size:4rem;font-weight:700;line-height:1}
.score .den{font-size:1.2rem;color:var(--ink-3);margin-left:6px}
.score-label{color:var(--ink-3);font-size:.85rem;margin:0 0 14px}

.flags{padding-left:1.2em}
.flags li{margin:0 0 20px}
.flag-q{margin:0;font-weight:700}
.flag-a{margin:.2em 0;font-size:.8rem;color:var(--crit)}
.flag-d{margin:.2em 0;color:var(--ink-2)}

.bugs{list-style:none;padding:0;margin:0}
.bugs li{border-top:1px solid var(--line);padding:12px 0}
.bugs li:first-child{border-top:0}
.bug-no{display:inline-block;min-width:2em;color:var(--ink-3);font-size:.8rem}
.bug-name{font-weight:700;margin-right:10px}
.bug-desc{color:var(--ink-2);font-size:.9rem;display:block;margin-left:2em}

.steps{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0}
.step{flex:1 1 180px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px;background:var(--paper)}
.step-n{color:var(--accent);font-weight:700;margin:0}
.step-t{font-weight:700;margin:.1em 0}
.step-d{font-size:.85rem;color:var(--ink-2);margin:.3em 0 0}
.who{display:block;color:var(--ink-3);font-size:.75rem;margin-top:.4em}

.copybox{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;font-size:.85rem}

/* 表・統計 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--gap);margin:18px 0}
.stats div{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px}
.s-num{display:block;font-size:1.7rem;font-weight:700;line-height:1.2}
.stats.small .s-num{font-size:1.3rem}
.s-lab{display:block;color:var(--ink-3);font-size:.75rem}

.tablewrap{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;background:var(--card);font-size:.88rem}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--th-bg);font-weight:700;white-space:nowrap}
td.num,th.num{text-align:right}
tr.dim{opacity:.5}
tr.bad td{background:var(--crit-soft)}
table.kv th{width:9em}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.75rem;
  border:1px solid var(--line);background:var(--paper);white-space:nowrap}
.tag.ok{border-color:var(--ok);color:var(--ok)}
.tag.watch{border-color:var(--watch);color:var(--watch)}
.tag.warn{border-color:var(--warn);color:var(--warn)}
.tag.crit{border-color:var(--crit);color:var(--crit)}
.big{font-size:1.4rem;font-weight:700}

/* 管理画面 */
body.admin .wrap{max-width:1080px}
body.admin .tablewrap table{min-width:820px}   /* 列が潰れるくらいなら横スクロールさせる */
body.admin td.num{white-space:nowrap}
body.admin h1{border-left:5px solid var(--accent);padding-left:12px}
body.admin .stats div{border-top:3px solid var(--accent)}
.admin-head{background:var(--head-bg);color:var(--head-ink);padding:10px 0}
.admin-head a{color:var(--head-link);text-decoration:none;margin-right:16px;font-size:.86rem}
.admin-head a:hover{color:var(--head-ink)}
.admin-head nav{margin-top:6px}
.admin-head .right{float:right;margin-right:0}
.gridform{display:flex;flex-wrap:wrap;gap:0 18px}
.gridform .field{flex:1 1 220px}
.gridform .wide{flex:1 1 100%;width:100%}
.searchbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.searchbar input,.searchbar select{padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:.9rem;font-family:inherit;
  background:var(--card);color:var(--ink)}
.loginform{max-width:340px;margin:60px auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.inlineform{margin:10px 0}
.inlineform .fine{display:inline-block;margin-left:12px}
.doc h2{font-size:1rem}

@media (max-width:600px){
  .hero h1{font-size:1.5rem}
  .score .num{font-size:3rem}
  .card,.panel,.q{padding:20px 16px}
}