/* 예약이음 · warm ivory, jade, apricot.
 * Loaded last by the shared brand layout. Keep layout, motion and product-demo
 * status/category colors in their owning stylesheets; this file owns brand color.
 */
:root {
  --paper: #f6f2ea;
  --paper-rgb: 246 242 234;
  --white: #fffcf7;
  --ink: #193b38;
  --text: #294b46;
  --muted: #536a63;
  --green: #285c53;
  --green-hover: #204c45;
  --mint: #dfe8df;
  --orange: #dda781;
  --clay: #f1decf;
  --line: #ccd8ce;
  --line-strong: #a4b6ab;
  --focus: #965039;
  --dark-surface: #193b38;
  --on-dark: #f6f2ea;
  --muted-on-dark: #c5d6ca;
  --ambient-jade-rgb: 44 185 148;
  --ambient-clay-rgb: 235 134 94;
  --ambient-sage-rgb: 101 186 150;
  --ambient-colors: #f5ce86, #2cb994, #eb865e, #65ba96, #f0bd72, #2cb994;
}
.brand-page { color: var(--text); }
.brand-home.brand-ambient-enabled { color: var(--ink); }
.brand-page h1, .brand-page h2, .brand-page h3 { color: var(--ink); }
.brand-page ::selection { color: var(--ink); background: var(--clay); }
.brand-page :focus-visible { outline-color: var(--focus); }
.brand-page .wordmark { color: var(--ink); }
.brand-page .button-dark { background: var(--green); color: #fff; }
.brand-page .button-dark:hover { background: var(--green-hover); }
.brand-page .button-outline { border-color: var(--line-strong); color: var(--ink); }
.brand-page .button-light { background: var(--paper); color: var(--ink); }
.brand-page .tiny-dot, .brand-page .launch-note > span { background: var(--green); }

/* Navigation and menu: a quiet paper surface, with a warm decorative accent. */
.brand-page .site-header { background: rgb(var(--paper-rgb) / .91); }
.brand-page .site-header.is-scrolled { background: rgb(var(--paper-rgb) / .96); }
.brand-page .menu-panel { border-color: var(--line); background: var(--paper); }
.brand-page .menu-panel::backdrop { background: rgb(25 59 56 / .28); }
.brand-page .menu-orbit { color: var(--orange); }
.brand-page .menu-links a small { color: var(--muted); }
.brand-page .menu-panel-bottom { border-color: var(--line); }
.brand-page .site-footer { background: var(--paper); border-color: var(--line); }
.brand-page .site-footer p, .brand-page .footer-bottom { color: var(--muted); }
.brand-page .footer-bottom { border-color: var(--line); }

/* Background controls (brand-flow.js). The header is already translucent above. */
.brand-page .ambient-toggle {
  background: rgb(var(--paper-rgb) / .94); border-color: var(--line); color: var(--text);
}
.brand-page .ambient-toggle:hover { background: var(--white); border-color: var(--line-strong); }
.brand-page .ambient-toggle[aria-pressed="true"] { background: var(--mint); }
.brand-page .ambient-toggle:focus-visible { outline-color: var(--focus); }

/* Product stories: change the framing, retain colors inside the demo screens. */
.brand-page .feature-index, .brand-page .feature-row { border-color: var(--line-strong); }
.brand-page .feature-row-content li { border-color: var(--line-strong); }
.brand-page .device-experience { background: var(--mint); }
.brand-page .stage-orbit { color: #bdcfc0; }
.brand-page .device-choice { background: rgb(var(--paper-rgb) / .76); border-color: var(--line-strong); }
.brand-page .device-choice button { color: var(--text); }
.brand-page .device-choice button[aria-selected="true"] { color: #fff; background: var(--green); }
.brand-page .device-choice button:hover:not([aria-selected="true"]) { color: var(--ink); background: var(--clay); }
.brand-page .device-side-note { background: var(--clay); border-color: #dfbca2; }
.brand-page .device-switch-heading .example-label, .brand-page .device-caption { color: var(--muted); }
.brand-page .phone-flow { background: var(--white); border-color: var(--line); }
.brand-page .flow-tabs, .brand-page .call-controls { border-color: var(--line); }
.brand-page .flow-tabs button, .brand-page .flow-tabs button > span { color: var(--muted); }
.brand-page .flow-tabs button[aria-selected="true"] { background: var(--mint); color: var(--ink); }
.brand-page .call-avatar { background: var(--clay); color: var(--green); border-color: #dfbca2; }
.brand-page .call-panel > .example-label, .brand-page .call-reply, .brand-page .call-controls p { color: var(--muted); }
.brand-page .call-controls button { color: var(--green); background: transparent; }
.brand-page .motion-story-shared .motion-availability { color: var(--ink); }
.brand-page .motion-story-continuity .motion-availability { color: var(--muted-on-dark); }
.brand-page .motion-stage { background: var(--white); border-color: var(--line); }
.brand-page .motion-stage-heading, .brand-page .motion-stage-caption { border-color: var(--line); }
.brand-page .motion-stage-heading { color: var(--text); }
.brand-page .motion-stage-heading .example-label, .brand-page .motion-stage-caption p { color: var(--muted); }
.brand-page .motion-playback { color: var(--ink); background: var(--mint); border-color: var(--line); }
.brand-page .motion-playback:hover { background: var(--clay); }
.brand-page .continuity-section { color: var(--on-dark); background: var(--dark-surface); }
.brand-page .continuity-section h2 { color: var(--on-dark); }
.brand-page .continuity-copy > p,
.brand-page .continuity-detail li,
.brand-page .continuity-detail summary,
.brand-page .continuity-detail details p { color: var(--muted-on-dark); }
.brand-page .continuity-copy .eyebrow,
.brand-page .continuity-copy .status-label,
.brand-page .continuity-detail li > span { color: var(--orange); }
.brand-page .continuity-copy .status-label,
.brand-page .continuity-detail details { border-color: #67877a; }
.brand-page .continuity-demo { background: #244b43; border-color: #67877a; }
.brand-page :is(.motion-story-shared, .motion-story-continuity) .motion-stage { background: var(--dark-surface); border-color: #67877a; }
.brand-page :is(.motion-story-shared, .motion-story-continuity) .motion-stage-heading { color: var(--on-dark); border-color: #67877a; }
.brand-page :is(.motion-story-shared, .motion-story-continuity) .motion-stage-caption { border-color: #67877a; }
.brand-page :is(.motion-story-shared, .motion-story-continuity) :is(.motion-stage-heading .example-label, .motion-stage-caption p) { color: var(--muted-on-dark); }
.brand-page :is(.motion-story-shared, .motion-story-continuity) .motion-playback { background: var(--clay); border-color: var(--clay); color: var(--ink); }
.brand-page :is(.motion-story-shared, .motion-story-continuity) .motion-playback:hover { background: var(--paper); }

/* Editorial pages and covers. */
.brand-page :is(.page-intro > p, .post-meta, .post-card p, .results-count, .article-meta, .article-excerpt, .article-toc, .back-link) { color: var(--muted); }
.brand-page .cover-calendar { background: var(--white); }
.brand-page .cover-calendar i { background: var(--mint); }
.brand-page .cover-orbit { border-color: #a6bdab; }
.brand-page .cover-menu { background: var(--white); }
.brand-page .cover-notes { background: var(--white); }
.brand-page .editorial-cover.cover-calendar { background: var(--mint); }
.brand-page .editorial-cover.cover-menu { background: var(--clay); }
.brand-page .editorial-cover.cover-notes { background: #e8e5d8; }
.brand-page .cover-plus, .brand-page .cover-loop { color: var(--green); }
.brand-page .cover-wordmark { color: var(--text); }
.brand-page .editorial-cover { color: var(--text); }
.brand-page .cover-notes > .cover-notes { box-shadow: 9px 9px 0 #b8c8ba6b; }
.brand-page .cover-notes i { background: var(--line-strong); }
.brand-page .scope-panel p, .brand-page .category-tabs a { color: var(--muted); }
.brand-page .category-tabs a:hover { background: var(--mint); color: var(--ink); }
.brand-page .category-tabs a.selected { background: var(--green); border-color: var(--green); color: #fff; }
.brand-page .article-body { color: var(--text); }
.brand-page .article-body blockquote { background: var(--mint); border-color: var(--green); color: var(--ink); }
.brand-page .article-body pre { background: var(--dark-surface); color: var(--on-dark); }
.brand-page .article-cta, .brand-page .scope-panel, .brand-page .board-help { background: var(--mint); }
.brand-page .board-row-category, .brand-page .board-row time,
.brand-page .faq-item summary::after, .brand-page .faq-permalink { color: var(--muted); }
.brand-page .board-row-flag { background: var(--clay); color: var(--ink); }
.brand-page .faq-item summary:focus-visible { outline-color: var(--focus); }

/* Early-registration offer: apricot identifies the benefit; jade identifies actions. */
.brand-page .contact-section { color: var(--ink); }
.brand-page .contact-intro h2 em { box-shadow: inset 0 -.31em var(--clay); }
.brand-page .contact-benefit { background: var(--clay); border-color: #dfbca2; }
.brand-page .contact-benefit p { color: var(--text); }
.brand-page .contact-next-steps li > span { border-color: var(--line-strong); }
.brand-page .contact-panel { background: var(--white); border-color: var(--line); }
.brand-page .contact-mode-tabs { background: var(--mint); }
.brand-page .contact-mode-tabs button { color: var(--text); }
.brand-page .contact-mode-tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); }
.brand-page .contact-mode-tabs button > span { background: var(--clay); color: var(--ink); }
.brand-page :is(.contact-form-heading p, .contact-optional, .contact-required, .contact-field-help, .contact-note, .contact-receipt, .contact-more > summary > span, .contact-consent-label b, .contact-privacy summary, .contact-privacy dd, .contact-privacy p) { color: var(--muted); }
.brand-page :is(.contact-field, .contact-more > summary, .contact-devices legend, .contact-devices label, .contact-consent-label, .contact-privacy dt) { color: var(--text); }
.brand-page .contact-form input:not([type="checkbox"]), .brand-page .contact-form textarea { color: var(--ink); background: #fff; border-color: var(--line-strong); }
.brand-page .contact-form input::placeholder, .brand-page .contact-form textarea::placeholder { color: var(--muted); }
.brand-page .contact-more { border-color: var(--line); }
.brand-page .contact-devices label { background: var(--white); border-color: var(--line-strong); }
.brand-page .contact-devices label:has(input:checked) { background: var(--mint); border-color: var(--green); }
.brand-page .contact-form input[type="checkbox"] { accent-color: var(--green); }
.brand-page .contact-privacy[open] > div { background: var(--paper); }
.brand-page .contact-button-primary { background: var(--green); color: #fff; }
.brand-page .contact-button-primary:hover:not(:disabled) { background: var(--green-hover); }
.brand-page .contact-section :is(a, button, input, textarea, summary, [tabindex]):focus-visible { outline-color: var(--focus); }
.brand-page .contact-success-mark { background: var(--mint); color: var(--green); }
.brand-page .contact-success-benefit { background: var(--clay); border-color: #dfbca2; }
.brand-page .contact-success-benefit strong { color: var(--ink); }
.brand-page .contact-success-benefit p, .brand-page .contact-success-eyebrow { color: var(--muted); }

/* Member, pricing and billing screens added on September 23. */
.brand-page :is(.member-card > p, .member-form label small, .member-note, .member-loading, .member-email, .member-billing dt, .member-table th, .pricing-card p, .pricing-amount span, .pricing-policy p, .pricing-extra p) { color: var(--muted); }
/* Existing page styles mark these two text colors important. */
.brand-page .member-check, .brand-page .pricing-footnote { color: var(--muted) !important; }
.brand-page .member-role { color: var(--text); background: var(--mint); }
.brand-page .member-form input:not([type="checkbox"]) { border-color: var(--line-strong); }
.brand-page .member-form input:focus-visible { outline-color: var(--focus); }
.brand-page .member-check input { accent-color: var(--green); }
.brand-page .pricing-policy article { background: var(--mint); }
.brand-page .pricing-policy article:last-child { background: var(--clay); }

/* These small labels sit on the animated field, not an opaque paper surface. */
.brand-home.brand-ambient-enabled :is(.site-footer p, .footer-bottom, .post-meta, .post-meta > span) { color: var(--ink); }
.brand-page :is(.motion-story-shared, .motion-story-phone) .motion-demo > summary { color: var(--ink); }
.brand-page :is(.continuity-section, .motion-story-shared .motion-stage) :focus-visible { outline-color: var(--orange); }

/* Saturated ambient areas need ink for small links and feature labels too. */
.brand-home.brand-ambient-enabled :is(.footer-links, .read-link, .shared-benefits article > span, .feature-row-content li) { color: var(--ink); }

/* Home with the moving background (brand-flow.js): light sections let it show through, tinted panels keep a
   see-through wash, the dark continuity band stays solid. Only while the background layer is on. */
.brand-home.brand-ambient-enabled :is(.freedom-hero, .shared-section, .device-choice-section, .blog-section) { background: transparent; }
.brand-home.brand-ambient-enabled :is(.phone-story, .features-section, .contact-section) { background: rgb(var(--paper-rgb) / .62); }