/* 2026-11-12 용용식 새 갈래(line_yy).
   11/13 사장님: 「타사들에서 사용하는 UI를 많이 참고해야 해. 흐림 단계, 가격판, 캘린더 UI 그런 것들이 우리보다 더 이쁘잖아」,
   「용용에서 가져올 거는 캐릭터 디자인이랑 풀이의 배치, 시점·구도」 → 11/12 「UI 부품은 우리 것 그대로」를 바꿈.
   풀이 부품(흐림 · 2×2 표 · 날짜 칩 · 달력 · 점수 막대 · 잠금 카드 · 리포트 폰 · 상세 목차 · 결제 묶음 · 고정 바 · 알약 · 붙잡기 팝업)과
   장 배치는 용용 실제 화면 모양대로(근거: reports/2026-11-12-타사-조합분석/live/yongyong · 새캐릭터-기획/spec-yongyong.md 실측).
   색은 아래 --yy-* 갈래 토큰 한 묶음(11/13 그라데이션 · 네온 없는 차분한 단색). 글꼴은 용용과 같은 ChosunNm · 아리따부리 · SUIT(11/13 적용). 글자 크기 비율은 용용 448 폭 실측을 화면 폭에 맞춰 줄인 값, 손님 글자 14px 이상.
   왼쪽 강조 세로 띠 없음. 흐린 값은 진짜 값이 HTML 에 없다(가짜 값 · ○○ · 장식만 흐림). */

/* 글꼴(11/13 적용): 공식 배포처 원본에서 자주 쓰는 한글 2,350자(KS X 1001) + 영문 · 기호만 담은 woff2. 출처 · 라이선스는 fonts/LICENSES.md */
@font-face{font-family:'ChosunNm';src:url("fonts/ChosunNm-ks.ee98d63c0b2a.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Aritaburi';src:url("fonts/AritaBuriKR-Medium-ks.d5834dbaa653.woff2") format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'SUIT Variable';src:url("fonts/SUIT-Variable-ks.aa71f357eb5a.woff2") format('woff2-variations'),url("fonts/SUIT-Variable-ks.aa71f357eb5a.woff2") format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

.yy{
  /* 갈래 색 토큰: 이 묶음만 바꾸면 강조색 · 바탕이 다 바뀐다.
     11/13 사장님 「용용에서 가져오지 않을 1가지는 그라데이션 같은 버튼, 네온 같은 색감」 「타이트 같은 그라데이션 없고 편안한 색감」
     → 배치 · 구도는 용용, 색은 채도 낮춘 단색(차분한 보라 + 아이보리, 타이트 결). 그라데이션 · 빛 번짐 없음 */
  --yy-bg:#17151c; --yy-panel:#201d26; --yy-panel-3:#29252f; --yy-page:#111015;
  --yy-accent-rgb:168 156 214; --yy-accent:rgb(var(--yy-accent-rgb)); --yy-accent-soft:#cbc3e6; --yy-panel-2:rgb(var(--yy-accent-rgb) / .07);
  --yy-text:rgba(244,239,230,.92); --yy-strong:#f6f2ea; --yy-sub:rgba(244,239,230,.62);
  --yy-rule:rgb(var(--yy-accent-rgb) / .24); --yy-rule-soft:rgb(var(--yy-accent-rgb) / .13);
  --yy-btn:#6b5db3; --yy-btn-ink:#fbf8f2; --yy-mark:#7a6cc0;
  --yy-cta:var(--yy-btn); --yy-glow:transparent;
  --yy-glyph:'運';
  /* 글꼴: 위 @font-face(2,350자). 드문 음절 · 한자는 뒤의 대체 글꼴로 */
  --line-sans:'SUIT Variable','SUIT','Pretendard Variable',Pretendard,'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  --line-serif:'ChosunNm','Chosun Ilbo Myungjo','Noto Serif KR','Nanum Myeongjo','Batang','바탕',serif;
  --line-serif-weight:700;
  --line-ask:var(--line-serif);
  --line-say:'Aritaburi','아리따부리',var(--line-sans);
  /* 글자 크기: 용용 448 폭 실측 → 화면 폭 비율(390 에서 약 0.87배). 14px 미만은 14 */
  --fs-kicker:14px; --fs-big:min(32px,7.15vw); --fs-over:min(32px,7.15vw); --fs-chapter-n:min(23px,5.9vw); --fs-chapter:min(30px,6.9vw);
  --fs-card-title:min(17px,4.4vw); --fs-body:min(17px,4.2vw); --fs-label:14px; --fs-bubble:min(16px,4.1vw); --fs-ask:min(28px,6.6vw); --fs-glyph:44px;
  --fs-say:min(20px,5.1vw); --fs-title:38px; --fs-title-head:20px;
  position:relative;min-height:100svh;padding-bottom:120px;overflow-x:clip;
  font-family:var(--line-sans);color:var(--yy-text);word-break:keep-all;overflow-wrap:break-word;background:var(--yy-bg)
}
/* 사이트 토큰을 갈래 토큰으로(기존 부품 · 숫자 카드 · 결제 시트가 이 색으로 그려진다). 다크 테마 규칙보다 앞서게 html[data-theme] */
html[data-theme] .yy[data-line]{--ink:var(--yy-text);--sub:var(--yy-sub);--line:var(--yy-rule-soft);
  --v2-line:var(--yy-rule-soft);--v2-soft:var(--yy-panel-2);--v2-sub:var(--yy-sub);--v2-warn:var(--yy-accent-soft);
  --reading-accent:var(--yy-accent);--reading-wash:var(--yy-panel-2);--yy-bg-fade:var(--yy-bg);
  /* 분야 색도 채도 낮춘 단색(11/13 「편안한 색감」) */
  --c-love:#c49aab;--c-money:#c2ad86;--c-work:#8ea2c2;--c-health:#93b09d;--gold:#c2ad86;--el2:#c49aab}
html[data-theme]:has(.yy[data-line]),html[data-theme]:has(.yy[data-line]) body{background:var(--yy-page)}
.yy.yy-form{padding-bottom:0}
.yy .yy-em{font-style:normal;color:var(--reading-accent)}
.yy .yy-blur{display:inline-block;padding:0 3px;filter:blur(5px);user-select:none;-webkit-user-select:none;pointer-events:none;font-weight:700;color:var(--reading-accent)}

/* ── 그림 · 영상 자리 ─────────────────────────────────────── */
.yy-slot{position:relative;margin:0 auto;width:min(calc(var(--w) * 1px),calc(100% - 44px));aspect-ratio:var(--w) / var(--h)}
.yy-slot.is-full{width:100%}
.yy-slot img,.yy-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 22%);border-radius:14px}
.yy-slot.is-full img,.yy-slot.is-full video{border-radius:0}
.yy-slot-box{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;border-radius:14px;
  border:1.5px dashed color-mix(in srgb,var(--reading-accent) 60%,transparent);
  background:var(--v2-soft)}
.yy-slot.is-full .yy-slot-box{border-radius:0;border-left:0;border-right:0}
.yy-slot-tag{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:310px;margin:0;text-align:center;font:500 14px/1.5 var(--line-sans);color:var(--v2-sub)}
.yy-slot-tag b{font-size:16px;font-weight:800;color:var(--reading-accent)}
.yy-slot-tag i{margin-top:4px;padding:2px 10px;border:1px solid var(--v2-line);border-radius:999px;font:700 14px/1.4 var(--line-sans);font-style:normal}
.yy-slot.has-over-top .yy-slot-box{align-items:flex-end;padding-bottom:64px}
.yy-slot[data-slot="A4"] .yy-slot-box,.yy-slot[data-slot="B3"] .yy-slot-box{align-items:flex-start;padding-top:18%}
.yy-slot[data-slot^="D4"] .yy-slot-box{padding:34% 22px}
/* 아래(전폭 자리는 위도)를 바탕색으로 녹인다 */
.yy-slot.is-fade::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:34%;pointer-events:none;background:linear-gradient(transparent,var(--yy-bg))}
.yy-slot.is-fade.is-full::before{content:'';position:absolute;z-index:1;left:0;right:0;top:-1px;height:12%;pointer-events:none;background:linear-gradient(var(--yy-bg),transparent)}
.yy-slot[data-slot="A4"]::before,.yy-slot[data-slot="B3"]::before,.yy-slot[data-slot="C1"]::before{display:none}
.yy-slot[data-slot="A4"].is-fade::after{height:48%}

/* 그림 위 큰 글씨(첫 컷) */
.yy-over{position:absolute;z-index:2;left:0;right:0;margin:0;padding:0 24px;text-align:center;
  font:800 var(--fs-over)/1.3 var(--line-sans);letter-spacing:-.02em;color:var(--ink);text-shadow:0 2px 18px var(--yy-bg)}
.yy-over.is-top{top:40px}.yy-over.is-bottom{bottom:44px}
.yy-over span{display:block}
.yy-over span:last-child{color:var(--reading-accent)}

