/* ═══ 디자인 토큰 — 시안 C 도구형(2026-07-07 사장님 선택): 딥그린 포인트 1개·보더 기반·여백 넉넉 ═══ */
:root{
  --bg:#FBFBFA; --card:#FFFFFF; --ink:#141915; --muted:#79837B; --faint:#AEB7B0; --line:#E4E8E4;
  --accent:#0E9F6E; --accent-deep:#0B7A55; --accent-ink:#FFFFFF; --accent-bg:#E7F6F0;
  --t-best:#D6304A; --t-best-bg:#FBE9EC;
  --t-good:#DE6B12; --t-good-bg:#FBEFE2;
  --t-ok:#51605A;   --t-ok-bg:#ECF0ED;
  --t-bad:#94A09A;  --t-bad-bg:#F1F3F1;
  --radius:14px;
  --font:"Pretendard Variable", Pretendard, -apple-system, "Segoe UI",
         "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111413; --card:#191D1B; --ink:#E6EAE7; --muted:#8B948E; --faint:#5B655F; --line:#252B28;
    --accent:#2BB98A; --accent-deep:#37CE9D; --accent-ink:#08110D; --accent-bg:#1B322A;
    --t-best:#F0647A; --t-best-bg:#3A1D23;
    --t-good:#F2954C; --t-good-bg:#372513;
    --t-ok:#A9B4AE;   --t-ok-bg:#232927;
    --t-bad:#79837D;  --t-bad-bg:#1E2321;
  }
}
:root[data-theme="dark"]{
  --bg:#111413; --card:#191D1B; --ink:#E6EAE7; --muted:#8B948E; --faint:#5B655F; --line:#252B28;
  --accent:#2BB98A; --accent-deep:#37CE9D; --accent-ink:#08110D; --accent-bg:#1B322A;
  --t-best:#F0647A; --t-best-bg:#3A1D23; --t-good:#F2954C; --t-good-bg:#372513;
  --t-ok:#A9B4AE; --t-ok-bg:#232927; --t-bad:#79837D; --t-bad-bg:#1E2321;
}
:root[data-theme="light"]{
  --bg:#FBFBFA; --card:#FFFFFF; --ink:#141915; --muted:#79837B; --faint:#AEB7B0; --line:#E4E8E4;
  --accent:#0E9F6E; --accent-deep:#0B7A55; --accent-ink:#FFFFFF; --accent-bg:#E7F6F0;
  --t-best:#D6304A; --t-best-bg:#FBE9EC; --t-good:#DE6B12; --t-good-bg:#FBEFE2;
  --t-ok:#51605A; --t-ok-bg:#ECF0ED; --t-bad:#94A09A; --t-bad-bg:#F1F3F1;
}

/* ═══ 기본 ═════════════════════════════════════════════════ */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{ font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.5; min-height:100dvh }
#app{ max-width:560px; margin:0 auto; padding:16px 20px 60px }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit }
input{ font-family:inherit }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px }
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important } }

/* ═══ 히어로(홈) + 헤더(품목) ═══════════════════════════════ */
.hero{ padding:22px 2px 14px }
.hero .logo{ font-size:24px; font-weight:800; letter-spacing:-.02em }
.hero .logo b{ color:var(--accent) }
.hero p{ font-size:14px; color:var(--muted); margin-top:6px }
.hero .meta{ font-size:11.5px; color:var(--faint); margin-top:8px; font-variant-numeric:tabular-nums }
.a2hs{ display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--accent-deep);
  background:var(--accent-bg); border:1px solid var(--accent); border-radius:999px; padding:6px 13px }
.a2hs:active{ opacity:.8 }
.top{ display:flex; align-items:center; gap:10px; padding:10px 2px 14px }
.back{ display:inline-flex; align-items:center; gap:4px;
  font-size:14px; font-weight:600; color:var(--muted); padding:4px 2px }
.back:hover{ color:var(--ink) }
.brand{ font-size:19px; font-weight:800; letter-spacing:-.02em }
.brand a{ color:var(--accent) }
.brand-sub{ font-size:12.5px; color:var(--muted) }

/* 온라인/오프라인 세그먼트 탭 */
.mode-tabs{ display:flex; gap:4px; margin:2px 0 16px; padding:4px;
  border:1px solid var(--line); background:var(--card); border-radius:12px }
.mode-tabs a{ flex:1; text-align:center; padding:10px 0; border-radius:9px;
  font-weight:700; font-size:14px; color:var(--muted) }
.mode-tabs a.on{ color:var(--accent-deep); background:var(--accent-bg); font-weight:800 }
.mode-tabs.big a{ padding:11px 0; font-size:14.5px }
.tabcnt{ display:inline-block; min-width:19px; padding:1px 7px; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:800;
  vertical-align:1px; font-variant-numeric:tabular-nums }

