/* 무렵 — 앱 화면.
 *
 * 설계 기준(2026-09-17): **흰 바탕 · 색 최소 · 광고가 들어갈 자리를 비워 둔다.**
 * 점신을 참조했다 — 옅은 회색 바탕에 흰 카드, 카드마다 「작은 회색 눈썹 → 굵은 검정 제목 →
 * 아이콘 격자/목록」.
 *
 * ⚠ **포인트색은 네이버 연두(#03C75A)다 (2026-09-17, 사용자 지정).** 원래 해질녘 주황이었다.
 * 색은 먹색 + 회색 세 단계 + 이 한 색뿐이고, 오행 다섯 색은 **정보를 나르는 자리**
 * (막대·칩·명식 칸)에서만 쓴다 — 장식으로 안 쓴다.
 *
 * ⚠ **아이콘은 「연한 원 + 먹선 + 연두 면」이다.** 점신이 연노랑 원에 검은 선을 얹어
 * 「그린 것」으로 보이게 하는 그 자리다. 선만 있으면 와이어프레임처럼 보이고,
 * 그 차이가 화면의 완성도를 통째로 가른다(`app/icons.js`).
 *
 * ⚠ **미색을 다시 걷어냈다 (2026-09-17, 사용자: 「바탕의 이런 색은 어울리지가 않고 격조를
 * 떨어뜨리는 것 같아」).** 앞서 「너무 회색」이라는 지적에 한지 톤 미색으로 갔는데 그건 틀린 답이었다.
 * **회색이 문제가 아니라 색이 하나도 없는 게 문제였다.** 미색을 깔면 화면이 누렇게 뜨고
 * 격이 오르는 게 아니라 낡아 보인다. 점신이 실제로 하는 건 **흰 바탕 + 아주 옅은 중성 회색 +
 * 포인트색을 크게 한 번** 쓰는 것이다 — 색은 배너와 아이콘에서 오지 바탕에서 오지 않는다.
 * 그래서 바탕은 흰색으로 돌리고, 회색은 **푸른 기가 아주 살짝 도는 중성**으로 골랐다
 * (순회색은 고른 게 아니라 안 고른 것처럼 읽힌다). 포인트는 연두 하나 그대로.
 *
 * ⚠ **폰 모양으로 가두지 않는다 (2026-09-17, 사용자: 「desktop 에서도 어울리게」).**
 * 좁으면 세로 한 칸 + 아래 탭바, 넓으면 **왼쪽 레일 + 가운데 본문**이다. 같은 DOM 으로
 * 한다 — `#phone` 이 넓은 화면에서 `row-reverse` 가 되면 `#tabs` 가 왼쪽 레일 자리로 간다.
 * 본문은 760px 에서 멈춘다. 넓다고 늘리면 한 줄이 길어져 읽기가 나빠진다.
 *
 * ⚠ **첫 화면만은 두 칸이다 (2026-09-17, 사용자: 「점신 스타일로 다시」).** 점신의 데스크톱
 * 첫 페이지는 **왼쪽이 카피, 오른쪽이 실제 앱 칼럼**이다. 무엇을 파는지 읽으면서 그 물건이
 * 돌아가는 걸 같이 본다 — 설명과 증거가 한 화면에 있다. 로그인 뒤에는 레일 + 본문으로 돌아간다.
 *
 * ⚠ **그림 로고가 없다 (2026-09-17, 사용자: 「로고는 없애줘」).** 워드마크는 글자뿐이다.
 *
 * ⚠ **다시 점신으로 맞췄다 (2026-09-18, 사용자: 「우리 콘텐츠를 가지고 점신과 똑같은 스타일로」).**
 * 카카오에서 가져왔던 **2열 컬러 타일과 세그먼트 필은 점신에 없어서 걷어냈다.**
 * 다만 컬러 타일은 버리지 않고 **가로 스크롤 썸네일로 자리를 옮겼다** — 점신의
 * 「매일 달라지는 심리풀이」 줄이 정확히 그 모양이다.
 * 점신의 구성요소 셋을 그대로 쓴다:
 *   ① **3열 아이콘 격자 — 배지 원이 없다.** 아이콘 자체가 그림이고 면이 크게 깔린다
 *   ② **리스트 행 — 연한 회보라 원형 배지** + 굵은 제목 + 회색 부제 + 칩
 *   ③ **가로 스크롤 썸네일** — 컬러 블록 + 라벨
 * ⚠ **색은 연두 그대로다.** 점신의 노랑 자리에 우리 연두를 넣은 것이고, 포인트색은
 * 앞서 사용자가 정한 값이다(네이버 연두). 구조를 베끼되 색까지 베끼지는 않는다.
 *
 * ── 아래는 카카오에서 가져와 **남긴** 것 ─────────────────────────────
 * 「기존 건 디자인적으로 수준이 낮다」는 지적이 맞았다 — 흰 카드에 작은 아이콘만 있는 화면은
 * 정렬을 아무리 맞춰도 **납작하다.** 카카오가 하는 건 셋이다:
 *   ① **2열 컬러 타일** — 같은 크기 타일을 두 줄로 깔고 **색으로 리듬**을 만든다.
 *      큰 제목 두 줄 + 회색 한 줄 + 오른쪽 아래 큰 그림. 이게 인상을 통째로 바꾼다
 *   ② **세그먼트 필** — 「홈 · 지갑 · 게임」. 고른 칸은 먹색, 나머지는 옅은 회색
 *   ③ **아이콘을 카드 하나에 4열로 몰아 넣는다** — 흩뿌리지 않는다
 * ⚠ **어두운 바탕은 안 가져왔다 (사용자: 「그러나 바탕은 깔끔한 백색으로」).**
 * **바탕은 흰색이고 색은 타일에서만 나온다.** 그래서 카드는 그림자 대신 실선 한 겹으로 세운다 —
 * 흰 바탕에 흰 카드를 그림자로만 띄우면 흐릿해진다.
 */
:root {
  /* 흰 종이 · 옅은 중성 회색 · 먹색 글씨 · 연두 포인트 하나.
     회색에 푸른 기를 아주 조금 섞었다 — 순회색은 고른 게 아니라 안 고른 것처럼 읽힌다. */
  --paper: #FFFFFF; --bg: #FFFFFF; --bg2: #F2F4F7; --card: #FFFFFF;
  /* 타일 넷. 카카오의 흰색·노랑·하늘·남색 자리를 우리 색으로 바꾼 것이다. */
  --chip: #F1F2F7;                              /* 점신의 리스트 배지 — 회보라 한 단계 */
  --t-pt: #E4F7EB; --t-pt-ink: #0C2E1B;
  --t-ink: #1B1E24; --t-ink-ink: #F0F3F6;
  --t-mist: #DFE7F1; --t-mist-ink: #16202C;   /* 흰 타일 옆에 섰을 때 구분되려면 이만큼은 진해야 한다 */

  /* ⚠ **타일 전용 색.** 위 `--t-*` 는 탭 알약·프로필 칩·점수 띠·신호 칸이 함께 쓴다 —
     거기까지 진해지면 화면이 통째로 연두가 되고 「색은 크게 한 번」이 깨진다. `.tl` 만 이걸 읽는다.
     카카오의 구조를 가져왔다: **밝고 채도 높은 둘 + 아주 어두운 하나 + 흰색 하나.**
     옛 값(`#E4F7EB`·`#DFE7F1`)은 흰색에서 채도가 5% 남짓이라 **흰 타일 둘**이나 마찬가지였다 —
     그게 「평범하다」의 정체였다. 노랑 자리에는 우리 연두를 넣는다(색까지 베끼지는 않는다). */
  --tile-pt: #63E2A0;   --tile-pt-ink: #0A2E1C;
  --tile-ink: #23415F;  --tile-ink-ink: #EAF2FA;
  --tile-mist: #A6DCF7; --tile-mist-ink: #12283A;
  --tile-paper: #FFFFFF; --tile-paper-ink: var(--ink);
  --ink: #17181B; --sub: #565A61; --mute: #6D7280; --faint: #9BA1AA;
  --line: #EDEFF2; --line2: #F4F5F7; --edge: #E1E4E9;
  --point: #03C75A; --point-d: #01A44B; --point-soft: #E9F9EF; --point-soft2: #D5F3E1;
  /* 금 — **사용자 지정 (2026-09-23)**: 「황금색 계통의 고급스러운 색상」.
     ⚠ **`--t-*`(타일·탭 알약·칩)와 일부러 나눈다.** 거기까지 금색이 되면 화면이 통째로
        누레지고 「색은 크게 한 번」이 깨진다 — 읽는 곳은 **셋뿐**이다:
     ⚠ **평면 한 색은 금이 아니라 겨자색으로 보인다.** 금은 **빛이 도는 면**이라
        그라디언트로 간다(아이콘에서 배운 그 자리다).
     ⚠ 대비를 재고 골랐다 — `--gold-ink`(#6B4E16) on `#F0DCA8` ≈ 6.0:1, 큰 숫자는 더 진하게. */
  --gold-1: #FDF4DC; --gold-2: #F1DEAC; --gold-3: #E3C57E;
  --gold-ink: #6B4E16; --gold-deep: #4A360D; --gold-edge: #E0C88A;
  --gold-face: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 52%, var(--gold-3) 100%);
  --good: #01A44B; --warn: #B7861C; --bad: #E0503C;
  /* ⚠ **워드마크에만 쓴다.** `app/fonts/` 의 Gowun Batang 은 워드마크 글자만
     담은 서브셋이라(2,960 bytes) 다른 글자는 들어 있지 않다 — 여기 말고 다른 데
     쓰면 그 글자는 조용히 시스템 글꼴로 떨어진다. `brand.js` 의 이름이 바뀌면
     `ui/vendor_fonts.py` 를 다시 돌려야 한다. */
  --serif: 'Gowun Batang', 'Apple SD Gothic Neo', serif;
  /* ⚠ **Noto Sans KR 을 뺐다 (2026-09-23).** 그건 CDN 이 죽었을 때의 대비였는데
     이제 Pretendard 를 우리가 내보내므로 못 받을 일이 없다 — 안 쓰는 대비를
     남겨 두면 다음 사람이 「왜 둘이지」를 찾느라 시간을 쓴다. */
  --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  /* ⚠ **글씨 크기는 이 여덟 단계뿐이다.** 손으로 px 을 적지 않는다 —
     0.5px 차이는 아무 뜻도 안 나르고, 그게 쌓이면 화면이 정리가 안 된 것처럼 보인다.
     24px 을 넘는 건 디스플레이 숫자(점수·입력)라 자 밖에서 직접 적는다. */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-base: 16px;
  --fs-lg: 17px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 23px;
  /* ⚠ 그림자 변수는 지웠다 — 흰 바탕에서 물건을 세우는 건 **실선 한 겹**이다.
     남겨 두면 다음에 누가 그림자를 다시 깐다. 띄워야 할 자리(랜딩의 앱 칼럼)만
     그 자리에서 직접 적는다. */
}
/* ⚠ **굵은 글씨는 700 하나다.** 800 과 700 이 섞이면 어느 쪽도 위계가 안 된다 —
   위계는 **크기와 색**이 만들고 굵기는 「굵다/안 굵다」 두 값만 쓴다. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
/* ⚠ **기본 크기를 자의 base 로 못 박는다.** 안 적으면 브라우저 기본값 16px 이 남아,
   크기를 안 준 자리만 자 밖으로 튄다 — 실제로 온보딩에서 16px 이 섞여 나왔다. */
