:root {
  --green-50: #E8F5E9; --green-100: #C8E6C9; --green-200: #A5D6A7;
  --green-500: #1B8A5A; --green-600: #0F6E56; --green-700: #085041; --green-800: #04342C;
  --blue-50: #E3F2FD; --blue-500: #1565C0; --blue-600: #0D47A1;
  --amber-50: #FFF8E1; --amber-500: #F59E0B; --amber-600: #92400E;
  --red-50: #FFEBEE; --red-500: #EF4444; --red-600: #991B1B;
  --gray-50: #FAFAF9; --gray-100: #F5F5F4; --gray-200: #E7E5E4; --gray-300: #D6D3D1;
  --gray-500: #78716C; --gray-600: #57534E; --gray-700: #44403C; --gray-800: #292524; --gray-900: #1C1917;
  --white: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--gray-50); color: var(--gray-800);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', sans-serif; }
body { overscroll-behavior-y: contain; }

#app { min-height: 100vh; display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; background: var(--white); }

#topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; background: var(--white); border-bottom: 1px solid var(--gray-100); min-height: 52px; }
#topTitle { flex: 1; text-align: center; font-weight: 700; color: var(--gray-800); font-size: 15px; }
#topbar button.ghost { background: transparent; border: 0; color: var(--green-500); font-size: 15px; font-weight: 600; cursor: pointer; padding: 4px 8px; }
#topbar .spacer { min-width: 32px; }
/* Language segmented toggle — shows current language highlighted */
.lang-seg { display: inline-flex; border: 1px solid var(--gray-200); border-radius: 999px; overflow: hidden; background: var(--gray-50); }
.lang-seg button { background: transparent; border: 0; cursor: pointer; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--gray-400); line-height: 1.4; }
.lang-seg button.active { background: var(--green-500); color: var(--white); }
.lang-seg button:not(.active):hover { color: var(--gray-700); }

#screens { flex: 1; padding: 14px 14px 88px; }
.screen { animation: fadeIn .25s ease-out; }
.screen.hidden, .hidden { display: none !important; }

.block { background: var(--white); border-radius: 14px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--gray-100); }
.label { font-size: 11px; font-weight: 700; color: var(--gray-500); letter-spacing: .4px; text-transform: uppercase; margin-bottom: 10px; }

/* Tree picker */
.tree-search-wrap { position: relative; }
#treeSearch { width: 100%; padding: 12px 14px; font-size: 14px; border: 1.5px solid var(--gray-200); border-radius: 12px; outline: none; }
#treeSearch:focus { border-color: var(--green-500); }

/* Autocomplete dropdown */
.tree-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--white); border: 1.5px solid var(--green-500); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.10); max-height: 280px; overflow-y: auto; z-index: 15; }
.tree-suggest .sg { padding: 10px 14px; font-size: 13px; color: var(--gray-700); cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gray-100); }
.tree-suggest .sg:last-child { border-bottom: 0; }
.tree-suggest .sg:hover, .tree-suggest .sg.active { background: var(--green-50); color: var(--green-700); font-weight: 600; }
.tree-suggest .sg-section { font-size: 11px; color: var(--gray-500); font-weight: 400; }
.tree-suggest .sg mark { background: var(--green-100); color: var(--green-800); padding: 0 2px; border-radius: 2px; }

/* Recommended trees from photo */
.rec-tree-block { margin-bottom: 12px; padding: 12px 14px; background: var(--blue-50); border-radius: 10px; border-left: 3px solid var(--blue-500); }
.rec-label { font-size: 12px; font-weight: 700; color: var(--blue-600); margin-bottom: 8px; line-height: 1.4; }
.rec-tree-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-tree-chip { padding: 8px 12px; background: var(--white); border: 1.5px solid var(--blue-500); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--blue-600); cursor: pointer; }
.rec-tree-chip:hover { background: var(--blue-500); color: #fff; }
.rec-tree-chip small { display: block; font-size: 9px; font-weight: 400; opacity: .7; margin-top: 1px; }
.tree-list { margin-top: 8px; max-height: 220px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.tree-chip { padding: 10px 12px; background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer; text-align: center; }
.tree-chip:hover, .tree-chip.active { background: var(--green-50); border-color: var(--green-500); color: var(--green-700); }
.selected-tree { margin-top: 8px; padding: 10px 12px; background: var(--green-50); border-radius: 10px; font-size: 13px; color: var(--green-700); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.selected-tree button { background: transparent; border: 0; color: var(--green-600); font-size: 12px; cursor: pointer; }

/* Camera */
.camera { position: relative; width: 100%; aspect-ratio: 4/3; background: linear-gradient(145deg, #0a1a12, #0d2818); border-radius: 14px; overflow: hidden; }
.camera-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.6); }
.reticle { width: 90px; height: 90px; border: 2px solid rgba(27,138,90,.6); border-radius: 12px; position: relative; margin-bottom: 14px; animation: pulse 1.2s ease-in-out infinite; }
.cross-v { position: absolute; top: 50%; left: 50%; width: 2px; height: 22px; background: rgba(27,138,90,.7); transform: translate(-50%, -50%); }
.cross-h { position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background: rgba(27,138,90,.7); transform: translate(-50%, -50%); }
.hint { font-size: 13px; letter-spacing: .5px; }
.hint-sub { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 4px; }
#preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.analyzing { position: absolute; top: 10px; left: 10px; background: rgba(27,138,90,0.9); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px; }
.retake-btn { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.55); color: #fff; border: 0; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); }
.retake-btn:hover { background: rgba(0,0,0,0.75); }

.camera-actions { display: flex; gap: 8px; margin-top: 10px; }
.mini-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer; }
.mini-btn:hover { background: var(--green-50); border-color: var(--green-500); color: var(--green-700); }
.mini-btn .ic { font-size: 15px; }

/* Candidates */
.banner { padding: 10px 14px; border-radius: 10px; font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.banner.warn { background: var(--amber-50); color: var(--amber-600); border-left: 3px solid var(--amber-500); }
.banner.info { background: var(--green-50); color: var(--green-700); border-left: 3px solid var(--green-500); }
.candidates { display: flex; flex-direction: column; gap: 8px; }
.cand { display: flex; gap: 10px; padding: 10px 12px; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 12px; cursor: pointer; transition: all .2s; }
.cand.selected { background: var(--green-50); border-color: var(--green-500); }
.cand-thumb { width: 56px; height: 56px; background: var(--gray-100); border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.cand-body { flex: 1; min-width: 0; }
.cand-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cand-name { font-size: 13px; font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-score { font-size: 12px; font-weight: 700; }
.cand-sci { font-size: 11px; color: var(--gray-500); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-bar { height: 4px; background: var(--gray-200); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.match-bar > span { display: block; height: 100%; border-radius: 2px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.cand-flags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }

/* Badges */
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; letter-spacing: .3px; }
.badge.green { background: var(--green-50); color: var(--green-700); }
.badge.blue { background: var(--blue-50); color: var(--blue-600); }
.badge.amber { background: var(--amber-50); color: var(--amber-600); }
.badge.red { background: var(--red-50); color: var(--red-600); }
.badge.gray { background: var(--gray-100); color: var(--gray-600); }

/* Buttons */
.btn { display: block; width: 100%; padding: 13px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; letter-spacing: .5px; text-align: center; text-decoration: none; }
.btn.primary { background: var(--green-500); color: #fff; }
.btn.primary:disabled { background: var(--gray-300); cursor: default; }
.btn.ghost-outline { background: transparent; border: 1.5px solid var(--green-500); color: var(--green-500); margin-top: 8px; }

/* Rx */
.tree-card { background: var(--green-50); border: 0; }
.tree-card .tree-head { display: flex; align-items: center; gap: 10px; }
.tree-card .tree-icon { width: 40px; height: 40px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--green-600); }
.tree-card .tree-name { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.tree-card .tree-sci { font-size: 11px; color: var(--gray-500); font-style: italic; }
.tree-card .tree-badges { margin-top: 10px; display: flex; gap: 5px; flex-wrap: wrap; }

.field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.field-row > label { flex: 0 0 80px; font-size: 12px; color: var(--gray-600); }
.field-row > input[type="range"] { flex: 1; accent-color: var(--green-500); }
.field-row > input[type="text"], .field-row > select { flex: 1; padding: 8px 10px; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: 13px; }

.rx-list { display: flex; flex-direction: column; gap: 8px; }
.rx-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px; }
.rx-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rx-title { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.rx-drug { font-size: 12px; color: var(--gray-600); margin-bottom: 4px; }
.rx-dose { font-size: 12px; font-weight: 600; color: var(--green-700); margin-bottom: 6px; }
.rx-meta { font-size: 11px; color: var(--gray-500); }
.rx-warns { margin-top: 6px; background: var(--amber-50); padding: 8px 10px; border-radius: 8px; }
.rx-warns .w { font-size: 11px; color: var(--amber-600); line-height: 1.5; }

.disclaimer { background: var(--gray-50); color: var(--gray-600); font-size: 11px; line-height: 1.5; }
.disclaimer-inline { background: var(--gray-50); color: var(--gray-600); font-size: 11px; line-height: 1.5; padding: 10px 14px; border-radius: 10px; margin: 14px 14px 8px; }

/* Pest detail */
.pest-summary { display: flex; justify-content: space-between; align-items: center; }
.pest-summary .name { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.pest-text { font-size: 12px; color: var(--gray-600); line-height: 1.6; margin-top: 6px; }
.pest-imgs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.pest-imgs img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--gray-100); flex-shrink: 0; }

/* Success */
.success-hero { text-align: center; background: var(--green-50); border: 0; padding: 24px; }
.success-hero .check { font-size: 44px; color: var(--green-500); }
.success-hero .hero-title { font-size: 18px; font-weight: 700; color: var(--green-700); margin-top: 4px; }
.success-hero .hero-sub { font-size: 12px; color: var(--gray-600); margin-top: 4px; }

.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item { display: flex; justify-content: space-between; align-items: center; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px; }
.doc-title { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.doc-desc { font-size: 11px; color: var(--gray-500); margin-top: 4px; }

/* History */
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item { padding: 12px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; cursor: pointer; }
.history-item:hover { background: var(--gray-50); }
.history-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--gray-500); }
.history-title { font-size: 13px; font-weight: 600; color: var(--gray-800); margin-top: 4px; }

/* Book */
.book-tree-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; }

/* Tabs */
#tabs { position: fixed; bottom: 0; left: 0; right: 0; max-width: 640px; margin: 0 auto; display: flex; background: var(--white); border-top: 1px solid var(--gray-200); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); z-index: 30; }
#tabs .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: 0; padding: 6px 0; cursor: pointer; color: var(--gray-500); font-size: 11px; }
#tabs .tab.active { color: var(--green-500); font-weight: 700; }
#tabs .tab .ic { font-size: 18px; line-height: 1; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; touch-action: none; }
.lightbox img { max-width: 100%; max-height: 85vh; object-fit: contain; user-select: none; transition: transform .15s ease-out; cursor: zoom-in; }
.lightbox img.zoomed { cursor: grab; max-width: none; max-height: none; }
.lightbox-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.12); color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; backdrop-filter: blur(4px); }
.lightbox-close:hover { background: rgba(255,255,255,0.25); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); color: #fff; border: 0; width: 46px; height: 72px; border-radius: 10px; font-size: 32px; cursor: pointer; backdrop-filter: blur(4px); }
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-nav.prev { left: 14px; }
.lightbox-nav.next { right: 14px; }
.lightbox-caption { position: absolute; bottom: 18px; left: 14px; right: 14px; text-align: center; color: rgba(255,255,255,0.85); font-size: 12px; pointer-events: none; }

/* Clickable/zoomable image hint */
.pest-imgs img, .cand-thumb { cursor: zoom-in; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { border-color: rgba(27,138,90,.4); } 50% { border-color: rgba(27,138,90,.9); } }

@media (max-width: 420px) {
  .field-row > label { flex: 0 0 60px; }
  .tree-list, .book-tree-list { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ===== Desktop: sidebar + blade layout ===== */
#sidebar { display: none; }
.blade-header { display: none; }

@media (min-width: 1024px) {
  /* Hide mobile bottom tabs */
  #tabs { display: none !important; }

  /* Root layout: sidebar | main */
  #app {
    max-width: none;
    flex-direction: row;
    background: var(--gray-100);
  }

  /* --- Sidebar --- */
  #sidebar {
    display: flex;
    flex-direction: column;
    width: 68px;
    min-height: 100vh;
    background: var(--green-800);
    flex-shrink: 0;
    z-index: 40;
    transition: width .2s ease;
    overflow: hidden;
  }
  #sidebar:hover { width: 180px; }
  .sidebar-brand {
    height: 56px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--white); flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  #sidebar:hover .sidebar-brand { justify-content: flex-start; padding-left: 20px; }
  .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; flex: 1; }
  .sidebar-tab {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; padding-left: 22px;
    background: transparent; border: none; color: rgba(255,255,255,.55);
    font-size: 13px; font-weight: 500; cursor: pointer;
    border-left: 3px solid transparent;
    transition: all .15s;
    white-space: nowrap;
  }
  .sidebar-tab:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); }
  .sidebar-tab.active {
    color: #fff; font-weight: 700;
    background: rgba(255,255,255,.10);
    border-left-color: var(--green-200);
  }
  .sidebar-ic { font-size: 20px; width: 24px; text-align: center; flex-shrink: 0; }
  .sidebar-label { opacity: 0; transition: opacity .15s; }
  #sidebar:hover .sidebar-label { opacity: 1; }
  .sidebar-footer {
    padding: 14px 22px; border-top: 1px solid rgba(255,255,255,.08);
    font-size: 11px; color: rgba(255,255,255,.35); white-space: nowrap;
  }

  /* --- Main area --- */
  #main-area {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
    background: var(--gray-100);
  }

  /* --- Topbar desktop --- */
  #topbar {
    background: var(--white); border-bottom: 1px solid var(--gray-200);
    padding: 10px 24px; min-height: 48px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }
  #topTitle { text-align: left; font-size: 16px; }

  /* --- Screens as horizontal blade container --- */
  #screens {
    flex: 1; padding: 0;
    overflow: hidden;
  }
  .screen {
    height: calc(100vh - 48px);
  }

  /* Blade row: horizontal scroll */
  .blade-row {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    height: calc(100vh - 48px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 !important;
    scroll-behavior: smooth;
  }
  .blade-row.hidden { display: none !important; }

  /* Each blade panel */
  .blade {
    flex: 0 0 380px;
    max-width: 420px;
    min-width: 320px;
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--gray-200);
    margin-bottom: 0;
    background: var(--white);
    animation: bladeSlideIn .3s ease-out;
    box-shadow: 2px 0 8px rgba(0,0,0,.04);
  }
  .blade:last-child { border-right: none; box-shadow: 4px 0 12px rgba(0,0,0,.06); }

  /* Desktop tree list: no height cap */
  .blade .tree-list {
    max-height: none;
  }

  /* Blade header (desktop only) */
  .blade-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .blade-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--green-700);
    letter-spacing: .3px;
    text-transform: uppercase;
  }

  /* Blade internal padding */
  .blade > .label { margin-top: 14px; margin-left: 14px; margin-right: 14px; }
  .blade > .tree-picker,
  .blade > .camera,
  .blade > .camera-actions,
  .blade > .candidates,
  .blade > .field-row,
  .blade > .rx-list,
  .blade > .history-list,
  .blade > .book-tree-list,
  .blade > .pest-summary,
  .blade > .pest-text,
  .blade > .pest-imgs,
  .blade > #bookThreatsList,
  .blade > #recTreeBlock,
  .blade > #lowConfBanner,
  .blade > #topSection,
  .blade > #simSection,
  .blade > #noEntryHint,
  .blade > #confirmIdentify,
  .blade > #pestDetailCard {
    margin-left: 14px;
    margin-right: 14px;
  }

  /* Report screen adjustments */
  [data-screen="report"] .block {
    flex: 0 0 380px;
    max-width: 420px;
    min-width: 320px;
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--gray-200);
    margin-bottom: 0;
  }
  [data-screen="report"] .success-hero { border-radius: 0; }

  /* Rx disclaimer + button inside blade flow */
  [data-screen="rx"] .btn.primary,
  [data-screen="rx"] .disclaimer {
    flex: 0 0 auto;
    align-self: stretch;
  }
  /* Blade footer (sticky at bottom) */
  .blade-footer {
    position: sticky;
    bottom: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding-bottom: 0;
  }
  .blade-footer #generateBtn {
    margin: 8px 14px 14px;
    width: calc(100% - 28px);
    border-radius: 12px;
  }

  /* Tree card blade */
  .blade.tree-card {
    background: var(--green-50);
    flex: 0 0 280px;
    min-width: 240px;
  }

  /* Camera blade tweaks */
  .blade[data-blade="camera"] .camera {
    aspect-ratio: 4/3;
    max-height: 280px;
    margin: 14px;
  }

  /* Book tree list in desktop */
  .blade .book-tree-list {
    max-height: none;
    padding: 14px;
  }

  /* History list full height */
  .blade .history-list { padding: 14px; }

  /* Scrollbar styling */
  .blade::-webkit-scrollbar,
  .blade-row::-webkit-scrollbar { width: 6px; height: 6px; }
  .blade::-webkit-scrollbar-thumb,
  .blade-row::-webkit-scrollbar-thumb {
    background: var(--gray-300); border-radius: 3px;
  }
  .blade::-webkit-scrollbar-track,
  .blade-row::-webkit-scrollbar-track { background: transparent; }

  /* Blade slide animation */
  @keyframes bladeSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: none; }
  }

  /* Confirm identify button in blade */
  #confirmIdentify {
    margin: 14px;
    width: calc(100% - 28px);
  }

  /* PDF download in report */
  [data-screen="report"] .btn {
    border-radius: 0;
    border-right: 1px solid var(--gray-200);
  }
}

