/* styles/daily.css — Daily Restoration 전용 화면 스타일
   에이전트 B 생성 (2026-06-28).
   기존 01-base-tokens.css 토큰 100% 재사용. 신규 색상 변수 생성 금지.
   url() 에셋 경로: styles/ → ../assets/ (01-base-tokens.css 동일 규칙) */

/* ── #daily 풀스크린 화면 ─────────────────────────────────────────────────── */
#daily {
  position: fixed;
  inset: 0;
  display: none;           /* body[data-screen="daily"] #daily { display:flex } 는 아래 라우터 규칙 */
  flex-direction: column;
  overflow: hidden;
  background: url('../assets/setting/bg_daily.webp') center / cover no-repeat;
  color: var(--text);
  isolation: isolate;
}

body[data-screen="daily"] #daily { display: flex; }

/* Daily is already a full-screen destination with its own back control and three content views.
   The shared hub nav duplicates navigation here and consumes the space the artwork needs. */
body[data-screen="daily"] .titleNav { display: none !important; }

#daily::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(245, 238, 214, 0.1), rgba(38, 28, 15, 0.18)),
    radial-gradient(120% 64% at 50% 4%, rgba(255, 246, 214, 0.12), transparent 60%);
  pointer-events: none;
}

/* ── 상단 헤더 ─────────────────────────────────────────────────────────────── */
.dailyHeader {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 5px) 15px 6px;
  background: none;
  border-bottom: none;
  box-shadow: none;
  z-index: 8;
  flex-shrink: 0;
  order: 1;
}

#dailyBack {
  min-width: 0;
  width: 46px !important;
  height: 46px !important;
  padding: 0;
  flex-shrink: 0;
  border: none !important;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: url('../assets/badge/back_round.png') center / contain no-repeat transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  color: transparent !important;
}

#dailyBack .ico { display: none; }

.dailyHeaderTitle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  align-self: center;
  height: auto;
  min-height: 50px;
  line-height: 1.08;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: #fff4d4;
  font-size: clamp(22px, 6vw, 26px);
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 #4a3214, 0 3px 7px rgba(0,0,0,.42);
}

.dailyHeaderTitle::before {
  content: "Daily";
  width: 58px;
  min-height: 24px;
  margin: 0 0 1px;
  padding: 2px 10px 4px;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  background: url('../assets/badge/count_tab.png') center / 100% 100% no-repeat;
  color: #fff2cf;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(40,20,4,.84);
}

#daily[data-active-tab="collection"] .dailyHeaderTitle::before {
  content: "Album";
}

.dailySeasonDate {
  min-width: 62px;
  max-width: 78px;
  min-height: 32px;
  height: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
  box-sizing: border-box;
  background: none;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  color: rgba(255,242,207,.84);
  text-align: right;
  text-shadow: 0 1px 3px rgba(0,0,0,.42);
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.dailySeasonDate:empty {
  background: none;
  padding: 0;
}

/* ── 탭 바: 석재 명판 / 얕은 홈 느낌 ──────────────────────────────────────── */
.dailyTabs {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 344px;
  margin: 0 auto;
  padding: 4px;
  box-sizing: border-box;
  background: rgba(45, 35, 18, 0.28);
  border-bottom: none;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,245,205,.16);
  flex-shrink: 0;
  order: 3;
}

.dailyTab {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 31px;
  padding: 0 6px 1px;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  background: transparent;
  color: rgba(255, 239, 195, 0.68);
  filter: none;
  opacity: 1;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(30, 16, 2, 0.72);
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 선택된 탭: 들어올려짐 + 금빛 테두리 */
.dailyTab[aria-selected="true"],
.dailyTab.active {
  color: #fff6e2;
  filter: none;
  opacity: 1;
  transform: none;
  background: rgba(244, 204, 99, 0.20);
  box-shadow: inset 0 0 0 1px rgba(244, 204, 99, 0.38);
  text-shadow: 0 1px 2px rgba(30, 16, 2, 0.72);
  z-index: 2;
}

.dailyTab[aria-selected="true"]::after,
.dailyTab.active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ecd590 30%, #cda53a 50%, #ecd590 70%, transparent);
  box-shadow: 0 0 4px rgba(255, 226, 112, 0.28);
  pointer-events: none;
}

.dailyTab:focus-visible {
  outline: none;
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px rgba(255, 231, 128, 0.34);
}

/* ── 탭 콘텐츠 영역 ────────────────────────────────────────────────────────── */
.dailyBody {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  order: 2;
}

.dailyTabPane {
  display: none;
  flex-direction: column;
  gap: 9px;
  padding: 6px 14px 12px;
  min-height: 100%;
  box-sizing: border-box;
}

.dailyTabPane.active { display: flex; }
.dailyTabPane[hidden] { display: none !important; }

/* ── Restoration 탭: 작품판 ────────────────────────────────────────────────── */

#dailyRestoration {
  position: relative;
  align-items: center;
  overflow: hidden;
}

#dailyRestoration::before {
  content: "";
  position: absolute;
  inset: 4px 14px 10px;
  z-index: 0;
  border-radius: 18px 18px 8px 8px;
  background:
    radial-gradient(circle at 16% 11%, rgba(255, 235, 154, 0.28), transparent 26%),
    linear-gradient(180deg, rgba(255, 239, 196, 0.38), rgba(97, 68, 28, 0.08) 62%, rgba(43, 30, 13, 0.20));
  box-shadow: inset 0 1px 0 rgba(255,255,240,.2);
  pointer-events: none;
}

#dailyRestoration > * {
  position: relative;
  z-index: 1;
}

/* 온보딩 한 문장 */
.dailyOnboardHint {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 0 2px;
  line-height: 1.45;
}

.dailyArtworkStage {
  position: relative;
  width: min(100%, 390px, var(--daily-height-fit-width, 38vh));
  margin: 0 auto;
  display: grid;
  justify-items: center;
}

.dailyShaHelper {
  position: absolute;
  right: clamp(-12px, -3vw, -8px);
  bottom: -2px;
  z-index: 3;
  width: clamp(68px, 20vw, 82px);
  pointer-events: none;
  transform: rotate(2deg);
  transition:
    top 0.38s cubic-bezier(.2, .76, .28, 1),
    bottom 0.38s cubic-bezier(.2, .76, .28, 1),
    opacity 0.2s;
}

/* Normal daily play keeps Sha grounded at the lower frame corner. Only recovery flows need her
   to travel to a specific piece; the frame itself never moves to make room for the guide. */
.dailyArtworkStage:is(
  [data-guide-state="recoverable"],
  [data-guide-state="recovered_unplayed"]
) .dailyShaHelper {
  top: clamp(16%, var(--daily-guide-y, 74%), 78%);
  bottom: auto;
  transform: translateY(-50%) rotate(2deg);
}

.dailyShaHelper::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  z-index: -1;
  width: 72%;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(45, 27, 9, 0.46), rgba(45, 27, 9, 0) 72%);
  filter: blur(1px);
}

.dailyBoardStatus {
  width: min(100%, 356px);
  aspect-ratio: 1328 / 120;
  min-height: 0;
  margin: 0 auto -4px;
  padding: 0 38px 1px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: url('../assets/daily/restoration_status.webp') center / 100% 100% no-repeat;
  color: #fff8d9;
  text-shadow: 0 1px 2px rgba(18, 24, 12, 0.94);
  font-weight: 900;
  overflow: hidden;
}

