@import url("/saessak-fonts.css?v=20260815-1");

/*
 * Saessak Contents Studio — shared visual system
 * Visual-only bridge: pages keep their existing DOM, IDs and behavior.
 */

.ss-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html.saessak-main-theme {
  color-scheme: light;
  --ss-paper: #f5f7f0;
  --ss-paper-deep: #edf3e8;
  --ss-white: #ffffff;
  --ss-ink: #20301f;
  --ss-soft: #53634f;
  --ss-forest: #213423;
  --ss-forest-2: #355a36;
  --ss-leaf: #b6df91;
  --ss-leaf-soft: #e5f2d9;
  --ss-line: #d4dfce;
  --ss-danger: #9b4b45;
  --ss-warning: #9a681e;
  --ss-shadow: 0 18px 48px rgba(32, 48, 31, .09);
  --ss-shadow-soft: 0 8px 28px rgba(32, 48, 31, .07);

  /* Compatibility bridge for the existing pages. */
  --bg: var(--ss-paper);
  --bg2: var(--ss-paper-deep);
  --panel: var(--ss-white);
  --surface: var(--ss-white);
  --surface2: var(--ss-paper-deep);
  --paper: var(--ss-white);
  --card: var(--ss-white);
  --cream: var(--ss-paper);
  --ink: var(--ss-ink);
  --text: var(--ss-ink);
  --text-dim: var(--ss-soft);
  --muted: var(--ss-soft);
  --soft: var(--ss-paper-deep);
  --gray: var(--ss-soft);
  --sub: var(--ss-soft);
  --line: var(--ss-line);
  --border: var(--ss-line);
  --accent: var(--ss-forest-2);
  --accent2: #648b55;
  --green: var(--ss-forest-2);
  --green-dark: var(--ss-forest);
  --green-soft: var(--ss-leaf-soft);
  --brown-dark: var(--ss-forest);
  --brown-mid: var(--ss-forest-2);
  --brown-light: #648b55;
  --tan: var(--ss-leaf);
  --tan-light: var(--ss-paper);
  --gold: var(--ss-forest-2);
  --gold2: #648b55;
  --red: var(--ss-danger);
  --amber: var(--ss-warning);
  --shadow: rgba(32, 48, 31, .12);
}

html.saessak-main-theme,
html.saessak-main-theme body,
html.saessak-main-theme button,
html.saessak-main-theme input,
html.saessak-main-theme select,
html.saessak-main-theme textarea {
  font-family: var(--saessak-font-body);
}

html.saessak-main-theme body {
  background-color: var(--ss-paper);
  color: var(--ss-ink);
}

html.saessak-main-theme ::selection {
  background: var(--ss-leaf);
  color: var(--ss-forest);
}

html.saessak-main-theme a {
  text-underline-offset: .18em;
}

html.saessak-main-theme button,
html.saessak-main-theme [role="button"],
html.saessak-main-theme a,
html.saessak-main-theme input,
html.saessak-main-theme select,
html.saessak-main-theme textarea {
  -webkit-tap-highlight-color: transparent;
}

html.saessak-main-theme :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(84, 126, 67, .32) !important;
  outline-offset: 3px !important;
}

html.saessak-main-theme :where(input, select, textarea) {
  accent-color: var(--ss-forest-2);
}

html.saessak-main-theme :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

html.saessak-main-theme * {
  scrollbar-color: #a8bd9d transparent;
  scrollbar-width: thin;
}

