/* 헤아림 — 쿨톤 리디자인 (2026-09).
 *
 * 원래 토큰은 Claude Design 프로토타입(그린 accent)에서 가져왔던 것인데, 그 위에
 * docs/design/ 리디자인 산출물(Downloads/design/design-tokens.css)을 기준으로
 * 블루→인디고→시안→바이올렛 쿨톤 팔레트로 갈아엎었다. 클래스 이름과 구조는 그대로
 * 두고 값만 바꿨다 — 컴포넌트를 쓰는 쪽 JS는 손댈 필요가 없다.
 */

:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #211b25;
  --color-text-muted: #55505c;
  --color-text-faint: #a8a3ae;
  --color-accent: #2563eb;
  --color-accent-2: #22d3ee;
  --color-divider: #e4e7ec;
  --color-danger: #dc2626;

  --color-neutral-100: #f3f4f8; --color-neutral-200: #eef1f7; --color-neutral-300: #e0e2ea;
  --color-neutral-400: #c7c2ce; --color-neutral-500: #9a94a3; --color-neutral-600: #6b6577;
  --color-neutral-700: #4f4757; --color-neutral-800: #372f3d; --color-neutral-900: #211b25;

  /* accent(블루) 스케일. 100/200은 배지·pill 배경, 700/800은 hover·텍스트용. */
  --color-accent-100: #eff6ff; --color-accent-200: #dbeafe; --color-accent-300: #bfdbfe;
  --color-accent-400: #60a5fa; --color-accent-500: #3b82f6; --color-accent-600: #2563eb;
  --color-accent-700: #1d4ed8; --color-accent-800: #1e40af; --color-accent-900: #1e3a8a;
  --color-accent-gradient: linear-gradient(135deg, #2563eb, #4f46e5);

  --color-accent-2-100: #ecfeff; --color-accent-2-200: #a5f3fc; --color-accent-2-300: #67e8f9;
  --color-accent-2-600: #22d3ee; --color-accent-2-700: #0e7490;

  /* 프리미엄(잠금) 색 — 앰버/골드. accent가 그린이던 시절엔 프리미엄이 파랑이었는데,
     accent 자체가 파랑이 된 지금은 겹친다. L1도 예전엔 앰버였지만 등급 색을 쿨톤으로
     옮기며 비었으니, 프리미엄이 그 자리를 가져온다. */
  --color-premium: #d97706;
  --color-premium-dark: #b45309;
  --color-premium-light: #fffbeb;
  --color-premium-border: #fde68a;
  --color-premium-hover: #fef3c7;

  /* 한글·일본어 댓글이 □로 깨지지 않게 Noto Sans KR/JP를 뒤에 받친다(index.html에서 불러옴). */
  --font-heading: "Poppins", "Noto Sans KR", system-ui, sans-serif;
  --font-body: "DM Sans", "Noto Sans KR", "Noto Sans JP", system-ui, sans-serif;

  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
  --shadow-lg: 0 20px 48px rgba(30, 41, 90, .14);

  /* 등급 색. 웜톤(그레이/앰버/오렌지/레드)을 쿨톤 램프로 교체:
     연한 인디고 → 블루 → 시안 → 진한 바이올렛. 색만으로 구분하지 않고 라벨을
     항상 함께 표기한다는 원칙은 그대로 유지한다 — 그래서 levels.js도 같이 바꿨다. */
  --lv0: #a5b4fc;
  --lv1: #60a5fa;
  --lv2: #22d3ee;
  --lv3: #6d28d9;
}

/* 화면별 테마. 메인(과 CSV·순위·계정)은 헤아림 기본 파랑, 유튜브 화면은 빨강, 치지직 화면은 초록.
   accent 토큰만 갈아 끼우므로 버튼·탭·링크·포커스·차트가 모두 따라 바뀐다(차트는 web/js/charts.js
   `accent()`가 이 값을 읽는다). 등급 색(--lv*)은 데이터 색이라 화면과 상관없이 그대로다.
   body[data-page]는 main.js의 라우터가 화면을 옮길 때마다 적는다. */
body[data-page="youtube"] {
  /* 원색 빨강 대신 토마토(붉은 주황) 계열로 눈을 덜 찌르고, 보색인 시안을 보조색으로 섞는다. */
  --color-accent: #e54d2e;
  --color-accent-100: #fff6f4; --color-accent-200: #feebe7; --color-accent-300: #ffcdc2;
  --color-accent-400: #fd9b80; --color-accent-500: #ec6142; --color-accent-600: #e54d2e;
  --color-accent-700: #c93d1f; --color-accent-800: #9f2f18; --color-accent-900: #5c271f;
  --color-accent-gradient: linear-gradient(135deg, #be2a3f, #e54d2e 55%, #f5884f);
  --color-accent-2: #0891b2;
  --color-accent-2-100: #ecfeff; --color-accent-2-200: #a5f3fc; --color-accent-2-300: #67e8f9;
  --color-accent-2-600: #0891b2; --color-accent-2-700: #0e7490;
}
body[data-page="chzzk"] {
  --color-accent: #059669;
  --color-accent-100: #ecfdf5; --color-accent-200: #d1fae5; --color-accent-300: #a7f3d0;
  --color-accent-400: #34d399; --color-accent-500: #10b981; --color-accent-600: #059669;
  --color-accent-700: #047857; --color-accent-800: #065f46; --color-accent-900: #064e3b;
  --color-accent-gradient: linear-gradient(135deg, #059669, #0d9488);
  --color-accent-2: #2dd4bf;
  --color-accent-2-100: #f0fdfa; --color-accent-2-200: #99f6e4; --color-accent-2-300: #5eead4;
  --color-accent-2-600: #2dd4bf; --color-accent-2-700: #0f766e;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px;
  /* 한국어는 어절 단위로 줄바꿈한다 ("들어옵니 / 다" 방지). 공백 없는 긴 문자열(URL 등)은
     그래도 칸을 넘치지 않게 아무 데서나 끊는다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
h1 { font-size: 36px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
p { margin: 0 0 12px; }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.tabular { font-variant-numeric: tabular-nums; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-200); }

/* — 버튼 — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.2;
  color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 9px 16px; border-radius: var(--radius-md);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* 실행·보조 버튼 모두 테두리 없는 흰색. 흰 배경에서도 자리가 보이게 그림자만 아주 옅게 준다. */
.btn-primary, .btn-secondary { background: #fff; color: var(--color-text); box-shadow: 0 0 0 1px rgba(16, 24, 40, .04), var(--shadow-sm); }
.btn-primary { font-weight: 600; }
.btn-primary:not(:disabled):hover, .btn-secondary:not(:disabled):hover { background: var(--color-neutral-100); }
.btn-ghost { color: var(--color-accent-700); padding-inline: 6px; }
.btn-ghost:hover { background: var(--color-accent-100); }

/* — 입력 — */
.input {
  min-height: 36px; padding: 6px 14px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: #fff;
  border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md);
}
.input:hover { border-color: var(--color-neutral-400); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* — 세그먼트 토글 — */
.seg {
  display: inline-flex; max-width: 100%; padding: 3px; gap: 2px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; font-size: 13px; font-weight: 500; cursor: pointer;
  border-radius: var(--radius-sm); white-space: nowrap;
}
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked) {
  background: #fff; color: var(--color-accent-700); box-shadow: var(--shadow-sm);
}
.seg-opt:not(:has(input:checked)):hover { color: var(--color-text); }

/* — 카드 — */
.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; background: #fff;
  border: 1px solid var(--color-neutral-300); border-radius: var(--radius-lg);
}
.card-kicker {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-600); font-weight: 500;
}
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.25; }
.card-meta {
  display: flex; align-items: center; gap: 14px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }

/* — 태그 — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: var(--radius-sm);
}
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }

/* ── 레이아웃 ────────────────────────────────────────────────────────── */