/* ═══ 대형 검색 + 자동완성 ══════════════════════════════════ */
.sbox{ position:relative; z-index:8 }
.sbox input{ width:100%; font-size:18px; font-weight:600; color:var(--ink);
  background:var(--card); border:2px solid var(--line); border-radius:var(--radius);
  padding:15px 18px; transition:border-color .15s }
.sbox input:focus{ outline:none; border-color:var(--accent) }
.sbox input::placeholder{ color:var(--faint); font-weight:500 }
.sug{ position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.10); overflow:hidden; display:none }
.sug.show{ display:block }
.sug a{ width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  padding:11px 14px; font-size:15px; border-bottom:1px solid var(--line) }
.sug a:last-child{ border-bottom:none }
.sug a:hover, .sug a.sel{ background:var(--accent-bg) }
.sug .em{ font-size:18px; width:24px; text-align:center }
.sug .em-img{ width:22px; height:22px; object-fit:contain; border-radius:5px }
.sug .nm{ font-weight:650 }
.sug .pu{ margin-left:auto; font-size:11.5px; color:var(--faint) }
.sug .none{ padding:12px 14px; font-size:13.5px; color:var(--faint) }

/* 자주 찾는 / 최근 본 칩 */
.hotwrap{ margin:14px 0 4px }
.hotwrap .hl{ font-size:11.5px; font-weight:700; color:var(--faint); margin:10px 0 8px }
.chips{ display:flex; flex-wrap:wrap; gap:7px }
.chips a{ font-size:13px; font-weight:650; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 13px }
.chips a:hover{ border-color:var(--accent); color:var(--accent-deep) }

/* ═══ 계산 카드 ═════════════════════════════════════════════ */
.calc{ margin-top:18px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 18px 22px }
.item-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px }
.item-head .em{ font-size:30px }
.item-head .em-img{ width:44px; height:44px; object-fit:contain; border-radius:9px }
.item-head h1{ font-size:19px; font-weight:800; letter-spacing:-.02em }
.item-head .pu{ font-size:12.5px; color:var(--muted) }
.item-head .x{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--faint); padding:6px; flex:0 0 auto }
.offtag{ font-size:12px; font-weight:800; color:var(--accent-deep); background:var(--accent-bg);
  border-radius:8px; padding:2px 8px; vertical-align:3px }
.presets{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; margin-bottom:14px }
.presets::-webkit-scrollbar{ display:none }
.presets button{ flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--muted);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 11px }
.presets button:active{ border-color:var(--accent); color:var(--accent-deep) }
.f{ margin-bottom:12px }
.f label{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px }
.f .iw{ position:relative }
.f input{ width:100%; font-size:22px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; background:var(--bg); border:1.5px solid var(--line);
  border-radius:10px; padding:12px 44px 12px 14px }
.f input:focus{ outline:none; border-color:var(--accent) }
.f .sfx{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:14px; color:var(--faint); pointer-events:none }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.frow .f input{ font-size:17px; padding:11px 40px 11px 12px }

/* 판정 결과 */
.out{ margin-top:6px; border-top:1px dashed var(--line); padding-top:16px }
.out .wait{ font-size:13px; color:var(--faint); text-align:center; padding:8px 0 2px }
.out .badge{ display:inline-block; font-size:15px; font-weight:800; border-radius:10px;
  padding:7px 15px; margin-bottom:8px }
.out .big{ font-size:clamp(38px, 11vw, 52px); font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.1 }
.out .big small{ font-size:.35em; font-weight:700; color:var(--muted); margin-left:5px }
.out .sub{ font-size:13px; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums }
.b-best, .pill.tone-best{ color:var(--t-best); background:var(--t-best-bg) }
.b-good, .pill.tone-good{ color:var(--t-good); background:var(--t-good-bg) }
.b-ok,   .pill.tone-ok{   color:var(--t-ok);   background:var(--t-ok-bg) }
.b-bad,  .pill.tone-bad{  color:var(--t-bad);  background:var(--t-bad-bg) }
.pill{ font-size:12px; font-weight:700; border-radius:999px; padding:4px 11px; white-space:nowrap }
/* 4단 눈금 사다리 */
.lad{ margin-top:14px }
.lad .r{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px;
  font-variant-numeric:tabular-nums }
