@charset "UTF-8";
/* ==========================================================================
   お食事処とくじん 多言語サイネージ ── 「アプリ」ではなく「品書き」
   対象機器：KEIYO AN-M036（27型 / 1080x1920 縦 第一設計 / 1920x1080 横も対応）

   デザインの約束（指揮書 2026-08-02 改訂版）
   - 第一の仕事は「美味しそう」、第二は「ちゃんとしたお店だ」という信頼。
   - 枠で区切らない。余白と、墨色10%の細い罫線だけで区切る。
   - 背景は灯りのともった生成り。文字は墨。青緑は食欲を下げるので
     食券番号と道しるべ（タブ・言語ボタン）だけに限定し、料理から遠ざける。
   - 朱色はほんの少し。「久高島の伝統食」のような添え書きにだけ（品書きの朱書き）。
   - 太字は一画面に一箇所まで。見出し・品名は明朝、本文は細いゴシック。
   - 視認性・タップ領域88px・下端操作・90秒復帰は現状維持（機能は触らない）。
   ========================================================================== */


/* --- 同梱フォント（SIL Open Font License / tools/build_font_subsets.py で生成） ---
   CDNは使わない。オフライン要件のため assets/fonts/ から読み込む。
   明朝400は価格用の数字・ラテンのみ。漢字を含む明朝テキストは 500/600 を使うこと。 */
@font-face{ font-family:"Zen Old Mincho"; font-weight:400; font-display:swap;
  src:url("../fonts/ZenOldMincho-400.woff2") format("woff2"); }
@font-face{ font-family:"Zen Old Mincho"; font-weight:500; font-display:swap;
  src:url("../fonts/ZenOldMincho-500.woff2") format("woff2"); }
@font-face{ font-family:"Zen Old Mincho"; font-weight:600; font-display:swap;
  src:url("../fonts/ZenOldMincho-600.woff2") format("woff2"); }
@font-face{ font-family:"Zen Kaku Gothic New"; font-weight:400; font-display:swap;
  src:url("../fonts/ZenKakuGothicNew-400.woff2") format("woff2"); }
/* タイトル専用の行書風筆文字。Google Fonts の Yuji Syuku（SIL OFL 1.1）から
   「お食事処とくじん」に必要な文字だけを4KBにサブセットして同梱。 */
@font-face{ font-family:"Yuji Syuku"; font-weight:400; font-display:swap;
  src:url("../fonts/YujiSyuku-Tokujin.woff2") format("woff2");
  unicode-range:U+304A,U+304F-3050,U+3057-3058,U+3068-3069,U+3093,U+3099,U+4E8B,U+51E6,U+98DF; }
@font-face{ font-family:"Noto Serif SC"; font-weight:500; font-display:swap;
  src:url("../fonts/NotoSerifSC-500.woff2") format("woff2"); }
@font-face{ font-family:"Noto Serif SC"; font-weight:600; font-display:swap;
  src:url("../fonts/NotoSerifSC-600.woff2") format("woff2"); }
@font-face{ font-family:"Noto Serif TC"; font-weight:500; font-display:swap;
  src:url("../fonts/NotoSerifTC-500.woff2") format("woff2"); }
@font-face{ font-family:"Noto Serif TC"; font-weight:600; font-display:swap;
  src:url("../fonts/NotoSerifTC-600.woff2") format("woff2"); }
@font-face{ font-family:"Noto Serif KR"; font-weight:500; font-display:swap;
  src:url("../fonts/NotoSerifKR-500.woff2") format("woff2"); }
@font-face{ font-family:"Noto Serif KR"; font-weight:600; font-display:swap;
  src:url("../fonts/NotoSerifKR-600.woff2") format("woff2"); }
@font-face{ font-family:"Noto Serif"; font-weight:400; font-display:swap;
  src:url("../fonts/NotoSerif-400.woff2") format("woff2"); }
@font-face{ font-family:"Noto Serif"; font-weight:500; font-display:swap;
  src:url("../fonts/NotoSerif-500.woff2") format("woff2"); }
@font-face{ font-family:"Noto Serif"; font-weight:600; font-display:swap;
  src:url("../fonts/NotoSerif-600.woff2") format("woff2"); }

:root{
  /* 紙と墨 */
  --paper:      #FBF7EC;                      /* 灯りのともった生成り */
  --paper-deep: #F5EEDD;                      /* わずかに深い生成り（待機画面の下地） */
  --ink:        #272B31;                      /* 墨 */
  --ink-mid:    #4A525C;                      /* 墨をうすめた本文色 */
  --ink-soft:   #656E78;                      /* 補足の文字 */

  /* 罫線（墨色10%前後） */
  --rule:        rgba(39,43,49,.13);
  --rule-strong: rgba(39,43,49,.32);

  /* 差し色：海の青緑（彩度は半分以下）。食券番号と道しるべにのみ使う */
  --sea:        #2F7A87;

  /* 朱書き（バッジの添え書きにのみ） */
  --shu:        #AE4B31;

  /* 写真から品書きへつなぐ、暖色の淡い光 */
  --glow:       #F9F2E0;

  --r: 2px;                                    /* 角はほぼ立てる */

  /* 指2本ぶん = 88px。基準フォント18.4px時 ≒ 4.8rem */
  --tap: 4.8rem;

  /* 書体：見出し・品名は明朝、本文は細いゴシック。
     機器に明朝が無い場合に備え、Step 5 でのフォント同梱を検討（チェックリスト2-8） */
  --serif: "Zen Old Mincho", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho",
           "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP",
           "Noto Sans CJK JP", "Yu Gothic Medium", "Yu Gothic", Meiryo,
           system-ui, sans-serif;
}