.brand-mark {
  /* 헤아림 로고는 화면 테마와 상관없이 늘 브랜드 파랑 */
  width: 32px; height: 32px; border-radius: var(--radius-md); background: #2563eb;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-heading); font-size: 14px; font-weight: 700;
}
.brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.1; }

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--color-neutral-100); }
.tab {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--color-text-muted);
  padding: 7px 18px; border-radius: var(--radius-sm);
}
.tab[aria-selected="true"] { background: #fff; color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-sm); }
.tab:disabled { opacity: .5; cursor: not-allowed; }

.api-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px;
  border: 1px solid var(--color-neutral-300); background: #fff; color: var(--color-neutral-700);
}
.api-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-neutral-400); }
.api-pill.is-ok .api-dot { background: var(--color-accent); }
.api-pill.is-down { border-color: #fecdca; background: #fef3f2; color: #b42318; }
.api-pill.is-down .api-dot { background: var(--color-danger); }

main { max-width: 1240px; margin: 0 auto; padding: 24px 32px 0; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.toolbar .input { flex: 1; min-width: 300px; max-width: 520px; height: 42px; }
.toolbar .btn-primary { height: 42px; padding-inline: 22px; }

/* — 진행률 — */
.progress-track { height: 8px; border-radius: 999px; background: var(--color-neutral-200); overflow: hidden; }
.progress-bar { height: 100%; border-radius: 999px; background: var(--color-accent); transition: width .3s ease; }

/* — 영상 목록 행 — */
.video-row {
  display: flex; flex-direction: row; align-items: center; gap: 18px;
  text-align: left; cursor: pointer; padding: 16px 22px;
  font: inherit; color: inherit; border: 1px solid var(--color-neutral-300);
}
.video-row:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
.video-row .grow { min-width: 0; flex: 1; }

/* 삭제는 눈에 띄지 않게 두다가, 그 줄에 마음이 갈 때만 드러난다. 되돌릴 수 없는
   동작이 목록 내내 빨갛게 서 있으면 누르라고 재촉하는 꼴이 된다. */
.row-delete {
  flex: none; padding: 6px 8px; color: var(--color-neutral-500);
  opacity: 0; transition: opacity .12s, color .12s;
}
.video-row:hover .row-delete, .ch-row:hover .row-delete, .row-delete:focus-visible { opacity: 1; }
.row-delete:hover { color: #b42318; border-color: #fecdca; background: #fef3f2; }

/* 업데이트도 같은 규칙으로 숨어 있다가 그 줄에 마음이 갈 때 드러난다. 되돌릴 수는
   있지만 유튜브 할당량이 드는 동작이라, 목록 내내 서 있을 자리는 아니다. */
.row-update {
  flex: none; padding: 6px 10px; font-size: 12px; color: var(--color-neutral-600);
  opacity: 0; transition: opacity .12s, color .12s;
}
.video-row:hover .row-update, .row-update:focus-visible { opacity: 1; }
.row-update:hover:not(:disabled) { color: var(--color-accent); border-color: var(--color-accent); }
/* 하나가 도는 동안은 나머지가 잠긴다. hover 규칙보다 뒤에 같은 무게로 둬야 이긴다. */
.video-row .row-update:disabled { cursor: not-allowed; opacity: .35; }

/* 등급 구성 미니 막대 */
.segbar { display: flex; gap: 3px; align-items: center; width: 150px; flex: none; }
.segbar span { height: 10px; border-radius: 999px; }

.metric { width: 88px; flex: none; text-align: right; }
.metric-value { font-family: var(--font-heading); font-size: 21px; font-variant-numeric: tabular-nums; }
.counts { width: 90px; flex: none; text-align: right; font-size: 12px; }

/* — 상세 — */
.detail-grid { display: grid; grid-template-columns: 352px minmax(0, 1fr); gap: 22px; align-items: start; }
/* `hidden` 속성은 기본적으로 display:none이지만, 위 규칙의 display:grid가 우선순위상 이긴다 — 하위 탭 전환에서 켜둔다. */
.detail-grid[hidden] { display: none; }
/* 채널 성과 피드백 탭. 같은 이유로 display:flex가 [hidden]을 이긴다 — 여기도 켜둔다. */
.perf-pane { display: flex; flex-direction: column; gap: 20px; }
.perf-pane[hidden] { display: none; }
.dist-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dist-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }

.comment {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
.comment.is-reply { margin-left: 28px; }
/* 어느 영상의 댓글인지. 길어도 한 줄을 넘기지 않게 잘라낸다 — 제목이 본문보다
   길어지면 댓글이 아니라 제목 목록처럼 보인다. */
.comment-source {
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-accent); text-decoration: none; border-bottom: 1px dotted currentColor;
}
.comment-source:hover { text-decoration: none; opacity: .75; }
.comment-badge {
  flex: none; align-self: flex-start; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--radius-sm); color: #fff; white-space: nowrap;
}
.comment-head {
  display: flex; gap: 8px; font-size: 11px; flex-wrap: wrap;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.comment-author { font-weight: 600; color: var(--color-text); }
/* 치지직 클린봇이 가린 채팅. 등급 색과 헷갈리지 않게 무채색 테두리로만 표시한다. */
.cleanbot-tag {
  font-size: 10px; font-weight: 600; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--color-neutral-300, #cfcbd6); color: var(--color-text);
}
.comment-text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.comment-list { display: flex; flex-direction: column; gap: 8px; max-height: 620px; overflow: auto; }

/* — 악성 유저 랭킹 — */
.rank-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: transparent; font: inherit; font-size: 13px; color: inherit; text-align: left;
}
.rank-row:hover { background: var(--color-neutral-100); }
.rank-row.is-open { background: var(--color-accent-100); }
.rank-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.rank-detail {
  display: flex; flex-direction: column; gap: 6px;
  margin: 2px 0 10px 26px; padding-left: 12px;
  border-left: 2px solid var(--color-accent-300);
  max-height: 320px; overflow: auto;
}
.rank-message { display: flex; gap: 8px; }

/* — 할당량 안내 — */
.quota {
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--color-accent-2-100); border: 1px solid var(--color-accent-2-300);
}
.quota[data-heavy="true"] { background: #fffaeb; border-color: #fedf89; }

/* — 실시간 화면 — */
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.live-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; }
.stat { flex: 1 1 150px; padding: 16px 18px; gap: 2px; }
.stat-value { font-family: var(--font-heading); font-size: 26px; font-variant-numeric: tabular-nums; }

.limit-chip {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  background: var(--color-premium-light);
  border: 1px solid var(--color-premium-border);
  color: var(--color-premium-dark);
  font-variant-numeric: tabular-nums;
}

.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  background: var(--color-danger); margin-right: 6px;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.chat-row {
  display: flex; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  animation: rowIn .18s ease-out;
}
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

.note {
  margin: 0; font-size: 12px; line-height: 1.6; max-width: 820px;
  border-left: 4px solid var(--color-accent-300); padding-left: 14px;
}

.empty { padding: 40px; text-align: center; }

.site-footer {
  max-width: 1100px; margin: 40px auto 0; padding: 18px 0 0;
  border-top: 1px solid var(--color-neutral-200);
  font-size: 12px; display: flex; gap: 20px; flex-wrap: wrap;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

@media (max-width: 1100px) {
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .live-aside { position: static; }
}

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .video-row { flex-wrap: wrap; }
  main { padding-inline: 20px; }
  .site-footer { margin-inline: 20px; }
}

/* 휴대폰 폭. 위 900px 규칙과 겹쳐 적용된다 — 여기서는 더 좁을 때만 깨지는 것만 손본다. */
@media (max-width: 560px) {
  main { padding-inline: 14px; }
  .site-footer { margin-inline: 14px; }
  .tabs { padding: 3px; }
  .tab { padding: 6px 11px; font-size: 13px; }
  .api-pill { padding: 6px 10px; font-size: 12px; }

  .toolbar .input { min-width: 0; max-width: none; flex-basis: 100%; }
  .toolbar .btn-primary { flex: 1; }

  /* 가로 배치를 억지로 고집하지 않는다 — 제목이 길어 줄바꿈되면 자기 줄을 다 쓰게
     하고, 등급·지표들은 그 아래 한 줄로 흐르게 둔다. `.grow`가 첫 번째 자식이라
     flex-basis:100%를 주면 나머지가 자연히 다음 줄로 넘어간다. */
  .video-row { flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .video-row .grow { flex-basis: 100%; }
  .segbar, .metric, .counts { width: auto; flex: none; text-align: left; }
  .segbar { justify-content: flex-start; }

  .chat-panel { width: calc(100vw - 32px); right: 16px; }

  /* 세그먼트는 옆으로 밀어 넘긴다 — 스크롤바가 칸 안에 끼어 보이지 않게 감춘다. */
  .seg { scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
}

/* 터치 화면엔 hover가 없다 — hover에만 기대면 삭제·업데이트 버튼을 영영 못 누른다. */
@media (hover: none) {
  .row-delete, .row-update { opacity: 1; }
}

/* — 로그인 — */
.login-wrap {
  display: grid; place-items: center; min-height: 70vh; padding: 20px;
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #eef2ff 0%, #eff6ff 45%, #ecfeff 100%);
}
/* 장식용 흐린 원 두 개 — 히어로/로그인의 그라데이션 배경에 입체감을 준다. */
.login-wrap::before, .login-wrap::after {
  content: ""; position: absolute; border-radius: 999px; filter: blur(10px); z-index: 0;
}
.login-wrap::before { top: -160px; left: -160px; width: 480px; height: 480px; background: var(--lv0); opacity: .25; }
.login-wrap::after { bottom: -200px; right: -140px; width: 560px; height: 560px; background: var(--lv2); opacity: .18; }
.login-card { position: relative; z-index: 1; width: min(400px, 100%); gap: 20px; padding: 44px 40px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.login-card .input { width: 100%; height: 44px; }
.btn-block { width: 100%; height: 48px; margin-top: 4px; }
.who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* — 맥락 분석 — */
.context-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-neutral-100);
}
.context-summary {
  font-size: 13px; line-height: 1.65;
  padding-left: 12px; border-left: 3px solid var(--color-accent-300);
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
}

/* — 댓글 낱개 분석 — */
.analyze-btn { font-size: 12px; padding: 3px 8px; margin-top: 4px; }
.analysis {
  margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--color-accent-100); border: 1px solid var(--color-accent-200);
}
.analysis-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.analysis-text { font-size: 13px; line-height: 1.65; }
.analysis-error { font-size: 12px; color: #b42318; margin-top: 6px; }

/* — 외국어 댓글 번역 — */
.translate-btn { font-size: 12px; padding: 3px 8px; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }
.lang-tag {
  font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 999px;
  background: var(--color-neutral-200); color: var(--color-neutral-700);
}
.translation {
  margin-top: 6px; padding: 8px 12px; border-radius: var(--radius-md);
  background: var(--color-neutral-100); border-left: 3px solid var(--color-accent-2-600);
}
.translation-head { font-size: 11px; color: var(--color-text-muted); margin-bottom: 3px; }
.translation-text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }

/* — 답글 패널 — */
.comment-actions { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.comment-actions > div:empty { display: none; }
.reply-panel {
  margin-top: 8px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 8px;
}
.reply-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.reply-note { font-size: 12px; color: var(--color-text-muted); }
/* 답글 임시 저장 상태(web/js/drafts.js). 비어 있으면 자리를 차지하지 않는다 */
.reply-draft-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: -2px;
  font-size: 12px; color: var(--color-text-muted); overflow-wrap: anywhere;
}
.reply-draft-status:empty { display: none; }
.reply-draft-status[data-state="restored"] { color: #067647; font-weight: 600; }
.reply-draft-status[data-state="failed"],
.reply-draft-status[data-state="unavailable"] { color: #b54708; }
.reply-draft-status .reply-mini { font-weight: 500; }

/* — 감정·의도 (web/js/insight.js) — 악성도 색(L0~L3)과 섞이지 않게 중립 회색 칩/게이지 */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.insight-row { display: flex; align-items: baseline; gap: 10px; }
.insight-row-label { flex: none; width: 30px; font-size: 11px; color: var(--color-text-muted); }
.insight-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.insight-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; background: var(--color-neutral-100); color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-200);
}
.insight-intent { background: var(--color-accent-100); color: var(--color-accent-800); border-color: var(--color-accent-200); }
.insight-dots { font-size: 9px; letter-spacing: 1px; opacity: .75; }
/* 참고용 항목(정밀도 낮음): 점선 테두리 + 「참고」 꼬리표 */
.insight-chip.is-tentative { border-style: dashed; }
.insight-tag {
  font-size: 10px; font-weight: 600; padding: 0 5px; border-radius: 4px; white-space: nowrap;
  background: var(--color-neutral-200); color: var(--color-neutral-700);
}
.insight-gauge-name .insight-tag { margin-left: 4px; }
.insight-gauge.is-tentative .insight-gauge-fill { opacity: .45; }
.insight-gauges { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.insight-gauge { display: grid; grid-template-columns: 100px 1fr 28px; align-items: center; gap: 8px; font-size: 12px; }
.insight-gauge-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-gauge-track { height: 8px; border-radius: 999px; background: var(--color-neutral-100); overflow: hidden; }
.insight-gauge-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-accent-600, var(--color-accent-700)); }
.insight-gauge-score { text-align: right; color: var(--color-text-muted); }
.insight-card { display: flex; flex-direction: column; gap: 8px; }
.reply-suggestions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.reply-suggestion { display: flex; align-items: baseline; gap: 8px; width: 100%; font-size: 13px; line-height: 1.5; }
.reply-suggestion-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.reply-tone {
  flex: none; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-700);
}
.reply-input {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 14px;
  padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-300);
}
.reply-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.reply-mini { font-size: 12px; padding: 3px 9px; }

