/* 전문가 화면(/lab/) — AI Portfolio Investing 전문가 셸과 같은 모양(사용자 요청 2026-09-25: "색상을 제외하면 최대한 똑같이").
   치수·글자는 공개 포털 머리(portal/index.html)와 자산배분 On-Off(risk_on_off/ui/app.py, Streamlit)의 계산된 값을 그대로 옮겼다:
   머리 46px · 브랜드 칸 256px(13.5px/800, 마크 26px) · 앱 탭(아이콘 13.5 + 이름 12.7px/700 + 점 8px, 선택 = 아래 2.4px 선 + 연한 바탕)
   · 책 12px/700 · 언어 11px/700 · 사이드바 256px(안쪽 좌우 10px, 제목 18px/600, 설명 14px) · 본문 16px/1.6, 안쪽 17.6px 80px
   · ①~⑧ 단추(15.2px, 6px 14px, 테두리 0.8px, 모서리 8px) · 제목 h2 36px/600 · 소제목 24px/600 · 표 13.76px(머리칸 11.84px/600)
   · 지표(이름 14px, 값 36px/400) · 접기(테두리 0.8px, 모서리 8px, 머리 4px 12px).
   색만 다르다: 포털 파랑(#2b4c9b) 대신 은퇴 청록(--ret-*, 색 A). 사다리 M1~M5 파랑과 회사 육각형 마크는 그대로.
   글꼴은 Pretendard(OFL, AIPI 와 통일 — 사용자 결정 2026-09-26) 부분집합, 원본 파일이 오기 전에는 Noto Sans KR — 폴백에 맑은 고딕을 두지 않는다. 이모지·글꼴에 없는 기호는 쓰지 않는다(아이콘은 SVG). */
