@font-face{font-family:'Pretendard';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/Pretendard-Bold.subset.woff2) format('woff2')}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/Pretendard-Medium.subset.woff2) format('woff2')}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/Pretendard-Regular.subset.woff2) format('woff2')}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/Pretendard-SemiBold.subset.woff2) format('woff2')}
/* ===== Tokens ===== */
:root{
  --canvas:#EEF1EF; --panel:#FFFFFF; --panel-2:#F6F8F7; --panel-3:#EEF2F0;
  --line:#E2E6E4; --line-strong:#CFD5D2;
  --ink:#15191C; --ink-2:#4B535A; --ink-3:#7F878E; --ink-4:#AEB5BA;
  --brand:#0B7A57; --brand-hover:#086548; --brand-ink:#FFFFFF; --brand-tint:#E2F1EA; --brand-tint-2:#C7E4D6; --brand-text:#0A6B4C;
  --red:#E5484D; --red-text:#C9353A; --red-tint:#FDEDED;
  --blue:#3D63DD; --blue-text:#2F52C4; --blue-tint:#ECF1FD;
  --amber:#D18A0F; --amber-text:#9A6100; --amber-tint:#FCF2DD;
  --violet:#6E56CF; --violet-text:#5B43BD; --violet-tint:#F0EDFB;
  --c-rent:#0B7A57; --c-mgmt:#5DB892; --c-water:#3F8FDF; --c-net:#8D7BE6; --c-phone:#E79B35;
  --bar-done:#C9D0CD; --band:#F3F5F4; --band-holiday:#FBEFEF;
  --shadow-pop:0 16px 40px -12px rgba(18,28,24,.22),0 2px 8px rgba(18,28,24,.06);
  --shadow-sm:0 1px 2px rgba(18,28,24,.06);
  --focus:0 0 0 3px color-mix(in srgb,var(--brand) 28%,transparent);
  --r-xl:16px; --r-lg:14px; --r-md:10px; --r-sm:7px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#0C0F0E; --panel:#141917; --panel-2:#191F1D; --panel-3:#1F2623;
    --line:#252C29; --line-strong:#323A37;
    --ink:#E7ECE9; --ink-2:#B2BBB7; --ink-3:#7E8883; --ink-4:#56605B;
    --brand:#33BE8B; --brand-hover:#4BD09E; --brand-ink:#05140E; --brand-tint:rgba(51,190,139,.13); --brand-tint-2:rgba(51,190,139,.26); --brand-text:#5ED3A7;
    --red:#FF6167; --red-text:#FF8A8F; --red-tint:rgba(255,97,103,.13);
    --blue:#7C9BFF; --blue-text:#9DB4FF; --blue-tint:rgba(124,155,255,.13);
    --amber:#F0A930; --amber-text:#F3BC5C; --amber-tint:rgba(240,169,48,.13);
    --violet:#A392FF; --violet-text:#B9ABFF; --violet-tint:rgba(163,146,255,.14);
    --c-rent:#33BE8B; --c-mgmt:#8AD6B5; --c-water:#62A9F0; --c-net:#A898FF; --c-phone:#F1AE52;
    --bar-done:#3A433F; --band:#171D1B; --band-holiday:#2A1A1B;
    --shadow-pop:0 18px 44px -12px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --canvas:#0C0F0E; --panel:#141917; --panel-2:#191F1D; --panel-3:#1F2623;
  --line:#252C29; --line-strong:#323A37;
  --ink:#E7ECE9; --ink-2:#B2BBB7; --ink-3:#7E8883; --ink-4:#56605B;
  --brand:#33BE8B; --brand-hover:#4BD09E; --brand-ink:#05140E; --brand-tint:rgba(51,190,139,.13); --brand-tint-2:rgba(51,190,139,.26); --brand-text:#5ED3A7;
  --red:#FF6167; --red-text:#FF8A8F; --red-tint:rgba(255,97,103,.13);
  --blue:#7C9BFF; --blue-text:#9DB4FF; --blue-tint:rgba(124,155,255,.13);
  --amber:#F0A930; --amber-text:#F3BC5C; --amber-tint:rgba(240,169,48,.13);
  --violet:#A392FF; --violet-text:#B9ABFF; --violet-tint:rgba(163,146,255,.14);
  --c-rent:#33BE8B; --c-mgmt:#8AD6B5; --c-water:#62A9F0; --c-net:#A898FF; --c-phone:#F1AE52;
  --bar-done:#3A433F; --band:#171D1B; --band-holiday:#2A1A1B;
  --shadow-pop:0 18px 44px -12px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  font-size:14px; line-height:1.5; letter-spacing:-.006em; word-break:keep-all;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
svg.ic{flex:none;display:block}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.muted{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:none;box-shadow:var(--focus)}
::selection{background:var(--brand-tint-2)}
@media (prefers-reduced-motion:reduce){.rh-bar,.al-bell .ic{animation:none!important}}

/* ===== Shell ===== */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);height:100vh;height:100dvh}
.side{display:flex;flex-direction:column;padding:14px 10px 12px 12px;min-height:0;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;flex:none}
.brand-name{font-weight:700;font-size:15px;letter-spacing:-.02em;line-height:1.15}
.brand-sub{font-size:12px;color:var(--ink-3);line-height:1.2;margin-top:1px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:10px;color:var(--ink-2);font-weight:500;font-size:14px;position:relative;transition:background .15s,color .15s;text-align:left;width:100%}
.nav-item:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
.nav-item.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
.nav-item.on .ic{color:var(--brand)}
.nav-item .count{margin-left:auto;font-size:12px;font-weight:600;color:var(--red-text);background:var(--red-tint);border-radius:999px;padding:1px 7px;line-height:18px}
.nav-sep{height:1px;background:var(--line);margin:12px 8px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px}
.asof{margin:4px 8px 8px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--panel) 60%,transparent);border:1px solid var(--line);font-size:12px;color:var(--ink-3);line-height:1.45}
.asof b{display:block;color:var(--ink);font-weight:600;font-size:13px}

.main{margin:8px 8px 8px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.scroll{flex:1;overflow:auto;overscroll-behavior:contain;scroll-behavior:auto}
.head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:14px 28px;min-height:64px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.head.stuck{border-bottom-color:var(--line)}
.head-title{display:flex;align-items:center;gap:10px;min-width:0}
.head-title h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.crumb{display:flex;align-items:center;gap:4px;color:var(--ink-3);font-size:14px;font-weight:500}
.crumb button:hover{color:var(--ink)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.searchbox{display:flex;align-items:center;gap:8px;height:36px;width:260px;padding:0 8px 0 11px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-3);font-size:13.5px;transition:border-color .15s,background .15s}
.searchbox:hover{border-color:var(--line-strong);background:var(--panel)}
.kbd{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-3);border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:0 5px;line-height:18px}
.menu-btn{display:none}
.page{padding:6px 28px 56px;max-width:1380px}

