/* ═══════════════════════════════════════════════════════════════════════════
   KANPAI · base.css（静态原型 v0.1 · 2026-10-15 · 三立国際）
   ───────────────────────────────────────────────────────────────────────────
   reset ＋ 排版 ＋ 全部组件。类名前缀 k-。只引用 tokens.css 的语义 token：
   本文件没有任何裸色值（只出现 transparent / currentColor 两个关键字）。

   引入顺序（每个画面都一样）：
     <link rel="stylesheet" href="../shared/tokens.css">
     <link rel="stylesheet" href="../shared/base.css">

   状态约定（静态原型）：
     · 能跳转的控件用 <a href>；不跳转的控件用 <span>/<div> 套同样的类——
       不要用 <button> 做「看起来能点、点了没反应」的东西。
     · 选中/当前：.is-current 或 aria-current（导航）、.is-selected（选项）。
     · 禁用：.is-disabled 或 aria-disabled="true"。
     · hover / focus-visible / active 只对 a、button、input 生效（真实可交互元素）。
     · loading / error / success：原型不做动效；需要演示时用文字和状态胶囊表达
       （例如 k-chip--check「状态不明」、k-btn.is-done「已保存」）。
   导航的「当前位置」= 月金线；选项的「已选」= 靛蓝（--k-accent）。两者不混用。
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0 · reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;min-height:100dvh;overflow-x:clip;
  background:var(--k-bg);color:var(--k-text);
  font-family:var(--k-font-body);font-size:var(--k-fs-body);font-weight:400;
  line-height:var(--k-lh-body);letter-spacing:var(--k-tracking-body);
  font-synthesis:none;font-feature-settings:normal;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
:where([data-theme]:not(html)){background:var(--k-bg)}   /* 页内嵌套主题块（preview、入口卡片、小票预览）；:where 让组件自己的底色优先 */
[data-theme]:not(html){color:var(--k-text)}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
table{border-collapse:collapse;border-spacing:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer}
em,i{font-style:normal;font-weight:700}            /* 禁斜体：CJK 没有真斜体，强调用字重 */
strong,b{font-weight:700}
s,del{text-decoration:line-through;text-decoration-thickness:var(--k-rule)}
hr{border:0;border-top:var(--k-rule) solid var(--k-line);margin:0}
:focus-visible{outline:var(--k-focus-width) solid var(--k-focus);outline-offset:var(--k-focus-offset);border-radius:var(--k-r-block)}
::selection{background:var(--k-accent-bg);color:var(--k-accent-on)}


/* ── 1 · 排版 ──────────────────────────────────────────────────────────────
   标题永远正体（font-style:normal），强调只用字重或金色。
   h1/h2 = 明朝（中文 Noto Serif SC）；h3 以下 = 黑体粗体。
   日文内容加 lang="ja"：正文换日本字形黑体＋palt；h1/h2 里换 Shippori Mincho。 */
h1,h2,h3,h4,h5,h6{margin:0;font-style:normal;color:var(--k-text);text-wrap:balance;letter-spacing:var(--k-tracking-head)}
h1,h2,.k-display,.k-h1,.k-h2{font-family:var(--k-font-display);line-height:var(--k-lh-head)}
h1,.k-h1{font-size:var(--k-fs-h1);font-weight:700}
h2,.k-h2{font-size:var(--k-fs-h2);font-weight:600}
h3,.k-h3{font-family:var(--k-font-body);font-size:var(--k-fs-h3);font-weight:700;line-height:var(--k-lh-head)}
h4,h5,h6{font-family:var(--k-font-body);font-size:var(--k-fs-title);font-weight:700;line-height:var(--k-lh-head)}
.k-display{font-size:var(--k-fs-display);font-weight:700;line-height:var(--k-lh-tight)}

[lang|="ja"]{font-family:var(--k-font-body-ja);font-feature-settings:"palt" 1;line-break:strict}
:is(h1,h2,.k-display,.k-h1,.k-h2)[lang|="ja"],
:is(h1,h2,.k-display,.k-h1,.k-h2) [lang|="ja"]{font-family:var(--k-font-display-ja)}

.k-wordmark{font-family:var(--k-font-display-ja);font-weight:700;letter-spacing:.16em}   /* 「KANPAI」字标 */
.k-eyebrow{                       /* 眉题：Barlow 大写＋金字；永远在标题「上方」同列，不做左右并排 */
  font-family:var(--k-font-num);font-size:var(--k-fs-eyebrow);font-weight:600;
  letter-spacing:var(--k-tracking-caps);text-transform:uppercase;line-height:1.2;color:var(--k-gold-text);
}
.k-eyebrow--ink{color:var(--k-text-2)}
.k-lede{font-size:var(--k-fs-body);color:var(--k-text-2);max-width:40em}
.k-link{color:var(--k-accent);text-decoration:underline;text-decoration-thickness:var(--k-rule);text-underline-offset:3px}
.k-link:hover{text-decoration-color:var(--k-gold)}

/* 数字与金额 ——————————————————————————————————————————————
   所有数字用 .k-num（Barlow Condensed＋等宽数字）。金额写法：
     <span class="k-money"><span class="k-yen">¥</span>4,600</span>
   日元整数、千分位逗号、无小数；负数用全角减号「−」（U+2212），如 −1,000。 */
.k-num,.k-money{font-family:var(--k-font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:var(--k-tracking-num)}
.k-money{font-weight:600;white-space:nowrap}
.k-yen{font-size:.62em;font-weight:500;margin-right:.08em;vertical-align:.08em}
.k-num--xl{font-size:var(--k-fs-num-xl);font-weight:600;line-height:1.05}
.k-num--lg{font-size:var(--k-fs-num-lg);font-weight:600;line-height:1.05}
.k-num--md{font-size:var(--k-fs-num-md);font-weight:600;line-height:1.1}
.k-num--sm{font-size:var(--k-fs-num-sm);font-weight:500}


/* ── 3 · 图标 ──────────────────────────────────────────────────────────────
   <span class="k-icon k-icon--mic" aria-hidden="true"></span>
   颜色跟随文字色（currentColor）；尺寸 .k-icon--sm 16 / 默认 20 / .k-icon--lg 24。
   可用：seats order bottle users me mic lock unlock back next search check close plus minus
         cash card qr emoney alert clock note printer box chart star switch gift tag shield
         list archive dashboard moon arrow refund */
.k-icon{
  display:inline-block;flex:none;width:var(--k-icon-size,20px);height:var(--k-icon-size,20px);
  background-color:currentColor;vertical-align:-.22em;
  -webkit-mask:var(--k-i) center/contain no-repeat;mask:var(--k-i) center/contain no-repeat;
}
.k-icon--sm{--k-icon-size:16px}
.k-icon--lg{--k-icon-size:24px}
.k-icon--seats{--k-i:var(--k-icon-seats)} .k-icon--order{--k-i:var(--k-icon-order)} .k-icon--bottle{--k-i:var(--k-icon-bottle)}
.k-icon--users{--k-i:var(--k-icon-users)} .k-icon--me{--k-i:var(--k-icon-me)} .k-icon--mic{--k-i:var(--k-icon-mic)}
.k-icon--lock{--k-i:var(--k-icon-lock)} .k-icon--unlock{--k-i:var(--k-icon-unlock)} .k-icon--back{--k-i:var(--k-icon-back)}
.k-icon--next{--k-i:var(--k-icon-next)} .k-icon--search{--k-i:var(--k-icon-search)} .k-icon--check{--k-i:var(--k-icon-check)}
.k-icon--close{--k-i:var(--k-icon-close)} .k-icon--plus{--k-i:var(--k-icon-plus)} .k-icon--minus{--k-i:var(--k-icon-minus)}
.k-icon--cash{--k-i:var(--k-icon-cash)} .k-icon--card{--k-i:var(--k-icon-card)} .k-icon--qr{--k-i:var(--k-icon-qr)}
.k-icon--emoney{--k-i:var(--k-icon-emoney)} .k-icon--alert{--k-i:var(--k-icon-alert)} .k-icon--clock{--k-i:var(--k-icon-clock)}
.k-icon--note{--k-i:var(--k-icon-note)} .k-icon--printer{--k-i:var(--k-icon-printer)} .k-icon--box{--k-i:var(--k-icon-box)}
.k-icon--chart{--k-i:var(--k-icon-chart)} .k-icon--star{--k-i:var(--k-icon-star)} .k-icon--switch{--k-i:var(--k-icon-switch)}
.k-icon--gift{--k-i:var(--k-icon-gift)} .k-icon--tag{--k-i:var(--k-icon-tag)} .k-icon--shield{--k-i:var(--k-icon-shield)}
.k-icon--list{--k-i:var(--k-icon-list)} .k-icon--archive{--k-i:var(--k-icon-archive)} .k-icon--dashboard{--k-i:var(--k-icon-dashboard)}
.k-icon--moon{--k-i:var(--k-icon-moon)} .k-icon--arrow{--k-i:var(--k-icon-arrow)} .k-icon--refund{--k-i:var(--k-icon-refund)}


/* ═══════════════════════════════════════════════════════════════════════════
   4 · 原型外壳：衬底 k-stage ／ 原型条 k-proto ／ 设备取景框 k-device ／ 原型注记 k-note
   这些是「原型的说明层」，不是 App 的一部分。取景框只是一块限制尺寸的画布：
   不画刘海、不画假状态栏、不画 Home 条。
   ───────────────────────────────────────────────────────────────────────────
   手机页骨架：
   <body class="k-stage k-stage--phone">
     <header class="k-proto">…返回一览／标题／上一页・下一页…</header>
     <div class="k-device k-device--phone"><div class="k-app">…</div></div>
     <footer class="k-stage__notes"><p class="k-note">…</p></footer>
   </body>
   iPad 页把 phone 换成 ipad、k-app 换成 k-split。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-stage{
  min-height:100dvh;background:var(--k-stage);
  display:flex;flex-direction:column;align-items:center;gap:var(--k-space-4);
  padding:var(--k-space-6) var(--k-space-4) var(--k-space-8);
}
.k-stage--phone{--k-proto-w:var(--k-device-phone-w)}
.k-stage--ipad{--k-proto-w:var(--k-device-ipad-w)}
.k-stage__notes{width:min(100%,var(--k-proto-w,100%));display:flex;flex-direction:column;gap:var(--k-space-2)}

.k-device{
  position:relative;flex:none;width:var(--k-device-w);height:var(--k-device-h);
  background:var(--k-bg);color:var(--k-text);overflow:hidden;
  border:var(--k-rule) solid var(--k-line-strong);border-radius:var(--k-r-sheet);
  box-shadow:var(--k-shadow-2);
}
.k-device--phone{--k-device-w:var(--k-device-phone-w);--k-device-h:var(--k-device-phone-h)}
.k-device--ipad{--k-device-w:var(--k-device-ipad-w);--k-device-h:var(--k-device-ipad-h)}
/* 真机打开：取消取景框，全屏显示；原型条移到画面下方 */
@media (max-width:480px){
  .k-stage--phone{padding:0;gap:0}
  .k-stage--phone .k-device--phone{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none}
  .k-stage--phone .k-proto,.k-stage--phone .k-stage__notes{order:2;padding:var(--k-space-3) var(--k-space-4)}
}
@media (max-width:1219px){
  .k-stage--ipad{padding:0;gap:0}
  .k-stage--ipad .k-device--ipad{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none}
  .k-stage--ipad .k-proto,.k-stage--ipad .k-stage__notes{order:2;padding:var(--k-space-3) var(--k-space-4)}
}

/* 原型条：返回本端画面一览＋页码。电脑页用 .k-proto--bar（通栏，放在 k-page 之前） */
.k-proto{
  width:min(100%,var(--k-proto-w,100%));
  display:flex;align-items:center;justify-content:space-between;gap:var(--k-space-3);flex-wrap:wrap;
  font-size:var(--k-fs-caption);line-height:1.4;color:var(--k-text-2);
}
.k-proto a{color:var(--k-text);text-decoration:underline;text-decoration-color:var(--k-gold);text-decoration-thickness:var(--k-rule);text-underline-offset:3px}
.k-proto a:hover{text-decoration-color:var(--k-text)}
.k-proto__title{font-family:var(--k-font-num);font-size:var(--k-fs-eyebrow);font-weight:600;letter-spacing:.12em;color:var(--k-text-2)}
.k-proto__pager{display:flex;gap:var(--k-space-3)}
.k-proto__pager .is-disabled{color:var(--k-text-2);text-decoration:none}
.k-proto--bar{width:100%;padding:var(--k-space-2) var(--k-gutter);background:var(--k-surface-2);border-bottom:var(--k-rule) solid var(--k-line)}

/* 原型注记：每页底部必须有一条，写对应的 SOP 编号。灰色小字＋虚线框＝「这不是 App 的内容」
   <p class="k-note"><span class="k-note__label">原型注记</span><span class="k-note__sop">SOP 四 步骤 9–16；情况 5、6</span>说明文字…</p> */
.k-note{
  font-size:var(--k-fs-caption);line-height:var(--k-lh-small);color:var(--k-text-2);
  padding:var(--k-space-3) var(--k-space-4);
  border:var(--k-rule) dashed var(--k-line-strong);border-radius:var(--k-r-record);
}
.k-note__label{font-weight:700;margin-right:var(--k-space-2)}
.k-note__sop{color:var(--k-gold-text);font-weight:500;margin-right:var(--k-space-2)}


/* ═══════════════════════════════════════════════════════════════════════════
   5 · 手机布局 k-app ／ 状态行 k-statusline ／ 顶栏 k-topbar ／ 操作栏 k-actionbar ／ 底部导航 k-bottomnav
   <div class="k-app">
     <p class="k-statusline"><span>22:40</span><span>营业日 10/14（水）</span><span>李 明</span></p>
     <header class="k-topbar">
       <a class="k-topbar__back" href="01-seats.html" aria-label="返回座位"><span class="k-icon k-icon--back"></span></a>
       <div class="k-topbar__titles"><h1 class="k-topbar__title">C3 · 田中 健</h1><p class="k-topbar__sub">20:12 开单 · 1 人</p></div>
       <div class="k-topbar__actions">…</div>
     </header>
     <main class="k-app__main">…</main>
     <div class="k-actionbar">…</div>            （可选：保存/结账等主操作）
     <nav class="k-bottomnav">…5 个入口…</nav>
   </div>
   状态行是「页面内容」：一行时间・营业日・当前员工，不是设备装饰。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-app{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--k-bg);color:var(--k-text)}
.k-app__main{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:var(--k-space-4);
  padding:var(--k-space-4) var(--k-gutter) var(--k-space-6);
}
.k-statusline{
  flex:none;display:flex;justify-content:space-between;gap:var(--k-space-3);
  padding:var(--k-space-2) var(--k-gutter);
  font-family:var(--k-font-num);font-size:var(--k-fs-caption);font-weight:500;letter-spacing:.06em;
  color:var(--k-text-2);border-bottom:var(--k-rule) solid var(--k-line);
}
.k-topbar{
  flex:none;display:flex;align-items:center;gap:var(--k-space-3);
  min-height:60px;padding:var(--k-space-2) var(--k-gutter);
  border-bottom:var(--k-rule) solid var(--k-line);background:var(--k-bg);
}
.k-topbar__back{
  flex:none;display:grid;place-items:center;width:40px;height:40px;margin-left:calc(-1 * var(--k-space-2));
  border-radius:var(--k-r-pill);color:var(--k-text);
  transition:background-color var(--k-dur-1) var(--k-ease-out);
}
.k-topbar__back:hover{background:var(--k-surface-2)}
.k-topbar__titles{flex:1;min-width:0;display:flex;flex-direction:column}
.k-topbar__title{font-size:var(--k-fs-h2);font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-topbar__sub{font-size:var(--k-fs-caption);color:var(--k-text-2);line-height:1.4}
.k-topbar__actions{flex:none;display:flex;align-items:center;gap:var(--k-space-2)}
/* iPad / 电脑顶栏里的分区导航：当前 = 金色下划线 */
.k-topbar__nav{display:flex;gap:var(--k-space-1);margin-left:var(--k-space-4)}
.k-topbar__nav a,.k-topbar__nav span{
  display:inline-flex;align-items:center;gap:var(--k-space-2);height:40px;padding:0 var(--k-space-3);
  font-size:var(--k-fs-small);color:var(--k-text-2);border-bottom:2px solid transparent;
}
.k-topbar__nav a:hover{color:var(--k-text)}
.k-topbar__nav .is-current,.k-topbar__nav [aria-current]{color:var(--k-text);border-bottom-color:var(--k-gold)}

.k-actionbar{
  flex:none;display:flex;align-items:center;gap:var(--k-space-3);
  padding:var(--k-space-3) var(--k-gutter);
  background:var(--k-surface);border-top:var(--k-rule) solid var(--k-line);box-shadow:var(--k-shadow-inset);
}
.k-actionbar__sum{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.k-actionbar__sum small{font-size:var(--k-fs-caption);color:var(--k-text-2)}

/* 底部导航：座位／加单／存酒／客户／我。当前项：字变亮＋图标金色＋顶部 2px 金线 */
.k-bottomnav{
  flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--k-bg);border-top:var(--k-rule) solid var(--k-line);
}
.k-bottomnav__item{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:58px;padding:var(--k-space-2) 0 var(--k-space-3);
  font-size:var(--k-fs-caption);line-height:1.2;color:var(--k-text-2);
  transition:color var(--k-dur-1) var(--k-ease-out);
}
.k-bottomnav__item .k-icon{--k-icon-size:22px}
.k-bottomnav__item:hover{color:var(--k-text)}
.k-bottomnav__item.is-current,.k-bottomnav__item[aria-current]{color:var(--k-text);font-weight:500}
.k-bottomnav__item.is-current .k-icon,.k-bottomnav__item[aria-current] .k-icon{color:var(--k-gold-text)}
.k-bottomnav__item.is-current::before,.k-bottomnav__item[aria-current]::before{
  content:"";position:absolute;top:-1px;left:50%;width:28px;height:2px;transform:translateX(-50%);background:var(--k-gold);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · iPad 分栏 k-split
   <div class="k-split">
     <p class="k-statusline">…</p>
     <header class="k-topbar">…<nav class="k-topbar__nav">…</nav>…</header>
     <main class="k-split__main">左：座位全景 / 商品 / 清单</main>
     <aside class="k-split__side">右：当前账单（k-guest-tabs ＋ k-lines ＋ k-amounts）</aside>
   </div>
   右栏默认 420px；.k-split--wide-side 改 480px；.k-split--even 左右等宽。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-split{
  display:grid;height:100%;min-height:0;background:var(--k-bg);color:var(--k-text);
  grid-template-columns:minmax(0,1fr) var(--k-split-side,420px);
  grid-template-rows:auto auto minmax(0,1fr);
}
.k-split > .k-statusline,.k-split > .k-topbar{grid-column:1 / -1}
.k-split--wide-side{--k-split-side:480px}
.k-split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.k-split__main{min-height:0;overflow-y:auto;padding:var(--k-space-5) var(--k-gutter) var(--k-space-6);display:flex;flex-direction:column;gap:var(--k-space-5)}
.k-split__side{
  min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--k-space-4);
  padding:var(--k-space-5) var(--k-space-6) var(--k-space-6);
  background:var(--k-surface);border-left:var(--k-rule) solid var(--k-line);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7 · 电脑后台 k-page ／ 左侧导航 k-sidenav ／ 页头 k-pagehead
   <body>  （<html data-theme="paper" data-device="desktop">）
     <header class="k-proto k-proto--bar">…</header>
     <div class="k-page">
       <nav class="k-sidenav">
         <div class="k-sidenav__brand"><span class="k-wordmark">KANPAI</span><span class="k-sidenav__store">ALMA TOKYO</span></div>
         <div class="k-sidenav__group"><p class="k-sidenav__label">营业</p>
           <a class="k-sidenav__link" aria-current="page" href="01-daily.html"><span class="k-icon k-icon--dashboard"></span>日报</a> …
         </div>
       </nav>
       <main class="k-page__main">
         <header class="k-pagehead">…</header> …内容… <p class="k-note">…</p>
       </main>
     </div>
   </body>
   ═══════════════════════════════════════════════════════════════════════════ */
.k-page{display:grid;grid-template-columns:var(--k-sidenav-w) minmax(0,1fr);min-height:100dvh;background:var(--k-bg)}
.k-sidenav{
  position:sticky;top:0;height:100dvh;overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--k-space-6);
  padding:var(--k-space-6) var(--k-space-4);
  background:var(--k-surface-2);border-right:var(--k-rule) solid var(--k-line);
}
.k-sidenav__brand{display:flex;flex-direction:column;gap:2px;padding:0 var(--k-space-3) var(--k-space-4);border-bottom:var(--k-rule) solid var(--k-gold)}
.k-sidenav__brand .k-wordmark{font-size:var(--k-fs-h2)}
.k-sidenav__store{font-size:var(--k-fs-caption);color:var(--k-text-2)}
.k-sidenav__group{display:flex;flex-direction:column;gap:2px}
.k-sidenav__label{padding:0 var(--k-space-3) var(--k-space-1);font-size:var(--k-fs-caption);color:var(--k-text-2);font-weight:500}
.k-sidenav__link{
  position:relative;display:flex;align-items:center;gap:var(--k-space-3);min-height:40px;padding:0 var(--k-space-3);
  border-radius:var(--k-r-input);font-size:var(--k-fs-small);color:var(--k-text);
  transition:background-color var(--k-dur-1) var(--k-ease-out);
}
.k-sidenav__link .k-icon{color:var(--k-text-2)}
.k-sidenav__link:hover{background:var(--k-surface)}
.k-sidenav__link.is-current,.k-sidenav__link[aria-current]{background:var(--k-raised);font-weight:700;box-shadow:inset 0 0 0 var(--k-rule) var(--k-edge)}
.k-sidenav__link.is-current::before,.k-sidenav__link[aria-current]::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--k-gold);
}
.k-sidenav__link.is-current .k-icon,.k-sidenav__link[aria-current] .k-icon{color:var(--k-gold-text)}
.k-sidenav__foot{margin-top:auto;padding:var(--k-space-3);font-size:var(--k-fs-caption);color:var(--k-text-2)}

