/* 김해담 조선 명과학 — 모바일 한 화면 시안 (어두운 고서) */
@font-face{font-family:HDSerif;src:url('assets/serif-r.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:HDSerif;src:url('assets/serif-b.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:HDSerif;src:url('assets/serif-k.woff2') format('woff2');font-weight:900;font-display:swap}
/* 레이아웃: 폭 440px의 휴대폰 한 장. 넓은 화면에서는 가운데 한 장만 보인다. */
/* 결과 화면: 김해담 명과첩 본문판 (입력 이후) */
#reader{--gold:#a88645;--gold-l:#2a2117;--cream:#1c1610;--dim:#4a3b28;--paper:#d6c49c;--paper-2:#cbb68a;--ink:#1c1610;--ink-2:#4a3b28;--seal:#8a2c1f;--seal-l:#a8402c;
 --rserif:HDSerif,'Noto Serif KR','Noto Serif CJK KR',Batang,'바탕',serif;--rsans:Reading,Readable,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:16px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
#reader .reader-person{background:transparent}
#reader button{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
#reader .quote .seal{writing-mode:horizontal-tb;display:inline-grid;place-content:center;font:900 17px/1.15 var(--rserif);color:var(--seal);border:3px double var(--seal);padding:5px 6px;transform:rotate(-4deg);text-align:center;letter-spacing:0}
#reader .btn-seal{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;background:var(--seal);color:#1c1610;font:700 16px var(--rsans);border:1px solid #b8523c;box-shadow:inset 0 0 0 3px #7a2418,inset 0 0 0 4px #c46a4c55}
#reader .btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 16px;border:1px solid var(--gold);font:600 15px var(--rsans);background:#efe5cc22}
#reader button:disabled{opacity:.35;cursor:default}
#reader .reader-person{padding:4px 16px 10px;font:400 13px var(--rserif);color:var(--dim);background:#efe5cc;text-align:center}
#reader .toc-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#efe5ccf2;backdrop-filter:blur(8px);border-top:1px solid #1c161033;border-bottom:1px solid #1c161033;box-shadow:0 8px 20px #0008}
#reader .toc-inner{display:flex;align-items:center;gap:10px;padding:4px 16px}
#reader .toc-toggle{min-height:44px;padding:4px 12px;border:1px solid var(--gold);font-size:14px}
#reader .chapter-progress{flex:1;font-size:13px;color:var(--dim)}
#reader .font-toggle{min-height:44px;font-size:13px;color:var(--dim)}
#reader .font-toggle[aria-pressed=true]{color:var(--gold-l)}
#reader .chapter-nav{display:none;flex-direction:column;padding:4px 16px 10px}
#reader .chapter-nav.open{display:flex}
#reader .chapter-nav button{display:flex;align-items:center;gap:14px;min-height:48px;font-size:15px;color:var(--dim);border-bottom:1px solid #1c161033;border-left:3px solid transparent;padding-left:10px;text-align:left}
#reader .chapter-nav button span{font:900 21px var(--rserif);color:var(--gold);width:28px}
#reader .chapter-nav button[aria-current=true]{color:var(--cream);border-left-color:var(--seal-l)}
#reader .reader-body{padding:20px 14px calc(40px + env(safe-area-inset-bottom,0px))}
#reader .r-note{font-size:12px;color:#8f826a;text-align:center;margin-top:18px}
#reader .chapter{position:relative;color:var(--ink);background-color:var(--paper);padding:60px 24px 36px;margin-bottom:22px;outline:3px solid #1c1610;outline-offset:-12px;
 background-image:radial-gradient(ellipse at 50% 50%,transparent 55%,#7a5a2c55 100%),radial-gradient(circle at 18% 22%,#8e6b3422 0 6%,transparent 7%),repeating-linear-gradient(90deg,transparent 0 40px,#5b432014 40px 41px);
 box-shadow:0 20px 50px #000c,inset 0 0 0 16px var(--paper),inset 0 0 0 17px #1c1610aa,inset 0 0 60px #7a5a2c55}
#reader .panshim{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:var(--paper-2);border:2px solid #1c161033;border-top:0;padding:4px 10px 6px;font:700 11px var(--rserif);color:#2a1d10;letter-spacing:.1em;white-space:nowrap}
#reader .panshim i{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #1c161033}
#reader .ch-kicker{font:700 13px var(--rserif);letter-spacing:.2em;color:var(--seal);margin-bottom:4px}
#reader .chapter h2{font:700 26px/1.45 var(--rserif);color:var(--ink);outline:none}
#reader .ch-sub{font-size:13.5px;color:var(--ink-2);margin:6px 0 20px;padding-bottom:16px;border-bottom:1px solid #1c161033}
#reader .chapter h3{font:700 19px/1.55 var(--rserif);color:var(--ink);margin:30px 0 8px;display:flex;align-items:center;gap:8px}
#reader .chapter h3:before{content:'';width:8px;height:8px;background:var(--seal);transform:rotate(45deg);flex:none}
#reader .chapter p{font:400 17.5px/1.9 var(--rserif);color:var(--ink);margin:12px 0}
#reader .chapter .lead{font:700 21px/1.65 var(--rserif);color:var(--seal);margin:8px 0 14px}
#reader .chapter ul.plain{margin:10px 0;padding:0;list-style:none}
#reader .chapter ul.plain li{font:400 17px/1.85 var(--rserif);padding-left:22px;position:relative;margin:6px 0}
#reader .chapter ul.plain li:before{content:'◆';position:absolute;left:0;top:1px;font-size:10px;color:var(--seal)}
#reader .quote{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:2px 0 18px;padding:12px;background:#efe5cc10;border-top:1px solid #1c161033;border-bottom:1px solid #1c161033}
#reader .quote p{margin:0;font:400 16px/1.75 var(--rserif);color:var(--ink-2)}
#reader .quote p b{font-weight:700;color:var(--ink)}
#reader .basis{border:1px solid #1c161033;background:#efe3c455;padding:12px 14px;margin:14px 0;font-size:15px;line-height:1.75;color:var(--ink-2)}
#reader .basis-t{display:block;font:700 13px var(--rsans);letter-spacing:.06em;color:var(--seal);margin-bottom:2px}
#reader .basis b{color:var(--ink)}
#reader .basis .hj{font:700 16px var(--rserif);color:var(--ink)}
#reader .callout{border-left:4px solid var(--seal);background:#8a2c1f12;padding:12px 16px;margin:22px 0;font:400 16.5px/1.8 var(--rserif);color:var(--ink)}
#reader .callout b{color:var(--seal)}
#reader .small-note{font:400 13px/1.65 var(--rsans)!important;color:var(--ink-2)!important}
#reader .myeongsik{margin:18px 0 8px;border:2px solid #1c161033;background:#efe3c433}
#reader .ms-cap{font:700 12px var(--rsans);letter-spacing:.08em;color:var(--ink-2);padding:6px 10px;border-bottom:1px solid #1c161033}
#reader .ms-cap span:last-child{display:none}
#reader .ms-grid{display:grid;grid-template-columns:repeat(4,1fr)}
#reader .ms-col{border-right:1px solid #1c161033;text-align:center}
#reader .ms-col:last-child{border-right:0}
#reader .ms-col>small{display:block;font:600 12px var(--rsans);color:var(--ink-2);padding:6px 2px;border-bottom:1px dashed #1c161033}
#reader .ms-cell{padding:8px 2px 10px}
#reader .ms-cell+.ms-cell{border-top:1px solid #1c161033}
#reader .ms-cell .g{display:block;font:600 12px var(--rsans);color:var(--seal);min-height:17px}
#reader .ms-cell .g small{display:block;font:400 10.5px/1.3 var(--rsans);color:var(--ink-2)}
#reader .ms-cell .h{display:block;font:900 34px/1.15 var(--rserif);color:var(--ink)}
#reader .ms-cell .r{display:block;font:400 12px var(--rsans);color:var(--ink-2)}
#reader .ms-col.me{background:#8a2c1f14}
#reader .ms-col.me .ms-cell:first-of-type .h{color:var(--seal)}
#reader .ms-col.empty .h{color:#1c161040}
#reader .e0{box-shadow:inset 0 -4px 0 #2f5b4c88}
#reader .e1{box-shadow:inset 0 -4px 0 #a8321f88}
#reader .e2{box-shadow:inset 0 -4px 0 #b8913a99}
#reader .e3{box-shadow:inset 0 -4px 0 #8a8a8a99}
#reader .e4{box-shadow:inset 0 -4px 0 #24395a99}
#reader .summary{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
#reader .summary th,#reader .summary td{padding:10px 6px;border-bottom:1px solid #1c161033;text-align:left;vertical-align:top}
#reader .summary th{width:38%;font:700 14px var(--rserif);color:var(--ink-2)}
#reader .summary td{font:400 15.5px/1.65 var(--rserif);color:var(--ink)}
#reader .bars{margin:14px 0}
#reader .bar-row{display:grid;grid-template-columns:72px 1fr 44px;gap:10px;align-items:center;margin:8px 0;font:400 15px var(--rserif);color:var(--ink)}
#reader .bar-row .hj{font-weight:900;font-size:17px;margin-right:4px}
#reader .bar{height:11px;background:#efe5cc18;border:1px solid #1c161033}
#reader .bar i{display:block;height:100%}
#reader .bar-row .n{text-align:right;font-size:13px;color:var(--ink-2)}
#reader .bar-row small{display:block;margin-top:1px;font-size:12px;line-height:1.3;color:var(--ink-2)}
#reader .c0{background:#2f5b4c}
#reader .c1{background:#a8321f}
#reader .c2{background:#b8913a}
#reader .c3{background:#77736b}
#reader .c4{background:#24395a}
#reader .c5{background:#4a3b28}
#reader .luck-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
#reader .luck-table caption{text-align:left;font:700 13px var(--rsans);color:var(--ink-2);padding-bottom:6px}
#reader .luck-table th,#reader .luck-table td{padding:9px 5px;border-bottom:1px solid #1c161033;text-align:left;color:var(--ink);white-space:nowrap}
#reader .luck-table th{font:700 13px var(--rsans);color:var(--ink-2)}
#reader .luck-table td.hj{font:900 19px var(--rserif)}
#reader .luck-table tr.now{background:#8a2c1f18}
#reader .luck-table tr.now td:first-child{box-shadow:inset 4px 0 0 var(--seal)}
#reader .mark{font:700 11px var(--rsans);color:#1c1610;background:#2f5b4c;padding:1px 6px}
#reader .mark.now{background:var(--seal)}
#reader .chapter a{color:var(--seal)}
#reader.big-type .chapter p,#reader.big-type .chapter ul.plain li,#reader.big-type .callout{font-size:20.5px}
.site-header .seal{writing-mode:horizontal-tb;display:block;width:34px;padding:5px 0;text-align:center;line-height:1.15;word-break:break-all;flex:none}

/* 오프닝 타이틀: 명과학 설명 */
.opening-finale{overflow-y:auto;place-items:start center;-webkit-overflow-scrolling:touch}
.opening-finale .finale-copy{padding:16px 18px 24px;max-width:460px;margin:auto}
.opening-finale .finale-subtitle{margin-bottom:14px}
.opening-finale .mk{word-break:keep-all;margin:0 auto 18px;padding:14px 14px 12px;border-top:1px solid #a8864566;border-bottom:1px solid #a8864566;background:#0b0a08d9;text-align:center;animation:ink-arrives .9s .5s both}
.mk-head{font:13px/1.5 var(--serif);color:#4a3b28;letter-spacing:1px}
.mk-head b{display:block;font:700 22px/1.4 var(--serif);color:#2a2117;letter-spacing:2px;margin-top:2px;font-weight:700}
.mk-lead{font:14px/1.75 var(--serif);color:#2a2117;margin-top:8px}
.mk-lead b{color:#2a2117;font-weight:700}
.mk-three{list-style:none;margin:12px 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-three li{display:flex;flex-direction:column;align-items:center;padding:0 4px}
.mk-three li+li{border-left:1px solid #a8864544}
.mk-three span{font:700 20px/1.25 var(--serif);color:#2a2117;letter-spacing:1px}
.mk-three b{font:600 13.5px var(--serif);color:#2a2117}
.mk-three small{font:11.5px/1.45 var(--sans);color:#4a3b28}
.mk-tag{font:13px/1.7 var(--serif);color:#4a3b28}
.finale-fiction a{color:inherit;text-decoration:underline}
@media (max-height:760px){.opening-finale .finale-kicker{margin-bottom:6px}.opening-finale .finale-copy h1>small{margin-bottom:4px}.opening-finale .finale-copy h1>span{font-size:38px}.opening-finale .finale-seal{margin:8px auto 6px;font-size:17px}.opening-finale .finale-subtitle{display:none}.opening-finale .mk{padding:10px 12px 8px;margin-bottom:14px}.opening-finale .mk-three{margin:8px 0 6px}}