/* C 장바구니: 담기 → '− 1 +'(같은 자리·같은 폭), 헤더 Order·개수, 휴대폰 아래 막대, 오른쪽 서랍 / 휴대폰 아래 시트, 감사 페이지.
   계획 concepts/fable-c-cart/PLAN.md §5–7. 결제는 Clover Hosted Checkout(/c/checkout). */

/* 담기 컨트롤 — JS 가 없으면 숨는다(주문 링크는 Clover 온라인 주문으로 간다) */
html:not(.js) .buy { display: none }
.buy { display: inline-grid; vertical-align: middle; min-width: var(--buy-w, 0px) }
.buy > * { grid-area: 1 / 1 }
.buy .btn-add { width: 100% }
.buy.has .btn-add, .buy:not(.has) .stepper { visibility: hidden; opacity: 0; pointer-events: none }
.buy .btn-add, .buy .stepper { transition: opacity .18s ease-out, visibility 0s }
.buy.has .btn-add, .buy:not(.has) .stepper { transition: opacity .18s ease-out, visibility 0s .18s }
.stepper { display: grid; grid-template-columns: 44px minmax(2ch, 1fr) 44px; align-items: center; min-height: 48px; background: var(--white); color: var(--ink); border: 2px solid var(--red); border-radius: 999px; overflow: hidden }
.stepper button { height: 100%; min-height: 44px; border: 0; background: none; color: var(--red); font: 700 1.25rem/1 var(--body); cursor: pointer; padding: 0; touch-action: manipulation }
.stepper button:hover { background: rgb(237 28 36 / .08) }
.stepper button[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed }
.stepper .st-qty { text-align: center; font: 800 1rem/1 var(--body); font-variant-numeric: tabular-nums }
.st-inc.pop { animation: st-pop .16s ease-out }
@keyframes st-pop { 50% { transform: scale(1.15) } }
.buy-sm .btn-add { min-height: 44px; padding: 0 16px; font-size: .9rem }
.buy-sm .stepper { min-height: 44px }
.buy-lg .btn-add { min-height: 48px }
.buy-full { display: grid; width: 100% }
.buy-line .btn-add { background: transparent; border-color: currentColor; color: inherit }
.buy-line .btn-add:hover { background: rgb(255 255 255 / .12) }
/* 무대 큐 카드 가격 줄의 작은 '+' (보이는 32px, 누르는 곳 44px) */
.buy-mini { --buy-w: 0px }
.buy-mini .btn-add { width: 32px; min-height: 32px; height: 32px; padding: 0; font-size: 1.1rem; position: relative }
.buy-mini .btn-add::after, .buy-mini .stepper button::after { content: ""; position: absolute; inset: -6px }
.buy-mini .stepper { min-height: 32px; grid-template-columns: 32px minmax(2ch, auto) 32px; border-width: 1.5px }
.buy-mini .stepper button { min-height: 32px; position: relative; font-size: 1rem }
.c-prices span { align-items: center }
.c-prices span .price { margin-left: auto }
.c-prices .buy { flex: none; margin-left: auto }
.c-prices .buy + .price { margin-left: 0; min-width: 4.2em; text-align: right }

/* 카드·에이드·사이드·세트 안 자리 */
.card-buy { margin-top: var(--menu-action-gap, 24px); display: flex; justify-content: flex-end }
.ade .buy { margin-top: 8px; justify-self: center }
.more li { padding-bottom: 10px }
.more li .buy { margin-top: 6px }
.sets li .buy { grid-column: 1 / -1; justify-self: start; margin-top: 6px }
.c-clip figcaption .buy { justify-self: start }
.deliv { margin-top: 14px } .deliv a { color: inherit; text-underline-offset: 3px }

/* 헤더: Order(개수) · 휴대폰 장바구니 아이콘 */
.cart-pill, .header-order, .nav-order { position: relative }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--white); color: var(--red); font: 800 .72rem/20px var(--body); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--red) }
.cart-count.pop { animation: badge-pop .26s ease-out }
@keyframes badge-pop { 50% { transform: scale(1.25) } }
.cart-btn { display: none; position: relative; width: 44px; height: 44px; place-items: center; color: inherit; margin-left: auto; text-decoration: none }
.cart-btn svg { width: 24px; height: 24px }
.cart-btn .cart-count { top: 2px; right: 0; min-width: 18px; height: 18px; line-height: 18px }
@media (max-width: 980px) {
  .cart-btn { display: grid }
  .cart-btn + .menu-btn { margin-left: 0 }
}
.reel-btn .rb { position: relative }
.reel-btn .rb svg { width: 22px; height: 22px }
.reel-btn .cart-count { top: -4px; right: -4px }

