html,
body {
  background: var(--paper);
}

body {
  color: var(--ink);
  background-image: none;
  font-size: 16px;
  line-height: 1.72;
  word-break: keep-all;
  overflow-wrap: break-word;
}

::selection {
  color: var(--surface);
  background: var(--brand);
}

h1,
h2,
h3 {
  letter-spacing: -0.045em;
}

.page-shell {
  width: min(calc(100% - 32px), var(--content-width));
}

.section-pad {
  padding-block: 76px;
}

.section-pad--tight {
  padding-block: 58px;
}

.section-muted {
  background: var(--band);
  border-color: var(--line);
}

.button {
  min-height: 48px;
  padding-inline: 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  box-shadow: none;
}

.button:hover:not(:disabled) {
  transform: none;
}

.button--primary,
.button--primary:hover:not(:disabled) {
  color: #fff;
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  box-shadow: none;
}

.button--primary:hover:not(:disabled) {
  background: #202c3d;
  border-color: #202c3d;
}

/* Brass on night. The header's call to action was written as .button--primary
   and then repainted by a descendant rule, so one class name meant two colours
   depending on where it stood. A different colour gets a different name. */
.button--brass,
.button--brass:hover:not(:disabled) {
  color: #1a1720;
  border-color: var(--brass-light);
  background: var(--brass-light);
}

.button--brass:hover:not(:disabled) {
  border-color: #d8b782;
  background: #d8b782;
}

.button--quiet {
  border-color: var(--line-strong);
  background: var(--surface);
}

.button--quiet:hover:not(:disabled) {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--surface);
}

.button:disabled,
.button[aria-disabled="true"] {
  color: var(--ink-faint);
  border-color: var(--line);
  background: var(--surface-soft);
  opacity: 1;
}

.button.button--small {
  min-height: 44px;
  padding: 9px 15px;
}

.button--light {
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}

.text-link {
  color: var(--brand-deep);
}

.status-pill {
  border-radius: var(--radius-pill);
  box-shadow: none;
}

.status-pill--fact {
  color: var(--brand);
  background: var(--brand-soft);
}

