/* 캐릭터 화면(mockups/char-final.html): 위 프로필 카드(엠블럼 | 이름 줄·EXP | 골드) + 아래 시트(왼쪽 능력치 표·특성 개화, 오른쪽 전투 수치) */
.chv{display:flex;flex-direction:column;gap:20px}
.chv>.card{margin-top:0}
.chv .eyebrow .n{color:var(--faint);letter-spacing:.04em;margin-left:6px}
.chv .chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;line-height:1;border:1px solid rgba(156,193,255,.35);background:var(--accent-soft);font-size:11px;color:var(--accent-ink);white-space:nowrap}
.chv .chip .lb{font-size:10px;color:var(--faint)}
.chv .chip.no{border-color:var(--line);background:none;color:var(--faint)}
.chv .chip.gd{border-color:rgba(224,184,94,.45);background:rgba(224,184,94,.1);color:var(--gold)}
.chv .chip.el{border-color:color-mix(in srgb,var(--ec) 45%,transparent);background:color-mix(in srgb,var(--ec) 8%,transparent);color:var(--ec)}   /* --ec = 속성 색(ELEM_COLOR) */
.chv .chip.el i{width:5px;height:5px;background:currentColor;transform:rotate(45deg)}
.chv .seg{display:flex;gap:2px}
.chv .seg i{flex:1;height:5px;background:var(--track)}
.chv .seg i.on{background:var(--accent)}
/* 프로필 카드: 엠블럼과 골드 칸은 두 줄(이름 줄 + EXP 줄)에 걸쳐 세로 가운데 */
.chv .band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;gap:10px 22px;align-items:center;padding:16px 24px}
.chv .emb{grid-column:1;grid-row:1/3;width:60px;height:68px;filter:drop-shadow(0 0 10px rgba(224,184,94,.22))}
.chv .who{grid-column:2;grid-row:1;min-width:0;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}   /* 이름·LV·칩 묶음 사이 14px, 칩끼리는 6px */
.chv .who .nm{font:600 32px/1.2 'Hahmlet','Batang',serif;overflow-wrap:anywhere}
.chv .who .lv{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}   /* 레벨: 작은 LV 표기 + 큰 숫자 */
.chv .who .lv small{font:500 11px var(--mono);letter-spacing:.18em;color:var(--accent)}
.chv .who .lv b{font:700 26px/.9 'Rajdhani',var(--mono);color:var(--fg);letter-spacing:.02em;font-variant-numeric:tabular-nums}   /* 숫자 전용 영문 HUD 폰트 */
.chv .who .lv i{font:500 10px var(--mono);font-style:normal;letter-spacing:.12em;color:var(--gold);padding:1px 5px;border:1px solid rgba(224,184,94,.45)}
.chv .who .rt{margin-left:auto;align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:6px}   /* 오른쪽 정렬 묶음: 위 LV, 아래 칩. 이름 길이와 상관없이 같은 자리 */
.chv .tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chv .side-r{grid-column:3;grid-row:1/3;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:4px;padding-left:22px;border-left:1px solid var(--line);text-align:right;font:12px/1.3 var(--mono);color:var(--faint)}
.chv .side-r b{font:500 20px/1.2 var(--mono);color:var(--gold)}
.chv .xp{grid-column:2;grid-row:2;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font:11px/1 var(--mono);color:var(--sub);letter-spacing:.08em}
/* 아래 시트 */
.chv .sheet{display:grid;grid-template-columns:minmax(0,1fr) 220px;padding:0}
.chv .sheet>.cm{padding:18px 22px;min-width:0}
.chv .sheet>aside{padding:18px 20px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0}
.chv .tw{overflow-x:auto}
.chv table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.chv th{font:500 var(--fs-md) 'Noto Sans KR',var(--font);letter-spacing:.04em;color:var(--faint);text-align:center;text-indent:.04em;padding:0 8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.chv th:first-child,.chv td:first-child{text-align:left;padding-left:0}
.chv td{padding:9px 8px;border-bottom:1px solid rgba(41,53,76,.6);text-align:center;font-family:var(--mono)}
.chv td:last-child{padding-right:0}
.chv td.k{font-family:var(--font);font-weight:600;cursor:help}
.chv:not(.skv) td.k{max-width:0}   /* 이름 칸 폭이 변해도(예정 열 열림·닫힘) 설명이 줄바꿈되어 행 높이가 변하지 않게 한 줄 + 말줄임 */
.chv td.k small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400;font-size:11px;color:var(--faint);line-height:1.3}
.chv td.base{color:var(--sub)} .chv td.inv{color:var(--accent)} .chv td.eq{color:#2fd0bb} .chv td.tr{color:var(--gold)} .chv td.al{color:#fff}
.chv .cm th:not(:first-child):not(.bw):not(.ptc),.chv .cm td.base,.chv .cm td.inv,.chv .cm td.eq,.chv .cm td.tr,.chv .cm td.al,.chv .cm td.sum{padding-left:9px;padding-right:9px}   /* 숫자 열 좌우 간격 8→9 */
.chv:not(.skv) .cm th:not(:first-child):not(.bw){width:1%} .chv:not(.skv) .cm th.al{width:0}   /* 이름 칸만 남는 폭을 가짐: 예정 열이 열려도 합계·막대·버튼은 제자리 */
.chv .cm .al{white-space:nowrap;overflow:hidden}   /* 열리고 접히는 동안 좁은 칸에서 글자가 줄바꿈되어 행 높이가 변하는 것 방지 */
.chv table.noal .al{display:none}   /* 예정 열: 찍은 스탯이 있을 때만 표시 */
.chv td.sum{font-size:15px}
.chv td.bw{width:22%;min-width:80px}
.chv tr:hover td{background:rgba(156,193,255,.04)}
.chv .sb{height:6px;background:var(--track);display:flex;overflow:hidden}   /* 능력치 막대: 기본 + 장비 + 배분 예정 */
.chv .sb i{height:100%}
.chv .sb .b{background:var(--accent)} .chv .sb .v{background:#7fa6ff} .chv .sb .e{background:#2fd0bb} .chv .sb .t{background:var(--gold)} .chv .sb .a{background:#fff}
.chv .sbtn{width:22px;height:22px}
.chv .sbs{display:inline-flex;gap:4px;align-items:center}
.chv .ssel{height:22px;background:var(--panel);border:1px solid var(--sel-line);color:#fff;font:12px var(--mono);padding:0 2px;cursor:pointer}.chv .ssel{color-scheme:dark}.chv .ssel option{background:#1c2535;color:#fff}.chv .ssel option:checked{background:#54698c;color:#fff}.chv .ssel:disabled{opacity:.35;border-color:var(--line);cursor:default}
.chv .sh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.chv .tf[hidden]{display:none}
.chv .tf{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.chv th.ptc{position:relative;padding-left:0;padding-right:0}
.chv th.ptc .pts{position:absolute;right:0;bottom:9px;white-space:nowrap;letter-spacing:0;text-indent:0}
.chv th.ptc .pts b{border-bottom:0;padding:0 0 0 2px}
.chv .pts{font:500 var(--fs-md) var(--mono);color:var(--sub)}
.chv .pts b{color:var(--accent);padding:0 6px;border-bottom:2px solid var(--accent);font-weight:500}
.chv .pts.zero b{color:var(--faint);border-color:var(--line)}
.chv .spx{margin-top:12px;padding-top:16px;border-top:1px solid var(--line)}
.chv .tf[hidden]+.spx{margin-top:0;border-top:0}
.chv .spx .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.chv .spx .hd .eyebrow{margin:0}
.chv .spx .ls{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chv .spx .it{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line)}
.chv .spx .it.empty{border-style:dashed;font-size:12px;color:var(--faint)}
.chv .spx .it .no{grid-row:span 2;font:500 12px var(--mono);color:var(--accent)}
.chv .spx .it b{font-family:var(--serif);font-size:16px;font-weight:600}
.chv .spx .it .t{font:400 11px var(--font);color:var(--faint);margin-left:8px}
.chv .spx .it p{margin:0;font-size:12px;color:var(--sub);line-height:1.5}
.chv aside .eyebrow{margin:0 0 4px}
.chv aside h4{margin:8px 0 0;padding-top:10px;border-top:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.14em;color:var(--faint)}
/* HP·MP: 왼쪽 색 띠 + 이름 + 오른쪽 숫자 두 줄(mockups/combat-3.html C안). MP 줄엔 라운드당 회복량 */
.chv .gauges{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.chv .gauges>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:7px 10px 7px 0;background:rgba(11,16,25,.45);border-left:3px solid var(--c)}
.chv .gauges .k{padding-left:10px;font:600 12px var(--mono);letter-spacing:.1em;color:var(--c)}
.chv .gauges .s{font-size:11px;color:var(--faint)}
.chv .gauges .v{font:600 20px/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.chv .gauges .hp{--c:var(--good)} .chv .gauges .mp{--c:#a98bff}
.chv .dots{display:flex;align-items:baseline;gap:8px;font-size:13px}
.chv .dots::after{content:"";order:1;flex:1;border-bottom:1px dotted var(--line);transform:translateY(-3px)}
.chv .dots b{order:2;font:500 13px var(--mono);font-variant-numeric:tabular-nums}
.chv .dots span{color:var(--sub)}
@media (max-width:900px){.chv .sheet{grid-template-columns:1fr}.chv .sheet>aside{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:640px){
  .chv .band{grid-template-columns:auto 1fr;padding:16px}
  .chv .side-r{grid-column:2;grid-row:2;flex-direction:row;justify-content:flex-start;align-items:baseline;gap:12px;padding-left:0;border-left:0;text-align:left}
  .chv .side-r b{font-size:16px}
  .chv .xp{grid-column:1/-1;grid-row:3}
  .chv td.bw,.chv th.bw,.chv td.k small{display:none}
  .chv .spx .ls{grid-template-columns:1fr}
}