/* 휴대폰 아래 막대 */
.cart-bar { display: none }
@media (max-width: 640px) {
  .cart-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--red); color: var(--white); font-weight: 700; font-size: .95rem; box-shadow: 0 10px 28px rgb(0 0 0 / .25); cursor: pointer; transform: translateY(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1) }
  .cart-bar[hidden] { display: flex; transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s .3s }
  .cart-bar span:first-child { font-variant-numeric: tabular-nums }
  .cart-bar:focus-visible { outline-color: var(--white); outline-offset: 3px }
  body.has-bar { padding-bottom: 76px }
}

/* 서랍(641 이상) / 아래 시트(640 이하) */
/* showModal() places checkout above every document stacking context. The high
   z-index is only a fallback for browsers without native modal dialogs. */
.cart { display: block; position: fixed; inset: 0; z-index: 2147483647; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden }
.cart::backdrop { background: transparent }
.cart[hidden] { display: block; visibility: hidden; pointer-events: none }
.cart-backdrop { position: absolute; inset: 0; background: rgb(10 20 51 / .35); opacity: 0; transition: opacity .25s }
.cart.open .cart-backdrop { opacity: 1 }
.cart-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, calc(100vw - 32px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--white); color: var(--ink); box-shadow: -12px 0 40px rgb(10 20 51 / .18); transform: translateX(100%); transition: transform .22s ease-in; outline: none }
.cart.open .cart-panel { transform: none; transition: transform .32s cubic-bezier(.2, .7, .2, 1) }
.cart-handle { display: none }
.cart-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--rule) }
.cart-head h2 { font-size: 1.6rem; color: var(--ink) }
.cart-head .chip { grid-column: 1; justify-self: start; min-height: 28px; font-size: .78rem; color: var(--ink-2) }
.cart-x { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); font-size: 1.6rem; line-height: 1; cursor: pointer }
.cart-body { overflow: auto; overscroll-behavior: contain; padding: 4px 20px 16px; min-height: 0 }
.cart-status { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); display: grid; gap: 6px; font-size: .9rem }
.cart-status[hidden] { display: none }
.cart-status b { font-size: .95rem }
.cart-status .btns { gap: 8px; margin-top: 4px }
.cart-status.warn { border-color: #f3c8a8; background: #fff6ee }
.cart-empty { padding: 18px 0; display: grid; gap: 8px; color: var(--ink-2) }
.cart-empty[hidden] { display: none }
.cart-empty-h { font: 800 1.1rem/1.3 var(--body); color: var(--ink) }
.cart-quick li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule) }
.cart-quick li:last-child { border-bottom: 0 }
.cart-quick li > span { display: grid; color: var(--ink) }
.cart-quick .price { color: var(--red); font-size: .9rem }
.cart-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: start }
.cart-lines li:last-child { border-bottom: 0 }
.cl-thumb { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--paper) }
.cl-thumb img { width: 100%; height: 100%; object-fit: cover }
.cl-thumb.set { display: grid; place-items: center; font: 800 .75rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--royal); background: #e8eefc }
.cl-name { display: grid; gap: 1px; line-height: 1.3 }
.cl-name b { font-size: .98rem }
.cl-name .ko { font-size: .8rem }
.cl-name .note { font-variant-numeric: tabular-nums }
.cl-total { font-size: .98rem }
.cl-ctl { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px }
.cl-ctl .stepper { min-height: 40px; width: 132px }
.cl-ctl .stepper button { min-height: 40px }
.cl-remove { min-height: 44px; border: 0; background: none; color: var(--ink-3); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 4px }
.cl-was { color: var(--ink-3); text-decoration: line-through; margin-left: 6px }
.cart-addons { padding-top: 16px; display: grid; gap: 8px }
.cart-addons[hidden] { display: none }
.cart-addons .eyebrow { color: var(--ink-3) }
.addon-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px }
.addon-row::-webkit-scrollbar { display: none }
.addon { --addon-gap: 8px; --addon-inset: 6px; --addon-end-inset: 12px; --addon-radius: 999px; flex: 0 0 auto; gap: var(--addon-gap); min-height: 56px; padding: var(--addon-inset) var(--addon-end-inset) var(--addon-inset) var(--addon-inset); border-radius: var(--addon-radius); background: var(--white); color: var(--ink); border-color: var(--rule); cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600 }
.addon-thumb { flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: var(--white) }
.addon-copy { display: grid; gap: 2px; text-align: left; line-height: 1.25 }
.addon .price { color: var(--red) }
.addon[hidden] { display: none }
.cart-foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); display: grid; gap: 6px; background: var(--white) }
.cart-foot[hidden] { display: none }
.cart-sum { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700 }
.cart-sum .price { font-size: 1.2rem }
.cart-pickup { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: .82rem; color: var(--ink-2); margin-top: 4px }
.chip-mini { min-height: 26px; padding: 0 10px; font-size: .74rem; border-color: var(--rule); color: var(--ink) }
.cart-go { width: 100%; min-height: 52px; margin-top: 6px; white-space: normal; text-align: center }
.cart-go[hidden] { display: none }
.cart-go[aria-disabled="true"] { opacity: .75; pointer-events: none }
.cart-go .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .45); border-top-color: var(--white); animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.cart-by { text-align: center }
.cart-deliv a { color: inherit; text-underline-offset: 3px }
.cart.busy .cart-lines .stepper, .cart.busy .cl-remove, .cart.busy .addon { opacity: .6; pointer-events: none }

