/* 브랜드 담당자용 조회 화면. 기본 색·글꼴·서랍·툴팁은 interview.css를 쓰고, 여기서는 배치와 차트 표식만 정한다.
   차트 색 역할: --s1 강조(코발트) · --s2 두 번째 계열(주황) · --dim 비강조 회색 · --pend 검수 대기(빗금) · 순서 척도는 한 색의 밝기 단계. */
:root {
  --s1: #2E4FD6;
  --s1-light: #B7D3F6;
  --s2: #EB6834;
  --dim: #9AA8A5;
  --o1: #86B6EF; --o2: #5598E7; --o3: #2A78D6; --o4: #1C5CAB; --o5: #104281;
  --grid: #E1E6E4;
}
body { padding-bottom: 5rem; }
.top nav a + a { margin-left: .25rem; }

.bd-hero { margin-top: .5rem; }
.bd-hero h1 { margin: 0 0 .35rem; font: 700 clamp(1.6rem, 4.5vw, 2.1rem)/1.25 var(--serif); }
.bd-hero p { margin: 0; color: var(--ink-soft); max-width: 48em; }

/* 필터는 한 줄, 아래 모든 수치에 같은 조건이 적용된다 */
.bd-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; margin-top: 1.25rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.bd-filter { display: grid; gap: .4rem; }
.bd-label { font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { border: 1px solid var(--plank); background: #fff; border-radius: 999px; padding: .35rem .85rem; cursor: pointer; font-size: .875rem; display: inline-flex; gap: .4rem; align-items: center; }
.chip b { font-weight: 500; color: var(--ink-muted); font-size: .75rem; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip[aria-pressed="true"] b { color: #DCE3FF; }
.bd-brand input { width: 14rem; max-width: 100%; border-radius: 999px; padding: .45rem .9rem; font-size: .875rem; }
.bd-filters .btn { margin-left: auto; }

#out { transition: opacity .2s; }
#out.is-loading { opacity: .55; pointer-events: none; }

/* 계열(section): 제목·표식·안내 */
.bd-series { margin-top: 2.25rem; }
.bd-series > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem; }
.bd-series h2 { margin: 0; font: 700 1.35rem/1.3 var(--serif); }
.bd-series .kind { font-size: .75rem; font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; }
.bd-series .lead { margin: .35rem 0 0; color: var(--ink-soft); font-size: .9375rem; max-width: 60em; }
.bd-empty { background: var(--surface); border: 1px dashed var(--plank); border-radius: 1rem; padding: 1.25rem; margin-top: 1rem; color: var(--ink-soft); }
.bd-empty b { color: var(--ink); display: block; margin-bottom: .2rem; }

.stat-head { margin-top: 1rem; }
.tile .v { font-weight: 600; font-variant-numeric: normal; }
.tile .v small { font-size: .875rem; font-weight: 400; color: var(--ink-muted); margin-left: .15rem; }

.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.viz { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.1rem; min-width: 0; }
.viz.wide { grid-column: 1 / -1; }
.viz h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.viz .denom { margin: .15rem 0 .75rem; font-size: .75rem; color: var(--ink-soft); }
.viz-sub { margin: .75rem 0 .3rem; font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.viz-sub:first-child { margin-top: 0; }
.viz-empty { margin: .5rem 0; color: var(--ink-muted); font-size: .875rem; }
.viz-note { margin: .75rem 0 0; font-size: .75rem; color: var(--ink-soft); }

/* 범례: 두 계열 이상이면 항상 보여준다 */
.viz-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: var(--ink-soft); margin: -.25rem 0 .6rem; }
.viz-legend i, .sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.s1 { background: var(--s1); }
.s1-light { background: var(--s1-light); }
.s2 { background: var(--s2); }
.dim { background: var(--dim); }
.pend { background: repeating-linear-gradient(45deg, var(--s1) 0 2px, var(--cobalt-wash) 2px 5px); }
.o1 { background: var(--o1); } .o2 { background: var(--o2); } .o3 { background: var(--o3); } .o4 { background: var(--o4); } .o5 { background: var(--o5); }

/* 가로 막대: 표식은 얇게, 데이터 끝만 둥글게, 막대 사이는 바탕색 2px 틈 */
.viz-bars { display: grid; gap: 2px; }
.viz-row {
  display: grid; grid-template-columns: minmax(6.5rem, 34%) 1fr auto; align-items: center; gap: .6rem;
  width: 100%; border: 0; background: none; padding: .3rem .35rem; border-radius: .4rem; text-align: left; cursor: pointer; color: inherit;
}
.viz-row:hover, .viz-row:focus-visible { background: var(--paper); }
.viz-row[data-kind="none"] { cursor: default; }
.viz-row[data-kind="none"]:hover { background: none; }
.viz-name { font-size: .8125rem; line-height: 1.3; min-width: 0; }
.viz-name small { display: block; font-size: .6875rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-tracks { display: grid; gap: 2px; min-width: 0; }
.viz-track { position: relative; display: flex; gap: 2px; height: 12px; box-shadow: inset 0 -1px 0 var(--grid); }
.viz-tracks.two .viz-track { height: 9px; }
.viz-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; flex: none; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.viz-row:hover .viz-fill, .viz-row:focus-visible .viz-fill { filter: brightness(1.12); }
.viz-val { font-size: .8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.viz-row.is-zero .viz-name, .viz-row.is-zero .viz-val { color: var(--ink-muted); }
.viz-row.sep { margin-top: .35rem; border-top: 1px solid var(--line); border-radius: 0; padding-top: .55rem; }
.viz-row .badge { margin-left: .35rem; vertical-align: 1px; }

/* 세로 막대(순서 척도 1~5): 한 색의 밝기 단계 */
.viz-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; align-items: end; height: 9rem; padding-top: 1.25rem; border-bottom: 1px solid var(--grid); }
.viz-col { display: grid; align-content: end; justify-items: center; gap: .3rem; height: 100%; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; border-radius: .4rem; }
.viz-col:hover, .viz-col:focus-visible { background: var(--paper); }
.viz-col .cap { font-size: .75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.viz-col .col { width: min(100%, 24px); border-radius: 4px 4px 0 0; min-height: 0; transition: height .35s cubic-bezier(.2, .8, .2, 1); }
.viz-axis { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .35rem; font-size: .75rem; color: var(--ink-soft); text-align: center; }
.viz-axis span small { display: block; font-size: .6875rem; color: var(--ink-muted); }

/* 표 보기: 모든 차트는 표로도 읽을 수 있다 */
.viz-table { margin-top: .75rem; font-size: .8125rem; }
.viz-table summary { cursor: pointer; color: var(--ink-soft); }
.viz-table table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.viz-table th, .viz-table td { text-align: left; padding: .35rem .25rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.viz-table th { color: var(--ink-soft); font-weight: 500; }
.viz-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.viz-table th.num { text-align: right; }

/* 질문별 추천 브랜드 표 */
.qtable { width: 100%; border-collapse: collapse; font-size: .8125rem; margin-top: .5rem; }
.qtable th, .qtable td { text-align: left; padding: .45rem .35rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.qtable th { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.qtable td.q { max-width: 26rem; }
.qtable td.q small { display: block; color: var(--ink-muted); }
.qtable .lv { font-size: 1rem; letter-spacing: .1em; white-space: nowrap; }
.qtable .lv.own { color: var(--s1); }
.qtable .num { font-variant-numeric: tabular-nums; }
.qtable .link { border: 0; background: none; padding: 0; color: var(--ink-soft); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: .8125rem; }
.qtable .link + .link { margin-left: .4rem; }
.lv-key { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: var(--ink-soft); margin: .25rem 0 .5rem; }

/* 최근 추천 요청 */
.rec-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.rec-item { border: 1px solid var(--line); border-radius: .8rem; padding: .75rem .85rem; font-size: .875rem; background: #fff; }
.rec-item .q { color: var(--ink); }
.rec-item .conds { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.rec-item .conds span { font-size: .6875rem; padding: .1rem .5rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.rec-item ol { margin: .4rem 0 0; padding-left: 1.25rem; display: grid; gap: .2rem; }
.rec-item li.mine { font-weight: 600; }
.rec-item li small { color: var(--ink-soft); font-weight: 400; }
.rec-item .meta { margin-top: .4rem; }

/* 연결 데이터 카드 */
.ext-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.ext { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: .9rem 1rem; font-size: .875rem; }
.ext b { display: block; }
.ext .st { display: inline-block; margin: .35rem 0; font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.ext p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .8125rem; }

/* 서랍 안 내용 */
.drawer .meta { margin-top: .5rem; }
.drawer .judg { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .4rem; }
.drawer .judg li { display: grid; gap: .15rem; }
.drawer .judg .ev { font-size: .8125rem; color: var(--ink-soft); }
.drawer .raw { white-space: pre-wrap; font-size: .875rem; line-height: 1.6; margin-top: .75rem; padding: .75rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem; max-height: 50vh; overflow: auto; }
.drawer .cites { margin: .75rem 0 0; padding-left: 1.25rem; font-size: .8125rem; display: grid; gap: .2rem; }
.drawer .cites a { color: var(--ink); word-break: break-all; }
.drawer h3 { margin: 1rem 0 .25rem; font-size: .875rem; font-weight: 600; }
.drawer .qrow { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.drawer .qrow .link { border: 0; background: none; padding: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font-size: .8125rem; white-space: nowrap; }

@media (max-width: 40rem) {
  .viz-grid { grid-template-columns: 1fr; }
  .viz-row { grid-template-columns: minmax(5.5rem, 40%) 1fr auto; }
  .bd-filters .btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .viz-fill, .viz-col .col, #out { transition: none; } }
@media print { .bd-filters, .drawer, .tip { display: none !important; } .viz-table[open] summary { display: none; } }

/* 헤더: 로고는 첫 화면으로, 언어 전환은 소비자 화면과 같은 설정(sieve.lang)을 쓴다 */
.top .right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.wordmark:hover small { color: var(--ink); }
.lang-switch { display: inline-flex; padding: 2px; border: 1px solid #D5DEDB; border-radius: 999px; background: #fff; }
.lang-switch button { font-size: .75rem; padding: .25rem .625rem; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }