/* =========================================================
   電子値札（電子ペーパー値札）
   ========================================================= */
.tabs { display:flex; gap:4px; margin-bottom:14px; flex-wrap:wrap; }
.tabs button {
    background:#fff; border:1px solid var(--line-dark); border-radius:6px 6px 0 0;
    padding:7px 15px; font:inherit; font-size:13px; cursor:pointer;
}
.tabs button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.tabpane[hidden] { display:none; }

/* ---------- 生成画面のレイアウト ---------- */
.tag-wrap { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.tag-side { flex:0 0 300px; }
.tag-main { flex:1 1 520px; min-width:0; }

.tag-form { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px; }
.tag-form .field { margin-bottom:10px; }
.tag-form h4 { margin:0 0 9px; font-size:13px; }
.tag-form .row { display:flex; gap:8px; }
.tag-form .row > * { flex:1; min-width:0; }

/* ---------- プレビュー ---------- */
.preview-box {
    background:#f0f0ec; border:1px solid var(--line); border-radius:8px;
    padding:20px; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.epaper {
    background:#fff; padding:8px 8px 10px; border-radius:5px;
    box-shadow:0 3px 10px rgba(0,0,0,.22);
    border:1px solid #c8c8c2;
}
.epaper.frame-black  { background:#1a1a1a; }
.epaper.frame-white  { background:#f4f4f2; }
.epaper.frame-silver { background:linear-gradient(#e9e9e7,#c9c9c5); }
.epaper.frame-gold   { background:linear-gradient(#e7d7a6,#c9ab63); }
.epaper canvas { display:block; background:#fff; image-rendering:crisp-edges; }
.epaper .ep-chin {
    text-align:center; font-size:8px; letter-spacing:.06em; color:#9a9a96; margin-top:4px;
}
.epaper.frame-black .ep-chin { color:#8d8d89; }

.size-note { font-size:11.5px; color:var(--ink-sub); }

/* ---------- 一覧（サムネイル） ---------- */
.thumb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px; }
.thumb {
    background:#fff; border:1px solid var(--line-dark); border-radius:8px; padding:9px;
    cursor:pointer; text-align:left; font:inherit;
}
.thumb:hover { box-shadow:0 4px 12px rgba(0,0,0,.13); }
.thumb.is-on { border-color:var(--blue); box-shadow:inset 0 0 0 2px var(--blue); }
.thumb canvas { display:block; width:100%; height:auto; border:1px solid #ddd; }
.thumb .th-name { font-size:12px; font-weight:700; margin-top:6px; }
.thumb .th-meta { font-size:10.5px; color:var(--ink-sub); }

/* ---------- 見積り ---------- */
.est-grid { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.est-in { flex:0 0 320px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px; }
.est-out { flex:1 1 480px; min-width:0; }
.est-total {
    background:var(--tint-blue); border:1px solid #cfe0f5; border-radius:8px;
    padding:12px 14px; margin-bottom:12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.est-total b { font-size:26px; font-variant-numeric:tabular-nums; }
.est-total span { font-size:12px; color:var(--ink-sub); }
.tbl td.num b { font-variant-numeric:tabular-nums; }

/* ---------- アレルゲン ---------- */
.alg-chips { display:flex; flex-wrap:wrap; gap:4px; }
.alg-chip {
    font-size:10.5px; border:1px solid var(--line-dark); border-radius:11px;
    padding:1px 8px; background:#fff; cursor:pointer; font-family:inherit;
}
.alg-chip.is-on { background:var(--red); border-color:var(--red); color:#fff; }
.alg-chip.rec.is-on { background:var(--amber); border-color:var(--amber); }
.alg-cell { text-align:center; font-weight:700; color:var(--red); }
.alg-cell.rec { color:var(--amber); }
.alg-tbl-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; max-height:70vh; }
.alg-tbl { border-collapse:collapse; background:#fff; font-size:11.5px; }
.alg-tbl th, .alg-tbl td { border:1px solid var(--line); padding:3px 5px; white-space:nowrap; }
.alg-tbl thead th { background:#f4f4ef; position:sticky; top:0; z-index:2; }
.alg-tbl tbody th {
    position:sticky; left:0; background:#fff; text-align:left; z-index:1; font-weight:400;
}
.alg-tbl .rot { height:92px; }
.alg-tbl .rot span { writing-mode:vertical-rl; font-size:10.5px; font-weight:400; }

/* ---------- 店舗マトリクス ---------- */
.mx-on  { background:#eef7f0; color:var(--green); font-weight:700; text-align:center; }
.mx-off { color:#ccc; text-align:center; }
.price-in { width:76px; text-align:right; }