@media (max-width: 640px) {
  .cart-panel { top: auto; left: 0; width: 100%; max-height: 88svh; grid-template-rows: auto auto minmax(0, 1fr) auto; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgb(10 20 51 / .18); transform: translateY(100%) }
  .cart.open .cart-panel { transition-duration: .36s }
  .cart-panel.dragging { transition: none !important }
  .cart-handle { display: grid; place-items: center; height: 18px; touch-action: none }
  .cart-handle i { width: 36px; height: 4px; border-radius: 4px; background: rgb(0 0 0 / .18) }
  .cart-head { padding: 4px 16px 12px; touch-action: none }
  .cart-body { padding-inline: 16px }
  .cart-foot { padding-inline: 16px }
  .cart-lines li { grid-template-columns: 48px minmax(0, 1fr) auto }
  .cl-thumb { width: 48px; height: 48px }
}
html.cart-lock, html.cart-lock body { overflow: hidden }
.still .cart-panel, .still .cart-backdrop, .still .cart-bar, .still .buy .btn-add, .still .buy .stepper { transition: none !important }
.still .cart-count.pop, .still .st-inc.pop { animation: none }

/* 감사 페이지 */
.thanks { background: var(--paper) }
.thanks-hdr, .pc .thanks-hdr { position: static; margin-bottom: 0; color: var(--ink) }
.thanks-main { padding: clamp(32px, 6vw, 80px) var(--gut) clamp(48px, 8vw, 100px) }
.thanks-wrap { display: grid; gap: 16px; max-width: 46rem }
.thanks h1 { font-size: clamp(2.6rem, 8vw, 4.6rem) }
.thanks .eyebrow { color: var(--royal) }
.thanks .lede { font-size: 1.1rem; color: var(--ink-2) }
.thanks-card { margin: 8px 0; padding: 22px; background: var(--white); border: 1px solid var(--rule); border-radius: 18px; display: grid; gap: 14px }
.thanks-card dt { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.thanks-card dd { margin: 2px 0 0 }
.thanks-card [hidden] { display: none }
.thanks-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 }
@media (max-width: 640px) { .thanks-main { padding-inline: 16px } .thanks-card { padding: 18px 16px } }
.cart-status:focus { outline: none } .cart-status:focus-visible { outline: 3px solid var(--royal-hi); outline-offset: 2px }

/* C: 사이드 타일의 담기 버튼을 맨 아래로 맞춘다(이름이 두 줄인 타일). */
.pc .more li { grid-template-rows: auto auto auto 1fr }
.pc .more li .buy { align-self: end }
@media (max-width: 340px) { .pc .more { grid-template-columns: 1fr } }
/* C 휴대폰: 에이드 세 장을 가로형 목록으로(3열에서는 이름·버튼이 잘린다) */
@media (max-width: 640px) {
  .pc .c-ade-row { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .pc .c-ade-row .ade { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; padding: 10px 12px; text-align: left; align-items: center }
  .pc .c-ade-row .ade-img { grid-column: 1; grid-row: 1 / span 4; width: 72px; margin: 0; align-self: start }
  .pc .c-ade-row .ade h3, .pc .c-ade-row .ade .ko, .pc .c-ade-row .ade .price { grid-column: 2 }
  .pc .c-ade-row .ade .desc { grid-column: 2 / span 2; margin-top: 4px }
  .pc .c-ade-row .ade .buy { grid-column: 3; grid-row: 1 / span 3; margin: 0; justify-self: end; align-self: center }
}
.pc .sets li { align-content: start }

/* Pickup fields reuse the cart's existing tokens and scroll container. */
.cart-details { display: grid; gap: 12px; padding: 18px 0 8px; margin-top: 10px; border-top: 1px solid var(--rule) }
.cart-details[hidden], .cart-sandbox[hidden] { display: none }
.cart-details h3 { font: 800 1rem/1.3 var(--body); margin: 0 }
.cart-details label { display: grid; gap: 5px; font: 600 .9rem/1.4 var(--body) }
.cart-details input, .cart-details textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--white); color: var(--ink); font: 400 16px/1.4 var(--body); resize: vertical }
.cart-details input:focus-visible, .cart-details textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px }
.cart-sandbox { padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper) }

