*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"Noto Sans JP",system-ui,sans-serif;color:#1d1b18;background:#f4f2ee}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit}
.hide{display:none!important}
.yen::before{content:"¥"}
/* ===== launcher ===== */
#launcher{max-width:760px;margin:0 auto;padding:40px 20px 80px}
#launcher h1{font-size:22px;margin-bottom:6px}
#launcher p.sub{color:#6b655c;font-size:14px;margin-bottom:24px;line-height:1.7}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.lcard{background:#fff;border:1px solid #e3ded6;padding:18px;text-align:left}
.lcard b{display:block;font-size:16px;margin-bottom:4px}
.lcard span{font-size:12px;color:#6b655c;line-height:1.6;display:block}
.lcard .row{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.lbtn{padding:8px 12px;background:#1d1b18;color:#fff;font-size:13px}
.lbtn.ghost{background:#fff;color:#1d1b18;border:1px solid #1d1b18}
.tables{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.tables button{background:#fff;border:1px solid #e3ded6;padding:14px 0;font-size:14px}
@media(max-width:640px){.lgrid{grid-template-columns:1fr}.tables{grid-template-columns:repeat(3,1fr)}}

/* ===== customer ===== */
#customer{background:#14120f;color:#efe9e1;min-height:100%;font-family:"Noto Serif JP",serif;padding-bottom:120px}
.c-wrap{max-width:560px;margin:0 auto}
.c-hero{position:relative;height:300px;overflow:hidden}
.c-hero img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.9);transform:scale(1.08);animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.c-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.1) 0%,rgba(20,18,15,.35) 55%,#14120f 100%)}
.c-hero .in{position:absolute;left:0;right:0;bottom:22px;padding:0 24px;z-index:2}
.c-table{display:inline-block;font-family:"Cormorant Garamond",serif;letter-spacing:.28em;font-size:12px;border:1px solid rgba(200,169,126,.7);color:#c8a97e;padding:5px 12px 4px;margin-bottom:14px}
.c-name{font-family:"Cormorant Garamond","Noto Serif JP",serif;font-weight:500;font-size:46px;line-height:1;letter-spacing:.02em}
.c-tag{font-family:"Cormorant Garamond",serif;font-style:italic;color:#c8a97e;font-size:17px;margin-top:8px}
.c-cats{position:sticky;top:0;z-index:20;background:rgba(20,18,15,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;gap:26px;padding:16px 24px 0;overflow-x:auto;border-bottom:1px solid rgba(239,233,225,.08);scrollbar-width:none}
.c-cats::-webkit-scrollbar{display:none}
.c-cats button{font-family:"Cormorant Garamond","Noto Serif JP",serif;font-size:16px;letter-spacing:.08em;color:rgba(239,233,225,.5);padding-bottom:12px;position:relative;white-space:nowrap;transition:color .3s}
.c-cats button.on{color:#efe9e1}
.c-cats button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#c8a97e}
.c-sec{padding:34px 24px 4px}
.c-sec h2{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.c-sec h2 .en{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:30px;font-style:italic}
.c-sec h2 .ja{font-size:11px;letter-spacing:.3em;color:#8d8577}
.c-sec h2::after{content:"";flex:1;height:1px;background:rgba(239,233,225,.12);transform:translateY(-6px)}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 16px}
.c-item{text-align:left;display:flex;flex-direction:column;justify-content:flex-start;align-self:start;width:100%}.c-item.anim{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.c-item .ph{aspect-ratio:4/5;overflow:hidden;border-radius:2px;position:relative;background:#211e1a}
.c-item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.c-item:active .ph img{transform:scale(1.04)}
.c-item .qty{position:absolute;top:10px;right:10px;min-width:26px;height:26px;border-radius:13px;background:#c8a97e;color:#14120f;font-family:"Noto Sans JP";font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;padding:0 8px}
.c-item .so{position:absolute;inset:0;background:rgba(20,18,15,.65);display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond",serif;letter-spacing:.3em;font-size:14px}
.c-item .nm{font-size:14px;line-height:1.55;margin-top:12px;letter-spacing:.04em}
.c-item .pr{font-family:"Cormorant Garamond",serif;font-size:19px;color:#c8a97e;margin-top:2px;letter-spacing:.04em}
.c-foot{text-align:center;color:#6f685d;font-size:11px;letter-spacing:.2em;padding:44px 0 0;font-family:"Cormorant Garamond",serif}
.c-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:14px 18px calc(14px + env(safe-area-inset-bottom));pointer-events:none}
.c-bar button{pointer-events:auto;max-width:520px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;background:#efe9e1;color:#14120f;padding:17px 22px;border-radius:40px;box-shadow:0 12px 40px rgba(0,0,0,.45);font-family:"Noto Sans JP";font-weight:500;font-size:15px;transform:translateY(180%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.c-bar.show button{transform:none;opacity:1}
.c-bar .cnt{background:#14120f;color:#efe9e1;border-radius:14px;padding:2px 10px;font-size:13px;margin-right:10px}
.c-bar .tot{font-family:"Cormorant Garamond",serif;font-size:21px;font-weight:600}
/* sheets */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;opacity:0;pointer-events:none;transition:opacity .35s}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-width:560px;margin:0 auto;background:#1c1915;color:#efe9e1;border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);max-height:92vh;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}
.sheet.on{transform:none}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:rgba(239,233,225,.25);margin:10px auto 0}
.d-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;margin-top:10px}
.d-body{padding:22px 24px 26px}
.d-cat{font-family:"Cormorant Garamond",serif;font-style:italic;color:#c8a97e;font-size:15px}
.d-nm{font-size:22px;letter-spacing:.05em;margin:4px 0 10px;line-height:1.5}
.d-ds{color:#a59d90;font-size:13px;line-height:1.9}
.d-row{display:flex;align-items:center;justify-content:space-between;margin-top:24px}
.d-pr{font-family:"Cormorant Garamond",serif;font-size:30px;color:#c8a97e}
.step{display:flex;align-items:center;gap:4px;border:1px solid rgba(239,233,225,.2);border-radius:30px;padding:4px}
.step button{width:36px;height:36px;border-radius:50%;font-size:20px;font-family:"Noto Sans JP";display:flex;align-items:center;justify-content:center}
.step button:active{background:rgba(239,233,225,.1)}
.step span{min-width:26px;text-align:center;font-family:"Noto Sans JP";font-weight:500}
.btn-gold{display:block;width:100%;background:#c8a97e;color:#14120f;font-family:"Noto Sans JP";font-weight:700;font-size:15px;letter-spacing:.06em;padding:17px;border-radius:40px;margin-top:22px}
.btn-gold:disabled{opacity:.4}
.k-head{padding:20px 24px 6px;display:flex;justify-content:space-between;align-items:baseline}
.k-head h3{font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;font-size:30px}
.k-head small{color:#8d8577;font-size:12px;letter-spacing:.2em}
.k-list{padding:0 24px}
.k-line{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(239,233,225,.08)}
.k-line img{width:58px;height:58px;object-fit:cover;border-radius:2px}
.k-line .t{flex:1;min-width:0}
.k-line .t div{font-size:14px;line-height:1.5}
.k-line .t span{font-family:"Cormorant Garamond",serif;color:#c8a97e;font-size:17px}
.k-line .step{transform:scale(.88);transform-origin:right}
.k-sum{padding:18px 24px 26px}
.k-sum .r{display:flex;justify-content:space-between;align-items:baseline}
.k-sum .r b{font-family:"Cormorant Garamond",serif;font-size:32px;font-weight:600}
.k-note{color:#8d8577;font-size:12px;line-height:1.9;margin-top:14px;border-top:1px solid rgba(239,233,225,.08);padding-top:14px}
.done{position:fixed;inset:0;z-index:80;background:#14120f;color:#efe9e1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;opacity:0;pointer-events:none;transition:opacity .5s}
.done.on{opacity:1;pointer-events:auto}
.done svg{width:84px;height:84px}
.done circle{stroke:#c8a97e;stroke-width:1.5;fill:none;stroke-dasharray:240;stroke-dashoffset:240}
.done path{stroke:#c8a97e;stroke-width:2;fill:none;stroke-dasharray:60;stroke-dashoffset:60}
.done.on circle{animation:draw 1s .2s ease forwards}.done.on path{animation:draw .6s .9s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done .t1{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:34px;margin-top:26px}
.done .no{font-family:"Cormorant Garamond",serif;font-size:64px;color:#c8a97e;letter-spacing:.06em;line-height:1.1;margin:6px 0 4px}
.done .lb{font-size:11px;letter-spacing:.3em;color:#8d8577}
.done .msg{font-size:14px;line-height:2;color:#cfc7ba;margin-top:22px}
.done .again{margin-top:34px;border:1px solid rgba(239,233,225,.3);padding:13px 30px;border-radius:30px;font-size:14px;font-family:"Noto Sans JP"}
.c-hist{margin:30px 24px 0;border:1px solid rgba(239,233,225,.1);padding:16px 18px}
.c-hist h4{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:20px;margin-bottom:8px}
.c-hist .h{display:flex;justify-content:space-between;font-size:13px;color:#cfc7ba;padding:6px 0;font-family:"Noto Sans JP"}
.c-hist .h em{font-style:normal;font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(200,169,126,.15);color:#c8a97e;margin-left:6px}

/* ===== staff / admin common ===== */
.app{min-height:100%;font-family:"Noto Sans JP",sans-serif}
.topbar{position:sticky;top:0;z-index:30;background:#1d1b18;color:#fff;display:flex;align-items:center;gap:14px;padding:12px 18px}
.topbar h1{font-size:17px;font-weight:700;letter-spacing:.04em}
.topbar .role{font-size:11px;background:#c8a97e;color:#1d1b18;padding:3px 8px;font-weight:700}
.topbar .sp{flex:1}
.topbar .bell{position:relative;font-size:13px;opacity:.85}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background:#d64545;color:#fff;font-size:11px;font-weight:700;padding:0 6px;margin-left:6px}
.ocards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;padding:16px 18px 40px}
.ocard{background:#fff;border:1px solid #e3ded6;display:flex;flex-direction:column;transition:opacity .6s,transform .6s;animation:pop .4s ease}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}}
.ocard.leaving{opacity:0;transform:scale(.96)}
.ocard.wait{border-color:#e0a63a;box-shadow:0 0 0 2px rgba(224,166,58,.35)}
.oc-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #eee9e1}
.oc-tb{font-size:22px;font-weight:700;background:#1d1b18;color:#fff;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1}
.oc-tb small{font-size:9px;font-weight:500;letter-spacing:.1em;margin-bottom:2px;opacity:.7}
.oc-meta{flex:1;font-size:12px;color:#6b655c;line-height:1.5}
.oc-meta b{color:#1d1b18;font-size:14px}
.tag{font-size:11px;font-weight:700;padding:4px 9px;white-space:nowrap}
.tag.unpaid{background:#fdecec;color:#c23b3b}
.tag.ok{background:#e6f4ea;color:#1f7a3a}
.tag.wait{background:#fff3dc;color:#a46a00}
.oc-items{padding:10px 14px;flex:1}
.oc-items div{display:flex;justify-content:space-between;font-size:14px;padding:4px 0}
.oc-items div span:first-child b{display:inline-block;min-width:26px;color:#c23b3b}
.oc-tot{display:flex;justify-content:space-between;align-items:baseline;padding:8px 14px;border-top:1px dashed #e3ded6;font-size:13px}
.oc-tot b{font-size:20px}
.oc-act{padding:10px 14px 14px;display:flex;gap:8px}
.oc-act button{flex:1;padding:13px 8px;font-weight:700;font-size:14px}
.b-main{background:#1d1b18;color:#fff}
.b-ok{background:#1f7a3a;color:#fff}
.b-sub{background:#f1eee8;color:#1d1b18}
.b-main:disabled,.b-ok:disabled{background:#cfcac2;color:#fff}
.oc-info{font-size:12px;color:#a46a00;padding:0 14px 12px}
.empty{padding:60px 20px;text-align:center;color:#9a9388;font-size:14px;grid-column:1/-1}
/* staff paypay */
.pp{margin:16px 18px 0;background:#fff;border:1px solid #e3ded6;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;padding:12px 14px}
.pp .slot{width:72px;height:72px;border:2px dashed #cfc7ba;display:flex;align-items:center;justify-content:center;font-size:10px;color:#9a9388;text-align:center;overflow:hidden;flex-shrink:0;background:#faf8f5}
.pp .slot img{width:100%;height:100%;object-fit:contain;background:#fff}
.pp .tx{flex:1;min-width:150px;font-size:13px;line-height:1.6}
.pp .tx b{font-size:14px}
.pp .bs{display:flex;gap:6px;flex-wrap:wrap;flex-basis:100%;justify-content:flex-end}
.pp .bs label,.pp .bs button{font-size:12px;padding:9px 12px;background:#f1eee8;cursor:pointer;font-weight:700}
.pp .bs .show{background:#d6002f;color:#fff}
.ppfull{position:fixed;inset:0;z-index:90;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.ppfull img{max-width:92vw;max-height:70vh;object-fit:contain}
.ppfull .amt{font-size:16px;margin-bottom:14px;color:#444}
.ppfull .amt b{font-size:40px;color:#1d1b18;display:block;text-align:center}
.ppfull button{margin-top:20px;padding:14px 40px;background:#1d1b18;color:#fff;font-weight:700}
/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:#fff;width:100%;max-width:400px;padding:22px}
.modal h3{font-size:17px;margin-bottom:4px}
.modal p{font-size:13px;color:#6b655c;margin-bottom:16px;line-height:1.7}
.modal .amt{font-size:32px;font-weight:700;margin:6px 0 16px}
.paym{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.paym button{border:2px solid #e3ded6;padding:16px 0;font-weight:700;font-size:15px}
.paym button.on{border-color:#1d1b18;background:#1d1b18;color:#fff}
.paym button.on.pay{border-color:#d6002f;background:#d6002f}
.modal .ppmini{text-align:center;margin-bottom:14px}
.modal .ppmini img{max-width:200px;max-height:200px}
.modal .acts{display:flex;gap:8px}
.modal .acts button{flex:1;padding:14px;font-weight:700}
/* toast */
#toasts{position:fixed;top:14px;right:14px;z-index:100;display:flex;flex-direction:column;gap:8px;max-width:340px}
.toast{background:#1d1b18;color:#fff;padding:13px 16px;font-size:13px;line-height:1.6;box-shadow:0 8px 30px rgba(0,0,0,.25);border-left:4px solid #c8a97e;animation:tin .35s ease}
.toast.warn{border-left-color:#e0a63a}
@keyframes tin{from{opacity:0;transform:translateX(20px)}}
/* admin */
.tabs{display:flex;gap:0;background:#fff;border-bottom:1px solid #e3ded6;padding:0 10px;overflow-x:auto;position:sticky;top:56px;z-index:25}
.tabs button{padding:14px 16px;font-size:14px;color:#6b655c;border-bottom:3px solid transparent;white-space:nowrap;font-weight:500}
.tabs button.on{color:#1d1b18;border-bottom-color:#1d1b18;font-weight:700}
.pane{padding:18px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid #e3ded6;padding:14px}
.kpi small{font-size:11px;color:#6b655c;display:block}
.kpi b{font-size:22px}
@media(max-width:640px){.kpis{grid-template-columns:1fr 1fr}}
table.rec{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
table.rec th,table.rec td{border-bottom:1px solid #eee9e1;padding:10px 8px;text-align:left;vertical-align:top}
table.rec th{background:#f7f5f1;font-size:12px;color:#6b655c;font-weight:500}
table.rec td.n{text-align:right;white-space:nowrap}
.mtool{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.mtool button{padding:10px 14px;font-weight:700;font-size:13px}
.mlist{display:flex;flex-direction:column;gap:10px}
.mrow{background:#fff;border:1px solid #e3ded6;display:grid;grid-template-columns:92px 1fr;gap:14px;padding:12px}
.mrow .th{width:92px;height:92px;position:relative;cursor:pointer;background:#f1eee8}
.mrow .th img{width:100%;height:100%;object-fit:cover}
.mrow .th span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:10px;text-align:center;padding:3px 0}
.mrow .fs{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
.mrow .fs .w{grid-column:1/-1}
.mrow label{font-size:11px;color:#6b655c;display:flex;flex-direction:column;gap:3px}
.mrow input,.mrow select,.mrow textarea{border:1px solid #d8d2c8;padding:8px;font-size:14px;background:#fff;width:100%}
.mrow textarea{resize:vertical;min-height:38px}
.mrow .ops{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-size:12px}
.mrow .ops button{padding:6px 10px;background:#f1eee8;font-size:12px}
.mrow .ops .del{color:#c23b3b;margin-left:auto}
@media(max-width:640px){.mrow .fs{grid-template-columns:1fr 1fr}.mrow .fs label:first-child{grid-column:1/-1}}
.qrs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qrc{background:#fff;border:1px solid #e3ded6;padding:18px;text-align:center}
.qrc .q{width:160px;height:160px;margin:10px auto}
.qrc .q img,.qrc .q svg{width:100%;height:100%}
.qrc b{font-size:20px;display:block}
.qrc small{font-size:11px;color:#6b655c;word-break:break-all}
@media(max-width:640px){.qrs{grid-template-columns:1fr 1fr}}
@media print{.topbar,.tabs,.mtool,#toasts{display:none!important}.qrs{grid-template-columns:repeat(3,1fr)}.qrc{break-inside:avoid}}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;font-size:12px;color:#6b655c;max-width:420px}
.field input{border:1px solid #d8d2c8;padding:10px;font-size:15px;color:#1d1b18}
.note{font-size:12px;color:#6b655c;line-height:1.8;background:#fff;border:1px solid #e3ded6;padding:12px 14px;margin-bottom:14px}
.backlink{font-size:12px;color:#fff;opacity:.6;text-decoration:none}
/* ===== PWA additions ===== */
body.r-customer{background:#14120f}
body.r-staff,body.r-admin,body.r-home{background:#f4f2ee}
.topbar{padding-top:calc(12px + env(safe-area-inset-top))}
.tabs{top:calc(56px + env(safe-area-inset-top))}
.tb-btn{font-size:12px;padding:7px 10px;border:1px solid rgba(255,255,255,.28);color:#fff;white-space:nowrap}
.tb-btn.on{background:#c8a97e;border-color:#c8a97e;color:#1d1b18;font-weight:700}
.chip-off{font-size:11px;background:#d64545;color:#fff;padding:3px 8px;font-weight:700}
.modebar{background:#fff3dc;color:#7a5200;font-size:12px;line-height:1.7;padding:9px 18px;border-bottom:1px solid #f0dfb8}
.installbar{margin:12px 18px 0;background:#fff;border:1px solid #e3ded6;padding:12px 14px;font-size:13px;line-height:1.7;display:flex;gap:12px;align-items:center}
.installbar .tx{flex:1}
.installbar button{padding:9px 12px;font-weight:700;font-size:12px}
.login{max-width:380px;margin:0 auto;padding:70px 22px}
.login .lg-role{display:inline-block;font-size:12px;background:#1d1b18;color:#c8a97e;padding:4px 10px;font-weight:700;margin-bottom:14px}
.login h1{font-size:22px;margin-bottom:6px}
.login p{font-size:13px;color:#6b655c;line-height:1.8;margin-bottom:22px}
.login input{width:100%;border:1px solid #d8d2c8;padding:13px;font-size:16px;margin-bottom:10px;background:#fff}
.login button{width:100%;padding:15px;background:#1d1b18;color:#fff;font-weight:700;font-size:15px;margin-top:6px}
.login .err{color:#c23b3b;font-size:13px;margin-top:10px;min-height:20px}
.oc-warn{font-size:12px;color:#c23b3b;background:#fdecec;margin:0 14px 10px;padding:7px 10px;line-height:1.6}
.c-load{min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond",serif;font-style:italic;color:#8d8577;font-size:22px;letter-spacing:.1em}
.c-hist .h em.ok{background:rgba(120,190,140,.15);color:#9fd3ae}
.c-hist .h em.x{background:rgba(239,233,225,.08);color:#8d8577}
.fatal{max-width:460px;margin:80px auto;padding:22px;background:#fff;border:1px solid #e3ded6;font-size:14px;line-height:1.8}
.sect{font-size:14px;font-weight:700;margin:22px 0 10px}