/* ==========================================================================
   初喚 CHUHUAN 官網 - 主樣式表 v2
   ------------------------------------------------------------
   CI 五層設計系統（取自大學路/久光/杭州/環球四店實景）
     Layer 01 · Brand Lockup   品牌主標色
     Layer 02 · Scene Palette  場景調色（大面積）
     Layer 03 · Signal Colors  識別色塊（小面積點綴）
     Layer 04 · Typography     字型階層
     Layer 05 · Scene Props    場景元件（.prop-* class）
   ------------------------------------------------------------
   命名策略：沿用舊 token 名稱（--color-primary 等），值改為新 CI。
   這樣 home.css / stores.css 不用改就會自動升級。
   新 CI 專屬 token 則使用 --brand-* / --scene-* / --signal-* 前綴。
   ========================================================================== */

/* ---------- 設計 Token ---------- */
:root {
  /* ------------------------------------------------------------
     Layer 01 · Brand Lockup · 品牌主標色
     基於久光店「初喚 CHUHUAN」紅綠立體字招牌
     ------------------------------------------------------------ */
  --brand-red: #E63227;          /* 「初喚」立體字 · 主品牌紅 */
  --brand-red-deep: #A91B13;     /* 深紅區塊、hover 態 */
  --brand-red-soft: #F5D3D0;     /* 淺紅底、輕量強調 */
  --brand-green: #00A75A;        /* 「CHUHUAN」立體字 · 品牌綠 */
  --brand-green-deep: #006636;   /* 店招深綠、磁磚腰線延伸 */
  --brand-black: #1A1A1A;        /* 招牌底板黑、深色段落背景 */

  /* ------------------------------------------------------------
     Layer 02 · Scene Palette · 場景調色（大面積使用）
     模擬店內白磁磚、磁磚腰線、木作傢俱、米黃暖底
     ------------------------------------------------------------ */
  --scene-tile-white: #FAFAF7;   /* 白方磁磚 · 主背景 */
  --scene-tile-line: #145934;    /* 磁磚腰線綠 · 分隔線色 */
  --scene-wood: #6B5D4F;         /* 木桌木櫃棕 */
  --scene-wood-light: #A08A74;   /* 淺木色 */
  --scene-warm-cream: #F5E8C8;   /* 米黃暖底 · 次背景 */

  /* ------------------------------------------------------------
     Layer 03 · Signal Colors · 識別色塊（小面積點綴）
     ------------------------------------------------------------ */
  --signal-neon-yellow: #F5D319; /* 霓虹黃「正港ㄟ牛肉麵」、大學路傘頂 */
  --signal-calendar-red: #C62828;/* 日曆紙紅頂、「店開著的」小招牌 */
  --signal-station-blue: #2E5D8C;/* 台北—XX 火車站牌藍 */
  --signal-lamp-green: #5A8F4E;  /* 綠色玻璃吊燈 */
  --signal-floor-orange: #E0A050;/* 六角地磚橘 */

  /* ------------------------------------------------------------
     向下相容 · 舊 token 名稱對應到新 CI
     （home.css / stores.css 裡的 var(--color-primary) 等會自動升級）
     ------------------------------------------------------------ */
  --color-primary: var(--brand-red);
  --color-primary-dark: var(--brand-red-deep);
  --color-primary-light: #ED6057;
  --color-primary-deep: #7A120D;         /* 深紅大面積背景（加盟區、模型帶） */

  --color-yellow: var(--signal-neon-yellow);
  --color-yellow-warm: #E6C30E;
  --color-yellow-soft: #FFF8CC;          /* 淺黃底 */

  --color-bg: #F5E8C8;                   /* 主背景 · 懷舊米黃（25Q2 手冊感） */
  --color-bg-alt: #EDDDB0;               /* 次背景 · 比主背景深一階 */
  --color-surface: #FFFFFF;

  --color-text: #2A2622;                 /* 主文字 · 偏暖深褐 */
  --color-text-muted: #6B6157;
  --color-text-light: #9A9086;

  --color-border: #E4DED2;
  --color-border-strong: #BFB4A0;

  --color-accent: var(--brand-green);    /* 強調色 · 從深綠→品牌綠 */
  --color-accent-deep: var(--brand-green-deep);

  /* ------------------------------------------------------------
     Layer 04 · Typography · 字型階層
     全站 Noto Sans TC · 層次用 weight（300/400/500/700）
     ------------------------------------------------------------ */
  --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-display: "Noto Sans TC", sans-serif;  /* Hero 大字、招牌字 · weight 700 用 */

  /* Weight tokens（語意化，便於改字型時不用逐一改 weight 數字） */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* 字級（行動優先） */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;   /* 28px */
  --fs-3xl: 2.25rem;   /* 36px */
  --fs-4xl: 3rem;      /* 48px */
  --fs-5xl: 4rem;      /* 64px · Hero 大字用 */

  /* 行高 */
  --lh-tight: 1.15;    /* 大標題 */
  --lh-snug: 1.35;     /* 副標 */
  --lh-base: 1.7;      /* 正文 */
  --lh-loose: 1.9;     /* 引文、hero tagline */

  /* 字距 */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.15em;   /* 小標、eyebrow */
  --tracking-widest: 0.3em;   /* 英文大寫 label */

  /* ------------------------------------------------------------
     間距（沿用舊值，結構 OK） + 新增 space-5/10/20
     ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* 容器寬度 */
  --container-max: 1200px;
  --container-narrow: 800px;

  /* 圓角（台式老店視覺偏好直角，僅小面積卡片用微圓角） */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ------------------------------------------------------------
     Layer 05 預備 · 場景元件專用變數
     （實際 class 在下方 Prop classes 區塊）
     ------------------------------------------------------------ */
  --prop-tile-size: 32px;        /* 白方磁磚紋網格尺寸 */
  --prop-tile-grout: rgba(20, 89, 52, 0.12);  /* 磁磚縫色 */

  /* 動畫 */
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  /* Stage B · 純 CSS 單層細顆粒（無 vignette、無粗噪點）
     只疊一層 SVG fractalNoise 320px 棕色細紋，在 #F5E8C8 底色上當紙纖維 */
  background-color: var(--color-bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.15  0 0 0 0 0.08  0.9 0 0 0 -0.35'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary-dark);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- 容器 ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---------- 共用元件：按鈕 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  font-size: var(--fs-base);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: 0.05em;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 深底上用的淺色外框按鈕（Hero 黑底 CTA 用） */
.btn-outline-light {
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: #FFFFFF;
}

/* ---------- 共用：標題（襯線感但用黑體，靠 weight 區分） ---------- */
h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

h1 { font-size: var(--fs-3xl); font-weight: 300; }
h2 { font-size: var(--fs-2xl); font-weight: 400; }
h3 { font-size: var(--fs-xl); font-weight: 500; }
h4 { font-size: var(--fs-lg); font-weight: 500; }

p { margin-bottom: var(--space-4); }

/* ---------- Section ---------- */
.section {
  padding: var(--space-16) 0;
}

.section-narrow {
  padding: var(--space-12) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  letter-spacing: 0.25em;
  margin-bottom: var(--space-3);
  font-weight: 700;
  position: relative;
  padding: 0 var(--space-3);
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: var(--color-yellow);
  vertical-align: middle;
  margin: 0 8px;
}

.section-title {
  font-size: var(--fs-2xl);
  font-weight: 400;
  margin-bottom: var(--space-3);
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- Header（共用導航） ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(250, 246, 239, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.site-logo {
  display: flex;
  align-items: center;
  line-height: 0; /* 消除 img 底部多餘空隙 */
}

.site-logo-img {
  height: 52px;
  width: 52px;
  display: block;
  transition: opacity var(--transition);
}

.site-logo:hover .site-logo-img {
  opacity: 0.85;
}

.site-nav {
  display: none;
}

.site-nav a {
  color: var(--color-text);
  font-size: var(--fs-sm);
  margin-left: var(--space-8);
  position: relative;
  padding: var(--space-2) 0;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--color-primary);
}

.site-nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-primary);
}

.lang-toggle {
  margin-left: var(--space-6);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
}

.lang-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 行動裝置選單按鈕 */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: var(--color-text);
  margin: 0 auto;
  transition: transform var(--transition);
}

