/* ============================================================
   Tableau Viz Library — Design System
   ============================================================ */
/* Design System v2 — "Quiet Luxury / Living Glass"
   컬러=재질, 모션=물리. 네온 블루/시안/보라 그라데이션·발광 제거.
   Midnight Navy 강조 + 잉크(다크)/warm greige(라이트) 중립. 기존 토큰명 유지·값만 고급화. */
:root {
  /* ── Neutral ramp — deep ink (dark-first), 순흑 금지·냉기 잉크 ── */
  --n-0:#0C0E13; --n-1:#12151C; --n-2:#181C25; --n-3:#1F242F;
  --n-4:#2A303C; --n-5:#3A4150; --n-6:#5A6272; --n-7:#868D9C;
  --n-8:#C3C8D2; --n-9:#EDEFF3;
  --bg:#080A0F;

  /* 배경 — 오로라/색광원 제거, 평평한 잉크 + 미세 vignette만 */
  --bg-gradient: radial-gradient(1200px 800px at 50% -10%, #10141C 0%, var(--bg) 62%);

  /* Surfaces — 발광 아닌 재질: alpha-white hairline + 미세 그림자 */
  --surface-1:rgba(18,21,28,0.66);
  --surface-2:rgba(24,28,37,0.82);
  --surface-3:rgba(12,14,19,0.94);
  --dd-pop-bg:#12151C; /* 드롭다운 팝업 — 완전 불투명(뒤 칩·범례 비침 방지) */
  --surface-border:rgba(255,255,255,0.07);
  --surface-border-strong:rgba(255,255,255,0.13);
  --glass-blur:22px; --glass-sat:140%;
  --glass-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%);

  /* ── Brand — Midnight Navy, 발광 금지, grad는 동일 hue 명도이동만 ── */
  --brand:#2E5A8C; --brand-hover:#3A6DA6; --brand-active:#254A75;
  --brand-soft:rgba(46,90,140,0.16);
  --brand-ring:rgba(46,90,140,0.55);
  --brand-grad:linear-gradient(135deg, #35659B, #2A5182);
  --accent:var(--brand);

  /* 보조 강조 — Camel/Tan (데이터 하이라이트·태그·온기, 제한적 사용) */
  --accent-warm:#B8895A;
  --accent-warm-soft:rgba(184,137,90,0.16);

  /* 시맨틱 — 저채도(형광 금지): sage / amber-tan / terracotta */
  --success:#5E8C6A; --warn:#C79A5E; --danger:#B15A52;

  /* 강조/등급 텍스트 (다크 기본값) */
  --accent-text:#7FA6CE;          /* 대비용 밝은 네이비 (링크·A등급·근거) */
  --gold-text:#C79A5E;            /* S등급·인기 — 탄골드(형광골드 금지) */
  --overlay-chip-bg:rgba(8,10,15,0.64);
  --overlay-chip-text:#EDEFF3;

  /* Text roles — text-dim은 n-6(#5A6272)이 AA 미달(2.98:1)이라 AA 통과값으로 분리(#7A8296 4.75:1) */
  --text-hi:var(--n-9); --text:var(--n-8); --text-mut:var(--n-7); --text-dim:#7A8296;

  /* ── Type — 1.25 Major Third 모듈러 스케일 + 옵티컬 자간 ── */
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","SF Pro Text",system-ui,sans-serif;
  --fs-11:0.6875rem; --fs-12:0.75rem; --fs-13:0.8125rem; --fs-14:0.875rem;
  --fs-16:1.0625rem;                /* 17px */
  --fs-18:1.3125rem;                /* 21px */
  --fs-22:1.625rem;                 /* 26px */
  --fs-15:0.9375rem; --fs-17:1.0625rem; --fs-21:1.3125rem;
  --fs-26:1.625rem;  --fs-33:2.0625rem;
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700;
  --lh-tight:1.2; --lh-snug:1.4; --lh-normal:1.6;
  --lh-display:1.06; --lh-title:1.22; --lh-body:1.6; --lh-relaxed:1.7;
  --tracking-label:0.06em; --tracking-tight:-0.014em; --tracking-display:-0.022em;
  --tracking-title:-0.014em; --tracking-body:-0.003em; --tracking-caption:0;

  /* ── Space — 8px 그리드 + 대형 스텝 ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-8:56px;
  --sp-7:40px; --sp-9:80px;

  /* ── Radius — 절제 ── */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --topbar-h:56px; --panel-w:288px; --gutter:16px;

  /* ── Motion — 3계층 duration + 단일 시그니처 이징 ── */
  --dur-micro:120ms; --dur-std:220ms; --dur-enter:380ms; --dur-theme:500ms;
  --ease-out:cubic-bezier(0.32,0.72,0,1);
  --ease-out-soft:cubic-bezier(0.32,0.72,0,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --ease-spring:cubic-bezier(0.34,1.28,0.64,1);
  --stagger-step:42ms; --card-lift:-4px; --glow-radius:340px;

  /* ── Elevation — 네온 glow 제거, hairline + 2단 자연광 그림자 ── */
  --e-1:0 1px 2px rgba(0,0,0,.28), 0 0 0 1px var(--surface-border);
  --e-2:0 2px 4px rgba(0,0,0,.24), 0 8px 16px -8px rgba(0,0,0,.42), 0 0 0 1px var(--surface-border);
  --e-3:0 4px 8px rgba(0,0,0,.30), 0 16px 32px -12px rgba(0,0,0,.55), 0 0 0 1px var(--surface-border-strong);
  --e-focus:0 0 0 2px var(--bg), 0 0 0 3px var(--brand-ring);
  /* primary/active 강조 — 네온 링 제거, 브랜드색 위 얕은 자연광 그림자만 (고급 톤) */
  --e-glow:0 1px 2px rgba(0,0,0,.20), 0 10px 24px -14px rgba(46,90,140,.55);
}

/* ── 라이트 테마 — warm greige 종이·잉크 그림자 ── */
:root[data-theme="light"] {
  --n-0:#FFFFFF; --n-1:#FBFAF7; --n-2:#F4F2EC; --n-3:#ECE9E1;
  --n-4:#DED9CE; --n-5:#C4BEB0; --n-6:#938C7C; --n-7:#655F52;
  --n-8:#3B3730; --n-9:#211E19;
  --bg:#F4F2EC;
  --bg-gradient: radial-gradient(1200px 800px at 50% -8%, #FFFFFF 0%, var(--bg) 70%);
  --surface-1:rgba(255,255,255,0.72);
  --surface-2:rgba(255,255,255,0.86);
  --surface-3:rgba(255,255,255,0.95);
  --dd-pop-bg:#FFFFFF; /* 드롭다운 팝업 — 완전 불투명 */
  --surface-border:rgba(33,30,25,0.09);
  --surface-border-strong:rgba(33,30,25,0.15);
  --glass-sheen:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%);

  --brand:#2E5A8C; --brand-hover:#264E7C; --brand-active:#1F4269;
  --brand-soft:rgba(46,90,140,0.10);
  --brand-ring:rgba(46,90,140,0.40);
  --accent-warm:#9A6E42; --accent-warm-soft:rgba(154,110,66,0.14);
  --success:#4A7356; --warn:#9A7434; --danger:#94443D;
  --accent-text:#254A75;          /* 종이 대비 진한 네이비 */
  --gold-text:#8A6A33;
  --overlay-chip-bg:rgba(255,255,255,0.84);
  --overlay-chip-text:#211E19;
  /* text-dim: 라이트에서 n-6(#938C7C) AA 미달(3.34:1) → #7A7364(4.70:1) */
  --text-hi:var(--n-9); --text:var(--n-8); --text-mut:var(--n-7); --text-dim:#7A7364;

  /* 종이 위 색 없는 중립(잉크) 그림자 */
  --e-1:0 1px 2px rgba(33,30,25,.05), 0 0 0 1px var(--surface-border);
  --e-2:0 2px 4px rgba(33,30,25,.05), 0 6px 14px -6px rgba(33,30,25,.10), 0 0 0 1px var(--surface-border);
  --e-3:0 4px 8px rgba(33,30,25,.06), 0 16px 34px -12px rgba(33,30,25,.16), 0 0 0 1px var(--surface-border-strong);
  --e-glow:0 1px 2px rgba(33,30,25,.08), 0 10px 24px -14px rgba(46,90,140,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg-gradient); background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-14); line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .4s ease, color .4s ease;
}
/* 텍스트 선택 — OS 기본 형광 파랑 대신 브랜드 톤 (프리미엄 디테일) */
::selection { background: var(--brand-ring); color: #fff; }
/* 전역 스크롤바 — 모든 스크롤 영역 일관 (얇은 오버레이). Firefox + WebKit */
* { scrollbar-width: thin; scrollbar-color: var(--n-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n-4); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--n-5); background-clip: padding-box; }
/* 테마 전환 시 표면·테두리·텍스트가 부드럽게 */
.panel, .gcard, .bcol, #topbar, #detail, .dd-btn, .dd-pop, #hintbar, .count-chip,
#asst-panel, #asst-toggle, .switcher, .modal, .tier-badge { transition: background .35s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }

/* ── 격자 뷰 ──────────────────────────────────────── */
#gridview { position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0;
  overflow-y: auto; overflow-x: hidden; padding: var(--sp-6);
  padding-left: calc(var(--panel-w) + var(--gutter)*2);
  padding-right: calc(var(--panel-w) + var(--gutter)*2);
  scroll-behavior: smooth; }
