/* 청월당의 448px 모바일 화면을 기준으로 홈 배치와 흰색 바탕을 맞춘다. */
:root{--paper:#fff;--ink:#292629;--muted:#797579;--line:#eee9e9;--green:#833e4a;--gold:#a27170;--red:#833e4a;background:#f6f6f6;color:var(--ink)}
body{width:100%;max-width:480px;min-height:100vh;margin:0 auto;background:#fff;box-shadow:0 0 0 1px #eee}
.demo{padding:7px 12px;background:#faf8f8;color:#81777a;font-size:9px;letter-spacing:.2px}
.header{height:68px;padding:0 20px;gap:10px;background:#fff}
.brand{font-size:17px;gap:10px}.brand small{font-size:8px;letter-spacing:2px}.seal{font-size:15px;height:34px}
.header nav{font-size:11px;gap:0}.header nav a:first-child{display:none}
.shell{width:100%;padding:0 20px 35px}.page,.page.wide,.input-page{width:100%;max-width:480px;margin:22px auto 55px;padding:0 20px}
h1,.page h1{font-size:31px;line-height:1.4;letter-spacing:-1.3px}h2{font-size:24px}h3{font-size:16px}
.hero{display:block;min-height:0;margin:0 -20px;border-radius:0;background:#fff;color:var(--ink)}
.hero .art{position:relative;inset:auto;width:100%;height:340px;border-radius:0;opacity:1;background:#f5eded}
.hero .art img{object-position:50% 23%}.hero:after{display:none}
.hero-copy{width:100%;max-width:none;padding:25px 24px 30px;background:#fff}
.hero .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:14px;color:#94646d}
.hero h1{font-size:30px;line-height:1.45;letter-spacing:-1.2px;margin-bottom:15px;text-shadow:none;color:#292629}
.hero p{font-size:13px;line-height:1.85;color:#797579;margin-bottom:22px}.hero-note{display:none}
.hero .btn{width:100%;min-height:48px;padding:13px 18px}.btn.light{background:#833e4a;border-color:#833e4a;color:#fff}
.btn{font-size:13px;border-radius:7px}.btn.outline{background:#fff}.btn.small{font-size:11px}
.section{margin-top:34px}.section-head{gap:10px;margin-bottom:20px}.section-head h2{font-size:23px;margin-bottom:8px;line-height:1.45}.section-head p{font-size:11px}.section-head .link{font-size:10px;white-space:nowrap}
.characters{grid-template-columns:repeat(3,minmax(0,1fr));gap:21px 12px}.character .art{height:auto;aspect-ratio:0.82;border-radius:70px 70px 7px 7px;background:#faf8f8;border-color:#f0eaea}.character h3{font-size:13px;margin:10px 0 5px}.character p{font-size:9px;line-height:1.6}
.category-bar{margin:30px -20px 23px;padding:11px 14px;gap:0;background:#fff;top:0;border-color:#eee;max-width:480px}.category-bar a{font-size:12px;padding:9px 12px}.category-bar a.active{background:#833e4a}
.catalog-tools{gap:10px;margin-bottom:20px}.catalog-tools h2{font-size:22px}.search{font-size:11px;width:48%;max-width:none;border-color:#dfd5d7}
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 15px}.card .art{height:auto;aspect-ratio:0.8;border-radius:9px;margin-bottom:12px}.card .meta{font-size:10px}.card h3{font-size:16px;margin-bottom:5px}.card p{font-size:11px;min-height:36px}.card-bottom{font-size:10px;border-color:#eee;gap:3px}
.free-banner{display:block;background:#fcf4f5;padding:27px 24px;margin-top:36px;border-radius:10px}.free-banner h2{font-size:23px}.free-banner p{font-size:12px;color:#7c6c70;margin-bottom:19px}.free-banner .eyebrow{letter-spacing:1.5px;font-size:9px}
.footer{padding:28px 20px 108px;display:block;background:#fff;font-size:10px;border-color:#eee}.footer nav{margin-top:20px;gap:17px}
.bottom-nav{position:fixed;bottom:0;left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:480px;display:flex;justify-content:space-around;padding:12px 6px max(12px,env(safe-area-inset-bottom));background:#fffffff5;border-top:1px solid #eee;z-index:30;backdrop-filter:blur(10px)}.bottom-nav a{font-size:10px;text-align:center;padding:2px 14px}.bottom-nav b{display:block;font-size:18px;font-weight:400;margin-bottom:4px;color:#833e4a}
.steps{gap:10px;font-size:9px;margin-bottom:23px}.back{font-size:12px;margin-bottom:22px}
.cover{margin:0 -20px;max-width:none;min-height:0;border-radius:0;background:#fff;color:var(--ink)}.cover>.art{position:relative;inset:auto;height:400px;width:100%;background:#f5eded}.cover>.art img{object-position:center 22%}.cover:after{display:none}.cover-badge{top:20px;left:20px;background:#ffffffdb;color:#733c47;padding:8px 11px;border-radius:4px;font-size:10px}
.cover-copy{min-height:0;padding:25px 24px 30px;background:#fff;display:block}.cover-copy .eyebrow{margin-top:0;margin-bottom:12px;font-size:10px;letter-spacing:1px}.cover h1{font-size:34px;line-height:1.4;margin-bottom:12px;color:var(--ink)}.cover p{color:#797579;font-size:13px;max-width:none}.cover small{display:block;color:#797579;margin-top:14px;font-size:10px}
.panel{padding:23px 20px;background:#fff;border-color:#eee5e7;border-radius:9px}.panel h2{font-size:23px}.panel p{font-size:13px}.quote{font-size:18px;color:#76565e;border-color:#c6a5ac}.callout{background:#faf5f6;color:#816b71;border-radius:6px;font-size:12px}.notice{font-size:12px}.row{gap:10px}.field{font-size:12px}.field input,.field select,.field textarea{border-color:#e3dadd;background:#fff;font-size:14px}.scene{height:290px}.label{font-size:10px;color:#8c7880;border-color:#e9dfe2}
.report-layout{display:block}.report-nav{position:static;display:flex;overflow:auto;gap:6px;margin-bottom:25px}.report-nav a{white-space:nowrap;border:1px solid var(--line);border-radius:4px;padding:10px;font-size:11px}.report-nav a.active{background:#fbf0f2}.report-body h1{font-size:30px}.report-body .art{height:300px}.chapter-placeholder{background:#fcfafb;border-color:#e1d4d8}.empty{background:#fcf6f7}.library-item{gap:12px}.library-item h3{font-size:14px}.library-item .btn{padding:8px 10px;font-size:10px;white-space:nowrap}
.stat-row{grid-template-columns:repeat(2,1fr);gap:12px}.stat{background:#fcf4f5;padding:20px;border-radius:7px}.editor-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.asset-editor{padding:10px;background:#fff;border-radius:7px}.asset-editor .art{height:175px}.editor-toolbar{gap:8px}.editor-toolbar .btn{font-size:11px;padding:12px}.helper-grid{grid-template-columns:1fr}.helper-grid a{background:#fcf8f9;border-color:#eee5e7;border-radius:7px}.character-detail{display:block;margin-bottom:35px}.character-detail>.art{width:240px;max-width:100%;height:310px;margin:0 auto 25px}.character-detail>div{text-align:center}.character-detail h1{font-size:32px}.character-detail .quote{text-align:left}
@media(max-width:360px){.shell,.page,.page.wide{padding-left:16px;padding-right:16px}.hero,.cover{margin-left:-16px;margin-right:-16px}.hero h1{font-size:27px}.hero-copy,.cover-copy{padding-left:20px;padding-right:20px}.hero .art{height:300px}.cover>.art{height:360px}.category-bar{margin-left:-16px;margin-right:-16px}.card-bottom{flex-wrap:wrap}.steps{gap:6px;font-size:8px}.header{padding:0 16px}.brand{font-size:16px}.section-head h2{font-size:21px}}