* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #24292f;
  --ink-soft: #6b7280;
  --ink-faint: #9ca3af;    /* 날짜·카운트 등 보조 회색 */
  --ink-fainter: #ccd0d5;  /* 목록 날짜 등 가장 옅은 회색 */
  --line: #e5e7eb;
  --accent: #46586a;
  --hover-bg: #f3f4f6;
  --active-bg: #e9ebee;
  --hl-bg: #e2e9f0;        /* 하이라이트: accent 계열 옅은 청회색 워시 */
  --hl-bg-strong: #ccd9e4; /* 딥링크 점프 순간 강조 */
  --scrollbar: #e8eaec;
  --danger: #a1584f;       /* 실패 배지 등 — 담백한 적갈색 */
}

/* 다크 모드 팔레트 — 명시 선택(data-theme="dark") 또는 시스템 다크+미지정일 때.
   값을 바꿀 땐 아래 media 블록과 함께 두 곳 다 갱신할 것 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101214;
  --surface: #16181b;
  --ink: #d3d7dc;
  --ink-soft: #9aa1aa;
  --ink-faint: #6d747d;
  --ink-fainter: #4a5157;
  --line: #24282d;
  --accent: #93a9be;
  --hover-bg: #1b1f23;
  --active-bg: #22262b;
  --hl-bg: #2b3a47;
  --hl-bg-strong: #3a4d5e;
  --scrollbar: #2e3338;
  --danger: #c98e86;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101214;
    --surface: #16181b;
    --ink: #d3d7dc;
    --ink-soft: #9aa1aa;
    --ink-faint: #6d747d;
    --ink-fainter: #4a5157;
    --line: #24282d;
    --accent: #93a9be;
    --hover-bg: #1b1f23;
    --active-bg: #22262b;
    --hl-bg: #2b3a47;
    --hl-bg-strong: #3a4d5e;
    --scrollbar: #2e3338;
    --danger: #c98e86;
  }
}

/* 스크롤바 유무로 뷰포트 폭이 변해 가운데 정렬 내용이 좌우로 흔들리던 문제(오늘↔전체, 사이드바 숨김 시 두드러짐)
   — 스크롤바 자리를 항상 확보(2026-08-24) */
html { scrollbar-gutter: stable; }

/* 모바일 앱 감(2026-08-24): 더블탭 확대 제스처 차단(탭 반응 지연도 제거), 회전 시 글자 자동 확대 금지,
   탭 하이라이트 번쩍임 제거. 핀치 확대는 viewport meta(user-scalable=no)가 막는다 */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, sans-serif;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* 상단 바 */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  font-family: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  font-weight: 500; font-size: 1.5rem; line-height: 1;
}
/* 메뉴는 로고 옆 왼쪽 정렬(가운데 정렬 시도했다가 원복, 2026-08-24) — 로고와의 간격만 기존 20px→36px */
.top-left { display: flex; align-items: baseline; gap: 36px; }
.top-nav { display: flex; align-items: baseline; gap: 20px; }
.top-link { font-size: .88rem; color: var(--ink-soft); white-space: nowrap; }
.top-link:hover { color: var(--accent); }
.top-actions { display: flex; gap: 8px; }

/* 모바일 상단바: 2단 구성 — 1행 로고+아이콘, 2행 메뉴 탭(가로 스크롤).
   좁은 폭에서 링크 글자가 세로로 꺾이던 문제(2026-08-21) 해결 */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; padding: 10px 16px 0; }
  .top-left { display: contents; }
  .brand { order: 1; }
  .top-actions { order: 2; align-items: center; }
  .top-nav {
    order: 3; width: 100%; gap: 22px; padding: 8px 2px 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .top-nav::-webkit-scrollbar { display: none; }
  .top-search.open input { width: min(190px, 38vw); }
}

/* 설정 드롭다운(톱니바퀴) — 좌측 메뉴·메모 패널·이미지·지금 수집 */
.settings { position: relative; }
#settings-btn {
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--ink-soft);
  padding: 7px; border-radius: 8px;
}
#settings-btn:hover { background: var(--hover-bg); color: var(--ink); }
.settings-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 232px; padding: 6px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.settings-menu.open { display: block; }
.settings-menu form { margin: 0; }
.settings-menu button {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 18px;
  border: none; background: none; padding: 8px 10px; border-radius: 7px;
  font-size: .88rem; color: var(--ink); text-align: left;
}
.settings-menu button:hover { background: var(--hover-bg); }
.settings-menu kbd {
  font: inherit; font-size: .74rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 5px; padding: 0 6px;
  min-width: 22px; text-align: center; background: var(--bg);
}
.settings-menu .menu-row {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 8px 10px; font-size: .88rem; white-space: nowrap;
}
.font-ctl { display: flex; align-items: center; gap: 8px; }
.font-ctl button {
  width: 26px; height: 26px; padding: 0; justify-content: center; flex: none;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
  font-size: .95rem; color: var(--ink-soft); line-height: 1;
}
.font-ctl button:hover { border-color: var(--accent); color: var(--accent); background: var(--bg); }
#font-val { font-size: .78rem; color: var(--ink-soft); min-width: 38px; text-align: center; }
.theme-ctl { display: flex; align-items: center; gap: 6px; }
.theme-ctl button {
  width: auto; padding: 2px 9px; flex: none; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg);
  font-size: .78rem; color: var(--ink-soft); line-height: 1.5;
}
.theme-ctl button:hover { border-color: var(--accent); color: var(--accent); background: var(--bg); }
.theme-ctl button.on { border-color: var(--accent); color: var(--accent); }
.menu-row select {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 7px; padding: 3px 8px; font-size: .82rem; max-width: 130px;
}

/* 이미지 숨김 모드: 본문의 이미지·그림 요소를 감춘다 */
.no-images .reader img,
.no-images .reader picture,
.no-images .reader figure,
.no-images .reader svg { display: none !important; }
/* 반비 책타래 — 책 제목이 글자 그래픽 이미지라 이미지를 끄면 사라진다. 그때만 alt를 링크 글자로 그린다(2026-09-01).
   ::after 로 그린 글자는 textContent 에 안 들어가므로 하이라이트 offset 이 그대로다. 링크는 감싼 <a> 가 이미 갖고 있다. */
.no-images .reader a[data-book-title]::after {
  content: attr(data-book-title);
  display: block;
  margin: 2px 0 10px;
  font-size: 1.02em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 레이아웃 */
.layout {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 40px; max-width: 1400px; margin: 0 auto; padding: 28px 32px;
}
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; } }

/* 우측 메모 패널 — ] 로 토글, 미해결 메모(궁금한 것들) */
.note-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -6px 0 24px rgba(0, 0, 0, .07);
  transform: translateX(105%); transition: transform .18s ease;
  z-index: 20; display: flex; flex-direction: column;
}
.note-panel.open { transform: none; }
.note-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.note-panel-head a { color: var(--ink-soft); font-size: .82rem; }
.note-panel-head a:hover { color: var(--accent); }
#note-panel-close {
  border: none; background: none; font-size: 1.05rem; color: var(--ink-soft);
  padding: 2px 6px; margin-left: 6px; line-height: 1;
}
#note-panel-close:hover { color: var(--ink); }
.note-panel-list { overflow-y: auto; padding: 6px 16px 16px; }
.np-note { border-bottom: 1px solid var(--line); padding: 11px 0; font-size: .88rem; }
.np-note:last-child { border-bottom: none; }
.np-text { line-height: 1.55; }
.np-item { display: block; margin-top: 4px; font-size: .78rem; color: var(--ink-soft); }
.np-item:hover { color: var(--accent); }
.np-date { font-size: .72rem; color: var(--ink-faint); }
.note-panel-empty { color: var(--ink-soft); font-size: .86rem; padding-top: 10px; }

/* 좌측 메뉴 숨김(본문 집중) — 상단바 "메뉴 숨기기" 토글, localStorage 유지 */
/* 상단 메뉴 숨김(= 단축키, f 몰입 모드) — 좌측 숨김과 같은 결. 본문은 .layout 의 위쪽 여백을 그대로 쓴다 */
html.no-top .topbar { display: none; }
html.no-side .layout { grid-template-columns: 1fr; }
html.no-side .layout > .sidebar { display: none; }
/* width:100% 필수 — 그리드 항목에 auto 마진만 주면 내용물 폭으로 줄어들어
   글 제목 길이에 따라 목록이 좌우로 움직인다(오늘↔전체 전환 흔들림, 2026-08-24) */
html.no-side .list, html.no-side .reader-page { width: 100%; max-width: 960px; margin: 0 auto; }

/* 사이드바 */
.sidebar { font-size: .92rem; }
.pub-row { display: flex; align-items: center; gap: 4px; }
.pub-row form { flex-shrink: 0; }
.pub-link {
  display: block; flex: 1; padding: 6px 10px; border-radius: 8px; color: var(--ink-soft);
}
.pub-link:hover { background: var(--hover-bg); }
.pub-link.active { background: var(--active-bg); color: var(--ink); }
.count { font-size: .78rem; color: var(--ink-faint); margin-left: 2px; }
/* 최근 7일 안에 온 안 읽은 글이 있는 발행물 — 아주 연한 "n" 한 글자(2026-08-26. "new"는 지저분하다는 피드백으로 축약).
   비정기 발행물의 새 글 식별용 */
.new-mark {
  font-size: .66rem; color: var(--accent); opacity: .55; margin-left: 10px; vertical-align: 1px;
}
.eye {
  border: none; background: none; opacity: 0; font-size: .8rem; padding: 4px;
}
.pub-row:hover .eye { opacity: .55; }
.eye:hover { opacity: 1 !important; }
.hidden-pubs { margin-top: 18px; color: var(--ink-soft); }
.hidden-pubs summary { cursor: pointer; padding: 6px 10px; font-size: .85rem; }
.hidden-pubs .eye { opacity: .55; }
.muted .pub-link { color: var(--ink-faint); }

/* 목록 */
.list { min-width: 0; }
.notice, .empty {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink-soft); margin-bottom: 18px;
}
.item-row {
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.item-row .meta {
  display: flex; align-items: center; gap: 10px;
  font-size: .8rem; color: var(--ink-soft); margin-bottom: 3px;
}
.item-row .meta time { color: var(--ink-fainter); }
.item-row h2 { font-size: 1.05rem; line-height: 1.45; font-weight: 400; }
.item-row h2 a:hover { color: var(--accent); }
.pager { display: flex; justify-content: space-between; padding: 22px 0; color: var(--accent); }

/* 읽음 처리 */
.item-row { position: relative; padding-right: 92px; }
.done-form { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); opacity: 0; }
.item-row:hover .done-form { opacity: 1; }
/* 다시보기(★) — ✓ 왼쪽. 담긴 항목은 호버 없이도 ★ 표시 */
.star-form { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); opacity: 0; }
.item-row:hover .star-form, .star-form.on { opacity: 1; }
.star-form button { border: none; background: none; font-size: .95rem; color: var(--ink-faint); padding: 3px 6px; }
.star-form button:hover, .star-form button.on { color: var(--accent); }
.done-form button, .read-form button, .note-actions button, .note-add button, #to-top, #copy-text, .sub-btn, .unsub-btn {
  border: 1px solid var(--line); background: var(--bg);
  border-radius: 6px; padding: 3px 10px; font-size: .8rem; color: var(--ink-soft);
  white-space: nowrap;
}
.done-form button:hover, .read-form button:hover, .note-actions button:hover, .note-add button:hover, #to-top:hover, #copy-text:hover, .sub-btn:hover {
  border-color: var(--accent); color: var(--accent);
}
.unsub-btn:hover { border-color: var(--danger); color: var(--danger); }  /* 해지는 파괴적 — danger 톤 */
/* 좌측 메뉴 분류 헤딩(봄봄 분류 기준) — 형광펜 색(--hl-bg) 칩으로 구분
   (accent 글자색만으로 바꿔봤다가 잘 안 보여 원복, 2026-08-24) */
.cat-head {
  margin: 16px 0 3px; font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em;
  background: var(--hl-bg); display: inline-block; padding: 1px 8px; border-radius: 3px;
}
/* 상단바 검색 — 평시엔 톱니바퀴와 동일한 톤의 돋보기 아이콘만, 클릭 시 입력창 확장 */
.top-search { display: flex; align-items: center; }
#search-btn {
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--ink-soft);
  padding: 7px; border-radius: 8px;
}
#search-btn:hover { background: var(--hover-bg); color: var(--ink); }
.top-search input {
  width: 0; padding: 4px 0; border: 1px solid transparent; background: transparent;
  border-radius: 16px; font-size: .85rem; color: var(--ink); opacity: 0;
  transition: width .15s, opacity .15s, padding .15s;
}
.top-search.open input {
  width: 190px; padding: 4px 12px; opacity: 1;
  border-color: var(--line); background: var(--surface);
}
.top-search.open input:focus { border-color: var(--accent); outline: none; }

/* 검색 결과 */
.search-form input {
  width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 10px;
  padding: 10px 14px; font-size: 1rem; color: var(--ink); margin-bottom: 6px;
}
.search-form input:focus { border-color: var(--accent); outline: none; }
.search-count { font-size: .85rem; color: var(--ink-soft); margin: 6px 0 14px; }
.snippet { font-size: .85rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.55; }

