/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ── Design Tokens (Insight Architecture) ────────────────────────────────── */
:root {
  /* Primary */
  --clr-primary:           #005bbf;
  --clr-primary-container: #1a73e8;
  --clr-on-primary:        #ffffff;
  --clr-inverse-primary:   #adc7ff;

  /* Secondary (Success / High score) */
  --clr-secondary:           #006e2c;
  --clr-secondary-container: #86f898;
  --clr-on-secondary:        #ffffff;
  --clr-on-secondary-container: #00722f;

  /* Tertiary (Warning / Mid score) */
  --clr-tertiary:           #795900;
  --clr-tertiary-dim:       #fbbc09;
  --clr-on-tertiary:        #ffffff;

  /* Error (Critical / Low score) */
  --clr-error:           #ba1a1a;
  --clr-error-container: #ffdad6;
  --clr-on-error-container: #93000a;

  /* Surface layers */
  --clr-background:          #f8f9fa;
  --clr-surface:             #f8f9fa;
  --clr-surface-lowest:      #ffffff;
  --clr-surface-low:         #f3f4f5;
  --clr-surface-container:   #edeeef;
  --clr-surface-high:        #e7e8e9;
  --clr-surface-highest:     #e1e3e4;
  --clr-on-surface:          #191c1d;
  --clr-on-surface-variant:  #414754;
  --clr-outline:             #727785;
  --clr-outline-variant:     #c1c6d6;

  /* Semantic score fills */
  --score-high-bg:   #e6f4ea;
  --score-high-text: #006e2c;
  --score-high-fill: #34a853;
  --score-mid-bg:    #fff8e1;
  --score-mid-text:  #795900;
  --score-mid-fill:  #fbbc04;
  --score-low-bg:    #fce8e6;
  --score-low-text:  #ba1a1a;
  --score-low-fill:  #ea4335;

  /* Border radii */
  --r-sm:   0.25rem;   /* 4px  — chips */
  --r-base: 0.5rem;    /* 8px  — buttons, inputs */
  --r-md:   0.75rem;   /* 12px */
  --r-lg:   1rem;      /* 16px — cards */
  --r-xl:   1.5rem;    /* 24px */
  --r-full: 9999px;    /* pill — tags, badges */

  /* Spacing (4px baseline) */
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* Elevation */
  --shadow-l1: 0 0 0 1px #e8eaed, 0 1px 3px rgba(25,28,29,.06);
  --shadow-l2: 0 2px 8px rgba(25,28,29,.06), 0 8px 32px rgba(25,28,29,.08);

  /* Typography */
  --font-sans: 'Hanken Grotesk', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  background: var(--clr-background);
  color: var(--clr-on-surface);
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--clr-primary-container); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: var(--font-sans); }
.hidden { display: none !important; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
#app { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-md) 80px; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--clr-surface-lowest);
  border-bottom: 1px solid var(--clr-outline-variant);
  padding: 0 var(--sp-md);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-sm);
  height: 64px;
}
.app-logo {
  font-weight: 700; font-size: 1.1rem;
  color: var(--clr-primary); white-space: nowrap; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 6px;
}
.app-logo .logo-text { color: var(--clr-on-surface); }

/* ── Search Form ──────────────────────────────────────────────────────────── */
#search-form { display: flex; flex: 1; gap: var(--sp-xs); align-items: center; }

.search-wrap {
  flex: 1; position: relative; display: flex; align-items: center; min-width: 0;
}
.search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--clr-outline); pointer-events: none; width: 18px; height: 18px;
}
#search-input {
  width: 100%; padding: 11px 14px 11px 42px;
  border: 1.5px solid var(--clr-outline-variant); border-radius: var(--r-base);
  background: var(--clr-surface-lowest);
  font-family: var(--font-sans); font-size: 0.95rem;
  color: var(--clr-on-surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#search-input::placeholder { color: var(--clr-outline); }
#search-input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(0,91,191,.12);
}
.count-badge {
  background: var(--clr-surface-container); color: var(--clr-on-surface-variant);
  border-radius: var(--r-full); padding: 4px 12px;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
  font-family: var(--font-mono);
}
.count-badge b { color: var(--clr-primary); }

/* Primary Button */
#search-btn {
  padding: 11px 22px;
  background: var(--clr-primary); color: var(--clr-on-primary);
  border: none; border-radius: var(--r-base);
  font-size: 0.9rem; font-weight: 600; white-space: nowrap;
  transition: background .15s, box-shadow .15s;
}
#search-btn:hover:not(:disabled) {
  background: #004499;
  box-shadow: 0 2px 8px rgba(0,91,191,.25);
}
#search-btn:disabled { background: var(--clr-outline-variant); cursor: not-allowed; }

/* Secondary / Ghost Buttons */
.header-actions { display: flex; gap: 6px; }
.btn-icon {
  padding: 8px 13px;
  background: var(--clr-surface-lowest);
  border: 1.5px solid var(--clr-outline-variant);
  border-radius: var(--r-base);
  font-size: 0.82rem; font-weight: 500;
  color: var(--clr-on-surface-variant);
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.btn-icon:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: rgba(0,91,191,.05);
}

