/*
Theme Name: ひんだれたキッチンカー (Custom)
Description: スマホ・タブレット向けのUIを想定したポップなデザイン用CSS
Version: 1.0
Author: Your Name
*/

:root{
  --bg:        #FFF8E6; /* ほんのりクリーム（紙皿の色） */
  --surface:   #FFFFFF; /* カード/ボタン面 */
  --text:      #2F2F2F; /* 本文（可読性重視の濃いグレー） */
  --muted:     #6E6E6E; /* 補足テキスト */

  --accent:    #E54B4B; /* トマトレッド（食欲をそそる） */
  --accent-2:  #5BA25D; /* リーフグリーン（ピクニック） */
  --accent-3:  #7EC8E3; /* スカイブルー（爽やか） */
  --warn:      #D97800; /* 焼き色オレンジ（注意/強調） */
  --ok:        #3A8D4B; /* 合格/完了の緑 */

  --ring:      #2A73FF; /* フォーカスリング（WCAG意識） */
  --border:    #E7E2D9; /* うっすら枠線 */
  --card-shadow: 0 2px 10px rgba(0,0,0,.06);
  --font-scale: 1.2;
}

:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}


/* =■========================
   1. Reset & Base
   =■======================== */
*,
*::before,
*::after { margin:0; padding:0; box-sizing:border-box; }

html {
  /* 既定14pxの1.3倍 = 約18.2px */
  font-size: calc(14px * var(--font-scale));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "メイリオ", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { text-decoration:none; color: var(--accent); transition: opacity .2s; }
a:hover { opacity:.8; color: var(--accent-2); }

h1, h2, h3, h4, h5, h6 { font-weight:600; margin-bottom:.5em; color:#333; }
p { margin-bottom:1em; }
ul, ol { list-style:none; margin-bottom:1em; }

/* wrap */
#wrap{
  min-height:100vh;
  display:flex; flex-direction:column;
  font-size: calc(14px + 0.5vw);
  font-size: calc((14px + 0.5vw) * var(--font-scale)); 
  margin: 0 auto;
}

@media (max-width:480px){ #wrap{ font-size:14px; } }
@media (min-width:481px){ #wrap{ font-size:16px; } }


/* =■========================
   2. ヘッダー＆フッター
   =■======================== */
#site-header{
  background-color: var(--surface);
  border-bottom: 2px solid var(--border);
  padding:.5em 0; min-height:56px;
}
#site-header .header{
  position:relative; display:flex; align-items:center; justify-content:space-between; padding:0 1em;
}

.header-menu{ margin-right:.5em; }

/* ---- Header base ---- */
#site-header{
  position: sticky; top: 0; z-index: 1002; /* メニュー上に固定 */
  background: var(--surface);
  border-bottom: 2px solid var(--border);
}

/* ヘッダー左上のホームカード */
.app-home{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:8px 10px;
  border-radius:10px; text-decoration:none; color:inherit;
  -webkit-tap-highlight-color: transparent;
}
.app-home img{
  width:28px; height:28px; border-radius:6px; display:block;
}
.app-home__label{
  font-size:14px; font-weight:700; line-height:1;
}

/* タップ時の軽い押し下げ表現（任意） */
.app-home:active{ transform: translateY(1px); }

/* 画面が極小のときはラベル省略（任意） */
@media (max-width:360px){
  .app-home__label{ display:none; }
}


.header-menu{ margin-right:.5em; }

/* ハンバーガーボタン */
#hamburger-menu{
  -webkit-appearance:none; border:none; background:none; cursor:pointer; color:#666;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}
#hamburger-menu:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* ---- Dropdown panel（重なり防止の要）---- */
:root { --header-h: 56px; }
@media (min-width:481px){ 
:root { --header-h: 64px; } 
}

/* メニュー本体は “固定配置＋不透明背景” に */
#nav-menu{
  display:none;
  position: fixed; inset: calc(var(--header-h)) 0 auto 0; /* ヘッダー直下に全幅で展開 */
  z-index: 1001;
  width: 100%;
  background: rgba(255,255,255, .98); /* 下の文字が透けない */
  backdrop-filter: saturate(1.1) blur(4px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  border-radius: 0;
}
#nav-menu.open{ display:block; }

#nav-menu ul{ list-style:none; margin:0; padding:8px; }
#nav-menu li{ margin:6px 8px; }
#nav-menu li a{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:10px 12px;
  background:#fff;                     /* 各項目にも背景を付けて透け防止 */
  color:#333; text-decoration:none; border-radius:10px;
  border:1px solid var(--border);
  transition: background .15s, transform .05s;
}
#nav-menu li a:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#nav-menu li a:active{ transform: translateY(1px); }
#nav-menu li a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }


/* ---- Dim 背景（クリックガード & 視認性UP）---- */
/* :has() が使える環境では、メニュー開時に全画面の薄暗い覆いを出す */
.header-menu{ position: relative; }
.header-menu:has(#nav-menu.open)::before{
  content:""; position: fixed; inset:0; z-index: 1000;
  background: rgba(0,0,0,.25);
}

/* 画面がとても狭い時にメニューが長くなってもスクロール可 */
#nav-menu{ max-height: calc(100svh - var(--header-h)); overflow:auto; }

/* 既存の丸メニュー（小さなポップアップ）として使いたい場合は以下を上書き
   #nav-menu{ position:absolute; inset:auto 1em auto auto; width:240px; }
*/




/* ---- フッター ---- */
#site-footer{
  margin-top:auto;
  background: var(--surface);
  border-top: 2px solid var(--border);
  /* 下部固定ナビ分の余白を本文側に確保 */
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* 固定フッターナビ（全幅固定） */
#fixed-footer-menu{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1002;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 16px rgba(0,0,0,.06);
  padding: 6px 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* 3等分グリッド（左=営業／中=イベント／右=メニュー） */
#fixed-footer-menu ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#fixed-footer-menu li{ min-height:56px; }

/* ボタン（アイコン縦積み） */
#fixed-footer-menu a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:56px; padding:8px 0;
  border-radius:12px;
  -webkit-tap-highlight-color:transparent;
  text-decoration:none;
  color: var(--text);
  transition: background .15s, transform .05s;
}
#fixed-footer-menu a:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#fixed-footer-menu a:active{ transform: translateY(1px); }
#fixed-footer-menu a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

#fixed-footer-menu a img{ width:28px; height:28px; display:block; }
#fixed-footer-menu a .label{ font-size:.8rem; line-height:1; opacity:.9; }
@media (max-width:340px){ #fixed-footer-menu a .label{ display:none; } }

/* © 表示（メニュー外） */
#site-footer .footer-copy{
  text-align:center; font-size:.85rem; color:var(--muted);
  padding: 8px 0 4px;
}





/* =■========================
   3. コンテンツセクション
   =■======================== */
#content{
  width:100%; max-width:1200px; margin:0 auto; padding:1em;
}

.page-title{
  background:transparent; box-shadow:none; border-radius:0; padding:0; margin:8px 0 4px;
}

.page-title h1{
  display:inline-block; position:relative; margin:0; padding:2px 0 2px 10px;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  font-weight:700; color:var(--text); line-height:1.2;
}

.page-title h1::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}

.page-title + .sales-sort,
.page-title + *{ border-top:1px solid var(--border); padding-top:8px; margin-top:8px; }

/* 共通見出し（中央寄せ） */
#content h2, #content h3, #content h4, #content h5, #content h6{
  text-align:center; margin:.5em 0; line-height:1.2;
}

/* テキスト/画像 */
#content p{ margin-bottom:1em; line-height:1.6; font-size:1rem; }
#content img{ max-width:100%; height:auto; display:block; margin:0 auto; }

@media (max-width:480px){
  #content{ padding:.5em; }
  #content h1{ font-size:1.8rem; }
  #content p{ font-size:.95rem; }
}

/* ========= フォーム共通(統一) ========= */
#content form{ max-width:800px; margin:0 auto; text-align:left; }
#content form p{ margin:10px 0 14px; }
#content form label{ display:block; margin-bottom:6px; font-weight:700; color:var(--text); }

#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="url"],
#content input[type="time"],
#content input[type="date"],
#content select,
#content textarea{
  width:100%; padding:10px 12px; min-height:44px;
  font-size:1rem; line-height:1.4; box-sizing:border-box;
  border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text);
}
#content textarea{ min-height:120px; resize:vertical; }

#content input[type="submit"],
#content button,
#content button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 16px; margin:1em auto 0;
  border-radius:10px; cursor:pointer; border:1px solid var(--border);
  background: var(--accent); color:#fff; font-weight:800;
  transition: background .15s, transform .05s;
}
#content input[type="submit"]:hover,
#content button:hover{ background: var(--accent-2); }
#content input[type="submit"]:active,
#content button:active{ transform: translateY(1px); }

/* メッセージ/区切りの統一 */
#content .error,
#content .success{
  margin:8px auto 12px; padding:10px 12px; border-radius:10px;
  max-width:760px; border:1px solid var(--border); background:var(--surface);
}
#content .error{ border-color:#e2a6a6; background:#fff1f1; color:#8b1f1f; line-height:1.6; }
#content .success{ border-color:#8fd38f; background:#ecf9ec; color:#165c16; text-align:center; }

#content .updated{
  max-width:860px; margin:10px auto; padding:10px 12px;
  background: color-mix(in srgb, var(--accent-3) 20%, var(--surface));
  border:1px solid var(--border); border-radius:10px;
}
#content .updated a{ color:var(--accent); text-decoration:underline; }

