/* app.css — 한별 자미두수 앱 공통 (시안의 인라인 스타일을 클래스로 옮긴 것) */

/* 🚨 hidden 은 언제나 이긴다 — 이 저장소가 세 번 밟은 함정 (site/assets/css/style.css:99 와 같은 줄) */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--outer);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* 한글 줄바꿈 — 띄어쓰기에서만 줄을 바꾼다 (운영자 지시 2026-10-18 「이어져 ⏎ 요.」) · 한 낱말이 칸보다 길 때만 그 안에서 끊는다(이메일·주소) */
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 마지막 줄에 한두 글자만 남지 않게 — 물려받는 속성이라 여기 한 줄이면 앱 전체 (.tv-h 의 balance 처럼 따로 준 곳이 이긴다) · 모르는 브라우저는 무시한다 */
  text-wrap: pretty;
}
/* 두 줄로 접히는 짧은 이름표는 줄 길이를 고르게 — 「시간대 행운 ⏎ 지수」·「일로 불리는 ⏎ 힘」처럼 한 낱말만 넘어가지 않게 (2026-10-18) */
.eyebrow, .nm { text-wrap: balance; }
/* 🚨 명반 격자는 손으로 잰 칸이라 예전 줄바꿈 그대로 (「관/대」처럼 한두 글자씩 끊기는 것이 설계) */
.hs-mingban { word-break: normal; overflow-wrap: normal; text-wrap: wrap; }
/* 한 문장 한 줄 — JS 가 HB.한줄씩() 으로 문장 사이에 줄바꿈을 넣은 글을 받는 칸 (2026-10-18) */
.sentences { white-space: pre-line; }   /* 🚨 .ln 은 육각형 칸 문장이 이미 쓰는 이름 — 겹치지 않게 */
body.no-scroll { overflow: hidden; }
a { color: var(--ink); }
a:hover { color: var(--ink-hover); }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { outline: none; }

/* ── 휴대폰 틀 — PC 에서는 가운데 하나 (운영자 확정 2026-10-07 · 폭은 tokens.css --phone — 2026-10-18 390 → 440) ── */
.phone {
  position: relative;
  width: var(--phone);
  max-width: 100%;          /* 375px 화면에서 가로 스크롤이 생기지 않게 */
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom, 0px));   /* 아이폰 아래 막대 여백 (2026-10-15 · F4 · viewport-fit=cover) */
}
.phone.white { background: var(--surface); }
.phone.no-tab { padding-bottom: 0; }
/* PC 에서 틀이 회색 바깥에 묻히지 않게 옅은 그림자 (2026-10-18 · 운영자 「눈에 안 띈다」) — 휴대폰 폭(600px 아래)에는 없다 */
@media (min-width: 600px) { .phone { box-shadow: 0 0 0 1px rgba(18, 26, 51, .04), 0 12px 40px rgba(18, 26, 51, .10); } }

/* ── 상단 바 ── */
.topbar {
  flex: none;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  height: var(--topbar);
  padding: 0 4px;
}
.topbar.lined { border-bottom: 1px solid var(--line3); }
.topbar .title { text-align: center; font-size: calc(15px * var(--fs)); font-weight: 500; }
.icon-btn {
  width: var(--touch); height: var(--touch);
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink); text-decoration: none; padding: 0;
}

/* ── 글 ── */
.eyebrow { font-size: calc(13px * var(--fs)); color: var(--gold-text); letter-spacing: .14em; }
.h-serif { margin: 0; font-family: var(--font-title); font-weight: var(--w-title); }
h1.h-serif { font-size: calc(27px * var(--fs)); line-height: 1.45; }
h2.h-serif { font-size: calc(22px * var(--fs)); }
.dim { color: var(--dim); }
.small { font-size: calc(13px * var(--fs)); }
.num { font-family: var(--font-num); }

/* ── 카드 ── */
.stack { display: flex; flex-direction: column; gap: 14px; padding: 0 var(--gutter); }
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.card.tight { padding: 24px 12px 14px; }
.card .head { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }

/* ── 버튼 ── */
.btn {
  height: var(--cta); border: 0; border-radius: var(--r-btn);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: calc(16px * var(--fs)); font-weight: 500; text-decoration: none; width: 100%;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:disabled { background: var(--line3); color: var(--dim); }
a.btn-primary:hover { color: #fff; }   /* 링크 단추 — a:hover 의 남색 글씨가 남색 바탕에 묻히지 않게 (2026-10-15) */
.btn-soft { background: var(--soft); color: var(--ink); font-size: calc(15px * var(--fs)); }
.btn-kakao { background: var(--kakao); color: var(--kakao-ink); font-size: calc(15px * var(--fs)); }
.btn-naver { background: var(--naver); color: var(--naver-ink); font-size: calc(15px * var(--fs)); }   /* 네이버는 가짜 로그인 (2026-10-14 · 운영자 지시 「가짜로 일단」) · Apple 은 앱 개발 때 (2026-10-15) */
.btn-google { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: calc(15px * var(--fs)); }
.btn-google .g { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; font-size: calc(13px * var(--fs)); font-weight: 500; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill); padding: 8px 13px;
  font-size: calc(13px * var(--fs)); font-weight: 500; background: var(--ink); color: #fff; text-decoration: none; flex: none;
}
.link-dim { font-size: calc(13px * var(--fs)); color: var(--dim); padding: 10px 12px; text-decoration: none; min-height: var(--touch); display: inline-flex; align-items: center; }   /* 누름 자리 44px (2026-10-15 · C2) */

/* ── 목록 줄 ── */
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line3); padding: 14px 0; font-size: calc(14px * var(--fs)); color: var(--ink2);
  text-decoration: none; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left;
}
.row:first-of-type.no-line { border-top: 0; }
.row .chev { flex: none; }