.k-page__main{
  width:100%;max-width:calc(var(--k-measure) + 2 * var(--k-gutter));
  display:flex;flex-direction:column;gap:var(--k-space-6);
  padding:var(--k-space-6) var(--k-gutter) var(--k-space-9);
}
/* 页头：眉题在上、标题在下（同列），右侧放日期/操作；底边一道金线 = 区块分界 */
.k-page__main--solo{margin-inline:auto}   /* 没有侧栏的单页（总入口、各端画面一览）：居中 */
.k-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--k-space-4);flex-wrap:wrap;
  padding-bottom:var(--k-space-4);border-bottom:var(--k-rule) solid var(--k-gold)}
.k-pagehead__titles{display:flex;flex-direction:column;gap:var(--k-space-1);min-width:0}
.k-pagehead__meta{font-size:var(--k-fs-small);color:var(--k-text-2)}
.k-pagehead__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--k-space-2)}
@media (max-width:900px){
  .k-page{grid-template-columns:minmax(0,1fr)}
  .k-sidenav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:var(--k-space-4)}
  .k-sidenav__brand{border-bottom:0}
}

/* 区块标题：眉题＋h2 竖排，右侧可放一个链接 */
.k-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--k-space-3)}
.k-sechead__titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-sechead h2,.k-sechead .k-h2{font-size:var(--k-fs-h2)}
.k-sechead h3,.k-sechead .k-h3{font-size:var(--k-fs-title)}


/* ═══════════════════════════════════════════════════════════════════════════
   8 · 面与卡：k-sheet（大纸片 20）／ k-card（卡片 16）／ k-receipt（小票 4，记录类）
   可点的卡片用 <a class="k-card">：悬停上移 2px（夜主题多一档浮影），按下 .98。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-sheet{
  background:var(--k-surface);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-sheet);
  padding:var(--k-space-6);box-shadow:var(--k-shadow-inset),var(--k-shadow-1);
}
.k-card{
  display:block;background:var(--k-surface);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-card);
  padding:var(--k-space-4);box-shadow:var(--k-shadow-inset);
}
.k-card--flat{background:var(--k-surface-2);border-color:transparent}
.k-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--k-space-3);margin-bottom:var(--k-space-3)}
.k-card__title{font-family:var(--k-font-body);font-size:var(--k-fs-h3);font-weight:700;line-height:1.35}
a.k-card,a.k-seat,a.k-product,a.k-pay,a.k-bottle{
  transition:transform var(--k-dur-2) var(--k-ease-out),box-shadow var(--k-dur-2) var(--k-ease-out),border-color var(--k-dur-1) var(--k-ease-out);
}
a.k-card:hover,a.k-seat:hover,a.k-product:hover,a.k-pay:hover,a.k-bottle:hover{
  transform:translateY(var(--k-lift));box-shadow:var(--k-shadow-inset),var(--k-shadow-2);border-color:var(--k-line-ui);
}
a.k-card:active,a.k-seat:active,a.k-product:active,a.k-pay:active,a.k-bottle:active{transform:scale(var(--k-press))}

/* 小票预览：记录类内容 → canon 4px、罫线、无阴影。夜主题页面里也套紙：
   <div class="k-receipt" data-theme="paper">…</div>（同一张纸，翻到夜里也还是纸） */
.k-receipt{
  background:var(--k-surface);color:var(--k-text);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-record);
  padding:var(--k-space-5) var(--k-space-5) var(--k-space-6);font-size:var(--k-fs-small);line-height:1.6;
}
.k-receipt__head{text-align:center;padding-bottom:var(--k-space-3);border-bottom:var(--k-rule) dashed var(--k-line-ui);margin-bottom:var(--k-space-3)}
.k-receipt__row{display:flex;justify-content:space-between;gap:var(--k-space-3)}
.k-receipt__row .k-num{font-size:var(--k-fs-num-sm)}
.k-receipt__total{display:flex;justify-content:space-between;margin-top:var(--k-space-3);padding-top:var(--k-space-3);border-top:var(--k-rule) solid var(--k-text);font-weight:700}


/* ═══════════════════════════════════════════════════════════════════════════
   9 · 按钮 k-btn
   <a class="k-btn k-btn--primary" href="…">确认收款</a>
   变体：--primary（墨/紙实心）--secondary（描边）--ghost（文字＋金色下划线）--danger
   尺寸：--sm 36 / 默认 = --k-tap / --lg 56；--block 满宽；--icon 正方形图标钮
   状态：hover（主钮出现金色内环；描边钮反相）· focus-visible（金色焦点环）· active（.98）
         disabled（.is-disabled / aria-disabled）· success（.is-done：前置 ✓ 文字改「已保存」）
         loading / error：原型 N/A（需要时在按钮下方用 k-caption 写原因）
   ═══════════════════════════════════════════════════════════════════════════ */
.k-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--k-space-2);
  min-height:var(--k-tap);padding:0 var(--k-space-6);
  border:var(--k-rule) solid transparent;border-radius:var(--k-r-pill);
  font-family:var(--k-font-body);font-size:var(--k-fs-body);font-weight:500;line-height:1.2;white-space:nowrap;
  cursor:pointer;user-select:none;
  transition:background-color var(--k-dur-1) var(--k-ease-out),color var(--k-dur-1) var(--k-ease-out),box-shadow var(--k-dur-1) var(--k-ease-out),transform var(--k-dur-1) var(--k-ease-out);
}
.k-btn--primary{background:var(--k-primary-bg);color:var(--k-primary-text)}
.k-btn--primary:hover{box-shadow:inset 0 0 0 2px var(--k-gold)}
.k-btn--secondary{background:transparent;color:var(--k-text);border-color:var(--k-text)}
.k-btn--secondary:hover{background:var(--k-text);color:var(--k-bg)}
.k-btn--ghost{background:transparent;color:var(--k-text);padding:0 var(--k-space-2);border-radius:var(--k-r-block);
  text-decoration:underline;text-decoration-color:var(--k-gold);text-decoration-thickness:var(--k-rule);text-underline-offset:4px}
.k-btn--ghost:hover{text-decoration-color:var(--k-text)}
.k-btn--danger{background:var(--k-danger-bg);color:var(--k-danger-on)}
.k-btn--danger:hover{box-shadow:inset 0 0 0 2px var(--k-text)}
.k-btn:active{transform:scale(var(--k-press))}
.k-btn--sm{min-height:36px;padding:0 var(--k-space-4);font-size:var(--k-fs-small)}
.k-btn--lg{min-height:56px;padding:0 var(--k-space-7);font-size:var(--k-fs-title);font-weight:700}
.k-btn--block{display:flex;width:100%}
.k-btn--icon{width:var(--k-tap);padding:0}
.k-btn .k-money{font-size:1.1em}
.k-btn.is-disabled,.k-btn[aria-disabled="true"],.k-btn:disabled{
  background:var(--k-surface-2);color:var(--k-text-2);border-color:var(--k-line);box-shadow:none;transform:none;cursor:not-allowed;
}
.k-btn.is-done::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--k-icon-check) center/contain no-repeat;mask:var(--k-icon-check) center/contain no-repeat}


/* ═══════════════════════════════════════════════════════════════════════════
   10 · 表单：k-field ／ k-input ／ k-select ／ k-textarea ／ k-search
   <label class="k-field"><span class="k-field__label">姓名</span><input class="k-input" value="田中 健" lang="ja"><span class="k-field__hint">日本客人用日文名</span></label>
   状态：hover 边框变次级字色 · focus-visible 边框变字色＋金色焦点环 · disabled · .is-error（红边＋k-field__error 写原因）
   ═══════════════════════════════════════════════════════════════════════════ */