#content hr{ border:0; border-top:1px solid var(--border); margin:16px auto; max-width:760px; }
#content small{ display:block; margin-top:.3em; font-size:.9rem; color:var(--muted); }
#content :focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }




/* ===== Single Menu：メイン画像下サムネイル（スマホ3枚固定） ===== */
.menu-product{
  max-width: 900px;
  margin: 0 auto 16px;
}

/* メイン画像（体裁） */
.menu-product .menu-photo{
  text-align: center;
}
.menu-product #mainMenuPhoto,
.menu-product .menu-photo .menu-thumb{
  display: block;
  width: min(90%, 720px);
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  background: #fff;
}

/* サムネイル：スマホは3列固定、タップしやすい大きさ */
.menu-product .menu-thumbnails{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← 常に3枚並び（スマホ） */
  gap: 10px;
  justify-items: center;
  align-items: center;
  margin-top: 10px;
  padding: 6px 4px;
}

/* 端末が広くなったら段数を増やす（任意） */
@media (min-width: 560px){
  .menu-product .menu-thumbnails{ grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 900px){
  .menu-product .menu-thumbnails{ grid-template-columns: repeat(6, 1fr); }
}

/* 個々のサムネイル（正方形・44px以上を確保） */
.menu-product .menu-thumb-thumbnail{
  width: 100%;
  max-width: 120px;           /* 大きくなりすぎ防止 */
  aspect-ratio: 1 / 1;        /* 常に正方形 */
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  /* PHPで inline border が付与されていてもOK、統一したい場合は↓ */
  /* border: 1px solid var(--border) !important; */
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding: 4px;               /* 白縁で視認性UP */
  min-width: 44px;            /* タップ面積の下限 */
  min-height: 44px;           /* タップ面積の下限 */
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease-out, box-shadow .12s ease, outline-color .12s ease;
  cursor: pointer;
}

/* ホバー/フォーカス/アクティブ */
.menu-product .menu-thumb-thumbnail:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
.menu-product .menu-thumb-thumbnail:active{
  transform: translateY(0);
}
/* 選択中のサムネ（少し暗く＋内側影→凹み感） */
.menu-thumb-thumbnail.is-active,
.menu-thumb-thumbnail[aria-current="true"]{
  filter: brightness(0.9) saturate(0.95);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.18),
    0 0 0 2px var(--accent),
    0 3px 10px rgba(0,0,0,.10);
  transform: translateY(0); /* 押し込みでフラットに */
}

/* 選択中はホバーで浮かせない（状態がぶれないように） */
.menu-thumb-thumbnail.is-active:hover,
.menu-thumb-thumbnail[aria-current="true"]:hover{
  transform: none;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.18),
    0 0 0 2px var(--accent),
    0 3px 10px rgba(0,0,0,.10);
}



/* =========================
   トップページ
   ========================= */
.sales-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding:12px;
}
@media (min-width:600px){ .sales-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:900px){ .sales-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.sales-item-link{
  display:block; text-decoration:none; background:var(--surface);
  border:1px solid var(--border); border-radius:16px; padding:12px; box-shadow:var(--card-shadow);
  min-height:120px;
}
.sales-item-link:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

.sales-card{ display:grid; grid-template-rows:auto auto; justify-items:center; align-items:center; row-gap:8px; }
.sales-logo{ width:88px; height:88px; border-radius:50%; object-fit:cover; display:block; }
.sales-logo.fallback{
  background:var(--accent-3); color:#000; font-weight:700; font-size:1.1rem; line-height:88px; text-align:center;
}
.sales-name{
  color:var(--text); text-align:center; font-size:.95rem; max-width:90%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* アクション付きタイトル */
.page-title.with-actions{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; margin:8px 0 4px;
}
.page-title.with-actions .page-actions{ display:inline-flex; gap:6px; }
.page-title.with-actions .page-actions button{
  padding:6px 10px; font-size:.9rem; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); color:var(--text);
}
.page-title.with-actions .page-actions button[aria-pressed="true"]{
  border-color:var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* =========================
   Event Single（本文系）
   ========================= */
.article .page-title h1,
.page-title h1.event-title{ /* 既存テンプレ互換のため残置（実体は共通スタイル） */ }

.menu-post-date{
  display:flex; justify-content:flex-end; gap:.75em;
  font-size:.9rem; line-height:1.4; color:var(--muted);
  margin:4px 0 10px; border-bottom:1px solid var(--border); padding-bottom:8px;
}
.menu-post-date a{ color:var(--accent); }

.event-memo{
  font-size: clamp(1rem, .95rem + .4vw, 1.05rem);
  line-height:1.8; word-break:break-word; margin:12px 0 16px;
}

.event-details{
  display:grid; grid-template-columns:max-content 1fr; gap:10px 12px; align-items:start;
  margin:6px 0 18px; font-size:1rem; line-height:1.7;
}
.event-details p{ margin:0; display:contents; }
.event-details p strong{ grid-column:1; min-width:72px; color:var(--muted); font-weight:700; }
.event-details p strong + *{ grid-column:2; }

article h2{
  margin:14px 0 8px; padding-bottom:6px; font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem);
  font-weight:700; color:var(--text); text-align:left; border-bottom:1px solid var(--border);
}

.other-events{ margin-top:18px; }
.other-events h2{ text-align:left; }
.other-event-list{
  list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px;
}
.other-event-list li a{ color:var(--accent); text-decoration:none; }
.other-event-list li a:hover{ text-decoration:underline; }

/* シェア */
.share-section{ margin:18px 0 8px; padding-top:10px; border-top:1px solid var(--border); }
.share-label{ display:block; font-size:.95rem; color:var(--muted); margin-bottom:8px; }
.share-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0; }
.share-button{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:6px 10px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface);
  transition: background .15s, transform .05s;
}
.share-button:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
.share-button:active{ transform: scale(.98); }
.share-button img{ width:20px; height:20px; display:block; }