/* ── 시트 (아래에서 올라오는 창) ── */
.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: var(--scrim);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.sheet {
  width: var(--phone); max-width: 100%;
  background: var(--surface);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 10px 20px 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.sheet:focus { outline: none; }      /* 열리면 HB.sheet 가 창으로 초점을 옮긴다 (키보드 다음 칸이 창 안에서 시작) */
.sheet .close-row { display: flex; justify-content: flex-end; }
.sheet .center { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-top: -18px; }
.sheet h2 { margin: 0; font-family: var(--font-title); font-size: calc(23px * var(--fs)); font-weight: var(--w-title); line-height: 1.4; }
.sheet p { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.7; color: var(--dim); }
.sheet .btns { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
/* 로그인 창 고지 — 단추 묶음 바로 위 한 줄 (app.js loginButtons · 2026-10-18 약관 재검토) */
.login-legal { margin: 0; font-size: calc(13px * var(--fs)); line-height: 1.6; color: var(--dim); text-align: center; word-break: keep-all; }
.login-legal a { color: var(--ink2); text-decoration: underline; text-underline-offset: 2px; }
/* 별 정보를 바꾸면 다시 잠기는 산 풀이 목록 (온보딩 확인창 · 2026-10-16) */
.paid-list { list-style: none; margin: 4px 0 0; padding: 12px 16px; border-radius: var(--r-row); background: var(--soft); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.paid-list li { font-size: calc(14px * var(--fs)); line-height: 1.5; color: var(--ink); }
.paid-list li::before { content: '· '; color: var(--gold-text); }
.sheet .paid-hint { font-size: calc(13.5px * var(--fs)); color: var(--dim2); }
/* 예전 별 정보로 산 풀이를 보는 화면의 띠 (풀이 보기 · 행운의 달 · 2026-10-16) */
.old-star { margin: 0; padding: 10px 14px; border-radius: var(--r-row); background: var(--cream); color: var(--gold-text); font-size: calc(13px * var(--fs)); line-height: 1.6; }

/* ── 체크(둥근) ── */
.check {
  border: 0; background: transparent; min-height: var(--touch);
  display: flex; align-items: center; gap: 7px; font-size: calc(13px * var(--fs)); color: var(--ink); padding: 0;
}
.check .box { width: 20px; height: 20px; border-radius: 50%; background: var(--line2); display: flex; align-items: center; justify-content: center; }
.check.on .box { background: var(--ink); }
.check.pillbox { background: var(--soft); border-radius: var(--r-pill); padding: 0 18px; gap: 8px; font-size: calc(13.5px * var(--fs)); align-self: center; }

/* ── 입력 (밑줄) ── */
.field { display: flex; flex-direction: column; gap: 10px; }
.field .lbl { display: flex; justify-content: space-between; align-items: baseline; }
.field label, .field .lbl span:first-child { font-size: calc(13px * var(--fs)); color: var(--dim); }
.field .hint { font-size: calc(13px * var(--fs)); color: var(--dim); }
.fw { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.fw.on { border-bottom-color: var(--ink); }
.fw:focus-within { border-bottom-color: var(--ink); }
.fw input, .fw select { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 0 10px; font-size: calc(20px * var(--fs)); font-weight: 500; color: var(--ink); }
.fw select { appearance: none; -webkit-appearance: none; font-size: calc(17px * var(--fs)); font-weight: 400; }
.field .msg { font-size: calc(13px * var(--fs)); color: var(--dim); }
.field .msg.err { color: var(--error); }
.radios { display: flex; gap: 4px; }
.radio { border: 0; border-radius: var(--r-pill); padding: 9px 14px; min-height: var(--touch); font-size: calc(13.5px * var(--fs)); font-weight: 500; background: var(--soft); color: var(--dim); }   /* 양력/음력 — 누름 자리 44px (C2) */
.radio.on { background: var(--ink); color: #fff; }
.radio.big { height: 52px; font-size: calc(15px * var(--fs)); flex: 1; }

/* ── 크림색 안내 상자 ── */
.notice {
  display: flex; align-items: center; gap: 12px;
  background: var(--cream); border: 1px solid var(--cream-line); border-radius: 16px; padding: 14px 14px 14px 16px;
}
.notice .txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.notice .t { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(14.5px * var(--fs)); }
.notice .d { font-size: calc(13px * var(--fs)); line-height: 1.55; color: var(--dim); font-weight: 400; }
/* 홈 첫 행동 — 글 아래 칸 폭 전체 단추 (2026-10-15 · 제안 B5) */
.notice-start { flex-direction: column; align-items: stretch; gap: 12px; }
.notice-row { display: flex; align-items: center; gap: 12px; }
.notice-btn { height: 48px; font-size: calc(15px * var(--fs)); }

/* ── 홈 ── */
.home-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 6px 20px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .word { display: flex; align-items: center; gap: 9px; }
.brand .w1 { font-family: var(--font-logo); font-size: 20px; font-weight: var(--w-logo); letter-spacing: .14em; color: var(--ink); line-height: 1; }
.brand .bar { width: 1px; height: 16px; background: #C9B48A; }
.brand .w2 { font-family: var(--font-logo); font-size: 16px; font-weight: var(--w-logo); letter-spacing: .16em; line-height: 1;
  background: linear-gradient(100deg, #8C6A35 0%, #C9A462 45%, #8C6A35 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold); }   /* 띠 그림 34 → 44 (2026-10-18 · 운영자 「너무 작다 · 눈에 띄게」) — 누름 자리(--touch 44)를 꽉 채운다 */
.avatar-empty { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 20px 20px; }
.hero .left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hero .rule { width: 28px; height: 1px; background: var(--gold); }
.hero h1 { margin: 0; font-family: var(--font-title); font-size: 25px; font-weight: var(--w-title); letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.hero h1 em { font-family: var(--font-num); font-style: normal; font-weight: 500; font-size: 31px; color: var(--gold); letter-spacing: 0; }
.hero .who { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-bottom: 4px; white-space: nowrap; }
.hero .who .top { font-size: 12.5px; font-weight: 500; color: var(--ink2); }
.hero .who .bottom { font-size: 12px; color: var(--dim); }

.today-head { display: flex; justify-content: space-between; align-items: baseline; }
.today-head .date { font-size: calc(13px * var(--fs)); color: var(--dim); }
.today-body { display: flex; align-items: center; gap: 18px; }
.ring { position: relative; width: 104px; height: 104px; flex: none; }
.ring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .score { font-family: var(--font-num); font-size: 38px; font-weight: 600; line-height: 1; }
.ring .cap { font-size: 12px; color: var(--dim); letter-spacing: .08em; padding-top: 3px; }
.today-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.today-txt .tags { display: flex; gap: 6px; align-items: center; }
.tag-ink { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(14px * var(--fs)); color: #fff; background: var(--ink); border-radius: var(--r-pill); padding: 3px 11px; }
.today-txt .msg { font-size: calc(14px * var(--fs)); line-height: 1.6; color: var(--ink2); font-weight: 400; }
/* 해결 문장 — 문제·낮은 점수 끝의 「(때)에 (행동)해 보세요.」 (운영자 지시 2026-10-11 · 꼴은 2026-10-16 운영자 확정 A · app/rules/tips.json) */
.tip { display: block; font-size: calc(13px * var(--fs)); line-height: 1.6; color: var(--gold-text); font-weight: 400; }
/* 내일 미리 보기 한 줄 (2026-10-15 · 제안 E1) */
.tomorrow { display: block; font-size: calc(13.5px * var(--fs)); line-height: 1.55; color: var(--dim); }
.time-hint { display: block; font-size: calc(13.5px * var(--fs)); line-height: 1.55; color: var(--gold-text); text-decoration: none; }
.ring .score .ring-sk { width: 46px; height: 26px; border-radius: 8px; }   /* 점수가 오기 전 뼈대 (D4) */
.tv-tip { margin: 6px 0 0; }
.lucky-rows { display: flex; flex-direction: column; gap: 8px; }
.lucky-row { display: flex; align-items: center; gap: 12px; background: var(--soft); border-radius: var(--r-row); padding: 12px 14px; }
.lucky-row .k { font-size: calc(13px * var(--fs)); color: var(--dim); width: calc(64px * var(--fs)); flex: none; white-space: nowrap;   /* 글자 크기를 따라 넓어진다 (C1) */ }
.lucky-row .v { font-size: calc(14px * var(--fs)); font-weight: 500; }
/* 오늘의 운 — 시안(LuxeE) 그대로: 색 점 두 개 겹침 · 숫자는 점수 글꼴(함렛) · 오행 덧말 (2026-10-08) */
.today-txt .tag-sub { font-size: calc(13px * var(--fs)); color: var(--dim); }
.lucky-row .dots { display: flex; flex: none; }
.lucky-row .dots:empty { display: none; }
.lucky-row .dots span { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px #C9CED9; }
.lucky-row .dots span + span { margin-left: -5px; box-shadow: 0 0 0 2px var(--soft); }
.lucky-row .v.num { font-family: var(--font-num); font-size: calc(20px * var(--fs)); font-weight: 600; line-height: 18px; }
.lucky-row .sub { font-size: calc(13.5px * var(--fs)); color: var(--dim); }
/* 별의 성격 키워드 — 행운의 물건 옆 금빛 태그 (운영자 확정 2026-10-08 · 값은 today.json 의 nature) */
.lucky-row .nat { font-size: calc(13px * var(--fs)); color: var(--gold-text); background: #F7F3EC; border: 1px solid #E8DCC6; border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }
.lucky-row .ic { display: flex; flex: none; }
.lucky-row .ic:empty { display: none; }
/* 앞으로 7일 (2026-10-08) — 막대 높이 = 점수 · 색 = 구간(길 금색 · 평 회색 · 조심 붉은색) */
/* 시간대 지수 — 주식 시세처럼 (2026-10-08 운영자 지시 「주식 지수처럼」 · today.html)
   큰 값 + 앞 시간 대비 등락 · 꺾은선(지난 시간 실선 · 남은 시간 점선) · 가는 점선 기준선 = 그날 지수.
   색은 오름 금색 · 내림 회색 (2026-10-15 · 제안 C3) — 예전엔 시세 관례로 빨강·파랑이었는데 앱의 빨강은 「조심」 구간색이라
   뜻이 둘이 됐다. 이제 빨강은 조심 하나뿐이다. 값은 토큰을 빌린다(이 카드 안에서만 이름을 붙인다). */
.q-card { --rise: var(--gold-text); --fall: var(--dim); }
.quote { display: flex; flex-direction: column; gap: 2px; }
.q-lb { font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.q-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.q-v { font-family: var(--font-num); font-size: calc(36px * var(--fs)); font-weight: 600; color: var(--ink); line-height: 1.1; }
.q-ch { font-size: calc(14.5px * var(--fs)); font-weight: 500; letter-spacing: .01em; }
.q-ch.rise { color: var(--rise); } .q-ch.fall { color: var(--fall); } .q-ch.flat { color: var(--dim); }
.q-chart { display: block; width: 100%; height: auto; cursor: pointer; margin-bottom: -6px; }
.q-chart .q-grid { stroke: var(--line3); stroke-width: 1; }
.q-chart .q-base { stroke: var(--dim2); stroke-width: 1; stroke-dasharray: 2 3; }
.q-chart .q-base-t { fill: var(--dim2); font-size: 10px; font-family: var(--font-body); }
.q-chart .q-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke: var(--dim); }
.q-chart .q-line.rise { stroke: var(--rise); } .q-chart .q-line.fall { stroke: var(--fall); }
.q-chart .q-line.q-fut { stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .55; }
.q-chart .q-stop { stop-color: var(--dim); } .q-chart .q-stop.rise { stop-color: var(--rise); } .q-chart .q-stop.fall { stop-color: var(--fall); }
.q-chart .q-dot { fill: var(--surface); stroke: var(--dim2); stroke-width: 1.2; }
.q-chart .q-dot.fut { stroke: var(--line); }
.q-chart .q-dot.now { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.q-chart .q-dot.sel { stroke: var(--surface); stroke-width: 2; fill: var(--dim); }
.q-chart .q-dot.sel.rise { fill: var(--rise); } .q-chart .q-dot.sel.fall { fill: var(--fall); }
.q-note { margin: 0; font-size: calc(13px * var(--fs)); color: var(--dim2); }
/* 아래 12칸 = 시간 고르기 단추 (차트의 점과 같은 12등분 — 칸 사이 틈 없이) */
.hour-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; }
.hour-bars button { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; border-radius: 10px;
  background: transparent; padding: 4px 0; font: inherit; color: var(--ink2); cursor: pointer; min-height: var(--touch); }
.hour-bars button .hs { font-family: var(--font-num); font-size: 10.5px; color: var(--dim); }
.hour-bars button.now .hs { color: var(--ink); font-weight: 600; font-family: inherit; font-size: 10px; }
.hour-bars button[aria-pressed="true"] { background: var(--soft); }
.hour-bars button[aria-pressed="true"] .hs { color: var(--ink); }
.week { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line2); padding-top: 14px; }
.week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.week-head .hint { font-size: calc(13px * var(--fs)); color: var(--dim2); }
.week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.week-days button, .lk-months button { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; border-radius: 12px;
  background: var(--soft); padding: 7px 0 6px; font: inherit; color: var(--ink2); cursor: pointer; min-height: var(--touch); }
.week-days button .dw, .lk-months button .dw { font-size: 10.5px; color: var(--dim); }
.week-days button .dd, .lk-months button .dd { font-size: 12.5px; font-weight: 500; }
.week-days button .bar, .lk-months button .bar { width: 6px; height: 34px; border-radius: 3px; background: var(--line2); display: flex; align-items: flex-end; overflow: hidden; }
.week-days button .bar i, .lk-months button .bar i { display: block; width: 100%; border-radius: 3px; background: var(--dim2); }
.week-days button.up .bar i, .lk-months button.up .bar i,
.week-days button.top .bar i, .lk-months button.top .bar i { background: var(--gold); }   /* top = 대길 (2026-10-12) */
.week-days button.down .bar i, .lk-months button.down .bar i { background: var(--error); }
.week-days button .sc, .lk-months button .sc { font-family: var(--font-num); font-size: 12px; font-weight: 600; }
.week-days button[aria-pressed="true"], .lk-months button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.week-days button[aria-pressed="true"] .dw, .lk-months button[aria-pressed="true"] .dw { color: var(--line); }   /* 남색 바탕 위 — dim2 가 짙어져(C2) 밝은 회색으로 */
.week-pick { display: flex; flex-direction: column; gap: 6px; background: var(--soft); border-radius: var(--r-row); padding: 12px 14px; }
.week-pick:empty { display: none; }
.week-pick .wh { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.week-pick .wh b { font-size: calc(14px * var(--fs)); color: var(--ink); font-weight: 500; }
.week-pick .wh .zn { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(13px * var(--fs)); color: #fff; background: var(--ink); border-radius: var(--r-pill); padding: 1px 9px; }
.week-pick .wl { font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--ink2); font-weight: 400; }
/* 「왜」 줄 — 행운의 달 12달 막대 설명이 쓴다. ⚠️ 7일 설명에서 행운 3종 줄을 뺄 때(7e2ece0) 같이 지웠다가
   이 자리의 글씨가 본문 크기로 커졌다 — 오늘의 운세가 안 써도 지우지 않는다 (test-app-lucky ⑥-c) */
.week-pick .wt { font-size: calc(13px * var(--fs)); color: var(--dim); line-height: 1.6; }
/* 하면 좋은 일 · 미룰 일 — 이름표 칸 + 내용 (운영자 확정 2026-10-12) · 오늘의 운세 7일 설명과
   행운의 달(이번 달 카드 · 12달 막대 설명 · 좋은 달 · 조심할 달)이 같은 모양을 쓴다 — 이달의 방위 줄도 같은 칸 */
.week-pick .act, .lk-row .act, .lk-acts .act { display: grid; grid-template-columns: calc(76px * var(--fs)) minmax(0, 1fr); gap: 8px; font-size: calc(13px * var(--fs)); line-height: 1.55; color: var(--ink2); }
.week-pick .act .k, .lk-row .act .k, .lk-acts .act .k { font-size: calc(13px * var(--fs)); font-weight: 500; }
.week-pick .act.do .k, .lk-row .act.do .k, .lk-acts .act.do .k { color: var(--gold-text); }
.week-pick .act.no .k, .lk-row .act.no .k, .lk-acts .act.no .k { color: var(--dim); }
.week-pick .act.dir .k, .lk-row .act.dir .k, .lk-acts .act.dir .k { color: var(--ink2); }
.lk-acts { display: flex; flex-direction: column; gap: 6px; background: var(--soft); border-radius: var(--r-row); padding: 12px 14px; }
.lk-acts:empty { display: none; }

/* ── 행운의 달 + 방위 (lucky.html · 2026-10-08) — 막대는 위 「앞으로 7일」과 같은 모양 · 가장 좋은 달 셋은 금색 테두리 ── */
.lk-head { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px 0; }
.lk-head h1.h-serif { font-size: calc(22px * var(--fs)); }
.lk-why { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: calc(13.5px * var(--fs)); color: var(--dim); line-height: 1.6; }
.lk-why li::before { content: '· '; }
.lk-why:empty { display: none; }
.lk-lock h2.h-serif { font-size: calc(19px * var(--fs)); }
.lk-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.lk-months button { padding: 6px 0 5px; }
.lk-months button .bar { height: 46px; }
.lk-months button .dd { font-size: 10.5px; font-weight: 400; }
.lk-months button .dw { font-size: 9.5px; min-height: 12px; }
.lk-months button .sc { font-size: 11px; }
.lk-months button.best { box-shadow: inset 0 0 0 1.5px var(--gold); }
.lk-row { display: flex; flex-direction: column; gap: 4px; background: var(--soft); border-radius: var(--r-row); padding: 12px 14px; }
.lk-row .h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lk-row .h b { font-size: calc(14px * var(--fs)); font-weight: 500; }
.lk-row .h .zn { font-size: calc(13px * var(--fs)); color: var(--dim); }
.lk-row.up .h .zn, .lk-row.top .h .zn { color: var(--gold-text); }
.lk-row.down .h .zn { color: var(--error); }
.lk-row .r { font-size: calc(13px * var(--fs)); color: var(--dim2); }
.lk-row .l { font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--ink2); font-weight: 400; }
.lk-row .w { font-size: calc(13px * var(--fs)); color: var(--dim); line-height: 1.6; }
.lk-compass { display: block; width: 180px; height: 180px; margin: 4px auto 6px; }
.lk-dir { display: flex; flex-direction: column; gap: 3px; border-radius: var(--r-row); padding: 12px 14px; background: var(--soft); margin-top: 8px; }
.lk-dir b { font-size: calc(14px * var(--fs)); font-weight: 500; }
.lk-dir.good b { color: var(--gold-text); }
.lk-dir.bad b { color: var(--error); }
.lk-dir span { font-size: calc(13.5px * var(--fs)); color: var(--ink2); line-height: 1.6; font-weight: 400; }

.menu9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.menu9 a { border: 0; background: transparent; padding: 10px 2px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; }
/* 9칸 메뉴 — 점신처럼 첫 화면에서 크게 (2026-10-18 · 원 58 → 64 · 아이콘 26 → 40 · 크림 바탕 + 금빛 테) */
.icon-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--cream-line); display: flex; align-items: center; justify-content: center; }
.menu9 span { font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--ink); }
.finder { border: 0; background: var(--soft); border-radius: var(--r-btn); margin: 2px 4px 0; padding: 14px 14px 14px 12px; display: flex; align-items: center; gap: 12px; text-align: left; color: var(--ink); text-decoration: none; }
.finder .ic { width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line2); flex: none; display: flex; align-items: center; justify-content: center; }
.finder .txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.finder .t { font-size: calc(15px * var(--fs)); font-weight: 500; }
.finder .d { font-size: calc(13.5px * var(--fs)); color: var(--dim); font-weight: 400; line-height: 1.5; }

.lucky-list a { border: 0; border-top: 1px solid var(--line3); background: transparent; padding: 14px 0; display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none; color: var(--ink); }
.lucky-list .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--soft2); flex: none; display: flex; align-items: center; justify-content: center; }
.lucky-list .txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.lucky-list .t { display: flex; gap: 8px; align-items: center; font-size: calc(15px * var(--fs)); font-weight: 500; }
.lucky-list .d { font-size: calc(13.5px * var(--fs)); color: var(--dim); font-weight: 400; }
.badge-premium { font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--gold-text); background: var(--premium); border-radius: var(--r-pill); padding: 2px 8px; }
/* 평생운 — 날·달·해마다 바뀌지 않는 것 (귀인 띠 · 행운 3종 · 운영자 지시 2026-10-12 「평생운이라고 표시해 줘야 이해한다」) */
.badge-life { font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--ink2); background: transparent; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.lk-top { display: flex; align-items: center; gap: 8px; }
.lk-head .badge-life { font-size: calc(13px * var(--fs)); padding: 2px 10px; }
.lk-sub { white-space: pre-line; line-height: 1.6; }

.gtabs { display: flex; gap: 18px; }
.gtab { border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 4px 2px 5px; min-height: var(--touch); display: inline-flex; align-items: flex-end; font-size: calc(13px * var(--fs)); letter-spacing: .14em; color: var(--dim2); font-weight: 400; }   /* 누름 자리 44px — 밑줄은 글 바로 아래 그대로 (C2) */
.gtab.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--gold); }
.gwrap { overflow: hidden; touch-action: pan-y; }
.gtrack { display: flex; align-items: flex-start; transition: transform 700ms cubic-bezier(.22, .61, .36, 1); }   /* 탭마다 카드 수가 달라도(궁합 5 · 직장·사업 4) 짧은 탭의 카드가 늘어나지 않게 (2026-10-14) */
.gpanel { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* 아이콘 바로 밑에 제목 — 줄마다 제목 높이가 같다 (2026-10-18 운영자 확정 A 「위로 가지런히」 · 예전엔 글이 아래 끝에 붙어 설명이 두 줄인 카드만 제목이 올라갔다) */
.gcard { border: 0; background: var(--soft); border-radius: var(--r-tab); padding: 16px 14px; min-height: 138px; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; text-align: left; text-decoration: none; color: var(--ink); }
.gcard .ic { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.gcard .t { font-size: calc(15px * var(--fs)); font-weight: 600; line-height: 1.35; }
.gcard .d { font-size: calc(13px * var(--fs)); color: var(--dim); line-height: 1.5; font-weight: 400; }
.gcard .ch { display: block; }   /* 설명의 말 덩어리마다 한 줄 — 「살림과 돈, / 함께 늙어 가는 힘」 (2026-10-18 운영자 지시 · 덩어리가 칸보다 길면 그 안에서 띄어쓰기로) */
.gpanel .gcard:last-child:nth-child(odd) .ch { display: inline-block; }   /* 한 줄 전체 가로 카드는 자리가 넉넉해 한 줄로 이어진다 (모자라면 덩어리 사이에서) */
/* 홀수 탭의 마지막 카드는 한 줄 전체 · 가로로 (2026-10-14 · 궁합 탭이 부부 궁합으로 5장) — 키가 낮아 다른 탭과 높이 차이가 작다 */
.gpanel .gcard:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
.gpanel .gcard:last-child:nth-child(odd) .ic { flex: none; }
.gdots { display: flex; justify-content: center; gap: 6px; padding-top: 2px; }
.gdots span { width: 6px; height: 3px; border-radius: 2px; background: var(--dot); }   /* 늘어나는 모션은 아래 no-preference 안 */
.gdots span.on { width: 18px; background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .gtrack { transition: none !important; } }

/* ── 홈 큰 배너 (2026-10-18 · 운영자 「점신처럼 눈에 띄게」 · 확정 「신년운세 + 2~3장 돌림」) — 남색 바탕 · 금색 알약 · 큰 흰 제목 · 별·달 그림.
   넘기는 모션은 바로 아래 no-preference 안 · 넘김 규칙(8초 · 멈춤 네 갈래)은 home.js 「배너」 ── */
.hb-banner { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--ink); color: #fff; }
.bn-sky { position: absolute; right: 4px; top: 6px; width: 132px; height: 142px; pointer-events: none; }
.bn-wrap { overflow: hidden; touch-action: pan-y; }
.bn-track { display: flex; }
.bn-slide { flex: 0 0 100%; min-width: 0; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 22px 46px; color: #fff; text-decoration: none; user-select: none; -webkit-user-drag: none; }
.bn-slide:hover { color: #fff; }
.bn-slide:focus-visible { outline: 2px solid #E9D6A8; outline-offset: -4px; border-radius: var(--r-card); }
.bn-pill { font-size: calc(13.5px * var(--fs)); font-weight: 700; color: var(--ink); background: var(--gold); border-radius: var(--r-pill); padding: 5px 13px; }
.bn-t { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(26px * var(--fs)); line-height: 1.35; max-width: 72%; }   /* 오른쪽 달 그림과 겹치지 않게 */
.bn-d { font-size: calc(15px * var(--fs)); font-weight: 500; color: #E9D6A8; }
.bn-dots { position: absolute; left: 12px; bottom: 8px; z-index: 2; display: flex; }
.bn-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.bn-dots button::before { content: ''; width: 6px; height: 4px; border-radius: 2px; background: #5A6385; }
.bn-dots button.on::before { width: 18px; background: #E9D6A8; }
.bn-dots button:focus-visible { outline: 1px solid #E9D6A8; outline-offset: -3px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .bn-track { transition: transform 700ms cubic-bezier(.22, .61, .36, 1); }
  .bn-dots button::before { transition: width 400ms ease, background-color 400ms ease; }
}

/* ── 바닥글 (사업자 정보 · 사이트 바닥글과 같은 내용 · 값은 서버가 src/biz.js 에서 넣는다) ── */
.biz { padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 10px; font-size: calc(13px * var(--fs)); line-height: 1.65; color: var(--dim); }   /* 글자 작게 (운영자 지시 2026-10-07) */
.biz .lines { display: flex; flex-direction: column; gap: 2px; }
.biz .k { color: var(--dim); font-weight: 600; }   /* 제목(상호·대표…)은 약하게 굵게 — 값과 구분 (2026-10-18 운영자 지시 · 옅은 색에 굵게는 흐려 보여 값과 같은 색) */
.biz .sep { color: var(--line); }
.biz .legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: calc(13px * var(--fs)); }
.biz .legal a { color: var(--ink2); text-decoration: none; }
.biz .legal b { font-weight: 500; }
.biz .legal span { color: var(--dim2); }
.biz a { color: var(--dim); text-decoration: none; }

/* ── 하단 탭바 — 고정 · 가운데 --phone 폭 ── */
.tabbar {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: var(--phone); max-width: 100%;
  background: var(--surface); border-top: 1px solid var(--line2);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 40;   /* 아이폰 아래 막대 여백 (F4) */
}
.tabbar .tab { height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--dim2); text-decoration: none; font-size: 12px; }
.tabbar .tab.on { color: var(--ink); font-weight: 500; }
/* 지금 탭 표시 — 탭바 윗선 위의 금색 짧은 막대 (HB.tabbar 가 지금 탭 안에만 둔다 · 화면이 바뀌면 옛 탭에서 미끄러져 온다 · 아래 모션 절) */
.tabbar .tab { position: relative; }
.tabbar .tab .ind { position: absolute; top: -7px; left: 50%; width: 20px; height: 2px; margin-left: -10px; border-radius: 2px; background: var(--gold); }

/* ── 잠깐 뜨는 알림 (HB.toast) — 자리는 여기, 떠오르고 사라지는 모션은 아래 no-preference 안 ── */
.hb-toast-host { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 70; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
body:has(#tabbar) .hb-toast-host { bottom: calc(var(--tabbar) + 14px); }
.hb-toast { max-width: calc(var(--phone) - 32px); background: var(--ink); color: #fff; font-size: calc(13.5px * var(--fs)); line-height: 1.5; padding: 11px 18px; border-radius: 14px; box-shadow: 0 8px 24px rgba(18, 26, 51, .18); text-align: center; }

/* ── CTA 바닥 고정 영역 (온보딩) ── */
.cta-wrap { flex: none; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--surface); position: sticky; bottom: 0; }
/* 탭바가 있는 화면 — 바닥에 붙으면 고정 탭바(z 40)에 반쯤 가려 눌리지 않았다 (2026-10-08 · topic.html 실측:
   단추 807~863 · 탭바 829~900). 내용이 짧은 상품 화면은 바닥에 안 붙어서 드러나지 않았을 뿐 같은 구조다. */
.phone:has(> .tabbar) .cta-wrap { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px)); padding-bottom: 18px; }

/* ── 공통 유틸 ── */
.col { display: flex; flex-direction: column; }
.gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap14 { gap: 14px; } .gap32 { gap: 32px; }
.between { display: flex; justify-content: space-between; align-items: baseline; }
.center-row { display: flex; justify-content: center; }
.step-bar { display: flex; align-items: center; gap: 10px; }
.step-bar .step { font-size: calc(13px * var(--fs)); letter-spacing: .14em; color: var(--gold-text); font-weight: 500; }
.step-bar .bars { display: flex; gap: 4px; }
.step-bar .bars i { width: 18px; height: 3px; border-radius: 2px; background: var(--line2); display: block; }
.step-bar .bars i.on { background: var(--gold); }
.zodiac-preview { display: flex; align-items: center; gap: 12px; background: var(--cream); border: 1px solid var(--cream-line); border-radius: 16px; padding: 10px 14px 10px 10px; }
.zodiac-preview img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2.5px #fff, 0 0 0 3.5px var(--gold); }   /* 48 → 76 (2026-10-18 · 운영자 「눈에 띄게」) */
.zodiac-preview .t { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(17px * var(--fs)); }
.zodiac-preview .d { font-size: calc(13px * var(--fs)); color: var(--dim); }

/* ── 상품 · 만드는 중 · 보관함 · 뷰어 (M2) ── */
.price { font-family: var(--font-num); font-size: calc(28px * var(--fs)); font-weight: 600; }
.price small { font-family: var(--font-body); font-size: calc(13px * var(--fs)); font-weight: 400; color: var(--dim); margin-left: 6px; }
.toc { display: flex; flex-direction: column; gap: 10px; }
.toc .it { display: flex; gap: 12px; align-items: flex-start; }
.toc .n { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: calc(13px * var(--fs)); display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-num); }
.toc .t { font-size: calc(15px * var(--fs)); font-weight: 500; }
.toc .d { font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.elapsed { font-family: var(--font-num); font-size: calc(34px * var(--fs)); text-align: center; }
.sec h3 { margin: 0 0 8px; font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(18px * var(--fs)); }
.sec p { margin: 0; font-size: calc(15px * var(--fs)); line-height: 1.9; color: var(--ink2); font-weight: 400; word-break: keep-all; }
.sec .num { font-size: calc(13px * var(--fs)); color: var(--gold-text); letter-spacing: .14em; margin-bottom: 6px; display: block; }
/* 카드 모양 (2026-10-11 · 운영자 확정 「제목 + 금빛 한 줄 + 본문」 — 스크린샷처럼 결론 한 줄을 금빛으로) */
.sec .lead { margin: 2px 0 12px; font-size: calc(16px * var(--fs)); line-height: 1.7; font-weight: 500; color: var(--gold-text); }
.sec p + p { margin-top: 12px; }
.sec-notice { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--soft2); font-size: calc(13px * var(--fs)); line-height: 1.7; color: var(--ink2); word-break: keep-all; }
.arc-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line3); padding: 14px 0; text-decoration: none; color: var(--ink); }
.arc-row:first-child { border-top: 0; }
.arc-row .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--soft2); display: flex; align-items: center; justify-content: center; flex: none; }
.arc-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.arc-row .t { font-size: calc(15px * var(--fs)); font-weight: 500; }
.arc-row .d { font-size: calc(13px * var(--fs)); color: var(--dim); }
.arc-row .d .keep { color: var(--gold-text); }   /* 보관함 30일 — 「n일 남음」 (2026-10-14) */
.arc-row .d .keep.soon { font-weight: 500; }      /* 3일 안 (2026-10-15 · 제안 F10) */
/* 구매내역의 결제 줄 — 줄 자체는 링크가 아니고 안에 「풀이 열기」·「영수증」 링크가 있다 (2026-10-16 · 배포 구조 ⑤) */
.pay-row { align-items: flex-start; }
.pay-row .d { word-break: break-all; }
.pay-row .d a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; display: inline-block; min-height: 24px; line-height: 24px; }

/* 결제 뒤 (pay-done · 2026-10-16 · 운영자 확정 시안 D 「결제가 끝난 뒤를 간단하고 고급스럽게」) — 가운데 금빛 표시 하나 + 제목 한 줄 + 안내 한 줄.
 * 표시 상태는 #mark 의 data-state: wait(확인 중 · 금빛 호) · ok(열림 · 원이 닫히고 체크) · info(시험 결제 · i) · warn(늦음·실패 · !).
 * 여기는 끝 모양만 — 움직임(돌기·닫기·그리기·톡)은 아래 no-preference 안에만 있다. 표시는 display 로만 갈라 「투명 시작」이 없다. */
.pd { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 48px 28px calc(28px + env(safe-area-inset-bottom)); }
.pd-mark { width: 88px; height: 88px; flex: none; }
.pd-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pd-track { fill: none; stroke: var(--line2); stroke-width: 3; }
.pd-arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 64 175; transform: rotate(-90deg); transform-origin: 44px 44px; }
.pd-check, .pd-info, .pd-warn { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; display: none; }
.pd-mark[data-state="ok"] .pd-arc { stroke-dasharray: 239 0; }
.pd-mark[data-state="ok"] .pd-check { display: inline; stroke: var(--gold); }
.pd-mark[data-state="info"] .pd-arc, .pd-mark[data-state="warn"] .pd-arc { display: none; }
.pd-mark[data-state="info"] .pd-info { display: inline; stroke: var(--dim); }
.pd-mark[data-state="warn"] .pd-warn { display: inline; stroke: var(--gold-text); }
.pd-words { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pd-title { margin: 0; font-size: calc(23px * var(--fs)); line-height: 1.35; }
.pd-msg { margin: 0; max-width: 300px; color: var(--dim); font-size: calc(14px * var(--fs)); line-height: 1.7; }
.pd-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.pd-order { margin: 6px 0 0; color: var(--dim2); font-size: calc(13px * var(--fs)); line-height: 1.6; word-break: break-all; }
@media (prefers-reduced-motion: no-preference) {
  .pd-mark[data-state="wait"] svg { animation: pd-spin 1.1s linear infinite; }
  .pd-mark[data-state="ok"] .pd-arc { animation: pd-close .45s ease-out both; }
  .pd-mark[data-state="ok"] .pd-check { stroke-dasharray: 46; animation: pd-draw .42s .3s ease-out both; }
  .pd-mark[data-state="ok"] svg { animation: pd-pop .5s .55s cubic-bezier(.2, .8, .3, 1.25) both; }
  @keyframes pd-spin { to { rotate: 360deg; } }
  @keyframes pd-close { from { stroke-dasharray: 64 175; } to { stroke-dasharray: 239 0; } }
  @keyframes pd-draw { from { stroke-dashoffset: 46; } to { stroke-dashoffset: 0; } }
  @keyframes pd-pop { 0% { scale: 1; } 50% { scale: 1.06; } 100% { scale: 1; } }
}
.keep-soon { margin: 0; background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-row); padding: 11px 14px; font-size: calc(13px * var(--fs)); line-height: 1.6; color: var(--ink2); }
a.keep-soon { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; }
.state { font-size: calc(13px * var(--fs)); font-weight: 500; border-radius: var(--r-pill); padding: 3px 9px; background: var(--soft); color: var(--dim); flex: none; }
.state.done { background: var(--cream); color: var(--gold-text); }
.state.run { background: var(--ink); color: #fff; }
.empty { text-align: center; color: var(--dim); font-size: calc(13.5px * var(--fs)); padding: 28px 0; line-height: 1.7; }
.err-box { background: #F6E6E8; color: var(--error); border-radius: var(--r-row); padding: 12px 14px; font-size: calc(13px * var(--fs)); line-height: 1.6; }
/* 서비스 점검 안내 띠 (2026-10-18 · 자동 점검 · app.js 점검띠) — 겁주지 않는 크림 바탕 · 경고색을 안 쓴다 */
.maint-bar { display: flex; flex-direction: column; gap: 3px; background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-row); padding: 12px 14px; color: var(--ink2); font-size: calc(13px * var(--fs)); line-height: 1.6; }
.maint-bar b { color: var(--gold-text); font-weight: 600; font-size: calc(13.5px * var(--fs)); }

/* ── 뼈대 화면 — 「불러오는 중…」 글자 대신 올 모양을 회색 막대로 (운영자 확정 2026-10-08 「들어올 때 부드럽게」).
 *    회색 바탕은 여기(동작 줄이기여도 보인다), 숨 쉬듯 반짝이는 모션은 아래 no-preference 안.
 *    화면 읽기는 숨은 글(.sr)「불러오는 중…」을 읽는다 ── */
.sk { display: flex; flex-direction: column; gap: 14px; }
.sk-row { display: flex; align-items: center; gap: 12px; }
.sk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-line { display: block; height: 10px; border-radius: 5px; background: var(--line2); }
.sk-line.thick { height: 18px; border-radius: 8px; }
.sk-circle { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--line2); }
.sk-block { display: block; border-radius: 16px; background: var(--line2); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 주제를 바꾸는 동안 — 앞 주제 그림이 흐려지고 눌리지 않는다 (topic.js · 다 그리면 뗀다) */
.hb-busy { opacity: .45; pointer-events: none; }

/* ── 글자 크기 (설정 · html[data-size]) — 앱 전체에 닿는다 (2026-10-15 · 제안 C1 · 예전엔 풀이 글 .sec p 에만 닿았다).
 * 글자 크기는 전부 calc(Npx * var(--fs)) 로 적는다 — 새 규칙을 쓸 때도 그렇게 (tests/test-app-type.js 가 본다).
 * 🔴 칸이 고정된 곳은 배율을 안 받는다 — 점수 원 · 시간대 12칸 · 7일·12달 막대 · 12년 동그라미 · 주제 격자 5칸 ·
 *    탭바 · 머리 로고 · SVG 글. 커지면 칸 밖으로 넘쳐 잘린다(명반 격자 「별이 소리 없이 사라진다」와 같은 함정) ── */
html { --fs: 1; }
html[data-size="s"] { --fs: .9; }
html[data-size="l"] { --fs: 1.12; }

/* ── 주제 결과 (topic.html · 2026-10-08) — 시안 「한별 주제별 결과 시안 -1.html」의 육각형·12년 곡선을 앱 색으로 ──
 * 색 이름은 tv- 접두로 이 화면 안에만 둔다. 구간 색(상승/주의 띠)은 시안 값 그대로.
 * 🚨 display 를 정하는 규칙이 있어도 [hidden] 이 이긴다 (위의 [hidden]{display:none !important}). */
.tv {
  --tv-accent: #2D3A66; --tv-accent-soft: #E7EAF3;
  --tv-sun: #B5821F; --tv-storm: #B83A33; --tv-next: #C2552E;
  --tv-band-sun: #FBF3E1; --tv-band-storm: #FBEAE8;
}
.tv-head { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px 0; }
.tv-head h1.h-serif { font-size: calc(22px * var(--fs)); }
.tv-topics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tv-tp { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px 9px; border: 0; border-radius: var(--r-row); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-card); }
.tv-tp i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--soft2); }
.tv-tp span { font-size: 11px; line-height: 1.3; text-align: center; word-break: keep-all; }
/* 묶음 격자(궁합·직장·사업 · 5칸씩)일 때만 위에 「‹ 전체 주제」 (2026-10-14 · 운영자 확정) — 누르면 10칸으로 돌아온다 · 크기를 바꾸는 속성 없음 */
.tv-all { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; margin: -4px 0 -6px; padding: 4px 6px 4px 2px; font: inherit; font-size: calc(13px * var(--fs)); color: var(--gold-text); background: none; border: 0; cursor: pointer; }
.tv-all svg { rotate: 180deg; }
/* 두 사람 궁합 — 누구와 볼까요 (2026-10-14 · 운영자 확정 「두 사람 명반 · 상대 동의 체크」) */
.pair-card { display: flex; flex-direction: column; gap: 12px; }
.pair-who { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--gold-text); }
/* 결제 고정 표시 (2026-10-14) — 크림 바탕 한 줄 · 자물쇠 그림은 글자 앞 작은 금빛 점으로 대신한다 */
.pair-lock { margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--cream-line); border-radius: var(--r-row); background: var(--cream); font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--ink2); }
.pair-lock b { color: var(--gold-text); font-weight: 600; }
.pair-lock svg { flex: none; margin-top: 2px; }
.pair-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pair-chip { font: inherit; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); cursor: pointer; }
.pair-chip b { font-size: calc(14px * var(--fs)); font-weight: 500; }
.pair-chip span { font-size: calc(13px * var(--fs)); color: var(--dim); }
.pair-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pair-chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .75); }
.pair-rels-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pair-rels { flex-wrap: wrap; }
.linkish { font: inherit; padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; cursor: pointer; }
.pair-sheet { gap: 16px; max-height: 92vh; overflow-y: auto; }
/* 나와 보기 / 다른 두 사람 (2026-10-14 · 운영자 지시 「다른 사람 2사람끼리도」) — 설정 화면의 글자 크기 고르개와 같은 모양 */
.pair-mode { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--soft); }
.pair-mode button { flex: 1; font: inherit; font-size: calc(13px * var(--fs)); font-weight: 500; padding: 9px 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--dim); cursor: pointer; }
.pair-mode button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pick); }
.pair-rows { display: flex; flex-direction: column; gap: 12px; }
.pair-row { display: flex; flex-direction: column; gap: 6px; }
.pair-chip.add { border-style: dashed; color: var(--dim); font-size: calc(13px * var(--fs)); }