html.saessak-main-theme *::-webkit-scrollbar { width: 9px; height: 9px; }
html.saessak-main-theme *::-webkit-scrollbar-track { background: transparent; }
html.saessak-main-theme *::-webkit-scrollbar-thumb {
  background: #a8bd9d;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

/* Standard public pages --------------------------------------------------- */
html.saessak-main-theme.ss-standard body,
html.saessak-main-theme.ss-auth body,
html.saessak-main-theme.ss-legal body {
  background:
    radial-gradient(circle at 10% 0%, rgba(182, 223, 145, .28), transparent 28rem),
    radial-gradient(circle at 100% 26%, rgba(182, 223, 145, .16), transparent 24rem),
    var(--ss-paper) !important;
}

html.saessak-main-theme.ss-standard :where(.card, .box, .order-card, .user-card, .compare-card, .price-section, .terms-card, .inquiry-form),
html.saessak-main-theme.ss-auth :where(.card, .box) {
  background: var(--ss-white) !important;
  border-color: var(--ss-line) !important;
  box-shadow: var(--ss-shadow-soft) !important;
}

html.saessak-main-theme.ss-standard :where(h1, h2, h3, .hero-title, .page-title, .logo-title, .order-card-title),
html.saessak-main-theme.ss-auth :where(h1, h2, h3, .title, .logo-title) {
  color: var(--ss-ink) !important;
}

html.saessak-main-theme.ss-standard :where(p, .hero-sub, .page-desc, .logo-sub, .contact-desc, .hint),
html.saessak-main-theme.ss-auth :where(p, .sub, .spinner, .logo-sub) {
  color: var(--ss-soft) !important;
}

html.saessak-main-theme.ss-standard :where(input, select, textarea),
html.saessak-main-theme.ss-auth :where(input, select, textarea) {
  background: #fbfcf9 !important;
  border-color: var(--ss-line) !important;
  color: var(--ss-ink) !important;
}

html.saessak-main-theme.ss-standard :where(input, select, textarea)::placeholder,
html.saessak-main-theme.ss-auth :where(input, select, textarea)::placeholder {
  color: #889584 !important;
}

html.saessak-main-theme.ss-standard :where(.pay-btn, .inquiry-submit, .btn-primary, .btn-pay),
html.saessak-main-theme.ss-auth :where(.btn, .btn-primary, button#loginButton) {
  background: var(--ss-forest) !important;
  border-color: var(--ss-forest) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(33, 52, 35, .14) !important;
}

html.saessak-main-theme.ss-standard :where(.pay-btn, .inquiry-submit, .btn-primary, .btn-pay):hover:not(:disabled),
html.saessak-main-theme.ss-auth :where(.btn, .btn-primary, button#loginButton):hover:not(:disabled) {
  background: var(--ss-forest-2) !important;
  transform: translateY(-1px);
}

/* Hub -------------------------------------------------------------------- */
html.saessak-main-theme.ss-page-hub body {
  min-height: 100vh;
  padding: clamp(28px, 6vw, 72px) 18px !important;
}

html.saessak-main-theme.ss-page-hub main {
  width: min(760px, 100%);
  margin: 0 auto;
}

html.saessak-main-theme.ss-page-hub h1 {
  color: var(--ss-ink) !important;
  font-size: clamp(28px, 5vw, 44px) !important;
  letter-spacing: -.045em;
}

html.saessak-main-theme.ss-page-hub .description {
  color: var(--ss-soft) !important;
  margin-top: 10px;
}

html.saessak-main-theme.ss-page-hub section {
  margin-top: 28px;
  padding: 22px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--ss-line) !important;
  border-radius: 22px;
  box-shadow: var(--ss-shadow-soft);
}

html.saessak-main-theme.ss-page-hub section h2 {
  color: var(--ss-soft) !important;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html.saessak-main-theme.ss-page-hub .links { gap: 8px !important; }
html.saessak-main-theme.ss-page-hub .page-link {
  min-height: 50px;
  background: var(--ss-paper) !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: 13px !important;
  color: var(--ss-ink) !important;
}

html.saessak-main-theme.ss-page-hub .page-link:hover {
  background: var(--ss-leaf-soft) !important;
  border-color: #b8cca9 !important;
  color: var(--ss-forest) !important;
  transform: translateY(-1px);
}

html.saessak-main-theme.ss-page-hub .page-link span { color: var(--ss-forest-2) !important; }

/* Contact ---------------------------------------------------------------- */
html.saessak-main-theme.ss-page-contact body {
  min-height: 100vh;
  padding: clamp(36px, 7vw, 76px) 18px !important;
}

html.saessak-main-theme.ss-page-contact .logo { margin-bottom: 28px !important; }
html.saessak-main-theme.ss-page-contact .logo-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--ss-forest);
  font-size: 28px !important;
}

