/* Approved Charcoal + Gold / BM Dohyeon brand system.
   Load LAST after legacy route styles. !important resolves legacy color/type
   overrides only; the existing photo crops, layout and interactions stay intact.
   Font licenses are bundled in assets/fonts/DoHyeon-OFL.txt and Pretendard-OFL.txt. */
@font-face {
  font-family: 'Do Hyeon';
  src: url('/assets/fonts/DoHyeon-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --don-bg: #1D1F21;
  --don-section: #242629;
  --don-card: #303338;
  --don-bg-deep: #181A1C;
  --don-gold: #C9A35A;
  --don-gold-text: #D8B46A;
  --don-gold-hover: #E0BD76;
  --don-text: #F4EEDF;
  --don-text-muted: #C6BFAF;
  --don-border: #776441;
  --don-reservation: #216C3A;
  --don-font-body: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --don-font-heading: 'Do Hyeon', var(--don-font-body);
  --bg: var(--don-bg);
  --bg-soft: var(--don-section);
  --paper: var(--don-section);
  --paper-2: var(--don-card);
  --ink: var(--don-text);
  --muted: var(--don-text-muted);
  --type-ink: var(--don-text);
  --type-muted: var(--don-text-muted);
  --gold: var(--don-gold);
  --gold-2: var(--don-gold-text);
  --line: var(--don-border);
  --display: var(--don-font-heading);
}
/* Dohyeon has Korean/Latin glyphs. Keep native CJK fallback faces readable. */
html:lang(ja) { --don-font-body: 'Pretendard Variable', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; }
html:lang(zh) { --don-font-body: 'Pretendard Variable', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
html, body { background: var(--don-bg); color: var(--don-text); }
body, button, input, textarea, select { font-family: var(--don-font-body); font-weight: 400; }
body { font-size: 16px; line-height: 1.75; }
body :is(h1, h2, h3, .display, .signature, .brandmark strong, .footer-brand,
  .home-menu-rail__name, .menu-meta strong, .site-intro__word,
  .story01-quote, .story02-quote, .story-emphasis, .story-ending,
  .brand-pullquote, .history-quote, .trust-quote) {
  font-family: var(--don-font-heading) !important;
  font-weight: 400 !important;
  font-synthesis: none;
  letter-spacing: -.02em !important;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body h1 { font-size: clamp(32px, 4.2vw, 56px) !important; }
body :is(h2, .section-title, .signature) { font-size: clamp(28px, 3vw, 36px); }
body :is(.home-menu-rail__head h2, .menu-head .section-title) { white-space: normal; }
body :is(.home-menu-rail__name, .menu-card h3, .menu-card .menu-meta strong) { font-size: 22px !important; }
body :is(.brandmark strong, .footer-brand) { color: var(--don-text) !important; }
body .site-header .brandmark strong { font-size: 36px !important; line-height: 1; }
@media (min-width: 1021px) and (max-width: 1100px) {
  body .site-header .brandmark strong { font-size: 28px !important; white-space: nowrap; }
}
body :is(.section, .section.paper, .section.dark-soft, .home-menu-rail,
  .review-access, .review-platforms, .seo-text-section) {
  background: var(--don-section) !important;
  color: var(--don-text);
}
/* The brand introduction and editorial pages use the deeper charcoal field. */
body :is(.brand-showcase + .section, .story01-bb, .story02-bb, .brand-category,
  .story-page, .story-hero, .footer, .cta, .seo-faq) {
  background: var(--don-bg-deep) !important;
  color: var(--don-text);
}
body main > section.section:not(.paper) { background: var(--don-section) !important; }
body main > section.section.seo-faq { background: var(--don-bg-deep) !important; }
body :is(.site-header, .site-header.scrolled, .site-intro__curtain) {
  background: var(--don-bg) !important;
  border-color: var(--don-border);
  color: var(--don-text);
}
body :is(.value-card, .menu-card, .review-card, .feature, .news-item,
  .home-menu-rail__card, .review-platform, .review-access__store,
  .review-access__location, .review-access__taxi, .review-access__photos figure,
  .seo-menu-list article, .story-emphasis) {
  background: var(--don-card) !important;
  color: var(--don-text);
  border-color: var(--don-border) !important;
}
body :is(.hero, .page-hero, .hero-media, .hero-media img, .story-image,
  .brand-story-card__media, .trust-portrait, .recognition-card img,
  .review-access__map, .review-map-split-hero__frame) { background-color: var(--don-bg-deep); }
body :is(h1, h2, h3, .value-card b, .menu-meta strong, .home-menu-rail__name,
  .stat strong, .seo-address strong, .faq-list summary, .faq-list details strong,
  .review-access__facts dd, .news-title, .info-row b, .story01-quote,
  .story02-quote, .story-emphasis, .story-ending, .brand-pullquote,
  .history-quote, .history-year, .trust-quote) { color: var(--don-text) !important; }
body :is(p, figcaption, .muted, .section-intro, .copy-lg, .subtitle,
  .menu-description, .home-menu-rail__hint, .home-menu-rail__sub, .menu-swipe-hint,
  .value-card span, .stat span, .review-card small, .review-access__branch,
  .review-access__facts dt, .review-access__copy-status, .footer-bottom,
  .news-date, .brandmark span, .scroll-cue) { color: var(--don-text-muted) !important; }
body :is(.hero-copy > p:not(.eyebrow), .copy-lg, .section-intro,
  .seo-proof p, .seo-reading p, .faq-list details p,
  .story-section p, .story01-prose p, .story02-prose p, .category-prose p) {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}
body :is(.gold, .eyebrow, .price, .home-menu-rail__price, .feature .num,
  .news-type, .stars, .timeline-item time, .info-row span, .seo-address span,
  .brand-story-card__category, .brand-story-card__cta, .story-kicker,
  .story01-kicker, .story02-kicker, .story02-place, .category-kicker,
  .history-place, .review-platform__label, .review-access__step-label,
  .site-intro__word, .story-recognition h2) { color: var(--don-gold-text) !important; }
body :is(.price, .home-menu-rail__price) { font-family: var(--don-font-body); font-weight: 700; }
body .menu-head .section-title.display { color: var(--don-text) !important; }
body .menu-head .section-intro { color: var(--don-text-muted) !important; }
body .menu-head .eyebrow { color: var(--don-gold-text) !important; }
body .page-hero .display { color: var(--don-text) !important; }
body .page-hero .eyebrow { color: var(--don-gold-text) !important; }
body .review-map-split-hero .review-map-split-hero__frame { background: var(--don-bg-deep); }
body :is(.hero, .page-hero, .story-banner, .brand-story-card) p:not(.eyebrow) {
  color: var(--don-text) !important;
}
body :is(.footer a, .site-header .nav a, .site-header .menu-toggle) {
  color: var(--don-text) !important;
}
body :is(.site-header .nav a:hover, .site-header .nav a.active,
  .site-header .nav a[aria-current="page"], .footer a:hover) { color: var(--don-gold-text) !important; }
body .site-header .nav a::after { background: var(--don-gold); }
body .site-header .language-switcher a { color: var(--don-text-muted) !important; }
body .site-header .language-switcher a[aria-current="page"] { color: var(--don-gold-text) !important; }
body :is(.header-language-select, .filter-btn) {
  background: var(--don-card);
  color: var(--don-text);
  border-color: var(--don-gold);
}
body :is(.btn, .filter-btn, .header-booking) { font-family: var(--don-font-body); font-weight: 600; }
body :is(.btn, .btn-dark, .btn-secondary) {
  background: var(--don-bg) !important;
  color: var(--don-text) !important;
  border-color: var(--don-gold) !important;
}
body :is(.btn-gold, .btn-primary, .filter-btn.active, .filter-btn[aria-pressed="true"], .skip-link) {
  background: var(--don-gold) !important;
  color: var(--don-bg) !important;
  border-color: var(--don-gold) !important;
}
body :is(.btn:hover, .btn:focus-visible, .filter-btn:hover, .filter-btn:focus-visible) {
  background: var(--don-gold-hover) !important;
  color: var(--don-bg) !important;
  border-color: var(--don-gold-hover) !important;
}
body .review-access__actions :is(.btn.btn-primary, .btn.btn-secondary) { border-color: var(--don-gold) !important; }
body .review-access__actions .btn.btn-primary { background: var(--don-gold) !important; color: var(--don-bg) !important; }
body .review-access__actions .btn.btn-secondary { background: var(--don-bg) !important; color: var(--don-text) !important; }
body .review-access__actions .btn:is(.btn-primary, .btn-secondary):is(:hover, :focus-visible) { background: var(--don-gold-hover) !important; color: var(--don-bg) !important; }
body .site-header .header-booking { background: var(--don-reservation); color: var(--don-text); }
body .site-header .header-booking:is(:hover, :focus-visible) { background: var(--don-reservation); color: var(--don-text); box-shadow: 0 0 0 2px var(--don-gold); }
body :is(.seo-proof-grid, .seo-proof, .seo-address, .seo-address div,
  .faq-list, .faq-list details, .feature-strip, .info-row, .news-list,
  .home-menu-rail, .footer-bottom, .story-hero, .story01-quote, .story02-quote,
  .brand-pullquote, .trust-quote, .story-recognition, .history-list li) { border-color: var(--don-border) !important; }
body .info-row { background: transparent; }
body .news-list { background: var(--don-border); }
body .news-item:hover { background: var(--don-bg) !important; }
body :is(.hero-kicker::before, .timeline::before) { background: var(--don-gold); }
body .timeline-item::before { background: var(--don-gold); border-color: var(--don-section); }
body .intro-image::after { background: var(--don-gold); color: var(--don-bg); }
body .review-access__taxi .review-access__taxi-address { background: var(--don-bg-deep); color: var(--don-text) !important; }
body .seo-menu-list a { color: var(--don-gold-text); }
body .home-menu-rail__meta { flex-wrap: wrap; }
body .home-menu-rail__card:is(:hover, :focus-visible),
body .menu-card:has(.menu-card-select[aria-pressed="true"]) { border-color: var(--don-gold-hover) !important; }
body :focus-visible { outline: 3px solid var(--don-gold-hover); outline-offset: 3px; }
body .menu-card-select:focus-visible { outline-offset: -4px; }
/* The current mobile drawer is created by JS with inline presentation styles. */
body .mobile-drawer-panel { background: var(--don-bg) !important; border: 1px solid var(--don-border); }
body .mobile-drawer-links a { color: var(--don-text) !important; border-bottom-color: var(--don-border) !important; }
body .mobile-drawer-links a:is(:hover, :focus-visible, [aria-current="page"]) { color: var(--don-gold-text) !important; }
body .mobile-menu-close-panel { color: var(--don-text) !important; }
::selection { background: var(--don-gold); color: var(--don-bg); }
@media (max-width: 1020px) {
  body .site-header:has(.nav.open),
  body .site-header:has(.nav.open) .header-inner,
  body .site-header .nav.open,
  body .site-header .nav.open a { background: var(--don-bg) !important; border-color: var(--don-border); }
  body .site-header:has(.nav.open) .menu-toggle { color: transparent !important; }
  body .site-header:has(.nav.open) .menu-toggle::after { color: var(--don-text) !important; }
}
@media (min-width: 761px) and (max-width: 1020px) {
  /* The compact overlay close glyph only exists at <=760px. */
  body .site-header:has(.nav.open) .menu-toggle { color: var(--don-text) !important; }
}
@media (max-width: 680px) {
  body .site-header .brandmark strong { font-size: 28px !important; line-height: 1; }
  /* Keep the enlarged Korean wordmark on one line at common mobile widths. */
  @media (min-width: 381px) {
    body .site-header .header-inner { gap: 6px; }
    body .site-header .brandmark { gap: 2px; }
    body .site-header .brandmark strong { white-space: nowrap; }
  }
  /* The existing split hero has a narrow photo column beside the video. */
  body .hero h1 { font-size: clamp(20px, 6.5vw, 26px) !important; line-height: 1.15; }
}

/* Keep the reservation label readable on narrow mobile headers. */
.header-booking { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 480px) {
  body .site-header .brandmark strong { font-size: 20px !important; }
  body .site-header .header-actions { gap: 6px; flex-shrink: 0; }
  body .site-header .header-inner { gap: 6px; }
}
@media (max-width: 400px) {
  body .site-header .brandmark strong { font-size: 18px !important; }
}
@media (max-width: 360px) {
  body .site-header .brandmark strong { font-size: 14px !important; }
  body .site-header .header-language-select { flex-basis: 40px; width: 40px; }
  body .site-header .header-actions { gap: 4px; }
  body .site-header .header-booking { padding-inline: 8px; }
  body .site-header .header-inner { gap: 4px; }
}

/* Long Japanese transit sentences must not expand the mobile grid track. */
@media (max-width: 740px) {
  body.page-store .store-arrival-grid { grid-template-columns: minmax(0, 1fr); }
  body.page-store .store-arrival-grid article { min-width: 0; }
  body.page-store .store-arrival-grid :is(p, small, .store-taxi__address) { overflow-wrap: anywhere; }
}

/* Shared header typography: match the home page on every route.
   Keep navigation independent of page body/editorial font inheritance. */
body .site-header :is(.nav > a, .language-switcher a, .header-booking, .header-language-select, .menu-toggle),
body .mobile-drawer-links a {
  font-family: var(--don-font-body) !important;
  font-style: normal;
  text-transform: none;
}
body .site-header .nav > a {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 27px !important;
  letter-spacing: -.02em !important;
}
body .site-header .language-switcher a {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 27px !important;
  letter-spacing: normal !important;
}
body .site-header .language-switcher a[aria-current="page"] { font-weight: 800 !important; }
body .site-header .header-booking {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: -.03em !important;
}
body .mobile-drawer-links a {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  letter-spacing: -.035em !important;
}
@media (max-width: 680px) {
  body .site-header .nav > a { font-size: 16px !important; line-height: 24px !important; }
  body .site-header .header-booking { font-size: 12px !important; }
}

/* Shared desktop header: keep every locale at one measured type scale. */
@media (min-width: 1021px) {
  body .site-header .header-inner { gap: 16px; }
  body .site-header .brandmark { min-width: 0; flex: 0 1 auto; }
  body .site-header .brandmark strong { font-size: clamp(19px, 2vw, 26px) !important; }
  body .site-header .nav { gap: 12px; flex: 0 0 auto; }
  body .site-header .nav > a { white-space: nowrap; flex-shrink: 0; font-size: clamp(14px, 1.25vw, 18px) !important; }
}