/* ===== 기본 =====
   ※ 색상 토큰은 css/colors.css 한 곳에 모여 있습니다. (--bg, --text, --shadow 등)
      여기엔 레이아웃 관련 변수만 둡니다. */
:root {
  --radius: 6px;
  --book-w: 200px;
  --book-h: 280px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', 'Apple SD Gothic Neo',
               'Segoe UI', 'Noto Sans KR', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button { font-family: inherit; }

/* ===== 헤더 ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 40px 16px;
}
.app-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.app-subtitle {
  font-size: 13px;
  color: var(--text-soft);
}

/* 헤더 우측 버튼들 (검색 / 계정) */
.app-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 로그인 상태일 때 계정 버튼 — 이니셜 동그라미 강조 */
.account-btn[hidden] { display: none; }
.account-btn.signed-in {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 16px;
  border-color: var(--ink);
}

/* ===== 로그인 모달 ===== */
.auth-desc {
  margin: 4px 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
}
.auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.auth-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: background 0.12s, box-shadow 0.12s;
}
.auth-social-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13px;
}
.auth-social--google {
  background: var(--white);
  color: #3c4043;
}
.auth-social--google .auth-social-logo {
  background: conic-gradient(from -45deg,
    #ea4335 0deg 90deg, #fbbc05 90deg 180deg, #34a853 180deg 270deg, #4285f4 270deg 360deg);
  color: var(--white);
}
.auth-social--google:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.10); }
.auth-social--apple {
  background: #000;
  color: var(--white);
  border-color: #000;
}
.auth-social--apple .auth-social-logo::before { content: ""; }
.auth-social--apple:hover { background: #1a1a1a; }

.auth-close { width: 100%; margin-top: 4px; }
.auth-user-email {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  margin-bottom: 16px;
}

/* ===== 클라우드 백업 ===== */
.cloud-backup {
  margin: 4px 0 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.cloud-backup-btn { width: 100%; }
.cloud-backup-btn:disabled { opacity: 0.55; cursor: default; }
/* 받아오기 버튼 — 백업 영역과 간격으로 구분 */
.cloud-restore-btn { width: 100%; margin-top: 20px; }
.cloud-restore-btn:disabled { opacity: 0.55; cursor: default; }
.cloud-backup-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-soft);
}
.cloud-backup-status {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  background: var(--seg-bg);
  color: var(--text);
}
.cloud-backup-status[hidden] { display: none; }
.cloud-backup-status.ok  { background: rgba(33, 163, 90, 0.14);  color: #1c6e3f; }
.cloud-backup-status.err { background: rgba(192, 57, 43, 0.12);  color: var(--danger); }

/* ===== 책장 ===== */
.shelf-wrap {
  position: relative;
  padding: 40px 0 80px;
}

/* 선반 바닥 — 책 아래 우드톤 선 */
.shelf-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 70px;
  height: 14px;
  background: linear-gradient(180deg, var(--bg-shelf), var(--bg-shelf-2));
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.shelf {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding: 40px 40px 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  min-height: calc(var(--book-h) + 80px);
}
.shelf::-webkit-scrollbar { height: 8px; }
.shelf::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }

/* ===== 책 ===== */
.book {
  position: relative;
  flex: 0 0 var(--book-w);
  width: var(--book-w);
  height: var(--book-h);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--shadow);            /* drop-shadow 필터 → box-shadow (합성 비용↓, 스크롤 부드럽게) */
}
.book:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); }
.book:active { transform: translateY(-2px); }
.book:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; }

.book-cover {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--cover, var(--cover-dusty-pink));
  border-radius: 2px var(--radius) var(--radius) 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 22px;
  overflow: hidden;
  /* 표지 내부 명암 — 입체감 */
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.06),
    inset 0 -40px 60px rgba(0,0,0,0.05);
}

/* 책등 (좌측 음영) */
.book-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.18),
    rgba(0,0,0,0.05) 60%,
    rgba(255,255,255,0.15));
  border-radius: 2px 0 0 2px;
  z-index: 2;
}

/* 표지 종이/리넨 텍스처 — SVG 노이즈 */
.book-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.15  0 0 0 0 0.1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.book-title {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--book-title-text);
  letter-spacing: 0.01em;
  word-break: keep-all;
  max-height: 60%;
  overflow: hidden;
}

.book-pages {
  position: absolute;
  bottom: 18px;
  left: 0; right: 0;
  z-index: 1;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(58, 50, 42, 0.55);
  text-transform: uppercase;
}

/* ===== + 새 책 버튼 ===== */
.book--add {
  background: transparent;
  border: 2px dashed rgba(60, 50, 40, 0.25);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(60, 50, 40, 0.55);
  filter: none;
}
.book--add:hover {
  border-color: rgba(60, 50, 40, 0.5);
  color: rgba(60, 50, 40, 0.85);
  background: rgba(255,255,255,0.25);
  filter: none;
}
.add-plus { font-size: 56px; font-weight: 300; line-height: 1; margin-bottom: 8px; }
.add-label { font-size: 13px; letter-spacing: 0.08em; }

/* ===== 빈 안내 ===== */
.empty-hint {
  align-self: center;
  color: var(--text-soft);
  font-size: 14px;
  padding: 0 12px;
}

/* ===== 모달 ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 20, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1500;            /* 카드 스택(최대 ~1000)보다 확실히 위 */
  backdrop-filter: blur(4px);
  /* iPad safe-area + 작은 여백 — 모달이 노치/홈인디케이터에 잘려 한쪽으로 밀리지 않게 */
  padding:
    calc(env(safe-area-inset-top, 0px)    + 16px)
    calc(env(safe-area-inset-right, 0px)  + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 16px)
    calc(env(safe-area-inset-left, 0px)   + 16px);
  box-sizing: border-box;
}
.modal.open { display: flex; }
.modal-card {
  width: min(420px, 100%);
  max-width: 100%;
  margin: auto;             /* flex 가 안 먹는 케이스 대비 — 안전망 센터 */
  max-height: 100%;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 14px;
  padding: 28px 28px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  box-sizing: border-box;
}
.modal-title {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
}
.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin: 14px 0 8px;
  text-transform: uppercase;
}
.text-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--white);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.text-input:focus { border-color: var(--field-border-focus); }

/* 일기 날짜 입력 — 가로 가운데 정렬 (내용·박스 둘 다)
   iOS 의 date input 기본은 좌정렬이라 "흰색 - 날짜 - 흰색" 여백이 비대칭. */
#spread-date-input {
  display: block;
  text-align: center;
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.text-input.error { border-color: var(--danger); animation: shake 0.4s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.color-picker {
  display: flex;
  gap: 12px;
}
/* 내지(배경) 종류 선택 칩 */
.paper-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.paper-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.paper-chip.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.swatch:hover { transform: scale(1.06); }
.swatch.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.modal-actions .btn {
  flex: 1;
  white-space: nowrap;
}

.btn {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: rgba(0,0,0,0.05); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-hover); }

/* ===== 뷰 토글 ===== */
.view { display: none; }
.view.active { display: block; }
#book-view.view.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
#page-view.view.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
#community-view.view.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: relative;   /* 아카이브 오버레이(.community-archive)의 기준 */
}