/* ===== Controls ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;user-select:none}
.btn .ic{margin-left:-2px}
.btn-primary{background:var(--brand);color:var(--brand-ink)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-line{background:var(--panel);border:1px solid var(--line-strong);color:var(--ink)}
.btn-line:hover{background:var(--panel-2)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:var(--panel-3);color:var(--ink)}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{height:30px;padding:0 10px;font-size:13px;border-radius:8px}
.btn-icon{width:36px;padding:0}
.btn-sm.btn-icon{width:30px}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{color:var(--brand-text);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:2px}
.link:hover{text-decoration:underline;text-underline-offset:3px}

.input,.select,.textarea{width:100%;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--panel);transition:border-color .15s,box-shadow .15s;font-size:14px}
.textarea{height:auto;min-height:76px;padding:9px 12px;resize:vertical;line-height:1.5}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-4)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.input::placeholder,.textarea::placeholder{color:var(--ink-4)}
.select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237F878E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.input.bad{border-color:var(--red)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.flabel{font-size:13px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--ink-3)}
.field .err{font-size:12px;color:var(--red-text);font-weight:500}

.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--panel-3);gap:2px}
.seg button{height:30px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}

.chk{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);background:var(--panel);display:inline-grid;place-items:center;cursor:pointer;flex:none;margin:0;transition:background .12s,border-color .12s}
.chk:hover{border-color:var(--ink-3)}
.chk:checked{background:var(--brand);border-color:var(--brand)}
.chk:checked::after{content:'';width:9px;height:5px;border:2px solid var(--brand-ink);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.chk:indeterminate{background:var(--brand);border-color:var(--brand)}
.chk:indeterminate::after{content:'';width:8px;height:2px;background:var(--brand-ink);border-radius:2px}

/* ===== Badges & chips ===== */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1}
.badge .ic{margin-left:-2px}
.b-plain{background:var(--panel-3);color:var(--ink-2)}
.b-done{background:transparent;color:var(--ink-3);padding-left:0}
.b-brand{background:var(--brand-tint);color:var(--brand-text)}
.b-red{background:var(--red-tint);color:var(--red-text)}
.b-blue{background:var(--blue-tint);color:var(--blue-text)}
.b-amber{background:var(--amber-tint);color:var(--amber-text)}
.b-violet{background:var(--violet-tint);color:var(--violet-text)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--ink-4);color:var(--ink)}
.chip.on{border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:var(--brand-tint);color:var(--brand-text)}
.chip .n{color:var(--ink-3);font-weight:600;font-size:12px}
.chip.on .n{color:inherit;opacity:.75}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--ink-2);background:var(--panel);white-space:nowrap}
.cat{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-weight:500}
.cat-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.cat-ic.rent{background:color-mix(in srgb,var(--c-rent) 14%,transparent);color:var(--c-rent)}
.cat-ic.mgmt{background:color-mix(in srgb,var(--c-mgmt) 18%,transparent);color:color-mix(in srgb,var(--c-mgmt) 70%,var(--ink))}
.cat-ic.water{background:color-mix(in srgb,var(--c-water) 14%,transparent);color:var(--c-water)}
.cat-ic.net{background:color-mix(in srgb,var(--c-net) 15%,transparent);color:var(--c-net)}
.cat-ic.phone{background:color-mix(in srgb,var(--c-phone) 16%,transparent);color:color-mix(in srgb,var(--c-phone) 80%,var(--ink))}
.masked{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.masked .ic{color:var(--ink-4)}
/* ===== Sections ===== */
.sec{margin-top:36px}
.sec-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:14px}
.sec-head h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em}
.sec-head p{margin:2px 0 0;font-size:13px;color:var(--ink-3)}
.sec-head .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.box-pad{padding:20px 22px}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:start}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* ===== Home hero ===== */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:end;padding:18px 0 4px}
.hero-label{font-size:15px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.hero-num{font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-.035em;margin:8px 0 10px;font-variant-numeric:tabular-nums}
.hero-num small{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-left:2px;color:var(--ink-2)}
.hero-desc{font-size:13.5px;color:var(--ink-3);line-height:1.6;max-width:560px}
.hero-desc b{color:var(--ink-2);font-weight:600}
.progress-card{padding:16px 18px;border-radius:var(--r-lg);background:var(--panel-2);border:1px solid var(--line)}
.progress-card .t{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--ink-3);font-weight:500;margin-bottom:10px}
.progress-card .t b{color:var(--ink);font-size:14px;font-weight:700}
.pbar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--panel-3);gap:2px}
.pbar i{display:block;height:100%}
.plegend{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px 10px;margin-top:14px;font-size:13px;align-items:center}
.plegend .lab{color:var(--ink-2);font-weight:500}
.plegend .amt{text-align:right;font-weight:600}
.plegend .cnt{text-align:right;color:var(--ink-3);min-width:34px}
.plegend button{display:contents}
.plegend button:hover .lab{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ===== Rhythm strip (signature) ===== */
.rhythm{margin-top:26px;padding:18px 22px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.rh-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.rh-top h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em}
.rh-top p{margin:0;font-size:13px;color:var(--ink-3)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto;font-size:12.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.rh-wrap{position:relative;height:196px;padding-top:22px}
.rh-grid{position:absolute;left:0;right:0;top:22px;bottom:30px;pointer-events:none}
.rh-grid div{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}
.rh-grid span{position:absolute;right:0;transform:translateY(-100%);font-size:11px;color:var(--ink-4);padding-bottom:2px}
.rh-cols{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.rh-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:30px;border-radius:6px;cursor:default}
.rh-col.has{cursor:pointer}
.rh-col.wk::before,.rh-col.hol::before{content:'';position:absolute;left:-1px;right:-1px;top:22px;bottom:30px;background:var(--band);border-radius:4px;z-index:0}
.rh-col.hol::before{background:var(--band-holiday)}
.rh-col:hover .rh-bar{filter:brightness(.94)}
.rh-bar{position:relative;z-index:1;display:flex;flex-direction:column-reverse;border-radius:4px 4px 2px 2px;overflow:hidden;min-height:0;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
.rh-bar i{display:block;width:100%}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.rh-day{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums;z-index:1}
.rh-day.show{color:var(--ink-3)}
.rh-col.today .rh-day{color:var(--brand-text);font-weight:700}
.rh-today{position:absolute;top:18px;bottom:26px;left:50%;width:0;border-left:1.5px dashed var(--brand);z-index:2;pointer-events:none}
.rh-today span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);background:var(--brand);color:var(--brand-ink);font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;white-space:nowrap}
.rh-hol{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--red-text);white-space:nowrap;font-weight:600;z-index:1}
.rh-foot{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:10px;padding-top:12px;font-size:13px;color:var(--ink-3)}
.rh-foot b{color:var(--ink);font-weight:600}

/* ===== Inbox list ===== */
.inbox{display:flex;flex-direction:column}
.inbox-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto 16px;gap:12px;align-items:center;padding:13px 6px 13px 4px;border-bottom:1px solid var(--line);text-align:left;width:100%;border-radius:0;transition:background .12s}
.inbox-item:first-child{border-top:1px solid var(--line)}
.inbox-item:hover{background:var(--panel-2)}
.inbox-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.inbox-t{font-weight:600;font-size:14px;line-height:1.35;color:var(--ink)}
.inbox-s{font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-a{text-align:right;font-weight:600;font-size:14px;white-space:nowrap}
.inbox-a small{display:block;font-size:12px;font-weight:500;color:var(--ink-3)}
.inbox-item > .ic:last-child{color:var(--ink-4)}
.tone-red{background:var(--red-tint);color:var(--red-text)}
.tone-amber{background:var(--amber-tint);color:var(--amber-text)}
.tone-blue{background:var(--blue-tint);color:var(--blue-text)}
.tone-violet{background:var(--violet-tint);color:var(--violet-text)}
.tone-brand{background:var(--brand-tint);color:var(--brand-text)}
.tone-plain{background:var(--panel-3);color:var(--ink-2)}

/* ===== Composition ===== */
.stack{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:2px;background:var(--panel-3)}
.stack i{display:block;height:100%}
.comp-list{margin-top:14px;display:flex;flex-direction:column}
.comp-row{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;text-align:left;width:100%}
.comp-row:last-child{border-bottom:0}
.comp-row:hover .nm{text-decoration:underline;text-underline-offset:3px}
.comp-row .nm{display:flex;align-items:center;gap:8px;font-weight:500;min-width:0}
.comp-row .nm em{font-style:normal;color:var(--ink-3);font-size:12.5px;font-weight:400}
.comp-row .v{font-weight:600;text-align:right}
.comp-row .p{text-align:right;color:var(--ink-3);font-size:12.5px}
.hbar-list{display:flex;flex-direction:column;gap:12px}
.hbar{display:grid;grid-template-columns:96px minmax(0,1fr) 92px;gap:12px;align-items:center;font-size:13.5px}
.hbar .nm{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .track{height:10px;border-radius:999px;background:var(--panel-3);overflow:hidden;display:flex}
.hbar .track i{display:block;height:100%}
.hbar .v{text-align:right;font-weight:600;white-space:nowrap}

/* ===== Tables ===== */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.toolbar .grow{flex:1}
.tsearch{position:relative;width:280px}
.tsearch .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.tsearch .input{padding-left:36px;height:36px;background:var(--panel-2)}
.tsearch .input:focus{background:var(--panel)}
.tsearch .clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3)}
.tsearch .clear:hover{background:var(--panel-3);color:var(--ink)}
.fbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;border:1px dashed var(--line-strong);color:var(--ink-2);font-size:13.5px;font-weight:500;white-space:nowrap}
.fbtn:hover{border-color:var(--ink-4);color:var(--ink);background:var(--panel-2)}
.fbtn.on{border-style:solid;border-color:color-mix(in srgb,var(--brand) 40%,transparent);background:var(--brand-tint);color:var(--brand-text);font-weight:600}
.fbtn .n{font-size:12px;background:var(--brand);color:var(--brand-ink);border-radius:999px;padding:0 6px;line-height:17px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:2px 0 16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 14px 11px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;color:var(--ink-3);text-align:left;transition:color .15s}
.tab:hover{color:var(--ink)}
.tab b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.tab b .c{font-size:12px;font-weight:600;color:var(--ink-4)}
.tab span{font-size:12px;font-variant-numeric:tabular-nums}
.tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.tab.on b .c{color:var(--ink-3)}
.twrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;background:var(--panel);position:relative}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.t th{position:sticky;top:0;z-index:2;background:var(--panel-2);text-align:left;font-weight:600;font-size:12.5px;color:var(--ink-3);height:40px;padding:0 12px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.t th.sort{cursor:pointer}
.t th.sort:hover{color:var(--ink)}
.t th .arr{display:inline-block;margin-left:3px;color:var(--ink);font-size:11px}
.t td{padding:0 12px;height:50px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.t tbody tr{cursor:pointer;transition:background .1s}
.t tbody tr:hover td{background:var(--panel-2)}
.t tbody tr.sel td{background:var(--brand-tint)}
.t tbody tr:last-child td{border-bottom:0}
.t .r{text-align:right}
.t .c{text-align:center}
.t .strong{font-weight:600;color:var(--ink)}
.t .sub{display:block;font-size:12px;color:var(--ink-3);line-height:1.3;margin-top:1px}
.t td.wrap{white-space:normal;min-width:180px;line-height:1.4}
.t tfoot td{position:sticky;bottom:0;background:var(--panel-2);border-top:1px solid var(--line);border-bottom:0;height:44px;font-weight:600;cursor:default}
.site-cell{display:flex;align-items:center;gap:10px;min-width:0}
.site-cell .nm{font-weight:600;color:var(--ink)}
.life{position:relative;width:96px;height:6px;border-radius:999px;background:var(--panel-3);display:inline-block;vertical-align:middle}
.life i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--ink-4)}
.life.ok i{background:color-mix(in srgb,var(--brand) 55%,var(--panel-3))}
.life.soon i{background:var(--amber)}
.life.over i{background:var(--amber);width:100%!important}
.empty{padding:56px 24px;text-align:center;color:var(--ink-3)}
.empty .ic{margin:0 auto 12px;color:var(--ink-4)}
.empty h3{margin:0 0 6px;color:var(--ink);font-size:16px;font-weight:700}
.empty p{margin:0 auto 16px;max-width:420px;font-size:13.5px;line-height:1.6}