.dailyBoardStatus[hidden] { display: none; }

.dailyBoardStatusMain {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(12px, 3.1vw, 13px);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dailyBoardStatusSub {
  flex: 0 1 auto;
  max-width: 48%;
  min-width: 0;
  font-size: clamp(12px, 3vw, 12.5px);
  line-height: 1;
  color: #fff8d9;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dailyShaHelper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(45, 27, 9, 0.38));
  animation: dailyShaFloat 3.8s ease-in-out infinite;
}

.dailyShaSpark {
  position: absolute;
  top: 43%;
  left: 43%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff1a8;
  box-shadow: 0 0 0 3px rgba(255, 241, 168, 0.24), 0 0 12px rgba(255, 223, 92, 0.55);
}

.dailyArtworkStage[data-guide-state] .dailyShaSpark::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 8px;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 224, 111, 0.72), transparent);
  transform: rotate(8deg);
  transform-origin: right center;
}

.dailyArtworkStage[data-guide-state="locked"] .dailyShaHelper {
  opacity: 0.9;
}

.dailyArtworkStage:not([data-guide-state]) .dailyShaHelper {
  visibility: hidden;
  opacity: 0;
}

@keyframes dailyShaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 작품 외곽 프레임: 얇은 금장 + 크리스털 + 덩굴.
   §4.3 — 하나의 framed artwork surface. 7조각은 이 위에 놓인 가로 밴드 마스크로, 작품이
   위(Day1)에서 아래(Day7)로 복원되는 portrait 작품처럼 보인다. 화면 세로를 채워 주인공이 된다. */
.artworkFrame {
  position: relative;
  display: flex;
  aspect-ratio: var(--daily-aspect, 0.66);
  width: min(100%, 390px, var(--daily-height-fit-width, 38vh));
  margin: 0 auto;
  border: 2px solid #332b18;
  border-radius: 2px;
  background: #27291f;
  box-shadow:
    0 14px 24px rgba(39, 27, 12, 0.34),
    0 0 25px rgba(244, 204, 99, 0.12),
    inset 0 0 0 1px rgba(240, 205, 92, 0.34);
  padding: 5px;
  overflow: visible;
  isolation: isolate;
}

.artworkFrame::after {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 6;
  background: url('../assets/daily/restoration_frame.webp') center / 100% 100% no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(28, 19, 5, 0.3));
}

/* ② 작품 실루엣: 완성작 커버를 **세피아 단색**으로 프레임 전체에 한 장으로 깐다(조각별로 안 끊김) →
   "덮개 아래 그림 한 장이 통째로 잠들어 있다". 커버 없을 땐 은은한 종이 그라데이션. */
.artworkSilhouette {
  position: absolute;
  inset: 5px;
  border-radius: 3px;
  background: linear-gradient(160deg, #e8e0cd 0%, #d6ccb5 100%);
  opacity: 0.55;
  pointer-events: none;
}

/* 오너 결정(가): "어렴풋이 알아볼 정도" — 미스터리 최대(형체만)보다 기대감 쪽. blur를 낮추고(2→1.2px)
   대비를 살짝 올려 무엇의 그림인지 어렴풋이 읽히게. 단 채도는 죽여(sepia+저채도) 컬러 스포일러는 금지. */
.artworkFrame.has-cover .artworkSilhouette {
  background-image: var(--daily-cover);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.46;
  filter: blur(1.4px) grayscale(0.55) sepia(0.2) saturate(0.52) brightness(0.78) contrast(0.98);
  transform: scale(1.025);
}

/* 조각 그리드: 작품을 가로 밴드로 나눈 세로 스택 (Day1=맨 위 … Day7=맨 아래).
   행 수는 조각 수에 맞춰 자동(auto-fill) — 1×7 스트립이 아니라 프레임을 꽉 채우는 작품판이 된다.
   gap을 얇게 둬서 밴드 사이가 석재/납선 이음매처럼 보이고 전체가 하나의 표면으로 읽힌다. */
.pieceGrid {
  display: grid;
  grid-template-columns: repeat(var(--daily-cols, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--daily-rows, 7), minmax(0, 1fr));
  gap: 1px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 3px;
  background: transparent;                 /* ⚠️ 반드시 투명 — 불투명 배경을 깔면 조각과 실루엣 사이를 막아 그림이 안 비친다(2026-07-22 겪음). 조각·틈 모두 뒤 실루엣이 비쳐 "덮개 아래 잠든 그림 한 장"으로 읽힌다 */
}

/* ── 조각(dailyPiece) 공통 ─────────────────────────────────────────────────── */
/* 조각 = 세피아 실루엣 위에 얹힌 젖빛 유리판. 살짝 볼록(윗변 하이라이트 + 아랫변 안쪽 그림자). */
.dailyPiece {
  position: relative;
  min-width: 0; min-height: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  background: linear-gradient(155deg, rgba(214, 223, 196, 0.28), rgba(65, 66, 50, 0.38));
  box-shadow:
    inset 0 1px 0 rgba(241, 239, 201, 0.3),
    inset 0 -3px 6px rgba(27, 30, 22, 0.32);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* 가로 밴드는 위아래로만 살짝 눌리게 (좌우 scale은 작품 연속성을 깨뜨림) */
.dailyPiece:active { transform: scale(0.99); }

/* Day 번호 토큰 (2026-07-22): 요일 대신 Day 1~7 원형 토큰. 조각 좌상단 구석, 음각 돌 재질(조용히). */
.dailyPiece .pieceDay {
  position: absolute;
  top: 5px;
  left: 6px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: rgba(92, 74, 44, 0.72);
  background: rgba(255, 253, 247, 0.6);        /* 음각 돌 칩 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(90, 70, 40, 0.22);
  pointer-events: none;
  z-index: 4;
}

.dailyPiece .pieceLabel {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
  z-index: 3;
  letter-spacing: 0;
}

/* Shared collectible artwork: every cell shows the matching crop from one full image. It exists in
   every cell so dailyFinish can reveal it by changing data-state without rebuilding the grid. */
.dailyPiece .pieceArtwork {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--piece-art);
  background-repeat: no-repeat;
  background-size: var(--piece-art-width, 100%) var(--piece-art-height, 700%);
  background-position: var(--piece-art-x, 50%) var(--piece-art-y, 50%);
  opacity: 0;
  transition: opacity 0.28s ease, filter 0.28s ease;
}

/* A locked piece is a fogged part of one sleeping artwork, not an empty inventory slot. */
.dailyPiece[data-state="locked"] .pieceArtwork {
  opacity: 0.28;
  filter: grayscale(0.62) sepia(0.18) saturate(0.44) brightness(0.76) contrast(0.96) blur(0.9px);
  transform: scale(1.02);
}

.dailyPiece[data-state="today"] .pieceArtwork,
.dailyPiece[data-state="recovered_unplayed"] .pieceArtwork {
  opacity: 0.42;
  filter: grayscale(0.44) sepia(0.1) saturate(0.72) brightness(0.94) blur(0.3px);
}

.dailyPiece[data-state="recoverable"] .pieceArtwork {
  opacity: 0.24;
  filter: grayscale(0.72) sepia(0.2) saturate(0.38) brightness(0.76) blur(0.9px);
}

.dailyPiece[data-state="expired"] .pieceArtwork {
  opacity: 0.08;
  filter: grayscale(1) saturate(0.08) brightness(0.76) blur(2px);
}

/* 픽셀 이미지 (cleared) */
.dailyPiece .piecePixel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* ── 상태: locked = 아직 닦지 않은 김서린 유리 (검은 띠 폐지) ─────────────────── */
.dailyPiece[data-state="locked"] {
  background: linear-gradient(155deg, rgba(132, 143, 117, 0.44), rgba(57, 56, 44, 0.58));
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(239, 239, 196, 0.26),
    inset 0 -3px 7px rgba(24, 26, 19, 0.34);
}

.dailyPiece[data-state="locked"]::after { display: none; }

.dailyPiece[data-state="locked"] .pieceDay {
  color: rgba(92, 74, 44, 0.6);
  opacity: 0;
}

.dailyPiece[data-state="locked"][data-guide-target="true"] .pieceDay {
  color: #76591e;
  background: rgba(255, 236, 164, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 7px rgba(230, 188, 75, 0.38);
  opacity: 1;
}

.dailyPiece[data-state="locked"] .pieceLabel {
  color: rgba(255, 255, 255, 0.35);
  font-size: 6px;
}

/* ── 상태: today ───────────────────────────────────────────────────────────── */
.dailyPiece[data-state="today"] {
  background:
    radial-gradient(circle at 75% 50%, rgba(255, 239, 155, 0.38), transparent 42%),
    rgba(255, 235, 140, 0.19);
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 86, 0.88),
    inset 0 1px 0 rgba(255, 255, 220, 0.35),
    0 0 20px rgba(255, 206, 61, 0.34);
  z-index: 2;
}

.dailyPiece[data-state="today"] .pieceLabel {
  color: #fff9df;
  text-shadow: 0 1px 3px rgba(100, 60, 0, 0.72);
  left: 50%;
  padding: 5px 13px 6px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 249, 210, 0.26), transparent 48%),
    rgba(110, 73, 15, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 225, 0.24),
    0 3px 7px rgba(73, 40, 8, 0.24);
  transform: translate(-50%, -50%);
}
/* 오늘 조각의 Day 토큰 = 금빛 (다른 조각의 음각 돌과 구분) */
.dailyPiece[data-state="today"] .pieceDay {
  color: var(--gold-deep);
  background: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 6px rgba(255, 200, 60, 0.5);
}