/* 行動選單展開 */
.mobile-nav {
  display: none;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav.open {
  display: block;
}

.mobile-nav a {
  display: block;
  padding: var(--space-4) var(--space-6);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-base);
}

.mobile-nav a:last-child { border-bottom: none; }

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-12) 0 var(--space-6);
  margin-top: var(--space-24);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.footer-col h4 {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: 0.1em;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: var(--space-2);
}

.footer-col a {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.footer-col a:hover {
  color: var(--color-primary);
}

.footer-brand p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.footer-logo {
  height: 56px;
  width: auto;
  display: block;
  margin-bottom: var(--space-4);
}

.footer-bottom {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  line-height: 2;
}

.footer-bottom a {
  color: var(--color-text-light);
}

/* ---------- Footer 城市站牌帶 ---------- */
.footer-stations {
  background-color: var(--brand-black);
  color: #FFFFFF;
  padding: var(--space-6) 0;
  position: relative;
}

.footer-stations::before,
.footer-stations::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--signal-neon-yellow);
}
.footer-stations::before { top: 0; }
.footer-stations::after { bottom: 0; }

.footer-stations-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.footer-stations-label {
  font-size: var(--fs-xs);
  color: var(--signal-neon-yellow);
  letter-spacing: 0.3em;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.footer-stations-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.footer-stations-list .prop-station {
  font-size: var(--fs-xs);
  padding: 4px 12px;
}

/* 「下一站—?」用虛線邊框表示未定 */
.footer-stations-list .prop-station-next {
  border-style: dashed;
  opacity: 0.75;
}

.footer-stations-list .prop-station-next .prop-station-from,
.footer-stations-list .prop-station-next .prop-station-to {
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .footer-stations-inner {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-8);
  }
}