/* — 페이지 넘김 — */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.pager-btn { font-size: 13px; padding: 6px 14px; }

/* — 세부 설정 — */
.filters { flex-direction: row; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; padding: 16px 20px; }
.filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-field .input { height: 36px; min-width: 170px; }

/* — 검색 패널 — */
.search-block { margin-bottom: 18px; }
.search-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-toggle { gap: 8px; }
.search-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 12px; border-radius: var(--radius-sm); font-size: 13px;
  background: var(--color-accent-100); color: var(--color-accent-800);
  border: 1px solid var(--color-accent-200);
}
.search-chip-x {
  border: 0; background: transparent; cursor: pointer; font-size: 12px;
  color: inherit; padding: 2px 6px; border-radius: var(--radius-sm);
}
.search-chip-x:hover { background: var(--color-accent-200); }
.search-panel {
  flex-direction: row; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  margin-top: 12px; padding: 18px 22px;
}
.search-field { display: flex; flex-direction: column; gap: 4px; }
.search-field .input { height: 38px; min-width: 190px; }
.search-label { font-size: 13px; font-weight: 500; }
.search-hint { font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* — 추이 그래프 (드래그로 이동) — */
.trend-canvas { position: relative; height: 260px; cursor: grab; }
.trend-canvas:active { cursor: grabbing; }

/* — 새 채팅 알림 — */
.new-chat-badge {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: 12px; padding: 5px 12px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

/* — 누를 수 있는 요약 카드 — */
.stat-clickable { cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s; }
.stat-clickable:hover { border-color: var(--color-accent); }
.stat-clickable.is-active { border-color: var(--color-accent); background: var(--color-accent-100); }

/* — 크레딧 표시 (web/js/account.js) —
 *
 * 예전 PRO 잠금의 앰버/골드를 그대로 이어받는다. accent(파랑)·등급색(쿨톤)과 겹치지 않아
 * "이걸 누르면 무언가 빠진다"는 표시로 눈에 띈다. */
.credit-tag {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--color-premium-light); color: var(--color-premium-dark); border: 1px solid var(--color-premium-border);
}
.credit-chip {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap;
  background: var(--color-premium-light); color: var(--color-premium-dark); border: 1px solid var(--color-premium-border);
}
.credit-chip:hover { background: var(--color-premium-hover); }
.who-name { text-decoration: none; }
.who-name:hover { text-decoration: underline; }
.credit-big { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: var(--color-premium-dark); }
.credit-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.credit-table th, .credit-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--color-neutral-100); vertical-align: middle; }
.credit-table th { font-weight: 600; white-space: nowrap; }
.credit-price { font-weight: 700; color: var(--color-premium-dark); white-space: nowrap; }
.credit-delta { font-weight: 700; white-space: nowrap; text-align: right; }
.credit-delta[data-sign="+"] { color: #067647; }
.credit-delta[data-sign="-"] { color: #b42318; }
@media (max-width: 600px) {
  .credit-table td.text-muted { display: none; }
  .credit-price { white-space: normal; }
  .credit-table th, .credit-table td { padding: 9px 4px; }
}
.premium-banner {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  padding: 12px 16px; margin-bottom: 20px; border-radius: var(--radius-md);
  background: var(--color-premium-light); border: 1px solid var(--color-premium-border); color: var(--color-premium-dark);
}

/* ── CSV 페이지 ─────────────────────────────────────────────────────── */

.csv-help {
  font-size: 12.5px; line-height: 1.75; color: var(--color-neutral-700);
  background: var(--color-neutral-100); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); padding: 12px 16px 12px 8px;
}
.csv-help ul { margin: 0; padding-left: 22px; }
.csv-help li + li { margin-top: 4px; }

.csv-fields {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.csv-field { display: flex; flex-direction: column; gap: 5px; }
.csv-field-label { font-size: 12.5px; font-weight: 600; }
.csv-field .input { height: 34px; padding-block: 0; }
.csv-field-hint { font-size: 11px; line-height: 1.5; }

/* 넓은 표는 페이지가 아니라 표 안에서 가로로 움직인다. */
.csv-preview { overflow-x: auto; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.csv-preview table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.csv-preview th, .csv-preview td {
  padding: 7px 12px; text-align: left; white-space: nowrap;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--color-divider);
}
.csv-preview th { background: var(--color-neutral-100); font-weight: 600; }
.csv-preview tr:last-child td { border-bottom: 0; }
/* 고른 문장 컬럼을 표에서 짚어준다 — 이름만 보고 고르면 엉뚱한 걸 판정하게 된다. */
.csv-preview .is-picked { background: var(--color-accent-100); color: var(--color-accent-800); }
.csv-preview th.is-picked { background: var(--color-accent-100); }

/* 헤아림에게 묻기 (조회 챗봇 패널) */
.chat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 340px;
  height: 440px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 40;
  flex-direction: column;
  overflow: hidden;
}

.chat-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  border-bottom: 1px solid var(--color-divider);
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  white-space: pre-wrap;
}

.chat-bubble-user {
  align-self: flex-end;
  background: var(--color-accent-100);
}

.chat-bubble-assistant {
  align-self: flex-start;
  background: var(--color-neutral-200);
}

/* "헤아리는 중" 입력 표시 — 점 세 개가 차례로 깜빡인다 */
.chat-typing { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted, #667085); }
.chat-typing-label { font-size: 12px; }
.chat-dots { display: inline-flex; gap: 4px; }
.chat-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.3; animation: chat-blink 1.2s infinite both; }
.chat-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-divider);
}

/* 댓글 여론 요약 */
.opinion-card { padding: 20px 22px; gap: 12px; }
.opinion-summary { color: var(--color-text); }

.compare-row:hover { background: var(--color-neutral-100); }

/* 키워드 댓글 팝업 */
.kw-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.kw-modal { background: #fff; border-radius: var(--radius-md); width: min(560px, 100%); max-height: 80vh; overflow: auto; box-shadow: var(--shadow-md); }
.kw-modal-head { position: sticky; top: 0; z-index: 1; background: #fff; display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid var(--color-neutral-200); }
.kw-modal-body { padding: 4px 22px 18px; display: flex; flex-direction: column; }
.kw-comment { padding: 12px 0; border-bottom: 1px solid var(--color-neutral-100); display: flex; gap: 10px; align-items: flex-start; }
.kw-comment:last-child { border-bottom: none; }
.kw-comment-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kw-hl { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 700; }

/* 게스트(읽기 전용) — 수집·분석·삭제 자리를 한꺼번에 감춘다.
   화면마다 조건을 심으면 버튼을 새로 붙일 때 빠뜨린다. 실제 차단은 서버가 한다. */
body[data-guest] .guest-hide { display: none !important; }

/* 로그인 화면의 "또는" 구분선 */
.login-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--color-neutral-500); font-size: 12px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--color-neutral-200); }

/* ── 메인(랜딩) 화면 ────────────────────────────────────────────────── */

