:root{
  --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
  --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
  --line:#e3e1db; --line-2:#dcdad3; --line-3:#efeee9; --hover:#efeee9; --soft:#f3f2ee; --track:#ebe9e3;
  --accent:#1c7ed6; /* 장바구니 블루 */
  --accent-ink:#1864ab;
  --accent-soft:#e7f1fc;
  --best:#fcc419; --best-ink:#3d2e00; --best-soft:#fff6d1;
  --more:#c2410c;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--hover)}
.btn:disabled{opacity:.45;cursor:default}
.btn--solid{background:var(--ink);color:#fff;border:none;font-weight:500}
.btn--small{height:30px;padding:0 12px;font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.up{width:100%;max-width:1180px;margin:0 auto;padding:28px 28px 64px;display:flex;flex-direction:column;gap:18px}

/* 요약 */
.summary{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;padding:24px 26px;border-radius:22px;background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden}
.sum-main{position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center;min-width:0}
.sum-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);font-weight:500}
.sum-title{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.is-ready .sum-title b{background:linear-gradient(transparent 58%,var(--best) 58%);padding:0 2px}
.sum-sub{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.sum-copy{margin-top:4px}
.sum-side{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.base{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.base-label{font-size:12px;color:var(--muted)}
.base-chips{display:flex;gap:4px;background:var(--soft);padding:3px;border-radius:999px;flex-wrap:wrap}
.chip{height:30px;padding:0 12px;border:0;border-radius:999px;background:transparent;font-size:13px;cursor:pointer;color:var(--sub);font-family:var(--mono)}
.chip.is-on{background:var(--accent);color:#fff;font-weight:500}
.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px}
.bar-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.bar-name b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--soft);font-family:var(--mono);font-size:11px;margin-right:4px;color:var(--ink)}
.bar-track{height:14px;border-radius:999px;background:var(--track);overflow:hidden}
.bar-track i{display:block;height:100%;background:#a5b8cc;border-radius:999px;transition:width .4s ease}
.bar.is-best .bar-track i{background:var(--accent)}
.bar.is-best .bar-name b{background:var(--best);color:var(--best-ink)}
.bar-val{font-family:var(--mono);font-size:13px;font-weight:500;white-space:nowrap}
.bar.is-best .bar-val{color:var(--accent-ink)}

/* 카드 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 16px 0;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.card:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.card.is-best{border-color:var(--best);box-shadow:0 0 0 3px var(--best-soft)}
.card.is-best::after{content:"최저가";position:absolute;top:12px;right:-30px;transform:rotate(35deg);background:var(--best);color:var(--best-ink);font-size:11px;font-weight:700;padding:3px 34px;letter-spacing:.04em;pointer-events:none}
.c-head{display:flex;align-items:center;gap:6px;min-width:0}
.letter{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--mono);font-size:13px;font-weight:500}
.is-best .letter{background:var(--best);color:var(--best-ink)}
.c-name{flex:1;min-width:0;height:34px;border:0;border-bottom:1px solid transparent;background:transparent;font-size:15px;font-weight:700;padding:0 4px}
.c-name:hover{border-bottom-color:var(--line)}
.c-name:focus{outline:none;border-bottom-color:var(--accent)}
.c-name::placeholder{font-weight:400;color:var(--muted)}
.ic{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font-size:15px}
.ic:hover:not(:disabled){background:var(--hover);color:var(--ink)}
.ic:disabled{opacity:.3;cursor:default}
.ic--del:hover:not(:disabled){color:#c92a2a}
.is-best .c-head{padding-right:34px}

.c-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld--price{grid-column:1/-1}
.fld-l{font-size:12px;color:var(--muted)}
.fld-in{display:flex;align-items:center;height:42px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);padding:0 10px;gap:6px;min-width:0}
.fld-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld-in input{flex:1;min-width:0;width:100%;border:0;background:transparent;font-family:var(--mono);font-size:16px;text-align:right;padding:0;outline:none}
.fld-in input::placeholder{color:#b9b6ad}
.fld-in em{font-style:normal;font-size:13px;color:var(--sub);flex:none}
.fld--price .fld-in{height:48px}
.fld--price .fld-in input{font-size:22px;font-weight:500}
.fld-in--unit{padding-right:4px}
.fld-in--unit select{flex:none;height:32px;border:0;border-radius:7px;background:var(--soft);font-size:13px;padding:0 6px;cursor:pointer;color:var(--ink)}
.fld-in--sel{padding:0 4px}
.fld-in--sel select{flex:1;height:36px;border:0;background:transparent;font-size:14px;cursor:pointer;color:var(--ink);min-width:0}
.fld-in--sel select:focus,.fld-in--unit select:focus{outline:none}

.deal{border-top:1px dashed var(--line);padding-top:10px}
.deal summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ink-2);list-style:none;min-height:24px;flex-wrap:wrap}
.deal summary::-webkit-details-marker{display:none}
.deal summary::before{content:"+";width:18px;height:18px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:13px;color:var(--sub);flex:none}
.deal[open] summary::before{content:"−"}
.deal-sum{font-size:12px;color:var(--accent-ink);font-weight:500;background:var(--accent-soft);border-radius:999px;padding:1px 8px}
.deal-sum:empty{display:none}
.deal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding-top:10px}
.fld--nm{grid-column:1/-1}
.nm{display:flex;align-items:center;gap:8px}
.nm .fld-in{flex:1}
.nm b{color:var(--muted)}

.c-out{margin:auto -16px 0;padding:14px 16px 16px;background:var(--panel-soft);border-top:1px solid var(--line-3);display:flex;flex-direction:column;gap:6px;position:relative}
.c-out-main{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.c-price{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.02em}
.c-price small{font-family:var(--font);font-size:13px;color:var(--sub);font-weight:400;letter-spacing:0}
.is-empty .c-price{font-family:var(--font);font-size:14px;color:var(--muted);letter-spacing:0}
.is-best .c-price{color:var(--accent-ink)}
.c-badge{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.c-badge:empty{display:none}
.c-badge--best{background:var(--best);color:var(--best-ink)}
.c-badge--more{background:#fff1e8;color:var(--more)}
.c-badge--mute{background:var(--soft);color:var(--sub);font-weight:500}
.c-detail{margin:0;font-size:12px;color:var(--sub);line-height:1.5}
.c-meter{height:4px;border-radius:999px;background:var(--track);overflow:hidden;margin-top:2px}
.c-meter i{display:block;height:100%;width:0;background:#a5b8cc;transition:width .4s ease}
.is-best .c-meter i{background:var(--accent)}
.is-other{opacity:.85}

.foot{display:flex;flex-direction:column;gap:14px}
.add{height:52px;border:2px dashed var(--line-2);border-radius:16px;background:transparent;cursor:pointer;font-size:14px;color:var(--ink-2)}
.add:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.add:disabled{opacity:.45;cursor:default}
.notes{display:flex;flex-direction:column;gap:6px}
.notes p{margin:0;font-size:12.5px;color:var(--sub);line-height:1.65}
.notes b{color:var(--ink-2);margin-right:4px}

@media (max-width:860px){
  .summary{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media (max-width:640px){
  .topbar{padding:14px 16px}
  .up{padding:16px 16px 48px;gap:14px}
  .summary{padding:18px 16px;border-radius:18px}
  .sum-title{font-size:20px}
  .cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .bar{grid-template-columns:minmax(0,90px) minmax(0,1fr) auto;gap:8px;font-size:12px}
  .c-price{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:calc(100vw - 32px)}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

/* 다크 모드 (인쇄는 라이트 그대로) */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#141318; --surface:#1a1920; --panel:#1f1e26; --panel-soft:#24232c;
    --ink:#ecebf0; --ink-hover:#ffffff; --ink-2:#c9c7d1; --sub:#a09eab; --muted:#8a8895;
    --line:#2e2d36; --line-2:#393843; --line-3:#26252d; --hover:#2a2932; --soft:#26252d; --track:#34333d;
    --accent:#4dabf7; --accent-ink:#74c0fc; --accent-soft:rgba(77,171,247,.15);
    --best-soft:rgba(252,196,25,.18);
    --more:#ffa94d;
  }
  :root[data-theme="dark"] .btn--solid,:root[data-theme="dark"] .toast,:root[data-theme="dark"] .letter,:root[data-theme="dark"] .chip.is-on{color:var(--bg)}
  :root[data-theme="dark"] .c-badge--more{background:rgba(255,169,77,.14)}
  :root[data-theme="dark"] .bar-track i,:root[data-theme="dark"] .c-meter i{background:#5c6b7d}
  :root[data-theme="dark"] .bar.is-best .bar-track i,:root[data-theme="dark"] .is-best .c-meter i{background:var(--accent)}
  :root[data-theme="dark"] .fld-in input::placeholder{color:#5f5d69}
  :root[data-theme="dark"] .is-ready .sum-title b{background:linear-gradient(transparent 62%,rgba(252,196,25,.45) 62%)}
}