:root {
  --bar:    #e8e2d8;
  --bg:     #ffffff;
  --paper:  #faf7f2;
  --text:   #2a2825;
  --sub:    #8a8070;
  --ring:   #c8bfb0;
  --radius: 18px;

  /* GameShell(공통 페이지+카드 레이아웃): 페이지를 노트북 그림의 밤하늘보다
     한층 더 어둡게 낮춰서, 흰 종이 카드가 배경에 묻히지 않고 또렷하게 돋보이게 한다. */
  --gs-page-bg: #1a1a20;
  /* 카드 배경은 흰색(--bg)이 아니라 notebook.png 맨 위 밤하늘 톤과 맞춘다.
     .game-card는 border-radius + overflow:hidden으로 그림을 둥근 모서리에
     맞춰 잘라내는데, 카드 배경이 흰색이면 라운드 모서리의 서브픽셀 클리핑
     틈으로 흰 테두리가 얇게 비쳐 보인다 — 배경을 그림과 같은 톤으로 맞춰
     그 틈이 보여도 이질감이 없게 한다. */
  --gs-card-bg: #464654;
  --gs-card-shadow: rgba(10, 10, 20, 0.55);
  --gs-card-border: transparent;
  --gs-card-radius: 26px;
  /* in-the-dark(9:16 아레나)과 카드 높이를 맞춰 방을 옮겨도 프레임 크기가 흔들리지 않게 함.
     --gs-max-width는 shared/game-shell.css의 모바일 분기점(<=560px)에서 100vw로
     바뀌므로, 그 값을 그대로 곱하면 실제 .game-shell 폭과 항상 일치한다. */
  --gs-card-min-height: calc(var(--gs-max-width) * 16 / 9);

  /* GameHeader(공통 헤더+메뉴 팝업) 테마를 이 앱의 밤하늘 남색 배경(--gs-card-bg/--gs-page-bg)에 맞춤 */
  --gh-accent: #e8e2d8;
  --gh-accent-2: #d8cec0;
  --gh-on-accent: #2a2825;
  --gh-surface: rgba(20, 17, 13, 0.35);
  --gh-surface-hover: rgba(20, 17, 13, 0.5);
  /* 배경이 밤하늘 남색으로 바뀌면서 기존 어두운 아이콘 색은 안 보였다 —
     i 버튼(--gh-accent)과 같은 크림톤으로 맞춰 눈에 띄게 한다. */
  --gh-icon: var(--gh-accent);
  --gh-icon-muted: rgba(232, 226, 216, 0.4);
  --gh-modal-bg: radial-gradient(ellipse at 50% 20%, var(--gs-card-bg) 0%, var(--gs-page-bg) 78%);
  --gh-modal-border: rgba(232, 226, 216, 0.18);
  --gh-text: rgba(232, 226, 216, 0.7);
  --gh-text-strong: #e8e2d8;
  --gh-kicker: rgba(232, 226, 216, 0.7);
  --gh-divider: rgba(232, 226, 216, 0.15);
  --gh-cancel-bg: rgba(232, 226, 216, 0.08);
  --gh-cancel-bg-hover: rgba(232, 226, 216, 0.14);
  --gh-cancel-text: rgba(232, 226, 216, 0.85);
  --gh-body-text: rgba(240, 236, 228, 0.92);
  --gh-font: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* 안내 패널(shared/room-intro.css) — 기본값은 in-the-dark의 검붉은 어둠이라
     이 방의 밤하늘 남색으로 갈아끼운다. 이 방은 종이가 밝아서 글자가 묻히기 쉬우므로
     장막을 다른 방보다 진하게 덮고, 글자는 흰색까지 올린다 — 달력이 비쳐 보이는 선은
     지키되, 화면에서 가장 또렷한 것은 문장이어야 한다.
     버튼은 종이색으로 채운다 — 이 방에서 손끝에 닿는 건 결국 종이다. */
  --ri-veil: rgba(20, 20, 28, 0.74);
  --ri-text-shadow: rgba(10, 10, 18, 0.9);
  --ri-text-halo: rgba(14, 14, 22, 0.82);
  --ri-line: #ffffff;
  --ri-hint: rgba(240, 236, 228, 0.66);
  --ri-btn-bg: #e8e2d8;
  --ri-btn-text: #2a2825;
  --ri-btn-idle-bg: rgba(232, 226, 216, 0.14);
  --ri-btn-idle-text: rgba(232, 226, 216, 0.45);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* position:fixed을 쓰면 iOS Safari가 이 페이지를 "스크롤 안 되는 고정 화면"으로
   보고, 다른 방들과 달리 다이나믹 아일랜드/상태표시줄 아래로 콘텐츠를 확장해
   그리는 몰입 모드를 켜주지 않는다 — 그 자리에 Safari 기본 흰색 칩을 그대로
   남겨서 유독 이 방만 상단이 하얗게 보였다. 다른 방들처럼 일반 문서 흐름으로
   두고 body.gs-page(shared/game-shell.css)의 min-height:100dvh + flex 중앙
   정렬에 맡긴다 — overflow:hidden만으로도 스크롤은 그대로 막힌다. */
body {
  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color: var(--text);
  display: flex; flex-direction: column;
  justify-content: center; /* 수직 중앙 정렬 */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── 타이틀 (노트북 이미지로 대체, 숨김) ── */
#titlebar { display: none; }

/* ── 게임카드: in-the-dark처럼 배경 그림이 카드 가장자리까지 꽉 차게(풀블리드) ──
   GameHeader 아이콘은 여백 없이 그림 위에 바로 떠 있다(in-the-dark와 동일). */
.game-card {
  position: relative;
  overflow: hidden;
}

/* ── 스테이지: 카드 전체를 채운다. notebook.png는 카드와 거의 같은 9:16 비율로
   제작되어 있어(1688×3000) object-fit:cover로 가장자리까지 꽉 채운다. ── */
#stage {
  position: absolute;
  inset: 0;
  /* notebook.png의 종이 영역은 투명이라 원래 .game-card의 흰 배경(--gs-card-bg)이
     비쳐서 종이 흰색이 됐다. --gs-card-bg를 카드 가장자리 톤에 맞추면서(아래)
     종이 흰색을 잃지 않도록, 종이 배경은 여기서 별도로 흰색을 준다. */
  background: var(--bg);
}

/* 노트북 배경 그림: 카드 가장자리까지 풀블리드로 채운다. 그리드/필터 등
   실제 UI보다 항상 뒤에 있어야 하므로 z-index를 가장 낮게 둔다. */
#notebook-overlay {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* ── 레이어: notebook-overlay와 같은 1688×3000 캔버스 좌표계 위에 달/별/구름/
   캐릭터/붓을 그대로 겹친다(모두 같은 캔버스 크기의 풀사이즈 PNG라 inset:0 +
   object-fit:cover 하나로 좌표가 맞는다). 배경(종이 질감)만 multiply로 흰
   바탕에 녹아들고, 이 레이어들은 색이 있는 그림이라 블렌드 없이 그대로 얹는다. */
.eod-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* 밤하늘 달: 숨쉬듯 은은하게 빛나며 살짝 갸웃거린다(홈 화면 달 연출과 같은 문법). */
.eod-moon {
  transform-origin: 22% 10.5%;
  filter: drop-shadow(0 0 2px rgba(255, 240, 200, 0.3));
  animation: eod-moon-glow 4.5s ease-in-out infinite;
}

@keyframes eod-moon-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 240, 200, 0.3)); transform: scale(1) rotate(0deg); }
  50% { filter: drop-shadow(0 0 8px rgba(255, 240, 200, 0.7)); transform: scale(1.06) rotate(4deg); }
}

/* 밤하늘 별: 불규칙한 리듬으로 명멸한다. */
.eod-star {
  animation: eod-star-twinkle 3.6s ease-in-out infinite;
}

@keyframes eod-star-twinkle {
  0%, 100% { opacity: 0.55; }
  15% { opacity: 1; }
  32% { opacity: 0.6; }
  50% { opacity: 0.95; }
  68% { opacity: 0.5; }
  84% { opacity: 0.9; }
}

/* 캐릭터가 올라선 구름: 발밑에서 아주 은은하게 떠오르내린다. */
.eod-cloud {
  transform-origin: 25% 95%;
  animation: eod-cloud-float 6s ease-in-out infinite;
}

@keyframes eod-cloud-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.01); }
}

/* 그림일기를 그리는 캐릭터: 붓질 박자(아래 .eod-brush와 같은 3.4s)에 맞춰
   발끝(구름에 붙은 자리)을 축으로 몸을 살짝 기울였다 돌아온다. */
.eod-character {
  transform-origin: 23% 93%;
  animation: eod-character-breathe 3.4s ease-in-out infinite;
}

@keyframes eod-character-breathe {
  0%, 100% { transform: scale(1) rotate(0deg) translateY(0); }
  25% { transform: scale(1.01) rotate(-1.5deg) translateY(-1px); }
  45% { transform: scale(1.02) rotate(2deg) translateY(1px); }
  60% { transform: scale(1.01) rotate(-0.8deg) translateY(0); }
  80% { transform: scale(1.005) rotate(0.4deg) translateY(0); }
}

/* 손에 쥔 붓: 쥔 손(붓 아랫부분)을 축으로만 회전해 붓끝이 오간다 —
   이동 없이 회전만 써서 손에서 벗어나 보이지 않는다. */
