/*
 * 新案C(v4): 白い紙の上の、色の無い編集デザイン。参考 Adam Lippes。決まりは docs/design/DESIGN-c.md(ここはその実装)。
 * html[data-design="v4"] のときだけ効く。v2 の「英語の飾りを外す」等は design-v2.css が v4 にも効いていて、ここで上書きする。
 * ⚠️ 店舗ごとの色より、この配色が勝つ(見比べるため)。文字の大きさは rem
 */

html[data-design="v4"] {
  --bg: #FEFCF8; --bg-panel: #FFFFFF; --bg-deep: #F4F1EB; --shade: #FEFCF8;
  --ink: #000000; --ink-dim: #403F3E; --accent: #000000; --accent-soft: rgba(0, 0, 0, 0.06);
  --ok: #000000; --soon: #4C4C4A; --line: #000000; --jade: #000000;
  --bg-rgb: 254, 252, 248; --shade-rgb: 254, 252, 248; --ink-rgb: 0, 0, 0; --accent-rgb: 0, 0, 0;
  --v2-rule: #000000; --v2-radius: 0;
  --c-sans: Optima, 'Avenir Next', 'Segoe UI', 'Zen Kaku Gothic New', sans-serif;
}
html[data-design="v4"] body { background: var(--bg) !important; }

/* 書体は1つ・太さは 400 だけ(明朝・太字を使わない) */
html[data-design="v4"] body, html[data-design="v4"] h1, html[data-design="v4"] h2, html[data-design="v4"] h3, html[data-design="v4"] .serif,
html[data-design="v4"] button, html[data-design="v4"] .header-title-jp, html[data-design="v4"] .menu-row-jp,
html[data-design="v4"] .pickup-name, html[data-design="v4"] .cast-name, html[data-design="v4"] .today-name {
  font-family: var(--c-sans) !important;
}
html[data-design="v4"] * { font-weight: 400 !important; }
html[data-design="v4"] body { letter-spacing: 0.03em; }

