/*
 * 이면록 — 사이트 스타일
 * 색: 명세 4-1 A안 "생지 한지와 먹" / 글꼴: 명세 4-2 / 기록 표현: 명세 4-4
 * 다크 모드 없음(확정). 애니메이션 없음.
 */

/* ---------- 색·글꼴·재질 ---------- */
:root {
  color-scheme: light;

  --c-bg: #EAE1CC;          /* 바탕 */
  --c-paper: #F4EEDF;       /* 종이 */
  --c-ink: #1E1B17;         /* 먹 */
  --c-ink-faded: #5E5547;   /* 바랜 먹 */
  --c-cinnabar: #9A2A1C;    /* 주사 */
  --c-ocher: #7A5C17;       /* 황토 */
  --c-line: #CDBF9F;        /* 테두리 */
  --c-file1: #B79B72;       /* 제1철 크라프트지 */
  --c-file2: #9AA39A;       /* 제2철 관리국 서류철 */
  --c-file3: #E9DDC6;       /* 제3철 계약서 */
  --c-seal: #8E2216;        /* 봉인 띠 */
  --c-seal-text: #FFFFFF;

  /* 대체 순서: 명세 4-2 (다른 웹폰트 없음) */
  --f-title: "JeongseonArirang", "GyeonggiBatang", serif;
  --f-body: "GyeonggiBatang", serif;
  --f-pen: "NanumPen", "GyeonggiBatang", serif;

  /* 한지 재질(명세 4-3). multiply로 얹어서 바탕·종이 색을 그대로 살린다. */
  --tex-paper: url("/img/paper-0017.jpg");
  --tex-kraft: url("/img/paper-0008.jpg");
  --tex-size: 512px 512px;

  --gutter: 16px;
  --note-w: 13rem;
}

/* ---------- 기본 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0;
  background-color: var(--c-bg);
  background-image: var(--tex-paper);
  background-repeat: repeat;
  background-size: var(--tex-size);
  background-blend-mode: multiply;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  font-weight: 400;
  font-synthesis: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-title);
  font-weight: normal;
  font-synthesis: none;
  line-height: 1.3;
  color: var(--c-ink);
}

p {
  margin: 0 0 0.9rem;
}

a {
  color: var(--c-cinnabar);
  text-underline-offset: 0.2em;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--c-cinnabar);
  outline-offset: 3px;
}

main[tabindex="-1"]:focus {
  outline: none;
}

/* 키보드 사용자용 건너뛰기 링크: 포커스될 때만 보임 */
.skip {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--c-ink);
  color: var(--c-paper);
  text-decoration: none;
}

.skip:focus {
  top: 0.5rem;
}

.skip:focus-visible {
  outline-color: var(--c-cinnabar);
}

.wrap {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 상단: 이름·탭 ---------- */
.site-head {
  padding-block: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--c-line);
}

.brand {
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

.brand a {
  color: var(--c-ink);
  text-decoration: none;
}

.tabs ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs a {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.25rem 0.4rem;
  color: var(--c-ink-faded);
  font-family: var(--f-title);
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.tabs a:hover {
  color: var(--c-ink);
}

/* 지금 보고 있는 탭: 먹색·한 단계 큰 글씨 + 글씨 뒤의 주사색 붓선(아래 @supports).
   붓선을 못 그리는 브라우저에서는 주사색 밑줄로 보인다. */
.tabs a[aria-current] {
  color: var(--c-ink);
  font-size: 1.25rem;
  text-decoration: underline 2px var(--c-cinnabar);
  text-underline-offset: 0.3em;
}

@media (min-width: 40rem) {
  .tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }

  .tabs a {
    padding: 0.25rem 1.1rem;
    font-size: 1.2rem;
  }

  .tabs a[aria-current] {
    font-size: 1.35rem;
  }
}

/* 붓선(img/ink/line-2.png): 불투명도 0.5 — 겹친 먹 글씨 대비 4.95 이상 */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .tabs a[aria-current],
  .subtabs a[aria-current="page"] {
    text-decoration: none;
  }

  .tabs a[aria-current]::after,
  .subtabs a[aria-current="page"]::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 4%;
    right: 4%;
    height: 22px;
    background-color: var(--c-cinnabar);
    opacity: 0.5;
    pointer-events: none;
    transform: translateY(-45%);
    -webkit-mask-image: url("/img/ink/line-2.png");
    mask-image: url("/img/ink/line-2.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .subtabs ul a[aria-current="page"] {
    border-bottom-color: transparent;
  }

  .subtabs a[aria-current="page"]::after {
    left: 0;
    right: 0;
    height: 18px;
  }
}

