/* Shared consumer palette: neutral ink and gray surfaces in every theme.
   Brand artwork keeps its original colors. Error/warning/success roles remain
   semantic, rather than turning every status into an ordinary label. */
:root,
body[data-site-theme="light"] {
  --lotbi-bg-primary: #ffffff;
  --lotbi-surface-primary: #ffffff;
  --lotbi-surface-elevated: #ffffff;
  --lotbi-surface-subtle: #f7f7f7;
  --lotbi-surface-hover: #f0f0f0;
  --lotbi-text-primary: #212121;
  --lotbi-text-secondary: var(--lotbi-text-primary);
  --lotbi-text-muted: var(--lotbi-text-primary);
  --lotbi-text-disabled: #8a8a8a;
  --lotbi-link-primary: #212121;
  --lotbi-link-hover: var(--lotbi-text-primary);
  --lotbi-link-active: #212121;
  --lotbi-border-default: #e5e5e5;
  --lotbi-border-strong: #c9c9c9;
  --lotbi-focus-ring: #454545;
  --lotbi-error-text: #a02645;
  --lotbi-warning-text: #8a4b16;
  --lotbi-success-text: #247647;
  --lotbi-info-text: var(--lotbi-text-primary);
  --lotbi-selected-bg: #f0f0f0;
  --lotbi-selected-text: #212121;

  --lotbi-nav-history-text: var(--lotbi-text-primary);
  --lotbi-nav-history-text-active: #212121;

  --lotbi-brand-ink: #212121;
  --lotbi-brand-solid-bg: #212121;
  --lotbi-brand-solid-bg-hover: #3b3b3b;
  --lotbi-brand-solid-text: #ffffff;
}

body[data-site-theme="light"] { color-scheme: light; }

body[data-site-theme="dark"] {
  color-scheme: dark;
  --lotbi-bg-primary: #212121;
  --lotbi-surface-primary: #212121;
  --lotbi-surface-elevated: #2f2f2f;
  --lotbi-surface-subtle: #212121;
  --lotbi-surface-hover: #353535;
  --lotbi-text-primary: #f5f5f5;
  --lotbi-text-secondary: var(--lotbi-text-primary);
  --lotbi-text-muted: var(--lotbi-text-primary);
  --lotbi-text-disabled: #949494;
  --lotbi-link-primary: #ededed;
  --lotbi-link-hover: var(--lotbi-text-primary);
  --lotbi-link-active: #dedede;
  --lotbi-border-default: #424242;
  --lotbi-border-strong: #5b5b5b;
  --lotbi-focus-ring: #ededed;
  --lotbi-error-text: #fca5a5;
  --lotbi-warning-text: #f2b774;
  --lotbi-success-text: #86efac;
  --lotbi-info-text: var(--lotbi-text-primary);
  --lotbi-selected-bg: #eeeeee;
  --lotbi-selected-text: #212121;

  --lotbi-nav-history-text: var(--lotbi-text-primary);
  --lotbi-nav-history-text-active: #f5f5f5;

  --lotbi-brand-ink: #f5f5f5;
  --lotbi-brand-solid-bg: #f5f5f5;
  --lotbi-brand-solid-bg-hover: #ffffff;
  --lotbi-brand-solid-text: #212121;
}

@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"],

  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) {
    color-scheme: dark;
    background: #212121;
    color: #f5f5f5;
    --lotbi-bg-primary: #212121;
    --lotbi-surface-primary: #212121;
    --lotbi-surface-elevated: #2f2f2f;
    --lotbi-surface-subtle: #212121;
    --lotbi-surface-hover: #353535;
    --lotbi-text-primary: #f5f5f5;
    --lotbi-text-secondary: var(--lotbi-text-primary);
    --lotbi-text-muted: var(--lotbi-text-primary);
    --lotbi-text-disabled: #949494;
    --lotbi-link-primary: #ededed;
    --lotbi-link-hover: var(--lotbi-text-primary);
    --lotbi-link-active: #dedede;
    --lotbi-border-default: #424242;
    --lotbi-border-strong: #5b5b5b;
    --lotbi-focus-ring: #ededed;
    --lotbi-error-text: #fca5a5;
    --lotbi-warning-text: #f2b774;
    --lotbi-success-text: #86efac;
    --lotbi-info-text: var(--lotbi-text-primary);
    --lotbi-selected-bg: #eeeeee;
    --lotbi-selected-text: #212121;

    --lotbi-nav-history-text: var(--lotbi-text-primary);
    --lotbi-nav-history-text-active: #f5f5f5;

    --lotbi-brand-ink: #f5f5f5;
    --lotbi-brand-solid-bg: #f5f5f5;
    --lotbi-brand-solid-bg-hover: #ffffff;
    --lotbi-brand-solid-text: #212121;
  }
}