/* ===== 페이지 보기 (펼침 썸네일 격자) ===== */
.pageview-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2px 22px 12px;
}
.pageview-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-soft, #6b6157);
  letter-spacing: 0.02em;
}
.pageview-bar-right {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pageview-sort {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.pageview-select-info { font-size: 13px; color: var(--text-soft, #6b6157); }
.pageview-select-del,
.pageview-select-cancel {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}
.pageview-select-del    { background: var(--danger, #c0392b); color: #fff; }
.pageview-select-del:disabled,
.pageview-select-move:disabled { opacity: 0.45; cursor: default; }
.pageview-select-move   { background: var(--ink); color: var(--paper); }
.pageview-select-cancel { background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.10); color: var(--text); }

/* ===== 펼침 이동 모달 ===== */
.move-book-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  margin: 6px 0 4px;
}
.move-book-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.move-book-item:hover { background: rgba(0,0,0,0.06); }
.move-book-emoji { font-size: 20px; flex-shrink: 0; }
.move-book-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-empty { text-align: center; color: var(--text-soft, #6b6157); }

/* 이동 완료 토스트 */
.move-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  transform: translateX(-50%) translateY(12px);
  background: rgba(40,32,24,0.92);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.move-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 정렬 드롭다운 */
.pv-sort-menu {
  position: fixed;
  z-index: 80;
  background: var(--surface-floating, #fff);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(40,30,20,0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 140px;
}
.pv-sort-menu[hidden] { display: none; }
.pv-sort-item {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.pv-sort-item:hover { background: rgba(0,0,0,0.05); }
.pv-sort-item.active { background: var(--ink); color: var(--paper); }

/* 격자 */
.pageview-grid {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;       /* 각 행을 콘텐츠 높이에 맞춤 (겹침 방지) */
  gap: 22px;
  padding: 8px 28px calc(env(safe-area-inset-bottom, 0px) + 40px);
  align-content: start;
  align-items: start;                /* 아이템이 행 높이로 늘어나지 않게 */
  touch-action: pan-y;
}

.pv-card {
  position: relative;
  background: var(--page-bg, #f5f5f7);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(40,30,20,0.14);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  align-self: start;                 /* 그리드 stretch 방지 (콘텐츠 높이대로) */
  touch-action: none;                /* 제스처를 JS가 완전 제어 (길게눌러 드래그 / 스와이프 스크롤) */
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* 썸네일 자체가 카드 높이를 정함 (296:210) → 행이 제대로 잡혀 카드끼리 안 겹침 */
.pv-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 296 / 210;
  background: #fff center/cover no-repeat;
}
.pv-thumb--empty { background: #fff; }
.pv-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.78);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pv-num  { font-size: 13px; font-weight: 700; color: var(--text); }
.pv-date { font-size: 11px; color: var(--text-soft, #6b6157); font-variant-numeric: tabular-nums; }

/* 선택 모드 */
.pv-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.05);
  display: none;
}
.pageview-grid.is-selecting .pv-check { display: block; }
.pv-card.selected { box-shadow: 0 0 0 3px var(--ink), 0 6px 18px rgba(40,30,20,0.18); }
.pv-card.selected .pv-check {
  background: var(--ink);
  border-color: #fff;
}
.pv-card.selected .pv-check::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* + 새 펼침 */
.pv-add {
  aspect-ratio: 296 / 210;           /* 썸네일 카드와 같은 높이 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 2px dashed rgba(0,0,0,0.18);
  box-shadow: none;
  color: var(--text-soft, #6b6157);
  font-family: inherit;
}
.pv-add-plus { font-size: 30px; line-height: 1; }
.pv-add small { font-size: 12px; }

/* 드래그 */
.pv-placeholder { opacity: 0.28; box-shadow: none; }
.pv-placeholder .pv-badge, .pv-placeholder .pv-check { visibility: hidden; }
.pv-drag-clone {
  position: fixed;
  z-index: 90;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 18px 40px rgba(40,30,20,0.32);
  transform: scale(1.06);
  cursor: grabbing;
}

/* ===== 책 보기 — 상단바 ===== */
.bookview-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 22px;
  gap: 16px;
  background: linear-gradient(to bottom, rgba(236,230,221,0.95), rgba(236,230,221,0));
  position: relative;
  z-index: 5;
}
.back-btn {
  justify-self: start;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s;
}
.back-btn:hover { background: rgba(255,255,255,1); }
.bookview-title {
  justify-self: center;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  max-width: 50vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spread-indicator {
  justify-self: end;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

/* ===== 책 펼침 무대 =====
   book-stage는 화면에서 남는 공간을 전부 차지하고(flex:1),
   book-container(펼친 책)는 bookview.js의 fitBook()이 이 무대 안에
   296:210 비율을 유지한 '최대 크기'를 px로 직접 지정한다.
   → 어떤 아이패드/태블릿에서도 종이가 잘리지 않고 항상 100% 보인다. */
.book-stage {
  flex: 1;
  min-height: 0;            /* flex 자식이 뷰포트를 넘쳐 잘리는 것 방지 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.06), transparent 60%),
    linear-gradient(to bottom, var(--bg), var(--bg-grad-bottom));
  overflow: hidden;
}
/* 달력 책 — 종이를 더 크게. 무대 padding 을 줄여서 fitBook() 이 잡는
   가용 폭/높이를 늘려준다. 양옆엔 cal-month-btn 이 들어갈 자리만 남김. */
.book-stage.is-calendar {
  padding: 6px 76px;
}
@media (max-width: 640px) {
  .book-stage.is-calendar { padding: 4px 60px; }
}

.book-container {
  position: relative;
  display: flex;
  /* width / height 는 bookview.js의 fitBook()이 화면에 맞춰 px로 지정.
     어떤 크기든 296:210 비율이 유지되므로 종이는 절대 안 잘린다. */
  background: var(--ink);     /* 살짝 비치는 책등/바인딩 톤 */
  border-radius: 4px 8px 8px 4px;
  box-shadow:
    0 30px 60px rgba(60, 40, 20, 0.35),
    0 4px 10px rgba(0,0,0,0.15);
  /* 3D 플립용 원근감 — 직계 자식 .flipper 의 rotateY 에 적용된다.
     ★ preserve-3d 는 컨테이너에 주지 않는다: 그러면 정적 페이지까지
        같은 3D 평면에 끌려들어가 회전 중 떨림·비침이 생긴다.
        원근(perspective)만 주고, 입체 합성은 .flipper 가 자체적으로 한다. */
  perspective: 2200px;
  perspective-origin: center center;
}

/* ===== 페이지 (정적) ===== */
.page {
  position: relative;
  flex: 1;
  height: 100%;
  background: var(--page-bg, var(--page-bg));
  overflow: hidden;
}
.page-left {
  border-radius: 4px 0 0 4px;
  box-shadow: inset -10px 0 22px -8px rgba(0,0,0,0.12);
}
.page-right {
  border-radius: 0 4px 4px 0;
  box-shadow: inset 10px 0 22px -8px rgba(0,0,0,0.12);
}

/* 중앙 책등 라인 */
.spine-shadow {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to right,
    rgba(0,0,0,0.18),
    rgba(0,0,0,0.05));
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
}

/* 페이지 내용 — data-page-id가 있는 경우 (실제 저장된 페이지) 탭하면 편집 진입 */
.page-content {
  position: relative;
  height: 100%;
}
.page-content[data-page-id] { cursor: pointer; }

/* 쓰기 화면 상단 — 편집 중 표시 */
.edit-indicator {
  color: var(--photo-accent);
  font-weight: 600;
}
.page-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;  /* 책 보기에서는 읽기 전용 */
}
.page-number {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  z-index: 2;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(0,0,0,0.32);
  font-variant-numeric: tabular-nums;
}
.page-blank {
  height: 100%;
  background: var(--page-bg, var(--page-bg));
}
.page-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: rgba(0,0,0,0.4);
  font-size: 15px;
  line-height: 1.7;
  padding: 40px;
}
.page-empty small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0,0,0,0.28);
}

/* ===== 좌/우 네비 버튼 ===== */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 22px;
  cursor: pointer;
  color: var(--text);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  transition: background 0.15s, transform 0.1s;
}
.nav-btn:hover { background: var(--white); }
.nav-btn:active { transform: translateY(-50%) scale(0.95); }
.nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
  box-shadow: none;
}
.nav-first { left: 14px; }
.nav-last  { right: 14px; }

/* ===== 달력 책 전용 월 이동 버튼 — nav-btn 과 시각적으로 명확히 구분 =====
   더 크고(56), 둥근 사각, 따뜻한 베이지 톤. "이건 책 페이지가 아니라 달력용"이라는
   느낌을 위해 모양과 색을 다르게. 평소엔 JS 가 display:none 으로 숨김. */
.cal-month-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(244, 234, 218, 0.92);   /* 따뜻한 베이지 (책장 톤과 어울림) */
  border: 1px solid rgba(120, 96, 64, 0.20);
  border-radius: 16px;                     /* 둥근 사각 — 원형 nav-btn 과 구분 */
  width: 56px;
  height: 56px;
  font-size: 30px;                         /* 글리프 크게 */
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  color: var(--cal-btn-text);                          /* 진한 베이지/브라운 */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(80, 50, 20, 0.18),
              0 2px 4px rgba(0,0,0,0.06);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  /* iOS Safari 탭 하이라이트 제거 */
  -webkit-tap-highlight-color: transparent;
}
.cal-month-btn:hover {
  background: var(--cal-btn-bg-hover);
  box-shadow: 0 10px 22px rgba(80, 50, 20, 0.24);
}
.cal-month-btn:active {
  transform: translateY(-50%) scale(0.94);
}
.cal-month-prev { left: 10px; }
.cal-month-next { right: 10px; }
@media (max-width: 640px) {
  .cal-month-btn { width: 48px; height: 48px; font-size: 26px; border-radius: 14px; }
  .cal-month-prev { left: 6px; }
  .cal-month-next { right: 6px; }
}

/* ===== 페이지 추가 FAB ===== */
.add-page-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  z-index: 60;
  transition: background 0.15s, transform 0.05s;
}
.add-page-btn:hover { background: var(--ink-hover); }
.add-page-btn:active { transform: translateY(1px); }

/* 달력 빈 날짜 → 그 셀 근처에 뜨는 "이 날짜에 페이지 추가" 알약 */
.cal-date-add {
  position: fixed;
  z-index: 90;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(40,30,20,0.30);
  animation: cal-add-pop 0.16s ease;
}
.cal-date-add[hidden] { display: none; }
.cal-date-add:active { transform: scale(0.97); }
@keyframes cal-add-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== 페이지 플립 애니메이션 ===== */
.flipper {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  transform-style: preserve-3d;          /* 앞/뒷면을 3D로 묶는다 */
  transition: transform 0.55s ease-in-out;
  z-index: 20;                           /* 정적 페이지(z auto)보다 항상 위 */
  will-change: transform;                /* 기기 가속 (아이패드 60fps) */
}
.flipper--forward {
  right: 0;
  transform-origin: left center;
  transform: rotateY(0);
}
.flipper--forward.flipping {
  transform: rotateY(-180deg);
}
.flipper--backward {
  left: 0;
  transform-origin: right center;
  transform: rotateY(0);
}
.flipper--backward.flipping {
  transform: rotateY(180deg);
}

.flipper-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--page-bg, var(--page-bg));
  overflow: hidden;
}
/* 앞면·뒷면을 로컬 Z축으로 1px씩 분리해 '완전 동일 평면(coplanar)' 상태를 깬다.
   두 면이 같은 깊이면 캔버스 합성 레이어에서 backface 컬링이 새며 z-fighting 이 생기고,
   그 승패가 회전 부호(forward −180 / backward +180)에 따라 갈려 한 방향(좌→우)에서만
   뒷면 그림이 앞면 위로 비쳐 보였다('뒷그림 겹침'). Z를 분리하면 회전 내내 보여야 할 면이
   항상 앞서므로 backface 컬링 여부와 무관하게 겹침이 사라진다.
   1px 은 perspective(2200px)에서 시각적으로 감지되지 않는다. */
.flipper-front {
  transform: translateZ(1px);
}
.flipper-back {
  transform: rotateY(180deg) translateZ(1px);
}
.flipper--forward .flipper-front {
  border-radius: 0 4px 4px 0;
  box-shadow: inset 10px 0 22px -8px rgba(0,0,0,0.12);
}
.flipper--forward .flipper-back {
  border-radius: 4px 0 0 4px;
  box-shadow: inset -10px 0 22px -8px rgba(0,0,0,0.12);
}
.flipper--backward .flipper-front {
  border-radius: 4px 0 0 4px;
  box-shadow: inset -10px 0 22px -8px rgba(0,0,0,0.12);
}
.flipper--backward .flipper-back {
  border-radius: 0 4px 4px 0;
  box-shadow: inset 10px 0 22px -8px rgba(0,0,0,0.12);
}

/* 플립 중 종이 음영 — 각 면 위에 ::after로 얹는다.
   회전 중앙(50%)에서 가장 어둡고 양 끝(0%, 100%)에서 0이 되어,
   "어두워졌다가 다시 자연스럽게 밝아지는" 종이 빛 변화를 만든다.
   각 면은 backface-visibility로 절반 구간만 보이므로,
   보이는 구간에서만 0 → 1 또는 1 → 0으로 부드럽게 흐른다. */
.flipper-face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
/* 어두운 쪽은 항상 책등(spine) 쪽을 향한다 */
.flipper--forward  .flipper-front::after,
.flipper--backward .flipper-back::after {
  background: linear-gradient(to right, rgba(0,0,0,0.17), rgba(0,0,0,0));
}
.flipper--forward  .flipper-back::after,
.flipper--backward .flipper-front::after {
  background: linear-gradient(to left,  rgba(0,0,0,0.17), rgba(0,0,0,0));
}

@keyframes flipShadeFront {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 1; }   /* 50% 이후엔 backface로 가려져 보이지 않음 */
}
@keyframes flipShadeBack {
  0%   { opacity: 1; }   /* 50% 이전엔 backface로 가려져 보이지 않음 */
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
.flipper.flipping .flipper-front::after {
  animation: flipShadeFront 0.55s ease-in-out;
}
.flipper.flipping .flipper-back::after {
  animation: flipShadeBack  0.55s ease-in-out;
}

/* 맨 앞/뒤 버튼 — 페이지를 빠르게 한 장씩 휘리릭 넘기는 모드.
   한 장당 시간은 JS가 --flip-dur 변수로 주입 (전체 이동을 ~2.5초에 맞추기 위함).
   변수가 없으면 0.16s로 폴백. 트랜지션과 음영 애니메이션을 같은 값으로 맞춰 박자 일치. */
.flipper--fast {
  transition-duration: var(--flip-dur, 0.16s);
  transition-timing-function: linear;
}
.flipper--fast.flipping .flipper-front::after,
.flipper--fast.flipping .flipper-back::after {
  animation-duration: var(--flip-dur, 0.16s);
  animation-timing-function: linear;
}

/* ===== 펼침 삭제 — 종이 결 찢기 애니메이션 =====
   디자인 핵심:
     1) clip-path는 JS가 매번 다중 옥타브 노이즈로 생성 — 정직한 지그재그가 아니라
        매번 다른 유기적 종이 결 단면. 좌/우 페이지가 정확히 보완돼 갭/오버랩 없음.
     2) drop-shadow 이중 필터로 찢긴 가장자리에 종이 섬유 하이라이트 + 깊이 그림자.
     3) 책 가운데 종이색 그라데이션 언더레이(tear-bridge)로 어두운 책 본체가
        찢긴 틈으로 비치지 않게. 가장자리는 투명으로 페이드 → 흰 네모 안 튀어보임.
     4) 분리 순간 책등 라인 따라 그림자가 잠깐 깜빡(crease).
     5) 35% 키프레임 — 살짝 머뭇거리다 떨어지는 종이 느낌. */
.page-left.tearing,
.page-right.tearing {
  z-index: 40;
  will-change: transform, opacity, filter;
  pointer-events: none;
  /* clip-path는 JS가 inline으로 매번 다르게 주입 (applyFiberTearClips) */
}
.page-left.tearing {
  animation: tearAwayLeft 1.2s cubic-bezier(0.35, 0, 0.25, 1) forwards;
  filter:
    drop-shadow(0 0 0.5px rgba(255, 248, 230, 0.95))      /* 종이 섬유 하이라이트 */
    drop-shadow(0.8px 0 1.2px rgba(70, 50, 30, 0.18));    /* 깊이 그림자 (안쪽 방향) */
}
.page-right.tearing {
  animation: tearAwayRight 1.2s cubic-bezier(0.35, 0, 0.25, 1) forwards;
  filter:
    drop-shadow(0 0 0.5px rgba(255, 248, 230, 0.95))
    drop-shadow(-0.8px 0 1.2px rgba(70, 50, 30, 0.18));
}
@keyframes tearAwayLeft {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  8%   { transform: translate(-0.4%, 1px) rotate(-0.2deg); }
  35%  { transform: translate(-3%, 8%) rotate(-3deg); opacity: 1; }
  100% { transform: translate(-12%, 65%) rotate(-9deg); opacity: 0; }
}
@keyframes tearAwayRight {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  8%   { transform: translate(0.4%, 1px) rotate(0.2deg); }
  35%  { transform: translate(3%, 8%) rotate(3deg); opacity: 1; }
  100% { transform: translate(12%, 65%) rotate(9deg); opacity: 0; }
}

/* 종이색 언더레이 — 책 전체를 덮는 종이색 단색 시트.
   pages가 어느 방향으로 기울어/이동하든(상단·하단·좌우 어디로 노출돼도)
   어두운 책 본체(var(--ink)) 대신 종이색이 보이도록 책 전체 inset:0 으로 깐다.
   책 컨테이너와 동일한 border-radius로 모서리 매칭.
   DOM 순서상 pages 보다 먼저라 z-index 없이도 뒤에 깔린다. */
.tear-bridge {
  position: absolute;
  inset: 0;
  background: var(--page-bg, var(--page-bg));
  border-radius: 4px 8px 8px 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.tear-bridge.active { opacity: 1; transition: opacity 0s; }

/* 분리 순간 책등 라인을 따라 그림자가 잠깐 펄스. pages(z:40) 위로 와야 보이므로 z:50. */
.tear-crease {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 8px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0)       0%,
    rgba(70,50,35,0.22) 40%,
    rgba(70,50,35,0.42) 50%,
    rgba(70,50,35,0.22) 60%,
    rgba(0,0,0,0)      100%
  );
  filter: blur(0.5px);
  opacity: 0;
  z-index: 50;
  pointer-events: none;
}
.tear-crease.active {
  animation: tearCreaseFlash 700ms ease-out 280ms forwards;
}
@keyframes tearCreaseFlash {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(0.6); }
  30%  { opacity: 1; transform: translateX(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.4); }
}