/* 말풍선: 꼬리 없는 흰 타원, 앞말 왼쪽 위 · 뒷말 오른쪽 아래 */
.yy-bubble{position:absolute;z-index:2;transform:translate(-50%,-50%);margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:128px;min-height:84px;padding:16px 22px;border-radius:50%;background:rgba(255,255,255,.88);color:#141414;text-align:center;white-space:nowrap;
  font:500 var(--fs-bubble)/1.45 var(--line-say);letter-spacing:-.01em;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.yy-bubble span{display:block}

/* ── 화면 A. 인트로 ───────────────────────────────────────── */
.yy-glyph{position:absolute;z-index:3;top:18px;right:18px;margin:0;font:var(--line-serif-weight) var(--fs-glyph)/1 var(--line-serif);color:color-mix(in srgb,var(--ink) 18%,transparent);pointer-events:none}
.yy-kicker{position:relative;z-index:2;margin:18px 24px 0;text-align:center;font:700 var(--fs-kicker)/1.5 var(--line-sans);letter-spacing:.11em;color:var(--ink)}
.yy-kicker.yy-over-hero{margin-top:-236px;animation:yyFadeUp .7s ease both}
.yy-kicker.yy-under-logo{margin-top:2px;animation:yyFadeUp .7s .2s ease both}
/* B형: 제목 글씨 그림이 전면 영상 아래 1/3에 겹친다(영상 가운데엔 글씨 없음) */
.yy-slot.yy-over-hero{z-index:2;margin-top:calc(min(100vw,448px) * -.6);animation:yyFadeUp .7s .1s ease both}
/* 영상 위 결과 항목 이름표 칩: 꼬리 없음, 원색으로 꽉 채우지 않음 */
.yy-chip{position:absolute;z-index:2;transform:translate(-50%,-50%);padding:7px 14px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);background:color-mix(in srgb,var(--yy-bg) 80%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:700 14px/1.3 var(--line-sans);color:var(--ink)}
/* A형 제목 덩어리 */
.yy-title{padding:30px 24px 18px;text-align:center}
.yy-title-head{margin:0;font:600 var(--fs-title-head)/1.4 var(--line-sans);color:var(--v2-sub)}
.yy-title h1{margin:8px 0 0;font:var(--line-serif-weight) var(--fs-title)/1.22 var(--line-serif);letter-spacing:-.02em}
.yy-title h1 span{display:block}
/* 캐릭터 대사 한 줄(말하는 이 표시 없음) */
.yy-dialogue{margin:34px 26px 0;text-align:center;font:var(--line-serif-weight) var(--fs-say)/1.55 var(--line-serif);letter-spacing:-.01em}
.yy-dialogue span+span::before{content:' '}
.yy-slot.yy-over-hero img{object-fit:contain;filter:drop-shadow(0 2px 10px rgba(10,2,3,.85))}
.yy .yy-prophecy{margin:26px 22px 0;padding:8px 16px}
.yy-prophecy ol{list-style:none;margin:0;padding:0}
.yy-prophecy li{display:flex;gap:12px;align-items:baseline;padding:11px 0}
.yy-prophecy li+li{border-top:1px solid var(--v2-line)}
.yy-prophecy b{flex:none;font:900 14px/1 var(--line-sans);color:var(--reading-accent)}
.yy-prophecy p{margin:0;font:400 15px/1.55 var(--line-sans)}
.yy-big{padding:64px 22px 10px;text-align:center}
.yy-big p{margin:0;font:var(--line-serif-weight) var(--fs-big)/1.55 var(--line-serif);letter-spacing:-.01em}
.yy-big.is-sans p{font:800 var(--fs-big)/1.45 var(--line-sans);letter-spacing:-.02em}
.yy-big.is-l p{font-size:calc(var(--fs-big) + 4px)}
.yy-big span{display:block}
.yy-promise ol{list-style:none;margin:20px 0 0;padding:0}
.yy .yy-promise li.v2-card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;margin:10px 22px 0;padding:15px 16px}
.yy-promise b{grid-row:span 2;font:var(--line-serif-weight) 19px/1 var(--line-serif);color:var(--reading-accent)}
.yy-promise h2{margin:0 0 4px;font:800 15px/1.45 var(--line-sans);letter-spacing:-.01em}
.yy-promise p{margin:0;font:400 14px/1.6 var(--line-sans);color:var(--v2-sub)}
.yy-reviews{margin:64px 0 0}
.yy-reviews-head{margin:0 22px 12px;text-align:center;font:700 22px/1.4 var(--line-sans)}
.yy-reviews-score{font-size:16px;color:var(--reading-accent)}
.yy-reviews-head small{font-size:14px;color:var(--v2-sub)}
.yy-reviews .rv{margin:10px 16px 0}

/* 하단 고정 버튼: 우리 고정 바 그대로(인트로에서도 보이게) */
@media screen{.yy .yy-sticky{display:flex;flex-direction:column;align-items:stretch;gap:8px}}
.yy .yy-sticky-row{display:flex;gap:10px;align-items:center}
.yy .yy-sticky .btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;text-decoration:none}

/* ── 화면 B. 입력 ─────────────────────────────────────────── */
.yy-form-bg{position:absolute;z-index:0;top:0;left:0;right:0}
.yy .yy-form{position:relative;z-index:1;padding-top:min(56svh,452px)}
.yy .yy-form .q-top{position:absolute;top:12px;left:16px;right:16px}
.yy .yy-form .q-intro{display:none}
.yy .q-guide.yy-ask{display:block;margin:0 0 18px;padding:0;background:none;border:0;box-shadow:none}
.yy .q-guide.yy-ask[hidden]{display:none}
.yy-ask-pre{margin:0 0 6px;font:400 14px/1.5 var(--line-sans);color:var(--v2-sub)}
.yy-ask-q{margin:0;font:var(--line-serif-weight) var(--fs-ask)/1.4 var(--line-ask);letter-spacing:-.01em;color:var(--ink)}
.yy-form.is-cards .q-step.is-on{animation:yyStepIn .5s ease both}

/* ── 화면 C. 불러오기 ─────────────────────────────────────── */
.yy-loading{position:relative;min-height:100svh}
.yy-loading .yy-slot{min-height:100svh}
.yy-progress{position:absolute;z-index:3;left:0;right:0;bottom:calc(72px + env(safe-area-inset-bottom));padding:0 32px;text-align:center}
.yy-progress ol{list-style:none;margin:0 0 16px;padding:0;min-height:26px}
.yy-progress li{display:none;font:600 16px/1.55 var(--line-sans)}
.yy-progress li.is-on{display:block;animation:yyStepIn .5s ease both}
.yy-bar{width:min(300px,100%);height:6px;margin:0 auto;border-radius:3px;overflow:hidden;background:var(--v2-line)}
.yy-bar i{display:block;height:100%;width:var(--p,0%);border-radius:3px;transition:width .3s linear;
  background:var(--reading-accent)}

/* ── 화면 D. 결제 전 ─────────────────────────────────────── */
.yy-chapter h2 span{display:block}
.yy .yy-card.v2-card,.yy .yy-natal.v2-card,.yy .yy-toc-card.v2-card{margin:14px 22px 0}
.yy-card-title{margin:0 0 14px;text-align:center;font:700 var(--fs-card-title)/1.4 var(--line-sans)}
.yy-card-sub{margin:18px 0 8px;font:700 15px/1.4 var(--line-sans)}
.yy-card-lead{margin:0 0 10px;text-align:center;font:700 16px/1.5 var(--line-sans);color:var(--reading-accent)}
.yy-natal-who{margin:-8px 0 14px;text-align:center;font:400 14px/1.5 var(--line-sans);color:var(--v2-sub)}
.yy-text{padding:20px 24px 0}
.yy-text p{margin:0 0 12px;font:400 var(--fs-body)/1.75 var(--line-sans);color:color-mix(in srgb,var(--ink) 90%,transparent)}
.yy-natal + .yy-text + .yy-slot{margin-top:4px}
.yy-person-art{position:relative;margin:0 0 14px}
.yy-person-art .yy-slot{width:100%}
.yy-person-art img{filter:blur(12px);transform:scale(1.05)}
.yy-pill{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;gap:6px;align-items:center;
  padding:10px 18px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;font:700 14px/1 var(--line-sans);white-space:nowrap}
.yy-pill svg,.yy-pill .lock-ic{width:14px;height:14px}
.yy-toc{margin-top:56px}
.yy-toc-head{margin:0 24px 6px;text-align:center;font:var(--line-serif-weight) 22px/1.45 var(--line-serif)}
.yy-toc-card .yy-slot{width:100%;margin-bottom:14px}
.yy-toc-n{margin:0;font:700 14px/1.4 var(--line-sans);letter-spacing:2px;color:var(--reading-accent)}
.yy-toc-card h3{margin:4px 0 10px;font:800 20px/1.35 var(--line-sans)}
.yy-toc-card ol{list-style:none;margin:0;padding:0}
.yy-toc-card li{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 0;font:400 14px/1.6 var(--line-sans)}
.yy-toc-card li+li{border-top:1px solid var(--v2-line)}
.yy-toc-card li small{font:600 14px/1.6 var(--line-sans);color:var(--reading-accent)}
.yy .v2-inventory,.yy .offer-card:not(.is-modal){margin-left:22px;margin-right:22px}
.yy .yy-existing{margin-top:8px}
/* 기존 부품 안 꼬마 캐릭터(지금 캐릭터 그림)는 새 캐릭터 꼬마 그림 자리로 보인다 */
.yy .cb-cut img{visibility:hidden}
.yy .cb-cut:not(.without-chibi)::before{content:'꼬마 그림 자리';position:absolute;bottom:0;width:104px;height:104px;display:flex;align-items:center;justify-content:center;
  border:1.5px dashed color-mix(in srgb,var(--reading-accent) 60%,transparent);border-radius:12px;font:700 14px/1.3 var(--line-sans);color:var(--reading-accent);text-align:center}
.yy .cb-cut.side-left:not(.without-chibi)::before{left:10px}.yy .cb-cut.side-right:not(.without-chibi)::before{right:10px}
.yy-result-body{margin-top:-8px}