html.saessak-main-theme.ss-page-contact .cards,
html.saessak-main-theme.ss-page-contact .inquiry-form { max-width: 620px !important; }

html.saessak-main-theme.ss-page-contact .contact-card {
  min-height: 92px;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--ss-shadow-soft) !important;
}

html.saessak-main-theme.ss-page-contact .contact-card:hover {
  border-color: #b8cca9 !important;
  transform: translateY(-2px);
}

html.saessak-main-theme.ss-page-contact .contact-label { color: var(--ss-ink) !important; }
html.saessak-main-theme.ss-page-contact .contact-value,
html.saessak-main-theme.ss-page-contact .contact-arrow,
html.saessak-main-theme.ss-page-contact .back-link { color: var(--ss-forest-2) !important; }

html.saessak-main-theme.ss-page-contact .inquiry-form {
  padding: clamp(22px, 4vw, 30px) !important;
  border-radius: 22px !important;
}

/* Subscription and mixing payment --------------------------------------- */
html.saessak-main-theme:is(.ss-page-subscribe, .ss-page-pay) body {
  min-height: 100vh;
  padding: clamp(26px, 5vw, 56px) 18px !important;
}

html.saessak-main-theme:is(.ss-page-subscribe, .ss-page-pay) .wrap {
  max-width: 520px !important;
}

html.saessak-main-theme:is(.ss-page-subscribe, .ss-page-pay) .topbar {
  border-bottom-color: var(--ss-line) !important;
}

html.saessak-main-theme:is(.ss-page-subscribe, .ss-page-pay) .logo,
html.saessak-main-theme:is(.ss-page-subscribe, .ss-page-pay) .close-btn {
  color: var(--ss-ink) !important;
}

html.saessak-main-theme:is(.ss-page-subscribe, .ss-page-pay) :where(.user-card, .compare-card, .price-section, .terms-card, .order-card) {
  border-radius: 18px !important;
}

html.saessak-main-theme.ss-page-subscribe .hero-badge,
html.saessak-main-theme.ss-page-pay .upload-badge {
  background: var(--ss-leaf-soft) !important;
  border-color: #bfd5af !important;
  color: var(--ss-forest-2) !important;
}

/* Authentication and status screens ------------------------------------- */
html.saessak-main-theme.ss-auth body {
  min-height: 100vh;
  padding: 24px !important;
}

html.saessak-main-theme.ss-auth :where(.card, .box) {
  border: 1px solid var(--ss-line) !important;
  border-radius: 22px !important;
}

html.saessak-main-theme.ss-auth.ss-status :where(.card, .box) {
  width: min(440px, 100%) !important;
  padding: clamp(28px, 6vw, 46px) !important;
}

html.saessak-main-theme.ss-auth .detail,
html.saessak-main-theme.ss-auth .notice,
html.saessak-main-theme.ss-auth .errcode {
  background: var(--ss-paper) !important;
  border-color: var(--ss-line) !important;
  color: var(--ss-soft) !important;
}

html.saessak-main-theme.ss-auth .detail-row { border-color: var(--ss-line) !important; }
html.saessak-main-theme.ss-auth .detail-row .k { color: var(--ss-soft) !important; }
html.saessak-main-theme.ss-auth .detail-row .v { color: var(--ss-ink) !important; }
html.saessak-main-theme.ss-auth .pro-badge {
  background: var(--ss-leaf-soft) !important;
  border-color: #bfd5af !important;
  color: var(--ss-forest-2) !important;
}

html.saessak-main-theme.ss-auth .strength-bar { background: var(--ss-line) !important; }
html.saessak-main-theme.ss-auth .back-link a { color: var(--ss-forest-2) !important; }

/* Legal documents -------------------------------------------------------- */
html.saessak-main-theme.ss-legal body { line-height: 1.75; }
html.saessak-main-theme.ss-legal .wrap {
  width: min(860px, calc(100% - 28px));
  min-height: auto !important;
  margin: 28px auto 60px !important;
  padding: clamp(28px, 5vw, 58px) !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: 24px;
  box-shadow: var(--ss-shadow);
}

html.saessak-main-theme.ss-legal :where(h1, h2, h3) { color: var(--ss-ink) !important; }
html.saessak-main-theme.ss-legal h1 {
  font-size: clamp(28px, 5vw, 42px) !important;
  letter-spacing: -.04em;
}

html.saessak-main-theme.ss-legal h2 {
  margin-top: 34px !important;
  padding-top: 22px;
  border-top: 1px solid var(--ss-line);
}

html.saessak-main-theme.ss-legal :where(p, li, td, .date) { color: var(--ss-soft) !important; }
html.saessak-main-theme.ss-legal .back { color: var(--ss-forest-2) !important; }
html.saessak-main-theme.ss-legal :where(.highlight, th) {
  background: var(--ss-leaf-soft) !important;
  color: var(--ss-forest) !important;
}

html.saessak-main-theme.ss-legal :where(table, th, td) { border-color: var(--ss-line) !important; }

/* Shared app chrome ------------------------------------------------------ */
html.saessak-main-theme.ss-app :where(header, .topbar, #mixingNavBar) {
  border-color: var(--ss-line);
}

html.saessak-main-theme.ss-app :where(.card, .section, .panel, .status-card, .upload-card, .paid-card, .terms-card, .modal-content, .modal-box, .promo-modal) {
  border-color: var(--ss-line);
  box-shadow: var(--ss-shadow-soft);
}

html.saessak-main-theme.ss-app :where(input, select, textarea):not([type="range"]) {
  border-color: var(--ss-line);
}

html.saessak-main-theme.ss-app :where(.btn-primary, .primary, .submit, .btn-next, .save-btn):not(.danger) {
  background: var(--ss-forest) !important;
  border-color: var(--ss-forest) !important;
  color: #fff !important;
}

html.saessak-main-theme.ss-app :where(.btn-primary, .primary, .submit, .btn-next, .save-btn):hover:not(:disabled) {
  background: var(--ss-forest-2) !important;
}

/* Audio care ------------------------------------------------------------- */
html.saessak-main-theme.ss-page-audio-care body,
html.saessak-main-theme.ss-page-audio-care-admin body {
  background:
    radial-gradient(circle at 8% 0%, rgba(182, 223, 145, .25), transparent 25rem),
    var(--ss-paper) !important;
}

html.saessak-main-theme.ss-page-audio-care header,
html.saessak-main-theme.ss-page-audio-care-admin header {
  background: rgba(245, 247, 240, .9) !important;
  border-bottom: 1px solid var(--ss-line) !important;
  backdrop-filter: blur(14px);
}

html.saessak-main-theme.ss-page-audio-care :where(.section, .start-card),
html.saessak-main-theme.ss-page-audio-care-admin :where(.panel, .weekly) {
  background: rgba(255,255,255,.95) !important;
  border-color: var(--ss-line) !important;
}

html.saessak-main-theme.ss-page-audio-care :where(.hero, .chat),
html.saessak-main-theme.ss-page-audio-care-admin .hero {
  border-color: var(--ss-line) !important;
}

/* Booking and schedule --------------------------------------------------- */
html.saessak-main-theme:is(.ss-page-booking, .ss-page-schedule) header {
  background: var(--ss-forest) !important;
  box-shadow: 0 2px 18px rgba(33,52,35,.22) !important;
}