html[data-site-theme-bootstrap="dark"] body:not([data-site-theme]) {
  color-scheme: dark;
  background: #212121;
  color: #f5f5f5;
  --lotbi-bg-primary: #212121;
  --lotbi-surface-primary: #212121;
  --lotbi-surface-elevated: #2f2f2f;
  --lotbi-surface-subtle: #212121;
  --lotbi-surface-hover: #353535;
  --lotbi-text-primary: #f5f5f5;
  --lotbi-text-secondary: var(--lotbi-text-primary);
  --lotbi-text-muted: var(--lotbi-text-primary);
  --lotbi-text-disabled: #949494;
  --lotbi-link-primary: #ededed;
  --lotbi-link-hover: var(--lotbi-text-primary);
  --lotbi-link-active: #dedede;
  --lotbi-border-default: #424242;
  --lotbi-border-strong: #5b5b5b;
  --lotbi-focus-ring: #ededed;
  --lotbi-error-text: #fca5a5;
  --lotbi-warning-text: #f2b774;
  --lotbi-success-text: #86efac;
  --lotbi-info-text: var(--lotbi-text-primary);
  --lotbi-selected-bg: #eeeeee;
  --lotbi-selected-text: #212121;

  --lotbi-nav-history-text: var(--lotbi-text-primary);
  --lotbi-nav-history-text-active: #f5f5f5;

  --lotbi-brand-ink: #f5f5f5;
  --lotbi-brand-solid-bg: #f5f5f5;
  --lotbi-brand-solid-bg-hover: #ffffff;
  --lotbi-brand-solid-text: #212121;
}

body[data-site-theme="dark"] {
  background: var(--lotbi-bg-primary);
  color: var(--lotbi-text-primary);
}
body[data-site-theme="dark"] :where(.site-modal-description, .profile-contract-note, .profile-popover-summary-handle, .profile-popover-summary-email, .profile-popover-summary-plan, .chat-message-meta, .chat-message-loading) {
  color: var(--lotbi-text-muted);
}
body[data-site-theme="dark"] :where(.help-links a, .lotbi-box-card-source a, .lotbi-rich-card-source a, .chat-message-body a) {
  color: var(--lotbi-link-primary);
}
body[data-site-theme="dark"] :where(.help-links a, .lotbi-box-card-source a, .lotbi-rich-card-source a, .chat-message-body a):hover,
body[data-site-theme="dark"] :where(.help-links a, .lotbi-box-card-source a, .lotbi-rich-card-source a, .chat-message-body a):focus-visible {
  color: var(--lotbi-link-hover);
}
body[data-site-theme="dark"] :where(.site-readonly-field, .site-field input, .site-field select, .color-option) {
  border-color: var(--lotbi-border-strong);
  background: var(--lotbi-surface-primary);
  color: var(--lotbi-text-primary);
}
body[data-site-theme="dark"] .site-readonly-field span { color: var(--lotbi-text-muted); }
body[data-site-theme="dark"] .site-field-error { color: var(--lotbi-error-text); }
body[data-site-theme="dark"] .site-button-secondary {
  border-color: var(--lotbi-border-strong);
  background: var(--lotbi-surface-primary);
  color: var(--lotbi-text-primary);
}
body[data-site-theme="dark"] .help-links a:hover,
body[data-site-theme="dark"] .help-links a:focus-visible { background: var(--lotbi-surface-hover); }

body[data-site-theme="dark"] :where(.chat-sidebar, .mobile-nav-drawer, .sidebar-account-footer) {
  border-color: var(--lotbi-border-default);
  background: var(--lotbi-bg-primary);
  color: var(--lotbi-text-primary);
}
body[data-site-theme="dark"] :where(.nav-item, .nav-section-title, .sidebar-account-name, .sidebar-account-handle) {
  color: var(--lotbi-text-secondary);
}

