:root{--comic-paper:#f3efe4;--comic-ink:#171717;--comic-card:#fffef9;--comic-yellow:#ffdf3d;--comic-mint:#9ce8b2;--comic-muted:#595a54;--comic-shadow:5px 5px 0 var(--comic-ink)}
*{box-sizing:border-box}body.comic-site{margin:0;background:var(--comic-paper);color:var(--comic-ink);font:16px/1.65 Arial,"Noto Sans KR",sans-serif;overflow-wrap:break-word}.comic-site button,.comic-site a{touch-action:manipulation}.comic-site button{font:inherit;cursor:pointer;color:inherit}.comic-site a{color:inherit}.comic-site button:focus-visible,.comic-site a:focus-visible,.comic-site summary:focus-visible{outline:3px solid #2b63a9;outline-offset:5px}.comic-site [hidden]{display:none!important}
.comic-top{background:var(--comic-yellow);border:3px solid var(--comic-ink);box-shadow:0 7px 0 var(--comic-ink);min-height:80px;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:16px 20px 38px}.comic-brand{text-decoration:none;line-height:1;display:block}.comic-brand strong{font-size:30px;font-weight:900;letter-spacing:-2px;display:block;transform:rotate(-3deg)}.comic-brand span{display:block;font-size:10px;letter-spacing:3px;margin-top:7px}.comic-header-links{display:flex;align-items:center;gap:18px;font-size:14px;font-weight:700}.comic-header-links>a{text-decoration:none}body.comic-site header .site-theme,.comic-site #theme{background:#fff!important;color:#171717!important;border:2px solid var(--comic-ink)!important;border-radius:0!important;box-shadow:3px 3px 0 var(--comic-ink);padding:8px 14px!important;min-height:44px}
.comic-main{max-width:820px;padding:0 26px 36px;margin:auto}.reader-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 22px}.comic-kicker{font:700 12px/1.4 "Courier New",monospace;letter-spacing:1.5px;margin:0 0 7px;display:block}.comic-site h1{font-size:clamp(26px,4.5vw,38px);line-height:1.15;letter-spacing:-1px;margin:6px 0 10px}.comic-subtitle{margin:0;color:var(--comic-muted);font-size:14px}.comic-stamp{border:2px solid var(--comic-ink);background:var(--comic-mint);box-shadow:4px 4px 0 var(--comic-ink);padding:8px 14px;font-size:26px;font-weight:900;text-align:center;line-height:1.05;transform:rotate(4deg);flex-shrink:0}.comic-stamp small{font:700 10px/1.5 "Courier New",monospace;letter-spacing:1px}
.reader-toolbar{display:flex;justify-content:center;gap:14px;align-items:stretch;margin-bottom:18px;flex-wrap:wrap;scroll-margin-top:18px}.reader-toolbar>span,.reader-toolbar>button{border:2px solid var(--comic-ink);background:var(--comic-card);box-shadow:var(--comic-shadow);font:700 14px/1.4 "Courier New",monospace;padding:12px 20px;display:flex;align-items:center;justify-content:center}.reader-toolbar>button{background:var(--comic-mint)}.reader-status{font-size:13px;margin:6px 0 14px;color:var(--comic-muted);text-align:center}.reader-status:empty{display:none}.comic-page{margin:0;background:#fff;border:3px solid var(--comic-ink);box-shadow:6px 6px 0 var(--comic-ink)}.comic-page img{width:100%;height:auto;display:block}.comic-page figcaption{display:flex;justify-content:space-between;gap:14px;padding:8px 12px;background:var(--comic-card);color:var(--comic-muted);font-size:12px;border-top:2px solid var(--comic-ink)}.comic-page figcaption>button{border:0;background:transparent;font-size:12px;padding:2px 0;text-decoration:underline}
.comic-interaction{margin:28px 0 20px;background:var(--comic-card);border:2px solid var(--comic-ink);padding:24px;box-shadow:var(--comic-shadow)}.comic-interaction h2{margin:6px 0 18px;font-size:24px;line-height:1.25}.comic-choices{display:grid;grid-template-columns:1fr 1fr;gap:16px}.comic-choice{border:2px solid var(--comic-ink);background:#e5edff;padding:15px 14px;min-height:92px;text-align:left;display:flex;align-items:center;gap:12px;box-shadow:3px 3px 0 var(--comic-ink);font-size:20px!important;font-weight:700;line-height:1.45}.comic-choice:nth-child(2){background:#dcf3e2}.comic-choice>b{background:var(--comic-ink);color:white;font:900 19px/1 Arial;padding:9px;flex-shrink:0}.comic-choice:hover,.comic-action:hover,.reader-toolbar button:hover{filter:brightness(.95)}.comic-choice:active{box-shadow:1px 1px 0 var(--comic-ink);transform:translate(2px,2px)}.meaning-toggle{margin-top:18px;border:0;border-bottom:1px dashed currentColor;background:none;padding:4px 0;font-size:13px!important}.comic-meanings{margin-top:14px;border-left:3px solid var(--comic-ink);padding:8px 14px;background:#eff2e9;font-size:14px}.comic-meanings p{margin:8px 0}.comic-meanings b{margin-right:10px}.story-bridge{padding:12px 14px;border-left:4px solid #367943;background:#e5f4e7;font-size:14px;margin-top:0}
.comic-pager{margin:24px 0 30px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;border:2px solid var(--comic-ink);box-shadow:var(--comic-shadow);background:var(--comic-card)}.comic-pager button{background:none;border:0;font-weight:700;padding:14px 8px;min-height:56px;font-size:14px}.comic-pager button+button{border-left:1px solid var(--comic-ink)}.comic-pager button:hover{background:#ebe8dd}.comic-pager button:disabled{opacity:.4;cursor:default}.comic-pager #fullscreen{font-size:24px;line-height:1}.comic-pager #fullscreen span{font-size:10px;margin-left:6px;vertical-align:middle}
.comic-learning{margin:18px 0;background:var(--comic-card);border:2px solid var(--comic-ink);padding:18px 22px}.comic-learning>summary{cursor:pointer;font-weight:900;font-size:17px}.comic-learning>summary>span{float:right;color:var(--comic-muted);font-size:11px;font-weight:400;margin-top:5px}.comic-word-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;gap:16px}.comic-word-grid article{padding-right:12px;min-width:0}.comic-word-grid article+article{border-left:1px dashed var(--comic-ink);padding-left:16px}.comic-word-grid h3{margin:0;font-size:24px}.word-reading{color:var(--comic-muted);font-size:13px}.comic-word-grid p{font-size:14px;margin:7px 0 12px}.comic-word-grid b{display:block;font-size:16px}.comic-word-grid small{display:block;color:var(--comic-muted);font-size:13px}.comic-grammar{display:flex;align-items:flex-start;gap:16px;margin-top:20px;background:#e8eff9;padding:12px 14px;font-size:13px}.comic-grammar>b{white-space:nowrap;font-size:17px}.reading-note{font-size:11px;color:var(--comic-muted);margin:14px 0 0}.comic-line{margin:16px 0;padding:12px 14px;border-left:3px solid var(--comic-ink);background:#f3f0e7}.comic-line small{display:block;color:var(--comic-muted);font-size:11px}.comic-line b{display:block;font-size:20px}.comic-line span{display:block;font-size:14px;margin-top:4px}
.ending-collection{margin-top:30px;border-top:2px solid var(--comic-ink);padding-top:16px}.collection-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.collection-heading h2{font-size:17px;margin:0}.collection-heading>span{font:700 16px/1 "Courier New",monospace}#ending-shelf{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.ending-tile{border:1px dashed #a7a79a;padding:12px;display:flex;gap:12px;align-items:center;color:var(--comic-muted);font-size:14px}.ending-tile.discovered{border:2px solid var(--comic-ink);background:var(--comic-card);color:var(--comic-ink)}.ending-tile b{white-space:nowrap}.ending-tile small{display:block;font-size:11px;color:var(--comic-muted)}.comic-ending p{font-size:15px}.ending-hint{color:var(--comic-muted);font-size:13px!important}.comic-action{display:inline-block;border:2px solid var(--comic-ink);box-shadow:4px 4px 0 var(--comic-ink);background:var(--comic-yellow);padding:12px 20px;font-weight:700;font-size:13px;text-decoration:none;min-height:48px}.comic-action.mint{background:var(--comic-mint)}.comic-footer{font-weight:700;text-align:center;margin:36px 0 0;font-size:17px}.comic-footer>span{display:block;font-weight:400;font-size:13px;color:var(--comic-muted);margin-top:6px}
.comic-dialog{background:var(--comic-card);color:var(--comic-ink);border:3px solid var(--comic-ink);box-shadow:8px 8px 0 var(--comic-ink);max-width:520px;width:calc(100% - 36px);padding:24px}dialog::backdrop{background:#0009}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.dialog-heading h2{margin:0;font-size:22px}.dialog-heading button{background:var(--comic-yellow);border:2px solid var(--comic-ink);width:44px;height:44px}.chapter-list{display:grid;gap:12px;margin-top:22px}.chapter-list>a{display:flex;gap:18px;text-decoration:none;padding:16px;border:2px solid var(--comic-ink)}.chapter-list>a[aria-current]{background:var(--comic-mint)}.chapter-list b{font:900 24px/1 "Courier New",monospace}.chapter-list small{display:block;color:var(--comic-muted);font-size:12px}.image-dialog{width:min(1180px,calc(100% - 20px));max-width:1180px;max-height:94dvh;padding:16px;background:var(--comic-paper);color:var(--comic-ink);border:3px solid var(--comic-ink);overflow:auto}.image-dialog>button{position:sticky;top:0;float:right;padding:10px 14px;border:2px solid var(--comic-ink);background:var(--comic-yellow);z-index:2;box-shadow:3px 3px 0 var(--comic-ink)}.image-dialog p{font-size:12px}.image-dialog img{display:block;width:1086px;min-width:1086px;max-width:none;height:auto}.comic-main:fullscreen{max-width:none;width:100%;height:100%;overflow:auto;padding:24px max(20px,calc((100% - 768px)/2));background:var(--comic-paper)}.skip-link{position:absolute;left:16px;top:-70px;background:white;padding:12px;z-index:10}.skip-link:focus{top:8px}
.comic-catalogue{max-width:1120px;margin:auto;padding:0 30px 40px}.catalogue-heading{margin:44px 0 30px;display:flex;justify-content:space-between;gap:20px;align-items:center}.catalogue-heading h1{font-size:clamp(36px,6vw,58px);margin-bottom:12px}.catalogue-heading .comic-subtitle{max-width:540px;font-size:16px}.catalogue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.story-card{background:var(--comic-card);border:2px solid var(--comic-ink);box-shadow:6px 6px 0 var(--comic-ink);min-width:0;position:relative}.story-card>a.story-cover{display:block;aspect-ratio:1.2;overflow:hidden;border-bottom:2px solid var(--comic-ink)}.story-cover img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .2s}.story-cover:hover img{transform:scale(1.02)}.story-card-body{padding:22px}.story-card-body h2{font-size:25px;line-height:1.2;margin:10px 0}.story-card-body p{font-size:14px;color:var(--comic-muted);margin:12px 0 20px;min-height:70px}.story-card .comic-action{width:100%;text-align:center;padding:11px}.story-tag{font:700 11px/1.4 "Courier New",monospace;letter-spacing:1px}.new-tag{position:absolute;right:-8px;top:14px;border:2px solid var(--comic-ink);background:var(--comic-yellow);color:#171717;padding:5px 12px;box-shadow:3px 3px 0 var(--comic-ink);font-size:12px;font-weight:900;transform:rotate(4deg)}.catalogue-note{border-top:2px solid var(--comic-ink);display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;padding:24px 0}.catalogue-note b{display:block;font-size:16px;margin-bottom:5px}.catalogue-note p{font-size:13px;color:var(--comic-muted);margin:0}
body.legacy-reader header{background:var(--comic-yellow);border:3px solid var(--comic-ink);box-shadow:0 6px 0 var(--comic-ink);max-width:none;padding:16px 24px;margin:0 0 28px;color:#171717}body.legacy-reader header a{color:#171717}body.legacy-reader .wrap,body.legacy-reader .shell{max-width:820px;padding:0 26px 32px}body.legacy-reader>.shell{padding-top:20px}body.legacy-reader h1{font-size:clamp(26px,4vw,38px)}body.legacy-reader .layout{display:block!important}body.legacy-reader .page img,body.legacy-reader .art{border:3px solid var(--comic-ink);box-shadow:5px 5px 0 var(--comic-ink);border-radius:0}body.legacy-reader .controls,body.legacy-reader .panel{position:static;margin-top:22px;background:var(--comic-card);border:2px solid var(--comic-ink);box-shadow:5px 5px 0 var(--comic-ink);border-radius:0;color:var(--comic-ink)}body.legacy-reader .choice{border:2px solid var(--comic-ink);border-radius:0;box-shadow:3px 3px 0 var(--comic-ink);background:#e5edff;color:#171717}body.legacy-reader .tools button,body.legacy-reader .meaning{border:2px solid var(--comic-ink);border-radius:0;background:var(--comic-card)}
html[data-theme=dark] body.comic-site{--comic-paper:#181e26;--comic-ink:#ecebdc;--comic-card:#242d37;--comic-yellow:#e8c937;--comic-mint:#83c79a;--comic-muted:#b5bec8;background:var(--comic-paper);color:var(--comic-ink)}html[data-theme=dark] .comic-site .comic-top{color:#171717;border-color:#080b10;box-shadow:0 7px 0 #080b10}html[data-theme=dark] body.comic-site header .site-theme{border-color:#171717!important;box-shadow:3px 3px 0 #171717}html[data-theme=dark] .comic-stamp,html[data-theme=dark] .reader-toolbar>button,html[data-theme=dark] .comic-action,html[data-theme=dark] .chapter-list>a[aria-current]{color:#171717}html[data-theme=dark] .comic-choice{background:#293f5d;color:#f5f5eb}html[data-theme=dark] .comic-choice:nth-child(2){background:#2b493a}html[data-theme=dark] .comic-choice>b{background:#ecebdc;color:#171717}html[data-theme=dark] .comic-meanings,html[data-theme=dark] .comic-line{background:#303b46}html[data-theme=dark] .comic-grammar{background:#2a3d55}html[data-theme=dark] .story-bridge{background:#284736;color:#e6f2e7}html[data-theme=dark] .comic-pager button:hover{background:#35424e}html[data-theme=dark] body.legacy-reader .controls,html[data-theme=dark] body.legacy-reader .panel{background:var(--comic-card);color:var(--comic-ink);border-color:var(--comic-ink)}html[data-theme=dark] body.legacy-reader .choice{background:#293f5d;color:#edf3ff;border-color:var(--comic-ink)}html[data-theme=dark] body.legacy-reader .tools button,html[data-theme=dark] body.legacy-reader .meaning{background:var(--comic-card);color:var(--comic-ink);border-color:var(--comic-ink)}
@media(max-width:850px){.catalogue-grid{grid-template-columns:1fr 1fr}.story-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.story-card:first-child>a.story-cover{border-bottom:0;border-right:2px solid var(--comic-ink);aspect-ratio:auto}.story-card:first-child .story-card-body{padding:28px}.comic-catalogue{padding:0 22px 36px}}
@media(max-width:600px){.comic-top{margin:10px 10px 28px;padding:12px 15px;min-height:70px;gap:10px}.comic-brand strong{font-size:25px}.comic-header-links{gap:10px;font-size:12px}.comic-main{padding:0 14px 28px}.reader-heading{gap:10px;margin-bottom:18px}.comic-stamp{padding:8px 10px;font-size:22px}.comic-stamp small{font-size:8px}.comic-site h1{letter-spacing:-.7px;font-size:27px}.comic-subtitle{font-size:12px}.comic-kicker{font-size:10px;letter-spacing:1px}.reader-toolbar{gap:10px}.reader-toolbar>span,.reader-toolbar>button{font-size:12px;padding:10px 14px;flex:1 1 auto}.comic-page{box-shadow:4px 4px 0 var(--comic-ink);border-width:2px}.comic-interaction{padding:18px;margin-top:22px}.comic-interaction h2{font-size:22px}.comic-choices{grid-template-columns:1fr;gap:12px}.comic-choice{min-height:68px;font-size:20px!important;padding:12px}.comic-learning{padding:16px}.comic-learning>summary>span{float:none;display:block;margin-left:18px;margin-top:4px}.comic-word-grid{grid-template-columns:1fr;gap:14px}.comic-word-grid article{padding:0}.comic-word-grid article+article{border-left:0;border-top:1px dashed var(--comic-ink);padding:14px 0 0}.comic-word-grid h3{font-size:24px}.comic-word-grid p{margin:3px 0 7px}.comic-grammar{flex-direction:column;gap:4px}.comic-pager button{font-size:12px}.comic-pager #fullscreen span{display:none}#ending-shelf{grid-template-columns:1fr}.comic-catalogue{padding:0 16px 30px}.catalogue-heading{margin:30px 0 24px}.catalogue-heading h1{font-size:36px}.catalogue-heading .comic-subtitle{font-size:14px}.catalogue-grid{grid-template-columns:1fr;gap:22px}.story-card:first-child{display:block;grid-column:auto}.story-card:first-child>a.story-cover{border-right:0;border-bottom:2px solid var(--comic-ink);aspect-ratio:1.5}.story-card>a.story-cover{aspect-ratio:1.5}.story-card:first-child .story-card-body,.story-card-body{padding:22px}.story-card-body p{min-height:0}.catalogue-note{grid-template-columns:1fr;gap:20px}.collection-heading h2{font-size:16px}body.legacy-reader .wrap,body.legacy-reader .shell{padding:0 16px 28px}body.legacy-reader>.shell{padding-top:14px}body.legacy-reader header{padding:14px 16px}.comic-footer{font-size:15px}}
@media(prefers-reduced-motion:reduce){.story-cover img{transition:none}.comic-site{scroll-behavior:auto}}

/* Shanghai story: keep the comic reading rhythm used on TOPIK. */
.atlas-art{position:relative;overflow:hidden;aspect-ratio:1;background:#efe8dc}
.comic-page .atlas-art img,.atlas-art img{position:absolute;left:0;top:0;width:300%;height:300%;max-width:none;object-fit:fill;display:block}
.story-dialogue{background:var(--comic-card);border:2px solid var(--comic-ink);margin-top:25px;padding:20px 24px;box-shadow:var(--comic-shadow)}
.dialogue-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.dialogue-tools h2{font-size:12px;margin:0 auto 0 0;letter-spacing:1px}.dialogue-tools button{background:var(--comic-card);border:1px solid var(--comic-ink);padding:8px 10px;min-height:44px;font-size:12px}
.pinyin{display:block!important;font-weight:400!important;font-size:13px!important;color:var(--comic-muted)!important;margin-top:6px;line-height:1.6}
.hide-pinyin .pinyin{display:none!important}.hide-translation .translation{display:none!important}
.comic-line b{font-size:24px;line-height:1.5}.comic-choice .pinyin{font-size:12px!important}
#image-dialog{width:min(960px,96vw);max-height:94vh;padding:16px;overflow:auto;background:var(--comic-card)}#large-art{width:100%;min-width:0}
#all-words article{border:0;padding:12px 0;border-bottom:1px dashed var(--comic-muted)}
.catalogue-grid.single{grid-template-columns:1fr;max-width:850px;margin:auto}.single .story-card{display:grid;grid-template-columns:1fr 1fr}.single .story-cover{aspect-ratio:1}.single .story-card-body{align-self:center}
.hsk-story-tag{margin-top:12px!important}
@media(max-width:600px){.story-dialogue{padding:16px}.dialogue-tools h2{width:100%;margin-bottom:4px}.comic-line{padding:10px;margin:12px 0}.comic-line b{font-size:22px}.single .story-card{display:block}.single .story-cover{aspect-ratio:1}.comic-header-links>a{font-size:11px}.comic-site #theme{padding:8px!important;font-size:11px}.pinyin{font-size:12px!important}}

#large-art img{min-width:0;width:300%;height:300%}.story-cover.atlas-art img{width:300%;height:300%;object-fit:fill;max-width:none;transition:none}.story-cover.atlas-art:hover img{transform:none}

.story-cover.atlas-art{aspect-ratio:418/403!important}.story-cover.atlas-art img{width:300%;height:311.166253%;}

/* Full educational comic pages, matching the TOPIK picture template. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#page-accessible:not(.sr-only){padding:18px;border:2px solid var(--comic-ink);background:var(--comic-card);margin-top:18px}
#page-image{width:100%;height:auto;position:static;transform:none;min-width:0;max-width:100%}
#large-image{width:1086px;min-width:1086px;height:auto;max-width:none;position:static;transform:none}
.single .story-cover{aspect-ratio:1}.single .story-cover img{width:100%;height:100%;object-fit:cover;object-position:top}

/* Two published HSK stories. */
.catalogue-grid.duo{grid-template-columns:repeat(2,minmax(0,1fr))}.duo .story-card:first-child{display:block;grid-column:auto}.duo .story-card:first-child>a.story-cover{border-right:0;border-bottom:2px solid var(--comic-ink);aspect-ratio:1.2}.duo .story-card:first-child .story-card-body{padding:22px}.duo .story-card-body p{min-height:0}.comic-page figcaption{flex-wrap:wrap;align-items:center}#page-download{font-size:12px;min-height:36px;display:inline-flex;align-items:center;margin-left:auto}.fiction-note{text-align:center;color:var(--comic-muted);font-size:11px;margin:24px 0 0}.beijing-reader #large-image{width:1080px;min-width:1080px}.beijing-reader .comic-choice{overflow-wrap:anywhere}
@media(max-width:600px){.catalogue-grid.duo{grid-template-columns:1fr}.duo .story-card:first-child>a.story-cover{aspect-ratio:1.5}.comic-page figcaption{gap:8px}#page-download{margin-left:0}}

.story-intro{margin:0 0 18px;font-size:13px;line-height:1.7}