/* ── Progress Panel ───────────────────────────────────────────────────────── */
#progress-panel {
  background: var(--clr-surface-lowest);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-l1);
  margin: var(--sp-lg) 0 0;
  padding: var(--sp-lg);
}
.progress-header { display: flex; align-items: center; margin-bottom: var(--sp-md); }
.progress-header h2 {
  font-size: 0.95rem; font-weight: 600;
  color: var(--clr-on-surface-variant); letter-spacing: 0.02em;
}

/* Stage bars */
#stage-bars { display: flex; gap: var(--sp-md); margin-bottom: var(--sp-md); }
.stage-item { flex: 1; }
.stage-header { display: flex; justify-content: space-between; font-size: 0.78rem; margin-bottom: 6px; }
.stage-name { font-weight: 600; color: var(--clr-on-surface-variant); }
.stage-pct { font-family: var(--font-mono); font-size: 0.75rem; color: var(--clr-outline); }
.stage-bar-wrap { height: 6px; background: var(--clr-surface-high); border-radius: var(--r-full); overflow: hidden; }
.stage-bar { height: 100%; border-radius: var(--r-full); transition: width .35s ease; }
.stage-pending .stage-bar  { background: var(--clr-outline-variant); }
.stage-active  .stage-bar  { background: var(--clr-primary-container); }
.stage-done    .stage-bar  { background: var(--clr-secondary); }
.stage-sub { font-size: 0.72rem; color: var(--clr-outline); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Source badges */
#source-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-sm); }
.src-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-full);
  border: 1px solid; font-size: 0.76rem;
}
.src-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.src-pending { border-color: var(--clr-outline-variant); color: var(--clr-outline); }
.src-pending .src-dot { background: var(--clr-outline-variant); }
.src-running { border-color: var(--clr-primary); color: var(--clr-primary); background: rgba(0,91,191,.06); }
.src-running .src-dot { background: var(--clr-primary); animation: pulse 1s infinite; }
.src-done    { border-color: var(--clr-secondary); color: var(--clr-secondary); background: var(--score-high-bg); }
.src-done    .src-dot { background: var(--clr-secondary); }
.src-error   { border-color: var(--clr-error); color: var(--clr-error); background: var(--score-low-bg); }
.src-error   .src-dot { background: var(--clr-error); }
.src-count { font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* Log stream */
.log-label { font-size: 0.75rem; font-weight: 600; color: var(--clr-outline); margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase; }
#log-stream {
  max-height: 180px; overflow-y: auto;
  background: var(--clr-surface-low); border: 1px solid var(--clr-surface-highest);
  border-radius: var(--r-md); padding: 10px 12px;
  font-family: var(--font-mono); font-size: 0.75rem;
}
.log-line { display: flex; gap: 10px; padding: 1.5px 0; }
.log-ts { color: var(--clr-outline); white-space: nowrap; }
.log-msg { color: var(--clr-on-surface-variant); }
.log-success .log-msg { color: var(--clr-secondary); }
.log-warn    .log-msg { color: var(--clr-tertiary); }
.log-error   .log-msg { color: var(--clr-error); }
.log-empty { color: var(--clr-outline); text-align: center; padding: 20px 0; font-family: var(--font-sans); }

/* ── Stats Bar ────────────────────────────────────────────────────────────── */
.stats-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface-lowest);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-l1);
  margin: var(--sp-lg) 0 0;
}
.stat-item { font-size: 0.82rem; color: var(--clr-on-surface-variant); display: flex; align-items: baseline; gap: 5px; }
.stat-item b { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600; color: var(--clr-on-surface); }
.stat-rocket b { color: var(--clr-error); }

/* ── Results Area ─────────────────────────────────────────────────────────── */
#results-section { margin-top: var(--sp-lg); }
.results-header { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-lg) 0 var(--sp-md); }
.results-header h2 { font-size: 1rem; font-weight: 600; color: var(--clr-on-surface); }

/* Sort controls */
.sort-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sort-label { font-size: 0.75rem; color: var(--clr-outline); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.sort-btn {
  padding: 4px 12px; border: 1.5px solid var(--clr-outline-variant);
  border-radius: var(--r-full); background: none;
  font-size: 0.78rem; font-weight: 500; color: var(--clr-on-surface-variant);
  transition: all .15s;
}
.sort-btn:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.sort-btn.active {
  border-color: var(--clr-primary); color: var(--clr-primary);
  background: rgba(0,91,191,.08); font-weight: 600;
}

/* ── Product Cards ────────────────────────────────────────────────────────── */
.top-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: var(--sp-md); margin-bottom: var(--sp-xl); }

.product-card {
  background: var(--clr-surface-lowest);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-l1);
  padding: var(--sp-lg);
  position: relative;
  transition: box-shadow .2s, transform .15s;
  border: 1px solid #e8eaed;
}
.product-card:hover {
  box-shadow: var(--shadow-l2);
  transform: translateY(-2px);
}

/* Rank badge — pinned top-left per spec */
.card-badge {
  position: absolute; top: -1px; left: var(--sp-md);
  background: var(--clr-primary); color: var(--clr-on-primary);
  padding: 3px 11px; border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 0.76rem; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.02em;
}

.card-source { font-size: 0.72rem; color: var(--clr-outline); margin: var(--sp-md) 0 5px; text-transform: uppercase; letter-spacing: .06em; }
.card-title {
  font-size: 1rem; font-weight: 600; margin-bottom: var(--sp-xs); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--clr-on-surface);
}

/* Price — headline-md scale */
.card-price {
  font-size: 1.25rem; font-weight: 700; font-family: var(--font-mono);
  color: var(--clr-primary); margin-bottom: var(--sp-xs);
  display: flex; align-items: baseline; gap: 6px;
}
.ship-fee  { font-size: 0.78rem; color: var(--clr-outline); font-weight: 400; font-family: var(--font-sans); }
.ship-free { font-size: 0.78rem; color: var(--clr-secondary); font-weight: 600; font-family: var(--font-sans); }

.card-meta { display: flex; gap: var(--sp-sm); font-size: 0.8rem; color: var(--clr-on-surface-variant); margin-bottom: var(--sp-md); }
.rating { color: #f5a623; font-weight: 600; font-family: var(--font-mono); }

/* Score mini-bars */
.card-scores { margin-bottom: var(--sp-sm); }
.mini-bar-wrap { display: flex; align-items: center; gap: var(--sp-xs); margin-bottom: 5px; }
.mini-bar-label { width: 60px; font-size: 0.7rem; color: var(--clr-outline); text-align: right; flex-shrink: 0; }
.mini-bar-track { flex: 1; height: 6px; background: var(--clr-surface-high); border-radius: var(--r-full); overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: var(--r-full); transition: width .4s ease; }
.mini-bar-val { width: 28px; font-size: 0.72rem; font-family: var(--font-mono); font-weight: 600; color: var(--clr-on-surface-variant); text-align: right; flex-shrink: 0; }

/* Semantic fill colors */
.score-high .mini-bar-fill, .mini-bar-fill.score-high { background: var(--score-high-fill); }
.score-mid  .mini-bar-fill, .mini-bar-fill.score-mid  { background: var(--score-mid-fill); }
.score-low  .mini-bar-fill, .mini-bar-fill.score-low  { background: var(--score-low-fill); }

/* Composite score — data-num scale */
.composite-score { display: flex; align-items: baseline; gap: 5px; margin-bottom: var(--sp-xs); }
.composite-num {
  font-size: 2.2rem; font-weight: 700; font-family: var(--font-mono);
  line-height: 1; color: var(--clr-primary);
}
.composite-label { font-size: 0.75rem; color: var(--clr-outline); }

.card-comment { font-size: 0.82rem; color: var(--clr-on-surface-variant); line-height: 1.5; margin-bottom: var(--sp-md); }

/* Card action buttons */
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Primary */
.btn-buy {
  padding: 7px 14px;
  background: var(--clr-primary); color: var(--clr-on-primary);
  border: none; border-radius: var(--r-base);
  font-size: 0.8rem; font-weight: 600;
  transition: background .15s;
}
.btn-buy:hover { background: #004499; }

/* Secondary */
.btn-raw {
  padding: 7px 12px;
  background: var(--clr-surface-lowest); color: var(--clr-primary);
  border: 1.5px solid var(--clr-primary); border-radius: var(--r-base);
  font-size: 0.8rem; font-weight: 600;
  transition: background .15s;
}
.btn-raw:hover { background: rgba(0,91,191,.06); }

/* Ghost */
.btn-chat {
  padding: 7px 12px;
  background: none; color: var(--clr-primary-container);
  border: none; border-radius: var(--r-base);
  font-size: 0.8rem; font-weight: 600;
  transition: background .15s;
}
.btn-chat:hover { background: rgba(26,115,232,.08); }

/* ── Compare Table ────────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--clr-surface-lowest);
  border: 1px solid #e8eaed;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-l1);
  overflow: hidden;
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

/* Borderless: only horizontal 1px dividers */
.compare-table thead th {
  background: var(--clr-surface-low);
  padding: 11px 12px; text-align: left;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  color: var(--clr-on-surface-variant); letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 2px solid var(--clr-surface-highest);
  white-space: nowrap;
}
.compare-table tbody tr { border-bottom: 1px solid var(--clr-surface-high); cursor: pointer; transition: background .1s; }
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-table tbody tr:hover { background: var(--clr-surface-low); }
.compare-table tbody td { padding: 10px 12px; vertical-align: middle; border: none; }

.rank-cell { font-family: var(--font-mono); font-weight: 700; color: var(--clr-primary); text-align: center; }
.title-cell { max-width: 220px; }
.title-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.price-cell { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; color: var(--clr-on-surface); }
.action-cell { white-space: nowrap; }

/* Table action buttons */
.btn-sm {
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 0.73rem; font-weight: 600; margin-right: 4px;
  border: 1px solid;
}
.btn-sm.btn-raw  { color: var(--clr-primary); border-color: var(--clr-primary); background: none; }
.btn-sm.btn-raw:hover  { background: rgba(0,91,191,.06); }
.btn-sm.btn-chat { color: var(--clr-primary-container); border-color: transparent; background: none; }
.btn-sm.btn-chat:hover { background: rgba(26,115,232,.08); }

/* Source tag — pill */
.source-tag {
  background: rgba(0,91,191,.08); color: var(--clr-primary);
  border-radius: var(--r-full); padding: 2px 9px; font-size: 0.73rem; white-space: nowrap;
}

/* Score badges — pill */
.score-badge {
  display: inline-block; padding: 2px 9px;
  border-radius: var(--r-full); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600;
}
.score-badge.score-high { background: var(--score-high-bg); color: var(--score-high-text); }
.score-badge.score-mid  { background: var(--score-mid-bg);  color: var(--score-mid-text);  }
.score-badge.score-low  { background: var(--score-low-bg);  color: var(--score-low-text);  }
.score-badge.score-large { font-size: 0.88rem; padding: 3px 12px; }

/* Delivery tags — pill */
.tag { display: inline-block; padding: 2px 9px; border-radius: var(--r-full); font-size: 0.73rem; }
.tag-rocket { background: var(--score-low-bg);  color: var(--clr-error);    font-weight: 700; }
.tag-free   { background: var(--score-high-bg); color: var(--clr-secondary); font-weight: 600; }
.tag-paid   { background: var(--clr-surface-container); color: var(--clr-outline); }

/* Comment row */
.comment-row { display: none; }
.comment-row.open { display: table-row; }
.comment-wrap {
  background: var(--clr-surface-low); padding: var(--sp-xs) var(--sp-md);
  font-size: 0.79rem; color: var(--clr-on-surface-variant);
  border-top: 1px solid var(--clr-surface-high);
}
.cmt-label { font-weight: 700; color: var(--clr-on-surface-variant); margin-right: 4px; }

/* ── Modal Common ─────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(25,28,29,.5);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 1000; overflow-y: auto; padding: 40px var(--sp-md);
  backdrop-filter: blur(4px);
}
.modal-box {
  background: var(--clr-surface-lowest);
  border-radius: var(--r-lg); width: 100%; max-width: 760px;
  box-shadow: var(--shadow-l2); /* Level 2 elevation */
  position: relative; flex-shrink: 0;
}
body.modal-open { overflow: hidden; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--clr-surface-high); gap: var(--sp-sm);
}
.modal-header h3 {
  font-size: 1rem; font-weight: 600; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-close {
  background: none; border: none; font-size: 1.2rem;
  color: var(--clr-outline); padding: 4px 7px; border-radius: var(--r-base);
  transition: background .15s;
}
.modal-close:hover { background: var(--clr-surface-high); color: var(--clr-on-surface); }
.modal-body { padding: var(--sp-lg); }
.modal-meta { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-md); flex-wrap: wrap; font-size: 0.84rem; color: var(--clr-on-surface-variant); }
.modal-footer {
  display: flex; gap: var(--sp-xs); padding: var(--sp-sm) var(--sp-lg);
  border-top: 1px solid var(--clr-surface-high); justify-content: flex-end;
}