#gridview[aria-hidden="true"] { display: none; }
#gridview::-webkit-scrollbar { width: 10px; }
#gridview::-webkit-scrollbar-thumb { background: var(--n-4); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
#gridview::-webkit-scrollbar-thumb:hover { background: var(--n-5); background-clip: padding-box; }
/* 격자 상단 툴바 — 큐레이션 안내 + 정렬/필터 */
.grid-toolbar { max-width: 1360px; margin: 0 auto var(--sp-5); display: flex; align-items: flex-end;
  justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--surface-border);
  animation: grid-in .4s cubic-bezier(.2,.8,.2,1); }
/* eyebrow — 제목 위 작은 대문자 라벨 (에디토리얼 위계, Stripe/Linear 계열) */
.gt-eyebrow { display: block; font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--accent-text);
  letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.gt-title { display: block; font-size: var(--fs-33); font-weight: var(--fw-semi); color: var(--text-hi); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }
.gt-sub { display: block; font-size: var(--fs-13); color: var(--text-mut); margin-top: 6px; max-width: 620px; line-height: var(--lh-snug); }
.grid-toolbar-r { display: flex; align-items: center; gap: var(--sp-2); }
.gt-toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--r-sm);
  background: var(--n-2); border: 1px solid var(--surface-border); color: var(--text-mut);
  font-size: var(--fs-13); font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap; }
.gt-toggle .icon { width: 15px; height: 15px; }
.gt-toggle:hover { color: var(--text-hi); border-color: var(--surface-border-strong); }
.gt-toggle.on { background: color-mix(in srgb, #ffd23d 16%, transparent); border-color: rgba(255,210,61,.45); color: var(--gold-text); }
.gt-toggle.special.on { background: var(--brand-soft); border-color: var(--brand-ring); color: var(--accent-text); }
.gt-seg { display: inline-flex; padding: 3px; background: var(--n-2); border: 1px solid var(--surface-border); border-radius: var(--r-sm); }
.gt-seg button { background: transparent; border: 0; color: var(--text-mut); padding: 5px 12px; border-radius: var(--r-xs);
  font-size: var(--fs-12); font-weight: var(--fw-med); font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap; }
.gt-seg button.active { background: var(--n-4); color: var(--text-hi); box-shadow: inset 0 0 0 1px var(--surface-border-strong); }

.grid-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--sp-5); max-width: 1360px; margin: 0 auto; padding-bottom: 96px;
  animation: grid-in .5s cubic-bezier(.2,.8,.2,1); }
@keyframes grid-in { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
/* 격자 무결과 — board-empty 공용 스타일 사용, 상단 여백만 격자 맥락에 맞춤 */
.grid-empty { padding-top: 16vh; }

.gcard { position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  --mx:50%; --my:50%; transform: translateZ(0);
  background: var(--surface-2); border: 1px solid var(--surface-border);
  box-shadow: var(--e-1);
  transition: transform var(--dur-std) var(--ease-out), box-shadow var(--dur-std) var(--ease-out), border-color var(--dur-std) var(--ease-out);
  display: flex; flex-direction: column; }
/* 산업색 좌상단 라이닝 — 온기, 강도 낮춤 (발광 아님) */
.gcard::before { content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ind) 26%, transparent), transparent 52%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity var(--dur-std) var(--ease-out); pointer-events:none; z-index:2; }
/* 커서 광원 — 마우스 추종 재질 하이라이트 (repaint 최소, layout 0) */
.gcard::after { content:""; position:absolute; inset:0; border-radius:inherit; z-index:2;
  pointer-events:none; opacity:0; transition:opacity var(--dur-std) var(--ease-out);
  background: radial-gradient(var(--glow-radius) circle at var(--mx) var(--my),
    color-mix(in srgb, var(--ind, var(--brand)) 14%, transparent), transparent 46%); }
.gcard:hover { transform: translateY(var(--card-lift)) scale(1.012); box-shadow: var(--e-3);
  border-color: var(--surface-border-strong); }
.gcard:hover::before { opacity:1; }
.gcard:hover::after { opacity:1; }
.gcard-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background:
  linear-gradient(135deg, color-mix(in srgb, var(--ind) 22%, var(--n-1)), var(--n-1)); }
/* 로딩 셔머 — 썸네일 이미지가 로드되기 전 은은한 스윕. .loaded면 사라짐 */
.gcard-thumb::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  background-size: 200% 100%; animation: thumb-shimmer 1.4s var(--ease-in-out) infinite;
  opacity:1; transition: opacity var(--dur-std) var(--ease-out); }
.gcard-thumb.loaded::before, .gcard-thumb.noimg::before { opacity:0; animation:none; }
@keyframes thumb-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
.gcard-thumb img { width:100%; height:100%; object-fit: cover; display:block; position:relative; z-index:2;
  opacity:0; transition: opacity var(--dur-std) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.gcard-thumb.loaded img { opacity:1; }
.gcard:hover .gcard-thumb img { transform: scale(1.06); }
.gcard-fallback { position:absolute; inset:0; display:none; place-items:center; color: color-mix(in srgb, var(--ind) 80%, #fff);
  font-weight: var(--fw-semi); font-size: var(--fs-14); letter-spacing:.02em; }
.gcard-thumb.noimg { display:block; } .gcard-thumb.noimg img { display:none; } .gcard-thumb.noimg .gcard-fallback { display:grid; }
/* 큐레이션 등급 배지 (S/A/B/C) + 인기 배지 (자동수집분) */
.tier-badge, .pop-badge { position:absolute; top: var(--sp-2); left: var(--sp-2); z-index:3;
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: var(--fw-semi); letter-spacing:.02em; cursor:help;
  background: var(--overlay-chip-bg); color: var(--overlay-chip-text); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--surface-border-strong); box-shadow: var(--e-1); }
.tier-badge small { font-size: var(--fs-11); font-weight: var(--fw-med); opacity:.9; }
.tier-badge.tier-S { color: var(--gold-text); border-color: rgba(255,210,61,.5); box-shadow: inset 0 0 0 1px rgba(255,210,61,.28), var(--e-1); }
.tier-badge.tier-A { color: var(--accent-text); border-color: rgba(61,139,255,.5); }
.tier-badge.tier-B { color: var(--overlay-chip-text); }
.tier-badge.tier-C { color: var(--text-mut); opacity:.9; }
/* 인기 배지 — 등급과 시각적으로 구분(중립 톤, 반짝이 아이콘 작게) */
.pop-badge { color: var(--overlay-chip-text); opacity:.92; font-weight: var(--fw-med); }
.pop-badge .icon { width:13px; height:13px; opacity:.75; }
/* C·B 등급 카드는 살짝 톤다운 (S·A가 시선을 먼저 받게) */
.gcard:has(.tier-C) { opacity:.82; } .gcard:has(.tier-C):hover { opacity:1; }

.gcard-open { position:absolute; top: var(--sp-2); right: var(--sp-2); width:34px; height:34px; border-radius: var(--r-sm);
  display:grid; place-items:center; background: rgba(10,14,23,.72); backdrop-filter: blur(8px);
  border:1px solid var(--surface-border-strong); color:#fff; cursor:pointer; opacity:0; transform: translateY(-4px);
  transition: opacity .2s, transform .2s, background .15s; z-index:3; }
.gcard-open .icon { width:16px; height:16px; }
.gcard:hover .gcard-open { opacity:1; transform:none; }
.gcard-open:hover { background: var(--brand); border-color: transparent; }
.gcard-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display:flex; flex-direction:column; gap: 5px; }
.gcard-title { margin:0; font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--text-hi);
  line-height: var(--lh-tight); letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height: 2.5em; }
.gcard-meta { display:flex; align-items:center; gap:6px; font-size: var(--fs-12); color: var(--text-mut);
  white-space:nowrap; overflow:hidden; }
.gcard-dot { width:8px; height:8px; border-radius:50%; background: var(--ind); flex:0 0 auto; }
.gcard-sep { color: var(--text-dim); flex:0 0 auto; }
/* 산업·페르소나 메타: 한 줄 유지, 넘치면 페르소나만 말줄임 (한글 글자 단위 줄바꿈 방지) */
.gcard-meta .gcard-persona { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.gcard-meta .gcard-ind { flex:0 0 auto; }

.icon { width:16px; height:16px; stroke:currentColor; stroke-width:1.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.eyebrow { font-size: var(--fs-11); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-label); text-transform: none; color: var(--text-dim); }

:where(button,a,input,select,[tabindex]):focus-visible { outline:none; box-shadow: var(--e-focus); border-radius: var(--r-sm); }

/* ── 상단바 ────────────────────────────────────────── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-5);
  background: var(--surface-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--surface-border); z-index: 40;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.brand { font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--text-hi);
  letter-spacing: var(--tracking-tight); display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.brand::before { content:""; width:7px; height:7px; border-radius:2px; background: var(--brand); }
.brand b { color: var(--text-hi); font-weight: var(--fw-semi); }
/* DEMO 배지 — 공개 데모임을 명시 (data-demo 모드에서 applyIdentity가 삽입) */
.demo-badge { font-size:10px; font-weight:var(--fw-bold); letter-spacing:.12em; color:var(--accent-text);
  padding:2px 7px; border-radius:var(--r-xs); background:var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-ring); cursor:help; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.count-chip { font-size: var(--fs-12); color: var(--text-mut); font-variant-numeric: tabular-nums;
  background: var(--n-1); border: 1px solid var(--surface-border);
  padding: 4px 11px; border-radius: var(--r-pill); }
/* 아이콘 버튼 (테마 토글 등) */
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  background: var(--n-1); border: 1px solid var(--surface-border); border-radius: var(--r-sm);
  color: var(--text-mut); transition: color .15s, background .15s, border-color .15s, transform .12s; }
.icon-btn .icon { width: 17px; height: 17px; }
.icon-btn:hover { color: var(--text-hi); background: var(--n-2); border-color: var(--surface-border-strong); }
.icon-btn:active { transform: scale(.94); }

/* segmented control 스위처 — 아이콘 + 라벨, 활성 pill 글라이드 */
.switcher { display: inline-flex; gap: 1px; padding: 4px;
  background: linear-gradient(180deg, var(--n-2), var(--n-1)); border: 1px solid var(--surface-border);
  border-radius: var(--r-md); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.switcher button { position: relative; display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 0; color: var(--text-mut); padding: 7px 14px; border-radius: var(--r-sm);
  font-size: var(--fs-13); font-weight: var(--fw-med); font-family: inherit; letter-spacing: -.01em;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease; cursor: pointer; white-space: nowrap; }
.switcher button .icon { width: 16px; height: 16px; opacity: .85; transition: opacity .18s, transform .18s, stroke .18s; }
.switcher button:hover { color: var(--text-hi); }
.switcher button:hover .icon { opacity: 1; }
.switcher button.active { color: var(--text-hi);
  background: linear-gradient(180deg, var(--n-4), var(--n-3));
  box-shadow: inset 0 0 0 1px var(--surface-border-strong), 0 2px 6px -1px rgba(0,0,0,.45); }
.switcher button.active .icon { opacity: 1; color: var(--brand); transform: scale(1.06); }
@media (max-width: 1180px) { .switcher button span { display: none; } .switcher button { padding: 8px 11px; } }

/* AE 서명 */
.signature { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.28;
  border-left: 1px solid var(--surface-border); padding-left: var(--sp-4); }
.sig-name { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--text-hi); }
.sig-role { font-size: var(--fs-11); color: var(--text-mut); }
.sig-mail { font-size: var(--fs-11); color: var(--brand); text-decoration: none; }
.sig-mail:hover { text-decoration: underline; }
@media (max-width: 1000px) { .signature { display: none; } }

/* ── 사이드 패널 ──────────────────────────────────── */
aside { position: fixed; top: calc(var(--topbar-h) + var(--gutter)); z-index: 30; width: var(--panel-w);
  display: flex; flex-direction: column; gap: var(--gutter); max-height: calc(100vh - var(--topbar-h) - var(--gutter)*2); }
#left { left: var(--gutter); }
#right { right: var(--gutter); }
.panel {
  position: relative; background: var(--surface-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--surface-border); border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--e-2), inset 0 1px 0 rgba(255,255,255,.05);
}
/* 글래스 상단 sheen — 유리 질감 (테마별 강도) */
.panel::after { content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: var(--glass-sheen); opacity:.9; }
.panel > * { position: relative; z-index: 1; }
.panel h4 { margin: 0 0 var(--sp-3); display: inline-flex; align-items: center; gap: 6px; }
.panel h4 .icon { width: 13px; height: 13px; color: var(--text-dim); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.panel-head h4 { margin: 0; }
.panel-head-btns { display: flex; gap: 5px; }
.panel-desc { font-size: var(--fs-12); color: var(--text-mut); margin: 0 0 var(--sp-3); line-height: var(--lh-snug); }

/* 필터 폼 — 검색 아이콘 + 정제된 셀렉트 */
.filter-search { position: relative; margin-bottom: var(--sp-3); }
.filter-search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-dim); pointer-events: none; transition: color .15s; }
.filter-search:focus-within .icon { color: var(--brand); }
#f-q, .facet select {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--n-1); border: 1px solid var(--surface-border);
  color: var(--text-hi); font-size: var(--fs-13); font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#f-q { padding-left: 34px; }
#f-q::placeholder { color: var(--text-dim); }
#f-q:hover, .facet select:hover { border-color: var(--surface-border-strong); background: var(--n-2); }
#f-q:focus, .facet select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--n-2); }
.facet { margin-bottom: var(--sp-2); }

/* ── 커스텀 드롭다운 (네이티브 select 대체 · 상용 수준) ── */
.dd { position: relative; }
/* 열린 드롭다운의 .dd 자체를 패널 내 뒤 형제(활성필터 칩·범례)보다 위로 올림.
   (팝업은 .dd 안 position:absolute라, z-index 없으면 소스순서상 뒤 형제가 팝업을 덮음) */
.dd.open { z-index: 70; }
/* 드롭다운 열린 패널을 형제 패널(범례) 위로 — 글래스 backdrop이 만드는 stacking 겹침 방지 */
.panel:has(.dd.open) { z-index: 50; }
#left, #right { z-index: 30; }
#left:has(.dd.open) { z-index: 55; }
.dd-btn { width: 100%; height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
  border-radius: var(--r-sm); background: var(--n-1); border: 1px solid var(--surface-border);
  color: var(--text-hi); font-family: inherit; font-size: var(--fs-13); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.dd-btn:hover { border-color: var(--surface-border-strong); background: var(--n-2); }
.dd.open .dd-btn { border-color: var(--brand-ring); box-shadow: inset 0 0 0 1px var(--brand-ring); background: var(--n-2); }
.dd-val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dd-val span { overflow: hidden; text-overflow: ellipsis; }
.dd-ph { color: var(--text-mut); }
.dd-btn.has-val .dd-ph { color: var(--text-hi); }
.dd-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dd-caret { width: 15px; height: 15px; color: var(--text-mut); flex: 0 0 auto; transition: transform .2s cubic-bezier(.25,1,.5,1); }
.dd.open .dd-caret { transform: rotate(180deg); }
.dd-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; padding: 6px;
  background: var(--dd-pop-bg); border: 1px solid var(--surface-border-strong); border-radius: var(--r-md);
  box-shadow: 0 1px 1px rgba(0,0,0,.28), 0 8px 16px -4px rgba(0,0,0,.4), 0 24px 32px -8px rgba(0,0,0,.5);
  animation: dd-in .16s cubic-bezier(.25,1,.5,1); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dd-search { display: flex; align-items: center; gap: 7px; padding: 0 8px; margin-bottom: 4px;
  height: 34px; border-radius: var(--r-xs); background: var(--n-1); border: 1px solid var(--surface-border); }
.dd-search .icon { width: 14px; height: 14px; color: var(--text-dim); flex: 0 0 auto; }
.dd-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text-hi); font-family: inherit; font-size: var(--fs-12); }
.dd-search input::placeholder { color: var(--text-dim); }
.dd-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.dd-list::-webkit-scrollbar { width: 8px; } .dd-list::-webkit-scrollbar-thumb { background: var(--n-4); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.dd-opt { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 30px; position: relative;
  border: 0; background: none; border-radius: var(--r-xs); color: var(--text); font-family: inherit; font-size: var(--fs-13);
  cursor: pointer; text-align: left; transition: background .12s, color .12s; }
.dd-opt:hover { background: rgba(255,255,255,.06); color: var(--text-hi); }
.dd-opt.sel { color: var(--text-hi); }
.dd-opt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-count { color: var(--text-dim); font-size: var(--fs-11); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.dd-check { position: absolute; left: 8px; width: 15px; height: 15px; color: var(--brand); opacity: 0; }
.dd-opt.sel .dd-check { opacity: 1; }
.dd-empty { padding: 12px; text-align: center; color: var(--text-dim); font-size: var(--fs-12); }

/* ── 활성 필터 칩 ── */
.active-filters { display: none; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--surface-border); }
.active-filters.has { display: flex; }
.fchip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px 0 10px; border-radius: var(--r-pill);
  background: var(--brand-soft); border: 1px solid transparent; color: var(--accent-text); font-family: inherit; font-size: var(--fs-12); cursor: pointer;
  transition: background .14s; }