/* 배너: 파랑 → 밝은 파랑 → 하늘색. 글씨는 흰색(글씨가 놓이는 왼쪽은 흰 글씨가 읽히는 밝기로 둔다). 위에 은은한 빛 번짐 두 개를 얹는다. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 40px 44px; border-radius: var(--radius-xl); color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 40%, #60a5fa 72%, #67e8f9 100%);
  box-shadow: 0 20px 40px -22px rgba(37, 99, 235, 0.45);
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  flex-wrap: wrap;
}
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 999px; filter: blur(60px); pointer-events: none;
}
.hero::before { width: 360px; height: 360px; left: -80px; top: -140px; background: rgba(147, 197, 253, 0.45); }
.hero::after { width: 320px; height: 320px; right: 18%; bottom: -170px; background: rgba(165, 243, 252, 0.45); }
.hero-copy { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.hero-copy h1 { font-size: 34px; line-height: 1.25; color: #fff; }
.hero-copy .text-muted { color: rgba(255, 255, 255, 0.85); }
.hero-copy > .tag { align-self: flex-start; } /* 세로 flex 안에서 태그가 가로로 꽉 차게 늘어나지 않게 */
.hero-tag { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.hero .btn-primary, .hero .btn-secondary { background: #fff; color: var(--color-text); border-color: transparent; }
.hero .btn-primary:hover, .hero .btn-secondary:hover { background: var(--color-neutral-100); }
.hero-keyword { color: #bae6fd; word-break: keep-all; overflow-wrap: anywhere; }
.hero-keyword-titles { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.hero-keyword-titles li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 플랫폼 색 (2026-10-29). 유튜브 = 빨강(토마토), 인스타그램 = 핑크, 틱톡 = 하늘색(브랜드 #25F4EE), 치지직 = 초록,
   스레드 = 검정, 트위치 = 보라. 플랫폼 색은 점·현재 위치·탭 밑줄에만 쓰고, 이름을 늘 같이 붙인다. */
:root {
  --platform-youtube: #e54d2e; --platform-youtube-light: #fdba74;
  --platform-instagram: #d62976; --platform-instagram-light: #f9a8d4;
  --platform-tiktok: #25f4ee; --platform-tiktok-light: #a5fbf8;
  --platform-threads: #101010; --platform-threads-light: #9ca3af;
  --platform-chzzk: #059669; --platform-chzzk-light: #6ee7b7;
}

/* 유튜브·치지직 화면 배너. 구조는 메인과 같고 색만 다르다 — 어느 화면인지 색으로 바로 안다. */
.platform-hero { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
.hero-youtube {
  /* 와인 → 토마토 → 코랄 → 피치. 노을처럼 이어지게 하고, 장식 원 하나에 보색 시안을 살짝 섞는다. */
  background: linear-gradient(135deg, #8f1d3a 0%, #c73a35 30%, #e8603c 62%, #f7a072 88%, #fdd5b1 100%);
  box-shadow: 0 20px 40px -22px rgba(229, 77, 46, 0.45);
}
.hero-youtube::before { background: rgba(253, 213, 177, 0.45); }
.hero-youtube::after { background: rgba(103, 232, 249, 0.28); }
.hero-youtube .hero-keyword { color: #fff1f2; }
/* 앞으로 붙을 플랫폼(아직 화면 없음) */
.hero-instagram {
  background: linear-gradient(135deg, #9d174d 0%, #db2777 40%, #ec4899 72%, #f9a8d4 100%);
  box-shadow: 0 20px 40px -22px rgba(219, 39, 119, 0.45);
}
.hero-tiktok {
  background: linear-gradient(135deg, #0b3b3d 0%, #0fa5ad 40%, #25f4ee 75%, #a5fbf8 100%);
  box-shadow: 0 20px 40px -22px rgba(124, 58, 237, 0.45);
}
.hero-chzzk {
  background: linear-gradient(135deg, #047857 0%, #059669 40%, #10b981 72%, #6ee7b7 100%);
  box-shadow: 0 20px 40px -22px rgba(16, 185, 129, 0.45);
}
.hero-chzzk::before { background: rgba(110, 231, 183, 0.4); }
.hero-chzzk::after { background: rgba(167, 243, 208, 0.4); }
/* 영상·방송 제목은 길어서 소개 문구보다 작게, 두 줄에서 자른다 */
.hero-copy h1.hero-title-sm {
  font-size: 26px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-stat-value { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: #fff; }
.hero-stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.75); }

/* 메인 배너 캐러셀. 장마다 높이가 달라도 트랙이 가장 높은 장에 맞춰 배너가 들썩이지 않는다. */
.carousel { flex: 1 1 360px; min-width: 0; max-width: 600px; display: flex; flex-direction: column; gap: 18px; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.5s ease; }
.carousel-slide { flex: 0 0 100%; min-width: 0; }
.carousel-controls { display: flex; align-items: center; gap: 10px; }
.carousel-single .carousel-controls { display: none; }
.carousel-dots { display: flex; gap: 6px; }
.carousel-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--color-neutral-300, #cbd5e1); transition: width 0.2s ease, background 0.2s ease;
}
.carousel-dot[aria-current="true"] { width: 22px; background: var(--color-accent-700); }
.hero .carousel-dot { background: rgba(255, 255, 255, 0.45); }
.hero .carousel-dot[aria-current="true"] { background: #fff; }
.carousel-arrow {
  width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-200, #e2e8f0);
  background: #fff; color: var(--color-text); font-size: 18px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.carousel-arrow:hover { border-color: var(--color-accent-700); color: var(--color-accent-700); }
.hero .carousel-arrow { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.hero .carousel-arrow:hover { background: rgba(255, 255, 255, 0.26); border-color: #fff; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .carousel-track, .carousel-dot { transition: none; }
}
.hero-snapshot {
  width: min(300px, 100%); flex-shrink: 0; background: #fff; border-radius: var(--radius-lg); color: var(--color-text);
  padding: 22px; box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.35); display: flex; flex-direction: column; gap: 14px;
}
.hero-snapshot-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; }
.hero-snapshot-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 12px; color: var(--color-text-muted); }
.hero-snapshot-legend .dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; display: inline-block; margin-right: 6px; }
.hero-snapshot-total { border-top: 1px solid var(--color-divider); padding-top: 12px; font-weight: 700; }

.grade-tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.grade-tile { padding: 20px; border-radius: var(--radius-lg); border: 1px solid; display: flex; flex-direction: column; gap: 10px; }
.grade-tile-head { display: flex; align-items: center; gap: 10px; }
.grade-tile-icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; }
.grade-tile-count { font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: var(--color-text); }

@media (max-width: 900px) {
  .grade-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 28px; }
}

/* 성과 판정 뱃지. 악성도 등급 색(L0~L3)과 헷갈리지 않게 채도 낮은 별도 색을 쓴다. */
.grade-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; white-space: nowrap; }
.grade-low { background: #fdecec; color: #b42318; }
.grade-normal { background: var(--color-neutral-100); color: var(--color-neutral-700, #444); }
.grade-high { background: #e7f6ee; color: #067647; }
.grade-none { background: var(--color-neutral-100); color: var(--color-neutral-500, #888); }
.subtabs { margin-bottom: 20px; width: fit-content; }

/* 채널 성과 순위표. 좁은 화면에서 칸을 짜부라뜨리면 머리글이 한 글자씩 세로로 선다 —
   폭을 지키고 감싼 상자(overflow-x:auto)가 옆으로 넘기게 한다. */
.rank-table { min-width: 600px; }
.rank-table th, .rank-table td:not(:first-child) { white-space: nowrap; }
.rank-table td:first-child { min-width: 180px; }

/* 메인 화면 영상 키워드 트렌드 */
.trend-list { list-style: none; margin: 8px 0 0; padding: 0; }
.trend-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 4px; border: 0; border-bottom: 1px solid var(--color-neutral-100);
  background: none; font: inherit; font-size: 14px; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm);
}
.trend-row:hover { background: var(--color-neutral-100); }
.trend-row:hover .trend-word { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.trend-row:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 1px; }

/* 치지직 방송: 채팅이 가장 많이 달린 시간 TOP 5 (web/js/chzzk.js renderPeaks).
   카드가 display:flex라 [hidden]을 이긴다 — 데이터가 없을 때 숨길 수 있게 켜둔다. */
.card[hidden] { display: none; }
.peak-list { list-style: none; margin: 0; padding: 0; }
.peak-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 6px; border: 0;
  border-bottom: 1px solid var(--color-neutral-100); background: none; font: inherit; font-size: 14px;
  color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm);
}
.peak-list li:last-child .peak-row { border-bottom: 0; }
.peak-row:hover { background: var(--color-neutral-100); }
.peak-row:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 1px; }
.peak-rank {
  width: 24px; height: 24px; border-radius: var(--radius-sm); flex-shrink: 0; display: grid; place-items: center;
  background: #d1fae5; color: #047857; font-weight: 700; font-size: 12px;
}
.peak-time { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peak-time .text-muted { font-size: 12px; }
.peak-count { font-weight: 700; white-space: nowrap; }
.peak-ratio { font-size: 12px; white-space: nowrap; min-width: 64px; text-align: right; }
/* 키워드 → 관련 영상 창(web/js/keywordvideos.js). 틀은 댓글 팝업(.kw-modal)과 같다. */
.kw-video { display: flex; flex-direction: column; gap: 6px; padding: 12px 8px; margin: 0 -8px; border-bottom: 1px solid var(--color-neutral-100); border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.kw-video:last-child { border-bottom: none; }
.kw-video:hover, .kw-video:focus-visible { background: var(--color-neutral-100); }
.kw-video-title { font-weight: 600; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.trend-rank {
  width: 22px; flex: none; font-weight: 700; text-align: right; color: var(--color-neutral-500);
}
.trend-word { font-weight: 600; margin-right: auto; }
.trend-meta { font-size: 12px; flex: none; }
.trend-change { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-sm); flex: none; }
.trend-up { background: #e7f6ee; color: #067647; }
.trend-down { background: #fdecec; color: #b42318; }
.trend-new { background: var(--color-premium-light, #fff4d6); color: var(--color-premium-dark, #8a5a00); }
/* 전체·장르별 TOP 10: 넓으면 두 단(1~5 | 6~10), 좁으면 한 단 */
.trend-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--trend-rows, 5), auto); grid-auto-flow: column; column-gap: 28px;
}
@media (max-width: 760px) { .trend-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } }
.trend-genre { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--color-neutral-100); }
.trend-genre .trend-list { margin-top: 0; }

/* 채널 비교 (web/js/compare.js) */
.compare-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; }
.compare-table th, .compare-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-neutral-100); text-align: right; white-space: nowrap; }
.compare-table thead th { font-weight: 700; }
.compare-table tbody th { text-align: left; font-weight: 500; color: var(--color-neutral-700); }
.compare-table thead th:first-child { text-align: left; }
.compare-top { font-weight: 800; }
.watch-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-neutral-100); }
.watch-row:last-child { border-bottom: none; }

/* — 순위 탭 — */
.rk-title { font-family: var(--font-heading); font-size: 24px; margin: 0 0 4px; }
.rk-tabs { flex-wrap: wrap; align-self: flex-start; }
.rk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rk-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.rk-card { padding: 20px 22px; gap: 12px; }
.rk-empty { font-size: 14px; padding: 24px 0; text-align: center; }
.rk-note { font-size: 12px; }
.rk-scroll { overflow-x: auto; }
.rk-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.rk-table th { text-align: left; font-weight: 500; color: var(--color-text-muted); padding: 8px 8px; border-bottom: 1px solid var(--color-neutral-200); white-space: nowrap; }
.rk-table td { padding: 10px 8px; border-bottom: 1px solid var(--color-neutral-100); vertical-align: middle; }
.rk-row { cursor: pointer; }
.rk-row:hover { background: var(--color-neutral-100); }
.rk-row.is-open { background: var(--color-accent-100); }
.rk-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.rk-name { min-width: 200px; max-width: 420px; }
.rk-name-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rk-name-text { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-sub { font-size: 12px; margin-top: 2px; }
.rk-genre {
  flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-700); white-space: nowrap;
}
.rk-value { font-weight: 600; white-space: nowrap; }
.rk-dist { display: flex; width: 120px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--color-neutral-100); }
.rk-detail-row td { background: var(--color-neutral-100); padding: 14px 16px; }
.rk-detail { display: flex; flex-direction: column; gap: 8px; }
.rk-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rk-chart { position: relative; height: 220px; }
.rk-chart-tall { height: 300px; }
@media (max-width: 640px) {
  .rk-card { padding: 16px; }
  .rk-name { min-width: 160px; }
}
/* 분석 결과가 열리면 버튼 줄 아래로 한 줄을 다 쓴다 */
.comment-actions > div:has(.analysis, .analysis-error) { flex-basis: 100%; order: 2; }

/* — 유튜브 답글 게시 — */
.reply-posted { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #15803d; }
.reply-posted:empty { display: none; }
.yt-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.yt-redirect {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--color-neutral-100); font-size: 12px; overflow-wrap: anywhere;
}
.yt-redirect code { flex: 1; min-width: 0; }
.yt-channel { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-divider); }
.yt-channel:last-of-type { border-bottom: 0; }

/* ── 워크스페이스 셸 (2026-10-29) ──────────────────────────────────────
 * 왼쪽: 작업 공간 사이드바(플랫폼 탭 · 채널 드롭다운과 최신 영상 · 메뉴 · 사용자).
 * 가운데: 윗줄(현재 위치 · 검색 · 묻기 · 계정) + 본문. 오른쪽: 댓글 상세 패널.
 * 설계: docs/superpowers/specs/2026-10-29-studio-ui-design.md
 * 1279px 이하: 댓글 상세는 오른쪽에서 겹쳐 나온다(사이드바는 그대로).
 * 1100px 이하: 사이드바가 아이콘 막대. 900px 이하: 서랍(☰) + 하단 탭. 560px 이하: 상세는 아래 시트.
 */
:root { --ws-bg: #f6f7f9; --ws-hover: #eceef2; --ws-line: #e5e7eb; }
body { padding-bottom: 0; --current-platform: #2563eb; }
body[data-platform="youtube"] { --current-platform: var(--platform-youtube); }
body[data-platform="chzzk"] { --current-platform: var(--platform-chzzk); }

/* 로그인 전(또는 확인 전)에는 셸을 감추고 본문만 남긴다 */
body[data-auth] .st-header, body[data-auth] .st-nav, body[data-auth] .st-bottom,
body[data-auth] .st-detail, body[data-auth] .st-scrim { display: none !important; }
body[data-auth] .st-shell { display: block; }

.icon-btn {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); font-size: 16px;
}
.icon-btn:hover { background: var(--color-neutral-100); }

/* 셸 칸: 사이드바 | 가운데 | (댓글 상세) */
.st-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
body.detail-open .st-shell { grid-template-columns: 264px minmax(0, 1fr) 380px; }
.st-main { min-width: 0; display: flex; flex-direction: column; }
.st-body { min-width: 0; flex: 1; padding-bottom: 48px; }

/* — 사이드바 — */
.st-nav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 16px; padding: 14px 12px 12px;
  background: var(--ws-bg); border-right: 1px solid var(--ws-line);
}
.st-ws { display: flex; align-items: center; gap: 10px; padding: 4px 6px; text-decoration: none; color: var(--color-text); border-radius: 10px; }
.st-ws:hover { background: var(--ws-hover); }
.st-ws .brand-mark { width: 30px; height: 30px; flex: none; }
.st-ws-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.st-ws-name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.st-ws-sub { font-size: 12px; color: var(--color-neutral-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-platforms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.st-platform {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0 6px; min-width: 0;
  border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--color-neutral-700); white-space: nowrap;
}
.st-platform[data-platform="youtube"] { --p: var(--platform-youtube); }
.st-platform[data-platform="chzzk"] { --p: var(--platform-chzzk); }
.st-platform[data-platform="instagram"] { --p: var(--platform-instagram); }
.st-platform[data-platform="tiktok"] { --p: var(--platform-tiktok); }
.st-platform[data-platform="threads"] { --p: var(--platform-threads); }
.st-platform .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--p); }
.st-platform:not([aria-disabled="true"]):hover { background: var(--ws-hover); }
.st-platform[aria-checked="true"] {
  background: #fff; color: var(--color-text); font-weight: 700;
  border-color: color-mix(in srgb, var(--p) 45%, #fff); box-shadow: var(--shadow-sm);
}
.st-platform[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.st-section { display: flex; flex-direction: column; gap: 2px; }
.st-section-label { padding: 0 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--color-neutral-600); }
.st-muted { padding: 4px 8px; font-size: 12px; color: var(--color-neutral-600); }

/* 채널 드롭다운 */
#st-channel[data-platform="youtube"] { --sp: var(--platform-youtube); }
#st-channel[data-platform="chzzk"] { --sp: var(--platform-chzzk); }
.st-chsel { position: relative; }
.st-chsel-btn {
  width: 100%; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--color-neutral-300); border-radius: 10px; background: #fff; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--color-text); text-align: left;
}
.st-chsel-btn:hover { border-color: var(--color-neutral-400); }
.st-chsel-btn[aria-expanded="true"] { border-color: var(--sp, var(--color-accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp, #2563eb) 15%, transparent); }
.st-chsel-btn .dot { width: 9px; height: 9px; flex: none; border-radius: 999px; background: var(--sp, #2563eb); }
.st-chsel-btn svg { flex: none; color: var(--color-neutral-600); }
.st-chsel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-chsel-pop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 4px; max-height: 340px; padding: 6px;
  background: #fff; border: 1px solid var(--ws-line); border-radius: 10px; box-shadow: var(--shadow-lg);
}
.st-chsel-pop[hidden] { display: none; }
.st-chsel-search {
  height: 34px; flex: none; padding: 0 10px; border: 1px solid var(--color-neutral-300); border-radius: 8px;
  font: inherit; font-size: 13px; color: var(--color-text);
}
.st-chsel-search:focus { outline: none; border-color: var(--sp, var(--color-accent)); }
.st-chsel-list { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.st-chsel-option {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; flex: none;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; color: var(--color-text);
}
.st-chsel-option:hover, .st-chsel-option:focus-visible { background: var(--color-neutral-100); }
.st-chsel-option[aria-selected="true"] { font-weight: 700; background: var(--color-neutral-100); }
.st-chsel-count { flex: none; font-size: 11px; color: var(--color-neutral-600); }
/* 내 채널(연결) / 관찰 채널(URL 분석, 읽기 전용) */
.st-kind { flex: none; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: var(--color-neutral-600); background: var(--color-neutral-100); }
.st-kind.is-mine { color: #1d4ed8; background: #eff5ff; }
.st-chsel-group { padding: 8px 8px 3px; font-size: 11px; font-weight: 700; color: var(--color-neutral-600); }
.st-chsel-group:first-child { padding-top: 2px; }
.st-chsel-link { padding: 6px 8px; font-size: 12px; color: #1d4ed8; text-decoration: none; border-radius: 6px; }
.st-chsel-link:hover { background: #eff5ff; }

/* 최신 영상: 채널 아래 나무 가지처럼 */
.st-recent { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 0 13px; padding-left: 8px; border-left: 1px solid var(--color-neutral-300); }
.st-recent-label { padding: 2px 8px 2px; font-size: 11px; color: var(--color-neutral-600); }
.st-recent-item {
  display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 8px; border-radius: 8px;
  font-size: 13px; color: var(--color-neutral-700); text-decoration: none;
}
.st-recent-item:hover { background: var(--ws-hover); color: var(--color-text); }
.st-recent-item[aria-current="page"] { background: #fff; color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-sm); }
.st-recent-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-badge { flex: none; font-size: 11px; font-weight: 700; color: #9a3412; background: #ffedd5; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.st-live { flex: none; font-size: 10px; font-weight: 700; color: #065f46; border: 1px solid #6ee7b7; border-radius: 5px; padding: 0 5px; }
.st-recent-all { padding: 5px 8px; font-size: 12px; color: var(--color-neutral-600); text-decoration: none; border-radius: 8px; }
.st-recent-all:hover { color: var(--color-text); background: var(--ws-hover); }

.st-menu-item {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; flex: none;
  border-radius: 8px; font-size: 14px; color: var(--color-neutral-700); text-decoration: none; white-space: nowrap;
}
.st-menu-item svg { flex: none; }
.st-menu-item:hover { background: var(--ws-hover); color: var(--color-text); }
.st-menu-item[aria-current="page"] { background: #fff; color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-sm); }
.st-menu-item[aria-current="page"] svg { color: var(--current-platform); }

.st-nav-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ws-line); }
.st-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--color-text); }
.st-user:hover { background: var(--ws-hover); }
.st-user[aria-current="page"] { background: #fff; box-shadow: var(--shadow-sm); }
.st-user-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 999px; display: grid; place-items: center;
  background: #dbeafe; color: #1d4ed8; font-family: var(--font-heading); font-weight: 600; font-size: 14px;
}
.st-user-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.st-user-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-user-sub { font-size: 12px; color: var(--color-neutral-600); }
.st-user-gear { flex: none; color: var(--color-neutral-600); }

/* — 윗줄 (가운데 칸 위) — */
.st-header {
  position: sticky; top: 0; z-index: 25; height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ws-line);
}
.st-drawer-btn, .st-logo { display: none; }
.st-logo { align-items: center; gap: 8px; flex: none; text-decoration: none; color: var(--color-text); white-space: nowrap; }
.st-logo .brand-name { font-size: 17px; }
.st-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; font-size: 14px; white-space: nowrap; }
.st-crumb a { color: var(--color-neutral-600); text-decoration: none; }
.st-crumb a:hover { color: var(--color-text); }
.st-crumb-sep { color: var(--color-neutral-400); }
.st-crumb-here { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.st-search {
  flex: 0 1 380px; min-width: 160px; margin-left: auto; height: 38px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px; color: var(--color-neutral-600);
  border: 1px solid var(--color-neutral-300); border-radius: 10px; background: var(--ws-bg);
}
.st-search:focus-within { background: #fff; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-100); }
.st-search svg { flex: none; }
.st-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--color-text); }
.st-spacer { display: none; }
/* 「헤아림에게 묻기」는 헤아림 기능이라 화면 테마와 상관없이 브랜드 파랑 */
.st-ask { flex: none; height: 38px; white-space: nowrap; font-weight: 600; color: #1d4ed8; background: #eff5ff; border-color: #9dbdf5; }
.st-ask:hover { background: #dbeafe; }
.st-ask[hidden] { display: none; }
.st-me {
  width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: pointer; display: grid; place-items: center;
  background: #dbeafe; color: #1d4ed8; font-family: var(--font-heading); font-weight: 600; font-size: 14px;
}
.st-me:hover, .st-me[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--color-neutral-200); }

/* 계정 메뉴 (프로필 원 아래) */
.menu { position: relative; flex: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  width: 260px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.menu-panel[hidden] { display: none; }
.menu-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--color-neutral-500); }
.menu-panel .api-pill { align-self: flex-start; }
.menu-panel .who { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-neutral-200); }
.menu-panel .who .btn-ghost { padding-inline: 0; color: var(--color-text-muted); }
.menu-panel .who .btn-ghost:hover { background: transparent; color: var(--color-text); }

/* 댓글 행: 누르면 상세 패널. 고른 행은 왼쪽 막대로 표시한다. */
.comment { cursor: pointer; border: 1px solid transparent; }
.comment:hover { background: var(--color-neutral-200); }
.comment.is-selected { background: var(--color-accent-100); border-color: var(--color-accent-200); box-shadow: inset 3px 0 0 var(--color-accent); }
.analyzed-tag { font-size: 10px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-800); }

/* — 댓글 상세 패널 — */
.st-detail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 24px;
  background: var(--ws-bg); border-left: 1px solid var(--ws-line);
}
.st-detail[hidden] { display: none; }
.st-detail:focus { outline: none; }
.st-detail-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.st-detail-head h2 { margin: 0; font-size: 15px; }
.panel-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--ws-line); border-radius: var(--radius-xl);
}
.panel-card .comment-text { font-size: 15px; }
.detail-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.st-detail .analysis, .st-detail .reply-panel, .st-detail .translation { margin-top: 0; }
.sheet-handle { display: none; }

