/* dash.css: 섹션 첫 화면(버틀러 AI 요약, 캘린더 옆 패널, 투자 홈, 장부 홈)이 같이 쓰는 대시보드 부품 (v70).
   theme.css 다음에 읽는다. 색은 theme.css 토큰만 쓴다: 틀은 흑백, 코랄 = 주의, 파랑 = 좋음/지금, 남색 = 그래프.
   화면별 파일은 배치(grid)만 정하고, 제목 줄, 지표 칸, 상태 표시, 범례 토글, 막대는 여기 것을 쓴다. */

/* ---------- 섹션 제목 줄: 제목 + 보조 글 + 오른쪽 링크, 아래 2px 검은 선 ---------- */
.dx-sec{display:flex;flex-direction:column;min-width:0}
.dx-sh{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;min-height:30px;padding-bottom:10px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.dx-sh>.dx-ttl{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.dx-sh h2{margin:0;font-size:17px;line-height:24px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.dx-tag{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.dx-sh .dx-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dx-more{display:inline-flex;align-items:center;gap:2px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink-2);background:none;border:0;padding:4px 0;cursor:pointer;white-space:nowrap}
.dx-more:hover{color:var(--ink)}
.dx-more .ico{width:14px;height:14px}

/* ---------- 지표 칸 (KPI): 칸 사이 1px 세로선, 줄 사이 1px 가로선 ---------- */
.dx-kpis{display:grid;grid-template-columns:repeat(var(--dx-n,4),minmax(0,1fr));border-bottom:1px solid var(--line)}
.dx-kpis.top{border-top:2px solid var(--ink)}
.dx-kc{display:flex;flex-direction:column;gap:5px;min-width:0;padding:18px 18px 18px 20px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.dx-kpis.c2{--dx-n:2}.dx-kpis.c3{--dx-n:3}.dx-kpis.c4{--dx-n:4}.dx-kpis.c5{--dx-n:5}
.dx-kpis.c2>.dx-kc:nth-child(2n+1),.dx-kpis.c3>.dx-kc:nth-child(3n+1),.dx-kpis.c4>.dx-kc:nth-child(4n+1),.dx-kpis.c5>.dx-kc:nth-child(5n+1){border-left:0;padding-left:0}
.dx-kpis.c2>.dx-kc:nth-child(-n+2),.dx-kpis.c3>.dx-kc:nth-child(-n+3),.dx-kpis.c4>.dx-kc:nth-child(-n+4),.dx-kpis.c5>.dx-kc:nth-child(-n+5){border-top:0}
.dx-k{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.dx-k .dx-more{font-size:12px;padding:0}
.dx-v{font-size:26px;line-height:1.15;font-weight:900;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dx-v.lg{font-size:32px}
.dx-v .u{font-size:.62em;font-weight:800;margin-left:1px}
.dx-v .dx-amt{display:block;font-size:12.5px;font-weight:700;letter-spacing:0;margin-top:2px}
.dx-s{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.dx-s b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.dx-s.sm{font-size:11.5px}
.dx-neg,.dx-s b.dx-neg{color:var(--c-coral-ink)}
.dx-pos{color:var(--ink)}

/* 숫자는 중간에서 줄이 바뀌지 않게 (Safari는 8,263,254 같은 수의 쉼표 뒤에서 줄을 바꿀 수 있음) */
.dx-v,.dx-s b,.dx-note b,.dx-lt b,.dx-row b,.dx-tot>*,.dx-k b{white-space:nowrap}

/* ---------- 상태 표시 (정상 / 주의 / 실행): 색만이 아니라 점과 글자로 ---------- */
.dx-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;line-height:1;border-radius:999px;padding:5px 10px;white-space:nowrap}
.dx-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dx-pill.ok{background:var(--c-ok-bg);color:var(--c-blue)}
.dx-pill.warn{background:var(--c-coral-soft);color:var(--c-coral-ink)}
.dx-pill.act{background:var(--c-coral-ink);color:#fff}
.dx-pill.mute{background:var(--surface-2);color:var(--ink-2)}

/* 화면 위 알림 띠 (확인 필요, 장부 점검, 리밸런싱): 흰 바탕 + 왼쪽 4px 색 선 */
.dx-flag{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;border:1px solid var(--line);border-left:4px solid var(--c-coral);border-radius:12px;background:var(--surface);padding:12px 16px;color:var(--ink)}
.dx-flag.ok{border-left-color:var(--c-blue)}
.dx-flag.act{border-left-color:var(--c-coral-ink)}
.dx-flag b{font-size:14px;font-weight:900}
.dx-flag .dx-s{font-size:12.5px;color:var(--ink-2)}
button.dx-flag{font:inherit;text-align:left;cursor:pointer;width:100%}

/* ---------- 범례 겸 켜고 끄기 버튼 (누르면 그래프에서 빼거나 다시 넣음) ----------
   묶음(dx-lgg) 하나 = 머리 글자(dx-lh) + 버튼들. 줄이 넘칠 때 묶음째 다음 줄로 가서 머리 글자만 줄 끝에 남지 않는다 */
.dx-lg{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:12px 0 6px}
.dx-lgg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.dx-lg .dx-lh{font-size:12px;font-weight:800;color:var(--ink);margin:0 2px 0 6px}
.dx-lg .dx-lh:first-child{margin-left:0}
.dx-lg .sp{flex:1}
.dx-lt{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:700;line-height:1;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 11px 6px 9px;cursor:pointer;min-height:30px}
.dx-lt i{width:10px;height:10px;border-radius:3px;flex:none}
.dx-lt i.ln{width:14px;height:3px;border-radius:2px}
.dx-lt b{font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dx-lt[aria-pressed="false"]{color:var(--ink-3);border-style:dashed;text-decoration:line-through}
.dx-lt[aria-pressed="false"] i{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--ink-4)}
.dx-reset{font:inherit;font-size:12px;font-weight:700;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.dx-note{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}

/* ---------- 진행 막대: 검정 채움, 초과는 코랄, 파란 세로선 = 오늘까지 기간 경과 ---------- */
.dx-bar{position:relative;height:10px;border-radius:5px;background:var(--surface-3)}
.dx-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--ink);max-width:100%}
.dx-bar>i.over{background:var(--c-coral)}
.dx-bar>i.navy{background:var(--c-navy)}
.dx-bar>em{position:absolute;top:-4px;width:2px;height:18px;background:var(--c-blue);transform:translateX(-1px)}
.dx-bar.sm{height:6px}.dx-bar.sm>em{top:-4px;height:14px}

/* ---------- 두 기간 비교 막대: 위 = 선택 기간(남색), 아래 = 비교 기간(옅은 남색), 같은 굵기, 2px 간격 ---------- */
.dx-pair{display:flex;flex-direction:column;gap:2px;min-width:0}
.dx-pair>i{display:block;height:8px;border-radius:0 4px 4px 0;background:var(--c-navy);min-width:0}
.dx-pair>i.pv{background:var(--c-ch3)}
.dx-sw{display:inline-block;width:14px;height:8px;border-radius:0 3px 3px 0;vertical-align:middle}

/* ---------- 목록 줄 ---------- */
.dx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink)}
.dx-row .tnum,.dx-num{font-variant-numeric:tabular-nums}
.dx-tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0 4px;border-top:2px solid var(--ink);font-weight:900}
.dx-tot>:last-child{font-size:17px;font-variant-numeric:tabular-nums}
.dx-empty{padding:18px 0;font-size:13px;color:var(--ink-3)}

/* ---------- 휴대폰 ---------- */
@media (max-width:767px){
  .dx-sh h2{font-size:17px}
  /* 두 칸으로 바꿀 때 PC용 nth-child 규칙(3n+1, -n+5 등)이 남지 않게 같은 구체성(:nth-child(n))으로 먼저 모두 되돌린 뒤 다시 정한다 */
  .dx-kpis.c3,.dx-kpis.c4,.dx-kpis.c5{--dx-n:2}
  .dx-kpis:is(.c3,.c4,.c5)>.dx-kc:nth-child(n){border-left:1px solid var(--line);padding-left:16px;border-top:1px solid var(--line)}
  .dx-kpis:is(.c3,.c4,.c5)>.dx-kc:nth-child(2n+1){border-left:0;padding-left:0}
  .dx-kpis:is(.c3,.c4,.c5)>.dx-kc:nth-child(-n+2){border-top:0}
  /* 칸 수가 홀수면 마지막 칸은 한 줄을 다 쓴다 */
  .dx-kpis:is(.c3,.c4,.c5)>.dx-kc:last-child:nth-child(2n+1){grid-column:1/-1}
  .dx-kc{padding:14px 12px 14px 16px}
  .dx-v{font-size:22px}
  .dx-v.lg{font-size:26px}
  .dx-k{font-size:12px}
  .dx-s{font-size:12.5px}
  .dx-lt{min-height:34px}
  .dx-flag{padding:12px 14px}
}

/* ---------- v72: 눌러서 보는 설명 ----------
   지표 칸(dx-kc.has-det): 이름 옆 작은 ⓘ, 누르면 칸 아래에 설명 카드. 섹션 제목 옆 ⓘ(dx-info)도 같은 카드 */
.dx-kc{position:relative}
.dx-kc.has-det{cursor:pointer;-webkit-tap-highlight-color:transparent}
.dx-kc.has-det>.dx-k{justify-content:flex-start;gap:4px}
.dx-kc.has-det>.dx-k::after,.dx-ib>i{content:"";display:inline-block;flex:none;width:13px;height:13px;background:var(--ink-4);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zM7.25 7h1.5v4.5h-1.5zM8 4.4a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zM7.25 7h1.5v4.5h-1.5zM8 4.4a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.dx-kc.has-det.open>.dx-k::after,.dx-info.open .dx-ib>i{background:var(--ink-2)}
@media (hover:hover){.dx-kc.has-det:hover>.dx-k::after,.dx-ib:hover>i{background:var(--ink-2)}}
.dx-pop{position:absolute;z-index:25;left:0;right:0;top:calc(100% - 8px);display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 28px rgba(21,23,28,.14);padding:11px 13px;font-size:12.5px;font-weight:400;line-height:1.6;color:var(--ink-2);text-align:left;white-space:normal;letter-spacing:0;cursor:default}
.dx-pop p,.dx-pop .dx-pl{display:block;margin:0}
.dx-pop p+p,.dx-pop .dx-pl+.dx-pl{margin-top:3px}
.dx-pop b{color:var(--ink);font-weight:800;white-space:nowrap}
.dx-pop .dx-neg{color:var(--c-coral-ink)}
.dx-pop .dx-more{font-size:12.5px;padding:2px 0 0}
.dx-info{position:relative;display:inline-flex;align-items:center;align-self:center}
.dx-ib{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-4px -4px -4px 0;padding:0;border:0;background:none;cursor:pointer;border-radius:6px}
.dx-info>.dx-pop{left:-4px;right:auto;top:calc(100% + 6px);width:min(320px,calc(100vw - 32px))}
/* v72: 지표 4칸은 1099px 이하(태블릿 포함)에서 2칸씩 두 줄 */
@media (max-width:1099px){
  .dx-kpis.c4{--dx-n:2}
  .dx-kpis.c4>.dx-kc:nth-child(n){border-left:1px solid var(--line);padding-left:16px;border-top:1px solid var(--line)}
  .dx-kpis.c4>.dx-kc:nth-child(2n+1){border-left:0;padding-left:0}
  .dx-kpis.c4>.dx-kc:nth-child(-n+2){border-top:0}
}