/* --- 言語ごとの書体（骨格の思想を各言語で通す） --------------------------- */
:lang(zh-Hans){ --serif:"Noto Serif SC","Noto Serif CJK SC","Songti SC",serif;
                --sans:"Noto Sans SC","Noto Sans CJK SC","PingFang SC",sans-serif; }
:lang(zh-Hant){ --serif:"Noto Serif TC","Noto Serif CJK TC","Songti TC",serif;
                --sans:"Noto Sans TC","Noto Sans CJK TC","PingFang TC",sans-serif; }
:lang(ko){      --serif:"Noto Serif KR","Noto Serif CJK KR","AppleMyungjo",serif;
                --sans:"Noto Sans KR","Noto Sans CJK KR","Apple SD Gothic Neo",sans-serif; }
/* ロシア語はキリルを持つ Noto Serif を先頭に（和文明朝の字送り混入を防ぐ） */
:lang(ru){      --serif:"Noto Serif","Zen Old Mincho",serif; }

/* --- スケーリング（現状維持） -------------------------------------------- */
html{ font-size: clamp(15px, 1.70vw, 30px); }
@media (orientation: landscape){
  html{ font-size: clamp(15px, 1.70vh, 30px); }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

[hidden]{ display:none !important; }

html,body{
  height:100%;
  overflow:hidden;
  background:var(--paper);
}

body{
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* タッチパネル：選択・長押しメニュー・ダブルタップ拡大を殺す（機能維持） */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  overscroll-behavior:none;
}

img{ display:block; max-width:100%; -webkit-user-drag:none; user-drag:none; pointer-events:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; touch-action:manipulation; }

.scroll{
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.scroll::-webkit-scrollbar{ width:0; height:0; }

/* ====================== 画面の切り替え（機能維持） ======================== */
#app{ position:fixed; inset:0; }
.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .42s ease;
}
.screen.is-active{ opacity:1; visibility:visible; }

/* ====================== 1. 待機画面 ====================================== */
#screen-idle{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 55%, var(--paper-deep) 100%);
  justify-content:flex-start;
  align-items:center;
  padding:4.2rem 2.4rem 2.6rem;
  gap:2rem;
}

.idle-brand{ text-align:center; flex:0 0 auto; }
.idle-brand .mark{
  display:inline-flex; color:var(--ink-soft); margin-bottom:1rem;
}
.idle-brand .mark svg{ width:2.6rem; height:2.6rem; }
.idle-brand h1{
  font-family:var(--serif);
  font-size:3.6rem; font-weight:600; letter-spacing:.08em; line-height:1.3;
  color:var(--ink);
}
.idle-brand .sub{
  margin-top:.6rem; font-size:.95rem; font-weight:400;
  letter-spacing:.34em; color:var(--ink-soft);
}
.idle-brand .place{
  margin-top:.6rem; font-size:1.15rem; color:var(--ink-mid);
  font-family:var(--serif); font-weight:500; letter-spacing:.06em;
}

/* 写真の帯：飾らず、写真そのものに働いてもらう */
.idle-strip{
  flex:0 0 auto; width:100vw;
  display:flex; flex-direction:column; gap:1rem;
  padding:.4rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.idle-row{ display:flex; width:max-content; gap:1rem; }
.idle-row.r1{ animation:driftL 64s linear infinite; }
.idle-row.r2{ animation:driftR 78s linear infinite; }
.idle-row img{
  width:11.8rem; height:11.8rem; object-fit:cover;
  border-radius:var(--r);
}
@keyframes driftL{ from{transform:translateX(0)}      to{transform:translateX(-50%)} }
@keyframes driftR{ from{transform:translateX(-50%)}   to{transform:translateX(0)} }
@media (prefers-reduced-motion: reduce){
  /* 店頭サイネージでは静止画と誤認されないよう、ゆっくり動かし続ける */
  .idle-row.r1{ animation-duration:128s; }
  .idle-row.r2{ animation-duration:156s; }
}

.idle-strip{
  cursor:pointer;
  touch-action:manipulation;
}
.idle-strip:focus-visible{
  outline:3px solid var(--sea);
  outline-offset:4px;
}
#screen-idle .lang-grid{ position:relative; z-index:2; }

.idle-prompt{ flex:0 0 auto; text-align:center; }
.idle-prompt .p1{
  font-family:var(--serif);
  font-size:1.85rem; font-weight:600; color:var(--ink); letter-spacing:.06em;
}
.idle-prompt .p2{
  margin-top:.5rem; font-size:1.02rem; color:var(--ink-soft);
  letter-spacing:.02em; line-height:1.8;
}
.idle-prompt .p2 span{ white-space:nowrap; }

/* 言語ボタン：塗りをやめ、文字＋細罫。タップ領域は88px以上を維持 */
.lang-grid{
  flex:0 1 auto;
  width:100%; max-width:56rem;
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.lang-btn{
  min-height:var(--tap); padding:1.2rem 1rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  background:transparent;
  border:1px solid var(--rule-strong);
  border-radius:var(--r);
  transition:background .12s ease;
}
.lang-btn .native{
  font-family:var(--serif);
  font-size:1.85rem; font-weight:500; color:var(--ink); line-height:1.3;
}
.lang-btn .roman{
  font-size:.82rem; font-weight:400; color:var(--ink-soft); letter-spacing:.22em;
}
.lang-btn .soon{
  margin-top:.3rem; font-size:.8rem; color:var(--ink-soft); letter-spacing:.1em;
}
.lang-btn.is-ja{ border-color:var(--sea); }
.lang-btn.is-ja .native{ color:var(--sea); }
.lang-btn:active{ background:rgba(39,43,49,.06); }
.lang-btn.wide{ grid-column:1 / -1; }

.idle-foot{
  flex:0 0 auto; text-align:center;
  font-size:.95rem; color:var(--ink-soft); line-height:1.75;
  padding-top:1.2rem;
  border-top:1px solid var(--rule);
  width:100%; max-width:56rem;
}

/* ====================== 2. 一覧画面 ====================================== */
#screen-list{ background:var(--paper); }

.list-head{
  flex:0 0 auto;
  padding:1.5rem 2rem 1.1rem;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex; align-items:baseline; gap:1.2rem;
}
.list-head .shop{
  font-family:var(--serif);
  font-size:1.7rem; font-weight:600; letter-spacing:.05em;
}
.list-head .hint{
  margin-left:auto; text-align:right;
  font-size:1rem; font-weight:400; color:var(--ink-soft);
  line-height:1.5;
}

.list-body{ flex:1 1 auto; padding:1.8rem 2rem 2.2rem; }

.cat-title{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif);
  font-size:1.9rem; font-weight:600; color:var(--ink); letter-spacing:.05em;
  padding-bottom:.8rem; margin-bottom:1.7rem;
  border-bottom:1px solid var(--rule-strong);
}
.cat-title .count{
  font-family:var(--sans);
  font-size:.95rem; font-weight:400; color:var(--ink-soft); letter-spacing:.05em;
}

/* 料理カード：カードをやめる。写真と品書きの一片 */
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1.8rem; }