.dailyPiece[data-state="today"]::before {
  content: "";
  position: absolute;
  inset: 6px auto auto 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 241, 140, 0.9);
  box-shadow: 0 0 8px rgba(255, 220, 80, 0.7);
  pointer-events: none;
  z-index: 3;
}

@keyframes dailyTodayPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 210, 80, 0.75), inset 0 1px 0 rgba(255,255,220,.35), 0 0 10px rgba(255,200,60,.22); }
  50%       { box-shadow: inset 0 0 0 2px rgba(255, 210, 80, 0.75), inset 0 1px 0 rgba(255,255,220,.35), 0 0 22px rgba(255,200,60,.48); }
}

.dailyPiece[data-state="today"] {
  animation: dailyTodayPulse 2.6s ease-in-out infinite;
}

/* ── 상태: cleared (복원된 컬러 조각) ───────────────────────────────────────
   픽셀 이미지 + 약한 유리 광택. 채도폭발 금지. 배경은 투명(픽셀 이미지가 채움). */
.dailyPiece[data-state="cleared"] {
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.dailyPiece[data-state="cleared"] .pieceArtwork {
  opacity: 1;
}

/* 이미지 로드 실패 시 숨김 (onerror와 병행) */
.dailyPiece[data-state="cleared"] .piecePixel[style*="display: none"],
.dailyPiece[data-state="cleared"] .piecePixel:not([src]) {
  display: none !important;
}

/* 복원된 밴드 위에는 ✓·날짜 텍스트를 띄우지 않는다 — 작품 자체가 보상.
   인접 cleared 밴드들이 끊김 없이 하나의 그림으로 읽히게 한다. */
.dailyPiece[data-state="cleared"] .pieceLabel,
.dailyPiece[data-state="cleared"] .pieceDay {
  display: none;
}

/* 약한 유리 광택 오버레이 (채도폭발 금지) */
.dailyPiece[data-state="cleared"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.16) 0%,
    transparent 40%
  );
  pointer-events: none;
  z-index: 2;
}

.dailyPiece.justRestored {
  z-index: 4;
  animation: dailyPieceLand 0.9s linear both;
}

.dailyPiece.justRestored::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 245, 176, 0.78), rgba(255, 210, 84, 0.22) 36%, transparent 64%);
  pointer-events: none;
  z-index: 4;
  animation: dailyPieceBloom 0.9s ease-out both;
}

/* 조각이 작품판에 **붙는** 순간 = Daily의 유일한 최고점(daily_restoration_spec §12). 다만 이 화면의
   강도 서열상 챕터 클리어보다 약해야 하므로 진폭은 다른 착지보다 한 단 낮게 잡았다. */
@keyframes dailyPieceLand {
  0%   { transform: scaleX(.975) scaleY(.995); filter: brightness(1); animation-timing-function: cubic-bezier(.2,.72,.3,1); }
  34%  { transform: scaleX(1.068) scaleY(.965); filter: brightness(1.12); animation-timing-function: ease-in-out; }
  62%  { transform: scaleX(.982) scaleY(1.016); animation-timing-function: ease-in-out; }
  84%  { transform: scaleX(1.008) scaleY(.994); animation-timing-function: ease-in-out; }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes dailyPieceBloom {
  0% { opacity: 0; transform: scale(0.76); }
  32% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22); }
}

.dailyPiece.tomorrowGlow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 238, 170, 0.18) 38%, rgba(255, 245, 194, 0.52) 50%, rgba(255, 238, 170, 0.18) 62%, transparent 100%);
  pointer-events: none;
  z-index: 4;
  animation: dailyTomorrowSweep 0.8s ease-out both;
}

@keyframes dailyTomorrowSweep {
  0% { transform: translateX(-115%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(115%); opacity: 0; }
}

/* ── 상태: recoverable = 다시 밝힐 수 있는 흐린 유리 (경고색·카운트다운 금지) ──── */
.dailyPiece[data-state="recoverable"] {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 221, 113, 0.16), transparent 36%),
    linear-gradient(155deg, rgba(139, 143, 113, 0.46), rgba(63, 59, 43, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 244, 193, 0.28), inset 0 -3px 7px rgba(29, 27, 20, 0.3);
}

/* 작은 내부 빛방울 — "다시 밝힐 수 있어요" (경고 아님) */
.dailyPiece[data-state="recoverable"]::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(240, 205, 120, 0.95);
  top: 5px;
  right: 5px;
  box-shadow: 0 0 6px rgba(240, 200, 110, 0.75);
  z-index: 3;
  pointer-events: none;
  animation: dailyGlimmer 3s ease-in-out infinite;
}

