/* Scoped checkout presentation. Existing calculations, payment providers,
 * validation, consent, modal focus and state transitions remain authoritative. */
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal),
body.payment-result,
body.checkout-landing {
  --checkout-ink: #202b28;
  --checkout-muted: #555e59;
  --checkout-line: #dce4df;
  --checkout-surface: #f7faf8;
  --checkout-leaf: #456e25;
  --checkout-sky: #1d6398;
  color: var(--checkout-ink);
  color-scheme: light;
  accent-color: var(--checkout-leaf);
  caret-color: var(--checkout-leaf);
}
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal, #compare-modal) {
  padding: 1.5rem;
  backdrop-filter: none;
  background-color: rgb(23 37 29 / .5);
}
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) > div {
  max-height: calc(100svh - 3rem);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgb(23 37 29 / .16);
}
#quote-modal > div { max-width: 44rem; }
:is(#subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) > div { max-width: 36rem; }
/* 여백은 구르는 칸에 준다. 구독·일시불 창은 상자가 아니라 안쪽 칸이 구르므로 그 칸에, 나머지는 상자에.
   둘 다에 주면 일시불 창처럼 두 겹이 된다(휴대폰 글 폭 239px 이던 까닭). */
:is(#subscription-complete-modal, #setupfee-modal) > div,
:is(#subscription-modal, #onetime-modal) > div > .overflow-y-auto { padding: 2rem; }
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) :is(h2, h3, h4) {
  color: var(--checkout-ink);
  letter-spacing: -.025em;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:is(#quote-modal-title, #subscription-modal-title, #subscription-complete-title) { font-size: 1.75rem; }
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) :is(p, label) {
  line-height: 1.75;
}
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) :is(.text-stone-500, .text-stone-600) {
  color: var(--checkout-muted);
}
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) .text-stone-900 {
  color: var(--checkout-ink);
}
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) :is(a[href], button, input, select):focus-visible,
.payment-result :is(a[href], button):focus-visible {
  outline: 2px solid var(--checkout-leaf);
  outline-offset: 3px;
}
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) :is(input:not([type="checkbox"]), select) {
  min-width: 0;
  min-height: 48px;
  border-radius: .5rem;
  font-size: max(16px, 1rem);
  line-height: 1.5;
}
:is(#quote-modal, #subscription-modal, #onetime-modal, #setupfee-modal) :is(input:not([type="checkbox"]), select):not([aria-invalid="true"]):not(.border-rose-300) {
  border-color: #83978c;
}
:is(#quote-modal, #subscription-modal, #onetime-modal, #setupfee-modal) input::placeholder { color: #69736d; opacity: 1; }
:is(#quote-modal, #subscription-modal, #onetime-modal, #setupfee-modal) :is(input, select):disabled {
  color: var(--checkout-muted);
  background: #f0f3f1;
  cursor: not-allowed;
}
:is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal, #compare-modal, #template-preview-modal) button[aria-label="닫기"] {
  min-width: 44px;
  min-height: 44px;
  padding: .625rem;
}
#quote-modal > div > .overflow-y-auto { padding: 0; }
#quote-modal > div > .overflow-y-auto > div:first-child { background: #f1f7fb; }
#quote-modal > div > .overflow-y-auto > div { padding: 1.75rem 2rem; }
#quote-modal > div > div:last-of-type { padding-block: 1rem; border-color: var(--checkout-line); }
#quote-tagline { margin-top: .75rem; }
:is(#quote-payment-help, #selected-plan-payment-help, #card-step-payment-help) {
  max-width: 60ch;
  line-height: 1.75;
}
#quote-features { gap: .75rem 1.5rem; }
#quote-features > li { line-height: 1.75; }
#quote-spec { line-height: 1.75; }
#quote-charge > div, #selected-plan-charge > div { gap: .5rem 1rem; padding-block: .5rem; }
#quote-charge dt, #selected-plan-charge dt { min-width: 0; overflow-wrap: anywhere; }
.site-refresh #quote-charge dd, .site-refresh #selected-plan-charge dd { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#quote-charge .quote-charge-total, #selected-plan-charge .checkout-charge-total {
  margin-block: 0 1rem;
  padding-block: .25rem 1.25rem;
  border-color: var(--checkout-line);
}
#quote-charge .quote-charge-total > dd,
#selected-plan-charge .checkout-charge-total > dd,
#subscription-modal #card-step-amount, #subscription-complete-modal #subscription-complete-total {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--checkout-sky);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
#quote-charge .quote-charge-total > dd { white-space: normal; }
#selected-plan-name { font-size: 1.375rem; line-height: 1.5; }
#selected-plan-price { line-height: 1.75; }
#sub-step-1 > div:first-child, #sub-step-2 > div:first-child {
  padding: 1.5rem;
  border-radius: .75rem;
  background: #eef5e7;
}
#sub-step-1 > div + div, #sub-step-2 > div + div { margin-top: 1.5rem; }
#sub-steps { flex-wrap: wrap; gap: .5rem; }
#sub-method-list [data-submethod], #onetime-method-list button {
  min-height: 48px;
  border-radius: .5rem;
}
#sub-method-list [data-submethod][aria-pressed="true"] { border-color: var(--checkout-leaf); background-color: #eef5e7; }
#card-fields { padding: 1.25rem; border-color: var(--checkout-line); background: var(--checkout-surface); }
#card-fields label { font-size: .875rem; }
:is(#quote-start, #subscribe-button, #onetime-button, #setupfee-button):not(:disabled),
#subscription-complete-modal button:not([aria-label="닫기"]) {
  min-height: 48px;
  background: var(--checkout-leaf);
  color: #fff;
  border-color: var(--checkout-leaf);
}
:is(#quote-start, #subscribe-button, #onetime-button, #setupfee-button):not(:disabled):hover,
#subscription-complete-modal button:not([aria-label="닫기"]):hover { background: #39591f; }
:is(#subscribe-button, #onetime-button, #setupfee-button):disabled {
  min-height: 48px;
  background: #e9eeea;
  color: #626d65;
  cursor: not-allowed;
}
#subscription-complete-modal .payment-completion-detail { display: block; }
#subscription-complete-modal .payment-completion-detail > dd { margin-top: .375rem; text-align: left; overflow-wrap: anywhere; }
#subscription-complete-modal dl > div + div { margin-top: 1rem; }
/* Server-rendered receipts and billing callbacks use the same single-column
 * result hierarchy. Original state visibility and Thymeleaf expressions stay intact. */
body.payment-result { background: var(--checkout-surface); }
.payment-result ::selection { background: #d5eac3; color: var(--checkout-ink); }
.payment-result main h1 { font-size: 1.75rem; line-height: 1.4; letter-spacing: -.025em; word-break: keep-all; overflow-wrap: anywhere; }
.payment-result main p { line-height: 1.75; overflow-wrap: anywhere; }
.payment-result main .text-stone-900 { color: var(--checkout-ink); }
.payment-result main :is(.text-stone-500, .text-stone-600) { color: var(--checkout-muted); }
.payment-result-inline { padding: 2rem 1.5rem; }
.payment-result-inline > main { max-width: 38rem; padding: 2rem; border-color: var(--checkout-line); border-radius: 1rem; box-shadow: none; }
.payment-result-page > main { min-height: 100svh; max-width: 40rem; padding: 3rem 1.5rem; }
.payment-result-page > main > :is(div, section) { border-color: var(--checkout-line); border-radius: 1rem; box-shadow: none; }
.payment-result-page > main > div > :is(div, dl) { padding: 1.75rem 2rem; border-color: var(--checkout-line); }
.payment-result-page > main > section { padding: 2rem; }
.payment-result main :is(dl > div, .payment-completion-detail) { display: block; }
.payment-result main dl dd { margin-top: .375rem; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.payment-result main dl > div + div { margin-top: 1rem; }
.payment-result main .payment-completion-total { color: var(--checkout-sky); font-size: 2rem; line-height: 1.3; letter-spacing: -.025em; }
.payment-result .payment-completion-period { font-size: 1.125rem; line-height: 1.65; }
.payment-result main a { text-underline-offset: .2em; }
.payment-result main a.bg-stone-900 { background: var(--checkout-leaf); color: #fff; }
.payment-result main a.bg-stone-900:hover { background: #39591f; }
.payment-result main a.border { border-color: #83978c; }
.payment-result main .grid > a { min-height: 48px; height: auto; padding: .75rem 1rem; line-height: 1.5; }
.payment-result-page .bg-orange-50 { background: #eef5e7; }
.payment-result-page .bg-orange-50 .text-stone-600 { color: #4f6549; }
.payment-result-page .bg-rose-50 .text-stone-600 { color: #7a3c48; }
/* Consultation links keep their existing two-column/sticky layout and private
 * checkout URL. Only their visual treatment joins the public design system. */
.checkout-landing { color: var(--checkout-ink); background: #fdfefd; }
.checkout-landing :is(h1, h2, h3) { line-height: 1.4; letter-spacing: -.025em; word-break: keep-all; overflow-wrap: anywhere; }
.checkout-landing main p { line-height: 1.75; }
.checkout-landing :is(.text-stone-500, .text-stone-600) { color: var(--checkout-muted); }
.checkout-landing :is(header, footer, .border-stone-200) { border-color: var(--checkout-line); }
.checkout-landing .sl-charge { border-color: var(--checkout-line); border-radius: 1rem; box-shadow: none; }
.checkout-landing .sl-charge-total > dd { color: var(--checkout-sky); font-size: 2rem; line-height: 1.3; }
.checkout-landing .sl-charge dl dd { min-width: 0; overflow-wrap: anywhere; }
.checkout-landing .sl-charge dl > div { gap: .5rem 1rem; }
.checkout-landing .sl-charge dl > div:not(.sl-charge-total) > dd { flex-shrink: 0; white-space: nowrap; }
.checkout-landing :is(.sl-charge, .sl-phone-only) a.bg-orange-700 { min-height: 48px; background: var(--checkout-leaf); }
.checkout-landing :is(.sl-charge, .sl-phone-only) a.bg-orange-700:hover { background: #39591f; }
.checkout-landing a { text-underline-offset: .2em; }
.checkout-landing a:focus-visible { outline: 2px solid var(--checkout-leaf); outline-offset: 3px; }
.checkout-landing ::selection { background: #d5eac3; color: var(--checkout-ink); }
@media (max-width: 639px) {
  :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal, #compare-modal) { padding: .75rem; }
  :is(#quote-modal, #subscription-modal, #subscription-complete-modal, #onetime-modal, #setupfee-modal) > div { max-height: calc(100svh - 1.5rem); }
  :is(#subscription-complete-modal, #setupfee-modal) > div,
  :is(#subscription-modal, #onetime-modal) > div > .overflow-y-auto { padding: 1.5rem; }
  #quote-modal > div > .overflow-y-auto > div { padding: 1.5rem; }
  #quote-modal > div > div:last-of-type { padding: 1rem 1.5rem; }
  :is(#quote-modal-title, #subscription-modal-title, #subscription-complete-title) { font-size: 1.5rem; }
  #quote-charge > div:not(.quote-charge-total), #selected-plan-charge > div:not(.checkout-charge-total) { flex-wrap: wrap; }
  .site-refresh #quote-charge dd, .site-refresh #selected-plan-charge dd { flex-shrink: 1; }
  #sub-step-1 > div:first-child, #sub-step-2 > div:first-child { padding: 1.25rem; }
  .payment-result-inline { padding: 1.5rem 1rem; }
  .payment-result-inline > main { padding: 1.5rem; }
  .payment-result-page > main { padding: 1.5rem 1rem; }
  .payment-result-page > main > div > :is(div, dl), .payment-result-page > main > section { padding: 1.5rem; }
  .payment-result main h1 { font-size: 1.5rem; }
  .checkout-landing .sl-charge dl > div { flex-wrap: wrap; }
  .checkout-landing #sl-title .whitespace-nowrap { white-space: normal; }
}
@media (max-width: 374px) {
  #quote-modal > div > .overflow-y-auto > div { padding-inline: 1.25rem; }
  #quote-modal > div > div:last-of-type { padding-inline: 1.25rem; }
  :is(#subscription-complete-modal, #setupfee-modal) > div,
  :is(#subscription-modal, #onetime-modal) > div > .overflow-y-auto { padding: 1.25rem; }
  #sub-step-1 > div:first-child, #sub-step-2 > div:first-child { padding: 1rem; }
  #card-fields { padding: 1rem; }
  .payment-result-inline > main, .payment-result-page > main > div > :is(div, dl), .payment-result-page > main > section { padding: 1.25rem; }
}