/* ── 태어난 시간 찾기 (2026-10-14 · 운영자 지시 2차 「큰일을 겪은 해와 그 일을 문장으로 3개 · 예시 몇 개 · 결제 후 AI 로 추론」) ──
 * 큰일 칸 셋(문장으로) · 「이렇게 적으면 잘 찾아요」 예시 · 결과 카드 */
.fd-sub { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.65; color: var(--dim); }
.fd-tip { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.65; color: var(--ink2); background: var(--soft); border-radius: var(--r-row); padding: 10px 12px; }
.fd-err { margin: 0; font-size: calc(13.5px * var(--fs)); color: var(--error); }
/* 질문 1·2 의 보기 줄 — 제목 + 작은 덧말 · 고르면 금빛 테두리와 동그라미 */
.choice { font: inherit; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-row); background: var(--surface); color: var(--ink); cursor: pointer; }
.choice .ct { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choice b { font-size: calc(15px * var(--fs)); font-weight: 500; line-height: 1.45; }
.choice small { font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--dim); }
.choice .ck { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line2); }
.choice.on { border-color: var(--gold); background: var(--cream); }
.choice.on .ck { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 3px var(--cream); }
.fd-slot { display: flex; flex-direction: column; gap: 6px; }
.fd-slot label { font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--ink); }
.fd-ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-row);
  background: var(--surface); color: var(--ink); font-size: calc(15px * var(--fs)); line-height: 1.55; }
