:root{
  --ink:#0f1a2e; --sub:#5b6577; --faint:#8a93a3; --line:#e4e8ef; --line-strong:#cfd6e2; --bg:#ffffff; --tint:#f5f7fa; --card:#fff;
  --accent:#1d4ed8; --accent-ink:#fff; --accent-dark:#163fae; --accent-soft:#eef3ff; --accent-line:#c7d5fa;
  --jp:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Noto Sans CJK JP','Yu Gothic UI',Meiryo,sans-serif;
  --num:var(--jp);
  --warn-bg:#fff6e0; --warn:#8a5a00; --bad-bg:#fdecea; --bad:#b3261e; --info-bg:#eaf3ff; --info:#1a4f99;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.75 var(--jp);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;font-feature-settings:"palt" 1}
html[lang=vi] body{--jp:'Be Vietnam Pro',system-ui,sans-serif;font-feature-settings:normal}
html[lang=zh-Hans] body{--jp:'PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif}
a{color:var(--info)}
.wrap{max-width:640px;margin:0 auto;padding:12px 12px 120px}
h1{font-size:19px;margin:6px 0 10px}
h2{font-size:16px;margin:18px 0 8px}
.muted{color:var(--sub);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.box{border-radius:10px;padding:10px 12px;margin:10px 0;font-size:14px}
.box.warn{background:var(--warn-bg);color:var(--warn)}
.box.bad{background:var(--bad-bg);color:var(--bad)}
.box.info{background:var(--info-bg);color:var(--info)}
.flash{background:#1c1f23;color:#fff;border-radius:10px;padding:10px 12px;margin:10px 0;font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;
  padding:12px 16px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;background:#e9ecef;color:var(--ink)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-dark)}
.btn.secondary{background:#fff;color:var(--accent);border:1.5px solid var(--accent)}
.btn.primary:disabled{background:#b7c2bb;cursor:not-allowed}
.btn.block{width:100%}
.btn.small{padding:6px 10px;font-size:13px;border-radius:8px}
.btn.danger{background:var(--bad);color:#fff}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;vertical-align:middle}
.badge.few{background:var(--warn-bg);color:var(--warn)}
.badge.out{background:var(--bad-bg);color:var(--bad)}
.badge.ok{background:var(--accent-soft);color:var(--accent-dark)}
.badge.gray{background:#eceff2;color:var(--sub)}
ul.notes{padding-left:18px;margin:6px 0;font-size:13px;color:var(--sub)}
input[type=text],input[type=password],input[type=number],input[type=datetime-local],select,textarea{
  font:inherit;font-size:16px;border:1px solid #cfd4da;border-radius:8px;padding:9px 10px;width:100%;background:#fff}
label{display:block}
.field{margin:8px 0}
.field > span{display:block;font-size:13px;color:var(--sub);margin-bottom:3px}

/* dev bar */
.devbar{background:#2b2f36;color:#dfe3e8;font-size:12px;padding:8px 12px}
.devbar form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.devbar select,.devbar input{font-size:13px;padding:4px 6px;width:auto;border-radius:6px}
.devbar a{color:#9fd3ff}
.devbar .btn{padding:4px 8px;font-size:12px;border-radius:6px}
.topnav{display:flex;gap:4px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topnav a{flex:1;text-align:center;padding:10px 4px;font-size:13px;color:var(--sub);text-decoration:none;font-weight:700}
.topnav a.on{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}

/* 言語の切り替え */
.langbar{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:flex-end;padding:6px 12px;font-size:12px;background:#fff;border-bottom:1px solid var(--line)}
.langbar a{color:var(--sub);text-decoration:none}
.langbar a.on{color:var(--ink);font-weight:700}

/* quote list */
.search{position:sticky;top:41px;z-index:4;background:var(--bg);padding:8px 0}
.prod{display:grid;grid-template-columns:64px 1fr;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px;margin:8px 0}
.prod.sold{opacity:.55}
.prod img,.prod .noimg{width:64px;height:64px;object-fit:contain;border-radius:8px;background:#f0f2f4}
.prod .noimg{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--sub)}
.prod .name{font-weight:700;line-height:1.35}
.prod .code{font-size:12px;color:var(--sub)}
.cond{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.cond .lbl{font-size:12px;color:var(--sub)}
.cond .price{font-weight:700;font-size:16px}
.step{display:flex;align-items:center;border:1px solid #cfd4da;border-radius:10px;overflow:hidden;flex:none}
.step button{width:38px;height:36px;border:0;background:#f4f5f7;font-size:20px;cursor:pointer;color:var(--ink)}
.step button:disabled{color:#b9bfc6;cursor:not-allowed}
.step output{width:34px;text-align:center;font-weight:700}
.bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));z-index:6}
.bar .in{max-width:640px;margin:0 auto;display:flex;gap:10px;align-items:center}
.bar .sum{flex:1;line-height:1.25}
.bar .sum b{font-size:19px}

/* confirm */
.line{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line .l{flex:1;min-width:0}
.line .r{text-align:right;white-space:nowrap}
.line.issue .l{color:var(--bad)}
.diff{font-size:12px}
.diff.up{color:#0b7a3b}.diff.down{color:var(--bad)}
.total{display:flex;justify-content:space-between;font-weight:700;font-size:18px;padding-top:8px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice label{border:1.5px solid #cfd4da;border-radius:10px;padding:10px;cursor:pointer;background:#fff}
.choice label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px #1f6feb33}
.choice input{margin-right:6px}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slots label{text-align:center;border:1.5px solid #cfd4da;border-radius:8px;padding:8px 0;cursor:pointer;font-weight:700;background:#fff}
.slots label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
.slots input{display:none}
.agree{display:flex;gap:8px;align-items:flex-start;font-weight:700;margin:12px 0}
.agree input{width:20px;height:20px;flex:none;margin-top:2px}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:6px 0;font-size:14px}
dl.kv dt{color:var(--sub)} dl.kv dd{margin:0;font-weight:700}

/* 傷の例 */
.examples{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0}
.examples figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.examples img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.examples figcaption{font-size:12px;padding:6px 8px;color:var(--sub)}

/* talk */
.talk{background:#8cabd9;border-radius:12px;padding:12px;min-height:200px}
.bubble{background:#fff;border-radius:14px;padding:10px 12px;margin:10px 0;max-width:92%;white-space:pre-line;font-size:14px}
.bubble b{display:block;margin-bottom:4px}
.bubble .meta{font-size:11px;color:var(--sub);margin-top:6px}

/* admin */
.admin .wrap{max-width:1100px}
.anav{display:flex;flex-wrap:wrap;gap:4px;background:#1c1f23;padding:6px 10px}
.anav a{color:#dfe3e8;text-decoration:none;padding:6px 10px;border-radius:6px;font-size:14px}
.anav a:hover{background:#343a42}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
th,td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:middle}
th{font-size:12px;color:var(--sub);font-weight:700;white-space:nowrap}
td.num,th.num{text-align:right}
table input[type=text]{width:100px;font-size:14px;padding:5px 6px}
table input.w60{width:64px}
.stat{font-size:24px;font-weight:800}

/* 管理画面：商品リスト・取り込み */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin:10px 0}
.pcard{display:grid;grid-template-columns:110px 1fr;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px}
.pcard.done{opacity:.6}
.pcard .pimg{text-align:center}
.pcard .pimg img{width:100%;max-width:110px;aspect-ratio:1/1;object-fit:contain;background:#f0f2f4;border-radius:8px}
.pcard .pimg .noimg{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:#f0f2f4;border-radius:8px;font-size:11px;color:var(--sub)}
.pcard .pimg .file{font-size:11px;margin:6px 0 4px;width:100%;max-width:110px}
.pcard .pbody{min-width:0}
.pcard .field{margin:4px 0}
.row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.prow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px;font-size:13px}
.prow form{margin:0}
@media (max-width:480px){.pcard{grid-template-columns:84px 1fr}}

/* 管理画面：パソコンは広く、スマホ・タブレットでは表を1件ずつのカードにする */
.admin .wrap{max-width:1400px}
.anav{position:sticky;top:0;z-index:10}
@media (max-width:900px){
  .anav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .anav a{white-space:nowrap}
  .admin .wrap{padding:10px 10px 90px}
  .admin table.stack tr:not(:has(td)){display:none}
  .admin table.stack,.admin table.stack tr,.admin table.stack td{display:block;width:100%}
  .admin table.stack tr{background:#fff;border:1px solid var(--line);border-radius:10px;margin:8px 0;padding:6px 10px}
  .admin table.stack td{border:0;padding:4px 0;display:flex;gap:10px;align-items:center;justify-content:space-between;text-align:right}
  .admin table.stack td::before{content:attr(data-label);color:var(--sub);font-size:12px;font-weight:700;
    text-align:left;white-space:nowrap}
  .admin table.stack td:empty{display:none}
  .admin table.stack td>form{justify-content:flex-end}
  .admin table.stack td input[type=text]{width:120px}
  .admin .table-scroll{overflow-x:visible}
}

/* 管理画面：できるだけ多くの行を1画面に */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.toolbar input[type=search]{width:auto;flex:1;min-width:180px;padding:7px 10px}
.admin table.dense th,.admin table.dense td{padding:2px 6px}
.admin table.dense td:last-child,.admin table.dense th:last-child{white-space:nowrap;width:1%}
.admin table.dense td .btn.small{padding:3px 8px;font-size:12px}
.admin table.dense input[type=text]{padding:3px 6px;font-size:14px;line-height:1.3}
.admin table.dense input.wide{width:100%;max-width:420px;min-width:180px}
.admin table.dense input.w120{width:120px}
.admin table.dense input.w80{width:80px}
.admin table.dense input.w40{width:46px;text-align:right}
.admin table.dense input[type=checkbox]{width:18px;height:18px}
.admin table.dense form{margin:0}
.thumb{display:block;width:28px;height:28px;border-radius:6px;background:#f0f2f4;cursor:pointer;overflow:hidden}
.thumb img{width:28px;height:28px;object-fit:contain}
.thumb .noimg{display:flex;width:28px;height:28px;align-items:center;justify-content:center;font-size:10px;color:var(--sub)}
details.card summary{cursor:pointer;font-weight:700}
@media (max-width:900px){
  /* 商品リストは1行1商品のまま、横スクロールで見る（1画面に多く出すため） */
  .admin .table-scroll.scroll{overflow-x:auto}
  .admin table.dense{min-width:460px}
  .admin table.dense input.wide{min-width:150px}
}

/* 商品リストのドラッグ並べ替え */
.admin table.dense td.grip{cursor:grab;touch-action:none;user-select:none;color:var(--sub);font-size:18px;
  text-align:center;width:28px;padding:2px 4px}
.admin table.dense tr.dragging{background:var(--accent-soft);box-shadow:0 2px 8px #0002}
.admin table.dense tr.dragging td.grip{cursor:grabbing}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#1c1f23;color:#fff;
  padding:8px 14px;border-radius:10px;font-size:14px;z-index:20}
.toast.bad{background:var(--bad)}

/* ゲームの色分け（ポケモン=黄、ワンピース=赤、ドラゴンボール=橙） */
:root{--g-pokemon:#e0a800; --g-pokemon-bg:#fff6d6; --g-pokemon-ink:#6b4f00;
  --g-onepiece:#d63a32; --g-onepiece-bg:#fde6e4; --g-onepiece-ink:#8f1d17;
  --g-dragonball:#ef7d00; --g-dragonball-bg:#ffead3; --g-dragonball-ink:#8a4300}
.gametabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.gametabs button{font:inherit;font-size:14px;font-weight:700;border:2px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:6px 14px;cursor:pointer}
.gametabs button span{font-weight:400;color:var(--sub);font-size:12px;margin-left:2px}
.gametabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gametabs button.on span{color:#dfe3e8}
.gametabs button.g-pokemon{border-color:var(--g-pokemon)}
.gametabs button.g-onepiece{border-color:var(--g-onepiece)}
.gametabs button.g-dragonball{border-color:var(--g-dragonball)}
.gametabs button.g-pokemon.on{background:var(--g-pokemon);color:#1c1f23}
.gametabs button.g-pokemon.on span{color:#3b2c00}
.gametabs button.g-onepiece.on{background:var(--g-onepiece)}
.gametabs button.g-dragonball.on{background:var(--g-dragonball)}
.admin table tr.gamehead td{font-weight:800;font-size:14px;padding:8px 10px;border-bottom:0}
tr.gamehead.g-pokemon td{background:var(--g-pokemon-bg);color:var(--g-pokemon-ink);border-left:5px solid var(--g-pokemon)}
tr.gamehead.g-onepiece td{background:var(--g-onepiece-bg);color:var(--g-onepiece-ink);border-left:5px solid var(--g-onepiece)}
tr.gamehead.g-dragonball td{background:var(--g-dragonball-bg);color:var(--g-dragonball-ink);border-left:5px solid var(--g-dragonball)}
.admin table tr.g-pokemon:not(.gamehead) td:first-child{border-left:5px solid var(--g-pokemon)}
.admin table tr.g-onepiece:not(.gamehead) td:first-child{border-left:5px solid var(--g-onepiece)}
.admin table tr.g-dragonball:not(.gamehead) td:first-child{border-left:5px solid var(--g-dragonball)}
@media (max-width:900px){
  .admin table.stack tr.gamehead{display:block;padding:0;border:0;background:none}
  .admin table.stack tr.gamehead td{display:block;border-radius:8px;margin-top:14px;text-align:left}
  .admin table.stack tr.gamehead td::before{content:none}
  .admin table.stack tr.g-pokemon:not(.gamehead){border-left:5px solid var(--g-pokemon)}
  .admin table.stack tr.g-onepiece:not(.gamehead){border-left:5px solid var(--g-onepiece)}
  .admin table.stack tr.g-dragonball:not(.gamehead){border-left:5px solid var(--g-dragonball)}
  .admin table.stack tr:not(.gamehead) td:first-child{border-left:0}
}
/* お客様の見積もり画面 */
.gamehead-c{margin:16px 0 4px;padding:6px 10px;border-radius:8px;font-weight:800;font-size:15px}
.gamehead-c.g-pokemon{background:var(--g-pokemon-bg);color:var(--g-pokemon-ink);border-left:5px solid var(--g-pokemon)}
.gamehead-c.g-onepiece{background:var(--g-onepiece-bg);color:var(--g-onepiece-ink);border-left:5px solid var(--g-onepiece)}
.gamehead-c.g-dragonball{background:var(--g-dragonball-bg);color:var(--g-dragonball-ink);border-left:5px solid var(--g-dragonball)}
.prod.g-pokemon{border-left:5px solid var(--g-pokemon)}
.prod.g-onepiece{border-left:5px solid var(--g-onepiece)}
.prod.g-dragonball{border-left:5px solid var(--g-dragonball)}
.badge.g-pokemon{background:var(--g-pokemon-bg);color:var(--g-pokemon-ink)}
.badge.g-onepiece{background:var(--g-onepiece-bg);color:var(--g-onepiece-ink)}
.badge.g-dragonball{background:var(--g-dragonball-bg);color:var(--g-dragonball-ink)}
.search .gametabs{margin:0 0 6px}
.admin table.dense input.w90{width:90px}
.admin table.dense input.w50{width:60px}
.admin table.dense input.num-in{text-align:right}
.admin table.dense td.nowrap{white-space:nowrap}
.admin table.dense .usedn{display:inline-block;min-width:1.5em;text-align:right;color:var(--sub)}
@media (max-width:900px){ .admin table.dense{min-width:760px} .admin table.dense input.wide{min-width:140px} }
/* スマホ：毎日さわる「次回の価格」「上限」までを横スクロールなしで見せる */
@media (max-width:600px){
  .admin table.dense .col-img{display:none}
  .admin table.dense{min-width:0;width:auto}
  .admin table.dense input.wide{min-width:0;width:112px}
  .admin table.dense input.w90{width:70px}
  .admin table.dense input.w50{width:48px}
  .admin table.dense td.num.nowrap{font-size:12px}
  .admin table.dense th,.admin table.dense td{padding:2px 3px}
  .admin table.dense td.grip{width:22px;padding:2px 2px}
}
.admin table.dense tr.dirty .rowsave{background:var(--accent);color:#fff}
.admin table.dense tr.saved td{background:var(--accent-soft);transition:background .3s}
/* お客様・カード */
.admin table.dense select.cardsel{font-size:14px;padding:3px 6px;width:auto}
.admin table.dense tr.card-1 td:first-child{border-left:5px solid #e0a800}
.admin table.dense tr.card-2 td:first-child{border-left:5px solid var(--bad)}
.admin table.dense tr.card-1{background:#fffbea}
.admin table.dense tr.card-2{background:#fdf0ef}



/* 管理画面で使う部品 */
.admin table.dense .rival{font-size:11px;color:var(--sub);text-align:right;margin-top:1px;white-space:nowrap}
.plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.plgrid figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.plgrid img{width:100%;border-radius:6px;display:block}
.plgrid figcaption{margin-top:6px;text-align:right}
body.admin{background:#f4f5f7}

/* 会員ランクの色（管理画面・お客様画面の両方） */
.rank-bronze{--rk:#8a5a36}
.rank-silver{--rk:#6b7480}
.rank-gold{--rk:#8c6d12}
.rank-platinum{--rk:#2f3e52}
.rank-chip{display:inline-block;padding:2px 7px;border:1px solid var(--rk,#6b7480);border-radius:2px;color:var(--rk,#6b7480);
  font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.04em;vertical-align:middle;white-space:nowrap;background:#fff}

/* ===== 管理画面の見直し（2026-10-08） ===== */
/* ロゴの紺にそろえる */
:root{--accent:#1f3c88; --accent-dark:#172d68; --accent-soft:#eef2fa; --accent-line:#c6d1ea}
/* ボタンの文字が縦に折れないように */
.btn{white-space:nowrap}
/* 日付・電話・メール・検索・ファイルの入力も、ほかの入力と同じ見た目に */
.admin input[type=date],.admin input[type=tel],.admin input[type=email],.admin input[type=search]{
  font:inherit;font-size:16px;border:1px solid #cfd4da;border-radius:8px;padding:9px 10px;width:100%;background:#fff}
.admin input[type=file]{font-size:13px;max-width:100%}
.admin .field input[type=date]{max-width:260px}
/* メニュー：いま開いているページ */
.anav a.on{background:#343a42;color:#fff;box-shadow:inset 0 -3px 0 #f0a800}
/* 表の中のボタンは折り返さない */
.admin table .btn{white-space:nowrap}
/* スマホでカード表示にした表が、画面の半分の幅になっていた（tbody が表のまま残っていた） */
@media (max-width:900px){
  .admin table.stack tbody,.admin table.stack thead{display:block;width:100%}
}
@media (max-width:900px){ .admin table.stack td[colspan]{justify-content:flex-start;text-align:left} .admin table.stack td[colspan]::before{content:none} }
/* タブレット縦（601〜900px）：メニューは隠さず折り返す。カードにした表は2列に並べる */
@media (min-width:601px) and (max-width:900px){
  .anav{flex-wrap:wrap;overflow-x:visible}
  .admin table.stack tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;align-items:start}
  .admin table.stack tr.gamehead,.admin table.stack tr:has(td[colspan]){grid-column:1 / -1}
}
/* LINE連携の一時停止中の帯（管理画面の上） */
.paused-bar{background:#a1261f;color:#fff;padding:8px 14px;font-size:13px;font-weight:700}
.paused-bar a{color:#fff;margin-left:8px}
/* 競合価格の画面：当店の価格をその場で直す */
.pricebar{position:static;z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;margin:8px 0;font-size:13px}
.admin table.dense input.myprice{width:92px;text-align:right;font-weight:700}
.admin table.dense input.myprice.dirty{background:#fff6d6;border-color:#e0a800}
@media (min-width:901px){ .pricebar{position:sticky;top:44px} }