/* ============================================================
   RiveDorée · Grammaire française — 시리즈 공통 디자인 시스템
   색 규칙: 파랑 = 어간(radical) · 빨강 = 어미/변화(terminaison)
            금색 = 브랜드 액센트 · 회색 = 발음/보조 정보
   ============================================================ */

:root {
  --navy:  #16305E;
  --gold:  #B48A3C;
  --gold-light: #E8DCC4;
  --rouge: #B5271D;
  --bleu:  #004D7F;
  --vert:  #14743E;
  --teal:  #0E6E66;
  --violet: #8E2A63;
  --ink:   #1F2430;
  --gray:  #6E7480;
  --paper: #FDFCF8;
  --line:  #E4E0D6;
}

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

body {
  font-family: "Avenir Next", "Apple SD Gothic Neo", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 10.5pt;
  line-height: 1.55;
}

.fr { font-family: "Avenir Next", sans-serif; }
.didot { font-family: "Didot", serif; }

/* ---------- 페이지 골격 ---------- */
.page {
  width: 210mm;
  height: 297mm;
  padding: 13mm 16mm 15mm;
  page-break-after: always;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
}

/* 상단 러닝헤드 */
.runhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 3mm;
  border-bottom: 0.6pt solid var(--gold);
  margin-bottom: 7mm;
}
.runhead .mark { display: flex; align-items: center; gap: 2.2mm; }
.runhead .mark svg { width: 4.6mm; height: 4.6mm; }
.runhead .wordmark {
  font-family: "Didot", serif;
  font-style: italic;
  font-size: 11pt;
  color: var(--navy);
  letter-spacing: 0.02em;
}
.runhead .wordmark b { color: var(--gold); font-weight: normal; }
.runhead .fiche {
  font-size: 8pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
.runhead .fiche b { color: var(--navy); font-weight: 600; }

/* 하단 페이지 번호 */
.folio {
  position: absolute;
  bottom: 8mm; left: 0; right: 0;
  text-align: center;
  font-size: 8pt;
  color: var(--gray);
  letter-spacing: 0.15em;
}
.folio::before { content: "· "; color: var(--gold); }
.folio::after  { content: " ·"; color: var(--gold); }

/* ---------- 섹션 제목 ---------- */
.sec {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  margin: 6mm 0 3.5mm;
}
.sec:first-of-type { margin-top: 0; }
.sec .no {
  font-family: "Didot", serif;
  font-size: 15pt;
  color: var(--gold);
}
.sec h2 {
  font-size: 13pt;
  font-weight: 600;
  color: var(--navy);
}
.sec .kr { font-size: 10.5pt; color: var(--gray); font-weight: 400; }

/* ---------- 문법 의미 색상 ---------- */
.st  { color: var(--bleu); }               /* 어간 */
.en  { color: var(--rouge); }              /* 어미·변화 */
.pr  { color: var(--gray); font-size: 0.85em; }  /* 발음 */
.pr .en { font-size: 1em; }

/* 색상 범례 */
.legend {
  display: flex;
  gap: 6mm;
  align-items: center;
  font-size: 8.5pt;
  color: var(--gray);
  border: 0.6pt solid var(--line);
  border-radius: 1.5mm;
  padding: 2mm 4mm;
  width: fit-content;
  margin: 2mm auto 0;
}
.legend i {
  display: inline-block;
  width: 2.6mm; height: 2.6mm;
  border-radius: 50%;
  margin-right: 1.6mm;
  vertical-align: -0.2mm;
}

/* ---------- 공식(formule) 박스 ---------- */
.formule {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4mm;
  font-size: 14pt;
  font-weight: 500;
  padding: 5mm 0;
}
.formule .plus { color: var(--gold); font-size: 11pt; }
.formule .box {
  border: 0.8pt solid var(--line);
  border-radius: 1.5mm;
  padding: 1.5mm 4.5mm;
  background: #fff;
}

/* ---------- 활용표 카드 ---------- */
.conj-row {
  display: flex;
  gap: 5mm;
  justify-content: center;
  margin-bottom: 5mm;
}
.conj {
  flex: 1;
  max-width: 62mm;
  border: 0.7pt solid var(--line);
  border-radius: 2mm;
  overflow: hidden;
  background: #fff;
}
.conj header {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: 1.8mm 2mm;
  font-size: 11.5pt;
  font-weight: 500;
}
.conj header .en { color: #F4B8AE; }
.conj header .st { color: #A9CBEF; }
.conj header small {
  display: block;
  font-size: 7.5pt;
  font-weight: 400;
  color: #C9D4E8;
  letter-spacing: 0.05em;
}
.conj table { width: 100%; border-collapse: collapse; }
.conj td {
  padding: 1.1mm 2.5mm;
  font-size: 9.5pt;
  border-top: 0.5pt solid var(--line);
}
.conj tr:first-child td { border-top: none; }
.conj td.p { color: var(--gray); width: 27%; text-align: right; padding-right: 3mm; font-size: 8.5pt; white-space: nowrap; }
.conj table.center td.p { width: 14%; }
.conj table.center td.f { text-align: center; }
.conj td.f { font-weight: 500; white-space: nowrap; }
.conj td.s { text-align: right; white-space: nowrap; }

/* ---------- 규칙 노트 ---------- */
.note {
  border-left: 1.2mm solid var(--gold);
  background: #FAF6EC;
  border-radius: 0 1.5mm 1.5mm 0;
  padding: 2.5mm 4mm;
  font-size: 9pt;
  color: #4A4333;
  margin: 2mm 0 5mm;
}
.note b { color: var(--navy); }

/* ---------- 동사 목록 그리드 ---------- */
.verbgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.6mm;
}
.verbgrid .v {
  border: 0.6pt solid var(--line);
  border-radius: 1.5mm;
  background: #fff;
  padding: 2mm 1mm 1.8mm;
  text-align: center;
}
.verbgrid .v .inf { font-size: 11pt; font-weight: 500; }
.verbgrid .v .m   { font-size: 8pt; color: var(--gray); margin-top: 0.6mm; }

/* ---------- 인쇄용 음성 표시 아이콘 ---------- */
.spk {
  display: inline-flex;
  width: 4.4mm; height: 4.4mm;
  border: 0.5pt solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  align-items: center; justify-content: center;
  margin-left: 1.6mm;
  vertical-align: middle;
  background: #fff;
}
.spk svg { width: 2.5mm; height: 2.5mm; }
.audio-badge {
  display: inline-flex; align-items: center; gap: 1.8mm;
  margin-top: 5mm;
  font-size: 8pt; letter-spacing: 0.12em;
  color: var(--gold); text-transform: uppercase;
  border: 0.6pt solid var(--gold);
  border-radius: 5mm;
  padding: 1.2mm 4mm;
}

/* ---------- 다이얼로그 (Fiche 05~ Expressions) ---------- */
.dlg { margin: 2mm 0 4mm; }
.dlg .ln { display: flex; gap: 3mm; padding: 1.6mm 0; align-items: flex-start; }
.dlg .who {
  font-size: 7pt;
  letter-spacing: 0.08em;
  color: #fff;
  border-radius: 3mm;
  padding: 0.8mm 2.6mm;
  margin-top: 0.8mm;
  white-space: nowrap;
  min-width: 12mm;
  text-align: center;
}
.dlg .who.s { background: var(--navy); }
.dlg .who.c { background: var(--gold); }
.dlg .f { font-size: 10.5pt; font-weight: 500; }
.dlg .f b { color: var(--rouge); font-weight: 600; }
.dlg .pr3 { font-size: 8pt; color: var(--gray); }
.dlg .k { font-size: 8.8pt; }

/* ---------- 전치사 (Fiche 09) ---------- */
.pDE   { color: var(--rouge); font-weight: 600; }
.pA    { color: var(--bleu); font-weight: 600; }
.pEN   { color: var(--teal); font-weight: 600; }
.pDANS { color: var(--violet); font-weight: 600; }
.pSUR  { color: var(--vert); font-weight: 600; }
.conj header.teal   { background: var(--teal); }
.conj header.violet { background: var(--violet); }

/* ---------- 접속법 (Fiche 04) ---------- */
.vt { color: var(--vert); }  /* nous·vous 어간 (2어간 동사) */

.xplist.two { column-count: 2; column-gap: 7mm; }
.xp {
  break-inside: avoid;
  padding: 1.9mm 0;
  border-top: 0.5pt solid var(--line);
}
.xp .l1 { display: flex; align-items: baseline; gap: 2mm; flex-wrap: wrap; }
.xp .x { font-size: 10pt; font-weight: 600; }
.xp .x.ind { color: var(--bleu); }
.xp .x.sub { color: var(--rouge); }
.xp .mn { font-size: 7.8pt; color: var(--gray); margin-left: auto; text-align: right; }
.xp .f { font-size: 9.2pt; margin-top: 0.8mm; }
.xp .f b { color: var(--rouge); font-weight: 600; }
.xp .f b.st { color: var(--bleu); }
.xp .pr3 { font-size: 7.2pt; color: var(--gray); }
.xp .k2 { font-size: 8pt; }

.chipm {
  font-size: 6.2pt;
  color: #fff;
  border-radius: 3mm;
  padding: 0.2mm 1.8mm;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.chipm.sub { background: var(--rouge); }
.chipm.ind { background: var(--bleu); }
.chipm.inf { background: var(--gray); }
.chipm.cod { background: var(--rouge); }
.chipm.coi { background: var(--bleu); }
.chipm.se  { background: var(--gold); }

.cathead { display: flex; align-items: center; gap: 2.5mm; margin: 4.5mm 0 0.5mm; }
.cathead .t { font-size: 10.5pt; font-weight: 700; color: var(--navy); }
.cathead .fr2 { font-size: 8.5pt; color: var(--gold); font-style: italic; font-family: "Didot", serif; }
.cathead::after { content: ""; flex: 1; height: 0.4pt; background: var(--gold-light); }

.pairs .c .t { font-size: 10pt; font-weight: 600; margin-bottom: 0.5mm; }
.pairs .c .t.ind { color: var(--bleu); }
.pairs .c .t.sub { color: var(--rouge); }
.pairs .c .mn2 { font-size: 7.6pt; color: var(--gray); }
.pairs .c .f b { color: var(--rouge); font-weight: 600; }
.pairs .c .f b.st { color: var(--bleu); }

/* ---------- 관사 (Fiche 03) ---------- */
.ad { color: var(--rouge); font-weight: 600; }
.ap { color: var(--bleu); font-weight: 600; }
.ai { color: var(--vert); font-weight: 600; }
.conj header.rouge { background: var(--rouge); }
.conj header.bleu  { background: var(--bleu); }
.conj header.vert  { background: var(--vert); }

.qhead { display: flex; align-items: baseline; gap: 3mm; margin: 5mm 0 2.2mm; }
.qhead .q  { font-size: 10.5pt; font-weight: 600; color: var(--navy); }
.qhead .qk { font-size: 8.5pt; color: var(--gray); }
.qhead .vb { margin-left: auto; font-size: 8.3pt; color: var(--gold); white-space: nowrap; }

.pcards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.2mm; }
.pcards .c {
  background: #fff;
  border: 0.6pt solid var(--line);
  border-radius: 1.5mm;
  padding: 2mm 1.5mm 1.8mm;
  text-align: center;
}
.pcards .c .e   { font-size: 13pt; line-height: 1.25; height: 8mm; display: flex; align-items: center; justify-content: center; color: var(--navy); }
.pcards .c .e .ico { width: 7mm; height: 7mm; }
.pcards .c .ph { margin: -2mm -1.5mm 1.5mm; }
.pcards .c .ph img { display: block; width: 100%; height: 24mm; object-fit: cover; border-radius: 1.5mm 1.5mm 0 0; }
.pcards .c .f   { font-size: 9pt; font-weight: 500; margin-top: 0.8mm; line-height: 1.3; }
.pcards .c .pr2 { font-size: 7.3pt; color: var(--gray); margin-top: 0.4mm; }
.pcards .c .k   { font-size: 7.8pt; margin-top: 0.4mm; color: #3A3F4A; }

.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2mm; margin-bottom: 2mm; }
.pairs .c {
  background: #fff;
  border: 0.6pt solid var(--line);
  border-radius: 1.5mm;
  padding: 1.8mm 3mm;
}
.pairs .c .f   { font-size: 9.5pt; font-weight: 500; }
.pairs .c .pr2 { font-size: 7.5pt; color: var(--gray); }
.pairs .c .k   { font-size: 8pt; margin-top: 0.3mm; }
.pairs .head {
  text-align: center;
  color: #fff;
  font-size: 9.5pt;
  font-weight: 500;
  border-radius: 1.5mm;
  padding: 1.4mm 0;
}

/* ---------- 동사 패밀리 블록 (Fiche 02) ---------- */
.verbline { display: flex; flex-wrap: wrap; gap: 2.2mm; margin: 0 0 3mm; }
.verbline .v {
  border: 0.6pt solid var(--line);
  border-radius: 1.5mm;
  background: #fff;
  padding: 1.4mm 3mm;
  text-align: center;
}
.verbline .v .inf { font-size: 10.5pt; font-weight: 500; }
.verbline .v .m { font-size: 7.5pt; color: var(--gray); }

.fam { margin-bottom: 7mm; }
.fam-body { display: flex; gap: 5mm; align-items: flex-start; }
.fam-body .lft { width: 62mm; flex-shrink: 0; }
.fam-body .lft .conj { max-width: none; }
.fam-body .rgt { flex: 1; min-width: 0; }
.fam-body .rgt .ex .f { font-size: 9pt; }
.fam-body .rgt .ex .k { font-size: 8.2pt; }

.pp {
  margin-top: 2mm;
  text-align: center;
  font-size: 8.8pt;
  background: #FAF6EC;
  border: 0.6pt solid var(--gold-light);
  border-radius: 1.5mm;
  padding: 1.4mm 2mm;
}
.pp b { color: var(--rouge); font-weight: 600; }
.pp .lbl { color: var(--gold); font-size: 7pt; letter-spacing: 0.12em; margin-right: 1.5mm; }

.tag {
  display: inline-block;
  font-size: 6.3pt;
  letter-spacing: 0.06em;
  color: var(--gold);
  border: 0.5pt solid var(--gold);
  border-radius: 3mm;
  padding: 0 1.5mm;
  margin-right: 1.5mm;
  vertical-align: 0.4mm;
  white-space: nowrap;
}
.fam .note { margin: 2mm 0; }
.fam .note.sm { font-size: 8.2pt; padding: 2mm 3mm; }

/* ---------- 예문 ---------- */
.tense {
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
  margin: 5mm 0 2.5mm;
}
.tense .chip {
  background: var(--navy);
  color: #fff;
  font-size: 8pt;
  letter-spacing: 0.08em;
  border-radius: 5mm;
  padding: 0.8mm 3.5mm;
}
.tense h3 { font-size: 11pt; color: var(--navy); font-weight: 600; }
.tense .kr { color: var(--gray); font-size: 9.5pt; font-weight: 400; }

.ex { list-style: none; }
.ex li {
  padding: 1mm 0 1mm 3.5mm;
  border-left: 0.6pt solid var(--line);
  margin-bottom: 0.7mm;
  line-height: 1.42;
}
.ex .f { font-size: 9.5pt; }
.ex .f b { color: var(--rouge); font-weight: 600; }
.ex .k { font-size: 8.5pt; color: var(--gray); }

/* ---------- 표지 ---------- */
.cover { justify-content: space-between; align-items: center; text-align: center; }
.cover .frame {
  position: absolute;
  inset: 9mm;
  border: 0.7pt solid var(--gold);
  pointer-events: none;
}
.cover .frame::after {
  content: "";
  position: absolute;
  inset: 1.2mm;
  border: 0.35pt solid var(--gold);
}
.cover .top { margin-top: 18mm; }
.cover .brand-mark svg { width: 13mm; height: 13mm; }
.cover .wordmark {
  font-family: "Didot", serif;
  font-style: italic;
  font-size: 21pt;
  color: var(--navy);
  margin-top: 3mm;
}
.cover .wordmark b { color: var(--gold); font-weight: normal; }
.cover .hangul {
  font-size: 8.5pt;
  letter-spacing: 0.55em;
  color: var(--gray);
  margin-top: 1.5mm;
  text-indent: 0.55em;
}
.cover .mid { }
.cover .fiche-no {
  font-size: 9pt;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6mm;
}
.cover h1 {
  font-family: "Didot", serif;
  font-size: 33pt;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.15;
}
.cover .title-kr {
  font-size: 17pt;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4mm;
}
.cover .subtitle {
  font-size: 10pt;
  color: var(--gray);
  margin-top: 7mm;
  line-height: 1.7;
}
.cover .rule {
  width: 22mm; height: 0.5pt;
  background: var(--gold);
  margin: 7mm auto 0;
}
.cover .bottom {
  margin-bottom: 16mm;
  font-size: 8pt;
  letter-spacing: 0.2em;
  color: var(--gray);
  text-transform: uppercase;
}

@page { size: A4; margin: 0; }