/* ── 관심종목 탭 · 위험 진단(#wlt-risk) ── watchlist-risk.js 가 그린다.
   색은 앱 전역 변수(--text·--sub·--sep·--card·--accent)만 쓴다. 오렌지는 '비중 직접 입력' 하나. */
.wrk-sub { margin: 0 -2px 8px; padding: 0; }
/* 서브 네비 전환은 hidden 속성으로 한다 — .wlt-groups 의 display:block 이 UA [hidden] 을 이겨서 되누른다 */
#tab-watchlist .wlt-list[hidden], #tab-watchlist .wlt-groups[hidden], #tab-watchlist .wrk[hidden] { display: none; }
.wrk { --wrk-up: #f04452; --wrk-dn: #3182f6; padding: 0; }
.wrk .num { font-variant-numeric: tabular-nums; }
.wrk .up { color: var(--wrk-up); } .wrk .dn { color: var(--wrk-dn); }
.wrk-fn { display: flex; align-items: center; gap: 5px; margin: 10px 0 14px; font-size: 12px; color: var(--sub); }
.wrk-fn svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.wrk-fn [data-k="mode"] { transition: opacity 200ms ease-out; }
.wrk-fn [data-k="mode"].wrk-out { opacity: 0; }

/* 판정 — 큰 색 글자 + 오른쪽 회색 보조 */
.wrk-vd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.wrk-vd b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.wrk-vd b.up { color: var(--wrk-up); }
.wrk-vd span { font-size: 13px; color: var(--sub); white-space: nowrap; }
.wrk-say { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text); opacity: .85; }

/* 요약 3칸 */
.wrk-kp { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--text); border-bottom: 1px solid var(--sep); margin: 0 0 18px; }
.wrk-kp div { padding: 10px 0; }
.wrk-kp div + div { padding-left: 12px; border-left: 1px solid var(--sep); }
.wrk-kp small { display: block; font-size: 12px; color: var(--sub); }
.wrk-kp b { display: block; margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.wrk-kp b.dn { color: var(--wrk-dn); }

/* 낙폭 차트(흐린 전체선 + 강조 구간 + 점 마커) */
.wrk-chh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.wrk-chh b { font-size: 15px; font-weight: 700; color: var(--text); }
.wrk-chh span { font-size: 12px; color: var(--sub); text-align: right; }
.wrk-ch { display: block; width: 100%; height: auto; }
.wrk-ch .base { fill: none; stroke: var(--sub); stroke-width: 1.5; opacity: .45; }
.wrk-ch .hl { fill: none; stroke: var(--wrk-dn); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(49,130,246,.45)); }
.wrk-ch .area { fill: var(--wrk-dn); opacity: .08; }
.wrk-ch .zero { stroke: var(--sep); stroke-width: 1; }
.wrk-ch .gl { stroke: var(--sep); stroke-width: 1; stroke-dasharray: 2 3; }
.wrk-ch .dash { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 3 3; }
.wrk-ch .dot { fill: var(--wrk-dn); }
.wrk-ch text { font-size: 11px; fill: var(--sub); font-family: inherit; }
.wrk-ch .lbl { fill: var(--wrk-dn); font-weight: 700; }
.wrk-ax { margin: 4px 0 18px; font-size: 11px; color: var(--sub); }

/* 위험 기여 순위표 */
.wrk-th { display: grid; grid-template-columns: 28px 1fr 56px 56px; white-space: nowrap; gap: 8px; padding: 8px 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--sep); font-size: 12px; color: var(--sub); }
.wrk-th span:nth-child(n+3) { text-align: right; }
.wrk-rk { margin: 0; padding: 0; list-style: none; }
.wrk-rk li { display: grid; grid-template-columns: 28px 1fr 56px 56px; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sep); }
.wrk-rk .no { font-size: 17px; font-weight: 800; color: var(--text); }
.wrk-rk li:nth-child(n+4) .no { color: var(--sub); }
.wrk-rk .nm { min-width: 0; }
.wrk-rk .nm b { display: block; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrk-rk .nm small { display: block; margin-top: 2px; font-size: 12px; color: var(--sub); }
.wrk-rk .w, .wrk-rk .r { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); }
.wrk-rk .w { color: var(--sub); }
.wrk-rk .r { font-weight: 700; }
.wrk-rk .r.hi { color: var(--wrk-up); }
/* 막대 — 회색=비중, 진한 선=위험 기여. width 말고 scaleX 로 차오른다 */
.wrk-bar { position: relative; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--sep); overflow: hidden; }
.wrk-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); border-radius: 2px; transition: transform 350ms ease-out; }
.wrk-bar .bw { background: var(--sub); opacity: .45; }
.wrk-bar .br { height: 2px; top: 1px; background: var(--text); }
.wrk-ex { margin: 10px 0 0; font-size: 12px; color: var(--sub); }

