:root{
  --bg:#f1ece1; --panel:#fffdf8; --panel2:#faf6ec;
  --ink:#231f18; --muted:#8a8170; --faint:#b6ac98;
  --line:#e0d8c6; --line2:#d3c9b3;
  --accent:#8a2b2b; --accent2:#a85a3a; --mark:#ffe39c;
  --shadow:0 1px 3px rgba(60,50,30,.07), 0 6px 22px rgba(60,50,30,.05);
  --serif:"OldHangul","HanExt","Noto Serif KR","Nanum Myeongjo","Apple SD Gothic Neo",serif;
}
/* 옛한글(첫가끝 자모) 전용 대체.
   가사·언사면에 아래아(ㆍ)·ㅂ계 합용병서가 섞여 있는데, 본문 폰트는 자모를 조합은
   하지만 아래아를 짧은 가로획으로 그려 「ᄒᆞᆯ」이 「흘」로 읽힌다. 자모 영역만
   점으로 제대로 그리는 폰트에 맡긴다. 해당 폰트가 없는 기기는 조용히 본문 폰트로
   돌아가므로(= 지금과 동일) 손해가 없다. */
@font-face{
  font-family:"OldHangul";
  src:local("Malgun Gothic"),local("맑은 고딕"),local("함초롬돋움"),local("HCR Dotum"),
      local("함초롬바탕"),local("HCR Batang");
  unicode-range:U+1100-11FF,U+A960-A97F,U+D7B0-D7FF;
}
/* 확장 한자(CJK 확장A·확장B) 전용 대체.
   항렬자 禾 변의 「𥣈(U+258C8)·𥠅(U+25805)」(확장B), 「䆄(U+4184)·㵰」 같은 확장A 글자가
   인명에 실제로 쓰인다(세 자료 합계 90자). 본문 폰트 Noto Serif KR 은 기본다국어면(BMP)의
   상용 한자까지만 담고 있어 이 글자들이 두부(□)로 보인다. 확장 영역만 그 영역을 담은
   시스템 폰트에 맡긴다. 해당 폰트가 없는 기기는 조용히 본문 폰트로 돌아가므로 손해가 없다. */
@font-face{
  font-family:"HanExt";
  src:local("SimSun"),local("宋体"),local("NSimSun"),local("MS Mincho"),local("MS 明朝"),
      local("Noto Serif CJK SC"),local("Noto Serif SC"),local("Source Han Serif SC"),
      local("Hanazono Mincho A"),local("HanaMinA");
  unicode-range:U+3400-4DBF;
}
@font-face{
  font-family:"HanExt";
  src:local("SimSun-ExtB"),local("MingLiU-ExtB"),local("MingLiU_HKSCS-ExtB"),
      local("Microsoft JhengHei"),local("Hanazono Mincho B"),local("HanaMinB"),
      local("Noto Serif CJK SC"),local("Source Han Serif SC");
  unicode-range:U+20000-2A6DF;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);line-height:1.65;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block}

