@font-face {
  font-family:"Noto Sans KR";
  src:url("/static/fonts/NotoSansKR-Variable.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* 쓰작 — 작가용 화면.
   테마 토큰을 body.writer에 재정의해 이 페이지만 밝은/어두운 테마를 갖는다.
   기본은 '밝게'. data-theme="dark"면 어둡게. */

/* 화면을 아래로 당겼을 때 브라우저가 새로고침하지 않게 한다 —
   설정을 짜다가 실수로 당기면 페이지가 다시 뜨면서 하던 게 끊긴다. (앱처럼 동작) */
html:has(body.writer), body.writer { overscroll-behavior-y: contain; }
html:has(body.writer) { max-width: 100%; overflow-x: hidden; }

body.writer {
  max-width: 720px;
  min-width: 0;
  overflow-x: hidden;
  /* ── 밝은 테마 (기본) ── */
  --bg: #f4f1ea;
  --bg-tint: #efe9dd;
  --panel: #ffffff;
  --panel2: #f3eee4;
  --text: #2b2721;
  --dim: #8a8375;
  --line: #e8e1d2;
  --line-soft: #f0ebe0;
  --accent: #7a5cf0;        /* 브랜드 — 보라 */
  --accent-soft: rgba(122, 92, 240, .10);
  --accent2: #2f7fce;       /* 정보 — 파랑 */
  --gold: #b9822b;          /* 문학적 강조 */
  --bad: #d55f57;
  --grad: linear-gradient(135deg, #8b70ff, #6a54f0);
  --shadow-sm: 0 1px 2px rgba(50, 40, 15, .05);
  --shadow: 0 6px 22px -10px rgba(60, 48, 20, .18), 0 2px 6px rgba(60, 48, 20, .05);
  --shadow-lg: 0 18px 44px -16px rgba(50, 40, 20, .28);
  --radius: 16px;
  --radius-sm: 11px;
  --writer-safe-top: max(env(safe-area-inset-top, 0px), var(--app-safe-top, 0px));
  --writer-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--app-safe-bottom, 0px));

  background:
    radial-gradient(1100px 520px at 50% -8%, var(--bg-tint), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Figma 332:219 / 332:401 — 소설 계열 네 장르의 공통 책꽂이 */
body.writer:has(#w-home:not(.hidden)) {
  max-width:375px;
  padding-bottom:0;
  background:#fff;
  color:#0f0f0f;
}
body.writer:has(#w-home:not(.hidden)) #app-nav { display:none!important; }
.writer-shelf-screen {
  position:relative;
  width:min(100%,375px);
  height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  padding:0;
  gap:0;
  overflow:hidden;
  border-radius:28px 28px 0 0;
  background:#fff;
  color:#0f0f0f;
  font-family:"Noto Sans KR",sans-serif;
}
.writer-shelf-breadcrumb {
  position:absolute;
  /* Android WebView가 상태 표시줄만큼 이미 콘텐츠를 내리므로 safe-top을 다시 더하지 않는다. */
  top:23px;
  left:30px;
  width:260px;
  height:21px;
  margin:0;
  color:#7a7a7a;
  font-size:16px;
  font-weight:400;
  line-height:normal;
  white-space:nowrap;
}
.writer-shelf-breadcrumb strong { color:#0f0f0f; font-weight:400; }
.writer-shelf-heading {
  position:absolute;
  top:calc(88px + var(--writer-safe-top));
  left:0;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  text-align:center;
}
.writer-shelf-heading h1 { height:37px; margin:0; color:#0f0f0f; font-size:20px; font-weight:700; line-height:normal; }
.writer-shelf-heading p { margin:0; color:#7a7a7a; font-size:16px; font-weight:400; line-height:normal; }
.writer-shelf-divider {
  position:absolute;
  top:calc(181px + var(--writer-safe-top));
  left:20px;
  width:335px;
  height:1px;
  background:#e6e6e6;
}
.writer-shelf-list {
  position:absolute;
  top:calc(212px + var(--writer-safe-top));
  bottom:179px;
  left:20px;
  width:335px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
}
.writer-shelf-list::-webkit-scrollbar { display:none; }
.writer-shelf-book { position:relative; width:335px; height:130px; }
.writer-shelf-book::after { content:""; position:absolute; top:99px; left:0; width:335px; height:1px; background:#e6e6e6; }
body.writer .writer-shelf-open {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  min-height:100px;
  margin:0;
  padding:0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#0f0f0f!important;
  text-align:left;
  box-shadow:none!important;
}
.writer-shelf-tag {
  position:absolute;
  top:0;
  left:9px;
  min-width:59px;
  height:18px;
  padding:1px 10px 0;
  border-radius:6px;
  background:#0f0f0f;
  color:#fff;
  font-size:12px;
  font-weight:400;
  line-height:17px;
  text-align:center;
  white-space:nowrap;
}
.writer-shelf-open b { position:absolute; top:29px; left:9px; overflow:hidden; width:272px; color:#0f0f0f; font-size:18px; font-weight:700; line-height:normal; text-overflow:ellipsis; white-space:nowrap; }
.writer-shelf-open small { position:absolute; top:55px; left:9px; color:#7a7a7a; font-size:11px; font-weight:400; line-height:normal; white-space:nowrap; }
body.writer .writer-shelf-delete {
  position:absolute;
  z-index:2;
  top:-10px;
  left:285px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-height:44px;
  margin:0;
  padding:10px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.writer-shelf-delete img { display:block; width:24px; height:24px; }
.writer-shelf-empty { position:absolute; top:calc(227px + var(--writer-safe-top)); left:0; width:100%; margin:0; padding:0; border:0; background:transparent; color:#0f0f0f; text-align:center; box-shadow:none; }
.writer-shelf-empty img { display:block; width:45px; height:45px; margin:0 auto; object-fit:cover; }
.writer-shelf-empty b { display:block; margin-top:14px; font-size:18px; font-weight:700; line-height:normal; }
body.writer #w-new.writer-shelf-new {
  border:0!important;
  border-radius:6px!important;
  background:#0f0f0f!important;
  color:#fff!important;
  font:700 14px/44px inherit;
  box-shadow:none!important;
}
.writer-shelf-nav { position:absolute; right:0; bottom:0; left:0; height:calc(63px + var(--writer-safe-bottom)); border:0; background:#fff; }
body.writer .writer-shelf-nav button {
  position:absolute;
  bottom:calc(29px + max(0px, var(--writer-safe-bottom) - 31px));
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-height:44px;
  margin:0;
  padding:10px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.writer-shelf-nav button:nth-child(1) { left:49px; }
.writer-shelf-nav button:nth-child(2) { left:166px; }
.writer-shelf-nav button:nth-child(3) { left:283px; }
.writer-shelf-nav img { display:block; width:24px; height:24px; object-fit:contain; }

@media (max-width:374px) {
  .writer-shelf-divider,.writer-shelf-list { width:calc(100% - 40px); }
  .writer-shelf-book,.writer-shelf-book::after { width:100%; }
  body.writer #w-new.writer-shelf-new { width:calc(100% - 40px); }
  .writer-shelf-nav button:nth-child(1) { left:calc(16.667% - 22px); }
  .writer-shelf-nav button:nth-child(2) { left:calc(50% - 22px); }
  .writer-shelf-nav button:nth-child(3) { left:calc(83.333% - 22px); }
}

/* Figma 379:1515 / 379:1561 / 379:1709 / 380:1943 / 380:1841 — 직접 만들기 */
body.writer:has(#w-wizard.writer-manual-flow-mode:not(.hidden)) {
  width:100%; max-width:375px; padding:0; background:#fff; color:#0f0f0f;
}
body.writer:has(#w-wizard.writer-manual-flow-mode:not(.hidden)) #app-nav { display:none!important; }
body.writer #w-wizard.writer-manual-flow-mode {
  position:relative; width:min(100%,375px); height:100dvh; min-height:100dvh;
  margin:0 auto; padding:0; gap:0; overflow:hidden; border-radius:28px 28px 0 0;
  background:#fff; color:#0f0f0f; font-family:"Noto Sans KR",sans-serif;
}
body.writer #w-wizard.writer-manual-flow-mode > .writer-create-back { display:grid; }
body.writer #w-wizard.writer-manual-flow-mode > .wz-figma-breadcrumb { display:block; }
body.writer #w-wizard.writer-manual-flow-mode > .wz-result-nav { display:grid; }
body.writer #w-wizard.writer-manual-flow-mode > .app-top,
body.writer #w-wizard.writer-manual-flow-mode > .wz-top { display:none; }
body.writer #w-wizard.writer-manual-flow-mode #wzp-1 {
  position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0;
}
body.writer #w-wizard.writer-manual-flow-mode #wzp-1::after {
  content:""; position:absolute; top:184px; left:20px; width:calc(100% - 40px); height:1px; background:#e6e6e6;
}
body.writer #w-wizard.writer-manual-flow-mode #wzp-1 > .wz-kicker { display:none; }
body.writer #w-wizard.writer-manual-flow-mode #wzp-1 > .wz-q {
  position:absolute; z-index:1; top:86px; left:0; width:100%; margin:0;
  color:#0f0f0f; font:700 26px/normal "Noto Sans KR",sans-serif; letter-spacing:normal; text-align:center;
}
body.writer #w-wizard.writer-manual-flow-mode #wzp-1 > .wz-sub {
  position:absolute; z-index:1; top:125px; left:0; width:100%; margin:0;
  color:#7a7a7a; font:400 13px/17px "Noto Sans KR",sans-serif; text-align:center; white-space:pre-line;
}
body.writer #w-wizard.writer-manual-flow-mode > #wz-foot {
  position:fixed; z-index:32; right:auto; bottom:var(--sseujak-primary-action-bottom); left:50%;
  display:block; width:min(calc(100% - 40px),335px); height:44px; margin:0; padding:0;
  transform:translateX(-50%); border:0; background:transparent;
}
body.writer #w-wizard.writer-manual-flow-mode > #wz-foot .wz-row { display:block; width:100%; height:44px; margin:0; padding:0; }
body.writer #w-wizard.writer-manual-flow-mode > #wz-foot .btn-prev { display:none; }
body.writer #w-wizard.writer-manual-flow-mode > #wz-foot .btn-main {
  display:block; width:100%; height:44px; min-height:44px; margin:0; padding:0;
  border:0!important; border-radius:6px!important; background:#0f0f0f!important; color:#fff!important;
  font:700 14px/44px "Noto Sans KR",sans-serif; box-shadow:none!important;
}

body.writer #w-wizard.writer-manual-basic #wz-step-body { position:absolute; top:241px; left:20px; width:calc(100% - 40px); height:384px; }
body.writer #w-wizard.writer-manual-basic #wz-step-body .basic-ai-intro { display:none; }
body.writer #w-wizard.writer-manual-basic #wz-step-body .basic-field { position:absolute; left:0; display:block; width:100%; margin:0; padding:0; }
body.writer #w-wizard.writer-manual-basic #wz-step-body .basic-field:first-of-type { top:0; }
body.writer #w-wizard.writer-manual-basic #wz-step-body .basic-field:last-of-type { top:111px; }
body.writer #w-wizard.writer-manual-basic #wz-step-body .basic-field > span {
  display:block; height:19px; margin:0 0 7px; color:#0f0f0f; font:700 14px/normal "Noto Sans KR",sans-serif;
}
body.writer #w-wizard.writer-manual-basic #wz-step-body .wz-in {
  display:block; width:100%; margin:0; border:1px solid rgba(253,111,141,.3)!important; border-radius:8px;
  background:#f6f6f6!important; color:#0f0f0f; box-shadow:none!important;
}
body.writer #w-wizard.writer-manual-basic #wz-step-body input.wz-in {
  height:48px; min-height:48px; padding:0 13px; font:700 16px/48px "Noto Sans KR",sans-serif;
}
body.writer #w-wizard.writer-manual-basic #wz-step-body textarea.wz-in {
  height:247px; min-height:247px; max-height:247px; padding:15px; resize:none; font:350 14px/22px "Noto Sans KR",sans-serif;
}

body.writer #w-wizard.writer-manual-era #wz-step-body { position:absolute; top:238px; left:31px; width:calc(100% - 62px); height:215px; }
body.writer #w-wizard.writer-manual-era #wz-step-body > .chips {
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:16px 9px; width:100%; margin:0;
}
body.writer #w-wizard.writer-manual-era #wz-step-body .chip {
  flex:0 0 auto; width:auto; height:38px; min-height:38px; margin:0; padding:0 20px;
  border:0!important; border-radius:75px!important; background:#e5eafc!important; color:#0f0f0f!important;
  font:400 14px/38px "Noto Sans KR",sans-serif; white-space:nowrap;
  box-shadow:17px 26px 25px rgba(226,226,226,.25)!important;
}
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(1),
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(6),
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(7) { width:60px; padding:0; }
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(2),
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(9) { width:101px; padding:0; }
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(3),
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(4),
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(5) { width:85px; padding:0; }
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(8) { width:153px; padding:0; }
body.writer #w-wizard.writer-manual-era #wz-step-body .chip:nth-child(10) { width:144px; padding:0; }
body.writer #w-wizard.writer-manual-era #wz-step-body .chip.on {
  background:linear-gradient(178.245deg,#9c2cf3 13.491%,#3a49f9 109.75%)!important; color:#fff!important; font-weight:700;
}

/* Figma 384:379 — 기존 플롯 데이터를 그대로 쓰는 공통 이야기 구조 선택 화면. */
body.writer #w-wizard.writer-manual-plot > .wz-figma-menu { top:32px!important; }
body.writer #w-wizard.writer-manual-plot #wzp-1::after { top:182px; }
body.writer #w-wizard.writer-manual-plot #wzp-1 > .wz-q { top:86px; }
body.writer #w-wizard.writer-manual-plot #wzp-1 > .wz-sub { top:125px; }
body.writer #w-wizard.writer-manual-plot #wz-step-body {
  position:absolute; z-index:2; top:202px; right:20px; bottom:var(--sseujak-primary-action-reserved); left:20px;
  width:auto; height:auto; margin:0; padding:0 0 24px; overflow-x:hidden; overflow-y:auto;
  overscroll-behavior:contain; scrollbar-width:none;
}
body.writer #w-wizard.writer-manual-plot #wz-step-body::-webkit-scrollbar { display:none; }
body.writer .figma-plot-ai {
  display:flex; align-items:center; width:100%; height:72px; min-height:72px; margin:0; padding:0 16px;
  border:1px solid rgba(253,111,141,.3)!important; border-radius:8px!important;
  background:#f6f6f6!important; color:#0f0f0f!important; text-align:left; box-shadow:none!important;
}
.figma-plot-ai-avatar {
  flex:0 0 39px; width:39px; height:39px; margin:0 13px 0 0; overflow:hidden; border-radius:50%;
}
.figma-plot-ai-avatar img { display:block; width:58px; height:53px; transform:translate(0,-2px); }
.figma-plot-ai > span:last-child { display:block; min-width:0; }
.figma-plot-ai b { display:block; font:700 16px/normal "Noto Sans KR",sans-serif; white-space:nowrap; }
.figma-plot-ai small { display:block; margin-top:3px; color:#7a7a7a; font:400 13px/normal "Noto Sans KR",sans-serif; white-space:nowrap; }

/* Figma 385:536 / 385:613 — AI 이야기 구조 입력·추천 시트. */
.plot-ai-back,
.plot-complete-back {
  position:fixed; z-index:210; inset:0; margin:auto; width:min(100%,375px);
  background:rgba(0,0,0,.3);
}
.plot-ai-sheet {
  position:fixed; z-index:211; left:50%; width:min(100%,375px); margin:0;
  border-radius:30px; background:#fff; color:#0f0f0f;
  font-family:"Noto Sans KR",sans-serif; transform:translateX(-50%); box-shadow:none;
}
.plot-ai-input-sheet { top:calc(100dvh - 592px); height:592px; }
.plot-ai-result-sheet { top:calc(100dvh - 592px); height:592px; }
.plot-ai-close {
  position:absolute; z-index:2; top:30px; right:22px; display:grid; place-items:center;
  width:24px; height:24px; min-height:24px; margin:0; padding:0; border:0!important;
  border-radius:0!important; background:transparent!important; box-shadow:none!important;
}
.plot-ai-close img { display:block; width:24px; height:24px; }
.plot-ai-sheet-avatar {
  position:absolute; top:22px; left:166px; display:block; width:39px; height:39px;
  overflow:hidden; border-radius:50%;
}
.plot-ai-sheet-avatar img { display:block; width:58px; height:53px; transform:translate(0,-2px); }
.plot-ai-sheet h2 {
  position:absolute; top:78px; left:20px; width:335px; margin:0; color:#0f0f0f;
  font:700 15px/normal "Noto Sans KR",sans-serif; text-align:center;
}
.plot-ai-sheet-help {
  position:absolute; top:102px; left:20px; width:335px; margin:0; color:#7a7a7a;
  font:400 13px/18px "Noto Sans KR",sans-serif; text-align:center;
}
.plot-ai-input-sheet textarea {
  position:absolute; top:180px; left:18px; width:337px; height:253px; margin:0; padding:15px 17px;
  resize:none; border:.5px solid #7a7a7a!important; border-radius:0!important; outline:0; background:#f6f6f6!important;
  color:#0f0f0f; font:350 14px/20px "Noto Sans KR",sans-serif; box-shadow:none;
}
.plot-ai-input-sheet textarea::placeholder { color:#7a7a7a; opacity:1; }
body.writer .plot-ai-primary {
  position:absolute; left:20px; bottom:var(--sseujak-sheet-action-bottom);
  width:335px; height:44px; min-height:44px; margin:0; padding:0!important;
  border:0!important; border-radius:6px!important; background:#0f0f0f!important;
  color:#fff!important; font-family:"Noto Sans KR",sans-serif; font-size:14px; font-weight:700;
  box-shadow:none!important;
}
body.writer .plot-ai-primary:disabled { opacity:.55; }
.plot-ai-recommendation {
  position:absolute; top:125px; left:20px; width:335px; height:135px; margin:0; padding:12px 21px;
  overflow:hidden; border:.3px solid #ccc; border-radius:8px; background:#f6f6f6; color:#0f0f0f;
}
.plot-ai-recommendation > b { display:block; margin:0; font:700 16px/normal "Noto Sans KR",sans-serif; }
.plot-ai-recommendation > strong { display:block; margin-top:3px; color:#fd6f8d; font:700 14px/normal "Noto Sans KR",sans-serif; }
.plot-ai-recommendation > p { margin:7px 0 0; color:#7e7e7e; font:400 13px/18px "Noto Sans KR",sans-serif; }
.plot-ai-recommendation > small { display:block; margin-top:5px; color:#0f0f0f; font:400 12px/normal "Noto Sans KR",sans-serif; }
.plot-ai-guidance {
  position:absolute; top:289px; left:40px; width:296px; max-height:120px; margin:0; overflow-y:auto;
  color:#0f0f0f; font:400 14px/20px "Noto Sans KR",sans-serif; white-space:pre-line; scrollbar-width:none;
}
.plot-ai-guidance::-webkit-scrollbar { display:none; }
.plot-ai-result-sheet .plot-ai-primary { bottom:var(--sseujak-sheet-action-bottom); }

/* Figma 387:184 — 작품 설정 완성 팝업. */
.plot-complete-back { z-index:220; }
.plot-complete-modal {
  position:fixed; z-index:221; top:calc(50% - 95px); left:50%; width:289px; height:158px;
  margin:0; border-radius:30px; background:#fff; color:#0f0f0f;
  font-family:"Noto Sans KR",sans-serif; transform:translateX(-50%); box-shadow:none;
}
.plot-complete-modal h2 {
  position:absolute; top:17px; left:16px; width:257px; margin:0; color:#0f0f0f;
  font:700 18px/29px "Noto Sans KR",sans-serif; text-align:center;
}
body.writer .plot-complete-modal button {
  position:absolute; top:105px; left:92px; width:103px; height:24px; min-height:24px; margin:0; padding:0;
  border:0!important; border-radius:75px!important; background:#0b86f7!important; color:#fff!important;
  font:500 13px/24px "Noto Sans KR",sans-serif; box-shadow:none!important;
}

body.keyboard-open .plot-ai-input-sheet {
  top:var(--visual-viewport-top,0px); height:var(--visual-viewport-height,100dvh); border-radius:30px;
}
body.keyboard-open .plot-ai-input-sheet textarea { bottom:84px; height:auto; }
body.keyboard-open .plot-ai-input-sheet .plot-ai-primary { bottom:20px; }
body.writer #w-wizard.writer-manual-plot #wz-step-body > .opt-cards {
  display:grid; gap:10px; width:100%; margin:43px 0 0;
}
body.writer #w-wizard.writer-manual-plot #wz-step-body .optc {
  display:block; width:100%; min-height:150px; margin:0; padding:14px 21px 12px;
  border:.3px solid #ccc!important; border-radius:8px!important; background:#f6f6f6!important;
  color:#0f0f0f!important; text-align:left; box-shadow:none!important;
}
body.writer #w-wizard.writer-manual-plot #wz-step-body .optc.on {
  border-color:#fd6f8d!important; background:#f6f6f6!important;
}
body.writer #w-wizard.writer-manual-plot #wz-step-body .optc > b {
  display:block; margin:0; font:700 16px/normal "Noto Sans KR",sans-serif;
}
body.writer #w-wizard.writer-manual-plot #wz-step-body .optc > i {
  display:block; margin:3px 0 0; color:#fd6f8d; font:700 14px/normal "Noto Sans KR",sans-serif;
}
body.writer #w-wizard.writer-manual-plot #wz-step-body .optc > p {
  margin:5px 0 0; color:#7e7e7e; font:400 13px/normal "Noto Sans KR",sans-serif; white-space:pre-line;
}
body.writer #w-wizard.writer-manual-plot #wz-step-body .optc > small {
  display:block; margin:9px 0 0; color:#0f0f0f; font:400 13px/normal "Noto Sans KR",sans-serif;
}
body.writer #w-wizard.writer-manual-plot > #wz-foot { bottom:var(--sseujak-primary-action-bottom); }
body.writer #w-wizard.writer-manual-plot > .wz-result-nav {
  align-items:start!important; padding-top:13px!important;
}
body.writer #w-wizard.writer-manual-plot > .wz-result-nav > button { margin-bottom:0!important; }

body.writer #w-wizard.writer-manual-cast #wz-step-body { position:static; width:100%; height:100%; }
.figma-cast-flow { position:absolute; top:218px; left:20px; right:20px; bottom:var(--sseujak-primary-action-reserved); overflow-y:auto; overflow-x:hidden; padding:0 2px 16px; }
.figma-cast-list { display:grid; gap:19px; width:100%; }
.figma-cast-empty { width:100%; min-height:152px; text-align:center; }
.figma-cast-empty img { display:block; width:98px; height:98px; margin:0 auto; object-fit:contain; transform:translateX(-8px); }
.figma-cast-empty b { display:block; margin-top:14px; color:#0f0f0f; font:700 20px/normal "Noto Sans KR",sans-serif; }
body.writer .figma-cast-row {
  display:grid; grid-template-columns:57px minmax(0,1fr) 1px 80px; align-items:center; gap:13px;
  width:100%; height:51px; min-height:51px; margin:0; padding:0 16px 0 14px;
  border:0!important; border-radius:8px!important; background:#f0efef!important; color:#0f0f0f!important; text-align:left; box-shadow:none!important;
}
.figma-cast-row > b { overflow:hidden; font:700 17px/normal "Noto Sans KR",sans-serif; white-space:nowrap; }
.figma-cast-row > b { text-overflow:ellipsis; }
.figma-cast-row > i { display:block; width:1px; height:15px; background:#fd6f8d; }
.figma-cast-age { font:400 15px/normal "Noto Sans KR",sans-serif; white-space:nowrap; }
.figma-cast-role {
  display:block; width:57px; height:24px; overflow:hidden; text-overflow:ellipsis; border-radius:75px; color:#fff;
  font:500 13px/24px "Noto Sans KR",sans-serif; text-align:center; white-space:nowrap;
}
.figma-cast-role.lead { background:#0088ff; }
.figma-cast-role.enemy { background:#ff2d55; }
.figma-cast-role.helper { background:#00c3d0; }
.figma-cast-role.other { background:#7a7a7a; }
body.writer .figma-cast-add {
  position:static; display:block; width:100%; height:28px; min-height:28px; margin:24px 0 0; padding:0;
  border:0!important; background:transparent!important; color:#0f0f0f!important;
  font:400 20px/28px "Noto Sans KR",sans-serif; text-align:center; box-shadow:none!important;
}
body.writer .figma-cast-ai {
  position:static; z-index:auto;
  display:flex; align-items:center; width:100%; height:72px; min-height:72px;
  margin:32px 0 0; padding:0; transform:none; border:1px solid rgba(253,111,141,.3)!important;
  border-radius:8px!important; background:#f6f6f6!important; color:#0f0f0f!important; text-align:left; box-shadow:none!important;
}
.figma-cast-ai > img {
  flex:0 0 39px; width:39px; height:39px; margin-left:33px; object-fit:none; object-position:0 -2px; overflow:hidden;
  -webkit-mask:url("/static/icons/writer-create-figma/ai-mask.svg") 0 0/39px 39px no-repeat;
  mask:url("/static/icons/writer-create-figma/ai-mask.svg") 0 0/39px 39px no-repeat;
}
.figma-cast-ai > span { display:block; margin-left:14px; }
.figma-cast-ai b { display:block; font:700 14px/normal "Noto Sans KR",sans-serif; }
.figma-cast-ai small { display:block; margin-top:4px; color:#7a7a7a; font:400 11px/normal "Noto Sans KR",sans-serif; }

body.writer #w-wizard.writer-manual-cast-detail #wzp-1::after { display:none; }
body.writer #w-wizard.writer-manual-cast-detail #wzp-1 > .wz-sub { display:none!important; }
body.writer #w-wizard.writer-manual-cast-detail #wz-step-body { position:static; width:100%; height:100%; }
body.writer .figma-character-head {
  position:absolute; top:141px; left:20px; display:flex;
  align-items:center; width:calc(100% - 40px); height:51px; min-height:51px; margin:0; padding:0 16px 0 14px;
  border:0!important; border-radius:8px!important; background:#eaeaea!important; color:#0f0f0f!important; text-align:left; box-shadow:none!important;
}
.figma-character-head > .figma-cast-role { flex:0 0 57px; }
.figma-character-head > b { flex:0 1 auto; max-width:82px; margin-left:13px; overflow:hidden; font:700 17px/normal "Noto Sans KR",sans-serif; white-space:nowrap; text-overflow:ellipsis; }
.figma-character-head > span:not(.figma-cast-role) { font:400 15px/normal "Noto Sans KR",sans-serif; }
.figma-character-head > .figma-character-separator { display:block; flex:0 0 1px; width:1px; height:15px; margin-left:10px; background:#fd6f8d; }
.figma-character-head > .figma-character-separator + span { flex:0 0 auto; margin-left:10px; white-space:nowrap; }
.figma-character-actions { display:flex!important; flex:0 0 55px; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto; }
body.writer .figma-character-actions > button {
  display:grid; place-items:center; width:24px; height:24px; min-height:24px; margin:0; padding:0;
  border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important;
}
.figma-character-actions img { display:block; width:21px; height:21px; }
.figma-character-actions .figma-character-delete img { width:24px; height:24px; }
.figma-character-label { position:absolute; top:221px; left:22px; font:700 14px/normal "Noto Sans KR",sans-serif; }
.figma-character-description,
.figma-character-facts {
  position:absolute; left:20px; width:calc(100% - 40px); border:1px solid rgba(253,111,141,.3); border-radius:8px; background:#f6f6f6; color:#0f0f0f;
}
.figma-character-description {
  top:247px; height:192px; padding:15px 15px 11px; overflow-x:hidden; overflow-y:auto; white-space:pre-line; font:350 14px/22px "Noto Sans KR",sans-serif;
}
.figma-character-facts { top:457px; height:186px; padding:15px; overflow-x:hidden; overflow-y:auto; }
.figma-character-facts p {
  display:grid; grid-template-columns:6px max-content minmax(0,1fr); column-gap:6px; align-items:start;
  min-height:26px; margin:0; font:400 14px/26px "Noto Sans KR",sans-serif; overflow-wrap:anywhere;
}
.figma-character-facts .figma-fact-bullet { color:#fd6f8d; font-style:normal; }
.figma-character-facts p > strong { color:#0f0f0f; font-weight:700; }
.figma-character-facts p > span { color:#494949; }

/* Figma 380:2098 — '+ 인물 추가'에서 여는 직접 인물 설정 시트 */
body.writer #w-wizard.writer-manual-cast-editor #wz-step-body { position:static; width:100%; height:100%; }
.figma-cast-editor-backdrop {
  position:absolute; z-index:90; top:-1px; left:0; width:100%; height:721px;
  border-radius:30px; background:rgba(15,15,15,.3);
}
.figma-cast-editor-sheet {
  position:absolute; z-index:91; top:220px; right:0; bottom:0; left:0;
  width:100%; height:calc(100% - 220px); min-height:0; margin:0;
  overflow:hidden; border-radius:30px 30px 0 0; background:#fff; color:#0f0f0f;
  font-family:"Noto Sans KR",sans-serif; box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.figma-cast-editor-sheet > h2 {
  position:absolute; z-index:3; top:31px; left:27px; height:26px; margin:0;
  font:700 18px/normal "Noto Sans KR",sans-serif;
}
body.writer .figma-cast-editor-close {
  position:absolute; z-index:4; top:30px; right:22px; display:grid; place-items:center;
  width:24px; height:24px; min-height:24px; margin:0; padding:0;
  border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important;
}
.figma-cast-editor-close img { display:block; width:24px; height:24px; }
.figma-cast-editor-scroll {
  position:absolute; z-index:1; top:69px; right:0; bottom:96px; left:0;
  overflow-x:hidden; overflow-y:auto; padding:0 27px 24px; overscroll-behavior:contain;
  scrollbar-width:none;
}
.figma-cast-editor-scroll::-webkit-scrollbar { display:none; }
.figma-cast-editor-basics { display:grid; grid-template-columns:minmax(0,1.34fr) minmax(0,1fr); gap:10px; width:100%; height:48px; }
body.writer .figma-cast-editor-basics input,
body.writer .figma-cast-editor-feature textarea,
body.writer .figma-cast-choice-detail {
  margin:0; border:1px solid rgba(253,111,141,.3)!important; border-radius:8px!important;
  background:#f6f6f6!important; color:#0f0f0f; font-family:"Noto Sans KR",sans-serif;
  outline:0; box-shadow:none!important;
}
body.writer .figma-cast-editor-basics input {
  width:100%; height:48px; min-height:48px; padding:0 13px; font-size:15px; font-weight:400; line-height:48px;
}
.figma-cast-editor-basics input::placeholder,
.figma-cast-editor-feature textarea::placeholder { color:#7a7a7a; opacity:1; }
.figma-cast-editor-feature { display:block; width:100%; margin:24px 0 0; }
.figma-cast-editor-feature > b,
.figma-cast-choice-section > h3 {
  display:block; margin:0; color:#0f0f0f; font:700 18px/normal "Noto Sans KR",sans-serif;
}
body.writer .figma-cast-editor-feature textarea {
  display:block; width:100%; height:177px; min-height:177px; max-height:177px;
  margin-top:10px; padding:10px 13px; resize:none; font-size:15px; font-weight:400; line-height:normal;
}
.figma-cast-editor-choices { width:100%; }
.figma-cast-choice-section { width:100%; margin-top:22px; }
.figma-cast-choice-section + .figma-cast-choice-section { margin-top:25px; }
.figma-cast-choice-chips { display:flex; flex-wrap:wrap; gap:13px 9px; width:100%; margin-top:9px; }
body.writer .figma-cast-choice-chip {
  flex:0 0 auto; width:auto; height:38px; min-height:38px; margin:0; padding:0 20px;
  border:0!important; border-radius:75px!important; background:#e5eafc!important; color:#0f0f0f!important;
  font:400 14px/38px "Noto Sans KR",sans-serif; white-space:nowrap;
  box-shadow:17px 26px 25px rgba(226,226,226,.25)!important;
}
body.writer .figma-cast-choice-section.role .figma-cast-choice-chip:nth-child(1) { width:83px; padding:0; }
body.writer .figma-cast-choice-section.role .figma-cast-choice-chip:nth-child(2),
body.writer .figma-cast-choice-section.role .figma-cast-choice-chip:nth-child(3),
body.writer .figma-cast-choice-section.role .figma-cast-choice-chip:nth-child(4) { width:85px; padding:0; }
body.writer .figma-cast-choice-section.role .figma-cast-choice-chip:nth-child(5),
body.writer .figma-cast-choice-section.role .figma-cast-choice-chip:nth-child(6),
body.writer .figma-cast-choice-section.role .figma-cast-choice-chip:nth-child(7) { width:56px; padding:0; }
body.writer .figma-cast-choice-chip.on {
  background:linear-gradient(178.731deg,#9c2cf3 13.491%,#3a49f9 109.75%)!important;
  color:#fff!important; font-weight:700;
}
body.writer .figma-cast-choice-detail {
  display:block; width:100%; height:48px; min-height:48px; margin-top:12px; padding:0 13px; font-size:14px;
}
body.writer .figma-cast-editor-next {
  position:absolute; z-index:4; bottom:52px; left:20px; display:block;
  width:calc(100% - 40px); height:44px; min-height:44px; margin:0; padding:0;
  border:0!important; border-radius:6px!important; background:#0f0f0f!important; color:#fff!important;
  font:700 14px/44px "Noto Sans KR",sans-serif; box-shadow:none!important;
}

/* Figma 380:2023 — 인물 AI 입력 시트 */
body.writer #world-ai-sheet[data-mode="cast"] #world-ai-fields { top:170px; left:20px; width:calc(100% - 40px); height:262px; }
body.writer #world-ai-sheet[data-mode="cast"] .world-ai-help { top:103px; }
body.writer #world-ai-sheet[data-mode="cast"] .world-ai-quota { top:121px; }
body.writer #world-ai-sheet[data-mode="cast"] #world-ai-start { display:block; top:452px; }
body.writer #world-ai-sheet[data-mode="cast"] .world-ai-avatar {
  object-fit:none; object-position:0 -2px; overflow:hidden;
  -webkit-mask:url("/static/icons/writer-create-figma/ai-mask.svg") 0 0/39px 39px no-repeat;
  mask:url("/static/icons/writer-create-figma/ai-mask.svg") 0 0/39px 39px no-repeat;
}

/* Figma 352:83 / 336:77 / 337:171 — 소설·웹툰 책 내부와 글 작성 화면 */
body.writer:has(#w-work:not(.hidden)),
body.writer:has(#w-editor:not(.hidden)) {
  max-width:375px;
  padding-bottom:0;
  background:#fff;
  color:#0f0f0f;
}
body.writer:has(#w-work:not(.hidden)) #app-nav,
body.writer:has(#w-editor:not(.hidden)) #app-nav { display:none; }

.writer-figma-work,
.writer-figma-editor {
  position:relative;
  width:min(100%,375px);
  height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  padding:0;
  gap:0;
  overflow:hidden;
  border-radius:28px 28px 0 0;
  background:#fff;
  color:#0f0f0f;
  font-family:"Noto Sans KR",sans-serif;
}
.writer-figma-work > .app-top,
.writer-figma-work > .wk-sub,
.writer-figma-work > .w-tabs { display:none; }
.writer-book-breadcrumb,
.writer-editor-breadcrumb {
  position:absolute;
  top:23px;
  left:30px;
  z-index:2;
  height:21px;
  margin:0;
  color:#7a7a7a;
  font-size:16px;
  font-weight:400;
  line-height:normal;
  white-space:nowrap;
}
.writer-book-breadcrumb i,
.writer-editor-breadcrumb i { margin:0 3px; color:#7a7a7a; font-style:normal; }
.writer-book-breadcrumb strong,
.writer-editor-breadcrumb strong { color:#0f0f0f; font-weight:400; }
.writer-book-head > h1 {
  position:absolute;
  top:calc(88px + var(--writer-safe-top));
  left:29px;
  overflow:hidden;
  width:317px;
  height:37px;
  margin:0;
  color:#0f0f0f;
  font-size:20px;
  font-weight:700;
  line-height:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.writer .writer-book-settings {
  position:absolute;
  top:calc(124px + var(--writer-safe-top));
  left:29px;
  z-index:2;
  display:grid;
  place-items:center;
  width:82px;
  height:24px;
  min-height:24px;
  margin:0;
  padding:0;
  border:0!important;
  border-radius:12px!important;
  background:#0f0f0f!important;
  color:#fff!important;
  font:400 13px/24px inherit;
  box-shadow:none!important;
}
.writer-book-divider {
  position:absolute;
  top:calc(181px + var(--writer-safe-top));
  left:20px;
  width:335px;
  height:1px;
  background:#e6e6e6;
}
.writer-figma-work #wt-chapters {
  position:absolute;
  top:calc(180px + var(--writer-safe-top));
  bottom:179px;
  left:20px;
  width:335px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
}
.writer-figma-work #wt-chapters::-webkit-scrollbar { display:none; }
.writer-figma-work .ch-list { display:grid; gap:12px; padding:0; }
.writer-book-empty {
  position:absolute;
  top:75px;
  left:-20px;
  width:375px;
  text-align:center;
}
.writer-book-empty img { display:block; width:45px; height:45px; margin:0 auto; object-fit:cover; }
.writer-book-empty b { display:block; margin-top:14px; font-size:18px; font-weight:700; line-height:normal; }
body.writer .writer-piece-card {
  position:relative;
  display:block;
  width:335px;
  height:68px;
  min-height:68px;
  margin:0;
  padding:0;
  border:0!important;
  border-radius:8px!important;
  background:#f6f6f6!important;
  color:#7a7a7a!important;
  font-family:inherit;
  box-shadow:none!important;
}
.writer-piece-number { position:absolute; top:14px; left:8px; color:#fd6f8d; font-size:15px; font-weight:700; line-height:22px; }
.writer-piece-title {
  position:absolute; top:14px; left:43px; overflow:hidden; width:242px;
  color:#0f0f0f; font-size:15px; font-weight:700; line-height:22px;
  text-align:left; text-overflow:ellipsis; white-space:nowrap;
}
body.writer .writer-piece-delete {
  position:absolute; top:2px; right:2px; display:grid; place-items:center;
  width:44px; height:44px; min-height:44px; margin:0; padding:14px;
  border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important;
}
.writer-piece-delete img { display:block; width:16px; height:16px; }
.writer-piece-meta {
  position:absolute; top:42px; left:43px; display:flex; align-items:center; height:17px;
  color:#7a7a7a; font-size:11px; font-weight:400; line-height:17px; white-space:nowrap;
}
.writer-piece-meta i { width:1px; height:12px; margin:0 9px; background:#7a7a7a; }
.writer-piece-meta span:first-child { font-size:12px; }
.writer-piece-meta span:last-child { font-size:11px; font-weight:500; }
body.writer .writer-new-chapter {
  border:0!important;
  border-radius:6px!important;
  background:#0f0f0f!important;
  color:#fff!important;
  font:700 14px/44px inherit;
  box-shadow:none!important;
}
.writer-book-nav {
  position:absolute;
  z-index:3;
  right:0;
  bottom:max(0px, calc(var(--writer-safe-bottom) - 21px));
  left:0;
  height:66px;
  border-top:1px solid #e6e6e6;
  background:#fff;
}
body.writer .writer-book-nav button {
  position:absolute; top:0; display:grid; place-items:center; width:125px; height:66px; min-height:66px;
  margin:0; padding:0 0 22px; border:0!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important;
}
.writer-book-nav button:nth-child(1) { left:0; }
.writer-book-nav button:nth-child(2) { left:125px; }
.writer-book-nav button:nth-child(3) { left:250px; }
.writer-book-nav img { display:block; width:24px; height:24px; object-fit:contain; }

/* 작품 설정은 기존 기능을 그대로 보존한다. */
.writer-figma-work.writer-work-settings-mode {
  height:auto; min-height:100dvh; overflow:visible; padding:calc(22px + var(--writer-safe-top)) 18px calc(44px + var(--writer-safe-bottom));
  border-radius:0; background:var(--bg); color:var(--text);
}
.writer-figma-work.writer-work-settings-mode > .writer-book-head,
.writer-figma-work.writer-work-settings-mode > .writer-book-nav { display:none; }
.writer-figma-work.writer-work-settings-mode > .app-top,
.writer-figma-work.writer-work-settings-mode > .wk-sub,
.writer-figma-work.writer-work-settings-mode > .w-tabs { display:flex; }

.writer-figma-editor > .app-top { display:none; }
body.writer .writer-figma-editor .ed-title {
  position:absolute; top:calc(78px + var(--writer-safe-top)); left:16px;
  width:335px; height:37px; margin:0; padding:0 74px 0 14px;
  border:0; border-bottom:1px solid #e6e6e6; border-radius:0; background:transparent;
  color:#0f0f0f; font-family:inherit; font-size:17px; font-weight:700; line-height:37px;
  outline:0; box-shadow:none!important;
}
body.writer .writer-figma-editor .ed-title::placeholder { color:#0f0f0f; opacity:1; }
.writer-figma-editor .ed-status {
  position:absolute; z-index:2; top:calc(87px + var(--writer-safe-top)); right:31px;
  height:16px; min-height:0; margin:0; padding:0; color:#7a7a7a;
  font-size:11px; font-weight:400; line-height:normal; text-align:right;
}
.writer-figma-editor .ed-status b { font-weight:400; }
.writer-figma-editor .ed-status span { display:none; }
body.writer .writer-figma-editor .ed-body {
  position:absolute; top:calc(134px + var(--writer-safe-top)); right:11px;
  bottom:calc(66px + max(0px, var(--writer-safe-bottom) - 21px)); left:30px;
  width:auto; min-height:0; margin:0!important; padding:0!important; resize:none;
  border:0!important; border-radius:0!important; background:#fff!important; color:#0f0f0f;
  font-family:"Nanum Myeongjo",serif; font-size:16px; font-weight:400; line-height:26px;
  outline:0; box-shadow:none!important;
}
body.writer .writer-figma-editor .ed-body::placeholder { color:#7a7a7a; opacity:1; }
.writer-editor-actions {
  position:absolute; z-index:3; right:0; bottom:max(0px, calc(var(--writer-safe-bottom) - 21px)); left:0;
  display:block; height:66px; margin:0; padding:0; border-top:1px solid #e6e6e6;
  border-radius:0; background:#fff;
}
body.writer .writer-editor-actions .edb {
  position:absolute; top:0; width:125px; height:66px; min-height:66px; margin:0; padding:16px 0 30px;
  border:0!important; border-radius:0!important; background:transparent!important; color:#7a7a7a!important;
  font-family:inherit; font-size:14px; font-weight:500; line-height:20px; box-shadow:none!important;
}
.writer-editor-actions .edb:nth-child(1) { left:0; }
.writer-editor-actions .edb:nth-child(2) { left:125px; }
.writer-editor-actions .edb:nth-child(3) { left:250px; }
body.writer .writer-editor-actions .edb.active { color:#0f0f0f!important; font-weight:700; }
body.writer #w-editor.writer-figma-editor .writer-editor-actions .edb span {
  display:block!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  font-size:14px!important;
  line-height:20px!important;
  opacity:1!important;
  visibility:visible!important;
}
.writer-editor-actions .edb.active::before {
  content:""; position:absolute; top:var(--sseujak-writing-indicator-top,10px); left:50%; width:45px; height:2px; transform:translateX(-50%); border-radius:1px; background:#fd6f8d;
}

@media (max-width:374px) {
  .writer-book-divider,.writer-figma-work #wt-chapters,.writer-figma-editor .ed-title { width:calc(100% - 40px); }
  body.writer .writer-new-chapter { width:calc(100% - 40px); }
  body.writer .writer-piece-card { width:100%; }
  body.writer .writer-book-nav button,body.writer .writer-editor-actions .edb { width:33.3333%; }
  .writer-book-nav button:nth-child(2),.writer-editor-actions .edb:nth-child(2) { left:33.3333%; }
  .writer-book-nav button:nth-child(3),.writer-editor-actions .edb:nth-child(3) { left:66.6666%; }
}

body.writer[data-theme="dark"] {
  --bg: #14151b;
  --bg-tint: #191a22;
  --panel: #1e2028;
  --panel2: #272a34;
  --text: #ecebf2;
  --dim: #9a95a7;
  --line: #33323f;
  --line-soft: #2a2a35;
  --accent: #9a82ff;
  --accent-soft: rgba(154, 130, 255, .14);
  --accent2: #6ea3ff;
  --gold: #e6b45c;
  --bad: #e5817a;
  --grad: linear-gradient(135deg, #a78bff, #7d68ff);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 8px 26px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-lg: 0 20px 50px -18px rgba(0, 0, 0, .7);
}

/* ── 상단 앱바 (홈) ── */
.app-bar { display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px 2px; margin-bottom: 10px; }
.app-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-logo { display: block; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; object-fit: cover; }
.auth-brand-logo { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 16px; }
.app-brand { font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; padding: 0;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: transform .15s; }
.icon-btn:active { transform: scale(.92); }

/* 빈 상태 */
.w-empty { text-align: center; color: var(--dim); padding: 30px 10px; }
.w-empty p { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.w-empty small { font-size: 13px; }

/* ── 설정 화면 ── */
#settings-plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-sm); margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 10px; }
.set-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-bottom: 8px;
  font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; }
.set-item small { font-weight: 400; color: var(--dim); font-size: 12.5px; }
.set-item.danger { color: var(--bad); }
.theme-seg { display: flex; gap: 6px; padding: 4px; border-radius: 12px;
  background: var(--panel2); border: 1px solid var(--line-soft); margin-bottom: 8px; }
.theme-seg button { flex: 1; padding: 10px; border: none; border-radius: 9px; background: none;
  color: var(--dim); font-weight: 600; font-size: 14px; }
.theme-seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 800;
  box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ── 구독 플랜 비교 ── */
.plans-list { display: flex; flex-direction: column; gap: 15px; margin: 8px 0 14px; }
.plan-card { position: relative; background: var(--panel); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); }
.plan-card.rec { border: 2px solid transparent; box-shadow: var(--shadow);
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad) border-box; }
.plan-badge { position: absolute; top: -11px; right: 16px; background: var(--grad); color: #fff;
  font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 20px; letter-spacing: .03em;
  box-shadow: 0 4px 12px -4px var(--accent); }
.plan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.plan-emblem { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.plan-emblem svg { width: 27px; height: 27px; fill: #fff; }
.plan-title { flex: 1; min-width: 0; }
.plan-title b { font-size: 18px; }
.plan-bestfor { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft);
  vertical-align: middle; }
.plan-title small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 1px; }
.plan-pitch { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var(--text); opacity: .92; }
.plan-highlight { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 9px 12px;
  border-radius: 11px; background: var(--accent-soft); font-size: 12.5px; font-weight: 700; color: var(--accent); }
.plan-highlight svg { width: 16px; height: 16px; stroke: var(--accent); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.plan-price { text-align: right; font-size: 18px; font-weight: 800; white-space: nowrap; }
.plan-price span { font-size: 12px; color: var(--dim); font-weight: 600; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 15px; display: flex; flex-direction: column; gap: 10px; }
.plan-feats li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
.plan-feats li svg { width: 19px; height: 19px; stroke: var(--accent); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.plan-feats li b { margin-left: auto; font-weight: 700; }
.plan-feats li.off { color: var(--dim); }
.plan-feats li.off svg { stroke: var(--dim); opacity: .7; }
.plan-cta { width: 100%; padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.plan-cta.current { background: var(--panel2); color: var(--dim); border: 1px solid var(--line); }
.plan-cta.buy { background: var(--grad); color: #fff; border: none; box-shadow: 0 6px 16px -7px var(--accent); }
.plans-store-status { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 12px; padding:13px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel2); color:var(--dim); font-size:13px; line-height:1.45; }
.plans-store-status.error { border-color:#e78686; color:#9f3030; background:#fff7f7; }
.plans-store-status .ghost { flex:0 0 auto; margin:0; min-height:40px; }
.plans-fine { font-size: 11.5px; color: var(--dim); line-height: 1.7; text-align: center; padding: 0 6px; }

/* ════════ 새 작품 단계별 설계 (위저드) ════════ */
/* 하단 고정 버튼(3단계는 2개)에 콘텐츠가 가리지 않도록 넉넉히 */
#w-wizard { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
.wz-top { display: flex; align-items: center; gap: 12px; padding: 2px 0 6px; }
/* 사용자 요청: 생성 단계 표시는 모든 장르에서 숨기되 단계 이동은 유지한다. */
body.writer #w-wizard > .wz-top { visibility:hidden; pointer-events:none; }
/* 직접 만들기 장르 화면의 기존 버튼만 공통 하단 위치로 복구한다. */
body.writer #w-wizard.writer-manual-genre:has(> #wzp-1:not(.hidden)) > #wz-foot {
  bottom:var(--sseujak-primary-action-bottom);
  z-index:81;
}
.wz-steps { flex: 1; display: flex; align-items: center; gap: 6px; }
.wz-dot { height: 5px; flex: 1; border-radius: 99px; background: var(--line); }
.wz-dot.on { background: var(--grad); }
.wz-count { font-size: 12px; color: var(--dim); font-weight: 700; white-space: nowrap; }
.wz-pane { display: flex; flex-direction: column; }
.wz-kicker { font-size: 12.5px; font-weight: 800; color: var(--accent); margin: 12px 0 6px; }
h1.wz-q { font-size: 25px; line-height: 1.35; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
h1.wz-q.sm { font-size: 22px; }
.wz-sub { font-size: 13.5px; color: var(--dim); line-height: 1.65; margin: 0 0 18px; }
textarea.wz-in { width: 100%; padding: 15px; border-radius: 14px; font-size: 15.5px; line-height: 1.6;
  resize: none; }
.wz-label { font-size: 13px; font-weight: 700; margin: 20px 0 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-sm); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 800; }
.wz-foot { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 20;
  width: 100%; max-width: 720px; padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 72%, transparent); }
/* 하단 버튼은 [← 이전][다음 →] 한 줄, 그 아래 AI 보조 한 줄 — 모든 화면에서 같다. */
.wz-foot { display: flex; flex-direction: column; gap: 10px; }
.wz-foot .btn-ghost2 { margin-top: 0; }
.wz-row { display: flex; gap: 10px; }
.wz-row .btn-prev { flex: 0 0 34%; padding: 16px 8px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  font-size: 15px; font-weight: 700; }
.wz-row .btn-main { flex: 1; }
.btn-main { width: 100%; padding: 16px; border-radius: 14px; border: none; background: var(--grad);
  color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 8px 20px -8px var(--accent); }
.btn-main:disabled { opacity: .5; box-shadow: none; }
.btn-ghost2 { width: 100%; padding: 13px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--panel); color: var(--dim); font-size: 14px; font-weight: 700; margin-top: 8px; }
/* 생성 중 */
.gen { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 0; }
.orb { width: 92px; height: 92px; border-radius: 50%; background: var(--grad); opacity: .9;
  animation: wzpulse 1.6s ease-in-out infinite; box-shadow: 0 12px 40px -10px var(--accent); }
@keyframes wzpulse { 0%,100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.09); opacity: 1 } }
.gen h2 { font-size: 19px; margin: 0; font-weight: 800; }
.tasks { width: 100%; display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.task { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dim); }
.task.done { color: var(--text); }
.task .ic { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.task.done .ic { background: var(--accent); border-color: var(--accent); color: #fff; }
.task.now .ic { border-color: var(--accent); border-right-color: transparent; animation: wzspin .8s linear infinite; }
@keyframes wzspin { to { transform: rotate(360deg) } }
/* 결과 카드 */
.wzc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.wzc h3 { margin: 0 0 6px; font-size: 15.5px; }
.wzc p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--dim); white-space: pre-line; }
.wzc .tag { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft);
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.wzc-acts { display: flex; gap: 8px; margin-top: 12px; }
.wzc-acts button { flex: 1; padding: 10px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font-size: 13px; font-weight: 700; }
.wzp { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 10px; display: flex; gap: 12px; }
.wzp-av { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 17px; color: #fff; font-weight: 800; }
.wzp b { font-size: 15px; }
.wzp .role { font-size: 11.5px; font-weight: 800; color: var(--accent); background: var(--accent-soft);
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.wzp p { margin: 5px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
/* 설명이 있는 보기 (시간의 흐름·정보 전달·플롯 유형) */
.opt-cards { display: flex; flex-direction: column; gap: 9px; }
.optc { text-align: left; padding: 14px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); width: 100%; }
.optc.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow); }
.optc b { display: block; font-size: 14.5px; }
.optc i { display: block; font-style: normal; font-size: 12.5px; color: var(--accent);
  font-weight: 700; margin-top: 2px; }
.optc p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--dim); white-space: pre-line; }
.optc small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--dim); opacity: .85; }
/* 한 줄 입력 */
input.wz-in.one { width: 100%; padding: 13px 14px; border-radius: 13px; font-size: 15px; }
/* 인물 목록 */
.cast-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.cast-row { display: flex; align-items: center; gap: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; box-shadow: var(--shadow-sm); }
.cast-main { flex: 1; display: flex; gap: 8px; }
.cast-n { flex: 2; min-width: 0; }
.cast-a { flex: 1; min-width: 0; }
.cast-row input { padding: 9px 11px; border-radius: 10px; font-size: 14px; }
.cast-more { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cast-del { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--dim); font-size: 12px; flex-shrink: 0; }
/* 항목 옆 작은 AI 추천 버튼 */
.mini-ai { margin-left: 8px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; }
.wz-ep { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.wz-ep:last-child { border: none; }
.wz-ep .n { font-size: 12px; font-weight: 800; color: var(--accent); min-width: 32px; }
.wz-ep b { font-size: 13.5px; display: block; margin-bottom: 2px; }
.wz-ep span { font-size: 12px; color: var(--dim); line-height: 1.55; }

/* ════════ 앱 골격 — 상단바 / 플롯 아코디언 / 쓰기 하단바 / 시트 ════════ */
.app-top { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; }
.top-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 16px; box-shadow: var(--shadow-sm); }
.top-title { flex: 1; text-align: center; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.novel-location { display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
.novel-location span { color:var(--dim); font-weight:650; }
.novel-location i { color:var(--dim); font-style:normal; font-weight:500; }
.novel-location strong { color:var(--text); font-weight:850; }

/* 마법사 하단 보조 설명 */
.wz-foot-hint { margin: 6px 2px 0; color: var(--dim); font-size: 11.5px; line-height: 1.6; text-align: center; }

/* 쓰기 화면 */
#w-editor .ed-title { margin-bottom: 9px; }
#w-editor .ed-body { flex: 1; min-height: 46vh; }
.ed-status { font-size: 11.5px; color: var(--dim); text-align: center; padding: 8px 0 2px; min-height: 18px; }
.ed-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 70%, transparent); }
.edb-arrow { width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 15px; box-shadow: var(--shadow-sm); }
.edb-arrow:disabled { opacity: .35; }
.edb { flex: 1; height: 46px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 14px; font-weight: 700; box-shadow: var(--shadow-sm); }
.edb.save { background: var(--panel2); color: var(--text); border: 1px solid var(--line); box-shadow: none; }

/* 아래에서 올라오는 시트 */
.sheet-back { position: fixed; inset: 0; background: rgba(20, 16, 10, .38); z-index: 40; }
.sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 41;
  width: 100%; max-width: 720px; max-height: 76vh; display: flex; flex-direction: column;
  background: var(--panel); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0;
  box-shadow: 0 -14px 40px -14px rgba(40, 30, 15, .35);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: var(--line); margin: 9px auto 2px; flex-shrink: 0; }
.sheet-head { display: flex; align-items: center; padding: 6px 16px 8px; flex-shrink: 0; }
.sheet-head b { flex: 1; font-size: 15px; }
.sh-x { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--dim); font-size: 13px; }
.sheet-body { padding: 12px 16px 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.menu-body { display: flex; flex-direction: column; gap: 8px; }
.menu-body button { width: 100%; padding: 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font-size: 14.5px; font-weight: 700; text-align: left; }
.menu-body button.danger { color: var(--bad); border-color: rgba(213, 95, 87, .3); }
.notice-actions.col { flex-direction: column; }
.notice-actions.col button { width: 100%; }

/* ── 공통 요소 (밝은 테마 대응) ── */
body.writer input, body.writer select, body.writer textarea {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
body.writer input:focus, body.writer textarea:focus, body.writer select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body.writer input::placeholder, body.writer textarea::placeholder { color: var(--dim); opacity: .8; }

body.writer button {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; font-weight: 600;
  transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
body.writer button:active { transform: translateY(1px); }
body.writer button.primary {
  background: var(--grad); color: #fff; border: none; font-weight: 700;
  box-shadow: 0 6px 16px -6px var(--accent), var(--shadow-sm);
}
body.writer button.primary:hover { box-shadow: 0 9px 22px -7px var(--accent); }
body.writer button.big { padding: 16px; font-size: 15.5px; border-radius: var(--radius); }
body.writer button.ghost { background: none; border: none; color: var(--dim); box-shadow: none; }
body.writer button.small { font-size: 12.5px; padding: 7px 10px; }
body.writer button.danger { border-color: var(--bad); color: var(--bad); background: none; }

body.writer .hint { color: var(--dim); font-size: 12.5px; line-height: 1.7; }
body.writer .story-h {
  font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--text);
  margin: 24px 0 11px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  text-transform: none;
}
body.writer .story-h::before {
  content: ""; width: 3px; height: 15px; border-radius: 3px;
  background: var(--grad); flex-shrink: 0;
}
body.writer .story-h small { font-weight: 400; letter-spacing: 0; color: var(--dim);
  flex-basis: 100%; margin-left: 11px; }

/* 모달 */
body.writer .modal { z-index: 100; background: rgba(30, 24, 12, .38); backdrop-filter: blur(3px); }
body.writer[data-theme="dark"] .modal { background: rgba(5, 6, 12, .66); }
body.writer .modal-card {
  background: var(--panel); border: 1px solid var(--line);
  min-width: 0; max-width: min(420px, 100%);
  border-radius: 20px; box-shadow: var(--shadow-lg);
}

/* 원고 전체 검색 — 결과의 위치와 앞뒤 문맥을 한 화면에서 확인한다. */
.writing-search-card { width:min(92vw,680px); max-height:84dvh; padding:18px; display:flex; flex-direction:column; gap:12px; }
.writing-search-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.writing-search-head h2 { margin:0; font-size:20px; }
.writing-search-close { border:0; border-radius:0; background:transparent; box-shadow:none; font-size:25px; padding:6px; }
.writing-search-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.writing-search-form input { min-width:0; }
.writing-search-results { overflow:auto; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain; }
.writing-search-empty { margin:18px 4px; color:var(--dim); text-align:center; }
.writing-search-result { width:100%; padding:13px 14px; text-align:left; border:1px solid var(--line); border-radius:13px;
  background:var(--panel); color:var(--text); box-shadow:none; }
.writing-search-result small { display:block; margin-bottom:4px; color:var(--dim); font-size:11.5px; }
.writing-search-result b { display:block; margin-bottom:5px; font-size:14px; }
.writing-search-result p { margin:0; color:var(--dim); font-size:12.5px; line-height:1.65; white-space:normal; overflow-wrap:anywhere; }
body.writer .notice-text { color: var(--text); }
.notice-actions { display: flex; gap: 8px; }
.notice-actions button { flex: 1; }
.report-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
.report-card h2 { margin: 0 0 6px; font-size: 20px; }
.report-help { margin: 0 0 14px; color: var(--dim); font-size: 12px; line-height: 1.55; }
.report-card label { display: block; margin: 10px 0; color: var(--dim); font-size: 12px; font-weight: 700; }
.report-card select, .report-card textarea { width: 100%; margin-top: 5px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); color: var(--text); padding: 11px 12px; font: inherit; resize: vertical; }
.consent-card h2 { margin: 5px 0 7px; }
.consent-card > p { color: var(--dim); font-size: 13px; line-height: 1.6; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; margin: 13px 0; padding: 12px;
  border: 1px solid var(--line); border-radius: 13px; font-size: 12px; line-height: 1.55; }
.consent-check input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.consent-check a { color: var(--accent); font-weight: 800; }
.consent-card .big:disabled { opacity: .42; cursor: not-allowed; }

/* ===== 레이아웃 ===== */
.wview { min-height: 100vh; display: flex; flex-direction: column; gap: 15px;
  width: 100%; min-width: 0; max-width: 100%;
  padding: calc(30px + env(safe-area-inset-top, 0px)) 18px calc(44px + env(safe-area-inset-bottom, 0px)); }
.wview > *, body.writer .modal-card > * { min-width: 0; max-width: 100%; }

/* 홈 히어로 */
.w-hero { margin: 8px 2px 6px; }
.w-hero h1 {
  font-size: 34px; font-weight: 800; letter-spacing: -.5px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.w-hero .tagline { color: var(--dim); font-size: 14px; margin-top: 6px; }

.w-list { display: flex; flex-direction: column; gap: 12px; }
.w-item {
  text-align: left; padding: 17px 18px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.w-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad);
}
.w-item:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.w-item b { font-size: 16.5px; font-weight: 700; }
.w-item small { display: block; color: var(--dim); margin-top: 5px; font-size: 12.5px; }
.w-item .del { position: absolute; top: 14px; right: 12px; color: var(--dim);
  background: none; border: none; padding: 2px 8px; font-size: 13px; }
.w-item .del:hover { color: var(--bad); }

textarea { width: 100%; font-family: inherit; resize: vertical; line-height: 1.6; }

.w-top { display: flex; align-items: center; gap: 12px; }
.w-top b { font-size: 18px; font-weight: 700; }
.dim { color: var(--dim); font-size: 12.5px; }

/* 탭 — 세그먼트 컨트롤 */
.w-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: var(--panel2); border: 1px solid var(--line-soft);
}
.wtab {
  flex: 1; background: none; border: none; padding: 9px 14px; color: var(--dim);
  font-size: 14px; font-weight: 600; border-radius: 9px; transition: all .15s;
}
.wtab.active { color: var(--text); background: var(--panel); box-shadow: var(--shadow-sm); font-weight: 700; }

/* 회차 목록 */
.ch-list { display: flex; flex-direction: column; gap: 8px; }
.ch-item {
  display: flex; align-items: center; gap: 11px; text-align: left; padding: 14px 16px;
  width: 100%; min-width: 0; max-width: 100%;
  border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.ch-item:hover { box-shadow: var(--shadow); }
.ch-no {
  color: var(--accent); font-weight: 800; min-width: 42px; font-size: 14px;
}
.ch-item small { margin-left: auto; color: var(--dim); font-size: 11.5px; }
.write-box { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }

/* AI 본문 대필 UI는 판매 앱에서 숨기고 직접 집필은 모든 플랜에 제공한다. */
/* AI가 본문을 '대신' 써주는 UI만 숨긴다 — 작가가 직접 쓰는 에디터는 그대로 열려 있다. */
body.nobody #ch-write-box,
body.nobody #btn-rewrite-all { display: none !important; }
/* 작가가 직접 쓰는 입구 — 회차 목록 맨 아래 (색·그림자는 button.primary를 그대로 쓴다) */
body.writer .ch-new { width: 100%; margin-top: 12px; padding: 16px; font-size: 15px; }
body.writer .ch-len { margin-left: auto; font-size: 12px; color: var(--dim); font-weight: 600; }

/* 판매 빌드에서 아예 제외되는 항목 (프로여도 숨김) */
body.launch #revise-box { display: none !important; }

/* '구매 복원'은 네이티브 앱에서만 의미가 있다 (웹에선 숨김) */
#btn-restore { display: none; }
body.native #btn-restore { display: block; }

/* 광고 (무료 요금제만) */
.ad-banner {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 15;
  width: 100%; max-width: 720px; min-height: 56px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px env(safe-area-inset-bottom, 0px); box-sizing: content-box;
  background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px -8px rgba(0,0,0,.2);
}
.ad-tag { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; flex-shrink: 0; }
.ad-text { font-size: 12.5px; color: var(--dim); flex: 1; }
.ad-up { padding: 7px 13px; font-size: 12.5px; border-radius: 20px; background: var(--grad);
  color: #fff; border: none; font-weight: 700; flex-shrink: 0; }
/* 광고 배너(고정 56px)가 편집기 버튼 등 하단 콘텐츠를 가리지 않도록,
   화면 안쪽에 '배너 높이 + 여유 + 안전영역'만큼 아래 여백을 준다 (하단 잘림 방지).
   패딩은 스크롤 위치와 무관하게 항상 확보되므로 겹치지 않는다. */
body.has-ad .wview { padding-bottom: calc(56px + 40px + env(safe-area-inset-bottom, 0px)); }
body.has-ad .ad-banner { bottom: 0; }
body.has-ad .wz-foot { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.ad-inter { text-align: center; gap: 16px; align-items: center; }
.ad-fake { width: 100%; min-height: 180px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--line);
  border-radius: 12px; color: var(--dim); font-size: 14px; background: var(--panel2); }
.ad-fake small { font-size: 11.5px; }
.ad-inter .ad-tag { align-self: flex-start; }

/* 요금제 바 */
.plan-bar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 9px; }
.plan-now { font-size: 13px; }
.plan-now b { color: var(--accent); }
.plan-lim { display: block; color: var(--dim); font-size: 11.5px; margin-top: 3px; }
.plan-switch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-switch .dim { font-size: 11.5px; }
.plan-switch button { padding: 5px 12px; font-size: 12.5px; border-radius: 20px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim); }
.plan-switch button.on { background: var(--grad); color: #fff; border-color: transparent; font-weight: 700; }
.plan-upgrade { align-self: flex-start; padding: 8px 15px; font-size: 13px; border-radius: 20px;
  background: var(--grad); color: #fff; border: none; font-weight: 700; }
.plan-exp { font-size: 11.5px; color: var(--dim); font-weight: 600; }

/* 홈 하단 설정·법적 고지 */
.home-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; justify-content: center;
  margin-top: 22px; font-size: 12.5px; }
.home-foot .foot-sep { color: var(--line); }
.linkish { background: none; border: none; color: var(--dim); font-size: 12.5px; padding: 2px 2px;
  cursor: pointer; text-decoration: underline; }
.linkish.danger { color: var(--bad); }
.home-foot a { color: var(--dim); font-size: 12.5px; }

.ch-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.ch-toolbar button { flex: 1; }
.plot-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); max-height: 60vh; overflow-y: auto; }
.plot-h { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.plot-goal { font-size: 12.5px; color: var(--accent); margin-bottom: 12px; }
.plot-row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.plot-row:last-child { border-bottom: none; }
.plot-no { font-size: 12px; font-weight: 700; color: var(--accent); }
.plot-no span { color: var(--dim); font-weight: 400; margin-left: 5px; }
.plot-row.plan .plot-no { color: var(--dim); }
.plot-row.plan { cursor: pointer; border-radius: 8px; margin: 0 -8px; padding: 9px 8px; }
.plot-row.plan:hover { background: var(--accent-soft); }
.plot-row b { display: block; font-size: 13.5px; margin: 2px 0; }
.plot-row p { font-size: 12.5px; color: var(--dim); line-height: 1.65; white-space: pre-line; }

/* 예정 회차 (계획) */
.ch-plan-sep { margin: 20px 2px 9px; font-size: 12.5px; font-weight: 800; color: var(--text); }
.ch-plan-sep small { font-weight: 400; color: var(--dim); }
.ch-item.planned { border-style: dashed; background: var(--panel2); box-shadow: none; align-items: flex-start; }
.ch-item.planned .plan-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ch-item.planned .plan-body b { font-weight: 600; font-size: 14px; }
.ch-item.planned .plan-body small { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-item.planned .plan-edit { margin-left: auto; color: var(--dim); align-self: center; }
.ch-item.editing { display: block; cursor: default; }
.plan-ed { display: flex; flex-direction: column; gap: 8px; }
.plan-ed-h { font-weight: 700; font-size: 13px; color: var(--accent); }
.plan-ed .row2 { display: flex; gap: 8px; }
.plan-ed .row2 button { flex: 1; }

/* 인물 카드 */
.b-char {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; margin-bottom: 9px; position: relative; box-shadow: var(--shadow-sm);
}
.edit-ch { position: absolute; top: 11px; right: 11px; width: 42px; height: 42px;
  display: grid; place-items: center; padding: 0; background: transparent; border: 0;
  color: var(--text); border-radius: 0; box-shadow: none; z-index: 2; }
.edit-ch .ic { width: 21px; height: 21px; stroke-width: 2.2; }
.edit-ch:hover, .edit-ch:focus-visible { background: transparent; }
.edit-ch:active { transform: scale(.96); }
.b-char b { font-size: 15.5px; font-weight: 700; }
.b-char .arch { font-size: 11px; color: var(--accent); background: var(--accent-soft);
  border-radius: 20px; padding: 2px 9px; margin-left: 7px; font-weight: 600; }
.b-char p { font-size: 12.5px; color: var(--dim); margin-top: 7px; line-height: 1.75; }
.b-rel { font-size: 13.5px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; margin-bottom: 6px; box-shadow: var(--shadow-sm); }
.b-rel b { color: var(--accent2); }
.b-beat { display: flex; gap: 11px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.b-beat .no { color: var(--accent); min-width: 20px; font-weight: 700; }
.b-beat.done { opacity: .5; }
.b-beat b { min-width: 128px; font-weight: 600; }
.b-beat span { color: var(--dim); }

/* 작품설명서 업로드 */
.brief-upload {
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.brief-upload::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--accent-soft), transparent 55%);
}
.brief-upload b { color: var(--accent); font-size: 15px; }
.brief-upload input[type=file] { padding: 11px; font-size: 13px; }
.brief-view { margin-bottom: 12px; }
.brief-view summary { cursor: pointer; color: var(--text); font-size: 14px; font-weight: 700;
  padding-right: 54px; }
#brief-body { margin-top: 10px; font-size: 12.5px; color: var(--dim); white-space: pre-line;
  line-height: 1.85; max-height: 50vh; overflow-y: auto; }

/* 작가용 기억 메모 */
.canon-list { display: flex; flex-direction: column; gap: 6px; }
.canon-row { background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 14px; font-size: 13.5px; position: relative; box-shadow: var(--shadow-sm); }
.canon-row b { color: var(--accent); }
.canon-row span { color: var(--dim); }
.canon-row .del { position: absolute; right: 9px; top: 8px; background: none; border: none;
  color: var(--bad); padding: 2px 8px; }

.style-box { background: var(--panel); border: 1px solid var(--accent2); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; font-size: 12.5px; color: var(--dim);
  white-space: pre-line; line-height: 1.85; box-shadow: var(--shadow-sm); }

/* 회차 편집기 */
.ed-title { font-size: 18px; font-weight: 700; }
.ed-body { flex: 1; min-height: 55vh; line-height: 1.95; font-size: 15.5px;
  background: var(--panel); border-radius: var(--radius); }
.ed-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ed-actions button { flex: 1; min-width: 88px; white-space: nowrap; }
.ed-nav { flex-basis: 100% !important; background: var(--panel2); border: 1px solid var(--line);
  color: var(--text); font-weight: 700; }

/* ===== 작품설명서 상세 빌더 ===== */
.build-cta {
  text-align: left; padding: 16px 18px; border-radius: var(--radius); background: var(--panel);
  border: 1.5px dashed var(--accent); color: var(--text); font-size: 15px; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.build-cta:hover { box-shadow: var(--shadow); }
.build-cta small { display: block; font-weight: 400; color: var(--dim); margin-top: 5px; font-size: 12.5px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.bd-field { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.bd-field > span { font-size: 12px; color: var(--dim); font-weight: 600; padding-left: 2px; }
.bd-field input, .bd-field select { width: 100%; }
.bd-sec { margin-bottom: 4px; }
.ai-row { display: flex; flex-direction: column; gap: 7px; }
.ai-btn {
  width: 100%; text-align: left; padding: 13px 16px; border-radius: 13px; margin: 2px 0;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border: 1px solid var(--accent); color: var(--text); font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.ai-btn small { display: block; font-weight: 400; color: var(--dim); margin-top: 3px; font-size: 12px; }
.ai-btn:active { transform: scale(.99); }
.ai-btn.subtle { background: var(--panel); border-color: var(--line); }

.bd-char-row, .bd-canon-row {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 13px; padding: 13px; margin-bottom: 8px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 7px;
}
.bd-char-row input, .bd-char-row select, .bd-canon-row input {
  width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font-size: 14px; font-family: inherit;
}
.bd-char-row .cf { display: flex; flex-direction: column; gap: 5px; }
.bd-char-row .cf > span { font-size: 11.5px; color: var(--dim); font-weight: 600; padding-left: 2px; }

.req { color: var(--bad); font-weight: 800; }
.bd-detail-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 26px 0 4px; }
.ai-btn.compact { width: auto; margin: 0; padding: 9px 15px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.wns-help { font-size: 12px; color: var(--dim); background: var(--panel2);
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 12px;
  margin: 0 0 9px; line-height: 1.7; }
.wns-help b { color: var(--accent2); }
.bd-char-row .row2, .bd-canon-row .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.row-del { position: absolute; top: 9px; right: 9px; z-index: 1; background: none; border: none;
  color: var(--bad); font-size: 13px; padding: 2px 7px; opacity: .65; }
.row-del:hover { opacity: 1; }

/* ===== 인물 관계도 (시각화) ===== */
.rel-graph {
  margin: 2px 0 8px; padding: 10px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.rl-svg { width: 100%; height: auto; max-width: 440px; display: block; margin: 0 auto;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rl-edge { stroke: var(--line); stroke-width: 1.5; transition: stroke .15s, opacity .15s; }
.rl-edge.on { stroke: var(--accent); stroke-width: 2.5; }
.rl-edge.dim { opacity: .15; }
.rl-elabel { cursor: pointer; }
.rl-elabel rect { fill: var(--panel2); stroke: var(--line); stroke-width: 1; }
.rl-elabel text { fill: var(--dim); font-size: 11.5px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.rl-elabel.on rect { stroke: var(--accent); fill: var(--accent-soft); }
.rl-elabel.on text { fill: var(--text); }
.rl-elabel.dim { opacity: .18; }
.rl-node { cursor: pointer; }
.rl-node rect { stroke: var(--panel); stroke-width: 2; transition: filter .15s, opacity .15s; }
.rl-node text { fill: #fff; font-size: 13px; font-weight: 800; text-anchor: middle; pointer-events: none;
  paint-order: stroke; }
.rl-node.on rect { filter: brightness(1.08); stroke: var(--text); }
.rl-node.dim { opacity: .3; }


/* ══════════ PPT 반영 — 화면 정리 ══════════ */

/* 작품 메인 */
.wk-sub { display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 12px; }
.wk-sub b { font-size: 17px; font-weight: 800; }
.wk-sub span { color: var(--dim); font-size: 12.5px; }
.w-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
body.writer .w-tabs .wtab { flex: 1; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  font-size: 14px; font-weight: 700; }
body.writer .w-tabs .wtab.active { background: var(--grad); color: #fff; border-color: transparent; }

/* 인물 목록 — 기본 정보를 먼저 보여준다 */
.cast-row { align-items: center; }
.cast-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cast-nm { font-size: 15px; font-weight: 800; }
.cast-meta { color: var(--dim); font-size: 12px; }
.cast-done { color: var(--accent); font-size: 11px; font-weight: 700; }
.cast-basic { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cast-sec { margin-top: 22px; padding-top: 4px; }

/* 확인(세계관) 화면 — 직접 고쳐 쓴다 */
.wzc-l { display: block; margin: 12px 0 5px; color: var(--dim); font-size: 12px; font-weight: 700; }
.wzc-p { color: var(--dim); font-size: 13px; line-height: 1.7; margin: 8px 0 0; }
.wzc-h { margin: 22px 0 10px; font-size: 14px; font-weight: 800; }
.wzc-h small { margin-left: 6px; color: var(--dim); font-size: 11.5px; font-weight: 600; }

/* 화별 줄거리 구성 */
.wz-note { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--accent-soft); color: var(--text); font-size: 12.5px; line-height: 1.7; }
body.writer .wz-note-go { margin-left: 6px; padding: 4px 10px; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; background: var(--panel); }
.story-depth-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
.story-depth { min-height:92px; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:7px; padding:15px; border:1px solid var(--line); border-radius:16px;
  background:var(--panel); color:var(--text); text-align:left; }
.story-depth b { font-size:15px; }
.story-depth span { color:var(--dim); font-size:12px; }
.story-depth em { font-style:normal; font-size:12px; font-weight:800; }
.story-depth.manual { grid-column:1/-1; min-height:64px; flex-direction:row; align-items:center;
  justify-content:space-between; }
.story-depth:disabled { opacity:1; cursor:not-allowed; }
@media (max-width:520px) { .story-depth-grid { grid-template-columns:1fr; }
  .story-depth.manual { grid-column:auto; } }
.wz-plan-row { display: grid; grid-template-columns: 42px 1fr; gap: 6px 8px;
  align-items: start; margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft); }
.wz-plan-row .n { color: var(--accent); font-size: 13px; font-weight: 800; padding-top: 12px; }
.wz-plan-row .pt, .wz-plan-row .pc { grid-column: 2; width: 100%; }

/* 완성 화면 — 긴 줄거리도 칸을 넘지 않게 */
.wz-ep { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start;
  padding: 13px 52px 13px 0; border-bottom: 1px solid var(--line-soft); position: relative; }
.wz-ep .edit-ch { top: 9px; right: 0; }
.wz-ep.editing { display: block; padding-right: 0; }
.wz-ep .n { color: var(--accent); font-size: 12.5px; font-weight: 800; padding-top: 2px; }
.wz-ep div { min-width: 0; }
.wz-ep b { display: block; font-size: 14px; margin-bottom: 3px; }
.wz-ep span { display: block; color: var(--dim); font-size: 12.5px; line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.wz-edit-help { display: flex; align-items: center; gap: 9px; margin: 2px 2px 10px;
  color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.wz-edit-help .ic { width: 19px; height: 19px; stroke-width: 2.2; color: var(--text); }

/* 작품 설정 — 설명서를 접어서 본다 */
.bv { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); overflow: hidden; position: relative; }
.bv summary { padding: 13px 15px; font-size: 14px; font-weight: 700; cursor: pointer; }
.bv > .bv-body { padding: 0 15px 14px; color: var(--dim); font-size: 13px; line-height: 1.85;
  overflow-wrap: anywhere; }
.brief-edit-btn { position: absolute; top: 5px; right: 7px; width: 38px; height: 38px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow:none; color: var(--text); }
.brief-edit-btn:hover, .brief-edit-btn:focus-visible { background: transparent; }
.brief-edit-btn .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.brief-inline-edit { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.brief-inline-edit input, .brief-inline-edit textarea { width: 100%; }
.brief-inline-edit textarea { min-height: 150px; resize: vertical; line-height: 1.75; }
.brief-inline-edit .row2 { display: flex; gap: 8px; }
.brief-inline-edit .row2 button { flex: 1; }
.bv.editing summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }

/* 기억하기 — 삭제 표시와 글이 겹치지 않게 */
.canon-list .canon-row { display: flex; align-items: flex-start; gap: 10px;
  padding-right: 4px; overflow-wrap: anywhere; }
.canon-list .canon-row .cn-t { flex:1 1 auto; min-width:0; padding-top:7px; }
.canon-list .canon-row .del { margin-left: auto; flex-shrink: 0; }

/* 쓰기 화면 하단 — 저장 버튼도 옆 버튼과 같은 톤 */
.ed-bar .edb { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }

/* ── 아이콘 (이모지 대신 직접 그린 SVG — 기기·폰트에 상관없이 같게 보인다) ── */
.ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.writer .top-ic { display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 12px; color: var(--text); }
body.writer .icon-btn .ic { width: 19px; height: 19px; }
body.writer .ch-new { display: flex; align-items: center; justify-content: center; gap: 8px; }
body.writer .ch-new .ic { stroke: #fff; }
.menu-body button { display: flex; align-items: center; gap: 11px; text-align: left; }
.menu-body button .ic { color: var(--accent); }
.menu-body button.danger .ic { color: var(--bad); }

/* ══════════ 판매용 앱 정보 구조 개편 ══════════ */
.app-tagline { margin: 2px 0 0; color: var(--dim); font-size: 11.5px; letter-spacing: -.01em; }
.empty-mark { width: 58px; height: 58px; margin: 2px auto 16px; border-radius: 18px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font-family: Georgia, serif; font-size: 13px; font-weight: 800; }
.w-empty { margin: 18px 0 4px; padding: 34px 18px; border: 1px dashed var(--line);
  border-radius: 20px; background: color-mix(in srgb, var(--panel) 65%, transparent); }

.w-item { display: flex; align-items: center; gap: 14px; padding: 18px 16px 17px 20px; }
.w-item .work-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.w-item .work-copy small { margin: 0 0 4px; color: var(--accent); font-size: 11px; font-weight: 800; }
.w-item .work-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 24px; }
.w-item .work-copy em { margin-top: 6px; color: var(--dim); font-size: 11.5px; font-style: normal; }
.work-progress { height: 5px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: var(--line-soft); }
.work-progress i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.work-enter { align-self: flex-end; flex-shrink: 0; color: var(--accent); font-size: 12px; font-weight: 800; }

.app-top { position: sticky; top: 0; z-index: 18; margin: -8px -6px 0; padding: 8px 6px 12px;
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); }

.wz-top { align-items: flex-start; margin-bottom: 6px; }
.wz-steps { align-items: flex-start; gap: 5px; }
.wz-steps > span { flex: 1; display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.wz-steps .wz-dot { display: block; width: 100%; height: 5px; flex: none; }
.wz-steps b { overflow: hidden; color: var(--dim); font-size: 9.5px; font-weight: 700;
  text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.wz-steps > span.on .wz-dot { background: var(--grad); }
.wz-steps > span.on b { color: var(--accent); }
.wz-limit-help { margin: 11px 0 0; padding: 10px 12px; border-radius: 11px;
  background: var(--accent-soft); color: var(--dim); font-size: 11.5px; line-height: 1.55; }

#w-editor { background: var(--bg); }
#w-editor .ed-title, #w-editor .ed-body { background: var(--panel); }
#w-editor .ed-body { min-height: 58vh; padding: 18px; font-size: 16px; line-height: 2; }
.ed-bar { z-index: 18; gap: 7px; padding-top: 14px; }
.edb.save, body.writer .ed-bar .edb.save { border-color: transparent; background: var(--grad); color: #fff;
  box-shadow: 0 7px 18px -10px var(--accent); }

@media (max-width: 390px) {
  .wview { padding-left: 14px; padding-right: 14px; }
  .app-tagline { display: none; }
  .wz-steps b { font-size: 9px; }
  .edb { font-size: 12.5px; }
}

/* ══════════ 미니멀 모바일 스타일 — 참고 화면 1·2·3의 밀도 ══════════ */
body.writer {
  --bg: #f7f7f7; --bg-tint: #f7f7f7; --panel: #fff; --panel2: #f0f0f0;
  --text: #111; --dim: #8a8a8a; --line: #e8e8e8; --line-soft: #efefef;
  --accent: #111; --accent-soft: #eeeeee; --grad: #111;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.035); --shadow: 0 8px 24px rgba(0,0,0,.055);
  --shadow-lg: 0 18px 55px rgba(0,0,0,.13);
  background: var(--bg);
}
body.writer[data-theme="dark"] {
  --bg: #111; --bg-tint: #111; --panel: #1c1c1c; --panel2: #292929;
  --text: #f7f7f7; --dim: #999; --line: #303030; --line-soft: #272727;
  --accent: #f5f5f5; --accent-soft: #292929; --grad: #f5f5f5;
}
body.writer[data-theme="dark"] button.primary,
body.writer[data-theme="dark"] .btn-main,
body.writer[data-theme="dark"] .plan-cta.buy,
body.writer[data-theme="dark"] .edb.save { color: #111; }

.app-eyebrow { color: var(--dim); }
.plan-pill { background: var(--panel2) !important; color: var(--text) !important; }
body.writer button.primary, .btn-main, .plan-cta.buy, .edb.save,
body.writer .ed-bar .edb.save {
  background: var(--accent); border-color: var(--accent); box-shadow: none;
}
body.writer button.primary:hover { box-shadow: none; }

/* 카드와 입력은 선보다 면과 여백으로 구분한다. */
.w-empty, .w-item, .ch-item, .plan-card, .set-item, #settings-plan,
.wzc, .wzp, .b-char, .bd-char-row, .bd-canon-row {
  border-color: transparent; box-shadow: var(--shadow-sm);
}
body.writer input, body.writer select, body.writer textarea {
  border-color: transparent; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-soft);
}

.auth-gate { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  background: #f7f6f3; }
.auth-gate.hidden { display: none; }
.auth-card { width: min(100%, 430px); text-align: center; }
.auth-card h1 { margin: 10px 0 12px; font-size: 42px; letter-spacing: -2px; }
.auth-card > p { margin: 0 0 32px; color: var(--muted); line-height: 1.7; }
.auth-card > small { display: block; margin-top: 18px; color: var(--muted); line-height: 1.6; }
.auth-card a { color: inherit; }
.google-login { width: 100%; min-height: 56px; display: flex; align-items: center;
  justify-content: center; gap: 12px; border: 1px solid #d8d8d8; border-radius: 18px;
  background: #fff; color: #171717; font-size: 16px; font-weight: 750; }
.google-g { width: 22px; height: 22px; flex: 0 0 auto; }
.auth-error { margin: 18px 0 0 !important; color: #b42318 !important; font-size: 14px; }
.account-card { margin: 8px 0 14px; padding: 16px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--panel); }
.account-card .account-name { font-weight: 800; }
.account-card .account-email { margin-top: 4px; color: var(--muted); font-size: 13px; }
.account-card button { margin-top: 12px; width: 100%; }
body.writer input:focus, body.writer textarea:focus, body.writer select:focus {
  border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--text);
}
.chip { border: 0; background: var(--panel2); box-shadow: none; }
.chip.on { border: 0; background: var(--text); color: var(--bg); }
.wz-limit-help { padding: 0; background: transparent; color: var(--dim); }

/* 진행 표시도 색을 늘리지 않고 검정 한 가지로. */
.wz-steps > span.on .wz-dot, .wz-dot.on { background: var(--text); }
.wz-steps > span.on b, .wz-kicker { color: var(--text); }
.wz-dot { height: 3px; }
body.writer[data-genre="children"] #w-wizard .wz-top { display:none; }
.child-setup-group { margin:0 0 30px; }
.child-setup-group h2 { margin:0 0 12px; font-size:16px; }
.child-choice-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.child-choice-list.theme { grid-template-columns:1fr; }
.child-choice-list .chip { width:100%; min-height:44px; padding:9px 8px; }
.child-settings-list { display:grid; gap:9px; }
.child-settings-list p { display:grid; grid-template-columns:72px 1fr; gap:10px; margin:0; line-height:1.65; }
.child-settings-list p b { font-size:12px; }
.child-settings-list p span { color:var(--dim); font-size:13px; }
.child-story-plan .b-outline { margin-bottom:9px; }
h1.wz-q { margin-top: 4px; font-size: 27px; }
.wz-sub { margin-bottom: 24px; }
.wz-sub.cast-summary {
  margin: 4px 0 22px; padding: 16px; border-radius: 16px;
  background: var(--panel2); color: var(--text); font-size: 13.5px;
  line-height: 1.75; white-space: pre-line;
}

/* 설계 화면 하단: 보조 행동은 가볍게, 다음만 강하게. */
.wz-foot {
  gap: 8px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(18px);
}
.wz-row { align-items: center; gap: 10px; }
.wz-row .btn-prev {
  flex: 0 0 54px; width: 54px; height: 54px; min-height: 54px; padding: 0;
  border: 0; border-radius: 50%; background: var(--panel2); color: var(--text);
  font-family: Arial, sans-serif; font-size: 36px; font-weight: 300; line-height: 1;
}
.wz-row .btn-main {
  height: 54px; min-height: 54px; border-radius: 999px; font-size: 15px; font-weight: 800;
}
.wz-foot .btn-ghost2 {
  min-height: 46px; margin: 0; padding: 11px 16px; border: 0; border-radius: 999px;
  background: var(--panel2); color: var(--text); font-size: 13.5px; font-weight: 700;
}
.wz-foot-hint { margin: 0 10px 3px; font-size: 10.5px; line-height: 1.5; }
body.has-ad .wz-foot { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

/* 하단 탭은 별도 카드처럼 띄우지 않고 OS 탭바처럼 얇게. */
.app-nav {
  bottom: 0; width: 100%; max-width: 720px; height: calc(66px + env(safe-area-inset-bottom, 0px));
  padding: 5px 16px env(safe-area-inset-bottom, 0px); border: 0; border-top: 1px solid var(--line);
  border-radius: 0; background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: none; backdrop-filter: blur(18px);
}
.app-nav button { min-height: 54px; border-radius: 12px !important; }
.app-nav button.active { color: var(--text) !important; background: transparent !important; }
.app-nav button:not(.active) { color: #a0a0a0 !important; }
.app-nav button.active span { font-weight: 900; }

/* 광고 역시 얇은 정보줄로 정리한다. */
.ad-banner { min-height: 42px; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
body.has-ad:not(.focus-mode) .ad-banner { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
body.writer:not(.focus-mode).has-ad .wview {
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 390px) {
  .app-nav { width: 100%; bottom: 0; }
  body.has-ad:not(.focus-mode) .ad-banner { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* 설계·집필처럼 집중이 필요한 화면만 하단 탭을 숨긴다. */
body.focus-mode .app-nav { display: none !important; }
body.writer:not(.focus-mode) .wview,
body.writer:not(.focus-mode).has-ad .wview { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
body.has-ad:not(.focus-mode) .ad-banner, body.has-ad .wz-foot { bottom: 0; }
#wk-progress:empty { display: none; }

.basic-ai-intro, .section-ai-intro { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.section-ai-intro p { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.65; }
.ai-btn.compact { width: 100%; min-height: 48px; border: 0; border-radius: 16px;
  background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font-weight: 800; }
.basic-ai-intro .ai-btn.compact {
  width: 190px; min-height: 44px; align-self: flex-start; padding: 0 18px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 999px; background: var(--text); color: var(--bg); box-shadow: none;
}
.basic-field, .result-field, .ai-question { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.basic-field > span, .result-field > span, .ai-question > span { font-size: 13px; font-weight: 800; line-height: 1.5; }
.basic-field .wz-in, .result-field .wz-in, .ai-question .wz-in { min-height: 52px; padding: 16px;
  border-radius: 16px; background: var(--panel); line-height: 1.65; }
.basic-field textarea.wz-in, .result-field textarea.wz-in, .ai-question textarea.wz-in { min-height: 112px; resize: vertical; }
.world-ai-sheet { max-height: 90vh; }
.world-ai-help { margin: 0 0 20px; color: var(--dim); font-size: 14px; line-height: 1.7; white-space: pre-line; }
.world-ai-quota { margin: 10px 2px 16px; color: var(--dim); font-size: 12px; text-align: center; }
.world-ai-current { max-height: 150px; overflow-y: auto; margin: 0 0 14px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); }
.world-ai-current b { display: block; margin-bottom: 7px; font-size: 12px; }
.world-ai-current p { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
#world-ai-start { width: 100%; }
.world-genre-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.world-genre-chip { min-height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text); font-weight: 750; white-space: nowrap; }
.world-genre-chip.on { border-color: var(--text); background: var(--text); color: var(--bg); }
.world-genre-note { margin: 12px 2px 0; color: var(--dim); font-size: 12px; }
.result-actions .btn-redraw { flex: 1; height: 54px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--panel2); color: var(--text); font-weight: 800; }
.result-actions .btn-redraw { white-space: nowrap; font-size: 13px; }
.result-actions .btn-main { flex: 1.25; }
#wz-plan-note { margin-bottom: 18px; }
.wz-plan-row { margin-bottom: 14px; padding: 16px; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-sm); }
.wz-plan-row .n { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.wz-plan-row .pt, .wz-plan-row .pc { width: 100%; box-sizing: border-box; }
.wz-plan-row .pc { margin-top: 9px; min-height: 120px; resize: vertical; }
.add-next-episode { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 16px;
  background: transparent; color: var(--text); font-weight: 800; }
.plot-hint { margin: 14px 0 0; color: var(--dim); font-size: 12px; text-align: center; }

/* 새 작품 설계 — 입력 영역이 배경에 묻히지 않도록 한 단계 또렷하게 */
#w-wizard .wz-pane input,
#w-wizard .wz-pane select,
#w-wizard .wz-pane textarea {
  min-height: 50px;
  padding: 14px 15px;
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, var(--bg));
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .045);
  color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#w-wizard .wz-pane textarea {
  min-height: 104px;
  line-height: 1.7;
}
#w-wizard .wz-pane input::placeholder,
#w-wizard .wz-pane textarea::placeholder {
  color: color-mix(in srgb, var(--text) 48%, var(--bg));
  opacity: 1;
}
#w-wizard .wz-pane input:hover,
#w-wizard .wz-pane select:hover,
#w-wizard .wz-pane textarea:hover {
  border-color: color-mix(in srgb, var(--text) 38%, var(--bg));
}
#w-wizard .wz-pane input:focus,
#w-wizard .wz-pane select:focus,
#w-wizard .wz-pane textarea:focus {
  border-color: var(--text);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent),
    0 5px 16px rgba(0, 0, 0, .065);
}
#w-wizard .wzc-l,
#w-wizard .wz-label {
  color: var(--text);
  font-weight: 800;
}

.wz-demo-note {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--panel2); color: var(--dim); font-size: 12px; line-height: 1.55;
}

/* 인물 카드 — 작은 화면에서도 이름·설명·진행률이 서로 겹치지 않는다. */
.cast-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 10px;
  align-items: center; min-height: 82px; padding: 14px; border: 0; border-radius: 18px;
  background: var(--panel); box-shadow: var(--shadow-sm);
}
.cast-main {
  display: block !important; min-width: 0;
}
.cast-name-row { display: flex; align-items: center; gap: 10px; min-height: 21px; }
.cast-nm { display: block; flex: 1; overflow: hidden; font-size: 15px; line-height: 1.35;
  text-overflow: ellipsis; white-space: nowrap; }
.cast-meta { display: block !important; overflow: hidden; margin-top: 5px; color: var(--dim); font-size: 11.5px;
  line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cast-done { display: block; flex-shrink: 0; color: var(--dim); font-size: 10.5px;
  font-weight: 700; line-height: 1; white-space: nowrap; }
body.writer .cast-more { min-height: 40px; padding: 8px 13px; border: 0; border-radius: 999px;
  background: var(--panel2); color: var(--text); font-size: 12px; }
body.writer .cast-del { width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0;
  border-radius: 50%; background: var(--panel2); color: var(--dim); }

@media (max-width: 370px) {
  .cast-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .cast-more { grid-column: 1; width: max-content; }
  .cast-del { grid-column: 2; grid-row: 1 / 3; }
}

/* ══════════ 통합 앱 셸 — 차분한 편집 도구 톤 ══════════ */
body.writer {
  --bg: #f7f7f4;
  --bg-tint: #f0efe9;
  --panel: #ffffff;
  --panel2: #f1f1ed;
  --text: #20201f;
  --dim: #787872;
  --line: #e4e4de;
  --line-soft: #eeeeea;
  --accent: #6157d9;
  --accent-soft: rgba(97, 87, 217, .09);
  --grad: #6157d9;
  --shadow-sm: 0 1px 2px rgba(26, 26, 22, .04);
  --shadow: 0 10px 28px rgba(30, 30, 25, .08);
  --shadow-lg: 0 24px 70px rgba(25, 25, 20, .18);
  --radius: 18px;
  --radius-sm: 12px;
  width: 100%;
  background: var(--bg);
}
body.writer[data-theme="dark"] {
  --bg: #151516; --bg-tint: #19191b; --panel: #202022; --panel2: #29292c;
  --text: #f1f1ef; --dim: #99999e; --line: #343438; --line-soft: #2b2b2f;
  --accent: #978cff; --accent-soft: rgba(151, 140, 255, .13); --grad: #786cf0;
}

.wview { gap: 18px; padding-top: calc(22px + env(safe-area-inset-top, 0px)); }
body.writer:not(.focus-mode) .wview {
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}
body.writer:not(.focus-mode).has-ad .wview {
  padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px));
}

/* 같은 역할의 버튼은 같은 모양을 쓴다. */
body.writer button { min-height: 44px; border-radius: 13px; box-shadow: none; }
body.writer button.primary, .btn-main, .plan-cta.buy, .edb.save,
body.writer .ed-bar .edb.save {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 8px 20px rgba(97, 87, 217, .20);
}
body.writer button.primary:hover { box-shadow: 0 10px 24px rgba(97, 87, 217, .24); }
body.writer button.ghost { color: var(--dim); }
.chip.on, .theme-seg button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* 홈 */
.app-bar { align-items: flex-start; padding: 6px 2px 4px; margin-bottom: 4px; }
.app-eyebrow { display: block; margin-bottom: 3px; color: var(--accent); font-size: 9px;
  font-weight: 900; letter-spacing: .18em; }
.app-brand { background: none; -webkit-text-fill-color: currentColor; color: var(--text);
  font-size: 27px; font-weight: 850; letter-spacing: -.045em; }
.app-tagline { margin-top: 2px; font-size: 12px; }
.plan-pill { min-height: 34px !important; padding: 7px 11px !important; border-radius: 999px !important;
  background: var(--accent-soft) !important; border: 0 !important; color: var(--accent) !important;
  font-size: 11px !important; font-weight: 800 !important; }
.w-empty { margin-top: 10px; padding: 42px 22px 38px; border-style: solid; box-shadow: var(--shadow-sm); }
.empty-mark { width: 64px; height: 64px; border-radius: 20px; }
.w-empty p { font-size: 17px; letter-spacing: -.02em; }
.w-empty small { display: block; max-width: 270px; margin: 8px auto 0; line-height: 1.65; }
.w-item { border: 0; box-shadow: var(--shadow); }
.w-item::before { width: 3px; background: var(--accent); }
#w-new { width: min(72%, 420px); align-self: center; margin-top: 30px; }
.settings-actions { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; margin: 28px 0 8px; }
.settings-actions .btn-prev { width: 54px; min-height: 54px; padding: 0; border: 0; border-radius: 50%;
  background: var(--panel2); color: var(--text); font-size: 36px; font-weight: 300; }
.settings-actions .btn-main { min-height: 54px; border-radius: 999px; }

/* 화면 머리글과 카드 */
.app-top, .w-top { min-height: 52px; align-items: center; }
.app-top { margin-top: -12px; padding: 10px 2px 12px; background: color-mix(in srgb, var(--bg) 96%, transparent); }
.top-title, .w-top b { font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
body.writer .top-ic { width: 40px; height: 40px; border: 0; background: var(--panel2); box-shadow: none; }
.w-tabs { padding: 3px; border: 0; border-radius: 14px; }
body.writer .w-tabs .wtab { border: 0; border-radius: 11px; box-shadow: none; }
body.writer .w-tabs .wtab.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.ch-item, .plan-card, .set-item, #settings-plan, .wzc, .wzp, .b-char {
  border-color: var(--line); box-shadow: var(--shadow-sm); }
.ch-item:hover, .w-item:hover { transform: none; }

/* 공통 하단 탭 */
.app-nav {
  position: fixed; left: 50%; bottom: 8px; z-index: 35; transform: translateX(-50%);
  width: calc(100% - 20px); max-width: 680px; height: calc(70px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  padding: 7px 8px env(safe-area-inset-bottom, 0px); border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 22px; background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 12px 34px rgba(25, 25, 20, .15); backdrop-filter: blur(18px);
}
.app-nav button { min-width: 0; min-height: 54px; padding: 5px 2px !important; border: 0 !important;
  border-radius: 14px !important; background: transparent !important; color: var(--dim) !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  box-shadow: none !important; }
.app-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.app-nav span { overflow: hidden; max-width: 100%; font-size: 9.5px; font-weight: 750; white-space: nowrap; }
.app-nav button.active { color: var(--accent) !important; background: var(--accent-soft) !important; }
body.focus-mode .app-nav { display: none; }

/* 무료 광고는 탭을 덮지 않고 그 위에 놓인다. */
.ad-banner { bottom: 86px; width: calc(100% - 28px); max-width: 660px; min-height: 46px;
  padding: 5px 10px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); }
.ad-text { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ad-up { min-height: 32px !important; padding: 6px 10px !important; }
body.has-ad:not(.focus-mode) .ad-banner { bottom: 86px; }
body.has-ad.focus-mode .ad-banner { bottom: 8px; }
body.has-ad .wz-foot { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

/* 집중 화면 */
#w-wizard, #w-editor { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
#w-editor .ed-body { border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.ed-bar { border-radius: 16px 16px 0 0; }
.sheet { border-color: transparent; border-radius: 26px 26px 0 0; }

@media (max-width: 390px) {
  .wview { padding-left: 16px; padding-right: 16px; }
  .app-tagline { display: block; }
  .app-nav { width: calc(100% - 14px); bottom: 6px; }
  .app-nav span { font-size: 9px; }
  .ad-banner { width: calc(100% - 20px); }
  body.has-ad:not(.focus-mode) .ad-banner { bottom: 82px; }
}

/* 최종 미니멀 테마 — 뒤의 규칙이 앱 전체에 동일하게 적용된다. */
body.writer {
  --bg: #f7f7f7; --bg-tint: #f7f7f7; --panel: #fff; --panel2: #f0f0f0;
  --text: #111; --dim: #8a8a8a; --line: #e8e8e8; --line-soft: #efefef;
  --accent: #111; --accent-soft: #eee; --grad: #111;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.035); --shadow: 0 8px 24px rgba(0,0,0,.055);
  background: var(--bg);
}
body.writer[data-theme="dark"] {
  --bg: #111; --bg-tint: #111; --panel: #1c1c1c; --panel2: #292929;
  --text: #f7f7f7; --dim: #999; --line: #303030; --line-soft: #272727;
  --accent: #f5f5f5; --accent-soft: #292929; --grad: #f5f5f5;
}
.app-eyebrow { color: var(--dim); }
.plan-pill { background: var(--panel2) !important; color: var(--text) !important; }
body.writer button.primary, .btn-main, .plan-cta.buy, .edb.save,
body.writer .ed-bar .edb.save { background: var(--accent); border-color: var(--accent); box-shadow: none; }
body.writer[data-theme="dark"] button.primary,
body.writer[data-theme="dark"] .btn-main,
body.writer[data-theme="dark"] .plan-cta.buy,
body.writer[data-theme="dark"] .edb.save { color: #111; }

.w-empty, .w-item, .ch-item, .plan-card, .set-item, #settings-plan,
.wzc, .wzp, .b-char, .bd-char-row, .bd-canon-row {
  border-color: transparent; box-shadow: var(--shadow-sm);
}
body.writer input, body.writer select, body.writer textarea {
  border-color: transparent; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-soft);
}
body.writer input:focus, body.writer textarea:focus, body.writer select:focus {
  border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--text);
}
.chip { border: 0; background: var(--panel2); box-shadow: none; }
.chip.on { border: 0; background: var(--text); color: var(--bg); }
.wz-limit-help { padding: 0; background: transparent; color: var(--dim); }
.wz-steps > span.on .wz-dot, .wz-dot.on { background: var(--text); }
.wz-steps > span.on b, .wz-kicker { color: var(--text); }
.wz-dot { height: 3px; }
h1.wz-q { margin-top: 4px; font-size: 27px; }
.wz-sub { margin-bottom: 24px; }

.wz-foot { gap: 8px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(18px); }
.wz-row { align-items: center; gap: 10px; }
.wz-row .btn-prev { flex: 0 0 54px; width: 54px; height: 54px; min-height: 54px; padding: 0;
  border: 0; border-radius: 50%; background: var(--panel2); color: var(--text);
  font-family: Arial, sans-serif; font-size: 36px; font-weight: 300; line-height: 1; }
.wz-row .btn-main { height: 54px; min-height: 54px; border-radius: 999px; font-size: 15px; font-weight: 800; }
body.writer .wz-row .btn-main { background: var(--text); border: 0; color: var(--bg); box-shadow: none; }
.wz-foot .btn-ghost2 { min-height: 46px; margin: 0; padding: 11px 16px; border: 0;
  border-radius: 999px; background: var(--panel2); color: var(--text); font-size: 13.5px; font-weight: 700; }
.wz-foot-hint { margin: 0 10px 3px; font-size: 10.5px; line-height: 1.5; }
body.has-ad .wz-foot { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

.app-nav { bottom: 0; width: 100%; max-width: 720px; height: calc(66px + env(safe-area-inset-bottom, 0px));
  padding: 5px 16px env(safe-area-inset-bottom, 0px); border: 0; border-top: 1px solid var(--line);
  border-radius: 0; background: color-mix(in srgb, var(--bg) 96%, transparent); box-shadow: none; }
.app-nav button { min-height: 54px; border-radius: 12px !important; }
.app-nav button.active { color: var(--text) !important; background: transparent !important; }
.app-nav button:not(.active) { color: #a0a0a0 !important; }
.app-nav button.active span { font-weight: 900; }
.ad-banner { min-height: 42px; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
body.has-ad:not(.focus-mode) .ad-banner { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
body.writer:not(.focus-mode).has-ad .wview { padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 390px) {
  .app-nav { width: 100%; bottom: 0; }
  body.has-ad:not(.focus-mode) .ad-banner { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}
.wz-foot { gap: 14px; padding-top: 18px; }
.wz-foot + * { margin-top: 8px; }
.basic-field .wz-in, .result-field .wz-in, .ai-question .wz-in,
.wz-plan-row .pt, .wz-plan-row .pc, .cast-feature .wz-in {
  border: 1px solid var(--line) !important;
  background: var(--panel) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.035) !important;
}
.wz-plan-row .pt:focus, .wz-plan-row .pc:focus, .basic-field .wz-in:focus,
.result-field .wz-in:focus, .cast-feature .wz-in:focus {
  border-color: var(--text) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 10%, transparent) !important;
}
.wz-plan-row { display:block; }
.plan-row-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.plan-row-head .n { margin:0 !important; padding:0 !important; }
.wz-plan-row .plan-ai { margin-top:10px; }
.plan-del { min-height:34px; padding:7px 12px; border:0; border-radius:999px;
  background:var(--panel2); color:var(--danger,#b43b3b); font-size:12px; font-weight:800; }
.structure-card { max-width:520px; }
.structure-card h2 { margin:0 0 18px; font-size:20px; }
.structure-result-body { display:grid; gap:10px; margin-bottom:20px; }
.structure-result-body > div { display:flex; flex-direction:column; gap:4px; padding:13px 15px;
  border-radius:14px; background:var(--panel2); }
.structure-result-body span { color:var(--dim); font-size:12px; }
.structure-result-body b { font-size:14px; line-height:1.5; }
.structure-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.structure-actions button { min-width:0; padding:12px 8px; }
.world-chat { display:flex; flex-direction:column; gap:10px; }
.chat-bubble { max-width:86%; padding:12px 14px; border-radius:18px; font-size:14px; line-height:1.6; }
.chat-bubble.ai { align-self:flex-start; border-bottom-left-radius:5px; background:var(--panel2); }
.chat-bubble.me { align-self:flex-end; border-bottom-right-radius:5px; background:var(--text); color:var(--bg); }
.chat-answer { margin-top:4px; border:1px solid var(--line) !important; }
.private-test { margin:20px 0; padding:18px; border:1px dashed var(--text); border-radius:18px; }
.private-test .story-h { margin-top:0; }
.test-tier-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; }
.test-tier-row button { min-height:44px; border:0; border-radius:14px; background:var(--panel2); font-weight:800; }
.test-tier-row button.on { background:var(--text); color:var(--bg); }

/* 모바일 사용성 마감: 같은 크기·같은 터치 규칙을 모든 핵심 화면에 적용 */
.top-ic-spacer { display:block; width:44px; height:44px; flex:0 0 44px; }
.top-ic { width:44px; height:44px; min-width:44px; min-height:44px; padding:11px; }
.top-ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.plan-pill { min-height:44px !important; padding:9px 13px !important; }
.sh-x { width:44px; height:44px; min-width:44px; min-height:44px; border-radius:50%; }
.plan-del { min-height:44px; padding:10px 15px; }
.ad-up { min-height:44px; padding:10px 14px; }
.plans-fine a { display:inline-flex; min-height:44px; align-items:center; padding:0 3px; }
.app-nav span { font-size:10.5px; line-height:1.15; }
.ed-bar .edb { min-height:46px; }
.settings-inline-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 22px; }
.settings-inline-actions .set-item { margin:0; min-width:0; }
.usage-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.usage-summary > div { display:flex; min-width:0; flex-direction:column; gap:3px; padding:14px;
  border-radius:16px; background:var(--panel); box-shadow:var(--shadow-sm); }
.usage-summary span,.usage-summary small { color:var(--dim); font-size:11px; }
.usage-summary b { font-size:14px; line-height:1.35; }
.set-item.static { display:flex; align-items:center; justify-content:space-between; }
.danger-h { color:var(--danger,#b43b3b); }
.quota-note { display:block; margin:8px 0; color:var(--dim); font-size:11.5px; }
body.keyboard-open .ad-banner { display:none !important; }
.w-empty #w-retry { min-height:44px; margin:16px auto 0; padding:10px 18px; }

@media (max-width:390px) {
  .settings-inline-actions { grid-template-columns:1fr; }
  .usage-summary > div { padding:12px; }
}

/* 2026-08-27 작품 설정·메모 정리 */
.bible-chars { display:flex; flex-direction:column; gap:10px; }
.bible-add-char { width:auto; min-height:42px; margin:4px 0 10px; padding:10px 18px;
  border:0 !important; border-radius:999px !important; background:var(--text) !important;
  color:var(--bg) !important; font-weight:800; }
.b-char { margin:0; padding:15px; }
.b-char-actions { position:static; display:flex; flex:0 0 auto; gap:4px; margin-left:auto; }
.b-char-actions button { position:static; width:36px; min-width:36px; min-height:36px; padding:7px; }
.b-char-actions button { border:0; border-radius:0; background:transparent; box-shadow:none; }
.canon-actions { display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end; gap:4px; margin-left:auto; }
.canon-actions button,
.canon-list .canon-row .del { position:static; display:grid; place-items:center; width:34px; min-width:34px; min-height:34px; margin:0; padding:7px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--text); }
.canon-actions button .ic { width:20px; height:20px; color:inherit; }
.memo-actions > button { flex:1; }
.b-char-head { display:flex; align-items:flex-start; gap:10px; }
.b-char-identity { display:flex; min-width:0; flex:1 1 auto; align-items:baseline; gap:8px; flex-wrap:wrap; }
.b-char-identity > b { color:var(--text); font-size:17px; }
.b-char-identity > span { color:var(--dim); font-size:12px; }
.b-char .b-char-desc { margin:9px 0 12px; color:var(--text); font-size:13px; line-height:1.75;
  white-space:pre-wrap; overflow-wrap:anywhere; }
.b-char-facts { display:grid; gap:6px; }
.b-char-facts p { display:grid; grid-template-columns:42px 1fr; gap:8px; margin:0;
  color:var(--dim); font-size:12.5px; line-height:1.55; }
.b-char-facts b { color:var(--text); font-size:12px; }
.b-rel { display:flex; flex-direction:column; gap:4px; padding:13px 15px; }
.b-rel b { color:var(--text); }
.b-rel > span { color:var(--accent); font-size:12px; font-weight:700; }
.b-rel p { margin:0; color:var(--dim); font-size:12.5px; line-height:1.65; }

.memo-help { margin:4px 16px 10px; color:var(--dim); font-size:12px; line-height:1.6; }
.memo-body { padding-top:2px; }
.memo-write { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.memo-write textarea { width:100%; min-height:84px; resize:vertical; }
.memo-count { margin:0; text-align:right; }

.ed-bar .edb { min-width:0; padding:0 12px; font-size:13px; white-space:nowrap; }
#ed-save, #ed-list { flex:1; }
@media (max-width:390px) {
  .ed-bar { gap:5px; }
  .ed-bar .edb { padding:0 8px; font-size:12.5px; }
}

/* 집중 집필 화면은 실제 기기 높이에 맞춰 입력칸과 하단 조작부를 배치한다. */
#w-editor { min-height:100dvh; padding-bottom:max(8px, env(safe-area-inset-bottom, 0px)); }
#w-editor .ed-body { flex:1 1 auto; min-height:min(42dvh, 430px); }
#w-editor .ed-bar { margin-top:0; }
.webtoon-quickbar { display:none; }
body.keyboard-open.writer[data-genre="webtoon"] #w-editor.webtoon-tools-on .webtoon-quickbar {
  position:fixed; z-index:80;
  left:max(8px, env(safe-area-inset-left, 0px));
  right:max(8px, env(safe-area-inset-right, 0px));
  top:calc(var(--visual-viewport-bottom, 100dvh) - 6px); bottom:auto;
  transform:translateY(-100%);
  display:flex; align-items:center; gap:6px; padding:8px; overflow:visible;
  border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.98);
  box-shadow:0 -6px 24px rgba(0,0,0,.12); -webkit-overflow-scrolling:touch;
}
body.keyboard-open.writer[data-genre="webtoon"] #w-editor .ed-body {
  scroll-padding-bottom:68px;
}
.webtoon-quickbar > button { flex:1 1 0; min-width:52px; min-height:42px; padding:0 8px;
  border:0; border-radius:12px; background:var(--panel2); color:var(--text); font-weight:800; }
.webtoon-character-menu { position:absolute; left:0; right:0; bottom:calc(100% + 8px);
  max-height:min(38dvh, 260px); overflow-y:auto; padding:8px; border:1px solid var(--line);
  border-radius:16px; background:var(--panel); box-shadow:var(--shadow); }
.webtoon-character-menu button { width:100%; min-height:44px; padding:10px 12px; border:0;
  border-radius:10px; background:transparent; color:var(--text); text-align:left; font-weight:750; }
.webtoon-character-menu button + button { border-top:1px solid var(--line); }
.webtoon-character-menu .empty { margin:0; padding:12px; color:var(--dim); font-size:13px; }
.scene-plan-card textarea { width:100%; min-height:190px; resize:vertical; margin:12px 0;
  border:1px solid var(--line,#ddd); border-radius:14px; padding:14px; font:inherit; line-height:1.6;
  background:#fff; color:inherit; }
.scene-plan-card p { color:var(--dim,#777); line-height:1.6; }

/* 좁은 휴대전화에서는 글자를 억지로 줄이지 않고 조작부 자체를 재배치한다. */
.novel-location { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.novel-location span,.novel-location strong { overflow:hidden; text-overflow:ellipsis; }
@media (max-width:390px) {
  .row3,.structure-actions,.test-tier-row { grid-template-columns:1fr; }
  body.writer .notice-actions { flex-wrap:wrap; }
  body.writer .notice-actions button { flex:1 1 100%; }
  #w-editor .ed-bar { display:flex; gap:8px; }
  #w-editor .ed-bar .edb,#w-editor .edb-arrow { width:100%; }
  .scene-plan-card { max-height:calc(100dvh - 24px); overflow-y:auto; }
}

/* 작품 설정의 추가·수정은 좁은 카드 안이 아니라 독립된 인물설정 화면에서 진행한다. */
.character-editor-head h1 { margin:4px 0 8px; font-size:28px; }
.character-editor-head p { margin:0; color:var(--dim); font-size:13px; line-height:1.65; }
.character-manager { display:flex; flex-direction:column; gap:12px; padding:18px; }
.character-manager.hidden { display:none; }
.character-manager .section-ai-intro { margin-bottom:6px; }
.character-manager .ai-btn { width:100%; min-height:48px; }
.work-character-row { min-width:0; }
.work-character-row .cast-main { min-width:0; }
.work-character-row .cast-meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.character-editor-form { display:flex; flex-direction:column; gap:14px; padding:18px;
  border-radius:18px; background:var(--panel); box-shadow:var(--shadow-sm); }
.character-editor-form.hidden,.character-editor-actions.hidden { display:none; }
.character-editor-form .basic-field { margin:0; min-width:0; }
.character-editor-form textarea { min-height:180px; resize:vertical; }
.character-editor-actions { display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:auto; }
.character-editor-actions button { min-height:54px; }
@media (max-width:390px) {
  .character-editor-form .row2 { grid-template-columns:1fr; }
}
/* Android 앱 성능 보정 */
body.writer.native {
  background-attachment: scroll;
}

body.writer.native .app-top,
body.writer.native .wz-foot,
body.writer.native .app-nav,
body.writer.native .modal {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.writer.native .app-top,
body.writer.native .wz-foot,
body.writer.native .app-nav {
  background: var(--bg) !important;
}
/* 작품 안 글 목록 — 왼쪽 삭제 / 오른쪽 글 열기 */
.ch-item-row { padding:0 !important; gap:0 !important; overflow:hidden; }
.chapter-list-delete { flex:0 0 48px; align-self:stretch; min-height:58px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--dim); font-size:19px; }
.chapter-list-delete:active { background:var(--panel2); color:var(--text); }
.chapter-list-open { display:flex; flex:1 1 auto; min-width:0; align-items:center; gap:11px; padding:14px 16px; border:0; background:transparent; color:var(--text); text-align:left; }
.chapter-list-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chapter-list-open .ch-len { margin-left:auto; flex:0 0 auto; }

/* 마이 > 저장 기록 */
.history-center-card{width:min(92vw,620px);max-height:min(82dvh,760px);display:flex;flex-direction:column;gap:12px}.history-center-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.history-center-head h2{margin:0}.history-center-help{margin:0;color:var(--dim);font-size:13px;line-height:1.55}.history-center-list{display:grid;gap:9px;overflow-y:auto;padding-right:2px}.history-center-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.history-center-item div{min-width:0;display:grid;gap:3px}.history-center-item small,.history-center-item time{color:var(--dim);font-size:11px}.history-center-item b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.history-center-item button{flex:0 0 auto}.history-center-empty{margin:0;padding:24px 8px;text-align:center;color:var(--dim)}

/* 웹툰 집필: 키보드가 열리면 에디터 전체를 보이는 화면 안으로 올린다. */
body.webtoon-keyboard-focus.writer { overflow:hidden; }
body.webtoon-keyboard-focus.writer #w-editor {
  position:fixed; z-index:70; top:var(--visual-viewport-top, 0px); left:50%;
  width:min(100%, 720px); height:var(--visual-viewport-height, 100dvh); min-height:0; max-height:var(--visual-viewport-height, 100dvh);
  transform:translateX(-50%); overflow:hidden; padding:10px 14px 8px; background:var(--bg);
}
body.webtoon-keyboard-focus.writer #w-editor .app-top { flex:0 0 auto; }
body.webtoon-keyboard-focus.writer #w-editor .ed-title { flex:0 0 auto; margin-bottom:6px; }
body.webtoon-keyboard-focus.writer #w-editor .ed-body {
  flex:1 1 auto; width:100%; min-height:0 !important; height:auto !important; max-height:none !important;
  overflow-y:auto; overscroll-behavior:contain; scroll-padding-bottom:88px; padding-bottom:96px;
}
body.webtoon-keyboard-focus.writer #w-editor #ed-status,
body.webtoon-keyboard-focus.writer #w-editor .ed-bar { display:none !important; }

/* 뒤쪽의 기존 writer 규칙보다 Figma 화면 좌표가 항상 우선한다. */
body.writer #w-work.writer-figma-work:not(.writer-work-settings-mode) {
  width:min(100%,375px); height:100dvh; min-height:100dvh; margin:0 auto; padding:0;
  gap:0; overflow:hidden; border-radius:28px 28px 0 0; background:#fff; color:#0f0f0f;
}
body.writer #w-editor.writer-figma-editor {
  width:min(100%,375px); height:100dvh; min-height:100dvh; margin:0 auto; padding:0;
  gap:0; overflow:hidden; border-radius:28px 28px 0 0; background:#fff; color:#0f0f0f;
}
body.writer #w-editor.writer-figma-editor .ed-title {
  position:absolute; top:calc(78px + var(--writer-safe-top)); left:16px;
  width:335px; height:37px; min-height:0; margin:0; padding:0 74px 0 14px;
  border:0; border-bottom:1px solid #e6e6e6; border-radius:0; background:transparent;
  color:#0f0f0f; box-shadow:none!important;
}
body.writer #w-editor.writer-figma-editor .ed-body {
  position:absolute; top:calc(134px + var(--writer-safe-top)); right:11px;
  bottom:calc(66px + max(0px, var(--writer-safe-bottom) - 21px)); left:30px;
  width:auto; height:auto; min-height:0; max-height:none; margin:0!important; padding:0!important;
  border:0!important; border-radius:0!important; background:#fff!important; box-shadow:none!important;
}
body.writer #w-editor.writer-figma-editor .writer-editor-actions {
  position:absolute; right:0; bottom:max(0px, calc(var(--writer-safe-bottom) - 21px)); left:0;
  display:block; height:66px; margin:0; padding:0; border-radius:0; background:#fff;
}

/*
 * Figma 책꽂이의 공통 하단 내비게이션.
 * 일반 .wview 규칙이나 화면별 좌표가 이 바를 다시 밀어내지 못하게 마지막에 고정한다.
 */
body.writer #w-home.writer-shelf-screen {
  width:min(100%,375px);
  height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  padding:0;
  gap:0;
  overflow:hidden;
}
body.writer #w-home.writer-shelf-screen > .writer-shelf-nav {
  position:fixed;
  z-index:30;
  right:auto;
  bottom:0;
  left:50%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  width:min(100%,375px);
  height:calc(63px + var(--writer-safe-bottom));
  margin:0;
  padding:0 0 var(--writer-safe-bottom);
  transform:translateX(-50%);
  border:0;
  background:#fff;
}
body.writer #w-home.writer-shelf-screen > .writer-shelf-nav > button,
body.writer #w-home.writer-shelf-screen > .writer-shelf-nav > button:nth-child(1),
body.writer #w-home.writer-shelf-screen > .writer-shelf-nav > button:nth-child(2),
body.writer #w-home.writer-shelf-screen > .writer-shelf-nav > button:nth-child(3) {
  position:static;
  display:grid;
  place-items:center;
  width:100%;
  height:63px;
  min-height:63px;
  margin:0;
  padding:0;
  transform:none;
}

/* Figma 368:85 — 새 책 만들기 방식 선택 */
body.writer:has(#w-create-choice:not(.hidden)),
body.writer:has(#w-wizard.writer-world-result-mode:not(.hidden)) {
  width:100%;
  max-width:375px;
  padding:0;
  background:#fff;
  color:#0f0f0f;
}
body.writer:has(#w-create-choice:not(.hidden)) #app-nav,
body.writer:has(#w-wizard.writer-world-result-mode:not(.hidden)) #app-nav { display:none!important; }
body.writer #w-create-choice.writer-create-screen {
  position:relative;
  width:min(100%,375px);
  height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  padding:0;
  gap:0;
  overflow:hidden;
  border-radius:28px 28px 0 0;
  background:#fff;
  color:#0f0f0f;
  font-family:"Noto Sans KR",sans-serif;
}
body.writer .writer-create-back {
  position:absolute;
  z-index:3;
  top:29px;
  left:23px;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  min-height:24px;
  margin:0;
  padding:0;
  transform:rotate(180deg);
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.writer .writer-create-back img { display:block; width:24px; height:24px; }
.writer-create-breadcrumb {
  position:absolute;
  z-index:2;
  top:33px;
  left:114px;
  width:180px;
  height:21px;
  margin:0;
  color:#7a7a7a;
  font:400 16px/normal "Noto Sans KR",sans-serif;
  white-space:nowrap;
}
.writer-create-breadcrumb strong { color:#0f0f0f; font-weight:400; }
.writer-create-hero { position:absolute; top:101px; left:52px; display:block; width:283px; height:218px; }
.writer-create-title { display:none; }
body.writer .writer-create-option {
  position:absolute;
  left:19px;
  display:flex;
  align-items:center;
  width:335px;
  height:72px;
  min-height:72px;
  margin:0;
  padding:0;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:8px!important;
  background:#f6f6f6!important;
  color:#0f0f0f!important;
  text-align:left;
  box-shadow:none!important;
}
body.writer .writer-create-option.ai { top:373px; border-color:rgba(253,111,141,.3)!important; }
body.writer .writer-create-option.manual { top:473px; border-color:rgba(31,65,187,.3)!important; }
.writer-create-option > img { flex:0 0 39px; width:39px; height:39px; margin-left:33px; }
.writer-create-option > span { display:block; min-width:0; margin-left:14px; }
.writer-create-option b { display:block; color:#0f0f0f; font-size:14px; font-weight:700; line-height:normal; }
.writer-create-option small { display:block; margin-top:4px; color:#7a7a7a; font-size:11px; font-weight:400; line-height:normal; white-space:nowrap; }
.writer-create-nav {
  position:fixed;
  z-index:30;
  right:auto;
  bottom:0;
  left:50%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  width:min(100%,375px);
  height:calc(63px + var(--writer-safe-bottom));
  margin:0;
  padding:0 0 var(--writer-safe-bottom);
  transform:translateX(-50%);
  border:0;
  background:#fff;
}
body.writer .writer-create-nav > button {
  position:static;
  display:grid;
  place-items:center;
  width:100%;
  height:63px;
  min-height:63px;
  margin:0;
  padding:0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.writer-create-nav img { display:block; width:24px; height:24px; object-fit:contain; }

/* Figma 381:189 / 378:707 / 379:1323 — AI 입력·장르·다시 쓰기 시트 */
body.writer #world-ai-back.sheet-back {
  z-index:90;
  background:rgba(15,15,15,.30);
  backdrop-filter:none;
}
body.writer #world-ai-sheet.world-ai-sheet {
  position:fixed;
  z-index:91;
  bottom:0;
  left:0;
  display:block;
  width:min(100%,375px);
  height:592px;
  max-height:none;
  margin:0;
  padding:0;
  transform:none;
  overflow:hidden;
  border:0;
  border-radius:30px 30px 0 0;
  background:#fff;
  color:#0f0f0f;
  box-shadow:none;
  font-family:"Noto Sans KR",sans-serif;
}
@media (min-width:376px) {
  body.writer #world-ai-sheet.world-ai-sheet { left:50%; transform:translateX(-50%); }
}
.world-ai-avatar { position:absolute; top:22px; left:166px; display:block; width:39px; height:39px; }
body.writer .world-ai-close {
  position:absolute;
  z-index:2;
  top:30px;
  right:22px;
  left:auto;
  width:24px;
  height:24px;
  min-height:24px;
  margin:0;
  padding:0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.world-ai-close img { display:block; width:24px; height:24px; }
.world-ai-title {
  position:absolute;
  top:79px;
  left:0;
  width:100%;
  color:#0f0f0f;
  font-size:15px;
  font-weight:700;
  line-height:normal;
  text-align:center;
}
body.writer #world-ai-sheet .sheet-body { position:static; height:100%; margin:0; padding:0; overflow:visible; }
body.writer #world-ai-sheet .world-ai-help {
  position:absolute;
  top:103px;
  left:0;
  width:100%;
  margin:0;
  color:#7a7a7a;
  font-size:13px;
  font-weight:400;
  line-height:18px;
  text-align:center;
  white-space:pre-line;
}
body.writer #world-ai-sheet .world-ai-quota {
  position:absolute;
  top:121px;
  left:0;
  width:100%;
  margin:0;
  color:#7a7a7a;
  font-size:13px;
  font-weight:400;
  line-height:18px;
  text-align:center;
}
body.writer #world-ai-fields { position:absolute; top:170px; left:19px; width:335px; height:262px; }
body.writer #world-ai-fields > textarea#world-ai-idea {
  display:block;
  width:335px;
  height:262px;
  min-height:262px;
  max-height:262px;
  margin:0;
  padding:16px;
  resize:none;
  border:.5px solid #7a7a7a;
  border-radius:0;
  background:#f6f6f6;
  color:#0f0f0f;
  font:350 14px/22px "Noto Sans KR",sans-serif;
  box-shadow:none;
}
body.writer #world-ai-fields > textarea#world-ai-idea::placeholder { color:#7a7a7a; opacity:1; }
body.writer #world-ai-sheet .world-ai-current { display:none!important; }
body.writer #world-ai-start {
  position:absolute;
  top:484px;
  left:18px;
  width:335px;
  height:44px;
  min-height:44px;
  margin:0;
  padding:0;
  border:0!important;
  border-radius:6px!important;
  background:#0f0f0f!important;
  color:#fff!important;
  font:700 14px/44px "Noto Sans KR",sans-serif;
  box-shadow:none!important;
}
body.writer #world-ai-sheet[data-mode="redraw"] #world-ai-fields { top:171px; left:20px; }
body.writer #world-ai-sheet[data-mode="redraw"] .world-ai-help { top:103px; }
body.writer #world-ai-sheet[data-mode="redraw"] .world-ai-quota { top:121px; }
body.writer #world-ai-sheet[data-mode="genre"] #world-ai-fields { top:166px; left:31px; width:317px; height:auto; }
body.writer #world-ai-sheet[data-mode="genre"] .world-ai-help { top:103px; }
body.writer #world-ai-sheet[data-mode="genre"] .world-ai-quota { display:none; }
.world-genre-grid { display:flex; flex-wrap:wrap; align-content:flex-start; gap:16px 9px; width:317px; }
body.writer .world-genre-chip {
  flex:0 0 60px;
  width:60px;
  height:38px;
  min-height:38px;
  margin:0;
  padding:0;
  border:0!important;
  border-radius:75px!important;
  background:#e5eafc!important;
  color:#0f0f0f!important;
  font:400 14px/38px "Noto Sans KR",sans-serif;
  white-space:nowrap;
  box-shadow:17px 26px 25px rgba(226,226,226,.25)!important;
  outline:0;
  -webkit-tap-highlight-color:transparent;
}
body.writer .world-genre-chip:nth-child(1) { flex-basis:108px; width:108px; }
body.writer .world-genre-chip:nth-child(2),
body.writer .world-genre-chip:nth-child(3),
body.writer .world-genre-chip:nth-child(5),
body.writer .world-genre-chip:nth-child(6),
body.writer .world-genre-chip:nth-child(8),
body.writer .world-genre-chip:nth-child(12) { flex-basis:85px; width:85px; }
body.writer .world-genre-chip.on {
  background:linear-gradient(179deg,#9c2cf3 13.5%,#3a49f9 109.75%)!important;
  color:#fff!important;
  font-weight:700;
}

/* 키보드가 열린 동안 AI 입력과 직접 인물 설정의 진행 버튼은 키보드 바로 위에 둔다. */
body.keyboard-open.writer #world-ai-sheet.world-ai-sheet {
  top:var(--visual-viewport-top,0px);
  bottom:auto;
  height:var(--visual-viewport-height,100dvh);
}
body.keyboard-open.writer #world-ai-sheet #world-ai-start {
  top:auto;
  bottom:8px;
}
body.keyboard-open.writer #w-wizard.writer-manual-flow-mode > .wz-result-nav {
  display:none!important;
}
body.keyboard-open.writer #w-wizard.writer-manual-flow-mode > #wz-foot {
  top:auto;
  bottom:8px;
}
body.keyboard-open.writer #w-wizard.writer-manual-cast-editor .figma-cast-editor-sheet {
  position:fixed;
  top:var(--visual-viewport-top,0px);
  right:auto;
  bottom:auto;
  left:50%;
  width:min(100%,375px);
  height:var(--visual-viewport-height,100dvh);
  transform:translateX(-50%);
}
body.keyboard-open.writer #w-wizard.writer-manual-cast-editor .figma-cast-editor-scroll { bottom:68px; }
body.keyboard-open.writer #w-wizard.writer-manual-cast-editor .figma-cast-editor-next {
  position:absolute;
  top:auto;
  bottom:8px;
}

/* Figma 379:915 — AI 세계관 결과 */
body.writer #w-wizard.writer-world-result-mode {
  position:relative;
  width:min(100%,375px);
  height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  padding:0;
  gap:0;
  overflow:hidden;
  border-radius:28px 28px 0 0;
  background:#fff;
  color:#0f0f0f;
  font-family:"Noto Sans KR",sans-serif;
}
body.writer #w-wizard > .writer-create-back,
body.writer #w-wizard > .wz-figma-breadcrumb,
body.writer #w-wizard > .wz-result-nav { display:none; }
body.writer #w-wizard.writer-world-result-mode > .writer-create-back { display:grid; }
body.writer #w-wizard.writer-world-result-mode > .wz-figma-breadcrumb { display:block; }
body.writer #w-wizard.writer-world-result-mode > .wz-result-nav { display:grid; }
body.writer #w-wizard.writer-world-result-mode > .app-top,
body.writer #w-wizard.writer-world-result-mode > .wz-top { display:none; }
body.writer #w-wizard.writer-world-result-mode #wzp-3 {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
body.writer #w-wizard.writer-world-result-mode #wzp-3 > .wz-kicker { display:none; }
body.writer #w-wizard.writer-world-result-mode #wzp-3 > .wz-q {
  position:absolute;
  top:91px;
  left:0;
  width:100%;
  margin:0;
  color:#0f0f0f;
  font-size:26px;
  font-weight:700;
  line-height:normal;
  text-align:center;
}
body.writer #w-wizard.writer-world-result-mode #wzp-3 > .wz-sub {
  position:absolute;
  top:130px;
  left:0;
  width:100%;
  margin:0;
  color:#7a7a7a;
  font-size:13px;
  font-weight:400;
  line-height:17px;
  text-align:center;
  white-space:pre-line;
}
body.writer #w-wizard.writer-world-result-mode #wz-result {
  position:absolute;
  top:202px;
  left:20px;
  width:335px;
  height:401px;
}
body.writer #w-wizard.writer-world-result-mode .result-field { position:absolute; left:0; display:block; width:335px; margin:0; }
body.writer #w-wizard.writer-world-result-mode .result-field:first-child { top:0; height:74px; }
body.writer #w-wizard.writer-world-result-mode .result-field:nth-child(2) { top:111px; height:290px; }
body.writer #w-wizard.writer-world-result-mode .result-field > span {
  display:block;
  height:19px;
  margin:0 0 7px;
  color:#0f0f0f;
  font-size:14px;
  font-weight:700;
  line-height:normal;
}
body.writer #w-wizard.writer-world-result-mode .result-field .wz-in {
  display:block;
  width:335px;
  margin:0;
  padding:0 13px;
  border:1px solid rgba(253,111,141,.3)!important;
  border-radius:8px;
  background:#f6f6f6!important;
  color:#0f0f0f;
  box-shadow:none;
}
body.writer #w-wizard.writer-world-result-mode #wzr-title {
  height:48px;
  min-height:48px;
  font:700 16px/48px "Noto Sans KR",sans-serif;
}
body.writer #w-wizard.writer-world-result-mode #wzr-logline {
  height:264px;
  min-height:264px;
  max-height:264px;
  padding:15px;
  resize:none;
  font:350 14px/22px "Noto Sans KR",sans-serif;
}
body.writer #w-wizard.writer-world-result-mode > #wz-foot {
  position:fixed;
  z-index:32;
  top:auto;
  right:auto;
  bottom:var(--sseujak-primary-action-bottom);
  left:50%;
  display:block;
  width:335px;
  height:44px;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  border:0;
  background:transparent;
}
body.writer #w-wizard.writer-world-result-mode .result-actions {
  display:grid;
  grid-template-columns:164px 164px;
  gap:7px;
  width:335px;
  height:44px;
  margin:0;
  padding:0;
}
body.writer #w-wizard.writer-world-result-mode .result-actions > button {
  width:164px;
  height:44px;
  min-height:44px;
  margin:0;
  padding:0;
  border-radius:6px!important;
  font:700 14px/44px "Noto Sans KR",sans-serif;
  box-shadow:none!important;
}
body.writer #w-wizard.writer-world-result-mode .result-actions .btn-redraw {
  border:1px solid #7a7a7a!important;
  background:#fff!important;
  color:#0f0f0f!important;
}
body.writer #w-wizard.writer-world-result-mode .result-actions .btn-main {
  border:0!important;
  background:#0f0f0f!important;
  color:#fff!important;
}

@media (max-width:374px) {
  body.writer .writer-create-option { left:20px; width:calc(100% - 40px); }
  .writer-create-hero { left:50%; transform:translateX(-50%); }
  body.writer #world-ai-fields,
  body.writer #world-ai-sheet[data-mode="redraw"] #world-ai-fields { left:20px; width:calc(100% - 40px); }
  body.writer #world-ai-fields > textarea#world-ai-idea { width:100%; }
  body.writer #world-ai-start { width:calc(100% - 40px); }
  body.writer #world-ai-start { left:20px; }
  body.writer #w-wizard.writer-world-result-mode #wz-result { width:calc(100% - 40px); }
  body.writer #w-wizard.writer-world-result-mode .result-field,
  body.writer #w-wizard.writer-world-result-mode .result-field .wz-in { width:100%; }
  body.writer #w-wizard.writer-world-result-mode > #wz-foot { width:calc(100% - 40px); }
  body.writer #w-wizard.writer-world-result-mode .result-actions { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  body.writer #w-wizard.writer-world-result-mode .result-actions > button { width:100%; }
}

/* Figma 396:263 / 280 / 224 / 335 / 408 / 493 / 539 — 동화에만 적용. */
.children-only,.children-sheet-tree,.children-sheet-bear { display:none; }
body.writer[data-genre="children"] .children-only { display:block; }
body.writer[data-genre="children"] #w-home.children-shelf-empty .writer-shelf-heading,
body.writer[data-genre="children"] #w-home.children-shelf-empty .writer-shelf-divider,
body.writer[data-genre="children"] #w-empty > img { display:none; }
body.writer[data-genre="children"] #w-empty { top:0; height:100%; }
body.writer[data-genre="children"] .children-empty-art { position:absolute; inset:0; pointer-events:none; }
body.writer[data-genre="children"] .children-empty-art img { position:absolute; margin:0; object-fit:cover; }
body.writer[data-genre="children"] .child-deer { left:calc(50% - 86.5px); top:166px; width:170px; height:223px; }
body.writer[data-genre="children"] .child-red-leaf { left:calc(50% + 73.5px); top:149px; width:59px; height:50px; }
body.writer[data-genre="children"] .child-brown-leaf { left:calc(50% + 73.5px); top:236px; width:59px; height:47px; }
body.writer[data-genre="children"] .child-small-heart { left:calc(50% - 111.5px); top:166px; width:21.203px; height:33.173px; }
body.writer[data-genre="children"] .child-red-plant { left:calc(50% - 149.45px); top:261.66px; width:30.694px; height:42.63px; transform:rotate(27.22deg); }
body.writer[data-genre="children"] .child-flowers { left:calc(50% + 76.5px); top:333px; width:49px; height:56px; }
body.writer[data-genre="children"] #w-empty b { position:absolute; top:445px; left:0; width:100%; margin:0; white-space:pre-line; font:400 20px/27px "Noto Sans KR",sans-serif; }
body.writer[data-genre="children"] #w-empty #w-retry { position:absolute; top:515px; left:50%; transform:translateX(-50%); }
body.writer[data-genre="children"] .children-shelf-heart { position:absolute; left:calc(50% - 85.5px); top:-16px; width:31px; height:49px; object-fit:cover; }
body.writer[data-genre="children"] #w-new.writer-shelf-new,
body.writer[data-genre="children"] .writer-shelf-tag { background:#fd6f8d!important; color:#fff!important; }
body.writer[data-genre="children"] #w-home {
  --sseujak-primary-action-bottom:calc(var(--sseujak-nav-total-height) + var(--sseujak-ad-height) + 37px);
  --sseujak-primary-action-reserved:calc(var(--sseujak-primary-action-bottom) + 62px);
}
body.writer[data-genre="children"] .sseujak-topbar-back.writer-create-back { transform:none; }
body.writer[data-genre="children"] #w-create-choice > .writer-create-hero { display:none; }
body.writer[data-genre="children"] .children-create-art { position:relative; width:100%; min-height:639px; pointer-events:none; }
body.writer[data-genre="children"] .children-create-art img { position:absolute; object-fit:cover; }
body.writer[data-genre="children"] .children-create-heart { top:123px; left:calc(50% - 123.5px); width:37px; height:58px; }
body.writer[data-genre="children"] .children-create-fox { top:140px; left:calc(50% - 83.5px); width:168px; height:148px; }
body.writer[data-genre="children"] .children-create-art h1 { position:absolute; top:323px; left:0; width:100%; margin:0; text-align:center; font:500 20px/27px "Noto Sans KR",sans-serif; }
body.writer[data-genre="children"] .children-create-art p { position:absolute; top:360px; left:0; width:100%; margin:0; color:#7a7a7a; text-align:center; font:400 16px/22px "Noto Sans KR",sans-serif; }
body.writer[data-genre="children"] #w-create-choice .writer-create-option { left:20px; width:calc(100% - 40px); border-width:.3px!important; }
body.writer[data-genre="children"] #w-create-choice .writer-create-option.ai { top:467px; }
body.writer[data-genre="children"] #w-create-choice .writer-create-option.manual { top:567px; }
body.writer[data-genre="children"] #w-create-choice .writer-create-option > img { margin-left:35px; }
body.writer[data-genre="children"] #w-create-choice .writer-create-option > span { margin-left:18px; }
body.writer[data-genre="children"] #w-create-choice .writer-create-option b { font-size:18px; }
body.writer[data-genre="children"] #w-create-choice .writer-create-option small { font-size:13px; margin-top:3px; }
body.writer[data-genre="children"] #w-create-choice.writer-create-screen { overflow-y:auto; padding-bottom:var(--sseujak-primary-action-reserved); }
body.writer[data-genre="children"] #world-ai-sheet.children-theme-sheet { height:min(592px,100dvh); }
body.writer[data-genre="children"] .children-theme-sheet[data-mode="idea"] .children-sheet-tree { display:block; position:absolute; left:36px; top:112px; width:34px; height:53px; object-fit:cover; }
body.writer[data-genre="children"] .children-theme-sheet[data-mode="genre"] .children-sheet-bear { display:block; position:absolute; left:calc(50% + 88.5px); bottom:108px; width:81px; height:109px; object-fit:cover; }
body.writer[data-genre="children"] #world-ai-sheet.children-theme-sheet #world-ai-start { top:auto; bottom:var(--sseujak-sheet-action-bottom); left:20px; width:calc(100% - 40px); background:#fd6f8d!important; }
body.writer[data-genre="children"] #world-ai-sheet.children-theme-sheet[data-mode="genre"] #world-ai-fields { top:189px; left:42px; width:calc(100% - 83px); }
body.writer[data-genre="children"] .children-theme-sheet .world-genre-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; }
body.writer[data-genre="children"] .children-theme-sheet .world-genre-chip { width:100%; min-width:0; flex:none; font-size:14px; }
body.writer[data-genre="children"] .children-theme-sheet .world-genre-chip.on,
body.writer[data-genre="children"] .children-settings-mode .chip.on { background:linear-gradient(179deg,#9c2cf3 13.491%,#3a49f9 109.75%)!important; color:#fff!important; font-weight:700; }
body.writer[data-genre="children"] .children-theme-sheet .world-genre-chip:not(.on),
body.writer[data-genre="children"] .children-settings-mode .chip:not(.on) { background:#e5eafc!important; color:#000!important; }
body.writer[data-genre="children"] .children-result-owl { position:absolute; top:172px; right:23px; width:54px; height:55px; object-fit:cover; }
body.writer[data-genre="children"] #w-wizard.writer-world-result-mode .result-field .wz-in { border:.3px solid #fd6f8d; border-radius:8px; }
body.writer[data-genre="children"] #w-wizard.writer-world-result-mode #wzr-title { font-weight:400; }
body.writer[data-genre="children"] #w-wizard .result-actions .btn-main { background:#fd6f8d!important; color:#fff!important; border:0!important; }
body.writer[data-genre="children"] #w-wizard .result-actions .btn-redraw { background:#fff!important; border:1px solid #fd6f8d!important; color:#fd6f8d!important; }
body.writer[data-genre="children"]:has(#w-wizard.children-settings-mode:not(.hidden)) { width:100%; max-width:375px; padding:0; background:#fff; color:#0f0f0f; }
body.writer[data-genre="children"]:has(#w-wizard.children-settings-mode:not(.hidden)) #app-nav { display:none!important; }
body.writer[data-genre="children"] #w-wizard.children-settings-mode { position:relative; width:100%; height:100dvh; min-height:100dvh; margin:0; padding:0; background:#fff; overflow:hidden; font-family:"Noto Sans KR",sans-serif; }
body.writer[data-genre="children"] #w-wizard.children-settings-mode > .wz-result-nav { display:grid; }
body.writer[data-genre="children"] .children-settings-mode #wz-kicker { display:none; }
body.writer[data-genre="children"] .children-settings-mode #wzp-1 { position:absolute; inset:0; margin:0; padding:0; }
body.writer[data-genre="children"] .children-settings-mode #wz-title { position:absolute; top:91px; left:0; width:100%; margin:0; font:700 26px/normal "Noto Sans KR",sans-serif; text-align:center; }
body.writer[data-genre="children"] .children-settings-mode #wz-sub { position:absolute; top:130px; left:0; width:100%; margin:0; color:#7a7a7a; font:400 13px/17px "Noto Sans KR",sans-serif; white-space:pre-line; text-align:center; }
body.writer[data-genre="children"] .children-settings-mode #wz-step-body { position:absolute; top:230px; left:41px; width:calc(100% - 88px); bottom:var(--sseujak-primary-action-reserved); overflow:auto; }
body.writer[data-genre="children"] .children-settings-mode .child-setup-group { margin:0 0 65px; }
body.writer[data-genre="children"] .children-settings-mode .child-setup-group h2 { margin:0 0 16px 3px; font:700 15px/19px "Noto Sans KR",sans-serif; white-space:nowrap; }
body.writer[data-genre="children"] .children-settings-mode .child-choice-list { gap:13px; }
body.writer[data-genre="children"] .children-settings-mode .chip { height:38px; min-height:38px; padding:0; border:0!important; border-radius:75px; font:400 14px/38px "Noto Sans KR",sans-serif; box-shadow:17px 26px 25px rgba(226,226,226,.25); }
body.writer[data-genre="children"] #w-wizard.children-settings-mode #wz-foot { position:fixed; z-index:81; top:auto; bottom:var(--sseujak-primary-action-bottom); left:50%; transform:translateX(-50%); width:min(335px,calc(100% - 40px)); height:44px; margin:0; padding:0; background:transparent; border:0; }
body.writer[data-genre="children"] #w-wizard.children-settings-mode .result-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0; }
body.writer[data-genre="children"] #w-wizard.children-settings-mode .result-actions button { width:100%; height:44px; min-height:44px; padding:0; border-radius:6px!important; font:700 14px/44px "Noto Sans KR",sans-serif; box-shadow:none; }
@media (max-height:740px) {
  body.writer[data-genre="children"] #w-empty { overflow-y:auto; bottom:var(--sseujak-primary-action-reserved); height:auto; }
  body.writer[data-genre="children"] .children-empty-art { min-height:490px; }
  body.writer[data-genre="children"] #w-wizard.writer-world-result-mode #wzp-3 { bottom:var(--sseujak-primary-action-reserved); height:auto; overflow-y:auto; }
  body.writer[data-genre="children"] #w-wizard.writer-world-result-mode #wz-result { position:relative; margin-top:202px; top:0; margin-bottom:18px; }
}
body.keyboard-open.writer[data-genre="children"] #world-ai-sheet.children-theme-sheet { height:var(--visual-viewport-height,100dvh); }
body.keyboard-open.writer[data-genre="children"] #world-ai-sheet.children-theme-sheet #world-ai-start { bottom:8px; }
body.keyboard-open.writer[data-genre="children"] #world-ai-sheet.children-theme-sheet #world-ai-fields { top:155px; bottom:64px; height:auto; }
body.keyboard-open.writer[data-genre="children"] #world-ai-sheet.children-theme-sheet #world-ai-idea { height:100%; min-height:80px; max-height:none; }

/* Children setup/plan use the existing footer above the shared navigation. */
body.writer[data-genre="children"] #w-wizard:not(.children-settings-mode):not(.writer-world-result-mode) > #wz-foot {
  bottom:var(--sseujak-primary-action-bottom); z-index:81;
}

/* Reserve the actual webtoon toolbar height, including wrapped button labels. */
body.writer[data-genre="webtoon"] #w-editor.sseujak-writing-keyboard.webtoon-tools-on .webtoon-quickbar {
  position:absolute; top:auto; bottom:6px; transform:none;
}
body.writer[data-genre="webtoon"] #w-editor.sseujak-writing-keyboard.webtoon-tools-on .ed-body {
  bottom:calc(var(--writing-tools-height,80px) + 18px)!important;
}
body.writer[data-genre="webtoon"] #w-editor.sseujak-writing-keyboard.webtoon-tools-on .sseujak-writing-bar {
  display:none!important;
}

/* Validation belongs to the open plot sheet, above its input. */
#plot-ai-input-error { position:absolute; top:157px; left:20px; width:calc(100% - 40px); margin:0; color:#b42318; font:500 12px/18px "Noto Sans KR",sans-serif; }
#plot-ai-input-error:empty { display:none; }
body.writer #w-wizard.writer-world-result-mode > #wz-foot .result-actions {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
}
body.writer #w-wizard.writer-world-result-mode > #wz-foot .result-actions > button { width:100%; min-width:0; }

/* Character deletion confirmation must stay above its editing sheet. */
body.writer:has(.figma-cast-editor-sheet) #action-confirm { z-index:300; }

/* Shared header clearance for normal-flow settings pages; preserve header coordinates. */
body.writer #w-settings,
body.writer #w-plans,
body.writer #w-build,
body.writer #w-character,
body.writer #w-work.writer-work-settings-mode {
  position:relative;
  padding-top:calc(var(--sseujak-topbar-top) + 24px + 24px);
}
body.writer #w-work.writer-work-settings-mode > .wk-sub {
  flex-wrap:wrap;
  overflow-wrap:anywhere;
}

/* Account screens: Figma 439:740, 441:29, 441:46, 441:63. */
@font-face{font-family:Inter;src:url('/static/fonts/Inter-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Roboto;src:url('/static/fonts/Roboto-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
body.writer:has(.account-page:not(.hidden)){max-width:375px;background:#fff;color:#0f0f0f;padding:0;}
body.writer .account-page{position:relative;height:100dvh;padding:0!important;background:#fff;font-family:'Noto Sans KR',sans-serif;}
.account-page .account-scroll{position:absolute;top:calc(80px + var(--sseujak-safe-top));bottom:calc(var(--sseujak-nav-total-height) + var(--sseujak-ad-height));left:0;right:0;overflow-y:auto;overscroll-behavior:contain;}
.account-page .account-content{display:flex;flex-direction:column;gap:20px;padding:12px 22px 24px;min-width:0;}
.account-page p,.account-page h2,.account-page h3{margin:0;}
.account-page .account-heading{font-size:23px;font-weight:700;line-height:35px;letter-spacing:0;}
.account-page .account-subtitle,.account-page #plans-hint{font-size:13px;line-height:20px;color:#737373;margin:0;}
.account-page #settings-account{border:0;background:transparent;padding:0;margin:0;border-radius:0;box-shadow:none;}
.account-page .account-name{font-size:24px;font-weight:700;line-height:36px;}
.account-page .account-email{font-size:13px;line-height:20px;color:#737373;margin-top:4px;overflow-wrap:anywhere;}
.account-page #settings-plan,.account-page #credit-products{display:flex;flex-direction:column;gap:20px;}
.account-page .account-card-new{display:flex;flex-direction:column;gap:12px;border:1px solid #e3e3e3;border-radius:20px;padding:18px;background:#fff;}
.account-page small,.account-page .account-note{font-size:12px;line-height:18px;font-weight:400;color:#737373;}
.account-page .account-plan-name{font-size:22px;line-height:33px;color:#2f91fb;}
.account-page .account-credit-number{font-size:28px;line-height:42px;}
.account-page .account-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;width:100%;padding:0;border:0;background:none;box-shadow:none;border-radius:0;font:400 14px/21px 'Noto Sans KR',sans-serif;text-align:left;color:#0f0f0f;}
.account-page .account-row>span:last-child{font-size:13px;line-height:20px;color:#737373;}
.account-page .account-row>button{padding:0;background:none;border:0;box-shadow:none;font:inherit;color:inherit;}
.account-page .account-primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:10px 8px;border:0;border-radius:8px;background:#0f0f0f;color:#fff;font:700 14px/21px 'Noto Sans KR',sans-serif;box-shadow:none;}
.account-page #usage-summary{display:block;margin:0;}
.account-page #usage-summary h3{font-size:15px;line-height:23px;font-weight:700;}
.account-page #usage-summary>.account-row{border-bottom:1px solid #e3e3e3;padding:0;background:none;border-radius:0;}
.account-page .account-links>.account-row:not(:last-child){border-bottom:1px solid #e3e3e3;}
.account-page .account-menu-list{display:flex;flex-direction:column;gap:8px;}
.account-page .account-menu-list>.account-row:not(:last-child){padding-bottom:8px;min-height:53px;border-bottom:1px solid #e3e3e3;}
.account-page #plans-list{display:flex;flex-direction:column;gap:20px;margin:0;}
.account-plan-card{border:.5px solid #9098a3;border-radius:20px;background:#fff;overflow:hidden;--plan-color:#fe8235;font-family:Inter,'Noto Sans KR',sans-serif;}
.account-plan-light{--plan-color:#2f91fb;}.account-plan-pro{--plan-color:#08a02a;}
.account-plan-price{display:flex;align-items:center;gap:6px;padding:16px 25px;color:#081f32;}
.account-plan-price b{font-size:30px;letter-spacing:.9px;line-height:36px;font-weight:700;}
.account-plan-price span{font-size:16px;color:#000;}
.account-plan-body{display:flex;flex-direction:column;gap:16px;padding:25px;}
.account-plan-body h3{font:500 30px/25px Inter,sans-serif;color:var(--plan-color);}
.account-plan-body p{font-size:16px;line-height:25px;color:#000;}
.account-plan-body hr{margin:0;border:0;height:1.5px;background:#f3f3f3;width:100%;}
.account-plan-body ul{display:flex;flex-direction:column;gap:14px;padding:0;margin:0;list-style:none;}
.account-plan-body li{display:flex;align-items:center;gap:12px;min-height:25px;font-size:16px;line-height:25px;color:#000;}
.account-plan-body li img{flex:none;width:18px;height:auto;}
.account-plan-footer{padding:16px 25px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.account-plan-footer .plan-buy-options{display:flex;flex-direction:column;width:100%;gap:8px;}
.account-plan-footer .plan-cta{padding:12px 16px;border:0;border-radius:4px;background:var(--plan-color);color:#fff;font:700 13px/16px Inter,'Noto Sans KR',sans-serif;letter-spacing:1.08px;box-shadow:none;}
.account-plan-free .plan-cta{font-family:Roboto,'Noto Sans KR',sans-serif;}
.account-plan-footer .plan-cta:disabled{opacity:.65;}
.account-page .plans-fine{font:400 12px/18px 'Noto Sans KR',sans-serif;color:#737373;margin:0;}


body.writer:has(.account-page:not(.hidden)){}
.account-page #settings-plan{padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:none;}
.account-page #usage-summary>.account-row{flex-direction:row;box-shadow:none;}
.account-page #usage-summary>.account-row>span{font-size:13px;}

/* Shared long-press ordering, normal taps still open the chapter. */
.writer-piece-card[data-chapter-id]{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.reorder-selected{opacity:.55;outline:2px solid #fd6f8d;outline-offset:-2px}