body { background: var(--bg); font-family: var(--sans); font-size: var(--fs-base); font-weight: 400;
       color: var(--ink); word-break: keep-all; -webkit-font-smoothing: antialiased; }
/* 좁으면 세로 한 칸 + 아래 탭바. */
/* ⚠ 홈 화면에서 띄우면 브라우저 막대가 없어져 **상태표시줄이 화면 위를 덮는다.**
   아래쪽은 이미 `.tabbar` 가 `safe-area-inset-bottom` 을 받고 있었는데 위쪽이 비어 있었다.
   브라우저에서는 이 값이 0 이라 아무것도 안 바뀐다 — 전체화면에서만 자리를 낸다. */
#phone { position: relative; width: 100%; height: 100%; margin: 0 auto; background: var(--bg); display: flex; flex-direction: column; overflow: hidden;
  padding-top: env(safe-area-inset-top); }
#screen { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; scrollbar-width: none; }
#screen::-webkit-scrollbar { display: none; }
/* 가로로 눕힌 노치 폰은 옆도 깎인다. 평소엔 14px 그대로다. */
.pad { padding: 0 max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left)); }
.col { max-width: 720px; margin: 0 auto; }
.gap { height: 9px; }
.deskonly { display: none; }

/* ── 넓은 화면: 왼쪽 레일 + 가운데 본문 ──────────────────────────────
   `row-reverse` 라서 DOM 은 그대로 두고 `#tabs` 만 왼쪽으로 간다. */
@media (min-width: 900px) {
  #phone { flex-direction: row-reverse; }
  #screen { padding: 0 34px; }
  #tabs.tabbar { flex: none; width: 240px; min-width: 240px; height: 100%; flex-direction: column; align-items: stretch;
    border-top: 0; border-right: 1px solid var(--line); padding: 20px 14px; gap: 2px; background: var(--paper); }
  #tabs.tabbar .t { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    height: 46px; padding: 0 13px; border-radius: 12px; font-size: var(--fs-base); font-weight: 700; color: var(--sub); }
  /* 넓은 화면의 레일 — **줄 전체가 알약**이다(안쪽 `.pill` 배경은 끈다) */
  #tabs.tabbar .t.on { background: var(--gold-face); color: var(--gold-deep);
    box-shadow: inset 0 0 0 1px var(--gold-edge); }
  #tabs.tabbar .t .pill { width: auto; height: auto; border-radius: 0; }
  #tabs.tabbar .t.on .pill { background: transparent; }
  #tabs.tabbar .t svg { width: 20px; height: 20px; }
  .deskonly { display: block; }
  #phone:not(.guest) .top, #phone:not(.guest) .hello, #phone:not(.guest) .pad,
  #phone:not(.guest) .segs, #phone:not(.guest) .bigt {
    max-width: 560px; margin-left: 0; margin-right: auto; }
  .top { padding-top: 22px; }
  .hello h1 { font-size: 28px; }
  /* 넓은 화면에서 3열을 카드 폭만큼 벌리면 아이콘 사이가 휑해진다 — 가운데로 모은다. */
  .icons { gap: 3px; }
  .ico .box { width: 56px; height: 56px; }
  .ico .l { font-size: var(--fs-base); }
  .card { padding: 17px 16px 16px; border-radius: 16px; }
  .sheet .in { max-width: 460px; margin: 0 auto; border-radius: 20px; padding-bottom: 22px; }
  .sheet { align-items: center; }
}
@media (min-width: 1280px) {
  #phone:not(.guest) .top, #phone:not(.guest) .hello, #phone:not(.guest) .pad,
  #phone:not(.guest) .segs, #phone:not(.guest) .bigt { max-width: 600px; }
}
/* 넉넉한 화면에서만 카피를 키우고 칼럼을 벌린다. */
@media (min-width: 1180px) {
  .land { gap: 56px; padding: 0 40px 56px; }
  .landL { padding-top: 76px; }
  .landR { width: 396px; padding-top: 26px; }
  .hero h1 { font-size: 45px; }
  .hero .cap { font-size: var(--fs-lg); }
  .pitch .p .t { font-size: var(--fs-lg); }
}

/* ── 워드마크 · 나이테 ─────────────────────────────────────────────── */
/* 워드마크 — 글자뿐이다. 그림 표식은 뺐다. */
.wm { display: inline-flex; align-items: baseline; gap: 7px; color: var(--ink); }
.wm b { font-family: var(--serif); font-size: var(--wm); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
/* ⚠ 워드마크 크기에 비례시켰더니 레일에서 **6.3px** 이 나왔다 — 읽을 수 없는 크기다.
   비례는 큰 자리에서만 맞고 작은 자리에서 무너진다. 자의 최소 단계로 고정한다. */
.wm i { font-family: var(--mono); font-style: normal; font-size: var(--fs-xs); font-weight: 500;
        letter-spacing: .14em; color: var(--mute); }
.railtop { display: flex; align-items: baseline; gap: 9px; padding: 4px 12px 18px; }
.railtop .s { display: none; }
.railfoot { margin-top: auto; padding: 14px 13px 4px; font-size: var(--fs-sm); color: var(--mute); line-height: 1.75; border-top: 1px solid var(--line); }

/* ── 첫 화면 ── 왼쪽 카피 · 오른쪽 앱 칼럼 (점신 구조) ─────────────── */
#phone.guest { background: var(--paper); }
.land { display: flex; flex-direction: column; }
.landL { padding: 24px 18px 0; }
.landR { padding: 22px 0 0; }
.hero .mk { display: flex; align-items: baseline; gap: 10px; }
.hero .cap { font-size: var(--fs-base); color: var(--mute); font-weight: 500; margin-top: 30px; }
.hero h1 { margin: 10px 0 0; font-size: 31px; font-weight: 900; letter-spacing: -.05em; line-height: 1.3; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--point-d); display: block; }
.pitch { margin-top: 26px; display: flex; flex-direction: column; gap: 15px; }
.pitch .p { display: flex; align-items: center; gap: 11px; }
.pitch .p .em { font-size: var(--fs-2xl); width: 24px; flex: none; text-align: center; line-height: 1; }
.pitch .p .t { font-size: var(--fs-lg); color: var(--sub); min-width: 0; }
.pitch .p .t b { color: var(--ink); font-weight: 700; }
.pitch .p .go { margin-left: auto; flex: none; font-size: var(--fs-md); font-weight: 700; color: var(--point-d);
  background: var(--point-soft); border-radius: 8px; padding: 6px 11px; }
.hero .cta { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px;
  border-radius: 13px; background: var(--point); color: #FFF; font-size: var(--fs-lg); font-weight: 700; margin-top: 28px; }
.hero .fine { font-size: var(--fs-md); color: var(--sub); margin-top: 13px; }
.partner { margin-top: 44px; }
.partner h4 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.03em; margin: 0; }
.partner .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.partner .two > div { border: 1px solid var(--edge); border-radius: 13px; padding: 14px 14px 13px; background: var(--paper); }
.partner .two .t { font-size: var(--fs-base); font-weight: 700; letter-spacing: -.03em; }
.partner .two .t b { color: var(--point-d); }
.partner .two .s { font-size: var(--fs-md); color: var(--sub); margin-top: 6px; line-height: 1.65; }