.card{
  position:relative; display:flex; flex-direction:column;
  background:transparent;
  text-align:left;
  min-height:var(--tap);
  transition:opacity .12s ease;
}
.card:active{ opacity:.72; }

/* サムネイルは一回り大きく（4/3 → 正方形） */
.card .thumb{
  position:relative; width:100%; aspect-ratio:1/1;
  background:var(--paper-deep);
  border-radius:var(--r); overflow:hidden;
}
.card .thumb img{ width:100%; height:100%; object-fit:cover; }

/* 食券番号：紙の小さな貼り札。枠線・角丸・影は持たない */
.ticket{
  position:absolute; left:0; top:0;
  display:flex; align-items:baseline; gap:.5rem;
  background:var(--paper);
  padding:.35rem .85rem .3rem .8rem;
  border-radius:0 0 var(--r) 0;
}
.ticket .lb{ font-size:.7rem; color:var(--ink-soft); letter-spacing:.08em; }
.ticket .no{
  font-family:var(--serif);
  font-size:1.6rem; font-weight:600; color:var(--sea); line-height:1;
}
.ticket.is-empty .no{ color:var(--ink-soft); font-weight:400; }

.card .body{ padding:.9rem .1rem 0; display:flex; flex-direction:column; gap:.3rem; flex:1 1 auto; }
.card .name{
  font-family:var(--serif);
  font-size:1.65rem; font-weight:500; line-height:1.4; letter-spacing:.02em;
}
/* 従（意訳）：音訳の下に細ゴシックで小さく */
.card .name-sub{
  font-family:var(--sans);
  font-size:1rem; line-height:1.5; color:var(--ink-soft);
}

/* 朱書き：チップをやめ、品名に添える小さな朱色の文字 */
.card .badge{
  order:-1;
  font-size:.95rem; color:var(--shu); letter-spacing:.14em;
}
/* 価格：品名より控えめに、でも明瞭に */
.card .price{
  margin-top:auto; padding-top:.35rem;
  font-family:var(--serif);
  font-size:1.35rem; font-weight:400; color:var(--ink-mid);
  font-variant-numeric:tabular-nums;
}
.card .price.is-null{ font-size:1.05rem; color:var(--ink-soft); }

.card.is-soldout .thumb img{ filter:grayscale(1); opacity:.45; }
.card.is-soldout .name,.card.is-soldout .price{ color:var(--ink-soft); }
.soldout-band{
  position:absolute; left:0; right:0; top:42%;
  background:rgba(39,43,49,.78); color:var(--paper);
  font-size:1.4rem; font-weight:400; letter-spacing:.3em; text-indent:.3em;
  text-align:center; padding:.6rem 0;
}

/* 下部の操作バー：位置・寸法は維持、装いだけ品書きに */
.list-foot{
  flex:0 0 auto;
  background:var(--paper);
  border-top:1px solid var(--rule-strong);
  padding:.9rem 1.6rem 1.2rem;
  display:flex; flex-direction:column; gap:.7rem;
}
.foot-top{ display:flex; align-items:center; gap:1rem; }
.foot-top .note{ font-size:.95rem; color:var(--ink-soft); }

/* 言語切替：道しるべなので海の青緑を許す。塗りはしない */
.btn-lang{
  margin-left:auto;
  min-height:3.4rem; padding:.5rem 1.3rem;
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--rule-strong); border-radius:var(--r);
  background:transparent; color:var(--sea);
  font-size:1.1rem; font-weight:400;
}
.btn-lang svg{ width:1.35rem; height:1.35rem; }
.btn-lang:active{ background:rgba(39,43,49,.06); }

