:root{
  --bg:#f4f6fa; --card:#ffffff; --ink:#1c2434; --muted:#5c6b84; --line:#dde4ee;
  --brand:#2563eb; --brand-dark:#1d4ed8; --brand-bg:#eff4ff;
  --ok:#15803d; --ok-bg:#ecfdf3; --ok-line:#bbe7c9;
  --warn:#b45309; --warn-bg:#fffbeb; --warn-line:#f3dfa8;
  --bad:#b91c1c; --bad-bg:#fef2f2; --bad-line:#f3c1c1;
  --unk:#475569; --unk-bg:#f1f5f9; --unk-line:#d8e0ea;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7; font-size:16px;
}
.wrap{max-width:880px;margin:0 auto;padding:0 16px 80px}
header.site{
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  color:#fff; padding:34px 16px 30px; text-align:center; position:relative;
}
header.site h1{font-size:1.5rem;font-weight:700;letter-spacing:.02em}
header.site h1 .em{font-size:1.7rem}
header.site p{margin-top:8px;font-size:.95rem;opacity:.92}
.lang-btn{
  position:absolute; top:14px; right:14px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.55); color:#fff;
  border-radius:999px; padding:6px 14px; font-size:.82rem; font-weight:700;
  cursor:pointer; font-family:inherit; transition:.15s;
}
.lang-btn:hover{background:rgba(255,255,255,.3)}
.tabs{
  display:flex; gap:8px; margin:-22px auto 26px; max-width:880px; padding:0 16px;
  position:relative; z-index:2;
}
.tab{
  flex:1; border:1px solid var(--line); background:#fff; border-radius:12px;
  padding:12px 6px; font-size:.95rem; font-weight:700; color:var(--muted);
  cursor:pointer; box-shadow:0 2px 8px rgba(30,58,138,.08); transition:.15s;
  font-family:inherit;
}
.tab[aria-selected="true"]{color:#fff;background:var(--brand);border-color:var(--brand)}
.tab:hover{transform:translateY(-1px)}
.panel{display:none}
.panel.active{display:block}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; margin-bottom:18px; box-shadow:0 1px 4px rgba(28,36,52,.04);
}
.card h2{font-size:1.15rem;margin-bottom:10px}
.card h3{font-size:1.02rem}
.lead{color:var(--muted);font-size:.93rem;margin-bottom:14px}
label.fl{display:block;font-weight:700;font-size:.92rem;margin:12px 0 6px}
input[type=text],input[type=email],select{
  width:100%; padding:13px 14px; font-size:1.05rem; border:2px solid var(--line);
  border-radius:10px; background:#fff; font-family:inherit; color:var(--ink);
}
input:focus,select:focus{outline:none;border-color:var(--brand)}
.btn{
  display:inline-block; border:none; border-radius:10px; cursor:pointer;
  font-family:inherit; font-weight:700; transition:.15s;
}
.btn-primary{
  background:var(--brand); color:#fff; font-size:1.1rem; padding:14px 34px;
  width:100%; margin-top:16px; box-shadow:0 3px 10px rgba(37,99,235,.3);
}
.btn-primary:hover{background:var(--brand-dark)}
.btn-primary:disabled{background:#9db4dd;cursor:wait;box-shadow:none}
.btn-ghost{
  background:#fff;color:var(--brand);border:1px solid var(--brand);
  padding:9px 18px;font-size:.9rem;
}
.btn-copy{
  background:var(--brand-bg); color:var(--brand); border:1px solid #c3d5f8;
  font-size:.8rem; padding:4px 12px; border-radius:8px; white-space:nowrap; flex:none;
}
.btn-copy.copied{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
details.adv{margin-top:12px}
details.adv>summary{cursor:pointer;color:var(--muted);font-size:.88rem;user-select:none}
.progress{
  display:none; margin-top:14px; padding:12px 14px; border-radius:10px;
  background:var(--brand-bg); color:var(--brand-dark); font-size:.93rem;
}
.progress.on{display:block}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #b8ccf5;border-top-color:var(--brand);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.err-banner{
  display:none; margin-top:14px; padding:12px 14px; border-radius:10px;
  background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-line); font-size:.93rem;
}
.err-banner.on{display:block}
/* 診断結果 */
.summary{
  border-radius:var(--radius); padding:20px; margin:22px 0 16px; display:flex;
  align-items:center; gap:18px; border:1px solid var(--line); background:#fff;
}
.summary .score{
  flex:none; width:76px; height:76px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-weight:800; color:#fff; line-height:1.15;
}
.summary .score b{font-size:1.5rem}
.summary .score small{font-size:.72rem;font-weight:600;opacity:.95}
.summary.s-good{background:var(--ok-bg);border-color:var(--ok-line)}
.summary.s-good .score{background:var(--ok)}
.summary.s-mid{background:var(--warn-bg);border-color:var(--warn-line)}
.summary.s-mid .score{background:var(--warn)}
.summary.s-low{background:var(--bad-bg);border-color:var(--bad-line)}
.summary.s-low .score{background:var(--bad)}
.summary h2{font-size:1.1rem;margin-bottom:4px}
.summary p{font-size:.92rem;color:var(--ink)}
.rcard{border-radius:var(--radius);border:1px solid var(--line);background:#fff;margin-bottom:14px;overflow:hidden}
.rcard .rhead{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.rcard .rhead h3{font-size:1.05rem}
.rcard .rhead small{font-weight:400;color:var(--muted);font-size:.85rem;display:block}
.badge{
  flex:none; font-size:.82rem; font-weight:800; padding:5px 12px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.rcard.ok .rhead{background:var(--ok-bg)} .rcard.ok .badge{background:#fff;color:var(--ok);border-color:var(--ok-line)}
.rcard.warn .rhead{background:var(--warn-bg)} .rcard.warn .badge{background:#fff;color:var(--warn);border-color:var(--warn-line)}
.rcard.bad .rhead{background:var(--bad-bg)} .rcard.bad .badge{background:#fff;color:var(--bad);border-color:var(--bad-line)}
.rcard.unk .rhead{background:var(--unk-bg)} .rcard.unk .badge{background:#fff;color:var(--unk);border-color:var(--unk-line)}
.rbody{padding:14px 18px 16px}
.rbody p.msg{font-size:.95rem}
.next{
  margin-top:10px; padding:10px 14px; border-radius:10px; background:var(--brand-bg);
  font-size:.9rem; border:1px solid #d4e0f7;
}
.next a{color:var(--brand-dark);font-weight:700}
pre.rec{
  background:#0f172a; color:#e2e8f0; border-radius:8px; padding:10px 12px;
  font-size:.8rem; overflow-x:auto; margin-top:8px; line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
ul.issues{margin:8px 0 0 1.2em;font-size:.88rem;color:var(--muted)}
/* ジェネレーター */
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:8px}
label.choice{
  display:block; border:2px solid var(--line); border-radius:12px; padding:12px 14px;
  cursor:pointer; background:#fff; transition:.12s; font-size:.92rem; position:relative;
}
label.choice b{display:block;font-size:.95rem}
label.choice small{color:var(--muted);font-size:.78rem;line-height:1.45;display:block;margin-top:2px}
label.choice input{position:absolute;opacity:0}
label.choice.sel{border-color:var(--brand);background:var(--brand-bg);box-shadow:0 0 0 1px var(--brand)}
label.choice:focus-within{outline:3px solid var(--brand);outline-offset:2px}
.tab:focus-visible,.btn:focus-visible{outline:3px solid var(--brand-dark);outline-offset:2px}
.stepnum{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.9rem;
  margin-right:8px;flex:none;
}
.gen-out .rec-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:16px;overflow:hidden}
.gen-out .rec-card>.rc-head{padding:13px 18px;background:#f8fafc;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gen-out .rec-card>.rc-head h3{font-size:1rem}
.gen-out .rec-card>.rc-head .why{font-size:.82rem;color:var(--muted)}
.rc-body{padding:14px 18px 16px}
table.kv{width:100%;border-collapse:collapse;font-size:.92rem;table-layout:fixed}
table.kv th{width:9.5em;text-align:left;color:var(--muted);font-weight:700;vertical-align:top;padding:8px 10px 8px 0;border-bottom:1px dashed var(--line);font-size:.85rem}
table.kv td{padding:8px 0;border-bottom:1px dashed var(--line);word-break:break-all}
table.kv tr:last-child th,table.kv tr:last-child td{border-bottom:none}
.vwrap{display:flex;gap:8px;align-items:flex-start}
.vwrap code{
  flex:1; background:#f1f5f9; border:1px solid var(--line); border-radius:8px;
  padding:6px 10px; font-size:.86rem; word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.vwrap code.ph{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.note{
  margin-top:10px;padding:10px 14px;border-radius:10px;font-size:.88rem;
  background:var(--unk-bg);border:1px solid var(--unk-line);
}
.note.good{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.note.warn2{background:var(--warn-bg);border-color:var(--warn-line);color:#7c4a02}
.note.bad2{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
ol.howto{margin:8px 0 0 1.4em;font-size:.9rem}
ol.howto li{margin-bottom:5px}
.manual-links{margin-top:10px;font-size:.86rem}
.manual-links a{color:var(--brand-dark)}
.gen-cta{margin:4px 0 20px}
.gen-cta .btn-primary{margin-top:0}
.field-note{display:none;margin-top:8px;padding:8px 12px;border-radius:8px;font-size:.86rem;background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.field-note.on{display:block}
.stale-banner{
  margin:0 0 12px;padding:12px 14px;border-radius:10px;font-size:.9rem;
  background:var(--warn-bg);border:1px solid var(--warn-line);color:#7c4a02;
}
.stale-banner[hidden]{display:none}
.gen-out.stale{opacity:.5;filter:grayscale(.35)}
.result-divider{
  display:flex;align-items:center;gap:12px;margin:28px 0 16px;
  font-weight:800;color:var(--brand-dark);font-size:1.08rem;white-space:nowrap;overflow:hidden;
}
.result-divider::before,.result-divider::after{content:"";flex:1;height:2px;background:var(--brand);opacity:.3;border-radius:2px;min-width:20px}
textarea.combined{
  width:100%;min-height:180px;border:1px solid var(--line);border-radius:8px;
  padding:12px;background:#f8fafc;color:var(--ink);resize:vertical;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;
}
textarea.combined:focus{outline:none;border-color:var(--brand)}
.linesbox{position:relative}
.linesbox pre{background:#0f172a;color:#e2e8f0;border-radius:8px;padding:12px 14px;font-size:.85rem;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.7}
/* 解説タブ */
.learn3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:8px}
.learn3 .l-item{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.learn3 .l-item .ic{font-size:1.7rem}
.learn3 .l-item h3{margin:6px 0 4px;font-size:1rem}
.learn3 .l-item p{font-size:.88rem;color:var(--muted)}
details.faq{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px;padding:0}
details.faq summary{cursor:pointer;font-weight:700;font-size:.93rem;padding:12px 16px;user-select:none}
details.faq .a{padding:0 16px 14px;font-size:.9rem;color:#33415c}
footer.site{margin-top:40px;text-align:center;color:var(--muted);font-size:.8rem;padding:0 16px}
footer.site p{margin-bottom:4px}
@media (max-width:560px){
  header.site h1{font-size:1.2rem} header.site h1 .em{font-size:1.35rem}
  .lang-btn{position:static;margin-bottom:10px}
  .tab{font-size:.8rem;padding:10px 2px}
  .card{padding:16px 14px}
  .summary{flex-direction:column;text-align:center}
  table.kv th{width:6.5em}
}
@media print{
  .tabs,.btn,.no-print,header.site p,.progress,.lang-btn{display:none!important}
  body{background:#fff}
  .card,.rec-card,.rcard{box-shadow:none}
  pre.rec,.linesbox pre{background:#fff!important;color:#000!important;border:1px solid #999}
  header.site{background:none!important;color:#000!important}
  .summary .score{background:none!important;color:#000!important;border:2px solid #000}
  .vwrap code{background:#fff;border:1px solid #999}
}