html.saessak-main-theme:is(.ss-page-booking, .ss-page-schedule) :where(.logo, .btn-login, .btn-settings, .btn-multicursor, .btn-ai, .btn-logout, .staff-identity) {
  color: var(--ss-paper) !important;
}

html.saessak-main-theme:is(.ss-page-booking, .ss-page-schedule) .cal-head {
  background: var(--ss-forest) !important;
}

html.saessak-main-theme:is(.ss-page-booking, .ss-page-schedule) :where(.calendar-wrap, .tab-bar, .lock-box, .modal-box, .client-card, .project-card) {
  background: var(--ss-white) !important;
  border-color: var(--ss-line) !important;
  box-shadow: var(--ss-shadow-soft) !important;
}

html.saessak-main-theme:is(.ss-page-booking, .ss-page-schedule) :where(.tab-btn.active, .btn-primary, .btn-consult) {
  background: var(--ss-forest-2) !important;
  border-color: var(--ss-forest-2) !important;
  color: #fff !important;
}

/* Mixing ----------------------------------------------------------------- */
html.saessak-main-theme.ss-page-mixing #mixingNavBar {
  background: rgba(245,247,240,.92) !important;
  border-bottom: 1px solid var(--ss-line) !important;
}

html.saessak-main-theme.ss-page-mixing :where(.card, .promo-modal) {
  background: var(--ss-white) !important;
  border-color: var(--ss-line) !important;
}

html.saessak-main-theme.ss-page-mixing :where(#ssDrawer, .portfolio-body) {
  background: var(--ss-forest) !important;
  border-color: rgba(255,255,255,.14) !important;
}