/* カテゴリタブ：塗りつぶしをやめ、選ばれたタブは太い下線だけで示す */
.cat-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.cat-tab{
  min-height:var(--tap); padding:.8rem .5rem .6rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  background:transparent; color:var(--ink-mid);
  border-bottom:3px solid transparent;
  font-family:var(--serif);
  font-size:1.35rem; font-weight:500; line-height:1.3; text-align:center;
  transition:background .12s ease;
}
.cat-tab + .cat-tab{ border-left:1px solid var(--rule); }
.cat-tab .n{
  font-family:var(--sans);
  font-size:.82rem; font-weight:400; color:var(--ink-soft);
}
.cat-tab[aria-selected="true"]{
  color:var(--ink);
  border-bottom-color:var(--sea);
}
.cat-tab:active{ background:rgba(39,43,49,.06); }

/* ====================== 3. 詳細画面 ====================================== */
#screen-detail{ background:var(--paper); }

/* 写真が主役：上端フルブリード */
.detail-body{ flex:1 1 auto; padding:0; }
.detail-inner{ display:flex; flex-direction:column; }

.detail-photo{
  position:relative;
  width:100%; max-width:none; margin:0;
  aspect-ratio:1/1;
  background:var(--paper-deep);
  border-radius:0; overflow:hidden;
}
.detail-photo img{ width:100%; height:100%; object-fit:cover; }
/* 写真の下端に暖色の淡い光を敷き、品書きへつなぐ */
.detail-photo::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg,
    rgba(249,242,224,0) 0%,
    rgba(249,242,224,.55) 55%,
    var(--glow) 96%);
  pointer-events:none;
}

.detail-info{
  position:relative;
  display:flex; flex-direction:column;
  margin-top:-2.6rem;
  padding:0 2.4rem 2rem;
  background:linear-gradient(180deg, var(--glow) 0%, var(--paper) 26%);
}

#d-badge-wrap:not(:empty){ display:flex; justify-content:center; padding-top:.4rem; }
.detail-badge{
  font-size:1.05rem; color:var(--shu); letter-spacing:.22em; text-indent:.22em;
}

.detail-name{
  font-family:var(--serif);
  font-size:3.1rem; font-weight:600; line-height:1.3; letter-spacing:.03em;
  text-align:center;
  margin-top:.3rem;
}
.detail-name-sub{
  font-family:var(--sans);
  font-size:1.3rem; line-height:1.6; color:var(--ink-soft);
  text-align:center; margin-top:.35rem;
}

.detail-price{
  text-align:center;
  font-family:var(--serif);
  font-size:1.8rem; font-weight:400; color:var(--ink-mid);
  font-variant-numeric:tabular-nums;
  margin-top:.6rem;
}
.detail-price.is-null{ font-size:1.15rem; color:var(--ink-soft); font-family:var(--sans); }

.detail-soldout{
  text-align:center; color:var(--paper); background:rgba(39,43,49,.78);
  border-radius:var(--r); padding:.7rem;
  font-size:1.4rem; letter-spacing:.3em; text-indent:.3em;
  margin-top:1.2rem;
}

/* 食券番号：囲みを捨て、番号そのものを紙面最大の活字にする */
.ticket-big{
  margin-top:1.6rem;
  padding:1.5rem 0 1.7rem;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  text-align:center;
  background:none; border-left:0; border-right:0; border-radius:0;
}
.ticket-big .lb{
  font-size:1.05rem; color:var(--sea); letter-spacing:.3em; text-indent:.3em;
}
.ticket-big .no{
  font-family:var(--serif);
  font-size:9.5rem; font-weight:600; line-height:1.05;
  color:var(--sea);
  margin:.2rem 0 .3rem;
  font-variant-numeric:tabular-nums;
}
.ticket-big.is-empty .no{
  font-size:4rem; font-weight:400; color:var(--ink-soft); margin:1rem 0 .9rem;
}
.ticket-big .help{ font-size:1.1rem; color:var(--ink-mid); line-height:1.7; }

/* 説明文：「美味しそう」の言葉が主役。やや大きめ、行間ゆったり */
.detail-desc{
  padding:1.7rem .2rem 0;
  font-size:1.5rem; font-weight:400; line-height:2.15;
  color:var(--ink-mid);
  letter-spacing:.01em;
}

.desc-pending{ color:var(--ink-soft); }
.desc-orig{
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--rule);
  font-size:1.1rem; line-height:1.95; color:var(--ink-soft);
}
.desc-orig-lb{
  display:inline-block; margin-right:.8rem;
  font-size:.85rem; color:var(--ink-soft); letter-spacing:.12em;
}

/* アレルギー：静かに、でも誠実に。罫線の下に一行 */
.detail-allergen{
  margin-top:1.7rem;
  padding:1.1rem .2rem 0;
  border-top:1px solid var(--rule);
  display:block;
  font-size:1.05rem; line-height:1.8; color:var(--ink-soft);
  background:none; border-left:0; border-right:0; border-bottom:0; border-radius:0;
}
.detail-allergen svg{ display:none; }

/* 下部の操作バー：文字＋細罫。位置・タップ領域は維持 */
.detail-foot{
  flex:0 0 auto; background:var(--paper);
  border-top:1px solid var(--rule-strong);
  padding:1rem 2rem 1.3rem;
  display:flex; flex-direction:column; gap:.8rem;
}
.audio-row{ display:flex; align-items:stretch; gap:.8rem; }
.btn-audio{
  flex:1 1 auto; min-height:var(--tap);
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  border:1px solid var(--rule-strong); border-radius:var(--r);
  background:transparent; color:var(--ink);
  font-family:var(--serif);
  font-size:1.6rem; font-weight:500; letter-spacing:.06em;
  transition:background .12s ease;
}
.btn-audio svg{ width:1.9rem; height:1.9rem; }
.btn-audio:active{ background:rgba(39,43,49,.06); }
.btn-audio.is-playing{ color:var(--sea); border-color:var(--sea); }
.btn-audio.is-pending{
  color:var(--ink-soft); border:1px dashed var(--rule-strong);
  font-family:var(--sans); font-size:1.2rem; font-weight:400;
}