.fd-ta:focus { border-color: var(--ink); }
.fd-ta[aria-invalid="true"] { border-color: var(--error); }
.fd-slot .cnt { align-self: flex-end; font-size: calc(13px * var(--fs)); color: var(--dim2); }
.fd-ex b { display: block; margin-bottom: 4px; font-weight: 500; color: var(--ink); }
.fd-ex ul { margin: 0; padding-left: 18px; }
.fd-best { border: 1.5px solid var(--gold); border-radius: var(--r-card); background: var(--cream); padding: 16px 18px; }
.fd-time { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(26px * var(--fs)); line-height: 1.3; color: var(--ink); }
.fd-conf { margin-top: 6px; font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.fd-conf b { font-weight: 500; color: var(--gold-text); }
.fd-why-t { margin: 0; font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--ink); }
.fd-why { margin: 0; padding-left: 18px; font-size: calc(13.5px * var(--fs)); line-height: 1.75; color: var(--ink2); }
.fd-nav { display: flex; gap: 8px; }
.fd-nav .btn { flex: 1; }
.fd-sub, .fd-tip, .fd-why, .fd-ta, .choice b, .choice small { word-break: keep-all; }   /* 낱말 가운데서 줄이 안 갈리게 */
.tv-tp[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold); }
.tv-tp[aria-pressed="true"] i { background: var(--cream); }
.tv-tp:focus-visible, .tv-years button:focus-visible, .tv-flow .ic:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tv-h { font-size: calc(19px * var(--fs)); line-height: 1.45; text-wrap: balance; word-break: keep-all; }   /* 「…약합니 / 다」처럼 한 글자만 넘어가지 않게 */
.tv-hex { width: 100%; height: auto; display: block; max-width: 340px; margin: 0 auto; }
.tv-axes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tv-axes li { display: grid; grid-template-columns: calc(76px * var(--fs)) calc(54px * var(--fs)) minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: calc(13.5px * var(--fs)); }
.tv-axes .nm { font-weight: 500; word-break: keep-all; }   /* 긴 칸 이름(「남에게 보이는 나」)이 낱말 가운데서 끊기지 않게 — 띄어쓰기에서만 (2026-10-14) */
.tv-axes .sc { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.tv-axes .ln { color: var(--dim); font-weight: 400; }
.tv-axes li.hi .sc { color: var(--tv-accent); } .tv-axes li.lo .sc { color: var(--tv-storm); }
.tv-axes .tip { grid-column: 1 / -1; margin-top: -2px; }   /* 약한 칸의 해결 문장 — 좁은 셋째 칸이 아니라 줄 전체 폭으로 */
/* 산 뒤 점수 표 「칸 · 평생 · 그해 · 달라진 점」 (2026-10-18 · 운영자 확정 시안 C) — 색은 육각형의 두 선과 같다 */
.tv-axt { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--fs)); }
.tv-axt th { font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--dim); text-align: left; padding: 0 4px 6px; white-space: nowrap; }
.tv-axt td { padding: 8px 4px; border-top: 1px solid var(--line); vertical-align: baseline; }
.tv-axt .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-axt th.y, .tv-axt td.y { color: var(--tv-next); }
.tv-axt td.y { font-weight: 600; }
.tv-axt td.l { color: var(--tv-accent); font-weight: 500; }   /* 평생 칸은 늘 남색 — 가장 낮은 칸을 빨갛게 칠하면 옆의 그해(주황)와 헷갈린다 */
.tv-axt .nm { font-weight: 500; word-break: keep-all; }
.tv-axt .nm .ln { display: block; font-size: calc(13px * var(--fs)); color: var(--dim); font-weight: 400; }
.tv-axt .d .down { color: var(--tv-next); } .tv-axt .d .up { color: var(--tv-accent); } .tv-axt .d .same { color: var(--dim); }
.tv-axt tr.tip-row td { border-top: 0; padding-top: 0; }
.tv-years { display: flex; gap: 6px; flex-wrap: wrap; }
.tv-years button { font: inherit; font-size: calc(13px * var(--fs)); border: 1px solid var(--line2); background: var(--surface); color: var(--dim); padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer; }
.tv-years button[aria-pressed="true"] { border-color: var(--tv-next); color: var(--tv-next); font-weight: 500; }
.tv-key { display: flex; gap: 14px; font-size: calc(13px * var(--fs)); color: var(--dim); flex-wrap: wrap; }
.tv-key span { display: inline-flex; align-items: center; gap: 5px; }
.tv-key i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--tv-accent); }
.tv-key i.n { border-top-color: var(--tv-next); }
.tv-lock { font-size: calc(14px * var(--fs)); margin: 0; background: var(--soft); border-radius: var(--r-row); padding: 12px 14px; line-height: 1.6; }
.tv-lock b { font-weight: 500; }
.tv-lock small { display: block; color: var(--dim); font-size: calc(13px * var(--fs)); margin-top: 2px; }
/* 이름표 카드 — 「나에게 맞는 직업 · 취업 직종 · 업종」 (2026-10-14 · 운영자 확정 「무료에 3개 + 산 뒤 전부」).
   떠오르는 움직임은 .hb-rise 한 벌(no-preference 안) — 여기는 놓이는 모양만 */