.st-scrim { display: none; position: fixed; inset: 0; z-index: 28; background: rgba(15, 23, 42, .32); }
.st-bottom { display: none; }

/* 가운데가 좁아지지 않게: 1279px 이하에서는 상세가 겹쳐 나온다(사이드바는 접지 않는다) */
@media (max-width: 1279px) {
  body.detail-open .st-shell { grid-template-columns: 264px minmax(0, 1fr); }
  .st-detail {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(420px, 100vw); height: auto;
    box-shadow: -8px 0 30px rgba(15, 23, 42, .16);
  }
  body.detail-open .st-scrim { display: block; }
}

/* 1100px 이하: 사이드바가 아이콘 막대 */
@media (max-width: 1100px) {
  .st-shell, body.detail-open .st-shell { grid-template-columns: 72px minmax(0, 1fr); }
  .st-nav { align-items: center; padding: 14px 8px; gap: 12px; }
  .st-ws { padding: 4px; }
  .st-ws-text, .st-channel-section, .st-section-label, .st-user-text, .st-user-gear { display: none; }
  .st-platform-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .st-platforms { grid-template-columns: minmax(0, 1fr); width: 44px; }
  .st-platform { padding: 9px 0; }
  .st-section { align-items: center; }
  .st-menu-item { width: 44px; justify-content: center; padding: 0; }
  /* 아이콘만 남겨도 화면 읽기 프로그램은 이름을 읽게 글자는 눈에서만 감춘다 */
  .st-menu-item .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .st-nav-foot { border-top: 0; }
  .st-user { padding: 4px; }
}