/* =========================
   Single Kitchen Car
   ========================= */
.store-header{ text-align:center; margin-bottom:1em; }
.store-header .store-title{ font-size:2rem; margin:.5em 0; }
.store-header h2{ text-align:center; font-size:1.5rem; margin:.5em 0; }
.sales-active-area{ text-align:left; margin-top:1em; font-size:.9rem; color:#555; }
.sales-active-area p{ margin:.3em 0; }
.store-main{ display:flex; flex-direction:column; gap:1.5em; }
.store-thumbnail{ text-align:center; }
.store-thumbnail img{ max-width:100%; height:auto; display:inline-block; }
.store-details{ text-align:left; }
.store-details h2{ text-align:center; font-size:1.5rem; margin:1em 0; }
.store-details p{ margin:.5em 0; font-size:1rem; }

/* =========================
   Sales Start Page
   ========================= */
.sales-end-setting h3,
.sales-location-section h3{
  text-align:left; margin:10px 0 6px; padding-bottom:6px; font-weight:700;
  font-size:clamp(1.0rem, .95rem + .4vw, 1.1rem); color:var(--text); border-bottom:1px solid var(--border);
}
p.sales-date{ text-align:right; font-size:.95rem; color:var(--muted); margin:4px 0 8px; }

.sales-control{
  position:sticky; bottom:12px; z-index:20;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  margin:8px 0 12px; padding:10px 12px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: saturate(1.1) blur(4px);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--card-shadow);
}
#sales-state{ font-weight:800; color:var(--text); font-size:1.05rem; }
#sales-state::before{
  content:""; display:inline-block; width:10px; height:10px; border-radius:50%;
  margin-right:8px; translate:0 1px; background: color-mix(in srgb, var(--muted) 60%, transparent);
}
body:has(#sales-button.active) #sales-state::before{ background:var(--ok); }

#sales-button{
  min-width:56vw; min-height:56px; padding:10px 16px; border:none; border-radius:999px;
  font-size:clamp(1.05rem, 1rem + .6vw, 1.25rem); font-weight:900; letter-spacing:.02em;
  color:#fff; cursor:pointer; background:var(--accent);
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  transition: background .15s, transform .05s, opacity .15s;
}
#sales-button:hover{ transform: translateY(.5px); }
#sales-button:active{ transform: translateY(1px); }
#sales-button[disabled], #sales-button.is-disabled{ opacity:.5; cursor:not-allowed; }
#sales-button.active{ background:#d84a4a; }
#sales-button.active:hover{ background:#bf3f3f; }
#sales-button-hint{ grid-column:1/-1; color:var(--muted)!important; font-size:.9rem!important; margin:4px 0 0!important; }

.sales-end-setting,
.sales-location-section{
  margin:8px 0 14px; padding:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--card-shadow);
}
.sales-end-setting input[type="time"],
.sales-location-section input[type="text"],
.sales-location-section input[type="url"],
.sales-location-section textarea{
  width:100%; padding:10px 12px; min-height:44px; font-size:1rem; line-height:1.4;
  border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text);
}
.sales-location-section textarea{ min-height:120px; resize:vertical; }

.sales-end-setting button,
.sales-location-section button,
.sales-location-section a#get-current-location{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:8px 14px; margin:6px 6px 0 0;
  border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-weight:800; text-decoration:none;
  transition: background .15s, transform .05s;
}
.sales-end-setting button:hover,
.sales-location-section button:hover,
.sales-location-section a#get-current-location:hover{
  background: color-mix(in srgb, var(--accent-3) 12%, var(--surface));
}
.sales-end-setting button:active,
.sales-location-section button:active,
.sales-location-section a#get-current-location:active{ transform: translateY(1px); }