.k-field{display:flex;flex-direction:column;gap:var(--k-space-2);min-width:0}
.k-field__label{font-size:var(--k-fs-small);font-weight:500;color:var(--k-text-2)}
.k-field__hint{font-size:var(--k-fs-caption);color:var(--k-text-2)}
.k-field__error{font-size:var(--k-fs-caption);color:var(--k-danger)}
.k-input,.k-select,.k-textarea{
  width:100%;min-height:var(--k-tap);padding:var(--k-space-2) var(--k-space-4);
  background:var(--k-raised);color:var(--k-text);
  border:var(--k-rule) solid var(--k-line-ui);border-radius:var(--k-r-input);
  font-size:var(--k-fs-body);line-height:1.5;
  transition:border-color var(--k-dur-1) var(--k-ease-out);
}
.k-textarea{min-height:96px;resize:vertical}
.k-input::placeholder,.k-textarea::placeholder{color:var(--k-text-2)}
.k-input:hover,.k-select:hover,.k-textarea:hover{border-color:var(--k-text-2)}
.k-input:focus-visible,.k-select:focus-visible,.k-textarea:focus-visible{border-color:var(--k-text);border-radius:var(--k-r-input)}
.k-input:disabled,.k-select:disabled,.k-textarea:disabled,.k-input.is-disabled{background:var(--k-surface-2);color:var(--k-text-2);border-color:var(--k-line)}
.k-field.is-error .k-input,.k-field.is-error .k-select,.k-field.is-error .k-textarea{border-color:var(--k-danger)}
.k-input--num{font-family:var(--k-font-num);font-size:var(--k-fs-num-md);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.k-search{position:relative;display:block}
.k-search > .k-icon{position:absolute;left:var(--k-space-4);top:50%;transform:translateY(-50%);color:var(--k-text-2);pointer-events:none}
.k-search > .k-input{padding-left:calc(var(--k-space-4) * 2 + 20px)}
.k-check{display:inline-flex;align-items:center;gap:var(--k-space-2);min-height:var(--k-tap);font-size:var(--k-fs-body)}
.k-check input{width:20px;height:20px;accent-color:var(--k-accent)}


/* ═══════════════════════════════════════════════════════════════════════════
   11 · 状态胶囊 k-chip（不可点）＋ 记录标签 k-tag ＋ 计数 k-count ＋ 头像 k-avatar
   ───────────────────────────────────────────────────────────────────────────
   k-chip 状态（颜色 + 形状 + 文字三者一起表达，颜色不是唯一线索）：
     --vacant 空位/已结束（中性，实线框）   --active 使用中/接待中/取用中（靛蓝，圆点）
     --due    待结账（芥末，圆点）          --check  待核对/状态不明（芥末，虚线框＋!）
     --debt   欠款/遗留未处理/差额（赤陶，方点） --settled 已结清/已完成/已授权（橄榄，✓）
     无修饰 = 中性信息（如「可取用」）；--gold = 月金描边（如「首杯可用」）；--plain 去掉前置点
   <span class="k-chip k-chip--due">待结账</span>
   ═══════════════════════════════════════════════════════════════════════════ */
.k-chip{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  height:26px;padding:0 var(--k-space-3) 0 10px;border-radius:var(--k-r-pill);
  font-size:var(--k-fs-caption);font-weight:500;line-height:1;white-space:nowrap;letter-spacing:.02em;
  background:var(--k-surface-2);color:var(--k-text-2);border:var(--k-rule) solid var(--k-line);
}
.k-chip::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--k-r-pill);background:currentColor}
.k-chip--plain::before{display:none}
.k-chip--plain{padding:0 var(--k-space-3)}
.k-chip--lg{height:32px;font-size:var(--k-fs-small);padding:0 var(--k-space-4) 0 var(--k-space-3)}
.k-chip--vacant{background:var(--k-status-vacant-bg);color:var(--k-status-vacant-text);border-color:var(--k-line-strong)}
.k-chip--active{background:var(--k-status-active-bg);color:var(--k-status-active-text);border-color:transparent}
.k-chip--due{background:var(--k-status-due-bg);color:var(--k-status-due-text);border-color:transparent}
.k-chip--check{background:var(--k-status-check-bg);color:var(--k-status-check-text);border:var(--k-rule) dashed var(--k-status-check)}
.k-chip--check::before{width:12px;height:12px;border-radius:0;-webkit-mask:var(--k-icon-alert) center/contain no-repeat;mask:var(--k-icon-alert) center/contain no-repeat}
.k-chip--debt{background:var(--k-status-debt-bg);color:var(--k-status-debt-text);border-color:transparent}
.k-chip--debt::before{border-radius:1px}
.k-chip--settled{background:var(--k-status-settled-bg);color:var(--k-status-settled-text);border-color:transparent}
.k-chip--settled::before{width:12px;height:12px;border-radius:0;-webkit-mask:var(--k-icon-check) center/contain no-repeat;mask:var(--k-icon-check) center/contain no-repeat}
.k-chip--gold{background:transparent;color:var(--k-gold-text);border-color:var(--k-gold)}
.k-chip--accent{background:var(--k-accent-bg);color:var(--k-accent-on);border-color:var(--k-accent)}
.k-chip--accent::before{background:var(--k-accent)}

/* 记录标签（canon 4px 印章）：账单行里的「首杯」「改价」「赠送」「代录」「员工饮品」「存酒」「整瓶」
   <span class="k-tag">首杯</span>  --ink 为中性版（如「批量」） */
.k-tag{
  display:inline-flex;align-items:center;flex:none;height:20px;padding:0 6px;
  border:var(--k-rule) solid var(--k-gold);border-radius:var(--k-r-record);
  font-family:var(--k-font-body);font-size:12px;font-weight:500;line-height:1;white-space:nowrap;letter-spacing:.02em;
  color:var(--k-gold-text);
}
.k-tag--ink{border-color:var(--k-line-ui);color:var(--k-text-2)}

/* 计数徽章：<span class="k-count">2</span>（--due 芥末） */
.k-count{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--k-r-pill);
  font-family:var(--k-font-num);font-size:12px;font-weight:600;line-height:1;
  background:var(--k-accent-bg);color:var(--k-accent-on);
}
.k-count--due{background:var(--k-status-due-bg);color:var(--k-status-due-text)}
.k-count--debt{background:var(--k-status-debt-bg);color:var(--k-status-debt-text)}

/* 人员头像：两字＋人员色。<span class="k-avatar k-avatar--2" aria-hidden="true">李明</span>
   --1 佐藤 美咲 · --2 李 明 · --3 高橋 翔 · --4 王 芳（与 seed.json staff[].color_token 对应） */
.k-avatar{
  display:inline-grid;place-items:center;flex:none;width:var(--k-avatar);height:var(--k-avatar);
  border-radius:var(--k-r-pill);background:var(--k-av-bg,var(--k-surface-2));color:var(--k-av-on,var(--k-text));
  font-family:var(--k-font-body);font-size:12px;font-weight:700;letter-spacing:0;line-height:1;
}
.k-avatar--sm{--k-avatar:24px;font-size:12px;letter-spacing:-.04em}
.k-avatar--lg{--k-avatar:48px;font-size:var(--k-fs-title)}
.k-avatar--1{--k-av-bg:var(--k-person-1);--k-av-on:var(--k-person-1-on)}
.k-avatar--2{--k-av-bg:var(--k-person-2);--k-av-on:var(--k-person-2-on)}
.k-avatar--3{--k-av-bg:var(--k-person-3);--k-av-on:var(--k-person-3-on)}
.k-avatar--4{--k-av-bg:var(--k-person-4);--k-av-on:var(--k-person-4-on)}
.k-who{display:inline-flex;align-items:center;gap:var(--k-space-2);min-width:0}   /* 头像＋名字＋角色 */
.k-who__name{font-weight:500}
.k-who__role{font-size:var(--k-fs-caption);color:var(--k-text-2)}


/* ═══════════════════════════════════════════════════════════════════════════
   12 · 座位格 k-seat
   <div class="k-seats" style="--k-cols:4">
     <a class="k-seat k-seat--due" href="03-bill.html">
       <span class="k-seat__top"><span class="k-seat__id">C3</span><span class="k-chip k-chip--due">待结账</span></span>
       <span class="k-seat__guest" lang="ja">田中 健</span>
       <span class="k-seat__meta">20:12 起 · 1 人</span>
       <span class="k-seat__amt"><span class="k-money"><span class="k-yen">¥</span>4,600</span></span>
     </a>
     <span class="k-seat k-seat--vacant"><span class="k-seat__top"><span class="k-seat__id">C2</span></span><span class="k-seat__meta">空位</span></span>
   </div>
   状态：--vacant 空位（虚线框，无金额）· --active 使用中 · --due 待结账 · --stale 遗留未处理（上一营业日）
   每格左缘 3px 状态色条＋浅底；金额永远显示「未收」（接待中＝目前累计应收）。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-seats{display:grid;grid-template-columns:repeat(var(--k-cols,3),minmax(0,1fr));gap:var(--k-space-2)}
.k-seats__label{grid-column:1 / -1;font-size:var(--k-fs-caption);color:var(--k-text-2);font-weight:500;margin-top:var(--k-space-2)}
.k-seat{
  --k-seat-mark:var(--k-status-vacant);
  position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;min-height:112px;
  padding:var(--k-space-3) var(--k-space-3) var(--k-space-3) calc(var(--k-space-3) + var(--k-rule-status));
  background:var(--k-surface);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-card);
  box-shadow:inset var(--k-rule-status) 0 0 var(--k-seat-mark);overflow:hidden;
}
.k-seat__top{display:flex;align-items:center;justify-content:space-between;gap:var(--k-space-2);margin-bottom:var(--k-space-1)}
.k-seat__id{font-family:var(--k-font-num);font-size:var(--k-fs-num-md);font-weight:600;line-height:1;letter-spacing:.02em}
.k-seat__guest{font-size:var(--k-fs-small);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-seat__meta{font-size:var(--k-fs-caption);color:var(--k-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-seat__amt{margin-top:auto;padding-top:var(--k-space-1);font-size:var(--k-fs-num-md);line-height:1.1}
.k-seat .k-chip{height:22px;padding:0 var(--k-space-2) 0 var(--k-space-2);font-size:12px}
.k-seat--vacant{background:var(--k-status-vacant-bg);border:var(--k-rule) dashed var(--k-line-strong);box-shadow:none;padding-left:var(--k-space-3)}
.k-seat--vacant .k-seat__id{color:var(--k-text-2)}
.k-seat--active{--k-seat-mark:var(--k-status-active);background:var(--k-status-active-bg);border-color:transparent}
.k-seat--due{--k-seat-mark:var(--k-status-due);background:var(--k-status-due-bg);border-color:transparent}
.k-seat--stale{--k-seat-mark:var(--k-status-debt);background:var(--k-status-debt-bg);border-color:transparent}
.k-seat.is-selected{outline:2px solid var(--k-accent);outline-offset:2px}
.k-seat--lg{min-height:136px;padding-top:var(--k-space-4);padding-bottom:var(--k-space-4)}
.k-seat--lg .k-seat__id{font-size:var(--k-fs-num-lg)}


/* ═══════════════════════════════════════════════════════════════════════════
   13 · 分类条 k-cats ＋ 商品卡 k-product
   <nav class="k-cats"><a class="k-cat is-current" href="#">常用</a><a class="k-cat" href="#">ハイボール・カクテル</a>…</nav>
   <div class="k-products" style="--k-cols:2">
     <a class="k-product is-fav" href="…"><span class="k-product__name" lang="ja">ジントニック</span>
       <span class="k-product__foot"><span class="k-product__unit">1杯</span><span class="k-product__price k-money">1,300</span></span></a>
     <span class="k-product is-out" aria-disabled="true">…<span class="k-chip k-chip--check">暂不可售</span>…</span>
   </div>
   状态：默认 · .is-fav（右上金色星＝常用）· .is-selected（靛蓝＋右上 ×数量 k-product__qty）· .is-out（缺货：虚线框、价格划线、不可点）
   ═══════════════════════════════════════════════════════════════════════════ */
.k-cats{display:flex;gap:var(--k-space-2);overflow-x:auto;scrollbar-width:none;padding:2px 0}
.k-cats::-webkit-scrollbar{display:none}
.k-cat{
  flex:none;display:inline-flex;align-items:center;gap:var(--k-space-1);height:36px;padding:0 var(--k-space-4);
  border-radius:var(--k-r-pill);border:var(--k-rule) solid var(--k-line);
  font-size:var(--k-fs-small);color:var(--k-text-2);white-space:nowrap;
  transition:background-color var(--k-dur-1) var(--k-ease-out),color var(--k-dur-1) var(--k-ease-out);
}
a.k-cat:hover{color:var(--k-text);border-color:var(--k-line-ui)}
.k-cat.is-current,.k-cat[aria-current]{background:var(--k-accent-bg);border-color:var(--k-accent);color:var(--k-accent-on);font-weight:500}

