/* 주문 흐름 공용 스타일 — 🔴 tokens.css 변수만 쓴다. 색·크기를 직접 박지 않는다. */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-sans);background:var(--c-bg);color:var(--c-text);
     font-size:var(--t-body);line-height:var(--t-body-lh);-webkit-font-smoothing:antialiased;
     padding-bottom:96px}
@media (min-width:768px){ body{padding-bottom:var(--s7)} }
.wrap{max-width:760px;margin:0 auto;padding:0 var(--s4)}
.skip{position:absolute;left:-9999px;background:var(--c-btn-bg);color:var(--c-btn-fg);padding:var(--s3)}
.skip:focus{left:0}

.gnb{position:sticky;top:0;z-index:10;background:var(--c-bg);border-bottom:1px solid var(--c-border)}
.gnb .in{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
         max-width:760px;margin:0 auto}
.brand{font-weight:800;font-size:var(--t-prod);letter-spacing:-.02em;text-decoration:none;color:inherit}
.gnb .sp{flex:1}
.back{min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;
      justify-content:center;border:1px solid var(--c-border-fn);background:var(--c-surface);
      color:var(--c-text);border-radius:var(--r-md);text-decoration:none}

h1{font-size:var(--t-prod);line-height:var(--t-prod-lh);margin:var(--s5) 0 var(--s4)}
h2{font-size:var(--t-body);margin:var(--s5) 0 var(--s2)}
.sub{color:var(--c-text-sub);font-size:var(--t-cap);line-height:var(--t-cap-lh)}

/* 진행 단계 */
.steps{display:flex;gap:0;margin:var(--s4) 0;font-size:var(--t-cap);color:var(--c-text-sub)}
.steps span{flex:1;text-align:center;border-top:3px solid var(--c-border);padding-top:var(--s2)}
.steps span[aria-current]{border-top-color:var(--c-text);color:var(--c-text);font-weight:700}
.steps span.done{border-top-color:var(--c-text-sub)}

.card{background:var(--c-surface);border:1px solid var(--c-border);padding:var(--s4);
      margin-bottom:var(--s3)}
.row{display:flex;gap:var(--s3)}
.row.sb{justify-content:space-between;align-items:center}
.thumb{width:64px;height:84px;flex:none;background:var(--c-surface-alt);
       border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;
       font-size:11px;color:var(--c-text-sub)}
.grow{flex:1;min-width:0}
.name{font-weight:600}
.money{font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:0 var(--s5);border-radius:var(--r-md);font:inherit;font-weight:600;cursor:pointer;
  border:1px solid var(--c-btn-bg);background:var(--c-btn-bg);color:var(--c-btn-fg);
  text-decoration:none;transition:opacity var(--m-base) var(--m-ease)}
.btn:hover{opacity:.88}
.btn:focus-visible,.back:focus-visible,.input:focus-visible,.chip:focus-visible{
  outline:3px solid var(--c-focus);outline-offset:2px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn--sec{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border-fn)}
.btn--full{display:flex;width:100%}
.btn--compact{padding:0 var(--s3);font-size:var(--t-cap)}
.chip{min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--c-border-fn);
  background:var(--c-surface);color:var(--c-text);border-radius:var(--r-md);
  font:inherit;font-size:var(--t-cap);cursor:pointer;display:inline-flex;align-items:center}
.chip[aria-pressed="true"]{background:var(--c-btn-bg);color:var(--c-btn-fg);border-color:var(--c-btn-bg)}

.field{display:block;margin-bottom:var(--s4)}
.field > span{display:block;font-size:var(--t-cap);color:var(--c-text-sub);margin-bottom:var(--s1)}
.input{width:100%;min-height:var(--tap);padding:0 var(--s3);font:inherit;
  background:var(--c-surface);color:var(--c-text);
  border:1px solid var(--c-border-input);border-radius:var(--r-md)}
.input[aria-invalid="true"]{border-color:var(--c-text-error);border-width:2px}
.err{color:var(--c-text-error);font-size:var(--t-cap);margin-top:var(--s1);display:block}

.badge{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-cap);
  font-weight:600;padding:var(--s1) var(--s2);border:1px solid currentColor;border-radius:var(--r-sm)}
.badge--ok{color:var(--c-text-success)}   .badge--ok::before{content:'●'}
.badge--warn{color:var(--c-text-warning)} .badge--warn::before{content:'▲'}
.badge--bad{color:var(--c-text-error);border-width:2px} .badge--bad::before{content:'■'}

.summary dl{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);font-size:var(--t-cap)}
.summary dt{color:var(--c-text-sub)}
.summary dd{text-align:right;font-variant-numeric:tabular-nums}
.summary .total{border-top:1px solid var(--c-border);padding-top:var(--s3);margin-top:var(--s3);
  display:flex;justify-content:space-between;font-size:var(--t-lg);font-weight:700}

.bar{height:6px;background:var(--c-surface-alt);border-radius:var(--r-pill);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--c-btn-bg);transition:width var(--m-slow) var(--m-ease)}

.empty{text-align:center;padding:var(--s8) var(--s4);color:var(--c-text-sub)}
.notice{border-left:3px solid var(--c-border-fn);background:var(--c-surface);
  padding:var(--s3) var(--s4);font-size:var(--t-cap);margin:var(--s3) 0}
.notice--warn{border-left-color:var(--c-text-warning)}
.notice--err{border:2px solid var(--c-text-error);border-left-width:2px}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--c-surface);
  border-top:1px solid var(--c-border);padding:var(--s3) var(--s4)}
.sticky .in{max-width:760px;margin:0 auto;display:flex;gap:var(--s3);align-items:center}
.sticky .in .btn{flex:1}

/* 🔴 AB5: 주문할 수 없는 줄 — 색만으로 알리지 않는다(WCAG 1.4.1). 배지와 문구를 함께 둔다 */
.card--blocked{ border-color:var(--c-text-error); }
.card--blocked .name{ text-decoration:line-through; }

/* 🔴 LEGAL-4: 별도 동의 체크박스. 44px 터치 타깃을 지키면서 문장 전체가 눌리게 한다. */
.agree{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;cursor:pointer;
  min-height:var(--tap)}
.agree + .agree{border-top:1px solid var(--c-border)}
.agree input{width:24px;height:24px;flex:none;margin-top:2px}
.agree span{font-size:var(--t-cap);line-height:1.6}
.agree input:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}