/* ============================================
   용신록 - Design System
   ============================================ */
:root {
  /* ── 무채색 팔레트 (2026-07-31) ──
     메인은 무채색. 포인트는 크림(강조)·테라코타(경고) 둘뿐이다.
     보라·금색 5종·크림슨은 "AI 서비스" 인상이 강해 전부 걷어냈다. */
  /* (새 판, 2026-09-21 JH 결정) 포인트 컬러를 크림 #E7DFCF → **밝은 금 #F0D89B** 로. 시안판 «포인트 컬러 금색 네 가지» ②안.
     원래 티저 말풍선 강조에 쓰던 금색이다. 눌림·밝은 톤도 같은 금 계열로 맞췄다. */
  --color-primary: #F0D89B;       /* 밝은 금 — 유일한 강조색(CTA·링크·활성) */
  --color-primary-dark: #DFC684;  /* 크림 눌림 상태 */
  --color-primary-light: #F8EBC6; /* 크림 밝은 톤 */
  --color-accent-warn: #B4736A;   /* 먼지빛 테라코타 — 경고·주의에만 */
  /* 크림 배경 위의 글씨색. 크림(#F0D89B)에 흰 글씨를 얹으면 명암비가 1.32로 사실상 안 보인다.
     크림을 배경으로 쓰는 곳은 반드시 이 색을 글씨색으로 쓸 것. */
  --color-on-primary: #17161A;
  --color-star: #F2C14E;          /* 별점 — 유일하게 노란 기운을 쓰는 곳 */
  --color-bg: #000000;            /* 앱 프레임(가운데 내용 영역) — 완전 검정 */
  --color-frame-gap: #000000;   /* (새 판) 라이프사주처럼 프레임 밖도 바탕과 같은 색 — 양옆 경계가 안 보인다 */     /* 프레임 여백(양옆) */
  --color-bg-card: #141415;       /* 카드 */
  --color-bg-card-2: #1C1C1E;     /* 한 단계 밝은 카드(중첩용) */
  --color-text-primary: #F2F0EC;  /* 본문 — 따뜻한 흰색(순백은 눈이 아프다) */
  --color-text-secondary: #A19D95;/* 보조 텍스트 — 뮤티드와 단계가 구분되도록 함께 올림 */
  --color-text-light: #8A8782;    /* 뮤티드 — #6A6864 는 어두운 카드 위 명암비 3.06 으로 흐렸다(4.75로 올림) */
  --color-text-white: #FFFFFF;
  --color-border: #26262A;        /* 테두리 */
  --color-dot-inactive: #3A3A3D;  /* 인액티브 도트 */
  --color-dot-active: #F0D89B;    /* 액티브 도트 */

  --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Noto Serif KR', serif;
  /* 전통 문양 — 티저 매듭 구분선 · 등급 상자 원형문 · 목차 꽃띠. 후기 족자도 같이 쓴다(2026-09-18).
     ⚠️ 그림 값은 손대지 않는다. 쓰는 쪽의 크기·slice 주의는 «전통 문양» 단락에 적혀 있다. */
  --orn-knot: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 109.515 73.663%22 fill=%22%23C0A063%22><g transform=%22translate(-735.729,-481.251)%22><path d=%22M842.166,512.836L842.166,512.836v-0.002l-3.867-3.867c-3.08-3.08-8.094-3.08-11.174,0l-8.389,8.391   l-8.79-8.792l0,0l-0.508-0.508l-0.555-0.555l0,0l-7.863-7.861l4.769-4.767c2.704-2.706,2.704-7.112,0-9.818l-1.1-1.1   c-2.712-2.706-7.113-2.704-9.818,0l-4.767,4.769l-4.767-4.769c-2.708-2.704-7.109-2.704-9.818,0l-1.1,1.1   c-2.704,2.706-2.704,7.112,0,9.816l4.767,4.769l-8.924,8.924l0,0l-8.79,8.792l-8.389-8.391c-3.08-3.08-8.094-3.08-11.174,0   l-3.867,3.867c-1.491,1.493-2.313,3.476-2.313,5.587c0,2.109,0.822,4.092,2.313,5.585l3.869,3.869   c1.54,1.538,3.562,2.307,5.585,2.307c2.023,0,4.047-0.769,5.587-2.309l8.389-8.389l8.79,8.79l1.063,1.063l7.861,7.861l0,0   l-4.767,4.769c-2.704,2.705-2.704,7.109,0,9.814l1.1,1.104c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.029   l4.767-4.769l4.767,4.769c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.031l1.1-1.1   c2.704-2.706,2.704-7.111,0-9.818l-4.769-4.767l7.863-7.861l0,0l9.853-9.853l8.391,8.391c1.54,1.538,3.562,2.307,5.585,2.307   c2.023,0,4.047-0.769,5.587-2.309l3.867-3.867C845.244,520.926,845.244,515.916,842.166,512.836z M794.499,541.594l-4.395,4.396   l-8.792-8.792l4.396-4.395l4.396-4.395l8.791,8.791L794.499,541.594z M785.708,495.247l4.396-4.395l8.791,8.791l-4.395,4.396   l-4.395,4.396l-8.792-8.792L785.708,495.247z M791.167,509.497l4.395-4.396l4.395-4.396l7.863,7.861l-8.792,8.792L791.167,509.497z    M797.965,518.421l-7.861,7.861l-7.861-7.861l7.861-7.861L797.965,518.421z M795.935,485.022c2.041-2.047,5.644-2.049,7.689,0   l1.1,1.1c1.023,1.021,1.587,2.387,1.587,3.843c0,1.458-0.564,2.824-1.587,3.845l-4.767,4.769l-8.791-8.79L795.935,485.022z    M775.484,493.811c-1.023-1.021-1.587-2.387-1.587-3.845c0-1.456,0.564-2.822,1.587-3.843l1.1-1.1   c1.021-1.023,2.387-1.587,3.843-1.587c1.458,0,2.824,0.564,3.845,1.587l4.769,4.767l-4.396,4.395l-4.396,4.395L775.484,493.811z    M780.249,500.705l8.792,8.792l-7.861,7.861l-8.793-8.792L780.249,500.705z M752.02,526.81c-2.497,2.493-6.554,2.491-9.047,0.002   l-3.867-3.869v-0.002c-1.209-1.208-1.875-2.812-1.875-4.521c0-1.71,0.665-3.315,1.875-4.522l3.867-3.867   c1.247-1.249,2.885-1.871,4.523-1.871c1.638,0,3.276,0.622,4.522,1.871l8.391,8.389L752.02,526.81z M771.325,527.211l-8.79-8.791   l8.79-8.792l8.792,8.792l-4.396,4.395L771.325,527.211z M772.388,528.274l4.396-4.395l4.396-4.395l7.861,7.861l-4.396,4.395   l-4.396,4.395L772.388,528.274z M784.272,551.82c-2.043,2.045-5.646,2.045-7.689,0.002l-1.1-1.104   c-1.023-1.021-1.587-2.387-1.587-3.843c0-1.458,0.564-2.824,1.587-3.845l4.765-4.769l8.792,8.792L784.272,551.82z M806.311,546.875   c0,1.456-0.564,2.822-1.587,3.845l-1.1,1.1c-2.045,2.047-5.648,2.045-7.689,0l-4.769-4.767l4.395-4.396l4.395-4.396l4.767,4.769   C805.747,544.051,806.311,545.417,806.311,546.875z M799.957,536.135l-8.791-8.79l7.861-7.861l4.396,4.395l4.396,4.395   L799.957,536.135z M808.883,527.211l-4.396-4.395l-4.396-4.395l8.792-8.792l8.79,8.792L808.883,527.211z M841.101,522.943   l-3.865,3.867c-2.497,2.493-6.554,2.491-9.047,0.002l-8.391-8.391l8.391-8.389c2.493-2.497,6.552-2.497,9.045,0l3.867,3.867   l0.001-0.001C843.594,516.393,843.594,520.45,841.101,522.943z%22/></g></svg>");
  --orn-circle: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 117.413 117.408%22 fill=%22%23E8C46A%22><g transform=%22translate(-1064.061,-459.718)%22><path d=%22M1181.413,515.835h-0.073h-2.236h-2.096h-0.14h-1.242h-0.001h-3.724h-5.172h-5.172h-5.172h-5.172    h-5.172h-5.172h-5.172h-5.172h-5.172v-5.172v-5.172v-5.172v-5.172v-5.172v-5.172v-5.172v-5.172v-5.172v-3.724    c-0.857-0.041-1.719-0.065-2.586-0.065s-1.729,0.024-2.586,0.065v3.724v5.172v5.172v5.172v5.172v5.172v5.172v5.172v5.172v5.172    h-5.172h-5.172h-5.172h-5.172h-5.172h-5.172h-5.172h-5.172h-5.172h-3.724h-0.001h-1.382h-0.046h-2.236h-2.123    c-0.037,0.858-0.06,1.719-0.06,2.586s0.023,1.728,0.06,2.586h2.123h2.217h0.02h0.046h1.382h0.001h3.724h5.172h5.172h5.172h5.172    h5.172h5.172h5.172h5.172h5.172v5.172v5.172v5.172v5.172v5.172v5.172v5.172v5.172v5.172v3.724c0,0,0,0,0,0v3.172v2.61    c0.858,0.037,1.719,0.065,2.586,0.065c0.867,0,1.728-0.028,2.586-0.065v-2.61v-3.172c0,0,0,0,0,0v-3.724v-5.172v-5.172v-5.172    v-5.172v-5.172v-5.172v-5.172v-5.172v-5.172h5.172h5.172h5.172h5.172h5.172h5.172h5.172h5.172h5.172h3.724h0.001h1.242h0.14h0.065    h2.031h2.236h0.073c0.037-0.858,0.06-1.719,0.06-2.586S1181.45,516.693,1181.413,515.835z%22/><path d=%22M1068.485,510.663h1.936c1.792-12.196,7.751-23.03,16.376-31.031h2.356h5.172v-5.172v-0.654    c1.663-1.063,3.389-2.035,5.172-2.91v3.564v3.988v1.184v5.172h-5.172h-3.314c-1.695,1.602-3.269,3.331-4.707,5.172h2.849h5.172    h5.172h5.172v-5.172v-5.172v-3.792v-1.38v-5.172v-0.604c1.684-0.613,3.412-1.134,5.172-1.576v2.18v4.718v0.453v5.172v5.172v5.172    v5.172h-5.172h-5.172h-5.172h-5.172h-5.172h-1.184c-0.97,1.663-1.848,3.385-2.608,5.172h3.792h5.172h5.172h5.172h5.172h5.172    h5.172v-5.172v-5.172v-5.172v-5.172v-5.172v-1.638v-3.534v-3.217v-3.247v-2.581c-26.213,3.463-46.965,24.21-50.428,50.42h1.666    H1068.485z%22/><path d=%22M1176.868,526.179h-1.75c-0.011,0.076-0.026,0.15-0.038,0.226c-0.109,0.72-0.233,1.436-0.37,2.146    c-0.057,0.294-0.123,0.586-0.185,0.878c-0.106,0.5-0.216,0.998-0.335,1.492c-2.485,10.257-7.959,19.341-15.446,26.288h-2.357    h-5.172v5.172v0.654c-1.663,1.063-3.389,2.035-5.172,2.91v-3.564v-3.988v-1.184v-5.172h5.172h3.314    c1.696-1.602,3.269-3.331,4.707-5.172h-2.849h-5.172h-5.172h-5.172v5.172v5.172v3.792v1.38v5.172v0.604    c-1.684,0.613-3.412,1.134-5.172,1.576v-2.18v-4.718v-0.453v-5.172v-5.172v-5.172v-5.172h5.172h5.172h5.172h5.172h5.172h1.184    c0.97-1.663,1.848-3.385,2.608-5.172h-3.792h-5.172h-5.172h-5.172h-5.172h-5.172h-5.172v5.172v5.172v5.172v5.172v5.172v1.638    v3.534v3.217v1.394v0.561v1.724v2.149c26.213-3.463,46.966-24.21,50.429-50.42h-1.851H1176.868z%22/><path d=%22M1140.87,500.32h5.172h5.172h5.172h5.172h3.792c-0.76-1.786-1.638-3.509-2.608-5.172h-1.184h-5.172    h-5.172h-5.172h-5.172h-5.172v-5.172v-5.172v-5.172v-5.172v-0.453v-4.718v-2.18c1.759,0.442,3.487,0.963,5.172,1.576v0.604v5.172    v1.38v3.792v5.172v5.172h5.172h5.172h5.172h2.849c-1.438-1.841-3.011-3.57-4.707-5.172h-3.314h-5.172v-5.172v-1.184v-3.988v-3.564    c1.783,0.875,3.509,1.847,5.172,2.91v0.654v5.172h5.172h2.356c8.625,8.001,14.584,18.835,16.376,31.031h1.75h2.236h1.851    c-3.463-26.21-24.216-46.957-50.429-50.42v2.581v3.247v3.217v3.534v1.638v5.172v5.172v5.172v5.172v5.172h5.172H1140.87z%22/><path d=%22M1104.668,536.522h-5.172h-5.172h-5.172h-5.172h-3.792c0.76,1.786,1.638,3.509,2.608,5.172h1.184    h5.172h5.172h5.172h5.172h5.172v5.172v5.172v5.172v5.172v0.453v4.718v2.18c-1.759-0.442-3.487-0.963-5.172-1.576v-0.604v-5.172    v-1.38v-3.792v-5.172v-5.172h-5.172h-5.172h-5.172h-2.849c1.438,1.841,3.012,3.57,4.707,5.172h3.314h5.172v5.172v1.184v3.988    v3.564c-1.783-0.875-3.509-1.847-5.172-2.91v-0.654v-5.172h-5.172h-2.357c-7.487-6.947-12.961-16.031-15.446-26.288    c-0.12-0.496-0.23-0.995-0.336-1.496c-0.062-0.291-0.127-0.581-0.184-0.874c-0.138-0.711-0.262-1.428-0.371-2.149    c-0.012-0.075-0.027-0.149-0.038-0.224h-1.936h-2.236h-1.666c3.463,26.21,24.216,46.957,50.428,50.42v-2.149v-1.724v-0.561v-1.394    v-3.217v-3.534v-1.638v-5.172v-5.172v-5.172v-5.172v-5.172h-5.172H1104.668z%22/><path d=%22M1104.668,526.179h-5.172h-5.172h-5.172h-5.172h-5.172h-1.729c0.297,1.76,0.693,3.485,1.183,5.172    h0.547h5.172h5.172h5.172h5.172h5.172h5.172h5.172v-5.172h-5.172H1104.668z%22/><path d=%22M1140.87,510.663h5.172h5.172h5.172h5.172h5.172h1.729c-0.297-1.76-0.693-3.485-1.183-5.172h-0.547    h-5.172h-5.172h-5.172h-5.172h-5.172h-5.172h-5.172v5.172h5.172H1140.87z%22/><path d=%22M1104.668,505.491h-5.172h-5.172h-5.172h-5.172h-5.172h-0.547    c-0.489,1.687-0.886,3.412-1.183,5.172h1.729h5.172h5.172h5.172h5.172h5.172h5.172h5.172v-5.172h-5.172H1104.668z%22/><path d=%22M1140.87,531.351h5.172h5.172h5.172h5.172h5.172h0.547c0.489-1.687,0.886-3.412,1.183-5.172h-1.729    h-5.172h-5.172h-5.172h-5.172h-5.172h-5.172h-5.172v5.172h5.172H1140.87z%22/><path d=%22M1125.355,462.824v-3.041c-0.858-0.037-1.719-0.065-2.586-0.065c-0.867,0-1.728,0.028-2.586,0.065    v3.041v2.741c0.857-0.041,1.719-0.065,2.586-0.065c0.867,0,1.729,0.024,2.586,0.065V462.824z%22/></g></svg>");
  --orn-flower: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 91 69%22 fill=%22%235A4B2C%22><g transform=%22translate(11,0)%22><g transform=%22translate(-223.836,-1564.506)%22><path d=%22M290.981,1633.929c-19.117,0-34.689-15.554-34.711-34.671l-0.001-0.698l0.697-0.031      c0.527-0.024,1.052-0.04,1.582-0.04c19.117,0,34.689,15.553,34.71,34.671l0.001,0.698l-0.697,0.031      C292.036,1633.912,291.511,1633.929,290.981,1633.929z M257.735,1599.959c0.397,17.992,15.166,32.513,33.246,32.513      c0.272,0,0.542-0.004,0.811-0.012c-0.396-17.993-15.164-32.513-33.244-32.513      C258.276,1599.947,258.005,1599.951,257.735,1599.959z%22/><path d=%22M258.547,1599.945c-0.531,0-1.056-0.016-1.582-0.04l-0.697-0.031l0.001-0.698      c0.023-19.117,15.594-34.67,34.711-34.67c0.531,0,1.057,0.016,1.581,0.04l0.697,0.032l-0.001,0.697      C293.236,1584.393,277.665,1599.945,258.547,1599.945z M257.735,1598.476c0.27,0.008,0.541,0.012,0.812,0.012      c18.08,0,32.849-14.521,33.244-32.512c-0.269-0.008-0.539-0.012-0.811-0.012      C272.901,1565.964,258.132,1580.484,257.735,1598.476z%22/><path d=%22M223.836,1633.923l0.001-0.763c0.021-18.585,14.572-33.796,33.126-34.63l0.763-0.034      l-0.002,0.763c-0.021,18.584-14.572,33.796-33.126,34.63L223.836,1633.923z M256.258,1600.029      c-17.148,1.162-30.545,15.165-30.953,32.361C242.452,1631.228,255.849,1617.224,256.258,1600.029z%22/><path d=%22M257.726,1599.94l-0.763-0.034c-18.554-0.835-33.105-16.046-33.126-34.63l-0.001-0.763      l0.763,0.034c18.554,0.834,33.105,16.045,33.126,34.63L257.726,1599.94z M225.304,1566.046      c0.408,17.195,13.805,31.198,30.953,32.361C255.849,1581.211,242.452,1567.208,225.304,1566.046z%22/></g></g></svg>");
  --max-width: 448px;   /* (새 판) 480 → 448 — 라이프사주와 같은 폭 */
  --header-height: 60px;   /* (새 판) 56 → 60 */
  /* ── (새 판) 라이프사주에서 가져온 «값의 단계» — 이름도 같게 둔다. 색은 가져오지 않는다(용신록 크림 유지). ── */
  --dg-space-1: 4px; --dg-space-2: 8px; --dg-space-3: 12px; --dg-space-4: 16px;
  --dg-space-5: 20px;                 /* 화면 좌우 기준선 */
  --dg-space-6: 24px; --dg-space-8: 32px; --dg-space-10: 40px;   /* 40px = 섹션 사이 */
  --dg-space-12: 48px; --dg-space-16: 64px;
  --dg-radius-sm: 8px; --dg-radius-md: 12px; --dg-radius-lg: 20px; --dg-radius-xl: 28px; --dg-radius-full: 999px;
  --fs-display-score: 64px; --fs-display-hero: 36px; --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 20px;
  --fs-card-title: 18px; --fs-body-lead: 17px; --fs-body: 16px; --fs-body-small: 14px;
  --fs-label: 14px; --fs-caption: 13px; --fs-micro: 12px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
  /* 라이프사주에서 옮겨 온 화면(내 만세력·오늘의 운세)이 쓰는 이름 — 값은 용신록 색으로 잇는다 */
  --dg-bg: var(--color-bg); --dg-surface: #141415; --dg-surface-soft: #0E0E0F; --dg-surface-muted: #1C1C1E; --dg-fill: #1C1C1E;
  --dg-divider: var(--color-border); --dg-line-2: #3A3A3D;
  --dg-text-primary: var(--color-text-primary); --dg-text-body: #D6D2CA; --dg-text-secondary: var(--color-text-secondary); --dg-text-faint: var(--color-text-light);
  --dg-accent: var(--color-primary); --dg-accent-soft: rgba(240,216,155,.16); --dg-accent-border: rgba(240,216,155,.40);
  --color-on-light: var(--color-on-primary);
  --ys-surface: #141415;              /* 바탕 한 겹 위 — 카드·시트 (= --color-bg-card) */
  --ys-surface-soft: #0E0E0F;         /* 본문과 살짝 가르는 면 */
  --ys-fill: #1C1C1E;                 /* 옅은 면 — 그림 자리 (= --color-bg-card-2) */
  --fnav-h: 60px; --fnav-gap: 16px;
  --fnav-space: calc(var(--fnav-h) + var(--fnav-gap) + 24px + env(safe-area-inset-bottom));
  --tab-height: 48px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --radius-sm: 8px;
  --radius-md: 12px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* 본문 글꼴 Pretendard (2026-09-20 이사).
   전에는 index.html 에서 jsdelivr 의 CSS 를 <link> 로 불렀는데, 내용이 이 @font-face 한 줄뿐이었다.
   그 한 줄 때문에 첫 화면이 jsdelivr 응답을 기다렸다(DNS+TLS 한 번 더). 여기로 옮겨 그 기다림을 없앤다.
   ⚠️ 주소는 jsdelivr 원본 CSS 의 상대경로를 풀어 쓴 것이다. 버전(@v1.3.9)을 올리면 이 줄도 같이 고친다.
   ⚠️ 글꼴 파일은 2MB 라 저장소에 넣지 않고 CDN 에서 받는다. 글꼴은 첫 화면을 막지 않는다(display:swap).
   ⚠️ vercel.json 의 CSP font-src 에 cdn.jsdelivr.net 이 있어야 한다. */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920; font-style: normal; font-display: swap;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; }
body { 
  font-family:var(--font-sans); 
  color:var(--color-text-primary); 
  line-height:1.5; 
  overflow-x:hidden; 
  min-height:100vh;
  min-height:100dvh;   /* (2026-08-10) 휴대폰 주소창이 접혔다 펴질 때 화면이 잘리는 문제 방지 */
  background-color: var(--color-frame-gap);
}
a { text-decoration:none; color:inherit; }
button { border:none; background:none; cursor:pointer; font-family:inherit; font-size:inherit; }
img { display:block; max-width:100%; }
::-webkit-scrollbar { width:0; display:none; }
body { scrollbar-width:none; }

/* App Container */
#app-container { max-width:var(--max-width); margin:0 auto; background:var(--color-bg); min-height:100vh; min-height:100dvh; position:relative; box-shadow:0 0 40px rgba(0,0,0,0.06); }

/* Page system */
.page { display:none; min-height:100vh; min-height:100dvh; }
.page.active { display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ============================================
   MAIN PAGE - Header
   ============================================ */
#main-header { position:sticky; top:0; z-index:100; background:var(--color-bg); }
.header-inner { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; height:var(--header-height); padding:0 16px; border-bottom:1px solid var(--color-border); }
.hamburger-btn { justify-self: start; color:var(--color-text-primary); padding:8px; margin-left:-8px; }
.logo-area { justify-self: center; display:flex; align-items:center; cursor:pointer; }
.logo-img { height:36px; width:auto; object-fit:contain; filter: brightness(0) invert(1); }
.login-btn { justify-self: end; display:flex; align-items:center; gap:4px; color:var(--color-text-secondary); font-size:14px; padding:6px 4px; margin-right:-4px; transition:color var(--transition-fast); }
.login-btn:hover { color:var(--color-text-primary); }
.login-btn svg { width:20px; height:20px; }

/* Sidebar Menu */
.side-menu-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:998; opacity:0; pointer-events:none; transition:opacity var(--transition-normal); }
.side-menu-overlay.show { opacity:1; pointer-events:auto; }
.side-menu { position:fixed; top:0; left:-280px; width:280px; height:100vh; height:100dvh; background:var(--color-bg); z-index:999; transition:left var(--transition-normal); display:flex; flex-direction:column; box-shadow:var(--shadow-md); }
.side-menu.show { left:0; }
.side-menu-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--color-border); }
.side-logo { height:30px; width:auto; filter: brightness(0) invert(1); }
.close-menu-btn { font-size:20px; color:var(--color-text-secondary); }
.side-menu-list { list-style:none; display:flex; flex-direction:column; padding:12px 0; }
.side-menu-list li { padding:16px 24px; font-size:16px; font-weight:500; cursor:pointer; transition:background var(--transition-fast); }
/* (2026-08-10) 밝은 테마 시절 값(#F5F5F5)이 남아 있어, PC에서 마우스를 올리면
   메뉴 한 줄이 흰 덩어리가 되고 흰 글씨가 사라졌다. */
.side-menu-list li:hover { background:var(--color-bg-card-2); }

/* Carousel */
/* ── 카테고리 탭바 (2026-08-20) ──
   상품 그리드 위에만 있던 필터 칩을 헤더 바로 아래로 올렸다.
   헤더가 sticky(top:0, 높이 --header-height)라 탭바는 그 밑에 붙는다.
   ⚠️ 헤더 높이를 바꾸면 여기 top 값이 아니라 --header-height 를 고칠 것. */
.cat-tabbar { position:sticky; top:var(--header-height); z-index:99; background:var(--color-bg); border-bottom:1px solid var(--color-border); padding:9px 12px 8px; }
.cat-tabbar .prod-filter { margin-bottom:0; padding-bottom:0; }
.cat-tabbar .pchip { background:transparent; border-color:transparent; color:var(--color-text-light); font-size:15px; font-weight:700; padding:8px 14px; }
.cat-tabbar .pchip.active { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-on-primary); }

/* ── 대표 서비스 캐러셀 (2026-08-20) ──
   한 장씩 화면을 꽉 채우던 배너 → 양옆으로 다음 카드가 살짝 보이는 포스터 카드로 바꿨다.
   옆에 더 있다는 게 눈에 보여야 손으로 넘겨 본다.
   ⚠️ 폭 계산 규칙: 트랙 양옆을 --peek 만큼 비우고 슬라이드는 flex-basis:100%(=트랙 안쪽 폭).
      이래야 첫 장·마지막 장도 화면 가운데에 딱 선다. 슬라이드 폭을 %로 직접 주면
      (안쪽 폭의 %로 계산돼) 카드가 점점 작아진다 — 건드리지 말 것.
   넘김은 브라우저 기본 가로 스크롤 + 스크롤 스냅에 맡긴다(모바일에서 제일 부드럽다). */
/* 카드 크기 조절 손잡이: --peek 을 줄이면 카드가 커진다(양옆 여백이 곧 카드가 못 쓰는 폭).
   10% = 카드 폭 80% / 6.5% = 87%. (2026-08-20) 사용자 요청으로 6.5% 로 키웠다. */
#main-carousel { position:relative; background:var(--color-bg); padding-top:14px; --peek:6.5%; --slide-gap:9px; }
.carousel-track { display:flex; gap:var(--slide-gap); padding:0 var(--peek); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-slide { flex:0 0 100%; scroll-snap-align:center; cursor:pointer; }
.slide-image-wrapper { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; border-radius:16px; border:1px solid var(--color-border); background:#0A0A0B; }
.slide-image { width:100%; height:100%; object-fit:cover; }
.slide-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.34) 0%,transparent 26%,rgba(0,0,0,0.18) 46%,rgba(0,0,0,.72) 74%,rgba(0,0,0,.94) 100%); }
.slide-content { position:absolute; bottom:22px; left:20px; right:20px; color:#fff; z-index:2; }
/* 캐러셀 표제 — 상품 카드와 같은 모양(2026-08-26). 흰 글씨 + 아래 검은 그라데이션 */
.slide-brand { font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400; font-size:14px; letter-spacing:.05em; color:#E7CE94; display:block; margin-bottom:3px; text-shadow:0 1px 6px rgba(0,0,0,.95); }
.slide-title { font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400; font-size:clamp(34px, 11vw, 48px); line-height:1.14; letter-spacing:.03em; margin-bottom:8px; word-break:keep-all; color:#FFFFFF; text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.7); }
.slide-subtitle { font-size:13px; font-weight:300; opacity:.85; word-break:keep-all; }
.slide-price { display:flex; align-items:baseline; gap:6px; margin-top:10px; }
.slide-disc { font-size:13px; font-weight:800; color:#E09A8F; }
.slide-orig { font-size:12px; color:rgba(255,255,255,.5); }
.slide-sale { font-size:17px; font-weight:800; color:#fff; }
/* 배지·자리표시 모양은 상품 카드(.pcard-*)와 똑같은 걸 쓴다 — 두 곳 색이 어긋나지 않게. */
.slide-image-wrapper .pcard-badges { top:12px; left:12px; }
/* 장수 표시(1 / 4) — 가운데 선 카드의 오른쪽 위에 오도록 --peek 만큼 띄운다. */
.carousel-counter { position:absolute; top:26px; right:calc(var(--peek) + 12px); z-index:3; padding:4px 10px; border-radius:999px; background:rgba(0,0,0,0.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font-size:12px; font-weight:700; letter-spacing:.3px; pointer-events:none; }
.carousel-counter:empty { display:none; }
.carousel-dots { display:flex; align-items:center; justify-content:center; gap:7px; padding:14px 0 2px; background:var(--color-bg); }
.dot { width:7px; height:7px; border-radius:999px; background:var(--color-dot-inactive); cursor:pointer; transition:all var(--transition-normal); }
.dot.active { background:var(--color-dot-active); width:18px; }

/* Quick Menu */
/* (2026-08-20) 메인 '내 메뉴' 4칸(#quick-menu / .menu-*) 삭제 — 사용자 요청. */

/* ============================================
   SUB PAGES - Shared
   ============================================ */
.sub-header { display:flex; align-items:center; justify-content:space-between; height:var(--header-height); padding:0 16px; background:var(--color-bg); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:100; }
.back-btn { font-size:22px; color:var(--color-text-primary); padding:8px; width:40px; }
.sub-title { font-size:17px; font-weight:600; position:absolute; left:50%; transform:translateX(-50%); }
.header-spacer { width:40px; }
.page-body { padding:20px 16px 40px; }

/* Form */
.form-group { display:flex; flex-direction:column; gap:16px; }
.input-wrap { display:flex; flex-direction:column; gap:6px; }
.input-wrap label { font-size:13px; font-weight:600; color:var(--color-text-secondary); }
.input-wrap input, .input-wrap select, .input-wrap textarea { width:100%; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:15px; font-family:var(--font-sans); color:var(--color-text-primary); background:var(--color-bg-card); transition:border var(--transition-fast); outline:none; }
.input-wrap input:focus, .input-wrap select:focus, .input-wrap textarea:focus { border-color:var(--color-primary); background:#1C1C1E; }
.input-wrap input:disabled { background:#27252D; color:var(--color-text-light); }
.input-wrap textarea { resize:vertical; min-height:120px; }
.input-hint { font-size:12px; color:var(--color-text-light); }
.radio-group { display:flex; gap:20px; padding:8px 0; }
.radio-label { display:flex; align-items:center; gap:6px; font-size:15px; cursor:pointer; }

/* Buttons */
.btn-primary { width:100%; padding:14px; background:var(--color-primary); color:var(--color-on-primary); font-size:16px; font-weight:700; border:none; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--transition-fast); margin-top:8px; }
.btn-primary:hover { background:var(--color-primary-dark); }
.btn-primary:active { transform:scale(0.98); }
.btn-secondary { width:100%; padding:12px; background:none; color:var(--color-text-light); font-size:14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); cursor:pointer; margin-top:4px; }
.btn-outline-sm { padding:8px 16px; border:1px solid var(--color-primary); color:var(--color-primary); border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; background:none; transition:all var(--transition-fast); align-self:flex-end; }
.btn-outline-sm:hover { background:var(--color-primary); color:var(--color-on-primary); }

/* Section */
.section-divider { border:none; border-top:1px solid var(--color-border); margin:20px 0; }
.section-title { font-size:16px; font-weight:700; margin-bottom:12px; }

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-logo { text-align:center; padding:32px 0 28px; display:flex; flex-direction:column; align-items:center; }
.login-logo-img { height:48px; width:auto; object-fit:contain; margin-bottom:8px; filter: brightness(0) invert(1); }
.login-welcome { margin-top:4px; font-size:15px; color:var(--color-text-secondary); }
.login-links { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; font-size:13px; color:var(--color-text-secondary); }
.login-links a:hover { color:var(--color-primary); }
.login-links .divider { color:#55565A; }   /* 테두리색은 글씨로 쓰면 안 보인다 */
.social-login { margin-top:32px; text-align:center; }
.social-label { font-size:13px; color:var(--color-text-light); margin-bottom:14px; position:relative; }
.social-label::before, .social-label::after { content:''; position:absolute; top:50%; width:28%; height:1px; background:var(--color-border); }
.social-label::before { left:0; }
.social-label::after { right:0; }
.social-buttons { display:flex; gap:10px; }
.social-btn { flex:1; padding:12px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer; border:none; transition:opacity var(--transition-fast); }
.social-btn:hover { opacity:.85; }
.social-btn.kakao { background:#FEE500; color:#3C1E1E; }
.social-btn.naver { background:#03C75A; color:#fff; }
.social-btn.google { background:#fff; color:#333; border:1px solid var(--color-border); }

/* ============================================
   SIGNUP - Terms
   ============================================ */
.terms-group { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:14px; display:flex; flex-direction:column; gap:10px; }
.check-label { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.check-label input[type="checkbox"] { width:18px; height:18px; accent-color:var(--color-primary); }
.terms-sub { padding-left:4px; font-size:13px; color:var(--color-text-secondary); }
.terms-divider { border:none; border-top:1px solid var(--color-border); margin:4px 0; }

/* ============================================
   MYPAGE
   ============================================ */
.profile-card { display:flex; align-items:center; gap:16px; padding:20px; background:var(--color-primary); border-radius:var(--radius-md); color:var(--color-on-primary); }
.profile-avatar { width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.profile-name { font-size:18px; font-weight:700; }
.profile-email { font-size:13px; opacity:.75; margin-top:2px; }
.mypage-stats { display:flex; background:var(--color-bg-card); border-radius:var(--radius-sm); margin:16px 0; border:1px solid var(--color-border); }
.stat-item { flex:1; text-align:center; padding:14px 0; }
.stat-item:not(:last-child) { border-right:1px solid var(--color-border); }
.stat-value { display:block; font-size:18px; font-weight:700; color:var(--color-primary); }
.stat-label { font-size:12px; color:var(--color-text-secondary); }
.mypage-menu { list-style:none; }
/* ⚠️ (2026-08-10) 여기 색이 밝은 테마 시절 값(#f0f0f0)으로 남아 있었다.
   검은 배경 위에서 거의 흰색이라 줄 구분선이 너무 밝게 떴다.
   → 테두리색 토큰으로 교체. 새 구분선을 만들 때도 색을 직접 적지 말 것.
   구역을 나누던 굵은 띠(.menu-divider)는 아예 없앴다(HTML 에서도 삭제). */
.mypage-menu li { display:flex; align-items:center; justify-content:space-between; padding:16px 4px; border-bottom:1px solid var(--color-border); cursor:pointer; font-size:15px; transition:background var(--transition-fast); }
.mypage-menu li:hover { background:var(--color-bg-card); }
.mypage-menu .arrow { color:var(--color-text-light); font-size:18px; }
.mypage-menu .logout-item { color:var(--color-text-light); }

/* ============================================
   SAJU STORAGE
   ============================================ */
/* (2026-08-10) .storage-tabs / .stab 삭제 — 보관함 상품별 필터 탭을 없앴다.
   (남아 있던 background:#F0F0F0 도 밝은 테마 시절 값이라 어차피 어울리지 않았다) */
.storage-list { display:flex; flex-direction:column; gap:12px; }
.storage-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:16px; display:flex; flex-direction:column; gap:8px; transition:all var(--transition-fast); }
.storage-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-sm); }
.storage-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; color:#fff; width:fit-content; }
.storage-badge.remarriage { background:#94857C; }
.storage-badge.marriage { background:var(--color-primary); }
.storage-badge.divorce { background:#747A80; }
.storage-info { display:flex; align-items:center; justify-content:space-between; }
.storage-name { font-size:15px; font-weight:600; }
.storage-date { font-size:12px; color:var(--color-text-light); }
.storage-summary { font-size:13px; color:var(--color-text-secondary); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Storage State Styles */
.loading-spinner, .empty-msg, .error-msg { text-align:center; padding:40px 20px; color:var(--color-text-light); font-size:14px; }
.loading-spinner::before { content:''; display:block; width:24px; height:24px; border:2px solid var(--color-border); border-top-color:var(--color-primary); border-radius:50%; margin:0 auto 12px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-msg::before { content:'📂'; display:block; font-size:32px; margin-bottom:12px; opacity:0.5; }
.error-msg { color:#B4736A; }

/* ============================================
   REVIEW
   ============================================ */
.review-reward-banner { display:flex; align-items:center; gap:12px; padding:16px; background:linear-gradient(135deg,#F1F1EE,#E9E7E4); border-radius:var(--radius-md); margin-bottom:20px; }
.reward-icon { font-size:28px; }
.reward-title { font-size:15px; font-weight:700; color:#575348; }
.reward-desc { font-size:12px; color:#7C7769; margin-top:2px; }
.star-rating { display:flex; gap:4px; }
.star { font-size:32px; color:#D0D0D0; cursor:pointer; transition:color var(--transition-fast); }
.star.active { color:var(--color-star); }
.photo-upload { display:flex; align-items:center; gap:8px; padding:24px; border:2px dashed var(--color-border); border-radius:var(--radius-sm); cursor:pointer; justify-content:center; color:var(--color-text-light); font-size:14px; transition:all var(--transition-fast); }
.photo-upload:hover { border-color:var(--color-primary); color:var(--color-primary); }
.review-list { display:flex; flex-direction:column; gap:12px; }
.review-item { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:14px; }
.review-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.review-service { font-size:13px; font-weight:600; color:var(--color-primary); }
.review-date { font-size:12px; color:var(--color-text-light); }
.review-stars { color:var(--color-star); font-size:14px; margin-bottom:6px; }
.review-text { font-size:14px; color:var(--color-text-secondary); line-height:1.6; }
.review-point { font-size:12px; color:var(--color-primary); font-weight:600; margin-top:8px; padding-top:8px; border-top:1px solid var(--color-border); }

/* ============================================
   COUPON
   ============================================ */
.coupon-input-area { display:flex; gap:8px; margin-bottom:16px; }
.coupon-input-area input { flex:1; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:14px; background:var(--color-bg-card); outline:none; font-family:var(--font-sans); color:var(--color-text-primary); }
.coupon-input-area input:focus { border-color:var(--color-primary); background:#1C1C1E; }
.btn-coupon-register { padding:12px 20px; background:var(--color-primary); color:var(--color-on-primary); border-radius:var(--radius-sm); font-size:14px; font-weight:600; white-space:nowrap; }
.coupon-tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:1px solid var(--color-border); }
.ctab { padding:10px 16px; font-size:14px; color:var(--color-text-secondary); position:relative; transition:all var(--transition-fast); }
.ctab.active { color:var(--color-primary); font-weight:700; }
.ctab.active::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--color-primary); }
.ctab-count { font-size:12px; font-weight:700; background:var(--color-primary); color:var(--color-on-primary); padding:1px 6px; border-radius:10px; margin-left:4px; }
.coupon-list { display:flex; flex-direction:column; gap:12px; }
.coupon-card { display:flex; align-items:stretch; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:var(--color-bg-card); transition:all var(--transition-fast); }
.coupon-card:hover { box-shadow:var(--shadow-sm); }
.coupon-card.expired { opacity:.5; }
.coupon-left { width:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--color-primary); color:var(--color-on-primary); padding:16px 8px; flex-shrink:0; }
.coupon-discount { font-size:22px; font-weight:800; }
.coupon-type { font-size:12px; opacity:.8; }
.coupon-divider { width:1px; background:var(--color-border); position:relative; }
/* 쿠폰 카드 가운데를 '뜯는 자리'처럼 파는 반원 두 개.
   파낸 자리는 카드 뒤 배경색이어야 한다 — 밝은 테마 값(#F5F5F5)이 남아 흰 점으로 보였다(2026-08-10). */
.coupon-divider::before, .coupon-divider::after { content:''; position:absolute; left:-6px; width:12px; height:12px; background:var(--color-bg); border-radius:50%; }
.coupon-divider::before { top:-6px; }
.coupon-divider::after { bottom:-6px; }
.coupon-right { flex:1; padding:14px 16px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.coupon-name { font-size:15px; font-weight:600; }
.coupon-condition { font-size:12px; color:var(--color-text-secondary); }
.coupon-expiry { font-size:12px; color:var(--color-primary); font-weight:500; }
.coupon-expiry.expired-text { color:var(--color-text-light); }

/* ============================================
   PRODUCT SECTION
   ============================================ */
#product-section { padding:32px 16px 40px; background:var(--color-bg); }
.product-heading { font-family:var(--font-serif); font-size:24px; font-weight:900; line-height:1.4; color:var(--color-text-primary); margin-bottom:24px; letter-spacing:-0.5px; }

/* Featured product */
.product-featured { margin-bottom:24px; }
.featured-image-wrap { position:relative; width:100%; aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden; cursor: pointer; }
.featured-image { width:100%; height:100%; object-fit:cover; transition: transform var(--transition-normal); }
.featured-image-wrap:hover .featured-image { transform: scale(1.05); }
.featured-overlay { position:absolute; bottom:0; left:0; right:0; height:60%; background:linear-gradient(to bottom,transparent,rgba(0,0,0,0.7)); }
.featured-text { position:absolute; bottom:20px; left:20px; color:#fff; }
.featured-brand { font-family:var(--font-serif); font-size:13px; opacity:.85; display:block; margin-bottom:2px; }
.featured-title { font-family:var(--font-serif); font-size:28px; font-weight:900; margin-bottom:4px; text-shadow:0 1px 4px rgba(0,0,0,0.3); }
.featured-sub { font-size:12px; opacity:.8; }

.product-info-row { display:flex; align-items:flex-end; justify-content:space-between; padding:14px 0 0; }
.product-info-left { flex:1; }
.product-name-main { font-size:16px; font-weight:700; color:var(--color-text-primary); margin-bottom:2px; }
.product-desc { font-size:12px; color:var(--color-text-secondary); margin-bottom:6px; line-height:1.4; }
.product-price-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.price-original { font-size:13px; color:var(--color-text-light); text-decoration:line-through; }
.price-discount { font-size:15px; font-weight:800; color:#B4736A; }
.price-sale { font-size:17px; font-weight:800; color:var(--color-text-primary); }

.btn-start { padding:10px 18px; background:var(--color-primary); color:var(--color-on-primary); border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background var(--transition-fast); }
.btn-start:hover { background:var(--color-primary-dark); }
.btn-start:active { transform:scale(0.96); }

/* Product list */
.product-list { display:flex; flex-direction:column; gap:16px; }
.product-card { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:#fff; }
.product-thumb { width:100%; aspect-ratio:16/9; overflow:hidden; background:#f0f0f0; }
.product-thumb img { width:100%; height:100%; object-fit:cover; }
.product-card-info { padding:14px 16px 0; }
.product-card .btn-start { margin:12px 16px 14px; }
.product-card .product-info-row { padding:14px 16px; }
#product-section, .product-featured, .product-card { scroll-margin-top:110px; }

/* ============================================
   TESTIMONIAL SECTION
   ============================================ */
#testimonial-section { padding:36px 16px 48px; background:var(--color-bg); }
/* ⏸ 홈 «고객 후기» 잠시 숨김 (JH 지시, 2026-09-17).
   ⚠️ JS 두 곳이 이 섹션을 켠다 — initTabs() 는 무조건 block, renderReviewFeed() 는 후기가 있으면 보이게.
      그래서 인라인 style 을 이기도록 !important 로 막는다. 후기 불러오기(_publicReviews)는 그대로 돌아서
      리포트 하단 후기 등 다른 자리는 영향이 없다.
   다시 보이게 하려면 이 한 줄만 지운다. */
#testimonial-section { display:none !important; }
.testimonial-heading { font-family:var(--font-serif); font-size:24px; font-weight:900; line-height:1.4; color:var(--color-text-primary); margin-bottom:24px; letter-spacing:-0.5px; }

.testimonial-list { display:flex; flex-direction:column; gap:16px; }

.testimonial-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:18px 16px; }

.testimonial-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.testimonial-user { display:flex; align-items:center; gap:10px; }
.testimonial-avatar { width:40px; height:40px; border-radius:50%; background:#f0f0f0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.testimonial-name { font-size:14px; font-weight:700; color:var(--color-text-primary); display:block; margin-bottom:2px; }
.testimonial-rating { display:flex; align-items:center; gap:4px; }
.t-stars { color:var(--color-star); font-size:14px; letter-spacing:1px; }
.t-score { font-size:14px; font-weight:700; color:var(--color-text-primary); }
.testimonial-time { font-size:12px; color:var(--color-text-light); white-space:nowrap; padding-top:4px; }

.testimonial-text { font-size:13px; line-height:1.65; color:var(--color-text-secondary); margin-bottom:14px; word-break:keep-all; }

.testimonial-product { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#212121; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--transition-fast); }
.testimonial-product:hover { background:#282730; }
.testimonial-product-avatar { width:28px; height:28px; border-radius:50%; background:#e8e8e8; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.testimonial-product-name { font-size:13px; font-weight:700; color:var(--color-text-primary); flex-shrink:0; }
.testimonial-product-price { font-size:12px; margin-left:auto; display:flex; align-items:center; gap:4px; }
.tp-discount { color:#B4736A; font-weight:800; }
.tp-original { color:var(--color-text-light); text-decoration:line-through; }
.tp-sale { color:var(--color-text-primary); font-weight:700; }

/* ============================================
   FOOTER
   ============================================ */
#main-footer { padding:32px 20px 36px; background:#0B0B0B; border-top:1px solid var(--color-border); }
#main-footer .footer-logo { margin-bottom:20px; }
.footer-logo-img { height:30px; width:auto; object-fit:contain; opacity:0.9; filter: brightness(0) invert(1); }

.footer-info { margin-bottom:20px; }
.footer-info p { font-size:13px; color:var(--color-text-secondary); line-height:1.8; margin:0; }
/* 문의 안내 — 대표번호·사업자정보 바로 아래에 한 톤 낮춰 붙인다 */
.footer-info p.footer-note { font-size:12px; color:var(--color-text-light); margin:-2px 0 4px; }

/* ===== 상품 정보 제공 고시 (상품 상세 하단) =====
   법정 표시항목이라 반드시 노출하되, 구매 흐름을 가리지 않도록 접은 상태로 둔다.
   (펼침 여부와 무관하게 페이지에 존재하므로 표시 의무는 충족된다) */
.goshi { margin:26px 16px 40px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-bg-card); }
.goshi summary {
  cursor:pointer; padding:14px 16px; font-size:13px; font-weight:700;
  color:var(--color-text-secondary); list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.goshi summary::-webkit-details-marker { display:none; }
.goshi summary::after { content:'+'; font-size:16px; color:var(--color-text-light); font-weight:400; }
.goshi[open] summary::after { content:'−'; }
.goshi[open] summary { border-bottom:1px solid var(--color-border); }
.goshi-table { width:100%; border-collapse:collapse; font-size:12.5px; line-height:1.7; }
.goshi-table th, .goshi-table td {
  padding:11px 14px; text-align:left; vertical-align:top;
  border-top:1px solid var(--color-border); color:var(--color-text-secondary);
}
.goshi-table tr:first-child th, .goshi-table tr:first-child td { border-top:none; }
.goshi-table th { width:35%; font-weight:700; color:var(--color-text-primary); white-space:nowrap; }
.goshi-table a { color:var(--color-primary); text-decoration:underline; }
.goshi-note { display:block; margin-top:3px; font-size:12.5px; color:var(--color-text-light); }
.footer-info strong { color:var(--color-text-primary); font-weight:600; }

.footer-links { display:flex; align-items:center; gap:20px; margin-bottom:16px; padding-top:4px; }
.footer-links a { font-size:13px; color:var(--color-text-secondary); text-decoration:none; transition:color var(--transition-fast); }
.footer-links a:hover { color:var(--color-text-primary); }

.footer-copyright { font-size:12px; color:var(--color-text-light); margin:0; line-height:1.6; }

/* ============================================
   TOAST
   ============================================ */
.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(0,0,0,0.8); color:#fff; padding:12px 24px; border-radius:24px; font-size:14px; opacity:0; transition:all .3s ease; pointer-events:none; z-index:9999; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================
   SERVICE LANDING PAGE
   ============================================ */
/* ⚠️ (2026-08-10) `overflow:hidden` 을 뺐다 — 화면이 짧은 휴대폰에서 가격·결제버튼·상품고시가
   화면 밖으로 밀리면 그대로 잘려 보이지 않았다(스크롤도 막혀 있었다). */
.service-landing { position:relative; width:100%; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:#0a0a0a; }
.service-header { position:absolute; top:0; left:0; right:0; z-index:10; background:transparent; }
.service-header .header-inner { padding:12px 16px; }

.service-header .login-btn { color:#fff; }

/* Hero area
   ⚠️ (2026-08-10) 예전엔 `flex:1` 뿐이라 **화면 높이에서 아래 내용을 빼고 남는 만큼**이 그림 높이였다.
      화면이 짧은 휴대폰에서는 남는 자리가 얼마 없어 그림이 납작하게 눌리고 좌우가 심하게 잘렸다.
      → 최소 높이를 정해 준다. 넉넉한 화면에서는 예전처럼 남는 공간을 채우고(flex:1),
        짧은 화면에서는 그림이 이 높이를 지키고 페이지가 스크롤된다.
      svh = 주소창이 보이는 상태의 화면 높이(기기마다 다른 100vh 문제를 피한다). */
.service-hero { position:relative; flex:1 1 auto; width:100%; display:flex; align-items:flex-end; justify-content:center;
  min-height:300px; min-height:clamp(300px, 52svh, 560px); }
.service-header .header-inner { border-bottom: none; }
.service-hero-img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.service-hero-video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:none; }
.service-hero.has-video .service-hero-video { display:block; }
.service-hero.has-video .service-hero-img { display:none; }
.service-hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.0) 45%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0.92) 100%); }
.service-hero-content { position:relative; z-index:2; text-align:center; padding:0 24px 28px; color:#fff; }
/* ⚠️ (2026-08-10) 글자 크기를 화면 폭에 따라 늘었다 줄었다 하게 바꿨다.
   52px 고정이라 좁은 휴대폰에서 "미래 배우자 사주"가 넘쳐 두 줄로 깨지고 자간까지 벌어져 있었다.
   clamp(최소, 화면비례, 최대) = 작은 폰에서도 안 넘치고 큰 화면에서도 커지지 않는다.
   word-break:keep-all = 한글을 단어 한가운데서 끊지 않는다("미래 배우 / 자 사주" 방지). */
.service-hero-brand { font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-size:clamp(15px, 4.4vw, 19px); font-weight:400; color:#E7CE94; display:block; margin-bottom:2px; letter-spacing:.05em; text-shadow:0 1px 6px rgba(0,0,0,.95); }
.service-hero-title { font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-size:clamp(42px, 14vw, 68px); font-weight:400; line-height:1.12; margin:-2px 0 10px; letter-spacing:.03em; word-break:keep-all; color:#FFFFFF; text-shadow:0 2px 12px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.7); }
.service-hero-title.has-art { margin:0 0 6px; line-height:0; }
.service-hero-title-art { display:block; width:min(80vw, 330px); height:auto; margin:0 auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.service-hero-sub { font-size:clamp(13.5px, 3.9vw, 15px); font-weight:400; opacity:.9; letter-spacing:0.5px; word-break:keep-all; text-shadow:0 1px 6px rgba(0,0,0,0.5); }

/* CTA area */
.service-cta-area { position:relative; z-index:3; padding:0 16px 32px; background:linear-gradient(to bottom, rgba(10,10,10,0.0), rgba(10,10,10,1) 10%); }
/* 시작 화면 버튼 — 금가루 한지 + 낙관 + 반짝 (2026-09-21 JH, 시안판 «한지·낙관 9가지 + 반짝» 의 E4).
   (앞서 넣었던 B안 금박 판은 git 기록과 시안판에 남아 있다.) 그림 없이 CSS 로만 — 문구·폭이 바뀌어도 안 깨진다. */
.service-cta-btn { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:62px; padding:0 16px; border:0; border-radius:2px; cursor:pointer;
  background:radial-gradient(140% 120% at 30% 20%,#F7EEDA,#E8D9B8 70%,#D9C59C); color:#1A140C;
  box-shadow:inset 0 0 0 1px rgba(90,60,20,.35), inset 0 0 18px rgba(120,85,35,.25), 0 6px 18px rgba(0,0,0,.55);
  font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-size:21px; font-weight:400; letter-spacing:.1em; transition:transform .15s ease, filter .15s ease; }
.service-cta-btn > i { position:absolute; inset:0; display:block; pointer-events:none; }
/* 한지 결 — 잔 얼룩 무늬 */
.service-cta-btn .cta-grain { opacity:.25; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
/* 흩뿌린 금가루 */
.service-cta-btn .cta-flecks { opacity:.9; background-image:
  radial-gradient(1.6px 1.2px at 12% 30%,#C99B45 98%,transparent), radial-gradient(1px 1px at 20% 72%,#D9B25E 98%,transparent), radial-gradient(2px 1.4px at 33% 18%,#C99B45 98%,transparent),
  radial-gradient(1.2px 1.2px at 47% 80%,#D9B25E 98%,transparent), radial-gradient(1.8px 1.2px at 61% 24%,#C99B45 98%,transparent), radial-gradient(1px 1px at 72% 66%,#D9B25E 98%,transparent),
  radial-gradient(2px 1.5px at 86% 36%,#C99B45 98%,transparent), radial-gradient(1.3px 1px at 92% 78%,#D9B25E 98%,transparent), radial-gradient(1.4px 1px at 6% 82%,#C99B45 98%,transparent); }
.service-cta-btn .cta-text { position:relative; }
/* 붉은 낙관(命) — 글꼴에 없는 한자라 본명조로 찍힌다 */
.service-cta-btn .cta-seal { position:relative; flex:none; width:28px; height:28px; border-radius:3px; background:#B8322A; color:#F7EEDA;
  font-family:'Noto Serif KR',serif; font-size:15px; letter-spacing:0; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 2px #B8322A, inset 0 0 0 3px rgba(247,238,218,.7); transform:rotate(-4deg); }
/* 몇 초마다 한 번 빛이 스쳐 지나간다 — 한지가 밝아 금박 판 때보다 조금 진하게 */
.service-cta-btn::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%; pointer-events:none; z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent); animation:ys-cta-shine 3.2s ease-in-out infinite; }
@keyframes ys-cta-shine { 0%,55% { left:-60%; } 100% { left:130%; } }
@media (prefers-reduced-motion: reduce) { .service-cta-btn::after { animation:none; display:none; } }
.service-cta-btn:hover { filter:brightness(1.03); }
.service-cta-btn:active { transform:scale(0.98); filter:brightness(.97); }

/* Responsive
   ⚠️ (2026-08-10) 예전엔 "360px 이하일 때만" 글자를 줄이는 방식이라, 361~430px 짜리 대부분의
      휴대폰에서는 큰 글씨가 그대로 나와 넘쳤다. 이제 제목들은 clamp() 로 폭에 맞춰 계속 변한다.
      */
@media (min-width:481px) { #app-container { border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); } }

/* ============================================
   STEP INDICATOR
   ============================================ */
/* (2026-08-20) 단계 점(.step-indicator/.step-dot) 삭제 — 결과지·미리보기 둘 다 안 쓴다. */

/* ============================================
   STEP 1 - 정보 입력
   ============================================ */
.saju-input-hero { text-align:center; margin-bottom:28px; }
.saju-input-heading { font-family:var(--font-serif); font-size:24px; font-weight:900; line-height:1.4; color:var(--color-text-primary); letter-spacing:-0.5px; margin-bottom:8px; }
.saju-input-sub { font-size:14px; color:var(--color-text-secondary); }
.time-input-row { display:flex; align-items:center; gap:8px; }
.time-input-row input[type="number"] { flex:1; min-width:0; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:15px; font-family:var(--font-sans); color:var(--color-text-primary); background:var(--color-bg-card); outline:none; text-align:center; -moz-appearance:textfield; }
.time-input-row input[type="number"]::-webkit-outer-spin-button, .time-input-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.time-input-row input[type="number"]::placeholder { color:var(--color-text-light); }
.time-input-row input[type="number"]:focus { border-color:var(--color-primary); background:#1C1C1E; }
.time-input-row input:disabled { background:#27252D; color:var(--color-text-light); }
.time-unknown { white-space:nowrap; font-size:14px; color:var(--color-text-secondary); }

/* 생년월일 직접 입력 */
.date-input-row { display:flex; align-items:center; gap:8px; }
.date-input-row input { flex:1; min-width:0; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:15px; font-family:var(--font-sans); color:var(--color-text-primary); background:var(--color-bg-card); outline:none; text-align:center; -moz-appearance:textfield; }
.date-input-row input::-webkit-outer-spin-button, .date-input-row input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.date-input-row input::placeholder { color:var(--color-text-light); }
.date-input-row input:focus { border-color:var(--color-primary); background:#1C1C1E; }
.date-input-row input.year-input { flex:1.4; }
.date-sep { font-size:14px; color:var(--color-text-secondary); }
.input-hint { font-size:12px; color:var(--color-text-light); margin-top:2px; }

/* ===== 분석 로딩 화면 =====
   글자를 두지 않는다. 로고 하나와 가는 막대뿐 —
   설명을 늘어놓을수록 "기계가 일하는 중"으로 보인다. */
.loading-screen {
  min-height:78vh; min-height:78dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:40px 28px; gap:38px;
}

/* 로고 — 은은하게 숨 쉬고, 그 위로 빛이 한 번씩 훑고 지나간다 */
.load-mark { position:relative; display:inline-block; line-height:0; }
.load-mark-img {
  /* ⚠️ 로고 PNG 는 위아래 여백이 50% 라 실제 마크는 이 높이의 절반만 보인다.
     헤더 로고(36px)보다 훨씬 크게 잡아야 화면 중앙의 주인공으로 읽힌다. */
  height:112px; width:auto; object-fit:contain;
  filter:brightness(0) invert(1);      /* 흰 로고로 (원본은 어두운 PNG) */
  opacity:.5; animation:mark-breathe 3.2s ease-in-out infinite;
}
@keyframes mark-breathe { 0%,100% { opacity:.42; } 50% { opacity:.62; } }

/* 훑고 지나가는 빛. 로고 모양으로 오려내(mask) 글자 안에서만 번쩍이게 한다.
   ⚠️ mask-image 는 .load-mark-img 와 같은 상자·같은 맞춤(contain·center)이어야 어긋나지 않는다. */
.load-mark-shine {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 42%, rgba(255,255,255,.30) 47%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.30) 53%, transparent 58%);
  background-size:280% 100%; background-repeat:no-repeat;
  -webkit-mask-image:url('/images/yongsinrok-logo-white.png'); mask-image:url('/images/yongsinrok-logo-white.png');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:mark-shine 3.2s ease-in-out infinite;
}
@keyframes mark-shine {
  0%   { background-position:-90% 0; opacity:0; }
  18%  { opacity:1; }
  62%  { opacity:1; }
  72%, 100% { background-position:190% 0; opacity:0; }
}

/* 막대 + 퍼센트를 한 덩어리로 묶는다(로고와의 간격과 따로 놀지 않게) */
.load-progress { display:flex; flex-direction:column; align-items:center; gap:12px; }

/* 퍼센트 — 있는 듯 없는 듯 작게. 전체 개수를 알기 전까지는 아예 안 보인다.
   숫자 폭이 고정(tabular-nums)이라 9%→10% 로 넘어갈 때 글자가 흔들리지 않는다. */
.loading-pct {
  margin:0; min-height:1em;
  font-size:11px; letter-spacing:.1em; font-variant-numeric:tabular-nums;
  color:rgba(240,216,155,.5);
  opacity:0; transition:opacity .5s ease;
}
.loading-pct.show { opacity:1; }

/* 막대 — 머리카락처럼 가늘게. 두꺼우면 그것만 눈에 띈다. */
.loading-bar {
  width:180px; max-width:56%; height:2px; border-radius:2px; overflow:hidden;
  background:rgba(240,216,155,.12);
}
.loading-bar-fill {
  width:32%; height:100%; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--color-primary), transparent);
  animation:loadbar 1.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes loadbar { 0% { transform:translateX(-120%); } 100% { transform:translateX(420%); } }

/* 전체 풀이 수를 알고 난 뒤 — 막대가 흐르지 않고 실제 진행만큼 "찬다".
   (숫자는 띄우지 않는다. 차오르는 길이만으로 충분히 읽힌다) */
.loading-bar.determinate .loading-bar-fill {
  width:0%; animation:none; transform:none;
  background:var(--color-primary);
  box-shadow:0 0 12px rgba(240,216,155,.5);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .load-mark-img, .load-mark-shine, .loading-bar-fill { animation:none; }
  .load-mark-img { opacity:.62; }
  .load-mark-shine { opacity:0; }
}

/* ===== 결과 페이지 — 전통(한지·수묵·금빛) 테마 ===== */
#page-saju-result { background:#EDECEA; }
#page-saju-result .sub-header { background:#E7E6E3; border-bottom:1px solid #D2D1CD; }
#page-saju-result .sub-title, #page-saju-result .back-btn { color:#2B2A28; }
#page-saju-result .page-body {
  /* 한지 바탕 + 상단 금빛 달무리 + 은은한 청해파(물결) 텍스처 */
  background-color:#EDECEA;
  background-image:
    radial-gradient(circle at 50% -30px, rgba(199,168,106,0.20), transparent 240px),
    radial-gradient(circle at 50% 100%, transparent 10px, rgba(199,168,106,0.06) 11px, rgba(199,168,106,0.06) 12px, transparent 13px);
  background-size:auto, 26px 13px;
}
#page-saju-result .result-name { color:#2B2A28; }
#page-saju-result .result-info { color:#6b665c; }
#page-saju-result .result-table .saju-table { background:#F6F6F5; border-color:#D5D4D0; }
#page-saju-result .result-table .saju-table th { color:#8a8170; }
/* 결과 카드 전반을 한지 종이 느낌으로 */
#page-saju-result .result-card { background:#F6F6F5; border:1px solid #D5D4D0; box-shadow:0 4px 14px rgba(80,60,20,0.05); }
#page-saju-result .result-card-title { color:#2B2A28; }
#page-saju-result .result-card-text { color:#46423b; }

/* 전통 히어로 배너 */
.trad-banner { border-radius:14px; overflow:hidden; margin-bottom:16px; border:1px solid #D5D4D0; background:#E5E4E1; line-height:0; }
.trad-banner svg { width:100%; height:auto; display:block; }

/* 챕터 = 한지 한 페이지 */
.chapter-page {
  position:relative;
  background:#F6F6F5;
  border:1px solid #D5D4D0;
  border-radius:14px;
  padding:24px 20px 28px;
  min-height:60vh;
  box-shadow:0 6px 22px rgba(80,60,20,0.07);
  overflow:hidden;
}
.chapter-page::before { /* 상단 청해파(물결) 띠 */
  content:""; position:absolute; top:0; left:0; right:0; height:90px; pointer-events:none;
  background-image:radial-gradient(circle at 50% 100%, transparent 9px, rgba(199,168,106,0.16) 10px, rgba(199,168,106,0.16) 11px, transparent 12px);
  background-size:24px 12px;
  -webkit-mask-image:linear-gradient(#000, transparent);
  mask-image:linear-gradient(#000, transparent);
}
.chapter-head { position:relative; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid #D5D4D0; }
.chapter-moon { position:absolute; top:-4px; right:0; width:42px; height:42px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #C9C6BD, #DFC684 68%, #DFC684);
  box-shadow:0 0 18px rgba(199,168,106,0.45); }
.chapter-no { display:block; font-size:12px; letter-spacing:4px; color:#DFC684; font-weight:700; }
.chapter-title { font-family:var(--font-serif); font-size:21px; font-weight:800; color:#2B2A28; margin-top:5px; line-height:1.45; padding-right:52px; word-break:keep-all; }
.chapter-body .result-card-text { color:#3c3933; font-size:15px; line-height:2.0; margin:0 0 12px; }
.chapter-body .result-card-title { color:#655F54; font-size:16px; margin:18px 0 8px; } /* ### 소제목 = 단청 갈색 */
.chapter-body ul.result-card-text { padding-left:18px; }
.chapter-body li { margin:6px 0; }
#page-saju-result .result-section { gap:22px; }
#page-saju-result .result-actions .btn-secondary { color:#6b665c; border-color:#D5D4D0; }
/* 책자 흐름: 표지가 이름/사주표를 대신하므로 상단 중복 요소 숨김 */
#page-saju-result .result-header, #page-saju-result .result-table { display:none; }

/* === 책자: 표지(커버) === */
.book-cover { position:relative; min-height:88vh; min-height:88dvh; border-radius:16px; overflow:hidden; padding:38px 22px 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:radial-gradient(circle at 50% 6%, #3A4945, #292929 72%); border:1px solid #1C1C1C;
  box-shadow:0 10px 30px rgba(0,0,0,0.18); }
.cover-seal { display:inline-block; color:#DFC684; border:1px solid #DFC684; border-radius:6px; padding:3px 11px; font-size:12px; letter-spacing:5px; margin-bottom:18px; }
.cover-title { font-family:var(--font-serif); color:#E8E6E3; font-size:33px; font-weight:800; line-height:1.42; margin:0 0 10px; letter-spacing:1px; }
.cover-tagline { color:#B4B0A8; font-size:13px; letter-spacing:1px; }
.cover-sub { color:#9fb3aa; font-size:12px; letter-spacing:1px; margin-top:14px; }
.cover-eight { color:#DFC684; font-size:15px; letter-spacing:3px; margin-top:6px; font-weight:600; }
.cover-art { margin-top:16px; width:100%; max-width:360px; }
.cover-art svg { width:100%; height:auto; display:block; }

/* === 책자: 목차 === */
.toc-page { background:#F6F6F5; border:1px solid #D5D4D0; border-radius:14px; padding:30px 22px; min-height:58vh; box-shadow:0 6px 22px rgba(80,60,20,0.07); }
.toc-head { text-align:center; margin-bottom:18px; }
.toc-kicker { display:block; color:#DFC684; letter-spacing:7px; font-size:12px; }
.toc-page h2 { font-family:var(--font-serif); color:#2B2A28; font-size:24px; margin:6px 0 0; }
.toc-list { list-style:none; padding:0; margin:0; }
.toc-list li { display:flex; align-items:baseline; gap:12px; padding:12px 2px; border-bottom:1px dashed #D5D4D0; }
.toc-no { color:#DFC684; font-size:12px; letter-spacing:2px; white-space:nowrap; min-width:62px; }
.toc-title { color:#3c3933; font-size:15px; font-weight:600; word-break:keep-all; }

/* === 책자: 간지(부 구분) === */
.divider-page { min-height:56vh; border-radius:16px; display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 50% 38%, #3A4945, #292929 74%); border:1px solid #1C1C1C; box-shadow:0 8px 26px rgba(0,0,0,0.16); }
.divider-inner { display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px; }
.divider-moon { width:52px; height:52px; border-radius:50%; margin-bottom:10px;
  background:radial-gradient(circle at 35% 35%, #C9C6BD, #DFC684 70%, #DFC684); box-shadow:0 0 28px rgba(199,168,106,0.5); }
.divider-no { color:#DFC684; letter-spacing:7px; font-size:14px; }
.divider-name { font-family:var(--font-serif); color:#E8E6E3; font-size:28px; font-weight:800; margin:2px 0 0; }
.divider-sub { color:#9fb3aa; font-size:13px; margin:8px 0 0; }

/* === 책자: 사주 개요 페이지 === */
.overview-page { background:#F6F6F5; border:1px solid #D5D4D0; border-radius:14px; padding:24px 18px; box-shadow:0 6px 22px rgba(80,60,20,0.07); }
.overview-title { font-family:var(--font-serif); color:#2B2A28; font-size:20px; margin:0 0 16px; text-align:center; }
.overview-page .result-card { border:none; box-shadow:none; background:transparent; padding:6px 0; }

/* ===== 인쇄 / PDF 저장 ===== */
@media print {
  /* ⚠️ (2026-09-03) `background` 를 @page 에 주면 크롬이 **여백 부분까지 종이 전체**를 칠한다.
     사장님: "어느정도 여백을 주고 용지 배경색을 검정으로"
     ⭐ 이 한 줄로 좌우 흰 띠가 사라진다. 실측 — 넣기 전 사방 12mm 흰색 → 넣은 뒤 0.0mm.
     ⭐ 여백을 0 으로 만드는 방법도 있지만 그러면
        ① 글자가 종이 끝까지 붙어 한 줄이 90자를 넘고(못 읽는다)
        ② 그림이 210mm 폭으로 다시 그려져 **파일이 7.5MB → 24.2MB** 가 된다(메일 첨부 한계 초과).
        여백은 그대로 두고 종이만 검게 칠하는 이 방법이 파일 크기도 그대로다.
     ⚠️ 손님이 직접 [PDF로 저장]을 누를 때는 크롬 인쇄창의 **"배경 그래픽"** 이 켜져 있어야 검게 나온다.
        서버가 만드는 메일 첨부본은 printBackground:true 라 항상 검다. */
  @page { size: A4 portrait; margin: 12mm; background: #000; }

  /* ── 테두리를 「글 상자」가 아니라 「종이 한 쪽」마다 그린다 (2026-09-03) ──
     사장님: "테두리에 무늬를 꾸며둔 부분들은 A4 위 아래 동일하게 들어가면 좋겠다.
              내용에 따라 아래쪽 위치가 계속 달라져."
     원인 — 테두리가 **글 상자(.wt-page)** 에 걸려 있어 글이 길면 상자도 같이 길어진다.
            그래서 아래 선의 위치가 쪽마다 다르고, 두 쪽으로 넘어가면 아랫변이 아예 사라졌다.
     고침 — `box-decoration-break: clone`.
            쪽이 갈려도 **조각마다 테두리와 안쪽 여백을 새로 그린다.**
            실측 — 3개 쪽 전부 위 12.0mm · 아래 12.4mm 로 동일했다.
     ⭐ 덤으로 사장님이 지적한 **"넘어간 쪽이 상단에 겹쳐 보인다"** 도 같이 풀린다.
        padding 이 조각마다 적용돼서 첫 줄이 테두리 선을 밟지 않는다.
     ⚠️ 먼저 `position: fixed` 로 쪽마다 테두리를 그려 봤는데(그것도 되긴 된다),
        **안쪽 여백을 못 만들어** 첫 줄이 테두리 선 위에 얹혔다. 그래서 이 방식으로 바꿨다.
     ⚠️ 여백을 만들려고 테두리를 @page 여백 **밖으로** 미는 것도 시도했으나
        크롬이 쪽 영역에 맞춰 **잘라 버린다**(좌우 변이 통째로 사라졌다). */
  /* ⚠️ (2026-09-03) 화면 높이(vh) 기준 최소높이를 인쇄에서는 끈다.
     맺음 쪽에 `min-height: 72vh` 가 걸려 있는데, 인쇄용 화면 높이(1754px)의 72% = 1263px 라
     A4 한 쪽(1032px)보다 커서 **맺음말 한 줄짜리 쪽이 두 쪽으로 넘어갔다**(2026-09-03 실측).
     종이 높이는 아래 script.js 가 재서 맞춘다. */
  /* ⚠️ `.wt-page` 전체에 걸면 안 된다 — `!important` 가 **JS 가 넣는 inline 높이까지 눌러서**
     "종이 끝까지 채우기"가 통째로 무력해진다(2026-09-03에 실제로 겪음).
     아래 script.js 는 `setProperty(..., 'important')` 로 넣으므로 서로 부딪히지 않게 여기는 맺음 쪽만. */
  /* ⚠️ `!important` 를 빼야 한다 — 아래 script.js 가 넣는 inline 높이(쪽 끝까지 채우기)를
     눌러 버려서 **맺음 쪽만 테두리가 일찍 닫혔다**(2026-09-03).
     `#id .class` 라 화면용 `min-height: 72vh` 는 이것만으로도 이긴다. */
  #page-saju-result .wt-closing { min-height: 0; }

  /* ⭐ 두 가지를 **함께** 쓴다. 하나씩만 쓰면 각각 한쪽이 모자란다.
       ① `position: fixed` 프레임 — 쪽마다 **종이 끝까지** 같은 자리에 그려진다.
          (fixed 만 쓰면 안쪽 여백을 못 만들어 첫 줄이 테두리 선에 얹힌다)
       ② `box-decoration-break: clone` + 투명 테두리/여백 — **조각마다** 안쪽 여백을 다시 만든다.
          (clone 만 쓰면 테두리가 글 상자를 따라 닫혀 마지막 쪽 아래가 빈다) */
  #page-saju-result .wt-page:not(.wt-cover):not(.wt-chap-cover) {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 7mm 8mm !important;
    /* 한 쪽 안에 끝나는 풀이는 **종이 끝까지** 테두리가 내려가게 한다.
       ⚠️ 한 쪽(273mm)보다 작게 잡아야 빈 쪽이 안 생긴다. 여러 쪽짜리 풀이에는 영향이 없다
          (이미 더 길어서 min-height 가 무시된다). */
    box-sizing: border-box;
    min-height: 268mm;
    /* ⚠️ 글 상자 바탕이 종이(@page #000)보다 아주 살짝 밝아서, 상자가 끝나는 자리에
       **가로 이음매**가 보였다(맺음 쪽에서 특히). 인쇄에서는 종이 색이 그대로 비치게 둔다. */
    background: transparent !important;
  }
  /* ── 표지·간지에는 문양 테두리를 두르지 않는다 (2026-09-03) ──
     사장님: "표지랑 간지에는 주변 테두리 무늬를 빼는게 좋을 것 같아."
     ⭐ 방법 = **아예 안 그린다.** 테두리는 위의 `.wt-page:not(.wt-cover):not(.wt-chap-cover)` 에만 걸려 있다.

     ⚠️⚠️ **`position: fixed` 로 쪽마다 그리는 방식은 쓰지 말 것** (2026-09-03에 두 번 겪음).
        fixed 는 **모든 쪽에 찍혀서** 표지·간지에도 테두리가 들어간다 — 특정 쪽만 끄는 수가 없다.
        우회로로 「표지·간지 위에 검은 덮개를 얹어 지우기」를 썼는데,
        **덮개가 앞뒤 쪽으로 넘쳐 이웃 쪽의 위·아래를 잘라먹었다.**
        인쇄에서 절대배치 요소는 자기 쪽 밖으로 나가도 잘리지 않고 **옆 쪽에 그대로 그려진다.**
        (사장님: "간지 다음 장 상단이 잘려 있어" · "여기는 아래쪽이 잘리네")
     📌 테두리는 **글 상자에** 건다 — 그래야 「어느 쪽에 그릴지」를 선택자로 고를 수 있다.
     ⚠️ 값 = 여러 쪽에 걸친 풀이의 마지막 쪽은 글이 끝나는 자리에서 테두리가 닫힌다. */

  /* ── 카드는 한 쪽 안에 통째로 (2026-09-03) ──
     사장님: "카드들은 한페이지 안에 다 들어갈 수 있도록"
     「다섯 기운」 카드가 아래 두 칸만 다음 쪽으로 넘어가 있었다. */
  /* ⚠️ `break-inside: avoid` 는 **한 쪽에 들어갈 때만** 지켜진다.
     「다섯 기운」 카드는 머리(35mm)까지 더하면 265mm 라 한 쪽(259mm)을 넘어서,
     크롬이 그냥 쪼개 버렸다(기신·용신 칸만 다음 쪽으로 떨어졌다).
     → 인쇄에서만 카드를 **0.85배**로 줄여 한 쪽에 들어가게 한다.
     ⚠️ 본문 글자는 줄이지 않는다 — 카드는 원래 글자가 커서 0.85 로도 충분히 읽힌다. */
  #page-saju-result .wt-puri-card {
    zoom: 0.85;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* ── 쪽 경계에서 문단이 「반 줄」로 잘리지 않게 (2026-09-03) ──
     사장님: "내용이 길어서 넘어가는 부분도 여백없이 상단에 겹쳐져 보여서 이상해."
     원인 — 문단 한가운데서 쪽이 갈리면 윗쪽 마지막 줄과 아랫쪽 첫 줄이 **반쯤 잘려** 보이고,
            그 잘린 줄이 테두리 선에 딱 붙는다.
     고침 — 문단·목록·카드·표를 **통째로** 다음 쪽으로 넘긴다. 그러면 쪽 첫 줄이 늘 온전한 줄이다.
     ⚠️ 테두리를 여백 **밖으로** 밀어 숨통을 만드는 방법은 안 된다 —
        크롬이 고정 요소를 쪽 영역에 맞춰 **잘라 버린다**(2026-09-03 실측: 좌우 변이 통째로 사라졌다). */
  /* ⚠️ (2026-09-03 수정) **문단(.wt-p)은 쪼개도 된다.**
     전에는 문단까지 묶어 뒀는데, 그러면 ① 쪽수를 미리 셀 수 없고(덩어리가 통째로 넘어가서)
     ② 그 탓에 「마지막 쪽 테두리 채우기」계산이 계속 어긋났다.
     원래 문단을 묶었던 까닭은 "첫 줄이 반쯤 잘려 보인다" 였는데,
     그건 **테두리에 안쪽 여백이 없어서**였고 지금은 여백(7mm)이 있어 줄 단위로 갈려도 멀쩡하다.
     → 표·카드처럼 **정말 쪼개지면 안 되는 것만** 남긴다. */
  #page-saju-result table,
  #page-saju-result .bw,
  #page-saju-result .cm-row { break-inside: avoid; page-break-inside: avoid; }
  /* 제목만 남고 본문이 다음 쪽으로 넘어가는 것도 막는다 */
  /* ⚠️ (2026-09-03) 사장님: "카드가 제1장 아래로 들어가야 하는 것 같은데 따로 분리가 되어있어."
     까닭 — 「제 N 장」머리만 앞 쪽에 남고 제목·카드가 다음 쪽으로 넘어갔다.
            카드에 `break-inside: avoid` 를 걸어 뒀는데, 남은 자리에 카드가 안 들어가자
            **카드만** 넘어가고 머리는 그 자리에 남은 것이다.
     고침 — 머리·제목 뒤에서는 쪽을 넘기지 않는다. 뒤따르는 것과 함께 움직인다. */
  #page-saju-result .wt-puri-head,
  #page-saju-result .wt-chap-head,
  #page-saju-result .wt-puri-title,
  #page-saju-result .wt-chap-title { break-after: avoid; page-break-after: avoid; }
  /* ⚠️ `break-after` 만으로는 부족했다 — 머리 **안에서** 쪼개져
     「제 1 장」만 앞 쪽에 남고 제목이 다음 쪽으로 갔다(2026-09-03 실측).
     머리는 통째로 움직여야 한다. */
  #page-saju-result .wt-puri-head,
  #page-saju-result .wt-chap-head { break-inside: avoid; page-break-inside: avoid; }

  /* 맨 끝 빈 쪽 — 마지막 장 뒤에도 「쪽 넘김」이 걸려 있어 빈 종이 한 장이 더 나왔다. */
  #page-saju-result .wt-slot:last-child { break-after: auto !important; page-break-after: auto !important; }

  /* ── 간지(장 표지) — A4 에 맞춰 키운다 (2026-09-03) ──
     사장님: "간지 부분에 소목차들이 사라져있고, 글자 여백 위치가 이상해 적절하게 글씨를 키우고 조정해줘."
     화면(폰 390px)용 크기를 A4(186mm ≒ 703px)에 그대로 쓰면 글자가 상대적으로 작아 보인다.
     간지는 한 쪽을 통째로 쓰는 자리이므로 크게 잡아도 넘치지 않는다. */
  #page-saju-result .wt-chap-cover .wt-chap-title {
    text-align: center; font-size: 24px; margin-top: 18px; line-height: 1.4;
  }
  #page-saju-result .wt-chap-cover .wt-chap-no { font-size: 28px; }
  #page-saju-result .wt-chap-cover .wt-chap-body { margin-top: 14px; }
  #page-saju-result .wt-chap-cover .wt-chap-intro { font-size: 16px; line-height: 1.85; text-align: center; }
  /* 사장님: "소목차 부분 좌 우측에 여백을 더 주면 좋을 것 같아" */
  #page-saju-result .wt-chap-cover .wt-chap-list { padding: 0 10mm; }
  #page-saju-result .wt-chap-cover .wt-chap-list li { font-size: 16px; padding: 11px 12px; }
  #page-saju-result .wt-chap-cover .wt-chap-list li > span { width: 27px; height: 27px; font-size: 13px; }
  /* 그림도 A4 폭에 맞춘다 — 화면용 340px 상자를 그대로 쓰면 A4 에서 우표만 해진다 */
  /* ⚠️ 120mm 로 잡았더니 소목차 마지막 줄이 아래 테두리에 닿았다(2026-09-03 실측). 96mm 로 내린다.
     간지는 「그림 + 제 N 장 + 장 제목 + 소목차」가 한 쪽에 다 들어가야 한다. */
  #page-saju-result .wt-chap-cover .wt-hero { max-width: 96mm; margin: 0 auto 16px; }
  /* ⚠️ (2026-09-03) 여기가 **`#fff`** 였다. 결과지가 밝은 책자였던 시절의 흔적이다.
     사장님: "전체적으로 좌 우측에 흰색 줄이 생기는데 왜그런거야" · "마지막 페이지도 아래 흰색 여백이 생기는데"
     까닭 — `#app-container` 가 흰 바탕이라, 검은 본문 상자가 덮지 못하는 자리마다 흰색이 비쳤다.
            ① 본문 상자보다 몇 px 넓은 좌우 → **세로 흰 줄**
            ② 맺음말처럼 내용이 짧아 아래가 남는 쪽 → **아래 흰 덩어리**
     고침 — 종이(@page)와 같은 검정으로 맞춘다. */
  html, body, #app-container { background:#000 !important; box-shadow:none !important; }
  /* 배경색·그라데이션을 인쇄에 그대로 (표지/간지의 청록, 한지 크림) */
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  /* 앱 UI 요소 숨김 — 결과 본문만 출력 */
  #main-header, .side-menu, .side-menu-overlay, #toast,
  #page-saju-result .sub-header,
  #page-saju-result .result-actions { display:none !important; }
  .page:not(#page-saju-result) { display:none !important; }
  #page-saju-result { display:block !important; }
  #page-saju-result .page-body { padding:0 !important; background:#fff !important; }
  #page-saju-result .result-section { gap:0 !important; }

  /* 표지·목차·개요·간지·챕터를 각각 새 페이지로 (표지는 1페이지이므로 break-after 불필요) */
  .book-cover { min-height:auto !important; margin:0 !important; border-radius:0 !important; border:none !important; }
  .toc-page, .overview-page, .divider-page, .chapter-page,
  #page-saju-result > .page-body > .result-section > .result-card,
  #page-saju-result .result-section > details {
    break-before:page; page-break-before:always;
    min-height:auto !important; margin:0 !important; border-radius:0 !important;
    box-shadow:none !important;
  }
  .divider-page { min-height:60vh !important; }
  /* 한 항목이 페이지 중간에 잘리는 것 최소화 */
  .toc-list li, .chapter-head, .result-card-title { break-inside:avoid; }
  .chapter-page { padding:8mm 4mm !important; }
  /* 접이식 사주표: 인쇄 시 항상 펼침 */
  #page-saju-result details > *:not(summary) { display:revert !important; }
  #page-saju-result details summary { list-style:none; }
}
.gender-select { display:flex; gap:10px; }
.gender-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border:1.5px solid var(--color-border); border-radius:var(--radius-md); font-size:15px; font-weight:500; color:var(--color-text-secondary); background:var(--color-bg-card); cursor:pointer; transition:all var(--transition-fast); }
.gender-btn.active { border-color:var(--color-primary); color:var(--color-primary); background:rgba(127,90,240,0.06); font-weight:700; }
.gender-btn.active svg { stroke:var(--color-primary); }
.saju-submit-btn { margin-top:16px; padding:16px; font-size:17px; letter-spacing:0.5px; }

/* 궁합 상대방 입력 */
.pgender-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border:1.5px solid var(--color-border); border-radius:var(--radius-md); font-size:15px; font-weight:500; color:var(--color-text-secondary); background:var(--color-bg-card); cursor:pointer; transition:all var(--transition-fast); }
.pgender-btn.active { border-color:var(--color-primary); color:var(--color-primary); background:rgba(127,90,240,0.06); font-weight:700; }
.pgender-btn.active svg { stroke:var(--color-primary); }
.partner-divider { display:flex; align-items:center; text-align:center; margin:26px 0 6px; color:var(--color-primary); font-weight:700; font-size:15px; }
.partner-divider::before, .partner-divider::after { content:''; flex:1; height:1px; background:var(--color-border); }
.partner-divider span { padding:0 14px; white-space:nowrap; }

/* ============================================
   STEP 2 - 미리보기
   ============================================ */
.preview-user-info { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-md); margin-bottom:20px; font-size:14px; color:var(--color-text-secondary); }
.preview-user-info .user-name { font-weight:700; color:var(--color-text-primary); font-size:16px; }
.preview-user-info .user-detail { font-size:13px; }

.saju-table-wrap { background:#1C1C1C; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:20px 16px; margin-bottom:20px; }
.saju-table-title { font-family:var(--font-serif); font-size:16px; font-weight:700; text-align:center; margin-bottom:16px; color:var(--color-text-primary); }
.saju-table { width:100%; border-collapse:collapse; text-align:center; }
.saju-table th { font-size:13px; font-weight:600; color:var(--color-text-secondary); padding:8px 4px; border-bottom:2px solid var(--color-border); }
.saju-table td { padding:14px 4px; font-size:24px; font-weight:800; font-family:var(--font-serif); }
.saju-cheongan td { color:var(--color-primary); border-bottom:1px solid var(--color-border); }
.saju-jiji td { color:#899F91; }

.preview-section { position:relative; margin-bottom:24px; overflow:hidden; }
.preview-section-title { font-size:16px; font-weight:700; margin-bottom:12px; color:var(--color-text-primary); }
.preview-text { font-size:14px; line-height:1.8; color:var(--color-text-secondary); word-break:keep-all; }
.preview-blur-overlay { position:relative; margin-top:-20px; padding-top:60px; background:linear-gradient(to bottom, rgba(13,12,21,0) 0%, rgba(13,12,21,0.85) 30%, #101010 60%); text-align:center; padding-bottom:8px; }
.blur-text { font-size:14px; font-weight:600; color:var(--color-primary-light); padding:12px 20px; background:rgba(127,90,240,0.08); border-radius:var(--radius-sm); display:inline-block; }

.preview-cta-area { position:sticky; bottom:0; background:var(--color-bg); padding:16px 0 8px; border-top:1px solid var(--color-border); }
.preview-price-row { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:12px; }
.preview-price-original { font-size:14px; color:var(--color-text-light); text-decoration:line-through; }
.preview-price-discount { font-size:16px; font-weight:800; color:#B4736A; }
.preview-price-sale { font-size:20px; font-weight:800; color:var(--color-text-primary); }

/* ============================================
   STEP 3 - 결제
   ============================================ */
.payment-order-summary { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:18px 16px; margin-bottom:24px; }
.payment-summary-title { font-size:16px; font-weight:700; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--color-border); }
.payment-summary-row { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--color-text-secondary); padding:6px 0; }
.payment-summary-row.total { font-size:16px; font-weight:700; color:var(--color-text-primary); padding-top:10px; margin-top:6px; border-top:1px solid var(--color-border); }

.payment-phone-section { margin-bottom:24px; }
.payment-section-title { font-size:16px; font-weight:700; margin-bottom:4px; }
.payment-section-desc { font-size:13px; color:var(--color-text-light); margin-bottom:12px; }

.payment-method-section { margin-bottom:24px; }
.payment-methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.pay-method-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:18px 12px; border:1.5px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg-card); cursor:pointer; transition:all var(--transition-fast); font-size:13px; font-weight:500; color:var(--color-text-secondary); }
.pay-method-btn.active { border-color:var(--color-primary); color:var(--color-primary); background:rgba(127,90,240,0.04); font-weight:700; }
.pay-method-btn svg { stroke:currentColor; }
.pay-icon-text { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; }
.kakao-pay .pay-icon-text { background:#FEE500; color:#3C1E1E; }
.naver-pay .pay-icon-text { background:#03C75A; color:#fff; }
.toss-pay .pay-icon-text { background:#0064FF; color:#fff; }
.kakao-pay.active { border-color:#75735F; background:#F4F3F1; color:#3C1E1E; }
.naver-pay.active { border-color:#03C75A; background:#E6FFF0; color:#026B34; }
.toss-pay.active { border-color:#0064FF; background:#F1F2F4; color:#0047B3; }

/* ============================================
   STEP 4 - 풀이 결과
   ============================================ */
.result-header { text-align:center; margin-bottom:20px; }
.result-name { font-family:var(--font-serif); font-size:24px; font-weight:900; color:var(--color-text-primary); margin-bottom:4px; }
.result-info { font-size:14px; color:var(--color-text-secondary); }

.result-table { margin-bottom:24px; }
.result-table .saju-table td { font-size:28px; }

.result-section { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.result-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:18px 16px; }
.result-card-title { font-size:16px; font-weight:700; color:var(--color-text-primary); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.result-card-text { font-size:14px; line-height:1.8; color:var(--color-text-secondary); word-break:keep-all; }

.result-actions { display:flex; flex-direction:column; gap:8px; padding-top:8px; }

/* ============================================
   궁합 결과 패널 (한지/금빛 테마)
   ============================================ */
.compat-panel { background:linear-gradient(180deg,#F5F4F3 0%,#EAE9E6 100%); border:1px solid #F0D89B; border-radius:16px; padding:22px 18px; margin-bottom:22px; box-shadow:0 4px 18px rgba(120,90,30,0.08); }
.compat-title { text-align:center; font-family:var(--font-serif); font-size:20px; font-weight:900; color:#8E8C88; margin-bottom:18px; }
.compat-score-wrap { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:18px; }
.compat-ring { width:118px; height:118px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.compat-ring-inner { width:90px; height:90px; border-radius:50%; background:#F5F4F3; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px #F0D89B; }
.compat-score-num { font-family:var(--font-serif); font-size:38px; font-weight:900; color:#DFC684; line-height:1; }
.compat-score-num span { font-size:15px; font-weight:700; margin-left:2px; }
.compat-grade { text-align:left; }
.compat-grade-label { font-size:21px; font-weight:900; color:#46433E; margin-bottom:4px; }
.compat-grade-tone { font-size:14px; color:#726E68; }
.compat-people { display:flex; align-items:center; justify-content:center; gap:18px; padding:14px 0; border-top:1px dashed #F0D89B; border-bottom:1px dashed #F0D89B; margin-bottom:16px; }
.compat-person { text-align:center; }
.cp-name { font-size:17px; font-weight:800; color:#3A3834; }
.cp-el { font-size:14px; color:#DFC684; font-weight:700; margin-top:2px; }
.compat-amp { font-size:22px; color:#B9ACAC; }
.compat-relation { margin-bottom:14px; }
.compat-relation-kind { font-size:15px; font-weight:700; color:#46433E; margin-bottom:6px; }
.compat-relation-kind strong { color:#DFC684; }
.compat-relation-desc { font-size:14px; line-height:1.75; color:#58554F; word-break:keep-all; }
.compat-chips { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.rel-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.rel-label { font-size:13px; font-weight:700; color:#726E68; margin-right:4px; }
.rel-chip { display:inline-block; padding:4px 10px; border-radius:14px; font-size:12px; font-weight:700; }
.rel-harmony { background:#E9EAE8; color:#556054; border:1px solid #D3D7D1; }
.rel-tension { background:#EDEAE9; color:#6B5754; border:1px solid #DDD8D7; }
.compat-points { list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:8px; }
.compat-points li { position:relative; padding-left:18px; font-size:13.5px; line-height:1.7; color:#46433E; word-break:keep-all; }
.compat-points li::before { content:'✦'; position:absolute; left:0; top:0; color:#F0D89B; }
.compat-note { font-size:12px; color:#8C8270; line-height:1.6; text-align:center; }

/* ============================================
   사주 등급 카드 (미리보기 후킹: 현재 → 잠재 등급)
   ============================================ */
.grade-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:20px 16px; margin-bottom:20px; position:relative; overflow:hidden; }
.grade-card::before { content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 80% 0%, rgba(245,200,66,0.10), transparent 60%); pointer-events:none; }
.grade-card-title { font-size:16px; font-weight:800; color:var(--color-text-primary); margin-bottom:16px; text-align:center; position:relative; }
.grade-flow { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; position:relative; }
.grade-badge { flex:1; max-width:132px; text-align:center; padding:14px 8px; border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid var(--color-border); }
.grade-potential { border-color:rgba(245,200,66,0.5); background:rgba(245,200,66,0.06); box-shadow:0 0 22px rgba(245,200,66,0.13); }
.grade-badge-cap { font-size:12px; color:var(--color-text-secondary); margin-bottom:6px; font-weight:600; }
.grade-potential .grade-badge-cap { color:#F0D89B; }
.grade-letter { font-family:var(--font-serif); font-size:42px; font-weight:900; line-height:1; margin-bottom:4px; }
.grade-letter.glow { text-shadow:0 0 16px currentColor; }
.tier-S { color:#F0D89B; } .tier-A { color:#B5B1BF; } .tier-B { color:#899F91; } .tier-C { color:#929FA6; } .tier-D { color:#969AA2; }
.grade-name { font-size:13px; font-weight:700; color:var(--color-text-primary); }
.grade-score { font-size:12px; color:var(--color-text-secondary); margin-top:2px; }
.grade-arrow { text-align:center; color:#F0D89B; flex-shrink:0; }
.grade-arrow-icon { font-size:18px; line-height:1; animation:gradePulse 1.6s ease-in-out infinite; }
.grade-arrow-text { font-size:10px; color:var(--color-text-secondary); margin-top:2px; line-height:1.3; }
@keyframes gradePulse { 0%,100%{ transform:translateY(0); opacity:0.7; } 50%{ transform:translateY(-3px); opacity:1; } }
.grade-hook { font-size:13.5px; line-height:1.7; color:var(--color-text-secondary); text-align:center; word-break:keep-all; position:relative; }
.grade-hook b { color:var(--color-text-primary); }
.grade-up { color:#F0D89B !important; }
.grade-how { display:block; margin-top:6px; font-size:12px; color:var(--color-text-secondary); }


/* ====== 카테고리 필터 · 제품 배지/후킹 ====== */
.prod-filter { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:18px; -webkit-overflow-scrolling:touch; }
.prod-filter::-webkit-scrollbar { display:none; }
.pchip { flex:0 0 auto; padding:8px 15px; border-radius:999px; border:1px solid var(--color-border); background:var(--color-bg-card); color:var(--color-text-secondary); font-size:13px; font-weight:600; cursor:pointer; transition:all var(--transition-fast); }
.pchip.active { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-on-primary); }
.prod-badge { display:inline-block; font-size:11px; font-weight:800; padding:2px 7px; border-radius:6px; margin-right:5px; vertical-align:middle; letter-spacing:.3px; }
.badge-free { background:#53665A; color:#fff; }
.badge-hot { background:#A48F93; color:#fff; }
.badge-new { background:var(--color-primary); color:var(--color-on-primary); }
.product-hook { color:var(--color-primary-light); font-size:13.5px; font-weight:700; margin:4px 0 6px; line-height:1.4; }

/* ============================================
   쇼핑몰형 상품 그리드 (타이트사주 벤치마크)
   ============================================ */
.product-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:6px; }
.pcard { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform var(--transition-fast), border-color var(--transition-fast); display:flex; flex-direction:column; }
.pcard:active { transform:scale(0.98); }
.pcard:hover { border-color:var(--color-primary); }
.pcard-thumb { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; }
.pcard-thumb img { width:100%; height:100%; object-fit:cover; }
.pcard-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#2A2B2E; }
.pcard-thumb-ph .pcard-thumb-logo { width:52%; max-width:120px; height:auto; object-fit:contain; opacity:.42; filter:grayscale(1) brightness(2.4); }
.pcard-thumb-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.78) 100%); }
.pcard-badges { position:absolute; top:8px; left:8px; display:flex; gap:4px; z-index:2; }
.pcard-badge { font-size:10.5px; font-weight:800; padding:3px 7px; border-radius:6px; color:#fff; letter-spacing:-0.2px; }
.pcard-badge.badge-hot { background:#B4736A; }
.pcard-badge.badge-new { background:var(--color-primary); }
.pcard-badge.badge-free { background:#8D8373; }
.pcard-tag { position:absolute; top:9px; right:8px; z-index:2; font-size:10px; font-weight:700; color:#fff; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px); padding:3px 7px; border-radius:6px; }
/* ── 상품 표제 (2026-08-26) — 청월당식 ────────────────────────────────
   캐릭터 이름을 작게 얹고 그 아래 큰 흰 글씨로 상품명. **세 화면이 같은 모양을 쓴다**
   (상품 카드 · 랜딩 상단 캐러셀 · 상품 상세 첫 화면).
   ⭐ **PNG 로 굽지 않는다.** 상품명이 자주 바뀌고, 폰은 실제 픽셀이 3배라 이미지 글자는 뭉갠다.
   ⭐ 청월당 카드를 실측했다 — **글자 높이가 카드 폭의 15% 안팎**이고, 색은 금색이 아니라 **흰색**이다.
      금색은 그림(먹빛+금)과 부딪혀 튄다. 흰 글씨라야 그림이 주인공이 되고 글자는 받쳐 준다.
      상품 8개가 각각 그림 색이 달라도 흰색은 어디서든 읽힌다.
   ⭐ 글자가 그림에 묻히지 않게 **아래쪽을 검게 덮는다**(`*-grad`). 청월당도 같은 방식이다.
   ⚠️ 이 폰트는 굵기가 400 하나뿐이다 — font-weight 를 올리면 가짜 굵게로 획이 뭉갠다. */
.pcard-thumb { container-type: inline-size; }
/* 아래 절반을 검게 — 글자가 앉을 자리를 만든다 */
.pcard-thumb-grad {
  position:absolute; left:0; right:0; bottom:0; height:52%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.88) 72%, rgba(0,0,0,.96) 100%);
}
.pcard-thumb-cap { position:absolute; left:8px; right:8px; bottom:9%; z-index:2; text-align:center; }
.pcard-thumb-brand {
  font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400;
  font-size:6.2cqw; letter-spacing:.05em; color:#E7CE94; margin-bottom:2px;
  text-shadow:0 1px 6px rgba(0,0,0,.95);
}
/* 글자 높이 = 카드 폭 기준(cqw). 카드가 커지든 작아지든 비율이 유지된다 */
.pcard-thumb-title {
  font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400;
  font-size:19cqw; line-height:1.14; letter-spacing:.03em; word-break:keep-all;
  color:#FFFFFF;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.7);
}

.pcard-body { padding:10px 11px 12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pcard-hook { font-size:12.5px; color:var(--color-text-secondary); line-height:1.4; min-height:34px; }
.pcard-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px; margin-top:auto; }
.pcard-disc { color:#B4736A; font-weight:800; font-size:14px; }
.pcard-sale { color:var(--color-text-primary); font-weight:800; font-size:15px; }
.pcard-orig { color:var(--color-text-light); font-size:11.5px; text-decoration:line-through; }

/* ============================================
   실시간 후기 피드 (타이트사주 벤치마크)
   ============================================ */
.testimonial-subheading { color:var(--color-text-secondary); font-size:13px; margin:-16px 0 20px; }
.rev-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:14px; padding:14px 15px; margin-bottom:12px; }
.rev-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.rev-ilgan { font-size:12.5px; font-weight:800; color:var(--color-primary-light); }
.rev-sep { color:#55565A; font-size:11px; }   /* 테두리색은 글씨로 쓰면 안 보인다 */
.rev-id { font-size:12px; color:var(--color-text-secondary); }
.rev-badge { font-size:10.5px; font-weight:700; color:var(--color-on-primary); background:var(--color-primary-dark); padding:2px 7px; border-radius:6px; }
.rev-time { margin-left:auto; font-size:12px; color:var(--color-text-light); }
.rev-stars { color:var(--color-star); font-size:13px; letter-spacing:1px; margin-bottom:8px; }
.rev-body { font-size:13.5px; line-height:1.6; color:var(--color-text-primary); }
.rev-prod { display:flex; align-items:center; gap:9px; margin-top:12px; padding:8px 10px; background:rgba(127,90,240,0.08); border:1px solid var(--color-border); border-radius:10px; cursor:pointer; }
.rev-prod-img { width:34px; height:34px; border-radius:8px; object-fit:cover; flex:0 0 auto; }
.rev-prod-name { font-size:12.5px; font-weight:700; color:var(--color-text-primary); }

/* ============================================
   웹툰 리더 (다크) — 결과 페이지 테마 오버라이드
   ============================================ */
#page-saju-result { background:#000000; }
#page-saju-result .sub-header { background:#111111; border-bottom:1px solid #26262A; }
#page-saju-result .sub-title, #page-saju-result .back-btn { color:#EBEAE8; }
#page-saju-result .page-body {
  background-color:#000000;
  background-image:
    radial-gradient(circle at 50% -40px, rgba(226,74,59,0.16), transparent 260px),
    radial-gradient(120% 60% at 50% 0%, rgba(201,161,74,0.06), transparent 60%);
  padding-bottom:96px; /* 하단 고정 네비 여백 */
}
#page-saju-result .result-name { color:#EBEAE8; }
#page-saju-result .result-info { color:#9C93A6; }
#page-saju-result .result-table .saju-table { background:#181818; border-color:#26262A; }
#page-saju-result .result-table .saju-table th { color:#9C95A2; }

/* 리더 컨테이너 */
.wt-reader { max-width:520px; margin:0 auto; }
.wt-page { animation:wtFade .35s ease; }
@keyframes wtFade { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

/* 맺음 페이지 — 로고와 인사말만 가운데 두고 조용히 끝낸다.
   ⚠️ 로고 원본은 '검은 붓글씨'다. 검은 배경 위에 그냥 얹으면 보이지 않으므로
      반드시 brightness(0) invert(1) 로 흰 글씨로 뒤집어 쓴다(헤더·푸터도 같은 방식). */
.wt-closing { min-height: 72vh; display: flex; flex-direction: column; }
.wt-closing-inner { margin: auto; text-align: center; padding: 30px 0; }
/* 인사말이 이 페이지의 주인공 — 로고는 아래 서명으로 물러난다 */
.wt-closing-msg {
  font-family: var(--font-serif); font-size: 23px; font-weight: 600;
  letter-spacing: .05em; line-height: 1.6;
  color: var(--color-text-primary); opacity: .92;
}
/* 맺음 페이지의 "PDF로 저장" — 인사말 아래에 조용히 놓는다(여운을 깨지 않을 만큼만 눈에 띄게) */
.wt-save-btn {
  margin: 26px auto 0; display: block; padding: 13px 22px;
  border: 1px solid rgba(212,175,55,.55); border-radius: 999px;
  background: transparent; color: #D4AF37;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; transition: background .2s, color .2s;
}
.wt-save-btn:active { background: rgba(212,175,55,.14); }
.wt-save-note { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--color-text-light); opacity: .85; }

/* ⚠️ 인쇄할 때 화면 위에 떠 있는 것(구매 시트·어둠막·팝업)은 **전부 지워야 한다** — 2026-09-02
   왜 중요한가: 이것들은 position:fixed 라서, 켜져 있으면 **인쇄되는 모든 쪽에 그대로 겹쳐 찍힌다.**
   실제로 구매 시트가 열린 채 저장했더니 90쪽짜리 PDF 전체가 '결제 안내' 화면으로 덮였고,
   어둠막(rgba 반투명) 때문에 리포트 글자까지 전부 그림으로 눌려 검게 나왔다.
   ⚠️ 여기에 새 팝업을 만들면 반드시 이 목록에도 추가할 것. */
@media print {
  .wt-save-btn, .wt-save-note,
  .leave-dim, .leave-box, .coupon-pick-box,
  .side-menu, .side-menu-overlay, .toast { display: none !important; }
}

/* 페이지 맨 아래 작게 남기는 서명 */
.wt-closing-mark {
  width: 66px; height: auto; margin: 0 auto; display: block;
  padding-bottom: 10px;
  filter: brightness(0) invert(1); opacity: .34;
}

/* 표지 */
.wt-cover { position:relative; border-radius:18px; overflow:hidden; min-height:70vh; min-height:70dvh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid #302B2E; background:#0E0E0E; }
.wt-cover-bg { position:absolute; inset:0;
  background:
    radial-gradient(140% 90% at 50% 8%, rgba(226,74,59,0.42), transparent 55%),
    radial-gradient(100% 60% at 50% 100%, rgba(150,20,30,0.35), transparent 60%),
    linear-gradient(180deg,#121212,#070707); }
.wt-cover-bg::after { content:""; position:absolute; inset:0; opacity:.16;
  background-image:radial-gradient(circle at 30% 40%, #B4736A 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, #F0D89B 0 1px, transparent 1px);
  background-size:34px 34px,46px 46px; }
.wt-cover-inner { position:relative; padding:44px 26px; }
.wt-cover-seal { display:inline-block; font-family:var(--font-serif); letter-spacing:.32em;
  color:#F8EBC6; border:1px solid rgba(201,161,74,.6); border-radius:8px; padding:6px 14px;
  font-size:14px; margin-bottom:22px; background:rgba(0,0,0,.25); }
.wt-cover-title { font-family:var(--font-serif); color:#F2F1EF; font-size:clamp(23px, 7vw, 30px); line-height:1.34; word-break:keep-all;
  font-weight:800; text-shadow:0 2px 18px rgba(226,74,59,.45); margin-bottom:14px; }
.wt-cover-title .wt-amp { color:#B4736A; }
.wt-cover-tag { color:#CBC6C0; font-size:14.5px; line-height:1.6; margin-bottom:18px; }
.wt-cover-sub { color:#B9A7B2; font-size:12.5px; letter-spacing:.02em; }
.wt-cover-cue { margin-top:26px; color:#B4736A; font-size:13px; font-weight:700; animation:wtBounce 1.6s infinite; }
@keyframes wtBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);} }

/* 챕터 상단 이미지 슬롯 (플레이스홀더) */
.wt-hero { position:relative; aspect-ratio:3/4; max-width:340px; width:100%; margin:0 auto 18px;
  border-radius:16px; overflow:hidden; border:1px solid #302B2E; }
.wt-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.wt-hero-art { position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(226,74,59,0.30), transparent 55%),
    radial-gradient(90% 70% at 80% 90%, rgba(120,18,28,0.5), transparent 60%),
    linear-gradient(160deg,#151515,#090909);
  display:flex; align-items:center; justify-content:center; }
.wt-hero-art::after { content:""; position:absolute; inset:0; opacity:.12;
  background-image:repeating-linear-gradient(135deg, #F0D89B 0 1px, transparent 1px 16px); }
.wt-hero-seal { font-family:var(--font-serif); font-size:clamp(28px, 9vw, 38px); letter-spacing:.2em;
  color:rgba(201,161,74,.28); font-weight:800; }

/* 챕터 머리/본문 */
.wt-chap-head { margin-bottom:16px; }
.wt-chap-no { display:inline-block; font-family:var(--font-serif); font-size:12px; letter-spacing:.22em;
  color:#070707; background:#F0D89B; padding:3px 10px; border-radius:5px; margin-bottom:10px; font-weight:800; }
.wt-chap-title { color:#B4736A; font-family:var(--font-serif); font-size:clamp(19px, 5.4vw, 22px); line-height:1.36; font-weight:800; word-break:keep-all; }
.wt-chap-body { color:#D9D5DB; }
.wt-p { color:#CECAD1; font-size:15px; line-height:1.85; margin:0 0 14px; letter-spacing:.01em; }
.wt-sub { color:#EBEAE8; font-size:17px; font-weight:800; margin:24px 0 12px; padding-left:12px;
  border-left:3px solid #B4736A; line-height:1.4; }
.wt-list { margin:0 0 14px; padding-left:2px; list-style:none; }
.wt-list li { color:#CECAD1; font-size:14.5px; line-height:1.7; margin-bottom:8px; padding-left:18px; position:relative; }
.wt-list li::before { content:"\00B7"; position:absolute; left:4px; color:#B4736A; font-weight:800; }
.wt-p strong, .wt-list strong { color:#EBEAE7; font-weight:800; }
.wt-quote { margin:16px 0; padding:12px 16px; border-left:3px solid #F0D89B;
  background:rgba(201,161,74,.08); color:#DBD9D5; font-size:15px; line-height:1.7; border-radius:0 8px 8px 0; }

/* 형광펜 강조 */
mark.wt-hl { background:linear-gradient(180deg, transparent 40%, rgba(226,74,59,.42) 40%);
  color:#F4F2F1; font-weight:700; padding:0 2px; border-radius:2px; }

/* 컬러 표 */
.wt-table-wrap { overflow-x:auto; margin:16px 0 18px; border-radius:12px; border:1px solid #332E39; }
.wt-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:340px; }
.wt-table th { background:#1E1E1E; color:#F8EBC6; font-weight:800; text-align:left; padding:11px 12px;
  border-bottom:1px solid #3A3542; white-space:nowrap; }
.wt-table td { padding:11px 12px; border-bottom:1px solid #262626; color:#CECAD1; vertical-align:top; line-height:1.5; }
.wt-table tr:last-child td { border-bottom:none; }
.wt-table td.wt-td-key { color:#B6AFAE; font-weight:700; white-space:nowrap; }
.wt-table tbody tr:nth-child(even) td { background:rgba(255,255,255,.02); }

/* 부록(오행/요약 등) — 밝은 인셋 카드 */
.wt-extra .result-card { background:#F2F0EC; border:1px solid #D5D4D0; box-shadow:0 6px 22px rgba(0,0,0,.4); }
.wt-extra .result-card-title { color:#2B2A28; }
.wt-extra .result-card-text { color:#46423b; }

/* 하단 고정 네비 */
.wt-nav { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; gap:8px;
  max-width:552px; margin:0 auto; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(10,9,16,0), #000000 34%); }
.wt-nav-btn { flex:1; padding:14px 10px; border-radius:12px; font-weight:800; font-size:14.5px;
  background:#1E1E1E; color:#E8E2E8; border:1px solid #332E39; }
.wt-nav-btn:disabled { opacity:.4; }
.wt-nav-next { background:linear-gradient(135deg,#B4736A,#735E60); color:#fff; border:none;
  box-shadow:0 6px 18px rgba(226,74,59,.4); }
.wt-nav-toc { width:46px; flex:0 0 auto; padding:14px 0; border-radius:12px; font-size:16px;
  background:#1E1E1E; color:#F8EBC6; border:1px solid #332E39; }
.wt-nav-count { flex:0 0 auto; color:#9C93A6; font-size:12.5px; min-width:46px; text-align:center; }

/* 목차 오버레이 */
.wt-toc-overlay { position:fixed; inset:0; z-index:70; display:none; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.66); backdrop-filter:blur(3px); }
.wt-toc-overlay.open { display:flex; }
.wt-toc-box { width:100%; max-width:520px; max-height:76vh; overflow-y:auto; background:#151515;
  border:1px solid #332E39; border-radius:20px 20px 0 0; padding:20px 18px calc(24px + env(safe-area-inset-bottom)); animation:wtUp .28s ease; }
@keyframes wtUp { from{transform:translateY(30px);opacity:0;} to{transform:none;opacity:1;} }
.wt-toc-head { color:#F8EBC6; font-family:var(--font-serif); font-size:16px; letter-spacing:.14em;
  text-align:center; margin-bottom:14px; }
.wt-toc-list { list-style:none; margin:0; padding:0; }
.wt-toc-item { display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:12px; cursor:pointer;
  border-bottom:1px solid #232323; }
.wt-toc-item:active { background:#1E1E1E; }
.wt-toc-i { flex:0 0 auto; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-weight:800; font-size:13px; color:#070707; background:#F0D89B; }
.wt-toc-t { color:#D9D5DB; font-size:14.5px; font-weight:600; line-height:1.35; }

/* 인쇄: 모든 페이지 펼치고 네비 숨김 */
@media print {
  .wt-nav, .wt-toc-overlay, .wt-cover-cue { display:none !important; }
  #page-saju-result .page-body { padding-bottom:0; background:#fff; }
  .wt-slot { display:block !important; page-break-after:always; }

  /* ⚠️⚠️ 이 세 줄을 지우면 PDF가 **검은 백지 90장**으로 나온다 (2026-09-02에 실제로 겪음).
     까닭: 리더는 보고 있는 한 장만 화면에 두고 나머지 62장은 display:none 으로 감춰 둔다.
       인쇄가 시작되면 위의 `.wt-slot{display:block}` 이 그 62장을 한꺼번에 나타나게 하는데,
       `.wt-page` 에 걸린 페이드인(opacity 0 → 1, 0.35초)이 **바로 그 순간 처음부터 시작**된다.
       인쇄는 그 첫 순간을 찍으므로 62장이 전부 opacity:0 — 즉 글자도 그림도 안 찍힌다.
       (한 장만 멀쩡했던 이유 = 그 장은 이미 화면에 떠 있어 페이드가 끝나 있었기 때문)
     그래서 인쇄할 때는 움직임을 전부 끄고 보이는 상태로 고정한다. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wt-page, .wt2-scene, .wiz-panel { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   인쇄 판형 — 화면(폰 폭)과 A4 의 비율 차이를 메운다  (2026-09-02)
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 무엇이 문제였나
      리포트 한 장은 폰 폭(478px)에 맞춰 짜여 있다. 그대로 A4 에 올리면
        · 좌우가 3분의 1쯤 비고
        · 대신 세로로 길어져 **63장 중 26장이 A4 한 장을 넘겨** 문장과 테두리가 중간에서 잘렸다.
   ⚠️ 어떻게 고치나 — 두 단계
      ① 인쇄할 때만 카드 폭을 종이 폭까지 넓힌다. 같은 글이 더 적은 줄로 흘러 카드가 짧아진다
         (실측: 한 장을 넘는 카드 26장 → 5장, 전체 89쪽 → 69쪽).
      ② 그래도 넘치는 몇 장은 script.js 의 fitPagesForPrint() 가 딱 맞게 줄인다 → 잘림 0.
   ⚠️ 같은 규칙을 `html.printing` 에도 준다. 그래야 인쇄 직전에 **화면에서 재는 크기**와
      **종이에 찍히는 크기**가 같아져 ②의 계산이 맞는다. 한쪽만 고치면 축소 비율이 어긋난다. */
@media print {
  /* 186mm = A4 가로 210mm - 좌우 여백 12mm씩. 아래 html.printing 과 **같은 값**이어야 한다 —
     다르면 인쇄 직전에 재는 크기와 실제로 찍히는 크기가 어긋나 축소 비율이 틀어진다. */
  #app-container { max-width: none !important; width: 186mm !important; }
  #page-saju-result .page-body { padding: 0 !important; }
  .wt-reader { max-width: none !important; width: 100% !important; }
  #page-saju-result .wt-page { width: 100% !important; }
}
html.printing #app-container { max-width: none !important; width: 186mm !important; }  /* A4 210mm - 좌우 여백 12mm씩 */
html.printing #page-saju-result .page-body { padding: 0 !important; }
html.printing .wt-reader { max-width: none !important; width: 100% !important; }
html.printing #page-saju-result .wt-page { width: 100% !important; }
html.printing #page-saju-result .wt-slot { display: block !important; }
html.printing .wt-page { animation: none !important; opacity: 1 !important; transform: none !important; }
/* ⚠️ (2026-09-03) **인쇄에서만 걸리는 규칙 중 「높이를 바꾸는 것」은 여기에도 똑같이 줘야 한다.**
   안 그러면 인쇄 직전에 화면에서 재는 높이와 실제로 찍히는 높이가 달라, 쪽수 계산이 어긋난다.
   실제로 겪었다 — 재는 쪽에서는 padding 이 4px 인데 인쇄는 7mm 라 한 장마다 44px 씩 틀어졌고,
   카드 축소(0.85)도 반영이 안 돼 카드 장이 실제보다 길게 잡혔다.
   ⚠️ 아래 @media print 의 같은 값과 **반드시 함께** 고칠 것. */
html.printing #page-saju-result .wt-page:not(.wt-cover):not(.wt-chap-cover) {
  padding: 7mm 8mm !important; box-sizing: border-box;
}
html.printing #page-saju-result .wt-puri-card { zoom: 0.85; }
/* ⚠️ 여기에 `min-height: 0 !important` 를 두면 안 된다 — `html.printing` 은 **인쇄하는 동안에도
   붙어 있어서**, 아래 script.js 가 넣는 inline 높이(쪽 끝까지 채우기)까지 눌러 버린다.
   측정할 때만 잠깐 0 으로 두는 일은 script.js 가 직접 한다(2026-09-03). */
/* 인쇄에서만 줄어드는 그림 규칙도 측정 화면에 그대로 준다 — 안 그러면 카드 장을 실제보다
   길게 재서 쪽수를 하나 더 세고, 그 결과 **글자 없는 빈 테두리 쪽**이 생긴다(2026-09-03 실측). */
html.printing #page-saju-result .wt-hero { margin: 0 auto 18px; max-width: 340px; }
html.printing #page-saju-result .wt-chap-cover .wt-hero { max-width: 96mm; margin: 0 auto 16px; }

/* ============================================
   대화형 입력 위저드 (무당 배경, 질문 하나씩)
   ============================================ */
#page-saju-input { padding:0; background:#000000; }
.wiz-root { position:relative; height:100%; }
/* ⚠️ (2026-08-10) 여기가 `overflow:hidden` 이었다 = **화면보다 내용이 길면 잘리고 스크롤도 안 됐다.**
   825px 짜리 화면에서도 이미 891px 이라 66px 이 잘려 나갔고, 화면이 짧은 휴대폰에서는
   "다음" 버튼이나 입력칸이 화면 밖으로 나가 **사주 입력 자체를 끝낼 수 없었다**(= 구매 불가).
   → 세로 스크롤 허용. `.wiz-panel` 의 margin-top:auto 는 내용이 짧을 때만 아래로 붙이므로,
     길어지면 자연스럽게 위에서부터 채워지고 스크롤된다.
   overscroll-behavior:contain = 위저드 끝에서 더 밀어도 뒤 페이지가 딸려 움직이지 않게. */
.wiz-step { position:fixed; inset:0; z-index:5; display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* 배경 그림은 화면 한 장 크기라, 스크롤로 밀리면 그 아래가 드러난다.
     밀려난 자리가 배경 아래끝 색과 같도록 맞춰 둔다(이음매가 안 보이게). */
  background:#0A0910; }
/* 무당 배경 (이미지 보류 → 다크 신비 플레이스홀더. 나중에 background-image만 교체) */
.wiz-bg { position:absolute; inset:0; background:
    radial-gradient(90% 60% at 50% 22%, rgba(226,74,59,0.34), transparent 60%),
    radial-gradient(120% 70% at 50% 92%, rgba(120,18,28,0.5), transparent 62%),
    radial-gradient(60% 40% at 50% 42%, rgba(240,217,160,0.14), transparent 70%),
    linear-gradient(180deg,#1A1A1A,#070707);
  background-size:cover; background-position:center top; transition:filter .4s ease;
  display:flex; align-items:center; justify-content:center; }
.wiz-bg::after { content:""; position:absolute; inset:0; opacity:.10;
  background-image:repeating-linear-gradient(135deg,#F0D89B 0 1px, transparent 1px 18px); }
.wiz-bg-seal { font-family:var(--font-serif); font-size:60px; letter-spacing:.2em; font-weight:800;
  color:rgba(201,161,74,.16); transform:translateY(-30px); }
/* 서비스 메인 이미지 배경 (흐릿·어둡게 처리해 글자 가독성 확보) */
.wiz-photo { position:absolute; inset:-8%; z-index:0; background-size:cover; background-position:center;
  filter:blur(11px) brightness(.62) saturate(1.05); }
.wiz-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,16,.35) 0%, rgba(10,9,16,.18) 38%, rgba(10,9,16,.75) 72%, rgba(10,9,16,.96) 100%); }

.wiz-topbar { position:relative; z-index:3; display:flex; align-items:center; gap:12px;
  padding:calc(16px + env(safe-area-inset-top)) 18px 8px; }
.wiz-back { font-size:30px; line-height:1; color:#EBEAE8; background:none; width:34px; height:34px; }
.wiz-progress { flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.16); overflow:hidden; }
.wiz-progress i { display:block; height:100%; background:linear-gradient(90deg,#B4736A,#F8EBC6); transition:width .35s ease; }

.wiz-panel { position:relative; z-index:3; margin-top:auto; padding:26px 22px calc(26px + env(safe-area-inset-bottom)); animation:wtFade .32s ease; }
.wiz-kicker { color:#CBC6C0; font-size:15px; font-weight:600; margin-bottom:8px; }
.wiz-q { color:#F7F7F6; font-family:var(--font-serif); font-size:26px; line-height:1.34; font-weight:800;
  margin-bottom:22px; text-shadow:0 2px 14px rgba(0,0,0,.65); }
.wiz-control { margin-bottom:22px; }

/* 날짜·시간 큰 입력 */
.wiz-date { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.wiz-num { width:104px; background:transparent; border:none; border-bottom:2px solid rgba(255,255,255,.55);
  color:#fff; font-size:32px; font-weight:800; text-align:center; padding:4px 2px; letter-spacing:.02em; }
.wiz-num.sm { width:66px; }
.wiz-num:focus { outline:none; border-bottom-color:#B4736A; }
.wiz-num::placeholder { color:rgba(255,255,255,.5); }
.wiz-num:disabled { opacity:.35; }
.wiz-unit { color:#D5CED2; font-size:18px; font-weight:600; }
.wiz-pills { display:flex; gap:8px; margin-top:18px; }
.wiz-pill { padding:9px 20px; border-radius:999px; background:rgba(255,255,255,.12); color:#EEEBEE;
  font-size:14px; font-weight:600; border:1px solid rgba(255,255,255,.22); }
.wiz-pill.sel { background:#fff; color:#1A1A1A; border-color:#fff; font-weight:800; }

/* 성별 */
.wiz-gender { display:flex; gap:12px; }
.wiz-gbtn { flex:1; padding:17px; border-radius:14px; background:rgba(255,255,255,.1); color:#F1EEF1;
  font-weight:700; font-size:16px; border:1px solid rgba(255,255,255,.22); }
.wiz-gbtn.sel { background:#fff; color:#1A1A1A; border-color:#fff; }

/* 텍스트 */
.wiz-text { width:100%; background:transparent; border:none; border-bottom:2px solid rgba(255,255,255,.55);
  color:#fff; font-size:24px; font-weight:700; padding:8px 2px; }
.wiz-text:focus { outline:none; border-bottom-color:#B4736A; }
.wiz-text::placeholder { color:rgba(255,255,255,.5); }

/* 라디오 리스트 */
.wiz-radio { display:flex; flex-direction:column; gap:10px; }
.wiz-opt { display:flex; align-items:center; gap:12px; text-align:left; padding:15px 16px; border-radius:14px;
  background:rgba(255,255,255,.08); color:#EBE8EB; font-size:15.5px; font-weight:600;
  border:1px solid rgba(255,255,255,.15); transition:background .15s, border-color .15s; }
.wiz-opt-dot { width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.5); flex:0 0 auto; }
.wiz-opt.sel { background:rgba(226,74,59,.16); border-color:#B4736A; color:#fff; }
.wiz-opt.sel .wiz-opt-dot { border-color:#B4736A; background:radial-gradient(circle,#B4736A 44%, transparent 48%); }
/* 여러 개 고를 수 있는 항목은 동그라미 대신 네모로 — 하나만 고르는 질문과 구분된다 */
.wiz-opt-box { width:20px; height:20px; border-radius:6px; border:2px solid rgba(255,255,255,.5); flex:0 0 auto; position:relative; }
.wiz-opt.sel .wiz-opt-box { border-color:#B4736A; background:#B4736A; }
.wiz-opt.sel .wiz-opt-box::after { content:''; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* 고민 자유입력 */
.wiz-textarea { width:100%; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22);
  border-radius:14px; color:#fff; font-size:15px; line-height:1.6; padding:14px; resize:none; font-family:inherit; }
.wiz-textarea:focus { outline:none; border-color:#B4736A; }
.wiz-textarea::placeholder { color:rgba(255,255,255,.5); }

/* 하단 버튼 (레퍼런스=흰색 알약) */
.wiz-btn { width:100%; padding:17px; border-radius:16px; background:#F1F0EE; color:#1A1A1A;
  font-weight:800; font-size:16px; box-shadow:0 8px 22px rgba(0,0,0,.35); }
.wiz-btn:active { transform:translateY(1px); }

/* ============================================================
   모바일 프레임 가두기 — position:fixed 오버레이가 480px 앱
   프레임을 뚫고 창 전체 폭으로 벌어지는 문제 방지.
   (좁은 화면에선 --frame-gap=0 이라 그대로 전체폭)
   ============================================================ */
:root { --frame-gap: max(0px, calc((100vw - var(--max-width)) / 2)); }

.wiz-step,
.wt-toc-overlay,
.wt-nav,
.wt2-cta,
.side-menu-overlay {
  left: var(--frame-gap);
  right: var(--frame-gap);
}

/* 사이드 메뉴 서랍: 프레임 왼쪽 끝에 붙여서 슬라이드
   ⚠️ 넓은 화면(PC)에서 translateX(-100%)만 주면 자기 폭(280px)만 밀려난다.
      시작 위치가 --frame-gap(예: 200px)이라 200-280 = -80px → 메뉴 200px가 화면에 남아
      "항상 열려 있는" 것처럼 보였다. 여백만큼 더 밀어 창 밖으로 완전히 숨긴다. */
.side-menu {
  left: var(--frame-gap);
  transform: translateX(calc(-100% - var(--frame-gap)));
  transition: transform var(--transition-normal);
}
.side-menu.show { left: var(--frame-gap); transform: translateX(0); }
/* 다크 배경인데 hover가 흰색이라 마우스만 올려도 항목이 하얗게 번쩍이던 것 수정 */
.side-menu-list li:hover { background: rgba(255,255,255,.06); }

/* ============================================================
   재물운 티저 (청룡신 웹툰 스크롤 미리보기) — #page-wealth-teaser
   타이트사주 /mzmudang/teaser 벤치마크. 전면 다크 + 금(청룡신 = 청록+금).
   기존 다크퍼플과 충돌하지 않게 .wt2-* 로 스코프를 잠근다.
   ============================================================ */
#page-wealth-teaser {
  --wt2-bg: #000000;
  --wt2-gold: #F0D89B;
  --wt2-cyan: #89999F;
  --wt2-purple: #F0D89B;
  --wt2-text: #F2F0EC;
  --wt2-dim: #8E8C88;
  background: var(--wt2-bg);
  color: var(--wt2-text);
  padding: 0;
}
#wealth-teaser-root { max-width: 520px; margin: 0 auto; overflow-x: hidden; }

.wt2-back {
  position: fixed; top: 14px; left: 14px; z-index: 30;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.15);
  font-size: 20px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px);
}

.wt2-scene { position: relative; padding: 72px 24px; text-align: center; }
.wt2-block { border-top: 1px solid rgba(255,255,255,.06); }

/* ── 등장(히어로) ── */
.wt2-hero { padding: 0; min-height: 78vh; min-height: 78dvh; display: flex; align-items: flex-end; }
.wt2-art { width: 100%; display: block; }
.wt2-hero .wt2-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wt2-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,14,.25) 0%, rgba(7,7,14,.1) 40%, rgba(7,7,14,.92) 88%, var(--wt2-bg) 100%);
}
.wt2-hero .wt2-copy { position: relative; z-index: 2; width: 100%; padding: 0 24px 56px; }
.wt2-brand { color: var(--wt2-gold); font-size: 13px; letter-spacing: .22em; margin-bottom: 14px; }
.wt2-title { font-size: clamp(24px, 7.4vw, 32px); word-break: keep-all; font-weight: 800; line-height: 1.35; margin: 0 0 14px; text-shadow: 0 3px 18px rgba(0,0,0,.8); }
.wt2-sub { color: var(--wt2-dim); font-size: 15px; }
.wt2-sub b { color: var(--wt2-cyan); }

/* ── 대사/문구 ── */
.wt2-say { font-size: 22px; font-weight: 700; line-height: 1.5; margin-bottom: 22px; }
.wt2-say2 { font-size: 17px; color: var(--wt2-dim); margin-top: 22px; }
.wt2-big { font-size: clamp(23px, 6.9vw, 30px); word-break: keep-all; font-weight: 800; line-height: 1.45; margin-bottom: 20px; }
.wt2-big em { font-style: normal; color: var(--wt2-gold); }
.wt2-desc { font-size: 15px; line-height: 1.85; color: #A9A7A2; }
.wt2-desc b { color: var(--wt2-text); }
.wt2-eyebrow { color: var(--wt2-cyan); font-size: 13px; letter-spacing: .16em; margin-bottom: 10px; }
.wt2-h2 { font-size: clamp(21px, 6.2vw, 26px); word-break: keep-all; font-weight: 800; line-height: 1.4; margin: 0 0 26px; }
.wt2-mt { margin-top: 18px; }
.wt2-meta { font-size: 13px; color: var(--wt2-dim); line-height: 1.8; margin-top: 16px; }
.wt2-meta b { color: var(--wt2-gold); }

/* ── 명식 ── */
.wt2-myeongsik {
  font-size: 19px; letter-spacing: .06em; color: var(--wt2-gold);
  padding: 14px 0 20px; font-weight: 700;
}
/* 명식 표 — 「목간」 A안 (2026-08-28 확정)
   ⚠️ 일주 칸(.is-me)만 금테로 띄우고, 「나」는 **위 글자(일간) 옆에만** 붙인다.
      아래 글자(일지)는 배우자궁이라 '나'가 아니다. */
.wt2-pillars { display: flex; gap: 7px; justify-content: center; }
.wt2-pcol {
  flex: 1; max-width: 82px; padding: 9px 0 12px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
}
.wt2-pcol.is-me {
  border-color: rgba(231,206,148,.55);
  box-shadow: 0 0 0 3px rgba(231,206,148,.10);
}
.wt2-plabel { font-size: 10.5px; letter-spacing: .14em; color: var(--wt2-dim); margin-bottom: 9px; }
.wt2-pcol.is-me .wt2-plabel { color: #E7CE94; }
.wt2-pchar { font-size: clamp(21px, 6.2vw, 27px); font-weight: 700; line-height: 1.15; position: relative; }
/* 한자 밑 한글 음 — 한자를 못 읽는 손님을 위한 줄이다. 지우지 말 것. */
.wt2-pko { font-size: 10.5px; color: rgba(240,231,214,.5); margin-bottom: 7px; }
.wt2-pcol .wt2-pko:last-child { margin-bottom: 0; }
/* 「나」 — 일간 글자에 붙는 작은 금빛 표식 */
.wt2-pme {
  position: absolute; top: -2px; margin-left: 3px;
  font-size: 9.5px; font-style: normal; letter-spacing: .06em;
  color: #0b0a10; background: #E7CE94; border-radius: 7px; padding: 1px 5px;
  vertical-align: super;
}

/* ── 재물 등급 ── */
.wt2-grade {
  border: 1px solid rgba(232,196,106,.32); border-radius: 18px; padding: 30px 22px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(232,196,106,.13), rgba(255,255,255,.02));
}
.wt2-grade-badge {
  width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 900; color: #000000;
  background: linear-gradient(145deg, #F8EBC6, #8E8675);
  box-shadow: 0 0 34px rgba(232,196,106,.4);
}
.wt2-g-C, .wt2-g-D { background: linear-gradient(145deg, #CBCDD3, #7E8494); color: #181818; box-shadow: 0 0 26px rgba(160,168,186,.28); }
.wt2-grade-label { font-size: 21px; font-weight: 800; color: var(--wt2-gold); margin-bottom: 18px; }
.wt2-gauge { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.wt2-gauge i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--wt2-cyan), var(--wt2-gold)); }
.wt2-grade-score { font-size: clamp(21px, 6.2vw, 26px); font-weight: 800; margin-top: 12px; }
.wt2-grade-score span { font-size: 14px; color: var(--wt2-dim); font-weight: 500; }
.wt2-grade-desc { font-size: 14px; color: #A9A7A2; margin-top: 12px; line-height: 1.7; }

/* ── 카드(그릇·소비습관) ── */
.wt2-card {
  border: 1px solid rgba(127,90,240,.3); border-radius: 16px; padding: 26px 22px;
  background: linear-gradient(160deg, rgba(127,90,240,.12), rgba(255,255,255,.02));
}
.wt2-card-tag {
  display: inline-block; padding: 7px 16px; border-radius: 99px; margin-bottom: 16px;
  background: rgba(232,196,106,.14); color: var(--wt2-gold);
  font-size: 15px; font-weight: 700; border: 1px solid rgba(232,196,106,.3);
}
.wt2-card-body { font-size: 15px; line-height: 1.85; color: #C9C7C2; }

/* ── 대박 시기 ── */
.wt2-boom {
  border-top: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(90% 55% at 50% 42%, rgba(232,196,106,.14), transparent 70%);
}
.wt2-year {
  font-size: clamp(44px, 15vw, 66px); font-weight: 900; letter-spacing: -.02em; margin: 26px 0 18px;
  background: linear-gradient(180deg, #DDDBD5, #989081);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 42px rgba(232,196,106,.28);
}
.wt2-boom-line { font-size: clamp(19px, 5.6vw, 24px); font-weight: 800; line-height: 1.5; word-break: keep-all; }
.wt2-boom-line em { font-style: normal; color: var(--wt2-gold); }
.wt2-warn .wt2-year { font-size: clamp(30px, 10vw, 42px); background: linear-gradient(180deg, #D6CECD, #897371); -webkit-background-clip: text; background-clip: text; }

/* 잠금(블러) — 결제 전 가림 */
.wt2-blur { filter: blur(11px); user-select: none; }
.wt2-blur-s { filter: blur(6px); user-select: none; }
.wt2-lock {
  margin-top: 26px; padding: 18px 18px 18px 46px; position: relative;
  border: 1px dashed rgba(232,196,106,.34); border-radius: 14px;
  background: rgba(232,196,106,.06); text-align: left;
}
.wt2-lock::before { content: '🔒'; position: absolute; left: 16px; top: 17px; font-size: 17px; }
.wt2-lock p { font-size: 13.5px; line-height: 1.75; color: #D1CDD7; }
.wt2-lock b { color: var(--wt2-gold); }

/* ── 포트폴리오 ── */
.wt2-port { text-align: left; }
.wt2-port-row { margin-bottom: 20px; }
.wt2-port-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.wt2-port-head span { font-size: 15px; font-weight: 700; }
.wt2-port-head b { font-size: 19px; color: var(--wt2-gold); }
.wt2-port-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.wt2-port-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--wt2-purple), var(--wt2-cyan)); }
.wt2-port-sub { font-size: 12px; color: var(--wt2-dim); margin-top: 6px; }

/* ── 목차 ── */
.wt2-toc { text-align: left; }
.wt2-toc-ch { margin-bottom: 30px; padding: 22px 20px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.wt2-toc-num { color: var(--wt2-gold); font-size: 14px; letter-spacing: .2em; margin-bottom: 10px; }
.wt2-toc-title { font-size: 19px; font-weight: 800; line-height: 1.45; margin-bottom: 14px; }
.wt2-toc-list { list-style: none; padding: 0; margin: 0; }
.wt2-toc-list li { font-size: 14px; line-height: 1.65; color: #C6C3CE; padding: 8px 0 8px 18px; position: relative; border-top: 1px solid rgba(255,255,255,.05); }
.wt2-toc-list li::before { content: '·'; position: absolute; left: 4px; color: var(--wt2-gold); }
/* (2026-09-17) 종합사주 새 목차 — 풀이마다 회색 떡밥 줄 + 굵은 결과물 줄(+ 시기 풀이의 괄호 줄) */
.wt2-toc-tag { display: inline-block; margin-left: 10px; padding: 1px 8px; border: 1px solid rgba(232,196,106,.35); border-radius: 999px; font-size: 11px; letter-spacing: .04em; vertical-align: 1px; }
.wt2-toc-list li.wt2-toc-two { padding-top: 10px; padding-bottom: 10px; }
.wt2-toc-hook { display: block; font-size: 12.5px; color: #8E8A97; line-height: 1.5; }
.wt2-toc-sub { display: block; font-size: 14.5px; font-weight: 700; color: #ECE9F1; line-height: 1.5; }
.wt2-toc-note { display: block; font-size: 12.5px; color: var(--wt2-gold); line-height: 1.5; margin-top: 2px; }
/* (2026-09-18) «용신처방» 풀이 강조 — 금박 현판 상자 (JH, 시안 D안). 한 장에 하나, 시기를 짚고 그때 쓸 용신까지 주는 풀이에만 붙는다.
   겹줄 금박 액자 + 위에 걸린 현판(用神處方 용신처방) + 매듭 구분선 + 한 문장. 문양은 위 :root 의 --orn-* 그대로. */
.wt2-toc-list li.wt2-toc-rx { position: relative; margin: 26px -10px 8px; padding: 26px 16px 18px; text-align: center; border: 1px solid #C9A24B; border-radius: 4px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(232,196,106,.17), rgba(232,196,106,.04) 70%); }
.wt2-toc-list li.wt2-toc-rx + li { border-top-color: transparent; }
.wt2-toc-list li.wt2-toc-rx::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(201,162,75,.4); pointer-events: none; }   /* 안쪽 겹줄 — 보통 줄의 '·' 자리를 덮어쓴다 */
.wt2-toc-rx-orn { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wt2-toc-rx-orn::after { content: ''; position: absolute; right: -34px; bottom: -34px; width: 130px; height: 130px; background: var(--orn-circle) center / contain no-repeat; opacity: .09; }
.wt2-toc-rx-plate { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 13px; white-space: nowrap; border-radius: 3px;
  background: linear-gradient(180deg, #F3DC9B, #C9A24B); color: #1A1610; font-size: 11.5px; font-weight: 800; letter-spacing: .18em; box-shadow: 0 2px 10px rgba(0,0,0,.6); }
.wt2-toc-rx-plate em { margin-right: 7px; font-family: var(--font-serif); font-style: normal; font-weight: 900; letter-spacing: .12em; opacity: .72; }
.wt2-toc-rx .wt2-toc-hook { position: relative; color: #B5AC98; }
.wt2-toc-rx .wt2-toc-sub { position: relative; margin-top: 3px; font-family: var(--font-serif); font-size: 18px; font-weight: 800; line-height: 1.45; color: #F3DC9B; word-break: keep-all; }
.wt2-toc-rx-knot { position: relative; display: block; height: 12px; margin: 12px 18px 10px;
  background: var(--orn-knot) center / auto 12px no-repeat,
    linear-gradient(rgba(232,196,106,.32), rgba(232,196,106,.32)) left center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(rgba(232,196,106,.32), rgba(232,196,106,.32)) right center / calc(50% - 16px) 1px no-repeat; }
.wt2-toc-rx-line { position: relative; display: block; font-size: 13px; line-height: 1.65; color: #D9C58E; word-break: keep-all; }
.wt2-toc-rx-line b { color: #F3DC9B; font-weight: 700; }

/* ── 분량 / 가격 ── */
.wt2-vol { font-size: 17px; line-height: 1.8; margin-bottom: 28px; }
.wt2-vol b { color: var(--wt2-gold); font-size: 21px; }
.wt2-vol span { font-size: 13px; color: var(--wt2-dim); }
.wt2-pricebox { border: 1px solid rgba(232,196,106,.3); border-radius: 16px; padding: 22px; text-align: left; background: rgba(232,196,106,.05); }
.wt2-price-name { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.wt2-price-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--wt2-dim); padding: 7px 0; }
.wt2-price-row s { color: #8A8398; }
.wt2-price-row em { font-style: normal; color: #A99795; }
.wt2-price-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.wt2-price-total span { font-size: 14px; color: var(--wt2-dim); }
.wt2-price-total b { font-size: 26px; color: var(--wt2-gold); }

/* ── 고정 CTA ── */
.wt2-cta-spacer { height: 104px; }
/* ⚠️ left/right 는 위쪽 "모바일 프레임 가두기" 블록이 --frame-gap 으로 덮어쓴다.
   그게 없던 동안 이 바가 창 전체(1119px)에 붙고 버튼이 max-width:484px 로 늘어나
   480px 앱 프레임보다 양옆 3px씩 삐져나왔다(2026-08-09 수정). */
.wt2-cta {
  /* left/right 를 여기서 다시 쓰면 안 된다 — 위 프레임 가두기 블록보다 뒤라서 그게 이긴다(그래서 삐져나왔다). */
  position: fixed; bottom: 0; z-index: 25;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(7,7,14,0), rgba(7,7,14,.96) 34%);
}
.wt2-cta-btn {
  /* 폭은 위 .wt2-cta(프레임 폭 - 좌우 패딩)가 정한다. 별도 max-width 를 주면 프레임을 넘는다. */
  display: block; width: 100%; margin: 0 auto;
  padding: 17px 0; border: none; border-radius: 14px; cursor: pointer;
  font-size: 17px; font-weight: 800; color: #000000;
  background: linear-gradient(135deg, #F8EBC6, #DFC684);
  box-shadow: 0 8px 26px rgba(232,196,106,.32);
}
.wt2-cta-btn:active { transform: translateY(1px); }

/* (2026-08-10) 380px 이하 전용 축소 규칙 삭제 — 390~412px 인 요즘 폰 대부분이 비켜가서
   큰 글씨가 그대로 나왔다. 위 clamp() 가 폭에 맞춰 계속 줄여 준다. */

/* 장면 컷 — 본문 위 청룡신 그림(아래로 배경에 녹아들게) */
.wt2-cut { margin: -72px -24px 34px; position: relative; }
.wt2-cut img { width: 100%; display: block; }
.wt2-cut::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 46%;
  background: linear-gradient(180deg, rgba(7,7,14,0), var(--wt2-bg) 92%);
}

/* ============================================================
   결과 페이지(웹툰 리더) — 티저(청룡신)와 색상 통일 + 컷 풀블리드
   앞선 .wt-* 정의보다 뒤에 와서 덮어쓴다. 팔레트는 #page-wealth-teaser 와 동일:
   bg #000000 / 금 #F0D89B / 청록 #89999F / 보라 #F0D89B
   ============================================================ */
#page-saju-result {
  --wt-bg: #000000;
  --wt-gold: #F0D89B;
  --wt-cyan: #89999F;
  --wt-purple: #F0D89B;
  --wt-text: #F2F0EC;
  --wt-dim: #8E8C88;
  background: var(--wt-bg);
}
#page-saju-result .sub-header { background: #000000; border-bottom: 1px solid #26262A; }
#page-saju-result .sub-title, #page-saju-result .back-btn { color: var(--wt-text); }
#page-saju-result .page-body {
  background-color: var(--wt-bg);
  background-image:
    radial-gradient(circle at 50% -40px, rgba(127,90,240,.20), transparent 280px),
    radial-gradient(120% 60% at 50% 0%, rgba(232,196,106,.07), transparent 62%);
}
#page-saju-result .result-name { color: var(--wt-text); }
#page-saju-result .result-info { color: var(--wt-dim); }
#page-saju-result .result-table .saju-table { background: #141415; border-color: #26262A; }
#page-saju-result .result-table .saju-table th { color: var(--wt-dim); }

/* ── 표지 ── */
.wt-cover { border: 1px solid #26262A; background: #0E0E0E; }
.wt-cover-bg {
  background:
    radial-gradient(140% 90% at 50% 8%, rgba(127,90,240,.42), transparent 55%),
    radial-gradient(100% 60% at 50% 100%, rgba(79,182,217,.22), transparent 62%),
    linear-gradient(180deg, #141415, #000000);
}
.wt-cover-bg::after {
  background-image: radial-gradient(circle at 30% 40%, #F0D89B 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, #F0D89B 0 1px, transparent 1px);
}
.wt-cover-seal { color: var(--wt-gold); border-color: rgba(232,196,106,.55); }
.wt-cover-title { color: #F2F0EC; text-shadow: 0 2px 20px rgba(127,90,240,.5); }
.wt-cover-title .wt-amp { color: var(--wt-gold); }
.wt-cover-tag { color: #C9C7C2; }
.wt-cover-sub { color: var(--wt-dim); }
.wt-cover-cue { color: var(--wt-gold); }

/* ── 챕터 컷: 카드 → 웹툰처럼 화면 꽉 차게 ──
   .page-body 좌우 패딩(16px)을 음수 마진으로 상쇄해 가장자리까지 흘린다.
   아래쪽은 배경으로 자연스럽게 녹아들게 페이드. */
.wt-hero {
  aspect-ratio: 3/4;
  max-width: none;
  width: auto;
  margin: -20px -16px 22px;   /* 상단 패딩까지 먹어서 헤더 바로 아래부터 시작 */
  border: none;
  border-radius: 0;
}
.wt-hero::after {
  content: ''; position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; height: 34%;
  background: linear-gradient(180deg, rgba(7,7,14,0), var(--wt-bg) 94%);
  pointer-events: none;
}
.wt-hero-art {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(127,90,240,.34), transparent 55%),
    radial-gradient(90% 70% at 80% 90%, rgba(79,182,217,.22), transparent 60%),
    linear-gradient(160deg, #141415, #000000);
}
.wt-hero-art::after { background-image: repeating-linear-gradient(135deg, #F0D89B 0 1px, transparent 1px 16px); }
.wt-hero-seal { color: rgba(232,196,106,.26); }

/* ── 챕터 머리/본문 ── */
.wt-chap-no { color: #000000; background: var(--wt-gold); }
.wt-chap-title { color: #F2F0EC; }
.wt-chap-body { color: #C9C7C2; }
.wt-p { color: #A9A7A2; }
.wt-sub { color: var(--wt-text); border-left-color: var(--wt-cyan); }
.wt-list li { color: #A9A7A2; }
.wt-list li::before { color: var(--wt-gold); }
.wt-p strong, .wt-list strong { color: #F2F0EC; }
.wt-quote { border-left-color: var(--wt-gold); background: rgba(232,196,106,.08); color: #C9C7C2; }

/* 형광펜 — 티저의 금색 강조와 맞춤 */
mark.wt-hl {
  background: linear-gradient(180deg, transparent 40%, rgba(232,196,106,.40) 40%);
  color: #F2F0EC;
}

/* 표 */
.wt-table-wrap { border-color: #26262A; }
.wt-table th { background: #1C1C1E; color: var(--wt-gold); border-bottom-color: #38363C; }
.wt-table td { border-bottom-color: #26262A; color: #A9A7A2; }
.wt-table td.wt-td-key { color: var(--wt-cyan); }

/* 하단 네비 — CTA는 티저와 같은 금색 */
.wt-nav { background: linear-gradient(180deg, rgba(7,7,14,0), var(--wt-bg) 34%); }
.wt-nav-btn { background: #1C1C1E; color: #F2F0EC; border-color: #26262A; }
.wt-nav-next {
  background: linear-gradient(135deg, #F8EBC6, #DFC684); color: #000000;
  box-shadow: 0 6px 20px rgba(232,196,106,.34);
}
.wt-nav-toc { background: #1C1C1E; color: var(--wt-gold); border-color: #26262A; }
.wt-nav-count { color: var(--wt-dim); }

/* 목차 오버레이 */
.wt-toc-box { background: #131313; border-color: #26262A; }
.wt-toc-head { color: var(--wt-gold); }
.wt-toc-item { border-bottom-color: #252525; }
.wt-toc-item:active { background: #1C1C1E; }
.wt-toc-i { color: #000000; background: var(--wt-gold); }
.wt-toc-t { color: #C9C7C2; }

/* 인쇄 시에는 풀블리드 마진이 잘리므로 원래대로 */
@media print {
  .wt-hero { margin: 0 auto 18px; max-width: 340px; border-radius: 16px; }
  .wt-hero::after { display: none; }
}

/* 표지에 캐릭터 그림이 들어갈 때 — 그림을 꽉 채우고 글자는 아래쪽 어둠 위에 */
.wt-cover-photo {
  border:none; border-radius:0; min-height:86vh; align-items:flex-end;
  /* 챕터 컷과 마찬가지로 page-body 패딩을 상쇄해 화면 가장자리까지 채운다 */
  margin:-20px -16px 0; width:auto;
}
.wt-cover-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.wt-cover-photo .wt-cover-bg { z-index:2;
  background:linear-gradient(180deg, rgba(7,7,14,.15) 0%, rgba(7,7,14,.05) 34%, rgba(7,7,14,.9) 76%, #000000 100%); }
.wt-cover-photo .wt-cover-bg::after { display:none; }
.wt-cover-photo .wt-cover-inner { position:relative; z-index:3; padding:0 24px 44px; width:100%; }

/* .wt-reader 는 flex 컬럼(.result-section)의 아이템이라 margin:0 auto 때문에
   내용 폭으로 줄어들고 있었다 → 폭을 채워야 컷이 화면 끝까지 간다 */
.wt-reader { width: 100%; }

/* ===== 무료 리포트 하단: 누적 이용고객 + 실제 리뷰 섹션 ===== */
.wtrev-count { text-align: center; margin-bottom: 28px; }
.wtrev-count-num { display: inline-block; font-size: clamp(26px, 8vw, 34px); font-weight: 900; letter-spacing: -.5px;
  background: linear-gradient(90deg,#F0D89B,#D5D2CB); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wtrev-count-unit { font-size: 20px; margin-left: 2px; }
.wtrev-count-label { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.5); letter-spacing: .5px; }
/* ── 후기 칸 — 「족자」 (2026-09-18 JH 확정 · 시안판 «티저 후기 칸» F안) ──────────────
   위아래 나무 봉(축) 사이 비단 한 폭에 후기를 적어 건 모양. 후기 사이는 작은 매듭으로 나눈다.
   문양은 위 :root 의 --orn-* (티저가 이미 쓰는 그림) — 새 그림 없음.
   ⚠️ 티저(.wt2-*) 밖, 미리보기(#preview-reviews)에서도 쓰이므로 --wt2-* 변수에 기대지 않는다.
   ⚠️ 봉이 비단보다 양옆 10px 씩 튀어나온다 — 바깥 여백(margin)을 10px 아래로 줄이면 화면이 옆으로 밀린다. */
.wtrev {
  --wtrev-gold-hi: #F3DC9B; --wtrev-gold: #C9A24B; --wtrev-gold-lo: #8A6A2A; --wtrev-seal: #A8402F;
  position: relative; margin: 30px 10px 0; padding-top: 34px; text-align: center;
}
.wt2-scene > .wtrev { margin: 0 -8px; }            /* 티저 장면은 양옆 24px 여백이 있어 조금 넓게 건다 */
/* 족자 앞 캐릭터 컷 — 네모로 자르고 위아래를 검게 녹인 뒤, 아래쪽에 명조 한마디를 겹쳐 앉힌다 (시안판 D안)
   ⚠️ 선택자에 .wt2-flow 를 같이 적은 건 `.wt2-flow .wt2-scene` 의 여백(34px)을 이기려는 것이다. */
.wt2-scene.wtrev-lead, .wt2-flow .wt2-scene.wtrev-lead { padding: 0 24px 4px; }
.wtrev-cut { position: relative; margin: 0 -24px; aspect-ratio: 1 / 1; overflow: hidden; }
.wtrev-cut img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; display: block; }
.wtrev-cut::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 56%, rgba(0,0,0,.82) 86%, #000 100%); }
.wtrev-say { position: relative; margin: -46px 0 0; font-family: var(--font-serif); font-size: 23px; font-weight: 700; line-height: 1.5;
  color: #F2F0EC; text-align: center; word-break: keep-all; }
.wtrev-cord { position: absolute; left: 50%; top: 0; width: 150px; height: 36px; transform: translateX(-50%); }
.wtrev-rod { position: relative; z-index: 2; height: 15px; margin: 0 -7px; border-radius: 8px;
  background: linear-gradient(180deg, #4A3520 0%, #22160B 55%, #3A2815 100%); box-shadow: 0 6px 14px rgba(0,0,0,.7); }
.wtrev-rod::before, .wtrev-rod::after { content: ''; position: absolute; top: -2px; bottom: -2px; width: 13px; border-radius: 4px;
  background: linear-gradient(180deg, var(--wtrev-gold-hi), var(--wtrev-gold) 45%, var(--wtrev-gold-lo)); }   /* 봉 끝 금색 마구리 */
.wtrev-rod::before { left: -3px; }
.wtrev-rod::after { right: -3px; }
.wtrev-silk { position: relative; padding: 0 22px; overflow: hidden;
  background: linear-gradient(180deg, #17130B 0%, #0E0C07 50%, #15110A 100%);
  border-left: 1px solid rgba(201,162,75,.4); border-right: 1px solid rgba(201,162,75,.4); }
.wtrev-silk::before { content: ''; position: absolute; inset: 0; background: var(--orn-circle) 0 0 / 74px 74px repeat; opacity: .035; pointer-events: none; }   /* 비단 무늬 */
.wtrev-silk::after { content: ''; position: absolute; inset: 0 7px; border-left: 1px solid rgba(201,162,75,.18); border-right: 1px solid rgba(201,162,75,.18); pointer-events: none; }
.wtrev-silk > * { position: relative; }
.wtrev-band { height: 14px; margin: 16px -22px; background: var(--orn-flower) left center / auto 14px repeat-x; opacity: .95; }
.wtrev-head { padding: 14px 0 4px; }
.wtrev-seal { width: 40px; height: 40px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 14px; font-weight: 900; line-height: 1.08; color: #F3EBDD;
  background: var(--wtrev-seal); border-radius: 4px; transform: rotate(-4deg); }
.wtrev-title { font-family: var(--font-serif); font-size: 23px; font-weight: 700; letter-spacing: -.2px; color: #fff; word-break: keep-all; }
.wtrev-sub { margin-top: 8px; font-size: 13px; color: #8E8C88; word-break: keep-all; }
.wtrev-avg { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 99px;
  border: 1px solid rgba(201,162,75,.35); font-size: 12.5px; color: #8E8C88; }
.wtrev-avg b { font-family: var(--font-serif); font-size: 17px; color: var(--wtrev-gold-hi); }
.wtrev-knot { height: 12px; margin: 24px 0 22px;
  background: var(--orn-knot) center / auto 12px no-repeat,
    linear-gradient(rgba(201,162,75,.25), rgba(201,162,75,.25)) left center / calc(50% - 14px) 1px no-repeat,
    linear-gradient(rgba(201,162,75,.25), rgba(201,162,75,.25)) right center / calc(50% - 14px) 1px no-repeat; }
.wtrev-item { padding: 6px 2px 4px; }
.wtrev-body { font-family: var(--font-serif); font-size: 15.5px; font-weight: 500; line-height: 1.9; color: #F2F0EC;
  white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.wtrev-meta { margin-top: 12px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 9px; font-size: 12.5px; color: #8E8C88; }
.wtrev-stars { display: inline-flex; gap: 2px; font-size: 12px; line-height: 1; }
.wtrev-stars i { font-style: normal; color: rgba(201,162,75,.22); }
.wtrev-stars i.on { background: linear-gradient(180deg, var(--wtrev-gold-hi), var(--wtrev-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wtrev-end { height: 14px; }


/* ============================================================
   연애 사주 티저 — "인연을 잇는 주작신녀" (#page-spouse-teaser)
   재물운 .wt2-* 구조를 그대로 쓰고 팔레트만 달빛/청동으로 잠근다.
   콘셉트: 달빛 · 흑백 · 청동 거울. 분홍/밝은 로맨스 톤 금지,
   붉은색(버건디)은 강조 카피에만 제한적으로 쓴다.
   ============================================================ */
#page-spouse-teaser {
  --wt2-bg: #090909;
  --wt2-gold: #ADAAA2;   /* 바랜 청동 */
  --wt2-cyan: #B5B9BE;   /* 달빛 은청 */
  --wt2-purple: #8E8C88;
  --wt2-text: #F0F0F1;
  --wt2-dim: #9BA2AC;
  --wt2-crimson: #B4736A; /* 강조 전용(제한 사용) */
  background: var(--wt2-bg);
  color: var(--wt2-text);
  padding: 0;
}
#spouse-teaser-root { max-width: 520px; margin: 0 auto; overflow-x: hidden; }

/* 히어로 독백 + 히어로 CTA */
.wt2-hero-say { font-size: 15px; line-height: 1.9; color: #DDDEE0; margin-bottom: 4px; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.wt2-hero-say + .wt2-title { margin-top: 16px; }
.wt2-hero-cta { max-width: 320px; margin-top: 26px; font-size: 16px; padding: 15px 0; }

/* 독백 블록 */
.wt2-mono-line { font-size: 17px; line-height: 1.95; color: #DFE0E2; margin-bottom: 22px; }
.wt2-mono-line:last-child { margin-bottom: 0; }
.wt2-mono-big {
  font-size: 23px; font-weight: 800; line-height: 1.62; margin: 30px 0;
  color: #EDECEC; text-shadow: 0 0 26px rgba(180,72,90,.35);
}
.wt2-mono-copy {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 21px; font-weight: 800; line-height: 1.6; color: var(--wt2-gold);
}
.wt2-mono-wrap { margin-top: 30px; }

/* 자기진단(□) / 가치 입증(✓) 리스트 */
.wt2-check { list-style: none; padding: 0; margin: 0; text-align: left; }
.wt2-check li {
  position: relative; padding: 16px 8px 16px 38px; font-size: 15px; line-height: 1.7;
  color: #D4D5D7; border-bottom: 1px solid rgba(255,255,255,.06);
}
.wt2-check li::before {
  content: ''; position: absolute; left: 6px; top: 18px; width: 16px; height: 16px;
  border: 1px solid rgba(198,180,137,.55); border-radius: 4px;
}
.wt2-check-on li::before {
  content: '✓'; border: none; color: var(--wt2-gold); font-size: 15px; font-weight: 800;
  top: 15px; left: 8px; width: auto; height: auto;
}

/* 미리보기(공개 항목) */
.wt2-pv { text-align: left; border: 1px solid rgba(159,182,212,.22); border-radius: 16px; overflow: hidden; background: rgba(159,182,212,.05); }
.wt2-pv-row { display: flex; gap: 14px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.wt2-pv-row:last-child { border-bottom: none; }
.wt2-pv-k { flex: 0 0 76px; font-size: 13px; font-weight: 700; color: var(--wt2-cyan); padding-top: 2px; }
.wt2-pv-v { flex: 1; font-size: 14.5px; line-height: 1.75; color: #E3E4E6; }

/* 잠금 목록(전체 리포트 유도 — 티저당 1회) */
.wt2-lock-h { font-size: 13.5px; font-weight: 700; color: var(--wt2-gold); margin-bottom: 10px; }
.wt2-lock ul { list-style: none; padding: 0; margin: 0; }
.wt2-lock li {
  position: relative; padding: 7px 0 7px 14px; font-size: 13.5px; line-height: 1.7; color: #BFC3CB;
}
.wt2-lock li::before { content: '·'; position: absolute; left: 2px; color: var(--wt2-gold); }

/* 실제 결과 예시 카드 */
.wt2-samples { display: grid; gap: 16px; text-align: left; }
.wt2-sample { border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 22px 20px; background: rgba(255,255,255,.03); }
.wt2-sample-t {
  font-size: 16px; font-weight: 800; margin-bottom: 12px; padding-left: 12px;
  position: relative; color: #F3F4F5;
}
.wt2-sample-t::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--wt2-crimson); }
.wt2-sample-b { font-size: 14px; line-height: 1.85; color: #C8CCD3; }

/* 상품 소개 */
.wt2-product .wt2-h2 { margin-bottom: 14px; }
.wt2-product .wt2-desc { color: var(--wt2-dim); }

/* 주작신녀 표지 — 컷 전체를 보여주고 카피는 그림 아래로(인물·부채가 글자에 가리지 않게).
   다른 서비스 히어로(재물운 등)는 기존 오버레이 방식 그대로 두고, 미래 배우자에만 적용한다. */
#page-spouse-teaser .wt2-hero { display: block; min-height: 0; padding: 0; }
#page-spouse-teaser .wt2-hero .wt2-art { position: static; width: 100%; height: auto; object-fit: contain; }
#page-spouse-teaser .wt2-hero .wt2-veil {
  position: absolute; left: 0; right: 0; top: auto; bottom: 0; height: 30%;
  background: linear-gradient(180deg, rgba(6,7,12,0), rgba(6,7,12,.75) 55%, var(--wt2-bg) 100%);
}
#page-spouse-teaser .wt2-hero .wt2-copy { padding: 10px 24px 64px; margin-top: -14px; }
#page-spouse-teaser .wt2-hero .wt2-title { text-shadow: 0 3px 18px rgba(0,0,0,.9); }

/* 인트로 영상 (티저 맨 위) — 컷 전체를 보여주고 아래에 캐릭터 소개 문구 */
.wt2-video { padding: 0; }
.wt2-vid { width: 100%; display: block; background: #000; }
.wt2-video .wt2-copy { padding: 30px 24px 46px; text-align: center; }
.wt2-vid-lead {
  font-size: 15px; letter-spacing: .04em; color: #E3E4E6; line-height: 1.7; margin-bottom: 14px;
}
.wt2-vid-name {
  font-size: clamp(26px, 8.6vw, 36px); font-weight: 900; letter-spacing: .06em; color: #F7F8F9;
  text-shadow: 0 0 30px rgba(159,182,212,.45);
}


/* 신라문화체(경주시 무료 배포 · 붓글씨체) — 주작신녀 인트로 제목 + 손님 이름용. 출처 표시 권장.
   ⚠️ 원본은 한글 전체 2.4MB라 **쓰는 글자만 남긴 서브셋(194KB)**을 직접 넣어 쓴다.
   글자 목록은 `frontend/fonts/_subset-chars.txt` 에 있고, script.js 의 BRUSH_CHARS 와 같아야 한다.
   ⚠️ (2026-09-02) 주작신녀 인트로 "나는 붉은 실을 잇는 남방 불새의 신녀" 때문에 **불·붉·잇**을 추가했다.
   → 이 폰트를 다른 문구에도 쓰려면 반드시 서브셋을 다시 만들어야 한다(없는 글자는 기본 폰트로 나옴).
     재생성: python -m fontTools.subset <원본.woff2> --text="쓸 글자들" --flavor=woff2 --output-file=fonts/shilla-culture-subset.woff2
     원본 출처: https://cdn.jsdelivr.net/npm/@noonnu/shilla-culture-b-bold@0.1.0/fonts/shillacultureb-bold-700.woff2 */
@font-face {
  font-family: 'ShillaCulture';
  src: url('/fonts/shilla-culture-subset.woff2?v=4') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.wt2-vid-lead, .wt2-vid-name { font-family: 'ShillaCulture', var(--font-sans); }
.wt2-vid-lead { font-size: clamp(17px, 5vw, 21px); letter-spacing: .02em; line-height: 1.75; }
.wt2-vid-name { font-size: clamp(34px, 12.5vw, 54px); letter-spacing: .1em; font-weight: 700; }


/* 이름 카드(컷 + 사용자 이름 + 한마디) */
.wt2-mt-s { margin-top: 18px; }
.wt2-nobrush { font-family: var(--font-sans); letter-spacing: .02em; }  /* 붓글씨 폰트에 없는 이름은 통째로 기본 폰트 */

/* 붓글씨 대사 블록 (컷 아래) */
.wt2-brush {
  font-family: 'ShillaCulture', var(--font-sans);
  font-weight: 700; font-size: clamp(23px, 7vw, 30px); line-height: 1.75; letter-spacing: .03em;
  color: #F5F6F7; text-shadow: 0 0 26px rgba(159,182,212,.35);
}


/* 사주팔자 컷 — 그림 위쪽 빈 하늘에 명식을 겹쳐 올린다 */
.wt2-mscut { padding: 0; position: relative; }
.wt2-mscut .wt2-vid { width: 100%; display: block; }
.wt2-mscut-over {
  position: absolute; left: 0; right: 0; top: 5%;
  padding: 0 20px; text-align: center; z-index: 2;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
.wt2-mscut-say { font-size: 14px; color: #DFE0E2; margin-bottom: 12px; }
.wt2-mscut .wt2-myeongsik { font-size: 15px; margin-bottom: 14px; }
.wt2-mscut .wt2-pillars { max-width: 330px; margin: 0 auto; }
.wt2-mscut .wt2-pcol { background: rgba(6,7,12,.55); backdrop-filter: blur(3px); }
@media (max-width: 380px) {
  .wt2-mscut-over { top: 4%; }
  .wt2-mscut .wt2-pillars { max-width: 290px; }
}

/* 자기진단 항목의 사주 근거(작게) */
.wt2-check-why { display: block; margin-top: 6px; font-size: 12px; color: var(--wt2-cyan); opacity: .85; }

/* 운명의 상대 프로필 카드 — 사진과 값은 블라인드(블러) 처리 */
.wt2-pcard {
  border: 1px solid rgba(198,180,137,.35); border-radius: 18px; padding: 20px;
  background: linear-gradient(165deg, rgba(159,182,212,.10), rgba(255,255,255,.02));
}
.wt2-pcard-photo {
  width: 100%; max-width: 240px; margin: 0 auto 22px; aspect-ratio: 1 / 1;
  border-radius: 12px; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,.1);
}
/* 크롭 위치는 아래쪽(70%)을 본다 — 프로필 사진 자리라 인물 얼굴이 아니라 소품 쪽이 잡혀야 한다. */
.wt2-pcard-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 72%;
  filter: blur(11px) saturate(.85); transform: scale(1.25);
}
.wt2-pcard-photo::after {
  content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 46px; font-weight: 800; color: rgba(255,255,255,.5); text-shadow: 0 2px 18px rgba(0,0,0,.7);
}
.wt2-pcard-rows { text-align: left; }
.wt2-pcard-row {
  display: flex; gap: 14px; align-items: baseline;
  padding: 14px 4px; border-top: 1px solid rgba(255,255,255,.08);
}
.wt2-pcard-row:first-child { border-top: none; }
.wt2-pcard-k { flex: 0 0 48px; font-size: 14px; font-weight: 700; color: var(--wt2-cyan); }
.wt2-pcard-v { flex: 1; font-size: 15px; line-height: 1.7; color: #EBECEE; }
.wt2-blind {
  font-weight: 400; filter: blur(5.5px); opacity: .9; user-select: none;
  -webkit-user-select: none; pointer-events: none;
}

/* 컷·영상을 위아래로 검게 페이드아웃시켜 글자 영역(검정 배경)과 자연스럽게 잇는다.
   마스크로 이미지 자체를 투명하게 빼서, 페이지 배경(#090909)이 그대로 비치게 하는 방식. */
.wt2-vid {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 74%, transparent 100%);
}
/* 맨 위 인트로 영상은 위쪽이 잘려 보이지 않게 아래로만 페이드 (뒤로가기 버튼 다음이 첫 장면) */
.wt2-back + .wt2-video .wt2-vid {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
/* 글자 영역은 배경과 같은 검정 위에 얹힌다. 컷 아래쪽이 이미 검게 사라지므로
   위 여백을 넉넉히 줘도 끊겨 보이지 않는다(이미지-글자 사이 숨 쉴 공간). */
.wt2-video .wt2-copy { margin-top: -18px; padding-top: 58px; padding-bottom: 58px; position: relative; z-index: 2; }

/* ============================================================
   연애 사주(주작신녀) 결과지 — #page-saju-result.wt-moonlight
   웹툰 리더 구조는 그대로 두고 팔레트만 티저(#page-spouse-teaser)와 같은
   달빛/청동으로 잠근다. 재물운 금색과 섞이지 않게 클래스로만 스코프.
   ============================================================ */
#page-saju-result.wt-moonlight {
  --wt-bg: #090909;
  --wt-gold: #ADAAA2;    /* 바랜 청동 */
  --wt-cyan: #B5B9BE;    /* 달빛 은청 */
  --wt-purple: #8E8C88;
  --wt-text: #F0F0F1;
  --wt-dim: #9BA2AC;
  --wt-crimson: #B4736A; /* 강조 전용(제한 사용) */
}
#page-saju-result.wt-moonlight .page-body {
  background-image:
    radial-gradient(circle at 50% -40px, rgba(159,182,212,.18), transparent 300px),
    radial-gradient(120% 60% at 50% 0%, rgba(198,180,137,.06), transparent 62%);
}
#page-saju-result.wt-moonlight .wt-cover-bg {
  background:
    radial-gradient(140% 90% at 50% 8%, rgba(159,182,212,.30), transparent 55%),
    radial-gradient(100% 60% at 50% 100%, rgba(198,180,137,.16), transparent 62%),
    linear-gradient(180deg, #181818, #090909);
}
#page-saju-result.wt-moonlight .wt-cover-title { text-shadow: 0 2px 22px rgba(159,182,212,.45); }
#page-saju-result.wt-moonlight .wt-cover-seal { letter-spacing: .28em; }
#page-saju-result.wt-moonlight .wt-nav-next {
  background: linear-gradient(135deg, #CAC8C2, #99968E); color: #0F0F0F;
}
#page-saju-result.wt-moonlight mark.wt-hl {
  background: linear-gradient(180deg, transparent 40%, rgba(180,72,90,.38) 40%);
  color: #F2F0F0;
}

/* ── 운명의 상대 프로필 / 네 연애의 모습 페이지 ── */
.ghp-lead {
  font-size: 16px; line-height: 1.95; color: #DDDEE0; text-align: center;
  margin: 4px 0 26px; font-weight: 600;
}
.ghp-sec-t {
  font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--wt-cyan);
  margin: 30px 0 12px;
}

/* ===== 운명의 상대 실루엣 =====
   아직 만나지 않은 사람이라 얼굴을 그릴 수 없다. **성별만 알아볼 만큼** 흐린 형상으로 세운다.
   고객이 여성이면 남성([data-sex="male"]), 남성이면 여성([data-sex="female"])이 뜬다 — 판단은 script.js partnerSex().
   전용 그림이 있으면 그 위에 덮이고, 없으면 아래 CSS 실루엣이 그대로 보인다(파일 없어도 자리가 안 빈다). */
.ghp-figure {
  position: relative; width: 100%; max-width: 240px; margin: 0 auto 22px;
  aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(168deg, #1A212E 0%, #0C1017 100%);
}
/* 실루엣은 별도 층에 그린다 — 여기에만 blur 를 걸어야 테두리·모서리가 뭉개지지 않는다.
   inset 을 음수로 줘서 흐려진 가장자리가 안쪽으로 말려들지 않게 한다. */
.ghp-figure::before {
  content: ''; position: absolute; inset: -14%;
  filter: blur(13px);
  /* 앞에 적은 것이 위에 온다: 머리 → (머리카락) → 어깨 */
  background:
    radial-gradient(ellipse 17% 14% at 50% 43%, rgba(214,226,240,.62), rgba(214,226,240,0) 74%),
    radial-gradient(ellipse 46% 31% at 50% 103%, rgba(206,219,236,.52), rgba(206,219,236,0) 72%);
}
/* 여성 — 어깨선을 좁히고, 머리 뒤로 어깨까지 내려오는 머리카락 덩어리를 하나 더 둔다 */
.ghp-figure[data-sex="female"]::before {
  background:
    radial-gradient(ellipse 15.5% 13% at 50% 43%, rgba(214,226,240,.62), rgba(214,226,240,0) 74%),
    radial-gradient(ellipse 24% 27% at 50% 52%, rgba(150,168,190,.42), rgba(150,168,190,0) 76%),
    radial-gradient(ellipse 37% 28% at 50% 104%, rgba(206,219,236,.5), rgba(206,219,236,0) 73%);
}
/* 전용 그림이 들어오면 실루엣 위를 덮는다.
   ⚠️ `.wt2-pcard-photo img`(티저 카드) 보다 우선해야 해서 클래스 두 개로 잡았다. */
.ghp-figure .ghp-figure-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  filter: blur(12px) saturate(.8) brightness(.92); transform: scale(1.16);
}
/* 결제 후(결과지) — 티저보다 덜 흐리게. 다 보여준다는 약속과 톤을 맞춘다. */
.ghp-figure-soft::before { filter: blur(9px); }
.ghp-figure-soft .ghp-figure-img { filter: blur(7px) saturate(.9) brightness(.95); transform: scale(1.1); }
@media (prefers-reduced-motion: no-preference) {
  .ghp-figure::before { animation: ghp-figure-breathe 5.5s ease-in-out infinite; }
}
@keyframes ghp-figure-breathe { 0%,100% { opacity:.9; } 50% { opacity:1; } }

/* 키워드 세 글자 */
.ghp-key-row { display: flex; gap: 9px; flex-wrap: wrap; }
.ghp-key {
  flex: 1 1 0; min-width: 84px; text-align: center; padding: 15px 8px;
  border: 1px solid rgba(159,182,212,.3); border-radius: 14px;
  background: rgba(159,182,212,.07); color: #F0F1F2;
  font-size: 15.5px; font-weight: 800; letter-spacing: .02em;
}

/* 프로필 표 */
.ghp-card {
  border: 1px solid rgba(159,182,212,.2); border-radius: 16px; overflow: hidden;
  background: rgba(159,182,212,.045);
}
.ghp-row { display: flex; gap: 14px; padding: 15px 17px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ghp-row:last-child { border-bottom: none; }
.ghp-k { flex: 0 0 88px; font-size: 13px; font-weight: 700; color: var(--wt-cyan); padding-top: 2px; }
.ghp-v { flex: 1; font-size: 14.5px; line-height: 1.75; color: #E5E6E7; }
.ghp-note { display: block; margin-top: 5px; font-size: 12px; color: #878D96; }

/* 조심할 유형 */
.ghp-warn {
  margin-top: 26px; padding: 18px 18px 16px; border-radius: 16px;
  border: 1px solid rgba(180,72,90,.35); background: rgba(180,72,90,.09);
}
.ghp-warn-t { font-size: 14px; font-weight: 800; color: #B6AFAE; margin-bottom: 8px; }
.ghp-warn p { font-size: 14px; line-height: 1.8; color: #DCD3D6; margin: 0; }

.ghp-foot {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13.5px; line-height: 1.8; color: var(--wt-dim); text-align: center;
}
.ghp-foot b { color: var(--wt-gold); }

/* 반복 패턴 목록 */
.ghp-pattern { list-style: none; padding: 0; margin: 0; }
.ghp-pattern li {
  position: relative; padding: 16px 4px 16px 34px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ghp-pattern li:last-child { border-bottom: none; }
.ghp-pattern li::before {
  content: '✓'; position: absolute; left: 6px; top: 15px;
  color: var(--wt-gold); font-size: 15px; font-weight: 800;
}
.ghp-pt { display: block; font-size: 15px; line-height: 1.75; color: #E3E4E6; }
.ghp-pw { display: block; margin-top: 6px; font-size: 12px; color: var(--wt-cyan); opacity: .8; }
.ghp-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.ghp-badges span {
  font-size: 12px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(198,180,137,.3); color: #C0BBAF; background: rgba(198,180,137,.07);
}

/* ============================================================
   결과지: 풀이 단위 페이지 (타이트사주 리더 벤치마크)
   장(章) = 간지 페이지(컷 + 풀이 목록), 풀이 = 각각 한 페이지.
   ============================================================ */

/* 장 간지 — 그 장에 담긴 풀이 목록 */
.wt-chap-intro { margin-bottom: 22px; }
.wt-chap-list { list-style: none; padding: 0; margin: 6px 0 0; counter-reset: none; }
.wt-chap-list li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 14px; margin-bottom: 9px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035);
  font-size: 15px; line-height: 1.6; color: #E0DED9; cursor: pointer;
}
.wt-chap-list li:active { background: rgba(255,255,255,.075); }
.wt-chap-list li > span {
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  color: #000000; background: var(--wt-gold);
}

/* 풀이 페이지 — 그림 없이 글만. 상단에 장 표시로 위치를 알려준다. */
.wt-puri-page { padding-top: 6px; }
.wt-puri-head { margin-bottom: 20px; }
.wt-puri-chap {
  display: inline-block; font-family: var(--font-serif);
  font-size: 11.5px; letter-spacing: .2em; color: var(--wt-gold);
  border: 1px solid rgba(232,196,106,.4); border-radius: 5px;
  padding: 3px 9px; margin-bottom: 13px;
}
.wt-puri-title {
  display: flex; align-items: baseline; gap: 11px;
  font-family: var(--font-serif); font-size: 21px; line-height: 1.4;
  font-weight: 800; color: #F2F0EC; margin: 0;
}
.wt-puri-title i {
  flex: 0 0 auto; font-style: normal; font-size: 26px; font-weight: 800;
  color: var(--wt-gold); opacity: .85;
}

/* 목차 2단(장 / 풀이) */
.wt-toc-chap .wt-toc-t { font-weight: 800; color: #F2F0EC; }
.wt-toc-sub { padding-left: 24px; }
.wt-toc-sub .wt-toc-i {
  width: 22px; height: 22px; font-size: 11px;
  color: var(--wt-gold); background: transparent;
  border: 1px solid rgba(232,196,106,.35);
}
.wt-toc-sub .wt-toc-t { font-size: 13.5px; font-weight: 500; color: #8E8C88; }

/* ⚠️ (2026-09-03) 예전에는 인쇄에서 소목차를 숨겼다(눌러서 이동하는 것이라 종이엔 쓸모없다고 봤다).
   사장님 지적: "간지 부분에 소목차들이 사라져있고" — 종이에서는 **그 장에 무엇이 담겼는지 알려주는
   목차**로서 오히려 필요하다. 게다가 숨기니 간지 한 쪽이 통째로 비었다. → 되살린다. */
@media print {
  .wt-chap-list { display: block !important; margin-top: 14px; }
  .wt-chap-list li { font-size: 15px; padding: 9px 0; background: none !important; }
  .wt-chap-list li > span { width: 24px; height: 24px; font-size: 12px; }
}

/* ============================================================
   앱 프레임 안쪽 배경 = 완전 검정 / 프레임 여백(양옆) = #18191A (2026-07-30)
   별 배경·보라/금색 글로우를 전부 걷어내고 중립 진회색 하나로 맞춘다.
   랜딩·상품상세·위저드·티저·결과지 전부 같은 배경.
   ============================================================ */
/* 배경 변수 자체를 바꿔 컷 하단 페이드·하단 네비 등 var(--wt-bg) 사용처가 함께 따라온다 */
#page-saju-result,
#page-saju-result.wt-moonlight { --wt-bg: #000; }

#page-saju-result,
#page-saju-result .page-body,
#page-saju-result .sub-header {
  background-color: var(--color-bg) !important;
  background-image: none !important;
}
/* 티저(재물운·미래배우자·직업·자녀·궁합)도 같은 배경 */
#page-wealth-teaser, #page-spouse-teaser,
#page-career-teaser, #page-child-teaser, #page-couple-teaser {
  --wt2-bg: #000;
  background: var(--color-bg);
}
/* 페이지 카드·간지·부록도 같은 배경 위에 얹히도록
   ⚠️ .wt-cover-bg 는 표지 그림 "위"에 깔리는 페이드 베일이다(z-index:2).
      여기에 단색을 주면 그림이 통째로 가려진다 → 페이드는 유지하고 끝색만 바꾼다. */
#page-saju-result .wt-page,
#page-saju-result .wt-cover {
  background: var(--color-bg);
}
#page-saju-result .wt-cover-bg {
  background: radial-gradient(140% 90% at 50% 8%, rgba(255,255,255,.05), transparent 55%), var(--color-bg);
}
#page-saju-result .wt-cover-photo .wt-cover-bg {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 34%, rgba(0,0,0,.9) 76%, #000 100%);
}
#page-saju-result .wt-cover-bg::after { background-image: none; }
#page-saju-result .wt-hero-art { background: var(--color-bg); }
#page-saju-result .wt-hero-art::after { background-image: none; }
#page-saju-result .wt-hero-seal { display: none; }
/* 컷 하단 페이드·하단 네비도 같은 배경에서 올라오도록 */
#page-saju-result .wt-hero::after { background: linear-gradient(180deg, rgba(0,0,0,0), #000 94%); }
#page-saju-result .wt-nav { background: linear-gradient(180deg, rgba(0,0,0,0), #000 34%); }

/* ── 남은 보랏빛 다크 톤을 중립 진회색으로 정리 (전 서비스 통일) ──
   카드/표/헤더가 #1C1C1C·#000000 처럼 보라 기가 섞여 있어 검정 배경 위에서 색이 겉돌았다. */
:root {
  --color-bg-card: #202124;   /* 배경보다 한 단계 밝은 중립 카드 */
  --color-border: #2E2F31;
}
#page-saju-input,
.wiz-step { background: var(--color-bg); }
.saju-table-wrap { background: var(--color-bg-card); }
#page-saju-result .result-table .saju-table { background: var(--color-bg-card); border-color: var(--color-border); }
:root { --color-dot-inactive: #3A3B3E; }

/* ── 뱃지: 꽉 찬 배경 (2026-08-01)
   테두리형은 상품 그림 위에서 묻혀 눈에 안 들어왔다. 배경을 채워 먼저 읽히게 한다.
   ⚠️ 배경을 채우는 순간 글씨 대비가 문제가 된다 —
      원래 테라코타(#B4736A)·회색(#8D8373)은 흰 글씨와 3.7 대비라 흐렸다.
      그래서 한 단계 진한 색을 쓴다(둘 다 흰 글씨와 5 이상).
      크림은 어떤 글씨를 얹어도 흰색은 안 되므로 --color-on-primary(먹색)를 쓴다. */
.pcard-badge,
.badge-free, .badge-hot, .badge-new {
  border: none;
  border-radius: 5px;
  padding: 3px 7px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);   /* 밝은 그림 위에서도 뱃지가 떠 보이게 */
}
.pcard-badge.badge-new,  .badge-new  { background: var(--color-primary); color: var(--color-on-primary); }
.pcard-badge.badge-hot,  .badge-hot  { background: #9A5F56; color: #fff; }  /* 진한 테라코타 */
.pcard-badge.badge-free, .badge-free { background: #6E655A; color: #fff; }  /* 진한 토프 */
/* 카테고리 태그는 더 조용하게 */
.pcard-tag {
  color: var(--color-text-secondary);
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 600;
}

/* ── 로그인 = 카카오 단일 버튼 (2026-07-31) ──
   페이지 전체를 세로 가운데 정렬하고, 버튼 하나만 놓는다. */
#page-login .page-body {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-bottom: 90px;   /* 시각적 중앙(헤더 높이 보정) */
}
#page-login .login-logo { padding: 0 0 40px; }
.login-only-kakao { width: 100%; max-width: 320px; text-align: center; }
.login-only-kakao .social-btn.kakao {
  width: 100%; flex: none;
  padding: 16px; border-radius: 12px;
  font-size: 16px; font-weight: 700;
}
.login-note {
  margin-top: 16px; font-size: 13px; line-height: 1.7;
  color: var(--color-text-light);
}
/* form.form-group 이 display:flex 라 hidden 속성을 덮어쓴다 → 명시적으로 숨김 */
#page-login #login-form[hidden] { display: none !important; }

/* 보관함 — 본문이 저장되지 않은 옛 결과 안내 */
.storage-nodata { font-size: 12.5px; color: var(--color-text-light); line-height: 1.6; }
.empty-msg .btn-outline-sm { display: block; margin: 14px auto 0; }

/* ============================================================
   결제 페이지 #page-checkout (2026-09-21 JH — 시안판 «결제 페이지 10차» 로 확정)
   티저 위에 올라오던 구매 시트(팝업)를 라이프리포트처럼 따로 된 페이지로 바꿨다.
   값은 라이프리포트 styles.css 의 .checkout-* 를 옮기고 색만 용신록(검정 바탕 · 금색 포인트)으로.
   위에서부터: 가로 썸네일 → «결제 금액» 카드(쿠폰 버튼 포함) → [필수] 동의 한 줄 → 고시(작은 한 줄)
   → 아래 결제 바(버튼만. «총 N원 할인받았어요!» 말풍선은 바 밖, 버튼 위에 떠 있다).
   ============================================================ */
#page-checkout { --ck-accent: var(--color-primary); --ck-card-bg: var(--color-bg-card); }
#page-checkout [hidden] { display: none !important; }
#page-checkout.active { display: flex; flex-direction: column; }
#page-checkout .sub-header { border-bottom: none; }
/* 끝을 넉넉히 비운다 — 말풍선이 결제 바 위에 떠 있어서, 끝까지 내렸을 때 맨 밑 고시 줄을 가리지 않게 */
#page-checkout .page-body { flex: 1; padding: 24px 20px 72px; }

.checkout-thumb-wrap { margin: 0 0 28px; }
.checkout-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover;
  border-radius: var(--dg-radius-md); background: var(--ys-fill); border: 1px solid var(--color-border); }

.checkout-heading { font-size: 16px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.3px; color: var(--color-text-primary); }
.checkout-card { background: var(--ck-card-bg); border-radius: var(--dg-radius-sm); padding: 16px; }
.checkout-rows { display: flex; flex-direction: column; gap: 16px; }
.checkout-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.checkout-row-label, .checkout-row-value { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.checkout-row-value { white-space: nowrap; }
.checkout-row.sub .checkout-row-label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); display: flex; align-items: center; gap: 8px; }
.checkout-row.sub .checkout-row-value { font-size: var(--fs-body-small); font-weight: 600; }
.checkout-row-value.minus { color: var(--ck-accent); }
.checkout-rate { display: inline-flex; align-items: center; background: var(--ck-accent); color: var(--color-on-primary);
  font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 20px; }
.checkout-check { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  background: var(--ck-accent); color: var(--color-on-primary); font-size: 10px; font-weight: 800; border-radius: 50%; }
.checkout-divider { height: 1px; background: var(--color-border); }
.checkout-row.total .checkout-row-label { font-size: 16px; }
.checkout-row.total .checkout-row-value { font-size: 16px; font-weight: var(--fw-extrabold); }

/* 쿠폰 버튼 — 두 줄(윗줄 버튼 이름, 아랫줄 작은 안내). 한 줄이면 좁은 폰에서 글이 중간에 끊긴다. */
.checkout-coupon-btn { width: 100%; margin-top: 16px; min-height: 56px; padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.35;
  background: transparent; border: 1px solid var(--color-border); border-radius: var(--dg-radius-md);
  font-size: 14px; font-weight: var(--fw-semibold); color: var(--dg-text-body); cursor: pointer; }
.checkout-coupon-count { display: block; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); word-break: keep-all; }
.checkout-coupon-count b { color: var(--ck-accent); }

/* [필수] 동의 한 줄 — 전문은 고시 표 «결제 동의 내용» 줄에 있다 */
.checkout-agree { display: flex; align-items: center; gap: 9px; margin: 20px 0 0; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.checkout-agree input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); flex: 0 0 auto; cursor: pointer; }
.checkout-agree b { color: var(--color-primary); font-weight: 700; }

/* 아래 결제 바 — 버튼까지만. 선·그림자 없음 */
.checkout-footer { position: sticky; bottom: 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--color-bg); }
.checkout-pay-wrap { position: relative; }
.checkout-saved-bubble { position: absolute; left: 50%; bottom: calc(100% + 12px); white-space: nowrap;
  background: var(--ck-accent); color: var(--color-on-primary); font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--dg-radius-full); box-shadow: 0 4px 14px rgba(0,0,0,.45);
  transform: translateX(-50%); animation: ckBob 1.6s ease-in-out infinite; }
.checkout-saved-bubble b { font-weight: 800; }
.checkout-saved-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--ck-accent); }
@keyframes ckBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .checkout-saved-bubble { animation: none; } }
.checkout-pay-btn { width: 100%; height: 56px; padding: 0; border: none; border-radius: var(--dg-radius-md);
  background: var(--color-primary); color: var(--color-on-primary); font-size: var(--fs-body); font-weight: 800; cursor: pointer; }
.checkout-pay-btn:active { background: var(--color-primary-dark); }
.checkout-pay-btn:disabled { background: var(--dg-surface-muted); color: var(--color-text-light); cursor: not-allowed; }

/* 티저 미리보기의 결제 버튼 — 동의 전에는 눌리지 않는다는 걸 색으로 */
.saju-submit-btn:disabled {
  opacity: .38; cursor: not-allowed; filter: grayscale(.5);
}

/* ── 나가려 할 때 붙잡는 안내창 ── */
.leave-dim {
  position: fixed; inset: 0; z-index: 1402; background: rgba(0,0,0,.66);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.leave-dim.show { opacity: 1; pointer-events: auto; }
.leave-box {
  position: fixed; z-index: 1403; left: 50%; top: 50%;
  width: min(330px, calc(100% - 48px));
  transform: translate(-50%, -46%) scale(.96);
  background: #1C1C1E; border: 1px solid var(--color-border);
  border-radius: 18px; padding: 24px 22px 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.leave-box.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.leave-title { font-size: 18px; font-weight: 800; color: var(--color-text-primary); line-height: 1.4; margin-bottom: 10px; }
.leave-title b { color: var(--color-accent-warn); }
.leave-desc { font-size: 13.5px; line-height: 1.65; color: var(--color-text-secondary); margin-bottom: 20px; }
.leave-out {
  width: 100%; padding: 14px 0; border-radius: 12px; margin-bottom: 9px;
  background: var(--color-bg-card-2); border: 1px solid var(--color-border);
  color: var(--color-text-secondary); font-size: 15px; font-weight: 600;
}
.leave-stay {
  width: 100%; padding: 15px 0; border-radius: 12px;
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: 15.5px; font-weight: 800;
}

/* ── 쿠폰 고르기(결제 페이지 위에 겹쳐 뜬다) ──────────────────
   결제 흐름을 끊지 않으려고 쿠폰함 화면 대신 여기서 고른다.
   껍데기는 이탈 방지 팝업(.leave-box)을 그대로 쓰고 목록만 얹는다. */
.coupon-pick-box { width: min(360px, calc(100% - 40px)); }
.coupon-pick-list { max-height: 46vh; overflow-y: auto; margin-bottom: 14px; }
.coupon-pick-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 13px; margin-bottom: 9px; border-radius: 12px;
  background: var(--color-bg-card-2); border: 1px solid var(--color-border);
}
.coupon-pick-item.on { border-color: var(--color-primary); }
.cp-amount {
  flex: 0 0 auto; font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  color: var(--color-accent-warn);
}
.cp-body { flex: 1 1 auto; min-width: 0; display: block; }
.cp-body b { display: block; font-size: 13.5px; font-weight: 700; color: var(--color-text-primary); }
.cp-body em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 12px; color: var(--color-text-light);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-check {
  flex: 0 0 auto; font-size: 12px; font-weight: 700;
  color: var(--color-text-secondary);
}
.coupon-pick-item.on .cp-check { color: var(--color-primary); }
.coupon-pick-clear {
  width: 100%; padding: 11px 0; border-radius: 10px; margin-top: 2px;
  background: transparent; border: 1px dashed var(--color-border);
  color: var(--color-text-light); font-size: 13px;
}
.coupon-pick-empty {
  padding: 26px 6px; text-align: center; line-height: 1.7;
  font-size: 13px; color: var(--color-text-light);
}
/* ============================================================
   약관·개인정보·환불 정책 문서 (2026-07-31)
   읽는 문서라 본문 폭·행간을 넉넉히. 표는 좁은 화면에서 가로 스크롤.
   ============================================================ */
.legal-doc { font-size: 14px; line-height: 1.85; color: var(--color-text-secondary); }
.legal-updated { font-size: 12.5px; color: var(--color-text-light); margin-bottom: 22px; }
.legal-doc h3 {
  font-family: var(--font-serif); font-size: 16px; font-weight: 800;
  color: var(--color-text-primary); margin: 28px 0 10px;
}
.legal-doc h3:first-of-type { margin-top: 0; }
.legal-doc p { margin-bottom: 12px; }
.legal-doc b { color: var(--color-text-primary); font-weight: 700; }
.legal-doc a { color: var(--color-primary); text-decoration: underline; }
.legal-doc ul { list-style: none; padding: 0; margin: 0 0 14px; }
.legal-doc ul li {
  position: relative; padding-left: 14px; margin-bottom: 8px;
}
.legal-doc ul li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-light);
}
.legal-note { font-size: 12.5px; color: var(--color-text-light); }
.legal-callout {
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent-warn);
  border-radius: 10px; padding: 14px 16px; background: rgba(255,255,255,.02);
}
.legal-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 16px;
  font-size: 13px; display: block; overflow-x: auto;
}
.legal-table th, .legal-table td {
  border: 1px solid var(--color-border); padding: 9px 11px; text-align: left; vertical-align: top;
}
.legal-table th { background: var(--color-bg-card); color: var(--color-text-primary); font-weight: 700; white-space: nowrap; }
.legal-company {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--color-border);
  font-size: 12.5px; line-height: 1.9; color: var(--color-text-light);
}
.legal-company p { margin: 0; }
/* 결제 전 필수 고지 */
.pay-consent {
  font-size: 12.5px; line-height: 1.8; color: var(--color-text-light);
  margin: 4px 0 16px; text-align: center;
}
.pay-consent a { color: var(--color-text-secondary); text-decoration: underline; }
.pay-consent b { color: var(--color-accent-warn); }

/* ===== 판매 가격 표시 (2026-08-09) =====
   전자상거래법상 판매 조건(정가·할인·판매가)은 상품 목록과 상품 상세 양쪽에서 보여야 한다.
   값은 PRICES 표 하나에서만 나온다 — 카드·상세·결제 시트·티저가 절대 어긋나지 않게. */
.pcard-price {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: auto;
}
.pcard-disc { font-size: 12px; font-weight: 800; color: var(--color-accent-warn); letter-spacing: -0.2px; }
.pcard-orig { font-size: 11.5px; color: var(--color-text-light); text-decoration: line-through; }
.pcard-sale { font-size: 14.5px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; }

/* 상품 상세 — CTA 바로 위 */
.service-price {
  position: relative; z-index: 3;
  margin: 0 16px 14px; padding: 14px 16px;
  background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.sprice-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--color-text-light); padding: 3px 0;
}
.sprice-row s { color: var(--color-text-light); }
.sprice-row em { font-style: normal; color: var(--color-accent-warn); font-weight: 700; }
.sprice-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--color-border);
}
.sprice-total span { font-size: 13.5px; color: var(--color-text-secondary); }
.sprice-total b { font-size: 21px; font-weight: 800; color: var(--color-primary); letter-spacing: -0.5px; }
.sprice-note {
  margin: 9px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--color-text-light);
}

/* 푸터 고객상담 메일 — 상담 창구가 메일 하나뿐이라 누를 수 있다는 게 보여야 한다. */
.footer-mail { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-mail:hover { color: var(--color-primary); }

/* ── 회원 탈퇴 (2026-08-09) ──
   되돌릴 수 없는 동작이라 눈에 잘 띄지 않게(맨 아래·작게) 두되, 찾을 수는 있어야 한다. */
.mypage-menu li.withdraw-item {
  justify-content: center; font-size: 12.5px; color: var(--color-text-light);
}
.mypage-menu li.withdraw-item:hover { color: var(--color-accent-warn); }

.withdraw-box { width: min(360px, calc(100% - 40px)); text-align: left; }
.withdraw-desc { text-align: left; }
.withdraw-list {
  margin: 10px 0 12px; padding-left: 18px;
  font-size: 13px; line-height: 1.75; color: var(--color-text-secondary);
}
.withdraw-list b { color: var(--color-accent-warn); }
.withdraw-keep {
  margin: 0 0 14px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--color-bg-card-2); font-size: 12px; line-height: 1.6; color: var(--color-text-light);
}
.withdraw-ask { margin: 0 0 8px; font-size: 13px; color: var(--color-text-secondary); }
.withdraw-input {
  width: 100%; padding: 11px 13px; margin-bottom: 14px;
  background: var(--color-bg-card-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-text-primary);
  font-size: 14px; font-family: var(--font-sans);
}
.withdraw-input:focus { outline: none; border-color: var(--color-accent-warn); }
.withdraw-box .leave-out:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   모바일 우선 안전망 (2026-08-10)
   손님 대부분이 휴대폰으로 본다. 아래는 "화면이 좁고 세로가 짧을 때"
   흔히 터지는 문제를 통째로 막아 두는 규칙들이다.
   ⚠️ 새 화면을 만들 때 지킬 것
     ① 높이를 100vh 로 고정하지 말 것 → 100dvh(주소창이 접히면 100vh 가 화면보다 커진다)
     ② 스크롤이 필요한 곳에 overflow:hidden 을 두지 말 것(내용이 잘리고 손님은 진행을 못 한다)
     ③ 큰 글씨는 px 고정 대신 clamp(최소, 화면비례, 최대)
   ============================================================ */

/* 가로로 눕혔을 때 iOS 가 글씨를 제멋대로 키우는 것을 막는다 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 어떤 그림·표도 화면 폭을 넘지 않게 — 넘치면 가로 스크롤이 생기고 잘려 보인다 */
img, video, canvas, svg, table, iframe { max-width: 100%; }

/* 주문번호·이메일처럼 띄어쓰기 없는 긴 글자가 상자를 뚫고 나가는 것 방지 */
body { overflow-wrap: break-word; }

/* 안내 문구(토스트)가 좁은 화면에서 화면 밖으로 나가던 것 — 길면 두 줄로 */
.toast { max-width: calc(100% - 32px); white-space: normal; text-align: center; line-height: 1.5; }

/* 두 번 눌림 확대(double-tap zoom) 때문에 버튼 반응이 300ms 늦는 것을 없앤다 */
button, a, .pcard, summary { touch-action: manipulation; }

/* 세로가 짧은 휴대폰(가로보기·구형 소형기기)에서 히어로가 화면을 다 먹지 않게 */
@media (max-height: 640px) {
  .service-hero { min-height: 240px; }
  .service-hero-title { font-size: clamp(38px, 12vw, 56px); }
}


/* ═════════════════════════════════════════════════════════════════
   결과지 디자인 (전통 문양 · 카페24 클래식타입) (2026-08-20 적용)
   ═════════════════════════════════════════════════════════════════
   문양은 images/문양/ 의 벡터를 그대로 쓴다(설명은 그 폴더의 _안내.md).
   ⚠️ border-image 의 slice 숫자는 문양 모서리 크기다 — 건드리면 문양이 잘린다.
   ═════════════════════════════════════════════════════════════════ */

/* 제목 폰트 — 카페24 클래식타입.
   원본 536KB 전체를 넣으면 휴대폰에서 무거워서 완성형 한글 2350자로 줄였다(234KB).
   재생성: python -m fontTools.subset <원본.woff2> --text-file=fonts/_cafe24-subset-chars.txt --flavor=woff2
   원본 출처: https://cdn.jsdelivr.net/npm/@noonnu/cafe24-classic-type-regular@0.1.0/fonts/cafe24classictype-regular-normal.woff2
   ⚠️ 2350자 밖의 희귀 글자가 제목에 들어오면 그 글자만 기본 명조로 나온다. */
@font-face {
  font-family: 'Cafe24 Classictype';
  src: url('/fonts/cafe24-classictype-subset.woff2?v=1') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

#page-saju-result {
  --rp-bg:    #0D0D0D;   /* 배경 */
  --rp-orn:   #BFBFBF;   /* 모서리 문양·가운데 장식 */
  --rp-rule:  #6E6E6E;   /* 구분선 */
  --rp-title: #FFFFFF;   /* 장 표시·제목 */
  --rp-body:  #E4E2DE;   /* 본문 */
  --rp-dim:   #9A9894;   /* 보조 글자 */
  --rp-font:  'Cafe24 Classictype', 'Noto Serif KR', serif;
  background: var(--rp-bg);
}
#page-saju-result .page-body,
#page-saju-result .sub-header { background: var(--rp-bg); }

/* ── 위쪽 단계 점(●●●●) 제거 ── (2026-08-20 사장님 요청)
   입력→로딩→미리보기→결과 진행을 알려 주던 표시인데, 결과지는 이미 다 끝난 화면이라
   더 알려 줄 단계가 없다. 시안에도 없다.
   ⚠️ 승인 뒤 정식 적용할 때는 감추지 말고 index.html 505행의
      <div class="step-indicator">...</div> 줄을 **지우는 것**이 깔끔하다.
      (미리보기 화면 441행에 있는 것은 아직 쓰이므로 그대로 둔다) */
#page-saju-result .step-indicator { display: none; }

/* ── 페이지 테두리 ──
   (2026-08-20) 사장님이 추가로 주신 도안에 **세로형 페이지 프레임**이 통째로 있어서
   내가 모서리를 네 번 복사해 조립했던 것을 버리고 그걸로 갈아끈운다.
   모서리 장식 + 네 변의 곧은 선이 한 벌로 그려져 있어 더 자연스럽다.
   border-image 는 네 귀톱이를 그대로 두고 변만 늘려 주므로 페이지가 길어져도 안 찌그러진다.
   ⚠️ slice 170 = 모서리 장식의 크기(1146 기준). 이 숫자를 건드리면 문양이 잘린다.
   ⚠️ 표지(.wt-cover)와 장 간지(.wt-chap-cover)에는 두르지 않는다(그림을 가린다). */
#page-saju-result .wt-page:not(.wt-cover):not(.wt-chap-cover) {
  border: 26px solid transparent;
  border-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%221146%22 height=%222105%22 viewBox=%220 0 1145.593 2104.649%22 fill=%22%23BFBFBF%22><g transform=%22translate(-2224.871,-577.041)%22><path d=%22M2383.695,741.003h-43.763V697.24h43.763V741.003z M2347.932,733.003h27.763V705.24h-27.763    V733.003z%22/><path d=%22M2347.932,705.24h-43.763v-43.763h43.763V705.24z M2312.169,697.24h27.763v-27.763h-27.763V697.24z    %22/><path d=%22M2312.169,741.003h-43.763V697.24h43.763V741.003z M2276.406,733.003h27.763V705.24h-27.763    V733.003z%22/><path d=%22M2383.695,669.477h-43.763v-43.763h43.763V669.477z M2347.932,661.477h27.763v-27.763h-27.763    V661.477z%22/><path d=%22M3291.167,705.24h-43.763v-43.763h43.763V705.24z M3255.404,697.24h27.763v-27.763h-27.763V697.24z    %22/><path d=%22M3255.404,741.003h-43.764V697.24h43.764V741.003z M3219.641,733.003h27.764V705.24h-27.764    V733.003z%22/><path d=%22M3326.931,741.003h-43.764V697.24h43.764V741.003z M3291.167,733.003h27.764V705.24h-27.764    V733.003z%22/><path d=%22M3255.404,669.477h-43.764v-43.763h43.764V669.477z M3219.641,661.477h27.764v-27.763h-27.764    V661.477z%22/><path d=%22M2347.932,2597.255h-43.763v-43.764h43.763V2597.255z M2312.169,2589.255h27.763v-27.764h-27.763    V2589.255z%22/><path d=%22M2383.695,2561.491h-43.763v-43.763h43.763V2561.491z M2347.932,2553.491h27.763v-27.763h-27.763    V2553.491z%22/><path d=%22M2312.169,2561.491h-43.763v-43.763h43.763V2561.491z M2276.406,2553.491h27.763v-27.763h-27.763    V2553.491z%22/><path d=%22M2383.695,2633.018h-43.763v-43.763h43.763V2633.018z M2347.932,2625.018h27.763v-27.763h-27.763    V2625.018z%22/><path d=%22M3291.167,2597.255h-43.763v-43.764h43.763V2597.255z M3255.404,2589.255h27.763v-27.764h-27.763    V2589.255z%22/><path d=%22M3255.404,2561.491h-43.764v-43.763h43.764V2561.491z M3219.641,2553.491h27.764v-27.763h-27.764    V2553.491z%22/><path d=%22M3326.931,2561.491h-43.764v-43.763h43.764V2561.491z M3291.167,2553.491h27.764v-27.763h-27.764    V2553.491z%22/><path d=%22M3255.404,2633.018h-43.764v-43.763h43.764V2633.018z M3219.641,2625.018h27.764v-27.763h-27.764    V2625.018z%22/><rect x=%222268.406%22 y=%22737.003%22 width=%228%22 height=%221784.725%22/><rect x=%223318.931%22 y=%22737.003%22 width=%228%22 height=%221784.725%22/><rect x=%222379.695%22 y=%22625.714%22 width=%22835.945%22 height=%228%22/><rect x=%222379.695%22 y=%222625.018%22 width=%22835.945%22 height=%228%22/></g></svg>") 170 stretch;
  padding: 4px 6px 30px;
  background: var(--rp-bg);
}

/* ── 장 머리 — 가운데 장식 → 제 N 장 → 구분선 ── */
#page-saju-result .wt-chap-head,
#page-saju-result .wt-puri-head {
  text-align: center;
  margin: 0 0 26px;
  padding-top: 6px;
}
/* 가운데 장식 — 도안의 원형 뇌문 링(모서리 문양과 같은 결이라 화면이 하나로 읽힌다) */
#page-saju-result .wt-chap-head::before,
#page-saju-result .wt-puri-head::before {
  content: '';
  display: block;
  width: 38px; height: 38px;
  margin: 0 auto 16px;
  background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 729.760 729.761%22 fill=%22%23BFBFBF%22><g transform=%22translate(-510.201,-523.550)%22><path d=%22M578.177,1100.557c-42.786-59.777-67.976-133.008-67.976-212.125  c0-20.229,1.65-40.071,4.816-59.401l11.727,1.704c-3.088,18.775-4.698,38.047-4.698,57.697c0,76.486,24.333,147.288,65.668,205.098  L578.177,1100.557z M593.926,1120.967c-2.962-3.579-5.863-7.209-8.689-10.9l9.539-7.026c2.682,3.497,5.435,6.939,8.243,10.332  L593.926,1120.967z M624.884,1153.988c-8.113-7.646-15.876-15.66-23.262-24.015l9.097-7.596c7.04,7.949,14.432,15.578,22.153,22.862  L624.884,1153.988z M855.793,1252.804c-85.019-4.43-162.321-37.969-222.156-90.834l7.987-8.749  c57.805,51.012,132.432,83.395,214.506,87.739L855.793,1252.804z M716.569,572.898l6.615,9.952c-3.6,1.794-7.162,3.649-10.686,5.564  l-6.591-9.918l-6.573-9.888c3.513-1.934,7.058-3.815,10.638-5.634L716.569,572.898z M712.501,588.419  c30.313-16.462,63.392-28.479,98.372-35.143l-2.56-11.573c-28.337,5.427-55.467,14.254-80.962,26.018l-6.636-9.984  c30.865-14.432,64.075-24.686,98.912-29.999l1.653,11.731l3.309,23.469c-37.653,5.793-73.195,17.975-105.505,35.385L712.501,588.419  z M688.866,602.501c4.361-2.846,8.789-5.601,13.287-8.25l6.572,9.888c-4.381,2.57-8.695,5.24-12.944,8.003L688.866,602.501z   M588.538,703.158c5.114-7.894,10.547-15.563,16.276-22.989l-9.614-6.921c-27.334,35.499-48.065,76.342-60.358,120.696  l-11.816-1.716c14.083-51.642,39.223-98.722,72.725-138.538l8.797,7.929l8.802,7.932l0.007,0.007l8.802,7.932  c-8.583,10.279-16.55,21.09-23.848,32.376L588.538,703.158z M548.639,788.914c8.154-26.776,19.511-52.157,33.626-75.694l9.79,6.716  c-13.192,22.109-23.867,45.894-31.631,70.958L548.639,788.914z M543.63,807.188c0.557-2.279,1.137-4.55,1.739-6.81l11.735,1.97  c-1.793,6.63-3.38,13.343-4.761,20.133l-11.739-1.705h-0.001l-11.739-1.705l-11.739-1.704c0.9-4.564,1.889-9.097,2.958-13.598  l11.771,1.709L543.63,807.188z M533.999,879.782c0.401-16.083,1.917-31.889,4.47-47.345l11.727,1.703  c-2.476,14.922-3.95,30.183-4.349,45.712L533.999,879.782z M564.438,1029.596c-6.522-14.336-12.085-29.199-16.601-44.513  l11.664-2.351c4.277,14.334,9.513,28.253,15.614,41.696L564.438,1029.596z M622.131,1117.292c-3.411-3.771-6.741-7.619-9.984-11.54  l-9.094,7.593c-2.806-3.393-5.558-6.836-8.239-10.333l9.543-7.032c-3.241-4.222-6.386-8.521-9.43-12.894l10.081-6.263  c7.898,11.309,16.495,22.091,25.713,32.3L622.131,1117.292z M707.786,1185.817c-14.073-7.941-27.528-16.851-40.272-26.644  l7.83-8.932c12.005,9.181,24.661,17.554,37.884,25.038L707.786,1185.817z M856.467,1229.12c-15.849-0.853-31.412-2.788-46.612-5.735  l1.573-11.766c14.794,2.901,29.943,4.81,45.377,5.657L856.467,1229.12z M799.307,1209.005c-1.126-0.267-2.249-0.542-3.371-0.819  c-0.451-0.112-0.902-0.221-1.355-0.331C796.151,1208.249,797.726,1208.632,799.307,1209.005z M584.93,759.329  c6.583-14.772,14.26-28.949,22.931-42.428l-9.544-7.033c2.739-4.234,5.57-8.404,8.495-12.501l9.386,7.216l0.011,0.01l9.391,7.22  c-11.717,16.518-21.833,34.252-30.123,52.974L584.93,759.329z M566.615,812.946c3.556-14.586,8.12-28.777,13.613-42.495  l10.875,4.722c-6.492,16.265-11.629,33.218-15.269,50.721l-11.743-1.706h-0.001l-11.744-1.706c0.769-3.777,1.603-7.53,2.499-11.26  L566.615,812.946z M590.854,1029.972c-7.896-15.822-14.516-32.392-19.71-49.584l11.66-2.349  c6.045,19.745,14.041,38.637,23.753,56.457l-10.039,6.235l-0.025,0.017l-10.051,6.242l-0.01,0.007l-10.069,6.255  c-2.36-4.269-4.642-8.587-6.822-12.966l10.67-5.163L590.854,1029.972z M647.374,1109.63c-14.517-14.945-27.577-31.31-38.949-48.874  l-10.033,6.232l-0.014,0.008l-10.056,6.246c-2.068-3.204-4.087-6.443-6.049-9.719l10.059-6.248l0.01-0.007l10.036-6.232l0.029-0.018  l10.021-6.225c14.421,24.177,32.091,46.191,52.397,65.449l-7.958,8.717l-0.022,0.024l-7.966,8.725l-0.017,0.018l-7.966,8.725  l-0.01,0.01l-7.983,8.744c-3.833-3.618-7.589-7.317-11.255-11.102l2.56-2.437l6.017-5.722l8.573-8.154l0.015-0.015L647.374,1109.63z   M718.661,1164.759c-15.836-8.988-30.825-19.298-44.813-30.778l-7.796,8.892l-0.014,0.017l-7.793,8.89l-0.008,0.01l-7.807,8.905  c-2.967-2.453-5.894-4.953-8.78-7.501l7.983-8.744l0.008-0.01l0,0l7.969-8.727l0.015-0.016l7.969-8.728l0.02-0.021l7.959-8.718  c15.527,13.631,32.451,25.708,50.524,36L718.661,1164.759z M857.144,1205.429c-19.085-1.063-37.718-3.813-55.755-8.104  l-1.576,11.798l-0.091-0.021l-0.06-0.014l0.151,0.035l-1.579,11.798c-19.879-4.581-39.091-10.898-57.472-18.786l4.639-10.889  l0.007-0.015l4.641-10.886c-3.636-1.561-7.236-3.186-10.799-4.876l-4.642,10.893l-0.004,0.01l-4.643,10.894l-0.003,0.006  l-4.648,10.906c-4.226-1.986-8.406-4.05-12.539-6.194l5.435-10.525l0.004-0.008l5.429-10.512l0.005-0.011l5.427-10.51l0.008-0.018  l5.423-10.504c9.954,5.167,20.226,9.801,30.781,13.866l-3.422,11.359l-0.002,0.013l-3.422,11.363  c9.503,3.605,19.218,6.783,29.12,9.508l2.974-11.465c-5.91-1.628-11.748-3.424-17.512-5.381l3.418-11.349  c25.65,8.744,52.834,14.175,81.044,15.776L857.144,1205.429z M548.936,934.296l11.729-1.635l-0.021-0.154l11.733-1.625  c1.689,12.153,4.105,24.074,7.18,35.727l-11.606,2.339l-0.032,0.006l-11.601,2.338l-11.632,2.343l-11.633,2.342  c-0.983-3.857-1.924-7.732-2.779-11.639L542,962.489l11.728-1.847l11.712-1.846c-0.872-3.844-1.674-7.716-2.403-11.612  l-11.706,1.843l-11.706,1.844c-3.558-19.232-5.508-39.027-5.694-59.245l11.847,0.071l11.822,0.071  c-0.011-1.112-0.017-2.224-0.017-3.337c0-17.916,1.486-35.483,4.337-52.59l11.727,1.703c-2.774,16.551-4.219,33.548-4.219,50.887  c0,10.357,0.521,20.594,1.529,30.688l-11.749,1.628c-0.574-5.685-0.999-11.414-1.271-17.182l-11.812,0.461  C546.604,914.245,547.548,924.341,548.936,934.296z M645.391,620.336L645.391,620.336l8.278,8.504  c-11.541,9.857-22.417,20.47-32.553,31.761l8.805,7.936c16.715-18.621,35.516-35.333,56.043-49.757l-2.179-3.038l-4.733-6.595  c-4.521,3.179-8.961,6.464-13.315,9.854l-8.043-8.746h-0.001c12.028-9.415,24.685-18.068,37.895-25.883l-6.557-9.865  c-31.976,18.993-60.799,42.731-85.507,70.243l8.791,7.922C622.624,641.188,633.674,630.385,645.391,620.336z M1171.986,1100.557  c42.785-59.777,67.975-133.008,67.975-212.125c0-20.229-1.65-40.071-4.818-59.401l-11.725,1.704  c3.088,18.775,4.698,38.047,4.698,57.697c0,76.486-24.331,147.288-65.667,205.098L1171.986,1100.557z M1156.235,1120.967  c2.962-3.579,5.863-7.209,8.689-10.9l-9.538-7.026c-2.682,3.497-5.435,6.939-8.243,10.332L1156.235,1120.967z M1125.278,1153.988  c8.113-7.646,15.875-15.66,23.262-24.015l-9.097-7.596c-7.04,7.949-14.432,15.578-22.152,22.862L1125.278,1153.988z   M894.369,1252.804c85.019-4.43,162.322-37.969,222.156-90.834l-7.987-8.749c-57.805,51.012-132.432,83.395-214.506,87.739  L894.369,1252.804z M1033.593,572.898l-6.615,9.952c3.6,1.794,7.162,3.649,10.686,5.564l6.593-9.918l6.572-9.888  c-3.513-1.934-7.058-3.815-10.638-5.634L1033.593,572.898z M1037.662,588.419c-30.314-16.462-63.393-28.479-98.373-35.143  l2.56-11.573c28.337,5.427,55.467,14.254,80.962,26.018l6.636-9.984c-30.865-14.432-64.073-24.686-98.912-29.999l-1.653,11.731  l-3.309,23.469c37.653,5.793,73.195,17.975,105.505,35.385L1037.662,588.419z M1061.297,602.501  c-4.362-2.846-8.79-5.601-13.289-8.25l-6.572,9.888c4.38,2.57,8.695,5.24,12.943,8.003L1061.297,602.501z M1161.624,703.158  c-5.114-7.894-10.546-15.563-16.276-22.989l9.614-6.921c27.334,35.499,48.067,76.342,60.358,120.696l11.816-1.716  c-14.082-51.642-39.223-98.722-72.723-138.538l-8.799,7.929l-8.802,7.932l-0.008,0.007l-8.801,7.932  c8.583,10.279,16.552,21.09,23.848,32.376L1161.624,703.158z M1201.522,788.914c-8.154-26.776-19.511-52.157-33.626-75.694  l-9.789,6.716c13.191,22.109,23.867,45.894,31.629,70.958L1201.522,788.914z M1206.532,807.188c-0.558-2.279-1.138-4.55-1.74-6.81  l-11.734,1.97c1.792,6.63,3.38,13.343,4.759,20.133l11.739-1.705h0.001l11.739-1.705l11.739-1.704  c-0.901-4.564-1.889-9.097-2.958-13.598l-11.771,1.709l0,0L1206.532,807.188z M1216.161,879.782  c-0.399-16.083-1.916-31.889-4.469-47.345l-11.727,1.703c2.476,14.922,3.95,30.183,4.349,45.712L1216.161,879.782z   M1185.724,1029.596c6.522-14.336,12.087-29.199,16.601-44.513l-11.664-2.351c-4.276,14.334-9.513,28.253-15.614,41.696  L1185.724,1029.596z M1128.029,1117.292c3.413-3.771,6.743-7.619,9.986-11.54l9.094,7.593c2.807-3.393,5.559-6.836,8.239-10.333  l-9.543-7.032c3.242-4.222,6.386-8.521,9.43-12.894l-10.082-6.263c-7.896,11.309-16.492,22.091-25.711,32.3L1128.029,1117.292z   M1042.374,1185.817c14.076-7.941,27.531-16.851,40.273-26.644l-7.83-8.932c-12.005,9.181-24.661,17.554-37.884,25.038  L1042.374,1185.817z M893.694,1229.12c15.849-0.853,31.412-2.788,46.612-5.735l-1.573-11.766  c-14.792,2.901-29.943,4.81-45.376,5.657L893.694,1229.12z M875.082,535.396c10.349,0,20.591,0.459,30.714,1.339l-0.785,11.822  c-9.863-0.864-19.843-1.314-29.929-1.314c-10.087,0-20.067,0.45-29.93,1.314l-0.785-11.822  C854.489,535.854,864.732,535.396,875.082,535.396z M875.082,559.087c13.111,0,26.039,0.791,38.75,2.28l1.653-11.733l1.654-11.734  l1.655-11.734c-14.336-1.711-28.917-2.616-43.712-2.616c-14.795,0-29.378,0.904-43.712,2.616l1.653,11.734l1.654,11.734  l1.654,11.733C849.043,559.878,861.969,559.087,875.082,559.087z M950.855,1209.005c1.126-0.267,2.248-0.542,3.371-0.819  c0.451-0.112,0.904-0.221,1.355-0.331C954.012,1208.249,952.436,1208.632,950.855,1209.005z M1165.232,759.329  c-6.583-14.772-14.26-28.949-22.931-42.428l9.544-7.033c-2.739-4.234-5.57-8.404-8.495-12.501l-9.386,7.216l-0.011,0.01l-9.389,7.22  c11.716,16.518,21.831,34.252,30.122,52.974L1165.232,759.329z M1183.548,812.946c-3.558-14.586-8.122-28.777-13.615-42.495  l-10.875,4.722c6.492,16.265,11.629,33.218,15.269,50.721l11.743-1.706h0.001l11.744-1.706c-0.769-3.777-1.603-7.53-2.5-11.26  L1183.548,812.946z M1159.308,1029.972c7.896-15.822,14.516-32.392,19.71-49.584l-11.658-2.349  c-6.046,19.745-14.041,38.637-23.754,56.457l10.039,6.235l0.027,0.017l10.05,6.242l0.01,0.007l10.071,6.255  c2.359-4.269,4.641-8.587,6.82-12.966l-10.67-5.163L1159.308,1029.972z M1102.788,1109.63c14.517-14.945,27.578-31.31,38.949-48.874  l10.033,6.232l0.014,0.008l10.056,6.246c2.068-3.204,4.087-6.443,6.049-9.719l-10.058-6.248l-0.01-0.007l-10.036-6.232l-0.029-0.018  l-10.021-6.225c-14.421,24.177-32.091,46.191-52.397,65.449l7.958,8.717l0.022,0.024l7.968,8.725l0.017,0.018l7.965,8.725l0.01,0.01  l7.984,8.744c3.832-3.618,7.588-7.317,11.254-11.102l-2.559-2.437l-6.017-5.722l-8.573-8.154l-0.016-0.015L1102.788,1109.63z   M1031.503,1164.759c15.835-8.988,30.824-19.298,44.813-30.778l7.795,8.892l0.016,0.017l7.792,8.89l0.008,0.01l7.807,8.905  c2.967-2.453,5.896-4.953,8.78-7.501l-7.983-8.744l-0.008-0.01l0,0l-7.969-8.727l-0.014-0.016l-7.969-8.728l-0.021-0.021  l-7.961-8.718c-15.527,13.631-32.45,25.708-50.523,36L1031.503,1164.759z M893.02,1205.429c19.084-1.063,37.716-3.813,55.753-8.104  l1.578,11.798l0.089-0.021l0.06-0.014l-0.149,0.035l1.578,11.798c19.879-4.581,39.093-10.898,57.472-18.786l-4.639-10.889  l-0.007-0.015l-4.641-10.886c3.636-1.561,7.236-3.186,10.8-4.876l4.641,10.893l0.004,0.01l4.644,10.894l0.004,0.006l4.646,10.906  c4.226-1.986,8.406-4.05,12.539-6.194l-5.434-10.525l-0.004-0.008l-5.429-10.512l-0.005-0.011l-5.427-10.51l-0.009-0.018  l-5.423-10.504c-9.952,5.167-20.226,9.801-30.781,13.866l3.421,11.359l0.005,0.013l3.422,11.363  c-9.505,3.605-19.219,6.783-29.121,9.508l-2.972-11.465c5.908-1.628,11.746-3.424,17.512-5.381l-3.419-11.349  c-25.65,8.744-52.835,14.175-81.044,15.776L893.02,1205.429z M875.082,582.779c98.753,0,186.551,46.847,242.429,119.515l9.392-7.221  c-58.044-75.48-149.243-124.139-251.82-124.139c-102.579,0-193.777,48.659-251.82,124.139l9.39,7.221  C688.529,629.626,776.327,582.779,875.082,582.779z M1201.226,934.296l-11.729-1.635l0.021-0.154l-11.732-1.625  c-1.691,12.153-4.107,24.074-7.181,35.727l11.606,2.339l0.032,0.006l11.601,2.338l11.632,2.343l11.633,2.342  c0.983-3.857,1.922-7.732,2.779-11.639l-11.727-1.849l-11.728-1.847l-11.712-1.846c0.872-3.844,1.674-7.716,2.403-11.612  l11.706,1.843l11.706,1.844c3.557-19.232,5.508-39.027,5.694-59.245l-11.847,0.071l-11.822,0.071  c0.013-1.112,0.019-2.224,0.019-3.337c0-17.916-1.487-35.483-4.339-52.59l-11.726,1.703c2.772,16.551,4.217,33.548,4.217,50.887  c0,10.357-0.521,20.594-1.527,30.688l11.748,1.628c0.575-5.685,1-11.414,1.272-17.182l11.811,0.461  C1203.557,914.245,1202.614,924.341,1201.226,934.296z M1104.771,620.336L1104.771,620.336l-8.278,8.504  c11.541,9.857,22.418,20.47,32.553,31.761l-8.805,7.936c-16.715-18.621-35.516-35.333-56.043-49.757l2.179-3.038l4.733-6.595  c4.521,3.179,8.961,6.464,13.315,9.854l8.044-8.746l0,0c-12.028-9.415-24.684-18.068-37.895-25.883l6.557-9.865  c31.977,18.993,60.801,42.731,85.507,70.243l-8.79,7.922C1127.538,641.188,1116.487,630.385,1104.771,620.336z M875.082,1253.311  L875.082,1253.311c-2.49,0-4.972-0.028-7.449-0.078l0.336-11.838l0.001-0.004l0.337-11.835l0.337-11.843  c1.674,0.032,3.35,0.052,5.027,0.06c-1.678-0.008-3.355-0.029-5.027-0.063l0.338-11.838c0.921,0.018,1.84,0.031,2.761,0.041  c-0.921-0.01-1.84-0.024-2.761-0.041l0.337-11.843c1.917,0.036,3.838,0.055,5.764,0.055c1.925,0,3.846-0.018,5.763-0.055  l0.337,11.843c-0.919,0.017-1.839,0.031-2.76,0.041c0.921-0.01,1.84-0.023,2.76-0.041l0.338,11.838  c-1.672,0.034-3.349,0.055-5.028,0.063c1.679-0.008,3.356-0.028,5.028-0.06l0.337,11.843l0.338,11.835v0.004l0.336,11.838  C880.053,1253.283,877.57,1253.311,875.082,1253.311z%22/></g></svg>") center/contain no-repeat;
}
/* 제 N 장 — 시안대로 한글 '제' + 숫자 + '장'.
   지금 앱은 한자(第 一 章)를 쓴다. 되돌리려면 script.js 의 wtChapterPage·
   wtChapterCoverPage·wtPuriPage 세 곳에서 표기만 바꾸면 된다. */
#page-saju-result .wt-chap-no,
#page-saju-result .wt-puri-chap {
  display: block;
  background: none;                     /* 지금은 금색 알약 배지 — 걷어낸다 */
  border: 0;
  padding: 0;
  color: var(--rp-title);
  font-family: var(--rp-font);
  font-size: clamp(23px, 6.6vw, 28px);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.2;
}
/* 장 표시 아래 구분선 — 가운데에 매듭 문양이 들어간다.
   매듭은 사장님이 주신 전통문양 SVG 원본에서 그대로 떼 왔다(110x74).
   선은 CSS 로 양쪽에 긋는다 — 그래야 본문 폭이 바뀌어도 매듭이 늘어나지 않는다.
   ⚠️ head::after 로 하면 안 된다. 머리 안에 소제목까지 들어 있어서 줄이 소제목 밑으로 내려간다. */
#page-saju-result .wt-chap-no::after,
#page-saju-result .wt-puri-chap::after {
  content: '';
  display: block;
  height: 17px;
  margin: 15px auto 0;
  background:
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 109.515 73.663%22 fill=%22%23BFBFBF%22><g transform=%22translate(-735.729,-481.251)%22><path d=%22M842.166,512.836L842.166,512.836v-0.002l-3.867-3.867c-3.08-3.08-8.094-3.08-11.174,0l-8.389,8.391   l-8.79-8.792l0,0l-0.508-0.508l-0.555-0.555l0,0l-7.863-7.861l4.769-4.767c2.704-2.706,2.704-7.112,0-9.818l-1.1-1.1   c-2.712-2.706-7.113-2.704-9.818,0l-4.767,4.769l-4.767-4.769c-2.708-2.704-7.109-2.704-9.818,0l-1.1,1.1   c-2.704,2.706-2.704,7.112,0,9.816l4.767,4.769l-8.924,8.924l0,0l-8.79,8.792l-8.389-8.391c-3.08-3.08-8.094-3.08-11.174,0   l-3.867,3.867c-1.491,1.493-2.313,3.476-2.313,5.587c0,2.109,0.822,4.092,2.313,5.585l3.869,3.869   c1.54,1.538,3.562,2.307,5.585,2.307c2.023,0,4.047-0.769,5.587-2.309l8.389-8.389l8.79,8.79l1.063,1.063l7.861,7.861l0,0   l-4.767,4.769c-2.704,2.705-2.704,7.109,0,9.814l1.1,1.104c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.029   l4.767-4.769l4.767,4.769c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.031l1.1-1.1   c2.704-2.706,2.704-7.111,0-9.818l-4.769-4.767l7.863-7.861l0,0l9.853-9.853l8.391,8.391c1.54,1.538,3.562,2.307,5.585,2.307   c2.023,0,4.047-0.769,5.587-2.309l3.867-3.867C845.244,520.926,845.244,515.916,842.166,512.836z M794.499,541.594l-4.395,4.396   l-8.792-8.792l4.396-4.395l4.396-4.395l8.791,8.791L794.499,541.594z M785.708,495.247l4.396-4.395l8.791,8.791l-4.395,4.396   l-4.395,4.396l-8.792-8.792L785.708,495.247z M791.167,509.497l4.395-4.396l4.395-4.396l7.863,7.861l-8.792,8.792L791.167,509.497z    M797.965,518.421l-7.861,7.861l-7.861-7.861l7.861-7.861L797.965,518.421z M795.935,485.022c2.041-2.047,5.644-2.049,7.689,0   l1.1,1.1c1.023,1.021,1.587,2.387,1.587,3.843c0,1.458-0.564,2.824-1.587,3.845l-4.767,4.769l-8.791-8.79L795.935,485.022z    M775.484,493.811c-1.023-1.021-1.587-2.387-1.587-3.845c0-1.456,0.564-2.822,1.587-3.843l1.1-1.1   c1.021-1.023,2.387-1.587,3.843-1.587c1.458,0,2.824,0.564,3.845,1.587l4.769,4.767l-4.396,4.395l-4.396,4.395L775.484,493.811z    M780.249,500.705l8.792,8.792l-7.861,7.861l-8.793-8.792L780.249,500.705z M752.02,526.81c-2.497,2.493-6.554,2.491-9.047,0.002   l-3.867-3.869v-0.002c-1.209-1.208-1.875-2.812-1.875-4.521c0-1.71,0.665-3.315,1.875-4.522l3.867-3.867   c1.247-1.249,2.885-1.871,4.523-1.871c1.638,0,3.276,0.622,4.522,1.871l8.391,8.389L752.02,526.81z M771.325,527.211l-8.79-8.791   l8.79-8.792l8.792,8.792l-4.396,4.395L771.325,527.211z M772.388,528.274l4.396-4.395l4.396-4.395l7.861,7.861l-4.396,4.395   l-4.396,4.395L772.388,528.274z M784.272,551.82c-2.043,2.045-5.646,2.045-7.689,0.002l-1.1-1.104   c-1.023-1.021-1.587-2.387-1.587-3.843c0-1.458,0.564-2.824,1.587-3.845l4.765-4.769l8.792,8.792L784.272,551.82z M806.311,546.875   c0,1.456-0.564,2.822-1.587,3.845l-1.1,1.1c-2.045,2.047-5.648,2.045-7.689,0l-4.769-4.767l4.395-4.396l4.395-4.396l4.767,4.769   C805.747,544.051,806.311,545.417,806.311,546.875z M799.957,536.135l-8.791-8.79l7.861-7.861l4.396,4.395l4.396,4.395   L799.957,536.135z M808.883,527.211l-4.396-4.395l-4.396-4.395l8.792-8.792l8.79,8.792L808.883,527.211z M841.101,522.943   l-3.865,3.867c-2.497,2.493-6.554,2.491-9.047,0.002l-8.391-8.391l8.391-8.389c2.493-2.497,6.552-2.497,9.045,0l3.867,3.867   l0.001-0.001C843.594,516.393,843.594,520.45,841.101,522.943z%22/></g></svg>") center center / auto 17px no-repeat,
    linear-gradient(var(--rp-rule), var(--rp-rule)) left  center / calc(50% - 17px) 1px no-repeat,
    linear-gradient(var(--rp-rule), var(--rp-rule)) right center / calc(50% - 17px) 1px no-repeat;
}

/* ── 소제목 ── */
#page-saju-result .wt-chap-title,
#page-saju-result .wt-puri-title {
  margin-top: 22px;
  color: var(--rp-title);
  font-family: var(--rp-font);
  font-size: clamp(17px, 4.9vw, 20px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-align: left;
  word-break: keep-all;
}
/* 풀이 번호 동그라미는 시안에 없다 — 제목 앞 숫자로만 남긴다 */
#page-saju-result .wt-puri-title i {
  all: unset;
  font-family: var(--rp-font);
  color: var(--rp-title);
}
#page-saju-result .wt-puri-title i::after { content: '. '; }

/* ── 본문 ── */
#page-saju-result .wt-chap-body {
  color: var(--rp-body);
  font-size: 14.5px;
  line-height: 1.95;
  letter-spacing: -.005em;
  word-break: keep-all;
}
#page-saju-result .wt-chap-body p { margin: 0 0 1.15em; }
#page-saju-result .wt-chap-body strong { color: #FFFFFF; font-weight: 700; }
#page-saju-result .wt-chap-body h3,
#page-saju-result .wt-chap-body h4 {
  font-family: var(--rp-font);
  font-weight: 400;
  color: var(--rp-title);
  margin: 1.7em 0 .7em;
}

/* ── 표·강조 등 나머지는 무채색으로 맞춘다 ── */
#page-saju-result .wt-chap-body table { border-color: #2E2E2E; }
#page-saju-result .wt-chap-body th { color: var(--rp-dim); background: #161616; }
#page-saju-result .wt-chap-body td { border-color: #2E2E2E; }
#page-saju-result mark.wt-hl {
  background: none;
  color: #FFFFFF;
  box-shadow: inset 0 -.42em 0 rgba(191,191,191,.18);
}

/* 작은 화면에서 테두리가 본문을 너무 밀지 않게 */
@media (max-width: 360px) {
  #page-saju-result .wt-page:not(.wt-cover):not(.wt-chap-cover) { border-width: 20px; padding: 2px 2px 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   위쪽 머리띠(헤더) 정리 (2026-08-20 사장님 요청)
   ① "사주 풀이 결과" 글자 삭제
   ② 뒤로가기 화살표 → 집 아이콘
      원래 이 버튼은 눌러도 '뒤로'가 아니라 **홈으로** 간다(router.go('main')).
      화살표는 그동안 실제 동작과 어긋나 있었던 셈이라, 아이콘을 바꾸는 게 맞다.
   ③ 스크롤을 내리면 사라지고, 올리면 다시 나타난다
      → 리포트는 길게 읽는 화면이라 머리띠가 계속 자리를 차지하면 아깝다.
   제목 삭제·아이콘 교체는 index.html 에 반영되어 있다.
   ══════════════════════════════════════════════════════════════════ */
/* 제목과 화살표는 index.html 에서 직접 지우고 집 아이콘 SVG 로 바꿨다.
   여기서는 모양만 다듬는다. */
#page-saju-result .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--rp-title);
}

/* 스크롤 방향에 따라 숨었다 나타난다. 붙였다 뗐다 하는 건 스크립트(_proposal-report.js)가 한다.
   sticky 라서 밀어 올려도 본문 위치가 흔들리지 않는다. */
#page-saju-result .sub-header {
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform;
}
#page-saju-result .sub-header.hdr-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}


/* ═════════════════════════════════════════════════════════════════
   럜딩 · 상품 상세 문양 (2026-08-20 적용)
   ═════════════════════════════════════════════════════════════════
   문양은 images/문양/ 의 벡터를 그대로 쓴다(설명은 그 폴더의 _안내.md).
   ⚠️ border-image 의 slice 숫자는 문양 모서리 크기다 — 건드리면 문양이 잘린다.
   ═════════════════════════════════════════════════════════════════ */

/* ── 공통: 매듭이 가운데 있는 구분선 ──
   매듭은 그림, 양옆 선은 CSS. 폭이 달라져도 매듭이 늘어나 찌그러지지 않는다. */
.orn-rule::after {
  content: '';
  display: block;
  height: 16px;
  margin: 14px auto 0;
  background:
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 109.515 73.663%22 fill=%22%239C9384%22><g transform=%22translate(-735.729,-481.251)%22><path d=%22M842.166,512.836L842.166,512.836v-0.002l-3.867-3.867c-3.08-3.08-8.094-3.08-11.174,0l-8.389,8.391   l-8.79-8.792l0,0l-0.508-0.508l-0.555-0.555l0,0l-7.863-7.861l4.769-4.767c2.704-2.706,2.704-7.112,0-9.818l-1.1-1.1   c-2.712-2.706-7.113-2.704-9.818,0l-4.767,4.769l-4.767-4.769c-2.708-2.704-7.109-2.704-9.818,0l-1.1,1.1   c-2.704,2.706-2.704,7.112,0,9.816l4.767,4.769l-8.924,8.924l0,0l-8.79,8.792l-8.389-8.391c-3.08-3.08-8.094-3.08-11.174,0   l-3.867,3.867c-1.491,1.493-2.313,3.476-2.313,5.587c0,2.109,0.822,4.092,2.313,5.585l3.869,3.869   c1.54,1.538,3.562,2.307,5.585,2.307c2.023,0,4.047-0.769,5.587-2.309l8.389-8.389l8.79,8.79l1.063,1.063l7.861,7.861l0,0   l-4.767,4.769c-2.704,2.705-2.704,7.109,0,9.814l1.1,1.104c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.029   l4.767-4.769l4.767,4.769c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.031l1.1-1.1   c2.704-2.706,2.704-7.111,0-9.818l-4.769-4.767l7.863-7.861l0,0l9.853-9.853l8.391,8.391c1.54,1.538,3.562,2.307,5.585,2.307   c2.023,0,4.047-0.769,5.587-2.309l3.867-3.867C845.244,520.926,845.244,515.916,842.166,512.836z M794.499,541.594l-4.395,4.396   l-8.792-8.792l4.396-4.395l4.396-4.395l8.791,8.791L794.499,541.594z M785.708,495.247l4.396-4.395l8.791,8.791l-4.395,4.396   l-4.395,4.396l-8.792-8.792L785.708,495.247z M791.167,509.497l4.395-4.396l4.395-4.396l7.863,7.861l-8.792,8.792L791.167,509.497z    M797.965,518.421l-7.861,7.861l-7.861-7.861l7.861-7.861L797.965,518.421z M795.935,485.022c2.041-2.047,5.644-2.049,7.689,0   l1.1,1.1c1.023,1.021,1.587,2.387,1.587,3.843c0,1.458-0.564,2.824-1.587,3.845l-4.767,4.769l-8.791-8.79L795.935,485.022z    M775.484,493.811c-1.023-1.021-1.587-2.387-1.587-3.845c0-1.456,0.564-2.822,1.587-3.843l1.1-1.1   c1.021-1.023,2.387-1.587,3.843-1.587c1.458,0,2.824,0.564,3.845,1.587l4.769,4.767l-4.396,4.395l-4.396,4.395L775.484,493.811z    M780.249,500.705l8.792,8.792l-7.861,7.861l-8.793-8.792L780.249,500.705z M752.02,526.81c-2.497,2.493-6.554,2.491-9.047,0.002   l-3.867-3.869v-0.002c-1.209-1.208-1.875-2.812-1.875-4.521c0-1.71,0.665-3.315,1.875-4.522l3.867-3.867   c1.247-1.249,2.885-1.871,4.523-1.871c1.638,0,3.276,0.622,4.522,1.871l8.391,8.389L752.02,526.81z M771.325,527.211l-8.79-8.791   l8.79-8.792l8.792,8.792l-4.396,4.395L771.325,527.211z M772.388,528.274l4.396-4.395l4.396-4.395l7.861,7.861l-4.396,4.395   l-4.396,4.395L772.388,528.274z M784.272,551.82c-2.043,2.045-5.646,2.045-7.689,0.002l-1.1-1.104   c-1.023-1.021-1.587-2.387-1.587-3.843c0-1.458,0.564-2.824,1.587-3.845l4.765-4.769l8.792,8.792L784.272,551.82z M806.311,546.875   c0,1.456-0.564,2.822-1.587,3.845l-1.1,1.1c-2.045,2.047-5.648,2.045-7.689,0l-4.769-4.767l4.395-4.396l4.395-4.396l4.767,4.769   C805.747,544.051,806.311,545.417,806.311,546.875z M799.957,536.135l-8.791-8.79l7.861-7.861l4.396,4.395l4.396,4.395   L799.957,536.135z M808.883,527.211l-4.396-4.395l-4.396-4.395l8.792-8.792l8.79,8.792L808.883,527.211z M841.101,522.943   l-3.865,3.867c-2.497,2.493-6.554,2.491-9.047,0.002l-8.391-8.391l8.391-8.389c2.493-2.497,6.552-2.497,9.045,0l3.867,3.867   l0.001-0.001C843.594,516.393,843.594,520.45,841.101,522.943z%22/></g></svg>") center center / auto 16px no-repeat,
    linear-gradient(#3A3A3E, #3A3A3E) left  center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(#3A3A3E, #3A3A3E) right center / calc(50% - 16px) 1px no-repeat;
}

/* ① 랜딩 — 상품 목록 제목 아래 */
#page-main .product-heading::after {
  content: '';
  display: block;
  height: 16px;
  margin: 16px auto 0;
  background:
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 109.515 73.663%22 fill=%22%239C9384%22><g transform=%22translate(-735.729,-481.251)%22><path d=%22M842.166,512.836L842.166,512.836v-0.002l-3.867-3.867c-3.08-3.08-8.094-3.08-11.174,0l-8.389,8.391   l-8.79-8.792l0,0l-0.508-0.508l-0.555-0.555l0,0l-7.863-7.861l4.769-4.767c2.704-2.706,2.704-7.112,0-9.818l-1.1-1.1   c-2.712-2.706-7.113-2.704-9.818,0l-4.767,4.769l-4.767-4.769c-2.708-2.704-7.109-2.704-9.818,0l-1.1,1.1   c-2.704,2.706-2.704,7.112,0,9.816l4.767,4.769l-8.924,8.924l0,0l-8.79,8.792l-8.389-8.391c-3.08-3.08-8.094-3.08-11.174,0   l-3.867,3.867c-1.491,1.493-2.313,3.476-2.313,5.587c0,2.109,0.822,4.092,2.313,5.585l3.869,3.869   c1.54,1.538,3.562,2.307,5.585,2.307c2.023,0,4.047-0.769,5.587-2.309l8.389-8.389l8.79,8.79l1.063,1.063l7.861,7.861l0,0   l-4.767,4.769c-2.704,2.705-2.704,7.109,0,9.814l1.1,1.104c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.029   l4.767-4.769l4.767,4.769c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.031l1.1-1.1   c2.704-2.706,2.704-7.111,0-9.818l-4.769-4.767l7.863-7.861l0,0l9.853-9.853l8.391,8.391c1.54,1.538,3.562,2.307,5.585,2.307   c2.023,0,4.047-0.769,5.587-2.309l3.867-3.867C845.244,520.926,845.244,515.916,842.166,512.836z M794.499,541.594l-4.395,4.396   l-8.792-8.792l4.396-4.395l4.396-4.395l8.791,8.791L794.499,541.594z M785.708,495.247l4.396-4.395l8.791,8.791l-4.395,4.396   l-4.395,4.396l-8.792-8.792L785.708,495.247z M791.167,509.497l4.395-4.396l4.395-4.396l7.863,7.861l-8.792,8.792L791.167,509.497z    M797.965,518.421l-7.861,7.861l-7.861-7.861l7.861-7.861L797.965,518.421z M795.935,485.022c2.041-2.047,5.644-2.049,7.689,0   l1.1,1.1c1.023,1.021,1.587,2.387,1.587,3.843c0,1.458-0.564,2.824-1.587,3.845l-4.767,4.769l-8.791-8.79L795.935,485.022z    M775.484,493.811c-1.023-1.021-1.587-2.387-1.587-3.845c0-1.456,0.564-2.822,1.587-3.843l1.1-1.1   c1.021-1.023,2.387-1.587,3.843-1.587c1.458,0,2.824,0.564,3.845,1.587l4.769,4.767l-4.396,4.395l-4.396,4.395L775.484,493.811z    M780.249,500.705l8.792,8.792l-7.861,7.861l-8.793-8.792L780.249,500.705z M752.02,526.81c-2.497,2.493-6.554,2.491-9.047,0.002   l-3.867-3.869v-0.002c-1.209-1.208-1.875-2.812-1.875-4.521c0-1.71,0.665-3.315,1.875-4.522l3.867-3.867   c1.247-1.249,2.885-1.871,4.523-1.871c1.638,0,3.276,0.622,4.522,1.871l8.391,8.389L752.02,526.81z M771.325,527.211l-8.79-8.791   l8.79-8.792l8.792,8.792l-4.396,4.395L771.325,527.211z M772.388,528.274l4.396-4.395l4.396-4.395l7.861,7.861l-4.396,4.395   l-4.396,4.395L772.388,528.274z M784.272,551.82c-2.043,2.045-5.646,2.045-7.689,0.002l-1.1-1.104   c-1.023-1.021-1.587-2.387-1.587-3.843c0-1.458,0.564-2.824,1.587-3.845l4.765-4.769l8.792,8.792L784.272,551.82z M806.311,546.875   c0,1.456-0.564,2.822-1.587,3.845l-1.1,1.1c-2.045,2.047-5.648,2.045-7.689,0l-4.769-4.767l4.395-4.396l4.395-4.396l4.767,4.769   C805.747,544.051,806.311,545.417,806.311,546.875z M799.957,536.135l-8.791-8.79l7.861-7.861l4.396,4.395l4.396,4.395   L799.957,536.135z M808.883,527.211l-4.396-4.395l-4.396-4.395l8.792-8.792l8.79,8.792L808.883,527.211z M841.101,522.943   l-3.865,3.867c-2.497,2.493-6.554,2.491-9.047,0.002l-8.391-8.391l8.391-8.389c2.493-2.497,6.552-2.497,9.045,0l3.867,3.867   l0.001-0.001C843.594,516.393,843.594,520.45,841.101,522.943z%22/></g></svg>") center center / auto 16px no-repeat,
    linear-gradient(#3A3A3E, #3A3A3E) left  center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(#3A3A3E, #3A3A3E) right center / calc(50% - 16px) 1px no-repeat;
}

/* ② 랜딩 — 푸터 위 꽃무늬 띠
   ⚠️ 한 칸을 91 로 잡았다(꽃 69 + 도안의 간격 22). 69 로 반복하면 꽃이 다닥다닥 붙는다. */
#page-main #main-footer {
  position: relative;
  border-top: 0;
  padding-top: 34px;
}
#page-main #main-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 15px;
  background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 91 69%22 fill=%22%233F3F46%22><g transform=%22translate(11,0)%22><g transform=%22translate(-223.836,-1564.506)%22><path d=%22M290.981,1633.929c-19.117,0-34.689-15.554-34.711-34.671l-0.001-0.698l0.697-0.031      c0.527-0.024,1.052-0.04,1.582-0.04c19.117,0,34.689,15.553,34.71,34.671l0.001,0.698l-0.697,0.031      C292.036,1633.912,291.511,1633.929,290.981,1633.929z M257.735,1599.959c0.397,17.992,15.166,32.513,33.246,32.513      c0.272,0,0.542-0.004,0.811-0.012c-0.396-17.993-15.164-32.513-33.244-32.513      C258.276,1599.947,258.005,1599.951,257.735,1599.959z%22/><path d=%22M258.547,1599.945c-0.531,0-1.056-0.016-1.582-0.04l-0.697-0.031l0.001-0.698      c0.023-19.117,15.594-34.67,34.711-34.67c0.531,0,1.057,0.016,1.581,0.04l0.697,0.032l-0.001,0.697      C293.236,1584.393,277.665,1599.945,258.547,1599.945z M257.735,1598.476c0.27,0.008,0.541,0.012,0.812,0.012      c18.08,0,32.849-14.521,33.244-32.512c-0.269-0.008-0.539-0.012-0.811-0.012      C272.901,1565.964,258.132,1580.484,257.735,1598.476z%22/><path d=%22M223.836,1633.923l0.001-0.763c0.021-18.585,14.572-33.796,33.126-34.63l0.763-0.034      l-0.002,0.763c-0.021,18.584-14.572,33.796-33.126,34.63L223.836,1633.923z M256.258,1600.029      c-17.148,1.162-30.545,15.165-30.953,32.361C242.452,1631.228,255.849,1617.224,256.258,1600.029z%22/><path d=%22M257.726,1599.94l-0.763-0.034c-18.554-0.835-33.105-16.046-33.126-34.63l-0.001-0.763      l0.763,0.034c18.554,0.834,33.105,16.045,33.126,34.63L257.726,1599.94z M225.304,1566.046      c0.408,17.195,13.805,31.198,30.953,32.361C255.849,1581.211,242.452,1567.208,225.304,1566.046z%22/></g></g></svg>") left center / auto 15px repeat-x;
  opacity: .85;
}

/* ③ 랜딩 — 푸터 배경 구름 (아주 옅게, 글씨를 방해하지 않는 세기) */
#page-main #main-footer::after {
  content: '';
  position: absolute;
  inset: 34px 0 0;
  background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 758.207 137.650%22 fill=%22%23FFFFFF%22><g transform=%22translate(-250.633,-949.059)%22><path d=%22M684.503,1086.709h-90.836c-7.204,0-13.064-5.86-13.064-13.064s5.86-13.064,13.064-13.064h19.372    c6.317,0,11.456-5.139,11.456-11.456c0-5.399-3.83-10.114-9.11-11.215l-2.428-0.245l-65.905,0.004    c-7.204,0-13.064-5.86-13.064-13.064c0-7.204,5.86-13.064,13.064-13.064h11.975c6.317,0,11.456-5.138,11.456-11.456    c0-6.317-5.138-11.456-11.456-11.456h-14.37c-0.154,0-0.307-0.01-0.46-0.021l-0.187-0.012l-0.104,0.012    c-0.153,0.01-0.306,0.021-0.46,0.021h-11.503c-0.156,0-0.307-0.01-0.459-0.021l-0.19-0.012l-0.104,0.012    c-0.153,0.01-0.306,0.021-0.46,0.021h-11.503c-0.154,0-0.307-0.01-0.46-0.021l-0.187-0.012l-0.104,0.012    c-0.153,0.01-0.306,0.021-0.46,0.021h-11.503c-0.154,0-0.307-0.01-0.46-0.021l-0.187-0.012l-0.107,0.012    c-0.151,0.01-0.303,0.021-0.459,0.021h-11.503c-7.204,0-13.064-5.86-13.064-13.064s5.86-13.064,13.064-13.064h11.503    c0.156,0,0.307,0.01,0.459,0.021l0.19,0.012l0.104-0.012c0.153-0.01,0.306-0.021,0.46-0.021h11.503c0.154,0,0.307,0.01,0.46,0.021    l0.187,0.012l0.104-0.012c0.153-0.01,0.306-0.021,0.46-0.021h11.503c0.154,0,0.307,0.01,0.46,0.021l0.187,0.012l0.107-0.012    c0.151-0.01,0.303-0.021,0.459-0.021h11.503c0.154,0,0.307,0.01,0.46,0.021l0.187,0.012l0.104-0.012    c0.153-0.01,0.306-0.021,0.46-0.021h26.904c0.154,0,0.307,0.01,0.46,0.021l0.187,0.012l0.104-0.012    c0.153-0.01,0.306-0.021,0.46-0.021h11.503c0.154,0,0.306,0.01,0.459,0.021l0.19,0.012l0.104-0.012    c0.153-0.01,0.306-0.021,0.46-0.021h11.503c0.154,0,0.307,0.01,0.46,0.021l0.187,0.012l0.104-0.012    c0.153-0.01,0.306-0.021,0.46-0.021h11.503c0.154,0,0.307,0.01,0.46,0.021l0.187,0.012l0.107-0.012    c0.151-0.01,0.303-0.021,0.459-0.021h11.503c7.204,0,13.064,5.86,13.064,13.064s-5.86,13.064-13.064,13.064h-11.503    c-0.062,0-0.122-0.001-0.182-0.004v0.004c-6.317,0-11.456,5.139-11.456,11.456c0,6.317,5.138,11.456,11.456,11.456h147.188    c7.204,0,13.064,5.86,13.064,13.064c0,7.204-5.86,13.064-13.064,13.064h-93.175c-6.317,0-11.456,5.138-11.456,11.456    c0,6.317,5.138,11.456,11.456,11.456h19.757c7.204,0,13.064,5.86,13.064,13.064S691.706,1086.709,684.503,1086.709z     M593.666,1062.189c-6.317,0-11.456,5.139-11.456,11.456c0,6.317,5.138,11.456,11.456,11.456h90.836    c6.317,0,11.456-5.138,11.456-11.456c0-6.317-5.138-11.456-11.456-11.456h-19.757c-7.204,0-13.064-5.86-13.064-13.064    s5.86-13.064,13.064-13.064h93.175c6.317,0,11.456-5.139,11.456-11.456s-5.138-11.456-11.456-11.456H610.732    c-7.204,0-13.064-5.86-13.064-13.064c0-6.857,5.311-12.496,12.034-13.024v-0.04c0.117,0,0.234-0.009,0.35-0.016l0.215-0.013    l0.298,0.013c0.116,0.007,0.231,0.016,0.35,0.016h11.503c6.317,0,11.456-5.138,11.456-11.456s-5.138-11.456-11.456-11.456h-11.503    c-0.119,0-0.234,0.009-0.35,0.016l-0.216,0.013l-0.297-0.013c-0.116-0.007-0.232-0.016-0.35-0.016h-11.503    c-0.118,0-0.234,0.009-0.35,0.016l-0.215,0.013l-0.297-0.013c-0.116-0.007-0.232-0.016-0.35-0.016h-11.503    c-0.118,0-0.234,0.009-0.35,0.016l-0.215,0.013l-0.298-0.013c-0.116-0.007-0.232-0.016-0.35-0.016H572.77    c-0.118,0-0.234,0.009-0.35,0.016l-0.215,0.013l-0.297-0.013c-0.116-0.007-0.232-0.016-0.35-0.016h-26.904    c-0.118,0-0.234,0.009-0.35,0.016l-0.215,0.013l-0.297-0.013c-0.116-0.007-0.232-0.016-0.35-0.016h-11.503    c-0.119,0-0.234,0.009-0.35,0.016l-0.216,0.013l-0.297-0.013c-0.116-0.007-0.232-0.016-0.35-0.016h-11.503    c-0.118,0-0.234,0.009-0.35,0.016l-0.215,0.013l-0.297-0.013c-0.116-0.007-0.232-0.016-0.35-0.016h-11.503    c-0.118,0-0.234,0.009-0.35,0.016l-0.215,0.013l-0.298-0.013c-0.116-0.007-0.231-0.016-0.35-0.016h-11.503    c-6.317,0-11.456,5.138-11.456,11.456s5.139,11.456,11.456,11.456h11.503c0.119,0,0.234-0.009,0.35-0.016l0.216-0.013l0.297,0.013    c0.116,0.007,0.232,0.016,0.35,0.016h11.503c0.118,0,0.234-0.009,0.35-0.016l0.215-0.013l0.297,0.013    c0.116,0.007,0.232,0.016,0.35,0.016h11.503c0.117,0,0.234-0.009,0.35-0.016l0.215-0.013l0.298,0.013    c0.116,0.007,0.231,0.016,0.35,0.016h11.503c0.118,0,0.234-0.009,0.35-0.016l0.215-0.013l0.297,0.013    c0.116,0.007,0.232,0.016,0.35,0.016h14.37c7.204,0,13.064,5.86,13.064,13.064s-5.86,13.064-13.064,13.064h-11.975    c-6.317,0-11.456,5.138-11.456,11.456s5.138,11.456,11.456,11.456h65.988l2.593,0.263c6.101,1.267,10.471,6.645,10.471,12.801    c0,7.204-5.86,13.064-13.064,13.064H593.666z%22/><path d=%22M484.728,1066.019h-36.156h-38.738h-7.414H381.76c-5.383,0-9.747-4.364-9.747-9.747   c0-5.384,4.364-9.747,9.747-9.747h9.996c5.383,0,9.747-4.364,9.747-9.746c0-5.383-4.364-9.747-9.747-9.747h-36.156h-12.579   c-5.383,0-9.747-4.364-9.747-9.747c0-5.382,4.364-9.746,9.747-9.746h48.734h7.748h10.33h7.747c5.384,0,9.747-4.364,9.747-9.747   s-4.364-9.746-9.747-9.746h-2.248c-5.383,0-9.748-4.364-9.748-9.747c0-5.384,4.364-9.747,9.748-9.747h7.414   c5.383,0,9.747-4.364,9.747-9.746c0-5.383-4.363-9.747-9.747-9.747h-10.33h-10.33h-10.331h-9.996h-7.747h-2.583h-7.747H361.1   h-7.748c-5.383,0-9.747,4.364-9.747,9.747c0,5.383,4.364,9.746,9.747,9.746h7.748h2.583h7.747h2.583h7.747h2.249   c5.383,0,9.747,4.364,9.747,9.747c0,5.383-4.363,9.747-9.747,9.747h-48.735h-7.748h-10.33h-7.748c-5.383,0-9.747,4.363-9.747,9.746   s4.364,9.747,9.747,9.747h2.25c5.383,0,9.747,4.364,9.747,9.746c0,5.384-4.364,9.747-9.747,9.747h-2.25h-31.324h-4.832H260.38   c-5.383,0-9.747,4.364-9.747,9.747c0,5.383,4.364,9.746,9.747,9.746h12.913h4.832h31.324h7.414h33.573   c5.383,0,9.747,4.364,9.747,9.747c0,5.383-4.364,9.747-9.747,9.747h2.582h0.334c-5.383,0-9.747,4.364-9.747,9.746   c0,5.384,4.364,9.747,9.747,9.747h12.913h4.832h31.324h7.414h38.738h36.156c5.383,0,9.747-4.364,9.747-9.747   C494.475,1070.382,490.111,1066.019,484.728,1066.019z%22/><path d=%22M961.863,1074.936h-63.492c-6.154,0-11.16-5.008-11.16-11.162s5.006-11.16,11.16-11.16h21.783    c4.937,0,8.954-4.017,8.954-8.954s-4.017-8.954-8.954-8.954h-95.461c-6.154,0-11.162-5.006-11.162-11.16    c0-6.154,5.006-11.162,11.16-11.162h15.893c4.937,0,8.954-4.016,8.954-8.953c0-4.22-2.994-7.906-7.12-8.765l-1.948-0.195    l-54.02,0.006c-6.154,0-11.162-5.008-11.162-11.162c0-6.154,5.008-11.16,11.162-11.16h172.988c6.154,0,11.16,5.006,11.16,11.16    c0,6.154-5.006,11.162-11.16,11.162h-76.437c-4.937,0-8.954,4.017-8.954,8.954c0,4.937,4.017,8.953,8.954,8.953h114.679    c6.154,0,11.16,5.008,11.16,11.162c0,6.154-5.006,11.16-11.16,11.16h-35.11c-4.937,0-8.953,4.017-8.953,8.954    s4.016,8.954,8.953,8.954v0.022c5.826,0.366,10.453,5.222,10.453,11.138C973.025,1069.928,968.017,1074.936,961.863,1074.936z     M898.371,1054.821c-4.937,0-8.953,4.016-8.953,8.953s4.016,8.954,8.953,8.954h63.492c4.937,0,8.954-4.017,8.954-8.954    s-4.017-8.953-8.954-8.953v-0.022c-5.825-0.366-10.452-5.222-10.452-11.14c0-6.154,5.006-11.162,11.16-11.162h35.11    c4.937,0,8.953-4.016,8.953-8.953c0-4.937-4.016-8.954-8.953-8.954H883.003c-6.154,0-11.162-5.006-11.162-11.16    c0-6.154,5.008-11.162,11.162-11.162h76.437c4.937,0,8.953-4.017,8.953-8.954c0-4.937-4.016-8.953-8.953-8.953H786.451    c-4.937,0-8.954,4.016-8.954,8.953c0,4.937,4.017,8.954,8.954,8.954h54.134l2.172,0.219c5.256,1.086,8.99,5.682,8.99,10.943    c0,6.154-5.008,11.16-11.162,11.16h-15.893c-4.937,0-8.953,4.017-8.953,8.954c0,4.937,4.017,8.953,8.954,8.953h95.461    c6.154,0,11.162,5.008,11.162,11.162s-5.008,11.162-11.162,11.162H898.371z%22/></g></svg>") center bottom / 150% auto no-repeat;
  opacity: .045;
  pointer-events: none;
  z-index: 0;
}
#page-main #main-footer > * { position: relative; z-index: 1; }

/* ④ 상품 상세 — 가격 카드에 말림모서리 박스 (증서 느낌)
   (2026-08-20) 뇌문 테두리 → 도안의 '말림 모서리 박스'로 교체.
   가격표는 글이 들어가는 상자라, 모서리가 둥글게 말린 박스가 더 맞는다.
   ⚠️ slice 150 = 말림 장식 크기(1442 기준). 건드리면 모서리가 잘린다. */
#page-service .service-price {
  border: 20px solid transparent;
  border-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%221442%22 height=%221268%22 viewBox=%220 0 1442.290 1267.707%22 fill=%22%238A8272%22><g transform=%22translate(-437.251,-564.341)%22><path d=%22M582.077,679.084c-7.297,0-13.403-2.73-17.789-7.992c-5.659-6.79-7.438-15.557-4.76-23.452   c2.379-7.012,7.922-12.127,14.829-13.685c13.843-3.124,21.307,5.723,22.759,12.032c0.842,3.654,0.631,9.034-2.484,13.173   c-1.714,2.278-5.002,5.06-10.933,5.381c-0.08,0.005-0.161,0.006-0.238,0.004c-0.505-0.007-5.022-0.167-8.064-3.583   c-1.359-1.527-2.886-4.272-2.436-8.681c0.197-1.924,1.912-3.324,3.837-3.127c1.923,0.196,3.323,1.914,3.127,3.838   c-0.152,1.49,0.077,2.597,0.68,3.292c0.796,0.916,2.261,1.207,2.887,1.256c2.515-0.169,4.381-1.04,5.548-2.59   c1.672-2.222,1.722-5.371,1.256-7.393c-0.61-2.65-4.387-9.03-14.398-6.774c-4.51,1.017-8.151,4.421-9.74,9.105   c-1.889,5.568-0.578,11.819,3.508,16.721c8.265,9.914,22.631,3.518,23.709,3.018c6.333-3.283,10.341-9.463,11.287-17.411   c1.66-13.953-6.663-31.511-25.782-38.07c-21.352-6.774-39.195,0.793-47.961,9.339c-14.206,13.85-16.481,35.183-16.502,35.397   c-0.192,1.924-1.901,3.328-3.83,3.136c-1.923-0.192-3.327-1.907-3.136-3.83c0.098-0.977,2.569-24.104,18.581-39.714   c10.153-9.899,30.661-18.711,55.042-10.974c22.707,7.789,32.53,28.801,30.539,45.544c-1.214,10.203-6.714,18.526-15.089,22.837   c-0.03,0.015-0.06,0.03-0.091,0.045c-0.203,0.097-5.036,2.383-11.273,3.002C584.11,679.032,583.081,679.084,582.077,679.084z%22/><path d=%22M1807.434,1743.394c-1.408,0-2.822-0.077-4.242-0.233c-12.821-1.414-23.375-8.929-28.956-20.619   c-7.386-15.472-4.526-30.641,7.845-41.618c8.422-7.473,22.379-11.321,33.121-2.119c10.708,9.173,8.725,21.336,7.863,24.846   c-2.589,10.527-10.467,15.253-17.127,15.266c-0.01,0-0.02,0-0.029,0c-6.313,0-11.38-3.955-12.912-10.084   c-1.143-4.572,0.059-7.809,1.268-9.72c2.953-4.666,8.496-5.892,9.118-6.017c1.895-0.378,3.739,0.851,4.118,2.746   c0.378,1.89-0.844,3.729-2.731,4.115c-0.905,0.197-3.47,1.099-4.606,2.925c-0.69,1.109-0.813,2.5-0.375,4.252   c0.749,2.995,3.037,4.782,6.121,4.782c0.005,0,0.01,0,0.016,0c3.934-0.008,8.658-3.083,10.343-9.937   c0.796-3.24,1.843-11.467-5.619-17.859c-7.558-6.475-17.698-3.482-23.921,2.038c-10.012,8.884-12.204,20.734-6.173,33.367   c4.514,9.457,13.045,15.535,23.406,16.677c11.027,1.215,21.818-3.435,28.876-12.438c15.121-19.288,14.289-42.686,14.278-42.92   c-0.002-0.05-0.003-0.101-0.003-0.152V1430.07l-1.292-461.74V755.343c0-72.333-58.847-131.18-131.18-131.18H596.193   c-1.933,0-3.5-1.567-3.5-3.5s1.567-3.5,3.5-3.5h1118.444c76.192,0,138.18,61.987,138.18,138.18V968.32l1.292,461.74v250.559   c0.069,1.878,0.637,26.541-15.766,47.464C1830.684,1737.853,1819.36,1743.393,1807.434,1743.394z%22/><path d=%22M1754.303,1793.842c-5.837,0-12.071-0.886-18.585-2.953c-22.707-7.788-32.531-28.8-30.539-45.543   c1.214-10.203,6.713-18.526,15.089-22.836c0.03-0.015,0.06-0.03,0.091-0.045c0.203-0.097,5.036-2.383,11.273-3.002   c8.663-0.861,15.88,1.85,20.87,7.836c5.659,6.789,7.438,15.556,4.76,23.451c-2.379,7.012-7.922,12.127-14.829,13.685   c-13.847,3.121-21.307-5.723-22.76-12.032c-0.842-3.655-0.631-9.035,2.485-13.174c1.714-2.277,5.002-5.06,10.932-5.38   c0.08-0.004,0.162-0.006,0.238-0.004c0.505,0.007,5.022,0.167,8.064,3.583c1.359,1.527,2.886,4.272,2.436,8.681   c-0.197,1.923-1.916,3.319-3.837,3.126c-1.923-0.196-3.323-1.914-3.126-3.837c0.152-1.49-0.077-2.597-0.68-3.292   c-0.796-0.916-2.261-1.208-2.887-1.256c-2.515,0.169-4.381,1.04-5.547,2.589c-1.672,2.221-1.722,5.372-1.256,7.394   c0.609,2.649,4.388,9.027,14.398,6.774c4.51-1.017,8.151-4.421,9.74-9.106c1.889-5.568,0.577-11.818-3.508-16.72   c-8.266-9.918-22.636-3.516-23.709-3.018c-6.333,3.282-10.341,9.463-11.286,17.41c-1.66,13.954,6.663,31.511,25.782,38.07   c21.353,6.776,39.194-0.793,47.961-9.339c14.149-13.795,16.48-35.186,16.502-35.4c0.196-1.921,1.911-3.325,3.833-3.129   c1.922,0.194,3.323,1.906,3.132,3.828c-0.098,0.977-2.569,24.103-18.581,39.714   C1783.32,1787.169,1770.315,1793.842,1754.303,1793.842z%22/><path d=%22M1720.598,1781.227H602.153c-76.193,0-138.18-61.987-138.18-138.18V1430.07l-1.292-461.74V717.77   c-0.069-1.881-0.636-26.542,15.766-47.463c8.563-10.922,21.708-16.557,35.151-15.077c12.822,1.413,23.376,8.928,28.957,20.619   c7.385,15.472,4.526,30.642-7.845,41.618c-8.421,7.472-22.378,11.322-33.121,2.12c-10.708-9.173-8.725-21.337-7.862-24.847   c2.588-10.527,10.467-15.252,17.127-15.266c0.01,0,0.02,0,0.03,0c6.313,0,11.379,3.956,12.912,10.084   c1.143,4.571-0.058,7.808-1.268,9.719c-2.953,4.667-8.496,5.893-9.118,6.018c-1.9,0.38-3.739-0.851-4.119-2.746   c-0.379-1.896,0.85-3.739,2.746-4.119c0.873-0.188,3.452-1.09,4.592-2.922c0.69-1.109,0.813-2.5,0.375-4.252   c-0.749-2.995-3.037-4.782-6.121-4.782c-0.005,0-0.01,0-0.016,0c-3.934,0.008-8.658,3.083-10.343,9.936   c-0.797,3.24-1.844,11.467,5.619,17.859c7.559,6.476,17.698,3.482,23.92-2.039c10.012-8.884,12.205-20.734,6.174-33.367   c-4.514-9.457-13.045-15.535-23.406-16.677c-11.021-1.213-21.817,3.435-28.876,12.438c-15.121,19.288-14.289,42.686-14.278,42.92   c0.003,0.05,0.004,0.101,0.004,0.152V968.32l1.292,461.74v212.987c0,72.333,58.847,131.18,131.18,131.18h1118.444   c1.933,0,3.5,1.567,3.5,3.5S1722.531,1781.227,1720.598,1781.227z%22/></g></svg>") 150 stretch;
  border-radius: 0;
  padding: 10px 12px 14px;
  background: transparent;
}

/* ⑤ 상품 상세 — 가격 카드 위 매듭 구분선 */
#page-service .service-price::before {
  content: '';
  display: block;
  height: 16px;
  margin: 0 auto 14px;
  background:
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 109.515 73.663%22 fill=%22%239C9384%22><g transform=%22translate(-735.729,-481.251)%22><path d=%22M842.166,512.836L842.166,512.836v-0.002l-3.867-3.867c-3.08-3.08-8.094-3.08-11.174,0l-8.389,8.391   l-8.79-8.792l0,0l-0.508-0.508l-0.555-0.555l0,0l-7.863-7.861l4.769-4.767c2.704-2.706,2.704-7.112,0-9.818l-1.1-1.1   c-2.712-2.706-7.113-2.704-9.818,0l-4.767,4.769l-4.767-4.769c-2.708-2.704-7.109-2.704-9.818,0l-1.1,1.1   c-2.704,2.706-2.704,7.112,0,9.816l4.767,4.769l-8.924,8.924l0,0l-8.79,8.792l-8.389-8.391c-3.08-3.08-8.094-3.08-11.174,0   l-3.867,3.867c-1.491,1.493-2.313,3.476-2.313,5.587c0,2.109,0.822,4.092,2.313,5.585l3.869,3.869   c1.54,1.538,3.562,2.307,5.585,2.307c2.023,0,4.047-0.769,5.587-2.309l8.389-8.389l8.79,8.79l1.063,1.063l7.861,7.861l0,0   l-4.767,4.769c-2.704,2.705-2.704,7.109,0,9.814l1.1,1.104c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.029   l4.767-4.769l4.767,4.769c1.354,1.352,3.131,2.029,4.908,2.029c1.779,0,3.556-0.677,4.91-2.031l1.1-1.1   c2.704-2.706,2.704-7.111,0-9.818l-4.769-4.767l7.863-7.861l0,0l9.853-9.853l8.391,8.391c1.54,1.538,3.562,2.307,5.585,2.307   c2.023,0,4.047-0.769,5.587-2.309l3.867-3.867C845.244,520.926,845.244,515.916,842.166,512.836z M794.499,541.594l-4.395,4.396   l-8.792-8.792l4.396-4.395l4.396-4.395l8.791,8.791L794.499,541.594z M785.708,495.247l4.396-4.395l8.791,8.791l-4.395,4.396   l-4.395,4.396l-8.792-8.792L785.708,495.247z M791.167,509.497l4.395-4.396l4.395-4.396l7.863,7.861l-8.792,8.792L791.167,509.497z    M797.965,518.421l-7.861,7.861l-7.861-7.861l7.861-7.861L797.965,518.421z M795.935,485.022c2.041-2.047,5.644-2.049,7.689,0   l1.1,1.1c1.023,1.021,1.587,2.387,1.587,3.843c0,1.458-0.564,2.824-1.587,3.845l-4.767,4.769l-8.791-8.79L795.935,485.022z    M775.484,493.811c-1.023-1.021-1.587-2.387-1.587-3.845c0-1.456,0.564-2.822,1.587-3.843l1.1-1.1   c1.021-1.023,2.387-1.587,3.843-1.587c1.458,0,2.824,0.564,3.845,1.587l4.769,4.767l-4.396,4.395l-4.396,4.395L775.484,493.811z    M780.249,500.705l8.792,8.792l-7.861,7.861l-8.793-8.792L780.249,500.705z M752.02,526.81c-2.497,2.493-6.554,2.491-9.047,0.002   l-3.867-3.869v-0.002c-1.209-1.208-1.875-2.812-1.875-4.521c0-1.71,0.665-3.315,1.875-4.522l3.867-3.867   c1.247-1.249,2.885-1.871,4.523-1.871c1.638,0,3.276,0.622,4.522,1.871l8.391,8.389L752.02,526.81z M771.325,527.211l-8.79-8.791   l8.79-8.792l8.792,8.792l-4.396,4.395L771.325,527.211z M772.388,528.274l4.396-4.395l4.396-4.395l7.861,7.861l-4.396,4.395   l-4.396,4.395L772.388,528.274z M784.272,551.82c-2.043,2.045-5.646,2.045-7.689,0.002l-1.1-1.104   c-1.023-1.021-1.587-2.387-1.587-3.843c0-1.458,0.564-2.824,1.587-3.845l4.765-4.769l8.792,8.792L784.272,551.82z M806.311,546.875   c0,1.456-0.564,2.822-1.587,3.845l-1.1,1.1c-2.045,2.047-5.648,2.045-7.689,0l-4.769-4.767l4.395-4.396l4.395-4.396l4.767,4.769   C805.747,544.051,806.311,545.417,806.311,546.875z M799.957,536.135l-8.791-8.79l7.861-7.861l4.396,4.395l4.396,4.395   L799.957,536.135z M808.883,527.211l-4.396-4.395l-4.396-4.395l8.792-8.792l8.79,8.792L808.883,527.211z M841.101,522.943   l-3.865,3.867c-2.497,2.493-6.554,2.491-9.047,0.002l-8.391-8.391l8.391-8.389c2.493-2.497,6.552-2.497,9.045,0l3.867,3.867   l0.001-0.001C843.594,516.393,843.594,520.45,841.101,522.943z%22/></g></svg>") center center / auto 16px no-repeat,
    linear-gradient(#3A3A3E, #3A3A3E) left  center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(#3A3A3E, #3A3A3E) right center / calc(50% - 16px) 1px no-repeat;
}

/* 좁은 화면에서 테두리가 가격 글씨를 너무 밀지 않게 */
@media (max-width: 360px) {
  #page-service .service-price { border-width: 15px; padding: 6px 6px 10px; }
}


/* ═════════════════════════════════════════════════════════════════
   티저(장면) 문양 (2026-08-20 적용)
   ═════════════════════════════════════════════════════════════════
   문양은 images/문양/ 의 벡터를 그대로 쓴다(설명은 그 폴더의 _안내.md).
   ⚠️ border-image 의 slice 숫자는 문양 모서리 크기다 — 건드리면 문양이 잘린다.
   ═════════════════════════════════════════════════════════════════ */

/* ① 장면 사이 매듭 구분선 — 원래 border-top 1px 을 대신한다 */
.wt2-block { border-top: 0; }
.wt2-block::before {
  content: '';
  display: block;
  height: 16px;
  margin: 0 auto 34px;
  background:
    var(--orn-knot) center center / auto 16px no-repeat,
    linear-gradient(rgba(232,196,106,.22), rgba(232,196,106,.22)) left  center / calc(50% - 17px) 1px no-repeat,
    linear-gradient(rgba(232,196,106,.22), rgba(232,196,106,.22)) right center / calc(50% - 17px) 1px no-repeat;
}

/* ② 등급 상자 뒤 원형문양 — 등급 글자를 가리지 않게 아주 옅게(7%) */
.wt2-grade { position: relative; overflow: hidden; }
.wt2-grade::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  width: 190px; height: 190px;
  transform: translateX(-50%);
  background: var(--orn-circle) center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
.wt2-grade > * { position: relative; z-index: 1; }

/* ③ 목차 위 꽃무늬 띠 — "여기부터 리포트에 들어가는 내용" 이라는 신호
   ⚠️ 한 칸을 91 로 잡았다(꽃 69 + 도안의 간격 22). 69 로 반복하면 다닥다닥 붙는다. */
.wt2-toc::before {
  content: '';
  display: block;
  height: 14px;
  margin: 0 0 26px;
  background: var(--orn-flower) left center / auto 14px repeat-x;
  opacity: .9;
}

/* ④ 가격 상자 — 말림모서리 박스 (상품 상세의 가격표와 같은 처리로 통일)
   ⚠️ slice 150 을 건드리면 모서리가 잘린다. */
.wt2-pricebox {
  border: 18px solid transparent;
  border-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%221442%22 height=%221268%22 viewBox=%220 0 1442.290 1267.707%22 fill=%22%238A7647%22><g transform=%22translate(-437.251,-564.341)%22><path d=%22M582.077,679.084c-7.297,0-13.403-2.73-17.789-7.992c-5.659-6.79-7.438-15.557-4.76-23.452   c2.379-7.012,7.922-12.127,14.829-13.685c13.843-3.124,21.307,5.723,22.759,12.032c0.842,3.654,0.631,9.034-2.484,13.173   c-1.714,2.278-5.002,5.06-10.933,5.381c-0.08,0.005-0.161,0.006-0.238,0.004c-0.505-0.007-5.022-0.167-8.064-3.583   c-1.359-1.527-2.886-4.272-2.436-8.681c0.197-1.924,1.912-3.324,3.837-3.127c1.923,0.196,3.323,1.914,3.127,3.838   c-0.152,1.49,0.077,2.597,0.68,3.292c0.796,0.916,2.261,1.207,2.887,1.256c2.515-0.169,4.381-1.04,5.548-2.59   c1.672-2.222,1.722-5.371,1.256-7.393c-0.61-2.65-4.387-9.03-14.398-6.774c-4.51,1.017-8.151,4.421-9.74,9.105   c-1.889,5.568-0.578,11.819,3.508,16.721c8.265,9.914,22.631,3.518,23.709,3.018c6.333-3.283,10.341-9.463,11.287-17.411   c1.66-13.953-6.663-31.511-25.782-38.07c-21.352-6.774-39.195,0.793-47.961,9.339c-14.206,13.85-16.481,35.183-16.502,35.397   c-0.192,1.924-1.901,3.328-3.83,3.136c-1.923-0.192-3.327-1.907-3.136-3.83c0.098-0.977,2.569-24.104,18.581-39.714   c10.153-9.899,30.661-18.711,55.042-10.974c22.707,7.789,32.53,28.801,30.539,45.544c-1.214,10.203-6.714,18.526-15.089,22.837   c-0.03,0.015-0.06,0.03-0.091,0.045c-0.203,0.097-5.036,2.383-11.273,3.002C584.11,679.032,583.081,679.084,582.077,679.084z%22/><path d=%22M1807.434,1743.394c-1.408,0-2.822-0.077-4.242-0.233c-12.821-1.414-23.375-8.929-28.956-20.619   c-7.386-15.472-4.526-30.641,7.845-41.618c8.422-7.473,22.379-11.321,33.121-2.119c10.708,9.173,8.725,21.336,7.863,24.846   c-2.589,10.527-10.467,15.253-17.127,15.266c-0.01,0-0.02,0-0.029,0c-6.313,0-11.38-3.955-12.912-10.084   c-1.143-4.572,0.059-7.809,1.268-9.72c2.953-4.666,8.496-5.892,9.118-6.017c1.895-0.378,3.739,0.851,4.118,2.746   c0.378,1.89-0.844,3.729-2.731,4.115c-0.905,0.197-3.47,1.099-4.606,2.925c-0.69,1.109-0.813,2.5-0.375,4.252   c0.749,2.995,3.037,4.782,6.121,4.782c0.005,0,0.01,0,0.016,0c3.934-0.008,8.658-3.083,10.343-9.937   c0.796-3.24,1.843-11.467-5.619-17.859c-7.558-6.475-17.698-3.482-23.921,2.038c-10.012,8.884-12.204,20.734-6.173,33.367   c4.514,9.457,13.045,15.535,23.406,16.677c11.027,1.215,21.818-3.435,28.876-12.438c15.121-19.288,14.289-42.686,14.278-42.92   c-0.002-0.05-0.003-0.101-0.003-0.152V1430.07l-1.292-461.74V755.343c0-72.333-58.847-131.18-131.18-131.18H596.193   c-1.933,0-3.5-1.567-3.5-3.5s1.567-3.5,3.5-3.5h1118.444c76.192,0,138.18,61.987,138.18,138.18V968.32l1.292,461.74v250.559   c0.069,1.878,0.637,26.541-15.766,47.464C1830.684,1737.853,1819.36,1743.393,1807.434,1743.394z%22/><path d=%22M1754.303,1793.842c-5.837,0-12.071-0.886-18.585-2.953c-22.707-7.788-32.531-28.8-30.539-45.543   c1.214-10.203,6.713-18.526,15.089-22.836c0.03-0.015,0.06-0.03,0.091-0.045c0.203-0.097,5.036-2.383,11.273-3.002   c8.663-0.861,15.88,1.85,20.87,7.836c5.659,6.789,7.438,15.556,4.76,23.451c-2.379,7.012-7.922,12.127-14.829,13.685   c-13.847,3.121-21.307-5.723-22.76-12.032c-0.842-3.655-0.631-9.035,2.485-13.174c1.714-2.277,5.002-5.06,10.932-5.38   c0.08-0.004,0.162-0.006,0.238-0.004c0.505,0.007,5.022,0.167,8.064,3.583c1.359,1.527,2.886,4.272,2.436,8.681   c-0.197,1.923-1.916,3.319-3.837,3.126c-1.923-0.196-3.323-1.914-3.126-3.837c0.152-1.49-0.077-2.597-0.68-3.292   c-0.796-0.916-2.261-1.208-2.887-1.256c-2.515,0.169-4.381,1.04-5.547,2.589c-1.672,2.221-1.722,5.372-1.256,7.394   c0.609,2.649,4.388,9.027,14.398,6.774c4.51-1.017,8.151-4.421,9.74-9.106c1.889-5.568,0.577-11.818-3.508-16.72   c-8.266-9.918-22.636-3.516-23.709-3.018c-6.333,3.282-10.341,9.463-11.286,17.41c-1.66,13.954,6.663,31.511,25.782,38.07   c21.353,6.776,39.194-0.793,47.961-9.339c14.149-13.795,16.48-35.186,16.502-35.4c0.196-1.921,1.911-3.325,3.833-3.129   c1.922,0.194,3.323,1.906,3.132,3.828c-0.098,0.977-2.569,24.103-18.581,39.714   C1783.32,1787.169,1770.315,1793.842,1754.303,1793.842z%22/><path d=%22M1720.598,1781.227H602.153c-76.193,0-138.18-61.987-138.18-138.18V1430.07l-1.292-461.74V717.77   c-0.069-1.881-0.636-26.542,15.766-47.463c8.563-10.922,21.708-16.557,35.151-15.077c12.822,1.413,23.376,8.928,28.957,20.619   c7.385,15.472,4.526,30.642-7.845,41.618c-8.421,7.472-22.378,11.322-33.121,2.12c-10.708-9.173-8.725-21.337-7.862-24.847   c2.588-10.527,10.467-15.252,17.127-15.266c0.01,0,0.02,0,0.03,0c6.313,0,11.379,3.956,12.912,10.084   c1.143,4.571-0.058,7.808-1.268,9.719c-2.953,4.667-8.496,5.893-9.118,6.018c-1.9,0.38-3.739-0.851-4.119-2.746   c-0.379-1.896,0.85-3.739,2.746-4.119c0.873-0.188,3.452-1.09,4.592-2.922c0.69-1.109,0.813-2.5,0.375-4.252   c-0.749-2.995-3.037-4.782-6.121-4.782c-0.005,0-0.01,0-0.016,0c-3.934,0.008-8.658,3.083-10.343,9.936   c-0.797,3.24-1.844,11.467,5.619,17.859c7.559,6.476,17.698,3.482,23.92-2.039c10.012-8.884,12.205-20.734,6.174-33.367   c-4.514-9.457-13.045-15.535-23.406-16.677c-11.021-1.213-21.817,3.435-28.876,12.438c-15.121,19.288-14.289,42.686-14.278,42.92   c0.003,0.05,0.004,0.101,0.004,0.152V968.32l1.292,461.74v212.987c0,72.333,58.847,131.18,131.18,131.18h1118.444   c1.933,0,3.5,1.567,3.5,3.5S1722.531,1781.227,1720.598,1781.227z%22/></g></svg>") 150 stretch;
  border-radius: 0;
  padding: 8px 10px 12px;
  background: rgba(232,196,106,.04);
}

@media (max-width: 360px) {
  .wt2-pricebox { border-width: 13px; padding: 4px 4px 8px; }
  .wt2-grade::before { width: 150px; height: 150px; }
}

/* ══════════════════════════════════════════════════════════
   종합사주 인트로 — 위저드 앞에 두 컷을 튼다 (2026-08-24)
   ⚠️ 100vh 금지(주소창 때문에 잘린다) → dvh 를 쓴다.
   ⚠️ 영상은 화면을 꽉 채우되(cover) 인물 얼굴이 위쪽이라 위를 기준으로 자른다.
   ══════════════════════════════════════════════════════════ */
.life-intro{
  position:fixed; inset:0; z-index:9000;
  background:#07060a;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .3s ease;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.life-intro.out{ opacity:0; }
.life-intro .li-video{
  width:100%; height:100%;
  height:100dvh;
  object-fit:cover; object-position:50% 28%;
  display:block; background:#07060a;
}
/* 아래쪽을 어둡게 깔아 글자가 읽히게 한다 */
.life-intro .li-shade{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to bottom, rgba(7,6,10,0) 0%, rgba(7,6,10,.72) 42%, rgba(7,6,10,.94) 100%);
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.life-intro.talk .li-shade{ opacity:1; }

/* 대사 — 손님은 소리를 끄고 본다. 글자가 본체다 */
.life-intro .li-cap{
  position:absolute; left:20px; right:20px; bottom:104px;
  text-align:center; pointer-events:none;
}
.life-intro .li-line{
  margin:0 0 10px; white-space:pre-line;
  font-size:clamp(15.5px, 4.2vw, 18.5px); line-height:1.62; font-weight:600;
  color:#F4EBD6; letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
}
.life-intro .li-line::before{ content:'" '; }
.life-intro .li-line::after{ content:' "'; }
.life-intro .li-line.on{ opacity:1; transform:none; }

/* 손님이 누르는 버튼 — 넓고 밝게, 화면 아래에 붙인다 */
.life-intro .li-cta{
  position:absolute; left:16px; right:16px;
  bottom:max(20px, env(safe-area-inset-bottom));
  padding:16px 18px; border:0; border-radius:12px;
  background:#EFE7D8; color:#1A1520;
  font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
}
.life-intro .li-cta.on{ opacity:1; transform:none; pointer-events:auto; }
.life-intro .li-cta:active{ background:#E2D8C4; }

/* 버튼을 누르면 **장면은 그대로 두고 어두워진다.** 그 위로 입력창이 올라온다.
   ⚠️ 검은 화면으로 덮지 않는다 — 장면이 끊겨 보인다(2026-08-25 사장님 지시). */
.life-intro.dim .li-cap,
.life-intro.dim .li-cta,
.life-intro.dim .li-skip{ opacity:0; transition:opacity .35s ease; }
.life-intro.dim .li-video{ filter:brightness(.42) saturate(.9); transition:filter .5s ease; }
.life-intro.dim .li-shade{ opacity:1; height:100%;
  background:linear-gradient(to bottom, rgba(7,6,10,.35) 0%, rgba(7,6,10,.62) 55%, rgba(7,6,10,.86) 100%); }

/* 위저드가 인트로에서 보던 그 장면을 이어받는다(같은 영상, 어둡게, 계속 반복) */
.wiz-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 26%;
  filter:brightness(.42) saturate(.9);
  z-index:0; pointer-events:none;
}
/* 건너뛰기 — 항상 보인다. 인트로에 갇혔다고 느끼면 손님은 나간다 */
.life-intro .li-skip{
  position:absolute; top:max(14px, env(safe-area-inset-top)); right:14px;
  padding:9px 15px; border-radius:999px;
  background:rgba(12,10,16,.62); border:1px solid rgba(244,235,214,.28);
  color:#E8DFC9; font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  backdrop-filter:blur(6px);
}
.life-intro .li-skip:active{ background:rgba(12,10,16,.82); }
.life-intro .li-skip.gone{ opacity:0; pointer-events:none; transition:opacity .4s ease; }

/* 종합사주 위저드는 상단 진행바를 쓰지 않는다 — 인트로에서 이어지는 몰입을 끊는다(2026-08-24 사장님 지시).
   ⚠️ 같은 줄에 뒤로가기(‹)가 함께 있어 **진행바만** 감춘다. 뒤로가기까지 없애면 손님이 앞 질문으로 못 돌아간다. */
body.life-flow .wiz-progress{ display:none; }
body.life-flow .wiz-topbar{ min-height:0; }
/* 컷마다 video 요소를 따로 두고 보이기만 바꾼다(src 갈아끼우기 금지 — 중간 이벤트가 흐름을 깬다) */
.life-intro .li-video{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.life-intro .li-video.on{ opacity:1; }

/* ══════════════════════════════════════════════════════════
   종합사주 — 한 화면 입력 (2026-08-24)
   이름·생년월일·태어난 시간·성별을 한 번에 받는다. 어두워진 인물 위에 얹힌다.
   ⚠️ 폰에서 키보드가 올라와도 잘리지 않게 100vh 를 쓰지 않는다.
   ══════════════════════════════════════════════════════════ */
.wiz-panel.lf-panel{ padding:0 18px calc(18px + env(safe-area-inset-bottom)); }
.lf-row{ padding:14px 0 10px; border-bottom:1px solid rgba(244,235,214,.14); }
.lf-row.off .lf-input{ opacity:.35; }
.lf-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.lf-label{ font-size:12.5px; font-weight:700; color:#F0E7D6; letter-spacing:-.01em; }
.lf-side{ display:flex; align-items:center; gap:12px; }

/* 오른쪽 작은 선택(양력·음력 / 시간 모름) */
.lf-radio{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; padding:0;
  font-size:12px; font-weight:600; color:rgba(240,231,214,.55); letter-spacing:-.01em;
}
.lf-radio i{
  width:13px; height:13px; border-radius:50%;
  border:1.5px solid rgba(240,231,214,.45); display:block; position:relative;
}
.lf-radio.on{ color:#F4EBD6; }
.lf-radio.on i{ border-color:#C8A24A; background:#C8A24A; }
.lf-radio.on i::after{
  content:''; position:absolute; left:3px; top:3.4px;
  width:5.5px; height:3px; border-left:1.6px solid #17131c; border-bottom:1.6px solid #17131c;
  transform:rotate(-45deg);
}

/* 값 입력칸 — 밑줄만 있는 형태 */
.lf-input{
  width:100%; background:none; border:0; padding:2px 0 6px;
  color:#F7F1E4; font-size:16px; font-weight:600; letter-spacing:-.01em;
  font-family:inherit;
}
.lf-input::placeholder{ color:rgba(240,231,214,.32); font-weight:500; }
.lf-input:focus{ outline:none; }

/* 성별 — 넓은 버튼 두 개 */
.lf-gender{ display:flex; gap:10px; padding:2px 0 4px; }
.lf-gbtn{
  flex:1; padding:12px 0; border-radius:8px;
  background:rgba(244,235,214,.07); border:1px solid rgba(244,235,214,.22);
  color:rgba(244,235,214,.72); font-size:14.5px; font-weight:600; letter-spacing:-.01em;
}
.lf-gbtn.on{ background:#EFE7D8; border-color:#EFE7D8; color:#1A1520; font-weight:700; }

/* 다 입력했어요! */
.lf-submit{
  width:100%; margin-top:18px; padding:16px 18px;
  border:0; border-radius:12px;
  background:#EFE7D8; color:#1A1520;
  font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.lf-submit:active{ background:#E2D8C4; }

/* ── 종합사주 2번째 화면 — 연애 상태 · 직업 (2026-08-25) ─────────────
   문장 안에 드롭다운을 끼운다: "지금은 [ ] 상태예요." 폼이 아니라 대화처럼 읽히게 한다. */
.duo-panel{ padding-top:6px; }
.duo-say{
  margin:0 0 10px; white-space:pre-line; text-align:center;
  font-size:clamp(15px, 4.1vw, 17.5px); line-height:1.62; font-weight:600;
  color:#F4EBD6; letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.duo-say::before{ content:'" '; }
.duo-say::after{ content:' "'; }
.duo-note{
  margin:0 0 20px; text-align:center;
  font-size:11.5px; color:rgba(240,231,214,.5); letter-spacing:-.01em;
}
.duo-line{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:14px;
  font-size:14.5px; font-weight:600; color:rgba(244,235,214,.82); letter-spacing:-.01em;
}
.duo-sel{ position:relative; display:inline-block; }
.duo-sel select{
  appearance:none; -webkit-appearance:none;
  min-width:116px; padding:10px 30px 10px 13px;
  border-radius:9px; border:1px solid rgba(244,235,214,.26);
  background:rgba(20,17,26,.72); color:#F4EBD6;
  font-size:14px; font-weight:600; font-family:inherit; letter-spacing:-.01em;
}
.duo-sel select:focus{ outline:none; border-color:#C8A24A; }
/* 오른쪽 화살표 */
.duo-sel::after{
  content:''; position:absolute; right:12px; top:50%; width:7px; height:7px;
  border-right:1.6px solid rgba(244,235,214,.6); border-bottom:1.6px solid rgba(244,235,214,.6);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
/* 목록이 열렸을 때 배경이 흰색으로 튀지 않게 */
.duo-sel select option{ background:#17131c; color:#F4EBD6; }

/* ── 종합사주 마지막 화면 — 고민 한 마디 (2026-08-25) ───────────────── */
.cc-box{ position:relative; margin-top:4px; }
.cc-area{
  width:100%; min-height:132px; resize:none;
  padding:14px 14px 30px; border-radius:10px;
  background:rgba(20,17,26,.72); border:1px solid rgba(244,235,214,.18);
  color:#F4EBD6; font-size:14.5px; line-height:1.62; font-weight:500;
  font-family:inherit; letter-spacing:-.01em;
}
.cc-area::placeholder{ color:rgba(240,231,214,.38); }
.cc-area:focus{ outline:none; border-color:rgba(200,162,74,.6); }
.cc-count{
  position:absolute; right:12px; bottom:9px;
  font-size:11.5px; font-weight:600; color:rgba(240,231,214,.45); letter-spacing:0;
  pointer-events:none;
}

/* ══════════════════════════════════════════════════════════
   운명의 짝 페르소나 카드 (2026-08-25)
   엔진이 낸 태그(직업·외모·성격·특징)를 칩으로 보여 준다.
   티저에서는 .pc-blind — 줄마다 첫 태그만 열고 나머지를 지운다.
   ══════════════════════════════════════════════════════════ */
.pc{
  margin:14px 0 6px; padding:16px 16px 14px;
  border-radius:14px; border:1px solid rgba(244,235,214,.16);
  background:linear-gradient(180deg, rgba(28,24,36,.72), rgba(18,15,24,.72));
}
.pc-photo{
  position:relative; width:100%; max-width:230px; margin:0 auto 14px;
  aspect-ratio:3/4; border-radius:12px; overflow:hidden;
  background:linear-gradient(160deg,#2a2432,#171320);
}
.pc-photo img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; }
/* 그림이 아직 없을 때 보이는 자리표시 실루엣 */
.pc-photo-ph{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(closest-side at 50% 34%, rgba(244,235,214,.20), transparent 70%),
    radial-gradient(closest-side at 50% 96%, rgba(244,235,214,.16), transparent 72%);
}
.pc-blind .pc-photo img{ filter:blur(13px) brightness(.72); transform:scale(1.06); }
.pc-q{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  font-size:52px; font-weight:800; color:rgba(244,235,214,.55); text-shadow:0 4px 20px rgba(0,0,0,.6);
}
.pc-head{
  text-align:center; margin:0 0 12px;
  font-size:15px; font-weight:700; color:#F0E3C6; letter-spacing:-.01em;
}
.pc-row{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid rgba(244,235,214,.10); }
.pc-row:first-child{ border-top:0; }
.pc-k{ flex:0 0 42px; font-size:12.5px; font-weight:700; color:rgba(240,231,214,.62); padding-top:3px; }
.pc-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.pc-tag{
  display:inline-block; padding:5px 10px; border-radius:999px;
  background:rgba(200,162,74,.13); border:1px solid rgba(200,162,74,.32);
  font-size:12.5px; font-weight:600; color:#EBDCB8; letter-spacing:-.01em;
}
/* 가린 태그 — 글자는 자리를 지키되 읽을 수 없다(드래그 복사도 막는다) */
.pc-hide{
  filter:blur(5.5px); user-select:none; pointer-events:none;
  color:rgba(235,220,184,.9);
}
.pc-note{ margin:10px 0 0; font-size:12.5px; line-height:1.6; color:rgba(240,231,214,.66); }

/* ── 「타고난 나의 매력」 카드 (2026-09-04) ─────────────────────────── */
.chm-line{
  margin:12px 0 4px; font-family:var(--rp-font, var(--font-serif));
  font-size:19px; line-height:1.5; font-weight:600; color:#F2EFE8; word-break:keep-all;
}
.chm-why{ margin:0 0 12px; font-size:12px; color:rgba(240,231,214,.55); letter-spacing:.01em; }
.chm-marks{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.chm-mark{
  padding:10px 12px; border-radius:10px;
  border:1px solid rgba(231,206,148,.26); background:rgba(231,206,148,.06);
}
.chm-tag{ display:block; font-size:14px; font-weight:700; color:#E7CE94; }
.chm-note{ display:block; margin-top:3px; font-size:12px; line-height:1.55; color:rgba(240,231,214,.62); }

/* ── 「나와 맞지 않는 인연」 카드 ────────────────────────────────────
   ⚠️ 「운명의 짝」(.pc)과 **같은 골격에 색만 붉게** 바꾼다.
      나란히 놓았을 때 "이쪽은 맞고 저쪽은 아니다"가 한눈에 읽혀야 하기 때문이다. */
.pc-bad{
  border-color:rgba(196,86,86,.32);
  background:linear-gradient(180deg, rgba(42,20,22,.78), rgba(24,14,16,.78));
}
/* ⚠️ 이 카드는 사진이 없다(악연은 그림을 붙이지 않는다 — 특정인으로 읽히면 안 되니까).
   그래서 「운명의 짝」과 같은 3:4 로 두면 빈 칸이 너무 커 보인다. 작게 줄여 실루엣만 남긴다. */
.pc-bad .pc-photo{ background:linear-gradient(160deg,#3a1f22,#1d1215); max-width:168px; aspect-ratio:4/5; }
.pc-bad .pc-photo-ph{
  background:
    radial-gradient(closest-side at 50% 34%, rgba(226,160,160,.20), transparent 70%),
    radial-gradient(closest-side at 50% 96%, rgba(226,160,160,.14), transparent 72%);
}
.pc-x{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  font-size:56px; font-weight:300; color:rgba(232,150,150,.5); text-shadow:0 4px 20px rgba(0,0,0,.6);
}
.pcb-ask{ text-align:center; margin:0; }
.pcb-title{
  margin:2px 0 10px; text-align:center;
  font-family:var(--rp-font, var(--font-serif)); font-size:21px; font-weight:600; color:#F2EFE8;
}
.pcb-head{ color:#E8A0A0; text-align:center; line-height:1.55; word-break:keep-all; }
.pc-bad .pc-tag{ border-color:rgba(226,160,160,.28); background:rgba(226,160,160,.08); color:#F0DEDE; }
.pcb-breaks{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(226,160,160,.16); }
.pcb-h{ margin:0 0 8px; font-size:12.5px; font-weight:700; color:rgba(240,231,214,.62); }
.pcb-b{ padding:7px 0; border-top:1px solid rgba(244,235,214,.07); }
.pcb-b:first-of-type{ border-top:0; }
.pcb-t{ display:block; font-size:14.5px; line-height:1.55; color:#F2EFE8; word-break:keep-all; }
.pcb-why{ display:block; margin-top:2px; font-size:11.5px; color:rgba(240,231,214,.5); }
.pcb-where{ margin-top:12px; }
.pcb-tell{ margin-top:12px; }
.pc-bad .bw-grow-next{ color:#E8A0A0; }

/* ── 「썸에서 내 강점과 약점」 카드 (2026-09-04) ─────────────────────
   ⚠️ 두 칸을 **나란히** 둔다. 위아래로 쌓으면 "장점 목록 / 단점 목록"으로 읽혀 잔소리가 된다.
      옆에 놓아야 같은 뿌리의 앞뒤 면으로 읽힌다. */
.fl-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.fl-h{ margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.01em; }
.fl-h-up{ color:#9FD3B0; }
.fl-h-dn{ color:#E8B98A; }
.fl-i{ padding:8px 0; border-top:1px solid rgba(244,235,214,.08); }
.fl-i:first-of-type{ border-top:0; }
.fl-t{ display:block; font-size:13.5px; line-height:1.5; color:#F2EFE8; word-break:keep-all; }
.fl-t.is-up{ color:#EAF4EE; }
.fl-t.is-dn{ color:#F4EBE2; }
.fl-why{ display:block; margin-top:3px; font-size:11px; color:rgba(240,231,214,.48); }
@media (max-width:340px){ .fl-cols{ grid-template-columns:1fr; } }

/* ── 「내가 반복해서 끌리는 사람」 카드 ────────────────────────────── */
.at-rows{ margin-top:14px; }
.at-rows .pc-k{ flex:0 0 58px; }

/* ── 「앞으로 3년, 이 시기를 놓치지 마세요」 카드 (2026-09-04) ─────── */
.lm-count{
  margin:14px 0 6px; padding:11px 14px; border-radius:10px;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid rgba(231,206,148,.26); background:rgba(231,206,148,.06);
}
.lm-count-k{ font-size:13.5px; color:rgba(240,231,214,.72); }
.lm-count-v{ font-family:var(--rp-font, var(--font-serif)); font-size:26px; font-weight:700; color:#E7CE94; line-height:1; }
.lm-count-v em{ font-style:normal; font-size:14px; margin-left:3px; opacity:.85; }
.lm-list{ margin-top:6px; }
.lm-i{ padding:12px 0; border-top:1px solid rgba(244,235,214,.08); }
.lm-i:first-child{ border-top:0; }
.lm-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.lm-d{ font-size:15px; font-weight:700; color:#F2EFE8; letter-spacing:.01em; }
.lm-h{ font-size:13px; letter-spacing:2px; color:#E0868D; white-space:nowrap; }
.lm-h-off{ color:rgba(240,231,214,.18); }
.lm-line{ margin:5px 0 0; font-size:13.5px; line-height:1.6; color:rgba(240,231,214,.78); word-break:keep-all; }
.lm-i.is-lock .lm-d{ color:rgba(240,231,214,.55); }
.pc-disc{ margin:9px 0 0; font-size:11px; line-height:1.55; color:rgba(240,231,214,.42); }
.pc-disc b{ color:rgba(240,231,214,.62); font-weight:700; }
/* 결과지 운명의 짝 페이지 — 카드 아래 한 줄 안내 */
.pc-lead{ margin:14px 2px 0; font-size:13.5px; line-height:1.7; color:rgba(240,231,214,.72); }

/* ══════════════════════════════════════════════════════════
   「타고난 그릇」 카드 (2026-08-25)
   청월당 「타고난 돈 그릇」(황금 항아리)을 보고 다시 짠 카드. 우리는 **곳간**으로 간다.
   ⚠️ 포인트 글자(제목·등급 이름)는 결과지 「제 1 장」과 같은 'Cafe24 Classictype'.
      이 폰트는 **굵기가 400 하나뿐**이라 font-weight 를 올리면 브라우저가 억지로
      굵게 흉내 내(가짜 굵게) 획이 뭉갠다. 강조는 굵기 말고 **색·자간**으로 준다.
   ══════════════════════════════════════════════════════════ */
.bw{
  border-radius:16px; overflow:hidden;
  /* ⚠️ 단색이다 (2026-09-18, JH «이미지 아래 그라디언트랑 배경색이 달라서 선이 보인다»).
     전에는 #15110c→#0d0b09 그러데이션이었는데, 사진 아래 덮개(.bw-photo-cap)가 #0d0b09 로 끝나서
     사진이 끝나는 높이의 카드 색(#12100b 쯤)과 어긋나 **가는 선**이 보였다. 둘을 같은 색으로 맞춘다. */
  background:#0d0b09;
  border:1px solid rgba(200,162,74,.22);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.bw-photo{ position:relative; aspect-ratio:16/9; background:#0d0b09; }
.bw-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.bw-photo-cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 18px 16px;
  background:linear-gradient(to bottom, rgba(13,11,9,0), rgba(13,11,9,.88) 62%, #0d0b09);
}
.bw-ask{ margin:0 0 5px; font-size:12.5px; color:rgba(240,231,214,.62); letter-spacing:-.01em; }
.bw-title{
  /* ⭐ 결과지 「제 1 장」과 같은 폰트(Cafe24 Classictype). --rp-font 는 결과지 안에서만 정의되므로
     여기서는 폰트를 직접 적는다. */
  margin:0; font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400;
  font-size:clamp(24px, 7vw, 30px); letter-spacing:.06em; line-height:1.2;
  color:#F3E6C4; text-shadow:0 2px 18px rgba(0,0,0,.8);
}

.bw-body{ padding:18px 18px 20px; }
.bw-rank{
  display:inline-block; padding:5px 11px; margin-bottom:11px; border-radius:999px;
  background:rgba(200,162,74,.16); border:1px solid rgba(200,162,74,.45);
  font-size:11.5px; font-weight:700; color:#E7CE94; letter-spacing:-.01em;
}
.bw-name{
  font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400;
  font-size:clamp(22px, 6.4vw, 27px); line-height:1.3; color:#F6EEDC; margin-bottom:9px;
}
.bw-desc{ margin:0; font-size:13.5px; line-height:1.85; color:rgba(240,231,214,.72); word-break:keep-all; white-space:pre-line; }

/* 현재 → 잠재 — 청월당에는 없는 우리만의 칸(용신솔루션 후킹) */
.bw-grow{
  margin-top:16px; padding:13px 14px; border-radius:11px;
  background:rgba(200,162,74,.08); border:1px dashed rgba(200,162,74,.4);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.bw-grow-now, .bw-grow-next{ font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400; font-size:16px; }
.bw-grow-now{ color:rgba(240,231,214,.62); }
.bw-grow-arrow{ color:#C8A24A; font-size:15px; }
.bw-grow-next{ color:#F0D89B; }
.bw-grow-note{ flex:0 0 100%; margin:6px 0 0; font-size:12.5px; color:rgba(240,231,214,.62); }
.bw-grow-note b{ color:#E7CE94; }

/* 전체 등급표 — 내 등급만 금색으로 살리고 나머지는 흐리게 */
.bw-table{ margin-top:18px; padding:14px 14px 8px; border-radius:11px; background:rgba(255,255,255,.035); }
.bw-table-t{ text-align:center; font-size:13px; font-weight:700; color:rgba(240,231,214,.8); margin-bottom:10px; }
.bw-row{ display:flex; justify-content:space-between; gap:10px; padding:7px 2px; font-size:12.5px; color:rgba(240,231,214,.32); }
.bw-row-n{ font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400; }
.bw-row.on{ color:#F0D89B; }
.bw-row.on .bw-row-n{ letter-spacing:.04em; }   /* 굵게 대신 자간 (위 ⚠️ 참고) */
.bw-row.on .bw-row-r{ font-weight:700; }

/* ══════════════════════════════════════════════════════════
   「대운의 흐름」 카드 (2026-08-25) — .bw 껍데기를 그대로 쓰고 안쪽만 다르다
   청월당 대운표는 연도·나이 두 줄뿐이다. 우리는 칸마다 점수가 있으니 막대를 세운다.
   ⚠️ 칸 수는 사주마다 다르다(보통 8~10). 넘치면 가로로 밀어서 본다.
   ══════════════════════════════════════════════════════════ */
.lk-chart{
  margin-top:16px; padding:14px 12px 10px; border-radius:11px;
  background:rgba(255,255,255,.035);
}
.lk-cols{
  display:flex; gap:4px; align-items:flex-end;
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px;
}
.lk-cols::-webkit-scrollbar{ height:0 }
.lk-col{ flex:1 0 38px; min-width:38px; text-align:center; }
.lk-col.past{ opacity:.42 }          /* 지나온 자리는 흐리게 */

.lk-bar-box{
  height:64px; display:flex; align-items:flex-end; justify-content:center;
  border-radius:5px 5px 0 0;
}
.lk-bar{ width:100%; border-radius:4px 4px 0 0; }
.lk-bar.up{   background:linear-gradient(180deg,#E7CE94,#C8A24A); }
.lk-bar.flat{ background:rgba(240,231,214,.24); }
.lk-bar.down{ background:linear-gradient(180deg,#8C5A55,#5E3B38); }

/* 지금 서 있는 칸 — 색이 아니라 테두리로 표시한다.
   ⚠️ 색으로 하면 '좋다/나쁘다'(순풍/맞바람)와 뜻이 섞인다. */
.lk-col.now .lk-bar-box{ box-shadow:inset 0 0 0 1.5px rgba(240,216,155,.85); background:rgba(200,162,74,.1); }
.lk-col.now{ opacity:1 }
.lk-col.peak .lk-bar{ box-shadow:0 0 14px rgba(231,206,148,.55); }

.lk-gz{ margin-top:6px; font-size:11.5px; color:rgba(240,231,214,.72);
        font-family:'Cafe24 Classictype','Noto Serif KR',serif; }
.lk-yr{  font-size:10px; color:rgba(240,231,214,.4); margin-top:2px; }
.lk-age{ font-size:10px; color:rgba(240,231,214,.3); }
.lk-col.now .lk-gz, .lk-col.now .lk-yr{ color:#F0D89B; }

.lk-legend{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:11px; padding-top:9px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:10.5px; color:rgba(240,231,214,.45);
}
.lk-legend span{ display:inline-flex; align-items:center; gap:4px }
.lk-legend-now{ margin-left:auto; color:rgba(240,216,155,.7) }
.lk-dot{ width:8px; height:8px; border-radius:2px; display:inline-block }
.lk-dot.up{ background:#C8A24A } .lk-dot.flat{ background:rgba(240,231,214,.24) } .lk-dot.down{ background:#7A4B47 }

/* 정점 칸 — 곳간 카드의 성장 칸과 같은 톤(점선 금테)으로 맞춘다 */
.lk-peak{
  margin-top:16px; padding:14px; border-radius:11px;
  background:rgba(200,162,74,.08); border:1px dashed rgba(200,162,74,.4);
}
.lk-peak-tag{ font-size:11.5px; color:#E7CE94; letter-spacing:-.01em }
.lk-peak-y{
  margin-top:5px; font-family:'Cafe24 Classictype','Noto Serif KR',serif;
  font-size:30px; line-height:1.15; color:#F6EEDC; letter-spacing:.02em;
}
.lk-peak-y small{ font-size:13px; color:rgba(240,231,214,.6); letter-spacing:0 }
.lk-peak-n{ margin:6px 0 0; font-size:12.5px; color:rgba(240,231,214,.66) }
.lk-low{ margin:11px 2px 0; font-size:12.5px; line-height:1.7; color:rgba(240,231,214,.58) }
.lk-low b{ color:#E0B8A8 }

/* 풀이 페이지 안에 얹는 카드 (2026-08-25)
   ⭐ 카드를 표지 뒤에 따로 세우지 않고 **그 이야기를 하는 풀이 안**에 넣는다.
   제목 바로 아래, 본문 바로 위 — 글을 읽기 전에 그림으로 결론을 먼저 보여 준다. */
.wt-puri-card{ margin:0 0 22px; }
/* 결과지는 밝은 종이 톤이라 카드(먹빛)가 붕 뜬다 — 위아래 여백과 그림자로 앉힌다 */
.wt-puri-card .bw{ box-shadow:0 10px 34px rgba(0,0,0,.28); }
/* 성장 칸이 없을 때 들어가는 그릇 유형 줄 — 화살표가 없으니 왼쪽 정렬로 */
.bw-grow.bw-type{ display:block; }
.bw-grow.bw-type .bw-grow-note{ margin-top:5px; }

/* ══════════════════════════════════════════════════════════════════
   종합사주 티저 — 「이어지는 웹툰」 모드 (2026-08-25)
   타이트사주(_참고/타이트사주-MZ무당사주/)를 보고 짰다.
   ⭐ 핵심은 하나다 — **사진 위아래를 검게 녹여** 페이지 배경과 하나로 붙인다.
      카드 테두리도, 장면 사이 여백도 없다. 스크롤이 한 편의 만화처럼 이어진다.
   ⚠️ `.wt2-flow` 가 붙은 뿌리에서만 적용된다. 재물운·직업운 티저는 옛 모습 그대로다.
   ══════════════════════════════════════════════════════════════════ */
.wt2-flow .wt2-scene { padding: 34px 24px; }
/* 장면 사이 금색 매듭 구분선 제거 — 끊기면 "이어지는" 느낌이 죽는다 */
.wt2-flow .wt2-block::before,
.wt2-flow .wt2-panel::before { display: none; }
.wt2-flow .wt2-block { border-top: 0; }

/* ── 말풍선 컷 ──
   ⚠️ `.wt2-flow .wt2-scene`(0,2,1) 가 `.wt2-talk`(0,1,0) 보다 세다 —
      풀블리드로 만들려면 **flow 를 붙여** 같은 무게로 눌러야 한다. */
.wt2-flow .wt2-talk { padding: 0 0 44px; }
/* ⭐ 위아래 그라데이션. mask 를 쓰면 그림 자체가 투명해져서 어떤 배경색에도 녹는다
      (검은 판을 덮는 방식은 배경색이 바뀌면 테두리가 드러난다). */
.wt2-talkcut { position: relative; margin: 0; }
.wt2-talkcut img {
  width: 100%; display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
}
/* ⚠️ 컷끼리 음수 마진으로 겹치지 않는다 — 뒤 컷이 앞 컷의 말풍선을 덮어 글자가 잘렸다.
      마스크가 이미 위아래를 투명하게 만들어 두므로, 그냥 붙여 놓아도 검은 배경 위에서 이어져 보인다.
      그 사이에 생기는 검은 여백이 바로 **말풍선이 앉는 자리**다(타이트사주가 쓰는 구조).
   ⭐ 여백을 넉넉히 준다(2026-08-26 사장님 요청 + 타이트사주 실물 대조).
      컷과 대사가 붙어 있으면 숨 쉴 틈이 없어 만화가 아니라 캡션처럼 읽힌다.
      대사는 **검은 여백 한가운데** 떠 있어야 한 박자 쉬어 가는 느낌이 난다. */
.wt2-flow .wt2-talk + .wt2-talk { margin-top: 0; }

.wt2-bubbles {
  margin-top: -12px; padding: 46px 28px 42px;
  position: relative; z-index: 1;
}
.wt2-bubble {
  margin: 0 0 14px; font-size: 19px; line-height: 1.95; letter-spacing: -.01em;
  color: rgba(240,231,214,.95); word-break: keep-all; text-align: center;
}
.wt2-bubble:last-child { margin-bottom: 0; }
.wt2-bubble b { color: #F0D89B; font-weight: 700; }

/* ── 말풍선 3종 (2026-09-04 새 종합사주 콘티) ──────────────────────────
   콘티가 "작은 윗줄 → 큰 본줄" 리듬으로 읽힌다. 윗줄은 숨을 고르는 자리라
   작고 흐리게, 본줄은 손님이 한 문장만 들고 가야 하니 크고 굵게 간다.
   ⚠️ 모바일 우선 — clamp 로 잰다. 폰에서 한 줄 12~14자 안팎이 되게 잡았다. */
/* ⚠️ (2026-09-04) 윗줄을 **흰색으로, 한 호 크게** 올렸다(사장님 지시) —
   흐린 회색이라 폰에서 잘 안 읽혔다. 본줄과는 굵기(400 vs 800)로 가른다. */
.wt2-bubble-lead {
  font-size: clamp(16px, 4.6vw, 18px); line-height: 1.75; margin-bottom: 10px;
  color: #F5F6F7; letter-spacing: .01em;
}
.wt2-bubble-big {
  font-size: clamp(20px, 6vw, 25px); line-height: 1.6; margin-bottom: 26px;
  font-weight: 800; color: #F5F6F7;
}
/* "명심해" 자리 — 가장 큰 한마디 + 아래로 떨어지는 세로줄 */
.wt2-bubble-hero {
  font-size: clamp(28px, 8.4vw, 36px); line-height: 1.35; font-weight: 900;
  color: #F7F8F9; letter-spacing: .02em; margin-bottom: 30px;
}
.wt2-bubble-hero::after {
  content: ''; display: block; width: 1px; height: 44px; margin: 22px auto 0;
  background: linear-gradient(180deg, rgba(240,231,214,.55), rgba(240,231,214,0));
}
/* 컷 아래 숨을 더 주는 장면(2026-09-04 사장님 지적) — 인물이 컷 아래쪽에 있어
   마스크가 끝나는 자리와 글자가 붙어 보이는 컷(엽전·이마 짚기)에만 붙인다. */
.wt2-bubbles-gap { padding-top: 92px; }
/* 맺는 한마디 — 앞 줄과 한 박자 띄우고 제일 크게 (2026-09-04) */
.wt2-bubble-close {
  margin-top: 34px; font-size: clamp(24px, 7.2vw, 30px); line-height: 1.5;
  font-weight: 900; color: #F7F8F9; letter-spacing: .01em;
}

/* 여는 장면 — 컷 아래 손님 이름 */
.wt2-talk-name {
  margin: 0 0 34px; text-align: center; font-weight: 900;
  font-size: clamp(26px, 8.6vw, 36px); letter-spacing: .06em; color: #F7F8F9;
  text-shadow: 0 0 30px rgba(159,182,212,.45);
}
/* 가린 좌표(연도·장소) — 글자는 보이되 읽을 수 없게 */
.wt2-mask {
  font-style: normal; letter-spacing: .12em; color: rgba(240,216,155,.85);
  background: rgba(200,162,74,.14); border-radius: 3px; padding: 0 3px;
}

/* ── 말풍선 컷이 아닌 장면 컷도 같은 방식으로 녹인다 (2026-08-26) ──
   ⚠️ `grade`·`card`·`boom`·`warn` 장면은 `.wt2-cut` 을 쓰는데, 여기엔 **아래쪽 어둠막만** 있었다.
      그래서 위쪽이 칼로 자른 듯 뚝 끊겨 말풍선 컷과 다르게 보였다(사장님이 발견).
      말풍선 컷과 똑같이 **위아래를 투명하게** 만들어 배경과 이어지게 한다.
   ⚠️ 아래쪽 `::after` 어둠막은 마스크와 겹쳐 이중으로 어두워지므로 flow 안에서는 끈다. */
.wt2-flow .wt2-cut { margin: 0 -24px 10px; }
.wt2-flow .wt2-cut::after { display: none; }
.wt2-flow .wt2-cut img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
}
/* 표지·큰 그림(hero/art)도 같은 규칙 */
.wt2-flow .wt2-art {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

/* ── 데이터 패널(오행·신강약·카드) ── */
.wt2-panel { padding-top: 26px; }
.wt2-cardwrap { margin-top: 16px; text-align: left; }
.wt2-panel-note {
  margin: 14px 4px 0; font-size: 12.5px; line-height: 1.7;
  color: rgba(240,231,214,.6); word-break: keep-all;
}
.wt2-panel-note b { color: #E7CE94; }

/* (2026-08-26) 옛 오행 패널 CSS(.wt2-oh-*)를 지웠다 — 「다섯 기운」 카드(.oh-*)로 대체됐다. */

/* 신강약 눈금자 */
.wt2-sc { margin-top: 20px; padding: 0 6px; }
.wt2-sc-line { display: flex; align-items: center; justify-content: space-between; position: relative; }
.wt2-sc-line::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px;
  background: rgba(255,255,255,.12);
}
.wt2-sc-dot {
  width: 9px; height: 9px; border-radius: 50%; position: relative; z-index: 1;
  background: rgba(255,255,255,.16);
}
.wt2-sc-dot.on {
  width: 15px; height: 15px; background: #C8A24A;
  box-shadow: 0 0 0 4px rgba(200,162,74,.18), 0 0 16px rgba(200,162,74,.5);
}
.wt2-sc-labels { display: flex; justify-content: space-between; margin-top: 9px; }
.wt2-sc-labels span { flex: 1; text-align: center; font-size: 10.5px; color: rgba(240,231,214,.34); }
.wt2-sc-labels span.on { color: #F0D89B; font-weight: 700; }
.wt2-sc-verdict { margin: 18px 0 0; font-size: 15px; color: rgba(240,231,214,.8); }
.wt2-sc-verdict b { color: #F0D89B; }

/* ── 하단 고정 CTA — 27컷 내내 따라다닌다 ──
   ⚠️ 경쟁사 두 곳 모두 이걸 달고 있다. 길이가 길어도 언제든 살 수 있어야 한다. */
.wt2-sticky {
  /* ⚠️ (2026-09-06) `fixed` → `sticky` 로 바꿨다. 이야기를 읽는 동안 바가 화면 아래를
     계속 덮어 몰입을 깨뜨렸다(사장님 지적). 이제 상거래 구간(.wt2-cta-zone)의 **마지막 자식**이라,
     그 구간에 들어서야 화면 바닥에 붙고 위로 되읽으러 가면 도로 사라진다 — 자바스크립트 없이.
     ⚠️ 조상에 `overflow: hidden` 을 걸면 sticky 가 죽는다. */
  position: sticky; bottom: 0; z-index: 40;
  padding: 2px 16px calc(2px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(7,7,14,0), rgba(7,7,14,.9) 44%, #07070E);
  pointer-events: none;
}
/* 상거래 구간(목차·후기·가격·CTA) — 이 상자가 화면에 들어와야 CTA 바가 뜬다.
   ⚠️ 여기에 overflow·transform·filter 를 걸지 말 것. 셋 다 안쪽 sticky 를 깨뜨린다. */
.wt2-cta-zone { position: relative; }
/* ⭐ 문양 테두리 버튼 (2026-08-26) — 타이트사주의 「범산 도령에게 사주보기」를 보고 만든 것.
   ⚠️ **글자는 그림에 굽지 않는다.** 그림(btn.webp)은 테두리만 담고 글자는 그 위에 HTML 로 얹는다 —
      문구를 바꿔도 그림을 다시 안 만들어도 되고, 폰의 3배 화면에서 글자가 안 뭉갠다.
   ⚠️ 그림이 안 뜨면(onerror·느린 망) 글자만 남아 안 보인다 → 버튼 바탕에 **옛 금색을 깔아 둔다.** */
.wt2-sticky-btn {
  pointer-events: auto; position: relative;
  /* ⚠️ 문양판은 가로:세로 = 2.4:1 이라 폭을 꽉 채우면 **화면의 20%** 를 먹는다
        (27컷 내내 따라다니는 바라 그건 너무 크다). 폭을 조금 줄여 14% 선으로 맞춘다. */
  display: block; width: 88%; max-width: 340px; margin: 0 auto;
  padding: 0; border: 0; cursor: pointer;
  /* ⚠️ 투명 PNG 라 바탕을 깔면 문양 밖 네모가 드러난다 → 바탕 없음.
        그림이 안 뜰 때를 위한 폴백은 `.wt2-sticky-btn.is-fallback` 에서 처리한다. */
  background: none; border-radius: 0; overflow: visible;
  /* ⚠️ drop-shadow 를 걸지 않는다(2026-08-26 사장님이 발견).
        문양이 바탕 상자를 거의 꽉 채우고 있어서, 그림자가 알파 모양을 따라 번지면
        **뒤에 흐릿한 네모 자국**처럼 보인다. 그림 자체는 깨끗하다(자홍색 위에 얹어 확인함).
        띄우는 느낌은 아래 고정 바의 어둠막이 이미 만들어 준다. */
}
.wt2-sticky-btn img { width: 100%; display: block; }
.wt2-sticky-btn span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Cafe24 Classictype','Noto Serif KR',serif; font-weight: 400;
  font-size: 18px; letter-spacing: .03em; color: #FFF3D0;
  text-shadow: 0 2px 8px rgba(0,0,0,.95);
}
.wt2-sticky-btn:active { transform: scale(.985); }
/* 고정 바에 마지막 장면이 가리지 않게 바닥 여백을 준다.
   ⚠️ 문양 버튼으로 바뀌며 바가 높아졌다 — 여백도 같이 키워야 마지막 줄이 안 잘린다. */
.wt2-flow { padding-bottom: 140px; }

/* ── 글자 없는 첫 화면 / 표지 (2026-08-26 사장님 요청) ──────────────
   그림 한 장만 남긴다. ⚠️ 어둠막(veil)과 바닥 그라데이션은 **글자를 읽히게 하려고** 덮는 것이다.
   글자가 없으면 그림만 탁해지므로, 아래쪽으로 이어 붙이는 정도만 아주 옅게 남긴다. */
.wt2-hero-bare {
  min-height: 0; height: auto; display: block; padding: 0;
  /* 컷 위아래를 검게 녹여 다음 말풍선 컷과 자연스럽게 이어지게 — 티저 본문과 같은 방식 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.wt2-hero-bare .wt2-art { position: static; height: auto; object-fit: contain; }

/* 결과지 표지 — 글자 없는 판 */
.wt-cover-bare .wt-cover-bg {
  background: linear-gradient(180deg, rgba(7,7,14,0) 0%, rgba(7,7,14,0) 66%, rgba(7,7,14,.55) 88%, #000000 100%);
}

/* 「기운을 입는다」 카드 (2026-08-26) — .bw 껍데기를 그대로 쓰고 안쪽만 다르다 */
.cm-rows { margin-top: 18px; }
.cm-row {
  display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,.07);
}
.cm-row:first-child { border-top: 0; }
.cm-k {
  font-family: 'Cafe24 Classictype','Noto Serif KR',serif; font-weight: 400;
  font-size: 15px; color: #E7CE94;
}
.cm-v { font-size: 14px; line-height: 1.65; color: rgba(240,231,214,.86); word-break: keep-all; }
/* ⚠️ 「채워야 할 기운」만 항목 이름이 길다('시간대'·'두는 것') — 이 카드에서만 첫 칸을 넓힌다.
   「기운을 입는다」(색·옷·장신구)는 46px 로 충분하므로 공용 값은 건드리지 않는다. */
.rh .cm-row { grid-template-columns: 60px 1fr; }
/* ⚠️ (2026-09-04) 라벨이 길면 두 줄로 접힌다("가까워 / 지면"). 카드마다 칸 폭을 따로 준다.
   기본 46px 는 「색·옷」처럼 두 글자용이다. */
.chm-rows .cm-row { grid-template-columns: 92px 1fr; }
.pcb-where.cm-row { grid-template-columns: 88px 1fr; }
.pc-bad .pc-k { flex: 0 0 66px; }

/* 티저 — 용신 쪽은 가린다(있다는 건 보이되 못 읽는다) */
.cm-blur { filter: blur(5.5px); user-select: none; pointer-events: none; color: rgba(240,216,155,.9); }
.cm-avoid {
  margin: 14px 2px 0; font-size: 12.5px; line-height: 1.7;
  color: rgba(224,160,144,.9); word-break: keep-all;
}
.cm-avoid b { color: #E0A090; margin-right: 4px; }

/* 「기운의 세기」 카드 (2026-08-28) — .bw 껍데기를 쓰고 안쪽만 다르다.
   ⚠️ 눈금은 5칸이다(엔진이 다섯만 낸다). 칸을 늘리면 없는 정밀도를 파는 것이 된다. */
.st-gauge { margin: 18px 2px 4px; }
.st-line { display: flex; align-items: center; justify-content: space-between; position: relative; }
.st-line::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 1px; background: rgba(255,255,255,.13);
}
.st-dot {
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.st-dot.on {
  width: 15px; height: 15px; background: #E7CE94;
  box-shadow: 0 0 0 4px rgba(231,206,148,.16);
}
.st-labels { display: flex; justify-content: space-between; margin-top: 9px; }
.st-labels span { font-size: 11.5px; color: rgba(240,231,214,.42); letter-spacing: -.02em; }
.st-labels span.on {
  color: #F0D89B; font-size: 13px;
  font-family: 'Cafe24 Classictype','Noto Serif KR',serif;
}
.st-mean { margin-top: 14px; }
.st-special {
  margin: 18px 2px 0; font-size: 14px; line-height: 1.7;
  color: rgba(240,231,214,.86); word-break: keep-all;
}
.st-special b, .st-mean b { color: #E7CE94; }
.st-note {
  margin: 14px 2px 0; font-size: 12.5px; line-height: 1.7;
  color: rgba(240,231,214,.55); word-break: keep-all;
}
.st-note b { color: rgba(231,206,148,.9); }

/* 「다섯 기운」 카드 (2026-08-26) — .bw 껍데기를 쓰고 안쪽만 다르다
   ⭐ 오행 색은 「기운을 입는다」 카드가 처방하는 색과 **같은 매핑**이다(두 카드가 이어져 읽힌다). */
.oh-rows { margin-top: 18px; }
.oh-row {
  display: grid; grid-template-columns: 30px 30px 1fr 44px 34px;
  align-items: center; gap: 8px; padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.oh-row:first-child { border-top: 0; }
.oh-ch {
  font-family: 'Cafe24 Classictype','Noto Serif KR',serif; font-weight: 400;
  font-size: 21px; line-height: 1; text-align: center;
}
.oh-nm { font-size: 11.5px; color: rgba(240,231,214,.5); }
.oh-bar { height: 9px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.oh-bar i { display: block; height: 100%; border-radius: 5px; }
.oh-pct { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(240,231,214,.82); }
.oh-jg { text-align: right; font-size: 10.5px; color: rgba(240,231,214,.34); }
/* 과다·결핍만 색으로 티를 낸다 — 적정은 조용히 둔다 */
.oh-row.is-exc .oh-jg  { color: #E0A090; }
.oh-row.is-lack .oh-jg { color: #89999F; }
.oh-row.is-exc .oh-pct,
.oh-row.is-lack .oh-pct { color: #F0E7D6; }

.oh-keys { display: flex; gap: 10px; margin-top: 18px; }
.oh-key {
  flex: 1; padding: 13px 8px; border-radius: 11px; text-align: center;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.oh-key b { display: block; font-size: 11.5px; color: rgba(240,231,214,.5); font-weight: 600; }
.oh-key span {
  display: block; margin: 6px 0 4px;
  font-family: 'Cafe24 Classictype','Noto Serif KR',serif; font-size: 28px; line-height: 1;
}
.oh-key small { font-size: 10.5px; color: rgba(240,231,214,.38); }
/* 티저 — 용신은 있다는 것만 보이고 못 읽는다 */
.oh-hide { filter: blur(8px); user-select: none; pointer-events: none; }
.oh-note { margin: 12px 2px 0; font-size: 12px; line-height: 1.7; color: rgba(240,231,214,.6); }
.oh-note b { color: #E7CE94; }

/* 「전체 등급」 카드 시안 2종 (2026-08-26) */
/* ── A안 · 낙관(인장) ── */
.gd-seal-body { text-align: center; }
.gd-seal {
  width: 128px; height: 128px; margin: 4px auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  /* 붉은 인주 위에 찍힌 도장. 테두리 두 겹이 낙관의 각(刻)을 흉내 낸다 */
  background: linear-gradient(180deg, #A8332B, #7E241E);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.16), inset 0 0 0 9px #A8332B,
              0 10px 30px rgba(140,40,32,.42);
}
.gd-seal span {
  font-family: 'Cafe24 Classictype','Noto Serif KR',serif; font-weight: 400;
  font-size: 46px; line-height: 1.08; letter-spacing: .04em; color: #FFF1E4;
  writing-mode: vertical-rl; text-orientation: upright;   /* 도장은 세로쓰기다 */
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.gd-label {
  font-family: 'Cafe24 Classictype','Noto Serif KR',serif; font-weight: 400;
  font-size: 26px; color: #F6EEDC; margin-bottom: 8px;
}
.gd-seal-body .bw-desc { text-align: center; }
.gd-seal-body .bw-grow { text-align: left; margin-top: 18px; }

/* ── B안 · 계단 ── */
.gd-stairs { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gd-step {
  position: relative; padding: 10px 12px; border-radius: 9px; text-align: center;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
  color: rgba(240,231,214,.34); font-size: 13px;
}
.gd-step-n { font-family: 'Cafe24 Classictype','Noto Serif KR',serif; }
/* 지금 있는 칸 — 금색으로 채운다 */
.gd-step.on {
  background: linear-gradient(180deg, rgba(200,162,74,.26), rgba(200,162,74,.12));
  border-color: rgba(200,162,74,.62); color: #F6EEDC;
  box-shadow: 0 0 20px rgba(200,162,74,.24);
}
/* 채우면 닿는 칸 — 점선으로 "아직 비었지만 갈 수 있다"를 보여준다 */
.gd-step.reach { border-style: dashed; border-color: rgba(200,162,74,.44); color: rgba(240,216,155,.78); }
.gd-step-t {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: #E7CE94; letter-spacing: -.01em;
}
.gd-note { margin: 14px 2px 0; font-size: 12.5px; line-height: 1.7; color: rgba(240,231,214,.62); }
.gd-note b { color: #E7CE94; }

/* ══════════════════════════════════════════════════════════════════
   인트로 영상 — 넓은 화면(PC)에서 잘리지 않게 (2026-08-27 사장님 지적)
   ⚠️ 영상은 **9:16 세로**(1080×1920)다. 폰에서는 `object-fit:cover` 가 맞지만,
      PC 처럼 가로로 넓은 화면에서는 폭을 채우느라 **위아래가 크게 잘린다**
      (사장님 캡처 — 얼굴 위아래가 날아갔다).
   → 화면이 영상보다 넓어지는 순간부터 **높이에 맞추고 폭은 비율대로** 둔다.
      대사·버튼·어둠막도 같은 폭으로 묶어야 영상 밖 검은 여백으로 새지 않는다.
   ⚠️ `min-aspect-ratio: 9/16` = 화면이 영상보다 가로로 넓다는 뜻. 폰 세로는 여기 안 걸린다.
   ══════════════════════════════════════════════════════════════════ */
@media (min-aspect-ratio: 9/16) {
  .life-intro {
    /* 영상이 차지할 폭 — 높이에 9:16 을 곱한 값(화면 폭을 넘지 않게) */
    /* (새 판, 2026-09-21 JH) **앱 프레임(--max-width 448px)보다 넓어지지 않게** 한 번 더 묶는다.
       전에는 PC 에서 높이 900 이면 영상이 506px 로 나와, 앞뒤 화면(448px)보다 혼자 넓었다.
       넘치는 만큼은 좌우가 조금 잘린다(위아래는 그대로 다 보인다). */
    --li-w: min(100%, var(--max-width), calc(100dvh * 9 / 16));
  }
  .life-intro .li-video {
    width: var(--li-w); height: 100dvh;
    margin: 0 auto;
    object-fit: cover;          /* 폭이 비율대로라 이제 잘리지 않는다 */
    object-position: 50% 50%;
  }
  /* 어둠막·대사·버튼을 영상 폭 안으로 가둔다 */
  .life-intro .li-shade,
  .life-intro .li-cap,
  .life-intro .li-cta {
    left: 50%; right: auto;
    width: var(--li-w);
    transform: translateX(-50%);
  }
  .life-intro .li-cap { width: calc(var(--li-w) - 40px); }
  .life-intro .li-cta { width: calc(var(--li-w) - 32px); }
  /* 버튼은 눌릴 때 아래로 살짝 밀리는 연출이 있다 — 가운데 정렬을 유지한 채 얹는다 */
  .life-intro .li-cta.on { transform: translateX(-50%); }
  /* 건너뛰기는 영상 오른쪽 위에 붙는다 */
  .life-intro .li-skip { right: calc(50% - var(--li-w) / 2 + 14px); }

  /* 위저드 배경 영상도 같은 규칙 — 여기도 세로 영상을 가로 화면에 깔고 있었다 */
  .wiz-video { object-position: 50% 50%; }
}

/* ══════════════════════════════════════════════════════════
   「내 그릇에 맞는 자산 배분」 카드 (2026-09-04)
   오행 카드(.oh)와 같은 「막대 + 수치」 결. 다만 여기는 항목이 4개뿐이라 한 줄에
   이름·별칭·수치를 얹고 막대를 아래로 내렸다 — 폰에서 이 편이 안 눌린다.
   ⚠️ 이미지가 없어도 카드가 무너지면 안 된다 → .no-img 일 때 사진칸을 글상자로 바꾼다.
   ══════════════════════════════════════════════════════════ */
.bw-photo.no-img{ aspect-ratio:auto; background:linear-gradient(180deg,#1b1610,#0d0b09); }
.bw-photo.no-img img{ display:none; }   /* 깨진 이미지 아이콘이 한 줄 남는다 */
.bw-photo.no-img .bw-photo-cap{ position:static; background:none; padding:20px 18px 4px; }

.pf-rows{ margin-top:14px; display:flex; flex-direction:column; gap:11px; }
.pf-row.is-top .pf-lb{ color:#F3E6C4; }
.pf-head{ display:flex; align-items:baseline; gap:7px; }
.pf-dot{ width:7px; height:7px; border-radius:50%; flex:none; align-self:center; }
.pf-lb{ font-size:13.5px; font-weight:700; color:rgba(240,231,214,.86); letter-spacing:-.01em; }
.pf-word{ font-size:11.5px; color:rgba(240,231,214,.42); }
.pf-pct{
  margin-left:auto; font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400;
  font-size:20px; line-height:1; letter-spacing:.02em;
}
.pf-pct small{ font-size:11px; margin-left:1px; opacity:.7; }
.pf-bar{ margin-top:5px; height:7px; border-radius:999px; background:rgba(240,231,214,.07); overflow:hidden; }
.pf-bar i{ display:block; height:100%; border-radius:999px; }
.pf-sub{ margin-top:4px; font-size:11.5px; color:rgba(240,231,214,.5); letter-spacing:-.01em; }

/* 비율을 돈으로 바꿔 주는 칸 — % 는 손에 안 잡힌다 */
.pf-money{
  margin-top:14px; padding:10px 13px; border-radius:11px;
  background:rgba(200,162,74,.08); border:1px dashed rgba(200,162,74,.3);
}
.pf-money span{ display:block; font-size:11.5px; color:rgba(240,231,214,.55); margin-bottom:5px; }
.pf-money p{ margin:0; font-size:13.5px; line-height:1.7; color:rgba(240,231,214,.8); word-break:keep-all; }
.pf-money b{ color:#E7CE94; font-weight:700; }

/* 티저 가림 — 퍼센트·막대·환산 줄만 흐린다(2026-09-04).
   ⚠️ 다른 카드가 쓰는 가림(.oh-hide · .cm-blur)과 **같은 세기**로 맞춘다 — 한 티저 안에서
      어떤 건 진하게 어떤 건 흐리게 가려지면 손님이 "고장인가?" 한다. */
.pf-hide{ filter:blur(8px); user-select:none; pointer-events:none; }
.pf-lock{
  margin:10px 0 0; font-size:12px; line-height:1.7; color:rgba(240,231,214,.6); word-break:keep-all;
}
.pf-lock b{ color:#E7CE94; font-weight:700; }

.pf-why{ margin-top:13px; }
.pf-why-t{ font-size:11.5px; color:rgba(240,231,214,.5); margin-bottom:8px; letter-spacing:.02em; }
.pf-why ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.pf-why li{
  padding:8px 12px; border-radius:9px; background:rgba(240,231,214,.04);
  border-left:2px solid rgba(200,162,74,.45);
}
.pf-why li b{ display:block; font-size:12.5px; color:#E7CE94; font-weight:700; margin-bottom:3px; }
.pf-why li span{ display:block; font-size:12px; line-height:1.65; color:rgba(240,231,214,.68); word-break:keep-all; }

.pf-disc{ margin:12px 0 0; font-size:11px; line-height:1.6; color:rgba(240,231,214,.42); word-break:keep-all; }
.pf-disc b{ color:rgba(240,231,214,.62); font-weight:700; }

/* ⚠️ 자산 배분 카드는 항목이 4개라 우리 카드 중 가장 길다(인쇄 환산 982px, A4 안쪽은 약 960px).
   글을 줄이는 대신 **사진칸을 납작하게** 만든다 — 이 그림은 위아래가 거의 어둠이라 손해가 없다.
   ⚠️ 「측정 ≠ 인쇄」 규칙 — 높이를 바꾸는 인쇄 규칙은 html.printing 에도 똑같이 적어야
      쪽 나눔 계산이 맞는다. 한쪽만 고치면 마지막 쪽 테두리가 어긋난다. */
@media print { .bw.pf .bw-photo{ aspect-ratio:2.45/1; } }
html.printing .bw.pf .bw-photo{ aspect-ratio:2.45/1; }

/* ══════════════════════════════════════════════════════════
   「인연의 달」 카드 (2026-09-04) — 옛 연애 등급 S/A/B/C/D 를 대신한다
   ⚠️ 달은 **그림 파일이 아니라 SVG** 다. 손님마다 모양이 달라야 하기 때문이다.
      그래서 사진칸(.bw-photo)을 안 쓰고 밤하늘칸(.mn-sky)을 따로 둔다.
   ══════════════════════════════════════════════════════════ */
.mn-sky{
  position:relative; padding:26px 18px 18px; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(90,110,150,.20), transparent 62%),
    linear-gradient(180deg,#0f1420,#0d0b09 78%);
}
.mn-sky .mn-svg{ width:118px; height:118px; display:block; margin:0 auto 14px; filter:drop-shadow(0 0 22px rgba(231,206,148,.28)); }
.mn-cap{ position:static; }
.mn-cap .bw-title{ text-shadow:0 2px 18px rgba(0,0,0,.8); }

.mn-name{
  font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400;
  font-size:clamp(26px, 7.6vw, 32px); line-height:1.25; color:#F6EEDC;
  letter-spacing:.04em; margin:2px 0 9px;
}

/* 「언제 찬다」 — 달로 바꾼 값어치의 절반이 이 칸이다 */
.mn-wax{
  margin-top:16px; padding:12px 14px; border-radius:11px;
  background:rgba(90,110,150,.12); border:1px dashed rgba(200,162,74,.32);
}
.mn-wax-t{ display:block; font-size:11.5px; color:rgba(240,231,214,.55); margin-bottom:5px; }
.mn-wax-b{ margin:0; font-size:13.5px; line-height:1.65; color:rgba(240,231,214,.78); word-break:keep-all; }
.mn-wax-b b{
  font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400;
  font-size:20px; color:#E7CE94; letter-spacing:.03em; margin-right:7px;
}
.mn-wax-b em{ font-style:normal; font-size:12.5px; color:rgba(240,231,214,.6); }

/* 다섯 단계 띠 — 그믐을 받은 손님에게 **다음이 초승달**이라는 게 보여야 한다 */
.mn-steps{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(240,231,214,.08);
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
}
.mn-step{ text-align:center; opacity:.34; }
.mn-step .mn-svg{ width:100%; max-width:38px; height:auto; margin:0 auto 5px; display:block; }
.mn-step span{ display:block; font-size:10.5px; color:rgba(240,231,214,.6); letter-spacing:-.02em; }
.mn-step.is-on{ opacity:1; }
.mn-step.is-on span{ color:#E7CE94; font-weight:700; }
.mn-step.is-on .mn-svg{ filter:drop-shadow(0 0 9px rgba(231,206,148,.5)); }

/* ── 「여덟 글자」 만세력 카드 (2026-09-17) — 라이프사주 「내 만세력」 표와 같은 구성, 색만 용신록 금색 ──
   팔각 칸은 clip-path 라 border 가 잘린다 → 바깥 면 + ::before 안쪽 면 두 겹으로 테두리처럼 보이게.
   회문 테두리는 모서리 조각 넷(거울로 뒤집음) + 사이 줄 여덟 — 표 크기가 바뀌어도 무늬가 안 찌그러진다. */
.ms .bw-body{ padding:16px 12px 14px; }
.ms-wrap{ position:relative; padding:16px; margin-top:2px; }
.ms-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.ms-table th{ padding:0 0 7px; font-size:11px; font-weight:600; color:rgba(240,231,214,.45); text-align:center; }
.ms-table td{ padding:4px 2px 5px; text-align:center; vertical-align:middle; }
.ms-table tr:not(:last-child) th, .ms-table tr:not(:last-child) td{ border-bottom:1px solid rgba(231,206,148,.08); }
.ms-lab{ text-align:left !important; width:50px; font-size:10px; line-height:1.35; color:rgba(240,231,214,.45); }
.ms-g{ position:relative; background:#2a2620; padding:8px 2px 7px;
  clip-path:polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px); }
.ms-g::before{ content:''; position:absolute; inset:1px; background:#15120e;
  clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.ms-g b, .ms-g span{ position:relative; z-index:1; }
.ms-g b{ display:block; font-family:'Noto Serif KR',serif; font-size:23px; font-weight:600; line-height:1.1; }
.ms-g span{ display:block; margin-top:3px; font-size:9px; color:rgba(240,231,214,.5); white-space:nowrap; }
.ms-g.me{ background:#C8A24A; }
.ms-g.me::before{ background:linear-gradient(150deg,#3a2c12,#1f1709); }
.ms-sub{ font-size:11px; color:rgba(240,231,214,.78); }
.ms-sub.me{ color:#E7CE94; font-weight:700; }
.ms-sub.dim{ color:rgba(240,231,214,.45); font-size:10px; letter-spacing:.02em; }
.ms-fret{ position:absolute; inset:0; pointer-events:none; color:rgba(200,162,74,.7);
  --s:.15; --cw:calc(122 * var(--s) * 1px); --ch:calc(126 * var(--s) * 1px); --t:calc(9 * var(--s) * 1px); --o2:calc(21 * var(--s) * 1px); }
.ms-fret svg{ position:absolute; display:block; width:var(--cw); height:var(--ch); }
.ms-fret .tl{ top:0; left:0; } .ms-fret .tr{ top:0; right:0; transform:scaleX(-1); }
.ms-fret .bl{ bottom:0; left:0; transform:scaleY(-1); } .ms-fret .br{ bottom:0; right:0; transform:scale(-1,-1); }
.ms-fret i{ position:absolute; display:block; background:currentColor; }
.ms-fret i.h{ left:var(--cw); right:var(--cw); height:var(--t); }
.ms-fret .t1{ top:0; } .ms-fret .t2{ top:var(--o2); } .ms-fret .b1{ bottom:0; } .ms-fret .b2{ bottom:var(--o2); }
.ms-fret i.v{ top:var(--ch); bottom:var(--ch); width:var(--t); }
.ms-fret .l1{ left:0; } .ms-fret .l2{ left:var(--o2); } .ms-fret .r1{ right:0; } .ms-fret .r2{ right:var(--o2); }

/* ══ 용신처방 상자 + 시기 그래프 (2026-09-18, JH) ═══════════════════════════════
   티저 목차의 «용신처방» 금박 현판을 리포트 풀이 안에도 둔다. 상자 하나에
   «언제(시기 그래프)» 와 «무엇을(처방 글)» 을 같이 담는다.
   ⚠️ 현판은 상자 테두리에 걸치므로 상자에 overflow:hidden 을 걸면 안 된다 —
      문양만 .rx-orn(안쪽 레이어)에서 잘라 낸다. 전에 이걸 상자에 걸어 현판 위가 잘렸다.
   ⚠️ 막대 색은 「대운의 흐름」 카드(.lk-bar)와 같은 값이다. 둘이 달라지면 같은 뜻이 두 색으로 보인다. */
.rx-box {
  position: relative; margin: 30px -2px 4px; padding: 26px 18px 20px;
  border: 1px solid #C9A24B; border-radius: 4px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(232,196,106,.17), rgba(232,196,106,.04) 70%);
}
.rx-box::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(201,162,75,.4); pointer-events: none; }
.rx-orn { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; pointer-events: none; }
.rx-orn::after { content: ''; position: absolute; right: -34px; bottom: -34px; width: 130px; height: 130px;
  background: var(--orn-circle) center / contain no-repeat; opacity: .09; }
.rx-plate {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 5px 15px; white-space: nowrap; border-radius: 3px;
  background: linear-gradient(180deg, #F3DC9B, #C9A24B); color: #1A1610;
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em; box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.rx-plate em { margin-right: 7px; font-family: var(--font-serif); font-style: normal; font-weight: 900; letter-spacing: .12em; opacity: .72; }
.rx-knot { position: relative; display: block; height: 12px; margin: 2px 18px 12px;
  background: var(--orn-knot) center / auto 12px no-repeat,
    linear-gradient(rgba(232,196,106,.32), rgba(232,196,106,.32)) left center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(rgba(232,196,106,.32), rgba(232,196,106,.32)) right center / calc(50% - 16px) 1px no-repeat; }
.rx-sep { position: relative; display: block; height: 1px; margin: 16px 6px 14px; background: rgba(232,196,106,.22); }
.rx-box p { position: relative; margin: 0; color: #E6DAB8; }
.rx-box p b, .rx-box p mark { color: #F3DC9B; }

/* 시기 그래프 — 상자 안에 들어가므로 제 배경·여백을 갖지 않는다 */
.tg { margin: 0; padding: 0; background: none; }
.tg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 12px; }
.tg-ask { font-family: var(--font-serif); font-size: 13.5px; color: #F3DC9B; margin: 0; }
.tg-unit { font-size: 10.5px; color: #8E8C88; letter-spacing: .04em; }
.tg-cols { display: flex; gap: 4px; align-items: flex-end; }
.tg-col { flex: 1 1 0; min-width: 0; text-align: center; }
.tg-box { height: 66px; display: flex; align-items: flex-end; justify-content: center; }
.tg-bar { width: 100%; border-radius: 4px 4px 0 0; background: rgba(240,231,214,.16); }   /* 평상 — 배경 맥락 */
.tg-bar.good { background: linear-gradient(180deg, #E7CE94, #C8A24A); }
.tg-bar.bad  { background: linear-gradient(180deg, #8C5A55, #5E3B38); }
.tg-star { display: block; height: 13px; font-size: 10px; letter-spacing: .06em; color: #E7CE94; margin-bottom: 3px; }
.tg-col.isbad .tg-star { color: #C98C86; }
.tg-dv .tg-col .tg-star { color: #E7CE94; }
.tg-dv .tg-star.down { color: #C98C86; margin: 3px 0 0; }
.tg-yr { margin-top: 6px; font-size: 10.5px; color: rgba(240,231,214,.55); white-space: nowrap; }
.tg-yr::after { content: ''; display: block; height: 11px; font-size: 9px; letter-spacing: .04em; color: #C8A24A; margin-top: 1px; }
.tg-col.on .tg-yr { color: #F0E7D6; font-weight: 700; }
.tg-col.now .tg-yr { color: #F0E7D6; }
.tg-col.now .tg-yr::after { content: '올해'; }
.tg-cols:not(.tg-dv):not(.tg-gr) .tg-col.now .tg-box { box-shadow: inset 0 0 0 1.5px rgba(240,216,155,.55); border-radius: 5px 5px 0 0; }
.tg-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11px; color: #A99775; }
.tg-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.tg-legend i.good { background: #C8A24A; }
.tg-legend i.bad  { background: #7B4C48; }
.tg-legend i.base { background: rgba(240,231,214,.22); }
/* 위아래(재물) */
.tg-dv .tg-box { height: 38px; align-items: flex-end; }
.tg-dv .tg-box.down { align-items: flex-start; border-top: 1px solid rgba(240,231,214,.14); }
.tg-dv .tg-bar.down { border-radius: 0 0 4px 4px; }
/* 곡선(건강) */
.tg-svg { display: block; width: 100%; height: 74px; overflow: visible; }
.tg-cv .tg-box { display: none; }
.tg-cv .tg-star { margin: 4px 0 0; }
/* 등급 계단(앞으로 5년) */
.tg-gr .tg-star { display: none; }
.tg-gr .tg-box { height: 58px; }
.tg-gr .tg-yr { font-size: 11px; }
.tg-grade { display: block; margin-top: 3px; font-size: 10.5px; color: #8E8C88; }
.tg-col.on .tg-grade { color: #E7CE94; }
.tg-col.isbad.on .tg-grade { color: #C98C86; }

/* 인쇄(PDF) — 배경색이 빠지면 막대가 사라진다. 색을 강제로 살린다. */
@media print {
  .rx-box, .rx-plate, .tg-bar, .tg-legend i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rx-box { break-inside: avoid; }
}

/* ── 「짚고 막는」 카드 (2026-09-18) — 유형 + 왜 + 차단법 ─────────────────
   전용 그림이 없어 사진 칸 없이 본문만 쓴다. 그림이 생기면 .bw-photo 를 얹으면 된다. */
.bw.gd .bw-body { padding-top: 22px; }
.bw.gd .bw-ask { color: var(--wt-dim); font-size: 12.5px; margin: 0 0 4px; }
.bw.gd .bw-title { margin: 0 0 12px; }
.gd-guard {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(232,196,106,.32); background: rgba(232,196,106,.06);
}
.gd-guard-k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--wt-gold); margin-bottom: 5px; }
.gd-guard-v { margin: 0; font-size: 14px; line-height: 1.7; color: #E6DAB8; }
.gd-lead { margin: 10px 0 6px; font-family: var(--font-serif); font-size: 17px; font-weight: 800; line-height: 1.45; color: var(--wt-gold); word-break: keep-all; }
.bw.gd .cm-k { min-width: 46px; }

/* ── 36풀이 카드 (2026-09-18) — 기존 .bw 뼈대를 쓰고 안쪽 짜임만 더한다 ────────── */
.bw.c36 .bw-ask { color: rgba(240,231,214,.62); font-size: 12.5px; margin: 0 0 5px; }
.bw.c36 .bw-body > .gd-guard:first-child { margin-top: 0; }
/* 두 쪽을 마주 놓는 칸 */
.c36-duo { display: flex; align-items: stretch; gap: 10px; margin: 12px 0 4px; }
.c36-side { flex: 1 1 0; min-width: 0; padding: 12px 12px 13px; border-radius: 10px; background: rgba(255,255,255,.035); }
.c36-side-k { display: block; font-size: 11.5px; letter-spacing: .04em; color: var(--wt-dim); margin-bottom: 5px; }
.c36-side-v { display: block; font-size: 14.5px; line-height: 1.6; color: #E6DAB8; word-break: keep-all; }
.c36-vs { flex: 0 0 1px; align-self: stretch; background: linear-gradient(rgba(232,196,106,0), rgba(232,196,106,.35), rgba(232,196,106,0)); }
/* 낱말 딱지 */
.c36-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 2px; }
.c36-chip { padding: 5px 11px; border-radius: 999px; font-size: 13px; color: #D9D5DB; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.c36-chip.gold { color: #E7CE94; background: rgba(232,196,106,.08); border-color: rgba(232,196,106,.28); }
/* 열쇠 세 칸(용신·희신·기신) */
.c36-keys { display: flex; gap: 8px; margin: 4px 0 2px; }
.c36-key { flex: 1 1 0; text-align: center; padding: 13px 6px 12px; border-radius: 11px; background: rgba(255,255,255,.035); border: 1px solid transparent; }
.c36-key.on { background: rgba(232,196,106,.1); border-color: rgba(232,196,106,.38); }
.c36-key.off { background: rgba(140,90,85,.12); border-color: rgba(140,90,85,.35); }
.c36-key-k { display: block; font-size: 11px; color: var(--wt-dim); margin-bottom: 6px; }
.c36-key-el { display: block; font-family: var(--font-serif); font-size: 26px; line-height: 1.1; color: #F3E6C4; }
.c36-key.on .c36-key-el { color: #F0D89B; }
.c36-key.off .c36-key-el { color: #C98C86; }
.c36-key-g { display: block; margin-top: 5px; font-size: 11.5px; color: rgba(240,231,214,.55); }
/* 신호 다섯 */
.c36-signs { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: c36; }
.c36-signs li { counter-increment: c36; position: relative; padding: 9px 0 9px 30px; font-size: 14px; line-height: 1.6; color: #D9D5DB; border-top: 1px solid rgba(255,255,255,.07); word-break: keep-all; }
.c36-signs li:first-child { border-top: 0; }
.c36-signs li::before { content: counter(c36); position: absolute; left: 0; top: 9px; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; line-height: 20px; text-align: center; color: var(--wt-gold); border: 1px solid rgba(232,196,106,.35); }
/* 귀인 글자 */
.c36-glyphs { display: flex; gap: 10px; margin: 4px 0 2px; }
.c36-glyph { flex: 1 1 0; text-align: center; padding: 14px 6px 12px; border-radius: 11px; background: rgba(232,196,106,.08); border: 1px solid rgba(232,196,106,.28);
  font-family: var(--font-serif); font-size: 30px; line-height: 1.1; color: #F0D89B; }
.c36-glyph em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: rgba(240,231,214,.62); }
/* 삼재 세 걸음 */
.c36-steps { display: flex; gap: 8px; margin: 4px 0 2px; }
.c36-step { flex: 1 1 0; text-align: center; padding: 12px 6px; border-radius: 11px; background: rgba(255,255,255,.035); }
.c36-step.on { background: rgba(232,196,106,.1); box-shadow: inset 0 0 0 1px rgba(232,196,106,.38); }
.c36-step-y { display: block; font-size: 15px; font-weight: 700; color: #F0E7D6; }
.c36-step-n { display: block; margin-top: 3px; font-size: 12px; color: var(--wt-gold); }
.c36-step-d { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: rgba(240,231,214,.55); word-break: keep-all; }
/* 표 왼쪽 라벨 (2026-09-18, JH «폰트 안 예쁘게 보이는 부분»)
   ⚠️ .cm-row 는 **격자(grid)** 라 첫 칸이 46px 로 고정돼 있다 — flex 값을 줘 봐야 안 먹는다.
      네 글자 라벨이 «버는 자 / 리» 처럼 낱말 가운데서 잘렸다. 칸을 넓히고 줄바꿈을 막는다. */
.bw.c36 .cm-row, .bw.gd .cm-row { grid-template-columns: 68px 1fr; }
.bw.c36 .cm-k, .bw.gd .cm-k { white-space: nowrap; }
.bw.c36 .cm-v, .bw.gd .cm-v { word-break: keep-all; }
/* 머리 그림을 새로 얹은 카드(1번 명식·9번 매력) — 다른 카드와 같은 비율 */
.bw.ms > .bw-photo, .bw.cm > .bw-photo { aspect-ratio: 16/9; }

/* 한글 줄바꿈 (2026-09-18, JH «폰트 안 예쁘게 보이는 부분»)
   ⚠️ CSS 기본값은 한글을 **아무 글자에서나** 끊는다 — 「…오는 자 / 리」 처럼 낱말이 갈라진다.
      keep-all 을 주면 띄어쓰기에서만 끊긴다. 카드의 제목·문구에 두루 건다. */
.bw-title, .bw-ask, .bw-rank, .bw-desc, .gd-lead, .gd-guard-v,
.c36-chip, .c36-side-v, .c36-key-g, .c36-step-d, .c36-signs li, .tg-ask { word-break: keep-all; }

/* 3번 「나를 닮은 하나」 — 큰 글자 + 열 글자 띠 (2026-09-18) */
.nt-hero { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px; }
.nt-glyph { font-family: var(--font-serif); font-size: 52px; line-height: 1; }
.nt-side { min-width: 0; }
.nt-thing { display: block; font-family: var(--font-serif); font-size: 22px; line-height: 1.3; color: #F3E6C4; word-break: keep-all; }
.nt-meta { display: block; margin-top: 4px; font-size: 12.5px; color: var(--wt-dim); }
.nt-intro { margin: 0 0 14px; font-size: 13.5px; line-height: 1.75; color: rgba(240,231,214,.78); word-break: keep-all; }
.nt-intro b { color: #E7CE94; }
.nt-line { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: #E6DAB8; word-break: keep-all; }
.nt-yin { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(240,231,214,.86); word-break: keep-all; }
.nt-yin b { color: #E7CE94; }
.nt-foot { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--wt-dim); word-break: keep-all; }
.nt-foot b { color: rgba(240,231,214,.8); }
.nt-lab { margin: 16px 0 8px; font-size: 11.5px; letter-spacing: .04em; color: var(--wt-dim); }
.nt-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.nt-one { padding: 8px 4px 7px; text-align: center; border-radius: 8px; background: rgba(255,255,255,.03); opacity: .45; }
.nt-one b { display: block; font-family: var(--font-serif); font-size: 17px; line-height: 1.1; color: #D9D5DB; }
.nt-one em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; line-height: 1.35; color: rgba(240,231,214,.6); word-break: keep-all; }
.nt-one.me { opacity: 1; background: rgba(232,196,106,.1); box-shadow: inset 0 0 0 1px rgba(232,196,106,.38); }
.nt-one.me b { color: #F0D89B; }
.nt-one.me em { color: #E6DAB8; }
.c36-key-m { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.4; color: rgba(240,231,214,.45); word-break: keep-all; }
.c36-key.on .c36-key-m { color: rgba(240,216,155,.75); }


/* ══════════════════════════════════════════════════════════════════════════
   새 판 틀 (2026-09-21) — 라이프사주의 머리띠·옆 메뉴·분야 탭·홈·하단바를 옮겨 심은 것
   ══════════════════════════════════════════════════════════════════════════
   · 모양(크기·여백·모서리·움직임)은 라이프사주 값 그대로, **색은 용신록**(크림 #F0D89B).
   · 새 부품은 이름이 전부 `ys-` 로 시작한다 — 위쪽의 옛 홈 규칙(#main-header · .side-menu ·
     #product-section …)과 부딪히지 않게. 옛 규칙은 갈아끼울 때 걷어낸다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 머리띠 ── */
.ys-header{ position:sticky; top:0; z-index:100; background:var(--color-bg);
  height:calc(var(--header-height) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
.ys-header[hidden]{ display:none; }
.ys-header-in{ display:flex; align-items:center; justify-content:space-between; height:var(--header-height); padding:0 var(--dg-space-5); }
.ys-logo{ display:flex; align-items:center; padding:12px 0; margin:-12px 0; cursor:pointer; }
.ys-logo img{ height:24px; width:auto; }
.ys-ham{ color:var(--color-text-primary); padding:0; min-width:44px; min-height:44px;
  display:flex !important; align-items:center; justify-content:center; margin:-9px -12px -9px 0; }
.ys-ham svg{ width:28px; height:28px; }

/* ── 옆 메뉴 — **창(브라우저) 오른쪽 끝**에서 밀려 나온다 (2026-09-21 JH: 라이프사주와 같게) ──
   처음에는 옛 용신록 메뉴처럼 448px 프레임 «안»에 가뒀는데, PC 에서 보면 프레임 한가운데서 튀어나와
   내용을 덮었다. 라이프사주는 창 끝에 붙고 어둠막도 창 전체를 덮는다 — 그대로 맞춘다. 폰에서는 둘이 같다. */
.ys-side-dim{ position:fixed; top:0; bottom:0; left:0; right:0;
  background:rgba(0,0,0,0.6); z-index:998; opacity:0; pointer-events:none; transition:opacity var(--transition-normal); }
.ys-side-dim.show{ opacity:1; pointer-events:auto; }
.ys-side{ position:fixed; top:0; right:0; width:320px; max-width:88vw; height:100vh; height:100dvh;
  background:var(--color-bg); z-index:999; display:flex; flex-direction:column;
  transform:translateX(100%); visibility:hidden;
  transition:transform var(--transition-normal), visibility 0s linear .3s; }
.ys-side.show{ transform:translateX(0); visibility:visible; box-shadow:-4px 0 20px rgba(0,0,0,0.4);
  transition:transform var(--transition-normal), visibility 0s; }
.ys-side-head{ display:flex; align-items:center; justify-content:flex-end; flex-shrink:0;
  height:calc(60px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--dg-space-5) 0; }
.ys-side-close{ color:var(--color-text-primary); min-width:44px; min-height:44px; margin:-8px;
  display:flex; align-items:center; justify-content:center; }
.ys-side-close svg{ width:24px; height:24px; }
.ys-side-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 var(--dg-space-5); }
.ys-side-card{ background:var(--ys-surface); border-radius:var(--dg-radius-sm); overflow:hidden; margin-bottom:var(--dg-space-6); }
.ys-side-user{ display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; }
.ys-side-av{ width:40px; height:40px; border-radius:50%; flex-shrink:0; background:var(--color-primary); color:var(--color-on-primary);
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
.ys-side-user-txt{ flex:1; min-width:0; }
.ys-side-user-title{ font-size:16px; line-height:1.3; font-weight:700; color:var(--color-text-primary); margin:0 0 3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ys-side-user-sub{ font-size:12px; line-height:1.4; color:var(--color-text-light); margin:0; }
.ys-side-chev{ width:20px; height:20px; color:var(--color-text-light); flex-shrink:0; }
.ys-side-line{ height:1px; background:var(--color-border); margin:0 20px; }
.ys-side-links{ display:flex; flex-direction:column; gap:12px; padding:16px 0; }
.ys-side-links button{ width:100%; padding:8px 20px; margin:-8px 0; text-align:left;
  font-size:16px; line-height:1.45; font-weight:600; color:var(--color-text-primary); }
.ys-acc-h{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:0 4px;
  font-size:20px; line-height:1.3; font-weight:700; color:var(--color-text-primary); text-align:left; }
.ys-acc-h svg{ width:24px; height:24px; color:var(--color-text-light); transition:transform .25s ease; }
.ys-acc-item.open .ys-acc-h svg{ transform:rotate(180deg); }
.ys-acc-body{ list-style:none; margin:0; padding:0 4px; display:none; flex-direction:column; gap:12px; }
.ys-acc-item.open .ys-acc-body{ display:flex; padding:12px 4px; }
.ys-acc-body li{ padding:8px 0; margin:-4px 0; font-size:14px; line-height:1.45; color:var(--color-text-secondary); cursor:pointer; }
.ys-acc-body li:active{ color:var(--color-text-primary); }
.ys-side-foot{ flex-shrink:0; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); }
.ys-side-mail{ display:flex; align-items:center; justify-content:center; width:100%; height:48px; margin-bottom:12px;
  border-radius:var(--dg-radius-md); background:var(--ys-fill); border:1px solid var(--color-border);
  font-size:14px; font-weight:700; color:var(--color-text-primary); }
.ys-side-hours{ font-size:12px; line-height:1.4; color:var(--color-text-light); text-align:center; }

/* ── 분야 탭 — 머리띠 바로 아래에 붙는다 ── */
#page-main .ys-cat{ position:sticky; top:calc(var(--header-height) + env(safe-area-inset-top)); z-index:90;
  height:44px; padding:0 12px; margin:0 0 var(--dg-space-4); background:var(--color-bg); border-bottom:1px solid var(--color-border); }
#page-main .ys-cat-in{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:stretch; height:100%;
  padding:0; margin:0; gap:0; overflow:visible; }
#page-main .ys-cat .pchip{ position:relative; justify-self:center; height:100%; padding:0; margin:0;
  background:none; border:0; border-radius:0; box-shadow:none;
  font-size:15px; font-weight:var(--fw-regular); color:var(--color-text-secondary); }
#page-main .ys-cat .pchip.active{ background:none; color:var(--color-primary); font-weight:var(--fw-bold); }
#page-main .ys-cat .pchip.active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--color-primary); border-radius:2px; }

/* ── 홈 ── */
#page-main.active{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
#page-main.active > .ys-home{ flex:1 0 auto; padding-bottom:var(--dg-space-16); }
.ys-divider{ height:1px; background:var(--color-border); margin:var(--dg-space-10) 0; }
.ys-divider[hidden]{ display:none; }
.ys-block[hidden]{ display:none; }
.ys-sec-h{ margin:0 0 var(--dg-space-4); padding:0 var(--dg-space-5);
  font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:var(--fw-bold); line-height:1.35; color:var(--color-text-primary); }

/* 프레임 양옆 테두리 선을 없앤다 — 라이프사주는 프레임 밖과 안이 이어져 보인다 */
@media (min-width:481px){ #app-container{ border-left:0; border-right:0; } }
#app-container{ box-shadow:none; }

/* 대표 상품 캐러셀 — 카드 폭 = 화면 폭 − 2 × (엿보임 24 + 간격 12). 이 두 값만 고치면 카드 크기가 바뀐다.
   브라우저 가로 스크롤이 아니라 트랙을 통째로 민다(script.js 의 initCarousel). */
#page-main{ --mp-peek:24px; --mp-card-gap:12px; }
#page-main #main-carousel.ys-hero{
  --mp-card-w:calc(min(100%, var(--max-width)) - 2 * (var(--mp-peek) + var(--mp-card-gap)));
  margin:0; padding:var(--dg-space-2) 0 0; background:transparent;
  overflow:hidden; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; }
#page-main #main-carousel.ys-hero:active{ cursor:grabbing; }
#page-main .ys-hero .carousel-track{ display:flex; gap:var(--mp-card-gap); align-items:center; padding:0;
  overflow:visible; scroll-snap-type:none; will-change:transform; }
#page-main .ys-hero .carousel-slide{ flex:0 0 var(--mp-card-w); scroll-snap-align:none; }
/* 그림은 손가락을 받지 않는다 — 누른 채 밀면 폰이 «그림 끌어 옮기기»로 알아듣고 손가락을 가로챈다 */
#page-main .ys-hero img{ pointer-events:none; -webkit-user-drag:none; -webkit-touch-callout:none; }
#page-main .ys-dots[hidden]{ display:none; }

/* ── 분야를 «고른» 홈 — 그 분야 목록만 남긴다 ── */
#ys-cat-list{ display:none; padding:0 var(--dg-space-5); }
#page-main.cat-filtered #ys-cat-list{ display:block; }
#page-main.cat-filtered .ys-hero,
#page-main.cat-filtered .ys-dots,
#page-main.cat-filtered .ys-divider,
#page-main.cat-filtered .ys-block:not(#ys-products),
#page-main.cat-filtered #ys-products .ys-sec-h,
#page-main.cat-filtered #ys-products .ys-hscroll{ display:none; }
/* ⚠️ 캐러셀은 initTabs() 가 style="display:block" 을 직접 박아 둬서 !important 가 있어야 숨는다 */
#page-main.cat-filtered #main-carousel{ display:none !important; }
#page-main.cat-filtered #ys-products{ padding-top:var(--dg-space-2); }
.ys-tg{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:28px; }
.ys-tg-card{ cursor:pointer; transition:transform var(--transition-fast); }
.ys-tg-card:active{ transform:scale(0.97); }
.ys-tg-thumb{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:var(--dg-radius-md);
  border:1px solid var(--color-border); background:var(--ys-fill); }
.ys-tg-thumb img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.ys-tg-cap{ position:absolute; left:0; right:0; bottom:0; padding:28px 16px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0)); }
.ys-tg-cap span{ display:block; font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-size:12px; letter-spacing:.05em; color:#E7CE94; }
.ys-tg-cap b{ display:block; font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400; font-size:26px; line-height:1.2; color:#fff; }
.ys-tg-row{ display:flex; gap:12px; margin-top:12px; }
.ys-tg-ava{ flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--ys-fill); }
.ys-tg-ava img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; transform:scale(1.9); transform-origin:50% 24%; display:block; }
.ys-tg-txt{ min-width:0; }
.ys-tg-name{ margin:1px 0 0; font-size:16px; font-weight:700; line-height:1.35; color:var(--color-text-primary); }
.ys-tg-name em{ font-style:normal; font-size:14px; font-weight:700; color:var(--color-primary); margin-left:4px; }
.ys-tg-desc{ margin:4px 0 0; font-size:13px; line-height:1.45; color:var(--color-text-secondary); }
#page-main .ys-hero .slide-image-wrapper{ aspect-ratio:4 / 5; border-radius:var(--dg-radius-lg); }
#page-main .ys-dots{ padding:0; margin-top:var(--dg-space-6); background:transparent; }

/* 가로로 미는 세로 카드 */
.ys-hscroll{ width:100%; overflow-x:auto; padding:0 var(--dg-space-5); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ys-hscroll::-webkit-scrollbar{ display:none; }
.ys-hscroll-in{ list-style:none; margin:0; padding:0; display:flex; gap:12px; }
.ys-hscroll-in::after{ content:''; flex:none; width:8px; height:1px; }
.ys-card{ flex:0 0 44%; min-width:0; cursor:pointer; transition:transform var(--transition-fast); }
.ys-card:active{ transform:scale(0.97); }
.ys-card-img{ aspect-ratio:295 / 370; width:100%; overflow:hidden; border:1px solid var(--color-border);
  border-radius:var(--dg-radius-sm); background:var(--ys-fill); }
.ys-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ys-card-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.ys-card-ph img{ width:56%; height:auto; opacity:.35; filter:brightness(0) invert(1); object-fit:contain; }
.ys-card-txt{ margin-top:12px; padding:0 4px; display:grid; gap:4px; }
.ys-card-name{ font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--color-text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ys-card-desc{ font-size:var(--fs-body-small); font-weight:var(--fw-medium); color:var(--color-text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ys-card-price{ font-size:var(--fs-body-small); font-weight:var(--fw-bold); color:var(--color-primary); }

/* 후기 — 상품 그림이 바탕으로 깔린 가로 카드 */
.ys-rv-scroll{ width:100%; overflow-x:auto; padding-left:var(--dg-space-5); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ys-rv-scroll::-webkit-scrollbar{ display:none; }
.ys-rv-in{ list-style:none; margin:0; padding:0; display:flex; gap:var(--dg-space-3); }
.ys-rv-in::after{ content:''; flex:none; width:var(--dg-space-5); height:1px; }
.ys-rv-card{ position:relative; flex:none; width:256px; min-height:186px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--dg-space-2);
  padding:0 var(--dg-space-4) var(--dg-space-3); border-radius:var(--dg-radius-sm);
  background-color:var(--ys-surface); background-image:var(--rv-bg); background-size:cover; background-position:center; }
.ys-rv-card::before{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,6,4,.94) 36%, rgba(10,6,4,.58) 64%, rgba(10,6,4,.12) 100%); }
.ys-rv-card > *{ position:relative; }
.ys-rv-top{ display:flex; align-items:center; justify-content:space-between; }
.ys-rv-stars{ font-size:14px; letter-spacing:1px; color:var(--color-star); }
.ys-rv-when{ font-size:12px; color:var(--color-text-secondary); }
.ys-rv-who{ display:flex; align-items:center; gap:var(--dg-space-1); font-size:12px; color:var(--color-text-primary); min-width:0; }
.ys-rv-who span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ys-rv-who i{ flex:none; width:1px; height:10px; background:var(--color-text-secondary); margin:0 2px; }
.ys-rv-text{ margin:0; min-height:64px; font-size:12px; line-height:1.5; color:#EDEDED;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* 무료로 해 볼 것 두 가지 */
.ys-free-grid{ list-style:none; margin:0; padding:0 var(--dg-space-5); display:grid; grid-template-columns:1fr 1fr; gap:var(--dg-space-3); }
.ys-free-card{ padding:16px 14px 18px; border-radius:var(--dg-radius-md); background:var(--ys-surface); cursor:pointer;
  transition:background var(--transition-fast); }
.ys-free-card:active{ background:var(--ys-fill); }
.ys-free-card b{ display:block; font-size:15px; font-weight:var(--fw-bold); color:var(--color-text-primary); }
.ys-free-card > span:last-child{ display:block; margin-top:5px; font-size:12px; line-height:1.5; color:var(--color-text-secondary); }
.ys-free-ic{ display:block; width:52px; height:52px; margin-bottom:12px; }
.ys-free-gan{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:4px; }
.ys-free-gan i{ display:flex; align-items:center; justify-content:center; font-style:normal; border-radius:6px;
  background:var(--ys-fill); font-size:11px; font-weight:var(--fw-bold); color:var(--color-text-secondary); }
.ys-free-gan i.on{ background:rgba(240,216,155,.16); color:var(--color-primary); }
.ys-free-day{ display:flex; align-items:center; justify-content:center; border-radius:50%; border:2px dashed var(--color-dot-inactive); }
.ys-free-day i{ font-style:normal; font-size:18px; font-weight:var(--fw-bold); color:var(--color-primary); }

/* ── 하단바 — 떠 있는 «유리 알약» ──
   유리로 보이게 하는 넷: ① 얇은 흰빛 ② 뒤를 세게 흐림 ③ 테두리 ④ 윗면의 빛 걸린 선.
   🚨 바깥 그림자를 넣지 않는다 — 사파리가 붙박이 요소를 주소창 위에서 잘라 «가로선»이 생긴다(라이프사주에서 겪은 것). */
.ys-fnav[hidden]{ display:none; }
.ys-fnav{ position:fixed; left:50%; transform:translateX(-50%); z-index:200; opacity:1;
  bottom:calc(var(--fnav-gap) + env(safe-area-inset-bottom));
  width:min(calc(var(--max-width) - 32px), calc(100% - 32px));
  display:flex; align-items:center; gap:4px; padding:7px; border-radius:var(--dg-radius-full);
  background:rgba(255,255,255,0.09);
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.22); }
.ys-fnav::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 42%); }
.ys-fnav-item{ position:relative; z-index:1; flex:1; height:44px; padding:0; border-radius:var(--dg-radius-full);
  display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent;
  color:rgba(255,255,255,0.62); font-size:13px; font-weight:var(--fw-semibold); white-space:nowrap;
  transition:background var(--transition-fast), color var(--transition-fast), flex-grow .28s cubic-bezier(.25,.46,.45,.94); }
.ys-fnav-item svg{ width:20px; height:20px; display:block; flex:0 0 auto; }
/* 이름표는 폭과 투명도로 여닫는다 — display 로 껐다 켜면 «툭» 나타난다 */
.ys-fnav-item span{ display:inline-block; max-width:0; opacity:0; overflow:hidden; margin-left:-7px;
  transition:max-width .28s cubic-bezier(.25,.46,.45,.94), opacity .2s ease, margin-left .28s cubic-bezier(.25,.46,.45,.94); }
.ys-fnav-item.active{ flex-grow:1.9; color:#FFFFFF; background:rgba(255,255,255,0.14);
  backdrop-filter:blur(6px) saturate(180%); -webkit-backdrop-filter:blur(6px) saturate(180%);
  border-color:rgba(255,255,255,0.20); box-shadow:inset 0 1px 0 rgba(255,255,255,0.30); }
.ys-fnav-item.active span{ max-width:7em; opacity:1; margin-left:0; }

/* 하단바가 있는 화면은 맨 아래 내용이 바에 가리지 않게 자리를 비운다 */
/* ── 푸터 — 라이프사주 값 그대로(옅은 면 · 12px · 가장 흐린 글씨 · 아래는 하단바만큼 비움). 내용만 용신록 ── */
.ys-foot{ display:block; padding:32px var(--dg-space-5) var(--fnav-space); margin-top:0; background:var(--dg-surface-soft); border-top:0; letter-spacing:-0.02em; }
.ys-foot-logo{ margin-bottom:16px; }
.ys-foot-logo img{ height:30px; width:auto; }
.ys-foot-info{ margin-bottom:24px; }
.ys-foot-info p{ margin:0; font-size:12px; line-height:1.8; color:var(--dg-text-faint); word-break:keep-all; }
.ys-foot-info strong{ font-weight:var(--fw-semibold); color:var(--dg-text-faint); }
.ys-foot-info a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ys-foot-links{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-bottom:16px; }
.ys-foot-links a{ display:inline-block; padding:12px 4px; margin:-12px -6px; font-size:12px; font-weight:var(--fw-semibold); color:var(--dg-text-faint); transition:color var(--transition-fast); }
.ys-foot-links a:hover{ color:var(--color-text-primary); }
.ys-foot-copy{ margin:0; font-size:12px; line-height:1.6; color:var(--dg-text-faint); }
body.has-fnav #page-mypage .page-body,
body.has-fnav #page-storage .page-body{ padding-bottom:var(--fnav-space); }
#page-storage > .sub-header{ display:none; }

/* ── 내 정보 (라이프사주 모양) ── */
#page-mypage .page-body{ padding:24px var(--dg-space-5) var(--fnav-space); margin:0; }
.ys-page-title{ margin:0 0 24px; padding:0 var(--dg-space-1); font-family:var(--font-sans); font-size:20px; font-weight:var(--fw-bold); color:var(--color-text-primary); }
#page-mypage .ys-profile{ display:flex; align-items:center; gap:12px; margin:0; padding:0 var(--dg-space-1); background:none; border:0; border-radius:0; box-shadow:none; color:inherit; }
#page-mypage .ys-profile .profile-avatar{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--color-primary); color:var(--color-on-primary);
  display:flex; align-items:center; justify-content:center; margin:0; }
#page-mypage .ys-profile .profile-info{ flex:1; min-width:0; text-align:left; }
#page-mypage .ys-profile .profile-name{ margin:0; font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--color-text-primary); }
#page-mypage .ys-profile .profile-email{ margin:4px 0 0; font-size:var(--fs-micro); color:var(--color-text-secondary); }
.ys-profile-btn{ margin-left:auto; flex-shrink:0; height:40px; padding:0 var(--dg-space-3); border-radius:var(--dg-radius-sm);
  background:var(--ys-surface); border:1px solid var(--color-border); font-size:13px; font-weight:var(--fw-semibold); color:var(--color-text-primary); }
.ys-profile-btn:active{ background:var(--ys-fill); }
.ys-quick{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:24px; }
.ys-quick-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:80px; padding:16px 0;
  border-radius:var(--dg-radius-sm); background:var(--ys-fill); color:var(--color-text-primary); font-size:14px; font-weight:var(--fw-semibold); }
.ys-quick-item svg{ display:block; width:20px; height:20px; }
.ys-quick-item b{ font-weight:var(--fw-bold); color:var(--color-primary); }
.ys-quick-item:active{ background:var(--color-border); }
#page-mypage .ys-menu{ list-style:none; margin:var(--dg-space-6) 0 0; padding:0; background:none; border:0; border-radius:0; }
#page-mypage .ys-menu li{ display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:16px var(--dg-space-1);
  border:0; border-bottom:1px solid var(--ys-fill); background:none; cursor:pointer; font-size:14px; font-weight:500; color:var(--color-text-primary); }
#page-mypage .ys-menu li:last-child{ border-bottom:0; }
#page-mypage .ys-menu li[hidden]{ display:none; }
#page-mypage .ys-menu .arrow{ display:flex; color:var(--color-text-light); }
#page-mypage .ys-menu .arrow svg{ width:20px; height:20px; }
#page-mypage .ys-menu .logout-item{ color:var(--color-text-light); }
#page-mypage .ys-menu .withdraw-item{ justify-content:flex-start; min-height:44px; font-size:12px; color:var(--color-text-light); }

/* 아직 만드는 중인 화면 */
.ys-soon{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--dg-space-2);
  padding:0 var(--dg-space-5) var(--fnav-space); text-align:center; }
.ys-soon-h{ font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--color-text-primary); }
.ys-soon-p{ font-size:var(--fs-body-small); line-height:1.6; color:var(--color-text-secondary); }

@media (prefers-reduced-motion: reduce){
  .ys-fnav-item, .ys-fnav-item span, .ys-side, .ys-side-dim, .ys-card{ transition:none; }
}
@media print{ .ys-header, .ys-side, .ys-side-dim, .ys-fnav{ display:none !important; } }


/* ══════════════════════════════════════════════════════════════════════════
   내 만세력 · 오늘의 운세 · 생년월일 시트 (2026-09-21) — 라이프사주 styles.css 에서 **그대로** 옮긴 규칙
   ══════════════════════════════════════════════════════════════════════════
   색은 위 :root 의 --dg-* 이음매를 거쳐 용신록 색으로 나온다(강조색 = 크림). 값을 고칠 일이 있으면
   라이프사주 쪽과 같이 고친다. */
.coupon-picker-overlay, .sheet-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:200; display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .2s ease; }
.sheet-overlay{ z-index:300; }
.sheet-overlay[hidden]{ display:none; }
.coupon-picker-sheet, .sheet{ width:100%; max-width:var(--max-width); background: var(--dg-surface); border-radius:20px 20px 0 0; padding:20px 20px calc(24px + env(safe-area-inset-bottom)); max-height:88vh; display:flex; flex-direction:column; animation:sheetUp .25s ease; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.sheet-head span{ font-size:var(--fs-card-title); font-weight:var(--fw-extrabold); color:var(--dg-text-primary); }
.sheet-close{ padding:4px; width:32px; background:none; border:0; color:var(--dg-text-faint); cursor:pointer; }
.sheet-body{ overflow-y:auto; }
.sheet #si-save{ margin-top:8px; }
@keyframes sheetUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
#page-storage .mp-topheader{ box-shadow: none; }
#page-storage .mp-cat-chips{ position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top)); z-index: 90; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 0; height: 44px; padding: 0 20px; overflow: visible; background: var(--color-bg);
  
  border-bottom: 1px solid var(--dg-divider);
   }
#page-storage .mp-cat-chip{ justify-self: center; background: none; border-radius: 0; gap: 0; padding: 0; font-size: 16px; font-weight: var(--fw-regular); color: var(--dg-text-secondary); position: relative; }
#page-storage .mp-cat-chip:active{ background: none; }
#page-storage .mp-cat-chip-ico{ display: none; }
#page-storage .mp-cat-chip.active{ background: none; color: var(--dg-text-primary); font-weight: 600; }
#page-storage .mp-cat-chip.active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dg-text-primary); border-radius: 2px; }
.saju-foot{ margin-top: 12px; font-size: 12.5px; line-height: 1.75;
            color: var(--dg-text-secondary); text-align: center; }
.saju-cta button.ghost{ background: none; border: 1px solid var(--dg-line-2); color: var(--dg-text-body);
                        height: 44px; font-size: 13.5px; }
.fld{ margin-top: 18px; }
.fld:first-of-type{ margin-top: 0; }
.fld > label{ display: block; font-size: 14px; font-weight: var(--fw-semibold); margin-bottom: 6px; }
.d-row{ display: flex; align-items: center; gap: 10px; padding: 12px 2px;
        border-bottom: 1px solid var(--dg-divider); }
.d-row[hidden]{ display: none !important; }
.d-row input{ flex: 1; min-width: 0; border: 0; background: none; color: var(--dg-text-primary);
              font-family: inherit; font-size: 24px; font-weight: var(--fw-bold); outline: none; padding: 0; }
.d-row input::placeholder{ color: #3E3E3E; font-weight: var(--fw-semibold); }
.d-row input:disabled{ opacity: .35; }
.d-pills{ display: flex; gap: 6px; flex: none; }
.d-pill{ height: 34px; padding: 0 15px; border-radius: var(--dg-radius-full);
         border: 1.5px solid transparent; background: #2B2B2B; color: #9A9A9A;
         font-family: inherit; font-size: 13.5px; font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap; }
.d-pill.on{ background: none; border-color: var(--dg-accent); color: var(--dg-accent); }
.d-row.d-sub{ padding: 12px 2px 2px; border-bottom: 0; }
.d-chk{ display: flex; align-items: center; gap: 8px; flex: none; cursor: pointer; user-select: none;
        font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--dg-text-body); }
.d-chk input{ position: absolute; opacity: 0; width: 0; height: 0; }
.d-chk i{ width: 22px; height: 22px; flex: none; border-radius: 7px; border: 1.5px solid var(--dg-line-2);
          display: flex; align-items: center; justify-content: center; color: #fff;
          transition: background var(--transition-fast), border-color var(--transition-fast); }
.d-chk i svg{ width: 14px; height: 14px; opacity: 0; transition: opacity var(--transition-fast); }
.d-chk input:checked + i{ background: var(--dg-accent); border-color: var(--dg-accent); }
.d-chk input:checked + i svg{ opacity: 1; }
.d-chk input:checked ~ span{ color: var(--dg-accent); }
.sheet .si-g{ border-width: 1.5px; }
.si-gender{ display: flex; gap: 9px; }
.si-g{ flex: 1; height: 52px; border-radius: var(--dg-radius-md);
       border: 1px solid var(--color-border); background: var(--dg-surface);
       color: var(--dg-text-secondary); font-size: 15px; font-weight: var(--fw-semibold);
       font-family: inherit; letter-spacing: inherit; cursor: pointer;
       transition: border var(--transition-fast), color var(--transition-fast); }
.si-g.on{ border-color: var(--dg-accent); color: var(--dg-accent); }
.today-skel{ --d1:#202020; --d2:#171717; }
#page-today .today-skel{ --tday-top:calc(var(--header-height) + env(safe-area-inset-top));
  margin:calc(-24px - var(--tday-top)) -20px 0;
  
  display:flex; flex-direction:column; min-height:100dvh; }
#page-today .tday-panel{ flex:1 0 auto; }
#page-today .mp-topheader{ background:transparent; box-shadow:none; }
#page-today .mp-topheader::before{ content:''; position:absolute; inset:0; z-index:-1;
  pointer-events:none; opacity:var(--sc, 0);
  background:linear-gradient(to bottom,
    rgba(15,15,15,.92) 0%, rgba(15,15,15,.76) 58%, rgba(15,15,15,0) 100%); }
#page-today .tday-tint{ padding-top:var(--tday-top); }
#page-today .tday-tint{ padding-bottom:24px; }   /* (용신록, 2026-09-21 JH) 오각형 아래 글자와 분야 탭 사이를 띄운다 */
.tday-tint{ position:relative; }
.tday-tint > *{ position:relative; z-index:1; }
.tday-tint::before{ content:''; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(15,15,15,0) 30%, rgba(15,15,15,.72) 68%, var(--color-bg) 92%),
    linear-gradient(160deg, var(--d1), var(--d2));
  
  background-repeat:no-repeat;
  background-size:100% calc(100% - var(--tday-top, 0px)), 100% 100%;
  background-position:bottom, top; }
.tday-tint::after{ content:''; position:absolute; left:0; right:0; top:0; height:210px; z-index:0;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.11), transparent 64%); }
.tday-hd{ text-align:center; padding:24px 20px 20px; }
.tday-date{ margin:0; font-size:11.5px; font-weight:var(--fw-semibold);
            letter-spacing:.16em; color:rgba(255,255,255,.6); }
.tday-title{ margin:8px 0 0; font-family:'Nanum Brush Script',cursive;
             font-size:31px; font-weight:400; line-height:1.25; color:#fff; }
.tday-score{ margin-top:16px; display:flex; align-items:baseline; justify-content:center; gap:5px; }
.tday-score b{ font-size:62px; font-weight:var(--fw-extrabold); line-height:1; letter-spacing:-.04em;
               color:rgba(255,255,255,.45); }
.tday-score b.on{ color:#F3DC9B; }
.tday-score span{ font-size:22px; font-weight:var(--fw-bold); color:rgba(255,255,255,.72); }
.tday-ilj{ margin-top:16px; display:inline-flex; align-items:baseline; gap:8px;
           padding:5px 13px 7px; border-radius:var(--dg-radius-full);
           background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.16); }
.tday-ilj b{ font-family:'Nanum Myeongjo',serif; font-size:16px; font-weight:800; letter-spacing:.06em; }
.tday-ilj span{ font-size:10.5px; color:rgba(255,255,255,.62); }
.tday-sub{ margin:12px 0 0; font-size:12px; color:rgba(255,255,255,.6); }
.tday-pent{ padding:8px 0 12px; display:flex; justify-content:center; }
.tday-pent svg{ width:238px; height:224px; }
#page-today .saju-cta{ margin:16px 0 0; padding:0 16px var(--fnav-space); }
#page-today .saju-cta:has(.tday-strip){
  position:sticky; bottom:0; z-index:80; padding-top:26px;
  background:linear-gradient(to bottom, rgba(15,15,15,0) 0%, var(--color-bg) 34%); }
#page-today .tday-strip{ display:flex; align-items:center; gap:12px;
  padding:8px 8px 8px 16px; border-radius:16px;
  background:var(--dg-surface); border:1px solid var(--dg-divider); }
#page-today .tday-strip p{ flex:1; margin:0; font-size:12.5px; line-height:1.5;
  color:var(--dg-text-body); word-break:keep-all; }
#page-today .tday-strip button{ display:inline-flex; align-items:center; flex:0 0 auto;
  width:auto; height:32px; padding:0 15px; border-radius:var(--dg-radius-full);
  background:var(--dg-accent); color:#fff; font-size:13px; font-weight:var(--fw-bold);
  border:0; font-family:var(--font-sans); cursor:pointer; white-space:nowrap; }
.tday-tabs{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:stretch;
  height:44px; padding:0 16px; border-bottom:1px solid var(--dg-divider); }
.tday-tabs button{ position:relative; padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-regular);
  color:var(--dg-text-secondary); }
.tday-tabs button.on{ color:var(--dg-text-primary); font-weight:600; }
.tday-tabs button.on::after{ content:''; position:absolute; left:6px; right:6px; bottom:0;
  height:2px; background:var(--dg-text-primary); }
.tday-panel{ padding:16px 20px 0; }
.tday-panel h4{ margin:0 0 9px; font-size:15px; font-weight:var(--fw-bold); color:var(--dg-text-primary); }
.tday-panel p{ margin:0; font-size:13.5px; line-height:1.85; color:var(--dg-text-body); }
.tday-panel p + p{ margin-top:11px; }
.tday-panel .soon{ color:var(--dg-text-secondary); }
.tday-fld{ display:flex; align-items:flex-end; gap:8px; margin-bottom:12px; }
.tday-fld b{ font-size:38px; font-weight:var(--fw-extrabold); line-height:.95;
  letter-spacing:-.03em; color:#F3DC9B; }
.tday-fld b.off{ color:rgba(255,255,255,.28); }
.tday-fld i{ font-style:normal; font-size:15px; font-weight:var(--fw-bold);
  color:rgba(255,255,255,.7); margin-bottom:3px; }
.tday-fld u{ text-decoration:none; margin-left:auto; margin-bottom:5px;
  font-size:11.5px; color:var(--dg-text-secondary); }
.tday-bar{ height:6px; border-radius:4px; background:#242424; overflow:hidden; margin-bottom:15px; }
.tday-bar i{ display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#C9AE62,#F0D89B); }
.tday-hilo{ display:flex; gap:8px; margin-bottom:13px; }
.tday-hilo div{ flex:1; padding:12px; border-radius:var(--dg-radius-md);
  background:var(--dg-surface); border:1px solid var(--dg-divider); }
.tday-hilo em{ font-style:normal; display:block; font-size:10.5px; color:var(--dg-text-secondary);
  margin-bottom:4px; }
.tday-hilo b{ font-size:14px; font-weight:var(--fw-bold); color:var(--dg-text-primary); }
.tday-hilo b span{ font-weight:var(--fw-regular); color:var(--dg-text-secondary); margin-left:4px; }
.tday-gyul{ margin:0 0 14px; font-size:19px; font-weight:var(--fw-bold); line-height:1.4;
  letter-spacing:-.02em; color:var(--dg-text-primary); }
.tday-gyul.sm{ font-size:17px; margin-bottom:12px; }
/* (용신록, 2026-09-21 JH) 총평의 제목 줄(«오늘은 戊戌 — 무난한 날»)을 분야 탭의 제목(«무난한 날»)과 **같은 크기**로.
   ⚠️ 위 `.tday-panel p`(13.5px)가 `.tday-gyul` 보다 세서, 총평 제목만 본문 크기로 나오고 있었다. */
.tday-panel .tday-gyul{ font-size:17px; line-height:1.4; margin-bottom:12px; }
.tday-hanja{ font-family:'Nanum Myeongjo',serif; font-weight:800; letter-spacing:.04em; color:#F3DC9B; }
.tday-read p{ margin:0; font-size:13.5px; line-height:1.85; color:var(--dg-text-body); }
.tday-read p + p{ margin-top:11px; }
.tday-read + .tday-read{ margin-top:11px; }   /* (용신록) 풀이 글 뒤에 붙는 «오늘 도움 되는 것» 한 줄 */
.tday-read b{ color:var(--dg-text-primary); font-weight:var(--fw-bold); }
.tday-week{ margin-bottom:14px; padding:13px 15px 11px; border-radius:var(--dg-radius-md);
  background:var(--dg-surface); border:1px solid var(--dg-divider); }
.tday-week > em{ font-style:normal; display:block; font-size:10.5px;
  color:var(--dg-text-secondary); margin-bottom:10px; }
.tday-wrow{ display:flex; align-items:flex-end; gap:6px; height:52px; }
.tday-wrow > div{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.tday-wrow i{ display:block; width:100%; border-radius:4px; background:#333; }
.tday-wrow > div.on i{ background:linear-gradient(180deg,#C9AE62,#F0D89B); }
.tday-wlab{ display:flex; gap:6px; margin-top:7px; }
.tday-wlab > div{ flex:1; text-align:center; font-size:10px; color:var(--dg-text-secondary); }
.tday-wlab > div.on{ color:var(--dg-text-primary); font-weight:var(--fw-bold); }
.tday-help{ margin-bottom:14px; padding:13px 15px; border-radius:var(--dg-radius-md);
  background:var(--dg-surface); border:1px solid var(--dg-divider); }
.tday-help > em{ font-style:normal; display:block; font-size:10.5px;
  color:var(--dg-text-secondary); margin-bottom:10px; }
.tday-help-row{ display:flex; gap:8px; }
.tday-help-row > div{ flex:1; padding:10px 8px; border-radius:var(--dg-radius-sm);
  background:var(--dg-fill); text-align:center; }
.tday-help-row em{ font-style:normal; display:block; font-size:10px;
  color:var(--dg-text-secondary); margin-bottom:4px; }
.tday-help-row b{ font-size:13px; font-weight:var(--fw-bold); color:var(--dg-text-primary); }
.tday-lock{ position:relative; }
.tday-lock-back{ filter:blur(3px); opacity:.42; user-select:none; pointer-events:none; }
.tday-skel{ display:flex; flex-direction:column; gap:12px; padding:3px 0; }
.tday-skel i{ display:block; height:13px; border-radius:5px; background:#2E2E2E; }
.tday-skel i.t{ height:16px; width:46%; background:#3A3A3A; margin-bottom:2px; }
.tday-skel i.gap{ height:6px; background:none; }
.tday-lock-over{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:0 20px; }
.tday-lock-ico{ width:40px; height:40px; border-radius:50%; display:flex;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.17); }
.tday-lock-ico svg{ width:18px; height:18px; stroke:rgba(255,255,255,.78); fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tday-lock-msg{ font-size:14px; font-weight:var(--fw-bold); color:var(--dg-text-primary); }
.tday-lock-sub{ font-size:11.5px; color:var(--dg-text-secondary); }
.saju-skel{ margin-bottom: 26px; }
.sj-pane[hidden]{ display: none !important; }
#page-storage .saju-tabs .sjtab{ justify-self: stretch; justify-content: center; }
.skel-card{ margin-top: 12px; background: var(--dg-surface); border: 1px solid var(--dg-divider);
            border-radius: var(--dg-radius-md); padding: 16px; }
.skel-card:first-child{ margin-top: 0; }
.skel-h{ display: flex; align-items: center; justify-content: space-between;
         font-size: 14px; font-weight: var(--fw-bold); color: var(--dg-text-secondary); }
.skel-h em{ font-style: normal; font-size: 11px; font-weight: var(--fw-medium); color: var(--dg-text-faint); }
.skel-mans{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 11px; }
.skel-mans .hd{ font-size: 10px; color: var(--dg-text-faint); text-align: center; font-weight: var(--fw-medium); }
.skel-mans .g{ aspect-ratio: 1; border-radius: var(--dg-radius-sm); background: var(--dg-fill);
               border: 1px solid #262626; font-size: 21px; font-weight: var(--fw-semibold);
               display: flex; align-items: center; justify-content: center; }
.skel-mans .g.empty{ background: #161616; border-style: dashed; border-color: #2C2C2C;
                     color: #3A3A3A; font-size: 19px; }
.skel-wu{ display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.skel-wu svg{ width: 152px; height: 144px; flex: 0 0 auto; }
.skel-bars{ flex: 1; display: flex; flex-direction: column; gap: 7px; }
.skel-bars div{ display: flex; align-items: center; gap: 7px; }
.skel-bars b{ width: 14px; font-size: 11px; font-weight: var(--fw-bold); color: #4A4A4A; }
.skel-bars span{ flex: 1; height: 5px; border-radius: 3px; background: #242424; overflow: hidden; }
.skel-bars i{ display: block; width: 14%; height: 100%; border-radius: 3px; background: #333; }
.skel-flow{ display: flex; gap: 3px; margin-top: 11px; }
.skel-flow div{ flex: 1; height: 30px; border-radius: 5px; background: #1E1E1E; }
.skel-flow-ticks{ display: flex; gap: 3px; margin-top: 5px; }
.skel-flow-ticks div{ flex: 1; text-align: center; font-size: 9px; color: var(--dg-text-faint); }
.sj-sep{ margin: 16px -16px; border-top: 1px solid var(--dg-fill); }
.sj-me{ display: flex; align-items: center; gap: 12px; }
.sj-me-txt{ min-width: 0; }
.sj-me .saju-cta{ margin-top: 0; margin-left: auto; flex: none; }
.sj-me .saju-cta button, .sj-me .saju-cta button.ghost{
  width: auto; height: 34px; padding: 0 15px; font-size: 12.5px; white-space: nowrap; }
.sj-me .saju-cta button.icon{ width: 34px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; }
.sj-me .saju-cta button.icon svg{ display: block; width: 17px; height: 17px; }
.sj-me-han{ width: 52px; height: 52px; flex: none; border-radius: 13px; background: var(--dg-bg);
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; font-weight: var(--fw-bold); }
.sj-me-han.empty{ color: #3A3A3A; border: 1px dashed #2C2C2C; }
.sj-me-txt b{ display: block; font-size: 17px; line-height: 1.45; font-weight: var(--fw-bold); color: var(--dg-text-primary); }
.sj-me-txt span{ display: block; margin-top: 4px; font-size: 12px; color: var(--dg-text-secondary); }
.sj-me-line{ margin-top: 14px; font-size: 13px; line-height: 1.65; color: var(--dg-text-secondary);
             text-align: center; }
.sj-me-line b{ color: var(--dg-text-primary); font-weight: var(--fw-semibold); }
.mz{ width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 0; }
.mz-wrap{ position: relative; padding: 16px; margin-top: 12px; }
.mz th{ padding: 0 0 7px; font-size: 10px; font-weight: var(--fw-medium); color: var(--dg-text-faint); }
.mz td{ padding: 4px 2px 5px; text-align: center; vertical-align: middle; }
.mz tr:not(:last-child) th, .mz tr:not(:last-child) td{ border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.mz-lab{ text-align: left !important; width: 52px; font-size: 10px; line-height: 1.35; color: var(--dg-text-faint); }
.mz-g{ position: relative; background: #303030; padding: 8px 2px 7px;
       clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px),
                          calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px); }
.mz-g::before{ content: ''; position: absolute; inset: 1px; background: var(--dg-fill);
       clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
                          calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.mz-g b, .mz-g span{ position: relative; z-index: 1; }
.mz-g b{ display: block; font-size: 23px; font-weight: var(--fw-semibold); line-height: 1.1; }
.mz-g span{ display: block; margin-top: 3px; font-size: 9px; color: var(--dg-text-faint); }
.mz-g.me{ background: var(--dg-accent); }
.mz-g.me::before{ background: linear-gradient(150deg, #3A1A05, #241206); }
.mz-g.empty{ background: #262626; min-height: 54px; padding: 0;
             display: flex; align-items: center; justify-content: center; }
.mz-g.empty::before{ background: #161616; }
.mz-g.empty b{ color: #3A3A3A; font-size: 19px; }
.gm{ position: absolute; inset: 0; pointer-events: none; color: rgba(240,216,155, 0.72);
     --s: .15;
     --cw: calc(122 * var(--s) * 1px); --ch: calc(126 * var(--s) * 1px);
     --t:  calc(9   * var(--s) * 1px); --o2: calc(21  * var(--s) * 1px); }
.gm svg{ position: absolute; display: block; width: var(--cw); height: var(--ch); }
.gm .tl{ top: 0; left: 0; }
.gm .tr{ top: 0; right: 0; transform: scaleX(-1); }
.gm .bl{ bottom: 0; left: 0; transform: scaleY(-1); }
.gm .br{ bottom: 0; right: 0; transform: scale(-1, -1); }
.gm i{ position: absolute; display: block; background: currentColor; }
.gm i.h{ left: var(--cw); right: var(--cw); height: var(--t); }
.gm .t1{ top: 0; }
.gm .t2{ top: var(--o2); }
.gm .b1{ bottom: 0; }
.gm .b2{ bottom: var(--o2); }
.gm i.v{ top: var(--ch); bottom: var(--ch); width: var(--t); }
.gm .l1{ left: 0; }
.gm .l2{ left: var(--o2); }
.gm .r1{ right: 0; }
.gm .r2{ right: var(--o2); }
.mz-sub{ font-size: 10.5px; color: var(--dg-text-body); }
.mz-sub.me{ color: var(--dg-accent); font-weight: var(--fw-bold); }
.mz-sub.dim{ color: var(--dg-text-faint); font-size: 9.5px; }
.sj-pil{ display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.pz-row{ display: flex; align-items: center; gap: 12px; padding: 9px 10px;
         border-radius: 10px; background: var(--dg-fill); }
.pz-row.me{ background: var(--dg-accent-soft); box-shadow: inset 0 0 0 1.5px var(--dg-accent-border); }
.pz-gz{ flex: none; width: 42px; text-align: center; }
.pz-gz b{ display: block; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.25; }
.pz-gz.empty b{ color: #3A3A3A; }
.pz-txt b{ display: block; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--dg-text-primary); }
.pz-txt span{ display: block; margin-top: 2px; font-size: 11px; line-height: 1.5; color: var(--dg-text-secondary); }
.sj-wu{ display: flex; justify-content: center; }
.sj-wu svg{ width: 100%; max-width: 262px; height: auto; }
.sj-bars{ display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.sj-bars div{ display: flex; align-items: center; gap: 8px; }
.sj-bars b{ width: 14px; font-size: 11.5px; font-weight: var(--fw-bold); }
.sj-bars span{ flex: 1; height: 7px; border-radius: 999px; background: var(--dg-fill); overflow: hidden; }
.sj-bars i{ display: block; height: 100%; border-radius: 999px; }
.sj-bars em{ width: 16px; text-align: right; font-style: normal; font-size: 11px; color: var(--dg-text-secondary); }
.sj-curve{ display: block; width: 100%; margin: 4px 0 8px; overflow: hidden; }
.sj-flow{ display: flex; gap: 6px; }
.sj-flow div{ flex: 1; text-align: center; padding: 8px 0 6px; border-radius: 9px; background: var(--dg-fill); }
.sj-flow div.on{ background: var(--dg-accent-soft); box-shadow: inset 0 0 0 1.5px var(--dg-accent); }
.sj-flow b{ display: block; font-size: 14.5px; font-weight: var(--fw-bold); color: var(--dg-text-primary); }
.sj-flow span{ display: block; margin-top: 3px; font-size: 10.5px; color: var(--dg-text-faint); }
.sj-curtain{ transform-box: view-box; animation: sjCurtain 1.5s cubic-bezier(.33,0,.15,1) .15s forwards; }
@keyframes sjCurtain{ from{ transform: translateX(0) } to{ transform: translateX(332px) } }
.sj-now{ opacity: 0; animation: sjPop .4s cubic-bezier(.34,1.4,.5,1) 1.5s forwards;
         transform-box: fill-box; transform-origin: center; }
@keyframes sjPop{ from{ opacity:0; transform:scale(.4) } to{ opacity:1; transform:scale(1) } }
.saju-cta{ margin-top: 18px; }
.saju-cta button{ display: block; width: 100%; height: 48px; border-radius: var(--dg-radius-full);
                  background: var(--dg-accent); color: #fff; font-size: 15px; font-weight: var(--fw-bold);
                  border: 0; font-family: inherit; letter-spacing: inherit; cursor: pointer; }
.saju-cta small{ display: block; margin-top: 9px; text-align: center; font-size: 11.5px;
                 color: var(--dg-text-faint); line-height: 1.6; }
#page-storage.active, #page-mypage.active{ display: flow-root; }
#page-storage .page-body,
#page-mypage .page-body{ padding: 24px 20px var(--fnav-space); margin: 0; }
#page-today .page-body{ padding: 24px 20px 0; margin: 0; }
#page-today .mp-page-title{ margin:0 0 4px; padding:0 var(--dg-space-1); font-size:20px; font-weight:var(--fw-bold); color:var(--dg-text-primary); }
#page-today .today-date{ margin:0; padding:0 var(--dg-space-1); font-size:14px; color:var(--dg-text-secondary); }
#page-storage .storage-center{ display: flex; flex-direction: column; justify-content: center; padding-top: 0; min-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top) - 160px); }
#page-storage .storage-center .empty-box{ padding:0; }
.sheet-head{ position:relative; height:32px; margin-bottom:12px; }
.sheet-head[hidden]{ display:none; }
.sheet-head span{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; }
.sheet-sp{ width:32px; height:32px; flex:none; }
.sheet-back{ padding:4px; width:32px; height:32px; background:none; border:0; color:var(--dg-text-faint); cursor:pointer; }
.sheet-back .ic, .sheet-close .ic{ width:22px; height:22px; display:block; }
.sheet .ls-sub{ margin:2px 0 20px; font-size:var(--fs-body-small); line-height:1.5; color:var(--dg-text-secondary); text-align:center; }
.sheet .ls-load{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 0 26px; }
.sheet .ls-load .ql-title{ margin-top:20px; }
#page-today .tday-strip button,
.sj-me .saju-cta button, .sj-me .saju-cta button.ghost,
.profile-edit-btn{
  height:34px; padding:0 15px; border-radius:var(--dg-radius-full);
  font-size:13px; font-weight:var(--fw-bold); }
.sj-me .saju-cta button.icon{ width:34px; padding:0; }
.si-g{ height:48px; border-radius:var(--dg-radius-md); font-size:14px; font-weight:var(--fw-semibold); }
.sheet-head{ height:44px; }
.sheet-close, .sheet-back, .sheet-sp, .coupon-picker-close{ width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; padding:0; }
.sheet-back[hidden], .sheet-sp[hidden]{ display:none; }
.sheet-close{ margin-right:-11px; }
.sheet-back{ margin-left:-11px; }

/* ── 옮겨 온 규칙을 용신록에 맞추는 자리 ── */
.sheet-overlay{ position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.6); }
.sheet-overlay[hidden]{ display:none; }
#saju-sheet .btn-primary{ width:100%; height:54px; margin-top:12px; border-radius:var(--dg-radius-md); background:var(--color-primary); color:var(--color-on-primary); font-size:16px; font-weight:var(--fw-semibold); }
#page-storage .saju-tabs{ position:sticky; top:calc(var(--header-height) + env(safe-area-inset-top)); z-index:90; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  height:44px; padding:0 20px; background:var(--color-bg); border-bottom:1px solid var(--color-border); }
#page-storage .sjtab{ position:relative; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--color-text-secondary); }
#page-storage .sjtab.active{ color:var(--color-text-primary); font-weight:600; }
#page-storage .sjtab.active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--color-text-primary); border-radius:2px; }

/* 오늘의 운세 — 그날의 색이 머리띠 뒤까지 올라온다(라이프사주와 같게). 머리띠는 투명하고,
   내용을 굴리면 어두운 막(--sc)이 깔려 로고·메뉴가 묻히지 않는다. */
body[data-page="today"] .ys-header{ background:transparent; }
body[data-page="today"] .ys-header::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--sc, 0); background:linear-gradient(to bottom, rgba(0,0,0,.92) 0%, rgba(0,0,0,.76) 58%, rgba(0,0,0,0) 100%); }

/* 로그인 전 보관함 — 라이프사주의 빈 보관함 모양 */
.ys-guest{ min-height:52vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
.ys-guest-title{ font-size:16px; font-weight:700; color:var(--color-text-primary); }
.ys-guest-desc{ font-size:14px; line-height:1.6; color:var(--color-text-secondary); }
.ys-guest-btn{ margin-top:16px; height:44px; padding:0 40px; border-radius:var(--dg-radius-full);
  background:var(--color-primary); color:var(--color-on-primary); font-size:16px; font-weight:var(--fw-bold); }
.ys-guest-btn:active{ transform:scale(0.98); }

/* ── 내 만세력 다음 — 황룡도령이 말을 건다 (D안) ── */
.ys-next{ margin-top:var(--dg-space-6); }
.ys-next[hidden]{ display:none; }
.ys-next-scene{ position:relative; margin:0 -20px; aspect-ratio:4 / 5; overflow:hidden; cursor:pointer; }
.ys-next-scene img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.ys-next-scene::before{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, var(--color-bg) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,.82) 78%, var(--color-bg) 100%); }
.ys-next-say{ position:absolute; left:24px; right:24px; bottom:92px; z-index:2; text-align:center; font-family:'Cafe24 Classictype','Noto Serif KR',serif; }
.ys-next-say span{ display:block; margin-bottom:6px; font-size:13px; color:#E7CE94; }
.ys-next-say b{ display:block; font-weight:400; font-size:24px; line-height:1.4; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.9); word-break:keep-all; }
.ys-next-cta{ position:absolute; left:24px; right:24px; bottom:20px; z-index:2; }
.ys-next-cta button{ display:flex; align-items:center; justify-content:center; width:100%; height:52px; border-radius:var(--dg-radius-full);
  background:var(--color-primary); color:var(--color-on-primary); font-size:16px; font-weight:var(--fw-bold); }
.ys-next-cta button:active{ transform:scale(0.98); }
.ys-next-strip{ position:relative; display:flex; align-items:center; height:84px; margin-top:var(--dg-space-4); border-radius:16px; overflow:hidden; background:#1a0d0c; cursor:pointer; }
.ys-next-strip img{ position:absolute; right:0; top:0; width:58%; height:100%; object-fit:cover; object-position:50% 12%; }
.ys-next-strip::after{ content:''; position:absolute; inset:0; background:linear-gradient(to right, #1a0d0c 40%, rgba(26,13,12,0) 78%); }
.ys-next-strip div{ position:relative; z-index:1; padding-left:18px; }
.ys-next-strip span{ display:block; font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-size:11px; color:#E7CE94; }
.ys-next-strip b{ display:block; font-family:'Cafe24 Classictype','Noto Serif KR',serif; font-weight:400; font-size:19px; color:#fff; }
.ys-next-strip em{ display:block; margin-top:2px; font-style:normal; font-size:12px; color:#C9C3B8; }

/* 결제 페이지의 상품 정보 제공 고시 — 강조할 필요가 없어 상자 없이 맨 밑 작은 한 줄로 (2026-09-21 JH) */
#page-checkout .goshi{ margin:16px 0 0; border:none; background:none; border-radius:0; }
#page-checkout .goshi summary{ padding:0; justify-content:flex-start; gap:6px; font-size:12px; font-weight:500; color:var(--color-text-light); }
#page-checkout .goshi[open] summary{ border-bottom:none; margin-bottom:12px; }
#page-checkout .goshi-table{ font-size:12px; }
#page-checkout .goshi-table th, #page-checkout .goshi-table td{ padding:9px 0; }
#page-checkout .goshi-table th{ width:30%; padding-right:10px; white-space:normal; color:var(--color-text-secondary); }

/* ══ 아이콘 한 벌 (2026-09-21 JH 확정 — 시안판 «아이콘을 라이프사주 한 벌로» 14곳) ══
   뒤로가기·닫기·이전/다음에 쓰던 **글자(← ‹ ✕ ▦ +)** 를 전부 그린 아이콘으로 바꿨다. 글자는 폰 기종·글꼴에 따라 모양이 달라진다.
   규칙: 24×24 칸 · 선 1.5 · 둥근 끝 · 색은 글자색(currentColor) · 누르는 자리는 44×44.
   뒤로/닫기/다음/펼침은 라이프사주 파일의 값 그대로, 목차·홈·저장은 같은 규칙으로 맞춰 그린 것이다.
   🚫 새 단추에 글자 화살표를 다시 넣지 말 것 — index.html·script.js 의 <svg class="ic"> 를 복사해 쓴다. */
.ic{ display:block; flex:none; }
.back-btn.is-ic, .wiz-back.is-ic, .wt2-back.is-ic{ display:flex; align-items:center; justify-content:center; padding:0; font-size:0; }
.back-btn.is-ic{ width:44px; height:44px; margin-left:-10px; }
.sub-header .back-btn.is-ic + .back-btn.is-ic{ margin:0 -10px 0 0; }                 /* 결과지 머리띠 오른쪽(PDF 저장) */
.wiz-back.is-ic{ width:44px; height:44px; margin:-5px 0 0 -10px; }
.wt-nav-btn, .wt-nav-toc{ display:flex; align-items:center; justify-content:center; gap:4px; }
/* «상품 정보 제공 고시» — 글자 «+ / −» 대신 꺾쇠. 펼치면 뒤집힌다 */
.goshi summary::after, .goshi[open] summary::after{ content:''; width:20px; height:20px; flex:none; background:currentColor; color:var(--color-text-light);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.5 8.25L12 15.75L4.5 8.25' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.5 8.25L12 15.75L4.5 8.25' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease; }
.goshi[open] summary::after{ transform:rotate(180deg); }

/* ══ 결과지 머리띠·아래 바 — 라이프리포트 결과지(.qr-header · .qr-foot)의 값을 어두운 판으로 (2026-09-21 JH 확정) ══
   머리띠 60 · 아래 바 64 · 단추 44 · 모서리 12. 색만 용신록. **본문(.wt-page 안쪽)은 건드리지 않는다.**
   머리띠가 스크롤에 숨는 것은 위쪽의 #page-saju-result .sub-header.hdr-hidden 규칙 그대로다. */
#page-saju-result .sub-header.ys-rh{ justify-content:space-between; gap:12px; height:var(--header-height); padding:0 var(--dg-space-5); border-bottom:0; background:var(--color-bg); }
.ys-rh-info{ display:flex; flex-direction:column; gap:4px; min-width:0; text-align:left; }
.ys-rh-kicker{ font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--color-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ys-rh-title{ font-size:18px; font-weight:var(--fw-bold); line-height:1.2; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ys-rh-btns{ display:flex; align-items:center; gap:2px; margin-right:-10px; flex:none; }
.ys-rh-btns button{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--color-text-primary); }
/* 아래 바 — 홈 하단바와 같은 «떠 있는 유리 알약» 둘 (G3안). 재질 값은 .ys-fnav 와 같다.
   ⚠️ 바깥 그림자를 넣지 않는다(사파리에서 가로선이 생긴다 — .ys-fnav 주석 참고). 틀(nav) 자체는 투명하고 손가락을 받지 않는다. */
#page-saju-result .wt-nav.ys-rf{ left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:var(--max-width); box-sizing:border-box;
  bottom:calc(var(--fnav-gap) + env(safe-area-inset-bottom)); height:auto; padding:0 var(--dg-space-4); gap:0;
  display:flex; align-items:center; justify-content:space-between; background:none; border:0; pointer-events:none; }
.ys-rf-pill{ position:relative; display:flex; align-items:center; gap:4px; padding:7px; border-radius:var(--dg-radius-full); pointer-events:auto;
  background:rgba(255,255,255,0.09); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.22); }
.ys-rf-pill::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 42%); }
.ys-rf-pill button{ position:relative; z-index:1; height:44px; min-width:44px; border-radius:var(--dg-radius-full); display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:13px; font-weight:var(--fw-semibold); color:rgba(255,255,255,0.86); white-space:nowrap; outline:none; }
.ys-rf-pill button:focus-visible{ box-shadow:0 0 0 2px var(--color-primary); }
.ys-rf-toc{ padding:0 16px 0 14px; }
.ys-rf-arrow:disabled{ opacity:.35; }
.ys-rf-arrow.next{ padding:0 16px 0 18px; background:var(--color-primary); color:var(--color-on-primary); font-weight:var(--fw-bold); }
.ys-rf-pill button:active{ transform:scale(0.97); }

/* ══ 새 로고 (2026-09-21 JH) — 붓글씨 «용신록». 파일: images/yongsinrok-logo-white.png(어두운 바탕용) · -black.png(밝은 바탕용), 780×342.
   원본은 JH 의 «용신록_로고.ai». 흰 판을 그대로 쓰므로 옛 로고에 걸던 «검정→흰색» 필터는 뺀다.
   크기는 라이프사주에 맞췄다 — 라이프사주 머리띠 로고는 85×16(가로로 긴 5.3:1), 푸터는 106×20.
   용신록 로고는 2.3:1 이라 같은 높이로 두면 너무 작다 → **차지하는 넓이가 같게** 머리띠 24px · 푸터 30px. */
.logo-img{ height:24px; filter:none; }                 /* 상품 상세 머리띠 */
.login-logo-img{ height:40px; filter:none; }           /* 로그인 화면 */
.footer-logo-img, .side-logo{ filter:none; }
.load-mark-img{ height:56px; filter:none; }            /* 로딩 화면 — 옛 로고는 위아래 여백이 절반이라 112px 이었다. 새 로고는 여백이 없어 절반이면 같은 크기다 */
.wt-closing-mark{ filter:none; }

/* 티저의 동그란 뒤로가기 — PC 에서 **창** 왼쪽 위 끝에 붙어 프레임 밖으로 나가 있었다(2026-09-21 JH 화면에서 발견). 프레임 안쪽으로 */
.wt2-back{ left:calc(var(--frame-gap) + 14px); }

.si-consent{ margin:4px 0 0; font-size:12px; line-height:1.6; color:var(--color-text-light); word-break:keep-all; }
.si-consent b{ color:var(--color-text-secondary); font-weight:600; }
.si-consent a{ text-decoration:underline; text-underline-offset:2px; color:var(--color-text-secondary); }