@keyframes dailyGlimmer {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

.dailyPiece[data-state="recoverable"] .pieceLabel {
  color: rgba(255, 240, 200, 0.5);
  font-size: 6px;
}

/* ── 상태: recovered_unplayed ──────────────────────────────────────────────── */
.dailyPiece[data-state="recovered_unplayed"] {
  background: rgba(255, 235, 140, 0.16);
  box-shadow: inset 0 0 0 1.5px rgba(200, 170, 60, 0.55), 0 0 10px rgba(200, 170, 60, 0.18);
  z-index: 2;
}

.dailyPiece[data-state="recovered_unplayed"] .pieceLabel {
  color: rgba(255, 248, 200, 0.85);
  text-shadow: 0 1px 3px rgba(80, 50, 0, 0.7);
}

.dailyPiece[data-state="recovered_unplayed"]::before {
  content: "✓";
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 7px;
  color: rgba(255, 235, 140, 0.9);
  font-weight: 900;
  z-index: 3;
  pointer-events: none;
  line-height: 1;
  text-shadow: 0 0 4px rgba(255, 210, 60, 0.6);
}

/* ── 상태: expired = 조용히 닫힌 차가운 석판 (가장 낮은 대비, 광고 버튼처럼 안 보이게) ── */
.dailyPiece[data-state="expired"] {
  background: rgba(206, 208, 214, 0.42);   /* 차가운(푸른 기) 저대비 무광 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 6px rgba(60, 66, 78, 0.14);
  cursor: pointer;
}

.dailyPiece[data-state="expired"] .pieceLabel {
  color: rgba(180, 178, 175, 0.55);
  font-size: 6px;
}

.dailyBoardCaption {
  width: min(100%, 352px);
  margin: 6px auto 0;
  text-align: center;
  color: rgba(255, 248, 220, 0.85);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* ── Today 탭 ──────────────────────────────────────────────────────────────── */
.dailyTodayCard {
  position: relative;
  width: min(100%, 420px);
  min-height: min(560px, calc(100dvh - 218px));
  margin: 0 auto;
  background: none;
  border: none;
  border-radius: 0;
  padding: 6px 2px 10px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  overflow: visible;
  box-sizing: border-box;
}

.dailyTodayCard::before { display: none; }

.dailyTodayCard > * {
  position: relative;
  z-index: 1;
}

.dailyTodayScene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(104px, 30vw, 126px);
  align-items: center;
  min-height: 170px;
  gap: 14px;
  padding: 12px 10px 10px 14px;
}

.dailyTodayCopy {
  min-width: 0;
}

.dailyTodayKicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 31px;
  margin: 0 0 7px -8px;
  padding: 4px 16px 6px;
  box-sizing: border-box;
  background: url('../assets/badge/count_tab.png') center / 100% 100% no-repeat;
  color: #fff2cf;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(40, 20, 4, 0.84);
}

.dailyTodayHint {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  color: #4c3516;
  text-shadow: 0 1px 0 rgba(255, 248, 218, 0.82), 0 2px 5px rgba(255, 250, 225, 0.52);
}

.dailyTodayReward {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  min-height: 96px;
  gap: 14px;
  padding: 13px 24px 14px;
  border-radius: 6px;
  overflow: hidden;
  background: url('../assets/map/card_bg.webp') center / 100% 100% no-repeat;
  border: 0;
  box-shadow: 0 8px 15px rgba(67, 42, 11, 0.24);
}

.dailyTodayReward::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 32%, rgba(255,255,255,.18) 48%, transparent 64% 100%);
  opacity: 0.55;
  pointer-events: none;
}

.dailyPieceToken {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 249, 210, 0.98), rgba(239, 192, 75, 0.94) 58%, rgba(151, 94, 24, 0.86));
  border: 2px solid rgba(255, 232, 150, 0.72);
  border-radius: 8px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.62),
    inset 0 -3px 5px rgba(110, 65, 13, 0.2),
    0 5px 10px rgba(97, 64, 18, 0.24);
  transform: rotate(-2deg);
}

.dailyPieceToken span {
  font-size: 26px;
  font-weight: 950;
  color: #5b380d;
  text-shadow: 0 1px 0 rgba(255, 246, 190, 0.8);
}

.dailyTodayRewardText {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dailyTodayRewardText b {
  color: var(--text);
  font-size: 17px;
}

.dailyTodayRewardText span {
  color: #8a6020;
  font-size: 15px;
  font-weight: 900;
}

.dailyTodayHelper {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: end center;
}

.dailyTodayHelper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(92, 62, 24, 0.22));
}

.dailyTodayTitle {
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255, 248, 218, 0.9), 0 2px 5px rgba(255, 250, 225, 0.54);
}

.dailyTodayMeta {
  margin-top: 4px;
  font-size: 15px;
  color: #5c411c;
  font-weight: 800;
  line-height: 1.4;
  text-shadow: 0 1px 0 rgba(255, 248, 218, 0.82);
}

.dailyTodayMapPanel {
  min-height: 126px;
  padding: 13px 15px 15px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(44, 41, 25, 0.84), rgba(22, 27, 20, 0.88)),
    radial-gradient(90% 110% at 50% 0%, rgba(255, 236, 160, 0.18), transparent 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 208, 0.18),
    inset 0 0 0 2px rgba(204, 163, 58, 0.76),
    0 8px 15px rgba(28, 24, 13, 0.24);
}

.dailyTodayMapHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 11px;
  color: #fff2cf;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(24, 14, 3, 0.9);
}

.dailyTodayMapHead b {
  color: #ffda6e;
  font-size: 15px;
}

/* 미니맵: tileLayout(GR×GC) 그대로 — 금빛 칸이 "전체 그림 속 오늘 조각 위치"를 보여준다 */
.dailyTodayLocator {
  display: grid;
  grid-template-columns: repeat(var(--daily-cols, 9), 26px);
  grid-auto-rows: 26px;
  gap: 5px;
  justify-content: start;
}

.dailyTodayDot {
  position: relative;
  width: auto;
  min-width: 26px;
  height: 26px;
  border-radius: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(7, 43, 80, 0.9);
  background: url('../assets/map/tile_blue.png') center / 100% 100% no-repeat;
  box-shadow: none;
  opacity: 0.55;
}

.dailyTodayDot::after { display: none; }

.dailyTodayDot.cleared {
  opacity: 1;
  filter: saturate(1.05) brightness(1.05);
}

.dailyTodayDot.today,
.dailyTodayDot.recovered_unplayed,
.dailyTodayDot.active {
  opacity: 1;
  filter: hue-rotate(160deg) saturate(1.6) brightness(1.1);
  text-shadow: 0 1px 2px rgba(80, 40, 0, 0.9);
  transform: translateY(-1px);
}

.dailyTodayDone {
  align-self: flex-start;
  margin-top: -2px;
  min-width: 138px;
  min-height: 36px;
  padding: 7px 22px 9px;
  border-radius: 0;
  border: 0;
  background: url('../assets/badge/row_bar.png') center / 100% 100% no-repeat;
  color: #fff2cf;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(18, 78, 34, 0.68);
  box-shadow: none;
  display: none;
}

.dailyTodayCard.done .dailyTodayDone { display: block; }

/* ── Collection 탭 ─────────────────────────────────────────────────────────── */
/* ── Collection 탭 Empty 상태 ─────────────────────────────────────────────── */

.dailyCollectionEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 420px);
  min-height: min(560px, calc(100dvh - 218px));
  gap: 0;
  margin: 0 auto;
  padding: 0 2px 16px;
  box-sizing: border-box;
}

/* 상단 히어로 영역: 정글 배경 위에 Sha + 프레임 미리보기 */
.dailyCollectionHero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 278px;
  margin-bottom: -30px;
}