.fchip:hover { background: color-mix(in srgb, var(--brand) 24%, transparent); }
.fchip .icon { width: 13px; height: 13px; opacity: .8; }
.fchip-clear { height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: transparent; border: 0;
  color: var(--text-mut); font-family: inherit; font-size: var(--fs-12); cursor: pointer; }
.fchip-clear:hover { color: var(--text-hi); text-decoration: underline; }
#btn-reset { flex: 0 0 auto; }

/* 버튼 시스템 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px;
  border-radius: var(--r-sm); font-size: var(--fs-13); font-weight: var(--fw-med); font-family: inherit;
  cursor:pointer; border:1px solid var(--surface-border); background: var(--n-3); color: var(--text-hi);
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s; }
.btn:hover { background: var(--n-4); border-color: var(--surface-border-strong); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); border-color: transparent; color:#fff; box-shadow: var(--e-glow); }
.btn.primary:hover { background: var(--brand-hover); }
.btn.primary:active { background: var(--brand-active); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-mut); }
.btn.ghost:hover { background: var(--n-3); color: var(--text-hi); }
.btn.danger { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.btn.danger:hover { background: var(--danger); border-color: transparent; color: #fff; }
.btn.sm { height:28px; padding:0 10px; font-size: var(--fs-12); }
.btn.sm .icon { width:14px; height:14px; }
.btn:disabled { opacity: .4; pointer-events: none; }

/* 산업 색 범례 */
/* 범례 패널 — 남는 세로 공간을 채우도록 신축(고정 210px 미니스크롤 제거) */
.legend-panel { padding-bottom: var(--sp-3); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#legend { display:flex; flex-direction:column; gap:2px; flex: 1 1 auto; min-height: 0; overflow-y:auto; }
.legend-row { display:flex; align-items:center; gap:var(--sp-2); width:100%;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  padding:5px 8px; cursor:pointer; color:var(--text); font-size:var(--fs-12); font-family:inherit; text-align:left;
  transition: background .14s, border-color .14s; }
.legend-row:hover { background: rgba(255,255,255,.05); }
.legend-row.active { background: var(--brand-soft); border-color: transparent; color:var(--text-hi); }
.legend-row span:not(.legend-count) { flex: 1; }
.legend-chip { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.legend-count { color: var(--text-dim); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }
.legend-row.active .legend-count { color: var(--accent-text); }

/* 컬렉션 */
#collections { overflow-y: auto; }
.empty { font-size: var(--fs-12); color: var(--text-mut); text-align:center; padding: var(--sp-5) var(--sp-2); line-height: var(--lh-normal); }
.coll { background: var(--n-2); border:1px solid var(--surface-border); border-radius: var(--r-md);
  padding: var(--sp-3); margin-bottom: var(--sp-2);
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.coll:hover { transform: translateY(-1px); box-shadow: var(--e-2); }
.coll.active { border-color: var(--brand); box-shadow: var(--e-glow); }
.coll-head { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); }
.coll-head b { font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--text-hi); }
.coll-count { background: var(--n-4); color: var(--text-hi); border-radius: var(--r-pill);
  padding:1px 8px; font-size: var(--fs-11); font-weight: var(--fw-med); }
.coll-cust { font-size: var(--fs-12); color: var(--brand); margin-top: 2px; }
.coll-items { margin: var(--sp-2) 0; display:flex; flex-direction:column; gap:2px; }
.ci { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2);
  font-size: var(--fs-12); color: var(--text-mut); padding: 2px 0; }
.ci span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-x { background:none; border:none; color: var(--text-dim); cursor:pointer; opacity:.6; display:grid; place-items:center; padding:2px; }
.ci-x .icon { width:13px; height:13px; }
.ci-x:hover { opacity:1; color: var(--danger); }
.coll-actions { display:flex; gap: var(--sp-1); flex-wrap: wrap; }

/* 하단 힌트 */
#hintbar { position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  background: var(--surface-3); border: 1px solid var(--surface-border); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: var(--fs-12); color: var(--text-mut); z-index: 30;
  backdrop-filter: blur(12px); box-shadow: var(--e-2);
  display:inline-flex; align-items:center; gap: var(--sp-2); opacity:.75; transition: opacity .2s; }
#hintbar:hover { opacity: 1; }
#hintbar::before { content:""; width:5px; height:5px; border-radius:50%; background: var(--brand); }

/* ── 상세 카드 ────────────────────────────────────── */
#detail { position: fixed; right: -460px; top: calc(var(--topbar-h) + var(--gutter)); width: 400px;
  background: var(--surface-2); border: 1px solid var(--surface-border-strong); border-radius: var(--r-lg);
  padding: var(--sp-5); z-index: 35; transition: right .32s cubic-bezier(.2,.8,.2,1);
  backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--e-3); max-height: calc(100vh - var(--topbar-h) - var(--gutter)*2); overflow-y:auto; }