@media (max-width: 900px) {
  .st-header { gap: 6px; padding: 0 8px; }
  .st-drawer-btn { display: inline-flex; }
  .st-logo { display: flex; }
  .st-crumb, .st-search, .st-ask-label { display: none; }
  .st-spacer { display: block; flex: 1; }
  .st-ask { width: 40px; height: 40px; padding: 0; border-radius: 999px; }
  .st-shell, body.detail-open .st-shell { grid-template-columns: minmax(0, 1fr); }

  /* 서랍 안에서는 다시 넓은 사이드바 그대로 */
  .st-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: min(300px, 86vw); height: auto;
    align-items: stretch; padding: 14px 12px 12px; gap: 16px; visibility: hidden; transform: translateX(-100%);
    transition: transform .2s, visibility .2s; box-shadow: 8px 0 30px rgba(15, 23, 42, .16);
  }
  body.drawer-open .st-nav { visibility: visible; transform: none; }
  body.drawer-open .st-scrim { display: block; }
  .st-ws { padding: 4px 6px; }
  .st-ws-text, .st-user-text { display: flex; }
  .st-section-label, .st-user-gear { display: revert; }
  .st-platform-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .st-channel-section { display: flex; }
  .st-platforms { grid-template-columns: repeat(5, minmax(0, 1fr)); width: auto; }
  .st-platform { padding: 7px 0 6px; }
  .st-section { align-items: stretch; }
  .st-menu-item { width: auto; justify-content: flex-start; padding: 0 10px; }
  .st-menu-item .label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .st-nav-foot { border-top: 1px solid var(--ws-line); }
  .st-user { padding: 8px; }

  .st-body { padding-bottom: 88px; }
  .st-bottom {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--ws-line);
  }
  .st-bottom a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
    font-size: 11px; color: var(--color-neutral-600); text-decoration: none; white-space: nowrap;
  }
  .st-bottom a[aria-current="page"] { color: var(--color-text); font-weight: 700; }
  .st-bottom a[aria-current="page"] svg { color: var(--current-platform); }
  .chat-panel { bottom: 76px; }
}

@media (max-width: 560px) {
  .st-detail {
    top: auto; left: 0; right: 0; width: auto; max-height: 82vh; padding: 8px 16px 20px;
    border-left: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(15, 23, 42, .18);
  }
  .sheet-handle { display: block; flex: none; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--color-neutral-400); }
}

@media (prefers-reduced-motion: reduce) { .st-nav { transition: none; } }

/* ── 채널 목록 (2026-10-29) — 수백 개를 표처럼 촘촘하게. 열 이름은 맨 위 한 줄에만 둔다. */
.ch-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ch-search { width: 240px; max-width: 100%; height: 34px; }
.ch-card { padding: 4px 0 8px; gap: 0; }
.ch-row {
  display: grid; align-items: center; gap: 12px; padding: 8px 16px; min-height: 56px;
  grid-template-columns: 28px 32px minmax(0, 1fr) 150px 76px 76px 64px 32px;
  border-bottom: 1px solid var(--color-neutral-100); cursor: pointer;
}
.ch-list > div:last-child .ch-row { border-bottom: 0; }
.ch-row:hover { background: var(--color-neutral-100); }
.ch-head {
  min-height: 0; padding-block: 10px; cursor: default; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--color-neutral-600); background: none !important; border-bottom-color: var(--color-neutral-200);
}
.ch-check { display: flex; justify-content: center; }
.ch-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--chip, var(--color-accent)); }
.ch-check input:disabled { cursor: not-allowed; }
.ch-rank { font-size: 12px; color: var(--color-neutral-600); text-align: right; }
.ch-name { min-width: 0; }
.ch-title {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; font-size: 15px; color: var(--color-text); text-decoration: none;
}
.ch-title:hover { text-decoration: underline; }
.ch-sub { font-size: 12px; color: var(--color-neutral-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-dist .segbar { width: 100%; }
.ch-num { text-align: right; font-family: var(--font-heading); font-size: 16px; font-weight: 600; white-space: nowrap; }
.ch-head .ch-num { font-family: var(--font-body); font-size: 11px; }
.ch-row .row-delete { padding: 4px; }
.ch-confirm { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: #fef3f2; border-bottom: 1px solid #fecdca; }
.ch-more { display: flex; justify-content: center; padding: 10px 0 4px; }
.ch-more:empty { display: none; }

/* 고른 채널: 아래에 붙어 따라오는 막대 */
.ch-compare-bar {
  position: sticky; bottom: 16px; z-index: 15; margin-top: 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px;
  background: #fff; border: 1px solid var(--color-divider); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.ch-compare-bar[hidden] { display: none; }
.ch-picked { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.ch-picked-item {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 3px 4px 3px 10px;
  border: 1px solid var(--color-neutral-300); border-radius: 999px; font-size: 13px;
}
.ch-picked-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ch-compare-bar .btn { white-space: nowrap; }

@media (max-width: 1100px) {
  .ch-row { grid-template-columns: 28px 28px minmax(0, 1fr) 110px 64px 68px 56px 32px; gap: 10px; }
}
@media (max-width: 900px) {
  .ch-compare-bar { bottom: 76px; }
}
@media (max-width: 700px) {
  .ch-row { grid-template-columns: 24px minmax(0, 1fr) 56px 64px 48px 28px; gap: 8px; padding-inline: 10px; }
  .ch-row .ch-rank, .ch-row .ch-dist { display: none; }
  .ch-search { flex: 1 1 100%; width: auto; order: 3; }
  .ch-picked { flex-basis: 100%; }
  .ch-compare-bar { justify-content: flex-end; }
}
@media (max-width: 420px) {
  .ch-row { grid-template-columns: 24px minmax(0, 1fr) 60px 44px 28px; }
  .ch-row .ch-mean { display: none; }
  .ch-num { font-size: 15px; }
}

/* ── 댓글 탭: 작업대형 2단 (2026-10-29) — 위 등급 칩, 왼쪽 목록, 오른쪽 늘 보이는 상세 칸.
 * 1024px 이하에서는 상세 칸을 숨기고 한 줄 목록 + 오른쪽 패널(겹침)로 돌아간다. */
.wb { display: flex; flex-direction: column; gap: 12px; }
.wb-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-spacer { flex: 1; }
.wb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; flex: none;
  border: 1px solid var(--color-neutral-300); border-radius: 999px; background: #fff; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--color-neutral-700); white-space: nowrap;
}
.wb-chip b { font-weight: 700; color: var(--color-text); }
.wb-chip:hover { background: var(--color-neutral-100); }
.wb-chip[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.wb-chip[aria-pressed="true"] b { color: #fff; }
.wb-chip-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }

.wb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 16px; align-items: start; }
.wb-list { padding: 6px 8px 10px; gap: 0; min-width: 0; }
/* 목록과 상세 칸이 각자 스크롤 — 화면 높이에 맞춘 두 칸 */
.wb-list .comment-list { max-height: calc(100vh - 200px); min-height: 360px; gap: 6px; padding: 2px; }
.wb-list .comment:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* 상세 칸이 늘 보이니 행의 「답글 · 분석」 단추는 필요 없다(좁은 화면에서는 다시 보인다) */
.wb-list .comment-actions { display: none; }
.wb-pane {
  position: sticky; top: 72px; max-height: calc(100vh - 90px); min-height: 360px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--ws-bg); border: 1px solid var(--ws-line); border-radius: var(--radius-xl);
}
.wb-empty { margin: auto; padding: 24px; text-align: center; font-size: 13px; color: var(--color-neutral-600); }

@media (max-width: 1024px) {
  .wb-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-pane { display: none; }
  .wb-list .comment-list { max-height: none; min-height: 0; }
  .wb-list .comment-actions { display: flex; }
}
@media (max-width: 560px) {
  .wb-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; }
  .wb-chips::-webkit-scrollbar { display: none; }
  .wb-spacer { display: none; }
}

/* ── 작업: 답글 승인함·숨긴 댓글·숨기기·같은 콘텐츠 비교 (2026-10-29) ─────────── */
.st-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; flex: none;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: #2563eb;
}
.st-count[hidden] { display: none; }
@media (max-width: 1100px) {
  /* 아이콘 막대에서는 아이콘 귀퉁이에 작은 점 숫자 */
  .st-menu-item { position: relative; }
  .st-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
}
@media (max-width: 900px) {
  .st-count { position: static; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; }
}

.work-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.work-card { padding: 16px 18px; gap: 10px; }
.work-comment { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-neutral-100); }
.work-comment .comment-badge { padding: 1px 7px; }
.work-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.work-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.work-actions .btn { white-space: nowrap; }