#save-location{ border-color:transparent; background:var(--accent); color:#fff; }
#save-location:hover{ background:var(--accent-2); }

#display-endtime{
  margin-top:8px; display:inline-block; padding:6px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--accent-3) 14%, var(--surface));
  border:1px solid var(--border); font-variant-numeric:tabular-nums; color:var(--text);
}
#countdown{
  display:inline-block; margin-left:8px; padding:6px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  border:1px solid var(--border); font-weight:800; font-variant-numeric:tabular-nums; color:#7a3b00;
}
#kcpm-diag-line{ font-size:.9rem; color:var(--muted); word-break:break-word; }

@media (max-width:480px){
  #content{ padding-bottom:18svh; }
  .sales-control{ grid-template-columns:1fr; }
  #sales-button{ min-width:100%; }
}
@media (prefers-reduced-motion:reduce){
  #sales-button, .sales-control,
  .sales-end-setting button, .sales-location-section button,
  .sales-location-section a#get-current-location{ transition:none!important; }
}

/* =========================
   MyPage（表示側）
   ========================= */
.page-title h1::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}
.kc-photo-display,
.kc-logo-display,
.kc-info-display,
.store-notice,
.account-deletion{
  max-width:860px; margin:10px auto; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
.kc-photo-display h2,
.kc-logo-display h2,
.kc-info-display h2,
.store-notice h2,
.account-deletion h2{
  margin:4px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border);
  font-weight:700; font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem); color:var(--text);
}

/* 統一 photo-gallery（grid 版） */
.photo-gallery{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
}
@media (min-width:600px){ .photo-gallery{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.photo-gallery img{
  width:100%; height:auto; display:block; border:1px solid var(--border);
  border-radius:10px; background:#fff; padding:4px;
}
.photo-item img{ width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:10px; background:#fff; padding:4px; }
.photo-item p{ margin:6px 0 0; text-align:center; }
.photo-item a{ color:var(--accent); }

.kc-logo-display .kc-logo,
.kc-logo-display img{
  display:block; margin:0 auto; max-width:180px; height:auto;
  border:1px solid var(--border); border-radius:12px; background:#fff; padding:6px;
}
.kc-info-display p{
  margin:8px 0; display:grid; grid-template-columns:max-content 1fr; gap:6px 10px;
  line-height:1.8; font-size:1rem;
}
.kc-info-display p strong{ color:var(--muted); min-width:7.5em; font-weight:700; }

.store-notice ul{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px; }
.store-notice li a{ color:var(--accent); text-decoration:none; }
.store-notice li a:hover{ text-decoration:underline; }
.store-notice p{ text-align:center; color:var(--muted); }

.account-deletion p{ line-height:1.8; color:var(--text); }
#show-delete-form,
#cancel-delete-form,
#delete-form-container input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 14px; margin:6px 6px 0 0;
  border-radius:10px; cursor:pointer; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-weight:800;
  transition: background .15s, transform .05s;
}
#delete-form-container input[type="submit"]{ background:var(--accent); color:#fff; border-color:transparent; }
#show-delete-form:hover, #cancel-delete-form:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#delete-form-container input[type="submit"]:hover{ background:var(--accent-2); }
#show-delete-form:active, #cancel-delete-form:active, #delete-form-container input[type="submit"]:active{ transform: translateY(1px); }

@media (max-width:480px){
  .kc-photo-display, .kc-logo-display, .kc-info-display, .store-notice, .account-deletion{
    padding:10px 12px; border-radius:10px;
  }
  .kc-info-display p{ grid-template-columns:1fr; }
}

/* =========================
   プロフィール編集
   ========================= */
.page-title{ margin:8px 0 6px; padding:0; }
.page-title h1{
  position:relative; padding:2px 0 2px 10px; margin:0; font-weight:700; line-height:1.25; color:var(--text);
  font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem);
}
.page-title h1::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}

#content fieldset{
  max-width:860px; margin:10px auto; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
#content fieldset legend{
  padding:0 6px 6px; margin:0 0 8px; font-weight:800; color:var(--text);
  border-bottom:1px solid var(--border);
  font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem);
}

