/* Account surfaces share the public leaf/sky palette. Authentication, consent,
 * billing snapshots and all hidden/disabled states remain owned by existing JS. */
body.account-page {
  --account-ink: #202b28;
  --account-muted: #555e59;
  --account-line: #dce4df;
  --account-surface: #f7faf8;
  --account-leaf: #456e25;
  --account-sky: #1d6398;
  background: var(--account-surface);
  color: var(--account-ink);
  color-scheme: light;
  accent-color: var(--account-leaf);
  caret-color: var(--account-leaf);
}
.account-page ::selection { background: #d5eac3; color: var(--account-ink); }
.account-page :where(a[href], button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--account-leaf);
  outline-offset: 3px;
}
.account-page a { text-underline-offset: .2em; }
.account-page > header { border-bottom-color: var(--account-line); }
.account-page > header nav[aria-label="주요 메뉴"] { line-height: 1.5; }
.account-page .account-main {
  min-height: calc(100svh - 4.75rem);
  max-width: 34rem;
  align-items: flex-start;
  padding: 3rem 1.5rem 4rem;
  background: transparent;
}
.account-my .account-main { max-width: 44rem; }
.account-page .account-panel {
  padding: 2rem;
  border: 1px solid var(--account-line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: none;
}
.account-page .account-panel :where(h1, h2, h3) {
  color: var(--account-ink);
  letter-spacing: -.025em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.account-page .account-panel h1 { font-size: 2rem; line-height: 1.3; }
.account-page .account-panel h2 { font-size: 1.25rem; line-height: 1.5; }
.account-page .account-panel h3 { line-height: 1.5; }
.account-page :is(#page-lead, #greeting) { margin-top: .75rem; line-height: 1.75; }
.account-page .account-panel p { overflow-wrap: anywhere; }
.account-page .account-panel .text-stone-900 { color: var(--account-ink); }
.account-page .account-panel .text-stone-700 { color: #3c4841; }
.account-page .account-panel :is(.text-stone-500, .text-stone-600) { color: var(--account-muted); }
.account-page .account-panel :is(.border-stone-200, .divide-stone-200 > :not([hidden]) ~ :not([hidden])) {
  border-color: var(--account-line);
}
.account-page .account-panel p.text-xs { line-height: 1.75; }
.account-auth #local-login { margin-top: 2rem; }
.account-auth :is(#local-login-form, #local-form) :is(input:not([type="checkbox"]), select) {
  min-height: 48px;
  height: 3rem;
  border-color: #83978c;
  border-radius: .5rem;
  color: var(--account-ink);
  background-color: #fff;
  font-size: max(16px, 1rem);
  line-height: 1.5;
}
.account-auth :is(input, select)::placeholder { color: #69736d; opacity: 1; }
.account-auth :is(#local-login-form, #local-form) input:disabled {
  background: #f0f3f1;
  color: var(--account-muted);
  cursor: not-allowed;
}
.account-auth #local-login-form > * + * { margin-top: 1.25rem; }
.account-auth #local-form > div > * + * { margin-top: 1.25rem; }
.account-auth :is(#local-login-submit, #lf-submit, #consent-go, #consent-modal-agree):not(:disabled) {
  min-height: 48px;
  border-color: var(--account-leaf);
  background: var(--account-leaf);
  color: #fff;
}
.account-auth :is(#local-login-submit, #lf-submit, #consent-go, #consent-modal-agree):not(:disabled):hover {
  background: #39591f;
}
.account-auth :is(#lf-submit, #consent-go):disabled {
  min-height: 48px;
  background: #e9eeea;
  color: #626d65;
  cursor: not-allowed;
}
.account-auth :is(#local-join-link, #lf-send, #lf-psend, #lf-verify, #lf-pverify) {
  min-height: 48px;
  border-color: #83978c;
  color: var(--account-leaf);
  background: #fff;
}
.account-auth :is(#local-join-link, #lf-send, #lf-psend, #lf-verify, #lf-pverify):not(:disabled):hover {
  background: #eef5e7;
  border-color: var(--account-leaf);
}
.account-auth :is(#lf-send, #lf-psend, #lf-verify, #lf-pverify):disabled {
  color: var(--account-muted);
  background: #f0f3f1;
  cursor: not-allowed;
}
.account-auth #local-login-links > a:first-child { color: var(--account-sky); }
.account-auth #local-login-divider { margin-top: 1.75rem; }
.account-auth :is(#kakao-login, #naver-login) { min-height: 48px; }
.account-auth :is(#already-signed-in, #lf-confirm, #lf-unavailable, #consent-expired) {
  border-color: var(--account-line);
  background: var(--account-surface);
}
.account-auth #lf-phone-hint { line-height: 1.75; }
.account-auth #consent-items { margin-top: 1.5rem; line-height: 1.75; }
.account-auth #agree-heading { font-size: 1.125rem; }
.account-auth #agree-section > label { background: #eef5e7; }
/* Legal emphasis in consent details keeps its original text-base sizing. */
.account-page :is(#consent-modal, #withdraw-modal) { backdrop-filter: none; }
.account-page :is(#consent-modal, #withdraw-modal) > div {
  max-height: 90svh;
  border-radius: 1rem;
}
.account-page #consent-modal-body { min-height: 0; line-height: 1.75; }
.account-page #consent-modal > div > :not(#consent-modal-body) { flex-shrink: 0; }
.account-my #withdraw-modal > div { overflow-y: auto; }
.account-my .account-panel > section { margin-top: 2rem; }
.account-my .account-panel > section + section { padding-top: 2rem; }
.account-my :is(#info-heading, #consent-heading) + dl { margin-top: 1rem; }
.account-my .account-panel dl :is(dt, dd) { min-width: 0; overflow-wrap: anywhere; }
.account-my #sub-section { scroll-margin-top: 6rem; }
.account-my :is(#sub-none, #sub-error) { margin-top: 1rem; }
.account-my #sub-loading { margin-top: 1rem; color: var(--account-muted); }
.account-my #sub-badge { line-height: 1.5; }
.account-my #sub-note { line-height: 1.75; }
.account-my #sub-paid-summary {
  margin-top: 1.5rem;
  padding-block: 1.5rem;
  border-color: var(--account-line);
}
.account-my #sub-paid-total {
  margin-top: .5rem;
  color: var(--account-sky);
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.account-my .payment-completion-detail { display: block; }
.account-my .payment-completion-detail > dd { margin-top: .25rem; text-align: left; }
.account-my #sub-paid-period { font-size: 1.125rem; line-height: 1.65; }
.account-my #sub-rows > div { align-items: flex-start; gap: 1rem; padding-block: 1rem; }
.account-my #sub-rows > div > dt { color: var(--account-muted); }
.account-my #sub-rows > div > dd { line-height: 1.65; }
.account-my #sub-payments > li { padding-block: 1.5rem; }
.account-my .my-payment-meta { margin-top: 1rem; }
.account-my .my-payment-meta > div + div { margin-top: .75rem; }
.account-my .my-payment-amount { font-size: 1.5rem; line-height: 1.4; }
.account-my #sub-payments .payment-completion-detail > dd { line-height: 1.65; }
.account-my #logout-button { min-height: 48px; border-color: #83978c; }
.account-my #logout-button:hover { background: var(--account-surface); }
.account-my :is(#withdraw-open, #withdraw-cancel, #withdraw-confirm) { min-height: 44px; }
.account-page .account-main > div > p:last-child > a { color: var(--account-sky); }
@media (max-width: 639px) {
  .account-page .account-main { padding: 1.5rem 1rem 2.5rem; }
  .account-page .account-panel { padding: 1.5rem; }
  .account-page .account-panel h1 { font-size: 1.75rem; }
  .account-my .account-panel > section { margin-top: 1.75rem; }
  .account-my .account-panel > section + section { padding-top: 1.75rem; }
  .account-my #sub-rows > div { flex-direction: column; gap: .375rem; }
  .account-my #sub-rows > div > dd { text-align: left; }
  .account-page :is(#consent-modal, #withdraw-modal) > div { border-radius: 1rem 1rem 0 0; }
}
@media (max-width: 374px) {
  .account-page .account-main { padding-inline: .75rem; }
  .account-page .account-panel { padding: 1.25rem; }
  .account-my #info-heading + dl > div { align-items: flex-start; flex-direction: column; gap: .375rem; }
  .account-my #consent-heading + dl > div { flex-direction: column; gap: .25rem; }
}