.vol{ display:flex; gap:.5rem; flex:0 0 auto; }
.vol button{
  width:4.6rem; min-height:var(--tap);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:var(--r);
  background:transparent; color:var(--ink-soft);
}
.vol button svg{ width:2rem; height:2rem; }
.vol button:nth-child(1) svg{ width:1.5rem; height:1.5rem; }
.vol button:nth-child(2) svg{ width:1.75rem; height:1.75rem; }
.vol button[aria-pressed="true"]{ color:var(--sea); border-color:var(--sea); }
.vol button:active{ background:rgba(39,43,49,.06); }

.btn-close{
  width:100%; min-height:var(--tap);
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  border:1px solid var(--rule-strong); border-radius:var(--r);
  background:transparent; color:var(--ink);
  font-size:1.4rem; font-weight:400; letter-spacing:.04em;
  transition:background .12s ease;
}
.btn-close svg{ width:1.6rem; height:1.6rem; }
.btn-close:active{ background:rgba(39,43,49,.06); }

/* ====================== 言語シート ====================================== */
.sheet{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(39,43,49,.36);
  opacity:0; visibility:hidden; transition:opacity .28s ease;
}
.sheet.is-open{ opacity:1; visibility:visible; }
.sheet-card{
  width:100%; max-width:60rem;
  background:var(--paper);
  border-top:1px solid var(--rule-strong);
  border-radius:0;
  padding:2rem 2rem 2.2rem;
  transform:translateY(2rem); transition:transform .28s ease;
  display:flex; flex-direction:column; gap:1.4rem;
}
.sheet.is-open .sheet-card{ transform:translateY(0); }
.sheet-card h2{
  font-family:var(--serif);
  font-size:1.7rem; font-weight:600; text-align:center; letter-spacing:.06em;
}

/* ====================== 起動エラー ====================================== */
#boot-error{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center; padding:3rem;
  background:var(--paper);
}
#boot-error .box{
  max-width:44rem; text-align:center;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
  padding:2.4rem 1rem;
  -webkit-user-select:text; user-select:text;
}
#boot-error h2{
  font-family:var(--serif);
  font-size:1.8rem; font-weight:600; margin-bottom:1rem; color:var(--shu);
}
#boot-error p{ font-size:1.1rem; line-height:1.9; color:var(--ink-mid); }
#boot-error code{
  display:block; margin-top:1.2rem; padding-top:1rem;
  border-top:1px solid var(--rule);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1rem; color:var(--ink);
  word-break:break-all;
}

/* ====================== 横置き（1920x1080） ============================== */
@media (orientation: landscape){

  #screen-idle{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"brand langs" "strip langs";
    align-items:center; gap:1.6rem 3rem;
    padding:2.6rem 3.4rem;
  }
  .idle-brand{ grid-area:brand; align-self:end; text-align:left; }
  .idle-strip{ grid-area:strip; align-self:start; width:50vw; }
  .idle-row img{ width:9.4rem; height:9.4rem; }
  .idle-prompt{ display:none; }
  .lang-grid{ grid-area:langs; max-width:none; align-content:center; }
  .idle-foot{ display:none; }

  .grid{ grid-template-columns:repeat(4,1fr); gap:1.6rem 1.3rem; }
  .card .thumb{ aspect-ratio:4/3; }
  .card .name{ font-size:1.35rem; }
  .card .price{ font-size:1.15rem; }
  .list-head{ padding:1rem 2rem .8rem; }
  .list-body{ padding:1.2rem 2rem 1.4rem; }
  .cat-title{ font-size:1.5rem; margin-bottom:1.1rem; }
  .list-foot{ padding:.6rem 2rem .9rem; }
  .cat-tab{ min-height:4.4rem; font-size:1.2rem; }
  .btn-close{ width:auto; padding:0 2rem; }

  /* 横置きは左に写真、右に品書き。フルブリードは縦の主役 */
  .detail-body{ padding:2rem 3rem 1.4rem; }
  .detail-inner{
    display:grid; grid-template-columns:minmax(0,26rem) minmax(0,1fr);
    grid-template-areas:"photo info"; gap:2.4rem; align-items:start;
    max-width:74rem; margin:0 auto;
  }
  .detail-photo{ grid-area:photo; max-width:26rem; aspect-ratio:1/1; border-radius:var(--r); }
  .detail-photo::after{ display:none; }
  .detail-info{
    grid-area:info; margin-top:0; padding:0; background:none;
  }
  #d-badge-wrap:not(:empty){ justify-content:flex-start; }
  .detail-name{ text-align:left; font-size:2.7rem; }
  .detail-name-sub{ text-align:left; }
  .detail-price{ text-align:left; }
  .ticket-big .no{ font-size:6.6rem; }
  .detail-foot{ padding:.9rem 3rem 1.2rem; }
  .detail-foot .rows{ display:grid; grid-template-columns:1fr auto; gap:.9rem; align-items:stretch; }
}

@media (orientation: portrait){
  .detail-info{ gap:0; }
}

/* ====================== v9 上質化：久高島の海・真鍮・琉球漆器 ============ */
:root{
  --gold:#B39152;
  --gold-deep:#876A38;
  --gold-line:rgba(179,145,82,.38);
  --gold-wash:rgba(179,145,82,.075);
  --sea-soft:rgba(47,122,135,.09);
  --shu-soft:rgba(174,75,49,.09);
  --shadow-soft:0 10px 28px rgba(39,43,49,.09);
  --shadow-float:0 18px 46px rgba(39,43,49,.16);
  --r:8px;
}

