/* 관리 도구의 본문·초대·계정 표·세계관 편집 칸·가입·로그인 양식·세계관 카드·대화 목록·메신저형 대화 화면과 좁은 화면 여백을 정한다. */
/* 작가 원고는 좁은 화면에서도 한 열로 읽고 쓴다. */
.manuscript-head, .manuscript-tools, .manuscript-save { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

#work-create[hidden] { display:none; }

.work-card button { min-height:40px; max-width:100%; white-space:normal; }
#work-list .work-add { padding:16px; justify-content:center; align-items:center; border-style:dashed; }

#manuscript-view { width:100%; max-width:960px; margin:auto; min-width:0; }
.manuscript-tabs { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); }
#manuscript-view .manuscript-tabs button { min-width:0; min-height:44px; justify-content:center; padding:8px 4px; border:0; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; background:transparent; color:var(--text); white-space:normal; transition:none; }
#manuscript-view .manuscript-tabs [aria-selected="true"] { border-bottom-color:var(--accent); background:var(--panel-2); font-weight:600; }
.writing-manuscript body { min-height:var(--story-viewport-height, 100dvh); }
.manuscript-head h1 { margin:0; font-size:20px; overflow-wrap:anywhere; min-width:0; }
.manuscript-tools { margin:16px 0; }
.manuscript-tools label { display:flex; align-items:center; gap:8px; min-width:0; }
.manuscript-tools select { min-width:0; max-width:100%; }
.manuscript-tools label { max-width:100%; }
.manuscript-save { position:sticky; top:0; z-index:2; background:var(--panel); padding:8px; border:1px solid var(--border); border-radius:8px; }
#manuscript-status { flex:1 1 160px; font-size:13px; overflow-wrap:anywhere; }
#manuscript-status::before { content:''; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:999px; background:var(--accent); }
.manuscript-label { display:block; margin:16px 0 8px; font-size:14px; }
#manuscript-input, #manuscript-reading { box-sizing:border-box; width:100%; min-width:0; height:clamp(160px, calc(var(--story-viewport-height, 100dvh) - 280px), 720px); overflow:auto; padding:16px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font:inherit; font-size:16px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
#manuscript-input { resize:vertical; }
#manuscript-view [hidden] { display:none; }
#manuscript-view button { min-height:40px; max-width:100%; }
#manuscript-view textarea[readonly] { box-sizing:border-box; width:100%; min-height:160px; font-size:16px; }
#manuscript-conflict h2 { font-size:16px; font-weight:600; }
@media (max-width:800px) {
  .writing-manuscript main { padding:12px 16px; }
  .manuscript-save { gap:4px; }
  #manuscript-status { flex-basis:100%; }
  .manuscript-tools { gap:8px; }

}
body { --page-max:1440px; --page-gutter:max(clamp(24px, calc((100vw - 900px) / 8), 74px), calc((100vw - var(--page-max)) / 2)); }
.top { padding-left:var(--page-gutter); padding-right:var(--page-gutter); }
main { max-width:none; margin:0; padding:24px var(--page-gutter); }
h1 { font-size:24px; font-weight:650; margin:0 0 16px; }
.header-right { display:flex; align-items:center; gap:8px; }
.header-right { position:relative; margin-left:auto; }
.account-avatar { width:40px; height:40px; padding:8px; border-radius:999px; justify-content:center; background:var(--panel-2); color:var(--text); flex-shrink:0; }
.account-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:30; width:min(288px, calc(100vw - 32px)); padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--panel); box-shadow:0 8px 24px rgba(16,24,40,.12); }
.account-summary { display:flex; flex-direction:column; gap:4px; padding:8px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; font-size:14px; }
.account-summary strong { font-weight:600; }
.account-menu button { display:flex; width:100%; min-height:40px; justify-content:flex-start; border:0; background:transparent; color:var(--text); }
.account-menu button:hover { background:var(--panel-2); }
.account-menu button[hidden] { display:none; }
.admin-head { margin-bottom:24px; }
.admin-head h1 { margin-bottom:8px; }
.admin-head p { margin:0; font-size:14px; }
.admin-tabs { position:static; margin-bottom:24px; min-width:0; }
.admin-tabs .tab-bar-inner { padding:4px 0; margin:0; max-width:100%; flex-wrap:nowrap; }
.admin-tabs .tab-btn { min-width:40px; min-height:44px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; justify-content:center; }
.admin-tabs .tab-btn[aria-pressed=true] { color:var(--accent); border-bottom-color:var(--accent); }
.admin-tabs .tab-btn:focus-visible, #admin-view button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
#admin-view, #admin-view > section { min-width:0; }
#admin-view > section > .section-title { margin-top:0; }
#admin-view .edit-note { font-size:14px; margin:8px 0 24px; }
#admin-view button { min-height:40px; }
.llm-panel { padding:0 24px 24px; }
.settings-form { max-width:960px; }
.settings-section { display:grid; grid-template-columns:minmax(180px, 1fr) minmax(0, 2fr); gap:24px; padding:24px 0; border-bottom:1px solid var(--border); margin-bottom:24px; }
.settings-intro h3 { margin:0 0 8px; font-size:14px; font-weight:600; }
.settings-intro p, .settings-form > p { margin:0; font-size:13px; }
.settings-controls { display:flex; flex-direction:column; gap:16px; max-width:520px; min-width:0; }
.settings-controls .field { font-size:13px; }
.settings-controls input, .settings-controls select { width:100%; min-width:0; min-height:40px; }
#settings-analysis-panel .field { display:grid; gap:8px; }
.analysis-provider-select { position:relative; min-width:0; }
.analysis-provider-select .ico { position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--dim); pointer-events:none; }
.analysis-provider-select select { padding-inline-start:36px; }
#settings-analysis-panel textarea { width:100%; min-width:0; resize:vertical; }
#analysis-route-enable { align-self:flex-start; min-height:40px; }
#analysis-route-enable[aria-checked="true"] { border-color:#15803D; }
.settings-controls [hidden] { display:none; }
.settings-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
#admin-view .danger { color:var(--danger); }
#admin-view p { overflow-wrap:anywhere; }
@media (max-width:800px) {
  .admin-tabs .tab-label { display:none; }
  .settings-section { grid-template-columns:minmax(0, 1fr); gap:16px; }
  .llm-panel { padding:0 16px 16px; }
}
.world-cards .pick-card, .character-cards .pick-card { padding:0 0 16px; overflow:hidden; min-width:0; gap:8px; }
.world-cards .card-title, .world-cards .card-line, .character-cards .card-title, .character-cards .card-line { margin:0 16px; }
.character-portrait { display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; margin-bottom:8px; }
.world-cover { display:block; width:100%; height:auto; aspect-ratio:5 / 3; object-fit:cover; margin-bottom:8px; }
.scene-preview { margin-top:24px; max-width:760px; font-size:14px; line-height:1.7; }
.scene-preview h2, #conversations h2 { font-size:20px; font-weight:650; }
.scene-preview h2 { margin:12px 0; }
#external-story { margin-bottom:24px; }
@media (max-width:800px) { .usage { table-layout:fixed; } .usage th, .usage td { padding:4px; overflow-wrap:anywhere; } }
.account-menu button.danger { color:var(--danger); border-top:1px solid var(--border); border-radius:0 0 6px 6px; }
.account-menu [role=menuitem]:focus-visible, .account-avatar:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#profile-details { grid-template-columns:1fr; gap:8px; }
#profile-details dd { margin-bottom:8px; }
#password-form[hidden], .account-menu[hidden], .account-avatar[hidden], #login-open[hidden] { display:none; }
.brand { min-width:0; }
.brand-word { overflow-wrap:anywhere; }
.label { font-size:var(--fs-sm); font-weight:600; color:var(--dim); margin:0; }
.meta { font-size:var(--fs-xs); color:var(--dim); font-variant-numeric:tabular-nums; margin:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow); padding:var(--sp-4) var(--sp-5); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.invite-panel { max-width:760px; }
.invite-panel .dim { margin:var(--sp-2) 0; font-size:13px; }
.invite-result { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); }
.invite-result input { flex:1 1 280px; min-width:0; font-family:var(--mono); font-size:12px; }
.invite-result .meta { flex-basis:100%; }
.section-title { margin:var(--sp-5) 0 var(--sp-3); }
.users { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; font-size:13px; }
.users th { height:38px; padding:0 var(--sp-4); text-align:left; background:var(--panel-2); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--dim); }
.users td { height:46px; padding:0 var(--sp-4); border-top:1px solid var(--border); overflow-wrap:anywhere; }
.users tbody tr:hover { background:var(--panel-2); }
.users .actions { text-align:right; white-space:nowrap; }
.users .actions button + button { margin-left:var(--sp-2); }
.status.is-active { --sc:var(--s-done); }
.status.is-pending { --sc:var(--s-backlog, #98A2B3); }
.auth-link { margin-top:var(--sp-4); min-height:40px; }
#password-open { min-height:40px; }
.users .actions { white-space:normal; }
.users .actions button { margin-top:var(--sp-1); margin-bottom:var(--sp-1); }
@media (max-width:800px) {
  .top { flex-wrap:wrap; gap:var(--sp-2); }
  .header-right { flex-wrap:wrap; }
  .users { table-layout:fixed; }
  .users th, .users td { padding:var(--sp-2); }
  .users .actions button { margin-left:0; min-height:40px; max-width:100%; white-space:normal; }
}
.status.is-suspended { --sc:var(--s-changes_requested); }
.status.is-adult { --sc:var(--s-triage); }
.limits-panel { max-width:760px; }
.limits-panel .dim { margin:0 0 var(--sp-2); font-size:13px; }
.limits-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); }
.limits-form .field { display:flex; flex-direction:column; gap:var(--sp-1); flex:1 1 200px; font-size:13px; }
.usage-box { overflow-x:auto; }
.usage-summary { padding:16px; margin-bottom:24px; border:1px solid var(--border); border-radius:8px; background:var(--panel); overflow-wrap:anywhere; }
.usage-summary p { margin:0 0 8px; }
.usage-summary .dim { font-size:13px; }
.usage { min-width:960px; }
.usage td.num { text-align:right; font-family:var(--mono); font-size:12px; }
.form-card { max-width:400px; margin:var(--sp-6) auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:var(--sp-5); }
.form-card form { display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4); }
.form-card .primary { justify-content:center; min-height:40px; }
.form-card .note { margin:var(--sp-4) 0 0; font-size:13px; }
.field { display:flex; flex-direction:column; gap:var(--sp-1); }
.field input { width:100%; font-size:14px; }
#logout { min-height:40px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--sp-3); }
.pick-card { display:flex; flex-direction:column; align-items:flex-start; white-space:normal; gap:var(--sp-1); min-height:96px; padding:var(--sp-4); text-align:left; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow); }
.pick-card:hover { border-color:var(--border-strong); background:var(--panel); }
.pick-card[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb), .15); }
.card-title { font-size:16px; font-weight:650; }
.card-line { font-size:13px; color:var(--dim); overflow-wrap:anywhere; }
.pick-head { display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.pick-title { min-width:0; font-size:20px; font-weight:650; margin:0; overflow-wrap:anywhere; }
.pick-background { max-width:760px; margin:0 0 var(--sp-3); font-size:14px; white-space:pre-line; }
.character-detail { max-width:760px; margin-top:var(--sp-4); }
.detail-name { font-size:16px; font-weight:650; margin:0 0 var(--sp-3); }
.detail-list { display:grid; grid-template-columns:max-content 1fr; gap:var(--sp-2) var(--sp-4); margin:0; }
.detail-list dt { padding-top:2px; }
.detail-list dd { margin:0; font-size:14px; white-space:pre-line; overflow-wrap:anywhere; }
.first-line { margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4); border-left:3px solid var(--accent); background:var(--panel-2); border-radius:var(--r-sm); white-space:pre-line; }
.character-detail .note { margin:var(--sp-3) 0 0; font-size:13px; }
.edit-note { margin:calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size:13px; }
.world-edits { display:flex; flex-direction:column; gap:var(--sp-3); max-width:960px; }
.edit-block > summary { display:flex; align-items:center; gap:var(--sp-3); min-height:32px; cursor:pointer; }
.edit-title { font-weight:600; overflow-wrap:anywhere; }
.edit-form { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3); margin:var(--sp-3) 0; }
.edit-form .wide, .edit-actions { grid-column:1 / -1; }
.edit-form textarea { width:100%; min-height:0; font:inherit; font-size:14px; resize:vertical; }
.edit-form input { width:100%; font-size:14px; }
.edit-actions { display:flex; gap:var(--sp-2); }
.character-edits { display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-2); }
.character-edits .edit-block { border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-4); background:var(--panel-2); }
.start-form { display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); margin-top:var(--sp-4); }
.start-form .field { align-self:stretch; }
.start-form textarea, .chat-composer textarea { width:100%; font:inherit; font-size:14px; line-height:1.6; resize:vertical; }
.conversation-list { display:flex; gap:var(--sp-3); list-style:none; margin:0 0 var(--sp-5); padding:var(--sp-1) var(--sp-1) var(--sp-3); max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:var(--sp-1); }
.conversation-item { display:flex; flex-direction:column; flex:0 0 272px; min-width:0; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow); scroll-snap-align:start; }
.conversation-item:hover { border-color:var(--border-strong); }
.conversation-open { flex:1; min-width:0; width:100%; display:flex; flex-direction:column; align-items:stretch; padding:0; white-space:normal; background:none; border:0; border-radius:var(--r-md); color:var(--text); text-align:left; }
.conversation-open:hover { background:var(--panel-2); }
.conversation-portrait { display:block; width:100%; height:200px; object-fit:cover; object-position:center 25%; border-radius:var(--r-md) var(--r-md) 0 0; }
.conversation-body { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4); min-width:0; }
.conversation-title { font-size:16px; font-weight:500; }
.conversation-title, .conversation-meta, .conversation-description { overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.conversation-meta, .conversation-description { font-size:13px; color:var(--dim); }
.conversation-actions { display:flex; justify-content:flex-end; gap:var(--sp-1); padding:0 var(--sp-3) var(--sp-3); }
.conversation-actions button { min-width:40px; min-height:40px; }
.conversation-item button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.reading-story body { height:var(--story-viewport-height, 100dvh); display:flex; flex-direction:column; overflow:hidden; }
.reading-story body > .top { flex-shrink:0; }
.reading-story main { flex:1; min-height:0; padding-top:var(--sp-4); padding-bottom:max(var(--sp-4), env(safe-area-inset-bottom)); }
.chat { display:flex; flex-direction:column; max-width:1200px; margin:0 auto; height:100%; min-height:0; gap:var(--sp-3); }
.chat-reading { flex:1; min-height:0; min-width:0; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-gutter:stable; scroll-padding-block:var(--sp-4); }
.chat-reading:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.chat-head { display:flex; align-items:center; gap:var(--sp-2); padding-bottom:var(--sp-3); border-bottom:1px solid var(--border); flex-shrink:0; }
.chat-title { min-width:0; }
.chat-title h1 { font-size:16px; margin:0; overflow-wrap:anywhere; }
.icon-btn { min-width:40px; min-height:40px; justify-content:center; padding:0; }
.chat-messages { flex:1; list-style:none; margin:0; padding:var(--sp-4) 0; display:flex; flex-direction:column; gap:var(--sp-3); }
.msg { display:flex; min-width:0; }
.msg-body { max-width:min(80%, 600px); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-lg); font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.from-character .msg-body { background:var(--panel); border:1px solid var(--border); border-bottom-left-radius:var(--r-sm); }
.from-user { justify-content:flex-end; }
.from-user .msg-body { background:rgba(var(--accent-rgb), .12); border:1px solid rgba(var(--accent-rgb), .25); border-bottom-right-radius:var(--r-sm); }
.narration { color:var(--dim); font-style:italic; }
/* 참여형 소설 — 장면은 말풍선 없이 책처럼 넓게, 주인공 행동은 오른쪽 짧은 메모 */
.from-character .msg-body { max-width:680px; width:100%; background:none; border:0; padding:0; font-size:15px; line-height:1.85; white-space:normal; }
.scene-paragraph { margin:0 0 var(--sp-3); white-space:pre-wrap; text-indent:1em; }
.scene-paragraph:last-child { margin-bottom:0; }
.scene-illustration { display:block; width:100%; height:auto; margin-bottom:var(--sp-3); border-radius:var(--r-md); }
.from-user .msg-body { font-size:13px; color:var(--dim); }
.scene-choices { display:flex; flex-direction:column; gap:var(--sp-2); max-width:680px; }
.choice-btn { text-align:left; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); color:inherit; font:inherit; font-size:14px; line-height:1.5; cursor:pointer; }
.choice-btn:hover, .choice-btn:focus-visible { border-color:var(--accent); }
.is-writing .msg-body:empty::after { content:'…'; color:var(--dim); }
.msg-tools { display:flex; flex-wrap:wrap; gap:var(--sp-2); font-size:13px; }
.chat-notice { margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-left:3px solid var(--danger); border-radius:var(--r-sm); background:var(--panel); font-size:13px; }
.chat-composer { flex-shrink:0; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); }
.composer-bar { display:flex; align-items:center; gap:var(--sp-2); }
.composer-toggle { flex:1; justify-content:flex-start; min-width:0; min-height:40px; text-align:left; }
.composer-toggle span { overflow-wrap:anywhere; }
.chat-editor { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-2) 0; }
.chat-tools .meta { font-size:12px; }
.chat-composer:focus-within { border-color:var(--border-strong); }
.chat-composer textarea { border:0; box-shadow:none; padding:0; background:none; resize:none; min-height:48px; max-height:min(160px, calc(var(--story-viewport-height, 100dvh) / 4)); overflow-y:auto; }
.chat-composer textarea:focus { box-shadow:none; outline:none; }
.chat-editing { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin:0; font-size:13px; color:var(--dim); }
.chat-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.round-btn { width:32px; height:32px; min-height:0; padding:0; justify-content:center; border-radius:999px; flex-shrink:0; }
.round-btn:disabled { opacity:.4; }
.stop-btn { background:var(--panel-2); color:var(--text); border:1px solid var(--border-strong); }
.memo-toggle { margin-left:auto; flex-shrink:0; }
.rating-select { margin-left:auto; flex-shrink:0; width:auto; min-height:40px; }
.rating-select + .memo-toggle { margin-left:0; }
.chat-notice.is-blocked { border-left-color:var(--s-in_progress); }
.memo-panel { padding:var(--sp-3); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow); }
.memo-panel h2 { font-size:14px; margin:0 0 var(--sp-1); }
.memo-panel > .meta { margin:0 0 var(--sp-3); font-size:12px; }
.memo-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.memo-item { padding-top:var(--sp-2); border-top:1px solid var(--border); }
.memo-item:first-child { padding-top:0; border-top:0; }
.memo-text { margin:0; font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.memo-tools { display:flex; gap:var(--sp-1); margin-top:var(--sp-1); }
.memo-tools button { font-size:12px; }
.memo-form textarea { width:100%; font:inherit; font-size:13px; line-height:1.6; resize:vertical; }
.memo-empty { font-size:13px; }
@media (min-width:801px) {
  .chat.memo-open { display:grid; grid-template-columns:minmax(0, 1fr) 280px; grid-template-rows:auto minmax(0, 1fr) auto; column-gap:var(--sp-4); max-width:1440px; }
  .chat.memo-open > :not(.memo-panel) { grid-column:1; }
  .chat.memo-open .memo-panel { grid-column:2; grid-row:1 / -1; align-self:stretch; min-height:0; overflow-y:auto; }
}
@media (max-width:800px) {
  .card-grid { grid-template-columns:1fr; }
  .world-cards { display:flex; gap:var(--sp-3); margin:0 calc(-1 * var(--page-gutter)); padding:0 var(--page-gutter) var(--sp-1); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 var(--page-gutter); scrollbar-width:none; }
  .world-cards::-webkit-scrollbar { display:none; }
  .character-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .character-cards .card-title, .character-cards .card-line { margin:0 12px; }
  .character-cards .card-line { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .world-cards .pick-card { flex:0 0 min(84%, 360px); scroll-snap-align:start; }
  .memo-panel { margin-top:0; max-height:30dvh; overflow-y:auto; flex-shrink:0; }
  .memo-tools button { min-height:40px; }
  .msg-body { max-width:88%; }
  .round-btn { width:40px; height:40px; }
  .conversation-actions button, .msg-tools button, .start-form .primary { min-height:40px; }
  .conversation-item { flex-basis:min(84%, 360px); }
  .edit-form { grid-template-columns:1fr; }
  .detail-list { grid-template-columns:1fr; gap:var(--sp-1); }
  .detail-list dd { margin-bottom:var(--sp-2); }
  .edit-actions button, .pick-card { min-height:40px; }
  body { --page-gutter:16px; } .top { padding:16px; gap:12px; }
  .panel { padding:var(--sp-4); }
  .users th:nth-child(3), .users td:nth-child(3) { display:none; }
  .users th, .users td { padding:0 var(--sp-2); }
  .users .actions button { min-height:40px; }
  .form-card { margin:var(--sp-4) auto; padding:var(--sp-4); }
}
.recovery-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
}
.recovery-tools[hidden] { display: none; }
.recovery-tools button, .memo-tools button { min-height: 40px; }
.memo-tools { flex-wrap: wrap; }
.memo-item .meta { color: var(--text-dim); overflow-wrap: anywhere; }
.is-writing { flex-direction:column; gap:var(--sp-2); }
.scene-status { display:flex; align-items:center; gap:var(--sp-2); margin:0; color:var(--dim); font-size:12px; line-height:1.6; }
.scene-status::before { content:''; width:6px; height:6px; flex-shrink:0; border-radius:999px; background:var(--s-in_progress); }

/* 앱 시작 화면 — 이미지가 뜬 뒤 3초 보인다. 스크립트나 이미지가 잘못돼도 CSS만으로 6초 뒤 사라져 앱을 가리지 않는다. */
.splash { position:fixed; inset:0; z-index:100; background:#14161B; animation:splash-out .5s ease 6s forwards; }
.splash.is-ready { animation:splash-ready .5s ease 3s forwards; }
.splash picture, .splash img { display:block; width:100%; height:100%; object-fit:cover; }
.splash::after { content:""; position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(to top, rgba(10,12,18,.92), rgba(10,12,18,0)); }
.splash-text { position:absolute; z-index:1; left:24px; right:24px; bottom:max(56px, 8vh); text-align:center; color:#fff; }
.splash-text strong { display:block; margin-bottom:12px; font-family:var(--mono, monospace); font-size:22px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; }
.splash-text span { font-size:16px; opacity:.9; }
@keyframes splash-out { to { opacity:0; visibility:hidden; } }
@keyframes splash-ready { to { opacity:0; visibility:hidden; } }
.splash-tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.illustration-filters { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.illustration-filters select { min-height:40px; }
.illustration-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-3); }
.illustration-card { min-width:0; margin:0; }
.illustration-card h3 { margin:0 0 var(--sp-2); font-size:14px; }
.illustration-open { display:block; width:100%; padding:0; border:0; border-radius:var(--r-md); background:var(--panel-2); }
.illustration-preview { box-sizing:border-box; width:calc(100vw - 32px); max-width:none; height:calc(100dvh - 32px); max-height:none; padding:0; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); }
.illustration-preview::backdrop { background:rgba(16,24,40,.72); }
.illustration-preview-shell { display:flex; flex-direction:column; height:100%; padding:16px; box-sizing:border-box; gap:12px; }
.illustration-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.illustration-preview-head h2 { margin:0; font-size:16px; overflow-wrap:anywhere; min-width:0; }
.illustration-preview-head > div { display:flex; gap:8px; flex-shrink:0; }
.illustration-preview-head button { min-height:40px; }
.illustration-preview-shell > p { margin:0; font-size:13px; }
.illustration-preview-shell > p:empty { display:none; }
.illustration-preview-content { display:flex; flex:1; min-height:0; gap:16px; }
.illustration-preview-image { flex:1; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; }
.illustration-preview-image img { display:block; width:100%; height:100%; object-fit:contain; }
.illustration-info { box-sizing:border-box; width:320px; flex-shrink:0; margin:0; padding:16px; overflow:auto; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); overflow-wrap:anywhere; }
.illustration-info > div + div { margin-top:12px; }
.illustration-info dt { font:600 12px var(--mono); color:var(--dim); }
.illustration-info dd { margin:4px 0 0; font-size:14px; white-space:pre-wrap; }
.illustration-open:focus-visible, .illustration-preview button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (max-width:800px) {
  .illustration-preview-content { flex-direction:column; overflow:auto; }
  .illustration-preview-image { flex:1 0 40%; }
  .illustration-info { width:100%; max-height:50%; }
  .illustration-preview-head { flex-wrap:wrap; }
}
.illustration-card img { display:block; width:100%; height:auto; border-radius:var(--r-md); }
.illustration-card p { margin:var(--sp-2) 0 0; overflow-wrap:anywhere; }
@media (max-width:800px) { .illustration-grid { grid-template-columns:minmax(0, 1fr); } }
.splash-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--sp-3); }
.splash-card { display:flex; flex-direction:column; min-width:0; }
.splash-pick { position:relative; display:block; width:100%; height:auto; padding:0; overflow:hidden; aspect-ratio:3 / 4; border:2px solid var(--border); border-radius:var(--r-md); background:var(--panel-2); }
.splash-pick img { display:block; width:100%; height:100%; object-fit:cover; opacity:.72; }
.splash-pick[data-selected=true] { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb), .15); }
.splash-pick[data-selected=true] img { opacity:1; }
.splash-mark { position:absolute; left:8px; bottom:8px; padding:2px 8px; border-radius:999px; background:rgba(10,12,18,.72); color:#fff; font-size:12px; }
.splash-pick[data-selected=true] .splash-mark { background:var(--accent); }
.splash-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); min-height:40px; }
@media (max-width:800px) { .splash-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

.splash-toggle { min-height:40px; }
.splash-toggle[aria-pressed=true] { color:var(--accent); border-color:var(--accent); }
.splash-preview { width:min(1100px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); box-shadow:0 8px 24px rgba(16,24,40,.12); }
.splash-preview[open] { display:flex; flex-direction:column; }
.splash-preview::backdrop { background:rgba(10,12,18,.72); }
.splash-preview-head, .splash-preview-actions { display:flex; flex-shrink:0; align-items:center; gap:12px; padding:16px; }
.splash-preview-head { justify-content:space-between; border-bottom:1px solid var(--border); }
.splash-preview-head h2 { margin:0; font-size:20px; }
.splash-preview button { min-height:40px; }
.splash-preview-body { overflow-y:auto; min-height:0; padding:16px; }
.splash-preview-screens { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:24px; }
.splash-preview figure { margin:0; min-width:0; }
.splash-preview figcaption { margin-bottom:8px; font-size:13px; color:var(--text-dim); }
.splash-sample { position:relative; overflow:hidden; container-type:inline-size; background:#14161B; }
.splash-sample-pc { aspect-ratio:1300 / 800; }
.splash-sample-mobile { aspect-ratio:390 / 844; max-width:390px; }
.splash-sample img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.splash-sample::after { content:""; position:absolute; inset:auto 0 0; height:42%; background:linear-gradient(to top, rgba(10,12,18,.92), rgba(10,12,18,0)); }
.splash-sample-text { position:absolute; z-index:1; color:#fff; text-align:center; }
.splash-sample-pc .splash-sample-text { left:1.846cqw; right:1.846cqw; bottom:4.923cqw; font-size:1.231cqw; }
.splash-sample-mobile .splash-sample-text { left:6.154cqw; right:6.154cqw; bottom:17.313cqw; font-size:4.103cqw; }
.splash-sample-text strong { display:block; font-family:var(--mono, monospace); font-weight:600; letter-spacing:.24em; text-transform:uppercase; }
.splash-sample-pc strong { font-size:1.692cqw; margin-bottom:.923cqw; }
.splash-sample-mobile strong { font-size:5.641cqw; margin-bottom:3.077cqw; }
.splash-sample-text span { opacity:.9; }
.splash-preview-actions { border-top:1px solid var(--border); justify-content:flex-end; flex-wrap:wrap; }
.splash-preview-actions .error { width:100%; margin:0; }
@media(max-width:800px) { .splash-preview-screens { grid-template-columns:minmax(0, 1fr); } .splash-sample-mobile { margin:auto; } }

/* Charchat 전역 글꼴: 한글 별칭의 문자 범위를 제한한다. */
@font-face { font-family:"CC Default Hangul"; src:local("Pretendard Variable"),local("Pretendard"); unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF; font-display:swap; }
@font-face { font-family:"CC Gothic Hangul"; src:local("Malgun Gothic"),local("Apple SD Gothic Neo"); unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF; font-display:swap; }
@font-face { font-family:"CC Serif Hangul"; src:local("Batang"),local("AppleMyungjo"); unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF; font-display:swap; }
:root, [data-font-en] {
  --font-ko:"Pretendard Variable", Pretendard, "CC Default Hangul", "CC Gothic Hangul";
  --font-en-sans:'Pretendard Variable', -apple-system, 'Segoe UI', sans-serif;
  --font-en-mono:ui-monospace, Consolas, Menlo, monospace;
  --sans:var(--font-ko), var(--font-en-sans);
  --mono:var(--font-ko), var(--font-en-mono);
}
[data-font-en="system-sans"] { --font-en-sans:Arial, Helvetica, sans-serif; --font-en-mono:Arial, Helvetica, sans-serif; }
[data-font-en="system-serif"] { --font-en-sans:Georgia, 'Times New Roman', serif; --font-en-mono:Georgia, 'Times New Roman', serif; }
[data-font-en="system-mono"] { --font-en-sans:Consolas, Menlo, monospace; --font-en-mono:Consolas, Menlo, monospace; }
[data-font-ko="system-gothic"] { --font-ko:"CC Gothic Hangul", "CC Default Hangul"; }
[data-font-ko="system-serif"] { --font-ko:"CC Serif Hangul", "CC Gothic Hangul", "CC Default Hangul"; }
body, input, textarea, select, button, dialog { font-family:var(--sans); }
.admin-tabs .tab-btn, .admin-tabs .tab-label, .global-nav .tab-btn, .global-nav .tab-label, .settings-subtabs .tab-btn, .settings-subtabs .tab-label { font-family:var(--mono); }
.fonts-preview { padding:16px; margin-top:16px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); font-family:var(--sans); overflow-wrap:anywhere; }
.fonts-preview p { margin:8px 0; }

/* CH-23: full-height authentication screens, shared by all signup paths. */
.auth-screen header.top { display:none; }
.auth-screen main { padding:0; }
.auth-split { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); min-height:100dvh; }
.auth-split[hidden] { display:none; }
.auth-art { position:relative; min-width:0; background:var(--panel-2); }
.auth-art picture { position:absolute; inset:0; }
.auth-art img { display:block; width:100%; height:100%; object-fit:cover; }
.auth-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85)); }
.auth-art-copy { position:absolute; bottom:0; left:0; z-index:1; padding:32px; color:#fff; }
.auth-art-copy strong { font-size:24px; font-weight:650; }
.auth-art-copy p { margin:12px 0 0; font-size:20px; line-height:1.6; }
.auth-pane { display:flex; align-items:center; justify-content:center; min-width:0; padding:32px 24px; background:var(--bg); }
.auth-card { box-sizing:border-box; width:100%; max-width:360px; padding:24px; border:1px solid var(--border); border-radius:8px; background:var(--panel); box-shadow:0 1px 2px rgba(16,24,40,.04); overflow-wrap:anywhere; }
html[data-theme="dark"] .auth-card { box-shadow:none; }
.auth-brand { display:block; width:40px; height:40px; margin:0 auto 24px; color:var(--accent); }
.auth-card h1 { margin:0 0 8px; font-size:20px; font-weight:650; text-align:center; }
.auth-card > p { font-size:13px; color:var(--text-dim); line-height:1.6; }
.auth-subtitle { margin:0 0 24px; text-align:center; }
.auth-card form { display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.auth-label { font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:normal; text-transform:none; }
.auth-card input { box-sizing:border-box; min-height:40px; border-radius:8px; min-width:0; }
.auth-card .primary { width:100%; min-height:40px; justify-content:center; background:var(--grad-primary); }
.auth-card .error { margin:0; font-size:13px; }
.auth-card .error:empty { display:none; }
.auth-footer { margin:24px -24px -24px; padding:16px 24px; border-top:1px solid var(--border); border-radius:0 0 8px 8px; background:var(--panel-2); text-align:center; font-size:13px; }
.auth-footer button { min-height:40px; padding:0 4px; color:var(--accent); font-size:13px; }
.auth-note { margin:8px 0 0; color:var(--text-dim); font-size:13px; }
@media (max-width:800px) {
  .auth-split { grid-template-columns:minmax(0, 1fr); }
  .auth-art { display:none; }
  .auth-pane { padding:24px 16px; }
}

/* Story settings follow DESIGN sections 2–6, 8, 10 and 11. */
.story-settings { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); overflow-wrap: anywhere; }
.story-settings h2 { font-size: 16px; font-weight: 600; }
.story-settings select { width: 100%; min-height: 40px; }
.story-settings button, #story-settings-toggle, .story-illustration button { min-height: 40px; }
.story-illustration { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#story-illustration-status { flex: 1 1 240px; margin: 0; }
#story-illustration-status::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; background: var(--text-dim, var(--dim)); }
#story-illustration-status[data-state="done"]::before { background: #15803D; }
#story-illustration-status[data-state="failed"]::before { background: #DC2626; }
#story-illustration-status[data-state="running"]::before { background: #B45309; }

.chat-head #story-settings-toggle { flex-shrink: 0; }
.story-illustration { margin-bottom: 12px; }
@media (max-width: 800px) {
  .chat-head { flex-wrap: wrap; }
  .chat-head .chat-title { min-width: 0; overflow-wrap: anywhere; }
}

/* CH-25: only the right-hand reading region scrolls. */
.chat-content { display:grid; grid-template-columns:minmax(0, 38fr) minmax(0, 62fr); gap:var(--sp-4); flex:1; min-height:0; min-width:0; }
.scene-art { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.scene-art-image { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.scene-art .scene-illustration { width:100%; height:100%; max-height:100%; object-fit:contain; margin:0; }
.scene-art .story-illustration { flex-shrink:0; overflow-wrap:anywhere; }
.scene-art .story-illustration button { max-width:100%; white-space:normal; }
.chat-reading .msg-body { overflow-wrap:anywhere; min-width:0; }
@media (max-width:800px) {
  .chat-content { grid-template-columns:minmax(0, 30fr) minmax(0, 70fr); gap:var(--sp-2); }
}
.scene-art-thumbnail { display: block; width: 240px; max-width: 100%; height: auto; border-radius: 8px; }
#scene-art { min-width: 0; overflow-wrap: anywhere; }
#scene-art textarea { display: block; width: 100%; box-sizing: border-box; }
#scene-art button, #scene-art select { min-height: 40px; max-width: 100%; margin: 4px; white-space: normal; }
#scene-art [role="switch"][aria-checked="true"] { color: var(--text); border-color: #15803D; }
.scene-art-dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
.scene-art-dialog img { display: block; max-width: 100%; max-height: 80dvh; object-fit: contain; }

/* CH-28: existing panel and form tokens, with room for a prose synopsis. */
.work-create { display:grid; gap:16px; min-width:0; margin:0; }
.work-create .field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.work-create input, .work-create textarea { width:100%; min-width:0; box-sizing:border-box; }
.work-create textarea { resize:vertical; }
.work-create .settings-actions { flex-wrap:wrap; }
.work-overview { margin:16px 0; }
.work-overview p { white-space:pre-wrap; overflow-wrap:anywhere; }

/* CH-28: DESIGN sections 2-8, 10-12; home, authoring and short creation dialog. */
.works-home { padding:8px 0; }
.works-home h2 { font-size:24px; font-weight:650; margin:0 0 8px; }
/* CH-34: shared card width and cover geometry (DESIGN §3–4, 7–8, 11–12). */
#work-list.work-cards, #work-dialog #work-genre-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),280px)); gap:16px; }
#work-list.work-cards { margin:24px 0 0; padding:0; overflow:visible; scroll-snap-type:none; scroll-padding:0; }
#work-list .work-card, #work-list .work-add { display:flex; flex-direction:column; min-width:0; box-sizing:border-box; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); box-shadow:0 1px 2px rgba(16,24,40,.04); }
#work-list .work-card { padding:0; gap:0; }
#work-list .work-add { padding:16px; border-style:dashed; }
#work-list .work-card-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:16px; gap:8px; }
#work-list .work-card strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; width:100%; min-width:0; overflow-wrap:anywhere; font-weight:600; font-size:14px; line-height:1.6; }
.work-updated { font-size:13px; color:var(--text-dim); margin:0; overflow-wrap:anywhere; }
#work-list .work-cover, #work-genre-cards .world-cover { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; flex-shrink:0; }
#work-list .work-cover { background:var(--panel-2); border-radius:8px 8px 0 0; }
#work-list .work-actions { display:flex; width:100%; justify-content:flex-end; gap:8px; margin-top:auto; }
#work-list button, #manuscript-view button, #work-dialog button { min-width:40px; min-height:40px; border-radius:6px; }
#work-list button .ico, #manuscript-view button .ico, #work-dialog button .ico { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#work-list button:focus-visible, #manuscript-view button:focus-visible, #work-dialog :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#work-list button:hover { border-color:var(--accent); }
#work-dialog { box-sizing:border-box; width:calc(100% - 32px); max-width:640px; max-height:calc(100dvh - 32px); margin:auto; padding:24px; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); overflow:auto; box-shadow:0 8px 24px rgba(16,24,40,.12); }
#work-dialog::backdrop { background:rgba(16,24,40,.6); }
#work-dialog h2 { font-size:20px; font-weight:650; margin:0; padding-right:48px; }
#work-dialog p { margin:0; font-size:14px; }
#work-dialog .field { display:grid; gap:8px; min-width:0; margin:0; font-size:14px; }
#work-dialog input, #work-dialog textarea { width:100%; min-width:0; box-sizing:border-box; font-size:16px; }
#work-dialog textarea { max-height:40dvh; }
#work-dialog .settings-actions { display:flex; justify-content:flex-end; gap:8px; }
.dialog-close { position:absolute; right:16px; top:16px; }
#work-create[aria-busy="true"] button[type="submit"] .ico { animation:work-spin 1s linear infinite; }
@keyframes work-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { #work-create[aria-busy="true"] button[type="submit"] .ico { animation:none; } }

/* 새 작품 장르는 모달 안에서 내부 스크롤 그리드로 표시한다. */
#work-genre { min-width:0; margin:0; padding:0; border:0; }
#work-genre legend { font-size:14px; margin-bottom:8px; }
.work-genre-tools { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
#work-genre-none[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
#work-dialog #work-genre-cards { margin:8px -4px 0; padding:4px; max-height:480px; overflow:auto; scroll-snap-type:none; scroll-padding:0; }
#work-genre-cards .pick-card { box-sizing:border-box; width:100%; min-width:0; scroll-snap-align:none; }
#work-genre-cards .card-title, #work-genre-cards .card-line { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
@media (max-width:800px) {
  #work-list.work-cards, #work-dialog #work-genre-cards { grid-template-columns:minmax(0,1fr); }
  /* The dialog border plus padding matches the page gutter. The grid's
     negative margin reserves focus-ring space without narrowing its cards. */
  #work-dialog { width:100%; max-width:none; padding:24px calc(var(--page-gutter) - 1px); }
}

.settings-subtabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:24px; min-width:0; }
.settings-subtabs .tab-btn { min-height:40px; }
.settings-subtabs .tab-label { display:inline; max-width:none; opacity:1; margin-left:8px; }
.global-nav .tab-bar-inner { max-width:none; margin:0; padding:0 var(--page-gutter); }
.global-nav .tab-btn, .settings-subtabs .tab-btn { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; justify-content:center; min-width:40px; }
.global-nav .tab-btn.active, .settings-subtabs .tab-btn.active { border-bottom-color:var(--accent); }
.global-nav .tab-btn:focus-visible, .settings-subtabs .tab-btn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }

/* CH-33: four input stages in the existing private-work dialog. */
.work-panel[hidden], #work-dialog button[hidden] { display:none; }
.work-panel { min-width:0; display:grid; gap:16px; }
.work-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:8px 0; }
.work-steps li { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; text-align:center; font-size:12px; color:var(--text-dim); overflow-wrap:anywhere; }
.work-steps li:not(:last-child)::after { content:""; position:absolute; top:15px; left:calc(50% + 16px); width:calc(100% - 32px); height:2px; background:var(--border); }
.work-step-mark { box-sizing:border-box; width:32px; height:32px; display:grid; place-items:center; border:2px solid var(--border); border-radius:999px; background:var(--panel); font-variant-numeric:tabular-nums; }
.work-step-mark .ico { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.work-steps .complete .work-step-mark { background:#15803D; border-color:#15803D; color:#fff; }
.work-steps .complete::after { background:#15803D !important; }
.work-steps [aria-current="step"] { color:var(--text); font-weight:600; }
.work-steps [aria-current="step"] .work-step-mark { border-color:var(--accent); outline:2px solid var(--accent); outline-offset:3px; color:var(--accent); }
#work-character { border:0; padding:0; margin:0; min-width:0; }
#work-character legend { font-size:14px; margin-bottom:8px; }
#work-character-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-height:320px; overflow:auto; padding:4px; }
#work-character-cards .pick-card { min-width:0; width:100%; overflow-wrap:anywhere; }
#work-summary { overflow-wrap:anywhere; }
@media (max-width:480px) { #work-character-cards { grid-template-columns:minmax(0,1fr); } }

/* CH-35: 작가 삽화 검토 영역. */
.author-art { display: grid; gap: 16px; min-width: 0; }
.author-art section, .author-art details { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.author-art .art-notice { margin: 0; padding: 12px; border-radius: 8px; background: var(--panel-2); }
.author-art summary { cursor: pointer; font-weight: 600; }
.author-art section > details, .author-art details > details { margin-top: 8px; }
.author-art label { display: grid; gap: 8px; margin-block: 12px; }
.author-art textarea, .author-art select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; }
.author-art button, .author-art summary { min-height: 40px; }
.author-art button { margin: 4px; max-width: 100%; white-space: normal; }
.author-art pre, .author-art p { white-space: pre-wrap; overflow-wrap: anywhere; }
.author-art pre { font: inherit; font-size: 13px; background: var(--panel-2); padding: 12px; border-radius: 6px; }
.author-art input[type=checkbox] { width: 40px; height: 40px; }
.author-art :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* CH-36: Work card navigation and episode list. */
#work-list .work-card { cursor:pointer; }
#work-list .work-card:hover { border-color:var(--accent); }
#work-list .work-card:focus-visible, #work-reading-view :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#work-reading-view { width:100%; max-width:960px; min-width:0; margin:auto; }
#work-reading-title { overflow-wrap:anywhere; }
#work-reading-list { display:grid; gap:8px; padding:0; list-style:none; }
.work-episode { width:100%; min-height:44px; padding:12px 16px; text-align:left; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); }
.work-episode:hover { background:var(--panel-2); }
#work-reading-view button { min-height:40px; }
#work-reading-list:empty:not([aria-busy="true"]) { min-height:44px; border:1px dashed var(--border); border-radius:8px; }

/* 스켈레톤 로딩(DESIGN 5·6절): 실제 칸과 같은 클래스에 skel-block을 붙인 면. 빛 띠가 왼쪽→오른쪽으로 1.4초마다 지나가고(shimmer)
   면 전체가 2.8초 주기로 살짝 숨쉰다. 목록은 칸마다 0.12초씩 늦게 시작해 물결처럼 보인다.
   칸 스타일의 background가 덮지 않도록 칸 클래스와 함께 적는다. */
@keyframes skel-shimmer { from { background-position:150% 0; } to { background-position:-50% 0; } }
@keyframes skel-breathe { 0%, 100% { opacity:1; } 50% { opacity:.72; } }
@keyframes skel-pulse { 0%, 100% { opacity:1; } 50% { opacity:.45; } }
.skel-block, .skel-shine { background:var(--skel-base) linear-gradient(100deg, transparent 30%, var(--skel-shine) 50%, transparent 70%) no-repeat; background-size:200% 100%; animation:skel-shimmer 1.4s ease-in-out infinite, skel-breathe 2.8s ease-in-out infinite; }
.skel-item:nth-child(2) .skel-block { animation-delay:.12s, .12s; }
.skel-item:nth-child(3) .skel-block { animation-delay:.24s, .24s; }
.skel-item:nth-child(4) .skel-block { animation-delay:.36s, .36s; }
.skel-item { pointer-events:none; }
#work-list .work-card.skel-item { align-items:stretch; cursor:default; box-shadow:none; }
.skel-line { display:block; width:70%; height:14px; border-radius:4px; }
.skel-line + .skel-line { width:40%; }
#work-reading-list .work-episode.skel-block { display:block; box-sizing:border-box; border-color:transparent; }
/* 서버에서 오는 삽화: 받는 동안만 자리 뒤(z-index:-1)에 회색 pulse를 깔고, 받으면 0.15초 페이드인. */
.thumb-slot { position:relative; isolation:isolate; }
.thumb-slot:has(> img.thumb-fade:not(.is-loaded):not(.is-failed))::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--skel-base) linear-gradient(100deg, transparent 30%, var(--skel-shine) 50%, transparent 70%) no-repeat; background-size:200% 100%; animation:skel-shimmer 1.4s ease-in-out infinite; }
img.thumb-fade { opacity:0; transition:opacity .15s; }
img.thumb-fade.is-loaded, img.thumb-fade.is-failed { opacity:1; }
.scene-art-thumbnail.thumb-fade:not(.is-loaded):not(.is-failed) { aspect-ratio:1; }
@media (prefers-reduced-motion:reduce) {
  .skel-block, .skel-shine, .thumb-slot::before { animation:none; }
  img.thumb-fade { transition:none; }
}

/* 작가 모드(2026-11-14 단순화): 새 작품 그림체 고르기, 원고 자동 처리 상태, 설정집 카드, 본문 사이 삽화, 읽기(스크롤·비주얼 노벨). */
.style-pick { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:16px 0; padding:0; border:0; }
.style-pick legend { margin-bottom:8px; font-size:13px; font-weight:500; }
.style-option { position:relative; display:flex; flex-direction:column; gap:4px; min-width:0; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); cursor:pointer; }
.style-option:has(input:checked), .style-option[aria-checked="true"] { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb), .15); }
.style-option input { position:absolute; opacity:0; pointer-events:none; }
.style-option strong { font-size:14px; font-weight:600; }
.style-option:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
#work-create .field textarea { box-sizing:border-box; width:100%; }
.manuscript-head #work-reading-write { margin-left:auto; }
#manuscript-view .manuscript-save .primary, #scene-new { gap:6px; }
.auto-status { margin:8px 0 0; padding:10px 12px; border-radius:8px; background:var(--panel-2); font-size:13px; overflow-wrap:anywhere; }
.cast-tools, .preview-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0; }
.cast-tools label { display:flex; align-items:center; gap:8px; min-width:0; max-width:100%; }
.cast-tools select { min-width:0; max-width:100%; }
.preview-tools p { flex:1 1 240px; margin:0; overflow-wrap:anywhere; }
.cast-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:12px; }
.cast-card { display:flex; flex-direction:column; gap:8px; min-width:0; padding:16px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
.cast-card-head { display:flex; align-items:center; gap:8px; }
.cast-card-head input { flex:1; min-width:0; font-weight:600; }
.cast-card .field { display:grid; gap:4px; font-size:13px; }
.cast-card textarea { box-sizing:border-box; width:100%; min-width:0; resize:vertical; }
.cast-card .settings-actions { margin-top:4px; }
.chip { flex-shrink:0; padding:2px 8px; border-radius:999px; background:rgba(var(--accent-rgb), .12); color:var(--accent); font-size:12px; }
.story { max-width:720px; margin:0 auto; font-size:17px; line-height:1.85; overflow-wrap:anywhere; }
.story > p { margin:0 0 1em; white-space:pre-wrap; }
.story-art { margin:24px 0; }
.story-art-frame { overflow:hidden; aspect-ratio:16 / 9; border-radius:8px; background:var(--panel-2); }
.story-art-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.story-art-frame.is-waiting, .story-art-frame.is-failed { display:flex; align-items:center; justify-content:center; padding:16px; border:1px dashed var(--border); }
.story-art-frame.is-waiting { background:var(--skel-base) linear-gradient(100deg, transparent 30%, var(--skel-shine) 50%, transparent 70%) no-repeat; background-size:200% 100%; animation:skel-shimmer 1.4s ease-in-out infinite, skel-breathe 2.8s ease-in-out infinite; }
.story-art-wait { margin:0; color:var(--dim); font-size:14px; text-align:center; }
.story-art figcaption { margin-top:6px; text-align:center; }
.art-actions { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin-top:8px; font-size:14px; }
.art-edit { flex-basis:100%; }
.art-edit summary { cursor:pointer; color:var(--dim); font-size:13px; }
.art-edit textarea { box-sizing:border-box; display:block; width:100%; margin:8px 0; font-family:var(--font-mono, monospace); font-size:13px; }
#reader-view { width:100%; max-width:960px; min-width:0; margin:auto; }
.reader-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.reader-bar h1 { flex:1 1 200px; margin:0; font-size:20px; overflow-wrap:anywhere; }
.reader-mode { display:inline-flex; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--panel-2); }
.reader-mode button { min-height:34px; padding:4px 14px; border:0; border-radius:999px; background:transparent; color:var(--dim); }
.reader-mode button[aria-pressed="true"] { background:var(--panel); color:var(--text); box-shadow:var(--shadow); font-weight:600; }
.reader-episodes { display:flex; justify-content:space-between; gap:8px; max-width:720px; margin:32px auto 0; }
#reader-view [hidden] { display:none; }
.vn { position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; height:calc(var(--story-viewport-height, 100dvh) - 200px); min-height:360px; border-radius:12px; background:linear-gradient(160deg, var(--panel-2), var(--bg)); cursor:pointer; user-select:none; }
.vn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.vn-stage { position:absolute; inset:0; }
.vn-stage img { width:100%; height:100%; object-fit:cover; }
.vn-box { position:relative; margin:16px; padding:16px 20px 8px; border-radius:12px; background:rgba(15, 17, 22, .78); color:#F3F4F6; backdrop-filter:blur(6px); }
.vn-text { min-height:4.5em; margin:0; font-size:17px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.vn-nav { display:flex; align-items:center; justify-content:flex-end; gap:8px; color:#D1D5DB; }
.vn-nav .meta { color:#D1D5DB; }
.vn-nav button { min-height:36px; padding:4px 10px; border-color:rgba(255,255,255,.25); background:transparent; color:#F3F4F6; }
.work-episode { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.work-episode-preview { flex-basis:100%; overflow:hidden; color:var(--dim); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:800px) {
  .style-pick { grid-template-columns:1fr; }
  .story { font-size:16px; }
  .vn { height:calc(var(--story-viewport-height, 100dvh) - 170px); border-radius:8px; }
  .vn-box { margin:8px; padding:12px 14px 6px; }
}
@media (prefers-reduced-motion:reduce) { .story-art-frame.is-waiting { animation:none; } }.story-caption { margin-top:6px; color:var(--dim); font-size:13px; text-align:center; }
.status-line { margin:0; font-size:13px; overflow-wrap:anywhere; }
.cast-card textarea { min-height:64px; }
.style-cards { max-width:640px; }
#manuscript-view .style-cards .style-option { align-items:flex-start; justify-content:flex-start; min-height:72px; text-align:left; white-space:normal; color:var(--text); }
.settings-heading { margin:8px 0 4px; font-size:16px; font-weight:600; }

/* ── 시안 B "무대"(2026-11-14): 그림이 주인공인 어두운 극장. 토큰은 theme.css, 규칙은 docs/DESIGN.md. ── */
.writing-manuscript main, main { padding-top:var(--sp-5); }
/* 홈 — 최근 작품 배너 */
.hero { position:relative; overflow:hidden; min-height:420px; margin:0 0 var(--sp-6); border-radius:var(--r-xl); background:var(--panel); isolation:isolate; }
.hero-media { position:absolute; inset:0; z-index:-2; }
.hero-media img { width:100%; height:100%; object-fit:cover; }
.hero-fade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(12,13,17,.92) 0%, rgba(12,13,17,.6) 42%, rgba(12,13,17,0) 75%), linear-gradient(0deg, rgba(12,13,17,.7) 0%, rgba(12,13,17,0) 40%); }
.hero-text { position:absolute; left:var(--sp-7); bottom:var(--sp-7); max-width:min(520px, calc(100% - 2 * var(--sp-7))); color:var(--on-image); }
.hero-kicker, .band-kicker, .story-kicker { display:inline-block; color:var(--accent); font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; }
.hero .hero-kicker { color:#EBA43C; }
.hero-title { margin:var(--sp-3) 0; font-size:var(--fs-4xl); font-weight:800; line-height:1.05; letter-spacing:-0.04em; overflow-wrap:anywhere; }
.hero-synopsis, .band-synopsis { margin:0 0 var(--sp-5); color:rgba(244,241,236,.82); font:var(--fs-base)/1.75 var(--serif); }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.hero-actions button { min-height:46px; padding:12px 22px; font-size:var(--fs-base); }
.hero .primary, .band .primary { background:#EBA43C; color:#1A1205; }
.hero .primary:hover, .band .primary:hover { background:#F2B65C; }
.hero-ghost { background:rgba(255,255,255,.12); color:var(--on-image); backdrop-filter:blur(8px); }
.hero-ghost:hover { background:rgba(255,255,255,.2); }
/* 홈 — 내 작품 */
.works-home { margin-top:0; }
.shelf-head { display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.shelf-head h2 { margin:0; font-size:var(--fs-xl); font-weight:700; letter-spacing:-0.02em; }
#works-status:empty { display:none; }
#work-list.work-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:var(--sp-4); margin:0; }
#work-list .work-card, #work-list .work-add { position:relative; display:block; overflow:hidden; aspect-ratio:16 / 10; padding:0; border:0; border-radius:var(--r-lg); background:var(--panel); box-shadow:none; color:var(--on-image); cursor:pointer; isolation:isolate; }
#work-list .work-card:hover { border:0; }
#work-list .work-card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.work-card-media { position:absolute; inset:0; z-index:-2; background:var(--panel-2); }
.work-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
#work-list .work-card:hover .work-card-media img { transform:scale(1.03); }
.work-card-media.is-empty, .band-media.is-empty, .hero-media.is-empty { background:radial-gradient(120% 90% at 15% 0%, #2B2442 0%, #15161C 62%); }
#work-list .work-card::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(12,13,17,.88) 0%, rgba(12,13,17,0) 58%); }
#work-list .work-card strong { display:block; font-size:var(--fs-lg); font-weight:700; line-height:1.3; color:var(--on-image); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -webkit-line-clamp:unset; }
#work-list .work-updated { margin:2px 0 0; color:rgba(244,241,236,.72); font-size:var(--fs-xs); }
#work-list .work-card .work-icon { width:36px; height:36px; min-height:36px; padding:0; border-radius:var(--r-pill); background:rgba(12,13,17,.55); color:var(--on-image); backdrop-filter:blur(8px); }
#work-list .work-card .work-icon:hover { background:rgba(12,13,17,.8); }
#work-list .work-add { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); border:1.5px dashed var(--border-strong); background:transparent; color:var(--dim); font-weight:600; }
#work-list .work-add:hover { border-color:var(--accent); color:var(--text); background:transparent; }
#work-list .work-card.skel-item::after { display:none; }
/* 카드 글자는 아래, 이어 읽기·이어 쓰기 둥근 버튼은 오른쪽 위 */
#work-list .work-card .work-card-body { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:0; padding:var(--sp-4); }
#work-list .work-card .work-actions { position:absolute; top:var(--sp-3); right:var(--sp-3); display:flex; gap:6px; }
/* 화 목록 — 작품 배너 + 화 줄 */
#work-reading-view { width:100%; max-width:1040px; min-width:0; margin:auto; }
.band { position:relative; overflow:hidden; min-height:300px; margin-bottom:var(--sp-5); border-radius:var(--r-xl); background:var(--panel); isolation:isolate; }
.band-media { position:absolute; inset:0; z-index:-2; }
.band-media img { width:100%; height:100%; object-fit:cover; }
.band-fade { position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(12,13,17,.92) 0%, rgba(12,13,17,.35) 60%, rgba(12,13,17,.55) 100%); }
.band-text { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:var(--sp-6); color:var(--on-image); }
.band-back { position:absolute; top:var(--sp-4); left:var(--sp-4); min-height:34px; padding:6px 12px; font-size:var(--fs-sm); }
.band-title { margin:0 0 var(--sp-2); font-size:var(--fs-3xl); font-weight:800; letter-spacing:-0.03em; line-height:1.15; overflow-wrap:anywhere; }
#work-reading-view button { min-height:auto; }
#work-reading-view .hero-actions button { min-height:44px; }
#work-reading-status:empty { display:none; }
#work-reading-list { display:grid; gap:var(--sp-2); margin:0; padding:0; list-style:none; }
.work-episode { display:flex; align-items:center; gap:var(--sp-4); width:100%; min-height:auto; padding:var(--sp-2); border:0; border-radius:var(--r-lg); background:transparent; color:var(--text); text-align:left; white-space:normal; }
.work-episode:hover { background:var(--panel); }
.work-episode-thumb { flex:none; width:144px; aspect-ratio:16 / 9; overflow:hidden; border-radius:var(--r-md); background:var(--panel-2); }
.work-episode-thumb img { width:100%; height:100%; object-fit:cover; }
.work-episode-thumb.is-empty { background:var(--panel-2); }
.work-episode-text { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--sp-2); min-width:0; flex:1; }
.work-episode-text strong { font-size:var(--fs-base); font-weight:700; }
.work-episode-text .dim { font-size:var(--fs-xs); }
.work-episode-preview { flex-basis:100%; overflow:hidden; color:var(--dim); font:var(--fs-sm)/1.6 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
#work-reading-list .work-episode.skel-block { height:96px; }
/* 읽기 */
#reader-view { max-width:1040px; }
.reader-bar { margin-bottom:var(--sp-4); }
.reader-bar h1 { font-size:var(--fs-base); font-weight:600; color:var(--dim); }
.reader-bar #reader-back { background:transparent; color:var(--dim); padding-left:0; }
.reader-bar #reader-back:hover { color:var(--text); }
.reader-mode { padding:4px; border:0; border-radius:var(--r-md); background:var(--panel-2); }
.reader-mode button { min-height:32px; padding:6px 14px; border-radius:7px; background:transparent; color:var(--dim); font-size:var(--fs-sm); }
.reader-mode button[aria-pressed="true"] { background:var(--panel-3); color:var(--text); box-shadow:none; }
.story { max-width:680px; font:var(--fs-lg)/2 var(--serif); color:var(--text-soft); word-break:keep-all; }
.story-head { margin:var(--sp-5) 0 var(--sp-7); text-align:center; }
.story-title { margin:var(--sp-2) 0 0; font:800 var(--fs-3xl)/1.15 var(--sans); letter-spacing:-0.03em; color:var(--text); }
.story-art { margin:var(--sp-6) -80px; }
.story-art-frame { border-radius:var(--r-lg); }
.story-caption { font-family:var(--sans); }
.reader-episodes button { background:var(--panel-2); }
/* 비주얼 노벨 — 상자 없이 그림 위 글자 */
.vn { background:#000; border-radius:var(--r-xl); }
.vn-stage img { width:100%; height:100%; object-fit:cover; }
.vn-box { margin:0; padding:var(--sp-8) var(--sp-7) var(--sp-5); border-radius:0; background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); backdrop-filter:none; color:var(--on-image); }
.vn-text { max-width:900px; min-height:3.6em; font:500 22px/1.75 var(--serif); text-shadow:0 2px 12px rgba(0,0,0,.6); }
.vn-nav { justify-content:flex-start; gap:var(--sp-3); margin-top:var(--sp-4); }
.vn-nav button { min-height:34px; width:40px; padding:0; border:0; border-radius:var(--r-md); background:rgba(255,255,255,.12); color:var(--on-image); }
.vn-nav button:hover { background:rgba(255,255,255,.22); }
.vn-nav .meta { color:rgba(244,241,236,.7); }
/* 쓰기 */
#manuscript-view { max-width:1240px; }
.manuscript-head h1 { font-size:var(--fs-xl); font-weight:800; }
#manuscript-view .manuscript-head button { background:var(--panel-2); }
.manuscript-tabs { display:inline-flex; gap:2px; padding:4px; margin:var(--sp-4) 0 var(--sp-5); border:0; border-radius:var(--r-lg); background:var(--panel-2); }
#manuscript-view .manuscript-tabs button { min-height:36px; padding:7px 16px; border:0; border-radius:var(--r-md); background:transparent; color:var(--dim); font-size:var(--fs-md); font-weight:600; }
#manuscript-view .manuscript-tabs [aria-selected="true"] { background:var(--panel-3); color:var(--text); }
.manuscript-tools { margin:0 0 var(--sp-3); }
.manuscript-tools select { min-height:38px; border-radius:var(--r-md); }
.manuscript-save { top:var(--sp-2); padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border:0; border-radius:var(--r-lg); background:var(--panel); }
#manuscript-status::before { background:var(--ok); box-shadow:0 0 0 4px rgba(var(--ok-rgb),.15); }
.auto-status { background:transparent; padding:var(--sp-2) var(--sp-1); color:var(--dim); }
.desk { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:var(--sp-5); margin-top:var(--sp-3); }
#manuscript-input { height:clamp(320px, calc(var(--story-viewport-height, 100dvh) - 300px), 900px); padding:var(--sp-6) var(--sp-7); border:0; border-radius:var(--r-lg); background:var(--panel); color:var(--text-soft); font:var(--fs-lg)/2 var(--serif); }
#manuscript-input:focus { box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5); }
.desk-side { align-self:start; position:sticky; top:72px; padding:var(--sp-5); border-radius:var(--r-lg); background:var(--panel); }
.side-title { margin:0 0 var(--sp-3); color:var(--dim); font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; }
.side-title + * + .side-title, .desk-cast + .side-title { margin-top:var(--sp-5); }
.desk-cast { display:grid; gap:var(--sp-3); }
.desk-person { display:flex; gap:var(--sp-3); align-items:flex-start; }
.desk-avatar { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--panel-3); color:var(--accent); font-weight:800; }
.desk-person strong { font-size:var(--fs-md); }
.desk-person p { margin:2px 0 0; font-size:var(--fs-xs); line-height:1.55; }
.desk-art { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.desk-art > p { grid-column:1 / -1; margin:0; font-size:var(--fs-sm); }
.desk-thumb { position:relative; display:block; min-height:0; padding:0; overflow:hidden; aspect-ratio:16 / 9; border-radius:var(--r-md); background:var(--panel-2); }
.desk-thumb-media, .desk-thumb-media img { width:100%; height:100%; object-fit:cover; }
.desk-thumb-state { position:absolute; inset:auto 6px 6px; color:var(--dim); font-size:11px; white-space:normal; }
/* 설정집·미리보기·설정 */
.cast-card, .panel { border:0; border-radius:var(--r-lg); background:var(--panel); }
.style-option { border:1px solid var(--border); background:var(--panel); }
#work-dialog { border:1px solid var(--border); border-radius:var(--r-xl); background:var(--panel); color:var(--text); box-shadow:var(--shadow-pop); }
#work-dialog::backdrop { background:rgba(0,0,0,.6); backdrop-filter:blur(2px); }
@media (max-width:800px) {
  .hero { min-height:440px; margin:0 0 var(--sp-5); border-radius:var(--r-lg); }
  .hero-fade { background:linear-gradient(0deg, rgba(12,13,17,.95) 10%, rgba(12,13,17,.55) 55%, rgba(12,13,17,.15)); }
  .hero-text { left:var(--sp-5); right:var(--sp-5); bottom:var(--sp-5); max-width:none; }
  .hero-title { font-size:38px; }
  .band { min-height:260px; border-radius:var(--r-lg); }
  .band-text { padding:var(--sp-5); }
  .band-title { font-size:var(--fs-2xl); }
  .work-episode-thumb { width:104px; }
  .story-title { font-size:var(--fs-2xl); }
  .story-art { margin:var(--sp-5) -16px; }
  .story-art-frame { border-radius:0; }
  .vn-box { padding:var(--sp-7) var(--sp-5) var(--sp-4); }
  .vn-text { font-size:var(--fs-lg); }
  .desk { grid-template-columns:1fr; }
  .desk-side { position:static; }
  #manuscript-input { padding:var(--sp-5); }
  .manuscript-tabs { display:flex; width:100%; }
  #manuscript-view .manuscript-tabs button { flex:1; padding:7px 4px; }
}
/* 아이콘 묶음 SVG(index.html 아래쪽) — 화면에 자리를 차지하지 않게 */
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.sprite-hidden { display:none; }
/* 화 목록 줄은 grid 칸을 넘지 않는다(긴 미리보기 글이 줄을 늘리지 않게) */
#work-reading-list { grid-template-columns:minmax(0, 1fr); }
#work-reading-list > li, .work-episode { min-width:0; }

/* 화면 전환 때 코드로 옮긴 제목 포커스는 테두리 없이(예전 id 규칙보다 앞서게) */
#work-reading-view [tabindex="-1"]:focus, #reader-view [tabindex="-1"]:focus, #manuscript-view [tabindex="-1"]:focus { outline:none; }

/* 루프 영상 — 움직이는 삽화 알약, 삽화 모아보기(화별 격자·선택 모드), 움직임 고르기 */
.story-art-frame, .gallery-thumb { position:relative; }
.story-art-frame video, .vn-stage video { display:block; width:100%; height:100%; object-fit:cover; }
.motion-badge { position:absolute; right:var(--sp-2); bottom:var(--sp-2); padding:2px var(--sp-2); border-radius:var(--r-pill); background:var(--on-image-bg); color:var(--on-image); font:600 var(--fs-xs)/1.5 var(--sans); pointer-events:none; }
.motion-state { flex-basis:100%; margin:0; color:var(--dim); font:var(--fs-sm)/1.6 var(--sans); overflow-wrap:anywhere; }
.motion-choices { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin:var(--sp-2) 0 var(--sp-3); }
.motion-choice { display:inline-flex; align-items:center; gap:var(--sp-2); font:var(--fs-sm)/1.6 var(--sans); }
.gallery-group { margin:0 0 var(--sp-6); }
.gallery-group-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin:0 0 var(--sp-3); }
.gallery-group-head h3 { margin:0; font-size:var(--fs-xl); font-weight:700; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:var(--sp-5) var(--sp-4); }
.gallery-card { display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.gallery-thumb { overflow:hidden; aspect-ratio:16 / 9; border-radius:var(--r-md); background:var(--panel-2); }
.gallery-thumb img, .gallery-thumb video { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-thumb.is-waiting, .gallery-thumb.is-failed { display:flex; align-items:center; justify-content:center; padding:var(--sp-3); }
.gallery-thumb.is-waiting { background:var(--skel-base) linear-gradient(100deg, transparent 30%, var(--skel-shine) 50%, transparent 70%) no-repeat; background-size:200% 100%; animation:skel-shimmer 1.4s ease-in-out infinite, skel-breathe 2.8s ease-in-out infinite; }
.gallery-check { position:absolute; top:var(--sp-2); left:var(--sp-2); width:22px; height:22px; margin:0; }
.gallery-caption { margin:0; font-size:var(--fs-md); font-weight:600; overflow-wrap:anywhere; }
.gallery-state { margin:0; font-size:var(--fs-sm); overflow-wrap:anywhere; }
.gallery-card .art-actions { margin-top:0; }
@media (prefers-reduced-motion:reduce) { .gallery-thumb.is-waiting { animation:none; } }

/* 2026-11-14 Settings > 화면: 밤·낮 세그먼트(아이콘 + 이름). */
.theme-pick { margin-top:var(--sp-3); }
.theme-pick button { gap:var(--sp-2); min-height:40px; padding:8px 18px; }
.theme-pick .ico { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#settings-font-panel[hidden], #settings-display-panel[hidden], #settings-subtab-font[hidden] { display:none; }

/* 작품 화면 뱃지: 장르 태그 · 조회수 · 평점. 그림 위라 테마와 상관없이 어두운 반투명 알약. */
.work-badges { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-3); padding:0; list-style:none; }
.work-badges[hidden] { display:none; }
.work-badge { display:inline-flex; align-items:center; gap:var(--sp-1); min-height:26px; padding:2px 10px; border-radius:var(--r-pill); background:var(--on-image-bg); color:var(--on-image); font-size:var(--fs-xs); font-weight:600; font-variant-numeric:tabular-nums; }
.work-badge .ico { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.work-badge.is-genre { box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55); }
.work-badge.is-rating .ico { fill:var(--accent); stroke:var(--accent); }

/* 내 평점: 별 다섯 개(라디오). 고른 별까지 호박색으로 채운다. */
.work-rate { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-4); font-size:var(--fs-sm); }
.work-rate[hidden] { display:none; }
.rate-stars { display:inline-flex; gap:2px; }
#work-reading-view .rate-star { min-width:36px; min-height:36px; padding:0; background:transparent; color:var(--dim); }
.rate-star:hover { color:var(--accent); background:transparent; }
.rate-star .ico { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.rate-star.is-on { color:var(--accent); }
.rate-star.is-on .ico { fill:currentColor; }

/* 쓰기 > 설정 > 장르: 누름 상태 알약. 3개를 고르면 나머지는 잠긴다. */
.genre-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0 var(--sp-2); }
.genre-chip { min-height:36px; padding:6px 14px; border-radius:var(--r-pill); background:var(--panel-2); color:var(--text-soft); font-weight:500; }
.genre-chip[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); font-weight:700; }
.genre-chip:disabled { opacity:.4; cursor:not-allowed; }

/* 작품 배너는 글(제목·뱃지·개요·버튼)이 길어지면 같이 커진다. 위쪽은 "내 작품" 버튼 자리만큼 비운다. */
.band-text { position:relative; inset:auto; min-height:300px; padding-top:calc(var(--sp-4) + 34px + var(--sp-4)); }
@media (max-width:800px) { .band-text { min-height:260px; padding-top:calc(var(--sp-4) + 34px + var(--sp-3)); } }