/* ── 움직임 ─────────────────────────────────────────────── */
@keyframes yyFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes yyStepIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes yyBubbleIn{from{opacity:0;transform:translate(-50%,calc(-50% + 14px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes yyShimmer{from{background-position:200% 0}to{background-position:0 0}}
.yy-rise.is-wait{opacity:0;transform:translateY(22px)}
.yy-rise.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.yy-slot.is-wait .yy-bubble{opacity:0}
.yy-slot.is-in .yy-bubble{animation:yyBubbleIn .42s ease both}
.yy-slot.is-in .yy-bubble+.yy-bubble{animation-delay:.38s}
@media (prefers-reduced-motion:reduce){
  .yy *,.yy *::before,.yy *::after{animation:none!important;transition:none!important}
  .yy-rise.is-wait,.yy-slot.is-wait .yy-bubble{opacity:1;transform:none}
}

/* 장 끝 「결제 후 공개」(버튼 없는 조용한 잠금) */
.yy .yy-lock.is-quiet{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 22px 0;padding:12px 16px}
.yy .yy-lock.is-quiet p{margin:0;font:700 14px/1.4 var(--line-sans);color:var(--v2-sub)}
.yy .yy-lock.is-quiet svg{flex:none;width:16px;height:16px}

/* 그림 아래 명조 한 줄(연애 첫 장, 용용 홍련 17px) */
.yy-caption{margin:14px 26px 0;text-align:center;font:var(--line-serif-weight) var(--fs-caption,17px)/1.55 var(--line-serif);letter-spacing:-.01em}

/* 숫자 카드(studio/numcards.py · static/css/numcards.css). 카드 모양은 공용 부품 그대로, 글꼴 · 강조색만 이 갈래 것을 토큰으로 넘김.
   글꼴: 큰 숫자 · 카드 제목은 갈래 명조 자리(--line-serif, 시안마다 바뀜), 본문은 --line-sans. 색: 우리 사이트 강조색 --reading-accent 한 가지 */
.yy{--line-ink:var(--yy-text);--line-muted:var(--yy-sub);--line-rule:var(--yy-rule-soft);--line-card:var(--yy-panel);
  --line-accent:var(--yy-accent);--line-heart:var(--yy-accent);--line-gold:var(--yy-accent-soft);
  --line-highlight:rgb(var(--yy-accent-rgb) / .38);--line-second:var(--yy-accent-soft)}
.yy .yy-number{margin:16px 22px 0}
.yy .yy-number .nc{margin:0}
.yy .nc .nc-title,.yy .nc-gauge-num b,.yy .nc-cal-head{font-weight:var(--line-serif-weight)}

/* ── 압박 장치(line_yy/pressure.py 실제 값만, 모자라면 HTML 에 없음). 자리는 용용 그대로, 모양 · 색은 우리 것 ── */
.yy-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--yy-accent)}
.yy-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid rgb(var(--yy-accent-rgb) / .6);animation:yy-ping 2s ease-out infinite}
@keyframes yy-ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
/* 확인 알약: 인트로 고정 바, 버튼 바로 위(용용 50개 중 41개) */
.yy-seen{align-self:center;display:flex;align-items:center;gap:8px;margin:0;padding:6px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--yy-bg) 88%,transparent);box-shadow:0 2px 12px rgba(0,0,0,.12);font:600 14px/1.4 var(--line-sans);color:var(--ink)}
.yy-seen b{color:var(--reading-accent);font-weight:800}
/* 구매 알림: 결제 전 고정 버튼 위에 떴다 사라짐(용용 궁합 · 평생) */
.yy-toast{position:absolute;left:16px;right:16px;bottom:calc(100% + 4px);display:flex;justify-content:center;pointer-events:none}
.yy-toast-item{display:flex;align-items:center;gap:8px;margin:0;max-width:100%;padding:8px 14px;border-radius:999px;background:var(--ink);
  color:var(--yy-bg);font:500 14px/1.4 var(--line-sans);box-shadow:0 6px 18px rgba(0,0,0,.2);transition:opacity .35s,transform .35s}
