/* ============================================================
   한국농어민신문 Wiki — 벼리 디자인 시스템 이식
   원본: proofreading-cloud/DESIGN.md
   ⚠️ !important 가 많은 건 Vuetify가 색·배경을 요소마다 직접 박아두기 때문이다.
      구체성만으로는 못 이겨서, 이긴 이유가 있는 자리에만 붙였다.
   ============================================================ */

/* ── 팔레트 ────────────────────────────────────────────────── */
.v-application{
  --b-ink:#1a1a1a; --b-paper:#fafaf8; --b-card:#fff; --b-line:#e6e5e0;
  --b-muted:#6b6f6a; --b-green:#17553b; --b-green-deep:#0f3f2b; --b-green-soft:#e8f0ea;
  --b-warn:#9a6a12; --b-warn-soft:#f7f0dd; --b-warn-ink:#6b4c0e;
  --b-bar:#17553b; --b-thead:#f7f7f4;
}
.v-application.theme--dark{
  --b-ink:#e9e8e3; --b-paper:#191b1a; --b-card:#232624; --b-line:#373a37;
  --b-muted:#a2a69f; --b-green:#5fbf8e; --b-green-deep:#8adcb0; --b-green-soft:#1e2c24;
  --b-warn:#e8c877; --b-warn-soft:#413a26; --b-warn-ink:#e8c877;
  --b-bar:#23593d; --b-thead:#2b2e2c;
}

/* ── 서체 ──────────────────────────────────────────────────── */
/* 벼리와 같은 Pretendard GOV. 폰트 파일은 Head Injection에서 불러온다 */
.v-application, .v-application .v-btn, .v-application input,
.v-application textarea, .contents, .contents *{
  font-family:'Pretendard GOV',-apple-system,'Malgun Gothic',sans-serif !important;
}

/* ── 표면 ──────────────────────────────────────────────────── */
.v-application{ background:var(--b-paper) !important; }
/* 본문 영역의 시트 배경을 걷어내야 페이지 배경이 그대로 비친다 */
.v-application .v-main,
.v-application .v-sheet:not(.v-app-bar):not(.v-footer){ background:transparent !important; }
header.v-app-bar.nav-header,
header.v-app-bar.nav-header .v-toolbar__content{ background:var(--b-bar) !important; }
.v-footer{ background:var(--b-paper) !important; color:var(--b-muted) !important;
  border-top:1px solid var(--b-line); }

/* ── 머리말 ────────────────────────────────────────────────── */
/* 굵기는 같게, 크기로 위계를 준다 — 둘 다 굵으면 시선이 어디로 갈지 흐려진다 */
.v-toolbar__title .subheading{
  font-size:21px !important; font-weight:800 !important; letter-spacing:-.03em !important;
}
.page-header-headings .headline{
  font-size:26px !important; font-weight:600 !important;
  letter-spacing:-.02em !important; line-height:1.3 !important;
  color:var(--b-ink) !important;
}
/* Vuetify가 .text--darken-1 에 !important 를 박아둬서 클래스를 하나 더 물려야 이긴다 */
.page-header-headings .caption.grey--text{ color:var(--b-muted) !important; }

/* ── 본문 타이포 ───────────────────────────────────────────── */
/* 하위 요소까지 색을 명시해야 다크 테마 잔재가 안 남는다 */
.contents, .contents p, .contents li, .contents td, .contents th,
.contents h1, .contents h2, .contents h3, .contents h4{ color:var(--b-ink) !important; }
.contents, .contents p, .contents li{ font-size:14.5px; line-height:1.75; }
.contents h1{ font-size:24px; font-weight:700; line-height:1.3; letter-spacing:-.02em; }
.contents h2{ font-size:19px; font-weight:700; margin-top:2em;
  padding-bottom:.35em; border-bottom:1px solid var(--b-line); clear:both; }
.contents h3{ font-size:16px; font-weight:700; margin-top:1.6em; }
.contents a, .contents a *{ color:var(--b-green) !important; }
.contents a:hover{ color:var(--b-green-deep) !important; }

/* ── 표 ────────────────────────────────────────────────────── */
.contents table{ background:var(--b-card) !important;
  border:1px solid var(--b-line); border-radius:10px;
  border-collapse:separate; border-spacing:0; overflow:hidden; }
.contents table th, .contents table td{
  border-bottom:1px solid var(--b-line); padding:10px 14px; font-size:13.5px; }
.contents table tr:last-child th,
.contents table tr:last-child td{ border-bottom:0; }
.contents table th{ background:var(--b-thead) !important; font-weight:700; text-align:left; }

/* ── 인포박스 ──────────────────────────────────────────────── */
/* 변환기가 붙이는 {.infobox} / {.infobox-title} 표식으로 잡는다 */
.contents p.infobox-title{ float:right; clear:right; width:320px; margin:2px 0 6px 26px;
  font-size:12px; font-weight:700; color:var(--b-muted) !important; text-align:center; }
.contents table.infobox{ float:right; clear:right; width:320px; margin:0 0 20px 26px; }
.contents table.infobox thead{ display:none; }  /* 마크다운 표의 빈 헤더 행 */
.contents table.infobox td{ padding:8px 10px; font-size:12.5px; vertical-align:top; }
.contents table.infobox td:first-child{ width:92px;
  background:var(--b-thead) !important; color:var(--b-muted) !important; white-space:nowrap; }
@media (max-width:900px){
  .contents p.infobox-title, .contents table.infobox{ float:none; width:100%; margin-left:0; }
}

/* ── 콜아웃 ────────────────────────────────────────────────── */
/* ⚠️ 인용구 안에 표가 들어가면 이 클래스가 안 먹는다 — 그래서 인포박스는 표만 쓴다 */
.contents blockquote{ border-radius:8px; }
.contents blockquote.is-info{ background:var(--b-green-soft) !important;
  border-left:3px solid var(--b-green) !important; }
.contents blockquote.is-info *{ color:var(--b-ink) !important; }
.contents blockquote.is-warning{ background:var(--b-warn-soft) !important;
  border-left:3px solid var(--b-warn) !important; }
.contents blockquote.is-warning *{ color:var(--b-warn-ink) !important; }

/* ── 각주 ──────────────────────────────────────────────────── */
.contents .footnotes{ border-top:1px solid var(--b-line); padding-top:1em;
  font-size:13px; clear:both; }
.contents .footnotes, .contents .footnotes li{ color:var(--b-muted) !important; }
.contents .footnote-ref a{ text-decoration:none; font-weight:700; }
/* 각주 호버 툴팁 — 내용은 theme.js 가 채운다 */
.byeori-fn-tip{ position:absolute; z-index:9999; max-width:340px;
  background:#1a1a1a; color:#f3f3f0; padding:10px 13px; border-radius:8px;
  font-size:12.5px; line-height:1.6; box-shadow:0 10px 26px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .15s; }
.byeori-fn-tip.show{ opacity:1; }

/* ── 사이드 목차 ───────────────────────────────────────────── */
/* Vuetify 기본 40px은 12.5px 글자에 과하다. 좌우 여백은 건드리지 않는다 — 계층 들여쓰기가 무너진다 */
.page-toc-card .v-list{ padding-top:4px !important; padding-bottom:4px !important; }
.page-toc-card .v-list-item{ min-height:25px !important; }
.page-toc-card .v-list-item__title{ font-size:12.5px !important; line-height:1.5 !important; }