/* 2026-11-13 신규 캐릭터 화면(비연 연애 · 연서 결혼 · 현야 연애타로) 공통 틀. line-yy.css 뒤에 붙는다(.yy.is-nc).
   11/13 사장님 「UI 깨지는 부분」 · 「리서치가 반영이 안 됐다」 → reports/2026-11-12-새캐릭터-기획/spec-yongyong.md 자리 · px 를 그대로 다시 맞춤.
   대조표: reports/2026-11-13-신규캐릭터/타사반영/yy-대조표.md (행 번호 A1 · D3 … 를 주석에 적음).
   색: 상품마다 캐릭터에 맞는 단색 한 벌(그라데이션 · 네온 · 빛 번짐 없음). 용용 실측 색은 명도 계층만 참고.
   글자: 손님 글자 14px 이상. 왼쪽 강조 세로 띠 없음. */

/* ── 0-2 상품 색 토큰(단색) ───────────────────────────────────────────── */
.yy.is-nc.is-nc{
  --yy-bg-rgb:22 10 12; --yy-bg:rgb(var(--yy-bg-rgb)); --yy-page:#100708; --yy-panel:#221013; --yy-panel-3:#2c161a;
  --yy-accent-rgb:236 96 104; --yy-accent-soft:#f4aab0; --yy-btn:#c3313b; --yy-btn-ink:#fff7f5; --yy-mark:#c3313b;
  --yy-text:rgba(255,242,240,.92); --yy-strong:#fff4f1; --yy-sub:rgba(255,242,240,.62); --yy-bubble-em:#a0242d;
  --yy-glyph:'緣';
  /* 0-1 글꼴 크기(spec 390 실측, 14 미만은 14) */
  --fs-kicker:14px; --fs-over:min(28px,7.2vw); --fs-chapter:min(24px,6.2vw); --fs-big:min(22px,5.7vw); --fs-say:min(20px,5.2vw);
  --fs-body:15px; --fs-card-title:16px; --fs-ask:min(26px,6.7vw); --fs-bubble:min(15px,3.9vw);
  padding-bottom:124px
}
/* 연서(결혼): 가라앉은 와인색 */
.yy.is-nc.is-nc[data-product="marriage"]{
  --yy-bg-rgb:20 11 14; --yy-page:#0e0709; --yy-panel:#1f1217; --yy-panel-3:#29171e;
  --yy-accent-rgb:217 122 140; --yy-accent-soft:#eebac4; --yy-btn:#922c41; --yy-mark:#922c41; --yy-bubble-em:#7d2236;
  --yy-text:rgba(250,240,242,.92); --yy-strong:#fbf3f4; --yy-sub:rgba(250,240,242,.62); --yy-glyph:'婚'}
/* 현야(연애타로): 촛불 금빛 강조 + 검붉은 버튼 */
.yy.is-nc.is-nc[data-product="lovetarot"]{
  --yy-bg-rgb:20 12 13; --yy-page:#0e0809; --yy-panel:#201315; --yy-panel-3:#2a191b;
  --yy-accent-rgb:224 174 106; --yy-accent-soft:#f0d4a6; --yy-btn:#a5303c; --yy-mark:#a5303c; --yy-bubble-em:#8a2531;
  --yy-text:rgba(250,242,232,.92); --yy-strong:#fbf5ec; --yy-sub:rgba(250,242,232,.62); --yy-glyph:'占'}
html[data-theme]:has(.yy.is-nc),html[data-theme]:has(.yy.is-nc) body{background:var(--yy-page)}
html[data-theme] .yy.is-nc[data-line] .btn,html[data-theme] .yy.yy.is-nc[data-line] .btn{background:var(--yy-btn);color:var(--yy-btn-ink)}
html[data-theme] .yy.is-nc .yy-bubble :is(.yy-em,.yy-blur){color:var(--yy-bubble-em)}
html[data-theme] .yy.is-nc .yy-topband{background:rgb(var(--yy-bg-rgb) / .96)}
.yy.is-nc .yy-chapter-glyph::before{content:none}   /* 11/14 A26: 장 번호 뒤 흐린 한자가 번호와 반쯤 겹쳐 얼룩처럼 보여 뺌 */

/* 빈 그림 자리: 손님 화면이라 제작 메모 · 점선 없이 자리 크기만(그림이 들어오면 그대로 채움) */
.yy.is-nc .yy-slot.is-empty{background:none}
.yy.is-nc .cb-cut:not(.without-chibi)::before{display:none}

/* ── 화면 A. 인트로 ─────────────────────────────────────────────────── */
/* A2 오른쪽 위 장식 글자: 44px · 글자색 α.16 */
html[data-theme] .yy.is-nc .yy-glyph{top:18px;right:18px;font:400 44px/1 var(--line-serif);color:rgb(255 255 255 / .16)}
/* A4 전면 그림 390×650, 아래 48%를 바탕으로 녹임(구도) */
.yy.is-nc .yy-slot[data-slot="A4"]{aspect-ratio:390 / 650}
/* A5 작은 문구 + A6 제목 글씨 그림: 묶음이 그림 아래 1/3에 겹치고 제목 아래 끝이 390 기준 620(용용 로고 아래 끝).
   제목 그림 폭 342(88%), 높이 = 폭 ÷ 그림 비율(--title-r). 작은 문구 위치 = 제목 위 6px + 문구 21px 위 */
.yy.is-nc{--title-r:2.661;--yy-w:min(100vw,var(--app-w,448px))}
.yy.is-nc[data-product="marriage"]{--title-r:2.598}
.yy.is-nc[data-product="lovetarot"]{--title-r:2.809}
/* 11/14 A1: 제목 아래 끝이 하단 고정 바(약 83px) 위 8px 안쪽으로 오게 화면 높이가 낮으면 묶음째 올림 */
html[data-theme] .yy.is-nc .yy-kicker.yy-nc-kick{position:relative;z-index:3;margin:calc(var(--yy-w) * (-.0769 - .877 / var(--title-r)) - 27px + min(0px, 100svh - 91px - var(--yy-w) * 1.5897)) 24px 0;
  font:700 14px/21px var(--line-sans);letter-spacing:1.6px;color:var(--yy-strong);text-shadow:0 1px 10px rgba(0,0,0,.75);animation:yyFadeUp .7s ease both}
.yy.is-nc .yy-slot.yy-nc-title{z-index:3;width:calc(var(--yy-w) * .877);aspect-ratio:var(--title-r);margin:6px auto 0;animation:yyFadeUp .7s .1s ease both}
.yy.is-nc .yy-slot.is-contain img{object-fit:contain;border-radius:0;filter:drop-shadow(0 2px 10px rgba(10,2,3,.85))}
/* A7 예언 카드: 346 폭(L22) · 첫 화면 아래에 걸침(top 678) · 짙은 판 · 테 강조색 α.24 · 번호 원 없음 */
html[data-theme] .yy.is-nc .yy-prophecy.v2-card{margin:calc(var(--yy-w) * .149) 22px 0;padding:8px 16px;border:1px solid rgb(var(--yy-accent-rgb) / .24);border-radius:14px;background:var(--yy-panel)}
html[data-theme] .yy.is-nc .yy-prophecy li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:baseline;padding:8px 0}
html[data-theme] .yy.is-nc .yy-prophecy li+li{border-top:0}
html[data-theme] .yy.is-nc .yy-prophecy b{display:block;width:auto;height:auto;border-radius:0;background:none;font:900 14px/22px var(--line-sans);color:var(--yy-accent)}
html[data-theme] .yy.is-nc .yy-prophecy p{margin:0;font:400 14.5px/22.5px var(--line-sans);color:var(--yy-text)}
html[data-theme] .yy.is-nc .yy-prophecy p .yy-blur{display:inline;padding:0 2px;font-weight:700;color:var(--yy-accent-soft)}
html[data-theme] .yy.is-nc .yy-prophecy li.yy-hid{align-items:center;padding:12px 0}
/* A10 큰 질문 제목: 명조 20/700 lh 31 · 2줄 · 예언 카드와 84px 사이 */
html[data-theme] .yy.is-nc .yy-dialogue{margin:70px 22px 0;font:700 var(--fs-say)/1.55 var(--line-serif);letter-spacing:-.2px;color:var(--yy-strong)}
.yy.is-nc .yy-dialogue span{display:block}
.yy.is-nc .yy-dialogue span+span::before{content:none}
/* A11 약속 카드 ×3: 346 · 간격 10 · 바탕 강조색 α.05 · 테 α.14 · 둥글기 14 · 안 14×16. 번호 명조 18/700(원 없음) · 제목 15/800 · 설명 14/400 α.62 lh 20.8 */
.yy.is-nc .yy-promise ol{margin:28px 0 0}
html[data-theme] .yy.is-nc .yy-promise li.v2-card{display:grid;grid-template-columns:22px 1fr;column-gap:12px;align-items:baseline;margin:10px 22px 0;padding:14px 16px;
  border:1px solid rgb(var(--yy-accent-rgb) / .14);border-radius:14px;background:rgb(var(--yy-accent-rgb) / .05)}
html[data-theme] .yy.is-nc .yy-promise li.v2-card:first-child{margin-top:0}
html[data-theme] .yy.is-nc .yy-promise b{display:block;grid-row:span 2;width:auto;height:auto;border:0;border-radius:0;background:none;font:700 18px/1.2 var(--line-serif);color:var(--yy-accent)}
html[data-theme] .yy.is-nc .yy-promise h2{margin:0 0 3px;font:800 15px/1.45 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy.is-nc .yy-promise p{margin:0;font:400 14px/20.8px var(--line-sans);color:var(--yy-sub)}
/* A12~A14 리뷰(실제 값만, 없으면 칸째 없음): 머리는 약속 카드 + 120 */
.yy.is-nc .yy-down{margin:64px 0 -40px}
.yy.is-nc .yy-reviews{margin-top:64px}

/* A9 · D21 하단 고정 바: 단색 바탕(11/13 사장님 「녹는 띠」 빼기 유지) · 버튼 358×56 L16 · 둥글기 16 · 16/800 */
html[data-theme] .yy.is-nc .v2-sticky{padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:var(--yy-bg);border-top:1px solid rgb(var(--yy-accent-rgb) / .12)}
html[data-theme] .yy.is-nc .yy-sticky .btn{min-height:56px;border-radius:16px;font:800 16px/1.2 var(--line-sans);letter-spacing:.02em}

/* ── 화면 B. 입력 ───────────────────────────────────────────────────── */
/* B1 뒤로: 40×40 아이콘만 · B2 진행 점 */
.yy.is-nc .yy-form .q-top{top:12px;left:12px;right:12px;display:flex;align-items:center;gap:0;min-height:40px}
.yy.is-nc .yy-form .q-back{display:grid;place-items:center;width:40px;height:40px;padding:0;font-size:0;color:var(--yy-strong);background:none;border:0}
.yy.is-nc .yy-form .q-back .ic{width:22px;height:22px}
.yy.is-nc .yy-form .q-progress,.yy.is-nc .yy-form .q-count{display:none}
.yy-dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px;margin:0;padding:0;list-style:none}
.yy-dots li{width:6px;height:6px;border-radius:50%;background:rgb(255 255 255 / .28)}
.yy-dots li.is-done{background:rgb(var(--yy-accent-rgb) / .6)}
.yy-dots li.is-on{width:8px;height:8px;margin-top:-1px;background:var(--yy-accent)}
/* B4 앞말 14/400 α.5 · B5 질문 SUIT 26/700 lh 1.4 */
html[data-theme] .yy.is-nc .yy-ask-pre{margin:0 0 6px;font:400 14px/1.5 var(--line-sans);color:rgb(255 255 255 / .55)}
html[data-theme] .yy.is-nc .yy-ask-q{font:700 var(--fs-ask)/1.4 var(--line-sans);letter-spacing:-.02em;color:var(--yy-strong)}
/* B7 선택 버튼: 166×60 · 간격 10 · 둥글기 8 · 고름 = 강조색 α.18 바탕 + 강조색 테 · 안 고름 = 짙은 바탕 + 테 α.3 · 15 */
html[data-theme] .yy.is-nc .yy-form .seg{gap:10px}
html[data-theme] .yy.is-nc .yy-form .seg button{min-height:60px;padding:16px 8px;border:1px solid rgb(var(--yy-accent-rgb) / .3);border-radius:8px;
  background:rgb(var(--yy-bg-rgb) / .6);font:500 15px/1.3 var(--line-sans);letter-spacing:1px;color:var(--yy-strong)}
html[data-theme] .yy.is-nc .yy-form .seg button[aria-pressed="true"]{border-color:var(--yy-accent);background:rgb(var(--yy-accent-rgb) / .18);color:var(--yy-strong)}
/* B8 다음: 바 92 · 버튼 358×56 둥글기 12 · 비활성 α.4 */
html[data-theme] .yy.is-nc .yy-form .price-bar{background:var(--yy-bg);border-top:1px solid rgb(var(--yy-accent-rgb) / .12)}
html[data-theme] .yy.is-nc .yy-form .price-bar .btn{min-height:56px;border-radius:12px}
html[data-theme] .yy.is-nc .yy-form .price-bar .btn[disabled]{opacity:.4}

/* ── 화면 C. 불러오기: C2 문구 16/600 · C3 막대 300×6 강조색 ───────────── */
html[data-theme] .yy.is-nc .yy-progress li{font:600 16px/1.55 var(--line-sans);color:var(--yy-strong);text-shadow:0 1px 10px rgba(0,0,0,.7)}
html[data-theme] .yy.is-nc .yy-bar{background:rgb(255 255 255 / .12)}

/* ── 화면 D. 결제 전 ────────────────────────────────────────────────── */
/* D2 첫 컷 큰 글씨 3줄: SUIT 28/800 lh 1.3 흰색 · 마지막 줄 강조색 · 그림 위 top 40 */
html[data-theme] .yy.is-nc .yy-over{font:800 var(--fs-over)/1.3 var(--line-sans);letter-spacing:-.03em}
/* D3 명식 카드(parts/nc_natal.html): 머리(일간 원 36 + 이름 18/700) · 4열 × 2줄 · 칸 64×64 둥글기 10 · 오행 색 바탕 · 한자 26/800 + 독음 14 · 날 칸 굵은 테 */
html[data-theme] .yy.is-nc .nc-natal.v2-card{margin:16px 22px 0;padding:16px}
.nc-natal-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.nc-natal-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--el-bg,var(--yy-panel-3));font:800 18px/1 'Noto Serif KR','Batang',serif;color:#fff}
html[data-theme] .yy.is-nc .nc-natal-head h3{margin:0;font:700 18px/1.35 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy.is-nc .nc-natal-head p{margin:2px 0 0;font:500 14px/1.4 var(--line-sans);color:var(--yy-sub)}
.nc-natal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;justify-items:center}
.nc-natal-grid>span.nc-col{font:700 14px/1.2 var(--line-sans);color:var(--yy-sub);padding-bottom:2px}
.nc-natal-grid>span.nc-col.is-me{color:var(--yy-accent)}
.nc-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;max-width:64px;aspect-ratio:1;border-radius:10px;
  background:var(--el-bg,var(--yy-panel-3));color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08)}
