@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;600&display=swap');
/* Design guidance: unslop by Damir Sokolovsky (@heydamir), CC BY 4.0.
   https://github.com/heydamir/unslop — adapted to the supplied monochrome dashboard reference. */
:root{font-family:'DM Sans','Noto Sans KR',sans-serif;font-synthesis:none;color-scheme:dark;--bg:#0b0b0b;--panel:#171717;--raised:#242424;--line:#2b2b2b;--ink:#f3f3f3;--muted:#a3a3a3;--dim:#8c8c8c;--accent:#e5e5e5;--positive:#9dc9ac;--ease:cubic-bezier(.22,1,.36,1);color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation;border:0;background:none;color:inherit;transition:background .15s,color .15s}button:hover{background:#ffffff08;color:var(--ink)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #bbb;outline-offset:3px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500}svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-sprite,[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button:disabled{cursor:default}input,select{font-variant-numeric:tabular-nums;min-width:0;width:100%;min-height:32px;padding:6px 8px;border:1px solid #353535;border-radius:6px;background:#202020;color:var(--ink);font-size:12px}input:hover,select:hover{border-color:#505050}input[aria-invalid=true],select[aria-invalid=true]{border-color:#c68e80}.input-unit{display:flex;align-items:center;gap:8px;border:1px solid #353535;border-radius:6px;background:#202020;min-width:0;padding-right:8px}.input-unit input{border:0;background:none;padding-right:0}.input-unit:focus-within{outline:2px solid #bbb;outline-offset:3px}.input-unit input:focus-visible{outline:0}.input-unit>span{font-size:11px;white-space:nowrap;color:var(--muted)}.input-unit>svg{width:14px;height:14px;color:var(--dim)}.field{min-width:0;display:flex;flex-direction:column;gap:4px}label{font-size:11px;color:var(--muted)}.field-error{color:#dfaa9b;font-size:11px;line-height:1.5;margin-top:4px}.text-button{font-size:12px;color:var(--muted);padding:4px 8px;border-radius:5px;white-space:nowrap}.danger{color:#dfaa9b}
.app-shell{max-width:1800px;margin:auto;height:100svh;min-height:568px;display:grid;grid-template-rows:56px minmax(0,1fr)}.topbar{display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid #252525;background:#101010}.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;white-space:nowrap}.brand img{width:24px;height:24px;border-radius:6px}.header-divider{width:1px;height:16px;background:var(--line)}.header-context{font-size:12px;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:4px;margin-left:auto}.header-actions>span{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;margin-right:12px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid transparent;border-radius:6px;color:var(--muted);padding:0}.icon-button[aria-pressed=true]{border-color:#303030;color:var(--ink);background:#202020}
main{display:grid;min-height:0;min-width:0;padding:20px 24px;grid-template-rows:32px 152px minmax(140px,1fr) 208px;gap:16px}.dashboard-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.page-heading{display:flex;align-items:baseline;gap:16px;min-width:0}h1{font-size:18px;white-space:nowrap}.page-heading>span{font-size:12px;color:var(--dim);white-space:nowrap}.view-controls{display:flex;align-items:center;gap:8px}.segmented{display:flex;gap:0;padding:3px;background:#171717;border:1px solid #303030;border-radius:6px;flex-shrink:0}.segmented button{min-height:24px;padding:3px 12px;border-radius:3px;font-size:12px;color:var(--muted);white-space:nowrap}.segmented button[aria-pressed=true]{background:#3a3a3a;color:var(--ink)}
.metrics-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px;min-width:0;min-height:0}.metric-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid #2d2d2d;border-radius:10px;padding:16px 20px;background:linear-gradient(180deg,#191919,#1c1c1c)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}.panel-heading h2{font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap}.panel-heading>svg{color:var(--dim);width:14px;height:14px}.metric-value{font-size:clamp(20px,2.1vw,30px);line-height:1.35;letter-spacing:-.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;margin:auto 0;min-width:0}.metric-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px;font-size:11px;color:var(--muted);white-space:nowrap}.metric-foot strong{font-weight:400;color:#cecece;font-variant-numeric:tabular-nums}.live-label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap}.live-dot{width:5px;height:5px;border-radius:50%;background:var(--positive)}.live-dot.paused{background:#777}.earnings{flex:1;display:flex;align-items:center;min-width:0;min-height:44px;padding-right:52px}.money-display{position:relative;display:inline-flex;align-items:baseline;white-space:nowrap;font-family:'DM Sans',sans-serif;font-variant-numeric:tabular-nums;line-height:1.35;color:var(--ink);transform-origin:left center}.currency{font-size:20px;color:#b8b8b8;margin-right:4px}#earned-integer{display:inline-block;font-size:clamp(28px,3vw,44px);font-weight:600;line-height:1.35;letter-spacing:-1px;white-space:nowrap;overflow:visible}.long-amount #earned-integer{font-size:clamp(24px,2.6vw,38px)}.money-decimal{display:inline-block;font-size:20px;color:#a3a3a3;margin-left:2px;line-height:1.35;white-space:nowrap}.second-meter{position:absolute;bottom:0;left:12px;right:12px;height:1px;overflow:hidden;pointer-events:none}.second-meter>span{display:block;width:100%;height:100%;background:#999;transform:scaleX(0);transform-origin:left;will-change:transform}#income-particles{position:absolute;left:calc(100% + 8px);top:35%;width:0;height:0;pointer-events:none}.income-particle{position:absolute;left:0;top:0;padding:3px 6px;font-size:13px;line-height:1.25;font-weight:500;border:1px solid #464646;border-radius:5px;background:#282828;color:#eee;white-space:nowrap;font-variant-numeric:tabular-nums;animation:credit-rise .94s var(--ease) both}.month-days{display:flex;gap:3px;height:7px;margin:4px 0 8px}.month-days>span{height:100%;flex:1;border-radius:1px;background:#363636}.month-days>.passed{background:#828282}.month-days>.today{background:#e7e7e7}.month-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}.payday{color:#ddd;font-variant-numeric:tabular-nums}
.overview{min-height:0;min-width:0}.trend-panel,.method-panel{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:20px;min-height:0;min-width:0}.trend-panel{height:100%;display:flex;flex-direction:column}.chart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.chart-heading h2{font-size:13px}.chart-heading>span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.chart-legend{display:flex;gap:16px;margin-top:8px;font-size:11px;color:var(--dim)}.chart-legend>span{display:flex;align-items:center;gap:6px}.chart-legend i{width:12px;height:0;border-top:1px solid #ddd}.chart-legend .legend-dash{border-top:1px dashed #8d8d8d}.chart-plot{display:flex;gap:16px;flex:1;min-height:20px;margin-top:20px}.chart-y-axis{white-space:nowrap;display:flex;flex-direction:column;justify-content:space-between;width:76px;flex-shrink:0;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;padding:0 0 4px}.chart-wrap{flex:1;min-width:0;min-height:20px;position:relative}.chart-wrap svg{display:block;width:100%;height:100%;overflow:visible}.chart-grid{stroke:#ffffff09;stroke-width:1;vector-effect:non-scaling-stroke}.chart-projection{stroke:#8a8a8a;stroke-width:1;stroke-dasharray:5 5;fill:none;vector-effect:non-scaling-stroke}.chart-forecast-area{fill:url(#forecast-fill);stroke:none}.chart-area{fill:url(#earned-fill);stroke:none}.chart-line{stroke:#eee;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}.chart-cursor{stroke:#777;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}#chart-dot{fill:#fff;stroke:#171717;stroke-width:1.5}.chart-axis{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;margin:12px 0 0 92px}.method-panel{grid-row:3;display:flex;flex-direction:column}.method-copy{overflow:auto;min-height:0;margin-top:12px;font-size:12px;line-height:1.85;color:var(--muted)}.method-copy p+p{margin-top:8px}.method-copy b{color:#ddd;font-weight:500}.source-links{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}.source-links a{text-decoration:underline;text-underline-offset:3px}
.controls-pane{border:1px solid var(--line);border-radius:10px;background:#111;display:grid;grid-template-rows:40px minmax(0,1fr);min-width:0;min-height:0}.controls-toolbar{display:flex;align-items:center;gap:16px;padding:0 16px;border-bottom:1px solid var(--line);background:#1e1e1e;border-radius:9px 9px 0 0}.controls-toolbar h2{font-size:12px}.controls-toolbar>span{font-size:11px;color:var(--dim)}.controls-toolbar>.error{color:#dfaa9b}.controls-footer{margin-left:auto;display:flex;align-items:center;gap:4px}.controls-footer .text-button{font-size:11px}.controls-grid{display:grid;grid-template-columns:1.2fr 1fr;min-height:0;min-width:0}.control-section{padding:16px;min-width:0;min-height:0}.control-section+.control-section{border-left:1px solid var(--line)}.control-section h3{font-size:12px;color:var(--muted)}#salary-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:16px 36px minmax(28px,1fr);column-gap:16px;row-gap:4px}.field-caption{grid-column:1;grid-row:1;display:flex;align-items:center;gap:8px}.field-caption>span{font-size:11px;color:var(--dim)}.salary-field{grid-column:1;grid-row:2}.salary-field input{font-size:22px;line-height:1.2;padding:4px 8px}.net-controls{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0}.monthly-summary{grid-column:1;grid-row:3;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding-top:8px}.monthly-summary>div{display:flex;align-items:baseline;justify-content:space-between;gap:4px;font-size:11px;white-space:nowrap}.monthly-summary span{color:var(--dim)}.monthly-summary strong{font-weight:400;font-size:12px;font-variant-numeric:tabular-nums}#salary-error,#net-error{grid-column:1/-1}#salary-section:has(.field-error:not([hidden])){grid-template-rows:16px 36px auto;overflow:auto}.work-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.work-note{font-size:11px;color:var(--dim);margin-top:12px}.mobile-tabs{display:none}#reset-confirm{display:flex;align-items:center;gap:8px}#reset-confirm>span{font-size:11px;color:var(--muted)}
.privacy-hidden [data-money],.privacy-hidden [data-sensitive]{filter:blur(7px);user-select:none}.privacy-hidden [data-sensitive]{pointer-events:none}.privacy-hidden #earned-integer{filter:blur(10px)}.privacy-hidden #earned-decimal,.privacy-hidden #income-particles,.privacy-hidden .second-meter,.privacy-hidden .chart-wrap,.privacy-hidden #goal-status,.privacy-hidden .motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important}.motion-off .second-meter{visibility:hidden}@keyframes credit-rise{0%{opacity:0;transform:translateY(6px)}16%{opacity:1;transform:translateY(0)}76%{opacity:1;transform:translateY(-22px)}100%{opacity:0;transform:translateY(-36px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.second-meter{display:none}}
@media(max-height:680px) and (min-width:741px){.app-shell{grid-template-rows:48px minmax(0,1fr)}main{padding:16px;gap:12px;grid-template-rows:28px 120px minmax(112px,1fr) 184px}.metric-card{padding:12px 16px}.metric-value{font-size:24px}#earned-integer{font-size:34px}.long-amount #earned-integer{font-size:28px}.money-decimal{font-size:18px}.trend-panel,.method-panel{padding:16px}.chart-plot{margin-top:12px}.chart-axis{margin-top:8px}.chart-legend{margin-top:4px}.controls-pane{grid-template-rows:32px minmax(0,1fr)}.control-section{padding:12px 16px}.controls-toolbar{padding:0 16px}.work-note{margin-top:8px}}
@media(max-width:1100px) and (min-width:741px){.metric-card{padding:12px 16px}.metric-value{font-size:22px}#earned-integer{font-size:32px}.long-amount #earned-integer{font-size:26px}.currency{font-size:16px}.money-decimal{font-size:16px}.income-particle{font-size:11px;padding:3px 5px}.metrics-grid{grid-template-columns:1.5fr 1.1fr 1fr 1.1fr;gap:8px}.metric-foot{font-size:11px;gap:4px}.monthly-summary>div{font-size:11px}.monthly-summary strong{font-size:11px}.control-section{padding:12px}.controls-grid{grid-template-columns:1.2fr 1fr}#salary-section{column-gap:12px}.salary-field input{font-size:20px}}
@media(max-width:950px){.controls-toolbar>h2,.controls-toolbar>#save-state{display:none}.mobile-tabs{display:flex;align-items:center;gap:4px;height:100%;margin-left:-4px}.mobile-tabs button{font-size:12px;color:var(--muted);padding:4px 12px;border:1px solid transparent;border-radius:5px}.mobile-tabs button[aria-selected=true]{background:#303030;border-color:#444;color:var(--ink)}.controls-grid{display:block}.control-section:not(.selected){display:none}.control-section+.control-section{border-left:0}.control-section{height:100%;overflow:auto}#salary-section.selected{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:16px 36px minmax(28px,1fr)}#salary-section:not(.selected){display:none}.net-controls{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:12px}.monthly-summary{flex-direction:row;justify-content:flex-start;gap:16px}.monthly-summary>div{gap:8px}.work-fields{max-width:560px}}
@media(max-width:740px){.app-shell{grid-template-rows:48px minmax(0,1fr);min-height:568px}.topbar{padding:0 12px;gap:12px}.brand{font-size:14px}.brand img{width:22px;height:22px}.header-context,.header-divider,.header-actions>span{display:none}.header-actions{gap:4px}.icon-button{width:30px;height:30px}main{padding:12px;gap:12px;grid-template-rows:28px 192px minmax(80px,1fr) 212px}.dashboard-toolbar{gap:8px}.page-heading h1{font-size:14px}.page-heading>span{display:none}.view-controls{gap:4px}.segmented{padding:2px}.segmented button{font-size:11px;min-height:20px;padding:2px 8px}.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:104px minmax(0,1fr);gap:8px}.metric-card{padding:10px 12px;border-radius:8px}.clock-panel{grid-column:1/-1}.clock-panel .panel-heading h2{font-size:12px}.panel-heading{min-height:16px;gap:4px}.panel-heading h2{font-size:11px}.panel-heading>svg{display:none}.earnings{min-height:40px}.currency{font-size:18px}#earned-integer{font-size:36px;letter-spacing:-.6px}.long-amount #earned-integer{font-size:32px}.money-decimal{font-size:18px}.income-particle{font-size:12px;padding:3px 6px}.metric-value{font-size:clamp(12px,3.7vw,20px);letter-spacing:-.2px;line-height:1.3}.metric-foot{font-size:11px;gap:4px;min-height:14px}.rate-panel .metric-foot{display:none}.monthly-panel .metric-foot>span:first-child{display:none}.month-days{height:4px;gap:2px;margin:0}.month-axis{display:none}.trend-panel,.method-panel{padding:12px;border-radius:8px}.chart-heading h2{font-size:12px}.chart-heading>span{font-size:11px}.chart-legend{gap:12px;margin-top:4px;font-size:11px}.chart-plot{gap:8px;margin-top:12px;min-height:12px}.chart-y-axis{width:56px;font-size:11px}.chart-wrap{min-height:12px}.chart-axis{margin:8px 0 0 64px;font-size:11px}.chart-axis>span:nth-child(even){display:none}.controls-pane{grid-template-rows:36px minmax(0,1fr);border-radius:8px}.controls-toolbar{padding:0 8px;gap:8px;border-radius:7px 7px 0 0}.mobile-tabs{margin:0;gap:2px}.mobile-tabs button{padding:3px 8px;font-size:11px}.controls-footer{gap:0}.controls-footer .text-button{font-size:11px;padding:3px 6px}.control-section{padding:12px}#salary-section.selected{grid-template-columns:1fr 1fr;column-gap:12px;grid-template-rows:16px 36px minmax(28px,1fr)}.net-controls{display:flex;gap:8px;justify-content:space-between}.salary-field input{font-size:22px}.monthly-summary{flex-direction:column;justify-content:flex-end;gap:6px;padding-top:8px}.monthly-summary>div{font-size:11px;gap:4px}.monthly-summary strong{font-size:11px}.input-unit>svg{display:none}.work-fields{margin-top:16px;gap:12px}.work-note{margin-top:12px}.method-copy{font-size:11px;line-height:1.7;margin-top:8px}.source-links{gap:12px}}
@media(max-width:740px) and (max-height:690px){.app-shell{grid-template-rows:44px minmax(0,1fr)}main{padding:8px;gap:8px;grid-template-rows:28px 172px minmax(64px,1fr) 192px}.metrics-grid{grid-template-rows:96px minmax(0,1fr);gap:8px}.metric-card{padding:8px 10px}.clock-panel{padding:8px 12px}.metric-value{margin:4px 0}.month-days{margin-top:auto}.trend-panel,.method-panel{padding:8px 12px}.chart-plot{margin-top:8px}.chart-y-axis>span:nth-child(2){display:none}.chart-legend{display:none}.chart-axis{margin-top:4px}.controls-pane{grid-template-rows:32px minmax(0,1fr)}.control-section{padding:10px 12px}.income-particle{font-size:11px;padding:2px 5px}.chart-heading>span{font-size:11px}}
@media(max-width:360px){.metric-card{padding-left:8px;padding-right:8px}.clock-panel{padding-left:12px;padding-right:12px}.metric-value{font-size:12px}.monthly-summary>div{flex-direction:column;gap:2px}.monthly-summary{gap:4px}.salary-field input{font-size:16px}.input-unit>span{font-size:11px}.mobile-tabs button{padding:3px 6px}.controls-footer .text-button{padding:3px 4px}.controls-toolbar{gap:4px}#earned-integer{font-size:32px}.long-amount #earned-integer{font-size:28px}.money-decimal{font-size:16px}.currency{font-size:16px}}