/* 비중 입력 — 0fr→1fr 로 열리고 줄이 차례로 내려온다 */
.wrk-sheet { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 220ms ease-out, opacity 180ms ease-out, margin-top 220ms ease-out; }
.wrk-sheet.open { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
.wrk-sheet > .in { min-height: 0; overflow: hidden; }
.wrk-sheet .row, .wrk-sheet .sum { opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease-out, transform 180ms ease-out; transition-delay: calc(var(--i, 0) * 30ms); }
.wrk-sheet.open .row, .wrk-sheet.open .sum { opacity: 1; transform: none; }
.wrk-sheet .row { display: grid; grid-template-columns: 1fr 72px; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--sep); font-size: 14px; color: var(--text); }
.wrk-sheet input { width: 72px; height: 34px; padding: 0 8px; border: 1px solid var(--sep); border-radius: 8px; background: transparent; font: inherit; font-size: 14px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; transition: border-color 150ms ease-out; }
.wrk-sheet input:focus { outline: none; border-color: var(--text); }
.wrk-sheet .sum { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; font-size: 13px; color: var(--sub); }
.wrk-sheet .sum b { display: inline-block; color: var(--text); transition: color 150ms ease-out, transform 150ms ease-out; }
.wrk-sheet .sum b.bad { color: var(--wrk-up); }
.wrk-sheet .sum b.bump { transform: scale(1.08); }
.wrk-sheet .reset { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--sub); text-decoration: underline; cursor: pointer; }

/* 버튼 — 외곽선 + 주 액션(오렌지 하나) */
.wrk-acts { display: flex; gap: 8px; margin-top: 16px; }
.wrk-ob, .wrk-pb { flex: 1; height: 42px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 150ms ease-out; }
.wrk-ob { border: 1px solid var(--sep); background: transparent; color: var(--text); }
.wrk-pb { border: 0; background: var(--accent, #ff6f0f); color: #fff; }
.wrk-pb:disabled { opacity: .4; cursor: default; }
.wrk-pb.wrk-out { opacity: 0; }
.wrk-note { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--sub); }

/* 2종목 미만·실패 안내 */
.wrk-empty { padding: 28px 0 8px; text-align: center; }
.wrk-empty b { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.wrk-empty p { margin: 6px 0 16px; font-size: 13px; line-height: 1.5; color: var(--sub); }
.wrk-empty .wrk-ob { flex: none; width: 160px; }

/* 로딩 스켈레톤 → 내용 페이드 */
.wrk-sk i { display: block; height: 14px; margin: 0 0 10px; border-radius: 6px; background: var(--sep); animation: wrkPulse 1.2s ease-in-out infinite; }
.wrk-sk i:nth-child(1) { width: 55%; height: 24px; } .wrk-sk i:nth-child(2) { width: 85%; } .wrk-sk i:nth-child(3) { height: 48px; } .wrk-sk i:nth-child(n+4) { height: 40px; }
@keyframes wrkPulse { 50% { opacity: .5; } }
.wrk-body { transition: opacity 180ms ease-out; }
.wrk-body.wrk-in { opacity: 0; }

/* 계산 방법 — 기존 .wlt-sheet(배경 페이드 + 아래서 올라옴)에 내용만 얹는다 */
.wrk-how { overflow-y: auto; }
.wrk-df { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 13px; line-height: 1.55; }
.wrk-df th, .wrk-df td { padding: 10px 0; border-bottom: 1px solid var(--sep); vertical-align: top; text-align: left; }
.wrk-df tr:first-child th, .wrk-df tr:first-child td { border-top: 1px solid var(--text); }
.wrk-df th { width: 84px; padding-right: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.wrk-df td { color: var(--text); opacity: .85; }
.wrk-df b { font-weight: 700; }
.wrk-exh { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.wrk-exb { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--sep); font-size: 13px; line-height: 1.7; color: var(--text); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .wrk-bar i, .wrk-sheet, .wrk-sheet .row, .wrk-sheet .sum, .wrk-sheet .sum b, .wrk-sheet input,
  .wrk-fn [data-k="mode"], .wrk-ob, .wrk-pb, .wrk-body { transition: none; }
  .wrk-sk i { animation: none; }
}