/* 종이 가루 파티클 — 찢는 순간 책 가운데에서 흩어진다 (Web Animations API로 제어). */
.tear-dust {
  position: fixed;
  pointer-events: none;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(216, 200, 170, 0.85);
  opacity: 0;
  z-index: 35;
}

/* ===== 실행 취소 토스트 (펼침 삭제 후 5초) ===== */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(42, 38, 34, 0.95);
  color: var(--paper);
  padding: 12px 14px 12px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.32);
  font-size: 14px;
  z-index: 1800;
}
.undo-toast[hidden] { display: none; }
.undo-toast-btn {
  background: rgba(255,255,255,0.16);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.undo-toast-btn:hover { background: rgba(255,255,255,0.28); }

/* ===== 모달 — 확인 문구 / 위험(삭제) 버튼 ===== */
.modal-card--narrow { width: min(360px, 92vw); }
.modal-text {
  margin: 4px 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}
.btn-danger { background: var(--danger); color: var(--white); }
.btn-danger:hover { background: var(--danger-hover); }

/* ============ 쓰기 화면 ============ */
#writing-view.view.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(to bottom, var(--bg), var(--bg-grad-bottom));
  position: relative;       /* 떠다니는 도구틀(.tool-dock) 기준 */
}

.writing-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 22px;
  gap: 16px;
  flex-shrink: 0;
}
.writing-topbar .back-btn { justify-self: start; }
.writing-title {
  justify-self: center;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.writing-page-label {
  margin-left: 6px;
  color: var(--text-soft);
  font-weight: 400;
  font-size: 13px;
}
.writing-spacer  { justify-self: end; }
.writing-actions { justify-self: end; display: flex; gap: 8px; }

/* 캔버스 무대 — 펼침(두 쪽)을 담는다.
   하단 도구바가 사라져 패딩을 줄여 일기장을 더 크게(화면을 더 채우게). */
.writing-stage {
  flex: 1;
  min-height: 0;          /* flex 자식이 뷰포트를 넘쳐 잘리는 것 방지 */
  display: flex;
  align-items: flex-start;   /* 종이를 위쪽에 — 확보한 여백이 아래로 가게 (그리기 편하게) */
  justify-content: center;
  padding: 14px 10px 12px;
  overflow: hidden;
  position: relative;     /* 줌 리셋 버튼 기준 + 줌 시 클리핑 */
  touch-action: none;     /* 두 손가락 핀치 줌 제스처를 stage가 받음 */
}

/* 확대 상태일 때만 나타나는 줌 리셋 버튼 */
.zoom-reset {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 30;
  background: rgba(42, 38, 34, 0.88);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.zoom-reset:hover { background: var(--ink-hover); }

/* 펼침 — 좌·우가 하나로 이어진 캔버스. 좌우 분리 없음.
   가운데 제본선은 시각 오버레이일 뿐 입력에 영향 없음.
   width/height 는 writing.js fitSpread()가 296:210 비율로 px 지정.
   줌은 이 요소에 transform(translate+scale)으로 적용. */
.writing-spread {
  position: relative;
  background: var(--page-bg, var(--page-bg));    /* 종이색 단색 — 페이지 분할 없음 */
  border-radius: 4px 8px 8px 4px;
  box-shadow:
    0 20px 40px rgba(60, 40, 20, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.1);
  transform-origin: 0 0;
  overflow: hidden;
}

/* 가운데 제본선 — 시각 표시만 (pointer-events:none → 그 위에도 자유롭게 입력) */
.writing-spine {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(0,0,0,0.20), rgba(0,0,0,0.06));
  pointer-events: none;
  z-index: 5;
}

.writing-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;           /* 터치 스크롤/줌 차단 */
  cursor: crosshair;
}
.writing-canvas.cursor-eraser     { cursor: cell; }
.writing-canvas.cursor-crop       { cursor: crosshair; }
.writing-canvas.cursor-photo-edit { cursor: grab; }
.writing-canvas.cursor-lasso      { cursor: crosshair; }
.writing-canvas.cursor-rotate     { cursor: grab; }
.writing-canvas.cursor-text       { cursor: text; }

/* ===== 텍스트 박스 오버레이 =====
   spreadEl 내부에 절대 좌표로 떠 있으며, 줌/팬 transform 을 자연스럽게 따라감.
   편집 중에만 <textarea>(.text-edit-box) 를 자식으로 가짐 — 비편집 박스는 canvas 가 그림. */
.text-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;        /* 빈 영역 클릭은 캔버스로 — textarea 만 events 받음 */
  z-index: 6;
}
.text-edit-box {
  position: absolute;
  pointer-events: auto;
  margin: 0;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px dashed var(--select-blue);
  border-radius: 4px;
  outline: none;
  resize: none;
  overflow: hidden;             /* 높이는 JS 가 scrollHeight 로 자동 갱신 */
  font-family: inherit;
  /* font-size/family/weight/style/decoration/align 모두 JS 가 인라인으로 적용 */
  white-space: pre-wrap;
  word-break: break-word;
  min-width: 60px;
  box-sizing: content-box;
  caret-color: var(--select-blue);
}

/* 도구 모음 */
.writing-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.tool-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 14px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.tool-group:last-child {
  border-right: none;
  padding-right: 0;
}
.tool-group--end { margin-left: auto; }
.tool-label {
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}

.tool-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tool-btn:hover { background: rgba(0, 0, 0, 0.05); }
/* 텍스트 도구 — T 글리프, 세리프로 강조해 시각적으로 구분 */
.tool-btn--text {
  font-family: 'Gowun Batang', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  padding: 4px 12px;
  line-height: 1;
}
.tool-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* 팔레트 탭 (5개 카테고리 전환) */
.palette-tabs {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-right: 6px;
  padding-right: 8px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.palette-tab {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.palette-tab:hover { transform: scale(1.12); }
.palette-tab.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--paper), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* 현재 팔레트의 스펙트럼 (8색) */
.ink-swatches { display: flex; gap: 5px; }
.ink-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.1s, border-color 0.12s;
}
.ink-swatch:hover { transform: scale(1.12); }
.ink-swatch.selected {
  border-color: var(--paper);
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* 스포이드 버튼 */
.icon-btn--dropper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn--dropper.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* 스포이드 활성 시 캔버스 커서 */
.writing-canvas.cursor-picker { cursor: crosshair; }

/* 사진 도구 모음 — 사진이 선택됐을 때만 표시. 하단 중앙에 떠다니는 바. */
.photo-tools {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-floating);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: 0 12px 32px rgba(40, 30, 20, 0.18);
}
/* 레이어 순서 바 — 같은 떠다니는 스타일이되 상단 중앙 (하단 도구바와 안 겹치게) */
.layer-tools {
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  bottom: auto;
}

