/* money-summary.css — 인생도감 「월급 설계 요약판」 (lifeplan.html 전용)
   ------------------------------------------------------------------
   styles.css 를 건드리지 않는다 — 그 파일은 9개 도감이 공유하므로
   한 도감의 요약판 때문에 고치면 다른 도감이 같이 흔들린다.
   색은 전부 styles.css 의 토큰(var(--…))을 쓰므로 라이트/다크 자동 대응.
   위계: L0 헤더 → L1 핵심 수치 3개 → L2 섹션 → L3 본문 */

.ms{
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  margin:0 0 18px; overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.5);
}

/* ---------- L0 헤더 ----------
   ★ 2026-09-06 사용자 명시: «펼치기/접기 버튼을 누르는 게 아니라 저 탭을 누르면 그냥 열리게».
     그래서 클릭 영역이 작은 버튼 하나가 아니라 **머리말 줄 전체**다.
     버튼은 «지금 열렸나 닫혔나»를 알려주는 표시로만 남기고 클릭은 안 받는다
     (버튼에도 onclick 을 두면 눌렀을 때 두 번 토글돼 아무 일도 안 일어난 것처럼 보인다). */
.ms-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px; background:var(--panel2); border-bottom:1px solid var(--line);
  cursor:pointer; user-select:none; transition:background .15s;
}
.ms-head:hover{ background:var(--rank-bg) }
.ms-head:hover .ms-fold{ color:var(--accent) }
.ms-head:hover h2{ color:var(--accent) }
.ms-head:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }
/* 왼쪽 끝의 얇은 띠 — «이 줄이 하나의 컨트롤»임을 눈으로 알린다 */
.ms-head::before{
  content:''; width:3px; align-self:stretch; margin:-2px 2px -2px 0;
  border-radius:2px; background:var(--accent); opacity:.55; flex:none; transition:opacity .15s;
}
.ms-head:hover::before{ opacity:1 }
.ms-head h2{
  font-size:var(--fs-h3); font-weight:700; color:var(--ink); letter-spacing:-.01em;
  line-height:1.3; margin:0;
}
.ms-head .ms-sub{ font-size:var(--fs-cap); color:var(--ink-dim); font-weight:500 }
.ms-head .ms-spacer{ flex:1 }
/* ⚠️ 테두리를 두르면 «버튼»으로 보여서 사람이 거기만 겨냥한다(실측 2026-09-06 — 사용자가 두 번 지적).
   지금은 줄 전체가 눌리므로, 이건 «지금 열렸나»를 알려주는 **표시**처럼 생겨야 한다. */
.ms-fold{
  border:0; background:transparent; color:var(--ink-dim);
  padding:5px 2px; font-size:var(--fs-cap);
  font-family:inherit; white-space:nowrap; transition:color .15s;
  pointer-events:none;                    /* 표시 전용 — 클릭은 머리말이 받는다 */
}

.ms-body{ padding:18px }
.ms.folded .ms-body{ display:none }

/* ---------- L1 핵심 수치 3개 ---------- */
.ms-kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px }
.ms-kpi > div{
  border:1px solid var(--line); border-radius:11px; padding:13px 14px;
  background:var(--bg); border-top:3px solid var(--k);
}
.ms-kpi .k-lab{ font-size:var(--fs-cap); color:var(--ink-dim); font-weight:600; letter-spacing:.02em }
/* 글자색은 --kt, 위쪽 띠는 --k 로 «분리»한다.
   실측 2026-09-06(라이트 테마): 하나로 쓰면 띠에 맞춘 밝은 색이 그대로 글자에 가서
   크림색 배경 위에서 대비가 2.3까지 떨어졌다. 띠는 장식이라 밝아도 되지만 숫자는 읽혀야 한다. */
.ms-kpi .k-num{
  font-size:var(--fs-h1); font-weight:800; color:var(--kt, var(--k)); line-height:1.15;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin:2px 0 1px;
}
.ms-kpi .k-num small{ font-size:var(--fs-lg); font-weight:700; margin-left:2px }
.ms-kpi .k-note{ font-size:var(--fs-sm); color:var(--ink-dim); line-height:1.5 }

/* ---------- L2 섹션 ---------- */
.ms-sec{ margin-top:22px }
.ms-sec:first-child{ margin-top:0 }
/* 접이식 섹션은 h3 가 summary 안에 있어 `.ms-sec > h3` 로는 안 잡힌다 — 두 형태를 같이 건다.
   빠뜨리면 그 섹션만 강조 바·글자 크기·여백이 통째로 빠진다(실측 2026-09-06). */
.ms-sec > h3, .ms-det > summary > h3{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-md); font-weight:700; color:var(--ink); margin:0 0 11px;
}
.ms-sec > h3::before, .ms-det > summary > h3::before{
  content:''; width:3px; height:15px; border-radius:2px; background:var(--accent); flex:none;
}
.ms-sec > h3 .h-note, .ms-det > summary > h3 .h-note{ font-size:var(--fs-cap); font-weight:500; color:var(--ink-dim) }

/* ---------- 스택 바 ---------- */
.ms-bar{ display:flex; height:30px; border-radius:8px; overflow:hidden; border:1px solid var(--line) }
.ms-bar span{
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#12100d; white-space:nowrap; overflow:hidden;
}
.ms-legend{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:7px; margin-top:11px }
.ms-legend > div{ display:flex; gap:9px; align-items:flex-start; font-size:var(--fs-sm); line-height:1.55 }
.ms-legend i{ width:11px; height:11px; border-radius:3px; flex:none; margin-top:5px }
.ms-legend b{ color:var(--ink); font-weight:700 }
.ms-legend .lg-v{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums }
.ms-legend .lg-d{ display:block; color:var(--ink-dim); font-size:var(--fs-cap); line-height:1.5 }