:root {
  --lx-accent: var(--ret-accent, #0e6b6b); --lx-accent-ink: var(--ret-accent-ink, #0a5152); --lx-soft: var(--ret-accent-soft, #e3f2f1);
  --lx-aline: var(--ret-accent-line, #a9d3cf); --lx-side: var(--ret-sidebar, #edf3f2);
  --lx-ink: #12161f; --lx-text: rgb(49, 51, 63); --lx-muted: #5b6475; --lx-line: #d9dde7; --lx-line2: rgba(49, 51, 63, .2);
  --lx-warn: #8a5a00; --lx-warn-soft: #fdf3dc;
  --m1: #cfe6ff; --m2: #9fd3ff; --m3: #5fb4f5; --m4: #2f86e0; --m5: #164ed8;
  --gd-accent: var(--lx-accent); --gd-accent-soft: var(--lx-soft); --gd-panel-head: var(--ret-panel, #0a3a3b);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--lx-text); font: 400 16px/1.6 "Pretendard", "Noto Sans KR", sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
code, pre, kbd, samp { font-family: inherit; }
a { color: var(--lx-accent); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.lx-skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 12px; z-index: 60; } .lx-skip:focus { left: 8px; }

/* ── 머리 (포털 header) ── */
.lx-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; padding: 8px 14px 0 0; height: 46px; background: #fff; border-bottom: 0.8px solid var(--lx-line); color: var(--lx-ink); font-weight: 700; }
.lx-brand { flex: 0 1 256px; min-width: 140px; max-width: 256px; align-self: stretch; margin-top: -8px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 14px;
  color: var(--lx-ink); text-decoration: none; font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; }
.lx-brand svg { width: 26px; height: 26px; flex: none; display: block; }
.lx-brand:hover .lx-brand-name { color: var(--lx-accent); }
.lx-brand-name { overflow: hidden; text-overflow: ellipsis; }
.lx-apps { display: flex; gap: 2px; flex: 1; overflow-x: auto; align-self: stretch; align-items: flex-start; scrollbar-width: none; }
.lx-app { display: flex; align-items: center; gap: 6px; padding: 7px 7px 9px; border-bottom: 2.4px solid transparent; color: var(--lx-muted); text-decoration: none; white-space: nowrap; font-size: 16px; font-weight: 700; }
.lx-app:hover { background: #f2f5f5; }
.lx-app .ico { display: inline-flex; width: 16px; height: 16px; color: var(--lx-muted); } .lx-app .ico svg { width: 16px; height: 16px; }
.lx-app .nm { font-size: 13.7px; font-weight: 700; color: var(--lx-ink); }
.lx-app[aria-selected="true"] { border-bottom-color: var(--lx-accent); background: var(--lx-soft); }
.lx-app[aria-selected="true"] .nm, .lx-app[aria-selected="true"] .ico { color: var(--lx-accent); }
.lx-app .dot { width: 8px; height: 8px; border-radius: 50%; background: #c9d0dc; flex: none; } .lx-app .dot.on { background: #2f9e44; }
html.gd-open .lx-apps { gap: 0; } html.gd-open .lx-app { padding-left: 4px; padding-right: 4px; }
/* 쉬운 화면 = [책]·언어 단추와 같은 모양의 버튼 링크(사용자 지시 2026-09-25, 메인 전달) — 링크라 JS 없이 이동, mode.js 가 선택 기억 */
.lx-easy { flex: none; display: inline-flex; align-items: center; margin: 0 8px 8px 6px; padding: 4px 10px; border: 0.8px solid var(--lx-line); border-radius: 7px; background: #fff;
  color: var(--lx-ink); font-size: 13px; font-weight: 700; line-height: 1.6; text-decoration: none; white-space: nowrap; }
.lx-easy:hover, .lx-easy:focus-visible { border-color: var(--lx-accent); color: var(--lx-accent); }
.lx-books-btn { display: flex; align-items: center; gap: 6px; flex: none; border: 0.8px solid var(--lx-line); background: #fff; color: var(--lx-ink); border-radius: 7px; padding: 4px 10px; margin: 0 0 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
.lx-books-btn:hover { border-color: var(--lx-accent); color: var(--lx-accent); }
.lx-lang { display: flex; align-items: center; gap: 6px; padding: 0 4px 8px 10px; flex: none; }
.lx-lang button { border: 0.8px solid var(--lx-line); background: #fff; color: var(--lx-muted); border-radius: 6px; padding: 3px 9px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.lx-lang button[aria-pressed="true"] { background: var(--lx-accent); border-color: var(--lx-accent); color: #fff; }

/* ── 앱 본체 = 사이드바 256px + 본문 (Streamlit 앱) ── */
main#main { container-type: inline-size; container-name: labbody; }
.lab-app { display: grid; grid-template-columns: minmax(0, 1fr); color: var(--lx-text); }
@container labbody (min-width: 900px) { .lab-app { grid-template-columns: 256px minmax(0, 1fr); } }
.lx-side { background: var(--lx-side); padding: 0 10px 24px; min-width: 0; font-size: 14px; line-height: 1.6; }
@container labbody (min-width: 900px) { .lx-side { min-height: calc(100vh - 46px); } }
@container labbody (max-width: 899px) { .lx-side { padding-bottom: 4px; } }
.lx-side-in { padding: 34px 10px 0; }
.lx-side-app { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.09px; padding: 12px 0 16px; margin: 0; color: var(--lx-text); }
.lx-side-app svg { width: 20px; height: 20px; color: var(--lx-accent); flex: none; }
.lx-side-cap { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #808495; }
.lx-side h3 { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
.lx-side > details > summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 10px 10px 0; list-style: revert; }
@container labbody (min-width: 900px) { .lx-side > details > summary { display: none; } }
.lx-grp { display: block; margin: 0 0 14px; }
.lx-grp > span { display: block; font-size: 14px; font-weight: 400; margin: 0 0 6px; color: var(--lx-text); }
.chip { border: 0.8px solid var(--lx-line2); background: #fff; border-radius: 8px; padding: 2px 10px; font: inherit; font-size: 14px; line-height: 1.6; min-height: 30px; margin: 0 4px 6px 0; cursor: pointer; color: var(--lx-text); }
.chip:hover { border-color: var(--lx-accent); color: var(--lx-accent); }
.chip[aria-pressed="true"] { border-color: var(--lx-accent); background: var(--lx-accent); color: #fff; }
.lx-bar { display: block; }
.lx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.lx-tabs button { border: 0.8px solid var(--lx-line); background: #fff; border-radius: 8px; padding: 6px 14px; font: inherit; font-size: 15.2px; color: var(--lx-text); cursor: pointer; }
.lx-tabs button[aria-selected="true"] { background: var(--lx-soft); border-color: var(--lx-aline); }
/* 근거는 사이드바에서 ⓘ 접기로(처음엔 접힘) */
.lx-ev { margin: 14px 0 0; font-size: 13.76px; line-height: 1.6; color: var(--lx-muted); }
.lx-ev > details > summary { cursor: pointer; color: var(--lx-text); font-size: 14px; }
.lx-ev dl { margin: 8px 0 0; } .lx-ev dt { color: var(--lx-text); margin-top: 8px; } .lx-ev dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.lx-ev ul { margin: 10px 0 0; padding-left: 16px; } .lx-ev .ch { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.lx-strip { margin: 22px 0 0; padding-top: 12px; border-top: 0.8px solid var(--lx-line); font-size: 13.76px; line-height: 1.6; color: var(--lx-muted); font-variant-numeric: tabular-nums; }
.lx-strip span { display: block; } .lx-strip b { font-weight: 400; margin-right: 6px; }
.lx-hash { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ── 본문 (Streamlit block container) ── */
.lx-main { padding: 17.6px 80px 16px; min-width: 0; }
@container labbody (max-width: 899px) { .lx-main { padding: 16px 16px 24px; } }
.lx-steps { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 4px; margin: 0 0 8px; }
.lx-steps a { display: inline-block; background: #fff; border: 0.8px solid var(--lx-line); border-radius: 8px; padding: 6px 14px; font-size: 15.2px; line-height: 1.6; color: var(--lx-text); text-decoration: none; }
.lx-steps a:hover { border-color: var(--lx-aline); }
.lx-steps a[aria-current="page"] { background: var(--lx-soft); border-color: var(--lx-aline); color: var(--lx-accent); }
.lab-app h1 { font-size: 36px; font-weight: 600; line-height: 1.2; padding: 16px 0; margin: 0; color: var(--lx-text); }
@container labbody (max-width: 899px) { .lab-app h1 { font-size: 28px; } }
.lx-hd { display: block; margin: 0; } .lx-hd .meta { display: block; font-size: 14px; line-height: 1.6; margin: -8px 0 16px; color: #808495; }
.ribbon { background: var(--lx-warn-soft); color: var(--lx-warn); border-radius: 8px; padding: 12px 16px; margin: 8px 0 12px; font-size: 14px; }
.fixed { background: var(--lx-soft); border-left: 3px solid var(--lx-accent); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 14px; margin: 4px 0 16px; color: #384152; }
.fixed p { margin: 0; }
.note { color: var(--lx-muted); font-size: 13.76px; line-height: 1.6; margin: 8px 0 0; }
.lx-more { margin: 10px 0 0; border: 0.8px solid var(--lx-line2); border-radius: 8px; }
.lx-more > summary { cursor: pointer; padding: 4px 12px; min-height: 38px; display: flex; align-items: center; font-size: 14px; color: var(--lx-text); list-style: none; }
.lx-more > summary::before { content: "i"; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--lx-muted); color: var(--lx-muted); font-size: 11px; font-weight: 700; flex: none; }
.lx-more[open] > summary { border-bottom: 0.8px solid var(--lx-line2); }
.lx-more > div { padding: 4px 12px 10px; }
.lx-metrics { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 16px; }
@container labbody (min-width: 1000px) { .lx-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lx-metric { min-width: 0; } .lx-metric .k { font-size: 14px; line-height: 1.6; } .lx-metric .v { font-size: 36px; font-weight: 400; line-height: 1.6; padding: 0 0 4px; font-variant-numeric: tabular-nums; }
.lx-metric .s { font-size: 13.76px; color: var(--lx-muted); }
.lx { display: grid; gap: 8px 32px; align-items: start; grid-template-columns: minmax(0, 1fr); }
/* 포털 모양에서는 한 줄로 쌓는다(On-Off 본문처럼) */
.lx-pane { min-width: 0; padding: 0; background: none; border: 0; }
.lx-pane h2 { font-size: 24px; font-weight: 600; line-height: 1.2; padding: 8px 0 16px; margin: 16px 0 0; color: var(--lx-text); }
.lx-pane h2.more { margin-top: 16px; }
.lx-scroll { overflow-x: auto; max-width: 100%; }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.6; background: #fff; border: 0.8px solid var(--lx-line); border-radius: 8px; margin: 4px 0 16px; overflow: hidden; }
table.t th, table.t td { padding: 6px 8px; text-align: right; white-space: nowrap; vertical-align: top; font-variant-numeric: tabular-nums; border-top: 0.8px solid rgba(49, 51, 63, .1); }
table.t thead th { font-size: 14px; font-weight: 600; color: var(--lx-muted); background: #eef1f6; border-top: 0; vertical-align: bottom; }
table.t thead tr + tr th { border-top: 0.8px solid rgba(49, 51, 63, .1); }
table.t th:first-child, table.t td:first-child { text-align: left; white-space: normal; min-width: 11em; }
table.t thead tr + tr th:first-child { text-align: right; min-width: 0; }
table.t td.l, table.t th.l { text-align: left; white-space: normal; min-width: 9em; }
table.t th.g { text-align: center; }
table.t tr.core td { background: var(--lx-soft); }
table.t tr.sec td { background: #f7f8fa; color: var(--lx-muted); font-size: 13px; font-weight: 600; text-align: left; }
table.t tr.sel td, table.t td.sel { font-weight: 700; }
table.t small { color: var(--lx-muted); font-weight: 400; font-size: 13px; }
table.t tr[data-kpi], table.t tr[data-unit], table.t tr[data-hash] { cursor: pointer; }
table.t tr[aria-current="true"] td { background: var(--lx-soft); }
table.lad { width: 100%; max-width: 900px; border-collapse: separate; border-spacing: 3px; font-size: 14px; }
table.lad th { font-weight: 600; color: var(--lx-muted); font-size: 13px; padding: 2px; text-align: center; }
table.lad th[scope=row] { text-align: left; color: var(--lx-text); font-size: 14px; white-space: nowrap; padding-right: 6px; }
table.lad td { text-align: center; border-radius: 4px; padding: 5px 0; font-weight: 700; min-width: 24px; }
table.lad tr.sel th[scope=row] { color: var(--lx-accent); }
.m1 { background: var(--m1); color: #12305e; } .m2 { background: var(--m2); color: #12305e; } .m3 { background: var(--m3); color: #0b1f44; } .m4 { background: var(--m4); color: #fff; } .m5 { background: var(--m5); color: #fff; }
.lx-hatch { background: repeating-linear-gradient(45deg,#dfe6e6 0 4px,#f2f5f5 4px 8px); color: var(--lx-muted); }
.badge { display: inline-block; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
.badge.pub { background: var(--lx-soft); color: var(--lx-accent-ink); border: 0.8px solid var(--lx-aline); }
.badge.cmp { background: #eef1f6; color: var(--lx-muted); } .badge.wait { background: var(--lx-warn-soft); color: var(--lx-warn); }
.lx-chart { max-width: 760px; background: #fff; border: 0.8px solid var(--lx-line); border-radius: 8px; margin: 4px 0 8px; } .lx-chart svg { width: 100%; height: auto; display: block; }
.lx-cards { display: grid; gap: 10px; margin: 8px 0 16px; grid-template-columns: minmax(0, 1fr); }
@container labbody (min-width: 700px) { .lx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container labbody (min-width: 1100px) { .lx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lx-card { display: block; background: #fff; border: 0.8px solid var(--lx-line); border-radius: 8px; padding: 12px 14px; text-decoration: none; color: var(--lx-text); }
.lx-card:hover { border-color: var(--lx-aline); } .lx-card b { font-size: 16px; font-weight: 600; } .lx-card .n { color: var(--lx-accent); margin-right: 4px; }
.lx-card p { margin: 4px 0 0; font-size: 14px; } .lx-card .f { font-size: 13.76px; color: var(--lx-muted); margin-top: 6px; }
.lx-sec h2 { font-size: 24px; font-weight: 600; margin: 16px 0 8px; } .lx-sec h2:first-child { margin-top: 0; } .lx-sec p, .lx-sec li { font-size: 16px; } .lx-sec ul { padding-left: 20px; margin: 4px 0; }
.lx-miss { color: var(--lx-warn); background: var(--lx-warn-soft); border-radius: 8px; padding: 8px 12px; font-size: 14px; margin: 8px 0; }
.lx-dp { display: grid; gap: 12px; margin: 0 0 16px; grid-template-columns: minmax(0, 1fr); }
@container labbody (min-width: 900px) { .lx-dp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-dp > div { background: #fff; border: 0.8px solid var(--lx-line); border-radius: 8px; padding: 12px 16px; }
.lx-dp h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; } .lx-dp ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; } .lx-dp p { margin: 6px 0 0; font-size: 14px; }

/* ── 바닥 · 책 팝업 · 알림 ── */
.lx-legal { color: var(--lx-muted); font-size: 13px; line-height: 1.6; border-top: 0.8px solid var(--lx-line); padding: 12px 24px 28px; }
@container labbody (min-width: 0px) { .lx-legal { } }
.lx-legal p { margin: 0 0 6px; } .lx-legal a { color: var(--lx-muted); }
.lx-modal { position: fixed; inset: 0; z-index: 50; background: rgba(10,16,32,.5); display: flex; align-items: center; justify-content: center; padding: 18px; }
.lx-modal-card { width: min(720px, 100%); max-height: 84vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(10,20,50,.35); padding: 16px 20px 20px; color: var(--lx-ink); }
.lx-modal-head { display: flex; align-items: baseline; gap: 10px; }
.lx-modal-head h2 { margin: 0; font-size: 17px; flex: 1; }
.lx-modal-x { border: 0; background: none; color: var(--lx-muted); font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.lx-modal-x:hover { background: #f2f4f9; color: var(--lx-ink); }
.lx-modal-note { margin: 0 0 12px; color: var(--lx-muted); font-size: 13px; }
.lx-booklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lx-bk { display: flex; gap: 14px; padding-top: 14px; border-top: 1px solid var(--lx-line); } .lx-bk:first-child { padding-top: 0; border-top: 0; }
.lx-bk-cov { flex: none; width: 72px; height: 108px; object-fit: cover; border-radius: 4px; border: 1px solid var(--lx-line); background: #eef1f6; display: block; }
.lx-bk-none { background: repeating-linear-gradient(45deg,#e3f2f1 0 6px,#f5f8f8 6px 12px); }
.lx-bk-body { min-width: 0; flex: 1; }
.lx-bk-vol { color: var(--lx-muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.lx-bk-title { font-size: 15.5px; font-weight: 800; margin-top: 2px; }
.lx-bk-sub { color: var(--lx-accent); font-size: 13px; font-weight: 600; margin-top: 1px; }
.lx-bk-blurb { margin: 6px 0 8px; color: var(--lx-muted); font-size: 13px; line-height: 1.5; }
.lx-bk-links { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; }
.lx-bk-links a { display: inline-block; border: 1px solid var(--lx-line); border-radius: 6px; padding: 4px 10px; color: var(--lx-ink); text-decoration: none; font-weight: 700; }
.lx-bk-links a.go { background: var(--lx-accent); border-color: var(--lx-accent); color: #fff; }
.lx-bk-links .soon { border: 1px dashed var(--lx-line); border-radius: 6px; padding: 4px 10px; color: var(--lx-muted); }
.lx-toast { position: fixed; left: 50%; top: 72px; transform: translateX(-50%); z-index: 55; background: var(--lx-ink); color: #fff; font-size: 13px; border-radius: 8px; padding: 8px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* ── 좁은 폭(포털 760px 규칙과 같게): 머리 두 줄, 앱 탭은 가로로 밀어 넘김 ── */
@media (max-width: 760px) {
  .lx-top { flex-wrap: wrap; height: auto; padding: 6px 0 0 0; position: static; }
  .lx-brand { flex: 1 1 auto; max-width: none; justify-content: flex-start; margin-top: 0; padding: 2px 12px 6px; }
  .lx-books-btn { display: none; }
  .lx-easy { order: 2; margin: 0 8px 6px 0; }
  .lx-lang { order: 3; padding: 0 10px 6px 0; }
  .lx-apps { order: 4; flex: 1 0 100%; border-top: 0.8px solid var(--lx-line); padding: 0 6px; }
  .lx-app { padding: 7px 10px 8px; } .lx-app .nm { font-size: 13.7px; }
}
@media print { .lx-top, .lx-side, .lx-steps { display: none; } .lab-app { display: block; } }

/* ── 한 줄 현황 · 큰 숫자 카드 · 지표 설명(메인 2026-09-25) ── */
.lx-verdict > p { margin: 0; font-weight: 600; }
.lx-verdict .lx-more { background: #fff; margin-top: 8px; }
/* 요약 상자 한 모양(사용자 2026-10-01): ② 정책 실험실과 같게 — '자세히'가 붙은 모든 .fixed 상자(① 입구 · ⑦ 실행 등, en·es 포함)는
   첫 줄 굵게 · '자세히' 칸 흰 바탕. 상자는 본문 폭 안에 머문다(긴 낱말·주소도 줄바꿈). */
.fixed { box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; }
.fixed:has(> .lx-more) > p:first-child { font-weight: 600; }
.fixed > .lx-more { background: #fff; margin-top: 8px; }
.lx-dp .sm, .lx-dp p.sm { font-size: 13.5px; color: var(--lx-muted); margin: 6px 0 0; line-height: 1.55; }
.lx-tile { border-top: 0.8px solid var(--lx-line); padding: 8px 0 4px; } .lx-dp h3 + .lx-tile { border-top: 0; padding-top: 2px; }
.lx-tile .nm { font-size: 14px; color: var(--lx-text); }
.lx-tile .nums { display: flex; gap: 24px; flex-wrap: wrap; }
.lx-tile .nums > div { display: flex; flex-direction: column; min-width: 0; }
.lx-tile .v { font-size: 26px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--lx-ink); }
.lx-tile.big .v { font-size: 36px; }
.lx-tile .k { font-size: 13px; color: var(--lx-muted); }
.lx-metric .k { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lx-tip { display: inline; }
.lx-tip > summary { display: inline-flex; list-style: none; cursor: pointer; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--lx-muted); align-items: center; justify-content: center; vertical-align: middle; }
.lx-tip > summary::-webkit-details-marker { display: none; }
.lx-tip > summary::before { content: "i"; font-size: 10.5px; font-weight: 700; color: var(--lx-muted); line-height: 1; }
.lx-tip[open] > summary { background: var(--lx-soft); border-color: var(--lx-accent); }
.lx-tip > p { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--lx-muted); background: #f7f8fa; border-radius: 6px; padding: 6px 8px; }
.lx-soon { font-size: 16px; color: var(--lx-muted); margin: 0 0 24px; }
.lx-more > summary::-webkit-details-marker { display: none; }

/* ── 패밀리 오피스 원고(홈페이지 쪽 article 을 그대로 실음) ── */
.lx-art { max-width: 920px; }
.lx-art .lx-sec { margin: 10px 0 0; }
.lx-art .lx-sec > summary { font-size: 17px; font-weight: 600; min-height: 44px; }
.lx-art .lx-sec > div { padding: 8px 16px 14px; }
.lx-art h3 { font-size: 18px; font-weight: 600; margin: 18px 0 6px; }
.lx-art p, .lx-art li { font-size: 15.5px; line-height: 1.7; }
.lx-art .lead { font-size: 16px; color: var(--lx-muted); }
.lx-art blockquote { margin: 12px 0; padding: 10px 16px; background: var(--lx-soft); border-left: 3px solid var(--lx-accent); border-radius: 0 8px 8px 0; }
.lx-art blockquote p { margin: 4px 0; }
.lx-art .scroll { overflow-x: auto; max-width: 100%; }
.lx-art table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; border: 0.8px solid var(--lx-line); border-radius: 8px; margin: 8px 0 14px; overflow: hidden; }
.lx-art th, .lx-art td { padding: 6px 8px; text-align: left; vertical-align: top; border-top: 0.8px solid rgba(49, 51, 63, .1); }
.lx-art thead th { font-size: 14px; font-weight: 600; color: var(--lx-muted); background: #eef1f6; border-top: 0; }
.lx-art .grid2 { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@container labbody (min-width: 900px) { .lx-art .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-art .card, .lx-art .form-sheet { border: 0.8px solid var(--lx-line); border-radius: 8px; padding: 12px 14px; background: #fff; }
.lx-art .blank { border-bottom: 1px dashed #b9c2cf; min-height: 26px; margin: 4px 0; }
.lx-art .note { color: var(--lx-muted); font-size: 13.76px; }

/* ── 불러오는 중(메인 2026-09-25: 빈칸 대신 뼈대) — 담아 둔 첫 화면 자료가 없는 쪽에서만 잠깐 ── */
.lx-loadbar { position: relative; overflow: hidden; margin: 0 0 10px; padding: 6px 12px; border-radius: 8px; background: var(--lx-soft); color: var(--lx-accent-ink); font-size: 13px; }
.lx-loadbar::after { content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: lx-sweep 1.1s linear infinite; }
@keyframes lx-sweep { to { left: 100%; } }
/* 표 전체를 가리지 않는다 — 블록마다 자기 파일이 오면 바로 채워지고, 아직 없는 칸만 "—" (서버 운영 원칙 2026-09-25) */
@keyframes lx-shim { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lx-loadbar::after { animation: none; } }

/* 책 팝업 "다른 언어" 칩(포털 .bk-other 그대로) */
.lx-bk-links { align-items: center; }
.lx-bk-links a:hover { border-color: var(--lx-accent); color: var(--lx-accent); }
.lx-bk-links a.go:hover { color: #fff; opacity: .9; }
.lx-bk-other { color: var(--lx-muted); display: flex; align-items: center; gap: 6px; }
.lx-bk-other a { padding: 3px 8px; font-size: 13px; font-weight: 700; }

/* 인출 비교기 그림(2026-09-25) — 막대 하나 넓게, 선·산점도는 넓은 폭에서 나란히 */
.lx-charts .lx-chart { max-width: 820px; }
.lx-chart2 { display: grid; gap: 8px 28px; grid-template-columns: minmax(0, 1fr); }
@container labbody (min-width: 1250px) { .lx-chart2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-chart2 h2 { font-size: 20px; }
.lx-src { margin: 2px 0 14px; font-size: 13px; }
/* 좁은 폭: 그림 글자가 너무 작아지지 않게 그림 안에서만 가로로 밀어 본다(표와 같은 방식, 쪽 넘침 0) */
@container labbody (max-width: 700px) { .lx-charts .lx-chart, .lx-draw-age .lx-chart { overflow-x: auto; } .lx-charts .lx-chart svg, .lx-draw-age .lx-chart svg { min-width: 440px; } }

/* 글자 하한(메인 검수 2026-09-25 #1): 본문 15~16 · 표 14 · 보조 13px. 넓은 표는 .lx-scroll 로 그 표만 가로 스크롤. */
.lx-na { color: var(--lx-muted); text-align: left !important; }
.lx-art sup { font-size: 13px; }
/* 머리 글자도 보조 하한 13px 이상(메인 실측 2026-09-25) — 포털 값(12.7·12·11px)보다 조금 크다 */
/* 휴대폰(≤480px): 머리를 두 줄(브랜드·쉬운 화면·언어 / 앱 탭)로 — 아직 준비 중인 EN·ES 단추는 숨기고 한국어만 */
@media (max-width: 480px) {
  .lx-lang button[data-lang] { display: none; }
  .lx-brand { padding: 2px 10px 6px; gap: 7px; }
  .lx-easy { margin: 0 6px 6px 0; padding: 4px 9px; }
}
/* 책 팝업 시리즈 머리(사용자 결정 2026-09-25: 위 AI 퇴직연금 투자 · 아래 AI 포트폴리오 투자) */
.lx-booklist .lx-bk-series { list-style: none; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--lx-accent-ink); border-bottom: 1px solid var(--lx-aline); padding: 4px 0 6px; margin-top: 6px; }
.lx-booklist .lx-bk-series + .lx-bk { border-top: 0; padding-top: 0; }
/* 언어 칸의 판 전환 링크(영문판 ↔ 한국어판, 2026-09-25) — 단추와 같은 모양 */
.lx-lang a { border: 0.8px solid var(--lx-line); background: #fff; color: var(--lx-muted); border-radius: 6px; padding: 3px 9px; font-size: 13px; font-weight: 700; text-decoration: none; }
.lx-lang a:hover { border-color: var(--lx-accent); color: var(--lx-accent); }

/* 패밀리 사이트 드롭다운(공용 family.js) — 포털처럼 도서 팝업 바닥과 바닥글에(개편 A 2026-09-26) */
.lx-fam { --fam-bg:#fff; --fam-fg:#12161f; --fam-line:#d9dde7; --fam-hover:rgba(0,0,0,.06); margin-top: 6px; font-size: 13px; }
.lx-fam .fam, .lx-fam .fam summary, .lx-fam .fam a, .lx-fam .fam span, .lx-fam .fam small { font-size: 13px; }