/* ===== Popover ===== */
.pop{position:fixed;z-index:120;min-width:220px;max-width:320px;max-height:360px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pop-h{font-size:12px;font-weight:600;color:var(--ink-3);padding:8px 10px 6px}
.pop-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;font-size:13.5px;text-align:left}
.pop-item:hover{background:var(--panel-2)}
.pop-item .n{margin-left:auto;color:var(--ink-3);font-size:12px}
.pop-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin:6px -6px -6px;padding:6px}

/* ===== Drawer / Modal ===== */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(10,16,13,.32);animation:fade .18s ease-out}
:root[data-theme="dark"] .scrim{background:rgba(0,0,0,.55)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;z-index:100;top:8px;right:8px;bottom:8px;width:520px;max-width:calc(100vw - 16px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;animation:slide .24s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.dr-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.dr-head .ttl{min-width:0;flex:1}
.dr-head .ttl .k{font-size:12.5px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:6px}
.dr-head .ttl h3{margin:3px 0 0;font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.dr-body{flex:1;overflow:auto;padding:4px 20px 24px}
.dr-foot{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:var(--panel)}
.dr-amt{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:18px 0 16px;border-bottom:1px solid var(--line)}
.dr-amt .v{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.dr-amt .v small{font-size:15px;font-weight:600;color:var(--ink-3);margin-left:3px}
.dr-amt .l{font-size:12.5px;color:var(--ink-3);margin-bottom:4px}
.dl{margin:18px 0 0}
.dl h4{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px}
.dl-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;align-items:baseline}
.dl-row:last-child{border-bottom:0}
.dl-row dt{color:var(--ink-3)}
.dl-row dd{margin:0;color:var(--ink);word-break:break-all;line-height:1.5}
.note{margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap}
.note.warn{background:var(--amber-tint);border-color:transparent;color:var(--amber-text)}
.span-bar{margin:10px 0 2px}
.span-bar .track{position:relative;height:8px;border-radius:999px;background:var(--panel-3)}
.span-bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:color-mix(in srgb,var(--brand) 55%,var(--panel-3))}
.span-bar .now{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);border-radius:2px}
.span-bar .ends{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:6px}
.tl{list-style:none;margin:8px 0 0;padding:0;position:relative}
.tl li{position:relative;padding:0 0 14px 22px;font-size:13.5px;line-height:1.5}
.tl li::before{content:'';position:absolute;left:4px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--panel);border:2px solid var(--ink-4)}
.tl li::after{content:'';position:absolute;left:8px;top:19px;bottom:0;width:1.5px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li.future::before{border-color:var(--blue)}
.tl li.user::before{border-color:var(--brand);background:var(--brand)}
.tl li time{display:block;font-size:12px;color:var(--ink-3)}

.modal-wrap{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px;overflow:auto}
.modal{width:600px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);animation:rise .2s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;max-height:calc(100dvh - 40px)}
.modal.sm{width:420px}
.modal.lg{width:760px}
@keyframes rise{from{transform:translateY(10px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.md-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 6px}
.md-head h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.025em}
.md-head p{margin:4px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.md-body{padding:14px 22px 6px;overflow:auto}
.md-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:14px 22px 18px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px}
.form-grid .full{grid-column:1/-1}
.amount-read{font-size:12.5px;color:var(--brand-text);font-weight:600;min-height:18px}

/* ===== Command palette ===== */
.cmd{position:fixed;z-index:130;left:50%;top:12vh;transform:translateX(-50%);width:640px;max-width:calc(100vw - 24px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);overflow:hidden;animation:rise .18s cubic-bezier(.2,.8,.2,1)}
.cmd-in{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}
.cmd-in input{flex:1;height:56px;border:0;background:transparent;font-size:16px;outline:none}
.cmd-in input::placeholder{color:var(--ink-4)}
.cmd-list{max-height:min(460px,60vh);overflow:auto;padding:6px}
.cmd-g{font-size:12px;font-weight:600;color:var(--ink-3);padding:10px 10px 4px}
.cmd-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:8px 10px;border-radius:10px;text-align:left}
.cmd-item.on{background:var(--panel-3)}
.cmd-item .t1{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-item .t2{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-item .t3{font-size:13px;font-weight:600;white-space:nowrap}
.cmd-item mark{background:transparent;color:var(--brand-text)}
.cmd-foot{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);background:var(--panel-2)}

/* ===== Toast / tooltip ===== */
.toasts{position:fixed;z-index:140;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;background:var(--ink);color:var(--panel);font-size:14px;font-weight:500;box-shadow:var(--shadow-pop);animation:rise .2s cubic-bezier(.2,.8,.2,1)}
.toast .ic{color:var(--brand-tint-2)}
.toast button{color:var(--panel);font-weight:700;padding:4px 8px;border-radius:7px;opacity:.9}
.toast button:hover{background:color-mix(in srgb,var(--panel) 16%,transparent)}
.tip{position:fixed;z-index:150;pointer-events:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:10px 12px;font-size:12.5px;max-width:300px;line-height:1.5;opacity:0;transition:opacity .12s}
.tip.on{opacity:1}
.tip .tt{font-weight:700;font-size:13px;margin-bottom:4px}
.tip .tr{display:flex;justify-content:space-between;gap:16px;color:var(--ink-2)}
.tip .tr b{font-weight:600;color:var(--ink)}
.tip .sm{font-size:11.5px;color:var(--ink-3);margin-top:4px}
/* ===== Payments ===== */
.month-nav{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-strong);border-radius:10px;height:36px;padding:0 2px;background:var(--panel)}
.month-nav b{font-size:14px;font-weight:700;padding:0 8px;min-width:104px;text-align:center;letter-spacing:-.01em}
.month-nav button{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2)}
.month-nav button:hover{background:var(--panel-3);color:var(--ink)}
.month-nav button[disabled]{opacity:.35;pointer-events:none}
.pay-sum{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:10px 0 14px}
.pay-sum > div,.pay-sum > button{padding:14px 18px;border-right:1px solid var(--line);text-align:left;min-width:0}
.pay-sum > :last-child{border-right:0}
.pay-sum > button:hover{background:var(--panel-2)}
.pay-sum > button.on{background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--ink)}
.pay-sum .l{font-size:12.5px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:6px}
.pay-sum .v{font-size:20px;font-weight:700;letter-spacing:-.025em;margin-top:3px;white-space:nowrap}
.pay-sum .c{font-size:12.5px;color:var(--ink-3)}
.banner{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);font-size:13px;color:var(--ink-2);line-height:1.55;margin-bottom:16px}
.banner .ic{color:var(--ink-3);margin-top:1px}
.banner.amber{background:var(--amber-tint);border-color:transparent;color:var(--amber-text)}
.banner.amber .ic{color:var(--amber-text)}
.pay-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
.cal{position:sticky;top:80px}
.cal-box{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px}
.cal-wk,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-wk span{text-align:center;font-size:11.5px;color:var(--ink-3);font-weight:600;padding:2px 0 6px}
.cal-wk span:first-child{color:var(--red-text)}
.cal-wk span:last-child{color:var(--blue-text)}
.cal-d{position:relative;aspect-ratio:1/1.06;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5px;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:background .12s}
.cal-d.empty{visibility:hidden}
.cal-d.sun,.cal-d.hol{color:var(--red-text)}
.cal-d.sat{color:var(--blue-text)}
.cal-d.has{cursor:pointer}
.cal-d.has:hover{background:var(--panel-3)}
.cal-d.today{box-shadow:inset 0 0 0 1.5px var(--brand)}
.cal-d.on{background:var(--ink);color:var(--panel)}
.cal-d.on .cal-amt{color:var(--panel);opacity:.8}
.cal-amt{font-size:9.5px;font-weight:600;color:var(--ink-3);margin-top:1px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cal-dots{display:flex;gap:2px;margin-top:2px}
.cal-dots i{width:4px;height:4px;border-radius:50%}
.cal-leg{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.cal-leg span{display:inline-flex;align-items:center;gap:5px}
.auto-box{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.auto-box h4{margin:0 0 2px;font-size:14px;font-weight:700}
.auto-box p{margin:0 0 10px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.auto-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:6px 0;border-top:1px solid var(--line)}
.auto-row span{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.day-group{margin-bottom:18px;scroll-margin-top:84px}
.day-head{display:flex;align-items:baseline;gap:10px;padding:0 4px 8px}
.day-head b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.day-head .w{font-size:13px;color:var(--ink-3)}
.day-head .h{font-size:12px;font-weight:600;color:var(--red-text);background:var(--red-tint);border-radius:6px;padding:1px 7px}
.day-head .sum{margin-left:auto;font-size:13px;color:var(--ink-3)}
.day-head .sum b{color:var(--ink);font-size:13.5px}
.pay-rows{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pay-row{display:grid;grid-template-columns:22px minmax(0,1.5fr) minmax(0,1.2fr) 120px 118px 34px;gap:12px;align-items:center;padding:0 12px 0 14px;min-height:56px;border-bottom:1px solid var(--line);transition:background .1s;cursor:pointer}
.pay-row:last-child{border-bottom:0}
.pay-row:hover{background:var(--panel-2)}
.pay-row.sel{background:var(--brand-tint)}
.pay-row.done .pr-amt,.pay-row.done .pr-site .nm{color:var(--ink-3)}
.pay-row.done .pr-amt{text-decoration:line-through;text-decoration-color:var(--ink-4)}
.pr-site{display:flex;align-items:center;gap:10px;min-width:0}
.pr-site .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-site .s{font-size:12px;color:var(--ink-3);white-space:nowrap}
.pr-to{min-width:0;font-size:13px;color:var(--ink-2);line-height:1.35}
.pr-to .s{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-amt{text-align:right;font-weight:700;font-size:14px}
.pr-st{display:flex;justify-content:flex-start}
.bulk{position:sticky;bottom:14px;z-index:20;display:flex;align-items:center;gap:12px;margin:10px auto 0;width:max-content;max-width:100%;padding:8px 8px 8px 16px;border-radius:14px;background:var(--ink);color:var(--panel);box-shadow:var(--shadow-pop);font-size:14px;animation:rise .18s ease-out}
.bulk b{font-weight:700}
.bulk .btn-line{background:transparent;border-color:color-mix(in srgb,var(--panel) 30%,transparent);color:var(--panel)}
.bulk .btn-line:hover{background:color-mix(in srgb,var(--panel) 12%,transparent)}

/* ===== Stores ===== */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.store{display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s;min-width:0}
.store:hover{border-color:var(--line-strong);box-shadow:0 8px 24px -14px rgba(18,28,24,.28)}
.store .top{display:flex;align-items:flex-start;gap:8px}
.store .nm{font-weight:700;font-size:15px;letter-spacing:-.02em;line-height:1.3}
.store .rg{font-size:12.5px;color:var(--ink-3);margin-top:1px;display:flex;align-items:center;gap:4px}
.store .flags{margin-left:auto;display:flex;gap:4px}
.store .amt{font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.store .amt small{font-size:12.5px;font-weight:500;color:var(--ink-3);margin-left:4px;letter-spacing:0}
.store .meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px}
.store .meta b{color:var(--ink-2);font-weight:600}
.store .stack{height:6px}
.sd-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:10px 0 22px;border-bottom:1px solid var(--line)}
.sd-head h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1.15}
.sd-addr{margin-top:6px;font-size:13.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.sd-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 6px}
.kpi{padding:2px 20px 2px 0;border-right:1px solid var(--line);margin-right:20px}
.kpi:last-child{border-right:0;margin-right:0}
.kpi .l{font-size:12.5px;color:var(--ink-3);font-weight:500}
.kpi .v{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-top:2px;white-space:nowrap}
.kpi .s{font-size:12.5px;color:var(--ink-3)}
.cat-sec{margin-top:28px}
.cat-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cat-sec-h h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.015em}
.cat-sec-h .s{margin-left:auto;font-size:13px;color:var(--ink-3)}
.cat-sec-h .s b{color:var(--ink)}

/* ===== Insights ===== */
.chart-box{padding:18px 20px 16px}
.chart-box h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.015em}
.chart-box .d{margin:3px 0 14px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.wf{width:100%;height:auto;display:block;overflow:visible}
.wf text{font-family:inherit}
.dist{position:relative;height:190px;display:flex;align-items:flex-end;gap:2px;padding-bottom:0}
.dist i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--c-rent) 70%,var(--panel));min-width:2px;transition:filter .1s;cursor:pointer}
.dist i:hover{filter:brightness(.85)}
.dist .med{position:absolute;left:0;right:0;border-top:1.5px dashed var(--ink-3);pointer-events:none}
.dist .med span{position:absolute;right:0;top:-20px;font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--panel);padding:0 4px}
.hist{display:grid;grid-template-columns:repeat(31,1fr);gap:2px;align-items:end;height:130px}
.hist i{display:block;border-radius:3px 3px 0 0;background:var(--c-rent);min-height:2px;cursor:default}
.hist-x{display:grid;grid-template-columns:repeat(31,1fr);gap:2px;font-size:10.5px;color:var(--ink-4);text-align:center;margin-top:6px}
.mini-t{width:100%;border-collapse:collapse;font-size:13px}
.mini-t td,.mini-t th{padding:8px 0;border-bottom:1px solid var(--line);text-align:left}
.mini-t th{font-size:12px;color:var(--ink-3);font-weight:600}
.mini-t tr:last-child td{border-bottom:0}
.mini-t .r{text-align:right}