body{
  background:
    radial-gradient(circle at 12% 8%, rgba(179,145,82,.07), transparent 28%),
    radial-gradient(circle at 88% 92%, rgba(47,122,135,.055), transparent 30%),
    var(--paper);
}

.icon-ink{ stroke:var(--ink); }
.icon-sea{ stroke:var(--sea); }
.icon-gold{ stroke:var(--gold); }
.icon-shu{ stroke:var(--shu); }

#screen-idle::after{
  content:'';
  position:absolute;
  inset:.72rem;
  border:1px solid var(--gold-line);
  border-radius:12px;
  pointer-events:none;
}

.idle-brand .mark{
  position:relative;
  margin-bottom:.7rem;
  color:var(--ink);
}
.idle-brand .mark::before{
  content:'';
  position:absolute;
  inset:12% -36%;
  background:radial-gradient(circle, rgba(179,145,82,.12), transparent 68%);
  pointer-events:none;
}
.idle-brand .mark svg.brand-emblem{ width:4.6rem; height:4.6rem; }
.idle-brand h1{ text-shadow:0 1px 0 rgba(255,255,255,.85); }
.idle-brand .sub{ color:var(--gold-deep); }
.idle-brand .place::before,
.idle-brand .place::after{
  content:'◆';
  display:inline-block;
  margin:0 .65em;
  color:var(--gold);
  font-size:.48em;
  vertical-align:middle;
}

.idle-row img{
  border:1px solid rgba(179,145,82,.24);
  box-shadow:0 7px 20px rgba(39,43,49,.10);
}

.lang-btn{
  position:relative;
  background:linear-gradient(145deg, rgba(255,255,255,.4), rgba(245,238,221,.34));
  border-color:rgba(39,43,49,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 5px 14px rgba(39,43,49,.035);
  overflow:hidden;
  transition:transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.lang-btn::after{
  content:'';
  position:absolute;
  left:18%; right:18%; bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.55;
}
.lang-btn.is-ja{
  border-color:rgba(47,122,135,.62);
  background:linear-gradient(145deg, rgba(47,122,135,.08), rgba(255,255,255,.34));
}
.lang-btn:active{
  transform:translateY(1px);
  background:var(--gold-wash);
  box-shadow:inset 0 1px 3px rgba(39,43,49,.08);
}
.lang-btn:focus-visible,
.card:focus-visible,
.btn-lang:focus-visible,
.cat-tab:focus-visible,
.btn-audio:focus-visible,
.btn-close:focus-visible,
.vol button:focus-visible{
  outline:3px solid rgba(47,122,135,.48);
  outline-offset:3px;
}

.list-head{
  align-items:center;
  background:linear-gradient(90deg, rgba(179,145,82,.07), transparent 36%, rgba(47,122,135,.035));
  border-bottom-color:var(--gold-line);
  box-shadow:0 5px 16px rgba(39,43,49,.045);
}
.list-brand{ display:flex; align-items:center; gap:.75rem; }
.list-emblem{ width:2.4rem; height:2.4rem; flex:0 0 auto; }
.list-head .shop{ letter-spacing:.075em; }

.cat-title{
  position:relative;
  border-bottom-color:var(--gold-line);
}
.cat-title::after{
  content:'';
  position:absolute;
  left:0; bottom:-1px;
  width:5.5rem; height:2px;
  background:linear-gradient(90deg, var(--shu), var(--gold), transparent);
}

.card{ transition:transform .14s ease, opacity .14s ease; }
.card:active{ transform:translateY(2px); opacity:.86; }
.card .thumb{
  border:1px solid var(--gold-line);
  box-shadow:var(--shadow-soft);
}
.card .thumb::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.34);
  border-radius:inherit;
  pointer-events:none;
}
.ticket{
  background:rgba(251,247,236,.94);
  border-right:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
  box-shadow:3px 4px 10px rgba(39,43,49,.06);
  backdrop-filter:blur(5px);
}
.ticket::before{
  content:'◆';
  color:var(--gold);
  font-size:.42rem;
  align-self:center;
}
.card .body{
  padding:.95rem .15rem .65rem;
  border-bottom:1px solid rgba(179,145,82,.22);
}
.card .price{ color:var(--gold-deep); }