.status-pill--interpretation {
  color: var(--ink-soft);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.status-pill--soft {
  color: var(--ink-soft);
  background: var(--surface-soft);
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(13, 17, 29, 0.94);
  /* backdrop-filter 를 두면 이 헤더가 `position: fixed` 자식의 기준 상자가 되어
     서랍이 헤더 높이(102px) 안에 갇힌다. 94% 불투명이라 흐림은 보이지도 않았다. */
  position: relative;
  /* 서랍이 이 헤더 안에 있으므로 헤더의 쌓임 맥락이 서랍의 z-index 를 가둔다.
     30 이면 하단 바(80)가 서랍 위로 올라와 로그아웃이 가려졌다. */
  z-index: 90;
  color: #f5efe3;
  border-bottom-color: rgba(218, 194, 144, 0.18);
}

.site-header__inner {
  min-height: 60px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}


.wordmark {
  position: relative;
  gap: 10px;
}

.wordmark__tagline {
  margin-left: 3px;
  padding-left: 12px;
  color: var(--ink-faint);
  border-left: 1px solid var(--line);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-header__signup {
  color: var(--brand);
  font-weight: 700;
}

.site-header__login,
.site-header__account,
.site-header__signup {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 5px;
  font-size: 0.86rem;
  text-decoration: none;
}

.site-header__login,
.site-header__account {
  color: var(--ink-soft);
  font-weight: 650;
}

.site-header__login:hover,
.site-header__account:hover,
.site-header__signup:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Inner pages: ruled, not floating-card marketing */
.page-hero {
  min-height: auto;
}

.feature-entry__copy h1, .chat-entry__copy h1 {
  font-size: clamp(2.65rem, calc(var(--col) * 0.048), 4.3rem);
  font-weight: 680;
  line-height: 1.12;
}

/* The copy runs 535px against an 818px card, so aligning both to the top left a
   283px hole under the shorter column. Centring reads as one composition. */
.feature-entry__grid {
  gap: clamp(48px, calc(var(--col) * 0.08), 94px);
  align-items: center;
}

.entry-card {
  padding: clamp(24px, calc(var(--col) * 0.04), 42px);
}

.entry-card__header,
.panel-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.chooser-grid,
.pricing-grid,
.fortune-grid,
.principle-grid,
.account-menu-grid,
.point-pack-grid {
  gap: 16px;
  border-top: 0;
}

.chooser-card,
.price-card,
.fortune-card,
.principle-card,
.account-menu-grid article,
.point-pack-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: var(--radius-lg);
}

.chooser-card + .chooser-card,
.price-card + .price-card,
.fortune-card + .fortune-card,
.principle-card + .principle-card,
.account-menu-grid article + article,
.point-pack-card + .point-pack-card {
  border-left: 1px solid var(--line);
}

.chooser-card--primary,
.fortune-card--today,
.price-card--detail {
  color: inherit;
  background: var(--surface);
}

.chooser-card__icon,
.fortune-card__icon,
.price-card__icon,
.account-menu-grid article > span:first-child,
.point-pack-card__heading > span:first-child {
  color: var(--brand);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.feature-note,
.catalog-note,
.auth-assurance,
.signed-out-gate__assurance {
  color: var(--mineral);
  background: transparent;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
}

.compatibility-preview {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.7fr);
  border-block: 2px solid var(--ink);
}

.compatibility-preview__heading {
  padding: 38px 44px 38px 0;
  border-right: 1px solid var(--line);
}

.compatibility-preview__heading h2 {
  margin-bottom: 18px;
  font-size: clamp(1.85rem, calc(var(--col) * 0.031), 2.7rem);
  line-height: 1.12;
}

.compatibility-preview__heading > p:last-child {
  max-width: 330px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.compatibility-preview__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.compatibility-preview__list li::marker {
  content: "";
}

.compatibility-preview__list li {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 32px 30px;
}

.compatibility-preview__list li + li {
  border-left: 1px solid var(--line);
}

.compatibility-preview__list strong {
  display: block;
  font-size: 1rem;
}

.compatibility-preview__list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.65;
}

.compatibility-preview + .signed-out-gate {
  margin-top: 34px;
}

.signed-out-gate {
  max-width: 900px;
  margin-inline: auto;
  padding: 62px 40px;
  border: 0;
  border-block: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.signed-out-gate__icon {
  color: var(--brand);
  background: transparent;
  border: 1px solid var(--line-strong);
}

.segmented-control {
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--field-well);
}

.segmented-control span {
  min-height: 44px;
  color: var(--ink-soft);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 600;
}

/* Account access */
.auth-shell {
  max-width: 1050px;
  grid-template-columns: minmax(0, 0.85fr) minmax(390px, 1fr);
  gap: clamp(52px, calc(var(--col) * 0.09), 118px);
  padding-block: 86px 108px;
}

.auth-intro {
  align-self: center;
}

.auth-intro h1 {
  margin-bottom: 23px;
  font-size: clamp(3rem, calc(var(--col) * 0.054), 4.8rem);
  line-height: 1.03;
}

.auth-intro > p:last-of-type {
  max-width: 460px;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.auth-assurance {
  margin-top: 36px;
  padding: 17px 0;
  font-size: 0.78rem;
}

.auth-card {
  padding: clamp(26px, calc(var(--col) * 0.04), 42px);
}

.auth-card__heading {
  padding-bottom: 23px;
  border-bottom: 2px solid var(--ink);
}

.auth-card__heading .preview-label,
.preview-label {
  color: var(--brand);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

.auth-card__heading h1,
.auth-card__heading h2 {
  margin-top: 8px;
  font-size: clamp(1.7rem, calc(var(--col) * 0.03), 2.15rem);
}

.auth-form {
  gap: 21px;
  margin-top: 26px;
}

.auth-form input {
  border-bottom-color: var(--ink-faint);
}

.auth-card__links {
  padding-top: 23px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

.site-footer {
  color: rgba(244, 237, 224, 0.68);
  background: #e9e5de;
  border-top: 1px solid var(--line-strong);
  position: relative;
  z-index: 2;
  border-top-color: #d2ccc3;
}

.site-footer__grid {
  grid-template-columns: 1.5fr repeat(3, 0.72fr);
  padding-block: 54px 45px;
}

.wordmark--footer .wordmark__seal {
  color: var(--brand);
  background: transparent;
}

.footer-links__title {
  color: var(--ink);
}

.site-footer__brand p,
.footer-links a,
.site-footer__bottom {
  color: var(--ink-soft);
}

.site-footer__bottom {
  border-top-color: rgba(218, 194, 144, 0.16);
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 980px */

  .site-footer__grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 760px */
  body {
    font-size: 15px;
  }

  .page-shell {
    width: min(calc(100% - 28px), var(--content-width));
  }

  .section-pad,
  .section-pad--tight {
    padding-block: 52px;
  }

  .site-header__inner {
    min-height: 60px;
  }

  .wordmark__tagline {
    display: none;
  }

  .button {
    min-height: 50px;
  }

  .button.button--small {
    min-height: 44px;
  }

  .page-intro {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .feature-entry__copy h1,
  .chat-entry__copy h1 {
    font-size: clamp(2.45rem, calc(var(--col) * 0.115), 3.25rem);
  }

  .entry-card,
  .auth-card,
  .dashboard-panel,
  .account-detail-panel {
    box-shadow: 6px 6px 0 var(--paper-deep);
  }

  .chooser-grid,
  .pricing-grid,
  .fortune-grid,
  .principle-grid,
  .account-menu-grid,
  .point-pack-grid {
    grid-template-columns: 1fr;
  }

  .chooser-card .button,
  .contact-primary .button,
  .signed-out-gate > .button {
    width: 100%;
  }

  .purchase-intent {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .chooser-card + .chooser-card,
  .price-card + .price-card,
  .fortune-card + .fortune-card,
  .principle-card + .principle-card,
  .account-menu-grid article + article,
  .point-pack-card + .point-pack-card {
    border-left: 0;
  }

  .compatibility-preview {
    grid-template-columns: 1fr;
  }

  .compatibility-preview__heading {
    padding: 25px 0 27px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .compatibility-preview__heading h2 {
    font-size: 2rem;
  }

  .compatibility-preview__list {
    grid-template-columns: 1fr;
  }

  .compatibility-preview__list li {
    min-height: 0;
    gap: 6px;
    padding: 20px 0;
  }

  .compatibility-preview__list li + li {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .signed-out-gate {
    padding: 42px 0;
  }

  .auth-shell {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-block: 46px 70px;
  }

  .auth-intro h1 {
    margin-bottom: 18px;
    font-size: clamp(2.6rem, calc(var(--col) * 0.125), 3.4rem);
  }

  .auth-assurance {
    margin-top: 22px;
  }

  .auth-card {
    padding: 25px 20px;
  }

  .auth-form input {
    min-height: 50px;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
    padding-block: 30px 24px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    padding-bottom: 9px;
  }

  .site-footer__bottom {
    display: grid;
    gap: 8px;
    padding-block: 20px 31px;
  }
}

/*
 * Immersive client direction, 2026-08-14.
 * Source: the private Woonwoon client room and its selected intro film.
 * Night indigo, old brass, ink and warm paper continue from film to service.
 */
.public-ambient-media {
  display: none;
}

.site-header .wordmark__tagline {
  border-left-color: rgba(218, 194, 144, 0.24);
}

.site-footer .footer-links__title,
.site-footer a {
  color: #f8f2e6;
}

.site-footer__brand p,
.site-footer .footer-links a,
.site-footer__bottom {
  color: rgba(244, 237, 224, 0.62);
}

/* Landing at the top of a page after a detour makes the visitor find their own
   way back to what they were doing. A payment sends them to the panel they left
   instead, and a target has to clear the sticky header to be readable when it
   arrives — plus a moment of emphasis, so the jump is understood as an answer
   rather than a page that happens to be scrolled. */
:target {
  scroll-margin-top: clamp(82px, 12vh, 112px);
}

#detail-reading:target,
#birth-entry:target,
#compatibility-entry:target,
#fortune-picks:target,
#point-packs:target {
  animation: settle-into-view 1400ms ease-out;
}

@keyframes settle-into-view {
  0%, 45% { box-shadow: 0 0 0 2px var(--brass), var(--shadow); }
  100% { box-shadow: 0 0 0 0 rgba(169, 129, 77, 0), var(--shadow); }
}

@media (prefers-reduced-motion: reduce) {
  #detail-reading:target,
  #birth-entry:target,
  #compatibility-entry:target,
  #fortune-picks:target,
  #point-packs:target {
    animation: none;
    box-shadow: 0 0 0 2px var(--brass), var(--shadow);
  }
}

/* The staging stand-in for the provider. It says plainly that no card is
   charged, because a button that grants points has to look like what it is. */
.checkout-action--simulated {
  display: grid;
  gap: 10px;
}

.checkout-action__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 4px;
  padding: 13px 15px;
  border: 1px dashed var(--brass);
  border-radius: var(--radius-sm);
  background: var(--brass-soft);
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.65;
}

.checkout-action__notice .ui-icon {
  flex: none;
  color: var(--brass-ink);
}

.checkout-action--simulated form {
  margin: 0;
}

.natal-grid {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  overflow-x: auto;
}

.natal-grid__row {
  display: grid;
  grid-template-columns: 46px repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}

.natal-grid__label {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 690;
  text-align: right;
}

.natal-grid__head {
  display: grid;
  gap: 1px;
  padding: 7px 4px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.natal-grid__head b {
  font-size: 0.86rem;
  font-weight: 760;
}

.natal-grid__head small,
.natal-grid__cell--scope {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

/* The day stem is the reference every other character is measured against, so
   its column is marked rather than left to be worked out. */
.natal-grid__head.is-day {
  border-bottom-color: var(--brass);
  box-shadow: inset 0 -2px var(--brass);
}

.natal-grid__cell {
  min-width: 0;
  padding: 5px 2px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-align: center;
  word-break: keep-all;
}

.natal-grid__row--foot .natal-grid__cell {
  padding-top: 9px;
  border-top: 1px solid var(--line);
  line-height: 1.35;
}

.gan-ji {
  display: grid;
  gap: 2px;
  place-items: center;
  padding: 10px 4px 8px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: var(--radius-sm);
  background: var(--element-metal-soft);
  color: var(--element-metal);
}

.gan-ji b {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(1.25rem, calc(var(--col) * 0.052), 1.7rem);
  font-weight: 780;
  line-height: 1.05;
}

.gan-ji i {
  font-size: 0.62em;
  font-style: normal;
  font-weight: 620;
  opacity: 0.75;
}

.gan-ji small {
  font-size: 0.66rem;
  font-weight: 620;
  opacity: 0.86;
}

.gan-ji--absent {
  color: var(--ink-faint);
  background: var(--surface-soft);
  border-style: dashed;
  border-color: var(--line);
}

/* 오행 → 색 매핑은 `application.css` 의 `[data-element]` 한 곳에 있다. */
.gan-ji[data-element] { color: var(--element-ink); background: var(--element-wash); }

/* Choosing an element dims the rest. The chosen ones also lift a little, so the
   answer reads as "these four" rather than "everything except these". Only when
   the controller is connected: without it the chart stays as it is. */
.natal-reading[data-chart-highlight-ready] .element-count {
  cursor: pointer;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  transition: opacity 160ms ease;
}

.natal-reading[data-highlight] .gan-ji {
  opacity: 0.28;
  transition: opacity 180ms ease, transform 180ms ease;
}

.natal-reading[data-highlight="목"] .gan-ji[data-element="목"],
.natal-reading[data-highlight="화"] .gan-ji[data-element="화"],
.natal-reading[data-highlight="토"] .gan-ji[data-element="토"],
.natal-reading[data-highlight="금"] .gan-ji[data-element="금"],
.natal-reading[data-highlight="수"] .gan-ji[data-element="수"] {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(38, 36, 33, 0.14);
}

.natal-reading[data-highlight] .element-count[aria-pressed="false"] {
  opacity: 0.42;
}

.natal-reading .element-count:focus-visible {
  outline: 3px solid var(--brass-line);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .natal-reading .gan-ji,
  .natal-reading .element-count {
    transition: none;
  }

  .natal-reading[data-highlight] .gan-ji[data-element] {
    transform: none;
  }
}

@media (max-width: 420px) {
  .natal-grid__row {
    grid-template-columns: 38px repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .natal-grid__label { font-size: 0.66rem; }
  .natal-grid__cell { font-size: 0.72rem; }
}

:focus-visible {
  outline-color: var(--brass-line);
}

/* A field is a well with a baseline, not a rounded box. The baseline is what
   says "write here"; four borders only say "here is a box". */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
select,
textarea {
  padding: 12px 12px 10px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--field-well);
  box-shadow: none;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):hover,
select:hover,
textarea:hover {
  border-bottom-color: var(--ink-faint);
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-bottom-color: var(--brass);
  box-shadow: inset 0 -1px 0 var(--brass);
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
.segmented-control input:focus-visible + span {
  outline: 2px solid var(--brass-line);
  outline-offset: 2px;
}

.segmented-control label + label span {
  box-shadow: inset 1px 0 0 var(--line);
}

.segmented-control input:checked + span {
  color: #4b3a22;
  background: var(--brand-soft);
  box-shadow: none;
  font-weight: 720;
}

.segmented-control label + label input:checked + span {
  box-shadow: inset 1px 0 0 var(--brass);
}

/* A checkbox and its sentence, separated by space rather than by a frame. */
.check-field {
  min-height: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.check-field input {
  width: 20px;
  height: 20px;
  accent-color: var(--brass);
}

.check-field:has(input:checked) strong {
  color: var(--brass-ink);
}

/* A panel states its edge one way. It had been doing both. */
.entry-card,
.auth-card,
.dashboard-panel,
.account-detail-panel,
.result-card,
.chart-fact-card {
  box-shadow: none;
}

/* Hierarchy from weight and colour, not from another box: a label supports the
   field it names, so it stops competing with the heading above it. */
.field > label,
.field legend {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

html.is-intro-locked,
body.is-intro-locked {
  overflow: hidden;
  overscroll-behavior: none;
  background: #070a12;
}

/* viewport-fit=cover paints the safe areas from the document canvas, and the canvas
   takes its colour from html. The immersive home is dark from the intro down to the
   footer, so the canvas is dark too — otherwise a notched phone shows pale bands
   above and below the page, before this stylesheet's JS has run and again once the
   intro hands over. */
html.immersive-page,
html.immersive-page body {
  background-color: #070a12;
}

.woon-intro[hidden] {
  display: none;
}

/* v3 intro: the film remains live, while all interface copy is real text. */
.woon-intro {
  position: fixed;
  z-index: 200;
  inset: 0;
  right: auto;
  left: max(0px, calc(50vw - var(--app-width) / 2));
  width: var(--col);
  min-height: 100vh;
  min-height: 100dvh;
  display: block;
  overflow: hidden;
  color: #f0e8d8;
  background: #05070d;
  isolation: isolate;
  transition: opacity 480ms ease, visibility 480ms ease;
}

.woon-intro.is-leaving {
  visibility: hidden;
  opacity: 0;
}

.woon-intro__backdrop,
.woon-intro__video,
.woon-intro__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.woon-intro__backdrop {
  z-index: -3;
  object-fit: cover;
}

.woon-intro__video {
  z-index: -2;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 3.4s cubic-bezier(0.2, 0.7, 0.2, 1), filter 900ms ease;
}

/* While the visitor is deciding, the picture is left alone: the film is still
   running, so nothing here needs to stand in for movement. A drift on top of it
   would only read as a slow zoom.

   Pressing is the moment that earns an effect. The push leaves quickly and eases
   out over the walk to the hub, which is what makes the choice feel taken rather
   than merely registered. */
.woon-intro[data-intro-state="entering"] .woon-intro__video {
  filter: brightness(1.08) saturate(1.06);
  transform: scale(1.075);
  transition: transform 2.2s cubic-bezier(0.16, 0.72, 0.24, 1), filter 520ms ease-out;
}

.woon-intro__veil {
  z-index: -1;
  top: auto;
  height: 404px;
  background: linear-gradient(180deg, rgba(7, 10, 18, 0) 0%, rgba(7, 10, 18, 0.22) 48%, rgba(7, 10, 18, 0.78) 76%, #070a12 100%);
  transition: opacity 900ms ease;
}

.woon-intro[data-intro-state="entering"] .woon-intro__veil {
  opacity: 0.42;
}

.woon-intro__content {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
}

.woon-intro__brand {
  position: absolute;
  z-index: 2;
  top: max(24px, env(safe-area-inset-top));
  left: 20px;
  width: 76px;
  height: 30px;
  object-fit: contain;
}

.woon-intro__invitation {
  position: absolute;
  inset: 0;
  /* Timed to finish arriving as the film reaches the frame it holds, so the words
     are in place before the picture goes still rather than answering it. */
  transition:
    opacity 320ms cubic-bezier(0.33, 0, 0.2, 1),
    transform 380ms cubic-bezier(0.22, 0.68, 0.24, 1),
    visibility 320ms;
}

.woon-intro[data-intro-state="idle"] .woon-intro__invitation,
.woon-intro[data-intro-state="prelude"] .woon-intro__invitation,
.woon-intro[data-intro-state="entering"] .woon-intro__invitation,
.woon-intro[data-intro-state="handoff"] .woon-intro__invitation {
  visibility: hidden;
  opacity: 0;
  transform: translateY(9px);
}

.woon-intro__title {
  position: absolute;
  top: 170px;
  right: 28px;
  width: 64px;
  height: 239px;
  margin: 0;
  color: #f0e8d8;
  font-family: var(--font-solmoe);
  font-size: 44px;
  font-weight: 500;
  line-height: 56.588px;
  letter-spacing: 0;
  text-shadow:
    0 2px 10px rgba(0, 1, 6, 0.72),
    0 0 18px rgba(211, 181, 121, 0.08);
}

.woon-intro__title span {
  display: block;
  width: 52px;
  height: 56.588px;
  margin-left: 6px;
}

.woon-intro__title span + span {
  margin-top: 4px;
}

.woon-intro[data-intro-state="dwelling"] .woon-intro__title span,
.woon-intro[data-intro-state="fallback"] .woon-intro__title span {
  animation: woon-intro-calligraphy-arrive 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.woon-intro__title span:nth-child(2) { animation-delay: 55ms; }
.woon-intro__title span:nth-child(3) { animation-delay: 110ms; }
.woon-intro__title span:nth-child(4) { animation-delay: 165ms; }

@keyframes woon-intro-calligraphy-arrive {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(9px) scale(0.97);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.woon-intro__threshold {
  position: absolute;
  left: calc(50% - 29px);
  bottom: calc(219px + env(safe-area-inset-bottom, 0px));
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(199, 162, 104, 0.62) 24%,
    #ddc18c 50%,
    rgba(199, 162, 104, 0.62) 76%,
    transparent);
  transform-origin: center;
  animation: woon-intro-threshold-breathe 4.8s ease-in-out infinite;
}

.woon-intro__threshold::after {
  content: "";
  position: absolute;
  top: -2px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e2c998;
  box-shadow: 0 0 10px rgba(226, 201, 152, 0.34);
}

@keyframes woon-intro-threshold-breathe {
  0%, 100% { opacity: 0.66; transform: scaleX(0.86); }
  48% { opacity: 1; transform: scaleX(1); }
}

.woon-intro__description {
  position: absolute;
  left: calc(50% - 140px);
  bottom: calc(147px + env(safe-area-inset-bottom, 0px));
  width: 280px;
  color: #f0e8d8;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 450;
  letter-spacing: -0.1px;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 1, 6, 0.78);
}

.woon-intro__description p {
  margin: 0;
  line-height: 19px;
}

.woon-intro__description p + p {
  margin-top: 2px;
}

.woon-intro__description .woon-intro__description-lead {
  font-family: var(--font-solmoe);
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0;
}

.woon-intro__enter {
  position: absolute;
  right: 30px;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  left: 30px;
  height: 64px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  overflow: hidden;
  color: #f3ead9;
  border: 1px solid rgba(215, 184, 127, 0.52);
  border-radius: 2px;
  background:
    radial-gradient(ellipse 70% 120% at 18% 0%, rgba(69, 83, 112, 0.2), transparent 68%),
    rgba(5, 9, 17, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 212, 0.07),
    inset 0 -14px 28px rgba(0, 1, 6, 0.2),
    0 12px 28px rgba(0, 1, 7, 0.28);
  backdrop-filter: blur(9px) saturate(1.08);
  font-family: var(--font-sans);
  cursor: pointer;
  isolation: isolate;
  animation: woon-intro-gate-breathe 5.6s ease-in-out infinite;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.woon-intro__enter::before {
  content: none;
}

.woon-intro__enter::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 48% 160% at 15% 0%, rgba(211, 190, 151, 0.13), transparent 68%);
  opacity: 0.58;
  transform: translateX(-7%);
  transition: opacity 240ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

@keyframes woon-intro-gate-breathe {
  0%, 100% { border-color: rgba(215, 184, 127, 0.46); }
  50% { border-color: rgba(226, 201, 153, 0.62); }
}

.woon-intro__enter-sigil {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: 3px;
  border: 1px solid rgba(222, 194, 140, 0.72);
  transform: rotate(45deg);
}

.woon-intro__enter-sigil::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(236, 215, 176, 0.72);
  background: rgba(199, 162, 104, 0.12);
}

.woon-intro__enter-copy {
  display: grid;
  justify-items: center;
  gap: 1px;
}

.woon-intro__enter-kicker {
  color: rgba(229, 211, 178, 0.66);
  font-size: 8px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
}

.woon-intro__enter-copy strong {
  font-family: var(--font-solmoe);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
}

.woon-intro__enter-arrow {
  position: relative;
  width: 26px;
  height: 12px;
  justify-self: end;
  overflow: visible;
}

.woon-intro__enter-arrow::before,
.woon-intro__enter-arrow::after {
  content: "";
  position: absolute;
}

.woon-intro__enter-arrow::before {
  top: 5.5px;
  right: 2px;
  width: 24px;
  height: 1px;
  background: rgba(226, 201, 153, 0.76);
}

.woon-intro__enter-arrow::after {
  right: 2px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(226, 201, 153, 0.76);
  border-right: 1px solid rgba(226, 201, 153, 0.76);
  transform: rotate(45deg);
}

.woon-intro__enter:hover {
  color: #fffaf0;
  border-color: rgba(235, 211, 165, 0.92);
  background-color: rgba(10, 16, 29, 0.86);
  transform: translateY(-1px);
}

.woon-intro__enter:hover::after {
  opacity: 0.9;
  transform: translateX(6%);
}

.woon-intro__enter:active {
  transform: translateY(0) scale(0.988);
  transition-duration: 80ms;
}

.woon-intro__enter:focus-visible {
  outline: 2px solid #c7a268;
  outline-offset: 3px;
}

.woon-intro__enter:disabled {
  cursor: wait;
  opacity: 0.66;
  animation: none;
}

/* The home is the one deliberate exception to the restrained inner-page
   system. Its night garden and luminous thresholds carry the divination mood;
   the 2×2 geometry and live type keep that atmosphere usable. */
.woon-night-hub {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: #f0e8d8;
  background: #03060c;
  outline: none;
}

.woon-night-hub::before,
.woon-night-hub::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.woon-night-hub::before {
  background:
    radial-gradient(ellipse 78% 38% at 50% 34%, rgba(62, 76, 109, 0.06), transparent 72%),
    linear-gradient(180deg, rgba(2, 5, 11, 0.28) 0%, rgba(2, 5, 11, 0.12) 38%, rgba(2, 5, 11, 0.54) 100%);
}

.woon-night-hub::after {
  background: radial-gradient(ellipse 112% 92% at 50% 45%, transparent 42%, rgba(0, 2, 7, 0.58) 100%);
}

.woon-night-hub__scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.77;
  filter: saturate(0.86) contrast(1.04) brightness(0.78);
  transform: scale(1.015);
}

.woon-night-hub__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 764px;
  margin: 0;
  padding: 72px 30px 138px;
}

.woon-hub-guidance {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.woon-hub-guidance::before,
.woon-hub-guidance::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(206, 174, 116, 0.46));
}

.woon-hub-guidance::before {
  left: 0;
}

.woon-hub-guidance::after {
  right: 0;
  transform: rotate(180deg);
}

.woon-hub-guidance h2 {
  margin: 0;
  color: #f0e8d8;
  font-family: var(--font-solmoe);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 9px rgba(0, 2, 7, 0.78);
}

.woon-door-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 244px);
  gap: 16px;
}

.woon-door {
  position: relative;
  min-width: 0;
  height: 244px;
  overflow: hidden;
  border-radius: var(--radius-door);
  border: 1px solid rgba(221, 197, 151, 0.38);
  box-shadow:
    0 13px 30px rgba(0, 2, 8, 0.36),
    inset 0 0 0 1px rgba(255, 246, 225, 0.035),
    inset 0 -18px 28px rgba(0, 0, 0, 0.12);
  padding: 0;
  color: #f0e8d8;
  text-decoration: none;
  isolation: isolate;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease;
}

.woon-door:hover,
.woon-door:focus-visible {
  color: #f0e8d8;
  border-color: rgba(233, 208, 158, 0.7);
  transform: translateY(-2px);
}

.woon-door:active {
  transform: translateY(0) scale(0.988);
  transition-duration: 80ms;
}

.woon-door:active .woon-door__art {
  filter: saturate(0.98) contrast(1.06) brightness(1);
  transform: scale(1.018);
  transition-duration: 80ms;
}

.woon-door:focus-visible {
  outline: 2px solid #c7a268;
  outline-offset: 2px;
}

.woon-door__art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.04) brightness(0.94);
  transition: filter 220ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.woon-door:hover .woon-door__art,
.woon-door:focus-visible .woon-door__art {
  filter: saturate(0.98) contrast(1.06) brightness(1);
  transform: scale(1.012);
}

.woon-door::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 22%, rgba(211, 181, 121, 0.08), transparent 38%),
    linear-gradient(90deg, rgba(5, 8, 14, 0.16), transparent 28%, transparent 72%, rgba(5, 8, 14, 0.18));
  box-shadow: inset 0 0 24px rgba(172, 132, 74, 0.1);
  pointer-events: none;
}

.woon-door::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 122px;
  background: linear-gradient(180deg, rgba(3, 5, 10, 0) 0%, rgba(3, 5, 10, 0.42) 40%, rgba(2, 4, 9, 0.94) 100%);
  pointer-events: none;
}

.woon-door__copy {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  left: 16px;
  display: grid;
  gap: 1px;
}

.woon-door__copy strong {
  color: #f0e8d8;
  font-family: var(--font-solmoe);
  font-size: 33px;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: 0;
  text-shadow: 0 2px 9px rgba(0, 1, 6, 0.82);
}

.woon-door__note {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(240, 232, 216, 0.76);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 450;
  line-height: 16px;
  letter-spacing: -0.15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.woon-door__note::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 1px;
  background: rgba(215, 184, 127, 0.68);
}

.woon-first-step {
  color: #e9dfcf;
  background: #151210;
}

.woon-first-step__inner {
  min-height: 330px;
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  align-items: center;
  gap: clamp(52px, calc(var(--col) * 0.1), 140px);
  padding-block: 62px;
}

.woon-first-step__inner > div:first-child > p {
  margin-bottom: 10px;
  color: #c6a46a;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

.woon-first-step h2 {
  margin: 0;
  color: #fff8eb;
  font-size: clamp(2rem, calc(var(--col) * 0.036), 3.1rem);
  font-weight: 620;
}

.woon-first-step__inner > div:last-child > p {
  color: rgba(239, 229, 211, 0.66);
  font-size: 0.86rem;
}

.woon-first-step .button--light {
  color: #18151a;
  border-color: #c8a76b;
  background: #c8a76b;
}

/* The selected film remains present as an ambient layer on the four primary
   journeys.

   The band's height and the point where the page finishes turning to paper used
   to be two separate numbers, and they disagreed: the film's own gradient
   reached paper at its bottom edge while the overlay on `main` was still 45%
   short, so a hard horizontal line crossed all four pages where the element
   simply stopped. They are one number now.

   That number has to outlast each journey's own light-on-dark copy, or cream
   text ends up on a lit ground: 사주 carries the longest column (measured to
   810px at its worst wrap across 1920/1440/1280/1100/980), 무물 next, then
   궁합; 운세 only has its lead. */
.public-page--pages-analyze,
.public-page--compatibility-readings-show,
.public-page--fortunes-index,
.public-page--chat-threads-index {
  --ambient-height: 620px;
}

/* 궁합 keeps the base height: since its pitch moved below the form, the only
   light-on-dark copy left on that page is the intro, as on 운세. */
.public-page--pages-analyze { --ambient-height: 900px; }
.public-page--chat-threads-index { --ambient-height: 800px; }

.public-page--pages-analyze .public-ambient-media,
.public-page--compatibility-readings-show .public-ambient-media,
.public-page--fortunes-index .public-ambient-media,
.public-page--chat-threads-index .public-ambient-media {
  position: absolute;
  z-index: 0;
  /* Meet the 61px header plane exactly. The old 66px offset exposed a 5px
     strip of the paper canvas, which flashed like a bright rule when arriving
     from the dark home even though the Turbo transition itself was continuous. */
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: var(--ambient-height);
  display: block;
  overflow: hidden;
  background: #0b101b;
  /* The band fades out as a whole. Its own darkening layers are opaque, so
     ending the lower one on paper never lightened anything — the fade was
     really being done by a second gradient on `main`, at a different height.
     Masking the element means the film, its tint and its ground all end
     together, at the one height, with nothing left to disagree with. */
  -webkit-mask-image: linear-gradient(180deg, #000 0 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 86%, transparent 100%);
}

.public-page--pages-analyze .public-ambient-media::after,
.public-page--compatibility-readings-show .public-ambient-media::after,
.public-page--fortunes-index .public-ambient-media::after,
.public-page--chat-threads-index .public-ambient-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 13, 23, 0.92), rgba(9, 13, 23, 0.68) 48%, rgba(9, 13, 23, 0.85)), linear-gradient(180deg, rgba(9, 13, 23, 0.15), #0f1522 88%);
}

.public-ambient-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.55;
  filter: saturate(0.8) contrast(1.05);
}