/* ===== Health ===== */
.health-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:10px 0 22px}
.health-top > div{padding:16px 20px;border-right:1px solid var(--line)}
.health-top > div:last-child{border-right:0}
.health-top .l{font-size:12.5px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:6px}
.health-top .v{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-top:2px}
.health-top .s{font-size:12.5px;color:var(--ink-3)}
.issue{border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden;background:var(--panel)}
.issue-h{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto 18px;gap:14px;align-items:center;width:100%;padding:14px 16px;text-align:left}
.issue-h:hover{background:var(--panel-2)}
.issue-h .t{font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.issue-h .s{font-size:13px;color:var(--ink-3);margin-top:2px;line-height:1.5}
.issue-h .amt{text-align:right;font-size:13px;color:var(--ink-3);white-space:nowrap}
.issue-h .amt b{display:block;color:var(--ink);font-size:14px}
.issue-h .chev{color:var(--ink-4);transition:transform .2s}
.issue.open .issue-h .chev{transform:rotate(90deg)}
.issue-body{border-top:1px solid var(--line);background:var(--panel-2)}
.issue-body .t td{background:var(--panel-2)}
.issue-body .t tbody tr:hover td{background:var(--panel-3)}
.issue-actions{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.issue.done{opacity:.62}
.issue.done .issue-h .t{text-decoration:line-through;text-decoration-color:var(--ink-4)}

/* ===== Import ===== */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:34px 20px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--panel-2);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-tint)}
.drop .ic{color:var(--ink-3)}
.drop b{font-size:15px}
.drop span{font-size:13px;color:var(--ink-3)}
.detect{margin-top:4px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.detect-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.detect-row:last-child{border-bottom:0}
.detect-row .s{font-size:12px;color:var(--ink-3)}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--brand);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Responsive ===== */
@media (max-width:1240px){
  .hero{grid-template-columns:minmax(0,1fr) 340px;gap:28px}
  .pay-row{grid-template-columns:22px minmax(0,1.4fr) minmax(0,1fr) 110px 104px 30px}
}
@media (max-width:1100px){
  .app{grid-template-columns:212px minmax(0,1fr)}
  .side{padding:14px 8px 12px 10px}
  .split{grid-template-columns:minmax(0,1fr)}
  .pay-layout{grid-template-columns:minmax(0,1fr)}
  .cal{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
  .auto-box{margin-top:0}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;z-index:95;left:0;top:0;bottom:0;width:260px;background:var(--canvas);transform:translateX(-102%);transition:transform .24s cubic-bezier(.2,.8,.2,1);padding:14px 12px;box-shadow:var(--shadow-pop)}
  .side.open{transform:none}
  .side .brand{justify-content:flex-start;padding:6px 8px 18px}
  .side .brand-txt,.side .nav-item .lbl,.side .asof{display:block}
  .side .nav-item .count{display:inline-block}
  .side .nav-item{justify-content:flex-start;padding:0 10px}
  .main{margin:0;border-radius:0;border:0}
  .menu-btn{display:grid}
  .head{padding:10px 14px;min-height:56px;gap:8px}
  .head-title h1{font-size:17px}
  .searchbox{width:36px;padding:0;justify-content:center}
  .searchbox .lbl,.searchbox .kbd{display:none}
  .head-actions .btn-primary .lbl{display:none}
  .head-actions .btn-primary{width:36px;padding:0}
  .head-actions .btn-primary .ic{margin:0}
  .page{padding:4px 14px 48px}
  .hero{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:8px}
  .hero-num{font-size:38px}
  .rhythm{padding:14px 12px 10px}
  .rh-wrap{height:170px}
  .rh-cols{gap:1px}
  .rh-day{font-size:9.5px}
  .rh-hol{display:none}
  .legend{margin-left:0}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .tsearch{width:100%}
  .pay-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay-sum > div:first-child{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}
  .pay-sum > button:nth-child(2),.pay-sum > button:nth-child(4){border-right:1px solid var(--line)}
  .pay-sum > button:nth-child(2),.pay-sum > button:nth-child(3){border-bottom:1px solid var(--line)}
  .pay-sum > button{border-right:0}
  .cal{grid-template-columns:minmax(0,1fr)}
  .pay-row{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"c s a" "c t st";row-gap:2px;padding:10px 12px;min-height:0}
  .pay-row > :nth-child(1){grid-area:c}
  .pay-row .pr-site{grid-area:s}
  .pay-row .pr-to{grid-area:t}
  .pay-row .pr-amt{grid-area:a}
  .pay-row .pr-st{grid-area:st;justify-content:flex-end}
  .pay-row > :nth-child(6){display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .kpi:nth-child(2){border-right:0;margin-right:0}
  .sd-head{grid-template-columns:minmax(0,1fr)}
  .sd-head h2{font-size:25px}
  .health-top{grid-template-columns:minmax(0,1fr)}
  .health-top > div{border-right:0;border-bottom:1px solid var(--line)}
  .health-top > div:last-child{border-bottom:0}
  .issue-h{grid-template-columns:32px minmax(0,1fr) 18px}
  .issue-h .amt,.issue-h > .badge{display:none}
  .drawer{top:auto;left:0;right:0;bottom:0;width:100%;max-width:none;height:92dvh;border-radius:18px 18px 0 0}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .dl-row{grid-template-columns:96px minmax(0,1fr)}
  .hbar{grid-template-columns:78px minmax(0,1fr) 80px}
  .hist-x span:nth-child(odd){visibility:hidden}
}
/* ===== style4: 화면 코드에서 쓰는 보완 스타일 ===== */
.ds-pill{display:flex;align-items:center;gap:8px;width:calc(100% - 4px);height:36px;margin:0 2px 14px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 70%,transparent);font-size:13px;font-weight:600;color:var(--ink-2);text-align:left;transition:background .15s,color .15s}
.ds-pill:hover{background:var(--panel);color:var(--ink)}
.ds-pill .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-pill > .ic:first-child{color:var(--brand)}
.ds-pill > .ic:last-child{color:var(--ink-3)}
.plegend{display:flex;flex-direction:column;margin-top:12px}
.plegend .pl-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto 40px;gap:10px;align-items:center;width:calc(100% + 16px);margin:0 -8px;padding:7px 8px;border-radius:8px;font-size:13px;text-align:left;transition:background .12s}
.plegend .pl-row:hover{background:var(--panel-3)}
.pl-row .lab{color:var(--ink-2);font-weight:500}
.pl-row .amt{text-align:right;font-weight:600}
.pl-row .cnt{text-align:right;color:var(--ink-3)}
.side-scrim{display:none}
.tsearch .input:placeholder-shown ~ .clear{display:none}
.span-bar.over .fill{background:var(--amber);width:100%!important}
.span-bar.soon .fill{background:var(--amber)}
.twrap.tall{max-height:calc(100dvh - 250px)}
.pay-sum > button:first-child{background:var(--panel-2)}
.pay-sum > button:first-child.on{box-shadow:none}
.cal-d{border:0;background:transparent;line-height:1.15;padding-top:4px}
.cal-amt{margin-top:1px}
.modal-layer{position:relative;z-index:105}
.cmd-layer{position:relative;z-index:125}
.cmd{left:0;right:0;margin:0 auto;transform:none}
.issue-h .chev{display:inline-flex}
.rh-col{padding-top:22px;padding-bottom:34px}
.rh-grid{bottom:34px}
.rh-col.wk::before,.rh-col.hol::before{bottom:34px}
.rh-day{bottom:15px}
.rh-hol{bottom:1px}
.rh-today{bottom:30px}
@media (max-width:760px){
  .side-scrim{display:block;position:fixed;inset:0;z-index:94;background:rgba(10,16,13,.32);opacity:0;pointer-events:none;transition:opacity .2s}
  .side.open + .side-scrim{opacity:1;pointer-events:auto}
  .rh-day:not(.show){visibility:hidden}
  .drawer{animation-name:rise}
}
/* ===== 2차 보완: 스크린샷 점검 후 ===== */
.head .menu-btn{display:none}
.hero{align-items:center}
.hero-num.num{font-variant-numeric:normal;font-feature-settings:normal}
.hero-num small{margin-left:2px}
.rh-col.wk::before,.rh-col.hol::before{display:none}
.rh-col.sun .rh-day,.rh-col.hol .rh-day{color:var(--red-text)}
.rh-col.sat .rh-day{color:var(--blue-text)}
.rh-grid::after{content:'';position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line-strong)}
.cal-wk,.cal-days{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-d{aspect-ratio:auto;height:50px;min-width:0}
.drawer:focus-visible,.modal:focus-visible,.cmd:focus-visible{box-shadow:var(--shadow-pop)}
@media (min-width:1101px){.sd-split{grid-template-columns:minmax(0,1fr) 280px}}
@media (max-width:1100px){.cal-d{height:56px}}
@media (max-width:760px){
  .head .menu-btn{display:inline-flex}
  .pay-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay-sum > *{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .pay-sum > :first-child{grid-column:1/-1}
  .pay-sum > :nth-child(2n){border-right:1px solid var(--line)!important}
  .pay-sum > :nth-last-child(-n+2){border-bottom:0!important}
}
/* ===== style5: 지급 일정 표 구조와 필터 ===== */
:root{--pay-cols:22px 94px minmax(0,1.1fr) minmax(0,1fr) 112px 118px 34px}
.pay-filterbar{margin:0 0 14px}
.pay-sum{grid-template-columns:minmax(0,1.25fr) repeat(5,minmax(0,1fr))}
.pay-listbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:32px;margin:0 0 10px;font-size:13.5px}
.pay-colhead{position:sticky;top:64px;z-index:6;display:grid;grid-template-columns:var(--pay-cols);gap:12px;align-items:center;height:40px;padding:0 12px 0 14px;margin:0 0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);font-size:12.5px;font-weight:600;color:var(--ink-3)}
.pay-colhead .r{text-align:right}
.pay-row{grid-template-columns:var(--pay-cols)}
.pr-cat{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.pr-cat .cat-ic{width:24px;height:24px;border-radius:7px}
.pr-site .s{overflow:hidden;text-overflow:ellipsis}
.day-head .link{margin-left:10px}
.auto-fold{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;padding:14px 16px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--panel-2);text-align:left;transition:border-color .15s,background .15s}
.auto-fold:hover{border-color:var(--ink-4);background:var(--panel)}
.auto-fold-cats{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.auto-fold-cats b{font-weight:600;color:var(--ink)}
.auto-fold .link{margin-left:auto}
.cal-hint{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:12px;line-height:1.45;color:var(--ink-3)}
.pop-filter{max-height:none;overflow:visible}
.pop-search{position:relative;margin:0 4px 6px}
.pop-search .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.pop-search .input{height:34px;padding-left:32px;font-size:13.5px}
.pop-opts{max-height:min(320px,46vh);overflow:auto}
.pop-empty{padding:18px 10px;text-align:center;font-size:13px;color:var(--ink-3)}
@media (max-width:1240px){:root{--pay-cols:22px 86px minmax(0,1.1fr) minmax(0,1fr) 100px 106px 30px}}
@media (max-width:760px){
  .pay-colhead{display:none}
  .pay-row{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"c s a" "c k st";row-gap:4px;padding:10px 12px;min-height:0}
  .pay-row > :nth-child(1){grid-area:c}
  .pay-row .pr-cat{grid-area:k}
  .pay-row .pr-site{grid-area:s}
  .pay-row .pr-to{display:none}
  .pay-row .pr-amt{grid-area:a}
  .pay-row .pr-st{grid-area:st;display:flex;justify-content:flex-end}
  .pay-row > :nth-child(7){display:none}
  .pay-sum > :last-child{grid-column:1/-1;border-right:0!important;border-bottom:0!important}
  .pay-sum > :nth-last-child(2){border-bottom:1px solid var(--line)!important}
  .auto-fold .link{margin-left:0}
}
/* 한 줄 정리: 거래처가 길어도 행 높이 유지 */
.pr-to{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pr-to .s{overflow:hidden;text-overflow:ellipsis}
.cal-hint{flex-wrap:nowrap;align-items:flex-start}
.cal-hint .ic{flex:none;margin-top:1px}
.cal-hint .link{flex:none}
@media (min-width:1101px){.pay-layout{grid-template-columns:280px minmax(0,1fr)}}
/* ===== style6: 브랜드, 접속 알림 팝업, 보증보험(가안) ===== */
.brand-mark .ic{color:var(--brand-ink)}
.bell{position:relative}
.bell-n{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--panel);pointer-events:none}
/* alert modal */
.modal.xl{width:1000px}
.alert-modal{overflow:hidden}
.al-head{display:flex;align-items:center;gap:14px;padding:20px 22px 16px}
.al-bell{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand-text);flex:none}
.al-bell .ic{transform-origin:50% 15%;animation:ring 1.1s ease-in-out .35s 2}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
.al-tt{flex:1;min-width:0}
.al-date{font-size:13px;color:var(--ink-3);font-weight:500}
.al-tt h3{margin:2px 0 0;font-size:20px;font-weight:700;letter-spacing:-.025em}
.al-tt h3 .num{color:var(--brand-text)}
.al-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 22px 16px}
.al-kpi{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);text-align:left;min-width:0;transition:border-color .15s,background .15s}
.al-kpi:hover{border-color:var(--line-strong);background:var(--panel-2)}
.al-kpi > span:last-child{display:flex;flex-direction:column;min-width:0}
.al-kpi .l{font-size:12.5px;color:var(--ink-3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-kpi .v{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.al-kpi .v small{font-size:12px;font-weight:600;color:var(--ink-3);margin-left:2px}
.al-kpi .s{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-body{flex:1 1 auto;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-content:start;padding:16px 22px;border-top:1px solid var(--line);background:var(--panel-2)}
.al-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.al-sec{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.al-sec-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.al-sec-h h4{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px}
.al-sec-h h4 .ic{color:var(--ink-3)}
.al-sec-h .cnt{font-size:12.5px;color:var(--ink-3)}
.al-sec-h .link{margin-left:auto}
.al-list{display:flex;flex-direction:column}
.al-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;transition:background .12s}
.al-row:last-child{border-bottom:0}
.al-row:hover{background:var(--panel-2)}
.al-row > .ic:last-child{color:var(--ink-4);flex:none}
.al-main{display:flex;flex-direction:column;min-width:0;flex:1}
.al-main b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-main span{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-badge{flex:none;min-width:92px;height:24px;padding:0 8px;border-radius:7px;display:inline-grid;place-items:center;font-size:12px;font-weight:700;white-space:nowrap}
.al-dates{flex:none;display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px;color:var(--ink-2);font-weight:500;line-height:1.35}
.al-dates span{color:var(--ink-3);font-weight:400}
.al-amt{flex:none;font-size:14px;font-weight:700}
.al-day{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.al-day .h{font-size:11.5px;color:var(--red-text);background:var(--red-tint);border-radius:6px;padding:0 6px}
.al-day .sum{margin-left:auto;color:var(--ink-3);font-weight:500}
.al-more{padding:9px 14px;font-size:12.5px;color:var(--ink-3);text-align:center}
.al-empty{display:flex;align-items:center;gap:8px;padding:18px 14px;font-size:13px;color:var(--ink-3)}
.al-empty .ic{color:var(--brand)}
.al-full{grid-column:1/-1}
.al-row.al-check{border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.al-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 22px 16px;border-top:1px solid var(--line)}
.al-mute{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.al-set{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-3)}
.al-set label{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.select.sm{height:30px;width:auto;padding:0 28px 0 10px;font-size:12.5px;border-radius:8px;background-position:right 8px center}
.al-foot .btn-primary{margin-left:auto;min-width:104px}
/* bonds page */
.pay-sum.bond-sum{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr))}
.bond-sum .v small{font-size:13px;font-weight:600;color:var(--ink-3);margin-left:2px}
.bond-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(148px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px}
.bond-ev{position:relative;display:flex;flex-direction:column;gap:1px;padding:12px 14px 12px 16px;border:1px solid var(--line);border-radius:14px;text-align:left;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.bond-ev.tone-red,.bond-ev.tone-amber,.bond-ev.tone-plain{background:var(--panel);color:var(--ink)}
.bond-ev::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line-strong)}
.bond-ev.tone-red::before{background:var(--red)}
.bond-ev.tone-amber::before{background:var(--amber)}
.bond-ev:hover{border-color:var(--line-strong);box-shadow:0 8px 20px -14px rgba(18,28,24,.3)}
.be-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.be-kind{font-size:12px;font-weight:600;color:var(--ink-3)}
.be-d{font-size:12px;font-weight:700;color:var(--ink-3)}
.bond-ev.tone-red .be-d{color:var(--red-text)}
.bond-ev.tone-amber .be-d{color:var(--amber-text)}
.be-date{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.25;margin-top:2px}
.be-date small{font-size:12px;font-weight:600;color:var(--ink-3);margin-left:4px}
.be-store{font-size:14px;font-weight:600}
.be-sub{font-size:12px;color:var(--ink-3)}
.bond-dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.bond-dates > div{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.bond-dates .l{font-size:12px;color:var(--ink-3)}
.bond-dates .v{font-size:15px;font-weight:700;margin-top:2px}
.bond-dates .d{min-height:17px;font-size:12px;font-weight:600;color:var(--ink-3)}
.bond-dates .d.soon{color:var(--amber-text)}
.bond-dates .d.neg{color:var(--red-text)}
.renew-mark{position:absolute;top:-3px;bottom:-3px;width:10px;margin-left:-5px;border-radius:3px;background:var(--amber);box-shadow:0 0 0 2px var(--panel)}
.form-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.form-3 .sl{display:block;font-size:12px;color:var(--ink-3);margin-bottom:4px}
@media (max-width:1100px){.al-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .modal.xl{width:100%}
  .al-head{padding:16px 16px 12px}
  .al-kpis{padding:0 16px 12px;gap:8px}
  .al-kpi{padding:10px}
  .al-kpi .inbox-ic{display:none}
  .al-body{grid-template-columns:minmax(0,1fr);padding:12px}
  .al-dates{display:none}
  .al-badge{min-width:0}
  .al-foot{padding:12px 16px 14px;gap:10px}
  .al-set{order:3;width:100%}
  .bond-sum > :last-child{grid-column:auto;border-bottom:0!important}
  .bond-sum > :nth-last-child(2){border-bottom:0!important}
  .bond-dates,.form-3{grid-template-columns:minmax(0,1fr)}
}
/* 접속 알림은 화면 전체를 확실히 덮도록 배경을 더 어둡게 */
.modal-layer:has(.alert-modal) .scrim{background:rgba(12,18,15,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
:root[data-theme="dark"] .modal-layer:has(.alert-modal) .scrim{background:rgba(0,0,0,.68)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .modal-layer:has(.alert-modal) .scrim{background:rgba(0,0,0,.68)}}
.alert-modal{box-shadow:0 30px 80px -20px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.12)}
.al-set{flex-wrap:wrap}
.al-set > span{white-space:nowrap}
/* ===== style7: 사이드바 — 아이콘만 보이다가 마우스를 올리면 스르륵 펼침 ===== */
.nav-item{white-space:nowrap}
.brand{align-items:center}
.rail-pin{margin-left:auto;flex:none;color:var(--ink-3)}
.rail-pin:hover{color:var(--ink)}
.rail-pin.on{color:var(--brand-text);background:var(--brand-tint)}
@media (min-width:761px){
  .app.rail{grid-template-columns:72px minmax(0,1fr)}
  .app.rail .main{grid-column:2}
  /* 접힐 때: 글자가 먼저 빠진 뒤 폭이 빠르게 닫힘 (0.18초) */
  .app.rail .side{
    position:fixed;top:0;left:0;bottom:0;z-index:60;width:72px;padding:14px 12px 12px;
    overflow-x:hidden;overflow-y:auto;scrollbar-width:none;background:var(--canvas);
    box-shadow:0 0 0 0 rgba(18,28,24,0),0 0 0 0 rgba(18,28,24,0);
    transition:width .18s cubic-bezier(.4,0,.2,1) .02s,box-shadow .18s ease .02s;
  }
  .app.rail .side::-webkit-scrollbar{display:none}
  /* 펼칠 때: 감속 곡선으로 빠르게 스르륵 열림 (0.26초) */
  .app.rail .side.expanded{
    width:236px;
    box-shadow:18px 0 44px -24px rgba(18,28,24,.36),1px 0 0 0 var(--line);
    transition:width .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease;
  }
  .app.rail .brand{padding:6px 0 18px 9px;gap:10px}
  .app.rail .nav-item{padding:0 15px}
  .app.rail .nav-item .lbl{display:inline-block}
  .app.rail .ds-pill{width:100%;margin:0 0 14px;padding:0 0 0 16px;overflow:hidden}
  .app.rail .ds-pill .lbl{display:inline-block}
  .app.rail .asof{width:212px;margin:4px 0 8px}
  .app.rail .brand-txt{white-space:nowrap}

  .app.rail .side .lbl,.app.rail .brand-txt,.app.rail .ds-pill > .ic:last-child,.app.rail .nav-item .count{
    opacity:0;transform:translateX(-12px);
    transition:opacity .09s ease,transform .12s ease;
  }
  .app.rail .rail-pin,.app.rail .asof{
    opacity:0;visibility:hidden;transform:translateX(-8px);
    transition:opacity .09s ease,transform .12s ease,visibility 0s linear .12s;
  }
  /* 메뉴 이름이 위에서부터 차례로 흘러나옴 (--i 순번 × 9ms) */
  .app.rail .side.expanded .lbl,.app.rail .side.expanded .brand-txt,.app.rail .side.expanded .ds-pill > .ic:last-child,.app.rail .side.expanded .nav-item .count{
    opacity:1;transform:none;
    transition:opacity .18s ease calc(.02s + var(--i, 0) * 9ms),transform .28s cubic-bezier(.22,1,.36,1) calc(.01s + var(--i, 0) * 9ms);
  }
  .app.rail .side.expanded .rail-pin,.app.rail .side.expanded .asof{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .18s ease .1s,transform .28s cubic-bezier(.22,1,.36,1) .08s,visibility 0s linear 0s;
  }
  /* 접힌 상태의 숫자는 아이콘 위 배지 — 펼치면 오른쪽 숫자로 자연스럽게 자리 바꿈 */
  .app.rail .nav-item[data-count]::after{
    content:attr(data-count);position:absolute;left:29px;top:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
    background:var(--red);color:#fff;font-size:10px;font-weight:600;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--canvas);
    opacity:1;transform:scale(1);transition:opacity .16s ease .1s,transform .22s cubic-bezier(.22,1,.36,1) .1s;
  }
  .app.rail .nav-item.on[data-count]::after{box-shadow:0 0 0 2px var(--panel)}
  .app.rail .side.expanded .nav-item[data-count]::after{opacity:0;transform:scale(.5);transition:opacity .08s ease,transform .1s ease}
}
@media (max-width:760px){.rail-pin{display:none}}
/* ===== style8: 비용 대납 ===== */
.pay-sum.dn-sum4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pay-sum .v small{font-size:13px;font-weight:600;color:var(--ink-3);margin-left:2px}
.dn-itembar{margin:2px 0 16px}
.dn-itembar .stack{height:12px}
.dn-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ichip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;background:color-mix(in srgb,var(--ic) 14%,transparent);color:color-mix(in srgb,var(--ic) 72%,var(--ink))}
.ichip i{width:7px;height:7px;border-radius:50%;background:var(--ic);flex:none}
.tbadge{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:5px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1}
.tbadge.t-direct{background:var(--brand-tint);color:var(--brand-text)}
.tbadge.t-rep{background:var(--violet-tint);color:var(--violet-text)}
.tbadge.t-unset{background:var(--amber-tint);color:var(--amber-text)}
.tbadge.t-na{background:var(--panel-3);color:var(--ink-3)}
.dn-t td.dn-content,.dn-t td.dn-to{max-width:300px}
.dn-t td.dn-to{max-width:200px}
.dn-t .dn-c1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-t td .sub{overflow:hidden;text-overflow:ellipsis}
.dn-yes{display:inline-flex;align-items:center;gap:3px;color:var(--brand-text);font-weight:600;font-size:12.5px}
.dn-no{color:var(--ink-4);font-size:12.5px}
.pager{display:flex;align-items:center;gap:8px;padding:12px 2px 0;font-size:13px;color:var(--ink-3)}
.pager b{color:var(--ink);font-weight:600}
.seg.seg-xs{padding:2px;border-radius:8px}
.seg.seg-xs button{height:24px;padding:0 10px;font-size:12px;border-radius:6px}
.dn-na-wrap{display:inline-flex;align-items:center;gap:6px}
.dn-both{display:block;font-size:12px;line-height:1.5;color:var(--amber-text);font-weight:600}
.dn-th-item{display:inline-flex;align-items:center;gap:5px}
.dn-rules tbody tr,.dn-types tbody tr{cursor:default}
.dn-rules tbody tr:hover td,.dn-types tbody tr:hover td{background:transparent}
.dn-types tbody tr.sel td{background:var(--brand-tint)}
.dn-rules td{height:60px}
.switch{position:relative;display:inline-block;width:40px;height:24px;border-radius:999px;background:var(--line-strong);transition:background .18s ease;flex:none;vertical-align:middle}
.switch i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.switch.on{background:var(--brand)}
.switch.on i{transform:translateX(16px)}
.sw-cell{display:inline-flex;align-items:center;gap:9px}
.sw-l{font-size:12.5px;font-weight:600;color:var(--ink-3);min-width:38px}
.switch.on + .sw-l{color:var(--brand-text)}
.dn-form-sws{display:grid;gap:10px;margin-top:16px}
.dn-form-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.dn-form-sw b{display:block;font-size:14px;font-weight:600}
.dn-form-sw span{font-size:12.5px;color:var(--ink-3)}
.dn-unmapped{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dn-um{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 10px;border-radius:10px;background:var(--panel);color:var(--ink);font-size:13px}
.dn-log{list-style:none;margin:0;padding:0}
.dn-log li{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5}
.dn-log li:last-child{border-bottom:0}
.dn-log time{color:var(--ink-3);min-width:84px;flex:none}
.dn-apply-box{display:grid;gap:10px;margin-top:16px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel-2)}
.dn-apply-box .row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px}
.dn-apply-box .row > span:first-child{color:var(--ink-3)}
.dn-apply-box .select{width:auto;min-width:170px;height:34px}
.dn-apply-box .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dn-apply-box .grid2 > div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:13px}
.dn-apply-box .grid2 > div > span:first-child{color:var(--ink-2)}
.dn-result{padding-top:10px;border-top:1px dashed var(--line-strong)}
.dn-result > span:first-child{font-weight:600;color:var(--ink)!important}
.dn-edited{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.dn-store-card{padding:14px 16px;margin-bottom:4px}
.dn-sc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.dn-sc-row:last-of-type{border-bottom:0}
.dnt-bulk{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:760px){
  .pay-sum.dn-sum4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dn-apply-box .grid2{grid-template-columns:minmax(0,1fr)}
  .dn-apply-box .row{flex-wrap:wrap}
}
/* ===== style9: 지급 일정 법인 열 ===== */
:root{--pay-cols:22px 84px 134px minmax(0,1.1fr) minmax(0,1fr) 106px 110px 34px}
.corp{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.corp i{width:8px;height:8px;border-radius:3px;background:var(--cc);flex:none}
.corp .corp-nm{overflow:hidden;text-overflow:ellipsis}
.corp.none{color:var(--ink-4)}
.corp-new{flex:none;height:16px;padding:0 4px;border-radius:4px;background:var(--amber-tint);color:var(--amber-text);font-size:10px;font-weight:700;line-height:16px}
.pr-corp{min-width:0;display:flex;align-items:center}
.corp-tag{gap:6px}
.corp-tag i{width:8px;height:8px;border-radius:3px;background:var(--cc);flex:none}
@media (max-width:1240px){:root{--pay-cols:22px 78px 130px minmax(0,1.1fr) minmax(0,1fr) 96px 100px 30px}}
@media (max-width:760px){
  .pay-row > .pr-amt{display:block}
  .pay-row > .pr-st{display:flex}
  .pay-row > :nth-child(8){display:none}
  .pay-row .pr-corp{grid-area:k;justify-self:end;margin-right:6px}
}
/* ===== 정식 버전: 로그인 화면 ===== */
.auth{position:relative;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:28px 16px;background:var(--canvas);overflow:hidden}
.auth::before{content:'';position:absolute;inset:-20% -10% auto auto;width:720px;height:720px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 16%,transparent),transparent);pointer-events:none}
.auth::after{content:'';position:absolute;inset:auto auto -25% -15%;width:640px;height:640px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 10%,transparent),transparent);pointer-events:none}
.auth-card{position:relative;z-index:1;width:420px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 70px -30px rgba(12,24,18,.35),0 2px 8px rgba(12,24,18,.05);padding:34px 32px 28px;animation:rise .28s cubic-bezier(.2,.8,.2,1)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.auth-brand .brand-mark{width:42px;height:42px;border-radius:13px}
.auth-brand .brand-name{font-size:16px}
.auth h2{margin:0;font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1.3}
.auth .auth-sub{margin:7px 0 24px;color:var(--ink-3);font-size:14px;line-height:1.6}
.auth form{display:flex;flex-direction:column;gap:14px}
.auth .input{height:46px;font-size:15px;border-radius:12px}
.auth .btn-primary{width:100%;height:48px;font-size:15.5px;border-radius:12px;margin-top:6px}
.auth .btn-primary[disabled]{opacity:.6}
.auth-err{display:none;align-items:flex-start;gap:8px;padding:11px 13px;border-radius:12px;background:var(--red-tint);color:var(--red-text);font-size:13.5px;line-height:1.5;font-weight:500}
.auth-err.on{display:flex}
.auth-err .ic{margin-top:1px}
.auth-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);line-height:1.6}
.auth-note b{color:var(--ink-2);font-weight:600}
.auth-foot{position:relative;z-index:1;margin-top:18px;font-size:12px;color:var(--ink-4);text-align:center}
.auth-center{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 0 6px;color:var(--ink-3);font-size:14px}
.auth-steps{margin:0 0 20px;padding:14px 16px;border-radius:14px;background:var(--brand-tint);color:var(--brand-text);font-size:13.5px;line-height:1.6}
.auth-steps b{font-weight:700}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:46px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3)}
.pw-eye:hover{background:var(--panel-3);color:var(--ink)}
@media (max-width:480px){.auth-card{padding:28px 22px 22px;border-radius:18px}}