/* ===== 프레임 종류 선택 팝오버 (사진 도구바 위로 펼쳐짐) ===== */
.frame-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-floating);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 14px 36px rgba(40, 30, 20, 0.22);
  z-index: 80;
}
.frame-popover[hidden] { display: none; }
.frame-types { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.frame-type-btn {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.frame-type-btn:hover { background: rgba(0, 0, 0, 0.05); }
.frame-type-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.frame-border-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 10px;
}
.frame-border-opts[hidden] { display: none; }
.frame-row { display: flex; align-items: center; gap: 10px; }
.frame-row-label { font-size: 12px; color: var(--text-soft); width: 28px; flex-shrink: 0; }
/* 테두리 굵기 — 무단계 슬라이더 */
.frame-width-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 150px; height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.frame-width-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.frame-width-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--white);
}
.frame-colors { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frame-grad { width: 24px; height: 24px; flex-shrink: 0; }
.frame-color {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s;
}
.frame-color:hover { transform: scale(1.12); }
.frame-color.active {
  outline: 2px solid var(--photo-accent, #c0392b);
  outline-offset: 2px;
}
.photo-tools .tool-label {
  color: var(--photo-accent);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-right: 2px;
}
.photo-tools[hidden] { display: none; }

/* ===== 선택 액션 팝업 (올가미/사진 선택 시 아이콘 메뉴) ===== */
.sel-popup {
  position: fixed;
  z-index: 75;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  background: var(--surface-floating, #fff);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(40,30,20,0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sel-popup[hidden] { display: none; }
.sel-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: none;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.sel-icon svg { width: 23px; height: 23px; }
.sel-icon:hover { background: rgba(0,0,0,0.06); }
.sel-icon.active { background: var(--ink); color: var(--paper); }
.sel-icon--danger { color: var(--danger, #c0392b); }
.sel-icon--danger:hover { background: rgba(192,57,43,0.10); }
.sel-divider {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: rgba(0,0,0,0.12);
  flex-shrink: 0;
}
/* 단일 사진 선택일 땐 크기조절 아이콘/구분선 숨김 (사진은 자체 핸들 사용) */
.sel-popup--photo [data-sel="resize"],
.sel-popup--photo [data-group="resize"] { display: none; }

/* 레이어 펼침 메뉴 */
.sel-layer-menu {
  position: fixed;
  z-index: 76;
  display: flex;
  gap: 2px;
  padding: 5px;
  background: var(--surface-floating, #fff);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(40,30,20,0.20);
}
.sel-layer-menu[hidden] { display: none; }
.sel-layer-item {
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.sel-layer-item:hover { background: rgba(0,0,0,0.06); }

/* 커스텀 컬러피커 (네이티브 input[type=color]) */
.custom-color {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.custom-color::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.custom-color::-webkit-color-swatch { border: 0; border-radius: 50%; }
.custom-color::-moz-color-swatch { border: 0; border-radius: 50%; }

/* 굵기 슬라이더 */
.thickness-slider {
  width: 110px;
  cursor: pointer;
}
.thickness-value {
  font-size: 12px;
  color: var(--text-soft);
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Undo / Redo */
.icon-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, opacity 0.12s;
  color: var(--text);
}
.icon-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); }
.icon-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* 장 추가 (오른쪽 끝) */
.btn-secondary {
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.12s, opacity 0.12s;
}
.btn-secondary:hover:not(:disabled) { background: var(--ink-hover); }
.btn-secondary:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ============================================================
   떠다니는 도구틀 (tool-dock) + 설정 팝업 (말풍선)
   ============================================================ */
.tool-dock {
  position: absolute;
  left: 16px;
  top: 64px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* 토글 원 — 흰 원 안에 현재 도구 아이콘 */
.tool-dock-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--surface-floating);
  color: var(--icon-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(40, 30, 20, 0.22), 0 2px 6px rgba(0,0,0,0.08);
  touch-action: none;       /* 드래그 이동 제스처 */
  transition: transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tool-dock-toggle:active { transform: scale(0.95); }

/* 세로 도구 목록 — 알약형 흰 컬럼 */
.tool-dock-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  background: var(--surface-floating);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 30px;
  box-shadow: 0 10px 26px rgba(40, 30, 20, 0.20), 0 2px 6px rgba(0,0,0,0.08);
}
.tool-dock-list[hidden] { display: none; }

.dock-tool {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--dock-icon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.dock-tool:hover { background: rgba(0, 0, 0, 0.05); }
.dock-tool:active { transform: scale(0.92); }
.dock-tool.active {            /* 선택된 도구 — 배경 원 강조 (시안) */
  background: var(--dock-active-bg);
  color: var(--ink);
}

/* ===== 설정 팝업 — 도구틀 오른쪽 말풍선 ===== */
.tool-popup {
  position: absolute;
  left: calc(100% + 14px);
  top: 0;
  width: 268px;
  max-width: 72vw;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--surface-floating);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(40, 30, 20, 0.22), 0 3px 10px rgba(0,0,0,0.10);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
}
.tool-popup[hidden] { display: none; }
.tool-popup--text  { width: 286px; }

/* 도구틀이 화면 오른쪽 절반에 있으면 팝업을 도구틀 왼쪽에 표시 (화면 밖 방지) */
.tool-dock.popup-left .tool-popup {
  left: auto;
  right: calc(100% + 14px);
}

/* 말풍선 꼬리 — 기본(오른쪽 표시): 팝업 왼쪽 모서리에서 도구틀 쪽을 가리킴 */
.tool-popup::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 22px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transform: rotate(45deg);
}
/* 왼쪽 표시일 땐 꼬리를 팝업 오른쪽 모서리로 반전 */
.tool-dock.popup-left .tool-popup::before {
  left: auto;
  right: -7px;
  transform: rotate(-135deg);
}

/* 세그먼트 토글 (볼펜/형광펜, 영역/픽셀) — 통일 스타일 */
.seg-toggle {
  display: flex;
  gap: 0;
  padding: 3px;
  background: var(--seg-bg);
  border-radius: 10px;
}
.seg-btn {
  flex: 1;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.seg-btn.active {
  background: var(--white);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
/* 펜 종류 4개 — 좁아지므로 글자/여백 축소 */
.seg-toggle--pens .seg-btn { padding: 7px 3px; font-size: 12.5px; }
/* 최근 색 줄 — 비었으면 숨김 (hidden 속성이 display:flex 에 안 먹는 것 보정) */
.pop-field--recent[hidden] { display: none; }

/* 팝업 공통 행 / 라벨 / 값 — 모든 팝업 통일 */
.pop-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pop-field--end {
  justify-content: flex-end;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.pop-label {
  width: 52px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}
.pop-value {
  min-width: 34px;
  text-align: right;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pop-range {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  accent-color: var(--ink);     /* 슬라이더 색 통일 */
}
.pop-select {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 9px;
  background: var(--white);
}
.pop-stepper {
  width: 32px; height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 9px;
  background: var(--white);
  font-size: 17px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
}
.pop-stepper:hover { background: rgba(0,0,0,0.04); }
/* 크기 값 — 탭하면 크기 선택 메뉴가 열리는 버튼 */
.pop-value--btn {
  min-width: 46px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 9px;
  background: var(--white);
  cursor: pointer;
  text-align: center;
}
.pop-value--btn:hover { background: rgba(0,0,0,0.04); }
/* 크기 직접 입력 (number) — 값 버튼 자리에 표시. 16px 로 iOS 자동확대 방지 */
.pop-value--input {
  width: 56px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--field-border-focus);
  border-radius: 9px;
  background: var(--white);
  font-family: inherit;
  font-size: 16px;
  text-align: center;
  color: var(--text);
  outline: none;
  -moz-appearance: textfield;
}
.pop-value--input::-webkit-outer-spin-button,
.pop-value--input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pop-value--input[hidden] { display: none; }

/* 글자 크기 선택 메뉴 — 화면에 고정(overflow 안 잘림), 약 4개 보이고 스크롤 */
.size-menu {
  position: fixed;
  z-index: 90;
  width: 84px;
  max-height: 168px;            /* ≈ 4개 × 42px */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px;
  background: var(--surface-floating);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(40, 30, 20, 0.22), 0 3px 10px rgba(0,0,0,0.10);
}
.size-menu[hidden] { display: none; }
.size-item {
  display: block;
  width: 100%;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.size-item:hover { background: rgba(0,0,0,0.05); }
.size-item.selected {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

/* 도구틀 액션 메뉴 */
.dock-menu {
  position: fixed;
  z-index: 90;

  min-width: 120px; /* 기존 140px */
  padding: 4px;

  background: var(--surface-floating);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  box-shadow:
    0 14px 36px rgba(40,30,20,.22),
    0 3px 10px rgba(0,0,0,.10);
}

.dock-menu-item {
  width: 100%;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  background: transparent;
  border-radius: 8px;

  font-family: inherit;
  font-size: 15px;
  color: var(--text);

  cursor: pointer;
}

.dock-menu-item:hover {
  background: rgba(0,0,0,.05);
}

/* 안내 토스트 (붙여넣기 등) — 화면 하단 중앙에서 잠깐 */
.writing-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  transform: translateX(-50%) translateY(8px);
  z-index: 95;
  max-width: 80vw;
  padding: 11px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.writing-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 스와치 (펜/텍스트 공통) — 원형, 선택 시 이중 원 */
.pop-swatches {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex: 1;
}
.pop-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--white);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
  transition: transform 0.1s;
}
.pop-swatch:hover { transform: scale(1.1); }
.pop-swatch.selected {            /* 이중 원 — 선택 표시 */
  box-shadow: 0 0 0 2px var(--ink);
}
.pop-swatch--gradient {
  background: conic-gradient(from 0deg,
    var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4), var(--grad-5), var(--grad-6), var(--grad-1));
  border-color: var(--white);
}
.pop-color-input {
  width: 30px; height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  background: var(--white);
  flex-shrink: 0;
}
.pop-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.pop-color-input::-webkit-color-swatch { border: 0; border-radius: 6px; }

/* 토글 버튼 (B/I/U/S, 정렬) — 통일 */
.pop-toggle {
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
}
.pop-toggle:hover { background: rgba(0,0,0,0.04); }
.pop-toggle.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pop-primary {
  margin-left: 8px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pop-danger {
  padding: 8px 12px;
  background: transparent;
  color: var(--danger-text);
  border: 1px solid rgba(176, 58, 46, 0.30);
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pop-danger:hover { background: rgba(176, 58, 46, 0.06); }

/* 그라데이션 스와치에 품은 네이티브 색상 입력 — 원 위에 투명하게 깔려,
   탭하면 진짜 사용자 제스처로 OS 색상창(격자/스펙트럼/슬라이더+스포이드)이 열린다. */
.pop-swatch--gradient { position: relative; overflow: hidden; }
.grad-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 640px) {
  .tool-dock { left: 10px; top: 56px; }
  .tool-dock-toggle { width: 50px; height: 50px; }
  .dock-tool { width: 42px; height: 42px; }
  .tool-popup { width: 240px; }
}

/* ============ 검색 ============ */
/* 헤더 우측 검색 버튼 (책장 / 책 보기 공통) */
.icon-round {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.7);
  font-size: 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
/* display:inline-flex 가 UA 의 [hidden]{display:none} 을 덮으므로, 숨김을 명시적으로 복구
   (안 하면 hidden 속성으로 토글하는 icon-round 버튼 — 예: 커뮤니티 🗑 — 이 안 숨겨진다) */
.icon-round[hidden] { display: none; }
.icon-round:hover { background: var(--white); }

.app-header-text { display: flex; align-items: center; gap: 12px; }
.bookview-right  { justify-self: end; display: flex; align-items: center; gap: 12px; }

/* 검색 화면 */
#search-view.view.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.search-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  flex-shrink: 0;
}
.search-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 16px;          /* iOS 자동 확대 방지를 위해 16px 이상 */
  font-family: inherit;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: var(--white);
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--field-border-focus); }

.search-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 22px 12px;
}
.search-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.08s, box-shadow 0.15s;
}
.search-card:hover  { box-shadow: 0 6px 16px rgba(60, 40, 20, 0.12); }
.search-card:active { transform: translateY(1px); }
.search-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.search-card-book { font-size: 13px; font-weight: 600; color: var(--text); }
.search-card-page {
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.search-card-snippet {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
  word-break: keep-all;
}
.search-card-snippet mark {
  background: var(--search-mark-bg);
  color: var(--text);
  border-radius: 3px;
  padding: 0 2px;
}
.search-hint {
  text-align: center;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.8;
  padding: 48px 20px;
}
.search-hint small { font-size: 12px; opacity: 0.75; }

.search-footer { padding: 0 22px; flex-shrink: 0; }
.search-count  { font-size: 12px; color: var(--text-soft); padding: 4px 0; }
.search-note {
  font-size: 12px;
  color: var(--note-text);
  background: var(--note-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 6px 0;
  line-height: 1.6;
}
.search-usage {
  padding: 10px 22px 16px;
  font-size: 11px;
  color: var(--text-soft);
  text-align: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ============ OCR 인식 상태 토스트 ============ */
.ocr-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1800;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(42, 38, 34, 0.95);
  color: var(--paper);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.ocr-toast[hidden]        { display: none; }
.ocr-toast--done          { background: rgba(39, 110, 60, 0.96); }
.ocr-toast--failed        { background: rgba(150, 50, 40, 0.96); }
.ocr-toast-check          { font-weight: 700; }
.ocr-toast-retry {
  margin-left: 4px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.ocr-toast-retry:hover { background: rgba(255, 255, 255, 0.32); }
/* 인식 중 점 3개 애니메이션 */
.ocr-toast-dots { display: inline-flex; gap: 3px; }
.ocr-toast-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: ocrDot 1s infinite ease-in-out;
}
.ocr-toast-dots i:nth-child(2) { animation-delay: 0.15s; }
.ocr-toast-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ocrDot {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40%           { opacity: 1;    transform: scale(1); }
}

/* ============ 표지 사진 ============ */
/* 사진 표지 책 — 색상 대신 사진을 표지로 */
.book-cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 제목/페이지수 글씨가 사진 위에서도 보이도록 위·아래를 어둡게 */
.book-cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.42), rgba(0,0,0,0.06) 38%,
    rgba(0,0,0,0.10) 62%, rgba(0,0,0,0.5));
}
.book--photo .book-title {
  color: var(--white);
  text-shadow: 0 1px 5px rgba(0,0,0,0.7);
}
.book--photo .book-pages {
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* 모달 — 표지 사진 선택 */
.cover-photo-field {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cover-photo-preview {
  width: 54px;
  height: 75px;
  border-radius: 4px;
  border: 1px solid var(--field-border);
  background: var(--thumb-bg) center / cover no-repeat;
  flex-shrink: 0;
  position: relative;
}
.cover-photo-preview:not(.has-photo)::after {
  content: '색상 표지';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text-soft);
  text-align: center;
}
.cover-photo-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cover-photo-actions .btn { padding: 8px 14px; font-size: 13px; }

/* ============ 책장 — 시네마틱 카드 스택 ============ */
:root { --cs-card-w: min(64vw, 540px, 84vh); }

/* 가운데 책 표지색으로 부드럽게 전환되는 배경 */
#bookshelf-view {
  background-color: var(--bg);
  position: relative;        /* 삭제 오버레이 + 블러 배경 기준 */
}
#bookshelf-view.view.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  isolation: isolate;        /* 자체 쌓임 맥락 — 음수 z-index 배경을 이 화면 안에 가둠 */
  overflow: hidden;          /* 살짝 확대된 블러 배경이 화면 밖으로 안 새게 */
}

/* ===== 가운데 책 표지 블러 뒷배경 (2겹 크로스페이드) =====
   작은 썸네일을 화면 전체로 늘려 깔고 blur 를 정적으로 한 번만 적용.
   전환은 opacity 만 (GPU 합성). 스와이프 중엔 JS가 내용을 안 바꿈.
   z-index 음수 → 헤더/카드(양수 z) 보다 항상 뒤, 화면 바탕색 위. */
.shelf-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.55s ease;
  will-change: opacity;
  pointer-events: none;
}
/* 사진 표지일 때만 blur+살짝 확대(흐림 가장자리 감춤). 색 표지는 단색이라 blur 불필요. */
.shelf-bg--photo {
  filter: blur(22px) saturate(1.15);
  transform: scale(1.18);
}
/* 가독성 스크림 — 블러 위, 카드 아래. 밝은 종이톤 + 위아래 비네팅으로 대비 확보. */
.shelf-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 92% 62% at 50% 34%,
      rgba(255,255,255,0.45), rgba(255,255,255,0) 60%),
    linear-gradient(to bottom,
      rgba(236,230,221,0.30) 0%, rgba(236,230,221,0.10) 45%, rgba(0,0,0,0.16) 100%);
}

