/* Same 16 px-rounded container as the home page (app.js fitContainer), so the header does not shift between pages. */
:root{--container-width:round(down,calc(100% - 64px),16px)}
a{color:inherit}
.order-page{word-break:keep-all;display:flex;flex-direction:column;gap:32px;padding:16px 0 48px}
.order-view:not([hidden]){display:flex;flex-direction:column;gap:32px}
.order-heading{display:flex;flex-direction:column;gap:16px}
.order-heading h1{font-size:32px;line-height:40px;letter-spacing:-.03em}
.order-heading h1:focus{outline:none}
.order-lead{font-size:16px;line-height:28px;color:var(--muted);max-width:40em}
.order-lead:empty{display:none}
.order-heading .requote{align-self:flex-start}
.delivery-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.zip-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.zip-row .secondary-button{white-space:nowrap}
.address-search-panel{display:flex;flex-direction:column;gap:8px}.address-search-panel[hidden]{display:none}
.address-search-panel>.secondary-button{align-self:flex-start}
.address-search-frame{height:448px;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
#delivery-card>.secondary-button{align-self:flex-start}
#delivery-form .primary-button{align-self:stretch;justify-content:center}
@media(max-width:640px){.delivery-pair{grid-template-columns:1fr}}
.order-card{display:flex;flex-direction:column;gap:24px;padding:32px;background:var(--surface);border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line)}
.order-card h2{font-size:24px;line-height:28px}
.lookup-card{max-width:560px}
.order-fields{display:flex;flex-direction:column;gap:24px}
.order-fields .primary-button{align-self:flex-start}

.order-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;counter-reset:step}
.order-steps li{counter-increment:step;display:flex;flex-direction:column;gap:8px;padding-top:16px;font-size:16px;line-height:24px;color:var(--muted);box-shadow:inset 0 4px var(--line)}
.order-steps li::before{content:"0" counter(step);font-size:12px;line-height:16px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:0}
.order-steps li[data-state=done]{color:var(--ink);box-shadow:inset 0 4px var(--accent)}
.order-steps li[data-state=current]{color:var(--accent);font-weight:700;box-shadow:inset 0 4px var(--accent)}

.order-grid{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:32px;align-items:start}
.order-main{display:flex;flex-direction:column;gap:32px;min-width:0}
.order-grid.single{grid-template-columns:minmax(0,640px)}
.order-grid.single>.order-main{display:none}

.order-price{display:flex;align-items:baseline;gap:8px;font-size:32px;line-height:40px;font-weight:750;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.order-facts{display:flex;flex-direction:column;gap:16px;margin:0}
.order-facts>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px}
.order-facts dt{font-size:12px;line-height:28px;letter-spacing:-.02em;color:var(--muted)}
.order-facts dd{margin:0;font-size:16px;line-height:28px;overflow-wrap:anywhere;white-space:pre-wrap}
.tabular{font-variant-numeric:tabular-nums;letter-spacing:0}
.order-note{padding:16px;background:var(--soft);border-radius:8px;font-size:16px;line-height:28px;white-space:pre-wrap}

.pay-area{display:flex;flex-direction:column;gap:16px;padding-top:24px;box-shadow:0 -1px var(--line)}

.toss-widget:empty{display:none}
.pay-area .primary-button{justify-content:center;width:100%}
.primary-button:disabled{opacity:.45;cursor:default;filter:none}
.consent-check{display:flex;align-items:flex-start;gap:8px;min-height:44px;font-size:16px;line-height:28px;cursor:pointer}
.consent-check input{flex:none;width:24px;height:24px;margin:4px 0 0;accent-color:var(--accent)}
.consent-check a{text-decoration:underline;text-underline-offset:4px}

.save-link{display:flex;flex-direction:column;gap:16px;padding-top:24px;box-shadow:0 -1px var(--line)}
.save-link>p:first-child{font-size:16px;line-height:28px;color:var(--muted)}
.save-link .secondary-button{align-self:flex-start;display:inline-flex;align-items:center;gap:8px}
.order-card>.secondary-button{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.small:empty{display:none}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px}.footer-links a{min-height:32px}

@media(max-width:960px){.order-grid{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:640px){
  :root{--container-width:round(down,calc(100% - 32px),16px)}
  .order-page{gap:24px;padding:8px 0 32px}
  .order-heading{gap:8px}
  .order-heading h1{font-size:24px;line-height:32px}
  .order-card{padding:24px 16px;gap:16px}
  .order-steps{gap:4px}
  .order-steps li{font-size:12px;line-height:16px}
  .order-price{font-size:24px;line-height:32px}
  .order-facts>div{grid-template-columns:1fr;gap:4px}.order-facts dt{line-height:20px}
}
/* The order number line holds Korean ("주문번호"), so no letter spacing and the site font rather than the Latin eyebrow. */
#order-id{font-family:inherit;letter-spacing:0;font-variant-numeric:tabular-nums}