body[data-site-theme="dark"] :where(.nav-item-primary) {
  border-color: var(--lotbi-border-default);
  background: var(--lotbi-surface-elevated);
  color: var(--lotbi-text-primary);
  box-shadow: none;
}
body[data-site-theme="dark"] :where(.nav-item:hover, .nav-item:focus-visible, .conversation-history-menu button:hover, .conversation-history-menu button:focus-visible) {
  background: var(--lotbi-surface-hover);
}
body[data-site-theme="dark"] .conversation-history-menu {
  border-color: var(--lotbi-border-default);
  background: var(--lotbi-surface-elevated);
  color: var(--lotbi-text-primary);
}

body[data-site-theme="dark"] :where(.calendar-nav-button, .calendar-title-button, .calendar-today-button, .calendar-mode-tab, .calendar-year-month, .calendar-date-cell, .calendar-day-event, .calendar-day-toggle, .calendar-day-close) {
  border-color: var(--lotbi-border-strong);
  background: var(--lotbi-surface-primary);
  color: var(--lotbi-text-primary);
}
body[data-site-theme="dark"] :where(.calendar-event-time, .calendar-event-overflow, .calendar-unscheduled-note, .calendar-day-event time, .calendar-day-event small, .calendar-mobile-event-count) {
  color: var(--lotbi-text-muted);
}
body[data-site-theme="dark"] :where(.calendar-event-chip, .calendar-day-heading, .calendar-day-event strong) {
  color: var(--lotbi-text-primary);
}
body[data-site-theme="dark"] .calendar-event-chip:hover { background: var(--lotbi-surface-hover); }
body[data-site-theme="dark"] .calendar-attention-marker { color: var(--lotbi-warning-text); }
body[data-site-theme="dark"] :where(.calendar-editor-dialog, .calendar-delete-confirm-dialog) {
  border-color: var(--lotbi-border-default);
  background: var(--lotbi-surface-elevated);
  color: var(--lotbi-text-primary);
}
body[data-site-theme="dark"] :where(.calendar-editor-title, .calendar-editor-date, .calendar-editor-time, .calendar-editor-amount, .calendar-editor-category, .calendar-editor-memo, .calendar-editor-place, .calendar-editor-merchant) {
  border-color: var(--lotbi-border-strong);
  background: var(--lotbi-surface-primary);
  color: var(--lotbi-text-primary);
}

body[data-site-theme="dark"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--lotbi-focus-ring) !important;
  outline-offset: 2px;
}

/* SITE-CHAT-COMPOSER-DARK-FOCUS-01 — the chat input is one rounded composer.
   A focused textarea always matches :focus-visible (tap or type), and the
   !important ring above reached the bare textarea, so in Dark a light
   4px-cornered rectangle sat inside the rounded composer whenever it was used
   (Samsung Internet, 2026-10-09). Light already keeps the textarea ring off
   in home-chat.css. Focus is not removed, it moves: the composer that holds
   the textarea turns its own rounded edge to the focus colour. */
body[data-site-theme="dark"] .chat-composer .chat-input:focus-visible {
  outline: none !important;
}
body[data-site-theme="dark"] .chat-composer-stack .chat-composer:focus-within {
  border-color: var(--lotbi-focus-ring);
  box-shadow: none;
}

/* SITE-HEADER-AUTH-BUTTONS-DARK-01 — 로그인 kept the Light edge (#dde3ee) in
   Dark: a bright ring around a dark pill next to 회원가입, whose edge is its
   own fill. Dark takes the theme's strong border; ink and size are shared. */
body[data-site-theme="dark"] .account-login {
  border-color: var(--lotbi-border-strong);
}

