/* Nomi Go shared visual system. Loaded after each page's layout styles.
   Keep route-specific dimensions, scrolling, state and semantic colors intact. */
:root {
  --ngo-bg: #10090b;
  --ngo-night: #160d10;
  --ngo-surface: #1b1114;
  --ngo-card: #211518;
  --ngo-card-raised: #28191d;
  --ngo-text: #f7f0e6;
  --ngo-muted: #c8bbb1;
  --ngo-subtle: #b0a199;
  --ngo-gold: #d4aa63;
  --ngo-gold-bright: #f0d7a6;
  --ngo-border: rgba(247, 240, 230, .13);
  --ngo-border-soft: rgba(247, 240, 230, .08);
  --ngo-selected: rgba(212, 170, 99, .12);
  --ngo-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --ngo-brand-font: "Shippori Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --ngo-radius-card: 18px;
  --ngo-radius-control: 14px;
  --ngo-radius-input: 12px;
  --ngo-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  --ngo-primary: linear-gradient(125deg, #f4e2bd, #dfbd80 48%, #cfa35b);
  /* Legacy token aliases keep every page on the same palette. */
  --ink: var(--ngo-bg);
  --bg: var(--ngo-bg);
  --night: var(--ngo-night);
  --hero: #2a1117;
  --surface: var(--ngo-surface);
  --card: var(--ngo-card);
  --card-raised: var(--ngo-card-raised);
  --cream: var(--ngo-text);
  --paper: var(--ngo-text);
  --text: var(--ngo-text);
  --muted: var(--ngo-muted);
  --lgray: var(--ngo-subtle);
  --gold: var(--ngo-gold);
  --gold-bright: var(--ngo-gold-bright);
  --gold-pale: var(--ngo-gold-bright);
  --bright: var(--ngo-gold-bright);
  --gold-text: var(--ngo-gold);
  --gold-text-bright: var(--ngo-gold-bright);
  --gold-text-pale: var(--ngo-gold-bright);
  --gold-bg: var(--ngo-selected);
  --wine: #682332;
  --wine-true: #4a1721;
  --wine-2: #682332;
  --border: var(--ngo-border);
  --border2: var(--ngo-border-soft);
  --line: var(--ngo-border);
  --line-soft: var(--ngo-border-soft);
}

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body[data-ngo-page] {
  background-color: var(--ngo-bg);
  color: var(--ngo-text);
  font-family: var(--ngo-font);
  font-feature-settings: normal;
  letter-spacing: .015em;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}
body[data-ngo-page] :is(button, input, select, textarea) { font-family: var(--ngo-font); }
body[data-ngo-page] :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ngo-gold-bright);
  outline-offset: 4px;
}
body[data-ngo-page] :is(input, textarea)::placeholder { color: var(--ngo-subtle); opacity: 1; }
body[data-ngo-page] :is(button, a) { -webkit-tap-highlight-color: transparent; }
body[data-ngo-page] :is(input, textarea, select) { font-variant-numeric: tabular-nums; }

/* App: shared parts serve all 44 routes. Do not override body scrolling. */
body[data-ngo-page="app"] #app[data-screen] :is(.hdr-title, .head-title) {
  font: 700 20px/1.4 var(--ngo-font);
  letter-spacing: .015em;
}
body[data-ngo-page="app"] #app[data-screen] :is(.screen-intro-title, .drink-profile-intro-title, .idv-info-title,
  .email-verify-title, .inquiry-intro-title, .line-login-prompt-title) {
  font: 700 23px/1.5 var(--ngo-font);
  letter-spacing: .01em;
  text-wrap: balance;
}
body[data-ngo-page="app"] #app[data-screen] :is(.screen-intro-note, .drink-profile-intro-copy, .idv-info-copy,
  .idv-key-point, .line-guide-copy, .line-benefit, .line-step, .email-verify-copy,
  .inquiry-intro-copy, .flow-note, .wait-s) {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ngo-muted);
}
body[data-ngo-page="app"] #app[data-screen] :is(.auth-field-label, .inquiry-field-label, .cond-label,
  .cardreg-field-label, .sec-label) {
  font: 700 12px/1.6 var(--ngo-font);
  letter-spacing: .04em;
}
body[data-ngo-page="app"] #app[data-screen] :is(.hdr-step, .stp-rest) { font-size: 11px; letter-spacing: .06em; }
body[data-ngo-page="app"] #app[data-screen] :is(.auth-form-card, .drink-profile-section, .idv-info-card,
  .line-guide-card, .inquiry-form) {
  border-radius: var(--ngo-radius-card);
  border-color: var(--ngo-border);
  background-color: var(--ngo-card);
}
body[data-ngo-page="app"] #app[data-screen] .btn {
  min-height: 56px;
  border-radius: var(--ngo-radius-control);
  font: 700 16px/1.5 var(--ngo-font);
  letter-spacing: .02em;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