#detail.open { right: calc(var(--panel-w) + var(--gutter)*2); }
#detail > * { opacity:0; animation: detail-in .34s cubic-bezier(.2,.8,.2,1) forwards; }
#detail > *:nth-child(2){animation-delay:.04s} #detail > *:nth-child(3){animation-delay:.07s}
#detail > *:nth-child(4){animation-delay:.09s} #detail .detail-actions{animation-delay:.12s}
@keyframes detail-in { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.detail-thumb { position:relative; width:100%; aspect-ratio: 16/10; border-radius: var(--r-md); overflow:hidden;
  background: var(--n-1); border:1px solid var(--surface-border); margin-bottom: var(--sp-4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.detail-thumb img { width:100%; height:100%; object-fit: cover; display:block; }
.detail-thumb-fallback { position:absolute; inset:0; display:grid; place-items:center; color:var(--text-dim); font-size:var(--fs-12); z-index:-1; }
.detail-thumb.noimg { display:none; }
#detail h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-18); font-weight: var(--fw-semi); line-height: var(--lh-tight); color: var(--text-hi); }
#detail p { color: var(--text); font-size: var(--fs-13); line-height: var(--lh-normal); margin: 0 0 var(--sp-2); }
.close-detail { position:sticky; top:0; margin-left:auto; margin-bottom:-30px; background: var(--surface-2); border:1px solid var(--surface-border-strong);
  color: var(--text-hi); cursor:pointer; width:32px; height:32px; border-radius: var(--r-sm); display:grid; place-items:center; z-index:5;
  box-shadow: var(--e-1); }
.close-detail:hover { color: var(--text-hi); background: var(--n-3); }
.badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom: var(--sp-3); }
.badges span { border-radius: var(--r-xs); padding: 3px 9px; font-size: var(--fs-11); font-weight: var(--fw-med); }
.badge-industry { background: color-mix(in srgb, var(--ind, var(--brand)) 18%, transparent);
  color: var(--ind, var(--brand)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ind, var(--brand)) 32%, transparent); }
.badge-persona { background: transparent; color: var(--text-mut); box-shadow: inset 0 0 0 1px var(--surface-border-strong); }
.badge-tier { font-weight: var(--fw-semi); letter-spacing: .02em; }
.badge-tier.tier-S { background: color-mix(in srgb, #ffd23d 18%, transparent); color: var(--gold-text); box-shadow: inset 0 0 0 1px rgba(255,210,61,.4); }
.badge-tier.tier-A { background: var(--brand-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--brand-ring); }
.badge-tier.tier-B { background: var(--n-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--surface-border-strong); }
.badge-tier.tier-C { background: transparent; color: var(--text-mut); box-shadow: inset 0 0 0 1px var(--surface-border); }
/* 인기 배지 (상세) — 자동수집분 */
.badge-pop { background: var(--n-3); color: var(--text-mut); box-shadow: inset 0 0 0 1px var(--surface-border-strong); display:inline-flex; align-items:center; gap:4px; }
.badge-pop .icon { width:12px; height:12px; opacity:.7; }
.detail-verdict.pop .verdict-label { color: var(--text-mut); }
/* 큐레이터 코멘트 */
.detail-verdict { background: linear-gradient(180deg, var(--brand-soft), transparent);
  border: 1px solid var(--brand-soft); border-radius: var(--r-md); padding: var(--sp-3); margin: 0 0 var(--sp-3); }
.verdict-label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-11); font-weight: var(--fw-semi);
  color: var(--brand); letter-spacing: var(--tracking-label); margin-bottom: 5px; }
.verdict-label .icon { width: 13px; height: 13px; }
.detail-verdict p { margin: 0; font-size: var(--fs-12); color: var(--text-hi); line-height: var(--lh-snug); }
.tags { color: var(--text-dim); font-size: var(--fs-12); margin: var(--sp-2) 0; }
/* 기능 하이라이트 칩 (이 사례로 증명하는 Tableau 기능) */
.detail-feats { margin: var(--sp-3) 0; }
.feat-label { display:block; font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--text-mut); letter-spacing: var(--tracking-label); margin-bottom: 6px; }
.feat-chips { display:flex; flex-wrap:wrap; gap:5px; }
.feat-chip { font-size: var(--fs-11); padding: 3px 9px; border-radius: var(--r-pill); cursor: help;
  background: color-mix(in srgb, var(--ind, var(--brand)) 14%, transparent);
  color: color-mix(in srgb, var(--ind, var(--brand)) 75%, var(--text-hi));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ind, var(--brand)) 26%, transparent); }

.detail-actions { display:flex; flex-direction:column; gap: var(--sp-2); margin-top: var(--sp-4); }

/* 세일즈 플레이북 */
.detail-playbook { margin-top: var(--sp-3); border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(180deg, var(--brand-soft), transparent); border: 1px solid var(--brand-soft); }
.pb-head { display:flex; align-items:center; gap:6px; padding: var(--sp-3) var(--sp-3) 0; color: var(--brand); }
.pb-head .icon { width:15px; height:15px; }
.pb-head b { font-size: var(--fs-13); }
.pb-tag { margin-left:auto; font-size: var(--fs-11); color: var(--text-dim); font-weight: var(--fw-reg); }
.pb-body { padding: var(--sp-2) var(--sp-3) var(--sp-3); font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--text); }
.pb-body b { color: var(--text-hi); }
.pb-body ol, .pb-body ul { margin: 6px 0; padding-left: 1.2em; }
.pb-body li { margin: 4px 0; }
.pb-body p { margin: 6px 0; }
.pb-hint { color: var(--text-dim); font-size: var(--fs-11); margin-top: var(--sp-2); }

/* ── 리포트 오버레이 (앱 안 전체화면 — window.open 대체) ── */
#report-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: rgba(6,9,16,.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
#report-overlay.open { opacity: 1; }
#report-overlay .ro-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); background: var(--surface-2); border-bottom: 1px solid var(--surface-border-strong); }
#report-overlay .ro-title { font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#report-overlay .ro-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
#report-overlay .ro-actions button { font-family: inherit; font-size: var(--fs-13); font-weight: var(--fw-med);
  padding: 8px 16px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--surface-border-strong);
  background: var(--n-2); color: var(--text); transition: background .14s, border-color .14s; }
#report-overlay .ro-actions button:hover { background: var(--n-3); }
#report-overlay .ro-print { background: var(--brand) !important; color: #fff !important; border-color: transparent !important; }
#report-overlay .ro-print:hover { filter: brightness(1.08); }
#report-overlay .ro-frame { flex: 1; width: 100%; border: none; background: #f4f6fb; }

/* ── 임베드 오버레이 ─────────────────────────────── */
/* 발표 오버레이 — 고객 시연 화면. 완전 불투명(뒤 격자 비침 방지). */
#viz-overlay { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column;
  background: #05070E; }
#viz-overlay.open { display: flex; }
.viz-topbar { display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--surface-border); }
.viz-collname { color: var(--brand); font-weight: var(--fw-semi); font-size: var(--fs-14); }
.viz-title { font-size: var(--fs-14); color: var(--text-hi); }
.viz-counter { color: var(--text-mut); font-size: var(--fs-13); }
#viz-overlay:not(.present) .viz-collname,
#viz-overlay:not(.present) .viz-counter,
#viz-overlay:not(.present) .viz-prev,
#viz-overlay:not(.present) .viz-next { display:none; }
.viz-actions { margin-left:auto; display:flex; gap: var(--sp-2); align-items:center; }
.viz-actions button, .viz-actions a { background: var(--n-2); color: var(--text); border:1px solid var(--surface-border);
  border-radius: var(--r-sm); width:36px; height:36px; display:grid; place-items:center; cursor:pointer; text-decoration:none;
  transition: background .15s; }
.viz-actions button:hover, .viz-actions a:hover { background: var(--n-4); color: var(--text-hi); }
.viz-stage { flex:1; padding: var(--sp-3) var(--sp-5) var(--sp-4); }
.viz-stage tableau-viz { border-radius: var(--r-sm); overflow:hidden; }
.viz-fallback { display:grid; place-items:center; height:100%; color: var(--text-mut); text-align:center; line-height:2; }
.viz-fallback a { color: var(--brand); }
.viz-sign { text-align:center; padding: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-11); color: var(--text-dim); letter-spacing:.3px; }

/* ── 자연어 비서 ─────────────────────────────────── */
#assistant { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 60; }
#asst-toggle { width:52px; height:52px; border-radius: var(--r-pill); display:grid; place-items:center;
  background: var(--surface-2); border:1px solid var(--brand-soft); color: var(--brand); box-shadow: var(--e-3); cursor:pointer;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, background .16s; }
#asst-toggle .icon { width:22px; height:22px; }
#asst-toggle:hover { transform: scale(1.06); background: var(--n-3); border-color: var(--brand-ring); box-shadow: var(--e-3); }
#asst-toggle:active { transform: scale(.98); }
#asst-panel { position:fixed; bottom:84px; right: var(--sp-5); width:min(480px, 92vw); height:min(720px, calc(100vh - var(--topbar-h) - 108px)); display:none; flex-direction:column; overflow:hidden;
  background: var(--surface-2); border:1px solid var(--surface-border-strong); border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--e-3); }
#asst-panel.open { display:flex; }
.asst-head { display:flex; align-items:center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--surface-border); }
.asst-head-t { display:flex; flex-direction:column; }
.asst-head b { font-size: var(--fs-14); color: var(--text-hi); }
.asst-head span { font-size: var(--fs-11); color: var(--text-mut); }
.asst-head .asst-textbtn { display:inline-flex; align-items:center; gap:4px; background: var(--n-2); border:1px solid var(--surface-border);
  color:var(--text); cursor:pointer; padding:5px 10px; border-radius: var(--r-sm); font-family:inherit; font-size: var(--fs-12); font-weight: var(--fw-med); transition: background .14s, color .14s, border-color .14s; }
.asst-head .asst-textbtn:hover { background: var(--n-3); color: var(--text-hi); border-color: var(--surface-border-strong); }
.asst-head .asst-textbtn .icon { width:14px; height:14px; }
.asst-head #asst-back { margin-right: 4px; }
.asst-head #asst-new { margin-left:auto; }
.asst-head .asst-icon { background:none; border:none; color:var(--text-mut); cursor:pointer; display:grid; place-items:center; padding:5px; border-radius: var(--r-xs); transition: background .14s, color .14s; }
.asst-head .asst-icon:hover { background: var(--n-3); color: var(--text-hi); }
.asst-head .asst-icon .icon { width:16px; height:16px; }
.asst-head #asst-new { margin-left:auto; }
.asst-head #asst-back { margin-right: 2px; }