html.saessak-main-theme.ss-page-mixing :where(.ss-dlogo, .ss-ditem:hover, .ss-dclose:hover) { color: #fff !important; }
html.saessak-main-theme.ss-page-mixing .ss-ditem.active {
  color: var(--ss-leaf) !important;
  background: rgba(182,223,145,.1) !important;
  border-left-color: var(--ss-leaf) !important;
}

html.saessak-main-theme.ss-page-mixing .waveform-cv { background: #1c2c1e !important; }
html.saessak-main-theme.ss-page-mixing .wv-play { background: rgba(53,90,54,.92) !important; }
html.saessak-main-theme.ss-page-mixing .portfolio-toggle:hover { background: var(--ss-leaf-soft) !important; }

/* MR group buy ----------------------------------------------------------- */
html.saessak-main-theme:is(.ss-page-mr, .ss-page-mr-payment, .ss-page-mr-admin) body {
  background:
    radial-gradient(circle at 92% 3%, rgba(182,223,145,.24), transparent 25rem),
    var(--ss-paper) !important;
}

html.saessak-main-theme:is(.ss-page-mr, .ss-page-mr-payment, .ss-page-mr-admin) header {
  background: rgba(245,247,240,.92) !important;
  border-bottom: 1px solid var(--ss-line) !important;
  backdrop-filter: blur(14px);
}

html.saessak-main-theme:is(.ss-page-mr, .ss-page-mr-payment, .ss-page-mr-admin) :where(.card, .status-card, .song, .weekly, .notice, .stat) {
  border-color: var(--ss-line) !important;
}

html.saessak-main-theme.ss-page-mr .hero {
  background: var(--ss-leaf-soft) !important;
  border-color: #cadfbb !important;
}

html.saessak-main-theme.ss-page-mr .step-no,
html.saessak-main-theme.ss-page-mr .primary,
html.saessak-main-theme.ss-page-mr .join:not(:disabled) {
  background: var(--ss-forest-2) !important;
  border-color: var(--ss-forest-2) !important;
  color: #fff !important;
}

html.saessak-main-theme.ss-page-mr-admin :where(.schedule, .save) {
  background: var(--ss-forest-2) !important;
  border-color: var(--ss-forest-2) !important;
  color: #fff !important;
}

/* Profile ---------------------------------------------------------------- */
html.saessak-main-theme.ss-page-profile body {
  background:
    radial-gradient(circle at 7% 0%, rgba(182,223,145,.22), transparent 22rem),
    var(--ss-paper) !important;
}

html.saessak-main-theme.ss-page-profile .topbar {
  background: rgba(245,247,240,.92) !important;
  border-bottom-color: var(--ss-line) !important;
  backdrop-filter: blur(14px);
}

html.saessak-main-theme.ss-page-profile .card {
  background: var(--ss-white) !important;
  border-color: var(--ss-line) !important;
  box-shadow: var(--ss-shadow-soft) !important;
}

html.saessak-main-theme.ss-page-profile :where(.card-header, .edit-label, .profile-name) { color: var(--ss-ink) !important; }
html.saessak-main-theme.ss-page-profile :where(.profile-email, .card-sub, .empty-text) { color: var(--ss-soft) !important; }

/* Recording -------------------------------------------------------------- */
html.saessak-main-theme.ss-page-recording body {
  background: var(--ss-paper) !important;
  color: var(--ss-ink) !important;
}

html.saessak-main-theme.ss-page-recording .header h1 { color: var(--ss-ink) !important; }
html.saessak-main-theme.ss-page-recording .header p,
html.saessak-main-theme.ss-page-recording .card-sub { color: var(--ss-soft) !important; }

html.saessak-main-theme.ss-page-recording :where(.card, .modal-box, .modal-content, .mix-guide-panel, .lyrics-panel) {
  background: var(--ss-white) !important;
  border-color: var(--ss-line) !important;
  box-shadow: var(--ss-shadow-soft) !important;
}

html.saessak-main-theme.ss-page-recording .pro-status-bar {
  background: var(--ss-forest) !important;
  border-bottom-color: rgba(255,255,255,.14) !important;
}

html.saessak-main-theme.ss-page-recording .pro-status-bar > a,
html.saessak-main-theme.ss-page-recording #proStatusText,
html.saessak-main-theme.ss-page-recording #headerUserName,
html.saessak-main-theme.ss-page-recording #authBtn,
html.saessak-main-theme.ss-page-recording #langBtn {
  color: var(--ss-paper) !important;
}

html.saessak-main-theme.ss-page-recording #proUpgradeBtn,
html.saessak-main-theme.ss-page-recording #guestSignupBtn {
  background: var(--ss-leaf) !important;
  border-color: var(--ss-leaf) !important;
  color: var(--ss-forest) !important;
}

html.saessak-main-theme.ss-page-recording .pro-status-bar.basic .pro-badge-big {
  background: var(--ss-leaf-soft) !important;
  color: var(--ss-forest) !important;
}

html.saessak-main-theme.ss-page-recording :where(#sideDrawer, .drawer-panel) {
  background: var(--ss-forest) !important;
  border-color: rgba(255,255,255,.14) !important;
}

html.saessak-main-theme.ss-page-recording .step-dot.active .circle,
html.saessak-main-theme.ss-page-recording .btn-primary,
html.saessak-main-theme.ss-page-recording .btn-record:not(.recording) {
  background: var(--ss-forest-2) !important;
  border-color: var(--ss-forest-2) !important;
  color: #fff !important;
}

html.saessak-main-theme.ss-page-recording .step-dot.done .circle,
html.saessak-main-theme.ss-page-recording .step-line.done {
  background: #648b55 !important;
  border-color: #648b55 !important;
}

html.saessak-main-theme.ss-page-recording :where(input, select, textarea):not([type="range"]) {
  background: #fbfcf9 !important;
  border-color: var(--ss-line) !important;
  color: var(--ss-ink) !important;
}

