:root { color-scheme: light; --ink:#192a42; --muted:#65758b; --line:#dde5ee; --blue:#1767c7; --teal:#19a9a3; --pale:#f3f8fd; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--pale); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif; line-height:1.6; }
a { color:var(--blue); overflow-wrap:anywhere; }
.wrap { width:min(1120px,calc(100% - 32px)); margin:auto; }
.top { background:#fff; border-bottom:1px solid var(--line); }
.top-inner { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { color:var(--ink); font-weight:850; font-size:1.1rem; letter-spacing:-.02em; text-decoration:none; }
.brand::before { content:"◈"; color:var(--teal); margin-right:.5em; }
nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 16px; }
nav a { text-decoration:none; font-size:.88rem; font-weight:700; white-space:nowrap; }
main { padding:28px 0 64px; min-height:calc(100vh - 130px); }
h1 { font-size:clamp(1.4rem,3vw,2rem); line-height:1.35; margin:0 0 20px; }
h2 { font-size:1.2rem; line-height:1.35; margin:0 0 16px; }
h3 { margin:0 0 12px; }
h4 { margin:0 0 3px; font-size:1.05rem; }
p { margin:8px 0; }
.hero { background:linear-gradient(110deg,#17335d,#1767c7 62%,#0c9695); color:#fff; border-radius:22px; padding:34px clamp(20px,5vw,50px); margin-bottom:20px; }
.hero h2 { font-size:clamp(1.7rem,4vw,2.6rem); margin:8px 0 6px; }
.eyebrow { letter-spacing:.13em; font-size:.72rem; font-weight:800; }
.panel { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 8px 24px #17335d08; margin-bottom:18px; }
.narrow { max-width:490px; }
.notice { background:#e9f6f6; border-left:4px solid var(--teal); padding:12px 16px; border-radius:8px; }
.error { color:#ac1d30; background:#fff0f1; padding:12px; border-radius:8px; }
.muted { color:var(--muted); font-size:.86rem; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
.category { margin:26px 0 10px; padding-left:12px; border-left:4px solid var(--teal); }
.menu-item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; border:1px solid var(--line); border-radius:14px; margin-bottom:10px; background:#fff; }
.menu-item p { color:var(--muted); font-size:.85rem; margin:4px 0; }
.menu-item strong { color:var(--blue); }
.menu-item small { font-size:.69rem; color:var(--muted); font-weight:500; }
.quantity { display:grid; gap:4px; flex:none; text-align:center; font-size:.76rem; font-weight:700; }
.quantity input { width:72px; text-align:center; }
.checkout { position:sticky; top:14px; }
label { display:block; font-size:.88rem; font-weight:700; margin-bottom:14px; }
input:not([type="checkbox"]):not([type="hidden"]),textarea,select { display:block; width:100%; border:1px solid #c8d5e3; border-radius:9px; padding:10px 12px; margin-top:6px; background:#fff; color:var(--ink); font:inherit; min-height:42px; }
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible { outline:3px solid #78bdf3; outline-offset:2px; }
textarea { resize:vertical; }
.required { color:#b42a36; font-size:.76rem; }
button { border:1px solid #afc4d9; border-radius:9px; padding:9px 15px; background:#fff; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
button:hover { background:#ecf5ff; }
button:disabled { cursor:not-allowed; opacity:.5; }
button.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
button.primary:hover { background:#0e509e; }
button.secondary { border-color:#e6b7bb; color:#a83542; }
button.full { width:100%; padding:14px; }
.total { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 0; margin:18px 0 0; border-top:1px solid var(--line); font-weight:800; }
.total strong { font-size:1.35rem; }
.sr-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.receipt { max-width:620px; }
.order-number { font-size:2.5rem; font-weight:850; margin:6px 0 14px; }
.receipt-line { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:12px 0; }
.badge { display:inline-flex; border-radius:100px; padding:5px 11px; font-size:.78rem; font-weight:800; background:#eef2f7; }
.badge-new { background:#fff0d7; color:#8f5600; }
.badge-accepted { background:#e6f1ff; color:#1354a3; }
.badge-preparing { background:#f1e9ff; color:#6b35a3; }
.badge-ready { background:#dcf6ed; color:#08704c; }
.badge-completed { background:#e8f1ef; color:#3c6c61; }
.badge-cancelled { background:#f4e9eb; color:#9a4252; }
.store-tag { display:inline-block; padding:6px 12px; border-radius:100px; background:#dff1f4; color:#0f626e; font-weight:800; font-size:.86rem; margin:0 0 15px; }
.order-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); gap:16px; }
.order-card { margin:0; }
.order-head,.inline,.actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.order-head { justify-content:space-between; }
.order-head strong { font-size:1.45rem; }
.order-line { border-bottom:1px dashed var(--line); padding:4px 0; }
.order-price { font-size:1.25rem; font-weight:800; margin:14px 0; }
.actions form { margin:0; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.inline input:not([type="checkbox"]):not([type="hidden"]) { flex:1; min-width:145px; width:auto; margin:0; }
.inline select { width:auto; min-width:180px; margin:0; }
.inline label { margin:0; }
.check { display:flex; align-items:center; gap:8px; }
.check input { width:18px; height:18px; margin:0; }
.form-grid { display:grid; gap:14px; }
.manager-row { display:grid; gap:8px; padding:10px 0; border-top:1px solid var(--line); }
.item-form { display:grid; grid-template-columns:2fr 1fr 1fr 2fr auto; gap:10px; align-items:end; }
.item-form label { margin:0; }
.item-form button { margin-bottom:0; }
.item-edit { padding:12px 0; border-top:1px solid var(--line); }
.qr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
.qr-card { margin:0; }
.qr { width:220px; max-width:100%; margin:auto; }
.qr svg { display:block; width:100%; image-rendering:pixelated; }
.qr-url { display:block; font-size:.72rem; margin:12px 0; }
.footer { color:var(--muted); padding:16px 0 24px; border-top:1px solid var(--line); font-size:.8rem; }
@media(max-width:900px) { .layout,.two-col { grid-template-columns:1fr; }.checkout { position:static; }.item-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.item-form button { width:100%; } }
@media(max-width:600px) { .top-inner { display:block; padding:14px 0; }.top nav { justify-content:flex-start; margin-top:9px; }.panel { padding:17px; }.item-form { grid-template-columns:1fr; }.order-grid,.qr-grid { grid-template-columns:1fr; }.menu-item { align-items:end; } }
@media print { body { background:white; } .top,.no-print,main>h1,.store-tag,.footer,.qr-card form,.qr-card.is-inactive { display:none!important; } main { padding:0; width:100%; }.qr-grid { grid-template-columns:repeat(2,1fr); gap:15mm; }.qr-card { break-inside:avoid; box-shadow:none; border:1px solid #999; }.qr { width:45mm; } .qr-url { color:#000; } }