/* — 질문·요청 처리함 (#/inbox) — */
.inbox-tabs { flex-wrap: wrap; width: fit-content; max-width: 100%; margin-bottom: 14px; }
.inbox-tabs .tab { white-space: nowrap; }
.inbox-filters { margin-bottom: 12px; }
.inbox-filters .filter-field { min-width: 0; flex: 0 1 auto; }
.inbox-filters .filter-field .input { max-width: 100%; }
.inbox-filters .filter-field:last-child { flex: 1 1 260px; }
.inbox-filters .filter-field:last-child .input { width: 100%; max-width: 520px; }
.inbox-cats, .inbox-cat-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inbox-meta { font-size: 12px; margin-top: 10px; }
.inbox-cat-filter, .inbox-cat {
  display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer;
  padding: 4px 11px; border-radius: 999px; font: inherit; font-size: 13px;
  background: #fff; color: var(--color-neutral-700); border: 1px solid var(--color-neutral-300);
}
.inbox-cat { font-size: 12px; padding: 2px 10px; border-style: dashed; color: var(--color-neutral-600); }
.inbox-cat-filter:hover, .inbox-cat:hover { border-color: var(--color-neutral-500); }
.inbox-cat-filter[aria-pressed="true"] {
  background: var(--color-accent-100); color: var(--color-accent-800); border-color: var(--color-accent-200); font-weight: 600;
}
.inbox-cat[aria-pressed="true"] { border-style: solid; font-weight: 600; }
.inbox-cat-question[aria-pressed="true"] { background: #e8f1ff; color: #1d4ed8; border-color: #bfd6ff; }
.inbox-cat-content_request[aria-pressed="true"] { background: #effbf3; color: #15803d; border-color: #bfe8cc; }
.inbox-cat-improvement[aria-pressed="true"] { background: #fff6e6; color: #b45309; border-color: #fbd9a5; }
.inbox-cat-bug[aria-pressed="true"] { background: #fff0f0; color: #b42318; border-color: #f8c4c4; }
.inbox-card .comment-head { flex-wrap: wrap; row-gap: 2px; }
.inbox-card .comment-source { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-status-field { display: inline-flex; align-items: center; gap: 8px; }
.inbox-status { height: 32px; min-width: 120px; padding-top: 0; padding-bottom: 0; }

/* 답글 칸: 대기 중인 승인 요청 */
.reply-draft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-md); background: #eff5ff; font-size: 13px; }
.reply-draft-tag { flex: none; font-size: 11px; font-weight: 700; color: #1d4ed8; }
.reply-draft-text { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-draft a { flex: none; color: #1d4ed8; font-size: 12px; }

/* 숨기기 */
.mod-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mod-row .btn { white-space: nowrap; }
.mod-state { font-size: 12px; font-weight: 700; color: #9a3412; background: #ffedd5; border-radius: 6px; padding: 2px 8px; }
.st-detail .mod-card { margin-bottom: 12px; }
.mod-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.mod-toggle input { width: 18px; height: 18px; margin: 0; flex: none; }

/* 같은 콘텐츠 비교 */
.link-card { padding: 20px 22px; gap: 12px; }
.link-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.link-rows { display: flex; flex-direction: column; gap: 4px; }
.link-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(80px, 160px) 52px auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-md);
}
.link-row.is-current { background: var(--color-neutral-100); }
.link-platform {
  justify-self: start; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  color: var(--color-neutral-700); background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300);
}
.link-platform.p-youtube { color: #b42318; border-color: #fecdca; background: #fff6f4; }
.link-platform.p-chzzk { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.link-name { min-width: 0; display: flex; flex-direction: column; }
.link-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--color-text); text-decoration: none; }
a.link-title:hover { text-decoration: underline; }
.link-sub { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-bar { height: 8px; border-radius: 999px; background: var(--color-neutral-200); overflow: hidden; }
.link-bar span { display: block; height: 100%; border-radius: 999px; background: var(--lv2); }
.link-ratio { text-align: right; font-size: 14px; }
.link-picker { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); }
.link-picker .input { width: 100%; }
.link-options { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.link-option {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; text-align: left; font: inherit; font-size: 13px; color: var(--color-text);
}
.link-option:hover, .link-option:focus-visible { background: var(--color-neutral-100); }
.link-option-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-option-ch { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
@media (max-width: 560px) {
  .link-row { grid-template-columns: minmax(0, 1fr) 52px auto; }
  .link-row .link-platform, .link-row .link-bar { display: none; }
  .link-option-ch { display: none; }
}

/* ── 스튜디오 · 연동 전 플랫폼 초안 (2026-10-29) ─────────────────────────── */
/* 트위치 다시 추가 — 트위치 브랜드 보라. 이름을 늘 같이 붙인다(색만으로 가르지 않는다). */
:root { --platform-twitch: #9146ff; --platform-twitch-light: #d8c5ff; }
body[data-platform="instagram"] { --current-platform: var(--platform-instagram); }
body[data-platform="tiktok"] { --current-platform: var(--platform-tiktok); }
body[data-platform="threads"] { --current-platform: var(--platform-threads); }
body[data-platform="twitch"] { --current-platform: var(--platform-twitch); }

.st-platforms { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.st-platform { font-size: 10.5px; padding: 7px 0 5px; }
.st-platform[data-platform="twitch"] { --p: var(--platform-twitch); }
.st-menu-dot { width: 9px; height: 9px; margin: 0 4.5px; border-radius: 999px; flex: none; }
.p-youtube { --dot: var(--platform-youtube); } .p-chzzk { --dot: var(--platform-chzzk); }
.p-instagram { --dot: var(--platform-instagram); } .p-tiktok { --dot: var(--platform-tiktok); }
.p-threads { --dot: var(--platform-threads); } .p-twitch { --dot: var(--platform-twitch); }
.st-menu-dot, .draft-dot { background: var(--dot, var(--color-neutral-400)); }
.st-draft-tag {
  margin-left: auto; flex: none; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  color: var(--color-neutral-600); background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300);
}
@media (max-width: 1100px) {
  .st-platforms { grid-template-columns: minmax(0, 1fr); }
  .st-draft-tag { display: none; }
}
@media (max-width: 900px) {
  .st-platforms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .st-draft-tag { display: inline; }
}

/* 초안 화면 */
.draft-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.draft-dot { width: 14px; height: 14px; border-radius: 999px; flex: none; display: inline-block; }
.draft-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--color-neutral-700); background: var(--color-neutral-100); border: 1px dashed var(--color-neutral-400); }
.draft-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.draft-card { padding: 20px 22px; gap: 12px; }
.draft-table { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
.draft-table dt { color: var(--color-neutral-600); font-weight: 600; }
.draft-table dd { margin: 0; }
.draft-table dd.is-unknown { color: #9a3412; }
.draft-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.draft-preview { padding: 20px 22px; gap: 10px; border-style: dashed; align-items: flex-start; }
@media (max-width: 900px) { .draft-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .draft-table { grid-template-columns: minmax(0, 1fr); gap: 2px; } .draft-table dd { margin-bottom: 8px; } }

/* 스튜디오 */
.studio-head { margin-bottom: 18px; }
.studio-h2 { font-size: 17px; margin: 24px 0 10px; }
.studio-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.studio-kpi { padding: 14px 16px; gap: 4px; }
.studio-kpi-label { font-size: 12px; color: var(--color-neutral-600); }
.studio-kpi-value { font-family: var(--font-heading); font-size: 26px; font-weight: 600; color: var(--color-text); line-height: 1.15; }
.studio-kpi-link { font-size: 12px; color: #1d4ed8; text-decoration: none; }
.studio-kpi-link:hover { text-decoration: underline; }
.studio-platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.studio-pcard { padding: 16px 18px; gap: 12px; color: var(--color-text); text-decoration: none; }
.studio-pcard:hover { box-shadow: var(--shadow-md); }
.studio-pcard.is-draft { border-style: dashed; background: var(--ws-bg); }
.studio-pcard-head { display: flex; align-items: center; gap: 8px; }
.studio-pcard-head b { font-size: 15px; }
.studio-chip {
  margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--color-neutral-700); background: var(--color-neutral-100);
}
.studio-chip.is-mine { color: #1d4ed8; background: #eff5ff; }
.studio-pcard-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.studio-stat-label { font-size: 11px; color: var(--color-neutral-600); }
.studio-stat-value { font-size: 15px; font-weight: 700; white-space: nowrap; }
/* 등급 분포: 조각 사이 2px 틈, 끝은 둥글게 */
.studio-dist { display: flex; gap: 2px; height: 10px; }
.studio-dist span { min-width: 3px; border-radius: 3px; }
.studio-dist.is-empty { background: var(--color-neutral-100); border-radius: 3px; }
.studio-pcard-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-top: auto; }
.studio-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; align-items: start; }
.studio-panel { padding: 18px 20px; gap: 12px; }
.studio-recent { display: flex; flex-direction: column; }
.studio-recent-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid var(--color-neutral-100); color: var(--color-text); text-decoration: none;
}
.studio-recent-row:last-child { border-bottom: 0; }
.studio-recent-row:hover { background: var(--color-neutral-100); }
.studio-recent-name { min-width: 0; display: flex; flex-direction: column; }
.studio-recent-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-recent-sub { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-recent-ratio { text-align: right; font-size: 14px; }
.studio-accounts { display: flex; flex-direction: column; gap: 2px; }
.studio-account { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 14px; }
.studio-account .draft-dot { width: 10px; height: 10px; }
.studio-account-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-platform.p-instagram, .link-platform.p-tiktok, .link-platform.p-threads, .link-platform.p-twitch { color: var(--color-neutral-700); }
@media (max-width: 900px) { .studio-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .studio-kpi-value { font-size: 22px; }
  .studio-recent-row { grid-template-columns: minmax(0, 1fr) 52px; }
  .studio-recent-row .link-platform { display: none; }
}

/* 채널·영상 검색 — 견본 A처럼 사이드바 작업 공간 이름 아래 */
.st-nav .st-search {
  position: relative; flex: none; margin: 0; height: 36px; min-width: 0;
  background: #fff; border-radius: 9px;
}
.st-nav .st-search input { font-size: 13px; }
.st-search-pop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  display: flex; flex-direction: column; padding: 6px; max-height: 340px; overflow-y: auto;
  background: #fff; border: 1px solid var(--ws-line); border-radius: 10px; box-shadow: var(--shadow-lg);
}
.st-search-pop[hidden] { display: none; }
.st-search-videos { color: #1d4ed8; border-top: 1px solid var(--color-neutral-100); margin-top: 4px; border-radius: 0 0 6px 6px; }
.st-search-pop .st-menu-dot { margin: 0 2px; }
@media (max-width: 1100px) { .st-nav .st-search { display: none; } }
@media (max-width: 900px) { .st-nav .st-search { display: flex; } }

/* ── 견본 A 셸 맞춤 (2026-10-29) — 넓은 화면은 윗줄 없이 사이드바가 다 맡는다 ─────── */
@media (min-width: 901px) { .st-header { display: none; } }
.st-crumb {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px 32px 0;
  display: flex; align-items: center; gap: 6px; min-height: 0; font-size: 13px; color: var(--color-neutral-600);
}
.st-crumb:empty { display: none; }
.st-crumb-here { color: var(--color-text); font-weight: 600; max-width: 480px; }
.st-crumb + .st-body main { padding-top: 10px; }

/* 사이드바 맨 아래: 묻기 + 사용자 */
.st-nav-foot { display: flex; flex-direction: column; gap: 6px; }
.st-ask-side { width: 100%; height: 38px; justify-content: center; border-radius: 10px; }
.st-user { position: relative; display: flex; align-items: center; gap: 2px; padding: 0; }
.st-user:hover { background: none; }
.st-user-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; font: inherit; color: var(--color-text); text-align: left;
}
.st-user-btn:hover, .st-user-btn[aria-expanded="true"] { background: var(--ws-hover); }
.st-user-gear { color: var(--color-neutral-600); width: 36px; height: 36px; border-radius: 10px; }
.st-user-gear[aria-current="page"] { background: #fff; color: var(--color-text); box-shadow: var(--shadow-sm); }
.st-user .menu-panel { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.st-ask-icon { color: #1d4ed8; }
.st-ask-icon[hidden] { display: none; }

/* 아이콘 막대(901~1100px): 묻기는 아이콘만 */
@media (max-width: 1100px) and (min-width: 901px) {
  .st-ask-side { width: 44px; padding: 0; }
  .st-ask-side span { display: none; }
  .st-user { flex-direction: column; }
}
@media (max-width: 900px) {
  .st-crumb { display: flex; padding: 12px 20px 0; }
  .st-nav .st-ask-side { width: 100%; height: 38px; padding: 0 14px; border-radius: 10px; }
  .st-user-text { display: flex; }
}
@media (max-width: 560px) { .st-crumb { padding: 10px 14px 0; } }

/* 사이드바가 길어도 맨 아래(묻기·사용자)는 늘 보이게 바닥에 붙인다 */
.st-nav-foot { position: sticky; bottom: -12px; margin-bottom: -12px; padding: 8px 0 12px; background: var(--ws-bg); z-index: 2; }

/* 견본 C 영상 헤더 카드 — 제목·메타·버튼·밑줄 탭 */
.vh-card { padding: 20px 24px 0; gap: 14px; margin-bottom: 18px; }
.vh-top { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.vh-title { flex: 1 1 360px; min-width: 0; }
.vh-title h1 { font-size: 24px; line-height: 1.3; margin: 0; }
.vh-meta { margin-top: 6px; font-size: 13px; color: var(--color-neutral-600); }
.vh-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vh-actions .btn { white-space: nowrap; }
.vh-tabs { background: none; padding: 0; gap: 26px; border-radius: 0; border-top: 1px solid var(--color-neutral-100); }
.vh-tabs .tab { padding: 12px 2px; border-radius: 0; background: none; box-shadow: none; font-size: 15px; color: var(--color-neutral-600); }
.vh-tabs .tab[aria-selected="true"] { background: none; box-shadow: inset 0 -2px 0 var(--color-accent); color: var(--color-text); font-weight: 700; }
@media (max-width: 560px) {
  .vh-card { padding: 16px 16px 0; }
  .vh-title h1 { font-size: 20px; }
  .vh-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
}

/* 댓글 행 이니셜 원 */
.comment-avatar {
  flex: none; align-self: flex-start; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  background: var(--color-neutral-200); color: var(--color-neutral-700); font-weight: 600; font-size: 13px;
}
@media (max-width: 560px) { .comment-avatar { display: none; } }

/* 윗줄이 없어졌으니 댓글 작업대 상세 칸은 화면 위에 붙는다 */
@media (min-width: 901px) { .wb-pane { top: 16px; max-height: calc(100vh - 32px); } }

/* 내 채널 트리 */
.st-mine-btn {
  width: 100%; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 8px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-text); text-align: left;
}
.st-mine-btn:hover { background: var(--ws-hover); }
.st-mine-btn svg { flex: none; color: var(--color-neutral-600); transition: transform .15s; }
.st-mine-btn[aria-expanded="false"] svg { transform: rotate(-90deg); }
.st-mine-node .st-recent[hidden] { display: none; }
.st-mine-node .st-recent { margin-top: 2px; }
.st-mine-empty { display: block; padding: 6px 8px; font-size: 12px; color: #1d4ed8; text-decoration: none; border-radius: 8px; }
.st-mine-empty:hover { background: #eff5ff; }
@media (prefers-reduced-motion: reduce) { .st-mine-btn svg { transition: none; } }

/* 틱톡 하늘색은 흰 바탕에서 옅다 — 점마다 얇은 테두리를 둘러 자리를 보이게 한다 */
.st-platform[data-platform="tiktok"] .dot, .st-menu-dot.p-tiktok, .draft-dot.p-tiktok { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .28); }

/* ── 플랫폼 아이콘 · 채널 트리 (2026-10-29) ───────────────────────────────
 * 아이콘은 선택되지 않으면 회색, 지금 플랫폼이면 그 색. 늘 이름이 옆에 있어 색만으로 가르지 않는다. */
.pf-icon { flex: none; color: var(--color-neutral-500); }
.pf-youtube { --pc: var(--platform-youtube); }
.pf-chzzk { --pc: var(--platform-chzzk); }
.pf-instagram { --pc: var(--platform-instagram); }
.pf-tiktok { --pc: var(--platform-tiktok); }
.pf-threads { --pc: var(--platform-threads); }
.pf-twitch { --pc: var(--platform-twitch); }
.pf-icon.is-on, .is-current > .pf-icon, .st-menu-item[aria-current="page"] .pf-icon, .st-bottom a[aria-current="page"] .pf-icon { color: var(--pc); }
/* 틱톡 하늘색 선은 흰 바탕에서 옅다 — 켜졌을 때만 얇은 그림자로 윤곽을 준다 */
.pf-tiktok.is-on, .is-current > .pf-tiktok, .st-menu-item[aria-current="page"] .pf-tiktok { filter: drop-shadow(0 0 .6px rgba(15, 23, 42, .75)); }

.st-tree { display: flex; flex-direction: column; gap: 1px; }
.st-tree-head {
  width: 100%; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; font: inherit; font-size: 14px; color: var(--color-neutral-700); text-align: left; text-decoration: none;
}
.st-tree-head:hover { background: var(--ws-hover); color: var(--color-text); }
.st-tree-head.is-current { color: var(--color-text); font-weight: 700; }
.st-tree-head .st-chev { flex: none; color: var(--color-neutral-500); transition: transform .15s; }
.st-tree-head[aria-expanded="false"] .st-chev { transform: rotate(-90deg); }
.st-chev-space { width: 14px; flex: none; }
.st-tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tree-count { flex: none; font-size: 11px; font-weight: 600; color: var(--color-neutral-500); }
.st-tree-head.is-draft { color: var(--color-neutral-600); }
.st-tree-head.is-draft.is-current { color: var(--color-text); }
.st-tree-children { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 21px; padding-left: 8px; border-left: 1px solid var(--color-neutral-300); }
.st-tree-children[hidden] { display: none; }
.st-tree-ch {
  width: 100%; display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; font: inherit; font-size: 13px; color: var(--color-neutral-700); text-align: left; text-decoration: none;
}
.st-tree-ch:hover { background: var(--ws-hover); color: var(--color-text); }
.st-tree-ch[aria-current="true"] { background: #fff; color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-sm); }
.st-tree-ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tree-focus .st-recent { margin: 2px 0 4px 10px; }
.st-tree .st-recent-all { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .st-tree-head .st-chev { transition: none; } }

/* 아이콘 막대(901~1100px): 트리는 아이콘 줄만 */
@media (max-width: 1100px) and (min-width: 901px) {
  .st-tree { align-items: center; }
  .st-tree-head { width: 44px; justify-content: center; padding: 0; }
  .st-tree-head .st-chev, .st-chev-space, .st-tree-name, .st-tree-count, .st-tree .st-draft-tag, .st-tree-children { display: none; }
}

/* 사이트 푸터: 약관·정책 링크, 사업자 정보, 고지 (web/js/legal.js) */
.site-footer { flex-direction: column; gap: 6px; padding-bottom: 28px; line-height: 1.6; }
.site-footer p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 4px; }
.foot-links a { color: inherit; text-decoration: none; white-space: nowrap; }
.foot-links a:hover { text-decoration: underline; }
.foot-links a.is-strong { font-weight: 700; color: var(--color-text); }
.foot-biz { display: flex; flex-wrap: wrap; gap: 0 14px; }
.foot-biz span { white-space: nowrap; }
.foot-model summary { cursor: pointer; width: fit-content; }
.foot-model-body { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 4px; overflow-wrap: anywhere; }
body[data-auth] .site-footer { max-width: 420px; margin-inline: auto; padding-inline: 16px; }

.legal-page { max-width: 760px; margin: 0 auto; padding: 28px 32px; line-height: 1.7; }
.legal-page h1 { font-size: 22px; margin: 0 0 4px; }
.legal-page h2 { font-size: 15px; margin: 22px 0 6px; }
.legal-page p { margin: 0 0 4px; font-size: 14px; overflow-wrap: anywhere; }
.legal-meta { font-size: 12px !important; }
@media (max-width: 560px) { .legal-page { padding: 20px 16px; } }