/* ════════════════════════════════════════════════════════════════════
   today-ui.css — 「오늘의 운세」(구 「루나의 타로집」) 화면 한 벌
   ────────────────────────────────────────────────────────────────────
   2026-08-27 사람 지시(`「도깨비 마을」변경 저장1.txt`)로 **리스킨에서 재설계로 승격**.
   그 전 판(색만 바꾸던 것)은 산출물 백업에 있다.

   목표(지시 §1) — 고급스러움 70 + 귀여움 30.
     · 일반 웹 대시보드 · 판타지 RPG · 어린이 게임 UI 를 전부 피한다
     · NPC 가 서비스의 중심으로 느껴지게 한다
     · 귀여움은 [이모지 개수]가 아니라 [둥근 모서리 · 부드러운 비율 · NPC 표정 ·
       미세한 반짝임 · 따뜻한 색감 · 작은 인터랙션] 으로 만든다(지시 §13)

   색(지시 §2 · 보라 금지) — 이 규칙은 **2026-09-05 사람 지시로 두 번 갱신됐다**(아래 ★★ 참고).
     옛 정본(참고용으로만 남긴다):
     아이보리 #F8F2E8 · 버터크림 #FFF9F0 · 밀키크림 #FDF6EA
     샴페인 골드 #C9A45F(연한 #E8D29F) — 노란색처럼 쨍하게 쓰지 않는다
     블러시 핑크 #F0D2CB / 피치 #E9BFA5 (타로 쪽 보조 포인트)
     살구빛 크림 #FBEBD8 / 살구 #E7B98A (사주 쪽 보조 포인트)
     초콜릿 브라운 #493322 · 보조 글자 #806B55 · 흐린 글자 #A49582
     경계선 rgba(183,145,84,.20) — 대비를 과하게 만들지 않는다

   ★ 2026-09-05 ①차 지시로 [보라 금지]가 이 화면에 한해 풀렸다 — 라벤더/소프트퍼플을
     새 포인트로 추가(카드 뒷면 .card-back 만 옛 이력 유지).

   ★★ 2026-09-05 ②차(최우선) 지시 — **브라운을 이 화면의 UI 컬러로 쓰는 것 자체를 금지**한다.
     위 옛 정본의 [초콜릿 브라운·보조 글자·흐린 글자·경계선·그림자]가 전부 브라운/황갈색
     계열이었던 것이 문제였다 — 그래서 아래 토큰 값 자체를 [딥 네이비퍼플] 계열로 바꿨다.
     **예외는 딱 하나** — 타로 카드 자체(.card-back 그라데이션·카드 아트 이미지)는 원본
     asset 이라 브라운이 남아 있어도 그대로 둔다(강제로 지우지 않는다). 그 카드를
     **둘러싼** section·container·CTA·border·title 은 전부 아래 새 토큰만 쓴다.
     제목 딥 네이비퍼플 #362F52 · 본문 다크 그레이퍼플 #6B6280 · 보조 뮤트 라벤더그레이 #9791A6
     라벤더 #C9B7E8(연한 #E9E1F7 · 진한 #8B72B8) · 소프트핑크 #F3C9DC(진한 #D97AA6)
     소프트 라벤더블루(학업) #8E9EDB · 경계선 rgba(139,114,184,.20) — 전부 무채색 쪽 그림자다.
   ════════════════════════════════════════════════════════════════════ */

body.today-warm{
  /* ── 색 (2026-09-05 ②차 — 브라운 금지로 전면 교체) ──────────────────── */
  --tw-bg:#F8F2E8;          /* 따뜻한 아이보리 — 유지(브라운 아님) */
  --tw-surface:#FFF9F0;     /* 버터크림 — 메인 카드 */
  --tw-surface2:#FDF6EA;    /* 밀키 크림 */
  --tw-ink:#362F52;         /* 딥 네이비퍼플 — 옛 초콜릿 브라운 대체 */
  --tw-ink2:#6B6280;        /* 다크 그레이퍼플 — 옛 보조 글자 대체 */
  --tw-muted:#9791A6;       /* 뮤트 라벤더그레이 — 옛 흐린 글자 대체 */
  --tw-gold:#C9A45F;        /* 샴페인 골드 — 아이콘·작은 포인트에만(§15 5~10%) */
  --tw-gold-lt:#E8D29F;
  --tw-gold-dp:#A9853F;
  --tw-blush:#F0D2CB;       /* 아주 연한 블러시 핑크 */
  --tw-peach:#E9BFA5;
  --tw-apricot-lt:#FBEBD8;  /* 살구빛 크림 — 사주 */
  --tw-apricot:#E7B98A;
  --tw-espresso:#2A2440;    /* 다크 네이비 — 옛 에스프레소(브라운) 대체. 카드뒷면은 안 씀 */
  --tw-line:rgba(139,114,184,.20);      /* 라벤더 경계선 — 옛 황갈색 경계선 대체 */
  --tw-line-str:rgba(139,114,184,.36);

  /* 2026-09-05 오늘 허브 포인트 — 기분·컨디션·활성 nav·오늘의 운세 카드 전반에 쓴다 */
  --tw-lavender-lt:#E9E1F7;
  --tw-lavender:#C9B7E8;
  --tw-lavender-dp:#8B72B8;
  --tw-softpink:#F3C9DC;
  --tw-pink-dp:#D97AA6;      /* 연애운 포인트 */
  --tw-periwinkle:#8E9EDB;   /* 학업·일운 포인트(소프트 라벤더블루) */

  /* ── 그림자 — 2026-09-05 ②차: 브라운(rgba(120,90,50,x))이었던 것을 무채색 라벤더 톤으로 ── */
  --tw-sh:0 2px 10px rgba(110,95,150,.07);
  --tw-sh2:0 6px 20px rgba(110,95,150,.10);
  --tw-sh3:0 10px 30px rgba(110,95,150,.13);

  /* ── 치수 ───────────────────────────────────────────────────────── */
  --tw-r-lg:26px;           /* 큰 카드 모서리 */
  --tw-r-md:20px;
  --tw-r-sm:14px;
  --tw-topbar:60px;

  /* 기존 화면이 쓰던 style.css 토큰을 이 화면에서만 갈아 끼운다 —
     규칙을 하나하나 다시 쓰지 않아도 카드 앞면·버튼이 같이 따뜻해지고,
     다크모드 뒤집힘(style.css:9 의 prefers-color-scheme)도 함께 사라진다. */
  --bg:var(--tw-bg); --card:var(--tw-surface); --border:var(--tw-line);
  --text:var(--tw-ink); --muted:var(--tw-ink2);
  --accent:var(--tw-gold); --accent2:var(--tw-gold-lt);
  --shadow:var(--tw-sh);
}

/* ══════════════════════════════════════════════════════════════════
   0. 바탕 — body 를 flex 에서 block 으로 되돌린다
   ──────────────────────────────────────────────────────────────────
   ★ 이것이 이번 재설계에서 **가장 중요한 한 줄**이다.
     style.css:17 의 `body{display:flex; flex-direction:column; min-height:100dvh}`
     때문에 본문 요소가 전부 flex 항목이었고, 내용이 화면보다 길면 flex 가
     항목들을 **눌러 줄인다**(flex-shrink 기본 1). 그래서 카드(170x289)가
     세로로 짜부라져 얇은 막대가 되고 그 자리에 흰 여백만 남아 있었다 —
     지시 §4 가 말한 [화면 상단 절반을 차지하는 빈 흰 영역]의 정체가 이것이다.
     (2026-08-27 412x915 헤드리스 캡처로 재현·확인)
   ══════════════════════════════════════════════════════════════════ */
body.today-warm{
  display:block;
  min-height:100dvh;
  padding:calc(var(--tw-topbar) + 14px + env(safe-area-inset-top,0px)) 16px 0;
  gap:0;
  color:var(--tw-ink);
  /* 가장자리에만 아주 약한 자연광 — 가운데는 깨끗하게 둔다 */
  background:
    radial-gradient(120% 58% at 50% -12%, rgba(255,255,255,.9), transparent 62%),
    radial-gradient(96% 46% at 50% 104%, rgba(233,191,165,.16), transparent 64%),
    var(--tw-bg);
  background-attachment:fixed;
}
/* back-home.css:47 의 60px 을 이 화면 값으로 덮는다(상단바 높이가 다르다) */
body.today-warm.backhome-on{
  padding-top:calc(var(--tw-topbar) + 14px + env(safe-area-inset-top,0px));
}
/* 자바스크립트 대체용 뒤로가기 — 상단바가 서면 back-home.css 가 숨긴다 */
body.today-warm .village-back{ display:none; }
body.today-warm:not(.backhome-on) .village-back{
  display:inline-block; margin-bottom:12px; color:var(--tw-ink2);
}

body.today-warm .tw-main{
  width:100%; max-width:376px; margin:0 auto;
  display:flex; flex-direction:column; align-items:stretch; gap:14px;
}
body.today-warm .tw-main > *{ flex:0 0 auto; }
body.today-warm .tw-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ══════════════════════════════════════════════════════════════════
   1. 상단바 (지시 §3) —  ‹ 마을      루나의 타로집      🪙 658
   ──────────────────────────────────────────────────────────────────
   조각은 새로 만들지 않는다. back-home.js(‹ 마을) · bgm-player.js(음악 칩) ·
   coins.js(은화)가 이미 만든 것을 today-ui.js 가 이 한 줄에 모은다.
   여기서는 [그것들이 어떻게 보이나] 만 정한다.
   ══════════════════════════════════════════════════════════════════ */
body.today-warm .ui-topbar{
  height:var(--tw-topbar);
  top:env(safe-area-inset-top,0px);
  left:0; right:0;
  padding:0 calc(10px + env(safe-area-inset-left,0px)) 0 calc(10px + env(safe-area-inset-right,0px));
  gap:8px;
  background:linear-gradient(180deg, rgba(248,242,232,.97) 62%, rgba(248,242,232,0));
  pointer-events:none;
}
body.today-warm .ui-topbar::after{         /* 아주 얇은 베이지 골드 경계선 하나 */
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--tw-line-str) 22%, var(--tw-line-str) 78%, transparent);
  opacity:.7;
}

/* ‹ 마을 — 젤리 그림(어두운 잉크)을 벗기고 크림 알약으로 */
body.today-warm .backhome,
body.today-warm .backhome.jelly{
  border-image:none; border:1px solid var(--tw-line);
  background:rgba(255,255,255,.82);
  color:var(--tw-ink2); box-shadow:var(--tw-sh);
  border-radius:999px; min-height:44px; padding:0 14px;
  font-size:.875rem; font-weight:600; letter-spacing:-.01em;
  filter:none;
}
body.today-warm .backhome:hover{ filter:none; color:var(--tw-ink); }

/* 화면 제목 — 한 줄 가운데. 여기가 이 화면의 이름이다(지시 §3) */
body.today-warm .tw-screen-title{
  flex:1 1 auto; min-width:0;
  margin:0; padding:0 2px;
  font-size:.98rem; font-weight:700; letter-spacing:-.01em;
  color:var(--tw-ink); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.today-warm .tw-screen-title b{ font-weight:700; color:var(--tw-gold-dp); }
/* 상단바에 아직 못 들어갔을 때(스크립트 실패)의 자리 — 흐름 안에서라도 보인다.
   today-ui.js 가 옮기면서 .is-in-topbar 를 붙인다. :not(A B) 같은 4단 선택자를
   쓰지 않는 이유는 하나다 — 구형 WebView 에서 규칙 통째로 무시된다. */
body.today-warm .tw-screen-title{
  width:100%; margin-bottom:10px; pointer-events:none;
}
body.today-warm .tw-screen-title.is-in-topbar{
  width:auto; margin-bottom:0;
}

/* 음악 칩 — 기능은 그대로, [The Card Archive] 글자만 뺀다(지시 §3).
   곡 제목은 aria-label 로 남아 낭독기가 읽는다(today-ui.js). */
body.today-warm .ui-topbar .bgm-chip{
  background:rgba(255,255,255,.82); border:1px solid var(--tw-line);
  color:var(--tw-ink2); box-shadow:var(--tw-sh);
  min-width:44px; width:44px; height:44px; min-height:44px; padding:0;
  justify-content:center; flex:0 0 auto;
}
body.today-warm .ui-topbar .bgm-chip .bgm-chip-title{ display:none; }
body.today-warm .bgm-chip .bgm-eq i{ background:var(--tw-gold); }
body.today-warm .bgm-chip:not(.is-playing) .bgm-eq i{ background:var(--tw-muted); }

/* 은화 — 작고 보조적으로(지시 §3). 초 카운트다운·스트릭은 이 화면에서 숨긴다:
   게임 상태창처럼 보이지 않게 하는 것이 이번 지시의 요점이다. 기능은 살아 있다. */
body.today-warm .ui-topbar .tarot-coin-widget{
  position:static; flex:0 0 auto;
  background:rgba(255,255,255,.82); border:1px solid var(--tw-line);
  color:var(--tw-ink); box-shadow:var(--tw-sh);
  min-height:44px; height:44px; padding:0 13px; font-size:.8rem;
}
body.today-warm .tarot-coin-widget .coin-countdown,
body.today-warm .tarot-coin-widget .coin-streak{ display:none !important; }
body.today-warm .tarot-coin-widget .coin-balance{ color:var(--tw-ink); font-weight:700; }

/*  🪙 (OS 이모지)를 이 화면에서만 전용 아이콘으로 갈아 끼운다 — 지시 §10.
    coins.js 는 이 글자를 다시 쓰지 않으므로(한 번 그리고 끝) CSS 만으로 충분하다.
    ★ 상태를 담은 글자가 아니라서 감춰도 잃는 정보가 없다. 반대로 화면 왼쪽 아래
      음량 버튼의 🔊/🔇 는 **상태 그 자체**라 여기서 건드리지 않았다 —
      그것은 전 화면 공통 조각이고, 바꾸려면 프로젝트 차원의 판정이 먼저다(규칙 2·6).  */
body.today-warm .tarot-coin-widget .coin-icon{
  width:19px; height:19px; font-size:0; flex:0 0 auto;
  background-repeat:no-repeat; background-position:center; background-size:19px 19px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='%23F6E4BE' stroke='%23A9853F' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='5.4' fill='none' stroke='%23C9A45F' stroke-width='1'/%3E%3Cpath d='m12 9.3.9 1.8 1.8.9-1.8.9-.9 1.8-.9-1.8-1.8-.9 1.8-.9z' fill='%23A9853F'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════
   2. 오늘의 카드 메인 스테이지 (지시 §4·§5 · 위계 1순위)
   ══════════════════════════════════════════════════════════════════ */
body.today-warm .tw-stage{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding:14px 16px 16px;      /* 2026-09-05 ③차 §5 — 섹션 높이를 옛 대비 60~70% 로 줄인다 */
  border-radius:var(--tw-r-lg);
  border:1px solid var(--tw-line);
  background:
    radial-gradient(88% 52% at 50% 8%, rgba(255,255,255,.96), transparent 72%),
    radial-gradient(70% 44% at 50% 46%, rgba(240,210,203,.28), transparent 72%),
    var(--tw-surface);
  box-shadow:var(--tw-sh3);
}
/* 카드(왼쪽) + 설명/CTA(오른쪽) 가로 배치. 좁은 화면(§21 320px)에서는 세로로 쌓는다 ── */
body.today-warm .tw-stage-row{
  width:100%; margin-top:10px;
  display:flex; flex-direction:row; align-items:center; gap:14px;
}
body.today-warm .tw-stage-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
body.today-warm .tw-stage-info-text{
  margin:0 0 10px; font-size:.79rem; line-height:1.5; color:var(--tw-ink2); word-break:keep-all;
}
body.today-warm .tw-cta-sm{ max-width:100%; min-height:44px; font-size:.83rem; padding:0 16px; }
body.today-warm .tw-stage-post[hidden]{ display:none; }
body.today-warm .tw-stage-post{ animation:tw-stat-in 320ms ease both; }
body.today-warm .tw-stage-post-name{ margin:0; font-size:.86rem; font-weight:700; color:var(--tw-ink); }
body.today-warm .tw-stage-post-msg{
  margin:3px 0 9px; font-size:.78rem; line-height:1.5; color:var(--tw-ink2); word-break:keep-all;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.today-warm .tw-stage-post-cta{ display:flex; flex-wrap:wrap; gap:4px 12px; }
body.today-warm .tw-link-cta{
  font-size:.76rem; font-weight:700; color:var(--tw-lavender-dp);
  background:none; border:none; padding:2px 0; text-decoration:none;
}
body.today-warm .tw-stage-post-detail{
  margin:8px 0 0; padding:9px 11px;
  border-radius:12px; background:var(--tw-surface2); border:1px solid var(--tw-line);
  font-size:.74rem; line-height:1.55; color:var(--tw-ink2); word-break:keep-all;
}
body.today-warm .tw-stage-post-detail[hidden]{ display:none; }
@media (max-width:379px){
  body.today-warm .tw-stage-row{ flex-direction:column; }
  body.today-warm .tw-stage-info{ width:100%; text-align:center; align-items:center; }
  body.today-warm .tw-stage-post-cta{ justify-content:center; }
}
/* 위쪽 가장자리에 얇은 골드 빛 한 줄 — 액자 같은 고급함은 선 하나면 난다 */
body.today-warm .tw-stage::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,210,159,.9) 30%, rgba(232,210,159,.9) 70%, transparent);
}

body.today-warm .tw-eyebrow{
  margin:0; font-size:.7rem; font-weight:700;
  letter-spacing:.18em; color:var(--tw-gold-dp);
}
body.today-warm .tw-stage-line{
  margin:7px 0 0; max-width:15em;
  font-size:.86rem; line-height:1.5; font-weight:500;
  color:var(--tw-ink2); text-align:center; word-break:keep-all;
}
/* 2026-09-08 개인화 지시 §7 — 있는 데이터만큼만 늘어나는 부제 아래 한 줄(today-personalize.js) */
body.today-warm .tw-stage-context{
  margin:4px 0 0; max-width:17em;
  font-size:.7rem; line-height:1.5; color:var(--tw-muted);
  text-align:center; word-break:keep-all;
}
body.today-warm .tw-stage-context[hidden]{ display:none; }

/* ── 카드 자리 ────────────────────────────────────────────────────
   후광 · 반짝임 둘 · 떠 있는 카드. 이 셋이 전부다(지시 §5 — 과한 파티클·마법진 금지). */
body.today-warm .tw-card-slot{
  position:relative; flex:0 0 auto;
  margin:0;
  display:flex; align-items:center; justify-content:center;
}
body.today-warm .tw-halo{
  position:absolute; z-index:0;
  width:150%; height:118%; left:-25%; top:-9%;
  border-radius:50%;
  background:
    radial-gradient(44% 44% at 50% 50%, rgba(233,191,165,.62), transparent 70%),
    radial-gradient(62% 58% at 50% 54%, rgba(201,164,95,.26), transparent 76%);
  filter:blur(5px);
  animation:tw-breathe 6.4s ease-in-out infinite;
}
@keyframes tw-breathe{
  0%,100%{ opacity:.82; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.045); }
}

body.today-warm .tw-twinkle{
  position:absolute; z-index:2; width:13px; height:13px;
  color:var(--tw-gold-lt); pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(232,210,159,.8));
}
body.today-warm .tw-twinkle-a{ left:6%;  top:12%;  animation:tw-tw 3.8s ease-in-out infinite; }
body.today-warm .tw-twinkle-b{ right:4%; bottom:16%; width:9px; height:9px;
                               color:var(--tw-blush); animation:tw-tw 4.9s ease-in-out 1.6s infinite; }
@keyframes tw-tw{
  0%,72%,100%{ opacity:0;   transform:scale(.5) rotate(0deg); }
  86%        { opacity:.95; transform:scale(1)  rotate(22deg); }
}

body.today-warm .tw-card-float{
  position:relative; z-index:1;
  animation:tw-float 5.2s ease-in-out infinite;   /* 위아래 3px (지시 §5) */
}
@keyframes tw-float{
  0%,100%{ transform:translateY(1.5px); }
  50%    { transform:translateY(-1.5px); }
}

body.today-warm .card-area{
  width:112px; height:190px;      /* 2026-09-05 ③차 §5 — 옛 168x286 대비 약 33% 축소. 비율 1:1.7 유지 */
  flex:0 0 auto;
  transition:transform 280ms cubic-bezier(.22,1.2,.36,1);
}
body.today-warm .card-area.is-pop{ transform:scale(1.045); }  /* 버튼 터치 시 살짝 확대 */
/*  큰 화면에서 카드도 같이 커진다 — 비율 1:1.7 은 그대로, 구간마다 값을 하나씩 준다. */
@media (min-width:700px){
  body.today-warm .card-area{ width:134px; height:228px; }
}
@media (min-width:900px){
  body.today-warm .card-area{ width:148px; height:252px; }
}

/* 카드 뒷면 = 이 화면에서 가장 깊은 색.
   ★ assets/cards/back.webp 를 쓰지 않는다 — 그 그림은 **보라색**이고, 옛 지시 §2 가
     보라를 메인 컬러로 금지해서 갈색+골드로 대신했었다.
   ★ 2026-09-05 ③차(브라운 금지) 지시로 사람이 [카드 뒷면도 바꿔달라]고 재확인 —
     갈색(#52402F 계열) 그라데이션을 딥 네이비(--tw-espresso 계열)로, 금선 액자를
     라벤더 선으로 바꾼다. 달 문양(SVG, today.html) 자체는 손대지 않았다 — 작은
     골드 반짝임 하나는 [아이콘/포인트]로 허용된 범위(§15)라 남긴다. */
body.today-warm .card-back{
  background:
    radial-gradient(64% 44% at 50% 42%, rgba(139,114,184,.24), transparent 72%),
    linear-gradient(168deg, #322A4D 0%, #241E3A 46%, #171326 100%);
  color:transparent; font-size:0;
  border:1px solid rgba(139,114,184,.46);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(30,22,50,.32), inset 0 1px 0 rgba(201,183,232,.22);
  /*  ★ `position:relative` 를 여기 쓰지 않는다. style.css:56 의 `.card-face` 가 이미
      `position:absolute; inset:0` 이고, relative 로 덮으면 카드가 **흐름으로 돌아와
      글자 높이(30px)로 짜부라진다** — 그 자리에 남는 흰 여백이 지시 §4 가 지적한
      [상단의 큰 빈 영역]의 진짜 원인이었다(2026-08-27 실측: .card-inner 286px 인데
      .card-back 30px). absolute 도 ::before/::after 의 기준이 되므로 relative 는
      애초에 필요 없었다. */
}
body.today-warm .card-back::before{           /* 얇은 라벤더 선 액자 두 겹(2026-09-05 ③차 — 옛 금선에서 교체) */
  content:""; position:absolute; inset:9px; border-radius:10px;
  border:1px solid rgba(139,114,184,.46);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,0), inset 0 0 0 4px rgba(201,183,232,.16);
}
/*  ★ 옛 판은 여기에 `content:"☾"` 를 썼다 — OS 글꼴에 딸린 글자라 기기마다 굵기·크기가
    제각각이었다(지시 §10 의 [OS 기본 이모지·문자를 주요 아이콘으로 쓰지 않는다]와 같은 이유).
    지금은 today.html 안의 `.tw-back-mark` SVG 한 장이 그린다. */
body.today-warm .tw-back-mark{
  position:relative; z-index:1;
  width:70%; max-width:124px; height:auto;
  filter:drop-shadow(0 0 14px rgba(232,210,159,.34));
}
/* ── 뒤집힌 뒤(카드 앞면) ─────────────────────────────────────────
   옛 판은 style.css:66 의 [그림 170px + 뜻 max-height 80px] 을 그대로 썼는데,
   카드가 286px 로 줄면서 뜻이 두 줄에서 잘리고 스크롤 막대가 카드 위에 떴다
   (2026-08-27 실측 캡처). 그림을 조금 줄이고 남는 높이를 전부 뜻에 준다.
   막대는 감춘다 — 카드 위의 회색 막대가 이 화면에서 가장 안 어울리는 것이었다. */
body.today-warm .card-front{
  background:var(--tw-surface); border:1px solid var(--tw-line);
  color:var(--tw-ink); border-radius:16px; box-shadow:var(--tw-sh2);
  justify-content:flex-start; padding:11px 11px 9px;
}
body.today-warm .card-front::before{        /* 뒷면과 짝이 되는 얇은 금선 액자 */
  content:""; position:absolute; inset:6px; border-radius:11px;
  border:1px solid rgba(201,164,95,.26); pointer-events:none;
}
/*  120px 인 이유 — 실기기(SM-F966N 커버화면 411px)에서 134 로 두니 [뜻]이 잘렸다.
    기기 한글 글꼴이 데스크톱 크롬보다 줄 높이가 커서 같은 문장이 한 줄 더 먹는다.
    브라우저에서만 재고 끝내면 못 잡는 종류의 차이다(2026-08-27 CDP 실측). */
body.today-warm .card-front .art{
  height:118px; margin-bottom:5px; border-color:rgba(139,114,184,.28);  /* 2026-09-05 ②차 — 카드 아트 프레임선도 라벤더로(아트 이미지 자체는 안 건드림) */
}
body.today-warm .card-front .name-ko{ font-size:.78rem; margin:0 0 1px; line-height:1.2; }
body.today-warm .card-front .name-en{ font-size:.56rem; margin-bottom:2px; }
body.today-warm .card-front .keywords{ font-size:.58rem; color:var(--tw-gold-dp); margin-bottom:0; }
/* 2026-09-05 ③차 §5 — 카드가 작아지면서 [뜻] 전문은 옆 정보 패널(.tw-stage-post)로
   옮겼다. 작은 카드 얼굴 위에 스크롤 문단을 또 넣지 않는다(중복·가독성 저하).
   내용 자체는 지우지 않았다 — #meaning 은 DOM 에 그대로 있고 today-card-ui.js 가
   그 textContent 를 읽어 옆 패널에 쓴다. */
body.today-warm .card-front .meaning{ display:none; }

/* ── 중앙 CTA (지시 §4 — 문구는 [내 카드 만나기]) ─────────────────── */
body.today-warm .tw-cta{
  position:relative; z-index:1;
  width:100%; max-width:238px; min-height:52px; padding:0 20px;
  border:1px solid rgba(139,114,184,.38); border-radius:999px;
  background:linear-gradient(180deg, #F0DCAE 0%, #E2C384 46%, #D5B26C 100%);
  color:#3D2E52; font-size:.98rem; font-weight:700; letter-spacing:-.01em;   /* 2026-09-05 ②차 — 브라운 텍스트 금지, 딥 네이비퍼플로 */
  box-shadow:0 6px 16px rgba(139,114,184,.22), inset 0 1px 0 rgba(255,255,255,.72);
  transition:transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
body.today-warm .tw-cta:hover{ filter:brightness(1.03); }
body.today-warm .tw-cta:active{
  transform:translateY(1.5px);
  box-shadow:0 3px 9px rgba(139,114,184,.2), inset 0 1px 0 rgba(255,255,255,.6);
}
body.today-warm .tw-cta:focus-visible{ outline:2px solid var(--tw-gold-dp); outline-offset:3px; }

/* ══════════════════════════════════════════════════════════════════
   3. NPC 카드 — 루나 / 하연 (지시 §6·§7 · 위계 2·3순위)
   ──────────────────────────────────────────────────────────────────
   둘은 **같은 디자인 시스템**을 쓴다. 다른 것은 보조 색과 초상 하나뿐이다
   (지시 §7 — 두 영역이 다른 서비스처럼 보이면 안 된다).
   ══════════════════════════════════════════════════════════════════ */
body.today-warm .tw-npc-row{
  display:flex; flex-direction:column; gap:14px;
}

body.today-warm .tw-npc{
  --npc-tint:var(--tw-blush);
  --npc-tint2:rgba(240,210,203,.34);
  --npc-ring:rgba(217,122,166,.32);        /* 2026-09-05 ②차 — 옛 살구빛(브라운 계열) 링을 소프트핑크로 */
  --npc-bubble:rgba(243,219,213,.52);
  --npc-bubble-line:rgba(217,122,166,.28); /* 2026-09-05 ②차 — 말풍선 테두리도 소프트핑크로 */

  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px;
  min-height:152px;
  padding:14px 13px 14px 17px;
  border-radius:var(--tw-r-lg);
  border:1px solid var(--tw-line);
  background:
    radial-gradient(78% 100% at 100% 50%, var(--npc-tint2), transparent 68%),
    var(--tw-surface);
  box-shadow:var(--tw-sh2);
  text-decoration:none; color:var(--tw-ink);
  transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color:transparent;
}
body.today-warm .tw-npc.is-saju{
  --npc-tint:var(--tw-apricot);
  --npc-tint2:rgba(251,235,216,.86);
  --npc-ring:rgba(231,185,138,.58);
  --npc-bubble:rgba(249,229,199,.68);
  --npc-bubble-line:rgba(206,161,106,.34);
}
body.today-warm .tw-npc:hover{ border-color:var(--tw-line-str); box-shadow:var(--tw-sh3); }
body.today-warm .tw-npc:active{ transform:translateY(1.5px); box-shadow:var(--tw-sh); }
body.today-warm .tw-npc:focus-visible{ outline:2px solid var(--tw-gold-dp); outline-offset:3px; }

body.today-warm .tw-npc-text{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:4px;
}
body.today-warm .tw-npc-name{
  margin:0; display:flex; align-items:center; gap:7px;
  font-size:.95rem; font-weight:700; color:var(--tw-ink); word-break:keep-all;
}
body.today-warm .tw-npc-name b{ font-weight:700; }
body.today-warm .tw-npc-name i{ font-style:normal; }
body.today-warm .tw-npc-ico{
  flex:0 0 auto; width:19px; height:19px; color:var(--tw-gold);
}
body.today-warm .tw-npc.is-saju .tw-npc-ico{ color:var(--tw-gold-dp); }

/* NPC 대사 — 작은 말풍선 하나.
   지시 §20 이 요구하는 것은 [운세 기능이 모여 있는 앱]이 아니라 [별이와 하연을 만나
   상담을 받는 공간]이다. 같은 문장이라도 말풍선에 담기면 [설명]이 아니라 [말]이 된다.
   ★ 꼬리는 도형을 덧붙이지 않고 **오른쪽 아래 모서리 하나만 각지게** 해서 낸다 —
     초상이 오른쪽에 있으니 그쪽을 향한 말이 된다. 도형을 하나도 안 늘리는 방법이다. */
body.today-warm .tw-npc-quote{
  align-self:flex-start; max-width:100%;
  margin:1px 0 0; padding:6px 10px 7px;
  border-radius:14px 14px 4px 14px;
  background:var(--npc-bubble); border:1px solid var(--npc-bubble-line);
  font-size:.815rem; line-height:1.42; font-weight:600;
  color:var(--tw-ink); word-break:keep-all;
}

body.today-warm .tw-npc-desc{
  margin:0; font-size:.735rem; line-height:1.5; color:var(--tw-muted); word-break:keep-all;
}
body.today-warm .tw-npc-desc b{ font-weight:600; color:var(--tw-ink2); }
body.today-warm .tw-npc-desc i{ font-style:normal; }

body.today-warm .tw-npc-cta{
  margin-top:4px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:3px;
  padding:6px 12px 6px 13px;
  border-radius:999px; border:1px solid rgba(139,114,184,.28);  /* 2026-09-05 ②차 — 브라운 테두리 금지 */
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(253,246,234,.92));
  box-shadow:var(--tw-sh);
  font-size:.79rem; font-weight:700; color:var(--tw-gold-dp); white-space:nowrap;
}
body.today-warm .tw-npc-cta b{ font-weight:700; }
body.today-warm .tw-cta-arrow{ width:14px; height:14px; }
body.today-warm .tw-npc:active .tw-cta-arrow{ transform:translateX(2px); }
body.today-warm .tw-cta-arrow{ transition:transform 160ms ease; }

/* ── 초상 (지시 §6 — 카드 높이의 65~75% · UI 를 가리지 않는다) ────────
   152px 카드에 104px = 68.4%. 폭이 좁아지면 같이 줄어든다(§16 넘침 금지). */
body.today-warm .tw-npc-portrait{
  flex:0 0 auto;
  width:clamp(96px, 32vw, 128px); height:clamp(96px, 32vw, 128px); aspect-ratio:1/1;
  border-radius:50%;
  display:block; position:relative;
  background:radial-gradient(58% 58% at 50% 42%, rgba(255,255,255,.9), transparent 72%);
  box-shadow:0 0 0 1px var(--npc-ring), 0 6px 16px rgba(110,95,150,.16);  /* 2026-09-05 ②차 — 브라운 그림자 금지 */
}
body.today-warm .tw-npc-portrait img{
  width:100%; height:100%; border-radius:50%; display:block; object-fit:cover;
}

/* ══════════════════════════════════════════════════════════════════
   3.5 「오늘의 운세」허브 확장 (2026-09-05 사람 지시)
   ──────────────────────────────────────────────────────────────────
   여기부터는 기존 위계(카드→NPC→nav)를 지우지 않고 **그 앞뒤에 새로 낀** 것이다.
   공통 패널 하나(.tw-panel)를 만들어 아래 여러 카드가 함께 쓴다 —
   같은 반경·테두리·그림자를 매번 다시 적지 않기 위해서다.
   ══════════════════════════════════════════════════════════════════ */
body.today-warm .tw-panel{
  position:relative;
  padding:16px 17px;
  border-radius:var(--tw-r-lg);
  border:1px solid var(--tw-line);
  background:var(--tw-surface);
  box-shadow:var(--tw-sh2);
}
/* 「오늘의 운세」메인 카드 전용 — 2026-09-05 ②차 지시(최우선) [브라운 금지] ·
   크림 → 아주 연한 핑크 → 아주 연한 라벤더로 흐르는 매우 옅은 파스텔.
   다른 tw-panel(미션·행운조각·가이드 등)은 그대로 크림 단색 유지 — 포인트는
   이 카드 하나에만 준다(§15 "전체 카드를 각각 강한 색으로 칠하지 않는다"). */
body.today-warm .tw-panel.tw-fortune-card{
  background:linear-gradient(155deg, var(--tw-surface) 0%, #FBF1F6 52%, var(--tw-lavender-lt) 100%);
  border-color:rgba(139,114,184,.28);
}
body.today-warm .tw-section-title{
  margin:0 0 4px; display:flex; align-items:center; gap:6px;
  font-size:.9rem; font-weight:700; color:var(--tw-ink);
}
body.today-warm .tw-section-title .tw-title-ico{ width:16px; height:16px; color:var(--tw-gold); flex:0 0 auto; }
body.today-warm .tw-section-sub{
  margin:0 0 12px; font-size:.76rem; line-height:1.5; color:var(--tw-muted); word-break:keep-all;
}

/* ── 헤더 아래 인사/날짜 ─────────────────────────────────────────── */
body.today-warm .tw-headline{ margin:0 0 2px; text-align:center; }
body.today-warm .tw-date{ margin:0; font-size:.76rem; font-weight:600; color:var(--tw-muted); }
body.today-warm .tw-greeting{ margin:3px 0 0; font-size:1rem; font-weight:700; color:var(--tw-ink); word-break:keep-all; }
body.today-warm .tw-greeting-sub{ margin:4px 0 0; font-size:.76rem; line-height:1.5; color:var(--tw-ink2); word-break:keep-all; }

/* ── 연속 방문 + 기분 체크 — 2026-09-05 ③차 지시 §3, 한 행에 38 / 62 ────── */
body.today-warm .tw-hero-row{
  display:flex; align-items:stretch; gap:9px;
}
body.today-warm .tw-streak{
  flex:0 1 34%; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  padding:12px 12px;
  border-radius:var(--tw-r-md); border:1px solid var(--tw-line);
  background:linear-gradient(160deg, rgba(243,201,220,.28), rgba(201,183,232,.22));
  box-shadow:var(--tw-sh);
}
body.today-warm .tw-streak-ico{ width:19px; height:19px; color:var(--tw-lavender-dp); flex:0 0 auto; margin-bottom:2px; }
body.today-warm .tw-streak-num{ margin:0; font-size:.92rem; font-weight:700; color:var(--tw-ink); }
body.today-warm .tw-streak-text{ margin:0; font-size:.68rem; line-height:1.35; color:var(--tw-ink2); word-break:keep-all; }

body.today-warm .tw-mood-card{
  flex:1 1 66%; min-width:0;   /* min-width:0 이 없으면 grid 내부 최소폭 때문에 행 전체가 넘친다(2026-09-05 실측) */
  padding:11px 8px;
  border-radius:var(--tw-r-md); border:1px solid var(--tw-line);
  background:var(--tw-surface); box-shadow:var(--tw-sh);
}
body.today-warm .tw-mood-card .tw-section-title{ font-size:.8rem; margin:0 0 7px 3px; }

/* ── 오늘 기분 체크 (5지) ─────────────────────────────────────────── */
body.today-warm .tw-mood-row{
  /* minmax(0,1fr) 이 핵심이다 — 그냥 1fr 은 칸의 최소폭이 [내용의 최소크기]로 정해져서
     좁은 카드 안에서 5칸이 넘친다(2026-09-05 실측 — [모르겠어] 버튼이 화면 밖으로 잘림). */
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:3px;
}
body.today-warm .tw-mood-btn{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-height:54px; padding:6px 0; min-width:0; overflow:hidden;
  border-radius:12px; border:1px solid var(--tw-line);
  background:var(--tw-surface2); color:var(--tw-ink2);
  font-size:.56rem; font-weight:600; line-height:1.15;
  word-break:break-all; text-align:center;
  transition:transform 150ms ease, border-color 150ms ease, background 150ms ease;
  -webkit-tap-highlight-color:transparent;
}
body.today-warm .tw-mood-emoji{ font-size:1.02rem; line-height:1; }
body.today-warm .tw-mood-btn:active{ transform:translateY(1.5px); }
body.today-warm .tw-mood-btn.is-selected{
  border-color:var(--tw-lavender-dp);
  background:linear-gradient(180deg, var(--tw-lavender-lt), var(--tw-surface2));
  color:var(--tw-ink);
  animation:tw-mood-bounce 400ms ease;
}
@keyframes tw-mood-bounce{ 0%{transform:scale(.97)} 55%{transform:scale(1.03)} 100%{transform:scale(1)} }
/* 선택 직후 한 줄 반응(맵 텍스트 · today-mood.js) — fade + slide up */
body.today-warm .tw-mood-reaction{
  margin:9px 0 0; padding:7px 10px;
  border-radius:12px 12px 12px 4px;
  background:var(--tw-lavender-lt); color:var(--tw-ink);
  font-size:.74rem; font-weight:600; line-height:1.4; word-break:keep-all;
  opacity:0; transform:translateY(4px); transition:opacity 220ms ease, transform 220ms ease;
}
body.today-warm .tw-mood-reaction.is-shown{ opacity:1; transform:translateY(0); }
body.today-warm .tw-mood-reaction[hidden]{ display:none; }
/* 2026-09-08 개인화 지시 §4 — "내 선택이 반영됐다"는 작은 확인 표시(today-personalize.js) */
body.today-warm .tw-mood-personal-badge{
  margin:6px 0 0 2px; font-size:.64rem; font-weight:700; color:var(--tw-lavender-dp);
}
body.today-warm .tw-mood-personal-badge[hidden]{ display:none; }

/* 2026-09-08 개인화 지시 §8·§9 — 요즘 나의 흐름(7일 이상 실제 기록이 쌓였을 때만 보인다) */
body.today-warm .tw-flow-entry{
  display:block; width:100%; margin:9px 0 0; padding:9px 12px;
  border-radius:var(--tw-r-sm); border:1px dashed var(--tw-lavender-dp);
  background:var(--tw-lavender-lt); color:var(--tw-lavender-dp);
  font-size:.76rem; font-weight:700; text-align:center;
  -webkit-tap-highlight-color:transparent;
}
body.today-warm .tw-flow-entry[hidden]{ display:none; }
body.today-warm .tw-flow-panel{ margin-top:9px; padding:14px 15px; }
body.today-warm .tw-flow-panel[hidden]{ display:none; }
body.today-warm .tw-flow-list{ margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
body.today-warm .tw-flow-list li{
  font-size:.78rem; line-height:1.5; color:var(--tw-ink2); word-break:keep-all;
  padding-left:1.1em; position:relative;
}
body.today-warm .tw-flow-list li::before{ content:"✦"; position:absolute; left:0; color:var(--tw-gold-dp); }

/* ── 오늘의 운세 요약 ─────────────────────────────────────────────── */
body.today-warm .tw-fortune-headline{
  margin:8px 0 4px; font-size:1rem; font-weight:800; color:var(--tw-ink);
  line-height:1.4; word-break:keep-all;
}
body.today-warm .tw-fortune-line{
  margin:0 0 13px; font-size:.82rem; line-height:1.55; color:var(--tw-ink2); word-break:keep-all;
}
/* 2026-09-08 개인화 지시 §4 — 실제로 반영된 데이터만 적는 확인 문구(today-personalize.js) */
/* 2026-09-30 #292 — 오늘의 운세 카드 ②③ 줄(오늘 피할 것 · 대신 이건 해봐). 카드 폭 안 · 줄바꿈은 허용(잘림 없음) */
body.today-warm .tw-avoid-do{ display:flex; flex-direction:column; gap:8px; margin:0 0 13px; }
body.today-warm .tw-avoid-do[hidden]{ display:none; }
body.today-warm .tw-ad-row{ display:flex; align-items:flex-start; gap:9px; margin:0; }
body.today-warm .tw-ad-ic{ flex:0 0 20px; width:20px; height:20px; margin-top:1px; }
body.today-warm .tw-ad-ic svg{ display:block; }
body.today-warm .tw-ad-row.is-avoid .tw-ad-ic{ color:var(--tw-pink-dp); }
body.today-warm .tw-ad-row.is-do .tw-ad-ic{ color:var(--tw-lavender-dp); }
body.today-warm .tw-ad-body{ display:flex; flex-direction:column; min-width:0; }
body.today-warm .tw-ad-label{ font-size:.66rem; line-height:1.3; color:var(--tw-muted); }
body.today-warm .tw-ad-text{ font-size:.82rem; line-height:1.45; font-weight:700; color:var(--tw-ink); word-break:keep-all; overflow-wrap:anywhere; }
body.today-warm .tw-fortune-personal-note{
  margin:-6px 0 13px; padding:7px 10px;
  border-radius:10px; background:var(--tw-surface2);
  font-size:.7rem; line-height:1.5; color:var(--tw-ink2); word-break:keep-all;
}
body.today-warm .tw-fortune-personal-note[hidden]{ display:none; }
body.today-warm .tw-fortune-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:9px;
}
body.today-warm .tw-fortune-stat{
  position:relative;
  display:flex; flex-direction:column; gap:4px;
  padding:10px 11px;
  border-radius:var(--tw-r-sm); border:1px solid var(--tw-line);
  background:var(--tw-surface);          /* 2026-09-05 ②차 — 네 카드 전부 같은 밝은 크림, 포인트는 아이콘·바에만 */
  animation:tw-stat-in 340ms ease both;
}
@keyframes tw-stat-in{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:translateY(0); } }
body.today-warm .tw-fortune-stat-head{ display:flex; align-items:center; gap:6px; }
body.today-warm .tw-fortune-stat-ico{ width:16px; height:16px; flex:0 0 auto; }
/* 2026-09-05 ③차 지시 §브라운금지·운세4종카드 — 연애 핑크 · 금전 골드 · 학업 라벤더블루 · 컨디션 라벤더 */
body.today-warm .tw-fortune-stat[data-stat="love"]   .tw-fortune-stat-ico{ color:var(--tw-pink-dp); }
body.today-warm .tw-fortune-stat[data-stat="money"]  .tw-fortune-stat-ico{ color:var(--tw-gold-dp); }
body.today-warm .tw-fortune-stat[data-stat="study"]  .tw-fortune-stat-ico{ color:var(--tw-periwinkle); }
body.today-warm .tw-fortune-stat[data-stat="energy"] .tw-fortune-stat-ico{ color:var(--tw-lavender-dp); }
body.today-warm .tw-fortune-stat-label{ font-size:.73rem; font-weight:600; color:var(--tw-ink2); }
body.today-warm .tw-fortune-stat-score{ font-size:1.06rem; font-weight:700; color:var(--tw-ink); }
body.today-warm .tw-fortune-stat-tag{ font-size:.66rem; font-weight:600; color:var(--tw-muted); margin-top:-2px; }
/* 2026-09-08 개인화 지시 §6 — 카드마다 짧은 개인 행동 가이드 한 줄(today-personalize.js) */
body.today-warm .tw-fortune-stat-guide{
  margin:2px 0 0; font-size:.66rem; line-height:1.4; color:var(--tw-ink2); word-break:keep-all;
}
body.today-warm .tw-fortune-stat-guide:empty{ display:none; }
body.today-warm .tw-fortune-stat-bar{ height:5px; border-radius:999px; background:rgba(139,114,184,.14); overflow:hidden; }
body.today-warm .tw-fortune-stat-bar > i{ display:block; height:100%; border-radius:999px; transition:width 500ms ease; }
body.today-warm .tw-fortune-stat[data-stat="love"]   .tw-fortune-stat-bar > i{ background:var(--tw-pink-dp); }
body.today-warm .tw-fortune-stat[data-stat="money"]  .tw-fortune-stat-bar > i{ background:var(--tw-gold); }
body.today-warm .tw-fortune-stat[data-stat="study"]  .tw-fortune-stat-bar > i{ background:var(--tw-periwinkle); }
body.today-warm .tw-fortune-stat[data-stat="energy"] .tw-fortune-stat-bar > i{ background:var(--tw-lavender); }
/* BEST 배지 — 한 화면에 최대 1개(today-fortune.js 가 보장) */
body.today-warm .tw-fortune-stat-best{
  position:absolute; top:-7px; right:8px;
  padding:2px 7px; border-radius:999px;
  background:linear-gradient(180deg, var(--tw-gold-lt), var(--tw-gold));
  color:#3D2E52; font-size:.6rem; font-weight:800; letter-spacing:.02em;   /* 2026-09-05 ②차 — 브라운 텍스트 금지 */
  box-shadow:0 2px 6px rgba(139,114,184,.22);
  animation:tw-spark-in 380ms ease;
}
@keyframes tw-spark-in{ 0%{opacity:0; transform:scale(.6)} 60%{opacity:1; transform:scale(1.12)} 100%{transform:scale(1)} }
body.today-warm .tw-fortune-stat-best[hidden]{ display:none; }

/* ── 오늘의 행운 조각 ─────────────────────────────────────────────── */
body.today-warm .tw-lucky-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:9px;
}
body.today-warm .tw-lucky-item{
  display:flex; align-items:center; gap:9px; min-width:0;
  /* 2026-09-08 실기기 실측 — min-width:0 이 없으면 grid 의 1fr 두 칸이 [행운 한마디]처럼
     긴 nowrap 텍스트가 든 칸 쪽으로 쏠려(149px/251px 실측) 도큐먼트가 가로로 넘치고,
     그 넘침이 position:fixed .ui-topbar 의 뷰포트 계산까지 부풀린다(innerWidth 411→444 ·
     docH 903→3540 실측, SM-F966N 글꼴배율 1.3). `.tw-mood-card`(위 §3.5)와 같은 처방. */
  padding:10px 11px;
  border-radius:var(--tw-r-sm); border:1px solid var(--tw-line);
  background:var(--tw-surface2);
}
body.today-warm .tw-lucky-emoji{ font-size:1.15rem; flex:0 0 auto; }
body.today-warm .tw-lucky-text{ min-width:0; }
body.today-warm .tw-lucky-label{ margin:0; font-size:.66rem; color:var(--tw-muted); }
body.today-warm .tw-lucky-value{
  margin:1px 0 0; font-size:.79rem; font-weight:700; color:var(--tw-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── 오늘의 작은 미션 ─────────────────────────────────────────────── */
body.today-warm .tw-mission-row{ display:flex; align-items:flex-start; gap:11px; }
body.today-warm .tw-mission-emoji{ font-size:1.4rem; flex:0 0 auto; line-height:1; }
body.today-warm .tw-mission-text{ flex:1 1 auto; margin:0; font-size:.85rem; line-height:1.5; color:var(--tw-ink); word-break:keep-all; }
body.today-warm .tw-mission-cta{
  /* 2026-09-05 ③차 지시 §7 — 완료 전은 [라벤더 CTA](옛 골드 아웃라인에서 교체) */
  margin-top:12px; width:100%; min-height:44px;
  border-radius:999px; border:1px solid var(--tw-lavender-dp);
  background:linear-gradient(180deg, rgba(255,255,255,.92), var(--tw-lavender-lt));
  color:var(--tw-lavender-dp); font-size:.84rem; font-weight:700;
  box-shadow:var(--tw-sh); transition:transform 140ms ease, background 140ms ease, color 140ms ease;
}
body.today-warm .tw-mission-cta:active{ transform:translateY(1.5px); }
body.today-warm .tw-mission-cta.is-done{
  border-color:var(--tw-lavender-dp); color:#fff;
  background:linear-gradient(180deg, var(--tw-lavender), var(--tw-lavender-dp));
  animation:tw-mission-pop 420ms ease;
}
@keyframes tw-mission-pop{ 0%{transform:scale(.96)} 55%{transform:scale(1.02)} 100%{transform:scale(1)} }
/* 이번 주 완료 개수 — 실제 저장 데이터가 있을 때만 today-mission.js 가 채운다 */
body.today-warm .tw-mission-streak{
  margin:8px 0 0; font-size:.72rem; font-weight:600; color:var(--tw-lavender-dp);
}
body.today-warm .tw-mission-streak[hidden]{ display:none; }
/* 완료 시 별 2~4개 — 과한 confetti 대신 짧게(§19 150~400ms) */
body.today-warm .tw-mission-sparkles{
  position:relative; display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle;
}
body.today-warm .tw-mission-sparkles i{
  position:absolute; width:8px; height:8px; color:var(--tw-lavender-dp);
  opacity:0; animation:tw-mini-spark 620ms ease forwards;
}
body.today-warm .tw-mission-sparkles i svg{ width:100%; height:100%; }
body.today-warm .tw-mission-sparkles i:nth-child(1){ left:-14px; top:-10px; animation-delay:0ms; }
body.today-warm .tw-mission-sparkles i:nth-child(2){ left:2px;  top:-16px; animation-delay:70ms; color:var(--tw-gold); }
body.today-warm .tw-mission-sparkles i:nth-child(3){ left:16px; top:-6px;  animation-delay:140ms; }
body.today-warm .tw-mission-sparkles i:nth-child(4){ left:-4px; top:-20px; animation-delay:40ms; color:var(--tw-pink-dp); }
@keyframes tw-mini-spark{
  0%{ opacity:0; transform:scale(.3) translateY(2px); }
  40%{ opacity:1; transform:scale(1.05) translateY(-4px); }
  100%{ opacity:0; transform:scale(.7) translateY(-12px); }
}

/* ── 오늘 이렇게 해봐요 / 피하는 게 좋아요 ─────────────────────────── */
body.today-warm .tw-donot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.today-warm .tw-donot-col{
  padding:12px 12px 13px;
  border-radius:var(--tw-r-sm); border:1px solid var(--tw-line);
  background:var(--tw-surface2);
}
body.today-warm .tw-donot-col h3{
  margin:0 0 8px; display:flex; align-items:center; gap:5px;
  font-size:.78rem; font-weight:700; color:var(--tw-ink);
}
body.today-warm .tw-donot-col ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
body.today-warm .tw-donot-col li{ font-size:.73rem; line-height:1.4; color:var(--tw-ink2); word-break:keep-all; padding-left:1.1em; position:relative; }
body.today-warm .tw-donot-col.is-do li::before{ content:"✓"; position:absolute; left:0; color:var(--tw-gold-dp); font-weight:700; }
body.today-warm .tw-donot-col.is-dont li::before{ content:"－"; position:absolute; left:0; color:var(--tw-muted); font-weight:700; }

/* ── 오늘 나에게 필요한 곳 ────────────────────────────────────────── */
body.today-warm .tw-recommend-grid{ display:flex; flex-direction:column; gap:8px; }
body.today-warm .tw-recommend-item{
  display:flex; align-items:center; gap:11px;
  padding:11px 12px;
  border-radius:var(--tw-r-sm); border:1px solid var(--tw-line);
  background:var(--tw-surface2); text-decoration:none;
  transition:transform 150ms ease, border-color 150ms ease;
  -webkit-tap-highlight-color:transparent;
}
body.today-warm .tw-recommend-item:active{ transform:translateY(1.5px); }
body.today-warm .tw-recommend-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--tw-surface); color:var(--tw-gold);
}
body.today-warm .tw-recommend-ico svg{ width:19px; height:19px; }
body.today-warm .tw-recommend-text{ flex:1 1 auto; min-width:0; }
body.today-warm .tw-recommend-name{ margin:0; font-size:.83rem; font-weight:700; color:var(--tw-ink); }
body.today-warm .tw-recommend-desc{ margin:1px 0 0; font-size:.7rem; color:var(--tw-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.today-warm .tw-recommend-item.is-highlight{
  border-color:var(--tw-lavender-dp);
  background:linear-gradient(90deg, var(--tw-lavender-lt), var(--tw-surface2));
}
body.today-warm .tw-recommend-item.is-highlight .tw-recommend-ico{ background:var(--tw-lavender-lt); color:var(--tw-lavender-dp); }
body.today-warm .tw-recommend-badge{
  flex:0 0 auto; font-size:.64rem; font-weight:700; color:var(--tw-lavender-dp);
  padding:3px 8px; border-radius:999px; background:rgba(201,183,232,.28);
}

/* ── 이번 주 운세 미리보기 ────────────────────────────────────────── */
body.today-warm .tw-week-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin-bottom:10px; }
body.today-warm .tw-week-day{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 2px; border-radius:12px;
}
body.today-warm .tw-week-day-name{ font-size:.66rem; font-weight:600; color:var(--tw-muted); }
body.today-warm .tw-week-day-emoji{ font-size:1rem; }
body.today-warm .tw-week-day.is-today{ background:var(--tw-lavender-lt); }
body.today-warm .tw-week-day.is-today .tw-week-day-name{ color:var(--tw-lavender-dp); font-weight:700; }
body.today-warm .tw-week-day{ position:relative; }
body.today-warm .tw-week-best{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  font-size:.52rem; font-weight:800; color:var(--tw-gold-dp);
  letter-spacing:-.02em; white-space:nowrap;
}
body.today-warm .tw-week-best[hidden]{ display:none; }
body.today-warm .tw-week-comment{
  margin:0; padding:9px 11px;
  border-radius:12px 12px 12px 4px;
  background:var(--tw-surface2); border:1px solid var(--tw-line);
  font-size:.75rem; line-height:1.5; color:var(--tw-ink2); word-break:keep-all;
}
body.today-warm .tw-week-more{
  display:inline-flex; align-items:center; gap:2px; margin-top:9px;
  font-size:.76rem; font-weight:700; color:var(--tw-gold-dp); text-decoration:none;
}
body.today-warm .tw-week-more svg{ width:13px; height:13px; }

/* ── 루나 상담(축소) — 기존 .tw-npc 를 그대로 쓰고 높이만 줄인다 ──────── */
body.today-warm .tw-npc.is-compact{ min-height:118px; padding:12px 12px 12px 15px; }
body.today-warm .tw-npc.is-compact .tw-npc-portrait{ width:clamp(76px, 24vw, 96px); height:clamp(76px, 24vw, 96px); }

/* ── 친구에게 공유하기 ────────────────────────────────────────────── */
body.today-warm .tw-share-preview{
  margin-bottom:12px; padding:13px 14px;
  border-radius:var(--tw-r-sm); border:1px dashed var(--tw-line-str);
  background:linear-gradient(160deg, var(--tw-surface2), rgba(243,201,220,.14));
}
body.today-warm .tw-share-preview-head{ font-size:.7rem; font-weight:700; color:var(--tw-muted); margin-bottom:6px; }
body.today-warm .tw-share-preview-line{ font-size:.79rem; font-weight:600; color:var(--tw-ink); margin:2px 0; }
body.today-warm .tw-share-preview-quote{ margin-top:6px; font-size:.75rem; color:var(--tw-ink2); font-style:italic; }
body.today-warm .tw-share-preview-foot{ margin:8px 0 0; font-size:.66rem; font-weight:700; color:var(--tw-muted); text-align:right; }
body.today-warm .tw-share-cta{
  width:100%; min-height:48px;
  border:1px solid rgba(139,114,184,.32); border-radius:999px;
  background:linear-gradient(180deg, #F0DCAE 0%, #E2C384 46%, #D5B26C 100%);
  color:#3D2E52; font-size:.88rem; font-weight:700;   /* 2026-09-05 ②차 — 브라운 텍스트 금지 */
  box-shadow:0 6px 16px rgba(139,114,184,.2);
}
body.today-warm .tw-share-cta:active{ transform:translateY(1.5px); }

/* ── 밤 재방문(조건부) ────────────────────────────────────────────── */
body.today-warm .tw-night-card{ background:linear-gradient(160deg, var(--tw-surface), var(--tw-lavender-lt)); }
body.today-warm .tw-night-options{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:12px 0; }
body.today-warm .tw-night-note{ margin:0 0 4px; font-size:.79rem; color:var(--tw-ink2); word-break:keep-all; }
body.today-warm .tw-night-followup{ margin:8px 0 12px; font-size:.79rem; color:var(--tw-ink); word-break:keep-all; }
body.today-warm .tw-night-cta{
  width:100%; min-height:44px; border-radius:999px;
  border:1px solid var(--tw-lavender-dp); background:var(--tw-lavender);
  color:#fff; font-size:.83rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
body.today-warm .tw-night-cta:active{ transform:translateY(1.5px); }
body.today-warm [hidden]{ display:none !important; }

/* ── 짧은 토스트(공유 복사 안내) — coins.js 의 동명 클래스와 스타일이 겹치지
     않게 이 화면 전용 이름을 쓴다(today-share.js) ─────────────────────── */
body.today-warm .tw-toast{
  position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom,0px) + var(--banner-ad-height,0px));
  transform:translate(-50%, 10px);
  padding:10px 18px; border-radius:999px;
  background:var(--tw-espresso); color:#fff;
  font-size:.79rem; font-weight:600;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  opacity:0; transition:opacity 220ms ease, transform 220ms ease;
  z-index:999; pointer-events:none;
}
body.today-warm .tw-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ══════════════════════════════════════════════════════════════════
   4. 마을 / 카드 사전 / 리딩 기록 (지시 §9 — 작고 둥근 미니 카드 셋)
   ──────────────────────────────────────────────────────────────────
   옛 판은 알약 넷을 한 줄에 욱여넣어 [운 명의 / 마 을로] 처럼 글자가 찢어졌다.
   그래서 셋으로 줄이고(§8 MBTI 제거) 1fr 셋으로 나눠 폭을 균등하게 준다.
   글자는 절대 줄바꿈하지 않는다 — 좁으면 글자가 줄지, 줄이 늘지 않는다.
   ══════════════════════════════════════════════════════════════════ */
body.today-warm .tw-nav{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:9px;
  margin-top:2px;
}
body.today-warm .tw-nav a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:70px; padding:11px 4px 10px;
  border-radius:var(--tw-r-md); border:1px solid var(--tw-line);
  background:linear-gradient(180deg, var(--tw-surface), var(--tw-surface2));
  box-shadow:var(--tw-sh);
  color:var(--tw-ink2); text-decoration:none;
  transition:transform 150ms ease, border-color 150ms ease, color 150ms ease;
  -webkit-tap-highlight-color:transparent;
}
body.today-warm .tw-nav a:hover{ color:var(--tw-ink); border-color:var(--tw-line-str); }
body.today-warm .tw-nav a:active{ transform:translateY(1.5px); }
body.today-warm .tw-nav a:focus-visible{ outline:2px solid var(--tw-gold-dp); outline-offset:3px; }
body.today-warm .tw-nav-ico{ width:24px; height:24px; color:var(--tw-gold); }
body.today-warm .tw-nav a span{
  font-size:clamp(.7rem, 3.1vw, .78rem); font-weight:600; line-height:1;
  white-space:nowrap;                        /* 지시 §16 — 두세 줄로 찢어지지 않게 */
}
/* 현재 탭("오늘") — 2026-09-05 지시 §16, 라벤더/골드 계열로 표시 */
/* 2026-09-05 ③차 지시 §13 — 활성 탭은 [채움]이 아니라 [라벤더 아웃라인 + 작은 별 액센트]로 */
body.today-warm .tw-nav a.is-active{
  position:relative;
  border:1.5px solid var(--tw-lavender-dp);
  background:var(--tw-surface);
  color:var(--tw-ink);
}
body.today-warm .tw-nav a.is-active .tw-nav-ico{ color:var(--tw-lavender-dp); }
body.today-warm .tw-nav a.is-active::after{
  content:""; position:absolute; top:8px; right:12px;
  width:7px; height:7px;
  background:var(--tw-lavender-dp);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ══════════════════════════════════════════════════════════════════
   5. 짧은 안내 + ⓘ (지시 §11) — 전문은 hud-info.js 가 여닫는다
   ══════════════════════════════════════════════════════════════════ */
body.today-warm .tw-note{
  margin:2px 0 0;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:.735rem; line-height:1.5; color:var(--tw-muted);
  text-align:center; word-break:keep-all;
}
body.today-warm .hud-info{
  position:relative; flex:0 0 auto;
  width:22px; height:22px; min-height:22px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--tw-line); border-radius:50%;
  background:rgba(255,255,255,.8); color:var(--tw-gold-dp);
  font-size:.72rem; line-height:1; cursor:pointer;
}
/*  보이는 것은 22px 이지만 손가락이 닿는 자리는 44px 이다 —
    작은 글자 옆의 ⓘ 를 44px 원으로 그리면 안내문보다 커진다. */
body.today-warm .hud-info::after{
  content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
body.today-warm .hud-info:hover{ filter:none; border-color:var(--tw-line-str); }
body.today-warm .hud-note[hidden]{ display:none; }
body.today-warm .hud-note{
  margin:-4px 2px 0;
  padding:12px 14px;
  border:1px solid var(--tw-line); border-radius:var(--tw-r-sm);
  background:rgba(255,255,255,.78);
  box-shadow:var(--tw-sh);
  font-size:.72rem; line-height:1.65; color:var(--tw-ink2);
  word-break:keep-all;
}
body.today-warm .hud-note b{ font-weight:700; color:var(--tw-ink); }

/* ══════════════════════════════════════════════════════════════════
   6. 광고 자리 (지시 §12) — 콘텐츠와 시각적으로 갈라 둔다
   ──────────────────────────────────────────────────────────────────
   배너는 네이티브 오버레이(ads.js)라 여기에 상자를 놓을 수 없다. 대신
   ① 얇은 실선 하나로 [콘텐츠는 여기서 끝] 을 알리고
   ② 광고가 앉을 높이 + 28px 여백을 비워 CTA 와 붙지 않게 한다.
   높이는 ads.js 가 실측해 넣는 --banner-ad-height 를 그대로 읽는다.
   ══════════════════════════════════════════════════════════════════ */
body.today-warm .tw-adzone{
  margin-top:12px;
  height:calc(var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px) + 28px);
  border-top:1px solid var(--tw-line);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
/* style.css:143 의 .has-banner-ad 여백은 이 화면에서 쓰지 않는다 — .tw-adzone 이 그 몫이다 */
body.today-warm.has-banner-ad{ padding-bottom:0; }

/* ══════════════════════════════════════════════════════════════════
   7. 반응형 (지시 §16) — 작은 폰부터 큰 화면까지
   ══════════════════════════════════════════════════════════════════ */

/* 아주 좁은 폰(≤360px) — 초상과 글자를 함께 줄인다. NPC 가 카드 밖으로 넘치지 않는다 */
@media (max-width:360px){
  body.today-warm{ padding-left:12px; padding-right:12px; }
  body.today-warm .tw-npc{ min-height:142px; padding:14px 12px 14px 15px; gap:10px; }
  body.today-warm .tw-npc-name{ font-size:.9rem; }
  body.today-warm .tw-npc-quote{ font-size:.78rem; }
  body.today-warm .tw-npc-desc{ font-size:.7rem; }
  body.today-warm .tw-nav a{ min-height:64px; }
  body.today-warm .card-area{ width:96px; height:163px; }
  body.today-warm .tw-screen-title{ font-size:.92rem; }
  /*  320px 실측 — [‹ 마을] · 음악 · 은화 셋을 그대로 두면 남는 폭이 모자라 제목이
      [루나의 타…] 로 잘렸다. 셋을 조금씩 줄여 제목에 20px 남짓을 돌려준다.
      ★ 선택자를 `.backhome.jelly` 까지 함께 쓰는 이유 — 위 기본 규칙이
        `body.today-warm .backhome.jelly`(0,3,1) 라, 미디어쿼리 안이라도
        `body.today-warm .backhome`(0,2,1) 하나만으로는 padding·font-size 를 못 이긴다.
        미디어쿼리는 특이도를 올려 주지 않는다(2026-08-27 실측으로 확인). */
  body.today-warm .ui-topbar{ gap:6px; padding-left:8px; padding-right:8px; }
  body.today-warm .backhome,
  body.today-warm .backhome.jelly{ padding:0 10px; font-size:.79rem; }
  body.today-warm .ui-topbar .bgm-chip{ width:40px; min-width:40px; }
  body.today-warm .ui-topbar .tarot-coin-widget{ padding:0 9px; font-size:.72rem; gap:4px; }
  body.today-warm .tw-fortune-stat-score{ font-size:.96rem; }
  body.today-warm .tw-mood-row{ gap:6px; }
  body.today-warm .tw-mood-btn{ font-size:.62rem; min-height:54px; }
  body.today-warm .tw-week-grid{ gap:2px; }
  body.today-warm .tw-week-day{ padding:6px 1px; }
}

/* 큰 폰 펼침 · 태블릿 세로 (700~899).
   ★ 이 구간이 **실기기의 기본값**이다 — SM-F966N(Z Fold7) 안쪽 화면을 펼치면
     CSS 폭이 749px 다(2026-08-27 실기기 CDP 실측: innerWidth 749 · dpr 2.625).
     처음엔 여기서 NPC 카드를 두 칸으로 세웠는데, 한 칸이 342px 로 **폰(376px)보다
     좁아져** 글이 세 줄로 접히고 초상 비율이 52.5% 까지 떨어졌다.
     그래서 900px 아래에서는 한 칸을 유지하고 본문 폭만 넓힌다 — 같은 실기기에서
     다시 재니 초상 68.4% 로 계약(§6 65~75%) 안에 들어왔다. */
@media (min-width:700px){
  body.today-warm{ padding-left:24px; padding-right:24px; }
  body.today-warm .tw-main{ max-width:560px; gap:16px; }
  body.today-warm .tw-stage{ padding:18px 20px 20px; }
  body.today-warm .tw-stage-line{ font-size:.94rem; max-width:22em; }
  body.today-warm .tw-npc-row{ gap:16px; }
  body.today-warm .tw-npc{ min-height:158px; }
  body.today-warm .tw-npc-portrait{ width:116px; height:116px; }
  body.today-warm .tw-nav{ gap:14px; }
  body.today-warm .tw-nav a{ min-height:80px; }
  body.today-warm .tw-nav a span{ font-size:.86rem; }
  body.today-warm .tw-note{ font-size:.8rem; }
  /*  카드가 커지면 앞면 그림도 같이 커진다 — 안 그러면 뜻 아래가 텅 빈다
      (2026-08-27 실기기 749px: 340 높이에 그림 134 라 아래 100px 이 비었다).
      ★ 이 세 줄이 **여기** 있어야 한다. 위쪽 `.card-area` 옆에 뒀더니 그 아래의
        `body.today-warm .card-front .art{height:134px}`(같은 특이도·더 뒤)에 그대로 밀렸다. */
  body.today-warm .card-front .art{ height:150px; }
  body.today-warm .card-front .name-ko{ font-size:.86rem; }
  body.today-warm .tw-fortune-grid{ grid-template-columns:repeat(4, 1fr); }
  body.today-warm .tw-lucky-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* 여기서부터 두 칸이 실제로 이득이다 — 한 칸이 420px 넘게 남는다(§19 [큰 화면에서
   불필요한 빈 공간]). 그 아래에서는 세로로 두는 편이 낫다는 것이 위 실측의 결론이다. */
@media (min-width:900px){
  body.today-warm .tw-main{ max-width:860px; }
  body.today-warm .tw-npc-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  body.today-warm .tw-npc{ min-height:186px; }
  body.today-warm .tw-npc-portrait{ width:126px; height:126px; }
  body.today-warm .card-front .art{ height:165px; }
}

/* ── 움직임을 줄여 달라고 한 사람에게는 전부 멈춘다 ─────────────────── */
@media (prefers-reduced-motion: reduce){
  body.today-warm .tw-card-float,
  body.today-warm .tw-halo,
  body.today-warm .tw-twinkle{ animation:none; }
  body.today-warm .tw-twinkle{ opacity:.5; }
  body.today-warm .card-area{ transition:none; }
}

/* 2026-09-30 #292 노출 정리 — [오늘 하나만] 독립 카드: 피할 것 · 대신 이건 을 한 줄씩 굵게 */
body.today-warm .tw-onething .tw-avoid-do{ margin:0; gap:10px; }
body.today-warm .tw-onething .tw-ad-label{ font-size:.7rem; }
body.today-warm .tw-onething .tw-ad-text{ font-size:.95rem; font-weight:800; line-height:1.4; }
body.today-warm .tw-onething{ scroll-margin-top:84px; }   /* 마을 말풍선이 #tw-onething 으로 오면 고정 헤더(뒤로·제목) 밑에 제목이 걸리게 */

/* 919 — 도깨비판 오늘의 운세: 기분 반응 줄의 추천 가게 · 오늘 카드 [카드 저장] 아이콘 */
body.today-warm .tw-mood-reaction .tw-mood-shop{
  display:inline-block; margin:4px 0 0; min-height:36px; padding:6px 12px; border:1px solid var(--tw-line,#e8cfa6);
  border-radius:999px; background:var(--tw-surface,#fff9f0); color:var(--tw-ink,#362f52); font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
}
body.today-warm .tw-panel.s2-hascardsave{ position:relative; }
body.today-warm .s2-cardsave{
  position:absolute; right:10px; top:10px; z-index:2; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e6c9a0; border-radius:999px; background:#fff6e2; color:#8a5a3c; cursor:pointer; box-shadow:0 2px 8px rgba(138,90,60,.18);
}
body.today-warm .s2-cardsave:disabled{ opacity:.55; cursor:default; }
body.today-warm .s2-cardsave svg{ stroke:#8a5a3c; width:22px; height:22px; }