/* 앱 칼럼 — 랜딩 오른쪽에서 실제 화면이 돈다 */
.appcol { background: var(--bg); padding: 4px 10px 12px; }
.appcol .pad { padding: 9px 4px 4px; }
.appcol .banner { margin: 0 4px; }
.acbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 5px 2px; }
.acbar .d { font-size: var(--fs-sm); color: var(--sub); }
.acbar .who { padding: 3px 10px 3px 3px; border-radius: 16px; }
.acbar .who .av { width: 22px; height: 22px; border-radius: 11px; font-size: var(--fs-xs); }
.acbar .who .nm { font-size: var(--fs-md); }
.acbar .who .cv { font-size: var(--fs-xs); color: var(--point-d); }
.achead { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.04em; padding: 8px 5px 12px; }
.tabstrip { display: none; }

@media (min-width: 900px) {
  #phone.guest { flex-direction: column; }
  #phone.guest > #tabs { display: none; }
  #phone.guest #screen { padding: 0; }
  .land { flex-direction: row; gap: 34px; max-width: 1220px; margin: 0 auto;
          padding: 0 26px 48px; align-items: flex-start; }
  .landL { flex: 1; min-width: 0; padding: 58px 0 0; }
  .landR { flex: none; width: 366px; padding-top: 22px; }
  .hero h1 { font-size: 36px; }
  .hero .cap { font-size: var(--fs-lg); }
  .pitch .p .t { font-size: var(--fs-lg); }
  .appcol { border-radius: 20px; overflow: hidden; box-shadow: 0 16px 48px rgba(20, 24, 34, .11); padding-bottom: 0; }
  .appcol .card { border-radius: 14px; padding: 15px 14px 14px; }
  .appcol .icons { max-width: none; }
  .appcol .ico .box { width: 48px; height: 48px; }
  .appcol .ico .l { font-size: var(--fs-sm); }
  .tabstrip { display: flex; background: var(--card); border-top: 1px solid var(--line); height: 56px;
              margin: 10px -10px 0; align-items: stretch; }
  .tabstrip .t { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
                 gap: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--mute); }
  .tabstrip .t .pill { display: flex; align-items: center; justify-content: center; width: 44px; height: 26px; border-radius: 13px; }
  /* 첫 화면의 앱 칼럼이 그리는 탭 띠 — **진짜 탭과 같은 색이어야** 같은 물건으로 읽힌다 */
  .tabstrip .t.on { color: var(--gold-deep); font-weight: 700; }
  .tabstrip .t.on .pill { background: var(--gold-face); }
}