.yy-toast-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yy-toast-item b{font-weight:800}
.yy-toast-item.is-off{opacity:0;transform:translateY(6px)}
/* 위 띠 타이머(용용 궁합: 화면 위에 늘 붙은 할인 띠) */
.yy-topband{position:fixed;top:0;left:50%;z-index:21;width:min(100%,var(--app-w,448px));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;
  padding:9px 16px;background:var(--reading-accent);color:#fff;font:700 14px/1.4 var(--line-sans)}
.yy-topband .offer-clock{font:800 16px/1 var(--line-sans);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.yy-preview:has(.yy-topband) .yy-article{padding-top:38px}
/* ▼ 다음 후기(용용 인트로) */
.yy-down{margin:46px 0 -40px;text-align:center;font-size:16px;line-height:1;color:var(--reading-accent)}
/* 실적 배지: 후기 바로 뒤 월계수(용용). 숫자는 실제 누적 값 */
.yy-badge{display:flex;align-items:center;justify-content:center;gap:6px;margin:30px 22px 0;color:var(--reading-accent)}
.yy-laurel{flex:none;width:30px;height:72px}
.yy-laurel.is-right{transform:scaleX(-1)}
.yy-badge ul{display:flex;gap:18px;margin:0;padding:0;list-style:none}
.yy-badge li{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.yy-badge b{font:var(--line-serif-weight) 20px/1.2 var(--line-serif);color:var(--ink)}
.yy-badge span{font:600 14px/1.3 var(--line-sans);color:var(--v2-sub)}
/* 붙잡기 팝업(결제 시트를 닫으면 한 번) */
.yy-exit{position:fixed;inset:0;z-index:170;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.6)}
.yy-exit[hidden]{display:none}
.yy .yy-exit-card.v2-card{width:min(100%,340px);margin:0;padding:18px 18px 14px;text-align:center}
.yy-exit .yy-slot{width:100%;margin:0 0 14px}
.yy-exit-q{margin:0;font:var(--line-serif-weight) 21px/1.45 var(--line-serif);letter-spacing:-.01em}
.yy-exit-won{color:var(--reading-accent);font-weight:800}
.yy-exit-left{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 14px;font:600 14px/1.4 var(--line-sans);color:var(--v2-sub)}
.yy-exit-left .offer-clock{font:800 17px/1 var(--line-sans);color:var(--reading-accent);font-variant-numeric:tabular-nums}
.yy-exit .btn{display:flex;align-items:center;justify-content:center;min-height:50px;text-decoration:none}
.yy-exit-leave{display:block;width:100%;margin-top:6px;padding:12px;border:0;background:none;font:500 15px/1.4 var(--line-sans);color:var(--v2-sub);cursor:pointer}
@media (prefers-reduced-motion:reduce){.yy-dot::after{animation:none}.yy-toast-item{transition:none}}

/* ══ 11/13 용용 UI 부품(실제 화면 모양대로). 앞 규칙을 덮는다. 접두 html[data-theme] 는 다크 테마 규칙보다 앞서려고 ══ */
html[data-theme] .yy :is(h1,h2,h3,h4){color:var(--yy-strong)}
html[data-theme] .yy .yy-em{color:var(--yy-accent);font-weight:inherit}

/* 흐림 3단계: 낱말 5px(강조색 옅게) · 문단 통째 4px · 그림 통째 12px. 흐린 글자는 가짜 값이나 ○○ */
html[data-theme] .yy :is(.yy-blur,b.v2-blur,em.v2-blur,i.v2-blur,span.v2-blur,small.v2-blur,dd.v2-blur){filter:blur(5px);color:var(--yy-accent-soft);font-weight:700}
html[data-theme] .yy :is(p.v2-blur,div.v2-blur,li.v2-blur,.v2-blur-para){display:block;filter:blur(4px);color:var(--yy-sub);font-weight:400}
html[data-theme] .yy .yy-person-art img,html[data-theme] .yy .nc-portrait img.nc-blur-img{filter:blur(12px);transform:scale(1.08)}

/* 첫 컷 큰 글씨(용용 32px · 흰색 · 마지막 줄 강조) */
html[data-theme] .yy .yy-over{font:var(--line-serif-weight) var(--fs-over)/1.32 var(--line-serif);letter-spacing:-.03em;color:var(--yy-strong);text-shadow:0 2px 14px rgba(0,0,0,.75),0 0 30px rgba(0,0,0,.5)}
html[data-theme] .yy .yy-over span:last-child{color:var(--yy-accent)}
html[data-theme] .yy .yy-over .yy-blur{filter:blur(6px);color:var(--yy-strong)}
.yy-slot.is-fade::after{background:linear-gradient(transparent,var(--yy-bg))}
.yy-slot.is-fade.is-full::before{background:linear-gradient(var(--yy-bg),transparent)}

/* 큰 글씨(용용 big_text 32px 명조 700) */
html[data-theme] .yy .yy-big{padding:72px 24px 18px}
html[data-theme] .yy .yy-big p{font:var(--line-serif-weight) var(--fs-big)/1.38 var(--line-serif);letter-spacing:-.03em;color:var(--yy-strong)}
html[data-theme] .yy .yy-big .yy-em{color:var(--yy-accent)}

/* 장 표시: 가로줄(끝 점) + 큰 장식 글자 위 번호 + 장 이름 → 큰 질문 제목 */
.yy-chapter{padding:64px 0 22px;text-align:center}
.yy-chapter-mark{display:flex;align-items:center;gap:10px;margin:0 0 26px}
.yy-chapter-rule{flex:1;height:1px;position:relative;background:var(--yy-rule)}

.yy-chapter-rule::after{content:'';position:absolute;top:-2px;right:-2px;width:5px;height:5px;border-radius:50%;background:var(--yy-accent)}
.yy-chapter-seal+.yy-chapter-rule::after{right:auto;left:-2px}
.yy-chapter-seal{position:relative;display:flex;flex-direction:column;align-items:center;min-width:64px;padding-top:12px}
.yy-chapter-glyph::before{content:var(--yy-glyph);position:absolute;left:50%;top:-6px;transform:translateX(-50%);font:700 46px/1 var(--line-serif);color:rgba(255,242,240,.16);pointer-events:none}
html[data-theme] .yy .yy-chapter-n{position:relative;display:block;font:800 var(--fs-chapter-n)/1.1 var(--line-sans);color:var(--yy-accent);letter-spacing:.02em}
html[data-theme] .yy .yy-chapter-name{position:relative;display:block;margin:4px 0 0;font:700 14px/1.3 var(--line-sans);color:var(--yy-accent);letter-spacing:.24em}
html[data-theme] .yy .yy-chapter h2{margin:0;padding:0 24px;font:var(--line-serif-weight) var(--fs-chapter)/1.36 var(--line-serif);letter-spacing:-.03em;color:var(--yy-strong)}

/* 그림 위 흰 타원 말풍선(용용: 흰 α.9 · 지름 120~150 · 꼬리 없음 · 검은 16px 손글씨풍) */
html[data-theme] .yy .yy-bubble{width:max-content;max-width:156px;min-width:118px;min-height:118px;padding:18px 20px;white-space:normal;text-wrap:balance;background:rgba(255,255,255,.9);color:#161214;
  font:600 var(--fs-bubble)/1.5 var(--line-say);letter-spacing:-.02em;box-shadow:0 10px 28px rgba(0,0,0,.35)}
html[data-theme] .yy .yy-bubble .yy-em,html[data-theme] .yy .yy-bubble .yy-blur{color:#4a3f7a}

/* 결과 카드(용용 내용 카드: 짙은 판 + 강조색 옅은 테 + 가운데 제목) */
html[data-theme] .yy .v2-card{background:var(--yy-panel);border:1px solid var(--yy-rule);border-radius:14px;box-shadow:none;color:var(--yy-text)}
html[data-theme] .yy .yy-card.v2-card,html[data-theme] .yy .yy-natal.v2-card{margin:16px 16px 0;padding:22px 16px 18px}
html[data-theme] .yy .yy-card-title{margin:0 0 16px;font:700 var(--fs-card-title)/1.4 var(--line-sans);color:var(--yy-strong);text-align:center}
html[data-theme] .yy .yy-card-sub{font:700 15px/1.4 var(--line-sans);color:var(--yy-accent);text-align:center;margin:20px 0 10px}
html[data-theme] .yy .yy-text{padding:22px 24px 0}
html[data-theme] .yy .yy-text p{font:400 var(--fs-body)/1.75 var(--line-sans);color:var(--yy-text)}
html[data-theme] .yy .v2-card :where(p){color:var(--yy-text)}

/* 2×2 표(용용 정보 칩: 위 라벨 강조색 14 · 아래 값 15/600, 흐린 칸 섞임) */
html[data-theme] .yy :is(.lg-facts,.love-chips,.yy-chips){display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
html[data-theme] .yy :is(.lg-facts,.love-chips,.yy-chips)>div{min-width:0;padding:12px 12px 11px;border:1px solid var(--yy-rule-soft);border-radius:10px;background:var(--yy-panel-3)}
html[data-theme] .yy :is(.lg-facts,.love-chips,.yy-chips) dt{margin:0 0 4px;font:700 14px/1.35 var(--line-sans);color:var(--yy-accent)}
html[data-theme] .yy :is(.lg-facts,.love-chips,.yy-chips) dd{margin:0;font:600 15px/1.45 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy .lg-mbti{color:var(--yy-strong);font-size:18px}

/* 그림 통째 흐림 위 「결제 후 공개」 알약(용용: 짙은 알약 + 강조색 자물쇠) */
html[data-theme] .yy .yy-pill{gap:8px;padding:13px 22px;border:1px solid rgb(var(--yy-accent-rgb) / .35);background:var(--yy-panel-3);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font:800 16px/1 var(--line-sans);color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.45)}
html[data-theme] .yy .yy-pill svg{width:16px;height:16px;color:var(--yy-accent)}
html[data-theme] .yy .yy-person-art{overflow:hidden;border-radius:12px}
html[data-theme] .yy .yy-person-art .yy-slot img{border-radius:12px}

/* 목록 줄 · 날짜 칩(용용 위험 목록: 짙은 행 + 「!」 원 + 오른쪽 흐린 날짜 칩) */
html[data-theme] .yy .lg-risks li{grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:13px 12px;border:1px solid var(--yy-rule-soft);border-radius:12px;background:var(--yy-panel-3)}
html[data-theme] .yy .lg-risk-ico{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgb(var(--yy-accent-rgb) / .16);color:var(--yy-accent);font:900 14px/1 var(--line-sans)}
html[data-theme] .yy .lg-risks p{margin:0!important;color:var(--yy-text)}
html[data-theme] .yy .lg-risks small{grid-column:auto;justify-self:end;padding:4px 10px;border-radius:999px;background:rgb(var(--yy-accent-rgb) / .14);color:var(--yy-accent-soft)}
html[data-theme] .yy :is(.lg-checks,.love-days) li{border:1px solid var(--yy-rule-soft);background:var(--yy-panel-3);color:var(--yy-text)}
html[data-theme] .yy .lg-checks li::before{box-shadow:inset 0 0 0 2px var(--yy-accent)}
html[data-theme] .yy .yy-card-lead{color:var(--yy-accent)}
html[data-theme] .yy .v2-moments .v2-when b.v2-blur{display:inline-block;padding:2px 10px;border-radius:999px;background:rgb(var(--yy-accent-rgb) / .16)}

/* 잠금 줄(용용 공략 카드: 짙은 행 · 제목 공개 · 오른쪽 「결제 후 공개」 강조색) */
html[data-theme] .yy .v2-locked-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:14px 0 0}
html[data-theme] .yy .v2-locked-rows li{padding:14px;border:1px solid var(--yy-rule-soft);border-radius:12px;background:var(--yy-panel-3);color:var(--yy-strong)}
html[data-theme] .yy .v2-locked-rows li>span:first-child{font:700 15px/1.4 var(--line-sans)}
html[data-theme] .yy .v2-locked-rows .v2-lock-ico{flex:none;width:15px;height:15px;margin-left:auto;color:var(--yy-accent)}
html[data-theme] .yy .v2-locked-rows li:not(:has(.v2-blur)):has(>.v2-lock-ico:last-child)::after{content:'결제 후 공개';flex:none;margin-left:-4px;font:700 14px/1 var(--line-sans);color:var(--yy-accent)}

/* 잠금 카드(용용: 「결제 이후 볼 수 있어요」 판 + 버튼) */
html[data-theme] .yy .v2-lock-card{gap:12px;padding:22px 18px;border:1px solid rgb(var(--yy-accent-rgb) / .3);border-radius:14px;
  background:var(--yy-panel-3);color:var(--yy-text)}
html[data-theme] .yy .v2-lock-card .v2-lock-ico{width:24px;height:24px;color:var(--yy-accent)}
html[data-theme] .yy .v2-lock-card p{font:600 15px/1.6 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy .yy-lock.is-quiet{flex-direction:row;width:max-content;max-width:calc(100% - 44px);margin:16px auto 0;padding:12px 22px;border-radius:999px;
  border:1px solid rgb(var(--yy-accent-rgb) / .35);background:var(--yy-panel-3)}
html[data-theme] .yy .yy-lock.is-quiet p{font:800 15px/1.3 var(--line-sans);color:#fff}
html[data-theme] .yy .yy-lock.is-quiet .v2-lock-ico{width:16px;height:16px;filter:none}

/* 버튼(용용 자리 · 둥근 14 그대로, 색은 단색 꽉 찬 차분한 보라. 그라데이션 · 빛 없음) */
html[data-theme] .yy .btn{border:0;border-radius:14px;background:var(--yy-btn);color:var(--yy-btn-ink);font:800 16px/1.2 var(--line-sans);letter-spacing:-.01em;box-shadow:none}
html[data-theme] .yy .v2-lock-card .btn{min-height:46px;padding:12px 26px}

/* 점수 막대 · 매력 점수(용용: 큰 점수 강조색 + 라벨 · 막대 · 점수 행) */
html[data-theme] .yy .lg-bars{gap:13px;margin:6px 0 10px}
html[data-theme] .yy .lg-bars li{grid-template-columns:56px 1fr 52px;gap:12px}
html[data-theme] .yy .lg-bars span{font:700 14px/1.3 var(--line-sans);color:var(--yy-text)}
html[data-theme] .yy .lg-bars i{height:8px;border-radius:4px;background:var(--yy-accent)}
html[data-theme] .yy .lg-bars.is-locked i{filter:blur(4px);opacity:.75}
html[data-theme] .yy .lg-bars b{font:800 15px/1 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy .lg-charm-line{font:700 17px/1.55 var(--line-sans);color:var(--yy-accent);text-align:center}
html[data-theme] .yy .love-block{margin:12px 0 0;padding:14px;border-radius:12px;background:var(--yy-panel-3);border:1px solid var(--yy-rule-soft)}
html[data-theme] .yy .love-block h3{margin:0 0 4px;font:700 14px/1.3 var(--line-sans);color:var(--yy-accent)}

/* 숫자 카드(공용 부품은 그대로, 이 갈래 CSS 로만 덮음) */
html[data-theme] .yy .nc{border-color:var(--yy-rule);border-radius:14px;background:var(--yy-panel);padding:22px 16px 18px}
html[data-theme] .yy .nc .nc-title{font:700 var(--fs-card-title)/1.4 var(--line-sans);color:var(--yy-strong)}
/* 반원 게이지 → 용용 매력 점수: 큰 숫자 강조색 + 빛 */
html[data-theme] .yy .nc-gauge-track{stroke:rgba(255,255,255,.07);stroke-width:12}
html[data-theme] .yy .nc-gauge-fill{stroke:var(--yy-accent);stroke-width:12}
html[data-theme] .yy .nc-gauge-num b{font:900 52px/1 var(--line-sans);color:var(--yy-accent)}
html[data-theme] .yy .nc-gauge-num b.nc-hide{filter:blur(9px);letter-spacing:0}
html[data-theme] .yy .nc-gauge-num span{font:800 22px/1 var(--line-sans);color:var(--yy-accent)}
html[data-theme] .yy .nc-caption{color:var(--yy-sub);font-size:14px;font-weight:500}
/* 아래 행 → 라벨 · 막대 · 점수(가림이면 막대도 흐림, 길이는 값이 아님) */
html[data-theme] .yy .nc-rows{display:grid;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--yy-rule-soft)}
html[data-theme] .yy .nc-rows li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:0;border:0;font-size:14px}
html[data-theme] .yy .nc-rows li span{min-width:52px;font-weight:700;color:var(--yy-text)}
html[data-theme] .yy .nc-gauge .nc-rows li::after{content:'';grid-column:2;grid-row:1;height:8px;border-radius:4px;background:var(--yy-accent);opacity:.85}
html[data-theme] .yy .nc-gauge.is-locked .nc-rows li::after{filter:blur(4px);opacity:.6}
html[data-theme] .yy .nc-gauge .nc-rows li b{grid-column:3;font:800 15px/1 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy .nc-hide{filter:blur(5px);color:var(--yy-accent-soft)}
html[data-theme] .yy .nc-bar{background:rgb(var(--yy-accent-rgb) / .45)}
/* 달력(용용: 「12월」 강조색 머리 · 흐린 날짜 · 고른 날만 빛나는 붉은 원) */
html[data-theme] .yy .nc-cal{padding:16px 10px 12px;border:1px solid var(--yy-rule-soft);border-radius:12px;background:var(--yy-panel-3)}
html[data-theme] .yy .nc-cal-head{font:800 17px/1.3 var(--line-sans);color:var(--yy-accent)}
html[data-theme] .yy .nc-cal-grid{gap:6px 2px;counter-reset:yyd}
html[data-theme] .yy .nc-cal-wd{font-size:14px;color:var(--yy-sub)}
html[data-theme] .yy .nc-cal-wd.is-sun{color:var(--yy-accent)}
html[data-theme] .yy .nc-cal-day{min-height:40px;justify-content:center;padding:0;border-radius:50%;background:none;color:var(--yy-text)}
html[data-theme] .yy .nc-heart.is-locked .nc-cal-day,html[data-theme] .yy .nc-heart.is-locked .nc-cal-day.is-heart{background:none}
html[data-theme] .yy .nc-heart.is-locked .nc-cal-day::before{counter-increment:yyd;content:counter(yyd);font-size:14px;color:var(--yy-sub);filter:blur(4px)}
html[data-theme] .yy .nc-heart.is-locked .nc-cal-day .nc-ico{display:none}
html[data-theme] .yy :is(.nc-cal-day.is-star,.nc-heart.is-locked .nc-cal-day.is-star){width:38px;height:38px;min-height:38px;justify-self:center;
  background:var(--yy-mark);box-shadow:none;color:var(--yy-btn-ink)}
html[data-theme] .yy .nc-heart.is-locked .nc-cal-day.is-star::before{color:transparent}
html[data-theme] .yy .nc-cal-day.is-heart:not(.is-star){box-shadow:inset 0 0 0 1.5px rgb(var(--yy-accent-rgb) / .7)}
html[data-theme] .yy .nc-heart.is-locked .nc-cal-day.is-heart:not(.is-star){box-shadow:inset 0 0 0 1.5px rgb(var(--yy-accent-rgb) / .55)}
html[data-theme] .yy :is(.nc-cal-day.is-heart,.nc-cal-day.is-star) .nc-ico{display:none}
html[data-theme] .yy .nc-legend{color:var(--yy-sub)}
html[data-theme] .yy .nc-legend li::before{background:none;box-shadow:inset 0 0 0 1.5px rgb(var(--yy-accent-rgb) / .7);border-radius:50%}
html[data-theme] .yy .nc-legend li.is-star::before{background:var(--yy-mark);box-shadow:none}
html[data-theme] .yy .nc-legend b{color:var(--yy-strong)}
/* 연애 부품의 가짜 달력(lg-cal)도 같은 모양 */
html[data-theme] .yy .lg-cal{padding:16px 10px 12px;border:1px solid var(--yy-rule-soft);border-radius:12px;background:var(--yy-panel-3)}
html[data-theme] .yy .lg-cal-head li{color:var(--yy-sub)}
html[data-theme] .yy .lg-cal-head li:last-child{color:var(--yy-accent)}
html[data-theme] .yy .lg-cal.is-locked ol{filter:none}
html[data-theme] .yy .lg-cal.is-locked .lg-cal-week li span{filter:blur(4px);color:var(--yy-sub)}
html[data-theme] .yy .lg-cal-week li.is-day span{width:38px;height:38px;filter:none!important;color:transparent!important;box-shadow:none;
  background:var(--yy-mark)}
html[data-theme] .yy .lg-cal-week li.is-day span::after{display:none}
html[data-theme] .yy .lg-cal-week li{height:42px}
/* 꺾은선 · 레이더 · 인물 · 형광펜 */
html[data-theme] .yy .nc-line-area{fill:rgb(var(--yy-accent-rgb) / .16)}
html[data-theme] .yy .nc-line-path{stroke:var(--yy-accent)}
html[data-theme] .yy .nc-line-dot{background:var(--yy-panel);border-color:var(--yy-accent)}
html[data-theme] .yy .nc-line .nc-rows li{grid-template-columns:auto 1fr}
html[data-theme] .yy .nc-line .nc-rows li b{justify-self:end;color:var(--yy-strong)}
html[data-theme] .yy .nc-radar-poly{fill:rgb(var(--yy-accent-rgb) / .22);stroke:var(--yy-accent)}
html[data-theme] .yy .nc-radar-label b{color:var(--yy-accent)}
html[data-theme] .yy .nc-radar .nc-rows li{grid-template-columns:auto 1fr}
html[data-theme] .yy .nc-radar .nc-rows li b{justify-self:end}
html[data-theme] .yy .nc-person-rows dt{color:var(--yy-accent);font-weight:700}
html[data-theme] .yy .nc-person-rows dd{color:var(--yy-strong)}
html[data-theme] .yy .nc-mark-text{color:var(--yy-strong)}

/* 리포트 미리보기: 장 표시 「리포트」 → 큰 제목 → 폰 목업(흐린 화면) + 알약 */

/* 상세 목차(용용: 큰 제목 두 줄 → 카드 폭 그림 3:4 → CHAPTER 0N · 장 제목 21 · 「풀이 n」 줄) */
.yy-toc{margin-top:72px}
html[data-theme] .yy .yy-toc-head{margin:0 24px 22px;font:var(--line-serif-weight) var(--fs-chapter)/1.32 var(--line-serif);letter-spacing:-.03em;color:var(--yy-strong);text-align:center}
.yy-toc-head span{display:block}
html[data-theme] .yy .yy-toc-card.v2-card{margin:0 16px 16px;padding:0;overflow:hidden}
html[data-theme] .yy .yy-toc-card .yy-slot{width:100%;margin:0}
html[data-theme] .yy .yy-toc-card .yy-slot img{border-radius:0}
html[data-theme] .yy .yy-toc-card .yy-slot::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:30%;background:linear-gradient(transparent,var(--yy-panel));pointer-events:none}
html[data-theme] .yy .yy-toc-card .yy-slot-box{border-radius:0}
.yy-toc-body{padding:16px 18px 10px}
html[data-theme] .yy .yy-toc-n{margin:0;font:800 14px/1.3 var(--line-sans);letter-spacing:.18em;color:var(--yy-accent)}
html[data-theme] .yy .yy-toc-card h3{margin:6px 0 10px;font:var(--line-serif-weight) min(21px,5.4vw)/1.35 var(--line-serif);letter-spacing:-.02em;color:var(--yy-strong)}
html[data-theme] .yy .yy-toc-card li{grid-template-columns:auto 1fr;gap:12px;padding:12px 0;font:500 15px/1.5 var(--line-sans);color:var(--yy-text);border-top:1px solid rgb(var(--yy-accent-rgb) / .14)}
html[data-theme] .yy .yy-toc-card li small{font:800 14px/1.5 var(--line-sans);color:var(--yy-accent)}

/* 결제 묶음 카드(용용 결제 시트: 짙은 판 · 줄마다 테 · 고른 줄은 강조색 테 · 오른쪽 취소선 / -00% / 금액) */
html[data-theme] .yy .offer-card.is-modal{background:var(--yy-panel);border:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.35)}
html[data-theme] .yy .offer-card .offer-grip{background:rgba(255,255,255,.28)}
html[data-theme] .yy .offer-row{margin-top:10px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);box-shadow:none}
html[data-theme] .yy .offer-row.is-on{border-color:var(--yy-accent);background:rgb(var(--yy-accent-rgb) / .07);box-shadow:0 0 0 1px var(--yy-accent)}
html[data-theme] .yy .offer-main b{font:700 15px/1.4 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy :is(.offer-badge,.offer-badge.is-hot){padding:1px 8px;border:1px solid rgb(var(--yy-accent-rgb) / .55);border-radius:6px;background:rgb(var(--yy-accent-rgb) / .12);color:var(--yy-accent-soft)}
html[data-theme] .yy .offer-price s{font-size:14px;color:rgba(244,239,230,.45)}
html[data-theme] .yy .offer-rate{font-style:normal;font-weight:800;color:var(--yy-accent)}
html[data-theme] .yy .offer-price b{font:800 17px/1.2 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy .offer-extra{border-color:rgb(var(--yy-accent-rgb) / .25);background:rgb(var(--yy-accent-rgb) / .06)}
html[data-theme] .yy .offer-extra-tag{background:rgb(var(--yy-accent-rgb) / .16);color:var(--yy-accent-soft)}
html[data-theme] .yy .offer-extra-off{color:var(--yy-accent)}
html[data-theme] .yy .offer-got-list li>svg{color:var(--yy-accent)}
html[data-theme] .yy .offer-foot .btn{min-height:52px}
html[data-theme] .yy .offer-timer small{color:var(--yy-sub)}
html[data-theme] .yy .offer-clock{color:var(--yy-accent)}

/* 하단 고정 바(용용 자리, 바탕은 단색 + 위 가는 선 · 버튼 위 가운데 한 줄 「… 00:15:53 …」 · 꽉 찬 붉은 버튼) */
html[data-theme] .yy .v2-sticky{padding:14px 14px calc(12px + env(safe-area-inset-bottom));background:var(--yy-bg);border-top:1px solid var(--yy-rule-soft)}
html[data-theme] .yy .yy-sticky .btn{min-height:54px;border-radius:14px}
.yy-clockline{margin:0;text-align:center;font:600 14px/1.3 var(--line-sans);color:var(--yy-text)}
html[data-theme] .yy .yy-clockline .offer-timer{display:inline;margin:0}
html[data-theme] .yy .yy-clockline .offer-timer.is-over{display:none}
html[data-theme] .yy .yy-clockline .offer-clock{font:800 16px/1 var(--line-sans);font-variant-numeric:tabular-nums;color:var(--yy-accent);letter-spacing:.02em}
/* 확인 알약(용용: 짙은 알약 · 위아래로 살짝 뜀) */
html[data-theme] .yy .yy-seen{padding:9px 16px;border-radius:14px;background:var(--yy-panel-3);border:1px solid rgb(var(--yy-accent-rgb) / .22);box-shadow:0 6px 18px rgba(0,0,0,.3);color:var(--yy-strong);animation:yyBounce 1.8s ease-in-out infinite}
html[data-theme] .yy .yy-seen b{color:var(--yy-accent)}
@keyframes yyBounce{0%,100%{transform:none}50%{transform:translateY(-5px)}}
/* 구매 알림 */
html[data-theme] .yy .yy-toast-item{background:var(--yy-panel-3);border:1px solid rgb(var(--yy-accent-rgb) / .22);color:var(--yy-strong)}
/* 위 띠 타이머(용용 궁합: 짙은 띠 + 강조색 시간) */
html[data-theme] .yy .yy-topband{background:rgb(23 21 28 / .94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgb(var(--yy-accent-rgb) / .22);color:#fff}
html[data-theme] .yy .yy-topband .offer-clock{color:var(--yy-accent)}

/* 붙잡기 팝업(용용: 짙은 카드 · 위 그림 꽉 · 왼쪽 정렬 「할인 받은 [금액 칩] 두고 나갈 거야?」 · 단색 버튼 · 회색 나갈래요) */
html[data-theme] .yy .yy-exit{background:rgba(0,0,0,.72)}
.yy-exit-card{width:min(100%,326px);overflow:hidden;border-radius:18px;background:var(--yy-panel);box-shadow:0 20px 50px rgba(0,0,0,.45);text-align:left}
html[data-theme] .yy .yy-exit .yy-slot{width:100%;margin:0}
html[data-theme] .yy .yy-exit .yy-slot img{border-radius:0}
html[data-theme] .yy .yy-exit .yy-slot::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:40%;background:linear-gradient(transparent,var(--yy-panel));pointer-events:none}
.yy-exit-body{padding:4px 18px 14px}
html[data-theme] .yy .yy-exit-q{margin:0;font:800 20px/1.45 var(--line-sans);letter-spacing:-.02em;color:#fff}
html[data-theme] .yy .yy-exit-won{display:inline-block;padding:0 7px;border-radius:6px;background:rgb(var(--yy-accent-rgb) / .22);color:var(--yy-accent-soft);font-weight:800}
html[data-theme] .yy .yy-exit-left{justify-content:flex-start;margin:8px 0 16px;font:500 14px/1.4 var(--line-sans);color:rgba(255,255,255,.62)}
html[data-theme] .yy .yy-exit-left .offer-clock{font:700 14px/1 var(--line-sans);color:rgba(255,255,255,.8)}
html[data-theme] .yy .yy-exit .btn{min-height:52px;border-radius:12px}
html[data-theme] .yy .yy-exit-leave{color:rgba(255,255,255,.55);text-align:center}

/* 인트로 부품도 같은 판(예언 · 약속 카드: 용용 #200A0E · 테 강조색 α.24) */
html[data-theme] .yy .yy-prophecy.v2-card{background:var(--yy-panel);border-color:var(--yy-rule)}
html[data-theme] .yy .yy-prophecy p{color:var(--yy-text);font-size:15px}
html[data-theme] .yy .yy-promise li.v2-card{background:var(--yy-panel-2);border-color:var(--yy-rule-soft)}
html[data-theme] .yy .yy-promise b{font-weight:700;color:var(--yy-accent)}
html[data-theme] .yy .yy-promise p{color:var(--yy-sub)}
html[data-theme] .yy .yy-dialogue{color:var(--yy-strong)}
html[data-theme] .yy .yy-slot-box{background:var(--yy-panel-3);border-color:rgb(var(--yy-accent-rgb) / .4)}
html[data-theme] .yy .yy-slot-tag{color:var(--yy-sub)}
@media (prefers-reduced-motion:reduce){html[data-theme] .yy .yy-seen{animation:none}}
/* 결제 시트 「담긴 것」 숫자 세 칸 */
html[data-theme] .yy .offer-got .pv-gap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 12px}
html[data-theme] .yy .offer-got .pv-gap-stats>div{display:flex;flex-direction:column-reverse;align-items:center;gap:2px;padding:9px 4px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.04);text-align:center}
html[data-theme] .yy .offer-got .pv-gap-stats dt{font-size:14px;color:var(--yy-sub)}
html[data-theme] .yy .offer-got .pv-gap-stats dd{margin:0;font:800 16px/1.3 var(--line-sans);color:var(--yy-strong)}
/* 기존 결제 전 부품 안의 회색 판(다크 테마 #161616~#1e1e1e)을 갈래 판 색으로 */
html[data-theme] .yy :is(.pv-toc-card,.pv-lcard,.nym-person,.pv-gap-stats>div,.v2-graph,.gc-season-pic,.rg-rival-img){background:var(--yy-panel-3);border-color:var(--yy-rule-soft)}
html[data-theme] .yy :is(.nym-bar,.gc-bar,.v2-el-bar){background-color:rgba(255,255,255,.08)}
html[data-theme] .yy .pv-toc-no{color:var(--yy-accent);font-weight:800;letter-spacing:.06em}
html[data-theme] .yy .pv-toc-q .v2-lock-ico{color:var(--yy-accent)}
html[data-theme] .yy .pv-gap-stats dd{color:var(--yy-strong)}

/* ══ 11/13 세부 장식(사장님 「별 모양 · 숫자 카드 겉모양 · 빈 하트 5개 중 채워진 UI 같은 것도」). 그림 복사 없이 CSS · 인라인 SVG ══ */
/* 카드 겉모양: 위쪽이 살짝 밝은 판 + 강조색 옅은 테 + 아래 그림자(용용 결과 카드) */
html[data-theme] .yy :is(.v2-card,.nc){background:var(--yy-panel);box-shadow:none}
/* 카드 안 구분선: 가운데가 진한 강조색 실선(용용 점수 카드 · 목차 카드) */
.yy-rule-line,html[data-theme] .yy .yy-score-rows{border-top:1px solid var(--yy-rule)}
/* 장 장식 글자: 상품마다(용용: 연애 運 · 궁합 하트 · 재회 마름모) */
.yy[data-product="compatibility"]{--yy-glyph:'♥'}
.yy[data-product="reunion"]{--yy-glyph:'◆'}
.yy[data-product="compatibility"] .yy-chapter-glyph::before{font-family:var(--line-sans);font-size:44px;top:-4px}
.yy[data-product="reunion"] .yy-chapter-glyph::before{font-family:var(--line-sans);font-size:16px;top:-10px;color:var(--yy-accent);opacity:.9}

/* 점수 카드(용용 궁합 「82점」): 큰 점수 강조색(점은 작게) + 하트 5개 + 구분선 + 행(이름 · 막대 · 점수 · 판정) */
.yy-score-num{display:flex;justify-content:center;align-items:baseline;gap:2px;margin:6px 0 0}
html[data-theme] .yy .yy-score-num b{font:900 min(56px,14vw)/1 var(--line-sans);letter-spacing:-.03em;color:var(--yy-accent)}
html[data-theme] .yy .yy-score-num b.nc-hide{filter:blur(10px)}
html[data-theme] .yy .yy-score-num span{font:800 24px/1 var(--line-sans);color:var(--yy-accent)}
.yy-hearts{display:flex;justify-content:center;gap:6px;margin:12px 0 2px}
.yy-hearts .yy-ic{width:24px;height:24px;color:rgb(var(--yy-accent-rgb) / .55)}
.yy-hearts .yy-ic.is-on{color:var(--yy-accent)}
.yy-hearts.is-locked{filter:blur(2px);opacity:.7}
html[data-theme] .yy .yy-score-rows{list-style:none;display:grid;gap:13px;margin:18px 0 0;padding:18px 0 0}
html[data-theme] .yy .yy-score-rows li{display:grid;grid-template-columns:52px 1fr auto 40px;align-items:center;gap:10px;font-size:14px}
html[data-theme] .yy .yy-score-rows span{font:700 14px/1.3 var(--line-sans);color:var(--yy-text)}
.yy-bar{display:block;height:6px;border-radius:3px;position:relative;overflow:hidden;background:rgba(255,255,255,.08)}
.yy-bar::before{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 1%);border-radius:inherit;background:var(--yy-accent)}
.yy-bar.is-locked{background:rgb(var(--yy-accent-rgb) / .4);filter:blur(3px)}
.yy-bar.is-locked::before{display:none}
html[data-theme] .yy .yy-score-rows b{font:800 15px/1 var(--line-sans);color:var(--yy-strong);text-align:right}
.yy-verdict{justify-self:end;font:600 14px/1 var(--line-sans);color:var(--yy-sub)}
.yy-verdict.is-good{color:var(--yy-accent-soft)}
.yy-verdict.is-care{color:var(--yy-accent)}
html[data-theme] .yy .yy-score .nc-caption{margin-top:10px;color:var(--yy-text);font:700 16px/1.5 var(--line-sans)}

/* 리뷰(용용: 「리뷰」 제목 · 별 하나 + 평균 · ‹ 1 / N › 둥근 단추 · 카드 = 동그라미 얼굴 · 가린 이름 · 오른쪽 별 + 숫자 · 날짜) */
html[data-theme] .yy .yy-reviews-head{margin:0 22px 6px;font:var(--line-serif-weight) min(24px,6vw)/1.3 var(--line-serif);color:var(--yy-strong)}
.yy-reviews-sum{display:flex;justify-content:center;align-items:center;gap:6px;margin:0 0 14px;font:600 14px/1 var(--line-sans);color:var(--yy-sub)}
.yy-reviews-sum .yy-ic,.yy-rv-rate .yy-ic{width:18px;height:18px;color:var(--yy-accent)}
html[data-theme] .yy .yy-reviews-sum b{font:800 16px/1 var(--line-sans);color:var(--yy-strong)}
.yy-rv-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin:0 0 14px}
.yy-rv-nav[hidden]{display:none}
.yy-rv-nav button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);cursor:pointer}
.yy-rv-nav .yy-ic{width:18px;height:18px;color:var(--yy-strong)}
.yy-rv-at{min-width:52px;text-align:center;font:600 14px/1 var(--line-sans);color:var(--yy-sub)}
.yy-rv-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 6px;scrollbar-width:none}
.yy-rv-row::-webkit-scrollbar{display:none}
.yy-rv{flex:0 0 calc(100% - 32px);scroll-snap-align:center;padding:18px 16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.06);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.yy-rv-top{display:flex;align-items:center;gap:12px}
.yy-rv-av{flex:none;width:46px;height:46px;border-radius:50%;background-size:cover;background-position:50% 20%;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.yy-rv-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html[data-theme] .yy .yy-rv-who b{font:700 15px/1.2 var(--line-sans);color:var(--yy-strong)}
.yy-rv-who small{font:500 14px/1.2 var(--line-sans);color:var(--yy-sub)}
.yy-rv-rate{display:flex;align-items:center;gap:4px;margin:0;align-self:flex-start}
html[data-theme] .yy .yy-rv-rate b{font:800 16px/1 var(--line-sans);color:var(--yy-strong)}
.yy-rv-body{margin:14px 0 0;font:500 15px/1.6 var(--line-sans);color:var(--yy-text)}

/* 번호 원 · 태그(용용: 위험 목록 「!」 원, 「결제 후 공개」 글자 태그, 판정 태그) — 번호 카드에도 같은 원 */
html[data-theme] .yy .yy-promise b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgb(var(--yy-accent-rgb) / .45);background:rgb(var(--yy-accent-rgb) / .1);font:700 15px/1 var(--line-serif);color:var(--yy-accent)}
html[data-theme] .yy .yy-prophecy b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:rgb(var(--yy-accent-rgb) / .14);font:900 14px/1 var(--line-sans);color:var(--yy-accent)}
html[data-theme] .yy .yy-prophecy li{align-items:center}
/* 목차 카드 머리: CHAPTER 번호 오른쪽에 작은 하트(용용 재회 행동 수칙 카드 머리) */
html[data-theme] .yy .yy-toc-n{display:flex;align-items:center;justify-content:space-between}
html[data-theme] .yy .yy-toc-n::after{content:'';width:12px;height:12px;background:var(--yy-accent);opacity:.8;-webkit-mask:url("icons/ph-heart-fill.9500800f6711.svg") center/contain no-repeat;mask:url("icons/ph-heart-fill.9500800f6711.svg") center/contain no-repeat}
html[data-theme] .yy .yy-toc-body{border-top:1px solid var(--yy-rule)}