/* ---------- header ---------- */
.topbar{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:.7rem 1.4rem;background:rgba(255,253,248,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:.55rem;font-size:1.2rem;font-weight:700;color:var(--ink)}
.brand:hover{text-decoration:none}
.seal{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:5px;
  background:var(--accent);color:#fff;font-size:.95rem;font-weight:700}
.brand small{font-size:.68rem;color:var(--muted);font-weight:400;letter-spacing:.02em}
.search{display:flex;gap:.4rem;flex:1;min-width:220px;max-width:460px}
.search input{flex:1;padding:.52rem .8rem;border:1px solid var(--line2);border-radius:8px;
  background:#fff;font-family:inherit;font-size:.95rem;color:var(--ink)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(138,43,43,.1)}
.search button{padding:.52rem 1rem;border:none;border-radius:8px;background:var(--accent);
  color:#fff;cursor:pointer;font-family:inherit;font-size:.92rem}
.search button:hover{background:#74201f}

/* ---------- layout ---------- */
#app{max-width:1180px;margin:0 auto;padding:1.5rem 1.4rem 3rem}
.crumbs{color:var(--muted);font-size:.85rem;margin-bottom:.9rem}
.crumbs a{color:var(--muted)}
h1.title{font-size:1.55rem;margin:.1rem 0 1rem;font-weight:700;letter-spacing:-.01em}
.lead{color:var(--muted);font-size:.9rem;margin:-.4rem 0 1.4rem}
.foot{max-width:1180px;margin:1rem auto 2.5rem;padding:1.1rem 1.4rem;color:var(--muted);
  font-size:.8rem;border-top:1px solid var(--line)}
code{background:#ece4d3;padding:.1em .4em;border-radius:4px;font-size:.9em}

/* ---------- badges ---------- */
.badge{display:inline-block;font-size:.7rem;padding:.14em .6em;border-radius:999px;
  border:1px solid var(--line2);background:#fff;color:var(--muted);margin-left:.35rem;
  vertical-align:.12em;letter-spacing:.02em}
.badge.t{background:#eef2ee;color:#39604c;border-color:#cfe0d4}
.badge.s-검수완료{background:#e8f2e9;color:#2f6d34;border-color:#c9e3cc}
.badge.s-판독중{background:#fbf0df;color:#8a5a16;border-color:#ecdab6}
.badge.s-판독완료{background:#eaf0f6;color:#2f5586;border-color:#cdddee}

/* ---------- cards (home/doc) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.1rem}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:.9rem;color:var(--ink);box-shadow:var(--shadow);transition:transform .12s,border-color .12s}
.card:hover{border-color:var(--accent2);transform:translateY(-2px);text-decoration:none}
.card h3{margin:.15rem 0 .35rem;font-size:1rem;line-height:1.4}
.card .meta{color:var(--muted);font-size:.8rem}
.thumb{aspect-ratio:3/4;width:100%;object-fit:cover;object-position:top;border:1px solid var(--line2);
  border-radius:8px;background:#fff;margin-bottom:.55rem}

/* ---------- viewer ---------- */
.viewer-wrap{display:grid;grid-template-columns:248px 1fr;gap:1.3rem;align-items:start}
.sidebar{position:sticky;top:74px;max-height:calc(100vh - 96px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.5rem;box-shadow:var(--shadow)}
.sidebar h4{margin:.4rem .55rem .5rem;font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.03em}
.pglist{list-style:none;margin:0;padding:0}
.pglist a{display:flex;justify-content:space-between;gap:.5rem;padding:.4rem .55rem;border-radius:7px;
  color:var(--ink);font-size:.86rem;line-height:1.35}
.pglist a:hover{background:var(--panel2);text-decoration:none}
.pglist a.on{background:var(--accent);color:#fff}
.pglist a.on .pn{color:#f3d8d8}
.pglist .pn{color:var(--faint);font-size:.76rem;flex:none}

.viewer{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;box-shadow:var(--shadow)}
.pane h4{margin:.1rem 0 .75rem;color:var(--muted);font-weight:600;font-size:.8rem;letter-spacing:.03em;
  display:flex;justify-content:space-between;align-items:center}
.scan{width:100%;border:1px solid var(--line2);border-radius:8px;background:#fff}

/* vertical text */
.vtext{writing-mode:vertical-rl;text-orientation:upright;
  height:64vh;min-height:420px;overflow:auto;padding:1.1rem 1rem;
  border:1px solid var(--line2);border-radius:8px;background:var(--panel2);
  font-size:1.28rem;letter-spacing:.05em;line-height:2.05;color:#24211b}
.vcol{margin-left:.6rem;text-indent:0}
.vcol:first-child{font-weight:600}
.unc{color:var(--accent);}

/* 가로쓰기 모드 */
.vtext.horizontal{writing-mode:horizontal-tb;text-orientation:mixed;
  height:auto;max-height:64vh;font-size:1.06rem;line-height:1.95;letter-spacing:normal}
.vtext.horizontal .vcol{margin:0 0 .5em 0}

/* 세로/가로 토글 */
.modetog{display:inline-flex;border:1px solid var(--line2);border-radius:7px;overflow:hidden}
.mode-btn{border:none;background:var(--panel);color:var(--muted);font-family:inherit;
  font-size:.76rem;padding:.22rem .62rem;cursor:pointer;line-height:1.2}
.mode-btn.on{background:var(--accent);color:#fff}
.mode-btn+.mode-btn{border-left:1px solid var(--line2)}
mark{background:var(--mark);padding:0 .06em;border-radius:2px}

/* viewer header + nav */
.vhead{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;justify-content:space-between;margin-bottom:.2rem}
.counter{color:var(--muted);font-size:.85rem}
.navbtns{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.1rem}
.navbtns a,.navbtns span{flex:1}
.btn{display:inline-block;text-align:center;padding:.55rem .9rem;border:1px solid var(--line2);
  border-radius:9px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.btn:hover{border-color:var(--accent2);text-decoration:none}
.btn.disabled{opacity:.4;pointer-events:none}
.note{color:var(--muted);font-size:.8rem;margin-top:.65rem}
.suggest{margin-top:.85rem;font-size:.82rem;color:var(--accent);cursor:pointer;background:none;
  border:1px solid var(--line2);border-radius:8px;padding:.35rem .7rem;font-family:inherit}
.suggest:hover{background:var(--panel2)}

/* ---------- search results ---------- */
.result{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:.85rem 1.05rem;margin-bottom:.7rem;color:var(--ink);box-shadow:var(--shadow)}
.result:hover{border-color:var(--accent2);text-decoration:none}
.result .where{color:var(--muted);font-size:.8rem;margin-bottom:.3rem}
.empty{color:var(--muted);padding:2rem 0}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .viewer-wrap{grid-template-columns:1fr}
  .sidebar{position:static;max-height:260px;order:2}
  .viewer{order:1}
}
@media(max-width:680px){
  .viewer{grid-template-columns:1fr}
  .vtext{height:auto;max-height:70vh}
  /* 휴대폰: 머리 검색창이 화면 밖으로 밀리지 않게 줄을 바꾼다 */
  .topbar{flex-wrap:wrap;gap:.5rem;padding:.6rem .9rem}
  .search{min-width:0;max-width:none;flex-basis:100%}
}

/* 한글 번역 뷰 */
.kobox{max-height:60vh;overflow:auto;padding:2px 2px 8px}
.kohint{margin:0 0 10px;color:#8a6d3b;background:#fbf6e9;border:1px solid #ece0c4;border-radius:6px;padding:6px 10px;font-size:.86rem}
.kopar{margin:0 0 .85em;line-height:1.85;font-size:1.02rem;color:#2a2622;text-align:justify}
.kopar mark{background:#ffe58a}

/* 권별 데이터 지연 로딩 중 표시 */
.loading{color:var(--muted);padding:2.5rem 0;font-size:.95rem}
.loading::after{content:"";display:inline-block;width:.9em;height:.9em;margin-left:.6em;
  vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .8s linear infinite;opacity:.55}
@keyframes spin{to{transform:rotate(360deg)}}

/* 판독 노트 — section 전문(면에 따라 수천 자)을 제목과 분리해 보여 준다.
   ★…★ 는 형광펜, **…** 는 굵게로 살린다. */
.secnote{margin:.6rem 0 1rem;padding:.75rem .9rem;background:var(--panel2);
  border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:8px;
  font-size:.9rem;line-height:1.8;color:#3b342a}
.secnote>summary{cursor:pointer;list-style:none;font-size:.78rem;letter-spacing:.06em;
  color:var(--muted);font-weight:700;user-select:none}
.secnote>summary::-webkit-details-marker{display:none}
.secnote>summary::before{content:"▸ ";color:var(--accent2)}
.secnote[open]>summary::before{content:"▾ "}
.secnote[open]>summary{margin-bottom:.3rem}
.secnote p{margin:.4em 0}
.secnote strong{font-weight:700;color:var(--ink)}
.secnote .em{font-style:normal;color:var(--accent);font-weight:600}
.secnote .hl{font-style:normal;background:linear-gradient(transparent 60%,var(--mark) 60%);padding:0 .06em}

/* 면 제목 표준(2026-09-27): 한자 제목은 작게, 같은 글이 이어지는 면은 흐리게 */
.hanja{font-size:.62em;color:var(--muted);font-weight:500;margin-left:.35em;letter-spacing:.02em}
.card .sub{color:var(--muted);font-size:.8rem;margin:-.2rem 0 .3rem}
.pglist a.cont span:first-child{color:var(--faint);font-size:.82em}
.pglist a.cont.on span:first-child{color:#f3d8d8}
.kopar.empty{color:var(--muted)}