· 패딩 4종 · 색 2종 · 전부 가운데 정렬).
* 정본은 트렌드 라운드가 세운 아이콘+제목+힌트 카드다(stages/trendStateMsg.js → ui/stateMessage.js 로 승격).
*
* 🔴 **두 단으로 나눈다 — 하나로 합치면 한쪽이 반드시 어색해진다.**
* ⓐ 블록 빈 상태: 페이지·섹션이 통째로 비었을 때. 표면 카드 + 좌측 정렬(읽는 글이므로).
* ⓑ 인라인 빈 상태: 패널·목록 **안**이 비었을 때(⌘K 결과·휴지통 목록). 카드를 또 깔면 카드 안 카드가 된다 → 문구만.
* 어느 쪽인지는 '이 요소를 감싸는 표면이 이미 있는가' 로 가른다. */
/* ⓐ 블록 */
body.shell-v2 :is(.view-todo, .stage-todo, .tt-empty, .pl-empty, .admin-empty) {
display: flex; align-items: flex-start; gap: 12px; margin: 0; text-align: left;
padding: 16px 18px; background: var(--surface-1); border: 0; border-radius: var(--r-lg);
color: var(--ink-80); font-size: var(--fs-caption); line-height: 1.5;
}
body.shell-v2 .state-empty-ico { flex: none; margin-top: 2px; color: var(--ink-48); }
body.shell-v2 .state-empty-body { min-width: 0; }
body.shell-v2 .state-empty-title { font-size: var(--fs-caption); font-weight: 500; line-height: 1.5; color: var(--ink); }
body.shell-v2 .state-empty-hint { margin-top: 2px; font-size: var(--fs-fine); line-height: 1.5; color: var(--ink-48); }
body.shell-v2 .btn.state-empty-act { margin-top: 10px; background: var(--surface-2); color: var(--ink); border-color: transparent; }
body.shell-v2 .btn.state-empty-act:hover { background: var(--surface-3); }
/* ⓑ 인라인 — 이미 표면 위에 있으므로 문구만. 가운데 정렬은 한 줄짜리라 유지한다.
* ⚠️ `.frame-empty` 가 여기 있는 것은 의도다. 이름은 블록처럼 들리지만 실제 사용처 9곳 중 셋이
* **드로어·모달 안**이다(`storyboardRegenDrawer`·`conceptDrawer`·`galleryDetail`) — 거기에 카드를 깔면
* 카드 안 카드가 된다. 나머지도 전부 패널·슬롯 안이라 감싸는 표면이 이미 있다. */
body.shell-v2 :is(.pt-empty, .gs-empty, .frame-empty) {
padding: var(--sp-lg); text-align: center; color: var(--ink-48); font-size: var(--fs-caption); line-height: 1.5;
}
/* 블록 단인데 모서리만 어긋나 있던 둘 — 카드는 --r-lg 다(위 ⓐ 와 같은 눈금).
* `.hub-state` 는 문구와 [다시 시도] 를 양끝에 두므로 레이아웃(space-between)은 건드리지 않고 모서리만 맞춘다. */
body.shell-v2 :is(.hub-state, .feed-page-empty) { border-radius: var(--r-lg); }
/* 오류 — 점 + 문구 + [다시 시도]. 빈 상태와 같은 표면·모서리를 쓰고 경고는 앞의 점 하나로만 말한다
* (DESIGN: 색은 신호이지 표면이 아니다). 모양을 v2/trends.css 가 아니라 여기서 소유한다 — 제품 전역이므로. */
body.shell-v2 .state-error {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 10px; margin: 0;
padding: 16px 18px; background: var(--surface-1); border: 0; border-radius: var(--r-lg);
color: var(--ink-80); font-size: var(--fs-caption); font-weight: 500; line-height: 1.5;
}
body.shell-v2 .state-error::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
body.shell-v2 .state-error-text { flex: 1 1 220px; min-width: 0; line-height: 1.5; }
body.shell-v2 .btn.state-error-retry { flex: none; background: var(--surface-2); color: var(--ink); border-color: transparent; }
body.shell-v2 .btn.state-error-retry:hover { background: var(--surface-3); }
@media (max-width: 810px) {
body.shell-v2 .btn.state-error-retry { min-height: 44px; width: 100%; justify-content: center; }
}
/* ── ② 로그인 게이트 — 사인인 전이라 body 에 shell-v2 가 없다. 게이트 루트(.signin-gate)로 스코프하고 v1 토큰 이름만 쓴다(구조·동작 무변) ── */
.signin-gate { padding: var(--sp-xl, 30px) var(--sp-lg, 20px); }
.signin-gate .signin-card {
max-width: 400px; gap: 0; padding: 44px 32px 32px; text-align: center;
background: var(--surface-1); border: 0; border-radius: 20px;
box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.10), 0 10px 30px rgba(0, 0, 0, 0.25);
}
.signin-gate .signin-mark { margin: 0 0 14px; font-size: 32px; line-height: 1.13; font-weight: 600; letter-spacing: -1px; color: var(--ink); }
.signin-gate .signin-tagline { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -0.18px; color: var(--ink); }
.signin-gate .signin-hint { margin: 8px 0 0; font-size: 14px; line-height: 1.4; letter-spacing: -0.14px; color: var(--ink-48); }
.signin-gate .signin-tagline, .signin-gate .signin-hint { word-break: keep-all; } /* 한국어 어절 안에서 줄이 끊기지 않게 */
.signin-gate .signin-actions { margin-top: 32px; gap: 0; }
.signin-gate #gateGoogle {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px;
background: var(--ink); border: 0; color: var(--canvas); border-radius: var(--r-pill);
font-size: 15px; font-weight: 500; letter-spacing: -0.15px; box-shadow: none;
transition: opacity var(--t-fast, 120ms) ease, transform var(--t-fast, 120ms) ease;
}
.signin-gate #gateGoogle:hover { background: var(--ink); opacity: 0.9; }
.signin-gate #gateGoogle:active { transform: scale(0.98); }
.signin-gate #gateGoogle:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; }
.signin-gate #gateGoogle .signin-google-mark { order: -1; flex: 0 0 18px; }
@media (max-width: 480px) { .signin-gate .signin-card { padding: 36px 24px 24px; } }
@media (prefers-reduced-motion: reduce) { .signin-gate, .signin-gate * { animation: none !important; transition: none !important; } }
/* 게이트 위 토스트는 v2/toast.css 가 새 셸과 같은 모양으로 그린다(2026-09-16). */
/* ── ②-1 로그인 화면 — Framer 로그인 레이아웃(오너 지시 2026-09-16 · 레퍼런스 framer.com/login) ──
* 위에서부터 심볼 → Welcome to AIDRA → The AI Drama agent → 흰 알약 Google 버튼. 카드 표면을 걷고 캔버스 위 평면으로 둔다.
* ⚠️ guestGate.js(승인 대기 게이트)가 같은 .signin-* 클래스를 공유한다 — 반드시 --login 수식자 아래에만 쓴다(저쪽 화면 무변).
* ⚠️ 위 ② 블록과 특이도가 같으므로(0,2,0) 순서로만 이긴다 — 이 블록을 그 앞으로 옮기지 말 것. */
.signin-gate--login .signin-card {
max-width: 320px; gap: 0; padding: 0; text-align: center;
background: transparent; border: 0; box-shadow: none;
}
.signin-gate--login .signin-symbol { display: block; width: 40px; height: 40px; margin: 0 auto 20px; }
/* 제목·부제목은 같은 크기·굵기로 두 줄을 이루고 색으로만 갈라진다(레퍼런스 그대로).
h1 은 glass.css 가 헤더 글꼴(SUIT)을 주지만 p 는 명시해야 따라온다. */
.signin-gate--login .signin-title,
.signin-gate--login .signin-subtitle {
margin: 0; font-family: var(--font-heading);
font-size: 26px; line-height: 1.24; font-weight: 700; letter-spacing: -0.6px;
}
.signin-gate--login .signin-title { color: var(--ink); }
/* 부제목 회색은 Framer 값(#999)을 직접 쓴다 — 이 화면은 body.shell-v2 밖이라 framer.css 토큰층이 닿지 않고,
v1 의 --ink-48(#6a6a7a)은 레퍼런스보다 어둡고 보라기가 돈다. */
.signin-gate--login .signin-subtitle { color: #999999; }
.signin-gate--login .signin-actions { margin-top: 28px; }
.signin-gate--login #gateGoogle { width: 100%; min-height: 44px; font-size: 14px; }
@media (max-width: 480px) { .signin-gate--login .signin-card { padding: 0; } }
/* 공개 페이지 링크(요금·약관·개인정보·환불) — 로그인 카드 맨 아래, 작고 눈에 안 띄게(spec_billing §5 item7·C-7).
* 구분점은 문자열이 아니라 CSS(`::after`)로 — DOM 은
만 갖는다(authGate.test.ts 의 C-7 최소 스텁과의 계약). */
.signin-legal-links { display: block; margin-top: 20px; font-size: 12px; line-height: 1.6; }
/* 로그인 화면 언어 전환(spec_i18n W5) — 공개 링크 아래 작은 칸. 스위치 i18n 이 켜졌을 때만 DOM 에 생긴다. */
.signin-locale { margin-top: 12px; }
.signin-locale-select { font: inherit; font-size: 12px; color: #999999; background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 4px 8px; }
.signin-locale-select:hover, .signin-locale-select:focus-visible { color: var(--ink); }
.signin-legal-links a { color: #999999; text-decoration: none; }
.signin-legal-links a:hover, .signin-legal-links a:focus-visible { color: var(--ink); text-decoration: underline; }
.signin-legal-links a:not(:last-child)::after { content: ' · '; color: #999999; }
/* ── 공통 배경 모션(오너 지시 2026-09-15 — "원래 우리 웹에 있는 배경 모션을 모든 페이지에") ──
* v1·로그인 게이트의 우주 빔(#cosmosBeams · cosmosBeams.js · cosmos.css)을 새 셸에서도 켠다(shell2.css 가 숨기고 있었다).
* 바탕을 칠하던 불투명 --canvas 를 걷어 모션이 비치게 하고, 크롬(사이드바·상단바·패널·드로어)은 반투명 + 블러로 글자 대비를 지킨다.
* 카드(surface-1/2)는 그대로 불투명 — 읽기 영역의 대비는 바뀌지 않는다. 탭 숨김·reduced-motion 처리는 cosmosBeams.js 가 이미 한다. */
body.shell-v2 #cosmosBeams { display: block; }
body.shell-v2 { background: transparent; --chrome-veil: rgba(9, 9, 9, 0.62); }
body.shell-v2 .shell-sidebar, body.shell-v2 .rail-mini,
body.shell-v2 .pshell-top, body.shell-v2 .pshell-left, body.shell-v2 .pshell-right {
background: var(--chrome-veil); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
/* 회차 읽기 패널은 콘텐츠층이다 — 글라스를 걸지 않는다(오너 결정 2026-09-18 · "Don't use Liquid Glass in the content layer").
* 전에는 rgba(9,9,9,.82) + blur(18px) 였다: 긴 시나리오 글 뒤로 우주 빔이 비쳤고, 하드코딩 블러라 liquidGlassLayer 가드도 못 봤다.
* --epr-panel: 패널 색을 자손에게 **값으로** 물려준다 — 이 안쪽(`.ep-drawer *`)에서는 liquid-glass-overlays 가 --surface-1 을 반투명 흰색으로
* 재매핑하므로, 보완 발(.ep-drawer-foot)이 var(--surface-1) 을 직접 읽으면 패널과 다른 색이 된다. */
body.shell-v2 #episodesView .ep-drawer { --epr-panel: var(--surface-1); background: var(--epr-panel); -webkit-backdrop-filter: none; backdrop-filter: none; }