/* ===== 정식 버전: 사이드바 아래 사용자 정보, 저장 상태 ===== */
.asof-who{display:block;margin-top:2px;color:var(--ink-2)}
.asof-pw{margin-top:4px;font-size:12px}
.sync-pill{position:fixed;z-index:145;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:10px 16px;border-radius:12px;background:var(--amber-tint);color:var(--amber-text);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);box-shadow:var(--shadow-pop);font-size:13.5px;font-weight:600}
.sync-pill .spinner{width:15px;height:15px;border-color:color-mix(in srgb,var(--amber) 35%,transparent);border-top-color:var(--amber);flex:none}
.masked.full{cursor:copy;color:var(--ink)}
.masked.full:hover{color:var(--brand-text)}
.masked.full .ic{color:var(--ink-3)}
.dn-who{font-style:normal;margin-left:8px;font-size:12px;color:var(--ink-3)}
.ro [data-act="add"],.ro [data-act="addFor"],.ro [data-act="bondAdd"],.ro [data-act="dnRuleAdd"],.ro [data-act="import"],.ro [data-act="editRec"],.ro [data-act="delRec"],.ro [data-act="bondEdit"],.ro [data-act="bondDel"],.ro [data-act="payMarkOne"],.ro [data-act="payUnmark"],.ro [data-act="alertMarkPaid"],.ro [data-act="dnRuleEdit"],.ro [data-act="dnRuleDel"],.ro [data-act="mergeAlias"],.ro [data-act="review"],.ro [data-act="bondClearSamples"]{display:none!important}
.ro .pay-row .chk,.ro .pay-colhead .chk,.ro .dn-types .chk{visibility:hidden}
.ro .switch,.ro .seg-xs button{pointer-events:none;opacity:.55}

/* ===== 정식 버전: 사용자 관리 ===== */
.users-t td{height:56px}
.users-t tr.u-off td{color:var(--ink-3)}
.set-box{padding:4px 20px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:0}
.set-row b{display:block;font-size:14px;font-weight:600}
.set-row span{display:block;margin-top:2px;font-size:13px;color:var(--ink-3);line-height:1.55}
.set-row.info b{font-weight:500;color:var(--ink-2)}
.u-active{display:flex;align-items:center;gap:10px;height:38px;font-size:13.5px;color:var(--ink-2)}