body[data-ngo-page="app"] #app[data-screen] .btn-wine {
  background: var(--ngo-primary);
  color: #24160d;
  border: 1px solid rgba(240, 215, 166, .55);
  box-shadow: 0 8px 22px rgba(212, 170, 99, .14), inset 0 1px 0 rgba(255, 255, 255, .4);
}
body[data-ngo-page="app"] #app[data-screen] .btn:active { transform: translateY(1px); }
body[data-ngo-page="app"] #app[data-screen] .btn:disabled { box-shadow: none; transform: none; }
body[data-ngo-page="app"] #app[data-screen] :is(.inp, .chat-inp, .email-compose select.inp, .birthdate-parts .inp) {
  font-size: 16px;
  border-radius: var(--ngo-radius-input);
}
body[data-ngo-page="app"] #app[data-screen] .inp:focus {
  border-color: var(--ngo-gold);
  box-shadow: 0 0 0 3px var(--ngo-selected);
}
body[data-ngo-page="app"] #app[data-screen] :is(.choice-btn, .sel-btn, .check-item, .range-btn) {
  border-radius: var(--ngo-radius-control);
  border-width: 1px;
}
body[data-ngo-page="app"] #app[data-screen] :is(.choice-btn, .sel-btn, .check-item, .range-btn, .tag-chip).on {
  border-color: var(--ngo-gold);
  background: var(--ngo-selected);
  color: var(--ngo-gold-bright);
}
body[data-ngo-page="app"] #app[data-screen="recruit"] .choice-btn.on > span:last-child {
  color: var(--ngo-gold-bright) !important;
}
body[data-ngo-page="app"] #app[data-screen] :is(.area-card, .mode-card) { border-radius: var(--ngo-radius-card); }
body[data-ngo-page="app"] #app[data-screen] :is(.area-card-title, .mode-card-title) { font-family: var(--ngo-font); }
body[data-ngo-page="app"] #app[data-screen] :is(.hdr-back, .back) { min-height: 44px; }
body[data-ngo-page="app"] #app[data-screen] .tabbar-i .lb { font-size: 11px; font-weight: 700; }
body[data-ngo-page="app"] #app[data-screen] :is(.home-context-sub, .home-fact-k, .home-fact-s) { font-size: 12px; line-height: 1.6; }
body[data-ngo-page="app"] #app[data-screen] .home-fact-v { font-variant-numeric: tabular-nums; }
body[data-ngo-page="app"] #app[data-screen] .home-secondary-link { min-height: 44px; font-size: 13px; }

/* Public information pages: comfortable reading and one header treatment. */
body[data-ngo-page="document"] { line-height: 1.9; }
body[data-ngo-page="document"] .bar {
  min-height: 72px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px;
  background: rgba(16, 9, 11, .96);
  border-color: var(--ngo-border-soft);
}
body[data-ngo-page="document"] .bar .logo {
  font: 700 22px/1.2 var(--ngo-brand-font);
  color: var(--ngo-gold-bright);
}
body[data-ngo-page="document"] .bar .back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 60%;
  padding: 8px 12px;
  border: 1px solid var(--ngo-border);
  border-radius: 12px;
  background: var(--ngo-surface);
  color: var(--ngo-muted);
  font: 500 12px/1.5 var(--ngo-font);
  text-decoration: none;
}
body[data-ngo-page="document"] main { padding-top: 36px; padding-bottom: 48px; }
body[data-ngo-page="document"] h1 {
  font: 700 clamp(24px, 5vw, 30px)/1.5 var(--ngo-font);
  color: var(--ngo-text);
  letter-spacing: .01em;
  margin-bottom: 12px;
}
body[data-ngo-page="document"] h2 {
  font: 700 18px/1.6 var(--ngo-font);
  color: var(--ngo-gold-bright);
  margin-top: 32px;
  padding-bottom: 12px;
}
body[data-ngo-page="document"] :is(p, li, .doc, .rows, .doc p, .doc li, .tokusho-value p) {
  font-size: 14px;
  line-height: 1.95;
}
body[data-ngo-page="document"] :is(.lead, .doc h3, .tokusho-row h3) { font-family: var(--ngo-font); }
body[data-ngo-page="document"] .lead { font-size: 13px; }
body[data-ngo-page="document"] .box {
  padding: 20px;
  border: 1px solid var(--ngo-border);
  border-radius: var(--ngo-radius-card);
  background: var(--ngo-card);
}
body[data-ngo-page="document"] .foot { color: var(--ngo-muted); border-color: var(--ngo-border-soft); }
body[data-ngo-page="document"] .foot p { font-size: 12px; line-height: 1.9; }
body[data-ngo-page="document"] .foot .flogo { font-family: var(--ngo-brand-font); }