.k-products{display:grid;grid-template-columns:repeat(var(--k-cols,2),minmax(0,1fr));gap:var(--k-space-2)}
.k-product{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--k-space-2);min-width:0;
  min-height:92px;padding:var(--k-space-3) var(--k-space-4);
  background:var(--k-surface);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-card);
}
.k-product__name{font-size:var(--k-fs-title);font-weight:500;line-height:1.35;padding-right:var(--k-space-5);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.k-product__foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--k-space-2)}
.k-product__unit{font-size:var(--k-fs-caption);color:var(--k-text-2)}
.k-product__price{font-size:var(--k-fs-num-md)}
.k-product.is-fav::after{
  content:"";position:absolute;top:var(--k-space-3);right:var(--k-space-3);width:14px;height:14px;background:var(--k-gold);
  -webkit-mask:var(--k-icon-star) center/contain no-repeat;mask:var(--k-icon-star) center/contain no-repeat;
}
.k-product.is-selected{background:var(--k-accent-bg);border-color:var(--k-accent)}
.k-product__qty{position:absolute;top:var(--k-space-2);right:var(--k-space-2);z-index:1;min-width:26px;height:22px;font-size:13px;background:var(--k-accent);color:var(--k-surface)}  /* 夜 6.27 / 紙 6.59 */
.k-product.is-selected.is-fav::after{display:none}
.k-product.is-out{background:var(--k-surface-2);border:var(--k-rule) dashed var(--k-line-strong);cursor:not-allowed}
.k-product.is-out .k-product__name{color:var(--k-text-2)}
.k-product.is-out .k-product__price{color:var(--k-text-2);text-decoration:line-through}


/* ═══════════════════════════════════════════════════════════════════════════
   14 · 账单行 k-lines ／ k-line
   一行同时可见：商品・数量・菜单价・优惠/改价・成交价。原价改动时用 <s> 划线（text-decoration），不另造颜色。
   窄（手机）＝两行堆叠；容器 ≥560px（iPad 右栏放不下时仍堆叠，电脑/全宽）自动变 5 列表格。
   <ul class="k-lines">
     <li class="k-lines__head" aria-hidden="true"><span>商品</span><span>数量</span><span>菜单价</span><span>优惠・改价</span><span>成交价</span></li>
     <li class="k-line">
       <span class="k-line__name" lang="ja">ジントニック</span>
       <span class="k-line__calc">
         <span class="k-line__qty">×1</span>
         <span class="k-line__menu"><span class="k-line__lbl">菜单价</span><s>1,300</s></span>
         <span class="k-line__adj"><span class="k-tag">首杯</span>−1,000</span>
       </span>
       <span class="k-line__deal">300</span>
       <span class="k-line__meta">担当 李 明 · 20:15</span>
     </li>
   </ul>
   变体：--seat（席料行）· --info（存酒取用等不计费行：成交价写「不计费」）· --void（已取消：整行划线）
         .is-new（刚加入、未保存：左侧靛蓝条）
   ═══════════════════════════════════════════════════════════════════════════ */
.k-lines{container-type:inline-size;display:flex;flex-direction:column}
.k-lines__head{display:none}
.k-line{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"name deal" "calc calc" "meta meta";
  column-gap:var(--k-space-3);row-gap:2px;align-items:baseline;
  padding:var(--k-space-3) 0;border-bottom:var(--k-rule) solid var(--k-line);
}
.k-line__name{grid-area:name;font-size:var(--k-fs-title);font-weight:500;line-height:1.4;min-width:0}
.k-line__calc{grid-area:calc;display:flex;flex-wrap:wrap;align-items:center;gap:var(--k-space-1) var(--k-space-3);font-size:var(--k-fs-small);color:var(--k-text-2)}
.k-line__qty,.k-line__menu,.k-line__adj{font-family:var(--k-font-num);font-variant-numeric:tabular-nums;font-size:var(--k-fs-num-sm);white-space:nowrap}
.k-line__lbl{font-family:var(--k-font-body);font-size:var(--k-fs-caption);margin-right:var(--k-space-1)}
.k-line__adj{display:inline-flex;align-items:center;gap:var(--k-space-2)}
.k-line__deal{grid-area:deal;font-family:var(--k-font-num);font-variant-numeric:tabular-nums;font-size:var(--k-fs-num-md);font-weight:600;text-align:right;white-space:nowrap;line-height:1.2}
.k-line__meta{grid-area:meta;font-size:var(--k-fs-caption);color:var(--k-text-2);line-height:1.5}
.k-line--seat .k-line__name{color:var(--k-text-2)}
.k-line--info .k-line__deal{font-family:var(--k-font-body);font-size:var(--k-fs-caption);font-weight:500;color:var(--k-text-2)}
.k-line--void .k-line__name,.k-line--void .k-line__deal{text-decoration:line-through;color:var(--k-text-2)}
.k-line.is-new{box-shadow:inset var(--k-rule-status) 0 0 var(--k-accent);padding-left:var(--k-space-3)}
@container (min-width:560px){
  .k-lines__head,.k-line{
    grid-template-columns:minmax(0,1fr) 56px 96px minmax(148px,auto) 104px;
    grid-template-areas:"name qty menu adj deal" "meta meta meta meta meta";
  }
  .k-lines__head{display:grid;padding:0 0 var(--k-space-2);border-bottom:var(--k-rule) solid var(--k-line-ui);
    font-size:var(--k-fs-caption);color:var(--k-text-2);font-weight:500}
  .k-lines__head > :nth-child(n+2){text-align:right}
  .k-line__calc{display:contents}
  .k-line__qty{grid-area:qty;text-align:right}
  .k-line__menu{grid-area:menu;text-align:right}
  .k-line__adj{grid-area:adj;justify-content:flex-end}
  .k-line__lbl{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   15 · 金额三联 k-amounts（应收 ／ 已收 ／ 未收）——每张账单画面都必须有
   <dl class="k-amounts">
     <div class="k-amounts__item k-amounts__item--due"><dt>应收</dt><dd class="k-money"><span class="k-yen">¥</span>4,600</dd></div>
     <div class="k-amounts__item"><dt>已收</dt><dd class="k-money"><span class="k-yen">¥</span>0</dd></div>
     <div class="k-amounts__item k-amounts__item--open"><dt>未收</dt><dd class="k-money"><span class="k-yen">¥</span>4,600</dd></div>
   </dl>
   默认三栏（窄栏数字用 num-lg）；--rows 竖排（iPad 右栏、结账页），--lg 全宽大字。
   未收：接待中＝金字（还没收，不是错误）；--debt 结束但未结清＝赤陶＋「欠款」；--settled 结清＝橄榄。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-amounts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--k-rule) solid var(--k-gold);border-bottom:var(--k-rule) solid var(--k-line);
}
.k-amounts__item{display:flex;flex-direction:column;gap:var(--k-space-1);padding:var(--k-space-3) var(--k-space-3) var(--k-space-3) 0;min-width:0}
.k-amounts__item + .k-amounts__item{padding-left:var(--k-space-3);border-left:var(--k-rule) solid var(--k-line)}
.k-amounts dt{font-size:var(--k-fs-small);color:var(--k-text-2);font-weight:500;display:flex;align-items:center;gap:var(--k-space-2)}
.k-amounts dd{font-size:var(--k-amounts-num,var(--k-fs-num-lg));line-height:1.05;white-space:nowrap}
.k-amounts__item--open dd{color:var(--k-gold-text)}
.k-amounts--debt .k-amounts__item--open dd{color:var(--k-danger)}
.k-amounts--settled .k-amounts__item--open dd{color:var(--k-success)}
.k-amounts--lg{--k-amounts-num:var(--k-fs-num-xl)}
.k-amounts--rows{grid-template-columns:minmax(0,1fr)}
.k-amounts--rows .k-amounts__item{flex-direction:row;align-items:baseline;justify-content:space-between;padding:var(--k-space-2) 0}
.k-amounts--rows .k-amounts__item + .k-amounts__item{padding-left:0;border-left:0;border-top:var(--k-rule) solid var(--k-line)}
.k-amounts--rows .k-amounts__item--due dd{font-size:var(--k-fs-num-xl)}


/* ═══════════════════════════════════════════════════════════════════════════
   16 · 客人分页 k-guest-tabs（同一张单里的每位客人；当前 = 金色下划线）
   <nav class="k-guest-tabs" aria-label="本桌客人">
     <a class="k-guest-tab is-current" aria-current="true" href="#"><span class="k-guest-tab__name">客人1</span><span class="k-guest-tab__amt k-money">2,000</span></a>
     <a class="k-guest-tab" href="#"><span class="k-guest-tab__name" lang="ja">田中 健</span><span class="k-guest-tab__amt k-money">4,600</span></a>
     <a class="k-guest-tab k-guest-tab--all" href="#">全桌 <span class="k-guest-tab__amt k-money">4,300</span></a>
     <a class="k-guest-tab k-guest-tab--add" href="02-open.html">＋ 加人</a>
   </nav>
   每个 tab 的金额 = 这位客人的应收小计；k-guest-tab__first 可写「首杯已用」。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-guest-tabs{display:flex;gap:var(--k-space-1);overflow-x:auto;scrollbar-width:none;border-bottom:var(--k-rule) solid var(--k-line)}
.k-guest-tabs::-webkit-scrollbar{display:none}
.k-guest-tab{
  flex:none;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:var(--k-tap);
  padding:var(--k-space-2) var(--k-space-4) var(--k-space-2);margin-bottom:-1px;
  border-bottom:2px solid transparent;color:var(--k-text-2);
  transition:color var(--k-dur-1) var(--k-ease-out);
}
a.k-guest-tab:hover{color:var(--k-text)}
.k-guest-tab__name{font-size:var(--k-fs-title);font-weight:500;line-height:1.3;white-space:nowrap}
.k-guest-tab__amt{font-size:var(--k-fs-num-sm);line-height:1.2}
.k-guest-tab__first{font-size:12px;color:var(--k-text-2)}
.k-guest-tab.is-current,.k-guest-tab[aria-current]{color:var(--k-text);border-bottom-color:var(--k-gold)}
.k-guest-tab--all{flex-direction:row;align-items:center;gap:var(--k-space-2)}
.k-guest-tab--add{color:var(--k-accent);justify-content:center}


/* ═══════════════════════════════════════════════════════════════════════════
   17 · 数量步进 k-stepper ／ 分段选择 k-seg
   <span class="k-stepper"><span class="k-stepper__btn" aria-label="减少"><span class="k-icon k-icon--minus"></span></span>
     <span class="k-stepper__val">1</span><span class="k-stepper__btn" aria-label="增加"><span class="k-icon k-icon--plus"></span></span></span>
   <div class="k-seg" role="group" aria-label="分账方式">
     <a class="k-seg__opt is-current" aria-current="true" href="…">各自消费<span class="k-seg__sub">按各人应收</span></a>
     <a class="k-seg__opt" href="…">平均 AA<span class="k-seg__sub">每人 2,400</span></a>
     <a class="k-seg__opt" href="…">一人支付</a>
   </div>
   ═══════════════════════════════════════════════════════════════════════════ */