/* 앱 칼럼 맨 위 띠 — 점신이 일러스트 배너를 놓는 자리. 우리는 문장을 놓는다. */
.banner { border-radius: 16px; padding: 18px 16px 16px; color: #06331B; overflow: hidden;
  background: linear-gradient(135deg, #CCF4DD 0%, #A9EAC5 52%, #8CDFB0 100%); }
.banner .eb { font-size: var(--fs-sm); font-weight: 700; color: #0A7040; letter-spacing: -.01em; }
.banner h3 { margin: 7px 0 0; font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -.045em; line-height: 1.38; }
.banner .cta { display: inline-flex; align-items: center; gap: 3px; margin-top: 13px; background: #FFF;
  color: var(--point-d); border-radius: 999px; padding: 8px 15px; font-size: var(--fs-md); font-weight: 700; }

.tap { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s ease, transform .1s ease; user-select: none; }
.tap:active { transform: scale(.99); }
.tap:focus-visible { outline: 2px solid var(--point); outline-offset: 2px; border-radius: 10px; }
.fade { animation: fade .24s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.pop { animation: pop .36s cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .fade, .pop, .tap { animation: none !important; transition: none !important; } }

/* ── 머리 · 로그인한 사람 ───────────────────────────────────────────── */
.top { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; }
.top .sp { margin-left: auto; display: flex; gap: 6px; }
/* ⚠ **사람이 하나면 칩 대신 화면 이름이 선다.** 눌러도 아무 일이 없는 칩을
   화면 맨 위에 두지 않는다 — 고를 사람이 둘 이상일 때만 칩이 나온다. */
.top .scr { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.03em; }
.top .ic { width: 36px; height: 36px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; position: relative; color: var(--ink); }
.top .ic:hover { background: var(--bg2); }
.top .ic .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 4px; background: var(--point); box-shadow: 0 0 0 2px #FFF; }
/* 로그인 칩 — 「지금 누구 걸로 보고 있나」가 늘 보여야 한다 */
/* 프로필 칩도 타일과 같은 말을 쓴다 — 실선 한 겹 + 아바타는 연두 타일색. */
.who { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 19px; padding: 4px 12px 4px 4px; }
.who:hover { background: var(--bg2); }
.who .av { width: 28px; height: 28px; border-radius: 14px; background: var(--t-pt); color: var(--t-pt-ink); font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.who .nm { font-size: var(--fs-base); font-weight: 700; letter-spacing: -.02em; }
.who .cv { font-size: var(--fs-xs); color: var(--mute); margin-left: 1px; }
.hello { padding: 6px 16px 12px; }
/* ⚠ 인사말을 뺀 자리 — 날짜·계산 시각 한 줄만 남는다. 여백을 줄여 총평이 바로 붙게 한다. */
.hello.slim { padding: 2px 16px 8px; }
.hello .d { font-size: var(--fs-md); color: var(--sub); font-weight: 600; }
/* ⚠ 색이 「누를 수 있는지」를 말한다 — 사람 바꾸기 화살표만 포인트색이다 */
.hello .d .cv { color: var(--point-d); margin-left: 2px; }
.hello h1 { margin: 5px 0 0; font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.04em; line-height: 1.32; }
.hello .s { font-size: var(--fs-md); color: var(--sub); margin-top: 6px; line-height: 1.6; }

/* ── 세그먼트 필 — ⚠ 지금은 **안 쓴다** (점신에 없는 요소라 2026-09-18 에 뺐다).
   규칙만 남겨 둔다: 카테고리가 더 늘어 한 화면에 안 들어가면 다시 꺼내 쓸 자리다. ── */
.segs { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 2px 14px 14px; }
.segs::-webkit-scrollbar { display: none; }
.segs .sg { flex: none; height: 38px; padding: 0 17px; border-radius: 19px; background: var(--bg2);
  color: var(--sub); font-size: var(--fs-base); font-weight: 700; letter-spacing: -.02em;
  display: flex; align-items: center; }
.segs .sg.on { background: var(--gold-face); color: var(--gold-deep); }

/* ── 2열 컬러 타일 — 카카오뷰 격자 ─────────────────────────────────── */
/* 가로 스크롤 썸네일 — 점신의 「매일 달라지는 심리풀이」 줄.
   카드 폭을 고정하고 넘치면 옆으로 민다. 2열 격자로 쓰던 걸 옮겼다. */
.tiles2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
/* ⚠ **타일을 줄였다 (2026-09-26, 사용자: 「박스 크기가 커서 … 다음을 보기 위해서는 밑으로 스크롤해야」).**
   188px 이던 걸 146px 로 — 한 화면에 한 줄(두 칸)이 더 들어온다. 그림도 68 → 54.
   ⚠ **글자와 그림이 부딪히지 않게** 부제 폭을 76% → 72% 로 같이 좁혔다(좁은 폰에서 줄 상자로 쟀다). */
.tl { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 14px 13px;
      min-height: 146px; display: flex; flex-direction: column; }
.tl .t { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.04em; line-height: 1.32; }
.tl .s { font-size: var(--fs-md); line-height: 1.5; margin-top: 5px; opacity: .92; max-width: 72%; }
/* 그림이 픽토그램에서 캐릭터로 바뀌면서 커졌다 — 카카오도 이 자리를 크게 쓴다.
   투명도를 안 깐다: 흰 몸통이 남색 위에서 떠 주는 구조라 흐리면 그 효과가 죽는다. */
/* ⚠ **그림 껍데기를 블록으로 둔다.** 인라인이면 베이스라인 아래 여백(descender)만큼
   SVG 가 아래로 밀려 타일 밖으로 잘린다 — 「겹쳐 보기」의 막대가 실제로 그렇게 잘렸다.
   위치는 `.art` 가 절대좌표로 잡는데도 **안쪽 인라인 흐름이 한 번 더 민다.** */
.artwrap, .artwrap svg, .tl .art > svg { display: block; }
/* 약속 타일(「안 하는 말」)은 그림도 눕힌다 — 색이 「누를 수 있는지」를 말하는 규율이라
   읽는 값에 캐릭터가 웃고 있으면 안 된다. `off` 와 달리 글자는 안 죽인다. */
.artwrap.quiet { opacity: .42; filter: grayscale(1); }
.tl.off .artwrap { opacity: .5; filter: grayscale(.7); }
.tl .art { position: absolute; right: 6px; bottom: 4px; pointer-events: none; }
.tl .tagline { position: relative; top: -1px; }
.tl.pt { background: var(--tile-pt); color: var(--tile-pt-ink); }
.tl.ink { background: var(--tile-ink); color: var(--tile-ink-ink); }
.tl.mist { background: var(--tile-mist); color: var(--tile-mist-ink); }
.tl.paper { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.tl.on { box-shadow: inset 0 0 0 3px var(--gold-3); }
.tl.off { opacity: .55; }
.tl.off .art { opacity: .5; }
.tl .dot { position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; border-radius: 4px; background: var(--bad); }
/* 가로로 눕힌 타일 — `.t`·`.s`·`.art` 가 한 줄에 선다. 제목은 안 줄이고(칩이 아래로 떨어진다)
   설명이 남는 폭을 먹는다. */
.tl.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 13px; padding: 15px 16px; }
.tl.wide .t { flex: none; }
.tl.wide .s { flex: 1; min-width: 0; margin-top: 0; max-width: none; }
.tl.wide .art { position: static; margin-left: auto; opacity: .9; }

/* ── 카드 ──────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 9px; grid-template-columns: 1fr; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 17px 16px 16px; position: relative; }
.card + .card { margin-top: 9px; }
.eb { font-size: var(--fs-sm); color: var(--sub); font-weight: 700; letter-spacing: -.01em; }
.ttl { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.035em; margin-top: 4px; }
.ttl .go { float: right; color: var(--faint); font-weight: 400; font-size: var(--fs-lg); }
.sub2 { font-size: var(--fs-md); color: var(--sub); line-height: 1.75; margin-top: 6px; }
.cardlink { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cardlink .more { font-size: var(--fs-md); font-weight: 700; color: var(--point-d); flex: none; }

/* ── 아이콘 격자 — 점신의 그 배치. 연한 원 + 먹선 + 연두 면 ────────── */
/* 점신의 3열 격자 — **배지 원이 없다.** 아이콘이 곧 그림이라 원을 두면 오히려 작아 보인다. */
.icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 15px; }
.icons.c4 { grid-template-columns: repeat(4, 1fr); }
.ico { padding: 15px 2px 13px; text-align: center; border-radius: 14px; position: relative; }
.ico .dot { position: absolute; top: 12px; right: calc(50% - 27px); width: 7px; height: 7px; border-radius: 4px; background: var(--bad); }
.ico:hover { background: var(--bg2); }
.ico .box { width: 54px; height: 54px; margin: 0 auto; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.ico.q .box { color: var(--faint); }
.ico .l { font-size: var(--fs-md); font-weight: 600; margin-top: 10px; letter-spacing: -.035em; line-height: 1.35; }
.ico .s { font-size: var(--fs-xs); color: var(--sub); margin-top: 3px; }
.ico .l .tagline { margin-left: 3px; }

/* 목록 행 — 점신의 두 번째 패턴(원형 배지 + 굵은 제목 + 회색 부제) */
.rows2 { margin-top: 8px; }
.r2 { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line2); }
.r2.first { border-top: 0; }
/* 점신의 리스트 배지 — 포인트색이 아니라 **중립 회보라**다. 배지와 아이콘 면이 같은 색이면
   둘이 뭉개져 아이콘이 안 보인다. 배지는 눕히고 면만 색을 갖는다. */
.r2 .box { width: 44px; height: 44px; border-radius: 22px; background: var(--chip); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; }
.r2.q .box { background: var(--bg2); color: var(--faint); }
.r2 .t { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.03em; }
.r2 .s { font-size: var(--fs-md); color: var(--sub); margin-top: 4px; line-height: 1.55; }
.r2 .rt { margin-left: auto; color: var(--faint); font-size: var(--fs-lg); flex: none; }
.r2 .num { width: 15px; font-family: var(--mono); font-size: var(--fs-sm); color: var(--point-d); font-weight: 700; flex: none; text-align: center; }
.tagline { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--point-soft2); color: var(--point-d); margin-left: 5px; vertical-align: 1px; }
.tagline.grey { background: var(--bg2); color: var(--mute); }

/* ── 오늘의 운세 — 한 숫자 + 네 칸 + 시간 곡선 ────────────────────── */
.score { border: 0; padding: 0; background: transparent; }
/* 자세히 보기 화면의 점수 카드는 색 띠가 아니라 흰 카드다 — 거기선 계산을 읽는다. */
.score.plain { border: 1px solid var(--line); border-radius: 18px; padding: 17px 16px 16px; background: var(--card); }
.score.plain .meter { background: var(--line2); }
.score.plain .meter i { background: var(--point); }
.score.plain .big .u { opacity: 1; color: var(--sub); }
/* 금 카드의 입체 캐릭터. ⚠ **글자를 안 가린다** — 오른쪽 위 구석에 앉히고
   `pointer-events: none` 으로 누르는 자리도 안 뺏는다(지도 카드는 카드 전체가 버튼이다).
   ⚠ 좁은 화면에서는 한 단계 줄인다 — 제목이 두 줄로 꺾이면 그림이 겹친다. */
.score.plain.gold, .goldcard { position: relative; overflow: hidden; }
.scene { position: absolute; top: 6px; right: 8px; line-height: 0; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(106, 74, 16, .22)); }
.goldcard .scene { top: 50%; transform: translateY(-50%); right: 10px; }
/* ⚠ **자리를 요소마다 좁히지 않는다.** `max-width` 를 몇 개에 걸어 놨더니 클래스가 없는
   줄이 그대로 그림 밑으로 들어갔다(측정: 1069px² 겹침). **카드가 오른쪽을 비운다** —
   새 줄이 생겨도 저절로 지켜진다. */
.goldcard { padding-right: 96px; }
@media (max-width: 359px) { .scene svg { width: 64px; height: 64px; } }

/* 오늘의 운세 점수 카드. ⚠ `scoreHead()` 하나를 홈과 「자세히」가 같이 쓴다 —
   한쪽만 칠하면 같은 카드가 화면마다 다른 색이 된다. */
.score.plain.gold { background: var(--gold-face); border-color: var(--gold-edge); }
.score.plain.gold .big .n { color: var(--gold-deep); }
.score.plain.gold .big .u, .score.plain.gold .band { color: var(--gold-ink); }
.score.plain.gold .sub2 { color: var(--gold-ink); }
.score.plain.gold .meter { background: rgba(74, 54, 13, .16); }
/* 네 자리 칸은 금 위에서 **흰 면**으로 띄운다 — 금 위 금은 안 읽힌다 */
/* ⚠ **금 위에 연두를 얹지 않는다.** 두 칸(`.hit`)은 원래 한쪽이 연두 면(`.key`)인데,
   금 바탕에 올리면 두 색이 싸운다 — 금 위에서는 **흰 면의 진하기**로만 가른다.
   「어느 숫자를 봐야 하는지」를 색이 말하는 규약은 그대로고, 말하는 방법만 바뀐다. */
.score.plain.gold .hit > div { background: rgba(255, 255, 255, .45); }
.score.plain.gold .hit > div.key { background: rgba(255, 255, 255, .82); color: var(--gold-deep); }
.score.plain.gold .hit .v { color: var(--gold-deep); }
.score.plain.gold .hit .l, .score.plain.gold .hit > div.key .l { color: var(--gold-ink); opacity: .9; }
.score.plain.gold .band i { background: var(--gold-deep); }
/* 내 인생 지도 카드 — 들어가는 문이라 **면으로** 말한다 */
.goldcard { background: var(--gold-face); border-color: var(--gold-edge); color: var(--gold-ink); }
.goldcard .eb { color: var(--gold-ink); opacity: .72; }
.goldcard .h, .goldcard .t { color: var(--gold-deep); }
.goldcard .small, .goldcard .sub2 { color: var(--gold-ink); }
.score .head { display: flex; align-items: flex-start; gap: 12px; margin-top: 11px; }
.score .big { display: flex; align-items: flex-end; gap: 2px; flex: none; }
.score .big .n { font-size: 46px; font-weight: 700; letter-spacing: -.05em; line-height: .9; }
.score .big .u { font-size: var(--fs-xl); font-weight: 700; opacity: .6; margin-bottom: 3px; }
.score .say { flex: 1; min-width: 0; padding-top: 2px; }
.score .say .b { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.03em; }
.score .say .c { font-size: var(--fs-md); opacity: .92; margin-top: 5px; line-height: 1.55; }
.score .band { font-size: var(--fs-base); font-weight: 700; margin-top: 8px; color: var(--sub); display: flex; align-items: center; gap: 6px; }
.score .band i { width: 8px; height: 8px; border-radius: 4px; background: var(--point); flex: none; }
.stats { display: flex; gap: 5px; margin-top: 13px; }
.stat { flex: 1; border-radius: 12px; background: rgba(255,255,255,.62); padding: 9px 2px 8px; text-align: center; }
.stat .l { opacity: .86; }
.stat .v { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.02em; }
.stat .l { font-size: var(--fs-sm); color: var(--sub); margin-top: 4px; font-weight: 600; }
.meter { height: 4px; border-radius: 2px; background: rgba(12,46,27,.12); margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--point-d); }

/* 시간 곡선 — 육합·삼합·충으로 만든 12칸. 표에서 나온 값이지 지어낸 곡선이 아니다. */
.curve { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(12,46,27,.1); }
.curve .cap { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); opacity: .82; font-weight: 600; }
.curve .cap b { font-weight: 700; opacity: 1; }
.curve .ax { opacity: .55; }
.curve svg { display: block; width: 100%; height: 46px; margin-top: 7px; overflow: visible; }
.curve .ax { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--fs-xs); color: var(--mute); margin-top: 5px; }