.nc-cell b{font:800 26px/1 'Noto Serif KR','Batang','바탕',serif}
.nc-cell small{font:600 14px/1.1 var(--line-sans);color:rgb(255 255 255 / .82)}
.nc-cell.is-me{box-shadow:inset 0 0 0 2px var(--yy-strong)}
.nc-cell.is-unknown{background:var(--yy-panel-3);color:var(--yy-sub)}
/* 오행 색(spec: 목 초록 · 화 빨강 · 토 노랑 · 금 회색 · 수 남색), 채도 낮춘 단색 */
.yy.is-nc [data-el="목"]{--el-bg:#2f5a45}.yy.is-nc [data-el="화"]{--el-bg:#80303a}.yy.is-nc [data-el="토"]{--el-bg:#7a6236}.yy.is-nc [data-el="금"]{--el-bg:#57585f}.yy.is-nc [data-el="수"]{--el-bg:#283656}
/* D3b 명식 설명 그림 346×230 */
/* D4 다리 컷 말풍선: 흰 타원 지름 120~150 · 꼬리 없음 · 검은 글자 14~15/500 */
html[data-theme] .yy.is-nc .yy-bubble{max-width:150px;min-width:116px;min-height:116px;padding:16px 18px;font:500 var(--fs-bubble)/1.5 var(--line-say)}
/* D5 장 표시: 장식 글자 α.16 + 번호 명조 22/700 강조색 + 장 이름 14/600 강조색 */
html[data-theme] .yy.is-nc .yy-chapter-n{font:700 22px/1.1 var(--line-serif)}
html[data-theme] .yy.is-nc .yy-chapter-name{font:600 14px/1.3 var(--line-sans);letter-spacing:.12em}
/* D6 장 제목: 24/800 lh 1.4 흰색 · 강조 낱말 강조색 */
html[data-theme] .yy.is-nc .yy-chapter h2{font:700 var(--fs-chapter)/1.4 var(--line-serif);letter-spacing:-.02em}
html[data-theme] .yy.is-nc .yy-chapter{padding:64px 0 24px}
/* D7 내용 카드: 346 · 둥글기 14 · 안 18 · 제목 16/700 가운데 */
html[data-theme] .yy.is-nc :is(.yy-card.v2-card,.nc){margin:16px 22px 0;padding:18px 16px}
html[data-theme] .yy.is-nc .yy-number{margin:16px 22px 0}
html[data-theme] .yy.is-nc .yy-number .nc{margin:0}
/* D9 본문: 15/400 lh 1.75 */
html[data-theme] .yy.is-nc .yy-text p{font:400 15px/1.75 var(--line-sans)}
/* D19 끊는 말 큰 글씨 22/800 */
html[data-theme] .yy.is-nc .yy-big p{font:700 var(--fs-big)/1.5 var(--line-serif)}
/* D18 상세 목차 카드 폭 346 */
html[data-theme] .yy.is-nc .yy-toc-card.v2-card{margin:0 22px 16px}

/* 결제 시트 · 붙잡기 팝업: 고른 줄 테만 상품 색(단색) */
html[data-theme] .yy.is-nc .offer-row.is-on{box-shadow:none}

/* 번호 목록 가림 막대: 상품 색 */
.yy.is-nc .yy-hidbar{background:rgb(var(--yy-accent-rgb) / .34)}

/* D4 말풍선이 좁은 폭(360)에서 그림 밖으로 잘리지 않게 가운데 자리를 양 끝 81px 안으로 */
html[data-theme] .yy.is-nc .yy-bubble{left:clamp(81px,calc(var(--x) * 1%),calc(100% - 81px))!important;top:clamp(84px,calc(var(--y) * 1%),calc(100% - 84px))!important}

/* 11/13 깨짐 손질 ─────────────────────────────────────────────────── */
/* main 의 하단 탭 자리(112px)가 .yy 아래에 회색 띠로 남던 것: 고정 바 자리는 .yy 의 124px 이 맡는다 */
main:has(> .yy.is-nc){padding-bottom:0}
/* B4·B5 입력: 질문을 그림 아래 1/3 (390×844 에서 top 540 안팎)으로 내려 다음 버튼 위 빈 공간을 줄인다 */
/* 11/13 2차 사장님 「입력 화면은 폰에서 스크롤 없이 한 화면」: 그림은 위쪽 띠(화면 높이에서 가장 긴 카드 몫을 뺀 만큼),
   질문 · 칸 · 다음 버튼이 360×640 · 390×664(아이폰 사파리) · 430×740 에서 다 보이게. 확인 카드는 줄이 많아 띠를 더 줄인다. */
.yy.is-nc{--fa:clamp(120px,calc(100svh - 428px),320px)}
.yy.is-nc.is-nc.yy-form{padding-bottom:0}
.yy.is-nc:has(.q-step[data-step="review"].is-on){--fa:clamp(60px,calc(100svh - 462px),250px)}
.yy.is-nc[data-product="marriage"]:has(.q-step[data-step="review"].is-on){--fa:clamp(60px,calc(100svh - 640px),180px)}
.yy.is-nc .yy-form{padding-top:var(--fa)}
.yy.is-nc .yy-form-bg .yy-slot{width:100%;height:calc(var(--fa) + 28px);aspect-ratio:auto;margin:0;transition:height .3s ease}
.yy.is-nc .yy-form-bg .yy-slot img{border-radius:0}
/* 사장님 「입력 배경이 너무 쎄면 안 됨」: 그림 채도 · 밝기를 낮추고 아래 40%를 바탕색으로 녹여, 칸 · 글은 차분한 단색 바탕 위에 */
.yy.is-nc .yy-form-bg .yy-slot img{filter:saturate(.8) brightness(.78)}
.yy.is-nc .yy-form-bg .yy-slot.is-fade::after{height:42%}
/* 질문 · 칸 간격을 줄임(질문 아래 18 → 12, 칸 사이 12) */
html[data-theme] .yy.is-nc .q-guide.yy-ask{margin:0 0 12px}
html[data-theme] .yy.is-nc .yy-ask-pre{margin:0 0 2px}
.yy.is-nc .yy-form .q-step .fld{margin:0 0 12px}
/* 「몰라도 돼」 앞말과 같은 말이라 시간 칸 아래 안내 줄은 뺌(공용 칸 saju/fields/time.html 그대로, 여기서만 숨김) */
.yy.is-nc .yy-form .q-step[data-step="time"] .hint,.yy.is-nc .yy-form .q-step[data-step="partner_time"] .hint{display:none}
/* 확인 카드: 줄 높이를 줄여 결혼 있음(8줄)도 한 화면에 */
html[data-theme] .yy.is-nc .yy-form .q-summary{gap:6px 14px;margin:0 0 8px;padding:12px 16px;border:1px solid rgb(var(--yy-accent-rgb) / .14);border-radius:12px;background:var(--yy-panel);font:400 15px/1.4 var(--line-sans)}
html[data-theme] .yy.is-nc .yy-form .q-summary dt{color:var(--yy-sub);font-weight:500}
html[data-theme] .yy.is-nc .yy-form .q-summary dd{color:var(--yy-strong)}
/* 카드 뽑기: 13장 겹침 폭을 화면에 맞춰 360 폭에서도 넘치지 않게 · 아래 여백은 .yy 가 맡음 */
.yy.is-nc .yy-draw{padding-bottom:0}
.yy.is-nc .yy-draw-deck{--col:min(26px,calc((var(--yy-w) - 48px) / 13.85));grid-template-columns:repeat(13,var(--col));grid-auto-rows:calc(var(--col) * 2.4);padding:0 calc(var(--col) * .85) 0 0}
.yy.is-nc .yy-draw-card{width:calc(var(--col) * 1.85);height:auto;aspect-ratio:2 / 3}
/* D17 리포트 소개: 「미리보기」 14 강조색 · 제목 24/800 가운데 · 2열 × 4행 썸네일 17:24 둥글기 8 (글씨 그림, 없으면 빈 자리) */
.yy.is-nc .nc-shots{margin:72px 22px 0;text-align:center}
html[data-theme] .yy.is-nc .nc-shots-label{margin:0 0 6px;font:700 14px/1.4 var(--line-sans);letter-spacing:.12em;color:var(--yy-accent)}
html[data-theme] .yy.is-nc .nc-shots-head{margin:0 0 18px;font:800 24px/1.35 var(--line-sans);letter-spacing:-.02em;color:var(--yy-strong)}
.yy.is-nc .nc-shots-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.yy.is-nc .nc-shots-grid .yy-slot{width:auto;height:auto;margin:0;aspect-ratio:17 / 24;border-radius:8px;overflow:hidden}
.yy.is-nc .nc-shots-grid .yy-slot img{width:100%;height:100%;object-fit:cover}
.yy.is-nc .nc-shots-grid .yy-slot.is-empty{background:rgb(var(--yy-accent-rgb) / .05);border:1px solid rgb(var(--yy-accent-rgb) / .14)}
/* 「담긴 것」 10줄: 약속 카드와 같은 카드 결(강조색 α.05 바탕 · 테 α.14 · 둥글기 14) · 번호 명조 16/700 강조색 · 이름 15/600 */
.yy.is-nc .nc-contents{margin:72px 22px 0;padding:20px 18px 8px;border:1px solid rgb(var(--yy-accent-rgb) / .14);border-radius:14px;background:rgb(var(--yy-accent-rgb) / .05)}
html[data-theme] .yy.is-nc .nc-contents-head{margin:0 0 10px;text-align:center;font:800 20px/1.4 var(--line-sans);color:var(--yy-strong)}
.yy.is-nc .nc-contents ol{margin:0;padding:0;list-style:none}
.yy.is-nc .nc-contents li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:baseline;padding:12px 0;border-top:1px solid rgb(255 255 255 / .08)}
.yy.is-nc .nc-contents li:first-child{border-top:0}
html[data-theme] .yy.is-nc .nc-contents li b{font:700 16px/1.4 var(--line-serif);color:var(--yy-accent)}
html[data-theme] .yy.is-nc .nc-contents li span{font:600 15px/1.5 var(--line-sans);color:var(--yy-text)}
/* POINT 상세: 「POINT 01」 14/800 강조색 · 제목 2줄 24/800 · 설명 15 α.7 · 글씨 그림 4:5(목차 1:2) 둥글기 14 · 「예시 화면」 14 */
.yy.is-nc .nc-points{margin:40px 0 0}
.yy.is-nc .nc-point{margin:56px 22px 0;text-align:center}
html[data-theme] .yy.is-nc .nc-point-no{margin:0 0 8px;font:800 14px/1.4 var(--line-sans);letter-spacing:.14em;color:var(--yy-accent)}
html[data-theme] .yy.is-nc .nc-point-title{margin:0;font:800 24px/1.4 var(--line-sans);letter-spacing:-.02em;color:var(--yy-strong)}
.yy.is-nc .nc-point-title span{display:block}
html[data-theme] .yy.is-nc .nc-point-sub{margin:10px 0 18px;font:400 15px/1.6 var(--line-sans);color:var(--yy-sub)}
.yy.is-nc .nc-point .yy-slot{width:auto;height:auto;margin:0;aspect-ratio:var(--w) / var(--h);border-radius:14px;overflow:hidden}
.yy.is-nc .nc-point .yy-slot img{width:100%;height:100%;object-fit:cover}
.yy.is-nc .nc-point .yy-slot.is-empty{background:rgb(var(--yy-accent-rgb) / .05);border:1px solid rgb(var(--yy-accent-rgb) / .14)}
html[data-theme] .yy.is-nc .nc-point-note{margin:8px 0 0;font:400 14px/1.4 var(--line-sans);color:var(--yy-sub)}
/* 고정 버튼 줄 몫(칸이 길어져도 스크롤로 버튼 위까지 올라오게). 확인 카드는 동의 문구가 붙어 더 큼 */
.yy.is-nc .yy-form{padding-bottom:96px}
.yy.is-nc .yy-form:has(.q-step[data-step="review"].is-on){padding-bottom:calc(var(--bar-h,236px) + 4px)}
/* 생년월일 바퀴가 보이면 같은 날짜를 한 번 더 적는 줄은 화면 읽기에만(공용 칸 그대로) */
.yy.is-nc .yy-form .timewheel:not([hidden]) ~ .birth-echo{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0)}
.yy.is-nc .yy-form .q-step .fld:last-child{margin-bottom:0}
.yy.is-nc form.yy-form{padding-bottom:92px}