/* hidden 속성은 display를 명시한 flex 요소에서도 확실히 숨김 (대화↔목록 겹침 방지) */
#asst-panel [hidden] { display:none !important; }

/* 대화방 목록 (카카오톡식) — "목록" 버튼으로만 진입하는 별도 화면. 채팅창 전체를 덮음 */
#asst-list { flex:1; overflow-y:auto; padding: var(--sp-3); display:flex; flex-direction:column; gap: var(--sp-2); }
.asst-newbig { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; height:44px; border-radius: var(--r-md);
  background: var(--brand-grad); color:#fff; border:none; font-family:inherit; font-size: var(--fs-13); font-weight: var(--fw-med); cursor:pointer;
  box-shadow: var(--e-glow); transition: filter .15s; }
.asst-newbig:hover { filter: brightness(1.08); }
.asst-newbig .icon { width:16px; height:16px; }
.chatrow { display:flex; align-items:center; gap:var(--sp-2); background: var(--n-2); border:1px solid var(--surface-border);
  border-radius: var(--r-md); padding: var(--sp-3); cursor:pointer; transition: background .14s, border-color .14s, transform .1s; }
.chatrow:hover { background: var(--n-3); border-color: var(--surface-border-strong); }
.chatrow:active { transform: scale(.99); }
.chatrow-body { flex:1; min-width:0; }
.chatrow-title { font-size: var(--fs-13); font-weight: var(--fw-med); color: var(--text-hi); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatrow-meta { font-size: var(--fs-11); color: var(--text-mut); margin-top: 2px; }
.chatrow-del { flex:0 0 auto; background:none; border:none; color: var(--text-dim); cursor:pointer; opacity:0; display:grid; place-items:center; padding:4px; border-radius: var(--r-xs); transition: opacity .14s, color .14s, background .14s; }
.chatrow:hover .chatrow-del { opacity:.7; }
.chatrow-del:hover { opacity:1; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.chatrow-del .icon { width:14px; height:14px; }
/* 채팅 빈 상태 — board-empty 공용 스타일 재사용, 패널 맥락에 맞춰 상단 여백 축소 */
.asst-empty-state { padding: var(--sp-7) var(--sp-4) var(--sp-5); }
.asst-empty-state b { font-size: var(--fs-14); }
.asst-empty-state span { max-width: 300px; }
#asst-log { flex:1; overflow-y:auto; padding: var(--sp-3); display:flex; flex-direction:column; gap: var(--sp-3); }
.asst-msg { font-size: var(--fs-13); line-height: var(--lh-snug); padding: 9px 12px; border-radius: var(--r-md); max-width: 92%; }
.asst-msg.bot { background: var(--n-2); color: var(--text); align-self: flex-start; }
.asst-msg.user { background: var(--brand); color:#fff; align-self: flex-end; }
.asst-msg i { color: var(--brand); font-style: normal; }
.asst-recall { display:flex; align-items:center; gap:6px; font-size: var(--fs-11); color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent); border: 1px solid color-mix(in srgb, var(--success) 26%, transparent);
  border-radius: var(--r-sm); padding: 6px 9px; margin-bottom: var(--sp-2); line-height: var(--lh-snug); }
.asst-recall .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.asst-recall b { color: var(--text-hi); }
.asst-chips { display:flex; gap:5px; flex-wrap:wrap; margin-bottom: var(--sp-2); }
.asst-chips span { background: var(--brand-soft); color: var(--brand); border-radius: var(--r-xs); padding: 2px 8px; font-size: var(--fs-11); }
/* 전략 브리핑 */
.asst-strat { background: linear-gradient(180deg, var(--brand-soft), transparent);
  border:1px solid var(--brand-soft); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.asst-strat-head { display:flex; align-items:center; gap:6px; color: var(--brand); margin-bottom: 6px; }
.asst-strat-head .icon { width:15px; height:15px; }
.asst-strat-head b { font-size: var(--fs-13); }
.asst-strat-lead { margin:0 0 var(--sp-2); font-size: var(--fs-12); color: var(--text-hi); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.asst-strat-situation { margin:0 0 var(--sp-2); font-size: var(--fs-12); color: var(--text); line-height: var(--lh-snug);
  padding: 8px 11px; background: var(--brand-soft); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--surface-border); }
.asst-qa li { margin: 5px 0; }
.asst-qa b { color: var(--text-hi); }
.asst-strat-sec { margin-top: var(--sp-2); }
.asst-strat-label { font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--text-mut);
  letter-spacing: var(--tracking-label); display:block; margin-bottom: 3px; }
.asst-strat-sec ul, .asst-strat-sec ol { margin:0; padding-left: 1.15em; }
.asst-strat-sec li { font-size: var(--fs-12); color: var(--text); line-height: var(--lh-snug); margin: 2px 0; }
.asst-cards-label { font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--text-mut); letter-spacing: var(--tracking-label); margin: var(--sp-3) 0 var(--sp-2); }
.asst-cards { display:flex; flex-direction:column; gap: var(--sp-2); }
.asst-card { display:flex; gap: var(--sp-2); background: var(--n-2); border:1px solid var(--surface-border); border-radius: var(--r-md);
  padding: var(--sp-2); cursor:pointer; overflow:hidden;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.asst-card:hover { transform: translateY(-1px); border-color: var(--surface-border-strong); box-shadow: var(--e-2); }
/* 썸네일 — 좌측 컬러바(AI 신호) 제거. 산업색은 메타 점으로만. 로딩 전/실패 시 산업색 미묘한 그라데이션 */
.asst-card-thumb { width:72px; height:52px; flex:0 0 auto; border-radius: var(--r-xs); overflow:hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ind, var(--brand)) 22%, var(--n-1)), var(--n-1));
  box-shadow: inset 0 0 0 1px var(--surface-border); }
.asst-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.asst-card-body { min-width:0; flex:1; }
.asst-card-t { font-size: var(--fs-13); font-weight: var(--fw-med); color: var(--text-hi); }
.asst-tier { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 5px;
  font-size: 10px; font-weight: var(--fw-semi); margin-right: 6px; vertical-align: 1px; }
.asst-tier.tier-S { background: rgba(255,210,61,.2); color: var(--gold-text); }
.asst-tier.tier-A { background: var(--brand-soft); color: var(--accent-text); }
.asst-tier.tier-B { background: var(--n-4); color: var(--text); }
.asst-tier.tier-C { background: var(--n-3); color: var(--text-mut); }
/* 인기 배지 (채팅 카드) — 자동수집분 */
.asst-pop { display:inline-block; padding:0 6px; height:17px; line-height:17px; border-radius:5px; font-size:10px;
  font-weight: var(--fw-med); margin-right:6px; vertical-align:1px; background: var(--n-3); color: var(--text-mut); }
.asst-card-m { display:flex; align-items:center; gap:5px; font-size: var(--fs-11); color: var(--text-mut); margin: 2px 0; }
.asst-dot { width:7px; height:7px; border-radius:50%; background: var(--ind, var(--brand)); flex:0 0 auto; }
/* 매칭 근거 — 변별 신호(태그·고객사)만 작은 칩으로. 산업·페르소나는 위 메타에 이미 노출 */
.asst-card-why { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.asst-why-chip { font-size:10px; line-height:1.5; padding:1px 7px; border-radius: var(--r-pill);
  color: var(--text-mut); background: var(--n-3); box-shadow: inset 0 0 0 1px var(--surface-border); }
/* AI 전략 상담 (로컬 CLI 브릿지) */
.asst-consult { background: linear-gradient(180deg, rgba(94,106,210,.14), transparent); border: 1px solid var(--brand-soft); }
.asst-consult .asst-strat-head { display:flex; align-items:center; gap:6px; color: var(--brand); margin-bottom: 6px; }
.asst-consult .asst-strat-head .icon { width:15px; height:15px; }
.asst-consult-body { font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--text); }
.asst-consult-body b { color: var(--text-hi); font-weight: var(--fw-semi); }
.asst-consult-body ul { margin: 6px 0; padding-left: 1.15em; }
.asst-consult-body li { margin: 3px 0; }
.asst-typing { color: var(--text-mut); font-size: var(--fs-12); }
.asst-typing::after { content: "…"; animation: dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0%{opacity:.3} 50%{opacity:1} 100%{opacity:.3} }

