/* ============================================
   スマホメニュー（☰で開く画面）のデザインパターンと開き方の動き
   選ぶ場所: デザイン設定 > ナビゲーション > スマホメニュー（shops.hp_drawer_style.pattern / animation）
   キーの一覧は App\Models\Shop::DRAWER_PATTERNS / DRAWER_ANIMATIONS

   色は直書きしない。☰メニューの色の設定（hp.partials.drawer-style が #mobileNav に --dw-* を出す）を読む。
   未設定のときの色は、下の既定値か、テンプレート側（例: shiropara.css）が .mobile-nav に置く値。
============================================ */
.mobile-nav {
  --dw-bg: #fff;
  --dw-accent: #8b0000;
  --dw-sub: #555;
  --dw-btn: #e03050;
  --dw-btn2: #c0002a;
  --dw-btn-text: #fff;
  --dw-line: #eee;
  --dw-soft: #f7f7f7;
  --dw-pop: var(--dw-btn);
}

/* ---------- パターン共通（標準以外） ---------- */
.mobile-nav .dw-list { display: grid; gap: 10px; }
.mobile-nav .dw-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dw-accent); font-weight: bold; font-size: 14px; box-sizing: border-box; }
.mobile-nav .dw-item__icon svg { width: 100%; height: 100%; fill: currentColor; }
.mobile-nav .dw-item__label { min-width: 0; }

/* 1列のリスト（右に矢印） */
.mobile-nav--p-list .dw-list { gap: 0; border-top: 1px solid var(--dw-line); }
.mobile-nav--p-list .dw-item { justify-content: space-between; padding: 15px 8px; border-bottom: 1px solid var(--dw-line); }
.mobile-nav--p-list .dw-item::after { content: "›"; font-size: 20px; line-height: 1; color: var(--dw-btn); }

/* 丸いボタン（2列） */
.mobile-nav--p-pill .dw-list { grid-template-columns: 1fr 1fr; }
.mobile-nav--p-pill .dw-item { justify-content: center; padding: 12px 6px; border-radius: 999px; background: var(--dw-btn); color: var(--dw-btn-text); text-align: center; }

/* 線だけのボタン（2列） */
.mobile-nav--p-outline .dw-list { grid-template-columns: 1fr 1fr; }
.mobile-nav--p-outline .dw-item { justify-content: center; padding: 12px 6px; border: 1.5px solid var(--dw-btn); border-radius: 4px; color: var(--dw-btn); text-align: center; }

/* 四角いタイル（3列） */
.mobile-nav--p-tile .dw-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mobile-nav--p-tile .dw-item { flex-direction: column; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 4px; border-radius: 10px; background: var(--dw-soft); font-size: 12px; text-align: center; }
.mobile-nav--p-tile .dw-item__icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--dw-pop); font-size: 20px; }

/* 丸いアイコン（3列・アプリ風） */
.mobile-nav--p-circle .dw-list { grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
.mobile-nav--p-circle .dw-item { flex-direction: column; gap: 6px; font-size: 12px; text-align: center; }
.mobile-nav--p-circle .dw-item__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 15px; box-sizing: border-box; border-radius: 50%; background: var(--dw-btn); color: var(--dw-btn-text); font-size: 20px; }

/* 番号付きの1列（雑誌風） */
.mobile-nav--p-numbered .dw-list { gap: 0; }
.mobile-nav--p-numbered .dw-item { align-items: baseline; gap: 14px; padding: 10px 4px; border-bottom: 1px dashed var(--dw-line); font-size: 15px; }
.mobile-nav--p-numbered .dw-item__num { flex: none; width: 34px; color: var(--dw-pop); font-size: 22px; font-style: italic; }

/* 色の地に大きな文字（1列）。画面全体をボタンの色にする */
#mobileNav.mobile-nav--p-bold { background: var(--dw-btn) !important; }
#mobileNav.mobile-nav--p-bold .nav-close,
#mobileNav.mobile-nav--p-bold .main-title,
#mobileNav.mobile-nav--p-bold .tel-number,
#mobileNav.mobile-nav--p-bold .hours,
#mobileNav.mobile-nav--p-bold .description { color: var(--dw-btn-text) !important; }
.mobile-nav--p-bold .nav-header { border-bottom-color: color-mix(in srgb, var(--dw-btn-text) 30%, transparent); }
/* ロゴは色の地に溶けやすいので、明るい台（☰メニューの背景色）に載せる */
.mobile-nav--p-bold .logo-placeholder { padding: 10px; border-radius: 12px; background: var(--dw-bg); }
.mobile-nav--p-bold .dw-list { gap: 2px; }
.mobile-nav--p-bold .dw-item { padding: 8px 4px; color: var(--dw-btn-text); font-size: 22px; letter-spacing: .04em; }