.dailyCollectionFramePreview {
  position: relative;
  width: min(244px, 66vw);
  aspect-ratio: 421 / 432;
  border: 0;
  box-sizing: border-box;
  background: none;
  filter: drop-shadow(0 10px 14px rgba(22, 32, 18, 0.34));
  overflow: visible;
  flex-shrink: 0;
}

.dailyCollectionFramePreview.has-cover { filter: drop-shadow(0 10px 14px rgba(22, 32, 18, 0.34)) saturate(0.92); }

.dailyCollectionFramePreview::before {
  content: "";
  position: absolute;
  inset: 22% 19% 18%;
  z-index: 0;
  clip-path: polygon(50% 0%, 95% 24%, 86% 76%, 50% 100%, 14% 76%, 5% 24%);
  background:
    linear-gradient(160deg, rgba(239, 248, 232, 0.72), rgba(143, 170, 130, 0.5)),
    radial-gradient(circle at 50% 38%, rgba(255, 248, 188, 0.34), transparent 62%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 220, 0.24),
    inset 0 -12px 18px rgba(68, 94, 55, 0.18);
}

.dailyCollectionFramePreview.has-cover::before {
  background-image:
    linear-gradient(160deg, rgba(242, 252, 232, 0.42), rgba(42, 67, 37, 0.18)),
    var(--daily-cover);
  background-size: cover;
  background-position: center;
  filter: blur(0.5px) saturate(0.9);
  transform: scale(1.02);
}

.dailyCollectionFramePreview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('../assets/gallery/frame.webp') center / contain no-repeat;
  pointer-events: none;
}

.dailyCollectionLock {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 58px;
  height: 84px;
  transform: translate(-50%, -50%);
  background: url('../assets/gallery/locked.webp') center / contain no-repeat;
  filter: drop-shadow(0 4px 7px rgba(56, 32, 92, 0.22));
}

.dailyCollectionLock::before { display: none; }

.dailyCollectionSha {
  position: absolute;
  right: 4px;
  bottom: 14px;
  width: min(112px, 30vw);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(20, 10, 2, 0.28));
  pointer-events: none;
}

/* 텍스트 카드: 불투명 cream — 정글 위에서도 선명하게 */
.dailyCollectionTextCard {
  width: 100%;
  min-height: 168px;
  background: url('../assets/map/card_bg.webp') center / 100% 100% no-repeat;
  border-radius: 6px;
  border: 0;
  box-shadow: 0 10px 18px rgba(72, 44, 11, 0.26);
  padding: 29px 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-align: left;
}

.dailyCollectionEmptyTitle {
  color: #1e1507;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
}

.dailyCollectionEmptyBody {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #5a4118;
}

.dailyCollectionProgressText {
  align-self: flex-start;
  min-height: 34px;
  padding: 6px 16px 8px;
  border-radius: 0;
  color: #fff2cf;
  background: url('../assets/badge/count_tab.png') center / 100% 100% no-repeat;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(40,20,4,.8);
  box-sizing: border-box;
}

/* 완료 작품이 있을 때: 목록보다 전시 작품을 먼저 보여준다. */
.dailyCollectionGallery {
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 2px 0 18px;
}

.dailyCollectionFeature {
  position: relative;
  width: min(100%, 356px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dailyCollectionFeatureFrame {
  position: relative;
  width: min(292px, 82vw);
  aspect-ratio: 2 / 3;
  padding: 6px;
  border: 2px solid #332b18;
  background: #251d12;
  box-shadow:
    0 16px 28px rgba(29,18,6,.35),
    0 0 26px rgba(244,204,99,.11),
    inset 0 0 0 1px rgba(240,205,92,.30);
  isolation: isolate;
}

.dailyCollectionFeatureFrame::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  background:
    linear-gradient(160deg, rgba(239, 248, 232, 0.72), rgba(143, 170, 130, 0.5)),
    radial-gradient(circle at 50% 38%, rgba(255, 248, 188, 0.34), transparent 62%);
}

.dailyCollectionFeatureFrame.has-cover::before {
  background-image:
    linear-gradient(150deg, rgba(255,255,255,.10), transparent 42%),
    var(--daily-cover);
  background-size: cover;
  background-position: center;
}

.dailyCollectionFeatureFrame::after {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 3;
  background: url('../assets/daily/restoration_frame.webp') center / 100% 100% no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(28, 19, 5, 0.3));
}