/* 행운 네 칸 */
.luck4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.luck4 > div { border-radius: 14px; background: rgba(255,255,255,.62); padding: 14px 3px 13px; text-align: center; }
.luck4 .k { font-size: var(--fs-sm); color: var(--sub); font-weight: 700; }
.luck4 .v { font-size: var(--fs-xl); font-weight: 700; margin-top: 6px; letter-spacing: -.03em; }
.luck4 .sw { width: 16px; height: 16px; border-radius: 8px; margin: 6px auto 0; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }

/* 버튼 */
.btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border-radius: 13px; background: var(--ink); color: #FFF; font-size: var(--fs-base); font-weight: 700; letter-spacing: -.02em; margin-top: 14px; }
.btn.ghost { background: var(--bg2); color: var(--ink); }
.btn.point { background: var(--point); color: #FFF; }
.btn.off { background: var(--bg2); color: var(--faint); pointer-events: none; }
.btn.sm { height: 42px; font-size: var(--fs-md); margin-top: 10px; }
.foot { font-size: var(--fs-sm); color: var(--mute); text-align: center; line-height: 1.75; margin-top: 12px; }

/* 광고 자리 — 지금은 비어 있고, 나중에 여기만 채운다 */
/* 홈 화면에 추가 안내 — ⚠ **광고가 아니다.** 한 번 닫으면 다시 안 뜨고,
   이미 아이콘으로 들어온 사람(standalone)에게는 애초에 안 그린다. */
.install { border: 1px solid var(--point-soft2); background: var(--point-soft); }
.install .ir { display: flex; gap: 11px; align-items: flex-start; }
.install .ir .box { width: 38px; height: 38px; border-radius: 12px; background: var(--paper);
  display: flex; align-items: center; justify-content: center; flex: none; }
.install .t { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.03em; }
.install .s { font-size: var(--fs-md); color: var(--sub); margin-top: 4px; line-height: 1.55; }
.install .irow { display: flex; gap: 7px; margin-top: 12px; }
.install .irow .btn { flex: 1; margin-top: 0; }

.adslot { height: 76px; border-radius: 16px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--mute); margin-top: 9px; }
/* 카카오의 「더보기」처럼 굵은 큰 제목 한 줄. 카드 밖에 선다. */
.bigt { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.045em; padding: 14px 2px 2px; }
.bigt .sub { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--sub); letter-spacing: -.02em; margin-top: 6px; }

/* 탭바 */
.tabbar { flex: none; height: 62px; background: var(--paper); border-top: 1px solid var(--line); display: flex; align-items: stretch; padding-bottom: env(safe-area-inset-bottom); }
.tabbar .railtop, .tabbar .railfoot { display: none; }
@media (min-width: 900px) { .tabbar .railtop, .tabbar .railfoot { display: flex; } .tabbar .railfoot { display: block; } }
.tabbar .t { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--mute); }
/* ⚠ 타일은 **면**으로 말한다 — 활성 탭도 글자색이 아니라 연두 알약으로 표시한다. */
.tabbar .t .pill { display: flex; align-items: center; justify-content: center; width: 46px; height: 28px; border-radius: 14px; }
/* ⚠ **고른 탭은 금이다 (2026-09-23, 사용자 지정: 「선택탭 색깔은 노란색으로」).**
   앞서 「금은 점수·인생 지도 세 자리만 읽는다」고 적었고 그 경계가 **넷으로 늘었다** —
   `--t-*`(칩·신호 칸)까지 번지면 화면이 통째로 누레지니 **탭 알약 하나만** 더 연다.
   ⚠ 금 바탕에 연두 글씨를 얹지 않는다 — 글자도 금의 어두운 쪽(`--gold-deep`)이다. */
.tabbar .t.on { color: var(--gold-deep); font-weight: 700; }
.tabbar .t.on .pill { background: var(--gold-face); box-shadow: inset 0 0 0 1px var(--gold-edge); }
.tabbar svg { width: 21px; height: 21px; }
/* 되묻기 배지 — **알림을 못 보내니** 돌아왔을 때 눈에 띄는 게 전부다.
   ⚠ 알약 안에 겹쳐 띄운다(`.pill` 이 `position: relative`). 크기는 자의 단계로 고정한다. */
.tabbar .t .pill { position: relative; }
.tdot { position: absolute; top: -1px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--point); color: #FFF; font-size: var(--fs-xs); font-weight: 700;
  font-style: normal; line-height: 16px; text-align: center; border: 2px solid var(--paper); box-sizing: content-box; }
@media (min-width: 900px) { .tdot { right: 6px; } }
/* 홈 맨 위 되묻기 줄 — 누르는 곳이라 화살표를 단다 */
.duebar .go { margin-top: 9px; font-size: var(--fs-md); font-weight: 700; color: var(--point-d); }

/* ── 첫 화면(스플래시) ──────────────────────────────────────────────────
   ⚠ **사용자 지정 (2026-09-23)**: 「앱을 누르면 바로 오늘의 운세가 아니라 인사말·
      특별한 날이면 그날을 언급하는 배경화면·방문자수를 거쳐 들어가도록」.
   ⚠ **한자를 안 쓴다.** 참조로 받은 화면은 「秋分」이지만 이 앱은 화면에서 한자를
      전부 뺐다(2026-09-17) — 「추분」 한글로 간다. 남의 화면을 베낄 때도 우리 규율이 먼저다.
   ⚠ **계절 색은 `--gold-*` 와 따로 둔다** — 금은 점수·인생 지도 셋만 읽는 색이다. */
#splash { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 30px 26px;
  color: #FFF; background: var(--sp-face, linear-gradient(160deg, #2B2F36, #14161A));
  animation: spin-up .5s ease both; }
#splash.out { animation: sp-out .45s ease both; }
@keyframes sp-out { to { opacity: 0; visibility: hidden; } }
@keyframes spin-up { from { opacity: 0; } to { opacity: 1; } }
/* 계절 무늬 — 큰 원 하나와 흩뿌린 점. **사진이 아니라 그린 것**이라 가볍다. */
#splash .glow { position: absolute; width: 74vw; height: 74vw; max-width: 420px; max-height: 420px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.26), rgba(255,255,255,0) 68%); }
#splash .mote { position: absolute; border-radius: 50%; background: rgba(255,255,255,.5);
  animation: mote 9s ease-in-out infinite; }
/* 꽃이 들어간 자리는 **동그란 점이 아니다** — 배경과 둥근 모서리를 걷는다 */
#splash .mote.bl { background: none; border-radius: 0; line-height: 0; opacity: .9;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.22)); }
#splash .mote.bl svg { display: block; }
@keyframes mote { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-16px); opacity: .8; } }
#splash .inner { position: relative; }
/* ⚠ **한글에 자간을 크게 주지 않는다.** `.24em` 은 로마자 눈썹에 어울리는 값이고
   한글에 걸면 「좋 은  오 후 예 요」로 흩어져 읽힌다 — 띄워 보고 줄였다. */
#splash .eb { font-size: var(--fs-md); letter-spacing: .06em; opacity: .88; }
/* ⚠ 워드마크는 제 색(먹)을 갖고 있다 — 어두운 배경 위에서는 물려받게 덮는다 */
#splash .wm, #splash .wm b, #splash .wm i { color: #FFF; }
#splash .big { font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1.22; margin-top: 10px; }
#splash .sub { font-size: var(--fs-base); line-height: 1.85; opacity: .9; margin-top: 12px; }
/* ⚠ **밝은 계절 면 위에서는 흰 글씨가 흐려진다** (가을 바탕에서 실제로 안 읽혔다).
   투명도를 걷고 옅은 그림자를 깔아 어느 계절에서나 읽히게 한다. */
#splash .foot { position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom));
  font-size: var(--fs-sm); line-height: 1.8; color: rgba(255,255,255,.96);
  text-shadow: 0 1px 6px rgba(0,0,0,.34); }
#splash .big, #splash .sub, #splash .eb { text-shadow: 0 2px 10px rgba(0,0,0,.26); }
#splash .wm { opacity: .9; margin-bottom: 20px; }

/* ── 속 화면 ───────────────────────────────────────────────────────── */
.bar { display: flex; align-items: center; gap: 10px; padding: 14px 0 10px; }
.bk { width: 34px; height: 34px; border-radius: 17px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none; }
.bk:hover { background: var(--bg2); }
.bar .ttl2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.bar .rt { margin-left: auto; font-size: var(--fs-md); color: var(--sub); }
.title { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.035em; line-height: 1.42; }
.lead { font-size: var(--fs-base); color: var(--sub); line-height: 1.9; margin-top: 11px; }
.small { font-size: var(--fs-md); color: var(--sub); line-height: 1.8; }
/* 인생 지도 — 십 년 한 칸. **지금 칸만 색을 갖는다**(어디를 볼지 색이 말한다) */
.lmstrip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 12px; }
.lmc { background: var(--bg2); border-radius: 7px; padding: 7px 2px; text-align: center; }
.lmc .a { font-size: var(--fs-sm); font-weight: 700; color: var(--sub); }
.lmc .y { font-size: var(--fs-xs); color: var(--faint); margin-top: 2px; }
.lmc.fill { background: var(--t-pt); }
.lmc.on { background: var(--gold-face); box-shadow: inset 0 0 0 1px var(--gold-edge); }
.lmc.on .a { color: var(--gold-deep); }
.lmc.on .y { color: var(--gold-ink); }
.lmeras { margin-top: 12px; display: grid; gap: 7px; }
.lme { background: var(--bg); border: 1px solid var(--edge); border-radius: var(--r2); padding: 10px 12px; }
/* ⚠ **한 카드 안에서 금과 연두를 섞지 않는다.** 바로 위 십 년 띠가 금인데 지금 구간만
   연두면 「지금」을 말하는 표시가 한 카드에 두 색이 된다 — 둘 다 금으로 간다. */