/* 목록 상단 오늘/전체 토글 */
.view-toggle { margin: 0 0 14px; font-size: .85rem; }
.view-toggle a { color: var(--ink-soft); margin-right: 10px; text-decoration: none; }
.view-toggle a.active { color: var(--accent); border-bottom: 1px solid var(--accent); }
.read-form { display: inline-block; margin-left: 8px; }
.nav-item.read { opacity: .45; }

/* 메모 */
.note-resolved { opacity: .55; }
.note-answer { color: var(--accent); font-size: .88rem; margin-top: 5px; }
.answer-edit summary {
  font-size: .76rem; color: var(--ink-faint); cursor: pointer; margin-top: 5px; list-style-position: inside;
}
.answer-edit summary:hover { color: var(--accent); }
.answer-form { display: flex; gap: 6px; margin-top: 6px; max-width: 420px; }
.answer-form input {
  flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
  font: inherit; font-size: .84rem; outline: none;
}
.answer-form input:focus { border-color: var(--accent); }
.note-text { white-space: normal !important; min-width: 240px; }
.note-actions { display: flex; gap: 6px; }
.note-add { display: flex; gap: 8px; margin: 14px 0 20px; max-width: 520px; }
.note-add input {
  flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px;
  font: inherit; font-size: .88rem; outline: none;
}
.note-add input:focus { border-color: var(--accent); }

/* 하이라이트 */
mark.hl {
  background: var(--hl-bg); color: inherit; padding: 0;
  border-radius: 2px; transition: background .5s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
mark.hl.hl-focus { background: var(--hl-bg-strong); }
.hl-popover {
  position: absolute; z-index: 20; display: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 3px;
}
.hl-popover button {
  border: none; background: none; font-size: .8rem; color: var(--ink-soft);
  padding: 4px 10px; border-radius: 6px;
}
.hl-popover button:hover { color: var(--accent); background: var(--hover-bg); }
/* 모바일 형광펜 팝오버(2026-09-03) — 길게 눌러 텍스트를 고르면 브라우저 자체 메뉴(복사·검색·공유)가
   선택 영역 위아래를 차지해 제자리 팝오버가 가려진다. 화면 하단에 고정하고 터치 크기로 키운다.
   글자색을 accent로 두는 건 모바일엔 hover가 없어 회색 글자만으로는 눈에 안 띄기 때문 */
.hl-popover.hl-fixed {
  position: fixed; left: 50%; top: auto; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  padding: 4px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}
.hl-popover.hl-fixed button { font-size: .95rem; padding: 12px 24px; color: var(--accent); }
.hl-quote { white-space: normal !important; min-width: 260px; }
/* 메모 담김 알림(2026-09-04) — 팝오버 안에 띄우면 모바일에서 selectionchange가 라벨을 되돌려 못 읽는다 */
.hl-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 30;
  background: var(--ink); color: var(--bg); font-size: .82rem;
  padding: 8px 16px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.hl-toast.on { opacity: .92; }
/* 하이라이트 모아보기는 인용문이 주인공 — 페이지·인용 칸 폭 제한 해제(2026-08-21 사용자 요청)
   .subs-page 규칙이 파일 뒤쪽에 있어 같은 특이도면 밀림 → .subs-page.hl-page로 우선 */
.subs-page.hl-page { max-width: none; }
.subs-page.hl-page .hl-quote { width: 62%; }
.subs-page.hl-page .status, .subs-page.hl-page td:nth-child(4) { white-space: nowrap; }

/* 발행물 라벨 (담백한 텍스트) */
.badge {
  display: inline-block; font-size: .78rem; font-weight: 600; color: var(--ink-soft);
}

/* 구독 현황 */
.subs-page { grid-column: 1 / -1; max-width: 1000px; min-width: 0; }
.subs-title { font-size: 1.4rem; font-weight: 400; margin: 4px 0 6px; }
.subs-section { font-size: 1.02rem; font-weight: 400; margin: 28px 0 10px; }
.table-wrap { overflow-x: auto; }
.subs-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.subs-table th, .subs-table td {
  border-bottom: 1px solid var(--line); padding: 8px 12px; text-align: left; white-space: nowrap;
}
.subs-table td:last-child, .subs-table th:last-child { white-space: normal; }
.subs-table th { color: var(--ink-soft); font-weight: 400; font-size: .78rem; }
.subs-table a:hover { color: var(--accent); }
.subs-table .status { color: var(--ink-soft); font-size: .82rem; }
.subs-table .ext { color: var(--ink-soft); font-size: .8rem; }
.subs-note { margin-top: 24px; color: var(--ink-soft); font-size: .85rem; }
.catalog-cat { border-bottom: 1px solid var(--line); }
.catalog-cat summary {
  cursor: pointer; padding: 10px 4px; font-size: .95rem; list-style-position: inside;
}
.catalog-cat summary:hover { color: var(--accent); }
.catalog-cat .table-wrap { padding: 0 4px 14px; }
.catalog-cat .subs-table td:first-child { min-width: 200px; }
.nl-cell { display: flex; align-items: center; gap: 10px; }
.nl-logo {
  width: 26px; height: 26px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--line); flex-shrink: 0; background: var(--hover-bg);
}
.subs-note code { background: var(--hover-bg); padding: 1px 6px; border-radius: 4px; }

