/* DPRO 焼肉店 予約・順番受付 LINE
   STEP YAKINIKU-4 shared visual system */
:root{
  --bg:#f6efe4;--paper:#fffdf8;--paper2:#fff8ed;--ink:#2a211e;--muted:#75665f;
  --line:#e6d7c9;--charcoal:#211815;--red:#8c2f23;--red2:#682018;--ember:#d56a28;
  --gold:#b58a3b;--green:#397154;--green2:#285640;--amber:#95611a;--blue:#416d88;
  --danger:#a23035;--shadow:0 13px 34px rgba(61,34,23,.11);--radius:18px;
}
*{box-sizing:border-box}
html{font-size:17px;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--ink);
  background:
    radial-gradient(circle at 10% 0,rgba(213,106,40,.12),transparent 30%),
    linear-gradient(145deg,#fbf6ed,#f3e9dd);
  font:17px/1.66 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
}
button,input,select,textarea{font:inherit;font-size:17px}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
.hidden{display:none!important}
.page{max-width:1180px;margin:0 auto;padding:22px 18px 90px}
.page.narrow{max-width:850px}
.topbar{position:sticky;top:0;z-index:90;background:rgba(255,253,248,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1180px;min-height:74px;margin:auto;padding:9px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand-mark{width:49px;height:49px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,var(--charcoal),var(--red));color:#fff;font-size:25px;box-shadow:0 8px 20px rgba(70,31,23,.2);flex:none}
.brand strong{display:block;font-size:20px;line-height:1.25}
.brand small{display:block;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:8px}
.hero{
  position:relative;overflow:hidden;border-radius:25px;padding:30px;
  background:
    radial-gradient(circle at 85% 10%,rgba(255,190,112,.25),transparent 27%),
    linear-gradient(135deg,#211815 0%,#6e221a 58%,#a74426 100%);
  color:#fff;box-shadow:0 22px 50px rgba(59,27,20,.21)
}
.hero:after{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-70px;bottom:-115px}
.hero-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}
.eyebrow{margin:0 0 7px;color:#ffd6a9;font-weight:900;font-size:13px;letter-spacing:.22em}
.hero h1{font-size:34px;line-height:1.34;margin:0;letter-spacing:.01em}
.hero p{max-width:700px;margin:10px 0 0;color:#f8e5d9}
.hero-badge{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 13px;font-weight:850;font-size:14px;background:rgba(255,255,255,.09)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:16px;box-shadow:var(--shadow)}
.panel.soft{background:var(--paper2)}
.panel.dark{background:var(--charcoal);color:#fff;border-color:#3f302b}
.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px}
.panel-title h2,.panel-title h3{margin:0;line-height:1.4}
.panel-title h2{font-size:24px}.panel-title h3{font-size:21px}
.small{font-size:14px;color:var(--muted)}
.dark .small{color:#d8c7bf}
.muted{color:var(--muted)}
.notice{padding:13px 15px;border-radius:13px;background:#fff1dc;border:1px solid #eac28d;color:#714414;margin-top:13px}
.notice.good{background:#eaf5ed;border-color:#b9d9c2;color:#285d3e}
.notice.bad{background:#ffeaec;border-color:#e5b4b7;color:#8d292e}
.notice.info{background:#edf4f8;border-color:#bfd2de;color:#345f78}
.demo-banner{position:sticky;top:74px;z-index:85;text-align:center;padding:9px 14px;background:#fff1d9;color:#7e4612;border-bottom:1px solid #e8c28c;font-size:14px;font-weight:900}
.grid{display:grid;gap:13px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--paper);box-shadow:var(--shadow)}
.metric span{display:block;color:var(--muted);font-size:14px;font-weight:750}
.metric b{display:block;font-size:29px;line-height:1.25;margin-top:3px}
.metric.red{background:#fff0ee;border-color:#e3b9b2}.metric.green{background:#ecf6ee;border-color:#bddbc5}.metric.gold{background:#fff6df;border-color:#e4ca91}
.field{display:block}
.field>label,.field-label{display:block;font-size:15px;font-weight:850;margin-bottom:6px}
.input,.select,.textarea{
  width:100%;min-height:52px;border:1px solid #d7c5b8;border-radius:13px;padding:10px 13px;background:#fff;color:var(--ink);outline:none
}
.textarea{min-height:105px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ember);box-shadow:0 0 0 3px rgba(213,106,40,.16)}
.input[disabled],.select[disabled],button[disabled]{opacity:.55;cursor:not-allowed}
.inline-fields{display:flex;gap:9px;align-items:end}
.btn{
  min-height:51px;border:0;border-radius:13px;padding:10px 17px;background:var(--red);color:#fff;font-weight:900;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;transition:.15s transform,.15s background,.15s box-shadow
}
.btn:hover{background:var(--red2);box-shadow:0 8px 20px rgba(110,34,26,.16)}
.btn:active{transform:scale(.985)}
.btn.ember{background:var(--ember)}.btn.green{background:var(--green)}.btn.green:hover{background:var(--green2)}
.btn.gold{background:var(--gold);color:#211815}.btn.dark{background:var(--charcoal)}
.btn.sub{background:#efe5db;color:#4f3931}.btn.white{background:#fff;color:var(--red);border:1px solid #f0c7bc}
.btn.outline{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--danger)}.btn.small-btn{min-height:40px;padding:7px 11px;font-size:15px;border-radius:10px}
.btn.block{width:100%}.btn-group{display:flex;flex-wrap:wrap;gap:8px}
.cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}
.cta{display:block;text-decoration:none;border-radius:20px;padding:22px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);transition:.18s transform}
.cta:hover{transform:translateY(-2px)}
.cta strong{display:block;font-size:22px}.cta span{display:block;color:var(--muted);font-size:15px;margin-top:4px}
.cta.primary{background:linear-gradient(140deg,#8c2f23,#c15a2f);color:#fff;border-color:transparent}.cta.primary span{color:#ffe8da}
.cta.queue{background:linear-gradient(140deg,#211815,#4f3931);color:#fff;border-color:transparent}.cta.queue span{color:#eadcd5}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#eee4db;color:#59433a;font-size:14px;font-weight:800}
.chip.red{background:#ffe4df;color:#8c2f23}.chip.green{background:#e4f2e8;color:#306447}.chip.gold{background:#fff0c9;color:#77511c}.chip.blue{background:#e5f0f6;color:#355f77}
.status{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:14px;font-weight:900;background:#eee4db;color:#60493f}
.status.waiting,.status.request{background:#fff0c9;color:#79521b}.status.confirmed,.status.arrived{background:#e4f2e8;color:#2e6545}
.status.called,.status.no_show{background:#ffe2e3;color:#902e32}.status.soon,.status.checked_in{background:#e8eff8;color:#3b6280}
.status.dining,.status.seated,.status.occupied{background:#eadff3;color:#66427e}.status.payment,.status.cleaning{background:#fff0da;color:#815518}
.status.completed,.status.available{background:#e4f2e8;color:#2d6444}.status.cancelled,.status.left,.status.stopped{background:#eee;color:#686868}.status.hold{background:#f3e6d5;color:#755235}
.list{display:grid;gap:10px}
.card{border:1px solid var(--line);border-radius:15px;padding:15px;background:#fff}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card h3,.card h4{margin:0}.card h3{font-size:20px}.card h4{font-size:18px}
.card-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;color:var(--muted);font-size:15px}
.card-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{text-align:left;padding:12px 13px;border-bottom:1px solid #eee3da;vertical-align:top}
th{background:#f6ede5;font-size:14px;color:#654f46;position:sticky;top:0;z-index:1}
tr:last-child td{border-bottom:0}
.tabs{display:flex;gap:7px;overflow:auto;padding:3px 0 7px}
.tab{white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-weight:850;cursor:pointer}
.tab.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.tab-panel{display:none}.tab-panel.active{display:block}
.slot-groups{display:grid;gap:15px}
.slot-period{border:1px solid var(--line);border-radius:15px;padding:14px;background:#fff}
.slot-period h3{margin:0 0 10px;font-size:19px}
.slot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.slot{min-height:48px;border:1px solid #d7c6b8;background:#fff;border-radius:11px;font-weight:900;cursor:pointer}
.slot:hover{border-color:var(--ember)}.slot.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.slot.unavailable{background:#f0ece8;color:#aaa;border-color:#e4ded8;text-decoration:line-through;cursor:not-allowed}
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0}
.step{border-radius:13px;padding:10px;text-align:center;background:#eee4db;color:#6f5b52;font-weight:850;font-size:14px}
.step.active{background:var(--red);color:#fff}
.queue-hero{text-align:center;padding:24px;border-radius:20px;background:linear-gradient(145deg,#211815,#55251d);color:#fff}
.queue-number{font-size:53px;line-height:1.1;font-weight:950;letter-spacing:.03em}
.queue-wait{font-size:25px;font-weight:900;margin-top:7px}
.table-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.table-card{border:2px solid var(--line);border-radius:17px;padding:15px;background:#fff;min-height:155px}
.table-card.available{border-color:#aad1b5;background:#eff8f1}.table-card.occupied{border-color:#bca3ce;background:#f2eaf8}
.table-card.payment{border-color:#e2bd78;background:#fff5e2}.table-card.cleaning{border-color:#e3b57d;background:#fff1df}
.table-card.stopped{background:#eee;color:#777}.table-card.selected{outline:4px solid rgba(213,106,40,.25);border-color:var(--ember)}
.table-card h3{margin:0;font-size:20px}.table-card .capacity{font-size:14px;color:var(--muted)}
.table-card .timer{font-size:22px;font-weight:950;margin-top:12px}
.authbar{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:end}
.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(25,17,14,.64);display:flex;align-items:center;justify-content:center;padding:18px}
.modal{width:min(720px,100%);max-height:90vh;overflow:auto;border-radius:20px;background:var(--paper);border:1px solid var(--line);padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.modal-head h2{margin:0;font-size:24px}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:20px}
.toast{position:fixed;z-index:300;top:18px;left:50%;transform:translateX(-50%);max-width:min(620px,calc(100% - 24px));padding:12px 17px;border-radius:13px;background:#211815;color:#fff;font-weight:850;box-shadow:0 15px 35px rgba(0,0,0,.25)}
.toast.bad{background:#8e2930}.toast.good{background:#306848}
.loading{padding:28px;text-align:center;color:var(--muted)}
.empty{padding:26px;text-align:center;border:1px dashed #d8c5b7;border-radius:14px;color:var(--muted);background:#fffaf5}
.footer{padding:25px 18px;text-align:center;color:var(--muted);font-size:14px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:7px 13px}.kv dt{font-weight:850;color:#665047}.kv dd{margin:0;word-break:break-word}
.display-body{background:#16100e;color:#fff;min-height:100vh}
.display-wrap{max-width:1500px;margin:auto;padding:28px}
.display-header{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #5c463f;padding-bottom:18px}
.display-header h1{margin:0;font-size:38px}.display-clock{font-size:30px;font-weight:900}
.display-section{margin-top:26px;padding:25px;border-radius:25px;background:#2b201c}
.display-section.calling{background:linear-gradient(145deg,#78251d,#bd512b)}
.display-section h2{font-size:29px;margin:0 0 15px}
.ticket-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ticket{border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:17px;text-align:center;background:rgba(255,255,255,.07);font-size:40px;font-weight:950}
.log{white-space:pre-wrap;background:#2a201d;color:#f8ece6;border-radius:13px;padding:14px;max-height:290px;overflow:auto;font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.check{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:start;border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}
.check-icon{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#eee;color:#666;font-weight:950}
.check.ok .check-icon{background:#dff0e3;color:#286342}.check.ng .check-icon{background:#ffe0e3;color:#922d32}.check.run .check-icon{background:#fff0d5;color:#7c5116}
.check-result{font-size:14px;font-weight:900}.check.ok .check-result{color:var(--green)}.check.ng .check-result{color:var(--danger)}
@media(max-width:900px){
  .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-board{grid-template-columns:repeat(3,minmax(0,1fr))}.slot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:680px){
  html{font-size:17px}.page{padding:15px 12px 75px}.topbar-inner{padding:8px 12px}.brand small{display:none}
  .top-actions .hide-mobile{display:none}.hero{padding:23px 19px}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:28px}
  .grid.two,.grid.three,.grid.four{grid-template-columns:1fr}.cta-grid{grid-template-columns:1fr}
  .slot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.table-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .authbar{grid-template-columns:1fr auto}.authbar .field{grid-column:1/-1}.kv{grid-template-columns:1fr}.kv dt{margin-top:5px}
  .panel{padding:16px}.panel-title{flex-direction:column}.panel-title .btn-group{width:100%}.panel-title .btn-group .btn{flex:1}
  .display-wrap{padding:18px}.display-header h1{font-size:28px}.display-clock{font-size:22px}.ticket-grid{grid-template-columns:repeat(2,1fr)}.ticket{font-size:32px}
  .check-grid{grid-template-columns:1fr}
}
@media(max-width:410px){.slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.table-board{grid-template-columns:1fr}}


/* STEP YAKINIKU-5 operations UI */
.shop-info-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:16px;align-items:start}
.shop-profile{border:1px solid var(--line);border-radius:16px;padding:17px;background:#fff}
.hours-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.hours-card{border:1px solid var(--line);border-radius:13px;padding:11px 13px;background:#fff;min-height:78px}
.hours-card strong{display:block;font-size:16px}
.hours-card .small{line-height:1.5;margin-top:3px}
.hours-card.closed{background:#f2eee9;color:#766963}
.operation-note{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:13px;background:#fff6df;border:1px solid #e6ce98}
.operation-note b{color:#7a531a}
.customer-picker{border:1px solid #cfded3;background:#eff8f1;border-radius:14px;padding:13px;margin-top:10px}
.customer-picker strong{display:block}
.settings-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px}
.settings-nav{display:grid;align-content:start;gap:7px;position:sticky;top:92px;height:max-content}
.settings-link{width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff;color:var(--ink);font-weight:850;cursor:pointer}
.settings-link.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.settings-pane{display:none}.settings-pane.active{display:block}
.master-list{display:grid;gap:9px}
.master-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}
.master-main strong{font-size:18px}.master-meta{display:flex;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-top:4px}
.master-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.form-note{font-size:14px;color:var(--muted);margin-top:6px}
.hours-editor{display:grid;gap:10px}
.hours-row{display:grid;grid-template-columns:95px 1fr 1fr 1fr 1fr auto;gap:8px;align-items:end;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.hours-row .close-cell{align-self:center;padding-bottom:13px}
.modal .table-board{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:15px}
.phone-slot-list{margin-top:12px}
.slot-summary{border-radius:13px;padding:11px 13px;background:#edf5f8;border:1px solid #c5d9e3;margin-top:10px}
.identity-note{margin-top:9px;font-size:14px;color:var(--muted)}
.quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.quick-action{border:1px solid var(--line);border-radius:14px;background:#fff;padding:15px;text-align:left;cursor:pointer}
.quick-action strong{display:block;font-size:18px}.quick-action span{display:block;color:var(--muted);font-size:14px;margin-top:3px}
.danger-zone{border-color:#e4b4b7;background:#fff7f7}
@media(max-width:900px){
  .shop-info-layout{grid-template-columns:1fr}
  .settings-shell{grid-template-columns:1fr}
  .settings-nav{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}
  .settings-link{text-align:center}
  .hours-row{grid-template-columns:80px 1fr 1fr}
  .hours-row .period-name,.hours-row .last-time{grid-column:auto}
  .hours-row .close-cell{padding-bottom:0}
}
@media(max-width:680px){
  .hours-compact{grid-template-columns:1fr}
  .settings-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .master-row{grid-template-columns:1fr}
  .master-actions{justify-content:flex-start}
  .quick-actions{grid-template-columns:1fr}
  .hours-row{grid-template-columns:1fr 1fr}
  .hours-row .weekday-label{grid-column:1/-1}
  .modal .table-board{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* STEP YAKINIKU-7 final brush-up */
.analytics-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.analytics-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.analytics-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:15px}
.analytics-card span{display:block;color:var(--muted);font-size:14px;font-weight:800}
.analytics-card b{display:block;font-size:27px;line-height:1.25;margin-top:3px}
.chart-list{display:grid;gap:9px}.chart-row{display:grid;grid-template-columns:78px 1fr 58px;gap:10px;align-items:center}
.chart-track{height:17px;border-radius:999px;background:#eee5dd;overflow:hidden}.chart-bar{height:100%;min-width:2px;border-radius:999px;background:linear-gradient(90deg,var(--red),var(--ember))}
.chart-value{text-align:right;font-weight:850}.edit-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #c7d9e8;background:#edf5fb;border-radius:15px;padding:13px 15px;margin-top:14px}
.closed-wait-list{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.restore-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
@media(max-width:900px){.analytics-controls,.analytics-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.analytics-controls,.analytics-metrics{grid-template-columns:1fr}.chart-row{grid-template-columns:64px 1fr 50px}}