/* Planning and crew flows ------------------------------------------------ */
html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) {
  overflow: hidden;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) body {
  background: var(--ss-paper) !important;
  color: var(--ss-ink) !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(.bg-canvas, .dot-bg, #particles) {
  opacity: .32 !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(.topbar, .progress-wrap) {
  background: rgba(245,247,240,.94) !important;
  border-color: var(--ss-line) !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(.screen, .q-wrap, .intro-card, .summary-card, .form-card, .modal-card) {
  background: rgba(255,255,255,.95) !important;
  border-color: var(--ss-line) !important;
  box-shadow: var(--ss-shadow-soft) !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(h1, h2, h3, .title, .logo-text, .question) {
  color: var(--ss-ink) !important;
}

html.saessak-main-theme.ss-page-planning :where(.q-title, .intro-title, .splash-title, .complete-title, .opt-label, .chip-label),
html.saessak-main-theme.ss-page-crew :where(.hero-title, .q-title, .intro-title, .complete-title, .opt-label) {
  color: var(--ss-ink) !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(.subtitle, .desc, .hint, .logo-sub) {
  color: var(--ss-soft) !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(.opt, .chip, .choice, .genre-chip) {
  background: var(--ss-white) !important;
  border-color: var(--ss-line) !important;
  color: var(--ss-ink) !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(.opt.selected, .chip.selected, .choice.selected, .genre-chip.selected) {
  background: var(--ss-leaf-soft) !important;
  border-color: #9fbd8c !important;
  color: var(--ss-forest) !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(#ssDrawer, .ss-drawer) {
  background: var(--ss-forest) !important;
  border-color: rgba(255,255,255,.14) !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(#ssMenuBtnFloat, #ssMenuBtn) {
  background: var(--ss-forest) !important;
  border-color: rgba(255,255,255,.16) !important;
}

html.saessak-main-theme:is(.ss-page-planning, .ss-page-crew) :where(#ssMenuBtnFloat, #ssMenuBtn) span {
  background: var(--ss-paper) !important;
}

/* Upload / delivery ------------------------------------------------------ */
html.saessak-main-theme.ss-page-upload body {
  background:
    radial-gradient(circle at 50% 0%, rgba(182,223,145,.25), transparent 30rem),
    var(--ss-paper) !important;
  color: var(--ss-ink) !important;
}

html.saessak-main-theme.ss-page-upload :where(.upload-card, .paid-card, .terms-card) {
  background: var(--ss-white) !important;
  border-color: var(--ss-line) !important;
  box-shadow: var(--ss-shadow-soft) !important;
}

html.saessak-main-theme.ss-page-upload :where(.upload-title, .done-title, .paid-title, h2, h3) { color: var(--ss-ink) !important; }
html.saessak-main-theme.ss-page-upload :where(.upload-sub, .done-sub, .paid-sub, .progress-label) { color: var(--ss-soft) !important; }
html.saessak-main-theme.ss-page-upload .progress-bar { background: var(--ss-line) !important; }
html.saessak-main-theme.ss-page-upload .progress-fill { background: var(--ss-forest-2) !important; }

/* Motion and compact screens -------------------------------------------- */
html.saessak-main-theme.ss-page-planning .screen,
html.saessak-main-theme.ss-page-crew .screen {
  transform: none !important;
  max-width: 100vw;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  html.saessak-main-theme *,
  html.saessak-main-theme *::before,
  html.saessak-main-theme *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 640px) {
  html.saessak-main-theme :where(button, .btn, [role="button"]) { min-height: 42px; }
  html.saessak-main-theme.ss-legal .wrap { width: calc(100% - 18px); margin-top: 10px !important; border-radius: 18px; }
  html.saessak-main-theme.ss-page-hub section { padding: 16px; border-radius: 18px; }

  html.saessak-main-theme.ss-page-recording .pro-status-bar {
    gap: 4px !important;
    padding-inline: 6px !important;
  }

  html.saessak-main-theme.ss-page-recording .pro-status-bar > a {
    width: 25px;
    max-width: 25px;
    overflow: hidden;
    white-space: nowrap;
  }

  html.saessak-main-theme.ss-page-recording .pro-status-bar > div[style*="width:1px"],
  html.saessak-main-theme.ss-page-recording #proStatusText,
  html.saessak-main-theme.ss-page-recording #headerUserName,
  html.saessak-main-theme.ss-page-recording #refreshProfileBtn {
    display: none !important;
  }

  html.saessak-main-theme.ss-page-recording .pro-status-bar > div:last-child {
    gap: 4px !important;
  }

  html.saessak-main-theme.ss-page-recording #proUpgradeBtn,
  html.saessak-main-theme.ss-page-recording #guestSignupBtn {
    min-width: 40px;
    padding-inline: 8px !important;
    font-size: 0 !important;
    white-space: nowrap;
  }

  html.saessak-main-theme.ss-page-recording #proUpgradeBtn::after {
    content: "Pro";
    font-size: 10px;
  }

  html.saessak-main-theme.ss-page-recording #guestSignupBtn::after {
    content: "가입";
    font-size: 10px;
  }

  html.saessak-main-theme.ss-page-recording :where(#authBtn, #langBtn) {
    min-height: 32px;
    padding-inline: 7px !important;
  }
}

@media (forced-colors: active) {
  html.saessak-main-theme :where(button, .btn, a, input, select, textarea, .card, .panel) {
    border: 1px solid CanvasText;
  }
}

/* Shared public navigation ------------------------------------------------ */
.ss-site-nav {
  position: relative;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1180px, calc(100% - 36px));
  min-height: 68px;
  margin: 0 auto;
  border-bottom: 1px solid var(--ss-line, #d4dfce);
  background: rgba(245, 247, 240, .94);
}
.ss-site-nav__brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--ss-ink, #20301f);
  text-decoration: none;
}
.ss-site-nav__brand span { font-size: 20px; }
.ss-site-nav__brand strong { font-size: 13px; font-weight: 950; letter-spacing: -.04em; }
.ss-site-nav__links {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-site-nav__links::-webkit-scrollbar { display: none; }
.ss-site-nav__links a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 999px;
  color: var(--ss-soft, #53634f);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}
.ss-site-nav__links a:hover,
.ss-site-nav__links a[aria-current="page"] {
  background: var(--ss-leaf-soft, #e5f2d9);
  color: var(--ss-forest, #213423);
}
.ss-site-nav__links a[aria-current="page"] { box-shadow: inset 0 0 0 1px #b9cdaa; }
.ss-site-nav__links .ss-site-nav__contact {
  background: var(--ss-forest, #213423);
  color: #fff;
}
.ss-site-nav__links .ss-site-nav__contact:hover,
.ss-site-nav__links .ss-site-nav__contact[aria-current="page"] {
  background: var(--ss-forest-2, #355a36);
  color: #fff;
  box-shadow: none;
}
.ss-site-nav--compact { min-height: 58px; }

.ss-not-found {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: calc(100vh - 68px);
  padding: 52px 20px;
  text-align: center;
}
.ss-not-found__code { margin: 0 0 10px; color: var(--ss-forest-2); font-size: 13px; font-weight: 950; letter-spacing: .18em; }
.ss-not-found h1 { margin: 0; color: var(--ss-ink); font-size: clamp(28px, 6vw, 48px); letter-spacing: -.055em; }
.ss-not-found > p:not(.ss-not-found__code) { margin: 16px 0 0; color: var(--ss-soft); }
.ss-not-found__actions { display: flex; gap: 9px; margin-top: 28px; }
.ss-not-found__actions a { display: grid; place-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--ss-line); border-radius: 999px; background: #fff; color: var(--ss-ink); font-weight: 850; text-decoration: none; }
.ss-not-found__actions a:first-child { border-color: var(--ss-forest); background: var(--ss-forest); color: #fff; }

@media (max-width: 760px) {
  .ss-site-nav { align-items: flex-start; flex-direction: column; gap: 4px; width: min(100% - 24px, 1180px); padding: 8px 0; }
  .ss-site-nav__links { width: 100%; }
  .ss-site-nav__links a { min-height: 44px; padding-inline: 10px; }
}