/* Buttons in modals */
.btn-secondary {
  padding: 8px 18px; background: var(--clr-surface-lowest);
  border: 1.5px solid var(--clr-primary); border-radius: var(--r-base);
  font-size: 0.84rem; font-weight: 600; color: var(--clr-primary);
  transition: background .15s;
}
.btn-secondary:hover { background: rgba(0,91,191,.06); }
.btn-primary {
  padding: 8px 18px; background: var(--clr-primary); color: var(--clr-on-primary);
  border: none; border-radius: var(--r-base); font-size: 0.84rem; font-weight: 600;
  transition: background .15s;
}
.btn-primary:hover { background: #004499; }

/* ── Raw Data Modal ───────────────────────────────────────────────────────── */
.raw-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--clr-surface-high); margin-bottom: var(--sp-md); }
.raw-tab-btn {
  padding: 8px 16px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600;
  color: var(--clr-outline); cursor: pointer; transition: color .15s;
}
.raw-tab-btn.active { border-bottom-color: var(--clr-primary); color: var(--clr-primary); }
.raw-tab-btn:hover:not(.active) { color: var(--clr-on-surface-variant); }

#raw-json, #raw-full {
  max-height: 380px; overflow: auto;
  background: var(--clr-surface-low); border: 1px solid var(--clr-surface-highest);
  border-radius: var(--r-md); padding: var(--sp-md);
  font-family: var(--font-mono); font-size: 0.75rem;
  white-space: pre; color: var(--clr-on-surface);
}
.score-detail-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.score-detail-table th {
  background: var(--clr-surface-low); padding: 9px 12px; text-align: left;
  border-bottom: 2px solid var(--clr-surface-highest);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  color: var(--clr-on-surface-variant); text-transform: uppercase; letter-spacing: .05em;
}
.score-detail-table td { padding: 9px 12px; border-bottom: 1px solid var(--clr-surface-high); vertical-align: middle; }
.score-detail-table tbody tr:last-child td { border-bottom: none; }
.score-axis { font-weight: 600; white-space: nowrap; color: var(--clr-on-surface); }
.score-bar-wrap { width: 180px; height: 8px; background: var(--clr-surface-high); border-radius: var(--r-full); overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: var(--r-full); transition: width .4s; }
.score-bar-fill.score-high { background: var(--score-high-fill); }
.score-bar-fill.score-mid  { background: var(--score-mid-fill); }
.score-bar-fill.score-low  { background: var(--score-low-fill); }
.score-num { font-family: var(--font-mono); font-weight: 700; color: var(--clr-primary); white-space: nowrap; }
.score-num small { font-weight: 400; color: var(--clr-outline); font-size: .75rem; }
.score-cmt { font-size: 0.79rem; color: var(--clr-on-surface-variant); }
.composite-row td { background: rgba(0,91,191,.05); font-weight: 700; }

/* ── Settings Modal ───────────────────────────────────────────────────────── */
.settings-section { margin-bottom: var(--sp-lg); }
.settings-section h4 {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--clr-outline); margin-bottom: var(--sp-sm);
  padding-bottom: 7px; border-bottom: 1px solid var(--clr-surface-high);
}
.setting-row { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-xs); flex-wrap: wrap; }
.setting-row label { min-width: 90px; font-size: 0.84rem; color: var(--clr-on-surface-variant); font-weight: 500; }
.setting-row input[type="number"],
.setting-row select,
.setting-row input[type="text"],
.setting-row input[type="password"] {
  padding: 7px 11px; border: 1.5px solid var(--clr-outline-variant);
  border-radius: var(--r-base); font-family: var(--font-sans); font-size: 0.88rem;
  outline: none; background: var(--clr-surface-lowest); color: var(--clr-on-surface);
  transition: border-color .15s;
}
.setting-row input[type="number"] { width: 80px; font-family: var(--font-mono); }
.setting-row select { min-width: 150px; }
.setting-row input[type="text"],
.setting-row input[type="password"] { flex: 1; min-width: 180px; }
.setting-row input:focus, .setting-row select:focus { border-color: var(--clr-primary); }

.weight-row { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-xs); }
.weight-label { min-width: 76px; font-size: 0.82rem; color: var(--clr-on-surface-variant); }
.weight-row input[type="range"] { flex: 1; accent-color: var(--clr-primary); }
.weight-val { min-width: 30px; font-family: var(--font-mono); font-weight: 600; color: var(--clr-primary); text-align: right; }
.weight-total-row { font-size: 0.8rem; color: var(--clr-on-surface-variant); margin-top: 5px; }
#weight-total { font-family: var(--font-mono); font-weight: 700; }
.weight-warn { color: var(--clr-error) !important; }

/* ── Chat Modal ───────────────────────────────────────────────────────────── */
#modal-chat .modal-box {
  max-width: 680px; display: flex; flex-direction: column;
  height: min(90vh, 720px);
}
.chat-product-info {
  padding: var(--sp-xs) var(--sp-lg);
  background: var(--clr-surface-low); border-bottom: 1px solid var(--clr-surface-high);
}
.chat-product-info .product-name { font-weight: 700; font-size: 0.93rem; margin-bottom: 5px; }
.chat-product-info .meta-row { display: flex; gap: var(--sp-xs); align-items: center; flex-wrap: wrap; font-size: 0.78rem; color: var(--clr-on-surface-variant); }

.demo-badge {
  background: var(--clr-tertiary-dim); color: #3e2e00;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: 0.72rem; font-weight: 700;
}

#chat-messages {
  flex: 1; overflow-y: auto; padding: var(--sp-md);
  display: flex; flex-direction: column; gap: var(--sp-xs);
}
.chat-bubble-wrap { display: flex; }
.user-wrap { justify-content: flex-end; }
.assistant-wrap { justify-content: flex-start; }

.chat-bubble {
  max-width: 80%; padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--r-lg); font-size: 0.86rem; line-height: 1.55;
}
.bubble-user {
  background: var(--clr-primary); color: var(--clr-on-primary);
  border-bottom-right-radius: var(--r-sm);
}
.bubble-assistant {
  background: var(--clr-surface-low); color: var(--clr-on-surface);
  border: 1px solid var(--clr-surface-highest);
  border-bottom-left-radius: var(--r-sm);
}
.bubble-ts { font-size: 0.68rem; color: rgba(255,255,255,.55); margin-top: 4px; text-align: right; }
.bubble-assistant .bubble-ts { color: var(--clr-outline); }
.bubble-text ul { padding-left: 16px; }
.bubble-text strong { font-weight: 700; }
.bubble-text em { font-style: italic; }
.cursor { animation: blink .8s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* Typing indicator */
#chat-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 13px; margin: 0 var(--sp-md) 6px;
  background: var(--clr-surface-low); border: 1px solid var(--clr-surface-highest);
  border-radius: var(--r-lg); border-bottom-left-radius: var(--r-sm);
  width: fit-content;
}
.typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clr-outline); animation: tdot 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes tdot { 0%,100%{transform:translateY(0);opacity:.4;} 50%{transform:translateY(-5px);opacity:1;} }