.nm-apt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.nm-apt span { margin-right: 2px; }
.nm-apt b { font-weight: 500; font-size: calc(13px * var(--fs)); color: var(--gold-text); background: #F7F3EC; border: 1px solid #E8DCC6; border-radius: var(--r-pill); padding: 2px 9px; }
.nm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nm-list li { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: calc(14px * var(--fs)); color: var(--ink); word-break: keep-all; }
.nm-list li .no { font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--gold-text); }
.nm-list li.q { border-style: dashed; color: var(--dim2); min-width: 44px; justify-content: center; }
/* 재물운 — 나의 돈 유형 · 앞으로 30일 돈 기운 좋은 날 (2026-10-18 · app/lib/돈.js). 움직임은 .hb-rise 한 벌 — 여기는 놓이는 모양만 */
.wf-top { display: flex; align-items: center; gap: 14px; }
.wf-ticket { flex: none; width: 92px; height: 58px; }
.wf-ticket text { font-family: var(--font-body); }
.wf-ticket .wf-lucky { font-family: var(--font-num); font-weight: 700; }
.wf-n { margin: 0; font-family: var(--font-num); font-weight: 700; font-size: calc(40px * var(--fs)); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.wf-z { margin: 4px 0 0; font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.wf-z.top, .wf-z.up { color: var(--gold-text); }
.wf-z.down { color: var(--error); }
.wf-tip { margin: 0; background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-row); padding: 10px 12px; font-size: calc(14px * var(--fs)); font-weight: 500; line-height: 1.6; color: var(--ink); word-break: keep-all; }
.wf-years { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; }
.wf-years li { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; background: var(--soft); border: 1px solid transparent; border-radius: 10px; min-width: 0; }
.wf-years .y { font-size: calc(13px * var(--fs)); color: var(--dim); }
.wf-years .s { font-family: var(--font-num); font-weight: 700; font-size: calc(16px * var(--fs)); color: var(--ink); font-variant-numeric: tabular-nums; }
.wf-years li.q .s { color: var(--dim2); }
.wf-years li.best { background: var(--cream); border-color: var(--gold); }
.wf-note { margin: 0; text-align: center; font-size: calc(13.5px * var(--fs)); color: var(--dim); word-break: keep-all; }
.mt-me { display: flex; align-items: center; gap: 14px; }
.mt-ic { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--gold); display: inline-flex; align-items: center; justify-content: center; }
.mt-who-wrap { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-who { margin: 0; font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.mt-name { margin: 0; font-size: calc(24px * var(--fs)); line-height: 1.25; }
.mt-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.5; }
.mt-facts dt { color: var(--dim); }
.mt-facts dd { margin: 0; text-align: right; font-weight: 500; color: var(--ink); }
.mt-all { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; text-align: center; }
.mt-all li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: calc(13px * var(--fs)); color: var(--dim); word-break: keep-all; }
.mt-all li.me { color: var(--gold-text); font-weight: 500; }
.mt-share { width: 100%; }
.md-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.md-days li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; text-align: center; background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-row); min-width: 0; }
.md-days .mo, .md-days .w { font-size: calc(13px * var(--fs)); color: var(--dim); }
.md-days .d { font-family: var(--font-num); font-weight: 700; font-size: calc(24px * var(--fs)); line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.md-days .l { font-size: calc(13.5px * var(--fs)); color: var(--ink); margin-top: 2px; word-break: keep-all; }
.md-days li.q { background: var(--soft); border-style: dashed; border-color: var(--line); }
.md-days li.q .d { color: var(--dim2); }
.md-caution { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line3); padding-top: 12px; }
.md-caution .dd { flex: none; min-width: 52px; text-align: center; display: flex; flex-direction: column; }
.md-caution .dd b { font-family: var(--font-num); font-weight: 700; font-size: calc(20px * var(--fs)); line-height: 1.2; color: var(--error); }
.md-caution .dd span { font-size: calc(13px * var(--fs)); color: var(--dim); }
.md-caution p { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.55; color: var(--ink2); word-break: keep-all; }
/* 평생 총운 요약 — 나의 성격 + 12가지 자리 한 줄씩 (2026-10-14). 떠오르는 움직임은 .hb-rise 한 벌 — 여기는 놓이는 모양만 */
.lf-me { display: flex; flex-direction: column; gap: 8px; background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-row); padding: 14px; }
.lf-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lf-words b { font-weight: 500; font-size: calc(13px * var(--fs)); color: var(--gold-text); background: var(--surface); border: 1px solid var(--cream-line); border-radius: var(--r-pill); padding: 2px 10px; }
.lf-line { margin: 0; font-size: calc(15px * var(--fs)); line-height: 1.6; color: var(--ink); word-break: keep-all; }
.lf-gb { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.55; }
.lf-gb dt { color: var(--gold-text); font-weight: 500; white-space: nowrap; }
.lf-gb dd { margin: 0; color: var(--ink2); word-break: keep-all; }
.lf-sub { margin: 4px 0 0; font-size: calc(15px * var(--fs)); font-weight: 500; color: var(--ink); }
.lf-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lf-rows li { padding: 11px 0; border-top: 1px solid var(--line3); display: flex; flex-direction: column; gap: 2px; }
.lf-rows li:first-child { border-top: 0; padding-top: 2px; }
/* 별명 (2026-10-17 · 운영자 지시) — 12줄은 자리 이름(작게) + 별명(굵게) · 맨 위 대표 별명은 크게 · 카드 머리도 같은 결 */
.lf-place { font-size: calc(13px * var(--fs)); color: var(--gold-text); }
.lf-nick { font-weight: 500; font-size: calc(15px * var(--fs)); line-height: 1.5; color: var(--ink); word-break: keep-all; }
/* ── 별명 + 요약 세 줄 (2026-10-18 · 운영자 지시 「궁합 및 다른 메뉴에도 요약 및 별명」) — 크림 바탕 · 큰 별명 · 흰 줄 셋 ── */
.nk-card { background: var(--cream); border: 1px solid var(--cream-line); gap: 10px; }
.nk-eye { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--gold-text); letter-spacing: .04em; }
.nk-type { font-size: calc(13px * var(--fs)); font-weight: 600; color: #fff; background: var(--ink); border-radius: var(--r-pill); padding: 2px 10px; letter-spacing: 0; }
.nk-name { margin: 0; font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(24px * var(--fs)); line-height: 1.35; color: var(--ink); word-break: keep-all; text-wrap: balance; }
.nk-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nk-people li { font-size: calc(13.5px * var(--fs)); line-height: 1.5; color: var(--ink2); background: var(--surface); border: 1px solid var(--cream-line); border-radius: var(--r-row); padding: 6px 12px; }
.nk-people b { font-weight: 600; color: var(--ink); margin-right: 8px; }
.nk-rows { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nk-row { background: var(--surface); border-radius: var(--r-row); padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
.nk-k { font-size: calc(13px * var(--fs)); color: var(--gold-text); font-weight: 600; white-space: nowrap; }
.nk-v { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; font-size: calc(14.5px * var(--fs)); font-weight: 500; color: var(--ink); }
.nk-v b { font-family: var(--font-num); font-weight: 600; font-size: calc(17px * var(--fs)); }
.nk-tip { grid-column: 1 / -1; margin: 2px 0 0; font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--ink2); word-break: keep-all; }
.lf-nick-big { margin: 0; font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(21px * var(--fs)); line-height: 1.4; color: var(--ink); word-break: keep-all; }
/* 올해·신년운세 열두 달 (2026-10-17 · 운영자 지시) — 평생 총운 줄(lf-*)을 그대로 쓰고 표시·지난 달 태그만 더한다.
   표시 = ★ 아주 좋음 · ● 좋음(금빛) · ○ 보통 — 점수 숫자는 없다 · 「조심」 달도 무료에서는 ○ (운영자 확정) */
.mo-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: calc(13px * var(--fs)); color: var(--dim); }
.mo-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mo-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mo-mark { font-style: normal; font-size: calc(13px * var(--fs)); line-height: 1; width: 1.1em; text-align: center; color: var(--dim2); }
.mo-mark.up, .mo-mark.top { color: var(--gold); }
.mo-when { font-size: calc(13px * var(--fs)); color: var(--dim); background: var(--soft); border-radius: var(--r-pill); padding: 1px 8px; }
.mo-when.now { color: var(--gold-text); background: var(--cream); border: 1px solid var(--cream-line); }
.mo-rows li.now .lf-nick { color: var(--gold-text); }
.sec .sec-place { display: block; margin: 0 0 2px; font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.sec h3.sec-nick { margin: 0 0 8px; font-size: calc(19px * var(--fs)); line-height: 1.45; word-break: keep-all; }
.tv-rx { display: grid; gap: 10px; }
.tv-rx div { background: var(--soft); border-radius: var(--r-row); padding: 12px 14px; font-size: calc(14px * var(--fs)); line-height: 1.6; }
.tv-rx b { font-weight: 500; }
.tv-rx .why { display: block; font-size: calc(13.5px * var(--fs)); color: var(--dim); margin-top: 4px; }
.tv-rx .down b { color: var(--tv-next); } .tv-rx .up b { color: var(--tv-accent); }
.tv-flow-scroll { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
/* 「‹ 지난 해」 — 스크롤과 같이 안 움직이는 자리 (오른쪽으로 밀려 있을 때만 보인다 · topic.js) */
.tv-flow-wrap { position: relative; }
.tv-past { position: absolute; left: 0; top: 4px; z-index: 3; font: inherit; font-size: calc(13px * var(--fs)); color: var(--dim); background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 3px 10px; cursor: pointer; }
.tv-flow { position: relative; width: 100%; min-width: 560px; aspect-ratio: 720 / 300; }
.tv-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv-flow .ic { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line2); background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: var(--dim); }
.tv-flow .ic .num { font-family: var(--font-body); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.tv-flow .ic.locked { border-style: dashed; background: var(--soft); color: var(--dim2); }
.tv-flow .ic.up, .tv-flow .ic.top { border-color: var(--tv-sun); } .tv-flow .ic.down { border-color: var(--tv-storm); }
.tv-flow .ic.sel { border-color: var(--tv-accent); box-shadow: 0 0 0 2px var(--tv-accent-soft); }
.tv-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: calc(13px * var(--fs)); color: var(--dim); }
.tv-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tv-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line2); }
.tv-cap { background: var(--soft); border-radius: var(--r-row); padding: 12px 14px; min-height: 68px; display: flex; flex-direction: column; gap: 2px; }
.tv-cap .y { font-size: calc(13px * var(--fs)); color: var(--dim); font-variant-numeric: tabular-nums; }
.tv-cap .t { font-size: calc(15px * var(--fs)); }
.tv-teaser { font-size: calc(13.5px * var(--fs)); color: var(--dim); text-align: center; margin: 0; }
@media (prefers-reduced-motion: no-preference) { .tv-flow .ic { transition: border-color .15s; } }

/* ── 모션 (2026-10-08 운영자 지시 · 도구는 app.js 의 HB.motion) ──
 * 원 색 = 그날 구간: 길 금색 · 평 회색 · 조심 붉은색 (7일 막대와 같은 토큰 · class 는 HB.motion.ring 이 붙인다 — 없으면 예전처럼 금색).
 * 흔들리는 동안 숫자 폭이 춤추지 않게 자리 폭을 고정한다(tabular-nums).
 * 🚨 움직이는 규칙은 전부 아래 no-preference 안에 둔다 — 「동작 줄이기」를 켠 휴대폰에서는 막대가 0 높이로 멈춰 있으면 안 된다.
 * 🚨 12년 지수 동그라미(.tv-flow .ic)는 이미 transform 으로 자리를 잡는다 — 그래서 톡 튀기는 개별 scale 속성으로 한다. */
