/* ══════════════════════════════════════════════════════════════
   3010 작업실 · 3011 알림 보드 — 앱과 같은 결. 색 한 벌이 여기서만 나온다.
     🔁 2026-09-17 **스케치 종이 한 벌**로 고정(어드민과 같은 결 → [[project_admin-paper-theme]]).
       흰 종이 · 회색 연필 · 무채색 · 손글씨 전체. 어두운 판·밝게/어둡게 토글은 걷었다.

   🔑 종이는 **껍데기가 켜질 때만** 입는다 —
       nav.js(3010) · shell.ts(3011) 가 <html data-theme="paper"> 를 박는다.
       뽑기 모드(?card= · ?thumb= · ?cover=)엔 껍데기가 안 켜지므로 아래 :root 옛 값 그대로다.
   ⛔ 밖으로 나가는 그림(카드·표지·썸네일·우표·릴스)과 그 미리보기는 종이를 안 입는다 —
       맨 아래 「결과물 자리」가 옛 색·옛 글꼴로 되돌린다(뽑은 그림과 미리보기가 똑같이 보이게).

   🚨 강조색(--point)은 글씨색과 같은 색이다. 글씨 강조에 쓰지 말 것
      → 크기·굵기·옅기로. 강조색은 면·테·알약 바탕에만.
   🚨 그림자는 아래 네 단만 쓴다. 인라인 그림자 금지.

   싣는 자리 = nav.js 가 문서마다 머리 맨 앞에 끼워 넣는다.
     맨 앞이라 문서가 제 색을 따로 적어 두면 그쪽이 이긴다(옛 문서가 안 깨진다).
   ══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* ── 옛 값(쿨 슬레이트) — 뽑기 모드·결과물 자리가 보는 값. 바꾸면 뽑은 그림이 바뀐다 ── */
  /* ── 면 (앱 표면 5단) ── */
  --bg: #EDEFF3;
  --surface: #EDEFF3;
  --s1: #FFFFFF;          /* 카드·시트 */
  --s2: #DFE3EA;          /* 시트 안 카드·세그먼트 활성 */
  --s-input: #E5E8EE;     /* 입력칸 */

  /* ── 글씨 ── */
  --text: #1B2430;
  --sub: #6E7683;
  --point: #1B2430;
  --on-point: #FFFFFF;
  --error: #E5484D;
  --overlay: rgba(20, 24, 33, 0.42);

  /* ── 선 ── */
  --line: rgba(27, 36, 48, 0.10);
  --line-strong: rgba(27, 36, 48, 0.18);

  /* ── 그림자 4단 (card < sheet < popover < drag) ── */
  --el-card: 0 4px 12px rgba(0, 0, 0, 0.10);
  --el-sheet: 0 -4px 16px rgba(0, 0, 0, 0.12);
  --el-popover: 0 4px 12px rgba(0, 0, 0, 0.20);
  --el-drag: 0 6px 16px rgba(0, 0, 0, 0.20);

  /* ── 기기 틀 (앱 웹 MobileFrame 과 같은 값) ──
     앱은 기기 안팎을 **같은 바탕색**으로 두고, 1px 테와 넓게 퍼지는 그림자로만 가른다. */
  --frame-outer: var(--bg);
  --frame-border: #E5E5E7;
  --frame-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  --frame-w: 430px;

  /* ── 글꼴 ── */
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
          "Noto Sans KR", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* ── 모서리 ── */
  --r-card: 22px;
  --r-box: 16px;
  --r-btn: 12px;
  --r-pill: 999px;

  /* ── 종이 부품 (껍데기 옷만 쓴다 · 결과물은 안 쓴다) ──
     원본 = 어드민 lib/components/paper(tokens · grain · pencil · card). */
  --hand: "Zeoksim Hand", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Apple Color Emoji", sans-serif;
  --grain: url("/paper/grain.png");      /* 종이 결 — 원래 크기 384 로 깐다 */
  --grain-size: 384px;
  --paper-page: #FDFDFD;
  --pencil: rgba(70, 70, 70, 0.38);       /* 카드 둘레 연필 테 */
  --pencil-soft: rgba(80, 80, 80, 0.28);  /* 작은 칸 테 · 절 제목 연필 줄 */
  --pencil-dot: rgba(122, 122, 122, 0.12);/* 줄 사이 연필 점선(어드민 SEP) */
  --paper-lift: 0 2px 0 rgba(0, 0, 0, 0.06); /* 종이 한 겹 두께 */

  /* ── 결과물(카드) 팔레트 ──────────────────────────────────────
     인스타 카드·표지처럼 **밖으로 나가는 그림**은 테마를 따라가면 안 된다.
     그래서 옛 이름들은 **원래 값 그대로** 둔다.
     작업실 옷은 이 이름을 쓰지 않는다 — 위쪽 새 이름(--text·--s1 …)만 쓴다. */
  --paper: #FFFCF3;
  --ink: #3F428C;
  --pen: #E2643B;
  --marker: #FFE9A0;
  --dim: #8C8474;
  --dark: #262233;
  --type: 'Nanum Gothic Coding', monospace;
  --body: 'Gowun Dodum', sans-serif;
  --serif: 'Gowun Batang', serif;
}

/* ── 스케치 종이 한 벌 — 껍데기가 켜졌을 때만 ──────────────────
   값 = 어드민 PAPER.colors 그대로(앱 첫 배경화면). */
:root[data-theme="paper"] {
  --bg: #FDFDFD;
  --surface: #FDFDFD;
  --s1: #FFFFFF;
  --s2: #F3F3F3;
  --s-input: #F3F3F3;

  --text: #262626;
  --sub: #7A7A7A;
  --point: #262626;
  --on-point: #FFFFFF;
  --overlay: rgba(38, 38, 38, 0.32);

  --line: rgba(122, 122, 122, 0.16);
  --line-strong: rgba(80, 80, 80, 0.28);

  --el-card: var(--paper-lift);
  --el-sheet: 0 -2px 0 rgba(0, 0, 0, 0.05);
  --el-popover: 0 2px 0 rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.10);
  --el-drag: 0 2px 0 rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.14);

  --frame-outer: #F6F6F6;
  --frame-border: #E6E6E6;
  --frame-shadow: 0 0 40px rgba(0, 0, 0, 0.06);

  --font: var(--hand);
}

/* 카드 속 헤어라인만 옛 값 그대로 — 밖으로 나가는 그림이라 테마를 안 탄다 */
.card { --line: rgba(42, 38, 32, 0.13); }

/* ── 바탕 ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 사파리에서 입력칸을 누르면 화면이 확대되는 걸 막는다 — 16px 아래로 내리지 않는다 */
input, textarea, select, button { font-family: inherit; font-size: 16px; }

/* ── 종이 부품 ────────────────────────────────────────────────
   껍데기 옷(hub.css · sheet.css · shell.ts)이 같은 모양을 제 부품에 옮겨 쓴다.
   문서가 새 자리를 만들 때 이 이름을 그대로 붙여도 된다.
     .zs-paper      = 종이 카드(흰 종이 + 결 + 연필 테 · 앱 PaperGrain)
     .zs-paper.soft = 작은 칸(옅은 연필 테)
     .zs-solid      = 진한 버튼의 종이 얼굴(흰 종이 + 연필 테 · 앱 SolidFace)
   🚨 연필 테는 문서 안 SVG 필터(#zs-pencil)를 부른다 — 껍데기가 한 벌 심는다. */
.zs-paper, .zs-solid {
  position: relative;
  background-color: var(--s1);
  background-image: var(--grain);
  background-size: var(--grain-size) var(--grain-size);
  box-shadow: var(--paper-lift);
}
.zs-paper::after, .zs-solid::after {
  content: ""; position: absolute; inset: 1px; pointer-events: none;
  border-radius: inherit; border: 1.6px solid var(--pencil);
  filter: url(#zs-pencil);
}
.zs-paper.soft { box-shadow: none; }
.zs-paper.soft::after { border-width: 1.2px; border-color: var(--pencil-soft); }
.zs-solid { color: var(--text); }
.zs-solid::after { border-width: 1.8px; }

/* ── 손글씨 — 문서 전체에 한 번(앱 결 · 예외 없음) ──────────────
   칸마다 제 글꼴을 달고 나오는 옛 문서가 있어 !important 로 덮는다.
   빠지는 자리 = 기술 글(고정폭 코드) · 결과물 자리(아래 목록) 와 그 안쪽 전부. */
:root[data-theme="paper"] body {
  background-color: var(--paper-page);
  background-image: var(--grain);
  background-size: var(--grain-size) var(--grain-size);
}
:root[data-theme="paper"] body
  :not(:is(pre, code, kbd, samp,
           .card, .frame, .tframe, .rframe, .thumb, .stamp, .reel, .thm, .thm-slot,
           .t-card, .lc, .ogcut, .pola, .hole, .lk-stage, .pl-stage, .mat-frame, .dk-slide, .zs-out))
  :not(:is(pre, code, kbd, samp,
           .card, .frame, .tframe, .rframe, .thumb, .stamp, .reel, .thm, .thm-slot,
           .t-card, .lc, .ogcut, .pola, .hole, .lk-stage, .pl-stage, .mat-frame, .dk-slide, .zs-out) *) {
  font-family: var(--hand) !important;
}

/* ── 결과물 자리 — 종이를 벗기고 옛 값으로 ─────────────────────
   카드·표지·썸네일·우표·릴스 틀 · 링크 표지 구멍(.hole) · 팟캐스트 영상 무대·장표
   (과 껍데기가 통째로 결과물이라 짚어 준 .zs-out). 새 결과물 틀이 생기면 두 목록에 같이 더한다.
   :where 로 감싸 무게가 0 — 문서가 카드에 따로 적은 색(--point 노랑 같은)이 늘 이긴다. */
:where(:root[data-theme="paper"])
  :where(.card, .frame, .tframe, .rframe, .thumb, .stamp, .reel, .thm, .thm-slot,
         .t-card, .lc, .ogcut, .pola, .hole, .lk-stage, .pl-stage, .mat-frame, .dk-slide, .zs-out) {
  --bg: #EDEFF3;
  --surface: #EDEFF3;
  --s1: #FFFFFF;
  --s2: #DFE3EA;
  --s-input: #E5E8EE;
  --text: #1B2430;
  --sub: #6E7683;
  --point: #1B2430;
  --on-point: #FFFFFF;
  --overlay: rgba(20, 24, 33, 0.42);
  --line: rgba(27, 36, 48, 0.10);
  --line-strong: rgba(27, 36, 48, 0.18);
  --el-card: 0 4px 12px rgba(0, 0, 0, 0.10);
  --el-sheet: 0 -4px 16px rgba(0, 0, 0, 0.12);
  --el-popover: 0 4px 12px rgba(0, 0, 0, 0.20);
  --el-drag: 0 6px 16px rgba(0, 0, 0, 0.20);
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
          "Noto Sans KR", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  font-family: var(--font);
}