:root {
  --bg: #f7f7f8;
  --card: #ffffff;
  --border: #e2e2e6;
  --text: #1c1c1e;
  --muted: #6b6b70;
  --accent: #03c75a;
  --select: #2563eb; /* 요일 탭에서 선택한 탭(파랑) — 오늘 표시(--danger, 빨강)와 구별된다 */
  --danger: #e5484d;
  --warn: #f5a524;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 24px;
}

header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
/* PC: 전체목록의 "마지막 확인" 문구를 제목 오른쪽에(길면 말줄임 — 제목을 밀어내지 않게). 모바일에서는 숨기고 접히는 필터 안의 같은 문구를 쓴다 */
.header-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); text-align: right; }
.list-head-status { display: none; }
h1 { font-size: 20px; margin: 0; }

button {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
button:hover { border-color: var(--accent); }
select {
  /* 앱 전체에서 select 하나하나 다르게 스타일링되어 높이/생김새가 제각각이던
     문제가 실제로 있었다(버튼과 나란히 있으면 flex가 늘려서 36px, 혼자 있으면
     30px, 스타일 자체가 없는 곳은 브라우저 기본값) — 전역으로 한 번에 통일한다.
     height를 명시적으로 고정해서(일반 버튼과 거의 같은 값), padding만 맞춰선
     안 없어지던 1px 안팎의 오차까지 최대한 줄인다. button 쪽엔 height를 강제로
     넣지 않는다 — 삭제 버튼처럼 의도적으로 작게 만든 버튼들까지 전부 커져버리는
     부작용이 있었다.*/
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  height: 36px;
}

/* 상단 탭: 스크롤해도 항상 보이게 고정 */
.main-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
}
.main-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 14px;
  font-size: 14px;
}
.main-tab.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* 검색창 등 툴바: 스크롤해도 상단 탭 밑에 붙어서 항상 보이게 고정.
   .main-tabs가 top:0에 고정돼 있으니, 그 실제 높이(패딩+글자+테두리 ≈ 41px)만큼
   아래에서 시작해야 겹치지 않는다 — 화면이 좁아져서 탭이 두 줄로 감싸지면
   약간 어긋날 수 있지만, 이 앱은 주로 넓은 화면에서 쓰이므로 우선순위가 낮다.*/
.toolbar-sticky {
  position: sticky;
  top: var(--nav-h, 41px); /* 상단 메뉴의 실제 높이(10-tabs.js의 syncStickyOffsets) — 좁은 창에서 메뉴가 두 줄로 접혀도 메뉴 바로 아래에 붙는다 */
  background: var(--bg);
  z-index: 15;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* "웹툰 전체목록"의 일괄 제외 바 — 검색창(.toolbar-sticky)이 이미 41px에 고정돼
   있으니, 그 바로 밑(검색창 자체 높이만큼 더)에 고정한다. 페이지를 스크롤해도
   선택 개수/버튼이 항상 보이게 하기 위함. */


.page.hidden { display: none; }
/* 이 클래스는 "무조건 숨김"이 목적이라, 다른 곳에서 같은 우선순위로 display를
   지정하는 규칙이 스타일시트 뒤쪽에 있으면(CSS 캐스케이드상 나중 규칙이 이겨서)
   .hidden을 붙여도 실제로는 안 숨겨지는 문제가 실제로 있었다 — 항상 이기도록
   !important를 붙인다. */
.hidden { display: none !important; }

.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--card);
}
.hint {
  font-size: 12px;
  color: var(--muted);
  margin: -8px 0 16px;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 14px;
  cursor: pointer;
}
.checkbox-label + .hint {
  /* 체크박스 라벨 바로 다음에 오는 hint는 위쪽 음수 마진을 안 쓴다 —
     라벨 자체가 스타일 없는 인라인 요소라(기본 <label>), 음수 마진이
     라벨 텍스트와 겹쳐 보이는 문제가 실제로 있었다. */
  margin-top: 0;
}
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 12px 0 6px;
}
.hint-inline {
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
}
.field-group {
  margin-top: 14px;
  margin-bottom: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.field-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.field-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 4px;
}
/* 아카이빙 공통 설정: 부분(같은 이름 파일 처리 / 파일명 변경 설정)과 설명이 붙은 선택지 */
.archive-common-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.archive-common-section h3 { margin: 0 0 8px; font-size: 14px; }
/* 전역 .hint는 제목(h2) 바로 밑에 끼우는 용도라 위쪽 여백이 -8px다 — h3/버튼 밑에서는 그대로 쓰면 겹치므로 이 구역 안에서는 되돌린다 */
.archive-common-section .hint { margin: 0 0 12px; }
.archive-save-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.archive-save-row + .hint { margin-top: 12px; }
.archive-option-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 10px; }
.archive-option-card { flex: 1 1 200px; display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--card); }
.archive-option-card input { margin-right: 6px; }
.archive-option-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.archive-option-title { font-weight: 600; font-size: 13px; }
.archive-option-desc { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.5; }
/* 보관할 폴더 즐겨찾기(폴더 선택기) */
.folder-favorites-row { margin-bottom: 16px; }
.folder-favorites-title { margin: 0 0 6px; }
.folder-favorites-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.folder-favorite-chip { display: inline-flex; align-items: center; border: 1px solid #b6e4c9; border-radius: 999px; background: #eaf8f0; overflow: hidden; }
.folder-favorite-chip button { border: 0; background: transparent; border-radius: 0; font-size: 12px; padding: 4px 10px; color: #0b6b36; }
.folder-favorite-chip .folder-favorite-name:hover { background: #d3f0e0; }
.folder-favorite-chip .folder-favorite-remove { padding: 4px 8px 4px 2px; color: #4f8f6b; }
.folder-favorite-chip .folder-favorite-remove:hover { color: var(--danger); }
.folder-favorite-chip-active { border-color: var(--accent); background: #d3f0e0; box-shadow: 0 0 0 1px var(--accent) inset; }
.folder-picker-path-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.folder-picker-path-row .folder-picker-path { flex: 1 1 auto; }
.folder-favorite-star { font-size: 12px; white-space: nowrap; background: #fff7df; border-color: #f0d98c; color: #7a5800; }
.folder-favorite-star:hover { background: #ffefbf; }
/* 기다무 충전 시각 다운로드 예정 목록 */
#waitfree-schedule-box h4 { margin: 12px 0 6px; font-size: 13px; }
.waitfree-schedule-list { list-style: none; margin: 0; padding: 0; }
.waitfree-schedule-list li { display: flex; align-items: center; gap: 12px; padding: 7px 12px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); font-size: 13px; }
.waitfree-time { font-weight: 600; min-width: 112px; }
.waitfree-title { flex: 1; }
.waitfree-left { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* 웹툰 목록: 요일별 탭, 더 보기 */
/* 아래 선은 border가 아니라 안쪽 그림자로 그린다 — 탭 버튼이 음수 마진으로 선 위에 겹치면 줄이 세로로 1px 넘쳐서 작은 세로 스크롤바가 생기고 끌면 움직였다 */
.weekday-tabs { display: flex; gap: 2px; margin: 4px 0 14px; box-shadow: inset 0 -1px 0 var(--border); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; white-space: nowrap; -webkit-overflow-scrolling: touch; }
/* 요일 탭/선택 막대는 고정 툴바 안에 있다(PC) — 툴바가 한 덩어리로 고정되므로 필터 줄이 두 줄로 접혀도 위치 계산이 어긋나지 않는다 */
.list-toolbar > .weekday-tabs { flex: 0 0 100%; margin: 0; }
.list-toolbar > #naver-list-bulk-bar { flex: 0 0 100%; position: static; }
.weekday-tab { flex: 0 0 auto; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 13px; font-size: 14px; font-weight: 600; color: var(--muted); }
.weekday-tab:hover { color: var(--text); }
.weekday-tab.active { color: var(--select); border-bottom-color: var(--select); }
.weekday-tab.today:not(.active) { color: var(--danger); border-bottom-color: var(--danger); }
.weekday-tab-count { margin-left: 5px; font-size: 11px; font-weight: 500; opacity: 0.75; }
.list-more { text-align: center; padding: 18px 0 28px; }
.list-more button { min-width: 180px; padding: 10px 18px; }
.token-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.token-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-alt, #f1f1f1);
  border: 1px solid var(--border);
  cursor: pointer;
}
.token-btn:hover {
  background: var(--border);
}
.archive-target-type-tabs {
  display: flex;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  width: fit-content;
  overflow: hidden;
  margin-bottom: 14px;
}
.archive-target-type-tab,
.archive-preview-type-tab {
  padding: 7px 16px;
  font-size: 13px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.archive-target-type-tab + .archive-target-type-tab,
.archive-preview-type-tab + .archive-preview-type-tab {
  border-left: 0.5px solid var(--border);
}
.archive-target-type-tab.active,
.archive-preview-type-tab.active {
  background: var(--surface-alt, #f1f1f1);
  color: var(--text);
  font-weight: 600;
}
.archive-target-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.archive-target-bulk-bar select {
  flex: 1;
  max-width: 200px;
}
.archive-target-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.archive-target-preset-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-alt, #f1f1f1);
  color: var(--muted);
  white-space: nowrap;
}
.text-input-full {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-sizing: border-box;
}
#archive-filename-template-preview {
  margin-top: 6px;
  font-family: monospace;
}
.toolbar input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

/* 네이버 전체목록: 카드 그리드 */
.webtoon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.webtoon-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.webtoon-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #eee;
}
.thumb-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #eee;
}
.webtoon-card-thumb-wrap {
  position: relative;
}
.webtoon-card-select {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  z-index: 2;
  cursor: pointer;
}
.platform-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
}
.platform-badge.platform-naver {
  background: #03c75a;
}
.platform-badge.platform-kakao {
  background: #fee500;
  color: #3c1e1e;
}
.webtoon-card-body {
  padding: 7px 9px 3px;
  flex: 1;
}
.webtoon-card-title {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 3px;
}
.webtoon-card-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.webtoon-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 9px 9px;
}
.webtoon-card-actions button { font-size: 11px; padding: 4px 6px; }
.webtoon-card-actions .icon-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  align-self: center;
}
.webtoon-card-actions .icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* 전체목록: 뷰어 아이콘 + 분석 버튼은 한 줄 — 분석 버튼이 아이콘을 뺀 나머지 폭을 채워서 줄 전체가 위의 버튼들과 같은 폭이다.
   뷰어 버튼이 없으면 분석은 아래 줄에 다른 버튼과 같은 크기(analyze-inline이 붙지 않는다) */
.card-viewer-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-viewer-row .icon-btn {
  align-self: auto;
}
.webtoon-card-actions .analyze-inline {
  flex: 1 1 auto;
  min-width: 0;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}
.badge.active { background: #e6f9ee; color: #03823d; }
.badge.unsubscribed { background: #f0f0f0; color: var(--muted); }
.badge.excluded { background: #fdecec; color: var(--danger); }
.badge.finished { background: #fff4e0; color: var(--warn); }
.badge.paused { background: #eef0ff; color: #4a4ad6; }
.badge.new-episode { background: #03c75a; color: white; font-weight: 700; }
.badge.new-release { background: #ff5252; color: white; font-weight: 700; }

.webtoon-card-title a {
  color: inherit;
  text-decoration: none;
}
.webtoon-card-title a:hover { text-decoration: underline; }
.webtoon-card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.empty-message {
  text-align: center;
  color: var(--muted);
  margin-top: 24px;
}

.error { color: var(--danger); font-size: 12px; }

/* 설정 페이지 */
.settings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.settings-card h2 { font-size: 16px; margin: 0 0 12px; }

/* 잡별 스케줄 설정 (끄기 / N분마다 / 특정 요일·시각) */
.schedule-block {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.schedule-block:last-of-type { border-bottom: none; }
/* "다운로드 리포트" 카드엔 발송 시각 스케줄 블록 하나만 있는데, 뒤에 다른
   field-group들이 이어져서 :last-of-type가 안 먹혀(같은 부모 안의 마지막
   div가 아니게 됨) 구분선이 바로 아래 "저장" 버튼과 붙어 보이는 문제가
   있었다 — 이 카드 안에서는 애초에 구분할 다음 스케줄 블록이 없으니 그냥 없앤다. */
#settings-card-report .schedule-block { border-bottom: none; }
.schedule-block h3 { font-size: 13px; margin: 0 0 8px; color: var(--muted); }
.schedule-mode {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}
.schedule-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.schedule-row.hidden { display: none; }
.schedule-interval-row input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.schedule-cron-row select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.schedule-cron-row {
  flex-direction: column;
  align-items: flex-start;
}
.schedule-times-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.schedule-time-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.schedule-time-remove {
  font-size: 11px;
  padding: 3px 8px;
  margin-left: 4px;
}
/* 카드 안의 탭(설정 > 다운로드 · 실행 스케줄) */
.card-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.card-tabs .card-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.card-tabs .card-tab:hover { color: var(--text); }
.card-tabs .card-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.card-tab-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.schedule-time-row { flex-wrap: wrap; }
.viewer-scan-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.schedule-day-chips { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; flex-wrap: wrap; }
.day-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 12px; cursor: pointer; user-select: none; }
.day-chip:has(input:checked) { border-color: var(--accent); background: #e8f8ef; color: #0b6b36; font-weight: 600; }
.day-chip input { margin: 0; }
.schedule-day-hint { font-size: 11px; color: var(--muted); margin: 6px 0 0; }

.manual-run-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.job-status-block { margin-top: 14px; }
.job-status-block h3 {
  font-size: 13px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.badge.job-idle { background: #f0f0f0; color: var(--muted); }
.badge.job-running { background: #e6f0ff; color: #1a5fd6; }
.badge.job-success { background: #e6f9ee; color: #03823d; }
.badge.job-failed { background: #fdecea; color: #c62828; }
.badge.job-error { background: #fdecec; color: var(--danger); }

/* 진행 로그: 검은 터미널이 아니라 일반 웹 카드 스타일로 */
.job-log {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 12px;
}
.job-log .log-line {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.job-log .log-line:last-child { border-bottom: none; }
.job-log .log-line .log-time { color: var(--muted); margin-right: 8px; }
.job-log .log-line.log-error { color: var(--danger); }

/* 작가/태그 레지스트리 */
.registry-add-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.registry-add-row input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.registry-add-row select {
  flex: 1;
  min-width: 160px;
}

/* 디스코드 설정 */
.copy-btn {
  font-size: 11px;
  padding: 3px 8px;
  margin-left: 6px;
}
.file-input-label {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  cursor: pointer;
}
.file-input-label input[type="file"] {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}
/* 설정의 백업/복원 카드 — 버튼과 복원 파일 선택 칸을 한 줄에 같은 높이로 놓는다(예전엔 파일 선택 칸이 더 커서 높이가 어긋났다) */
.backup-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.backup-actions .file-input-label { display: flex; align-items: center; gap: 8px; margin-left: 0; }
.backup-actions .file-input-label input[type="file"] { margin-top: 0; }
/* .hint는 입력칸에 바짝 붙이려고 위쪽 여백이 음수라서, 버튼 아래에 오면 버튼을 덮는다 */
.hint-after-controls { margin-top: 0; }

/* 수동 다운로드 테이블 */
.manual-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.manual-actions button { font-size: 12px; padding: 6px 10px; }
/* 툴바 바로 아래의 짧은 안내 — 처음 세 버튼(전체선택/미보유만 선택/기록용 전체선택)이 무엇을 고르는지 */
.manual-actions-hint { font-size: 12px; color: var(--muted); margin: -6px 0 12px; line-height: 1.6; }
.manual-actions-hint b { font-weight: 600; color: var(--text, inherit); margin-right: 4px; }
#manual-table, #kakao-manual-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 13px;
}
/* 표 자체에 overflow를 걸지 않는다 — 걸면 그 표가 스크롤 영역이 되어서, 바깥 .scroll-table-wrapper 안에서 머리글을 위에 고정(sticky)해도 소용이 없다.
   둥근 모서리는 바깥 wrapper가 잘라 준다. */
#manual-table th, #manual-table td, #kakao-manual-table th, #kakao-manual-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
#manual-table th, #kakao-manual-table th { background: #fafafa; color: var(--muted); font-weight: 600; }
#manual-table tr:last-child td, #kakao-manual-table tr:last-child td { border-bottom: none; }

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  justify-content: center;
  margin: 10px 0 20px;
}
.pagination button { font-size: 12px; padding: 5px 12px; }

.retention-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  font-size: 13px;
}
.retention-row input[type="number"] {
  width: 100px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

.webtoon-grid.small {
  margin-bottom: 16px;
}

/* 작가/태그 관리: 칩(pill) 스타일 — 선택됨/사용가능 두 칸, 클릭으로 이동 */
.chip-section {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.chip-column {
  flex: 1;
  min-width: 240px;
}
.chip-column h4 {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 600;
}
.chip-filter {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 10px;
}
.chip-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-height: 40px;
  max-height: 280px;
  overflow-y: auto;
}
.chip-empty-message {
  font-size: 12px;
  color: var(--muted);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  line-height: 1.4;
}
.chip:hover { filter: brightness(0.95); }
.chip.chip-selected {
  background: #e6f0ff;
  color: #1a5fd6;
}
.chip.chip-available {
  background: #f0f0f0;
  color: var(--text);
}
.chip .chip-icon {
  font-weight: 700;
  font-size: 14px;
}

.registry-manual-add {
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
}
.registry-manual-add summary {
  cursor: pointer;
}
.registry-manual-add .registry-add-row {
  margin-top: 10px;
}

.registry-resync-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.registry-resync-row + .hint {
  margin-top: 4px;
}

/* 실행 이력 */
.job-history-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}
/* 아카이빙 탭은 이 리스트가 페이지 전체를 차지하는 게 아니라, 다른 카드들과
   함께 쌓이는 카드 하나일 뿐이다 — 위 max-height(뷰포트 기준)를 그대로 쓰면
   리스트 자체가 너무 커져서, 항목이 늘어날 때 리스트 안에서 스크롤되기 전에
   이미 페이지 전체가 밀려버리는 문제가 있었다. 훨씬 작은 고정 높이로 잘라서
   카드 안에서만 스크롤되게 한다. */
.job-history-list-compact {
  max-height: 280px;
}
.scroll-table-wrapper {
  overflow-y: auto;
  border-radius: 8px;
}
.scroll-table-wrapper table {
  margin-bottom: 0;
}
.scroll-table-wrapper thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.job-history-entry {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.job-history-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 6px;
}
.job-history-summary .job-history-name {
  font-weight: 600;
  min-width: 70px;
}
.job-history-summary .job-history-time {
  color: var(--muted);
  font-size: 12px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; /* 잘리면 눌러서 펼친다(15-expand-text.js) */
}
/* 잘려서(…) 보이는 글자를 눌러서 펼친 모양(15-expand-text.js) — 줄바꿈되고, 공백 없는 긴 문자열(경로, 파일 이름)도 화면 폭에 맞게 꺾인다 */
.text-expanded {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}
.job-history-delete-btn {
  font-size: 11px;
  padding: 3px 8px;
}
.job-history-entry .job-log {
  display: none;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
}
.job-history-entry.expanded .job-log {
  display: block;
}

/* 디스코드 설정: 라벨 위 입력창 아래로 세로 정렬, 필드마다 줄바꿈 */
.discord-form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin-bottom: 14px;
}
.discord-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text);
}
.discord-form-grid input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.discord-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
#discord-bot-status {
  margin-top: 10px;
}

/* 아카이빙 폴더 선택기 */
.folder-picker-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
}
.folder-picker-summary-text {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-picker-mode-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.folder-picker-choice-active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.folder-picker-path {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.folder-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.folder-picker-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.folder-picker-row button {
  height: 36px;
}
.folder-picker-row button:first-child {
  flex: 1;
  text-align: left;
}
.folder-picker-row-selected {
  background: var(--accent-bg, #eef6ff);
  border-radius: 6px;
}
.folder-picker-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 12px;
  color: #c62828;
}
.folder-picker-warn button {
  height: 36px;
  flex-shrink: 0;
}
.folder-picker-new-row {
  margin-top: 4px;
}
.archive-edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  background: var(--accent-bg, #eef6ff);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.archive-edit-banner.hidden {
  /* .hidden 단독 규칙이 CSS 파일 순서상 이 규칙보다 앞에 있어서, 이 클래스의
     display:flex한테 밀려 안 숨겨지는 문제가 실제로 있었다 — 이 조합
     셀렉터로 명시적으로 다시 이기게 한다. */
  display: none;
}

/* "도움말" 탭 — README를 그대로 HTML로 변환해서 넣는 곳(app/api/routes.py의
   /api/help 참고). 일반 마크다운 요소들이 이 앱 전역 스타일엔 없어서 여기서만
   기본 가독성 정도를 챙긴다. */
.markdown-body {
  max-width: 900px;
  line-height: 1.6;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  margin-top: 28px;
  margin-bottom: 10px;
}
.markdown-body h1 { font-size: 24px; }
.markdown-body h2 { font-size: 19px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.markdown-body h3 { font-size: 16px; }
.markdown-body p, .markdown-body ul, .markdown-body ol {
  margin: 10px 0;
}
.markdown-body ul, .markdown-body ol {
  padding-left: 22px;
}
.markdown-body li { margin: 4px 0; }
.markdown-body code {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}
.markdown-body pre {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
}
.markdown-body pre code {
  border: none;
  padding: 0;
  background: none;
}
.markdown-body table {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
}
.markdown-body th, .markdown-body td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}
.markdown-body th { background: var(--card); }
.markdown-body a { color: inherit; text-decoration: underline; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.markdown-body h2 { scroll-margin-top: 12px; }
.markdown-body blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 4px solid var(--border);
  background: var(--card);
  border-radius: 0 6px 6px 0;
}
.markdown-body blockquote p { margin: 4px 0; }

/* 도움말 맨 위 목차 — 긴 문서에서 원하는 섹션으로 바로 이동 */
.help-toc {
  margin: 12px 0 24px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.help-toc ul { list-style: none; margin: 6px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.help-toc li { margin: 3px 0; break-inside: avoid; }
.help-toc li ul { columns: 1; margin: 2px 0 4px 14px; font-size: 0.92em; }
.help-toc a { text-decoration: none; }
.help-toc a:hover { text-decoration: underline; }
/* ── 목록 화면의 필터 접기 버튼/묶음 — 데스크톱은 예전 그대로(버튼 없음, 필터는 툴바에 펼쳐진 채) ─────────────── */
.filter-toggle { display: none; }
.list-filters { display: contents; }

/* ── 모바일(화면 폭 640px 이하) 전용 레이아웃 ──────────────────────────────────────────────────────────────
   위에서부터: ① 한 줄 메뉴바(좌우로 스와이프) ② 검색창 ③ 접었다 펼 수 있는 필터와 마지막 확인 시각 ④ 요일 탭.
   고정되는 것: 메뉴바 → 검색창 → 요일 탭이 차례로 쌓여서 고정된다(필터는 스크롤하면 위로 올라간다 — 고정 영역이 화면을 너무 차지하지 않게).
   고정 위치는 각 줄의 높이로 계산하므로 높이를 변수로 고정해 둔다. */
:root { --m-nav-h: 44px; --m-search-h: 54px; --m-tabs-h: 44px; }
@media (max-width: 640px) {
  .help-toc ul { columns: 1; }
  body { padding: 10px 12px 28px; }
  header { margin-bottom: 8px; }
  h1 { font-size: 17px; }

  /* ① 메뉴바: 한 줄, 가로 스와이프 */
  .main-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; margin: 0 -12px 0; padding: 0 12px; height: var(--m-nav-h); box-sizing: border-box; }
  .main-tabs::-webkit-scrollbar { display: none; }
  .main-tab { flex: 0 0 auto; white-space: nowrap; padding: 0 13px; height: calc(var(--m-nav-h) - 1px); }

  /* ② 검색창: 툴바 상자를 없애서(contents) 페이지 전체에서 메뉴바 바로 아래에 고정되게 한다 */
  .list-toolbar { display: contents; }
  .list-toolbar > .clearable-wrap { display: flex; width: 100%; flex: none; position: sticky; top: var(--m-nav-h); z-index: 16; background: var(--bg); box-sizing: border-box; height: var(--m-search-h); padding: 8px 0; }
  .list-toolbar input { font-size: 16px; } /* 16px 미만이면 iOS가 입력창을 눌렀을 때 화면을 확대한다 */

  /* ③ 필터: 접기 버튼 + 접히는 묶음(선택들), 마지막 확인 시각도 같이 접힌다 */
  .filter-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; margin: 2px 0 8px; padding: 10px 12px; font-size: 14px; font-weight: 600; background: var(--card); }
  .filter-toggle-arrow { color: var(--muted); }
  .list-filters { display: none; flex-wrap: wrap; gap: 8px; width: 100%; margin-bottom: 8px; }
  .filters-open .list-filters { display: flex; }
  .list-filters select, .list-filters button { flex: 1 1 calc(50% - 8px); min-width: 0; font-size: 14px; padding: 10px 10px; }
  .list-head-status { display: none; margin: 0 0 8px; }
  .filters-open .list-head-status { display: block; }

  /* ④ 요일 탭: 검색창 바로 아래에 고정 */
  .list-toolbar > .weekday-tabs { flex: none; position: sticky; top: calc(var(--m-nav-h) + var(--m-search-h)); z-index: 15; background: var(--bg); box-sizing: border-box; height: var(--m-tabs-h); margin: 0 -12px 10px; padding: 0 12px; align-items: stretch; }
  .weekday-tab { padding: 0 13px; }
  .header-status { display: none; }
  .list-toolbar > #naver-list-bulk-bar { position: sticky; top: calc(var(--m-nav-h) + var(--m-search-h) + var(--m-tabs-h)); z-index: 14; background: var(--bg); }
}

/* 자주 묻는 질문 — 질문만 보이고 눌러서 펼친다 */
.markdown-body details {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.markdown-body details > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
}
.markdown-body details[open] > summary { border-bottom: 1px solid var(--border); }
.markdown-body details > :not(summary) { margin-left: 14px; margin-right: 14px; }
.markdown-body details > p:last-child { margin-bottom: 12px; }


#kp-cookie-json { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 12px; }

/* 목록 카드: 화면 밖 카드는 그리기를 건너뛰어 800여 개를 다뤄도 스크롤/탭 전환이 가볍게 */
.webtoon-card { content-visibility: auto; contain-intrinsic-size: auto 360px; }
.run-target-select { margin-right: 6px; }

/* 카카오페이지 수동 다운로드 분석 표 */
.manual-title-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; }
.manual-title-row h3 { margin: 0; }
/* 버튼처럼 보이는 링크(새 탭으로 작품 페이지를 연다) — 구독 버튼 옆에서 같은 높이로 보이게 한다 */
.link-button { display: inline-block; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 8px 14px; font-size: 13px; color: var(--text); text-decoration: none; }
.link-button:hover { border-color: var(--accent); }
.kakao-manual-summary { margin: 6px 0 12px; padding: 10px 12px; font-size: 13px; line-height: 1.7; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.kakao-manual-tickets { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.kakao-manual-tickets b { font-weight: 700; }
.kakao-manual-summary .warn { color: #b26a00; }
#kakao-manual-table td:nth-child(4), #kakao-manual-table td:nth-child(6) { text-align: center; white-space: nowrap; }
.kp-badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; color: #fff; }
.kp-free { background: #28a745; }
.kp-owned { background: #0d6efd; }
.kp-locked { background: #6c757d; }
.kp-waitfree { background: #e08a00; }
.kp-rental { background: #7b4bd1; }
/* 아직 못 여는 이유: 기다무 충전 대기(기다무 색을 옅게) / 대여권 필요(대여권 색을 옅게) — 지금 쓸 수 있는 "기다무"/"대여권"과 한눈에 구분되게 */
.kp-waitfree-wait { background: #c9a35c; }
.kp-rental-needed { background: #a592d6; }
.kp-done { background: #0d6efd; }
.kp-wait { color: #333; font-weight: 600; }
.kp-before { color: #999; }

/* 다운로드 스케줄(여러 개 등록) */
.schedule-entry { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.schedule-entry-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.schedule-entry-head .schedule-entry-remove { margin-left: auto; }

/* 카카오 수동 다운로드 표: 열 너비를 고정해서 분석할 때마다 번호/제목/상태 위치가 흔들리지 않게 한다 */
#kakao-manual-table { table-layout: fixed; min-width: 740px; }
#kakao-manual-table th:nth-child(1), #kakao-manual-table td:nth-child(1) { width: 40px; text-align: center; }
#kakao-manual-table th:nth-child(2), #kakao-manual-table td:nth-child(2) { width: 64px; text-align: right; }
#kakao-manual-table th:nth-child(3), #kakao-manual-table td:nth-child(3) { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kakao-manual-table th:nth-child(4), #kakao-manual-table td:nth-child(4) { width: 108px; text-align: center; }  /* "대여권 필요"/"기다무 대기" 배지가 잘리지 않을 폭 */
#kakao-manual-table th:nth-child(5), #kakao-manual-table td:nth-child(5) { width: 150px; white-space: nowrap; }
#kakao-manual-table th:nth-child(6), #kakao-manual-table td:nth-child(6) { width: 190px; text-align: center; white-space: nowrap; }  /* "이미받음" 배지 + "보관 폴더로 옮김"이 잘리지 않을 폭 */
#kakao-manual-table td:nth-child(2), #kakao-manual-table td:nth-child(3) { padding-left: 12px; }
.scroll-table-wrapper { overflow-x: auto; }

/* 다운로드 폴더 선택기 */
.download-root-picker { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--card); }
.download-root-picker .drp-current { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.download-root-picker .drp-current .drp-path { font-family: monospace; font-size: 13px; word-break: break-all; }
.download-root-picker .drp-current .drp-host { color: var(--muted); font-size: 12px; }
.download-root-picker .drp-browser { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.download-root-picker .drp-crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; font-size: 13px; }
.download-root-picker .drp-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin-bottom: 8px; }
.download-root-picker .drp-list button { text-align: left; font-size: 13px; }
.download-root-picker .drp-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 백업 복원 결과 — 확인할 것/다시 입력할 것 */
.backup-report { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.backup-report ul { margin: 6px 0 12px; padding-left: 20px; }
.backup-report li { margin: 4px 0; }
.backup-report .backup-warnings li { color: #b45309; }
.backup-report button { margin-top: 4px; }

/* 카카오 수동 다운로드 — 아카이빙으로 보관 폴더에 옮겨진 회차 표시 */
.kp-archived { color: var(--muted, #888); font-size: 0.85em; }

/* 검색창 지우기(×) 버튼 — 입력 칸을 감싸는 래퍼 안에서 오른쪽에 붙는다. 비어 있을 땐(placeholder가 보일 때) CSS만으로 숨긴다 */
.clearable-wrap { position: relative; display: inline-flex; align-items: center; }
.toolbar > .clearable-wrap { display: flex; flex: 1; min-width: 0; }
.clearable-wrap > input { flex: 1; width: 100%; min-width: 0; box-sizing: border-box; padding-right: 28px; }
.clearable-wrap .input-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); padding: 2px 8px; border: none; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.clearable-wrap .input-clear:hover { color: var(--text); border: none; }
.clearable-wrap > input:placeholder-shown + .input-clear { display: none; }