/* Focused library, editor and launch-plan improvements. Existing product rules stay intact. */
.library-section + .library-section {margin-top:38px}
.library-section h2 {display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:16px;letter-spacing:-.03em}
.library-section h2>span {font-size:12px;font-weight:500;color:#666;background:#f0f0ed;border-radius:20px;padding:3px 8px}
.library-section .cover-grid {grid-template-columns:repeat(auto-fill,minmax(180px,240px));gap:26px}
.draft-section {padding-top:26px;border-top:1px solid #e5e5e2}
.draft-section:first-child {padding-top:0;border-top:0}
.draft-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.draft-card {display:flex;align-items:center;min-width:0;padding:10px 12px;border:1px solid #e6e6e3;border-radius:9px;background:#fafaf8}
.draft-link {display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:54px;text-decoration:none;color:inherit}
.draft-symbol {display:grid;place-items:center;flex:none;width:42px;height:48px;border:1px solid #e2e2dd;border-radius:5px;background:#f0f0eb;color:#686b64}
.draft-copy {display:grid;gap:6px;min-width:0}
.draft-copy strong {font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-copy small {font-size:12px;color:#656762}
.draft-card .icon-button {flex:none;margin-left:8px;min-width:36px;min-height:40px}
.draft-card:focus-within,.draft-card:hover {border-color:#afb4a8;background:#f4f5f0}
.composer .panel-heading {font-size:18px;font-weight:650;margin-bottom:14px}
.composer .field-label,.composer .field-head>label {font-size:13px;color:#262923;font-weight:600}
.composer .optional-label,.composer .detail-section summary small {font-size:12px;color:#686c64;font-weight:400}
.composer .detail-section summary {font-size:13px;color:#4e534b;min-height:48px}
.composer :is(textarea,input,select) {font-size:14px;line-height:1.65}
.composer :is(textarea,input)::placeholder {color:#73786f;opacity:1}
.composer .chip {min-height:36px;font-size:12px;color:#484d44;padding:8px 12px}
.composer .chip.active {color:#fff;background:#242923;border-color:#242923}
.composer .char-count,.composer .field-help {font-size:12px;color:#686d64}
.composer .reference-drop {min-height:44px;font-size:13px;color:#43483f}
.composer .composer .composer-foot {padding:16px 24px}
.composer #run-button {min-height:50px;font-size:14px}
.composer .run-credit {font-size:13px}
.run-readiness {margin:10px 0 0;font-size:12px;line-height:1.6;color:#4e5647}
.run-readiness[hidden] {display:none}
.composer .cost-note {margin-top:7px;font-size:11px;line-height:1.6;color:#666c60}
.editor-bar .save-state,.viewer-title {font-size:12px;color:#62675e}
.mobile-preview-switch {display:none}
.subscription-v3 .plan-grid.launch-plans {grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:820px}
.subscription-v3 .launch-plans .plan-card {padding:28px}
.cover-login-card .cover-login-status {min-height:24px;margin-top:16px;font-size:13px;line-height:1.65;color:#394333;overflow-wrap:anywhere}
.cover-login-card .cover-login-retry {width:100%;min-height:44px;margin-top:8px}
@media(max-width:1000px) {.draft-grid{grid-template-columns:1fr}}
@media(max-width:700px) {
 .library-section .cover-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .library-section h2 {font-size:15px}
 .draft-card {padding:8px 10px}.draft-copy strong{font-size:13px}
 .editor-bar .mobile-preview-switch {display:flex;min-height:44px;padding:8px 10px;flex:none;font-size:12px}
 .editor-bar .crumb {min-width:0;flex:1}.editor-bar .project-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;min-height:44px;line-height:44px}
 .editor-bar {height:calc(58px + env(safe-area-inset-top,0px));gap:8px;padding-left:12px;padding-right:12px}
 .editor-bar #download-button {font-size:12px;min-height:44px;padding:8px 10px}
 .editor {height:calc(100dvh - 58px - env(safe-area-inset-top,0px));min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,38dvh) minmax(0,1fr);overflow:hidden}
 .editor:has(.composer.collapsed) {grid-template-rows:minmax(0,1fr) auto}
 .editor.is-empty {grid-template-rows:minmax(130px,23dvh) minmax(0,1fr)}
 .editor .work-area {order:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
 .editor .viewer-bar {flex:none;height:48px;min-height:48px}
 .editor .viewport {flex:1;min-height:0!important;height:auto;padding:8px 12px}
 .editor .canvas-dimensions {display:none}
 .editor .decision {min-height:36px;padding:8px 12px;flex:none}
 .editor .history {flex:none;padding:0}
 .editor .history-head {min-height:44px;height:44px;margin:0;padding:7px 12px}
 .editor .history.is-open .history-strip {max-height:90px;overflow:auto}
 .editor .composer {padding-bottom:0;order:1;min-height:0;height:100%;display:flex;flex-direction:column;border-top:1px solid #dfe2da;overflow:hidden}
 .editor .composer.collapsed {height:auto}
 .editor .tool-tabs {flex:none;min-height:46px;background:white}
 .editor .tool-tab {font-size:13px;min-height:44px}
 .editor .composer-body {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 22px}
 .editor .composer-foot {flex:none;padding:10px 18px max(10px,env(safe-area-inset-bottom));background:white;border-top:1px solid #e6e8e1}
 .editor .composer.collapsed :is(.composer-body,.composer-foot) {display:none}
 .editor .composer :is(textarea,input,select) {font-size:16px}
 .editor .panel-heading {font-size:17px;margin-bottom:10px}
 .editor .scene-input {min-height:110px}
 .editor .run-readiness {font-size:11px;margin-top:6px}
 .editor .cost-note {font-size:10px;margin-top:4px}
 .editor .composer-foot[hidden] {display:none}
 .subscription-v3 .plan-grid.launch-plans {grid-template-columns:minmax(0,1fr)}
 .subscription-v3 .launch-plans .plan-card {padding:24px}
}
@media(max-width:360px) {.editor-bar{gap:5px}.editor-bar .mobile-preview-switch{padding:7px}.editor-bar #download-button{padding:7px}}

@media(min-width:701px){.subscription-v3 .launch-plans .b-free{grid-column:auto}}

.sidebar-credit-label {display:none}
@media(min-width:701px) {
 .sidebar-folded .sidebar-wallet {padding:0;background:none;border:0;min-height:36px}
 .sidebar-folded .sidebar-credits {justify-content:center;max-width:100%;min-height:36px;padding:4px 1px;white-space:normal;overflow:visible}
 .sidebar-folded .sidebar-credits strong {max-width:100%;font-size:13px;line-height:1.25;letter-spacing:-.3px;overflow-wrap:anywhere;text-align:center;color:#fff}
 .sidebar-folded .sidebar-credit-unit {display:none}
 .sidebar-folded .sidebar-credit-label {display:none}
 .sidebar-folded .sidebar-credits:focus-visible {outline:2px solid #d8e8cb;outline-offset:2px;border-radius:6px}
}

/* 2026-10-01 UX 검토 반영 */
/* 작은 글씨 가독성 */
.decision .quiet {font-size:12px}
.history-head {font-size:12px}
.history-head .count {font-size:11px}
.history-item {font-size:10px}
.brush-options {font-size:12px;color:#62675e}
.viewer-tools .zoom-label {font-size:11px}
.title-card-name {font-size:12px}
.title-card>small {font-size:11px;color:#62675e}

/* 크레딧을 아직 모를 때 '— C' 대신 '크레딧 확인 전' */
.sidebar-credits:has(.sidebar-credit-unknown) .sidebar-credit-label {display:inline;margin-right:5px}
.sidebar-credits .sidebar-credit-unknown {font-size:12px;font-weight:500;color:#c9d0c6}
@media(min-width:701px){.sidebar-folded .sidebar-credits .sidebar-credit-unknown{font-size:11px}}

/* 빈 목록: 예시 장면으로 바로 시작 */
.empty-start {padding:8px 0}
.empty-start h2 {font-size:18px;font-weight:650;margin:0 0 6px}
.empty-start p {font-size:13px;color:#62675e;margin:0 0 18px}
.empty-starters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:820px;margin-bottom:20px}
.empty-starter {display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;min-height:128px;border:1px solid #e4e5df;border-radius:10px;background:#fff;transition:border-color .15s,background .15s}
.empty-starter:hover {border-color:#9da39a;background:#fafaf8}
.empty-starter-go {display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:6px;font-size:11px;color:#6b7066}
.empty-starter:hover .empty-starter-go {color:#171717}
.library-empty .library-top {margin-bottom:18px}
.empty-starter .starter-genre {font-size:11px;color:#4f554b;background:#f1f2ed;border-radius:4px;padding:2px 6px}
.empty-starter strong {font-size:14px;font-weight:600;color:#1f231d}
.empty-starter small {font-size:12px;color:#62675e}
.empty-start>.primary {display:inline-flex;align-items:center;gap:6px;min-height:44px}
@media(max-width:1000px) {.empty-starters{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:700px) {
 .empty-starters {grid-template-columns:minmax(0,1fr)}
 .empty-starter {min-height:0;padding:14px}
 .viewer-tools .zoom-label,.editor .viewer-title-text {display:none}
 /* 수정하기: 칠할 그림을 크게. 반복 제목, '현재 표지' 줄, 기록 줄은 숨기고 도구는 한 줄로 */
 .editor.panel-edit {grid-template-rows:minmax(0,54dvh) minmax(0,1fr)}
 .editor.panel-edit .decision:not(:has(button)),.editor.panel-edit:not(:has(.decision button)) .history,.editor.panel-edit .panel-heading {display:none}
 .editor.panel-edit .edit-tools {margin-bottom:16px}
 .editor.panel-edit .edit-tool {flex-direction:row;min-height:44px;padding:8px 4px;font-size:12px}
}
/* 알림은 화면 위쪽에 띄워 아래 실행 버튼을 가리지 않게 (편집 패널이 아래에 붙는 폭까지) */
@media(max-width:900px) {#toast {top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);font-size:13px}.editor .tool-tab {margin-right:0}}
/* 손가락으로 누르는 영역 44px 이상: 휴대폰 폭이거나 터치 기기 */
@media(max-width:700px),(pointer:coarse) {
 .mobile-menu {width:44px;height:44px}
 .viewer-tools .icon-button,.brush-options .icon-button {width:44px;height:44px}
 .brush-target,.history-toggle,.composer .chip,.composer .composer .field-head button {min-height:44px}
 .editor .composer input[type=range] {min-height:44px}
 .title-swatches {flex-wrap:wrap}
 .title-swatches button {flex:none;width:44px;height:44px;padding:10px}
 .composer .field-head button {min-width:44px}
 .editor-bar .project-name,.editor-bar .save-state,.editor-bar .primary,.record-details summary,.review-record-tools .quiet {min-height:44px}
 .title-position button,.title-preview-tools button,.title-more summary {min-height:44px}
}

/* 구도: 세로 표지 안에서 주인공이 어디에 어떤 크기로 놓이는지 보여 주는 타일. frame-soft는 뒤 배경, frame-motif는 주인공. 고르면 검정으로 반전 */
.framing-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.framing-choice {display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:4px 0;border:0;border-radius:6px;background:#fff;color:#6f6f6f;font-size:10px;line-height:1.25;white-space:normal;word-break:keep-all}
.framing-choice svg {width:100%;max-width:46px;height:auto;aspect-ratio:48/72}
.framing-choice .frame-bg {fill:#f3f3f1;stroke:#dcdcd8;stroke-width:1.5;transition:fill .15s,stroke .15s}
.framing-choice .frame-motif {fill:#9a9a97}
.framing-choice .frame-soft {fill:#cdcdc8}
.framing-choice:hover {color:#333}
.framing-choice:hover .frame-bg {fill:#e9e9e6;stroke:#cfcfca}
.framing-choice.active {color:#171717;font-weight:600}
.framing-choice.active .frame-bg {fill:#202020;stroke:#202020}
.framing-choice.active .frame-motif {fill:#fff}
.framing-choice.active .frame-soft {fill:#6e6e6b}
@media(max-width:700px) {.framing-choice{font-size:11px}.framing-choice svg{max-width:52px}}
/* 빈 미리보기: 장식 아이콘 대신 「내 그림 가져오기」. 글자 수·비용 안내는 필요할 때만 */
.empty-import {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:120px;min-height:86px;margin:0 auto;border:1px dashed #d2d2cd;border-radius:4px;background:#fff;color:#8b8b88;font-size:11px;line-height:1.3}
.empty-import:hover {border-color:#6f6f6b;color:#171717}
.cost-note[hidden] {display:none}
/* 휴대폰: 빈 미리보기 종이가 작아(86px 폭) 테두리 없이 종이 안에 맞춤 */
@media(max-width:700px) {.empty-cover{padding:6px}.empty-import{width:100%;min-height:0;padding:8px 2px;gap:5px;border:0;background:transparent;font-size:10px;word-break:keep-all}}

/* 보류한 시안은 번호를 유지하고 썸네일에 표식만 붙인다 */
.history-item .thumb-held{position:absolute;left:-3px;top:-4px;font-size:8px;line-height:1;padding:2px 4px;border-radius:7px;background:#222;color:#fff}
.canvas-tools {display:none}
@media(max-width:700px) {.canvas-tools:not([hidden]) {display:flex;position:sticky;top:0;z-index:6;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.94);border-bottom:1px solid #e6e6e3}.canvas-tools .brush-target {flex:1;min-height:40px}.canvas-tools .icon-button {min-width:44px;min-height:40px}}
.pro-options {margin-top:24px}
.pro-options .genre-chips:last-child {margin-bottom:0}
/* 수정하기: 무엇을 칠하는지(고칠/남길)는 도구가 정하고, 붓은 칠하기/지우기 두 가지만 */
.brush-purpose {display:flex;align-items:center;gap:7px}
.brush-purpose i {width:10px;height:10px;border-radius:50%;background:#6a73e2;flex:none}
.brush-purpose.protect i {background:#e0a448}
.brush-targets .brush-target {display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;min-height:40px}
.brush-head {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.brush-head .field-label {margin:0}
.brush-actions {display:flex;gap:6px;margin-left:auto}
.brush-actions .icon-button {width:34px;height:34px;border:1px solid #e3e3e0;color:#555}
.brush-actions .icon-button:hover {color:#171717;border-color:#bdbdb8}
@media(max-width:700px),(pointer:coarse) {.brush-actions .icon-button{width:44px;height:44px}}
/* 붓 크기 원: 마우스로 칠할 때 실제 붓 폭을 보여 준다 */
#brush-ring {position:fixed;z-index:40;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid #6a73e2;box-shadow:0 0 0 1px #ffffffcc}
#brush-ring.protect {border-color:#e0a448}
#brush-ring.remove {border-style:dashed;border-color:#555}
#mask-canvas {cursor:none}
@media(pointer:coarse) {#mask-canvas{cursor:auto}}
/* 휴대폰: 칠하기·칠 지우기·되돌리기·모두 지우기는 그림 위 도구줄에만(아래 패널에 같은 버튼을 두 벌 두지 않음) */
@media(max-width:700px) {.editor .brush-targets,.editor .brush-head .brush-actions{display:none}}
/* 로그인 창: 버튼이 준비되기 전에도 같은 크기의 자리를 보여 주고, 준비되면 부드럽게 나타낸다 */
#cover-google-button:empty {background:#f3f3f1;border-radius:4px}
#cover-google-button > * {animation:login-button-in .18s ease-out}
@keyframes login-button-in {from{opacity:0}to{opacity:1}}
.cover-login-card:has(#cover-login-retry:not([hidden])) #cover-google-button:empty {background:none}
.cover-title-field{margin-bottom:20px}
.title-box {border:1px solid #dedede;border-radius:9px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.title-box:focus-within {border-color:#555;box-shadow:0 0 0 3px #17171708}
.title-box input {display:block;width:100%;min-width:0;border:0;background:transparent;color:#202020;font:inherit}
.title-box input:focus {box-shadow:none}
.title-box input::placeholder {color:#a3a3a3;font-weight:400}
.title-box .title-box-main {padding:12px;font-size:13px;font-weight:600}
.title-box-style {display:flex;align-items:center;gap:10px;padding:0 12px;border-top:1px solid #efefef}
.title-box-style label {flex-shrink:0;font-size:11px;color:#8a8a8a}
.title-box .title-box-style input {padding:10px 0;font-size:12px}