:root {
  color-scheme: light;
  --ink: #302a38;
  --muted: #625a68;
  --paper: #fff8ea;
  --white: #fff;
  --plum: #70569a;
  --plum-dark: #503d71;
  --gold: #8d6512;
  --blue: #365f83;
  --green: #37684f;
  --rose: #87464c;
  --line: #ded5c8;
  --shadow: 0 10px 28px rgb(48 42 56 / 8%);
  font-family: "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.55; }
button, select, input { font: inherit; }
button, .button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: .45rem; padding: .7rem 1rem; border: 2px solid var(--plum-dark); border-radius: 16px; background: var(--plum-dark); color: var(--white); font-weight: 800; text-decoration: none; cursor: pointer; }
button:hover, .button:hover { background: #3f315a; }
button.secondary, .button.secondary { border-color: #b5a5c9; background: white; color: var(--plum-dark); }
button.soft { border-color: #d8c9af; background: #fff9ef; color: #594328; }
button.warn { border-color: #803e3b; background: #803e3b; }
button:disabled { opacity: .52; cursor: not-allowed; }
button[aria-pressed="true"] { outline: 3px solid #e8d8af; outline-offset: 1px; background: #f1e8f8; color: var(--plum-dark); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 4px solid #d38c20; outline-offset: 3px; }
a { color: #46376a; text-underline-offset: .2em; }
.skip-link { position: fixed; z-index: 50; top: 12px; left: 12px; transform: translateY(-150%); padding: .7rem 1rem; border-radius: 12px; background: white; }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem max(16px, calc((100vw - 1240px) / 2)); border-bottom: 1px solid var(--line); background: rgb(255 252 246 / 97%); }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 900; line-height: 1.15; text-decoration: none; white-space: nowrap; }
.brand small { display: block; margin-top: .2rem; color: var(--muted); font-size: .72rem; font-weight: 600; }
.brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; background: var(--plum); color: white; font-size: 1.65rem; }
.site-header nav, .site-footer nav { display: flex; align-items: center; gap: .3rem; }
.site-header nav a { display: inline-flex; min-height: 44px; align-items: center; padding: .45rem .65rem; border-radius: 12px; color: var(--ink); font-weight: 750; text-decoration: none; white-space: nowrap; }
.site-header nav a:hover { background: #f1eaf7; }
main { min-height: calc(100vh - 160px); }
#app { width: min(1240px, 100%); margin: 0 auto; padding: 1rem 16px 3rem; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(16px, calc((100vw - 1240px) / 2)); background: #f0e9f5; color: var(--muted); font-size: .9rem; }
.site-footer p { margin: 0; }
.site-footer nav a { display: inline-flex; min-height: 44px; align-items: center; padding: .4rem .6rem; }
.review-banner { margin: .35rem 0 .7rem; padding: .8rem 1rem; border: 1px solid #e5cf9f; border-left: 6px solid #a97b26; border-radius: 14px; background: #fff7e7; color: #5b451f; }
.storage-banner, .hint { margin: .5rem 0; padding: .7rem .9rem; border-radius: 12px; background: #f0ebf6; color: #473a5b; }
.hint[data-kind="error"] { background: #fff0e9; color: #78371f; }
.hint[data-kind="success"] { background: #eaf5ed; color: #2b6243; }
.eyebrow { margin: 0; color: var(--plum-dark); font-size: 1rem; font-weight: 900; letter-spacing: .07em; }
.page-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin: .35rem 0 .75rem; }
.page-head h1 { margin: .1rem 0 0; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.2; letter-spacing: -.03em; }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(200px, .8fr); align-items: center; gap: 1rem; padding: clamp(1.2rem, 4vw, 2.7rem); overflow: hidden; border: 1px solid #ddd2e8; border-radius: 28px; background: linear-gradient(125deg, #eee8f6 0%, #f6efd9 56%, #e7f0e8 100%); }
.hero h2 { max-width: 17ch; margin: .45rem 0 .7rem; font-size: clamp(2rem, 5vw, 3.9rem); line-height: 1.08; letter-spacing: -.035em; }
.hero p { max-width: 58ch; color: #494352; font-size: 1.08rem; }
.hero-visual { display: grid; min-height: 210px; place-items: center; }
.hero-book { display: grid; width: min(220px, 75vw); aspect-ratio: .78; place-content: center; gap: .5rem; padding: 1rem; transform: rotate(3deg); border: 9px solid #e4d9ed; border-radius: 22px 28px 28px 18px; background: #fffdf8; box-shadow: var(--shadow); text-align: center; }
.hero-book strong { font-size: 1.3rem; }
.hero-book span { color: var(--plum-dark); font-size: 4.5rem; }
.panel { margin: .9rem 0; padding: clamp(1rem, 2.4vw, 1.4rem); border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 5px 18px rgb(48 42 56 / 4%); }
.panel h2, .panel h3 { margin-top: 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 .65rem; }
.section-heading h2 { margin: .2rem 0; font-size: clamp(1.25rem, 3vw, 1.8rem); }
.section-heading p { margin: .2rem 0; color: var(--muted); }
.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.activity-card { display: flex; min-height: 170px; flex-direction: column; align-items: start; gap: .5rem; padding: 1rem; border: 1px solid #d8cfdf; border-radius: 19px; background: white; color: var(--ink); text-align: left; text-decoration: none; }
.activity-card:hover { border-color: var(--plum); box-shadow: var(--shadow); }
.activity-card .icon { color: var(--plum); font-size: 2.2rem; }
.activity-card strong { font-size: 1.12rem; }
.activity-card > span:last-child { color: var(--muted); }
.pill { display: inline-flex; align-items: center; padding: .18rem .55rem; border-radius: 999px; background: #efeaf5; color: #493a64; font-size: .78rem; font-weight: 850; white-space: nowrap; }
.toolbar, .choice-row, .pager, .page-tabs, .category-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.toolbar { margin-top: .8rem; }
.toolbar button { min-height: 48px; }
.page-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: .7rem 0; }
.page-tab { display: grid; min-width: 0; min-height: 88px; align-content: space-between; justify-items: start; gap: .3rem; padding: .55rem .65rem; border-color: #d4c9db; background: linear-gradient(145deg, #fff 0%, #fbf8fd 100%); color: var(--ink); text-align: left; }
.page-tab:hover { border-color: var(--plum); background: #f2edf7; }
.page-tab[aria-pressed="true"] { border-color: var(--plum-dark); box-shadow: inset 0 -4px 0 var(--plum-dark); }
.page-tab-number { color: var(--plum-dark); font-size: .78rem; font-weight: 900; }
.page-tab-stage { font-size: .9rem; line-height: 1.3; }
.page-tab-state { color: var(--muted); font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.page-tab-state.has-sentence { color: var(--green); }
.builder-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: .9rem; align-items: start; }
.book-page { position: relative; display: flex; min-height: 380px; flex-direction: column; align-items: center; justify-content: space-between; gap: .8rem; overflow: hidden; padding: 1rem; border: 7px solid #f2eadc; border-radius: 12px 26px 25px 12px; background: #fffdf8; box-shadow: 0 10px 22px rgb(48 42 56 / 10%); }
.page-scene { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.background-art.scene { display: block; width: 100%; height: 100%; opacity: .42; }
.book-page > :not(.page-scene) { position: relative; z-index: 1; }
.book-page[data-background="background-01"] { background-color: #fff2c8; }
.book-page[data-background="background-02"] { background-color: #e6f0df; }
.book-page[data-background="background-03"] { background-color: #d9eef5; }
.book-page[data-background="background-04"] { background-color: #f0e9f7; }
.book-page[data-background="background-05"] { background-color: #e1e7f7; }
.book-page[data-background="background-06"] { background-color: #f7efe1; }
.book-page[data-background="background-07"] { background-color: #e2f1df; }
.book-page[data-background="background-08"] { background-color: #edf1d9; }
.book-page[data-background="background-09"] { background-color: #f9e7d6; }
.book-page[data-background="background-10"] { background-color: #f0e9dd; }
.book-page[data-background="background-11"] { background-color: #e0f3eb; }
.book-page[data-background="background-12"] { background-color: #e8e5f7; }
.book-page[data-background="background-13"] { background-color: #e1eff0; }
.book-page[data-background="background-14"] { background-color: #f6e8d6; }
.book-page[data-background="background-15"] { background-color: #eff2d8; }
.book-page[data-background="background-16"] { background-color: #e9eef8; }
.book-page[data-background="background-17"] { background-color: #e5efdc; }
.book-page[data-background="background-18"] { background-color: #faecd2; }
.book-page[data-background="background-19"] { background-color: #e4f1e2; }
.book-page[data-background="background-20"] { background-color: #fff0d7; }
.page-header-line { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .7rem; }
.page-header-line h2 { margin: 0; font-size: 1.05rem; }
.page-number { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 75%); font-weight: 900; }
.art-row { display: flex; min-height: 140px; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap; }
.avatar-art { width: 138px; height: 138px; overflow: visible; filter: drop-shadow(0 7px 4px rgb(60 50 50 / 12%)); }
.avatar-label { margin: -.45rem 0 0; font-weight: 850; }
.page-sentence { width: min(100%, 38rem); margin: 0; padding: .85rem 1rem; border: 1px solid rgb(115 88 136 / 18%); border-radius: 16px; background: rgb(255 255 255 / 82%); font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 750; text-align: center; }
.page-sentence.is-empty { color: #65576f; font-weight: 600; }
.page-detail { width: min(100%, 38rem); margin: 0; padding: .65rem .8rem; border: 1px dashed rgb(80 61 113 / 34%); border-radius: 13px; background: rgb(255 255 255 / 67%); font-size: .94rem; text-align: center; }
.placed-props { display: flex; min-height: 62px; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.placed-prop { display: grid; justify-items: center; min-width: 60px; gap: .1rem; padding: .25rem .35rem; border-radius: 12px; background: rgb(255 255 255 / 70%); font-size: .77rem; font-weight: 750; }
.prop-art { display: block; width: 42px; height: 42px; flex: 0 0 auto; }
.empty-preview { color: #65576f; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .6rem 0; }
.choice-grid.story-character-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.background-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.background-choice { display: flex; min-height: 112px; flex-direction: column; align-items: stretch; justify-content: start; gap: .35rem; padding: .4rem; border-color: #d4c9db; background: white; color: var(--ink); font-size: .78rem; text-align: center; }
.background-choice[aria-pressed="true"] { border-color: var(--plum-dark); background: #f4eff8; }
.background-swatch { display: block; width: 100%; height: 62px; overflow: hidden; border: 1px solid rgb(48 42 56 / 16%); border-radius: 11px; background: #fff; }
.background-art.thumbnail { display: block; width: 100%; height: 100%; }
.background-swatch[data-background="background-01"] { background: #f7df9d; }
.background-swatch[data-background="background-02"] { background: #d8e9cf; }
.background-swatch[data-background="background-03"] { background: #cce4ef; }
.background-swatch[data-background="background-04"] { background: #e6ddf2; }
.background-swatch[data-background="background-05"] { background: #cdd8f0; }
.background-swatch[data-background="background-06"] { background: #f2e6d1; }
.background-swatch[data-background="background-07"] { background: #d9ecd9; }
.background-swatch[data-background="background-08"] { background: #dce9c9; }
.background-swatch[data-background="background-09"] { background: #f4d9bd; }
.background-swatch[data-background="background-10"] { background: #e8e0d4; }
.background-swatch[data-background="background-11"] { background: #cfe9e0; }
.background-swatch[data-background="background-12"] { background: #d8d8f0; }
.background-swatch[data-background="background-13"] { background: #d5e8ec; }
.background-swatch[data-background="background-14"] { background: #f1dfcb; }
.background-swatch[data-background="background-15"] { background: #e8edc9; }
.background-swatch[data-background="background-16"] { background: #e3e9f4; }
.background-swatch[data-background="background-17"] { background: #d8e6cb; }
.background-swatch[data-background="background-18"] { background: #f5dfbf; }
.background-swatch[data-background="background-19"] { background: #d9ebd8; }
.background-swatch[data-background="background-20"] { background: #f8e4c5; }
.choice-card { display: flex; min-height: 68px; align-items: center; justify-content: start; gap: .5rem; padding: .45rem .6rem; border-color: #d4c9db; background: #fff; color: var(--ink); text-align: left; font-size: .88rem; }
.choice-card[aria-pressed="true"] { border-color: var(--plum-dark); background: #f4eff8; }
.mini-avatar { width: 44px; height: 44px; flex: 0 0 auto; }
.sentence-groups { display: grid; gap: .75rem; }
.sentence-choice-group { padding: .75rem; border: 1px solid #ded5e5; border-radius: 16px; background: #fcfbfd; }
.sentence-opening { display: flex; align-items: start; gap: .5rem; margin: 0 0 .6rem; padding: .65rem .75rem; border-radius: 12px; background: #f2edf7; font-weight: 750; }
.sentence-opening-label, .sentence-continuation-label { flex: 0 0 auto; color: var(--plum-dark); font-size: .76rem; font-weight: 900; }
.sentence-opening-label { padding: .12rem .4rem; border-radius: 999px; background: white; }
.sentence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.sentence-card { min-height: 74px; justify-content: start; border-color: #d4c9db; background: white; color: var(--ink); text-align: left; font-size: .86rem; font-weight: 650; }
.sentence-card[aria-pressed="true"] { border-color: var(--plum-dark); background: #f4eff8; }
.sentence-continuation { display: flex; flex-direction: column; align-items: start; justify-content: center; gap: .25rem; }
.sentence-continuation-label { color: var(--muted); }
.prop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.prop-choice { min-height: 88px; flex-direction: column; gap: .18rem; padding: .35rem; border-color: #ded5c8; background: white; color: var(--ink); font-size: .78rem; }
.prop-choice[aria-pressed="true"] { border-color: var(--green); background: #eef6ef; }
.prop-choice .prop-art { width: 42px; height: 42px; }
.book-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.book-list-card { display: grid; align-content: start; gap: .35rem; min-height: 175px; padding: .85rem; border: 1px solid var(--line); border-radius: 17px; background: #fffdf8; }
.book-list-card h3 { margin: 0; }
.book-list-card p { margin: 0; color: var(--muted); }
label { font-weight: 800; }
select, input[type="number"] { min-height: 50px; padding: .5rem .7rem; border: 1px solid #aaa0b0; border-radius: 12px; background: white; color: var(--ink); }
.form-row { display: grid; grid-template-columns: minmax(130px, .45fr) minmax(0, 1fr); gap: .7rem; align-items: center; margin: .7rem 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; }
.content-note { color: var(--muted); font-size: .9rem; }
.stage-list { display: grid; gap: .25rem; padding-left: 1.3rem; }
.stage-list > li { padding: .4rem 0; }
.muted { color: var(--muted); }
.confirm-panel { padding: .9rem; border: 2px solid #b78934; border-radius: 14px; background: #fff8e8; }
.book-preview { display: grid; gap: 1rem; }
.preview-page { display: grid; min-height: 410px; align-content: center; justify-items: center; gap: 1rem; padding: 1.3rem; border: 1px solid #d8cfdf; border-radius: 20px; }
.preview-page .book-page { width: min(100%, 680px); margin: auto; }
.dialog-free { color: var(--muted); }
@media (max-width: 900px) {
  .builder-layout { grid-template-columns: 1fr; }
  .book-page { min-height: 340px; }
  .choice-grid.story-character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .activity-grid, .book-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .site-header { align-items: start; flex-direction: column; gap: .3rem; }
  .site-header nav { width: 100%; overflow-x: auto; }
  .site-header nav a { padding: .4rem .55rem; }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 140px; }
  .hero-book { width: 120px; border-width: 6px; }
  .hero-book span { font-size: 3rem; }
  .site-footer { align-items: start; flex-direction: column; }
  .activity-grid, .book-list { grid-template-columns: 1fr; }
  .activity-card { min-height: 125px; }
  .page-tab { min-height: 84px; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid.story-character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .background-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sentence-grid { grid-template-columns: 1fr; }
  .book-page { min-height: 330px; padding: .75rem; border-width: 5px; }
  .avatar-art { width: 112px; height: 112px; }
  .form-row { grid-template-columns: 1fr; gap: .25rem; }
  button, .button { min-height: 52px; }
}
@media (max-width: 360px) {
  #app { padding-right: 12px; padding-left: 12px; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-grid.story-character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .background-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .page-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body { background: white; color: #111; }
  .site-header, .site-footer, .review-banner, .storage-banner, .print-controls, .screen-only, .skip-link { display: none !important; }
  #app { width: auto; margin: 0; padding: 0; }
  .book-preview { display: block; }
  .preview-page { min-height: 0; height: 267mm; break-after: page; page-break-after: always; border: 0; border-radius: 0; }
  .preview-page:last-child { break-after: auto; page-break-after: auto; }
  .book-page { min-height: 230mm; width: 100%; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  button { display: none !important; }
}