.dailyCollectionFeatureSeal {
  position: absolute;
  right: 12px;
  bottom: 11px;
  z-index: 4;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #6c400b;
  font-size: 22px;
  font-weight: 900;
  background: radial-gradient(circle at 38% 28%, #fff4b8, #e7bb43 56%, #a86e1b);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 5px 9px rgba(60,35,8,.32);
}

.dailyCollectionFeature:not(.perfectOnDate) .dailyCollectionFeatureSeal {
  opacity: .78;
  filter: saturate(.72);
}

.dailyCollectionFeatureMeta {
  width: min(100%, 338px);
  padding: 13px 18px 14px;
  border-radius: 8px;
  background: rgba(255, 236, 184, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(139, 92, 21, 0.18),
    0 7px 12px rgba(44, 28, 9, 0.2);
}

.dailyCollectionFeatureTitle {
  color: #1e1507;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
}

.dailyCollectionFeatureSub {
  margin-top: 3px;
  color: #684719;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.dailyCollectionTimeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
}

.dailyCollectionTimeline span {
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #5b380d;
  font-size: 11px;
  font-weight: 900;
  background: radial-gradient(circle at 38% 28%, rgba(255,249,210,.98), rgba(239,192,75,.94) 58%, rgba(151,94,24,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* ── Collection 탭 카드 목록 ──────────────────────────────────────────────── */

.dailyCollectionList {
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  gap: 14px;
  margin: 14px auto 0;
  padding: 0 0 18px;
}

.dailyCollectionCard {
  min-height: 116px;
  background: url('../assets/map/card_bg.webp') center / 100% 100% no-repeat;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 15px rgba(72, 44, 11, 0.24);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.12s;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.dailyCollectionCard:active { transform: scale(0.985); }
.dailyCollectionCard:focus-visible {
  outline: 2px solid #c8982a;
  outline-offset: 2px;
}

/* 왼쪽: 세로 썸네일 */
.dailyCollThumb {
  width: 94px;
  height: 140px;
  margin: 13px 0 13px 20px;
  border: 2px solid #a36b17;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
  align-self: center;
  display: block;
  background: linear-gradient(160deg, #2a1d0f, #1a1208);
}

.dailyCollThumbBlank {
  min-height: 90px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 238, 150, 0.45), transparent 28%),
    linear-gradient(160deg, #cfc5ab, #b8ae94);
}

/* 오른쪽: 메타 텍스트 */
.dailyCollMeta {
  flex: 1;
  min-width: 0;
  padding: 21px 24px 21px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  border-left: 0;
}

.dailyCollTitle {
  font-size: 18px;
  font-weight: 900;
  color: #1e1507;
  line-height: 1.25;
  letter-spacing: 0;
}

.dailyCollDates {
  font-size: 13.5px;
  color: #7a6540;
  font-weight: 700;
  line-height: 1.3;
}

/* perfectOnDate: 금빛 강조 */
.dailyCollectionCard.perfectOnDate {
  filter: saturate(1.04) brightness(1.02);
  box-shadow: 0 8px 15px rgba(72, 44, 11, 0.24), 0 0 14px rgba(255, 211, 80, 0.28);
}

.dailyCollectionCard.perfectOnDate .dailyCollMeta {
  border-left-color: rgba(200, 152, 42, 0.25);
}

/* perfectOnDate 왕관/별 표식 */
.dailyCollectionCard.perfectOnDate .dailyCollTitle::after {
  content: " ✦";
  color: #c8982a;
  font-size: 11px;
}

/* 복구 포함 표식 */
.dailyCollRecoveredMark {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sX);
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── 하단 CTA 영역 ─────────────────────────────────────────────────────────── */
.dailyFooter {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 13px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: linear-gradient(0deg, rgba(38, 31, 19, 0.4), rgba(67, 55, 31, 0.12) 62%, transparent);
  z-index: 4;
  pointer-events: none;
  order: 4;
}

.dailyFooter > * { pointer-events: auto; }

/* 광고 복구 횟수 배지 — 압박형 카운터 아님 */
.adCountBadge {
  min-width: 142px;
  min-height: 33px;
  padding: 6px 20px 8px;
  box-sizing: border-box;
  color: #fff2cf;
  background: url('../assets/badge/count_tab.png') center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 2px rgba(40,20,4,.84);
  box-shadow: none;
  display: none;  /* store에 recoverable 조각이 있을 때만 표시 */
}

.adCountBadge.visible { display: inline-block; }

/* 0회일 때: 회색 더 강하게 */
.adCountBadge.exhausted {
  opacity: 0.55;
  filter: saturate(0.4);
}

/* primary CTA — 타이틀 play_btn.webp와 동일한 에셋 + 텍스트 스타일 */
#dailyMainBtn {
  width: 100%;
  max-width: 244px;
  aspect-ratio: 463 / 175;
  border: none;
  border-radius: 0;
  background: url('../assets/title/play_btn.webp') center / 100% 100% no-repeat;
  color: #fffbe8;
  font-size: clamp(16px, 4.4vw, 19px);
  white-space: nowrap;                   /* "오늘 조각 밝히기" 한 줄 유지 */
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  text-shadow:
    1px 1px 0 #25510e, -1px -1px 0 #25510e,
    1px -1px 0 #25510e, -1px 1px 0 #25510e,
    0 3px 6px rgba(0,0,0,.45);
  -webkit-text-stroke: 1.2px #25510e;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 7% 2%;
  transition: transform 0.08s, filter 0.12s;
  cursor: pointer;
}

#dailyMainBtn:active { transition: transform .06s ease-out; transform: scaleX(1.06) scaleY(.90); filter: brightness(0.95); }
#dailyMainBtn:disabled {
  opacity: 0.82;
  cursor: default;
  transform: none;
  filter: saturate(0.52) brightness(0.82);
}

.dailyCtaIcon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: currentColor;
}

#dailyMainBtn[data-state="cleared"]:disabled {
  width: min(100%, 224px);
  max-width: 224px;
  aspect-ratio: 5.2 / 1;
  gap: 8px;
  background: url('../assets/badge/count_tab.png') center / 100% 100% no-repeat;
  color: #eadfc7;
  font-size: 15px;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(39, 27, 12, 0.82);
  -webkit-text-stroke: 0;
  opacity: 0.9;
  filter: grayscale(0.18) saturate(0.54) brightness(0.88);
}

.dailyTomorrowText {
  min-height: 18px;
  margin: 1px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
  color: #8a6020;
}

.dailyTomorrowText:empty { display: none; }

/* ── 빈 시즌 상태 (active season 없음) ────────────────────────────────────── */
.dailyEmptyState {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
}

.dailyEmptyStateCute img {
  width: min(116px, 36vw);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(92, 62, 24, 0.18));
}

.dailyEmptyTitle {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}

.dailyEmptyBody {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

/* ── 시즌 소개 연출 오버레이 (showSeasonIntroAnim) ───────────────────────── */
#dailyIntroOverlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(46, 39, 24, 0.72);
  padding: 32px 24px;
  text-align: center;
  pointer-events: auto;
}

#dailyIntroOverlay.active { display: flex; }

.dailyIntroTitle {
  font-size: clamp(20px, 6vw, 26px);
  font-weight: 950;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--gold-deep), 0 4px 10px rgba(0, 0, 0, 0.55);
  letter-spacing: 0.02em;
}

.dailyIntroSilhouette {
  width: min(48vw, 190px);
  max-height: 46vh;
  aspect-ratio: var(--daily-aspect, 2 / 3);
  border-radius: 8px;
  border: 2px solid rgba(200, 152, 42, 0.4);
  background: linear-gradient(160deg, rgba(220, 210, 185, 0.25), rgba(180, 170, 150, 0.18));
  box-shadow: 0 0 24px rgba(200, 152, 42, 0.2);
}

.dailyIntroSilhouette.has-cover {
  background-image:
    linear-gradient(160deg, rgba(255, 238, 176, 0.26), rgba(47, 38, 21, 0.42)),
    var(--daily-cover);
  background-size: 100% 100%;
  background-position: center;
  filter: saturate(0.58) brightness(0.95);
}

.dailyIntroMsg {
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 240, 200, 0.92);
  line-height: 1.5;
}

/* 1.5초 잠금 상태 */
#dailyIntroOverlay.locked {
  pointer-events: auto;   /* 탭 수신 (skip 의도 저장) */
}
#dailyIntroOverlay.unlocked {
  pointer-events: auto;   /* 탭 → 즉시 전환 */
  cursor: pointer;
}

.dailyIntroSkipHint {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 240, 200, 0.45);
  margin-top: 4px;
  transition: opacity 0.3s;
}

#dailyIntroOverlay.unlocked .dailyIntroSkipHint {
  opacity: 1;
  color: rgba(255, 240, 200, 0.7);
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────────
   모든 애니메이션 중단. 색/밝기/테두리로 상태 의미 유지. */
@media (prefers-reduced-motion: reduce) {
  .dailyPiece[data-state="today"] {
    animation: none;
    box-shadow: var(--lift), var(--sheen), 0 0 12px rgba(200, 152, 42, 0.4);
  }

  .dailyPiece[data-state="recoverable"]::before {
    animation: none;
    opacity: 0.9;
  }

  .dailyShaHelper img,
  .dailyPiece.justRestored,
  .dailyPiece.justRestored::before,
  .dailyPiece.tomorrowGlow::after {
    animation: none;
  }

  @keyframes dailyTodayPulse { }
  @keyframes dailyGlimmer { }
}

/* html[data-motion="reduced"] (JS 설정 따름) — applyStaticText 이후 초기화될 수 있으므로 양쪽 다 */
html[data-motion="reduced"] .dailyPiece[data-state="today"] {
  animation: none;
  box-shadow: var(--lift), var(--sheen), 0 0 12px rgba(200, 152, 42, 0.4);
}

html[data-motion="reduced"] .dailyPiece[data-state="recoverable"]::before {
  animation: none;
  opacity: 0.9;
}

html[data-motion="reduced"] .dailyShaHelper img,
html[data-motion="reduced"] .dailyPiece.justRestored,
html[data-motion="reduced"] .dailyPiece.justRestored::before,
html[data-motion="reduced"] .dailyPiece.tomorrowGlow::after {
  animation: none;
}