.public-page--pages-analyze main,
.public-page--compatibility-readings-show main,
.public-page--fortunes-index main,
.public-page--chat-threads-index main {
  position: relative;
  z-index: 1;
}

.public-page--pages-analyze .feature-entry__copy .eyebrow,
.public-page--compatibility-readings-show .page-intro .eyebrow,
.public-page--fortunes-index .page-intro .eyebrow,
.public-page--chat-threads-index .chat-entry__copy .eyebrow {
  color: var(--brass-light);
}

.public-page--pages-analyze .feature-entry__copy,
.public-page--compatibility-readings-show .page-intro,
.public-page--fortunes-index .page-intro,
.public-page--chat-threads-index .chat-entry__copy {
  color: #f9f3e8;
}

.public-page--pages-analyze .feature-entry__copy > p,
.public-page--pages-analyze .feature-entry__copy .fact-interpretation-key p,
.public-page--pages-analyze .feature-entry__copy .feature-note,
.public-page--compatibility-readings-show .page-intro__lead,
.public-page--fortunes-index .page-intro__lead,
.public-page--chat-threads-index .chat-entry__copy > p,
.public-page--chat-threads-index .chat-entry__copy .feature-note {
  color: rgba(245, 237, 222, 0.7);
}

.public-page--pages-analyze .feature-entry__copy .feature-note,
.public-page--chat-threads-index .chat-entry__copy .feature-note {
  padding: 16px;
  color: rgba(249, 243, 232, 0.8);
  border: 1px solid rgba(211, 181, 124, 0.28);
  background: rgba(10, 15, 26, 0.78);
  backdrop-filter: blur(8px);
}

.public-page--pages-analyze .feature-entry__copy .feature-note .ui-icon,
.public-page--chat-threads-index .chat-entry__copy .feature-note .ui-icon {
  color: var(--brass-light);
}

/* The 계산된 사실 / 사주풀이 key is the one place the site explains its own
   central distinction, and on the night hero only half of it could be read: the
   filled pill brought its own paper with it, the outlined one kept the ink meant
   for paper and measured 3.2:1 on the film. The outline follows the ground. */
.public-page--pages-analyze .feature-entry__copy .status-pill--interpretation {
  color: var(--night-ink);
  box-shadow: inset 0 0 0 1px rgba(201, 166, 105, 0.5);
}

.public-page--pages-analyze .entry-card,
.public-page--compatibility-readings-show .compatibility-direct-form {
  color: var(--ink);
  border-color: rgba(172, 142, 91, 0.52);
  background: rgba(250, 246, 237, 0.97);
  box-shadow: var(--shadow);
  position: relative;
}