.list-foot,
.detail-foot{
  border-top-color:var(--gold-line);
  box-shadow:0 -8px 22px rgba(39,43,49,.055);
}
.btn-lang,
.btn-audio,
.btn-close,
.vol button{
  background:linear-gradient(145deg, rgba(255,255,255,.5), rgba(245,238,221,.34));
  border-color:rgba(179,145,82,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}
.btn-lang .icon-lux,
.btn-audio .icon-lux,
.btn-close .icon-lux{ overflow:visible; }

.cat-tabs{ position:relative; }
.cat-tab{ position:relative; border-bottom-width:2px; }
.cat-tab[aria-selected="true"]{
  background:linear-gradient(180deg, transparent, var(--sea-soft));
  border-bottom-color:var(--sea);
}
.cat-tab[aria-selected="true"]::before{
  content:'◆';
  position:absolute;
  top:.28rem;
  color:var(--gold);
  font-family:var(--sans);
  font-size:.46rem;
}

.detail-photo{
  border-bottom:1px solid var(--gold-line);
  box-shadow:0 12px 34px rgba(39,43,49,.12);
}
.detail-info{
  background:
    linear-gradient(180deg, var(--glow) 0%, var(--paper) 24%),
    radial-gradient(circle at 50% 0, var(--gold-wash), transparent 42%);
}
.detail-name::after{
  content:'';
  display:block;
  width:4.2rem;
  height:1px;
  margin:.5rem auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.detail-price{ color:var(--gold-deep); }

.ticket-big{
  position:relative;
  padding:1.5rem 1rem 1.7rem;
  border-color:var(--gold-line);
  background:linear-gradient(90deg, transparent, var(--gold-wash) 18%, var(--gold-wash) 82%, transparent);
}
.ticket-big::before,
.ticket-big::after{
  content:'◆';
  position:absolute;
  top:-.46rem;
  padding:0 .55rem;
  background:var(--paper);
  color:var(--gold);
  font-size:.58rem;
}
.ticket-big::before{ left:1rem; }
.ticket-big::after{ right:1rem; }
.ticket-big .lb{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  color:var(--sea);
}
.ticket-icon{ width:1.75rem; height:1.25rem; }

.detail-allergen{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  border-top-color:var(--gold-line);
  background:linear-gradient(90deg, var(--shu-soft), transparent 58%);
  padding:1.1rem .9rem .9rem;
  border-radius:var(--r);
}
.detail-allergen svg.allergen-icon{
  display:block;
  width:2rem;
  height:2rem;
  flex:0 0 auto;
  margin-top:.05rem;
}

.btn-audio.is-playing{
  background:linear-gradient(145deg, rgba(47,122,135,.1), rgba(255,255,255,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 1px rgba(47,122,135,.08);
}
.vol button[aria-pressed="true"]{
  background:var(--sea-soft);
  box-shadow:inset 0 0 0 1px rgba(47,122,135,.14);
}

.sheet{
  background:rgba(26,31,35,.48);
  backdrop-filter:blur(8px);
}
.sheet-card{
  position:relative;
  border:1px solid var(--gold-line);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  background:
    radial-gradient(circle at 50% 0, rgba(179,145,82,.13), transparent 32%),
    var(--paper);
  box-shadow:var(--shadow-float);
}
.sheet-card::before{
  content:'';
  position:absolute;
  top:.5rem; left:18%; right:18%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.sheet-crest{ display:flex; justify-content:center; margin-bottom:-.8rem; }
.sheet-crest svg{ width:3.1rem; height:3.1rem; }
.sheet-card h2{ color:var(--ink); }

@media (orientation:landscape){
  #screen-idle::after{ inset:.55rem; }
  .idle-brand .mark svg.brand-emblem{ width:3.7rem; height:3.7rem; }
  .detail-photo{ border:1px solid var(--gold-line); box-shadow:var(--shadow-soft); }
  .detail-name::after{ margin-left:0; }
  .ticket-big .lb{ justify-content:flex-start; }
}

/* ====================== v10 筆文字の屋号と心地よい操作感 =================== */
.idle-brand h1{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  padding:.02em .42em .2em;
  color:#20252A;
  text-shadow:none;
}
.idle-brand h1 .title-kicker{
  display:block;
  margin:0 -.42em .15em 0;
  font-family:var(--serif);
  font-size:.29em;
  font-weight:600;
  line-height:1;
  letter-spacing:.42em;
  color:var(--gold-deep);
}
.idle-brand h1 .title-brush{
  display:block;
  font-family:"Yuji Syuku", var(--serif);
  font-size:1.2em;
  font-weight:400;
  line-height:1.08;
  letter-spacing:.055em;
  transform:rotate(-.18deg);
  transform-origin:center;
}
.idle-brand h1::after{
  content:'';
  position:absolute;
  left:8%; right:5%; bottom:.02em;
  height:.085em;
  background:linear-gradient(90deg, transparent 0, rgba(39,43,49,.5) 8%, rgba(39,43,49,.32) 72%, rgba(174,75,49,.58) 91%, transparent 100%);
  clip-path:polygon(0 44%, 8% 30%, 76% 35%, 96% 12%, 100% 52%, 88% 66%, 22% 59%, 4% 78%);
  transform:rotate(-.8deg);
  opacity:.72;
}
.list-head .shop.is-brush-title{
  font-family:"Yuji Syuku", var(--serif);
  font-size:1.38rem;
  font-weight:400;
  letter-spacing:.045em;
  transform:rotate(-.12deg);
  transform-origin:left center;
}

@media (orientation:landscape){
  .idle-brand h1{ padding-bottom:.14em; }
  .idle-brand h1 .title-brush{ font-size:1.12em; }
}

/* ====================== v17 手描き水彩の案内アイコン ==================== */
.watercolor-icon{
  display:block;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 .18rem .18rem rgba(39,43,49,.12));
}

.idle-brand .mark img.brand-emblem{
  width:8.2rem;
  height:8.2rem;
}

.list-emblem{
  width:3.7rem;
  height:3.7rem;
}

.irabu-emblem{
  filter:drop-shadow(0 .2rem .22rem rgba(39,43,49,.09));
}

.btn-lang img.icon-lux{
  width:2.55rem;
  height:2.55rem;
}

.ticket-icon{
  width:3rem;
  height:3rem;
}

.detail-allergen img.allergen-icon{
  display:block;
  width:3.4rem;
  height:3.4rem;
  flex:0 0 auto;
  margin-top:-.25rem;
}

.btn-audio img.icon-lux{
  width:3.2rem;
  height:3.2rem;
}

.btn-close img.icon-lux{
  width:3.5rem;
  height:3.5rem;
}

.vol button img.volume-icon{
  width:2.55rem;
  height:2.55rem;
  opacity:1;
  transform:none;
  transition:filter .14s ease;
}
.vol button{
  width:5.15rem;
  min-height:5.35rem;
  flex-direction:column;
  gap:.02rem;
  padding:.15rem .2rem .25rem;
}
.vol{
  display:grid;
  grid-template-columns:repeat(3, 5.15rem);
  grid-template-rows:auto auto;
  gap:.28rem .5rem;
  align-items:stretch;
}
.volume-group-label{
  grid-column:1 / -1;
  color:var(--ink);
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  line-height:1.15;
  letter-spacing:.18em;
  text-align:center;
}
.volume-level-label{
  display:block;
  min-height:1em;
  color:var(--ink-mid);
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
}
.vol button[aria-pressed="true"] img.volume-icon{
  filter:drop-shadow(0 .15rem .2rem rgba(47,122,135,.24));
}
.vol button[aria-pressed="true"] .volume-level-label{
  color:var(--sea);
}

.sheet-crest img{
  width:5.5rem;
  height:5.5rem;
}

@media (orientation:landscape){
  .idle-brand .mark img.brand-emblem{ width:6.2rem; height:6.2rem; }
}

@media (max-width:560px){
  .vol button{ width:4.55rem; }
  .vol{ grid-template-columns:repeat(3, 4.55rem); }
  .volume-level-label{ font-size:.66rem; }
}

/* Ingredient guidance: prose, not a safety badge or a complete allergen list. */
#d-allergen-text{ flex:1; min-width:0; overflow-wrap:anywhere; }
.dietary-info-symbol{ flex:0 0 1.65rem; width:1.65rem; height:1.65rem; border:1px solid var(--gold-line); border-radius:50%; text-align:center; font-family:Georgia,serif; font-style:italic; line-height:1.65rem; color:var(--sea); }

/* Small screens must be scrollable; never leave language controls below a fixed viewport. */
#screen-idle{ overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.scroll, #screen-idle{scrollbar-width:thin;scrollbar-color:#ac8a4d #eee8db;}
.scroll::-webkit-scrollbar, #screen-idle::-webkit-scrollbar{width:7px;height:7px;}
.scroll::-webkit-scrollbar-thumb, #screen-idle::-webkit-scrollbar-thumb{background:#ac8a4d;border-radius:8px;}
#scroll-guide{position:absolute;left:50%;transform:translateX(-50%);z-index:20;min-height:44px;max-width:90%;padding:8px 20px;border:1px solid #ac8a4d;border-radius:24px;background:#fffcf3;color:#334c43;font:600 15px/1.4 sans-serif;box-shadow:0 3px 12px #0002;cursor:pointer;white-space:nowrap;}
#scroll-guide[hidden]{display:none;}
#scroll-guide:focus-visible{outline:3px solid #287983;outline-offset:3px;}
@media (max-width:560px){
  #screen-idle{ padding:1.5rem 1.2rem 1rem; gap:1rem; touch-action:pan-y; }
  #screen-idle .idle-brand .mark{ margin-bottom:.35rem; }
  #screen-idle .idle-brand .mark img.brand-emblem{ width:4rem; height:4rem; }
  #screen-idle .idle-brand h1{ font-size:2.6rem; }
  #screen-idle .idle-brand .place{ font-size:.95rem; }
  #screen-idle .idle-row img{ width:6.5rem; height:6.5rem; }
  #screen-idle .idle-strip{ gap:.5rem; }
  #screen-idle .idle-prompt .p1{ font-size:1.3rem; }
  #screen-idle .idle-prompt .p2{ font-size:.85rem; }
  #screen-idle .lang-grid{ flex-shrink:0; gap:.55rem; }
  #screen-idle .lang-btn{ min-height:64px; padding:.5rem .3rem; }
  #screen-idle .lang-btn .native{ font-size:1.35rem; }
  #screen-idle .lang-btn .roman{ font-size:.7rem; letter-spacing:.08em; }
  #screen-idle .staff-controls{ position:static; align-self:flex-end; }
  .detail-foot{ padding:.6rem 1rem; }
  .detail-foot .rows{ display:flex; flex-direction:column; gap:.5rem; }
  .audio-row{ flex-direction:column; gap:.4rem; }
  .btn-audio{ width:100%; flex:none; min-height:52px; padding:.4rem .7rem; font-size:1.1rem; }
  .btn-audio img.icon-lux{ width:1.5rem; height:1.5rem; flex-shrink:0; }
  .vol{ width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.2rem .5rem; }
  .vol button{ width:100%; min-height:52px; }
  .vol img.volume-icon{ width:1.6rem; height:1.6rem; }
  .volume-group-label{ font-size:.85rem; }
  .btn-close{ min-height:52px; padding:.4rem; font-size:1.1rem; }
}
.dietary-section + .dietary-section{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--gold-line); }
.dietary-title{ font-family:var(--sans, sans-serif); font-size:1rem; line-height:1.6; color:var(--sea); font-weight:600; margin:0 0 .4rem; letter-spacing:.04em; }
.dietary-copy{ margin:0; line-height:1.85; font-size:1rem; }
.dietary-note{ margin:1.1rem 0 0; padding-top:.85rem; border-top:1px solid var(--gold-line); font-size:.85rem; line-height:1.8; }
@media (max-width:560px){
  .detail-allergen{ gap:.5rem; padding:1rem .7rem; }
  .detail-allergen img.allergen-icon{ width:1.6rem; height:1.6rem; }
}