/* ══ 11/13 기성 아이콘(사장님 「svg는 너가 만들지 말고 이쁜 거 가져와서」). Phosphor · Tabler(MIT), 출처는 icons/LICENSES.md ══ */
.yy-ic{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.125em}
.yy-down .yy-ic{width:18px;height:18px}
html[data-theme] .yy .lg-risk-ico{width:26px;height:26px;border-radius:0;background:none;color:var(--yy-accent)}
html[data-theme] .yy .lg-risk-ico .yy-ic{width:26px;height:26px}
/* 월계수: Tabler 화환 하나를 왼쪽 반 · 오른쪽 반으로 */
.yy-laurel{display:block;flex:none;width:36px;height:72px;transform:none;background:currentColor;
  -webkit-mask:url("icons/tb-laurel-wreath-filled.a07bddba3551.svg") 0 50%/72px 72px no-repeat;mask:url("icons/tb-laurel-wreath-filled.a07bddba3551.svg") 0 50%/72px 72px no-repeat}
.yy-laurel.is-right{transform:none;-webkit-mask-position:100% 50%;mask-position:100% 50%}
/* 자물쇠: 공용 자물쇠 부품(partials/lock_icon.html)은 그대로 두고 이 갈래에서만 Phosphor lock-key 로 덮음 */
html[data-theme] .yy svg.v2-lock-ico>*{display:none}
html[data-theme] .yy svg.v2-lock-ico{background:currentColor;-webkit-mask:url("icons/ph-lock-key-fill.912d8a1756aa.svg") center/contain no-repeat;mask:url("icons/ph-lock-key-fill.912d8a1756aa.svg") center/contain no-repeat}
/* 달력: 제목 앞 달력 아이콘, 가린 「그 날」 원 안에는 하트(날짜 숫자는 HTML 에 없음) */
html[data-theme] .yy :is(.nc-heart .nc-title,#yy-day-title)::before{content:'';display:inline-block;width:20px;height:20px;margin:0 6px 0 0;vertical-align:-3px;background:var(--yy-accent);
  -webkit-mask:url("icons/ph-calendar-heart-fill.38c1cd71db91.svg") center/contain no-repeat;mask:url("icons/ph-calendar-heart-fill.38c1cd71db91.svg") center/contain no-repeat}