@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"] {
    background: var(--lotbi-bg-primary);
    color: var(--lotbi-text-primary);
  }
  body[data-site-theme="system"] :where(.chat-home-shell, .chat-sidebar, .mobile-nav-drawer) {
    background: var(--lotbi-bg-primary);
    color: var(--lotbi-text-primary);
  }

  body[data-site-theme="system"] :where(.nav-item, .nav-section-title, .sidebar-account-name, .sidebar-account-handle) {
    color: var(--lotbi-text-secondary);
  }
  body[data-site-theme="system"] :where(.chat-sidebar, .mobile-nav-drawer, .sidebar-account-footer) {
    border-color: var(--lotbi-border-default);
  }
  body[data-site-theme="system"] :where(.nav-item-primary) {
    border-color: var(--lotbi-border-default);
    background: var(--lotbi-surface-elevated);
    color: var(--lotbi-text-primary);
    box-shadow: none;
  }
  body[data-site-theme="system"] :where(.site-modal, .profile-popover, .response-grade-menu, .conversation-history-menu) {
    border-color: var(--lotbi-border-default);
    background: var(--lotbi-surface-elevated);
    color: var(--lotbi-text-primary);
  }
  body[data-site-theme="system"] :where(.site-modal-description, .profile-contract-note, .profile-popover-summary-handle, .profile-popover-summary-email, .profile-popover-summary-plan, .chat-message-meta, .chat-message-loading) {
    color: var(--lotbi-text-muted);
  }
  body[data-site-theme="system"] :where(.help-links a, .lotbi-box-card-source a, .lotbi-rich-card-source a, .chat-message-body a) {
    color: var(--lotbi-link-primary);
  }
  body[data-site-theme="system"] :where(.help-links a, .lotbi-box-card-source a, .lotbi-rich-card-source a, .chat-message-body a):hover,
  body[data-site-theme="system"] :where(.help-links a, .lotbi-box-card-source a, .lotbi-rich-card-source a, .chat-message-body a):focus-visible {
    color: var(--lotbi-link-hover);
  }
  body[data-site-theme="system"] :where(.site-field input, .site-field select, .color-option, .site-readonly-field, .calendar-nav-button, .calendar-title-button, .calendar-today-button, .calendar-mode-tab, .calendar-year-month, .calendar-date-cell, .calendar-day-event, .calendar-day-toggle, .calendar-day-close, .calendar-editor-title, .calendar-editor-date, .calendar-editor-time, .calendar-editor-amount, .calendar-editor-category, .calendar-editor-memo, .calendar-editor-place, .calendar-editor-merchant) {
    border-color: var(--lotbi-border-strong);
    background: var(--lotbi-surface-primary);
    color: var(--lotbi-text-primary);
  }
  body[data-site-theme="system"] :where(.calendar-event-time, .calendar-event-overflow, .calendar-unscheduled-note, .calendar-day-event time, .calendar-day-event small, .calendar-mobile-event-count, .site-readonly-field span) {
    color: var(--lotbi-text-muted);
  }
  body[data-site-theme="system"] :where(.calendar-event-chip, .calendar-day-heading, .calendar-day-event strong) {
    color: var(--lotbi-text-primary);
  }
  body[data-site-theme="system"] :where(.calendar-editor-dialog, .calendar-delete-confirm-dialog) {
    border-color: var(--lotbi-border-default);
    background: var(--lotbi-surface-elevated);
    color: var(--lotbi-text-primary);
  }
  body[data-site-theme="system"] .calendar-attention-marker { color: var(--lotbi-warning-text); }
  body[data-site-theme="system"] .site-field-error { color: var(--lotbi-error-text); }
  body[data-site-theme="system"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--lotbi-focus-ring) !important;
    outline-offset: 2px;
  }
  /* SITE-CHAT-COMPOSER-DARK-FOCUS-01 — same as Dark above. */
  body[data-site-theme="system"] .chat-composer .chat-input:focus-visible {
    outline: none !important;
  }
  body[data-site-theme="system"] .chat-composer-stack .chat-composer:focus-within {
    border-color: var(--lotbi-focus-ring);
    box-shadow: none;
  }
  body[data-site-theme="system"] .account-login {
    border-color: var(--lotbi-border-strong);
  }
}

.lotbi-brand-logo-dark {
  display: none;
}

body[data-site-theme="dark"] .lotbi-brand-logo-light {
  display: none;
}
body[data-site-theme="dark"] .lotbi-brand-logo-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"] .lotbi-brand-logo-light,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .lotbi-brand-logo-light {
    display: none;
  }

  body[data-site-theme="system"] .lotbi-brand-logo-dark,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .lotbi-brand-logo-dark {
    display: block;
  }
}