/* Combo selection: the existing cart panel, with one active view. */
.cart-panel[data-combo] > :not(.combo-view) { display:none !important }
.cart-panel[data-combo] { grid-template-rows:minmax(0,1fr) }
.combo-view { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; height:100%; grid-column:1/-1; grid-row:1/-1; background:var(--white); color:var(--ink); font-family:var(--body); word-break:keep-all; overflow-wrap:break-word }
.combo-view[hidden] { display:none }
.combo-head { display:flex; gap:8px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--rule) }
.combo-head h2 { flex:1; min-width:0; margin:0; font:800 1.1rem/1.3 var(--body); color:var(--ink) }
.combo-head button { flex:none; width:44px; height:44px; border:0; background:var(--paper); color:var(--ink); border-radius:50%; font:700 24px/1 var(--body); cursor:pointer }
.combo-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 16px 20px }
.combo-base { margin:14px 0; font-size:.9rem; color:var(--ink-3) }
.combo-group { min-width:0; margin:20px 0 0; padding:0 0 0 10px; border:0; border-left:3px solid transparent }
.combo-group legend { width:100%; padding:0; font:700 1rem/1.4 var(--body) }
.combo-group legend small { margin-left:8px; font:600 .78rem/1.4 var(--body); color:var(--ink-3) }
.combo-group.invalid { border-left-color:var(--red) }
.combo-error { margin:6px 0; color:var(--red); font-size:.88rem }
.combo-option { display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 0; border-bottom:1px solid var(--rule); cursor:pointer; font:400 .94rem/1.4 var(--body) }
.combo-option input { width:20px; height:20px; flex:none; margin:0; accent-color:var(--red); scroll-margin:80px 0 }
.combo-option span { flex:1; min-width:0 }
.combo-option b { flex:none; white-space:nowrap; font:500 .85rem/1.4 var(--body); color:var(--ink-3); font-variant-numeric:tabular-nums }
.combo-option:has(input:checked) span { font-weight:700 }
.combo-option:hover { background:var(--paper) }
.combo-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--rule) }
.combo-foot > span { display:grid; gap:2px; font-size:.85rem }
.combo-foot b { font-size:1.15rem; font-variant-numeric:tabular-nums }
.combo-foot .btn { min-width:120px; min-height:48px }
.combo-opener { width:100%; min-height:48px; display:flex; justify-content:space-between; align-items:center; padding:0 14px; margin:14px 0; border:1px solid var(--rule); border-radius:10px; background:var(--paper); color:var(--ink); font:700 .95rem/1.4 var(--body); cursor:pointer }
.combo-menu-entry { margin:20px 0 0 }
.combo-list button { width:100%; min-height:100px; display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 0; border:0; border-bottom:1px solid var(--rule); background:transparent; color:var(--ink); text-align:left; font:700 1rem/1.4 var(--body); cursor:pointer }
.combo-thumb { width:72px; height:72px; display:block; object-fit:cover; border-radius:10px; background:var(--paper) }
.combo-name { min-width:0 }
.combo-list button:not(:has(.combo-thumb)) { grid-template-columns:minmax(0,1fr) auto }
.combo-list b { white-space:nowrap; font-size:.9rem; font-variant-numeric:tabular-nums }
.combo-list button:hover { color:var(--red) }
.combo-view :focus-visible,.combo-opener:focus-visible { outline:3px solid var(--royal); outline-offset:3px }
.cl-options { font-size:.8rem; line-height:1.45; color:var(--ink-3); margin:5px 0; word-break:keep-all; overflow-wrap:break-word }
.cart.busy .combo-opener { pointer-events:none; opacity:.6 }
@media(max-width:640px){.cart-panel[data-combo]{top:0;max-height:100dvh;height:100dvh;border-radius:0}.combo-head,.combo-body,.combo-foot{padding-left:16px;padding-right:16px}}
@media(max-width:360px){.combo-list button{grid-template-columns:64px minmax(0,1fr);column-gap:12px;row-gap:4px}.combo-thumb{width:64px;height:64px;grid-row:1/3}.combo-list b{grid-column:2}.combo-list button:not(:has(.combo-thumb)){grid-template-columns:minmax(0,1fr)}.combo-list button:not(:has(.combo-thumb)) b{grid-column:1}}