/* 실험실(/lab, 2026-08-26) — 격리된 실험 공간. 담백하게: 헤딩·설명·입력 한 줄·결과 목록 */
.lab-h2 { font-size: 1.02rem; font-weight: 400; margin: 30px 0 4px; }
.lab-h3 { font-size: .92rem; font-weight: 400; margin: 28px 0 8px; color: var(--ink-soft); }
.lab-desc { color: var(--ink-soft); font-size: .85rem; margin: 0 0 8px; }
.lab-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.lab-form input {
  flex: 1; min-width: 240px; max-width: 480px; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 12px; font: inherit; font-size: .88rem; outline: none;
}
.lab-form input:focus { border-color: var(--accent); }
.lab-status { font-size: .8rem; color: var(--ink-faint); }
.lab-list { list-style: none; padding: 0; margin: 6px 0 0; }
.lab-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.lab-list li a:hover { color: var(--accent); }

/* 실험 3 — 채널 영상 목록(제목만 받아 두고 골라 만든다) */
.lab-sorts { display: flex; gap: 8px; margin: 16px 0 2px; }
.lab-sorts a {
  font-size: .82rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
.lab-sorts a.on { border-color: var(--accent); color: var(--accent); }
.lab-vids { list-style: none; padding: 0; margin: 8px 0 0; }
.lab-vids li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.lab-vids .v-main { flex: 1 1 320px; min-width: 0; }
.lab-vids .v-meta { color: var(--ink-faint); font-size: .82rem; margin-left: 8px; white-space: nowrap; }
.lab-vids .v-act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.lab-vids .v-act .status { font-size: .8rem; color: var(--ink-faint); }
.lab-meta { font-size: .78rem; color: var(--ink-faint); flex: 1; }
.lab-reader { max-width: 760px; }
/* 대화형 전사의 화자 라벨 — 무볼드 원칙대로 연한 색 한 겹만(2026-09-03, 2026-09-04부터 본 서비스도 사용).
   내어쓰기(padding-left + 음수 text-indent)로 줄바꿈된 줄이 라벨 아래가 아니라 본문 선에 맞는다.
   :has() 미지원 브라우저에서는 내어쓰기만 빠지고 라벨은 그대로 보인다. */
.reader p:has(> .sp) { display: flex; gap: 1em; align-items: baseline; }
.reader .sp { flex: 0 0 3.4em; color: var(--ink-faint); white-space: nowrap; }
/* 본문 칸 — 형광펜(mark)이 생겨도 flex 아이템이 늘지 않아 문단이 쪼개지지 않는다(2026-09-04) */
.reader .tx { flex: 1; min-width: 0; }

/* 탐색 페이지 */
#disc-filter {
  width: 100%; max-width: 420px; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 12px; font: inherit; font-size: .88rem; outline: none; margin: 10px 0 4px;
}
#disc-filter:focus { border-color: var(--accent); }
.disc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.disc-nav a {
  font-size: .82rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
.disc-nav a:hover { color: var(--accent); border-color: var(--accent); }
.disc-cat { font-size: 1.02rem; font-weight: 400; margin: 30px 0 12px; scroll-margin-top: 80px; }
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;
}
/* 카드 = 사이트 링크(.nl-card-link, ↗)와 구독 액션 행(.nl-card-actions)의 세로 구성(2026-08-25) */
.nl-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface);
}
.nl-card:hover { border-color: var(--accent); }
.nl-card-link { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.nl-card-link:hover .nl-card-name { color: var(--accent); }
.nl-card .nl-logo { width: 34px; height: 34px; }
.nl-card-body { min-width: 0; }
.nl-card-name { display: block; font-size: .92rem; line-height: 1.4; }
.ext-mark { font-size: .72rem; color: var(--ink-faint); margin-left: 4px; }
.nl-card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .8rem; color: var(--ink-soft); line-height: 1.45; margin-top: 2px;
}
.sub-badge { font-size: .72rem; color: var(--accent); margin-left: 6px; }
.nl-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nl-card-actions:empty { display: none; }