html[data-site-theme-bootstrap="dark"] body:not([data-site-theme]) .lotbi-brand-logo-light {
  display: none;
}
html[data-site-theme-bootstrap="dark"] body:not([data-site-theme]) .lotbi-brand-logo-dark {
  display: block;
}

/* SITE-FOCUS-RING-CONTAINER-01: keep the scroll region ring inside the viewport. */
#main-content:focus-visible {
  outline: 3px solid var(--lotbi-focus-ring, #454545);
  outline-offset: -3px;
}

/* DESIGN-VALUES-01 (소유자 10-26 "디자인 값 통일", 단계는 "각 크기별로"; 실측 roomspp-dev\iphone-shots\design-metrics-20261026.jsonl,
   S24 Ultra 384 · S26 Ultra 420 · 아이폰 15 393 · Pro Max 430 · 펼친 폴드 750). One set of sizes for every screen; a screen
   writes var(--lotbi-…) instead of its own px. Stages: ① ~375 (SE·mini·갤럭시 360) ② 376~400 ③ 401~599 ④ 600~.
   글자 크기 '크게'·'아주 크게' stay the screen-level zoom (site-consumer-layout.css SENIOR-TEXT-SIZE-01) on top of these.
   scripts/validate_design_values_01.mjs counts what is written outside them, per stage. */
:root {
  /* 글자 7단 (+16: 큰 폰 본문, 입력칸 — iPhone zooms into an input under 16px) */
  --lotbi-fs-12: 12px;
  --lotbi-fs-13: 13px;
  --lotbi-fs-15: 15px;
  --lotbi-fs-16: 16px;
  --lotbi-fs-17: 17px;
  --lotbi-fs-20: 20px;
  --lotbi-fs-24: 24px;
  --lotbi-fs-28: 28px;
  /* 쓰임 이름 — the stage blocks below move these */
  --lotbi-fs-caption: var(--lotbi-fs-12);
  --lotbi-fs-small: var(--lotbi-fs-13);
  --lotbi-fs-body: var(--lotbi-fs-15);
  --lotbi-fs-input: var(--lotbi-fs-16);
  --lotbi-fs-button: var(--lotbi-fs-17);
  --lotbi-fs-section: var(--lotbi-fs-20);
  --lotbi-fs-title: var(--lotbi-fs-24);
  --lotbi-fs-hero: var(--lotbi-fs-28);
  /* 모서리 3종 */
  --lotbi-radius-card: 16px;
  --lotbi-radius-button: 12px;
  --lotbi-radius-pill: 999px;
  /* 주 버튼 높이 · 좌우 여백 · 카드 칸 수 */
  --lotbi-button-height: 48px;
  --lotbi-gutter: 16px;
  --lotbi-card-columns: 1;
}
/* 보조 글자색: 4.5:1 or more on white (5.4) and on the gray page (#F2F4F6, 4.9); dark: 7.5 on #212121. */
:root,
body[data-site-theme="light"] {
  --lotbi-text-sub: #5f6b7a;
}
body[data-site-theme="dark"] {
  --lotbi-text-sub: #a9b2bc;
}
@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) {
    --lotbi-text-sub: #a9b2bc;
  }
}
html[data-site-theme-bootstrap="dark"] body:not([data-site-theme]) {
  --lotbi-text-sub: #a9b2bc;
}
/* ② 376~400: 아이폰 15·S24 */
@media (min-width: 376px) {
  :root { --lotbi-gutter: 20px; --lotbi-button-height: 52px; }
}
/* ③ 401~599: Pro Max·S26 Ultra */
@media (min-width: 401px) {
  :root { --lotbi-fs-body: var(--lotbi-fs-16); }
}
/* ④ 600~: 펼친 폴드·태블릿 */
@media (min-width: 600px) {
  :root {
    --lotbi-gutter: 24px;
    --lotbi-button-height: 56px;
    --lotbi-fs-body: var(--lotbi-fs-17);
    --lotbi-fs-title: var(--lotbi-fs-28);
    --lotbi-card-columns: 2;
  }
}