/* ── 복구/만료 유물 패널 (dailyRecovery.js .drSheet*) ─────────────────────
   Title-screen visual language: painted jungle behind a centered stone-and-gem tablet, green
   filigree primary action, carved-stone secondary actions. */
.drSheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 220, 102, 0.19), transparent 38%),
    rgba(24, 28, 18, 0.68);
  backdrop-filter: saturate(0.68) brightness(0.78);
  animation: drFade .18s ease both;
}
.drSheet {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 61;
  width: min(382px, calc(100% - 18px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 17px 14px 19px;
  border-style: solid;
  border-width: 34px;
  border-image: url('../assets/common/modal_canvas.webp') 120 fill / 34px / 0 stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 0 36px rgba(255, 216, 82, 0.28), 0 22px 46px rgba(28, 16, 5, 0.52);
  color: #63370f;
  isolation: isolate;
  animation: drRelicIn .46s linear both;
}

.drSheet::before {
  content: "";
  position: absolute;
  inset: -78px -70px;
  z-index: -1;
  background: url('../assets/win/light_burst.webp') center / contain no-repeat;
  opacity: 0.2;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: drAuraTurn 14s linear infinite;
}

.drSheet-close {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  color: #5e3410;
  border: 1px solid #d9a866 !important;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 28%, #fbe6bd, #e9c489 46%, #c98f4e 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.78),
    inset 0 -2px 4px rgba(120,70,20,.42),
    0 3px 6px rgba(40,20,6,.4) !important;
}

.drSheet-close .ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.drSheet-preview {
  position: relative;
  align-self: center;
  width: 102px;
  height: 102px;
  margin-top: 2px;
  border: 3px solid #d5ae50;
  border-radius: 6px;
  background-image:
    radial-gradient(circle at 50% 48%, rgba(255, 228, 122, 0.28), rgba(38, 31, 20, 0.18) 66%),
    var(--dr-piece-art, linear-gradient(155deg, #6b654b, #332f24));
  background-size: cover;
  background-position: var(--dr-piece-x, 50%) var(--dr-piece-y, 50%);
  box-shadow:
    0 0 0 2px #6e4d18,
    inset 0 0 0 1px rgba(255, 246, 190, 0.56),
    0 7px 13px rgba(49, 29, 8, 0.34);
  overflow: hidden;
}

.drSheet-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 222, 0.24), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 224, 111, 0.36), transparent 56%);
  box-shadow: inset 0 -8px 14px rgba(24, 18, 10, 0.22);
  pointer-events: none;
}

.drSheet-preview--recoverable {
  filter: grayscale(0.58) sepia(0.26) saturate(0.38) brightness(0.72) blur(0.35px);
}

.drSheet-preview--expired {
  filter: grayscale(0.72) sepia(0.12) saturate(0.34) brightness(0.68);
  opacity: 0.9;
}

.drSheet[data-state="ready"] .drSheet-preview {
  filter: saturate(1.08) brightness(1.08);
  box-shadow:
    0 0 0 2px #6e4d18,
    inset 0 0 0 1px rgba(255, 246, 190, 0.68),
    0 0 22px rgba(255, 211, 79, 0.58),
    0 7px 13px rgba(49, 29, 8, 0.34);
}

.drSheet-msg {
  margin: 3px 0 0;
  text-align: center;
  font-family: 'Jua', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 4.8vw, 20px);
  line-height: 1.3;
  color: #5e3410;
  text-shadow: 0 1px 0 rgba(255, 246, 205, 0.72);
}

.drSheet-submsg {
  margin: -4px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  color: #91622f;
}

.drSheet-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
}

.drSheet-actions button {
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
}

.drSheet-actions button.primary {
  max-width: 244px;
  aspect-ratio: 467 / 146;
  padding: 0 8% 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../assets/common/btn_green.png') center / 100% 100% no-repeat;
  color: #fffbe8;
  font-size: clamp(15px, 4.5vw, 19px);
  text-shadow:
    1px 1px 0 #25510e, -1px -1px 0 #25510e,
    1px -1px 0 #25510e, -1px 1px 0 #25510e,
    0 3px 5px rgba(0,0,0,.42);
  -webkit-text-stroke: 1px #25510e;
}

.drSheet-actions button.secondary {
  max-width: 216px;
  min-height: 38px;
  padding: 5px 24px 8px;
  background: url('../assets/badge/row_bar.png') center / 100% 100% no-repeat;
  color: #fff2cf;
  font-size: 15px;
  text-shadow: 0 2px 0 #4a3214, 0 2px 4px rgba(0, 0, 0, 0.48);
}

.drSheet-actions button:active {
  transition: transform .06s ease-out;
  transform: scaleX(1.06) scaleY(.90);
  filter: brightness(0.94);
}

.drSheet-actions button:disabled {
  cursor: default;
  filter: grayscale(0.72) brightness(0.66);
  opacity: 0.58;
}

.drSheet-adBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
}
.drSheet-adBadge {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.9;
  -webkit-text-stroke: 0;
}