/* 탐색: 이미 구독(수집) 중인 뉴스레터는 카드째 구분 */
.nl-card.subscribed {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent); /* 테두리 2px 효과 — 레이아웃 이동 없이 */
  background: var(--hl-bg);
}
.nl-card.subscribed .sub-badge {
  background: var(--accent); color: #fff;
  border-radius: 99px; padding: 1px 8px;
}

/* 탐색: 구독 시도 실패(수집 불가) — 무채색 침강(subscribed의 accent 강조와 대비) */
.nl-card.failed { background: var(--hover-bg); }
.fail-badge {
  font-size: .72rem; color: var(--danger); border: 1px solid var(--danger);
  border-radius: 99px; padding: 1px 8px; white-space: nowrap;
}
.fail-reason { font-size: .75rem; color: var(--ink-soft); }

/* 탐색 숨김(2026-08-26): "숨김"은 글자만(액션 행 오른쪽 끝), 숨긴 카드는 페이지 아래 접힌 details에 모임 */
.hide-btn {
  margin-left: auto; border: 0; background: none; padding: 3px 4px;
  font-size: .78rem; color: var(--ink-faint); white-space: nowrap;
}
.hide-btn:hover { color: var(--ink-soft); }
.unhide-btn {
  border: 1px solid var(--line); background: var(--bg);
  border-radius: 6px; padding: 3px 10px; font-size: .8rem; color: var(--ink-soft); white-space: nowrap;
}
.unhide-btn:hover { border-color: var(--accent); color: var(--accent); }
.disc-section.empty, .disc-nav a.empty { display: none; }   /* 전부 숨겨 빈 분류는 헤딩·칩도 감춤 */
.disc-hidden { margin-top: 40px; }
.disc-hidden > summary {
  cursor: pointer; font-size: .9rem; color: var(--ink-soft); list-style: none;
  border-top: 1px solid var(--line); padding: 14px 0;
}
.disc-hidden > summary::-webkit-details-marker { display: none; }
.disc-hidden > summary::before { content: "▸ "; color: var(--ink-faint); }
.disc-hidden[open] > summary::before { content: "▾ "; }
.disc-hidden > summary:hover { color: var(--accent); }
.disc-hidden .card-grid { margin-bottom: 8px; }

/* 리더 뷰 옆 제목 목록 */
.reader-side { position: sticky; top: 74px; align-self: start; }
.nav-list {
  max-height: calc(100vh - 210px); overflow-y: auto;
  padding-right: 6px; font-size: .84rem;
  scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent;
}
.nav-list::-webkit-scrollbar { width: 8px; }
.nav-list::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
.nav-list::-webkit-scrollbar-track { background: transparent; }
.nav-head { font-size: .82rem; color: var(--ink-soft); padding: 4px 10px 2px; }
.nav-head a:hover { color: var(--accent); }
.nav-pub-name { font-size: .95rem; font-weight: 400; padding: 4px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.nav-pub-name a:hover { color: var(--accent); }
.nav-item {
  display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink-soft);
}
.nav-item:hover { background: var(--hover-bg); }
.nav-item.active { background: var(--active-bg); color: var(--ink); }
.nav-item .badge { font-size: .7rem; }
.nav-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 3px; line-height: 1.4;
}
@media (max-width: 760px) {
  .reader-side { order: 2; position: static; margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px; }
  .nav-list { max-height: none; }
  .reader-page { order: 1; }
}

/* 리더 뷰 */
.reader-page { min-width: 0; max-width: 960px; width: 100%; }
.reader-head h1 { font-size: 1.02rem; font-weight: 400; line-height: 1.5; margin: 8px 0 6px; }
.reader-meta { font-size: .87rem; color: var(--ink-soft); }
.reader-meta a { color: var(--accent); }
/* 상단 액션(읽음·다음 글 + ☆ 다시보기) — 데스크톱은 메타 줄 이어서, 모바일은 자체 줄(아래 미디어쿼리) */
.reader-head-actions { display: inline-flex; gap: 8px; margin-left: 8px; vertical-align: baseline; }
.reader-head-actions .read-form { margin-left: 0; }

