:root{
  --paper:#f5f1ec;
  --ink:#171115;
  --muted:#74696d;
  --line:rgba(23,17,21,.14);
  --pink:#b88495;
  --serif:"DM Serif Display",Georgia,serif;
  --sans:"Noto Sans KR",Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.checkout-header{
  min-height:76px;padding:0 5vw;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;border-bottom:1px solid var(--line);background:rgba(245,241,236,.94);
  position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)
}
.checkout-brand{font-size:12px;font-weight:700;letter-spacing:.16em}
.back-link{font-size:10px;letter-spacing:.09em;opacity:.62}
.lang-toggle{
  justify-self:end;width:42px;height:34px;border:1px solid var(--line);border-radius:999px;
  background:transparent;font-size:10px;cursor:pointer
}
.checkout-shell{min-height:calc(100vh - 76px)}
.checkout-intro{
  padding:72px 7vw 58px;background:
  radial-gradient(circle at 82% 20%,rgba(184,132,149,.16),transparent 30%),#181416;color:#fff
}
.eyebrow{margin:0 0 15px;font-size:9px;letter-spacing:.2em;opacity:.54}
.checkout-intro h1{
  font-family:var(--serif);font-size:clamp(58px,8vw,116px);font-weight:400;
  line-height:.85;letter-spacing:-.045em;margin:0 0 28px
}
.checkout-intro h1 em{color:#e2b4c3;font-weight:400}
.checkout-intro>p:last-child{max-width:620px;margin:0;color:rgba(255,255,255,.62);font-size:13px;line-height:1.8}
.checkout-layout{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);
  gap:6vw;padding:68px 7vw 90px;align-items:start
}
.checkout-form{min-width:0}
.form-section{
  display:grid;grid-template-columns:54px minmax(0,1fr);gap:18px;
  padding:0 0 34px;margin:0 0 34px;border-bottom:1px solid var(--line)
}
.section-number{font-family:var(--serif);font-size:22px;color:var(--pink)}
.section-content h2{font-family:var(--serif);font-weight:400;font-size:34px;margin:0 0 22px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-grid label>span{display:block;font-size:11px;margin-bottom:8px}
.field-grid input{
  width:100%;height:49px;border:1px solid rgba(23,17,21,.19);
  background:rgba(255,255,255,.54);padding:0 14px;outline:none
}
.field-grid input:focus{border-color:rgba(184,132,149,.85);box-shadow:0 0 0 2px rgba(184,132,149,.08)}
.field-note{font-size:10px;opacity:.47;margin:9px 0 0}
.payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payment-method{
  text-align:left;padding:17px;border:1px solid var(--line);background:rgba(255,255,255,.34);cursor:pointer
}
.payment-method.active{border-color:#8f6676;background:rgba(184,132,149,.08)}
.payment-method:disabled{opacity:.38;cursor:not-allowed}
.payment-method strong{display:block;font-size:12px;margin-bottom:5px}
.payment-method span{font-size:10px;opacity:.53}
.check-row{display:flex;align-items:flex-start;gap:10px;font-size:11px;line-height:1.65;margin:16px 0 3px}
.check-row input{width:15px;height:15px;flex:0 0 auto;margin:2px 0 0;accent-color:#8f6676}
.policy-link{display:inline-block;font-size:9.5px;opacity:.52;text-decoration:underline;text-underline-offset:3px;margin-left:25px}
.pay-button{
  width:100%;min-height:58px;border:0;background:#171115;color:white;padding:0 19px;
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;letter-spacing:.04em
}
.pay-button span{font-size:12px}
.pay-button strong{font-family:var(--serif);font-weight:400;font-size:24px}
.test-note{text-align:center;font-size:9.5px;opacity:.46;line-height:1.6;margin:11px 0 0}
.order-card{
  position:sticky;top:105px;border:1px solid var(--line);background:rgba(255,255,255,.42);padding:26px
}
.order-items{border-top:1px solid var(--line)}
.order-item{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:20px}
.order-item span{font-size:12px;line-height:1.55}
.order-item strong{font-family:var(--serif);font-size:18px;font-weight:400;white-space:nowrap}
.order-total{display:flex;justify-content:space-between;align-items:end;padding:22px 0}
.order-total span{font-size:10px;opacity:.55}
.order-total strong{font-family:var(--serif);font-size:32px;font-weight:400}
.delivery-note{border-top:1px solid var(--line);padding-top:18px}
.delivery-note strong{display:block;font-size:9px;letter-spacing:.12em}
.delivery-note span{display:block;font-size:10px;line-height:1.65;opacity:.52;margin-top:7px}
.empty-order{font-size:12px;line-height:1.7;opacity:.62;padding:18px 0}
.test-modal{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.52);display:grid;place-items:center;
  padding:20px;opacity:0;pointer-events:none;transition:.2s
}
.test-modal.show{opacity:1;pointer-events:auto}
.test-modal-card{position:relative;width:min(520px,94vw);background:var(--paper);padding:34px}
.test-modal-card h2{font-family:var(--serif);font-size:38px;font-weight:400;margin:10px 0 14px}
.test-modal-card>p:not(.eyebrow){font-size:12px;line-height:1.8;color:var(--muted)}
.modal-x{position:absolute;right:17px;top:10px;border:0;background:none;font-size:28px;cursor:pointer}
.modal-ok{width:100%;border:0;background:#171115;color:white;padding:13px;margin-top:10px;cursor:pointer}
.checkout-footer{
  padding:21px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:20px;font-size:9px;letter-spacing:.11em;opacity:.56
}
.checkout-footer div{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:850px){
  .checkout-header{grid-template-columns:1fr auto}.back-link{display:none}
  .checkout-layout{grid-template-columns:1fr;padding-top:42px}
  .order-card{position:static;grid-row:1}
}
@media(max-width:560px){
  .checkout-intro{padding:58px 20px 45px}
  .checkout-layout{padding:35px 20px 65px}
  .form-section{grid-template-columns:38px 1fr;gap:10px}
  .field-grid,.payment-methods{grid-template-columns:1fr}
  .checkout-footer{flex-direction:column}
}