/* ---------- 媒體查詢：平板以上 ---------- */
@media (min-width: 768px) {
  :root {
    --fs-2xl: 2rem;
    --fs-3xl: 2.75rem;
    --fs-4xl: 3.75rem;
  }

  .site-nav {
    display: flex;
    align-items: center;
  }

  .nav-toggle {
    display: none;
  }

  .section { padding: var(--space-24) 0; }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* ---------- 輔助類 ---------- */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-primary); }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }

/* ==========================================================================
   Layer 04 · Typography Utility Classes
   ========================================================================== */

/* Hero 級大字（首頁 Hero、品牌故事頁大標） */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
}

/* 招牌字（「台北」「初喚」這類店招大字） */
.display-signboard {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 0.95;
}

/* Eyebrow · 段落之前的小標籤（例：「品牌故事」） */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* 引文/副標（台語諧音那種抒情文案用） */
.tagline {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}

/* ==========================================================================
   Layer 01 · Brand Lockup · 品牌主標組合
   依據久光店招牌：紅色「初喚」+ 綠色「CHUHUAN」
   用法：<span class="brand-lockup"><span class="brand-lockup-cn">初喚</span><span class="brand-lockup-en">CHUHUAN</span></span>
   ========================================================================== */

.brand-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
}

.brand-lockup-cn {
  color: var(--brand-red);
  letter-spacing: 0.05em;
}

.brand-lockup-en {
  color: var(--brand-green);
  letter-spacing: 0.15em;
  font-size: 0.95em;
}

/* 深底上的 lockup（加白色描邊模擬立體字招牌） */
.brand-lockup-on-dark {
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.15),
    1px -1px 0 rgba(255,255,255,0.15),
    -1px 1px 0 rgba(255,255,255,0.15),
    1px 1px 0 rgba(255,255,255,0.15);
}

/* 尺寸變體 */
.brand-lockup-sm { font-size: var(--fs-lg); }        /* 18px · Header */
.brand-lockup-md { font-size: var(--fs-2xl); }       /* 28px · 區段標題旁 */
.brand-lockup-lg { font-size: clamp(2rem, 6vw, 3.5rem); }  /* Hero 用 */