#content p:has(input[type="checkbox"]){
  display:grid; gap:8px 12px; grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:560px){ #content p:has(input[type="checkbox"]){ grid-template-columns:repeat(3, minmax(0,1fr)); } }
#content p:has(input[type="checkbox"]) label{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
#content input[type="checkbox"]{ width:18px; height:18px; }

@media (max-width:480px){ #content fieldset{ padding:10px 12px; border-radius:10px; } }

/* =========================
   メニュー投稿ページ
   ========================= */
#content form:has(#menu_title, #menu_price){
  max-width:760px; margin:8px auto 24px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
#menu_price{ font-variant-numeric:tabular-nums; }
#menu_genre{ background:#fff; }



#uploadContainer{
  margin:6px 0 12px; border:1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  border-radius:12px; background: color-mix(in srgb, var(--accent-3) 6%, var(--surface)); padding:10px;
}

.upload-container fieldset{ border:1px solid #ddd; padding:12px; border-radius:8px }
.upload-group{ display:flex; align-items:center; gap:8px; margin:.5rem 0 }
.upload-group label{ min-width:4.5em }
.file-name-display{ font-size:.9em; color:#333 }



#addPhoto{
  display:block; width:100%; margin:8px 0 4px; padding:12px 16px; min-height:48px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface);
  color:var(--text); font-weight:800; cursor:pointer; transition: background .15s, transform .05s;
}

#addPhoto::before{ content:"＋ 写真を追加"; }
#addPhoto:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#addPhoto:active{ transform: translateY(1px); }

.current-images{
  margin:8px 0 12px; display:grid; gap:10px; grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (min-width:640px){ .current-images{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.current-image{
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:6px; text-align:center;
}
.current-image img{ width:100%; height:auto; display:block; border-radius:6px; margin-bottom:6px; }
.current-image a{
  display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 10px; font-size:.95rem;
  border:1px solid var(--border); border-radius:999px;
  background: color-mix(in srgb, var(--accent-3) 10%, var(--surface)); color:var(--text);
}

#content form p:has(input[name="update_menu"]){
  display:grid; gap:10px; grid-template-columns:1fr;
}
@media (min-width:560px){
  #content form p:has(input[name="update_menu"]){ grid-template-columns:1fr 1fr; }
}
#content form input[name="delete_menu"]{
  border:none; border-radius:12px; min-height:48px; font-weight:800; color:#fff;
  background:#d84a4a; transition: background .15s, transform .05s;
}
#content form input[name="delete_menu"]:hover{ background:#bf3f3f; }
#content form input[name="delete_menu"]:active{ transform: translateY(1px); }

/* サムネイル（新メニュー投稿プレビュー用） */
.menu-thumbnail{ text-align:center; margin-top:1em; }
.menu-thumbnail img{
  max-width:150px; max-height:150px; border:1px solid var(--border);
  padding:.3em; display:inline-block; border-radius:6px; background:#fff;
}

/* =========================
   Event Create / Edit
   ========================= */
#event-form, #edit-event-form{
  max-width:760px; margin:8px auto 24px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
#event-form p, #edit-event-form p{ margin:10px 0 14px; }
#event-form label, #edit-event-form label{ display:block; font-weight:700; color:var(--text); margin-bottom:6px; }

#event-form fieldset, #edit-event-form fieldset{
  border:1px solid var(--border); border-radius:12px; padding:12px; margin:12px 0 16px;
  background: color-mix(in srgb, var(--accent-3) 6%, var(--surface));
}
#event-form legend, #edit-event-form legend{ font-weight:800; font-size:.95rem; color:var(--text); padding:0 8px; }

#event-dates-wrapper p{ margin:8px 0; }

#add-event-date{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px; min-height:44px; border:1px solid var(--border); border-radius:999px;
  background:var(--surface); color:var(--text); font-size:.95rem; cursor:pointer;
  transition: background .15s, transform .05s;
}
#add-event-date::before{ content:"＋"; font-weight:800; }
#add-event-date:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#add-event-date:active{ transform: scale(.98); }

#event-form input[type="submit"], #edit-event-form input[name="update_event"]{
  display:block; width:100%; padding:12px 16px; min-height:48px; font-size:1rem; font-weight:800; letter-spacing:.02em;
  border:none; border-radius:12px; background:var(--accent); color:#fff; cursor:pointer;
  transition: background .15s, transform .05s;
}
#event-form input[type="submit"]:hover, #edit-event-form input[name="update_event"]:hover{ background:var(--accent-2); }
#event-form input[type="submit"]:active, #edit-event-form input[name="update_event"]:active{ transform: translateY(1px); }

#edit-event-form p:has(input[name="update_event"]){
  display:grid; gap:10px; grid-template-columns:1fr;
}
@media (min-width:560px){
  #edit-event-form p:has(input[name="update_event"]){ grid-template-columns:1fr 1fr; }
}
#edit-event-form input[name="delete_event"]{
  border:none; border-radius:12px; min-height:48px; font-weight:800; color:#fff; background:#d84a4a;
  transition: background .15s, transform .05s;
}
#edit-event-form input[name="delete_event"]:hover{ background:#bf3f3f; }
#edit-event-form input[name="delete_event"]:active{ transform: translateY(1px); }

@media (max-width:480px){
  #event-form, #edit-event-form{ padding:12px; border-radius:10px; }
  #add-event-date{ width:100%; }
}

/* =========================
   Auth（Login & Registration）
   ========================= */
#content form:has(input[name="login_submit"]),
#content form#reg_form{
  max-width:760px; margin:8px auto 24px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
#content form:has(input[name="login_submit"]) p,
#content form#reg_form p{ margin:10px 0 14px; }
#content form:has(input[name="login_submit"]) label,
#content form#reg_form label{ display:block; font-weight:700; color:var(--text); margin-bottom:6px; }
#content form#reg_form textarea{ min-height:120px; resize:vertical; }
#content form:has(input[name="login_submit"]) input:focus-visible,
#content form#reg_form :is(input,select,textarea):focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
#content #login_remember{ width:18px; height:18px; vertical-align:middle; }
#content label[for="login_remember"]{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }
#content .cf-turnstile{ margin:4px 0 10px; }

#content form:has(input[name="login_submit"]) input[type="submit"],
#content form#reg_form input[type="submit"]{
  display:block; width:100%; padding:12px 16px; min-height:48px;
  font-size:1rem; font-weight:800; letter-spacing:.02em; border:none; border-radius:12px;
  background:var(--accent); color:#fff; cursor:pointer; transition: background .15s, transform .05s;
}
#content form:has(input[name="login_submit"]) input[type="submit"]:hover,
#content form#reg_form input[type="submit"]:hover{ background:var(--accent-2); }
#content form:has(input[name="login_submit"]) input[type="submit"]:active,
#content form#reg_form input[type="submit"]:active{ transform: translateY(1px); }

@media (min-width:560px){
  #content form#reg_form p:has(input[type="checkbox"]){ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:480px){
  #content form:has(input[name="login_submit"]), #content form#reg_form{ padding:12px; border-radius:10px; }
}
#username-msg{ margin-top:6px; font-size:.95rem; }

/* =========================
   QR Page
   ========================= */
.qr-page .page-title h1, .page-title h1{ /* 既存との互換のため保持（内容は共通） */ }
.page-title h1::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}
/* セカンド見出しはページ内に限定して下線 */
.qr-content h2{
  margin:10px 0 8px; padding-bottom:6px;
  font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem);
  font-weight:700; color:var(--text); border-bottom:1px solid var(--border);
}

.qr-content{
  margin:8px auto 16px; padding:8px; display:grid; place-items:center;
  min-height: calc(100svh - 180px);
}
.qr-frame{
  background:#fff; padding:10px; border-radius:8px; box-shadow:var(--card-shadow);
}
.qr-content img{
  display:block; width:min(88vw, 520px); height:auto; image-rendering:auto;
}
.qr-caption{
  margin-top:10px; text-align:center; color:var(--muted);
  font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
}
.qr-overlay{ display:none; }
.qr-content.is-overlay .qr-overlay{
  display:block; position:absolute; inset:0; display:grid; place-items:center;
}
.qr-content.is-overlay .qr-overlay-inner{
  background:rgba(255,255,255,.85); padding:16px 18px; border-radius:10px; color:#000;
  text-align:center; font-weight:700; max-width:90%;
}
.qr-content :focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

@media print{
  .page-title, #site-header, #site-footer{ display:none !important; }
  .qr-content{ min-height:auto; margin:0; padding:0; }
  .qr-frame{ box-shadow:none; padding:12mm; }
  .qr-content img{ width:120mm; }
}

/* =========================
   About（サイトについて）
   ========================= */
.about .page-title h1, .page-title h1{ /* 互換保持 */ }
.about-content{
  max-width:800px; margin:0 auto; padding:16px 20px; line-height:1.8;
}
.about-content h2{
  font-size:clamp(1.15rem, 1.05rem + .7vw, 1.5rem);
  font-weight:700; color:var(--text); border-bottom:1px solid var(--border);
  padding-bottom:8px; margin:12px 0 12px;
}
.about-content h3{
  font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem);
  color:var(--text); margin:10px 0 8px; font-weight:700;
}
.catch-copy{
  background: color-mix(in srgb, var(--accent-3) 12%, var(--surface));
  color:var(--text); font-weight:700; padding:10px 12px; border-radius:12px; text-align:center; margin:14px 0 16px;
}
.features ul, .recommend ul{ list-style:disc outside; margin:8px 0 16px 1.25em; padding:0; }
.features li, .recommend li{ margin-bottom:10px; line-height:1.8; }
.features li strong{ font-weight:700; }
@media (max-width:768px){ .about-content{ padding:12px; } }
.about-content :focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* =========================
   Store Notice（置き換え版・統一）
   ========================= */