.lad .r .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto }
.lad .r .lb{ font-weight:700; width:86px }
.lad .r .bd{ color:var(--muted); margin-left:auto }
.lad .r.hit{ background:var(--accent-bg); border-radius:8px; padding:5px 8px; margin:0 -8px }
.d-best{ background:var(--t-best) } .d-good{ background:var(--t-good) }
.d-ok{ background:var(--t-ok) } .d-bad{ background:var(--t-bad) }
.gd-sub{ font-size:11.5px; color:var(--faint); margin-top:10px; line-height:1.7 }
.gd-h{ font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px }
.note{ font-size:12px; color:var(--muted); margin-top:12px; line-height:1.6 }
.actions{ display:flex; gap:10px; margin-top:16px }
.btn{ flex:1; font-size:15px; font-weight:700; border-radius:12px; padding:13px 0; border:none }
.btn:active{ opacity:.85 }
.btn-primary{ background:var(--accent); color:var(--accent-ink) }
.btn-ghost{ background:var(--bg); border:1px solid var(--line); color:var(--ink) }
.morelink{ display:block; font-size:12.5px; font-weight:700; color:var(--muted);
  text-align:center; margin-top:14px }
.morelink:hover{ color:var(--accent-deep) }

/* 일반 카드(스파크·오프라인 행사·설명문 — 품목 페이지) */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; margin-top:14px }
.off-row{ display:flex; align-items:center; gap:10px; padding:11px 4px;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink) }
.off-row:last-child{ border-bottom:0 }
.off-row .nm2{ font-size:14px; font-weight:700; flex:1; min-width:0 }
.off-row .ev{ font-size:12px; font-weight:800; color:var(--muted); border:1px solid var(--line);
  border-radius:8px; padding:2px 7px; white-space:nowrap; font-variant-numeric:tabular-nums }
.off-row .shop{ font-size:11px; color:var(--muted); white-space:nowrap }

/* ═══ 전체 품목 (접힘 카탈로그) ═════════════════════════════ */
.all{ margin-top:28px }
.all summary{ font-size:14px; font-weight:700; color:var(--muted); cursor:pointer;
  padding:12px 2px; list-style:none; display:flex; align-items:center; gap:6px }
.all summary::-webkit-details-marker{ display:none }
.all summary::before{ content:'▸'; font-size:12px; transition:transform .15s }
.all[open] summary::before{ transform:rotate(90deg) }
.all .cat{ margin:8px 0 16px }
.all .cath{ font-size:13px; font-weight:800; margin:14px 2px 8px }
.all .cath .cnt{ font-size:11px; color:var(--faint); font-weight:600; margin-left:4px }
.all .lnks{ display:flex; flex-wrap:wrap; gap:6px }
.all .lnks a{ font-size:12.5px; font-weight:600; color:var(--muted);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 11px }
.all .lnks a:hover{ color:var(--accent-deep); border-color:var(--accent) }

/* 장바구니 */
.cart-x{ color:var(--faint); font-size:13px; font-weight:700; padding:4px 6px; flex:0 0 auto }
.cart-x:hover{ color:var(--t-best) }
.cart-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px;
  font-size:13.5px; font-variant-numeric:tabular-nums }

.foot{ margin-top:34px; font-size:11.5px; color:var(--faint); text-align:center; line-height:1.7 }
.foot a{ color:var(--muted) }
.empty{ text-align:center; color:var(--muted); padding:32px 0; font-size:14px }

/* ═══ 토스트 ═══════════════════════════════════════════════ */
#toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); font-size:14px; font-weight:600;
  padding:11px 20px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .25s; z-index:9; white-space:nowrap;
}
#toast.show{ opacity:1 }

/* 오프라인 상세: 온라인 계산기로 넘어가는 버튼 */
.gobtn{display:block;text-align:center;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:15px;
  border-radius:12px;padding:15px;margin:14px 0 8px}
.gobtn:active{opacity:.85}
.newtag{font-size:10px;font-weight:900;color:#fff;background:#e5484d;border-radius:6px;padding:2px 5px;white-space:nowrap}
/* 마트 전단 바로가기(외부 링크 칩) */
.leaflets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.leaflets-h{font-size:12.5px;font-weight:800;color:var(--muted)}
.leaflet{font-size:13px;font-weight:700;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;display:inline-flex;align-items:center;gap:4px}
.leaflet .ext{font-size:11px;color:var(--muted)}
/* 가격 히스토리 스파크라인 (품목 페이지) */
.spark{width:100%;height:auto;display:block;margin-top:6px}
.spark .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.spark .pt{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.spark .pt.last{fill:var(--ink)}
.spark text{font-size:9px;fill:var(--muted)}
.spark .val{font-size:10px;font-weight:800;fill:var(--ink)}
.hist-cap{font-size:11px;color:var(--muted);margin-top:6px}
.hist-cap a{color:var(--muted)}