/* Chat input */
.chat-input-area { display: flex; gap: var(--sp-xs); padding: var(--sp-sm) var(--sp-md); border-top: 1px solid var(--clr-surface-high); }
#chat-input {
  flex: 1; resize: none; padding: 9px 13px;
  border: 1.5px solid var(--clr-outline-variant); border-radius: var(--r-base);
  font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.45;
  outline: none; min-height: 42px; max-height: 120px;
  background: var(--clr-surface-lowest); color: var(--clr-on-surface);
  transition: border-color .15s;
}
#chat-input:focus { border-color: var(--clr-primary); }
#chat-send {
  padding: 9px 18px;
  background: var(--clr-primary); color: var(--clr-on-primary);
  border: none; border-radius: var(--r-base);
  font-family: var(--font-sans); font-size: 0.86rem; font-weight: 700;
  transition: background .15s;
}
#chat-send:hover:not(:disabled) { background: #004499; }
#chat-send:disabled { background: var(--clr-outline-variant); cursor: not-allowed; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Tablet */
@media (max-width: 1024px) {
  .top-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: var(--sp-xs) 0; gap: var(--sp-xs); }
  #search-form { order: 2; width: 100%; }
  .header-actions { order: 3; }
  #stage-bars { flex-direction: column; gap: var(--sp-xs); }
  .top-cards { grid-template-columns: 1fr; }
  .score-bar-wrap { width: 100px; }
  #modal-chat .modal-box { height: 100dvh; border-radius: 0; }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  #modal-chat .modal-box { border-radius: 0; }
}


/* ════════════════════════════════════════════════════════════════════════════
   웰컴 소개 섹션
   ════════════════════════════════════════════════════════════════════════════ */

#welcome-section {
  max-width: 860px;
  margin: 48px auto 0;
  padding: 0 var(--sp-md);
  animation: fadeIn .4s ease;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.welcome-hero {
  text-align: center;
  margin-bottom: 32px;
}
.welcome-tagline {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-on-bg);
  margin: 0 0 10px;
}
.welcome-desc {
  font-size: .92rem;
  color: #777;
  margin: 0;
}

.welcome-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.welcome-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-l1);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.welcome-card:hover {
  box-shadow: var(--shadow-l2);
  border-color: var(--clr-primary);
  transform: translateY(-2px);
}
.welcome-card-icon { font-size: 1.9rem; line-height: 1; }
.welcome-card-body h3 {
  font-size: .9rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--clr-on-bg);
}
.welcome-card-body p {
  font-size: .79rem;
  color: #777;
  margin: 0;
  line-height: 1.55;
}

.welcome-hint {
  text-align: center;
  font-size: .8rem;
  color: #aaa;
  margin: 0;
}

#welcome-section.hidden { display: none; }

@media (max-width: 720px) {
  .welcome-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .welcome-cards { grid-template-columns: 1fr; }
  .welcome-tagline { font-size: 1.05rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   비교 바구니 / 이력 사이드패널 / AI 결정 어드바이저
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 바구니 플로팅 버튼 ─────────────────────────────────────────────────── */
.basket-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 700;
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,91,191,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.basket-fab:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(0,91,191,.46); }
.basket-fab.hidden { display: none; }

.basket-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e53935;
  color: #fff;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0 4px;
  pointer-events: none;
}

/* ── 사이드패널 공통 ─────────────────────────────────────────────────────── */
.side-panel {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 460px;
  max-width: 96vw;
  background: var(--clr-surface);
  z-index: 900;
  display: none;             /* JS로 flex로 전환 후 .open 추가 */
  flex-direction: column;
  box-shadow: var(--shadow-l2);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.history-panel { left:  0; transform: translateX(-100%); }
.basket-panel  { right: 0; transform: translateX(100%);  }
.side-panel.open { transform: translateX(0); }

.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 800;
  display: none;
  opacity: 0;
  transition: opacity .25s ease;
  backdrop-filter: blur(2px);
}
.panel-overlay.open { opacity: 1; }

.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.side-panel-header h3 { margin: 0; font-size: 1rem; }

/* ── 바구니 패널 내용 ────────────────────────────────────────────────────── */
.basket-content { flex: 1; overflow-y: auto; padding: 16px; }