.asst-actions { display:flex; gap:6px; margin-top: var(--sp-3); }
.asst-actions button { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  background: var(--n-3); color: var(--text-hi); border:1px solid var(--surface-border);
  border-radius: var(--r-sm); padding: 9px 8px; font-size: var(--fs-12); cursor:pointer; font-family:inherit; transition: background .14s; }
.asst-actions button:hover { background: var(--n-4); }
.asst-actions button:disabled { opacity:.6; pointer-events:none; }
.asst-actions .icon { width:14px; height:14px; }
.asst-savereport { color: var(--accent-text) !important; }
.asst-mkcoll { margin-top: var(--sp-3); width:100%; background: var(--n-3); color: var(--text-hi); border:1px solid var(--surface-border);
  border-radius: var(--r-sm); padding: 9px; font-size: var(--fs-12); cursor:pointer; font-family:inherit; }
.asst-mkcoll:hover { background: var(--n-4); }
.asst-input { display:flex; gap: var(--sp-2); padding: var(--sp-3); border-top:1px solid var(--surface-border); }
.asst-input input { flex:1; height:38px; padding:0 12px; border-radius: var(--r-sm); background: var(--n-1);
  border:1px solid var(--surface-border); color: var(--text-hi); font-size: var(--fs-13); font-family: inherit; }
.asst-input input::placeholder { color: var(--text-dim); }
.asst-input button { background: var(--brand); color:#fff; border:none; border-radius: var(--r-sm); width:44px; display:grid; place-items:center; cursor:pointer; }
.asst-input button:hover { background: var(--brand-hover); }

/* ── 모달 입력 (prompt 대체) ──────────────────────── */
.modal-backdrop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(4,7,14,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s ease; padding: var(--sp-4); }
.modal-backdrop.open { opacity: 1; }
.modal { width: min(420px, 92vw); background: var(--surface-2);
  border: 1px solid var(--surface-border-strong); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--e-3); position: relative;
  transform: translateY(12px) scale(.98); opacity: 0; transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .26s; }
.modal-backdrop.open .modal { transform: none; opacity: 1; }
.modal-x { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 30px; height: 30px;
  display: grid; place-items: center; background: var(--n-2); border: 1px solid var(--surface-border);
  border-radius: var(--r-sm); color: var(--text-mut); cursor: pointer; transition: background .15s, color .15s; }
.modal-x:hover { background: var(--n-3); color: var(--text-hi); }
.modal-title { margin: 0 0 var(--sp-2); font-size: var(--fs-18); font-weight: var(--fw-semi);
  color: var(--text-hi); letter-spacing: -.01em; }
.modal-desc { margin: 0 0 var(--sp-5); font-size: var(--fs-13); color: var(--text-mut); line-height: var(--lh-snug); }
.modal-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.modal-field { display: flex; flex-direction: column; gap: 6px; }
.modal-field span { font-size: var(--fs-12); font-weight: var(--fw-med); color: var(--text); }
.modal-field .req { color: var(--brand); font-style: normal; }
.modal-field input { height: 40px; padding: 0 13px; border-radius: var(--r-sm);
  background: var(--n-1); border: 1px solid var(--surface-border); color: var(--text-hi);
  font-size: var(--fs-14); font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s; }
.modal-field input::placeholder { color: var(--text-dim); }
.modal-field input:hover { border-color: var(--surface-border-strong); }
.modal-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--n-2); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.modal-actions .btn { height: 38px; padding: 0 18px; }

/* ── 토스트 ───────────────────────────────────────── */
#toast { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface-2); color: var(--text-hi); border:1px solid var(--surface-border-strong);
  padding: 10px 20px; border-radius: var(--r-pill); font-size: var(--fs-13); z-index: 200; opacity:0;
  transition: all .3s; pointer-events:none; box-shadow: var(--e-3); }
#toast.show { opacity:1; transform: translateX(-50%) translateY(0); }

/* ── 인트로 "First Light" (three.js 씬 + 브랜드 오버레이) ─── */
#intro { position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: #070b16; transition: opacity .9s cubic-bezier(.4,0,.2,1); will-change: opacity; }
#intro.done { opacity: 0; pointer-events: none; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 브랜드 워드: three 카드가 격자로 정렬되는 중앙에 겹쳐 등장 (opacity는 intro.js가 제어) */
.intro-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  text-align: center; z-index: 2; opacity: 0; pointer-events: none;
  text-shadow: 0 2px 40px rgba(7,11,22,.9), 0 0 18px rgba(7,11,22,.8); }
.intro-line { height:1px; width:min(520px,74vw); margin:0 auto 20px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.intro-word { margin:0; font:600 clamp(30px,5.4vw,56px)/1.1 var(--font-sans); color:#eef1f7; letter-spacing:.015em; }
.intro-word b { color: var(--accent); font-weight:600; }
.intro-sig { margin-top:16px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color: var(--text-mut); }

/* 확인 대화상자 */
.modal-confirm { width: min(400px, 92vw); }
.modal-confirm .modal-desc { margin-bottom: var(--sp-5); }

/* ── 컬렉션 정리 보드 (전체화면) ───────────────────── */
/* 보드는 자체가 컬렉션 관리 UI → 우측 사이드 패널 숨기고 전체 폭 사용 */
#gridview.board-mode { padding-left: calc(var(--panel-w) + var(--gutter)*2); padding-right: var(--sp-6); }
#gridview.board-mode ~ #right { display: none; }
.board-wrap { max-width: 1500px; margin: 0 auto; padding-bottom: 96px; animation: grid-in .5s cubic-bezier(.2,.8,.2,1); }
.board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--surface-border); }
.board-head-t h2 { margin: 0; font-size: var(--fs-22); font-weight: var(--fw-semi); color: var(--text-hi); letter-spacing: -.02em; }
.board-head-t p { margin: 4px 0 0; font-size: var(--fs-13); color: var(--text-mut); }
.board-new { height: 40px; }

.board-empty { text-align: center; padding: 14vh var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
/* 빈 상태 아이콘 — 은은한 앰비언트 후광 + 유리 타일 (Linear/Stripe 계열, 네온 아님) */
.board-empty-icon { position: relative; width: 72px; height: 72px; display: grid; place-items: center;
  border-radius: var(--r-lg); color: var(--brand);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 14%, transparent), color-mix(in srgb, var(--brand) 6%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--surface-border); }
.board-empty-icon::before { content:""; position:absolute; inset:-40px; border-radius:50%; z-index:-1;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%);
  animation: empty-breathe 4.5s var(--ease-in-out) infinite; }
@keyframes empty-breathe { 0%,100% { opacity:.5; transform:scale(.94); } 50% { opacity:.85; transform:scale(1.04); } }
.board-empty-icon .icon { width: 30px; height: 30px; }
.board-empty b { font-size: var(--fs-16); color: var(--text-hi); }
.board-empty span { font-size: var(--fs-13); color: var(--text-mut); max-width: 340px; line-height: var(--lh-normal); }
.board-empty .board-new { margin-top: var(--sp-2); }

/* 컬렉션 세트 = 카드 컬럼 (Kanban 느낌) */
.board-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-5); align-items: start; }
.bcol { background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--e-2); backdrop-filter: blur(20px) saturate(1.4);
  transition: border-color .18s, box-shadow .18s; }
.bcol.active { border-color: var(--brand); box-shadow: var(--e-glow); }
.bcol-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.bcol-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bcol-name, .bcol-cust { background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
  color: var(--text-hi); font-family: inherit; padding: 3px 6px; margin: -3px -6px; width: calc(100% + 12px);
  transition: background .15s, border-color .15s; }
.bcol-name { font-size: var(--fs-16); font-weight: var(--fw-semi); letter-spacing: -.01em; }
.bcol-cust { font-size: var(--fs-12); color: var(--brand); }
.bcol-cust::placeholder { color: var(--text-dim); }
.bcol-name:hover, .bcol-cust:hover { background: var(--n-2); }
.bcol-name:focus, .bcol-cust:focus { outline: none; background: var(--n-1); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.bcol-count { flex: 0 0 auto; background: var(--n-4); color: var(--text-hi); border-radius: var(--r-pill);
  min-width: 26px; height: 24px; padding: 0 9px; display: grid; place-items: center; font-size: var(--fs-12); font-weight: var(--fw-med); }
.bcol-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--surface-border); }
.bcol-actions .act-del { margin-left: auto; }
.bcol-actions .act-del .icon { width: 14px; height: 14px; }
.bcol-items { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 40px; }
.bcol-empty { font-size: var(--fs-12); color: var(--text-dim); text-align: center; padding: var(--sp-4); line-height: var(--lh-snug);
  border: 1px dashed var(--surface-border); border-radius: var(--r-md); }