.eod-brush {
  transform-origin: 22% 91%;
  animation: eod-brush-dab 3.4s ease-in-out infinite;
}

@keyframes eod-brush-dab {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  45% { transform: rotate(7deg); }
  60% { transform: rotate(3deg); }
  80% { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .eod-moon,
  .eod-star,
  .eod-cloud,
  .eod-character,
  .eod-brush {
    animation: none;
  }
  .eod-moon {
    filter: drop-shadow(0 0 2px rgba(255, 240, 200, 0.3));
  }
  .eod-star {
    opacity: 0.85;
  }
}

/* 달력 프레임: "하루끝그림일기" 제목 아래(약 28%)부터 종이 하단 끝(약 80%)까지의
   구간을 그대로 박스로 잡고, justify-content:center로 그리드가 그 구간
   안에서 수직 중앙에 오도록 한다. 종이 자체 여백(약 12%~90%)보다
   더 안쪽에 그리드가 오도록 좌우 여백을 종이 여백보다 크게 잡는다. */
#calendar-frame {
  position: absolute;
  top: 28%; bottom: 20%;
  left: 19%; right: 17%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  border: none;
  overflow: visible;
  z-index: 2;
}

#grid-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 2px;
  background: transparent;
}

/* 필터 바: 배경 그림 속 캐릭터(좌측 하단, 대략 12~37% 구간) 오른쪽 옆에,
   캐릭터의 세로 중심(그림 기준 약 89%)에 수직 중앙 정렬로 놓는다.
   배경 그림(z-index:0)보다 항상 위에 오도록 z-index를 준다. */
#notebook-bottom {
  position: absolute;
  top: 89%; left: 40%; right: 8%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

/* 외부 바텀바 숨김 */
#bottombar { display: none; }

.grid-cell {
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
  background: #e4dfd6;
  transition: opacity .15s, transform .15s;
}
.grid-cell:hover  { opacity: .85; }
.grid-cell:active { transform: scale(.93); }
.grid-cell.dimmed:active { transform: none; }
.grid-cell.empty  { background: transparent; cursor: default; pointer-events: none; }
.grid-cell.dimmed { opacity: .18; pointer-events: auto; cursor: not-allowed; }

.grid-cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}
.grid-cell-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.grid-cell-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.6;
}
.grid-cell-no {
  position: absolute; top: 3px; left: 4px;
  font-size: 6px; font-weight: 700;
  color: rgba(255,255,255,.6);
  line-height: 1;
}
.grid-cell-tags {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 2px; padding: 2px 3px;
}
.grid-cell.dummy {
  background: #ede9e0;
  opacity: .3;
  cursor: default;
  pointer-events: none;
}
.grid-tag {
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,.55);
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  transition: color .2s;
}
.grid-tag.hl {
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.grid-cell-stripe {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
}

/* ── 바텀바 (숨김, 내용은 notebook 내부로 이동) ── */
#bottombar { display: none; }

#bottombar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 600px;
}

#filter-area {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tab-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tab-btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(232, 226, 216, .16);
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: rgba(232, 226, 216, .75);
  padding: 5px 12px;
  border-radius: 999px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.tab-btn.active {
  background: var(--gh-accent);
  color: var(--gh-on-accent);
}

.filter-panel { display: none; }
.filter-panel.active { display: flex; flex-direction: column; gap: 4px; }

.panel-oval {
  width: 100%;
  height: 38px;
  border-radius: 999px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;
  overflow: visible;
}

