:root {
  --ink: #292826; --muted: #89837a; --paper: #f8f6f1; --line: #e9e4dc;
  --accent: #3190c3; --title-color: #3190c3; --author-color: #3190c3; --mark-color: #3190c3; --serif: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; color: var(--ink); background: #f7f5f0; font-family: var(--sans); }
.app-shell { max-width: 1220px; margin: 0 auto; padding: 0 44px 38px; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border: 1px solid #35332f; display: grid; place-items: center; font: 600 19px var(--serif); }
.brand strong { display: block; font: 600 17px var(--serif); letter-spacing: .08em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .16em; }
.sample-gallery { padding: 32px 0 46px; overflow: hidden; }
.sample-window { position: relative; left: 50%; width: 100vw; margin-left: 0; padding: 20px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%); }
.sample-track { display: flex; width: max-content; gap: 18px; animation: sample-scroll 48s linear infinite; }
.sample-cover { position: relative; flex: 0 0 138px; height: 188px; display: flex; flex-direction: column; align-items: flex-start; padding: 13px 10px 10px; overflow: hidden; color: #111; box-shadow: 7px 10px 16px rgba(50,40,30,.12); transform: rotate(-1deg); }
.sample-cover:nth-child(even) { transform: rotate(1deg); }
.sample-cover b { padding: 3px 6px 5px; font: 500 21px/1.25 var(--serif); background: rgba(255,255,255,.38); }
.sample-cover small { margin-top: 6px; padding: 3px 6px; font: 10px var(--serif); background: rgba(255,255,255,.38); }
.sample-cover i { font-style: normal; }
.sample-photo { position: absolute; top: 82px; left: 10px; width: 64px; height: 64px; border: 3px solid rgba(255,255,255,.65); background: linear-gradient(145deg, rgba(255,255,255,.82) 0 22%, transparent 23% 55%, rgba(20,50,50,.45) 56%), linear-gradient(35deg, #c9a87c, #6f8e82 48%, #d8c7a7); box-shadow: 0 2px 5px rgba(40,30,20,.18); }
.sample-cover em { position: absolute; bottom: 9px; left: 10px; font: 8px var(--sans); font-style: normal; }
.sample-blue { background: #5b91b2; } .sample-red { background: #c96b61; }
.sample-green { background: #82a278; } .sample-yellow { background: #d0b45f; }
.sample-purple { background: #9a7fa0; }
@keyframes sample-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.workspace { display: grid; grid-template-columns: minmax(330px, 415px) 1fr; gap: 65px; align-items: start; }
.workspace > * { min-width: 0; }
.editor-panel { padding-right: 36px; border-right: 1px solid var(--line); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 35px; }
.panel-heading > div { display: flex; gap: 13px; align-items: baseline; }
.section-number { color: var(--accent); font: 12px var(--serif); letter-spacing: .1em; }
h2 { margin: 0; font: 600 19px var(--serif); letter-spacing: .1em; }
.live-label { color: var(--accent); font-size: 9px; letter-spacing: .18em; }
.live-label i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--accent); }
.field { position: relative; display: block; margin-bottom: 27px; }
.field > span, legend { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
input[type=text], textarea { width: 100%; padding: 10px 42px 10px 0; border: 0; border-bottom: 1px solid #d7d1c8; outline: none; color: var(--ink); background: transparent; font: 14px var(--serif); }
input[type=text]:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: #c4beb5; }
.field textarea { min-height: 142px; resize: vertical; line-height: 1.65; }
#title-input { min-height: 58px; height: 58px; overflow-y: auto; }
#body-input { min-height: 220px; overflow-y: auto; }
.character-count { position: absolute; right: 0; bottom: 8px; color: #b5aea5; font-size: 9px; }
.character-count b { font-weight: 400; }
.clear-field { position: absolute; top: 25px; right: 0; padding: 3px 0; border: 0; color: var(--muted); background: transparent; font: 10px var(--sans); cursor: pointer; }
.clear-field:hover, .clear-field:focus-visible { color: var(--accent); }
.upload-area { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #cdc6bc; cursor: pointer; transition: .2s; }
.upload-area:hover { border-color: var(--accent); background: #f5f0e9; }
.upload-area input { display: none; }
.upload-icon { color: var(--accent); font-size: 25px; line-height: 1; }
.upload-area strong { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.upload-area small { margin-top: 5px; color: #aaa39a; font-size: 9px; }
.remove-image { padding: 5px 0; border: 0; color: var(--accent); background: none; font: 10px var(--sans); cursor: pointer; }
.choice-group { padding: 0; margin: 28px 0 0; border: 0; }
.choice-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice { padding: 10px 7px; border: 1px solid #d7d1c8; color: #777169; background: transparent; font: 11px var(--sans); cursor: pointer; }
.choice.is-selected { border-color: var(--accent); color: var(--accent); background: #f8eee9; }
.choice-group + .choice-group { margin-top: 21px; }
.cover-colors { display: flex; justify-content: space-between; align-items: center; }
.cover-colors legend { margin: 0; }
.color-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.palette { padding: 9px 4px; border: 1px solid #d7d1c8; color: #777169; background: transparent; font: 10px var(--sans); cursor: pointer; }
.palette::before { content: ""; display: block; width: 18px; height: 18px; margin: 0 auto 5px; border-radius: 50%; background: var(--palette-color); }
.palette:nth-child(1) { --palette-color: #5b91b2; } .palette:nth-child(2) { --palette-color: #c96b61; }
.palette:nth-child(3) { --palette-color: #82a278; } .palette:nth-child(4) { --palette-color: #d0b45f; } .palette:nth-child(5) { --palette-color: #9a7fa0; }
.palette.is-selected { border-color: var(--accent); color: var(--accent); background: #f8eee9; }
.swatch { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch); cursor: pointer; outline: 1px solid transparent; outline-offset: 3px; }
.swatch.is-selected { outline-color: var(--swatch); }
.preview-panel { min-width: 0; }
.preview-heading { margin-bottom: 22px; }
.preview-size { color: #a29b91; font-size: 10px; letter-spacing: .1em; }
.book-stage { min-height: 575px; display: grid; place-items: center; padding: 38px; position: relative; overflow: hidden; background: #eeebe4; }
.book-stage.shelf { background: #eeebe4; }
.book-stage.shelf::before, .book-stage.shelf::after { display: none; }
.book-stage.desk { background: #eeebe4; }
.book-stage.desk::after { display: none; }
.cover { position: relative; z-index: 1; width: min(385px, 84%); aspect-ratio: .705; overflow: hidden; padding: 0; color: #080808; background: #f7f7f5; box-shadow: 12px 16px 0 rgba(70,48,34,.1), 18px 24px 32px rgba(55,45,35,.18); transform: perspective(1000px) rotateY(-1.2deg) rotateZ(-.35deg); transform-origin: 50% 50%; container-type: inline-size; }
.cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,.18), transparent 16%, transparent 82%, rgba(40,25,15,.08)); }
.title-art { display: flex; flex-direction: column; align-items: flex-start; width: 86%; max-width: 86%; margin: 5.5% 0 0 4.5%; color: #050505; font: 500 38px/1.08 var(--serif); letter-spacing: -.04em; }
.title-art > span { display: block; width: 100%; max-width: 100%; white-space: normal; }
.title-art > span > span { display: block; flex: 0 0 auto; width: max-content; padding: 1.2% 3.5% 2.8%; background: var(--title-color); white-space: nowrap; }
.title-art.is-empty > span > span { background: transparent; }
.title-art.is-empty { min-height: 2.16em; }
.author-art { width: 86%; max-height: calc(2 * 1.15em + 2.4%); margin: 2.5% 0 0 4.5%; overflow: hidden; color: #050505; font: 500 clamp(14px, 4.2cqw, 19px)/1.15 var(--serif); }
.author-art span { display: inline; padding: 1.2% 4%; background: var(--author-color); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.author-art span:empty { padding: 0; background: transparent; }
.copy-art { position: absolute; top: 34%; left: 4%; width: 86%; padding-right: 6%; font: 700 clamp(9px, 2.85cqw, 12px)/1.65 var(--sans); letter-spacing: -.03em; }
.copy-art::after { content: ""; display: table; clear: both; }
.copy-art > div:last-child { white-space: normal; }
.photo-art { float: left; width: 46%; aspect-ratio: 1; margin: 3.3em 4% 0 1%; overflow: hidden; background: #f7f7f5; }
.cover.landscape .photo-art { aspect-ratio: 1.6; width: 50%; }
.cover.square .photo-art { aspect-ratio: 1; width: 46%; }
.cover.landscape .copy-art { top: 36%; font-size: clamp(9px, 3cqw, 13px); }
.cover.square .copy-art { top: 35%; font-size: clamp(9px, 3cqw, 13px); }
.cover.landscape .title-art, .cover.square .title-art { font-size: clamp(20px, 10cqw, 38px); }
.image-placeholder { height: 100%; display: grid; place-items: center; text-align: center; font: 13px/2 var(--serif); letter-spacing: .2em; opacity: .7; }
#preview-image { display: none; width: 100%; height: 100%; object-fit: cover; }
.credit-art { position: absolute; bottom: 4%; left: 5%; display: flex; align-items: center; gap: 9px; color: #35312c; font: 700 clamp(11px, 3.2cqw, 15px)/1.3 var(--serif); letter-spacing: 0; }
.credit-art b, .credit-art strong { display: block; }
.credit-art b { font: inherit; }
.credit-art strong { width: max-content; margin-top: 3px; padding: 1px 5px; color: #35312c; background: #e7d1a2; font: inherit; letter-spacing: inherit; }
.avatar-art { display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid #111; border-radius: 50%; color: #111; background: var(--mark-color); font-size: 27px; }
.download-area { padding-top: 25px; text-align: center; }
.download-area p { margin: 0 0 15px; color: #8c857c; font: 12px var(--serif); letter-spacing: .06em; }
.download-area p span { color: var(--accent); margin-right: 5px; }
.download-button { max-width: 100%; padding: 14px 25px; border: 0; color: #fff; background: var(--accent); font: 500 12px var(--sans); letter-spacing: .1em; cursor: pointer; transition: .2s; }
.download-button:hover { filter: brightness(.88); transform: translateY(-1px); }
.download-button span { margin-right: 9px; font-size: 17px; vertical-align: -1px; }
.download-area small { display: block; margin-top: 12px; color: #aaa39a; font-size: 9px; }
footer { margin-top: 66px; color: #aaa39a; text-align: center; font: 10px var(--serif); letter-spacing: .12em; }
footer span { margin: 0 8px; color: var(--accent); }
@media (max-width: 800px) {
  .app-shell { padding: 0 22px 30px; } .topbar { height: 75px; }
  .sample-gallery { padding: 26px 0 36px; } .workspace { grid-template-columns: 1fr; gap: 48px; }
  .editor-panel { padding: 0; border: 0; } .book-stage { min-height: 470px; padding: 20px 10px; }
  .cover { width: min(340px, 82%); }
}
@media (max-width: 480px) {
  .app-shell { padding-right: 16px; padding-left: 16px; }
  .choice-options { gap: 5px; }
  .choice { padding-right: 4px; padding-left: 4px; }
  .color-options { gap: 4px; }
  .palette { padding-right: 2px; padding-left: 2px; font-size: 9px; }
  .book-stage { padding-right: 6px; padding-left: 6px; }
}