.lme.on { border-color: var(--gold-edge); background: var(--gold-face); }
.lme.on .k { color: var(--gold-deep); }
.lme.on .v { color: var(--gold-ink); }
.lme.on .now { color: var(--gold-deep); }
.lme .k { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.lme .v { font-size: var(--fs-md); color: var(--sub); line-height: 1.7; margin-top: 3px; }
.lme .now { color: var(--point-d); font-size: var(--fs-sm); }

/* 손 그림 — 어느 선이 무엇인지 알려 주는 자리. **사진이 아니라 그린 것**이라
   선이 어디 있는지 우리가 안다(사진에는 설명선을 못 꽂는다). */
.palmdia { margin-top: 12px; background: var(--bg2); border-radius: var(--r2); padding: 6px 4px 2px; }
.palmdia svg { display: block; }
/* 문항 옆 점 — **그림의 선 색과 같다.** 그게 문항과 선을 잇는 유일한 장치다. */
.ldot { display: inline-block; width: 9px; height: 9px; border-radius: 5px; margin-right: 7px;
  vertical-align: 1px; }

/* 손금 사진 — **보시라고** 띄우는 자리다. 읽지 않는다. */
.palmshot { margin-top: 11px; }
.palmshot img { width: 100%; max-height: 260px; object-fit: contain;
  border-radius: var(--r2); background: var(--bg2); display: block; }
.mono { font-family: var(--mono); }
b, strong { font-weight: 700; }
.kv { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line2); }
.kv:first-child { border-top: 0; padding-top: 0; }
.kv .k { flex: none; width: 92px; font-size: var(--fs-md); font-weight: 700; color: var(--sub); padding-top: 2px; }
.kv .v { flex: 1; font-size: var(--fs-base); color: var(--ink); line-height: 1.85; }
.pill { display: inline-block; font-size: var(--fs-sm); padding: 6px 11px; border-radius: 9px; background: var(--bg2); color: var(--sub); margin: 3px 4px 0 0; }
/* 규칙 id 는 라틴 모노라 같은 px 이어도 옆의 한글 칩보다 작아 보인다 - 한 단계 올려 눈높이를 맞춘다 */
.pill.mono { font-family: var(--mono); font-size: var(--fs-md); }
.note { border-radius: 16px; padding: 15px 16px; margin-top: 11px; background: var(--bg2); }
.note .k { font-size: var(--fs-md); font-weight: 700; color: var(--sub); }
.note .v { font-size: var(--fs-md); line-height: 1.85; margin-top: 6px; color: var(--ink); }
.note.point { background: var(--point-soft); } .note.point .k { color: var(--point-d); }
.note.warn { background: #FCF4E3; } .note.warn .k { color: #96700F; }
.err { color: var(--bad); font-size: var(--fs-md); line-height: 1.75; margin-top: 10px; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--point); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.warnchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.warnchips span { font-size: var(--fs-sm); padding: 7px 12px; border-radius: 999px; background: #FCF4E3; color: #8A6510; }

/* 입력 */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
/* 열둘을 한 줄에 하나씩 놓으면 화면을 다 먹는다 — 두 칸으로 접는다(출생지 고르기). */
.chips.two { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.chips.two .chip { width: auto; padding: 11px 13px; }
.chips.two .chip .right { font-size: var(--fs-sm); }
/* 알약도 그림자를 빼고 실선 한 겹 — 흰 바탕에서 물건을 세우는 건 선이다. */
.chip { border-radius: 12px; background: var(--paper); border: 1px solid var(--line); padding: 12px 15px; font-size: var(--fs-base); font-weight: 600; color: var(--sub); display: flex; align-items: center; gap: 8px; }
.chip:hover { background: var(--bg2); }
/* ⚠ **고른 표시는 금 하나다 (2026-09-23, 사용자 지정: 「선택표시 검은색을 노란색으로」).**
   전에는 자리마다 달랐다 — 칩·손금 선택지는 **먹색 면**, 타일은 **연두 테두리**.
   한 화면 안에서 「골랐다」가 두 색이면 사용자는 그 둘을 **다른 뜻**으로 읽는다. */
.chip.on { background: var(--gold-face); border-color: var(--gold-edge);
  box-shadow: inset 0 0 0 1.5px var(--gold-edge); color: var(--gold-deep); font-weight: 700; }
.chip.on:hover { background: var(--gold-face); }
.chip .sub { font-family: var(--mono); font-size: var(--fs-sm); color: var(--mute); }
.chip.on .sub { color: var(--gold-ink); }
.chip.wide { width: 100%; }
.chip.wide .right { margin-left: auto; font-family: var(--mono); font-size: var(--fs-md); font-weight: 500; }
.seg { display: flex; gap: 6px; margin-top: 14px; }
.seg .chip { flex: 1; justify-content: center; height: 44px; padding: 0; border-radius: 13px; }
.pips { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.pips .pb { flex: 1; display: flex; gap: 4px; }
.pips .pb i { flex: 1; height: 3px; border-radius: 2px; background: var(--edge); display: block; }
.pips .pb i.on { background: var(--point); }
.pips .n { font-family: var(--mono); font-size: var(--fs-sm); color: var(--sub); }
.numrow { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.numrow input { width: 78px; border: 0; border-bottom: 2px solid var(--line); background: transparent; font-family: var(--mono); font-size: 28px; font-weight: 500; color: var(--ink); padding: 0 2px 3px; outline: none; }
.numrow input.short { width: 52px; }
.numrow input:focus { border-bottom-color: var(--point); }
.numrow input:disabled { opacity: .3; }
.numrow .u { font-size: var(--fs-md); color: var(--sub); margin-right: 6px; }
.textrow { display: flex; gap: 8px; }
.textrow input, textarea { width: 100%; border: 1px solid var(--edge); border-radius: 13px; background: var(--card); font-family: var(--sans); font-size: var(--fs-base); color: var(--ink); padding: 13px; outline: none; }
textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.textrow input:focus, textarea:focus { border-color: var(--point); }

/* ── 명식 격자 ─────────────────────────────────────────────────────
   ⚠ **여기 색은 장식이 아니라 그 글자의 오행이다** — 木 초록 · 火 붉음 · 土 황토 ·
   金 회색 · 水 남색. 타일 넷(연두·먹·회청·흰색)으로 갈아 끼우면 **화면에서 정보가 사라진다.**
   타일과 맞추는 건 **꼴**뿐이다: 라운드를 키우고 칸을 세운다. */
.rawgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.rawgrid .col .k { font-size: var(--fs-xs); color: var(--sub); font-weight: 700; text-align: center; letter-spacing: -.02em; }
.rawgrid .col .c { border-radius: 14px; padding: 14px 4px 13px; text-align: center; margin-top: 7px; background: var(--bg2); }
.rawgrid .col .c .z { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.045em; }
.rawgrid .col .c .s { font-size: var(--fs-xs); margin-top: 4px; font-weight: 600; }
/* 안 잰 칸은 **빈 타일**이다 — 흐린 글씨로 두면 고장난 칸처럼 읽힌다. */
.rawgrid .col .c.none { background: var(--paper); border: 1px dashed var(--edge); color: var(--faint); }
.rawgrid .col .c.none .z { font-size: var(--fs-md); font-weight: 700; padding: 6px 0; }
.bars5 { display: flex; gap: 7px; align-items: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line2); }
.bars5 > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bars5 .bar { width: 100%; border-radius: 4px; }
.bars5 .lb { font-size: var(--fs-xs); font-weight: 700; }
.tally { display: flex; gap: 6px; margin-top: 12px; }
.tally div { flex: 1; border-radius: 13px; padding: 11px 0 10px; text-align: center; background: var(--bg2); }
.tally .n { font-size: var(--fs-xs); font-weight: 700; color: var(--sub); letter-spacing: -.02em; }
.tally .v { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 600; margin-top: 3px; }
.sep { border-top: 1px solid var(--line2); margin-top: 12px; padding-top: 12px; }

/* 계산 열기 */
.calc { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-md); color: var(--sub); padding: 7px 0; }
.calc.tot { border-top: 1px solid var(--line2); margin-top: 5px; padding-top: 8px; font-weight: 700; color: var(--ink); }
.srow { display: flex; align-items: center; gap: 10px; }
.srow .l { flex: 1; font-weight: 700; font-size: var(--fs-lg); }
.srow .n { font-family: var(--mono); font-size: var(--fs-2xl); font-weight: 500; }
.srow .c { color: var(--sub); font-size: var(--fs-md); }

/* 달력 */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 11px; }
.cal .dw { text-align: center; font-size: var(--fs-xs); color: var(--sub); font-weight: 700; }
/* 달력 칸도 타일과 같은 라운드 계열. ⚠ 색은 안 건드린다 — 심는/거두는/쉬는 때의 오행색이다. */
.cal .d { border-radius: 12px; padding: 9px 0 8px; text-align: center; background: var(--bg2); }
.cal .d .n { font-family: var(--mono); font-size: var(--fs-md); font-weight: 500; }
.cal .d .s { font-size: var(--fs-xs); margin-top: 3px; font-weight: 600; }
/* 범례를 면 세 칸으로 — 적중률 세 칸과 같은 꼴이다. 색은 그 때의 오행색 그대로. */
.tband { display: flex; gap: 7px; margin-top: 12px; }
.tband > div { flex: 1; border-radius: 14px; padding: 12px 4px 11px; text-align: center; }
.tband .v { font-family: var(--mono); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em; }
.tband .l { font-size: var(--fs-sm); font-weight: 700; margin-top: 4px; opacity: .94; }

.dband { border-radius: 18px; padding: 16px 16px 15px; margin-top: 9px; }
.dband .eb { font-weight: 700; }
.dband .ttl { color: var(--ink); }
.dband .say { font-size: var(--fs-base); line-height: 1.9; margin-top: 9px; color: var(--ink); }
.dband .inset { background: rgba(255, 255, 255, .66); border-radius: 13px; padding: 13px 14px; margin-top: 13px; }
.dband .inset .k { font-size: var(--fs-base); font-weight: 700; color: var(--ink); letter-spacing: -.03em; }
.dband .inset .v { font-size: var(--fs-md); line-height: 1.85; margin-top: 6px; color: var(--ink); opacity: .94; }

/* 나 지도 */
.rows { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row .lab { width: 40px; font-size: var(--fs-sm); font-weight: 700; color: var(--sub); flex: none; }
.row .bars { flex: 1; display: flex; gap: 6px; align-items: flex-end; height: 42px; }
.row .bars div { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.row .bars i { display: block; width: 9px; border-radius: 3px; }
.row .bars i.zero { width: 15px; height: 3px; background: var(--edge); }
.row .bars i.dash { width: 15px; height: 0; border-top: 2px dotted var(--edge); }
.row .unit { width: 32px; text-align: right; font-size: var(--fs-xs); color: var(--mute); flex: none; }
.els { display: flex; gap: 6px; padding: 6px 30px 0 48px; }
.els span { flex: 1; text-align: center; font-size: var(--fs-xs); font-weight: 700; }
.finding { border-radius: 16px; padding: 15px 16px; margin-top: 9px; background: var(--bg2); }
.finding .tag { font-size: var(--fs-sm); font-weight: 700; }
.finding .hd { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; margin-top: 6px; }
.voice { display: flex; gap: 8px; font-size: var(--fs-md); line-height: 1.75; margin-top: 8px; }
.voice .who { flex: none; width: 30px; font-weight: 700; color: var(--sub); background: none; box-shadow: none; padding: 0; border-radius: 0; display: block; }
.voice .st { flex: none; width: 44px; font-weight: 700; }
.voice .why { flex: 1; color: #2E2E36; }

/* 카드(처방) */
.layers .layer { padding: 13px 0; border-top: 1px solid var(--line2); }
.layers .layer:first-child { border-top: 0; padding-top: 2px; }
.layers .lk { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; color: var(--sub); }
.layers .lv { font-size: var(--fs-base); line-height: 1.85; margin-top: 7px; color: var(--ink); }
/* 사실 줄은 코드가 센 값이라 굵기 한 단계로 표시한다 - 모노를 걸면 한글이 되돌아가고
   가운뎃점 폭만 벌어져 오히려 흐트러진다 */
.layers .lv.fact { font-weight: 700; letter-spacing: -.01em; }
.script { border-radius: 13px; background: var(--point-soft); padding: 13px 14px; font-size: var(--fs-base); line-height: 1.85; margin-top: 8px; }
.steps .st { display: flex; gap: 11px; padding: 13px 0; border-top: 1px solid var(--line2); }
.steps .st:first-child { border-top: 0; padding-top: 2px; }
.steps .st .k { font-size: var(--fs-base); font-weight: 700; }
.steps .st .v { font-size: var(--fs-md); color: var(--sub); line-height: 1.8; margin-top: 5px; }

/* 이레 바이오리듬 — **네 자리를 이레 동안 겹쳐 그린다.**
   ⚠ **축을 지어내지 않는다** — 시중 앱의 신체·감성·지성이 아니라 우리가 이미 세는 네 자리다.
   ⚠ **지난 날은 안 그린다**(지어내야 하므로). 고른 날에만 점과 세로선이 선다. */
.bio { margin-top: 14px; }
.bio svg { display: block; width: 100%; height: 96px; overflow: visible; }
.wkrow { display: flex; gap: 4px; margin-top: 8px; }
.wk { flex: 1; text-align: center; font-size: var(--fs-xs); color: var(--mute); cursor: pointer;
      padding: 4px 0; border-radius: 8px; }
.wk.on { color: var(--ink); font-weight: 700; background: var(--bg2); }
.lgrow { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 11px; }
.lg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--sub); }
.lg i { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* 적중률 — 무렵만 있는 자리 */
.hit { display: flex; gap: 8px; margin-top: 12px; }
.hit > div { flex: 1; text-align: center; border-radius: 14px; background: var(--bg2); padding: 13px 4px 11px; }
/* ⚠ 셋 중 **「안 하고도 맞음」이 유일한 신호**다 — 읽고 움직인 뒤의 「맞음」은 자기실현일 수
   있어서 따로 센다(검증 루프 규율). 그 한 칸만 세운다. 장식이 아니라 정보다. */
.hit > div.key { background: var(--t-pt); color: var(--t-pt-ink); }
.hit > div.key .l { color: inherit; opacity: .72; }
.hit .v { font-family: var(--mono); font-size: var(--fs-3xl); font-weight: 500; }
.hit .l { font-size: var(--fs-sm); color: var(--sub); margin-top: 4px; }
.empty { border: 1px dashed var(--edge); border-radius: 14px; padding: 18px; text-align: center; color: var(--sub); font-size: var(--fs-md); line-height: 1.85; margin-top: 12px; }

/* 손금 */
.palmq { margin-top: 14px; }
.palmq .q { font-size: var(--fs-lg); font-weight: 700; margin-top: 18px; }
.palmq .opts { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
/* 고르는 자리라 타일과 같은 말을 쓴다 — 실선 한 겹, 고른 것은 **금**이다. */
.palmq .o { display: flex; gap: 11px; align-items: center; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); padding: 13px 14px; }
.palmq .o:hover { background: var(--bg2); }
.palmq .o.on { background: var(--gold-face); border-color: var(--gold-edge);
  box-shadow: inset 0 0 0 1.5px var(--gold-edge); color: var(--gold-deep); }
.palmq .o .t { font-size: var(--fs-base); font-weight: 700; }
.palmq .o .s { font-size: var(--fs-sm); color: var(--sub); margin-top: 3px; }
.palmq .o.on .s { color: var(--gold-ink); }
.palmq .o svg { flex: none; }

/* 사람 고르기 (로그인한 신원 안에서 명식을 바꾼다) */
.sheet { position: absolute; inset: 0; background: rgba(20,18,30,.34); display: flex; align-items: flex-end; z-index: 30; animation: fade .18s ease-out; }
.sheet .in { width: 100%; background: var(--card); border-radius: 20px 20px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 82%; overflow-y: auto; }
.sheet .grab { width: 34px; height: 4px; border-radius: 2px; background: var(--edge); margin: -6px auto 12px; }
.pr { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line2); }
.pr:first-of-type { border-top: 0; }
.pr .av { width: 40px; height: 40px; border-radius: 20px; background: var(--chip); color: var(--sub); font-size: var(--fs-base); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.pr.on .av { background: var(--t-pt); color: var(--t-pt-ink); }
.pr .t { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.03em; }
.pr .s { font-family: var(--mono); font-size: var(--fs-sm); color: var(--sub); margin-top: 4px; }
.pr .rt { margin-left: auto; flex: none; color: var(--point); }

/* ── 한눈에 ─────────────────────────────────────────────────────────
   **답이 먼저고 근거는 밑에 접힌다.** 이 앱은 「계산을 연다」가 축이라
   근거를 지울 수 없고, 그렇다고 먼저 깔면 답이 안 보인다 — 그래서 둘을
   위아래로 나눈다. 근거 머리(.why .hd)는 **접혀 있어도 늘 보인다.** */
.ov { display: grid; gap: 15px; }
.ov .ln { display: grid; gap: 3px; }
.ov .ln .q { font-size: var(--fs-sm); font-weight: 700; color: var(--mute); }
.ov .ln .a { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.04em; line-height: 1.34; }
.ov .ln .s { font-size: var(--fs-md); color: var(--sub); line-height: 1.5; }
.ov .ln.lead .a { font-size: var(--fs-3xl); }
.ov .mos { display: flex; gap: 6px; align-items: flex-end; margin-top: 7px; }
.ov .mo { flex: 1; display: grid; gap: 5px; justify-items: center; }
.ov .mo i { display: block; width: 100%; border-radius: 9px 9px 4px 4px; background: var(--bg2); }
.ov .mo.on i { background: var(--point); }
.ov .mo .n { font-size: var(--fs-xs); font-weight: 700; color: var(--mute); }
.ov .mo.on .n { color: var(--ink); }
.ov .mo .m { font-size: var(--fs-sm); font-weight: 700; }
.ov .tag { display: inline-block; margin-top: 5px; padding: 4px 9px; border-radius: 9px;
  background: var(--point-soft); font-size: var(--fs-sm); font-weight: 700; }

/* 근거 — 가는 선 하나로 풀이와 가른다. 색을 안 쓴다(누르는 곳이 아니라 읽는 값). */
.why { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; }
.why .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--mute); }
.why .hd .cv { display: inline-block; transition: transform .16s; }
.why.open .hd .cv { transform: rotate(180deg); }
.why .bd { display: grid; gap: 13px; margin-top: 13px; }
.why .bd .k { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.why .bd .v { font-size: var(--fs-md); color: var(--sub); line-height: 1.58; margin-top: 3px; }
.why .bd .v b { color: var(--ink); }

/* ⚠ **측정 화면으로 가는 길은 진짜 `<a>` 다** — `window.open()` 은 모바일에서 팝업으로
   막히는 일이 있고, 그러면 눌러도 아무 일이 안 일어나 「고장」으로 읽힌다.
   링크는 안 막히고 길게 눌러 새 탭으로 여는 것도 된다. 꼴만 버튼과 맞춘다. */
a.btn { text-decoration: none; }
a.btn:visited { color: inherit; }
/* ── 정통사주 — 줄글 풀이 (2026-09-26) ─────────────────────────────────
   읽으라고 쓴 글이라 **본문 크기(16) · 넉넉한 줄 간격 · 먹색**이다. 흐림(opacity)을 안 건다 —
   「작아서가 아니라 흐려서 안 읽힌」 일이 이미 있었다(2026-09-19). 제목은 자의 한 단계(xl). */
.saju h3 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; line-height: 1.45; }
.saju p, .sajuteaser p { font-size: var(--fs-base); color: var(--ink); line-height: 1.85; margin: 10px 0 0; word-break: keep-all; }
.saju.last { border-color: var(--edge); }
.sajuteaser .more { font-size: var(--fs-md); color: var(--sub); font-weight: 600; margin-top: 12px; }
.sajuwhy summary { font-size: var(--fs-md); font-weight: 700; color: var(--sub); cursor: pointer; list-style: none; }
.sajuwhy summary::-webkit-details-marker { display: none; }
.sajuwhy summary .go { float: right; }
.sajuwhy[open] summary { margin-bottom: 8px; }

/* 인생 지도 — 10년마다 한 문단 (2026-09-26). 구간 칸(.lme) 안에서 한 단계 작은 줄글로 */
.lmd { font-size: var(--fs-md); color: var(--ink); line-height: 1.75; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); word-break: keep-all; }
.lmd b { display: block; font-weight: 700; color: var(--sub); margin-bottom: 2px; }
.lmd.on b { color: var(--ink); }

/* 「다음 풀이 ›」 배너 (2026-09-26) — 뒤로 가지 않고 다음 풀이로.
   ⚠ **누르는 곳이라 밝은 연두 면**이다(이 앱의 규약: 밝은 면 = 눌러서 가는 곳). 회색 띠로 뒀더니
   안내문처럼 읽혀 사용자가 「버튼인지 모르겠다」고 짚었다. **금은 안 쓴다**(점수·「고른 표시」 자리다).
   제목 밑(top)과 맨 아래(bottom) 두 군데 선다. */
.nextread { display: flex; align-items: center; gap: 13px; background: var(--tile-pt); color: var(--tile-pt-ink);
  border-radius: 18px; padding: 13px 14px 13px 12px; box-shadow: 0 4px 14px rgba(3, 199, 90, .18); }
.nextread.top { margin-top: 13px; }
.nextread.bottom { margin-top: 12px; }
.nextread .nr-art { flex: none; width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center; }
.nextread .nr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nextread .k { font-size: var(--fs-sm); font-weight: 700; opacity: .8; }
.nextread .v { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.3; margin-top: 2px; }
.nextread .s { font-size: var(--fs-sm); opacity: .82; margin-top: 2px; }
.nextread .nr-go { flex: none; width: 36px; height: 36px; border-radius: 18px; background: var(--tile-pt-ink); color: #FFF;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); font-weight: 700; line-height: 1; padding-bottom: 2px; }
.nextread:active { transform: scale(.985); }

/* 정통사주 배너 — 홈 점수 카드 바로 밑 (2026-09-26).
   ⚠ **남색 바탕 · 흰 글씨** — 처음엔 금이었는데 바로 위 점수 카드와 한 덩어리로 읽혔다(사용자: 「색상을 다르게」).
   ⚠ **위아래 글씨를 키웠다** — 「정통사주」는 배지(sm → md), 부제는 sm → md. 「무엇인지 모르겠다」가 사용자 말이었다. */
.sajubanner { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 16px 16px 16px 17px;
  background: var(--tile-ink); color: #FFF; border: none; }
.sajubanner .sb-txt { flex: 1; min-width: 0; }
.sajubanner .sb-eb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; opacity: .92; }
.sajubanner .sb-badge { background: var(--tile-pt); color: var(--tile-pt-ink); font-size: var(--fs-md); font-weight: 700;
  border-radius: 9px; padding: 3px 9px; flex: none; }
.sajubanner .t { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.35; margin-top: 8px; color: #FFF; }
.sajubanner .sb-sub { font-size: var(--fs-md); margin-top: 5px; opacity: .88; }
.sajubanner .sb-go { flex: none; width: 38px; height: 38px; border-radius: 19px; background: var(--tile-pt); color: var(--tile-pt-ink);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); font-weight: 700; line-height: 1; padding-bottom: 2px; }

/* 운결 AI 상담 (2026-09-26) — 입구 배너 · 문답 · 이용권.
   ⚠ 입구는 **연두 바탕**(`--tile-pt`) — 바로 위 정통사주(남색)와 색을 갈라 두 입구가 한 덩어리로 안 읽히게.
   ⚠ **금을 안 쓴다** — 금은 점수 · 인생 지도 · 「고른 표시」 자리다. */
.talkbanner { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 15px 15px 15px 17px;
  background: var(--tile-pt); color: var(--tile-pt-ink); border: none; box-shadow: 0 4px 14px rgba(3, 199, 90, .18); }
.talkbanner .tb-txt { flex: 1; min-width: 0; }
.talkbanner .tb-eb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; }
.talkbanner .tb-badge { background: var(--tile-pt-ink); color: #FFF; font-size: var(--fs-md); font-weight: 700;
  border-radius: 9px; padding: 3px 9px; flex: none; }
.talkbanner .t { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.35; margin-top: 7px; }
.talkbanner .tb-sub { font-size: var(--fs-md); margin-top: 4px; opacity: .85; }
.talkbanner .tb-go { flex: none; width: 38px; height: 38px; border-radius: 19px; background: var(--tile-pt-ink); color: #FFF;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); font-weight: 700; line-height: 1; padding-bottom: 2px; }
.talkbanner:active { transform: scale(.985); }

.note.ailabel { margin-top: 4px; }
.tleft { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 2px 0;
  font-size: var(--fs-md); color: var(--sub); }
.tlink { color: var(--point-d); font-weight: 700; }
.tsug { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tsug .chip { justify-content: flex-start; text-align: left; line-height: 1.45; }
.tq { display: flex; justify-content: flex-end; margin-top: 16px; }
.tq span { max-width: 86%; background: var(--tile-ink); color: #FFF; border-radius: 16px 16px 4px 16px;
  padding: 10px 14px; font-size: var(--fs-base); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.card.ta { margin-top: 8px; }
.card.ta.soft { background: var(--bg2); }
.card.ta .tbody p { margin: 10px 0 0; font-size: var(--fs-lg); line-height: 1.85; letter-spacing: -.01em; }
.card.ta .tact { margin-top: 14px; padding: 12px 13px; border-radius: 12px; background: var(--bg2); }
.card.ta .tact .k, .card.ta .twhy .k { font-size: var(--fs-sm); font-weight: 700; color: var(--mute); }
.card.ta .tact .v { font-size: var(--fs-base); font-weight: 700; margin-top: 4px; line-height: 1.55; }
.card.ta .twhy { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.card.ta .twhy .tv { margin-top: 6px; font-size: var(--fs-md); color: var(--sub); line-height: 1.55; padding-left: 12px; position: relative; }
.card.ta .twhy .tv::before { content: ''; position: absolute; left: 2px; top: .65em; width: 5px; height: 5px; border-radius: 3px; background: var(--tile-ink); }
.card.tinput { margin-top: 14px; }
.card.tinput textarea { min-height: 88px; }
.tplans { margin-top: 12px; }
.tpack { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 2px; border-top: 1px solid var(--line); }
.tpack:first-of-type { margin-top: 10px; }
.tpack .t { font-size: var(--fs-lg); font-weight: 700; }
.tpack .tp { font-size: var(--fs-xl); font-weight: 700; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }