/* comfy-blue ベース（~/.claude/skills/comfy-blue/assets/reference.html から）＋ 本ツール用の追加部品 */
:root {
  --ink:#2C333F; --body:#3B4350; --sub:#5E6772; --faint:#8892A0;
  --blue:#5E7C99; --blue-deep:#46617A; --blue-soft:#EAF1F7;
  --accent:#6D8CC2; --accent-soft:#87A5D8;
  --pink:#C96B88; --pink-soft:#FCEDF3; --marker:#F6D9E4;
  --line:#E4E7EC; --bg-soft:#F7F8FA; --ok:#4E9B7A;
  --shadow:0 4px 14px rgba(110,130,150,.1);
  --serif:'Noto Serif JP','Hiragino Mincho ProN',serif;
  --maru:'Zen Kaku Gothic New','Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif;
  --en:'Tenor Sans','Optima','Avenir Next',sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { overflow-x:clip; }
body { font-family:var(--maru); background:#fff; color:var(--body); font-size:15.5px; line-height:1.9; letter-spacing:.02em; -webkit-font-smoothing:antialiased; line-break:strict; overflow-x:clip; }
#page-root { overflow-x:clip; max-width:100vw; }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:940px; margin:0 auto; padding:0 20px; }
h1,h2,h3,h4 { font-family:var(--serif); color:var(--ink); line-height:1.65; letter-spacing:.06em; font-weight:400; word-break:keep-all; overflow-wrap:break-word; text-wrap:balance; }
p, li, td, th, dd, blockquote, figcaption, .lead, .note, .intent, .summary { text-wrap:pretty; word-break:normal; overflow-wrap:break-word; }
.en { font-family:var(--en); font-weight:400; }
a { color:var(--accent); }

/* ---- 表紙 ---- */
.doc-head {
  background:
    radial-gradient(ellipse 520px 320px at 82% 18%, rgba(246,217,228,.55), transparent),
    radial-gradient(ellipse 620px 400px at 10% 82%, rgba(201,220,234,.6), transparent),
    #EAF0F6;
  padding:44px 22px 40px; text-align:center;
}
.doc-head .eyebrow { font-family:var(--en); font-size:11.5px; letter-spacing:.3em; color:#8A9BB0; font-weight:400; margin-bottom:10px; }
.doc-head h1 { font-family:var(--serif); font-size:clamp(23px,4.8vw,34px); font-weight:400; color:#3B4350; letter-spacing:.1em; }
.doc-head .sub { font-size:clamp(13px,2.4vw,15px); color:var(--accent); font-weight:700; margin-top:10px; text-wrap:balance; max-width:24em; margin-inline:auto; }
.doc-head .date { font-family:var(--en); font-size:11.5px; letter-spacing:.14em; color:#8A93A0; margin-top:8px; }

/* ---- 架空データの明示バー ---- */
.dummy-bar { background:var(--pink-soft); border-bottom:1px solid var(--marker); color:#9C4A62; font-size:12.5px; text-align:center; padding:8px 18px; line-height:1.7; }
.dummy-bar b { color:var(--pink); }

/* ---- ページ間ナビ ---- */
.nav { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:16px 20px 0; }
.nav a { font-size:12.5px; text-decoration:none; color:var(--sub); background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 16px; }
.nav a:hover { background:var(--blue-soft); color:var(--blue-deep); }
.nav a[aria-current="page"] { background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }

/* ---- セクション ---- */
section.item { padding:38px 0 30px; border-top:1px solid var(--line); }
section.item:first-of-type { border-top:none; }
.num { font-family:var(--en); font-size:12.5px; letter-spacing:.24em; color:var(--pink); font-weight:400; }
section.item h2 { font-size:clamp(19px,3.6vw,25px); font-weight:400; margin:6px 0 4px; }
h3 { font-size:16.5px; margin:22px 0 6px; }
.lead { font-size:13.5px; color:var(--body); margin:8px 0 16px; }
.lead b { color:var(--accent); }
.note { font-size:12px; color:var(--faint); margin-top:10px; }

/* ---- 意図ボックス ---- */
.intent { background:var(--blue-soft); border-left:3px solid var(--blue); border-radius:0 10px 10px 0; padding:14px 18px; margin:16px 0 8px; font-size:14.5px; }
.intent b { color:var(--blue-deep); }
.intent .tag { display:block; font-family:var(--en); font-size:10.5px; letter-spacing:.18em; color:var(--blue); font-weight:400; margin-bottom:4px; }

/* ---- 統計タイル ---- */
.polish { background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 0; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:14px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 10px 14px; text-align:center; }
.stat .v { font-family:var(--en); font-size:32px; font-weight:400; color:var(--blue-deep); line-height:1.3; letter-spacing:.02em; }
.stat .v .unit { font-family:var(--maru); font-size:13px; color:var(--sub); }
.stat .v.warn { color:var(--pink); }
.stat .k { font-size:12.5px; color:var(--sub); margin-top:2px; }

/* ---- ファネル ---- */
.funnel { margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.funnel .row { display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center; }
.funnel .lbl { font-size:13px; color:var(--sub); text-align:right; }
.funnel .track { background:var(--bg-soft); border-radius:8px; height:38px; position:relative; border:1px solid var(--line); overflow:hidden; }
/* 棒は淡色・文字は濃色で固定する。棒が短い段階でも数字が読めるようにするため
   （濃い棒＋白抜き文字にすると、短い棒では白地に白文字になって消える） */
.funnel .fill { background:linear-gradient(90deg,#B9CCE2,#D6E2EF); height:100%; border-radius:7px 0 0 7px; min-width:3px; }
.funnel .val { position:absolute; inset:0; display:flex; align-items:center; padding:0 12px; gap:10px; font-size:13px; color:var(--ink); }
.funnel .val .n { font-family:var(--en); font-size:17px; color:var(--blue-deep); }
.funnel .val .rate { font-size:12px; color:var(--sub); }

/* ---- データテーブル ---- */
.tablebox { overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
table.dt { border-collapse:collapse; width:100%; min-width:560px; font-size:13px; }
table.dt th, table.dt td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; line-height:1.6; }
table.dt thead th { background:var(--bg-soft); color:var(--sub); font-weight:700; font-size:12px; letter-spacing:.04em; position:sticky; top:0; }
table.dt tbody tr:last-child td { border-bottom:none; }
table.dt td.n, table.dt th.n { text-align:right; font-family:var(--en); font-size:14px; color:var(--ink); }
table.dt td.name { white-space:normal; min-width:9em; }
table.dt tr.hi td { background:var(--blue-soft); }
.badge { display:inline-block; font-size:11px; font-weight:700; border-radius:999px; padding:2px 9px; letter-spacing:.04em; }
.badge.ok { background:#E6F1EC; color:var(--ok); }
.badge.ng { background:var(--pink-soft); color:var(--pink); }
.badge.mid { background:var(--bg-soft); color:var(--sub); border:1px solid var(--line); }
.badge.blue { background:var(--blue-soft); color:var(--blue-deep); }
.small-note { font-size:11px; color:var(--faint); }

/* ---- 横棒（月次・理由の内訳） ---- */
.barlist { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.barlist .b { display:grid; grid-template-columns:minmax(90px,auto) 1fr 46px; gap:10px; align-items:center; font-size:13px; }
.barlist .b .t { color:var(--sub); }
.barlist .b .g { background:var(--bg-soft); border-radius:6px; height:16px; overflow:hidden; border:1px solid var(--line); }
.barlist .b .g i { display:block; height:100%; background:var(--accent-soft); }
.barlist .b .g i.pink { background:var(--pink); }
.barlist .b .v { text-align:right; font-family:var(--en); color:var(--blue-deep); }

/* ---- 月次の縦棒 ---- */
.months { display:flex; gap:6px; align-items:flex-end; margin-top:16px; overflow-x:auto; padding-bottom:6px; }
.months .m { flex:1 0 46px; text-align:center; }
.months .m .col { display:flex; flex-direction:column-reverse; gap:2px; height:120px; justify-content:flex-start; }
.months .m .seg { background:var(--accent-soft); border-radius:3px 3px 0 0; min-height:2px; }
.months .m .cnt-a { font-family:var(--en); font-size:12px; color:var(--blue-deep); margin-top:4px; letter-spacing:.02em; }
.months .m .lab { font-family:var(--en); font-size:10.5px; color:var(--faint); margin-top:1px; letter-spacing:.02em; }
.months .m .cnt-j { font-size:10.5px; color:var(--pink); font-weight:700; margin-top:3px; white-space:nowrap; }
.months .m .cnt-j.zero { color:#C9CFD6; font-weight:400; }
.legend { display:flex; gap:14px; justify-content:center; margin-top:10px; font-size:11.5px; color:var(--sub); flex-wrap:wrap; }
.legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px; }

/* ---- 気づきカード ---- */
.finding { background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 14px 14px 0; padding:18px 20px; box-shadow:var(--shadow); }
.findings { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.finding h3 { font-size:16px; margin:0 0 6px; }
.finding .metric { font-family:var(--en); font-size:19px; color:var(--pink); letter-spacing:.04em; margin-bottom:6px; }
.finding p { font-size:13.5px; color:var(--sub); }
.finding .caution { font-size:12px; color:var(--pink); margin-top:8px; }

/* ---- 応募者カード（書類選考） ---- */
.appcards { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.appcard { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); }
.appcard .top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.appcard .id { font-family:var(--en); font-size:12.5px; color:var(--faint); letter-spacing:.1em; }
.appcard .nm { font-size:15.5px; color:var(--ink); font-weight:700; }
.appcard .meta { font-size:12px; color:var(--faint); }
.reqs { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:6px 18px; margin-top:10px; }
.reqs .r { font-size:12.5px; display:flex; gap:7px; align-items:flex-start; line-height:1.7; }
.reqs .r .mk { flex:0 0 auto; width:17px; height:17px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; margin-top:4px; }
.reqs .r.y .mk { background:#E6F1EC; color:var(--ok); }
.reqs .r.n .mk { background:var(--pink-soft); color:var(--pink); }
/* 要件そのものを並べるとき（充足の判定ではないので中立の印にする） */
.reqs .r.q .mk { background:var(--blue-soft); color:var(--blue-deep); font-size:9.5px; }
.reqs .r.q.soft .mk { background:var(--bg-soft); color:var(--faint); border:1px solid var(--line); }
.reqs .r .ev { color:var(--faint); font-size:11.5px; }
.reqs .cat { font-family:var(--en); font-size:10.5px; letter-spacing:.16em; color:var(--faint); grid-column:1/-1; margin-top:6px; }
.appcard .notes { background:var(--blue-soft); border-radius:10px; padding:10px 14px; margin-top:11px; font-size:12.5px; color:var(--blue-deep); }
.appcard .notes p + p { margin-top:5px; }
.appcard .actual { margin-top:10px; font-size:12px; color:var(--faint); border-top:1px dashed var(--line); padding-top:8px; }

/* ---- 比較 ---- */
.vs { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:14px; }
.vs .col { border-radius:14px; padding:18px 20px; background:#fff; border:1px solid var(--line); }
.vs .good { border:1.5px solid var(--accent-soft); background:var(--blue-soft); }
.vs .head { font-weight:700; font-size:15px; margin-bottom:6px; }
.vs .bad .head { color:var(--faint); }
.vs .good .head { color:var(--blue-deep); }
.vs li { margin-left:1.2em; font-size:13px; }

/* ---- 手順の流れ図 ---- */
.flow { display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin-top:16px; }
.flow .step { flex:1 1 150px; background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:16px 14px; text-align:center; }
.flow .step .n { font-family:var(--en); font-size:10.5px; letter-spacing:.2em; color:var(--faint); }
.flow .step .t { font-size:14px; font-weight:700; color:var(--blue-deep); margin:4px 0 4px; line-height:1.6; }
.flow .step .d { font-size:11.5px; color:var(--sub); line-height:1.7; }
.flow .arrow { align-self:center; color:var(--accent); font-size:20px; }
.flow .step.goal { background:#fff; border:1.5px solid var(--pink); }
.flow .step.goal .t { color:var(--pink); }

/* ---- POINT ---- */
.points { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:14px; }
.points .point { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 20px; box-shadow:var(--shadow); }
.points .pnum { font-family:var(--en); font-size:11px; letter-spacing:.25em; color:var(--faint); }
.points h3 { font-size:16px; margin:4px 0 8px; }
.points p { font-size:13px; color:var(--sub); }

/* ---- 注意・折りたたみ ---- */
.ng-box { background:var(--pink-soft); border:1px solid var(--marker); border-radius:14px; padding:15px 19px; font-size:13.5px; margin-top:14px; }
.ng-box .head { color:var(--pink); font-weight:700; margin-bottom:3px; }
details.fold { background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:13px 18px; margin-top:14px; }
details.fold summary { cursor:pointer; font-weight:700; color:var(--sub); font-size:13.5px; }
details.fold .inner { padding-top:8px; font-size:13.5px; color:var(--sub); }
.copybox { background:var(--bg-soft); border:1px dashed var(--accent); border-radius:14px; padding:15px 17px; position:relative; margin-top:14px; }
.copybox pre { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; white-space:pre-wrap; word-break:break-all; padding-right:84px; line-height:1.9; }
.copybox button { position:absolute; top:11px; right:11px; font-family:var(--en); background:var(--accent); color:#fff; border:none; border-radius:999px; font-size:12px; font-weight:400; letter-spacing:.06em; padding:6px 15px; cursor:pointer; }
.copybox button:active { background:var(--blue-deep); }

/* ---- フィルタ ---- */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center; }
.filters button { font-family:var(--maru); font-size:12.5px; background:#fff; border:1px solid var(--line); color:var(--sub); border-radius:999px; padding:7px 15px; cursor:pointer; }
.filters button[aria-pressed="true"] { background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.filters .cnt { font-size:12px; color:var(--faint); margin-left:4px; }

footer { text-align:center; padding:34px 20px 50px; color:var(--faint); font-size:12px; }
footer .fin { font-family:var(--en); letter-spacing:.2em; margin-bottom:4px; }

@media (max-width:640px) {
  body { font-size:15px; }
  .funnel .row { grid-template-columns:74px 1fr; gap:8px; }
  .funnel .lbl { font-size:12px; }
  .flow .arrow { width:100%; text-align:center; transform:rotate(90deg); }
  .reqs { grid-template-columns:1fr; }
}