/* 11/13 교정: 유나체(JNE Yuna)는 가격판 제목 · 칸 제목 · 장 제목에만, 본문은 Pretendard 그대로 */
html[data-theme] .yy.is-nc .yy-chapter h2{font:400 calc(var(--fs-chapter) + 6px)/1.35 'JNE Yuna',var(--line-serif);letter-spacing:0}
html[data-theme] .yy.is-nc .yy-card-title,html[data-theme] .yy.is-nc .ncp-worry-head,html[data-theme] .yy.is-nc .ncp-toc-head,
html[data-theme] .yy.is-nc .nc-shots-head,html[data-theme] .yy.is-nc .nc-point-title{font-family:'JNE Yuna',var(--line-serif);font-weight:400;letter-spacing:0}
html[data-theme] .yy.is-nc .yy-card-title{font-size:calc(var(--fs-card-title) + 5px)}
html[data-theme] .yy.is-nc .ncp-worry-head{font-size:calc(var(--fs-chapter,24px) + 4px)}
html[data-theme] .yy.is-nc .nc-point-title{font-size:28px;line-height:1.35}
html[data-theme] .yy.is-nc .ncp-toc-head{font-size:26px}
.yy .yy-nowrap{white-space:nowrap}
/* 11/14 리포트 미리보기(parts/nc_strips.html): 용용 띠 콜라주처럼 그림은 화면 폭, 제목 · 견본 줄만 안쪽. 말풍선은 .yy-bubble 그대로 */
.yy.is-nc .nc-strips{margin:72px 0 0;text-align:center}
.yy.is-nc .nc-strips .nc-shots-label,.yy.is-nc .nc-strips .nc-shots-head{margin-left:22px;margin-right:22px}
.yy.is-nc .nc-strips-fig{position:relative;margin:0}
.yy.is-nc .nc-strips-fig img{display:block;width:100%;height:auto}
html[data-theme] .yy.is-nc .nc-strips-note{margin:14px 22px 0;font:400 14px/1.5 var(--line-sans);color:var(--yy-sub)}

/* 11/14 꼬마 해설 칸(parts/nc_chibi.html · line_yy/chibi.py): 결제 전엔 바로 위 어려운 칸을 빨간 박스로 짚고 그 아래 꼬마 말풍선(옛 상품 cb-mark-box 와 같은 선) */
.yy.is-nc .yy-article > :has(+ .yy-cb.is-mark){outline:3px solid #ff3b3b;outline-offset:4px;border-radius:10px}
.yy.is-nc .yy-cb.is-mark{margin-top:14px}
/* 11/14 신규 캐릭터 꼬마 그림(static/img/chibi/<캐릭터>-*.webp)이 들어와서 그림 자리 가림(line-yy.css .yy .cb-cut img)을 푼다 */
.yy.is-nc .cb-cut img{visibility:visible}
/* 꼬마 해설 칸 말풍선이 화면 끝에 붙어 모서리가 잘리지 않게 말풍선 쪽만 8px 띄움 */
.yy.is-nc .yy-cb .cb-cut.side-left{margin-right:8px}.yy.is-nc .yy-cb .cb-cut.side-right{margin-left:8px}