/* ════════════════════════════════════════════════════════════════════
   history.css — 「나의 기록」전면 개편 (2026-09-05 사람 지시)
   ────────────────────────────────────────────────────────────────────
   옛 판(검정/진갈색·개발자 로그 느낌)은 걷는다. 색·치수는 새로 짓지 않고
   today-ui.css(「오늘의 운세」화면)의 --tw-* 토큰을 그대로 물려받는다 —
   그래야 [메인 화면의 라벤더·크림·보라·골드 세계관과 자연스럽게 이어진다].
   그 토큰은 body.today-warm 이 정의하므로 이 파일은 body.hist-page 로
   범위만 좁혀서 얹는다. 기존 데이터 로직(history.js)은 건드리지 않는다.
   ════════════════════════════════════════════════════════════════════ */

body.hist-page{
  /* 아주 은은한 별 입자 — 그림 파일 없이 방사형 그라데이션 점 몇 개만 얹는다.
     화면 대부분은 비워 둔다(사람 지시: "배경 일러스트는 과하지 않게"). */
  background:
    radial-gradient(1.6px 1.6px at 12% 9%, rgba(139,114,184,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 6%, rgba(139,114,184,.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 42% 15%, rgba(201,164,95,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 90% 22%, rgba(139,114,184,.35), transparent 60%),
    radial-gradient(120% 58% at 50% -12%, rgba(255,255,255,.9), transparent 62%),
    radial-gradient(96% 46% at 50% 104%, rgba(201,183,232,.20), transparent 64%),
    var(--tw-bg);
}

/* ── 마을로 버튼 (사람 지시 — "메인 타이틀보다 절대 눈에 띄지 않게" · 2026-09-07
   공통 규격 40~44px 로 재확인) ──────────────────────────────────────────
   back-home.js 가 심는 `.backhome.jelly` 를 이 화면 톤(짙은 보라 반투명)으로
   바꿔 단다. 특이도(3클래스)로 back-home.css 의 공통 규칙을 이기므로
   링크 순서와 무관하게 항상 이긴다. */
body.hist-page .backhome.jelly{
  min-height:40px; padding:0 14px;
  border-style:none; border-width:0; border-image:none;
  border-radius:999px;
  background:rgba(42,32,74,.56);
  color:#f4eefb;
  font-size:14px; font-weight:600;
  box-shadow:0 2px 8px rgba(30,20,55,.22);
  filter:none;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  gap:0;
}
body.hist-page .backhome.jelly:hover{ filter:none; background:rgba(42,32,74,.66); }
body.hist-page .backhome.jelly:active{ filter:none; transform:translateY(1px); }
/* 보이는 상자는 40px 이지만 손가락 자리는 48px 확보 — 히트 영역만 넓힌다(시각적 크기는 그대로). */
body.hist-page .backhome.jelly::before{
  content:""; position:absolute; inset:-4px -6px;
}
body.hist-page .ui-topbar{ align-items:flex-start; }

/* ══════════════════════════════════════════════════════════════════
   1. 헤더 — 🔮 나의 기록 + 자물쇠
   ══════════════════════════════════════════════════════════════════ */
.hist-headline{ text-align:center; padding-top:2px; }
.hist-title-row{
  position:relative; display:flex; align-items:center; justify-content:center;
}
.hist-title{
  /* style.css:37 의 전역 h1 규칙(다른 화면의 우상단 은화 배지를 위한 padding-right:160px)을
     이 화면에서는 되돌린다 — 여기 제목은 코인 배지가 아니라 자물쇠와 나란한 짧은 한 줄이다. */
  margin:0; padding-right:0; width:auto; font-size:1.28rem; font-weight:800; color:var(--tw-ink);
  letter-spacing:.01em;
}
.hist-lock-btn{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:34px; height:34px; min-width:44px; min-height:44px;
  margin-right:-5px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--tw-line); border-radius:50%;
  background:rgba(255,255,255,.75); color:var(--tw-gold-dp);
  cursor:pointer; padding:0;
}
.hist-lock-btn:hover{ border-color:var(--tw-line-str); }
.hist-lock-ico{ width:16px; height:16px; }
.hist-sub{ margin:4px 0 0; font-size:.82rem; color:var(--tw-ink2); }
.hist-lock-note{
  margin:10px auto 0; max-width:300px;
  padding:10px 14px; border-radius:var(--tw-r-sm);
  border:1px solid var(--tw-line); background:rgba(255,255,255,.85);
  box-shadow:var(--tw-sh);
  font-size:.76rem; line-height:1.6; color:var(--tw-ink2);
}
.hist-lock-note.hidden{ display:none; }

/* ══════════════════════════════════════════════════════════════════
   2. 이번 주의 나
   ══════════════════════════════════════════════════════════════════ */
.weekly-summary:empty{ display:none; }
.weekly-summary .weekly-card{
  position:relative; overflow:hidden;
  border-radius:var(--tw-r-lg); border:1px solid var(--tw-line);
  background:linear-gradient(165deg, var(--tw-lavender-lt) 0%, var(--tw-surface) 46%, var(--tw-apricot-lt) 132%);
  box-shadow:var(--tw-sh2);
  padding:16px 18px 15px;
}
.weekly-summary .weekly-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.weekly-summary .weekly-title{
  font-size:.92rem; font-weight:800; color:var(--tw-ink);
}
.weekly-summary .weekly-range{ font-size:.72rem; color:var(--tw-muted); }
.weekly-summary .weekly-headline{
  margin:8px 0 12px; font-size:1.18rem; font-weight:700; color:var(--tw-ink);
}
.weekly-summary .weekly-headline strong{
  color:var(--tw-lavender-dp); font-size:1.4rem; margin:0 2px;
}
.weekly-summary .weekly-stats{ display:flex; flex-wrap:wrap; gap:8px; }
.weekly-summary .weekly-stat-chip{
  flex:1 1 160px;
  padding:8px 12px; border-radius:var(--tw-r-sm);
  background:rgba(255,255,255,.62); border:1px solid var(--tw-line);
}
.weekly-summary .weekly-stat-label{
  display:block; font-size:.68rem; color:var(--tw-muted); margin-bottom:2px;
}
.weekly-summary .weekly-stat-value{
  display:block; font-size:.86rem; font-weight:700; color:var(--tw-ink);
}
.weekly-summary .weekly-empty{
  border-radius:var(--tw-r-lg); border:1px dashed var(--tw-line);
  background:var(--tw-surface);
  text-align:center; padding:16px; font-size:.82rem; color:var(--tw-muted);
}

/* ══════════════════════════════════════════════════════════════════
   3. 필터 칩 — 가로 스크롤 pill
   ══════════════════════════════════════════════════════════════════ */
.hist-filters{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px;
  scrollbar-width:none;
}
.hist-filters::-webkit-scrollbar{ display:none; }
.hist-chip{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  min-height:36px; padding:0 15px;
  border-radius:999px; border:1px solid var(--tw-line);
  background:var(--tw-surface); color:var(--tw-ink2);
  font-size:.82rem; font-weight:600; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.hist-chip .hist-chip-ico{ width:14px; height:14px; }
.hist-chip.is-active{
  background:var(--tw-lavender-dp); border-color:var(--tw-lavender-dp); color:#fff;
}

/* ══════════════════════════════════════════════════════════════════
   4. 기록 타임라인
   ══════════════════════════════════════════════════════════════════ */
.history-list{ display:flex; flex-direction:column; gap:10px; }
.hist-daygroup{ display:flex; flex-direction:column; gap:10px; }
.hist-day-label{
  display:flex; align-items:center; gap:6px;
  margin:6px 0 0; font-size:.78rem; font-weight:700; color:var(--tw-ink2);
}
.hist-day-label .hist-day-ico{ width:14px; height:14px; color:var(--tw-gold); }
.hist-day-label.is-today .hist-day-ico{ color:var(--tw-lavender-dp); }
.hist-day-label .hist-day-date{ font-weight:500; color:var(--tw-muted); }

.hist-empty{
  text-align:center; padding:48px 20px; color:var(--tw-ink2);
}
.hist-empty .hist-empty-ico{ width:34px; height:34px; color:var(--tw-lavender-dp); margin-bottom:8px; }
.hist-empty .hist-empty-title{ font-size:.94rem; font-weight:700; color:var(--tw-ink); margin:0 0 4px; }
.hist-empty .hist-empty-sub{ font-size:.82rem; color:var(--tw-muted); margin:0 0 16px; }
.hist-empty .hist-empty-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 20px; border-radius:999px;
  background:var(--tw-lavender-dp); color:#fff; text-decoration:none;
  font-size:.84rem; font-weight:700;
}

/* ── 기록 카드 (공통 틀) ── */
.hist-card{
  display:flex; gap:12px;
  background:var(--tw-surface); border:1px solid var(--tw-line);
  border-radius:var(--tw-r-md); box-shadow:var(--tw-sh);
  padding:13px 14px;
}
.hist-card.is-clickable{ cursor:pointer; }
.hist-card.is-clickable:hover{ border-color:var(--tw-line-str); }
.hist-card.is-clickable:focus-visible{ outline:2px solid var(--tw-gold-dp); outline-offset:2px; }

.hist-thumb{
  flex:0 0 auto; width:58px; height:58px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--thumb-a, var(--tw-lavender-lt)), var(--thumb-b, var(--tw-lavender)));
  color:var(--thumb-ink, var(--tw-lavender-dp));
}
.hist-thumb .hist-thumb-ico{ width:26px; height:26px; }
.hist-card[data-cat="saju"]     .hist-thumb{ --thumb-a:var(--tw-apricot-lt); --thumb-b:var(--tw-apricot); --thumb-ink:var(--tw-gold-dp); }
.hist-card[data-cat="oracle"]   .hist-thumb{ --thumb-a:#eef0fb; --thumb-b:var(--tw-periwinkle); --thumb-ink:#4b5aa8; }
.hist-card[data-cat="playground"] .hist-thumb{ --thumb-a:var(--tw-gold-lt); --thumb-b:var(--tw-gold); --thumb-ink:#7a5a1e; }
.hist-card[data-cat="worry"]    .hist-thumb{ --thumb-a:#fbeaf1; --thumb-b:var(--tw-softpink); --thumb-ink:var(--tw-pink-dp); }

.hist-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.hist-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hist-badge{
  font-size:.72rem; font-weight:700; color:var(--tw-lavender-dp);
  display:inline-flex; align-items:center; gap:4px;
}
.hist-card[data-cat="saju"]       .hist-badge{ color:var(--tw-gold-dp); }
.hist-card[data-cat="oracle"]     .hist-badge{ color:#4b5aa8; }
.hist-card[data-cat="playground"] .hist-badge{ color:#8a6a1e; }
.hist-card[data-cat="worry"]      .hist-badge{ color:var(--tw-pink-dp); }
.hist-time{ font-size:.7rem; color:var(--tw-muted); white-space:nowrap; }

.hist-card-title{
  margin:0; font-size:.9rem; font-weight:700; color:var(--tw-ink);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.hist-card-line{
  margin:0; font-size:.8rem; line-height:1.5; color:var(--tw-ink2);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:pre-line;
}
.hist-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:1px; }
.hist-tag{
  font-size:.68rem; font-weight:600; color:var(--tw-ink2);
  background:rgba(139,114,184,.10); border-radius:999px; padding:2px 9px;
}
.hist-status{
  align-self:flex-start; font-size:.68rem; font-weight:700; color:var(--tw-pink-dp);
  background:rgba(217,122,166,.12); border-radius:999px; padding:2px 9px; margin-top:1px;
}

.hist-card-foot{ display:flex; justify-content:flex-end; margin-top:2px; }
.hist-revisit{
  display:inline-flex; align-items:center; gap:2px;
  min-height:30px; padding:0 12px; border-radius:999px;
  border:1px solid var(--tw-line-str); background:rgba(255,255,255,.7);
  color:var(--tw-ink); font-size:.74rem; font-weight:700;
  -webkit-tap-highlight-color:transparent;
}
.hist-revisit .tw-nav-ico{ width:12px; height:12px; }

/* ══════════════════════════════════════════════════════════════════
   5. 상세 팝업
   ══════════════════════════════════════════════════════════════════ */
.detail-overlay{
  position:fixed; inset:0; background:rgba(42,32,74,.42); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:2000;
}
.detail-overlay.hidden{ display:none; }
.detail-panel{
  background:var(--tw-surface); border-radius:var(--tw-r-lg); max-width:420px; width:100%;
  max-height:88vh; overflow-y:auto; padding:26px 20px 20px; position:relative;
  box-shadow:0 20px 50px rgba(42,32,74,.30);
  border:1px solid var(--tw-line);
}
.detail-close{
  position:absolute; right:10px; top:8px; background:none; border:none;
  font-size:1.4rem; line-height:1; color:var(--tw-muted); cursor:pointer; padding:4px 8px;
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
}
.detail-close:hover{ color:var(--tw-ink); }

.detail-hero{ font-size:1.02rem; font-weight:800; color:var(--tw-ink); text-align:center; }
.detail-time{ font-size:.74rem; color:var(--tw-muted); text-align:center; margin:2px 0 4px; }
.round-block{ border-top:1px solid var(--tw-line); padding-top:14px; margin-top:14px; }
.round-block:first-child{ border-top:none; margin-top:8px; padding-top:0; }
.round-block .round-spread{
  font-size:.72rem; font-weight:800; color:var(--tw-lavender-dp); text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:8px;
}
.round-q{ margin-bottom:10px; }
.round-q-label{ display:block; font-size:.72rem; font-weight:700; color:var(--tw-muted); margin-bottom:3px; }
.round-q-text{ margin:0; font-size:.9rem; font-weight:700; color:var(--tw-ink); line-height:1.5; }
.round-cardrow{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.round-card-chip{
  font-size:.78rem; font-weight:700; color:var(--tw-lavender-dp);
  background:var(--tw-lavender-lt); border:1px solid var(--tw-line);
  border-radius:999px; padding:5px 12px;
}
.round-body-label{ font-size:.72rem; font-weight:700; color:var(--tw-muted); margin-bottom:3px; }
.round-body-text{ font-size:.86rem; line-height:1.6; color:var(--tw-ink); white-space:pre-wrap; margin-bottom:8px; }
.round-quote{
  border-radius:var(--tw-r-sm); background:var(--tw-lavender-lt);
  padding:10px 13px; margin-top:6px;
}
.round-quote-label{ font-size:.7rem; font-weight:700; color:var(--tw-lavender-dp); margin-bottom:3px; }
.round-quote-text{ margin:0; font-size:.86rem; line-height:1.55; color:var(--tw-ink); white-space:pre-wrap; }

.detail-revisit{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; margin-top:16px; min-height:46px; border:none; border-radius:999px;
  background:var(--tw-lavender-dp); color:#fff; font-size:.86rem; font-weight:700;
  text-decoration:none; cursor:pointer;
}
/*  5차[운명의 기록] 삭제 버튼 — 같은 자리(두 버튼 연속)에서 주 액션과 안 헷갈리게 톤만 낮춘다.
    새 색을 만들지 않는다 — 배경 없이 테두리만, 주 버튼의 색을 글자·테두리로 재사용한다. */
.detail-delete{
  margin-top:10px; background:transparent; border:1px solid var(--tw-lavender-dp);
  color:var(--tw-lavender-dp);
}
/* CHAPTER 6.0B — [운명회의 열기] 는 세 상담사가 함께 보는 특별한 진입점이라, 기존
   라벤더 revisit 버튼과 구분되게 골드 톤만 얹는다(새 색 없음 — --tw-gold* 재사용). */
.detail-council{
  background:linear-gradient(135deg, var(--tw-gold-lt), var(--tw-gold-dp)); color:#2A1A08;
}

/* ---- 반응형(다른 화면과 같은 breakpoint) ---- */
@media (min-width:700px){
  .weekly-summary .weekly-stat-chip{ flex:1 1 auto; }
}

/* 2026-08-20: 배너광고 가림 수정 — 오늘 화면의 .tw-adzone 이 이미 그 몫을 맡는다.
   style.css 의 옛 여백은 이 화면에서 쓰지 않는다(today-ui.css:950 과 같은 원칙). */
body.hist-page.has-banner-ad{ padding-bottom:0; }
/* WO-78 — 제목 앞 달 아이콘(OS 이모지 🔮 를 대신) */
.hist-title-ico{width:22px;height:22px;margin-right:6px;vertical-align:-3px;fill:currentColor}