/* 숫자 카드 공용 부품(studio/numcards.py · templates/partials/numcards). 2026-11-12 새 갈래 셋이 같이 쓴다.
   색은 사이트 토큰(--green · --gold · --ink · --muted · --line · --el2), 갈래마다 다른 글꼴 · 색은 --line-* 변수로 덮는다.
     --line-serif(제목 · 큰 숫자) --line-sans(본문) --line-card(카드 바탕) --line-ink(글자) --line-muted(보조 글자)
     --line-rule(테두리 · 칸 선) --line-accent(게이지 · 선 · 레이더) --line-gold(가장 좋은 점) --line-heart(하트)
     --line-highlight(형광펜) --line-second(궁합 둘째 줄)
   손님 글자는 14px 이상. 왼쪽 강조 띠 없음. JS 없이 그려진다. */
.nc{--nc-card:var(--line-card,#fffefa);--nc-ink:var(--line-ink,var(--ink,#243d37));--nc-muted:var(--line-muted,var(--muted,#858880));
  --nc-rule:var(--line-rule,var(--line,#dedfd6));--nc-accent:var(--line-accent,var(--green,#173d39));--nc-gold:var(--line-gold,var(--gold,#b29b6c));
  --nc-heart:var(--line-heart,var(--el2,#c8806d));--nc-hl:var(--line-highlight,#f5e19a);--nc-second:var(--line-second,var(--el5,#6c929e));
  --nc-serif:var(--line-serif,'Woldam Chosun Gungseo','Gungsuh','궁서',serif);--nc-sans:var(--line-sans,'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif);
  box-sizing:border-box;margin:16px 0;padding:20px 16px;border:1px solid var(--nc-rule);border-radius:16px;background:var(--nc-card);
  color:var(--nc-ink);font-family:var(--nc-sans);font-size:15px;line-height:1.6;letter-spacing:-.02em;word-break:keep-all;text-align:left}
html[data-theme="dark"] .nc{--nc-card:var(--line-card,#161616);--nc-ink:var(--line-ink,#f2f0ea);--nc-muted:var(--line-muted,#b9b7ae);
  --nc-rule:var(--line-rule,#2c2c2c);--nc-accent:var(--line-accent,#c9b27a);--nc-hl:var(--line-highlight,#7a6420)}
.nc *{box-sizing:border-box}
.nc p,.nc h3,.nc ul,.nc dl,.nc dd{margin:0;padding:0}
.nc ul{list-style:none}
.nc .nc-title{font-family:var(--nc-serif);font-size:20px;font-weight:500;line-height:1.45;letter-spacing:-.03em;text-align:center}
.nc-blur{filter:blur(5px);user-select:none;-webkit-user-select:none;font-style:normal}
i.nc-blur,b.nc-blur{display:inline-block}
/* 가린 값 자리(○○). 값이 HTML 에 없으니 흐리지 않고 옅게만 */
.nc-hide{font-style:normal;color:var(--nc-muted);letter-spacing:.08em}
/* 가린 날짜 자리: 글자 없는 흐린 알약(「○○월」 같은 동그라미 날짜는 쓰지 않는다, 11/12) */
.nc-bar{display:inline-block;width:5.2em;height:.9em;vertical-align:-.05em;border-radius:999px;background:color-mix(in srgb,var(--nc-muted) 38%,transparent);filter:blur(1.5px)}
.nc-mark-text .nc-bar{width:4.2em}
.nc-cal-head .nc-bar{width:4.5em}
.nc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 아래 줄(이름 · 값). 행마다 한 칸 */
.nc-rows{margin-top:14px;border-top:1px solid var(--nc-rule)}
.nc-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 2px;border-bottom:1px solid var(--nc-rule);font-size:15px}
.nc-rows li span{color:var(--nc-muted);flex:none}
.nc-rows li b{font-weight:600;text-align:right}
.nc-rows li i{font-style:normal}

/* 1. 형광펜 */
.nc-mark{padding:18px 16px}
.nc-mark-lead{font-size:14px;color:var(--nc-muted);margin-bottom:6px}
.nc-mark-text{font-size:18px;font-weight:600;line-height:1.7}
.nc-mark-text mark{color:inherit;background:linear-gradient(transparent 52%,var(--nc-hl) 52%,var(--nc-hl) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px}

/* 2. 반원 게이지 */
.nc-gauge-box{position:relative;max-width:260px;margin:10px auto 0}
.nc-gauge-box svg{display:block;width:100%;height:auto;overflow:visible}
.nc-gauge-track{fill:none;stroke:var(--nc-rule);stroke-width:16;stroke-linecap:round}
.nc-gauge-fill{fill:none;stroke:var(--nc-accent);stroke-width:16;stroke-linecap:round}
.nc-gauge-dot{fill:var(--nc-card);stroke:var(--nc-gold);stroke-width:4}
.nc-gauge-num{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:center;align-items:baseline;gap:4px}
.nc-gauge-num b{font-family:var(--nc-serif);font-size:48px;font-weight:500;line-height:1;color:var(--nc-ink)}
.nc-gauge-num span{font-size:15px;color:var(--nc-muted)}
.nc-caption{margin-top:12px;text-align:center;font-size:16px;font-weight:600}

/* 3. 하트 달력 */
.nc-cal{margin-top:12px;padding:12px 8px 8px;border:1px solid var(--nc-rule);border-radius:12px}
.nc-cal-head{text-align:center;font-family:var(--nc-serif);font-size:18px;margin-bottom:8px}
.nc-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.nc-cal-wd{text-align:center;font-size:14px;color:var(--nc-muted);padding:2px 0}
.nc-cal-wd.is-sun{color:var(--nc-heart)}
.nc-cal-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:46px;padding-top:4px;
  border-radius:8px;font-size:15px}
.nc-cal-day em{font-style:normal;line-height:1.3}
.nc-cal-day.is-empty{visibility:hidden}
.nc-ico{width:18px;height:18px;fill:var(--nc-heart);margin-top:2px}
.nc-cal-day.is-heart{background:color-mix(in srgb,var(--nc-heart) 14%,transparent)}
.nc-cal-day.is-star{background:var(--nc-heart);color:#fff;font-weight:700}
.nc-cal-day.is-star .nc-ico{fill:#fff;width:20px;height:20px}
.nc-cal-day.is-caution em{color:var(--nc-muted);text-decoration:underline dotted;text-underline-offset:4px}
.nc-heart.is-locked .nc-cal-day{background:color-mix(in srgb,var(--nc-rule) 40%,transparent)}
.nc-heart.is-locked .nc-cal-day.is-heart{background:color-mix(in srgb,var(--nc-heart) 14%,transparent)}
.nc-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:12px;font-size:14px;color:var(--nc-muted)}
.nc-legend li{display:flex;align-items:center;gap:6px}
.nc-legend li::before{content:"";width:12px;height:12px;border-radius:4px;background:color-mix(in srgb,var(--nc-heart) 30%,transparent)}
.nc-legend li.is-star::before{background:var(--nc-heart)}
.nc-legend li.is-caution::before{background:none;border-bottom:2px dotted var(--nc-muted);border-radius:0;height:6px}
.nc-legend b{color:var(--nc-ink)}

/* 4. 꺾은선 */
.nc-line-names{display:flex;justify-content:center;gap:16px;margin-top:8px;font-size:14px}
.nc-line-names li{display:flex;align-items:center;gap:6px}
.nc-line-names li::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--nc-accent)}
.nc-line-names li.is-b::before{background:var(--nc-second)}
.nc-line-box{position:relative;margin-top:12px;height:140px}
.nc-line-box svg{display:block;width:100%;height:100%}
.nc-line-grid{stroke:var(--nc-rule);stroke-width:1;vector-effect:non-scaling-stroke}
.nc-line-area{fill:color-mix(in srgb,var(--nc-accent) 10%,transparent)}
.nc-line-path{fill:none;stroke:var(--nc-accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.nc-line-path.is-b{stroke:var(--nc-second);stroke-width:2}
.nc-line-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--nc-card);border:3px solid var(--nc-gold)}
.nc-line-dot.is-low{border-color:var(--nc-muted)}
.nc-line-ticks{position:relative;height:22px;margin-top:4px}
.nc-line-ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:14px;color:var(--nc-muted);white-space:nowrap}
.nc-line-ticks span:first-child{transform:translateX(-8%)}
.nc-line .nc-rows li.is-best b::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;border:2px solid var(--nc-gold)}
.nc-line .nc-rows li.is-low b::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;border:2px solid var(--nc-muted)}

/* 5. 레이더 */
.nc-radar-box{position:relative;max-width:320px;margin:8px auto 0;aspect-ratio:1}
.nc-radar-box svg{display:block;width:100%;height:100%}
.nc-radar-ring{fill:none;stroke:var(--nc-rule);stroke-width:1}
.nc-radar-spoke{stroke:var(--nc-rule);stroke-width:1}
.nc-radar-poly{fill:color-mix(in srgb,var(--nc-accent) 22%,transparent);stroke:var(--nc-accent);stroke-width:2;stroke-linejoin:round}
.nc-radar-dot{fill:var(--nc-accent)}
.nc-radar-dot.is-best{fill:var(--nc-gold)}
.nc-radar-label{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;font-size:14px;line-height:1.3;white-space:nowrap}
.nc-radar-label b{font-size:15px;font-weight:700;color:var(--nc-accent)}
.nc-radar-label.is-best b{color:var(--nc-gold)}

/* 6. 인물 카드 */
.nc-person-tag{text-align:center;font-size:14px;color:var(--nc-muted);margin-bottom:4px}
.nc-portrait{width:min(240px,72%);margin:14px auto 0;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--nc-rule)}
.nc-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.nc-portrait img.nc-blur-img{filter:blur(14px);transform:scale(1.12)}
.nc-person-rows{margin-top:16px;border-top:1px solid var(--nc-rule)}
.nc-person-rows div{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:9px 2px;border-bottom:1px solid var(--nc-rule);font-size:15px}
.nc-person-rows dt{color:var(--nc-muted)}
.nc-person-rows dd{font-weight:600}
.nc-person-rows dd i{font-style:normal}
.nc-person-text{margin-top:12px;font-size:15px;line-height:1.75}