.story-comic-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:24px;background:rgba(17,22,19,.72);backdrop-filter:blur(12px)}
.story-comic-modal.hidden,.story-comic-modal .hidden{display:none!important}.story-comic-shell{width:min(1180px,96vw);max-height:94vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(190,164,116,.32);border-radius:26px;background:#f7f1e7;box-shadow:0 28px 80px rgba(0,0,0,.24);color:#332f28}
.story-comic-shell>header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid rgba(112,96,72,.14)}.story-comic-shell header small{letter-spacing:.22em;color:#9b7446}.story-comic-shell h2{margin:5px 0 2px;font:500 30px/1.2 "Noto Serif SC","Source Han Serif SC",serif}.story-comic-shell header p{margin:0;color:#8a7b69}.story-comic-close{width:42px;height:42px;border:1px solid #d9cdbb;border-radius:50%;background:transparent;font-size:26px;color:#51483e;cursor:pointer}
.story-comic-body{min-height:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:26px;padding:24px 28px;overflow:auto}.story-comic-form{display:grid;gap:16px}.story-step{padding:17px;border:1px solid #ded2c0;border-radius:16px;background:rgba(255,255,255,.38)}.story-step>b{font-size:15px}.story-step>p{margin:5px 0 12px;color:#8a7c6a;font-size:13px}.story-upload{position:relative;min-height:104px;display:grid;place-items:center;overflow:hidden;border:1px dashed #b9a588;border-radius:13px;background:#fbf7ef;color:#6e593f;cursor:pointer}.story-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.story-upload img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}.story-upload img.visible{opacity:.92}.story-upload span{position:relative;z-index:1;padding:8px 12px;border-radius:10px;background:rgba(250,247,240,.9)}
.story-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}.story-options button{min-height:48px;padding:8px;border:1px solid #ded2c0;border-radius:12px;background:transparent;color:#50483d;cursor:pointer}.story-options button.active{border-color:#687257;background:#eef0e6;color:#35402f;box-shadow:0 5px 14px rgba(74,62,44,.05)}.story-step textarea{width:100%;min-height:98px;box-sizing:border-box;padding:13px;border:1px solid #d9cdbb;border-radius:12px;background:#fcf9f3;resize:vertical;font:14px/1.7 inherit;color:#39352f}.story-counter{text-align:right;color:#9b8b77;font-size:12px}.story-secondary{height:46px;border:1px solid #6e795e;border-radius:12px;background:#eef0e6;color:#43513b;font-weight:600;cursor:pointer}.story-secondary:disabled{opacity:.5}.story-panels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.story-panels article,.story-board-preview article{position:relative;padding:12px;border:1px solid #dfd3c1;border-radius:12px;background:#fbf7ef}.story-panels small,.story-board-preview small{display:block;color:#b08a55;letter-spacing:.16em}.story-panels b,.story-board-preview b{display:block;margin:4px 0}.story-panels p,.story-board-preview p{margin:0;color:#776b5d;font-size:12px;line-height:1.55}.story-panels em,.story-board-preview em{display:inline-block;margin-top:7px;color:#687257;font-size:11px;font-style:normal}.story-comic-error{min-height:20px;margin:0;color:#a65745;font-size:13px}
.story-comic-preview{position:sticky;top:0;align-self:start}.story-comic-paper{aspect-ratio:3/4;display:grid;padding:24px;border-radius:20px;background:#18231f;box-shadow:0 18px 44px rgba(36,42,35,.16)}.story-placeholder{display:grid;place-content:center;text-align:center;color:#d9c9ae}.story-placeholder>span{font:500 26px "Noto Serif SC",serif}.story-placeholder-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:220px;margin:20px auto}.story-placeholder-grid i{aspect-ratio:1;border:1px solid rgba(209,170,104,.42);border-radius:9px}.story-placeholder p{font-size:12px;color:#948a7a}.story-board-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px}.story-board-preview article{display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#f8f0e3,#d9c8ac)}.story-dual-note{display:flex;justify-content:space-between;padding:10px 8px;color:#897a68;font-size:12px}
.story-comic-shell>footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 28px calc(16px + env(safe-area-inset-bottom));border-top:1px solid rgba(112,96,72,.14);background:#faf6ef}.story-comic-shell footer span{font-size:13px;color:#8a7b69}.story-comic-shell footer button{height:48px;padding:0 28px;border:0;border-radius:13px;background:#33473d;color:#fbf7ef;font-weight:600;cursor:pointer}.story-comic-shell footer button:disabled{background:#c8c4ba;color:#f4f1eb;cursor:not-allowed}
@media(max-width:820px){.story-comic-modal{padding:0}.story-comic-shell{width:100vw;max-height:100vh;height:100vh;border-radius:0}.story-comic-body{grid-template-columns:1fr;padding:18px}.story-comic-preview{position:static;order:-1}.story-comic-paper{max-height:42vh;margin:auto}.story-options{grid-template-columns:1fr 1fr}.story-comic-shell>header{padding:18px}.story-comic-shell>footer{padding-inline:18px}}
.story-panels q,.story-board-preview q{display:block;margin-top:8px;padding:7px 9px;border:1px solid rgba(104,114,87,.2);border-radius:12px;background:rgba(255,255,255,.66);color:#47453e;font-size:12px;line-height:1.45}.story-panels q::before,.story-board-preview q::before{content:"“"}.story-panels q::after,.story-board-preview q::after{content:"”"}
.story-panel-editor{display:grid;gap:8px}.story-panel-editor label{display:grid;gap:4px;color:#8a7b69;font-size:11px}.story-panel-editor input,.story-panel-editor textarea{width:100%;box-sizing:border-box;border:1px solid rgba(112,96,72,.18);border-radius:9px;background:rgba(255,255,255,.72);color:#3d392f;font:12px/1.55 inherit;outline:none}.story-panel-editor input{height:36px;padding:0 10px}.story-panel-editor textarea{min-height:58px;padding:8px 10px;resize:vertical}.story-panel-editor input:focus,.story-panel-editor textarea:focus{border-color:#687257;box-shadow:0 0 0 3px rgba(104,114,87,.08)}

#storyComicCopyModal .story-comic-shell{width:min(620px,96vw)}#storyComicCopyModal .story-comic-body{grid-template-columns:minmax(0,1fr)}#storyComicCopyModal label{display:grid;gap:8px}#storyComicCopyModal input,#storyComicWorkTitle{box-sizing:border-box;width:100%;padding:12px;border:1px solid #ded2c0;border-radius:8px;background:#fffdf8;color:#332f28;font:inherit}#storyComicCopyModal [role=alert]{color:#a53b2c}