/* 유튜브 전사 요약 블록 — 본문과 동일한 글꼴·크기·색, 불릿 없는 문단. 영역 구분은 상단 라벨 + 하단 구분선만
   (2026-08-25 사용자 요청: 회색 박스·불릿 제거) */
.ai-summary {
  margin-top: 30px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-family: var(--reader-font, inherit);
  font-size: calc(1.02rem * var(--reader-scale, 1)); line-height: 1.8; color: var(--ink);
  word-break: break-word; overflow-wrap: anywhere;
}
.ai-summary p { margin-bottom: 1.1em; }
/* 영역 라벨 — "요약" / "전문" 두 글자만(사용자 요청) */
.section-head { font-size: .8rem; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.6; }
.body-head { margin-top: 24px; }
.body-head + .reader { border-top: none; padding-top: 0; margin-top: 0; }

.reader {
  margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line);
  /* 글자 크기: 설정의 −/+ 가 --reader-scale(0.7~1.6)을 조절 */
  font-size: calc(1.02rem * var(--reader-scale, 1));
  /* 본문 글꼴: 설정의 "본문 글꼴"이 --reader-font를 지정(이북식 — 본문에만 적용, UI는 불변) */
  font-family: var(--reader-font, inherit);
  line-height: 1.8; word-break: break-word; overflow-wrap: anywhere;
}
.reader p, .reader ul, .reader ol, .reader table, .reader figure { margin-bottom: 1.1em; }
/* 밋밋한 본문: 볼드·제목 강조 없이 균일한 텍스트 */
.reader strong, .reader b { font-weight: normal; }
.reader h1, .reader h2, .reader h3, .reader h4, .reader h5, .reader h6 {
  margin: 1.3em 0 .5em; line-height: 1.5; font-size: 1em; font-weight: normal;
}
.reader img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
/* 문장 속 이모지 이미지(네이버 노토이모지)는 인라인 유지 — 블록 중앙정렬로 줄이 끊기지 않게 */
.reader img[src*="notoemoji"] {
  display: inline; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin: 0; border-radius: 0;
}
/* 실험 4 소셜 레터 — 글 하나가 시작되는 자리의 시각. 짧은 글 여러 개를 이어 붙인 편이라
   구분만 되면 되므로 본문보다 작고 옅게 두고, 링크여도 밑줄·accent 색을 쓰지 않는다 */
.reader .sp-time { margin-bottom: .4em; font-size: .85em; color: var(--ink-faint); }
/* 인스타 카드뉴스에서 이미지 안 글자를 옮겨 적은 줄(2026-09-10).
   PC는 이미지가 기본으로 꺼져 있어 이 줄이 본문 노릇을 하므로 본문 크기를 그대로 쓰고,
   캡션과 구분만 되게 왼쪽 선 하나만 둔다. */
.reader .sp-card { margin: 1em 0 .5em; padding-left: .7em; border-left: 2px solid var(--hl-bg); }
.reader .sp-time a { color: inherit; text-decoration: none; }
.reader .sp-time a:hover { text-decoration: underline; }
/* 실험 4 소셜 레터 본문 이미지 — 짧은 글에 딸린 사진이라 본문 폭을 다 채우면 글 흐름이 끊긴다.
   폭을 절반쯤(360px)으로 묶고 글과 같은 왼쪽 기준에 둔다(2026-09-09 "쓰레드 이미지 좀 작게").
   선택자를 src 기준으로 둔 덕에 이미 조립된 letters의 content_html을 다시 만들 필요가 없다 */
.reader img[src^="/lab/social/media/"] { max-width: min(540px, 100%); margin: 0; }
/* PC(641px↑)에서는 이모지 숨김(2026-08-26 "너무 알록달록", 2026-09-08 리더 밖까지 확대) — 텍스트 이모지
   (.emoji, base.html JS가 글 영역에서만 감쌈)와 네이버 노토이모지 이미지 모두. 모바일은 그대로 보임.
   숨겨도 textContent엔 남아 하이라이트 offset 무사 */
@media (min-width: 641px) {
  .emoji, .reader img[src*="notoemoji"] { display: none; }
}
.reader a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.reader blockquote {
  border-left: 3px solid var(--line); padding-left: 16px; color: var(--ink-soft); margin: 1.1em 0;
}
.reader pre {
  background: var(--hover-bg); border-radius: 8px; padding: 14px; overflow-x: auto;
  font-size: .85rem; line-height: 1.55; margin-bottom: 1.1em;
}
.reader code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .88em; }
/* 표 기본은 무테두리 — 스티비·메일침프 본문의 표는 전부 이메일 레이아웃용이라(전 항목 th 0건 확인, 2026-08-24)
   테두리를 그리면 회색 박스 투성이가 된다(앨리스 모먼트 사례). 진짜 데이터 표(th 있는 표)만 테두리 유지.
   가로 패딩 0 필수 — 레이아웃 표는 여러 겹 중첩이라 가로 패딩이 겹겹이 누적돼 들여쓰기가 커진다 */
.reader table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.reader td, .reader th { border: none; padding: 2px 0; }
.reader table:has(th) td, .reader table:has(th) th { border: 1px solid var(--line); padding: 6px 10px; font-size: .92rem; }
.reader ul, .reader ol { padding-left: 1.5em; }
.reader hr { border: none; border-top: 1px solid var(--line); margin: 1.6em 0; }

.reader-foot {
  margin: 34px 0 60px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.reader-foot a { color: var(--accent); font-weight: 600; }
.reader-foot-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.reader-foot-actions .read-form { margin-left: 0; }

/* 모바일 리더(≤640px): 상단 읽음 버튼이 메타 줄 안 인라인이라 줄바꿈되며
   어정쩡하게 떨어지던 문제(2026-08-21) — 자체 줄의 터치 버튼으로 분리.
   하단 액션 바도 세로 정렬 + 터치 크기로 정리 */
@media (max-width: 640px) {
  .reader-head-actions { display: flex; margin: 14px 0 0; }
  .reader-meta .read-form button,
  .reader-foot-actions button {
    padding: 8px 14px; font-size: .85rem; border-radius: 8px;
  }
  .reader-foot { flex-direction: column; align-items: flex-start; }
  .reader-foot-actions { margin-left: 0; flex-wrap: wrap; }
  .sub-btn, .unhide-btn { padding: 6px 12px; }   /* 탐색 구독·숨김 해제 버튼 터치 크기 */
  .hide-btn { padding: 6px 8px; }
}
/* 실험 2 — 링크드인 게시물 목록(2026-08-27). 실험 1 목록과 같은 결, 박스 없이 줄만 */
.lab-form .lab-num { flex: 0 0 64px; min-width: 0; }
.lab-fold { margin: 6px 0 4px; font-size: .82rem; color: var(--ink-faint); }
.lab-fold summary { cursor: pointer; }
.lab-posts { list-style: none; padding: 0; margin: 12px 0 0; }
.lab-posts li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.lab-posts li a:hover { color: var(--accent); }
.lab-posts .status { flex: none; font-variant-numeric: tabular-nums; }
/* 불릿형 요약(summary_style=bullets — 증시각도기TV, 2026-08-27). 본문과 같은 타이포에 점만 하나, 배경·테두리 없음 */
.summary-bullets { margin: 0; padding-left: 1.1em; list-style: disc; }
.summary-bullets li { margin: 5px 0; padding-left: 2px; }
.summary-bullets li::marker { color: var(--ink-faint); }

/* 이북 만들기(/epub, 2026-09-03) — 설정 몇 줄 + 내려받기 버튼뿐이라 설정 메뉴의 .menu-row를 그대로 빌려 쓴다 */
.epub-page { max-width: 640px; }
.epub-form { border: 1px solid var(--line); border-radius: 10px; padding: 4px 14px; margin: 18px 0 14px; }
.epub-form .menu-row { padding: 10px 0; }
.epub-form .menu-row + .menu-row { border-top: 1px solid var(--line); }
.epub-form select { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: .85rem; background: var(--surface); color: inherit; }
.epub-count { font-size: .9rem; color: var(--ink-soft); margin: 0 0 14px; }
.epub-dl {
  display: inline-block; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 20px; font-size: .95rem; background: var(--surface);
}
.epub-dl:hover { border-color: var(--accent); color: var(--accent); }
.epub-help { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 14px; font-size: .88rem; color: var(--ink-soft); }
.epub-help > summary { cursor: pointer; list-style: none; }
.epub-help > summary::-webkit-details-marker { display: none; }
.epub-help > summary::before { content: "▸ "; color: var(--ink-faint); }
.epub-help[open] > summary::before { content: "▾ "; }
.epub-help ol { padding-left: 1.2em; line-height: 1.7; }