.k-stepper{
  display:inline-grid;grid-template-columns:var(--k-tap) minmax(48px,auto) var(--k-tap);align-items:stretch;flex:none;
  background:var(--k-raised);border:var(--k-rule) solid var(--k-line-ui);border-radius:var(--k-r-input);overflow:hidden;
}
.k-stepper__btn{display:grid;place-items:center;min-height:var(--k-tap);color:var(--k-text);transition:background-color var(--k-dur-1) var(--k-ease-out)}
a.k-stepper__btn:hover,button.k-stepper__btn:hover{background:var(--k-surface-2)}
.k-stepper__btn.is-disabled{color:var(--k-line-ui)}
.k-stepper__val{display:grid;place-items:center;padding:0 var(--k-space-2);font-family:var(--k-font-num);font-size:var(--k-fs-num-md);font-weight:600;
  border-left:var(--k-rule) solid var(--k-line);border-right:var(--k-rule) solid var(--k-line)}

.k-seg{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--k-space-1);padding:var(--k-space-1);
  background:var(--k-surface-2);border-radius:var(--k-r-input);
}
.k-seg__opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;
  min-height:calc(var(--k-tap) - var(--k-space-2));padding:var(--k-space-1) var(--k-space-3);
  border-radius:var(--k-r-block);font-size:var(--k-fs-small);font-weight:500;line-height:1.3;color:var(--k-text-2);
  transition:background-color var(--k-dur-1) var(--k-ease-out),color var(--k-dur-1) var(--k-ease-out);
}
a.k-seg__opt:hover{color:var(--k-text)}
.k-seg__opt.is-current,.k-seg__opt[aria-current],.k-seg__opt[aria-pressed="true"]{
  background:var(--k-accent-bg);color:var(--k-accent-on);box-shadow:inset 0 0 0 var(--k-rule) var(--k-accent);
}
.k-seg__opt.is-disabled{color:var(--k-line-ui);cursor:not-allowed}
.k-seg__sub{font-family:var(--k-font-num);font-size:var(--k-fs-caption);font-weight:500;color:inherit;opacity:1}


/* ═══════════════════════════════════════════════════════════════════════════
   18 · 付款渠道卡 k-pay ＋ 找零行 k-change
   <div class="k-pays">
     <a class="k-pay is-selected" href="…"><span class="k-icon k-icon--cash"></span><span class="k-pay__name">现金</span><span class="k-pay__amt k-money">4,600</span></a>
     <a class="k-pay" href="…"><span class="k-icon k-icon--card"></span><span class="k-pay__name" lang="ja">AirPay カード</span><span class="k-pay__amt">刷卡后登记</span></a>
     <a class="k-pay" href="…"><span class="k-icon k-icon--qr"></span><span class="k-pay__name">QR</span></a>
     <a class="k-pay" href="…"><span class="k-icon k-icon--emoney"></span><span class="k-pay__name" lang="ja">電子マネー</span></a>
   </div>
   状态：默认 · .is-selected（靛蓝）· .is-pending（支付状态不明，虚线芥末＋k-chip--check）· .is-disabled
   <div class="k-change">
     <div class="k-change__cell"><span>收到现金</span><b class="k-money">10,000</b></div><span class="k-change__op">−</span>
     <div class="k-change__cell"><span>应收</span><b class="k-money">4,600</b></div><span class="k-change__op">＝</span>
     <div class="k-change__cell k-change__result"><span>找零</span><b class="k-money">5,400</b></div>
   </div>
   ═══════════════════════════════════════════════════════════════════════════ */
.k-pays{display:grid;grid-template-columns:repeat(var(--k-cols,2),minmax(0,1fr));gap:var(--k-space-2)}
.k-pay{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon name" "icon amt";
  align-items:center;column-gap:var(--k-space-3);min-height:68px;padding:var(--k-space-3) var(--k-space-4);
  background:var(--k-surface);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-card);
}
.k-pay > .k-icon{grid-area:icon;--k-icon-size:24px;color:var(--k-text-2)}
.k-pay__name{grid-area:name;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-pay__amt{grid-area:amt;font-size:var(--k-fs-caption);color:var(--k-text-2);line-height:1.3}
.k-pay__amt.k-money{font-size:var(--k-fs-num-sm);color:var(--k-text)}
.k-pay.is-selected{background:var(--k-accent-bg);border-color:var(--k-accent)}
.k-pay.is-selected > .k-icon{color:var(--k-accent)}
.k-pay.is-pending{border:var(--k-rule) dashed var(--k-status-check);background:var(--k-status-check-bg)}
.k-pay.is-disabled{background:var(--k-surface-2);color:var(--k-text-2);border-color:var(--k-line);cursor:not-allowed}

.k-change{
  display:flex;align-items:flex-end;gap:var(--k-space-3);padding:var(--k-space-3) var(--k-space-4);
  background:var(--k-surface-2);border-radius:var(--k-r-input);
}
.k-change__cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-change__cell > span{font-size:var(--k-fs-caption);color:var(--k-text-2)}
.k-change__cell > b{font-size:var(--k-fs-num-md)}
.k-change__op{font-family:var(--k-font-num);font-size:var(--k-fs-num-md);color:var(--k-text-2);line-height:1.4}
.k-change__result{margin-left:auto;text-align:right}
.k-change__result > b{font-size:var(--k-fs-num-lg);color:var(--k-gold-text)}


/* ═══════════════════════════════════════════════════════════════════════════
   19 · 存酒瓶卡 k-bottle
   <a class="k-bottle" href="…">
     <span class="k-bottle__head"><span class="k-bottle__no">#K-0231</span><span class="k-chip">可取用</span></span>
     <span class="k-bottle__name" lang="ja">山崎12年</span>
     <dl class="k-bottle__meta"><div><dt>位置</dt><dd>棚A-3</dd></div><div><dt>余量</dt><dd>約半瓶</dd></div><div><dt>归属</dt><dd lang="ja">山本 隆</dd></div></dl>
     <span class="k-bottle__note">10/14 23:40 李 明 归位</span>
   </a>
   状态：默认（可取用，中性）· --active 取用中 · --check 待核对（虚线＋芥末）· --done 已取完（淡）
   ═══════════════════════════════════════════════════════════════════════════ */
.k-bottles{display:grid;grid-template-columns:repeat(var(--k-cols,1),minmax(0,1fr));gap:var(--k-space-2)}
.k-bottle{
  --k-bottle-mark:var(--k-gold);
  display:flex;flex-direction:column;gap:var(--k-space-2);min-width:0;
  padding:var(--k-space-4) var(--k-space-4) var(--k-space-4) calc(var(--k-space-4) + var(--k-rule-status));
  background:var(--k-surface);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-card);
  box-shadow:inset var(--k-rule-status) 0 0 var(--k-bottle-mark);
}
.k-bottle__head{display:flex;align-items:center;justify-content:space-between;gap:var(--k-space-2)}
.k-bottle__no{font-family:var(--k-font-num);font-size:var(--k-fs-num-sm);font-weight:600;letter-spacing:.06em;color:var(--k-gold-text)}
.k-bottle__name{font-size:var(--k-fs-h3);font-weight:700;line-height:1.3}
.k-bottle__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-space-2)}
.k-bottle__meta dt{font-size:var(--k-fs-caption);color:var(--k-text-2)}
.k-bottle__meta dd{font-size:var(--k-fs-small);font-weight:500}
.k-bottle__note{font-size:var(--k-fs-caption);color:var(--k-text-2);padding-top:var(--k-space-2);border-top:var(--k-rule) solid var(--k-line)}
.k-bottle--active{--k-bottle-mark:var(--k-status-active)}
.k-bottle--check{--k-bottle-mark:var(--k-status-check);border:var(--k-rule) dashed var(--k-status-check);background:var(--k-status-check-bg)}
.k-bottle--done{--k-bottle-mark:var(--k-line-strong);background:var(--k-surface-2)}
.k-bottle--done .k-bottle__name{color:var(--k-text-2)}


/* ═══════════════════════════════════════════════════════════════════════════
   20 · 语音备注 k-voice（所有备注位置同一个样子；SOP 十四）
   <div class="k-voice">
     <span class="k-voice__label">识别备注</span>
     <div class="k-voice__box">
       <textarea class="k-voice__text" lang="ja" rows="2">長髪眼鏡男</textarea>
       <span class="k-voice__mic" aria-label="语音输入"><span class="k-icon k-icon--mic"></span></span>
     </div>
     <div class="k-voice__bar">
       <div class="k-voice__langs" role="group" aria-label="语音语言">
         <span class="k-voice__lang">中文</span><span class="k-voice__lang is-current">日本語</span><span class="k-voice__lang">English</span>
       </div>
       <span class="k-voice__status">已转写 · 可修改</span>
     </div>
   </div>
   语言胶囊同时只亮一个（记住上次选择）。状态：默认 · .is-listening（麦克风赤陶＝「现在」录音中，状态写「正在听…」）
   · .is-transcribed（文字框左缘金线＝这段是语音转写，可直接改）
   ═══════════════════════════════════════════════════════════════════════════ */
.k-voice{display:flex;flex-direction:column;gap:var(--k-space-2);min-width:0}
.k-voice__label{font-size:var(--k-fs-small);font-weight:500;color:var(--k-text-2)}
.k-voice__box{
  display:flex;align-items:flex-start;gap:var(--k-space-2);
  padding:var(--k-space-2) var(--k-space-2) var(--k-space-2) var(--k-space-4);
  background:var(--k-raised);border:var(--k-rule) solid var(--k-line-ui);border-radius:var(--k-r-input);
  transition:border-color var(--k-dur-1) var(--k-ease-out);
}
.k-voice__box:hover{border-color:var(--k-text-2)}
.k-voice__box:focus-within{border-color:var(--k-text);outline:var(--k-focus-width) solid var(--k-focus);outline-offset:var(--k-focus-offset)}
.k-voice__text{flex:1;min-width:0;min-height:52px;padding:var(--k-space-2) 0;border:0;background:transparent;color:var(--k-text);resize:vertical;line-height:1.6}
.k-voice__text:focus-visible{outline:none}
.k-voice__text::placeholder{color:var(--k-text-2)}
.k-voice__mic{
  flex:none;display:grid;place-items:center;width:var(--k-tap);height:var(--k-tap);
  border-radius:var(--k-r-pill);background:var(--k-surface-2);color:var(--k-text);border:var(--k-rule) solid var(--k-line);
}
.k-voice.is-listening .k-voice__mic{background:var(--k-live-bg);color:var(--k-live-text);border-color:var(--k-live)}
.k-voice.is-listening .k-voice__status{color:var(--k-live-text)}
.k-voice.is-transcribed .k-voice__box{box-shadow:inset var(--k-rule-status) 0 0 var(--k-gold)}
.k-voice__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--k-space-2);flex-wrap:wrap}
.k-voice__langs{display:flex;gap:6px}
.k-voice__lang{
  display:inline-flex;align-items:center;height:30px;padding:0 var(--k-space-3);border-radius:var(--k-r-pill);
  border:var(--k-rule) solid var(--k-line);font-size:var(--k-fs-caption);color:var(--k-text-2);white-space:nowrap;
}
.k-voice__lang.is-current{background:var(--k-accent-bg);border-color:var(--k-accent);color:var(--k-accent-on);font-weight:500}
.k-voice__status{font-size:var(--k-fs-caption);color:var(--k-text-2)}
.k-voice__hint{font-size:var(--k-fs-caption);color:var(--k-text-2)}