/* ノートの罫線 */
.mobile-nav--p-notebook .dw-list { gap: 0; padding: 0 6px; background: repeating-linear-gradient(transparent 0 43px, var(--dw-line) 43px 44px); }
.mobile-nav--p-notebook .dw-item { height: 44px; padding: 0 6px; font-weight: normal; }
.mobile-nav--p-notebook .dw-item::before { content: "♡"; color: var(--dw-pop); }

/* ハートのボタン（3列） */
.mobile-nav--p-heart .dw-list { grid-template-columns: repeat(3, 1fr); gap: 14px 6px; }
.mobile-nav--p-heart .dw-item { flex-direction: column; gap: 2px; font-size: 12px; text-align: center; }
.mobile-nav--p-heart .dw-item__icon { width: 52px; height: 52px; color: var(--dw-pop); }

/* 電話を一番上に大きく＋1列のリスト */
.mobile-nav .dw-tel { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; padding: 14px; border-radius: 10px; background: var(--dw-btn); color: var(--dw-btn-text); font-size: 20px; font-weight: bold; text-decoration: none; }
.mobile-nav .dw-tel svg { width: 22px; height: 22px; }
.mobile-nav--p-tel_first .tel-number { display: none; }
.mobile-nav--p-tel_first .dw-list { gap: 0; border-top: 1px solid var(--dw-line); }
.mobile-nav--p-tel_first .dw-item { padding: 13px 8px; border-bottom: 1px solid var(--dw-line); }

/* ============================================
   開き方の動き（data-anim）。標準（slide_right）は header.css の従来の動き
============================================ */
.mobile-nav[data-anim]:not([data-anim="slide_right"]) {
  right: 0;
  visibility: hidden;
  transition: transform .4s ease, opacity .4s ease, clip-path .5s ease, visibility 0s linear .5s;
}
.mobile-nav[data-anim]:not([data-anim="slide_right"]).is-active {
  visibility: visible;
  transform: none;
  opacity: 1;
  transition-delay: 0s;
}
.mobile-nav[data-anim="slide_left"] { transform: translateX(-100%); }
.mobile-nav[data-anim="slide_down"] { transform: translateY(-100%); }
.mobile-nav[data-anim="slide_up"] { transform: translateY(100%); }
.mobile-nav[data-anim="fade"] { opacity: 0; }
.mobile-nav[data-anim="zoom"] { opacity: 0; transform: scale(.92); }
/* ☰ボタン（右上）から円が広がる */
.mobile-nav[data-anim="circle"] { clip-path: circle(0 at calc(100% - 34px) 34px); }
.mobile-nav[data-anim="circle"].is-active { clip-path: circle(150% at calc(100% - 34px) 34px); }
/* 項目が上から順番に出る（全体はすぐ出して、項目を少しずつ遅らせる） */
.mobile-nav[data-anim="stagger"] { opacity: 0; transition-duration: .2s; }
.mobile-nav[data-anim="stagger"].is-active .dw-item,
.mobile-nav[data-anim="stagger"].is-active .btn-cyan,
.mobile-nav[data-anim="stagger"].is-active .dw-tel {
  animation: dw-rise .35s ease both;
  animation-delay: calc(var(--i, 0) * 45ms + .1s);
}
@keyframes dw-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.mobile-nav[data-anim="none"] { transition: none; }

/* 端末で「視差効果を減らす」が選ばれているときは動かさない */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none !important; }
  .mobile-nav * { animation: none !important; }
}

/* 下の固定ナビ（スマホ）に最後の項目が隠れないよう、メニューの下に余白 */
@media screen and (max-width: 767px) {
  .mobile-nav .nav-inner { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* 英字＋日本語の2段（1列・中央）。英字の書体はテンプレートの英字見出しの書体（--hp-font-en。無ければ明朝系） */
.mobile-nav--p-en_ja .dw-list { gap: 0; }
.mobile-nav--p-en_ja .dw-item { flex-direction: column; justify-content: center; gap: 2px; padding: 14px 8px; border-bottom: 1px solid var(--dw-line); text-align: center; font-weight: normal; }
.mobile-nav--p-en_ja .dw-item__en { font-family: var(--hp-font-en, 'Times New Roman', serif); font-size: 18px; letter-spacing: .12em; color: var(--dw-accent); }
.mobile-nav--p-en_ja .dw-item__label { font-size: 11px; color: var(--dw-sub); }