.basket-footer {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.basket-footer .btn-primary { flex: 1; }
.basket-footer.hidden { display: none; }

.basket-empty {
  text-align: center;
  padding: 52px 20px;
  color: #999;
  line-height: 2;
}

.basket-items-header {
  font-size: .8rem;
  color: #888;
  margin-bottom: 10px;
}

.basket-compare-wrap { overflow-x: auto; }
.basket-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.basket-compare-table th {
  background: var(--clr-bg);
  padding: 7px 6px;
  text-align: center;
  font-weight: 600;
  font-size: .73rem;
  white-space: nowrap;
  border-bottom: 2px solid var(--clr-border);
}
.basket-compare-table td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: middle;
  white-space: nowrap;
}
.basket-title-cell { text-align: left !important; max-width: 130px; }
.basket-title-cell span {
  display: block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-remove {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: .95rem;
  padding: 2px 6px;
  border-radius: var(--r-full);
  transition: color .12s, background .12s;
}
.btn-remove:hover { color: #e53935; background: #fde9e9; }

/* ── "담기/빼기" 버튼 (결과 카드·비교표) ───────────────────────────────── */
.btn-basket {
  background: transparent;
  border: 1px solid var(--clr-secondary);
  color: var(--clr-secondary);
  border-radius: var(--r-full);
  padding: 5px 13px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.btn-basket:hover,
.btn-basket.in-basket { background: var(--clr-secondary); color: #fff; }

.btn-sm.btn-basket { padding: 3px 8px; font-size: .72rem; }

/* ── 이력 패널 ──────────────────────────────────────────────────────────── */
.history-list { flex: 1; overflow-y: auto; padding: 12px; }
.history-empty { text-align: center; padding: 52px 20px; color: #999; line-height: 2; }

.history-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 10px;
  background: var(--clr-surface);
  transition: box-shadow .15s, border-color .15s;
}
.history-card:hover { box-shadow: var(--shadow-l1); border-color: var(--clr-primary); }

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.history-query { font-weight: 700; font-size: .95rem; color: var(--clr-primary); }
.history-time  { font-size: .73rem; color: #aaa; white-space: nowrap; flex-shrink: 0; }

.history-card-meta {
  font-size: .79rem;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.history-top-product {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.history-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── 구매 결정 AI 어드바이저 모달 ──────────────────────────────────────── */
.modal-box-lg { max-width: 680px; width: 95vw; }

.decision-basket-summary {
  padding: 12px 20px;
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.decision-summary-label {
  font-size: .75rem;
  color: #888;
  font-weight: 600;
  margin-bottom: 6px;
}
.decision-summary-items { display: flex; flex-wrap: wrap; gap: 6px; }
.decision-summary-item {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-full);
  padding: 3px 10px;
  font-size: .76rem;
}

/* 결정 카드 (AI 최종 추천) */
.decision-card {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 2px solid var(--clr-secondary);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin: 10px 0 16px;
  text-align: center;
}
.decision-card-trophy  { font-size: 2.6rem; margin-bottom: 4px; }
.decision-winner-label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--clr-secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.decision-winner { font-size: 1.15rem; font-weight: 700; color: #1b5e20; margin-bottom: 8px; }
.decision-reason { font-size: .85rem; color: #388e3c; line-height: 1.5; }
.decision-runners { margin-top: 10px; color: #777; font-size: .8rem; }

/* ════════════════════════════════════════════════════════════════════════════
   구매이력 관리 + AI 맞춤 추천 모달
   ════════════════════════════════════════════════════════════════════════════ */

/* 탭 헤더 */
.ph-modal-box { display: flex; flex-direction: column; max-height: 88vh; }
.ph-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--clr-border);
  flex-shrink: 0;
}
.ph-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 11px 16px;
  font-size: .85rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  position: relative;
  transition: color .15s;
}
.ph-tab:hover { color: var(--clr-primary); }
.ph-tab.active { color: var(--clr-primary); }
.ph-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--clr-primary);
}
.ph-tab-badge {
  background: #e53935;
  color: #fff;
  border-radius: var(--r-full);
  font-size: .65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  display: inline-block;
  vertical-align: middle;
}
.ph-tab-badge:empty { display: none; }

/* 탭 패널 */
.ph-pane { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.ph-pane.hidden { display: none; }

/* 이력 추가 폼 */
.ph-add-form {
  padding: 14px 20px;
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.ph-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ph-form-row:last-child { margin-bottom: 0; }
.ph-input {
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  font-size: .83rem;
  background: #fff;
  min-width: 0;
  flex: 1;
}
.ph-input:focus { outline: none; border-color: var(--clr-primary); }
.ph-input-wide { flex: 2; }

/* 별점 선택기 */
.ph-star-wrap { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ph-label { font-size: .78rem; color: #888; white-space: nowrap; }
.ph-star-selector { display: flex; gap: 2px; cursor: pointer; }
.ph-star {
  font-size: 1.3rem;
  color: #ddd;
  transition: color .1s;
  user-select: none;
}
.ph-star.star-active, .ph-star:hover { color: #f59e0b; }

.ph-add-btn { flex-shrink: 0; }

/* 이력 목록 */
.ph-list { flex: 1; padding: 12px 20px; overflow-y: auto; }
.ph-empty { text-align: center; padding: 40px 20px; color: #999; line-height: 2; }
.ph-list-header { font-size: .78rem; color: #aaa; margin-bottom: 8px; }

.ph-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--clr-border);
  position: relative;
}
.ph-item-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.ph-item-name { font-weight: 600; font-size: .9rem; }
.ph-item-stars { font-size: .85rem; }
.star-on  { color: #f59e0b; }
.star-off { color: #ddd; }
.ph-item-price { font-size: .78rem; color: #888; }
.ph-item-notes { font-size: .76rem; color: #999; padding: 3px 0 0 2px; width: 100%; }
.ph-item-del { flex-shrink: 0; align-self: center; }
.ph-manage-footer { padding: 10px 20px; border-top: 1px solid var(--clr-border); flex-shrink: 0; }

/* AI 추천 탭 */
.reco-summary {
  padding: 10px 16px;
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.reco-summary-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.reco-summary-row:last-child { margin-bottom: 0; }
.reco-summary-label {
  font-size: .72rem;
  font-weight: 700;
  color: #888;
  min-width: 52px;
  flex-shrink: 0;
}
.reco-more { font-size: .72rem; color: #aaa; }
.reco-warn { color: #c62828; font-size: .8rem; }

.reco-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
  max-height: 320px;
}

.reco-guide {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  line-height: 2;
}
.reco-guide-icon { font-size: 2.4rem; margin-bottom: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   AI 어시스턴트 도크 (오른쪽 상시)
   ════════════════════════════════════════════════════════════════════════ */
:root { --dock-w: 380px; }

/* 본문이 도크 폭만큼 좌측 공간 확보 (데스크톱) */
body { padding-right: var(--dock-w); transition: padding-right .25s cubic-bezier(.4,0,.2,1); }
body.dock-collapsed { padding-right: 0; }

.chatbot-dock {
  position: fixed; top: 0; right: 0;
  width: var(--dock-w); height: 100vh;
  z-index: 850;
  display: flex; flex-direction: column;
  background: var(--clr-surface-lowest);
  border-left: 1px solid var(--clr-outline-variant);
  box-shadow: var(--shadow-l2);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.chatbot-dock.collapsed { transform: translateX(100%); }

.chatbot-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-md); height: 56px; flex-shrink: 0;
  border-bottom: 1px solid var(--clr-outline-variant);
  background: var(--clr-surface-lowest);
}
.chatbot-title { font-weight: 700; font-size: 0.95rem; }
.chatbot-collapse {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--clr-outline);
  width: 32px; height: 32px; border-radius: var(--r-base);
}
.chatbot-collapse:hover { background: var(--clr-surface-low); color: var(--clr-on-surface); }

.chatbot-context {
  padding: 8px var(--sp-md); flex-shrink: 0;
  font-size: 0.8rem; color: var(--clr-on-surface);
  border-bottom: 1px solid var(--clr-surface-high);
  background: var(--clr-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.chatbot-messages {
  flex: 1; overflow-y: auto; padding: var(--sp-md);
  display: flex; flex-direction: column; gap: var(--sp-xs);
}

.chatbot-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 13px; margin: 0 var(--sp-md) 6px;
  background: var(--clr-surface-low); border: 1px solid var(--clr-surface-highest);
  border-radius: var(--r-lg); border-bottom-left-radius: var(--r-sm);
  width: fit-content;
}
.chatbot-typing.hidden { display: none; }

.chatbot-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 var(--sp-md) 8px; flex-shrink: 0;
}
.chatbot-chip {
  background: var(--clr-surface-low);
  border: 1px solid var(--clr-outline-variant);
  color: var(--clr-primary);
  border-radius: var(--r-full);
  padding: 6px 12px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.chatbot-chip:hover { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }

.chatbot-input-area {
  display: flex; gap: var(--sp-xs); padding: var(--sp-sm) var(--sp-md);
  border-top: 1px solid var(--clr-surface-high); flex-shrink: 0;
}
#chatbot-input {
  flex: 1; resize: none; padding: 9px 13px;
  border: 1.5px solid var(--clr-outline-variant); border-radius: var(--r-base);
  font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.45;
  outline: none; min-height: 42px; max-height: 120px;
  background: var(--clr-surface-lowest); color: var(--clr-on-surface);
  transition: border-color .15s;
}
#chatbot-input:focus { border-color: var(--clr-primary); }
#chatbot-send {
  padding: 9px 18px; background: var(--clr-primary); color: #fff;
  border: none; border-radius: var(--r-base);
  font-family: var(--font-sans); font-size: 0.86rem; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
#chatbot-send:hover:not(:disabled) { background: #004499; }
#chatbot-send:disabled { opacity: .5; cursor: default; }

/* 펼치기 FAB (도크 접힘 시) */
.chatbot-expand {
  position: fixed; bottom: 28px; right: 28px; z-index: 851;
  width: 56px; height: 56px; border-radius: var(--r-full);
  background: var(--clr-primary); color: #fff; border: none;
  font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,91,191,.38);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.chatbot-expand:hover { transform: scale(1.1); }
.chatbot-expand.hidden { display: none; }

/* 바구니 FAB을 도크 폭만큼 왼쪽으로 (도크 펼침 시) */
.basket-fab { right: calc(var(--dock-w) + 28px); }
body.dock-collapsed .basket-fab { right: 28px; }

/* 반응형: 좁은 화면에서는 도크를 오버레이 토글로 */
@media (max-width: 900px) {
  body { padding-right: 0; }
  .chatbot-dock { width: min(380px, 92vw); z-index: 1100; }
  .basket-fab { right: 28px; }
  .chatbot-expand { right: 20px; bottom: 20px; }
}

/* chat-messages용 최소 높이 (결정 모달) */
#decision-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: 340px;
}