/* ═══════════════════════════════════════════════════════════════════════════
   21 · 授权条 k-authz ＋ PIN 面板 k-pin
   <div class="k-authz">                                  （锁态：金色虚线框＋锁）
     <span class="k-icon k-icon--lock" aria-hidden="true"></span>
     <div class="k-authz__body"><strong>改价需店长授权</strong><span>李 明 没有改价权限</span></div>
     <a class="k-btn k-btn--sm k-btn--secondary" href="05-authz.html">请店长授权</a>
   </div>
   <div class="k-authz k-authz--granted">…k-icon--unlock…<strong>店长 佐藤 已授权</strong><span>21:40 · 山崎12年 1,500 → 1,300</span></div>
   <div class="k-pin">
     <div class="k-who">…头像…佐藤 美咲 · 店长</div>
     <div class="k-pin__dots"><span class="k-pin__dot is-on"></span>…共 4 个…</div>
     <div class="k-pin__pad"><span class="k-pin__key">1</span>…<span class="k-pin__key k-pin__key--fn">取消</span><span class="k-pin__key">0</span><span class="k-pin__key k-pin__key--fn">删除</span></div>
   </div>
   PIN 圆点只表示位数，原型里不写真实 PIN。错误：.k-pin.is-error ＋ k-pin__msg「PIN 不正确，请重试」。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-authz{
  display:flex;align-items:center;gap:var(--k-space-3);padding:var(--k-space-3) var(--k-space-4);
  background:var(--k-surface);border:var(--k-rule) dashed var(--k-gold);border-radius:var(--k-r-card);
}
.k-authz > .k-icon{--k-icon-size:22px;color:var(--k-gold-text)}
.k-authz__body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.k-authz__body strong{font-size:var(--k-fs-body)}
.k-authz__body span{font-size:var(--k-fs-caption);color:var(--k-text-2)}
.k-authz--granted{background:var(--k-status-settled-bg);border-style:solid;border-color:var(--k-status-settled)}
.k-authz--granted > .k-icon{color:var(--k-status-settled-text)}

.k-pin{
  display:flex;flex-direction:column;align-items:center;gap:var(--k-space-5);width:min(100%,340px);
  padding:var(--k-space-6) var(--k-space-5);background:var(--k-surface);
  border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-sheet);box-shadow:var(--k-shadow-inset),var(--k-shadow-2);
}
.k-pin__title{font-size:var(--k-fs-small);color:var(--k-text-2);text-align:center}
.k-pin__dots{display:flex;gap:var(--k-space-4)}
.k-pin__dot{width:14px;height:14px;border-radius:var(--k-r-pill);border:var(--k-rule) solid var(--k-line-ui)}
.k-pin__dot.is-on{background:var(--k-text);border-color:var(--k-text)}
.k-pin__pad{display:grid;grid-template-columns:repeat(3,64px);gap:var(--k-space-3) var(--k-space-5)}
.k-pin__key{
  display:grid;place-items:center;width:64px;height:64px;border-radius:var(--k-r-pill);
  background:var(--k-surface-2);color:var(--k-text);font-family:var(--k-font-num);font-size:var(--k-fs-num-lg);font-weight:500;
}
a.k-pin__key:hover,button.k-pin__key:hover{background:var(--k-line)}
.k-pin__key--fn{background:transparent;font-family:var(--k-font-body);font-size:var(--k-fs-small);color:var(--k-text-2)}
.k-pin__msg{font-size:var(--k-fs-caption);color:var(--k-text-2);min-height:1.5em;text-align:center}
.k-pin.is-error .k-pin__dot{border-color:var(--k-danger)}
.k-pin.is-error .k-pin__msg{color:var(--k-danger)}


/* ═══════════════════════════════════════════════════════════════════════════
   22 · 清单步骤 k-steps（闭店 17 步、开店 5 步）
   <ol class="k-steps">
     <li class="k-step is-done"><span class="k-step__no">01</span><div class="k-step__body"><span class="k-step__title">确认现场接待已经结束</span><span class="k-step__detail">接待中 0；已结束未结清 1</span></div><span class="k-chip k-chip--settled">已完成</span></li>
     <li class="k-step is-issue">…<span class="k-chip k-chip--check">待查</span></li>
     <li class="k-step is-current">…<span class="k-chip k-chip--accent">进行中</span></li>
     <li class="k-step">…（未开始）</li>
   </ol>
   编号用两位数、金字（canon 编号）；完成后编号转灰。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-steps{display:flex;flex-direction:column}
.k-step{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--k-space-3);align-items:start;
  padding:var(--k-space-3) var(--k-space-2);border-bottom:var(--k-rule) solid var(--k-line);
}
.k-step__no{font-family:var(--k-font-num);font-size:var(--k-fs-num-md);font-weight:600;line-height:1.15;color:var(--k-gold-text)}
.k-step__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-step__title{font-weight:500;line-height:1.45}
.k-step__detail{font-size:var(--k-fs-small);color:var(--k-text-2);line-height:var(--k-lh-small)}
.k-step.is-done .k-step__no{color:var(--k-text-2)}
.k-step.is-issue .k-step__no{color:var(--k-status-check-text)}
.k-step.is-current{background:var(--k-accent-bg);border-radius:var(--k-r-block);box-shadow:inset var(--k-rule-status) 0 0 var(--k-accent);border-bottom-color:transparent}
.k-step.is-current .k-step__detail{color:var(--k-text)}
.k-step:not(.is-done):not(.is-issue):not(.is-current) .k-step__title{color:var(--k-text-2)}


/* ═══════════════════════════════════════════════════════════════════════════
   23 · KPI 卡 k-kpi
   <article class="k-kpi"><p class="k-kpi__label">当日应收</p><p class="k-kpi__value k-money"><span class="k-yen">¥</span>113,700</p><p class="k-kpi__meta">14 组 · 22 人</p></article>
   变体：--hero（大字）· --debt（未收/差额，赤陶字）· --check（待查，芥末字）
   数字只能来自 seed.json；没有的指标写「—」并在 meta 写「种子数据未提供」，不编百分比。
   ═══════════════════════════════════════════════════════════════════════════ */
.k-kpis{display:grid;grid-template-columns:repeat(var(--k-cols,4),minmax(0,1fr));gap:var(--k-space-3)}
.k-kpi{
  display:flex;flex-direction:column;gap:var(--k-space-1);min-width:0;padding:var(--k-space-4) var(--k-space-5);
  background:var(--k-surface);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-card);box-shadow:var(--k-shadow-inset);
}
.k-kpi__label{display:flex;align-items:center;gap:var(--k-space-2);font-size:var(--k-fs-small);color:var(--k-text-2);font-weight:500}
.k-kpi__label::before{content:"";flex:none;width:6px;height:6px;background:var(--k-gold)}
.k-kpi__value{font-size:var(--k-fs-num-lg);line-height:1.05}
.k-kpi__meta{font-size:var(--k-fs-caption);color:var(--k-text-2)}
.k-kpi--hero .k-kpi__value{font-size:var(--k-fs-num-xl)}
.k-kpi--debt .k-kpi__value{color:var(--k-danger)}
.k-kpi--check .k-kpi__value{color:var(--k-warning)}


/* ═══════════════════════════════════════════════════════════════════════════
   24 · 数据表 k-table（记录类 → canon：4px、罫线、无外框粗线、数字右对齐）
   <div class="k-table-wrap"><table class="k-table">
     <thead><tr><th>时间</th><th>内容</th><th class="is-num">金额</th></tr></thead>
     <tbody><tr><td class="k-num">21:40</td><td>改价 山崎12年</td><td class="is-num"><s>1,500</s> 1,300</td></tr>…</tbody>
     <tfoot><tr class="is-total"><td colspan="2">合计</td><td class="is-num">113,700</td></tr></tfoot>
   </table></div>
   行状态：.is-flag（左缘芥末条：待核对）· .is-debt（左缘赤陶条）· hover 换底色
   ═══════════════════════════════════════════════════════════════════════════ */
.k-table-wrap{overflow-x:auto;background:var(--k-surface);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-record)}
.k-table{width:100%;font-size:var(--k-fs-small);line-height:1.5}
.k-table th{
  text-align:left;font-weight:500;font-size:var(--k-fs-caption);color:var(--k-text-2);white-space:nowrap;
  padding:var(--k-space-2) var(--k-space-3);border-bottom:var(--k-rule) solid var(--k-line-ui);
}
.k-table td{padding:var(--k-space-2) var(--k-space-3);border-bottom:var(--k-rule) solid var(--k-line);vertical-align:top}
.k-table tbody tr:last-child td{border-bottom:0}
.k-table .is-num,.k-table td.k-num{text-align:right;font-family:var(--k-font-num);font-variant-numeric:tabular-nums;font-size:var(--k-fs-num-sm);white-space:nowrap}
.k-table th.is-num{text-align:right;font-family:var(--k-font-body);font-size:var(--k-fs-caption)}
.k-table tbody tr{transition:background-color var(--k-dur-1) var(--k-ease-out)}
.k-table tbody tr:hover{background:var(--k-surface-2)}
.k-table tr.is-flag td:first-child{box-shadow:inset var(--k-rule-status) 0 0 var(--k-status-check)}
.k-table tr.is-debt td:first-child{box-shadow:inset var(--k-rule-status) 0 0 var(--k-status-debt)}
.k-table tfoot td,.k-table tr.is-total td{font-weight:700;border-top:var(--k-rule) solid var(--k-gold);border-bottom:0}