/* ---------- 할 일 (번호) ---------- */
.ms-todo{ display:grid; gap:8px; counter-reset:ms }
.ms-todo > li{
  list-style:none; display:flex; gap:11px; align-items:flex-start;
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; background:var(--bg);
}
.ms-todo > li::before{
  counter-increment:ms; content:counter(ms);
  width:22px; height:22px; border-radius:50%; flex:none; margin-top:1px;
  background:var(--accent); color:#12100d; font-weight:800; font-size:var(--fs-cap);
  display:flex; align-items:center; justify-content:center;
}
.ms-todo .t-h{ font-size:var(--fs-base); font-weight:700; color:var(--ink); line-height:1.45 }
.ms-todo .t-d{ font-size:var(--fs-sm); color:var(--ink-dim); line-height:1.6; margin-top:2px }
.ms-todo .t-d b{ color:var(--ink-soft) }

/* ---------- 꼬리말 ---------- */
.ms-foot{
  margin-top:18px; padding-top:13px; border-top:1px dashed var(--line);
  font-size:var(--fs-cap); color:var(--ink-mute); line-height:1.65;
}
.ms-foot b{ color:var(--ink-dim) }

/* ---------- 접이식 섹션 (details) ---------- */
.ms-det{ border:1px solid var(--line); border-radius:11px; background:var(--bg); overflow:hidden }
.ms-det > summary{
  list-style:none; cursor:pointer; padding:11px 13px; user-select:none;
  display:flex; align-items:center; gap:8px; transition:background .15s;
}
.ms-det > summary::-webkit-details-marker{ display:none }
.ms-det > summary::after{
  content:'▾'; margin-left:auto; color:var(--ink-dim); font-size:12px; transition:transform .18s;
}
.ms-det[open] > summary::after{ transform:rotate(180deg) }
.ms-det > summary:hover{ background:var(--panel2) }
.ms-det > summary > h3{ margin:0 }
.ms-det-body{ padding:0 13px 13px }

/* ---------- 안내문 ---------- */
.ms-note{
  font-size:var(--fs-sm); color:var(--ink-dim); line-height:1.65; margin-bottom:10px;
  padding-left:9px; border-left:2px solid var(--line);
}
.ms-note b{ color:var(--ink-soft) }

/* ---------- 표 ---------- */
.ms-tblwrap{ overflow-x:auto; border:1px solid var(--line); border-radius:9px }
.ms-tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:520px }
.ms-tbl th{
  text-align:left; font-size:var(--fs-cap); font-weight:700; color:var(--ink-dim);
  background:var(--panel2); padding:8px 11px; border-bottom:1px solid var(--line); white-space:nowrap;
}
/* 숫자 칸의 머리글은 «그 칸과 같은 쪽»으로 붙어야 축이 맞는다.
   실측 2026-09-06: 머리글은 왼쪽·값은 오른쪽이라 「청약」과 그 아래 금액이 서로 다른 자리에 있었다. */
.ms-tbl th.num{ text-align:right }
.ms-tbl th .th-sub{
  display:block; font-weight:500; font-size:11px; color:var(--ink-mute);
  letter-spacing:0; margin-top:1px;
}
.ms-tbl td{ padding:9px 11px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55; color:var(--ink-soft) }
.ms-tbl tr:last-child td{ border-bottom:none }
.ms-tbl td b{ color:var(--ink); font-weight:700 }
.ms-tbl .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:700 }
.ms-tbl .td-d{ display:block; font-size:var(--fs-cap); color:var(--ink-dim); font-weight:400; line-height:1.5; margin-top:2px }
.ms-tbl tr.sub td{ background:var(--panel2) }
.ms-tbl tr.tot td{ background:var(--rank-bg) }
/* 합계 행은 «답이 적힌 줄»이다 — 여기서 색으로 멋을 내면 가장 중요한 줄이 가장 안 읽힌다.
   실측 2026-09-06: --accent(주황)를 라이트 테마의 크림색 --rank-bg 위에 얹어 대비 1.87 이었다.
   글자는 --ink(양쪽 테마에서 뒤집히는 토큰)로 두고, 강조는 왼쪽 띠로만 한다. */
.ms-tbl tr.tot td b, .ms-tbl tr.tot .num{ color:var(--ink); font-weight:800 }
.ms-tbl tr.tot td:first-child{ box-shadow:inset 3px 0 0 var(--accent) }
.ms-tbl tr.tot td{ border-top:1px solid var(--accent) }
.ms-tbl tr.v-skip td{ opacity:.6 }
.ms-tbl tr.v-skip td b{ text-decoration:line-through; text-decoration-color:var(--ink-mute) }
/* ---------- 모바일 ---------- */
@media (max-width:760px){
  .ms-body{ padding:14px }
  .ms-head{ padding:12px 14px }
  .ms-kpi{ grid-template-columns:1fr; gap:9px }
  .ms-kpi .k-num{ font-size:var(--fs-h2) }
  .ms-bar{ height:26px }
  .ms-bar span{ font-size:0 }           /* 좁은 화면에서는 막대만, 수치는 범례로 */
  .ms-legend{ grid-template-columns:1fr }
}