/* ===================================================================== 재정(회계) 탭 — 시안 A(핀테크)를 #tab-fin 스코프로 이식. · 모든 선택자는 #tab-fin 하위로 스코프한다(다른 탭·전역에 누수 금지). · 토큰은 --fin-* 지역 변수(앱 전역 토큰과 이름 충돌 방지). · 클래스는 fin- 접두(앱 .card/.btn/.kpi 등과 시각 누수 방지). · ⚠️ 이 탭에서만 색 의미 반전: 들어옴=파랑(--fin-income), 나감=빨강(--fin-expense). ===================================================================== */ #tab-fin{ --fin-bg:#E9EEF6; --fin-bg2:#F3F6FC; --fin-card:#FFFFFF; --fin-card2:#F5F8FD; --fin-tile:#F2F6FC; --fin-ink:#16203A; --fin-ink2:#555F79; --fin-ink3:#5F6A87; --fin-line:#E5EAF3; /* 이 화면만 색 의미 반전 (사용자 확정 2026-07-09): 들어옴=파랑, 나감=빨강 */ --fin-income:#2F6BFF; --fin-income-ink:#1E52DE; --fin-expense:#FA3A4D; --fin-expense-ink:#C71F31; --fin-ok:#10B981; --fin-ok-ink:#067A54; --fin-warn:#EA8C00; --fin-warn-ink:#B96C00; --fin-danger:#FF3B4E; --fin-danger-ink:#D01F31; --fin-hero-a:#152463; --fin-hero-b:#274BE0; --fin-hero-c:#4A3DD6; --fin-on-hero:#FFFFFF; --fin-on-hero2:#DCE4FF; --fin-p-hakran:#EC4899; --fin-p-sewon:#3B82F6; --fin-p-suyeon:#0EA5A0; --fin-p-seonghee:#E58A00; --fin-cat1:#3D6FE0; --fin-cat2:#9A63E8; --fin-cat3:#E08A2E; --fin-cat4:#1CA68C; --fin-cat5:#8C96AB; /* 세 몫 고유색 (v2 핵심 시각 언어): 회사=파랑 / 나라=주황 / 사람=보라 */ --fin-share-co:#2F6BFF; --fin-share-co-ink:#1E52DE; --fin-share-gov:#E08A2E; --fin-share-gov-ink:#8F5E00; --fin-share-ppl:#9A63E8; --fin-share-ppl-ink:#5636C4; /* 히어로(짙은 배경) 전용 밝은 변형 */ --fin-hb-co:#7FA5FF; --fin-hb-gov:#F5B04C; --fin-hb-ppl:#CDB1FF; /* 미분류(회색) */ --fin-unc:#8C96AB; --fin-unc-ink:#5A647A; --fin-mix-deep:#000000; --fin-badge-blue-bg:#DCE8FF; --fin-badge-blue-ink:#1B3FAE; --fin-badge-red-bg:#FFE0E3; --fin-badge-red-ink:#B01A2B; --fin-badge-green-bg:#D6F5E8; --fin-badge-green-ink:#06724F; --fin-badge-amber-bg:#FDECCB; --fin-badge-amber-ink:#7A5000; --fin-badge-violet-bg:#E9E2FF; --fin-badge-violet-ink:#5636C4; --fin-shadow-sm:0 2px 8px rgba(20,30,60,.06); --fin-shadow:0 12px 32px rgba(23,37,84,.09); --fin-shadow-lg:0 22px 54px rgba(23,37,84,.13); --fin-shadow-hero:0 26px 60px rgba(30,60,200,.30); --fin-r:24px; --fin-r-sm:16px; --fin-r-xs:12px; --fin-w-max:1240px; background:var(--fin-bg); background-image:linear-gradient(180deg,var(--fin-bg2),var(--fin-bg) 340px); color:var(--fin-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100%; } [data-theme="dark"] #tab-fin{ --fin-bg:#0A0E18; --fin-bg2:#0E1424; --fin-card:#151C2E; --fin-card2:#1A2338; --fin-tile:#1C263D; --fin-ink:#EBF0FB; --fin-ink2:#A3AEC5; --fin-ink3:#96A1BA; --fin-line:#28324B; --fin-income:#5E8CFF; --fin-income-ink:#93B2FF; --fin-expense:#FF5C6C; --fin-expense-ink:#FF8A96; --fin-ok:#34D399; --fin-ok-ink:#4FE3AC; --fin-warn:#FBBF24; --fin-warn-ink:#FBBF24; --fin-danger:#FF5568; --fin-danger-ink:#FF8A96; --fin-hero-a:#101B4D; --fin-hero-b:#2547D6; --fin-hero-c:#4B3AD6; --fin-on-hero:#FFFFFF; --fin-on-hero2:#CBD7FF; --fin-p-hakran:#F472B6; --fin-p-sewon:#60A5FA; --fin-p-suyeon:#2DD4BF; --fin-p-seonghee:#FBB040; --fin-cat1:#6E97FF; --fin-cat2:#B18CFF; --fin-cat3:#F0A24C; --fin-cat4:#3FC9AD; --fin-cat5:#9AA5BC; --fin-share-co:#5E8CFF; --fin-share-co-ink:#93B2FF; --fin-share-gov:#F0A24C; --fin-share-gov-ink:#FBD07A; --fin-share-ppl:#B18CFF; --fin-share-ppl-ink:#C3B2FF; --fin-hb-co:#7FA5FF; --fin-hb-gov:#F5B04C; --fin-hb-ppl:#CDB1FF; --fin-unc:#9AA5BC; --fin-unc-ink:#C2CADB; --fin-mix-deep:#FFFFFF; --fin-badge-blue-bg:#1E2F5C; --fin-badge-blue-ink:#AEC5FF; --fin-badge-red-bg:#4A1E28; --fin-badge-red-ink:#FFAAB2; --fin-badge-green-bg:#123A2E; --fin-badge-green-ink:#5FE7B4; --fin-badge-amber-bg:#3E2E10; --fin-badge-amber-ink:#FBD07A; --fin-badge-violet-bg:#2A2352; --fin-badge-violet-ink:#C3B2FF; --fin-shadow-sm:0 2px 8px rgba(0,0,0,.35); --fin-shadow:0 14px 34px rgba(0,0,0,.45); --fin-shadow-lg:0 24px 56px rgba(0,0,0,.55); --fin-shadow-hero:0 26px 60px rgba(0,0,0,.55); } #tab-fin *{box-sizing:border-box} #tab-fin .num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:-.01em} #tab-fin .fin-wrap{max-width:var(--fin-w-max); margin:0 auto; padding:22px 24px 72px} /* ---------- header ---------- */ #tab-fin .fin-topbar{display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap} #tab-fin .fin-brand{display:flex; align-items:baseline; gap:12px} #tab-fin .fin-brand h1{font-size:28px; font-weight:850; letter-spacing:-.03em} #tab-fin .fin-monthnav{display:flex; align-items:center; gap:8px} #tab-fin .fin-monthnav .fin-mlabel{font-size:15px; font-weight:750; color:var(--fin-ink2); background:var(--fin-card); padding:8px 15px; border-radius:999px; box-shadow:var(--fin-shadow-sm); min-width:118px; text-align:center} #tab-fin .fin-spacer{flex:1} #tab-fin .fin-btn{border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:14.5px; border-radius:14px; padding:11px 17px; display:inline-flex; align-items:center; gap:8px; color:var(--fin-ink); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; line-height:1} #tab-fin .fin-btn:active{transform:translateY(1px)} #tab-fin .fin-btn-icon{width:44px; height:44px; padding:0; justify-content:center; font-size:18px} #tab-fin .fin-btn-ghost{background:var(--fin-card); color:var(--fin-ink); box-shadow:var(--fin-shadow-sm)} #tab-fin .fin-btn-ghost:hover{box-shadow:var(--fin-shadow)} #tab-fin .fin-btn-primary{background:linear-gradient(135deg,var(--fin-hero-b),var(--fin-hero-c)); color:#fff; box-shadow:0 10px 24px rgba(39,75,224,.34)} #tab-fin .fin-btn-primary:hover{box-shadow:0 16px 30px rgba(39,75,224,.44)} #tab-fin .fin-btn-sm{padding:7px 12px; font-size:13px; border-radius:11px} /* ---------- [월|년] 세그먼트 토글 ---------- */ #tab-fin .fin-segtog{display:inline-flex; align-items:center; gap:2px; padding:3px; background:var(--fin-bg2); border-radius:999px; box-shadow:inset 0 0 0 1px var(--fin-line)} #tab-fin .fin-segtog button{border:0; cursor:pointer; font-family:inherit; font-weight:750; font-size:13.5px; padding:7px 15px; border-radius:999px; background:transparent; color:var(--fin-ink3); line-height:1; transition:background .18s ease, color .18s ease, box-shadow .18s ease} #tab-fin .fin-segtog button:hover{color:var(--fin-ink)} #tab-fin .fin-segtog button.on{background:var(--fin-card); color:var(--fin-ink); box-shadow:var(--fin-shadow-sm)} /* ---------- error banner ---------- */ #tab-fin .fin-banner{grid-column:span 12; background:var(--fin-badge-red-bg); color:var(--fin-badge-red-ink); border-radius:var(--fin-r-sm); padding:14px 18px; display:flex; align-items:center; gap:14px; font-weight:700; font-size:14.5px; margin-bottom:16px} #tab-fin .fin-banner .fin-btn{background:var(--fin-badge-red-ink); color:#fff} /* ---------- bento grid ---------- */ #tab-fin .fin-bento{display:grid; grid-template-columns:repeat(12,1fr); gap:18px} #tab-fin .fin-card{background:var(--fin-card); border-radius:var(--fin-r); box-shadow:var(--fin-shadow); padding:24px 26px; position:relative; border:0; opacity:0; transform:translateY(18px) scale(.985); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;} #tab-fin .fin-wrap.in .fin-card{opacity:1; transform:none; transition-delay:calc(var(--i,0)*70ms)} #tab-fin .fin-card.fin-hoverable:hover{box-shadow:var(--fin-shadow-lg); transform:translateY(-3px)} #tab-fin .fin-wrap.in .fin-card.fin-hoverable:hover{transition-delay:0s} #tab-fin .fin-col12{grid-column:span 12} #tab-fin .fin-col8{grid-column:span 8} #tab-fin .fin-col7{grid-column:span 7} #tab-fin .fin-col6{grid-column:span 6} #tab-fin .fin-col5{grid-column:span 5} #tab-fin .fin-col4{grid-column:span 4} #tab-fin .fin-room-title{display:flex; align-items:center; gap:10px; margin-bottom:18px} #tab-fin .fin-room-title .fin-dot{width:10px; height:10px; border-radius:50%; flex:none} #tab-fin .fin-room-title h2{font-size:19px; font-weight:800; letter-spacing:-.02em} #tab-fin .fin-room-title .fin-sub{font-size:13px; color:var(--fin-ink3); font-weight:600; margin-left:auto} #tab-fin .fin-label{font-size:13px; font-weight:650; color:var(--fin-ink2); letter-spacing:-.01em} #tab-fin .fin-eyebrow{font-size:12.5px; font-weight:750; color:var(--fin-ink3); letter-spacing:.01em; margin-bottom:6px} /* badges */ #tab-fin .fin-badge{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:22px; flex:none} #tab-fin .fin-badge.sm{width:38px; height:38px; border-radius:12px; font-size:19px} #tab-fin .fin-b-blue{background:var(--fin-badge-blue-bg)} #tab-fin .fin-b-red{background:var(--fin-badge-red-bg)} #tab-fin .fin-b-green{background:var(--fin-badge-green-bg)} #tab-fin .fin-b-amber{background:var(--fin-badge-amber-bg)} #tab-fin .fin-b-violet{background:var(--fin-badge-violet-bg)} /* ---------- hero ---------- */ #tab-fin .fin-hero{grid-column:span 12; border-radius:28px; padding:32px 38px; color:var(--fin-on-hero); background: radial-gradient(120% 160% at 88% 8%, rgba(120,90,255,.55), transparent 60%), radial-gradient(120% 140% at 8% 100%, rgba(20,40,140,.55), transparent 55%), linear-gradient(118deg,var(--fin-hero-a) 0%, var(--fin-hero-b) 55%, var(--fin-hero-c) 100%); box-shadow:var(--fin-shadow-hero); overflow:hidden; position:relative; opacity:0; transform:translateY(18px) scale(.99); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)} #tab-fin .fin-wrap.in .fin-hero{opacity:1; transform:none} #tab-fin .fin-hero.warn{background: radial-gradient(120% 160% at 88% 8%, rgba(255,90,110,.42), transparent 60%), radial-gradient(120% 140% at 8% 100%, rgba(140,20,40,.5), transparent 55%), linear-gradient(118deg,#5a1526 0%, #a01f38 55%, #7a1530 100%)} #tab-fin .fin-hero::after{content:""; position:absolute; right:-60px; top:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); pointer-events:none} #tab-fin .fin-hero .fin-eyebrow{color:var(--fin-on-hero2); font-size:14px; margin-bottom:22px; font-weight:750} #tab-fin .fin-hero-formula{display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; position:relative; z-index:1} #tab-fin .fin-hf-term{display:flex; flex-direction:column; gap:7px} #tab-fin .fin-hf-term .k{font-size:14px; color:var(--fin-on-hero2); font-weight:700} #tab-fin .fin-hf-term .v{font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1} #tab-fin .fin-hf-term .v.guide{font-size:16px; font-weight:750; color:var(--fin-on-hero2); max-width:260px; line-height:1.4} #tab-fin .fin-hf-op{font-size:32px; font-weight:400; color:var(--fin-on-hero2); padding-bottom:2px; line-height:1} #tab-fin .fin-hf-result{margin-left:auto; text-align:right} #tab-fin .fin-hf-result .k{font-size:15px; color:#fff; font-weight:800; opacity:.95} #tab-fin .fin-hf-result .v{font-size:54px; font-weight:880; letter-spacing:-.03em; line-height:1.02; text-shadow:0 2px 20px rgba(0,0,0,.18)} #tab-fin .fin-hf-result .u{font-size:24px; font-weight:750; margin-left:4px; opacity:.9} #tab-fin .fin-hero-note{position:relative; z-index:1; margin-top:18px; font-size:13px; font-weight:700; color:#fff; background:rgba(255,255,255,.16); display:inline-flex; gap:8px; align-items:center; padding:9px 14px; border-radius:12px} /* ---------- KPI tiles ---------- */ #tab-fin .fin-kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px} #tab-fin .fin-kpi{background:var(--fin-tile); border-radius:var(--fin-r-sm); padding:16px 18px} #tab-fin .fin-kpi .k{font-size:13px; font-weight:700; color:var(--fin-ink2); margin-bottom:9px} #tab-fin .fin-kpi .v{font-size:26px; font-weight:830; letter-spacing:-.02em} #tab-fin .fin-pos{color:var(--fin-income-ink)} #tab-fin .fin-neg{color:var(--fin-expense-ink)} #tab-fin .fin-good{color:var(--fin-ok-ink)} /* ---------- shared chart bits ---------- */ #tab-fin .fin-chart-head{display:flex; align-items:center; gap:16px; margin:4px 0 12px} #tab-fin .fin-chart-head .fin-label{font-weight:750} #tab-fin .fin-legend{display:flex; gap:14px; margin-left:auto; flex-wrap:wrap} #tab-fin .fin-legend span{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--fin-ink2)} #tab-fin .fin-legend i{width:11px; height:11px; border-radius:4px; display:inline-block} #tab-fin .fin-legend i.round{border-radius:50%} #tab-fin .fin-draw{stroke-dasharray:1; stroke-dashoffset:1} /* area chart (room 1) */ #tab-fin .fin-area-wrap{position:relative} #tab-fin .fin-area-wrap svg{display:block; width:100%; height:auto} #tab-fin .fin-ax-label{font-size:12.5px; font-weight:700; fill:var(--fin-ink2)} #tab-fin .fin-ax-label.now{fill:var(--fin-ink); font-weight:800} #tab-fin .fin-end-label{font-size:13px; font-weight:800} #tab-fin .fin-hover-col{fill:transparent; cursor:default} #tab-fin .fin-hover-col:hover{fill:rgba(120,140,190,.08)} /* accounts */ #tab-fin .fin-accts{display:flex; flex-direction:column; gap:10px; margin-top:20px} #tab-fin .fin-acct{display:flex; align-items:center; gap:13px; padding:13px 15px; background:var(--fin-tile); border-radius:var(--fin-r-sm)} #tab-fin .fin-acct .info{display:flex; flex-direction:column; gap:2px} #tab-fin .fin-acct .info .n{font-size:14.5px; font-weight:750} #tab-fin .fin-acct .info .t{font-size:12px; color:var(--fin-ink3); font-weight:650} #tab-fin .fin-acct .bal{margin-left:auto; font-size:19px; font-weight:830; letter-spacing:-.02em; min-width:120px; text-align:right} /* empty state */ #tab-fin .fin-empty{background:var(--fin-tile); border-radius:var(--fin-r-sm); padding:26px 22px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; margin-top:6px} #tab-fin .fin-empty .e-emoji{font-size:30px} #tab-fin .fin-empty .e-t{font-size:15px; font-weight:800} #tab-fin .fin-empty .e-s{font-size:13px; color:var(--fin-ink2); font-weight:600; line-height:1.5} #tab-fin .fin-empty .fin-btn{margin-top:6px} /* donut (room 2) */ #tab-fin .fin-donut-flex{display:flex; gap:28px; align-items:center; margin-top:4px; flex-wrap:wrap} #tab-fin .fin-donut-box{position:relative; width:214px; flex:none} #tab-fin .fin-donut-box svg{display:block; width:100%; height:auto} #tab-fin .fin-donut-box path{transform-box:view-box; transform-origin:50% 50%; transition:transform .18s ease; cursor:default} #tab-fin .fin-donut-box path:hover{transform:scale(1.035)} #tab-fin .fin-donut-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; pointer-events:none} #tab-fin .fin-donut-center .k{font-size:12.5px; font-weight:700; color:var(--fin-ink2)} #tab-fin .fin-donut-center .v{font-size:21px; font-weight:850; letter-spacing:-.02em} #tab-fin .fin-rank{flex:1; min-width:200px; display:flex; flex-direction:column; gap:12px} #tab-fin .fin-rrow{display:flex; align-items:center; gap:10px} #tab-fin .fin-rrow .dot2{width:12px; height:12px; border-radius:4px; flex:none} #tab-fin .fin-rrow .n{font-size:14.5px; font-weight:750} #tab-fin .fin-rrow .a{margin-left:auto; font-size:15px; font-weight:800} #tab-fin .fin-rrow .pct{font-size:12.5px; color:var(--fin-ink3); font-weight:700; width:46px; text-align:right} /* people (room 4) */ #tab-fin .fin-stack{display:flex; height:18px; border-radius:999px; overflow:hidden; gap:2px; margin:16px 0 6px} #tab-fin .fin-seg{height:100%; width:0; cursor:default} #tab-fin .fin-seg:hover{filter:brightness(1.08)} #tab-fin .fin-pgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px} #tab-fin .fin-pcard{background:var(--fin-tile); border-radius:var(--fin-r-sm); padding:15px 16px; display:flex; flex-direction:column; gap:9px} #tab-fin .fin-pcard .top{display:flex; align-items:center; gap:10px} #tab-fin .fin-pav{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:850; flex:none; background:color-mix(in srgb, var(--pc) 20%, var(--fin-card)); color:color-mix(in srgb, var(--pc) 55%, var(--fin-mix-deep))} #tab-fin .fin-pcard .pn{font-size:15px; font-weight:800} #tab-fin .fin-pcard .pr{font-size:12px; font-weight:650; color:var(--fin-ink3)} #tab-fin .fin-pcard .pv{font-size:21px; font-weight:840; letter-spacing:-.02em} /* 복리후생비(4대보험) — 사람과 시각 구분: 중립 회색 아바타 + "보험" 배지 */ #tab-fin .fin-pcard.welfare{background:color-mix(in srgb, var(--fin-unc) 12%, var(--fin-tile))} #tab-fin .fin-pav.ins{background:color-mix(in srgb, var(--fin-unc) 22%, var(--fin-card)); color:var(--fin-unc-ink); font-size:17px} #tab-fin .fin-pcard.welfare .pv{color:var(--fin-unc-ink)} #tab-fin .fin-insbadge{display:inline-block; font-size:10px; font-weight:830; padding:2px 7px; border-radius:999px; background:color-mix(in srgb, var(--fin-unc) 24%, var(--fin-card)); color:var(--fin-unc-ink); vertical-align:1px} /* 수금 진행바 (room 5) */ #tab-fin .fin-prog{display:flex; flex-direction:column; gap:14px; margin-top:6px; padding-right:8px} #tab-fin .fin-prow{display:grid; grid-template-columns:38px 1fr 52px; align-items:center; gap:14px} #tab-fin .fin-prow .m{font-size:12.5px; font-weight:700; color:var(--fin-ink2)} #tab-fin .fin-prow.now{margin-top:24px; margin-bottom:24px} #tab-fin .fin-prow.now .m{color:var(--fin-ink); font-weight:800} #tab-fin .fin-ptrack{position:relative; height:18px; border-radius:999px; background:var(--fin-line); cursor:default} #tab-fin .fin-pfill{position:absolute; left:0; top:0; height:100%; border-radius:999px; background:var(--fin-income); width:0} #tab-fin .fin-pfill.est{background:color-mix(in srgb, var(--fin-income) 42%, var(--fin-card))} #tab-fin .fin-ptrack:hover .fin-pfill{filter:brightness(1.08)} #tab-fin .fin-prow .pct{font-size:13.5px; font-weight:800; color:var(--fin-ink2); text-align:right} #tab-fin .fin-prow.now .pct{color:var(--fin-income-ink)} #tab-fin .fin-plabel{position:absolute; font-size:12.5px; font-weight:800; white-space:nowrap} #tab-fin .fin-plabel.rev{top:-21px; right:0; color:var(--fin-ink2)} #tab-fin .fin-plabel.dep{bottom:-21px; transform:translateX(-50%); color:var(--fin-income-ink)} #tab-fin .fin-estbadge{display:inline-block; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:999px; background:var(--fin-badge-blue-bg); color:var(--fin-badge-blue-ink); margin-left:6px; vertical-align:middle} /* rings */ #tab-fin .fin-ring-wrap{display:flex; flex-direction:column; align-items:center; gap:6px} #tab-fin .fin-ring{width:150px; height:150px} #tab-fin .fin-ring .track{fill:none; stroke:var(--fin-tile); stroke-width:15} #tab-fin .fin-ring .val{fill:none; stroke-width:15; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)} #tab-fin .fin-ring-center{font-size:28px; font-weight:850; fill:var(--fin-ink); letter-spacing:-.02em} #tab-fin .fin-ring-center.sm{font-size:24px} #tab-fin .fin-ring-sub{font-size:12px; fill:var(--fin-ink3); font-weight:700} /* schedule (tax) */ #tab-fin .fin-sched{display:flex; flex-direction:column; gap:11px; margin-top:8px} #tab-fin .fin-sitem{display:flex; align-items:center; gap:13px; padding:13px 15px; background:var(--fin-tile); border-radius:var(--fin-r-sm)} #tab-fin .fin-sitem .sn{display:flex; flex-direction:column; gap:3px} #tab-fin .fin-sitem .sn .t{font-size:14.5px; font-weight:780} #tab-fin .fin-sitem .sn .d{font-size:12px; font-weight:650; color:var(--fin-ink3)} #tab-fin .fin-dday{margin-left:auto; font-size:13px; font-weight:820; padding:7px 12px; border-radius:999px; white-space:nowrap} #tab-fin .fin-dday.urgent{background:var(--fin-badge-red-bg); color:var(--fin-badge-red-ink)} /* 무한 펄스는 히어로 밑 할 일 스트립의 D-DAY 칩 하나만 (시안 규칙) */ #tab-fin .fin-dday.soon{background:var(--fin-badge-amber-bg); color:var(--fin-badge-amber-ink)} #tab-fin .fin-dday.far{background:var(--fin-badge-blue-bg); color:var(--fin-badge-blue-ink)} @keyframes fin-pulse{0%,100%{box-shadow:0 0 0 0 rgba(250,58,77,.45)}50%{box-shadow:0 0 0 8px rgba(250,58,77,0)}} #tab-fin .fin-note{font-size:12.5px; color:var(--fin-ink3); font-weight:650; margin-top:12px; line-height:1.55} #tab-fin .fin-callout{background:var(--fin-tile); border-radius:var(--fin-r-sm); padding:15px 17px; margin-top:16px; display:flex; align-items:center; gap:12px} #tab-fin .fin-callout .ci{font-size:15px; font-weight:750; color:var(--fin-ink2)} #tab-fin .fin-callout .cv{margin-left:auto; font-size:20px; font-weight:850; color:var(--fin-expense-ink)} #tab-fin .fin-callout .cv.income{color:var(--fin-income-ink)} #tab-fin .fin-bignum{font-size:42px; font-weight:870; letter-spacing:-.03em; line-height:1} /* work room KPIs (room 5) */ #tab-fin .fin-r5{display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center} #tab-fin .fin-work-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px} #tab-fin .fin-wk{background:var(--fin-tile); border-radius:var(--fin-r-sm); padding:16px 16px; text-align:left} #tab-fin .fin-wk .k{font-size:12.5px; font-weight:700; color:var(--fin-ink2); margin-bottom:8px} #tab-fin .fin-wk .v{font-size:25px; font-weight:840; letter-spacing:-.02em} #tab-fin .fin-wk .v .u{font-size:14px; font-weight:700; color:var(--fin-ink3); margin-left:1px} /* csv dropzone + import */ #tab-fin .fin-drop{grid-column:span 8; border-radius:var(--fin-r); padding:28px; background:var(--fin-card); box-shadow:var(--fin-shadow); border:2px dashed var(--fin-line); text-align:center; transition:border-color .2s ease, background .2s ease, transform .2s ease; display:flex; flex-direction:column; align-items:center; gap:12px; justify-content:center; cursor:pointer; opacity:0; transform:translateY(18px)} #tab-fin .fin-wrap.in .fin-drop{opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1) .5s, transform .6s cubic-bezier(.2,.7,.2,1) .5s, border-color .2s ease, background .2s ease} #tab-fin .fin-drop.hot{border-color:var(--fin-income); background:var(--fin-card2); transform:scale(1.01)} #tab-fin .fin-drop .dz-emoji{font-size:38px} #tab-fin .fin-drop .dz-t{font-size:17px; font-weight:800} #tab-fin .fin-drop .dz-s{font-size:13.5px; color:var(--fin-ink2); font-weight:600} #tab-fin .fin-history{grid-column:span 4; opacity:0; transform:translateY(18px)} #tab-fin .fin-wrap.in .fin-history{opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1) .58s, transform .6s cubic-bezier(.2,.7,.2,1) .58s} #tab-fin .fin-hlist{display:flex; flex-direction:column; gap:11px; margin-top:14px} #tab-fin .fin-hitem{display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--fin-tile); border-radius:var(--fin-r-sm)} #tab-fin .fin-hitem .hn{display:flex; flex-direction:column; gap:3px; min-width:0} #tab-fin .fin-hitem .hn .f{font-size:14px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #tab-fin .fin-hitem .hn .m{font-size:12px; color:var(--fin-ink3); font-weight:650} #tab-fin .fin-hitem .fin-roll{margin-left:auto; display:flex; gap:6px; align-items:center; flex:none} #tab-fin .fin-pill{font-size:12px; font-weight:800; padding:5px 11px; border-radius:999px; background:var(--fin-badge-green-bg); color:var(--fin-badge-green-ink)} /* import preview / unclassified — full-width cards below bento */ #tab-fin .fin-section{grid-column:span 12} #tab-fin .fin-section.hidden{display:none} #tab-fin .fin-preview-meta{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 16px} #tab-fin .fin-chip{background:var(--fin-tile); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:750; color:var(--fin-ink2)} #tab-fin .fin-chip b{color:var(--fin-ink)} #tab-fin .fin-chip.blue{background:var(--fin-badge-blue-bg); color:var(--fin-badge-blue-ink)} #tab-fin .fin-chip.amber{background:var(--fin-badge-amber-bg); color:var(--fin-badge-amber-ink)} #tab-fin .fin-tbl-wrap{overflow-x:auto; border-radius:var(--fin-r-sm); border:1px solid var(--fin-line)} #tab-fin table.fin-tbl{border-collapse:collapse; width:100%; font-size:13px} #tab-fin table.fin-tbl th{background:var(--fin-tile); text-align:left; padding:9px 12px; font-weight:750; color:var(--fin-ink2); position:sticky; top:0; white-space:nowrap} #tab-fin table.fin-tbl td{padding:8px 12px; border-top:1px solid var(--fin-line); white-space:nowrap} #tab-fin table.fin-tbl td.n{text-align:right} #tab-fin table.fin-tbl td.in{color:var(--fin-income-ink); font-weight:750} #tab-fin table.fin-tbl td.out{color:var(--fin-expense-ink); font-weight:750} #tab-fin .fin-row-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px} #tab-fin .fin-field{display:flex; gap:8px; align-items:center; flex-wrap:wrap} #tab-fin .fin-field label{font-size:13px; font-weight:700; color:var(--fin-ink2)} #tab-fin .fin-input,#tab-fin .fin-select{font-family:inherit; font-size:14px; padding:9px 12px; border-radius:11px; border:1px solid var(--fin-line); background:var(--fin-card); color:var(--fin-ink); font-weight:650} #tab-fin .fin-input:focus,#tab-fin .fin-select:focus{outline:2px solid var(--fin-income); outline-offset:1px} /* unclassified rows */ #tab-fin .fin-uclist{display:flex; flex-direction:column; gap:10px; margin-top:8px} #tab-fin .fin-ucrow{background:var(--fin-tile); border-radius:var(--fin-r-sm); padding:13px 15px} #tab-fin .fin-ucrow:focus{outline:2px solid var(--fin-income); outline-offset:1px} #tab-fin .fin-ucrow:focus-visible{outline:2px solid var(--fin-income); outline-offset:1px} #tab-fin .fin-uctop{display:flex; align-items:center; gap:12px; flex-wrap:wrap} #tab-fin .fin-uctop .ud{font-size:12.5px; font-weight:700; color:var(--fin-ink3); min-width:82px} #tab-fin .fin-uctop .udesc{font-size:14px; font-weight:750; flex:1; min-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #tab-fin .fin-uctop .uamt{font-size:15px; font-weight:820; letter-spacing:-.02em} #tab-fin .fin-uctop .uamt.in{color:var(--fin-income-ink)} #tab-fin .fin-uctop .uamt.out{color:var(--fin-expense-ink)} #tab-fin .fin-catbtns{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px} #tab-fin .fin-catbtn{font-family:inherit; cursor:pointer; border:1px solid var(--fin-line); background:var(--fin-card); color:var(--fin-ink); font-size:12.5px; font-weight:700; padding:7px 11px; border-radius:10px; display:inline-flex; align-items:center; gap:5px; transition:background .12s ease, border-color .12s ease} #tab-fin .fin-catbtn:hover{border-color:var(--fin-income); background:var(--fin-card2)} #tab-fin .fin-catbtn .kk{font-size:10.5px; color:var(--fin-ink3); font-weight:800} #tab-fin .fin-rulesug{margin-top:12px; background:var(--fin-badge-blue-bg); border-radius:var(--fin-r-sm); padding:13px 15px; display:flex; gap:10px; align-items:center; flex-wrap:wrap} #tab-fin .fin-rulesug .rt{font-size:13.5px; font-weight:750; color:var(--fin-badge-blue-ink)} #tab-fin .fin-uchint{font-size:12.5px; color:var(--fin-ink3); font-weight:650; margin-bottom:10px} @media (max-width:900px){ #tab-fin .fin-col7,#tab-fin .fin-col8,#tab-fin .fin-col5,#tab-fin .fin-col4, #tab-fin .fin-col6,#tab-fin .fin-drop,#tab-fin .fin-history{grid-column:span 12} #tab-fin .fin-r5{grid-template-columns:1fr} #tab-fin .fin-work-kpis{grid-template-columns:repeat(2,1fr)} } @media (prefers-reduced-motion: reduce){ #tab-fin *{animation:none !important; transition:none !important} #tab-fin .fin-card,#tab-fin .fin-hero,#tab-fin .fin-drop,#tab-fin .fin-history{opacity:1 !important; transform:none !important} #tab-fin .fin-draw{stroke-dashoffset:0 !important} } /* tooltip (fixed, appended to body — scoped by unique class) */ .fin-tip{position:fixed; z-index:99; pointer-events:none; background:#16203A; color:#fff; padding:8px 11px; border-radius:10px; font-size:12.5px; font-weight:750; opacity:0; transform:translateY(4px); transition:opacity .14s ease, transform .14s ease; box-shadow:0 12px 32px rgba(23,37,84,.28)} [data-theme="dark"] .fin-tip{background:#28324B; color:#EBF0FB} .fin-tip.show{opacity:1; transform:none} .fin-tip .tv{font-variant-numeric:tabular-nums} /* ===================================================================== v2 개편 컴포넌트 (세 몫 시각 언어) — 히어로·스트립·바이탈·생키·타임라인·월마감·미분류 묶음 ===================================================================== */ /* ---------- 히어로 v2: 신호등 + 회사 몫 + 세 몫 스택바 ---------- */ #tab-fin .fin-hero-top{display:flex; align-items:center; gap:24px; position:relative; z-index:1; margin-bottom:22px; flex-wrap:wrap} #tab-fin .fin-vlight{width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:28px; box-shadow:0 0 0 6px var(--vpc,transparent)} #tab-fin .fin-wrap.in .fin-vlight{animation:fin-vpulse 1.5s ease-out 1 .5s} @keyframes fin-vpulse{0%{box-shadow:0 0 0 6px var(--vpc)}60%{box-shadow:0 0 0 20px transparent}100%{box-shadow:0 0 0 6px var(--vpc)}} #tab-fin .fin-vword{min-width:0} #tab-fin .fin-vword .w{font-size:38px; font-weight:880; letter-spacing:-.03em; line-height:1; color:#fff} #tab-fin .fin-vword .why{font-size:12px; font-weight:650; color:var(--fin-on-hero2); margin-top:7px; max-width:440px; line-height:1.45} #tab-fin .fin-hero-money{margin-left:auto; text-align:right} #tab-fin .fin-hero-money .k{font-size:15px; font-weight:800; opacity:.95} #tab-fin .fin-hero-money .v{font-size:52px; font-weight:880; letter-spacing:-.03em; line-height:1.05; text-shadow:0 2px 20px rgba(0,0,0,.18)} #tab-fin .fin-hero-money .delta{display:inline-block; margin-top:7px; font-size:13.5px; font-weight:830; padding:5px 12px; border-radius:999px; background:var(--fin-card); color:var(--fin-income-ink)} #tab-fin .fin-hero-money .delta.down{color:var(--fin-expense-ink)} #tab-fin .fin-hero-bar svg{display:block; width:100%; height:auto} #tab-fin .fin-hb-cap{font-size:12.5px; font-weight:700; fill:var(--fin-on-hero2)} #tab-fin .fin-hb-lab{font-size:14px; font-weight:800; fill:#fff} #tab-fin .fin-hb-lead{stroke:rgba(255,255,255,.65); stroke-width:1.5} #tab-fin .fin-hb-seg{transform-box:fill-box; transform-origin:left center; cursor:default; stroke:rgba(255,255,255,.85); stroke-width:1.5} #tab-fin .fin-hb-seg:hover{filter:brightness(1.12)} #tab-fin .fin-hb-seg:focus{outline:none; filter:brightness(1.2)} #tab-fin .fin-hb-anim{transform:scaleX(0); transition:transform .9s cubic-bezier(.2,.8,.2,1) .35s} #tab-fin .fin-wrap.in .fin-hb-anim{transform:scaleX(1)} #tab-fin .fin-hb-fade{opacity:0} #tab-fin .fin-wrap.in .fin-hb-fade{opacity:1; transition:opacity .6s ease 1.1s} /* ---------- 미니 배지(신뢰도) ---------- */ #tab-fin .fin-mini-badge{font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:999px; background:var(--fin-badge-amber-bg); color:var(--fin-badge-amber-ink)} /* ---------- 할 일 체크리스트 (세로 목록, 히어로 바로 아래·낮은 카드) ---------- */ #tab-fin .fin-todo-card{padding:15px 22px} #tab-fin .fin-todo-head{font-size:13.5px; font-weight:800; color:var(--fin-ink2); margin-bottom:9px} #tab-fin .fin-todo-list{display:flex; flex-direction:column; gap:7px} #tab-fin .fin-todo-row{display:flex; align-items:center; gap:11px; min-height:26px} #tab-fin .fin-todo-check{width:22px; height:22px; flex:none; border-radius:7px; padding:0; border:2px solid var(--fin-ink3); background:var(--fin-card); cursor:pointer; color:var(--fin-badge-green-ink); font-weight:900; font-size:14px; line-height:1; display:grid; place-items:center; font-family:inherit} #tab-fin .fin-todo-check:hover{border-color:var(--fin-income)} #tab-fin .fin-todo-check:focus-visible{outline:2px solid var(--fin-income); outline-offset:2px} #tab-fin .fin-todo-row.done .fin-todo-check{background:var(--fin-badge-green-bg); border-color:var(--fin-badge-green-bg)} #tab-fin .fin-todo-label{font-size:14.5px; font-weight:750; cursor:pointer} #tab-fin .fin-todo-label.link{color:var(--fin-income-ink); text-decoration:underline; text-underline-offset:3px} #tab-fin .fin-todo-amt{font-size:14px; font-weight:820; letter-spacing:-.01em} #tab-fin .fin-todo-row.done .fin-todo-label, #tab-fin .fin-todo-row.done .fin-todo-amt{text-decoration:line-through; opacity:.55} #tab-fin .fin-todo-dday{font-size:11.5px; font-weight:830; padding:4px 10px; border-radius:999px; flex:none} #tab-fin .fin-todo-dday.dday{background:var(--fin-badge-red-bg); color:var(--fin-badge-red-ink); animation:fin-ddaypulse 1.5s ease-in-out infinite} /* 유일한 무한 펄스 */ #tab-fin .fin-todo-dday.off{background:var(--fin-badge-red-bg); color:var(--fin-badge-red-ink); opacity:.55} #tab-fin .fin-todo-dday.soon{background:var(--fin-badge-amber-bg); color:var(--fin-badge-amber-ink)} @keyframes fin-ddaypulse{0%,100%{box-shadow:0 0 0 0 rgba(250,58,77,.4)}50%{box-shadow:0 0 0 7px rgba(250,58,77,0)}} #tab-fin .fin-todo-all{display:none; font-size:13.5px; font-weight:800; padding:6px 0; color:var(--fin-badge-green-ink)} #tab-fin .fin-todo-card.alldone .fin-todo-list, #tab-fin .fin-todo-card.alldone .fin-todo-head{display:none} #tab-fin .fin-todo-card.alldone .fin-todo-all{display:inline-flex} /* ---------- 판정 ⓘ (히어로 짙은 배경 위 — 어두운 원 + 흰 글자로 대비 확보) ---------- */ #tab-fin .fin-idot{width:19px; height:19px; border-radius:50%; flex:none; border:1.5px solid rgba(255,255,255,.55); background:rgba(10,18,50,.5); color:#fff; font-size:11.5px; font-weight:800; cursor:help; display:inline-grid; place-items:center; font-family:inherit; line-height:1; vertical-align:6px} #tab-fin .fin-idot:hover,#tab-fin .fin-idot:focus{background:rgba(10,18,50,.6); border-color:#fff; outline:none} /* ---------- 바이탈 3칸(컴팩트 가로형) ---------- */ #tab-fin .fin-vital{flex-direction:row; align-items:center; gap:16px; padding:16px 20px; cursor:help} #tab-fin .fin-vital:focus-visible{outline:2px solid var(--fin-income); outline-offset:2px} #tab-fin .fin-vital .vg{flex:none; width:120px; display:grid; place-items:center} #tab-fin .fin-vital .vtxt{display:flex; flex-direction:column; gap:4px; min-width:0} #tab-fin .fin-vital .vk2{font-size:13px; font-weight:750; color:var(--fin-ink2); display:flex; align-items:center; gap:6px} #tab-fin .fin-vital .vn{font-size:22px; font-weight:860; letter-spacing:-.02em; white-space:nowrap} #tab-fin .fin-gauge{width:118px; height:70px} #tab-fin .fin-gauge .gtrack{fill:none; stroke:var(--fin-line); stroke-width:14; stroke-linecap:round} #tab-fin .fin-gauge .gval{fill:none; stroke:var(--fin-ok); stroke-width:14; stroke-linecap:round} #tab-fin .fin-gauge .needle{stroke:var(--fin-ink); stroke-width:3.5; stroke-linecap:round; transform-box:view-box; transform-origin:95px 100px} #tab-fin .fin-gauge .ncap{fill:var(--fin-ink)} #tab-fin .fin-vital .big-glyph{font-size:34px; line-height:1; font-weight:900} #tab-fin .fin-vital .big-glyph.up{color:var(--fin-income-ink)} #tab-fin .fin-vital .big-glyph.down{color:var(--fin-expense-ink)} #tab-fin .fin-vital .big-glyph.okc{width:46px; height:46px; border-radius:50%; background:var(--fin-badge-green-bg); color:var(--fin-badge-green-ink); font-size:24px; display:grid; place-items:center; font-weight:900} #tab-fin .fin-vital .big-glyph.warnc{width:46px; height:46px; border-radius:50%; background:var(--fin-badge-amber-bg); color:var(--fin-badge-amber-ink); font-size:24px; display:grid; place-items:center; font-weight:900} /* ---------- 지출 도넛(col5 세로형) ---------- */ #tab-fin .fin-donut-col{display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:4px} #tab-fin .fin-donut-col .fin-donut-box{width:230px} #tab-fin .fin-donut-col .fin-rank{width:100%; flex:none; min-width:0} #tab-fin .fin-rrow .shi{font-size:12px; margin-left:-2px} /* ---------- 인건비 실비용 한 줄 ---------- */ #tab-fin .fin-pnote{font-size:11.5px; font-weight:650; color:var(--fin-ink3); margin-top:2px} #tab-fin .fin-pnote .num{color:var(--fin-share-ppl-ink); font-weight:750} /* ---------- 계좌 스파크라인 ---------- */ #tab-fin .fin-acct .info{flex:1; min-width:0} #tab-fin .fin-acct .spark{display:flex; align-items:center; margin-right:14px} #tab-fin .fin-acct .spark svg{display:block} /* ---------- 자금 흐름 생키 ---------- */ #tab-fin .fin-sankey-wrap svg, #tab-fin #fin-sankey-host svg{display:block; width:100%; height:auto} #tab-fin .fin-sk-ribbon{transition:opacity .18s ease; cursor:default} #tab-fin .fin-sk-ribbon:hover{opacity:.8 !important} #tab-fin .fin-sk-anim{transform:scaleX(0); transform-box:fill-box; transform-origin:left center; transition:transform .9s cubic-bezier(.2,.8,.2,1) .6s} #tab-fin .fin-wrap.in .fin-sk-anim{transform:scaleX(1)} #tab-fin .fin-sk-anim.d1{transition-delay:1s} #tab-fin .fin-sk-anim.d2{transition-delay:1.35s} #tab-fin .fin-sk-label{font-size:13px; font-weight:750; fill:var(--fin-ink)} #tab-fin .fin-sk-label.sub{font-size:11.5px; font-weight:650; fill:var(--fin-ink3)} #tab-fin .fin-sk-label.strong{font-size:14.5px; font-weight:850} #tab-fin .fin-sk-label.co{fill:var(--fin-share-co-ink)} #tab-fin .fin-sk-fade{opacity:0} #tab-fin .fin-wrap.in .fin-sk-fade{opacity:1; transition:opacity .6s ease 1.7s} /* ---------- 자금 일정 타임라인 ---------- */ #tab-fin .fin-tlwrap{padding:18px 26px 14px} #tab-fin #fin-tline svg{display:block; width:100%; height:auto} #tab-fin .fin-tl-axis{stroke:var(--fin-line); stroke-width:2.5} #tab-fin .fin-tl-stem{stroke-width:2} #tab-fin .fin-tl-stem.up{stroke:var(--fin-income)} #tab-fin .fin-tl-stem.dn{stroke:var(--fin-expense)} #tab-fin .fin-tl-stem.est{stroke-dasharray:4 4; opacity:.7} #tab-fin .fin-tl-grow{transform:scaleY(0); transform-box:fill-box; transition:transform .6s cubic-bezier(.2,.8,.2,1) calc(.4s + var(--d,0)*120ms)} #tab-fin .fin-tl-grow.up{transform-origin:center bottom} #tab-fin .fin-tl-grow.dn{transform-origin:center top} #tab-fin .fin-wrap.in .fin-tl-grow{transform:scaleY(1)} #tab-fin .fin-tl-fade{opacity:0} #tab-fin .fin-wrap.in .fin-tl-fade{opacity:1; transition:opacity .45s ease calc(.55s + var(--d,0)*120ms)} #tab-fin .fin-tl-name{font-size:12px; font-weight:750; fill:var(--fin-ink)} #tab-fin .fin-tl-amt-in{fill:var(--fin-income-ink)} #tab-fin .fin-tl-amt-out{fill:var(--fin-expense-ink)} #tab-fin .fin-tl-sub{font-size:11px; font-weight:650; fill:var(--fin-ink3)} #tab-fin .fin-tl-strong{font-size:15.5px; font-weight:850; fill:var(--fin-ink)} #tab-fin .fin-tl-dot{cursor:default} /* ---------- 월 마감(가로 도장) ---------- */ #tab-fin .fin-closing{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 24px} #tab-fin .fin-closing h2{font-size:16px; font-weight:800; margin-right:8px} #tab-fin .fin-mstamp{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; padding:9px 15px; border-radius:999px; background:var(--fin-badge-green-bg); color:var(--fin-badge-green-ink); border:0; font-family:inherit} #tab-fin .fin-mstamp.done{cursor:pointer} #tab-fin .fin-mstamp.done:hover{filter:brightness(1.05)} #tab-fin .fin-mstamp.closable{cursor:pointer; background:var(--fin-badge-blue-bg); color:var(--fin-badge-blue-ink)} #tab-fin .fin-mstamp.closable:hover{filter:brightness(1.05)} #tab-fin .fin-mstamp.lock{background:var(--fin-badge-red-bg); color:var(--fin-badge-red-ink); cursor:pointer} #tab-fin .fin-mstamp.lock:hover{filter:brightness(1.05)} #tab-fin .fin-mstamp:focus-visible{outline:2px solid var(--fin-income); outline-offset:2px} #tab-fin .fin-closing .sub2{font-size:12.5px; color:var(--fin-ink3); font-weight:650; margin-left:auto} /* ---------- 미분류 정리: 패턴 묶음 카드 ---------- */ #tab-fin .fin-glist{display:flex; flex-direction:column; gap:12px; margin-top:8px} #tab-fin .fin-gcard{background:var(--fin-tile); border-radius:var(--fin-r-sm); padding:15px 16px} #tab-fin .fin-gtop{display:flex; align-items:center; gap:12px; flex-wrap:wrap} #tab-fin .fin-gsample{font-size:14.5px; font-weight:800; flex:1; min-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #tab-fin .fin-gcount{font-size:12.5px; font-weight:750; color:var(--fin-ink2); background:var(--fin-card); padding:4px 10px; border-radius:999px} #tab-fin .fin-gsum{font-size:15px; font-weight:850; letter-spacing:-.02em} #tab-fin .fin-gsum.in{color:var(--fin-income-ink)} #tab-fin .fin-gsum.out{color:var(--fin-expense-ink)} #tab-fin .fin-gsum.mix{color:var(--fin-ink2)} #tab-fin .fin-gcats{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px} #tab-fin .fin-gfoot{display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap} #tab-fin .fin-grule{font-size:12.5px; font-weight:700; color:var(--fin-ink2); display:inline-flex; align-items:center; gap:6px; cursor:pointer} #tab-fin .fin-grule input{width:15px; height:15px; accent-color:var(--fin-income)} #tab-fin .fin-gexpand{margin-top:12px; display:flex; flex-direction:column; gap:8px} #tab-fin .fin-gexpand.hidden{display:none} #tab-fin .fin-gexpand .fin-ucrow{background:var(--fin-card)} /* ---------- 드롭존: "넣을 파일" 체크리스트 + 커버리지 ---------- */ #tab-fin .fin-dz-list{width:100%; max-width:560px; display:flex; flex-direction:column; gap:7px; margin-top:12px; text-align:left} #tab-fin .fin-dz-list:empty{display:none} #tab-fin .fin-dz-head{font-size:12.5px; font-weight:800; color:var(--fin-ink2); margin-bottom:1px} #tab-fin .fin-dz-row{display:flex; align-items:center; gap:10px; padding:9px 13px; background:var(--fin-tile); border-radius:11px; font-size:13px; font-weight:700; color:var(--fin-ink2)} #tab-fin .fin-dz-row .bx{width:19px; height:19px; flex:none; border-radius:6px; border:2px solid var(--fin-ink3); background:var(--fin-card); color:var(--fin-badge-green-ink); font-weight:900; font-size:12px; line-height:1; display:grid; place-items:center} #tab-fin .fin-dz-row .nm{font-weight:800; color:var(--fin-ink); flex:none} #tab-fin .fin-dz-row .cov{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #tab-fin .fin-dz-row .cov .warn{color:var(--fin-badge-amber-ink); font-weight:830} #tab-fin .fin-dz-row.done{color:var(--fin-badge-green-ink)} #tab-fin .fin-dz-row.done .bx{background:var(--fin-badge-green-bg); border-color:var(--fin-badge-green-bg)} #tab-fin .fin-dz-row.done .nm,#tab-fin .fin-dz-row.done .cov{text-decoration:line-through; color:var(--fin-badge-green-ink); opacity:.8} /* ---------- 현금 흐름: 달 클릭 히트영역 포커스 ---------- */ #tab-fin .fin-hover-col{cursor:pointer} #tab-fin .fin-hover-col:focus{outline:none; fill:rgba(120,140,190,.14)} #tab-fin .fin-hover-col:focus-visible{outline:none; fill:rgba(120,140,190,.14)} /* 새 애니메이션 클래스는 animate 인자가 true(첫 진입·비-reduce)일 때만 DOM에 부여된다. reduced-motion·재렌더 시엔 클래스 자체가 없어 초기 숨김 상태가 적용되지 않는다. 안전망만 추가: */ @media (prefers-reduced-motion: reduce){ #tab-fin .fin-hb-anim{transform:scaleX(1) !important} #tab-fin .fin-hb-fade,#tab-fin .fin-sk-fade,#tab-fin .fin-tl-fade{opacity:1 !important} #tab-fin .fin-sk-anim{transform:scaleX(1) !important} #tab-fin .fin-tl-grow{transform:scaleY(1) !important} } /* ---------- 드롭존: 월 커버리지 그리드 (연도별 12칸 — 있음/일부/없음) ---------- */ #tab-fin .fin-covgrid{background:var(--fin-tile); border-radius:11px; padding:11px 13px 12px; display:flex; flex-direction:column; gap:7px} #tab-fin .fin-covgrid .cg-head{display:flex; align-items:center; gap:10px} #tab-fin .fin-covgrid .cg-head .bx{width:19px; height:19px; flex:none; border-radius:6px; border:2px solid var(--fin-ink3); background:var(--fin-card); color:var(--fin-badge-green-ink); font-weight:900; font-size:12px; line-height:1; display:grid; place-items:center} #tab-fin .fin-covgrid.done .cg-head .bx{background:var(--fin-badge-green-bg); border-color:var(--fin-badge-green-bg)} #tab-fin .fin-covgrid .cg-head .nm{font-size:13px; font-weight:800; color:var(--fin-ink)} #tab-fin .fin-covgrid.done .cg-head .nm{text-decoration:line-through; color:var(--fin-badge-green-ink)} #tab-fin .fin-covgrid .cg-head .sum{margin-left:auto; font-size:12px; font-weight:830} #tab-fin .fin-covgrid .cg-head .sum.miss{color:var(--fin-expense-ink)} #tab-fin .fin-covgrid .cg-head .sum.full{color:var(--fin-badge-green-ink)} #tab-fin .fin-covgrid .cg-row{display:flex; align-items:center; gap:9px} #tab-fin .fin-covgrid .cg-year{font-size:11.5px; font-weight:750; color:var(--fin-ink2); width:34px; flex:none} #tab-fin .fin-covgrid .cg-cells{display:flex; gap:4px} #tab-fin .cg-cell{width:20px; height:20px; border-radius:6px; flex:none; box-sizing:border-box} #tab-fin .cg-cell.void{visibility:hidden} #tab-fin .cg-cell.ok{background:var(--fin-ok); border:1.5px solid var(--fin-ok-ink); cursor:pointer} #tab-fin .cg-cell.partial{border:1.5px solid var(--fin-ok-ink); cursor:pointer; background:linear-gradient(135deg, var(--fin-ok) 50%, var(--fin-card) 50%)} /* 반 채움 = 일부만 */ #tab-fin .cg-cell.missing{background:var(--fin-card); border:2px solid var(--fin-expense-ink); cursor:pointer} #tab-fin .cg-cell.ok:hover,#tab-fin .cg-cell.partial:hover{filter:brightness(1.1)} #tab-fin .cg-cell.missing:hover{background:var(--fin-badge-red-bg)} #tab-fin .cg-cell:focus-visible{outline:2px solid var(--fin-income); outline-offset:2px} /* ---------- 월 상세 분석 카드 (중앙 고정 + 살짝 딤 — #tab-fin 하위) ---------- */ #tab-fin .fin-brief-wrap{position:fixed; inset:0; z-index:108; visibility:hidden; pointer-events:none} #tab-fin .fin-brief-wrap.show{visibility:visible; pointer-events:auto} #tab-fin .fin-dim{position:absolute; inset:0; background:rgba(10,14,24,.25); opacity:0; transition:opacity .18s ease} #tab-fin .fin-brief-wrap.show .fin-dim{opacity:1} #tab-fin .fin-brief{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.97); width:min(560px, calc(100vw - 32px)); max-height:min(86vh, 720px); overflow-y:auto; background:var(--fin-card); color:var(--fin-ink); border-radius:20px; box-shadow:var(--fin-shadow-lg); padding:22px 24px 20px; opacity:0; transition:opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1)} #tab-fin .fin-brief-wrap.show .fin-brief{opacity:1; transform:translate(-50%,-50%) scale(1)} #tab-fin .fin-brief .bclose{position:absolute; top:14px; right:14px; width:32px; height:32px; border:0; border-radius:10px; background:var(--fin-tile); color:var(--fin-ink2); font-size:14px; font-weight:800; cursor:pointer; display:grid; place-items:center; font-family:inherit; line-height:1} #tab-fin .fin-brief .bclose:hover{background:var(--fin-line); color:var(--fin-ink)} #tab-fin .fin-brief .bclose:focus-visible{outline:2px solid var(--fin-income); outline-offset:2px} #tab-fin .fin-brief .bt{font-size:19px; font-weight:850; letter-spacing:-.02em; margin-bottom:14px; display:flex; align-items:center; gap:9px; padding-right:36px} #tab-fin .fin-brief .bkpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px} #tab-fin .fin-brief .bkpi{background:var(--fin-tile); border-radius:12px; padding:11px 13px} #tab-fin .fin-brief .bkpi .k{font-size:12px; font-weight:700; color:var(--fin-ink2); margin-bottom:5px} #tab-fin .fin-brief .bkpi .v{font-size:16.5px; font-weight:840; letter-spacing:-.02em; white-space:nowrap} #tab-fin .fin-brief .bdelta{display:inline-block; margin-top:5px; font-size:11px; font-weight:830; padding:2px 8px; border-radius:999px} #tab-fin .fin-brief .bdelta.pos{background:var(--fin-badge-blue-bg); color:var(--fin-badge-blue-ink)} #tab-fin .fin-brief .bdelta.neg{background:var(--fin-badge-red-bg); color:var(--fin-badge-red-ink)} #tab-fin .fin-brief .bsec{font-size:12.5px; font-weight:800; color:var(--fin-ink2); margin:14px 0 8px} #tab-fin .fin-brief .bchart svg{display:block; width:100%; height:auto} #tab-fin .fin-brief .blab{font-size:12px; font-weight:800; fill:var(--fin-share-co-ink)} #tab-fin .fin-brief .bbars{display:flex; flex-direction:column; gap:7px} #tab-fin .fin-brief .bbar-row{display:flex; align-items:center; gap:10px} #tab-fin .fin-brief .bbar-row .n{font-size:12.5px; font-weight:750; width:84px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #tab-fin .fin-brief .bbar-row .track{flex:1; height:12px; border-radius:999px; background:var(--fin-tile); overflow:hidden} #tab-fin .fin-brief .bbar-row .track i{display:block; height:100%; border-radius:999px} #tab-fin .fin-brief .bbar-row .a{font-size:12.5px; font-weight:800; width:92px; text-align:right; flex:none} #tab-fin .fin-brief .blists{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px} #tab-fin .fin-brief .bcol .bh{font-size:12.5px; font-weight:830; margin-bottom:7px} #tab-fin .fin-brief .bcol .bh.in{color:var(--fin-income-ink)} #tab-fin .fin-brief .bcol .bh.out{color:var(--fin-expense-ink)} #tab-fin .fin-brief .brow{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12.5px; font-weight:700} #tab-fin .fin-brief .brow .d{color:var(--fin-ink3); flex:none} #tab-fin .fin-brief .brow .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #tab-fin .fin-brief .brow .a{font-weight:820; flex:none} #tab-fin .fin-brief .brow .a.in{color:var(--fin-income-ink)} #tab-fin .fin-brief .brow .a.out{color:var(--fin-expense-ink)} #tab-fin .fin-brief .bgo{width:100%; justify-content:center; margin-top:18px} #tab-fin .fin-brief .bempty{display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 0 10px; text-align:center; font-size:14px; font-weight:700; color:var(--fin-ink2)} #tab-fin .fin-brief .bempty .be{font-size:34px} @media (max-width:640px){ #tab-fin .fin-brief .blists{grid-template-columns:1fr} #tab-fin .fin-brief .bkpis{grid-template-columns:1fr} } @media (prefers-reduced-motion: reduce){ #tab-fin .fin-dim,#tab-fin .fin-brief{transition:none !important} } /* ---------- 미분류 정리 v2: 시트 감성 행 목록 + 팝오버 분류 ---------- */ #tab-fin .fin-uctools{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:2px 0 12px} #tab-fin .fin-uctools .ucq{flex:1; min-width:170px} #tab-fin .ucdirs{display:inline-flex; gap:6px} #tab-fin .ucdir{border:1px solid var(--fin-line); background:var(--fin-card); color:var(--fin-ink2); font-family:inherit; font-size:12.5px; font-weight:750; padding:7px 13px; border-radius:999px; cursor:pointer} #tab-fin .ucdir:hover{border-color:var(--fin-income)} #tab-fin .ucdir.on{background:var(--fin-badge-blue-bg); color:var(--fin-badge-blue-ink); border-color:transparent} #tab-fin .fin-uclist2{display:flex; flex-direction:column; gap:4px} #tab-fin .ucr{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; background:var(--fin-tile); cursor:pointer} #tab-fin .ucr:hover{filter:brightness(.985)} [data-theme="dark"] #tab-fin .ucr:hover{filter:brightness(1.12)} #tab-fin .ucr:focus-visible{outline:2px solid var(--fin-income); outline-offset:1px} #tab-fin .ucr.open{border-radius:10px 10px 0 0} #tab-fin .ucr .dot{width:9px; height:9px; border-radius:50%; flex:none} #tab-fin .ucr .dot.in{background:var(--fin-income)} #tab-fin .ucr .dot.out{background:var(--fin-expense)} #tab-fin .ucr .dot.mix{background:var(--fin-unc)} #tab-fin .ucr .mid{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px} #tab-fin .ucr .pat{font-size:13.5px; font-weight:800; color:var(--fin-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #tab-fin .ucr .pat .ic{font-size:11px; font-weight:400} #tab-fin .ucr .ex{font-size:11.5px; font-weight:700; color:var(--fin-ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #tab-fin .ucr .cnt{flex:none; font-size:12px; font-weight:750; color:var(--fin-ink2); width:44px; text-align:right} #tab-fin .ucr .sum{flex:none; font-size:13.5px; font-weight:830; width:104px; text-align:right} #tab-fin .ucr .sum.in{color:var(--fin-income-ink)} #tab-fin .ucr .sum.out{color:var(--fin-expense-ink)} #tab-fin .ucr .sum.mix{color:var(--fin-ink2)} #tab-fin .ucr .acts{flex:none; display:flex; gap:6px; align-items:center} #tab-fin .ucr-suggest{border:0; font-family:inherit; cursor:pointer; font-size:12px; font-weight:800; padding:6px 11px; border-radius:9px; background:var(--fin-badge-blue-bg); color:var(--fin-badge-blue-ink); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #tab-fin .ucr-suggest:hover{filter:brightness(.96)} [data-theme="dark"] #tab-fin .ucr-suggest:hover{filter:brightness(1.15)} #tab-fin .ucr-suggest .ev{font-weight:700; opacity:.85} #tab-fin .ucr-open,#tab-fin .uce-open{border:1px solid var(--fin-line); font-family:inherit; cursor:pointer; font-size:12px; font-weight:750; padding:6px 11px; border-radius:9px; background:var(--fin-card); color:var(--fin-ink)} #tab-fin .ucr-open:hover,#tab-fin .uce-open:hover{border-color:var(--fin-income)} #tab-fin .ucr-more{width:100%; justify-content:center; margin-top:10px} #tab-fin .ucr-more.hidden{display:none} #tab-fin .ucr-x{background:var(--fin-card2); border-radius:0 0 10px 10px; padding:4px 12px 8px; display:flex; flex-direction:column; gap:2px; border:1px solid var(--fin-line); border-top:0} #tab-fin .ucr-x.hidden{display:none} #tab-fin .uce{display:flex; align-items:center; gap:10px; padding:5px 2px; font-size:12.5px; font-weight:700} #tab-fin .uce .d{flex:none; color:var(--fin-ink3)} #tab-fin .uce .ds{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fin-ink)} #tab-fin .uce .ac{flex:none; font-size:11.5px; color:var(--fin-ink3)} #tab-fin .uce .am{flex:none; font-weight:820; width:100px; text-align:right} #tab-fin .uce .am.in{color:var(--fin-income-ink)} #tab-fin .uce .am.out{color:var(--fin-expense-ink)} /* 카테고리 팝오버 — 지연 렌더, 한 번에 하나 */ #tab-fin .fin-ucpop{position:fixed; z-index:112; background:var(--fin-card); border-radius:14px; box-shadow:var(--fin-shadow-lg); border:1px solid var(--fin-line); padding:12px 14px; width:min(430px, calc(100vw - 24px))} #tab-fin .fin-ucpop.hidden{display:none} #tab-fin .fin-ucpop .ucp-cats{display:flex; gap:6px; flex-wrap:wrap} #tab-fin .fin-ucpop .fin-grule{margin-top:10px; display:flex} @media (max-width:700px){ #tab-fin .ucr{flex-wrap:wrap} #tab-fin .ucr .mid{flex-basis:100%; order:-1} } /* ---------- 지출 드릴다운 ---------- */ /* 1층 어포던스: 도넛 조각·랭킹 줄 클릭 */ #tab-fin .fin-donut-box path{cursor:pointer} #tab-fin .fin-rrow.click{cursor:pointer; border-radius:9px; padding:4px 6px; margin:-4px -6px} #tab-fin .fin-rrow.click:hover{background:var(--fin-tile)} #tab-fin .fin-rrow.click:focus-visible{outline:2px solid var(--fin-income); outline-offset:1px} #tab-fin .fin-rrow .arr{color:var(--fin-ink3); font-weight:800; font-size:15px; margin-left:2px} #tab-fin .fin-allparties{margin-top:12px; width:100%; justify-content:center} /* 카드 프레임: 넓은 카드 + ← 뒤로 */ #tab-fin .fin-brief.wide{width:min(720px, calc(100vw - 32px))} #tab-fin .fin-brief .bback{position:absolute; top:14px; left:14px; width:32px; height:32px; border:0; border-radius:10px; background:var(--fin-tile); color:var(--fin-ink2); font-size:16px; font-weight:800; cursor:pointer; display:grid; place-items:center; font-family:inherit; line-height:1} #tab-fin .fin-brief .bback:hover{background:var(--fin-line); color:var(--fin-ink)} #tab-fin .fin-brief .bback:focus-visible{outline:2px solid var(--fin-income); outline-offset:2px} #tab-fin .fin-brief .bback.hidden{display:none} #tab-fin .fin-brief .bback:not(.hidden) ~ .fin-brief-body .bt{padding-left:38px} #tab-fin .fin-brief .bt-sub{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--fin-ink3); white-space:nowrap; padding-right:2px} /* 월별 추이 미니 바 12칸 */ #tab-fin .xbars{display:flex; gap:4px; align-items:flex-end; height:76px; margin-top:2px} #tab-fin .xbar{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; height:100%; cursor:default} #tab-fin .xbar .bfill{width:100%; flex:1; display:flex; align-items:flex-end; border-radius:5px; background:var(--fin-tile); overflow:hidden} #tab-fin .xbar .bfill i{display:block; width:100%; border-radius:5px 5px 0 0; background:var(--fin-cat5)} #tab-fin .xbar.hot .bfill i{background:var(--fin-expense)} #tab-fin .xbar .bl{font-size:10.5px; font-weight:700; color:var(--fin-ink3); line-height:1} #tab-fin .xbar.now .bl{color:var(--fin-ink); font-weight:850} #tab-fin .xbar.now .bfill{box-shadow:inset 0 0 0 1.5px var(--fin-ink3)} #tab-fin .xtrend{font-size:11.5px; font-weight:830; color:var(--fin-expense-ink); margin-left:6px} /* 지출처 리스트 (2층) / 테이블 (전체 훑기) */ #tab-fin .xplist{display:flex; flex-direction:column; gap:5px} #tab-fin .xprow{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px; background:var(--fin-tile); cursor:pointer; font-size:13px; font-weight:750} #tab-fin .xprow:hover{filter:brightness(.985)} [data-theme="dark"] #tab-fin .xprow:hover{filter:brightness(1.12)} #tab-fin .xprow:focus-visible{outline:2px solid var(--fin-income); outline-offset:1px} #tab-fin .xprow .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fin-ink)} #tab-fin .xprow .ic{flex:none; font-size:12px} #tab-fin .xprow .cnt{flex:none; color:var(--fin-ink2); font-size:12px} #tab-fin .xprow .a{flex:none; font-weight:820; color:var(--fin-expense-ink)} #tab-fin .xprow .arr{flex:none; color:var(--fin-ink3); font-weight:800} #tab-fin .xprow .dt{flex:none; color:var(--fin-ink2); font-size:12px; width:46px; text-align:right} #tab-fin .xnew{display:inline-block; font-size:10px; font-weight:830; padding:2px 7px; border-radius:999px; background:var(--fin-badge-violet-bg); color:var(--fin-badge-violet-ink); vertical-align:1px} #tab-fin .xcat{display:inline-block; font-size:11px; font-weight:780; padding:3px 8px; border-radius:999px; background:var(--fin-badge-blue-bg); color:var(--fin-badge-blue-ink); white-space:nowrap} #tab-fin .xcat.unc{background:var(--fin-line); color:var(--fin-ink2)} /* 3층: 개별 거래 목록 (내부 스크롤) */ #tab-fin .xtxs{max-height:250px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; border:1px solid var(--fin-line); border-radius:11px; padding:7px 9px} #tab-fin .xtxrow{display:flex; align-items:center; gap:9px; padding:4px 2px; font-size:12.5px; font-weight:700} #tab-fin .xtxrow .d{color:var(--fin-ink3); flex:none} #tab-fin .xtxrow .ic{flex:none; font-size:11.5px} #tab-fin .xtxrow .a{margin-left:auto; font-weight:820; color:var(--fin-expense-ink)} /* 3층: 분류 바꾸기 */ #tab-fin .xreclass-toggle{margin-top:14px} #tab-fin .xreclass{margin-top:10px; background:var(--fin-tile); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:10px} #tab-fin .xreclass.hidden{display:none} #tab-fin .xrc-hint{font-size:12.5px; font-weight:750; color:var(--fin-ink2)} #tab-fin .xreclass .fin-catbtn{background:var(--fin-card)} /* 전체 훑기: 검색 + 정렬 + 테이블 */ #tab-fin .xtools{display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap} #tab-fin .xtools .xq{flex:1; min-width:160px} #tab-fin .xthead{display:flex; align-items:center; gap:9px; padding:2px 10px 7px; font-size:11.5px; font-weight:800; color:var(--fin-ink3)} #tab-fin .xthead .nm{flex:1} #tab-fin .xthead .xcat-h{width:70px} #tab-fin .xthead .cnt{width:38px} #tab-fin .xthead .a{width:86px; text-align:right} #tab-fin .xthead .dt{width:46px; text-align:right} #tab-fin .xtable{display:flex; flex-direction:column; gap:5px; max-height:min(52vh, 460px); overflow-y:auto} #tab-fin .xtable .xprow.t .xcat{width:70px; text-align:center; flex:none; overflow:hidden; text-overflow:ellipsis} #tab-fin .xtable .xprow.t .cnt{width:38px; text-align:right} #tab-fin .xtable .xprow.t .a{width:86px; text-align:right} @media (max-width:640px){ #tab-fin .xthead{display:none} #tab-fin .xtable .xprow.t{flex-wrap:wrap} }