/* 보관함 카드 */
.arch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); align-items: start; }
.arch-card { background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--e-2); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); transition: border-color .18s, box-shadow .18s, transform .12s; }
.arch-card:hover { border-color: var(--surface-border-strong); box-shadow: var(--e-3); transform: translateY(-2px); }
.arch-kind { display: inline-block; font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--tracking-label);
  padding: 3px 9px; border-radius: var(--r-pill); margin-bottom: var(--sp-2); }
.arch-advice { background: var(--brand-soft); color: var(--accent-text); }
.arch-playbook { background: color-mix(in srgb, #2dd4a7 16%, transparent); color: #2dd4a7; }
.arch-title { margin: 0 0 6px; font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--text-hi); letter-spacing: -.01em; line-height: var(--lh-tight); }
.arch-meta { font-size: var(--fs-12); color: var(--text-mut); margin-bottom: var(--sp-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.arch-cust { color: var(--brand); font-weight: var(--fw-med); }
.arch-actions { display: flex; gap: 6px; }
.arch-actions .arch-open { flex: 1; }
.pb-save { margin: var(--sp-2) var(--sp-3) var(--sp-3); }

/* 세트 안 사례 카드 (드래그 정렬) */
.bcard { position: relative; display: flex; align-items: center; gap: var(--sp-3);
  background: var(--n-2); border: 1px solid var(--surface-border); border-radius: var(--r-md); padding: var(--sp-2);
  cursor: pointer; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.bcard:hover { border-color: color-mix(in srgb, var(--ind) 40%, var(--surface-border-strong)); background: var(--n-3); box-shadow: var(--e-1); }
.bcard.dragging { opacity: .5; box-shadow: var(--e-3); border-color: var(--brand); }
.bcard-grip { flex: 0 0 auto; color: var(--text-dim); cursor: grab; display: grid; place-items: center; width: 18px; }
.bcard-grip .icon { width: 16px; height: 16px; }
.bcard-grip:active { cursor: grabbing; }
.bcard-thumb { flex: 0 0 auto; width: 64px; height: 40px; border-radius: var(--r-xs); overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ind) 24%, var(--n-1)), var(--n-1));
  box-shadow: inset 0 0 0 1px var(--surface-border); }
.bcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard-fallback { display: none; }
.bcard-thumb.noimg img { display: none; }
.bcard-body { flex: 1; min-width: 0; }
.bcard-title { font-size: var(--fs-13); font-weight: var(--fw-med); color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-meta { display: flex; align-items: center; gap: 5px; font-size: var(--fs-11); color: var(--text-mut); margin-top: 2px; }
.bcard-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ind); flex: 0 0 auto; }
.bcard-tools { flex: 0 0 auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.bcard:hover .bcard-tools { opacity: 1; }
.bcard-open, .bcard-rm { width: 28px; height: 28px; border-radius: var(--r-xs); display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: var(--text-mut); cursor: pointer; transition: background .14s, color .14s; }
.bcard-open .icon, .bcard-rm .icon { width: 14px; height: 14px; }
.bcard-open:hover { background: var(--brand); color: #fff; }
.bcard-rm:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
@media (max-width: 1000px) { #gridview.board-mode { padding-left: 240px; } .board-cols { grid-template-columns: 1fr; } }

/* ── 반응형 & 접근성 ─────────────────────────────── */
@media (max-width: 1000px) { aside { width: 240px; } #detail.open { right: var(--gutter); } }

/* 좁은 창 단계 축소 (검수 H3+M1). 격자 좌우 패딩이 패널폭(288)×2 고정이라 붕괴하던 문제. */
/* ≤1180px: 우측 컬렉션 패널 숨김 + 격자 우측 패딩 축소 (컬렉션은 상단 '컬렉션' 탭에서 관리) */
@media (max-width: 1180px) {
  #right { display: none; }
  #gridview:not(.board-mode) { padding-right: var(--sp-6); }
}
/* ≤1000px: 좌측 필터 패널 폭에 맞춰 격자 좌측 패딩도 축소 */
@media (max-width: 1000px) {
  #gridview:not(.board-mode) { padding-left: calc(240px + var(--gutter)*2); }
}
/* ≤820px: 좌측 필터도 오프캔버스 (토글 없이 스크롤 방해 최소화 — 격자는 전폭 사용) */
@media (max-width: 820px) {
  #left { display: none; }
  #gridview:not(.board-mode) { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .grid-wrap { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
/* ≤560px: 상단바 압축 — 브랜드 한 줄, 카운트칩 숨김, 여백 축소 (모바일 밀도) */
@media (max-width: 560px) {
  #topbar { gap: var(--sp-3); padding: 0 var(--sp-4); }
  .topbar-right { gap: var(--sp-2); }
  .count-chip { display: none; }
  .grid-toolbar-r { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .grid-toolbar-r::-webkit-scrollbar { display: none; }
}

/* ── Living Glass 인터랙션 (v2) ─────────────────────── */
/* 격자 진입 stagger — 첫 12개만 (무한스크롤 추가분은 즉시, 대량 비용 0) */
.grid-wrap .gcard.enter { opacity:0; animation: gcard-in var(--dur-enter) var(--ease-out) both;
  animation-delay: calc(var(--i,0) * var(--stagger-step)); }
@keyframes gcard-in { from { opacity:0; transform: translateY(14px) scale(.985); } to { opacity:1; transform:none; } }

/* 버튼·아이콘·토글 press 물리 */
.btn, .icon-btn, .gt-toggle, .gt-seg button, .gcard-open, .legend-row, .dd-btn {
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px) scale(.985); }
.icon-btn:active, .gcard-open:active { transform: scale(.92); }
.gt-toggle:active, .legend-row:active { transform: scale(.97); }
/* 골드 토글 — 탄골드 (형광 노랑 제거) */
.gt-toggle.on { background: color-mix(in srgb, var(--gold-text) 12%, transparent);
  border-color: color-mix(in srgb, var(--gold-text) 40%, transparent); color: var(--gold-text); }

/* 필터 칩 팝인/아웃 */
.active-filters .fchip { animation: chip-in var(--dur-std) var(--ease-spring) both;
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-std) var(--ease-out), opacity var(--dur-std) var(--ease-out); }
@keyframes chip-in { from { opacity:0; transform: scale(.82) translateY(2px); } to { opacity:1; transform:none; } }
.active-filters .fchip.leaving { opacity:0; transform: scale(.82); }
.fchip:hover { transform: translateY(-1px); }

/* 뷰 전환 — 렌즈 초점(크로스페이드 + 미세 깊이) */
#gridview.view-leaving { opacity:0; transition: opacity var(--dur-std) var(--ease-out); }
#gridview.view-entering { animation: view-in var(--dur-enter) var(--ease-out) both; }
@keyframes view-in { from { opacity:0; transform: translateY(8px) scale(.995); } to { opacity:1; transform:none; } }

/* 포커스링 — 고급 절제 (키보드 접근성) */
:where(button,a,input,[tabindex]):focus-visible {
  outline:none; box-shadow: var(--e-focus); transition: box-shadow var(--dur-std) var(--ease-out); }
.gcard:focus-visible { outline:none; transform: translateY(var(--card-lift)) scale(1.012);
  box-shadow: var(--e-3), var(--e-focus); }
.gcard:focus-visible::after { opacity:1; }

/* 상단바 스크롤 깊이 */
#topbar { transition: background var(--dur-std) var(--ease-out), box-shadow var(--dur-std) var(--ease-out), border-color var(--dur-std) var(--ease-out); }
#topbar.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px -12px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce) {
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .gcard:hover, .gcard:focus-visible { transform:none; }
  .gcard::after { display:none; }
  /* 무한 반복 모션은 완전 정지 (.01ms로도 계속 도는 셔머·breathing halo 억제) */
  .gcard-thumb::before, .board-empty-icon::before { animation:none !important; opacity:0 !important; }
}