/* ぴったり工房 共通スタイル */
:root {
  --ink:#111; --cream:#fff8e1; --paper:#ffffff; --yellow:#f6c945; --teal:#8fd6c4; --sub:#55524b; --warn:#b3261e;
  --line:3px solid var(--ink); --shadow:5px 5px 0 var(--ink);
}
* { box-sizing:border-box; }
html { color-scheme:light; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"Zen Kaku Gothic New","Yu Gothic UI","Meiryo",sans-serif; font-size:15px; line-height:1.7; }
a { color:inherit; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
.display { font-family:"Dela Gothic One","Zen Kaku Gothic New",sans-serif; font-weight:400; }

/* ヘッダ・フッタ */
.site-header { background:var(--cream); border-bottom:var(--line); position:sticky; top:0; z-index:10; }
.site-header .wrap { display:flex; justify-content:space-between; align-items:center; height:60px; }
.brand { font-family:"Dela Gothic One","Zen Kaku Gothic New",sans-serif; font-size:21px; text-decoration:none; }
.site-header nav a { margin-left:10px; font-weight:700; font-size:14px; text-decoration:none; padding:4px 12px; border:2px solid transparent; border-radius:99px; }
.site-header nav a:hover { border-color:var(--ink); }
.site-header nav a.on { border-color:var(--ink); background:var(--yellow); }
.site-footer { border-top:var(--line); margin-top:64px; padding:20px 0 40px; font-size:13px; color:var(--sub); }

/* ボタン・チップ・タグ */
.btn { display:inline-block; font:inherit; font-weight:700; background:var(--paper); color:var(--ink); border:var(--line); border-radius:8px; padding:10px 20px; box-shadow:4px 4px 0 var(--ink); text-decoration:none; cursor:pointer; }
.btn:hover { transform:translate(1px,1px); box-shadow:3px 3px 0 var(--ink); }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.btn.primary { background:var(--yellow); width:100%; font-size:16px; padding:13px; }
.btn.small { padding:6px 12px; font-size:13px; box-shadow:3px 3px 0 var(--ink); border-width:2px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font:inherit; font-weight:700; font-size:14px; background:var(--paper); border:2px solid var(--ink); border-radius:99px; padding:3px 14px; cursor:pointer; }
.chip.on { background:var(--ink); color:var(--cream); }
.tag { display:inline-block; border:2px solid var(--ink); border-radius:99px; padding:0 10px; font-size:12px; font-weight:700; background:var(--paper); }
.tag.live { background:var(--yellow); }

/* 一覧ページ */
.list-head { padding:40px 0 20px; }
.list-head h1 { font-size:30px; line-height:1.4; margin:0 0 8px; }
.list-head p { margin:0; color:var(--sub); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; margin-top:22px; }
.card { display:flex; flex-direction:column; background:var(--paper); border:var(--line); border-radius:10px; box-shadow:var(--shadow); text-decoration:none; overflow:hidden; transition:transform .08s; }
a.card:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.card.off { background:#f1ead2; box-shadow:none; opacity:.8; }
.card .thumb { height:170px; border-bottom:var(--line); display:flex; align-items:center; justify-content:center; }
.card .thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.card .thumb svg { width:78%; height:82%; }
.card .body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card h2 { margin:0; font-size:18px; line-height:1.4; }
.card p { margin:0; font-size:13px; color:var(--sub); flex:1; }
.card .meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.empty { padding:40px 0; color:var(--sub); }

/* ツール詳細ページ */
.crumb { padding:18px 0 0; font-size:13px; }
.tool-head { padding:6px 0 16px; }
.tool-head h1 { font-size:28px; margin:4px 0 4px; line-height:1.4; }
.tool-head p { margin:0; color:var(--sub); }
.tool-grid { display:grid; grid-template-columns:360px 1fr; gap:22px; align-items:start; }
.panel { background:var(--paper); border:var(--line); border-radius:10px; box-shadow:var(--shadow); padding:16px; }
.panel h3 { font-size:13px; margin:18px 0 4px; color:var(--sub); letter-spacing:.06em; }
.panel h3:first-child { margin-top:0; }
.field { display:grid; grid-template-columns:1fr 92px; gap:6px 10px; align-items:center; margin:10px 0; }
.field label { font-weight:700; font-size:14px; line-height:1.4; }
.field label small { display:block; font-weight:400; color:var(--sub); font-size:12px; }
.field input[type=number] { width:100%; font:inherit; font-weight:700; padding:5px 8px; border:2px solid var(--ink); border-radius:6px; background:var(--cream); text-align:right; }
.field input[type=range] { grid-column:1 / -1; width:100%; margin:0; accent-color:var(--ink); }
.presets { display:flex; flex-wrap:wrap; gap:8px; }
.view { background:var(--teal); border:var(--line); border-radius:10px; box-shadow:var(--shadow); height:430px; overflow:hidden; }
.view canvas { display:block; width:100%; height:100%; }
.stats { margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.stat { background:var(--paper); border:2px solid var(--ink); border-radius:8px; padding:8px 12px; }
.stat b { display:block; font-size:12px; color:var(--sub); font-weight:700; }
.stat span { font-weight:700; font-size:16px; }
.msgs { margin-top:16px; display:grid; gap:8px; }
.msg { border:2px solid var(--ink); border-radius:8px; padding:8px 12px; font-size:14px; font-weight:500; background:var(--paper); }
.msg.ng { background:#ffe3df; border-color:var(--warn); color:#5c1510; }
.msg.ok { background:#dff5ec; }
.hint { color:var(--sub); font-size:12px; margin-top:10px; }
.saverow { display:flex; gap:8px; margin-top:14px; }
.saverow .btn { flex:1; text-align:center; }

/* 説明ページ */
.doc { max-width:720px; padding:36px 0 0; }
.doc h1 { font-size:30px; line-height:1.4; margin:0 0 18px; }
.doc h2 { font-family:"Dela Gothic One","Zen Kaku Gothic New",sans-serif; font-weight:400; font-size:20px; margin:36px 0 8px; padding-bottom:6px; border-bottom:var(--line); }
.doc p, .doc li { line-height:1.95; }
.doc .note { background:var(--yellow); border:var(--line); border-radius:10px; padding:12px 16px; box-shadow:var(--shadow); }

@media (max-width:820px) {
  .tool-grid { grid-template-columns:1fr; }
  .view { height:340px; }
  .list-head h1, .doc h1 { font-size:24px; }
}

/* 注意書き（試し刷り前のツールなど） */
.notice { margin-top:12px; background:#fff; border:2px solid var(--ink); border-left-width:8px; border-radius:8px; padding:8px 12px; font-size:13px; line-height:1.7; }
.tag.unverified { background:#fff; border-style:dashed; }

/* 一覧の検索欄 */
.searchrow { margin: 4px 0 14px; }
.searchrow input { width: 100%; max-width: 480px; font: inherit; font-weight: 500; padding: 9px 14px; border: var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }

/* うまくいかなかったとき（報告の入口） */
.feedback { margin-top: 18px; background: var(--paper); border: 2px dashed var(--ink); border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.feedback p { margin: 4px 0; }
.feedback .fbrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 4px; }
.feedback .fbnote { color: var(--sub); font-size: 13px; }

/* 規格セット */
.tag.set { background: var(--teal); }
.card.setcard { border-width: 3px; }
.specs { width: 100%; border-collapse: collapse; margin: 6px 0 4px; background: var(--paper); border: 2px solid var(--ink); }
.specs th, .specs td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--ink); font-size: 14px; vertical-align: top; }
.specs th { width: 11em; background: var(--cream); font-weight: 700; }
.steps { padding-left: 1.4em; }
.steps li { margin: 4px 0; }
.role { font-size: 12px; font-weight: 700; color: var(--sub); }

h2.sub { font-family:"Dela Gothic One","Zen Kaku Gothic New",sans-serif; font-weight:400; font-size:17px; margin:28px 0 10px; padding-bottom:4px; border-bottom:var(--line); }
.field textarea.ta { width:100%; font:inherit; font-weight:700; padding:8px 10px; border:2px solid var(--ink); border-radius:6px; background:var(--cream); resize:vertical; line-height:1.5; }
/* 名刺・自由レイアウトの編集画面 */
.editor { background:var(--paper); border:var(--line); border-radius:10px; box-shadow:var(--shadow); padding:12px; margin-bottom:20px; }
.ce-bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.ce-sep { width:1px; height:22px; background:var(--ink); opacity:.3; margin:0 4px; }
.ce-snap { font-size:13px; font-weight:700; margin-left:auto; }
.ce-stage { background:#fff; border:2px solid var(--ink); border-radius:8px; overflow:hidden; }
.ce-stage canvas { display:block; touch-action:none; outline:none; cursor:default; }
.ce-hint, .ce-hint2 { font-size:12px; color:var(--sub); margin:8px 0; }
.ce-props h3 { font-size:13px; margin:12px 0 6px; color:var(--sub); }
.ce-none { font-size:13px; color:var(--sub); padding:8px 0; }
.ce-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px 12px; }
.ce-f { display:flex; flex-direction:column; font-size:12px; font-weight:700; gap:2px; }
.ce-f input[type=number] { font:inherit; font-weight:700; padding:4px 6px; border:2px solid var(--ink); border-radius:6px; background:var(--cream); width:100%; box-sizing:border-box; }
.ce-check { flex-direction:row; align-items:center; gap:8px; }
.ce-rtbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; font-size:13px; font-weight:700; }
.ce-rtbar input[type=number] { width:72px; font:inherit; font-weight:700; padding:3px 6px; border:2px solid var(--ink); border-radius:6px; background:var(--cream); }
.ce-rt { min-height:70px; max-height:220px; overflow:auto; border:2px solid var(--ink); border-radius:8px; padding:8px 10px; background:#fff; line-height:1.3; white-space:pre-wrap; outline:none; }
.ce-rt:focus { border-color:#1b6fe0; }
/* 右側（プレビュー・数値・メッセージ）は、スクロールしても、画面に残す */
.tool-grid > section:last-child { position:sticky; top:12px; align-self:start; max-height:calc(100vh - 24px); overflow-y:auto; padding:0 8px 8px 0; }
@media (max-width:820px) { .tool-grid > section:last-child { position:static; max-height:none; overflow:visible; padding:0; } }
/* いいね */
.like { display:inline-flex; align-items:center; gap:6px; font:inherit; font-weight:700; font-size:13px; padding:2px 10px; border:2px solid var(--ink); border-radius:99px; background:var(--paper); cursor:pointer; }
.like[hidden] { display:none; }
.like .heart { font-size:15px; line-height:1; }
.like.on { background:#ffd5cc; }
.like .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.likerow { margin-top:10px; }
.card .meta .like { margin-left:auto; }
/* 回数制限と会員キー */
.pk-info { margin-top:10px; font-size:13px; font-weight:700; }
.pk-info[hidden] { display:none; }
.pk-info a { margin-left:6px; }
.pk-modal { position:fixed; inset:0; background:rgba(17,17,17,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.pk-box { background:var(--paper,#fff); border:4px solid var(--ink,#111); border-radius:16px; box-shadow:8px 8px 0 var(--ink,#111); max-width:480px; width:100%; padding:22px; max-height:90vh; overflow:auto; }
.pk-box h3 { margin:0 0 10px; font-size:20px; }
.pk-l { display:block; font-weight:700; font-size:14px; margin:14px 0 6px; }
.pk-l input { display:block; width:100%; box-sizing:border-box; margin-top:6px; font:inherit; font-weight:700; padding:8px 10px; border:2px solid var(--ink,#111); border-radius:8px; background:var(--cream,#fff6dc); }
.pk-row { display:flex; gap:10px; margin:14px 0 8px; }
.pk-msg { min-height:22px; font-size:14px; font-weight:700; }
.plan-note { font-size:13px; color:var(--sub); margin-top:4px; }