/* Reservation uses the same type, cards, controls and selection treatment. */
body[data-ngo-page="reservation"] .brand { font: 700 25px/1.2 var(--ngo-brand-font); }
body[data-ngo-page="reservation"] h1 { font: 700 28px/1.5 var(--ngo-font); letter-spacing: .01em; }
body[data-ngo-page="reservation"] :is(p, .notes p, .optional, .consent) { font-size: 14px; line-height: 1.8; }
body[data-ngo-page="reservation"] :is(.member, .day, .notes, .summary, #auth-box) {
  border-radius: var(--ngo-radius-card);
  background-color: var(--ngo-card);
  border-color: var(--ngo-border);
}
body[data-ngo-page="reservation"] :is(.day, .notes, .summary) { padding: 18px; }
body[data-ngo-page="reservation"] .choice span { border-radius: var(--ngo-radius-control); border-width: 1px; }
body[data-ngo-page="reservation"] .choice input:checked + span {
  background: var(--ngo-selected);
  border-color: var(--ngo-gold);
  color: var(--ngo-gold-bright);
}
body[data-ngo-page="reservation"] :is(.submit, .back) {
  min-height: 56px;
  border-radius: var(--ngo-radius-control);
  font: 700 16px/1.5 var(--ngo-font);
}
body[data-ngo-page="reservation"] .submit { background: var(--ngo-primary); color: #24160d; }
body[data-ngo-page="reservation"] .back { background: var(--ngo-surface); }
body[data-ngo-page="reservation"] :is(.age-range select, .demo-controls select) { font-size: 16px; }
body[data-ngo-page="reservation"] .age-range { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
body[data-ngo-page="reservation"] .age-range-wrap { min-width: 0; }
body[data-ngo-page="reservation"] #auth-box :is(#login-email, #login-password) {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  background: var(--ngo-surface);
  color: var(--ngo-text);
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-input) !important;
  font-size: 16px;
}
body[data-ngo-page="reservation"] #auth-box :is(#login-email, #login-password):focus {
  border-color: var(--ngo-gold) !important;
  box-shadow: 0 0 0 3px var(--ngo-selected);
}
body[data-ngo-page="reservation"] :is(.hint, .bottom, .age-range-note, .age-range-wrap label, .notes summary, .slot-state, .flow span) {
  font-size: 12px;
  line-height: 1.7;
}
body[data-ngo-page="reservation"] .fee { font-size: 13px !important; }
body[data-ngo-page="reservation"] .first-view { background: var(--ngo-bg); }
body[data-ngo-page="reservation"] .first-view::after {
  background: linear-gradient(180deg, rgba(16, 9, 11, .24), rgba(16, 9, 11, .4) 38%, rgba(16, 9, 11, .88) 85%, var(--ngo-bg));
}

/* Completion and ticket pages keep their distinct layouts. */
body[data-ngo-page="payment"] .card { background: var(--ngo-card); border-radius: var(--ngo-radius-card); padding: 28px 24px; }
body[data-ngo-page="payment"] h1 { font: 700 24px/1.55 var(--ngo-font); }
body[data-ngo-page="payment"] :is(p, .note) { font-size: 14px; line-height: 1.85; }
body[data-ngo-page="payment"] a.btn {
  background: var(--ngo-primary);
  color: #24160d;
  border-radius: var(--ngo-radius-control);
  min-height: 56px;
  font: 700 16px/1.5 var(--ngo-font);
}
body[data-ngo-page="payment"] .sub { font-size: 12px; }
body[data-ngo-page="ticket"] :is(.note h2, .row dt, .row dd) { font-family: var(--ngo-font); }
body[data-ngo-page="ticket"] :is(.note p, .row dd) { font-size: 14px; line-height: 1.8; }
body[data-ngo-page="ticket"] :is(.row dt, .foot) { font-size: 12px; color: var(--ngo-muted); }
body[data-ngo-page="ticket"] .btn { border-radius: var(--ngo-radius-control); min-height: 56px; font: 700 16px/1.5 var(--ngo-font); }

/* Operations: maintain dashboard/sidebar and all judgment status colors. */
body[data-ngo-page="admin"] :is(.card, .dash-card) { border-radius: var(--ngo-radius-card); padding: 18px; }
body[data-ngo-page="admin"] h1 { font-size: 24px; line-height: 1.5; color: var(--ngo-text); }
body[data-ngo-page="admin"] h2 { font-size: 17px; line-height: 1.6; }
body[data-ngo-page="admin"] :is(input, select, textarea) { border-radius: var(--ngo-radius-input); font-size: 16px; }
body[data-ngo-page="admin"] :is(button, .tab, .tab2) { min-height: 44px; border-radius: 12px; }
body[data-ngo-page="admin"] .btn-main { background: var(--ngo-primary); color: #24160d; min-height: 52px; }
body[data-ngo-page="admin"] :is(.meta, .hint, .note, .sub, .dash-label) { font-size: 13px; line-height: 1.75; }
body[data-ngo-page="admin"] .dash-num { font-size: 28px; font-variant-numeric: tabular-nums; }
body[data-ngo-page="admin"] .top { gap: 12px; flex-wrap: wrap; align-items: flex-start; }
body[data-ngo-page="admin"] :is(#login, #mfaCode, #mfaResume) { max-width: 480px; margin: 40px auto; }
body[data-ngo-page="admin"] #mfaSetup { max-width: 720px; margin: 24px auto; }
body[data-ngo-page="admin"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-width: 0;
  padding: 12px;
  background: var(--ngo-surface);
  color: var(--ngo-text);
  border: 1px solid var(--ngo-border);
}
body[data-ngo-page="admin"] :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 48px; }
body[data-ngo-page="admin"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--ngo-gold);
  box-shadow: 0 0 0 3px var(--ngo-selected);
}
body[data-ngo-page="admin"] textarea { min-height: 96px; line-height: 1.75; }
body[data-ngo-page="admin"] :is(.toolbar select, .match-review-panel select) { width: 100%; max-width: 100%; }
body[data-ngo-page="admin"] :is(.btn-sm, .foldbtn) { background: var(--ngo-card-raised); border: 1px solid var(--ngo-border); }
body[data-ngo-page="admin"] :is(.btn-send, .btn-copy:not(.done)) { background: var(--ngo-primary); color: #24160d; }
body[data-ngo-page="admin"] :is(.review-box, .match-review-panel, .x-preview, .fields) { border-radius: var(--ngo-radius-input); }
body[data-ngo-page="admin"] :is(.review-box, .x-preview, .secret, .imgs a, .fl, .recruit-chip) { background: var(--ngo-surface); }
body[data-ngo-page="admin"] .match-review-panel { background: var(--ngo-card-raised); }
body[data-ngo-page="admin"] .tab2.on { background: var(--ngo-selected); color: var(--ngo-gold-bright); border-color: var(--ngo-gold); }
body[data-ngo-page="admin"] :is(.status, .tag, .recruit-chip) { font-size: 12px; line-height: 1.5; }
body[data-ngo-page="admin"] .status { padding: 4px 9px; }
body[data-ngo-page="admin"] .fv { min-width: 0; font-size: 13px; }
body[data-ngo-page="admin"] .decision-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-ngo-page="admin"] .decision-buttons > button { width: 100%; min-width: 0; margin: 0; line-height: 1.5; }
body[data-ngo-page="admin"] .tab { white-space: normal; line-height: 1.5; }
body[data-ngo-page="admin"] .acts > button { min-width: 0; }
body[data-ngo-page="admin"] .acts { flex-wrap: wrap; gap: 10px; }
body[data-ngo-page="admin"] .tab .tag { margin-left: 4px; }
body[data-ngo-page="admin"] .imgs a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--ngo-radius-input); }
body[data-ngo-page="admin"] :is(.review-box, .replied, .x-preview) { background: var(--ngo-surface); border-radius: var(--ngo-radius-input); font-size: 13px; line-height: 1.8; }
body[data-ngo-page="admin"] #inq .row[style*="opacity:0.45"] { opacity: 1 !important; }
body[data-ngo-page="admin"] button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
body[data-ngo-page="admin"] :is(.tiny, .empty) { font-size: 13px; line-height: 1.8; }
body[data-ngo-page="admin"] .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; }

@media (max-width: 520px) {
  body[data-ngo-page="admin"] .decision-buttons { grid-template-columns: 1fr; }
  body[data-ngo-page="admin"] :is(#login, #mfaCode, #mfaResume) { margin-top: 24px; }
}
@media (max-width: 620px) {
  body[data-ngo-page="admin"] .acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-ngo-page="admin"] .acts > button { width: 100%; }
}
@media (max-width: 380px) {
  body[data-ngo-page="admin"] .acts { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body[data-ngo-page="admin"] .top > div:first-child { flex-basis: 100%; }
}

@media (max-width: 380px) {
  body[data-ngo-page="document"] .bar { padding-inline: 14px; gap: 8px; }
  body[data-ngo-page="document"] .bar .back { font-size: 11px; padding-inline: 8px; }
  body[data-ngo-page="reservation"] :is(.day, .notes, .summary) { padding: 14px; }
  body[data-ngo-page="app"] #app[data-screen] .birthdate-parts .inp { padding-left: 5px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-ngo-page] { scroll-behavior: auto; }
  body[data-ngo-page] *, body[data-ngo-page] *::before, body[data-ngo-page] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}