/* 고대비 모드: 붓선 대신 밑줄 */
@media (forced-colors: active) {
  .tabs a[aria-current]::after,
  .subtabs a[aria-current="page"]::after {
    display: none;
  }

  .tabs a[aria-current],
  .subtabs a[aria-current="page"] {
    text-decoration: underline 2px;
  }
}

/* ---------- 기록 종이(카드) ---------- */
.sheet {
  position: relative;
  margin-block: 1.5rem;
  padding: 1.5rem 1.125rem;
  border: 1px solid var(--c-line);
  background-color: var(--c-paper);
  background-image: var(--tex-paper);
  background-repeat: repeat;
  background-size: var(--tex-size);
  background-blend-mode: multiply;
  box-shadow: 0 1px 0 rgba(30, 27, 23, 0.06), 0 8px 20px -14px rgba(30, 27, 23, 0.45);
}

@media (min-width: 40rem) {
  .sheet {
    padding: 2.25rem 2.5rem;
  }
}

.sheet p {
  max-width: 42rem;
}

.chunk + .chunk {
  margin-top: 1.5rem;
}

.section-title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  line-height: 1.25;
}

.page-title {
  margin-top: 1.75rem;
  margin-bottom: 0;
}

/* ---------- 표지 ---------- */
.cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(72vh, 34rem);
  padding-block: 4rem 3rem;
  text-align: center;
}

.cover-title {
  margin: 0;
  font-size: clamp(4.5rem, 22vw, 8rem);
  line-height: 1.1;
}

.cover-sub {
  margin: 0.5rem 0 1.5rem;
  padding-left: 0.4em;
  color: var(--c-ink-faded);
  font-size: 1.15rem;
  letter-spacing: 0.4em;
}

.cover-note {
  margin: 0;
  color: var(--c-ink-faded);
  font-size: 1rem;
}

/* 표지 도장 '錄' — 경기천년바탕(정선아리랑체에 한자 없음), 장식이므로 낭독기에서 숨김 */
.stamp {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  margin: 0;
  padding: 0.05em 0.2em;
  border: 2px solid var(--c-cinnabar);
  border-radius: 3px;
  color: var(--c-cinnabar);
  font-family: var(--f-body);
  font-size: 1.75rem;
  line-height: 1.2;
  transform: rotate(7deg);
}

/* ---------- 도감·세력록 항목 ---------- */
.entry-title {
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-line);
  font-size: 1.9rem;
}