html[data-theme] .yy .nc-heart.is-locked .nc-cal-day.is-star,html[data-theme] .yy .lg-cal-week li.is-day span{position:relative}
html[data-theme] .yy .nc-heart.is-locked .nc-cal-day.is-star::after,html[data-theme] .yy .lg-cal-week li.is-day span::before{content:'';position:absolute;inset:0;margin:auto;width:16px;height:16px;background:var(--yy-btn-ink);
  -webkit-mask:url("icons/ph-heart-fill.9500800f6711.svg") center/contain no-repeat;mask:url("icons/ph-heart-fill.9500800f6711.svg") center/contain no-repeat}
/* 장 장식: 궁합은 하트, 재회는 마름모(Phosphor) */
.yy[data-product="compatibility"] .yy-chapter-glyph::before,.yy[data-product="reunion"] .yy-chapter-glyph::before{content:'';width:40px;height:40px;top:-2px;background:rgb(var(--yy-accent-rgb) / .2);
  -webkit-mask:url("icons/ph-heart-fill.9500800f6711.svg") center/contain no-repeat;mask:url("icons/ph-heart-fill.9500800f6711.svg") center/contain no-repeat}
.yy[data-product="reunion"] .yy-chapter-glyph::before{width:16px;height:16px;top:-10px;background:var(--yy-accent);-webkit-mask-image:url("icons/ph-diamond-fill.d5fb12c34023.svg");mask-image:url("icons/ph-diamond-fill.d5fb12c34023.svg")}

