@font-face {
  font-family:"Noto Sans KR";
  src:url("/static/fonts/NotoSansKR-Variable.ttf") format("truetype");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:"Nanum Myeongjo";
  src:url("/static/fonts/NanumMyeongjo-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
:root {
  --sseujak-frame-width:375px;
  --sseujak-frame-height:812px;
  --sseujak-safe-top:max(env(safe-area-inset-top, 0px), var(--app-safe-top, 0px));
  --sseujak-safe-bottom:max(env(safe-area-inset-bottom, 0px), var(--app-safe-bottom, 0px));
  --sseujak-nav-content-height:86px;
  --sseujak-nav-total-height:calc(var(--sseujak-nav-content-height) + var(--sseujak-safe-bottom));
  --sseujak-nav-icon-bottom:5px;
  --sseujak-writing-bar-height:66px;
  --sseujak-writing-indicator-top:-1px;
  --sseujak-ad-height:0px;
  /* User baseline: memo header, including the device top safe area. */
  --sseujak-topbar-top:calc(29px + var(--sseujak-safe-top));
  --sseujak-topbar-left:23px;
  --sseujak-topbar-right:32px;
  --sseujak-primary-action-height:44px;
  --sseujak-primary-action-gap:10px;
  --sseujak-primary-action-bottom:calc(var(--sseujak-nav-total-height) + var(--sseujak-ad-height) + var(--sseujak-primary-action-gap));
  --sseujak-primary-action-reserved:calc(var(--sseujak-primary-action-bottom) + var(--sseujak-primary-action-height) + 18px);
  --sseujak-sheet-action-bottom:max(68px, calc(var(--sseujak-safe-bottom) + 20px));
  --sseujak-ink:#0f0f0f;
  --sseujak-muted:#7a7a7a;
  --sseujak-line:#e6e6e6;
  --sseujak-accent:#fd6f8d;
  --sseujak-surface:#fff;
  --sseujak-font-ui:"Noto Sans KR",sans-serif;
  --sseujak-font-writing:"Nanum Myeongjo",serif;
}
html { min-width:0; max-width:100%; overflow-x:hidden; }
body { min-width:0; max-width:100%; background:#e7e7e7; }
.sseujak-frame {
  box-sizing:border-box; width:min(100%,var(--sseujak-frame-width)); min-height:100dvh; margin-inline:auto;
  overflow:hidden; border-radius:28px; background:var(--sseujak-surface);
  box-shadow:0 10px 24px rgba(0,0,0,.16); font-family:var(--sseujak-font-ui);
}
.sseujak-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* Figma 공통 하단 실행 버튼: 화면별 line-height 보정 없이 글자를 정중앙에 고정한다. */
.sseujak-primary-action {
  display:flex!important; align-items:center!important; justify-content:center!important;
  box-sizing:border-box!important; overflow:hidden!important;
  padding-top:0!important; padding-bottom:0!important;
  line-height:20px!important; text-align:center!important; white-space:nowrap!important;
}
/* 일반 화면의 유일한 하단 실행 버튼 배치 계약.
   버튼 하단 = 공통 내비게이션 전체 높이 + 고정 간격이므로 Android inset이 커져도 겹치지 않는다. */
.sseujak-primary-action--above-nav {
  position:fixed!important; z-index:81!important; top:auto!important; right:auto!important;
  bottom:var(--sseujak-primary-action-bottom)!important; left:50%!important;
  width:min(calc(100% - 40px),335px)!important; height:var(--sseujak-primary-action-height)!important;
  min-height:var(--sseujak-primary-action-height)!important; margin:0!important; padding:0!important;
  transform:translateX(-50%)!important; border-radius:6px!important;
}
.sseujak-primary-action-scroll-region {
  bottom:var(--sseujak-primary-action-reserved)!important;
  scroll-padding-bottom:18px!important;
}

/* 모든 앱 화면의 우측 상단 메뉴. Figma 384:379의 20x16 원본을 24px 터치 기준 안에 둔다. */
.sseujak-screen-menu,
.sseujak-inline-menu {
  display:grid!important; place-items:center!important; width:24px!important; height:24px!important; min-width:24px!important; min-height:24px!important;
  margin:0!important; padding:0!important; border:0!important; border-radius:0!important;
  background:transparent!important; color:var(--sseujak-ink)!important; box-shadow:none!important;
}
.sseujak-screen-menu { position:absolute!important; z-index:35!important; top:var(--sseujak-topbar-top)!important; right:36px!important; }
.sseujak-screen-menu > img,
.sseujak-inline-menu > img { display:block!important; width:20px!important; height:16px!important; margin:0!important; object-fit:contain!important; }

/* 공통 상단바: 뒤로가기 / 현재 위치 / 햄버거. 모든 하위 화면은 이 좌표를 공유한다. */
.sseujak-topbar {
  position:absolute!important; z-index:35!important;
  top:var(--sseujak-topbar-top)!important; right:0!important; left:0!important;
  display:block!important;
  width:auto!important; height:24px!important; min-height:24px!important; margin:0!important; padding:0!important;
  background:transparent!important; box-shadow:none!important;
}
.sseujak-topbar-back {
  position:absolute!important; top:0!important; left:var(--sseujak-topbar-left)!important;
  display:grid!important; place-items:center!important; width:24px!important; height:24px!important; min-height:24px!important;
  margin:0!important; padding:0!important; border:0!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important;
}
.sseujak-topbar-back > img { display:block!important; width:24px!important; height:24px!important; transform:rotate(180deg); }
.sseujak-topbar-location {
  position:absolute!important; top:0!important; left:50%!important; width:auto!important; margin:0!important; padding:0!important;
  color:var(--sseujak-muted)!important; font:400 16px/24px var(--sseujak-font-ui)!important;
  text-align:center!important; white-space:nowrap!important; transform:translateX(-50%)!important;
}
.sseujak-topbar-location strong { color:var(--sseujak-ink)!important; font-weight:400!important; }
.sseujak-topbar > .sseujak-screen-menu,
.sseujak-topbar > .sseujak-inline-menu { position:absolute!important; top:0!important; right:var(--sseujak-topbar-right)!important; left:auto!important; }

/* 상단 홈은 하단 공통 홈과 중복하지 않는다. 빈 버튼 대신 같은 폭의 정렬 칸만 둔다. */
.app-top.sseujak-no-top-home::before {
  content:""; width:40px; height:1px; flex:0 0 40px; pointer-events:none;
}

/* 앱 일반 화면의 유일한 하단 내비게이션 계약: 홈 / 내서재 / 메모. */
.sseujak-bottom-nav {
  position:fixed!important; z-index:80!important; right:auto!important; bottom:0!important; left:50%!important;
  display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:0!important; align-items:end!important;
  width:min(100%,var(--sseujak-frame-width))!important; max-width:var(--sseujak-frame-width)!important;
  height:var(--sseujak-nav-total-height)!important;
  box-sizing:border-box!important; margin:0!important; padding:0 12px var(--sseujak-safe-bottom)!important; transform:translateX(-50%)!important;
  border:0!important; border-radius:0!important; background:var(--sseujak-surface)!important; box-shadow:none!important;
}
.sseujak-bottom-nav.hidden,
.sseujak-writing-bar.hidden { display:none!important; }
/* 네이티브 광고는 WebView 위에 그려지므로 z-index로 피할 수 없다.
   광고 높이만큼 실제 하단 바를 올려 버튼이 광고 뒤에 숨지 않게 한다. */
body.native-ad-visible .sseujak-bottom-nav { bottom:var(--sseujak-ad-height)!important; }
body.native-ad-visible .sseujak-writing-bar { bottom:var(--sseujak-ad-height)!important; }
/* 광고 SDK의 반복 크기 알림이 와도 하단 고정 UI에는 애니메이션을 적용하지 않는다. */
body.native-ad-visible .sseujak-bottom-nav,
body.native-ad-visible .sseujak-writing-bar { transition:none!important; }
/* 직접 만들기/등장인물 단계도 Figma처럼 공통 내비게이션을 유지한다. */
body.focus-mode #app-nav.sseujak-bottom-nav:not(.hidden) { display:grid!important; }
.sseujak-bottom-nav > button,.sseujak-bottom-nav > button:nth-child(n) {
  position:static!important; display:grid!important; place-items:center!important; width:100%!important;
  height:44px!important; min-height:44px!important;
  margin:0 0 var(--sseujak-nav-icon-bottom)!important;
  padding:10px!important; transform:none!important; border:0!important; border-radius:0!important;
  background:transparent!important; color:var(--sseujak-ink)!important; box-shadow:none!important;
}
.sseujak-bottom-nav > button > img,.sseujak-bottom-nav > button > svg {
  display:block!important; width:24px!important; height:24px!important; margin:0!important; object-fit:contain!important;
  transform:translateX(.5px);
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* Figma 337:171 글쓰기 전용 하단 바: 저장 / 메모 / 목록. */
.sseujak-writing-bar {
  position:absolute!important; z-index:80!important; right:0!important; bottom:0!important; left:0!important;
  display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:0!important; width:100%!important;
  height:calc(var(--sseujak-writing-bar-height) + var(--sseujak-safe-bottom))!important;
  margin:0!important; padding:0 0 var(--sseujak-safe-bottom)!important; transform:none!important;
  border:0!important; border-top:1px solid var(--sseujak-line)!important; border-radius:0!important;
  background:var(--sseujak-surface)!important; box-shadow:none!important;
}
.sseujak-writing-bar > button,.sseujak-writing-bar > button:nth-child(n) {
  position:relative!important; inset:auto!important; display:block!important; width:100%!important;
  height:var(--sseujak-writing-bar-height)!important; min-height:var(--sseujak-writing-bar-height)!important;
  margin:0!important; padding:16px 0 30px!important; border:0!important; border-radius:0!important;
  background:transparent!important; color:var(--sseujak-muted)!important;
  font:500 14px/20px var(--sseujak-font-ui)!important; box-shadow:none!important;
}
.sseujak-writing-bar > button.active { color:var(--sseujak-ink)!important; font-weight:700!important; }
.sseujak-writing-bar > button.active::before {
  content:""; position:absolute; top:var(--sseujak-writing-indicator-top)!important; left:50%; width:45px; height:2px; transform:translateX(-50%);
  border-radius:1px; background:var(--sseujak-accent);
}
.sseujak-writing-surface { padding-bottom:calc(var(--sseujak-writing-bar-height) + var(--sseujak-safe-bottom) + var(--sseujak-ad-height)); }
/* 편집 본문은 하단 바 아래로 들어가지 않는다. 기존 화면별 bottom 계산을 최종적으로 덮는다. */
.sseujak-writing-surface .essay-body-input,
.sseujak-writing-surface .ed-body {
  bottom:calc(var(--sseujak-writing-bar-height) + var(--sseujak-safe-bottom) + var(--sseujak-ad-height))!important;
}
@media (min-width:376px) { .sseujak-frame { width:var(--sseujak-frame-width); } }

/* Keyboard-only sizing; closed-keyboard screens retain their original layout. */
body.writer .sseujak-writing-surface.sseujak-writing-keyboard {
  position:fixed!important; top:var(--writing-viewport-top,0px)!important;
  left:50%!important; transform:translateX(-50%)!important;
  height:var(--writing-viewport-height)!important; min-height:0!important;
  max-height:var(--writing-viewport-height)!important; overflow:hidden!important;
}
body.writer #w-editor.sseujak-writing-keyboard .ed-body,
body.writer #essay-editor.sseujak-writing-keyboard .essay-body-input {
  min-height:0!important; height:auto!important; overflow-y:auto!important;
  padding-bottom:16px!important; box-sizing:border-box;
  bottom:0!important;
}

/* Keep the action bar below the keyboard viewport; restore it on keyboard close. */
body.writer .sseujak-writing-surface.sseujak-writing-keyboard .sseujak-writing-bar {
  top:100%!important; bottom:auto!important; visibility:hidden!important;
}

/* Device presentation frames are not part of the running app UI. */
body .sseujak-frame,
body.writer .wview,
body.studio-app .studio-view,
body.writer .figma-cast-editor-backdrop {
  border-radius:0!important;
  box-shadow:none!important;
}
/* Bottom sheets keep only their two top corners rounded. Cards/dialogs are unchanged. */
body.writer .sheet,
body.writer #world-ai-sheet,
body.writer .plot-ai-sheet,
body.writer .figma-cast-editor-sheet {
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
}

/* Global loading follows the approved generation screen; short waits have no copy. */
.ss-loading{box-sizing:border-box;text-align:center;font-family:var(--sseujak-font-ui);color:#0f0f0f}
.ss-loading-title{font-size:20px!important;line-height:26px!important;font-weight:700!important;white-space:pre-line;margin:0!important;text-align:center!important}
.ss-loading-bar{display:block;appearance:none;width:min(100%,335px);height:8px;border:0;border-radius:4px;overflow:hidden;margin:86px auto 57px;background:#e5eafc;accent-color:#613eea}
.ss-loading-bar::-webkit-progress-bar{background:#e5eafc}
.ss-loading-bar:indeterminate{background:linear-gradient(90deg,#e5eafc 0 30%,#613eea 40% 60%,#e5eafc 70%);background-size:250% 100%;animation:ss-wait 1.6s linear infinite}
.ss-loading-bar:indeterminate::-webkit-progress-bar{background:transparent}
.ss-loading-note{font-size:15px!important;line-height:23px!important;color:#5e5e5d;white-space:pre-line;min-height:46px;margin:0!important;text-align:center}
.ss-loading-short .ss-loading-bar{width:96px;margin:12px auto}
#busy .modal-card,#essay-busy .modal-card{width:min(100%,375px);max-width:375px;min-height:360px;border-radius:0;padding:55px 20px;background:#fff;box-sizing:border-box;box-shadow:none}
#busy:has(.ss-loading-short) .modal-card{width:144px;min-height:0;padding:20px}
#wzp-2 .gen{padding:80px 20px!important;text-align:center}
#wzp-2 .orb{display:none}
#wzp-2 #wz-gen-h{font-size:20px;line-height:26px;text-align:center}
#wzp-2 #wz-tasks{display:block}
html body[data-route-loading]::after{content:""!important;position:fixed;inset:45% auto auto 50%;width:96px;height:8px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(90deg,#e5eafc 0 30%,#613eea 40% 60%,#e5eafc 70%);background-size:250% 100%;animation:ss-wait 1.6s linear infinite;pointer-events:none}
@keyframes ss-wait{from{background-position:100% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.ss-loading-bar:indeterminate,html body[data-route-loading]::after{animation-duration:4s}}

.db-generation-wait{display:none}
.db-generation-overlay.is-generating .db-generation-sheet>:not(.db-generation-wait){display:none!important}
.db-generation-overlay.is-generating .db-generation-wait{display:block;padding:48px 0;min-height:360px}
.db-generation-overlay.is-generating .db-generation-sheet{border-radius:0}
.essay-photo-card.pending .ss-loading-bar{margin:12px auto;width:96px}

#plans-store-status .ss-loading-bar,#account-photo-used .ss-loading-bar,[data-db-status] .ss-loading-bar,button .ss-loading-bar,#memo-status .ss-loading-bar{width:64px;margin:8px auto}

/* User correction: active writing tab overlaps the gray separator. */


/* All genres use the same surface, including the native WebView. */
body.writer.native .app-nav.sseujak-bottom-nav{background:var(--sseujak-surface)!important}
body .essay-toast{z-index:10001!important;width:max-content;max-width:calc(100% - 40px);box-sizing:border-box}

/* Removed controls are kept inert for legacy event binding only. */
#essay-book-menu,#writer-book-settings,#usage-summary{display:none!important}

/* Notices and confirmations must stay above the form they validate. */
body.writer #notice,body.writer #action-confirm,body #essay-notice-modal{z-index:10002!important}

.sseujak-primary-action--after-list{position:relative!important;inset:auto!important;transform:none!important;margin:32px auto 0!important;width:100%!important;height:var(--sseujak-primary-action-height)!important}