/* Species gallery */
.cand-actions { margin-top: 6px; }
.cand-gallery-btn {
  font-size: 11px; padding: 3px 8px; border: 1px solid #999;
  background: #f5f5f5; border-radius: 3px; cursor: pointer;
}
.cand-gallery-btn:hover { background: #e8e8e8; }

.gallery-modal { position: fixed; inset: 0; z-index: 1000; }
.gallery-modal.hidden { display: none; }
.gallery-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.gallery-panel {
  position: relative; max-width: 900px; max-height: 85vh; margin: 5vh auto;
  background: #fff; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
}
.gallery-head {
  padding: 12px 16px; border-bottom: 1px solid #ddd;
  display: flex; justify-content: space-between; align-items: center;
}
.gallery-title { font-weight: 600; font-size: 15px; }
.gallery-close {
  background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.gallery-grid {
  padding: 12px; overflow-y: auto; flex: 1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
}
.gallery-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;
  background: #eee;
}
.gallery-loading { padding: 40px; text-align: center; color: #888; grid-column: 1/-1; }
.banner.info { background: #e8f4ff; border-left: 3px solid #4a9eff; padding: 8px 12px; }

/* ---------- RAG 비교 패널 ---------- */
.rag-panel { display: flex; flex-direction: column; gap: 12px; }
.rag-loading { padding: 24px 12px; text-align: center; color: var(--blue-600); font-size: 13px; line-height: 1.6; }
.rag-loading small { color: var(--gray-500); }
.rag-unavail { padding: 16px 12px; background: var(--amber-50); border-left: 3px solid var(--amber-500);
  border-radius: 8px; color: var(--amber-600); font-size: 13px; line-height: 1.6; }
.rag-answer { background: var(--blue-50); border: 1px solid #cfe3fb; border-radius: 12px; padding: 14px; }
.rag-answer-pending { background: var(--gray-50); border-style: dashed; border-color: var(--gray-300); }
.rag-answer-pending .rag-answer-body { color: var(--gray-500); }
.rag-spin { display: inline-block; animation: ragspin 1.2s linear infinite; }
@keyframes ragspin { to { transform: rotate(360deg); } }
.rag-answer-label { font-size: 11px; font-weight: 700; color: var(--blue-600); letter-spacing: .3px;
  text-transform: uppercase; margin-bottom: 8px; }
.rag-answer-label small { color: var(--gray-500); text-transform: none; font-weight: 500; }
.rag-answer-body { font-size: 14px; line-height: 1.7; color: var(--gray-800); }
.rag-hits { display: flex; flex-direction: column; gap: 8px; }
.rag-hits-label { font-size: 11px; font-weight: 700; color: var(--gray-500); letter-spacing: .3px; }
.rag-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  vertical-align: middle; margin-left: 2px; }
.rag-tag.exact { background: var(--green-100); color: var(--green-700); }
.rag-tag.fallback { background: var(--amber-50); color: var(--amber-600); }
.rag-hits-label b { color: var(--gray-800); }
.rag-hit { border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; background: var(--white); }
.rag-hit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rag-hit-title { font-size: 13px; font-weight: 600; color: var(--gray-800); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rag-dist { font-size: 11px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.rag-hit-snip { font-size: 12px; line-height: 1.55; color: var(--gray-600);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }