/* base.css — 원어분석 공통 토큰과 셸
 *
 * 색 하나 바꾸려고 60개 파일을 고치는 일이 없도록 여기 한 곳에 둔다.
 * 절 페이지의 인라인 CSS 에서 뽑아온 값이라 지금 화면과 완전히 같다.
 */

:root {
  /* 바탕과 글자 */
  --bg: #F4EEE0;
  --card: #FFFDF8;
  --ink: #1A1614;
  --ink2: #4E453D;
  --ink3: #8C8175;
  --rule: #DED4C0;
  --gold: #B8860F;
  --terra: #CE6641;

  /* 역할 색 — 장식이 아니라 기능이다 */
  --s: #2B6CA3;   /* 누가   주격  */
  --v: #1D8151;   /* 한다   동사  */
  --o: #BE6A12;   /* 무엇을 목적격 */
  --g: #7A5DB8;   /* ~의    속격  */
  --d: #4E8B7A;   /* 자리   여격  */
  --c: #9B9186;   /* 잇는말 관사·전치사 */

  /* 상 배지 */
  --asp-perf: #1D8151;
  --asp-impf: #C0770F;
  --asp-stat: #5B4BB0;
  --asp-none: #8C8175;

  /* 서체 */
  --kr: 'Pretendard', system-ui, -apple-system, sans-serif;
  --gr: 'Gentium Book Plus', Georgia, serif;
  --mo: 'IBM Plex Mono', ui-monospace, monospace;

  /* 폭 */
  --w-read: 680px;    /* 참조 페이지 — 읽기용 */
  --w-verse: 860px;   /* 절 페이지 — 구조 그래픽이 들어감 */
  --nav-h: 46px;
}

/* ─────────────────────────────────────────
   공통 내비게이션
   ───────────────────────────────────────── */
.gnav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 238, 224, .93);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.gnav-in {
  max-width: 1100px; margin: 0 auto; height: var(--nav-h);
  display: flex; align-items: center; gap: 4px; padding: 0 16px;
}
.gnav-home {
  display: flex; align-items: baseline; gap: 3px;
  text-decoration: none; margin-right: 14px; white-space: nowrap;
}
.gnav-mark { font: 600 14px/1 var(--kr); color: var(--ink); letter-spacing: -.01em; }
.gnav-name { font: 400 14px/1 var(--kr); color: var(--ink3); }

.gnav-groups { display: flex; gap: 2px; }
.gnav-g { position: relative; }
.gnav-b {
  border: 0; background: transparent; cursor: pointer;
  font: 400 13.5px/1 var(--kr); color: var(--ink2);
  padding: 8px 11px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 5px;
}
.gnav-b i {
  width: 0; height: 0; border: 3.5px solid transparent;
  border-top-color: currentColor; margin-top: 2px; opacity: .5;
}
.gnav-b:hover { background: rgba(0, 0, 0, .045); }
.gnav-g.on > .gnav-b { color: var(--ink); font-weight: 600; }
.gnav-g.on > .gnav-b::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px;
  height: 2px; background: var(--gold); border-radius: 2px;
}

.gnav-menu {
  display: none; position: absolute; top: calc(100% + 5px); left: 0;
  min-width: 236px; background: var(--card); border: 1px solid var(--rule);
  border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(26, 22, 20, .13);
}
.gnav-g.open .gnav-menu { display: block; }
.gnav-i {
  display: block; text-decoration: none; padding: 8px 10px; border-radius: 8px;
}
.gnav-i b { display: block; font: 500 13.5px/1.4 var(--kr); color: var(--ink); }
.gnav-i span { display: block; font: 400 11.5px/1.5 var(--kr); color: var(--ink3); margin-top: 1px; }
.gnav-i:hover { background: rgba(184, 134, 15, .09); }
.gnav-i.cur { background: rgba(184, 134, 15, .14); }
.gnav-i.cur b { color: var(--gold); }
.gnav-i.soon { cursor: default; opacity: .5; }
.gnav-i.soon:hover { background: transparent; }
.gnav-i.soon em { font-style: normal; font-size: 10px; color: var(--ink3);
  border: 1px solid var(--rule); border-radius: 99px; padding: 1px 6px; vertical-align: 1px; }

.gnav-out {
  margin-left: auto; text-decoration: none;
  font: 400 12.5px/1 var(--kr); color: var(--ink3); padding: 8px 4px;
}
.gnav-out:hover { color: var(--ink); }
.gnav-burger { display: none; }

@media (max-width: 780px) {
  .gnav-groups {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card); border-bottom: 1px solid var(--rule);
    flex-direction: column; gap: 0; padding: 6px;
    max-height: 74vh; overflow: auto;
  }
  .gnav.open .gnav-groups { display: flex; }
  .gnav-g { border-bottom: 1px solid rgba(222, 212, 192, .6); }
  .gnav-g:last-child { border-bottom: 0; }
  .gnav-b { width: 100%; justify-content: space-between; padding: 11px 12px; font-size: 15px; }
  .gnav-menu {
    position: static; display: block; border: 0; box-shadow: none;
    background: transparent; padding: 0 0 6px 12px; min-width: 0;
  }
  .gnav-out { margin-left: auto; margin-right: 6px; }
  .gnav-burger {
    display: flex; flex-direction: column; gap: 3.5px; justify-content: center;
    width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
  }
  .gnav-burger span { display: block; height: 1.5px; background: var(--ink2); border-radius: 2px; }
  .gnav.open .gnav-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .gnav.open .gnav-burger span:nth-child(2) { opacity: 0; }
  .gnav.open .gnav-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .gnav-burger span { transition: .18s; }
}

/* ─────────────────────────────────────────
   참조 페이지 공통 뼈대
   ───────────────────────────────────────── */
.doc { max-width: var(--w-read); margin: 0 auto; padding: 28px 18px 70px; }
.doc h1 { font: 600 26px/1.35 var(--kr); color: var(--ink); margin: 0 0 6px; letter-spacing: -.02em; }
.doc .sub { font: 400 14px/1.7 var(--kr); color: var(--ink3); margin: 0 0 26px; }
.doc h2 {
  font: 600 17px/1.4 var(--kr); color: var(--ink); margin: 34px 0 10px;
  padding-top: 16px; border-top: 1px solid var(--rule);
}
.doc p { font: 400 15px/1.85 var(--kr); color: var(--ink2); margin: 0 0 12px; }
.doc .gr { font-family: var(--gr); font-size: 1.06em; color: var(--ink); }
.doc .kbd { font-family: var(--mo); font-size: .88em; background: rgba(0,0,0,.05);
  padding: 1px 5px; border-radius: 4px; }
.docfoot {
  margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--rule);
  font: 400 12px/1.8 var(--kr); color: var(--ink3);
}
.related { display: grid; gap: 8px; margin: 22px 0 0; }
.related a {
  display: block; text-decoration: none; border: 1px solid var(--rule);
  border-radius: 10px; padding: 11px 13px; background: var(--card);
}
.related a b { display: block; font: 500 14px/1.4 var(--kr); color: var(--ink); }
.related a span { font: 400 12px/1.6 var(--kr); color: var(--ink3); }
.related a:hover { border-color: var(--gold); }