.kinds {
  display: grid;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 40rem) {
  .kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kind {
  padding-top: 0.9rem;
  border-top: 1px solid var(--c-line);
}

.kind-title {
  margin: 0 0 0.5rem;
  font-size: 1.45rem;
}

.kind--redacted {
  grid-column: 1 / -1;
  border-top: 2px solid var(--c-ink);
}

/* 이름-내용 짝 */
.fields {
  margin: 0 0 0.9rem;
}

.fields > div {
  margin: 0 0 0.55rem;
}

.fields dt {
  color: var(--c-ink-faded);
}

.fields dd {
  margin: 0;
}

.fields--info {
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed var(--c-line);
}

.fields--info > div {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  margin-bottom: 0.2rem;
}

/* 경계 등급 표시: 하=바랜 먹 테두리, 중=황토 테두리, 상=주사 바탕에 종이색 글씨 */
.grade {
  display: inline-block;
  min-width: 2.2em;
  padding: 0 0.5em;
  border: 1.5px solid currentColor;
  font-family: var(--f-body);
  line-height: 1.6;
  text-align: center;
}

.grade--low {
  color: var(--c-ink-faded);
}

.grade--mid {
  color: var(--c-ocher);
}

.grade--high {
  border-color: var(--c-cinnabar);
  background-color: var(--c-cinnabar);
  color: var(--c-paper);
}

/* ---------- 지운 기록 ---------- */
/* 먹 덧칠: ■ 개수는 원고 그대로 두고 먹 덩어리로 보이게 한다 */
.ink {
  padding: 0 0.08em;
  border-radius: 3px 6px 4px 7px / 6px 3px 7px 4px;
  background-color: var(--c-ink);
  color: var(--c-ink);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 0 1px 1px rgba(30, 27, 23, 0.85), 0 0 4px 2px rgba(30, 27, 23, 0.3);
}

/* 붓 자국 모양으로 오려 낸 먹 (img/ink/ink-1~3.png, Pixabay 이미지에서 잘라 냄).
   mask를 지원하지 않는 브라우저는 위의 먹 덩어리로 보인다. */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .ink {
    display: inline-block;
    margin: 0 -0.1em;
    padding: 0.05em 0.3em;
    border-radius: 0;
    background-color: var(--c-ink);
    color: transparent;
    line-height: 1.45;
    box-shadow: none;
    transform: rotate(-1.5deg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .ink--1 {
    -webkit-mask-image: url("/img/ink/ink-1.png");
    mask-image: url("/img/ink/ink-1.png");
  }

  .ink--2 {
    -webkit-mask-image: url("/img/ink/ink-2.png");
    mask-image: url("/img/ink/ink-2.png");
    transform: rotate(1deg);
  }

  .ink--3 {
    -webkit-mask-image: url("/img/ink/ink-3.png");
    mask-image: url("/img/ink/ink-3.png");
    transform: rotate(-0.5deg);
  }
}

/* 고대비 모드: 그림 대신 ■ 글자를 그대로 보인다 */
@media (forced-colors: active) {
  .ink {
    background: none;
    color: CanvasText;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* 줄긋기: 주사색 취소선, 글자는 읽힘 */
s {
  text-decoration-line: line-through;
  text-decoration-color: var(--c-cinnabar);
  text-decoration-thickness: 2px;
}

/* ---------- 펜 메모 ---------- */
/* 휴대폰: 해당 줄 바로 아래 / 데스크톱: 해당 줄 옆 여백 */
.noted {
  position: relative;
}

.noted > p:first-child {
  margin-bottom: 0.2rem;
}

.pen {
  display: block;
  margin: 0 0 1rem 0.75rem;
  color: var(--c-cinnabar);
  font-family: var(--f-pen);
  font-size: 1.5rem;
  line-height: 1.3;
  transform: rotate(-2deg);
  transform-origin: left center;
}

.pen--end {
  margin-top: 1.25rem;
  text-align: right;
  transform-origin: right center;
}

@media (min-width: 60rem) {
  .wrap {
    max-width: 62rem;
  }

  .entry,
  .file-body {
    padding-right: calc(var(--note-w) + 4.5rem);
  }

  .noted > p:first-child {
    margin-bottom: 0.9rem;
  }

  .noted > .pen {
    position: absolute;
    top: 0.15rem;
    left: calc(100% + 2rem);
    width: var(--note-w);
    margin: 0;
  }
}

/* ---------- 경계 등급표(부적) ---------- */
.talisman {
  border: 2px solid var(--c-cinnabar);
  outline: 1px solid var(--c-cinnabar);
  outline-offset: -9px;
}

.table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
}

.grade-table {
  width: 100%;
  border-collapse: collapse;
}

.grade-table th,
.grade-table td {
  padding: 0.6rem 0.35rem;
  border: 1px solid var(--c-line);
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
}

.grade-table thead th {
  background-color: rgba(205, 191, 159, 0.35);
  font-family: var(--f-title);
  font-size: 1.1rem;
  line-height: 1.3;
}

/* ---------- 연표 ---------- */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--c-line);
}

.timeline > li {
  position: relative;
  padding: 0 0 1.25rem 1.25rem;
}

.timeline > li::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--c-cinnabar);
}