/* ==========================================================================
   Layer 05 · Scene Props · 場景元件
   把店內反覆出現的道具做成可重用 CSS class
   ========================================================================== */

/* --- 白方磁磚背景紋 --- */
.prop-tile-bg {
  background-color: var(--scene-tile-white);
  background-image:
    linear-gradient(to right, var(--prop-tile-grout) 1px, transparent 1px),
    linear-gradient(to bottom, var(--prop-tile-grout) 1px, transparent 1px);
  background-size: var(--prop-tile-size) var(--prop-tile-size);
}

/* 下方加綠色腰線（大學路店/久光店的特徵） */
.prop-tile-bg-with-stripe {
  position: relative;
}

.prop-tile-bg-with-stripe::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20%;
  height: 12px;
  background-color: var(--scene-tile-line);
  pointer-events: none;
}

/* --- 日曆牌（模擬「21 星期五」那張 3D 立體日曆） --- */
.prop-calendar {
  display: inline-block;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 4px 0 10px;
  min-width: 96px;
  text-align: center;
  font-family: var(--font-display);
  line-height: 1;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}

.prop-calendar-top {
  display: block;
  background-color: var(--signal-calendar-red);
  color: #FFFFFF;
  font-size: 10px;
  letter-spacing: 0.3em;
  padding: 4px 0 3px;
  margin: -4px 0 10px;
  font-weight: var(--fw-medium);
}

.prop-calendar-day {
  display: block;
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
  color: var(--signal-station-blue);
  margin-bottom: 2px;
}

.prop-calendar-weekday {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text);
  letter-spacing: 0.2em;
}

/* --- 火車站牌（「台北—XX」藍字綠字站牌） --- */
.prop-station {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background-color: #FFFFFF;
  border: 2px solid var(--signal-station-blue);
  border-radius: 999px;
  padding: 6px 18px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.prop-station-from { color: var(--signal-station-blue); }
.prop-station-to { color: var(--brand-green); }
.prop-station-dash {
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

/* --- FORMOSA 圓章（酒菸/喜臺灣那類圓形老招） --- */
.prop-formosa {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: #FFF8E6;
  border: 3px solid var(--signal-calendar-red);
  box-shadow: 0 0 0 2px #FFF8E6, 0 0 0 4px rgba(198,40,40,0.3);
  font-family: var(--font-display);
  color: var(--signal-calendar-red);
  line-height: 1.1;
  text-align: center;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  padding: var(--space-2);
  font-size: var(--fs-xs);
}

.prop-formosa-main {
  font-size: var(--fs-base);
  margin: 2px 0;
}

/* --- 小燈箱招牌（像大學路「店開著的」黃底紅字招牌） --- */
.prop-lightbox-yellow {
  display: inline-block;
  background-color: var(--signal-neon-yellow);
  color: var(--brand-red-deep);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: 0.15em;
  padding: 8px 14px 6px;
  line-height: 1.3;
  border: 2px solid var(--brand-red-deep);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--brand-red-deep);
}

/* --- 霓虹燈字（像久光「正港ㄟ牛肉麵」） --- */
.prop-neon {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--signal-neon-yellow);
  text-shadow:
    0 0 4px var(--signal-neon-yellow),
    0 0 10px rgba(245,211,25,0.7),
    0 0 18px rgba(245,211,25,0.4);
  letter-spacing: 0.1em;
}

/* 霓虹在深底（黑色底）上才會發光好看 */
.prop-neon-panel {
  background-color: var(--brand-black);
  padding: var(--space-6) var(--space-8);
  text-align: center;
  border-radius: var(--radius-sm);
}

/* --- 啤酒箱堆疊紋（大學路店特徵，黃色箱子堆疊） --- */
.prop-beer-crates {
  display: inline-block;
  width: 64px;
  height: 48px;
  background-color: var(--signal-neon-yellow);
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.15) 1px, transparent 1px);
  background-size: 12px 12px;
  border: 1px solid rgba(0,0,0,0.25);
}