.ring .score, .q-v { font-variant-numeric: tabular-nums; }
/* 「써지는 원고」 (HB.motion.writing) — 바탕은 여기, 펜·금빛 흐름은 아래 no-preference 안 (동작 줄이기면 빈 줄과 금빛 첫 제목만) */
.wr { display: flex; flex-direction: column; gap: 16px; }
.wr-part { display: flex; flex-direction: column; gap: 7px; }
.wr-part .pn { font-size: calc(13px * var(--fs)); letter-spacing: .14em; color: var(--dim2); transition: color .4s; }
.wr-part .tt { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(15px * var(--fs)); color: var(--dim2); transition: color .4s; }
.wr-part.on .pn, .wr-part.on .tt { color: var(--gold-text); }
.wr-line { position: relative; height: 7px; border-radius: 4px; background: var(--line2); overflow: hidden; }
.wr-line.a { width: 94%; } .wr-line.b { width: 68%; }
.wr-line i, .wr-line u { display: none; position: absolute; top: 0; bottom: 0; }
.wr-line i { width: 35%; border-radius: 4px; background: rgba(176, 141, 87, .26); }
.wr-line u { width: 7px; border-radius: 50%; background: var(--gold); }
.wr-state { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wr-state b { font-family: var(--font-num); font-weight: 500; font-size: calc(15px * var(--fs)); color: var(--ink); font-variant-numeric: tabular-nums; }
.ring .z-up, .ring .z-top { stroke: var(--gold); } .ring .z-mid { stroke: var(--dim2); } .ring .z-down { stroke: var(--error); }
/* ── 반짝이는 장면 (운영자 확정 2026-10-12 · 한자 없는 쉬운 말 + 모션) — 쉬는 모양은 여기, 움직임은 아래 no-preference 안.
 * 「동작 줄이기」면 별은 처음부터 채워져 있고 · 우산은 펼쳐져 있고 · 금가루·빛 스침·하늘·빗방울은 아예 안 만든다(JS). */
.hb-fx-host { position: relative; }
/* 좋은 달 셋 — 별점 다섯 칸 + 「좋음 78」 · 아주 좋은 달은 「최고의 달」 리본 */
.lk-row .h { flex-wrap: wrap; row-gap: 4px; }
.lk-row .h .zn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hb-stars { display: inline-flex; gap: 2px; }
.hb-stars i, .week-days button .st::before, .lk-months button .st::before {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hb-stars i { width: 12px; height: 12px; background: var(--line2); }
.hb-stars i.on { background: var(--gold); }
.rib { display: inline-block; margin-left: 6px; font-size: calc(13px * var(--fs)); font-weight: 500; line-height: 1.5; color: #fff; background: var(--gold); border-radius: var(--r-pill); padding: 1px 8px; white-space: nowrap; vertical-align: 1px; }
/* 조심할 달 — 우산 + 「우산만 챙기면 괜찮아요.」 */
.um { width: 22px; height: 27px; color: var(--error); flex: none; overflow: visible; }
.lk-row .calm { font-size: calc(13.5px * var(--fs)); color: var(--ink2); }
/* 막대 위 별 — 아주 좋음(top) 막대 꼭대기 (자리를 차지하지 않는다 · 높이 0 + 위쪽 간격 되돌림) */
.week-days button .st, .lk-months button .st { position: relative; width: 0; height: 0; margin-bottom: -3px; }
.week-days button .st::before, .lk-months button .st::before { content: ''; position: absolute; bottom: 3px; left: -5px; width: 10px; height: 10px; background: var(--gold); }
/* 홈 「오늘의 운」 — 아주 좋은 날 리본이 들어갈 자리 (태그가 길면 다음 줄로) · 하늘(별)은 글자 뒤 */
.today-txt .tags { flex-wrap: wrap; }
.today-txt .tags .rib { margin-left: 0; font-size: calc(13px * var(--fs)); padding: 2px 9px; }
.hero { position: relative; }
.hero > .left, .hero > .who { position: relative; z-index: 1; }
/* ── 귀인 띠 (guardian.html) · 행운 3종 (trio.html) — 2026-10-12 · 무료 · 비회원도 ── */
.gd-card { flex-direction: row; align-items: flex-start; gap: 16px; }
.gd-img { width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--soft); box-shadow: 0 0 0 1px #E8DCC6; object-fit: cover; }
.gd-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; word-break: keep-all; }   /* 낱말 중간에서 줄이 안 갈리게 (「스승에게/서」) */
.gd-animal { font-size: calc(22px * var(--fs)); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gd-same { font-family: var(--font-body, inherit); font-size: calc(13px * var(--fs)); color: var(--gold-text); background: #F7F3EC; border: 1px solid #E8DCC6; border-radius: var(--r-pill); padding: 1px 8px; }
.gd-line, .gd-closing, .gd-note p { margin: 0; white-space: pre-line; }
.gd-line { font-size: calc(13.5px * var(--fs)); line-height: 1.65; color: var(--ink2); font-weight: 400; }
.gd-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; font-size: calc(13px * var(--fs)); line-height: 1.55; color: var(--ink2); background: var(--soft); border-radius: var(--r-row); padding: 9px 12px; }
.gd-row .k { font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--gold-text); }
.gd-years { margin: 0; }
.gd-note { gap: 8px; }
.gd-note p { line-height: 1.7; }
.gd-closing { font-size: calc(13.5px * var(--fs)); line-height: 1.65; color: var(--ink2); }
.tr-card { gap: 12px; }
.tr-sw { display: flex; gap: 28px; }
.tr-c { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tr-c .o { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 1px #C9CED9, 0 4px 12px rgba(18, 26, 51, .08); }
.tr-c b { font-size: calc(14px * var(--fs)); font-weight: 500; }
.tr-nums { display: flex; gap: 22px; align-items: baseline; }
.tr-num { font-family: var(--font-num); font-size: calc(44px * var(--fs)); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tr-items { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tr-item { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--soft); border-radius: var(--r-row); padding: 11px 14px; font-size: calc(14px * var(--fs)); font-weight: 500; }
.tr-item .ic { display: flex; flex: none; }
/* ── 하늘이 열리는 장면 (온보딩 완료 · 운영자 확정 2026-10-14 · 시안 ①) — 자리만. 움직임은 아래 no-preference 안 ── */
.sky-open { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; background: var(--scrim); }
.sky-in { width: 100%; max-width: var(--phone); min-height: 100%; background: var(--ink); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 0 24px; cursor: pointer; text-align: center; }
.sky-art { position: relative; width: 280px; max-width: 100%; aspect-ratio: 7 / 5; }
.sky-art svg { display: block; width: 100%; height: 100%; }
.cs-line { stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
.cs-star { fill: var(--cream); }
.sky-z { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--cream);
  padding: 6px; object-fit: contain; box-sizing: border-box; }
.sky-t { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(24px * var(--fs)); line-height: 1.35; margin: 10px 0 0; color: #fff; }
.sky-d { font-size: calc(14px * var(--fs)); color: var(--cream-line); margin: 0; }
.sky-skip { font-size: calc(13px * var(--fs)); color: var(--dim2); margin-top: 22px; }
/* ── 다음 좋은 시간까지 (홈 · 오늘의 운세 · 시안 ⑥ · HB.nextLine) ── */
.next-good { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: calc(13.5px * var(--fs)); line-height: 1.5; color: var(--gold-text); margin: 0; }
.next-re { border: 0; background: var(--soft); color: var(--ink); font-size: calc(13px * var(--fs)); border-radius: var(--r-pill); padding: 5px 14px; min-height: var(--touch); }   /* 누름 자리 44px (C2) */
#hourNext { margin-top: -4px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes hb-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes hb-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
  @keyframes hb-fade { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
  .hb-anim .bar i { transform: scaleY(0); transform-origin: bottom; }
  .hb-anim.hb-go .bar i { animation: hb-grow .6s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .tv-flow.hb-anim .ic { opacity: 0; }
  .tv-flow.hb-anim.hb-go .ic { animation: hb-pop .35s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
  /* 잠긴 「?」 반짝 — 미끄러져 와서 멈춘 뒤 두 번 (topic.js 가 .locked 에만 hb-pulse) · scale 속성만 (transform 은 자리 잡는 translate) */
  @keyframes tv-pulse { 50% { scale: 1.22; border-color: var(--gold); color: var(--gold-text); } }
  .tv-flow .ic.hb-pulse { animation: tv-pulse .7s ease-in-out 2; }
  .week-pick > *, .tv-cap > *, .hb-in { animation: hb-fade .28s ease both; }
  /* 명반 격자 — 투명도만. 손으로 잰 칸 여백·배율(--g-scale)은 건드리지 않는다(넘치면 별이 소리 없이 사라진다) */
  @keyframes hb-show { from { opacity: 0; } to { opacity: 1; } }
  .hb-show { animation: hb-show .4s ease both; }
  /* 써지는 원고 — 금빛 띠가 빈 줄 위로 흐르고, 고른 단락(.on)에서 펜 끝이 2.4초에 두 줄을 쓴다(.on 이 붙을 때마다 새로 시작) */
  @keyframes wr-shine { from { left: -35%; } to { left: 100%; } }
  @keyframes wr-pen1 { 0% { left: 0; opacity: 1; } 49% { left: calc(100% - 7px); opacity: 1; } 50%, 100% { left: calc(100% - 7px); opacity: 0; } }
  @keyframes wr-pen2 { 0%, 49% { left: 0; opacity: 0; } 50% { left: 0; opacity: 1; } 100% { left: calc(100% - 7px); opacity: 1; } }
  .wr-line i { display: block; animation: wr-shine 1.8s linear infinite; }
  /* 줄마다 금빛 띠의 출발을 어긋나게 — 모든 줄이 한 세로줄로 흐르면 기계 같다 (실물 스크린샷으로 잡음) → 비스듬히 흐르는 물결 */
  .wr-line.b i { animation-delay: -.45s; }
  .wr-part:nth-child(2) .wr-line i { animation-delay: -.9s; } .wr-part:nth-child(2) .wr-line.b i { animation-delay: -1.35s; }
  .wr-part:nth-child(3) .wr-line i { animation-delay: -1.8s; } .wr-part:nth-child(3) .wr-line.b i { animation-delay: -.45s; }
  .wr-part:nth-child(4) .wr-line i { animation-delay: -.9s; } .wr-part:nth-child(4) .wr-line.b i { animation-delay: -1.35s; }
  .wr-part.on .wr-line u { display: block; }
  .wr-part.on .wr-line.a u { animation: wr-pen1 2.4s linear both; }
  .wr-part.on .wr-line.b u { animation: wr-pen2 2.4s linear both; }
  /* 다 쓴 풀이 — 단락이 차례로 아래에서 살짝 올라온다 (상자에 hb-rise, 보이면 hb-go · 단락마다 --i) */
  @keyframes hb-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
  .hb-rise > * { opacity: 0; }
  .hb-rise.hb-go > * { animation: hb-rise .6s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 220ms); }

  /* 뼈대 화면 — 회색 막대가 숨 쉬듯 반짝인다 · 주제 바꾸는 동안 흐려지기 */
  @keyframes hb-shimmer { 50% { opacity: .45; } }
  .sk-line, .sk-circle, .sk-block { animation: hb-shimmer 1.3s ease-in-out infinite; }
  .hb-busy { transition: opacity .2s ease; }
  /* 목록 차례 등장 — 떠오르기(hb-rise)의 빠른 판 (보관함 줄 · 홈 메뉴 · 마이페이지 칩 · 좋은 달 줄) */
  .hb-rise.fast.hb-go > * { animation-duration: .45s; animation-delay: calc(var(--i, 0) * 50ms); }

  /* 온보딩 — 단계 막대가 왼쪽부터 채워지고(막대는 한 번만 짓는다 · onboarding.js) · 띠 미리보기는 톡 나타난다 */
  .step-bar .bars i { background: linear-gradient(var(--gold), var(--gold)) 0 0 / 0% 100% no-repeat var(--line2); transition: background-size .45s cubic-bezier(.22, .61, .36, 1); }
  .step-bar .bars i.on { background: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 100% no-repeat var(--line2); }
  @keyframes hb-zpop { from { opacity: 0; scale: .92; } }
  .zodiac-preview:not([hidden]) { animation: hb-zpop .4s cubic-bezier(.2, .8, .3, 1.2) both; }

  /* 홈 배너 점 — 고른 칸의 점이 늘어난다 (예전엔 밖에 있었는데 점을 매번 다시 지어 안 움직였을 뿐이다) */
  .gdots span { transition: width 400ms ease; }

  /* 잠깐 뜨는 알림 (HB.toast) — 올라오며 나타나고, 내려가며 사라진다 */
  @keyframes hb-toast-in { from { opacity: 0; translate: 0 10px; } }
  @keyframes hb-toast-out { to { opacity: 0; translate: 0 6px; } }
  .hb-toast { animation: hb-toast-in .26s cubic-bezier(.22, .61, .36, 1) both; }
  .hb-toast.hb-leaving { animation: hb-toast-out .22s ease both; }

  /* 사라지기 (HB.motion.leave — 열린 뒤 「열어보기」 단추 · 범례 「?」) */
  @keyframes hb-leave { to { opacity: 0; translate: 0 8px; } }
  .hb-leave { animation: hb-leave .26s ease both; pointer-events: none; }

  /* 바닥 창 (HB.sheet) — 어두운 바깥은 스르르, 창은 아래서 올라와 살짝 넘쳤다 자리 (운영자 확정 2026-10-08 「바닥 창」).
   * 닫힐 때는 거꾸로 내려간 뒤 HB.sheet 가 hidden 을 붙인다 — 쉬는 상태는 그대로 [hidden]{display:none !important}.
   * 창 아래 그림자(같은 색)는 넘칠 때 바닥에 생기는 틈을 덮는다 · translate 속성만 (transform 은 안 쓴다) */
  @keyframes hb-scrim-in { from { background-color: transparent; } }
  @keyframes hb-scrim-out { to { background-color: transparent; } }
  @keyframes hb-sheet-up { 0% { translate: 0 100%; } 72% { translate: 0 -6px; } 100% { translate: 0 0; } }
  @keyframes hb-sheet-down { from { translate: 0 0; } to { translate: 0 100%; } }
  .scrim { animation: hb-scrim-in .22s ease both; }
  .scrim > .sheet { animation: hb-sheet-up .42s cubic-bezier(.2, .8, .3, 1) both; box-shadow: 0 30px 0 0 var(--surface); }
  .scrim.hb-closing { animation: hb-scrim-out .24s ease both; pointer-events: none; }
  .scrim.hb-closing > .sheet { animation: hb-sheet-down .24s cubic-bezier(.4, 0, 1, 1) both; }

  /* 누르는 느낌 (운영자 확정 2026-10-08) — 눌리는 동안 살짝 들어간다 · scale 속성만
   * (떠오르기 hb-rise 가 opacity·translate 를 쥐고 있어도 안 부딪힌다 · 12년 지수 동그라미는 뺀다 — 그 transition 을 덮는다) */
  .btn, .pill, .menu9 a, .gcard, .finder, .row, .arc-row, .lucky-list a, .tv-tp, .tv-years button, .week-days button, .lk-months button,
  .hour-bars button, .radio, .check, .tabbar .tab, .gtab, .chips a, .quick a, .quick button, .mg, .srow, .seg button, .reason, .pick, .choice, .tv-past, .tv-all, .pair-chip {
    transition: scale .14s ease;
  }
  :is(.pill, .menu9 a, .tv-tp, .tv-years button, .week-days button, .lk-months button, .hour-bars button, .radio, .check, .tabbar .tab, .gtab, .chips a, .quick a, .quick button, .seg button, .tv-past, .tv-all, .pair-chip):active:not(:disabled) { scale: .95; }
  :is(.btn, .gcard, .finder, .reason, .pick, .choice):active:not(:disabled) { scale: .98; }
  :is(.row, .arc-row, .lucky-list a, .mg, .srow):active:not(:disabled) { scale: .99; }

  /* 화면 전환 (운영자 확정 2026-10-08 「들어올 때 부드럽게」) — 같은 사이트 안 이동은 옛 화면이 스르르 사라지고 새 화면이 살짝 올라온다.
   * 탭바는 가만히 있고, 금색 탭 표시만 옛 탭에서 새 탭으로 미끄러진다. 지원 안 하는 브라우저는 그냥 즉시 바뀐다 */
  @view-transition { navigation: auto; }
  .tabbar { view-transition-name: hb-tabbar; }
  .tabbar .tab .ind { view-transition-name: hb-tab-ind; }
  ::view-transition-group(hb-tabbar), ::view-transition-new(hb-tabbar) { animation: none; }
  ::view-transition-old(hb-tabbar) { display: none; }
  ::view-transition-group(hb-tab-ind) { animation-duration: .32s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  @keyframes hb-vt-out { to { opacity: 0; } }
  @keyframes hb-vt-in { from { opacity: 0; translate: 0 6px; } }
  ::view-transition-old(root) { animation: hb-vt-out .16s ease both; }
  ::view-transition-new(root) { animation: hb-vt-in .24s cubic-bezier(.22, .61, .36, 1) both; }

  /* ── 반짝이는 장면 (운영자 확정 2026-10-12) ── */
  /* 금가루 (HB.motion.burst) — 가운데서 사방으로 흩어지며 사라진다 · 조각은 JS 가 1.7초 뒤 치운다 */
  .hb-dust { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
  .hb-dust i { position: absolute; left: 0; top: 0; width: var(--s, 4px); height: var(--s, 4px); margin: calc(var(--s, 4px) / -2) 0 0 calc(var(--s, 4px) / -2); border-radius: 50%; background: radial-gradient(circle, #F6E7C1 0, var(--gold) 72%); animation: hb-dust 1.25s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms) both; }
  @keyframes hb-dust { 0% { opacity: 0; translate: 0 0; scale: .4; } 14% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1; } }
  /* 금박 빛 스침 (HB.motion.shine) — 안쪽 층이 자르므로 카드에 overflow 를 걸지 않는다 */
  .hb-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
  .hb-shine::before { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; translate: -110% 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(232, 220, 198, .5) 42%, rgba(255, 255, 255, .7) 50%, rgba(232, 220, 198, .5) 58%, rgba(255, 255, 255, 0));
    animation: hb-sweep 1.15s cubic-bezier(.4, 0, .2, 1) var(--d, 0ms) both; }
  @keyframes hb-sweep { from { translate: -110% 0; } to { translate: 280% 0; } }
  /* 별점 — 보일 때(hb-go) 한 칸씩 채워진다 · 그 전엔 빈 칸으로 (처음부터 금색이었다가 꺼지는 깜빡임이 없게) */
  .hb-stars:not(.hb-go) i.on { background: var(--line2); }
  .hb-stars.hb-go i.on { animation: hb-star .42s cubic-bezier(.2, .8, .3, 1.4) calc(var(--k, 0) * 140ms + 150ms) both; }
  @keyframes hb-star { 0% { background: var(--line2); scale: .55; } 60% { background: var(--gold); scale: 1.3; } 100% { background: var(--gold); scale: 1; } }
  .rib.hb-wait { opacity: 0; }
  .rib.hb-go { animation: hb-rib .45s cubic-bezier(.2, .8, .3, 1.2) both; }
  @keyframes hb-rib { from { opacity: 0; translate: -6px 0; scale: .9; } }
  /* 우산 — 접혀 있다가 펼쳐지고, 빗방울이 우산 위로 떨어진다(세 번) */
  .um .cn { transform-box: fill-box; transform-origin: 50% 100%; }
  .um:not(.hb-go) .cn { scale: .18 1; }
  .um.hb-go .cn { animation: hb-umb .65s cubic-bezier(.2, .8, .3, 1.3) .1s both; }
  @keyframes hb-umb { from { scale: .18 1; } to { scale: 1 1; } }
  .um .dp { opacity: 0; }
  .um.hb-go .dp { animation: hb-rain .9s ease-in calc(var(--k, 0) * 220ms + 700ms) 3 both; }
  @keyframes hb-rain { 0% { opacity: 0; translate: 0 -3px; } 25% { opacity: .9; } 80% { opacity: .9; } 100% { opacity: 0; translate: 0 5px; } }
  /* 막대 위 별 — 막대가 솟은 뒤 톡 나타나 반짝인다 */
  .hb-anim:not(.hb-go) .st::before { opacity: 0; }
  .hb-anim.hb-go .st::before { animation: hb-pop .45s cubic-bezier(.2, .8, .3, 1.4) calc(var(--i, 0) * 60ms + 550ms) both, hb-twinkle 2.6s ease-in-out calc(var(--i, 0) * 60ms + 1.3s) infinite; }
  @keyframes hb-twinkle { 50% { opacity: .55; scale: .82; } }
  /* 나침반 금빛 부채꼴 — 바늘이 멈춘 뒤 행운의 방위 쪽으로 펼쳐진다 */
  .lk-compass .fan { transform-box: view-box; transform-origin: 100px 100px; }
  .lk-compass:not(.hb-go) .fan { scale: 0; }
  .lk-compass.hb-go .fan { animation: hb-fan .7s cubic-bezier(.2, .8, .3, 1.15) 1.3s both; }
  @keyframes hb-fan { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
  /* 자물쇠 풀림 (HB.motion.unlock) — 고리가 들리며 열리고 몸통이 금빛으로 */
  .hb-unlocking .hb-lock { display: block; margin: 0 auto; }
  .hb-lock .sh { transform-box: view-box; transform-origin: 16px 11px; animation: hb-shackle .5s cubic-bezier(.2, .8, .3, 1.4) .18s both; }
  @keyframes hb-shackle { to { translate: 0 -2.5px; rotate: 28deg; } }
  .hb-lock .bd { animation: hb-lock-glow .45s ease .45s both; }
  @keyframes hb-lock-glow { to { fill: var(--gold); stroke: var(--gold); } }
  /* 홈 하늘 — 반짝이는 금빛 점 · 가끔 지나가는 별똥별 (home.js 가 만든다) */
  .hero .sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .hero .sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .18; animation: hb-twinkle2 3.4s ease-in-out var(--d, 0s) infinite; }
  @keyframes hb-twinkle2 { 50% { opacity: .85; scale: 1.5; } }
  .hero .sky b { position: absolute; top: 14%; left: 62%; width: 64px; height: 1.5px; border-radius: 1px; opacity: 0; rotate: -18deg;
    background: linear-gradient(90deg, var(--gold), rgba(176, 141, 87, 0)); animation: hb-shoot 9s ease-out 2.2s infinite; }
  @keyframes hb-shoot { 0% { opacity: 0; translate: 0 0; } 1.5% { opacity: .9; } 9% { opacity: 0; translate: -150px 50px; } 100% { opacity: 0; translate: -150px 50px; } }
  /* 귀인 띠 — 카드가 떠오를 때 띠 그림이 톡 · 행운 3종 — 색 원이 차례로 톡 (2026-10-12) */
  .hb-rise.hb-go .gd-img { animation: hb-pop .5s cubic-bezier(.2, .8, .3, 1.4) calc(var(--i, 0) * 50ms + 200ms) both; }
  .tr-sw:not(.hb-go) .o { opacity: 0; }
  .tr-sw.hb-go .o { animation: hb-pop .45s cubic-bezier(.2, .8, .3, 1.4) calc(var(--k, 0) * 160ms + 250ms) both; }
  /* 하늘이 열리는 장면 — 덮개가 내려앉고, 별자리가 다 그려질 무렵 띠 그림이 톡 · 글이 차례로 (온보딩 · 2026-10-14) */
  .sky-open:not(.hb-leave) { animation: hb-scrim-in .3s ease both; }
  .sky-open .sky-in { animation: hb-show .35s ease both; }
  .sky-open .sky-z { animation: hb-pop .5s cubic-bezier(.2, .8, .3, 1.4) 1.35s both; }
  .sky-open .sky-t { animation: hb-fade .45s ease 1.55s both; }
  .sky-open .sky-d { animation: hb-fade .45s ease 1.75s both; }
  .sky-open .sky-skip { animation: hb-fade .45s ease 2s both; }
  /* 아이콘 모션 (운영자 확정 2026-10-14 「A + D」 · app.js iconSparkle / iconPlay) — 아이콘 안쪽만 움직인다(크기·자리 무변).
   * 끝 모양은 시작 모양과 같다(해 45° · 궁합 180° · 별 90° 는 대칭이라 같아 보인다) — 끝나고 툭 튀지 않게. */
  svg[data-ic] .ia, svg[data-ic] .ib { transform-box: fill-box; transform-origin: center; }
  @keyframes ic-spark { 0% { opacity: 0; scale: 0; rotate: -45deg; } 60% { opacity: 1; scale: 1.4; rotate: 0deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
  .hb-spark .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) calc(var(--ii, 0) * 80ms + 350ms) both; }
  @keyframes ic-rise { 0% { opacity: 0; translate: 0 5px; } 70% { opacity: 1; translate: 0 -1px; } 100% { opacity: 1; translate: 0 0; } }
  @keyframes ic-rock { 0%, 100% { rotate: 0deg; } 35% { rotate: -14deg; } 70% { rotate: 5deg; } }
  @keyframes ic-turn { 0% { scale: 1; rotate: 0deg; } 50% { scale: 1.8; rotate: 45deg; } 100% { scale: 1; rotate: 90deg; } }
  @keyframes ic-hop { 0%, 50%, 100% { translate: 0 0; } 25% { translate: 0 -2.5px; } 75% { translate: 0 -1px; } }
  @keyframes ic-drop { 0% { opacity: 0; translate: 0 -6px; } 70% { opacity: 1; translate: 0 1px; } 100% { opacity: 1; translate: 0 0; } }
  @keyframes ic-spin { from { rotate: 0deg; } to { rotate: 180deg; } }
  @keyframes ic-write { 0%, 100% { rotate: 0deg; } 35% { rotate: -12deg; } 70% { rotate: 7deg; } }
  @keyframes ic-grow { 0% { scale: 1 .55; } 70% { scale: 1 1.08; } 100% { scale: 1 1; } }
  @keyframes ic-sun { from { rotate: 0deg; } to { rotate: 45deg; } }
  @keyframes ic-pop { 0% { opacity: 0; translate: 0 4px; scale: .6; } 70% { opacity: 1; translate: 0 -3px; scale: 1.15; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes ic-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 3px 0; } }
  .hb-sig .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) both; }                  /* 제 동작이 없는 아이콘은 반짝만 */
  .hb-sig[data-ic="today"] .ib { animation: ic-rise .7s cubic-bezier(.2, .8, .3, 1) both; }       /* 오늘의 운세 — 해가 뜬다 */
  .hb-sig[data-ic="newyear"] .ia { animation: ic-rock .7s ease both; }                             /* 신년운세 — 달이 흔들리고 별이 반짝 */
  .hb-sig[data-ic="newyear"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .25s both; }
  .hb-sig[data-ic="life"] .ib { animation: ic-turn .7s cubic-bezier(.2, .8, .3, 1) both; }        /* 평생 총운 · 10년 대운 — 가운데 별이 돈다 */
  .hb-sig[data-ic="wealth"] .ia { animation: ic-hop .7s ease both; }                               /* 재물운 — 동전이 통통 */
  .hb-sig[data-ic="wealth"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .3s both; }
  .hb-sig[data-ic="love"] .ib { animation: ic-drop .7s cubic-bezier(.2, .8, .3, 1) both; }        /* 연애·결혼운 — 보석이 반지 위로 내려앉는다 */
  .hb-sig[data-ic="match"] :is(.ia, .ib) { transform-box: view-box; transform-origin: 12px 12px; animation: ic-spin .9s cubic-bezier(.6, 0, .3, 1) both; }   /* 궁합 — 반 바퀴 돈다 */
  .hb-sig[data-ic="career"] :is(.ia, .ib) { transform-box: view-box; transform-origin: 12px 20.5px; animation: ic-write .7s ease both; }   /* 직업 — 펜촉이 쓴다 */
  .hb-sig[data-ic="health"] :is(.ia, .ib) { transform-box: view-box; transform-origin: 12px 19.5px; animation: ic-grow .7s cubic-bezier(.2, .8, .3, 1) both; }   /* 건강운 — 새싹이 자란다 */
  .hb-sig[data-ic="thisyear"] .ia { animation: ic-sun .8s cubic-bezier(.2, .8, .3, 1) both; }     /* 올해운세 — 햇살이 돈다 */
  .hb-sig[data-ic="thisyear"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .2s both; }
  .hb-sig[data-ic="spouse"] .ib { animation: ic-pop .7s cubic-bezier(.2, .8, .3, 1) both; }       /* 미래의 배우자 — 봉투에서 하트가 톡 */
  .hb-sig[data-ic="move"] :is(.ia, .ib) { animation: ic-nudge .7s ease both; }                     /* 이직 — 살짝 옆으로 */
  /* 궁합·사업·직장 탭 상품 (2026-10-14) — 위 주제 격자에 이 탭 아이콘들이 뜬다. 끝 모양 = 시작 모양 · 개별 속성만 */
  .hb-sig[data-ic="friend"] .ia { animation: ic-hop .7s ease both; }                                /* 친구·동료 — 둘이 통통 */
  .hb-sig[data-ic="friend"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .25s both; }
  .hb-sig[data-ic="couple"] .ia { animation: ic-hop .7s ease both; }                                /* 부부 — 두 반지가 통통 · 지붕 아래 하트가 톡 */
  .hb-sig[data-ic="couple"] .ib { animation: ic-pop .7s cubic-bezier(.2, .8, .3, 1) .2s both; }
  .hb-sig[data-ic="family"] .ib { animation: ic-pop .7s cubic-bezier(.2, .8, .3, 1) both; }        /* 가족 — 집 안에서 하트가 톡 */
  .hb-sig[data-ic="spouse_partners"] .ia { animation: ic-hop .7s ease both; }                       /* 동업자·거래처·직원 — 셋이 통통 */
  .hb-sig[data-ic="spouse_partners"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .25s both; }
  .hb-sig[data-ic="open"] .ia { animation: ic-hop .7s ease both; }                                  /* 창업·개업 — 가게가 통통 · 별이 반짝 */
  .hb-sig[data-ic="open"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .25s both; }
  .hb-sig[data-ic="fit"] .ia { animation: ic-nudge .7s ease both; }                                 /* 업종 — 돋보기가 살짝 옆으로 */
  .hb-sig[data-ic="fit"] .ib { animation: ic-pop .6s cubic-bezier(.2, .8, .3, 1) .2s both; }
  .hb-sig[data-ic="expand"] .ia { animation: ic-rise .7s cubic-bezier(.2, .8, .3, 1) both; }        /* 확장·이전 — 그래프가 오른다 */
  .hb-sig[data-ic="expand"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .3s both; }
  .hb-sig[data-ic="balance"] .ia { transform-box: view-box; transform-origin: 12px 5px; animation: ic-rock .7s ease both; }   /* 지금 직장 — 저울이 흔들리다 선다 */
  .hb-sig[data-ic="balance"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .25s both; }
  .hb-sig[data-ic="rise"] .ia { transform-box: view-box; transform-origin: 12px 20.5px; animation: ic-grow .7s cubic-bezier(.2, .8, .3, 1) both; }   /* 승진 — 계단이 자란다 */
  .hb-sig[data-ic="rise"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .3s both; }
  .hb-sig[data-ic="getjob"] :is(.ia, .ib) { transform-box: view-box; transform-origin: 12px 4px; animation: ic-rock .7s ease both; }   /* 취업운 — 목걸이 사원증이 흔들리다 선다 */
  .hb-sig[data-ic="side"] .ia { animation: ic-hop .7s ease both; }                                  /* 부업·N잡운 — 가방이 통통 · 동전이 반짝 */
  .hb-sig[data-ic="side"] .ib { animation: ic-pop .6s cubic-bezier(.2, .8, .3, 1) .2s both; }
  .hb-sig[data-ic="bizself"] .ia { transform-box: view-box; transform-origin: 12px 20.5px; animation: ic-rock .7s ease both; }   /* 사업 체질 — 갈림길 표지판이 흔들리다 선다 */
  .hb-sig[data-ic="bizself"] .ib { animation: ic-spark .52s cubic-bezier(.2, .8, .3, 1) .25s both; }
}
/* 「동작 줄이기」 — 움직임 없이 눌린 것만 알린다 (흐려지기 · 즉시) */
@media (prefers-reduced-motion: reduce) {
  :is(.btn, .pill, .menu9 a, .gcard, .finder, .row, .arc-row, .lucky-list a, .tv-tp, .tv-years button, .week-days button, .lk-months button,
    .hour-bars button, .radio, .check, .tabbar .tab, .gtab, .chips a, .quick a, .quick button, .mg, .srow, .seg button, .reason, .pick, .choice, .tv-past, .tv-all, .pair-chip):active:not(:disabled) { opacity: .7; }
}

/* ── 공유하기 창 (2026-10-14 · 운영자 지시) — 글자는 참고 이미지 그대로 셋, 모양은 앱의 바닥 창.
 *    추천하기(사이트 주소)와 결과 공유가 한 창을 쓴다 (app.js HB.share) ── */
.share-sheet { gap: 18px; }
.share-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-top: -18px; }
.share-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--gold-text); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--cream-line); }
.share-url { display: flex; align-items: center; gap: 10px; background: var(--soft2); border-radius: var(--r-row); padding: 0 14px; min-height: 52px; box-shadow: inset 0 0 0 1px var(--line3); }
.share-url-ic { flex: none; color: var(--dim); display: flex; }
.share-url input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: calc(13.5px * var(--fs)); color: var(--ink2); padding: 14px 0; text-overflow: ellipsis; }
.share-url input.loading::placeholder { color: var(--dim); }
/* 결과 화면 위 오른쪽 공유 아이콘 */
.topbar .icon-btn[data-share] { color: var(--ink); background: transparent; border: 0; }

/* 공유 보기 — 받은 사람에게 「○○님이 공유한 결과예요」 띠 · 주인만 쓰는 것([data-own])은 숨긴다 · 꺼진 링크면 본문을 숨긴다 */
.share-band { display: flex; align-items: center; gap: 12px; margin: 0 var(--gutter) 12px; padding: 12px 14px; border-radius: var(--r-row); background: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-line); }
.share-band .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.share-band .t { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(14.5px * var(--fs)); color: var(--ink); }
.share-band .d { font-size: calc(13px * var(--fs)); color: var(--gold-text); }
.hb-shared [data-own] { display: none !important; }
.hb-shared-dead main, .hb-shared-dead .cta-wrap { display: none !important; }
/* 공유 보기의 맨 밑 (2026-10-14 · 운영자 확정 「같은 주제로 · 탭바 숨김 · 띠 단추 뺌」) — 참고한 화면의 파란 카드·검은 막대와 다르게
   본문 끝 크림·금빛 카드(별자리 그림) + 탭바 자리의 남색 단추. 받은 사람을 같은 주제의 자기 화면으로 보낸다 (app.js shareCta) */
.hb-shared .tabbar { display: none !important; }
.hb-shared .phone { padding-bottom: calc(var(--cta) + 40px); }
.share-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.share-cta .sc-q { margin: 0; text-align: center; font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(18px * var(--fs)); color: var(--ink); }
.sc-card { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 14px; border-radius: var(--r-card); background: linear-gradient(135deg, var(--cream) 0%, #EBDDC2 100%); box-shadow: inset 0 0 0 1px var(--cream-line); color: var(--ink); text-decoration: none; }
.sc-card > svg { flex: none; background: rgba(255, 255, 255, .6); border-radius: 50%; }
.sc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-t { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(15.5px * var(--fs)); line-height: 1.4; }
.sc-d { font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--gold-text); }
.sc-go { flex: none; display: flex; color: var(--gold-text); }
.share-bar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: var(--phone); max-width: 100%; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line2); z-index: 40; }
.share-bar .btn { gap: 8px; }
.share-bar .sb-star { color: var(--gold); font-size: calc(14px * var(--fs)); }

/* 두 칸 고르기 (후기 관리 「작성 중인 후기 · 내가 쓴 후기」) */
.tabs2 { display: flex; gap: 4px; background: var(--soft); border-radius: var(--r-pill); padding: 4px; }
.tabs2 button { flex: 1; border: 0; border-radius: var(--r-pill); padding: 10px 8px; font-size: calc(13px * var(--fs)); font-weight: 500; background: transparent; color: var(--dim); }
.tabs2 button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-pick); }
.tabs2 .n { margin-left: 4px; font-family: var(--font-num); color: var(--gold-text); }

/* 구매내역 · 후기 관리 · 공유한 링크 — 보관함 줄(.arc-row)을 그대로 쓰고 덧붙이는 것만 */
.arc-row .price { font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--ink); flex: none; font-family: var(--font-num); }
.arc-row .d b { font-weight: 500; color: var(--gold-text); }
.rv-item { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line3); padding: 16px 0; }
.rv-item:first-child { border-top: 0; }
.rv-item .top { display: flex; align-items: center; gap: 12px; }
.rv-item .ic, .sh-item .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--soft2); display: flex; align-items: center; justify-content: center; flex: none; }
.rv-item .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-item .t { font-size: calc(15px * var(--fs)); font-weight: 500; }
.rv-item .d { font-size: calc(13px * var(--fs)); color: var(--dim); }
.rv-item .stars { color: var(--gold); font-size: calc(15px * var(--fs)); letter-spacing: 1px; }
.rv-item .body { margin: 0; font-size: calc(14px * var(--fs)); line-height: 1.75; color: var(--ink2); white-space: pre-line; word-break: keep-all; }
.rv-item .acts { display: flex; gap: 8px; justify-content: flex-end; }
.rv-item .acts button, .rv-item .acts a { border: 0; border-radius: var(--r-pill); padding: 8px 14px; font-size: calc(13.5px * var(--fs)); font-weight: 500; background: var(--soft); color: var(--ink2); text-decoration: none; }
.rv-item .acts .go { background: var(--ink); color: #fff; }
.rv-draft { font-size: calc(13px * var(--fs)); font-weight: 500; border-radius: var(--r-pill); padding: 3px 9px; background: var(--cream); color: var(--gold-text); flex: none; }
/* 별점 고르기 — 반 칸 단위 (src/reviews.js 의 잣대) · 별 위를 누른 자리로 값이 정해진다 · 화살표 키로 0.5씩 */
.rv-star-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rv-stars { display: inline-flex; gap: 4px; cursor: pointer; touch-action: manipulation; border-radius: 10px; padding: 4px 6px; }
.rv-stars:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rv-stars .s { position: relative; width: 34px; height: 34px; display: block; }
.rv-stars .s svg { position: absolute; inset: 0; }
.rv-stars .s .fill { position: absolute; inset: 0; width: 0; overflow: hidden; }
.rv-stars .s.half .fill { width: 50%; }
.rv-stars .s.full .fill { width: 100%; }
.rv-stars.sm { cursor: default; padding: 0; gap: 2px; }
.rv-stars.sm .s { width: 18px; height: 18px; }
.rv-star-val { font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.rv-text { width: 100%; min-height: 140px; resize: vertical; border: 0; border-radius: var(--r-row); background: var(--soft2); box-shadow: inset 0 0 0 1px var(--line3); padding: 14px; font: inherit; font-size: calc(14px * var(--fs)); line-height: 1.7; color: var(--ink); }
.rv-meta { display: flex; justify-content: space-between; font-size: calc(13px * var(--fs)); color: var(--dim); }
.rv-btns { display: flex; gap: 8px; }
.rv-btns .btn { flex: 1; }
/* 공유한 링크 한 줄 */
.sh-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; border-top: 1px solid var(--line3); padding: 14px 0; }
.sh-item:first-child { border-top: 0; }
.sh-item .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sh-item .t { font-size: calc(15px * var(--fs)); font-weight: 500; }
.sh-item .d { font-size: calc(13px * var(--fs)); color: var(--dim); }
.sh-item .acts { display: flex; gap: 6px; flex-basis: 100%; justify-content: flex-end; }   /* 단추는 아랫줄 — 날짜 줄이 좁아져 꺾이지 않게 */
.sh-item .acts button { border: 0; border-radius: var(--r-pill); padding: 8px 12px; font-size: calc(13px * var(--fs)); font-weight: 500; background: var(--soft); color: var(--ink2); }
.sh-item .acts .off { color: var(--error); }
.note-dim { margin: 0; font-size: calc(13px * var(--fs)); line-height: 1.7; color: var(--dim); }

/* 앱 안 문서 (2026-10-14 · 「hanstarjami.co.kr 에서 끌어오는 자료가 없도록」) — 이용약관 · 개인정보 처리방침 · 환불 정책 ·
   자주 묻는 질문 · 청소년 보호정책이 한 벌을 쓴다 (예전엔 youth.html 안에만 있었다) */
.doc { padding: 24px 24px 40px; display: flex; flex-direction: column; gap: 26px; font-size: calc(13.5px * var(--fs)); line-height: 1.75; color: var(--ink2); }
.doc h1 { margin: 0; font-family: var(--font-title); font-size: calc(23px * var(--fs)); font-weight: var(--w-title); line-height: 1.4; color: var(--ink); }
.doc h2 { margin: 0; font-size: calc(15px * var(--fs)); font-weight: 500; color: var(--ink); }
.doc section { display: flex; flex-direction: column; gap: 8px; }
.doc p { margin: 0; }
.doc ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.doc .box { display: flex; flex-direction: column; gap: 6px; background: var(--soft); border-radius: var(--r-row); padding: 14px 16px; font-size: calc(13px * var(--fs)); }
.doc .tbl { display: grid; grid-template-columns: calc(76px * var(--fs)) minmax(0, 1fr); row-gap: 8px; column-gap: 10px; background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-row); padding: 14px 16px; font-size: calc(13px * var(--fs)); }
.doc .tbl .k { color: var(--dim); }
.doc .tbl a, .doc a { color: var(--ink2); }
.doc .doc-links { display: flex; flex-wrap: wrap; gap: 6px; }   /* .toc 는 상품 목차가 이미 쓴다 — 이름을 따로 */
.doc .doc-links a { text-decoration: none; background: var(--soft); border-radius: var(--r-pill); padding: 7px 12px; font-size: calc(13.5px * var(--fs)); color: var(--ink2); }
.doc .eff { font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.doc .tbl.wide { grid-template-columns: 92px minmax(0, 1fr); }   /* 이름이 긴 칸(맡기는 곳 · 받는 정보) */

/* ── 다 읽은 끝 (2026-10-15 · 제안 E2) — 별점 → 후기 창 · 관련 주제 둘 · 결과 공유 (HB.endBlock 한 벌 · 주제 결과·풀이 보기) ── */
.end-rv { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 2px 0 6px; }
.end-q { font-family: var(--font-title); font-weight: var(--w-title); font-size: calc(17px * var(--fs)); color: var(--ink); }
.end-stars { gap: 0; padding: 0; cursor: default; }
.end-star { border: 0; background: transparent; padding: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.end-d { font-size: calc(13.5px * var(--fs)); color: var(--dim); }
.end-link { border: 0; background: transparent; color: var(--gold-text); font-size: calc(13px * var(--fs)); font-weight: 500; padding: 10px 14px; min-height: 44px; }
/* 열어보면 받는 것 (2026-10-15 · 제안 F1) — 열어보기 단추 바로 위 카드 */
.get-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.get-list li { display: flex; gap: 10px; align-items: baseline; font-size: calc(14px * var(--fs)); line-height: 1.55; color: var(--ink2); }
.get-list li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-2px); }
/* 궁합 예시 (2026-10-15 · 제안 B4) — 사람을 고르기 전 예시 두 사람의 결과를 그대로 보인다.
   흐리게·눌리지 않게 하던 것은 걷었다 (운영자 지시 2026-10-16 「희미하게 하지 말고 그냥 보여줘」) — 예시인 줄은 위 띠(#exampleNote)가 말한다.
   클래스는 JS 가 그대로 붙인다(예시 상태 표시 · 시험이 본다) — 이 클래스에 opacity·filter·pointer-events 를 되살리지 않는다 */
