/* キットベンチ ポータルの見本（2026-10-02）。お手本＝iLovePDF の実測（地 #f5f5fa・カード260×232・余白24・間18・アイコン42・題20px/500・説明13px/18px） */
:root { --bg: #f5f5fa; --card: #fff; --ink: #33333b; --sub: #47474f; --mute: #707078; --line: #e6e6ee; --acc: #2f80ed; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--sub); font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; font-size: 16px; }
a { color: inherit; }
.kb-head { height: 60px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 28px; padding: 0 24px; position: sticky; top: 0; z-index: 5; }
/* 道具のページ */
.kb-tool { text-align: center; padding: 36px 24px 0; }
.kb-tool h1 { font-size: 42px; font-weight: 600; color: var(--ink); margin: 0; }
.kb-tool .lead { font-size: 20px; margin: 10px 0 0; }
.kb-work { max-width: 980px; margin: 28px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: 1fr 340px; text-align: left; }
.kb-in { padding: 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.kb-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-tabs button { font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 999px; border: 1px solid #d6d6e0; background: #fff; color: var(--ink); cursor: pointer; }
.kb-tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.kb-in label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mute); }
.kb-in input, .kb-in textarea, .kb-in select { font: inherit; font-size: 16px; color: var(--ink); border: 1px solid #d6d6e0; border-radius: 8px; padding: 10px 12px; background: #fff; }
.kb-in textarea { min-height: 110px; resize: vertical; }
.kb-out { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kb-out canvas { width: 240px; height: 240px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 8px; }
.kb-big { width: 100%; font: inherit; font-size: 18px; font-weight: 600; padding: 14px; border: 0; border-radius: 10px; background: #e5332a; color: #fff; cursor: pointer; }
.kb-sub2 { display: flex; gap: 8px; width: 100%; }
.kb-sub2 button { flex: 1; font: inherit; font-size: 14px; padding: 9px; border-radius: 8px; border: 1px solid #d6d6e0; background: #fff; color: var(--ink); cursor: pointer; }
details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; }
summary { cursor: pointer; color: var(--ink); font-weight: 500; }
details p { font-size: 14px; line-height: 1.8; margin: 10px 0 0; }
@media (max-width: 760px) { .kb-top h1, .kb-tool h1 { font-size: 30px; } .kb-top p, .kb-tool .lead { font-size: 16px; }
  .kb-work { grid-template-columns: 1fr; } .kb-in { border-right: 0; border-bottom: 1px solid var(--line); }
}
.kb-out .kb-pro-row { margin: 0; }
.kb-tool > .kb-pro-row { max-width: 980px; margin: 12px auto 0; border: 0; padding: 0; text-align: center; }
@media (max-width: 760px) { .kb-head { padding: 0 16px; } .kb-tool { padding: 24px 16px 0; } .kb-work { margin-top: 20px; }
}
@media (max-width: 760px) {
  .kb-head { gap: 12px; }
}
/* 道具の部品：結果の表・横並び・チェック欄・一覧（2026-10-02） */
.kb-stat { justify-content: flex-start; }
.kb-dl { width: 100%; margin: 0; display: grid; gap: 8px; }
.kb-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.kb-dl dt { font-size: 13px; color: var(--mute); }
.kb-dl dd { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.kb-dl .kb-dl-main { background: var(--bg); border-color: transparent; padding: 14px; }
.kb-dl .kb-dl-main dd { font-size: 28px; }
.kb-row { display: flex; gap: 12px; align-items: center; }
.kb-row input[type=range] { flex: 1; padding: 0; border: 0; }
.kb-checks { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.kb-checks legend { font-size: 13px; color: var(--mute); margin-bottom: 6px; padding: 0; }
.kb-in .kb-checks label, .kb-in label.kb-check { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); cursor: pointer; }
.kb-checks input, .kb-check input { width: 18px; height: 18px; margin: 0; }
.kb-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.kb-list li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 6px 6px 12px; }
.kb-list code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; color: var(--ink); word-break: break-all; }
.kb-list button { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 6px; border: 1px solid #d6d6e0; background: #fff; color: var(--ink); cursor: pointer; flex: none; }
.kb-str { margin: 0; width: 100%; font-size: 14px; color: var(--ink); font-weight: 600; }
.kb-warn { margin: 0; color: #c92a2a; font-size: 14px; }

/* 隠す印（hidden）を、どの display 指定より優先する（2026-10-02 日数計算で「何日後」の欄が出ていた） */
[hidden] { display: none !important; }

/* 題名の左に道具のアイコン（2026-10-02 チカ「左にロゴ入れたいね」） */
.kb-tool h1.kb-h1 { display: inline-flex; align-items: center; gap: 16px; }
@media (max-width: 760px) { .kb-tool h1.kb-h1 { gap: 10px; }
}
/* 上限のバー・小さい結果の表（2026-10-02 競合の機能を足す） */
.kb-limit { display: grid; gap: 8px; }
.kb-bar { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.kb-bar-in { height: 100%; width: 0; background: #34A160; border-radius: 99px; }
.kb-bar-in.over { background: #c92a2a; }
.kb-limit-msg { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.kb-limit-msg.over { color: #c92a2a; }
.kb-dl-h { margin: 6px 0 0; width: 100%; font-size: 13px; color: var(--mute); }
.kb-dl-sm { grid-template-columns: 1fr 1fr; }
.kb-dl-sm > div { padding: 8px 12px; }
.kb-dl-sm dd { font-size: 16px; }
.kb-sub2 button { min-width: 0; }
.kb-syms { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 15px !important; padding: 6px 10px !important; margin-left: 26px; }
.kb-formula { margin: 0; width: 100%; font-size: 13px; color: var(--mute); line-height: 1.7; }
.kb-both { width: 100%; }
.kb-both table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.kb-both th, .kb-both td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.kb-both th { font-size: 12px; color: var(--mute); font-weight: 600; }
.kb-both th:first-child, .kb-both td:first-child { text-align: left; }
.kb-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--mute); }
.kb-quick button { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px; border: 1px solid #d6d6e0; background: #fff; color: var(--ink); cursor: pointer; }
.kb-opt { background: var(--bg); border: 0; border-radius: 10px; padding: 12px 14px; }
.kb-opt[open] { display: grid; gap: 12px; }
.kb-opt summary { font-size: 14px; }
.kb-in input[type=color] { width: 72px; height: 40px; padding: 2px; }
/* 見た目の直し（2026-10-02）：記号の欄の幅・結果の見出しを折らない */
.kb-checks .kb-syms { width: calc(100% - 26px); box-sizing: border-box; }
.kb-dl dt { flex: none; max-width: 60%; }
.kb-dl .kb-dl-main dt { white-space: nowrap; }
.kb-kw { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.kb-kw li { display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font-size: 14px; }
.kb-kw b { color: var(--ink); font-weight: 600; }
.kb-kw span { color: var(--mute); font-variant-numeric: tabular-nums; }
/* 枠の列が中の入力欄の幅で押し広げられない（2026-10-02 英語版で375pxで23pxはみ出し） */
.kb-in, .kb-out { min-width: 0; }
.kb-row > * { min-width: 0; }
/* ファイルを入れる道具（2026-10-02 画像をPDFに） */
.kb-drop { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; border: 2px dashed #c9c9d6; border-radius: 12px; background: var(--bg); cursor: pointer; text-align: center; padding: 20px; }
.kb-drop b { font-size: 16px; color: var(--ink); font-weight: 600; }
.kb-drop span { font-size: 13px; color: var(--mute); }
.kb-drop.on, .kb-drop:hover { border-color: var(--acc); background: #eef4fe; }
.kb-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kb-files li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; font-size: 13px; color: var(--ink); }
.kb-files img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; background: var(--bg); }
.kb-files span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-files button { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid #d6d6e0; background: #fff; color: var(--ink); cursor: pointer; flex: none; }
.kb-field { width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mute); }
.kb-field select { font: inherit; font-size: 16px; color: var(--ink); border: 1px solid #d6d6e0; border-radius: 8px; padding: 10px 12px; background: #fff; }
.kb-big:disabled { opacity: .45; cursor: default; }
/* ルーレット（2026-10-02） */
.kb-wheel { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
.kb-wheel canvas { width: 100%; height: auto; aspect-ratio: 1; border: 0; cursor: pointer; display: block; image-rendering: auto; }
.kb-pin { position: absolute; left: 50%; top: -6px; width: 0; height: 0; margin-left: -12px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid #23263A; z-index: 1; }
.kb-hist { margin: 0; padding-left: 1.4em; max-height: 160px; overflow: auto; font-size: 14px; color: var(--ink); display: grid; gap: 2px; }
@media (max-width: 760px) { .kb-work:has(.kb-wheel) .kb-out { order: -1; border-bottom: 1px solid var(--line); } .kb-work:has(.kb-wheel) .kb-in { border-bottom: 0; }
}
/* Web版の Premium の欄（2026-10-02） */
.kb-premium { width: 100%; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.kb-premium .kb-dl-h { margin: 0; font-weight: 600; color: var(--ink); }
.kb-filebtn { flex: 1; font: inherit; font-size: 14px; padding: 9px; border-radius: 8px; border: 1px solid #d6d6e0; background: #fff; color: var(--ink); cursor: pointer; text-align: center; }
.kb-pro-msg { margin: 0; font-size: 13px; color: #c92a2a; }
.kb-pro-msg a { color: inherit; font-weight: 600; }
.kb-files .kb-range { flex: none; width: 140px; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid #d6d6e0; border-radius: 6px; }
@media (max-width: 560px) { .kb-files li { flex-wrap: wrap; } .kb-files .kb-range { width: 100%; order: 5; }
}