.public-page--pages-analyze .entry-card {
  border-radius: var(--radius-xs);
}

.public-page--pages-analyze .entry-card::before,
.public-page--compatibility-readings-show .compatibility-direct-form::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(157, 124, 72, 0.2);
  pointer-events: none;
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 980px */
  .woon-door-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 760px */
  .site-header {
    background: rgba(13, 17, 29, 0.98);
  }

  .public-page--pages-analyze .feature-entry__grid {
    display: flex;
    flex-direction: column;
  }

  .public-page--pages-analyze .entry-card {
    order: -1;
  }

  .public-page--pages-analyze .feature-entry__copy {
    padding-top: 28px;
    color: var(--ink);
  }

  .public-page--pages-analyze .feature-entry__copy > p,
  .public-page--pages-analyze .feature-entry__copy .fact-interpretation-key p {
    color: var(--ink-soft);
  }

  /* Below 900px the band ends above this column, so the copy is on paper. Every
     part of it was moved back to ink except the eyebrow, which kept the brass
     meant for night and sat on paper at 2.1:1 — the faintest text on the site,
     directly above the largest. */
  .public-page--pages-analyze .feature-entry__copy .eyebrow {
    color: var(--brass-ink);
  }

  .public-page--pages-analyze .feature-entry__copy .status-pill--interpretation {
    color: var(--ink-soft);
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }

  .woon-first-step__inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 52px;
  }

  .woon-first-step h2 {
    font-size: 2rem;
  }

  .woon-first-step .button {
    width: 100%;
  }

  /* Below 760px every journey turns its copy back to ink on paper, so the band
     is only the photograph and one height serves all four. */
  .public-page--pages-analyze,
  .public-page--compatibility-readings-show,
  .public-page--fortunes-index,
  .public-page--chat-threads-index {
    --ambient-height: 470px;
  }

  .public-page--pages-analyze .feature-entry__copy .feature-note,
  .public-page--chat-threads-index .chat-entry__copy .feature-note {
    margin-top: 24px;
    padding: 16px;
    color: rgba(249, 243, 232, 0.84);
    border: 1px solid rgba(211, 181, 124, 0.28);
    background: rgba(10, 15, 26, 0.74);
    backdrop-filter: blur(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .woon-intro,
  .woon-intro__video,
  .woon-intro__invitation,
  .woon-door,
  .woon-intro__enter {
    transition: none;
  }

  .woon-intro__video {
    display: none;
  }

  .woon-intro__backdrop {
    display: block;
    filter: saturate(0.8) brightness(0.62);
    transform: none;
  }

  .woon-intro__title span,
  .woon-intro__threshold,
  .woon-intro__enter {
    animation: none !important;
  }

  .woon-intro__motion-hint {
    display: none;
  }

  .woon-intro__still-hint {
    display: inline;
  }
}

/* Woonwoon home, grounded in the reading itself rather than a generic campaign layout. */
/* Both spellings are in the markup and only one of them was ever defined, so the
   궁합 form printed its hidden legend as a second heading over every card. */
.visually-hidden,
.sr-only {
  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;
}

/* Shared public page rhythm: plain Korean service pages, not an editorial
   template. This replaced an earlier two-column editorial intro outright; that
   one and the mobile block written for it stayed in the file, above this, doing
   nothing. The two values of theirs that were still reaching the page — the
   heading's measure and the lead's colour — are here now. */
.page-intro {
  display: block;
  max-width: 830px;
  margin: 0 0 48px;
  padding: 0;
  border: 0;
}

.page-intro .eyebrow {
  padding: 0;
}

.page-intro h1 {
  max-width: 850px;
  margin-bottom: 18px;
  font-size: clamp(2.45rem, calc(var(--col) * 0.046), 4rem);
  font-weight: 680;
  line-height: 1.13;
}

.page-intro__lead {
  max-width: 720px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.85;
}

.entry-card,
.auth-card,
.dashboard-panel,
.account-detail-panel {
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 760px */
  .site-header {
    background: rgba(252, 251, 248, 0.98);
  }

  .wordmark__tagline {
    display: inline;
    /* 0.6rem lands at 9.6px, under the 10px floor the rest of the header keeps. */
    font-size: 0.65rem;
  }

  .page-intro {
    margin-bottom: 36px;
  }

  .page-intro h1 {
    font-size: clamp(2.25rem, calc(var(--col) * 0.108), 3rem);
  }

  .feature-entry__copy h1,
  .chat-entry__copy h1 {
    font-size: clamp(2.35rem, calc(var(--col) * 0.104), 2.85rem);
  }

  .chooser-grid,
  .pricing-grid,
  .fortune-grid,
  .principle-grid,
  .account-menu-grid,
  .point-pack-grid {
    gap: 12px;
  }

  .chooser-card + .chooser-card,
  .price-card + .price-card,
  .fortune-card + .fortune-card,
  .principle-card + .principle-card,
  .account-menu-grid article + article,
  .point-pack-card + .point-pack-card {
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 380px) {
  .wordmark__tagline {
    display: none;
  }
}

/* Domain journeys added after the visual reset. Flat hanji surfaces and ink rules only. */
.page-shell--narrow,
.narrow-shell {
  width: min(calc(100% - 32px), 880px);
}

.compatibility-direct-form,
.saved-profile-request,
.chart-wide-card,
.reading-context,
.reading-summary,
.reading-toc,
.reading-progress,
.reading-followups,
.record-management-row,
.profile-record,
.inquiry-compose,
.inquiry-history,
.inquiry-message,
.inquiry-reply-form,
.payment-refund-card,
.notice-box,
.policy-footnote,
.danger-zone,
.closure-status-card,
.legacy-link-actions {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.compatibility-direct-form {
  margin-top: 42px;
  padding: clamp(18px, calc(var(--col) * 0.03), 34px);
}

.compatibility-person-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

/* The card sat inside the form's own bordered card, so on one column the two
   frames ran side by side a few pixels apart and read as a mistake. The tint
   alone separates it, and a consistent gap replaces the per-field margins that
   left some rows touching and others far apart. */
.compatibility-person-card {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
  margin: 0;
  padding: clamp(20px, calc(var(--col) * 0.03), 30px);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.compatibility-person-card h2 {
  margin: 0;
  font-size: clamp(1.4rem, calc(var(--col) * 0.023), 1.8rem);
}

.compatibility-person-card .eyebrow {
  margin: 0;
}

.person-card__who {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.person-card__who b {
  color: var(--brass-ink);
  font-size: 1.05rem;
  letter-spacing: 0;
}

.person-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--accent);
}

.person-card__top > span {
  font-size: 1.15rem;
}

/* Two people joined by a line.
   application.css still describes the knot this replaced — two large interlocking
   rings in a 42px box, pinned with left/right and rotated upright on small screens.
   Its `span:first-child` outranks a plain `span` rule here, so every inset it sets
   has to be restated: leaving `left` to the base rule left one bead pinned 20px off
   the line, at the top, while the other sat correctly. The rings were also drawn in
   주칠 빨강, a colour reserved for numbers, so the only red on the page was on a
   decoration. */
.relationship-knot {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto;
  transform: none;
}

.relationship-knot::before {
  content: "";
  width: 1px;
  height: 100%;
  background: var(--line-strong);
}

.relationship-knot span {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
}

.relationship-knot span:first-child,
.relationship-knot span:last-child {
  top: 50%;
  right: auto;
  left: 50%;
}

.relationship-knot span:first-child { transform: translate(-50%, calc(-50% - 9px)); }
.relationship-knot span:last-child { transform: translate(-50%, calc(-50% + 9px)); }

.compatibility-relation-panel {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(180px, 0.55fr) minmax(220px, 0.75fr) minmax(230px, 0.7fr);
  gap: 22px;
  align-items: end;
  margin-top: 18px;
  padding: 24px;
  border-top: 1px solid var(--line);
}

.compatibility-relation-panel h2 { margin: 0 0 5px; font-size: 1.35rem; }
.compatibility-relation-panel p { margin: 0; color: var(--ink-soft); font-size: 0.84rem; }
.compatibility-relation-panel__action { display: grid; gap: 8px; }
.compatibility-relation-panel__pair { display: grid; gap: 16px; align-content: end; }
.catalog-cost { display: flex; justify-content: space-between; align-items: baseline; }
.catalog-cost strong { color: var(--accent); font-size: 1.2rem; }

.saved-profile-request { margin-top: 20px; overflow: hidden; }
.saved-profile-request > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}
.saved-profile-request > summary::-webkit-details-marker { display: none; }
.saved-profile-request > summary span { display: grid; gap: 2px; }
.saved-profile-request > summary small { color: var(--ink-soft); }
.saved-profile-request__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 14px;
  align-items: end;
  padding: 0 24px 24px;
}

/* A score that names neither its scale nor anything to compare against is not
   information. The week is drawn, the scale is stated once, the strongest day is
   marked, and the sentence the calculator already wrote for today carries the
   part a number cannot. */
.weekly-outlook {
  margin-top: 18px;
}

.weekly-outlook__scale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 690;
}

.weekly-outlook__scale b {
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-weight: 620;
}

.weekly-outlook__chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

/* The bar's track is a fixed height rather than a fraction: a percentage
   against a 1fr row resolves to nothing, and the bars silently did not draw. */
.weekly-outlook__day {
  display: grid;
  grid-template-rows: auto 64px auto auto;
  justify-items: center;
  gap: 3px;
  color: var(--ink-soft);
}

.weekly-outlook__day b {
  font-size: 0.72rem;
  font-weight: 700;
}

.weekly-outlook__bar {
  align-self: end;
  width: min(100%, 26px);
  border-radius: var(--radius-bar);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(169, 129, 77, 0.28);
}

.weekly-outlook__bar--20 { height: 20%; }
.weekly-outlook__bar--25 { height: 25%; }
.weekly-outlook__bar--30 { height: 30%; }
.weekly-outlook__bar--35 { height: 35%; }
.weekly-outlook__bar--40 { height: 40%; }
.weekly-outlook__bar--45 { height: 45%; }
.weekly-outlook__bar--50 { height: 50%; }
.weekly-outlook__bar--55 { height: 55%; }
.weekly-outlook__bar--60 { height: 60%; }
.weekly-outlook__bar--65 { height: 65%; }
.weekly-outlook__bar--70 { height: 70%; }
.weekly-outlook__bar--75 { height: 75%; }
.weekly-outlook__bar--80 { height: 80%; }
.weekly-outlook__bar--85 { height: 85%; }
.weekly-outlook__bar--90 { height: 90%; }
.weekly-outlook__bar--95 { height: 95%; }
.weekly-outlook__bar--100 { height: 100%; }

.weekly-outlook__day em {
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 690;
}

.weekly-outlook__day small {
  color: var(--ink-faint);
  font-size: 0.66rem;
}

.weekly-outlook__day.is-best b { color: var(--brass-ink); }
.weekly-outlook__day.is-best .weekly-outlook__bar { background: var(--brass); box-shadow: none; }

.weekly-outlook__day.is-today em,
.weekly-outlook__day.is-today small {
  color: var(--brand-deep);
}

.weekly-outlook__day.is-today em {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  color: var(--surface);
  background: var(--brand-deep);
}

.weekly-outlook__lead {
  margin: 14px 0 0;
  font-size: 0.86rem;
}

.weekly-outlook__lead strong {
  color: var(--brass-ink);
}

.weekly-outlook__advice {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.7;
}

.weekly-outlook__charm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.weekly-outlook__charm span {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.weekly-outlook__charm b {
  color: var(--ink);
  font-weight: 700;
}
.chart-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.chart-fact-grid--secondary { margin-top: 16px; }
.chart-fact-card,
.chart-wide-card { padding: clamp(22px, calc(var(--col) * 0.03), 32px); }
.chart-fact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.chart-fact-card h3, .chart-wide-card h3 { margin: 0 0 12px; font-size: 1.4rem; }
.chart-fact-card h3 small { color: var(--ink-soft); font-size: 0.82rem; font-weight: 500; }
.chart-fact-card > p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.day-master-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
/* 일간은 원국에서 가장 중요한 한 글자다. 예전에는 이것만 주칠 빨강이라, 같은
   글자가 기둥 표에서는 자기 오행 색이고 이 카드에서는 빨강인 두 가지로 찍혔다.
   라벨을 노리는 선택자는 `> span` 이어야 한다 — 아래 오행 이름이 자기 색을 갖는데
   `.day-master-mark span` 은 그 안쪽까지 잡아 먹색으로 덮는다. */
.day-master-mark strong { font-family: var(--font-display); color: var(--element-ink, var(--accent)); font-size: 3.4rem; line-height: 1; }
.day-master-mark > span { color: var(--ink-soft); }
.fact-meter { height: 7px; margin: 16px 0; overflow: hidden; border-radius: var(--radius-pill); background: var(--paper-deep); }
.fact-meter__fill { display: block; height: 100%; background: var(--brand); }
.fact-meter__fill--0 { width: 2%; } .fact-meter__fill--10 { width: 10%; } .fact-meter__fill--20 { width: 20%; }
.fact-meter__fill--30 { width: 30%; } .fact-meter__fill--40 { width: 40%; } .fact-meter__fill--50 { width: 50%; }
.fact-meter__fill--60 { width: 60%; } .fact-meter__fill--70 { width: 70%; } .fact-meter__fill--80 { width: 80%; }
.fact-meter__fill--90 { width: 90%; } .fact-meter__fill--100 { width: 100%; }
.chart-wide-card { display: grid; grid-template-columns: 240px 1fr; gap: 28px; margin-top: 16px; }
.ten-god-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ten-god-grid > div { display: grid; gap: 4px; padding: 12px; border-left: 2px solid var(--brass); background: var(--paper); }
.ten-god-grid > div > span { color: var(--ink-soft); font-size: 0.75rem; }
.fact-chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.fact-chip-list span { padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--brand-deep); background: var(--paper); font-size: 0.78rem; }
.chart-caution { display: flex; gap: 12px; margin-top: 20px; padding: 18px; border-left: 3px solid var(--brass); background: var(--brass-soft); }
.chart-caution p { margin: 3px 0 0; font-size: 0.84rem; }
.result-next-actions,
.reading-followups,
.record-management-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding: 24px;
}
.result-next-actions > div:last-child, .reading-followups > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.result-next-actions h2, .reading-followups h2 { margin: 0; font-size: 1.35rem; }

.page-shell--reading-document { width: min(calc(100% - 32px), 920px); }
.reading-document__header { display: flex; justify-content: space-between; gap: 24px; align-items: start; margin-bottom: 30px; }
.reading-document__header h1 { margin: 0 0 8px; font-size: clamp(2.4rem, calc(var(--col) * 0.05), 4rem); }
.reading-document__header p:last-child { color: var(--ink-soft); }
.reading-context { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 0; overflow: hidden; background: var(--line); }
.reading-context--compatibility { grid-template-columns: repeat(3, 1fr); }
.reading-context > div { display: grid; gap: 4px; padding: 18px 20px; background: var(--surface); }
.reading-context span { color: var(--ink-soft); font-size: 0.72rem; }
.compatibility-score-card { display: grid; grid-template-columns: minmax(220px, 0.7fr) 1.3fr; gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
.compatibility-score-card > div { padding: clamp(22px, calc(var(--col) * 0.04), 38px); background: var(--surface); }
.compatibility-score-card__score > strong { display: block; margin: 6px 0; color: var(--accent); font-family: var(--font-display); font-size: 4rem; line-height: 1; }
.compatibility-score-card__score small { font-size: 1rem; }
.compatibility-score-card__score p, .compatibility-score-card__details p { color: var(--ink-soft); font-size: 0.84rem; }
.compatibility-score-card__details { display: grid; gap: 18px; }
.compatibility-score-card__details > div + div { padding-top: 16px; border-top: 1px solid var(--line); }
.compatibility-score-card__details > div { display: grid; gap: 4px; }
.compatibility-score-card__details span { color: var(--ink-faint); font-size: 0.72rem; }
.compatibility-score-card__details strong { color: var(--brand-deep); font-size: 1.05rem; }
.compatibility-score-card__details p { margin: 0; }
.reading-summary { margin-top: 20px; padding: 24px; border-left: 4px solid var(--accent); }
.reading-summary p { margin: 12px 0 0; font-family: var(--font-display); font-size: 1.22rem; line-height: 1.8; }
.reading-toc { margin-top: 18px; padding: 22px 24px; }
.reading-toc ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin: 0; padding-left: 0; list-style: none; }
.reading-toc a { color: var(--ink); text-decoration: none; }
.reading-toc a:hover { color: var(--accent); }
.reading-progress { display: grid; justify-items: center; padding: clamp(32px, calc(var(--col) * 0.07), 64px); text-align: center; }
.reading-progress__hourglass {
  width: 64px;
  height: 72px;
  margin-bottom: 18px;
  color: var(--brand-deep);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
  transform-origin: 50% 50%;
  animation: reading-hourglass-turn 4.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.reading-progress__hourglass svg { display: block; width: 100%; height: 100%; overflow: visible; }
.reading-progress__hourglass-frame { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.reading-progress__hourglass-sand { fill: rgba(199, 162, 104, 0.68); }
.reading-progress__hourglass-stream { fill: none; stroke: rgba(199, 162, 104, 0.78); stroke-linecap: round; stroke-width: 1.4; }
@keyframes reading-hourglass-turn {
  0%, 42% { transform: rotate(0deg); }
  50%, 92% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
.reading-progress h2 { margin: 0 0 10px; font-size: 1.9rem; }
.reading-progress > p:not(.eyebrow) { max-width: 600px; color: var(--ink-soft); }
.reading-progress__bar { width: min(100%, 580px); height: 7px; margin: 26px 0 16px; overflow: hidden; border-radius: var(--radius-pill); background: var(--paper-deep); }
.reading-progress__fill { display: block; height: 100%; background: var(--accent); }
.reading-progress__fill--10 { width: 10%; } .reading-progress__fill--20 { width: 20%; } .reading-progress__fill--35 { width: 35%; }
.reading-progress__fill--50 { width: 50%; } .reading-progress__fill--65 { width: 65%; } .reading-progress__fill--80 { width: 80%; } .reading-progress__fill--95 { width: 95%; }
.reading-progress__fill--100 { width: 100%; }
.reading-progress__steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: min(100%, 620px); margin: 0; padding: 0; list-style: none; }
.reading-progress__steps li { display: grid; justify-items: center; gap: 6px; color: var(--ink-faint); font-size: 0.72rem; }
.reading-progress__steps span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.reading-progress__steps .is-current { color: var(--accent); font-weight: 700; }
.reading-progress__steps .is-current span { background: var(--accent); }
.reading-progress__actions { display: flex; gap: 8px; margin-top: 28px; }
.record-management-row p { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.84rem; }

.profile-record-list,
.payment-refund-list,
.inquiry-thread { display: grid; gap: 12px; }
.profile-record { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px; }
.profile-record__mark, .account-record__icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--brand); background: var(--paper); }
.profile-record__body h2 { margin: 2px 0; font-size: 1.25rem; }
.profile-record__body span, .profile-record__body p, .profile-record__body small { color: var(--ink-soft); font-size: 0.78rem; }
.profile-record__actions { display: flex; align-items: center; gap: 12px; }
.text-button { appearance: none; padding: 0; border: 0; background: none; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.text-button--danger { color: var(--danger); }

.inquiry-compose, .inquiry-history, .inquiry-reply-form { padding: clamp(22px, calc(var(--col) * 0.04), 34px); }
.inquiry-history, .inquiry-reply-form { margin-top: 18px; }
.inquiry-compose h2 { margin-top: 0; }
.inquiry-thread { margin-top: 22px; }
.inquiry-message { max-width: 82%; padding: 20px 22px; }
.inquiry-message--user { justify-self: end; border-bottom-right-radius: 4px; }
.inquiry-message--support { justify-self: start; border-left: 3px solid var(--brand); border-bottom-left-radius: 4px; background: #f8f6f1; }
.inquiry-message strong, .inquiry-message small { display: block; }
.inquiry-message small { margin-top: 10px; color: var(--ink-faint); }
.account-record--link { text-decoration: none; color: inherit; }

.refund-status-panel { margin-bottom: 18px; }
.payment-refund-card { display: grid; gap: 16px; padding: 22px; }
.payment-refund-card__summary { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.payment-refund-card__summary p { margin: 3px 0 0; color: var(--ink-soft); font-size: 0.82rem; }
.refund-request-form { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; gap: 12px; align-items: center; }
.refund-request-form label,
.closure-form label { font-size: 0.86rem; font-weight: 690; }
.refund-detail-card .fact-list { margin: 0; }
.notice-box, .policy-footnote { margin-top: 18px; padding: 20px 22px; }
.notice-box { border-left: 3px solid var(--brass); background: var(--brass-soft); }
.notice-box p, .policy-footnote { color: var(--ink-soft); font-size: 0.84rem; }
.policy-footnote a { color: var(--brand-deep); }
.danger-zone { border-color: #c9a39f; }
.danger-zone, .closure-status-card { padding: clamp(24px, calc(var(--col) * 0.04), 38px); }
.plain-check-list { display: grid; gap: 8px; padding-left: 20px; color: var(--ink-soft); }
.closure-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px 14px; align-items: end; margin-top: 26px; }
.closure-form label { grid-column: 1 / -1; }
.legacy-link-actions { display: flex; justify-content: center; gap: 8px; margin-top: 20px; padding: 22px; }

/* 원국 읽기 — 요약, 기둥 상세, 대운, 접기 */
.chart-headline { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(1.25rem, calc(var(--col) * 0.026), 1.62rem); line-height: 1.5; color: var(--brand-deep); }
.chart-headline-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chart-headline-chips span { display: grid; gap: 2px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.chart-headline-chips small { color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.06em; }
.chart-headline-chips strong { font-size: 0.92rem; color: var(--ink); }
.block-note { margin: 12px 0 0; color: var(--ink-faint); font-size: 0.8rem; line-height: 1.7; }
.quiet-list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.quiet-list li { display: grid; gap: 2px; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.7; }
.quiet-list li strong { color: var(--ink); font-size: 0.88rem; }
/* The bars carry the same 오행 colours as the eight characters above them, so a
   column and the tiles that produced it are recognisably the same thing. */
.element-count.is-dominant strong { font-weight: 800; }
.element-count.is-weak strong { color: var(--ink-faint); }
.element-count.is-weak > span { opacity: 0.3; }

.life-cycles { margin-top: 64px; }
/* Eight or nine cells in a track that scrolls, with nothing saying so. The two
   covering gradients scroll with the content and the two shadows do not, so a
   shadow only shows on a side that still has cells behind it. */
.life-cycle-strip {
  display: flex;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  background:
    linear-gradient(90deg, var(--paper) 40%, rgba(250, 246, 237, 0)) left center,
    linear-gradient(90deg, rgba(250, 246, 237, 0), var(--paper) 60%) right center,
    radial-gradient(farthest-side at 0 50%, rgba(20, 18, 16, 0.16), rgba(20, 18, 16, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 18, 16, 0.16), rgba(20, 18, 16, 0)) right center;
  background-repeat: no-repeat;
  background-size: 46px 100%, 46px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

.life-cycle { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 92px; padding: 14px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); scroll-snap-align: start; }
.life-cycle__marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 18px; margin-top: auto; padding-top: 6px; }
.life-cycle__age { color: var(--ink-faint); font-size: 0.7rem; }
.life-cycle__pillar { font-family: var(--font-display); font-size: 1.24rem; color: var(--ink); }
.life-cycle__element { color: var(--ink-soft); font-size: 0.68rem; }
.life-cycle__role { color: var(--brand-deep); font-style: normal; font-size: 0.7rem; }
.life-cycle__mark { padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-faint); font-size: 0.66rem; }
.life-cycle__now { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--brand-deep); color: var(--surface); font-size: 0.68rem; font-weight: 700; }
.life-cycle.is-current { border-color: var(--brand-deep); box-shadow: var(--shadow); }
.life-cycle.is-current .life-cycle__pillar { color: var(--brand-deep); }
.life-cycles__follow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.life-cycles__follow p { margin: 0; color: var(--ink-soft); font-size: 0.86rem; }

.chart-detail-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.chart-detail-panel--facts { margin-top: 64px; }
.chart-detail-panel > summary { padding: 18px 22px; color: var(--brand-deep); font-size: 0.9rem; font-weight: 700; cursor: pointer; }

/* One disclosure vocabulary. 원국 twice, 대운, 풀이 and 무물 kept the browser's
   own ▶ while every other foldable panel on the site drew a chevron that turns,
   so the same gesture looked like two unrelated controls depending on the page.
   These summaries carry no icon in their markup, so the chevron is drawn here. */
.chart-detail-panel > summary,
.chat-basis > summary,
.reading-sample > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}

.chart-detail-panel > summary::-webkit-details-marker,
.chat-basis > summary::-webkit-details-marker,
.reading-sample > summary::-webkit-details-marker {
  display: none;
}

.chart-detail-panel > summary::after,
.chat-basis > summary::after,
.reading-sample > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--ink-faint);
  border-bottom: 1.6px solid var(--ink-faint);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.chart-detail-panel[open] > summary::after,
.chat-basis[open] > summary::after,
.reading-sample[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}
.chart-detail-panel[open] > summary { border-bottom: 1px solid var(--line); }
.chart-detail-panel__body { padding: 22px; }
.chart-detail-panel__body > .chart-fact-grid:first-child { margin-top: 0; }

.reading-natal { display: grid; gap: 14px; margin-top: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.reading-natal__head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.reading-natal__head h2 { margin: 4px 0 0; font-size: 1.15rem; }
.reading-natal__pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.reading-natal__pillars li { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
/* 칸의 라벨 하나를 노리던 선택자인데 `span` 을 느슨하게 잡아, 간지 글자가 span 이
   되자 그것까지 10.88px 흐린 잔글씨로 끌어내렸다. 라벨은 칸의 직계 자식이다. */
.reading-natal__pillars li > span { color: var(--ink-faint); font-size: 0.68rem; }
.reading-natal__pillars strong { font-family: var(--font-display); font-size: 1.05rem; }
.reading-natal__pillars small { color: var(--ink-soft); font-size: 0.66rem; }
.reading-natal--pair { gap: 20px; }
.reading-natal__person { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.reading-natal__person:first-of-type { padding-top: 0; border-top: 0; }
.reading-natal__person-head { display: flex; align-items: baseline; gap: 10px; }
.reading-natal__person-head span { color: var(--ink-faint); font-size: 0.7rem; }
.reading-natal__person-head strong { font-size: 0.95rem; }
.reading-natal__person-head a { margin-left: auto; }
.pair-note-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

/* 점수의 산식. 축마다 비중과 점수를 나란히 두고, 그 아래 무엇을 보고 그렇게
   매겼는지를 문장으로 편다 — 확인할 수 없는 숫자는 근거가 아니다. */
.score-weights { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.score-weights > li { display: grid; gap: 7px; }
/* 다섯 축이 18px 간격 하나로만 나뉘어 있어서, 근거 문장이 두 줄을 넘기면 어디까지가
   한 축인지 눈으로 끊기지 않았다. 축 사이를 가르는 것은 상자가 아니라 괘선이다. */
.score-weights > li + li { padding-top: 16px; border-top: 1px solid var(--line); }
.score-weight__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.score-weight__head strong { font-size: 0.94rem; }
.score-weight__head span { color: var(--ink-soft); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.score-weights p { margin: 0; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.75; }

/* 무물 — 이 대화가 무엇을 근거로 답하는지 */
.chat-basis { margin: 0 0 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.chat-basis > summary { padding: 12px 16px; cursor: pointer; }
.chat-basis__label { display: inline-grid; gap: 2px; vertical-align: middle; }
.chat-basis > summary strong { font-size: 0.9rem; color: var(--ink); }
.chat-basis[open] > summary { border-bottom: 1px solid var(--line); }
.chat-basis__body { padding: 14px 16px 16px; }
.chat-basis__body .reading-natal__pillars { margin: 10px 0 0; }
.chat-basis__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }

/* 기간의 계산 근거 — 연운·월운·일운, 영역 점수, 월별 흐름 */
.period-timing { margin-top: 40px; }
.period-pillars { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.period-pillars > li { flex: 1 1 150px; max-width: 260px; display: grid; justify-items: center; gap: 3px; padding: 16px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.period-pillar__label { color: var(--ink-faint); font-size: 0.7rem; }
.period-pillars strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--brand-deep); }
.period-pillars small { color: var(--ink-soft); font-size: 0.7rem; }
.period-pillars em { color: var(--brand-deep); font-style: normal; font-size: 0.72rem; }
.period-pillar__relations { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.72rem; text-align: center; }
.period-scores { display: grid; gap: 10px; margin-top: 20px; }
.period-score { display: grid; grid-template-columns: 44px 1fr 32px; gap: 12px; align-items: center; }
.period-score span { color: var(--ink-soft); font-size: 0.78rem; }
.period-score strong { color: var(--brand-deep); font-size: 0.86rem; text-align: right; }
.month-strip { display: flex; gap: 6px; margin: 20px 0 0; padding: 0 0 6px; list-style: none; overflow-x: auto; }
.month-cell { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; min-width: 68px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.month-cell > span { color: var(--ink-faint); font-size: 0.68rem; }
.month-cell strong { font-family: var(--font-display); font-size: 1.05rem; }
.month-cell small { color: var(--brand-deep); font-size: 0.66rem; }
.month-cell .fact-meter { width: 100%; height: 4px; margin: 6px 0 0; }
.life-cycle .fact-meter { width: 100%; height: 4px; margin: 6px 0 0; }
.month-cell.is-current { border-color: var(--brand-deep); box-shadow: var(--shadow); }

/* 해마다 달라지는 두 사람. 달 칸은 가로로 훑는 띠지만 이쪽은 해마다 문장이 붙으므로
   세로로 쌓는다 — 같은 부품을 억지로 돌려쓰면 문장이 68px 칸에 갇힌다. */
.pair-timeline { margin-top: 32px; }
.pair-timeline__years { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.pair-year { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.pair-year__head { display: flex; align-items: baseline; gap: 10px; }
.pair-year__year { font-family: var(--font-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pair-year__head strong { font-size: 1.15rem; }
.pair-year__mood { margin: 0; color: var(--brand-deep); font-size: 0.82rem; }
.pair-year__note { margin: 0; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.7; }
.pair-year.is-current { border-color: var(--brand-deep); box-shadow: var(--shadow); }
/* 한쪽만 흔들리는 해는 평균이 가운데로 모여도 평온한 해가 아니므로 눈에 띄어야 한다. */
.pair-year.is-diverging .pair-year__mood { color: var(--accent); }

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 980px */
  .compatibility-relation-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saved-profile-request__form { grid-template-columns: repeat(2, 1fr); }
  .saved-profile-request__form .button { grid-column: 1 / -1; }
  .ten-god-grid { grid-template-columns: repeat(3, 1fr); }
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 760px */
  .compatibility-direct-form { padding: 14px; }
  .compatibility-person-grid { grid-template-columns: 1fr; }
  /* Stacked, the two cards still sit one above the other, so the line between them
     stays vertical. It used to be laid out horizontally here and turned upright
     again by a rotate in application.css — two wrongs arriving at the right answer. */
  .relationship-knot { height: 34px; }
  .compatibility-relation-panel, .saved-profile-request__form { grid-template-columns: 1fr; padding-inline: 4px; }
  .compatibility-relation-panel__action, .saved-profile-request__form .button { grid-column: auto; }
  .weekly-outlook__chart { gap: 3px; }
  .weekly-outlook__day { grid-template-rows: auto 54px auto auto; }
  .weekly-outlook__day b { font-size: 0.66rem; }
  .weekly-outlook__day em { font-size: 0.68rem; padding-inline: 5px; }
  .chart-fact-grid, .chart-wide-card, .reading-context, .reading-context--compatibility, .compatibility-score-card { grid-template-columns: 1fr; }
  .chart-wide-card { gap: 16px; }
  .ten-god-grid { grid-template-columns: repeat(2, 1fr); }
  .result-next-actions, .reading-followups, .record-management-row, .reading-document__header { align-items: stretch; flex-direction: column; }
  .result-next-actions > div:last-child, .reading-followups > div:last-child { display: grid; }
  .reading-document__header .status-pill { align-self: start; }
  .reading-toc ol { grid-template-columns: 1fr; }
  .reading-progress { padding: 30px 18px; }
  .reading-progress__steps { gap: 4px; }
  .reading-progress__actions { display: grid; width: 100%; }
  .profile-record { grid-template-columns: 42px minmax(0, 1fr); }
  .profile-record__actions { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
  .inquiry-message { max-width: 94%; }
  .refund-request-form, .closure-form { grid-template-columns: 1fr; }
  .closure-form label { grid-column: auto; }
  .legacy-link-actions { display: grid; }
  .chart-headline-chips span { flex: 1 1 auto; }
  .life-cycles__follow { align-items: stretch; flex-direction: column; }
  .chart-detail-panel__body { padding: 16px; }
  .reading-natal { padding: 18px; }
  /* 세로로 쌓이면 stretch 가 상태 알약까지 폭 전체로 늘려 띠로 만든다. */
  .reading-natal__head { align-items: stretch; flex-direction: column; gap: 8px; }
  .reading-natal__head > .status-pill { align-self: start; }
  .reading-natal__person-head { flex-wrap: wrap; }
  .reading-natal__person-head a { margin-left: 0; }
  .period-pillars > li { max-width: none; }
  .period-score { grid-template-columns: 40px 1fr 30px; gap: 8px; }
}

/* Keep the film-derived chrome authoritative over earlier public reset layers. */
.public-page .site-header {
  color: #f5efe3;
  border-bottom-color: rgba(218, 194, 144, 0.18);
  background: rgba(13, 17, 29, 0.96);
}

.public-page .site-footer {
  color: rgba(244, 237, 224, 0.68);
  border-top-color: rgba(218, 194, 144, 0.18);
  background: #0d111d;
  /* 하단 바가 가리지 않게 비우는 자리는 페이지의 마지막 요소가 자기 바탕으로
     채운다. body 의 padding 으로 내면 그 96px 은 아무 것도 칠하지 않은 자리라,
     뒤에 무엇이 있든 푸터 밑에서 다시 드러난다. */
  padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
}

.public-page .site-footer .footer-links__title,
.public-page .site-footer a {
  color: #f8f2e6;
}

.public-page .site-footer__brand p,
.public-page .site-footer .footer-links a,
.public-page .site-footer__bottom {
  color: rgba(244, 237, 224, 0.62);
}

.public-page .site-footer__bottom {
  border-top-color: rgba(218, 194, 144, 0.16);
}


/* ── 클라이언트 리뉴얼 (2026-08-18) ───────────────────────────────────────────
   psd: 운운사주 리뉴얼_260818.psd (1080×1920). 좌표는 그 폭 기준이고 여기서는
   비율로 옮긴다. 근거와 결정은 docs/18 에 있다. */

/* 열 바깥은 단색이 아니라 이 제품이 서 있는 밤이다. psd 배경에 실제로 Gaussian 을
   걸어 960×600 **무손실** WebP 로 저장한다(77KB).

   세 번 틀리고 알아낸 값이다.
   1. 160px 로 저장해 브라우저가 늘리게 두었다 — 9배 확대는 흐림이 아니라 뭉갬이다.
      이웃 픽셀 단차가 커서 확대하면 그 계단이 그대로 면이 된다.
   2. 1920px 손실 압축(q70, 7.7KB) — 흐림은 매끄러웠지만 WebP 가 16px 블록마다 단차를
      남겨 어두운 면에 격자가 보였다. 재 보니 블록 경계의 단차가 다른 곳의 **20배**.
      그레인을 섞고 품질을 올려 봤지만 깨끗해지는 지점의 용량이 무손실보다 컸다.
   3. 지금: 내용이 극히 저주파라 960px 이면 이웃 단차가 0.089 다. 무손실이면 그 단차가
      보존되므로 레티나에서 3배로 늘려도 계단이 생기지 않는다. 화면에서 실측한
      블록비 1.04 (2번은 20.12).

   CSS `filter` 로 흐리지 않는 이유는 따로 있다: filter 를 가진 요소는 fixed 자식의
   기준 상자가 되고(서랍이 이미 한 번 걸린 함정이다), 별도 레이어로 깔면 스크롤바
   자리를 덮지 못해 오른쪽에 띠가 남는다. 캔버스에 직접 칠하면 둘 다 없다. */
html:not(.admin-page) {
  background:
    /* 열은 창 가운데 30% 를 덮으므로, 어두워지는 구간은 그 바깥에서 시작해야 한다.
       좁은 타원을 쓰면 밝은 중심이 통째로 열 뒤에 숨고 보이는 자리만 캄캄해진다. */
    radial-gradient(ellipse 100% 130% at 50% 44%, transparent 38%, rgba(3, 5, 11, 0.92) 100%) fixed,
    url("/assets/woonwoon/ambient-night-d205200a.webp") center / cover no-repeat fixed,
    var(--app-ambient);
}

/* 이 질의는 열이 아니라 창을 묻는 것이 맞다 — 자리를 잡아 두는 스크롤바는 창에
   달려 있고, 창이 열보다 넓을 때만 그 자리가 열 밖에 생긴다. 열과 같거나 좁은
   창에서 자리를 잡으면 열이 15px 깎인다(감사가 430 에서 415 로 잡아냈다).
   화면이 밀리는 것은 고전 스크롤바에서만 일어나므로 모바일은 애초에 해당 없다. */
@media (min-width: 470px) {
  html:not(.admin-page) {
    scrollbar-gutter: stable;
  }
}

body.public-page {
  position: relative;
  width: 100%;
  max-width: var(--app-width);
  min-height: 100svh;
  margin-inline: auto;
  box-shadow: var(--shadow-column);
}


/* ── 헤더 ──────────────────────────────────────────────────────────────── */

.site-header__login {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  color: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.site-header__login .ui-icon {
  width: 26px;
  height: 26px;
}

/* ── 서랍 ──────────────────────────────────────────────────────────────── */

.site-drawer {
  justify-self: end;
}

.site-drawer__toggle {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  list-style: none;
}

.site-drawer__toggle::-webkit-details-marker {
  display: none;
}

.site-drawer__bars {
  display: grid;
  gap: 5px;
  width: 26px;
}

.site-drawer__bars i {
  height: 3px;
  border-radius: var(--radius-xs);
  background: currentColor;
}

/* 셋째 줄만 짧다 — psd 의 햄버거가 그렇다. */
.site-drawer__bars i:last-child {
  width: 58%;
  justify-self: end;
}

.site-drawer[open] .site-drawer__panel {
  transform: translateX(0);
}

.site-drawer__panel {
  position: fixed;
  z-index: 90;
  inset-block: 0;
  right: max(0px, calc(50vw - var(--app-width) / 2));
  width: min(63.8%, calc(var(--app-width) * 0.638));
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* psd 의 판은 불투명한 먹색이고 왼쪽 두 모서리가 문과 같은 80px 로 말려 있다.
     반투명 + 흐림으로 두면 뒤의 그림이 비쳐 글이 그림 위에 뜬다. 프로필 블록이
     시작하는 자리도 psd 는 화면 높이의 15% 지점이다. */
  padding: 118px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  color: #f7f1e6;
  border-radius: var(--radius-door) 0 0 var(--radius-door);
  background: #1f1f1f;
  transform: translateX(105%);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.site-drawer__profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 10px 22px;
  color: inherit;
  text-decoration: none;
}

/* psd 실측: 표제 66→26.3px, 항목 49→19.5px. 이 판은 화면의 3분의 2 를 덮으므로
   글자가 작으면 넓은 판에 잔글씨가 얹힌 것으로 읽힌다. */
.site-drawer__profile strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.64rem;
}

.site-drawer__profile small {
  color: rgba(236, 228, 213, 0.72);
  font-size: 0.78rem;
}

.site-drawer__nav {
  display: grid;
  gap: 2px;
}

.site-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.22rem;
  text-decoration: none;
}

.site-drawer__link:hover,
.site-drawer__link:focus-visible,
.site-drawer__profile:hover,
.site-drawer__profile:focus-visible {
  color: #fffaf0;
}

.site-drawer__foot {
  margin-top: auto;
}

.site-drawer__signout button,
.site-drawer__signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: rgba(240, 233, 220, 0.86);
  border: 0;
  background: none;
  font-size: 0.92rem;
  cursor: pointer;
}

/* 서랍이 열리면 뒤가 밀리지 않게 잠근다. */
html.is-drawer-open,
html.is-drawer-open body {
  overflow: hidden;
}

/* ── Floating liquid-ink navigation v5 · Main atmosphere exception ─────── */

.bottom-bar {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  width: min(374px, calc(100% - 24px));
  height: 84px;
  transform: translateX(-50%);
  color: #c1baad;
  filter:
    drop-shadow(0 12px 20px rgba(0, 1, 6, 0.42))
    drop-shadow(0 0 6px rgba(151, 119, 65, 0.04));
  --active-center: 50%;
}

.bottom-bar[data-active-index="0"] { --active-center: 10%; }
.bottom-bar[data-active-index="1"] { --active-center: 30%; }
.bottom-bar[data-active-index="2"] { --active-center: 50%; }
.bottom-bar[data-active-index="3"] { --active-center: 70%; }
.bottom-bar[data-active-index="4"] { --active-center: 90%; }

.bottom-bar__plinth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 84px;
  display: block;
  transform-origin: center bottom;
}

/* A dim pool travels under the surface with the sediment. It is not a halo
   around the control: the SVG clips the body visually and this stays darker
   than the active icon, so the response reads as wet ink catching one light. */
.bottom-bar::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 20px;
  left: var(--active-center);
  width: 72px;
  height: 40px;
  border-radius: 44% 56% 51% 49% / 58% 46% 54% 42%;
  background: radial-gradient(ellipse at 50% 38%,
    rgba(231, 211, 171, 0.12) 0%,
    rgba(78, 91, 122, 0.14) 42%,
    rgba(8, 14, 24, 0) 74%);
  filter: blur(1.5px);
  opacity: 0.7;
  transform: translateX(-50%) scale(0.9);
  transition:
    left 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease-out;
  pointer-events: none;
}

.bottom-bar[data-active-index=""]::before,
.bottom-bar[data-active-index="-1"]::before {
  opacity: 0;
}

.bottom-bar__active {
  position: absolute;
  z-index: 2;
  top: 79px;
  left: var(--active-center);
  width: 19px;
  height: 2px;
  border-radius: 46% 54% 58% 42% / 68% 72% 28% 32%;
  background: linear-gradient(90deg,
    rgba(151, 132, 98, 0.12),
    rgba(203, 183, 143, 0.92) 48%,
    rgba(151, 132, 98, 0.14));
  box-shadow: none;
  transform: translateX(-50%);
  transition:
    left 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease-out;
}

.bottom-bar[data-active-index="-1"] .bottom-bar__active {
  opacity: 0;
}

.bottom-bar.is-travelling .bottom-bar__active {
  animation: bottom-bar-sediment-travel 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bottom-bar.is-arriving .bottom-bar__active {
  animation: bottom-bar-sediment-settle 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bottom-bar.is-travelling .bottom-bar__plinth {
  animation: bottom-bar-ink-breathe 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bottom-bar.is-travelling::before {
  animation: bottom-bar-pool-travel 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bottom-bar.is-arriving::before {
  animation: bottom-bar-pool-settle 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bottom-bar-sediment-travel {
  0%, 100% { width: 19px; transform: translateX(-50%) scaleY(1); }
  46% { width: 35px; transform: translateX(-50%) scaleY(0.72); }
  74% { width: 24px; transform: translateX(-50%) scaleY(1.08); }
}

@keyframes bottom-bar-sediment-settle {
  0% { width: 24px; transform: translateX(-50%) scaleY(0.72); opacity: 1; }
  58% { width: 15px; transform: translateX(-50%) scaleY(1.12); opacity: 1; }
  100% { width: 19px; transform: translateX(-50%) scaleY(1); opacity: 1; }
}

@keyframes bottom-bar-ink-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  48% { transform: scaleX(1.006) scaleY(0.992); filter: brightness(1.055); }
}

@keyframes bottom-bar-pool-travel {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(0.9); }
  46% { opacity: 0.9; transform: translateX(-50%) scaleX(1.34) scaleY(0.78); }
  74% { opacity: 0.8; transform: translateX(-50%) scaleX(1.06) scaleY(1.08); }
}

@keyframes bottom-bar-pool-settle {
  0% { opacity: 0.7; transform: translateX(-50%) scaleX(1.14) scaleY(0.72); }
  55% { opacity: 0.82; transform: translateX(-50%) scaleX(0.84) scaleY(1.08); }
  100% { opacity: 0.7; transform: translateX(-50%) scale(0.9); }
}

.bottom-bar__list {
  position: absolute;
  z-index: 3;
  inset: 0 2px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.bottom-bar__item {
  height: 68px;
  margin-top: 16px;
}

.bottom-bar__item--home {
  height: 84px;
  margin-top: 0;
}

.bottom-bar__link {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  color: #c1baad;
  text-decoration: none;
  transition: color 160ms ease-out;
}

.bottom-bar__link.is-current,
.bottom-bar__link.is-target {
  color: #e9ddc8;
}

.bottom-bar__link:hover,
.bottom-bar__link:focus-visible {
  color: #f0e8d8;
}

.bottom-bar__link:focus-visible {
  outline: 1px solid #c7a268;
  outline-offset: -4px;
  border-radius: 18px;
}

.bottom-bar__icon {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  z-index: 1;
}

.bottom-bar__icon .ui-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.bottom-bar__label {
  position: absolute;
  top: 38px;
  left: 50%;
  width: 86px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}

.bottom-bar__item--home .bottom-bar__icon {
  top: 18px;
}

.bottom-bar__item--home .bottom-bar__label {
  top: 50px;
  width: 40px;
  height: 24px;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: -0.15px;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-bar__link {
    transition-duration: 0ms;
  }

  .bottom-bar__active {
    transition-duration: 0ms;
    animation: none;
  }

  .bottom-bar.is-travelling .bottom-bar__active,
  .bottom-bar.is-arriving .bottom-bar__active,
  .bottom-bar.is-travelling .bottom-bar__plinth,
  .bottom-bar.is-travelling::before,
  .bottom-bar.is-arriving::before {
    animation: none;
  }

  .bottom-bar::before {
    transition-duration: 0ms;
  }
}

/* The home header occupies the same 64px plane as the Figma main frame. */
.immersive-page .public-page .site-header {
  height: 64px;
  border-bottom-color: transparent;
  background: transparent;
}

.immersive-page .site-header__inner {
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 0 30px 0 20px;
}

.immersive-page .wordmark__mark {
  width: 76px;
  height: 30px;
  display: block;
  object-fit: contain;
}

.immersive-page .site-drawer__toggle {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  color: #c7a268;
}

.immersive-page .site-drawer__bars {
  width: 24px;
  gap: 7px;
}

.immersive-page .site-drawer__bars i,
.immersive-page .site-drawer__bars i:last-child {
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: #c7a268;
}

.immersive-page .woon-night-hub {
  min-height: 100svh;
  margin-top: -64px;
}

.immersive-page .woon-night-hub__inner {
  min-height: max(764px, 100svh);
  padding: 72px 30px 138px;
}


/* ── 리워드 ────────────────────────────────────────────────────────────── */

.reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reward-card {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.reward-card__label {
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.reward-card__value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.1;
}

.reward-card__note {
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.reward-steps {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
}

/* ── P02 · Login v3 · Night Instrument ───────────────────────────────────
   The login screen is one instrument on the night, not a bright card laid on
   top of it. Its 370px measure and vertical rhythm come from the approved
   430×1120 Figma specimens. The permanent liquid navigation keeps its global
   geometry so a protected-route redirect does not make the bar jump. */

body.public-page--sessions-new {
  min-height: 1120px;
  color: #f0e8d8;
  background:
    radial-gradient(210px 250px at 80% 14%, rgba(48, 61, 88, 0.14), transparent 72%),
    radial-gradient(260px 240px at 10% 62%, rgba(112, 83, 48, 0.055), transparent 76%),
    linear-gradient(180deg, #03070f 0%, #040813 58%, #02050c 100%);
}

.public-page--sessions-new .site-header {
  height: 64px;
  color: #c7a268;
  border-bottom-color: transparent;
  background: transparent;
}

.public-page--sessions-new .site-header__inner {
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 0 30px 0 20px;
}

.public-page--sessions-new .wordmark__mark {
  width: 76px;
  height: 30px;
  object-fit: contain;
}

.public-page--sessions-new .site-drawer__toggle {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  justify-content: center;
  color: #c7a268;
}

.public-page--sessions-new .site-drawer__bars {
  width: 24px;
  gap: 7px;
}

.public-page--sessions-new .site-drawer__bars i,
.public-page--sessions-new .site-drawer__bars i:last-child {
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: #c7a268;
}

.public-page--sessions-new #main-content {
  min-height: 1056px;
}

.public-page--sessions-new .site-footer {
  display: none;
}

.auth-login {
  width: 370px;
  max-width: calc(100% - 60px);
  min-height: 830px;
  display: block;
  margin: 0 auto;
  padding: 32px 0 0;
  color: #f0e8d8;
}

.auth-login__intro,
.auth-login__context-slot,
.auth-login__form,
.auth-login__providers,
.auth-login__links,
.auth-login__security {
  width: 100%;
}

.auth-login__eyebrow {
  margin: 0;
  color: #c7a268;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

.auth-login__intro h1 {
  margin: 10px 0 0;
  color: #f0e8d8;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 650;
  line-height: 32px;
  letter-spacing: -0.2px;
}

.auth-login__lede {
  margin: 14px 0 0;
  color: #b7b2aa;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.auth-login__context-slot {
  height: 54px;
  margin-top: 18px;
}

.auth-login__context {
  position: relative;
  width: 100%;
  height: 54px;
  color: #9eb3d0;
}

.auth-login__context-rule {
  position: absolute;
  top: 7px;
  left: 0;
  width: 2px;
  height: 40px;
  border-radius: 1px;
  background: currentColor;
}

.auth-login__context p {
  position: absolute;
  top: 7px;
  left: 14px;
  width: calc(100% - 14px);
  margin: 0;
  color: currentColor;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.auth-login__context--protected-return p,
.auth-login__context--invalid-credentials p {
  top: 17px;
}

.auth-login__context--invalid-credentials {
  color: #e39187;
}

.auth-login__context--rate-limited {
  color: #d7ad68;
}

.auth-login__form {
  display: grid;
  gap: 0;
  margin-top: 10px;
}

.auth-login__form .field-group {
  display: grid;
  gap: 8px;
}

.auth-login__form .field-group + .field-group {
  margin-top: 20px;
}

.auth-login__form label:not(.auth-consent) {
  color: #b7b2aa;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

#login-form input:not([type="hidden"]):not([type="submit"]) {
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 16px;
  color: #f0e8d8;
  caret-color: #c7a268;
  border: 1px solid rgba(199, 162, 104, 0.42);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(18, 27, 43, 0.98), rgba(13, 21, 34, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
  /* iOS zooms a focused control below 16px. The login form is Turbo-permanent,
     so an invalid-credential response can otherwise keep focus and enlarge the
     whole viewport just as the inline feedback appears. */
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.auth-login a,
.auth-login button,
#login-form input {
  touch-action: manipulation;
}

#login-form input::placeholder {
  color: #b7b2aa;
  opacity: 0.88;
}

#login-form input:not([type="hidden"]):not([type="submit"]):focus,
#login-form input:not([type="hidden"]):not([type="submit"]):focus-visible {
  border-color: #c7a268;
  outline: 2px solid rgba(199, 162, 104, 0.48);
  outline-offset: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.auth-login[data-auth-login-state-value="invalid-credentials"] #password,
.auth-login__form #password[aria-invalid="true"] {
  border-color: #e39187;
}

.auth-login__submit,
.auth-login__submit:hover:not(:disabled) {
  width: 100%;
  height: 52px;
  min-height: 52px;
  margin-top: 20px;
  padding: 2px 7px;
  color: #25292f;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: var(--radius-sm);
  background: #f3f1ed;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transform: none;
}

.auth-login__submit:hover:not(:disabled) {
  background: #fffdf8;
}

.auth-login__submit:focus-visible {
  outline: 2px solid #c7a268;
  outline-offset: 2px;
}

.auth-login__providers {
  margin-top: 20px;
}

.auth-login__provider-heading {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 20px;
  height: 36px;
}

.auth-login__provider-heading p {
  margin: 0;
  color: #b7b2aa;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.auth-login__provider-heading span {
  height: 1px;
  background: rgba(199, 162, 104, 0.28);
}

.auth-login__provider {
  position: relative;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.auth-login__provider + .auth-login__provider {
  margin-top: 12px;
}

.auth-login__provider--kakao,
.auth-login__provider--kakao img {
  border-radius: 12px;
}

.auth-login__provider--naver,
.auth-login__provider--naver img {
  border-radius: 6px;
}

.auth-login__provider--kakao {
  background: #fee500;
}

.auth-login__provider--naver {
  background: #00b45f;
}

.auth-login__provider--kakao img,
.auth-login__provider--naver img {
  width: auto;
  height: 52px;
  max-width: 100%;
  object-fit: contain;
}

.auth-login__provider--google {
  background: transparent;
}

.auth-login__provider-surface {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  color: #1f1f1f;
  border: 1px solid #747775;
  border-radius: 4px;
  background: #fff;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.auth-login__provider-surface img {
  position: absolute;
  top: 9px;
  left: 12px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.auth-login__provider-surface > span {
  margin-left: 42px;
}

.auth-login__provider:hover {
  filter: brightness(1.025);
}

.auth-login__provider:focus-visible {
  outline: 2px solid #c7a268;
  outline-offset: 2px;
}

.auth-login__links {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.auth-login__links a {
  width: max-content;
  max-width: 100%;
  color: #f0e8d8;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-color: rgba(240, 232, 216, 0.48);
  text-underline-offset: 3px;
}

.auth-login__security {
  margin: 26px 0 0;
  color: #827f79;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.auth-login__toast {
  position: fixed;
  z-index: 79;
  left: 50%;
  bottom: calc(119px + env(safe-area-inset-bottom, 0px));
  width: min(370px, calc(100% - 60px));
  height: 52px;
  color: #f0e8d8;
  border: 1px solid rgba(199, 162, 104, 0.52);
  border-radius: 3px;
  background: rgba(12, 19, 31, 0.98);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.auth-login__toast[hidden] {
  display: none;
}

.auth-login__toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.auth-login__toast > span {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 2px;
  height: 28px;
  border-radius: 1px;
  background: #9eb3d0;
}

.auth-login__toast p {
  position: absolute;
  top: 16px;
  left: 28px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .auth-login__toast {
    transition: none;
  }
}

/* P03 · approved signup night instrument. The browser owns Pretendard; Figma's
   plugin runtime does not need to recreate or substitute any text layer. */
body.public-page--registrations-new {
  min-height: 1120px;
  color: #f0e8d8;
  background:
    radial-gradient(210px 250px at 80% 14%, rgba(48, 61, 88, 0.14), transparent 72%),
    radial-gradient(260px 240px at 10% 62%, rgba(112, 83, 48, 0.055), transparent 76%),
    linear-gradient(180deg, #03070f 0%, #040813 58%, #02050c 100%);
}

.public-page--registrations-new .site-header {
  height: 64px;
  color: #c7a268;
  border-bottom-color: transparent;
  background: transparent;
}

.public-page--registrations-new .site-header__inner {
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 0 30px 0 20px;
}

.public-page--registrations-new .wordmark__mark {
  width: 76px;
  height: 30px;
  object-fit: contain;
}

.public-page--registrations-new .site-drawer__toggle {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  justify-content: center;
  color: #c7a268;
}

.public-page--registrations-new .site-drawer__bars {
  width: 24px;
  gap: 7px;
}

.public-page--registrations-new .site-drawer__bars i,
.public-page--registrations-new .site-drawer__bars i:last-child {
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: #c7a268;
}

.public-page--registrations-new #main-content {
  min-height: 1056px;
}

.public-page--registrations-new .site-footer {
  display: none;
}

.auth-signup {
  width: 370px;
  max-width: calc(100% - 60px);
  min-height: 830px;
  display: block;
  margin: 0 auto;
  padding: 32px 0 0;
  color: #f0e8d8;
  font-family: var(--font-sans);
}

.auth-signup__intro,
.auth-signup__context-slot,
.auth-signup__form,
.auth-signup__links,
.auth-signup__security {
  width: 100%;
}

.auth-signup__eyebrow {
  margin: 0;
  color: #c7a268;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

.auth-signup__intro h1 {
  margin: 10px 0 0;
  color: #f0e8d8;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 650;
  line-height: 32px;
  letter-spacing: -0.2px;
}

.auth-signup__lede {
  margin: 14px 0 0;
  color: #b7b2aa;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.auth-signup__context-slot {
  height: 54px;
  margin-top: 18px;
}

.auth-signup__context {
  position: relative;
  width: 100%;
  height: 54px;
  color: #9eb3d0;
}

.auth-signup__context-rule {
  position: absolute;
  top: 7px;
  left: 0;
  width: 2px;
  height: 40px;
  border-radius: 0;
  background: currentColor;
}

.auth-signup__context p {
  position: absolute;
  top: 7px;
  left: 14px;
  width: calc(100% - 14px);
  margin: 0;
  color: currentColor;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.auth-signup__context--terms-error,
.auth-signup__context--email-error,
.auth-signup__context--password-error {
  color: #e39187;
}

.auth-signup__context--rate-limited {
  color: #d7ad68;
}

.auth-signup__form {
  display: block;
  gap: 0;
  margin-top: 10px;
}

.auth-signup__form .field-group {
  display: grid;
  gap: 8px;
  margin: 0;
}

.auth-signup__form .field-group + .field-group {
  margin-top: 18px;
}

.auth-signup__form .auth-signup__field--password + .auth-signup__field--confirmation {
  margin-top: 20px;
}

.auth-signup__form label:not(.auth-signup__consent) {
  color: #b7b2aa;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

#signup-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]) {
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 16px;
  color: #f0e8d8;
  caret-color: #c7a268;
  border: 1px solid #5b5140;
  border-radius: var(--radius-sm);
  background: #18202f;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

#signup-form input::placeholder {
  color: #aaa6a0;
  opacity: 1;
}

#signup-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):focus,
#signup-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):focus-visible,
#signup-form input[type="checkbox"]:focus-visible {
  border-color: #c7a268;
  outline: 2px solid rgba(199, 162, 104, 0.48);
  outline-offset: 2px;
  box-shadow: none;
}

.auth-signup__field--email input[aria-invalid="true"],
.auth-signup__field--password input[aria-invalid="true"],
.auth-signup__field--confirmation input[aria-invalid="true"] {
  border: 2px solid #e36d94;
}

.auth-signup__form small {
  margin: -2px 0 0;
  color: #827f79;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.auth-signup[data-auth-signup-state="password-error"] .auth-signup__form small {
  color: #e39187;
}

.auth-signup__consent {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 8px;
  align-items: start;
  margin-top: 38px;
  color: #b7b2aa;
  cursor: pointer;
}

.auth-signup__checkbox-hit {
  position: relative;
  width: 44px;
  height: 44px;
}

#signup-form input[type="checkbox"] {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 1px solid #7b6c55;
  border-radius: var(--radius-sm);
  background: #18202f;
  box-shadow: none;
}

#signup-form input[type="checkbox"]:checked {
  border-color: #c7a268;
  background: #c7a268;
}

#signup-form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #18202f;
  border-bottom: 2px solid #18202f;
  transform: rotate(45deg);
}

.auth-signup__consent.is-error input[type="checkbox"] {
  border: 2px solid #e36d94;
}

.auth-signup__consent-copy {
  padding-top: 2px;
  color: #b7b2aa;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.auth-signup__consent-copy a {
  color: #f0e8d8;
  text-decoration-color: rgba(240, 232, 216, 0.48);
  text-underline-offset: 3px;
}

.auth-signup__submit,
.auth-signup__submit:hover:not(:disabled) {
  width: 100%;
  height: 52px;
  min-height: 52px;
  margin-top: 20px;
  padding: 2px 7px;
  color: #25292f;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: var(--radius-sm);
  background: #f3f1ed;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
  transform: none;
}

.auth-signup__submit:hover:not(:disabled) {
  background: #fffdf8;
}

.auth-signup__submit:focus-visible {
  outline: 2px solid #c7a268;
  outline-offset: 2px;
}

.auth-signup__links {
  margin-top: 24px;
}

.auth-signup__links a {
  width: max-content;
  max-width: 100%;
  color: #f0e8d8;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-color: rgba(240, 232, 216, 0.48);
  text-underline-offset: 3px;
}

.auth-signup__security {
  margin: 22px 0 0;
  color: #827f79;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}