@keyframes drFade { from { opacity: 0; } to { opacity: 1; } }
/* ⚠️ translate 중앙정렬을 **모든 프레임**이 들고 간다(정본 §4.6 transform 덮어쓰기 함정). */
@keyframes drRelicIn {
  0%   { opacity: 0; transform: translate(-50%, -46%) scaleX(.74) scaleY(.82); animation-timing-function: cubic-bezier(.2,.72,.3,1); }
  52%  { opacity: 1; transform: translate(-50%, -50%) scaleX(1.09) scaleY(.945); animation-timing-function: ease-in-out; }
  76%  { opacity: 1; transform: translate(-50%, -50%) scaleX(.975) scaleY(1.026); animation-timing-function: ease-in-out; }
  92%  { opacity: 1; transform: translate(-50%, -50%) scaleX(1.008) scaleY(.994); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes drAuraTurn { to { transform: rotate(360deg); } }

html[data-motion="reduced"] .drSheet,
html[data-motion="reduced"] .drSheet-backdrop,
html[data-motion="reduced"] .drSheet::before {
  animation: none;
}

/* ═══════════ TABLET / WIDE (≥640px) — matches the app-wide breakpoint defined once in
   styles/app/10-game-screen.css (.mapBar/#hud/.mapScroll etc.). Daily was built later and never
   picked up that rule, so its header/tabs/artwork/CTA stayed pinned at phone width here while the
   map/shop/settings screens right next to it in the same nav visibly widen. Ratios below follow
   10-game-screen.css's own scaling (~1.5x: .mapBar/#hud 460→700, .mapScroll 430/460→660/700). Only
   width-related caps are touched — .artworkFrame keeps its existing clamp()-based height logic. */
@media (min-width: 640px) {
  .dailyHeader   { max-width: 700px; }
  .dailyTabs     { max-width: 420px; }
  .dailyArtworkStage { max-width: 636px; }
  .artworkFrame  { width: min(100%, 560px, var(--daily-height-fit-width, 38vh)); }
}

@media (min-width: 640px) and (min-height: 600px) {
  #dailyMainBtn  { max-width: 252px; }
}

/* Short phones keep the stronger hierarchy while trimming decorative breathing room. */
@media (orientation: portrait) and (max-height: 700px) {
  .dailyTodayCard,
  .dailyCollectionEmpty {
    min-height: calc(100dvh - 206px);
  }

  .dailyTodayScene {
    grid-template-columns: minmax(0, 1fr) 92px;
    min-height: 138px;
    padding-block: 4px;
  }

  .dailyTodayTitle { font-size: 21px; }
  .dailyTodayMeta { font-size: 15px; }
  .dailyTodayHint { margin-top: 6px; font-size: 15px; }
  .dailyTodayReward { min-height: 82px; padding-block: 8px; }
  .dailyPieceToken { width: 56px; height: 56px; }
  .dailyPieceToken span { font-size: 23px; }
  .dailyTodayMapPanel { min-height: 106px; padding-block: 10px; }
  .dailyTodayLocator {
    grid-template-columns: repeat(var(--daily-cols, 9), 22px);
    grid-auto-rows: 22px;
    gap: 4px;
  }
  .dailyTodayDot { min-width: 22px; height: 22px; font-size: 12px; }

  .dailyCollectionHero { min-height: 234px; margin-bottom: -27px; }
  .dailyCollectionFramePreview { width: min(212px, 60vw); }
  .dailyCollectionTextCard { min-height: 150px; padding-block: 22px; }
  .dailyCollectionFeatureFrame { width: min(246px, 72vw); }
  .dailyCollectionFeatureMeta { padding-block: 11px; }
  .dailyCollectionTimeline span { height: 22px; font-size: 10px; }

  .dailyBoardCaption { display: none; }
  #dailyMainBtn { max-width: 214px; font-size: 16px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .dailyHeader {
    padding-top: calc(env(safe-area-inset-top, 0px) + 3px);
    padding-bottom: 2px;
  }

  #dailyBack { width: 44px !important; height: 44px !important; }
  .dailyHeaderTitle { min-height: 40px; line-height: 1.08; font-size: 19px; }
  .dailyHeaderTitle::before { display: none; }
  .dailySeasonDate { height: 34px; font-size: 12px; }

  .dailyTabs { max-width: 420px; padding-top: 2px; padding-bottom: 3px; }
  .dailyTab { height: 31px; font-size: 12px; }
  .dailyTabPane { gap: 5px; padding-top: 4px; padding-bottom: 5px; }
  .dailyBoardStatus { min-height: 26px; }

  .dailyArtworkStage {
    width: min(100%, 32vh);
  }

  .artworkFrame {
    width: 32vh;
  }

  .dailyShaHelper {
    right: -16px;
    bottom: -3px;
    width: 48px;
  }

  .dailyBoardCaption { display: none; }
  .dailyFooter { padding-top: 3px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5px); }
  #dailyMainBtn { max-width: 154px; font-size: 14px; }

  .dailyTodayCard {
    display: grid;
    grid-template-columns: minmax(250px, 1.1fr) minmax(220px, 0.9fr);
    grid-template-rows: auto auto;
    min-height: 0;
    max-width: 700px;
    width: min(100%, 700px);
    gap: 6px 12px;
    padding: 0;
  }

  .dailyTodayScene {
    grid-row: 1 / span 2;
    grid-template-columns: minmax(0, 1fr) 88px;
    min-height: 0;
    padding: 3px 8px 3px 12px;
  }

  .dailyTodayKicker {
    min-width: 78px;
    min-height: 27px;
    margin-bottom: 3px;
    font-size: 10px;
  }

  .dailyTodayTitle { font-size: 20px; }
  .dailyTodayMeta { margin-top: 2px; font-size: 11px; }
  .dailyTodayHint { margin-top: 5px; font-size: 12px; line-height: 1.3; }

  .dailyTodayReward {
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 80px;
    gap: 8px;
    padding: 8px 16px;
  }

  .dailyPieceToken { width: 48px; height: 48px; }
  .dailyPieceToken span { font-size: 20px; }
  .dailyTodayRewardText b { font-size: 14px; }
  .dailyTodayRewardText span { font-size: 11px; }

  .dailyTodayMapPanel {
    min-height: 0;
    padding: 8px 10px 9px;
  }

  .dailyTodayMapHead { margin-bottom: 6px; font-size: 11px; }
  .dailyTodayMapHead b { font-size: 11px; }
  .dailyTodayLocator {
    grid-template-columns: repeat(var(--daily-cols, 9), 19px);
    grid-auto-rows: 19px;
    gap: 3px;
  }
  .dailyTodayDot { min-width: 19px; height: 19px; font-size: 8px; }
  .dailyTodayDone { display: none !important; }

  .dailyCollectionEmpty {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr);
    align-items: center;
    min-height: 0;
    max-width: 700px;
    width: min(100%, 700px);
    gap: 18px;
    padding: 0 4px;
  }

  .dailyCollectionHero {
    min-height: 0;
    height: 214px;
    margin: 0;
  }

  .dailyCollectionFramePreview { width: 194px; }
  .dailyCollectionSha { right: 0; bottom: 8px; width: 84px; }
  .dailyCollectionTextCard {
    min-height: 154px;
    padding: 24px 28px 22px;
  }
  .dailyCollectionEmptyTitle { font-size: 19px; }
  .dailyCollectionEmptyBody { font-size: 13px; }
  .dailyCollectionProgressText { min-height: 30px; font-size: 12px; }

  .dailyCollectionGallery {
    max-width: 700px;
    width: min(100%, 700px);
    padding: 0;
  }

  .dailyCollectionFeature {
    width: min(100%, 700px);
    display: grid;
    grid-template-columns: 210px minmax(260px, 1fr);
    align-items: center;
    gap: 16px;
  }

  .dailyCollectionFeatureFrame {
    width: 194px;
    justify-self: center;
  }

  .dailyCollectionFeatureSeal {
    width: 42px;
    height: 42px;
    font-size: 17px;
  }

  .dailyCollectionFeatureMeta {
    width: 100%;
    padding: 18px 20px;
  }

  .dailyCollectionFeatureTitle { font-size: 19px; }
  .dailyCollectionFeatureSub { font-size: 12px; }
  .dailyCollectionTimeline span { height: 22px; font-size: 10px; }

  .dailyCollectionList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 700px;
    width: min(100%, 700px);
    gap: 10px;
    padding: 0;
  }

  .dailyCollectionCard { min-height: 96px; }
  .dailyCollThumb { width: 72px; height: 74px; margin: 11px 0 11px 16px; }
  .dailyCollMeta { padding: 16px 18px 16px 12px; }
  .dailyCollTitle { font-size: 15px; }
  .dailyCollDates { font-size: 11px; }

  .drSheet {
    max-height: calc(100dvh - 12px);
    gap: 5px;
    padding: 9px 12px 11px;
    border-width: 28px;
    border-image-width: 28px;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .drSheet::-webkit-scrollbar { display: none; }
  .drSheet-preview { width: 72px; height: 72px; }
  .drSheet-msg { font-size: 16px; }
  .drSheet-actions { gap: 4px; margin-top: 1px; }
  .drSheet-actions button.primary { max-width: 198px; font-size: 15px; }
  .drSheet-actions button.secondary { max-width: 190px; min-height: 31px; padding-block: 3px 6px; }
}

/* 데일리 화면의 주 CTA(오늘 조각/다시 밝히기). 위상은 위 #dailyStart와 어긋나게. */
#dailyMainBtn:not(:disabled) { animation: ctaNudge 5.8s ease-in-out 3.6s infinite; }
html[data-motion="reduced"] #dailyMainBtn:not(:disabled) { animation: none; }