/* 写真・動画の上は暗いまま(白い文字で読む) */
html[data-design="v4"] .fcard, html[data-design="v4"] .profile-hero, html[data-design="v4"] .banner-slide, html[data-design="v4"] .event-banner {
  --ink: #FEFCF8; --ink-dim: rgba(254, 252, 248, 0.78); --ink-rgb: 254, 252, 248; --shade-rgb: 0, 0, 0; --bg-rgb: 0, 0, 0; --bg: #000; --ok: #FEFCF8; --soon: #FEFCF8;
}
html[data-design="v4"] .profile-media::after { background: linear-gradient(0deg, #FEFCF8 0%, rgba(254, 252, 248, 0) 14%) !important; }

/* 見出し: 24px・細線は見出しの下に */
html[data-design="v4"] .section-title { font-size: 1.125rem !important; letter-spacing: 0.16em !important; display: block !important; padding-bottom: 10px; border-bottom: 1px solid #000; margin-bottom: 14px !important; }
html[data-design="v4"] .section-title::after { display: none; }
html[data-design="v4"] .header-title-jp { font-size: 0.875rem !important; letter-spacing: 0.24em !important; }
html[data-design="v4"] .top-header { background: #FEFCF8 !important; border-bottom: 1px solid #000 !important; }
html[data-design="v4"] .back-btn, html[data-design="v4"] .icon-btn, html[data-design="v4"] .home-menu-btn, html[data-design="v4"] .global-menu-btn {
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
html[data-design="v4"] .back-btn svg, html[data-design="v4"] .icon-btn svg, html[data-design="v4"] .global-menu-btn svg, html[data-design="v4"] .home-menu-btn svg { stroke: #000 !important; }

/* ホームの頭: 左寄せ・ぼかしの背景なし */
html[data-design="v4"] .home-logo-header {
  background-image: none !important; text-align: left !important; align-items: flex-start !important;
  padding: 28px 16px 20px !important; border-bottom: 1px solid #000;
}
html[data-design="v4"] .home-logo-header .store-name { font-size: 1.5rem !important; letter-spacing: 0.2em !important; }
html[data-design="v4"] .home-logo-header .store-name img { margin: 0 0 14px !important; max-height: 36px !important; filter: grayscale(1); }
html[data-design="v4"] .home-logo-header .store-name .sub { font-size: 0.75rem !important; letter-spacing: 0.24em !important; color: var(--ink-dim) !important; margin-top: 8px !important; }
html[data-design="v4"] .hours-badge { background: transparent !important; justify-content: flex-start !important; flex-wrap: wrap; gap: 2px 16px !important; font-size: 0.75rem !important; }

/* 写真: 角 0・左右の余白は白(ぼかした写真で埋めない) */
html[data-design="v4"] .pickup-photo, html[data-design="v4"] .today-photo, html[data-design="v4"] .cast-photo, html[data-design="v4"] .gallery-photo,
html[data-design="v4"] .banner-slide, html[data-design="v4"] .rvideo-photo, html[data-design="v4"] .profile-reel-tile, html[data-design="v4"] .event-banner {
  border-radius: 0 !important; background-color: #FFFFFF !important;
}
html[data-design="v4"] .pickup-photo.m-real::before, html[data-design="v4"] .today-photo.m-real::before, html[data-design="v4"] .cast-photo.m-real::before,
html[data-design="v4"] .gallery-photo.m-real::before { display: none !important; }
html[data-design="v4"] .mini-progress { display: none !important; }
html[data-design="v4"] .mini-tag { filter: invert(1); opacity: 0.7; }

/* 札: No.1 は小さな丸い札(参考で丸いのは札だけ)、状態は ■ / □ と文字 */
html[data-design="v4"] .cast-badge { background: #000 !important; color: #fff !important; border-radius: 40px !important; padding: 2px 8px !important; font-size: 0.625rem !important; letter-spacing: 0.12em; }
html[data-design="v4"] .cast-status-badge, html[data-design="v4"] .today-status, html[data-design="v4"] .status-ok, html[data-design="v4"] .status-soon {
  color: #000 !important; text-shadow: none !important;
}
html[data-design="v4"] .status-dot { border-radius: 0 !important; width: 6px !important; height: 6px !important; }
html[data-design="v4"] .status-ok .status-dot { background: #000 !important; }
html[data-design="v4"] .status-soon .status-dot { background: transparent !important; border: 1px solid #000; }
/* 写真の上の状態は白い帯に黒文字(写真の色に負けない) */
html[data-design="v4"] .cast-status-badge, html[data-design="v4"] .today-status {
  background: rgba(254, 252, 248, 0.92) !important; padding: 2px 6px !important; font-size: 0.6875rem !important; left: auto !important; right: 0 !important; bottom: 0 !important;
}

/* 一覧: 2列・間 10px、名前 左 / 状態 右の1行 */
html[data-design="v4"] .cast-grid { gap: 22px 10px !important; }
html[data-design="v4"] .cast-name, html[data-design="v4"] .pickup-name { font-size: 0.875rem !important; letter-spacing: 0.06em; margin-top: 8px; }
html[data-design="v4"] .cast-meta, html[data-design="v4"] .pickup-meta { font-size: 0.75rem !important; color: var(--ink-dim) !important; }
html[data-design="v4"] .today-grid { gap: 16px 10px !important; }
html[data-design="v4"] .area-group-title { letter-spacing: 0.2em !important; font-size: 0.75rem !important; color: #000 !important; border-bottom: 1px solid #000; padding-bottom: 6px; }

/* 表・箱: 黒い細線 */
html[data-design="v4"] .price-quick { border-top: 0 !important; }   /* 見出しの下の線と二重にしない */
html[data-design="v4"] .profile-stats-table { border-top: 1px solid #000 !important; }
html[data-design="v4"] .price-row { border-bottom: 1px solid #000 !important; }
html[data-design="v4"] .price-amt { color: #000 !important; font-family: var(--c-sans); }
html[data-design="v4"] .notice, html[data-design="v4"] .comment-block, html[data-design="v4"] .news-block > * {
  border: 0 !important; border-top: 1px solid #000 !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important;
}
html[data-design="v4"] .profile-tag { color: #000 !important; }
html[data-design="v4"] .profile-tag::before { content: ''; }
html[data-design="v4"] .profile-tags { gap: 6px !important; }
html[data-design="v4"] .profile-tag { border: 1px solid #000 !important; padding: 3px 8px !important; font-size: 0.6875rem !important; letter-spacing: 0.1em; }

/* ボタン: 主 = 黒の塗り、従 = 黒の線。角 0。LINE も線のボタン(緑を使わない) */
html[data-design="v4"] .reserve-fixed-btn, html[data-design="v4"] .contact-cta, html[data-design="v4"] .sheet-cta, html[data-design="v4"] .gate-cta,
html[data-design="v4"] .contact-tab, html[data-design="v4"] .rank-toggle-btn {
  border-radius: 0 !important; letter-spacing: 0.16em !important; box-shadow: none !important;
}
html[data-design="v4"] .reserve-fixed-btn.web, html[data-design="v4"] .sheet-cta, html[data-design="v4"] .gate-cta, html[data-design="v4"] .contact-cta:not(.line) {
  background: #000 !important; color: #fff !important; border: 1px solid #000 !important;
}
html[data-design="v4"] .reserve-fixed-btn.tel, html[data-design="v4"] .reserve-fixed-btn.line, html[data-design="v4"] .contact-cta.line {
  background: #FEFCF8 !important; color: #000 !important; border: 1px solid #000 !important;
}
html[data-design="v4"] .reserve-fixed-btn svg { stroke: currentColor !important; }
html[data-design="v4"] .contact-tab.active, html[data-design="v4"] .rank-toggle-btn.active { background: #000 !important; color: #fff !important; border-color: #000 !important; }

/* 下のナビ: 上に黒い細線、選んでいる所は下線 */
html[data-design="v4"] .bottom-nav { background: #FEFCF8 !important; border-top: 1px solid #000 !important; }
html[data-design="v4"] .nav-item, html[data-design="v4"] .nav-item.active { color: #000 !important; }
html[data-design="v4"] .nav-icon svg, html[data-design="v4"] .nav-item.active .nav-icon svg { stroke: #000 !important; }
html[data-design="v4"] .nav-item.active::before { display: none; }
html[data-design="v4"] .nav-item.active .nav-label-jp { text-decoration: underline; text-underline-offset: 4px; }
html[data-design="v4"] .nav-label-jp { letter-spacing: 0.12em !important; }

/* メニュー */
html[data-design="v4"] .menu-row-jp { font-size: 0.9375rem !important; letter-spacing: 0.2em !important; color: #000 !important; }
html[data-design="v4"] .menu-row { border-bottom: 1px solid #000 !important; }
html[data-design="v4"] .bottom-sheet, html[data-design="v4"] .gate-card { border-radius: 0 !important; }