/* ══ 11/13 결제 전 번호 목록 가림(사장님): 앞 3개 공개 · 4번째부터 가림, 3개 이하는 마지막 1개만. 가린 줄은 번호 + 흐린 막대(진짜 문장 없음) ══ */
.yy-hidbar{display:block;flex:1;min-width:0;height:12px;border-radius:6px;background:rgb(var(--yy-accent-rgb) / .38);filter:blur(4px);user-select:none}
html[data-theme] .yy .yy-prophecy li.yy-hid{align-items:center;padding:15px 0}
html[data-theme] .yy .lg-risks li.yy-hid .yy-hidbar{grid-column:2;width:88%}
html[data-theme] .yy .v2-moments li.yy-hid{display:flex;align-items:center;gap:12px}
html[data-theme] .yy .v2-moments li.yy-hid .yy-hidbar{max-width:78%;height:14px}

/* ══ 11/13 리포트 미리보기(사장님 「실제 UI로 보여 줘야」 · 「실제 리포트라는데 결제 후 공개하면 어떡해」)
   폰 안은 견본 인물(김지수)의 실제 결과 화면 캡처 4장이 천천히 위로 흐르며 넘어감. 가림 · 자물쇠 없음, 손님 본인 값 없음 ══ */
.yy-report{padding:64px 0 0;text-align:center}
html[data-theme] .yy .yy-report-head{margin:0 0 26px;padding:0 24px;font:var(--line-serif-weight) var(--fs-chapter)/1.36 var(--line-serif);letter-spacing:-.03em;color:var(--yy-strong)}
/* 기기 틀: 단색 금속 테 + 검은 베젤 + 옆 버튼 + 다이내믹 아일랜드(그라데이션 없음) */
.yy-phone{position:relative;width:min(254px,66%);margin:0 auto;padding:4px;border-radius:44px;background:#3a3742;
  box-shadow:inset 0 0 0 1px #57535f,0 16px 36px rgba(0,0,0,.38)}
.yy-phone::before,.yy-phone::after{content:'';position:absolute;width:3px;border-radius:2px;background:#3a3742}
.yy-phone::before{left:-3px;top:20%;height:9%;box-shadow:0 calc(254px * .17) 0 #3a3742}
.yy-phone::after{right:-3px;top:27%;height:14%}
.yy-phone-bezel{position:relative;padding:7px;border-radius:40px;background:#0c0c0e}
.yy-phone-screen{position:relative;overflow:hidden;aspect-ratio:390 / 845;border-radius:33px;background:var(--yy-bg)}
.yy-phone-screen::after{content:'';position:absolute;z-index:2;top:9px;left:50%;width:31%;height:21px;transform:translateX(-50%);border-radius:12px;background:#000}
.yy-phone-shot{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;animation:yyShot 16s linear infinite backwards;animation-delay:calc(var(--i) * 4s)}
@keyframes yyShot{0%{opacity:0;transform:translateY(0)}3%{opacity:1}25%{opacity:1}28%{opacity:0;transform:translateY(-23%)}100%{opacity:0;transform:translateY(-23%)}}
@media (prefers-reduced-motion:reduce){.yy-phone-shot{animation:none}.yy-phone-shot:first-child{opacity:1}}
html[data-theme] .yy .yy-report-note{margin:14px 0 0;font:600 14px/1.4 var(--line-sans);color:var(--yy-sub)}

/* ══ 11/13 공용 부품의 원색(노랑 #FFCF40 · 원색 빨강 · 오행 원색 등)을 이 갈래 안에서만 차분한 색으로(공용 CSS 파일은 그대로).
   scratchpad calmgen.py 로 공용 CSS 를 훑어 같은 선택자를 .yy[data-line] 아래로 덮음. 다시 만들 땐 같은 스크립트로 ══ */
/* 색 토큰을 다시 정의하는 공용 상자(.v2 · .result-reading[data-guide], .yy 자신도 이 클래스)에도 갈래 색을 다시 걸어 둠 */
html[data-theme] .yy.yy.yy[data-line],html[data-theme] .yy[data-line] :is(.v2,.result-reading,.result-reading[data-guide]){--reading-accent:var(--yy-accent);--reading-wash:var(--yy-panel-2);--c-love:#c49aab;--c-money:#c2ad86;--c-work:#8ea2c2;--c-health:#93b09d;--v2-line:var(--yy-rule-soft);--v2-soft:var(--yy-panel-2);--v2-sub:var(--yy-sub);--v2-good:#9fbfa9;--v2-warn:#cfa79c}
html[data-theme] .yy[data-line] .compat-side-row.is-head>span{color:var(--c-love,var(--c-love))}
html[data-theme] .yy[data-line] .compat-bar i{background:linear-gradient(90deg,var(--c-love,var(--c-love)) calc(var(--v)*1%),var(--v2-soft,#f2eee8) 0)}
html[data-theme] .yy[data-line] .compat-legend span::before{background:var(--c-love,var(--c-love))}
html[data-theme] .yy[data-line] .compat-month-list li.is-current{background:color-mix(in srgb,var(--c-love,var(--c-love)) 7%,#fff)}
html[data-theme] .yy[data-line] .compat-year-picks small{color:var(--c-love,var(--c-love))}
html[data-theme] .yy[data-line] .compat .love-block.is-current{background:color-mix(in srgb,var(--c-love,var(--c-love)) 6%,#fff)}
html[data-theme] .yy[data-line] .compat-month-list li.is-current,html[data-theme] .yy[data-line] .compat .love-block.is-current{background:color-mix(in srgb,var(--c-love,var(--c-love)) 16%,transparent)}
html[data-theme] .yy[data-line] .compat-month-list li.is-both_good .v2-tag{color:#9fbfa9}
html[data-theme] .yy[data-line] .compat-month-list li.is-both_low .v2-tag{color:#cfa79c}
html[data-theme] .yy[data-line] .compat-bar i{background:linear-gradient(90deg,var(--c-love,var(--c-love)) calc(var(--v)*1%),#2a2a30 0)}
html[data-theme] .yy[data-line] .compat-bar i.is-you{background:linear-gradient(90deg,var(--c-work) calc(var(--v)*1%),#2a2a30 0)}
html[data-theme] .yy[data-line] .gc-strip li.is-caution,html[data-theme] .yy[data-line] .gc-strip li.is-hold{background:rgb(207 167 156 / .22);color:#cfa79c}
html[data-theme] .yy[data-line] .gc-legend .is-hold::before{background:rgb(207 167 156 / .22)}
html[data-theme] .yy[data-line] .gc-box.is-good small,html[data-theme] .yy[data-line] .gc-group.is-good>h3{color:#9fbfa9}
html[data-theme] .yy[data-line] .gc-box.is-warn small,html[data-theme] .yy[data-line] .gc-group.is-warn>h3,html[data-theme] .yy[data-line] .gc-kicker{color:#cfa79c}
html[data-theme] .yy[data-line] .gc{--gc-me:var(--c-love,var(--c-love))}
html[data-theme] .yy[data-line] .gc{--gc-you:var(--c-work)}
html[data-theme] .yy[data-line] .gc-items li.is-good .gc-state{color:#9fbfa9}
html[data-theme] .yy[data-line] .gc-items li.is-caution .gc-state{color:#cfa79c}
html[data-theme] .yy[data-line] .lf-curve circle.is-peak,html[data-theme] .yy[data-line] .lf-dot.is-best{fill:var(--yy-accent-soft)}
html[data-theme] .yy[data-line] .lf-axis-name.is-best,html[data-theme] .yy[data-line] .lf-curve-labels .is-peak b{fill:var(--yy-accent-soft);color:var(--yy-accent-soft)}
html[data-theme] .yy[data-line] .lf-events b{color:#9fbfa9}
html[data-theme] .yy[data-line] .lf-events .is-caution b,html[data-theme] .yy[data-line] .lf-box.is-warn>h3,html[data-theme] .yy[data-line] .lf-sal li.is-warn .lf-sal-head b,html[data-theme] .yy[data-line] .lf-chips.is-sal li.is-warn{color:#cfa79c}
html[data-theme] .yy[data-line] .lf-box.is-good>h3,html[data-theme] .yy[data-line] .lf-sal li.is-good .lf-sal-head b,html[data-theme] .yy[data-line] .lf-chips.is-sal li.is-good{color:#9fbfa9}
html[data-theme] .yy[data-line] .lg-risk-ico{color:#cfa79c}
html[data-theme] .yy[data-line] .lg-risks small,html[data-theme] .yy[data-line] .lg-warn-month h3{color:#cfa79c}
html[data-theme] .yy[data-line] .lg-proof.is-warn .lg-proof-rel{fill:#cfa79c}
html[data-theme] .yy[data-line] .nym-grade,html[data-theme] .yy[data-line] .nym-fields,html[data-theme] .yy[data-line] .nym-kw,html[data-theme] .yy[data-line] .nym-people,html[data-theme] .yy[data-line] .nym-graph,html[data-theme] .yy[data-line] .nym-table,html[data-theme] .yy[data-line] .nym-pair,html[data-theme] .yy[data-line] .nym-places{--nym-gold:var(--yy-accent);--nym-good:#9fbfa9;--nym-warn:#cfa79c}
html[data-theme] .yy[data-line] .rg-cell[data-el="화"] rect{stroke:#c49488}
html[data-theme] .yy[data-line] .gs-bujeok-seal{color:#a98a87}
html[data-theme] .yy[data-line] .gs-graph-band{fill:rgb(196 148 136 / .12)}
html[data-theme] .yy[data-line] .gs-graph circle.is-caution,html[data-theme] .yy[data-line] .gs-graph-days .is-caution b{fill:#cfa79c;color:#cfa79c}
html[data-theme] .yy[data-line] .gs-box.is-warn small,html[data-theme] .yy[data-line] .gs-rows .is-warn small{color:#cfa79c}
html[data-theme] .yy[data-line] .gs-box.is-good small{color:#9fbfa9}
html[data-theme] .yy[data-line] .ny-pen{stroke:var(--yy-accent)}
html[data-theme] .yy[data-line] .ny-num{fill:var(--yy-accent)}
html[data-theme] .yy[data-line] .story-intro .intro-cta.ny-cta{background:var(--yy-accent)}
html[data-theme] .yy[data-line] .is-picked .pk-item[aria-checked=true]{background:rgb(var(--yy-accent-rgb) / .12);color:var(--yy-accent)}
html[data-theme] .yy[data-line]{--pf-value:var(--yy-accent)}
html[data-theme] .yy[data-line] .pv-ny-graph .pv-pen{stroke:var(--yy-accent)}
html[data-theme] .yy[data-line] .pv-ny-graph .pv-memo .pv-memo-what{fill:var(--yy-accent)}
html[data-theme] .yy[data-line] .pv-week-tone.is-good{color:#9fbfa9}
html[data-theme] .yy[data-line] .pv-week-tone.is-caution{color:#cfa79c}
html[data-theme] .yy[data-line] .pv-key-head b{color:#9fbfa9}
html[data-theme] .yy[data-line] .pv-key-open.is-caution .pv-key-head b{color:#cfa79c}
html[data-theme] .yy[data-line] .v2-moments li[data-domain="연애"] .v2-dot{background:var(--c-love)}
html[data-theme] .yy[data-line] .bundle-glance-list.is-good li span b{color:#9fbfa9}
html[data-theme] .yy[data-line] .bundle-glance-list.is-warn li span b{color:#cfa79c}
html[data-theme] .yy[data-line] .v2-graph-focus{stroke:var(--c-love)}
html[data-theme] .yy[data-line] .v2-legend.is-focus::before{background:var(--c-love)}
html[data-theme] .yy[data-line] .v2{--c-money:var(--c-money);--c-love:var(--c-love);--c-work:var(--c-work);--c-health:var(--c-health)}
html[data-theme] .yy[data-line] .offer-coupon-tag{background:var(--yy-accent)}
html[data-theme] .yy[data-line]{--el-1:#8fae98;--el-2:#c49488;--el-3:#c2ad86;--el-5:#8ea2c2}
html[data-theme] .yy[data-line] .stars{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .today-gate-k{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .locked-ico{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .q-bubble small{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .login-moon{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-dash-head small{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-grade-head small{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-grade-name{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-grade-top{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-grade-line{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-grade-ladder li{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-grade-ladder b{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-grade-parts li{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-grade-parts b small{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-grade-note{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-invest-style b:first-child{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-health-dates em{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-flow-bars li.is-best span,html[data-theme] .yy[data-line] .v2-flow-bars li.is-best b{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .offer-badge{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .pay-login-pick b{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .pay-guest-note b,html[data-theme] .yy[data-line] .pay-guest-sure{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .offer-coupon-count{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .star-pick input:checked~label,html[data-theme] .yy[data-line] .star-pick label:hover,html[data-theme] .yy[data-line] .star-pick label:hover~label{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .rv-stars{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .result-reading{--reading-accent:var(--yy-accent)}
html[data-theme] .yy[data-line] .result-reading[data-guide="doyun"]{--reading-accent:var(--yy-accent)}
html[data-theme] .yy[data-line] .result-reading[data-guide="seorin"]{--reading-accent:var(--yy-accent)}
html[data-theme] .yy[data-line] .result-reading[data-guide="jiwoon"]{--reading-accent:var(--yy-accent)}
html[data-theme] .yy[data-line] .result-reading[data-guide="haeon"]{--reading-accent:var(--yy-accent)}
html[data-theme] .yy[data-line] .toc-heading>span{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .toc-label small{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .toc-arrow{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .story-kicker{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .story-action small{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .story-contents .chapter-index{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .story-contents .chapter-lock{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .lantern-stop small{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .fan-access summary{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .fan-slot-labels{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .reading-guide-name{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .reading-chapters[data-guide="heukwol"] .reading-chapter-emblem{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .reading-chapters[data-guide="seorin"] .reading-chapter-emblem{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .reading-chapters[data-guide="haeon"] .reading-chapter-emblem{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .story-drawn figcaption small{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .reveal-object-hint{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .story-lanterns-report small{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .card-position{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .is-flags .card-position{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .story-intro .vn-who{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .offer-coupons{background:rgb(var(--yy-accent-rgb) / .1)}
html[data-theme] .yy[data-line] .seg button[aria-pressed="true"]{background:rgb(var(--yy-accent-rgb) / .12);border-color:var(--yy-accent);color:var(--yy-accent)}
html[data-theme] .yy[data-line] .lib-go{background:var(--yy-accent)}
html[data-theme] .yy[data-line] .btn{background:var(--yy-accent)}
html[data-theme] .yy[data-line] .search-chips .chip.is-on{background:var(--yy-accent);border-color:var(--yy-accent)}
html[data-theme] .yy[data-line] .fld input:focus,html[data-theme] .yy[data-line] .fld select:focus,html[data-theme] .yy[data-line] .form input:focus,html[data-theme] .yy[data-line] .form textarea:focus{border-color:var(--yy-accent)}
html[data-theme] .yy[data-line] .q-progress i{background:var(--yy-accent)}
html[data-theme] .yy[data-line] .check input[type=checkbox]:checked{background:var(--yy-accent);border-color:var(--yy-accent)}
html[data-theme] .yy[data-line] .check:has(input:checked){border-color:var(--yy-accent)}
html[data-theme] .yy[data-line] .cat-pick input:checked+span{background:rgb(var(--yy-accent-rgb) / .12);border-color:var(--yy-accent);color:var(--yy-accent)}
html[data-theme] .yy[data-line] .ticket-state{background:rgb(var(--yy-accent-rgb) / .12);color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-years em,html[data-theme] .yy[data-line] .v2-month-head em.is-warn,html[data-theme] .yy[data-line] .v2-tag.is-warn{color:#cfa79c}
html[data-theme] .yy[data-line] .v2{--v2-good:#9fbfa9;--v2-warn:#cfa79c}
html[data-theme] .yy[data-line] .v2-badge.is-good{color:#9fbfa9}
html[data-theme] .yy[data-line] .v2-badge.is-caution{color:#cfa79c}
html[data-theme] .yy[data-line] .v2-days .is-good em{color:#9fbfa9}
html[data-theme] .yy[data-line] .v2-days .is-caution em{color:#cfa79c}
html[data-theme] .yy[data-line] .v2-tag.is-good{color:#9fbfa9}
html[data-theme] .yy[data-line] .guest-order-go{color:var(--yy-accent)}
html[data-theme] .yy[data-line] .v2-dash{background-image:none}
html[data-theme] .yy[data-line] .report-section{background-image:none}
/* 버튼은 공용 노랑 버튼 규칙을 덮은 뒤에도 단색 보라(--yy-btn) */
html[data-theme] .yy.yy[data-line] .btn{background:var(--yy-btn);color:var(--yy-btn-ink)}
/* 11/14 비연 연애 결과 60개월 그래프 눈금: SVG 글자(8px)를 그림 밖 HTML 줄로(손님 화면 14px 이상, line_yy/love_ban/love_full.html) */
.yy .yy-graph-ticks{position:relative;height:20px;margin:4px 0 0}
.yy .yy-graph-ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:14px;line-height:20px;color:var(--v2-sub);white-space:nowrap}