/* 레이아웃: 휴대폰 한 열(최대 480px). 결과 화면 머리는 내 캐릭터의 기운 색으로 물든다. */
:root {
  --bg: #FFFFFF;
  --ink: #22201C;
  --muted: #6B5F57;
  --line: #EEE9E3;
  --soft: #F4F1EC;
  --tint: #FFE9E3;        /* 캐릭터 기운 색 (화면에서 바꿈) */
  --tint-ink: #B8483A;
  --good: #2F7D4F;
  --care: #B8483A;
  --kakao: #FEE500;
  --f-title: 'Jua', 'Apple SD Gothic Neo', sans-serif;
  --f-body: 'Gothic A1', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--f-body); font-size: 17px; line-height: 1.7; word-break: keep-all; -webkit-font-smoothing: antialiased; }
main { max-width: 480px; margin: 0 auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--tint-ink); outline-offset: 2px; }
[hidden] { display: none !important; }

.top { max-width: 480px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) 18px 8px; }
.brand { font-family: var(--f-title); font-size: 22px; text-decoration: none; }
.top-nav { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.top-nav a { text-decoration: none; padding: 8px 4px; }
.kakao-mini { background: var(--kakao); border-radius: 999px; padding: 6px 12px !important; font-weight: 700; color: #191600; }

.pad { padding: 20px 16px; }
.stack { display: grid; gap: 16px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 18px 16px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.strong { font-weight: 700; }
.page-title { font-family: var(--f-title); font-weight: 400; font-size: 30px; line-height: 1.25; }
.loading { color: var(--muted); text-align: center; padding: 28px 8px; border: 2px dashed var(--line); border-radius: 18px; }
.wait { display: grid; gap: 10px; padding: 26px 18px; }
.wait-t { font-weight: 700; color: var(--ink, #111); }
.wait-bar { height: 8px; border-radius: 99px; background: rgba(127, 127, 127, .2); overflow: hidden; }
.wait-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #F5B700; transition: width .5s linear; }
.wait-s { font-size: 14.5px; }
.wait-n { font-size: 13px; opacity: .8; }
body.night #view-paid .wait-t { color: #F6F2E6; }
body.night #view-paid .wait-bar i { background: #D9B45A; }
/* 쓰는 대로 보이는 문장 (스트리밍) */
.wait-live { margin-top: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(127, 127, 127, .3); background: rgba(127, 127, 127, .08); }
.wait-live-k { font-size: 13px; font-weight: 700; opacity: .75; margin: 0 0 6px; }
.wait-live-t { margin: 0; font-size: 16px; line-height: 1.75; min-height: 3.5em; word-break: keep-all; }
.wait-live-t::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em; background: currentColor; animation: wait-caret 1s steps(1) infinite; }
@keyframes wait-caret { 50% { opacity: 0; } }
body.night #view-paid .wait-live { border-color: rgba(217, 180, 90, .45); background: rgba(217, 180, 90, .07); }
body.night #view-paid .wait-live-k { color: #D9B45A; opacity: 1; }
body.night #view-paid .wait-live-t { color: #F6F2E6; font-family: 'Song Myung', serif; }
@media (prefers-reduced-motion: reduce) { .wait-live-t::after { animation: none; } }
.err { color: var(--care); font-size: 15px; }

/* 첫 화면 */
.hero { padding: 8px 18px 18px; display: grid; gap: 10px; }
.hero h1 { font-family: var(--f-title); font-weight: 400; font-size: clamp(30px, 8.6vw, 38px); line-height: 1.22; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--tint-ink); }
.hero .sub { color: var(--muted); font-size: 16px; line-height: 1.6; }
.hero .free-tag { display: inline-block; color: #FFFFFF; background: var(--sd-red, #E5392E); border-radius: 8px; padding: 0 8px; margin-right: 4px; font-size: 15px; line-height: 1.6; } /* 처음 오는 손님이 "돈 드나?" 망설이지 않게 */
.hero-crowd { display: flex; justify-content: center; margin: 4px -4px 4px; }
.hero-crowd .c { width: 25%; max-width: 104px; aspect-ratio: 1; margin: 0 -6px; }
.hero-crowd .c:nth-child(2) { transform: translateY(-10px); }
.hero-crowd .c:nth-child(3) { transform: translateY(-4px); }
.form { margin: 0 18px; display: grid; gap: 14px; }
.row3 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* minmax(0, …): 시각 칸(type=time)은 자기 폭이 커서 1fr이면 옆 칸(태어난 곳)을 덮었음 (휴대폰 375px에서 22px) */
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.field { display: grid; gap: 4px; min-width: 0; font-size: 14px; color: var(--muted); font-weight: 500; }
.field input::placeholder { color: #B9B9C3; font-weight: 500; } /* 예시 숫자가 진해서 이미 채운 것처럼 보였음 */
.field input, .field select { width: 100%; min-width: 0; font: inherit; font-size: 20px; font-weight: 700; color: var(--ink); background: var(--soft); border: 1.5px solid transparent; border-radius: 14px; padding: 6px 12px; min-height: 46px; }
.field input[type="time"] { font-size: 18px; padding-left: 10px; padding-right: 6px; letter-spacing: -.02em; } /* 휴대폰 폭에서 "오후 02:30"이 잘리던 것 */
.field input[type="time"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0 0 0 2px; }
.field input:focus, .field select:focus { border-color: var(--ink); outline: none; background: var(--bg); }
.field input:disabled { opacity: .45; }
.check { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); min-height: 40px; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border-radius: 14px; padding: 4px; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { text-align: center; padding: 6px 10px; min-height: 40px; border-radius: 11px; font-weight: 500; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.seg input:checked + label { background: var(--bg); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(34,32,28,.12); }
.seg input:focus-visible + label { outline: 3px solid var(--tint-ink); }

.btn { display: block; width: 100%; border: 0; border-radius: 16px; padding: 16px; min-height: 58px; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none; }
.btn.primary { background: var(--ink); color: #FFFFFF; }
.btn.kakao { background: var(--kakao); color: #191600; }
.btn.ghost { background: var(--bg); color: var(--ink); border: 1.5px solid var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }

/* 결과 머리 */
.char-head { background: var(--tint); border-radius: 0 0 36px 36px; padding: 8px 16px 26px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.critter { width: min(82vw, 340px); aspect-ratio: 1; }
.critter svg, .critter img, .mini-critter svg, .mini-critter img, .hero-crowd svg, .hero-crowd img { width: 100%; height: 100%; display: block; object-fit: contain; }
.char-sub { color: var(--tint-ink); font-weight: 700; font-size: 15px; }
.char-name { font-family: var(--f-title); font-weight: 400; font-size: 46px; line-height: 1.1; }
.one-line { font-size: 20px; font-weight: 700; line-height: 1.55; text-align: center; text-wrap: balance; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chips span { font-size: 14px; background: var(--soft); border-radius: 999px; padding: 6px 12px; }

.sec { display: grid; gap: 10px; padding-top: 6px; }
.sec-label { font-size: 14px; font-weight: 700; color: var(--tint-ink); letter-spacing: .04em; }
.trait { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.trait h3 { font-size: 18px; line-height: 1.45; }
.basis { font-size: 13px; color: var(--muted); }
.basis::before { content: "근거 · "; color: var(--tint-ink); font-weight: 700; }
.ebars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; height: 96px; }
.eb { display: grid; grid-template-rows: 1fr auto; justify-items: center; height: 100%; gap: 4px; }
.eb i { width: 72%; max-width: 40px; border-radius: 8px 8px 3px 3px; align-self: end; min-height: 6px; }
.eb span { font-size: 14px; font-weight: 700; }
.tip { background: var(--soft); border-radius: 14px; padding: 12px 14px; font-size: 16px; }
.year-kw { font-family: var(--f-title); font-size: 30px; line-height: 1.25; }

.lock { background: var(--soft); border-radius: 22px; padding: 20px 18px; display: grid; gap: 14px; }
.lock .q { font-family: var(--f-title); font-size: 23px; line-height: 1.4; }
.lock ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 16px; display: grid; gap: 2px; }
.lock .price-row { display: flex; justify-content: space-between; align-items: baseline; }
.lock .price-row b { font-size: 24px; font-variant-numeric: tabular-nums; }

/* 결제 */
.order-sum { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.mini-critter { width: 64px; height: 64px; background: var(--tint); border-radius: 16px; padding: 4px; }
.price { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }

/* 유료 */
.block { display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); }
.block h2 { font-family: var(--f-title); font-weight: 400; font-size: 26px; line-height: 1.3; }
.sub-k { font-size: 14px; font-weight: 700; color: var(--tint-ink); }
.fields { display: flex; flex-wrap: wrap; gap: 6px; }
.fields span { background: var(--tint); border-radius: 999px; padding: 4px 12px; font-size: 15px; }
.pick { display: grid; gap: 8px; }
.pick div { border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.pick .good { background: #E6F4E6; }
.pick .care { background: #FFE9E3; }
.pick b { font-size: 16px; }
.month { display: grid; grid-template-columns: 3.2em 1fr; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.month .mn { font-weight: 700; font-variant-numeric: tabular-nums; }
.month .th { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.month .dots { display: flex; gap: 3px; }
.month .dots i { width: 14px; height: 6px; border-radius: 3px; background: var(--line); }
.month .dots i.on { background: var(--tint-ink); }
.month .bd { grid-column: 2; color: var(--muted); font-size: 15px; line-height: 1.65; }
.lucky { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lucky div { background: var(--tint); border-radius: 14px; padding: 10px 6px; text-align: center; display: grid; gap: 2px; min-width: 0; }
.lucky small { font-size: 13px; color: var(--muted); }
.lucky b { font-size: 15px; line-height: 1.4; }
.closing { font-family: var(--f-title); font-size: 22px; line-height: 1.6; text-align: center; padding: 18px 4px 8px; }

.center { text-align: center; }
.channel { display: flex; align-items: center; gap: 12px; background: var(--kakao); color: #191600; border-radius: 18px; padding: 14px 16px; text-decoration: none; line-height: 1.45; }
.ch-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; flex: none; }
.my-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; text-decoration: none; }

.foot { max-width: 480px; margin: 40px auto 0; padding: 20px 16px max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.7; display: grid; gap: 6px; }
@media (prefers-reduced-motion: no-preference) { .fade { animation: fade .45s ease both; } @keyframes fade { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: none; } } }
.lock.ny { background: var(--tint); }
.badge { justify-self: start; font-size: 13px; font-weight: 700; background: var(--ink); color: #FFFFFF; border-radius: 999px; padding: 3px 10px; }
.consent { align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--ink); }
.consent input { margin-top: 3px; flex: none; }
.today-head { gap: 6px; padding-top: 12px; }
.day-tabs { display: inline-flex; background: rgba(255,255,255,.6); border-radius: 999px; padding: 4px; }
.day-tabs button { border: 0; background: transparent; border-radius: 999px; padding: 8px 18px; min-height: 40px; font-weight: 500; color: var(--muted); }
.day-tabs button[aria-selected="true"] { background: var(--ink); color: #FFFFFF; font-weight: 700; }
.today-row { display: flex; align-items: center; gap: 4px; }
.bubble { position: relative; background: #FFFFFF; border-radius: 20px 20px 20px 4px; padding: 12px 14px; font-family: var(--f-title); font-size: 19px; line-height: 1.4; text-align: left; max-width: 180px; }
.score { display: flex; align-items: baseline; gap: 4px; }
.score b { font-family: var(--f-title); font-weight: 400; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.score span { font-size: 18px; color: var(--muted); }
.dline { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); }
.dline b { font-size: 16px; }
.dline:first-child { border-top: 0; }
.today-card { display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--soft); border-radius: 18px; padding: 12px 16px; }
.today-card .mini-critter { width: 56px; height: 56px; }
.rel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-chips button { border: 1.5px solid var(--line); background: var(--bg); border-radius: 999px; padding: 8px 16px; min-height: 44px; font-weight: 500; }
.rel-chips button[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: #FFFFFF; font-weight: 700; }
.gh-head { background: linear-gradient(90deg, var(--tint) 50%, var(--tint2, var(--soft)) 50%); border-radius: 0 0 36px 36px; padding: 14px 16px 22px; display: grid; gap: 6px; text-align: center; }
.gh-pair { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.gh-pair > div { display: grid; justify-items: center; gap: 2px; }
.gh-pair .critter { width: min(46vw, 200px); }
.gh-pair b { font-family: var(--f-title); font-weight: 400; font-size: 21px; }
.gh-score { font-family: var(--f-title); font-size: 60px; line-height: 1; }
.gh-line { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); }
.gh-line b.p { color: var(--good); } .gh-line b.m { color: var(--care); }
.talk { background: var(--soft); border-radius: 16px; padding: 12px 14px; font-size: 16px; }
.gh-cta { background: var(--soft); border-radius: 22px; padding: 18px; display: grid; gap: 12px; }

/* 더 볼 수 있는 풀이 */
.more { display: grid; gap: 0; padding-top: 8px; }
.more .sec-label { padding-bottom: 6px; }
.more-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 14px 2px; border-top: 1px solid var(--line); text-decoration: none; line-height: 1.5; }
.more-item .glyph { width: 48px; height: 48px; border-radius: 14px; background: var(--tint); color: var(--tint-ink); display: flex; align-items: center; justify-content: center; font-family: var(--f-title), 'Noto Serif KR', serif; font-size: 24px; }
.more-price { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.month .mn small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.2; }

/* 좋은 날 고르기 */
.gd-sum { background: var(--tint); border-radius: 22px; padding: 18px; display: grid; gap: 12px; text-align: center; }
.gd-sum .q { font-family: var(--f-title); font-size: 22px; line-height: 1.4; }
.gd-sum em { font-style: normal; color: var(--tint-ink); }
.gd-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gd-counts div { background: rgba(255,255,255,.7); border-radius: 14px; padding: 10px 4px; display: grid; }
.gd-counts b { font-family: var(--f-title); font-weight: 400; font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gd-counts span { font-size: 13px; color: var(--muted); }
.gd-counts .av b { color: var(--care); }
.gd-blur { display: grid; gap: 6px; filter: blur(5px); user-select: none; opacity: .7; }
.gd-day { display: flex; justify-content: space-between; background: var(--soft); border-radius: 12px; padding: 12px 14px; }
.gd-card { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 6px; }
.gd-card.top { border: 2px solid var(--ink); }
.gd-card ul { margin: 0; padding-left: 1.1em; font-size: 15px; display: grid; gap: 2px; }
.gd-date { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gd-date b { font-family: var(--f-title); font-weight: 400; font-size: 26px; }
.gd-date .tag { font-size: 12px; font-weight: 700; background: var(--tint); color: var(--tint-ink); border-radius: 999px; padding: 2px 8px; }
.gd-grade { font-size: 14px; font-weight: 700; color: var(--good); }
.cal { display: grid; gap: 6px; margin-top: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-grid .wd { font-size: 12px; color: var(--muted); }
.c { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.c.great { background: var(--good); color: #FFFFFF; }
.c.good { background: #CFE8D3; color: #1F4D2E; }
.c.soso { background: var(--soft); color: var(--muted); font-weight: 500; }
.c.avoid { background: #FFFFFF; color: var(--care); border: 1.5px dashed #E8B4AC; text-decoration: line-through; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-legend .c { aspect-ratio: auto; padding: 4px 10px; font-size: 13px; text-decoration: none; }
details summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.avoid-list { margin: 0; padding-left: 1.1em; font-size: 15px; display: grid; gap: 4px; }

/* 부적 */
.bj-frame { display: flex; justify-content: center; }
.bj-frame canvas, .bj-frame img { width: min(78vw, 300px); height: auto; aspect-ratio: 9 / 16; border-radius: 22px; box-shadow: 0 10px 30px rgba(34,32,28,.18); display: block; }

/* 상품 목록 분류 */
.catalog { display: grid; gap: 18px; padding-top: 10px; }
.cat-title { font-family: var(--f-title); font-weight: 400; font-size: 26px; line-height: 1.3; }
.more-item .glyph { font-size: 17px; letter-spacing: -.02em; }
.bundle-link { display: block; text-align: center; font-size: 15px; color: var(--tint-ink); text-decoration: none; padding: 4px 0; }
.verdict { font-family: var(--f-title); font-size: 23px; line-height: 1.4; color: var(--tint-ink); }
.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.check-list li { background: var(--soft); border-radius: 14px; padding: 12px 14px 12px 40px; position: relative; font-size: 16px; }
.check-list li::before { content: ""; position: absolute; left: 14px; top: 17px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--tint-ink); }
.c.today { outline: 2.5px solid var(--ink); outline-offset: 1px; }
.decades { display: grid; gap: 0; border-left: 3px solid var(--tint); margin-left: 6px; }
.decade { position: relative; padding: 4px 0 16px 18px; display: grid; gap: 4px; }
.decade::before { content: ""; position: absolute; left: -9px; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 3px solid var(--tint-ink); }
.decade h3 { font-size: 18px; line-height: 1.45; }
.samjae { display: flex; gap: 12px; align-items: center; background: var(--soft); border-radius: 18px; padding: 14px 16px; text-decoration: none; }
.samjae .sj-badge { flex: none; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--f-title); font-size: 18px; background: var(--bg); color: var(--tint-ink); text-align: center; line-height: 1.1; }
.samjae.on .sj-badge { background: var(--care); color: #FFFFFF; }

/* 상품 카드: 분류마다 옆으로 넘겨 보기 */
.catalog { gap: 22px; }
.more { --tile: #FFF1E8; }
.more[data-group="love"] { --tile: #FFE8EE; }
.more[data-group="work"] { --tile: #E4F4EA; }
.more[data-group="family"] { --tile: #FFF5D9; }
.more[data-group="life"] { --tile: #EEE8FF; }
.more[data-group="special"] { --tile: #E3F0FF; }
/* 상품 카드: 휴대폰도 옆으로 넘기지 않고 2장씩 아래로 펼침 (2-52 사장님 "잘려서 옆으로 넘겨야 해 불편") */
.prow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 2px 0 8px; }
.prow::-webkit-scrollbar { display: none; }
.pcard { display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; background: var(--tile); border-radius: 22px; padding: 12px 12px 14px; text-decoration: none; min-width: 0; }
.pcard .pic { display: block; width: 76px; height: 76px; margin: 0 0 2px -4px; }
.pcard .pic svg, .pcard .pic img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pname { font-size: 16px; line-height: 1.35; }
.pline { font-size: 13px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pprice { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; padding-top: 6px; }
.pcard.owned .pprice { color: var(--good); }
.pcard:active { transform: scale(.98); }
.glyph.art { background: var(--soft); padding: 4px; }
.glyph.art svg, .glyph.art img { width: 100%; height: 100%; }
.lock.ny { position: relative; }
.ny-pic { position: absolute; right: 12px; top: 10px; width: 64px; height: 64px; }
.ny-pic svg, .ny-pic img { width: 100%; height: 100%; }


/* ───── 사주 리포트 (상세 풀이) ───── */
:root { --f-serif: 'Noto Serif KR', 'Nanum Myeongjo', 'AppleMyungjo', serif; --seal: #C0392B; --paper: #FBF8F2; }
.rp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; background: transparent; }
.rp-progress span { display: block; height: 100%; width: 0; background: var(--tint-ink); transition: width .1s linear; }
.rp-cover { position: relative; margin: -20px -16px 0; padding: 26px 20px 22px; background: var(--tint); border-radius: 0 0 32px 32px; display: grid; justify-items: center; gap: 8px; text-align: center; overflow: hidden; }
.rp-brand { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--tint-ink); }
.rp-title { font-family: var(--f-title); font-weight: 400; font-size: clamp(30px, 8.4vw, 38px); line-height: 1.22; text-wrap: balance; }
.rp-cover .critter { width: min(64vw, 250px); margin: -2px 0 -6px; }
.rp-who { display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.rp-who span { font-family: var(--f-title); font-size: 22px; color: var(--ink); }
.rp-headline { font-family: var(--f-serif); font-weight: 700; font-size: 20px; line-height: 1.55; text-wrap: balance; padding: 6px 4px 2px; }
.rp-headline::before { content: '“'; } .rp-headline::after { content: '”'; }
.rp-cover .chips span { background: rgba(255,255,255,.7); border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.rp-meta { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 10px 0 0; border-top: 1px solid rgba(34,32,28,.14); padding-top: 12px; }
.rp-meta div { display: grid; gap: 0; }
.rp-meta div + div { border-left: 1px solid rgba(34,32,28,.14); }
.rp-meta dt { font-size: 12px; color: var(--muted); }
.rp-meta dd { margin: 0; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.rp-seal { position: absolute; top: 18px; right: 16px; width: 46px; height: 46px; border: 2.5px solid var(--seal); color: var(--seal); border-radius: 6px; font-family: var(--f-serif); font-weight: 700; font-size: 13px; line-height: 1.15; display: grid; place-items: center; transform: rotate(-8deg); opacity: .85; background: rgba(255,255,255,.25); }
.rp-seal.small { position: static; display: inline-grid; width: 38px; height: 38px; font-size: 11px; margin-left: 10px; vertical-align: middle; }
.rp-no { position: absolute; bottom: 6px; left: 20px; font-size: 11px; color: var(--muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; } /* 표지 왼쪽 아래 (위에 두면 휴대폰 폭에서 "사주동무 리포트" 글자와 붙어 보였음) */
.rp-summary { display: grid; gap: 8px; padding: 22px 2px 6px; }
.rp-summary p:last-child { font-size: 17.5px; line-height: 1.85; }

.toc { background: var(--soft); border-radius: 20px; padding: 16px 16px 10px; display: grid; gap: 6px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.toc a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--line); }
.toc a span { font-family: var(--f-serif); font-weight: 700; color: var(--tint-ink); min-width: 1.4em; font-variant-numeric: tabular-nums; }

.ch { display: grid; gap: 14px; padding: 34px 0 6px; scroll-margin-top: 12px; }
.ch-head { display: grid; gap: 2px; }
.ch-no { font-family: var(--f-serif); font-weight: 700; font-size: 40px; line-height: 1; color: var(--tint-ink); }
.ch-no small { font-size: 16px; margin-left: 3px; }
.ch-head h2 { font-family: var(--f-title); font-weight: 400; font-size: 28px; line-height: 1.3; }
.ch-point { font-family: var(--f-serif); font-weight: 700; font-size: 19px; line-height: 1.6; text-wrap: balance; padding: 14px 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
.ch-body { display: grid; gap: 14px; }
.ch-body > p { font-size: 17px; line-height: 1.85; }
.ch-title { font-family: var(--f-title); font-weight: 400; font-size: 23px; }
.ch-sub { display: grid; gap: 4px; }
.ch-sub h3, .vs h3, .du-row h3 { font-size: 16px; font-weight: 700; color: var(--tint-ink); }
.ch-sub p { line-height: 1.85; }
.ch-basis { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--muted); background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.ch-basis span { font-size: 12px; font-weight: 700; color: var(--tint-ink); background: var(--bg); border-radius: 999px; padding: 2px 9px; }

/* 여덟 글자 표 */
.ms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ms-col { display: grid; gap: 5px; justify-items: stretch; text-align: center; padding: 8px 4px; border-radius: 16px; }
.ms-col.me { background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ms-pos { font-size: 12px; color: var(--muted); line-height: 1.3; }
.ms-pos em { display: block; font-style: normal; font-weight: 700; color: var(--ink); }
.ms-god { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.ms-tile { display: grid; gap: 0; padding: 8px 0 6px; border-radius: 12px; background: color-mix(in srgb, var(--el) 16%, #FFFFFF); border: 1.5px solid color-mix(in srgb, var(--el) 50%, #FFFFFF); }
.ms-tile b { font-family: var(--f-serif); font-weight: 700; font-size: clamp(28px, 8vw, 36px); line-height: 1.15; color: color-mix(in srgb, var(--el) 70%, #000000); }
.ms-tile span { font-size: 11.5px; color: var(--muted); }
.ms-tile.empty { background: var(--soft); border-style: dashed; border-color: var(--line); }
.ms-tile.empty b { color: var(--muted); }
.ms-stage { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.ms-note { font-size: 13px; color: var(--muted); line-height: 1.6; }

.el-chart { display: grid; gap: 8px; padding-top: 4px; }
.el-row { display: grid; grid-template-columns: 4.2em 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
.el-name { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.el-name i { width: 10px; height: 10px; border-radius: 50%; }
.el-bar { height: 12px; background: var(--soft); border-radius: 6px; overflow: hidden; }
.el-bar span { display: block; height: 100%; border-radius: 6px; }
.el-num { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.el-tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.el-tag.strong { background: var(--ink); color: #FFFFFF; }
.el-tag.none { border: 1px solid var(--care); color: var(--care); }
.gauge { display: grid; gap: 6px; background: var(--soft); border-radius: 14px; padding: 12px 14px; }
.gauge-k { font-size: 14px; color: var(--muted); }
.gauge-k b { color: var(--ink); margin-left: 4px; }
.gauge-bar { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #C9D8E8, #E7E1D6 50%, #E8C9C2); }
.gauge-mark { position: absolute; top: -5px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.gauge-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* 강점·그림자 */
.sw { display: grid; gap: 10px; }
.sw-card { border-radius: 18px; padding: 16px; display: grid; gap: 6px; }
.sw-card.good { background: color-mix(in srgb, var(--good) 9%, #FFFFFF); }
.sw-card.shade { background: var(--soft); }
.sw-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.sw-card h3, .type-card h3 { font-family: var(--f-title); font-weight: 400; font-size: 22px; line-height: 1.3; }
.sw-b { font-size: 13px; color: var(--muted); }
.sw-card .tip { background: var(--bg); }
.type-card { background: var(--tint); border-radius: 18px; padding: 16px; display: grid; gap: 6px; }
.vs { display: grid; grid-template-columns: 1fr; gap: 8px; }
.vs > div { background: var(--soft); border-radius: 16px; padding: 14px 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.vs > div:first-child { background: color-mix(in srgb, var(--good) 9%, #FFFFFF); }
.vs p { font-size: 15px; line-height: 1.7; }

/* 10년 띠 */
.du-wrap { overflow-x: auto; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: thin; }
.du { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.du-item { position: relative; flex: 0 0 96px; display: grid; gap: 2px; align-content: start; padding: 12px 10px; border-radius: 14px; background: var(--soft); min-height: 112px; }
.du-item.past { opacity: .6; }
.du-item.now { background: var(--ink); color: #FFFFFF; opacity: 1; }
.du-age { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.du-gz { font-family: var(--f-serif); font-weight: 700; font-size: 19px; }
.du-t { font-size: 12.5px; line-height: 1.45; }
.du-now { position: absolute; top: -8px; right: 8px; background: var(--seal); color: #FFFFFF; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.du-all { border-top: 1px solid var(--line); padding-top: 10px; }
.du-all summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.du-row { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.du-row p:last-child { font-size: 15px; color: var(--muted); }

/* 12달 그래프·카드 */
.mg { margin: 0; display: grid; gap: 6px; }
.mg svg { width: 100%; height: auto; display: block; }
.mg-grid { stroke: var(--line); stroke-width: 1; }
.mg-line { fill: none; stroke: var(--tint-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mg-dot { fill: var(--bg); stroke: var(--tint-ink); stroke-width: 2; }
.mg-dot.best { fill: var(--good); stroke: var(--bg); }
.mg-dot.care { fill: var(--care); stroke: var(--bg); }
.mg-x { font-size: 11px; fill: var(--muted); font-family: var(--f-body); }
.mg-x.best { fill: var(--good); font-weight: 700; } .mg-x.care { fill: var(--care); font-weight: 700; }
.mg-year { stroke: var(--muted); stroke-dasharray: 3 3; }
.mg-yt { font-size: 10px; fill: var(--muted); }
.mg figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.mg .lg::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.mg .lg.best::before { background: var(--good); } .mg .lg.care::before { background: var(--care); }
.mc-list { display: grid; gap: 0; }
.mc { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); }
.mc header { display: grid; grid-template-columns: 3.4em 1fr; gap: 10px; align-items: center; }
.mc-m { font-family: var(--f-serif); font-weight: 700; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mc-m small { display: block; font-family: var(--f-body); font-size: 11px; font-weight: 500; color: var(--muted); }
.mc header div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mc h3 { font-size: 17px; }
.mc .dots { display: flex; gap: 3px; }
.mc .dots i { width: 14px; height: 6px; border-radius: 3px; background: var(--line); }
.mc .dots i.on { background: var(--tint-ink); }
.mc.best .mc-m { color: var(--good); } .mc.care .mc-m { color: var(--care); }
.mc > p { font-size: 16px; line-height: 1.8; padding-left: calc(3.4em + 10px); }
.mc-dd { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px !important; }
.mc-dd span { border-radius: 10px; padding: 4px 10px; }
.mc-dd b { font-size: 12px; margin-right: 6px; }
.mc-dd .do { background: color-mix(in srgb, var(--good) 11%, #FFFFFF); } .mc-dd .do b { color: var(--good); }
.mc-dd .dont { background: #FFEFEB; } .mc-dd .dont b { color: var(--care); }
@media (max-width: 380px) { .mc > p { padding-left: 0; } }

/* 행운 처방 */
.lk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lk div { background: var(--tint); border-radius: 14px; padding: 12px 8px; display: grid; gap: 2px; text-align: center; align-content: start; }
.lk small { font-size: 12px; color: var(--muted); }
.lk b { font-size: 15px; line-height: 1.45; }
.lk:has(> div:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 4칸이면 2×2 (신년운세: 색·물건·장소·습관) */

/* 편지 */
.rp-letter { margin-top: 34px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 22px 20px; display: grid; gap: 12px; }
.rp-letter > p:nth-child(2) { font-size: 17px; line-height: 1.95; }
.rp-sign { text-align: right; font-family: var(--f-serif); font-weight: 700; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .rp-progress span { transition: none; } }
.toc-peek { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; max-height: 92px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.toc-peek span { font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 4px; display: inline-flex; gap: 6px; align-items: center; }
.toc-peek i { font-style: normal; font-family: var(--f-serif); font-weight: 700; font-size: 11px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--tint-ink); }
.mock-note { font-size: 13px; color: var(--muted); background: var(--soft); border-radius: 12px; padding: 8px 12px; margin: 0 0 12px; }

/* ═══════════ 디자인: 앞쪽은 "색동 스티커", 유료 리포트는 "밤 에디션" (2026-10-13 결정) ═══════════
   색동 = 흰 바탕 + 굵은 검정 테두리 + 밀린 그림자 + 다섯 기운 색. 밤 = 남색 밤하늘 + 금색 선. 캐릭터와 색동 줄은 둘 다 같이 쓴다. */
:root {
  --bg: #FFFFFF; --ink: #111111; --muted: #4D4A57; --line: #E2DFEA; --soft: #F5F3FA;
  --edge: #111111; --hard: 4px 4px 0 #111111;
  --sd-red: #E63A2E; --sd-yel: #F5B700; --sd-grn: #1F9E5A; --sd-blu: #2D5BD8; --sd-pnk: #F06BA8;
  --good: #1F9E5A; --care: #E63A2E;
  --f-title: 'Do Hyeon', 'Apple SD Gothic Neo', sans-serif;
  --f-body: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --f-night: 'Song Myung', 'Noto Serif KR', 'AppleMyungjo', serif;
  --n-bg: #0D1130; --n-card: #161B45; --n-ink: #F3EEDF; --n-muted: #A9A6C4; --n-gold: #E8C36A; --n-gold2: #F5DA96; --n-line: rgba(232,195,106,.3);
  --stripe: repeating-linear-gradient(90deg, #E63A2E 0 26px, #F5B700 26px 52px, #1F9E5A 52px 78px, #2D5BD8 78px 104px, #F06BA8 104px 130px);
}
body::before { content: ""; display: block; height: 10px; background: var(--stripe); border-bottom: 2.5px solid var(--edge); }
.brand { font-family: var(--f-title); font-size: 25px; letter-spacing: -.01em; }
.top-nav a { font-weight: 700; }
.kakao-mini { border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); }
.page-title, .cat-title, .hero h1, .char-name, .year-kw, .lock .q, .gd-sum .q, .closing, .verdict, .block h2 { font-family: var(--f-title); font-weight: 400; letter-spacing: -.01em; }
.hero h1 em { color: var(--ink); background: var(--sd-yel); border: 2.5px solid var(--edge); padding: 0 6px; }

.btn { border: 2.5px solid var(--edge); border-radius: 16px; box-shadow: var(--hard); transition: transform .08s, box-shadow .08s; }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--edge); }
.btn.primary { background: var(--sd-red); color: #FFFFFF; }
.btn.ghost { background: #FFFFFF; color: var(--ink); border-width: 2.5px; }
.btn.kakao { background: var(--kakao); }

.card, .form { border: 2.5px solid var(--edge); border-radius: 22px; box-shadow: 6px 6px 0 var(--edge); }
.field input, .field select { background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 12px; }
.field input:focus, .field select:focus { box-shadow: 3px 3px 0 var(--sd-blu); }
.seg { background: #FFFFFF; border: 2.5px solid var(--edge); }
.seg input:checked + label { background: var(--sd-yel); color: var(--ink); box-shadow: none; }

.char-head { border-bottom: 3px solid var(--edge); border-left: 3px solid var(--edge); border-right: 3px solid var(--edge); }
.char-sub { color: var(--ink); background: #FFFFFF; border: 2px solid var(--edge); border-radius: 999px; padding: 2px 12px; }
.chips span { background: #FFFFFF; border: 2px solid var(--edge); font-weight: 700; }
.sec-label { color: var(--ink); background: var(--sd-yel); border: 2px solid var(--edge); border-radius: 999px; padding: 2px 12px; justify-self: start; letter-spacing: 0; }
.trait { border-top: 2px dashed var(--line); }
.basis::before { color: var(--sd-red); }
.eb i { border: 2px solid var(--edge); border-bottom: 0; border-radius: 8px 8px 0 0; }
.tip { background: #FFF6D6; border: 2px solid var(--edge); }

.today-card, .samjae, .gh-cta, .talk, .gd-sum, .gd-card, .check-list li { background: #FFFFFF; border: 2.5px solid var(--edge); box-shadow: var(--hard); }
.today-card:nth-of-type(odd) { background: #FFE1DC; }
.today-card .mini-critter, .mini-critter { border: 2px solid var(--edge); }
.samjae.on .sj-badge { background: var(--sd-red); border: 2px solid var(--edge); }
.rel-chips button { border: 2.5px solid var(--edge); font-weight: 700; }
.rel-chips button[aria-checked="true"] { background: var(--sd-blu); border-color: var(--edge); }
.day-tabs { border: 2px solid var(--edge); background: #FFFFFF; }
.day-tabs button[aria-selected="true"] { background: var(--ink); }
.bubble { border: 2.5px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); }
.score b { font-family: var(--f-title); }
.gh-head { border-bottom: 3px solid var(--edge); }

.pcard { border: 2.5px solid var(--edge); box-shadow: var(--hard); border-radius: 18px; }
.prow { padding: 4px 0 12px; }
.c.great { border: 2px solid var(--edge); }
.c.good { border: 2px solid var(--edge); }

/* 유료로 가는 카드는 밤 에디션 */
.lock, .lock.ny { background-color: var(--n-bg); background-image: radial-gradient(1.2px 1.2px at 20px 30px, #F3EEDF 50%, transparent 51%), radial-gradient(1px 1px at 120px 70px, #E8C36A 50%, transparent 51%), radial-gradient(1.3px 1.3px at 260px 30px, #F3EEDF 50%, transparent 51%); background-size: 340px 110px; color: var(--n-ink); border: 3px solid var(--edge); border-radius: 22px; box-shadow: 6px 6px 0 var(--n-gold); }
.lock .q { font-family: var(--f-night); font-size: 24px; line-height: 1.45; }
.lock ul { color: var(--n-muted); }
.lock ul b { color: var(--n-gold2); }
.lock .price-row .muted { color: var(--n-muted); }
.lock .price-row b { color: var(--n-gold); }
.lock .btn.primary { background: var(--n-gold); color: var(--n-bg); }
.lock .badge { background: var(--n-gold); color: var(--n-bg); }
.lock .bundle-link { color: var(--n-gold2); }
.toc-peek span { background: var(--n-card); border-color: var(--n-line); color: var(--n-ink); }
.toc-peek i { background: var(--n-bg); color: var(--n-gold); }

/* 질문 메뉴 */
.ask { display: grid; gap: 12px; padding-top: 6px; }
.ask-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-tab { font: inherit; font-size: 14px; font-weight: 700; background: #FFFFFF; color: var(--ink); border: 2px solid var(--edge); border-radius: 999px; padding: 6px 13px; min-height: 38px; }
.ask-tab[aria-pressed="true"] { background: var(--sd-red); color: #FFFFFF; }
.ask-total { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--n-ink); background: var(--n-bg); border: 3px solid var(--edge); border-radius: 18px; box-shadow: 5px 5px 0 var(--n-gold); padding: 12px 14px; }
.ask-total-k { font-family: var(--f-night); font-size: 24px; color: var(--n-gold); white-space: nowrap; } /* 한자 '全' 대신 '7권' (한자 금지 원칙) */
.ask-total > span:nth-child(2) { flex: 1; font-size: 14px; line-height: 1.45; }
.ask-total > span:nth-child(2) span { color: var(--n-muted); font-size: 12.5px; }
.ask-total-p { color: var(--n-gold); font-size: 15px; white-space: nowrap; }
.ask-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ask-list:not(.open) .ask-q.fold { display: none; } /* 분류마다 4개만 먼저, "더 보기"로 펼침 */
.ask-more { width: 100%; margin-top: 12px; }
.ask-q { position: relative; display: grid; gap: 4px; align-content: start; text-decoration: none; background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 16px; box-shadow: 3px 3px 0 var(--edge); padding: 12px; min-width: 0; }
.ask-q:nth-child(5n+1) { background: #FFE1DC; } .ask-q:nth-child(5n+2) { background: #DDF3E5; } .ask-q:nth-child(5n+3) { background: #E1E8FB; } .ask-q:nth-child(5n+4) { background: #FDE3F0; } .ask-q:nth-child(5n) { background: #FFF2C4; }
.ask-q b { font-size: 15px; line-height: 1.35; }
.ask-q span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ask-free { position: absolute; top: -9px; right: 10px; font-style: normal; font-size: 11px; font-weight: 700; color: #FFFFFF; background: var(--sd-red); border: 2px solid var(--edge); border-radius: 999px; padding: 0 7px; }
.ask-badge { justify-self: start; font-size: 12px; font-weight: 700; background: var(--sd-yel); border: 2px solid var(--edge); border-radius: 999px; padding: 2px 10px; }
.ask-line { display: grid; gap: 4px; background: #FFE1DC; border: 3px solid var(--edge); border-radius: 18px; box-shadow: 5px 5px 0 var(--edge); padding: 12px 14px; }
.ask-line span { font-size: 12.5px; font-weight: 700; }
.ask-line b { font-size: 18px; line-height: 1.5; }
.ask-chs { margin: 0; list-style: none; display: grid; gap: 6px; background: var(--n-bg); color: var(--n-muted); border: 3px solid var(--edge); border-radius: 18px; padding: 14px 16px; font-size: 14.5px; }
.ask-chs li.on { color: var(--n-gold); font-weight: 700; font-size: 15.5px; }
@media (max-width: 340px) { .ask-list { grid-template-columns: 1fr; } }

/* ── 밤 에디션: 유료 풀이 화면 전체 ── */
body.night { background-color: var(--n-bg); background-image: radial-gradient(1.2px 1.2px at 20px 30px, #F3EEDF 50%, transparent 51%), radial-gradient(1px 1px at 120px 80px, #E8C36A 50%, transparent 51%), radial-gradient(1.4px 1.4px at 260px 40px, #F3EEDF 50%, transparent 51%), radial-gradient(1px 1px at 330px 150px, #A9A6C4 50%, transparent 51%); background-size: 390px 230px; color: var(--n-ink); }
body.night::before { height: 6px; border-bottom: 0; }
body.night .brand { color: var(--n-gold); }
body.night .top-nav a { color: var(--n-ink); }
body.night .foot { color: var(--n-muted); border-top-color: var(--n-line); }
body.night .foot a { color: var(--n-muted); }
body.night #view-paid { --muted: var(--n-muted); --line: var(--n-line); --soft: var(--n-card); --ink: var(--n-ink); --tint-ink: var(--n-gold); --good: #7FD9A2; --care: #FF8F84; --paper: var(--n-card); color: var(--n-ink); }
body.night #view-paid .loading { border-color: var(--n-line); color: var(--n-muted); }
body.night #view-paid .block h2, body.night #view-paid .ch-head h2, body.night #view-paid .rp-title, body.night #view-paid .char-name, body.night #view-paid .closing, body.night #view-paid .verdict, body.night #view-paid .page-title, body.night #view-paid .cat-title { font-family: var(--f-night); font-weight: 400; }
body.night #view-paid .closing, body.night #view-paid .verdict { color: var(--n-gold); }
body.night #view-paid .char-head, body.night #view-paid .gh-head { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tint) 35%, transparent), transparent 70%); border: 1px solid var(--n-line); border-top: 0; }
body.night #view-paid .char-sub { background: transparent; color: var(--n-gold); border-color: var(--n-line); }
body.night #view-paid .critter img, body.night #view-paid .critter svg { filter: drop-shadow(0 0 22px rgba(232,195,106,.35)); }
body.night #view-paid .chips span, body.night #view-paid .fields span { background: transparent; color: var(--n-gold); border: 1px solid var(--n-line); }
body.night #view-paid .tip, body.night #view-paid .talk, body.night #view-paid .check-list li, body.night #view-paid .gd-card, body.night #view-paid .gd-sum, body.night #view-paid .lucky div, body.night #view-paid .lk div, body.night #view-paid .sw-card, body.night #view-paid .type-card, body.night #view-paid .vs > div, body.night #view-paid .du-item, body.night #view-paid .gauge, body.night #view-paid .ch-basis, body.night #view-paid .toc, body.night #view-paid .mock-note { background: var(--n-card); color: var(--n-ink); border: 1px solid var(--n-line); box-shadow: none; }
body.night #view-paid .pick .good { background: rgba(31,158,90,.16); border: 1.5px solid #1F9E5A; }
body.night #view-paid .pick .care { background: rgba(230,58,46,.14); border: 1.5px solid #E63A2E; }
body.night #view-paid .month .dots i, body.night #view-paid .mc .dots i { background: rgba(243,238,223,.15); }
body.night #view-paid .month .dots i.on, body.night #view-paid .mc .dots i.on { background: var(--n-gold); }
body.night #view-paid .rp-cover { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 68%); border: 1px solid var(--n-line); border-top: 0; }
body.night #view-paid .rp-cover::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--stripe); }
body.night #view-paid .rp-brand, body.night #view-paid .rp-headline { color: var(--n-gold); }
body.night #view-paid .rp-headline { font-family: var(--f-night); font-weight: 400; font-size: 22px; }
body.night #view-paid .rp-who span { color: var(--n-ink); font-family: var(--f-night); }
body.night #view-paid .rp-meta, body.night #view-paid .rp-meta div + div { border-color: var(--n-line); }
body.night #view-paid .rp-seal { border-color: var(--n-gold); color: var(--n-gold); border-radius: 50%; background: transparent; }
body.night #view-paid .ch-no { font-family: var(--f-night); font-weight: 400; color: var(--n-gold); }
body.night #view-paid .ch-point { font-family: var(--f-night); font-weight: 400; color: var(--n-gold); border-top-color: var(--n-gold); }
body.night #view-paid .ch-basis span, body.night #view-paid .toc a span { background: transparent; color: var(--n-gold); }
body.night #view-paid .toc a { border-bottom-color: var(--n-line); }
body.night #view-paid .ms-col.me { background: transparent; box-shadow: inset 0 0 0 1.5px var(--n-gold), 0 0 18px rgba(232,195,106,.2); }
body.night #view-paid .ms-tile { background: color-mix(in srgb, var(--el) 18%, var(--n-bg)); border-color: color-mix(in srgb, var(--el) 70%, var(--n-bg)); }
body.night #view-paid .ms-tile b { color: var(--n-ink); font-family: var(--f-night); font-weight: 400; }
body.night #view-paid .el-bar, body.night #view-paid .gauge-bar { background: rgba(243,238,223,.1); }
body.night #view-paid .gauge-mark { background: var(--n-gold); border-color: var(--n-bg); }
body.night #view-paid .el-tag.strong { background: var(--n-gold); color: var(--n-bg); }
body.night #view-paid .du-item.now { background: var(--n-gold); color: var(--n-bg); }
body.night #view-paid .du-gz, body.night #view-paid .mc-m { font-family: var(--f-night); font-weight: 400; }
body.night #view-paid .mg-dot { fill: var(--n-bg); stroke: var(--n-gold); }
body.night #view-paid .mg-dot.best { fill: #1F9E5A; stroke: #111111; }
body.night #view-paid .mg-dot.care { fill: #E63A2E; stroke: #111111; }
body.night #view-paid .mg-grid { stroke: #2A3166; }
body.night #view-paid .mg-line { stroke: var(--n-gold); }
body.night #view-paid .mc-dd .do { background: rgba(31,158,90,.2); } body.night #view-paid .mc-dd .dont { background: rgba(230,58,46,.2); }
body.night #view-paid .rp-letter { background: var(--n-card); border: 1px solid var(--n-gold); }
body.night #view-paid .rp-sign { color: var(--n-gold); }
body.night #view-paid .c.soso { background: var(--n-card); color: var(--n-muted); }
body.night #view-paid .c.avoid { background: transparent; }
body.night #view-paid .decades { border-left-color: var(--n-line); }
body.night #view-paid .decade::before { background: var(--n-bg); border-color: var(--n-gold); }
body.night #view-paid .more-item { border-top-color: var(--n-line); }
body.night #view-paid .btn.primary { background: var(--n-gold); color: var(--n-bg); box-shadow: 4px 4px 0 #111111; }
body.night #view-paid .btn.ghost { background: transparent; color: var(--n-gold); border-color: var(--n-gold); box-shadow: none; }
body.night #view-paid .muted { color: var(--n-muted); }
body.night #view-paid .err { color: #FF8F84; }

/* 유료 풀이 아래 막대 */
.paid-bar { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 480px; margin: 0 auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--n-bg) 35%); }
.paid-bar .btn { min-height: 50px; font-size: 16px; padding: 10px; }
#pdfBtn { background: var(--n-gold); color: var(--n-bg); }
#shareBtn { background: var(--sd-yel); color: #111111; }
body.pdf-mode .paid-bar, body.pdf-mode .rp-progress { display: none !important; }
.flash { animation: flash 2.4s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--n-gold); border-radius: 12px; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* 공유 카드 창 */
.share-sheet { position: fixed; inset: 0; z-index: 100; background: rgba(17,17,17,.78); display: flex; align-items: flex-end; justify-content: center; }
.share-box { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: #FFFFFF; color: #111111; border: 3px solid #111111; border-bottom: 0; border-radius: 24px 24px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.share-img { width: min(70vw, 300px); height: auto; justify-self: center; border: 3px solid #111111; border-radius: 16px; }
.share-btns { display: grid; gap: 8px; }
.share-box .btn.primary { background: var(--sd-red); color: #FFFFFF; }
.share-box .muted { color: #555555; }

/* 종합 보기 */
.combo-head { display: grid; gap: 10px; padding: 8px 0 4px; }
.combo-toc { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.combo-toc a { display: flex; gap: 10px; text-decoration: none; padding: 10px 12px; border: 1px solid var(--n-line); border-radius: 12px; background: var(--n-card); }
.combo-toc a span { font-family: var(--f-night); color: var(--n-gold); min-width: 2.4em; }
.combo-part { border-top: 2px solid var(--n-gold); margin-top: 26px; padding-top: 10px; }
.combo-label { font-family: var(--f-night); font-size: 20px; color: var(--n-gold); }
.combo-part > .pad { padding-left: 0; padding-right: 0; }

@media print {
  body::before, .top, .foot, .paid-bar, .rp-progress, #demoFab, #demoPanel { display: none !important; }
  body.night { background: #0D1130 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ch, .block, .mc { break-inside: avoid; }
}
.sh-h { font-family: var(--f-title); font-size: 20px; }
.pdf-end { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 40px 18px; margin-top: 30px; border: 2px solid var(--n-gold); border-radius: 22px; background: var(--n-card); color: var(--n-ink); }
.pdf-end .pe-k { font-size: 12px; letter-spacing: .24em; color: var(--n-gold); }
.pdf-end .pe-q { font-family: var(--f-night); font-size: 32px; line-height: 1.3; color: var(--n-gold2); }
.pdf-end .pe-t { font-size: 15px; line-height: 1.75; color: var(--n-muted); }
/* 10-16: 노란 칸 전체가 버튼처럼 보이던 것 → 글은 보통 글씨, 검색어(또는 주소)만 노란 칸 */
.pdf-end .pe-l { font-size: 16px; font-weight: 600; line-height: 2; color: var(--n-ink); }
.pdf-end .pe-l mark { display: inline-block; font-size: 18px; font-weight: 800; background: var(--sd-yel); color: #111111; border: 2.5px solid #111111; border-radius: 10px; padding: 2px 12px; margin: 0 4px; }
body:not(.pdf-mode) .pdf-end { display: none; }
/* PDF 만드는 동안 위에 띄우는 안내 띠 (PDF 그림에는 안 찍힘: 리포트 상자 밖에 있음) */
.pdf-busy { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1000; width: max-content; max-width: calc(100% - 32px); display: grid; gap: 3px; text-align: center; background: #111111; color: #FFF2C4; border: 2.5px solid var(--sd-yel); border-radius: 14px; padding: 10px 16px; font-size: 14px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.pdf-busy b { font-size: 16px; color: #FFFFFF; }
.combo-part .mock-note { display: none; }
/* 리포트 공통 추가 */
.rp-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; width: 100%; gap: 4px; }
.rp-pair > div { display: grid; justify-items: center; gap: 2px; }
.rp-pair .critter { width: min(36vw, 160px); }
.rp-pair b { font-family: var(--f-night); font-weight: 400; font-size: 19px; }
.rp-score { font-family: var(--f-night); font-size: 46px; line-height: 1; color: var(--n-gold); align-self: center; }
.rp-score small { font-size: 16px; margin-left: 2px; }
.quotes { display: grid; gap: 8px; }
.quotes blockquote { margin: 0; padding: 12px 16px; border-left: 3px solid var(--n-gold); background: var(--n-card); border-radius: 0 12px 12px 0; font-size: 16.5px; line-height: 1.7; }
.quotes blockquote::before { content: '“'; color: var(--n-gold); margin-right: 2px; } .quotes blockquote::after { content: '”'; color: var(--n-gold); }
.ch-body .verdict { font-family: var(--f-night); font-size: 22px; }
/* 이 리포트에 들어 있는 것 */
.inbox { display: grid; gap: 10px; background: var(--n-bg); color: var(--n-ink); border: 3px solid var(--edge); border-radius: 20px; box-shadow: 5px 5px 0 var(--n-gold); padding: 16px; }
.inbox:empty { display: none; }
.in-h { font-family: var(--f-night); font-size: 20px; color: var(--n-gold); }
.in-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--n-line); border-radius: 12px; }
.in-stats div { display: grid; text-align: center; padding: 8px 2px; }
.in-stats div + div { border-left: 1px solid var(--n-line); }
.in-stats b { font-size: 16px; color: var(--n-gold2); font-variant-numeric: tabular-nums; }
.in-stats span { font-size: 11.5px; color: var(--n-muted); }
.in-worth { font-size: 14px; color: var(--n-muted); }
.in-worth b { color: var(--n-gold); font-size: 16px; }
.in-list { margin: 0; padding-left: 1.4em; display: grid; gap: 3px; font-size: 14.5px; columns: 1; }
.in-list li::marker { color: var(--n-gold); font-weight: 700; }
.in-extra { display: flex; flex-wrap: wrap; gap: 6px; }
.in-extra span { font-size: 12.5px; border: 1px solid var(--n-line); border-radius: 999px; padding: 2px 10px; color: var(--n-gold2); }
.pinfo { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.ask-info { font-size: 13.5px; font-weight: 700; justify-self: start; background: var(--sd-yel); border: 2px solid var(--edge); border-radius: 999px; padding: 3px 12px; }
.pcard { grid-template-rows: auto auto 1fr auto auto; }
/* 리포트 그림: 장 아이콘 · 캐릭터 말풍선 · 색 동그라미 */
.ch-row { display: flex; justify-content: space-between; align-items: flex-end; }
.ch-ic { width: 54px; height: 54px; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.ch-ic svg, .ch-ic img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ch-say { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.ch-mascot { width: 64px; height: 64px; display: block; }
.ch-mascot img, .ch-mascot svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.ch-say .ch-point { position: relative; border: 1.5px solid var(--n-gold); border-radius: 18px 18px 18px 4px; padding: 12px 14px; background: var(--n-card); }
.ch-say .ch-point::before { content: ''; position: absolute; left: -8px; bottom: 10px; width: 12px; height: 12px; background: var(--n-card); border-left: 1.5px solid var(--n-gold); border-bottom: 1.5px solid var(--n-gold); transform: rotate(45deg); }
body:not(.night) .ch-say .ch-point { background: #FFFFFF; border-color: var(--edge); }
body:not(.night) .ch-say .ch-point::before { background: #FFFFFF; border-color: var(--edge); }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(0,0,0,.3); justify-self: center; margin: 2px auto 2px; }
.ch-ic:has(img) { width: 80px; height: 80px; }
.rp-char { position: relative; }
.rp-prop { position: absolute; right: -14px; bottom: 6px; width: 92px !important; height: 92px !important; }
.rp-prop:has(svg) { width: 64px !important; height: 64px !important; }

/* 장마다 맨 위 큰 장면 그림 (public/scenes/*.jpg). 파일이 없으면 밤하늘 자리 그림 */
.ch-hero { position: relative; margin: 0 0 6px; }
.ch-scene { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 2.5px solid var(--edge); background: #0D1130; }
.ch-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-hero.ph .ch-scene { display: grid; place-items: center; background-color: #10153A; background-image: radial-gradient(1.2px 1.2px at 24px 30px, #F3EEDF 50%, transparent 51%), radial-gradient(1px 1px at 130px 80px, #E8C36A 50%, transparent 51%), radial-gradient(1.4px 1.4px at 250px 40px, #F3EEDF 50%, transparent 51%), radial-gradient(120% 90% at 50% 120%, #2A2F6B 0, transparent 60%); background-size: 300px 120px, 300px 120px, 300px 120px, 100% 100%; }
.ch-hero.ph .ch-scene::after { content: ''; position: absolute; inset: 10px; border: 1.5px dashed rgba(232,195,106,.45); border-radius: 14px; pointer-events: none; }
.ph-art { width: 34%; max-width: 150px; aspect-ratio: 1; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.ph-art svg { width: 100%; height: 100%; display: block; }
.ph-label { position: absolute; right: 16px; bottom: 14px; font-size: 12px; color: #E8C36A; background: rgba(13,17,48,.75); border: 1px solid rgba(232,195,106,.4); border-radius: 999px; padding: 3px 10px; }
.ch-badge { position: absolute; left: 14px; bottom: -18px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: #E8C36A; color: #0D1130; border: 2.5px solid var(--edge); font: 400 26px/1 var(--f-night, serif); box-shadow: 3px 3px 0 var(--edge); }
.ch-badge small { font-size: 11px; margin-top: 1px; }
.ch-hero + .ch-head { padding-top: 14px; }
.ch-hero + .ch-head .ch-no { display: none; }
body.night #view-paid .ch-scene { border-color: rgba(232,195,106,.55); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
body.night #view-paid .ch-badge { border-color: #0D1130; box-shadow: 0 0 0 2px #E8C36A; }
@media (min-width: 640px) { .ch-scene { aspect-ratio: 2 / 1; } }
@media print { .ch-hero { break-inside: avoid; } }
.ch-top { display: grid; gap: 2px; }
/* 장면 그림 위에 그 손님의 동물 캐릭터 (오른쪽 아래). 지금은 끔 (바로 아래 말풍선에 같은 캐릭터가 있어서). 켜려면 맨 끝 display: none 을 지운다 */
.ch-pet { position: absolute; right: 4%; bottom: 3%; width: 30%; max-width: 190px; aspect-ratio: 1; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); pointer-events: none; display: none; }
.ch-pet > * { width: 100%; height: 100%; }
.ch-pet img, .ch-pet svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.ch-hero.ph .ch-pet { display: none; }

/* ───────── 가독성 (2026-10-13): 본문 글꼴 Noto Sans KR, 최소 글자 13px, 리포트 본문 18px, PC는 넓게·크게 ───────── */
body { font-size: 17.5px; line-height: 1.75; letter-spacing: -0.005em; text-rendering: optimizeLegibility; }
p, li { overflow-wrap: anywhere; }
/* 작은 글자 키우기 (모바일 기준) */
.small, .basis, .ms-note, .mock-note, .foot { font-size: 14px; }
.field { font-size: 15px; }
.chips span, .rp-cover .chips span { font-size: 15px; }
.sec-label, .sub-k { font-size: 15px; }
.hero .sub { font-size: 17px; }
.lucky small, .lk small { font-size: 13.5px; }
.lucky b, .lk b { font-size: 16px; }
.month .bd { font-size: 16px; }
.month .mn small, .mc-m small { font-size: 12.5px; }
.pname { font-size: 17px; } .pline { font-size: 14px; } .pprice { font-size: 16px; }
.ask-tab { font-size: 15px; min-height: 42px; padding: 7px 14px; }
.ask-q b { font-size: 16.5px; } .ask-q span { font-size: 14px; }
.ask-free { font-size: 12px; } .ask-badge { font-size: 13px; } .ask-info { font-size: 14px; }
.ask-total > span:nth-child(2) { font-size: 15.5px; } .ask-total > span:nth-child(2) span { font-size: 13.5px; }
.ask-line span { font-size: 14px; } .ask-line b { font-size: 19px; }
.ask-chs { font-size: 16px; } .ask-chs li.on { font-size: 16.5px; }
.toc-peek span { font-size: 14px; } .toc-peek i { font-size: 12px; width: 20px; height: 20px; }
.in-stats span { font-size: 13px; } .in-worth { font-size: 15px; }
.cal-grid .wd { font-size: 13px; } .c { font-size: 15px; } .cal-legend .c { font-size: 14px; }
.gd-counts span, .gd-date .tag { font-size: 13.5px; }
.lock ul { font-size: 16.5px; }
.check-list li { font-size: 17px; line-height: 1.7; }
.tip, .talk { font-size: 17px; line-height: 1.7; }
.badge { font-size: 13.5px; }
.consent { font-size: 16px; }
.more-price { font-size: 16px; }
/* 리포트 */
.rp-brand { font-size: 13px; }
.rp-who { font-size: 15px; }
.rp-headline { font-size: 21px; }
.rp-meta dt { font-size: 13px; }
.rp-no { font-size: 12px; }
.rp-summary p:last-child { font-size: 18.5px; line-height: 1.9; }
.toc a { font-size: 16.5px; padding: 9px 0; }
.ch-head h2 { font-size: 30px; line-height: 1.3; }
.ch-point { font-size: 20px; line-height: 1.6; }
.ch-body { gap: 18px; }
.ch-body > p, .ch-sub p, .vs p, .decade p, .du-row p, .sw-card p, .type-card p, .mc > p, .rp-letter > p:nth-child(2) { font-size: 18px; line-height: 1.9; }
.ch-sub { gap: 6px; }
.ch-sub h3, .vs h3, .du-row h3 { font-size: 17.5px; }
.du-row p:last-child { font-size: 17px; }
.ch-basis { font-size: 15px; line-height: 1.6; }
.ch-basis span { font-size: 13px; }
.sw-k { font-size: 13px; } .sw-b { font-size: 14.5px; line-height: 1.6; }
.sw-card h3, .type-card h3 { font-size: 23px; }
.ms-pos { font-size: 13px; } .ms-tile span, .ms-stage { font-size: 13px; }
.el-num, .gauge-k { font-size: 14.5px; } .gauge-scale { font-size: 13px; }
.mg-x { font-size: 12.5px; } .mg-yt { font-size: 11.5px; }
.mc h3 { font-size: 18px; line-height: 1.45; }
.mc-m { font-size: 23px; }
.mc-dd { font-size: 15.5px !important; gap: 8px; line-height: 1.6; }
.mc-dd span { padding: 6px 12px; }
.mc-dd b { font-size: 13.5px; }
.rp-sign { font-size: 16px; }
.paid-bar .btn { font-size: 17px; }
.verdict, .ch-body .verdict { font-size: 24px; line-height: 1.5; }
/* 밤 에디션: 본문 글자를 살짝 더 밝게, 회색 글자도 읽기 쉽게 */
body.night #view-paid { --n-muted: #BDBAD6; }
body.night #view-paid .ch-body > p, body.night #view-paid .ch-sub p, body.night #view-paid .mc > p, body.night #view-paid .rp-summary p { color: #F6F2E6; }

/* PC: 화면이 넓으면 칸을 넓히고 글자를 키운다 */
@media (min-width: 900px) {
  body { font-size: 18px; }
  main, .top, .foot { max-width: 620px; }
  .top { padding-inline: 20px; }
  .brand { font-size: 28px; }
  .top-nav { font-size: 16.5px; gap: 18px; }
  .hero h1 { font-size: 44px; }
  .hero .sub { font-size: 18.5px; }
  .page-title, .cat-title { font-size: 34px; }
  .block h2 { font-size: 30px; }
  .one-line { font-size: 22px; }
  .char-name { font-size: 54px; }
  /* PC는 마우스로 옆으로 넘기기 어려워서 상품 카드를 3개씩 줄 바꿈 */
  .prow { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 4px 0 12px; }
  .ask-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pline { font-size: 14.5px; }
  .btn { font-size: 19px; }
  /* 리포트는 더 넓게 (한 줄 약 38자) */
  body.night main, body.night .top, body.night .foot, body.night .paid-bar { max-width: 780px; }
  .rp-title { font-size: 46px; }
  .rp-headline { font-size: 24px; }
  .rp-summary p:last-child { font-size: 20px; }
  .toc a { font-size: 17.5px; }
  .ch { padding-top: 48px; }
  .ch-head h2 { font-size: 36px; }
  .ch-point { font-size: 23px; }
  .ch-body > p, .ch-sub p, .vs p, .decade p, .du-row p, .sw-card p, .type-card p, .mc > p, .rp-letter > p:nth-child(2) { font-size: 19.5px; line-height: 1.95; }
  .ch-sub h3, .vs h3, .du-row h3 { font-size: 19px; }
  .ch-basis { font-size: 16px; }
  .mc h3 { font-size: 19.5px; }
  .mc-dd { font-size: 16.5px !important; }
  .lk b, .lucky b { font-size: 17.5px; }
  .ch-badge { width: 68px; height: 68px; font-size: 30px; bottom: -20px; left: 18px; }
  .ch-say .ch-mascot { width: 72px; height: 72px; }
}

/* 제휴 안내 상자 (건강: 메디에이지). 리포트 본문과 구분되게 흰 카드 + "제휴" 표시 */
.partner { display: grid; gap: 8px; background: #FFFFFF; color: #111111; border: 2.5px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--sd-grn, #1F9E5A); padding: 16px; margin-top: 6px; }
.partner-k { justify-self: start; font-size: 13px; font-weight: 700; color: #FFFFFF; background: #1F9E5A; border-radius: 999px; padding: 2px 10px; }
.partner h3 { font-family: var(--f-title); font-weight: 400; font-size: 22px; line-height: 1.35; color: #111111; }
.partner p { color: #33313B; font-size: 16.5px; line-height: 1.7; }
.partner-btn { background: #1F9E5A; color: #FFFFFF; border: 2.5px solid #111111; min-height: 52px; font-size: 17px; }
.partner .partner-note { font-size: 13.5px; color: #5A5763; }
body.night #view-paid .partner { color: #111111; }
body.night #view-paid .partner p { color: #33313B; }
body.night #view-paid .partner h3 { color: #111111; font-family: var(--f-title); }
body.night #view-paid .partner .partner-k, .partner .partner-k { color: #FFFFFF; }
.partner-pts { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; color: #33313B; font-size: 16px; line-height: 1.6; }
body.night #view-paid .partner-pts { color: #33313B; }
.apply-box { display: grid; gap: 10px; max-height: 88vh; overflow-y: auto; }
.apply-box .field input { font-size: 17px; min-height: 50px; }
/* 가입 동의 (2-35) */
.agree { display: grid; gap: 2px; border: 2px solid var(--ink); border-radius: 16px; padding: 8px 12px 10px; }
.agree .check { min-height: 36px; }
.agree .agree-all { border-bottom: 1px solid #E3E0EA; padding-bottom: 6px; margin-bottom: 2px; }
.agree .req, .agree .opt, .consent-set .opt { display: inline-block; font-size: 12.5px; line-height: 1.5; border-radius: 6px; padding: 0 6px; margin-right: 4px; vertical-align: 1px; }
.agree .req { color: #FFFFFF; background: var(--sd-red, #E5392E); }
.agree .opt, .consent-set .opt { color: #4D4A57; background: #ECE9F2; }
.agree a { color: inherit; text-decoration: underline; }
.agree .apply-terms { margin-top: 6px; }
/* 내 동물 미리 보기 (2-45): 성격 2줄 + "무료 풀이에 들어 있는 것" 상자 + 동의 + 단추 */
.teaser-traits { display: grid; gap: 12px; }
.teaser-card { display: grid; gap: 12px; }
.teaser-list { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.7; }
.consent-set { display: grid; gap: 2px; }
/* '내 풀이' 다시 짬 (2-45): 내 동물 카드 · 복주머니·쿠폰 한 줄 · 맨 아래 작은 줄들 */
.my-hero { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--tint); border: 2.5px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--edge); padding: 14px; }
.my-hero h2 { margin: 2px 0; font-family: var(--f-title); font-weight: 400; font-size: 28px; line-height: 1.2; }
.my-hero p { margin: 0; }
.my-hero-btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.my-hero-btns .btn.sm { min-height: 44px; padding: 8px 14px; font-size: 15.5px; border-radius: 14px; box-shadow: 3px 3px 0 var(--edge); }
.mini-critter.lg { width: 96px; height: 96px; background: #FFFFFF; }
.my-line { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px; border: 2px solid var(--edge); border-radius: 14px; text-decoration: none; color: var(--ink); background: #FFF2C4; font-weight: 700; }
.my-foot { display: grid; justify-items: center; gap: 0; margin-top: 4px; }
.my-foot > div { width: 100%; }
.my-foot .leave-link { min-height: 36px; padding: 6px; }
/* 2-52 내 풀이 맨 아래 로그아웃 상자: 누구로 로그인 중인지 + 큰 단추 (한 휴대폰을 여러 사람이 쓸 때) */
.logout-card { display: grid; gap: 8px; margin-top: 12px; border: 2.5px solid var(--edge); border-radius: 16px; background: #FFFFFF; }
.logout-card .strong { margin: 0; font-size: 17px; }
.logout-card .small { margin: 0; line-height: 1.55; }
.logout-card .btn { margin-top: 4px; min-height: 52px; font-size: 17px; }
/* 무료 풀이 아래 작은 띠: 홈 화면에 추가 (한 번만, "다음에"면 14일) */
.inst-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; background: #E7F0FF; border: 2px solid var(--edge); border-radius: 14px; padding: 10px 12px; font-size: 15px; }
.inst-bar p { margin: 0; line-height: 1.4; }
.inst-bar .inst-bar-ic { font-size: 22px; line-height: 1; }
.inst-bar .btn.sm { min-height: 40px; padding: 6px 12px; font-size: 15px; border-radius: 12px; box-shadow: none; }
.inst-bar .link-btn { padding: 0; min-height: 0; white-space: nowrap; }
@media (max-width: 430px) { .inst-bar { grid-template-columns: auto minmax(0, 1fr); } .inst-bar .btn.sm, .inst-bar .link-btn { grid-column: 2; justify-self: start; } }
/* '내 풀이' 맨 아래 접힌 동의 설정 (2-45): 한 줄만 보이고 누르면 펼쳐짐 */
.consent-fold { margin: 2px 0 0; }
.consent-fold summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 10px 0; list-style: none; text-align: center; justify-content: center; }
.consent-fold summary::-webkit-details-marker { display: none; }
.consent-fold[open] summary { color: var(--ink); }
.consent-fold .consent-set { padding: 4px 0 8px; }
/* "설정 ›" 안: 선택 동의 → 로그아웃·탈퇴 (2-46) */
.settings-title { margin: 0 0 4px; font-weight: 700; }
.settings-links { display: flex; justify-content: center; gap: 8px; border-top: 1px solid var(--line, #E7E3EE); margin-top: 6px; padding-top: 4px; }
#view-account .consent-set { background: var(--paper, #FFFFFF); border: 2.5px solid var(--edge); border-radius: 16px; padding: 14px 16px; }
.consent-set .sec-label { margin: 0 0 4px; }
.leave-link { justify-self: center; background: none; border: 0; color: var(--muted); font-size: 14px; text-decoration: underline; padding: 8px; min-height: 40px; cursor: pointer; }
.who-note { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
/* 접힌 설명: 닫혀 있을 땐 작은 회색 한 줄(상자·굵은 글씨 없음 → 눈에 안 띔), 펼쳤을 때만 연한 상자 (10-16 사장님: "눌러보게 되네") */
.apply-terms { font-size: 13px; color: #6B6878; border-radius: 12px; padding: 2px 4px; }
.apply-terms[open] { background: #F5F3FA; padding: 8px 12px; color: #4D4A57; }
.apply-terms summary { cursor: pointer; font-weight: 500; list-style: none; color: #8A8798; text-decoration: underline; text-underline-offset: 3px; }
.apply-terms summary::-webkit-details-marker { display: none; }
.apply-terms[open] summary { font-weight: 700; color: #4D4A57; text-decoration: none; }
.apply-terms p { margin: 6px 0 0; line-height: 1.6; }

/* 제목 글꼴 Black Han Sans → Do Hyeon (획이 너무 굵어 '동물' 같은 글자 속이 막혀 보이던 문제). 강조 상자에 여백 */
.hero h1 { font-size: clamp(30px, 8.2vw, 38px); line-height: 1.3; }
.hero h1 em { display: inline-block; line-height: 1.15; padding: 3px 9px 1px; border-radius: 10px; margin: 2px 1px; }
.brand { font-size: 27px; letter-spacing: 0; }
@media (min-width: 900px) { .hero h1 { font-size: 48px; } .brand { font-size: 30px; } }

/* 오늘의 복주머니 */
.luck { border: 3px solid var(--edge); border-radius: 22px; box-shadow: var(--hard, 5px 5px 0 #111111); overflow: hidden; background: #FFFFFF; }
.luck-pic { aspect-ratio: 5 / 2; background: #0D1130 url('scenes/money.jpg') center 60% / cover no-repeat; border-bottom: 3px solid var(--edge); }
.luck-in { padding: 14px 16px 16px; display: grid; gap: 8px; }
.luck-k { justify-self: start; font-size: 13.5px; font-weight: 700; background: var(--sd-red, #E63A2E); color: #FFFFFF; border: 2px solid var(--edge); border-radius: 999px; padding: 2px 10px; }
.luck h3 { font-family: var(--f-title); font-weight: 400; font-size: 27px; line-height: 1.3; }
/* 안 연 복주머니: 그림 위 스티커, 큰 글씨 선물 칸, 숨 쉬는 버튼 */
.luck-pic#luckPic { position: relative; cursor: pointer; }
.luck-free { position: absolute; top: 10px; left: 10px; background: var(--sd-yel, #F5B700); color: var(--ink); font-weight: 800; font-size: 17px; border: 3px solid var(--edge); border-radius: 999px; padding: 6px 14px; box-shadow: 3px 3px 0 var(--edge); transform: rotate(-4deg); animation: ah-wiggle 2.4s ease-in-out infinite; }
.luck-tap { position: absolute; right: 10px; bottom: 10px; background: rgba(17, 17, 17, .78); color: #FFFFFF; font-weight: 800; font-size: 15px; border-radius: 999px; padding: 6px 12px; }
.luck-in .muted { color: var(--ink); font-size: 16px; }
.luck-lead { font-size: 17px; line-height: 1.55; color: var(--ink); }
.luck-gifts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.luck-gifts li { display: flex; align-items: center; background: #FFF2C4; border: 2px solid var(--edge); border-radius: 12px; padding: 8px 10px; font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.35; word-break: keep-all; }
.luck .btn.luck-go { font-size: 20px; padding-block: 16px; animation: luckGo 1.6s ease-in-out infinite; }
@keyframes luckGo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .luck-free, .luck .btn.luck-go { animation: none; } }
.luck-streak { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 700; }
.luck-streak > span:first-child { white-space: nowrap; }
.luck-streak .dots { display: flex; gap: 4px; }
.luck-streak .dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); background: #FFFFFF; }
.luck-streak .dots i.on { background: var(--sd-yel, #F5B700); }
.luck-word { font-family: var(--f-title); font-size: 21px; line-height: 1.5; }
.luck.win .luck-prize { color: var(--sd-red, #E63A2E); }
.luck-bonus { font-weight: 700; color: var(--sd-grn, #1F9E5A); }
.luck-cps { font-size: 14.5px; background: #FFF2C4; border: 2px solid var(--edge); border-radius: 12px; padding: 6px 10px; }
.luck-odds { font-size: 15px; color: var(--muted); }
.luck-odds summary { cursor: pointer; font-weight: 700; }
.luck-odds ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 2px; }
.luck-odds li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.luck.shake .luck-pic { animation: luckShake .25s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes luckShake { 0%, 100% { transform: rotate(0) scale(1.02); } 25% { transform: rotate(-2.5deg) scale(1.04); } 75% { transform: rotate(2.5deg) scale(1.04); } }
.luck.pop { animation: luckPop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes luckPop { 0% { transform: scale(.92); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .luck.shake .luck-pic, .luck.pop { animation: none; } }
.coupon-pick { border: 2.5px solid var(--edge); border-radius: 16px; padding: 10px 14px; margin: 0; display: grid; gap: 4px; background: #FFF8DF; }
.coupon-pick legend { font-weight: 700; padding: 0 6px; }
.coupon-pick small { color: var(--muted); }
#buyPrice s { color: var(--muted); font-weight: 400; font-size: .8em; margin-right: 4px; }
#buyPrice { text-align: right; white-space: nowrap; }
#buyPrice s { display: block; margin: 0; font-size: 14px; }

/* 친구 초대 */
.invite-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink); background: #FDE3F0; border: 3px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--edge); padding: 12px 14px; cursor: pointer; }
.invite-card .ic-gift { font-size: 30px; }
.invite-banner { display: flex; gap: 12px; align-items: center; background: #FDE3F0; border: 3px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--edge); padding: 12px 14px; margin: 0 16px 14px; }
.invite-banner p { font-size: 15.5px; line-height: 1.6; }
.invite-got { display: grid; gap: 8px; background: #FFFFFF; border: 3px solid var(--edge); border-radius: 20px; box-shadow: 5px 5px 0 var(--sd-pnk, #F06BA8); padding: 16px; }
.invite-got h3 { font-family: var(--f-title); font-weight: 400; font-size: 23px; }
.ig-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.ig-pair .mini-critter { margin: 0 auto; }
.ig-pair > b { font-family: var(--f-title); font-weight: 400; font-size: 44px; line-height: 1; }
.ig-pair > b small { font-size: 16px; }
.invite-code { font-size: 15px; background: #F5F3FA; border-radius: 12px; padding: 8px 12px; }
.invite-code b { letter-spacing: .12em; font-size: 18px; }

/* 오늘의 60마리 순위 */
.rank-link { display: flex; justify-content: space-between; align-items: center; margin: 16px; padding: 14px 16px; text-decoration: none; color: var(--ink); background: #FFF2C4; border: 3px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--edge); font-weight: 700; }
.rank-link span { font-family: var(--f-title); font-weight: 400; font-size: 21px; }
.rank-mine { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 0 10px; text-decoration: none; color: var(--ink); background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 16px; padding: 10px 14px; box-shadow: 3px 3px 0 var(--edge); }
.rank-mine:empty { display: none; }
.rank-mine .rk { grid-row: 1 / 3; grid-column: 2; font-family: var(--f-title); font-weight: 400; font-size: 34px; color: var(--sd-red, #E63A2E); }
.rank-mine small { color: var(--muted); font-size: 13.5px; }
.rank-mine.big { background: #FFF2C4; }
/* 리포트 읽기 편하게 (10-15 사장님: "문단 별로인 부분 한 장 한 장"):
   작은 제목은 금색 막대로 눈에 띄게, 작은 글 묶음 사이에 선과 여백, 문단 사이 간격, 카드 안 글도 문단으로 */
.ch-sub { gap: 8px; }
.ch-sub h3 { display: flex; align-items: center; gap: 8px; }
.ch-sub h3::before { content: ''; flex: 0 0 4px; height: 1.05em; border-radius: 2px; background: currentColor; opacity: .85; }
.ch-sub + .ch-sub { padding-top: 18px; border-top: 1px solid var(--line); }
.ch-body > p + p, .ch-sub p + p, .sw-card p + p, .vs p + p, .type-card p + p { margin-top: 12px; }
.sw-card { gap: 10px; padding: 18px; }
.sw-card .tip { border-radius: 12px; padding: 12px 14px; font-size: 16.5px; line-height: 1.75; }
.sw-card .tip b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.sw-b { font-size: 14px; opacity: .8; }
body.night #view-paid .ch-sub + .ch-sub { border-top-color: rgba(232, 195, 106, .2); }
body.night #view-paid .ch-sub h3 { color: var(--n-gold); }
body.night #view-paid .sw-card .tip b { color: var(--n-gold); }
body.night #view-paid .sw-card h3, body.night #view-paid .type-card h3 { font-family: var(--f-night); font-weight: 400; font-size: 22px; line-height: 1.4; color: #F6F2E6; }
body.night #view-paid .sw-k { color: var(--n-gold); font-size: 13.5px; letter-spacing: .02em; }

/* 상세 풀이: 앞 장부터 먼저 보여 줄 때 (10-15) */
.rp-writing { position: sticky; top: 8px; z-index: 5; margin: 0 0 10px; padding: 9px 14px; border-radius: 999px; font-size: 14.5px; background: rgba(13, 17, 48, .92); color: #F6F2E6; border: 1px solid rgba(232, 195, 106, .55); display: flex; gap: 8px; align-items: center; }
.rp-writing i { flex: 0 0 9px; height: 9px; border-radius: 50%; background: #E8C36A; animation: wait-caret 1.2s steps(1) infinite; }
.ch-wait { padding: 18px 16px; border: 1.5px dashed rgba(232, 195, 106, .5); border-radius: 16px; display: grid; gap: 8px; }
.ch-wait-t { margin: 0; font-size: 15.5px; color: var(--n-muted, #BDBAD6); }
.ch-wait-line { margin: 0; font-size: 16px; line-height: 1.8; color: #F6F2E6; min-height: 1.8em; }
.ch-wait-line:not(:empty)::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em; background: currentColor; animation: wait-caret 1s steps(1) infinite; }
.jump-chip { display: block; width: 100%; margin: 12px 0 0; padding: 12px 16px; font: inherit; font-size: 16px; text-align: center; border-radius: 14px; border: 1.5px solid #E8C36A; background: rgba(232, 195, 106, .12); color: #E8C36A; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .rp-writing i, .ch-wait-line::after { animation: none; } }

/* 내 동물에게 물어보기 (#chat) */
.chat-head { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; }
.chat-head .critter { width: 110px; height: 110px; }
.chat-head .page-title { margin: 2px 0; }
.chat-intro { display: grid; gap: 10px; padding: 18px; background: #FFFFFF; border: 3px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--edge); }
.chat-intro p, .chat-intro ul { margin: 0; }
.chat-intro ul { padding-left: 20px; line-height: 1.7; }
.chat-intro .price-row { display: flex; justify-content: space-between; align-items: baseline; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-chips .chip { font: inherit; font-size: 14.5px; padding: 7px 12px; border-radius: 99px; border: 2px solid var(--edge); background: #FFF2C4; color: var(--ink); cursor: pointer; }
.chat-log { display: grid; gap: 14px; }
.msg { display: flex; gap: 8px; align-items: flex-end; }
.msg p { margin: 0 0 .7em; line-height: 1.8; word-break: keep-all; }
.msg p:last-child { margin-bottom: 0; }
.msg.me { justify-content: flex-end; }
.msg.me p { max-width: 82%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: #2E2A4F; color: #FFFFFF; margin: 0; }
.msg.pet .mini-critter { flex: 0 0 56px; width: 56px; height: 56px; }
.msg.pet .txt { max-width: calc(100% - 64px); padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #FFFFFF; border: 2.5px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); }
.msg.pet .txt.typing p:last-child::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em; background: currentColor; animation: wait-caret 1s steps(1) infinite; }
.chat-form { display: grid; gap: 10px; }
.chat-form textarea { font: inherit; font-size: 17px; padding: 12px 14px; border: 2.5px solid var(--edge); border-radius: 14px; resize: vertical; min-height: 84px; background: #FFFFFF; color: var(--ink); }
.chat-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chat-row .btn { width: auto; padding-inline: 26px; }
.chat-more { display: grid; gap: 10px; padding: 16px; border: 2.5px dashed var(--edge); border-radius: 16px; }
.chat-more p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .msg.pet .txt.typing p:last-child::after { animation: none; } }

/* 새해 60마리 순위 (신년 시즌) */
.rank-link.ny { background: #FFD9D2; margin-bottom: 0; }
.rank-link[hidden] { display: none; }
.ny-mine { background: #FFD9D2 !important; }
.lock .ny-rank { display: block; margin: 4px 0 2px; padding: 10px 12px; border: 1.5px solid var(--n-gold2, #E8C36A); border-radius: 12px; color: var(--n-ink, #F6F2E6); text-decoration: none; font-size: 15px; line-height: 1.5; }
.lock .ny-rank b { color: var(--n-gold2, #E8C36A); }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; text-align: center; }
.pod { display: grid; gap: 2px; justify-items: center; background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 16px 16px 6px 6px; padding: 8px 6px 10px; }
.pod .critter { width: 100%; max-width: 110px; aspect-ratio: 1; }
.pod.p1 { background: #FFE58A; padding-top: 14px; box-shadow: 4px 4px 0 var(--edge); }
.pod.p1 .critter { max-width: 130px; }
.pod b { font-family: var(--f-title); font-weight: 400; font-size: 22px; }
.pod span { font-weight: 700; font-size: 15px; }
.pod small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.rank-tail { display: grid; gap: 8px; background: #E1E8FB; border: 2.5px solid var(--edge); border-radius: 16px; padding: 12px 14px; }
.rank-tail .rt { display: flex; gap: 10px; align-items: center; }
.rank-tail .mini-critter { width: 52px; height: 52px; flex: none; }
.rank-all summary { cursor: pointer; font-weight: 700; padding: 8px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; list-style: none; }
.rank-all summary::-webkit-details-marker { display: none; }
/* 누를 수 있다는 표시 (10-16 손님 눈 점검: 그냥 글자처럼 보여서 못 누름) */
.rank-all summary::after { content: "펼치기 ▾"; flex: none; font-size: 13.5px; font-weight: 700; color: var(--ink); background: #FFF2C4; border: 2px solid var(--edge); border-radius: 999px; padding: 3px 10px; }
.rank-all[open] summary::after { content: "접기 ▴"; background: #FFFFFF; }
.rank-all ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.rank-all li { display: grid; grid-template-columns: 2em 1fr auto; gap: 4px; align-items: baseline; font-size: 14.5px; border-bottom: 1px dashed var(--line); padding: 4px 0; }
.rank-all li .ko { display: none; }
.rank-all li .n { font-weight: 700; color: var(--muted); }
.rank-all li .sc { color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-all li.me { background: #FFF2C4; font-weight: 700; border-radius: 6px; }
@media (min-width: 900px) { .rank-all ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rank-all li .ko { display: inline; color: var(--muted); font-size: 12.5px; } .rank-all li { grid-template-columns: 2em 1fr auto auto; } }

/* 맞아요 / 아니에요 */
.fb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.fb span { margin-right: 4px; }
.fb .fb-b { display: flex; gap: 6px; margin-right: 0; } /* 버튼 둘은 늘 나란히 (질문이 길면 둘이 함께 다음 줄로) */
.fb button { font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); background: #FFFFFF; border: 2px solid var(--edge); border-radius: 999px; padding: 4px 14px; min-height: 36px; cursor: pointer; }
.fb button[aria-pressed="true"][data-v="yes"] { background: var(--sd-grn, #1F9E5A); color: #FFFFFF; }
.fb button[aria-pressed="true"][data-v="no"] { background: #5A5763; color: #FFFFFF; }
.fb.sm { margin-top: 2px; }
body.night #view-paid .fb { color: var(--n-muted); }
body.night #view-paid .fb button { background: transparent; color: var(--n-ink); border-color: var(--n-line); }
body.night #view-paid .fb button[aria-pressed="true"][data-v="yes"] { background: #1F9E5A; border-color: #1F9E5A; }
body.night #view-paid .fb button[aria-pressed="true"][data-v="no"] { background: #5A5763; border-color: #5A5763; }
.fb-sum { background: #DDF3E5; border: 2px solid var(--edge); border-radius: 14px; padding: 10px 12px; font-size: 15.5px; line-height: 1.6; }
.fb-sum a { font-weight: 700; color: var(--ink); }
/* 10-16 사장님 "맞아요/아니에요 눌러도 아무 효과가 없다" → 누르면 '고마워요' + 리포트 끝에 "몇 개 중 몇 개 맞았는지" 모음 상자 */
.fb .fb-ok { font-size: 13.5px; font-weight: 700; color: var(--sd-grn, #1F9E5A); }
.fb-sum.rp-fit { margin: 26px 0 8px; display: grid; gap: 4px; }
.fb-sum .fit-k { margin: 0; font-weight: 800; font-size: 17px; }
.fb-sum .fit-n { margin: 0; }
.fb-sum .fit-bar { height: 10px; background: rgba(0,0,0,.12); border-radius: 99px; overflow: hidden; margin: 4px 0; }
.fb-sum .fit-bar i { display: block; height: 100%; background: #1F9E5A; border-radius: 99px; transition: width .4s; }
.fb-sum .fit-t { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
body.night #view-paid .fb .fb-ok { color: #7FD7A0; }
body.night #view-paid .fb-sum { background: var(--n-card); border-color: var(--n-gold); color: var(--n-ink); }
body.night #view-paid .fb-sum .fit-t { color: var(--n-muted); }
body.night #view-paid .fb-sum .fit-bar { background: rgba(255,255,255,.15); }
body.pdf-mode .fb, body.pdf-mode .fb-sum { display: none !important; }
@media print { .fb, .fb-sum { display: none !important; } }

/* 우리 동물원 */
.zoo-link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); background: #DDF3E5; border: 3px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--edge); padding: 12px 14px; }
.zoo-link .zl-ic { font-size: 28px; }
.zoo-dex-bar { position: relative; overflow: hidden; border: 2.5px solid var(--edge); border-radius: 22px; background: #FFFFFF; min-height: 38px; display: flex; align-items: center; padding: 6px 14px; font-size: 15px; line-height: 1.45; }
.zoo-dex-bar span { position: relative; z-index: 1; }
.zoo-dex-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #FFE58A; }
.zoo-map { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 6px auto 0; border: 3px solid var(--edge); border-radius: 24px; background: radial-gradient(circle at 50% 50%, #FFF8DF 0, #FFFFFF 70%); box-shadow: 5px 5px 0 var(--edge); }
.zoo-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zl { stroke-width: .7; stroke-linecap: round; }
.zl.me { stroke-width: 1.2; }
.zl.great { stroke: #1F9E5A; } .zl.good { stroke: #2D5BD8; } .zl.soso { stroke: #9A9AA0; stroke-dasharray: 2 1.5; } .zl.rough { stroke: #E63A2E; stroke-dasharray: 1.5 1.2; }
.zs rect { fill: #FFFFFF; stroke-width: .6; } .zs text { font-size: 4.4px; font-weight: 700; text-anchor: middle; font-family: var(--f-body); }
.zs.great rect { stroke: #1F9E5A; } .zs.great text { fill: #1F9E5A; }
.zs.good rect { stroke: #2D5BD8; } .zs.good text { fill: #2D5BD8; }
.zs.soso rect { stroke: #9A9AA0; } .zs.soso text { fill: #5A5763; }
.zs.rough rect { stroke: #E63A2E; } .zs.rough text { fill: #E63A2E; }
.zt { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 0; width: 23%; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.zt .critter { width: 100%; aspect-ratio: 1; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); transition: transform .15s; }
.zt b { font-size: 13.5px; line-height: 1.2; background: #FFFFFF; border: 2px solid var(--edge); border-radius: 999px; padding: 1px 8px; margin-top: -6px; white-space: nowrap; }
.zt small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.zt.me { width: 28%; } .zt.me b { background: #FFE58A; }
.zt.on .critter { transform: scale(1.1); }
.zt:focus-visible { outline: 3px solid var(--sd-blu, #2D5BD8); outline-offset: 2px; border-radius: 12px; }
.zoo-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; justify-content: center; }
.zoo-legend span::before { content: ''; display: inline-block; width: 18px; height: 3px; margin-right: 5px; vertical-align: middle; background: currentColor; }
.zoo-legend .great { color: #1F9E5A; } .zoo-legend .good { color: #2D5BD8; } .zoo-legend .soso { color: #5A5763; } .zoo-legend .rough { color: #E63A2E; }
.zoo-pick { background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.zoo-pick.muted { color: var(--muted); }
.zp { font-weight: 700; border-radius: 999px; padding: 1px 10px; color: #FFFFFF; font-size: 14px; }
.zp.great { background: #1F9E5A; } .zp.good { background: #2D5BD8; } .zp.soso { background: #5A5763; } .zp.rough { background: #E63A2E; }
.zoo-hl { display: grid; gap: 10px; }
.zoo-hl > div { border: 2.5px solid var(--edge); border-radius: 16px; padding: 12px 14px; display: grid; gap: 4px; }
.zoo-hl .great { background: #DDF3E5; } .zoo-hl .rough { background: #FFE1DC; }
.zoo-hl b { font-size: 17px; } .zoo-hl span { font-size: 15px; line-height: 1.6; }
/* 오늘의 궁합 (10-16) */
.zoo-day { display: grid; gap: 8px; background: #FFF8E6; border: 2.5px solid var(--edge); border-radius: 18px; padding: 14px; box-shadow: 3px 3px 0 var(--edge); }
.zoo-day details summary { cursor: pointer; font-weight: 700; font-size: 15px; padding: 4px 0; }
.zd-row { display: flex; gap: 10px; align-items: center; background: #FFFFFF; border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.zd-row .mini-critter { width: 46px; height: 46px; flex: none; }
.zd-row p { line-height: 1.55; }
.zd-row .up { color: #1F9E5A; font-weight: 700; } .zd-row .down { color: #E63A2E; font-weight: 700; }
/* 도감 보상 */
.zoo-dex { display: grid; gap: 10px; }
.dex-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dex-goals li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; background: #F5F3FA; color: var(--muted); font-size: 15px; }
.dex-goals li.got { background: #FFFFFF; border-color: var(--edge); color: var(--ink); }
.dex-goals li b { min-width: 52px; }
.dex-claim { margin-left: auto; font: inherit; font-weight: 700; font-size: 14.5px; border: 2px solid var(--edge); border-radius: 999px; padding: 3px 14px; background: var(--sd-yel, #FFD23F); cursor: pointer; }
.dex-claim:disabled { background: #FFFFFF; color: var(--muted); cursor: default; }
.dex-go { font-weight: 700; color: var(--ink); }
/* 이번 주 예고 (10-16) */
.wk { display: grid; gap: 10px; margin-top: 8px; }
.wk .cat-title small { font-family: inherit; font-size: 15px; color: var(--muted); margin-left: 6px; }
.wk-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 96px; align-items: end; background: #FFFFFF; border: 2px solid var(--edge); border-radius: 14px; padding: 10px 10px 6px; }
.wk-bars > div { display: grid; grid-template-rows: 1fr auto; height: 100%; justify-items: center; gap: 4px; }
.wk-bars i { align-self: end; width: 70%; border-radius: 6px 6px 2px 2px; background: #D8D4E4; }
.wk-bars span { font-size: 13px; color: var(--muted); }
.wk-bars .good i { background: #1F9E5A; } .wk-bars .care i { background: #E63A2E; }
.wk-bars .now span { color: var(--ink); font-weight: 700; }
.wk-pick.good .past-y b { color: #1F9E5A; }
.wk-later { font-size: 14px; color: var(--muted); }
.wk-last { border: 2px solid var(--edge); border-radius: 16px; background: #FFF8E6; padding: 10px 12px; }
.wk-last summary { cursor: pointer; font-weight: 700; }
.wk-last summary small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.zoo-roles { display: grid; gap: 8px; }
.zoo-roles > div { display: flex; gap: 10px; align-items: center; }
.zoo-roles .mini-critter { width: 48px; height: 48px; flex: none; }
.zoo-empty { display: grid; justify-items: center; gap: 8px; text-align: center; background: #FFFFFF; border: 2.5px dashed var(--edge); border-radius: 20px; padding: 18px; }
.zoo-empty .critter { width: 140px; aspect-ratio: 1; }
.zoo-members ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.zoo-members li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--line); padding: 6px 0; }
.zoo-members small { color: var(--muted); }
.zoo-members button { font: inherit; font-size: 14px; border: 2px solid var(--edge); border-radius: 999px; background: #FFFFFF; padding: 3px 12px; cursor: pointer; }
.zoo-members summary, .zoo-dex summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.dex { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.dex > div { display: grid; justify-items: center; gap: 1px; border: 2px solid var(--line); border-radius: 12px; padding: 4px 2px; background: #F5F3FA; }
.dex > div.got { background: #FFFFFF; border-color: var(--edge); }
.dex .mini-critter { width: 100%; height: auto; aspect-ratio: 1; }
.dex .q { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-family: var(--f-title); font-size: 22px; color: #C9C6D3; }
.dex small { font-size: 10.5px; line-height: 1.2; text-align: center; min-height: 1.2em; }
@media (min-width: 900px) { .dex { grid-template-columns: repeat(10, minmax(0, 1fr)); } .zoo-hl { grid-template-columns: 1fr 1fr; } .zoo-roles { grid-template-columns: 1fr 1fr; } }
.zt small { display: none; }
@media (min-width: 640px) { .zt small { display: block; } }
.zs rect { opacity: .96; }
.zt { width: 19%; } .zt.me { width: 24%; }
.zt b { font-size: 12.5px; padding: 0 7px; }
@media (min-width: 640px) { .zt b { font-size: 14px; } }

/* 지난 운 맞혀 보기 (무료 결과 1개 · 리포트 맨 앞 장 3개) */
.past-list { display: grid; gap: 12px; margin: 10px 0; }
.past { display: grid; gap: 6px; background: #FFFFFF; border: 2px solid var(--edge); border-radius: 16px; padding: 14px 16px; box-shadow: 3px 3px 0 var(--edge); }
.past-y { display: flex; align-items: baseline; gap: 8px; }
.past-y b { font-family: "Black Han Sans", "Do Hyeon", sans-serif; font-size: 24px; font-weight: 400; color: var(--sd-red, #D9483B); }
.past-y span { font-size: 14px; color: var(--muted); }
.past h3 { font-size: 18.5px; line-height: 1.45; }
.past p { line-height: 1.75; }
.past-b { font-size: 14px; color: var(--muted); line-height: 1.6 !important; }
.past-b span { font-weight: 700; color: var(--tint-ink); margin-right: 6px; }
body.night #view-paid .past { background: var(--n-card); border: 1px solid var(--n-line); box-shadow: none; }
body.night #view-paid .past-y b { font-family: "Song Myung", serif; color: var(--n-gold); font-size: 26px; }
body.night #view-paid .past-y span, body.night #view-paid .past-b { color: var(--n-muted); }
body.night #view-paid .past-b span { color: var(--n-gold2); }
@media (min-width: 900px) { .past h3 { font-size: 20px; } .past p { font-size: 17.5px; } body.night #view-paid .past p { font-size: 18.5px; } }

/* 문단 나눔 (10-14): 긴 글을 2~3문장씩 나눠 보여 줄 때 문단 사이 간격 */
.rp-summary p:not(.sub-k) { font-size: 18.5px; line-height: 1.9; }
.rp-summary p:not(.sub-k) + p { margin-top: 4px; }
.rp-letter p:not(.sub-k):not(.rp-sign) { font-size: 18px; line-height: 1.95; }
.ch-sub p + p { margin-top: 10px; }
body.night #view-paid .rp-letter p:not(.sub-k):not(.rp-sign) { color: #F6F2E6; }
@media (min-width: 900px) { .rp-summary p:not(.sub-k) { font-size: 20px; } .rp-letter p:not(.sub-k):not(.rp-sign) { font-size: 19.5px; } }
/* PDF: 그림으로 찍을 때 글이 가장자리에 붙지 않게 안쪽 여백 */
body.pdf-mode .ch-body, body.pdf-mode .rp-summary, body.pdf-mode .ch-head { padding-left: 14px; padding-right: 14px; }
body.pdf-mode .ch-body .past, body.pdf-mode .mc { padding-right: 22px; }
body.pdf-mode .past-b { display: none; } /* PDF 1장: 카드 3장이 그림과 한 쪽에 들어가게 (근거는 장 아래 한 줄로) */
/* PDF (10-15): 장 그림은 얇은 띠로 (장이 쪽 중간에서 시작해도 글이 함께 들어가게), 누르는 것·신청 상자는 빼기 */
body.pdf-mode .ch-scene { aspect-ratio: 4 / 1; } /* 7:2 → 4:1 (10-16: 장마다 새 쪽이라 그림을 조금 얇게, 장 꼬리가 다음 쪽으로 덜 넘어가게) */
body.pdf-mode .ch { padding-top: 6px; }
body.pdf-mode .partner, body.pdf-mode .jump-chip, body.pdf-mode .rp-writing, body.pdf-mode .du-all > summary { display: none !important; }

/* 앞으로 10년 그래프 (tenyear.js) */
.ty { margin: 0; background: var(--soft, #F4F1E8); border-radius: 16px; padding: 14px 14px 12px; display: grid; gap: 8px; }
.ty-h { font-weight: 700; font-size: 16px; color: var(--tint-ink); }
.ty svg { width: 100%; height: auto; display: block; }
.ty-base { stroke: currentColor; opacity: .25; }
.ty-bar { fill: #B9B4CF; opacity: .55; }
.ty-bar.top { fill: #E8A93A; opacity: 1; }
.ty-star { fill: #E8A93A; font-size: 12px; }
.ty-x { font-size: 11px; fill: currentColor; opacity: .75; }
.ty-x.top { font-weight: 700; opacity: 1; fill: #E8A93A; }
.ty-age { font-size: 10px; fill: currentColor; opacity: .55; }
.ty figcaption { display: grid; gap: 6px; }
.ty figcaption p { display: grid; gap: 2px; font-size: 15px; line-height: 1.55; }
.ty figcaption b { color: #C98A1E; }
.ty-note { font-size: 13px; color: var(--muted); line-height: 1.6; }
body.night #view-paid .ty { background: var(--n-card); border: 1px solid var(--n-line); color: var(--n-ink); }
body.night #view-paid .ty-h { color: var(--n-gold2); font-family: var(--f-night, "Song Myung", serif); font-size: 18px; font-weight: 400; }
body.night #view-paid .ty-bar { fill: #6E6A9E; opacity: .8; }
body.night #view-paid .ty-bar.top, body.night #view-paid .ty-star { fill: var(--n-gold); }
body.night #view-paid .ty-x.top { fill: var(--n-gold); }
body.night #view-paid .ty figcaption b { color: var(--n-gold); }
body.night #view-paid .ty figcaption span, body.night #view-paid .ty-note { color: var(--n-muted); }
@media (min-width: 900px) { .ty figcaption p { font-size: 16.5px; } .ty-h { font-size: 18px; } }

/* 핵심 답 3줄 (리포트 맨 위) */
.rp-answers { margin-top: 22px; background: var(--paper, #FFFDF6); border: 2px solid var(--tint-ink); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; }
.rp-answers ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: ra; }
.rp-answers li { display: grid; gap: 3px; padding-left: 38px; position: relative; counter-increment: ra; }
.rp-answers li::before { content: counter(ra); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--tint-ink); color: #FFFFFF; }
.ra-q { font-size: 14px; color: var(--muted); }
.ra-a { font-size: 18.5px; line-height: 1.55; font-weight: 700; }
body.night #view-paid .rp-answers { background: linear-gradient(180deg, rgba(232,195,106,.14), rgba(232,195,106,.04)); border: 1.5px solid var(--n-gold); }
body.night #view-paid .rp-answers li::before { background: var(--n-gold); color: #0D1130; font-family: var(--f-night, "Song Myung", serif); }
body.night #view-paid .ra-q { color: var(--n-muted); }
body.night #view-paid .ra-a { color: #F6F2E6; font-family: var(--f-night, "Song Myung", serif); font-weight: 400; font-size: 20px; }
@media (min-width: 900px) { .ra-a { font-size: 20px; } body.night #view-paid .ra-a { font-size: 22px; } .ra-q { font-size: 15px; } }

/* 신년 시즌: 새해 순위 카드(스토리 크기)·부모님 신년운세 선물 */
.share-img.story { width: min(56vw, 240px); }
.rank-link.gift { background: #FFE3EC; }
.rank-link.gift span { font-size: 18px; line-height: 1.45; }
.rank-link.gift span b { font-weight: 400; color: #C8372D; }
.rank-link.gift > b { white-space: nowrap; margin-left: 10px; }
.gift-link { font-weight: 700; }
.gift-box { margin-top: 22px; border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; background: #FFF4DE; border: 2px solid #C8372D; }
.gift-box h3 { font-size: 22px; line-height: 1.4; }
.gift-box p { font-size: 16.5px; line-height: 1.7; }
body.night #view-paid .gift-box { background: linear-gradient(180deg, rgba(200,55,45,.22), rgba(200,55,45,.06)); border: 1.5px solid var(--n-gold); }
body.night #view-paid .gift-box h3 { color: #F6F2E6; font-family: var(--f-night, "Song Myung", serif); font-weight: 400; }
body.night #view-paid .gift-box p { color: var(--n-muted); }
body.pdf-mode .gift-box { display: none !important; }
/* 가격 구성 (10-15): 질문권 1·3·10개, 올려 사기 */
.ask-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 16px 6px 12px; border: 2.5px solid var(--edge); border-radius: 16px; background: #FFFFFF; color: var(--ink); text-decoration: none; }
.ap b { font-size: 16px; }
.ap strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.ap-save { font-size: 13px; color: var(--muted); line-height: 1.35; }
.ap.best { border-width: 3px; background: #FFF8DF; box-shadow: 3px 3px 0 var(--edge); }
.ap.best i { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #C8372D; color: #FFFFFF; }
.pinfo.up { color: #C8372D; }
.pprice s, .ask-total-p s { font-weight: 400; color: var(--muted); font-size: .85em; }
.up-note { display: grid; gap: 4px; padding: 12px 14px; border: 2.5px solid #C8372D; border-radius: 16px; background: #FFF4DE; }
.up-note b { font-size: 16px; }
.up-box { margin-top: 28px; border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; background: #FFF4DE; border: 2px solid var(--tint-ink); }
.up-box h3 { font-size: 21px; line-height: 1.4; margin: 0; }
.up-box p { margin: 0; }
.up-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; border: 1.5px solid var(--edge); color: var(--ink); text-decoration: none; }
.up-row > span:first-child { display: grid; gap: 2px; }
.up-row small { font-size: 13px; color: var(--muted); }
.up-p { display: grid; justify-items: end; white-space: nowrap; }
.up-p s { font-size: 13px; color: var(--muted); }
.up-p b { font-size: 18px; }
body.night #view-paid .up-box { background: linear-gradient(180deg, rgba(232,195,106,.14), rgba(232,195,106,.04)); border: 1.5px solid var(--n-gold); }
body.night #view-paid .up-box h3 { color: #F6F2E6; font-family: var(--f-night, "Song Myung", serif); font-weight: 400; }
body.night #view-paid .up-box .sub-k, body.night #view-paid .up-box .muted { color: var(--n-muted); }
body.night #view-paid .up-row { background: rgba(255,255,255,.06); border-color: rgba(232,195,106,.45); color: #F6F2E6; }
body.night #view-paid .up-row small, body.night #view-paid .up-p s { color: var(--n-muted); }
body.night #view-paid .up-p b { color: var(--n-gold); }
body.pdf-mode .up-box { display: none !important; }
#myList .up-box { margin: 0 0 18px; } /* '내 풀이' 맨 위 */
/* 여러 리포트가 함께 꼽은 '큰 달' (리포트 기회의 달 아래 · '내 풀이' 맨 위) */
.big-note { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #FFF4DE; border: 1.5px solid var(--tint-ink); display: grid; gap: 6px; }
.big-note p { margin: 0; }
body.night #view-paid .big-note { background: rgba(232,195,106,.10); border-color: rgba(232,195,106,.5); color: #F6F2E6; }
body.night #view-paid .big-note b { color: var(--n-gold); }
body.night #view-paid .big-note .muted { color: var(--n-muted); }
.big-box { margin: 0 0 18px; border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; background: #FFF4DE; border: 2px solid var(--tint-ink); }
.big-box h3 { font-size: 21px; line-height: 1.4; margin: 0; }
.big-box p { margin: 0; }
.big-row { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; border: 1.5px solid var(--edge); }
.big-row b { font-size: 18px; }
.big-row small { font-size: 14px; color: var(--muted); }
.gc-f { display: grid; gap: 4px; font-size: 15px; font-weight: 700; color: #333333; }
.gc-f textarea, .gc-f input { font: inherit; font-weight: 400; font-size: 16px; padding: 10px 12px; border: 2px solid #111111; border-radius: 12px; resize: none; }

/* ───── 휴대폰 가독성 2 (2026-10-16): 리포트 안 표·그래프·이름표 글씨를 14px 안팎으로 ───── */
.ms-pos, .ms-tile span, .ms-stage { font-size: 14px; }
.ms-god { font-size: 14px; }
.el-tag { font-size: 12.5px; padding: 1px 8px; }
.gauge-scale { font-size: 14px; }
.du-item { flex-basis: 112px; }
.du-age { font-size: 13.5px; }
.du-t { font-size: 14px; line-height: 1.45; }
.du-now { font-size: 12.5px; }
.mg figcaption { font-size: 14px; gap: 4px 14px; }
.mg-x { font-size: 15px; } .mg-yt { font-size: 13px; }
.mc-m small, .month .mn small { font-size: 13.5px; }
.ty-x { font-size: 13.5px; opacity: .85; } .ty-age { font-size: 12.5px; opacity: .7; } .ty-star { font-size: 14px; }
.ty-note { font-size: 14.5px; }
.ch-basis span { font-size: 13.5px; }
.ch-badge small { font-size: 12.5px; }
.sw-k, body.night #view-paid .sw-k { font-size: 14px; }
.past-b { font-size: 15px; }
.rp-meta dt, .rp-cover dt { font-size: 14px; }
.cal-grid .wd, .gd-date .tag { font-size: 14px; }
.mc-dd .do b, .mc-dd .dont b { font-size: 14.5px; }
.partner .partner-note { font-size: 14.5px; }
.rp-brand { font-size: 13.5px; }
.pinfo { font-size: 13px; line-height: 1.4; }
.toc-peek i { font-size: 13px; width: 22px; height: 22px; }
.ask-free { font-size: 13px; }
.in-stats span { font-size: 14px; }
.in-extra span { font-size: 14px; }
.pod small { font-size: 13.5px; }
.wk-bars span { font-size: 14px; }
.got small { font-size: 12.5px; }

/* ───── 아래 메뉴 (오늘 운세 · 물어보기 · 리포트 · 내 풀이) ───── */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 620px; margin: 0 auto; background: #FFFFFF; border-top: 2.5px solid var(--edge); padding: 6px 6px max(6px, env(safe-area-inset-bottom)); }
.tabbar[hidden] { display: none; }
.tabbar a { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: 13.5px; font-weight: 700; padding: 4px 0; border-radius: 12px; }
.tabbar a i { font-style: normal; font-size: 22px; line-height: 1.1; }
.tabbar a.on { color: var(--ink); background: #FFF1B8; }
/* 물어보기: 다른 칸과 같은 크기, 빨간 글자·연한 빨강 바탕으로 눈에 띄게. 지금 이 화면이면 진한 빨강 */
.tabbar a.tb-ask { color: var(--sd-red); background: #FFE6E2; }
.tabbar a.tb-ask.on { color: #FFFFFF; background: var(--sd-red); }body.has-tabbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .tabbar { border: 2.5px solid var(--edge); border-bottom: 0; border-radius: 18px 18px 0 0; } }

/* ───── 물어보기 큰 카드 ───── */
.ask-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; background: linear-gradient(160deg, #FFE7A3 0%, #FFD0C6 100%); border: 3px solid var(--edge); border-radius: 24px; box-shadow: 6px 6px 0 var(--edge); padding: 18px 16px 16px; text-align: left; }
/* 첫 질문 무료: 크게, 살짝 흔들려서 눈에 띄게 */
.ah-badge { position: absolute; top: -30px; right: -8px; background: var(--sd-red); color: #FFFFFF; font-weight: 800; font-size: 17px; border: 3px solid var(--edge); border-radius: 999px; padding: 7px 16px; transform: rotate(4deg); box-shadow: 3px 3px 0 var(--edge); animation: ah-wiggle 2.4s ease-in-out infinite; }
.ask-hero:has(.ah-badge) { padding-top: 28px; margin-top: 18px; } /* 스티커와 제목이 안 겹치게 · 위로 튀어나온 스티커(30px)가 바로 위 글(키워드·근거 줄)을 가리지 않게 (10-16 손님 눈 점검) */
@keyframes ah-wiggle { 0%, 70%, 100% { transform: rotate(4deg) scale(1); } 78% { transform: rotate(-3deg) scale(1.08); } 86% { transform: rotate(7deg) scale(1.08); } 94% { transform: rotate(3deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ah-badge { animation: none; } }
.ah-k { margin: 0; font-family: 'Do Hyeon', 'Black Han Sans', sans-serif; font-size: 25px; line-height: 1.2; color: var(--ink); }
.ah-top { display: flex; align-items: center; gap: 10px; }
.ah-pet { flex: 0 0 96px; width: 96px; height: 96px; }
.ah-pet img, .ah-pet svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.ah-bubble { position: relative; margin: 0; flex: 1; min-width: 0; background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 16px; padding: 10px 12px; font-size: 16px; line-height: 1.5; box-shadow: 3px 3px 0 var(--edge); }
.ah-bubble::before { content: ""; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; background: #FFFFFF; border-left: 2.5px solid var(--edge); border-bottom: 2.5px solid var(--edge); transform: translateY(-50%) rotate(45deg); }
.ah-input { display: flex; align-items: center; gap: 8px; text-decoration: none; background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 16px; padding: 6px 6px 6px 14px; color: var(--muted); font-size: 16px; }
.ah-input span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-input b { flex: none; background: var(--sd-red); color: #FFFFFF; border: 2px solid var(--edge); border-radius: 12px; padding: 9px 14px; font-size: 16px; }
.ah-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-chips a { text-decoration: none; color: var(--ink); background: rgba(255,255,255,.75); border: 2px solid var(--edge); border-radius: 999px; padding: 5px 11px; font-size: 14.5px; font-weight: 700; }
.ah-chips a::before { content: "💬 "; }

/* ───── 결과 화면 인기 리포트 줄 ───── */
.quick-shop { display: grid; gap: 10px; text-align: left; }
.qs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qs-title { margin: 0; font-family: 'Do Hyeon', 'Black Han Sans', sans-serif; font-size: 23px; }
.qs-head a { font-weight: 700; font-size: 15px; color: var(--ink); }
.qs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qs-item { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--ink); background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 16px; box-shadow: var(--hard); padding: 10px 4px 9px; text-align: center; }
.qs-item .pic { width: 44px; height: 44px; display: block; }
.qs-item b { font-size: 14.5px; line-height: 1.3; word-break: keep-all; }
.qs-item span:last-child { font-size: 13.5px; font-weight: 700; color: var(--sd-red); }
.qs-item.owned span:last-child { color: var(--sd-grn); }
/* 질문 카드 맨 아래 금액 (어느 리포트·얼마) */
.ask-q .ask-p { display: block; margin-top: 2px; font-style: normal; font-size: 13.5px; line-height: 1.4; color: var(--ink); word-break: keep-all; }
.ask-q .ask-p b { font-size: 14.5px; color: var(--sd-red); }
.ask-q .ask-p.own { color: var(--sd-grn); font-weight: 700; }

/* ───── 생일·시즌 달력: 지금 딱 맞는 리포트 + 다가오는 날 (public/season.js) ───── */
.season { display: grid; gap: 10px; text-align: left; }
.ss-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "pic d" "pic t" "pic p"; gap: 2px 12px; align-items: center; text-decoration: none; color: var(--ink); background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 18px; box-shadow: var(--hard); padding: 12px 14px; }
.ss-card.bday { background: linear-gradient(160deg, #FFF1C9 0%, #FFE0EA 100%); }
.ss-card .pic { grid-area: pic; width: 52px; height: 52px; display: block; }
.ss-d { grid-area: d; justify-self: start; font-size: 13px; font-weight: 700; color: #FFFFFF; background: var(--sd-red); border-radius: 999px; padding: 2px 10px; }
.ss-t { grid-area: t; display: grid; gap: 2px; }
.ss-t b { font-size: 18px; line-height: 1.4; word-break: keep-all; }
.ss-t span { font-size: 15px; line-height: 1.55; color: var(--muted); word-break: keep-all; }
.ss-p { grid-area: p; font-size: 15px; font-weight: 700; color: var(--sd-red); }
.ss-cal { display: grid; gap: 6px; }
.ss-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 8px; } /* 2-52: 다가오는 날 칸도 옆으로 안 넘기고 줄 바꿈 */
.ss-row::-webkit-scrollbar { display: none; }
.ss-row a { flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; min-width: 84px; text-decoration: none; color: var(--ink); background: #FFFFFF; border: 2px solid var(--edge); border-radius: 14px; padding: 8px 10px; }
.ss-row b { font-size: 16px; color: var(--sd-red); }
.ss-row span { font-size: 14px; font-weight: 700; white-space: nowrap; }
.ss-row small { font-size: 13px; color: var(--muted); }

/* ───── 리포트 화면 (#shop, 2-31): 처음이면 이것부터 3개 + 분류별 전체 ───── */
.shop-first { display: grid; gap: 10px; text-align: left; }
.pcard.wide { --tile: #FFFFFF; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; column-gap: 12px; align-items: center; color: var(--ink); }
.pcard.wide .pic { grid-column: 1; grid-row: 1 / span 5; width: 64px; height: 64px; margin: 0; align-self: center; }
.pcard.wide > :not(.pic) { grid-column: 2; }
.pcard.wide .pname { font-size: 18px; word-break: keep-all; }
.pcard.wide .pline { font-size: 15px; -webkit-line-clamp: 2; word-break: keep-all; }
.pcard.wide .pprice { padding-top: 2px; color: var(--sd-red); }
.pcard.wide.owned .pprice { color: var(--sd-grn); }
.shop-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); background: #FFFFFF; border: 2.5px solid var(--edge); border-radius: 18px; box-shadow: var(--hard); padding: 12px 16px; }
.shop-link > span:last-child { font-size: 26px; font-weight: 700; }

/* ───── 홈 화면에 추가 · 매일 아침 알림 (2-41) ───── */
.inst-box { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; background: #E7F0FF; border: 2.5px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--edge); padding: 14px 14px 12px; text-align: left; }
.inst-box .inst-ic { font-size: 34px; line-height: 1; padding-top: 2px; }
.inst-body { display: grid; gap: 8px; }
.inst-body .strong { font-size: 17px; line-height: 1.35; }
.inst-steps { margin: 0; padding-left: 20px; font-size: 15.5px; line-height: 1.6; }
.inst-share { display: inline-block; border: 1.5px solid var(--ink); border-radius: 5px; padding: 0 5px; margin: 0 2px; font-size: 13px; line-height: 1.4; }
.inst-box .btn.sm, .push-box .btn.sm { min-height: 48px; padding: 10px 14px; font-size: 16.5px; border-radius: 14px; box-shadow: 3px 3px 0 var(--edge); }
.link-btn { justify-self: start; background: none; border: 0; color: var(--muted); font-size: 14px; text-decoration: underline; padding: 6px 0; min-height: 36px; cursor: pointer; }
.push-box { display: grid; gap: 8px; background: #FFF2C4; border: 2.5px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--edge); padding: 14px 14px 12px; text-align: left; }
.push-box .strong { font-size: 17px; }
.push-box .inst-box { background: #FFFFFF; box-shadow: none; margin-top: 2px; }
.push-hour { font: inherit; font-weight: 700; font-size: 16px; border: 2px solid var(--edge); border-radius: 10px; padding: 4px 8px; background: #FFFFFF; color: var(--ink); }
.push-on { font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.push-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.push-btns .btn { margin: 0; }
#pushToday:empty, #pushMy:empty, #installResult:empty { display: none; }
#pushToday { margin-top: 4px; }
@media (display-mode: standalone) { .top .brand { padding-top: max(0px, env(safe-area-inset-top)); } }

/* 2-47 앱으로 설치: 큰 카드(무료 풀이 아래·내 풀이 맨 아래) + 아래에서 올라오는 안내 창 + 기기별 그림 안내 */
.inst-card { display: grid; gap: 12px; background: var(--tint); border: 2.5px solid var(--edge); border-radius: 20px; box-shadow: var(--hard); padding: 16px 16px 14px; text-align: left; }
.inst-card-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.inst-app { width: 56px; height: 56px; border-radius: 14px; border: 2px solid var(--edge); background: #fff; }
.inst-t { margin: 0; font-family: var(--f-title); font-size: 21px; line-height: 1.25; }
.inst-s { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.inst-card .btn.primary { min-height: 54px; font-size: 18px; }
.inst-free { margin: 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.inst-free .link-btn { font-size: 13.5px; padding: 0; min-height: 0; color: var(--muted); text-decoration: underline; }
#installResult .inst-card { margin: 4px 0 2px; }
.inst-box .btn.sm { margin-top: 2px; }
/* 안내 창 */
.inst-sheet { gap: 12px; }
.inst-grab { width: 44px; height: 5px; border-radius: 3px; background: #D9D4CC; justify-self: center; margin-top: -4px; }
.inst-sheet-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.inst-sheet-head .inst-app { width: 64px; height: 64px; border-radius: 16px; }
.inst-name { margin: 0; font-family: var(--f-title); font-size: 24px; line-height: 1.2; }
.inst-url { margin: 2px 0 0; font-size: 14px; color: #666; }
.inst-h { margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 1.3; }
.inst-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.inst-sheet .btn.primary { min-height: 56px; font-size: 19px; }
.inst-sheet-btns { display: grid; gap: 6px; justify-items: center; }
.inst-sheet-btns .btn { width: 100%; }
.inst-sheet-btns .link-btn { color: #666; }
/* 그림 안내 */
.inst-steps2 { display: grid; gap: 12px; }
.inst-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.inst-step p { margin: 0 0 6px; font-size: 16.5px; line-height: 1.45; }
.inst-n { width: 30px; height: 30px; border-radius: 50%; background: var(--sd-red); color: #fff; font-weight: 800; font-size: 16px; display: grid; place-items: center; border: 2px solid var(--edge); }
.inst-key { display: inline-block; border: 2px solid var(--edge); border-radius: 8px; padding: 0 8px; font-weight: 700; background: #fff; line-height: 1.6; }
.inst-warn { margin: 0 0 4px !important; background: #FFF4D6; border: 2px solid var(--edge); border-radius: 12px; padding: 10px 12px; font-size: 15.5px !important; }
.inst-pic { border: 2px solid #999; border-radius: 10px; background: #F6F6F6; font-size: 15px; color: #555; }
.inst-pic .inst-hl { background: var(--sd-yel); color: #111; font-weight: 800; border: 2px solid var(--edge); border-radius: 8px; }
.inst-pic-bar { display: flex; justify-content: space-around; align-items: center; padding: 6px 8px; font-size: 20px; }
.inst-pic-bar .inst-hl { padding: 0 10px; }
.inst-pic-menu { display: grid; }
.inst-pic-menu span { padding: 7px 12px; border-bottom: 1px solid #ddd; }
.inst-pic-menu span:last-child { border-bottom: 0; }
.inst-pic-menu .inst-hl { border-radius: 0; margin: 0 -2px; display: flex; justify-content: space-between; }
.inst-pic-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; }
.inst-pic-top .inst-hl { padding: 2px 10px; }

/* 2-47 시연용(?as=android): 휴대폰 크롬 설치 창·홈 화면 흉내 */
.fake-wrap { background: rgba(0,0,0,.45); }
.fake-tag { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--sd-yel); border: 2px solid var(--edge); border-radius: 999px; padding: 2px 12px; font-size: 13px; font-weight: 700; color: #111; }
.fake-chrome { position: relative; width: 100%; max-width: 480px; background: #fff; color: #1f1f1f; border-radius: 28px 28px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); font-family: Roboto, "Noto Sans KR", sans-serif; display: grid; gap: 16px; box-shadow: 0 -8px 30px rgba(0,0,0,.25); }
.fake-h { margin: 0; font-size: 22px; font-weight: 500; }
.fake-app { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; font-size: 16px; line-height: 1.4; }
.fake-app img { border-radius: 12px; }
.fake-app span { color: #5f6368; font-size: 14px; }
.fake-btns { display: flex; justify-content: flex-end; gap: 8px; }
.fake-b { border: 0; background: transparent; color: #0b57d0; font-size: 15px; font-weight: 500; padding: 10px 18px; border-radius: 20px; min-height: 40px; }
.fake-b.fake-ok { background: #0b57d0; color: #fff; }
.fake-home { position: relative; width: 100%; max-width: 480px; background: linear-gradient(160deg, #1d2b53, #3a1c71 60%, #6b2d5c); color: #fff; border-radius: 28px 28px 0 0; padding: 26px 18px calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; }
.fake-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.fake-ic { display: grid; justify-items: center; gap: 4px; font-size: 12px; }
.fake-ic span { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 26px; }
.fake-ic i { font-style: normal; opacity: .8; }
.fake-ic img { width: 52px; height: 52px; border-radius: 14px; }
.fake-me { animation: fakePop .6s ease-out; }
.fake-me i { opacity: 1; font-weight: 700; }
.fake-me img { box-shadow: 0 0 0 3px var(--sd-yel), 0 0 18px var(--sd-yel); }
@keyframes fakePop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.fake-cap { margin: 4px 0 0; text-align: center; font-size: 16px; line-height: 1.5; }

/* 2-48 설치 카드: 손님 동물 + 받게 될 알림 미리 보기 */
.inst-card-head { grid-template-columns: 64px minmax(0, 1fr); }
.inst-critter { width: 64px; height: 64px; background: #fff; border: 2px solid var(--edge); }
.inst-card .inst-t { font-size: 22px; }
.inst-noti { background: #fff; border: 2px solid var(--edge); border-radius: 16px; padding: 10px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.inst-noti-top { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; margin-bottom: 4px; }
.inst-noti-top img { border-radius: 5px; }
.inst-noti-top span:first-of-type { font-weight: 700; color: #333; }
.inst-noti-time { margin-left: auto; }
.inst-noti-t { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.35; color: #111; }
.inst-noti-b { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: #444; }
.inst-sheet .inst-noti { margin: 2px 0; }

/* 2-50 동물 화면: 로그인 전 진짜 결과 3가지 + 잠긴 미리보기 */
.hook-sec { display: grid; gap: 6px; }
.hook-sec .past-list { margin: 4px 0 0; }
.hook-today { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--tint); border: 2.5px solid var(--edge); border-radius: 18px; box-shadow: 3px 3px 0 var(--edge); padding: 12px 14px; }
.hook-today p { margin: 0; }
.hook-k { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.hook-score { font-size: 18px; font-weight: 700; line-height: 1.35; }
.hook-score b { font-family: var(--f-title); font-weight: 400; font-size: 30px; }
.hook-el { margin: 4px 0 0; font-size: 16px; line-height: 1.6; }
.hook-el .muted { font-size: 14.5px; }
.lock-list { display: grid; gap: 10px; }
.lock-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.lock-row:last-child { border-bottom: 0; padding-bottom: 0; }
.lock-ic { font-size: 18px; line-height: 1.5; }
.lock-row p { margin: 0; }
.lock-t { font-weight: 800; font-size: 16.5px; line-height: 1.4; }
.lock-sub { font-size: 14.5px; color: var(--muted); }
.lock-blur { margin-top: 4px !important; font-size: 14.5px; color: #555; filter: blur(4px); user-select: none; pointer-events: none; white-space: nowrap; overflow: hidden; }
.animal-float { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-width: 620px; margin: 0 auto; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); background: linear-gradient(to top, #FFFFFF 70%, rgba(255,255,255,0)); }
.animal-float .btn { min-height: 54px; font-size: 18px; }
#view-animal[hidden] .animal-float { display: none; }
/* 2-51 메뉴 이름 뜻 풀이·삼성 인터넷 줄 */
.inst-hint { display: block; font-size: 13.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.inst-samsung { margin: 2px 0 0 !important; font-size: 14.5px !important; color: #555; }

/* ═══════════ 2-58 디자인 정돈 (2026-10-19) ═══════════
   그대로 둔 것: 캐릭터·오방색 띠·색감·검은 테두리와 밀린 그림자·밤 에디션·글꼴·화면 구성·문구
   바꾼 것: 글자 크기 위계, 누르는 칸 44px 이상, 좌우 시작선 18px, 반복 카드 그림자 한 단계 낮춤,
   흰 글자용 진한 빨강, 아래 메뉴 선택 표시, 320px 가로 넘침
   유료 리포트 안(#paidBody)은 PDF와 화면 코드(app.js 의 margin:-20px -16px)가 16px에 맞춰져 있어 좌우 16px 그대로 */
:root {
  --sd-red-ink: #D12F24; /* 흰 글자를 올리거나 흰 바탕 글자로 쓰는 빨강. #E63A2E 는 흰색과 대비 4.2:1 → 5.1:1 (띠·장식 빨강은 그대로) */
  --hard-sm: 3px 3px 0 var(--edge); /* 여러 장 반복되는 카드용, 한 단계 낮은 그림자 */
  --gutter: 18px;
  --placeholder: #8A8798;  /* 입력칸 예시 글자 (흰 바탕 대비 3.5:1) */
  --off-bg: #ECE9F2;       /* 누를 수 없는 단추 */
  --off-ink: #77748A;
  --off-line: #B9B6C4;
  --up-red: #C8372D;       /* "이미 산 리포트 값만큼 빼 드려요" (기존 색) */
}

/* ── 틀: 좌우 시작선 · 가로 넘침 · 최대 폭 ── */
.stack { grid-template-columns: minmax(0, 1fr); } /* 안의 줄바꿈 안 되는 줄(물어보기 입력 줄)이 칸을 밀어 320px 화면에서 26px 가로로 넘치던 것 */
.pad { padding-inline: var(--gutter); }
#paidBody, #paidBody .pad { padding-inline: 16px; }
.rank-link, .invite-banner { margin-inline: var(--gutter); }
.foot { padding-inline: var(--gutter); }
.nobr { white-space: nowrap; } /* 사업자등록번호가 '114-' / '88-03890' 으로 끊기던 것 */
.hero { padding-top: 4px; gap: 8px; }
.catalog { gap: 28px; }
.share-box { max-height: 92dvh; } /* 휴대폰 주소창이 생겼다 없어져도 창 높이가 흔들리지 않게 (dvh 모르는 브라우저는 위의 vh) */
.apply-box { max-height: 88dvh; }
@media (display-mode: standalone) { .top .brand { padding-top: 0; } } /* .top 이 이미 상태 표시줄 여백을 줘서 두 번 들어가던 것 */

/* ── 글자 위계: 제목은 또렷하게, 본문은 편하게, 날짜·분량·부가 설명은 보조로 ── */
body { font-size: 16px; line-height: 1.7; }
.page-title { font-size: 26px; line-height: 1.3; }
.cat-title { font-size: 22px; }
.hero h1 { font-size: clamp(28px, 8.2vw, 32px); }
.hero .sub { font-size: 16px; line-height: 1.65; }
.one-line { font-size: 19px; }
.tip, .talk, .check-list li { font-size: 16px; line-height: 1.7; }
.lock ul { font-size: 16px; }
.luck-gifts li { font-weight: 700; }
.field { gap: 8px; font-size: 14px; }
.foot { font-size: 13px; }
.trait { gap: 6px; }
#view-paid { font-size: 17.5px; line-height: 1.75; } /* 유료 리포트(와 PDF)는 예전 기본 글자 크기 그대로: 크기를 따로 안 정한 글(지난 운 카드 등)이 같이 작아지지 않게 */
@media (min-width: 900px) {
  body { font-size: 17px; }
  #view-paid { font-size: 18px; }
  .page-title { font-size: 30px; }
  .cat-title { font-size: 26px; }
  .hero h1 { font-size: 44px; }
}

/* ── 입력칸 · 선택 · 체크 ── */
.form { gap: 20px; }
.field input, .field select { font-size: 18px; font-weight: 600; min-height: 48px; padding: 8px 12px; }
.field input[type="time"] { font-size: 18px; }
.field input::placeholder { color: var(--placeholder); font-weight: 400; } /* 예시 숫자가 채운 값처럼 보이지 않게 굵기는 낮추고, 너무 연해서(대비 1.9:1) 안 보이던 색은 조금 진하게(3.5:1) */
.field input:disabled { opacity: 1; background: var(--soft); color: var(--muted); border-style: dashed; }
.seg label { min-height: 44px; }
.check, .agree .check { min-height: 44px; }
.consent { padding-block: 4px; }
.consent-set .check input, .agree .check input { margin-top: 3px; flex: none; }
.day-tabs button { min-height: 44px; }
.ask-tab { min-height: 44px; }
.chat-chips { gap: 8px; }
.chat-chips .chip, .ah-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; line-height: 1.35; }
.ah-chips { gap: 8px; }
.leave-link, .my-foot .leave-link, .link-btn { min-height: 44px; }
/* 맞아요/아니에요: 모양은 그대로, 누르는 칸만 위아래로 넓힘 (36px → 46px) */
.fb { margin-top: 10px; }
.fb button { position: relative; }
.fb button::after { content: ""; position: absolute; inset: -5px -3px; }

/* ── 버튼 ── */
.btn { min-height: 54px; font-size: 17px; padding: 14px 16px; line-height: 1.35; }
.btn:disabled { opacity: 1; background: var(--off-bg); color: var(--off-ink); border-color: var(--off-line); box-shadow: none; cursor: not-allowed; }
.paid-bar .btn { min-height: 52px; }
@media (min-width: 900px) { .btn { font-size: 18px; } }

/* ── 진한 빨강: 흰 글자가 올라가는 빨강, 흰 바탕의 작은 빨간 글자 ── */
.btn.primary, .ah-input b, .agree .req, .ask-free, .ss-d, .luck-k, .ah-badge, .ask-tab[aria-pressed="true"], .inst-n, .samjae.on .sj-badge,
.qs-item span:last-child, .ss-p, .ss-row b, .pcard.wide .pprice, .ask-q .ask-p b, .basis::before { --sd-red: var(--sd-red-ink); }

/* ── 카드 강도: 대표 카드는 그대로, 반복 카드는 그림자 한 단계 낮춤 ── */
.pcard, .qs-item { box-shadow: var(--hard-sm); }

/* ── 아래 메뉴: 지금 화면 칸에만 바탕색. 본문 폭과 같게 ── */
.tabbar { max-width: 480px; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); }
.tabbar a { min-height: 56px; align-content: center; gap: 2px; font-size: 13px; line-height: 1.3; }
.tabbar a i { font-size: 22px; line-height: 26px; height: 26px; }
.tabbar a.tb-ask { color: var(--muted); background: transparent; } /* 예전: 고르지 않아도 분홍 바탕·빨간 글자라 칸 두 개가 고른 것처럼 보였음 */
.tabbar a.tb-ask.on { color: var(--bg); background: var(--sd-red-ink); }
body.has-tabbar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.animal-float { max-width: 480px; }
@media (min-width: 900px) { .tabbar, .animal-float { max-width: 620px; } }
/* 글자를 치는 동안에는 화면 아래 고정 막대를 내려서 키보드 위로 입력칸·보내기 단추를 가리지 않게 */
body:has(input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus) .tabbar,
body:has(input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus) .animal-float { display: none; }

/* ── 무료 풀이: 다시 보는 화면이라 머리 캐릭터를 약 18% 작게 (처음 공개하는 내 동물 화면은 그대로) ── */
#view-result #charHead .critter { width: min(68vw, 280px); }

/* ── 오늘의 복주머니: 320px 폭에서 "n일 연속" 줄이 안 접혀 카드 안이 9px 잘리던 것 ── */
.luck-in { grid-template-columns: minmax(0, 1fr); }
.luck-streak { flex-wrap: wrap; }

/* ── 오늘 운세 ── */
.char-sub { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; border-radius: 18px; }
.dline { align-items: baseline; }

/* ── 리포트 목록: 제목 → 설명 → 분량 → 가격, 같은 줄 카드의 가격은 아래 끝에 ── */
.pcard:not(.wide) { display: flex; flex-direction: column; gap: 4px; }
.pcard:not(.wide) .pprice { margin-top: auto; }
.pline, .pcard.wide .pline { display: block; overflow: visible; -webkit-line-clamp: unset; } /* 설명을 3줄(넓은 카드 2줄)에서 자르던 것 → 다 보이게 */
.pinfo { font-weight: 500; color: var(--muted); }
.pinfo.up { font-weight: 700; color: var(--up-red); }

/* ── 물어보기 ── */
.chat-head { grid-template-columns: 88px minmax(0, 1fr); }
.chat-head .critter { width: 88px; height: 88px; }
.chat-intro { padding: 16px; }

/* ── 동물원 ── */
.zoo-empty { gap: 6px; padding: 14px 16px; }
.zoo-empty .critter { width: 112px; }
.dex small { font-size: 12px; }

/* ── 순위 ── */
.pod { min-width: 0; }
.pod small { overflow-wrap: anywhere; }

/* ── 결제: 캐릭터·상품명 / 누구 것 / 가격을 줄로 나눠 좁은 칸에서 서로 밀지 않게 ── */
.order-sum { grid-template-columns: 64px minmax(0, 1fr); row-gap: 12px; }
.order-sum > div:not(.mini-critter) { min-width: 0; }
#buyWho { font-size: 14px; line-height: 1.55; margin-top: 2px; }
.order-sum > .price { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
#buyPrice s { display: inline; }

/* ── 회원 정보: 로그아웃·탈퇴를 손가락으로 따로 누를 수 있게 ── */
.settings-links { gap: 24px; }
.settings-links .leave-link { padding: 10px 14px; }

/* ── 유료 리포트 (화면에서만. PDF 그림은 그대로) ── */
body:not(.pdf-mode) .ch-body > p, body:not(.pdf-mode) .ch-sub p, body:not(.pdf-mode) .vs p, body:not(.pdf-mode) .mc > p { line-height: 1.85; }
@media (max-width: 560px) {
  body:not(.pdf-mode) .toc ol { grid-template-columns: minmax(0, 1fr); } /* 두 칸이면 긴 장 제목이 들쭉날쭉 줄바꿈되던 것 */
}

/* 2-59 푸터 사업자 정보: 항목 이름과 값이 다른 줄로 갈라지지 않게 한 줄에 한 항목 (PC는 가운뎃점으로 이어 씀) */
.foot .biz span { display: block; }
@media (min-width: 900px) {
  .foot .biz span { display: inline-block; white-space: nowrap; }
  .foot .biz span:not(:last-child)::after { content: "·"; margin: 0 .45em; }
}
.foot a { white-space: nowrap; }
/* 2-59 질문 묶음 카드: 설명 줄 수가 달라도 가격은 아래 끝에 맞춤 */
.ap { grid-template-rows: auto 1fr auto; align-items: start; }
.ap strong { align-self: end; }