@font-face {
  font-family: "Briefing Preview";
  src: url("../assets/fonts/BriefingPreview.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --ink: #172020;
  --navy: #172020;
  --blue: #46666c;
  --blue-dark: #172020;
  --canvas: #f3f6f6;
  --white: #fff;
  --line: #dce2e2;
  --muted: #536063;
  --danger: #a3382c;
  --danger-bg: #fff3f0;
  --ok: #365b50;
  --ok-bg: #edf4f0;
  --warning: #655a38;
  --warning-bg: #f6f3e9;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Briefing Preview", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -.025em;
  word-break: keep-all;
  overflow-wrap: break-word;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
button, input, select, a { font: inherit; }
a { color: var(--ink); text-underline-offset: 4px; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #66878c; outline-offset: 4px; }
.checkout-header {
  min-height: 92px;
  padding: 20px max(42px, calc((100% - 1196px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; color: var(--ink); text-decoration: none; }
.brand img { display: block; width: 40px; height: 40px; border-radius: 8px; object-fit: contain; flex-shrink: 0; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { display: flex; align-items: center; font-size: 19px; font-weight: 750; line-height: 1.25; letter-spacing: -.045em; }
.brand-divider { margin: 0 7px; color: #8c999b; font-weight: 400; }
.brand-copy small { font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.5; }
.back-link { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 550; }
.back-link:hover { text-decoration: underline; }
.checkout-shell {
  width: min(1100px, calc(100% - 96px));
  margin: 0 auto;
  padding: 64px 0 88px;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.checkout-intro { padding-top: 24px; position: sticky; top: 32px; }
.eyebrow { margin: 0 0 18px; color: var(--muted); font-size: 13px; font-weight: 550; }
.checkout-intro h1 { margin: 0; font-size: 44px; line-height: 1.3; font-weight: 750; letter-spacing: -.055em; }
.checkout-intro > p:not(.eyebrow) { margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.service-preview { position: relative; margin: 32px 0 0; border-radius: 4px; overflow: hidden; }
.service-preview img { display: block; width: 100%; height: 214px; object-fit: cover; object-position: 66% center; }
.service-preview figcaption { position: absolute; right: 8px; bottom: 8px; background: rgba(23,32,32,.7); color: #fff; padding: 3px 6px; font-size: 10px; line-height: 1.5; }
.checkout-benefits { padding: 20px 0 0; margin: 0; list-style: none; }
.checkout-benefits li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.order-panel, .result-panel, .policy-panel { min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; padding: 32px; }
.order-panel h2, .result-panel h2 { margin: 30px 0 16px; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: -.035em; }
.order-panel > p:not(.privacy-boundary) { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 14px 0 0; }
.notice { padding: 13px 16px; margin: 0 0 22px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; line-height: 1.65; }
.notice.pending { color: var(--warning); background: var(--warning-bg); border-color: #e5dfc9; }
.notice.ready, .notice.success { color: var(--ok); background: var(--ok-bg); border-color: #d8e6dc; }
.notice.error { color: var(--danger); background: var(--danger-bg); border-color: #f0d5ce; }
.products { border: 0; padding: 0; margin: 0; }
.products legend { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.product-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 20px; align-items: center; padding: 22px; background: var(--canvas); border: 1px solid var(--line); border-radius: 4px; }
.selection-label { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 550; }
.product-card b { display: block; font-size: 18px; font-weight: 700; }
.product-card small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.product-card + .product-card { margin-top: 10px; }
.product-card:has(input:checked) { border-color: #66878c; }
.product-card:has(input:disabled) { cursor: not-allowed; opacity: .72; }
.product-card input { width: 18px; height: 18px; accent-color: var(--ink); }
.product-copy { display: flex; flex-direction: column; gap: 5px; }
.product-card > strong { font-size: 24px; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; }
div.purchase-facts { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px 16px; margin: 0; }
.purchase-facts > label { min-width: 0; display: grid; align-content: start; gap: 8px; }
.purchase-facts > label[for="contactEmail"] { grid-column: 1 / -1; }
.purchase-facts > label b { font-size: 14px; font-weight: 550; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-width: 0; width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #b8c7ca; border-radius: 4px; background: #fff; color: var(--ink); line-height: 1.5; }
input::placeholder { color: #849194; opacity: 1; }
input:disabled { background: var(--canvas); color: var(--muted); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
.briefing-time-field { min-width: 0; border: 0; margin: 0; padding: 0; }
.briefing-time-field legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 550; line-height: 1.75; }
.briefing-time-control { display: grid; grid-template-columns: 1.15fr 1fr 1fr; min-height: 48px; border: 1px solid #b8c7ca; border-radius: 4px; background: #fff; }
.briefing-time-control:focus-within { border-color: #46666c; }
.briefing-time-control select { appearance: none; min-width: 0; width: 100%; min-height: 46px; padding: 10px 22px 10px 11px; border: 0; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23536063' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center; color: var(--ink); font-size: 14px; line-height: 1.5; cursor: pointer; }
.briefing-time-control select + select { border-left: 1px solid var(--line); }
.briefing-time-control select:first-child { border-radius: 3px 0 0 3px; }
.briefing-time-control select:last-child { border-radius: 0 3px 3px 0; }
.briefing-time-control select:disabled { background-color: var(--canvas); color: var(--muted); cursor: not-allowed; }
.briefing-time-control select:focus-visible { outline: 2px solid #66878c; outline-offset: -2px; }
.briefing-time-field > small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.order-panel > div.purchase-facts + div.purchase-facts { margin-top: 20px; }
dl.purchase-facts { margin: 0 0 26px; border-top: 1px solid var(--line); }
.purchase-facts > div { display: grid; grid-template-columns: 142px minmax(0,1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.purchase-facts dt, .purchase-facts dd { margin: 0; font-size: 14px; line-height: 1.75; }
.purchase-facts dt { color: var(--muted); font-weight: 400; }
.purchase-facts dd { color: var(--ink); font-weight: 550; }
.policy-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.policy-links a { color: var(--muted); font-size: 12px; }
.consent { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.6; cursor: pointer; }
.consent + .consent { margin-top: 16px; }
.consent input { width: 18px; height: 18px; margin: 3px 0 0; flex-shrink: 0; }
.consent span { display: grid; gap: 4px; }
.consent b { font-weight: 550; }
.consent small { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.65; }
.pay-button, .button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 12px 23px; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 4px; font-size: 15px; font-weight: 600; line-height: 1.45; text-decoration: none; cursor: pointer; }
.pay-button { width: 100%; min-height: 54px; margin-top: 26px; }
.pay-button:hover:not(:disabled), .button-link:hover:not(:disabled) { background: #2c3e3e; border-color: #2c3e3e; }
.pay-button:disabled { background: #a1adae; border-color: #a1adae; cursor: not-allowed; }
.button-link.secondary { background: #fff; color: var(--ink); border-color: #8c999b; }
.button-link.secondary:hover { background: var(--canvas); }
.customer-service-action { min-height: 0; padding: 0; margin: 0 0 22px; color: var(--muted); background: none; border: 0; border-radius: 0; font-size: 13px; font-weight: 400; text-decoration: underline; }
.customer-service-action:hover { background: none !important; color: var(--ink); }
.privacy-boundary, .policy-warning, .status-text { font-size: 12px; line-height: 1.8; }
.privacy-boundary { margin: 16px 0 0; color: var(--muted); }
.policy-warning, .status-text { color: var(--danger); font-weight: 600; }
.status-text { min-height: 20px; }
.result-shell { width: min(720px,calc(100% - 48px)); margin: 0 auto; padding: 64px 0 88px; }
.result-panel h1, .policy-panel h1 { margin: 0 0 20px; font-size: 34px; line-height: 1.4; font-weight: 700; letter-spacing: -.045em; }
.result-panel > p { color: var(--muted); }
.result-summary { display: grid; grid-template-columns: 142px minmax(0,1fr); border-top: 1px solid var(--line); margin: 24px 0; }
.result-summary dt, .result-summary dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.75; }
.result-summary dt { color: var(--muted); }
.result-summary dd { font-weight: 550; overflow-wrap: anywhere; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.manage-actions button:disabled { opacity: .45; cursor: not-allowed; }
#recoveryForm, #emailLinkForm { margin-top: 18px; }
#emailLinkForm input { width: 100%; }
.recovery-alt { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line); }
#recoveryForm .button-link, #emailLinkForm .button-link { margin-top: 14px; }
#recoveryPanel { margin-top: 24px; }
#recoveryPanel h2 { margin-top: 0; }
#recoveryPanel strong { display: block; overflow-wrap: anywhere; }
#recoveryPanel button { margin: 12px 0; padding: 8px 14px; color: var(--ink); background: #fff; border: 1px solid #8c999b; border-radius: 4px; cursor: pointer; }
#recoveryPanel small { display: block; }
.policy-status { display: inline-block; padding: 6px 10px; margin-bottom: 20px; color: var(--danger); background: var(--danger-bg); font-size: 13px; font-weight: 600; }
.policy-block { padding: 22px 0; border-top: 1px solid var(--line); }
.policy-block h2 { font-size: 19px; margin: 0 0 10px; }
.policy-block p, .policy-block li { font-size: 15px; line-height: 1.8; color: var(--muted); }
.todo-box { padding: 18px; background: var(--warning-bg); color: var(--warning); font-weight: 600; line-height: 1.8; }
.policy-footer { margin-top: 26px; font-size: 13px; color: var(--muted); }
.order-panel.billing-unavailable > :not(#readinessNotice):not(#customerServiceAction) { display: none !important; }
.result-panel.billing-unavailable > :not(#manageNotice):not(#manageTitle):not(.availability-copy):not(.customer-service-action) { display: none !important; }
@media (max-width: 960px) {
  .checkout-shell { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 32px; }
  .checkout-intro h1 { font-size: 36px; }
  .order-panel, .result-panel, .policy-panel { padding: 26px; }
  .product-card { padding: 18px; }
  .product-card > strong { font-size: 21px; }
  .purchase-facts > div { grid-template-columns: 116px minmax(0,1fr); gap: 12px; }
}
@media (min-width: 821px) and (max-width: 960px) {
  div.purchase-facts { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 820px) {
  .checkout-header { min-height: 78px; padding: 17px 22px; gap: 16px; }
  .brand img { width: 36px; height: 36px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy small { font-size: 10px; }
  .back-link { font-size: 12px; }
  .checkout-shell { width: calc(100% - 40px); display: block; padding: 38px 0 56px; }
  .checkout-intro { position: static; padding: 0 0 30px; }
  .checkout-intro h1 { font-size: 34px; }
  .checkout-intro > p:not(.eyebrow) { margin-top: 16px; font-size: 15px; }
  .service-preview, .checkout-benefits { display: none; }
  .order-panel, .result-panel, .policy-panel { padding: 24px; }
  .product-card > strong { font-size: 22px; }
  .result-shell { width: calc(100% - 40px); padding: 38px 0 56px; }
}
@media (max-width: 480px) {
  .checkout-header { padding: 16px; }
  .brand { gap: 8px; }
  .brand-copy strong { font-size: 15px; }
  .brand-divider { margin: 0 4px; }
  .brand-copy small { font-size: 9px; }
  .back-link { max-width: 80px; text-align: right; line-height: 1.5; }
  .checkout-shell, .result-shell { width: calc(100% - 32px); }
  .order-panel, .result-panel, .policy-panel { padding: 22px 18px; }
  div.purchase-facts { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .purchase-facts > div { grid-template-columns: 102px minmax(0,1fr); gap: 12px; }
  .purchase-facts dt, .purchase-facts dd { font-size: 13px; }
  .product-card { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .product-card > strong { font-size: 26px; }
  .consent { font-size: 13px; }
  .result-panel h1, .policy-panel h1 { font-size: 29px; }
  .result-summary { grid-template-columns: 102px minmax(0,1fr); }
  .actions { display: grid; }
  .actions .button-link { width: 100%; }
}
/* Account and payment documents */
.management-shell { width: min(820px,calc(100% - 48px)); }
.management-shell .result-panel { padding: 40px; }
.payment-hero { padding: 24px 26px; margin: 26px 0; background: var(--canvas); border-radius: 6px; }
.payment-hero > span { display: block; font-size: 13px; color: var(--muted); }
.payment-hero > strong { display: block; margin: 2px 0 4px; font-size: 38px; letter-spacing: -.05em; line-height: 1.5; }
.payment-hero small, .account-overview small { margin-left: 4px; font-size: 18px; font-weight: 500; }
.primary-actions { margin-top: 20px; }
.account-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; }
.account-overview span { display: block; color: var(--muted); font-size: 12px; }
.account-overview strong { display: block; font-size: 26px; font-weight: 700; }
.account-overview > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.management-section { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.result-panel .section-heading h2 { margin: 0; }
.section-number { font-size: 11px; color: var(--muted); letter-spacing: .03em; white-space: nowrap; }
.cancel-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cancel-options article { padding: 20px; border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; align-items: start; }
.cancel-options h3 { margin: 0 0 10px; font-size: 16px; }
.cancel-options p { font-size: 13px; line-height: 1.8; margin: 0 0 20px; color: var(--muted); }
.cancel-options button { margin-top: auto; padding: 12px 14px; font-size: 13px; width: 100%; }
.button-link.danger-outline { color: var(--danger); background: #fff; border-color: #ce9188; }
.button-link.danger-outline:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger); }
.button-link:disabled { opacity: .45; cursor: not-allowed; }
.refund-result { margin-top: 28px; padding: 24px; background: var(--ok-bg); border: 1px solid #d8e6dc; border-radius: 6px; }
.refund-lead { font-size: 20px; color: var(--ok); font-weight: 650; margin: 0; }
.refund-result .result-summary { margin-bottom: 0; }
.refund-result .result-summary dt,.refund-result .result-summary dd { border-color: #d8e6dc; }
.help-details { margin-top: 30px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.help-details summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.help-details p { color: var(--muted); font-size: 13px; line-height: 1.85; }
.help-details small { display: block; color: var(--muted); font-size: 12px; margin-top: 14px; }
.private-code { display: block; overflow-wrap: anywhere; font-size: 14px; padding: 14px 0; letter-spacing: .015em; }
.document-link { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; }
.account-footer { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 32px; font-size: 12px; color: var(--muted); }
.account-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.cancel-dialog { max-width: 480px; width: calc(100% - 40px); padding: 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.cancel-dialog::backdrop { background: rgba(23,32,32,.45); }
.cancel-dialog h2 { font-size: 24px; line-height: 1.5; margin: 0 0 18px; }
.refund-estimate { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 6px 14px; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; line-height: 1.6; }
.refund-estimate dt { color: var(--muted); }
.refund-estimate dd { margin: 0; font-weight: 600; }
.refund-estimate dd:last-of-type { font-size: 16px; }
.refund-ack { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; line-height: 1.6; cursor: pointer; }
.refund-ack input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; }
.cancel-dialog [data-confirm]:disabled { opacity: .45; cursor: not-allowed; }
@media(max-width:580px) {
 .management-shell { width:calc(100% - 32px); }
 .management-shell .result-panel { padding: 24px 18px; }
 .account-overview { padding: 18px; gap: 12px; }
 .account-overview strong { font-size: 22px; }
 .account-overview > div + div { padding-left: 12px; }
 .account-overview small { font-size: 14px; }
 .cancel-options { grid-template-columns:1fr; }
 .refund-result { padding: 18px 14px; }
 .refund-lead { font-size: 18px; }
 .refund-result .result-summary { grid-template-columns: 100px minmax(0,1fr); }
 .section-heading { gap: 8px; }
 .payment-hero > strong { font-size: 34px; }
}