.store-notice{
  max-width:860px; margin:14px auto 16px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--card-shadow);
}
.store-notice h2{
  margin:4px 0 10px; padding-bottom:6px; font-weight:700;
  font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem); color:var(--text);
  text-align:left; border-bottom:1px solid var(--border);
}
.store-notice ul{
  list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px;
}
.store-notice li a{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  color:var(--text); text-decoration:none; transition: background .15s, transform .05s; overflow:hidden;
}
.store-notice li a::before{
  content:""; flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--accent); translate:0 .5px; opacity:.9;
}
.store-notice li a{ white-space:nowrap; text-overflow:ellipsis; }
.store-notice li a > *{ min-width:0; }
.store-notice li a:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
.store-notice li a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.store-notice p{ margin-top:10px; text-align:center; }
.store-notice p a{
  display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 14px;
  border-radius:999px; border:1px solid var(--border); background:var(--surface);
  color:var(--accent); font-weight:800; text-decoration:none; transition: background .15s, transform .05s;
}
.store-notice p a:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
.store-notice p a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }




/* ===== Mobile baseline: 全ページで縦並び（～1024px）===== */
@media (max-width: 1024px){
  /* よく使われる横並び系の器を全部 block 化 */
  .row, .columns, .two-col, .split,
  .content, .entry, .entry-content,
  .main, .primary, .secondary,
  .store-main, .article-main {
    display: block !important;
  }

  /* 左右に振るための float/幅指定を無効化 */
  [class*="col-"], .column,
  .store-thumbnail, .store-details,
  .sidebar, .aside {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}




/* 店主SNS（Single Kitchen Car） */
.store-sns {
  margin: 1.25rem 0 1.25rem;
  padding: 0.75rem 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.store-sns__title {
  font-size: 1.05rem;
  margin: 0 0 .5rem;
}

/* 横一列・常に1行死守。幅が足りなければ自動で縮小（最大40px・最小は実質 ~34-38px程度で収まる） */
.sns-list {
  --gap: 12px;
  --max: 40px;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0;
  margin: 0;
  list-style: none;
  /* 折り返し禁止 */
  flex-wrap: nowrap;
  overflow: visible;
}

/* 5個を1列で必ず収めるため、画面幅から逆算して自動縮小 */
.sns-item .sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(min(var(--max), (100vw - 32px - (4 * var(--gap))) / 5));
  height: calc(min(var(--max), (100vw - 32px - (4 * var(--gap))) / 5));
  /* 32px は左右のページ余白想定。テーマの余白が異なる場合は微調整可 */
  border-radius: 10px;
  touch-action: manipulation;
}
.sns-item .sns-link img {
  width: 100%;
  height: 100%;
  display: block;
}

/* タップしやすさ & 視認性 */
.sns-item .sns-link:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}
.sns-item .sns-link:active {
  transform: scale(0.96);
}

/* ごく狭い端末での最終保険（万一は38px固定に落とす） */
@media (max-width: 320px) {
  .sns-list { --max: 38px; --gap: 10px; }
}



/* フォロー行：左右配置 */
.kcpm-follow{ margin:.5rem 0 1rem; }
.kcpm-follow-inner{
  display:flex;
  align-items:center;
  justify-content:space-between; /* ← 左右に配置 */
  gap:12px;
}
.kcpm-msg{
  margin:0;
  font-size:.95rem;
  color:#666;
  flex:1;           /* ← 左側テキストを可変幅に */
  min-width:0;      /* 折り返し制御の保険 */
}
.kcpm-btn{
  white-space:nowrap; /* ボタンの改行防止（既存スタイルは尊重） */
}
.kcpm-diag { display: none !important; }





/* 実体バックドロップ（外側タップで閉じる用） */
#nav-backdrop{
  display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,.25);
}
#nav-backdrop.is-show{ display:block; }

/* メニュー本体はヘッダー直下で全幅 */
:root{ --header-h: 56px; }
@media (min-width:481px){ :root{ --header-h: 64px; } }

#nav-menu{
  display:none; position:fixed; inset:var(--header-h) 0 auto 0; z-index:1001;
  width:100%; background:rgba(255,255,255,.98);
  backdrop-filter:saturate(1.1) blur(4px);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  max-height:calc(100svh - var(--header-h));
  overflow:auto;
}
#nav-menu.open{ display:block; }

/* 開いている間は背面スクロール禁止 */
body.no-scroll{ overflow:hidden; touch-action:none; }

/*  価格： 16–18px + 太字 */
.food-menu-title{
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/*  フォーカスリング**：iOSで消えることがあるので */
:focus-visible{ outline: 2px solid #3b82f6; outline-offset: 2px; }


/* # レイアウト安定（スマホの“ガタつき”防止） */
.sales-logo, .food-menu-thumb{ aspect-ratio: 1 / 1; object-fit: cover; }

/*  スクロール快適化 */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}