/* Gloss — 스타일 (사이드바 레이아웃) */
/* ===== design tokens (single source of truth — 새 컴포넌트는 이 스케일만 사용) ===== */
:root {
  /* font size ladder — 반각 스텝(11.5/12.5/13.5…)을 정수로 흡수 */
  --fs-3xs: 10px;  /* 배지·초소형 라벨 */
  --fs-2xs: 11px;  /* 칩·키워드 */
  --fs-xs: 12px;   /* 메타·작은 컨트롤 */
  --fs-sm: 13px;   /* 기본 UI 텍스트 */
  --fs-md: 14px;   /* 본문·버튼 */
  --fs-lg: 15px;   /* 큰 라벨 */
  /* radius ladder */
  --r-xs: 4px;     /* 초소형(썸네일 등) */
  --r-sm: 6px;     /* 작은 컨트롤·행 */
  --r-md: 8px;     /* 버튼·입력 */
  --r-lg: 10px;    /* 카드·팝업 */
  --r-xl: 14px;    /* 컴포저 등 큰 표면 */
  --r-pill: 999px; /* 알약 */
  /* focus rings */
  --focus-light: 2px solid #a5b4fc; /* 밝은 표면 */
  --focus-dark: 1px solid #6366f1;  /* 어두운 표면 */
}
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/vendor/pretendard/PretendardVariable.woff2') format('woff2-variations');
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Noto Sans KR', sans-serif;
  background: #475569; color: #1f2937;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
[hidden] { display: none !important; } /* display:flex 등이 hidden 속성을 덮지 않게 */

/* ---------- 사이드바 ---------- */
#sidebar {
  width: 56px; flex: none;
  background: #0f172a; color: #e2e8f0;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0; gap: 6px;
}
#logo {
  width: 40px; height: 40px; color: #94a3b8;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--r-lg); cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
#logo:hover { background: #1e293b; color: #e2e8f0; }
#side-tools { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
#side-tools .tool-sep { width: 26px; height: 1px; background: #334155; margin: 5px 0; }
#aud-menu .am-action {
  display: block; width: 100%; margin-top: 8px; height: 30px;
  background: #4f46e5; color: #fff; border: none; border-radius: var(--r-md);
  font-size: var(--fs-xs); cursor: pointer;
}
#aud-menu .am-action:hover { background: #4338ca; }
.sent-hl-layer { transition: opacity .6s ease; opacity: 1; }
.sent-hl-layer.fading { opacity: 0; }
#side-tools .tool {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #94a3b8;
  border: none; border-radius: var(--r-lg); cursor: pointer;
}
@media (hover: hover) { #side-tools .tool:hover { color: #e2e8f0; } }
#side-tools .tool.active { color: #fff; }
#history-btns button, #btn-clear-all { display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; background: transparent; border: none; border-radius: var(--r-lg); width: 40px; height: 36px; cursor: pointer; }
@media (hover: hover) { #history-btns button:hover, #btn-clear-all:hover { color: #e2e8f0; background: #1e293b; } }
/* 단축키 실행 시 버튼 눌림 피드백 — 짧은 펄스로 원상 복귀 (disabled opacity와 겹쳐도 자연스럽게) */
#history-btns button.kbd-flash { animation: kbd-flash .35s ease-out; opacity: 1 !important; }
@keyframes kbd-flash {
  0% { background: #4f46e5; color: #fff; transform: scale(.94); }
  55% { background: #4f46e5; color: #fff; }
  100% { background: transparent; color: #94a3b8; transform: scale(1); }
}
@media (hover: hover) { #side-tools .tool:hover { background: #1e293b; } }
#side-tools .tool.active { background: #4f46e5; }
/* clear press feedback on tap/click (touch :active is too brief to notice) */
.press-flash { animation: press-flash .22s ease-out; }
@keyframes press-flash {
  0% { transform: scale(.86); filter: brightness(1.5); }
  100% { transform: scale(1); filter: none; }
}
#colors { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; }
#colors .color {
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); cursor: pointer;
}
#colors .color.active { border-color: #fff; transform: scale(1.15); }
/* 4번째 스와치(직접 선택)를 형제 색 원 3개와 동일한 크기·형태로 (도넛 링 제거) */
#color-custom {
  width: 22px; height: 22px; padding: 0; border: 2px solid rgba(255,255,255,.25);
  border-radius: 50%; background: transparent; cursor: pointer;
}
#color-custom.active { border-color: #fff; transform: scale(1.15); }
#color-custom::-webkit-color-swatch-wrapper { padding: 0; }
#color-custom::-webkit-color-swatch { border: none; border-radius: 50%; }
#color-custom::-moz-color-swatch { border: none; border-radius: 50%; }
/* 도구별 옵션 — 해당 도구가 활성일 때만 표시 */
#tool-opts { margin-top: 12px; }
#tool-opts .opt-group { display: none; flex-direction: column; align-items: center; gap: 4px; }
body[data-tool="pen"] #tool-opts [data-for="pen"] { display: flex; }
body[data-tool="erase"] #tool-opts [data-for="erase"] { display: flex; }
#tool-opts button {
  width: 34px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--r-md); cursor: pointer;
  color: #e2e8f0; font-size: var(--fs-md);
}
#tool-opts button:hover { background: #1e293b; }
#tool-opts button.active { background: #334155; outline: 1px solid #6366f1; }
#tool-opts button i { display: block; border-radius: 50%; background: #e2e8f0; }
#btn-clear-all { margin-top: 6px; }

#history-btns { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
#history-btns button {
  width: 42px; height: 34px; font-size: 16px;
  background: transparent; color: #94a3b8; border: none; border-radius: var(--r-md); cursor: pointer;
}
@media (hover: hover) { #history-btns button:hover { background: #1e293b; color: #e2e8f0; } }
#history-btns button:disabled { opacity: .3; cursor: default; }

/* ---------- 메인 컬럼 ---------- */
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

#toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: #1e293b; color: #e2e8f0;
  flex: none; height: 48px; /* 한 줄 48px — 제목이 min-width:0으로 양보해 넘치지 않음 */
}
#doc-title {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #cbd5e1; font-size: var(--fs-sm); font-weight: 600;
}
.spacer { flex: 1; min-width: 8px; }
#toolbar button {
  background: transparent; color: #cbd5e1; border: none; border-radius: var(--r-md);
  height: 32px; padding: 0 11px; cursor: pointer; font-size: var(--fs-sm);
  white-space: nowrap; flex: none; line-height: 1;
  transition: background .12s ease, color .12s ease;
}
#toolbar button:hover { background: #334155; color: #fff; }
/* zoom pair: equal fixed width so − (U+2212) and + line up optically */
#btn-zoom-out, #btn-zoom-in { width: 32px; padding: 0; font-size: 16px; }
/* margin-width control (popover slider) */
#margin-wrap { position: relative; display: inline-flex; }
#margin-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 120;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #1e293b; border: 1px solid #334155; border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4); white-space: nowrap;
}
#margin-toggle {
  font-size: var(--fs-xs); color: #cbd5e1; background: #334155;
  border: none; border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
#margin-toggle:hover { background: #475569; color: #fff; }
#margin-pop input[type="range"] { width: 110px; accent-color: #6366f1; }
#margin-val { font-size: var(--fs-xs); color: #e2e8f0; min-width: 3ch; text-align: right; }
#btn-margin.active { background: #334155; color: #fff; }
body.no-margins .wb { display: none; }
.tb-sep { width: 1px; height: 20px; background: #334155; margin: 0 4px; flex: none; }
/* split button: main = open audience window, caret = options menu */
#btn-audience { background: #4f46e5; border-radius: 8px 0 0 8px; }
#btn-audience:hover { background: #4338ca; }
#toolbar #btn-aud-caret {
  background: #4f46e5; border-radius: 0 8px 8px 0; padding: 0 7px;
  border-left: 1px solid rgba(255, 255, 255, .28); font-size: var(--fs-3xs);
}
#toolbar #btn-aud-caret:hover { background: #4338ca; }
#page-controls { display: flex; align-items: center; gap: 8px; flex: none; }
#page-num {
  width: 3.2em; height: 28px; text-align: center; border: 1px solid #334155; border-radius: var(--r-sm);
  background: #0f172a; color: #e2e8f0; font-size: var(--fs-sm); -moz-appearance: textfield;
}
#page-num::-webkit-outer-spin-button, #page-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#page-num:focus { outline: var(--focus-dark); }
#page-count, #zoom-level { font-size: var(--fs-xs); color: #94a3b8; white-space: nowrap; }
#zoom-level { min-width: 4ch; text-align: center; }
/* progress text must not shrink — only the ellipsis-capable #doc-title gives way */
#prep-status { font-size: var(--fs-xs); color: #a5b4fc; white-space: nowrap; flex: none; }
#prep-status button { height: 26px; padding: 0 10px; font-size: var(--fs-xs); background: #4f46e5; }

/* ---------- 본문 ---------- */
#content { flex: 1; min-height: 0; display: flex; }
#home, #viewer { flex: 1; overflow-y: auto; }

/* 시작 화면 — 라이브러리 */
#home { background: #f8fafc; color: #1f2937; }
.home-inner { max-width: 1080px; margin: 0 auto; padding: 32px; }
#home-head { display: flex; align-items: center; gap: 7px; margin-bottom: 24px; }
#home-head h1 { margin-right: 8px; } /* a little breathing room between the logo and search */
#home h1 { margin: 0; font-size: 24px; flex: none; cursor: pointer; }
#search {
  flex: 1; padding: 10px 14px 10px 40px; font-size: var(--fs-md);
  border: 1px solid transparent; border-radius: 10px; background-color: #eef1f5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; background-size: 17px;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#search::placeholder { color: #94a3b8; }
#search:hover { background-color: #e7ebf1; }
#search:focus { outline: none; background-color: #fff; border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,.13); }
#home-head #btn-open {
  flex: none; background: #4f46e5; color: #fff; border: none; border-radius: var(--r-lg);
  padding: 10px 18px; font-size: var(--fs-md); cursor: pointer;
}
#library { display: flex; gap: 20px; align-items: flex-start; }
#lib-side { width: 190px; flex: none; }
#col-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 260px; overflow-y: auto; /* long collection lists scroll (hint below) */
  scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
#col-list.scrollable::-webkit-scrollbar { width: 7px; }
#col-list.scrollable::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: var(--r-xs); }
#col-list .col {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border: none; border-radius: var(--r-md); background: transparent;
  font-size: var(--fs-md); color: #334155; cursor: pointer; text-align: left;
}
#col-list .col:hover { background: #e2e8f0; }
#col-list .col.active { background: #e0e7ff; color: #3730a3; font-weight: 600; }
#col-list .cnt { font-size: var(--fs-xs); color: #94a3b8; }
#btn-add-col {
  margin-top: 8px; padding: 7px 12px; border: 1px dashed #cbd5e1; border-radius: var(--r-md);
  background: transparent; color: #64748b; font-size: var(--fs-sm); cursor: pointer; text-align: left;
}
#btn-add-col:hover { border-color: #6366f1; color: #4f46e5; }
#lib-side #btn-vocab {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 8px 12px;
  border: none; border-radius: var(--r-md);
  background: transparent; font-size: var(--fs-md); color: #334155; cursor: pointer; text-align: left;
}
#lib-side #btn-vocab:hover { background: #e2e8f0; }
#lib-side #btn-vocab svg { color: #64748b; flex: none; }
#lib-main { flex: 1; min-width: 0; }
#list-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 20px; }
#paper-count { font-size: var(--fs-sm); color: #94a3b8; }
#dropzone {
  border: 2px dashed #cbd5e1; border-radius: var(--r-lg); background: #fff;
  padding: 18px; text-align: center; color: #94a3b8; font-size: var(--fs-sm);
  transition: background .15s, border-color .15s; margin-bottom: 14px;
}
#dropzone.drag { background: #eef2ff; border-color: #6366f1; }
#paper-list { list-style: none; padding: 0; margin: 0; }
#paper-list .empty { color: #94a3b8; padding: 20px 4px; }
.paper-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin: 8px 0;
  background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r-lg);
}
.paper-card:hover { border-color: #a5b4fc; box-shadow: 0 2px 10px rgba(79, 70, 229, .07); }
.pc-main { flex: 1; min-width: 0; cursor: pointer; }
.pc-title { font-size: var(--fs-lg); font-weight: 600; color: #1e293b; line-height: 1.4; }
.pc-venue {
  display: inline-block; margin-right: 8px; padding: 1px 8px; vertical-align: 1px;
  background: #4f46e5; color: #fff; border-radius: var(--r-sm);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .02em;
}
.pc-venue.plain { background: #e2e8f0; color: #475569; }
.pc-venue.arxiv { background: #b31b1b; }
.pc-venue.journal { background: #0d9488; } /* 저널은 청록, 학회는 남색 */
.pc-doi { color: #6366f1; text-decoration: none; font-size: var(--fs-xs); }
.pc-doi:hover { text-decoration: underline; }

/* 왼쪽 필터 (쇼핑몰 스타일) */
#lib-filters {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid #e2e8f0;
  display: flex; flex-direction: column; gap: 8px;
}
#lib-filters .filter-label {
  font-size: var(--fs-2xs); font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .05em; padding: 0 2px;
}
.f-group {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px;
  max-height: 176px; overflow-y: auto; /* 항목이 많아지면 박스 안에서 스크롤 */
  scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
/* 스크롤 가능함을 명확히: 항상 보이는 얇은 스크롤바 + 하단 "N개 더" 스티키 힌트 */
.f-group.scrollable::-webkit-scrollbar { width: 7px; }
.f-group.scrollable::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: var(--r-xs); }
.f-group.scrollable::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.f-more {
  position: sticky; bottom: 0; flex: none; border: none; cursor: pointer;
  padding: 12px 0 2px; text-align: center; font-size: var(--fs-2xs); color: #64748b;
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0), #f8fafc 60%);
  transition: opacity .15s;
}
.f-more:hover { color: #4f46e5; }
.f-more.gone { opacity: 0; pointer-events: none; }
.f-check {
  display: flex; align-items: center; gap: 7px; padding: 4px 4px;
  font-size: var(--fs-sm); color: #334155; cursor: pointer; border-radius: var(--r-sm);
}
.f-check:hover { background: #e2e8f0; }
.f-check input { accent-color: #4f46e5; }
.f-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-cnt { font-size: var(--fs-2xs); color: #94a3b8; }
.f-empty { color: #cbd5e1; font-size: var(--fs-xs); padding: 2px 4px; }
/* Facet search — inline at the right of the label. Always in layout (no shift),
   fades in on hover/focus, stays visible while it holds a query. */
#lib-filters .filter-label { display: flex; align-items: center; gap: 8px; }
.f-search {
  flex: 1; min-width: 0; max-width: 120px; margin-left: auto;
  padding: 2px 8px; font-size: var(--fs-2xs); font-weight: 400;
  text-transform: none; letter-spacing: 0; color: #475569;
  border: none; border-radius: var(--r-sm); background: #e9edf3; /* 배경(#f8fafc)보다 살짝 진하게 */
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.filter-label:hover .f-search, .f-search:focus, .f-search.has-value { opacity: 1; }
.f-search:focus { outline: none; background: #e2e8f0; }
.f-search::placeholder { color: #94a3b8; }
.f-year-val { font-weight: 400; color: #4f46e5; text-transform: none; letter-spacing: 0; }

/* 연도 이중 범위 슬라이더 — 트랙은 가상 요소 대신 별도 배경으로 (브라우저 호환) */
.f-range {
  position: relative; height: 26px; margin: 2px 4px 14px;
}
.f-range::before { /* 공용 트랙 */
  content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 4px;
  background: #cbd5e1; border-radius: 2px;
}
.f-range input[type="range"] {
  position: absolute; inset: 0; width: 100%; margin: 0; height: 26px;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
/* WebKit/Blink */
.f-range input[type="range"]::-webkit-slider-runnable-track { height: 26px; background: transparent; }
.f-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%; background: #4f46e5;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  margin-top: 5px; cursor: pointer;
}
/* Firefox */
.f-range input[type="range"]::-moz-range-track { height: 26px; background: transparent; }
.f-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 12px; height: 12px; border-radius: 50%; background: #4f46e5;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
.pc-merge {
  margin-top: 8px; padding: 6px 10px; font-size: var(--fs-xs);
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--r-md); color: #9a3412;
}
.pc-merge button {
  margin-left: 8px; padding: 2px 8px; font-size: var(--fs-2xs); cursor: pointer;
  background: #ea580c; color: #fff; border: none; border-radius: var(--r-sm);
}
.kw {
  background: #f1f5f9; color: #64748b; border-radius: var(--r-pill);
  padding: 2px 9px; font-size: var(--fs-2xs);
}
/* 선택 모드 */
#sel-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 12px;
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: var(--r-lg);
  color: #3730a3; font-size: var(--fs-sm);
}
#sel-bar button {
  border: 1px solid #c7d2fe; background: #fff; color: #4338ca;
  border-radius: var(--r-md); padding: 6px 12px; font-size: var(--fs-sm); cursor: pointer;
}
#sel-bar button:hover { background: #e0e7ff; }
#sel-bar #sel-del { color: #b91c1c; border-color: #fecaca; }
#sel-bar #sel-del:hover { background: #fee2e2; }
.paper-card.selectable { cursor: pointer; }
.paper-card.selectable .pc-side { display: none; }
/* 선택 원: 제목 왼쪽 인라인 — 평소엔 자리를 차지하지 않고 hover 시에만 나타남 */
.pc-check {
  display: inline-block; vertical-align: middle; box-sizing: border-box;
  width: 0; height: 15px; margin-right: 0; overflow: hidden;
  border: 2px solid #cbd5e1; border-radius: 50%;
  opacity: 0; cursor: pointer;
  transition: opacity .12s, width .12s, margin-right .12s, border-color .12s, background .12s;
}
.paper-card:hover .pc-check, .paper-card.selectable .pc-check {
  width: 15px; margin-right: 7px; opacity: 1;
}
.paper-card:not(.selectable) .pc-check:hover { border-color: #6366f1; }
.paper-card.selected { border-color: #4f46e5; background: #eef2ff; }
.paper-card.selected .pc-check { border-color: #4f46e5; background: #4f46e5 center/11px no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8.5l3.5 3.5L13 5" stroke="white" stroke-width="2.5" fill="none"/></svg>'); }
.pc-sub {
  margin-top: 3px; font-size: var(--fs-xs); color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tag {
  background: #eef2ff; color: #4338ca; border-radius: var(--r-pill);
  padding: 2px 9px; font-size: var(--fs-2xs); cursor: pointer;
}
.tag:hover { background: #fee2e2; color: #b91c1c; text-decoration: line-through; }
.tag-input {
  border: none; background: transparent; font-size: var(--fs-xs); width: 56px;
  color: #64748b; padding: 2px 4px;
}
.tag-input:focus { outline: var(--focus-light); border-radius: var(--r-sm); background: #fff; }
.pc-side { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.pc-col {
  border: 1px solid #e2e8f0; border-radius: var(--r-md); padding: 4px 6px;
  font-size: var(--fs-xs); color: #475569; background: #f8fafc; max-width: 120px;
}
.pc-del, .pc-edit, .pc-dl {
  border: none; background: transparent; cursor: pointer; font-size: var(--fs-md);
  opacity: .35; padding: 2px 4px; border-radius: var(--r-sm);
}
.paper-card:hover .pc-del, .paper-card:hover .pc-edit, .paper-card:hover .pc-dl { opacity: .8; }
.pc-del:hover { background: #fee2e2; }
.pc-edit:hover { background: #e0e7ff; }

/* 카드 내 인라인 메타 수정 폼 */
.pc-form { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; cursor: default; }
.pc-form input {
  border: 1px solid #cbd5e1; border-radius: var(--r-md); padding: 6px 10px; font-size: var(--fs-sm);
}
.pc-form input:focus { outline: var(--focus-light); border-color: #6366f1; }
.pc-form .f-row { display: flex; gap: 6px; align-items: center; }
.pc-form .f-venue { width: 130px; }
.pc-form .f-year { width: 70px; }
.pc-form button {
  border: none; border-radius: var(--r-md); padding: 6px 12px; font-size: var(--fs-xs); cursor: pointer;
}
.pc-form .f-save { background: #4f46e5; color: #fff; }
.pc-form .f-cancel { background: #e2e8f0; color: #475569; }

/* ---------- 뷰어 ---------- */
#viewer { padding: 24px 0; }
#pages { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.page-row { position: relative; display: flex; align-items: flex-start; justify-content: center; touch-action: manipulation; }
.page {
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3);
  position: relative; /* 텍스트 레이어·주석 오버레이의 기준 */
}
/* 양옆 화이트보드 — 흰 종이가 옆으로 이어진 느낌 */
.wb { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.wb.wb-left { border-right: 1px dashed #e2e8f0; border-radius: 6px 0 0 6px; }
.wb.wb-right { border-left: 1px dashed #e2e8f0; border-radius: 0 6px 6px 0; }
.ink { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
body[data-tool="pen"] .page-row { cursor: crosshair; touch-action: none; }
body[data-tool="pen"] .textLayer { pointer-events: none; }
body[data-tool="erase"] .page-row { cursor: cell; touch-action: none; }
body[data-tool="erase"] .textLayer { pointer-events: none; }
/* highlight/underline: geometric drag select — block touch-action so the drag
   doesn't leak into scrolling; let the text layer pass events through to the page */
body[data-tool="highlight"] .page-row, body[data-tool="underline"] .page-row { cursor: text; touch-action: none; }
body[data-tool="highlight"] .textLayer, body[data-tool="underline"] .textLayer { pointer-events: none; }
/* live highlight/underline preview — inner divs snap to the actual lines/portions */
.drag-sel-live { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.drag-sel-live > div { position: absolute; opacity: .35; border-radius: 2px; mix-blend-mode: multiply; }

/* 텍스트 레이어 — 캔버스 위 투명 글자 */
.textLayer {
  position: absolute; inset: 0; overflow: hidden;
  line-height: 1; text-size-adjust: none; forced-color-adjust: none;
  transform-origin: 0 0; caret-color: CanvasText;
}
.textLayer span, .textLayer br {
  color: transparent; position: absolute; white-space: pre;
  cursor: text; transform-origin: 0% 0%;
}
.textLayer span .w { position: static; cursor: pointer; border-radius: 2px; }
.textLayer span .w:hover { background: rgba(99, 102, 241, .28); }
/* 드래그 선택 중에는 호버 배경 억제 (선택 색과 이중으로 보임) */
body.has-selection .textLayer span .w:hover { background: transparent; }
.textLayer ::selection { background: rgba(99, 102, 241, .3); }
.textLayer span .cite { position: static; cursor: pointer; border-radius: 2px; }
.textLayer span .cite:hover { background: rgba(16, 185, 129, .3); }

/* 주석 오버레이 (형광펜·밑줄) */
.anno-layer { position: absolute; inset: 0; pointer-events: none; }
.anno { position: absolute; }
.anno.highlight { opacity: .4; mix-blend-mode: multiply; border-radius: 2px; }
.anno.underline { opacity: .9; border-radius: 1px; }

body[data-tool="highlight"] .textLayer ::selection { background: rgba(255, 213, 79, .5); }
body[data-tool="underline"] .textLayer ::selection { background: rgba(99, 102, 241, .35); }

/* ---------- 툴팁 · 팝오버 ---------- */
#tooltip {
  position: fixed; z-index: 100; max-width: 380px; min-width: 180px;
  background: #1e293b; color: #e2e8f0;
  border: 1px solid #334155; border-radius: var(--r-lg); padding: 12px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  font-size: var(--fs-md); line-height: 1.55;
}
.tt-head { display: flex; align-items: baseline; gap: 8px; }
.tt-word { font-weight: 700; font-size: 16px; }
.tt-pos {
  font-size: var(--fs-2xs); color: #c7d2fe; background: #3730a3;
  border-radius: var(--r-xs); padding: 1px 6px;
}
.tt-context { margin-top: 6px; }
.tt-general { margin-top: 4px; color: #94a3b8; font-size: var(--fs-sm); }
.tt-error { margin-top: 6px; color: #fca5a5; font-size: var(--fs-sm); }
.tt-hint { margin-top: 6px; color: #818cf8; font-size: var(--fs-xs); }
.tt-selected { color: #94a3b8; font-size: var(--fs-xs); font-style: italic; margin-bottom: 6px; }
.tt-loading { margin-top: 6px; color: #94a3b8; }
.dots::after { content: ''; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.tt-ref { margin-top: 6px; font-size: var(--fs-sm); }
.tt-ref b { color: #6ee7b7; }

/* 번역 카드 안의 불릿 항목 — 목록으로 줄바꿈 */
.tr-sent.tr-bullet {
  display: block; margin: 3px 0 3px 4px;
  padding-left: 15px; text-indent: -15px;
}

/* 전체 번역 원문 강조 — 파랑 (형광펜 노랑·해설 초록과 구분) */
.sent-hl-layer { position: absolute; inset: 0; pointer-events: none; }
.sent-hl-layer div {
  position: absolute; background: rgba(59, 130, 246, .28); border-radius: var(--r-xs);
}
.sent-hl-layer div.note-hl { background: rgba(52, 211, 153, .35); } /* 여백 해설은 초록 */

/* 인용 관계 칩 · 폴더 제안 — 칩에 갖다대면 즉시 팝업 */
.pc-cite { font-size: var(--fs-2xs); color: #6366f1; cursor: default; white-space: nowrap; position: relative; }
.cite-pop {
  /* fixed + JS coords: .pc-sub's overflow:hidden (ellipsis) would clip an absolute child */
  display: none; position: fixed; z-index: 90;
  flex-direction: column; gap: 5px; padding: 9px 11px;
  width: max-content; max-width: 380px; white-space: normal;
  background: #1e293b; color: #e2e8f0; border-radius: var(--r-md);
  font-size: var(--fs-xs); line-height: 1.45; box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.cite-pop::before { /* hover bridge: keep :hover alive while moving down into the popup */
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.pc-cite:hover .cite-pop { display: flex; }
.cp-item { cursor: pointer; }
.cp-item b { color: #a5b4fc; font-weight: 600; margin-right: 4px; }
.cp-item:hover { color: #c7d2fe; }
.pc-suggest {
  border: 1px dashed #a5b4fc; background: #eef2ff; color: #4338ca;
  font-size: var(--fs-2xs); padding: 2px 8px; border-radius: var(--r-pill); cursor: pointer;
}
.pc-suggest:hover { background: #e0e7ff; border-style: solid; }

/* Touch (iPad): browser handles pan; pinch is intercepted (gesture events).
   Drawing tools take full pointer control so strokes don't scroll the page. */
#viewer { touch-action: pan-x pan-y; }
body[data-tool="pen"] .page-row,
body[data-tool="highlight"] .page-row,
body[data-tool="underline"] .page-row,
body[data-tool="erase"] .page-row { touch-action: none; }
button, .tool { touch-action: manipulation; } /* no 300ms delay / double-tap zoom */

/* 설정 다이얼로그 */
.set-dlg { min-width: 560px; }
.set-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.set-sec {
  font-size: var(--fs-2xs); font-weight: 700; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .05em; margin: 12px 0 6px;
}
.set-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.set-label { flex: 1; min-width: 0; font-size: var(--fs-sm); color: #334155; }
/* shortcut rebind key button */
.sc-key { min-width: 52px; padding: 3px 10px; border: 1px solid #cbd5e1; border-radius: var(--r-sm);
  background: #f8fafc; font-family: ui-monospace, monospace; font-size: var(--fs-xs); font-weight: 600;
  color: #334155; cursor: pointer; }
.sc-key:hover { background: #eef2ff; border-color: #a5b4fc; }
.sc-key.capturing { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.set-row select, .set-row input[type="number"] {
  padding: 5px 8px; font-size: var(--fs-sm); border: 1px solid #cbd5e1; border-radius: var(--r-sm); background: #fff;
}
.set-row input[type="number"] { width: 70px; }
/* Fixed column widths so the three per-task dropdowns line up across rows regardless of
   content length (Codex model names are long). flex:0 0 <w> = don't grow/shrink; overflow
   is clipped by the native select. */
.set-row .set-engine { flex: 0 0 116px; }
.set-row .set-model { flex: 0 0 150px; }
.set-row .set-effort { flex: 0 0 86px; }
.set-row select { min-width: 0; }
/* model·effort are advanced — hidden until the "고급" toggle is on (users just pick an engine) */
.set-dlg:not(.show-adv) .set-row .set-model, .set-dlg:not(.show-adv) .set-row .set-effort { display: none; }
.set-ai-head { display: flex; align-items: center; justify-content: space-between; }
.set-adv { font-size: var(--fs-2xs); font-weight: 400; text-transform: none; letter-spacing: 0; color: #64748b; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.set-row input[type="checkbox"] { accent-color: #4f46e5; width: 16px; height: 16px; }

/* 그림/표/수식 ✨ AI 설명 칩 — 해당 영역에 커서를 올릴 때만 캡션(번호) 아래 표시 */
.fig-chip {
  position: absolute; z-index: 7;
  border: 1px solid #c7d2fe; background: rgba(255, 255, 255, .95); border-radius: var(--r-pill);
  font-size: var(--fs-2xs); line-height: 1; padding: 4px 8px; cursor: pointer;
  color: #4338ca; box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.fig-chip.show { opacity: .95; pointer-events: auto; }
.fig-chip:hover { opacity: 1; background: #eef2ff; }

/* 레퍼런스 팝업 링크 */
.tt-ref-links { display: block; margin-top: 3px; }
.tt-ref-links a { color: #93c5fd; text-decoration: none; margin-right: 10px; font-size: var(--fs-xs); }
.tt-ref-links a:hover { text-decoration: underline; }
.tt-open {
  border: none; background: #334155; color: #e2e8f0; font-size: var(--fs-xs);
  padding: 2px 8px; border-radius: var(--r-sm); cursor: pointer;
}
.tt-open:hover { background: #4f46e5; }

/* 문서 내 검색 (Ctrl+F) */
.find-hl-layer { position: absolute; inset: 0; pointer-events: none; }
.find-hl {
  position: absolute; background: rgba(251, 146, 60, .40); border-radius: 2px;
  transition: background-color .15s ease, outline-color .15s ease;
}
.find-hl.cur { background: rgba(249, 115, 22, .55); outline: 2px solid #ea580c; }
#find-bar {
  position: fixed; top: 54px; right: 24px; z-index: 60;
  display: flex; align-items: center; gap: 6px;
  background: #1e293b; padding: 8px 10px; border-radius: var(--r-lg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
#find-bar input {
  width: 200px; padding: 6px 10px; font-size: var(--fs-sm);
  border: 1px solid #475569; border-radius: var(--r-sm); background: #0f172a; color: #e2e8f0;
}
#find-bar input:focus { outline: var(--focus-light); }
#find-count { font-size: var(--fs-xs); color: #94a3b8; min-width: 40px; text-align: center; }
#find-bar button {
  border: none; background: transparent; color: #cbd5e1; cursor: pointer;
  font-size: var(--fs-sm); padding: 4px 6px; border-radius: var(--r-sm);
}
#find-bar button:hover { background: #334155; }

/* 여백 해설 카드 (오른쪽 화이트보드) */
.wb.wb-right { position: relative; }
.note-card {
  position: absolute; left: 8px; right: 8px;
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b;
  border-radius: var(--r-md); font-size: var(--fs-xs); line-height: 1.55;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); overflow: hidden;
  z-index: 3; /* a card near the page bottom can overflow into the next page's margin — keep it on top, not hidden behind it */
}
.nc-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: #fef3c7; cursor: pointer;
}
.nc-quote {
  flex: 1; color: #92400e; font-style: italic; font-size: var(--fs-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-del {
  flex: none; border: none; background: transparent; color: #b45309;
  font-size: var(--fs-md); cursor: pointer; padding: 0 2px; border-radius: var(--r-xs);
}
.nc-del:hover { background: #fde68a; }
.nc-body { padding: 8px 10px; color: #374151; white-space: pre-wrap; min-height: 20px; }
.nc-body:focus { outline: 2px solid #fbbf24; border-radius: 0 0 8px 8px; background: #fffdf5; }
.nc-body:empty::before { content: attr(data-placeholder); color: #d1d5db; }
.note-card.self { background: #eff6ff; border-color: #bfdbfe; border-left-color: #3b82f6; }
.note-card.self .nc-head { background: #dbeafe; }
.note-card.self .nc-quote { color: #1d4ed8; }
.note-card.collapsed .nc-body { display: none; }

/* 전체 번역 패널 */
#trans-panel {
  width: 400px; flex: none; display: flex; flex-direction: column;
  background: #f8fafc; border-left: 1px solid #cbd5e1;
}
#trans-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid #e2e8f0; background: #fff; color: #334155;
}
#btn-trans-close, #btn-trans-redo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: none; background: transparent; font-size: 18px; color: #64748b;
  cursor: pointer; border-radius: var(--r-sm);
}
#btn-trans-close:hover, #btn-trans-redo:hover { background: #e2e8f0; }
#btn-trans-redo { font-size: var(--fs-lg); }
/* 헤더 텍스트 버튼 (목차/용어집/저장) — ptab과 같은 톤의 고스트 버튼 */
.tr-head-btn {
  border: none; background: transparent; padding: 4px 9px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; color: #64748b; cursor: pointer;
}
.tr-head-btn:hover { background: #e2e8f0; color: #1e293b; }
/* 빈 상태 공통 */
.empty, .cp-empty, #vocab-list .muted { color: #94a3b8; font-size: var(--fs-sm); text-align: center; padding: 18px 8px; }
/* 용어집 편집 다이얼로그 */
.gloss-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, .35);
  display: flex; align-items: center; justify-content: center;
}
.gloss-dialog {
  width: 440px; max-height: 76vh; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-xl); box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
  padding: 16px;
}
.gloss-dialog h3 { margin: 0 0 4px; font-size: var(--fs-lg); color: #1e293b; }
.gloss-dialog .gd-hint { font-size: var(--fs-xs); color: #64748b; margin-bottom: 10px; }
.gd-rows { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.gd-row { display: flex; gap: 6px; align-items: center; }
.gd-row input {
  flex: 1; padding: 6px 9px; font-size: var(--fs-xs); border: 1px solid #cbd5e1; border-radius: var(--r-sm);
}
.gd-row input:focus { outline: none; border-color: #6366f1; }
.gd-row .gd-del {
  border: none; background: transparent; color: #94a3b8; cursor: pointer;
  font-size: var(--fs-lg); padding: 2px 6px; border-radius: var(--r-sm);
}
.gd-row .gd-del:hover { background: #fee2e2; color: #dc2626; }
.gd-foot { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.gd-add {
  border: 1px dashed #cbd5e1; background: transparent; color: #64748b;
  padding: 5px 10px; border-radius: var(--r-sm); font-size: var(--fs-xs); cursor: pointer;
}
.gd-add:hover { border-color: #6366f1; color: #4f46e5; }
.gd-save {
  margin-left: auto; border: none; background: #4f46e5; color: #fff;
  padding: 7px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.gd-save:hover { background: #4338ca; }
.gd-cancel { border: none; background: transparent; color: #64748b; padding: 7px 10px; cursor: pointer; border-radius: var(--r-sm); }
.gd-cancel:hover { background: #f1f5f9; }
/* 패널 탭 (번역 ↔ 챗) */
.panel-tabs { display: flex; gap: 2px; background: #e2e8f0; border-radius: var(--r-md); padding: 2px; }
.ptab {
  border: none; background: transparent; padding: 4px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; color: #64748b; cursor: pointer;
}
.ptab.active { background: #fff; color: #1e293b; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* 논문 챗 패널 */
#chat-panel {
  width: 400px; flex: none; display: flex; flex-direction: column;
  background: #f8fafc; border-left: 1px solid #cbd5e1;
}
#chat-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid #e2e8f0; background: #fff;
}
/* 헤더 액션 버튼 — 번역 패널 .tr-head-btn과 같은 고스트 톤 (탭 전환 시 일관) */
#chat-head .chip-btn {
  border: none; background: transparent; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; color: #64748b; padding: 4px 9px;
  cursor: pointer; transition: background .12s, color .12s;
}
#chat-head .chip-btn:hover:not(:disabled) { background: #e2e8f0; color: #1e293b; }
#chat-head .chip-btn:disabled { opacity: .4; cursor: default; }
#btn-chat-close {
  border: none; background: transparent; font-size: 18px; color: #64748b;
  cursor: pointer; border-radius: var(--r-sm); padding: 0 6px;
}
#btn-chat-close:hover { background: #e2e8f0; }

/* 요약 카드 — tldr만 기본 표시, 클릭해 확장 (본문을 밀어내지 않게 내부 스크롤) */
#chat-summary {
  flex: none; margin: 10px 12px 0; padding: 11px 13px;
  font-size: var(--fs-xs); line-height: 1.6; color: #1e293b;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #ddd6fe; border-radius: var(--r-lg);
  box-shadow: 0 1px 4px rgba(79, 70, 229, .06);
}
#chat-summary .cs-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; cursor: pointer; user-select: none;
}
#chat-summary .cs-fold {
  border: none; background: rgba(255, 255, 255, .7); border-radius: var(--r-sm);
  color: #6d28d9; font-size: var(--fs-2xs); font-weight: 600; padding: 2px 8px; cursor: pointer;
  height: 22px;
}
/* ↻: cs-fold와 같은 톤의 아이콘 필 (기본 버튼 모양 그대로 노출되던 것 정리) */
#chat-summary .cs-head > span:last-child { display: flex; gap: 5px; align-items: center; }
#chat-summary .cs-redo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: none; background: rgba(255, 255, 255, .7); border-radius: var(--r-sm);
  color: #6d28d9; font-size: var(--fs-sm); cursor: pointer;
}
#chat-summary .cs-redo:hover, #chat-summary .cs-fold:hover { background: #fff; }
#chat-summary .cs-tldr { margin-top: 7px; font-weight: 600; color: #312e81; }
#chat-summary .cs-body { max-height: 240px; overflow-y: auto; scrollbar-width: thin; }
#chat-summary.folded .cs-body { display: none; }
#chat-summary .cs-sec {
  margin-top: 9px; font-size: var(--fs-3xs); font-weight: 800; color: #7c3aed;
  text-transform: uppercase; letter-spacing: .05em;
}
#chat-summary ul { margin: 3px 0 0 17px; padding: 0; }
#chat-summary .cs-note { margin-top: 8px; font-size: var(--fs-2xs); color: #8b5cf6; }
.sk-line {
  height: 10px; margin: 8px 0; border-radius: var(--r-xs);
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 45%, #e2e8f0 65%);
  background-size: 200% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* 주제 칩 바 */
#chat-topicbar {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 9px 12px 1px;
}
#chat-chips {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0;
}
#chat-chips::-webkit-scrollbar { display: none; }
.topic-chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  max-width: 170px; padding: 4px 9px;
  border: 1px solid #e2e8f0; background: #fff; border-radius: var(--r-pill);
  font-size: var(--fs-xs); color: #475569; cursor: pointer; transition: all .12s;
}
.topic-chip .tc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-chip.active { background: #4f46e5; border-color: #4f46e5; color: #fff; font-weight: 600; }
.topic-chip:hover:not(.active) { border-color: #a5b4fc; }
.topic-chip .tc-del { opacity: 0; font-size: var(--fs-sm); line-height: 1; transition: opacity .12s; }
.topic-chip:hover .tc-del { opacity: .7; }
.topic-chip .tc-del:hover { opacity: 1; }
#chat-new {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 1px dashed #cbd5e1; background: transparent; color: #64748b;
  font-size: var(--fs-md); line-height: 1; cursor: pointer;
}
#chat-new:hover { border-color: #6366f1; color: #4f46e5; }

/* 메시지 영역 */
#chat-body { flex: 1; overflow-y: auto; padding: 12px 14px 16px; scrollbar-width: thin; }
#chat-empty { text-align: center; padding: 44px 12px 20px; color: #64748b; }
#chat-empty .ce-icon { font-size: 34px; margin-bottom: 10px; }
#chat-empty .ce-title { font-size: var(--fs-md); font-weight: 700; color: #334155; }
#chat-empty .ce-sub { font-size: var(--fs-xs); margin-top: 4px; color: #94a3b8; }
#chat-empty .ce-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 18px; }
.ce-chip {
  border: 1px solid #e2e8f0; background: #fff; border-radius: var(--r-pill);
  padding: 7px 13px; font-size: var(--fs-xs); color: #4338ca; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04); transition: all .12s;
}
.ce-chip:hover { background: #eef2ff; border-color: #c7d2fe; transform: translateY(-1px); }
#chat-panel.loading .ce-chip { opacity: .5; pointer-events: none; }

.msg {
  margin: 8px 0; padding: 9px 13px; border-radius: var(--r-xl);
  font-size: var(--fs-sm); line-height: 1.65; max-width: 90%;
  white-space: normal; word-break: break-word;
  animation: msg-in .18s ease;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.msg.user {
  position: relative; /* anchor the hover actions overlay */
  background: linear-gradient(135deg, #4f46e5, #6d28d9); color: #fff;
  margin-left: auto; border-bottom-right-radius: 5px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .25);
}
.msg.assistant {
  background: #fff; border: 1px solid #e8edf4; border-bottom-left-radius: 5px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
}
.msg.assistant.streaming::after {
  content: '▍'; color: #6366f1; animation: caret 1s steps(2) infinite; margin-left: 1px;
}
@keyframes caret { 50% { opacity: 0; } }
.msg-status { color: #64748b; font-size: var(--fs-xs); }
.msg-error { color: #dc2626; font-size: var(--fs-xs); }
/* 마크다운 (챗 답변) */
.msg p, #chat-summary p { margin: 0 0 3px; }
.msg ul, .msg ol { margin: 3px 0 5px 19px; padding: 0; }
.msg li { margin: 2px 0; }
.msg .md-h { font-weight: 700; margin: 7px 0 3px; font-size: var(--fs-sm); }
.msg .md-gap { height: 6px; }
/* lightweight math (LaTeX → Unicode in md.js) — serif italic reads as math without KaTeX */
.math { font-family: 'Cambria Math', 'STIX Two Math', 'Latin Modern Math', Cambria, 'Times New Roman', serif; font-style: italic; }
.math-block { display: block; text-align: center; margin: 6px 0; }
.msg code, #chat-summary code {
  background: #f1f5f9; border: 1px solid #e8edf4; border-radius: var(--r-xs);
  padding: 0 4px; font-size: var(--fs-xs); font-family: ui-monospace, 'SF Mono', Consolas, monospace;
}
.msg.user code { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }
.msg pre {
  background: #0f172a; color: #e2e8f0; border-radius: var(--r-md); padding: 9px 11px;
  font-size: var(--fs-xs); font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  overflow-x: auto; margin: 5px 0;
}
.pg-chip {
  border: none; background: #e0e7ff; color: #4338ca; border-radius: var(--r-sm);
  font-size: var(--fs-2xs); font-weight: 700; padding: 1px 7px; margin: 0 0 0 2px;
  cursor: pointer; vertical-align: 1px; transition: background .12s;
}
.pg-chip:hover { background: #c7d2fe; }
.msg.user .pg-chip { background: rgba(255, 255, 255, .25); color: #fff; }
.pg-chip + .pg-chip { margin-left: 3px; }

/* 챗 인용 칩 클릭 시 대상 페이지 플래시 (이미 화면에 있어도 이동이 보이게) */
.page-row.page-flash .page { animation: page-flash 1.4s ease; }
@keyframes page-flash {
  0% { box-shadow: 0 0 0 4px rgba(99, 102, 241, .55); }
  100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0); }
}

/* 입력부 — 하나의 둥근 컴포저 */
#chat-input-row { flex: none; padding: 10px 12px 12px; background: transparent; }
#chat-composer {
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--r-xl);
  padding: 9px 11px 7px; transition: border-color .15s, box-shadow .15s;
}
#chat-composer:focus-within { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
#chat-panel.loading #chat-composer { background: #f1f5f9; }
#chat-input {
  width: 100%; border: none; resize: none; background: transparent;
  font-size: var(--fs-sm); line-height: 1.55; font-family: inherit; outline: none;
  max-height: 120px;
}
#chat-input:disabled { color: #94a3b8; }
#composer-foot { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
#chat-model, #chat-effort {
  border: none; background: #f1f5f9; color: #64748b; border-radius: var(--r-sm);
  font-size: var(--fs-2xs); padding: 3px 4px; cursor: pointer;
}
#chat-effort { color: #6366f1; } /* reasoning effort — visually distinct from the model select */
#chat-send {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: #4f46e5; color: #fff; font-size: var(--fs-lg); cursor: pointer;
  transition: background .12s, transform .12s;
}
#chat-send:hover:not(:disabled) { background: #4338ca; transform: scale(1.06); }
#chat-send:disabled { background: #cbd5e1; cursor: default; }

/* 유저 메시지 hover 액션 (수정·포크) — 말풍선 아래 행이라 잘리지 않음 */
/* absolute overlay just below the user bubble — no layout shift, always clickable on hover.
   (was a sibling row with negative margins → the next message overlapped it and ate the clicks) */
.msg-actions {
  position: absolute; right: 2px; bottom: -18px; z-index: 6;
  display: flex; gap: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease .25s; /* small hide delay so the cursor can travel to the buttons */
}
.msg.user:hover .msg-actions, .msg-actions:hover {
  opacity: 1; pointer-events: auto; transition-delay: 0s;
}
.msg-actions button {
  border: 1px solid #e2e8f0; background: #fff; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); padding: 3px 10px; cursor: pointer; color: #475569;
  white-space: nowrap;
}
.msg-actions button:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }

/* 응답 미수신 재시도 바 */
.retry-bar {
  display: flex; align-items: center; gap: 10px; margin: 6px 0;
  padding: 8px 12px; font-size: var(--fs-xs); color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-lg);
}
.retry-bar button {
  border: 1px solid #f59e0b; background: #fff; color: #b45309; border-radius: var(--r-sm);
  font-size: var(--fs-xs); padding: 3px 10px; cursor: pointer;
}
.retry-bar button:hover { background: #fef3c7; }

/* 수정 모드 배지 */
#edit-badge {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: var(--fs-2xs); color: #6d28d9; background: #f5f3ff;
  border-radius: var(--r-md); padding: 4px 8px;
}
#edit-badge button { border: none; background: none; cursor: pointer; color: #6d28d9; font-size: var(--fs-sm); margin-left: auto; }

/* 퀴즈 뷰 (대화와 분리된 화면) */
#chat-panel.quizview #chat-input-row,
#chat-panel.quizview #chat-topicbar { display: none; }
#chat-head .chip-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.qv-head {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 8px;
  font-size: var(--fs-sm);
}
.qv-back {
  border: 1px solid #e2e8f0; background: #fff; border-radius: var(--r-md);
  font-size: var(--fs-xs); padding: 4px 9px; cursor: pointer; color: #475569;
}
.qv-back:hover { background: #eef2ff; }
.qv-redo { border: none; background: none; cursor: pointer; color: #64748b; font-size: var(--fs-lg); border-radius: var(--r-sm); }
.qv-redo:hover { background: #e2e8f0; }
.qz-card { margin-top: 12px; padding: 10px 12px; border: 1px solid #eef2f7; border-left: 3px solid #c7d2fe; border-radius: var(--r-lg); background: #fbfcfe; }
.qz-q { font-weight: 600; margin-bottom: 7px; }
.qz-choices { display: flex; flex-direction: column; gap: 5px; }
.qz-choice {
  text-align: left; border: 1px solid #e2e8f0; background: #fff; border-radius: var(--r-md);
  padding: 7px 11px; font-size: var(--fs-xs); cursor: pointer; transition: all .12s;
}
.qz-choice:hover:not(:disabled) { background: #eef2ff; border-color: #c7d2fe; }
.qz-choice.correct { border-color: #16a34a; background: #f0fdf4; color: #166534; font-weight: 600; }
.qz-choice.wrong { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.qz-exp { margin-top: 8px; font-size: var(--fs-xs); color: #475569; background: #f8fafc; border-radius: var(--r-md); padding: 8px 10px; }
.qz-reveal {
  border: 1px solid #c7d2fe; background: #fff; color: #4338ca; border-radius: var(--r-sm);
  font-size: var(--fs-2xs); padding: 3px 9px; cursor: pointer;
}
.qz-reveal:hover { background: #eef2ff; }
.qz-ans ul { margin: 4px 0 4px 18px; padding: 0; font-size: var(--fs-xs); }

/* 청중 화면 표시 항목 메뉴 (버튼 hover 시 아래로) */
#aud-wrap { position: relative; display: inline-block; }
#aud-menu {
  position: absolute; top: 100%; right: 0; z-index: 80; display: none;
  min-width: 200px; padding: 10px 12px;
  background: #1e293b; border: 1px solid #334155; border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
}
#aud-wrap:hover #aud-menu, #aud-menu:hover,
#aud-wrap:focus-within #aud-menu { display: flex; flex-direction: column; gap: 7px; } /* touch: tap focuses button */
#aud-menu .am-title { font-size: var(--fs-2xs); font-weight: 700; color: #94a3b8; text-transform: none; }
#aud-menu label {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px; margin: 0 -6px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: #e2e8f0; cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
#aud-menu label:hover { background: #334155; } /* match .toc-row hover affordance */
#aud-menu input { accent-color: #6366f1; }
#trans-status { padding: 8px 14px; font-size: var(--fs-xs); color: #64748b; }
#trans-status .muted { color: #94a3b8; }
#trans-status button {
  background: #4f46e5; color: #fff; border: none; border-radius: var(--r-sm);
  padding: 5px 10px; font-size: var(--fs-xs); cursor: pointer;
}
#trans-body { flex: 1; overflow-y: auto; padding: 4px 10px 24px; }
.tr-para {
  padding: 10px 12px; margin: 6px 0; background: #fff;
  border: 1px solid #e2e8f0; border-radius: var(--r-lg);
  font-size: var(--fs-sm); line-height: 1.75; color: #1f2937;
}
/* paint-only transition so hover + reverse-highlight (.panel-hl) fade instead of snapping */
.tr-sent { cursor: pointer; border-radius: var(--r-xs); transition: background-color .15s ease, box-shadow .15s ease; }
.tr-sent:hover, .panel-hl { background: #dbeafe; box-shadow: 0 1.5px 0 #3b82f6; }
/* section the body is currently scrolled to (body→panel follow) — fade in/out (scroll-sync is a
   trailing debounce, so this transition only plays once when scrolling settles, never per-frame) */
.tr-cur { background: #eef2ff; box-shadow: inset 3px 0 0 #6366f1; border-radius: var(--r-xs); transition: background-color .15s ease, box-shadow .15s ease; }
.tr-para .tr-pageno { display: inline-block; float: right; margin: 0 0 0 6px; }
.tr-para .tr-fig { margin: 8px 0; }

/* 그림/표 캡션 — 접힌 칩, 클릭해서 펼침 */
.tr-fig {
  margin: 6px 0; padding: 6px 10px; font-size: var(--fs-xs); cursor: pointer;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: var(--r-md);
}
.tr-fig:hover { border-color: #3b82f6; }
.tr-fig-label { font-weight: 600; color: #64748b; }
.tr-fig-body { display: block; margin-top: 4px; color: #334155; line-height: 1.6; }
.tr-fig.collapsed .tr-fig-body { display: none; }
/* 캡션 카드 — 항상 펼침, 라벨 강조 */
.tr-cap { cursor: default; border-style: solid; border-color: #dbeafe; background: #f0f7ff; }
.tr-cap:hover { border-color: #93c5fd; }
.tr-cap-label {
  display: inline-block; margin-right: 6px; padding: 1px 8px;
  font-weight: 700; font-size: var(--fs-2xs); color: #1d4ed8;
  background: #dbeafe; border-radius: var(--r-pill);
}
.tr-cap .tr-fig-body { margin-top: 3px; }
.tr-cap { cursor: pointer; }
.tr-cap-btn {
  margin-left: 6px; padding: 1px 8px; font-size: var(--fs-2xs); cursor: pointer;
  color: #475569; background: #fff; border: 1px solid #cbd5e1; border-radius: var(--r-pill);
}
.tr-cap-btn:hover { border-color: #3b82f6; color: #1d4ed8; }
.tr-block-md { margin-top: 8px; padding-top: 8px; border-top: 1px solid #dbeafe; cursor: default; }
/* AI 섹션 요약 카드 — 본문 카드 리듬을 따르되 요약임을 라벨로 구분 */
.tr-summary-card {
  margin: 8px 0 10px; padding: 10px 12px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #ddd6fe; border-radius: var(--r-lg);
}
.tr-summary-label {
  display: inline-block; margin-bottom: 6px; padding: 1px 8px;
  background: #ddd6fe; color: #5b21b6; border-radius: var(--r-sm);
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .02em;
}
.tr-summary-card .tr-block-md { margin-top: 0; padding-top: 0; border-top: none; }
.tr-block-md .md-table { border-collapse: collapse; margin: 4px 0; font-size: var(--fs-xs); max-width: 100%; }
.tr-block-md .md-table th, .tr-block-md .md-table td {
  border: 1px solid #cbd5e1; padding: 3px 8px; text-align: left; vertical-align: top;
}
.tr-block-md .md-table th { background: #eff6ff; font-weight: 600; }
.tr-block-md ol, .tr-block-md ul { margin: 4px 0 4px 18px; }
.tr-block-md p { margin: 3px 0; }
/* 목차 팝업 */
.toc-pop {
  position: absolute; right: 12px; top: 38px; z-index: 60;
  max-height: 70vh; overflow-y: auto; min-width: 240px; max-width: 340px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14); padding: 6px 4px;
}
/* 버튼→팝업 사이 간격을 hover로 건널 수 있게 하는 투명 브리지 */
.toc-pop::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.toc-row { padding: 4px 10px; font-size: var(--fs-xs); color: #334155; cursor: pointer; border-radius: var(--r-sm); }
.toc-row:hover { background: #eff6ff; color: #1d4ed8; }
.toc-row.cur { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
/* 라이브러리 준비 배지 */
.prep-badges { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.pb {
  font-size: var(--fs-3xs); padding: 1px 6px; border-radius: var(--r-pill);
  background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0;
}
.pb.on { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
/* 카드 우측 열: 배지(고정 위치) + 컨트롤 — 폭 고정으로 카드마다 위치 일관 */
.pc-side { width: 168px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pc-side .prep-badges { margin: 0; }
.pc-row2 { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.pc-col-btn {
  width: auto; max-width: 108px; height: 26px; padding: 0 8px; font-size: var(--fs-2xs); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; border-radius: var(--r-sm); cursor: pointer;
}
.pc-col-btn:hover { border-color: #6366f1; color: #4f46e5; }
.pc-side .pc-dl, .pc-side .pc-edit, .pc-side .pc-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; color: #94a3b8;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
}
.pc-side .pc-dl:hover, .pc-side .pc-edit:hover { background: #f1f5f9; color: #4f46e5; }
.pc-side .pc-del:hover { background: #fee2e2; color: #dc2626; }
.col-pop {
  position: fixed; z-index: 220; min-width: 160px; max-width: 240px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: var(--r-lg); padding: 6px;
  box-shadow: 0 10px 30px rgba(15,23,42,.16);
  display: flex; flex-direction: column; gap: 2px;
}
.col-pop label {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px;
  font-size: var(--fs-sm); color: #334155; border-radius: var(--r-sm); cursor: pointer;
}
.col-pop label:hover { background: #f1f5f9; }
.col-pop .cp-empty { padding: 8px 10px; font-size: var(--fs-xs); color: #94a3b8; }
.save-pop { min-width: 210px; }
.save-pop button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding: 7px 10px; border: none; border-radius: var(--r-sm); background: transparent;
  font-size: var(--fs-sm); color: #334155; cursor: pointer; text-align: left; position: relative;
}
.save-pop button:hover { background: #f1f5f9; }
.save-pop button small { font-size: var(--fs-2xs); color: #94a3b8; }
.save-pop button.off { opacity: .4; cursor: default; }
.save-pop button.off:hover { background: transparent; }
.save-pop .sp-caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: var(--fs-2xs); }
.sp-parent { position: relative; }
.sp-sub {
  display: none; position: absolute; left: 100%; top: -6px; margin-left: 2px; min-width: 210px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: var(--r-lg); padding: 6px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .16); z-index: 1;
}
.save-pop.sub-left .sp-sub { left: auto; right: 100%; margin-left: 0; margin-right: 2px; }
.sp-parent:hover .sp-sub { display: block; }
/* 단어장 목록·복습 카드 */
#vocab-paper { max-width: 220px; font-size: var(--fs-xs); padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: var(--r-md); }
#vocab-list li.known { opacity: .45; }
#vocab-list .v-pos { color: #94a3b8; font-size: var(--fs-xs); flex: none; }
#vocab-list .v-mean { color: #475569; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vocab-list .v-count { color: #94a3b8; font-size: var(--fs-xs); flex: none; }
/* 복습(button)·Anki/CSV(a)를 동일한 고스트 필로 — 요소 종류에 따른 이질감 제거 */
#vocab-box header .ghost {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border: 1px solid #cbd5e1; border-radius: var(--r-md); background: #fff;
  font-size: var(--fs-xs); font-weight: 500; color: #475569;
  text-decoration: none; cursor: pointer; line-height: 1;
}
#vocab-box header .ghost:hover { border-color: #6366f1; color: #4f46e5; }
.review-card { padding: 40px 30px 30px; text-align: center; display: flex; flex-direction: column; gap: 16px; min-height: 280px; }
.rc-progress { color: #94a3b8; font-size: var(--fs-xs); }
.rc-word { font-size: 34px; font-weight: 700; color: #1e293b; }
.rc-meaning { font-size: 17px; color: #334155; line-height: 1.6; }
.rc-ex { margin-top: 10px; font-size: var(--fs-sm); color: #64748b; font-style: italic; }
.rc-actions { margin-top: auto; display: flex; gap: 10px; justify-content: center; }
.rc-actions button { padding: 10px 22px; border-radius: var(--r-lg); border: 1px solid #cbd5e1; background: #fff; font-size: var(--fs-md); cursor: pointer; }
.rc-actions .rc-know { background: #4f46e5; color: #fff; border: none; }
.rc-actions .rc-dunno { color: #b91c1c; }
.qz-score { padding: 8px 12px; margin: 4px 0 8px; background: #eff6ff; border: 1px solid #dbeafe; border-radius: var(--r-md); font-size: var(--fs-xs); color: #1d4ed8; font-weight: 600; }
.jump-back {
  position: absolute; left: 18px; bottom: 18px; z-index: 120;
  padding: 9px 16px; border: none; border-radius: var(--r-pill); cursor: pointer;
  background: #1e293b; color: #fff; font-size: var(--fs-sm); box-shadow: 0 6px 18px rgba(15,23,42,.3);
}
.jump-back:hover { background: #334155; }
.ref-preview {
  position: fixed; z-index: 130; max-width: 360px;
  padding: 8px 12px; font-size: var(--fs-xs); line-height: 1.55; color: #334155;
  background: #fff; border: 1px solid #cbd5e1; border-left: 3px solid #3b82f6;
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(15,23,42,.15); pointer-events: none;
}
.toc-row.lv2 { padding-left: 22px; }
.toc-row.lv3 { padding-left: 34px; font-size: var(--fs-xs); color: #475569; }
/* 섹션 계층 */
.tr-section { margin: 4px 0; }
.tr-section.lv2 { margin-left: 10px; }
.tr-section.lv3 { margin-left: 20px; }
.tr-head {
  display: flex; align-items: baseline; gap: 4px;
  margin: 14px 4px 4px; padding-bottom: 4px;
  font-weight: 700; color: #334155;
  border-bottom: 2px solid #e2e8f0;
}
.tr-head.lv1 { font-size: var(--fs-md); }
.tr-head.lv2 { font-size: var(--fs-sm); border-bottom-width: 1px; color: #475569; }
.tr-head.lv3 { font-size: var(--fs-xs); border-bottom: none; color: #64748b; }
.tr-head-text { cursor: pointer; flex: 1; }
.tr-head-text:hover { color: #4f46e5; }
.tr-fold {
  flex: none; border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-2xs); color: #94a3b8; padding: 0 2px;
}
.tr-fold:hover { color: #4f46e5; }
.tr-sec-body.collapsed { display: none; }
.tr-foot {
  margin: 6px 0; padding: 5px 9px;
  font-size: var(--fs-2xs); color: #94a3b8; font-style: italic; line-height: 1.5;
  border-left: 3px solid #e2e8f0;
}
.tr-meta {
  margin: 4px 2px; padding: 6px 10px;
  font-size: var(--fs-2xs); color: #94a3b8; line-height: 1.5;
  background: #f1f5f9; border-radius: var(--r-md);
}
.tr-pageno {
  display: block; text-align: right; margin: 4px 2px -2px;
  font-size: var(--fs-3xs); color: #cbd5e1;
}

/* 홈(라이브러리)에서는 뷰어용 크롬(상단 바·좌측 도구 바) 숨김 */
body.at-home #toolbar, body.at-home #sidebar { display: none; }

/* 청중 화면 — UI 없이 논문만, 조작 불가 (발표자 창이 원격 제어) */
body.audience #sidebar, body.audience #toolbar { display: none; }
body.audience .textLayer, body.audience .ink { pointer-events: none !important; }
body.audience .note-card { pointer-events: none; } /* 청중은 카드 편집·삭제 불가 */
body.audience #tooltip { max-width: 480px; font-size: 17px; line-height: 1.6; }
#aud-fullscreen {
  position: fixed; right: 14px; bottom: 14px; z-index: 200;
  width: 38px; height: 38px; border: none; border-radius: var(--r-lg);
  background: rgba(15, 23, 42, .35); color: #fff; font-size: 18px; cursor: pointer;
  opacity: .35; transition: opacity .15s, background .15s;
}
#aud-fullscreen:hover { opacity: 1; background: rgba(15, 23, 42, .65); }
body.audience .tt-word { font-size: 22px; }
body.audience .tt-context { font-size: 18px; }
body.present #tooltip { max-width: 480px; font-size: 17px; line-height: 1.6; }
body.present .tt-word { font-size: 22px; }
body.present .tt-context { font-size: 18px; }
body.present #toolbar, body.present #sidebar { display: none; }
/* 발표 모드에서 화면 최상단에 커서를 대면 툴바 잠깐 표시 */
body.present.reveal-bar #toolbar { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 150; box-shadow: 0 2px 12px rgba(15,23,42,.15); }
/* 레이저 포인터 (청중 창) */
.laser-dot {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; pointer-events: none; z-index: 90;
  background: radial-gradient(circle, rgba(239,68,68,.42) 0 30%, rgba(239,68,68,.13) 60%, transparent 70%);
  transition: left .09s linear, top .09s linear, opacity .5s ease .5s; opacity: 1;
}
.laser-dot.fade { opacity: 0; }
/* presenter's own laser: fixed viewport element moved by transform (outside the page
   subtree) so following the pen never relayouts the text spans */
.laser-dot.laser-fixed {
  position: fixed; left: 0; top: 0; z-index: 200; transition: opacity .3s ease;
  will-change: transform; /* keep on a GPU layer so fast moves don't stutter (main-thread paint) */
}
/* other participants' cursors */
.user-cursor { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; will-change: transform; }
.user-cursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.user-cursor .uc-label {
  position: absolute; left: 15px; top: 15px; padding: 1px 6px; border-radius: 8px;
  color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity .25s ease; /* name shows only while the cursor moves */
}
.user-cursor .uc-label.show { opacity: 1; }

/* 홈 헤더: 모든 컨트롤 높이 40px 통일 */
#home-head { align-items: center; }
#home-head > * { height: 40px; }
#home-head h1 { height: auto; }
#home-head input#search { height: 40px; box-sizing: border-box; }
/* quiet buttons: no box by default (just icon+text), a soft tint appears on hover/focus */
#home-head .ghost {
  flex: none; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
  background: transparent; color: #475569; border: 1px solid transparent;
  border-radius: 10px; padding: 0 11px; font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  text-decoration: none; transition: color .12s ease, background .12s ease;
}
#home-head .ghost svg { flex: none; color: #94a3b8; transition: color .12s ease; }
#home-head .ghost:hover, #home-head .ghost:focus-visible { color: #4f46e5; background: #eef2ff; outline: none; }
#home-head .ghost:hover svg, #home-head .ghost:focus-visible svg { color: #6366f1; }
#home-head #btn-account.hdr-id span { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#home-head #btn-open {
  height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 10px; font-weight: 600; transition: background .12s ease;
}
#home-head #btn-open:hover { background: #4338ca; }
/* account panel title: person icon + text */
.acct-title { display: inline-flex; align-items: center; gap: 7px; }
.acct-title svg { color: #6366f1; }

/* 단어장 모달 */
#vocab-modal {
  position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
}
#vocab-box {
  width: min(620px, 92vw); max-height: 80vh; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-xl); box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
#vocab-box header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid #e2e8f0; color: #1e293b;
}
#btn-vocab-csv { font-size: var(--fs-sm); color: #4f46e5; }
#btn-vocab-close {
  border: none; background: transparent; font-size: 20px; color: #64748b;
  cursor: pointer; border-radius: var(--r-sm); padding: 0 6px;
}
#vocab-list { list-style: none; margin: 0; padding: 8px 18px 18px; overflow-y: auto; }
#vocab-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 2px; border-bottom: 1px solid #f1f5f9; font-size: var(--fs-md);
}
#vocab-list b { flex: none; min-width: 130px; }
.v-pos { flex: none; font-size: var(--fs-2xs); color: #6366f1; }
.v-meaning { flex: 1; color: #475569; }
.v-count { flex: none; font-size: var(--fs-xs); color: #94a3b8; }
#vocab-list .empty { color: #94a3b8; border: none; }

/* 웹 내 다이얼로그 · 토스트 */
.dlg-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center;
}
.dlg {
  width: min(420px, 90vw); background: #fff; border-radius: var(--r-xl);
  padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.dlg-msg { font-size: var(--fs-md); line-height: 1.6; color: #1f2937; }
.dlg-input {
  width: 100%; margin-top: 12px; padding: 8px 12px; font-size: var(--fs-md);
  border: 1px solid #cbd5e1; border-radius: var(--r-md);
}
.dlg-input:focus { outline: var(--focus-light); border-color: #6366f1; }
.dlg-row { display: flex; gap: 8px; margin-top: 16px; }
.dlg-row button {
  border: none; border-radius: var(--r-md); padding: 8px 16px; font-size: var(--fs-sm); cursor: pointer;
}
.dlg-cancel { background: #e2e8f0; color: #475569; }
.dlg-ok { background: #4f46e5; color: #fff; }
.dlg-ok.danger { background: #dc2626; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  z-index: 310; background: #1e293b; color: #e2e8f0;
  padding: 10px 18px; border-radius: var(--r-lg); font-size: var(--fs-sm);
  opacity: 0; transition: opacity .25s, transform .25s;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 카드 이어 읽기 배지 */
.pc-progress {
  display: inline-block; margin-left: 8px; padding: 1px 8px; vertical-align: 1px;
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 600;
}

/* 드래그 → 문맥 번역 버튼 */
#sel-actions { position: fixed; z-index: 99; display: flex; gap: 6px; }
#sel-actions button {
  background: #4f46e5; color: #fff; border: none; border-radius: var(--r-md);
  padding: 7px 13px; font-size: var(--fs-sm); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
#sel-actions button:hover { background: #4338ca; }

/* ---------- auth gate + admin ---------- */
#auth-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(880px 500px at 50% -6%, rgba(99,102,241,.38), transparent 62%),
    linear-gradient(155deg, #1e293b 0%, #312e81 100%);
}
.auth-card {
  width: 364px; max-width: 92vw; padding: 38px 32px 26px; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px -14px rgba(15,23,42,.5), 0 4px 14px rgba(15,23,42,.14);
  display: flex; flex-direction: column; gap: 11px;
}
.auth-logo { height: 74px; width: auto; margin: 0 auto; display: block; }
.auth-card h1 { margin: 2px 0 0; font-size: 27px; font-weight: 700; color: #0f172a; text-align: center; letter-spacing: -.01em; }
.auth-sub { margin: 0 0 8px; text-align: center; color: #94a3b8; font-size: var(--fs-md); font-weight: 500; }
.auth-hyu { width: 138px; max-width: 60%; height: auto; margin: 16px auto 0; display: block; opacity: .5; }
.auth-live { margin: 4px 0 2px; padding: 6px 10px; border-radius: var(--r-md); background: #fef2f2; color: #b91c1c; font-size: var(--fs-xs); font-weight: 600; }

/* ---- Live seminars: opt-in publish toggle (present mode) + home "진행 중" strip ---- */
#btn-live-publish { display: none; }
body.present #btn-live-publish {
  display: block; position: fixed; left: 14px; bottom: 14px; z-index: 60;
  padding: 8px 14px; border: none; border-radius: 999px;
  background: rgba(15, 23, 42, .72); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
body.present #btn-live-publish:hover { background: rgba(15, 23, 42, .92); }
body.present #btn-live-publish.on { background: #dc2626; }

#live-seminars { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
#live-seminars:empty { display: none; }
.live-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: #b91c1c; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.live-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border: 1px solid #fecaca; border-radius: var(--r-lg); background: #fef2f2; cursor: pointer; }
.live-card:hover { background: #fee2e2; border-color: #fca5a5; }
.live-title { flex: 1; min-width: 0; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-by { color: #6b7280; font-size: var(--fs-xs); }
.live-join { flex: none; padding: 3px 10px; border-radius: 999px; background: #dc2626; color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.auth-in {
  height: 46px; padding: 0 14px; border: 1px solid transparent; border-radius: 11px;
  background: #f1f5f9; font-size: var(--fs-md);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.auth-in::placeholder { color: #94a3b8; }
.auth-in:focus { outline: none; background: #fff; border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.auth-btn {
  height: 46px; margin-top: 6px; border: none; border-radius: 11px; color: #fff;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  font-size: var(--fs-md); font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(79,70,229,.5); transition: filter .12s ease, box-shadow .12s ease, transform .06s ease;
}
.auth-btn:hover { filter: brightness(1.07); box-shadow: 0 9px 22px -5px rgba(79,70,229,.58); }
.auth-btn:active { transform: translateY(1px); }
.auth-link { border: none; background: none; color: #6366f1; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; margin-top: 2px; }
.auth-link:hover { color: #4338ca; text-decoration: underline; }
.auth-note { margin: 4px 0 0; font-size: var(--fs-xs); color: #94a3b8; text-align: center; line-height: 1.55; }
.auth-msg { padding: 9px 12px; border-radius: 9px; font-size: var(--fs-sm); }
.auth-msg.err { background: #fef2f2; color: #b91c1c; }
.auth-msg.ok { background: #f0fdf4; color: #15803d; }
#admin-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15,23,42,.45); backdrop-filter: blur(3px);
}
.admin-box {
  width: 760px; max-width: 94vw; max-height: 86vh; overflow: auto; background: #fff;
  border-radius: 16px; padding: 22px 24px; box-shadow: 0 24px 60px -12px rgba(15,23,42,.42);
}
.admin-box header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.admin-box header b { font-size: var(--fs-md); font-weight: 700; color: #0f172a; }
.admin-box header label { font-size: var(--fs-sm); color: #475569; margin-left: auto; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.admin-box header #adm-close { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #94a3b8; padding: 2px 7px; border-radius: 8px; }
.admin-box header #adm-close:hover { background: #f1f5f9; color: #475569; }
.adm-table-wrap { overflow-x: auto; } /* scroll the table (not the whole modal) if it's too wide */
.admin-box table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.admin-box thead th { text-align: left; padding: 8px 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
/* every cell on one line — badges and buttons never wrap; long email/name truncate with ellipsis */
.admin-box tbody td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; white-space: nowrap; }
.admin-box tbody td:first-child { padding-left: 10px; }
.admin-box tbody td:first-child, .admin-box tbody td:nth-child(2) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.admin-box tbody tr:hover { background: #f8fafc; }
.admin-box tbody td:last-child { text-align: right; } /* action buttons flush right, one line */
.admin-box td button { margin-left: 4px; padding: 4px 9px; border: 1px solid transparent; border-radius: 7px; background: #f1f5f9; color: #475569; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.admin-box td button:first-child { margin-left: 0; }
.admin-box td button:hover { background: #eef2ff; color: #4f46e5; }
/* status pills */
.adm-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; }
.adm-badge.ok { background: #dcfce7; color: #15803d; }
.adm-badge.warn { background: #fef3c7; color: #b45309; }
.adm-badge.muted { background: #f1f5f9; color: #94a3b8; }
.adm-role { font-size: var(--fs-xs); color: #6366f1; font-weight: 600; margin-left: 4px; }
/* 내 계정 (self-service account settings) */
#account-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.4);
}
.acct-box { width: 420px; max-width: 94vw; max-height: 86vh; overflow: auto; background: #fff; border-radius: 14px; padding: 18px; }
.acct-box header { display: flex; align-items: center; margin-bottom: 8px; }
.acct-box header b { font-size: var(--fs-md); }
.acct-box header #acct-close { margin-left: auto; border: none; background: none; font-size: 20px; cursor: pointer; color: #64748b; }
.acct-sec { margin: 16px 0 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; }
.acct-field { display: flex; flex-direction: column; gap: 5px; }
.acct-field label { font-size: var(--fs-sm); color: #475569; }
.acct-email { font-size: var(--fs-sm); color: #1e293b; font-weight: 600; }
.acct-row { display: flex; gap: 8px; }
.acct-row #acct-name { flex: 1; }
.acct-box input { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: var(--fs-sm); box-sizing: border-box; }
.acct-in { width: 100%; margin-bottom: 8px; }
.acct-row button, .acct-primary { border: 1px solid #6366f1; border-radius: 8px; background: #6366f1; color: #fff; cursor: pointer; padding: 7px 14px; font-size: var(--fs-sm); }
.acct-primary { width: 100%; margin-top: 2px; }
.acct-row button:hover, .acct-primary:hover { background: #4f46e5; }
.acct-msg { margin-top: 8px; font-size: var(--fs-xs); }
.acct-msg.err { color: #dc2626; }
.acct-msg.ok { color: #059669; }
/* AI subscription (provider) connect UI */
.acct-hint { margin: 0 0 10px; font-size: var(--fs-xs); color: #94a3b8; line-height: 1.5; }
.prov-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.prov-name { font-size: var(--fs-sm); font-weight: 600; color: #1e293b; }
.prov-conn-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prov-ok { font-size: var(--fs-xs); color: #059669; font-weight: 600; }
.prov-acct { font-size: var(--fs-xs); color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-no { font-size: var(--fs-xs); color: #94a3b8; }
.prov-row .prov-btn { margin-left: auto; padding: 5px 12px; border-radius: 8px; border: 1px solid #6366f1; background: #6366f1; color: #fff; cursor: pointer; font-size: var(--fs-xs); }
.prov-row .prov-disc { background: #fff; color: #64748b; border-color: #e2e8f0; }
.prov-row .prov-btn:hover { filter: brightness(1.05); }
.prov-flow { background: #f8fafc; border: 1px solid #eef2f6; border-radius: 10px; padding: 12px; margin-top: 6px; }
.prov-flow p { margin: 0 0 8px; font-size: var(--fs-sm); color: #475569; }
.prov-open { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.prov-link { color: #4f46e5; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.prov-link:hover { text-decoration: underline; }
.prov-qr { width: 96px; height: 96px; border-radius: 8px; background: #fff; }
.prov-code-row { display: flex; gap: 8px; }
.prov-code { flex: 1; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: var(--fs-sm); }
.prov-flow .prov-submit { padding: 7px 16px; border: none; border-radius: 8px; background: #4f46e5; color: #fff; cursor: pointer; font-size: var(--fs-sm); }
.prov-msg { margin-top: 8px; font-size: var(--fs-xs); color: #dc2626; }
.prov-err { font-size: var(--fs-sm); color: #dc2626; padding: 6px 0; }
.prov-usercode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-md); letter-spacing: .08em; color: #4f46e5; background: #eef2ff; padding: 2px 8px; border-radius: 6px; }
.prov-wait { margin-top: 8px; font-size: var(--fs-sm); color: #64748b; display: flex; align-items: center; gap: 6px; }
.prov-wait::before { content: ''; width: 10px; height: 10px; border: 2px solid #c7d2fe; border-top-color: #4f46e5; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* bottom nudge bar for users with no AI subscription connected */
#prov-nudge {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: 14px; padding: 11px 16px;
  background: #1e293b; color: #e2e8f0; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.35);
  font-size: var(--fs-sm); max-width: 92vw;
}
#prov-nudge button { padding: 6px 14px; border: none; border-radius: 8px; background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; }
#prov-nudge button:hover { background: #4f46e5; }

.adm-add { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef2f6; }
.adm-add > label { display: block; font-size: var(--fs-sm); font-weight: 600; color: #334155; margin-bottom: 6px; }
.adm-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adm-add-row input[type="email"], .adm-add-row input[type="text"], .adm-add-row input[type="password"] {
  flex: 1; min-width: 120px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: var(--fs-sm);
}
.adm-add-admin { display: flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: #475569; white-space: nowrap; }
.adm-add-row #adm-add-save { padding: 6px 14px; border: 1px solid #6366f1; border-radius: 8px; background: #6366f1; color: #fff; cursor: pointer; }
.adm-add-msg { margin-top: 6px; font-size: var(--fs-xs); color: #dc2626; }

/* settings dialog note (auth section) */
.set-note { margin: 2px 2px 8px; font-size: var(--fs-xs); color: #94a3b8; line-height: 1.5; }
.set-enable-btn { padding: 6px 14px; border: 1px solid #6366f1; border-radius: 8px; background: #6366f1; color: #fff; cursor: pointer; font-size: var(--fs-sm); }
.set-enable-btn:hover { background: #4f46e5; }
/* create-first-admin (bootstrap) dialog */
.bootstrap-dlg { width: 380px; max-width: 92vw; display: flex; flex-direction: column; gap: 8px; }
.bootstrap-dlg .bs-in { height: 40px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: var(--fs-md); }
.bootstrap-dlg .bs-msg { font-size: var(--fs-sm); color: #dc2626; }
.set-auth[type="text"] { padding: 5px 9px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: var(--fs-sm); min-width: 220px; }

/* audience join QR */
/* container has no background of its own (no white ring behind the badge); the two
   states — dark round badge and white QR panel — are overlaid at the corner and
   cross-fade with a scale for a smooth open/close. */
#aud-qr {
  position: fixed; left: 14px; bottom: 14px; z-index: 190; cursor: pointer;
  width: 40px; height: 40px;
}
#aud-qr .qr-full {
  position: absolute; left: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transform-origin: bottom left; will-change: opacity, transform;
  transition: opacity .2s ease, transform .26s cubic-bezier(.2,.8,.2,1); /* open: grow from corner */
}
#aud-qr img { width: 120px; height: 120px; display: block; }
#aud-qr span { font-size: var(--fs-xs); color: #475569; font-weight: 600; }
#aud-qr .qr-badge {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: #1e293b; color: #fff;
  font-size: var(--fs-xs); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: opacity .18s ease, transform .18s ease;
}
#aud-qr:hover .qr-badge { transform: scale(1.07); }
/* collapsed: opacity snaps to 0 fast, then visibility:hidden drops the compositor layer
   so no faint white square lingers while the transform finishes shrinking */
#aud-qr.collapsed .qr-full {
  opacity: 0; transform: scale(.25); pointer-events: none; visibility: hidden;
  transition: opacity .12s ease, transform .24s cubic-bezier(.4,0,.6,1), visibility 0s .12s;
}
#aud-qr.collapsed .qr-badge { opacity: .9; }
/* expanded: QR panel shown, badge faded out */
#aud-qr:not(.collapsed) .qr-badge { opacity: 0; pointer-events: none; }