.filter-clear {
  display: none;
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  border: none; cursor: pointer;
  font-size: 11px; font-weight: 700; color: #fff;
  align-items: center; justify-content: center;
  font-family: inherit;
  margin-left: auto;
  transition: background .15s, transform .15s;
}
.filter-clear:hover { background: #000; }
.filter-clear.visible {
  display: flex;
  animation: filter-clear-pop .18s ease-out;
}
@keyframes filter-clear-pop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.color-oval  { background: #E1D1C2; }
.topic-oval  { background: #E5E5EA; }

.scroll-arrow {
  display: none;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.15);
  border: none; cursor: pointer;
  font-size: 13px; line-height: 1; color: rgba(255,255,255,.9);
  align-items: center; justify-content: center;
  font-family: inherit;
  margin-left: 4px;
  transition: background .15s;
}
.scroll-arrow:hover { background: rgba(0,0,0,.28); }
.scroll-arrow.visible { display: flex; }

.panel-scroll {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;   /* 스와치 scale 클리핑 방지 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 4px 3px;      /* scale된 스와치 여백(첫/끝 항목이 활성화로 커질 때 잘리지 않게) */
}
.panel-scroll::-webkit-scrollbar { display: none; }

.swatch {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .2s, border-color .2s;
}
.swatch:hover  { transform: scale(1.15); }
.swatch.active { border-color: #fff; transform: scale(1.2); }
.swatch.all { /* conic-gradient은 JS에서 동적 생성 */ }

.topic-chip {
  flex: 0 0 auto;
  background: rgba(42, 38, 33, .1);
  color: rgba(42, 38, 33, .82);
  border: none;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s;
  font-family: inherit;
}
.topic-chip:hover  { background: rgba(42, 38, 33, .18); }
.topic-chip.active { background: var(--text); color: #fff; }

/* ── 팝업 ── */
#popup {
  display: none;
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(30,26,22,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px 56px;
}
#popup.open { display: flex; }

#popup-card {
  position: relative;
  width: 100%; max-width: 360px;
  height: min(calc(100dvh - 40px), 680px);
  background: var(--paper);
  border-radius: 0;
  box-shadow: 0 12px 48px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
  overflow: visible;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  user-select: none;
}

#popup-top-bar {
  flex: 0 0 auto;
  height: 80px;
  position: relative;
  transition: background .3s;
  display: flex;
  align-items: center;
  padding: 0 18px;
}
#popup-top-no {
  font-size: 44px;
  font-weight: 800;
  color: rgba(255,255,255,.22);
  line-height: 1;
  letter-spacing: -.03em;
  user-select: none;
}

#popup-close {
  position: absolute;
  top: 20px; right: -46px;
  background: rgba(255,255,255,.5); border: none; cursor: pointer;
  font-size: 14px; color: var(--text);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: background .15s;
  font-family: inherit;
  z-index: 10;
}
#popup-close:hover { background: #fff; }

#img-viewer {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #e8e4dc;
}
#img-track {
  width: 100%; height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 0;
}
#img-track::-webkit-scrollbar { display: none; }

.popup-img-panel {
  width: 100%;
  flex-shrink: 0;
}
.popup-img-frame {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: #ddd8d0;
}
.popup-img-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none;
}
.popup-img-caption {
  padding: 8px 4px 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.popup-placeholder-single {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; opacity: .15;
}

#img-scroll-bar {
  position: absolute; top: 8px; right: 4px; bottom: 120px;
  width: 3px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  pointer-events: none;
}
#img-scroll-thumb {
  width: 100%;
  background: rgba(255,255,255,.65);
  border-radius: 2px;
  transition: height .1s, top .1s;
  position: absolute;
}

/* 메타정보 상단 고정 */
#popup-meta {
  flex: 0 0 auto;
  padding: 12px 16px 10px;
  background: var(--paper);
  border-bottom: 1px solid #e8e3db;
}

#popup-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.popup-date {
  font-size: 10px; color: var(--sub);
  letter-spacing: .06em;
}
.popup-title {
  font-size: 16px; font-weight: 700;
  color: var(--text);
  margin-bottom: 8px; line-height: 1.3;
}
.popup-tags  { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.popup-tag   {
  font-size: 10px;
  background: #ede9e0;
  border-radius: 20px; padding: 2px 9px;
  color: var(--sub);
}

#popup-ig {
  display: none;
  align-items: center; gap: 4px;
  font-size: 10px; color: var(--sub);
  background: none;
  border: 1px solid var(--ring);
  border-radius: 20px; padding: 3px 8px;
  cursor: pointer; font-family: inherit;
  flex-shrink: 0;
  transition: all .2s;
}
#popup-ig:hover { background: #ede9e0; color: var(--text); }

.popup-arrow {
  position: absolute;
  top: 60%; transform: translateY(-50%);
  background: rgba(255,255,255,.5); border: none;
  color: var(--text); font-size: 28px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: background .15s, opacity .15s;
  font-family: inherit;
  z-index: 10;
}
.popup-arrow:hover { background: #fff; }
.popup-arrow:disabled { opacity: 0; pointer-events: none; }
#pp-prev { left: -46px; }
#pp-next { right: -46px; }

#popup-card.slide-left  { animation: slideLeft  .25s cubic-bezier(.4,0,.2,1) both; }
#popup-card.slide-right { animation: slideRight .25s cubic-bezier(.4,0,.2,1) both; }
@keyframes slideLeft  { from { transform: translateX(60px); opacity:.4 } to { transform: none; opacity:1 } }
@keyframes slideRight { from { transform: translateX(-60px); opacity:.4 } to { transform: none; opacity:1 } }

/* 모바일: 팝업 패딩 줄이고 화살표/닫기버튼 절반 오버랩 */
@media (max-width: 480px) {
  #popup { padding: 20px 20px; }
  #pp-prev { left: -18px; }
  #pp-next { right: -18px; }
  #popup-close { right: -18px; }
}