/* 카드가 떠 있는 무대 (z-index 부여하지 않음 — 카드 z-index 가 화면 맥락에서 동작해야 함) */
.card-stack {
  flex: 1;
  position: relative;
  overflow: hidden;
  touch-action: none;          /* 가로 드래그는 직접 처리 */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.card-stack:active { cursor: grabbing; }

/* 카드 — transform/opacity/z-index/transition 은 JS가 설정 */
.cs-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cs-card-w);
  height: calc(var(--cs-card-w) / 1.4);   /* 가로형 1.4:1 */
  border-radius: 20px;
  overflow: hidden;
  background: var(--cover, var(--cover-dusty-pink));
  box-shadow: 0 12px 32px rgba(40,30,20,0.22);
  will-change: transform, opacity;
  touch-action: none;
}
/* 가운데(선택) 카드 — 깊은 드롭섀도우로 떠 있는 느낌 */
.cs-card--center {
  box-shadow: 0 34px 64px rgba(28,20,12,0.42), 0 10px 24px rgba(0,0,0,0.24);
}

/* 표지 (색상 또는 사진) */
.cs-card-bg {
  position: absolute;
  inset: 0;
  background: var(--cover, var(--cover-dusty-pink));
}
.cs-card--photo .cs-card-bg {
  background-image: var(--cover-photo);
  background-size: cover;
  background-position: center;
}
/* 글씨 가독성용 어두운 그라데이션 (아래쪽) */
.cs-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 66%);
}

/* 카드 정보 — 왼쪽 아래 */
.cs-card-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 24px;
  color: var(--white);
}
.cs-card-headline {
  display: flex;
  align-items: center;
  gap: 11px;
}
.cs-card-emoji {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}
.cs-card-title {
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-card-meta {
  margin-top: 7px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 5px rgba(0,0,0,0.55);
  letter-spacing: 0.02em;
}

/* 달력 책 — 책장 첫 자리에 고정된 특별한 카드 (전체 일기 aggregate).
   바탕은 따뜻한 베이지+얇은 그리드, 우상단에 📅 워터마크. 일반 책과 구분. */
.cs-card--calendar .cs-card-bg {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.10) 0 1px, transparent 1px 14%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.10) 0 1px, transparent 1px 14%),
    linear-gradient(160deg, var(--cal-card-grad-1) 0%, var(--cal-card-grad-2) 100%);
}
.cs-card--calendar::after {
  content: "📅";
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 32px;
  opacity: 0.85;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  pointer-events: none;
}

/* 새 책장 추가 카드 */
.cs-card--add {
  background: rgba(255,255,255,0.46);
  border: 2px dashed rgba(80,68,54,0.42);
  box-shadow: 0 8px 22px rgba(40,30,20,0.14);
}
.cs-card--add.cs-card--center {
  box-shadow: 0 26px 52px rgba(28,20,12,0.3);
}
.cs-add-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(66,54,42,0.72);
}
.cs-add-plus  { font-size: 56px; font-weight: 200; line-height: 1; }
.cs-add-label { margin-top: 10px; font-size: 14px; letter-spacing: 0.04em; }

/* 위로 스와이프 — 책 삭제 오버레이 */
.cs-delete-overlay {
  position: absolute;
  inset: 0;
  z-index: 950;            /* 옆 카드(≤900) 위, 가운데 카드(~1000) 아래 */
  opacity: 0;
  pointer-events: none;    /* 제스처는 .card-stack이 처리 */
}
.cs-delete-overlay[hidden] { display: none; }
.cs-delete-bg {
  position: absolute;
  inset: 0;
  background: var(--delete-zone-bg);
}
/* 휴지통 아이콘 (위쪽 가운데) */
.cs-trash {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(150, 44, 40, 0.4);
  color: var(--delete-zone-icon);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* 충분히 밀어 올려 '삭제 준비'된 상태 */
.cs-trash.armed {
  background: rgba(214, 48, 42, 0.92);
  color: var(--white);
  transform: translate(-50%, -50%) scale(1.14);
}
/* 위치 점 — 몇 개 중 몇 번째 (아래쪽 가운데) */
.cs-dots {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  max-width: 86vw;
}
.cs-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  transition: background 0.2s ease, transform 0.2s ease;
}
.cs-dot.active {
  background: var(--white);
  transform: scale(1.3);
}

