/* ============================================================
자산관리 — 애플풍 미니멀 라이트 (설계서 R2 §6, 참고: Input/app.css 토큰)
폰트: Pretendard/Inter 로컬 번들(static/fonts), 미배치 시 시스템 폴백.
============================================================ */
@font-face{font-family:'Pretendard';src:url('../fonts/Pretendard-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Pretendard';src:url('../fonts/Pretendard-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Pretendard';src:url('../fonts/Pretendard-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
--font-sans:'Pretendard','Inter',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI','Malgun Gothic',sans-serif;
--bg:#f5f5f7; --surface:#fff; --surface2:#fbfbfd;
--text:#1d1d1f; --text-sub:#6e6e73; --line:#e3e3e6; --line2:#ededf0;
--accent:#0071e3; --accent-soft:#e8f1fe;
--green:#34c759; --yellow:#ff9f0a; --red:#ff3b30;
--radius:12px; --radius-sm:8px;
--shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.04);
--shadow-sm:0 1px 2px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--text-sub)}.small{font-size:.82em}
h1{font-size:1.5rem;letter-spacing:-.02em;margin:.2em 0 .6em}
h2{font-size:1.05rem;font-weight:600;margin:0 0 14px}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid var(--line);height:52px;display:flex;align-items:center;padding:0 24px;gap:18px}
.nav .brand{font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--text)}
.nav .brand:hover{text-decoration:none;opacity:.7}
.nav .menu{display:flex;gap:4px;align-items:center}
.nav .menu a{color:var(--text);padding:6px 12px;border-radius:8px;font-size:14px;font-weight:500}
.nav .menu a:hover{background:rgba(0,0,0,.05);text-decoration:none}
.nav .menu a.active{color:var(--accent);background:var(--accent-soft)}
.nav .nav-sep{width:1px;height:16px;background:var(--line);margin:0 6px}
.nav .spacer{flex:1}
.nav .user{color:var(--text-sub);font-size:13px;display:flex;gap:12px;align-items:center}
.nav .user .user-name{color:var(--text);font-weight:600;padding:4px 8px;border-radius:7px}
.nav .user .user-name:hover{background:rgba(0,0,0,.05);text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:24px}
.flash{background:#e9f9ee;border:1px solid var(--green);color:#176c34;padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:16px}
/* cards / grid */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
@media(max-width:980px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.kpi .k-label{color:var(--text-sub);font-size:.82rem;margin-bottom:6px}
.kpi .k-val{font-size:1.5rem;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.kpi .k-sub{font-size:.84rem;margin-top:5px;color:var(--text-sub)}
.up{color:#1a7f37}.down{color:var(--red)}
.loading{color:var(--text-sub);padding:20px}
/* signal dots */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.dot.g{background:var(--green)}.dot.y{background:var(--yellow)}.dot.r{background:var(--red)}
/* tabs */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:9px 16px;font-size:14px;font-weight:500;color:var(--text-sub);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.active{color:var(--accent);border-bottom-color:var(--accent)}
/* 카드 헤더: 제목 + 우측 버튼 */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-head h2{margin:0}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--text);
padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;font:inherit;font-size:.9rem;font-weight:500}
.btn:hover{background:var(--surface2);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#0077ed}
.btn.sm{padding:5px 10px;font-size:.82rem}
/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:right;font-variant-numeric:tabular-nums}
.tbl th{color:var(--text-sub);font-weight:600;text-align:center;background:var(--surface2)}
.tbl td:first-child,.tbl th:first-child{text-align:left}
.tbl tr:hover td{background:var(--surface2)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* 넓은 표(설정 등)를 카드 안에서 가로 스크롤 */
.tbl .row-plan td{color:var(--text-sub)}
.tbl .warn-row td{background:#fff7e6}
/* 시장 대비 카드 헤더의 원/달러 환율 칩 */
.fx-chip{font-size:.84rem;font-weight:600;color:var(--text-sub);white-space:nowrap}
.fx-chip b{color:var(--text);font-weight:700}
/* toggle / chips */
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.toggle button{border:0;background:var(--surface);color:var(--text-sub);padding:5px 13px;font:inherit;font-size:.82rem;cursor:pointer}
.toggle button.on{background:var(--accent);color:#fff}
.chip{display:inline-block;font-size:.7rem;background:#eef0f3;color:#555;padding:1px 7px;border-radius:6px;margin-left:6px}
.chip.est{background:#fff1d6;color:#9a6400}
/* filters */
.filterbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filterbar .fld{display:flex;flex-direction:column;gap:4px}
.filterbar label{font-size:.78rem;color:var(--text-sub)}
.filterbar select,.filterbar input{padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font:inherit;color:var(--text)}
.summary-bar{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--text-sub);margin:2px 0 16px}
.summary-bar b{color:var(--text);font-weight:600}
.ctrlbar .summary-bar{margin:0;font-size:.82rem} /* 기간바 안에서는 여백 제거(가운데 정렬 유지) */
/* progress */
.bar{height:8px;background:#ececed;border-radius:6px;overflow:hidden;margin:8px 0 4px}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,#0071e3,#42a5ff)}
.goal-row{margin-bottom:16px}
.goal-row .g-top{display:flex;justify-content:space-between;font-size:.9rem}
/* badge */
.badge{background:#fff4e0;border:1px solid #ffd591;color:#8a5a00;padding:10px 14px;border-radius:var(--radius-sm);
margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
/* ===== 공유 차트 카드(Quant 방식과 동일 구조: chart-head·chart-legend·chart-box) ===== */
.chart-card .chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px;flex-wrap:wrap}
.chart-card .chart-head .ttl{font-size:1.05rem;font-weight:600}
.chart-legend{display:flex;flex-wrap:wrap;gap:14px 18px;margin:6px 0 12px;font-size:.82rem;color:var(--text-sub)}
.chart-legend .lg-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;user-select:none;transition:opacity .12s}
.chart-legend .lg-item:hover{opacity:.6}
.chart-legend .lg-line{width:22px;height:0;display:inline-block}
.chart-legend .lg-box{width:13px;height:13px;border-radius:3px;display:inline-block}
.chart-box{position:relative;margin-top:2px}
.chart-box canvas{cursor:crosshair}
/* 도넛(자산 구성): 기본 aspectRatio=1로 카드 너비만큼 정사각형이 되어 과대 → 고정 높이로 제한 */
.chart-box.comp-box{height:240px}
/* ===== 대시보드 히어로(총 순자산 개요) ===== */
.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 100%)}
.hero-main{min-width:230px}
.hero-label{color:var(--text-sub);font-size:.85rem;margin-bottom:7px;letter-spacing:.01em}
.hero-net{font-size:2rem;font-weight:700;letter-spacing:-.8px;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--text)}
.hero-delta{margin-top:10px;font-size:1rem;font-weight:600;display:inline-flex;align-items:center;gap:9px}
.hero-delta.up{color:#1a7f37}.hero-delta.down{color:var(--red)}
.hero-delta .hd-pct{font-weight:600;opacity:.95}
.hero-delta .muted{font-weight:500}
.hero-goals{display:flex;gap:22px;flex:1;min-width:300px;max-width:580px}
.hero-goal{flex:1}
.hero-goal .hg-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;margin-bottom:3px}
.hero-goal .hg-pct{font-weight:600;color:var(--text)}
.hero-goal .hg-sub{font-size:.76rem;margin-top:3px}
.hero-goal .bar{margin:5px 0 0}
@media(max-width:720px){.hero{gap:18px}.hero-net{font-size:1.7rem}.hero-goals{flex-direction:column;gap:12px;max-width:none;width:100%;min-width:0}}
/* KPI 카드 호버(미세 부양) */
.kpi{transition:box-shadow .18s ease,transform .18s ease}
.kpi:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
/* 자산 형성 여정: 시간 기반 성과 지표 타일(카드 안쪽, 가벼운 톤) */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:720px){.metric-grid{grid-template-columns:repeat(2,1fr)}}
.metric{padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--line2)}
.metric .m-label{color:var(--text-sub);font-size:.8rem;margin-bottom:5px}
.metric .m-val{font-size:1.3rem;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.metric .m-val.up{color:#1a7f37}.metric .m-val.down{color:var(--red)}
.metric .m-sub{font-size:.78rem;color:var(--text-sub);margin-top:4px}
/* ===== 분류별 매트릭스: 엑셀 데이터바 + 음수 강조 ===== */
.matrix-tbl td.neg,.tbl td.neg{color:var(--red)}
.matrix-tbl .ratio-cell{position:relative}
.matrix-tbl .ratio-cell .rc-bar{position:absolute;right:8px;top:6px;bottom:6px;background:var(--accent-soft);border-radius:4px;z-index:0}
.matrix-tbl .ratio-cell.neg .rc-bar{background:#ffe2df}
.matrix-tbl .ratio-cell .rc-val{position:relative;z-index:1}
.matrix-tbl tr.subtot td{font-weight:600;background:var(--surface2)}
.matrix-tbl tr.grandtot td{font-weight:700;border-top:2px solid var(--line)}
/* ===== 읽기전용 그리드(대시보드 인라인 iframe) ===== */
.readonly .drag-handle{display:none} /* 순서/카테고리/분석 드래그 핸들 숨김 */
.readonly .addrow-row{display:none} /* '+ 행 추가' 행 숨김 */
.grid-embed{width:100%;height:640px;border:0;display:block}
@media(max-width:720px){.grid-embed{height:70vh}}
/* ===== 자산 입력 팝업(iframe 모달) ===== */
.input-modal{background:var(--surface);border-radius:14px;width:96vw;height:92vh;max-width:1500px;
display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.input-modal .im-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 16px;border-bottom:1px solid var(--line);font-weight:600;flex:0 0 auto}
.input-modal iframe{flex:1 1 auto;border:0;width:100%;display:block}
@media(max-width:720px){.input-modal{width:100vw;height:100vh;height:100dvh;max-width:none;border-radius:0}} /* iOS 주소창 대응: dvh 우선(미지원 시 vh 폴백) */
/* ===== 대시보드 카드 배치(레이아웃) 설정 모달 ===== */
.layout-list{display:flex;flex-direction:column;gap:8px;margin:4px 0 2px;max-height:56vh;overflow:auto}
.layout-item{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);
border-radius:var(--radius-sm);background:var(--surface);cursor:grab;user-select:none;font-size:.92rem}
.layout-item:hover{border-color:#c7c7cc}
.layout-item.dragging{opacity:.45;border-style:dashed}
.layout-item.drop-above{box-shadow:0 -2px 0 0 var(--accent)}
.layout-item.drop-below{box-shadow:0 2px 0 0 var(--accent)}
.layout-item .li-grip{color:#b0b0b6;font-size:1rem;line-height:1;letter-spacing:-1px}
.layout-item .li-name{flex:1}
.layout-item.li-hidden{opacity:.5}
.layout-item .li-eye{border:0;background:transparent;cursor:pointer;font-size:.95rem;color:var(--text-sub);padding:2px 4px}
.layout-item .li-move{border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:.72rem;color:var(--text-sub);
border-radius:6px;padding:3px 7px;line-height:1}
.layout-item .li-move:hover{border-color:var(--accent);color:var(--accent)}
.layout-hint{color:var(--text-sub);font-size:.82rem;margin:2px 0 10px}
/* ── 인증 화면 (로그인·설치마법사·OTP·찾기) ── */
.flash.error{background:#fdecea;border-color:var(--red);color:#a1160a}
.flash.success{background:#e9f9ee;border-color:var(--green);color:#176c34}
.auth-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:6vh 20px} /* iOS 주소창 대응 */
.auth-card{width:100%;max-width:380px;background:var(--surface);padding:32px;border-radius:16px;
border:1px solid var(--line);box-shadow:var(--shadow)}
.auth-card.wide{max-width:440px}
.auth-card h1{text-align:center;margin:0 0 4px}
.auth-card .sub{text-align:center;color:var(--text-sub);font-size:.9rem;margin:0 0 20px}
.auth-card .sub.center{text-align:center}
/* 폼 필드 — 인증 화면 + 설정 탭 공용 */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:.84rem;font-weight:600;color:var(--text)}
.input{width:100%;padding:11px 13px;border-radius:var(--radius-sm);border:1px solid var(--line);
background:var(--surface);font:inherit;color:var(--text)}
.input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.input.no-caret{caret-color:transparent}
.input.otp{text-align:center;letter-spacing:.3em;font-size:18px}
.account-form{max-width:420px}
.btn.block{width:100%;justify-content:center;padding:11px}
.mt{margin-top:14px}.center{text-align:center}
/* 설치 화면 — 브랜드 + 단계 + 안내 */
.auth-brand{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:18px;
letter-spacing:-.02em;color:var(--text);margin-bottom:16px}
.setup-steps{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:18px}
.setup-steps .step{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-sub)}
.setup-steps .step .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
border-radius:50%;background:var(--line);color:#fff;font-size:11px;font-weight:700}
.setup-steps .step.active{color:var(--accent)}
.setup-steps .step.active .n{background:var(--accent)}
.setup-steps .step.done{color:var(--green)}
.setup-steps .step.done .n{background:var(--green)}
.setup-steps .line{width:28px;height:2px;background:var(--line)}
.setup-note{display:flex;gap:8px;align-items:flex-start;background:var(--accent-soft);border:1px solid #cfe2ff;
color:#0a4a8f;padding:10px 13px;border-radius:var(--radius-sm);font-size:12.5px;line-height:1.5;margin-bottom:18px}
/* QR / TOTP 시크릿 */
.qr{display:flex;justify-content:center;margin:8px 0}
.qr img{width:200px;height:200px;border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;text-align:center;
background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:8px;margin:6px 0 16px;word-break:break-all;letter-spacing:.05em}
/* Caps Lock 경고 */
.caps-warn{display:none;margin:-4px 0 12px;padding:8px 12px;background:#fff4e5;border:1px solid #f0c987;
border-radius:8px;color:#b45309;font-size:12.5px;font-weight:600}
/* 기기 기억하기 */
.remember{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-sub);
margin-bottom:12px;cursor:pointer}
.remember input{width:auto}
.device-name-wrap{overflow:hidden;max-height:0;opacity:0;
transition:max-height .25s ease,opacity .2s ease,margin .25s ease}
.device-name-wrap.open{max-height:80px;opacity:1;margin-bottom:14px}
/* 포커스 시 입력칸 outline(포커스 테두리)이 래퍼 overflow:hidden 에 잘리지 않도록 노출 */
.device-name-wrap:focus-within{overflow:visible}
/* input grid form */
.input-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.hint{background:#eef5ff;border:1px solid #cfe2ff;color:#0a4a8f;padding:9px 13px;border-radius:var(--radius-sm);margin:12px 0}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0 18px}
.quickbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:10px 0 2px}
.quickbar .qb-label{font-size:.8rem;color:var(--text-sub);margin-right:4px}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
@media(max-width:820px){.rows{grid-template-columns:1fr}}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line2)}
.row label{font-size:.9rem;flex:1}
.row input.amount{width:170px;text-align:right;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);
background:var(--surface);font-variant-numeric:tabular-nums}
.row input.warn{border-color:var(--yellow);background:#fff8ec}
.tag{font-size:.68rem;background:#eef0f3;color:#555;padding:1px 6px;border-radius:5px;margin-left:6px}
.save-bar{position:sticky;bottom:0;background:linear-gradient(0deg,var(--bg) 60%,transparent);padding:16px 0;
display:flex;justify-content:flex-end;gap:14px;align-items:center}
#anomaly-note{color:#9a6400;font-size:.85rem}
/* ── 입력 탭 컨트롤 바 ── */
.ctrlbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 16px;padding:10px 12px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
/* 대시보드 기간바: 스크롤해도 내비(52px) 바로 아래에 틀고정 → 어디서든 기간 조정 */
#dash-ctrl{position:sticky;top:52px;z-index:40;box-shadow:0 6px 16px rgba(0,0,0,.06)}
@media(max-width:720px){#dash-ctrl .summary-bar{display:none}} /* 모바일: 요약 숨겨 컴팩트 */
.ctrlbar .period{display:flex;align-items:center;gap:6px}
.ctrlbar .period label,.ctrlbar .quick .q-label{font-size:.82rem;color:var(--text-sub)}
.ctrlbar .period input[type=month]{padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit}
.ctrlbar .quick{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ctrlbar .spacer{flex:1}
.ctrlbar .upl{display:flex;align-items:center;gap:6px}
.ctrlbar .upl input[type=file]{max-width:150px;font-size:.8rem}
.pane-actions{margin-top:10px}
/* ── 입력 그리드 공통 ── */
.grid-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
/* border-collapse:collapse + position:sticky는 고정 셀의 경계선/배경이 셀과 함께 움직이지 않아
가로 스크롤 시 고정 열 사이에 투명한 틈이 생기고 그 뒤로 데이터가 비친다(크롬 알려진 버그).
separate+spacing:0이면 각 셀이 자기 경계선·배경을 소유해 틈이 사라진다(q-panes 표와 동일 처방). */
table.gridtbl{border-collapse:separate;border-spacing:0;font-size:12px;table-layout:fixed;width:max-content;
font-variant-numeric:tabular-nums;--order-w:46px;--c1w:80px;--c2w:150px}
table.gridtbl col.col-c1{width:80px}
table.gridtbl col.col-c2{width:150px}
table.gridtbl col.col-c3{width:100px}
table.gridtbl col.col-m{width:112px}
table.gridtbl col.col-order{width:56px}
/* ── 모바일: 고정열(순서+분류1·2·3 ≈ 376px)이 좁은 화면을 다 먹어 월 데이터가 안 보이는 문제 해결.
순서·분류3 열을 숨기고 분류1+분류2(항목명)만 좁게 고정 → 월 컬럼에 폭 양보(편집 팝업·읽기전용 iframe 공통).
고정 left 오프셋은 input.js syncVars가 헤더 폭(0/52/108)으로 자동 재계산. !important로 저장된 열폭(inline) 무시. */
@media(max-width:640px){
/* 중요: 셀 display:none 금지! 셀을 숨기면 그 칸이 빠져 뒤 셀이 당겨지고, colspan(접힘 머리행)과
개별셀(펼침 항목행)의 당김량이 달라 열이 어긋난다. 대신 '열()'을 0폭으로 접고 셀은 제자리
(overflow:hidden으로 내용만 잘림) → 모든 행 정렬 일치. */
table.gridtbl col.col-order,table.gridtbl col.col-c3{width:0 !important}
table.gridtbl col.col-c1{width:52px !important}
table.gridtbl col.col-c2{width:108px !important}
table.gridtbl col.col-m{width:92px !important}
table.gridtbl th,table.gridtbl td{font-size:11px}
/* 0폭 순서칸의 잔여 그림자/테두리 제거(분류1 왼쪽 침범 방지) */
.edittbl th.gorder,.edittbl td.gorder{box-shadow:none !important;border-right:0 !important}
/* 고정 left 명시(순서 폭 0 기준): 분류1=0, 분류2=52 — syncVars 타이밍과 무관하게 견고 */
.edittbl th.gc1,.edittbl td.gc1{left:0 !important}
.edittbl th.gc2,.edittbl td.gc2{left:52px !important}
.maintbl tr.ovcat td.catname,
.maintbl tr.anahead td.analabel,
.maintbl tr.anarow td.analabel,
.maintbl tr.addrow-row td.addrow-cell{left:0 !important}
}
table.gridtbl th,table.gridtbl td{border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);
white-space:nowrap;text-align:right;overflow:hidden}
table.gridtbl thead th{position:sticky;top:0;background:var(--surface2);color:var(--text-sub);font-weight:600;
z-index:2;padding:6px 9px;overflow:visible}
table.gridtbl td.num{padding:6px 9px;color:var(--text)}
table.gridtbl .neg{color:var(--red)}
table.gridtbl thead th.changed{color:var(--accent);background:var(--accent-soft)}
table.gridtbl tr.gridsub td{border-top:2px solid var(--line);font-weight:700;background:var(--surface2)}
/* 캐럿(깜빡임)은 편집 중에만 — 선택/이동/빈 셀 클릭 시엔 숨김 */
table.gridtbl td,table.gridtbl th{caret-color:transparent} /* 미사용 셀(포커스만) 깜빡임 방지 */
table.gridtbl input{caret-color:transparent}
table.gridtbl input.editing{caret-color:auto} /* 값 편집 중에만 표시 */
table.gridtbl td[contenteditable="true"]{caret-color:auto} /* 라벨 직접 편집 중에만 표시 */
/* ── 편집표(.edittbl): 분류1·분류2·분류3 3열 틀고정(순서는 맨 오른쪽·비고정) ── */
.edittbl td.cell,.edittbl input.g-in,.edittbl td.gc1,.edittbl td.gc2,.edittbl td.gc3,.edittbl input.lbl-in{cursor:cell}
.edittbl input.g-in.editing,.edittbl input.lbl-in.editing{cursor:text}
/* 순서(맨 왼쪽) 고정 */
.edittbl th.gorder,.edittbl td.gorder{position:sticky;left:0;background:var(--surface);text-align:center;padding:0;cursor:pointer;border-right:none}
.edittbl th.gc1,.edittbl td.gc1{position:sticky;left:var(--order-w);background:var(--surface);text-align:left;color:var(--text-sub);padding:0;border-left:1px solid var(--line2)}
.edittbl th.gc2,.edittbl td.gc2{position:sticky;left:calc(var(--order-w) + var(--c1w));background:var(--surface);text-align:left;color:var(--text);font-weight:500;padding:0}
.edittbl th.gc3,.edittbl td.gc3{position:sticky;left:calc(var(--order-w) + var(--c1w) + var(--c2w));background:var(--surface);text-align:left;color:var(--text-sub);padding:0;border-right:1px solid var(--line)}
.edittbl thead th.gorder,.edittbl thead th.gc1,.edittbl thead th.gc2,.edittbl thead th.gc3{z-index:4;background:var(--surface2);color:var(--text-sub);padding:6px 10px}
/* 고정 열 리사이저가 옆 고정 열에 가려지지 않게 좌→우 z-index 내림차순 */
.edittbl thead th.gorder{z-index:7}
.edittbl thead th.gc1{z-index:6}
.edittbl thead th.gc2{z-index:5}
.edittbl tbody td.gorder,.edittbl tbody td.gc1,.edittbl tbody td.gc2,.edittbl tbody td.gc3{z-index:2}
.edittbl tbody td.gorder{z-index:5}
.edittbl tbody td.gc1{z-index:4}
.edittbl tbody td.gc2{z-index:3}
.edittbl tbody tr:hover td.gc1,.edittbl tbody tr:hover td.gc2,.edittbl tbody tr:hover td.gc3{background:var(--line2)}
.edittbl tr.gridsub td.gc1{background:var(--surface2);padding:6px 10px}
/* 고정 열(순서·분류1·2·3) 경계의 서브픽셀 틈으로 뒤 내용이 비치는 것 방지:
각 고정 셀이 '자기 배경색'을 우측으로 2px 덮어 그려 틈을 가린다(보이지 않게 메움, 구분선은 기존 border 유지).
z-index가 좌→우 내림차순이라(순서>분류1>분류2>분류3) 왼쪽 셀 그림자가 오른쪽 셀 위에 그려진다. */
.maintbl tbody tr{--frzbg:var(--surface)}
.maintbl tbody tr.gridsub,.maintbl tbody tr.ovcat,.maintbl tbody tr.ovtot,.maintbl tbody tr.anahead{--frzbg:var(--surface2)}
.maintbl tbody tr:hover{--frzbg:var(--line2)}
.edittbl thead th{--frzbg:var(--surface2)}
.edittbl tbody tr:hover td.gorder{background:var(--line2)} /* 호버 시 순서칸도 같은 색(그림자 이질감 방지) */
.edittbl th.gorder,.edittbl td.gorder,
.edittbl th.gc1,.edittbl td.gc1,
.edittbl th.gc2,.edittbl td.gc2,
.maintbl tr.anarow td.analabel{box-shadow:3px 0 0 0 var(--frzbg)}
/* 라벨/금액 인풋 */
.edittbl input.lbl-in{width:100%;border:0;background:transparent;font:inherit;color:inherit;padding:6px 8px}
.edittbl td.gc2 input.lbl-in{font-weight:500}
.edittbl td.cell{padding:0}
.edittbl td.cell input.g-in{width:100%;border:0;background:transparent;padding:6px 9px;text-align:right;
font:inherit;font-variant-numeric:tabular-nums;color:var(--text)}
.edittbl input.g-in:focus,.edittbl input.lbl-in:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#fff;border-radius:2px}
.edittbl input.g-in.warn{background:#fff8ec}
/* 다중 셀 선택(엑셀식) + 굵게 서식 */
.edittbl input.g-in:not(.editing),.edittbl input.lbl-in:not(.editing){user-select:none}
.edittbl td.cell-selected{box-shadow:inset 0 0 0 9999px rgba(0,113,227,.12)}
.edittbl input.cell-bold{font-weight:700 !important}
/* 복사된 셀: 엑셀식 점선 행진(마퀴). 붙어있는 셀은 영역 바깥 테두리만 — 경계 변(edge-*)에만 점선을 그린다.
고정열(sticky)은 이미 positioned이라 position:relative 제외(스티키 깨짐 방지) */
.maintbl td.copied:not(.gorder):not(.gc1):not(.gc2):not(.gc3){position:relative}
.maintbl td.copied{--et:0;--er:0;--eb:0;--el:0}
.maintbl td.copied.edge-t{--et:1.6px}
.maintbl td.copied.edge-b{--eb:1.6px}
.maintbl td.copied.edge-l{--el:1.6px}
.maintbl td.copied.edge-r{--er:1.6px}
.maintbl td.copied::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
background-image:linear-gradient(90deg,var(--accent) 50%,transparent 0),linear-gradient(90deg,var(--accent) 50%,transparent 0),
linear-gradient(0deg,var(--accent) 50%,transparent 0),linear-gradient(0deg,var(--accent) 50%,transparent 0);
background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
background-size:8px var(--et),8px var(--eb),var(--el) 8px,var(--er) 8px;
background-position:0 0,0 100%,0 0,100% 0;animation:copymarch .5s linear infinite}
@keyframes copymarch{to{background-position:8px 0,8px 100%,0 8px,100% 8px}}
/* 행 숨기기: 카테고리 접기가 inline style.display를 쓰므로 클래스+!important로 분리(접기와 독립) */
.maintbl tr.row-hidden{display:none !important}
/* 순서 셀 = 엑셀 행머리: 줄무늬 바깥 클릭/드래그=행 선택(pointer), 줄무늬=순서 변경 드래그(grab) */
.edittbl td.gorder{text-align:center;white-space:nowrap;padding:0;cursor:pointer}
.edittbl .drag-handle{display:inline-block;width:16px;height:16px;cursor:grab;vertical-align:middle;
background:linear-gradient(#9a9aa0,#9a9aa0) center 4px/11px 2px no-repeat,
linear-gradient(#9a9aa0,#9a9aa0) center 8px/11px 2px no-repeat,
linear-gradient(#9a9aa0,#9a9aa0) center 12px/11px 2px no-repeat}
/* 우클릭 행 메뉴 */
.row-menu{position:fixed;z-index:1000;min-width:150px;padding:4px;display:flex;flex-direction:column;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.row-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;
color:var(--text);padding:8px 12px;border-radius:6px;cursor:pointer}
.row-menu-item:hover{background:var(--accent-soft)}
.row-menu-item.danger{color:var(--red)}
.row-menu-item.danger:hover{background:rgba(255,59,48,.12)}
.row-menu-sep{height:1px;background:var(--line);margin:4px 2px}
/* 글자색 선택 메뉴 */
.color-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:6px 8px}
.color-swatch{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0;transition:transform .1s}
.color-swatch:hover{transform:scale(1.15)}
/* 월(연-월) 헤더: 클릭=열 선택 */
.maintbl thead th.colm{cursor:pointer;user-select:none}
.maintbl thead th.col-selected{background:var(--accent-soft);color:var(--accent)}
.edittbl tr.row-dragging{opacity:.45}
.edittbl tr.row-drop-target td{box-shadow:inset 0 2px 0 var(--accent)}
/* ── 통합 입력표(.maintbl): 편집표 + 카테고리 그룹/소계/합계를 한 테이블에 ── */
/* 헤더는 모두 가운데 정렬 */
.maintbl thead th.gc1,.maintbl thead th.gc2,.maintbl thead th.gc3,.maintbl thead th.num,.maintbl thead th.gorder{text-align:center}
/* 카테고리 머리행 — 카테고리명(분류1, 맨 왼쪽) 클릭=접기/펼치기 */
.maintbl tr.ovcat td{background:var(--surface2);font-weight:700;color:var(--text);border-top:1px solid var(--line)}
.maintbl tr.ovcat td.catname{position:sticky;left:var(--order-w);z-index:3;background:var(--surface2);
text-align:left;padding:6px 10px;white-space:nowrap;cursor:pointer;user-select:none}
.maintbl tr.ovcat:hover td.catname{background:var(--surface3,var(--line2))}
/* 연-월 미러셀: 셀 단위 선택/서식용(접힘 상태에서 클릭 선택) */
.maintbl tr.ovcat td.ovsum{cursor:cell;user-select:none}
.ov-caret{display:inline-block;width:1em;color:var(--text-sub);transition:transform .12s ease;transform:rotate(90deg)}
.maintbl tr.ovcat.collapsed .ov-caret{transform:rotate(0deg)}
.ov-caret::before{content:"\25B8"}
/* 카테고리 소계 미러: 펼친 상태에선 머리행 셀에 숨기고(소계행이 보임), 접으면 머리행에 노출 */
.maintbl tr.ovcat:not(.collapsed) td.ovsum{color:transparent !important}
.maintbl tr.ovcat:not(.collapsed) td.ovsum::after{content:none}
.maintbl tr.ovcat.collapsed td.ovsum{font-weight:400}
.maintbl tr.ovcat td.ovsum.cell-bold{font-weight:700 !important}
/* 소계행: '소 계' 분류1·2·3 병합 가운데 정렬 */
.maintbl tr.gridsub td.gc1,.maintbl tr.gridsub td.gridsub-lbl{text-align:center}
/* 행 추가 행 */
.maintbl tr.addrow-row td.addrow-cell{position:sticky;left:var(--order-w);z-index:2;background:var(--surface);
text-align:left;padding:3px 8px}
.maintbl tr.addrow-row td{background:var(--surface)}
/* 합계행(고정/유동/순자산) — 라벨은 분류1 칸 */
.maintbl tr.ovtot td{font-weight:700;border-top:2px solid var(--line);background:var(--surface2)}
.maintbl tr.ovtot td.gc1,.maintbl tr.ovtot td.gc2,.maintbl tr.ovtot td.gc3,.maintbl tr.ovtot td.gorder{background:var(--surface2)}
.maintbl tr.ovtot td.gc1{text-align:left;font-weight:700;color:var(--text);padding:6px 10px}
.maintbl tr.ovnet td{color:var(--accent)}
/* 카테고리 머리행 / 소계행의 순서 칸 배경 정렬 */
.maintbl tr.ovcat td.gorder{background:var(--surface2)}
.maintbl tr.gridsub td.gorder{background:var(--surface2)}
.btn.xs{padding:3px 9px;font-size:12px}
/* ── 총 자산 증감 분석 영역 ── */
.maintbl tr.anahead td{border-top:3px double var(--line);background:var(--surface2);font-weight:700;padding:8px 10px}
.maintbl tr.anahead td.analabel{position:sticky;left:var(--order-w);z-index:2;background:var(--surface2);text-align:left;color:var(--text)}
.maintbl tr.anarow td{background:var(--surface)}
.maintbl tr.anarow td.analabel{position:sticky;left:var(--order-w);z-index:3;background:var(--surface);text-align:left;color:var(--text-sub);padding:6px 10px}
/* 분류2/분류3 경계로 나뉜 우측(분류3) 라벨칸 */
.maintbl tr.anarow td.analabel3{position:sticky;left:calc(var(--order-w) + var(--c1w) + var(--c2w));z-index:2;background:var(--surface);text-align:left;color:var(--text-sub);padding:6px 8px;border-left:1px solid var(--line2);white-space:nowrap}
.maintbl tr.anarow:hover td,.maintbl tr.anarow:hover td.analabel,.maintbl tr.anarow:hover td.analabel3{background:var(--line2)}
.maintbl tr.anarow td[contenteditable]{outline:2px solid var(--accent);outline-offset:-2px;background:#fff;cursor:text}
.maintbl tr.anarow td.num{color:var(--text)}
/* 목표(억) 입력 — 분석 라벨 안 인라인 */
.goal-in{width:2ch;text-align:right;font:inherit;font-variant-numeric:tabular-nums;color:inherit;border:0;background:transparent;padding:0;margin:0}
.goal-in:focus{outline:1px solid var(--accent);background:#fff;border-radius:2px}
.goal-in[readonly]{cursor:default}
/* ── 편집 모드 토글 + 서식 도구막대 ── */
.card-head .head-btns{display:flex;align-items:center;gap:8px}
#edit-toggle.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.fmt-toolbar{display:none;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;margin-bottom:10px;
background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm)}
#entry-form.edit-on .fmt-toolbar{display:flex}
.fmt-toolbar .ft-grp{display:inline-flex;align-items:center;gap:4px}
.fmt-toolbar .ft-sep{width:1px;height:20px;background:var(--line)}
.fmt-toolbar .ft-sel{font:inherit;font-size:.82rem;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer}
.ft-btn{min-width:30px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer;font-size:13px;line-height:1;color:var(--text)}
.ft-btn:hover{background:var(--accent-soft)}
.ft-ico{width:16px;height:12px;display:block;fill:currentColor}
.ft-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.ft-btn #ft-colorbar,.ft-colorbar{display:block;height:3px;background:var(--accent);border-radius:2px;margin-top:1px}
.fmt-toolbar .ft-hint{margin-left:auto}
/* 보기 모드(편집 OFF): 행추가만 숨김. 순서변경 드래그 핸들은 항상 노출(보기 모드에서도 이동 가능) */
#entry-form.edit-off .addrow-row{display:none}
#entry-form.edit-off .edittbl input{cursor:default}
#entry-form.edit-off .edittbl input:focus{outline:none;background:transparent}
/* 모든 셀 굵게 서식(라벨/합계/분석 등 td 직접 적용 시) */
.maintbl td.cell-bold{font-weight:700 !important}
/* 열폭 조절 핸들 (편집표 + 전체요약표 공통) */
.gridtbl th .col-resizer{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;
user-select:none;touch-action:none;z-index:7}
.gridtbl th .col-resizer.col-resizing{background:rgba(0,113,227,.15)}
/* excel-like grid (paste) */
table.grid{width:100%;border-collapse:collapse;font-size:.88rem}
table.grid th,table.grid td{border:1px solid var(--line);padding:0}
table.grid th{background:var(--surface2);color:var(--text-sub);padding:7px 9px;font-weight:600}
table.grid td.lbl{padding:7px 9px;background:var(--surface2)}
table.grid input{width:100%;border:0;padding:7px 9px;text-align:right;font:inherit;font-variant-numeric:tabular-nums;background:transparent}
table.grid input:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#fff}
/* common modal */
.ui-mask{position:fixed;inset:0;background:rgba(0,0,0,.32);display:none;align-items:center;justify-content:center;z-index:100}
.ui-mask.on{display:flex}
.ui-dlg{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);max-width:380px;width:90%;padding:22px}
.ui-dlg .msg{font-size:.95rem;margin-bottom:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.ui-dlg input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:16px;font:inherit}
.ui-dlg .btns{display:flex;justify-content:flex-end;gap:10px}
canvas{max-width:100%}
/* ───────────── 모바일 최적화 (iPhone Safari / 작은 화면) ───────────── */
@media (max-width: 640px) {
body { overflow-x: hidden; }
/* 설정 등 넓은 표: 잘림(body overflow-x:hidden) 대신 래퍼 안에서 가로 스크롤 */
.tbl-scroll table.tbl { min-width: 520px; white-space: nowrap; }
/* 본문: 패딩 축소 + 노치/홈바 안전영역 */
.wrap {
padding: 14px;
padding-left: max(14px, env(safe-area-inset-left));
padding-right: max(14px, env(safe-area-inset-right));
padding-bottom: max(20px, env(safe-area-inset-bottom));
}
h1 { font-size: 1.5rem; flex-wrap: wrap; row-gap: 8px; }
.card { padding: 14px; }
/* 상단 내비: 가로 스크롤 스트립(스크롤바 숨김) + 안전영역 */
.nav {
gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
.nav::-webkit-scrollbar { display: none; }
.nav { scrollbar-width: none; }
.nav .spacer { display: none; }
.nav .brand, .nav .menu, .nav .user { flex: 0 0 auto; }
.nav .menu { gap: 2px; }
.nav .menu a { padding: 6px 9px; }
.nav .user { margin-left: 4px; gap: 8px; }
/* iOS 포커스 시 자동 확대 방지(16px 미만 입력은 확대됨) */
input[type=text], input[type=number], input[type=password], input[type=date],
input[type=month], input[type=email], input[type=tel], select, textarea, .input { font-size: 16px; }
/* 넓은 표는 카드 안에서 가로 스크롤(컬럼 안 깨지게) */
#q-panes .card, #m-panes .card, .grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#q-panes table.tbl, #m-panes table.tbl { min-width: 560px; white-space: nowrap; }
/* 카드(=가로 스크롤러)의 제목은 좌측 고정 → 표 열만 좌우로 스크롤되고 제목은 안 움직임.
차트 카드는 가로 스크롤이 없으므로 제외(flex 헤더 영향 차단). */
#q-panes .card:not(.chart-card) > h2,
#m-panes .card:not(.chart-card) > h2 {
position: sticky; left: 0; z-index: 5;
width: max-content; max-width: 100%;
background-color: var(--surface);
}
/* KPI 카드 2열 */
.kpi-grid, #q-panes .kpi-grid, #m-panes .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
#q-panes .kpi-grid .k-val, #m-panes .kpi-grid .k-val { font-size: 1.1rem; }
/* Quant/Markets 컨트롤·탭바 줄바꿈 */
#q-actions { flex-wrap: wrap; justify-content: flex-end; }
#q-period .period { flex-wrap: wrap; }
.q-tabbar { flex-wrap: wrap; gap: 8px; row-gap: 4px; }
/* 차트: 전체폭 + 고정 높이(차트 더 크게 — maintainAspectRatio=false와 함께) */
#q-panes .chart-box, #m-panes .chart-box { width: 100% !important; height: 240px; margin: 8px 0 0 !important; padding: 0 !important; }
/* (Return 토글/범례 간섭 해소는 quant.html