.tv-example-note { margin: 0; background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-row); padding: 11px 14px; font-size: calc(13px * var(--fs)); line-height: 1.6; color: var(--ink2); }
/* 처음 오신 분 카드 3장 (2026-10-15 · 제안 B1) — 오늘 카드 아래 접는 칸 */
.intro-card { background: var(--cream); box-shadow: none; border: 1px solid var(--cream-line); gap: 12px; }
.intro-slide { display: flex; flex-direction: column; gap: 8px; }
.intro-slide h2.h-serif { font-size: calc(19px * var(--fs)); line-height: 1.4; }
.intro-slide p { margin: 0; font-size: calc(14px * var(--fs)); line-height: 1.7; color: var(--ink2); }
.intro-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.intro-dots { padding: 0; }
.intro-next { width: auto; height: 44px; padding: 0 22px; font-size: calc(14px * var(--fs)); background: #fff; }

/* ── 쿠폰함 (2026-10-18 · 운영자 지시 「쿠폰권 이미지·모션」) ──
 * 쿠폰권 = 남색 바탕 · 금빛 글 · 오른쪽 손잡이(점선 + 위아래 홈). 홈은 앱 바탕색 동그라미라 쿠폰권은 카드 밖(앱 바탕) 위에만 둔다.
 * 지난 쿠폰은 회색. 움직임(들어오기·별 반짝·누름)은 전부 아래 no-preference 안 — 「동작 줄이기」면 그대로 서 있다. */
.cp-form { display: flex; gap: 8px; align-items: stretch; }
.cp-input { flex: 1; min-width: 0; height: var(--cta); border: 0; border-radius: var(--r-btn); background: var(--soft); padding: 0 14px;
  font: inherit; font-size: calc(15px * var(--fs)); letter-spacing: .04em; color: var(--ink); text-transform: uppercase; }
.cp-input::placeholder { color: var(--placeholder); letter-spacing: .04em; }
.cp-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.cp-add { width: auto; flex: none; padding: 0 20px; }
.cp-fb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-feedback { background: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-line); }
.cp-past { display: flex; flex-direction: column; gap: 10px; }
.cp-rules { padding: 2px 8px 8px; }
.cp-rules a { color: var(--ink2); }
.cp-list { display: flex; flex-direction: column; gap: 22px; }   /* 홈(위아래 9px)이 이웃 쿠폰권과 안 닿게 */
.cp-list:empty { display: none; }
.cp-tk {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 92px; width: 100%; min-height: 150px;
  padding: 0; border: 0; border-radius: 18px; text-align: left; font: inherit; color: #F1E8D6; text-decoration: none;
  background: radial-gradient(130% 150% at 0% 0%, #2E3C6E 0, var(--ink) 52%, #0B1124 100%);
  box-shadow: 0 2px 4px rgba(18, 26, 51, .14), 0 12px 28px rgba(18, 26, 51, .18);
}
button.cp-tk { cursor: pointer; }
button.cp-tk:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.cp-tk::before, .cp-tk::after { content: ''; position: absolute; right: 92px; width: 18px; height: 18px; margin-right: -9px; border-radius: 50%; background: var(--bg); }
.cp-tk::before { top: -9px; }
.cp-tk::after { bottom: -9px; }
.cp-main { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px 20px; min-width: 0; }
.cp-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 8px; border-left: 1.5px dashed rgba(216, 190, 140, .5); }
.cp-kind { font-size: calc(13px * var(--fs)); letter-spacing: .12em; color: #D8BE8C; }
.cp-title { font-size: calc(14px * var(--fs)); line-height: 1.45; color: #E9E1D0; word-break: keep-all; }
.cp-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-family: var(--font-num); font-weight: 700; font-size: calc(30px * var(--fs)); line-height: 1.2; color: #F3E1B2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cp-val small { font-size: calc(15px * var(--fs)); font-weight: 600; margin-left: 2px; }
.cp-lb { font-family: var(--font-body); font-size: calc(13px * var(--fs)); font-weight: 500; color: #CFC4AE; letter-spacing: .04em; flex-basis: 100%; }
.cp-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; margin: 6px 0 2px; }
.cp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #C9A86A, #F3E1B2); }
.cp-sub { font-size: calc(13px * var(--fs)); line-height: 1.5; color: #CFC6B5; }
.cp-star { color: #E6CB8F; display: flex; }
.cp-act { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  font-size: calc(13px * var(--fs)); font-weight: 600; text-align: center; word-break: keep-all; background: linear-gradient(180deg, #F3E1B2, #C9A86A); color: var(--ink); }
.cp-tk.is-active .cp-act { background: transparent; color: #F3E1B2; box-shadow: inset 0 0 0 1px rgba(243, 225, 178, .6); }
.cp-tk.is-past { background: linear-gradient(135deg, #6E7487, #4D5366); color: #EEF0F4; box-shadow: none; }
.cp-tk.is-past .cp-kind, .cp-tk.is-past .cp-title, .cp-tk.is-past .cp-sub, .cp-tk.is-past .cp-lb, .cp-tk.is-past .cp-val, .cp-tk.is-past .cp-star { color: #E4E6EC; }
.cp-tk.is-past .cp-act { background: rgba(255, 255, 255, .16); color: #F4F5F8; }
.cp-tk.is-past .cp-bar i { background: #C9CED9; }
/* 창 안의 작은 쿠폰권 · 「사용되었어요」 도장 */
.cp-mini { position: relative; width: 64px; height: 40px; border-radius: 9px; background: radial-gradient(120% 140% at 0 0, #2E3C6E 0, var(--ink) 60%); box-shadow: 0 4px 12px rgba(18, 26, 51, .2); }
.cp-mini::before { content: ''; position: absolute; top: 7px; bottom: 7px; right: 18px; border-left: 1.5px dashed rgba(216, 190, 140, .7); }
.cp-mini::after { content: ''; position: absolute; left: 12px; top: 13px; width: 22px; height: 14px; border-radius: 3px; background: linear-gradient(180deg, #F3E1B2, #C9A86A); }
.cp-done-center { position: relative; }
.cp-seal { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #F6E7C1 0, var(--gold) 70%, var(--gold-deep) 100%); box-shadow: 0 6px 18px rgba(140, 106, 53, .35); }
.cp-seal::after { content: ''; width: 26px; height: 14px; margin-top: -6px; border: solid var(--ink); border-width: 0 0 3.5px 3.5px; rotate: -45deg; }
@media (prefers-reduced-motion: no-preference) {
  button.cp-tk { transition: scale .15s ease, box-shadow .15s ease; }
  button.cp-tk:active { scale: .985; }
  .cp-tk.cp-new { animation: cp-in .75s cubic-bezier(.2, .8, .3, 1) both; transform-origin: 50% 0; }
  @keyframes cp-in { 0% { opacity: 0; transform: perspective(700px) rotateX(-72deg) translateY(-14px); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  .cp-tk.is-ready .cp-star, .cp-tk.is-active .cp-star { animation: cp-twinkle 2.6s ease-in-out infinite; }
  @keyframes cp-twinkle { 0%, 100% { opacity: .6; scale: .9; } 50% { opacity: 1; scale: 1.1; } }
  .cp-tk.is-ready .cp-act { animation: cp-call 2.6s ease-in-out .6s infinite; }
  @keyframes cp-call { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.06; } 90% { scale: .98; } }
  .scrim:not(.hb-closing) .cp-seal { animation: cp-seal .55s cubic-bezier(.2, .9, .3, 1.3) .1s both; }
  @keyframes cp-seal { 0% { scale: .3; opacity: 0; rotate: -30deg; } 100% { scale: 1; opacity: 1; rotate: 0deg; } }
  .cp-bar i { transition: width .8s cubic-bezier(.2, .8, .3, 1); }
}