/* 모달 — 이모지 선택 */
.emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.emoji-option {
  width: 40px;
  height: 40px;
  font-size: 21px;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: 9px;
  background: var(--chip-bg);
  cursor: pointer;
  padding: 0;
}
.emoji-option:hover { background: var(--chip-bg-hover); }
.emoji-option.selected {
  border-color: var(--ink);
  background: var(--white);
}

/* 모달 — 기간 입력 */
.date-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--white);
}
.date-sep { color: var(--text-soft); flex-shrink: 0; }

/* ============================================================
   월간 달력 펼침 + 일기 날짜 표시 + 날짜 변경 알약 + 일기 목록 팝업
   ============================================================ */

/* ===== 책 보기 — 왼쪽 그룹 (책장 ← + 달력으로 📅) ===== */
.bookview-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 달력 버튼 — icon-round(정원)에 얹어 이모지 크기만 조정 */
.back-btn--cal {
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

/* ===== 일기 페이지 좌상단 날짜 표시 (책 보기, 읽기 전용 이텔릭) ===== */
.page-date {
  position: absolute;
  top: 16px;
  left: 22px;
  z-index: 3;
  font-family: Georgia, 'Times New Roman', 'Noto Serif KR', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(60, 50, 40, 0.55);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ===== 쓰기 화면 — 날짜 알약 (탭하면 날짜 변경 모달) ===== */
.writing-date-pill {
  position: absolute;
  top: 16px;
  left: 22px;
  z-index: 6;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: Georgia, 'Times New Roman', 'Noto Serif KR', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(60, 50, 40, 0.78);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: auto;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.writing-date-pill:hover {
  background: var(--surface-floating);
  border-color: rgba(0, 0, 0, 0.14);
}

/* ===== 텍스트 박스 설정 패널 — 선택/편집 중 화면 하단 위에 떠 있음 ===== */
.text-panel {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);  /* writing-toolbar 위에 */
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-floating);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(40, 30, 20, 0.18);
  max-width: min(560px, 94vw);
}
.text-panel[hidden] { display: none; }
.text-panel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.text-panel-row--end {
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.text-panel-label {
  width: 44px;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.text-panel-select {
  font-family: inherit;
  font-size: 14px;
  padding: 5px 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  background: var(--white);
}
.text-panel-stepper {
  width: 30px; height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  background: var(--white);
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
}
.text-panel-stepper:hover { background: rgba(0,0,0,0.04); }
.text-panel-value {
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--text);
}
.text-panel-range {
  flex: 1;
  max-width: 220px;
}
.text-panel-swatches {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.text-panel-swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.text-panel-swatch.selected {
  border-color: var(--ink);
  transform: scale(1.08);
}
.text-panel-color {
  width: 30px; height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  background: var(--white);
}
.text-panel-toggle {
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.text-panel-toggle:hover { background: rgba(0,0,0,0.04); }
.text-panel-toggle.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.text-panel-primary {
  margin-left: 8px;
  padding: 7px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.text-panel-danger {
  padding: 7px 12px;
  background: transparent;
  color: var(--danger-text);
  border: 1px solid rgba(176, 58, 46, 0.30);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.text-panel-danger:hover { background: rgba(176, 58, 46, 0.06); }

/* ===== 월간 달력 — 좌/우 페이지에 200%-wide 콘텐츠로 가로지름 ===== */
.calendar-side {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--page-bg, var(--page-bg));
  /* iOS Safari 의 3D 렌더 잔여 방지 — 독립 paint 컨테이너로 분리 */
  contain: paint;
}
/* 달력은 가운데 제본선 없이 깔끔하게 — 페이지 내측 그림자도 제거 */
.calendar-side--left  { border-radius: 4px 0 0 4px; }
.calendar-side--right { border-radius: 0 4px 4px 0; }
.book-container.is-calendar .spine-shadow { display: none; }
.book-container.is-calendar .page-left,
.book-container.is-calendar .page-right { box-shadow: none; }

.calendar-content {
  position: absolute;
  top: 0;
  width: 200%;             /* 양쪽 페이지를 가로지르는 전체 폭 */
  height: 100%;
  /* 패딩 축소 — 셀이 자연스럽게 더 커지도록 */
  padding: 3.2% 4.5% 3%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.calendar-side--left  .calendar-content { left: 0; }
.calendar-side--right .calendar-content { left: -100%; }

/* ===== 월 전환 슬라이드 — 가볍게(.22s), 한 번만 재생 =====
   delta>0(다음 달) 이면 우→좌(from-right), delta<0(이전 달) 이면 좌→우(from-left).
   transform 만 사용 — left 로 잡혀 있는 좌/우 페이지 분할과 충돌 없음. */
@keyframes calSlideFromRight {
  from { transform: translateX(28px); opacity: 0.35; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes calSlideFromLeft {
  from { transform: translateX(-28px); opacity: 0.35; }
  to   { transform: translateX(0);     opacity: 1; }
}
.calendar-content--slide-from-right {
  animation: calSlideFromRight 0.22s ease-out;
}
.calendar-content--slide-from-left {
  animation: calSlideFromLeft 0.22s ease-out;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.calendar-header .calendar-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  font-family: 'Gowun Batang', Georgia, serif;
  color: var(--text);
  letter-spacing: 0.02em;
  text-align: center;
}

.calendar-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
  letter-spacing: 0.18em;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.dow--sat { color: var(--cal-sat); }
.dow--sun { color: var(--cal-sun); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  flex: 1;
  min-height: 0;
}
.calendar-day {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.calendar-day:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.04); }
.calendar-day:active:not(:disabled) { background-color: rgba(0, 0, 0, 0.08); }
.calendar-day--other {
  color: rgba(0, 0, 0, 0.20);
  cursor: default;
}
.calendar-day--sat { color: var(--cal-sat); }
.calendar-day--sun { color: var(--cal-sun); }
.calendar-day--today {
  border-color: rgba(60, 50, 40, 0.55);
  font-weight: 600;
}
/* 날짜 숫자 — 썸네일 위에서도 잘 보이도록 살짝 떠 있는 칩 형태.
   셀이 커진 만큼 숫자도 좀 더 크게. */
.calendar-day-num {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 15px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 7px;
  color: inherit;
}
/* 일기 있는 날 — 썸네일 배경 + 숫자에 흰색 칩 */
.calendar-day--has {
  background-color: rgba(184, 144, 96, 0.16);
}
.calendar-day--has .calendar-day-num {
  background: rgba(255, 255, 255, 0.92);
  color: var(--cal-daynum-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.calendar-day--has:hover:not(:disabled) {
  background-color: rgba(184, 144, 96, 0.26);
}
/* 여러 개일 때 우하단 배지 */
.calendar-day-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 일기가 없는 날 탭했을 때 살짝 흔들리는 피드백 */
@keyframes calendarDayShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-2px); }
}
.calendar-day--shake { animation: calendarDayShake 0.32s ease; }

/* ===== 같은 날의 일기 목록 팝업 — 가로 스크롤, 큰 썸네일 ===== */
.modal-card--wide { width: min(760px, 94vw); }

.diary-list-items {
  display: flex;
  flex-direction: row;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 2px 14px;
  margin: 4px -4px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.diary-list-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: transparent;
  /* 왼쪽 4px 띠 — 책 cover color 로 어느 책의 일기인지 한눈에 식별 */
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-left: 4px solid var(--book-color, rgba(0,0,0,0.10));
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.diary-list-item:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.22);
  border-left-color: var(--book-color, rgba(0,0,0,0.22));
}
.diary-list-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diary-list-book-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--book-color, var(--neutral-gray));
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.diary-list-book {
  font-weight: 600;
  color: var(--text);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diary-list-num  { font-weight: 600; color: var(--text); flex-shrink: 0; }
.diary-list-sep  { color: var(--text-soft); flex-shrink: 0; }
.diary-list-time { color: var(--text-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.diary-list-thumb {
  width: 100%;
  aspect-ratio: 296 / 210;
  border-radius: 6px;
  background: var(--page-bg, var(--page-bg));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
  display: block;
  object-fit: cover;
}

/* ===== 인앱 브라우저 안내 배너 ===== */
.inapp-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: #2b2118;
  color: #fff8ef;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
}
.inapp-banner[hidden] { display: none; }
.inapp-banner-inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.inapp-banner-text { flex: 1 1 220px; min-width: 0; line-height: 1.4; }
.inapp-banner-text strong { display: block; font-size: 14px; }
.inapp-banner-hint { display: block; font-size: 12px; opacity: 0.82; margin-top: 2px; }
.inapp-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.inapp-btn { padding: 8px 12px; font-size: 13px; }
.inapp-close {
  background: transparent; border: 0; color: inherit;
  font-size: 16px; cursor: pointer; opacity: 0.7; padding: 6px;
}
.inapp-close:hover { opacity: 1; }

/* ===== 책 공유 모달 ===== */
.share-book-title {
  font-size: 14px; color: var(--text-soft);
  margin: -4px 0 14px; font-weight: 600;
}
.share-loading { color: var(--text-soft); padding: 16px 0; text-align: center; }
.share-pane { /* 패널 토글은 hidden 속성으로 */ }

.share-code-row {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 6px;
}
.share-code {
  flex: 1;
  font-size: 30px; font-weight: 700; letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 12px 8px;
  background: var(--page-bg, #f7f1e6);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  color: var(--ink, #2b2118);
  user-select: all;
}
.share-link-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.share-link { flex: 1; font-size: 13px; }
.share-copy-btn {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--white, #fff);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px; cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}
.share-copy-btn:hover { background: rgba(0, 0, 0, 0.04); }
.share-copy-btn:active { transform: scale(0.94); }

.share-on-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 16px 0 6px;
}
.share-disable { color: var(--danger, #c0392b); }

.share-status {
  margin-top: 12px; font-size: 13px; line-height: 1.5;
  color: var(--text-soft);
}
.share-status[hidden] { display: none; }
.share-status.ok  { color: #2a7d4f; }
.share-status.err { color: var(--danger, #c0392b); }

/* ----- 참여자 목록 (공유 일기 전용) ----- */
.share-members { margin-top: 6px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.share-members[hidden] { display: none; }
.share-members-list {
  max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.share-member {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px;
}
.share-member-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--bg, #ece6dd);
}
.share-member-avatar--fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, #7b6ce0, #5648c0);
}
.share-member-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.share-member-name {
  font-size: 15px; font-weight: 600; color: var(--text, #3a332c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-member-me {
  margin-left: 4px; font-size: 11px; font-weight: 700; color: #6b5bd6;
  background: rgba(107, 91, 214, 0.12); padding: 1px 7px; border-radius: 999px;
}
.share-member-role { font-size: 12px; color: var(--text-soft, #8a7f70); }
.share-member-role.is-owner { color: #6b5bd6; font-weight: 700; }
.share-members-empty {
  padding: 14px 4px; font-size: 13px; color: var(--text-soft, #8a7f70); text-align: center;
}

/* ===== 입장(코드로 참여) ===== */
.join-code-input {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.join-status { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.join-status[hidden] { display: none; }
.join-status.ok  { color: #2a7d4f; }
.join-status.err { color: var(--danger, #c0392b); }

/* 입장/나가기 결과 토스트 */
.join-toast {
  position: fixed;
  left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  transform: translate(-50%, 16px);
  max-width: min(88vw, 460px);
  background: #2b2118; color: #fff8ef;
  padding: 12px 18px; border-radius: 999px;
  font-size: 14px; line-height: 1.4; text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.32);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 210;
}
.join-toast.show { opacity: 1; transform: translate(-50%, 0); }
.join-toast.err  { background: #6e241d; }

/* ===== 자동 동기화 상태 (작게, 하단 좌측) ===== */
.sync-status {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 95;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(43, 33, 24, 0.78);
  color: #fff7ec;
  box-shadow: 0 6px 16px rgba(0,0,0,0.20);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sync-status[hidden] { display: none; }
.sync-status.sync-syncing { background: rgba(43, 33, 24, 0.78); }
.sync-status.sync-synced  { background: rgba(42, 125, 79, 0.92); }
.sync-status.sync-offline { background: rgba(90, 90, 90, 0.85); }
.sync-status.sync-error   { background: rgba(150, 90, 30, 0.92); }

/* ===== 공유받은 책 — 책장 카드 배지 ===== */
.cs-card-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  background: rgba(43, 33, 24, 0.82);
  color: #fff7ec;
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  letter-spacing: 0.01em;
  max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ===== 책 보기 — 작성자 핀 (내 펼침 / 친구 펼침·보기 전용) =====
   토바(3열 grid)의 흐름에서 빼서 '독립적으로' 띄운다. position:absolute 라
   grid 자동 배치에 참여하지 않으므로 우측 아이콘 줄을 밀거나 책 크기를 줄이지 않는다.
   토바 바로 아래·우측에 내용만큼만 차지하는 pill 로 붙는다. */
.bookview-readonly {
  position: absolute;
  top: 100%;            /* 토바 바로 아래 */
  right: 22px;          /* 우측 정렬 (토바 좌우 padding 과 동일) */
  margin-top: -4px;
  z-index: 6;           /* 토바(z:5)보다 위로 */
  display: inline-flex; align-items: center;
  width: auto; max-width: 60vw;   /* 내용만큼(fit-content) */
  font-size: 12px; font-weight: 600;
  color: var(--text-soft, #6b5d4f);
  background: rgba(150, 111, 71, 0.12);
  border: 1px solid rgba(150, 111, 71, 0.22);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;   /* 책 영역 탭을 가리지 않게 */
}
.bookview-readonly[hidden] { display: none; }
@media (max-width: 640px) {
  .bookview-readonly { right: 14px; }
}
/* 내 펼침 — 은은한 초록 */
.bookview-readonly.is-mine {
  color: #2a7d4f;
  background: rgba(42, 125, 79, 0.10);
  border-color: rgba(42, 125, 79, 0.22);
}
/* 친구 펼침(보기 전용) — 따뜻한 갈색 잠금 톤(기본값과 동일하지만 명시) */
.bookview-readonly.is-foreign {
  color: var(--text-soft, #6b5d4f);
  background: rgba(150, 111, 71, 0.12);
  border-color: rgba(150, 111, 71, 0.22);
}

/* ===== 반응형 — 모바일 ===== */
@media (max-width: 640px) {
  :root { --book-w: 150px; --book-h: 210px; }
  .app-header { padding: 20px 20px 8px; }
  .shelf { padding: 30px 20px; gap: 18px; }
  .book-stage { padding: 10px 50px 20px; }
  .nav-btn { width: 38px; height: 38px; font-size: 18px; }
  .add-page-btn { padding: 11px 16px; font-size: 13px; }
  .inapp-banner-actions { width: 100%; justify-content: flex-end; }
  .share-code { font-size: 26px; letter-spacing: 0.16em; }
}

/* ============================================================
   이달의 노트 — 공용 커뮤니티 방명록
   (3D 넘김 CSS는 .book-container/.page/.flipper 를 그대로 재사용)
   ============================================================ */

/* 책장 카드 — 공용 노트(합성 카드). 개인 책과 톤으로 구분 */
.cs-card--community .cs-card-bg {
  background: linear-gradient(150deg, #7b6ce0 0%, #5648c0 55%, #40348f 100%);
}
.cs-card--community .cs-card-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* 로딩 / 오류 상태 */
.community-loading {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--text-soft, #8a7f70); font-size: 15px; text-align: center; line-height: 1.6;
}

/* 커버 펼침 — 좌/우를 가로지르는 200%-wide 콘텐츠(달력과 동일 트릭) */
.community-cover {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  /* 배경 투명 + spine(z:4) 위로 올림 → 안내 카드가 있는 곳만 제본선을 덮고,
     카드 밖(위·아래)에선 아래의 페이지색/제본선이 그대로 비쳐 일관성 유지. 종이색은 .page 가 깐다. */
  background: transparent; z-index: 5; contain: paint;
}
.community-cover-inner {
  position: absolute; top: 0; width: 200%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 6% 8%; box-sizing: border-box; text-align: center;
}
.community-cover--left  .community-cover-inner { left: 0; }
.community-cover--right .community-cover-inner { left: -100%; }

/* 안내 메시지 카드 — 가운데(제본선 위)를 덮는 은은한 패널. 표지 배지/보라 톤과 통일. */
.community-msg-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 72%; padding: 26px 30px; box-sizing: border-box; text-align: center;
  /* 불투명(페이지색 베이스 + 옅은 흰빛) → 제본선을 확실히 가림. 살짝 떠 보이는 부드러운 카드. */
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), var(--page-bg, #fbf7ef);
  border: 1px solid rgba(107, 91, 214, 0.14);
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(60, 40, 20, 0.12);
}
.community-cover-badge {
  font-size: 13px; letter-spacing: 0.08em; color: #6b5bd6; font-weight: 700;
  padding: 4px 12px; border: 1px solid rgba(107, 91, 214, 0.35); border-radius: 999px;
}
.community-cover-title {
  font-size: 30px; font-weight: 800; color: var(--text, #3a332c);
  font-family: 'Noto Serif KR', Georgia, serif; line-height: 1.3;
}
.community-cover-period { font-size: 15px; color: var(--text-soft, #8a7f70); }
.community-cover-state {
  margin-top: 8px; font-size: 15px; color: #6b5bd6; font-weight: 600;
}

/* 글 펼침 — 완성 이미지(image_url)를 좌/우 절반으로 (200%-wide 트릭) */
.community-side {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--page-bg, #fbf7ef); contain: paint;
}
.community-img {
  position: absolute; top: 0; width: 200%; height: 100%;
  object-fit: cover; object-position: center;
}
.community-side--left  .community-img { left: 0; }
.community-side--right .community-img { left: -100%; }
.community-img--blank { background: var(--page-bg, #fbf7ef); }
.community-mine-pill {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(107, 91, 214, 0.9); padding: 3px 9px; border-radius: 999px;
}

/* ----- 신고 버튼 — 우측 상단 구석, 은은하게 ----- */
.community-report-btn {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 26px; height: 26px; padding: 0 8px;
  font-size: 12px; line-height: 1; color: var(--text-soft, #8a7f70);
  background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px; cursor: pointer; opacity: 0.5;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.community-report-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.92); }
.community-report-btn.is-reported {
  opacity: 0.85; cursor: default; font-weight: 700;
  color: #b23b3b; background: rgba(255, 235, 235, 0.9); border-color: rgba(178, 59, 59, 0.28);
}

/* ----- 숨겨진 페이지 (운영자가 hidden 처리) — 커버와 동일한 200%-split ----- */
.community-hidden {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: transparent; z-index: 5; contain: paint;   /* .community-cover 와 동일 — 카드만 제본선 덮음 */
}
.community-hidden-inner {
  position: absolute; top: 0; width: 200%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 6% 8%; box-sizing: border-box; text-align: center;
  color: var(--text-soft, #8a7f70);
}
.community-hidden--left  .community-hidden-inner { left: 0; }
.community-hidden--right .community-hidden-inner { left: -100%; }
.community-hidden-icon { font-size: 34px; opacity: 0.7; }
.community-hidden-title { font-size: 20px; font-weight: 800; color: var(--text, #3a332c); }
.community-hidden-sub { font-size: 13px; }
.community-hidden-page { margin-top: 6px; font-size: 12px; opacity: 0.7; }

/* 마감(잠금) 시 쓰기 버튼 */
.add-page-btn.is-locked { opacity: 0.55; cursor: not-allowed; }

/* ----- Lazy load: 페이지 이미지 로딩 스피너 + 페이드인 ----- */
.community-img {
  opacity: 0;
  transition: opacity 0.28s ease;
}
.community-img.is-loaded { opacity: 1; }
.community-page-spinner {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft, #8a7f70); font-size: 13px;
  pointer-events: none;
}
.community-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(107, 91, 214, 0.22);
  border-top-color: #6b5bd6;
  animation: community-spin 0.8s linear infinite;
}
@keyframes community-spin { to { transform: rotate(360deg); } }
.community-page-fail { font-size: 13px; color: var(--text-soft, #8a7f70); }

/* ----- 아카이브(지난 노트) 오버레이 ----- */
.community-archive {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(20, 16, 12, 0.42);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: community-archive-fade 0.18s ease;
}
/* display:flex 가 UA 의 [hidden]{display:none} 을 덮어쓰므로, 숨김을 명시적으로 복구 */
.community-archive[hidden] { display: none; }
@keyframes community-archive-fade { from { opacity: 0; } to { opacity: 1; } }
.community-archive-panel {
  width: min(720px, 100%); max-height: 82%;
  display: flex; flex-direction: column;
  background: var(--bg, #f3ede3); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.community-archive-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.community-archive-heading { margin: 0; font-size: 18px; font-weight: 800; color: var(--text, #3a332c); }
.community-archive-list {
  padding: 16px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
}
.community-archive-card {
  position: relative; text-align: left; cursor: pointer;
  padding: 16px 16px 14px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(150deg, #efeaf9 0%, #e3ddf3 100%);
  min-height: 132px; display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.community-archive-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
.community-archive-card.is-open {
  background: linear-gradient(150deg, #7b6ce0 0%, #5648c0 100%);
}
.community-archive-badge {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--text-soft, #8a7f70); background: rgba(0, 0, 0, 0.06);
  padding: 2px 9px; border-radius: 999px;
}
.community-archive-badge.is-open { color: #fff; background: rgba(255, 255, 255, 0.28); }
.community-archive-title {
  font-size: 17px; font-weight: 800; color: var(--text, #3a332c);
  font-family: 'Noto Serif KR', Georgia, serif; line-height: 1.3; margin-top: 4px;
}
.community-archive-period { font-size: 13px; color: var(--text-soft, #8a7f70); }
.community-archive-count { margin-top: auto; font-size: 12px; color: var(--text-soft, #8a7f70); }
.community-archive-card.is-open .community-archive-title,
.community-archive-card.is-open .community-archive-period,
.community-archive-card.is-open .community-archive-count { color: rgba(255, 255, 255, 0.94); }

/* ----- 온보딩(설명) 패널 — 표지 배지/안내 카드와 통일감, 부드러운 아날로그 ----- */
.community-onboard {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(20, 16, 12, 0.42);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: community-archive-fade 0.18s ease;
}
.community-onboard[hidden] { display: none; }   /* display:flex 가 [hidden] 덮으므로 명시 */
.community-onboard-panel {
  position: relative;
  width: min(500px, 100%); max-height: 86%; overflow-y: auto;
  padding: 26px 24px 22px; box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(123, 108, 224, 0.10), transparent 60%),
    var(--page-bg, #fbf7ef);
  border: 1px solid rgba(107, 91, 214, 0.16);
  border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.community-onboard-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.7);
  font-size: 14px; color: var(--text-soft, #8a7f70); cursor: pointer;
}
.community-onboard-x:hover { background: var(--white, #fff); }
.community-onboard-badge {
  display: inline-block;
  font-size: 12px; letter-spacing: 0.08em; color: #6b5bd6; font-weight: 700;
  padding: 4px 12px; border: 1px solid rgba(107, 91, 214, 0.35); border-radius: 999px;
}
.community-onboard-title {
  margin: 14px 0 6px; font-size: 21px; font-weight: 800; color: var(--text, #3a332c);
  font-family: 'Noto Serif KR', Georgia, serif;
}
.community-onboard-lead {
  margin: 0 auto 16px; font-size: 14px; line-height: 1.65; color: var(--text-soft, #6f6558);
}
.community-onboard-list {
  list-style: none; margin: 0 0 20px; padding: 0; text-align: left;
  display: flex; flex-direction: column; gap: 12px;
}
.community-onboard-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.55; color: var(--text, #3a332c);
}
.community-onboard-list b { font-weight: 700; }
.community-onboard-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  background: rgba(107, 91, 214, 0.10);
}
.community-onboard-ok {
  width: 100%; background: #6b5bd6; color: #fff; font-weight: 700;
}
.community-onboard-ok:hover { background: #5b4bc4; }

/* ============================================================
   다이어리 온보딩 — 첫 진입 카드 슬라이드 (좌우 스와이프 + 점 인디케이터)
   이달의 노트 온보딩(.community-onboard)과 별개. 앱의 아날로그 톤(테라코타 악센트).
   ============================================================ */
.onboard {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 16, 12, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: onboard-fade 0.18s ease;
}
.onboard[hidden] { display: none; }   /* display:flex 가 [hidden] 을 덮으므로 명시 */
@keyframes onboard-fade { from { opacity: 0; } to { opacity: 1; } }

.onboard-panel {
  position: relative;
  width: min(420px, 100%);
  padding: 18px 0 18px; box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(201, 124, 106, 0.12), transparent 60%),
    var(--paper, #fdfaf4);
  border: 1px solid rgba(201, 124, 106, 0.20);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.onboard-skip {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  border: 0; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--text-soft, #6b6359);
  padding: 6px 8px; border-radius: 8px;
}
.onboard-skip:hover { background: rgba(0, 0, 0, 0.05); }
.onboard-skip[hidden] { display: none; }

/* 트랙은 뷰포트 폭(블록) 그대로 → translateX(-100%) = 정확히 카드 한 장 */
.onboard-viewport { overflow: hidden; }
.onboard-track {
  display: flex;
  touch-action: pan-y;              /* 세로 스크롤은 살리고 가로 스와이프는 직접 처리 */
  will-change: transform;
}
.onboard-track.is-animating { transition: transform 0.32s cubic-bezier(.22, .61, .36, 1); }
.onboard-card {
  flex: 0 0 100%;
  padding: 26px 26px 6px; box-sizing: border-box;
  text-align: center;
  min-height: 292px;
  user-select: none; -webkit-user-select: none;
}
.onboard-ic {
  width: 74px; height: 74px; margin: 4px auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  background: rgba(201, 124, 106, 0.10);
  border: 1px solid rgba(201, 124, 106, 0.18);
}
.onboard-badge {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.10em; font-weight: 700; color: #b5705f;
  padding: 4px 12px; border: 1px solid rgba(201, 124, 106, 0.35); border-radius: 999px;
}
.onboard-title {
  margin: 12px 0 8px; font-size: 20px; font-weight: 800; line-height: 1.35;
  color: var(--text, #2a2622);
  font-family: 'Noto Serif KR', Georgia, serif;
}
.onboard-lead {
  margin: 0 auto; max-width: 310px;
  font-size: 14px; line-height: 1.75; color: var(--text-soft, #6b6359);
}
.onboard-lead b { color: var(--text, #2a2622); font-weight: 700; }

.onboard-dots { display: flex; gap: 7px; justify-content: center; margin: 16px 0 14px; }
.onboard-dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(42, 38, 34, 0.18); cursor: pointer;
  transition: width 0.22s ease, background 0.22s ease;
}
.onboard-dot.is-active { width: 20px; border-radius: 999px; background: #c97c6a; }

.onboard-actions { display: flex; align-items: center; gap: 10px; padding: 0 24px; }
.onboard-nav {
  flex: 0 0 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.7);
  font-size: 20px; line-height: 1; color: var(--text-soft, #6b6359); cursor: pointer;
}
.onboard-nav:hover:not(:disabled) { background: var(--white, #fff); }
.onboard-nav:disabled { opacity: 0.3; cursor: default; }
.onboard-next {
  flex: 1; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: #c97c6a; color: #fff; font-weight: 700; font-size: 15px;
}
.onboard-next:hover { background: #b76d5b; }

/* ============================================================
   💬 도움말 선택 시트 (안내 / 기능) + 기능 설명 페이지
   온보딩과 같은 아날로그 톤(크림 종이 + 테라코타 악센트).
   ============================================================ */
.help-menu {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(20, 16, 12, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: onboard-fade 0.18s ease;
}
.help-menu[hidden] { display: none; }   /* display:flex 가 [hidden] 을 덮으므로 명시 */
.help-menu-panel {
  position: relative;
  width: min(380px, 100%);
  padding: 26px 22px 22px; box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(201, 124, 106, 0.12), transparent 60%),
    var(--paper, #fdfaf4);
  border: 1px solid rgba(201, 124, 106, 0.20);
  border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.help-menu-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.7);
  font-size: 14px; color: var(--text-soft, #6b6359); cursor: pointer;
}
.help-menu-x:hover { background: var(--white, #fff); }
.help-menu-title {
  margin: 2px 0 18px; font-size: 18px; font-weight: 800; color: var(--text, #2a2622);
  font-family: 'Noto Serif KR', Georgia, serif;
}
.help-menu-actions { display: flex; gap: 12px; }
.help-menu-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 10px 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(201, 124, 106, 0.22); border-radius: 16px;
  transition: background 0.16s ease, transform 0.16s ease;
}
.help-menu-item:hover { background: var(--white, #fff); transform: translateY(-1px); }
.help-menu-ic {
  width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: rgba(201, 124, 106, 0.10); border: 1px solid rgba(201, 124, 106, 0.18);
}
.help-menu-label { font-size: 15px; font-weight: 800; color: var(--text, #2a2622); }
.help-menu-desc  { font-size: 12px; color: var(--text-soft, #6b6359); line-height: 1.4; }

/* ----- 기능 설명 페이지 (세로 스크롤) ----- */
.features {
  position: fixed; inset: 0; z-index: 215;
  background: rgba(20, 16, 12, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: onboard-fade 0.18s ease;
}
.features[hidden] { display: none; }
.features-panel {
  display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: 88vh;
  background: var(--paper, #fdfaf4);
  border: 1px solid rgba(201, 124, 106, 0.20);
  border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.features-head {
  flex: 0 0 auto; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 56px; border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.features-head-title {
  margin: 0; font-size: 17px; font-weight: 800; color: var(--text, #2a2622);
  font-family: 'Noto Serif KR', Georgia, serif;
}
.features-x {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.7);
  font-size: 14px; color: var(--text-soft, #6b6359); cursor: pointer;
}
.features-x:hover { background: var(--white, #fff); }

.features-scroll {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px 18px 26px;
}

/* 히어로 — 맨 위 강조 카드 */
.features-hero {
  text-align: center; padding: 26px 20px 22px; margin-bottom: 18px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(201, 124, 106, 0.16), transparent 62%),
    rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(201, 124, 106, 0.30);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(201, 124, 106, 0.12);
}
.features-hero-ic {
  width: 68px; height: 68px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: rgba(201, 124, 106, 0.12); border: 1px solid rgba(201, 124, 106, 0.22);
}
.features-badge {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.10em; font-weight: 700; color: #b5705f;
  padding: 4px 12px; border: 1px solid rgba(201, 124, 106, 0.35); border-radius: 999px;
}
.features-hero-title {
  margin: 12px 0 8px; font-size: 20px; font-weight: 800; line-height: 1.35;
  color: var(--text, #2a2622); font-family: 'Noto Serif KR', Georgia, serif;
}
.features-hero-body {
  margin: 0 auto; max-width: 380px;
  font-size: 14px; line-height: 1.75; color: var(--text-soft, #6b6359);
}

/* 일반 섹션 */
.features-sec { padding: 18px 4px; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.features-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.features-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  background: rgba(201, 124, 106, 0.10); border: 1px solid rgba(201, 124, 106, 0.18);
}
.features-sec-title {
  margin: 0; font-size: 16px; font-weight: 800; color: var(--text, #2a2622);
  font-family: 'Noto Serif KR', Georgia, serif;
}
.features-list {
  list-style: none; margin: 0; padding: 0 0 0 44px;
  display: flex; flex-direction: column; gap: 8px;
}
.features-list li {
  position: relative; font-size: 14px; line-height: 1.6; color: var(--text, #2a2622);
}
.features-list li::before {
  content: ''; position: absolute; left: -14px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(201, 124, 106, 0.55);
}
.features-body {
  margin: 0 0 0 44px; font-size: 14px; line-height: 1.7; color: var(--text, #2a2622);
}
.features-note {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-soft, #6b6359);
}
.features-sec .features-note { margin-left: 44px; }

@media (max-width: 420px) {
  .features-panel { max-height: 92vh; border-radius: 18px; }
  .features-scroll { padding: 14px 14px 22px; }
  .features-list, .features-body, .features-sec .features-note { margin-left: 0; padding-left: 18px; }
  .features-hero-title { font-size: 18px; }
}