:root{--ink:#29322e;--muted:#667067;--green:#355e4b;--paper:#f8f6ef;--rule:#dedfd5;--soft:#eeeee5;--red:#a33c30;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:#fbfcf9;color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{border:1px solid var(--rule);border-radius:7px;padding:9px 16px;min-height:44px;background:#fff;color:var(--ink);cursor:pointer}button:hover:not(:disabled){background:var(--soft)}button:disabled{opacity:.43;cursor:default}button.primary{background:var(--green);border-color:var(--green);color:#fff}button.primary:hover:not(:disabled){background:#284b3b}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #619c86;outline-offset:3px}a{color:inherit;text-decoration:none}main a{color:var(--green);text-decoration:underline;text-underline-offset:4px}[hidden]{display:none!important}h1,h2,p{margin-top:0}h1{line-height:1.25}button.text-button{padding:0;border:0;background:none;color:var(--muted);min-height:34px;font-size:13px}.skip-link{position:absolute;left:12px;top:-80px;padding:9px;background:#fff;z-index:10}.skip-link:focus{top:8px}
main{max-width:var(--dh-page-width,1240px);margin:auto;padding:0 var(--dh-page-gutter,28px)}.intro{display:grid;grid-template-columns:minmax(280px,.8fr) 1fr;gap:90px;align-items:center;max-width:1090px;margin:60px auto 72px}.intro-cover{padding:20px 30px;background:#edeadb;border-radius:3px}.intro-cover img{display:block;max-width:100%;height:auto;max-height:610px;margin:auto;box-shadow:9px 12px 23px #42331930}.eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:2px;color:var(--green);margin-bottom:18px}.intro h1{font-family:Batang,'Songti SC',serif;font-size:45px;font-weight:600;letter-spacing:-2px;margin-bottom:22px}.intro-lead{font-size:25px;line-height:1.6;letter-spacing:-.8px;margin-bottom:24px}.intro-description{color:var(--muted);font-size:16px;line-height:1.9}.intro-facts{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:24px 0}.intro-facts span+span{border-left:1px solid var(--rule);padding-left:10px}.intro-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.intro-actions .primary{padding:13px 24px;min-width:190px}.intro-actions .primary span{margin-left:22px}.small{font-size:12px;color:var(--muted);line-height:1.75}.intro-note{font-size:12px;color:var(--muted);margin-top:24px;border-top:1px solid var(--rule);padding-top:20px}
.reader{padding:20px 0 30px}.reader-heading{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-bottom:15px}.reader-heading h1{font-family:Batang,'Songti SC',serif;font-size:26px;letter-spacing:-1px;margin:4px 0 0}.reader-heading h1 span{font:12px/1.6 sans-serif;letter-spacing:0;margin-left:14px;color:var(--muted)}.reading-progress{display:flex;flex-direction:column;text-align:right;font-size:13px}.reading-progress strong{font-weight:600}.reading-progress>span{font-size:11px;color:var(--muted)}.reader-toolbar{display:flex;gap:20px;align-items:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;margin-bottom:22px;flex-wrap:wrap}.mode-group{display:flex;background:var(--soft);padding:3px;border-radius:7px;gap:2px}.mode-group button{border:0;background:none;padding:7px 16px;min-height:38px;font-size:13px}.mode-group button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #29322e18;color:var(--green);font-weight:600}.page-nav{display:flex;gap:5px;align-items:center}.page-nav button{padding:6px 11px;min-height:38px;font-size:13px;background:none;border-color:transparent}.page-nav button[aria-current=page]{border-color:var(--green);color:var(--green)}.page-nav button.finished:after{content:' ✓';color:var(--green)}.contrast-switch{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--muted);margin-left:auto;cursor:pointer;min-height:40px}.contrast-switch input{accent-color:var(--green);width:16px;height:16px}
.reading-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:start}.reader.read-only .reading-layout{grid-template-columns:1fr}.reader.read-only .practice{display:none}.book-area{min-width:0}.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;background:#cebf91;padding:0;box-shadow:0 9px 22px #392f1717;max-width:980px;margin:auto}.leaf{position:relative;min-width:0;margin:0}.scan-wrap{position:relative;line-height:0}.scan-wrap img{display:block;width:100%;height:auto}.reader.high-contrast .scan-wrap img{filter:grayscale(.45) brightness(1.08) contrast(1.18)}.hotspot{position:absolute;min-height:0;padding:0;border:0;border-radius:2px;background:transparent;transition:background .12s;box-shadow:none}.hotspot:hover:not(:disabled){background:#fff8bb40}.hotspot.active{background:#faffbc55;outline:2px solid #496d3d99;outline-offset:2px}.hotspot.done:not(.active){background:#f3ffcc25;border-bottom:2px solid #47744b88}.hotspot:focus-visible{outline:3px solid #2e6f52;outline-offset:2px}.read-only .hotspot{opacity:0}.read-only .hotspot:hover,.read-only .hotspot:focus-visible{opacity:1}.leaf figcaption{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:6px;background:#f7f0d9ec;padding:2px 6px;border-radius:3px;font-size:11px;color:#554d39;max-width:calc(100% - 16px)}.leaf figcaption button{background:none;border:0;border-radius:0;font-size:11px;min-height:27px;padding:0 4px}.spread-footer{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:15px;color:var(--muted);font-size:12px}.spread-footer button{font-size:12px;background:none;min-height:40px;padding:7px 10px;border-color:transparent}
.practice{border-left:1px solid var(--rule);padding:4px 0 0 24px;min-width:0}.practice-kicker{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:17px}.practice h2{font-size:17px;letter-spacing:-.4px;margin-bottom:22px}.target{display:flex;flex-wrap:wrap;gap:0;margin-bottom:25px;min-height:55px;align-content:start}.target .character{display:flex;justify-content:center;align-items:center;width:39px;height:49px;border:1px solid var(--rule);margin:0 -1px -1px 0;font:25px/1.3 Batang,serif;color:#9a9d91;white-space:pre}.target .character.hit{color:var(--green);background:#e7eee2}.target .character.current{box-shadow:inset 0 -3px var(--green);color:var(--ink)}.target .character.wrong{background:#f9e4de;box-shadow:inset 0 -3px var(--red)}.target .character.space{font:14px/1 sans-serif}.input-label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}#typing-input{width:100%;border:1px solid #bfc5b7;background:#fff;border-radius:6px;padding:12px 11px;font-size:18px;color:var(--ink);min-height:52px;scroll-margin-bottom:35px}.ghost-stage{position:relative;height:214px;border:1px solid #bfc5b7;border-radius:6px;background:#fff;overflow:hidden}.ghost-stage:focus-within{outline:3px solid #619c86;outline-offset:3px}.ghost-host{position:absolute;inset:0}.ghost-stage:not([data-state=live]):after{content:'불러오는 중';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;font-size:12px;color:var(--muted)}.practice.ghost-on{position:relative}.practice.ghost-on .target{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}.practice.ghost-on #typing-input{display:none}.typing-status{font-size:12px;min-height:40px;color:var(--muted);margin:9px 0 8px}.typing-status.error{color:var(--red)}.next-unit{width:100%;font-size:14px}.unit-progress{height:4px;background:var(--soft);margin:22px 0 13px}.unit-progress span{display:block;width:0;height:100%;background:var(--green)}.practice details{border-top:1px solid var(--rule);padding-top:16px;font-size:12px;color:var(--muted)}summary{cursor:pointer;color:var(--green)}.practice details p{margin:11px 0;line-height:1.8}.completion{background:var(--soft);padding:35px 20px;text-align:center;margin-top:30px}.completion h2{font-family:Batang,serif;font-size:25px}.completion .eyebrow{margin-bottom:12px}.completion button{margin:4px}.completion p{font-size:14px;color:var(--muted)}
.source-details{border-top:1px solid var(--rule);padding:20px 0;margin:10px 0 30px;font-size:13px;max-width:1100px}.source-details>div{max-width:850px;margin-top:18px;color:var(--muted)}.source-details strong{color:var(--ink)}.source-details p{margin-bottom:12px}#scan-dialog{max-width:min(94vw,1150px);max-height:92vh;padding:0;border:1px solid #867d64;border-radius:4px;background:#f6f3e8}#scan-dialog::backdrop{background:#18231cbf}.dialog-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;background:#f6f3e8;border-bottom:1px solid var(--rule)}.dialog-toolbar h2{font-size:15px;margin:0}.dialog-toolbar button{font-size:13px}.dialog-toolbar+img{display:block;width:100%;height:auto}
@media(min-width:1500px){.reading-layout{grid-template-columns:minmax(0,1fr) 345px}.target .character{width:43px;height:54px}}
@media(max-width:1000px){.intro{gap:45px;margin-top:35px}.intro h1{font-size:36px}.intro-lead{font-size:22px}.reading-layout{grid-template-columns:minmax(0,1fr) 280px;gap:20px}.practice{padding-left:18px}.reader-heading h1 span{display:none}.target .character{width:35px;height:45px;font-size:23px}}
@media(max-width:760px){.intro{grid-template-columns:1fr;gap:30px;margin:25px auto 35px;max-width:510px}.intro-cover{max-width:290px;justify-self:center;padding:18px 23px}.intro-cover img{max-height:350px}.intro-copy h1{font-size:34px}.intro-lead{font-size:22px}.intro-description{font-size:15px}.intro-actions .primary{flex:1}.intro-note{margin-bottom:0}.reader-heading{gap:8px;align-items:end}.reader-heading h1{font-size:24px}.reading-progress{font-size:11px;white-space:nowrap}.reading-progress>span{font-size:10px}.reader-toolbar{gap:8px;margin-bottom:17px;justify-content:space-between}.mode-group{gap:0}.mode-group button{padding:6px 10px}.page-nav{order:3;width:100%;justify-content:space-around}.page-nav button{min-height:40px;flex:1}.contrast-switch{font-size:11px;margin:0}.reading-layout{grid-template-columns:1fr;gap:24px}.spread{grid-template-columns:1fr;max-width:460px}.leaf:not(.active-page){display:none}.leaf figcaption{top:6px;left:6px}.practice{border-left:0;border-top:1px solid var(--rule);padding:20px 0 0}.target{margin-bottom:20px;min-height:50px}.target .character{width:42px;height:50px;font-size:25px}.practice h2{font-size:18px;margin-bottom:18px}.practice-kicker{margin-bottom:10px}.practice .small br{display:none}.completion h2{font-size:23px}.source-details{font-size:12px}.read-only .spread{max-width:460px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Whole-book navigation and existing-store purchase entry. */
.page-nav select,.book-archive select{max-width:100%;padding:9px 12px;border:1px solid #c1cbbf;border-radius:5px;background:white;font:inherit;color:#294b39}
.book-purchase{margin-top:22px;padding:18px;border:1px solid var(--rule);border-radius:8px;max-width:480px;font-size:14px;line-height:1.7}
.book-purchase p{margin:8px 0}.book-purchase strong{color:var(--green)}
.purchase-link{display:inline-block;padding:10px 0;color:#355e4b;font-weight:700}
#badugi-order{display:grid;gap:10px}#depositor-name{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #c1cbbf;border-radius:5px;font:inherit}
.purchase-consent{display:flex;gap:8px;align-items:flex-start;font-size:12px}.purchase-consent input{margin-top:5px}
.book-archive{border-top:1px solid var(--rule);padding:28px 0;max-width:1200px;margin:auto}.book-archive p{font-size:14px;color:var(--muted)}
#archive-image{display:block;width:580px;max-width:100%;height:auto;margin:22px auto}#archive-image[hidden]{display:none}
@media(max-width:600px){.book-archive{padding:22px 17px}.page-nav{max-width:100%}.page-nav select{width:100%}.book-purchase{padding:14px}}

/* Mobile: keep the source and writing together; original opens without changing progress. */
.mobile-source{display:none}
@media(max-width:760px){
 .reader.keyboard-open .mobile-source-pair{--source-height:80px}
 .reader.keyboard-open .ghost-stage{height:130px}
 .reader.keyboard-open .mobile-source-heading{padding-top:3px;padding-bottom:3px}
}
@media(max-width:760px){
 .reader:not(.read-only) .book-area{display:none}
 .reader:not(.read-only) .reading-layout{gap:0}
 .reader:not(.read-only) .practice{padding:0;border:0}
 .mobile-source{display:block;margin-bottom:10px;border:1px solid #dfd9c9;border-radius:12px;overflow:hidden;background:#f5f0e4}
 .mobile-source-heading{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #e5dfd1;color:#726b5d;font-size:11px}
 .mobile-source>button{display:block;width:100%;padding:8px 12px 9px;border:0;border-radius:0;background:transparent}
 .mobile-source>button:hover:not(:disabled){background:#eee8db}
 #mobile-source-crop{display:block;width:100%;height:clamp(130px,21dvh,185px);overflow:hidden}
 .mobile-source-open{display:block;text-align:right;margin-top:5px;font-size:11px;color:#74694f}
 .reader.high-contrast #mobile-source-crop{filter:grayscale(.45) brightness(1.08) contrast(1.18)}
 .practice-kicker,.practice h2{display:none}
 .practice.ghost-on .input-label{display:none}
 .target{gap:4px;margin-bottom:14px;min-height:0}
 .target .character{width:30px;height:38px;border:0;border-radius:4px;font-size:22px;margin:0;color:#6d746b;background:#f0f2ed}
 .target .character.current{background:#dceadc;color:#244c37;box-shadow:inset 0 -3px var(--green)}
 .target .character.hit{background:#e7eee2;color:var(--green)}
 .input-label{font-size:12px;margin:4px 0 8px}
 .ghost-stage{height:clamp(180px,32dvh,280px);border-radius:12px}
 #typing-input{border-radius:12px;font-size:22px;min-height:62px}
 .typing-status{min-height:0;margin:10px 0 14px}
 .unit-progress{margin:14px 0 10px}
 .next-unit{min-height:48px;border-radius:12px}
 #scan-dialog{width:calc(100vw - 24px);max-height:85dvh;border-radius:16px;border:0}
 .reader-heading h1{font-size:21px}.reader-toolbar{padding:8px 0;margin-bottom:14px}
}

@media(max-width:760px){
 .mobile-source-pair{--source-height:clamp(100px,30vw,150px);display:grid;grid-template-columns:calc(var(--source-height) * var(--map-ratio,.722)) minmax(0,1fr);gap:12px;align-items:start}
 .mobile-page-map{display:block;min-width:0}
 #mobile-map{display:block;width:100%;height:var(--source-height);box-shadow:0 2px 5px #493c2226}
 .mobile-page-map>span{display:none}
 .mobile-source-pair #mobile-source-crop{min-width:0;height:var(--source-height);max-height:none}
}