/* ═══════════════════════════════════════════════════════════════════════════
   25 · 图表配色 k-chart（手写内联 SVG；颜色全部走类名，不写 fill="#…"）
   <svg class="k-chart" viewBox="0 0 640 240" role="img" aria-label="近 7 天应收">
     <line class="k-chart__grid" …/>  <text class="k-chart__axis" …>10/08</text>
     <path class="k-chart__area" d="…"/> <path class="k-chart__line" d="…"/>
     <circle class="k-chart__dot" …/> <circle class="k-chart__dot k-chart__dot--current" …/>
     <rect class="k-chart__bar k-chart__s2" …/>（渠道条：s1 现金 / s2 AirPay / s3 QR / s4 電子マネー）
   </svg>
   <ul class="k-legend"><li><span class="k-legend__sw k-legend__sw--1"></span>现金</li>…</ul>
   ═══════════════════════════════════════════════════════════════════════════ */
.k-chart{width:100%;height:auto;overflow:visible;font-family:var(--k-font-num)}
.k-chart__grid{stroke:var(--k-chart-grid);stroke-width:1;fill:none}
.k-chart__axis{fill:var(--k-chart-axis);font-size:12px;font-weight:500}
.k-chart__label{fill:var(--k-text);font-size:14px;font-weight:600}
.k-chart__line{fill:none;stroke:var(--k-chart-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.k-chart__line--s2{stroke:var(--k-chart-2)} .k-chart__line--s3{stroke:var(--k-chart-3)} .k-chart__line--s4{stroke:var(--k-chart-4)}
.k-chart__area{fill:var(--k-chart-area);stroke:none}
.k-chart__dot{fill:var(--k-surface);stroke:var(--k-chart-1);stroke-width:2}
.k-chart__dot--current{fill:var(--k-chart-1)}
.k-chart__bar{stroke:none}
.k-chart__s1{fill:var(--k-chart-1)} .k-chart__s2{fill:var(--k-chart-2)} .k-chart__s3{fill:var(--k-chart-3)} .k-chart__s4{fill:var(--k-chart-4)}
.k-chart__gold{stroke:var(--k-gold);stroke-width:1;fill:none}
.k-legend{display:flex;flex-wrap:wrap;gap:var(--k-space-2) var(--k-space-4);font-size:var(--k-fs-caption);color:var(--k-text-2)}
.k-legend li{display:inline-flex;align-items:center;gap:var(--k-space-2)}
.k-legend__sw{width:10px;height:10px;border-radius:var(--k-r-record);background:var(--k-chart-1)}
.k-legend__sw--2{background:var(--k-chart-2)} .k-legend__sw--3{background:var(--k-chart-3)} .k-legend__sw--4{background:var(--k-chart-4)}
.k-legend__sw--area{background:var(--k-chart-area);box-shadow:inset 0 0 0 var(--k-rule) var(--k-chart-1)}


/* ═══════════════════════════════════════════════════════════════════════════
   26 · 列表行 k-list／k-row ・ 键值 k-kv ・ 提示条 k-alert ・ 空状态 k-empty
   ═══════════════════════════════════════════════════════════════════════════ */
/* 列表：客户搜索结果、员工列表、交接事项
   <div class="k-list"><a class="k-row k-row--link" href="…"><span class="k-avatar">…</span>
     <span class="k-row__main"><span class="k-row__title" lang="ja">山本 隆</span><span class="k-row__sub">ヤマさん · 老客 · 存酒 2</span></span>
     <span class="k-row__end">…</span></a></div> */
.k-list{display:flex;flex-direction:column;background:var(--k-surface);border:var(--k-rule) solid var(--k-edge);border-radius:var(--k-r-card);overflow:hidden}
.k-row{display:flex;align-items:center;gap:var(--k-space-3);min-height:60px;padding:var(--k-space-3) var(--k-space-4);border-bottom:var(--k-rule) solid var(--k-line)}
.k-row:last-child{border-bottom:0}
a.k-row{transition:background-color var(--k-dur-1) var(--k-ease-out)}
a.k-row:hover{background:var(--k-surface-2)}
.k-row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.k-row__title{font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-row__sub{font-size:var(--k-fs-caption);color:var(--k-text-2);line-height:1.4}
.k-row__end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.k-row--link::after{content:"";flex:none;width:16px;height:16px;background:var(--k-line-ui);-webkit-mask:var(--k-icon-next) center/contain no-repeat;mask:var(--k-icon-next) center/contain no-repeat}
.k-row.is-selected{background:var(--k-accent-bg)}
mark.k-hl{background:var(--k-accent-bg);color:var(--k-accent-on);border-radius:var(--k-r-record);padding:0 2px}  /* 搜索命中字 */

/* 键值：<dl class="k-kv"><dt>开单</dt><dd>20:12 · 李 明</dd>…</dl>；--rows 每对一行带罫线 */
.k-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--k-space-2) var(--k-space-4);font-size:var(--k-fs-small)}
.k-kv dt{color:var(--k-text-2)}
.k-kv dd{text-align:right}
.k-kv--rows{gap:0}
.k-kv--rows dt,.k-kv--rows dd{padding:var(--k-space-2) 0;border-bottom:var(--k-rule) solid var(--k-line)}

/* 提示条：状态色只作左缘色条与图标，正文保持墨色（canon「強調は色面＋太字」）
   <div class="k-alert k-alert--check"><span class="k-icon k-icon--alert"></span><div><strong>存酒待核对</strong><p>#K-0198 響 棚A-5 现场未找到</p></div></div> */
.k-alert{
  --k-alert-mark:var(--k-line-ui);
  display:flex;align-items:flex-start;gap:var(--k-space-3);padding:var(--k-space-3) var(--k-space-4) var(--k-space-3) calc(var(--k-space-4) + var(--k-rule-status));
  background:var(--k-surface-2);color:var(--k-text);border-radius:var(--k-r-card);font-size:var(--k-fs-small);line-height:var(--k-lh-small);
  box-shadow:inset var(--k-rule-status) 0 0 var(--k-alert-mark);
}
.k-alert > .k-icon{margin-top:2px;color:var(--k-alert-mark)}
.k-alert strong{display:block;font-size:var(--k-fs-body)}
.k-alert p{color:var(--k-text-2)}
.k-alert--active{--k-alert-mark:var(--k-status-active);background:var(--k-status-active-bg)}
.k-alert--check{--k-alert-mark:var(--k-status-check);background:var(--k-status-check-bg)}
.k-alert--debt{--k-alert-mark:var(--k-status-debt);background:var(--k-status-debt-bg)}
.k-alert--settled{--k-alert-mark:var(--k-status-settled);background:var(--k-status-settled-bg)}
.k-alert--active > .k-icon{color:var(--k-status-active-text)}
.k-alert--check > .k-icon{color:var(--k-status-check-text)}
.k-alert--debt > .k-icon{color:var(--k-status-debt-text)}
.k-alert--settled > .k-icon{color:var(--k-status-settled-text)}

/* 空状态：明朝大字＋一句话＋最多一个操作；不用插画 */
.k-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--k-space-3);
  padding:var(--k-space-8) var(--k-space-4);border:var(--k-rule) dashed var(--k-line-strong);border-radius:var(--k-r-card);
}
.k-empty__mark{color:var(--k-gold-text)}
.k-empty__title{font-family:var(--k-font-display);font-size:var(--k-fs-h2);font-weight:600;line-height:1.35}
.k-empty__text{font-size:var(--k-fs-small);color:var(--k-text-2);max-width:28em}


/* ── 27 · 工具类（放在文件最后：与组件同时出现时工具类优先）────────────────────
   文字：k-muted 次级字 · k-gold 金字 · k-small · k-caption · k-strong
   k-stack 竖排；k-cluster 横排换行；k-spread 两端对齐；k-grid 等分栅格。
   列数用 style="--k-cols:3"（这是唯一允许的 style 写法）。 */
.k-stack{display:flex;flex-direction:column;gap:var(--k-space-4);min-width:0}
.k-stack--tight{gap:var(--k-space-2)}
.k-stack--loose{gap:var(--k-space-6)}
.k-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--k-space-2)}
.k-spread{display:flex;align-items:center;justify-content:space-between;gap:var(--k-space-3);min-width:0}
.k-grid{display:grid;grid-template-columns:repeat(var(--k-cols,2),minmax(0,1fr));gap:var(--k-space-4)}
.k-grid--tight{gap:var(--k-space-2)}
.k-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--k-min,280px)),1fr))}  /* 自动折行：每列最小 280px */
.k-grow{flex:1;min-width:0}
.k-right{text-align:right}
.k-nowrap{white-space:nowrap}
.k-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.k-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.k-rule{border:0;border-top:var(--k-rule) solid var(--k-line);margin:0}
.k-rule--gold{border-top-color:var(--k-gold)}       /* 区块分界 = 金线；行间 = 罫线；同一条边不会两种都有 */
.k-muted{color:var(--k-text-2)}
.k-gold{color:var(--k-gold-text)}
.k-small{font-size:var(--k-fs-small);line-height:var(--k-lh-small)}
.k-caption{font-size:var(--k-fs-caption);line-height:var(--k-lh-small);color:var(--k-text-2)}
.k-strong{font-weight:700}

/* ── 2026-10-15 补丁（协调者）：k-app__main 是定高可滚动的竖向 flex，
   自带 overflow 的直接子元素（k-guest-tabs / k-cats / k-list / k-table-wrap）
   在内容超出时会被压成 0 高；手机工人用 k-stack 包裹绕过，这里补根治。
   iPad 的 k-split__main / k-split__side 同款补丁在 ipad/ipad.css。 */
.k-app__main > * { flex-shrink: 0; }

/* ── 2026-10-15 品牌图标位：ALMA TOKYO 角色图标（矢量来源 ~/WorkDev/logo/design/alma-tokyo/，
   手册 p23 角色＋p34 品牌紫 #6E37C9；圆底规则见 p10）。夜主题顶栏用黑底只角色版，
   紙主题与「APP 图标」展示用浅灰底版。 */
.k-brandmark{display:inline-block;flex:none;width:var(--k-brandmark,32px);height:var(--k-brandmark,32px);border-radius:var(--k-r-pill);vertical-align:middle}
.k-brandmark--sm{--k-brandmark:28px}
.k-brandmark--lg{--k-brandmark:56px}
.k-brandmark--xl{--k-brandmark:96px}
.k-brandrow{display:flex;align-items:center;gap:var(--k-space-4);min-width:0}
.k-sidenav__brand{flex-direction:row;align-items:center;gap:var(--k-space-3)}
.k-sidenav__brandtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-brandrow>*{min-width:0}
.k-brandrow .k-display{overflow-wrap:anywhere}
@media (max-width:640px){.k-brandrow{flex-wrap:wrap;gap:var(--k-space-3)} .k-brandrow .k-brandmark--xl{--k-brandmark:72px}}