.era-title {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
}

/* ---------- 문서철 ---------- */
/* 철 색 위의 글자는 먹색만(명세 4-1). 펜 메모·본문은 종이색 위에 둔다. */
.file {
  margin-block: 1.75rem;
}

.file-cover {
  position: relative;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(30, 27, 23, 0.3);
  border-radius: 0 8px 0 0;
  color: var(--c-ink);
}

.file-title {
  margin: 0;
  font-size: 1.6rem;
  color: var(--c-ink);
}

.file--1 .file-cover {
  background-color: var(--c-file1);
  background-image: var(--tex-kraft);
  background-repeat: repeat;
  background-size: var(--tex-size);
}

.file--1 .file-body {
  margin-top: 0;
  border-top: 0;
}

.file--2 .file-cover {
  background-color: var(--c-file2);
}

.file--3 .file-cover {
  background-color: var(--c-file3);
}

.record {
  margin-top: 1.25rem;
}

.record-title {
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
}

/* 문서철 하위 탭 (제1~3철) */
.subtabs {
  margin-top: 0.75rem;
  border-bottom: 1px solid var(--c-line);
}

.subtabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subtabs a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 2px solid transparent;
  color: var(--c-ink-faded);
  font-family: var(--f-title);
  font-size: 1.1rem;
  line-height: 1.2;
  text-decoration: none;
}

.subtabs a:hover {
  color: var(--c-ink);
}

.subtabs a[aria-current="page"] {
  border-bottom-color: var(--c-cinnabar);
  color: var(--c-ink);
}

/* 문서철 목록: 철 표지 = 해당 철로 가는 링크 */
.file-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.file-link {
  display: block;
  color: var(--c-ink);
  text-decoration: none;
}

.file-link:hover .file-cover {
  box-shadow: 0 6px 16px -10px rgba(30, 27, 23, 0.6);
}

.file-link:hover .file-title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.seal--static {
  cursor: inherit;
}

/* 봉인된 철 */
.file--sealed .file-cover {
  min-height: 9rem;
  padding-bottom: 1.25rem;
  overflow: hidden;
}

.seal {
  display: block;
  width: calc(100% + 4rem);
  min-height: 44px;
  margin: 1rem -2rem 0.75rem;
  padding: 0.5rem 0 0.5rem 0.6em;
  border: 0;
  background-color: var(--c-seal);
  color: var(--c-seal-text);
  font-family: var(--f-title);
  font-size: 1.35rem;
  letter-spacing: 0.6em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transform: rotate(-2deg);
}

/* 띠가 철 밖으로 잘리므로 포커스 표시는 띠 안쪽에 그린다 */
.seal:focus-visible {
  outline: 3px solid var(--c-seal-text);
  outline-offset: -7px;
}

.teaser {
  margin: 0.5rem 0 0;
  color: var(--c-ink);
}

/* ---------- 홈 맨 아래: 사용한 글꼴 (작은 글씨, 오른쪽) ---------- */
.credits {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  color: var(--c-ink-faded);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: right;
}

.credits p {
  margin: 0;
}

.credits-label {
  margin-bottom: 0.15rem;
}

/* ---------- 404 ---------- */
.notfound {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.notfound-sheet {
  text-align: center;
}

.notfound-sheet p {
  max-width: none;
}

.return-link {
  font-size: 1.15rem;
}