/* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 1번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 010a */ *{box-sizing:border-box} body{margin:0;font-family:var(--sans);-webkit-font-smoothing:antialiased} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} .hidden{display:none!important} @media (prefers-reduced-motion:no-preference){ .msg{animation:in .18s ease-out} } @keyframes in{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}} /* ===== header ===== */ .top{position:sticky;top:0;z-index:20;background:var(--panel);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 22px 0} .logo{display:inline-flex;align-items:center;gap:12px;background:#1E2124;color:#fff;text-decoration:none} .logo svg{width:40px;height:40px;display:block} .logo b{font-weight:700;white-space:nowrap} .tabs{display:flex;background:transparent;padding:0;margin-bottom:-1px} .tabs button{border:0;border-bottom:3px solid transparent;background:transparent;border-radius:var(--r-ctl) var(--r-ctl) 0 0;white-space:nowrap} .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)} .top .status{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:10px;align-items:center;color:var(--mute)} @media (max-width:820px){ .top .status{position:static;transform:none;width:100%;justify-content:center} } .dot{border-radius:50%;display:inline-block;margin-right:4px} .mode{border:1px solid var(--line2);background:var(--panel);border-radius:999px;padding:4px 11px;font-weight:500;display:inline-flex;gap:6px;align-items:center} .mode.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)} /* ===== generic ===== */ .wrap{margin:0 auto;} .pill{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .pill.gold{background:var(--gold-soft);color:var(--gold)} .btn{display:inline-flex;align-items:center;gap:6px;line-height:1.3} .btn.sm{border-radius:var(--r-ctl)} h2{margin:0;text-wrap:balance} h3{margin:0} .banner{display:flex;gap:10px;align-items:center;padding:9px 14px;border-radius:10px;margin-bottom:14px;flex-wrap:wrap} .banner.demo{background:var(--warn-soft);color:var(--warn)} .banner.live{background:var(--ok-soft);color:var(--ok)} .av{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:600;flex:none} .seg{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} .seg button{border:1px solid var(--line2);background:var(--panel);border-radius:var(--r-ctl);padding:3px 11px;} .seg.tier{margin:0;background:var(--panel2);padding:3px;border-radius:9px;gap:2px} .seg.tier button{border:0;background:transparent;border-radius:var(--r-ctl);padding:4px 11px} .seg.tier button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)} .field{margin-top:10px} .field label{display:block;color:var(--mute);margin-bottom:3px} .field input,.field textarea,.field select{width:100%;border:1px solid var(--line2);background:var(--bg);border-radius:var(--r-ctl);padding:7px 9px;} .field textarea{resize:vertical;min-height:54px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px} .uplog{color:var(--ink2);padding:8px 12px;border-bottom:1px solid var(--line);white-space:pre-wrap} .star{color:var(--gold);margin-right:3px} .priv{border-left:3px solid var(--gold);background:var(--gold-soft);padding:10px 12px;border-radius:var(--r-inner);margin-top:12px} .priv .eyebrow{color:var(--gold)} dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:0;width:calc(100% - 32px);box-shadow:var(--shadow)} dialog::backdrop{background:rgba(10,12,16,.45)} dialog .dh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)} dialog .db{padding:6px 18px 18px} dialog .df{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)} /* ===== office ===== */ .owners{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px} .owner{padding:12px 14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform .12s} .owner:hover{transform:translateY(-1px)} .owner.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .owner .h{display:flex;align-items:center;gap:8px;white-space:nowrap} .owner .h .n{margin-left:auto;color:var(--mute);font-weight:400;overflow:hidden;text-overflow:ellipsis} .owner .bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line)} .owner .bar i{display:block;height:100%} .owner .cnt{display:flex;flex-direction:column;gap:1px;color:var(--mute);margin:-2px 0 2px 34px} .owner .cnt b{color:var(--ink);font-weight:600} .owner .m{display:flex;gap:10px;color:var(--ink2);flex-wrap:wrap} .owner .m b{font-weight:600;color:var(--ink)} .main-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} @media (max-width:1100px){ .main-grid{grid-template-columns:1fr 1fr} } details.fold summary{cursor:pointer;list-style:none;color:var(--mute);display:flex;align-items:center;gap:6px} details.fold summary::-webkit-details-marker{display:none} details.fold summary::before{content:"▸";} details.fold[open] summary::before{content:"▾"} .news-grp{color:var(--mute);margin:8px 0 2px} .news-grp:first-child{margin-top:0} .cd{min-height:84px;border:1px solid var(--line);border-radius:9px;padding:6px;cursor:pointer;background:var(--panel);overflow:hidden} .cd:hover{background:var(--panel2)} .cd.other{opacity:.45} .cd.today{border-color:var(--seal)} .cd.sel{background:var(--accent-soft);border-color:var(--accent)} .cd .d{font-weight:600;color:var(--mute);} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 2번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 010a */ .calgrid-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:14px;align-items:start} @media (max-width:1000px){ .calgrid-wrap{grid-template-columns:1fr} } .calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} .calgrid .wd{color:var(--mute);text-align:center;padding:2px 0 6px;} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 3번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 010a 010c 020b */ .cd .ev{display:block;padding:1px 5px;border-radius:4px;background:var(--panel2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cd .ev.m{background:var(--accent-soft);} .cd .ev.k{background:transparent;border:1px dashed var(--line2)} .evitem{display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line);} .evitem:last-child{border-bottom:0} .evitem .t{padding-top:2px} .evitem .n{font-weight:600} .evitem .s{color:var(--mute);margin-top:2px} .evitem.done .n{text-decoration:line-through;opacity:.6} .evitem .act{display:flex;gap:4px} .evitem .act button{border:1px solid var(--line2);background:var(--panel);border-radius:6px;padding:2px 7px;cursor:pointer} @media (max-width:700px){ .main-grid{grid-template-columns:1fr} } .appr{display:grid;grid-template-columns:380px minmax(0,1fr);gap:14px;align-items:start} @media (max-width:900px){ .appr{grid-template-columns:1fr} } .checks{display:flex;flex-direction:column;gap:5px;} .checks label{display:flex;} .main-grid .card{padding:14px} .news-mini-item{padding:8px 0;border-bottom:1px solid var(--line);line-height:1.5} .news-mini-item:last-child{border-bottom:0} .stats{display:grid;margin-bottom:14px} .stat .v{margin-top:2px;} .stat .v small{color:var(--mute);font-weight:400;margin-left:4px} .stat .s{color:var(--mute);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chk.auto{box-shadow:0 0 0 2px var(--accent) inset} .stat .div{border-top:1px solid var(--line);margin:8px 0 6px} .hr{border-top:1px solid var(--line);margin:6px 0 18px} .login-logo img+b{display:none} .stat[data-cat]{cursor:pointer} .stat.sel{outline:2px solid var(--seal);outline-offset:-2px} #stats{grid-template-columns:repeat(5,minmax(0,1fr))} @media(max-width:1100px){ #stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} } .office{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:14px;align-items:start} @media (max-width:1000px){ .office{grid-template-columns:1fr} } .tblwrap{overflow:auto;max-height:calc(100vh - 420px);min-height:320px} table{border-collapse:separate;border-spacing:0;width:100%;} th{position:sticky;top:0;z-index:1;text-align:left;padding:8px 10px;white-space:nowrap;} td{padding:8px 10px;vertical-align:middle;white-space:nowrap} tr.row{cursor:pointer} tr.row:hover td{background:var(--panel2)} tr.row.hid td{opacity:.6} td.name{max-width:260px;overflow:hidden;text-overflow:ellipsis} td .sub{display:block;color:var(--mute);font-weight:400} .stage{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px} .stage i{width:13px;height:6px;border-radius:2px;background:var(--line);display:block} .stage i.f{background:var(--accent)} .stage i.d{background:var(--ok)} .flag{font-weight:600} .side{display:flex;flex-direction:column;gap:12px;position:sticky;} .side .card{padding:14px} .detail-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px} .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0} .kv dt{color:var(--mute)} .kv dd{margin:0;} .alerts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .alerts li{display:flex;gap:8px;align-items:flex-start;padding:7px 9px;border-radius:var(--r-inner);background:var(--panel2)} .alerts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn);margin-top:6px;flex:none} .alerts li.bad::before{background:var(--bad)} .alerts li.ok::before{background:var(--ok)} .queue{display:flex;flex-direction:column;gap:8px} .qitem{border:1px solid var(--line);border-radius:9px;padding:9px 10px;} .qitem .q{font-weight:500} .qitem .a{color:var(--ink2);margin-top:4px;white-space:pre-wrap;max-height:110px;overflow:auto} .qitem .meta{color:var(--mute);margin-top:6px;display:flex;gap:8px;align-items:center} .qitem .meta .btn{margin-left:auto} .cal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .cal li{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;} .cal .d{font-weight:500} .cal .n{color:var(--mute);} .wp{padding:12px 14px} .wp .h{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:8px} .wp .h .n{margin-left:auto;color:var(--mute);font-weight:400} .wp .row{display:grid;grid-template-columns:70px 1fr 40px;gap:8px;align-items:center;color:var(--ink2);margin-top:4px} .wp .row .b{height:6px;border-radius:3px;background:var(--line);overflow:hidden} .wp .row .b i{display:block;height:100%;background:var(--ok)} .wp .row .b i.w{background:var(--accent)} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 4번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 020a */ /* ===== 원천세 ===== */ .wht-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .wht-head select,.wht-head input[type=month]{border:1px solid var(--line2);background:var(--panel);padding:7px 10px;border-radius:var(--r-ctl);} .wht-prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 5번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 020b */ .chk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r-ctl);border:1px solid var(--line2);background:var(--panel);line-height:1;color:var(--mute)} .chk.on{background:var(--ok-soft);} .chk.na{background:var(--panel2);border-style:dashed;color:var(--mute)} .chk.late{border-color:var(--bad);background:var(--bad-soft)} td.c{text-align:center} th.c{text-align:center} .anal-ctl{display:grid;grid-template-columns:96px 1fr 84px;gap:8px;align-items:center;margin-top:8px} .anal-ctl input[type=range]{width:100%} .anal-ctl .num{text-align:right} .legend2{display:flex;gap:14px;color:var(--mute);padding:8px 12px;border-top:1px solid var(--line);flex-wrap:wrap} /* ===== client ===== */ .client{display:grid;grid-template-columns:310px minmax(0,1fr);gap:14px;align-items:start} @media (max-width:880px){ .client{grid-template-columns:1fr} } .bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:10px} .bars .b{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;column-gap:2px;align-items:end;height:100%} .bars .b i{display:block;border-radius:2px 2px 0 0;background:var(--accent);min-height:2px} .bars .b i.p{background:var(--line2)} .bars .b span{grid-column:1/-1;color:var(--mute);text-align:center;} .legend{display:flex;gap:12px;color:var(--mute);margin-top:4px} .legend i{display:inline-block;width:10px;height:6px;border-radius:2px;background:var(--accent);margin-right:4px;vertical-align:middle} .legend i.p{background:var(--line2)} .vat{margin-top:12px;padding:10px 12px;border-radius:9px;background:var(--panel2);display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline} .vat .big{font-weight:700;color:var(--seal)} .nodata{margin-top:10px;padding:14px;border-radius:9px;background:var(--panel2);color:var(--mute);text-align:center} .drop{display:block;border:1.5px dashed var(--line2);border-radius:9px;padding:14px;text-align:center;color:var(--mute);margin-top:10px;cursor:pointer} .drop.over{border-color:var(--accent);background:var(--accent-soft)} .drop input{display:none} .msg{max-width:78%;display:flex;flex-direction:column;gap:4px} .msg.user{align-self:flex-end;align-items:flex-end} .msg .tag{color:var(--mute);display:flex;gap:6px;align-items:center} .msg .tag .pill{padding:1px 7px} .chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0} .chip{border:1px solid var(--line2);background:var(--panel);border-radius:var(--r-ctl);padding:5px 12px;} .chip:hover{background:var(--panel2)} .photo{position:relative} .photo input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer} /* ===== 무심한 듯 · 디자인 레이어 ===== */ body{background-color:var(--bg);} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 6번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 020bm */ .thumb{display:flex;gap:6px;padding:0 16px;color:var(--mute);align-items:center} .thumb img{height:38px;border-radius:4px;border:1px solid var(--line)} .greet-l{min-width:0} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 7번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 020b 030a 150p */ .top{border-bottom:0;box-shadow:0 1px 0 var(--line);padding-top:16px} .logo{border-radius:14px;padding:10px 24px 10px 13px} .tabs{gap:2px} .tabs button{font-size:15px;font-weight:500;color:var(--mute);padding:10px 16px 10px;border-bottom-width:2px;letter-spacing:-.005em} .tabs button[aria-selected="true"]{font-weight:600} .tabs button:hover{background:transparent;color:var(--ink)} .stat{padding:14px 16px} .stat .v{font-weight:600;} .owner{border-radius:14px} .owner .h{font-weight:500} .hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:stretch;margin:4px 0 18px} @media (max-width:900px){ .hero{grid-template-columns:1fr} } .hero .txt{display:flex;flex-direction:column;justify-content:center;padding:10px 6px} .hero .h1{font-weight:300;line-height:1.22;text-wrap:balance;margin-top:8px} .hero .h1 b{font-weight:600} .hero .h1 em{font-style:normal;color:var(--seal)} .hero .sub{color:var(--mute);margin-top:12px;display:flex;gap:14px;flex-wrap:wrap} .hero .sub span b{color:var(--ink);font-weight:600} .main-grid .card{border-radius:14px} .tblwrap{border-radius:0 0 14px 14px} /* ===== 알프레드 스타일 레이아웃 ===== */ body{background-image:none} .app{grid-template-columns:224px minmax(0,1fr);min-height:100vh} .side-nav{position:sticky;top:0;overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);flex-direction:column;gap:10px} .logo-sm{padding:6px 4px;border-radius:0;gap:10px;align-self:flex-start;background:transparent;color:var(--ink);border-bottom:2px solid var(--ink)} .logo-sm svg.mark{width:30px;height:30px;color:var(--ink)} .logo-sm img{height:34px;width:auto;display:block} @media (prefers-color-scheme:dark){ /* 로고 PNG 는 검은 글자라 어두운 바탕에서는 뒤집어 흰 글자로 만든다 (svg 마크는 currentColor 라 그냥 따라온다) */ :root:not([data-theme="light"]) .logo-sm img{filter:invert(1)} } :root[data-theme="dark"] .logo-sm img{filter:invert(1)} .logo-sm b{font-size:17px;font-weight:700;letter-spacing:-.01em} .office-box{border:1px solid var(--line);border-radius:var(--r-inner);padding:8px 10px;color:var(--ink2);background:var(--bg)} .side-nav .tabs{display:flex;flex-direction:column;gap:2px;background:transparent;padding:0;margin:4px 0 0} .side-nav .tabs button{text-align:left;border:0;background:transparent;letter-spacing:0} .side-nav .tabs button[aria-selected="true"]{border-bottom:0} .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)} .side-foot .status{display:flex;gap:10px;color:var(--mute)} /* 테마 고르기 (자동·밝게·어둡게) */ .thm{display:flex;gap:2px;border:1px solid var(--line2);background:var(--panel2);border-radius:var(--r-ctl);padding:2px} .thm button{flex:1;border:0;background:transparent;color:var(--mute);border-radius:calc(var(--r-ctl) - 3px);padding:3px 0;font-weight:600;white-space:nowrap} .thm button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)} .greet{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .sboard{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px} .sboard .tile{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:8px 12px;min-width:138px;text-decoration:none;color:var(--ink)} .sboard .tile svg{width:24px;height:24px;flex:none} .sboard .tile .k{color:var(--mute);white-space:nowrap} .sboard .tile .v{font-weight:700;line-height:1.2} .sboard .tile .s{color:var(--mute);white-space:nowrap} a.tile:hover{border-color:var(--line2)} .greet h1{font-weight:700;margin:0;} .greet h1 em{font-style:normal;} .greet p{margin:6px 0 0;color:var(--ink2);} .greet .sub{display:flex;gap:14px;flex-wrap:wrap;color:var(--mute);margin-top:8px} .greet .sub span b{color:var(--ink);font-weight:600} .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .sum{padding:18px 20px;box-shadow:0 1px 2px rgba(0,0,0,.03)} .sum .h{display:flex;align-items:center;gap:8px;margin-bottom:10px} .sum .h b{font-size:15px;font-weight:700} .sum .h .pill{padding:1px 7px} .sum .h .r{margin-left:auto;color:var(--mute)} .sum .row{display:flex;justify-content:space-between;align-items:baseline;color:var(--ink2);padding:5px 0} .sum .row span:last-child{color:var(--ink);font-weight:500} .sum .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:8px;padding-top:12px;color:var(--ink2)} .sum .tot b{font-weight:700;color:var(--ink);} .eyebrow{margin-top:16px} .owners{margin-top:6px} .main-grid{margin-top:14px} @media (max-width:900px){ .app{grid-template-columns:1fr} .side-nav{flex-direction:row;align-items:center;} .side-nav .tabs{flex-direction:row;} .office-box{display:none} .side-foot{margin:0;padding:0;border:0;flex-direction:row} } .season{margin-top:14px} .season-bar i.a{background:var(--accent)} .season-owners{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 14px;margin-top:10px;} .season-owners div{display:flex;justify-content:space-between;align-items:center;gap:8px} #login,#whoami{position:fixed;inset:0;background:var(--bg);z-index:100;display:grid;place-items:center} #login{background:linear-gradient(180deg,#1E2124 0,#1E2124 46%,var(--bg) 46%)} #login:has(#login-hero){background:linear-gradient(180deg,#141618 0,#141618 55%,var(--bg) 55%)} #login{--hero:min(24vh,200px)} /* 로그인 화면만은 늘 밝게 — 로고가 검은 글자 PNG 라 어두운 바탕에서 안 보인다 */ #login{color-scheme:light; --panel:#FFFFFF; --ink:#16191D; --brand-ink:#FFFFFF; --shadow:0 1px 2px rgba(22,25,29,.05),0 6px 20px rgba(22,25,29,.06)} #login-hero{position:absolute;left:50%;top:max(10px,calc(50vh - 216px - var(--hero)));transform:translateX(-50%);width:var(--hero);height:var(--hero);border-radius:50%;object-fit:cover;object-position:center 20%;box-shadow:0 0 0 4px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.55);display:block} #login .login-box{box-shadow:0 18px 50px rgba(30,33,36,.28);padding:30px 28px 24px} .login-logo{display:flex;flex-direction:column;align-items:center;gap:4px;margin:2px 0 10px;color:var(--ink)} .login-logo svg.mark{width:58px;height:58px;color:var(--ink);margin-bottom:6px} .login-logo img{max-height:64px;max-width:200px;margin-bottom:6px} .login-logo b{font-weight:700;} .login-logo span{color:var(--mute);letter-spacing:.28em;margin-left:.28em} #whoami .names button{justify-content:space-between;display:flex;width:100%;padding:10px 12px} .login-box{width:min(360px,90vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:10px} .login-box p{margin:0 0 6px;font-size:13px;color:var(--mute);text-align:center} .login-box input{border:1px solid var(--line2);background:var(--bg);border-radius:var(--r-ctl);padding:10px 12px;} #login-msg{font-size:12px;min-height:16px;text-align:center} #login-google:not(.hidden){display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:4px} #login-gname:not(.hidden){display:flex;flex-direction:column;gap:8px} .login-box select{border:1px solid var(--line2);background:var(--bg);border-radius:var(--r-ctl);padding:10px 12px;} .side-foot .who{color:var(--ink2);display:flex;justify-content:space-between;align-items:center;gap:6px} .side-foot .who button{border:0;background:transparent;color:var(--mute);cursor:pointer;text-decoration:underline} /* ===== 2026-09-10 다듬기: 정돈된 카드·정렬·인사말 박스·접속자·모바일 ===== */ .greet{background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden;align-items:center;margin:4px 0 18px} .greet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent),var(--gold))} .greet::after{content:"";position:absolute;right:-70px;top:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%);opacity:.8;pointer-events:none} .greet-l,.sboard{position:relative;z-index:1} .side-nav .grp{font-weight:600;} .side-nav .tabs button{position:relative;transition:background .12s} .side-nav .tabs button[aria-selected="true"]::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--accent)} .pres-top{display:inline-flex;align-items:center;gap:6px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%} input[type="checkbox"],input[type="radio"]{accent-color:var(--accent);width:16px;height:16px;margin:0;vertical-align:-3px;flex:none} label.cb{display:flex;align-items:flex-start;gap:8px;color:var(--ink);line-height:1.45;cursor:pointer;margin:0} label.cb input{margin-top:2px} label.cb span{min-width:0} .field label.cb{color:var(--ink);margin:0} .checks label{align-items:flex-start;gap:8px;line-height:1.45} .checks label input{margin-top:2px} .bz-out{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px;margin-top:6px;background:var(--panel)} .bz-out:empty{display:none} .bz-out div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:1px 10px;padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer;align-items:baseline} .bz-out div:hover{background:var(--panel2)} .bz-out b{font-weight:600} .bz-out small{grid-column:2;color:var(--mute);white-space:normal;line-height:1.4} @media (max-width:1000px){ #stats,.stats{grid-template-columns:1fr 1fr!important} } /* ── 43차-i · 저장 표시 · 초점 · 상태 (지시 11) ────────────────────────── */ #save-ok{position:fixed;right:var(--pad);z-index:60; padding:7px 14px;border-radius:999px;background:var(--ok-soft);color:var(--ok-ink); border:1px solid var(--ok);font-size:var(--fs-sub);font-weight:600; opacity:0;transform:translateY(6px);pointer-events:none; transition:opacity var(--dur) ease,transform var(--dur) ease} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 8번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 030b */ @media (max-width:900px){ .side-nav{position:sticky;top:0;z-index:30;gap:6px;flex-wrap:nowrap;box-shadow:0 1px 0 var(--line)} .side-nav .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:4px;padding-bottom:2px;margin:0} .side-nav .tabs::-webkit-scrollbar{display:none} .side-nav .tabs button{white-space:nowrap;flex:none} .logo-sm,.side-foot{display:none} .pres-top{max-width:50%} .sboard{width:100%;gap:6px} .sboard .tile{flex:1;gap:7px} .sboard .tile .k,.sboard .tile .s{white-space:normal} .wht-head{gap:6px} .wht-head h2{width:100%;} .wht-head select,.wht-head input{min-width:120px} .side{position:static} .login-box{width:min(360px,92vw)} } @media (max-width:480px){ .greet .sub{gap:8px;} } /* ===== 모바일 2차 (2026-09-10): 하단 탭바·전체 메뉴·입력 확대 방지 ===== */ .mnav,.mdrawer{display:none} @media (max-width:900px){ .mnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);} .mnav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;} .mdrawer{display:block;position:fixed;inset:0;z-index:50;background:rgba(10,12,16,.45)} .mdrawer.hidden{display:none!important} .mdrawer-box{position:absolute;left:0;right:0;bottom:0;overflow:auto;background:var(--panel);} .mgrp{color:var(--mute);margin:12px 4px 6px} #mdrawer-list button{display:block;width:100%;text-align:left;border:0;background:var(--bg);margin-bottom:6px;} input,select,textarea{font-size:16px!important} /* iOS 자동 확대 방지 */ } /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 9번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 020bm */ .season-bar{height:8px;border-radius:4px;overflow:hidden;display:flex;margin:8px 0} .season-bar i{display:block;height:100%;background:var(--ok)} .season-nums{display:flex;gap:16px;flex-wrap:wrap;color:var(--ink2)} .season-nums b{color:var(--ink)} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 10번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 030b 030dm 030fm */ @media (max-width:900px){ .wht-head select,.wht-head input{flex:1 1 44%} dialog{width:calc(100% - 20px);overflow:auto;border-radius:14px} .office{gap:10px} .sboard .tile{padding:8px 9px;min-width:0} } /* 자료함 */ .dv-drop{border:1.5px dashed var(--line2);border-radius:10px;padding:10px;text-align:center;color:var(--mute);margin:6px 0} .dv-drop.on{border-color:var(--accent);background:var(--accent-soft)} .dv-drop .lnk{cursor:pointer;text-decoration:underline} .dv-list{display:flex;flex-direction:column;max-height:260px;overflow:auto} #fxv-img{min-height:60px} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 11번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 030a 030d */ .pres-top i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 0 3px var(--ok-soft);flex:none} .dv-it{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);} .dv-it .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none} .dv-it .nm:hover{text-decoration:underline} .dv-it .sz,.dv-it .dt{color:var(--mute);flex:none} .dv-it .x{border:0;background:none;color:var(--mute);cursor:pointer;font-size:15px;line-height:1} /* 메뉴 그룹 접기 */ .side-nav .grp{display:flex;align-items:center;justify-content:space-between;user-select:none;border-radius:6px;padding:2px 10px} .side-nav .grp.fold{cursor:pointer} .side-nav .grp.fold:hover{background:var(--panel2)} .side-nav .grp i{display:none;font-style:normal;opacity:.55;transition:transform .15s} .side-nav .grp.fold i{display:inline} .side-nav .grp.off i{transform:rotate(-90deg)} .side-nav .tabs button.nav-off{display:none} /* 재건축 4단계(C) 합친 시트 · 수임동의 · 전체 111장 중 12번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 030e 030fm */ /* 수임 동의 만들기 */ .ik-top{padding:14px} .ik-top-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start} @media (max-width:900px){ .ik-top-grid{grid-template-columns:1fr} } .ik-col{min-width:0} .ik-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .ik-stamp-pv{width:34px;height:34px;flex:none} .ik-picked{background:var(--accent-soft);border-radius:10px;padding:8px 10px;margin-top:8px;line-height:1.6} .ik-picked.hidden{display:none} .ik-picked b{font-size:14px} .ik-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} @media (max-width:1100px){ .ik-fields{grid-template-columns:1fr 1fr} } .ik-fields .f{display:flex;flex-direction:column;gap:3px;min-width:0} .ik-fields .f.wide{grid-column:1/-1} .ik-fields label{color:var(--mute)} .ik-fields input{border:1px solid var(--line2);background:var(--panel);border-radius:var(--r-ctl);padding:6px 8px;min-width:0;color:var(--ink)} .ik-fields input.rrn{border-color:var(--seal)} .ik-forms{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:2px} @media (max-width:700px){ .ik-forms{grid-template-columns:1fr} } .ik-forms label{display:flex;align-items:flex-start;gap:8px;line-height:1.45;cursor:pointer} .ik-preview{overflow:auto;background:var(--panel2);border-radius:10px;padding:10px} .ik-preview.slide .a4{display:none} .ik-preview.slide .a4.on{display:block} .ik-head{align-items:center;gap:10px} .ik-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ik-nav{margin-left:auto;flex:none} .ik-nav{display:flex;align-items:center;gap:8px} .ik-nav b{color:var(--mute);font-weight:600;white-space:nowrap;min-width:46px;text-align:center} .ik-nav button[disabled]{opacity:.4;cursor:default} .ik-preview:empty{display:none} /* 홈택스 수임 등록 · 첨부 3종 */ .ht-files{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin:8px 0} .ht-f{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:7px 9px;min-width:0} .ht-f b{white-space:nowrap} .ht-f .ht-n{flex:1;min-width:0;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ht-f .ht-n.ok{color:var(--ok);font-weight:600} .ht-f .btn{flex:none} /* A4 서식 */ .a4{width:210mm;min-height:296mm;background:#fff;color:#000;padding:14mm 14mm 10mm;margin:0 auto 12px;box-shadow:0 2px 10px rgba(0,0,0,.15);font-family:"Malgun Gothic","맑은 고딕",sans-serif;font-size:10pt;box-sizing:border-box} .a4 .ttl{text-align:center;font-size:17pt;font-weight:700;letter-spacing:-.5px;margin:2mm 0 4mm} .a4 .ttl2{text-align:center;font-size:13pt;font-weight:700;margin:3mm 0} .a4 .sub{font-size:8.5pt;color:#000} .a4 table{width:100%;border-collapse:collapse;table-layout:fixed} .a4 td,.a4 th{background:none;color:#000;position:static} .a4.xlp{overflow:hidden;height:296.8mm;min-height:0} .a4 .xlw{transform-origin:top left} .a4 table.xl{border-collapse:collapse;table-layout:fixed} .a4 table.xl td{padding:0 2px;border:0 solid #000;vertical-align:middle;overflow:visible} .a4 table.xl td[data-st]{position:relative!important} .a4 .xst{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16mm;height:16mm;opacity:.95;pointer-events:none;z-index:3} .a4 table.b td,.a4 table.b th{border:1px solid #000;padding:1.6mm 2mm;vertical-align:middle;word-break:break-all} .a4 .lb{background:#f2f2f2;text-align:center;font-weight:600;font-size:9.5pt} .a4 .ct{text-align:center} .a4 .rt{text-align:right} .a4 .vt td,.a4 td.vt{vertical-align:top} .a4 p{margin:2mm 0} .a4 .note{font-size:8.5pt;line-height:1.5} .a4 .sign{margin-top:3mm;text-align:right;font-size:10.5pt;position:relative} .a4 .st{position:absolute;right:2mm;top:-5mm;width:17mm;height:17mm;opacity:.92} .a4 td .st{right:6mm;top:-3mm;width:15mm;height:15mm} .a4 .date{text-align:center;margin:4mm 0 2mm;font-size:10.5pt;letter-spacing:1px} .a4 .vl{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:2px;white-space:nowrap;margin:0 auto} body.ip>#ik-preview{max-height:none;overflow:visible;padding:0;background:#fff;border-radius:0} @media print{ body.ip>*{display:none!important} body.ip>#ik-preview{display:block!important} body.ip .a4{box-shadow:none;margin:0 auto;page-break-after:always} body.ip .a4:last-child{page-break-after:auto} @page{size:A4;margin:0} } tr.fx-new td{background:var(--accent-soft)} tr.fx-new .name{font-weight:600} #fx-rows tr[data-no]{cursor:pointer} .ht-n{color:var(--mute)} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 13번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 030f 040 */ .todo-it{display:flex;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px solid var(--line);cursor:pointer} .todo-it:last-child{border-bottom:0} .todo-it:hover{background:var(--accent-soft)} .todo-it .ico{width:22px;text-align:center;font-size:15px} .todo-it .tx{flex:1 1 auto;} .todo-it .num{font-size:15px;font-weight:700} .todo-it .num small{font-weight:500;color:var(--mute);margin-left:2px} body.ip2>#an-print{display:block!important;max-height:none;overflow:visible;background:#fff} @media print{ body.ip2>*{display:none!important} body.ip2>#an-print{display:block!important} body.ip2 .a4{box-shadow:none;margin:0 auto} } /* ============================================================ 2026-09-15 · 1차 디자인 개편 (토스증권 화면 참고) 색·여백·모서리·글꼴 무게만 바꾼다. 화면 구조(왼쪽 메뉴·카드 배치)는 그대로. 맨 아래 층이라 위의 규칙을 전부 덮는다 — 되돌리려면 이 블록만 지우면 된다. ============================================================ */ h1,h2,h3,.stat .v{letter-spacing:-.025em} /* 카드 — 회색 바닥 위의 흰 판. 그림자 대신 얇은 선 하나 */ .card,.stat{border-radius:var(--r);box-shadow:none;border:1px solid var(--line)} .stat{transition:border-color .12s} .stat:hover{box-shadow:none;} .stat .k{color:var(--mute)} /* 인사말 — 장식(왼쪽 색띠·원형 그라데이션)을 걷어내고 판판하게 */ .greet{box-shadow:none;border-radius:var(--r);} .greet::before,.greet::after{display:none} .sboard .tile{border-radius:12px} /* 단추 — 토스처럼 테두리 없는 회색 알약, 중요한 것만 색 */ /* 표 — 세로줄 없이, 머리글은 옅게, 줄은 눌렀을 때만 반응 */ th{border-bottom:1px solid var(--line)} td{border-bottom:1px solid var(--line)} /* 왼쪽 메뉴 — 선택은 주황 알약 하나로 (색띠 없앰) */ .side-nav{padding:18px 14px} .side-nav .grp{letter-spacing:.02em;text-transform:none;color:var(--mute);margin:18px 10px 6px} .side-nav .tabs button{border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600;color:var(--ink2)} .side-nav .tabs button:hover{background:var(--panel2);color:var(--ink)} .side-nav .tabs button[aria-selected="true"]{background:var(--accent-soft);font-weight:700} .side-nav .tabs button[aria-selected="true"]::before{display:none} /* 화면색 조정 — 오른쪽 아래 (참고한 화면과 같은 자리). JS 가 이 상자를 body 로 옮긴다 */ #thm{z-index:60;width:auto; border:1px solid var(--line);background:var(--panel);border-radius:var(--r-ctl);gap:2px} #thm button{flex:none;font-weight:600;border-radius:calc(var(--r-ctl) - 3px);color:var(--mute)} #thm button:hover{color:var(--ink)} #thm button.on{background:var(--accent-soft);box-shadow:none} @media print{ #thm{display:none!important} } /* ============================================================ 2026-09-15 · 2차 · '일하는 화면' — UI 구조 개편 토스의 레이아웃(가로 메뉴 4개)은 베끼지 않는다. 여긴 갈 곳이 20개라 가로 메뉴로 옮기면 드롭다운에 숨어 클릭만 늘어난다. 대신 토스가 잘하는 것 ― 늘 보이는 상태 띠 · 한 칸짜리 전역 검색 · 숫자 서체 ― 을 가져온다. ① 상단 바를 제목만 있던 줄에서 '제목 + 전역 검색 + 접속자' 로 ② 옆 메뉴 항목에 배지(안 읽은 팩스·결재 대기·미수) ③ 화면 맨 아래 고정 상태 띠 (토스의 지수 띠 자리) + 테마 스위치를 그 안으로 ============================================================ */ /* ① 상단 바 */ .topbar{display:flex;align-items:center;} .topbar-title{font-weight:700;color:var(--ink);white-space:nowrap;flex:none} .gsearch{position:relative;flex:none} .gsearch input{width:100%;height:38px;border:1px solid transparent;background:var(--panel2);border-radius:11px; padding:0 62px 0 34px;color:var(--ink);outline:none;transition:border-color .12s,background .12s} .gsearch input::placeholder{color:var(--mute)} .gsearch input:focus{background:var(--panel)} .gsearch .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none} .gsearch kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-family:var(--sans); color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:2px 6px;background:var(--panel);pointer-events:none} .gsearch input:focus+kbd{opacity:0} .gs-out{position:absolute;left:0;right:0;top:46px;background:var(--panel);border:1px solid var(--line);border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.16);overflow:hidden auto;max-height:360px;z-index:40;padding:5px} .gs-out div{padding:9px 11px;border-radius:9px;cursor:pointer;display:flex;gap:9px;align-items:baseline;flex-wrap:nowrap} /* 상호만 줄여서 흘리고 나머지는 붙여 둔다 — 좁은 화면에서 글자가 세로로 쪼개지던 것 */ .gs-out b{font-weight:700;color:var(--ink);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gs-out span{color:var(--mute);white-space:nowrap;flex:none} .pres-top{margin-left:0;flex:none} @media (max-width:900px){ .topbar-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .gsearch input{padding-right:12px;} .gsearch kbd{display:none} .pres-top{display:none} .gs-out span:nth-of-type(1),.gs-out span:nth-of-type(2){display:none} } /* ② 옆 메뉴 배지 — 자식 노드가 아니라 ::after 로 그린다 (모바일 전체 메뉴가 textContent 를 읽어 쓰기 때문) */ .side-nav .tabs button[data-badge]{position:relative;padding-right:36px} .side-nav .tabs button[data-badge]::after{content:attr(data-badge);position:absolute;right:10px;top:50%;transform:translateY(-50%); padding:0 6px;border-radius:999px;font-weight:700;display:grid;place-items:center;line-height:1;} /* ③ 하단 고정 상태 띠 */ #statusbar{position:fixed;left:0;right:0;bottom:0;z-index:55;height:46px;align-items:center; padding:0 14px 0 18px;border-top:1px solid var(--line);} #statusbar .sb-l{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none} #statusbar .sb-l::-webkit-scrollbar{display:none} #statusbar .sb-it{display:flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:9px;cursor:pointer; white-space:nowrap;color:var(--mute);transition:background .12s} #statusbar .sb-it:hover{background:var(--panel2);color:var(--ink2)} #statusbar .sb-it b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} #statusbar .sb-r{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none;padding-left:14px} #statusbar .status{display:flex;gap:11px;color:var(--mute)} .side-nav{height:calc(100vh - 46px)} .wrap{padding-bottom:78px} /* 테마 스위치는 상태 띠 안으로 — 자리는 그대로 오른쪽 아래다 */ #thm{position:static;right:auto;bottom:auto;box-shadow:none;padding:2px} #thm button{padding:4px 10px;} @media (max-width:900px){ #thm{position:fixed;right:12px;bottom:70px;box-shadow:0 6px 20px rgba(0,0,0,.18)} .side-nav{height:auto} .wrap{padding-bottom:88px} } /* 숫자는 자리가 흔들리지 않게 */ /* ============================================================ 2026-09-16 · 3차 · 토스증권형 상단 2단 메뉴 (사용자 요청: tossinvest.com 참고) 옆 메뉴(.side-nav)는 화면에서만 숨기고 DOM 에는 그대로 둔다 — switchView·applyRoleUI·renderMnav·applyNavGroups 가 전부 그 단추들을 읽기 때문. 위 줄 = 로고 · 큰 탭 6개(홈·거래처·신고·수임·수납·감면 조회·소식) · 검색 · 접속자 · 🔒대표실 아래 줄 = 그 탭의 소메뉴 (토스의 "실시간 차트 | 지금 뜨는 산업 | …" 자리) ============================================================ */ .app{display:block} .side-nav{display:none!important} .content{min-width:0} .wrap{padding:20px 28px 78px} .topbar{position:sticky;top:0;z-index:40;padding:0 24px;gap:4px;flex-wrap:nowrap;border-bottom:1px solid var(--line)} .topbar-title{display:none} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 14번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 040m 050b 070a 070c */ .greet-l{padding-left:0} /* ============================================================ 2026-09-16 · 5차 · 홈 화면 간소화 (토스증권 홈 참고) 구조: 인사말 = 제목 + 한 줄 → 핵심 숫자 띠(흰 판 하나에 4칸) → (신고기간 띠) → 2열: 왼쪽(넓음) 오늘 할 일·결재 대기 / 오른쪽 일정·이번 주·다가오는 기한 → 맨 아래 최신 소식·AI 검수함(높이 제한, 안에서 스크롤). 소셜 타일(#sboard)은 4차 JS 가 이미 대표실로 옮기므로 여기서는 다루지 않는다. 전부 #view-main 아래 CSS 만. ID·JS 는 손대지 않는다. 되돌리려면 이 블록만 지우면 된다. ============================================================ */ /* ① 인사말 — 카드가 아니라 제목 + 한 줄. 세 번째 줄(#hero-sub: 일정·결재·검토 수)은 숫자 띠·오늘 할 일과 겹치므로 숨김 */ #view-main .greet{box-shadow:none;} #view-main .greet h1{font-weight:800;} #view-main .greet p{margin:4px 0 0;color:var(--ink2)} #view-main .greet p b{color:var(--ink);font-weight:700} #view-main .greet .sub{display:none} /* ② 핵심 숫자 띠 — 흰 판 하나에 4칸(담당 거래처 · 월 기장료 · 이번 달 출금 · 미수), 칸 사이 1px 선. 보이는 타일 수만큼 칸이 생긴다(grid-auto-flow:column). 5번째 타일(다음 기한 D-n)은 인사말 한 줄·오늘 할 일·하단 상태 띠에 이미 있어 숨김 */ #view-main #stats{display:grid;grid-template-columns:none;grid-auto-flow:column; gap:1px;margin:0 0 14px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} #view-main #stats:empty{display:none} #view-main #stats .stat{min-width:0;border:0;border-radius:0;box-shadow:none;background:var(--panel);padding:16px 20px 14px} #view-main #stats .stat:hover{border-color:transparent;box-shadow:none} #view-main #stats .stat .k{font-weight:500;color:var(--mute);letter-spacing:0} #view-main #stats .stat .v{font-weight:700;margin-top:4px;letter-spacing:-.03em} #view-main #stats .stat .v small{font-weight:500;margin-left:5px} #view-main #stats .stat .s{margin-top:4px;color:var(--mute)} #view-main #stats .stat.hot .v{color:var(--bad)} /* 신고기간 띠 — 여백만 줄이고, 담당자별 줄은 칩으로 */ #view-main #season .season{margin:0 0 14px;padding:16px 20px;box-shadow:none} #view-main .season-owners{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:10px} #view-main .season-owners div{gap:8px;background:var(--panel2);border-radius:999px;padding:3px 11px 3px 4px;} #view-main>.hr{display:none} /* ③ 카드 그리드 — 2열. 왼쪽(넓음)=지금 손댈 것, 오른쪽=시간표, 맨 아래=읽을거리 */ #view-main .main-grid>.card{min-width:0;} #view-main .main-grid .detail-head{align-items:center;margin-bottom:8px} #view-main .main-grid .detail-head .btn.sm{background:transparent;border:0;color:var(--mute);padding:2px 2px;min-height:0;font-weight:600} #view-main .main-grid .detail-head .btn.sm::after{content:" ›";font-size:14px} #view-main .main-grid .detail-head .btn.sm:hover{color:var(--ink);background:transparent} #view-main .news-mini-item{padding:9px 0} #view-main .news-grp{margin-top:10px} #view-main .cal{gap:0} #view-main .cal li{padding:7px 0;border-bottom:1px solid var(--line)} #view-main .cal li:last-child{border-bottom:0} #view-main .todo-it{padding:10px 6px;gap:10px} #view-main .todo-it:hover{background:var(--panel2);border-radius:10px} #view-main .todo-it .ico{width:24px;font-size:14px} #view-main .todo-it::after{content:"›";color:var(--mute);font-size:16px;line-height:1} /* 읽을거리는 접어 둔다 — 카드 높이를 제한하고 안에서 스크롤 */ #view-main #queue{max-height:250px;overflow:auto;overscroll-behavior:contain} @media (min-width:901px){ #view-main .main-grid>.card:nth-child(2){grid-area:appr} /* 결재 대기 (#appr-mini) */ #view-main .main-grid>.card:nth-child(3){grid-area:ev} /* 일정 · 이번 주 (#ev-mini) */ #view-main .main-grid>.card:nth-child(4){grid-area:cal} /* 다가오는 신고 기한 (#cal) */ #view-main .main-grid>.card:nth-child(5){grid-area:news} } @media (max-width:900px){ /* 휴대폰 — 숫자 띠 2×2, 카드는 한 줄로(할 일 → 일정 → 기한 → 결재 → 소식 → 검수함) */ #view-main #stats{grid-auto-flow:row;} #view-main #stats .stat{padding:12px 14px 11px} #view-main .main-grid>.card:nth-child(3){order:2} #view-main .main-grid>.card:nth-child(4){order:3} #view-main .main-grid>.card:nth-child(2){order:4} #view-main .main-grid>.card:nth-child(5){order:5} #view-main #queue-card{order:6} #view-main #queue{max-height:220px} /* 최신 소식 (#news-mini) */ /* 직원(applyRoleUI 가 결재 카드에 .hidden)이면 오늘 할 일이 왼쪽 두 줄을 차지 — 구멍이 생기지 않게 */ /* AI 꺼짐(setDot 이 #queue-card 에 .hidden)이면 소식이 아래 한 줄 전부 */ } @media (min-width:1500px){ /* 8차-b · 카드가 옆 카드 높이에 맞춰 늘어나던 것 + 넓은 화면 3열 문제: grid-template-areas 는 한 줄의 두 카드를 같은 높이로 늘려서, 내용이 한 줄인 '오늘 할 일' 이 빈 채로 크게 벌어졌다 → align-items:start. 1500px 이상에서는 2열이 너무 넓어져 3열로 (왼쪽 할 일 / 가운데 시간표 / 오른쪽 읽을거리). */ #view-main #queue{max-height:none} } /* ── ② 제목 위계 — h2(20) › h3(17) › 본문(15) › 표(13) ─────── 기존: h2 17(93행) / h3 13.5(94행) / body 14 → 카드 제목이 본문보다 작았다. 486행 `.wht-head h2{19px}` · 992행 `#view-main … h3{15px}` 는 특정도가 높아 선택자를 그대로 되풀이해 덮는다. */ h2,.wht-head h2{font-size:var(--fs-6);font-weight:800;line-height:var(--lh-tight);letter-spacing:var(--ls-xl)} h3{font-size:var(--fs-5);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-lg)} #view-main .main-grid .detail-head h3, .mdrawer-box .detail-head h3{font-size:var(--fs-5);font-weight:700;letter-spacing:var(--ls-lg)} .greet h1,#view-main .greet h1{font-size:var(--fs-7);line-height:var(--lh-tight);letter-spacing:var(--ls-xl)} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 15번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 040 050a */ .tn-logo,.logo-sm.tn-logo{display:flex;align-items:center;gap:8px;margin-right:12px;flex:none;color:var(--ink);text-decoration:none; border:0;padding:0;background:transparent;cursor:pointer} .tn-logo img{height:26px;width:auto;display:block} .tn-logo svg.mark{width:24px;height:24px;color:var(--ink)} .tn-logo b{font-weight:800;white-space:nowrap} #topnav{display:flex;align-items:center;gap:2px;flex:none} #topnav button{position:relative;border:0;background:transparent;color:var(--ink2); padding:17px 12px;border-radius:0;white-space:nowrap;transition:color .12s} #topnav button:hover{color:var(--ink)} #topnav button.on{color:var(--ink);} #topnav button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2.5px;border-radius:2px;} #topnav button[data-badge]::before{content:attr(data-badge);position:absolute;padding:0 4px; border-radius:999px;font-weight:700;display:grid;place-items:center;line-height:1} .tn-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;min-width:0} .tn-admin{border:0;background:transparent;color:var(--mute);font-weight:600;padding:7px 10px;border-radius:9px;white-space:nowrap;cursor:pointer} .tn-admin:hover{background:var(--panel2);color:var(--ink)} .tn-right .mode{display:inline-flex} .tn-right .who{color:var(--ink2);display:flex;gap:6px;align-items:center;white-space:nowrap} .tn-right .who button{border:0;background:transparent;color:var(--mute);text-decoration:underline;cursor:pointer} .gsearch{margin-left:0;} #subnav{position:sticky;z-index:39;display:flex;align-items:center;gap:4px;padding:8px 24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} #subnav::-webkit-scrollbar{display:none} #subnav button{border:0;background:transparent;color:var(--mute);padding:7px 12px;border-radius:var(--r-ctl,8px);white-space:nowrap;cursor:pointer} #subnav button:hover{background:var(--panel);color:var(--ink)} #subnav button[data-badge]::after{content:attr(data-badge);margin-left:6px;display:inline-grid;place-items:center; padding:0 5px;border-radius:999px;font-weight:700;line-height:1;vertical-align:1px} #subnav .sn-title{margin-left:auto;color:var(--mute);white-space:nowrap;padding-left:12px} @media (max-width:1180px){ .gsearch{width:min(220px,20vw)} } @media (max-width:900px){ #topnav,#subnav,.tn-logo b{display:none} .tn-logo{margin-right:6px} /* 사업자번호·대표자는 감추고 담당자만 */ } /* ============================================================ 2026-09-16 · 4차 · 사용자 지적 7건 (로고 위치 · 접속자 → 하단 띠 · 서식 찾기 · 홈 간소화 · 모바일 · 색) ============================================================ */ .logo-sm.tn-logo{align-self:center;margin-top:0;height:56px} /* ① 로고가 바 위쪽에 붙어 있던 것 */ #statusbar .pres-top{display:inline-flex;margin:0;max-width:300px;} /* ② 접속자 현황 */ #statusbar .pres-top i{width:7px;height:7px} @media (max-width:1180px){ .pres-top{display:inline-flex} } .gsearch{width:min(320px,26vw)} .gs-out .gs-tag{background:var(--accent-soft);border-radius:6px;padding:1px 6px;font-weight:700;} /* ③ 서식 찾기 */ .gs-out .gs-tag{display:inline-block!important} /* 소셜 한 줄 (대표실) */ .sboard.sb-line{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;position:static} .sboard.sb-line .tile{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--panel);border:1px solid var(--line);border-radius:999px;} .sboard.sb-line .tile svg{width:18px;height:18px} .sboard.sb-line .tile>div{display:flex;gap:6px;align-items:baseline} .sboard.sb-line .tile .k{color:var(--mute)} .sboard.sb-line .tile .v{font-weight:700} .sboard.sb-line .tile .s{display:none} .greet{padding:18px 22px} /* ============================================================ 2026-09-16 · 4차 · 색감 개편 (토스증권 참고 · 주 강조색 주황→파랑) 색 토큰만 다시 정한다. 구조·ID·렌더 함수는 손대지 않는다. 되돌리려면 이 블록만 지운다. 새 토큰 3개: --accent-ink(흰 바탕 위 '글자'용 진한 파랑) · --accent-fill(흰 글자를 얹는 '채움'용 파랑) · --bad-ink(작은 글자·배지용 진한 빨강). 밝은 파랑 #3182F6 / 빨강 #F04452 은 흰 글자와 3.7:1 라 큰 숫자·막대·테두리·포커스 링에만 쓰고, 12~13px 글자에는 -ink 값을 쓴다 (WCAG AA 4.5:1). .a4 인쇄 서식은 흰 바탕·검은 글씨 고정이므로 여기 규칙이 닿지 않는다. ============================================================ */ /* 로그인 화면은 늘 밝게(449행에서 토큰을 따로 박아 둠) — 같은 파랑을 쓰도록 맞춘다 */ /* ── 파랑이 '글자'로 쓰이는 곳 → 진한 파랑(--accent-ink) ── */ .pill.acc,.greet h1 em,.dv-drop .lnk,.side-nav .tabs button[aria-selected="true"],#mdrawer-list button.on,#thm button.on,.mnav button.on{color:var(--accent-ink)} /* ── 흰 글자를 얹는 파랑 채움 → --accent-fill (흰 글자 4.6:1 / 다크 4.8:1) ── */ .btn.primary{font-weight:700} .btn.primary:hover{filter:brightness(1.08)} /* ── 상단 큰 탭의 선택 밑줄 · 검색창 포커스 · 선택 표시(글자 아님, 3:1 이면 됨) ── */ #topnav button.on::after{background:var(--accent)} .gsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .gs-out div.on,.gs-out div:hover{background:var(--accent-soft)} ::selection{background:var(--accent-soft);color:var(--ink)} /* ── 빨강: 작은 글자·배지는 진한 빨강(--bad-ink), 큰 숫자는 토스 빨강(--seal/--bad) ── */ .pill.bad,.pill.seal,.todo-it.hot .num,#statusbar .sb-it.hot b{color:var(--bad-ink)} .side-nav .tabs button[data-badge]::after,#topnav button[data-badge]::before,#subnav button[data-badge]::after{background:var(--bad-ink);color:var(--panel)} .stat.hot .v,.sum .tot b.hot{color:var(--seal);font-weight:700} .stat.sel{outline-color:var(--accent)} /* ── 바탕·판·선: 살짝 푸른 회색 위의 흰 판, 선은 아주 옅게 ── */ .topbar,#statusbar,.mnav{background:var(--panel);border-color:var(--line)} #subnav{background:var(--bg)} #subnav button.on{box-shadow:var(--shadow-sm)} .card,.stat,.greet{border-color:var(--line)} .stat:hover{border-color:var(--line2)} th{background:var(--panel);color:var(--mute)} tbody tr:hover td{background:var(--panel2)} .sboard .tile{background:var(--panel2);border-color:transparent} /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 16번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 050am 060b */ .season-bar{background:var(--line)} @media (max-width:900px){ /* ── 상단 바: 로고 · 검색 한 줄. 대표실 단추는 전체 메뉴 '관리' 에 있으므로 숨김 ── */ .topbar{padding:0 12px;gap:8px} .logo-sm.tn-logo{height:52px;margin-right:4px} .tn-logo img{height:22px} .tn-admin{display:none} .tn-right{flex:1 1 auto;gap:6px;min-width:0} .gsearch{flex:1 1 auto;width:auto;min-width:0} .gsearch input{height:40px;border-radius:12px} .gs-out{left:0;right:0;width:auto;max-width:none;top:44px} .tn-right .mode{flex:none;min-height:36px;padding:0 9px;max-width:40px;overflow:hidden;white-space:nowrap;justify-content:flex-start} /* 🔒 만 보이게 */ /* ── ① 소메뉴 칩 줄 — 3차 층의 display:none 을 되살리고 sticky 로 ── */ #subnav{display:flex;z-index:39;padding:6px 12px;gap:6px;background:var(--panel);border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-padding:0 12px} #subnav button{position:relative;flex:none;min-height:36px;padding:0 13px;border-radius:var(--r-ctl,8px);background:var(--panel2);color:var(--ink2)} #subnav button::before{content:"";position:absolute;left:-3px;right:-3px;top:-6px;bottom:-6px} /* 손가락 목표 48px (보이는 칩은 36px) */ #subnav button.on{box-shadow:none;} #subnav button[data-badge]::after{margin-left:5px;vertical-align:0} #subnav .sn-title{display:none} /* ── ③ 본문 규격 (375px) ── */ .wrap{padding:12px 16px calc(78px + env(safe-area-inset-bottom,0px))} .greet{padding:16px 16px 14px;margin:0 0 12px;gap:10px} .greet p{margin-top:3px} .greet .sub{gap:6px 12px;margin-top:6px} .greet .sboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin-top:2px} .greet .sboard .tile{flex-direction:column;align-items:flex-start;gap:4px;padding:9px 10px;min-width:0;border-radius:12px} .greet .sboard .tile svg{width:18px;height:18px} .greet .sboard .tile>div{min-width:0;width:100%} .greet .sboard .tile .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .greet .sboard .tile .v{font-size:15px} .greet .sboard .tile .s{display:none} #stats,.stats{grid-template-columns:1fr 1fr!important;gap:8px;margin-bottom:12px} #stats .stat:nth-child(odd):last-child{grid-column:1/-1} /* 5장째(다음 기한) 홀수 타일은 전체 폭 */ .stat{padding:12px 14px;border-radius:14px} .stat .v{margin-top:3px} .stat .v small{margin-left:3px} .stat .s{white-space:normal;line-height:1.4;margin-top:4px} .stat .div{margin:6px 0 4px} .hr{margin:2px 0 12px} .season{margin-top:12px} .main-grid{gap:10px;margin-top:0} .main-grid .card{padding:14px;border-radius:14px} .main-grid .card .detail-head h3{font-size:15px} #detail{scroll-margin-top:108px} /* 상단 바 52 + 칩 줄 48 + 여유 */ /* 표: 글자 13px, 가로 스크롤은 끝에 그림자로 알린다(넘칠 때만 보인다) */ th,td{padding:9px 8px} .tblwrap{max-height:none;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; background-color:var(--panel); background-image:linear-gradient(to right,var(--panel) 40%,transparent), linear-gradient(to left,var(--panel) 40%,transparent), radial-gradient(farthest-side at 0 50%,var(--m-sh),transparent), radial-gradient(farthest-side at 100% 50%,var(--m-sh),transparent); background-position:0 0,100% 0,0 0,100% 0; background-size:32px 100%,32px 100%,12px 100%,12px 100%; background-repeat:no-repeat; background-attachment:local,local,scroll,scroll} /* ── ② 하단 탭바: 목표 50px, 배지, 선택은 먹색(토스식 단색) ── */ .mnav{padding:4px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:none;border-top:1px solid var(--line)} .mnav button{position:relative;min-height:50px;padding:5px 0 3px;gap:3px;font-weight:600;color:var(--mute);border-radius:12px} .mnav button svg{width:24px;height:24px} .mnav button.on{color:var(--ink);font-weight:700} .mnav button[data-badge]::after{content:attr(data-badge);position:absolute;top:3px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px; border-radius:999px;background:var(--bad);color:#fff;font-weight:700;display:grid;place-items:center;line-height:1;font-variant-numeric:tabular-nums} /* ── 전체 메뉴 시트: 손잡이 · 2열 · 44px 이상 · 맨 아래 상태 점 + 테마 ── */ .mdrawer-box{max-height:86vh;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0} .mdrawer-box::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 10px} #mdrawer-close{min-height:36px} #mdrawer-list{display:grid;grid-template-columns:1fr 1fr;gap:6px} #mdrawer-list .mgrp{grid-column:1/-1;margin:12px 2px 2px;letter-spacing:0;text-transform:none;font-weight:600} #mdrawer-list button{margin:0;min-height:46px;padding:10px 12px;font-weight:600;border-radius:12px;color:var(--ink2)} #mdrawer-list button.on{background:var(--accent-soft);font-weight:700} .mdrawer-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)} .mdrawer-foot .status{display:flex;gap:10px;color:var(--mute)} /* ── ④ 테마 스위치: 떠 있는 단추를 없애고 시트 안에서만 보인다 ── */ #thm{display:none} #view-settings .set-desk{display:none!important} /* R3: 메뉴 접기·키보드 단축키는 휴대폰에서 쓸 수 없다 */ #set-thm #thm{display:flex;position:static;right:auto;bottom:auto;margin:0;box-shadow:none;z-index:auto} /* R3: 휴대폰 설정 › 화면에서 테마 스위치가 사라지던 것 */ #mdrawer #thm{display:flex;position:static;right:auto;bottom:auto;margin:0;padding:3px;box-shadow:none;border:1px solid var(--line);background:var(--panel2);z-index:auto} #mdrawer #thm button{flex:none;min-height:36px;padding:0 13px;} } @media (max-width:359px){ /* 아주 좁은 폰(≤359px): 타일 1열 */ #stats,.stats{grid-template-columns:1fr!important} #stats .stat:nth-child(odd):last-child{grid-column:auto} } /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 17번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 060c */ /* ===== 출퇴근 기록 ===== */ .at-now{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 18px;align-items:center;padding:20px 22px} .at-now .at-date{font-size:17px;font-weight:800;letter-spacing:-.02em} .at-now .at-times{margin-top:6px;color:var(--ink2);display:flex;gap:16px;flex-wrap:wrap} .at-now .at-times b{font-size:15px;color:var(--ink)} .at-now-r{display:flex;gap:8px} .at-big{min-width:104px;height:52px;font-size:15px;font-weight:700;border-radius:14px} .at-big:disabled{opacity:.45;cursor:not-allowed} .at-loc{grid-column:1/-1;color:var(--mute);border-top:1px solid var(--line);padding-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .at-loc.ok{color:var(--ok)} .at-hol td{color:var(--mute)} .at-today td{background:var(--accent-soft)} @media (max-width:900px){ .at-now{grid-template-columns:1fr} .at-now-r{width:100%} .at-big{flex:1;height:58px} } /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 18번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 060d 070b 070d */ /* ============================================================ 2026-09-16 · 8차 · 여백·기준선 정리 (사용자 지적: 좌우 여백이 너무 크다) 측정(1920px): 본문 .wrap 은 좌 293 / 우 308 을 비우고 1320 만 썼는데, 로고 24 · 소메뉴 24 · 상태 띠 18 은 화면 끝에 붙어 있어 **왼쪽 기준선이 4개**였다. → ① 본문 최대 폭 1320 → 1720 ② 여백을 --pad 하나로 통일 ③ 화면 끝까지 늘어나는 줄(상단 바·소메뉴·상태 띠)은 padding-inline:max(--pad, (100% - --maxw)/2 + --pad) 로 **본문과 같은 기준선**에 맞춘다. (가로 폭은 그대로 꽉 차서 배경·아래선은 끝까지 간다 — 토스도 같은 방식) ============================================================ */ .wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)} .topbar,#subnav{padding-left:max(var(--pad),calc((100% - var(--maxw))/2 + var(--pad))); padding-right:max(var(--pad),calc((100% - var(--maxw))/2 + var(--pad)))} #statusbar{padding-left:max(var(--pad),calc((100% - var(--maxw))/2 + var(--pad))); padding-right:max(calc(var(--pad) - 10px),calc((100% - var(--maxw))/2 + var(--pad) - 10px))} @media (min-width:1500px){ /* 넓어진 폭을 실제로 쓰게 — 거래처 현황의 상세 칸, 수임동의 미리보기 */ .office{grid-template-columns:minmax(0,1fr) 440px} } @media (max-width:900px){ .wrap{padding-left:var(--pad);padding-right:var(--pad)} } @media (min-width:1001px){ /* ============================================================ 2026-09-16 · 9차 · 세로 공간 (사용자: "디자인 100점") 문제(1280x900 실측): .tblwrap 17곳이 max-height:calc(100vh - 300~430px) 처럼 **화면 기준** 높이인데 페이지 자체도 스크롤돼서(문서 1239px) 서로 어긋났다. 거래처 표는 480px(8행)만 보이고, 옆 #detail 은 1031px 이라 왼쪽 아래 449px 가 빈 채로 남았다. → ① 인라인 max-height 를 JS(fitTables)가 **실제 남은 높이**로 덮어쓴다 ② 상세 칸(.side)도 화면 안에서 스스로 스크롤해 표 쪽을 늘리지 않는다 ============================================================ */ .tblwrap{min-height:0} .office{align-items:start} .side{position:sticky;max-height:calc(100vh - 132px);overflow:auto;overscroll-behavior:contain} .side::-webkit-scrollbar{width:8px} .side::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px} } /* 표 머리글이 스크롤에 가려지지 않게 (이미 th sticky 지만 배경이 비칠 때가 있다) */ .tblwrap thead th{position:sticky;top:0;z-index:2;background:var(--panel);box-shadow:inset 0 -1px 0 var(--line)} @media (min-width:1001px){ /* 9차-b · 통계 타일이 3열로 고정돼 4개일 때 3+1 로 깨지던 것 (CMS 등록현황·팩스 수신함 등) → 개수에 맞게 펴진다. 홈의 #stats 는 6차에서 '숫자 띠' 로 따로 정의하므로 영향 없다. */ .stats{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))} main.wrap .stats .stat{padding:14px 18px 12px} main.wrap .stats .stat .v{font-size:22px;margin-top:2px} } /* =================================================================== 2026-09-16 · 9차 층 · 화면의 상태와 피드백 (스켈레톤 · 토스트 · 빈 상태 · 처리 중 버튼 · 연결 표시 · 값 변화) 맨 뒤 층이므로 되돌리려면 이 블록만 통째로 지우면 된다. 기존 규칙을 덮어쓰지 않고 새 클래스만 쓴다(.empty 만 여백을 늘린다). =================================================================== */ /* ---- 1) 스켈레톤: '아직 안 왔다' 와 '없다' 를 눈으로 구분 ---------- */ .sk{position:relative;overflow:hidden; color:transparent!important;user-select:none} .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,var(--sk2),transparent)} @media (prefers-reduced-motion:no-preference){ .sk::after{animation:mtsk 1.25s ease-in-out infinite} } @keyframes mtsk{100%{transform:translateX(100%)}} .sk-line{height:12px;margin:6px 0} tr.sk-row td{padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line)} tr.sk-row .sk-line{margin:0} #stats .card.stat .sk-line{margin:3px 0} #stats .card.stat .v .sk-line{height:20px} /* ---- 2) 토스트: 화면 안에서 알리고, 스스로 사라진다 ---------------- */ #min-toast{position:fixed;z-index:9000;left:50%;transform:translateX(-50%); width:min(560px,calc(100vw - 28px));display:flex;flex-direction:column;gap:8px; pointer-events:none} #min-toast .mt{pointer-events:auto;box-sizing:border-box;width:100%; display:flex;gap:11px;align-items:flex-start; background:var(--toast-bg);color:var(--toast-ink); border-radius:13px;padding:12px 12px 12px 0;overflow:hidden;line-height:1.55; box-shadow:0 10px 30px rgba(0,0,0,.26)} @media (prefers-reduced-motion:no-preference){ #min-toast .mt{animation:mtin .18s ease-out} } @keyframes mtin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #min-toast .mt>i{flex:none;width:5px;align-self:stretch;background:var(--accent);border-radius:0 3px 3px 0} #min-toast .mt.ok>i{background:var(--ok)} #min-toast .mt.bad>i{background:var(--bad)} #min-toast .mt.warn>i{background:var(--warn)} #min-toast .mt .tx{flex:1 1 auto;min-width:0;white-space:pre-wrap;word-break:break-word} #min-toast .mt .tx small{display:block;color:var(--toast-sub);margin-top:2px} #min-toast .mt button{flex:none;border:0;border-radius:var(--r-ctl);cursor:pointer; font:inherit;font-weight:700;padding:5px 10px; background:rgba(255,255,255,.14);color:var(--toast-ink)} #min-toast .mt button:hover{background:rgba(255,255,255,.24)} #min-toast .mt button.mt-x{background:transparent;color:var(--toast-sub); font-size:16px;font-weight:400;padding:2px 6px;line-height:1} @media (max-width:900px){ #min-toast{width:calc(100vw - 20px)} } @media print{ #min-toast{display:none!important} } /* ---- 3) 빈 상태: 왜 비었는지 + 다음 행동 -------------------------- */ .empty b{margin-bottom:3px} .empty span{display:block;} .empty .ebtn{flex-wrap:wrap;justify-content:center;} .empty .ebtn button{border:1px solid var(--line2);background:var(--panel);color:var(--ink2); border-radius:9px;padding:6px 12px;font:inherit;font-weight:700;cursor:pointer} .empty .ebtn button:hover{border-color:var(--accent)} /* ---- 4) 처리 중 버튼: 어디를 눌렀는지 보이고 두 번 안 눌린다 ------- */ .btn.busy{position:relative;pointer-events:none;opacity:.8;padding-left:29px} .btn.busy::before{content:"";position:absolute;left:11px;top:50%;width:12px;height:12px;margin-top:-6px; border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%} @media (prefers-reduced-motion:no-preference){ .btn.busy::before{animation:mtspin .7s linear infinite} } @keyframes mtspin{to{transform:rotate(360deg)}} /* ---- 5) 연결 표시: 서버가 조용히 죽으면 상태 띠에 뜬다 ------------- */ #statusbar .sb-net{display:none;align-items:center;gap:6px;flex:none;cursor:pointer;font-weight:700;border-radius:9px;padding:5px 10px; color:var(--bad-ink,var(--bad));background:var(--bad-soft);border:1px solid transparent} #statusbar .sb-net.on{display:inline-flex} #statusbar .sb-net i{width:7px;height:7px;border-radius:50%;background:var(--bad);flex:none} @media (prefers-reduced-motion:no-preference){ #statusbar .sb-net i{animation:mtpulse 1.6s ease-in-out infinite} } @keyframes mtpulse{0%,100%{opacity:1}50%{opacity:.35}} /* ---- 6) 값이 바뀐 숫자만 잠깐 표시 -------------------------------- */ .mt-flash{border-radius:var(--r-ctl)} @media (prefers-reduced-motion:no-preference){ .mt-flash{animation:mtflash 1s ease-out} } @keyframes mtflash{0%{background:var(--accent-soft);box-shadow:0 0 0 5px var(--accent-soft)} 100%{background:transparent;box-shadow:0 0 0 5px transparent}} /* ============================================================ 2026-09-16 · 9차 · 글자 크기 체계 정리 (타입 스케일 · 정보 위계) 되돌리려면 이 블록만 지우면 된다. 구조·ID·JS 는 손대지 않는다. ------------------------------------------------------------ [왜] 파일 전체에 font-size 가 23종(11.5/12/12.5/13/13.5 …) 쓰여 0.5px 차이가 의미 없이 섞여 있었고, 카드 제목 h3(13.5px)이 본문(14px)보다 작아 위계가 뒤집혀 있었다. [무엇] 11 / 12 / 13 / 15 / 17 / 20 / 24 / 30 여덟 계단으로 수렴. [되돌리기] --fs-body 를 14px 로 되돌리면 본문만 예전 크기가 된다. ============================================================ */ /* ── ① 본문 기준 ──────────────────────────────────────────── 기존 body{font-size:14px;letter-spacing:-.01em}(54·679행) 은 14px 한글을 -0.14px 씩 당겨 11~12px 작은 글자까지 음절이 붙어 보였다. */ body{letter-spacing:var(--ls-sm)} /* 표가 화면을 채우므로 페이지 자체는 거의 스크롤되지 않는다 */ .hero .h1{font-size:var(--fs-8);letter-spacing:var(--ls-xl)} .logo b,.login-logo b{font-size:var(--fs-6);letter-spacing:var(--ls-lg)} .tn-logo b{font-size:var(--fs-5);letter-spacing:var(--ls-lg)} /* ── ③ 구역 이름(.eyebrow) — 거래처 상세를 나누는 유일한 층 ── 11px 한글에 letter-spacing:.08em(실측 0.88px)·uppercase 는 라틴 서체 관습이라 한글 음절이 흩어져 보였다. 12px·자간 0·굵기로 구분한다. 707행이 .side-nav .grp 에 이미 같은 처방을 했다 — 나머지에도 맞춘다. */ .eyebrow,details.fold summary,.news-grp,.mgrp,.calgrid .wd{ letter-spacing:var(--ls-sm);text-transform:none; font-weight:700;line-height:var(--lh-snug)} .eyebrow{color:var(--mute)} /* ── ④ 표 — 머리글 12 / 본문 13 / 보조줄 11, 숫자는 전부 고정폭 ── */ table{line-height:var(--lh-snug);font-variant-numeric:tabular-nums} th{font-weight:700;letter-spacing:var(--ls-sm);line-height:var(--lh-snug)} td{line-height:var(--lh-snug)} td.name{font-weight:600;color:var(--ink)} /* 재건축 4단계(C) 합친 시트 · 수임동의 · 전체 111장 중 19번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 070f 080f */ /* 12.5 → 13 */ .banner, .news-mini-item, .kv, .alerts li, .qitem, .cal li, .anal-ctl, .nodata, .drop, .chip, .season-owners, .dv-drop, .dv-it, .ik-picked, .ik-fields input, .ik-forms label, .ik-nav b, .ht-f b, .bz-out, #statusbar, #ht-card .seg.tier button, .at-loc, .office-box {font-size:var(--fs-3)} /* 13.5 → 13 (조밀 UI) · 14.5 → 15 (읽는 글) */ .hero .sub, .gsearch input, .at-now .at-times, #view-main .todo-it .tx {font-size:var(--fs-3)} #mdrawer-list button {font-size:var(--fs-body)} /* 10 / 10.5 → 11 */ .msg .tag .pill, .legend, .sboard .tile .s, .mnav button, .gsearch kbd, .side-nav .grp i {font-size:var(--fs-1)} /* 18 / 19 / 21 / 22 / 23 / 26 / 34 → 계단 위로 */ .vat .big, .sboard .tile .v {font-size:var(--fs-5)} /* ①-3 빈 상태의 '조건 모두 해제' 가 파랑 글자를 파랑 바탕에 올려 1.46:1 — 사실상 안 보였다. */ /* ①-4 휴대폰 전체 메뉴의 선택 표시·배지가 5차 층에 덮여 보정 전 색으로 돌아갔다. */ /* ①-5 A4 인쇄 서식 칸에 공용 표 hover 회색이 들어가 '입력 칸' 처럼 보였다. */ .a4 tbody tr:hover td{background:none} @media print{ /* ①-6 인쇄: 목록 화면을 그대로 인쇄하면 fitTables 가 넣은 인라인 높이 때문에 12행쯤에서 잘렸다. 서식의 머리칸 음영도 기본 인쇄 설정에서 사라졌다. */ .tblwrap{max-height:none!important;overflow:visible!important} .side{position:static!important;max-height:none!important;overflow:visible!important} #mnav,.mdrawer,#subnav,.topbar,#statusbar{display:none!important} main.wrap{padding-bottom:0!important} .a4,.a4 *{print-color-adjust:exact;-webkit-print-color-adjust:exact} } /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 20번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 070d 070g 080a 080c */ td .sub{line-height:1.4;letter-spacing:var(--ls-sm)} tr.wk-row td.amt{font-size:var(--fs-3);font-weight:700} /* ── ⑤ 숫자 — IBM Plex Mono 를 걷어내고 Pretendard 고정폭 숫자로 ── 측정(13px): "1,234,567" 이 Pretendard 61.3px / Plex Mono 69.0px 로 12.6% 넓고 글자 상자도 2px 높아, 한 줄 안에서 금액 칸만 떠 보였다. 게다가 6행 링크가 Plex Mono 를 400·500 만 불러오므로 600·700 은 브라우저가 억지로 굵게 그린다(잉크량 400→128 · 500→161 · 700→231). Pretendard 는 tnum 으로 자릿수를 맞출 수 있으므로 mono 가 필요 없다. */ .num,.cd .d,.evitem .t,.cal .d,.bars .b span,.bz-out b{ font-family:var(--sans); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1} .stat .v, .sum .tot b, .todo-it .num, .sb-it b, .vat .big, .sboard .tile .v, .at-now .at-times b, .kv, .pill, .owner .cnt, .owner .m { font-variant-numeric:tabular-nums} .sum .tot b{font-size:var(--fs-6);letter-spacing:var(--ls-lg)} .stat .v{letter-spacing:var(--ls-xl)} .stat .k{font-weight:600;letter-spacing:var(--ls-sm)} .stat .v small,.stat .s{letter-spacing:var(--ls-sm)} #view-main #stats .stat .v{font-size:var(--fs-7)} /* ── ⑦ 상단 2단 메뉴 — 큰 탭 15 › 소메뉴 13 ──────────────── 기존 14.5(816행) / 13.5(833행) 는 1px 차이라 '급'으로 안 읽히면서 값만 어긋났다. 2px 벌리고 굵기로 한 번 더 구분한다. */ #topnav button{font-size:var(--fs-body);font-weight:700;letter-spacing:var(--ls-md)} #topnav button.on{font-weight:800} #subnav button{font-weight:600;letter-spacing:var(--ls-sm)} #subnav .sn-title{letter-spacing:var(--ls-sm)} .topbar-title{letter-spacing:var(--ls-md)} /* ── ⑦-b 상단 줄 높이를 '글자 크기'에서 떼어 낸다 ───────────── [발견한 버그] .topbar 는 min-height:56px(808행) 인데 #subnav 는 top:56px(832행) 로 박아 놨다. 그런데 #topnav button(816~817행) 이 line-height 를 body(1.55)에서 물려받아 실제 topbar 높이는 57.47px 다(실측). 즉 스크롤해서 두 줄이 다 붙으면 소메뉴가 상단 바를 1.5px 파고들고, 글자를 키우면 더 벌어진다. 236행 `.side{top:128px}` 도 실제 57+52=109 와 19px 어긋나 오른쪽 상세 칸이 쓸데없이 19px 아래에서 시작한다. → ① 큰 탭의 line-height 를 고정해 높이를 예측 가능하게 만들고 ② 실제 높이는 아래 JS 가 --topbar-h / --subnav-h 에 넣어 준다. (JS 를 안 넣어도 기본값 56/52 로 지금과 같게 동작한다) */ #topnav button{line-height:21px;padding-top:17px;padding-bottom:17px} #subnav{top:var(--topbar-h,56px)} .side{top:calc(var(--topbar-h,56px) + var(--subnav-h,52px) + 14px)} .tblwrap th{top:0} /* ── ⑧ 배지 — 같은 숫자인데 크기가 셋이었다(10/16 · 10.5/17 · 10.5/19) ── */ #topnav button[data-badge]::before, #subnav button[data-badge]::after, .side-nav .tabs button[data-badge]::after{ min-width:18px;height:18px; font-variant-numeric:tabular-nums;letter-spacing:0} /* ── ⑨ 단추·입력칸 ───────────────────────────────────────── */ .btn{letter-spacing:var(--ls-sm)} .field input, .field textarea, .field select, .wht-head select, .wht-head input[type=month] { letter-spacing:var(--ls-sm)} .login-box input,.login-box select{font-size:var(--fs-body)} /* ── ⑩ 산문은 넉넉하게 ───────────────────────────────────── */ .checks,.empty{line-height:var(--lh-base)} /* ============================================================ 2026-09-16 · 9차 · 밀도와 동선 (377곳을 매일 훑는 사람 기준) 여기가 마지막 층이다. 되돌리려면 이 블록만 지우면 된다. 위 층의 규칙은 하나도 지우지 않고 덮어쓰기만 한다. 건드리지 않는 것: .a4 인쇄 서식(전부 .tblwrap 밖이라 닿지 않는다), .side-nav(상태 저장소), 모든 ID. ① 선택 행이 보이게 ② 열 너비 재배분 ③ 담당자 필터 시 담당 열 접기 ④ 툴바 한 줄 ⑤ 조밀 보기 [data-dense="1"] ⑥ 고정 머리글 · 키보드 포커스 ============================================================ */ /* ── ⓪ 새 토큰: 선택 행 (밝음 / OS다크 / 수동다크 세 곳 모두) ── */ /* ── ① 선택된 행 — 색 + 왼쪽 3px 막대 + 상호 굵게 (227행보다 뒤라 이긴다) ── */ tr.row.sel td{background:var(--sel)} tr.row.sel:hover td{background:var(--sel)} tr.row.sel td:first-child{box-shadow:inset 3px 0 0 0 var(--sel-line)} tr.row.sel td.name{font-weight:700;color:var(--ink)} /* 같은 표시를 쓰는 다른 목록에도 (결재 항목 · 통계 타일은 원래 규칙 유지) */ .appr-item.sel{background:var(--sel)} /* ── ⑥-a 고정 머리글: 흰 행과 확실히 갈라 놓는다 ── */ .tblwrap table thead th{background:var(--panel2); } /* ── ⑥-b 표 자체에 포커스가 들어가게 (JS 가 tabindex 를 준다) ── */ .tblwrap:focus{outline:none} .tblwrap:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0 0 14px 14px} /* ── ② 거래처 표 열 너비 재배분 ─────────────────────────────── :has 로 이 표만 고른다 — #view-clients 안에는 #detail 이 그리는 표도 있어서 `#view-clients table` 로 잡으면 그것들까지 망가진다. 열을 추가·삭제하면 1432행 thead 와 여기 nth-child 를 같이 고칠 것. */ table:has(>tbody#rows)>thead th:nth-child(2),#rows>tr>td:nth-child(2){width:86px} table:has(>tbody#rows)>thead th:nth-child(3),#rows>tr>td:nth-child(3){width:64px} table:has(>tbody#rows)>thead th:nth-child(4),#rows>tr>td:nth-child(4){width:104px} table:has(>tbody#rows)>thead th:nth-child(5),#rows>tr>td:nth-child(5){width:58px;text-align:center} table:has(>tbody#rows)>thead th:nth-child(6),#rows>tr>td:nth-child(6){width:96px} table:has(>tbody#rows)>thead th:nth-child(1),#rows>tr>td:nth-child(1){width:auto} #rows>tr>td.name{max-width:none} /* ── ③ 담당자 필터가 걸리면 '담당' 열을 접는다 (220행 .tier-hide 와 같은 방식) ── */ table.owner-hide>thead th:nth-child(4),table.owner-hide>tbody#rows>tr>td:nth-child(4){display:none} /* ── 하단 상태 띠의 '조밀' 스위치 (#thm 옆, .sb-r 은 다시 그려지지 않는 자리) ── */ #statusbar .sb-dense{display:inline-flex;align-items:center;gap:5px;cursor:pointer; border:1px solid var(--line);background:var(--panel);color:var(--mute);font-weight:600;line-height:1.3;padding:4px 9px;border-radius:var(--r-ctl)} #statusbar .sb-dense:hover{color:var(--ink);border-color:var(--line2)} #statusbar .sb-dense.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)} #statusbar .sb-dense svg{display:block} @media print{ #statusbar .sb-dense{display:none!important} } /* ============================================================ 2026-09-16 · 10차 · 접근성과 마감 품질 (WCAG 2.2 AA) 앞 층을 하나도 지우지 않는다. 되돌리려면 이 블록만 지우면 된다. 괄호 안 숫자는 실제로 계산한 명암비다(작은 글자는 4.5:1, 테두리·그래픽은 3:1 필요). 확인한 것: --mute 는 흰 5.05 / --panel2 4.70 / --bg 4.58, 다크 5.88 / 5.33 로 전부 통과한다. .a4 인쇄 서식(흰 바탕·검은 글씨)에는 여기 어떤 규칙도 닿지 않는다 — 아래 선택자를 .wrap·dialog·#login·#statusbar·.topbar·#subnav 안으로만 한정했고, 서식 셀은 var() 색을 쓰지 않는다. ============================================================ */ /* ── ① 담당자 아바타(.av, 99행 color:#fff) 바탕 5색이 전부 흰 글자와 AA 미달 ── 실측: --o1 3.71 · --o2 3.03 · --o3 4.23 · --o4 3.08 · --o5 3.70 2039행 av() 가 style="background:var(--oN)" 로 그리므로 토큰만 바꾸면 JS 수정이 없다. */ /* 흰 글자 대비 → 5.41 · 5.47 · 7.11 · 5.89 · 7.12 */ /* ── ② --bad · --accent 를 '작은 글자 색'으로 쓴 곳 → -ink 값으로 (3.26~3.71 → 4.6 이상) 4차 층 934행이 .pill 류만 바꿔 놓아 인라인 style 과 아래 선택자가 남아 있었다. ── */ #login-msg,.chk.late,.at-loc.no{color:var(--bad-ink)} .gs-out .gs-tag{color:var(--accent-ink)} /* 3.31 → 5.41 */ :where(.wrap,dialog,#login,#statusbar,.topbar,#subnav) [style*="color:var(--bad)"]{color:var(--bad-ink)!important} :where(.wrap,dialog,#login,#statusbar,.topbar,#subnav) [style*="color:var(--accent)"]{color:var(--accent-ink)!important} /* hover 로 바탕이 --accent-soft 가 되면 --mute 가 4.49:1 로 반 칸 모자란다 → --ink2 (7.4:1) */ .gs-out div.on span,.gs-out div:hover span,.todo-it:hover .num small{color:var(--ink2)} /* ── ③ 포커스 표시 ────────────────────────────────────────── 전역 링은 57행에 있지만 (a) 스크롤 상자 안에서 잘리고 (b) 739·387행이 outline 을 지웠다. */ /* 잘리는 상자 안에서는 안쪽으로 그린다 (#subnav·#statusbar·표·검색결과·자료함 목록) */ #subnav :focus-visible, #statusbar :focus-visible, .tblwrap :focus-visible, .gs-out :focus-visible, .bz-out :focus-visible, .dv-list :focus-visible, .side :focus-visible {outline-offset:-2px} /* 지워 둔 두 입력칸을 되살린다 */ .gsearch input:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} /* 키보드로 갈 수 있게 만든 '줄'들이 눈에 띄게 (아래 JS ①과 짝) */ tr:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px} tr:focus-visible>td{background:var(--accent-soft)} .todo-it:focus-visible,#statusbar .sb-it:focus-visible, .owner:focus-visible,.appr-item:focus-visible,.gs-out div:focus-visible{background:var(--accent-soft)} [role="button"]{-webkit-tap-highlight-color:transparent} /* ── ④ 색만으로 뜻을 전하던 곳에 모양·글자를 더한다 ── */ .dot{width:10px;height:10px;box-sizing:border-box;border:2px solid var(--line2);background:transparent} .dot.on{background:var(--ok);border-color:var(--ok);border-radius:50%} .dot.wait{background:var(--warn);border-color:var(--warn);border-radius:2px;transform:rotate(45deg)} /* 마름모 */ .status span:has(.dot.on)::after{content:" 정상";color:var(--ok)} .status span:has(.dot.wait)::after{content:" 연결 중";color:var(--warn)} .status span:has(.dot:not(.on):not(.wait))::after{content:" 끊김";color:var(--bad-ink);font-weight:700} .at-today td:first-child::after,.cd.today .d::after{content:" 오늘";font-weight:700;color:var(--accent-ink)} /* ── ⑤ 터치 목표 (WCAG 2.2 2.5.8 = 24×24 최소) ── 지금: .seg 23.6 · .chipf 23.6 · .evitem .act 21.6 · #thm 23.0 · .dv-it .x 약 15×10 */ .seg button, #thm button, .evitem .act button {min-height:26px} .evitem .act button{padding-inline:9px} .dv-it .x{min-width:28px;min-height:28px;border-radius:var(--r-ctl);display:inline-grid;place-items:center} .dv-it .x:hover{background:var(--bad-soft);color:var(--bad-ink)} @media (pointer:coarse){ /* 손가락(태블릿·터치 노트북)에서는 44px. 단 표 안의 .chk 는 44 로 키우면 옆 칸을 잘못 눌러 구글 시트에 그대로 저장되므로 34px 까지만 키운다. */ .btn.sm, .seg button, #thm button, .evitem .act button {min-height:44px} .dv-it .x{min-width:44px;min-height:44px} .chk{width:34px;height:34px} } /* ── ⑥ 움직임: 값 통일 + '동작 줄이기' 존중 ── */ .btn,.stat,.owner,.todo-it,.gsearch input, #topnav button,#subnav button,#statusbar .sb-it,.side-nav .tabs button{ transition-duration:.12s;transition-timing-function:ease-out} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} .owner:hover{transform:none} .stat:hover{box-shadow:none} } /* ── ⑦ 다이얼로그: 내용이 길어도 '닫기'(.dh)와 '저장'(.df)이 항상 보이게 ── 구조가 전부 >.dh · >form.db|div.db · >.df 로 통일돼 있어 sticky 만으로 충분하다. */ dialog{max-height:min(88dvh,calc(100dvh - 24px))} dialog>.dh{position:sticky;top:0;z-index:2;background:var(--panel)} dialog>.df{position:sticky;bottom:0;z-index:2;background:var(--panel)} @media (max-width:900px){ dialog{max-height:min(92dvh,calc(100dvh - 12px))} } /* ── ⑧ 스크롤바 두 겹·기준선 흔들림 ── (a) 화면을 바꿀 때마다 세로 스크롤바가 붙었다 떨어지며 8차의 기준선 계산(100%)이 흔들렸다. */ html{scrollbar-gutter:stable} /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 21번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 090f 110b */ .mo-table td.mo-name .sub{color:var(--mute);font-weight:400;margin-top:1px} .mo-table .mo-tot{font-weight:700;background:var(--panel2)} .mo-table td.na{color:var(--line2)} .mo-table td.neg{color:var(--bad-ink)} .mo-table tbody tr{cursor:pointer} .mo-table tbody tr:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px} .mo-table tfoot th{position:sticky;bottom:0;background:var(--panel2);border-top:1px solid var(--line2);padding:8px 10px;font-size:12.5px} .mo-mini{font-size:12px;border-collapse:collapse} .mo-mini th,.mo-mini td{padding:3px 6px;border-bottom:1px solid var(--line)} .mo-mini thead th{color:var(--mute);font-weight:600;} .mo-mini tbody th{text-align:left;color:var(--ink2);font-weight:600} .mo-mini{width:100%} .mo-mini th.num,.mo-mini td.num{text-align:right;font-variant-numeric:tabular-nums} .mo-mini td.na{color:var(--line2)} .mo-mini td.tot{font-weight:700} .mo-mini td.neg{color:var(--bad-ink)} .mo-mini tfoot th,.mo-mini tfoot td{border-top:2px solid var(--line2);border-bottom:0} .rpt-lh{text-align:center;border-bottom:2.5px solid var(--ink);padding-bottom:12px} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 22번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 070c 070h 090d 090em 090g */ .detail-head{align-items:center} @media (max-width:900px){ .stat .v,#view-main #stats .stat .v{font-size:var(--fs-6)} .mdrawer-box .detail-head h3{font-size:var(--fs-5)} } @media (max-width:480px){ .stat .v,#view-main #stats .stat .v{font-size:var(--fs-6)} } /* ── ⑫ A4 인쇄 서식(.a4)은 이 층이 닿지 않게 못을 박는다 ─────── 595~619행의 pt 단위·흰 바탕 규칙을 그대로 지킨다. */ .a4{letter-spacing:normal;line-height:1.45} .a4 td,.a4 th{font-weight:400;font-size:inherit;line-height:inherit} .a4 table.xl td{font-size:13px;line-height:1.25;font-weight:inherit} @media (min-width:901px){ /* ⑤ 비활성 단추가 opacity .5 로 라벨이 사라지던 것(출퇴근 1.9:1) → 흐리되 읽히게 */ /* ⑦ 직원 홈(결재 카드 없음)의 왼쪽 구멍 → 소식을 왼쪽 열로 올린다 */ #view-main .main-grid:has(>.card:nth-child(2).hidden){grid-template-areas:"todo ev" "news cal" "queue queue"} #view-main .main-grid:has(>.card:nth-child(2).hidden):has(>#queue-card.hidden){grid-template-areas:"todo ev" "news cal"} } @media (min-width:1500px){ #view-main .main-grid:has(>.card:nth-child(2).hidden){grid-template-areas:"todo ev news" "queue cal news"} #view-main .main-grid:has(>.card:nth-child(2).hidden):has(>#queue-card.hidden){grid-template-areas:"todo ev news" "todo cal news"} } /* 14차 · 2026-09-17 · 메일 쓰기 · 월별 매출·매입 */ #dlg-mailsend input:not([type=file]),#dlg-mailsend textarea{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line2);border-radius:10px;color:var(--ink);padding:8px 10px;min-height:38px;font-size:14px;font-family:inherit} #dlg-mailsend textarea{resize:vertical;line-height:1.55} #dlg-mailsend input:focus,#dlg-mailsend textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)} #dlg-mailsend .ms-sub{font-weight:400;color:var(--mute);margin-left:4px} #dlg-mailsend .ms-from{font-size:12.5px;color:var(--mute);padding:8px 10px;background:var(--bg);border-radius:var(--r-inner)} /* === 15차 · 2026-09-17 · 일정 + 할 일 병합 달력 =================================== */ .cal-layers{margin:0} .cal-layers button.on[data-l="t"]{color:var(--ok)} /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 23번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 080d 100f */ /* (b) AI 세무비서 .chat(425행) 이 상단 바 56 + 소메뉴 52 + 본문 여백 20 = 128 을 빼지 않아 아래 24px 가 #statusbar(46px) 밑으로 들어가고 페이지 스크롤바가 하나 더 생겼다. */ /* 출퇴근 지각·조퇴 표시 (기준 10:00~17:30) */ .at-flag{margin-left:5px;font-weight:700;padding:1px 5px;border-radius:5px;vertical-align:1px} .at-flag.late{background:var(--warn-soft);color:var(--warn)} .at-flag.early{background:var(--bad-soft);color:var(--bad-ink,var(--bad))} /* ===== 2026-09-18 · 20차 · 출·퇴근 2차(주간 막대바 · 연차/반차 신청·승인) ===== */ .at-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.8fr);gap:12px;align-items:start;margin-bottom:12px} @media (max-width:1100px){ .at-top{grid-template-columns:1fr 1fr} .at-top .at-now{grid-column:1/-1} } @media (max-width:760px){ .at-top{grid-template-columns:1fr} } .at-week {padding:16px 18px} .at-week .detail-head {margin-bottom:10px} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 24번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 14개: 080e 080g 090a 090b 090c 090e 090g 090i 090k 100b 120d */ /* === 11차 · 2026-09-17 · 점검 반영 ========================================= 실측으로 잡힌 것만 고친다. 앞 층을 지우지 않고 마지막에 덮는다. 되돌리기: 이 블록만 삭제. */ /* ①-1 하단 상태 띠(46px)가 본문 끝을 가렸다. 1236행 `main.wrap{padding-bottom:16px}`(≥1001px)가 784행 78px 를 특정도로 이겨, 표의 마지막 행·가로 스크롤바·카드 맨 아래 단추가 띠 뒤에 숨었다. */ /* ①-2 기한·일정 날짜가 원색 빨강/파랑이라 12~13px 에서 3.7:1 (AA 4.5:1 미달). 4차가 만들어 둔 -ink 토큰을 쓴다. */ .cal .d,.evitem .t,.cd.today .d,.flag{color:var(--bad-ink)} .cd .ev.m {color:var(--accent-ink)} /* ①-7 요율이 올해 것이 아닐 때의 경고 줄 (기능 ⑧ insWarn) */ /* ①-8 거래처 현황의 '폐업·해지' 칩 (시트에서 빠진 곳을 지우지 않고 보관한 것) */ /* === 결재 자동 분류 (2026-09-17) === '평소와 같은 건' 과 '자세히 볼 것' 을 한눈에. 색은 의미색만 쓰고 강조색(파랑)은 쓰지 않는다. */ .tri-sum{color:var(--mute)} .tri-sum b{color:var(--ink);font-weight:600} @media (max-width:900px){ } /* 12차 · 숫자 배지 스위치 — html[data-nobadge="1"] 이면 메뉴의 빨간 숫자를 전부 감춘다 */ html[data-nobadge="1"] .side-nav .tabs button[data-badge]::after, html[data-nobadge="1"] #topnav button[data-badge]::before, html[data-nobadge="1"] #subnav button[data-badge]::after, html[data-nobadge="1"] .mnav button[data-badge]::after{display:none} #statusbar .sb-badge,.mdrawer-foot .sb-badge{display:inline-flex;align-items:center;gap:5px;cursor:pointer; border:1px solid var(--line);background:var(--panel);color:var(--mute); font-size:12px;font-weight:600;line-height:1.3;padding:4px 9px;border-radius:var(--r-ctl)} #statusbar .sb-badge:hover,.mdrawer-foot .sb-badge:hover{color:var(--ink);border-color:var(--line2)} #statusbar .sb-badge.on,.mdrawer-foot .sb-badge.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)} .sb-badge svg{display:block} .sb-badge i{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 4px;border-radius:999px;font-style:normal;font-weight:700;line-height:1} .sb-badge:not(.on) i{background:var(--mute);text-decoration:line-through} .mdrawer-foot .sb-badge{margin-right:auto} @media print{ .sb-badge{display:none!important} } /* === 13차 · 2026-09-17 · 디자인 점검 반영 (검토 4갈래 → 반증 검증 → 확정 18건) =============== 되돌리려면 이 블록만 지운다. 번호는 CLAUDE.md 4-37 의 표와 같다. */ /* ① 상단 큰 탭의 빨간 배지가 '홈' 글자를 덮던 것 → 글자 오른쪽 바깥, 세로 가운데 */ #topnav button[data-badge]{padding-right:30px} #topnav button[data-badge]::before{top:50%;right:6px;transform:translateY(-50%)} /* ② 한글 낱말·시각이 글자 단위로 쪼개지던 것 — 낱말 단위로만 접고, 넘칠 때만 아무 데서나 */ body{word-break:keep-all;overflow-wrap:break-word} /* 2026-09-18: anywhere 는 최소 폭까지 한 글자로 만들어 단추가 세로로 쪼개졌다 */ .td-by-s, .ev-task-k {white-space:nowrap} .stat .s{word-break:keep-all} @media (max-width:900px){ #view-main #stats .stat .s{letter-spacing:-.01em} } @media (max-width:1000px){ /* ③ 휴대폰 거래처 현황이 686px 로 넘치던 것: 1fr 이 표의 최소 폭(nowrap 셀)까지 늘어났다 → minmax(0,1fr) 로 묶고 표는 안에서만 가로 스크롤 */ #view-clients .office{grid-template-columns:minmax(0,1fr)} #view-clients .office>*{min-width:0} } @media (max-width:900px){ .tblwrap{max-width:100%;overflow-x:auto} } /* ④ 달력의 기한 칩이 --mute 11px 한 줄 말줄임이라 읽히지 않던 것 → 본문색·두 줄까지 */ .cd .ev.k{color:var(--ink2);border-color:var(--line2);white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ⑨ 할 일 입력칸이 브라우저 기본 모양(검은 1px·4px 모서리, 다크에서 회색 상자)이던 것 */ /* ⑩ 다크모드 '미완료 | 전체' 선택 알약이 상자와 구분되지 않던 것 */ :root[data-theme="dark"] .seg.tier button.on{background:#2C323C;color:var(--ink);box-shadow:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .seg.tier button.on{background:#2C323C;color:var(--ink);box-shadow:none} } /* ⑪ 표 머리글 그림자가 셀마다 따로 그려져 톱니처럼 보이던 것 → 선 하나 */ .tblwrap table thead th,:root[data-theme="dark"] .tblwrap table thead th,:root:not([data-theme="light"]) .tblwrap table thead th{box-shadow:inset 0 -1px 0 var(--line2)} /* ⑥ 미수 화면 '기장료 등록 현황' 카드에 안쪽 여백이 없어 제목이 테두리에 붙던 것(.card 는 padding 0) */ /* ⑫ hidden 속성이 .btn 의 display 에 져서 '0건 한 번에 승인' 이 보이던 것 */ [hidden]{display:none!important} #dlg-mailsend .field{margin-top:10px} #dlg-mailsend .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:4px} #dlg-mailsend .pill button{border:0;background:transparent;color:var(--mute);font-size:13px;cursor:pointer;padding:0 2px} @media (max-width:900px){ #view-monthly .wht-head select,#view-monthly .wht-head input{flex:1 1 44%} #view-monthly .wht-head #mo-meta{display:none} } /* 로그인 · 아이디 저장 (2026-09-17) */ .login-box .login-remember{justify-content:flex-start;font-size:12.5px;color:var(--ink2);margin:-4px 0 8px;width:auto} .cd .d{display:flex;align-items:center;gap:6px} .cd .d .cnt{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--accent-fill);color:#fff;font-style:normal;font-weight:700;font-family:inherit} .cd .ev.t{background:var(--ok-soft);color:var(--ink2);border-left:3px solid var(--ok);padding-left:4px} .cd .ev.a{background:var(--warn-soft);color:var(--ink2);border-left:3px solid var(--warn);padding-left:4px} .cd .ev.ask{background:var(--bad-soft);color:var(--bad-ink);border-left:3px solid var(--bad);padding-left:4px;font-weight:600} .cd .ev.more{background:transparent;color:var(--mute);text-align:center} .cd .ev.done{text-decoration:line-through;opacity:.55} #dlg-pass .db input, #dlg-pin .db input {width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line2);border-radius:10px;color:var(--ink);padding:8px 10px;min-height:38px;font-size:14px;font-family:inherit} #dlg-pass .field, #dlg-pin .field {margin-top:10px} #dlg-pass .field label, #dlg-pin .field label {display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:4px} @media (max-width:900px){ /* 휴대폰 달력: 날짜 숫자·칩이 글자 단위로 쪼개지던 것 */ .cd{min-height:64px;padding:4px} .cd .d{white-space:nowrap;gap:3px;} .cd .d .cnt{min-width:13px;height:13px;padding:0 2px} .cd .ev,.cd .ev.k{white-space:nowrap;display:block;-webkit-line-clamp:unset;-webkit-box-orient:unset;overflow:hidden;text-overflow:ellipsis;padding:0 3px} } #dlg-faxsend .eyebrow{margin-top:10px} #an-print .rp-head{border-color:#000} #an-print .rp-flag{background:#eee;color:#000} @media(max-width:900px){ .rp-doc{max-height:none} } /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 25번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 100f 150n */ .at-wbar{height:10px;border-radius:999px;background:var(--line);overflow:hidden} .at-wbar.sm{height:7px;margin:8px 0 6px} .at-wbar>i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s} .at-wnum{display:flex;align-items:baseline;gap:8px;margin:8px 0 10px;color:var(--mute);flex-wrap:wrap} .at-wnum>b.num{color:var(--ink)} .at-wnum>b:last-child{margin-left:auto;color:var(--accent-ink);} .at-wdays{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px} .at-wdays>div{display:flex;flex-direction:column;align-items:center;gap:4px} .at-wdays .d{color:var(--mute)} .at-wdays>div.now .d{color:var(--accent-ink);font-weight:700} .at-wdays .b{width:100%;height:46px;background:var(--line);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden} .at-wdays .b>u{width:100%;background:var(--accent);border-radius:6px;text-decoration:none} .at-wdays .b.hol{background:repeating-linear-gradient(45deg,var(--line),var(--line) 4px,transparent 4px,transparent 8px)} .at-wdays .b.lv>u,.at-wdays .b.lv{background:var(--accent-soft)} .at-wdays .t{color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap} .at-lvnum{display:flex;gap:14px} .at-lvnum>div{flex:1;min-width:0} .at-lvnum .k{display:block;color:var(--mute)} .at-lvnum b.num{font-size:22px;font-weight:700} .at-lvnum .hi b.num{color:var(--accent-ink)} .at-flag.lv{background:var(--accent-soft);color:var(--accent-ink);margin-right:6px} #at-tabs{margin-left:4px} .at-panel .tblwrap{max-height:calc(100vh - 520px)} @media (max-width:900px){ .at-panel .tblwrap{max-height:none} } #dlg-leave .db textarea{width:100%;min-height:72px} #dlg-hr .db .grid2{gap:8px 12px} /* ===== 2026-09-18 · 21차 · 홈 간결화(채팅 축소 · 인사말 한 줄) ===== */ #view-main #hero-date{color:var(--mute);} /* ===== 2026-09-18 · 22차 · 재택근무일 · 반경 밖 경고 ===== */ .at-flag.wfh{background:#E7F3EA;margin-right:6px} :root[data-theme="dark"] .at-flag.wfh{background:rgba(16,150,90,.22);color:#6EE7A8} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .at-flag.wfh{background:rgba(16,150,90,.22);color:#6EE7A8} } .at-loc-act{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap} .at-big.at-blocked{opacity:1;background:var(--bad-soft);color:var(--bad-ink);box-shadow:inset 0 0 0 1px var(--bad-ink)} .at-big.at-blocked:hover{filter:brightness(.98)} #dlg-wfh .db .tblwrap{border:1px solid var(--line);border-radius:10px;margin-top:6px} @media (max-width:760px){ .at-loc-act{margin-left:0;width:100%} .at-loc-act .btn{flex:1} } /* ── 43차-g · 근태 (지시 9) ─────────────────────────────────────────────── */ #view-attend .at-top{margin-bottom:var(--sp5)} /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 26번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 5개: 090f 110b 120c 120e 150em */ .mo-table th.mo-num,.mo-table td.mo-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .mo-table td.mo-name{min-width:180px} .rpt-lh .mk{color:var(--ink);margin:0 auto 6px} .rpt-lh .mk svg{display:block;margin:0 auto} .rpt-lh .nm{font-size:16px;font-weight:800;letter-spacing:1px} .rpt-lh .ad{font-size:11.5px;color:var(--mute);margin-top:3px;letter-spacing:.2px} .rpt-lh .sep{width:34px;height:1px;background:var(--line);margin:11px auto 0} .rpt-ttl{font-size:21px;font-weight:800;margin:13px 0 6px;letter-spacing:-.4px} .rpt-lh .rpt-to span{font-weight:500;color:var(--mute);font-size:12.5px} .rpt-to{font-size:14px;font-weight:700} .rpt-meta{font-size:11.5px;color:var(--mute);margin-top:3px} .rpt-sec{font-size:14px;font-weight:800;margin:18px 0 8px;padding-bottom:5px;border-bottom:1.5px solid var(--ink)} .rpt-sec small{display:block;font-size:11px;font-weight:400;color:var(--mute);margin-top:3px} .rpt-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 4px} .rpt-kpi>div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0} .rpt-kpi>div.hi{border-color:var(--accent);background:var(--accent-soft)} .rpt-kpi .k{font-size:11px;color:var(--mute)} .rpt-kpi .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;margin:2px 0 1px} .rpt-kpi>div.hi .v{color:var(--accent-ink)} .rpt-kpi .s{font-size:11.5px;color:var(--mute)} .rpt-box{border:1px solid var(--line);border-left:4px solid var(--mute);border-radius:var(--r-inner);padding:10px 13px;margin:12px 0} .rpt-box .t{font-weight:800;font-size:12.5px;margin-bottom:3px} .rpt-box .b{font-size:12px;line-height:1.6} .rpt-box.warn{border-left-color:var(--bad-ink);background:var(--bad-soft)} .rpt-box.warn .t{color:var(--bad-ink)} .rpt-box.info{border-left-color:var(--accent);background:var(--accent-soft)} .rpt-box.info .t{color:var(--accent-ink)} .rpt-box.ok{border-left-color:#0B7A47;background:rgba(16,150,90,.08)} .rpt-box.ok .t{color:#0B7A47} .rpt-box .rpt-ul{margin:4px 0 0 16px;padding:0} .rpt-tb .dot.c1{background:var(--accent)} .rpt-tb .dot.c2{background:#7BA7F0} .rpt-tb .dot.c3{background:#9DBDF3} .rpt-tb{width:100%;border-collapse:collapse;font-size:12px;margin:6px 0} .rpt-tb th,.rpt-tb td{padding:5px 7px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} .rpt-tb thead th,.rpt-tb tr:first-child th{color:var(--mute);font-size:11px;font-weight:700;background:var(--bg)} .rpt-tb .num{text-align:right;font-variant-numeric:tabular-nums} .rpt-tb .pct{color:var(--mute);width:58px} .rpt-tb .neg{color:var(--bad-ink)} .rpt-tb .mute{color:var(--mute)} .rpt-tb tr.sum th,.rpt-tb tr.sum td{border-top:1.5px solid var(--ink);border-bottom:0;font-weight:800;background:var(--bg)} .rpt-tb tr.cur td{background:var(--accent-soft);font-weight:700} .rpt-tb tr.est td{color:var(--mute)} .rpt-tb.tight th,.rpt-tb.tight td{padding:3px 7px;border:0} .rpt-tb .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0} .rpt-ladder{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0} .rpt-ladder td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top} .rpt-ladder .sg{width:22px;text-align:center;color:var(--mute);font-weight:800} .rpt-ladder .k{font-weight:700} .rpt-ladder .sb{font-size:11.5px;color:var(--mute);font-weight:400;margin-top:1px;white-space:normal} .rpt-ladder .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600} .rpt-ladder tr.rpt-st td{border-top:1.5px solid var(--ink);border-bottom:0;background:var(--accent-soft)} .rpt-ladder tr.rpt-st .k,.rpt-ladder tr.rpt-st .num{font-weight:800;color:var(--accent-ink)} .rpt-ul{margin:6px 0 0 17px;padding:0;font-size:12px;line-height:1.65} .rpt-foot{margin-top:18px;padding-top:11px;border-top:1.5px solid var(--ink)} .rpt-foot .th{font-weight:800;font-size:13px} .rpt-foot .of{margin-top:5px;font-size:12px;font-weight:700} .rpt-foot .dis{margin-top:7px;font-size:10px;color:var(--mute);line-height:1.5} @media (max-width:760px){ .rpt-kpi{grid-template-columns:1fr 1fr} } /* 인쇄(A4) — 흰 바탕·검은 글씨 고정 */ #an-print .rpt{color:#000;font-size:10pt} #an-print .rpt-lh,#an-print .rpt-sec,#an-print .rpt-foot,#an-print .rpt-ladder tr.rpt-st td,#an-print .rpt-tb tr.sum th,#an-print .rpt-tb tr.sum td{border-color:#000} #an-print .rpt-lh .ad,#an-print .rpt-lh .dt,#an-print .rpt-meta,#an-print .rpt-sec small,#an-print .rpt-kpi .k,#an-print .rpt-kpi .s,#an-print .rpt-tb thead th,#an-print .rpt-tb tr:first-child th,#an-print .rpt-tb .pct,#an-print .rpt-ladder .sb,#an-print .rpt-foot .dis,#an-print .rpt-tb .mute,#an-print .rpt-tb tr.est td{color:#555} #an-print .rpt-kpi>div,#an-print .rpt-box,#an-print .rpt-tb th,#an-print .rpt-tb td,#an-print .rpt-ladder td{border-color:#bbb} #an-print .rpt-kpi>div.hi,#an-print .rpt-ladder tr.rpt-st td,#an-print .rpt-tb tr.cur td{background:#eef3fd} #an-print .rpt-box.warn{background:#fdeeee} #an-print .rpt-box.info{background:#eef3fd} #an-print .rpt-box.ok{background:#eef7f1} #an-print .rpt-tb thead th,#an-print .rpt-tb tr:first-child th,#an-print .rpt-tb tr.sum th,#an-print .rpt-tb tr.sum td{background:#f3f4f6} #an-print .rpt-tb .dot.c2{background:#7BA7F0} #an-print .rpt-tb .dot.c3{background:#9DBDF3} #an-print .rpt-sec{break-after:avoid;page-break-after:avoid} #an-print .rpt-tb,#an-print .rpt-ladder,#an-print .rpt-kpi,#an-print .rpt-box{break-inside:avoid;page-break-inside:avoid} /* ===== 2026-09-18 · 30차 · 보고서 그래프(도넛·월별 막대) ===== */ .rpt-dn{display:flex;align-items:center;gap:14px} .rpt-dn svg{width:120px;height:120px;flex:0 0 120px} .rpt-dn .bgring{stroke:var(--line)} .rpt-dn path.c1{fill:var(--accent)} .rpt-dn path.c2{fill:#7BA7F0} .rpt-dn path.c3{fill:#9DBDF3} .rpt-dn path.c4{fill:#E8B04B} .rpt-dn path.c5{fill:#C9D6E8} .rpt-tb .dot.c4{background:#E8B04B} .rpt-tb .dot.c5{background:#C9D6E8} .rpt-dn text.ct{text-anchor:middle;font-size:17px;font-weight:800;fill:var(--ink)} .rpt-dn text.cs{text-anchor:middle;font-size:9px;fill:var(--mute)} .rpt-dn table{flex:1 1 auto;min-width:0;max-width:430px} .rpt-dn2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 4px} .rpt-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0} .rpt-card .ct{font-size:12px;font-weight:700;margin-bottom:6px} .rpt-card .rpt-box{margin:0} .rpt-cols{margin:8px 0 6px} .rpt-cols svg{width:100%;height:auto;display:block} .rpt-cols rect.a{fill:var(--accent)} .rpt-cols rect.est{opacity:.42} .rpt-cols line.ax{stroke:var(--line);stroke-width:1} .rpt-cols line.gd{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3} .rpt-cols text.gt{font-size:9px;fill:var(--mute)} .rpt-cols text.xl{text-anchor:middle;font-size:10px;fill:var(--mute)} .rpt-cols text.xl.cur{fill:var(--ink);font-weight:700} .rpt-cols .lg{display:flex;gap:14px;font-size:11.5px;color:var(--mute);margin-top:2px;flex-wrap:wrap} .rpt-cols .lg .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px} .rpt-cols .lg .dot.a{background:var(--accent)} @media (max-width:760px){ .rpt-dn2{grid-template-columns:1fr} .rpt-dn{flex-direction:column;align-items:stretch} .rpt-dn svg{margin:0 auto} } /* 떠 있는 비서 단추에 '전체 보기' 가 가리지 않게 */ /* 오늘 할 일은 홈의 주인공 — 세 열일 때 두 줄을 차지하므로 안쪽도 넉넉하게 */ /* ── 보고서 쪽 나눔 ── */ .rpt-break{height:0} .rpt-cont{display:none;align-items:center;gap:8px;margin:0 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--ink);font-size:11.5px;color:var(--mute)} .rpt-cont .mk{display:inline-flex;width:16px;height:16px;color:var(--ink)} .rpt-cont .mk svg{width:16px;height:16px} .rpt-cont b{font-size:12.5px;color:var(--ink)} .rpt-cont i{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums} #an-print .rpt-cont{display:flex;border-color:#000} #an-print .rpt-cont b{color:#000} @media print{ #an-print .rpt-break{break-before:page;page-break-before:always;height:0} } /* 보고서 A4 두 장 맞추기 — 인쇄 상자 안에서만 여백을 줄인다(화면 보기는 그대로) */ #an-print .rpt-lh{padding-bottom:9px} #an-print .rpt-lh .mk svg{width:24px;height:24px} #an-print .rpt-lh .nm{font-size:14.5px} #an-print .rpt-lh .ad{font-size:9.5px;margin-top:2px} #an-print .rpt-lh .sep{margin-top:8px} #an-print .rpt-ttl{font-size:18.5px;margin:9px 0 5px} #an-print .rpt-kpi{margin:7px 0 3px;gap:6px} #an-print .rpt-kpi>div{padding:7px 9px} #an-print .rpt-box{margin:7px 0;padding:8px 11px} #an-print .rpt-tb th,#an-print .rpt-tb td{padding:3px 6px} /* 공용 td 의 nowrap 때문에 '2026년 2기 확정 (7~12월) 신고·납부' 가 옆 칸을 덮었다 — 글자 칸만 접히게 */ .rpt-tb td:not(.num),.rpt-tb th:not(.num){white-space:normal;word-break:keep-all} #an-print .rpt-dn svg{width:104px;height:104px;flex:0 0 104px} #an-print .rpt-dn2{gap:8px;margin:6px 0 2px} #an-print .rpt-card{padding:8px 10px} #an-print .rpt-cols svg{max-height:150px} #an-print .rpt-cols .lg{margin-top:0} #an-print .rpt-ul{margin:5px 0} #an-print .rpt-foot{margin-top:12px;padding-top:8px} #an-print .rpt-foot .dis{margin-top:5px;font-size:9px} #an-print .rpt-cont{margin-bottom:9px;padding-bottom:6px} .mo-mini thead th{font-size:12px!important} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 27번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 11개: 070h 090km 100c 100e 100g 110a 120b 120dm 130cm */ @media (max-width:900px){ .greet h1,#view-main .greet h1{font-size:var(--fs-6)} } /* 팩스 보내기 창 입력칸을 메일 쓰기 창과 같은 모양으로(인라인 style 을 이긴다) */ #dlg-faxsend input:not([type=file]){border-radius:10px;min-height:38px;font-size:14px!important;border:1px solid var(--line2)!important;background:var(--panel);color:var(--ink)} #dlg-faxsend input:not([type=file]):focus{border-color:var(--accent)!important;outline:none;box-shadow:0 0 0 3px var(--accent-soft)} /* ===== 2026-09-17 · 19차 · 홈 정리: 비서 채팅을 홈 맨 위로, 기장료 타일·소식 카드 제거(소식은 아래 한 줄 띠) ===== */ #view-main #stats{grid-auto-columns:minmax(0,1fr)} #view-main #stats .stat:nth-child(5){display:block} #view-main .news-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:12.5px} #view-main .news-strip.hidden{display:none} @media (max-width:900px){ #view-main .main-grid>.card{order:9} #view-main #stats{grid-template-columns:1fr 1fr} } /* ===== 2026-09-18 · 23차 · 비서 에이전트(잡고 있는 거래처 표시) ===== */ /* ===== 2026-09-18 · 24차 · 한눈 요약 문단 ===== */ /* ===== 2026-09-18 · 25차 · 홈 실용 정리: 비서가 인사말 바로 아래 · 숫자 띠 없음 · 카드 2열 ===== */ #view-main #stats.hidden,#view-main #season:empty{display:none} #view-main .greet{margin-bottom:10px} #view-main .main-grid{margin-top:0} @media (max-width:900px){ #view-main .greet{margin-bottom:8px} } #statusbar .sb-l:empty{display:none} /* ===== 2026-09-18 · 26차 · 인사말 상자 · 비서는 왼쪽(폭 줄임) · 오른쪽에 일정·기한 ===== */ #view-main .greet{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:0 0 12px;display:flex;flex-direction:column;gap:2px} #view-main .greet h1{margin:0} #view-main #hero-date{margin:0;font-size:13px} #view-main #hero-date b{color:var(--ink)} /* ===== 2026-09-18 · 26차-b · 인사말 왼쪽 정렬 · 오른쪽 열(일정·기한) 한 묶음 ===== */ #view-main .greet{align-items:flex-start;text-align:left} #view-main #side-col{flex-direction:column;gap:12px;min-width:0} #view-main #side-col>.card{margin:0} @media (min-width:901px){ #view-main #side-col{grid-area:side} } @media (min-width:1500px){ #view-main .main-grid:has(>#appr-card.hidden){grid-template-areas:"bot side" "todo todo" "queue queue"} #view-main .main-grid:has(>#queue-card.hidden){grid-template-areas:"bot side" "todo appr"} #view-main .main-grid:has(>#appr-card.hidden):has(>#queue-card.hidden){grid-template-areas:"bot side" "todo todo"} } @media (max-width:900px){ #view-main #side-col{order:3;} #view-main #ev-card{order:3} #view-main #cal-card{order:4} } /* ===== 2026-09-18 · 27차 · 채팅 딥러닝(피드백·복사·이어서 물어보기) ===== */ /* ===== 2026-09-18 · 28차 · 대화 맥락 안내 줄 ===== */ /* ===== 2026-09-18 · 29차 · 보고서 서식(사용자 제공 가결산 안내문 참고) ===== */ .rpt{color:var(--ink);font-size:13px;line-height:1.55} /* ── 홈: 비서가 빠진 자리를 다시 짠다 ── */ #view-main .greet{padding:16px 18px} #view-main .greet h1{font-size:20px;letter-spacing:-.4px} /* 홈 배치 — 19~26차에 쌓인 옛 규칙 40여 줄이 남아 있고 그중 `:has(>#queue-card.hidden)` 쪽은 특정도가 높아 이 층의 평범한 규칙을 이긴다. 옛 층을 건드리면 다른 화면이 흔들리므로 여기서는 !important 로 못을 박는다. 홈 배치를 바꿀 일이 있으면 **이 블록만** 고치면 된다. 카드는 오늘 할 일 · 일정 · 기한 · 결재 · 검수함 다섯이고, 결재(직원)·검수함(AI 꺼짐)은 숨을 수 있다. */ #view-main #side-col{display:contents!important} #view-main .main-grid>.card{padding:14px 16px} #view-main .main-grid>.card .detail-head{margin:0 0 10px;padding:0;border:0} #view-main .news-strip{margin-top:12px} /* 홈 · 이번 달 확인할 거래처 */ #check-mini .ck-sub{color:var(--mute);margin:-2px 0 8px} #check-mini .ck-all{margin-top:8px;width:100%;padding:7px;border:1px solid var(--line);border-radius:10px; background:none;font:inherit;color:var(--accent-ink);cursor:pointer} #check-mini .ck-all:hover{background:var(--bg)} /* ===== 2026-09-18 · 35차 · PHASE 2 · 홈 관제탑 ===== */ /* 오늘 처리할 업무 */ .tdy-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:2px 0 12px} .tdy{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:11px 12px;border:1px solid var(--line); border-radius:12px;background:var(--panel);cursor:pointer;font:inherit;text-align:left;min-width:0} .tdy:hover{background:var(--bg);border-color:var(--line2,var(--line))} .tdy:focus-visible{outline:2px solid var(--accent);outline-offset:1px} @media (max-width:900px){ .tdy-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} } /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 28번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 10개: 120d 120f 130a 130c */ #check-mini .empty.sm{color:var(--mute);padding:10px 0} /* ===== 2026-09-18 · 32차 · 남은 측정 결함 ===== */ /* 소식 '원문 보기' 링크가 45x20 이라 터치 기준(24px)에 못 미쳤다 */ #view-news a[target="_blank"],#view-amend a[target="_blank"]{display:inline-flex;align-items:center;min-height:28px;padding:2px 6px;margin:-2px -6px;border-radius:6px} #view-news a[target="_blank"]:hover,#view-amend a[target="_blank"]:hover{background:var(--bg)} /* 수임 동의 서식 체크박스 — 상자는 16px 이지만 누르는 자리는 라벨 전체가 되도록 */ #view-intake label.cb{padding:3px 2px;border-radius:var(--r-ctl)} #view-intake label.cb:hover{background:var(--bg)} /* ===== 2026-09-18 · 33차 · 글자가 세로로 쪼개지던 것 ===== body 의 overflow-wrap 을 anywhere → break-word 로 바꿨다(최소 폭을 지킨다). 긴 낱말·주소가 실제로 들어오는 곳에만 anywhere 를 돌려주고, 단추·알약처럼 절대 쪼개지면 안 되는 것은 줄바꿈을 막고 줄어들지 않게 한다. */ .bot-t td,.bot-t th,.rpt-tb td,.rpt-tb th,.kv dd,.card .memo,.detail .val{overflow-wrap:anywhere} /* 단추·알약·꼬리표는 쪼개지 않는다 */ .btn,.chip,.pill,.seg button,.tag button{overflow-wrap:normal;word-break:keep-all} /* 비서 창 머리 — 좁아지면 눌리지 말고 다음 줄로 */ /* 답 아래 줄(비서 · 출처 · 👍 👎 · 복사)도 좁으면 다음 줄로 */ .msg .tag{flex-wrap:wrap;row-gap:2px} .msg .tag>span:first-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (min-width:901px){ /* ===== 2026-09-18 · 34차 · PHASE 1 · 왼쪽 사이드바 + 헤더 ===== 상단 2단 메뉴(#topnav·#subnav)는 DOM 에 그대로 두고 데스크톱에서만 감춘다 (navPaint 가 계속 돌아야 하고, 휴대폰은 그대로 쓴다). */ .app{display:grid!important;grid-template-columns:minmax(0,1fr);align-items:start} /* 2026-10-15 왼쪽 메뉴 없앰 — 본문 한 칸 */ #topnav,#subnav{display:none!important} /* 2026-10-15 로고(.tn-logo)는 넓은 화면에서도 보임 = 홈 단추 */ #statusbar{left:var(--sbw);padding-left:20px;padding-right:20px} .topbar{padding-left:max(20px,calc((100% - var(--desk-maxw))/2 + 20px));padding-right:max(20px,calc((100% - var(--desk-maxw))/2 + 20px));gap:12px} .wrap{padding-left:20px;padding-right:20px;max-width:var(--desk-maxw);margin:0 auto} } @media (max-width:900px){ #sidebar{display:none!important} } #sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px; border-right:1px solid var(--line);padding:14px 12px 12px;overflow:hidden;z-index:41} #sidebar .sb-logo{display:flex;color:var(--ink);text-decoration:none;flex:1;min-width:0;overflow:hidden} #sidebar .sb-logo svg,#sidebar .sb-logo img{flex:none} #sidebar .sb-logo b{font-size:15px;font-weight:800;white-space:nowrap} #sidebar .thm{width:100%} /* 배지 */ html[data-nobadge="1"] #sidebar [data-badge]::after{display:none} /* 접힘 상태 — 아이콘만 + 툴팁 */ html[data-sb="mini"] #sidebar{padding-left:8px;padding-right:8px} html[data-sb="mini"] #sidebar .sb-logo b, html[data-sb="mini"] #sidebar .lb, html[data-sb="mini"] #sidebar .ar, html[data-sb="mini"] #sidebar .thm {display:none!important} /* 헤더 */ .sb-crumb{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mute);white-space:nowrap;min-width:0;overflow:hidden} .sb-crumb i{font-style:normal;color:var(--line2,var(--mute))} @media (max-width:900px){ .sb-crumb{display:none} } /* 알림 벨 */ .bell-wrap{position:relative;flex:none} #bell{display:grid;place-items:center;border:1px solid transparent;border-radius:10px; background:transparent;color:var(--mute);cursor:pointer;} #bell:hover{background:var(--bg);color:var(--ink)} #bell:focus-visible{outline:2px solid var(--accent);outline-offset:1px} #bell[data-badge]::after{content:attr(data-badge);position:absolute;} html[data-nobadge="1"] #bell::after{display:none} .bellbox{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 32px));z-index:70; background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden; box-shadow:0 14px 36px rgba(16,24,40,.16),0 1px 3px rgba(16,24,40,.08)} .bellbox .bb-h{font-weight:700;color:var(--mute);padding:11px 14px 7px} .bellbox .bb-empty{color:var(--mute);padding:4px 14px 14px} .bellbox .bb-row{display:flex;align-items:center;gap:9px;width:100%;padding:9px 14px;border:0;border-top:1px solid var(--line); background:transparent;font:inherit;color:var(--ink);cursor:pointer;text-align:left} .bellbox .bb-row:hover{background:var(--bg)} .bellbox .bb-row .g{flex:none;font-weight:700;color:var(--mute);background:var(--bg);border-radius:999px;padding:2px 7px} .bellbox .bb-row .t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bellbox .bb-row .go{flex:none;color:var(--mute)} /* 2026-10-15 사이드바가 빠져 넓어진 본문 — 아주 넓은 화면에서 가운데로(토큰 --desk-maxw) */ .tdy .n{font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)} .tdy .l{color:var(--mute);font-weight:600} .tdy .s{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .tdy.hot{border-color:var(--bad);background:var(--bad-soft,rgba(240,68,82,.06))} .tdy.hot .n{color:var(--bad-ink)} .tdy.zero .n{color:var(--mute)} #prog-mini .pg-bar i.ok{background:#10B981} #prog-mini .pg-bar i.mid{background:var(--accent)} #prog-mini .pg-bar i.low{background:#F59E0B} /* 결재 분류 요약 */ .tri-sum{margin:-2px 0 8px} .tri-3 .t{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border-radius:10px; background:var(--bg);color:var(--mute);font-weight:600} .tri-3 .t b{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} .tri-3 .t.warn b{color:var(--bad-ink)} #check-mini .ck-main .more{color:var(--mute);background:var(--bg);border-radius:999px;padding:1px 7px;flex:none} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 29번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 8개: 070h 130cm 130d 140a */ @media (max-width:900px){ /* ── ⑪ 휴대폰(≤900px) — 계단은 그대로, 제목만 한 단 낮춘다 ── */ h2,.wht-head h2{font-size:var(--fs-5)} h3,#view-main .main-grid .detail-head h3{font-size:var(--fs-body)} } /* 신고·자료 현황 */ #prog-mini .pg-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l n" "bar bar" "s s"; gap:3px 8px;width:100%;padding:9px 6px;border:0;border-bottom:1px solid var(--line);background:none; cursor:pointer;font:inherit;text-align:left} #prog-mini .pg-row:last-child{border-bottom:0} #prog-mini .pg-row:hover{background:var(--bg)} #prog-mini .pg-l{grid-area:l;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #prog-mini .pg-n{grid-area:n;display:flex;align-items:baseline;gap:6px;white-space:nowrap} #prog-mini .pg-n b{font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums} #prog-mini .pg-n i{font-style:normal;color:var(--mute);font-variant-numeric:tabular-nums} #prog-mini .pg-bar{grid-area:bar;height:5px;border-radius:999px;background:var(--line);overflow:hidden;display:block} #prog-mini .pg-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)} #prog-mini .pg-s{grid-area:s;color:var(--mute)} .tri-3{display:flex;gap:6px;cursor:pointer} /* 확인이 필요한 거래처 — 행동 단추 */ #check-mini .ck-row2{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line)} #check-mini .ck-row2:last-of-type{border-bottom:0} #check-mini .ck-main{flex:1 1 auto;min-width:0;padding:8px 6px; border:0;background:none;cursor:pointer;font:inherit;text-align:left;color:inherit;border-radius:var(--r-ctl)} #check-mini .ck-main:hover{background:var(--bg)} #check-mini .ck-act{flex:none;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-ctl); padding:4px 9px;font:inherit;color:var(--accent-ink);cursor:pointer;white-space:nowrap} #check-mini .ck-act:hover{background:var(--accent-soft)} /* 최근 움직임 */ #recent-mini .rc-row{display:flex;align-items:center;gap:8px;width:100%;padding:7px 6px;border:0; border-bottom:1px solid var(--line);background:none;cursor:pointer;font:inherit;text-align:left;color:inherit} #recent-mini .rc-row:last-child{border-bottom:0} #recent-mini .rc-row:hover{background:var(--bg)} @media (min-width:901px){ #view-main .main-grid:has(>#appr-card.hidden){grid-template-areas:"today today" "check check" "prog recent" "ev cal" "queue queue"!important} #view-main .main-grid:has(>#queue-card.hidden){grid-template-areas:"today today" "check check" "prog appr" "recent ev" "cal cal"!important} #view-main .main-grid:has(>#appr-card.hidden):has(>#queue-card.hidden){grid-template-areas:"today today" "check check" "prog recent" "ev cal"!important} } @media (min-width:1280px){ #view-main .main-grid:has(>#appr-card.hidden){grid-template-areas:"today today check" "prog recent recent" "ev cal queue"!important} #view-main .main-grid:has(>#queue-card.hidden){grid-template-areas:"today today check" "prog appr recent" "ev cal cal"!important} #view-main .main-grid:has(>#appr-card.hidden):has(>#queue-card.hidden){grid-template-areas:"today today check" "prog recent recent" "ev cal cal"!important} } /* ===== 2026-09-18 · 36차 · PHASE 4 · 거래처 360 ===== */ #view-c360{padding-top:14px} .c3-top{display:flex;align-items:center;gap:10px;margin-bottom:10px} .c3-crumb{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .c3-head{padding:16px 18px} .c3-h{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap} .c3-h-l{flex:1 1 320px;min-width:0} .c3-h h1{margin:0 0 6px;font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1.25} .c3-meta{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--ink2,var(--ink))} .c3-meta span{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap} .c3-meta i{font-style:normal;color:var(--mute)} .c3-h-r{display:flex;align-items:center;gap:6px;flex:none} .c3-st.on{background:rgba(16,185,129,.12);} .c3-st.off{background:rgba(240,68,82,.1);color:var(--bad-ink)} .c3-st.tier{background:var(--accent-soft);color:var(--accent-ink)} .c3-star{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:15px;cursor:pointer;line-height:1} .c3-star.on{border-color:#F59E0B;background:rgba(245,158,11,.1)} .c3-kpi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:10px 0 12px} .c3-k{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:10px 12px;min-width:0} .c3-k .l{color:var(--mute);font-weight:600} .c3-k .v{font-weight:800;margin:2px 0 1px;font-variant-numeric:tabular-nums; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .c3-k .s{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .c3-k.hot{border-color:var(--bad)} .c3-k.hot .v{color:var(--bad-ink)} @media (max-width:1280px){ .c3-kpi{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:640px){ .c3-kpi{grid-template-columns:repeat(2,minmax(0,1fr))} } .c3-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:12px; scrollbar-width:none} .c3-tabs::-webkit-scrollbar{display:none} .c3-tabs button{flex:none;border:0;background:none;padding:9px 13px;font:inherit;font-weight:600; color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap} .c3-tabs button:hover{color:var(--ink)} .c3-tabs button.on{color:var(--accent-ink);border-bottom-color:var(--accent)} .c3-tabs button:focus-visible{border-radius:6px} .c3-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start} .c3-grid.one{grid-template-columns:minmax(0,1fr)} @media (min-width:1500px){ .c3-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:900px){ .c3-grid{grid-template-columns:minmax(0,1fr)!important} } .c3-sec{padding:14px 16px;min-width:0} .c3-sec .detail-head{margin:0 0 10px;padding:0;border:0} .c3-sec h3{font-size:14.5px} .c3-now{list-style:none;margin:0;padding:0} .c3-now li{display:flex;align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid var(--line)} .c3-now li:last-child{border-bottom:0} .c3-now .i{flex:none;width:18px;height:18px;border-radius:999px;display:grid;place-items:center;font-weight:800;background:var(--bg);color:var(--mute)} .c3-now li.ok .i{background:rgba(16,185,129,.14);} .c3-now .t{flex:0 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .c3-now .s{flex:1 1 auto;min-width:0;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .c3-now .btn{flex:none} .c3-list{list-style:none;margin:0;padding:0} .c3-list li{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--line);} .c3-list li:last-child{border-bottom:0} .c3-list li>a,.c3-list li>button{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--accent-ink);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0;text-align:left} .c3-list li>a:hover,.c3-list li>button:hover{text-decoration:underline} .c3-list .s{flex:1 1 auto;min-width:0;text-align:right; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .c3-memo{margin:0;line-height:1.6;white-space:pre-wrap} .c3-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} .kv.tight dt{padding:5px 0} .kv.tight dd{padding:5px 0} /* ===== 2026-09-18 · 37차 · QA 수정 ===== */ /* 12 작은 클릭 영역 — 계측: '일정표' 47x22 · '저장 폴더 지정' 86x22 · 인건비 체크박스 16x16 */ .c3-tabs button,.chip{min-height:28px} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 30번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 130c 140b 150b */ #recent-mini .rc-row .g{flex:none;font-weight:700;color:var(--mute);background:var(--bg);border-radius:999px;padding:2px 7px} #recent-mini .rc-row .t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #recent-mini .rc-row .w{flex:none;color:var(--mute);white-space:nowrap} a.linkish,button.linkish{border:0;background:none;color:var(--accent-ink);font:inherit; cursor:pointer;text-decoration:underline;padding:4px 6px;min-height:26px;border-radius:6px} button.linkish:hover{background:var(--bg)} /* 15 모달 크기 3등급 — 작음 440(확인) · 보통 600(입력) · 큼 880(상세·첨부) */ dialog{max-width:600px} #dlg-ev, #dlg-pass, #dlg-leave, #dlg-wfh {max-width:min(96vw,600px)} #dlg-pin, #dlg-hr {max-width:min(96vw,440px)!important} #dlg-faxsend, #dlg-mailsend, #dlg-mail, #dlg-fax {max-width:min(96vw,880px)!important} @media (max-width:900px){ dialog, #dlg-pin, #dlg-hr, #dlg-faxsend, #dlg-mailsend, #dlg-mail, #dlg-fax {max-width:calc(100vw - 24px)} } /* 14 표 머리글 정렬 */ th[data-sortable]{cursor:pointer;user-select:none;position:relative;white-space:nowrap} th[data-sortable]:hover{color:var(--ink)} th[data-sortable]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} th[data-sortable] .sort-mark{font-style:normal;margin-left:4px;color:var(--accent-ink); display:inline-block;min-width:8px;vertical-align:1px} th[data-sortable].sorted{color:var(--accent-ink)} /* 1 비서 안내 화면 */ /* ===== 2026-09-18 · 38차 · 정보구조 개편(업무센터·설정·팔레트·헤더) ===== */ /* 사이드바 구분선 */ /* 헤더 */ .topbar .gsearch.as-btn{flex:1 1 auto;min-width:0;max-width:420px;position:static} .pal-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:0 10px; border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer; font:inherit;color:var(--mute);text-align:left} .pal-btn:hover{border-color:var(--accent);color:var(--ink)} .pal-btn svg{width:15px;height:15px;flex:none} .pal-btn span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pal-btn kbd{font:inherit;font-weight:700;color:var(--mute); background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px} .hd-add{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 12px;border:0;border-radius:10px; background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer;flex:none} .hd-add:hover{background:var(--accent-fill)} .hd-add span{font-size:14px;line-height:1} .hd-pf{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px 0 4px;border:1px solid var(--line); border-radius:var(--r-ctl);background:var(--panel);cursor:pointer;font:inherit;color:var(--ink);flex:none} .hd-pf:hover{background:var(--bg)} .hd-pf i{width:24px;height:24px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink); display:grid;place-items:center;font-style:normal;font-weight:800} .hd-pf b{font-weight:600;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:1100px){ .hd-pf b,.hd-add b{display:none} .hd-add{padding:0 10px} } @media (max-width:900px){ .topbar .gsearch.as-btn{max-width:none} .pal-btn span{display:none} .pal-btn kbd{display:none} } /* 커맨드 팔레트 */ html.pal-on{overflow:hidden} #pal{position:fixed;inset:0;z-index:120} #pal .pal-bd{position:absolute;inset:0;background:rgba(16,24,40,.32)} #pal .pal-box{position:absolute;left:50%;top:12vh;transform:translateX(-50%);width:min(620px,calc(100vw - 28px)); background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden; box-shadow:0 24px 64px rgba(16,24,40,.24);display:flex;flex-direction:column;max-height:70vh} #pal .pal-in{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid var(--line)} #pal .pal-in svg{width:17px;height:17px;color:var(--mute);flex:none} #pal .pal-in input{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none;padding:0} #pal .pal-in kbd{font:inherit;font-weight:700;color:var(--mute);background:var(--bg); border:1px solid var(--line);border-radius:6px;padding:2px 6px;flex:none} #pal .pal-out{overflow-y:auto;padding:6px} #pal .pal-g{font-weight:700;color:var(--mute);padding:9px 10px 4px;letter-spacing:.3px} #pal .pal-r{display:flex;align-items:baseline;gap:9px;padding:8px 10px;border-radius:9px;cursor:pointer} #pal .pal-r.on{background:var(--accent-soft)} #pal .pal-r b{flex:0 1 auto;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #pal .pal-r span{flex:1 1 auto;min-width:0;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #pal .pal-empty{padding:26px 14px;text-align:center;color:var(--mute)} /* 필터 칩 */ .fchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;grid-column:1/-1} /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 31번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 140c 150a */ /* 업무센터 */ /* 설정 */ .set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start} @media (max-width:900px){ .set-grid{grid-template-columns:minmax(0,1fr)} } .set-sec .detail-head{margin:0 0 8px;padding:0;border:0} .set-sec h3{font-size:14.5px} .set-row{border-bottom:1px solid var(--line);flex-wrap:wrap} .set-row:last-child{border-bottom:0} .set-row>span:first-child{color:var(--ink2,var(--ink));font-weight:600} .set-row .thm{width:auto;min-width:150px} .set-kbd{font-weight:700;} .set-row .who{display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* 거래처 360 — 가결산 KPI · 내장 보고서 */ .c3-kpi2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .c3-kpi2 .c3-k .v{font-size:17px} .c3-rp .rpt-lh{display:none} .c3-rp .rpt-break,.c3-rp .rpt-cont{display:none} .c3-rp .rpt{color:var(--ink)} /* ===== 2026-09-18 · 39차 · PHASE 6·8·9 ===== */ /* 대표실 한눈 지표 */ .adm-kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 12px} .adm-k{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:11px 13px;min-width:0} .adm-k .l{color:var(--mute);font-weight:600} .adm-k .v{font-weight:800;margin:2px 0 1px;font-variant-numeric:tabular-nums; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adm-k .s{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adm-k.hot{border-color:var(--line)} /* 2026-11-06 다듬기: 문제 색은 숫자(.v)에만 — 테두리는 무채색 */ .adm-k.hot .v{color:var(--bad-ink)} @media (max-width:1280px){ .adm-kpi{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:640px){ .adm-kpi{grid-template-columns:repeat(2,minmax(0,1fr))} } .adm-load{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px;} .adm-load>.l{color:var(--mute);font-weight:700;margin-bottom:8px} .adm-load .row{display:flex;align-items:center;gap:10px;padding:4px 0} .adm-load .nm{flex:none;width:78px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adm-load .bar{flex:1 1 auto;height:8px;border-radius:999px;background:var(--line);overflow:hidden} .adm-load .bar i{display:block;height:100%;border-radius:999px;background:var(--accent)} .adm-load .n{flex:none;width:52px;text-align:right;color:var(--mute);font-variant-numeric:tabular-nums} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 32번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 150b 150e */ .fchip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 6px 0 10px; border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-ink); border-radius:999px;font:inherit;cursor:pointer} .fchip b{font-weight:700;} .fchip span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fchip i{font-style:normal;line-height:1;padding:0 3px;} .fchip:hover i{opacity:1} .fchip.clear{border-style:dashed;background:none;color:var(--mute);border-color:var(--line2,var(--line));padding:0 10px} /* 오른쪽 드로어 */ html.drw-on{overflow:hidden} #drw{position:fixed;inset:0;z-index:118} #drw .drw-bd{position:absolute;inset:0;background:rgba(16,24,40,.3)} #drw .drw-box{position:absolute;right:0;top:0;bottom:0;width:min(520px,calc(100vw - 32px)); background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column; box-shadow:-18px 0 44px rgba(16,24,40,.16);animation:drwIn .16s ease-out} @keyframes drwIn{from{transform:translateX(16px);opacity:.6}to{transform:none;opacity:1}} #drw .drw-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)} #drw .drw-h b{flex:1 1 auto;min-width:0;font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #drw .drw-b{flex:1 1 auto;overflow-y:auto;padding:14px 16px} @media (prefers-reduced-motion:reduce){ #drw .drw-box{animation:none} } @media (max-width:640px){ #drw .drw-box{width:100%;top:auto;height:86vh;border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0} } /* 1024 이하 사이드바 드로어 */ @media (min-width:1025px){ } @media (max-width:1024px) and (min-width:901px){ .app{grid-template-columns:minmax(0,1fr)} #statusbar{left:0} #sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:42;transform:translateX(-100%); transition:transform .18s ease;box-shadow:8px 0 28px rgba(16,24,40,.14)} html.sb-open #sidebar{transform:none} } @media (prefers-reduced-motion:reduce){ #sidebar{transition:none} } /* ===== 40차 · QA 2차 (2026-09-18) ===== */ html[data-boot] #tdy-tiles .sk-line, html[data-boot] #prog-mini .sk-line, html[data-boot] #recent-mini .sk-line, html[data-boot] #c3-body .sk-line {display:block;height:13px;margin:9px 0;border-radius:6px} .pill.seal.pill-zero,.pill.bad.pill-zero{background:var(--panel2);color:var(--mute)} #tdy-tiles .sk-line,#prog-mini .sk-line,#recent-mini .sk-line,#check-mini .sk-line{display:block;height:13px;margin:9px 0;border-radius:6px} /* 통합 검색에서 고른 줄을 잠깐 밝힌다 */ @media (prefers-reduced-motion:reduce){ } /* 통합 검색 결과의 구분 배지 */ .pal-r .pal-b{font-style:normal;font-weight:600;color:var(--mute); border:1px solid var(--line2);border-radius:5px;padding:1px 5px;margin-right:8px;flex:none;line-height:1.5} .pal-r.on .pal-b{border-color:var(--accent);color:var(--accent-ink)} /* ══════════════════════════════════════════════════════════════════════════ 42차 · 디자인 v2 (2026-09-19) — 업무용 SaaS 다듬기 이 블록만 지우면 이전 모습으로 되돌아간다. 화면 구조·기능·데이터는 손대지 않았다. ══════════════════════════════════════════════════════════════════════════ */ /* ── ① 토큰 ─────────────────────────────────────────────────────────────── */ /* ── ② 타이포 ───────────────────────────────────────────────────────────── */ body{font-size:var(--fs-body);line-height:1.55;color:var(--ink);} main.wrap h2,#view-c360 .c3-h h1{font-size:var(--fs-title);font-weight:700;letter-spacing:-.01em;line-height:1.3} main.wrap h3,.detail-head h3{font-size:var(--fs-h3);font-weight:600;line-height:1.4} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 33번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 5개: 150d 150em 150e 150j */ /* ===== 41차 · 거래처 360 통합 (2026-09-18) =================================== ① 거래처를 고르는 첫 화면 ② 머리의 자주 쓰는 동작 ③ 한 줄 핵심정보 ④ 요약 숫자 기존 디자인 토큰만 쓴다 — 흰 바탕·얇은 선 1px·파랑 포인트·그림자 없음. */ .c3-pick{padding:22px 24px} .c3-pick-in h2{margin:0 0 4px;font-size:19px;font-weight:800} .c3-pick-in p{margin:0 0 14px;color:var(--mute);line-height:1.6} .c3-pick-q{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .c3-pick-q input{flex:1 1 280px;min-width:0;height:38px;padding:0 12px;border:1px solid var(--line2); border-radius:10px;background:var(--panel);color:var(--ink);font-size:14px} /* 2026-11-06 /unslop 다듬기: 화면을 열면 바로 칠 수 있게 찾기 칸에 초점이 가는데(370c), 그때 굵은 파란 틀이 늘 보이던 것 → 평소 = 가는 무채색 선 · 화면이 연 자동 초점(370c 가 단 .c3-auto) = 먹색 1px 선만(커서는 깜박임) · 사람이 누르거나 치거나 Tab 으로 들어오면(.c3-auto 뗌) = 앱 공통과 같은 2px 강조 윤곽(키보드 초점이 분명히 보이게) */ .c3-pick-q input:focus{outline:2px solid var(--accent);outline-offset:-1px;box-shadow:none} /* 테두리 색은 430 의 !important 가 잡고 있어 선 위에 윤곽을 겹침 */ .c3-pick-q input.c3-auto:focus{outline:1px solid var(--ink2);outline-offset:-1px} .c3-pick-g{color:var(--mute);font-weight:600;margin:14px 0 6px} .c3-pick-row,.c3-pick-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px} .c3-pc{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left; border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:9px 11px;cursor:pointer;min-height:44px} .c3-pc:hover{background:var(--panel2);border-color:var(--line2)} .c3-pc b{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .c3-pc span{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .c3-h-acts{display:inline-flex;gap:6px;align-items:center;margin-left:8px;flex-wrap:wrap} @media (max-width:640px){ .c3-h-acts{width:100%;margin:8px 0 0} } /* 핵심 정보 — 카드 6장 → 한 줄 */ #c3-kpi{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:12px; background:var(--panel);padding:10px 4px;margin:10px 0 12px} .c3-f{display:flex;flex-direction:column;gap:1px;padding:2px 14px;min-width:0;flex:1 1 auto; border-left:1px solid var(--line)} .c3-f:first-child{border-left:0} .c3-f i{font-style:normal;color:var(--mute);letter-spacing:.01em} .c3-f b{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .c3-f.hot b{color:var(--bad-ink)} @media (max-width:900px){ #c3-kpi{padding:8px 2px} .c3-f{flex:1 1 33%;padding:4px 10px} .c3-f:nth-child(3n+1){border-left:0} } /* 요약 숫자(전월 대비) */ .c3-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:8px} .c3-sum>div{display:flex;flex-direction:column;gap:2px;min-width:0} .c3-sum i{font-style:normal;color:var(--mute)} .c3-sum b{font-size:16px;font-weight:700} .c3-d{font-weight:600;color:var(--mute)} .c3-d.up{color:var(--accent-ink)} .c3-d.dn{color:var(--bad-ink)} .c3-note{margin-top:2px} /* 작성창 라벨 — 짧게 붙되 눈으로도 보이게 */ #dlg-faxsend .fs-f{display:inline-flex;flex-direction:column;gap:2px} #dlg-faxsend .fs-f label,#dlg-faxsend .fs-lb{color:var(--mute);font-weight:600} #dlg-faxsend .fs-lb{display:block;margin:6px 0 2px} /* ── 42차-b · 12px 미만 글자 없애기 (152개 선택자) ───────────────────── 합격 기준 '필수 보조 문구 12px 미만 0건'. 인쇄용 보고서·A4 서식은 쪽수 때문에 제외했다. */ .calgrid .wd{font-size:12px} .cal-legend{font-size:12px} /* ── 43차 · 홈 재구성 (지시 4) ──────────────────────────────────────────── */ #view-main #kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp3);margin:0 0 var(--sp5)} #view-main .kpi-t{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp1);text-align:left;cursor:pointer;background:var(--panel); border:1px solid var(--line);border-radius:var(--r-card);min-height:104px; transition:border-color var(--dur) ease,background var(--dur) ease} #view-main .kpi-t:hover{border-color:var(--line2);background:var(--panel2)} #view-main .kpi-t:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 34번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 150e 150g 150i 150p */ main.wrap .eyebrow,main.wrap .sub,main.wrap small,main.wrap .s,main.wrap .ms-sub,.c3-note{font-size:var(--fs-sub);color:var(--mute);line-height:1.5} main.wrap table{font-size:var(--fs-table)} main.wrap th{color:var(--mute);} main.wrap b,main.wrap strong{font-weight:600} /* ── ③ 뼈대 간격 ────────────────────────────────────────────────────────── */ main.wrap{padding-left:var(--pad);padding-right:var(--pad);padding-top:var(--sp5)} .topbar{min-height:var(--topbar-h)} @media (min-width:1025px){ /* ⚠ 901~1024px 는 사이드바가 드로어(position:fixed)라 본문이 첫 칸을 차지한다. 그 구간에 두 칸 격자를 강제하면 본문이 216px 로 찌그러진다 — 1025px 이상에서만 적용한다. */ .app{grid-template-columns:minmax(0,1fr)} } /* ── ④ 공통 컴포넌트 ────────────────────────────────────────────────────── */ /* 카드 — 그림자 대신 얇은 선 하나, 여백·모서리 통일 */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none} main.wrap .card>.detail-head{margin:0 0 var(--sp3)} /* ⚠ 바로 아래 자식에만 — .tblwrap 과 그 안의 table 에 두 번 걸리면 카드 밖으로 튀어나온다 */ main.wrap .card>.tblwrap,main.wrap .card>table{margin-left:calc(var(--sp5)*-1);margin-right:calc(var(--sp5)*-1);width:calc(100% + var(--sp5)*2)} main.wrap .card>.tblwrap>table,main.wrap .card>.tblwrap table{margin-left:0;margin-right:0;width:100%} main.wrap .card td:first-child,main.wrap .card th:first-child{padding-left:var(--sp5)} main.wrap .card td:last-child,main.wrap .card th:last-child{padding-right:var(--sp5)} /* 단추 — 높이·모서리·상태 통일 */ .btn{min-height:38px;padding:0 var(--sp4);border-radius:var(--r-ctl);border:1px solid var(--line2); background:var(--panel);color:var(--ink);font-weight:500; transition:background var(--dur) ease,border-color var(--dur) ease,color var(--dur) ease} .btn:hover{background:var(--panel2);border-color:var(--line2)} .btn:active{background:var(--line)} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .btn.sm{min-height:32px;padding:0 var(--sp3);} /* 알약(배지) — 색만으로 뜻을 나르지 않게 글자를 함께 둔다 */ .pill{border-radius:var(--r-chip,6px);padding:3px 9px;line-height:1.5} /* 2026-11-06 다듬기: 작은 상태 칩 = 6 */ /* 입력 */ input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{ min-height:38px;border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--panel); color:var(--ink);font-size:14px;padding:0 var(--sp3); transition:border-color var(--dur) ease,box-shadow var(--dur) ease} textarea{padding:10px var(--sp3);line-height:1.55} input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none} @media (max-width:900px){ input,select,textarea{font-size:16px} } /* 표 — 행 높이 50px, 머리글은 조용하게 */ main.wrap td{padding:14px var(--sp3)} main.wrap th{padding:10px var(--sp3);background:var(--panel2)} main.wrap tbody tr{border-top:1px solid var(--line)} main.wrap tbody tr:hover{background:var(--panel2)} html[data-dense="1"] main.wrap td{padding:7px var(--sp3)} /* 빈 상태 · 로딩 · 오류 — 세 가지를 한 모양으로 */ .empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp2); padding:var(--sp6) var(--sp4);color:var(--mute);text-align:center} .empty b{display:block;color:var(--ink);font-weight:600} .empty .ebtn{display:flex;gap:var(--sp2);margin-top:var(--sp1)} .empty.sm{padding:var(--sp4) var(--sp3)} .sk{display:block;background:linear-gradient(90deg,var(--panel2),var(--line),var(--panel2)); background-size:200% 100%;border-radius:6px;animation:skw 1.2s linear infinite} @keyframes skw{0%{background-position:200% 0}100%{background-position:-200% 0}} /* 움직임은 짧게, 끄기를 존중한다 */ *,*::before,*::after{animation-duration:var(--dur);transition-duration:var(--dur)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} } .cal .n{font-size:12px} .side-nav .grp{font-size:12px} .login-logo span{font-size:12px} .side-nav .grp i{font-size:12px} #topnav button[data-badge]::before{font-size:12px} .mnav button[data-badge]::after{font-size:12px} html[data-dense="1"] .tblwrap th{font-size:12px!important} html[data-dense="1"] .tblwrap .av{font-size:12px!important} html[data-dense="1"] .tblwrap .pill{font-size:12px!important} html[data-dense="1"] #rows>tr>td.name .sub{font-size:12px!important} .at-today td:first-child::after,.cd.today .d::after{font-size:12px} .td-st{font-size:12px!important} .ev-task .td-by-s{font-size:12px!important} .sb-badge i{font-size:12px} /* 2026-10-15 왼쪽 메뉴 없앰 */ th[data-sortable] .sort-mark{font-size:12px} /* 빈 상태가 좁은 칸에서 글자 폭으로 찌그러져 잘리던 것 */ main.wrap .empty{width:100%;align-self:stretch;box-sizing:border-box} /* 명암비 — 출퇴근 큰 단추와 즐겨찾기 별 */ .btn.at-big{color:var(--ink)} .btn.at-big[disabled],.btn.at-big:disabled{color:var(--mute)} .c3-star{color:var(--mute)} .c3-star.on{color:var(--warn)} /* ── 42차-c · 남은 작은 글자·명암비 ───────────────────────────────────── */ /* 표 칸은 14px 바닥을 확실히 지킨다(더 구체적인 옛 규칙이 이기고 있었다) */ main.wrap table td,main.wrap .tblwrap td,#rows>tr>td,#mo-rows>tr>td, #rp-rows>tr>td,#cr-rows>tr>td,#ar-rows>tr>td,#fx-rows>tr>td,#ml-rows>tr>td{font-size:var(--fs-table)!important} html[data-dense="1"] main.wrap table td{font-size:13px!important} /* 인사말 한 줄 */ main.wrap .greet,main.wrap .greet p{font-size:var(--fs-table)!important} /* 화면에 그리는 막대·도넛의 눈금 글자(인쇄용 보고서는 쪽수 때문에 그대로 둔다) */ #c3-body .rpt-cols text,#c3-body .rpt-dn text, #view-report .rpt-cols text,#view-report .rpt-dn text{font-size:12px!important} /* 곁다리 화살표가 배경과 1.33:1 이던 것 */ main.wrap .ar,#view-admin .adm-k .go{color:var(--mute)!important} /* 빵부스러기 구분 기호가 배경과 1.33:1 이던 것 */ #sb-crumb i,#sb-crumb>i{color:var(--mute);font-style:normal} /* ── 42차-e · 비활성 단추도 글자는 읽힌다 ────────────────────────────────── */ .btn[disabled],.btn:disabled,button[disabled],button:disabled{color:var(--mute);opacity:1} .btn[disabled],.btn:disabled{background:var(--panel2);cursor:not-allowed} /* 키보드로 다니는 사람이 어디에 있는지 늘 보이게 */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible, [role="button"]:focus-visible,[role="tab"]:focus-visible,[role="option"]:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 35번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 150h */ /* ── 42차-d · 마지막 남은 작은 글자·명암비 ───────────────────────────────── */ /* 막대 범례는 화면에서도 쓰인다(거래처 360·월별 보고서). 인쇄본은 쪽수 때문에 11.5px 유지. */ #c3-body .rpt-cols .lg,#c3-body .rpt-cols .lg span, #view-report .rpt-cols .lg,#view-report .rpt-cols .lg span, #detail .rpt-cols .lg,#detail .rpt-cols .lg span, main.wrap .rpt-cols .lg,main.wrap .rpt-cols .lg span{font-size:12px} #an-print .rpt-cols .lg,#an-print .rpt-cols .lg span, .a4 .rpt-cols .lg,.a4 .rpt-cols .lg span{font-size:11.5px} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 36번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 8개: 150j 150l 160b 160em 160f 160gm */ #view-main .kpi-t .k{font-size:var(--fs-sub);color:var(--mute);font-weight:500} #view-main .kpi-t .v{font-size:var(--fs-kpi);font-weight:700;color:var(--ink);line-height:1.15} #view-main .kpi-t .v small{font-weight:500;color:var(--mute);margin-left:3px} #view-main .kpi-t .s{font-size:var(--fs-sub);color:var(--mute);margin-top:auto} #view-main .kpi-t.hot .v{color:var(--bad-ink)} /* 왼쪽(우선 처리) · 오른쪽(놓치기 쉬운 것 + 기한) · 아래(진행률 → 참고) */ #view-main .main-grid{display:grid!important;grid-template-columns:1.1fr .9fr; grid-template-areas:none;gap:var(--sp4)!important;align-items:start} #home-l,#home-r{display:flex;flex-direction:column;gap:var(--sp4);min-width:0} #home-l{grid-column:1} #home-r{grid-column:2} #home-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--sp4);align-items:start;min-width:0} /* ⚠ display:contents 를 쓰면 이 카드들은 선택자상 `.main-grid > *` 가 아니다 — 옛 층의 grid-area 이름이 살아남아 암묵 열을 만든다. id 로 직접 되돌린다. */ #view-main .main-grid>*,#home-l,#home-r,#home-b,#view-main #today-card,#view-main #appr-card,#view-main #check-card,#view-main #cal-card,#view-main #ev-card,#view-main #recent-card,#view-main #queue-card,#view-main #prog-card{grid-area:auto} #view-main #prog-card,#home-b{grid-column:1 / -1} @media (max-width:1100px){ #view-main #kpi{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ #view-main .main-grid{grid-template-columns:minmax(0,1fr)} #home-l,#home-r{display:contents} #home-b{grid-template-columns:minmax(0,1fr)} /* 휴대폰 순서 — 할 일 → 놓치기 쉬운 것 → 결재 → 기한 → 진행률 → 참고 */ #today-card{order:1} #check-card{order:2} #appr-card{order:3} #cal-card{order:4} #view-main #prog-card{order:5} #ev-card{order:6} #recent-card{order:7} #home-b{order:8} #view-main .kpi-t{min-height:92px;} } /* ── 43차-b · 거래처 360 메모 탭 ────────────────────────────────────────── */ .c3-mh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp4); margin:0 0 var(--sp3);padding-bottom:var(--sp3);border-bottom:1px solid var(--line)} .c3-mh .mm{color:var(--mute);white-space:nowrap} .c3-mh .mm b{color:var(--ink);font-weight:600} .c3-st{margin-left:auto;font-weight:500;border-radius:999px; padding:3px 10px;background:var(--ok-soft);color:var(--ok-ink);white-space:nowrap} .c3-st[data-st="dirty"]{background:var(--warn-soft);color:var(--warn-ink)} .c3-ta{width:100%;min-height:150px;max-height:40vh;resize:vertical;line-height:1.6} /* ── 43차-d · 메일·팩스 목록 위계 (지시 7) ──────────────────────────────── */ .msg-row{cursor:pointer} .msg-when{font-size:var(--fs-sub);color:var(--mute);white-space:nowrap;vertical-align:top;padding-top:16px} .msg-main{white-space:normal} .msg-t{display:flex;align-items:baseline;gap:var(--sp2);font-size:var(--fs-body); color:var(--ink);font-weight:500;line-height:1.45} /* ⚠ anywhere 는 min-content 를 한 글자로 만든다(4-45-1) — 같은 flex 줄에 긴 것이 오면 이 칸이 13px 폭으로 눌려 AI 요약이 세로로 쪼개졌다(실측 17줄·행 421px). break-word 로. */ .msg-t .tx{min-width:0;overflow-wrap:break-word} .msg-row.new .msg-t{font-weight:700} .msg-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-1px)} .msg-2{margin-top:2px;font-size:var(--fs-sub);line-height:1.45} .msg-att .att{white-space:nowrap;color:var(--mute)} .msg-wait{color:var(--mute);} main.wrap tbody tr.msg-row.new{background:linear-gradient(90deg,var(--accent-soft) 0 3px,transparent 3px)} main.wrap tbody tr.msg-row.new:hover{background:var(--panel2)} #view-main #stats .stat .k{font-size:14px} #view-main .season-owners div{font-size:14px} #view-main .main-grid .detail-head .btn.sm{font-size:14px} #view-main .news-mini-item{font-size:14px!important} #view-main .cal li{font-size:14px!important} #view-main .todo-it .tx{font-size:14px!important} #view-main .greet p{font-size:14px!important} #mdrawer #thm button{font-size:14px!important} .at-now .at-times{font-size:14px} .at-loc{font-size:14px} #min-toast .mt{font-size:14px} #min-toast .mt button{font-size:14px!important} .empty b{font-size:14px!important} .empty span{font-size:14px} .empty .ebtn button{font-size:14px!important} #check-mini .ck-all{font-size:14px} #check-mini .ck-act{font-size:14px} .c3-crumb{font-size:14px} .c3-meta{font-size:14px!important} .c3-tabs button{font-size:14px!important} .c3-now .i{font-size:14px!important} .c3-now .t{font-size:14px!important} .c3-list li{font-size:14px!important} .c3-memo{font-size:14px!important} .c3-pick-in p{font-size:14px!important} .c3-pc b{font-size:14px} #dlg-faxsend .fs-f label,#dlg-faxsend .fs-lb{font-size:14px} /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 37번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 150m 150q */ /* ── 43차-e · 대표실 세 단 (지시 8) ─────────────────────────────────────── */ .adm-grid>.card{margin:0} .adm-grid .stats.adm-in{gap:var(--sp2);margin:0} .adm-grid .stats.adm-in .stat{padding:var(--sp3)} .adm-grid .owners.adm-in{margin:0} .adm-grid .legend2{margin-top:var(--sp3)} /* 위험(빨강)과 주의(주황)를 나눈다 — 빨강이 흔하면 아무도 안 본다 */ #view-admin .adm-k{padding:var(--sp4)} /* 2026-11-06 /unslop 다듬기: 미수·CMS 미등록 카드 테두리 통째 빨강·주황 → 무채색 테두리 · 문제 색은 숫자(.v)에만(아래 그대로) */ #view-admin .adm-k.hot{border-color:var(--line)} #view-admin .adm-k.hot .v{color:var(--bad-ink)} #view-admin .adm-k.warn{border-color:var(--line)} #view-admin .adm-k.warn .v{color:var(--warn-ink)} .adm-load{margin:0 0 var(--sp5)} /* ── 43차-f · 설정 (지시 9) ─────────────────────────────────────────────── */ #view-settings .set-grid{max-width:1120px;gap:var(--sp4)} .set-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp4); padding:var(--sp3) 0;border-top:1px solid var(--line);min-height:52px} .set-sec .set-row:first-of-type{border-top:0} .set-row>span:first-child{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-table);min-width:0} .set-kbd{color:var(--mute);background:var(--panel2); border:1px solid var(--line);border-radius:6px;padding:3px 8px;white-space:nowrap} @media (max-width:900px){ .set-row{flex-wrap:wrap;align-items:flex-start} .set-row>span:last-child,.set-row>button{margin-left:auto} } /* ── 43차-k · 대표실 두 단 (짧은 단에 넣어 균형을 맞춘다 · JS admBalance) ── */ .adm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp4);align-items:start} /* 재건축 4단계(C) 합친 시트 · 수임동의 · 전체 111장 중 38번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 150o 160am 160gm 954b */ /* ── 43차-h · 빈 상태·오류 상태 (지시 9·11) ────────────────────────────── */ .st-err{padding:var(--sp4);border:1px solid var(--bad);border-radius:var(--r-ctl); background:var(--bad-soft)} .st-t{font-size:var(--fs-table);font-weight:600;color:var(--bad-ink)} .st-w{margin-top:var(--sp1);font-size:var(--fs-sub);color:var(--ink2)} .st-d{margin-top:var(--sp2)} .st-d summary{font-size:var(--fs-sub);color:var(--mute);cursor:pointer} .st-d summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .st-d code{display:block;margin-top:var(--sp2);padding:var(--sp2) var(--sp3); border-radius:6px;background:var(--panel);font-size:var(--fs-sub);color:var(--ink2); overflow-wrap:anywhere;line-height:1.5} .ik-picked{font-size:14px} .ik-fields label{font-size:14px} .ik-fields input{font-size:14px!important} .ht-f b{font-size:14px} .ht-f .ht-n{font-size:14px} .ht-n{font-size:14px} .ik-nav b{font-size:13px} /* ═════════════ 수임 동의 (#view-intake) ═════════════ */ #view-intake .ik-meta{display:none!important} /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 39번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 150n */ .at-tabs2{margin:0 0 var(--sp4)} #view-attend .at-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp3)} .at-adm{display:inline-flex;align-items:center;gap:var(--sp2);padding:4px 4px 4px 10px; border:1px dashed var(--line2);border-radius:999px;background:var(--panel2)} #view-attend .at-panel .legend2{margin-top:var(--sp2)} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 40번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 23개: 150p 150r 150s 160a 160c 160e 160g */ .st-err .c3-acts{margin-top:var(--sp3)} #save-ok.on{opacity:1;transform:none} .seg button:focus-visible,.chip:focus-visible,.c3-tabs button:focus-visible{ outline:2px solid var(--accent);outline-offset:1px} /* 누를 수 있는 것은 손 모양, 못 누르는 것은 금지 표시 */ .seg button,.chip,.c3-tabs button{cursor:pointer} .seg button[disabled],.chip[disabled],.c3-tabs button[disabled]{cursor:not-allowed;color:var(--mute)} .seg button:hover:not(.on):not([disabled]),.c3-tabs button:hover:not(.on){background:var(--panel2)} /* 전환은 짧게(150~220ms) — 길면 일이 느려진다 */ .btn, .chip, .seg button, .card, .pill, .msg-row, .kpi-t, input, select, textarea { transition-duration:var(--dur);transition-timing-function:ease} /* ── 43차-j · 카드·단추는 공통 규칙 하나만 따른다 (합격 기준) ──────────── */ main.wrap .card,#view-admin .card,.adm-grid>.card,.set-sec{padding:var(--sp5)} main.wrap .card.tight{padding:var(--sp4)} .btn.xs{min-height:26px;padding:0 var(--sp2);font-size:var(--fs-sub)} /* ── 43차-l · 빈 상태가 표 칸일 때 ──────────────────────────────────────── */ td.empty,th.empty{display:table-cell!important;text-align:center;padding:var(--sp6) var(--sp4)!important; color:var(--mute);font-size:var(--fs-table);line-height:1.6;white-space:normal!important} td.empty b{display:block;margin-bottom:var(--sp1);color:var(--ink);font-size:var(--fs-h3);font-weight:600} td.empty .ebtn{display:flex;justify-content:center;gap:var(--sp2);margin-top:var(--sp3)} .adm-grid .stats.adm-in{grid-template-columns:repeat(auto-fit,minmax(208px,1fr))} .adm-grid .stats.adm-in .stat .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:560px){ /* ── 43차-m · 휴대폰 다듬기 ─────────────────────────────────────────────── */ #at-tabs button {padding:9px 8px;} } /* ══════════════════════════════════════════════════════════════════════════ 44차 · 글자 바닥 (2026-09-19) — 최종 마감 본문·표 칸·주요 수치·버튼·입력·탭·메뉴는 14px 이상, 보조 정보만 13px. ⚠ 인쇄용 보고서(.rpt/.rp-*)·A4 서식(.a4/.xl)·임금명세서는 **건드리지 않는다** (A4 2장 고정이 깨진다). 달력 칸·조밀 보기·숫자 배지도 따로 둔다. 이 블록만 지우면 이전 크기로 돌아간다. ══════════════════════════════════════════════════════════════════════════ */ /* ① 누를 수 있는 것 · 표 · 본문 · 주요 수치 — 225개 선택자 */ .top .status{font-size:14px!important} .mode{font-size:14px} .btn{font-size:14px!important} .btn.sm{font-size:14px!important} /* h3 는 제목이다 — 바닥 14px 일괄 상향에 휩쓸려 본문(15px)보다 작아져 있었다. 크기는 main.wrap h3 등 제 자리 규칙이 정한다(bare element 에 !important 금지). */ .banner{font-size:14px!important} .av{font-size:14px} .seg button{font-size:14px!important} .field label{font-size:14px!important} .field input,.field textarea,.field select{font-size:14px!important} .empty{font-size:14px!important} .star{font-size:14px!important} .owner .h .n{font-size:14px!important} .owner .cnt{font-size:14px} details.fold summary{font-size:14px} details.fold summary::before{font-size:14px} .cd{font-size:14px} .evitem{font-size:14px!important} .evitem .t{font-size:14px!important} .evitem .act button{font-size:14px!important} .checks{font-size:14px!important} .news-mini-item{font-size:14px!important} table{font-size:14px} th{font-size:14px!important} .kv{font-size:14px!important} .alerts li{font-size:14px!important} .qitem{font-size:14px!important} .cal li{font-size:14px} .wht-head select,.wht-head input[type=month]{font-size:14px!important} .wp .h .n{font-size:14px!important} .wp .row{font-size:14px!important} .chk{font-size:14px!important} .anal-ctl{font-size:14px!important} .bars .b span{font-size:14px!important} .vat{font-size:14px!important} .nodata{font-size:14px!important} .drop{font-size:14px!important} .msg .tag .pill{font-size:14px!important} .chip{font-size:14px} .office-box{font-size:14px} .thm button{font-size:14px} .topbar-title{font-size:14px} .sum .h .pill{font-size:14px!important} .sum .h .r{font-size:14px} .sum .row{font-size:14px} .sum .tot{font-size:14px} .season-owners{font-size:14px} .side-foot .who{font-size:14px} .side-foot .who button{font-size:14px} label.cb{font-size:14px!important} .field label.cb{font-size:14px} .bz-out{font-size:14px} .mnav button{font-size:14px} .greet p{font-size:14px!important} .dv-drop{font-size:14px!important} .dv-it{font-size:14px!important} .ik-forms label{font-size:14px} .todo-it .tx{font-size:14px} .todo-it .num small{font-size:14px!important} #ht-card .seg.tier button{font-size:14px} #thm button{font-size:14px} .gsearch input{font-size:14px!important} .gsearch .ic{font-size:14px!important} .gs-out div{font-size:14px!important} #statusbar{font-size:14px} #statusbar .sb-it b{font-size:14px!important} .tn-admin{font-size:14px!important} .tn-right .who{font-size:14px!important} .tn-right .who button{font-size:14px!important} #subnav button{font-size:14px} #subnav .sn-title{font-size:14px} .sboard.sb-line .tile{font-size:14px} .sboard.sb-line .tile .v{font-size:14px} #statusbar .sb-dense{font-size:14px} .status span:has(.dot.on)::after{font-size:14px!important} .status span:has(.dot.wait)::after{font-size:14px!important} .status span:has(.dot:not(.on):not(.wait))::after{font-size:14px!important} .tri-sum{font-size:14px} #check-mini .empty.sm{font-size:14px!important} .bellbox .bb-h{font-size:14px!important} .bellbox .bb-empty{font-size:14px!important} .bellbox .bb-row{font-size:14px!important} #check-mini .ck-main .nm{font-size:14px} #recent-mini .rc-row .t{font-size:14px} a.linkish,button.linkish{font-size:14px!important} .pal-btn{font-size:14px} .hd-add{font-size:14px} .hd-pf{font-size:14px} #pal .pal-g{font-size:14px} #pal .pal-r b{font-size:14px} #pal .pal-r span{font-size:14px} #pal .pal-empty{font-size:14px!important} .set-row{font-size:14px} .set-row .who{font-size:14px!important} .c3-rp{font-size:14px!important} .adm-load .nm{font-size:14px} .adm-load .n{font-size:14px} .fchip{font-size:14px} .fchip i{font-size:14px} .pal-r .pal-b{font-size:14px} #view-main .kpi-t .v small{font-size:14px} #at-tabs button {font-size:14px!important} /* ② 진짜 보조 정보(날짜·부가 설명·범례·메타) — 93개 선택자 */ .eyebrow{font-size:13px} .uplog{font-size:13px!important} .owner .m{font-size:13px} .news-grp{font-size:13px} .evitem .s{font-size:13px!important} .appr-item .s{font-size:13px!important} .stat .v small{font-size:13px!important} td .sub{font-size:13px!important} .qitem .meta{font-size:13px!important} .legend2{font-size:13px} .legend{font-size:13px!important} .msg .tag{font-size:13px!important} .hero .sub{font-size:13px!important} .side-foot .status{font-size:13px!important} .sboard .tile .s{font-size:13px} .greet .sub{font-size:13px} .pres-top{font-size:13px} .bz-out small{font-size:13px!important} .mgrp{font-size:13px!important} tr.wk-grp td .sub{font-size:13px!important} .dv-it .sz,.dv-it .dt{font-size:13px!important} .gsearch kbd{font-size:13px} .gs-out span{font-size:13px!important} #statusbar .status{font-size:13px!important} #statusbar .pres-top{font-size:13px} .gs-out .gs-tag{font-size:13px!important} #view-main #stats .stat .v small{font-size:13px} #view-main #stats .stat .s{font-size:13px} .greet .sboard .tile .k{font-size:13px!important} #mdrawer-list .mgrp{font-size:13px!important} .mdrawer-foot .status{font-size:13px!important} #min-toast .mt .tx small{font-size:13px!important} #statusbar .sb-net{font-size:13px!important} .at-flag{font-size:13px} .mo-table td.mo-name .sub{font-size:13px!important} .bot-kv small{font-size:13px!important} .at-wdays .d{font-size:13px!important} .at-wdays .t{font-size:13px!important} .bellbox .bb-row .g{font-size:13px!important} .tri-3 .t{font-size:13px!important} #check-mini .ck-main .more{font-size:13px} #recent-mini .rc-row .g{font-size:13px} #recent-mini .rc-row .w{font-size:13px} .c3-meta i{font-size:13px!important} .c3-now .s{font-size:13px!important} .c3-list .s{font-size:13px!important} .pal-btn kbd{font-size:13px} .hd-pf i{font-size:13px} #pal .pal-in kbd{font-size:13px} .set-kbd{font-size:13px} .adm-load>.l{font-size:13px} .fchip b{font-size:13px} .c3-f i{font-size:13px!important} /* ③ 화면 기본 위계 — 바닥을 올린 만큼 제목도 같이 올린다 */ main.wrap{font-size:15px;line-height:1.5} main.wrap p,main.wrap li,main.wrap dd,main.wrap dt{font-size:15px;line-height:1.5} main.wrap h2{font-size:24px} main.wrap td{font-size:14px!important;line-height:1.5} main.wrap th{font-weight:600;letter-spacing:.01em} main.wrap .num{font-variant-numeric:tabular-nums} /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 41번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 150q 160am */ .adm-col{display:flex;flex-direction:column;gap:var(--sp4);min-width:0} .adm-grid>.card.wide{grid-column:1 / -1} @media (max-width:1024px){ .adm-grid{grid-template-columns:minmax(0,1fr)} .adm-col{display:contents} } .season-nums{font-size:14px} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 42번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 8개: 160gm 160k 170am 180am */ .thumb{font-size:13px!important} #check-mini .ck-sub{font-size:13px} #prog-mini .pg-n i{font-size:13px} .c3-pick-g{font-size:13px} .c3-pc span{font-size:13px} .c3-sum i{font-size:13px!important} .c3-d{font-size:13px!important} .c3-note{font-size:13px!important} @media (min-width:1025px){ /* ── 44차-i · 터치 영역 (지시 5) ────────────────────────────────────────── */ /* 데스크톱 — 마우스 입력. 빽빽한 업무 화면이라 28×28 을 바닥으로 둔다. */ main.wrap .btn,main.wrap .btn.sm,main.wrap .seg button,main.wrap .chip, main.wrap summary,.c3-tabs button,#pal .pal-r,.fchip,.fchip button, main.wrap th[data-sortable],.cl-pager .btn{min-height:28px} main.wrap .btn.xs{min-height:26px} } @media (max-width:1024px){ /* 손가락으로 쓰는 폭 — 44×44 */ main.wrap .btn, main.wrap .btn.sm, main.wrap .btn.xs, main.wrap button, main.wrap .seg button, main.wrap .chip, main.wrap summary, main.wrap input:not([type=checkbox]):not([type=radio]), main.wrap select, .c3-tabs button, #at-tabs button, #c3-tabs button, .fchip, .fchip button, .cl-pager .btn, #mnav button, #mdrawer-list button, .mdrawer-foot button, dialog .btn, dialog button, dialog input:not([type=checkbox]):not([type=radio]), dialog select, #statusbar button, .bellbox .bb-row, .pal-btn, .hd-add, .hd-pf, #pal .pal-r, main.wrap [role=button], main.wrap [role=tab], main.wrap a.linkish, main.wrap button.linkish { min-height:44px;min-width:44px} main.wrap th[data-sortable]{height:44px} /* 글자가 짧아도 손가락이 닿게 — 좌우 여백을 준다 */ main.wrap .btn,main.wrap .btn.sm,main.wrap .seg button,main.wrap .chip, .c3-tabs button,.cl-pager .btn{padding-left:14px;padding-right:14px} /* 표 안의 작은 단추는 줄 높이를 밀지 않게 세로 여백만 채운다 */ main.wrap td .btn.sm,main.wrap td .btn.xs{min-height:44px;padding-top:0;padding-bottom:0} /* 체크박스·라디오는 눌리는 자리를 라벨까지 넓힌다 */ main.wrap label.cb,dialog label.cb{min-height:44px;display:flex;align-items:center} /* 표 줄 자체가 클릭 대상이다 */ main.wrap tbody tr.row td,main.wrap tbody tr[data-id] td,main.wrap tbody tr[data-no] td{ padding-top:14px;padding-bottom:14px} /* 아이콘만 있는 작은 단추 */ .c3-star, .fchip i {min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center} /* ── 44차-j · 터치 영역 뒤처리 ──────────────────────────────────────────── */ /* ① 거래처 360 머리 — 단추가 44px 폭을 가지면 한 줄에 안 들어간다 */ #view-c360 .c3-h,#view-c360 .c3-h-r,#view-c360 .c3-h-acts{flex-wrap:wrap;min-width:0} #view-c360 .c3-h-acts{width:100%;gap:var(--sp2)} #view-c360 .c3-h-acts .btn{flex:1 1 auto} #view-c360 .c3-h-r{max-width:100%} /* ② 자기 규칙이 높이를 못 박고 있던 것들 */ #view-main .detail-head .btn.sm,#view-main .main-grid .detail-head .btn.sm{min-height:44px;height:auto} .sboard .tile,.sboard.sb-line .tile{min-height:44px} .thm button,#thm button,#mdrawer #thm button{min-height:44px;min-width:44px} .sb-dense,.sb-badge,#statusbar .sb-dense,#statusbar .sb-badge{min-height:44px;min-width:44px} } @media (max-width:430px){ /* =================================================================== == 45차 · 업무센터 빈 상태 마감 (2026-09-19) == 내용 아래 죽은 공간을 없애고 목록·상세 두 칸의 높이를 맞춘다. 고정 높이·min-height 를 쓰지 않고 '남는 자리를 늘어나 채우는' 방식만 쓴다. =================================================================== */ /* ① 업무센터를 보고 있을 때만 본문이 화면 높이까지 늘어난다 */ /* ② 두 칸 높이 균형 */ /* 카드가 늘어나면 그 안의 목록도 같이 늘어나야 한다 — 안 그러면 빈자리가 카드 안으로 옮겨 갈 뿐이다 */ /* 늘어난 칸 안에서 빈 상태는 가운데에 놓인다 — 위로 몰려 아래가 비어 보이지 않게 */ /* 상세를 아직 안 골랐을 때의 안내는 칸 가운데 */ /* 맨 아래까지 내렸을 때 마지막 줄이 비서 단추 밑에 영영 깔려 있지 않게 — 단추 윗변이 화면 밑바닥에서 122~132px 이므로 그만큼 여백을 둔다 */ /* 떠 있는 비서 단추가 오른쪽 아래를 차지한다 — 그 아래로 들어가는 단추(족 넘김 '마지막 »')이 없도록 자리를 비운다 */ /* =================================================================== == 46차 · 휴대폰 창(dialog) 안 입력칸 16px (2026-09-19) == iOS 는 16px 미만 입력칸에 포커스가 가면 화면을 확대해 버린다. 본문 입력칸은 진작 맞춰 뒀는데 창 안쪽만 14px 로 남아 있었다. =================================================================== */ dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), dialog select,dialog textarea, #dlg-mailsend input:not([type=file]),#dlg-mailsend textarea, #dlg-faxsend input:not([type=file]),#dlg-faxsend textarea{ font-size:16px!important } } /* ── ⑦ 업무센터 빈 상태 — 가운데로 모으고 주 동작을 세운다 ────────── */ /* 주 동작 — 손가락 기준 */ /* ═══════════ 47차 · 홈 재구성 · 검토 단계 · 자료 미수신 (2026-09-19) ═══════════ 색은 이미 있는 토큰만 쓴다. 되돌리려면 이 블록만 지우면 된다. */ /* ── 오늘 처리할 업무 : 기한 기준 4칸 ── */ #tdy-tiles .tdy{position:relative} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 43번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 9개: 160g 160i 160j 160l 170a 170c 180a */ /* 주요 수치는 한 단계 더 크게 */ .stat .v,.kpi-t .v,.adm-k .v,.c3-k .v,.at-wnum{font-size:22px!important;line-height:1.2} .tdy .n{font-size:26px} @media (max-width:900px){ /* 입력은 휴대폰에서 16px 이상 — iOS 가 확대하지 않게 */ main.wrap input,main.wrap select,main.wrap textarea, dialog input,dialog select,dialog textarea{font-size:16px!important} } /* ④ 달력 칸 — 한 달 격자가 좁아 14px 를 강제하면 날짜가 서로 밀린다. 숫자는 읽히게 올리되 칸을 넘지 않는 선에서 멈춘다. */ .cd .d{font-size:13px} .cd .ev,.cd .ev.k{font-size:12px} .cd .d .cnt{font-size:11px!important} /* ⑤ 숫자 배지 — 원형이라 14px 면 원이 깨진다. 같은 숫자가 본문에도 있다. */ #subnav button[data-badge]::after, .side-nav .tabs button[data-badge]::after, #mnav button[data-badge]::after, #mdrawer-list button[data-badge]::after, #bell[data-badge]::after {font-size:12px} /* ── 44차-b · 표 머리 · 지표 이름 · 본문 인라인 글자 ─────────────────────── */ /* 표 머리는 누르면 정렬된다 → 조작 요소다 */ main.wrap th,main.wrap thead th{font-size:14px!important} main.wrap .rpt th,.a4 th,.xl th{font-size:inherit!important} /* 지표 이름은 주요 정보 · 딸린 보조 줄만 13px */ .stat .k,.kpi-t .k,.adm-k .l,.c3-k .l,.tdy .l,.at-lvnum .k,.bot-kv .k, #prog-mini .pg-l,.sboard .tile .k,.sboard.sb-line .tile .k{font-size:14px!important} .stat .s,.kpi-t .s,.adm-k .s,.c3-k .s,.tdy .s,#prog-mini .pg-s{font-size:13px} /* 본문에 직접 박아 둔 작은 글자 — 13px 바닥 (인쇄 상자 #an-print 는 main.wrap 밖) */ main.wrap [style*="font-size:9"],main.wrap [style*="font-size:10"], main.wrap [style*="font-size:11"],main.wrap [style*="font-size:12"], main.wrap [style*="font-size:13"]{font-size:13px!important} main.wrap .a4 [style*="font-size"],main.wrap .xl [style*="font-size"], main.wrap .rpt [style*="font-size"],main.wrap .c3-rp [style*="font-size"]{font-size:inherit!important} /* 표 안의 값은 칸 글자 크기를 따른다(인라인 12px 로 박힌 곳이 많다) */ main.wrap td[style*="font-size"],main.wrap td [style*="font-size"]{font-size:14px!important} main.wrap td .sub,main.wrap td .sub *{font-size:13px!important} main.wrap .rpt td[style*="font-size"],main.wrap .a4 td[style*="font-size"]{font-size:inherit!important} /* 창(dialog)도 같은 바닥 */ dialog p,dialog label,dialog .field label{font-size:14px} dialog [style*="font-size:11"],dialog [style*="font-size:12"],dialog [style*="font-size:13"]{font-size:13px!important} /* ── 44차-c · 전역검색 combobox ─────────────────────────────────────────── */ .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} #pal .pal-grp{display:block} #pal .pal-r[aria-selected="true"]{background:var(--accent-soft)} /* 쪽 넘기기 */ .cl-pager{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp4); padding:var(--sp3) 0 0;margin-top:var(--sp3);border-top:1px solid var(--line)} .cl-p-info{font-size:14px;} .cl-p-info b{color:var(--ink);font-variant-numeric:tabular-nums} .cl-p-btns{display:flex;align-items:center;gap:var(--sp2);margin-left:auto;flex-wrap:wrap} .cl-p-now{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums; min-width:86px;text-align:center;white-space:nowrap} @media (max-width:1180px){ /* 좁은 화면: 덜 중요한 열부터 접는다(표 안쪽 가로 스크롤을 만들지 않는다) */ } @media (max-width:900px){ .cl-p-btns{margin-left:0;width:100%} } /* ── 44차-e · 토큰으로 크기를 정하던 나머지 ─────────────────────────────── */ /* 누를 수 있는 것은 보조 크기를 쓰면 안 된다 */ main.wrap .btn.xs, main.wrap .st-d summary, main.wrap .set-kbd {font-size:14px} main.wrap .set-kbd{font-size:13px} /* 단축키 표시는 읽기용 라벨 */ /* 창 안에 남을 수 있는 아주 작은 인라인 */ dialog [style*="font-size:9"],dialog [style*="font-size:10"]{font-size:13px!important} /* 12.5px 을 그대로 쓰던 남은 곳 */ .c3-mh .mm, .c3-st, .msg-att .att, .msg-wait {font-size:13px!important} /* ── 44차-f · 화면에 그리는 그래프 눈금·징후 꼬리표 ─────────────────────── */ /* 인쇄용 보고서(.rpt·#an-print)는 쪽수 때문에 그대로 두고, 화면 쪽만 올린다 */ #c3-body .rpt-cols text,#c3-body .rpt-dn text,#c3-body .rpt-cols .lg,#c3-body .rpt-cols .lg span{font-size:13px!important} #view-report .rp-flag, #check-mini .ck-main .tg {font-size:13px} /* ── 44차-g · 마지막 두 곳 ──────────────────────────────────────────────── */ main.wrap .cal .n{font-size:13px!important} /* 기한 목록의 대상(전체·법인·개인) */ /* '원문 보기' 는 링크다 */ /* ── 44차-h · 업무센터 빈 화면 ──────────────────────────────────────────── */ /* ── 44차-k · 접근성 마무리 (axe) ───────────────────────────────────────── */ /* 표 머리 안의 단추 — 머리글처럼 보이되 실제로는 단추다 */ main.wrap th .th-sort{display:inline-flex;align-items:center;gap:4px;width:100%; border:0;background:none;padding:0;margin:0;font:inherit;color:inherit; cursor:pointer;text-align:inherit;justify-content:inherit} main.wrap th.c-num .th-sort,main.wrap th[style*="right"] .th-sort{justify-content:flex-end} main.wrap th .th-sort:hover{color:var(--ink)} main.wrap th .th-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} /* 투명도로 흐리게 하면 대비 계산이 깨진다 — 색으로 흐리게 한다 */ .fchip b{opacity:1;color:var(--accent-ink)} .sboard .tile.dim{opacity:1} .sboard .tile.dim .k,.sboard .tile.dim .v,.sboard .tile.dim .s{color:var(--mute)} /* 파란 단추 위 글자는 흰색 — 42차의 .btn.at-big{color:--ink} 가 덮고 있었다 */ main.wrap .btn.primary,main.wrap .btn.primary.at-big{color:#fff} main.wrap .btn.primary[disabled],main.wrap .btn.primary:disabled{color:var(--mute)!important} /* 못 누르는 상태는 색이 아니라 테두리와 바탕으로 알린다 */ main.wrap .btn.at-big.at-blocked{background:var(--bad-soft);color:var(--bad-ink); border:2px solid var(--bad)} .tblwrap[role="region"]:focus-visible,.c3-rp[role="region"]:focus-visible{ outline:2px solid var(--accent);outline-offset:-2px} /* ── 44차-l · 표 머리 단추가 머리 칸을 꽉 채우게 ────────────────────────── */ main.wrap th .th-sort{min-height:28px} @media (max-width:1024px){ main.wrap th .th-sort{min-height:44px} } @media (min-width:1025px){ /* ── 44차-m · 데스크톱 28px 바닥에 못 미치던 나머지 ─────────────────────── */ #view-main .detail-head .btn.sm,#view-main .main-grid .detail-head .btn.sm{min-height:28px} .sb-dense,.sb-badge,#statusbar .sb-dense,#statusbar .sb-badge, #mdrawer .sb-dense,#mdrawer .sb-badge{min-height:28px} } /* =================================================================== == 44차 · 색 대비 (2026-09-19) == 24px 미만 글자 4.5:1 · 큰 글자 3:1 · 아이콘·포커스·컨트롤 경계 3:1. 되돌리려면 이 블록만 지우면 된다. =================================================================== */ /* ── 컨트롤 경계 — 흰 단추가 흰 바탕에 놓여 경계가 유일한 식별 수단이다 ── */ .btn,button.btn,#pal-open,.hd-pf,.empty .ebtn .btn,.empty .ebtn .btn.sm,button.card, /* ⚠ input[type=text] 는 type 을 실제로 적은 칸만 고른다 — 안 적은 칸(기본 text)이 빠진다 */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select,textarea{ border-color:var(--border-interactive)!important } .btn.primary,.btn.acc,.btn[disabled],.btn:disabled{ border-color:transparent!important } /* 표 안쪽 줄·카드 테두리는 장식이라 그대로 둔다(글자가 아니고 식별에 쓰이지 않는다) */ /* 그 밖의 단추 — 테두리가 '있는' 단추만 색이 바뀜다(border-width:0 은 그대로). 상태를 색으로 알리는 단추(.on · aria-selected · .primary · .pill)는 건드리지 않는다. */ button:not(.on):not(.primary):not(.acc):not(.sel):not(.pill):not(.lnk):not([aria-selected="true"]):not([aria-pressed="true"]):not([disabled]) { border-color:var(--border-interactive) } /* 누를 수 있는 카드는 그렇지 않은 카드와 구별되게 한다 */ [role="button"].card,.card.owner,.owner{ border-color:var(--border-interactive) } /* ── 자리를 옮겨 다니는 단추는 #statusbar 밖에서도 제 모습이어야 한다 ── 설정 화면·휴대폰 메뉴로 옮기면 꾸밈이 통째로 떨어져 브라우저 기본 회색 단추가 됐다 */ .sb-dense,.sb-badge{ background:var(--panel); color:var(--text-secondary); border:1px solid var(--border-interactive); border-radius:999px; padding:5px 11px; font-size:14px; font-weight:600; cursor:pointer; /* 글자 바닥 14px */ display:inline-flex; align-items:center; gap:5px } .sb-dense.on,.sb-badge.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink) } /* 아래 띄 안의 같은 단추는 id 가 붙은 옛 규칙(#statusbar .sb-dense)이 이긴다 — 같은 무게로 다시 적는다 */ #statusbar .sb-dense,#statusbar .sb-badge{ border-color:var(--border-interactive) } /* ── 보조 글자·아이콘 ── */ .sub, .s, .cl-p-info, .msg-2, .c3-list .s, .bot-t .s, .empty span, .note, .meta { color:var(--text-secondary) } span.ar,.ar,.lnk .ar{ color:var(--text-secondary) } svg{ color:inherit } /* ── 상태 색: 작은 글자는 진한 쪽(-ink)을 쓴다 ── */ .chk.on{ color:var(--ok-ink); border-color:var(--ok-ink) } .pill.ok,.pill.warn,.pill.bad{ font-weight:600 } .c3-st.on{ color:var(--ok-ink) } /* ── 채운 컨트롤 위의 흰 글자 ── */ #hd-add{ background:var(--accent-fill) } /* 다크의 밝은 파랑은 흰 글자와 2.75:1 */ /* 배지 바탕은 라이트에서 진한 빨강, 다크에서 밝은 빨강이라 글자색이 서로 반대다 */ /* '조밀'·'배지' 단추는 휴대폰에서 설정 화면으로 옮겨 가므로 #statusbar 로 한정하지 않는다 */ :root[data-theme="dark"] .sb-dense.on,:root[data-theme="dark"] .sb-dense.on span, :root[data-theme="dark"] .sb-badge.on{ color:#fff } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sb-dense.on, :root:not([data-theme="light"]) .sb-dense.on span, :root:not([data-theme="light"]) .sb-badge.on{ color:#fff } } /* ── 포커스 표시 3:1 ── */ :focus-visible{ outline:2px solid var(--accent-fill); outline-offset:2px } #rows tr.kb-act{ outline:2px solid var(--accent-fill); outline-offset:-2px;} /* =================================================================== == 47차 · 거래처 분석 재작성 · 선택/활성 구분 · 업무센터 빈 상태 (2026-09-19) == =================================================================== */ /* ── ① 선택 행과 키보드 활성 행을 확실히 가른다 ────────────────────── 예전에는 선택 #CFE3FF · 활성 #EAF2FF 로 둘 다 파란 배경이라 "두 행이 동시에 선택된 것처럼" 보였다. 이제 **선택 = 옅은 배경 + 왼쪽 막대**, **활성 = 배경 없이 포커스 링만**. */ #rows tr.kb-act{ background:transparent!important } #rows tr.kb-act > td{ box-shadow:inset 0 2px 0 var(--accent-fill), inset 0 -2px 0 var(--accent-fill) } #rows tr.kb-act > td:first-child{ box-shadow:inset 0 2px 0 var(--accent-fill), inset 0 -2px 0 var(--accent-fill), inset 2px 0 0 var(--accent-fill) } #rows tr.kb-act > td:last-child{ box-shadow:inset 0 2px 0 var(--accent-fill), inset 0 -2px 0 var(--accent-fill), inset -2px 0 0 var(--accent-fill) } #rows tr.row:focus{ outline:none } #rows tr.row:focus-visible{ outline:none } #rows tr.row.sel > td{ background:var(--accent-soft) } /* 선택은 옅게 */ #rows tr.row.sel > td:first-child{ box-shadow:inset 3px 0 0 var(--accent-fill) } #rows tr.row.sel.kb-act > td:first-child{ box-shadow:inset 3px 0 0 var(--accent-fill), inset 0 2px 0 var(--accent-fill), inset 0 -2px 0 var(--accent-fill) } /* 슬라이더는 테두리가 아니라 **트랙과 손잡이**로 알아본다 — 옅은 테두리는 오히려 경계 대비 미달로 잡힌다 */ input[type=range]{ border:0!important; background:transparent; accent-color:var(--accent-fill); height:26px } input[type=range]:focus-visible{ outline:2px solid var(--accent-fill); outline-offset:2px } #tdy-tiles .tdy.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} #tdy-tiles .tdy.zero .n{color:var(--text-muted)} table.tdy-t td.nm{white-space:normal;overflow-wrap:anywhere} table.tdy-t td.num i{font-style:normal;color:var(--text-secondary);font-size:13px} /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 44번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 170b 180e */ /* ── ② 분석 화면 · 도구 줄 ─────────────────────────────────────────── */ .an-tools{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:14px } .an-tools .an-f{ display:flex; flex-direction:column; gap:4px; min-width:0 } .an-tools .an-f label{ font-size:13px; font-weight:600; color:var(--text-secondary) } .an-tools #anal-q{ min-width:min(320px,70vw); padding:8px 11px; border-radius:10px; border:1px solid var(--border-interactive); background:var(--panel); color:var(--ink); font-size:14px } .an-tools #anal-owner{ padding:8px 10px; border-radius:10px; font-size:14px } .an-tools .btn{ align-self:flex-end } .an-tools .an-cnt{ margin-left:auto; align-self:flex-end; font-size:14px; font-weight:600; color:var(--text-secondary) } /* ── ③ KPI 카드 ───────────────────────────────────────────────────── */ /* id 로 짚는다 — 옛 층의 .stats 미디어쿼리가 클래스 규칙을 이긴다 */ #anal-stats.an-kpi{ grid-template-columns:repeat(4,minmax(0,1fr))!important; align-items:stretch } .an-kpi .card.stat{ display:flex; flex-direction:column; gap:4px; min-width:0 } .an-kpi .card.stat .v{ font-size:22px; line-height:1.25; word-break:keep-all } @media (max-width:1100px){ #anal-stats.an-kpi{ grid-template-columns:repeat(2,minmax(0,1fr))!important } } @media (max-width:640px){ #anal-stats.an-kpi{ grid-template-columns:minmax(0,1fr)!important } } /* ── ④ 확정/추정 배지 — 색만으로 알리지 않는다(글자를 함께 적는다) ── */ .an-refund{ color:var(--ok-ink); font-weight:700 } .an-dash{ color:var(--text-secondary) } /* ── ⑤ 분석 목록 표 ───────────────────────────────────────────────── */ #anal-body .an-listcard{ overflow:hidden } /* ⚠ fitTables() 가 .tblwrap 에 인라인으로 높이를 박는다 — 분석 목록은 쪽으로 나눠 그리므로 높이를 묶을 이유가 없다. 인라인을 이기려면 !important 가 필요하다(안 그러면 설명 줄과 행이 겹친다). */ table.an-tbl{ width:100%; table-layout:fixed } table.an-tbl th.num-h{ text-align:right } table.an-tbl th,table.an-tbl td{ vertical-align:top } table.an-tbl td.num,table.an-tbl th.num-h{ font-variant-numeric:tabular-nums } table.an-tbl td{ white-space:normal } table.an-tbl .an-nm{ font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } table.an-tbl .sub{ display:block; font-size:13px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } table.an-tbl td.num{ text-align:right } table.an-tbl td.an-go{ text-align:right; color:var(--icon-secondary); font-size:16px; width:28px } table.an-tbl col,table.an-tbl th:nth-child(1){ width:24% } table.an-tbl th:nth-child(2){ width:14% } table.an-tbl th:nth-child(3){ width:17% } table.an-tbl th:nth-child(4){ width:14% } table.an-tbl th:nth-child(5){ width:15% } table.an-tbl th:nth-child(6){ width:16% } tr.an-r{ cursor:pointer } tr.an-r:hover > td{ background:var(--panel2) } tr.an-r:focus{ outline:none } tr.an-r:focus-visible > td{ box-shadow:inset 0 2px 0 var(--accent-fill), inset 0 -2px 0 var(--accent-fill) } tr.an-r:focus-visible > td:first-child{ box-shadow:inset 0 2px 0 var(--accent-fill), inset 0 -2px 0 var(--accent-fill), inset 2px 0 0 var(--accent-fill) } @media (max-width:1279px){ /* 1024~1279px: 덜 중요한 열을 접는다 */ table.an-tbl th:nth-child(1){ width:30% } } @media (max-width:1023px){ /* 768~1023px: 2열 요약 */ table.an-tbl .an-h-go,table.an-tbl td.an-go{ display:none } table.an-tbl th:nth-child(1){ width:40% } } @media (max-width:767px){ /* 767px 이하: 표를 카드 목록으로 */ table.an-tbl,table.an-tbl tbody,table.an-tbl tr,table.an-tbl td{ display:block; width:auto } table.an-tbl thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap } table.an-tbl tr.an-r{ border:1px solid var(--line); border-radius:12px; padding:12px; margin:0 0 10px; background:var(--panel); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px } table.an-tbl tr.an-r > td{ border:0; padding:0; background:none; box-shadow:none!important } table.an-tbl tr.an-r > td.name{ grid-column:1/-1 } table.an-tbl tr.an-r > td.num{ text-align:left } table.an-tbl tr.an-r > td.num::before{ content:attr(data-l); display:block; font-size:12.5px; color:var(--text-secondary); font-weight:600 } table.an-tbl tr.an-r:focus-visible{ outline:2px solid var(--accent-fill); outline-offset:2px } .an-tools #anal-q{ min-width:0; width:100% } .an-tools .an-f{ flex:1 1 100% } } /* ── ⑥ 분석 상세 ──────────────────────────────────────────────────── */ .an-detail{ min-width:0 } /* 왼쪽은 남는 만큼, 오른쪽은 320~380px — minmax(0,…) 가 없으면 안의 표가 칸을 밀어낸다 */ .an-main,.an-side{ display:flex; flex-direction:column; gap:12px; min-width:0 } .an-main .card,.an-side .card{ padding:16px; min-width:0; box-sizing:border-box } .an-detail .detail-head{ margin-bottom:10px } .an-detail p,.an-detail .s{ overflow-wrap:anywhere } /* 차트 */ .an-chart{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 10px; align-items:stretch; min-width:0 } .an-chart .an-ax{ display:flex; flex-direction:column; justify-content:space-between; font-size:12.5px; color:var(--text-secondary); height:150px; text-align:right; white-space:nowrap } .an-bars{ display:flex; align-items:flex-end; height:150px; min-width:0; overflow-x:auto; padding-bottom:2px } .an-bg2{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; min-width:34px; height:100% } .an-pair{ display:flex; align-items:flex-end; gap:3px; width:100%; height:100%; justify-content:center } .an-pair i{ display:block; border-radius:3px 3px 0 0 } .an-pair i.s{ background:var(--accent-fill) } .an-pair i:focus-visible{ outline:2px solid var(--ink); outline-offset:1px } .an-xl{ font-size:12.5px; color:var(--text-secondary); white-space:nowrap } .an-leg{ grid-column:2; display:flex; gap:14px; font-size:13px; color:var(--text-secondary) } .an-leg i{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px } .an-leg i.s{ background:var(--accent-fill) } .an-leg i.b{ background:var(--faint) } /* 시뮬레이터 — 좁은 칸에서도 한 열 */ .an-sim .anal-ctl{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; margin:0 0 14px; min-width:0 } .an-sim .anal-ctl label{ grid-column:1; font-size:14px; font-weight:600 } .an-sim .anal-ctl input[type=range]{ grid-column:1/-1; width:100%; min-width:0 } .an-sim .anal-ctl output,.an-sim .anal-ctl .num{ grid-column:2; grid-row:1; justify-self:end; font-size:14px; font-weight:700; white-space:nowrap } .an-sim .anal-ctl .an-hint{ grid-column:1/-1; font-size:12.5px; color:var(--text-secondary) } .an-sim .an-num{ grid-column:1/-1; justify-self:start; width:140px; max-width:100%; border:1px solid var(--border-interactive); background:var(--panel); color:var(--ink); padding:7px 9px; border-radius:9px; font-size:14px } .an-sim select{ grid-column:1/-1; width:100%; font-size:14px } @media (min-width:1101px){ /* 예상 세액 카드 — 오른쪽 좁은 칸에서는 반드시 한 열 */ .an-side{ position:sticky; top:calc(var(--topbar-h, 56px) + 12px) } } @media (max-width:767px){ /* 하단 동작 — 가로 스크롤 없이 항상 닿는다 */ .an-main .card,.an-side .card{ padding:14px } /* 시뮬레이터를 본문 아래로 */ } /* ── §4-1 · 입력 자료와 근거 (2026-09-19) ── */ .an-st{display:inline-block;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:700; white-space:nowrap;border:1px solid var(--line);color:var(--text-secondary);line-height:1.5} .an-st.filed {background:#E6F4EC;color:#12703F;border-color:#C7E5D5} .an-st.actual{background:#EEF3FB;color:var(--accent-ink,#1B64DA);border-color:#D6E4F7} .an-st.est {background:#EDF1F7;color:var(--text-secondary);border-color:var(--line)} :root[data-theme="dark"] .an-st.filed {background:#12301F;color:#7FD3A3;border-color:#1E4A31} :root[data-theme="dark"] .an-st.actual{background:#17263C;color:#8FBCF8;border-color:#27405F} :root[data-theme="dark"] .an-st.est {background:#23262C;color:#C3CAD6;border-color:#343943} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .an-st.filed {background:#12301F;color:#7FD3A3;border-color:#1E4A31} :root:not([data-theme="light"]) .an-st.actual{background:#17263C;color:#8FBCF8;border-color:#27405F} :root:not([data-theme="light"]) .an-st.est {background:#23262C;color:#C3CAD6;border-color:#343943} } .an-gap{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0 0;background:var(--panel)} .an-gap-h{font-size:14px;font-weight:700;margin:0 0 8px} .an-gap-r{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line)} .an-gap-r:first-of-type{border-top:0} .an-gap-t{flex:none;display:inline-block;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap} .an-gap-l{flex:0 1 auto;min-width:0;font-weight:700;font-size:14px} .an-gap-n{flex:1 1 200px;min-width:0;font-size:13px;color:var(--text-secondary);overflow-wrap:anywhere} .an-src{border:1px solid var(--line);border-radius:12px;margin:10px 0 0;background:var(--panel)} .an-src>summary{padding:11px 14px;cursor:pointer;font-size:14px;font-weight:600;min-height:44px; display:flex;align-items:center} .an-src-t{width:100%;border-collapse:collapse;font-size:13px} .an-src-t th{text-align:left;padding:6px 14px;color:var(--text-secondary);font-weight:600; border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap} .an-src-t td{padding:6px 14px;border-bottom:1px solid var(--line);vertical-align:top} .an-src-t td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 45번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 5개: 180am 180d */ .tdy-sub{font-size:13px;color:var(--text-secondary);margin:8px 0 2px} table.tdy-t{width:100%;border-collapse:collapse;font-size:14px} table.tdy-t th{text-align:left;font-size:13px;color:var(--text-secondary);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap} table.tdy-t td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle} table.tdy-t tbody tr{cursor:pointer} table.tdy-t tbody tr:hover{background:var(--hover,rgba(0,0,0,.03))} /* ── 우선순위 3단계 꼬리표 ── ⚠ `.tier` 라는 이름은 이미 `.seg.tier`(진행 상황·달력 층) 15곳이 쓰고 있다 → `.md-tier` 로 둔다. */ .md-tier{display:inline-block;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:700; white-space:nowrap;line-height:1.5;border:1px solid transparent} /* ── 홈 · 검토가 필요한 거래처 ── */ .ck-tiers{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 10px} #check-mini .ck-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #check-mini .ck-main .md-tier{flex:none} /* ── 업무센터 기한별 ── */ /* ── 홈 오른쪽 열 = 검토가 필요한 거래처 + 자료 미수신 (기한 카드는 업무센터로 옮겼다) ── ⚠ #home-r 의 display 는 건드리지 않는다 — 휴대폰(≤900px)에서 display:contents 여야 카드 순서(order)가 먹는다. 42차가 이미 세로 배치를 하고 있다. */ #view-main #miss-card{grid-area:auto} @media (max-width:900px){ #view-main #miss-card{order:3} #view-main #appr-card{order:4} } /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 46번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 180a 180c 190b */ table.tdy-t .mute{color:var(--text-muted)} .md-tier.miss {background:#EEF3FB;color:var(--accent-ink,#1B64DA);border-color:#D6E4F7} .md-tier.ok {background:transparent;color:var(--text-muted);border-color:var(--line)} :root[data-theme="dark"] .md-tier.miss {background:#17263C;color:#8FBCF8;border-color:#27405F} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .md-tier.miss {background:#17263C;color:#8FBCF8;border-color:#27405F} } .ck-t{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px; border:1px solid var(--line);color:var(--text-secondary);white-space:nowrap} .ck-t b{color:var(--text-primary)} .ck-t.zero{opacity:1;color:var(--text-muted)} .ck-t.zero b{color:var(--text-muted)} #check-mini .ck-main .nm{flex:0 1 auto;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #check-mini .ck-main .tg{flex:1 1 auto;min-width:0;color:var(--text-secondary);font-size:13px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── 검토 처리 상자 ── */ @media (max-width:640px){ /* ═══ 49차 · 휴대폰에서 오늘 업무 표를 카드형으로 (2026-09-20) ═══ 실측: 390px 홈 문서 scrollWidth 571 vs 390 → 181px 가로 밀림. 원인은 7열 표다. */ #todo-mini table.tdy-t,#todo-mini .tdy-t tbody,#todo-mini .tdy-t tr,#todo-mini .tdy-t td{display:block;width:auto} #todo-mini .tdy-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #todo-mini .tdy-t tr{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:0 0 8px} #todo-mini .tdy-t td{border:0;padding:2px 0;white-space:normal;overflow-wrap:anywhere} #todo-mini .tdy-t td.nm{font-weight:700;font-size:15px} #todo-mini .tdy-t td.num{text-align:left} #todo-mini .tdy-t td:empty{display:none} #todo-mini .tdy-t td .btn.sm{width:100%;min-height:44px;margin-top:6px} } /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 47번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 5개: 180e 190a 190c 200a 200bm */ .an-src-t .mute{color:var(--text-muted)} .an-src-t tr.an-src-n td{padding-top:0;border-bottom:1px solid var(--line); color:var(--text-secondary);font-size:13px;overflow-wrap:anywhere} @media (max-width:760px){ .an-src-t th:nth-child(4),.an-src-t td:nth-child(4), .an-src-t th:nth-child(5),.an-src-t td:nth-child(5){display:none} .an-src-t tr.an-src-n td{display:table-cell} } /* ═══════════ 48차 · §4-2 인건비 · §4-3 전기 신고 반영 · §4-4 완성도·근거 (2026-09-20) ═══════════ */ /* ── 분석 완성도 (상단) ── */ .an-cmp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0;padding:8px 12px; border:1px solid var(--line);border-radius:10px;background:var(--panel)} .an-cmp-k{flex:none;font-size:13px;font-weight:700;color:var(--text-secondary)} .an-cmp-v{flex:0 1 auto;min-width:0;font-size:14px;font-weight:700;overflow-wrap:anywhere} .an-cmp.hi .an-cmp-v{color:#12703F} .an-cmp.low .an-cmp-v{color:var(--bad-ink,#D22030)} .an-cmp-l{flex:1 1 100%;display:flex;gap:6px;flex-wrap:wrap;margin-top:2px} .an-cmp-l span{font-size:13px;white-space:nowrap} .an-cmp-l .ok{color:#12703F} .an-cmp-l .no{color:var(--text-muted)} :root[data-theme="dark"] .an-cmp.hi .an-cmp-v,:root[data-theme="dark"] .an-cmp-l .ok{color:#7FD3A3} :root[data-theme="dark"] .an-cmp.mid .an-cmp-v{color:#FFC57A} :root[data-theme="dark"] .an-cmp.low .an-cmp-v{color:#FF9AA6} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .an-cmp.hi .an-cmp-v, :root:not([data-theme="light"]) .an-cmp-l .ok{color:#7FD3A3} :root:not([data-theme="light"]) .an-cmp.mid .an-cmp-v{color:#FFC57A} :root:not([data-theme="light"]) .an-cmp.low .an-cmp-v{color:#FF9AA6} } /* ── 계산 근거 (카드 안 접기) ── */ .an-bs{margin-top:8px;border-top:1px solid var(--line);padding-top:8px} .an-bs-r{display:flex;gap:8px;align-items:baseline;padding:3px 0} .an-bs-r .k{flex:none;width:86px;font-size:13px;color:var(--text-secondary);font-weight:600} .an-bs-r .v{flex:1 1 auto;min-width:0;font-size:13px;overflow-wrap:anywhere} @media (max-width:520px){ .an-bs-r{flex-wrap:wrap} .an-bs-r .k{width:auto} } /* ── 계산 순서 사다리 ── */ .it-lad{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px;margin-top:10px} .it-lad-h{font-size:14px;font-weight:700;margin:0 0 6px} .it-lad-r{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-top:1px solid var(--line);flex-wrap:wrap} .it-lad-r:first-of-type{border-top:0} .it-lad-r .k{flex:1 1 130px;min-width:0;font-size:14px} .it-lad-r .v{flex:none;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap} .it-lad-r .s{flex:1 1 100%;font-size:13px;color:var(--text-secondary);overflow-wrap:anywhere} .it-lad-r.b1{background:var(--panel2,rgba(0,0,0,.02))} .it-lad-r.b1 .k,.it-lad-r.b1 .v{font-weight:700} .it-lad-r.b2 .k,.it-lad-r.b2 .v{font-weight:800;font-size:16px} .it-lad-r.b2{border-top:2px solid var(--border-interactive,var(--line))} /* ── 전기 신고 반영 항목 ── */ .it-pri{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-top:10px;overflow:hidden} .it-pri-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 14px;font-size:14px;font-weight:700} .it-pri-t{width:100%;border-collapse:collapse;font-size:13px} .it-pri-t th{text-align:left;padding:6px 14px;color:var(--text-secondary);font-weight:600; border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap} .it-pri-t td{padding:6px 14px;vertical-align:top} .it-pri-t td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .it-pri-t td i{display:block;font-style:normal;font-size:13px;color:var(--text-muted)} .it-pri-t .mute{color:var(--text-muted)} .it-rs{display:inline-block;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap; border:1px solid var(--line);color:var(--text-secondary)} .it-rs.on {background:#E6F4EC;color:#12703F;border-color:#C7E5D5} .it-rs.end {background:#EDF1F7;color:var(--text-secondary);border-color:var(--line)} .it-rs.off {background:transparent;color:var(--text-muted)} :root[data-theme="dark"] .it-rs.on {background:#12301F;color:#7FD3A3;border-color:#1E4A31} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .it-rs.on {background:#12301F;color:#7FD3A3;border-color:#1E4A31} } @media (max-width:760px){ .it-pri-t th:nth-child(3),.it-pri-t td:nth-child(3), .it-pri-t th:nth-child(4),.it-pri-t td:nth-child(4){display:none} } /* 월별 보고서의 6~8열 접기 규칙은 59차에서 목록을 4열로 줄이며 대상이 사라져 지웠다 */ /* ═══════════ 50차 · §5 거래처 분석 배치 (2026-09-20) ═══════════ 실측 근거 — 좌 478px vs 우 2,483px(좌측 빈 공간 2,005px) · 첫 화면 31.8% · 반기 1개인 거래처 78.6% 에서 차트 잉크 2.6% · 결과 박스 6장이 전부 21px/700 동급. */ /* ② 머리 핵심 3칸 — 첫 화면에서 숫자를 보게 한다 */ .an-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; flex:1 1 100%;margin-top:10px} .an-key-i{display:flex;flex-direction:column;gap:1px;min-width:0;padding:9px 12px; border:1px solid var(--line);border-radius:10px;background:var(--panel)} .an-key-i .k{font-size:13px;color:var(--text-secondary);font-weight:600} .an-key-i .v{font-size:20px;font-weight:800;overflow-wrap:anywhere;line-height:1.25} .an-key-i .s{font-size:13px;color:var(--text-muted);overflow-wrap:anywhere} :root[data-theme="dark"] .an-key-i.hot .v{color:#8FBCF8} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .an-key-i.hot .v{color:#8FBCF8} } @media (max-width:760px){ .an-key{grid-template-columns:minmax(0,1fr)} } @media (min-width:1101px){ /* ③ 결과 박스 — '다음 부가세' 만 크게, 나머지는 2열. 위계가 생기고 오른쪽 높이가 줄어든다 */ /* 거래처명(19px)과 핵심 금액의 차이를 벌린다 */ /* ④ 시뮬레이터만 sticky — 예전에는 오른쪽 칸 전체(2,483px)가 sticky 라 효과가 0 이었다 */ .an-side{align-self:start} .an-side .an-sim{position:sticky;top:calc(var(--topbar-h,56px) + 12px); max-height:calc(100vh - var(--topbar-h,56px) - 140px);overflow:auto;z-index:1} } /* ⑤ 반기가 적을 때 큰 빈 차트를 만들지 않는다 — 막대 그룹 폭을 묶고 가운데로 */ .an-bars{justify-content:center;gap:18px} .an-bg2{flex:0 1 96px;max-width:120px} .an-pair i{width:20px;min-height:4px} /* 매입 막대가 카드 바탕과 2.58:1 이라 비문자 3:1 에 못 미쳤다 → 테두리로 형태를 살린다 */ .an-pair i.b{outline-offset:-1px} /* 왼쪽 칸에 옮겨 온 상세 블록 */ /* 12px 글자가 26개 남아 있었다 — 분석 상세 안에서만 13px 바닥 */ .an-detail .an-hint, .an-detail .an-xl, .an-detail .an-leg {font-size:13px} /* ═══ 51차 · §5 좌우 균형 · 남은 작은 글자 (2026-09-20) ═══ */ /* 분석 상세에 12px 글자가 10개 남아 있었다 — 인쇄 상자(.rpt·.a4)는 제외한다 */ .an-detail *:not(.rpt):not(.a4){font-size:inherit} .an-detail .pill, .an-detail .sub, .an-detail .legend2, .an-detail caption {font-size:13px} /* ═══ 52차 · §5 좌우 균형 (2026-09-20) ═══ m29 뒤 실측: 좌 2,175 / 우 1,608 — 한 방향만 고치는 균형기가 반대로 넘겼다. '세액 구성'(계산 순서)을 지시문대로 오른쪽으로 옮기고 균형기를 양방향으로 바꿨다. */ @media (max-width:760px){ /* 휴대폰에서 핵심 3칸이 첫 화면 밖으로 밀리지 않게 한 줄로 눕힌다 */ .an-key-i{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:2px 8px;padding:8px 10px} .an-key-i .k{flex:0 0 auto} .an-key-i .v{flex:1 1 auto;text-align:right;font-size:18px} .an-key-i .s{flex:1 1 100%} } /* ═══ 53차 · §5 (2026-09-20) ═══ 흘림 칸을 없애고 두 칸만 쓴다 */ #an-left-detail,#an-right-detail{display:flex;flex-direction:column;gap:12px} #an-left-detail:empty,#an-right-detail:empty{display:none} #an-left-detail>*,#an-right-detail>*{margin-top:0} /* ═══ 54차 · §5 차트 (2026-09-20) ═══ 매입 막대 #98A2B3 은 흰 바탕과 2.57:1 로 비문자 3:1 미달이었다 → --border-interactive(3.67:1). 색만으로 매출·매입을 가르지 않게 빗금을 넣는다. */ .an-pair i.b{background:var(--border-interactive,#7D8697);outline:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.38) 0 2px,transparent 2px 5px)} .an-bars.mo{gap:6px} .an-bars.mo .an-bg2{flex:1 1 0;min-width:22px;max-width:56px} .an-bars.mo .an-pair i{width:9px} @media (max-width:760px){ .an-bars.mo .an-pair i{width:7px} .an-bars.mo .an-bg2{min-width:18px} } /* 기간이 하나뿐일 때 — 큰 플롯 대신 금액 비교 줄 */ .an-one{display:flex;flex-direction:column;gap:8px} .an-one-h{font-size:13px;color:var(--text-secondary);font-weight:600} .an-one-r{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,2fr); align-items:center;gap:10px;min-height:32px} .an-one-r .k{font-size:14px;color:var(--text-secondary);font-weight:600} .an-one-r .v{font-size:17px;font-weight:700;text-align:right} .an-one-r .t{display:block;height:14px;border-radius:var(--r-pill);background:var(--bg);overflow:hidden} .an-one-r .t i{display:block;height:100%;border-radius:var(--r-pill)} .an-one-r .t i.b{background:var(--border-interactive,#7D8697); background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.38) 0 2px,transparent 2px 5px)} .an-one-r .t i.d{background:var(--ok,#07875B)} .an-one-r .t i.m{background:var(--bad,#D92D4A)} .an-one-n{font-size:13px;color:var(--text-muted);margin:2px 0 0;line-height:1.5} th.mo-part{opacity:1} th.mo-part .mo-pt{display:block;font-style:normal;font-size:13px;font-weight:600;color:var(--warn,#C86A13)} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 48번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 200b */ /* ═══ 55차 · §3 수집 주기 표시 · 상단 Ctrl K 겹침 (2026-09-20) ═══ */ .md-partbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px; padding:10px 14px;border:1px solid var(--warn,#C86A13);border-radius:12px; background:color-mix(in srgb,var(--warn,#C86A13) 8%,var(--panel));font-size:14px;line-height:1.5} .md-partbar b{font-weight:700;} .md-partbar span{flex:1 1 260px;min-width:0;color:var(--text-secondary)} .md-partbar .btn{flex:none} /* 완결/수집중 꼬리표 */ .md-part{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:700; background:color-mix(in srgb,var(--warn,#C86A13) 12%,transparent); border-radius:6px;padding:1px 6px;white-space:nowrap} /* ⚠ 'Ctrl K' 배지가 프로필 이름을 덮던 것 — 2차 디자인의 `.gsearch kbd{position:absolute;right:9px}` 가 새 팔레트 단추의 배지에도 걸려 단추(996~1316) 밖 1368~1416 에 얹혀 있었다(프로필 칩 1322~1405). 단추 안쪽 제자리로 돌려놓고, 자리가 좁아지는 폭에서는 아예 감춘다. */ .topbar .gsearch.as-btn kbd,.pal-btn kbd{position:static;right:auto;top:auto; transform:none;flex:none} @media (max-width:1279px){ .pal-btn kbd{display:none} } .hw-b.on{font-weight:700} /* ⚠ 다크에서 --accent-ink 는 '어두운 바탕 위 글자용' 밝은 파랑이라 채움색으로 쓰면 흰 글자와 1.91:1 이 된다(실측). 채움색은 테마별로 못 박는다. */ :root[data-theme="dark"] .hw-b.on{background:#2B6FE3;border-color:#2B6FE3;color:#fff} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hw-b.on{background:#2B6FE3;border-color:#2B6FE3;color:#fff} } /* ⚠ 흰 글자를 반투명으로 흐리게 하면 대비 계산이 깨진다(실측 3.60:1 · axe serious). 색을 흐리게 하지 말고 굵기로 가른다 — #1B64DA 위 흰 글자는 5.41:1. */ .hw-b.on i{color:#fff;font-weight:600} .team-t .num-h,.team-t td.num{text-align:right;font-variant-numeric:tabular-nums} .team-t td.num.hot{color:var(--bad-ink,#D22030);font-weight:700} /* 빈 카드는 한 줄로 — 없는 것을 없다고만 말하고 자리를 비켜 준다 */ .main-grid .card.lean .empty{display:block;text-align:left} .main-grid .card.lean .empty b{display:inline;font-size:14px;font-weight:600;color:var(--text-secondary)} .main-grid .card.lean .empty span,.main-grid .card.lean .empty br{display:none} .main-grid .card.lean .empty .ebtn{display:inline-flex;margin-left:8px} .main-grid .card.lean .tdy-tiles{--lean:1} .main-grid .card.lean .tdy-sub{display:none} /* 56차 보강 — 빈 카드 접힘은 인라인 style 을 이겨야 한다(결재 카드의 padding:12px) */ .main-grid .card.lean .empty{padding:10px 0 2px!important;min-height:0} .main-grid .card.lean{padding-bottom:10px} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 49번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 200bm */ /* ═══ 56차 · 홈 개인별 보기 (2026-09-20) ═══ 실측: 사람을 바꿔도 같은 화면이었고 '누구 기준인가' 가 어디에도 없었다. 담당 1곳인 사람은 빈 카드 6개짜리 화면을 봤다. */ .hw-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 14px} .hw-bar .hw-k{font-size:14px;font-weight:700;color:var(--text-secondary);flex:none} .hw-list{display:flex;flex-wrap:wrap;gap:6px;min-width:0} .hw-b{display:inline-flex;align-items:baseline;gap:6px;min-height:34px;padding:0 12px; border:1px solid var(--border-interactive,#7D8697);border-radius:999px;background:var(--panel); font:inherit;font-size:14px;color:var(--text-primary);cursor:pointer;white-space:nowrap} .hw-b i{font-style:normal;font-size:13px;color:var(--text-muted)} .hw-b:hover{background:var(--bg)} .hw-s{font-size:14px;color:var(--text-muted);flex:none} .hw-warn{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--warn,#C86A13);font-weight:600} @media (max-width:760px){ .hw-bar{gap:6px 8px} .hw-s{flex:1 1 100%} } /* 담당자별 현황 */ .team-t{width:100%;border-collapse:collapse} .team-t th,.team-t td{padding:8px 10px;font-size:14px;border-bottom:1px solid var(--line)} .team-t thead th{font-size:14px;color:var(--text-secondary);font-weight:600;text-align:left} .team-t tbody tr{cursor:pointer} .team-t tbody tr:hover{background:var(--bg)} .team-t td b{font-weight:700;margin-right:6px} .team-t tfoot th{padding:8px 10px;font-size:14px;border-top:1px solid var(--line);border-bottom:0} .team-t td i.md-tier{font-style:normal;margin-left:4px} /* 수집 일정 표시 — 휴대폰에서는 줄을 아껴 규칙만 남기고 날짜는 길게 눌러 보는 설명으로 */ .hw-c{color:var(--text-muted);white-space:nowrap} @media (max-width:760px){ .hw-c{display:none} } /* ═══ 57차 · 휴대폰에서 홈이 가로로 밀리던 것 (2026-09-20) ═══ 실측 390px: 문서 592px — 담당자별 현황 표(6열 551px)가 스크롤 칸 없이 놓여 있었다. */ .team-wrap{max-height:none!important;overflow-x:auto} @media (max-width:900px){ /* 칩 줄은 좁은 화면에서 한 줄로 굴린다 — 접히면 390px 에서 219px, 768px 에서 102px 를 먹었다 */ .hw-list{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; padding-bottom:4px;scrollbar-width:thin;flex:1 1 100%} .hw-b{flex:none} } /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 50번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 200b 210a 210c 210e */ @media (max-width:760px){ /* 표를 카드 목록으로 — 47차의 거래처 분석 목록과 같은 방식 */ .team-wrap{overflow:visible} .team-t,.team-t tbody,.team-t tr,.team-t td,.team-t tfoot,.team-t th{display:block;width:auto} .team-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .team-t tbody tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 8px; display:grid;grid-template-columns:1fr 1fr;gap:4px 10px} .team-t tbody td{border:0;padding:2px 0;display:flex;align-items:baseline;gap:6px;min-width:0} .team-t tbody td[data-l="담당자"]{grid-column:1/-1;font-size:15px} .team-t tbody td.num::before{content:attr(data-l);font-size:13px;color:var(--text-secondary);flex:none} .team-t tbody td.num{justify-content:space-between;text-align:right} .team-t tbody td.team-go{grid-column:1/-1;padding-top:6px} .team-t tbody td.team-go .btn{width:100%} .team-t tfoot tr{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 12px;border-top:1px solid var(--line)} .team-t tfoot th{padding:0;font-size:14px} .team-t tfoot th.num::before{content:attr(data-l) " ";color:var(--text-secondary);font-weight:400} } /* ═══ 58차 · 접근성·대비·제목 위계 (2026-09-20 검수 확정분) ═══ */ /* ⑤ 본문 바로가기 */ .skip{position:absolute;left:-9999px;top:0;z-index:300;padding:10px 16px;border-radius:0 0 10px 0;font-size:15px;font-weight:700;text-decoration:none} .skip:focus{left:0} /* ⑦ 카드 제목이 본문보다 작던 것 — 제목은 제 자리 규칙이 정한다 */ main.wrap h3,dialog h3{font-size:17px} main.wrap .rpt h3,main.wrap .a4 h3,main.wrap .rpt-sec h3{font-size:inherit} /* ⑧ 알림 벨 — 아이콘이 자기 배지에 덮여 '빨간 점' 으로만 보였다 */ #bell{width:42px;height:42px} /* ⑨ 명암비 — opacity 로 흐리게 하면 대비 계산이 깨진다. 색으로 낮춘다 */ .fchips .fchip i,.fchip i{opacity:1;color:var(--text-secondary,#566072)} .mo-pt,.md-part,.md-partbar b{color:var(--warn-ink,#8A4A0F)} .md-partbar{border-color:var(--warn-ink,#8A4A0F)} td.mo-num.na,.mo-num.na{color:var(--text-secondary,#566072)} /* 다크에서 라이트 값을 하드코딩하던 상태색 — 토큰으로 */ .rpt-tb .pos,.rp-flag.ok{color:var(--ok-ink)} /* ⑪ 거래처 분석에만 남아 있던 12~12.5px */ /* 58차 보강 — 데스크톱 28px 바닥에 못 미치던 조작 요소 520개(검수 실측) */ main.wrap button.chk{min-width:28px;min-height:28px} main.wrap button.pill,main.wrap .pill[role=button]{min-height:28px} /* '원문 보기' 는 링크다 — 글자만큼만 잡혀 60x25 였다 */ /* 서식 고르기 체크칸 — 네모는 18px 로 키우고 실제 누르는 자리는 라벨이 맡는다 */ #view-intake input[type=checkbox]{width:18px;height:18px} #view-intake label.cb,#view-intake .ik-forms label{min-height:28px;display:inline-flex;align-items:center;gap:8px} /* ═══ 59차-c · 빈 상태의 다음 행동 (2026-09-20 검수 확정 #25) ═══ */ .empty>b{display:block;font-size:15px;color:var(--text-primary,var(--ink));margin-bottom:4px} .empty .e-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px} .empty .e-act .btn{min-height:32px} @media(max-width:1024px){ .empty .e-act .btn{min-height:44px} } /* ═══ 59차-d · 자료가 없을 때 화면 아래가 400px 넘게 비던 것 (2026-09-20 검수 확정 #38) ═══ 실측(1440×900 · 자료 없음): 월별 보고서 479 · 거래처 정보 458 · 분석 429 · 결재 429 · 자료 미수신 413 · 월별 457 px 가 안내문 아래로 빈 채 남았다. 없애는 것이 아니라 **안내를 그 자리의 가운데**에 둔다 — 빈 화면은 비어 보여야 하되 버려진 듯 보이면 안 된다. */ main.wrap .card>.tblwrap>table>tbody>tr>td.empty, main.wrap .card>.tblwrap>table>tbody>tr>th.empty{height:clamp(170px,30vh,340px);vertical-align:middle} @media (max-height:700px){ main.wrap .card>.tblwrap>table>tbody>tr>td.empty{height:auto} } /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 51번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 8개: 200bm 220f 230cm 951a 951e 951g 951h 951i */ /* ⑩ 홈 카드의 '전체 보기' 단추가 #check-mini 안에서만 꾸며져 있어 기본 회색 단추로 그려졌다 */ .ck-all{display:block;width:100%;margin-top:8px;padding:9px 12px;border:1px solid var(--border-interactive,#7D8697); border-radius:10px;background:var(--panel);color:var(--text-primary);font:inherit;font-size:14px; font-weight:600;cursor:pointer;text-align:center} .ck-all:hover{background:var(--bg)} /* ═══ 64차 · 디자인 재채점(79.1/100) 반영 — 반응형 (2026-09-23) ═══════════ 되돌리려면 이 블록만 지우면 된다. 확정 high 2건이 여기 있다. */ /* ① 거래처 360 '매출·매입' — 같은 rpHtml 출력이 월별 보고서에서는 #rp-doc{overflow:auto} 안이라 안 넘친다. 여기만 감싸개가 없어 390px 에서 문서가 80px 밀리고 하단 탭바·비서 단추가 잘렸다. */ .c3-rp{overflow-x:auto;-webkit-overflow-scrolling:touch} .c3-rp>*{min-width:0} /* 검토 카드의 작은 단추 경계가 1.22:1 — 흰 카드 위 흰 단추라 경계가 유일한 식별 수단이다(필요 3) */ #check-mini .ck-act,#check-mini .ck-all{border-color:var(--border-interactive,#7D8697)} /* 951_개편_홈_셸 — 2026-09-30 대개편 층(이 영역 작업자만 고친다) ① 홈(#home3) — 900 의 옛 홈 블록(목업 이름 .lb/.row/.v 로만 잡아 JS 의 h3- 클래스에 하나도 안 걸리던 것)을 걷어내고 **JS(900_d3_홈_셸.js)가 내보내는 h3- 클래스 그대로** 여기서 잡는다. 클래스 목록은 그 파일 머리 주석 = 계약. ② 셸 — 본문 포커스 테두리 · 사이드바 구분선/홈 아이콘 · 알림 벨 배지 · 화면색 스위치 자리 ③ 공통 — 0 은 조용히(.is-zero) · 걸린 필터는 칸 테두리(data-on) · 휴대폰 지표 띠/칩 줄 ④ 소식(#view-news) — 한 건 한 줄 되돌리기: 이 파일 비우기 + 900_d3_디자인v3.css 의 D3-e 블록 복원(scratchpad/eval/bak_home). */ /* ═══ ① 홈 ═══ */ #view-main:has(>#home3)>.greet,#view-main:has(>#home3)>#home-who,#view-main:has(>#home3)>#stats, #view-main:has(>#home3)>#kpi,#view-main:has(>#home3)>#season,#view-main:has(>#home3)>.main-grid, #view-main:has(>#home3)>#news-strip,#view-main:has(>#home3)>.news-strip{display:none!important} /* ═══ ④ 소식·개정안 — 한 건 한 줄, 요약·안내문은 펼침 ═══ */ /* ═══ ⑤ 3차(2026-09-30 오후 · 2차 심사 반영) ═══ */ /* 인사말의 N 은 굵은 본문색 — 강조색(주황)은 행동 단추·링크에만, 빨강은 위험에만 */ #view-main #home3 .h3-sub b{color:var(--ink)!important} /* 핵심 칸 ① 다음 기한 — 오늘 마감이면 가장 먼저 보이게(빨강 대신 경고색 채움) */ #view-main #home3 .h3-kpi.due0{background:var(--warn-soft);border-color:var(--warn-fill)} #view-main #home3 .h3-kpi.due0 .h3-lb,#view-main #home3 .h3-kpi.due0 .h3-lb .h3-m{color:var(--warn-ink)} #view-main #home3 .h3-kpi.due0 .h3-dv,#view-main #home3 .h3-kpi.due3 .h3-dv{color:var(--warn-ink)} #view-main #home3 .h3-dn{align-items:flex-end;gap:4px;width:min(62%,240px)} #view-main #home3 .h3-dn>b{max-width:100%;font-size:15px;line-height:20px;font-weight:700;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-main #home3 .h3-dn .h3-leg span::before{display:none} #view-main #home3 .h3-dn .h3-leg{font-size:13px!important} #view-main #home3 .h3-dn .h3-ov,#view-main #home3 .h3-dn .h3-ov b{color:var(--bad-ink)} /* 자료 미수신 ⓘ(수집 대상 밖) */ #view-main #home3 .h3-leg .h3-nod{cursor:help;color:var(--mute)} /* 이번 주 — 기한 칸은 기한 이름(툴팁에만 있던 것) · 기한 목록의 오늘 줄 */ #view-main #home3 .h3-day .ev.dl{color:var(--warn-ink)} #view-main #home3 .pill.today{background:var(--warn-soft);color:var(--warn-ink);box-shadow:inset 0 0 0 1.5px var(--warn-fill);font-weight:700} #view-main #home3 ul.h3-dues li.d0>button{background:var(--warn-soft);border-radius:10px;padding:4px 8px;margin:0 -8px;width:calc(100% + 16px)} #view-main #home3 ul.h3-dues li.d0 .nm{font-weight:700} #view-main #home3 ul.h3-dues li.d0 .dt{color:var(--warn-ink)} #view-main #home3 ul.h3-dues li.d0+li>button{border-top-color:transparent} @media (max-width:767px){ /* 휴대폰: 보는 기준 토글은 인사말 줄 오른쪽 작은 두 칸(전체 폭 줄을 없앤다) */ #view-main #home3 .h3-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px} #view-main #home3 .h3-hi{display:contents} #view-main #home3 .h3-hello{grid-column:1;grid-row:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-main #home3 .h3-sub{grid-column:1/-1;grid-row:2;margin:0} #view-main #home3 .h3-seg{grid-column:2;grid-row:1;width:auto;margin:0;padding:2px} #view-main #home3 .h3-seg button{flex:none;padding:0 10px;font-size:13px!important} #view-main #home3 .h3-kpi.due0 .h3-v{color:var(--warn-ink)} } /* 홈 글자 바닥 13px — 범례·알약·요일 이름(12px 이 홈에서 가장 많이 쓰였다) */ #view-main #home3 .pill,#view-main #home3 .h3-leg,#view-main #home3 .h3-wkleg,#view-main #home3 .h3-day .dw,#view-main #home3 .h3-day .ev{font-size:13px!important} #view-main #home3 .h3-lb{font-size:14px} #view-main #home3 .h3-day .ev .h3-short{display:none} @media (max-width:767px){ #view-main #home3 .h3-day .ev .h3-short{display:inline} } /* 업무센터를 메뉴에서 뺀 동안: 일정 화면의 '지금 할 일 N' 단추(955 · 업무센터로 넘기는 입구, 홈 인사말과 같은 건수)는 감춘다 */ @media (min-width:1025px){ /* ═══ 2026-09-30 최종 심사 반영 (홈·셸) ═══ ① 넓은 화면: 왼쪽(할 일+핵심 칸)과 오른쪽 '이번 주' 의 아래 끝을 맞춘다 — 짧은 쪽의 할 일 카드가 늘어난다(빈 공간을 내용으로 채우지 않는다) ② ≥1280: 줄 높이·글자를 한 단계 — 위에 몰린 인상을 줄인다 ③ 달력 칸의 기한 이름 = 목록과 같은 짧은 이름(간이지급명세서) — 4글자에서 두 줄로 접는다 ④ 거래처 분석: 홈 부가세 기한에서 걸어 온 '다음 부가세' 거르기 칩 */ #view-main #home3 .h3-grid{align-items:stretch} #view-main #home3 .h3-colL>#h3-todo{flex:1 1 auto} } @media (min-width:1280px){ #view-main #home3 ul.h3-todo li>button{min-height:52px;font-size:15px} #view-main #home3 .h3-t{font-size:15px} #view-main #home3 .h3-due{font-size:14px} #view-main #home3 .h3-day{min-height:96px;padding-top:10px;padding-bottom:10px} #view-main #home3 .h3-day .dn{width:32px;height:32px;font-size:15px} #view-main #home3 ul.h3-dues li>button{min-height:46px;font-size:15px} #view-main #home3 .h3-grid{gap:20px} #view-main #home3 .h3-colL{gap:20px} } #view-main #home3 .h3-day .ev.dl{white-space:normal;max-height:32px} #view-main #home3 .h3-day .ev.dl .h3-long{display:block;line-height:16px;word-break:keep-all;overflow:hidden} @media (max-width:767px){ #view-main #home3 .h3-day .ev.dl .h3-long{display:none} } /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 52번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 210d 210em 220c */ main.wrap>.card>.empty:only-child, main.wrap .an-detail>.card>.empty:only-child, main.wrap #anal-body>.card>.empty:only-child {min-height:clamp(150px,26vh,300px); display:flex;flex-direction:column;align-items:center;justify-content:center} .bl-t td:first-child{white-space:normal;overflow-wrap:anywhere} @media (max-width:767px){ /* ③ 휴대폰에서 카드로 — 열이 8~9개인 표 넷 (59차-b 와 같은 규칙) */ table.card-sm,table.card-sm tbody,table.card-sm tr,table.card-sm td{display:block;width:auto} table.card-sm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} table.card-sm tbody>tr{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 10px; background:var(--panel)} table.card-sm tbody>tr>td{border:0;padding:2px 0;background:none!important;box-shadow:none; text-align:left!important;width:auto!important;white-space:normal} table.card-sm td[data-l]{display:flex;gap:10px;align-items:baseline;justify-content:space-between} table.card-sm td[data-l]::before{content:attr(data-l);flex:none;font-size:13px;font-weight:600; color:var(--text-secondary,#566072)} table.card-sm td[data-l]:empty{display:none} table.card-sm td:first-child{font-size:15px;font-weight:600;display:block;padding-bottom:6px} table.card-sm td:first-child::before{display:none} table.card-sm tbody>tr>td.empty{display:table-cell!important;padding:20px 8px} table.card-sm tbody>tr:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px} table.card-sm .btn{min-height:44px} /* ③ 열이 10~12개인 둘은 카드가 아니라 **열 우선순위**로 — 12줄 카드는 카드가 아니다 */ #view-monthly .mo-table th:nth-child(2),#view-monthly .mo-table td:nth-child(2){display:none} #view-monthly .mo-table th:nth-child(n+3):not(:nth-last-child(-n+4)), #view-monthly .mo-table td:nth-child(n+3):not(:nth-last-child(-n+4)){display:none} } /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 53번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 7개: 210e 220a 220b 220d 230c */ @media (max-height:700px){ main.wrap>.card>.empty:only-child{min-height:0;display:block} } /* ═══ 60차 · 검토 단계 색을 팔레트에서 뽑는다 · 단계 칩을 누를 수 있게 (2026-09-20) ═══ 실측: 확인 바탕 #FDF0DF 는 채도 88% 로 페이지(#F4F7FB · 채도 47%)보다 두 배라 혼자 떴다. 세 단계를 **같은 방식**으로 만든다 — 흰 바탕에 토큰을 10%(바탕)·28%(테두리) 섞는다. 긴급 --bad #D92D4A → #FBEAED / #F4C4CC 확인 --warn #C86A13 → #FAF0E7 / #EFD5BD 참고 페이지 색상 214° 중립 → #F2F5F9 / #D9E0EA 글자는 이미 대비를 통과한 --bad-ink · --warn-ink · --text-secondary 를 그대로 쓴다. */ .md-tier.urgent{background:#FBEAED;color:var(--bad-ink,#B02038);border-color:#F4C4CC} .md-tier.check {background:#FAF0E7;color:var(--warn-ink,#8A4A0F);border-color:#EFD5BD} .md-tier.note {background:#F2F5F9;color:var(--text-secondary,#566072);border-color:#D9E0EA} .ck-t.urgent{border-color:#F4C4CC;background:#FDF5F6;color:var(--bad-ink,#B02038)} .ck-t.urgent b{color:var(--bad-ink,#B02038)} .ck-t.check {border-color:#EFD5BD;background:#FDF8F2;color:var(--warn-ink,#8A4A0F)} .ck-t.check b{color:var(--warn-ink,#8A4A0F)} .ck-t.note {border-color:#D9E0EA;background:#F7F9FC;color:var(--text-secondary,#566072)} .ck-t.note b{color:var(--text-secondary,#566072)} /* 누를 수 있다는 것이 보여야 한다 — 예전에는 cursor:auto 에 핸들러도 없었다 */ .ck-t[data-tier]{cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s} .ck-t[data-tier]:focus-visible{outline:2px solid var(--accent-fill,#2563EB);outline-offset:2px} .ck-t[data-tier]:disabled{cursor:default;background:transparent;border-color:var(--line); color:var(--text-muted);opacity:1} .ck-t[data-tier]:disabled b{color:var(--text-muted)} :root[data-theme="dark"] .md-tier.note, :root[data-theme="dark"] .ck-t.note{background:#1C2028;border-color:#333B47;color:#C3CAD6} :root[data-theme="dark"] .md-tier.check, :root[data-theme="dark"] .ck-t.check{background:#2E2417;border-color:#4C3A1F;color:var(--warn-ink,#F0B476)} :root[data-theme="dark"] .md-tier.urgent, :root[data-theme="dark"] .ck-t.urgent{background:#30191E;border-color:#51242C;color:var(--bad-ink,#FF9AA6)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .md-tier.note, :root:not([data-theme="light"]) .ck-t.note{background:#1C2028;border-color:#333B47;color:#C3CAD6} :root:not([data-theme="light"]) .md-tier.check, :root:not([data-theme="light"]) .ck-t.check{background:#2E2417;border-color:#4C3A1F;color:var(--warn-ink,#F0B476)} :root:not([data-theme="light"]) .md-tier.urgent, :root:not([data-theme="light"]) .ck-t.urgent{background:#30191E;border-color:#51242C;color:var(--bad-ink,#FF9AA6)} } /* ═══ 61차 · 비서 기억 상자 (2026-09-20) ═══ 사람이 남긴 판단·가르친 사실을 답 아래에 띄운다. 답(계산 결과)과 시각적으로 갈라 보이게 한다. */ /* ═══ 62차 · 대표실 '비서 학습' 카드 (2026-09-20) ═══ */ .bl-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp3)} .bl-kpi>div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel);min-width:0} .bl-kpi .k{display:block;font-size:13px;color:var(--text-secondary)} .bl-kpi b{display:block;font-size:22px;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--text-primary)} .bl-kpi small{display:block;font-size:13px;color:var(--text-secondary)} .bl-w{display:flex;flex-wrap:wrap;gap:6px} .bl-w .pill{font-size:13px} .bl-note{margin-top:var(--sp4);font-size:13px;line-height:1.6;color:var(--text-secondary)} @media (max-width:640px){ .bl-kpi{grid-template-columns:1fr 1fr} } @media (min-width:1001px){ /* ═══ 63차 · 디자인 검수 반영 (2026-09-20) ═══════════════════════════════ 되돌리려면 이 블록만 지우면 된다. */ /* ① 떠 있는 비서 단추가 마지막 설명 줄의 오른쪽을 덮던 것 (페이저는 이미 비켜 있다) */ main.wrap .card>.legend2:last-child, main.wrap>.legend2:last-child{padding-right:84px} } @media (min-width:1025px){ /* ⑦ 작은 부품용 눈금 하나(6px)와 칩 두 단 — 예전에는 패딩 5종·높이 4종이었다 */ /* ⚠ 칩 높이를 못 박으면 손가락 폭(≤1024px)의 44×44 규칙(4-47·4-56)을 덮어 회귀가 난다 — 실측 390px 에서 #news-list a 63.9×28 · label.cb 300×28 · .pill 44.2×28 이 됐다. 규격은 **마우스 폭에서만** 건다. */ .rp-flag, .an-gap-t, .an-st, .it-rs, .ms-main .st, .pill { min-height:var(--chip-h); display:inline-flex; align-items:center; padding-top:0; padding-bottom:0; line-height:1.35} .rp-flag, .an-gap-t {padding-left:var(--sp05);padding-right:var(--sp05)} .an-st, .it-rs, .ms-main .st, .pill {padding-left:10px;padding-right:10px} .chk,.btn.sm,.seg button{min-height:var(--chip-h2)} } /* ⑨ 상태 칩 색을 60차의 세 단계 팔레트로 모은다 (인쇄용 .rpt-* 고정색은 그대로 둔다) */ .ms-main .st.none, .rp-flag.urgent, .an-st.none, .it-rs.none, .an-gap-t.none { background:#FBEAED;color:var(--bad-ink,#B02038);border-color:#F4C4CC} .ms-main .st.asked, .rp-flag.check, .an-st.ask, .it-rs.ask, .an-gap-t.ask, .an-cmp.mid .an-cmp-v { background:#FAF0E7;color:var(--warn-ink,#8A4A0F);border-color:#EFD5BD} .an-cmp.mid .an-cmp-v{background:none;border:0} .rp-flag.note, .ms-main .st.fail { background:#F2F5F9;color:var(--text-secondary,#566072);border-color:#D9E0EA} /* ⑥ 자료 미수신 — 항목마다 붉던 것을 중립으로. ✕/✓ 기호가 이미 뜻을 나른다. 빨강은 거래처 줄의 상태 칩 하나(미요청·연동 실패)에만 남긴다. */ /* ⑧ 두 단 균형 — 거래처 360 · 설정 */ .c3-grid>.gb-col,.set-grid>.gb-col{display:flex;flex-direction:column;gap:12px;min-width:0} @media (max-width:900px){ .c3-grid>.gb-col,.set-grid>.gb-col{display:contents} } /* ④ 카드 안쪽 여백은 세 가지뿐이다(기본·tight·flush) — `.stat` 의 옛 선언 다섯 겹을 여기서 덮는다 */ main.wrap .card.stat,main.wrap .stats>.stat{padding:var(--sp3) var(--sp4)} main.wrap .main-grid .card.lean{padding-bottom:var(--sp5)} #view-main .kpi-t{padding:var(--sp3) var(--sp4)} /* ⑧ 홈 빈 상태의 '다음 행동' 단추가 0×0 이었다 — 래퍼 이름이 .ebtn → .e-act 로 바뀌며 숨김 예외만 안 따라갔다. 이름을 맞춘다. */ .main-grid .card.lean .empty .e-act{display:flex} .main-grid .card.lean .empty .e-act .btn, .main-grid .card.lean .empty .e-act button{display:inline-flex} /* ═══ 64차-d · 검사 범위를 넓히자 드러난 대비 미달 둘 (2026-09-23) ═══ t_contrast 가 vat.json 만 주입하던 동안 이 두 자리는 검사에 한 번도 잡히지 않았다. */ /* 원천세 '이번 달 신고 없음' 자리표 — --line2(경계선 색)를 글자에 썼다(1.33:1 · 필요 4.5) */ .dash{color:var(--text-muted,#667085)} @media (max-width:1024px){ /* ═══ 65차 · 손가락 폭에서 44×44 를 못 지키던 자리 (2026-09-23 재채점 확정) ═══ 4-47·4-56 이 '≤1024px 44×44 미만 0개' 를 세워 뒀는데, 검사가 소식·수임동의·원천세를 화면 목록에서 빼고 있어 이 세 자리는 한 번도 검사 대상이 아니었다(재채점이 지적). 실측 390px: #news-list a 63.9×28 · #ik-forms label.cb 300×28(8개가 4px 간격 — 세로 오탭이 곧 '다른 서식 생성') ⚠ 문장 속 링크까지 44px 로 만들면 글줄이 무너진다 → **목록·체크 라벨처럼 한 줄을 통째로 차지하는 것**만. */ /* ⚠ 2500행 `#view-news a[target=_blank]`(1,1,1)가 평범한 규칙을 이긴다 — 같은 무게로 쓴다 */ #view-news a[target="_blank"], #view-amend a[target="_blank"] { min-height:44px;display:inline-flex;align-items:center;padding:4px 10px;margin:-4px -10px} label.cb,.checks label{min-height:44px;align-items:center;padding-top:6px;padding-bottom:6px} #view-intake label.cb{min-height:44px;padding:8px 4px} #ik-forms label.cb{margin-bottom:4px} } /* ═══ 66차 · 재채점 2차 확정 — 색 · 간격 · 위계 · 반복 (2026-09-23) ═══ */ /* ③ 같은 녹색을 쓰는 여섯 곳 중 여기만 다크 대응이 없었다(다크 3.07:1) */ .tri-3 .t.ok b{color:var(--ok-ink,#066B49)} /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 54번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 5개: 220dm 220e 220g 230b 951j */ .mobile-note{display:none;font-size:13px;color:var(--text-secondary,#566072);margin:0 0 8px} @media (max-width:767px){ /* ═══ 63차-b · 아주 넓은 표 둘(원천세·월별)은 카드 대신 '길 잃지 않게' (2026-09-20) ═══ 열이 12~19개라 카드로 펴면 한 거래처가 12~19줄이 된다 — 카드가 아니라 그냥 긴 목록이다. 대신 거래처 칸을 왼쪽에 고정해 옆으로 밀어도 어느 줄인지 보이게 한다. */ #view-monthly .mo-table th:nth-child(n+3):not(:nth-last-child(-n+3)), #view-monthly .mo-table td:nth-child(n+3):not(:nth-last-child(-n+3)){display:none} } /* ⚠ 거래처 칸 고정은 **폭을 가리지 않는다**. 예전에는 ≤767px 에만 걸려 있어, 정작 넘침이 가장 큰 768~1366px 에서 첫 칸이 통째로 밀려 사라졌다(1280px 원천세 실측: 넘침 195px · 이름 288px → 0px). 옆으로 밀지 않으면 아무 일도 없고, 밀면 이름이 따라온다. */ #view-monthly .mo-table th:first-child,#view-monthly .mo-table td:first-child{ position:sticky;left:0;z-index:3;background:var(--panel); box-shadow:1px 0 0 var(--line);overflow:hidden;text-overflow:ellipsis} #view-monthly .mo-table thead th:first-child{z-index:4} #view-monthly .mo-table td:first-child>b{ display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:767px){ #view-monthly .mo-table th:first-child,#view-monthly .mo-table td:first-child{max-width:118px} } /* ═══ 63차-c · 검토 단계 칩은 이제 '누르는 것' 이다 — 조작 요소 14px 바닥을 따른다 ═══ */ .ck-t,.ck-t b{font-size:14px} /* ═══ 63차-d · 카드 여백의 한 번짜리 두 개를 기본으로 · 단계 칩 높이 한 단 (2026-09-20) ═══ */ main.wrap .card#prog-card{padding:var(--sp5)} .ck-t{min-height:var(--chip-h2);padding-top:0;padding-bottom:0} @media (min-width:1001px){ /* ═══ 63차-e · 쪽을 나눈 목록 둘이 정반대로 움직이는 것 — **일부러 그대로 둔다** (2026-09-20) ═══ 검수는 거래처 현황(안쪽 스크롤)과 거래처 분석(높이 무제한)을 하나로 모으라고 했다. 실제로 맞춰 봤다. 결과: 거래처 분석은 목록 옆에 시뮬레이터 칸이 나란히 서 있어 문서가 길다 → fitTables 의 '표 아래 내용' 이 그 칸만큼 커져 목록이 **260px(2행)** 으로 쪼그라들었다(실측). 두 화면은 layout 이 다르다 — 현황은 위아래 한 줄, 분석은 좌우 두 칸이다. 같게 만들면 분석이 못 쓰게 된다. 그래서 되돌렸고, 대신 쪽 넘김 줄(.cl-pager)만 두 화면이 똑같이 쓴다. */ /* ═══ 63차-f · 거래처 분석 목록의 '열기' 단추가 떠 있는 비서 단추 밑으로 들어가던 것 (2026-09-20) ═══ 이 목록만 높이를 안 묶고 페이지로 스크롤한다(63차-e 의 근거 참고) → 어느 위치로 스크롤해도 맨 오른쪽 열의 단추 하나는 늘 단추 밑이다. 페이저가 쓰는 방법(오른쪽을 비켜 준다)을 그대로 쓴다. 실측 겹침: 글자·조작 요소 6 → 0. */ /* ⚠ 마지막 열(td.an-go)은 table-layout:fixed 에서 폭 0 으로 접혀 있어 그 칸에 패딩을 줘도 안 밀린다 (실측: td 사각형이 1400..1400). 카드 오른쪽을 비워 표 전체를 단추 왼쪽으로 옮긴다. */ #anal-body .an-listcard{padding-right:calc(var(--sp5) + 74px)} } /* ⚠ 같은 탭의 '월별 매출·매입' 미니표(.mo-block)는 .c3-rp 밖에 있다 — 여기도 감싸야 한다 (실측: .c3-rp 만 고쳤더니 TABLE.mo-mini 가 right 408 로 남아 문서가 18px 밀렸다). */ .mo-block{overflow-x:auto;-webkit-overflow-scrolling:touch} .mo-block>*{min-width:0} @media (max-width:900px){ .c3-rp table.rpt-tb,.c3-rp table.mo-mini,.mo-block table.mo-mini{min-width:0;width:100%;table-layout:fixed} .c3-rp table.rpt-tb td,.c3-rp table.rpt-tb th, .c3-rp table.mo-mini td,.c3-rp table.mo-mini th, .mo-block table.mo-mini td,.mo-block table.mo-mini th{white-space:normal;overflow-wrap:break-word} } @media (max-width:460px){ /* ③ 대표실 지표 격자 — 1000px 이하 '두 칸 고정' 이 minmax(208px,1fr) 을 이겨 390px 에서 넘쳤다. 칸이 208px 을 못 만들면 한 칸으로 내려간다. */ #stats,.stats,.adm-kpi{grid-template-columns:minmax(0,1fr)!important} #stats .k,.stats .k,.adm-kpi .k{white-space:nowrap} } /* ④ 보고서 막대 — `.an-pair i.b` 에서 이미 쓴 처방(토큰 + 빗금)을 그대로 옮긴다. 색만으로 매출·매입을 가르지 않는다. */ /* ⚠ 63차-c 에서 fill:url(#rptHatch) 만 쓰고 을 안 만들어 빗금이 한 번도 안 그려졌다. 정의는 rptCols() 가 svg 안에 함께 넣는다(아래 JS) — 여기서는 소비만 한다. */ .rpt-cols rect.b{fill:var(--border-interactive,#7D8697)} .rpt-cols rect.b.hatch{fill:url(#rptHatch)} /* ② 범례 칩만 옛 색으로 남아 차트에 없는 색을 가리켰다 */ .rpt-cols .lg .dot.b{background:var(--border-interactive,#7D8697)!important; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.45) 0 2px,transparent 2px 5px)} /* ⑤ 도넛 조각이 맞닿아도 갈리게 — 흰 테두리 한 겹(인쇄에서도 남는다) */ .rpt-dn path{stroke:var(--panel,#fff);stroke-width:1.5} .rpt-dn .lg i{outline:1px solid var(--line);outline-offset:-1px} /* ⑦ 홈 카드 제목 — 자식 결합자 탓에 래퍼 안 6장만 17px, 그리드 직계 1장만 15px 이었다. 1391·4936행 주석 두 곳이 '카드 제목 = 17px' 를 목표로 적어 뒀다. */ #view-main .main-grid .card h3,#view-main .main-grid>.card h3{font-size:17px} #view-anal #anal-cnt .an-vchip{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 10px;border-radius:999px; background:var(--surface-3,var(--panel2));color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap} #view-anal #anal-cnt .an-vchip b{font-weight:700} @media (max-width:1024px){ #view-anal #anal-cnt .an-vchip{min-height:44px} } /* 달력 칸이 좁으면(칸 ≈50px 미만 — 1025~1366 등) 긴 이름 대신 '기한'(휴대폰과 같은 짧은 표시 · 긴 이름은 title) */ #view-main #home3 .h3-week{container-type:inline-size} @container (max-width:365px){ #view-main #home3 .h3-day .ev.dl .h3-long{display:none} #view-main #home3 .h3-day .ev .h3-short{display:inline} } /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 55번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 230c 240b 250b */ /* ④ 상태 칩 통일이 라이트만 돼 있어 다크에서 단계별 바탕이 갈렸다 — 같은 안에서 .md-tier 와 .rp-flag 가 다른 색으로 보인다(실측 33쌍). 다크도 한 벌로 모은다. */ :root[data-theme="dark"] .rp-flag.urgent, :root[data-theme="dark"] .an-st.none, :root[data-theme="dark"] .it-rs.none, :root[data-theme="dark"] .an-gap-t.none, :root[data-theme="dark"] .ms-main .st.none { background:#30191E;border-color:#51242C;color:var(--bad-ink,#FF9AA6)} :root[data-theme="dark"] .rp-flag.check, :root[data-theme="dark"] .an-st.ask, :root[data-theme="dark"] .it-rs.ask, :root[data-theme="dark"] .an-gap-t.ask, :root[data-theme="dark"] .ms-main .st.asked { background:#2E2417;border-color:#4C3A1F;color:var(--warn-ink,#F0B476)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .rp-flag.urgent, :root:not([data-theme="light"]) .an-st.none, :root:not([data-theme="light"]) .it-rs.none, :root:not([data-theme="light"]) .an-gap-t.none, :root:not([data-theme="light"]) .ms-main .st.none { background:#30191E;border-color:#51242C;color:var(--bad-ink,#FF9AA6)} :root:not([data-theme="light"]) .rp-flag.check, :root:not([data-theme="light"]) .an-st.ask, :root:not([data-theme="light"]) .it-rs.ask, :root:not([data-theme="light"]) .an-gap-t.ask, :root:not([data-theme="light"]) .ms-main .st.asked { background:#2E2417;border-color:#4C3A1F;color:var(--warn-ink,#F0B476)} } /* ⑤ 토큰 눈금 밖 두 값 — 42차가 옮기다 빠뜨린 잔재 */ main.wrap .stats{gap:var(--sp4)} main.wrap .owners{gap:var(--sp3)} /* ⑥ 홈 필터 타일 숫자만 26px 이라, 같은 지표가 세로 151px 안에 두 번 나오는데 안쪽 사본이 더 컸다 */ #view-main .tdy .n{font-size:22px} /* ⑦ 카드 제목 굵기 — 체계는 600 인데 홈 7장만 700 이었다(3097행이 옮기며 두 선택자를 빠뜨림) */ #view-main .main-grid .card h3,#view-main .main-grid>.card h3, .mdrawer .card h3{font-weight:600} /* ⑧ 두 줄 이상이 되는 꼬리표에 999px 반경은 맞지 않는다 — 줄마다 좌측 여백이 0~8px 로 무너진다 */ .rp-flag{border-radius:var(--r-inner)} @media (min-width:1025px){ .rp-flag{border-radius:999px} } @media (max-width:1024px){ /* ═══ 66차-c · 재채점 2차 남은 것 (2026-09-23) ═══ */ /* ② 크롬 조작 요소가 같은 줄에서 34·42·44 로 어긋났다 — 손가락 폭에서는 전부 44 */ #bell, .topbar .tn-right>button, .topbar .tn-right>a {min-width:44px;min-height:44px} } @media (max-width:767px){ /* ④ 팩스·메일·거래처 정보 표는 휴대폰 규칙이 한 줄도 없었다(390px 넘침 195~623px) — 카드 패턴으로 */ #fx-rows,#ml-rows,#fs-rows,#fl-rows{display:block} } /* ═══ 69차 · 전자신고 파일 일괄 등록 (2026-09-23) ═══ */ @media (max-width:767px){ /* 76차-d · 미수 카드 숫자는 한 줄 칩(높이 36) — 카드가 표를 밀어내지 않게. 목록 여닫기는 칩 줄 끝, 열면 한 줄 전체 */ /* 내역 알약 — ✓ 는 늘 글자 옆, 글자만 줄바꿈 */ /* 76차-e · 칩 줄이 1366·1280 에서 두 줄로 접혀 표를 밀던 것 */ /* 76차-f · 휴대폰 — 타일 2열, 칩 글자 쪼개짐 없게 */ #view-cmsreg #cr-stats,#view-ar #ar-stats{grid-template-columns:1fr 1fr!important;gap:8px} #view-cmsreg #cr-stats .stat,#view-ar #ar-stats .stat{padding:10px 12px!important} /* 76차-g · 휴대폰 카드 한 장이 417~466px 이던 것 — 칸마다 14px 위아래 여백(main.wrap tbody tr[data-id] td)이 카드 모양에도 걸렸다 */ #cr-rows>tr>td,#ar-rows>tr>td{padding-top:3px!important;padding-bottom:3px!important} #cr-rows>tr>td:first-child,#ar-rows>tr>td:first-child{padding-bottom:8px!important} } /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 56번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 230a 240d 250a 250c */ @media (min-width:1001px){ /* ═══ 64차-b · 목록 밀도 (2026-09-23 재채점 확정 ④) ═══ 3158행 주석이 스스로 '표 — 행 높이 50px' 라고 적어 뒀는데 실제로는 69~71px 이다. 첫 칸(상호 + 사업자번호)이 두 줄이라 그렇다. 자리가 넉넉한 두 화면만 한 줄로 되돌린다 — 거래처 현황은 60/60행, CMS 등록현황은 72/72행이 한 줄에 들어간다(최악 389px 필요 / 751px 자리). ⚠ 월별·원천세는 제외한다. 월별은 80행 중 41행이 한 줄에 못 들어가고(322px 필요 / 197px), 원천세는 padding-right:118px 탓에 두 줄 몫이 3px 뿐이다. */ /* ⚠ 3994행 `#view-clients .cl-tbl td.name .sub`(1,3,1)가 평범한 규칙을 이긴다 — 같은 무게로 쓴다. 조밀 보기(1597행)가 이미 똑같은 처방을 쓰고 있어 값은 검증된 것이다(실측 행 69 → 49px). */ #view-cmsreg #cr-rows>tr>td.name .sub {display:inline;margin-left:8px;white-space:nowrap;font-size:13px} #view-cmsreg #cr-rows>tr>td.name {white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } /* ═══ 64차-c · 위계 · 색 · 반복 요소 · 상태 (2026-09-23 재채점 확정) ═══ */ /* ① 분석 상세의 담요 규칙(0,3,0)이 제목·KPI 를 15px 로 눌렀다. 바닥(12px 미만 0)은 그대로 두고 제목·KPI 만 :not() 로 무게를 올려 되살린다. */ .an-detail h3:not(.rpt):not(.a4){font-size:17px} .an-detail .an-key-i .v:not(.rpt):not(.a4){font-size:20px} .an-detail .an-key-i .k:not(.rpt):not(.a4){font-size:13px} /* ② `.at-wnum` 은 값이 아니라 **컨테이너**인데 값용 22px!important 를 받아 회색 라벨이 값(19px)보다도 제목(17px)보다도 커졌고 1440px 에서 2줄로 접혔다. */ .at-wnum{font-size:14px!important} .at-wnum>b.num{font-size:22px!important} .at-wnum>b:last-child{font-size:14px!important} /* ③ 앱에서 유일한 대비 미달 — 다크 2.59:1. 같은 줄의 '안 된' 표시는 8.92:1 이라 지각이 뒤집혔다. */ .c3-now li.ok .i{color:var(--ok-ink,#066B49)} .rp-flag.ok{color:var(--ok-ink,#066B49)} .at-wnum>b:last-child.ok,.at-flag.wfh{color:var(--ok-ink,#066B49)} /* 73차 · 더빌 API 연결 카드 (2026-09-30) */ #view-cmsreg .cr-api{padding:12px 16px;margin-bottom:12px} #view-cmsreg .cr-apit{display:inline-block;white-space:nowrap} #view-cmsreg .cr-orph{padding:12px 16px;margin-bottom:12px;} #view-cmsreg .cr-orph>b{font-size:14px;margin-right:8px} #view-cmsreg .cr-orph>span{font-size:13px;color:var(--mute)} #view-cmsreg .cr-orph ul{margin:8px 0 0;padding-left:18px;font-size:13px;display:grid;gap:2px} #view-cmsreg .cr-warn{display:inline-block;padding:1px 6px;border-radius:6px;background:var(--warn-soft);color:var(--warn-ink);white-space:nowrap} /* 74차 · 더빌 신규 회원등록 (2026-09-30) */ .cmr-lead{margin:0 0 12px;font-size:14px;color:var(--mute)} .cmr-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px} .cmr-g>label:not(.cb){display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute)} .cmr-g>label:not(.cb) input,.cmr-g>label:not(.cb) select{font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--border-interactive,var(--line2));border-radius:var(--r-ctl);padding:8px 10px;min-height:38px} .cmr-g .cmr-w2{grid-column:1/-1} .cmr-msg{min-height:20px;margin:10px 0 0;font-size:13px;color:var(--mute)} .cmr-msg.bad{color:var(--bad-ink,#D22030);font-weight:600} .cmr-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:8px} .cmr-note{margin:10px 0 0;font-size:13px;color:var(--mute)} #view-cmsreg .cr-reqs{padding:12px 16px;margin-bottom:12px} #view-cmsreg .cr-rh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} #view-cmsreg .cr-rh>span{font-size:13px;color:var(--mute)} #view-cmsreg .cr-reqs ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px} #view-cmsreg .cr-reqs li{font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center} #view-cmsreg .cr-reqs .sub{color:var(--mute)} #view-cmsreg .cr-re{flex-basis:100%;color:var(--bad-ink,#D22030)} #view-cmsreg .cr-rn{flex-basis:100%;color:var(--mute)} #view-cmsreg .cr-regb{margin-left:4px} @media (max-width:600px){ .cmr-g{grid-template-columns:minmax(0,1fr)} .cmr-g>label:not(.cb) input,.cmr-g>label:not(.cb) select{font-size:16px} } /* ═══ 76차 · CMS 등록현황 · 거래처 미수 화면 결함 18건 (2026-09-30) ═══ 되돌리려면 이 블록만 지운다. 표가 첫 화면에 보이게 카드를 접고, 0 은 무채색, 빨강은 해지·정지에만. */ /* 더빌 API — 카드 대신 머리 줄 한 조각 */ /* 목록에 없는 회원 · 회원등록 요청 — 접힌 한 줄 */ #view-cmsreg .cr-orph{border-color:var(--line)} /* 타일 — 0 은 무채색, 미등록·불일치 주황, 해지·정지 빨강 */ #view-cmsreg #cr-stats .stat.warn .v{color:var(--warn-ink)} #view-cmsreg #cr-stats .stat.bad .v{color:var(--bad-ink)} #view-cmsreg #cr-stats .stat.zero .v{color:var(--text-secondary,var(--mute))} /* 표 — 비고는 줄바꿈 허용, 가로 넘침 없게 */ #cr-rows>tr{cursor:pointer} #cr-rows>tr>td.r,#ar-rows>tr>td.r{text-align:right} #cr-rows>tr>td.cr-st{white-space:normal;min-width:96px} /* 알약·꼬리표·단추 사이에서만 줄바꿈 — 좁은 폭에서 표가 칸을 넘지 않게 */ #cr-rows>tr>td.cr-diff{color:var(--bad-ink);font-weight:600} #cr-rows .cr-ow,#ar-rows .cr-ow{display:inline-flex;align-items:center;gap:6px} #view-cmsreg th small.cr-asof{font-weight:400;color:var(--text-secondary,var(--mute));} @media (min-width:768px){ #cr-rows>tr>td.dash:empty::after,#ar-rows>tr>td.dash:empty::after{content:"-";color:var(--text-secondary,var(--mute))} } /* 조작 요소 14px 바닥 */ #view-cmsreg #cr-q{font-size:14px!important} /* 미수 카드 — 머리 한 줄 + 숫자 한 줄 + 접힌 표 */ /* 미수 목록 — 내역 알약은 줄바꿈, ✓ 수납 단추를 알약 앞에 */ /* 신규 회원등록 창 — 파일 칸(최소만) */ .cmr-g .cmr-file{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute)} .cmr-g .cmr-fr{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cmr-g .cmr-fr .sub{color:var(--ink);font-size:13px;overflow-wrap:anywhere} @media (max-width:767px){ /* 휴대폰 — 카드 좌우 대칭, 빈 칸 줄 숨김(값이 없으면 '-' 대신 빈 칸), 월 선택 폭 */ #view-cmsreg .card>.tblwrap,#view-ar .card>.tblwrap{margin-left:0;margin-right:0;width:auto} #cr-rows>tr>td,#ar-rows>tr>td{padding-left:0!important;padding-right:0!important} #ar-rows>tr>td.ar-it-c{min-width:0;max-width:none} } /* 76차-b · CMS 표가 칸 안에 들어오게 (1440·1366·1280) */ #view-cmsreg #cr-rows>tr>td.name .nm{display:inline-block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom} #view-cmsreg thead th .th-sort{flex-wrap:wrap} #view-cmsreg thead th .th-sort small.cr-asof{flex-basis:100%;order:3;text-align:left;line-height:1.2} #view-cmsreg thead th .th-sort .sort-mark{order:2} #view-cmsreg table.cr-own th:nth-child(2),#view-cmsreg table.cr-own td:nth-child(2){display:none} @media (max-width:1400px){ #view-cmsreg #cr-rows>tr>td.name .nm{max-width:160px} } @media (min-width:768px) and (max-width:1366px){ #view-cmsreg thead th:nth-child(6),#view-cmsreg #cr-rows>tr>td:nth-child(6){display:none} } @media (min-width:1001px){ /* 약정일 — 회원 전원 25일이라 좁은 폭에서만 접는다 */ /* 76차-c · 첫 화면에 표가 더 보이게 */ #view-cmsreg #cr-stats{grid-template-columns:repeat(5,minmax(0,1fr))} } @media (min-width:1300px){ #cr-rows>tr>td.cr-st{white-space:nowrap} } @media (min-width:1001px){ /* 76차-h · 미수 목록 줄 높이 67 → 59px(✓ 단추 28px 는 그대로) — 1440px 에서 6행 */ /* ═══ 77차 · CMS 등록현황 · 거래처 미수 재검수 (2026-09-30 오후) — 되돌리려면 이 블록만 지운다 ═══ */ /* 미수 카드 — 목록을 펼쳐도 카드 폭을 넘지 않게(390px 문서 폭 621 → 390), 담당자를 골랐으면 '담당' 열 접기 */ /* 미수 표 — 빨강은 미수 합계 타일 하나(줄마다 빨갛던 합계 열은 본문색), 상호는 말줄임 칸·사업자번호는 늘 보이게 */ /* 내역 알약 — 한 줄, '수납' 은 글자 단추(✓ 는 '이미 끝난 것' 처럼 읽혔다) */ /* CMS 표 — 사업자번호가 잘리지 않게(이름만 말줄임), 상태 칸 한 줄, 날짜 한 덩어리 */ #view-cmsreg #cr-rows>tr>td.name{max-width:none} #cr-rows>tr>td.cr-st{white-space:nowrap} } @media (min-width:1001px) and (max-width:1400px){ #view-cmsreg #cr-rows>tr>td.name .nm{max-width:130px} } @media (min-width:1401px){ #view-cmsreg #cr-rows>tr>td.name .nm{max-width:170px} } /* 비고 — 띄어쓰기 없는 긴 상호('더빌 이름: 고향엄마손…')가 칸 최소 폭을 194px 로 못 박아 표가 옆으로 넘쳤다. 날짜·꼬리표는 nowrap 이라 안 쪼개진다 */ #cr-rows .nw{white-space:nowrap} /* 'API' 꼬리표 — 테두리 상자라 옆 '재등록' 단추처럼 보였다 → 점선 밑줄 글자(마우스를 올리면 조회 시각) */ #view-cmsreg .cr-apit{border:0;padding:0;margin-left:6px;border-radius:0;background:none;font-size:13px;color:var(--text-secondary,var(--mute));text-decoration:underline dotted;text-underline-offset:3px;cursor:help} /* 13px 바닥(보조 글자) */ #view-cmsreg th small.cr-asof{font-size:13px} #view-cmsreg .cr-warn{font-size:13px} /* 1280px 칩 줄 한 줄 — 미등록 금액은 칩 툴팁·CMS 등록현황에 */ /* 필터 단추 7개 + 검색 + 건수 = 1366px 에서 한 줄 */ /* 칩 7개 + 배지 + 목록 = 1366px 에서 한 줄 */ /* 76차 · 신규 셋팅 › CMS 신규 등록 (2026-09-30) — 더빌 관리자 회원등록과 같은 표 형식 */ #view-cmsnew .wht-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #view-cmsnew .cmn-pick input{min-width:260px;font-size:14px;padding:8px 10px;border:1px solid var(--border-interactive,var(--line2));border-radius:var(--r-ctl);background:var(--panel);color:var(--ink)} .cmn-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;align-items:start} .cmn-form{padding:16px 18px} .cmn-sec{font-size:15px;font-weight:700;margin:14px 0 6px;display:flex;gap:8px;align-items:center} .cmn-sec:first-child{margin-top:0} table.cmn-t{width:100%;border-collapse:collapse;table-layout:fixed} table.cmn-t th{width:17%;background:var(--bg);font-size:13px;font-weight:600;text-align:left;padding:8px 10px;border:1px solid var(--line);white-space:nowrap;position:static} table.cmn-t th b{color:var(--bad-ink,#D22030);margin-left:3px;font-weight:700} table.cmn-t th small{font-size:12px;color:var(--mute);font-weight:500} table.cmn-t td{padding:6px 8px;border:1px solid var(--line);font-size:14px;white-space:normal} table.cmn-t td input,table.cmn-t td select{width:100%;min-height:34px;font-size:14px;padding:6px 8px;border:1px solid var(--border-interactive,var(--line2));border-radius:6px;background:var(--panel);color:var(--ink)} table.cmn-t td:has(.cmn-unit) input,table.cmn-t td:has(.cmn-by) input{width:calc(100% - 64px)} .cmn-unit,.cmn-by{margin-left:6px;font-size:13px;color:var(--mute)} .cmn-by.bad{color:var(--bad-ink,#D22030);font-weight:700} .cmn-ro{font-size:14px} .cmn-fix{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--bg);font-size:13px} .cmn-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:10px} .cmn-msg{flex:1;font-size:13px;color:var(--mute)} .cmn-msg.warn{color:var(--warn-ink,#8A4A0B);font-weight:600} .cmn-msg.bad{color:var(--bad-ink,#D22030);font-weight:700} .cmn-pvc{padding:12px} .cmn-pvh{display:flex;align-items:center;gap:8px;margin-bottom:8px} .cmn-pvw{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-inner);background:#fff} #cmn-pv{width:820px;height:1160px;border:0;transform-origin:0 0;background:#fff;display:block} .cmn-reqs{margin-top:16px;padding:12px 16px} table.cmn-rt{width:100%;border-collapse:collapse;font-size:13px} table.cmn-rt td{padding:6px 8px;border-top:1px solid var(--line);white-space:normal} table.cmn-rt td.nm{font-weight:600} table.cmn-rt td.sub{color:var(--mute)} @media (max-width:1100px){ .cmn-grid{grid-template-columns:minmax(0,1fr)} } @media (max-width:600px){ table.cmn-t,table.cmn-t tbody,table.cmn-t tr,table.cmn-t th,table.cmn-t td{display:block;width:100%} table.cmn-t th{border-bottom:0} table.cmn-t td input,table.cmn-t td select{font-size:16px;min-height:44px} #view-cmsnew .cmn-pick input{min-width:0;width:100%;font-size:16px} } /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 57번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 900 */ /* 2026-10-07 색 정돈(대표 지시 "색상 수정"): 글자·아이콘 회색을 누런 회색 → 바탕과 같은 푸른 중립 회색으로. 되돌리기 = 이 줄 아래 값만 옛 값(5E5B55·3A3834·A39E95·8A857C·ECEAE6·F6F5F2 / 다크 A7A39B·D6D3CD·6E6A63·77726A) */ /* 2026-09-30 14:45 색을 더 밝게(대표 지시): 바탕 #F7F8FA · 다크는 한 단계 밝게 */ /* ═══ D3 · 디자인 v3 — 앱 셸·홈 (2026-09-30 · 브랜드 주황은 2026-10-11 새 마크(파랑→남색→보라)로 바꿈) ═══ 되돌리기: 이 블록(다음 'D3 끝' 주석까지)만 지운다. 기존 층·id 는 그대로다. 붙이는 자리: 템플릿의 **첫 번째** 닫는 style 태그 바로 앞(두 번째 닫는 style 태그는 임금명세서 JS 문자열 안이다). 홈(#home3) 마크업 계약·모양은 951_개편_홈_셸.css 와 900_d3_홈_셸.js 머리 주석에 있다. ─────────────────────────────────────────────────────────────────────────── */ /* ── D3-a 토큰: 기존 이름에 새 값(글자로 써도 AA) + 새 이름(채움·도표) ── */ :root{ color-scheme:light; } html[data-sb="mini"]{--sbw:68px} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; } } :root[data-theme="dark"]{ color-scheme:dark; } /* 로그인 화면은 늘 밝게 — 2026-10-11 브랜드 정리: 주황을 없애고 앱 강조색(코발트 · 999zzz1 디자인 토큰의 밝은 값)으로 */ #login{--bg:#F7F8FA;--panel2:#FAFBFC;--line:#ECEEF1;--line2:#E1E4E9;--mute:#5B6270;--ink2:#5B6270; --accent:#1F4FD6;--accent-ink:#1F4FD6;--accent-fill:#2B5DE8;--accent-soft:#ECF1FE; --brand:#4F7BF0;--brand-fill-h:#2350D2;--sel:#E8EEFD;--sel-line:#2B5DE8; --bad:#C8102E;--bad-soft:#FDECEE;--bad-ink:#C8102E;--border-interactive:#868C96} /* 2026-10-11 워드마크: 로그인 이름도 사이드바 '택스민 데스크' 와 같은 굵기(800) · 좁은 자간 */ #login .login-logo b{font-weight:800;letter-spacing:-.03em} /* 인쇄 보고서는 흰 종이 — 다크에서도 밝은 화면의 코발트 한 계열(2026-10-11 주황 → 코발트) */ #an-print{--accent:#1F4FD6;--accent-ink:#1F4FD6;--accent-fill:#2B5DE8;--chart-rest:#868C96} /* ── D3-b 하드코딩 파랑 덮기 ── */ .hw-b.on{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff} :root .md-tier.miss, :root .ms-main .st.part, :root .an-st.actual { background:var(--info-soft);color:var(--info);border-color:transparent} #an-print .rpt-tb .dot.c1{background:var(--accent-fill)} .an-key-i.hot{border-color:var(--accent-fill)} .an-key-i.hot .v{color:var(--accent-ink)} .an-one-r .t i.s{background:var(--accent-fill)} .ck-t[data-tier]:hover:not(:disabled){box-shadow:0 0 0 3px var(--accent-soft);border-color:var(--accent-ink)} .ck-t[data-tier]:focus-visible{outline-color:var(--accent-ink)} /* 흰 글자를 얹는 채움은 늘 --accent-fill(라이트·다크 4.79:1) */ .seg button.on{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff} .btn.primary:hover{border-color:var(--brand-fill-h);color:#fff} .empty .ebtn button.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff} .skip{background:var(--accent-fill);color:#fff} .sb-badge i{background:var(--bad-fill);color:#fff} :root[data-theme="dark"] .sb-badge.on i{color:#fff} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sb-badge.on i{color:#fff} } :focus-visible{outline-color:var(--accent-ink)} /* ── D3-c 셸 ── */ /* 하단 상태 띠는 없다 — 연결 점은 사이드바 바닥(JS D3-1), 다음 기한은 홈 '이번 주' */ #statusbar{display:none!important} main.wrap{padding-bottom:24px} @media (min-width:901px){ #cl-pager,.cl-pager{padding-right:0} main.wrap>.legend2:last-child{padding-right:0} #view-main .news-strip{padding-right:0} } @media (max-width:900px){ main.wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))} } #min-toast{bottom:24px} #save-ok{bottom:20px} @media (max-width:900px){ #min-toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))} #save-ok{bottom:calc(76px + env(safe-area-inset-bottom,0px))} } /* 사이드바 232 · 로고 워드마크 · 선택 막대 */ #sidebar .sb-logo img,#sidebar .sb-logo svg{height:30px;width:30px} /* 숫자 배지 — 기본 회색, 기한 초과가 섞였을 때(data-hot)만 진홍 */ #bell[data-badge]::after {background:var(--surface-3);color:var(--ink-3);font-size:12px;font-weight:700; min-width:20px;height:20px;line-height:20px;padding:0 6px} #bell[data-hot][data-badge]::after {background:var(--bad-fill);color:#fff} /* 연결 점·서버 응답 없음 칩 — 상태 띠에서 사이드바 바닥/앱 바로 옮겨진 뒤의 모양 */ #sidebar .sb-net,.topbar .sb-net{display:none;align-items:center;gap:6px;flex:none;cursor:pointer; font-size:12px;font-weight:700;border-radius:9px;padding:5px 10px;border:0; color:var(--bad);background:var(--bad-soft)} #sidebar .sb-net.on,.topbar .sb-net.on{display:inline-flex} #sidebar .sb-net i,.topbar .sb-net i{width:7px;height:7px;border-radius:50%;background:var(--bad-fill);flex:none} /* 상단 '+ 업무' = 외곽선 보조 단추(본문 주 단추와 경쟁하지 않게) */ .topbar #hd-add,.topbar .hd-add{background:var(--panel);color:var(--ink);border:1px solid var(--border-interactive)} .topbar #hd-add span,.topbar .hd-add span{color:var(--accent-ink)} .topbar #hd-add:hover,.topbar .hd-add:hover{background:var(--surface-3)} @media (max-width:900px){ /* 2026-10-15 프로필(설정 — 화면 색·세무사 모드·로그아웃)은 넓은 화면에서도 보임(사이드바 발치가 없어짐) */ /* 휴대폰 하단 탭 5칸(홈·업무·거래처·수신함·전체) */ #mnav{grid-template-columns:repeat(5,minmax(0,1fr));background:var(--panel);border-top:1px solid var(--line); padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))} #mnav button{position:relative;min-height:54px;color:var(--mute);font-weight:600;border-radius:12px} #mnav button svg{width:22px;height:22px} #mnav button.on{color:var(--accent-ink);font-weight:700} #mnav button.on::before{content:"";position:absolute;top:-4px;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--brand)} #mnav button[data-badge]::after,#mdrawer-list button[data-badge]::after{background:var(--surface-3);color:var(--ink-3); font-size:12px;font-weight:700;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:999px} #mnav button[data-hot][data-badge]::after,#mdrawer-list button[data-hot][data-badge]::after{background:var(--bad-fill);color:#fff} #mdrawer-list button.on{color:var(--accent-ink)} #subnav button[data-badge]::after{background:var(--surface-3);color:var(--ink-3)} } /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 58번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 952a */ /* 952_개편_거래처 — 2026-09-30 대개편 층(이 영역 작업자만 고친다) 대상: 거래처 현황 · 거래처 360 · 분석 · 월별 매출·매입 · 월별 보고서 · 거래처 정보 · 자료 미수신 원칙(NEEDS.md): 3초 규칙 · 문장 대신 숫자·배지·표 · ①핵심 숫자 → ②조치 → ③표 · 0 은 조용히. 되돌리기: 이 파일을 비우면 된다(JS 가 만든 새 부품은 이 층이 없어도 동작한다). 공통 부품(이 층에서만 쓴다) .cx-kpis > button.cx-k(.warn|.bad|.zero|.on) span b — 핵심 숫자 칩(누르면 목록 걸러내기) .cx-b(.warn|.bad|.mute|.ok) — 줄 안 상태 배지 .cx-i — ⓘ(설명은 title 로) .cx-sheet > .cx-sheet-bd + .cx-sheet-box — 휴대폰 아래에서 올라오는 시트 */ /* ── 공통 부품 ─────────────────────────────────────────────── */ /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 59번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 160gm */ .bot-note{font-size:13px!important} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 60번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 5개: 900 951b 951d 951f 951h */ /* ── D3-d 컴포넌트 ── */ /* 상태 알약 — 캡션 12/600, soft 바탕 + 같은 계열 글자 */ .pill{font-size:12px!important;} .pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad,.pill.seal{background:var(--bad-soft);color:var(--bad)} .pill.acc{background:var(--accent-soft);color:var(--accent-ink)} .pill.info{background:var(--info-soft);color:var(--info)} .pill.neu,.pill.mute{background:var(--surface-3);color:var(--ink-3)} /* 정상은 알약을 쓰지 않는다 — 거래처 현황 '기장'·'완료'·'대기'는 회색 글자 */ /* 단추 — 보조 = 흰 면 + 진한 경계, 주 = 강조색 채움 */ .btn.primary:disabled,.btn.primary[disabled]{background:var(--surface-3);color:var(--mute)} @media (min-width:1025px){ /* 표 — 데스크톱 줄 40px(조밀 보기·손가락 폭 48px 규칙은 그대로) */ html:not([data-dense="1"]) #view-cmsreg #cr-rows>tr>td{padding-top:8px;padding-bottom:8px} } #rows tr.row.sel>td{background:var(--accent-soft)} #rows tr.row.sel>td:first-child{box-shadow:inset 3px 0 0 var(--brand)} /* ── D3-e 새 홈(#home3) — 2026-09-30 대개편: 951_개편_홈_셸.css 로 옮겼다(JS 의 h3- 클래스와 1:1). 여기에 다시 쓰지 말 것 ── */ /* ═══ D3 끝 ═══ */ /* 상단 바 정리(2026-09-30 대표 지시): '거래처·업무·파일 검색' 칸과 '+ 업무' 단추를 없앤다. 검색은 Ctrl+K 로 계속 열 수 있다 */ .topbar .hd-add,.topbar .pal-btn,#pal-open,#gsearch{display:none!important} #home3{display:block;max-width:1260px;margin:0 auto;color:var(--ink);font-size:14px;line-height:1.5; font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:break-word} #home3 *{box-sizing:border-box} #home3 button{font:inherit;color:inherit} /* 아이콘 안전망 — 크기 규칙이 빠져도 svg 가 카드를 채우지 않는다 */ #home3 svg{width:16px;height:16px;max-width:20px;max-height:20px;flex:none} #home3 svg.h3-i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none} #home3 :focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} #home3 .sk{background:var(--sk);display:block;border-radius:var(--r-inner)} #home3 .h3-sk1{width:220px;height:28px} #home3 .h3-sk2{width:300px;height:20px;margin-top:8px} /* 인사말 두 줄 + [일정 보기] · 보는 기준 토글(세무사만) */ #home3 .h3-head{display:flex;align-items:flex-end;gap:10px 16px;flex-wrap:wrap;margin:0 0 16px} #home3 .h3-hi{min-width:0} #home3 .h3-hello{margin:0;font-size:20px!important;line-height:28px;font-weight:700;letter-spacing:-.3px;color:var(--ink)} #home3 .h3-sub{margin:2px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;line-height:24px;font-weight:500;color:var(--ink)} #home3 .h3-sub b{font-weight:700;color:var(--accent-ink)} #home3 .h3-sub.zero,#home3 .h3-sub.zero b{color:var(--mute)} #home3 .h3-sched{min-height:32px;height:32px;padding:0 12px;font-size:14px;font-weight:600;background:var(--panel);color:var(--ink); border:1px solid var(--border-interactive);border-radius:var(--r-ctl,10px);cursor:pointer;white-space:nowrap} #home3 .h3-sched:hover{background:var(--surface-3)} #home3 .h3-seg{margin-left:auto;display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-3);flex-wrap:nowrap} #home3 .h3-seg button{min-height:28px;height:28px;padding:0 12px;border:0;border-radius:999px;background:transparent; font-size:13px!important;font-weight:600;color:var(--mute);cursor:pointer;white-space:nowrap} #home3 .h3-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgb(20 18 16/.14)} /* 카드 공통 */ #home3 .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card,14px);padding:18px 20px; min-width:0;box-shadow:none;margin:0;overflow:visible} #home3 .card h2{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:16px!important;line-height:24px;font-weight:600;color:var(--ink)} #home3 .h3-ch{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-width:0} #home3 .h3-cnt{font-size:14px;color:var(--mute);font-weight:600;white-space:nowrap} /* 핵심 3칸 — 높이 ≈94px: 이름 줄 · 숫자 줄(오른쪽에 작은 도표) */ #home3 .h3-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 16px} #home3 .h3-kpi{display:flex;flex-direction:column;gap:6px;padding:14px 18px;cursor:pointer;text-align:left;width:100%; min-height:0;color:var(--ink);font-weight:400;transition:border-color .15s} #home3 .h3-kpi:hover{border-color:var(--border-interactive)} #home3 .h3-lb{display:flex;align-items:center;gap:2px;min-width:0;font-size:13px;font-weight:600;color:var(--mute);line-height:20px;white-space:nowrap} #home3 .h3-lb .h3-chev{margin-left:auto;color:var(--faint)} #home3 .h3-kpi:hover .h3-lb .h3-chev{color:var(--mute)} #home3 .h3-row{display:flex;align-items:center;gap:10px;min-height:40px;min-width:0} #home3 .h3-v{font-size:30px!important;line-height:36px;font-weight:700;letter-spacing:-.5px;color:var(--ink);white-space:nowrap} #home3 .h3-v small{font-size:14px;font-weight:600;color:var(--mute);margin-left:3px;letter-spacing:0} #home3 .h3-v.zero{color:var(--mute);font-weight:600} #home3 .h3-na{font-size:13px;color:var(--mute)} #home3 .h3-mini{margin-left:auto;display:flex;flex-direction:column;gap:6px;width:min(55%,210px);min-width:0} #home3 .h3-stack,#home3 .h3-bar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--surface-3);gap:2px} #home3 .h3-stack i{display:block;height:100%;min-width:3px} #home3 .h3-bar i{display:block;height:100%;border-radius:999px;background:var(--ink-3,var(--ink2))} /* 5차: 주황은 단추·현재 위치에만 — 수치 막대는 중립색 */ #home3 .h3-leg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 10px;font-size:12px!important;line-height:16px;color:var(--mute)} #home3 .h3-leg span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} #home3 .h3-leg span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);flex:none} #home3 .h3-leg span.h3-nod::before{display:none} #home3 .h3-leg b{color:var(--ink);font-weight:600} /* 알약(홈 안) */ #home3 .pill{display:inline-flex;align-items:center;gap:5px;height:24px;min-height:24px;padding:0 9px;border-radius:999px; font-size:12px!important;font-weight:600;white-space:nowrap;line-height:1;flex:none} #home3 .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} #home3 .pill.nodot::before{display:none} #home3 .pill.bad{background:var(--bad-soft);color:var(--bad)} #home3 .pill.warn{background:var(--warn-soft);color:var(--warn)} #home3 .pill.info{background:var(--info-soft);color:var(--info)} #home3 .pill.neu{background:var(--surface-3);color:var(--ink-3)} /* 본문 두 칸: 할 일 | 이번 주 */ #home3 .h3-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin:0 0 16px;} /* 처리하셔야 할 일 */ #home3 .h3-fchips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 4px} #home3 .h3-fchips button{min-height:30px;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel); font-size:13px!important;font-weight:600;color:var(--mute);cursor:pointer;white-space:nowrap;flex:none} #home3 .h3-fchips button b{font-weight:700;margin-left:5px;color:var(--ink-3)} #home3 .h3-fchips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--panel)} #home3 .h3-fchips button[aria-pressed="true"] b{color:var(--panel)} #home3 ul.h3-todo{list-style:none;margin:6px 0 0;padding:0} #home3 ul.h3-todo li{margin:0;padding:0;list-style:none} #home3 ul.h3-todo li>button{display:grid;grid-template-columns:88px minmax(0,1fr) auto 16px;align-items:center;gap:12px; width:calc(100% + 16px);min-height:44px;padding:6px 8px;margin:0 -8px;border:0;border-radius:10px; background:transparent;text-align:left;cursor:pointer;color:var(--ink);font-size:14px} #home3 ul.h3-todo li+li>button{border-top:1px solid var(--line);border-radius:0} #home3 ul.h3-todo li>button:hover{background:var(--panel2)} #home3 .h3-kind{justify-self:start} #home3 .h3-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px} #home3 .h3-t b{font-weight:600} #home3 .h3-t em{font-style:normal;color:var(--mute);margin-left:8px;font-weight:400} #home3 .h3-due{font-size:13px;font-weight:600;color:var(--mute);white-space:nowrap} #home3 .h3-due.bad{color:var(--bad)} #home3 ul.h3-todo .h3-chev{color:var(--faint)} #home3 .h3-empty{display:block;padding:10px 0 2px;font-size:14px;color:var(--mute)} #home3 .h3-foot{display:flex;justify-content:center;align-items:center;width:100%;margin-top:8px;min-height:36px;border:0;border-radius:10px; font-size:14px;font-weight:600;color:var(--accent-ink);background:var(--panel2);cursor:pointer} #home3 .h3-foot:hover{background:var(--surface-3)} /* 이번 주 — 7칸 + 신고 기한 */ #home3 .h3-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} #home3 .h3-day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 8px;border-radius:12px;min-height:84px; min-width:0;border:0;background:transparent;cursor:pointer;color:var(--ink)} #home3 .h3-day:hover{background:var(--panel2)} #home3 .h3-day .dw{font-size:12px;font-weight:600;color:var(--mute);line-height:16px} #home3 .h3-day .dn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700} #home3 .h3-day.today{background:var(--accent-soft)} #home3 .h3-day.today .dn{background:var(--brand-fill);color:#fff} #home3 .h3-day.today .dw{color:var(--accent-ink)} #home3 .h3-day.hol .dn,#home3 .h3-day.hol .dw{color:var(--bad)} #home3 .h3-day.past:not(.today) .dn{color:var(--mute);font-weight:600} #home3 .h3-day .ev{font-size:12px;line-height:16px;font-weight:600;text-align:center;color:var(--ink-3);max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px} #home3 .h3-day .ev.hol{color:var(--bad)} #home3 .h3-day .dots{display:flex;gap:3px} #home3 .h3-day .dots i{width:6px;height:6px;border-radius:50%;background:var(--c)} #home3 .h3-wkleg{display:flex;gap:4px 12px;flex-wrap:wrap;margin-top:6px;font-size:12px;line-height:16px;color:var(--mute)} #home3 .h3-wkleg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} #home3 .h3-wkleg span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none} #home3 ul.h3-dues{list-style:none;padding:0;margin:10px 0 0;border-top:1px solid var(--line)} #home3 ul.h3-dues li{margin:0;padding:0;list-style:none} #home3 ul.h3-dues li>button{display:grid;grid-template-columns:52px 64px minmax(0,1fr) auto;align-items:center;gap:10px; width:100%;min-height:40px;padding:4px 0;border:0;background:transparent;text-align:left;cursor:pointer;font-size:14px;color:var(--ink)} #home3 ul.h3-dues li+li>button{border-top:1px solid var(--line)} #home3 ul.h3-dues li>button:hover{background:var(--panel2)} #home3 ul.h3-dues .pill{justify-self:start} #home3 ul.h3-dues .dt{color:var(--mute);font-size:13px;white-space:nowrap} #home3 ul.h3-dues .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} #home3 ul.h3-dues .tg{font-size:13px;color:var(--mute);white-space:nowrap} #home3 ul.h3-dues .tg b{color:var(--ink);font-weight:600;margin-right:1px} /* 부팅 중 — '0' 을 먼저 보여 주지 않는다 */ html[data-boot] #home3 .h3-v{color:transparent} @media (max-width:1024px){ /* 태블릿 ≤1024: 조작 44px, 본문 한 열 */ #home3 .h3-sched,#home3 .h3-seg button,#home3 .h3-fchips button{min-height:44px;height:44px} #home3 ul.h3-dues li>button{min-height:44px} #home3 .h3-grid{grid-template-columns:minmax(0,1fr)} } @media (max-width:767px){ /* 휴대폰 ≤767: 핵심 3칸 = 한 줄 숫자 띠(72px) · 인사말 바로 아래 할 일 */ #home3 .h3-head{gap:8px;align-items:flex-start} #home3 .h3-hello{font-size:17px!important;line-height:24px} #home3 .h3-sub{font-size:14px;gap:8px} #home3 .h3-seg{margin:0;width:100%} #home3 .h3-seg button{flex:1;padding:0 6px} #home3 .h3-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px} #home3 .h3-kpi{padding:10px 12px;gap:2px;height:72px;min-height:72px;border-radius:12px} #home3 .h3-lb{font-size:12px;line-height:16px} #home3 .h3-lb .h3-m,#home3 .h3-lb .h3-chev,#home3 .h3-mini,#home3 .h3-kpi .pill,#home3 .h3-na{display:none} #home3 .h3-row{min-height:0;gap:6px} #home3 .h3-v{font-size:22px!important;line-height:30px} #home3 .h3-v small{font-size:12px;margin-left:2px} #home3 .h3-kpi:has(.pill.bad) .h3-v::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bad-fill); margin-left:5px;vertical-align:top;transform:translateY(4px)} #home3 .card{padding:14px 16px} #home3 .h3-grid{gap:12px;margin-bottom:12px} #home3 ul.h3-todo li>button{grid-template-columns:76px minmax(0,1fr) auto;gap:10px;min-height:52px} #home3 ul.h3-todo .h3-chev{display:none} #home3 .h3-t{white-space:normal;line-height:1.35} #home3 .h3-t b,#home3 .h3-t em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #home3 .h3-t em{margin:1px 0 0;font-size:13px} #home3 .h3-fchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 4px;padding:0 16px} #home3 .h3-fchips::-webkit-scrollbar{display:none} #home3 .h3-week{gap:2px} #home3 .h3-day{padding:6px 0 8px;min-height:76px} #home3 ul.h3-dues li>button{grid-template-columns:48px minmax(0,1fr) auto;min-height:48px} #home3 ul.h3-dues .dt{display:none} #home3 .h3-day .h3-long{display:none} } @media (prefers-reduced-motion:reduce){ #home3 *{transition:none!important} } /* ═══ ② 셸 ═══ */ /* 화면을 바꿀 때 viewFocus 가 본문(main)에 포커스를 준다 — 스크린리더 안내는 그대로 두고 주황 테두리만 없앤다 */ main.wrap[tabindex="-1"]:focus,main.wrap[tabindex="-1"]:focus-visible{outline:none!important;box-shadow:none!important} /* 사이드바 구분선 = 1px 선(글자 '―' 는 숨긴다) */ /* 홈 아이콘 — 경로에 stroke 가 없어 사이드바에서 보이지 않았다 */ /* 알림 벨 — 20px 종 + 오른쪽 위 16px 배지(종을 가리지 않게) */ #bell{position:relative} #bell svg{width:20px;height:20px;flex:none} #bell[data-badge]::after{box-sizing:border-box;top:3px;right:2px;left:auto;width:auto; min-width:17px;height:17px;line-height:17px;padding:0 4px;border-radius:999px; font-size:12px;font-weight:700;text-align:center;z-index:1;box-shadow:0 0 0 2px var(--panel)} /* 화면색 스위치는 설정 화면에만(예전엔 화면에 따라 사이드바 바닥에 있다 없다 했다) */ #mdrawer .mdrawer-foot .thm {display:none!important} @media (max-width:900px){ /* 휴대폰 ≤900: 지표는 가로로 넘기는 한 줄(64px), 칩·구분 줄은 가로 스크롤 + 끝 흐림 */ main.wrap .stats:not(.hidden){display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none; margin-left:-14px;margin-right:-14px;padding:0 28px 2px 14px;scroll-padding-left:14px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} main.wrap .stats:not(.hidden)::-webkit-scrollbar{display:none} main.wrap .stats>.stat{flex:0 0 auto;min-width:108px;max-width:190px;height:64px;min-height:64px;padding:8px 12px;overflow:hidden} main.wrap .stats>.stat .k{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} main.wrap .stats>.stat .v{font-size:20px!important;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} main.wrap .stats>.stat .v small{font-size:12px} main.wrap .seg:not(.hidden){flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);padding-right:20px} main.wrap .seg:not(.hidden)::-webkit-scrollbar{display:none} main.wrap .seg:not(.hidden)>button{flex:none} } @media (min-width:1025px){ /* ═══ ⑥ 셸 3차 ═══ */ /* 상단 바: 빵부스러기·벨뿐인 줄이 65px 였다 → 48px */ .topbar{min-height:48px;height:48px;padding-top:0;padding-bottom:0} } @media (max-width:1024px){ /* 휴대폰·태블릿 머리: 벨·아바타를 오른쪽 끝으로(왼쪽에 로고·벨·아바타가 몰려 오른쪽 절반이 비었다) */ .topbar .tn-right{margin-left:auto;justify-content:flex-end} } /* 걸린 필터 표시 — 주황 테두리·글자는 오류처럼 읽혔다 → 옅은 채움 + 본문색 굵게(강조색 없음) */ select[data-on="1"],input[data-on="1"]{border-color:var(--border-interactive)!important;box-shadow:none!important; background-color:var(--surface-3)!important;color:var(--ink)!important;font-weight:600} /* 사이드바: 홈에 있을 때 '홈 › 홈' 이중 선택 — 묶음 이름과 같은 하위 '홈' 은 켜져 있을 때 감춘다(소식에 있을 때는 돌아갈 길로 보인다) */ /* ═══ 2026-09-30 · 홈 중복 정리 · 로고 + 회사명 (셸 담당) ═══ ① 건수는 인사말 한 번뿐: 할 일 목록은 제목 없이 인사말 바로 아래(왼쪽 열 맨 위), 핵심 칸은 2칸(자료 미수신 · 검토) ② 로고 옆 회사명 '택스민 데스크' — PC 사이드바 머리 · 1024 이하(드로어 머리 + 앱 바) · 휴대폰 머리. 접힌 사이드바는 로고만 */ #home3 .h3-head{margin-bottom:12px} #home3 .h3-colL{display:flex;flex-direction:column;gap:16px;min-width:0} #home3 .h3-colL>.h3-kpis{margin:0} #home3 .h3-kpis.two{grid-template-columns:repeat(2,minmax(0,1fr))} #home3 .h3-kpis.two .h3-mini{width:min(64%,260px)} #home3 #h3-todo{padding-top:6px;padding-bottom:6px} #home3 #h3-todo ul.h3-todo{margin-top:0} #home3 #h3-todo .h3-fchips{margin:8px 0 4px} @media (max-width:767px){ #home3 .h3-colL{gap:12px} #home3 #h3-todo{padding-top:4px;padding-bottom:4px} } #sidebar .sb-logo{gap:9px;align-items:center} #sidebar .sb-logo .tm-wm,.topbar .tn-logo .tm-wm{display:inline-block;font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.2; color:var(--ink);white-space:nowrap} html[data-sb="mini"] #sidebar .sb-logo .tm-wm{display:none} .topbar .tn-logo{gap:8px;} @media (max-width:1024px) and (min-width:901px){ .topbar .tn-logo{display:flex!important;height:auto;margin-right:4px} .topbar .tn-logo img{height:26px;width:auto} } @media (max-width:900px){ .topbar .tn-logo .tm-wm{font-size:15px} .topbar .tn-logo img{height:24px;width:auto} } @media (max-width:359px){ .topbar .tn-logo .tm-wm{font-size:14px} } /* 2026-09-30 검수: 거래처 360 에 남은 '신고 결재' 입구 2곳(이번 달 업무의 '최근 결재 · 처리 ›' 줄, 최근 신고의 [신고 결재 화면])은 누르면 홈으로 튕겼다(NAV_GONE.appr) — 신고 결재 화면을 메뉴에서 뺀 동안은 감춘다. 결재 상태는 '최근 신고' 표에 그대로 남는다. 되살리려면 이 한 줄만 지운다(380 조각은 그대로). */ #c3-body .c3-go[data-v="appr"]{display:none!important} @media (max-width:1024px) and (min-width:901px){ /* 2026-09-30 검수: 901~1024 폭에서 앱 바 순서가 [≡][빵부스러기][로고] 라 로고가 화면마다 100→205→223px 로 옮겨 다녔다. 왼쪽 위 고정 자리 = [≡][로고][빵부스러기]. */ .topbar .tn-logo{order:-1} } /* ═══ 2026-09-30 5차 — 셸·홈 마무리 ═══ */ /* 자료 미수신 칸: 범례와 ⓘ 가 한 줄(직원 화면에서 ⓘ 만 아래로 떨어지던 것) */ #view-main #home3 .h3-kpi .h3-leg{flex-wrap:nowrap} @media (max-width:900px){ /* 휴대폰: 스크롤바 자리(15px 띠)를 비워 두지 않는다 · 하단 탭바는 화면 끝까지 */ html{scrollbar-gutter:auto} #mnav{left:0;right:0;width:auto} } @media (max-width:1024px){ /* ═══ 2026-09-30 6차 — 셸 ═══ */ /* 휴대폰·서랍 폭: 소메뉴가 하나뿐인 묶음(홈·근태)은 소메뉴 줄(49px)이 현재 위치를 한 번 더 말할 뿐 → 숨긴다. 둘 이상일 때(거래처·원천·급여 …)는 그대로. 빵부스러기·하단 탭바가 위치를 알린다. */ #subnav:not(:has(> button:nth-of-type(2))){display:none!important} } /* 알림 벨의 종류 꼬리표(팩스·메일·업무)는 같은 폭 — 줄마다 글자 시작이 맞게 */ .bellbox .bb-row .g{min-width:3em;text-align:center;font-size:12px} /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 61번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 954a 954c */ /* ═════════════ CMS 등록현황 (#view-cmsreg) ═════════════ 표 위 = 제목 줄(더빌 API 점 · ↻ · 담당 · 검색 · 신규) + 상태 탭(숫자) · 이 달 출금 줄 · 칩 두 개. 지표 카드 5장은 탭으로 합쳤다. */ #view-cmsreg .wht-head{flex-wrap:wrap;gap:8px 10px} #view-cmsreg .wht-head h2{margin:0} #view-cmsreg .wht-head .cr-api{display:inline-flex;align-items:center;gap:6px;padding:0;margin:0 auto 0 0;border:0;background:none;box-shadow:none; font-size:13px;color:var(--text-secondary,var(--mute));min-width:0} #view-cmsreg .cr-dot{width:9px;height:9px;border-radius:50%;background:var(--chart-rest,#8A857C);flex:none;display:inline-block} #view-cmsreg .cr-dot.run{background:var(--info-fill,#2F74E8);animation:crPulse 1.2s ease-in-out infinite} @keyframes crPulse{50%{opacity:.35}} @media (prefers-reduced-motion:reduce){ #view-cmsreg .cr-dot.run{animation:none} } #view-cmsreg .cr-api-t{white-space:nowrap} #view-cmsreg #cr-sync{min-width:30px;min-height:30px;padding:0 7px;font-size:16px;line-height:1;border-radius:var(--r-ctl);margin:0} #view-cmsreg #cr-q{border:1px solid var(--border-interactive,var(--line2));background:var(--panel);color:var(--ink);padding:7px 10px;border-radius:var(--r-ctl);font-size:14px;min-width:150px;width:170px} #view-cmsreg .cr-meta{font-size:13px;color:var(--text-secondary,var(--mute));white-space:nowrap} #view-cmsreg .cr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 12px} #view-cmsreg #seg-cr{margin:0;flex:none;flex-wrap:wrap} #view-cmsreg #seg-cr button{white-space:nowrap} #view-cmsreg #seg-cr button b{font-weight:700;margin-left:3px;font-variant-numeric:tabular-nums} #view-cmsreg #seg-cr button.zero:not(.on){color:var(--text-secondary,var(--mute))} #view-cmsreg #seg-cr button.tone-warn:not(.on) b{color:var(--warn-ink)} #view-cmsreg #seg-cr button.tone-bad:not(.on) b{color:var(--bad-ink)} #view-cmsreg .cr-cms{display:flex;align-items:center;flex-wrap:wrap;min-width:0} #view-cmsreg .cr-cm-h{font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:help} #view-cmsreg .cr-cm-h select{min-height:30px;font-size:14px;padding:2px 6px;border-radius:var(--r-ctl);border:1px solid var(--border-interactive,var(--line2));background:var(--panel);color:var(--ink)} #view-cmsreg .cr-i{font-style:normal;font-size:13px;color:var(--text-secondary,var(--mute))} #view-cmsreg .cr-cm{display:inline-flex;align-items:baseline;gap:5px;padding:4px 10px;min-height:30px;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-ctl); background:var(--panel);font:inherit;font-size:13px;color:var(--text-secondary,var(--mute));white-space:nowrap} #view-cmsreg .cr-cm .k{font-size:13px} #view-cmsreg .cr-cm b{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} #view-cmsreg .cr-cm small{font-size:13px} #view-cmsreg .cr-cm.warn b{color:var(--warn-ink)} #view-cmsreg .cr-cm.zero b{color:var(--text-secondary,var(--mute));font-weight:600} #view-cmsreg button.cr-cm{cursor:pointer;border-color:var(--border-interactive,var(--line2))} #view-cmsreg button.cr-cm:hover{background:var(--surface-3,var(--bg))} #view-cmsreg button.cr-cm.on{outline:2px solid var(--accent-fill);outline-offset:-1px} #view-cmsreg #btn-cr-ar{min-height:30px} /* 칩 + 펼침(아래로 뜨는 상자) — 줄을 하나 더 만들지 않는다 */ #view-cmsreg details.cr-pop{position:relative;margin:0;padding:0;border:0;background:none} #view-cmsreg details.cr-pop[hidden]{display:none} #view-cmsreg details.cr-pop:first-of-type{margin-left:auto} #view-cmsreg details.cr-pop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:30px} #view-cmsreg details.cr-pop>summary::-webkit-details-marker{display:none} #view-cmsreg details.cr-pop>summary::before{content:none} #view-cmsreg details.cr-pop>summary .pill{font-size:13px} #view-cmsreg details.cr-pop[open]>summary .pill{outline:2px solid var(--accent-fill);outline-offset:1px} #view-cmsreg .cr-pop-b{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(560px,calc(100vw - 32px));max-height:360px;overflow:auto; background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:6px 10px} #view-cmsreg table.cr-pt{width:100%;border-collapse:collapse} #view-cmsreg table.cr-pt th,#view-cmsreg table.cr-pt td{padding:7px 8px;font-size:14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;position:static} #view-cmsreg table.cr-pt th{font-size:13px;font-weight:600;color:var(--text-secondary,var(--mute));background:none} #view-cmsreg table.cr-pt tr:last-child td{border-bottom:0} #view-cmsreg table.cr-pt .r{text-align:right} #view-cmsreg table.cr-pt td.nm{font-weight:600;white-space:normal} #view-cmsreg table.cr-pt .sub{color:var(--text-secondary,var(--mute));font-size:13px} #view-cmsreg table.cr-pt .cr-re{color:var(--bad-ink);font-size:13px} /* 미등록만 볼 때 출금액 · 약정일 · 마지막 출금 열 접기 */ #view-cmsreg table.cr-nopay th:nth-child(5),#view-cmsreg table.cr-nopay td:nth-child(5), #view-cmsreg table.cr-nopay th:nth-child(6),#view-cmsreg table.cr-nopay td:nth-child(6), #view-cmsreg table.cr-nopay th:nth-child(7),#view-cmsreg table.cr-nopay td:nth-child(7){display:none!important} #view-cmsreg #cr-rows td.cr-st{white-space:nowrap} #view-cmsreg #cr-rows .av{background:var(--surface-3,var(--line2));color:var(--ink)} #view-cmsreg #cr-rows>tr>td.dash:empty::after{content:"—";color:var(--text-secondary,var(--mute))} @media (max-width:767px){ /* 휴대폰: 한 줄 = 상호 · 기장료 · 상태배지 · [등록] (예전 카드형 130px → 약 60px) */ #view-cmsreg #cr-q{font-size:16px} #view-cmsreg #cr-sync{min-width:44px;min-height:44px} #view-cmsreg .cr-cm,#view-cmsreg #btn-cr-ar,#view-cmsreg details.cr-pop>summary,#view-cmsreg .cr-cm-h select{min-height:44px} /* 출금 줄 조각들이 칩과 한 줄에 흐르게 */ #view-cmsreg .cr-cm{padding:4px 8px} #view-cmsreg span.cr-cm small{display:none} #view-cmsreg table.card-sm tbody>tr.cr-r{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:10px;row-gap:2px; padding:6px 4px;min-height:56px;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:none} #view-cmsreg table.card-sm tbody>tr.cr-r:last-child{border-bottom:0} #view-cmsreg .card:has(#cr-rows){padding:4px 12px} #view-cmsreg table.card-sm tbody>tr.cr-r>td{display:none!important} #view-cmsreg table.card-sm tbody>tr.cr-r>td::before{display:none!important;content:none} #view-cmsreg table.card-sm tbody>tr.cr-r>td:nth-child(1){display:block!important;grid-column:1;padding:0!important;min-width:0;font-size:15px} #view-cmsreg table.card-sm tbody>tr.cr-r>td:nth-child(1) .sub{display:none} #view-cmsreg table.card-sm tbody>tr.cr-r>td:nth-child(3){display:block!important;grid-column:2;padding:0!important;text-align:right;font-size:14px} #view-cmsreg table.card-sm tbody>tr.cr-r>td:nth-child(3):empty{display:none!important} #view-cmsreg table.card-sm tbody>tr.cr-r>td.cr-st{display:flex!important;grid-column:3;gap:6px;align-items:center;padding:0!important;white-space:nowrap} } /* ═════════════ CMS 신규 등록 (#view-cmsnew) ═════════════ */ #view-cmsnew table.cmn-t th{white-space:normal;width:19%;line-height:1.35} #view-cmsnew table.cmn-t th.cmn-th2 small{display:block;font-size:12px;font-weight:500;color:var(--text-secondary,var(--mute));margin-top:1px} #view-cmsnew .cmn-need{flex:none} #view-cmsnew .cmn-need[hidden]{display:none} #view-cmsnew .cmn-pvw[hidden]{display:none} #view-cmsnew .cmn-msg{font-size:13px} @media (max-width:600px){ #view-cmsnew table.cmn-t th{width:100%} #view-cmsnew table.cmn-t th,#view-cmsnew table.cmn-t td{padding-left:10px;padding-right:10px} #view-cmsnew .wht-head{gap:8px} #view-cmsnew .cmn-pick{flex:1 1 180px;min-width:0} #view-cmsnew #cmn-reset{min-height:44px} #view-cmsnew table.cmn-t th.cmn-th2 small{display:inline;margin-left:4px} /* 954_개편_CMS_수납_신규 — 2026-09-30 대개편 층(이 영역 작업자만 고친다) 원칙: 3초 규칙 · 문장 대신 숫자·배지 · 0 은 조용히 · 화면 id 로만 선택(다른 영역을 깨지 않게) */ /* ═════════════ 거래처 미수 (#view-ar) ═════════════ 맨 위 한 줄 = 미수 · n월 미출금[미수로 등록] · CMS 미등록. 기장료·조정료·기타 금액은 탭 배지로. */ /* 담당자 필터가 걸리면 '담당' 열 접기 · 아바타는 무채색(빨강은 위험색이라 오해를 부른다) */ /* 0 원 칸은 회색 '—' */ /* 목록 한 줄 = 상호 · 합계 / 내역 알약(수납). 기장료·조정료·기타 칸은 알약에 분류가 적혀 있어 접는다 */ } /* ═════════════ 3차 개편 (2026-09-30) — 2차 심사 지적 반영 ═════════════ */ /* 거래처 미수: 'CMS 미등록' 숫자의 범위(내 담당·사무실 전체) */ /* CMS 등록현황: 1줄 = 범위·상태 탭 · (오른쪽) 미연결·요청 / 2줄 = n월 출금 묶음 + [미수로 등록](테두리 단추) */ #view-cmsreg .cr-bar{row-gap:8px} #view-cmsreg #seg-cr{order:1} #view-cmsreg details.cr-pop{order:2} #view-cmsreg .cr-cms{order:3;flex:1 1 100%;gap:6px 8px;padding:6px 10px;border-radius:10px;background:var(--surface-2,var(--bg));border:1px solid var(--line)} #view-cmsreg .cr-cms[hidden]{display:none!important} #view-cmsreg #btn-cr-ar.btn{background:var(--panel)!important;color:var(--warn-ink)!important;border:1px solid var(--warn-ink)!important;font-weight:700;box-shadow:none!important} #view-cmsreg #btn-cr-ar.btn:hover{background:var(--surface-3,var(--bg))!important} /* 비고가 전부 비었으면 열째 접는다 */ /* 상호는 한 줄 + 말줄임 */ #view-cmsreg #cr-rows td.name .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} @media (max-width:767px){ #view-cmsreg .wht-head .cr-meta{display:none} #view-cmsreg #cr-owner{min-height:44px} #view-cmsreg #cr-q{min-height:44px} #view-cmsreg #cr-new{margin-left:0;min-height:44px} #view-cmsreg #cr-sync{order:1} #view-cmsreg #seg-cr{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:24px} #view-cmsreg table.card-sm tbody>tr.cr-r>td:nth-child(1){overflow:hidden} #view-cmsreg table.card-sm tbody>tr.cr-r>td:nth-child(1) .nm{display:block!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis!important;overflow-wrap:normal!important;word-break:normal!important} } /* CMS 신규 등록: 고르기 전 = 등록할 거래처 목록(행 클릭 = 선택) · 고른 뒤 = 입력 폼 */ #view-cmsnew .wht-head #cmn-owner{min-height:36px;font-size:14px;padding:4px 8px;border-radius:var(--r-ctl);border:1px solid var(--border-interactive,var(--line2));background:var(--panel);color:var(--ink)} #view-cmsnew #cmn-cnt:empty{display:none} #view-cmsnew .cmn-list[hidden],#view-cmsnew .cmn-grid[hidden],#view-cmsnew #cmn-reset[hidden]{display:none!important} #view-cmsnew table.cmn-lt{width:100%;border-collapse:collapse;table-layout:fixed} #view-cmsnew table.cmn-lt th,#view-cmsnew table.cmn-lt td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:14px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-cmsnew table.cmn-lt th{font-size:13px;font-weight:600;color:var(--text-secondary,var(--mute))} #view-cmsnew table.cmn-lt th:nth-child(1){width:auto} #view-cmsnew table.cmn-lt th:nth-child(2){width:90px} #view-cmsnew table.cmn-lt th:nth-child(3){width:110px} #view-cmsnew table.cmn-lt th:nth-child(4){width:96px} #view-cmsnew table.cmn-lt th:nth-child(5){width:84px} #view-cmsnew table.cmn-lt.cmn-own th:nth-child(2),#view-cmsnew table.cmn-lt.cmn-own td:nth-child(2){display:none} #view-cmsnew table.cmn-lt .r{text-align:right} #view-cmsnew table.cmn-lt td.name .nm{font-weight:600;margin-right:8px} #view-cmsnew table.cmn-lt td.name .sub{font-size:13px;color:var(--text-secondary,var(--mute))} #view-cmsnew table.cmn-lt tbody tr[data-id]{cursor:pointer} #view-cmsnew table.cmn-lt tbody tr[data-id]:hover{background:var(--surface-3,var(--bg))} #view-cmsnew table.cmn-lt tbody tr[data-id]:focus-visible{outline:2px solid var(--accent-fill);outline-offset:-2px} #view-cmsnew table.cmn-lt tbody tr:last-child td{border-bottom:0} /* 필수 = '*' · 입력칸은 칸 폭 100% 로 통일(글자 수·'원' 은 칸 안 오른쪽에) */ #view-cmsnew table.cmn-t th b.cmn-req{color:var(--bad-ink,#D22030);margin-left:3px;font-weight:700} #view-cmsnew table.cmn-t td{position:relative} #view-cmsnew table.cmn-t td input,#view-cmsnew table.cmn-t td select{width:100%;box-sizing:border-box} #view-cmsnew table.cmn-t td:has(.cmn-unit) input,#view-cmsnew table.cmn-t td:has(.cmn-by) input{width:100%;padding-right:52px} #view-cmsnew table.cmn-t td .cmn-unit,#view-cmsnew table.cmn-t td .cmn-by{position:absolute;right:18px;top:50%;transform:translateY(-50%);margin:0;pointer-events:none} @media (max-width:767px){ #view-cmsnew .wht-head #cmn-owner{flex:0 0 38%;min-height:44px} #view-cmsnew .cmn-pick{flex:1 1 0} #view-cmsnew .cmn-pick input{min-width:0;width:100%;font-size:16px;min-height:44px} #view-cmsnew table.cmn-lt th:nth-child(2),#view-cmsnew table.cmn-lt td:nth-child(2){display:none} #view-cmsnew table.cmn-lt th:nth-child(3){width:78px} #view-cmsnew table.cmn-lt th:nth-child(4){width:70px} #view-cmsnew table.cmn-lt th:nth-child(5){width:64px} #view-cmsnew table.cmn-lt td,#view-cmsnew table.cmn-lt th{padding:8px 4px} #view-cmsnew table.cmn-lt td .btn{min-height:44px;min-width:52px} } /* 3차-b: 0 인 탭 숨김 · 미수 카드의 [미수로 등록]도 테두리 단추(빨강은 드물게) · 목록 한 줄 · 휴대폰 머리 줄 줄이기 */ #view-cmsreg #seg-cr button[hidden]{display:none!important} #view-cmsnew table.cmn-lt td.name .nm,#view-cmsnew table.cmn-lt td.name .sub{display:inline!important} #view-cmsnew .cmn-list .tblwrap{margin:0;max-height:none;overflow-x:hidden} @media (max-width:767px){ #view-cmsreg .wht-head .cr-api-t{font-size:12px} #view-cmsreg details.cr-pop:first-of-type{margin-left:0} #view-cmsnew .cmn-list{overflow:hidden} #view-cmsnew table.cmn-lt{table-layout:fixed;width:100%} /* 3차-c 휴대폰: 제목 줄 = 제목 · 상태 점 · ↻ · [＋ 신규] / 출금 줄은 조치할 것(미출금·미수로 등록)만 — 성공 건수는 넓은 화면에서 */ #view-cmsreg .wht-head h2{flex:0 1 auto;font-size:20px} #view-cmsreg .wht-head .cr-api-t{display:none} #view-cmsreg .wht-head .cr-api{gap:4px} #view-cmsreg .cr-cms{overflow:visible;} #view-cmsreg .cr-cms>span.cr-cm:not(.warn){display:none!important} #view-cmsnew table.cmn-lt td.name .sub{display:none!important} } #view-cmsnew .cmn-list>.tblwrap{width:100%;margin:0;box-sizing:border-box} #view-cmsnew .cmn-list table.cmn-lt{width:100%;min-width:0} /* ═════ 5차 (2026-09-30) — 신규 등록 = 거래처 고르기 + 입력 양식(목록은 등록현황 한 곳) ═════ */ #view-cmsnew .cmn-list{padding:12px 16px} #view-cmsnew .cmn-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #view-cmsnew .cmn-gl{font-size:14px;font-weight:600;color:var(--text-secondary,var(--mute));margin-right:2px} #view-cmsnew .cmn-gl.zero{font-weight:500} #view-cmsnew .cmn-gb{display:inline-flex;align-items:baseline;gap:5px;min-height:34px;padding:4px 12px;border-radius:999px;cursor:pointer; border:1px solid var(--border-interactive,var(--line2));background:var(--panel);color:var(--ink);font-size:14px;font-weight:600} #view-cmsnew .cmn-gb b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums} #view-cmsnew .cmn-gb.warn b{color:var(--warn-ink)} #view-cmsnew .cmn-gb.bad b{color:var(--bad-ink)} #view-cmsnew .cmn-gb>span{color:var(--text-secondary,var(--mute));font-weight:500} #view-cmsnew .cmn-gb:hover{background:var(--surface-3,var(--bg))} #view-cmsnew .cmn-gb:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px} #view-cmsnew .cmn-hits{margin-top:10px;border-top:1px solid var(--line)} #view-cmsnew .cmn-hits[hidden]{display:none!important} #view-cmsnew table.cmn-lt tr.cmn-done td{color:var(--text-secondary,var(--mute))} #view-cmsnew table.cmn-lt tr.cmn-done{cursor:default!important} #view-cmsnew .wht-head .cmn-pick input{min-width:260px} @media (max-width:1024px){ #view-cmsnew .cmn-gb{min-height:44px} } @media (max-width:767px){ #view-cmsnew .wht-head .cmn-pick input{min-width:0} } #view-cmsnew .cmn-pr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px} #view-cmsnew .cmn-list .cmn-pick{flex:1 1 320px;max-width:520px;min-width:0} #view-cmsnew .cmn-list .cmn-pick input{width:100%;min-width:0;min-height:44px;font-size:16px;padding:8px 12px;box-sizing:border-box; border:1px solid var(--border-interactive,var(--line2));border-radius:10px;background:var(--panel);color:var(--ink)} @media (max-width:767px){ #view-cmsnew .cmn-list .cmn-pick{flex-basis:100%;} } /* 5차 — 등록현황: 미등록 줄의 출금 칸 셋은 '—' 하나(출금액 칸만) · 표 카드 위 흰 띠 없앰 */ #view-cmsreg #cr-rows>tr.cr-nd>td.dash:nth-child(6):empty::after,#view-cmsreg #cr-rows>tr.cr-nd>td.dash:nth-child(7):empty::after{content:""} #view-cmsreg #cr-meta:empty{display:none} @media (min-width:768px){ #view-cmsreg .card:has(#cr-rows){padding-top:0} #view-cmsreg .card:has(#cr-rows)>.tblwrap{margin-top:0} } @media (max-width:767px){ /* 5차 휴대폰 머리 줄 — 상태 탭 한 줄(넘치면 오른쪽 흐림) · 출금 줄과 미연결 회원을 한 줄로 */ #view-cmsreg .wht-head{row-gap:8px;margin-bottom:8px} #view-cmsreg .cr-bar{flex-wrap:wrap;gap:6px;margin:0 0 8px} #view-cmsreg #seg-cr{order:1;flex:1 1 100%;min-width:0;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0} #view-cmsreg #seg-cr::-webkit-scrollbar,#view-cmsreg .cr-cms::-webkit-scrollbar{display:none} #view-cmsreg #seg-cr button{flex:none;white-space:nowrap} #view-cmsreg .cr-cms{order:2;display:flex!important;flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0;background:none;border:0;} #view-cmsreg .cr-cms>*{flex:none} #view-cmsreg details.cr-pop{order:3;flex:none} #view-cmsreg details.cr-pop>summary .pill{min-height:44px;display:inline-flex;align-items:center} #view-cmsreg #seg-cr.ovf:not(.end),#view-cmsreg .cr-cms.ovf:not(.end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)} #view-cmsreg .cr-cm-h .cr-i{display:none} #view-cmsreg button.cr-cm small{display:none} } /* 5차 — 출금: 전부 0 이면 KPI·선택 막대 숨김 · 날짜 칸은 '직접 지정' 때만 */ #view-cmspay #cpy-stats[hidden],#view-cmspay #cpy-bar[hidden],#view-cmspay .cpy-dtl[hidden]{display:none!important} /* 5차 — 거래처 미수 휴대폰: CMS 미등록 칸(범위 꼬리표 포함)이 말줄임으로 잘리지 않게 두 줄 */ /* 5차 — 회원 관리: 회원상태 체크 10개는 '회원상태 ▾' 뒤로(기본값 그대로 두는 조작) · 거르면 강조 */ #view-cmsmem .cmm-stdet{position:relative;align-self:flex-end} #view-cmsmem .cmm-stdet>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px} #view-cmsmem .cmm-stdet>summary::-webkit-details-marker{display:none} #view-cmsmem .cmm-stdet>summary::after{content:"▾";font-size:12px;color:var(--text-secondary,var(--mute))} #view-cmsmem .cmm-stdet.act>summary{outline:2px solid var(--accent-fill);outline-offset:-1px} #view-cmsmem .cmm-stdet.act>summary b{color:var(--accent-ink,var(--ink))} #view-cmsmem .cmm-stdet>.cmm-stf{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(520px,calc(100vw - 32px));box-sizing:border-box; background:var(--panel);border:1px solid var(--line2,var(--line));border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.14)} #view-cmsmem .cmm-stdet>.cmm-stf legend{float:none;display:block;margin:0 0 6px} #view-cmsmem .cmm-filter{gap:0} /* ═════ 6차 (2026-09-30) — 3차 심사 지적 ═════ */ /* 등록현황: 비고 열(첫 화면 13줄이 늘 비어 280px)을 거래처 칸 안 작은 줄로 — 정보는 그대로, 열은 없앰 */ #view-cmsreg #cr-rows td.name .cr-nt{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--text-secondary,var(--mute));white-space:normal;overflow-wrap:break-word;line-height:1.35} #view-cmsreg #cr-rows td.name .cr-nt .nw{white-space:nowrap} #view-cmsreg #cr-rows td.name .cr-nt .cr-warn{color:var(--warn-ink);font-weight:600} /* 담당자 상자 = 범위 이름('내 담당'·'사무실 전체') — 옆 알약은 없앰 */ #view-cmsnew #cmn-cnt{display:none!important} @media (max-width:767px){ /* 거래처 미수: 조정료·기타가 모든 줄에서 비면 열째 접는다 */ /* 거래처 미수: 'CMS 미등록 6곳' — 숫자와 '곳' 을 한 줄에 */ /* 등록현황 머리 줄 3줄로: 제목은 빵부스러기·소메뉴가 이미 말한다(화면 읽기용으로만 남김) · 담당·검색·↻·신규 한 줄 */ #view-cmsreg .wht-head{gap:6px;align-items:center} #view-cmsreg .wht-head h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0} #view-cmsreg #cr-owner{order:1;flex:0 0 96px;width:96px;min-width:0;padding-left:8px;padding-right:4px} #view-cmsreg .wht-head .cr-api{order:3;margin:0!important;flex:none} #view-cmsreg #cr-new{order:4;flex:none;padding-left:10px;padding-right:10px;white-space:nowrap} /* 출금 줄: '출금 51' 칸을 미출금 앞에 남긴다(금액 꼬리는 넓은 화면에서) */ #view-cmsreg .cr-cms>span.cr-cm:not(.warn):not(.zero){display:inline-flex!important} /* 신규 등록: 검색칸이 칩에 밀려 47px 로 눌리던 것 — 검색 한 줄, 칩 다음 줄 */ #view-cmsnew .cmn-pr{flex-wrap:wrap} #view-cmsnew .cmn-list .cmn-pick,#view-cmsnew .cmn-pr>.cmn-pick{flex:1 1 100%;max-width:none;width:100%} #view-cmsnew .cmn-go{flex:1 1 100%} #view-cmsnew .cmn-gl{flex-basis:auto!important} #view-cmsreg #cr-new .cr-new-t{display:none} } #view-cmsreg .cr-cm .cr-mo{display:none} @media (max-width:767px){ /* 달 선택이 없으면 '9월 출금' 머리 대신 칩 이름에 달을 붙인다(한 줄에 미연결 칩까지 들어오게) */ #view-cmsreg .cr-cm-h:not(:has(select)){display:none!important} #view-cmsreg .cr-cms:not(:has(.cr-cm-h select)) .cr-cm .cr-mo{display:inline} } /* 6차 — 회원 관리: 자주 쓰는 조건(회원명·담당·회원상태)만 · 나머지 6개는 '상세 필터 ▾' 뒤(걸려 있으면 강조·개수) */ #view-cmsmem .cmm-more{position:relative;align-self:flex-end} #view-cmsmem .cmm-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px} #view-cmsmem .cmm-more>summary::-webkit-details-marker{display:none} #view-cmsmem .cmm-more>summary::after{content:"▾";font-size:12px;color:var(--text-secondary,var(--mute))} #view-cmsmem .cmm-more.act>summary{outline:2px solid var(--accent-fill);outline-offset:-1px} #view-cmsmem .cmm-more.act>summary b{color:var(--accent-ink,var(--ink))} #view-cmsmem .cmm-more>summary b:empty{display:none} #view-cmsmem .cmm-more>.cmm-morebox{position:absolute;left:0;top:calc(100% + 6px);z-index:40;width:min(560px,calc(100vw - 32px));box-sizing:border-box; display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;background:var(--panel);border:1px solid var(--line2,var(--line));border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.14)} #view-cmsmem table.cmm-t.cmm-nobank th:nth-child(5),#view-cmsmem table.cmm-t.cmm-nobank td:nth-child(5){display:none!important} @media (max-width:767px){ #view-cmsmem .cmm-fl>label{flex:1 1 40%} #view-cmsmem .cmm-more>.cmm-morebox{left:auto;right:0} #view-cmsmem .cmm-more>.cmm-morebox label{flex:1 1 40%} } /* 6차 — 정산: 기록이 없으면 지표 4칸 대신 빈 상태 한 줄 + [출금 보기] */ #view-cmsset #cst-stats[hidden]{display:none!important} #view-cmsset table.cst-t.is-empty thead{display:none} #view-cmsset td.cst-empty{text-align:left!important;padding:18px 20px!important;height:auto!important;color:var(--text-secondary,var(--mute));font-size:15px} #view-cmsset td.cst-empty .btn{margin-left:10px} #view-cmsset .cst-list:has(table.is-empty) .tblwrap{padding-top:0!important;margin-top:0!important} #view-cmsset table.cst-t.is-empty td.cst-empty{border-bottom:0!important} @media (max-width:767px){ /* 출금 줄 + 미연결 칩이 한 줄에 들어오게(미수로 등록 단추가 흐림에 가려지지 않게) */ #view-cmsreg .cr-cms{gap:4px} #view-cmsreg .cr-cms .cr-cm{padding:4px 6px} #view-cmsreg .cr-cms #btn-cr-ar{padding-left:8px!important;padding-right:8px!important} #view-cmsreg details.cr-pop>summary .pill{padding-left:8px;padding-right:8px} } /* 최종 심사 반영(2026-09-30) — 신규 등록: 칩 = 이 화면 목록 필터(선택 표시) · 등록현황 이동은 작은 링크 */ #view-cmsnew .cmn-gb.on{background:var(--accent-soft,var(--surface-3,var(--bg)));border-color:var(--accent-fill);box-shadow:inset 0 0 0 1px var(--accent-fill)} #view-cmsnew .cmn-gx{min-height:34px;padding:4px 8px;border:0;background:none;color:var(--accent-ink);font-size:14px;font-weight:600;cursor:pointer;margin-left:auto} #view-cmsnew .cmn-gx:hover{text-decoration:underline} #view-cmsnew .cmn-gx:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px} @media (max-width:1024px){ #view-cmsnew .cmn-gx{min-height:44px} } /* 2026-09-30 최종 심사 34: '전체 70 / 담당 83 ⓘ' — 분모는 흐린 보조 글자(다른 화면 ms-dn 과 같은 무게) */ #view-cmsreg #seg-cr button .cr-dn{font-size:13px;font-weight:600;color:var(--text-secondary,var(--mute));font-variant-numeric:tabular-nums} #view-cmsreg #seg-cr button.on .cr-dn{color:inherit;opacity:1} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 62번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 14개: 952a 952c 952e 952g 952k 952m 952o 955am 955b 955cm 955r */ .cx-b{display:inline-block;font-size:12px;font-weight:700;line-height:18px;padding:0 7px;border-radius:var(--r-chip,6px);margin-left:4px; vertical-align:1px;white-space:nowrap;font-variant-numeric:tabular-nums} .cx-b.warn{background:var(--warn-soft);color:var(--warn-ink)} .cx-b.bad{background:var(--bad-soft);color:var(--bad-ink)} .cx-b.ok{background:var(--ok-soft);color:var(--ok-ink)} .cx-b.mute{background:var(--surface-3);color:var(--mute)} .cx-i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%; border:1px solid var(--line2);color:var(--mute);font-size:12px;font-weight:700;font-style:normal;cursor:help;vertical-align:middle;flex:none} .cx-i:hover,.cx-i:focus-visible{border-color:var(--border-interactive);color:var(--ink)} body.cx-sheet-on{overflow:hidden} /* 걸린 필터는 칩 줄 대신 select 테두리색으로 보인다(같은 필터를 두 번 보여 주지 않는다) */ #view-clients .fchips,#view-monthly .fchips,#view-report .fchips{display:none!important} #view-monthly .wht-head select#mo-owner:not(:has(option:checked[value=""])), #view-report .wht-head select#rp-owner:not(:has(option:checked[value=""])), #view-anal select#anal-owner:not(:has(option:checked[value=""])), #view-files .wht-head select:not(:has(option:checked[value=""])) { border-color:var(--line2)!important;box-shadow:none!important;background-color:var(--surface-3)!important;color:var(--ink)!important;font-weight:700} /* ══ 거래처 현황 ══════════════════════════════════════════════════ */ #view-clients .wht-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} #view-clients .wht-head h2{margin:0} /* ══ 거래처 360 ══════════════════════════════════════════════════ */ /* 고르기 전에는 빈 머리·핵심·탭 상자를 그리지 않는다 */ #view-c360 .c3-head[hidden],#view-c360 .c3-kpi[hidden],#view-c360 .c3-tabs[hidden],#view-c360 .c3-body[hidden], #view-c360 .c3-head:empty,#view-c360 .c3-kpi:empty,#view-c360 .c3-tabs:empty,#view-c360 .c3-body:empty{display:none!important} /* 자료 없는 블록 = 제목 한 줄 */ #view-c360 .c3-sec.c3-mini{padding-top:12px!important;padding-bottom:12px!important} #view-c360 .c3-sec.c3-mini .detail-head{margin:0!important;align-items:center;gap:10px;flex-wrap:wrap} #view-c360 .c3-sec.c3-mini h3{margin:0} #view-c360 .c3-mini-n{display:inline-flex;gap:12px;font-size:13px;color:var(--mute)} #view-c360 .c3-mini-n b{color:var(--mute);font-weight:700} #view-c360 .c3-sec.c3-mini .btn{margin-left:auto} /* 매출·매입 요약: 짧은 단위 + ▲▼ (매출 ▲ 초록·▼ 빨강, 매입은 중립) */ #view-c360 .c3-sum b{font-size:20px;font-weight:800;letter-spacing:-.01em} #view-c360 .c3-d{font-weight:700} #view-c360 .c3-d small{font-size:12px;font-weight:500;color:var(--mute);margin-left:2px} #view-c360 .c3-d.nt{color:var(--ink2)!important} /* ── 공통 부품: 숫자 타일 한 줄(누르지 않는 핵심 숫자) ── */ /* ══ 월별 매출·매입 ═════════════════════════════════════════════ */ #view-monthly .wht-head{display:flex;align-items:center;gap:8px;} #view-monthly .wht-head h2{order:0;margin-right:0!important} #view-monthly .wht-head .cx-i{order:0} #view-monthly .wht-head #mo-meta{order:1;margin:0 8px 0 0!important;font-size:14px!important;font-weight:700;color:var(--ink2)!important; background:var(--surface-3);padding:2px 10px;border-radius:var(--r-chip,6px)} #view-monthly .wht-head #mo-meta:empty{display:none} #view-monthly .wht-head > :not(h2):not(#mo-meta):not(.cx-i){order:2} /* ══ 거래처 정보(파일 색인) ═══════════════════════════════════════ */ #view-files .wht-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #view-files .wht-head h2{order:0} #view-files .wht-head .cx-i{order:0} #view-files .wht-head #fl-meta{order:1;margin:0 8px 0 0!important;font-size:14px!important;font-weight:700;color:var(--ink2)!important; background:var(--surface-3);padding:2px 10px;border-radius:var(--r-chip,6px)} #view-files .wht-head > :not(h2):not(#fl-meta):not(.cx-i):not(#fl-root){order:2} #view-files .wht-head #fl-root{order:3;margin-left:auto} #view-files .legend2{display:none!important} #view-files:not(.fl-custom) #fl-from,#view-files:not(.fl-custom) #fl-to{display:none} #view-files a.btn,#view-report a.btn,#view-c360 a.btn{text-decoration:none} @media (max-width:900px){ /* ══ 자료 미수신 ═════════════════════════════════════════════════ */ /* ── 휴대폰: 제목 옆 건수 배지가 다음 줄로 밀리지 않게(옛 규칙 .wht-head h2{width:100%}) ── */ #view-clients .wht-head h2,#view-monthly .wht-head h2,#view-report .wht-head h2,#view-missing .wht-head h2, #view-files .wht-head h2,#view-anal .wht-head h2{width:auto} } /* ── 명암·글자 바닥 보정 ── */ #view-anal table.an-tbl td.an-go{color:var(--ink2)} /* ── 3차: 거래처 360 '이번 달 업무' — 줄 전체가 단추(›). 남은 일만 '처리' 표시 ── */ #view-c360 .c3-now li.c3-go{cursor:pointer;border-radius:var(--r-ctl);padding:10px 6px;min-height:44px} #view-c360 .c3-now li.c3-go:hover{background:var(--surface-3)} #view-c360 .c3-now li.c3-go:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} #view-c360 .c3-now .t{font-size:14px} #view-c360 .c3-now .s{font-size:13px} #view-c360 .c3-now .c3-chev{flex:none;color:var(--mute);font-size:18px;line-height:1;padding:0 4px} #view-c360 .c3-now .c3-do{flex:none;font-size:13px;font-weight:700;color:var(--warn-ink);background:var(--warn-soft);border-radius:999px;padding:3px 10px;white-space:nowrap} #view-c360 .c3-now li.no .t{color:var(--ink)} /* 두 열 카드 윗선 맞춤 */ #view-c360 .c3-grid{align-items:start} /* 핵심 한 줄(7칸) — 넓은 화면에서 한 줄에 */ #view-c360 .c3-kpi .c3-f{min-width:0} @media (max-width:767px){ /* 휴대폰 360 — 핵심 7칸은 2열(값이 잘리지 않게), 머리 배지는 왼쪽부터 */ #view-c360 #c3-kpi .c3-f{flex:1 1 50%!important;border-left:0!important} #view-c360 #c3-kpi .c3-f:nth-child(2n){border-left:1px solid var(--line)!important} #view-c360 #c3-kpi .c3-f:last-child:nth-child(odd){flex-basis:100%!important} #view-c360 .c3-h-r{justify-content:flex-start!important} #view-c360 .c3-h-acts{flex:1 1 100%} } #view-c360 .c3-pc b .cx-b{font-style:normal;margin-left:4px} @media (max-width:767px){ #view-c360 .c3-h-r > .c3-st,#view-c360 .c3-h-r > .c3-star{margin:0!important;flex:none!important} #view-c360 .c3-h-r > .c3-star{margin-left:auto!important} } /* 월별 보고서: '전체' 칩은 조용하게(선택했을 때만 강조) */ /* 차트: 옅은 막대(수집 중인 달) 위 작은 꼬리표 */ #view-c360 .rpt-cols text.est-tag{font-size:12px;fill:var(--mute)} /* 360 개요: 비어 있는 블록은 한 줄 '없음 · 메일 0 …' 로 모은다 */ #view-c360 .c3-sec.c3-mini h3{font-size:14px;color:var(--mute);font-weight:700} /* 360 매출·매입 막대 — 주황은 누를 수 있는 것에만(3차 지적): 매출 = 짙은 청회색, 매입 = 옅은 회색 + 빗금 */ #view-c360 .rpt-cols rect.a{fill:var(--ink2)} #view-c360 .rpt-cols rect.b{fill:url(#rptHatch)} #view-c360 .rpt-cols .lg .dot.a{background:var(--ink2)} #view-c360 .rpt-cols .lg .dot.b{background:var(--border-interactive)} /* 월별 보고서 화면 미리보기 — 편지 머리(로고·주소·연락처·받는 분)는 인쇄에만. 화면은 제목과 '이 달 요약' 부터 */ /* 5차(2026-09-30): '보고 대상 79 / 담당 83' — 분모는 흐리게, 기울이지 않는다 */ /* 거래처 360 '이번 달 업무' 에 실린 신고 기한 배지(D-0 빨강 · D-1~3 주황) */ #view-c360 .c3-now .c3-dd{margin-left:6px;padding:1px 7px;font-size:12px;vertical-align:1px} /* ── 2026-09-30 최종 심사: 휴대폰 거래처 360 — 핵심 7칸은 가로 스크롤 한 줄, '+업무·메모·바꾸기'는 ⋯ 하나로 ── */ #view-c360 .c3-more{display:none} @media (max-width:900px){ #view-c360 #c3-kpi{display:flex!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px 2px} #view-c360 #c3-kpi::-webkit-scrollbar{display:none} #view-c360 #c3-kpi .c3-f{flex:none!important;flex-basis:auto!important;border-left:1px solid var(--line)!important;padding:2px 12px!important;} #view-c360 #c3-kpi .c3-f:first-child{border-left:0!important} #view-c360 .c3-h{position:relative} #view-c360 .c3-h-r{align-items:center} #view-c360 .c3-more{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:18px;font-weight:800;flex:none} #view-c360 .c3-h-r .c3-h-acts{display:none!important} #view-c360 .c3-h-r.open .c3-h-acts{display:flex!important;flex-direction:column;gap:6px;position:absolute;right:0;top:100%;z-index:20; background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);flex:none!important;width:auto} #view-c360 .c3-h-r.open .c3-h-acts .btn{min-height:44px;justify-content:flex-start;white-space:nowrap} #view-c360 .c3-meta{overflow-x:auto;scrollbar-width:none} #view-c360 .c3-meta::-webkit-scrollbar{display:none} #view-c360 .c3-meta>span{flex:none;} } :is(#view-mail,#view-fax) .ops-q{border:1px solid var(--line2);background:var(--panel);color:var(--ink);padding:7px 10px;border-radius:var(--r-ctl); font-size:14px;width:200px;min-width:0;min-height:36px} :is(#view-mail,#view-fax) .ops-card{padding:0;overflow:hidden;margin-top:0} /* 받은/보낸 — 탭 모양(거르기 칩과 구별) */ :is(#view-mail,#view-fax) .ops-box{background:none;border:0;padding:0;gap:2px;box-shadow:none} :is(#view-mail,#view-fax) .ops-box button{background:none;border:0!important;border-bottom:2px solid transparent!important;border-radius:0; color:var(--text-secondary);font-weight:600;padding:6px 8px;min-height:36px;box-shadow:none} :is(#view-mail,#view-fax) .ops-box button b{color:inherit} :is(#view-mail,#view-fax) .ops-list .msg-t{display:flex;align-items:center;gap:8px;min-width:0;font-weight:500} :is(#view-mail,#view-fax) .ops-list .msg-t .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :is(#view-mail,#view-fax) .ops-list tr.new .msg-t, :is(#view-mail,#view-fax) .ops-list tr.new .ops-from{font-weight:700;color:var(--ink)} :is(#view-mail,#view-fax) .ops-list .msg-dot{width:8px;height:8px;transform:none} :is(#view-mail,#view-fax) main.wrap tbody tr.msg-row.new,:is(#view-mail,#view-fax) tbody tr.msg-row.new{background:none} :is(#view-mail,#view-fax) td.ops-empty{height:auto;padding:28px 16px!important;text-align:center;color:var(--text-secondary);font-size:14px;white-space:normal} #view-fax .ops-pen{color:var(--text-secondary)} /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 63번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 952d 952f 952i 952l 952n 990f */ /* ══ 월별 보고서 ══════════════════════════════════════════════════ */ /* 목록: 거래처(단계 배지+상호) · 매출·매입 · 사유 배지 — 단계 칸을 접어 상호가 잘리지 않게 */ /* 보고서 안 '자료 없음'·'예상 없음' = 중립 회색 한 줄 */ .rpt-box.mute{border-left-color:var(--line2);background:var(--surface-3);padding:8px 12px} .rpt-box.mute .t{display:inline;color:var(--ink2);margin-right:8px} .rpt-box.mute .b{display:inline;color:var(--mute)} #an-print .rpt-box.mute{background:#f3f4f6;border-left-color:#c9cdd3} .rpt-lh .mk svg{width:36px;height:36px} #view-monthly .legend2,#view-monthly .mobile-note{display:none!important} /* 한 줄 행(≈44px) · 달 칸 폭을 줄여 끝난 달이 한 화면에 */ #view-monthly .mo-table td.mo-name{min-width:0;width:210px;max-width:210px;white-space:nowrap} #view-monthly .mo-table td.mo-name > b{display:inline-block!important;max-width:calc(100% - 4px);vertical-align:middle} #view-monthly .mo-table td.mo-name .cx-b{vertical-align:middle} #view-monthly .mo-table tbody td{padding-top:10px;padding-bottom:10px} #view-monthly .mo-table th.mo-num,#view-monthly .mo-table td.mo-num{padding-left:6px;padding-right:10px;min-width:0} #view-monthly .mo-table th.mo-part .mo-pt{display:block;width:max-content;margin:2px 0 0 auto;font-size:12px!important;font-weight:700; line-height:18px;padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--mute)!important} #view-monthly.mo-own-on .mo-table .mo-own{display:none} @media (max-width:767px){ #view-monthly .mo-table td.mo-name{width:118px;max-width:118px} } /* 머리의 정렬 단추가 th 글자를 통째로 가져가므로 '수집 중' 은 data-pt 로 머리 아래에 단다 */ #view-monthly .mo-table th.mo-num .th-sort{display:flex;justify-content:flex-end;width:100%;text-align:right} #view-monthly .mo-table th.mo-part[data-pt]::after{content:attr(data-pt);display:block;width:max-content;margin:2px 0 0 auto;font-size:12px; font-weight:700;line-height:18px;padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--mute)} /* ══ 거래처 분석 ═════════════════════════════════════════════════ */ #view-anal .wht-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #view-anal #anal-meta{white-space:nowrap} #view-anal #anal-meta:empty{display:none} /* 라벨은 화면에서 감추고(placeholder·연결된 label 로 이름은 그대로) 필터를 한 줄로 */ #view-anal .an-tools{align-items:center;gap:8px;margin-bottom:10px} #view-anal .an-tools .an-f{flex-direction:row;gap:0} #view-anal .an-tools .an-f label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #view-anal .an-tools .btn,#view-anal .an-tools .an-cnt{align-self:center} #view-anal .an-tools .an-cnt{display:none} #view-anal .an-leg{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mute);white-space:nowrap;margin-left:auto} /* 목록: 한 행 두 줄 이내, 표는 안쪽 스크롤(fitTables)로 첫 화면에 12행 안팎 */ #view-anal #anal-body .tblwrap.an-tw{overflow:auto} #view-anal table.an-tbl td{vertical-align:middle;padding-top:7px;padding-bottom:7px} #view-anal #anal-pager{margin-top:8px} @media (max-width:767px){ #view-anal .an-tools .an-f{flex:1 1 100%} #view-anal .an-leg{margin-left:0} } @media (min-width:768px){ /* 8열: 거래처 · 구분 · 매출 · 매입 · 부가세 · 다음 부가세 · 연 소득·법인세 · › (한 줄 행) */ #view-anal table.an-tbl th:nth-child(1){width:23%} #view-anal table.an-tbl th:nth-child(2){width:11%} #view-anal table.an-tbl th:nth-child(3),#view-anal table.an-tbl th:nth-child(4){width:11%} #view-anal table.an-tbl th:nth-child(5){width:13%} #view-anal table.an-tbl th:nth-child(6){width:14%} #view-anal table.an-tbl th:nth-child(7){width:14%} #view-anal table.an-tbl th:nth-child(8){width:28px} #view-anal table.an-tbl td.name .an-nm{display:inline} #view-anal table.an-tbl td.name .sub{display:inline;margin-left:6px} #view-anal table.an-tbl td.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } @media (min-width:768px) and (max-width:1279px){ #view-anal table.an-tbl th:nth-child(1){width:30%} } #view-anal table.an-tbl th.num-h .th-sort{display:flex;justify-content:flex-end;width:100%;text-align:right} #view-anal table.an-tbl th.an-h-go .th-sort{visibility:hidden} /* 표가 안쪽 스크롤이 되어 오른쪽 74px 비서 단추 자리(63차-f)가 필요 없다 — 표가 카드 폭을 다 쓴다 */ #view-anal #anal-body .an-listcard{padding-right:var(--sp5)} /* 월별 보고서 목록 열 폭은 폭과 관계없이(한 칸으로 접히는 1100px 이하에서도 상호·사유가 세로로 쪼개지지 않게) */ #view-c360 .rpt .rpt-lh .rpt-meta,#view-c360 .rpt .rpt-cont span,#view-c360 .rpt .rpt-cont i,#view-c360 .rpt .rpt-foot .dis{font-size:12px!important} #view-c360 .c3-sec.c3-mini .detail-head{justify-content:flex-start} /* ── 3차: 분석 — '확정' 은 중립 채움 점, '환급' 은 ▼ 부호(초록 한 가지 뜻), 환산 배지 ── */ #view-anal table.an-tbl .an-refund{color:var(--ink2);font-weight:700} #view-anal table.an-tbl th.num-h,#view-anal table.an-tbl th{white-space:nowrap} /* 월별 표 — 0 은 조용히 */ #view-monthly .mo-table td.mo-num.z{color:var(--mute)} /* 분석 목록 쪽 넘기기를 표 카드 바닥에 붙인다(거래처 현황과 같은 자리) */ #view-anal #anal-body .an-listcard{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0} #view-anal #anal-pager:not(:empty){margin-top:0;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-top:1px solid var(--line); border-radius:0 0 16px 16px} /* ── 4차(2026-09-30 밤): 분모 한 가지 · 검토 칩 = 홈과 같은 세 칸 · 범례 기호 일치 ── */ /* 자료 미수신: '8월 수신 74/77곳' 한 칸(홈 카드와 같은 MD.missing 값) · 대상 밖은 ⓘ */ /* 분석: 범례 점은 표 안 점과 같은 동그라미 · '▼ 환급' 뜻을 범례에 */ #view-anal .an-leg > span{display:inline-flex;align-items:center;gap:0} #view-anal .an-leg i.an-dot{width:8px!important;height:8px!important;border-radius:50%!important;margin-right:6px;vertical-align:0} /* ── UI-08 거래처 분석 마지막 열(→) 머리 — 보이지 않는 정렬 단추가 칸(32px)을 넘쳤다. 화면에서 빼고 읽기용 이름만 ── */ #view-anal table.an-tbl th.an-h-go{overflow:hidden} #view-anal table.an-tbl th.an-h-go .th-sort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;margin:0;border:0} /* 재건축 4단계(C) 합친 시트 · 수임동의 · 전체 111장 중 64번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 954b 990a */ #view-intake .ik-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px} #view-intake .ik-i{font-size:13px;color:var(--text-secondary,var(--mute));cursor:help;border-bottom:1px dotted var(--border-interactive,var(--line2))} #view-intake .ik-i:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px} #view-intake .ht-i{border-bottom:0;font-size:15px;margin-left:2px;display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px} #view-intake #ht-card.ht-off .ht-body{display:none} #view-intake #ht-card.ht-off{padding-top:10px!important;padding-bottom:10px!important} #view-intake #ht-card.ht-off .detail-head{margin:0} #view-intake #ht-card>.detail-head{justify-content:flex-start;gap:8px;flex-wrap:wrap} #view-intake #ht-card>.detail-head h3{margin:0} #view-intake .ht-msg{font-size:13px;color:var(--text-secondary,var(--mute));display:inline-flex;gap:6px;align-items:center} /* ===== 홈택스 수임동의 신청 카드 (2026-10-01) — js/230 ht* · js/990 ===== */ #ht-card .ht-list{grid-template-columns:1fr;gap:6px} #ht-card .ht-f{flex-wrap:wrap} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 65번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 10개: 955a 955c 990a 990c */ /* 955_개편_수신_업무_근태_관리 — 2026-09-30 대개편 층(이 영역 작업자만 고친다) 메일 · 팩스 · 업무센터 · 근태 · 대표실 · 설정. 원칙: 문장 → ⓘ, 숫자는 칩·배지, 0 은 조용히, 목록이 화면을 채운다. 선택자는 화면 id 또는 이 층 전용 클래스(ops-*)로만 건다. */ /* ── ⓘ 설명 단추 + 떠 있는 설명(JS: 955_개편…js) ── */ .ops-i{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;flex:none; width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font:inherit;font-size:15px;line-height:1;color:var(--text-secondary);cursor:help;vertical-align:middle} .ops-i:hover,.ops-i.open{color:var(--accent-ink);background:var(--surface-3,var(--panel2))} .ops-i:focus-visible{outline:2px solid var(--accent);outline-offset:1px} #ops-tip[hidden]{display:none} @media (max-width:1024px){ .ops-i{min-width:44px;min-height:44px} } /* ══════════ 메일 · 팩스 : 한 줄 목록 ══════════ */ :is(#view-mail,#view-fax) .ops-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:12px} :is(#view-mail,#view-fax) .ops-head h2{margin:0 4px 0 0} :is(#view-mail,#view-fax) .ops-head .seg button b{margin-left:4px;font-weight:700;font-variant-numeric:tabular-nums} :is(#view-mail,#view-fax) .ops-head .seg button b.z{font-weight:500;color:var(--text-secondary)} :is(#view-mail,#view-fax) .ops-head .seg button.on b.z{color:inherit;opacity:1} :is(#view-mail,#view-fax) .ops-meta{margin-left:auto;font-size:13px;color:var(--text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums} :is(#view-mail,#view-fax) .ops-meta:empty{display:none} :is(#view-mail,#view-fax) .ops-meta:empty + .btn{margin-left:auto} :is(#view-mail,#view-fax) #ml-stats,:is(#view-mail,#view-fax) #fx-stats{display:none!important} :is(#view-mail,#view-fax) .ops-card .tblwrap{min-height:0} :is(#view-mail,#view-fax) main.wrap .card>.tblwrap,:is(#view-mail,#view-fax).wrap .card>.tblwrap{margin-left:0;margin-right:0;width:auto} #view-fax tbody tr.fx-new>td{background:none} :is(#view-mail,#view-fax) .ops-box button.on{color:var(--ink)!important;border-bottom-color:var(--accent)!important;font-weight:700} :is(#view-mail,#view-fax) table.ops-list{width:100%;table-layout:fixed;border-collapse:collapse} :is(#view-mail,#view-fax) table.ops-list th{font-size:13px;padding:9px 12px;white-space:nowrap} :is(#view-mail,#view-fax) .ops-list .ops-c-when{width:112px} :is(#view-mail,#view-fax) .ops-list .ops-c-from{width:220px} :is(#view-mail,#view-fax) .ops-list .ops-c-pdf{width:76px} :is(#view-mail,#view-fax) .ops-list tbody tr.ops-r>td{padding:0 12px;height:44px;vertical-align:middle;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;font-size:14px;border-bottom:1px solid var(--line)} :is(#view-mail,#view-fax) .ops-list tr.ops-r{cursor:pointer} :is(#view-mail,#view-fax) .ops-list tr.ops-r.ops-wait{cursor:default} :is(#view-mail,#view-fax) .ops-list tr.ops-r:hover>td{background:var(--panel2)} :is(#view-mail,#view-fax) .ops-list tr.ops-r:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} :is(#view-mail,#view-fax) .ops-list .ops-when{padding-top:0;vertical-align:middle;color:var(--text-secondary);font-size:13px} :is(#view-mail,#view-fax) .ops-list .ops-from{color:var(--ink-3,var(--ink))} :is(#view-mail,#view-fax) .ops-list .ops-from .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :is(#view-mail,#view-fax) .ops-list .ops-main{white-space:nowrap} :is(#view-mail,#view-fax) .ops-list .ops-none{color:var(--text-secondary)} :is(#view-mail,#view-fax) td.ops-empty .btn{margin-left:8px} .rp-i.rp-i:hover::before,.rp-i.rp-i.open::before{border-color:var(--accent-ink)} .rp-i.rp-i:hover::after,.rp-i.rp-i:focus-visible::after,.rp-i.rp-i.open::after{opacity:1;visibility:visible} @media (max-width:1024px) and (min-width:901px){ /* ── UI-04 901~1024px 사이드바가 닫혀 있어도 오른쪽으로 새던 그림자(왼쪽 가장자리 회색 띠) — 열렸을 때만 ── */ html:not(.sb-open) #sidebar{box-shadow:none} html.sb-open #sidebar{box-shadow:8px 0 28px rgba(16,24,40,.14)} } /* ── UI-05·UI-07 늘어난 단추의 글자가 왼쪽에 붙던 것(공용 .btn 에 가운데 정렬이 없었다) — 특정도 0 이라 따로 정한 곳(flex-start)은 그대로 ── */ :where(.btn){justify-content:center} /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 66번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 956 */ /* ═══ 78차 · CMS(더빌) 회원 관리 · 출금 · 정산 (2026-09-30) — 되돌리려면 이 블록만 지운다 ═══ 더빌 관리자 '회원상태/출금설정' 과 같은 조회 조건·목록. 숫자·배지·표 위주(NEEDS). 토큰만 쓴다(다크 자동). */ #view-cmsmem .cmm-head,#view-cmspay .cpy-head,#view-cmsset .cst-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cmm-tools{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center} .cmm-fetchbox{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;max-width:100%} .cmm-fetchbox[hidden]{display:none} .cmm-fetchbox input{width:130px;min-height:30px;font-size:14px;padding:4px 8px;border:1px solid var(--border-interactive,var(--line2));border-radius:var(--r-ctl);background:var(--panel);color:var(--ink)} #cmm-fetch-cli{width:190px} .cmm-file{cursor:pointer} button.pill.cmm-pbtn{border:0;cursor:pointer;font-family:inherit;line-height:1.5} button.pill.cmm-pbtn:hover{text-decoration:underline} .cmm-meta{font-size:13px;color:var(--text-secondary,var(--mute));display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center} .cmm-stats,.cpy-stats,.cst-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin-bottom:12px} button.cmm-tile{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;display:flex;flex-direction:column;gap:2px} button.cmm-tile .k{font-size:13px;color:var(--text-secondary,var(--mute))} button.cmm-tile .v{font-size:22px;font-weight:700;line-height:1.25} button.cmm-tile .v small{font-size:13px;font-weight:500;margin-left:3px;color:var(--text-secondary,var(--mute))} button.cmm-tile .s{font-size:13px;color:var(--text-secondary,var(--mute))} button.cmm-tile.sel{outline:2px solid var(--accent-fill,var(--accent));outline-offset:-2px} button.cmm-tile.warn:not(.zero) .v{color:var(--warn-ink,var(--warn))} button.cmm-tile.bad:not(.zero) .v{color:var(--bad-ink,var(--bad))} button.cmm-tile.zero .v{color:var(--text-secondary,var(--mute))} .cmm-stats div.card.stat,.cst-stats div.card.stat{display:flex;flex-direction:column;gap:2px} /* 조회 조건 */ .cmm-filter{padding:10px 14px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px} .cmm-stf{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;min-width:0} .cmm-stf legend{float:left;font-size:13px;font-weight:700;margin-right:6px;padding:0} .cmm-stf label.cb{align-items:center;font-size:14px;min-height:28px} .cmm-stf label.cb input{margin:0} .cmm-fl{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-end} .cmm-fl label{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--text-secondary,var(--mute));font-weight:600;min-width:0} .cmm-fl input,.cmm-fl select,#view-cmspay .cpy-head select,#view-cmspay .cpy-head input{min-height:32px;font-size:14px;padding:4px 8px;border:1px solid var(--border-interactive,var(--line2));border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);font-weight:400} .cmm-fl input{width:118px} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 67번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 5개: 955d 955f 955i 955m 955r */ /* 발신처 이름 ✎ — 이름이 없는 번호에만 늘 보이고, 이름이 있으면 줄에 올릴 때만 */ #view-fax .ops-from{display:table-cell} #view-fax .ops-pen{appearance:none;border:0;background:none;padding:0 4px;margin-left:4px;font:inherit;font-size:14px;line-height:1;cursor:pointer;border-radius:6px;min-width:24px;min-height:24px;vertical-align:middle} #view-fax .ops-pen:hover,#view-fax .ops-pen:focus-visible{background:var(--surface-3,var(--panel2))} #view-fax .ops-pen.named{opacity:0} #view-fax tr.ops-r:hover .ops-pen.named,#view-fax tr.ops-r:focus-within .ops-pen.named,#view-fax .ops-pen.named:focus-visible{opacity:1} #view-fax .ops-pdf .btn{min-height:28px;padding:2px 10px} @media (max-width:767px){ :is(#view-mail,#view-fax) .ops-head h2{order:0;flex:0 0 auto;width:auto} :is(#view-mail,#view-fax) .ops-head .ops-chips button{padding-left:9px;padding-right:9px} :is(#view-mail,#view-fax) .ops-head .btn.primary{order:2;margin-left:auto} :is(#view-mail,#view-fax) .ops-head .ops-i{order:3} :is(#view-mail,#view-fax) .ops-head .ops-box{order:4;flex:0 1 auto} :is(#view-mail,#view-fax) .ops-head .ops-meta{order:5;margin-left:auto} :is(#view-mail,#view-fax) .ops-head .ops-meta:empty + .btn{margin-left:auto} :is(#view-mail,#view-fax) .ops-head .ops-chips{order:5} :is(#view-mail,#view-fax) .ops-q{order:6;width:auto;flex:1 1 90px;min-width:90px} :is(#view-mail,#view-fax) .ops-list thead{display:none} :is(#view-mail,#view-fax) table.ops-list,:is(#view-mail,#view-fax) table.ops-list>tbody{display:block;width:100%} :is(#view-mail,#view-fax) .ops-list tbody tr.ops-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"t t a" "f w w";column-gap:10px;row-gap:3px;align-items:center; padding:10px 14px;min-height:64px;box-sizing:border-box;border-bottom:1px solid var(--line);height:auto} :is(#view-mail,#view-fax) .ops-list tbody tr.ops-r>td{display:block;height:auto;padding:0;border:0;min-width:0;background:none} :is(#view-mail,#view-fax) .ops-list .ops-main{grid-area:t} :is(#view-mail,#view-fax) .ops-list .ops-from{grid-area:f;font-size:13px;color:var(--text-secondary)} :is(#view-mail,#view-fax) .ops-list tr.new .ops-from{color:var(--ink-3,var(--ink))} :is(#view-mail,#view-fax) .ops-list .ops-when{grid-area:w;text-align:right} #view-fax .ops-list tbody tr.ops-r{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"t t t d" "f g w w"} #view-fax .ops-list .ops-pg{grid-area:g;font-size:13px;color:var(--text-secondary)} #view-fax .ops-list .ops-pg:not(:empty)::after{content:"쪽"} #view-fax .ops-list .ops-pdf{grid-area:d;text-align:right} #view-fax .ops-list .ops-from{display:flex;align-items:center;min-width:0} #view-fax .ops-list .ops-from .tx{min-width:0} #view-fax .ops-pen,#view-fax .ops-pen.named{opacity:1;min-width:32px;min-height:32px} :is(#view-mail,#view-fax) .ops-list tbody tr:not(.ops-r){display:block} :is(#view-mail,#view-fax) .ops-list tbody tr:not(.ops-r)>td{display:block} } /* ── 3차 · 팩스 ── PDF 는 테두리 없는 링크(줄을 누르면 열람), 연필은 줄에 올렸을 때만 */ #view-fax #seg-fx button[hidden]{display:none!important} #view-fax .ops-pdf a.btn{min-height:28px;} #view-fax .ops-pdf a.btn:hover{text-decoration:underline} #view-fax .ops-r .ops-pen{opacity:0;transition:opacity .12s} #view-fax .ops-r:hover .ops-pen,#view-fax .ops-r:focus-within .ops-pen,#view-fax .ops-r .ops-pen:focus-visible{opacity:1} @media (hover:none){ #view-fax .ops-r .ops-pen{opacity:.55} } /* 5차: --faint 는 2.6:1 이라 글자에 못 쓴다 */ /* ── 3차 · 메일 ── 광고 메일은 조용히 */ #view-mail tr.ops-ad td,#view-mail tr.ops-ad .tx{font-weight:400!important;color:var(--text-secondary)!important} /* 팩스 · 쪽 수는 본문색(강조색이면 모든 줄이 강조처럼 보인다) · 이름도 요약도 없는 줄은 ✎ 를 늘 보인다 */ #view-fax .ops-list td.ops-pg,#view-fax .ops-list td.ops-pg *{color:var(--ink);font-weight:500} #view-fax tr.ops-bare .ops-pen{opacity:1;} @media (max-width:767px){ #view-fax .ops-list td.ops-pg,#view-fax .ops-list td.ops-pg *{color:var(--text-secondary)} } /* 할 일 · 빈 상태 한 줄 */ #view-sched #ev-list-count[hidden],#view-sched #cal-td-count[hidden]{display:none!important} #view-sched #calgrid .cd.today .ev.k{border:0!important;background:var(--bad-soft,#FDECEC)!important;color:var(--bad-ink,var(--bad))!important;font-weight:700} /* 팩스 · 표 안의 'PDF' 는 글자 링크(본문색) — 주황은 '팩스 보내기' 주 단추에만 */ #view-fax .ops-pdf a.btn{background:none;border:0!important;box-shadow:none;color:var(--ink);font-weight:600; text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;padding:4px 6px} /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 68번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 951c 955h 955j 955l 955p 955s */ /* ═══ ③ 공통 ═══ */ /* 0 은 조용히 — 지표 칸 값이 0 이면 무채색·보통 굵기·테두리 없음(선택된 칸은 그대로) */ :is(.stat,.kpi-t,.adm-k).is-zero:not(.sel):not([aria-pressed="true"]){border-color:transparent!important;box-shadow:none!important;background:var(--panel2)} /* ══════════ 대표실 ══════════ */ #view-admin .ops-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #view-admin .ops-head h2{margin:0 4px 0 0} #view-admin .ops-meta{font-size:13px;color:var(--text-secondary)} #view-admin .ops-meta:empty{display:none} #view-admin .adm-load{display:none!important} /* 업무량 막대는 직원별 업무 표 안으로 */ /* 시스템 — 줄마다 점 하나 */ #view-admin .ops-sys{display:flex;flex-direction:column} #view-admin .ops-sr+.ops-sr{border-top:1px solid var(--line)} #view-admin .ops-sr>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 2px;cursor:pointer;list-style:none} #view-admin .ops-sr>summary::-webkit-details-marker{display:none} #view-admin .ops-sr>summary::after{content:"›";order:9;color:var(--text-secondary);font-size:18px;line-height:1;transition:transform .15s} #view-admin .ops-sr[open]>summary::after{transform:rotate(90deg)} #view-admin .ops-sr>summary .ops-sl{order:1;font-weight:600;color:var(--ink)} #view-admin .ops-sr>summary .ops-i{order:2} #view-admin .ops-sr>summary .pill{order:3;margin-left:auto} #view-admin .ops-dot{order:0;flex:none;width:10px;height:10px;border-radius:50%;background:var(--line2)} #view-admin .ops-dot.ok{background:var(--ok)} #view-admin .ops-dot.bad{background:var(--bad)} #view-admin .ops-dot.warn{background:var(--warn)} #view-admin .ops-sb{padding:2px 2px 12px 18px;font-size:13px;color:var(--text-secondary)} #view-admin .ops-note{font-size:13px;color:var(--text-secondary);margin:6px 0 0;line-height:1.5} #view-admin .ops-acts{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px} #view-admin .ops-none{color:var(--text-secondary);font-size:13px;padding:4px 0} #view-admin .ops-hint{margin-left:6px;font-size:13px;color:var(--text-secondary)} #view-admin .sboard .ops-off,#view-admin .sboard.ops-off{display:none!important} /* 접힘 — 비서 학습 · 관리 */ #view-admin .ops-fold{margin-top:var(--sp4,16px);border-top:1px solid var(--line)} #view-admin .ops-fold>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 2px;cursor:pointer;list-style:none; font-size:16px;font-weight:600;color:var(--ink)} #view-admin .ops-fold>summary::-webkit-details-marker{display:none} #view-admin .ops-fold>summary::before{content:"›";color:var(--text-secondary);font-size:18px;transition:transform .15s} #view-admin .ops-fold[open]>summary::before{transform:rotate(90deg)} #view-admin .ops-fold>.adm-grid{margin-top:var(--sp3,12px)} @media (max-width:767px){ #view-admin .adm-kpi{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px} #view-admin .adm-kpi .adm-k:last-child:nth-child(odd){grid-column:1 / -1} #view-admin .adm-kpi .adm-k .v{font-size:17px!important;white-space:nowrap} } /* ══════════ 설정 ══════════ */ #view-settings .wht-head .sub{display:none} #view-settings .ops-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #view-settings .ops-who .pill{margin:0} #view-settings .ops-id{font-size:13px;color:var(--text-secondary)} #view-settings .set-row .ops-i{margin-left:2px} #view-settings .set-row>span:first-child{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 8px} /* ── 3차(2026-09-30) · 업무센터 기한별 = 홈 '처리하셔야 할 일' 과 같은 목록 ── */ /* 일정 탭 오늘 칸 — '지금 할 일 N' 한 줄(홈과 같은 숫자) */ /* ── 3차 · 대표실 ── */ #view-admin .ops-scope{display:inline-block;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--bg);color:var(--text-secondary);font-size:12px;font-weight:600;vertical-align:1px} /* ── 3차 · 설정 ── 조밀·배지 = 같은 켜짐/꺼짐 스위치 */ #view-settings #set-body .ops-sw-host #sb-dense,#view-settings #set-body .ops-sw-host #sb-badge{position:relative;display:inline-block;width:52px;height:32px;min-height:32px; padding:0;margin:0;border:0;background:transparent;box-shadow:none;font-size:0;color:transparent;cursor:pointer;vertical-align:middle} #view-settings #set-body .ops-sw-host #sb-dense>*,#view-settings #set-body .ops-sw-host #sb-badge>*{display:none!important} #view-settings #set-body .ops-sw-host #sb-dense::before,#view-settings #set-body .ops-sw-host #sb-badge::before{content:"";position:absolute;left:4px;top:3px;width:44px;height:26px;border-radius:999px; background:var(--line2,var(--line));transition:background .15s} #view-settings #set-body .ops-sw-host #sb-dense::after,#view-settings #set-body .ops-sw-host #sb-badge::after{content:"";position:absolute;left:7px;top:6px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s} #view-settings #set-body .ops-sw-host #sb-dense[aria-pressed="true"]::before,#view-settings #set-body .ops-sw-host #sb-badge[aria-pressed="true"]::before{background:var(--accent-fill,var(--accent))} #view-settings #set-body .ops-sw-host #sb-dense[aria-pressed="true"]::after,#view-settings #set-body .ops-sw-host #sb-badge[aria-pressed="true"]::after{transform:translateX(18px)} #view-settings #set-body .ops-sw-host #sb-dense:focus-visible,#view-settings #set-body .ops-sw-host #sb-badge:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:999px} @media (max-width:1024px){ #view-settings #set-body .ops-sw-host #sb-dense,#view-settings #set-body .ops-sw-host #sb-badge{height:44px;min-height:44px} #view-settings #set-body .ops-sw-host #sb-dense::before,#view-settings #set-body .ops-sw-host #sb-badge::before{top:9px} #view-settings #set-body .ops-sw-host #sb-dense::after,#view-settings #set-body .ops-sw-host #sb-badge::after{top:12px} } #view-settings #set-body{max-width:none;width:100%} /* 휴대폰은 화면 색 조작이 전체 메뉴 시트 맨 아래로 옮겨 가 이 줄이 비므로 빈 줄을 숨긴다 */ #view-settings .set-row:has(#set-thm:empty){display:none!important} /* ══════════ 5차(2026-09-30) ══════════ */ /* 대표실 · 직원별 업무 '기타' 줄 — 합계 = 위 줄의 합 */ /* ══════════ 6차 (2026-09-30 밤) — 3차 심사 반영 ══════════ */ /* 대표실 · 결재 흔적 제거(신고 결재는 메뉴에서 뺐다) — KPI 4칸 · 결재 통계 카드 숨김 · 막대는 무채색(주황은 주 단추에만) */ #view-admin .adm-kpi.ops-k4{grid-template-columns:repeat(4,minmax(0,1fr))!important} @media (max-width:1100px){ #view-admin .adm-kpi.ops-k4{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* 설정 · 막힌 이유는 배지를 눌렀을 때만 · 아이폰 안내는 '미지원' 이유와 같은 말이라 따로 두지 않는다 */ #view-settings #set-push-row .push-s[hidden],#view-settings #set-push-row .push-ios{display:none!important} #view-settings #set-push-row .pill.push-tg{cursor:pointer} #view-settings #set-push-row .pill.push-tg::after{content:" ▾";font-size:11px} #view-settings #set-push-row .pill.push-tg[aria-expanded="true"]::after{content:" ▴"} #view-settings #set-push-row .pill.push-tg:focus-visible{outline:2px solid var(--accent);outline-offset:2px} #view-settings section.set-sec[hidden]{display:none!important} /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 69번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 956 */ .cmm-fl #cmm-name{width:150px} .cmm-fl #cmm-a4{width:74px} /* 목록 + 상세 */ /* 상세는 오른쪽에 떠 있는 칸(목록 10열이 줄지 않게) — 1760px 이상에서만 옆 칸, 600px 이하는 전체 화면 */ .cmm-grid{display:block} .cmm-grid>*{min-width:0} .cmm-list,.cpy-list,.cst-list{padding:0} .cmm-lh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)} .cmm-sum{font-size:14px} .cmm-sum b{font-weight:700} .cmm-pager{margin-left:auto;display:inline-flex;gap:6px;align-items:center;font-size:13px} .cmm-pager button{min-width:32px;} table.cmm-t,table.cpy-t,table.cst-t{width:100%;border-collapse:collapse;font-size:14px} table.cmm-t th,table.cpy-t th,table.cst-t th{font-size:13px;font-weight:600;text-align:left;white-space:nowrap} table.cmm-t th.r,table.cmm-t td.r,table.cpy-t th.r,table.cpy-t td.r,table.cst-t th.r,table.cst-t td.r{text-align:right} table.cmm-t th.c,table.cmm-t td.c{text-align:center} table.cmm-t td,table.cpy-t td,table.cst-t td{white-space:nowrap;vertical-align:middle} table.cmm-t td.cmm-nm,table.cpy-t td.cpy-nm{white-space:normal;min-width:120px;max-width:230px} table.cmm-t th,table.cmm-t td{padding-left:8px;padding-right:8px} @media (max-width:1366px){ table.cmm-t td.cmm-nm{max-width:190px} table.cmm-t th,table.cmm-t td{padding-left:6px;padding-right:6px} } table.cmm-t td.cmm-nm b,table.cpy-t td.cpy-nm b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis} table.cmm-t .sub,table.cpy-t .sub,table.cst-t .sub,.cmm-det .sub{display:block;font-size:12.5px;color:var(--text-secondary,var(--mute));font-weight:400} table.cst-t .sub{display:inline} .cmm-nolink{color:var(--warn-ink,var(--warn))!important} button.cmm-sort{font:inherit;font-weight:600;color:inherit;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap} th[aria-sort="ascending"]>button.cmm-sort::after{content:" ▲";font-size:10px} th[aria-sort="descending"]>button.cmm-sort::after{content:" ▼";font-size:10px} #cmm-rows tr{cursor:pointer} #cmm-rows tr:hover{background:var(--panel2)} #cmm-rows tr.sel{background:var(--accent-soft)} #cmm-rows tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent-fill,var(--accent))} #cmm-rows tr:focus-visible{outline:2px solid var(--accent-fill,var(--accent));outline-offset:-2px} .cmm-det{padding:14px 16px;position:fixed;right:16px;top:calc(var(--topbar-h,56px) + 12px);bottom:16px;width:min(420px,calc(100vw - 32px));overflow:auto;z-index:60; box-shadow:0 16px 48px rgba(16,24,40,.22);border:1px solid var(--line2)} .cmm-det[hidden]{display:none} @media (min-width:1760px){ .cmm-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:12px;align-items:start} .cmm-grid:has(>#cmm-det[hidden]){grid-template-columns:minmax(0,1fr)} .cmm-det{position:sticky;top:12px;right:auto;bottom:auto;width:auto;max-height:calc(100vh - 150px);box-shadow:none;z-index:auto;border-color:var(--line)} } .cmm-dempty{color:var(--text-secondary,var(--mute));font-size:14px;padding:22px 0;text-align:center} .cmm-dh{display:flex;gap:8px;align-items:flex-start} .cmm-dh>div{flex:1;min-width:0} .cmm-dh h3{font-size:17px;margin:0;overflow-wrap:anywhere} .cmm-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;margin:12px 0;font-size:14px} .cmm-kv dt{color:var(--text-secondary,var(--mute));font-size:13px;white-space:nowrap} .cmm-kv dd{margin:0;min-width:0;overflow-wrap:anywhere} .cmm-acts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0} .cmm-acts .btn.danger,.cmm-form .btn.danger{border-color:var(--bad-ink,var(--bad));color:var(--bad-ink,var(--bad))} .cmm-acts .btn[disabled],.cpy-t .btn[disabled],.cpy-bar .btn[disabled]{opacity:1;color:var(--text-secondary,var(--mute));background:var(--panel2);cursor:not-allowed} .cmm-det h4{font-size:14px;margin:14px 0 6px} table.cmm-ht{width:100%;border-collapse:collapse;font-size:13px} table.cmm-ht td{border-top:1px solid var(--line);padding:5px 4px;vertical-align:top;white-space:normal} table.cmm-ht td:first-child{white-space:nowrap;color:var(--text-secondary,var(--mute))} .cmm-form{border:1px solid var(--line2);border-radius:10px;padding:12px;margin:10px 0;background:var(--panel2)} .cmm-form h4{margin:0 0 8px} .cmm-fg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px} .cmm-fg label,.cmm-form>label:not(.cb){display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:600;color:var(--text-secondary,var(--mute));min-width:0} .cmm-fg label.w2{grid-column:1/-1} .cmm-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.cmm-form select,.cmm-form textarea{min-height:34px;font-size:14px;padding:5px 8px;border:1px solid var(--border-interactive,var(--line2));border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);font-weight:400;width:100%;box-sizing:border-box} .cmm-form textarea{resize:vertical} .cmm-form label.cb{margin:8px 0 0;font-size:14px} .cmm-fa{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:10px;flex-wrap:wrap} .cmm-msg{flex:1;font-size:13px;color:var(--text-secondary,var(--mute));min-width:0} .cmm-msg.bad{color:var(--bad-ink,var(--bad));font-weight:700} .cmm-warn{display:block;margin:6px 0;padding:6px 10px;border-radius:var(--r-inner);background:var(--warn-soft);color:var(--warn-ink,var(--warn));font-size:13px;font-weight:600} .cmm-nb{font-weight:400} .cmm-nb.bad{color:var(--bad-ink,var(--bad));font-weight:700} .cr-st.cmm-go{cursor:pointer} .cr-st.cmm-go:hover .pill{text-decoration:underline} b.cst-bad{color:var(--bad-ink,var(--bad));font-weight:700} .cmm-modef{margin-top:8px} .cmm-file.is-off{color:var(--text-secondary,var(--mute));background:var(--panel2);cursor:not-allowed} /* 출금 */ .cpy-dtl{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600} #view-cmspay .cpy-head #cpy-q{min-width:140px} /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 70번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 955g 955k 955t 961 */ /* ══════════ 업무센터 ══════════ */ /* ══════════ 근태 ══════════ */ #view-attend .detail-head .ops-i{margin-left:2px} #view-attend #at-week-range{margin-left:auto} #view-attend .at-lv-none{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0; color:var(--text-secondary);font-size:14px} #view-attend .at-lv-wait{margin-top:8px} #view-attend .at-loc-s{color:var(--text-secondary);margin-left:6px;font-weight:500} #view-attend .at-std{color:var(--text-secondary)} #view-attend .at-tools .ops-i{margin-left:-2px} /* ── 3차 · 근태 ── 남은 근무는 위험이 아니다(무채색) · 범위 배지는 제목 옆 한 곳만 */ #view-attend .at-wnum b:not(.num):not(.ok){color:var(--ink)!important;font-weight:600} #view-attend #at-log-scope{display:none!important} /* 비어 있는 내 업무·받은 지시 카드는 늘리지 않는다(입력칸 바로 아래 한 줄) */ /* 달력 · 오늘이 신고 기한이면 그 칩을 크게 알린다(D-0) */ /* 근태 · 기록이 없는 달은 카드를 늘리지 않는다 */ #view-attend .card:has(#at-log-title):has(td.empty){flex:none;height:auto;min-height:0} #view-attend .card:has(#at-log-title) .tblwrap:has(td.empty){flex:none;min-height:0;height:auto;max-height:none!important} #view-attend .card:has(#at-log-title) td.empty{height:auto;padding:24px 0!important} /* 근태 · 누를 수 없는 때도 주 단추는 중립(빨강은 오류가 아니다) · 위치 권한 문제는 주황 한 줄 + 링크 */ #view-attend .btn.at-big.at-blocked{background:var(--panel);color:var(--ink); box-shadow:inset 0 0 0 1px var(--border-interactive,var(--line2));border-color:var(--border-interactive,var(--line2))} #view-attend .at-loc.warn{color:var(--warn-ink,var(--warn))} #view-attend .at-loc-fix{background:none;border:0;padding:4px 2px;font:inherit;font-weight:600;color:var(--accent-ink,var(--accent)); text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:28px} #view-attend .at-loc-fix:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (max-width:1024px){ #view-attend .at-loc-fix{min-height:44px;min-width:44px} } /* 2026-10-08 비서 출퇴근(attend.punch): '비서' 꼬리표 · 재택근무일 창의 사무실 공인 IP · 수집 현황 '오늘 출퇴근' */ .at-flag.via{background:var(--accent-soft);color:var(--accent-ink);margin-right:6px} .wf-ipsec{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)} /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 71번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 956 990g 990hm */ #cpy-dl.bad{background:var(--bad-soft);color:var(--bad-ink,var(--bad))} #cpy-dl.warn{background:var(--warn-soft);color:var(--warn-ink,var(--warn))} #cpy-dl.mute{background:var(--panel2);color:var(--ink2,var(--ink))} .cpy-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px} .cpy-selsum{flex:1;font-size:14px;min-width:0} table.cpy-t th.cpy-ck,table.cpy-t td.cpy-ck{width:34px;text-align:center} table.cpy-t input.cpy-amt{width:100px;text-align:right;min-height:30px;font-size:14px;padding:3px 6px;border:1px solid var(--border-interactive,var(--line2));border-radius:6px;background:var(--panel);color:var(--ink)} table.cpy-t td.cpy-act{white-space:nowrap} table.cpy-t td.cpy-act .btn+.btn{margin-left:4px} button.cmm-lnk{font:inherit;color:var(--accent-ink,var(--accent));background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .cpy-err{display:block;font-size:12.5px;color:var(--bad-ink,var(--bad))} @media (max-width:600px){ .cmm-det{left:0;right:0;top:0;bottom:0;width:auto;border-radius:0;border:0;z-index:115;padding:12px 14px 24px} } /* 누를 곳 — 데스크톱 28px 바닥(4-47) · 손가락 폭(≤1024px) 44px */ button.cmm-sort,button.cmm-lnk{min-height:28px;display:inline-flex;align-items:center} #view-cmsmem .btn.sm,#view-cmspay .btn.sm,.cmm-pager button{min-height:28px} label.cpy-ckl{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;cursor:pointer;margin:0} @media (max-width:1024px){ .cmm-fl input,.cmm-fl select,#view-cmspay .cpy-head select,#view-cmspay .cpy-head input,.cmm-fetchbox input,table.cpy-t input.cpy-amt, .cmm-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.cmm-form select{min-height:44px} #view-cmsmem .btn,#view-cmspay .btn,#view-cmsset .btn,#view-cmsmem .btn.sm,#view-cmspay .btn.sm,#view-cmsset .btn.sm,.cmm-pager button,button.cmm-tile,button.cmm-lnk,button.cmm-sort{min-height:44px} .cmm-stf label.cb,.cmm-form label.cb{min-height:44px;align-items:center} label.cpy-ckl{min-width:44px;min-height:44px} } @media (max-width:900px){ /* 표 → 카드 (값마다 data-l 라벨) — 열 10개는 900px 아래에서 한 줄에 들어가지 않는다 */ .cmm-stats,.cpy-stats,.cst-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important} .cmm-fl label{flex:1 1 120px} .cmm-fl input,.cmm-fl select,.cmm-fl #cmm-name,.cmm-fl #cmm-a4{width:100%} table.cmm-t,table.cmm-t tbody,table.cmm-t tr,table.cmm-t td, table.cpy-t,table.cpy-t tbody,table.cpy-t tr,table.cpy-t td, table.cst-t,table.cst-t tbody,table.cst-t tr,table.cst-t td{display:block;width:auto} table.cmm-t thead,table.cpy-t thead,table.cst-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} table.cmm-t tbody>tr,table.cpy-t tbody>tr,table.cst-t tbody>tr{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px;background:var(--panel)} table.cmm-t tbody>tr>td,table.cpy-t tbody>tr>td,table.cst-t tbody>tr>td{border:0;padding:2px 0;text-align:left!important;white-space:normal;max-width:none} table.cmm-t td[data-l],table.cpy-t td[data-l],table.cst-t td[data-l]{display:flex;gap:10px;align-items:baseline;justify-content:space-between} table.cmm-t td[data-l]::before,table.cpy-t td[data-l]::before,table.cst-t td[data-l]::before{content:attr(data-l);flex:none;font-size:13px;font-weight:600;color:var(--text-secondary,#566072)} table.cmm-t td.cmm-nm,table.cpy-t td.cpy-nm,table.cst-t td.cst-dt{order:-1;display:block;font-size:15px} table.cmm-t td.cmm-nm::before,table.cpy-t td.cpy-nm::before,table.cst-t td.cst-dt::before{display:none} table.cpy-t td.cpy-ck{order:-2;width:auto;text-align:left!important} table.cmm-t td.empty,table.cpy-t td.empty,table.cst-t td.empty{display:block!important;padding:20px 8px;text-align:center!important} table.cmm-t td.empty::before,table.cpy-t td.empty::before,table.cst-t td.empty::before{display:none} } @media (max-width:767px){ .cmm-fl input,.cmm-fl select,.cmm-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.cmm-form select,.cmm-form textarea,.cmm-fetchbox input, #view-cmspay .cpy-head select,#view-cmspay .cpy-head input,table.cpy-t input.cpy-amt{font-size:16px} .cmm-tools,.cmm-fetchbox{width:100%} .cmm-fetchbox input,#cmm-fetch-cli{flex:1 1 140px;width:auto;min-width:0} .cmm-fg{grid-template-columns:minmax(0,1fr)} .cmm-det{padding:12px} } /* ═════ 최종 심사 반영(2026-09-30) — 회원 관리 ═════ */ /* 핵심 숫자 3칸(등록성공·등록중·대기·해지·정지) · '확인 필요' 는 머리 알약 */ #view-cmsmem .cmm-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important} #view-cmsmem .cmm-chk{cursor:pointer;min-height:28px;border:1px solid transparent;font:inherit;font-size:13px;font-weight:600} #view-cmsmem .cmm-chk.on{border-color:var(--warn-ink,var(--warn))} #view-cmsmem .cmm-chk:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px} #view-cmsmem .cmm-toolsbtn,#view-cmsmem .cmm-fbtn{display:none} @media (max-width:900px){ #view-cmsmem .cmm-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important} #view-cmsmem .cmm-stats .cmm-tile{padding:8px 10px;min-width:0} #view-cmsmem .cmm-stats .cmm-tile .k{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-cmsmem .cmm-stats .cmm-tile .v{font-size:20px} #view-cmsmem .cmm-chk{min-height:44px} /* 도구 셋 → ⋯ 하나 */ #view-cmsmem .cmm-head{position:relative} #view-cmsmem .cmm-toolsbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;margin-left:auto;font-size:18px;font-weight:700} #view-cmsmem .cmm-tools{display:none!important} #view-cmsmem .cmm-tools.open{display:flex!important;flex-direction:column;align-items:stretch;gap:6px;position:absolute;right:0;top:calc(100% + 4px);z-index:45; width:min(320px,calc(100vw - 32px));box-sizing:border-box;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14)} #view-cmsmem .cmm-tools.open>.btn,#view-cmsmem .cmm-tools.open>label.btn{justify-content:flex-start;width:100%} #view-cmsmem .cmm-tools.open .cmm-fetchbox{width:100%} /* 조회 조건 → 검색칸 + '필터 n' */ #view-cmsmem .cmm-filter{padding:8px 10px;margin-bottom:8px} #view-cmsmem .cmm-fl{flex-wrap:wrap;align-items:flex-end} #view-cmsmem .cmm-fl>label.cmm-q{flex:1 1 0;min-width:0} #view-cmsmem .cmm-fbtn{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:44px} #view-cmsmem .cmm-fbtn b{min-width:18px;padding:0 5px;border-radius:999px;background:var(--accent-fill);color:#fff;font-size:12.5px;line-height:18px;text-align:center} #view-cmsmem .cmm-fbtn b:empty{display:none} #view-cmsmem .cmm-fbtn.act{outline:2px solid var(--accent-fill);outline-offset:-1px} #view-cmsmem .cmm-filter:not(.fopen) .cmm-fl>:not(.cmm-q):not(.cmm-fbtn){display:none!important} #view-cmsmem .cmm-filter.fopen .cmm-fl>label:not(.cmm-q){flex:1 1 100%!important} #view-cmsmem .cmm-fl>label.cmm-q input{width:100%} /* 회원 카드 — ① 회원명·상태 ② 출금액·약정일 ③ 출금중지·최종출금일(중지일이 있을 때만). 회원코드·등록일·구분은 눌러서 상세 */ #view-cmsmem .cmm-list>.tblwrap{overflow-x:hidden;margin:0;width:100%;max-width:none;box-sizing:border-box} #view-cmsmem #cmm-stats{display:grid!important;overflow:visible} #view-cmsmem #cmm-stats>.cmm-tile{width:auto!important;flex:none} #view-cmsmem .cmm-chk{display:inline-flex;align-items:center;padding:0 12px} #view-cmsmem table.cmm-t{width:100%;min-width:0} #view-cmsmem table.cmm-t tbody>tr[data-id]{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:baseline; margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 12px} #view-cmsmem table.cmm-t tbody>tr[data-id].sel{background:var(--accent-soft)} #view-cmsmem table.cmm-t tbody>tr[data-id]>td{padding:0;min-width:0} #view-cmsmem table.cmm-t tbody>tr[data-id]>td:nth-child(1),#view-cmsmem table.cmm-t tbody>tr[data-id]>td:nth-child(2), #view-cmsmem table.cmm-t tbody>tr[data-id]>td:nth-child(3),#view-cmsmem table.cmm-t tbody>tr[data-id]>td:nth-child(5){display:none!important} #view-cmsmem table.cmm-t td.cmm-nm{grid-column:1;grid-row:1;order:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:none} #view-cmsmem table.cmm-t td.cmm-nm b{font-size:15px} #view-cmsmem table.cmm-t td.cmm-nm .sub{margin-left:6px;font-size:13px} #view-cmsmem table.cmm-t td.cmm-cst{grid-column:2;grid-row:1;display:block!important;justify-self:end;white-space:nowrap} #view-cmsmem table.cmm-t td.cmm-cst::before{display:none!important} #view-cmsmem table.cmm-t td.cmm-camt,#view-cmsmem table.cmm-t td.cmm-cday,#view-cmsmem table.cmm-t td.cmm-clast,#view-cmsmem table.cmm-t td.cmm-cstop{display:flex!important;gap:6px;justify-content:flex-start;align-items:baseline;font-size:14px;white-space:nowrap} #view-cmsmem table.cmm-t td.cmm-camt{grid-column:1;grid-row:2} #view-cmsmem table.cmm-t td.cmm-cday{grid-column:2;grid-row:2;justify-self:end} #view-cmsmem table.cmm-t td.cmm-cstop{grid-column:1;grid-row:3;color:var(--bad-ink,var(--bad))} #view-cmsmem table.cmm-t td.cmm-clast{grid-column:2;grid-row:3;justify-self:end} #view-cmsmem table.cmm-t tr:not(.cmm-hasstop) td.cmm-cstop,#view-cmsmem table.cmm-t tr:not(.cmm-hasstop) td.cmm-clast{display:none!important} #view-cmsmem table.cmm-t td.cmm-camt::before,#view-cmsmem table.cmm-t td.cmm-cday::before,#view-cmsmem table.cmm-t td.cmm-clast::before,#view-cmsmem table.cmm-t td.cmm-cstop::before{font-size:13px} #view-cmsmem table.cmm-t td.cmm-cday::before{content:"약정"} #view-cmsmem table.cmm-t td.cmm-clast::before{content:"최종"} #view-cmsmem table.cmm-t td.cmm-cstop::before{content:"중지"} } /* 2026-09-30 밤 · 더빌 출금설정 필요 상자(js/988) */ .cms-setbox{margin:10px 0;padding:10px 12px;border:1px solid var(--warn);border-radius:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .cms-setneed{font-weight:600} .cms-setdlg{max-width:min(96vw,520px)} .cms-setdlg h3{margin:0 0 6px} .cms-setdlg label.cb{margin:10px 0;align-items:flex-start} .cms-setdlg-b{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap} #cmn-macct{min-width:220px} #cst-items{margin:0 0 16px;padding:16px 20px} .cst-ih{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-bottom:8px} .cst-ih h3{margin:0} .cst-it{width:100%} .cst-iadd{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:12px} .cst-iadd label{display:flex;flex-direction:column;gap:4px;font-size:13px} @media (max-width:767px){ table.cmn-rt,table.cmn-rt tbody,table.cmn-rt tr,table.cmn-rt td{display:block;width:auto} table.cmn-rt tr{padding:8px 0;border-top:1px solid var(--line)} table.cmn-rt td{border-top:0;padding:2px 0;overflow-wrap:anywhere} .cst-it thead{display:none} .cst-it tr,.cst-it td{display:block} .cst-iadd label,.cst-iadd input{width:100%} } .cms-webmode{margin:0 0 14px;padding:12px 16px;border:1px solid var(--warn);border-radius:12px;line-height:1.6} /* ===== 2026-10-07 R3 · 수임동의·CMS 3차 손질 ===== */ /* 출금 화면 '그 달 출금 결과' 표가 카드 오른쪽으로 23px 넘치던 것 — 150차의 카드 밖으로 넓히는 규칙(카드 안쪽 여백 sp5 기준)이 안쪽 여백이 16px 인 이 카드에도 걸렸다. 이 카드 안에서는 칸 폭 그대로 */ #view-cmspay .cpy-wm>.tblwrap{margin-left:0;margin-right:0;width:auto;max-width:100%;box-sizing:border-box} #view-cmspay .cpy-wm-h h3 .cpy-wm-sc,#view-cmsreg .cr-cm-h .cr-sc{font-size:13px;font-weight:600;color:var(--mute);margin-left:4px} /* 전에 해지·정지한 거래처 — [등록] 앞 경고 */ .cms-wasstop{font-size:12.5px;white-space:normal;line-height:1.35;text-align:left} #view-cmsnew .cms-wasstop{display:inline-block;margin-top:4px} .cms-wasstop-note{margin:0 0 12px;padding:10px 12px;border:1px solid var(--warn,#C2410C);border-left-width:4px;border-radius:10px;background:var(--panel2);font-size:14px;line-height:1.5} .cms-wasstop-note .sub{color:var(--mute);font-size:13px} /* 신규 등록 4단계 안내 — 접을 수 있게 */ .cms-webmode .cms-stepsd{margin-top:6px} .cms-webmode .cms-stepsd>summary{cursor:pointer;min-height:32px;display:inline-flex;align-items:center;font-weight:600;font-size:14px;color:var(--accent-ink,var(--accent))} .cms-webmode .cms-stepsd>.cms-steps{margin-top:4px} /* 회원 관리 — 그래프 카드가 보이면 같은 숫자를 말하는 칸 3개는 접는다(그래프를 접으면 칸이 다시 보인다) */ #view-cmsmem:has(#cv-mem:not(.cv-off):not([hidden])) #cmm-stats{display:none} #view-cmsmem .cmm-sum #cmm-scope{color:var(--mute);font-weight:600} /* 정산 — 값이 '—' 뿐이면 카드 3장 대신 한 줄 */ #view-cmsset .cst-stats.cst-oneline{display:block} #view-cmsset .cst-one{margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:14px;line-height:1.55;color:var(--ink)} /* 수임 동의 신청 현황 — 옛 오류만 있으면 한 줄 */ .cv-card.cv-oneline .cv-tg{display:none} .cv-card.cv-oneline .cv-one{margin:0;font-size:14px;line-height:1.8} .cv-card.cv-oneline .cv-one small{color:var(--mute)} /* 휴대폰 등록현황 — 등록할 곳 먼저, 나머지는 [더 보기] 뒤 */ .cr-mmore{margin:8px 0 0;width:100%;min-height:44px} @media (max-width:600px){ #view-cmsreg table.card-sm.cr-mfold tbody>tr.cr-r.cr-mrest,#view-cmsreg table.cr-mfold tbody>tr.cr-r.cr-mrest{display:none!important} } /* ── UI-10 CMS 출금 — 대상 0건이면 합계 줄(빈 띠)을 숨기고, 휴대폰 빈 줄은 카드 안 카드가 아니게 ── */ .cmm-lh:has(>.cmm-sum:empty):has(>.cmm-pager:empty){display:none} @media (max-width:767px){ table.cmm-t tbody>tr:has(>td.empty),table.cpy-t tbody>tr:has(>td.empty),table.cst-t tbody>tr:has(>td.empty){border:0;margin:0;padding:0;background:transparent} table.cmm-t td.empty,table.cpy-t td.empty,table.cst-t td.empty{height:auto!important;min-height:0;padding:12px 4px!important} } /* ── UI-11 CMS 정산 — 항목 추가 줄의 '추가' 단추를 입력칸 높이·아래 줄에 맞춘다 · 아래 표 카드 제목 ── */ .cst-iadd{align-items:flex-end} .cst-iadd input{min-height:38px;box-sizing:border-box} /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 72번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 961 */ .wf-ip-help{font-size:13px;color:var(--text-secondary,var(--mute));margin:4px 0 10px;line-height:1.55} .wf-ip-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .wf-ip-bar input{flex:1 1 180px;min-width:0} .wf-ip-msg{min-height:20px;font-size:13px;color:var(--text-secondary,var(--mute));margin:6px 0 4px} .wf-ip-msg.bad{color:var(--bad-ink,var(--bad))} .wf-ips{list-style:none;margin:0;padding:0;display:grid;gap:6px} .wf-ips li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px} .wf-ips li .ip{font-weight:600} .wf-ips li .nt,.wf-ips li .by{color:var(--text-secondary,var(--mute));font-size:13px} .wf-ips li .btn{margin-left:auto} .wf-ips li.none{border-style:dashed;color:var(--text-secondary,var(--mute));font-size:13px} .att-today{padding:16px 20px;margin-top:16px} .att-today .ds-h{display:flex;align-items:center;gap:10px;margin-bottom:10px} .att-today .ds-h h2{margin:0;font-size:17px} .att-t-list{display:flex;flex-wrap:wrap;gap:6px} .att-t-it{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;min-height:32px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;cursor:pointer} .att-t-it:hover{border-color:var(--border-interactive,var(--line))} .att-t-it .w{color:var(--text-secondary,var(--mute));font-size:13px} .att-t-it .at-flag{margin:0} html #view-main:has(>#dash)>#att-today{display:block!important} @media (max-width:1024px){ /* 995 의 4번 줄 감추기 규칙의 예외 */ .att-t-it{min-height:44px} .wf-ip-bar .btn{min-height:44px} } /* 2026-10-08 요청 14: 거래처 360 인건비·원천세 — 비서가 filing.step 으로 바꾼 건 */ .pill.fl-as{margin-left:6px;background:var(--accent-soft);color:var(--accent-ink);font-weight:600;white-space:nowrap} /* 2026-10-08 요청 15: CMS › 정산 머리 — 출금결과 반입 상태 · 올리기 단추 */ .cst-head{flex-wrap:wrap;gap:8px} .cst-res:empty{display:none} #cst-res-up{margin-left:auto} @media (max-width:1024px){ #cst-res-up{min-height:44px} } /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 73번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 960 998 */ /* 2026-09-30 출·퇴근 웹 푸시 — 설정 › 알림 의 한 줄 (js/960_출퇴근_푸시.js) */ /* 955 가 설정의 .set-s 를 숨긴다(브리핑 원칙) — 이 줄의 안내는 막혔을 때의 푸는 법·아이폰 조건이라 따로 보인다 */ #set-push-row .push-s{display:block;font-style:normal;font-weight:400;font-size:13px;line-height:1.45;color:var(--text-secondary,var(--mute));overflow-wrap:break-word} #set-push-row .push-s:empty{display:none} #set-push-row .push-r{display:flex;align-items:center;gap:var(--sp2,8px);flex:none;margin-left:auto} #set-push-row .push-r .pill{white-space:nowrap} #set-push-row .push-r .btn{min-width:64px} #set-push-row .push-r .btn[hidden]{display:none} /* 2026-10-07 비서 ↔ 데스크: 수집 현황 '비서가 한 일' · 출퇴근 '비서에서 온 요청' · 거래처 360 '비서가 한 일' */ .act-card{padding:16px 20px;margin-top:16px} .act-card .ds-h{display:flex;align-items:center;gap:10px;margin-bottom:10px} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 74번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 6개: 955r 970 971 975 975f 990b */ #view-fax tr.ops-bare .ops-pen{color:var(--text-secondary)} #dlg-pv[open]{display:flex} #dlg-pv .dh{gap:10px} #dlg-pv #pv-t{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;flex:1 1 auto} #dlg-pv .pv-acts{display:flex;gap:6px;flex:none;flex-wrap:wrap} #dlg-pv .pv-acts .btn{white-space:nowrap} #dlg-pv .pv-meta{padding:10px 18px 0;font-size:13px;color:var(--mute);overflow-wrap:anywhere} #dlg-pv .pv-body{padding:12px 18px 18px;min-height:220px;overflow:auto;flex:1 1 auto} #dlg-pv .pv-pdf{display:block;width:100%;height:min(74vh,900px);border:1px solid var(--line);border-radius:10px;background:#fff} #dlg-pv .pv-img{text-align:center;background:var(--bg);border-radius:10px;padding:8px} #dlg-pv .pv-img img{max-width:100%;max-height:72vh;object-fit:contain} #dlg-pv .pv-txt{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,"IBM Plex Mono",monospace;max-height:70vh;overflow:auto;margin:0;padding:12px;background:var(--bg);border-radius:10px;color:var(--ink)} #dlg-pv .pv-note{padding:28px 12px;text-align:center;color:var(--mute);font-size:14px;line-height:1.6} #dlg-pv .pv-note b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px} #dlg-pv .pv-load{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:var(--mute);font-size:14px} #dlg-pv .pv-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:pvspin .8s linear infinite} @keyframes pvspin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ #dlg-pv .pv-spin{animation:none} } /* 출처 배지 · 원래 경로 (거래처 정보 표 · 거래처 360 자료 탭 · 미리보기) */ .pv-flow{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;font-size:12px;line-height:20px;font-weight:600;white-space:nowrap;vertical-align:1px; background:#EEF2FF;color:#3730A3;border:1px solid #C7D2FE} .pv-path{display:block;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:520px;margin-top:2px} #dlg-pv .pv-path{white-space:normal;max-width:none;overflow-wrap:anywhere} #dlg-pv .pv-flow{margin:0 6px 0 0} #c3-body .c3-ff{margin:0 0 8px} :root[data-theme="dark"] .pv-flow{background:#26284A;color:#C7D2FE;border-color:#3F4480} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pv-flow{background:#26284A;color:#C7D2FE;border-color:#3F4480} } @media (max-width:900px){ #dlg-pv .pv-pdf{height:66vh} #dlg-pv .dh{flex-wrap:wrap} #dlg-pv #pv-t{flex-basis:100%} } /* 2026-10-07 · 자료함 사진 바로 보기 (js/971) — 사진 칸 .th 는 배경 그림으로 채운다 */ .th{display:inline-block;flex:none;vertical-align:middle;background:var(--surface-3) center/cover no-repeat;border-radius:var(--r-ctl); box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden} .th.ld::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgb(255 255 255/.45),transparent); transform:translateX(-100%);animation:th-sh 1.1s infinite} :root[data-theme="dark"] .th.ld::after{background:linear-gradient(90deg,transparent,rgb(255 255 255/.08),transparent)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .th.ld::after{background:linear-gradient(90deg,transparent,rgb(255 255 255/.08),transparent)} } @keyframes th-sh{to{transform:translateX(100%)}} @media (prefers-reduced-motion:reduce){ .th.ld::after{animation:none} } .th.no::before{content:"🖼️";position:absolute;inset:0;display:grid;place-items:center;font-size:16px;opacity:.7} /* 거래처 정보 목록 줄의 작은 사진 */ #view-files .fi-th{width:40px;height:40px;margin-right:8px;border-radius:var(--r-ctl)} #view-files td.fi-f a{display:inline-flex;align-items:center;gap:0;max-width:100%} /* 거래처 정보 — '사진' 을 고르면 모아 보기 */ #view-files tr.fi-galrow>td{padding:12px 0!important;white-space:normal!important} .fi-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .fi-gc{display:flex;flex-direction:column;gap:4px;min-width:0;text-decoration:none;color:var(--ink);border-radius:12px;padding:6px; border:1px solid var(--line);background:var(--panel);transition:border-color .15s,box-shadow .15s} .fi-gc:hover,.fi-gc:focus-visible{border-color:var(--accent);box-shadow:0 4px 14px rgb(30 34 60/.10)} .fi-gc .th.big{width:100%;aspect-ratio:1/1;height:auto;border-radius:var(--r-ctl)} .fi-gc .nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fi-gc .dt{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 거래처 360 자료함 탭 — 위에 사진 띠, 목록 줄에 작은 사진 */ #view-c360 .c3-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:10px 0 14px;align-items:stretch} #view-c360 .c3-gal>a{display:block;border-radius:10px;outline-offset:2px} #view-c360 .c3-gal .th.big{width:100%;aspect-ratio:1/1;height:auto;border-radius:10px} #view-c360 .c3-gal>a:hover .th{box-shadow:inset 0 0 0 2px var(--accent)} #view-c360 .c3-galmore{align-self:center;justify-self:start;min-height:36px} #view-c360 .c3-list a{display:inline-flex;align-items:center;gap:8px} #view-c360 .c3-list .th.sm{width:28px;height:28px;border-radius:6px} @media (max-width:600px){ .fi-gal{grid-template-columns:repeat(2,minmax(0,1fr))} #view-c360 .c3-gal{grid-template-columns:repeat(4,minmax(0,1fr))} } #view-files table:has(tr.fi-galrow) thead{display:none} /* 2026-10-07 평가: 신분증·통장 같은 사진은 처음엔 흐리게(누르면 보임) — 칸 위에 흐림 막(backdrop-filter)을 얹는다 */ .th.sv.on:not(.rv)::before{content:"가림";position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:center; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgb(15 23 42/.18); font-size:12px;line-height:18px;color:#fff;font-weight:700;text-shadow:0 1px 2px rgb(0 0 0/.6);opacity:1} .th.sm.sv.on:not(.rv)::before,.fi-th.sv.on:not(.rv)::before{content:"";} .th.sv.on:not(.rv){cursor:pointer} /* ── 975 · 거래처 정보 = 거래처별 모든 파일 (2026-09-30) — 왼쪽 거래처 · 오른쪽 파일 ── */ #view-files .fi-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px} #view-files .fi-head h2{margin:0} #view-files .fi-tot{font-size:14px;font-weight:700;color:var(--ink2)} #view-files .fi-at{font-size:13px;color:var(--mute)} #view-files .fi-head #fi-reload{margin-left:auto} #view-files .fi-split{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:16px;align-items:start} #view-files .fi-split>*{min-width:0;margin:0} #view-files .fi-side{padding:12px;display:flex;flex-direction:column;gap:8px;position:sticky;top:12px;max-height:calc(100vh - 150px)} #view-files .fi-sq input,#view-files #fi-q{width:100%;border:1px solid var(--border-interactive,var(--line2));background:var(--panel);color:var(--ink);padding:8px 10px;border-radius:var(--r-ctl);font-size:14px;min-height:36px} #view-files .fi-clist{overflow:auto;min-height:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px} #view-files .fi-gh{font-size:12px;font-weight:700;color:var(--mute);padding:10px 8px 4px;letter-spacing:.02em} #view-files .fi-ci{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:8px;align-items:center;width:100%;text-align:left; border:0;background:transparent;color:var(--ink);padding:7px 8px;border-radius:var(--r-ctl);font-size:14px;cursor:pointer;min-height:34px} #view-files .fi-ci:hover{background:var(--panel2,var(--bg))} #view-files .fi-ci.on{background:var(--accent-soft);color:var(--accent-ink,var(--ink));font-weight:700;box-shadow:inset 3px 0 0 var(--accent)} #view-files .fi-ci .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-files .fi-ci .n{font-size:13px;font-weight:700;color:var(--ink2);text-align:right} #view-files .fi-ci .d{font-size:12px;color:var(--mute);text-align:right;font-weight:400} #view-files .fi-ci.fi-all{border-bottom:1px solid var(--line);border-radius:var(--r-ctl) var(--r-ctl) 0 0;margin-bottom:2px} #view-files .fi-more{margin:6px 8px} #view-files .fi-none{padding:16px 8px;color:var(--mute);font-size:14px} #view-files .fi-main{padding:14px 16px;display:flex;flex-direction:column;gap:10px} #view-files .fi-mh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:32px} #view-files .fi-mh h3{margin:0;font-size:17px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} #view-files .fi-last{font-size:13px;color:var(--mute)} #view-files .fi-ma{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap} #view-files .fi-ma .btn{white-space:nowrap;text-decoration:none} #view-files .fi-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center} #view-files .fi-bar #fi-q{flex:1 1 180px;width:auto;min-width:140px} #view-files .fi-seg{margin:0;flex-wrap:wrap} #view-files .fi-seg button{white-space:nowrap} #view-files .fi-seg button small{font-size:12px;color:inherit;opacity:1;font-weight:600} #view-files .fi-seg button:disabled{display:none} #view-files .fi-tw{max-height:none!important;overflow-x:auto} #view-files table.fi-t{width:100%;table-layout:fixed;border-collapse:collapse} #view-files .fi-t th{font-size:13px;text-align:left} #view-files .fi-t th.fi-s,#view-files .fi-t td.fi-s{width:78px} #view-files .fi-t th.fi-z,#view-files .fi-t td.fi-z{width:78px;text-align:right} #view-files .fi-t td{font-size:14px;vertical-align:top;white-space:nowrap} #view-files .fi-t td.fi-d,#view-files .fi-t td.fi-z{font-size:13px;color:var(--ink2)} #view-files .fi-t td.fi-f{min-width:0;white-space:normal} #view-files .fi-t td.fi-f a{display:block;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-files .fi-t td.fi-f a:hover{text-decoration:underline} #view-files .fi-p{display:block;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px} #view-files .fi-b{display:inline-block;padding:0 8px;border-radius:999px;font-size:12px;line-height:20px;font-weight:600;white-space:nowrap; background:var(--panel2,var(--bg));color:var(--ink2);border:1px solid var(--line)} #view-files .fi-b.s-flow{background:#EEF2FF;color:#3730A3;border-color:#C7D2FE} #view-files .fi-b.s-fax,#view-files .fi-b.s-mail{background:var(--warn-soft);color:var(--ink);border-color:var(--line)} :root[data-theme="dark"] #view-files .fi-b.s-flow{background:#26284A;color:#C7D2FE;border-color:#3F4480} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #view-files .fi-b.s-flow{background:#26284A;color:#C7D2FE;border-color:#3F4480} } #view-files .fi-pg{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:13px;color:var(--ink2);flex-wrap:wrap} #view-files .fi-pg:empty{display:none} #view-files td.empty{padding:28px 12px!important;text-align:center} #view-files td.empty b{display:inline;margin-right:10px} #view-files td.empty .e-act{display:inline-flex;margin:0} #view-files .fi-sk{height:18px;margin:6px 4px;border-radius:6px;background:var(--line);opacity:.6} @media (prefers-reduced-motion:no-preference){ #view-files .fi-sk{animation:fisk 1.2s ease-in-out infinite alternate} } @keyframes fisk{to{opacity:.25}} @media (max-width:900px){ #view-files .fi-split{grid-template-columns:minmax(0,1fr)} #view-files .fi-side{position:static;} #view-files .fi-t th.fi-s,#view-files .fi-t td.fi-s{display:none} #view-files .fi-t th.fi-z,#view-files .fi-t td.fi-z{width:64px} #view-files .fi-ci,#view-files .fi-seg button,#view-files .fi-pg .btn,#view-files .fi-head .btn,#view-files .fi-ma .btn{min-height:44px} #view-files .fi-sq input,#view-files #fi-q{min-height:44px;font-size:16px} #view-files .fi-bar #fi-q{flex-basis:100%} } #view-files .fi-t td,#view-files .fi-t th{padding:8px 10px!important;height:auto!important} #view-files .fi-t tbody tr{height:auto!important} /* ── 2026-09-30 최종 심사 반영: 날짜 한 형식 · '최근' 라벨 · 결과 n건 · 출처 한 종류면 열 숨김 · 휴대폰 접힘 ── */ #view-files .fi-last i{font-style:normal;font-weight:600;margin-right:2px} #view-files .fi-hit{font-weight:700} #view-files .fi-tot .rp-i{vertical-align:1px;margin-left:2px} #view-files table.fi-t.fi-one th.fi-s,#view-files table.fi-t.fi-one td.fi-s{display:none} #view-files .fi-t th.fi-d,#view-files .fi-t td.fi-d{width:84px} #view-files .fi-main{overflow:hidden} #view-files .fi-tw{margin:0;width:100%;max-width:100%} #view-files .fi-ctog{display:none} @media (max-width:900px){ #view-files .fi-head{gap:8px} #view-files .fi-head h2{order:0} #view-files .fi-head #fi-reload{order:1;margin-left:auto} #view-files .fi-head #fi-root{order:2;min-width:44px;justify-content:center} #view-files .fi-head .fi-rt{display:none} #view-files .fi-head .fi-tot{order:3;flex:1 1 auto} #view-files .fi-head .fi-at{order:4} #view-files .fi-side{max-height:none;padding:8px} #view-files .fi-ctog{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;min-height:44px;font-size:15px;font-weight:700} #view-files .fi-ctog .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left} #view-files .fi-ctog .num{font-weight:600;color:var(--ink2)} #view-files .fi-side:not(.open) .fi-clist{display:none} #view-files .fi-side:not(.open) .fi-sq{display:none} #view-files .fi-side:not(.open) .fi-cmore-w{display:none} #view-files .fi-side.open .fi-clist{max-height:50vh} #view-files .fi-seg{overflow-x:auto;max-width:100%;flex:1 1 100%;scrollbar-width:none} #view-files .fi-seg::-webkit-scrollbar{display:none} #view-files .fi-seg button{flex:none} } /* 2026-10-08 평가 3차: 휴대폰에서 파일 이름이 8글자쯤에서 잘렸다 — 두 줄까지 */ #view-files .fi-lag{font-size:12px;color:var(--mute);font-weight:400} @media (max-width:900px){ #view-files .fi-t td.fi-f a{display:flex;align-items:center;gap:6px;white-space:normal;overflow:visible} #view-files .fi-t td.fi-f a .fi-nm{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-break:break-all;line-height:19px} } /* 2026-10-08: 파일 링크·i 단추 누르는 높이 24px 이상(WCAG 2.5.8) */ #view-files .fi-t td.fi-f a{min-height:24px;line-height:24px} #view-files .fi-tot .rp-i{min-width:24px;min-height:24px} /* 2026-10-08 4차 평가 10(axe): '더 보기' 는 listbox 밖 형제(#fi-cmore-w) */ #view-files .fi-cmore-w{flex:none} #view-files .fi-cmore-w[hidden]{display:none} /* 2026-10-12 업체별 보기(js/975 drawCompanies) — 업체 줄은 누르면 그 업체 파일 */ #view-files .fi-cr{cursor:pointer} #view-files .fi-cr:hover td{background:var(--hover,rgba(0,0,0,.03))} #view-files .fi-cb{background:none;border:0;padding:0;font:inherit;color:var(--ink);font-weight:600;cursor:pointer;text-align:left} #view-files .fi-cb:hover .fi-nm,#view-files .fi-cb:focus-visible .fi-nm{text-decoration:underline} /* ── 975f · 자료함 › 서식함 (2026-10-12) — 색 없이(회색 테두리 글자) · 분류별 목록 ── */ #view-files .fi-tabs{margin:0} #view-files .fi-tabs small{font-size:12px;font-weight:600;color:var(--mute)} #view-files.fm-on .fi-split,#view-files.fm-on .fi-tot,#view-files.fm-on .fi-at,#view-files.fm-on #fi-reload,#view-files.fm-on #fi-root{display:none} #view-files .fm-box{padding:14px 16px;display:flex;flex-direction:column;gap:10px} #view-files .fm-box[hidden]{display:none} #view-files .fm-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center} #view-files .fm-top #fm-q{flex:1 1 260px;min-width:0} #view-files .fm-top input{border:1px solid var(--border-interactive,var(--line2));background:var(--panel);color:var(--ink);padding:8px 10px;border-radius:var(--r-ctl);font-size:14px;min-height:36px} #view-files .fm-cl{display:flex;align-items:center;gap:6px;flex:1 1 260px;min-width:0;font-size:13px;color:var(--ink2);font-weight:600} #view-files .fm-cl span{white-space:nowrap} #view-files .fm-cl input{flex:1 1 auto;min-width:0} #view-files .fm-cats{margin:0} #view-files .fm-help{margin:0;font-size:13px;color:var(--mute);line-height:1.5} #view-files .fm-gh{margin:10px 0 2px;font-size:15px;display:flex;align-items:center;gap:6px} #view-files .fm-gh small{font-size:12px;color:var(--mute);font-weight:600} #view-files .fm-ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} #view-files .fm-r{padding:10px 4px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;min-width:0} #view-files .fm-main{min-width:0;display:flex;flex-direction:column;gap:2px} #view-files .fm-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0} #view-files .fm-nm{font-size:15px;min-width:0;overflow-wrap:anywhere} #view-files .fm-k{font-size:12px;font-weight:600;color:var(--mute);border:1px solid var(--line2);border-radius:999px;padding:0 8px;white-space:nowrap;line-height:20px} #view-files .fm-k.k-공식{color:var(--ink2)} #view-files .fm-m,#view-files .fm-n{font-size:13px;color:var(--mute);line-height:1.45;overflow-wrap:anywhere} #view-files .fm-m a{color:inherit;text-decoration:underline;text-underline-offset:2px} #view-files .fm-n{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} #view-files .fm-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} #view-files .fm-a .btn{white-space:nowrap;text-decoration:none} #view-files .fm-help b{color:var(--ink2)} #view-files .fm-files{display:flex;flex-direction:column;gap:4px;padding:4px 0 0 10px;grid-column:1/-1} #view-files .fm-files[hidden]{display:none} #view-files .fm-fl{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;min-width:0} #view-files .fm-fl span{min-width:0;overflow-wrap:anywhere} #view-files .fm-none,#view-files .fm-load{padding:24px 8px;color:var(--mute);font-size:14px} #view-files .fm-foot{font-size:12px;color:var(--mute);padding-top:6px;overflow-wrap:anywhere} #view-files .fm-foot code{font-size:12px} /* 미리보기 창 — 종이처럼 흰 바탕·검은 글자(인쇄물 모양) */ #fm-dlg{max-width:min(96vw,900px);width:calc(100% - 24px);max-height:94vh;display:none;flex-direction:column} #fm-dlg[open]{display:flex} #fm-dlg .dh{gap:10px} #fm-dlg #fm-pt{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;flex:1 1 auto} #fm-dlg .pv-meta{padding:10px 18px 0;font-size:13px;color:var(--mute);overflow-wrap:anywhere} #fm-dlg .fm-pbody{padding:12px 18px 18px;overflow:auto;flex:1 1 auto;min-height:220px} #fm-dlg .pv-load,#fm-dlg .pv-note{padding:28px 12px;text-align:center;color:var(--mute);font-size:14px} /* 종이 미리보기(2026-10-13) — 종이 모양 규칙은 js 975f DXCSS(Shadow DOM 안 · 데스크 CSS 와 섞이지 않게) */ .fm-dlg .fm-paper{display:block} @media (max-width:900px){ #view-files .fm-r{grid-template-columns:minmax(0,1fr)} #view-files .fm-a{justify-content:flex-start} } @media (max-width:640px){ #view-files .fm-box{padding:12px} #view-files .fm-cl{flex-wrap:wrap} #view-files .fm-cl span{width:100%} } @media (max-width:900px){ /* 2026-10-07 휴대폰(≤900px) 거래처 360 머리: '홈택스 수임' 알약 글자('이전 오류(수정됨) · 다시 신청')가 한 줄 고정(nowrap)이라 옆의 '거래 중'·'기장' 꼬리표 위로 넘쳐 겹쳤다(조정자 사진 oneui/z_b360.png). → 그 알약만 머리 오른쪽 줄의 맨 위 한 줄을 통째로 쓰고, 안의 글자는 줄바꿈을 허용한다(꼬리표·★·⋯ 는 다음 줄 그대로). */ #view-c360 .c3-h-r{flex-wrap:wrap!important;row-gap:6px} #view-c360 .c3-h-r>.c3-htst{flex:1 1 100%!important;order:-1;min-width:0;max-width:100%;justify-content:flex-start;text-align:left} #view-c360 .c3-htst small{flex:none;white-space:nowrap} #view-c360 .c3-htst .ht-chip{white-space:normal;min-width:0;max-width:100%;overflow-wrap:break-word;line-height:1.35;padding:2px 9px} } /* 재건축 4단계(C) 합친 시트 · 수임동의 · 전체 111장 중 75번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 990a 990c */ #ht-card .ht-f .ht-n{flex:1 1 200px} .ht-ck{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-size:13px;font-weight:700} .ht-ck.on{background:var(--ok);color:#fff} .ht-ck.off{background:transparent;color:var(--text-secondary,var(--mute));border:1.5px solid var(--border-interactive,var(--line2))} .ht-cands{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--panel)} .ht-cands-h{font-size:14px;font-weight:600;margin:0 0 6px} .ht-cands-h small{font-weight:400;color:var(--text-secondary,var(--mute));margin-left:6px} .ht-cand{display:flex;align-items:center;gap:8px;padding:6px 4px;border-top:1px solid var(--line);flex-wrap:wrap} .ht-cand:first-of-type{border-top:0} .ht-cand.on{background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:var(--r-inner)} .ht-cand .ht-cn{flex:1 1 180px;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ht-cand .ht-cm{flex:2 1 220px;min-width:0;font-size:13px;color:var(--text-secondary,var(--mute));overflow-wrap:anywhere} .ht-tag{font-style:normal;font-size:12.5px;border:1px solid var(--border-interactive,var(--line2));border-radius:6px;padding:0 5px;margin-right:6px;color:var(--ink)} .ht-tag.ok{border-color:var(--ok);color:var(--ok-ink,var(--ok))} .ht-bad{color:var(--bad-ink,var(--bad));font-weight:600} .ht-go{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px} .ht-why{font-size:13px;color:var(--text-secondary,var(--mute))} .ht-chip{display:inline-flex;align-items:center;font-size:13px;font-weight:600;border-radius:999px;padding:1px 9px;white-space:nowrap;border:1px solid transparent} .ht-chip.acc{background:#E8F0FE;color:#1B4FB8} .ht-chip.warn{background:#FAF0E7;color:#8A4A0C} .ht-chip.ok{background:#E6F4EC;color:#0B6B3F} .ht-chip.bad{background:#FBEAED;color:#A3182E} .ht-chip.mute{background:transparent;color:var(--text-secondary,var(--mute));border-color:var(--border-interactive,var(--line2))} :root[data-theme="dark"] .ht-chip.acc{background:#1E2E4A;color:#AFC9FF} :root[data-theme="dark"] .ht-chip.warn{background:#3A2A18;color:#F5C891} :root[data-theme="dark"] .ht-chip.ok{background:#16332A;color:#8FE0B5} :root[data-theme="dark"] .ht-chip.bad{background:#3D1B22;color:#FFB3BF} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ht-chip.acc{background:#1E2E4A;color:#AFC9FF} :root:not([data-theme="light"]) .ht-chip.warn{background:#3A2A18;color:#F5C891} :root:not([data-theme="light"]) .ht-chip.ok{background:#16332A;color:#8FE0B5} :root:not([data-theme="light"]) .ht-chip.bad{background:#3D1B22;color:#FFB3BF} } .ht-at{font-size:13px;color:var(--text-secondary,var(--mute))} .ht-hist{margin-top:8px} .ht-hist-h{font-size:13px;font-weight:600;color:var(--text-secondary,var(--mute));margin:4px 0} .ht-hrow{display:flex;gap:8px;align-items:center;font-size:13px;padding:3px 0;flex-wrap:wrap} .ht-hrow .ht-hd{color:var(--text-secondary,var(--mute))} .ht-hrow .ht-ht{flex:1 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .c3-htst{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;padding:0;cursor:pointer;min-height:28px} .c3-htst small{font-size:12.5px;color:var(--text-secondary,var(--mute))} @media (max-width:1024px){ #ht-card .btn,#ht-apply,.c3-htst{min-height:44px} } /* ===== 신규 수임 한 번에 진행 (2026-10-08) — js/990 끝 · views/100 #ns-card ===== */ #ns-card .ns-body{display:flex;flex-direction:column;gap:12px;padding:4px 0 2px} #ns-card.ns-off .ns-body{opacity:.62;pointer-events:none} #ns-card .ns-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} #ns-card .ns-step{border:1px solid var(--border-interactive,var(--line2));border-radius:12px;padding:10px 12px;background:var(--panel);align-items:flex-start;min-width:0} #ns-card .ns-step span{display:flex;flex-direction:column;gap:3px;min-width:0} #ns-card .ns-step b{font-size:14px;color:var(--ink)} #ns-card .ns-step small{font-size:13px;color:var(--warn-ink,#9A4F0A);overflow-wrap:break-word} #ns-card .ns-step small:empty{display:none} #ns-card .ns-step em{font-style:normal;font-size:13px;color:var(--text-secondary,var(--mute))} #ns-card .ns-cms{border:1px dashed var(--line2);border-radius:12px;padding:10px 12px} #ns-card .ns-cms[hidden]{display:none} #ns-card .ns-cms-h{font-weight:600;font-size:14px;margin-bottom:8px} #ns-card .ns-cms-h small{font-weight:400;color:var(--text-secondary,var(--mute));margin-left:6px;font-size:13px} #ns-card .ns-cms-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} #ns-card .ns-cms-g input,#ns-card .ns-cms-g select{min-width:0;width:100%;border:1px solid var(--border-interactive,var(--line2));border-radius:var(--r-ctl);padding:7px 9px;font-size:14px;background:var(--panel);color:var(--ink)} #ns-card .ns-agree{margin-top:8px;font-size:13px} #ns-card .ns-go{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #ns-card .ns-why{font-size:13px;color:var(--text-secondary,var(--mute));overflow-wrap:break-word;min-width:0} #ns-card .ns-b{border-top:1px solid var(--line);padding-top:10px} #ns-card .ns-bh{font-weight:600;font-size:14px;margin-bottom:6px} #ns-card .ns-bh small{font-weight:400;color:var(--text-secondary,var(--mute))} #ns-card .ns-bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} #ns-card .ns-s{display:flex;gap:8px;align-items:flex-start;border-radius:10px;padding:8px 10px;background:var(--bg);border:1px solid var(--line);min-width:0} #ns-card .ns-s>i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;background:var(--line);color:var(--ink)} #ns-card .ns-s>div{display:flex;flex-direction:column;gap:2px;min-width:0} #ns-card .ns-s b{font-size:13px} #ns-card .ns-st{font-size:13px;font-weight:600} #ns-card .ns-s small{font-size:12.5px;color:var(--text-secondary,var(--mute));overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere} #ns-card .ns-s.ok>i{background:var(--ok-fill,#0E7A55);color:#fff} #ns-card .ns-s.ok .ns-st{color:var(--ok-ink,#0B6B4A)} #ns-card .ns-s.bad{border-color:var(--bad,#D92D4A)} #ns-card .ns-s.bad>i{background:var(--bad,#D92D4A);color:#fff} #ns-card .ns-s.bad .ns-st{color:var(--bad-ink,#B4233B)} #ns-card .ns-s.human{border:2px solid var(--accent,#2563EB);background:var(--panel)} #ns-card .ns-s.human>i{background:var(--accent-fill,#2170EB);color:#fff} #ns-card .ns-s.human .ns-st{color:var(--accent-ink,#1B64DA)} #ns-card .ns-s.run .ns-st{color:var(--accent-ink,#1B64DA)} #ns-card .ns-s.skip{opacity:.7} @media (max-width:900px){ #ns-card .ns-steps,#ns-card .ns-bar{grid-template-columns:1fr} #ns-card .ns-cms-g{grid-template-columns:repeat(2,minmax(0,1fr))} #ns-card .ns-cms-g input,#ns-card .ns-cms-g select{font-size:16px;min-height:44px} #ns-card .ns-step{min-height:44px} } /* ===== 데스크에서 최종 단추 누르기 (2026-10-08) ===== */ #ns-card .nsc-btn{margin-top:6px;min-height:36px;font-size:14px;align-self:flex-start} #ht-msg .nsc-btn{margin-left:8px} .nsc-dlg{width:min(600px,94vw);border:1px solid var(--line2);border-radius:14px;padding:0;background:var(--panel);color:var(--ink)} .nsc-dlg::backdrop{background:rgba(15,23,42,.45)} .nsc{padding:18px 20px;display:flex;flex-direction:column;gap:10px} .nsc h3{margin:0;font-size:17px} .nsc .sub{margin:0;font-size:13px;color:var(--text-secondary,var(--mute))} .nsc-t{width:100%;border-collapse:collapse;font-size:14px} .nsc-t th{text-align:left;font-weight:600;color:var(--text-secondary,var(--mute));padding:6px 8px;width:36%;border-bottom:1px solid var(--line);white-space:nowrap} .nsc-t td{padding:6px 8px;border-bottom:1px solid var(--line);overflow-wrap:anywhere} .nsc-t small{color:var(--text-secondary,var(--mute))} .nsc-w{margin:0;font-size:13px;color:var(--bad-ink,#B4233B);background:var(--bg);border-radius:var(--r-inner);padding:8px 10px} .nsc-go{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px} .nsc-go .btn{min-height:40px} @media (max-width:900px){ .nsc-go .btn{min-height:44px;flex:1 1 100%} } /* ===== 2026-10-08 '서식 인쇄' 화면 — 홈택스 신청·한 번에 진행은 '신규 수임' 카드로 옮겼다(대표님: 중복) ===== 카드는 지우지 않고 숨긴다 — 신규 수임 카드가 이 화면의 기계(nsRunFor · ht*)를 그대로 쓴다. */ #view-intake #ns-card,#view-intake #ht-card,#view-intake #cv-intake{display:none!important} #view-intake .ik-gohint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:14px;color:var(--ink)} #view-intake .ik-gohint span{flex:1 1 240px;min-width:0} @media (max-width:1024px){ #view-intake .ik-gohint .btn{min-height:44px} } /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 76번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 7개: 990am 990b 990d 990hm 995 */ /* 990_ui_새벽_보정 — 2026-10-01 새벽 화면 검수(UI-01~15) 반영 층. 되돌리려면 이 파일과 order.txt 한 줄을 지운다. */ /* ── UI-01 설명 단추 ⓘ(.rp-i) — 규칙이 신고·원천 화면(953) 안에만 있어 거래처 정보·거래처 현황·360·자료 미수신·메일 창에서는 브라우저 기본 회색 단추(다크 명암비 2.12:1)로 그려지고 말풍선도 안 떴다. 화면 한정 없는 공용 규칙(953 보다 특정도가 낮아 그쪽은 그대로). ── */ .rp-i.rp-i{ -webkit-appearance:none;appearance:none; position:relative;display:inline-grid;place-items:center;flex:none; width:22px;height:22px;min-width:22px;min-height:22px;padding:0;margin:0 2px; border:0;background:transparent;box-shadow:none;cursor:help;color:var(--text-secondary,var(--mute)); font-family:inherit;font-size:13px;font-weight:700;line-height:1;font-style:normal;vertical-align:middle} .rp-i.rp-i::before{ content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%); border:1.5px solid var(--border-interactive);border-radius:50%;box-sizing:border-box} .rp-i.rp-i::after{ content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:-6px;z-index:70; width:max-content;max-width:min(340px,calc(100vw - 40px));padding:10px 12px;border-radius:10px; background:var(--toast-bg);color:var(--toast-ink);box-shadow:var(--e1); font-family:inherit;font-size:13px;font-weight:400;line-height:1.55;font-style:normal;letter-spacing:0;text-align:left;white-space:normal; word-break:keep-all;overflow-wrap:break-word; opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s} .rp-i.rp-i[data-side="r"]::after{right:auto;left:-6px} @media (max-width:1024px){ .rp-i.rp-i{min-width:44px;min-height:44px;width:44px;height:44px;margin:0 -8px} } @media (max-width:767px){ .rp-i.rp-i::after,.rp-i.rp-i[data-side="r"]::after{position:fixed;left:14px;right:14px;top:auto;bottom:84px;width:auto;max-width:none;z-index:120} } @media (max-width:900px){ /* ── UI-02 거래처 360 머리 — 연락처·담당이 잘린 채 보이던 것(스크롤바를 숨긴 가로 스크롤). 값이 잘리면 안 되므로 줄바꿈 ── */ #view-c360 .c3-meta{flex-wrap:wrap!important;overflow:visible!important;row-gap:2px} #view-c360 .c3-meta>span{white-space:nowrap} #view-c360 #c3-kpi{flex-wrap:wrap;overflow:visible;row-gap:4px} #view-c360 #c3-kpi .c3-f{max-width:none!important} } @media (max-width:1024px){ #view-c360 .c3-h-acts .btn{justify-content:center} } @media (max-width:1024px) and (min-width:901px){ #view-c360 .c3-h-r{column-gap:8px} #view-c360 .c3-h-r>.c3-st{margin-left:0!important} #view-c360 .c3-h-r>.c3-st:first-child{margin-left:auto!important} /* '거래 중'·'기장' 알약이 margin-left:auto 를 하나씩 받아 서로 멀리 떨어지던 것 — 첫 알약만 오른쪽으로 민다 */ } @media (max-width:900px){ /* ── UI-12 (4-111 에서 걷음) 휴대폰 상태 칩 줄 줄바꿈 → 954c 의 한 줄 가로 칩(넘치면 오른쪽 흐림 · js/290h crOvf)으로 되돌림 — 목록을 첫 화면 안에 ── */ /* ── UI-13 거래처 정보 종류 칩 줄 — 휴대폰에서도 줄바꿈 ── */ #view-files .fi-seg{flex-wrap:wrap;overflow:visible;row-gap:6px} } /* ═══ 수집 현황 (2026-10-01 데이터 현황판 → 2026-10-07 그래프로) — js/995_데이터_현황판.js 와 1:1 (접두 ds-) ═══ 홈(#view-main)에 #dash 가 있으면 그것만 보인다. 옛 홈(#home3 · 브리핑 카드)은 지우지 않고 감춘다 — 그 배열을 다른 화면이 쓴다. 되돌리려면 이 파일의 첫 규칙 한 줄만 지우면 예전 홈이 다시 보인다(#dash 는 그 위에 같이 서게 된다). */ #view-main:has(>#dash)>:not(#dash){display:none!important} /* ── 2026-10-07 색 정돈 — 수집 현황의 색은 이 토큰만 쓴다(--dv-*) ── 중립 회색 단계 + 강조색 하나(--accent, 로고 주황 계열 · 선택 표시에만) + 상태색 3개(정상·주의·위험, 채도를 낮춘 차분한 톤). '모름'·'해당 없음' 은 색이 아니라 옅은 중립 회색. 무늬는 색만으로 가르지 않기 위한 최소 — 가늘고 옅게. 대비(실측): 글자 4.5:1 이상 · 그래프 조각·점 3:1 이상(모름 조각은 바로 옆 숫자·범례 글자가 같은 뜻을 전한다). */ #dash{margin:0 auto;color:var(--ink);font-size:14px;line-height:1.5} #dash *{box-sizing:border-box} #dash button{font:inherit;color:inherit} #dash :focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 77번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 990e 990h 997 */ /* ── UI-06 로그인 사진이 로고를 덮던 것 — 화면 높이로 위치를 역산하지 않고 사진과 카드를 세로로 쌓는다 ── */ #login:not(.hidden):has(#login-hero){display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:18px;overflow-y:auto;padding:12px 0} #login:not(.hidden):has(#login-hero) #login-hero{position:static;transform:none;flex:none;--hero:min(22vh,200px);width:var(--hero);height:var(--hero)} #login:not(.hidden):has(#login-hero) .login-box{flex:none} .cst-iadd>.btn{min-height:38px;height:38px} /* ═══ 2026-10-07 메뉴 5묶음 — 구분선 아래 '관리'(대표실·설정)는 작게 ═══ 흐린 글자·작은 아이콘·좁은 줄. 글자 크기 바닥(14px)과 손가락 폭(≤1024px 44px)은 그대로 지킨다. */ @media (min-width:1025px){ } /* ═══ 2026-10-07 색 정돈 — 선택 표시는 강조색(주황) 한 곳에만 ═══ 예전엔 묶음 머리(옅은 주황 바탕+막대)와 그 안의 화면(회색 바탕+주황 글자)이 두 줄 겹쳐 칠해져 무거웠다. 펼친 사이드바에서는 묶음 머리는 진한 글자만, 지금 보는 화면 한 줄에만 옅은 주황 바탕과 막대. 접힌(mini) 사이드바는 예전 그대로. */ /* 재건축 4단계(C) 합친 시트 · 수임동의 · 전체 111장 중 78번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 993a 993c */ /* ===== 993 · 수임동의 자동화 › 신규 수임 (js/993 · views/340) ===== 2026-10-09 정리(대표님 "지저분 · 자료 올리기로 시작"): 목록 위 [자료 올리기] → 카드. 2026-10-11 카드 = 3단계 탭(① 자료 확인 ② 사업자 정보 ③ 수임 진행 표·진행률) — 아래 '카드 3단계' 묶음. 색은 토큰만(라이트·다크 둘 다 core 에 정의). 색만으로 뜻을 전하지 않는다 — 배지에 기호(✓ ! × ⋯ –)·숫자를 같이. 단계 상태: done 끝 · run 진행 · need 사람 · fail 실패 · block 막힘 · wait/skip 대기·건너뜀. */ .stc-root .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .stc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .stc-head h2{margin:0} .stc-head .pill[hidden]{display:none} .stc-sp{flex:1 1 auto} .stc-req{color:var(--bad-ink,var(--bad));font-weight:700} .stc-msg{font-size:13px;color:var(--text-secondary,var(--mute))} .stc-msg:empty{display:none} .stc-msg.ok{color:var(--ok-ink,var(--ok))} .stc-msg.warn{color:var(--warn-ink,var(--warn))} .stc-msg.bad{color:var(--bad-ink,var(--bad));font-weight:600} .stc-root .btn.ghost{background:transparent;border:1px solid var(--border-interactive,var(--line2));color:var(--ink)} .stc-root .btn.ghost:hover{background:var(--panel2)} .stc-lab{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)} .stc-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* ── 시작: 자료 올리기 ── */ .stc-start{padding:14px 16px;margin-bottom:12px} .stc-drop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1.5px dashed var(--border-interactive,var(--line2));border-radius:12px;padding:10px 14px;background:var(--panel2);min-height:52px} .stc-drop.over{border-color:var(--accent);background:var(--accent-soft)} .stc-drop label.btn{cursor:pointer} .stc-drop label.btn:focus-within{outline:2px solid var(--accent);outline-offset:2px} .stc-drop-t{font-size:14px;color:var(--text-secondary,var(--mute));flex:1 1 140px} .stc-drop-big{padding:16px 18px;gap:14px} .stc-up-ic{width:30px;height:30px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .stc-drop-tx{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0} .stc-drop-tx b{font-size:16px;color:var(--ink)} .stc-kinds{font-size:13px;color:var(--text-secondary,var(--mute))} .stc-drop-big label.btn{min-width:120px;justify-content:center} .stc-pend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .stc-pend:empty{display:none} .stc-pend li{display:inline-flex;align-items:center;gap:6px;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:2px 4px 2px 8px;background:var(--panel);max-width:100%;min-width:0} .stc-pend li>i{font-style:normal;font-weight:700;color:var(--ok-ink,var(--ok))} .stc-pend li.o>i{color:var(--warn-ink,var(--warn))} .stc-kd{font-size:13px;font-weight:600;white-space:nowrap} .stc-fn{font-size:13px;color:var(--text-secondary,var(--mute));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .stc-new-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px} .stc-new-a.hidden{display:none} .stc-bizd{margin-top:8px} .stc-bizd>summary{cursor:pointer;font-size:13px;color:var(--text-secondary,var(--mute));min-height:28px;display:inline-flex;align-items:center;gap:4px} .stc-bizd>summary small{font-size:13px} .stc-bizd>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} .stc-bizrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px} .stc-bizrow input{width:180px;font-size:15px;letter-spacing:.02em} /* ── 목록 ── */ .stc-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px} .stc-chips .chip{font-size:14px;min-height:32px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink)} .stc-chips .chip b{font-weight:700} .stc-chips .chip.zero:not(.on){color:var(--text-secondary,var(--mute))} .stc-chips .chip.zero:not(.on) b{font-weight:400} .stc-chips .chip.on{background:var(--ink);border-color:var(--ink);color:var(--panel)} .stc-list{overflow:hidden} .stc-root .tblwrap{max-height:none;min-height:0} .stc-t{width:100%;table-layout:fixed} .stc-t th:nth-child(1){width:23%} .stc-t th:nth-child(2){width:24%} .stc-t th:nth-child(3){width:30%} .stc-t th:nth-child(4){width:8%} .stc-t th:nth-child(5){width:9%} .stc-t th:nth-child(6){width:6%} .stc-t td{vertical-align:middle} .stc-row{cursor:pointer} /* 2026-10-11 목록 줄 끝 삭제·취소 단추 — 평소엔 흐리게, 줄에 올리거나 터치 화면이면 또렷하게 */ .stc-act{white-space:nowrap;text-align:right} .stc-rbtn{color:var(--muted)} .stc-row:hover .stc-rbtn,.stc-row:focus-within .stc-rbtn{color:var(--text)} .stc-rbtn[data-rdel]:hover{color:var(--bad,#C2410C);border-color:currentColor} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .stc-row:hover{background:var(--panel2)} .stc-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .stc-nm b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stc-nm small{font-size:13px;color:var(--text-secondary,var(--mute))} .stc-nx{font-size:14px;white-space:normal!important;overflow-wrap:break-word} .stc-tag{display:inline-block;font-size:12.5px;font-weight:600;color:var(--info,var(--accent));border:1px solid currentColor;border-radius:6px;padding:0 5px;margin-left:4px;white-space:nowrap} .stc-src{display:inline-block;font-size:12.5px;font-weight:600;border-radius:6px;padding:0 6px;background:var(--surface-3,var(--panel2));color:var(--ink);white-space:nowrap} /* ── 단계 막대(목록 mini · 카드 위) ── */ .stc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--faint,var(--line2));flex:none} .stc-dot.d-done{background:var(--ok-fill,var(--ok))} .stc-dot.d-run{background:var(--info-fill,var(--accent))} .stc-dot.d-need,.stc-dot.d-block{background:var(--warn-fill,var(--warn))} .stc-dot.d-fail{background:var(--bad-fill,var(--bad))} /* ── 카드 ── */ .stc-dh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} .stc-dt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0} .stc-dt h3{margin:0;font-size:20px;overflow-wrap:anywhere} .stc-dt h3:focus{outline:none} .stc-sec{padding:14px 18px;margin-bottom:12px;min-width:0} .stc-sec h4{margin:0;font-size:16px;display:flex;align-items:center;gap:8px} .stc-sec h4 small{font-size:13px;font-weight:400} .stc-nr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between} .stc-next{margin:0;font-size:15px;display:flex;align-items:center;flex-wrap:wrap;gap:2px;flex:1 1 260px;min-width:0} .stc-next b{margin-right:6px} .stc-na{display:flex;gap:8px;flex-wrap:wrap} .stc-na .btn.primary{min-width:140px} /* 더 보기(보류·취소·서식) */ .stc-more{position:relative;margin-left:auto} .stc-more>summary{list-style:none;cursor:pointer} .stc-more>summary::-webkit-details-marker{display:none} .stc-more>summary::after{content:" ▾"} .stc-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;gap:4px;min-width:160px;padding:6px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);box-shadow:0 8px 24px rgba(0,0,0,.14)} .stc-menu .btn{justify-content:flex-start;width:100%} .stc-del{color:var(--bad-ink,var(--bad))!important} /* ① 자료 | ② 읽은 내용 */ .stc-dk{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .stc-dk li{display:inline-flex;align-items:center;gap:5px;font-size:14px;border-radius:999px;padding:2px 10px 2px 6px;border:1px solid var(--line2)} .stc-dk li>i{font-style:normal;font-weight:700;width:16px;text-align:center} .stc-dk li.ok{background:var(--ok-soft)} .stc-dk li.ok>i{color:var(--ok-ink,var(--ok))} .stc-dk li.miss{border-style:dashed;color:var(--text-secondary,var(--mute))} .stc-dk li.miss>i{color:var(--bad-ink,var(--bad))} .stc-dk li.warn{background:var(--warn-soft)} .stc-dk li.warn>i{color:var(--warn-ink,var(--warn))} .stc-empty{margin:0;font-size:14px;color:var(--text-secondary,var(--mute))} .stc-oth{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .stc-oth li{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0} .stc-oth .linkish{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stc-kind{font-size:13px;min-height:28px;max-width:150px} .stc-root .linkish{background:none;border:0;padding:0;color:var(--info,var(--accent));text-decoration:underline;cursor:pointer;text-align:left;font:inherit} .stc-drop2{margin-top:10px;padding:8px 12px;min-height:44px} .stc-fd{margin-top:8px} .stc-fd>summary,.stc-optd>summary{cursor:pointer;font-size:13px;color:var(--text-secondary,var(--mute));min-height:28px;display:flex;align-items:center;gap:6px} .stc-fd>summary:focus-visible,.stc-optd>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} .stc-fl2{list-style:none;margin:4px 0 0;padding:0;font-size:14px} .stc-fl2 li{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0;border-top:1px solid var(--line);min-width:0} .stc-fl2 li b{font-weight:600;white-space:nowrap} .stc-files{min-width:0;overflow-wrap:anywhere} /* 상태 배지 */ .stc-cf{display:inline-block;font-size:12.5px;font-weight:600;border-radius:999px;padding:1px 8px;white-space:nowrap;border:1px solid transparent} .stc-cf.ok{background:var(--ok-soft);color:var(--ok-ink,var(--ok))} .stc-cf.hu{background:var(--info-soft);color:var(--info,var(--accent))} .stc-cf.run{background:var(--info-soft);color:var(--info,var(--accent))} .stc-cf.warn{background:var(--warn-soft);color:var(--warn-ink,var(--warn));border-color:var(--warn-ink,var(--warn))} .stc-cf.bad{background:var(--bad-soft);color:var(--bad-ink,var(--bad));border-color:var(--bad-ink,var(--bad))} .stc-cf.mu{color:var(--text-secondary,var(--mute));border-color:var(--border-interactive,var(--line2))} .stc-wait{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 10px;border-radius:var(--r-inner);background:var(--info-soft);color:var(--info,var(--accent));font-size:14px;font-weight:600} .stc-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:stcSpin 1s linear infinite;flex:none} @keyframes stcSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .stc-spin{animation:none;border-right-color:currentColor;opacity:.6} } .stc-kvv{font-size:15px;color:var(--ink);overflow-wrap:anywhere} .stc-in{width:100%;min-width:0;font-size:14px} .stc-optd{margin-top:6px} /* 우리가 정하는 칸 */ .stc-pick2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)} .stc-pick2 .field{margin:0;min-width:0} .stc-pick2 select,.stc-pick2 input{width:100%} .stc-pick2 .stc-lab{display:flex;align-items:center;gap:2px;margin-bottom:2px} .stc-since{display:flex;align-items:center;min-height:38px;font-size:15px;color:var(--ink)} /* 2026-10-13 이관 업체 체크칸 — 정하는 칸 아래 한 줄(색 없이 · 설명은 ⓘ) */ .stc-xferf{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0} .stc-pick2 .stc-xfer input{width:auto;flex:none} .stc-xfer{font-size:15px;min-height:32px;align-items:center} .stc-xfer b{font-weight:600;color:var(--ink)} .stc-xferf small.sub{font-size:13px} #stc-p-msg{margin:6px 0 0} .stc-note{margin:10px 0 0;font-size:14px;padding:8px 10px;border-radius:var(--r-inner);background:var(--panel2);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .stc-note.ok{background:var(--ok-soft);color:var(--ok-ink,var(--ok))} .stc-note.warn{background:var(--warn-soft);color:var(--warn-ink,var(--warn))} .stc-note.bad{background:var(--bad-soft);color:var(--bad-ink,var(--bad))} /* ③ 진행 */ .stc-ol{display:flex;align-items:center;gap:8px;font-size:15px;min-height:32px} .stc-ol b{color:var(--ink)} .stc-ck{font-style:normal;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:700;border:1.5px solid var(--border-interactive,var(--line2));color:var(--text-secondary,var(--mute))} .stc-ck.on{background:var(--ok-fill,var(--ok));border-color:var(--ok-fill,var(--ok));color:#fff} .stc-ck.off{border-color:var(--bad-ink,var(--bad));color:var(--bad-ink,var(--bad))} .stc-att{list-style:none;margin:8px 0 0 30px;padding:0;display:flex;flex-direction:column;gap:6px} .stc-att>li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px} .stc-att>li>b{min-width:150px} .stc-att>li>span{min-width:0;overflow-wrap:anywhere;color:var(--text-secondary,var(--mute))} .stc-att .stc-bad{color:var(--bad-ink,var(--bad));font-weight:600} .stc-aa{display:inline-flex;gap:6px;margin-left:auto} .stc-aa label.btn{cursor:pointer;position:relative} .stc-aa label.btn:focus-within{outline:2px solid var(--accent);outline-offset:2px} .stc-cands{margin:0 0 4px;border:1px solid var(--line);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;gap:4px} .stc-cand{display:flex;align-items:center;gap:6px;font-size:14px} .stc-cn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stc-rrnf{margin:8px 0 0 30px;max-width:420px} .stc-rrnf label{font-size:14px;font-weight:600;display:flex;align-items:center;gap:2px} .stc-rrnf input{width:100%} .stc-hint{margin:6px 0 0 30px;font-size:13px;color:var(--text-secondary,var(--mute));display:flex;align-items:center;gap:2px;flex-wrap:wrap} .stc-cmsg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 0 30px} .stc-cmsg .field{margin:0;min-width:0} .stc-cmsg label{font-size:13px} .stc-cmsg .stc-lab{display:flex;align-items:center;gap:2px} .stc-cmsg input,.stc-cmsg select{width:100%;min-width:0} .stc-cmsg .stc-w2{grid-column:span 2} .stc-agree{margin:8px 0 0 30px;font-size:14px} /* 빠진 것 — 묶음별 칩 */ .stc-miss:empty{display:none} .stc-miss{display:flex;flex-direction:column;gap:6px;margin:4px 0 0;padding:10px 12px;border-radius:12px;background:var(--warn-soft);border:1px solid var(--warn-ink,var(--warn))} .stc-miss-h{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--warn-ink,var(--warn))} .stc-cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--warn-ink,var(--warn));color:var(--panel);font-size:13px;font-weight:700} .stc-mg{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .stc-mgl{font-size:13px;font-weight:700;color:var(--ink);min-width:48px} .stc-mc{font-size:13px;padding:1px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);color:var(--ink)} .stc-ga{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px} .stc-ga .btn.primary{min-width:160px} .stc-hist{list-style:none;margin:0;padding:0;font-size:14px} .stc-hist li{padding:4px 0;border-top:1px solid var(--line);overflow-wrap:break-word} .stc-hist li:first-child{border-top:0} /* ── 2026-10-11 카드 = 3단계(자료 확인 › 사업자 정보 › 수임 진행 — js/993 stPaintDetail) ── 대표님 "세로로 너무 길어 · 자료 확인 > 사업자 정보 > 수임 진행 심플하게 · 진행 상황은 표 + 진행률(진행 중이면 로딩바)". 단계 머리 = 탭(지금 단계 강조 · 끝나면 ✓) · 한 번에 한 단계만 펼친다. 움직임은 prefers-reduced-motion 이면 멈춘다. */ .stc-card{padding:16px 20px 18px} .stc-s3{display:flex;align-items:center;margin:0 0 12px} #view-setup .stc-s3>button{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:54px;border-radius:16px;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;text-align:left;font:inherit} #view-setup .stc-s3>button:hover{background:var(--panel2)} #view-setup .stc-s3>button.sel{background:var(--accent-soft);border-color:var(--line2)} .stc-s3>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .stc-s3c{flex:0 1 40px;min-width:10px;height:2px;border-radius:1px;background:var(--line2)} .stc-s3c.done{background:var(--ok-fill,var(--ok))} .stc-s3n{font-style:normal;flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:14px;font-weight:700;border:2px solid var(--border-interactive,var(--line2));color:var(--text-secondary,var(--mute));background:var(--panel)} .stc-s3>button.s-done .stc-s3n{background:var(--ok-fill,var(--ok));border-color:var(--ok-fill,var(--ok));color:#fff} .stc-s3>button.cur .stc-s3n{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .stc-s3>button.cur.s-need .stc-s3n{border-color:var(--warn-ink,var(--warn));color:var(--warn-ink,var(--warn));box-shadow:0 0 0 4px var(--warn-soft)} .stc-s3>button.s-fail .stc-s3n{background:var(--bad-fill,var(--bad));border-color:var(--bad-fill,var(--bad));color:#fff} .stc-s3t{display:flex;flex-direction:column;min-width:0;line-height:1.3} .stc-s3t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stc-s3t small{font-size:13px;color:var(--text-secondary,var(--mute));display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden} .stc-s3t small .stc-ld{width:36px} .stc-card .stc-nr{padding:10px 14px;border-radius:14px;background:var(--panel2);margin-bottom:14px} .stc-next>span{min-width:0;overflow-wrap:anywhere} .stc-next .stc-ld{margin-right:8px} .stc-next small{margin-left:6px} /* 단계 판 */ .stc-pane{min-width:0} .stc-pane[hidden]{display:none!important} .stc-ph{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;min-height:32px} .stc-ph h4{margin:0;font-size:16px;display:flex;align-items:center;gap:6px} .stc-ph h4 small{font-size:13px;font-weight:400} .stc-ph .stc-okall{margin-left:auto;gap:6px} .stc-ph .stc-okall b{font-weight:700} .stc-okn,.stc-pct{font-size:14px;color:var(--text-secondary,var(--mute))} .stc-pct b{font-size:18px;color:var(--ink)} .stc-pane .stc-wait{flex-wrap:wrap} .stc-pane .stc-wait small{font-weight:400;margin-left:4px} .stc-d2{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;margin-top:10px} .stc-d2 .stc-drop2{margin-top:0;flex:1 1 300px} .stc-d2 .stc-fd{margin-top:0;flex:1 1 220px;min-width:0} /* 로딩바(서버 PC 가 일하는 중) · 진행률 막대 */ .stc-ld{position:relative;display:inline-block;flex:none;width:64px;height:6px;border-radius:999px;background:var(--info-soft);overflow:hidden;vertical-align:middle} .stc-ld>i{position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:inherit;background:var(--info,var(--accent));animation:stcLd 1.25s ease-in-out infinite} @keyframes stcLd{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}} .stc-pbar{position:relative;display:block;height:8px;border-radius:999px;background:var(--surface-3,var(--panel2));overflow:hidden} .stc-pbar>i{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .4s ease} .stc-pbar.full>i{background:var(--ok-fill,var(--ok))} .stc-pbar.run::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,rgb(255 255 255/.5),transparent);animation:stcLd 1.6s linear infinite} @media (prefers-reduced-motion:reduce){ .stc-ld>i{animation:none;width:100%;opacity:.5} .stc-pbar.run::after{display:none} .stc-pbar>i{transition:none} } /* ② 사업자 정보 — 사람이 볼 칸 · 2단 요약 */ .stc-attn{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .stc-ar{display:grid;grid-template-columns:120px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px 8px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)} .stc-ar.f-need{background:var(--warn-soft);border-color:var(--warn-ink,var(--warn))} .stc-ar.opt.f-need{background:var(--panel2);border-color:var(--line2)} .stc-al{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;min-width:0} .stc-optl{font-size:13px;font-weight:400;color:var(--text-secondary,var(--mute))} .stc-am{display:inline-flex;align-items:center;gap:2px;min-width:0} .stc-ab{display:inline-flex} .stc-allok{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ok-ink,var(--ok));display:flex;align-items:center;gap:6px} .stc-kvg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0;padding:0} .stc-kv{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:center;padding:7px 2px;border-top:1px solid var(--line);min-width:0;min-height:40px} .stc-kv dt{margin:0;font-size:13px;font-weight:600;color:var(--text-secondary,var(--mute))} .stc-kv dd{margin:0;display:flex;align-items:center;gap:6px;min-width:0} .stc-kv .stc-kvv{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stc-g{font-style:normal;flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:12px;font-weight:700} .stc-g.ok{background:var(--ok-soft);color:var(--ok-ink,var(--ok))} .stc-g.hu{background:var(--info-soft);color:var(--info,var(--accent))} .stc-g.warn{background:var(--warn-fill,var(--warn));color:#fff} .stc-g.mu{color:var(--text-secondary,var(--mute));border:1px solid var(--line2)} .stc-fix{margin-left:auto;flex:none;font:inherit;font-size:13px;padding:2px 8px;min-height:28px;border-radius:var(--r-ctl);border:0;background:none;color:var(--info,var(--accent));text-decoration:underline;cursor:pointer;opacity:0} .stc-fix:hover{background:var(--panel2)} .stc-kv:hover .stc-fix,.stc-kv:focus-within .stc-fix{opacity:1} .stc-fix:focus-visible{outline:2px solid var(--accent);outline-offset:1px} @media (hover:none){ .stc-fix{opacity:1} } .stc-optd .stc-attn{margin-top:6px} /* ③ 수임 진행 — 표 */ .stc-runc>.stc-pbar{margin:0 0 12px} .stc-rtab{width:100%;border-collapse:collapse;table-layout:fixed} .stc-rtab thead th{font-size:13px;font-weight:600;color:var(--text-secondary,var(--mute));text-align:left;padding:6px 10px;border-bottom:1px solid var(--line2);background:none} .stc-rtab thead th:nth-child(1){width:150px} .stc-rtab thead th:nth-child(2){width:100px} .stc-rtab thead th:nth-child(3){width:200px} .stc-rtab th[scope=row]{font-size:14px;font-weight:600;text-align:left;color:var(--ink);background:none;white-space:nowrap} .stc-rtab td,.stc-rtab th[scope=row]{padding:9px 10px;border-top:1px solid var(--line);vertical-align:middle} .stc-rr.s-need>*{background:var(--warn-soft)} .stc-rr.s-fail>*{background:var(--bad-soft)} .stc-rr.s-need>th{box-shadow:inset 3px 0 0 var(--warn-fill,var(--warn))} .stc-rr.s-fail>th{box-shadow:inset 3px 0 0 var(--bad-fill,var(--bad))} .stc-rr.s-run>th{box-shadow:inset 3px 0 0 var(--info,var(--accent))} .stc-rr.off>th,.stc-rr.off .stc-rs{color:var(--text-secondary,var(--mute))} .stc-st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink)} .stc-st>i{font-style:normal;flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;border:1.5px solid var(--border-interactive,var(--line2));color:var(--text-secondary,var(--mute))} .stc-st.s-done{color:var(--ok-ink,var(--ok))} .stc-st.s-done>i{background:var(--ok-fill,var(--ok));border-color:var(--ok-fill,var(--ok));color:#fff} .stc-st.s-run{color:var(--info,var(--accent))} .stc-st.s-run>i{border-color:var(--info,var(--accent));color:var(--info,var(--accent))} .stc-st.s-need,.stc-st.s-block{color:var(--warn-ink,var(--warn))} .stc-st.s-need>i,.stc-st.s-block>i{border-color:var(--warn-ink,var(--warn));color:var(--warn-ink,var(--warn));background:var(--panel)} .stc-st.s-fail{color:var(--bad-ink,var(--bad))} .stc-st.s-fail>i{background:var(--bad-fill,var(--bad));border-color:var(--bad-fill,var(--bad));color:#fff} .stc-st.s-wait,.stc-st.s-skip{color:var(--text-secondary,var(--mute))} .stc-rp{white-space:nowrap} .stc-rp .btn{white-space:normal;max-width:100%;text-align:left} .stc-rp .stc-pbar{height:6px;max-width:150px} .stc-rp small{margin-left:8px;font-size:13px;color:var(--text-secondary,var(--mute))} .stc-rp .stc-ol{font-size:14px;min-height:32px;gap:6px} .stc-pbx{display:block;height:6px;max-width:150px;border-radius:999px;background:var(--surface-3,var(--panel2))} .stc-pbx.s-need{background:linear-gradient(90deg,var(--warn-fill,var(--warn)) 50%,var(--surface-3,var(--panel2)) 50%)} .stc-pbx.s-fail{background:var(--bad-fill,var(--bad))} .stc-tg{display:inline-block;font-size:13px;font-weight:600;color:var(--ok-ink,var(--ok));background:var(--ok-soft);border-radius:999px;padding:1px 9px} .stc-rtab td.stc-rn{font-size:14px;color:var(--ink);overflow-wrap:anywhere;white-space:normal} .stc-rnt{white-space:normal} .stc-rr.s-fail .stc-rnt{color:var(--bad-ink,var(--bad));font-weight:600} .stc-rr.s-wait .stc-rnt,.stc-rr.s-skip .stc-rnt,.stc-rr.s-done .stc-rnt,.stc-rr.s-pick .stc-rnt{color:var(--text-secondary,var(--mute))} .stc-rn .stc-sa{display:inline-flex;gap:6px;flex-wrap:wrap;vertical-align:middle;max-width:100%} .stc-rn .stc-sa .btn{white-space:normal} .stc-rnt+.stc-sa{margin-left:8px} .stc-rn .stc-c360{font-size:13px} .stc-rsub>td{padding:2px 10px 14px 10px;border-top:0} .stc-rsub .stc-att,.stc-rsub .stc-cmsg,.stc-rsub .stc-rrnf,.stc-rsub .stc-hint,.stc-rsub .stc-agree{margin-left:0} .stc-rsub>td>:first-child{margin-top:0} .stc-rsub>td{background:linear-gradient(var(--panel2),var(--panel2)) padding-box} .stc-runc .stc-miss{margin-top:12px} /* 시트에서 채울 칸 — ③ 아래 한 줄 묶음 */ .stc-runc .stc-secret{margin-top:14px} .stc-secret .stc-ch{display:flex;align-items:center;gap:4px;font-size:14px} .stc-runc .stc-secl{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .stc-runc .stc-secl li{flex-direction:column;justify-content:flex-start;gap:2px;padding:8px 10px;border-radius:10px;background:var(--panel2);min-width:0} .stc-runc .stc-secl li b{font-size:13px} /* 목록 — 3점 단계 + 진행률 */ .stc-s3m{display:inline-flex;align-items:center;vertical-align:middle;margin-right:8px} .stc-s3m i{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--border-interactive,var(--line2));background:var(--panel);box-sizing:border-box} .stc-s3m i.s-done{background:var(--ok-fill,var(--ok));border-color:var(--ok-fill,var(--ok))} .stc-s3m i.cur{border-color:var(--accent);background:var(--accent-soft)} .stc-s3m i.cur.s-need{border-color:var(--warn-ink,var(--warn));background:var(--warn-soft)} .stc-s3m i.s-fail{background:var(--bad-fill,var(--bad));border-color:var(--bad-fill,var(--bad))} .stc-s3m b{flex:none;width:12px;height:2px;background:var(--line2)} .stc-s3l{font-size:14px;font-weight:600;vertical-align:middle;color:var(--ink)} .stc-nxt{display:block} .stc-lp{display:flex;align-items:center;gap:8px;margin-top:6px;max-width:280px} .stc-lp .stc-pbar{flex:1 1 auto;height:6px} .stc-lp b{flex:none;min-width:38px;font-size:13px;font-weight:600;color:var(--text-secondary,var(--mute))} .stc-det>summary{cursor:pointer;font-size:15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:28px} .stc-det>summary .sub{font-size:13px;font-weight:400} .stc-det[open]>summary{margin-bottom:10px} .stc-det>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} @media (max-width:1180px){ /* ── 좁은 화면 ── */ .stc-pick2{grid-template-columns:repeat(2,minmax(0,1fr))} .stc-cmsg{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .stc-t thead{display:none} .stc-t,.stc-t tbody,.stc-t tr,.stc-t td{display:block;width:100%!important} .stc-t tr.stc-row{padding:10px 12px;border-top:1px solid var(--line)} .stc-t td{border:0!important;padding:2px 0!important} .stc-t td:nth-child(4),.stc-t td:nth-child(5){display:inline-block;width:auto!important;margin-right:8px;font-size:13px} .stc-t td.stc-act{display:inline-block;width:auto!important;float:right;margin-top:-6px} .stc-pick2,.stc-cmsg{grid-template-columns:minmax(0,1fr)} .stc-cmsg .stc-w2{grid-column:auto} .stc-att,.stc-cmsg,.stc-rrnf,.stc-hint,.stc-agree{margin-left:0} .stc-att>li>b{min-width:0;flex:1 1 100%} .stc-aa{margin-left:0} .stc-sec{padding:14px} .stc-drop-big{flex-wrap:wrap} .stc-drop-big label.btn{flex:1 1 100%} .stc-root .btn,.stc-chips .chip,.stc-kind,.stc-root select,.stc-root input:not([type=checkbox]):not(.stc-file){min-height:44px} .stc-root .linkish{min-height:44px;display:inline-flex;align-items:center} .stc-bizd>summary,.stc-fd>summary,.stc-optd>summary,.stc-csd>summary{min-height:44px} .stc-att>li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 8px;align-items:start} .stc-att>li>.stc-ck{grid-row:1/span 3} .stc-att>li>b,.stc-att>li>span{grid-column:2} .stc-fix{opacity:1;min-height:44px} /* 3단계 머리 — 동그라미 위 · 이름 아래 */ .stc-card{padding:12px 12px 14px} #view-setup .stc-s3>button{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:6px 2px;min-height:44px} .stc-s3t{align-items:center;max-width:100%} .stc-s3t b{font-size:14px} .stc-s3t small{justify-content:center} .stc-s3t small .stc-ld{display:none} .stc-s3c{flex:0 1 18px;align-self:flex-start;margin-top:21px} .stc-s3n{width:28px;height:28px} .stc-card .stc-nr{padding:10px 12px} .stc-na,.stc-na .btn{width:100%} /* ② 칸 — 이름·출처 / 값·확인 두 줄 */ .stc-ar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l m" "v b";gap:6px 8px;padding:8px 10px} .stc-al{grid-area:l} .stc-am{grid-area:m} .stc-av{grid-area:v;min-width:0} .stc-ab{grid-area:b} .stc-kvg{grid-template-columns:minmax(0,1fr)} .stc-kv{grid-template-columns:84px minmax(0,1fr);min-height:44px} /* ③ 표 — 줄마다 카드처럼 쌓기 */ .stc-rtab thead{display:none} .stc-rtab,.stc-rtab tbody{display:block;width:100%} .stc-rtab tr.stc-rr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l s" "p p" "n n";gap:6px 10px;padding:10px 10px 10px 12px;border-top:1px solid var(--line)} .stc-rtab tr.stc-rr>*{border:0!important;padding:0!important;width:auto!important;background:none!important;box-shadow:none!important} .stc-rtab tr.stc-rr>th{grid-area:l;white-space:normal} .stc-rtab tr.stc-rr>.stc-rs{grid-area:s} .stc-rtab tr.stc-rr>.stc-rp{grid-area:p;white-space:normal} .stc-rtab tr.stc-rr>.stc-rn{grid-area:n} .stc-rtab tr.stc-rr.s-need{background:var(--warn-soft);box-shadow:inset 3px 0 0 var(--warn-fill,var(--warn))} .stc-rtab tr.stc-rr.s-fail{background:var(--bad-soft);box-shadow:inset 3px 0 0 var(--bad-fill,var(--bad))} .stc-rtab tr.stc-rr.s-run{box-shadow:inset 3px 0 0 var(--info,var(--accent))} .stc-rtab tr.stc-rr>.stc-rn:empty{display:none} .stc-rp .stc-pbar,.stc-pbx{max-width:none} .stc-rp .stc-ld{width:120px} .stc-rtab tr.stc-rsub{display:block} .stc-rtab tr.stc-rsub>td{display:block;padding:4px 10px 12px!important} .stc-runc .stc-secl{grid-template-columns:minmax(0,1fr)} .stc-d2>*{flex-basis:100%!important} .stc-ga .btn{flex:1 1 100%} } @media (max-width:1024px){ .stc-root .btn,.stc-root select,.stc-root input:not([type=checkbox]):not(.stc-file),.stc-chips .chip,.stc-det>summary,.stc-root .linkish{min-height:44px} .stc-ol,.stc-agree,.stc-xfer{min-height:44px;align-items:center} .stc-ol input[type=checkbox],.stc-agree input[type=checkbox],.stc-xfer input[type=checkbox]{width:24px;height:24px;flex:none} } /* 작은 꼬리표도 13px 바닥(대표님 화면 규격) */ #view-setup .pill{font-size:13px!important} .stc-root .stc-tag, .stc-root .stc-src, .stc-root .stc-cf, .stc-root .stc-kd {font-size:13px} .stc-det>summary,.stc-fd>summary,.stc-optd>summary,.stc-bizd>summary,.stc-csd>summary{list-style:none} .stc-det>summary::-webkit-details-marker,.stc-fd>summary::-webkit-details-marker,.stc-optd>summary::-webkit-details-marker,.stc-bizd>summary::-webkit-details-marker,.stc-csd>summary::-webkit-details-marker{display:none} .stc-det>summary::before,.stc-fd>summary::before,.stc-optd>summary::before,.stc-bizd>summary::before,.stc-csd>summary::before{content:"▸";display:inline-block;width:14px;color:var(--text-secondary,var(--mute))} .stc-det[open]>summary::before,.stc-fd[open]>summary::before,.stc-optd[open]>summary::before,.stc-bizd[open]>summary::before,.stc-csd[open]>summary::before{content:"▾"} /* 2026-10-10 상담일지 — AI 요약 상자 */ .stc-consult{margin-top:12px;padding:8px 12px;border-radius:12px;background:var(--surface-2,var(--panel2))} .stc-consult .stc-ch{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px} .stc-cc{font-size:13px;padding:1px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line)} .stc-csd{margin-top:4px} .stc-csd>summary{cursor:pointer;font-size:13px;color:var(--text-secondary,var(--mute));min-height:28px;display:flex;align-items:center} .stc-csd>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} .stc-csum{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.55} /* 2026-10-10 시트에서 채울 칸(민감 칸 — 값은 다루지 않음) */ .stc-secret{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px dashed var(--line2,#D0D5DD)} .stc-secret.done{border-style:solid;color:var(--text-secondary,#475467);font-size:13px} .stc-secl{list-style:none;margin:6px 0;padding:0;display:grid;gap:3px;font-size:13px} .stc-secl li{display:flex;justify-content:space-between;gap:8px} .stc-secl li span{color:var(--text-secondary,#475467)} .stc-secl li.mu span{color:var(--mute,#98A2B3)} .stc-seca{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} /* 2026-10-10 수임 등록 → 목록 진행 상황 */ .stc-nx .stc-spin.sm{display:inline-block;width:10px;height:10px;border-width:2px;margin-right:6px;vertical-align:-1px;color:var(--accent)} .stc-row.new{animation:stcNew 2.4s ease-out 1} @keyframes stcNew{0%{background:var(--accent-soft,rgba(37,99,235,.14))}100%{background:transparent}} @media (prefers-reduced-motion:reduce){ .stc-row.new{animation:none} } /* 2026-10-11 기장료 근거(서류에서 읽음) */ .stc-feesrc{display:flex;align-items:center;gap:2px;margin-top:3px;font-size:13px;color:var(--text-secondary,var(--mute))} .stc-feesrc.warn{color:var(--warn-text,var(--warn,#b45309))} /* 2026-10-12 홈택스 사업자 기본사항 조회 → 카드 '확실' 칸 · 시트 다름 표시 (js/993 stHtInfoHtml) */ .stc-srch{flex:none;font-size:12.5px;font-weight:600;line-height:18px;padding:0 6px;border-radius:6px;background:var(--ok-soft);color:var(--ok-ink,var(--ok));white-space:nowrap} .stc-hti{margin-top:12px;padding:8px 12px;border-radius:10px;border:1px solid var(--line2,var(--line));background:var(--surface-2,var(--panel2))} .stc-hti.fail{border-color:var(--bad,#d92d20)} .stc-htl{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;font-size:14px;min-height:32px} .stc-htt{flex:1 1 240px;min-width:0;line-height:1.5} .stc-htl small{font-size:13px} .stc-htl>.btn{flex:none;margin-left:auto} .stc-hti .stc-g.bad{background:var(--bad-soft);color:var(--bad-ink,var(--bad))} .stc-hti .stc-ld{display:inline-block;width:56px} .stc-htd{margin-top:8px;padding:8px 10px;border-radius:var(--r-inner,8px);background:var(--warn-soft);color:var(--warn-ink,var(--warn))} .stc-htd .stc-ch{display:flex;align-items:center;gap:4px;font-size:14px} .stc-htd ul{list-style:none;margin:6px 0;padding:0;display:grid;gap:4px;font-size:13.5px} .stc-htd li{display:flex;gap:8px;flex-wrap:wrap;color:var(--ink)} .stc-htd li b{min-width:72px} /* 2026-10-12 대표자 주민번호 줄 — 데스크에서 넣기(잠가서 시트에) */ .stc-rrnd{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap} .stc-rrnd input{width:140px;min-height:32px} /* 2026-10-14 진행 범위(한 단계만) — 색 없이 테두리·흐림만 */ .stc-scope{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 10px} .stc-scl{font-size:14px;font-weight:600;color:var(--ink)} .stc-scope select{min-height:32px;font-size:14px;max-width:100%} .stc-scope small.sub{font-size:13px} .stc-offl{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:8px 0 0;font-size:13px;color:var(--text-secondary,var(--mute));opacity:.85} .stc-offk{font-weight:600;border:1px dashed currentColor;border-radius:6px;padding:0 6px} .stc-onlyt{color:var(--ink)} .stc-onerow input#stc-one-c{width:260px;max-width:100%} .stc-onerow select{min-height:32px;font-size:14px} @media (max-width:600px){ .stc-scope select{min-height:44px;flex:1 1 200px} .stc-onerow input#stc-one-c{width:100%} .stc-onerow select,.stc-onerow .btn{min-height:44px} } /* [한 번에 진행] 빠진 게 있을 때 — 눌리긴 하지만 흐린 모양 · 누르면 빠진 칸이 깜빡인다 */ #stc-run.stc-blk{background:var(--panel2,#E9ECF2);color:var(--mute);border:1px dashed var(--border-interactive,#7D8697);cursor:pointer} @keyframes stcFlash{0%,100%{box-shadow:0 0 0 0 transparent}30%,70%{box-shadow:0 0 0 4px var(--warn-fill,#F59E0B)}} .stc-flash{animation:stcFlash 1.4s ease 2;border-radius:10px} @media (prefers-reduced-motion:reduce){ .stc-flash{animation:none;outline:3px solid var(--warn-fill,#F59E0B)} } /* 2026-10-09: 흐린 모양이 뒤 층(.btn.primary 흰 글자)에 져서 글자가 안 보이던 것 — 화면 id 로 이긴다 */ #view-setup #stc-run.stc-blk,#view-setup #stc-run.stc-blk:hover{background:var(--panel2);color:var(--ink)!important;border:1.5px dashed var(--border-interactive,var(--line2))!important;opacity:1;min-width:160px} /* 2026-10-22 서버 PC 가 승인한 카드 — 홈택스·CMS·위하고를 서버가 스스로 시작한다는 한 줄(색은 조치 필요일 때만) */ .stc-autol{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--text-secondary,var(--mute))} .stc-autol.warn{color:var(--warn-ink,var(--warn))} .stc-autol b{font-weight:600} /* 2026-10-23 글로 입력(993t) — 붙여 넣은 글 → 칸별 표. 색은 문제(빈 필수·틀림)와 주의(추정·홈택스 값 다름)에만 */ .stc-tx{margin-top:8px;display:flex;flex-direction:column;gap:8px;min-width:0} .stc-txa{width:100%;box-sizing:border-box;min-height:120px;font:inherit;font-size:14px;line-height:1.5;padding:10px 12px;border:1px solid var(--line2,var(--line));border-radius:10px;background:var(--panel);color:var(--ink);resize:vertical} .stc-txa:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .stc-txh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px} .stc-txh .bad{color:var(--bad-ink,var(--bad))} .stc-txtb{width:100%;border-collapse:collapse;font-size:14px} .stc-txtb th,.stc-txtb td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle} .stc-txtb thead th{font-size:12px;font-weight:600;color:var(--text-secondary,var(--mute))} .stc-txtb tbody th{font-weight:600;white-space:nowrap;width:1%} .stc-txtb td:nth-child(3){color:var(--text-secondary,var(--mute));font-size:13px} .stc-txtb tr.tx-miss th,.stc-txtb tr.tx-bad th{color:var(--bad-ink,var(--bad))} .stc-txtb tr.tx-miss td:nth-child(3),.stc-txtb tr.tx-bad td:nth-child(3){color:var(--bad-ink,var(--bad));font-weight:600} .stc-txtb tr.tx-miss,.stc-txtb tr.tx-bad{background:var(--bad-soft)} .stc-txtb tr.tx-guess,.stc-txtb tr.tx-keep{background:var(--warn-soft)} .stc-txtb tr.tx-opt td:nth-child(2){color:var(--text-secondary,var(--mute))} .stc-txv{word-break:break-all} .stc-txv.sec{font-variant-numeric:tabular-nums;letter-spacing:.02em} .stc-txin{font:inherit;font-size:14px;padding:4px 8px;border:1px solid var(--line2,var(--line));border-radius:8px;background:var(--panel);color:var(--ink);max-width:100%;min-height:32px;box-sizing:border-box} .stc-txa2{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .stc-txdoc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-secondary,var(--mute))} .stc-txdoc li{display:flex;gap:6px;align-items:flex-start} .stc-txleft{font-size:13px;color:var(--text-secondary,var(--mute))} .stc-txleft ul{margin:4px 0 0;padding-left:18px} .stc-txb{margin-left:auto} .stc-txtb .stc-fix{opacity:1} .stc-txtb td:nth-child(4){width:1%;white-space:nowrap} .stc-txcard{margin:8px 0 12px;padding:10px 12px;border:1px dashed var(--line2,var(--line));border-radius:12px} @media (max-width:600px){#view-setup .stc-txtb thead{display:none}#view-setup .stc-txtb,#view-setup .stc-txtb tbody{display:block}#view-setup .stc-txtb tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;padding:8px 4px;border-bottom:1px solid var(--line)}#view-setup .stc-txtb th,#view-setup .stc-txtb td{border:0;padding:0;width:auto;min-height:0;height:auto;background:none}#view-setup .stc-txtb td:nth-child(2){grid-column:2;grid-row:1;min-width:0}#view-setup .stc-txtb td:nth-child(3){grid-column:1/3;grid-row:2;font-size:12px}#view-setup .stc-txtb td:nth-child(4){grid-column:3;grid-row:1/3;align-self:center;width:auto}} /* 2026-10-23 구파발점: 빨간 줄의 빈 비밀번호 칸(바로 넣기)·[고치기] 칸이 좁은 화면에서 표를 밀어내지 않게 — 칸은 줄 너비 안에서 줄어듦 */ @media (max-width:600px){#view-setup .stc-txtb td:nth-child(2){display:flex;flex-wrap:wrap;align-items:center;gap:6px}#view-setup .stc-txtb .stc-txin{flex:1 1 7em;min-width:0;width:auto}#view-setup .stc-txtb td:nth-child(2),#view-setup .stc-txtb td:nth-child(3){white-space:normal;overflow-wrap:anywhere}} /* 2026-10-30 시작 상자 = ① 사업자 정보 글 + ② 서류(선택 · 보관만) — 대표님 "자료함에 파일 올리기 + 사업자 정보 적기로 바로 처리" */ .stc-sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:4px 0 6px} .stc-sh>b{font-size:14px;font-weight:700;color:var(--ink)} .stc-sh .sub{font-size:13px;color:var(--text-secondary,var(--mute));font-weight:400} .stc-sh+.stc-drop{margin-top:0} .stc-txd+.stc-sh{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} .stc-pend-h{margin:6px 0 0;font-size:13px;color:var(--text-secondary,var(--mute))} .stc-pend-h:empty{display:none} .stc-pend .stc-pk{font-size:13px;min-height:28px;max-width:11em;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)} @media (max-width:600px){.stc-pend li{flex-wrap:wrap}.stc-pend .stc-pk{min-height:40px;max-width:100%}}/* ── 2026-11-02 거래처 카드 만들기 4단계(① 자료 넣기 › ② 수임 정보 입력 › ③ 수임 자동 시작 › ④ 진행 상황 — js/993) ── 사람이 할 일 없는 바깥 기다림(더빌 은행 승인·납세자 승인) = '기다리는 중' 회색(주의 색 아님) · 색은 사람 차례·실패만 */ .stc-st.s-hold{color:var(--text-secondary,var(--mute))} .stc-st.s-hold>i{border-style:dashed} .stc-rr.s-hold .stc-rnt{color:var(--text-secondary,var(--mute))} .stc-s3m i.s-hold{border-style:dashed;border-color:var(--text-secondary,var(--mute))} .stc-wtk{font-weight:600;color:var(--text-secondary,var(--mute))} .stc-gol,.stc-lead,.stc-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink)} .stc-gol>i,.stc-sum.ok>i{font-style:normal;font-weight:700;color:var(--ok-ink,var(--ok))} .stc-sum{padding:8px 12px;border-radius:10px;background:var(--panel2)} .stc-sum.warn{background:var(--warn-soft)} .stc-sum.warn>b{color:var(--warn-ink,var(--warn))} .stc-sum>span{min-width:0;overflow-wrap:anywhere} .stc-start .stc-scope{margin-bottom:10px} .stc-tabgo{font-size:13px} .stc-ctd{margin-top:16px;border-top:1px solid var(--line);padding-top:10px} .stc-ctd>summary{cursor:pointer;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:32px;font-size:14px} .stc-ctd>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} .stc-ctb{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:8px;font-size:14px} .stc-ctt{min-width:0;overflow-wrap:anywhere;color:var(--text-secondary,var(--mute))} .stc-ctb .stc-sa{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center} @media (max-width:1180px){ #view-setup .stc-s3t b{white-space:normal;word-break:keep-all;line-height:1.2;font-size:13px} .stc-s3c{flex:0 1 10px} .stc-ctd>summary{min-height:44px} } .stc-rtab th[scope=row]{white-space:normal;word-break:keep-all;overflow-wrap:anywhere} /* 2026-11-03 ② 수임 신청서 — 서식 한 장(js/993 stFormHtml) · 묶음 제목 + 표 모양 줄(왼쪽 항목 · 오른쪽 값) · 색은 확인 필요(주의)에만 */ .stf{margin-top:4px;border:1px solid var(--line2,var(--line));border-radius:var(--r-inner,10px);background:var(--panel);overflow:hidden} .stf-head{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;padding:12px 16px 10px;border-bottom:2px solid var(--ink)} .stf-head>b{font-size:17px;letter-spacing:.02em;color:var(--ink)} .stf-head>.sub{font-size:13px} .stf-leg{margin-left:auto;font-size:12.5px} .stf-g{margin:0;padding:0;border:0;min-width:0} .stf-g>legend{float:left;width:100%;box-sizing:border-box;margin:0;padding:7px 16px;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--panel2);border-bottom:1px solid var(--line)} .stf-g+.stf-g>legend{border-top:1px solid var(--line2,var(--line))} .stf-t{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .stf-r{display:grid;grid-template-columns:132px minmax(0,1fr);min-width:0;border-bottom:1px solid var(--line)} .stf-r:nth-child(odd):not(.w){border-right:1px solid var(--line)} .stf-r.w{grid-column:1/-1;border-right:0} .stf-t>.stf-r:last-child{border-bottom:0} /* 2026-11-04 수임 신청서 — 꼭 적을 칸(사업자번호·휴대폰·기장료·구분·담당)만 위에 · 나머지는 접음(대표님 "적을 게 너무 많다 · 세로가 너무 길다") */ .stf-more{border-top:1px solid var(--line2,var(--line))} .stf-more>summary{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;min-height:44px;box-sizing:border-box;padding:8px 16px;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--panel2);cursor:pointer;list-style:none} .stf-more>summary::-webkit-details-marker{display:none} .stf-more>summary::before{content:"▸";color:var(--mute);font-weight:400} .stf-more[open]>summary::before{content:"▾"} .stf-more>summary .sub{font-weight:400;font-size:12.5px} .stf-more[open]>summary{border-bottom:1px solid var(--line)} .stf-l{display:flex;align-items:center;gap:4px;padding:10px 12px;font-size:13.5px;font-weight:600;color:var(--text-secondary,var(--mute));background:var(--surface-2,var(--panel2));border-right:1px solid var(--line);min-width:0;word-break:keep-all} .stf-l label{cursor:pointer} .stf-v{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;padding:8px 12px;min-width:0;min-height:44px;font-size:14.5px;color:var(--ink)} .stf-val{min-width:0;overflow-wrap:anywhere;font-weight:500} .stf-src{font-size:12.5px;color:var(--text-secondary,var(--mute));min-width:0} .stf-src.warn{color:var(--warn-ink,var(--warn));font-weight:600} .stf-src>i{font-style:normal} .stf-fix{margin-left:auto;flex:none;font:inherit;font-size:13px;padding:2px 8px;min-height:30px;border-radius:var(--r-ctl,6px);border:0;background:none;color:var(--info,var(--accent));text-decoration:underline;cursor:pointer} .stf-fix:hover{background:var(--panel2)} .stf-fix:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .stf-v>.stc-in,.stf-v>select,.stf-v>input:not([type=checkbox]):not(.stc-file){flex:1 1 220px;min-width:0;max-width:100%;font-size:14.5px} .stf-open .stf-v>.stc-in{border-width:1.5px;border-color:var(--border-interactive,var(--line2))} .stf-r.f-need{background:var(--warn-soft)} .stf-r.f-need .stf-l{background:transparent;color:var(--warn-ink,var(--warn))} .stf-r.f-need .stf-v>.stc-in{border-color:var(--warn-ink,var(--warn))} .stf-x{display:block;padding:0 12px 10px} .stf-x .stc-hti{margin-top:10px} .stf-v>.stc-rrnl{margin:0;padding:0;border:0;background:none;width:100%} .stf-v>.stc-rrnl .stc-htl{min-height:0} .stf-v .stc-xfer{display:inline-flex;align-items:flex-start;gap:6px;font-size:14px} .stf-v .stc-xfer input{flex:none;margin-top:3px} .stf-v .stc-feesrc{flex:1 1 100%} .stf-up{flex:none} .stf-memo{margin:0;padding-left:18px;width:100%;font-size:14px;line-height:1.55} .stf-foot{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:12px 16px;border-top:2px solid var(--line2,var(--line));background:var(--panel2)} .stf-foot .stc-msg{margin:0} .stf-hint{font-size:13px;min-width:0} .stf-foot>.btn{margin-left:auto;min-width:120px;min-height:40px} @media (max-width:900px){ .stf-t{grid-template-columns:minmax(0,1fr)} .stf-r:nth-child(odd):not(.w){border-right:0} .stf-t>.stf-r:last-child{border-bottom:0} } @media (max-width:600px){ .stf-head{padding:10px 12px 8px} .stf-leg{margin-left:0;flex:1 1 100%} .stf-g>legend{padding:7px 12px} .stf-r{grid-template-columns:minmax(0,1fr)} .stf-l{border-right:0;background:none;padding:8px 12px 0} .stf-v{padding:4px 12px 10px} .stf-v>.stc-in,.stf-v>select,.stf-v>input:not([type=checkbox]):not(.stc-file){flex:1 1 100%} .stf-fix{min-height:44px} .stf-foot{padding:12px} .stf-foot>.btn{width:100%;margin-left:0} } /* ── 2026-11-03 ① 수임 신청서(첫 화면 · 993n) · ② 자료 올리기(선택) · ③ 할 절차 체크(대표님 "양식 > 자료 올리기(있는거만) > 신규수임 시작") ── */ .stc-start .stf-new{margin:0} .stf-new .stf-src:empty{display:none} .stf-new .stf-v>.stf-src{flex:1 1 100%} .stf-new .stf-src .btn{margin-left:6px} .stf-new .stf-r.f-need{background:var(--warn-soft)} .stf-new .stf-foot{gap:8px 10px} .stf-new .stf-foot>.btn.ghost{margin-left:auto} .stf-new .stf-foot>.btn.ghost+.btn{margin-left:0} .stc-start>.stc-oned{margin-top:12px} .stc-askl{margin:6px 0 8px;display:block} .stc-nextl{margin:12px 0 0;display:flex;justify-content:flex-end} .stf-foot>.btn.sm.ghost{margin-left:auto;min-width:0;min-height:36px} .stf-foot>.btn.sm.ghost+.btn{margin-left:0} .stc-acd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1 1 100%;min-width:0} .stc-acd select{min-height:36px;max-width:100%;flex:0 1 150px} .stc-acd input{min-height:36px;min-width:0;flex:1 1 160px;font-size:14.5px} .stc-pks{margin:0 0 10px;border:1px solid var(--line2,var(--line));border-radius:var(--r-inner,10px);background:var(--panel)} .stc-pksh{margin:0;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14.5px;display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap} .stc-pkl{list-style:none;margin:0;padding:0} .stc-pkl>li{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;padding:6px 14px;min-height:44px;border-bottom:1px solid var(--line);font-size:14.5px} .stc-pkl>li:last-child{border-bottom:0} .stc-pkl>li>small{font-size:13px;margin-left:auto} .stc-pkl .cb{display:inline-flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;min-width:0} .stc-pkl .cb input{width:20px;height:20px;flex:none;margin:0} .stc-pkl>li.fix{color:var(--ink)} .stc-pkb{display:inline-flex;align-items:center;justify-content:center;width:20px;font-weight:700;color:var(--ok-ink,var(--ok))} .stc-pkl>li.off .stc-pkt{color:var(--text-secondary,var(--mute));text-decoration:line-through} .stc-pkl>li.dis .cb{cursor:default} .stc-mand,.stc-scd{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-inner,10px);padding:0 12px} .stc-mand>summary,.stc-scd>summary{cursor:pointer;padding:10px 0;font-size:14px;font-weight:600;min-height:24px} .stc-mand>summary small{font-weight:400} .stc-mand[open],.stc-scd[open]{padding-bottom:12px} .stc-scd .stc-scope{margin:0} @media (max-width:600px){ .stc-pkl>li{padding:6px 12px} .stc-pkl>li>small{margin-left:28px;flex:1 1 100%} .stf-new .stf-foot>.btn.ghost{margin-left:0;width:100%} .stc-acd select,.stc-acd input{flex:1 1 100%;min-height:44px} } /* 2026-11-05 시작 상자 — 같이 올릴 서류 목록(종류 고르기 · 등록증이면 상호·대표자 칸 숨김 · 대표님 "구조를 제대로 해서 병목이 없게, 중복 입력이 너무 많음") */ .stc-nf-fl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;min-width:0} .stc-nf-fl:empty{display:none} .stc-nf-fl>li{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:2px 2px 2px 4px;border:1px solid var(--line);border-radius:10px;background:var(--panel)} .stc-nf-fl select.stc-fk{min-height:32px;font-size:13px;font-weight:600;max-width:150px;border-radius:var(--r-ctl,6px)} .stc-nf-regn{margin:0;padding:6px 16px;font-size:13px;color:var(--text-secondary,var(--mute))} .stc-nf-regn:empty{display:none} @media (max-width:600px){ .stc-nf-fl>li{flex:1 1 100%} .stc-nf-fl select.stc-fk{min-height:40px;max-width:none;flex:0 1 150px} .stc-nf-regn{padding:6px 12px} } /* 2026-11-05 저녁 ① 수임 신청서 — [저장] 옆 주 단추 [신규 수임 시작](993 stFormHtml) · 맨 위 '홈택스 계정 · 수임 범위'(993n stHtAcctHtml) */ .stf-foot>#stc-fsave+#stc-fstart{margin-left:0} .stf-foot>#stc-fstart[disabled]{opacity:.6;cursor:default} .stf-htg .stc-acd{margin-top:6px} .stf-htg .stf-v>.stf-src{flex:1 1 100%} /* 2026-11-05 검토(낮음): 비밀 칸(홈택스 ID/PW·계좌·주민번호)은 type=text + 가림 글꼴 — 비밀번호 관리자가 거래처 비밀번호 저장을 묻지 않게(993n ST_SECIN) */ .stc-secin{-webkit-text-security:disc} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 79번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 995 */ #dash .sk{background:var(--sk);display:block;border-radius:var(--r-inner)} #dash .ds-sk1{width:220px;height:28px} #dash .ds-skh{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center} #dash .ds-skd{width:150px;height:150px;border-radius:50%} #dash .ds-dim{color:var(--mute);font-weight:400} #dash .ds-ic{flex:none;color:var(--dv-icon);display:block} /* 상태 모양(체크·시계·엑스·일시정지·줄표) — 996 서랍 밖에서도 쓴다 */ .ds-sg{flex:none;display:block} .ds-sg circle{stroke:none} .ds-sg path{fill:none;stroke:var(--dv-mark);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* 작은 점 하나 — 차분한 상태색(--dv-*) + 흰 모양(체크·시계·엑스) */ .ds-sg.sg-ok circle{fill:var(--dv-in)} .ds-sg.sg-late circle{fill:var(--dv-part)} .ds-sg.sg-fail circle{fill:var(--dv-miss)} .ds-sg.sg-off circle,.ds-sg.sg-none circle{fill:none;stroke:var(--border-interactive);stroke-width:1.5} .ds-sg.sg-none circle{stroke-dasharray:2.4 2} .ds-sg.sg-off path,.ds-sg.sg-none path{stroke:var(--border-interactive)} /* 머리 — 한 줄 */ #dash .ds-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px;min-width:0} #dash .ds-title{margin:0;line-height:28px;color:var(--ink)} #dash .ds-sub{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums} #dash .ds-hb{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;cursor:help} #dash .ds-head .ds-seg{margin-left:auto} /* 묶음 카드 */ #dash .ds-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card,14px);padding:16px 18px;margin:0 0 14px;min-width:0;box-shadow:none} #dash .ds-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px;min-width:0} #dash .ds-h h2{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:16px;line-height:24px;font-weight:600;color:var(--ink);white-space:nowrap} #dash .ds-none{padding:10px 0;font-size:14px;color:var(--ink-3,var(--ink2));display:flex;flex-wrap:wrap;gap:4px 8px} /* ② 수집기 — 신호등 격자 */ #dash .ds-grid2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:8px} #dash .ds-c{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:2px 10px;min-height:56px;padding:8px 12px; background:var(--panel2);border:1px solid var(--line);border-radius:12px;min-width:0} #dash .ds-ci{display:flex;align-items:center;justify-content:center} #dash .ds-cl{display:flex;flex-direction:column;min-width:0} #dash .ds-cl b{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dash .ds-ca{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap} /* 늦음·실패 — 카드 테두리는 그대로 두고 작은 배지로만 */ #dash .ds-cw{grid-column:1/-1;justify-self:start;max-width:100%;font-size:13px;line-height:20px;padding:0 8px;border-radius:999px;overflow-wrap:break-word;min-width:0} #dash .ds-c.st-fail .ds-cw{color:var(--dv-bad-ink);background:var(--dv-bad-soft);font-weight:600} #dash .ds-c.st-late .ds-cw{color:var(--dv-warn-ink);background:var(--dv-warn-soft);font-weight:600} #dash .ds-c.st-off .ds-cl b,#dash .ds-c.st-none .ds-cl b{color:var(--mute);font-weight:500} #dash .ds-pb{list-style:none;margin:10px 0 0;padding:8px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px} #dash .ds-pb li{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0} #dash .ds-pb b{font-weight:600;color:var(--ink);white-space:nowrap} #dash .ds-pb span{flex:1 1 auto;min-width:0;color:var(--ink-3,var(--ink2));overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dash .ds-pb em{font-style:normal;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums} /* ③ 자료 건수 — 작은 숫자 타일 한 줄 */ /* ④ 자료 품질 — 칩 한 줄 */ #dash .ds-qrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;min-width:0} #dash .ds-qc{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--line2);font-size:13px;color:var(--ink-3,var(--ink2));white-space:nowrap} #dash button.ds-qc{cursor:pointer} #dash button.ds-qc:hover{border-color:var(--border-interactive)} #dash .ds-qc b{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} /* 숫자는 진한 중립색, 뜻은 앞의 작은 점 하나 */ #dash .ds-qc.q-bad::before{content:"";width:7px;height:7px;border-radius:50%;flex:none} #dash .ds-qc.q-bad::before{background:var(--dv-miss)} #dash .ds-qc.q-ok{color:var(--dv-ok-ink);font-weight:600;border-color:var(--line)} /* 범위 토글 */ #dash .ds-seg{display:inline-flex;flex:none} #dash .ds-seg button{height:28px;padding:0 12px;border:0;background:transparent;font-size:13px;color:var(--mute);cursor:pointer;white-space:nowrap} /* 서랍 목록(자료 품질) — 서랍은 #dash 밖이다 */ .ds-dl{list-style:none;margin:0;padding:0} .ds-dl li+li{border-top:1px solid var(--line)} /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 80번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 990hm 990i 993b */ .cst-lh{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;padding:0 0 8px} .cst-lh h3{margin:0} @media (min-width:901px){ /* ── UI-14 CMS 회원 관리 필터 줄 — 조작 요소 높이를 하나(36px)로, 아래 줄 맞춤 ── */ #view-cmsmem .cmm-fl{align-items:flex-end} #view-cmsmem .cmm-fl>label{display:inline-flex;flex-direction:column;gap:4px;font-size:13px} #view-cmsmem .cmm-fl input,#view-cmsmem .cmm-fl select,#view-cmsmem .cmm-fl>.btn,#view-cmsmem .cmm-fl summary.btn{height:36px;min-height:36px;box-sizing:border-box} #view-cmsmem .cmm-fl summary.btn{display:inline-flex;align-items:center} } /* ── UI-15 홈 '할 일' 카드가 옆 열 높이로 늘어나 아래가 비던 것 ── */ #home3 .h3-grid{align-items:start} #home3 .h3-colL{align-self:start} #home3 .h3-colL>section.card{height:auto} /* ═══ 2026-10-08 정산 계좌 나누기(더빌 다계좌항목별금액설정) — 신규 수임 카드·CMS 신규 등록 공용 ═══ */ .cms-sp{display:flex;flex-direction:column;gap:8px;min-width:0} .cms-sp-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0} .cms-sp-r select{flex:1 1 180px;min-width:0;max-width:280px} .cms-sp-r input{flex:0 1 150px;min-width:0;width:150px;text-align:right} .cms-sp-u{font-size:14px;color:var(--mute)} .cms-sp-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px} .cms-sp-sum{color:var(--ink)} .cms-sp-ok{color:var(--ok-ink,var(--ok));font-weight:600} .cms-sp-bad{color:var(--bad-ink,var(--bad));font-weight:600} .cms-sp-h{margin:0;font-size:13px;color:var(--mute)} #cmn-split{margin:2px 0} @media (max-width:1024px){ .cms-sp-r select,.cms-sp-r input,.cms-sp .btn{min-height:44px} } @media (max-width:600px){ .cms-sp-r select{flex-basis:100%;max-width:none} .cms-sp-r input{flex:1 1 auto} } /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 81번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 990f 999a */ /* ── UI-09 팩스·메일 '쪽'·'📎' 열 — 정렬 표시까지 56px 라 52px 칸을 넘쳤다 ── */ :is(#view-mail,#view-fax) .ops-list .ops-c-pg {width:62px;min-width:62px} /* 2026-10-07 UI 개편 · a_가결산 — 이 영역 작업자만 고친다 js/999a 의 그래프(접두 ux-). 선택자는 전부 #view-anal · #view-monthly 아래. 색은 토큰만(라이트·다크 자동). */ #view-anal,#view-monthly{ --ux-c1:var(--accent-fill); /* 매출 · 납부 */ --ux-c2:var(--ink2); /* 세금계산서 · 확정 · 소득세 */ --ux-c3:var(--ok-fill); /* 공제·환급 · 세후 */ --ux-c4:var(--warn-fill); /* 인건비 · 현금영수증 */ --ux-c5:var(--chart-rest); /* 매입 · 추정 */ --ux-c6:var(--dv-unk,#C3C8CF);/* 그 밖 */ --ux-hatch:var(--panel); } #view-anal .c1,#view-monthly .c1{--uxc:var(--ux-c1)} #view-anal .c2,#view-monthly .c2{--uxc:var(--ux-c2)} #view-anal .c3,#view-monthly .c3{--uxc:var(--ux-c3)} #view-anal .c4,#view-monthly .c4{--uxc:var(--ux-c4)} #view-anal .c5,#view-monthly .c5{--uxc:var(--ux-c5)} #view-anal .c6,#view-monthly .c6{--uxc:var(--ux-c6)} /* ── 카드 묶음 ── */ #view-anal .ux-viz,#view-monthly .ux-viz{display:grid;gap:12px;margin:0 0 12px;min-width:0} #view-anal .ux-viz[hidden],#view-monthly .ux-viz[hidden]{display:none!important} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 82번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 9개: 955m 955o 955r 970 995 996 995a 999b 968 */ /* 근태 · 지난 날 퇴근을 안 찍은 기록 */ #view-attend .at-flag.miss{margin-left:0;font-size:12px;background:var(--warn-soft);color:var(--warn-ink,#8A4A0B)} @media (max-width:767px){ /* 보낸 지시가 없으면 카드째 숨김 — 위 '지시하기' 가 입구 */ /* 일정 · 휴대폰 머리 — '+ 일정 등록' 을 제목 줄 오른쪽으로 올려 한 줄을 줄인다 */ #view-sched .wht-head{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px} #view-sched .wht-head>h2{order:0;flex:1 1 auto;width:auto;max-width:none;min-width:0} #view-sched .wht-head>#btn-ev-add{order:1;margin-left:auto;min-height:44px} #view-sched .wht-head>*:not(h2):not(#btn-ev-add){order:2} #view-sched .wht-head::after{content:"";order:1;flex:0 0 100%;height:0;margin:0} } #view-fax .ops-pdf a.btn:hover,#view-fax .ops-pdf a.btn:focus-visible{text-decoration-color:currentColor;color:var(--accent-ink)!important} #view-fax .ops-pen:hover,#view-fax .ops-pen:focus-visible{color:var(--accent-ink)!important} #view-fax .ops-main .ops-none{color:var(--text-secondary);opacity:1} /* 설정 · 직원: 사무실 카드 한 줄 */ #view-settings .set-row[hidden]{display:none!important} /* 일정 오른쪽 목록 — '기한' 꼬리 글자를 빨강 대신 기한색으로(빨강은 확인 필요에만) */ #view-sched #ev-list .evitem .t {color:var(--text-secondary)!important} #view-sched #ev-list .evitem:not(.task) .t:first-child{font-weight:600} /* 팩스 ✎ 는 글자 모양으로(그림 글자로 뜨면 색을 못 입힌다) */ #view-fax .ops-pen{font-variant-emoji:text;font-family:"Segoe UI Symbol","Apple Symbols",var(--font,inherit)} /* 할 일 — 제목 옆 이름 알약은 늘 '나' 라 정보가 없다 */ /* 설정 · 휴대폰은 화면 색 스위치가 전체 메뉴 시트로 옮겨 가 이 줄이 비었다 — 빈 줄은 숨긴다 */ #view-settings .set-row:has(> #set-thm:empty){display:none!important} /* ── 최종 심사 반영(2026-09-30 밤) ── */ /* 팩스 · 요약이 없는 줄은 발신처 이름 또는 '팩스 N쪽' 을 흐린 보통 굵기로(안 읽음 줄이어도 굵게 하지 않는다) */ #view-fax .ops-main .ops-none,#view-fax .ops-list tr.new .ops-main .ops-none{font-weight:400} /* ── 자료 미리보기 · 플로우 이관 표시 (2026-09-30) ── */ #dlg-pv{max-width:min(96vw,1000px)!important;width:calc(100% - 24px)!important;max-height:94vh;display:none;flex-direction:column} .ds-dr{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:44px;padding:8px 6px;border:0;border-radius:var(--r-ctl);background:transparent;text-align:left;cursor:pointer;font:inherit;color:var(--ink)} .ds-dr:hover{background:var(--surface-3)} .ds-dr b{font-size:14px;font-weight:600} .ds-dr span{font-size:13px;color:var(--mute);overflow-wrap:anywhere} .ds-dn{margin:12px 0 0;font-size:13px;color:var(--mute)} @media (max-width:1024px){ /* 폭 */ #dash .ds-seg button,#dash button.ds-qc{min-height:44px;height:auto} } @media (max-width:900px){ #dash .ds-sec{padding:14px} #dash .ds-grid2{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} #dash .ds-head .ds-seg{margin-left:0} } @media (max-width:480px){ #dash .ds-c{padding:8px 10px;gap:2px 8px} } /* 2026-10-02 블로그·유튜브·인스타 수치 폐기 — 대표실 맨 위 줄을 보이지 않게 */ #sboard{display:none!important} /* 2026-10-07 외부 점검 — 수집기 상태 종류: 수동 반입 대기(사람이 올릴 자료) · 사용 안 함(일부러 끈 수집) */ .ds-sg.sg-wait circle{fill:none;stroke:var(--dv-part);stroke-width:1.6} .ds-sg.sg-wait path{stroke:var(--dv-warn-ink)} #dash .ds-c.st-wait .ds-cw{color:var(--dv-warn-ink);background:var(--dv-warn-soft);font-weight:600} #dash .ds-cnt-k{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--text-secondary,var(--mute));white-space:nowrap;font-variant-numeric:tabular-nums} #dash .ds-cnt-k b{font-weight:700;color:var(--ink)} #dash .ds-cnt-k.k-wait b{color:var(--dv-warn-ink)} /* ═══ 2026-10-08 대표 "메인 너무 난잡" 정리 ═══ 큰 덩어리 4개: AI 요약(손댈 곳) · 수집기(한 줄) · 거래처 수집(어디까지 왔나) · 손볼 곳(위멤버스 미수집 0곳 한 줄 + 시트 누락)을 한 줄에 나란히. 위멤버스 미수집이 1곳 이상이면 목록이 길어지므로 그때는 전체 폭. */ #dash{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;align-items:start} #dash>*{grid-column:1/-1;min-width:0} #dash>.wn.wn-z,#dash>.wn.wn-z+.ds-sh{grid-column:auto} #dash>.wn.wn-z:last-child{grid-column:1/-1} #dash .wn.wn-z .ds-h{margin-bottom:0} #dash .wn.wn-z .wn-wait{margin-top:10px} #dash .bf-st .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} @media (max-width:1100px){ #dash>.wn.wn-z,#dash>.wn.wn-z+.ds-sh{grid-column:1/-1} } #dash>section.ds-sec,#dash>.ds-head{margin-bottom:0} #dash>.wn.wn-z,#dash>.wn.wn-z+.ds-sh{align-self:stretch} #dash .wn.wn-z .wn-wait summary .wn-n{display:none} #dash>.ds-head+section.ds-sec{margin-top:0} /* ═══ 거래처 수집 (2026-10-07) — js/996_수집_점검.js 와 1:1 (접두 cv-, 현황판 ds- 틀 안) ═══ 큰 원(다 들어옴/빠진 곳/모름) + 원천 5가지 누적 막대. 색만으로 가르지 않는다 — 들어옴 꽉 참 · 일부 사선 · 없음 반대 사선 · 모름 세로줄 · 해당 없음 빈 칸. */ #dash .cv .ds-h .cv-tier{margin-left:auto} #dash .cv-tier .cv-n{font-variant-numeric:tabular-nums;font-weight:500;margin-left:2px} #dash .cv-i{font-size:14px;color:var(--mute);cursor:help;line-height:1} #dash .cv-grid{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr);gap:12px 28px;align-items:center} /* 원 */ #dash .cv-dn{width:112px;height:112px;flex:none;display:block} /* 색은 995 머리의 --dv-* 토큰만 — 들어옴·빠진 곳은 꽉 찬 색, 모름은 옅은 회색에 가는 세로줄 */ #dash .cv-dn circle{fill:none;stroke-width:16} #dash button.cv-lg-b{cursor:pointer} #dash button.cv-lg-b:hover{background:var(--surface-3)} #dash .cv-go{color:var(--mute)} /* 누적 막대 */ #dash .cv-b{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) minmax(84px,auto);align-items:center;gap:6px 14px;width:100%;min-height:32px; padding:2px 8px;border:0;background:transparent;text-align:left;min-width:0} #dash button.cv-b{cursor:pointer} #dash button.cv-b:hover{background:var(--surface-3)} /* 무늬 견본(막대 조각 · 범례 · 서랍 공통) */ .cv-sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none} .cv-sw.s-in {background:var(--dv-in)} .cv-sw.s-part {background:repeating-linear-gradient(135deg,transparent 0 3px,var(--dv-hatch) 3px 4px),var(--dv-part)} .cv-sw.s-miss {background:var(--dv-miss)} .cv-sw.s-unk {background:repeating-linear-gradient(90deg,var(--dv-unk-line) 0 1px,var(--dv-unk) 1px 4px)} .cv-sw.s-na{background:var(--dv-track);box-shadow:inset 0 0 0 1px var(--line2)} /* 서랍 — #dash 밖(#drw) */ .cv-dw .cv-dk{margin:0 0 12px;font-size:13px;color:var(--mute);line-height:1.6} .cv-lg{display:inline-flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px} .cv-tb{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums} .cv-tb thead th{position:sticky;top:-14px;z-index:1;background:var(--panel);font-size:13px;font-weight:600;color:var(--mute);text-align:center;padding:6px 2px;border-bottom:1px solid var(--line2,var(--line));white-space:nowrap} .cv-tb thead th:first-child{text-align:left;} .cv-tb thead th.hl{color:var(--ink)} .cv-tb tbody th,.cv-tb td{border:0} .cv-tb tbody tr+tr>*{border-top:1px solid var(--line)!important} .cv-tb tbody th{text-align:left;font-weight:400;padding:0;min-width:0} .cv-tb td{text-align:center;padding:4px 2px;font-size:14px;} .cv-nm{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:44px;padding:6px 4px;border:0;border-radius:var(--r-ctl);background:transparent;text-align:left;cursor:pointer;font:inherit;color:var(--ink);min-width:0} .cv-nm:hover{background:var(--surface-3)} .cv-nm:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px} .cv-nm b{font-size:14px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cv-nm span{font-size:13px;color:var(--mute);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 서랍 칸 표시 — 색만으로 가르지 않는다(글자 + 모양) */ .cv-c{display:inline-flex;align-items:center;gap:4px;font-size:14px;line-height:20px;white-space:nowrap} .cv-cl{width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)} .cv-c.s-in{color:var(--ink-3,var(--ink2))} .cv-c.s-in .cv-cl{background:var(--dv-in)} .cv-c.s-part{color:var(--dv-warn-ink);font-weight:600} .cv-c.s-part .cv-cl{background:transparent;border:2px solid var(--dv-part);width:9px;height:9px} .cv-c.s-miss{color:var(--dv-bad-ink);font-weight:700} .cv-c.s-miss .cv-cl{background:var(--dv-miss);border-radius:2px} .cv-c.s-unk{color:var(--mute);font-weight:600} .cv-c.s-unk .cv-cl{background:transparent;border:2px dashed var(--dv-unk-line);width:9px;height:9px} .cv-c.s-na{color:var(--mute)} .cv-c.s-na .cv-cl{display:none} .cv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:1100px){ /* 폭 */ #dash .cv-grid{grid-template-columns:minmax(0,1fr)} } @media (max-width:1024px){ #dash button.cv-b,#dash button.cv-lg-b,#dash .cv-tier button{min-height:44px;height:auto} } @media (max-width:640px){ #dash .cv .ds-h .cv-tier{margin-left:0} #dash .cv-b{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:6px 6px} /* 서랍 표는 거래처 한 줄 + 다섯 칸 한 줄 */ .cv-tb thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .cv-tb,.cv-tb tbody{display:block} .cv-tb tbody tr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:4px 0} .cv-tb tbody tr+tr{border-top:1px solid var(--line)} .cv-tb tbody tr>th,.cv-tb tbody tr>td{border:0!important} .cv-tb tbody th{grid-column:1/-1} .cv-tb td{display:flex;flex-direction:column;align-items:center;gap:0;padding:2px 0 6px} .cv-tb td::before{content:attr(data-l);font-size:13px;color:var(--mute);line-height:18px} } /* 2026-10-07 수집 현황 정리 — 카드 여백을 줄인다(원 112px · 막대 줄 32px) */ #dash .cv{padding:14px 18px} #dash .cv .ds-h{margin-bottom:8px} @media (max-width:640px){ #dash .cv-dn{width:104px;height:104px} } /* 2026-10-07 평가: '확인 필요(주황)' 를 '없음(빨강)' 과 나눠 센다 */ /* 2026-10-07 평가: 수집기 '자세히' 칸에 상태 글자가 없던 것(정상·꺼짐·기록 없음은 아이콘뿐) — 글자로도 적는다 */ #dash .ds-grid2 .ds-c:not(:has(.ds-cw))::after{grid-column:1/-1;justify-self:start;font-size:13px;line-height:20px;color:var(--mute);padding:0 8px} #dash .ds-grid2 .ds-c.st-ok:not(:has(.ds-cw))::after{content:"정상";color:var(--ok-ink)} #dash .ds-grid2 .ds-c.st-off:not(:has(.ds-cw))::after{content:"꺼짐"} #dash .ds-grid2 .ds-c.st-none:not(:has(.ds-cw))::after{content:"기록 없음"} /* 2026-10-07 외부 점검 — 판정 기준을 그래프 위에 늘 · 플로우 미분류 자료를 예외 줄로 */ #dash .cv-basis{margin:2px 0 10px;font-size:13px;color:var(--text-secondary,var(--mute));line-height:1.5} #dash .cv-basis b{font-weight:600;color:var(--ink)} #dash .cv-ex{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)} #dash .cv-ex-b{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:32px;padding:4px 10px;border:1px solid var(--border-interactive,var(--line2));border-radius:10px;background:transparent;color:var(--ink);font-size:14px;cursor:pointer;text-align:left} #dash .cv-ex-b:hover{background:var(--surface-3)} #dash .cv-ex-b b{font-weight:700;font-variant-numeric:tabular-nums} #dash .cv-ex-b small{font-size:13px;color:var(--text-secondary,var(--mute))} @media (max-width:1024px){ #dash .cv-ex-b{min-height:44px} } /* 2026-10-08 평가 3차: 서랍 칸 글자가 옆 칸을 덮던 것(긴 이름이 nowrap+hidden 으로 잘림) — 칸에는 짧은 이름(vs)을 쓰고 줄바꿈도 허용 */ .cv-tb td{white-space:normal;overflow:visible} .cv-tb td .cv-c{white-space:normal;line-height:18px;max-width:100%;word-break:keep-all;overflow-wrap:break-word;justify-content:center} .cv-dw .cv-path{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:var(--surface-3,var(--bg));font-size:13px;line-height:1.55;color:var(--ink)} .cv-tb thead th:first-child{width:30%} .cv-tb td .cv-c{font-size:13px} /* 2026-10-08 원천세 시트 규칙 설명(서랍) */ .cv-dw .cv-rule{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--text-secondary,var(--mute))} /* 2026-10-08 위멤버스 미수집 기장 거래처 카드(996 wnHtml) */ #dash .wn .wn-c{color:var(--bad-ink,var(--bad));font-variant-numeric:tabular-nums} #dash .wn .wn-s{font-size:13px;color:var(--text-secondary,var(--mute))} #dash .wn .wn-todo{margin:4px 0 12px;padding:8px 12px 8px 30px;border-radius:10px;background:var(--surface-3,var(--bg));font-size:14px;line-height:1.6;color:var(--ink)} #dash .wn .wn-gs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 16px} #dash .wn .wn-g{min-width:0} #dash .wn .wn-o{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink)} #dash .wn .wn-n{font-weight:400;color:var(--text-secondary,var(--mute));font-variant-numeric:tabular-nums} #dash .wn .wn-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} #dash .wn .wn-r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;width:100%;min-height:36px;padding:6px 10px;border:1px solid var(--border-interactive,var(--line2));border-radius:10px;background:transparent;color:var(--ink);text-align:left;cursor:pointer} #dash .wn .wn-r:hover{background:var(--surface-3)} #dash .wn .wn-r b{grid-column:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dash .wn .wn-r span:not(.cv-go){grid-column:1;font-size:13px;color:var(--text-secondary,var(--mute))} #dash .wn .wn-r .cv-go{grid-column:2;grid-row:1/span 2} @media (max-width:1024px){ #dash .wn .wn-r{min-height:44px} } /* 10차 평가 2: 아직 자료가 올 수 없는 곳(개업 직후·사업자번호 없음) — 회색 참고 묶음 */ #dash .wn .wn-wait{margin-top:12px;border-top:1px dashed var(--line2,var(--line));padding-top:8px} #dash .wn .wn-wait>summary{cursor:pointer;min-height:32px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;color:var(--text-secondary,var(--mute))} #dash .wn .wn-wait>summary b{color:var(--ink);font-weight:600} #dash .wn .wn-wait .wn-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 16px;margin-top:6px} #dash .wn .wn-rw{border-style:dashed;background:transparent} #dash .wn .wn-rw b{font-weight:500;color:var(--text-secondary,var(--mute))} #dash .wn .wn-c.z{color:var(--text-secondary,var(--mute))} @media (max-width:1024px){ #dash .wn .wn-wait>summary{min-height:44px} } #dash .wn .wn-wait>summary::-webkit-details-marker{display:none} #dash .wn .wn-wait>summary::before{content:"\25B8";font-size:12px;color:var(--text-secondary,var(--mute))} #dash .wn .wn-wait[open]>summary::before{content:"\25BE"} @media (min-width:901px){ /* 2026-10-08 대표 "메인 난잡" — 할 일 3단계를 한 줄 흐름(① → ② → ③)으로 · 좁은 화면은 그대로 세로 */ #dash .wn .wn-todo{display:flex;flex-wrap:wrap;gap:2px 0;padding:6px 12px;list-style:none;counter-reset:wt;font-size:13.5px;color:var(--ink2)} #dash .wn .wn-todo li{counter-increment:wt} #dash .wn .wn-todo li::before{content:counter(wt) ". ";font-weight:700;color:var(--ink)} #dash .wn .wn-todo li+li::before{content:" → " counter(wt) ". "; white-space:pre} } /* ═══ 수집 현황 정리 (2026-10-07) — js/995a_한눈_요약.js · js/995 의 수집기 한 줄 · 시트 누락 감지 ═══ 색은 토큰만(999z 가 다시 정의) — 라이트·다크 둘 다 같은 규칙. 글자 4.5:1 이상인 -ink 토큰만 글자에 쓴다. */ /* ── 한눈 요약 (2026-10-07 저녁 정리: 숫자 4칸 + 먼저 볼 곳 5줄, 꼬리표 대신 점 하나) ── */ #dash .bf{padding:16px 20px 12px;} #dash .bf .bf-h{margin-bottom:10px} #dash .bf .ds-h h2{font-size:17px;cursor:help} #dash .bf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 6px;overflow:hidden} #dash .bf-st{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"l l" "v s";align-items:baseline;column-gap:8px;row-gap:2px;min-width:0;min-height:64px;padding:10px 16px;border:0;border-left:1px solid var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer} #dash .bf-st:first-child{border-left:0} #dash .bf-st .l{grid-area:l;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} #dash .bf-st b{grid-area:v;font-size:20px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap} #dash .bf-st .s{grid-area:s;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums} #dash .bf-st:hover:not(:disabled){background:var(--surface-3)} #dash .bf-st:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px} #dash .bf-st.zero{cursor:default} #dash .bf-st.zero b{color:var(--mute);font-weight:600} #dash .bf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} #dash .bf-list{margin-top:4px} .bf-go{display:grid;align-items:center;gap:12px;width:100%;min-height:40px; padding:6px 10px;border:0!important;border-radius:var(--r-ctl);background:transparent;text-align:left;cursor:pointer;font:inherit;color:var(--ink)} .bf-list .bf-it{border-top:1px solid var(--line)} .bf-list .bf-it:first-child{border-top:0} .bf-go:hover{background:var(--surface-3)} .bf-go:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px} .bf-nm{min-width:0;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bf-nm small{margin-left:8px;font-size:13px;font-weight:400;color:var(--mute)} .bf-rs{min-width:0;font-size:14px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bf-rs small{margin-left:8px;font-size:13px;color:var(--mute)} .bf-to{font-size:16px;color:var(--mute);text-align:right} #dash .bf-all{display:inline-flex;align-items:center;min-height:32px;margin:4px 0 0 0;padding:0 10px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--accent-ink);font-size:13.5px;font-weight:600;cursor:pointer} #dash .bf-all:hover{background:var(--accent-soft)} #dash .bf-ok{margin:8px 2px 2px;font-size:14px;color:var(--mute)} /* ── 수집기 한 줄 · 시트 누락 감지 머리 ── */ #dash .ds-cg,#dash .ds-sh{padding:12px 16px} #dash .ds-cline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;min-width:0} #dash .ds-clh{display:inline-flex;align-items:center;gap:6px;margin:0 4px 0 0;font-size:15px;line-height:22px;font-weight:600;color:var(--ink);white-space:nowrap} #dash .ds-cok{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap} #dash .ds-cok b{font-weight:700;color:var(--ink)} #dash .ds-pc{display:inline-flex;align-items:center;gap:6px;padding:0 10px 0 6px;font-size:13px;white-space:nowrap;cursor:help;max-width:100%} #dash .ds-pc b{font-weight:700} #dash .ds-pc>span{overflow:hidden;text-overflow:ellipsis;min-width:0} #dash .ds-pc.st-fail{background:var(--dv-bad-soft);color:var(--dv-bad-ink)} #dash .ds-pc.st-off,#dash .ds-pc.st-none{background:var(--surface-3);color:var(--mute)} #dash .ds-more-b{display:inline-flex;align-items:center;gap:4px;margin-left:auto;min-height:30px;padding:0 10px;border:1px solid var(--line2);font-size:13px;font-weight:600;color:var(--ink-3,var(--ink2));cursor:pointer;white-space:nowrap} #dash .ds-more-b:hover{border-color:var(--border-interactive)} #dash .ds-more{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} #dash .ds-more[hidden]{display:none} #dash .ds-m0{margin:0 0 8px;font-size:13px;color:var(--mute)} #dash .ds-more .ds-c{min-height:48px} #dash .ds-cnts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px} #dash .ds-cnts-h{font-size:13px;font-weight:600;color:var(--mute);margin-right:4px} #dash .ds-cn{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid var(--line);font-size:13px;color:var(--mute)} #dash .ds-cn b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} #dash button.ds-cn{cursor:pointer} #dash button.ds-cn:hover{border-color:var(--border-interactive)} #dash .ds-m1{font-size:13px;color:var(--mute);min-width:0;cursor:help} #dash .ds-sh .ds-qrow{margin:10px 0 0} #dash .ds-qc.q-all{margin-left:auto;border-color:var(--line2);background:var(--panel2)} #dash .ds-qc.q-all b{color:var(--ink)} .ds-dn0{margin:0 0 10px!important;line-height:1.6} .ds-dn0 b{color:var(--ink)} /* 비서가 한 일 — 기록이 없으면 한 줄 */ #view-main .act-card.act-empty{padding:12px 16px} #view-main .act-card.act-empty .ds-h{margin:0} #view-main .act-card.act-empty .ds-h h2{font-size:15px} .act-e0{font-size:13px;color:var(--mute)} #view-main .act-card .ds-h h2{white-space:nowrap} @media (max-width:1024px){ /* 폭 */ #dash .bf-go{min-height:48px} #dash .ds-more-b,#dash .ds-pc,#dash button.ds-cn,#dash .bf-all{min-height:44px} } @media (max-width:760px){ .bf-go{gap:4px 10px;padding:8px 6px} .bf-rs{grid-column:2/3;grid-row:2;white-space:normal} .bf-to{grid-column:3;grid-row:1/3} #dash .bf{padding:14px} #dash .bf-st{min-height:56px} #dash .ds-more-b{margin-left:0} #dash .ds-qc.q-all{margin-left:0} #dash .ds-m1{flex-basis:100%} } /* ═══ 2026-10-07 밤 · AI 요약(열고 닫기 · 사람 말투 2~3줄 · 체크 표시) ═══ */ #dash .bf .bf-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #dash .bf .bf-h h2{display:inline-flex;align-items:center;gap:6px} #dash .bf-ai path{fill:var(--accent-fill)} #dash .bf-tg{margin-left:auto;min-height:30px;padding:0 12px;border:1px solid var(--line2);border-radius:999px;font:inherit;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer} #dash .bf-tg:hover{border-color:var(--border-interactive)} #dash .bf-tg:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} #dash .bf.shut{padding-bottom:16px} #dash .bf.shut .bf-h{margin-bottom:0} #dash .bf-st.hot b{color:var(--warn-ink)} .bf-go{grid-template-columns:16px minmax(120px,240px) minmax(0,1fr) 14px} @media (max-width:760px){ .bf-go{grid-template-columns:16px minmax(0,1fr) 14px} } @media (max-width:1024px){ /* 2026-10-07 평가: 예측이라는 사실을 한 줄로 */ #dash .bf-tg{min-height:44px} } @media (max-width:760px){ /* ═══ 2026-10-08 대표 "메인 너무 난잡" — 휴대폰: 숫자 3칸 한 줄 · 이유는 두 줄까지 · 수집기 칩은 이름만(상태는 아이콘·툴팁) ═══ */ #dash .bf-stats{grid-template-columns:repeat(3,minmax(0,1fr))} #dash .bf-st{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "v" "s";padding:8px 10px} #dash .bf-st:nth-child(3){border-left:1px solid var(--line)} #dash .bf-st:nth-child(n+3){border-top:0} #dash .bf-st b{font-size:18px} #dash .bf-list .bf-rs{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} #dash .ds-cg .ds-pc>span{display:none} #dash .ds-cg .ds-pc{padding:0 12px 0 8px} } /* 2026-10-07 UI 개편 · b_수집자료 — 이 영역 작업자만 고친다 js/999b 와 1:1 (접두 bv-). 거래처 360 머리 지표 · 개요 카드 작은 그림 · 거래처 정보 분포 · 팩스 일별 수신. 색은 토큰만: 수량은 중립(--ink2 · 빗금 --border-interactive · 전년 점선 --faint), 상태는 --dv-*(css/995 의 :root 토큰), 눈길을 끌어야 하는 것(안 읽은 팩스)만 --accent. 되돌리려면 이 파일과 js/999b 를 비우면 된다. */ :is(#view-c360,#view-files,#view-fax){ --bv-hl:rgb(255 255 255/.55); --bv-track:var(--dv-track,#EEF0F3); --bv-flow:var(--info-fill); --bv-box:var(--ok-fill); --bv-fax:var(--warn-fill); --bv-mail:var(--chart-rest); --bv-pdf:var(--accent-fill); --bv-img:var(--info-fill); --bv-doc:var(--ok-fill); --bv-etc:var(--chart-rest); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(#view-c360,#view-files,#view-fax){--bv-hl:rgb(0 0 0/.35)} } :root[data-theme="dark"] :is(#view-c360,#view-files,#view-fax){--bv-hl:rgb(0 0 0/.35)} #view-flreq .frq-head select[hidden]{display:none} /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 83번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 998 999m */ .act-card .ds-h h2,.act-card .ds-h h3{margin:0;font-size:17px} .act-n{font-variant-numeric:tabular-nums;color:var(--text-secondary,var(--mute));font-size:14px} .act-who{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .act-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px} .act-list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .act-list li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:baseline;font-size:14px} .act-t{font-variant-numeric:tabular-nums;color:var(--text-secondary,var(--mute));font-size:13px} .act-k{font-weight:600} .act-w{min-width:0;overflow-wrap:anywhere} .act-b{color:var(--text-secondary,var(--mute));font-size:13px} .arq-card{margin-bottom:16px} @media (max-width:767px){ .act-list li{grid-template-columns:auto minmax(0,1fr);} .act-t,.act-b{font-size:13px} } #view-main:has(>#dash)>#act-card{display:block!important} /* 4번 줄 감추기 규칙의 예외 — 비서가 한 일 */ /* 2026-10-08 메인 정리: 오늘 기록이 없으면 카드 자체를 숨긴다(998 js 가 hidden) — 위 예외 규칙보다 우선 */ #view-main:has(>#dash)>#act-card[hidden]{display:none!important} /* 2026-10-16 대표실 '비서 사용'(999m) — 시스템 칸 안 접는 줄의 작은 표 · 색 없음 */ #admin-kituse .ku-t,#admin-aiuse .ku-t{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px} #admin-kituse .ku-t th,#admin-kituse .ku-t td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} #admin-kituse .ku-t tr:last-child td{border-bottom:0} #admin-kituse .ku-t th{color:var(--mute);font-weight:600;font-size:12px} #admin-kituse .ku-t .r{text-align:right} #admin-kituse .ku-c{color:var(--mute);font-size:12px} @media (max-width:600px){ #admin-kituse .ku-t{font-size:12.5px} #admin-kituse .ku-c{display:none} } /* 2026-10-20 '옛 판'만 주황 글자(할 일 — 데스크 패치) · '7일 넘게 안 씀'은 흐린 글자(문제 아님) */ #admin-kituse .ku-old{color:var(--warn);font-weight:700;font-size:12px} #admin-kituse .ku-idle{color:var(--mute);font-size:12px} #admin-aiuse .ku-t{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px} #admin-aiuse .ku-t th,#admin-aiuse .ku-t td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} #admin-aiuse .ku-t th{color:var(--mute);font-weight:600;font-size:12px} #admin-aiuse .ku-t .r{text-align:right} /* 2026-10-17 '자동 처리 성공률'(999m okRateRow) — 같은 작은 표 · 90% 미만 줄의 성공률만 주황(--warn) · 그 밖 색 없음 */ #admin-okrate .ok-t{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px} #admin-okrate .ok-t th,#admin-okrate .ok-t td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:normal;overflow-wrap:anywhere} #admin-okrate .ok-t tr:last-child td{border-bottom:0} #admin-okrate .ok-t th{color:var(--mute);font-weight:600;font-size:12px;white-space:nowrap} #admin-okrate .ok-t .r{text-align:right;white-space:nowrap} #admin-okrate .ok-sub{display:block;color:var(--mute);font-size:12px;margin-top:1px} #admin-okrate .ok-t tr.low .ok-p{color:var(--warn);font-weight:700} #admin-okrate .ok-why{margin-top:6px} @media (max-width:600px){ #admin-okrate .ok-t{font-size:12.5px} #admin-okrate .ok-t th,#admin-okrate .ok-t td{padding:5px 4px} } /* 2026-10-20 홈 맨 위 '내 비서 도구가 옛 판' 띠(999m kitBandPaint) — 주의 한 군데만 색(--warn) · 나머지 기본 */ #kit-band{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;padding:8px 12px;border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:10px;background:var(--card,transparent);font-size:13.5px} #kit-band .kb-t{flex:1 1 320px;min-width:0} #kit-band .kb-t b:first-child{color:var(--warn)} #kit-band .kb-s{flex:1 1 100%;order:3;color:var(--mute);font-size:12px} @media (max-width:600px){ #kit-band{font-size:13px} #kit-band .kb-s{display:none} } /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 84번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 999a 999zzz */ #view-anal .ux-an-viz{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr)} #view-monthly .ux-mo-viz:not(:has(.ux-c-dn)){grid-template-columns:minmax(0,1fr)} #view-anal .ux-c,#view-monthly .ux-c{padding:16px 18px;min-width:0;margin:0} #view-anal .ux-h,#view-monthly .ux-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 10px} #view-anal .ux-h h3,#view-monthly .ux-h h3{margin:0;font-size:15px;font-weight:700} #view-anal .ux-sub,#view-monthly .ux-sub{font-size:13px;font-weight:400;color:var(--mute)} #view-anal .detail-head .ux-sub{margin-left:6px} #view-anal .ux-note,#view-monthly .ux-note{font-size:13.5px;color:var(--mute);padding:8px 0;line-height:1.5} #view-anal .ux-tag{display:inline-flex;align-items:center;font-size:13px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--surface-3);color:var(--ink2);font-style:normal;white-space:nowrap} #view-anal .ux-tag.ok{background:var(--ok-soft);color:var(--ok-ink)} /* ── SVG 공통 ── */ #view-anal .ux-svg,#view-monthly .ux-svg{display:block;max-width:100%;overflow:visible;font-family:inherit} #view-anal [data-ux],#view-monthly [data-ux]{min-width:0;width:100%} #view-anal .ux-grid,#view-monthly .ux-grid{stroke:var(--line2);stroke-width:1} #view-anal .ux-grid.base,#view-monthly .ux-grid.base{stroke:var(--border-interactive)} #view-anal .ux-ax,#view-monthly .ux-ax, #view-anal .ux-xl,#view-monthly .ux-xl, #view-anal .ux-xs,#view-monthly .ux-xs{fill:var(--mute);font-size:13px;font-variant-numeric:tabular-nums} #view-anal .ux-xl.part,#view-monthly .ux-xl.part{font-style:italic} #view-anal .ux-bar.s,#view-monthly .ux-bar.s{fill:var(--ux-c1)} #view-anal .ux-bar.b,#view-monthly .ux-bar.b{fill:var(--ux-c5)} #view-anal .ux-bar.s.fill,#view-monthly .ux-bar.s.fill{fill:var(--ux-c1);opacity:.55} #view-anal .ux-hl,#view-monthly .ux-hl{stroke:var(--ux-hatch);stroke-width:2.4;opacity:.75} #view-anal .ux-hit,#view-monthly .ux-hit{fill:transparent} #view-anal .ux-col:hover .ux-hit,#view-monthly .ux-col:hover .ux-hit{fill:var(--surface-3);opacity:.45} #view-anal .ux-ln,#view-monthly .ux-ln{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-dasharray:5 4;stroke-linejoin:round} #view-anal .ux-lnp,#view-monthly .ux-lnp{fill:var(--panel);stroke:var(--ink);stroke-width:1.6} /* 범례 */ #view-anal .ux-leg,#view-monthly .ux-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:13px;color:var(--mute)} #view-anal .ux-leg span,#view-monthly .ux-leg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} #view-anal .ux-leg i,#view-monthly .ux-leg i, #view-anal .ux-sl i,#view-monthly .ux-sl i{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--uxc,var(--ux-c6));flex:none} #view-anal .ux-leg i.ux-lnk,#view-monthly .ux-leg i.ux-lnk{height:0;border-radius:0;border-top:2px dashed var(--ink);background:none;width:16px} /* 빗금(추정) — 색만으로 뜻을 전하지 않는다 */ #view-anal i.est,#view-monthly i.est, #view-anal .ux-stk i.est,#view-monthly .ux-stk i.est{background-image:repeating-linear-gradient(45deg,transparent 0 3px,color-mix(in srgb,var(--ux-hatch) 72%,transparent) 3px 5.5px)} /* ── 100% 막대 ── */ #view-anal .ux-stk,#view-monthly .ux-stk{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-3);gap:2px} #view-anal .ux-stk i,#view-monthly .ux-stk i{display:block;height:100%;background-color:var(--uxc,var(--ux-c6));min-width:3px} #view-anal .ux-sl,#view-monthly .ux-sl{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px;font-size:13.5px;min-width:0} #view-anal .ux-sl li,#view-monthly .ux-sl li{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;align-items:center;gap:8px;min-width:0} #view-anal .ux-sl .k,#view-monthly .ux-sl .k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)} #view-anal .ux-sl b,#view-monthly .ux-sl b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right} #view-anal .ux-sl .p,#view-monthly .ux-sl .p{min-width:52px;text-align:right;color:var(--mute);font-variant-numeric:tabular-nums} #view-anal .ux-est{font-style:normal;font-size:13px;color:var(--mute);border:1px solid var(--line2);border-radius:999px;padding:0 6px;margin-left:2px} /* ── 도넛 ── */ #view-anal .ux-dnw,#view-monthly .ux-dnw{display:flex;align-items:center;gap:16px;min-width:0} #view-anal .ux-dnw .ux-sl,#view-monthly .ux-dnw .ux-sl{flex:1 1 auto;margin:0} #view-anal .ux-dn,#view-monthly .ux-dn{flex:none} #view-anal .ux-dp,#view-monthly .ux-dp{fill:var(--uxc,var(--ux-c6));stroke:var(--panel);stroke-width:1.5} #view-anal .ux-dtrack,#view-monthly .ux-dtrack{stroke:var(--surface-3)} #view-anal .ux-dc,#view-monthly .ux-dc{fill:var(--ink);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums} #view-anal .ux-dcs,#view-monthly .ux-dcs{fill:var(--mute);font-size:13px} /* ── 목록 · 세부담 큰 곳 ── */ /* 표 안 막대 — 숫자 아래 가는 줄(같은 쪽 안 크기 비교) */ /* ── 상세 ── */ #view-anal .ux-wl{fill:var(--ink2);font-size:13.5px} #view-anal .ux-wl.b,#view-anal .ux-wv.b{fill:var(--ink);font-weight:700} #view-anal .ux-wv{fill:var(--ink);font-size:13.5px;font-variant-numeric:tabular-nums} #view-anal .ux-wr.st .ux-wb{fill:var(--ux-c2)} #view-anal .ux-wr.mn .ux-wb{fill:var(--ux-c3)} #view-anal .ux-wr.adj .ux-wb{fill:var(--ux-c5)} #view-anal .ux-wr.tot .ux-wb{fill:var(--ux-c1)} #view-anal .ux-wr.tot.ref .ux-wb{fill:var(--ux-c3)} #view-anal .ux-wc{stroke:var(--border-interactive);stroke-dasharray:2 3} #view-anal .ux-sh{margin:14px 0 4px;font-size:13.5px;font-weight:700;color:var(--ink2)} #view-anal .ux-sh .ux-sub{margin-left:6px} #view-anal .ux-cost .ux-st{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 8px;font-size:13.5px;color:var(--ink2)} #view-anal .ux-cost .ux-st b{color:var(--ink);font-size:15px} #view-anal .ux-cost .ux-sl{margin:8px 0 12px} /* ── 월별: 강도 표시(거래처×월) — 숫자는 그대로, 바탕만 그 거래처 최대 달 대비 ── */ #view-monthly.ux-heat #mo-rows td.mo-num{background-color:color-mix(in srgb,var(--ux-c1) calc(var(--ux-h,0) * 30%),transparent)} #view-monthly.ux-heat #mo-rows td.mo-num.ux-hn{background-color:color-mix(in srgb,var(--bad-fill) calc(var(--ux-h,0) * 26%),transparent)} #view-monthly #ux-mo-heat[aria-pressed="false"]{color:var(--mute)} @media (max-width:1180px){ /* ── 반응형 ── */ #view-anal .ux-an-viz{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #view-monthly .ux-mo-viz{grid-template-columns:minmax(0,1fr)} } @media (max-width:767px){ #view-anal .ux-an-viz{grid-template-columns:minmax(0,1fr)} #view-anal .ux-c,#view-monthly .ux-c{padding:14px} #view-anal .ux-dnw,#view-monthly .ux-dnw{gap:12px} #view-anal .ux-dn,#view-monthly .ux-dn{width:96px;height:96px} } @media (max-width:1024px){ #view-monthly #ux-mo-heat{min-height:44px} } @media print{ #view-anal .ux-viz,#view-monthly .ux-viz{display:none!important} } /* ── 접기 · 보조 ── */ #view-anal .ux-h .ux-fold,#view-monthly .ux-h .ux-fold{margin-left:auto;flex:none} #view-anal .ux-viz.folded,#view-monthly .ux-viz.folded{grid-template-columns:minmax(0,1fr)} #view-anal .ux-folded,#view-monthly .ux-folded{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:8px 12px 8px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:13.5px;color:var(--ink2)} #view-anal .ux-folded b{color:var(--ink);font-variant-numeric:tabular-nums} #view-anal .ux-c-dn .ux-sl .p,#view-monthly .ux-c-dn .ux-sl .p{min-width:44px} #view-monthly .ux-c-dn .ux-sl li{grid-template-columns:12px minmax(4.5em,1fr) auto auto} #view-monthly .legend2 #ux-mo-heat{display:inline-flex;align-items:center;gap:6px;margin-right:10px;vertical-align:middle} #view-monthly .ux-hk{display:inline-block;width:28px;height:10px;border-radius:3px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ux-c1) 30%,transparent));border:1px solid var(--line2)} #view-monthly #ux-mo-heat[aria-pressed="false"] .ux-hk{background:none} /* 촘촘하게 — 표가 덜 밀리도록 */ #view-anal .ux-an-viz .ux-c{padding:14px 16px} #view-anal .ux-an-viz .ux-h{margin-bottom:8px} @media (min-width:1181px){ #view-monthly .ux-mo-viz{grid-template-columns:minmax(0,1.9fr) minmax(0,1.15fr)} } #view-anal .ux-sl .p,#view-monthly .ux-sl .p,#view-anal .ux-sl b,#view-monthly .ux-sl b{white-space:nowrap} @media (max-width:1024px){ #view-anal .ux-fold,#view-monthly .ux-fold{min-height:44px} } @media (min-width:1025px){ #view-anal .ux-fold,#view-monthly .ux-fold,#view-monthly #ux-mo-heat{min-height:28px} } /* ═══ 2026-10-07 거래처 분석 목록 정리 — 위 그래프·합계 타일을 빼고 '거르기 칩' + 실용 6열 표(js/190 anFilterBar · an-v2) ═══ 칩 숫자 = 누르면 남는 목록 길이. 표: 거래처 / 다음 부가세(얼마·언제) / 직전 대비 / 연 소득·법인세 / 근거 / 확인할 점. */ #view-anal #anal-stats.an-fbar{padding:0;min-width:0} #view-anal #anal-stats.an-fbar[hidden]{display:none!important} #view-anal .an-fc{grid-template-columns:auto auto;grid-template-areas:"l n" "s s";column-gap:10px;row-gap:2px;min-width:0;text-align:left;color:var(--ink);cursor:pointer;font:inherit;transition:border-color .15s,background .15s} #view-anal .an-fc .l{grid-area:l;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-anal .an-fc b{grid-area:n;justify-self:end;font-variant-numeric:tabular-nums;white-space:nowrap} #view-anal .an-fc b i{font-style:normal;font-size:13px;font-weight:600;color:var(--mute);margin-left:2px} #view-anal .an-fc .s{grid-area:s;font-size:13px;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-anal .an-fc:hover:not(:disabled){border-color:var(--border-interactive);background:var(--panel2)} #view-anal .an-fc:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px} #view-anal .an-fc.jump:not(.zero) b,#view-anal .an-fc.est:not(.zero) b{color:var(--warn-ink)} #view-anal .an-fc.refund:not(.zero) b{color:var(--ok-ink)} #view-anal .an-fc.zero{cursor:default;} #view-anal .an-fc.all{flex:0 1 130px} @media (min-width:768px) and (max-width:1279px){ #view-anal #anal-stats.an-fbar{grid-template-columns:repeat(3,minmax(0,1fr))} } /* 표 */ #view-anal table.an-tbl.an-v2 th small{display:inline;font-size:12.5px;font-weight:500;color:var(--mute);margin-left:3px} #view-anal table.an-tbl.an-v2 td{vertical-align:middle} #view-anal table.an-tbl.an-v2 td.name .an-nm{display:block} #view-anal table.an-tbl.an-v2 td.name .sub{display:block;margin:2px 0 0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-anal table.an-tbl.an-v2 .an2-v{display:block;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums} #view-anal table.an-tbl.an-v2 .an-refund.an2-v{color:var(--ok-ink)} #view-anal table.an-tbl.an-v2 .an2-d{display:block;font-size:13px;color:var(--mute);margin-top:1px;white-space:nowrap} #view-anal table.an-tbl.an-v2 td.an2-src .cx-b{margin-left:0;white-space:nowrap} #view-anal table.an-tbl.an-v2 .an2-n{flex-direction:column;gap:1px;min-width:0} #view-anal table.an-tbl.an-v2 .an2-n span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-anal table.an-tbl.an-v2 .an2-n em{font-style:normal;color:var(--mute);font-size:12.5px} @media (min-width:768px){ #view-anal table.an-tbl.an-v2 th:nth-child(1){width:24%} #view-anal table.an-tbl.an-v2 th:nth-child(2){width:13%} #view-anal table.an-tbl.an-v2 th:nth-child(4){width:12%} #view-anal table.an-tbl.an-v2 th:nth-child(5){width:11%} #view-anal table.an-tbl.an-v2 th:nth-child(6){width:auto} #view-anal table.an-tbl.an-v2 th:nth-child(7){width:28px} #view-anal table.an-tbl.an-v2 td.name{white-space:normal} #view-anal table.an-tbl.an-v2 th.an2-h-cmp,#view-anal table.an-tbl.an-v2 td.an2-cmp-td{text-align:right} } @media (min-width:768px) and (max-width:1279px){ #view-anal table.an-tbl.an-v2 th:nth-child(2){width:15%} #view-anal table.an-tbl.an-v2 th:nth-child(4){width:14%} } @media (min-width:768px) and (max-width:1023px){ #view-anal table.an-tbl.an-v2 .an2-h-inc,#view-anal table.an-tbl.an-v2 td.an2-inc{display:none} #view-anal table.an-tbl.an-v2 th:nth-child(1){width:30%} #view-anal table.an-tbl.an-v2 th:nth-child(2){width:18%} #view-anal table.an-tbl.an-v2 th:nth-child(3){width:13%} #view-anal table.an-tbl.an-v2 th:nth-child(5){width:14%} } @media (max-width:767px){ /* 767px 이하: 카드 — 이름 / [다음 부가세 · 직전 대비] / [소득·법인세 · 근거] / 확인할 점 */ #view-anal #anal-stats.an-fbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} #view-anal .an-fc{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l n"} #view-anal .an-fc .l{white-space:normal;line-height:1.3} #view-anal table.an-tbl.an-v2 tr.an-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} #view-anal table.an-tbl.an-v2 tr.an-r > td{display:block} #view-anal table.an-tbl.an-v2 tr.an-r > td.name,#view-anal table.an-tbl.an-v2 tr.an-r > td.an2-note{grid-column:1/-1} #view-anal table.an-tbl.an-v2 tr.an-r > td.an-go{display:none} #view-anal table.an-tbl.an-v2 tr.an-r > td.an2-src::before,#view-anal table.an-tbl.an-v2 tr.an-r > td.an2-note::before{display:block; font-size:12.5px;color:var(--text-secondary);font-weight:600;margin-bottom:2px} #view-anal table.an-tbl.an-v2 tr.an-r > td.an2-note:has(.an-dash){display:none} #view-anal table.an-tbl.an-v2 .an2-n span{white-space:normal} #view-anal table.an-tbl.an-v2 td.name .sub{white-space:normal} /* 카드 목록은 바깥 판 없이 화면 폭 그대로(바깥 카드의 안쪽 여백·음수 여백 때문에 오른쪽이 40px 비었다) */ #view-anal #anal-body .card.an-listcard{padding:0;border:0;background:none;box-shadow:none} #view-anal #anal-body .an-listcard > .tblwrap.an-tw{margin:0;width:auto;max-height:none;overflow:visible} #view-anal table.an-tbl.an-v2 tr.an-r > td{padding:0} #view-anal table.an-tbl.an-v2 tr.an-r > td.an2-inc .an2-d{display:none} #view-anal table.an-tbl.an-v2 tr.an-r{gap:6px 12px} } /* ═══ 2026-10-07 저녁 · 목록 소음 줄이기(사용자: "거래처분석쪽도 UI 가 난잡해") ═══ 칩은 '이름 + 숫자' 한 줄짜리 알약(설명은 툴팁) · 직전 대비는 글자(크게 늘어난 곳만 주의 색) · 근거는 배지 대신 글자 · 확인할 점은 한 줄에 하나. 머리의 알약은 조용한 글자로. */ #view-anal #anal-meta{font-size:13px;font-weight:400;color:var(--mute);background:none;padding:0;border-radius:0} #view-anal #anal-stats.an-fbar{display:flex!important;flex-wrap:wrap;gap:6px;margin:0 0 10px} #view-anal .an-fc{display:inline-flex!important;align-items:center;gap:8px;flex:0 0 auto!important;max-width:none;min-height:34px; padding:0 14px;border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--panel);box-shadow:none} #view-anal .an-fc .l{font-size:13.5px;font-weight:500;color:var(--ink2)} #view-anal .an-fc b{font-size:14px;font-weight:700;color:var(--ink)!important;line-height:1} #view-anal .an-fc .s{display:none} #view-anal .an-fc.zero{background:transparent;border-color:var(--line)} #view-anal .an-fc.zero .l,#view-anal .an-fc.zero b{color:var(--mute)!important;font-weight:500} #view-anal .an-fc.on{background:var(--accent-soft);border-color:var(--accent-fill);box-shadow:none} #view-anal .an-fc.on .l,#view-anal .an-fc.on b{color:var(--accent-ink)!important} #view-anal table.an-tbl.an-v2 .an2-cmp.jump{display:inline;padding:0;border-radius:0;background:none;color:var(--warn-ink);font-weight:700} #view-anal table.an-tbl.an-v2 .an2-s{font-size:13px;color:var(--mute);white-space:nowrap} #view-anal table.an-tbl.an-v2 .an2-s.warn{color:var(--warn-ink);font-weight:600} #view-anal table.an-tbl.an-v2 .an2-n{font-size:13px;text-overflow:ellipsis} #view-anal table.an-tbl.an-v2 .an2-n.warn{color:var(--warn-ink);font-weight:600} #view-anal table.an-tbl.an-v2 td.name .sub{color:var(--mute)} @media (max-width:1024px){ #view-anal .an-fc{min-height:44px} } @media (max-width:767px){ #view-anal #anal-stats.an-fbar{display:flex!important} #view-anal .an-fc{padding:0 12px} #view-anal table.an-tbl.an-v2 tr.an-r > td.an2-src::before{content:none} #view-anal table.an-tbl.an-v2 tr.an-r > td.an2-note::before{content:none} } /* ═══ 2026-10-07 저녁 · 거래처 분석 상세 정리(js/200 · 클래스 ad-) ═══ 머리: 상호 한 줄 → 큰 숫자 둘(다음 부가세 · 연 소득세/법인세) + 작은 숫자 셋 → 근거 한 줄. 본문: 왼쪽 접는 칸 넷 · 오른쪽 시뮬레이터. 배지·색은 최소(숫자는 검정, 환급만 청록). */ #view-anal .ad{display:grid;gap:12px;min-width:0} #view-anal .ad-head{padding:16px 20px 14px;margin:0} #view-anal .ad-top{display:flex;align-items:center;gap:12px;min-width:0} #view-anal .ad-id{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap} #view-anal .ad-id h3{margin:0;font-size:18px;font-weight:700;color:var(--ink);min-width:0;overflow-wrap:anywhere} #view-anal .ad-meta{font-size:13px;color:var(--mute)} #view-anal .ad-acts{display:flex;gap:6px;flex:none} #view-anal .ad-key{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(200px,260px);margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line)} #view-anal .ad-k{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 20px;border-left:1px solid var(--line)} #view-anal .ad-k:first-child{padding-left:0;border-left:0} #view-anal .ad-k .k{font-size:13px;color:var(--mute)} #view-anal .ad-k .v{font-size:28px;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-anal .ad-k.ref .v{color:var(--ok-ink)} #view-anal .ad-k.ex .v{color:var(--mute);font-size:22px} #view-anal .ad-k .s{font-size:13px;color:var(--mute)} #view-anal .ad-k.minor{justify-content:center;gap:4px;padding-right:0} #view-anal .ad-mi{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;cursor:help} #view-anal .ad-mi span{color:var(--mute);white-space:nowrap} #view-anal .ad-mi b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} #view-anal .ad-basis{display:block;margin:12px 0 0;font-size:13px;color:var(--mute);line-height:1.6} #view-anal .ad-basis .k{font-weight:600;color:var(--ink2);margin-right:8px} #view-anal .ad-basis .ad-lv{cursor:help} #view-anal .ad-basis .ad-lv.mid{color:var(--warn-ink)} #view-anal .ad-basis .ad-lv.low{color:var(--bad-ink)} #view-anal .ad-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);gap:12px;align-items:start;min-width:0} #view-anal .ad-main{display:grid;gap:12px;min-width:0} #view-anal .ad-main>*{min-width:0} #view-anal details.ad-sec{padding:0;margin:0;min-width:0} #view-anal details.ad-sec>summary{display:flex;align-items:center;gap:12px;min-height:50px;padding:12px 18px;cursor:pointer;list-style:none;border-radius:inherit} #view-anal details.ad-sec>summary::-webkit-details-marker{display:none} #view-anal details.ad-sec>summary:hover{background:var(--surface-3)} #view-anal details.ad-sec>summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px} #view-anal .ad-st{flex:none;font-size:15px;font-weight:700;color:var(--ink)} #view-anal .ad-ss{flex:1 1 auto;min-width:0;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} #view-anal .ad-chev{flex:none;width:8px;height:8px;border-right:2px solid var(--icon-secondary);border-bottom:2px solid var(--icon-secondary);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .15s} #view-anal details.ad-sec[open]>summary .ad-chev{transform:rotate(-135deg);margin-top:4px} #view-anal .ad-sb{padding:4px 18px 18px;min-width:0} #view-anal .ad-sb .ux-note.ad-wn{padding:6px 0 0;font-size:13px} #view-anal #ux-an-cost{margin:0 0 10px} #view-anal .ad-sb .it-lad{border:0;padding:0;background:none;margin:8px 0 0} #view-anal .ad-sb .it-lad-h{font-size:13.5px;color:var(--ink2)} #view-anal .ad-sb .it-lad-r .s{color:var(--mute)} #view-anal .ad-sb .it-lad-r.b1{background:none} #view-anal .ad-blk{margin:14px 0 0;min-width:0} #view-anal .ad-blk:first-child{margin-top:4px} #view-anal .ad-blk h4{margin:0 0 6px;font-size:13.5px;font-weight:700;color:var(--ink2)} #view-anal .ad-blk h4 small{margin-left:6px;font-size:13px;font-weight:400;color:var(--mute)} #view-anal .ad-cl{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13px} #view-anal .ad-cl .ok{color:var(--ink2)} #view-anal .ad-cl .no{color:var(--mute)} #view-anal .ad-ul{list-style:none;margin:0;padding:0} #view-anal .ad-ul li{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);align-items:baseline;gap:2px 16px;padding:6px 0;border-top:1px solid var(--line);font-size:13.5px} #view-anal .ad-ul li:first-child{border-top:0} #view-anal .ad-ul li b{font-weight:500;color:var(--ink);min-width:0} #view-anal .ad-ul li span{min-width:0;font-size:13px;color:var(--mute)} @media (max-width:767px){ #view-anal .ad-ul li{grid-template-columns:minmax(0,1fr)} } #view-anal .ad-tw{max-height:none!important;overflow-x:auto} #view-anal table.ad-t{width:100%;border-collapse:collapse;font-size:13.5px} #view-anal table.ad-t th{font-size:13px;font-weight:600;color:var(--mute);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);position:static;background:none} #view-anal table.ad-t th.num-h{text-align:right} #view-anal table.ad-t td{padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap} #view-anal table.ad-t td.num{text-align:right;font-variant-numeric:tabular-nums} #view-anal table.ad-t tr:last-child td{border-bottom:0} #view-anal .ad-est{font-size:12.5px;color:var(--mute)} #view-anal .ad-bs h5{margin:8px 0 2px;font-size:13px;font-weight:600;color:var(--ink2)} #view-anal .ad-bs .an-bs{margin:0;border-top:0;padding-top:0} #view-anal .ad-bs .an-bs-r .k{color:var(--mute);font-weight:500} #view-anal .ad-inp{margin-top:14px} #view-anal .ad-inp .an-st{background:none!important;padding:0!important;color:var(--mute)!important;font-weight:500} #view-anal .ad-side{min-width:0} #view-anal .ad-sim{padding:14px 18px 16px;margin:0} #view-anal .ad-sim-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px} #view-anal .ad-sim-h h3{margin:0;font-size:15px;font-weight:700} #view-anal .ad-sim .anal-ctl{margin-top:12px} #view-anal .ad-sim .anal-ctl .an-hint{font-size:13px;color:var(--mute);cursor:help} #view-anal .ad-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px} #view-anal .ad-n{display:flex;flex-direction:column;gap:4px;min-width:0;cursor:help} #view-anal .ad-n span{font-size:13px;font-weight:600;color:var(--ink2)} #view-anal .ad-n input.an-num{width:100%;min-width:0} @media (min-width:1101px){ #view-anal .ad-side{position:sticky;top:12px} } @media (max-width:1100px){ #view-anal .ad-grid{grid-template-columns:minmax(0,1fr)} } @media (max-width:1024px){ #view-anal .ad-acts .btn,#view-anal .ad-top>.btn,#view-anal .ad-sim-h .btn{min-height:44px} #view-anal .ad-n input.an-num{min-height:44px} } @media (max-width:767px){ #view-anal .ad-head{padding:14px} #view-anal .ad-top{flex-wrap:wrap} #view-anal .ad-id{flex-basis:calc(100% - 100px)} #view-anal .ad-acts{order:2;flex:1 1 100%} #view-anal .ad-acts .btn{flex:1 1 0;padding:0 6px} #view-anal .ad-k .v{font-size:22px} #view-anal .ad-k.minor{padding:12px 0 0;margin-top:12px;border-left:0;border-top:1px solid var(--line)} #view-anal details.ad-sec>summary{padding:12px 14px} #view-anal .ad-sb{padding:4px 14px 14px} #view-anal .ad-ss{display:none} } #view-anal #anal-pager:empty{display:none} /* ═══ 2026-10-07 밤 · AI 요약 열 · 체크 표시 · 오르내림 색 · 가결산 결과 문서 ═══ */ /* 직전 대비 — 오르면 빨강 ▲ · 내리면 파랑 ▼ (금액, 배수는 툴팁) */ #view-anal table.an-tbl.an-v2 .an2-cmp{display:block;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink2)} #view-anal table.an-tbl.an-v2 .an2-cmp.up{color:var(--up)} #view-anal table.an-tbl.an-v2 .an2-cmp.down{color:var(--down)} #view-anal table.an-tbl.an-v2 .an2-cmp.big{font-weight:800} #view-anal table.an-tbl.an-v2 td.an2-cmp-td .an2-d{text-align:right} /* 체크 필요 — 이름 앞 체크 표시 + 왼쪽 강조선, 처음 보일 때 한 번만 살짝 튄다 */ .an-chk,.bf-ck{flex:none;vertical-align:-3px} .an-chk circle,.bf-ck circle{fill:var(--warn-soft);stroke:var(--warn-fill);stroke-width:1.6} .an-chk path,.bf-ck path{fill:none;stroke:var(--warn-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} #view-anal table.an-tbl.an-v2 tr.an-r.an-ck>td:first-child{box-shadow:inset 3px 0 0 var(--warn-fill)} #view-anal table.an-tbl.an-v2 td.name .an-chk{margin-right:6px} #view-anal table.an-tbl.an-v2 td.name:has(.an-chk) .an-nm{display:inline} #view-anal table.an-tbl.an-v2 .an2-n{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;color:var(--ink2)} #view-anal table.an-tbl.an-v2 .an2-n.ck{color:var(--ink)} @keyframes anChkPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}} @keyframes anChkRow{0%{background:var(--warn-soft)}100%{background:transparent}} #view-anal tr.an-r.pop .an-chk{animation:anChkPop .5s ease-out 1;transform-origin:center} /* 2026-10-27 최적화 B4: 칸마다(줄 × 칸 수) 따로 돌던 깜빡임이 첫 방문 1.4초 동안 매 순간 스타일을 다시 계산하게 했다 → 줄마다 이름 칸 하나만 */ #view-anal tr.an-r.pop>td:first-child{animation:anChkRow 1.4s ease-out 1} @media (prefers-reduced-motion:reduce){ #view-anal tr.an-r.pop .an-chk,#view-anal tr.an-r.pop>td:first-child{animation:none} } #view-anal .an-fc.check:not(.zero) b{color:var(--warn-ink)!important} @media (max-width:767px){ #view-anal table.an-tbl.an-v2 tr.an-r.an-ck{box-shadow:inset 3px 0 0 var(--warn-fill)} } /* 상세 — 한 줄 요약 · 직전 대비 */ #view-anal .ad-sum{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:14px 0 0;padding:10px 14px;border-radius:10px;background:var(--surface-3);font-size:15px;line-height:1.5;color:var(--ink)} #view-anal .ad-sum.ck{background:var(--warn-soft)} #view-anal .ad-sum-k{font-size:13px;font-weight:700;color:var(--warn-ink)} #view-anal .ad-sum:empty{display:none} #view-anal .ad-dl{display:inline-flex;align-items:baseline;gap:6px;width:max-content;margin:4px 0 2px;padding:1px 8px;border-radius:6px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums} #view-anal .ad-dl.up{color:var(--up);background:var(--up-soft)} #view-anal .ad-dl.down{color:var(--down);background:var(--down-soft)} #view-anal .ad-dl i{font-style:normal;font-weight:500;font-size:13px;color:var(--mute)} /* 상세 — 가결산 결과 문서(세목 탭 + A4 미리보기) */ #view-anal .ad-dtabs{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px} #view-anal .ad-dtl{display:inline-flex;padding:3px;border-radius:10px;background:var(--surface-3);gap:2px} #view-anal .ad-dtl [role=tab]{min-height:34px;padding:0 16px;border:0;border-radius:var(--r-ctl);background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer} #view-anal .ad-dtl [role=tab][aria-selected=true]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgb(20 24 36/.12)} #view-anal .ad-dtl [role=tab]:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px} #view-anal .ad-doc{max-height:680px;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-3)} #view-anal .ad-doc:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} #view-anal .ad-a4{margin:0 auto;padding:36px 40px;border-radius:4px;box-shadow:0 1px 4px rgb(20 24 36/.12)} @media (max-width:1024px){ #view-anal .ad-dtl [role=tab]{min-height:44px} } @media (max-width:767px){ #view-anal .ad-a4{padding:20px 18px} #view-anal .ad-doc{padding:6px;max-height:560px} } #view-anal table.an-tbl.an-v2 td.name .an-nmw{display:flex;align-items:flex-start;gap:6px;min-width:0} #view-anal table.an-tbl.an-v2 td.name .an-nmw .an-chk{margin:1px 0 0} /* ═══ 2026-10-07 늦은 밤 · 가결산 평가 지적 반영(사실·반응형·접근성) ═══ */ /* 금액을 내지 않은 칸(자료 없음·과세유형 확인 필요·수익사업 구분) — 숫자처럼 크게 보이지 않게 */ #view-anal table.an-tbl.an-v2 .an2-v.none{color:var(--ink2);font-weight:600} #view-anal .ad-k.unk .v{font-size:20px;color:var(--warn-ink);white-space:normal;overflow:visible;text-overflow:clip} #view-anal .ad-k .s{overflow-wrap:anywhere} #view-anal .ad-note{margin:8px 0 0;font-size:13px;color:var(--mute);line-height:1.5} /* '–' 자리표 명암 4.5:1 이상(--faint 는 장식 선 색이라 글자에 못 쓴다) */ #view-anal .an-dash,#view-anal table.an-tbl.an-v2 .an-dash{color:var(--text-secondary,#566072)} /* 시뮬레이터 — 바꾼 값이 있으면 배지, 이 화면에서만 쓰인다는 안내 */ #view-anal .ad-simb{margin-right:auto;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--warn-soft);color:var(--warn-ink);font-size:13px;font-weight:700;white-space:nowrap} #view-anal .ad-simb[hidden]{display:none} #view-anal .ad-simn{margin:0 0 8px;font-size:13px;color:var(--mute);line-height:1.45} /* 가결산 문서 미리보기 — 흰 종이 고정(다크에서도) · 축소 대신 칸에 맞춘 폭 · 글자 13px 이상(인쇄 #an-print 는 그대로) */ #view-anal .ad-a4{width:auto;max-width:794px;box-sizing:border-box;background:#fff;color:#1F2430;color-scheme:light; --ink:#1F2430;--ink2:#3A4252;--mute:#566072;--line:#E2E6EE;--line2:#CDD3DE;--bg:#F4F6FA;--panel:#fff;--surface-3:#F4F6FA; --accent:#4F46E5;--accent-soft:#EEF0FF;--accent-ink:#3730A3;--accent-fill:#4F46E5;--border-interactive:#7D8697; --bad-ink:#B42335;--bad-soft:#FDECEE;--ok-ink:#0F6B5C;--up:#C81E1E;--down:#1D4ED8} #view-anal .ad-a4 .rpt{color:#1F2430} #view-anal .ad-a4 :is(.rpt-lh .ad,.rpt-lh .rpt-to span,.rpt-meta,.rpt-sec small,.rpt-kpi .k,.rpt-kpi .s,.rpt-box .t,.rpt-box .b,.rpt-tb,.rpt-tb th,.rpt-tb td,.rpt-ladder,.rpt-ladder .sb,.rpt-ul,.rpt-foot .of,.rpt-foot .dis,.rpt-card .ct,.rpt-cols .lg,.rpt-cols .lg span,.rpt-cont,.rpt-cont b){font-size:13px} #view-anal .ad-a4 :is(.rpt-cols text,.rpt-dn text.cs){font-size:13px} #view-anal .ad-a4 .rpt-tb{table-layout:auto} #view-anal .ad-a4 .rpt-tb td,#view-anal .ad-a4 .rpt-tb th{white-space:normal;overflow-wrap:anywhere} #view-anal .ad-a4 .rpt-tb td.num,#view-anal .ad-a4 .rpt-tb th.num{white-space:nowrap} @media (max-width:767px){ #view-anal .ad-a4 .rpt-kpi{grid-template-columns:repeat(2,minmax(0,1fr))} #view-anal .ad-a4 .rpt-dn2{grid-template-columns:minmax(0,1fr)} #view-anal .ad-a4 .rpt-kpi .v{white-space:normal} /* 390 상세 — 큰 숫자는 한 줄씩 전체 폭(잘리지 않게) */ #view-anal .ad-key{grid-template-columns:minmax(0,1fr)} #view-anal .ad-k{padding:10px 0 0;border-left:0;border-top:1px solid var(--line);margin-top:10px} #view-anal .ad-k:first-child{padding-top:0;border-top:0;margin-top:0} #view-anal .ad-k .v{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} #view-anal .ad-k.minor{grid-column:auto} #view-anal .ad-mi{flex-wrap:wrap} #view-anal .ad-mi span{white-space:normal} #view-anal .ad-dl{width:auto;max-width:100%;flex-wrap:wrap} #view-anal .ad-sum{font-size:14px} } /* 월별 매출·매입 — 거래처별 전월 대비(오르면 빨강 ▲ · 내리면 파랑 ▼), 수집 중인 달 칸은 옅게 */ #view-monthly .mo-table td.mo-cmp,#view-monthly .mo-table th.mo-cmp{text-align:right;white-space:nowrap} #view-monthly .mo-table td.mo-cmp.up{color:var(--up);font-weight:700} #view-monthly .mo-table td.mo-cmp.down{color:var(--down);font-weight:700} #view-monthly .mo-table td.mo-cmp.na{color:var(--text-secondary,#566072)} #view-monthly .mo-table td.mo-pc{font-style:italic;color:var(--ink2)} #view-monthly .mo-table td.mo-num.na{color:var(--text-secondary,#566072)} #view-monthly .mo-table th.mo-tot small{display:block;font-weight:400;font-size:12px;color:var(--mute)} #view-monthly .legend2 .mo-up{color:var(--up)} #view-monthly .legend2 .mo-down{color:var(--down)} #view-monthly #mo-stats[hidden]{display:none!important} @media (max-width:1024px){ #view-monthly #mo-rows>tr>td{height:44px} } #view-anal #ad-src .an-src-t{display:block;max-width:100%;overflow-x:auto} @media (max-width:767px){ /* 휴대폰 월별 — 끝난 마지막 달 · 합계 · 전월 대비가 보이게(수집 중인 달 칸은 옆으로 밀면) */ #view-monthly .mo-table th:nth-child(n+3):nth-last-child(-n+4),#view-monthly .mo-table td:nth-child(n+3):nth-last-child(-n+4){display:table-cell} #view-monthly .mo-table th.mo-part:not(.mo-early),#view-monthly .mo-table td.mo-pc:not(.mo-ecol){display:none!important} } #view-anal .ux-sl .k{white-space:normal;overflow-wrap:anywhere;min-width:0} /* ═══ 2026-10-08 4차 · 목록 아래 빈 스크롤 2,800px(1440×900 문서 높이 3,703) ═══ 원인: 줄 안의 '세무 검토 필요' 화면낭독용 글자(.sr-only = position:absolute)가 기준 상자가 없어 문서 전체를 기준으로 놓였다 — 안쪽 스크롤 상자(.tblwrap)가 잘라 주지 못하고 맨 아래 줄 위치(3,700px)까지 문서를 늘렸다. 스크롤 상자를 기준 상자로 만든다 */ #view-anal #anal-body .tblwrap.an-tw{position:relative} #view-anal #anal-body .an-listcard{position:relative} /* 월별 매출·매입 — 판매대행 미수집 달(*) */ #view-monthly td.mo-onm{color:var(--text-secondary)} #view-monthly .mo-onm-k{font-weight:700;margin-left:1px;font-size:12px;vertical-align:top;line-height:1} #view-monthly td.mo-onmc{font-size:12.5px;color:var(--text-secondary)} /* 2026-10-08 4차 · 인쇄 문서 A4 두 장 유지 — 판매대행 추정·개업 첫해 줄이 더해져 몇 곳이 세 번째 빈 장으로 넘쳤다. 인쇄 상자에서만 줄 간격을 조금 줄인다 */ #an-print .rpt-ladder td{padding:3px 6px} #an-print .rpt-sec{margin:10px 0 4px} #an-print .rpt-ul li{margin-bottom:1px} #an-print .rpt-box{margin-top:6px;margin-bottom:6px} /* 근거 칸 둘째 줄(판매대행 추정 n% · 미수집 · 몰림) — 옆 칸으로 넘치지 않게 줄바꿈 */ #view-anal table.an-tbl.an-v2 td.an2-src{overflow:hidden} #view-anal table.an-tbl.an-v2 td.an2-src .an2-d{white-space:normal;word-break:keep-all} /* 2026-10-08 5차 · 가결산 문서 A4 두 장 — '신고 일정' 제목과 표는 같이 넘긴다(rpt-keep). js rptFit 이 넘칠 때만 fit1~3 을 붙인다 */ .rpt-keep{break-inside:avoid;page-break-inside:avoid} /* 전역 *{transition-duration} 때문에 fit 클래스가 붙은 직후 높이를 재면 옛 값이 나왔다(화면 측정 ≠ 인쇄) — 인쇄 상자는 전환 효과 없음 */ #an-print,#an-print *{transition:none;animation:none} .rpt-tb tr.gap td{color:var(--mute)} #an-print .rpt-tb tr.gap td{color:#555;background:#fafafa} #an-print .rpt.fit1 .rpt-sec{margin:9px 0 4px} #an-print .rpt.fit1 .rpt-sec small{display:inline;margin:0 0 0 8px} #an-print .rpt.fit1 .rpt-box{margin:5px 0;padding:6px 10px} #an-print .rpt.fit1 .rpt-kpi>div{padding:5px 8px} #an-print .rpt.fit1 .rpt-dn svg{width:86px;height:86px;flex:0 0 86px} #an-print .rpt.fit1 .rpt-cols svg{max-height:124px} #an-print .rpt.fit1 .rpt-lh .sep{margin-top:5px} #an-print .rpt.fit1 .rpt-ttl{margin:6px 0 4px} #an-print .rpt.fit2 .rpt-tb th,#an-print .rpt.fit2 .rpt-tb td{padding:1.5px 6px} #an-print .rpt.fit2 .rpt-ladder td{padding:2.5px 6px} #an-print .rpt.fit2 .rpt-cols svg{max-height:100px} #an-print .rpt.fit2 .rpt-ul{margin:3px 0} #an-print .rpt.fit2 .rpt-ul li{margin-bottom:0} #an-print .rpt.fit2 .rpt-foot{margin-top:8px;padding-top:6px} #an-print .rpt.fit3 .rpt-cols svg{max-height:78px} #an-print .rpt.fit3 .rpt-tb th,#an-print .rpt.fit3 .rpt-tb td,#an-print .rpt.fit3 .rpt-ladder td{font-size:8.6pt} #an-print .rpt.fit3 .rpt-ladder .sb,#an-print .rpt.fit3 .rpt-ul li{font-size:8pt} #an-print .rpt.fit4 .rpt-ul{columns:2;column-gap:18px} #an-print .rpt.fit4 .rpt-ul li{break-inside:avoid} #an-print .rpt.fit4 .rpt-sec{margin:6px 0 3px} #an-print .rpt.fit4 .rpt-foot{margin-top:5px;padding-top:4px} /* 2026-10-08 5차 · 월별 매출·매입 — 큰 금액(7자리 천원) 거래처가 있으면 표가 칸보다 19px 넓어 마지막 '전월 대비' 열이 잘렸다(1440 · 직원 화면 실측) → 숫자 칸 좌우 여백을 줄인다. 휴대폰에서는 '전월 대비' 칸의 화면 읽기용 글(sr-only, position:absolute)이 표 스크롤 상자 밖 기준으로 놓여 문서가 6px 밀렸다 → 칸을 기준 상자로 */ #view-monthly .mo-table td.mo-cmp,#view-monthly .mo-table th.mo-cmp{position:relative} @media (min-width:768px){ #view-monthly .mo-table th.mo-num,#view-monthly .mo-table td.mo-num{padding-left:3px;padding-right:6px} /* ═══ 2026-10-08 7차 · 목록 칸 넘침 · 판단 보류 ═══ '직전 대비'·'다음 부가세' 칸의 둘째 줄(.an2-d)이 줄바꿈 금지라 1440 에서도 옆 칸으로 21~78px 넘쳐 옆 숫자와 붙었다 → 칸 안에서 줄바꿈(낱말 단위), 칸 사이 여백을 두고, 직전 대비 칸에 최소 폭을 준다. '(둘 다 예정고지 빼기 전)' 은 머리말·툴팁으로 옮겼다(190 cmpCell). */ #view-anal table.an-tbl.an-v2 td.an2-next .an2-d,#view-anal table.an-tbl.an-v2 td.an2-cmp-td .an2-d,#view-anal table.an-tbl.an-v2 td.an2-inc .an2-d{white-space:normal;word-break:keep-all;overflow-wrap:break-word} #view-anal table.an-tbl.an-v2 td.an2-next,#view-anal table.an-tbl.an-v2 td.an2-cmp-td,#view-anal table.an-tbl.an-v2 td.an2-inc{padding-left:10px;padding-right:10px;overflow:hidden} #view-anal table.an-tbl.an-v2 th:nth-child(3){width:12%;min-width:118px} #view-anal table.an-tbl.an-v2 .an2-cmp{white-space:normal;word-break:keep-all} } @media (min-width:768px) and (max-width:1279px){ #view-anal table.an-tbl.an-v2 th:nth-child(1){width:22%} #view-anal table.an-tbl.an-v2 th:nth-child(3){width:14%} } /* 판단 보류 — 방향(▲▼) 대신 회색 글자 */ #view-anal table.an-tbl.an-v2 .an2-cmp.hold{color:var(--mute);font-weight:600} #view-anal .ad-dl.hold{color:var(--mute);background:var(--line)} @media (max-width:767px){ /* 휴대폰 카드 목록(767px 이하)도 둘째 줄은 칸 안에서 줄바꿈 — 두 칸 카드라 칸이 170px 안팎이다 */ #view-anal table.an-tbl.an-v2 td.an2-next .an2-d,#view-anal table.an-tbl.an-v2 td.an2-cmp-td .an2-d,#view-anal table.an-tbl.an-v2 td.an2-inc .an2-d,#view-anal table.an-tbl.an-v2 .an2-cmp{white-space:normal;word-break:keep-all;overflow-wrap:break-word} #view-anal table.an-tbl.an-v2 tr.an-r > td{min-width:0} /* 2026-10-14 미리 받은 달 열(mo-early)은 합계에 들어가 보인다 */ } /* 2026-10-10 디자인 개편 · 가결산 칸(세금 예측 목록 · 월별 매출·매입) — docs/디자인_개편_2026-10.md */ /* 월별 매출·매입 제목 줄: 거르기는 제목 옆에 한 줄로, [CSV 내려받기]는 오른쪽 끝(다른 화면의 주 단추 자리) */ #view-monthly .wht-head{flex-wrap:wrap} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 85번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 999b 999zzb 968 */ /* ── 공통 조각 ── */ :is(#view-c360,#view-files,#view-fax) .bv-dim{font-size:12px;font-weight:400;color:var(--mute)} :is(#view-c360,#view-files,#view-fax) .bv-none{font-size:13px;color:var(--mute);padding:6px 0} :is(#view-c360,#view-files,#view-fax) .bv-k{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 6px} :is(#view-c360,#view-files,#view-fax) .num{font-variant-numeric:tabular-nums} :is(#view-c360,#view-files,#view-fax) .bv-leg{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px;color:var(--mute);margin-top:6px;align-items:center} :is(#view-c360,#view-files,#view-fax) .bv-leg>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} :is(#view-c360,#view-files,#view-fax) .bv-leg>span.z{opacity:.75} :is(#view-c360,#view-files,#view-fax) .bv-leg b{color:var(--ink);font-weight:600} :is(#view-c360,#view-files,#view-fax) .sw{display:inline-block;flex:none;width:10px;height:10px;border-radius:3px;background:var(--chart-rest)} :is(#view-c360,#view-files,#view-fax) .sw.c-sa{background:var(--bv-sa)} :is(#view-c360,#view-files,#view-fax) .sw.c-py{background:none;border:1.5px dashed var(--bv-py)} :is(#view-c360,#view-files,#view-fax) .sw.c-est{background:var(--bv-sa);opacity:.4} :is(#view-c360,#view-files,#view-fax) .sw.c-s-flow{background:var(--bv-flow)} :is(#view-c360,#view-files,#view-fax) .sw.c-s-box{background:var(--bv-box)} :is(#view-c360,#view-files,#view-fax) .sw.c-s-fax{background:var(--bv-fax)} :is(#view-c360,#view-files,#view-fax) .sw.c-s-mail{background:var(--bv-mail)} :is(#view-c360,#view-files,#view-fax) .sw.c-k-pdf{background:var(--bv-pdf)} :is(#view-c360,#view-files,#view-fax) .sw.c-k-img{background:var(--bv-img)} :is(#view-c360,#view-files,#view-fax) .sw.c-k-doc{background:var(--bv-doc)} :is(#view-c360,#view-files,#view-fax) .sw.c-k-etc{background:var(--bv-etc)} :is(#view-c360,#view-files,#view-fax) .sw.c-rd{background:var(--chart-rest)} :is(#view-c360,#view-files,#view-fax) .sw.c-we{border:1px solid var(--line2)} /* 그림 판 — 글자는 HTML, 막대는 SVG(늘어나도 선 굵기는 그대로) */ :is(#view-c360,#view-files,#view-fax) .bv-plot{position:relative;height:112px;padding-top:18px} :is(#view-c360,#view-files,#view-fax) .bv-plot.sm{height:66px;padding-top:0} :is(#view-c360,#view-files,#view-fax) .bv-plot svg{display:block;width:100%;height:100%;overflow:visible} :is(#view-c360,#view-files,#view-fax) .bv-plot svg *{vector-effect:non-scaling-stroke} :is(#view-c360,#view-files,#view-fax) .bv-max{position:absolute;top:0;left:0;font-size:12px;color:var(--mute)} :is(#view-c360,#view-files,#view-fax) .bv-plot line.ax{stroke:var(--line2);stroke-width:1} :is(#view-c360,#view-files,#view-fax) .bv-plot rect.hit{fill:transparent} :is(#view-c360,#view-files,#view-fax) .bv-plot rect.hit:hover{fill:var(--ink);fill-opacity:.06} :is(#view-c360,#view-files,#view-fax) .bv-plot rect.sa{fill:var(--bv-sa)} :is(#view-c360,#view-files,#view-fax) .bv-plot rect.py{fill:none;stroke:var(--bv-py);stroke-width:1.5;stroke-dasharray:3 2} :is(#view-c360,#view-files,#view-fax) .bv-plot rect.est{opacity:.4} :is(#view-c360,#view-files,#view-fax) #bvHatchC .hb{fill:var(--bv-bu)} :is(#view-c360,#view-files,#view-fax) #bvHatchX .hb{fill:var(--accent-fill)} :is(#view-c360,#view-files,#view-fax) pattern .hl{fill:var(--bv-hl)} /* 가로 막대 순위(누르면 그 대상으로) */ :is(#view-c360,#view-files,#view-fax) .bv-hb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} :is(#view-c360,#view-files,#view-fax) .bv-hb-r{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(40px,1fr) auto;align-items:center;gap:8px;width:100%; min-height:28px;padding:2px 6px;border:0;border-radius:6px;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer} :is(#view-c360,#view-files,#view-fax) .bv-hb-r:hover{background:var(--surface-3)} :is(#view-c360,#view-files,#view-fax) .bv-hb-r .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} :is(#view-c360,#view-files,#view-fax) .bv-hb-r .tr{display:block;height:8px;border-radius:4px;background:var(--bv-track);overflow:hidden} :is(#view-c360,#view-files,#view-fax) .bv-hb-r .tr i{display:block;height:100%;background:var(--bv-sa);border-radius:4px} :is(#view-c360,#view-files,#view-fax) .bv-hb-r b{font-size:13px;font-weight:700;min-width:2.2em;text-align:right} /* 비율 띠 */ :is(#view-c360,#view-files,#view-fax) .bv-stack{display:flex;gap:2px;height:14px;border-radius:var(--r-pill);overflow:hidden;background:var(--bv-track)} :is(#view-c360,#view-files,#view-fax) .bv-seg{display:block;min-width:4px;flex-basis:0} :is(#view-c360,#view-files,#view-fax) .bv-seg.c-s-flow{background:var(--bv-flow)} :is(#view-c360,#view-files,#view-fax) .bv-seg.c-s-box{background:var(--bv-box)} :is(#view-c360,#view-files,#view-fax) .bv-seg.c-s-fax{background:var(--bv-fax)} :is(#view-c360,#view-files,#view-fax) .bv-seg.c-s-mail{background:var(--bv-mail)} :is(#view-c360,#view-files,#view-fax) .bv-seg.c-k-pdf{background:var(--bv-pdf)} :is(#view-c360,#view-files,#view-fax) .bv-seg.c-k-img{background:var(--bv-img)} :is(#view-c360,#view-files,#view-fax) .bv-seg.c-k-doc{background:var(--bv-doc)} :is(#view-c360,#view-files,#view-fax) .bv-seg.c-k-etc{background:var(--bv-etc)} :is(#view-c360,#view-files,#view-fax) .bv-stack:has(.bv-seg.on) .bv-seg:not(.on){opacity:.35} :is(#view-c360,#view-files,#view-fax) .bv-lb{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 8px;border:1px solid transparent;border-radius:999px; background:none;color:var(--mute);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap} :is(#view-c360,#view-files,#view-fax) .bv-lb:hover{background:var(--surface-3)} :is(#view-c360,#view-files,#view-fax) .bv-lb.on{border-color:var(--ink);background:var(--surface-3);color:var(--ink)} :is(#view-c360,#view-files,#view-fax) .bv-lb small{font-size:12px;color:var(--mute)} :is(#view-c360,#view-files,#view-fax) .bv-leg:has(.bv-lb){margin-left:-8px;gap:0 2px} /* 신호 모양 */ :is(#view-c360,#view-files,#view-fax) .bv-sg{flex:none;display:block} :is(#view-c360,#view-files,#view-fax) .bv-sg path{fill:none;stroke:var(--dv-mark,#fff);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} :is(#view-c360,#view-files,#view-fax) .bv-sg.st-ok circle{fill:var(--dv-in)} :is(#view-c360,#view-files,#view-fax) .bv-sg.st-warn circle{fill:var(--dv-part)} :is(#view-c360,#view-files,#view-fax) .bv-sg.st-bad circle{fill:var(--dv-miss)} :is(#view-c360,#view-files,#view-fax) .bv-sg.st-none circle{fill:none;stroke:var(--border-interactive);stroke-width:1.4;stroke-dasharray:2.4 2} :is(#view-c360,#view-files,#view-fax) .bv-sg.st-none path{stroke:var(--border-interactive)} /* ══════════ 거래처 360 머리 ══════════ */ #view-c360 .bv-c3{padding:14px 16px;margin:0 0 12px;display:flex;flex-direction:column;gap:12px;min-width:0} #view-c360 .bv-c3[hidden]{display:none} #view-c360 .bv-c3 button{font:inherit;color:inherit} #view-c360 .bv-go{cursor:pointer} #view-c360 .bv-go:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} #view-c360 .bv-sig{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} #view-c360 .bv-sgi{display:flex;align-items:center;gap:8px;min-height:40px;min-width:0;padding:6px 10px;border:1px solid var(--line); background:var(--panel2);text-align:left} #view-c360 .bv-sgi:hover{border-color:var(--line2);background:var(--surface-3)} #view-c360 .bv-sgi .k{flex:none;font-size:13px;color:var(--mute)} #view-c360 .bv-sgi .v{min-width:0;font-size:14px;font-weight:600;} #view-c360 .bv-sgi.s-bad{border-color:var(--dv-miss);background:var(--dv-bad-soft)} #view-c360 .bv-sgi.s-bad .v{color:var(--dv-bad-ink)} #view-c360 .bv-sgi.s-warn{background:var(--dv-warn-soft)} #view-c360 .bv-sgi.s-none .v{font-weight:500;color:var(--mute)} #view-c360 .bv-main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:12px;align-items:stretch} #view-c360 .bv-chart{width:100%;min-width:0;padding:12px 14px 10px;border:1px solid var(--line);background:var(--panel);} #view-c360 button.bv-chart:hover{border-color:var(--line2)} #view-c360 .bv-ch{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:4px} #view-c360 .bv-ch>b{font-size:14px;font-weight:600} #view-c360 .bv-sum{display:flex;flex-wrap:wrap;gap:2px 12px;margin-left:auto;font-size:13px;color:var(--mute)} #view-c360 .bv-sum b{color:var(--ink);font-weight:700} #view-c360 .bv-d{font-weight:600} #view-c360 .bv-d.nt{color:var(--mute)} #view-c360 .bv-xl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:4px;font-size:12px;color:var(--mute);text-align:center;font-variant-numeric:tabular-nums} #view-c360 .bv-xl span{white-space:nowrap;overflow:hidden} #view-c360 .bv-xl .cur{color:var(--ink);font-weight:700} #view-c360 .bv-chart.bv-nodata{min-height:120px} #view-c360 .bv-side{display:flex;flex-direction:column;gap:8px;min-width:0} #view-c360 .bv-tax{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #view-c360 .bv-chip,#view-c360 .bv-mini{display:flex;flex-direction:column;gap:2px;width:100%;min-width:0;padding:9px 12px;border:1px solid var(--line); background:var(--panel2);text-align:left} #view-c360 .bv-chip:hover,#view-c360 .bv-mini:hover{border-color:var(--line2);background:var(--surface-3)} #view-c360 .bv-chip>i,#view-c360 .bv-mini>i{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-style:normal;font-size:13px;color:var(--mute)} #view-c360 .bv-chip>b{font-size:21px;line-height:28px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-c360 .bv-chip>b.ref{color:var(--ok-ink)} #view-c360 .bv-chip>b.z{font-size:16px;font-weight:500;color:var(--mute)} #view-c360 .bv-chip>span{font-size:12px;color:var(--mute);} #view-c360 .bv-chip.z{grid-column:1/-1} #view-c360 .bv-chip.z>span{white-space:normal} #view-c360 .bv-est{font-style:normal;font-size:12px;line-height:18px;padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--mute)} #view-c360 .bv-mini .bv-dim b{color:var(--ink)} #view-c360 .bv-mini .bv-dim b.bad{color:var(--dv-bad-ink)} #view-c360 .bv-spk-w{display:flex;align-items:center;gap:10px;min-width:0} #view-c360 .bv-spk{flex:1 1 auto;min-width:0;width:100%;height:30px;overflow:visible} #view-c360 .bv-spk *{vector-effect:non-scaling-stroke} #view-c360 .bv-spk polyline{fill:none;stroke:var(--bv-sa);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round} #view-c360 .bv-spk .pt{fill:none;stroke:var(--bv-sa);stroke-width:5;stroke-linecap:round} #view-c360 .bv-spk .pt.now{stroke:var(--accent-fill);stroke-width:7} #view-c360 .bv-spk-w>b{flex:none;font-size:15px;font-weight:700;white-space:nowrap} #view-c360 .bv-spk-w>b small{font-size:12px;font-weight:500;color:var(--mute)} #view-c360 .bv-spk-w>b.z,#view-c360 .bv-mini b.z{font-size:13px;font-weight:500;color:var(--mute)} #view-c360 .bv-dots{grid-template-columns:repeat(12,minmax(0,1fr));margin-top:2px} #view-c360 .bv-dot{display:flex;flex-direction:column;align-items:center;gap:1px;} #view-c360 .bv-dot small{font-size:12px;line-height:14px;color:var(--mute);font-variant-numeric:tabular-nums} /* 개요 카드 — 진행 막대 · 매입 비율 · (머리에 12개월 막대가 있으니 같은 막대는 감춘다) */ #view-c360:has(#c3-viz:not([hidden])) .bv-ov-sale .rpt-cols{display:none} #view-c360 .bv-prog{display:inline-flex;align-items:center;gap:8px;margin-left:auto} #view-c360 .bv-prog .tr{display:block;width:84px;height:6px;border-radius:3px;background:var(--bv-track);overflow:hidden} #view-c360 .bv-prog .tr i{display:block;height:100%;background:var(--dv-in);border-radius:3px} #view-c360 .bv-prog b{font-size:13px;font-weight:700;color:var(--mute)} #view-c360 .bv-prog b.done{color:var(--dv-ok-ink)} #view-c360 .bv-meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:12px} #view-c360 .bv-meter .k{font-size:13px;color:var(--mute)} #view-c360 .bv-meter .tr{position:relative;display:block;height:10px;border-radius:5px;background:var(--bv-track);overflow:hidden} #view-c360 .bv-meter .tr i{display:block;height:100%;border-radius:5px;} #view-c360 .bv-meter .tr i.over{background:var(--dv-miss)} #view-c360 .bv-meter b{font-size:15px;font-weight:700} #view-c360 .bv-meter b.bad{color:var(--dv-bad-ink)} #view-c360 .bv-meter-n{font-size:12px;color:var(--mute);margin-top:4px} /* ══════════ 거래처 정보 ══════════ */ #view-files .bv-fi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:10px 20px;padding:10px 12px; border:1px solid var(--line);border-radius:12px;background:var(--panel2);min-width:0} #view-files .bv-fi[hidden]{display:none} #view-files .bv-fi>.bv-blk{min-width:0} /* 왼쪽 거래처 목록 — 파일 수만큼 옅은 막대 */ #view-files .fi-ci:not(.fi-all){position:relative} #view-files .fi-ci:not(.fi-all)::after{content:"";position:absolute;left:10px;bottom:3px;height:3px;border-radius:2px; width:calc(var(--bvw,0%) * .9);background:var(--line2);pointer-events:none} #view-files .fi-ci.on::after{background:var(--accent)} /* ══════════ 팩스 ══════════ */ #view-fax .bv-fx{display:grid;grid-template-columns:auto minmax(0,1.7fr) minmax(220px,1fr);gap:12px 22px;align-items:start;padding:12px 16px;margin:0 0 12px;min-width:0} #view-fax .bv-fx[hidden],#view-fax:has(#fx-in-card.hidden) .bv-fx{display:none} #view-fax .bv-fx>*{min-width:0} #view-fax .bv-fx button{font:inherit;color:inherit;cursor:pointer} #view-fax .bv-fx-k{display:grid;grid-template-columns:repeat(2,auto);gap:6px 16px;align-items:center;justify-content:start} #view-fax .bv-kv{display:flex;flex-direction:column;align-items:flex-start;min-height:28px;padding:0;border:0;background:none;text-align:left} #view-fax .bv-kv i{font-style:normal;font-size:12px;color:var(--mute)} #view-fax .bv-kv b{font-size:17px;line-height:22px;font-weight:700} #view-fax .bv-kv b.z{color:var(--mute);font-weight:500} #view-fax .bv-xl3{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-top:4px;font-variant-numeric:tabular-nums} #view-fax .bv-xl3 .cur{color:var(--ink);font-weight:700} @media (max-width:1180px){ /* ══════════ 반응형 ══════════ */ #view-c360 .bv-main{grid-template-columns:minmax(0,1fr)} #view-c360 .bv-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #view-c360 .bv-side>.bv-tax{grid-column:1/-1} #view-fax .bv-fx{grid-template-columns:auto minmax(0,1fr)} #view-fax .bv-fx-t{grid-column:1/-1} #view-files .bv-fi{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #view-files .bv-fi>.bv-w{grid-column:1/-1} } @media (max-width:1024px){ #view-c360 .bv-sig{grid-template-columns:repeat(3,minmax(0,1fr))} #view-c360 .bv-sgi,#view-c360 .bv-chip,#view-c360 .bv-mini{min-height:44px} :is(#view-c360,#view-files,#view-fax) .bv-hb-r,:is(#view-c360,#view-files,#view-fax) .bv-lb{min-height:44px} } @media (max-width:700px){ #view-c360 .bv-c3{padding:12px} #view-c360 .bv-sig{grid-template-columns:repeat(2,minmax(0,1fr))} #view-c360 .bv-sgi{flex-wrap:wrap;gap:2px 6px} #view-c360 .bv-sgi .v{flex-basis:100%;padding-left:24px} #view-c360 .bv-side{grid-template-columns:minmax(0,1fr)} #view-c360 .bv-plot{height:110px} #view-c360 .bv-sum{margin-left:0} #view-c360 .bv-chip>b{font-size:18px} #view-c360 .bv-xl span:nth-child(even):not(.cur){visibility:hidden} #view-fax .bv-fx{grid-template-columns:minmax(0,1fr);padding:12px} #view-fax .bv-fx-k{grid-template-columns:repeat(4,auto);justify-content:space-between} #view-files .bv-fi{grid-template-columns:minmax(0,1fr)} } /* ══════════ 2026-10-07 평가 반영(수집자료 보관 76→) ══════════ */ /* 이번 달 업무 — '대상 아님' 줄은 할 일이 아니다(흐리게) · 기한 꼬리표는 줄바꿈해서라도 보이게(390px) */ #view-c360 .c3-now li.na .t,#view-c360 .c3-now li.na .s{color:var(--mute)} #view-c360 .c3-now li.na .i{background:var(--surface-3);color:var(--mute)} #view-c360 .c3-now .c3-dd{white-space:nowrap;display:inline-block} @media (max-width:720px){ #view-c360 .c3-now li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:9px;row-gap:2px;align-items:center} #view-c360 .c3-now .i{grid-column:1;grid-row:1/3} #view-c360 .c3-now .t{grid-column:2;grid-row:1;white-space:normal} #view-c360 .c3-now .s{grid-column:2;grid-row:2;} #view-c360 .c3-now .c3-chev,#view-c360 .c3-now .c3-do{grid-column:3;grid-row:1/3} } #view-c360 .c3-galmore{white-space:nowrap} #view-c360 .bv-nodot{display:block;margin-top:4px} /* 거래처 정보 — 이름을 바로잡은 파일 꼬리표 */ #view-files .fi-fix{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;font-size:12px;line-height:20px;font-weight:600; color:var(--warn-ink);background:var(--warn-soft);white-space:nowrap;vertical-align:middle} @media (max-width:1024px){ /* 손가락 폭(≤1024) — 누르는 것은 44×44 이상 */ #view-fax .ops-pdf a.btn,#view-fax .ops-pen,#view-fax #seg-fx button,#view-fax #fx-box button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center} #view-c360 #c3-tabs [role=tab],#view-c360 .c3-ff button,#view-c360 .c3-galmore,#view-c360 .c3-acts .btn,#view-c360 #c3-back{min-height:44px} #view-c360 .c3-list a,#view-c360 .c3-list .lnk{display:inline-flex;align-items:center;min-height:44px} #view-c360 .cx-i,#view-files .rp-i,#view-files .cx-i{min-width:44px;min-height:44px;width:44px;height:44px; background:radial-gradient(circle,var(--surface-3) 0 11px,transparent 12px);border:0;box-shadow:none} #view-files #fi-src button,#view-files #fi-kind button,#view-files .fi-ci,#view-files .fi-ctog,#view-files #fi-pg .btn,#view-files #fi-sort,#view-files .fi-ma .btn{min-height:44px} #view-files #fi-pg .btn{min-width:44px} #view-files td.fi-f a{min-height:44px} #view-fax #fx-q,#view-files #fi-q,#view-files #fi-cq{min-height:44px} } /* 2026-10-08 평가 3차: 거래처 360 고르기 — 담당 몇 곳 중 몇 곳인지 · 모두 보기 */ .c3-pick-g.c3-pick-gm{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .c3-pick-gm small{font-weight:400;margin-left:6px;color:var(--mute)} /* 2026-10-08 4차 평가 — 머리 칩 날짜가 1440 에서 잘리던 것: 줄을 넘겨 다 보이게 */ #view-c360 .bv-chip>span{white-space:normal;overflow:visible;text-overflow:clip;line-height:16px} /* 수납 점 띠 — 기록 있는 달만 'n월' 로 · 12칸 격자 대신 나란히 */ #view-c360 .bv-dots{display:flex;flex-wrap:wrap;gap:4px 10px} #view-c360 .bv-dot{min-width:24px} /* 판매대행 미수집 표시(js/380 · 999b) */ #view-c360 .c3-sum .c3-onw{font-size:12px;line-height:18px;padding:0 6px;margin-left:4px;vertical-align:1px;font-style:normal} #view-c360 .bv-onw{color:var(--warn-ink,var(--ink2));margin-top:6px} /* 2026-10-08 5차 — 원천세 칩 둘째 줄(익월 지급: '8월 귀속(9월 지급) 기한 10/12 진행') */ #view-c360 .bv-sgi .vw{display:flex;flex-direction:column;min-width:0;gap:1px} #view-c360 .bv-sgi .vw .v{white-space:normal;overflow:visible;line-height:1.3} #view-c360 .bv-sgi .v2{font-size:13px;font-weight:500;color:var(--mute);line-height:1.3} @media (max-width:700px){ #view-c360 .bv-sgi .vw{flex-basis:100%;padding-left:24px} #view-c360 .bv-sgi .vw .v{padding-left:0;flex-basis:auto} /* 2026-10-08 8차 평가 4 — 인건비·원천세 탭 표: 휴대폰(≤700px)에서는 줄마다 카드로 펼친다 (예전엔 '상태' 열까지만 보이고 기한·지급액·파일·접수가 표 안 가로 스크롤 뒤에 숨었다) */ #view-c360 table.c3-ft{display:block;overflow:visible;border:0} #view-c360 table.c3-ft tbody{display:block} #view-c360 table.c3-ft tr:first-child{display:none} #view-c360 table.c3-ft tr{display:flex;flex-wrap:wrap;gap:2px 12px;padding:10px 2px;border-bottom:1px solid var(--line)} #view-c360 table.c3-ft td{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding:0;border:0;white-space:normal;text-align:left;min-width:0} #view-c360 table.c3-ft td:first-child{flex-basis:100%;font-weight:700} #view-c360 table.c3-ft td:not(:first-child)::before{color:var(--mute);font-size:13px;font-weight:500} #view-c360 table.c3-ft td:nth-child(2)::before{content:"대상"} #view-c360 table.c3-ft td:nth-child(3)::before{content:"상태"} #view-c360 table.c3-ft td:nth-child(4)::before{content:"기한"} #view-c360 table.c3-ft td:nth-child(5)::before{content:"지급액"} #view-c360 table.c3-ft td:nth-child(6)::before{content:"파일"} #view-c360 table.c3-ft td:nth-child(7)::before{content:"접수"} } /* 2026-10-08 8차 평가 6 — 1440 에서 상태값이 말줄임으로 잘리던 것: 두 줄까지 그대로 보인다(값은 짧은 이름 vs · 전체 문구는 title) */ #view-c360 .bv-sgi .v{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;word-break:keep-all;overflow-wrap:break-word} @media (min-width:1025px){ #view-c360 .bv-sig:has(>:nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr))} } /* 10차: 이번 달 업무 — 줄 이름('8월 귀속 원천세')이 말줄임으로 잘려 무슨 신고인지 안 보이던 것 · 판정 글은 두 줄까지 */ #view-c360 .c3-now .t{flex:0 0 auto;max-width:48%} #view-c360 .c3-now .s{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #dash .ds-title{font-size:26px;font-weight:800;letter-spacing:-.6px} #dash .ds-head{margin-bottom:18px} #dash>section.ds-sec{margin-top:16px} #dash>section.ds-sec:not(.bf){padding:20px var(--ou-pad)} /* ═══ 원천세 신고(신고 요청) — 2026-10-13 · 그리기 js/968 · 틀 views/350 ═══ 색은 999zzz1 토큰만 읽는다. 표·체크칸·아래 막대는 CMS 출금 화면(956 .cpy-*)과 같은 모양. */ #view-flreq .frq-head .frq-yml{display:inline-flex;align-items:center} /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 86번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 999ca 999cc 999ce */ /* 2026-10-07 UI 개편 · c_수임_CMS — 이 영역 작업자만 고친다 그래프 카드(#cv-*, js/999c) · 홈택스 신청 스텝퍼 · 거래처 셋팅 단계 막대(스텝퍼 연결선). 색은 토큰만(라이트·다크 자동). 색만으로 뜻을 전하지 않게 — 글리프(✓ ⋯ ! – ×)·빗금·글자를 같이 쓴다. A4 서식(.a4 · .xl)·인쇄물에는 아무 규칙도 걸지 않는다. 모든 선택자는 각 #view-… 아래. */ /* ── 색 칠하기 (SVG 는 fill, 막대 div 는 background) ── */ :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-f-ok{fill:var(--ok-fill);background-color:var(--ok-fill);color:#fff} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-f-wait{fill:var(--info-fill);background-color:var(--info-fill);color:#fff} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-f-warn{fill:var(--warn-fill);background-color:var(--warn-fill);color:#fff} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-f-bad{fill:var(--bad-fill);background-color:var(--bad-fill);color:#fff} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-f-mute, :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-f-skip{fill:var(--chart-rest);background-color:var(--chart-rest);color:#fff} /* 막대(div) 조각의 무늬 — 미입력·대기·실패는 색이 비슷해도 무늬로 갈린다 */ :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) :is(.cv-stk,.cv-own-trk)>.cv-f-mute{background-image:repeating-linear-gradient(135deg,rgb(255 255 255/.38) 0 2px,transparent 2px 6px)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) :is(.cv-stk,.cv-own-trk)>.cv-f-bad{background-image:repeating-linear-gradient(45deg,rgb(255 255 255/.34) 0 2px,transparent 2px 6px)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) :is(.cv-stk,.cv-own-trk)>.cv-f-wait{background-image:radial-gradient(rgb(255 255 255/.4) 1px,transparent 1.4px);background-size:5px 5px} /* ── 카드 틀 ── */ :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-card{margin:0 0 12px;padding:14px 18px 16px;min-width:0;color:var(--ink)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-card[hidden]{display:none!important} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-width:0} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-t{margin:0;font-size:15px;font-weight:700;line-height:22px;color:var(--ink)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sub{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums;min-width:0} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sub b{color:var(--ink);font-weight:700} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sub b.cv-hot{color:var(--warn-ink)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sub b.cv-badt{color:var(--bad-ink)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-tg{margin-left:auto;min-height:28px;padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--panel);color:var(--mute);font:inherit;font-size:13px;cursor:pointer} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-tg:hover{color:var(--ink);border-color:var(--border-interactive)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-b{margin-top:12px;min-width:0} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-card.cv-off{padding-bottom:12px} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-card.cv-off .cv-b{display:none} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-card :focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-note{margin:8px 0 0;font-size:13px;color:var(--mute)} /* 두 칸 배치 — 넓으면 나란히, 좁으면 위아래 */ :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 28px;align-items:start} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-2.cv-2c{grid-template-columns:minmax(0,220px) minmax(0,1fr)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-blk{min-width:0} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-bh{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 8px} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-bh small, :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-own-h small{font-weight:400;color:var(--mute);margin-left:4px;font-size:13px} /* ── 도넛 + 범례 ── */ :is(#view-cmsreg,#view-cmsnew) .cv-dnw{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center} :is(#view-cmsreg,#view-cmsnew) .cv-dn{width:132px;height:132px;display:block} :is(#view-cmsreg,#view-cmsnew) .cv-dn path{stroke:var(--panel);stroke-width:1} :is(#view-cmsreg,#view-cmsnew) .cv-track{fill:none;stroke:var(--surface-3)} :is(#view-cmsreg,#view-cmsnew) .cv-dn-c{font-size:19px;font-weight:800;fill:var(--ink);text-anchor:middle;font-variant-numeric:tabular-nums} :is(#view-cmsreg,#view-cmsnew) .cv-dn-s{font-size:12px;fill:var(--mute);text-anchor:middle} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 10px} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgi{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:2px 6px;border:1px solid transparent;border-radius:var(--r-ctl);background:none;font:inherit;font-size:14px;color:var(--ink);text-align:left} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) button.cv-lgi{cursor:pointer} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) button.cv-lgi:hover{background:var(--panel2);border-color:var(--line2)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) button.cv-lgi.on{background:var(--sel,var(--accent-soft));border-color:var(--sel-line,var(--accent-ink));font-weight:700} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgi.zero{color:var(--mute)} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgi.zero .cv-sw{opacity:.45} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgl{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgi b{font-variant-numeric:tabular-nums;font-weight:700;flex:none} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgi small{color:var(--mute);font-size:13px;min-width:34px;text-align:right;flex:none} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sw{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;font-style:normal;font-size:12px;line-height:1;font-weight:800} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgr{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--mute);margin:0 0 6px} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgr span{display:inline-flex;align-items:center;gap:6px} :is(#view-cmspay) .cv-sw.cv-rl-sw{height:3px;border-radius:2px;background:var(--ink);width:16px} :is(#view-cmspay) .cv-sw.cv-unk-sw{border:1.5px dashed var(--border-interactive);background:transparent} /* ── 가로 쌓기 막대 ── */ :is(#view-cmsmem,#view-setup,#view-intake) .cv-stk{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-3);margin:0 0 8px;gap:1px} :is(#view-cmsmem,#view-setup,#view-intake) .cv-stk>span{display:block;height:100%;min-width:3px} /* ── 담당자별 등록할 곳 ── */ :is(#view-cmsreg,#view-cmsnew) .cv-own{min-width:0} :is(#view-cmsreg,#view-cmsnew) .cv-own-h{font-size:13px;font-weight:700;margin:0 0 6px} :is(#view-cmsreg,#view-cmsnew) .cv-own-l{list-style:none;margin:0;padding:0;display:grid;gap:2px} :is(#view-cmsreg,#view-cmsnew) .cv-ow{display:grid;grid-template-columns:76px minmax(60px,1fr) minmax(0,auto) 44px;align-items:center;gap:10px;width:100%;min-height:28px;padding:2px 6px;border:1px solid transparent;border-radius:var(--r-ctl);background:none;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer} :is(#view-cmsreg,#view-cmsnew) .cv-ow:hover{background:var(--panel2);border-color:var(--line2)} :is(#view-cmsreg,#view-cmsnew) .cv-ow.on{background:var(--sel,var(--accent-soft));border-color:var(--sel-line,var(--accent-ink))} :is(#view-cmsreg,#view-cmsnew) .cv-ow.zero .cv-own-t{color:var(--mute)} :is(#view-cmsreg,#view-cmsnew) .cv-own-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600} :is(#view-cmsreg,#view-cmsnew) .cv-own-n small{font-weight:400;color:var(--mute);font-size:12px;margin-left:2px} :is(#view-cmsreg,#view-cmsnew) .cv-own-bar{display:block;height:12px;border-radius:6px;background:var(--surface-3);overflow:hidden;min-width:0} :is(#view-cmsreg,#view-cmsnew) .cv-own-trk{display:flex;height:100%;gap:1px} :is(#view-cmsreg,#view-cmsnew) .cv-own-trk>span{display:block;height:100%;min-width:3px} :is(#view-cmsreg,#view-cmsnew) .cv-own-t{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap} :is(#view-cmsreg,#view-cmsnew) .cv-own-t b{font-weight:700;min-width:16px;text-align:right} :is(#view-cmsreg,#view-cmsnew) .cv-own-t small{color:var(--mute);font-size:13px;overflow:hidden;text-overflow:ellipsis} :is(#view-cmsreg,#view-cmsnew) .cv-own-r{text-align:right;color:var(--mute);font-size:13px} /* ── 월별 막대(SVG — 1단위=1px 로 다시 그린다) ── */ :is(#view-cmsmem,#view-cmspay) .cv-cols{display:block;width:100%;height:auto;overflow:visible} :is(#view-cmsmem,#view-cmspay) .cv-grid{stroke:var(--line);stroke-width:1} :is(#view-cmsmem,#view-cmspay) .cv-ax{font-size:12px;fill:var(--mute);font-variant-numeric:tabular-nums} :is(#view-cmsmem,#view-cmspay) .cv-xl{font-size:12px;fill:var(--ink2,var(--mute))} :is(#view-cmsmem,#view-cmspay) .cv-xs{font-size:12px;fill:var(--mute)} :is(#view-cmsmem,#view-cmspay) .cv-vt{font-size:12px;fill:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} :is(#view-cmsmem,#view-cmspay) .cv-cols rect.cv-f-ok.cv-est{fill-opacity:.72} :is(#view-cmsmem,#view-cmspay) .cv-hl{stroke:#fff;stroke-width:2.5} :is(#view-cmsmem,#view-cmspay) .cv-unk{fill:none;stroke:var(--border-interactive);stroke-width:1.2;stroke-dasharray:4 3} :is(#view-cmsmem,#view-cmspay) .cv-unkt{font-size:12px;fill:var(--mute)} :is(#view-cmspay) .cv-rt{font-size:12px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums} /* 출금 KPI */ #view-cmspay .cv-kpi{display:grid;gap:10px;align-content:start} #view-cmspay .cv-kpi>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)} #view-cmspay .cv-kpi .k{width:100%;font-size:13px;color:var(--mute)} #view-cmspay .cv-kpi b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)} #view-cmspay .cv-kpi b small{font-size:13px;font-weight:600;margin-left:2px;color:var(--mute)} #view-cmspay .cv-kpi>div>small{font-size:13px;color:var(--mute)} #view-cmspay .cv-kpi>div.bad b{color:var(--bad-ink)} #view-cmspay .cv-kpi>div.zero b{color:var(--mute)} /* 정산 흐름 */ #view-cmsset .cv-flow{list-style:none;margin:0;padding:0;display:grid;gap:4px} #view-cmsset .cv-fl{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,190px);gap:14px;align-items:center;padding:8px 0;border-top:1px solid var(--line)} #view-cmsset .cv-fl:first-child{border-top:0} #view-cmsset .cv-fl-d b{display:block;font-size:15px} #view-cmsset .cv-fl-d small{font-size:12px;color:var(--mute)} #view-cmsset .cv-fl-n{font-size:13px;color:var(--mute);text-align:right} #view-cmsset .cv-fl-n b{color:var(--ink)} #view-cmsset .cv-fl-n b.cv-bad{color:var(--bad-ink)} @media (max-width:1180px){ /* ── 반응형 ── */ :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-setup,#view-intake) :is(.cv-2,.cv-2.cv-2s,.cv-2.cv-2b,.cv-2.cv-2h){grid-template-columns:minmax(0,1fr)} #view-cmspay .cv-2.cv-2c{grid-template-columns:minmax(0,1fr)} #view-cmspay .cv-kpi{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:1024px){ /* 손가락으로 쓰는 폭 — 누를 수 있는 것은 44px */ :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-tg, :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) button.cv-lgi, :is(#view-cmsreg,#view-cmsnew) .cv-ow{min-height:44px} } @media (max-width:700px){ :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-card{padding:12px 12px 14px} :is(#view-cmsreg,#view-cmsnew) .cv-dnw{grid-template-columns:minmax(0,1fr)} :is(#view-cmsreg,#view-cmsnew) .cv-dn{width:112px;height:112px;margin:0 auto} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lg{grid-template-columns:repeat(2,minmax(0,1fr))} :is(#view-cmsreg,#view-cmsnew) .cv-ow{grid-template-columns:64px minmax(40px,1fr) auto 40px;gap:8px} :is(#view-cmsreg,#view-cmsnew) .cv-own-t small{display:none} #view-cmspay .cv-kpi{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #view-cmspay .cv-kpi>div{padding:8px 8px} #view-cmspay .cv-kpi b{font-size:18px} #view-cmspay .cv-kpi>div>small{display:none} #view-cmsset .cv-fl{grid-template-columns:minmax(0,1fr)} #view-cmsset .cv-fl-n{text-align:left} } /* 재건축 4단계(C) 합친 시트 · 수임동의 · 전체 111장 중 87번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 999cb 999cd 999cf 999zzz3 */ /* ── 스텝퍼(정산 흐름 · 홈택스 신청) ── */ :is(#view-cmsset,#view-intake) .cv-step{display:flex;list-style:none;margin:0;padding:0;min-width:0} :is(#view-cmsset,#view-intake) .cv-step li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;font-size:13px;color:var(--mute)} :is(#view-cmsset,#view-intake) .cv-step li+li::before{content:"";position:absolute;top:13px;right:calc(50% + 15px);left:calc(-50% + 15px);height:2px;border-radius:1px;background:var(--line2)} :is(#view-cmsset,#view-intake) .cv-step li.s-done+li::before{background:var(--ok-fill)} :is(#view-cmsset,#view-intake) .cv-step li i{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-style:normal;font-weight:800;font-size:13px;border:2px solid var(--border-interactive);background:var(--panel);color:var(--mute)} :is(#view-cmsset,#view-intake) .cv-step li.s-done i{background:var(--ok-fill);border-color:var(--ok-fill);color:#fff} :is(#view-cmsset,#view-intake) .cv-step li.s-run i{border-color:var(--info-fill);color:var(--info);background:var(--info-soft)} :is(#view-cmsset,#view-intake) .cv-step li.s-need i{border-color:var(--warn-fill);color:var(--warn-ink);background:var(--warn-soft)} :is(#view-cmsset,#view-intake) .cv-step li.s-fail i{background:var(--bad-fill);border-color:var(--bad-fill);color:#fff} :is(#view-cmsset,#view-intake) .cv-step li.s-skip i{border-style:dashed} :is(#view-cmsset,#view-intake) .cv-step li.cur i{box-shadow:0 0 0 4px var(--accent-soft)} :is(#view-cmsset,#view-intake) .cv-step .cv-sl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:600;margin-top:2px} :is(#view-cmsset,#view-intake) .cv-step li.s-wait .cv-sl{color:var(--mute);font-weight:400} :is(#view-cmsset,#view-intake) .cv-step .cv-ss{font-size:12px;color:var(--mute);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} :is(#view-cmsset,#view-intake) .cv-step li.s-fail .cv-ss{color:var(--bad-ink);font-weight:700} :is(#view-cmsset,#view-intake) .cv-step li.s-need .cv-ss{color:var(--warn-ink);font-weight:700} :is(#view-cmsset,#view-intake) .cv-step li.s-run .cv-ss{color:var(--info);font-weight:700} #view-intake .cv-step.mini li i{width:22px;height:22px;font-size:12px;border-width:1.5px} #view-intake .cv-step.mini li+li::before{top:10px;right:calc(50% + 12px);left:calc(-50% + 12px)} #view-intake .cv-step.mini .cv-sl{font-size:12px;font-weight:400} #view-intake .cv-step.mini .cv-ss{display:none} /* 홈택스 신청 카드 안 스텝퍼 */ #view-intake .cv-htstep{margin:10px 0 4px;padding:12px 12px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)} #view-intake .cv-htstep[hidden]{display:none} #view-intake .cv-htmsg{margin:8px 2px 0;font-size:13px;color:var(--ink2,var(--mute));overflow-wrap:anywhere} #view-intake .cv-htmsg.zero{color:var(--mute)} #view-intake .cv-htl{list-style:none;margin:0;padding:0;display:grid;gap:6px} #view-intake .cv-htl>li{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:10px;align-items:center} #view-intake .cv-ht-nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 거래처 셋팅 단계 막대(js/993 stBar)를 이어진 스텝퍼로 — 동그라미 사이에 선, 끝난 단계 뒤 선은 초록 */ /* R6: 'API 요청' 은 7번째 칸(예전 8 은 없는 칸이라 늘 보였다) */ /* 수임 동의 — 신청 구분 한 곳 · 대표세무사 번호 대기 · 이전 오류 */ #view-intake .ik-kindl{font-size:13px;color:var(--mute);white-space:nowrap} #view-intake .ht-kindt{margin:6px 0;font-size:14px} #view-intake .ht-kindt .sub{font-size:13px;color:var(--mute)} #view-intake .ik-offwarn{color:var(--bad-ink);font-weight:600} #view-intake .cv-ht-nm small{font-weight:400;color:var(--mute);font-size:13px} #view-intake .cv-htold{font-size:13px;color:var(--mute)} #view-intake .cv-htre{border:0;background:none;padding:0;color:var(--accent-ink);text-decoration:underline;cursor:pointer;font:inherit;min-height:24px} /* 2026-10-11 메뉴 전체 점검(대표님 "텍스트 최대한 줄이고 한눈에") — docs/디자인_벤치마크_2026-10.md 카드 말투를 홈 한눈 카드와 맞춘다: 모서리 20 · 옅고 넓은 그림자(어둡게는 선만). AI 요약 띠(.br)·안쪽 카드는 그대로. */ :is(#view-setup,#view-intake){--au-sh:0 1px 2px rgb(18 24 38/.04),0 8px 24px rgb(18 24 38/.06)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(#view-setup,#view-intake){--au-sh:none} } :root[data-theme="dark"] :is(#view-setup,#view-intake){--au-sh:none} :is(#view-setup,#view-intake) .card:not(.card .card):not(.br){border-radius:var(--r-card);box-shadow:var(--au-sh)} /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 88번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 999ce 999cg */ @media (max-width:700px){ #view-intake .cv-htl>li{grid-template-columns:minmax(0,1fr)} :is(#view-cmsset,#view-intake) .cv-step .cv-sl{white-space:normal;font-size:12px;line-height:1.3} } /* ── 2026-10-07 수임·CMS 보정 (평가 지적 반영) ───────────────────────── */ /* 신규 등록 '정산 계좌' 안내글이 선택칸 위에 겹치던 것 — 안내는 선택칸 아래 한 줄로 */ #view-cmsnew #cmn-macct-h{position:static;transform:none;display:block;margin:6px 0 0;pointer-events:auto;white-space:normal;line-height:1.45} #view-cmsnew #cmn-macct{max-width:100%} /* 웹 모드 신규 등록 — 단계 안내 · 필수 별표 숨김 · 복사/인쇄 단추 */ #view-cmsnew .cms-steps{margin:6px 0 0;padding-left:20px;font-size:14px} #view-cmsnew .cms-steps li{margin:2px 0} #view-cmsnew.cmn-web .cmn-req{display:none} #view-cmsnew .cmn-webacts{display:inline-flex;flex-wrap:wrap;gap:8px;margin-left:auto} /* 회원 관리 상세 — 웹 모드 안내 한 줄 */ #view-cmsmem .cmm-webnote{margin:8px 0 0;font-size:13px;color:var(--mute);line-height:1.5} /* 출금(웹 모드) — 그 달 결과 + 미출금 목록 */ #view-cmspay .cpy-wm{padding:16px} #view-cmspay .cpy-wm-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px} #view-cmspay .cpy-wm-h h3{margin:0;font-size:17px} #view-cmspay .cpy-wm-h .sub{font-size:13px;color:var(--mute)} #view-cmspay .cpy-wm-m{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mute)} #view-cmspay .cpy-wm-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px} #view-cmspay .cpy-wm-k>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);min-width:0} #view-cmspay .cpy-wm-k .k{width:100%;font-size:13px;color:var(--mute)} #view-cmspay .cpy-wm-k b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)} #view-cmspay .cpy-wm-k b small{font-size:13px;font-weight:600;margin-left:2px;color:var(--mute)} #view-cmspay .cpy-wm-k>div>small{font-size:13px;color:var(--mute)} #view-cmspay .cpy-wm-k>div.bad b{color:var(--bad-ink)} #view-cmspay .cpy-wm-k>div.zero b{color:var(--mute)} #view-cmspay .cpy-wm-later{margin-top:10px;font-size:14px} #view-cmspay .cpy-wm-later summary{cursor:pointer;min-height:32px;display:flex;align-items:center;gap:6px} #view-cmspay .cpy-wm-later summary small,#view-cmspay .cpy-wm-later p small{color:var(--mute);font-size:13px} #view-cmspay .cpy-wm-later p{margin:6px 0 0;line-height:1.7} #view-cmspay #cpy-webmode .btn{margin-left:4px} /* 정산 — 출금결과 엑셀이 없는 칸 · 웹 모드에서 'API 요청' 열 숨김 */ #view-cmsset #cst-stats .cst-nores{grid-column:span 2} #view-cmsset #cst-stats .cst-nores .btn{align-self:flex-start;margin-top:4px} #view-cmsset table.cst-t.cst-noapi th:nth-child(7),#view-cmsset table.cst-t.cst-noapi td:nth-child(7){display:none} @media (max-width:767px){ #view-cmspay .cpy-wm-k{grid-template-columns:repeat(2,minmax(0,1fr))} #view-cmsset #cst-stats:not([hidden]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible} /* 휴대폰 공용 '가로로 미는 숫자 띠' 가 정산 칸을 화면 밖으로 밀던 것 — 2×2 */ #view-cmsset #cst-stats>.card{flex:none;width:auto!important} #view-cmsset #cst-stats>.card{min-width:0;max-width:none;height:auto!important;max-height:none} #view-cmsset #cst-stats .v{white-space:normal;overflow-wrap:anywhere} #view-cmsset #cst-stats .v small{display:block} #view-cmsset #cst-stats .v small.u{display:inline} #view-cmsreg .wht-head{flex-wrap:wrap} /* 검색칸이 85px 로 눌려 '거래처 검' 까지만 보이던 것 — 검색은 아래 한 줄 전체 */ #view-cmsreg .wht-head .cr-api{margin-right:auto!important} #view-cmsreg #cr-q{flex:1 1 100%;order:9;width:100%;min-width:0} #view-cmsnew .cmn-webacts{margin-left:0;width:100%} #view-cmsnew .cmn-webacts .btn{flex:1 1 auto;min-height:44px} #view-intake .cv-htre{min-height:44px} } #view-cmspay .cv-2c.cv-nokpi{grid-template-columns:minmax(0,1fr)} @media (min-width:768px){ #view-intake .cv-htl>li{grid-template-columns:minmax(0,200px) minmax(0,1fr)} } #view-cmspay .cpy-wm-t th small{font-weight:400;color:var(--mute)} #view-cmspay .cpy-wm-t .rs{color:var(--mute);font-size:13px} #view-cmspay .cpy-wm-more{margin-top:8px} #view-cmspay .cpy-wm .tblwrap{max-height:none;overflow:visible;margin:0} @media (max-width:767px){ #view-cmspay .cpy-wm .tblwrap{margin:0;width:auto;overflow:visible;max-height:none} #view-cmspay .cpy-wm-t thead{display:none} #view-cmspay .cpy-wm-t,#view-cmspay .cpy-wm-t tbody{display:block;width:100%} #view-cmspay .cpy-wm-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 2px;border-top:1px solid var(--line)} #view-cmspay .cpy-wm-t td{display:block;padding:0;border:0;min-width:0} #view-cmspay .cpy-wm-t td.nm{grid-column:1;grid-row:1} #view-cmspay .cpy-wm-t td.am{grid-column:2;grid-row:1} #view-cmspay .cpy-wm-t td.rs{grid-column:1;grid-row:2} #view-cmspay .cpy-wm-t td.ow{grid-column:2;grid-row:2;text-align:right;color:var(--mute);font-size:13px} #view-cmspay .cpy-wm-t td.empty{grid-column:1 / -1} #view-cmspay .cpy-wm-t .cmm-lnk{min-height:32px;text-align:left} } @media (max-width:600px){ /* ===================== R4 (2026-10-08) · 휴대폰(≤600px) CMS 목록·범례 ===================== ① 상호가 '나희채 한복 …' 으로 잘려 영등포점·잠실본점이 같은 이름으로 보였다 → 상호는 줄을 바꿔 다 보이게(최대 3줄) + 아래 줄에 사업자번호(구별 수단). ② 신규 등록에서 등록할 곳 목록이 안내·그래프 아래(약 1,300px)에 있었다 → 목록을 맨 위로, 그래프는 처음엔 접힘(999c js). ③ 도넛 범례가 '기장료 …'·'등록…' 으로 잘렸다 → 범례 이름은 줄을 바꾼다. */ #view-cmsnew #cmn-lrows td.name,#view-cmsreg #cr-rows td.name{white-space:normal;overflow:visible;text-overflow:clip} #view-cmsnew #cmn-lrows td.name .nm,#view-cmsreg #cr-rows td.name .nm{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3; white-space:normal!important;overflow:hidden;text-overflow:clip!important;word-break:keep-all;overflow-wrap:anywhere;line-height:1.3;margin:0;max-width:100%} #view-cmsnew #cmn-lrows td.name .sub,#view-cmsreg #cr-rows td.name .sub{display:block!important;margin-top:2px;line-height:1.3; color:var(--text-secondary,var(--mute));} #view-cmsnew:not(.hidden){display:flex!important;flex-direction:column} #view-cmsnew>*{order:5} #view-cmsnew>.wht-head{order:0} #view-cmsnew>#cmn-list,#view-cmsnew>#cmn-grid{order:1} #view-cmsnew>#cms-webmode{order:2} #view-cmsnew>#cv-new{order:3} #view-cmsnew>#cmn-reqs{order:4} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgl{white-space:normal;overflow:visible;text-overflow:clip; word-break:keep-all;overflow-wrap:anywhere;line-height:1.25} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-lgi{align-items:center;height:auto} } /* ===================== R5 (2026-10-08) · 휴대폰 CMS 신규 등록 ===================== ① 상태 알약 '해지 · 재등록 시 확인' 이 [재등록] 단추 밑으로 46px 겹쳤다 → 좁은 화면에서는 '해지'·'일시정지' 만(뜻은 툴팁), 알약은 칸 안에서 줄을 바꿀 수 있게. ② 사업자번호가 '553-13-019…' 로 잘렸다(같은 이름 거래처를 구별하는 수단) → 말줄임 없이 다 보이게. */ #view-cmsnew #cmn-lrows .cmn-stp{max-width:100%} @media (max-width:600px){ #view-cmsnew #cmn-lrows .cmn-stx{display:none} #view-cmsnew #cmn-lrows td .pill{white-space:normal;max-width:100%;line-height:1.3;text-align:center} #view-cmsnew #cmn-lrows td.name .sub,#view-cmsreg #cr-rows td.name .sub{overflow:visible;text-overflow:clip;white-space:nowrap;font-size:12.5px!important;letter-spacing:-.2px} #view-cmsnew #cmn-lrows td.name,#view-cmsreg #cr-rows td.name{min-width:92px} /* 사업자번호(12자) 한 줄이 들어갈 폭 — 옆 금액 칸을 덮지 않게 */ #view-cmsreg table.card-sm tbody>tr.cr-r{grid-template-columns:minmax(96px,1fr) auto auto} /* 줄이 3칸 격자라 칸 최소폭은 여기서 — 상태 칸(알약·꼬리표·단추)은 줄을 바꿔 자리를 내준다 */ #view-cmsreg #cr-rows td.cr-st{flex-wrap:wrap;justify-content:flex-end;row-gap:4px} } /* ===================== R6 (2026-10-08) ===================== ① 해지·정지 회원의 출금액·약정일은 '중지 전' 값 — 흐리게(회원 관리 상세·목록, 등록 현황 '—'). ② 휴대폰 신규 등록 [재등록] 단추가 칸(64px)보다 2px 넓어 오른쪽 테두리 6px 이 잘렸다 → 좁은 화면에서 안쪽 여백을 줄이고 칸이 단추를 자르지 않게. */ .cmm-stopv{color:var(--text-secondary,var(--mute))} .cmm-stopv .num{color:inherit} #view-cmsreg td.cr-stopv{color:var(--text-secondary,var(--mute))} @media (max-width:600px){ #view-cmsnew #cmn-lrows td.r{overflow:visible} #view-cmsnew #cmn-lrows td.r .btn{padding-inline:8px;min-width:44px;white-space:nowrap} } /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 89번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 999da 999dc 999de 999dg */ /* 2026-10-07 UI 개편 · d_근태_관리 — 이 영역 작업자만 고친다 */ /* ═══ 영역 D 시각화 층 — js/999d 와 짝. 되돌리기: 이 파일과 js/999d 를 비운다 ═══ 색은 토큰만(라이트·다크 자동). 뜻은 글자·기호로도 적는다. */ /* ───── 공통 ───── */ #view-attend .udx-sub,#view-admin .udx-sub{font-size:13px;font-weight:500;color:var(--mute);margin-left:4px} #view-attend .udx-none,#view-admin .udx-none{font-size:13px;color:var(--mute);padding:10px 2px} #view-attend .ops-i,#view-admin .ops-i,#view-settings .ops-i{min-width:28px;min-height:28px} /* ───── ① 이번 주 근무 ───── */ #view-attend .udx-wtop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:2px 0 8px} #view-attend .udx-wtop>b{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em} #view-attend .udx-wof{font-size:13px;color:var(--mute)} #view-attend .udx-wpct{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:2px 9px} #view-attend .udx-wpct.ok{color:var(--ok-ink);background:var(--ok-soft)} #view-attend .udx-week{display:block;width:100%;height:auto;max-height:150px;margin-top:10px;overflow:visible} #view-attend .udx-wfoot{font-size:13px;color:var(--mute);margin-top:6px} #view-attend .udx-wfoot b{color:var(--ink);font-weight:700} #view-attend .udx-wfoot b.ok{color:var(--ok-ink)} .udx-wb.track{fill:var(--surface-3)} .udx-wb.done{fill:var(--brand-chart)} .udx-wb.done.full{fill:var(--ok-fill)} .udx-wb.live{fill:url(#udxHatch);stroke:var(--brand-chart);stroke-width:1.5} .udx-wb.hol{fill:var(--panel2);stroke:var(--line2);stroke-width:1;stroke-dasharray:3 3} .udx-wb.lvpart{fill:var(--info-soft);stroke:var(--info);stroke-width:1;stroke-dasharray:3 2} .udx-hl{stroke:var(--icon-secondary);stroke-width:2} .udx-tgt{stroke:var(--ink2);stroke-width:1;stroke-dasharray:4 3} .udx-tgt-t{font-size:12px;fill:var(--mute);font-weight:600} .udx-wv{font-size:12px;fill:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} .udx-wv.dim{fill:var(--mute);font-weight:500} .udx-wd{font-size:12.5px;fill:var(--mute);font-weight:600} .udx-wd.now{fill:var(--accent-ink);font-weight:800} /* ───── ② 내 연차 도넛 ───── */ #view-attend .udx-lv{display:flex;align-items:center;gap:18px;padding-top:4px} #view-attend .udx-donut{flex:none;width:108px;height:108px} .udx-dn{fill:none;stroke-width:11} .udx-dn.track{stroke:var(--surface-3)} .udx-dn.used{stroke:var(--brand-chart)} .udx-dn.pend{stroke:var(--warn-fill)} .udx-dn-v{font-size:22px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums} .udx-dn-s{font-size:12px;fill:var(--mute);font-weight:600} #view-attend .udx-lvl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0;flex:1} #view-attend .udx-lvl li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2)} #view-attend .udx-lvl li b{color:var(--ink);font-weight:700;font-size:14px} #view-attend .udx-lvl li.tot{grid-template-columns:minmax(0,1fr) auto;border-top:1px solid var(--line);padding-top:6px;margin-top:2px} #view-attend .udx-lvl .sw{display:inline-block;width:12px;height:12px;border-radius:3px} #view-admin .udx-legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px} /* 2026-10-12 그래프 규칙: 범례 표식 10px 네모 */ .udx-lvl .sw.used{background:var(--brand-chart)} .udx-lvl .sw.pend{background:var(--warn-fill)} .udx-lvl .sw.left{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line2)} /* ───── ③ 근태 한눈에 (근태 기록 칸 안) ───── */ #view-attend .udx-av{margin:12px 16px 14px;display:flex;flex-direction:column;gap:12px;min-width:0} #view-attend .udx-avh{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #view-attend .udx-avh h3{margin:0;font-size:16px;font-weight:700} #view-attend .udx-rng{margin-left:auto} #view-attend .udx-rng button{min-height:28px} #view-attend .udx-kp{display:grid;gap:8px} #view-attend .udx-k{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:2px;min-width:0} #view-attend .udx-k span{font-size:13px;color:var(--mute);font-weight:600;white-space:nowrap} #view-attend .udx-k b{font-size:18px;font-weight:800;color:var(--ink);} #view-attend .udx-k.warn b{color:var(--warn-ink)} #view-attend .udx-k.zero b{color:var(--mute);font-weight:600} #view-attend .udx-k.bad b{color:var(--bad-ink)} /* R6: 퇴근 누락은 빨강 — 제목 줄·표 꼬리표와 같은 무게(지각보다 가볍게 보이지 않게) */ #view-attend .udx-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;align-items:start} #view-attend .udx-grid.many{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)} #view-attend .udx-blk{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel);min-width:0} #view-attend .udx-blk h4{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink)} #view-attend .udx-rows,#view-admin .udx-rows{display:flex;flex-direction:column;gap:6px} #view-attend .udx-row{display:grid;grid-template-columns:72px minmax(0,1fr) 84px;align-items:center;column-gap:10px;row-gap:3px} #view-attend .udx-row.lv{grid-template-columns:64px minmax(0,1fr) 64px} #view-attend .udx-nm,#view-admin .udx-nm{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left} #view-attend button.udx-nm{border:0;background:transparent;padding:0 2px;min-height:28px;cursor:pointer;border-radius:6px;font:inherit;font-size:14px;font-weight:600;color:var(--ink)} #view-attend button.udx-nm:hover{text-decoration:underline;background:var(--surface-3)} #view-attend button.udx-nm:focus-visible{outline:2px solid var(--accent);outline-offset:1px} #view-attend .udx-bar{position:relative;height:12px;border-radius:999px;background:var(--surface-3)} #view-attend .udx-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--brand-chart)} #view-attend .udx-bar i.low{background:var(--warn-fill)} #view-attend .udx-bar u{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px} #view-attend .udx-val{text-align:right;display:flex;flex-direction:column;line-height:1.2} #view-attend .udx-val b,#view-admin .udx-val b{font-size:14.5px;font-weight:800;color:var(--ink)} #view-attend .udx-val small,#view-admin .udx-val small{font-size:12px;color:var(--mute);white-space:nowrap} #view-attend .udx-row.lv .udx-val{flex-direction:row;justify-content:flex-end;align-items:baseline;gap:2px} #view-attend .udx-chs{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:4px} #view-attend .udx-chs:empty{display:none} #view-attend .udx-ch{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:600;border-radius:999px;padding:1px 8px;white-space:nowrap} #view-attend .udx-ch.late,#view-attend .udx-ch.early{background:var(--warn-soft);color:var(--warn-ink)} #view-attend .udx-ch.miss{background:var(--bad-soft);color:var(--bad-ink)} #view-attend .udx-ch.wfh{background:var(--info-soft);color:var(--info)} #view-attend .udx-ch.lv{background:var(--ok-soft);color:var(--ok-ink)} #view-attend .udx-sbar{display:flex;height:12px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line2);background:var(--panel)} #view-attend .udx-sbar i{display:block;min-width:0} #view-attend .udx-sbar i.used{background:var(--brand-chart)} #view-attend .udx-sbar i.pend{background:repeating-linear-gradient(45deg,var(--warn-fill) 0 3px,transparent 3px 6px)} #view-attend .udx-sbar i.left{background:transparent} #view-attend .udx-dowsvg{display:block;width:100%;height:auto;max-height:150px;overflow:visible} /* 히트맵 */ #view-attend .udx-heat{padding-bottom:10px} #view-attend .udx-hscroll{overflow-x:auto;padding-bottom:4px} #view-attend .udx-hscroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} #view-attend .udx-hgrid{display:grid;grid-template-columns:72px repeat(var(--n),minmax(19px,1fr));gap:3px;align-items:center;min-width:calc(72px + var(--n) * 22px)} #view-attend .udx-hd{font-size:12px;color:var(--mute);text-align:center;line-height:1.15;font-variant-numeric:tabular-nums;border-radius:4px;padding:1px 0} #view-attend .udx-hd i{display:block;font-style:normal;font-size:12px} #view-attend .udx-hd.off{background:var(--surface-3)} #view-attend .udx-hd.now{color:var(--accent-ink);font-weight:800;box-shadow:inset 0 -2px 0 var(--brand)} #view-attend .udx-hgrid .udx-hn{font-size:13.5px;min-height:28px} .udx-c{position:relative;display:flex;align-items:center;justify-content:center;height:22px;border-radius:4px;font-size:12px;color:var(--ink);background:var(--panel2);box-sizing:border-box} .udx-c b{font-size:12px;font-weight:800;line-height:1} .udx-c.none{background:var(--panel);box-shadow:inset 0 0 0 1px var(--border-interactive);opacity:.75} .udx-c.fut{background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)} .udx-c.off{background:repeating-linear-gradient(45deg,var(--surface-3) 0 3px,var(--panel2) 3px 6px)} .udx-c.blank{background:transparent} .udx-c.l1{background:color-mix(in srgb,var(--brand-chart) 16%,var(--panel))} .udx-c.l2{background:color-mix(in srgb,var(--brand-chart) 32%,var(--panel))} .udx-c.l3{background:color-mix(in srgb,var(--brand-chart) 50%,var(--panel))} .udx-c.l4{background:color-mix(in srgb,var(--brand-chart) 68%,var(--panel))} .udx-c.lv{background:var(--info-soft);box-shadow:inset 0 0 0 1px var(--info)} .udx-c.lv b{color:var(--info)} .udx-c.live{background-image:repeating-linear-gradient(45deg,transparent 0 3px,color-mix(in srgb,var(--panel) 55%,transparent) 3px 6px)} .udx-c.late::after{content:"";position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--bad-fill);box-shadow:0 0 0 1.5px var(--panel)} .udx-c.early::before{content:"";position:absolute;left:2px;bottom:2px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--ink)} .udx-c.miss{box-shadow:inset 0 0 0 2px var(--bad)} #view-attend .udx-leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px;color:var(--mute)} #view-attend .udx-leg>span{display:inline-flex;align-items:center;gap:6px} #view-attend .udx-leg .udx-c{width:20px;height:16px;flex:none;opacity:1} /* 한 사람 달력 */ #view-attend .udx-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} #view-attend .udx-cw{font-size:13px;color:var(--mute);text-align:center;font-weight:600;padding-bottom:2px} #view-attend .udx-cal .udx-c{height:50px;flex-direction:column;justify-content:space-between;align-items:stretch;padding:3px 5px} #view-attend .udx-cal .udx-c em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink);line-height:1} #view-attend .udx-cal .udx-c b{position:absolute;right:5px;top:4px} #view-attend .udx-cal .udx-c small{font-size:12px;font-weight:700;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1} #view-attend .udx-cal .udx-c.blank{height:auto} #view-attend .udx-cal .udx-c.late::after{top:auto;bottom:4px;left:5px;right:auto} #view-attend .udx-cal .udx-c.early::before{left:14px;bottom:5px} @media (min-width:1001px){ /* 월 기록 표 — 위에 그림이 생겨 화면 맞춤 대신 제 칸에서 굴린다(데스크톱만, 휴대폰은 페이지 스크롤) */ #view-attend #at-panel-log .tblwrap[data-nofit]{max-height:560px!important;overflow:auto} } /* 비서에서 온 요청이 비어 있을 때 큰 빈칸을 만들지 않는다(빈 칸 높이 맞춤 규칙의 예외) */ #view-attend #arq-card td.empty{height:auto!important;padding:16px!important} .udx-spark{display:block;width:96px;height:40px} .udx-spark rect{fill:var(--chart-rest)} .udx-spark rect.last{fill:var(--brand-chart)} .udx-spark rect.z{fill:var(--line2)} .udx-spark.ar rect.last{fill:var(--bad-fill)} .udx-ring{display:block;width:52px;height:52px} .udx-ring .t{fill:none;stroke:var(--surface-3);stroke-width:5} .udx-ring .v{fill:none;stroke:var(--brand-chart);stroke-width:5;stroke-linecap:round} .udx-ring text{font-size:12px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums} /* ───── 껍데기 — 하위 메뉴에 나무 줄기 선, 휴대폰 탭바 선택에 옅은 알약 ───── */ @media (max-width:900px){ #mnav button.on svg{background:var(--accent-soft);border-radius:999px;padding:2px 12px;box-sizing:content-box} } @media (max-width:1200px){ /* ───── 반응형 ───── */ #view-attend .udx-grid.many{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #view-attend .udx-grid.many>.udx-ppl{grid-column:1 / -1} } @media (max-width:760px){ #view-attend .udx-grid,#view-attend .udx-grid.many{grid-template-columns:minmax(0,1fr)} #view-attend .udx-av{margin:10px 12px 12px} #view-attend .udx-row{grid-template-columns:64px minmax(0,1fr) 72px} } /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 90번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 999db 999dd 999df 999dh */ /* ───── ④ 대표실 ───── */ #view-admin .adm-k.udx-has{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-content:start} #view-admin .adm-k.udx-has>:not(.udx-mini){grid-column:1} #view-admin .adm-k.udx-has>.udx-mini{grid-column:2;grid-row:1 / span 3;align-self:center;display:flex;flex-direction:column;align-items:center;gap:2px} #view-admin .adm-k.udx-has>.udx-mini.wide{grid-column:1 / -1;grid-row:auto;flex-direction:row;align-items:flex-end;gap:8px;margin-top:8px} #view-admin .udx-mini.wide .udx-spark{flex:1;width:auto;max-width:180px;height:26px} #view-admin .udx-mini.wide .udx-cap{margin-left:auto} #view-admin .udx-mini .udx-cap{font-size:12px;color:var(--mute);white-space:nowrap} #view-admin .udx-load .detail-head{display:flex;align-items:center;gap:8px} #view-admin .udx-load .detail-head .pill{margin-left:auto} #view-admin .udx-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin:2px 0 10px} #view-admin .udx-legend span{display:inline-flex;align-items:center;gap:6px} .udx-legend .sw.book,.udx-stk i.book{background:var(--brand-chart)} .udx-legend .sw.rep,.udx-stk i.rep{background:var(--info-fill)} .udx-legend .sw.etc,.udx-stk i.etc{background:var(--chart-rest)} #view-admin .udx-row.ow{display:grid;grid-template-columns:64px minmax(0,1fr) 150px;align-items:center;column-gap:10px;width:100%; border:0;background:transparent;padding:6px 6px;border-radius:var(--r-ctl);cursor:pointer;font:inherit;color:inherit;text-align:left;min-height:32px} #view-admin .udx-row.ow:hover{background:var(--surface-3)} #view-admin .udx-row.ow:focus-visible{outline:2px solid var(--accent);outline-offset:1px} #view-admin .udx-stk{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:1px;background:var(--panel)} #view-admin .udx-stk i{display:block;min-width:0} #view-admin .udx-val{display:flex;flex-direction:column;text-align:right;line-height:1.2} /* 시스템 신호등 */ #view-admin #adm-sys .detail-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #view-admin .udx-lamp{margin-left:auto;display:inline-flex;align-items:center;gap:8px} #view-admin .udx-lights{display:inline-flex;gap:4px;padding:4px 6px;border-radius:999px;background:#25272D;box-shadow:inset 0 0 0 1px #3A3D45} #view-admin .udx-lights i{width:12px;height:12px;border-radius:50%;background:#454852} #view-admin .udx-lt{font-size:14px;font-weight:800;color:var(--mute)} #view-admin .udx-lt.bad{color:var(--bad-ink)} #view-admin .udx-lt.warn{color:var(--warn-ink)} #view-admin .udx-lt.ok{color:var(--ok-ink)} #view-admin .udx-lc{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums} #view-admin #adm-sys .ops-dot{width:16px;height:16px;display:inline-grid;place-items:center;flex:none} #view-admin #adm-sys .ops-dot::after{font-size:11px;font-weight:900;line-height:1;color:#fff;font-style:normal} #view-admin #adm-sys .ops-dot.ok::after{content:"✓"} #view-admin #adm-sys .ops-dot.warn::after{content:"!"} #view-admin #adm-sys .ops-dot.bad::after{content:"✕"} #view-admin #adm-sys .ops-dot.ok{background:var(--ok-fill)} #view-admin #adm-sys .ops-dot.warn{background:var(--warn-fill)} #view-admin #adm-sys .ops-dot.bad{background:var(--bad-fill)} /* ───── ⑤ 설정 ───── */ #view-settings .set-sec .detail-head h3{display:flex;align-items:center;gap:8px} #view-settings .udx-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-ctl);background:var(--accent-soft);color:var(--accent-ink);flex:none} #view-settings .udx-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media (max-width:1024px){ #view-attend button.udx-nm,#view-attend .udx-hgrid .udx-hn,#view-attend .udx-rng button{min-height:44px} #view-attend .ops-i,#view-admin .ops-i,#view-settings .ops-i{min-width:44px;min-height:44px} #view-admin .udx-row.ow{min-height:48px} #view-settings #set-push-st{min-height:44px} } @media (max-width:600px){ #view-attend .udx-lv{gap:12px} #view-attend .udx-donut{width:96px;height:96px} } /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 91번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 999dg 999di 999dk 965 */ @media (max-width:760px){ #view-admin .udx-row.ow{grid-template-columns:56px minmax(0,1fr) auto} #view-admin .udx-row.ow .udx-val small{display:none} } @media (max-width:1024px){ #sidebar .sb-logo{min-height:44px} } /* ═══ 2026-10-07 근태·관리 점검 반영 (평가 75 → 90) ═══ */ /* 표: 오늘 퇴근 전 · 공휴일 근무 · 비고 */ #view-attend .at-open{display:inline-flex;flex-direction:column;align-items:center;line-height:1.25;color:var(--warn-ink);font-weight:600} #view-attend .at-open small{font-size:12px;font-weight:500;color:var(--text-secondary,var(--mute))} .at-flag.hol{background:var(--surface-3);color:var(--ink);margin-right:6px} .at-flag.miss{background:var(--bad-soft);color:var(--bad-ink)} #view-attend td.at-note{font-size:12.5px;color:var(--text-secondary,var(--mute))} #view-attend tr.at-today>td{background:color-mix(in srgb,var(--accent-soft) 60%,transparent)} /* 이번 주 막대: 공휴일 근무 · 아래 작은 설명 줄 */ .udx-wb.done.holw{fill:var(--warn-fill)} .udx-wsub{font-size:12px;fill:var(--text-secondary,var(--mute));font-weight:600} .udx-wsub.live{fill:var(--accent-ink)} .udx-c.holw{box-shadow:inset 0 0 0 2px var(--warn-fill)} .udx-c.holw b{color:var(--ink)} #view-attend .udx-ch.open{background:var(--accent-soft);color:var(--accent-ink)} /* 한눈에: 그래프 접기 단추 */ #view-attend .udx-avh .udx-tog{margin-left:auto} #view-attend #udx-charts[hidden]{display:none!important} /* 비서 출퇴근 요청 — 패널 안 */ #view-attend .arq-card{margin:0 0 8px} #view-attend .arq-why{font-size:12px;color:var(--bad-ink);white-space:normal;margin-top:2px} #view-attend #at-panel-leave>.arq-card{border-top:1px solid var(--line);margin-top:8px;padding-top:2px} /* 명암비: 흰 바탕의 옅은 알약 글자는 -ink 토큰으로(라이트·다크 모두 4.5:1 이상) */ #arq-card .pill.warn,#at-appr-n.pill.warn,#bk-live.pill.warn,#set-push-st.pill.warn{background:var(--warn-soft);color:var(--warn-ink)} #arq-card .pill.mute,#at-appr-n.pill.mute,#bk-live.pill.mute,#set-push-st.pill.mute{background:var(--surface-3);color:var(--ink)} #arq-card .pill.ok,#bk-live.pill.ok,#set-push-st.pill.ok{background:var(--ok-soft);color:var(--ok-ink)} #arq-card .pill.bad,#bk-live.pill.bad,#set-push-st.pill.bad,#set-push-st.pill.seal{background:var(--bad-soft);color:var(--bad-ink)} /* 재택 창 머리의 닫기(✕) */ #dlg-wfh .dh .dlg-x{min-width:36px;font-size:16px;line-height:1} /* 한눈에 숫자 칸 7개 — 폭에 맞춰 한 줄(넓은 화면) · 줄바꿈(좁은 화면) */ #view-attend .udx-kp{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important} @media (max-width:600px){ #view-attend .udx-kp{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* ===== 2026-10-07 R3 · 근태·관리 3차 ===== */ /* 휴가 승인 탭 — 빈 표가 260px 상자 안에서 270px 빈칸으로 스크롤되던 것 · 직원 연차 표(몇 줄)도 잘리지 않게 전부 */ #at-panel-appr .tblwrap{max-height:none!important} #at-panel-appr td.empty{height:auto!important;min-height:0!important;padding:14px 16px!important} /* 대표실 미수 그래프 — 아직 등록하지 않은 달은 0 이 아니라 점선(자료 없음) */ .udx-spark rect.na{fill:none;stroke:var(--faint,#A3A8B1);stroke-width:1;stroke-dasharray:2 2} #view-admin .adm-kpi-asof{margin:0 0 8px;font-size:13px;color:var(--mute);line-height:1.5} #view-attend #at-meta.bad{color:var(--bad-ink)!important;font-weight:600} .at-flag.miss{white-space:normal} /* 휴대폰 대표실 '직원 업무량' — 제목이 두 줄로 접히던 것: 제목은 한 줄, 기준 알약은 그 아래 줄로 */ #udx-load .detail-head{flex-wrap:wrap;row-gap:6px} #udx-load .detail-head h3{white-space:nowrap;flex:none} @media (max-width:600px){ #udx-load .detail-head .pill{flex-basis:100%;white-space:normal;text-align:left} /* 휴대폰 근태 기록 '기록 없음' — 카드 줄 모양이 빈 줄에도 씌워져 왼쪽으로 밀리고 폭이 어긋나던 것 */ #view-attend #at-rows tr:has(>td.empty){display:block!important;margin:0;padding:0;border:0;background:none;box-shadow:none} #view-attend #at-rows td.empty{display:block!important;width:auto;margin:0;padding:16px!important;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--mute)} #view-attend #at-rows td.empty::before{content:none} #view-attend #at-panel-log>.tblwrap{margin-left:0;margin-right:0;width:auto} /* 카드 밖으로 넓히는 규칙(150차) 때문에 '한눈에' 칸보다 왼쪽으로 20px 밀려 있었다 */ #view-attend #at-panel-log #at-rows td.empty{padding:16px!important} } #view-attend #at-rows td.at-d .at-dwm{display:none} @media (max-width:767px){ /* ===================== R4 (2026-10-08) · 휴대폰 근태 기록 한 건 = 두 줄 ===================== 한 건이 7줄 카드(약 190px)라 한 달 전원(약 110건)이면 2만px 이었다. 라벨 대신 자리로 말한다: 1줄 = 날짜·요일·이름 ……… 근무 / 2줄 = 출근–퇴근 · 비고(지각·누락 꼬리표는 그대로). */ #view-attend #at-rows>tr:not(:has(>td.empty)){display:grid!important;grid-template-columns:max-content max-content minmax(0,1fr) fit-content(46%); grid-template-areas:"d nm nm w" "in out note note";column-gap:8px;row-gap:2px;align-items:baseline;padding:8px 12px;margin:0 0 6px} #view-attend #at-rows>tr>td{padding:0!important;display:block!important;text-align:left!important;min-width:0;border:0} #view-attend #at-rows>tr>td::before{content:none;display:none!important} #view-attend #at-rows>tr>td.at-d{grid-area:d;font-size:14px;font-weight:600} #view-attend #at-rows>tr>td.at-dw{display:none!important} #view-attend #at-rows>tr>td.at-d .at-y,#view-attend #at-rows>tr>td .at-mx{display:none} #view-attend #at-rows>tr>td.at-d .at-dwm{display:inline!important;margin-left:2px;font-weight:500;color:var(--text-secondary,var(--mute))} #view-attend #at-rows>tr>td.at-nm{grid-area:nm;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-attend #at-rows>tr>td.at-w{grid-area:w;text-align:right!important;font-size:14px;font-weight:600;white-space:nowrap} #view-attend #at-rows>tr>td.at-in{grid-area:in;font-size:13px!important;white-space:nowrap;font-weight:400} #view-attend #at-rows>tr>td.at-out{grid-area:out;font-size:13px!important;white-space:nowrap;font-weight:400} #view-attend #at-rows>tr>td.at-in:not(:empty)::before{content:"출근 ";display:inline!important;color:var(--text-secondary,var(--mute));font-weight:400;font-size:13px} #view-attend #at-rows>tr>td.at-out:not(:empty)::before{content:"퇴근 ";display:inline!important;color:var(--text-secondary,var(--mute));font-weight:400;font-size:13px} #view-attend #at-rows>tr>td.at-note{grid-area:note;text-align:right!important;font-size:13px!important;} #view-attend #at-rows>tr>td .at-flag{margin-left:4px} } /* 주간 막대 — 퇴근 누락(출근만 있는 날) 글자 */ #view-attend .udx-week .udx-wv.miss{fill:var(--bad-ink,var(--bad));font-weight:700} /* ===================== R5 (2026-10-08) · 근태·관리 5차 ===================== ① 1024~1366px 에서 '한눈에' 숫자 칸 8개가 7+1 로 갈리고 '61시간 3…' 처럼 숫자가 말줄임됐다 → 그 폭에서는 4열 × 2줄, 숫자는 말줄임 대신 줄바꿈(사실을 자르지 않는다). ② 대표실 숫자 칸의 근거 줄(.s) — 1180~1366px 에서 '미입력 13 · 해지·정지 3' 이 잘렸다 → 두 줄까지 허용. ③ 비고의 사무실 거리 — 근무시간 옆 'm' 을 분으로 읽지 않게 이름을 붙였다(270 js) */ #view-attend .udx-k b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:keep-all;overflow-wrap:anywhere;line-height:1.25} @media (min-width:601px) and (max-width:1366px){ #view-attend .udx-kp{grid-template-columns:repeat(4,minmax(0,1fr))!important} } #view-admin .adm-k .s{white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere} #view-attend .at-dist{white-space:nowrap;color:var(--text-secondary,var(--mute))} @media (max-width:767px){ /* R6 (2026-10-08) · 휴대폰 근태 카드의 비고 — '사무실 거리 출근 40m · 퇴근 35m' 가 한 줄 말줄임으로 잘렸다(공휴일 근무 줄은 퇴근 거리가 안 보임). 좁은 화면에서는 '거리 40m · 35m' 처럼 줄이고, 그래도 길면 줄을 바꾼다(말줄임 없음). */ #view-attend #at-rows>tr>td.at-note{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere} #view-attend #at-rows .at-dk{display:none} #view-attend #at-rows .at-dio{display:none} /* 출근·퇴근 둘 다 있을 때만 '거리 40m · 35m' (앞이 출근) — 하나뿐이면 '거리 출근 40m' 그대로 */ #view-attend #at-rows .at-flag,#view-attend #at-rows .at-dist{white-space:nowrap} } /* R6 · 숫자 배지 단추 글자 — 휴대폰 전체 메뉴에서는 '숫자 배지 켜짐', 설정 화면은 줄 이름이 이미 '숫자 배지' 라 '켜짐' 만 */ .sb-badge .sbb-k{font-style:normal} #view-settings .sb-badge .sbb-k{display:none} /* ═══ 2026-10-08 근태 2차 — 휴가 발생 · 휴가 조정 · 월간 근태 리포트 (js/965) ═══ 색은 토큰만 · 0 은 흐리게(.z) · 데스크톱 조작 요소 28px · 1024px 이하 44px · 767px 이하 카드 */ /* 탭이 다섯 개 — 좁은 폭에서는 옆으로 민다(줄바꿈으로 높이가 들쭉날쭉해지지 않게) */ #at-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%} #at-tabs::-webkit-scrollbar{display:none} #at-tabs button{white-space:nowrap;flex:none} #view-attend .hg-head{padding:14px 16px 0;gap:8px;flex-wrap:wrap;align-items:center} #view-attend .hg-adm{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap} #view-attend .hg-adm.hidden{display:none} #view-attend .hg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px} #view-attend .hg-asof{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-secondary,var(--mute))} #view-attend .hg-asof span{font-weight:600;color:var(--ink)} #view-attend .hg-asof input{min-height:32px} #view-attend .hg-dw{font-size:14px;color:var(--ink);margin-left:-2px} #view-attend .hg-q{min-height:32px;width:180px;max-width:100%} /* 켜짐 스위치 — 진짜 체크박스(role=switch) 위에 모양만 그린다 */ #view-attend .hg-sw{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer;min-height:32px} #view-attend .hg-sw input{position:absolute;opacity:0;width:44px;height:26px;margin:0;left:0;cursor:pointer} #view-attend .hg-sw-ui{position:relative;width:40px;height:24px;border-radius:12px;background:var(--line-strong,var(--border-interactive));transition:background .15s;flex:none} #view-attend .hg-sw-ui::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s} #view-attend .hg-sw input:checked+.hg-sw-ui{background:var(--accent-fill,var(--accent))} #view-attend .hg-sw input:checked+.hg-sw-ui::after{left:19px} #view-attend .hg-sw input:focus-visible+.hg-sw-ui{outline:2px solid var(--accent-fill,var(--accent));outline-offset:2px} #view-attend .hg-groups{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px} #view-attend .hg-groups[hidden]{display:none} #view-attend .hg-gchip{border:1px solid var(--border-interactive);background:var(--panel);color:var(--ink);border-radius:999px;padding:3px 12px;font-size:14px;min-height:28px;cursor:pointer} #view-attend .hg-gchip.on{background:var(--accent-soft,var(--sel));border-color:var(--accent-fill,var(--accent));color:var(--accent-ink);font-weight:600} #view-attend .hg-gchip b{font-weight:700;margin-left:2px} /* 표 */ #view-attend #at-panel-grant .tblwrap,#view-attend #at-panel-report .tblwrap{max-height:none;overflow-x:auto} #view-attend .hg-tbl,#view-attend .atr-tbl{width:100%;border-collapse:collapse} #view-attend .hg-tbl th{vertical-align:top;white-space:nowrap;padding:8px 8px 6px} /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 92번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 999dh 999dj 999zze */ @media (max-width:600px){ #view-admin .adm-k.udx-has{grid-template-columns:minmax(0,1fr)} #view-admin .adm-k.udx-has>.udx-mini{grid-column:1;grid-row:auto;align-items:flex-start;flex-direction:row;gap:8px;margin-top:6px} #view-admin .udx-mini .udx-cap{align-self:center} .udx-spark{width:84px;height:30px} .udx-ring{width:48px;height:48px} #view-attend .udx-cal .udx-c{height:44px;padding:2px 3px} #view-attend .udx-cal .udx-c small{font-size:12px;letter-spacing:-.02em} #view-admin .udx-lamp{margin-left:0} } /* 대표실 숫자 칸 — 누르면 목록 */ #view-admin .adm-k.adm-k-go{cursor:pointer;transition:background .15s} #view-admin .adm-k.adm-k-go:hover{background:var(--panel2,var(--bg))} #view-admin .adm-k.adm-k-go:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px} #view-admin .adm-k-ar{color:var(--text-secondary,var(--mute));font-weight:600} .adm-ar-sum{margin:0 0 10px;font-size:14px} .adm-ar-sum small{display:block;color:var(--text-secondary,var(--mute));font-size:13px} .adm-ar-list{list-style:none;margin:0;padding:0} .adm-ar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm v" "s v";gap:2px 10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer} .adm-ar-row:hover{background:var(--panel2,var(--bg))} .adm-ar-row .nm{grid-area:nm;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adm-ar-row small{grid-area:s;font-size:13px;color:var(--text-secondary,var(--mute))} .adm-ar-row b{grid-area:v;align-self:center;font-size:14px} /* 직원 설정 — 알림 카드 한 줄 */ #view-settings .set-push-staff .push-s{display:block;font-style:normal;font-weight:400;font-size:13px;line-height:1.45;color:var(--text-secondary,var(--mute))} /* 대표실 신호등(999d·999z 의 고정색)을 같은 계열로 — 빨강 대신 산호, 초록 대신 파랑 */ #view-admin .udx-lights i.r.on{background:#EE5B3A;box-shadow:0 0 6px #EE5B3A} #view-admin .udx-lights i.y.on{background:#E8A24A;box-shadow:0 0 6px #E8A24A} #view-admin .udx-lights i.g.on{background:#4C97FF;box-shadow:0 0 6px #4C97FF} @media (max-width:900px){ /* 휴대폰: 카드 안쪽 여백은 조금 줄이고, 누르는 줄은 44px 이상 */ #dash .ds-title{font-size:23px} } /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 93번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 965 999zzz3 */ #view-attend .hg-tbl th .hg-th{display:block;font-size:13px;font-weight:600;color:var(--text-secondary,var(--mute));margin-bottom:4px} #view-attend .hg-tbl th.c .hg-th{text-align:center} #view-attend .hg-tbl .hg-cq{width:100%;min-width:56px;min-height:28px;font-size:13px;padding:3px 6px;border:1px solid var(--border-interactive);border-radius:6px;background:var(--panel);color:var(--ink)} #view-attend .hg-tbl td{padding:9px 8px;vertical-align:middle;font-size:14px} #view-attend .hg-tbl td.hg-c-num b{font-weight:700} #view-attend .hg-tbl tr.hg-oth td{background:color-mix(in srgb,var(--bg) 60%,transparent)} #view-attend .hg-tbl .hg-c-r{white-space:normal;min-width:140px} #view-attend .hg-x{background:none;border:0;padding:4px 0;min-height:28px;font:inherit;font-weight:700;color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent-ink) 35%,transparent);text-underline-offset:3px} #view-attend .hg-x:hover{text-decoration-color:currentColor} #view-attend .hg-x[aria-expanded="true"]::after{content:" ▴";font-size:12px} #view-attend .hg-x[aria-expanded="false"]::after{content:" ▾";font-size:12px;color:var(--mute)} #view-attend .hg-sub{color:var(--text-secondary,var(--mute))} #view-attend .hg-grp{display:inline-block;font-weight:600} #view-attend .hg-grp.oth{font-weight:500;color:var(--text-secondary,var(--mute))} #view-attend .hg-note{display:block;font-size:12px;color:var(--mute)} #view-attend .hg-adjm{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;font-size:12px;line-height:18px;background:var(--info-soft,var(--accent-soft));color:var(--accent-ink);font-weight:600;white-space:nowrap} #view-attend .z{color:var(--mute)} #view-attend .hg-neg{color:var(--bad-ink)} #view-attend tr.hg-adj td{background:color-mix(in srgb,var(--info-soft,var(--accent-soft)) 55%,transparent)} #view-attend tr.hg-det>td{background:var(--bg);padding:12px 16px!important;white-space:normal} #view-attend .hg-detbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:12px 20px} #view-attend .hg-detbox h4{margin:0 0 4px;font-size:13px;color:var(--text-secondary,var(--mute));font-weight:600} #view-attend .hg-detbox p{margin:0 0 4px;font-size:14px;color:var(--ink)} #view-attend .hg-li{list-style:none;margin:0;padding:0;display:grid;gap:4px} #view-attend .hg-li li{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:14px;align-items:baseline} #view-attend .hg-li li.out{color:var(--mute)} #view-attend .hg-by{color:var(--mute);font-size:13px} #view-attend .hg-fm{color:var(--mute);font-size:13px} #view-attend .hg-foot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:8px 16px 14px;font-size:14px} #view-attend .hg-foot:empty{display:none} #view-attend .hg-miss{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px} /* 월간 리포트 */ #view-attend .atr-tbl th{white-space:nowrap;font-size:13px} #view-attend .atr-tbl td{padding:9px 8px;font-size:14px;white-space:nowrap} #view-attend .atr-nm{min-width:84px} #view-attend .atr-n{font-weight:700} #view-attend .atr-n.w{color:var(--warn-ink)} #view-attend .atr-n.b{color:var(--bad-ink)} #view-attend tr.atr-sum td{border-top:2px solid var(--line-strong,var(--line));font-weight:600;background:var(--bg)} /* 휴가 조정 창 */ #dlg-hradj{max-width:min(96vw,880px)!important;width:880px} #dlg-hradj .ha-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px} #dlg-hradj .ha-grid .ha-wide{grid-column:span 3} #dlg-hradj .ha-grid input,#dlg-hradj .ha-grid select{width:100%} #dlg-hradj .ha-info{margin:8px 0 12px;font-size:14px;line-height:1.6} #dlg-hradj .ha-wrap{max-height:280px;overflow:auto} #dlg-hradj .ha-tbl td{font-size:14px;padding:7px 8px;white-space:nowrap} #dlg-hradj .ha-tbl td:nth-child(6){white-space:normal;min-width:140px} #dlg-hradj .ha-tbl tr.z td{color:var(--mute)} #dlg-hradj .ha-by small{display:block;color:var(--mute);font-size:12px} #dlg-hr .hr-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6px 12px} @media (min-width:1025px){ /* 데스크톱 조작 요소 28px 바닥 */ #view-attend .hg-tools .btn, #view-attend .hg-head .btn, #view-attend .hg-view button, #view-attend .hg-foot .btn {min-height:28px} } @media (max-width:1024px){ /* 손가락 폭 — 44px */ #view-attend .hg-tools .btn, #view-attend .hg-head .btn, #view-attend .hg-view button, #view-attend .hg-foot .btn, #view-attend .hg-gchip, #view-attend .hg-x, #view-attend .hg-asof input, #view-attend .hg-q, #view-attend .hg-sw, #view-attend .hg-tbl .hg-cq, #dlg-hradj .btn, #dlg-hradj input, #dlg-hradj select, #view-attend .hg-tools .ops-i {min-height:44px} #view-attend .hg-tools .ops-i{min-width:44px} #view-attend .hg-sw input{height:44px} #view-attend .hg-detbox{grid-template-columns:minmax(0,1fr)} #at-tabs button{min-height:44px} } @media (max-width:767px){ #view-attend .hg-tools{padding:10px 12px} #view-attend .hg-q{width:100%;flex:1 1 100%} #view-attend .hg-asof{flex:1 1 auto} #view-attend .hg-adm{margin-left:0;width:100%} #view-attend .hg-adm .btn{flex:1 1 0} /* 휴가 발생 카드 — 직원 이름이 카드 제목, 사원번호는 아래 줄로 */ #view-attend #hg-tbl:not(.hg-list) tbody>tr.hg-r{display:flex!important;flex-direction:column} #view-attend #hg-tbl:not(.hg-list) td.hg-c-n{order:-1;font-size:15px;font-weight:600;padding-bottom:6px;display:block} #view-attend #hg-tbl:not(.hg-list) td.hg-c-n::before{display:none} #view-attend #hg-tbl td.hg-c-no{font-size:14px;font-weight:400;display:flex;padding-bottom:2px} #view-attend #hg-tbl td.hg-c-no::before{display:block} #view-attend #hg-tbl tr.hg-det{display:block} #view-attend #hg-tbl tr.hg-det>td{display:block!important;padding:10px 12px!important} #view-attend #hg-tbl tr.hg-det>td::before{display:none!important} #view-attend .hg-tbl .hg-c-r{min-width:0} #view-attend .atr-tbl td{white-space:normal} #view-attend tr.atr-sum{border-width:2px} #dlg-hradj .ha-grid{grid-template-columns:minmax(0,1fr)} #dlg-hradj .ha-grid .ha-wide{grid-column:auto} #dlg-hradj .ha-tbl td{white-space:normal} #dlg-hr .hr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } #view-attend .hg-v{white-space:nowrap} /* 2026-10-08 · 세무사 화면 '내 연차' 카드 = 직원별 발생·사용·잔여 (js/260 renderLvSum) */ #at-lvsum .at-lv-staff{width:100%;border-collapse:collapse;font-size:14px;margin:2px 0 8px} #at-lvsum .at-lv-staff th{font-weight:600;color:var(--mute);text-align:right;padding:4px 6px;border-bottom:1px solid var(--line)} #at-lvsum .at-lv-staff th:first-child,#at-lvsum .at-lv-staff td:first-child{text-align:left} #at-lvsum .at-lv-staff td{padding:5px 6px;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums} #at-lvsum .at-lv-staff tr:last-child td{border-bottom:0} /* 2026-10-11 메뉴 전체 점검(대표님 "텍스트 최대한 줄이고 한눈에") — docs/디자인_벤치마크_2026-10.md 카드 말투를 홈 한눈 카드와 맞춘다: 모서리 20 · 옅고 넓은 그림자(어둡게는 선만). AI 요약 띠(.br)·안쪽 카드는 그대로. */ :is(#view-attend){--au-sh:0 1px 2px rgb(18 24 38/.04),0 8px 24px rgb(18 24 38/.06)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(#view-attend){--au-sh:none} } :root[data-theme="dark"] :is(#view-attend){--au-sh:none} :is(#view-attend) .card:not(.card .card):not(.br){border-radius:var(--r-card);box-shadow:var(--au-sh)} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 94번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 999zzb 999zzd */ #dash>section.ds-sec:not(.bf) .ds-h h2,#dash>section.ds-sec .ds-clh{font-size:18px;font-weight:700;letter-spacing:-.3px} /* 제목 앞 아이콘은 옅은 파랑 동그라미 안에 */ #dash>section.ds-sec:not(.bf) h2>svg{box-sizing:content-box;padding:7px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);margin-right:4px} /* 구간 단추(내 담당/사무실 · 기장/신고대리/전체): 옅은 회색 알약 안에 흰 알약 */ #dash .ds-seg{background:var(--surface-3);padding:4px;border-radius:999px} #dash .ds-seg button{border-radius:999px;min-height:32px;font-weight:600} #dash .ds-seg button[aria-pressed="true"],#dash .ds-seg button.on,#dash .ds-seg button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgb(17 20 28/.12)} :root[data-theme="dark"] #dash .ds-seg button[aria-pressed="true"],:root[data-theme="dark"] #dash .ds-seg button.on,:root[data-theme="dark"] #dash .ds-seg button[aria-selected="true"]{background:#3A3C43} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #dash .ds-seg button[aria-pressed="true"],:root:not([data-theme="light"]) #dash .ds-seg button.on,:root:not([data-theme="light"]) #dash .ds-seg button[aria-selected="true"]{background:#3A3C43} } /* 수집기 줄의 상태 알약 · 시트 누락 알약: 테두리 없이 옅은 채움 */ #dash .ds-pc{min-height:30px;border-radius:999px} #dash .ds-cn,#dash .ds-qc,#dash .ds-more-b{border-color:transparent;background:var(--surface-3);border-radius:999px} #dash .ds-cn:hover,#dash .ds-qc:hover,#dash .ds-more-b:hover{background:var(--line2)} #dash .ds-more .ds-c{border-color:transparent;background:var(--panel2);border-radius:var(--ou-r2)} /* 비서가 한 일 · 오늘 출퇴근 카드도 같은 틀 */ #view-main>section.card:not(#dash){border-radius:var(--ou-r);border-color:transparent;box-shadow:var(--e1)} #view-main>section.act-card,#view-main>section.att-today{padding:20px var(--ou-pad)} #view-main>section.act-card.act-empty{padding:14px var(--ou-pad)} #view-main>section.act-card .ds-h h2,#view-main>section.att-today h2{font-size:18px;font-weight:700;letter-spacing:-.3px} /* ── 단추·입력칸(경계선은 그대로 — 흰 바탕에서 단추를 알아보는 표시라 3:1 유지) ── 2026-11-06 /unslop 다듬기: 크기와 상관없이 모두 알약이던 것 → 단추 --r-ctl(8) · 입력칸 --r-input(8) · 큰 출퇴근 단추만 18 그대로 */ .content .btn:not(.at-big){border-radius:var(--r-ctl)} .content .btn.at-big{border-radius:18px} .content input[type=text],.content input[type=search],.content input[type=month],.content input[type=date],.content input:not([type]),.content select{border-radius:var(--r-input,8px)} /* ── 거래처 360: 안쪽 상자도 같은 말투(테두리 대신 옅은 채움 · 둥근 모서리) ── */ #view-c360 .c3-kpi{border-radius:var(--ou-r);border-color:transparent;box-shadow:var(--e1)} :root[data-theme="dark"] #view-c360 .c3-kpi{box-shadow:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #view-c360 .c3-kpi{box-shadow:none} } #view-c360 .bv-sgi,#view-c360 .bv-chip,#view-c360 .bv-mini{border-radius:var(--ou-r2);border-color:transparent} #view-c360 .bv-chart{border-radius:var(--ou-r2);border-color:var(--line)} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 95번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 999z 999zza 999zzc */ /* ※ 2026-10-10: 이 파일의 토큰(:root 색 값)은 core/css/999zzz1_디자인_토큰.css 로 모았다 — 아래 설명 속 색 값은 옛 기록. */ /* 2026-10-07 · 색 체계 교체 (사용자: "초록·빨강·갈색 이상해 · 트렌디하게") 예전: 주황갈색(#C74F0A) 강조 · 진초록 · 진빨강 · 올리브 경고. 지금: 차가운 슬레이트 바탕 + 인디고 강조 + 청록(완료) · 앰버(주의) · 로즈(위험). 토큰만 다시 정의한다 — 화면 규칙은 그대로 토큰을 읽는다. 되돌리려면 이 파일 한 줄(order.txt)만 빼면 된다. 글자용(-ink)은 흰/어두운 바탕에서 4.5:1 이상, 채움(-fill) 위 흰 글자도 4.5:1 이상으로 골랐다. 로고는 2026-10-11 새 마크(파랑→남색→보라 둥근 네모 '민' · 브랜드/)로 바꿨다. */ /* 대표실 신호등(999d 의 고정색)도 같은 계열로 */ #view-cmsreg .cr-dot.ok{background:var(--ok-fill)} #view-cmsreg .cr-dot.warn{background:var(--warn-fill)} /* 주 단추·선택 표시에 살짝 깊이(평평한 갈색 덩어리 대신) */ /* 2026-10-07 밤 · 오르내림 색(사용자: "올랐으면 빨간색 ▲, 내렸으면 파란색 ▼ — 한국 증권식"). --up / --down 은 글자용(흰·패널 바탕 4.5:1 이상: 라이트 5.7·6.7 · 다크 6.9·7.4), -soft 는 옅은 바탕. 다른 뜻(위험·정보)과 섞어 쓰지 않는다. */ /* 오르내림 색을 거래처 360 매출 비교(.c3-d · .bv-d)에도 같은 규칙으로(예전엔 오르면 초록·내리면 빨강이었다) */ #view-c360 .c3-d.up,#view-c360 .bv-d.up{color:var(--up)!important} #view-c360 .c3-d.dn,#view-c360 .bv-d.dn{color:var(--down)!important} /* ※ 2026-10-10: 이 파일의 토큰(:root 색 값)은 core/css/999zzz1_디자인_토큰.css 로 모았다 — 아래 설명 속 색 값은 옛 기록. */ /* 2026-10-07 밤 · 원 UI(갤럭시) 느낌으로 (사용자: "빨·초 색이 촌스러 · 갤럭시 휴대폰 UI 를 많이 참고 · AI 요약은 잘했다") 이 파일이 마지막 층이다. 토큰을 다시 정의하고, 공통 부품(카드·제목·알약·구간 단추·표 줄·메뉴 선택)의 모양만 조금 바꾼다. - 바탕: 아주 옅은 회색 캔버스 + 흰 카드(모서리 24px · 테두리 대신 바탕색 차이) / 어두운 화면: 거의 검정 + 한 단 밝은 회색 카드 - 상태색: 신호등(빨·초) 대신 — 들어옴·완료 = 차분한 파랑, 일부·확인 = 부드러운 호박색, 빠짐·없음 = 산호 주황, 모름 = 중립 회색 색만으로 가르지 않는다(아이콘·글자·빗금은 그대로). - 오르내림(--up/--down)은 사용자 규칙 그대로: 오르면 빨강 ▲ · 내리면 파랑 ▼ (빨강은 조금 다듬은 산호빛 빨강). - AI 요약 카드(.bf)는 내용·배치를 그대로 두고 색만 따라온다. 명암비(계산): 본문 글자 4.5:1 이상(라이트: 흰 카드·캔버스·옅은 바탕 모두 / 다크: 카드·한 단 밝은 바탕 모두), 그래프 조각 3:1 이상 — 단 호박색(일부)은 밝은 바탕에서 2.4:1 이다(3:1 을 맞추면 갈색이 된다). 대신 빗금 무늬·옆 숫자·범례 글자가 같은 뜻을 전한다. 되돌리려면 order.txt 의 이 파일 한 줄만 빼면 된다(999z 트렌디 색으로 돌아간다). */ /* ── 토큰 · 라이트 ── */ /* ── 토큰 · 다크(원 UI 다크: 거의 검정 캔버스 + 한 단 떠 있는 회색 카드) ── */ /* ── 캔버스 · 옆 메뉴 · 머리 줄: 테두리 대신 같은 바탕(원 UI 처럼 카드만 떠 보이게) ── */ body{background:var(--bg)} #sidebar,aside.side-nav{background:var(--bg);border-right-color:transparent} .topbar{background:var(--bg);border-bottom-color:transparent} /* ── 카드: 큰 모서리 · 테두리 없음 · 아주 옅은 그림자(다크는 바탕색 차이만) ── */ .content .card{border-color:transparent;} .content .card .card{border-color:var(--line);} /* ── 주 단추: 평평한 파랑 알약(999z 의 그라데이션을 걷는다) ── */ .btn.primary,button.primary{background:var(--accent-fill);border-color:transparent;color:#fff} .btn.primary:hover,button.primary:hover{background:var(--brand-fill-h)} :root[data-theme="dark"] .btn.primary{background:var(--accent-fill)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn.primary{background:var(--accent-fill)} } :root[data-theme="dark"] .btn.primary:hover{background:var(--brand-fill-h)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn.primary:hover{background:var(--brand-fill-h)} } /* ── 표: 줄 사이 옅은 구분선 · 줄 높이 여유(인쇄 서식·조밀 보기는 제외) ── */ html:not([data-dense]) .content .card table:not(.xl):not(.rpt-tb) tbody tr{height:44px} /* ═══ 수집 현황(메인) ═══ */ #dash{max-width:1320px} /* 거래처 수집 막대·범례 */ #dash .cv-b{border-radius:14px} #dash .cv-b:hover{background:var(--surface-3)} /* AI 요약: 배치는 그대로, 테두리만 다른 카드와 같게 · 숫자 칸은 옅은 바탕의 둥근 묶음 */ #dash .bf{border-color:transparent} #dash .bf-stats{border-color:transparent;border-radius:var(--ou-r2)} #dash .bf-st{background:transparent;border-left-color:var(--line)} #dash .bf-tg{border-color:transparent;background:var(--surface-3)} /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 96번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 951c 999zze 967 975 */ :is(.stat,.kpi-t,.adm-k).is-zero .v,:is(.stat,.kpi-t,.adm-k).is-zero .v *{color:var(--mute)!important} :is(.stat,.kpi-t,.adm-k).is-zero .v{font-weight:500!important} /* 걸린 필터 — 목록 위 칩 줄(같은 말을 select 와 두 번 했다)을 감추고 칸 자체에 표시 */ #view-clients .office>.fchips,#view-cmsreg>.fchips,#view-ar>.fchips, #view-monthly>.fchips,#view-report>.fchips,#view-appr>.fchips{display:none!important} @media (max-width:900px){ #dash>section.ds-sec:not(.bf){padding:16px var(--ou-pad)} #dash .cv-b,#dash .ds-cn,#dash .ds-qc{min-height:44px} } /* 2026-10-08 비서 → 데스크 '고침 요청'(devreq) — 대표실 카드 · 서랍 · 설정 '내 비서가 보낸 요청' (js/967) */ .dr-card{padding:16px 20px;margin:16px 0} .dr-card .dr-head{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px 10px;padding:0;margin:0 0 10px} .dr-card .dr-head h3{margin:0;font-size:17px} .dr-card.dr-empty{padding:12px 20px} .dr-card.dr-empty .dr-head{margin:0} .dr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .dr-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 12px;border:1px solid var(--border-interactive,var(--line)); border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap} .dr-chip b{font-variant-numeric:tabular-nums;font-weight:700} .dr-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink,var(--accent))} .dr-chip:focus-visible,.dr-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .dr-tw{max-height:none!important;min-height:0;overflow-x:auto} .dr-t{width:100%;table-layout:fixed} .dr-t th,.dr-t td{font-size:14px;vertical-align:middle} .dr-t .dr-c-t{width:108px;white-space:nowrap;font-variant-numeric:tabular-nums} .dr-t .dr-c-by{width:96px} .dr-t .dr-c-k{width:56px} .dr-t .dr-c-s{width:92px} .dr-t .dr-c-ref{width:150px;color:var(--text-secondary,var(--mute));font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dr-t .dr-c-ans{width:34%;color:var(--text-secondary,var(--mute));font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dr-t td.dr-c-title{min-width:0;white-space:normal} .dr-t tr.dr-r{cursor:pointer} .dr-t tr.dr-hot td:first-child{box-shadow:inset 3px 0 0 var(--warn)} .dr-open{all:unset;cursor:pointer;display:block;min-height:28px;line-height:28px;max-width:100%;color:var(--ink);font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box} .dr-open:hover{text-decoration:underline} .dr-more{margin-top:10px} .dr-none{color:var(--text-secondary,var(--mute))} /* 서랍 */ .dr-dw{display:grid;gap:8px;font-size:14px} .dr-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 6px} .dr-meta dt{color:var(--text-secondary,var(--mute));font-size:13px} .dr-meta dd{margin:0;min-width:0;overflow-wrap:anywhere} .dr-h4{margin:10px 0 0;font-size:15px} .dr-h4s{font-weight:400;font-size:13px;color:var(--text-secondary,var(--mute))} .dr-pre{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--ink); font:inherit;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto} .dr-pre1{padding:2px 0} .dr-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .dr-acts .btn{min-height:32px} .dr-acts .dr-no{color:var(--bad-ink,var(--bad))} .dr-why{display:grid;gap:6px;margin-top:8px} .dr-why label{font-size:14px;font-weight:600} .dr-why textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--border-interactive,var(--line));border-radius:var(--r-ctl);background:var(--panel);color:var(--ink)} .dr-why-b{display:flex;gap:8px;justify-content:flex-end} /* 설정(직원) */ .dr-set .dr-t-me .dr-c-k{width:52px} @media (max-width:767px){ .dr-card{padding:14px 14px} .dr-t .dr-c-ref,.dr-t .dr-c-by,.dr-t .dr-c-ans{display:none} .dr-t .dr-c-t{width:86px} .dr-t .dr-c-k{width:44px} .dr-t .dr-c-s{width:78px} .dr-chip{min-height:44px} .dr-open{min-height:44px;line-height:44px} .dr-acts .btn,.dr-why-b .btn{min-height:44px} .dr-why textarea{font-size:16px} } /* 2026-10-11 관리 › 업데이트 노트(js/975) — 홈과 같은 카드 말씨(둥근 20 · 옅은 그림자) */ #view-notes #un-body{display:grid;gap:16px;max-width:980px} #view-notes .card{border-radius:var(--r-card);padding:20px 22px;margin:0} #view-notes .un-bs{background:linear-gradient(160deg,var(--ai-tint1) 0%,var(--ai-tint2) 45%,var(--panel) 100%);border:1px solid var(--ai-line)} :root[data-theme="dark"] #view-notes .un-bs{background:linear-gradient(160deg,var(--ai-tint1) 0%,var(--ai-tint2) 50%,var(--panel) 100%)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #view-notes .un-bs{background:linear-gradient(160deg,var(--ai-tint1) 0%,var(--ai-tint2) 50%,var(--panel) 100%)} } #view-notes .un-bh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} #view-notes h3{margin:0;font-size:17px;font-weight:800;color:var(--ink)} #view-notes .un-ai{color:var(--ai)} #view-notes .un-ver{font-size:12px;font-weight:700;color:var(--accent);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-chip,6px);padding:3px 10px} #view-notes .un-lead{margin:10px 0 12px;font-size:14px;line-height:1.55;color:var(--ink2)} #view-notes .un-cmds{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #view-notes .un-cmds li{display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-inner);padding:10px 12px;min-width:0} #view-notes .un-cmds code{font-size:13px;font-weight:700;color:var(--accent);word-break:keep-all} #view-notes .un-cmds span{font-size:13px;color:var(--ink2)} #view-notes .un-nt{margin:0 0 12px;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink2)} #view-notes .un-pr{margin:0;white-space:pre-wrap;word-break:keep-all;font:13px/1.6 var(--sans);color:var(--ink);background:var(--panel);border:1px dashed var(--line2,var(--line));border-radius:var(--r-inner);padding:12px 14px;max-height:260px;overflow:auto} #view-notes .un-pr:focus-visible{outline:2px solid var(--accent);outline-offset:2px} #view-notes .un-cp{justify-self:start} #view-notes .un-d{font-size:15px;margin:0 0 10px} #view-notes .un-li{list-style:none;margin:0;padding:0;display:grid;gap:8px} #view-notes .un-li li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink)} #view-notes .un-tag{flex:none;font-size:12px;font-weight:700;border-radius:var(--r-chip,6px);padding:2px 9px;background:var(--panel2);color:var(--ink2)} #view-notes .un-tag.t-ai{background:var(--ai-soft);color:var(--ai)} #view-notes .un-tag.t-sec{background:#FFF1F2;color:#BE123C} #view-notes .un-tag.t-new{background:#ECFDF5;color:#047857} #view-notes .un-tag.t-auto{background:#FEF6E0;color:#92400E} :root[data-theme="dark"] #view-notes .un-tag{background:var(--panel2);color:var(--ink2)} @media (max-width:700px){ #view-notes .un-cmds{grid-template-columns:1fr} #view-notes .card{padding:16px} } /* 2026-10-11 디자인 점검 13: 비서 칸은 한 줄(새 버전 · [프롬프트 복사]) + 접기 */ #view-notes .un-bs{padding:16px 20px} #view-notes .un-bh h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #view-notes .un-more{margin-top:10px} #view-notes .un-more>summary{cursor:pointer;min-height:32px;display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--ink2)} #view-notes .un-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} #view-notes .un-more[open]>summary{margin-bottom:4px} /* 2026-10-21 직원별 비서 현황(업데이트 노트 맨 위) — 색은 옛 판·확인 필요에만(주의 글자 한 가지) */ #view-notes .un-st .bs-w{overflow-x:auto;margin-top:10px} #view-notes .bs-t{width:100%;border-collapse:collapse;font-size:13px} #view-notes .bs-t th,#view-notes .bs-t td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} #view-notes .bs-t tr:last-child td{border-bottom:0} #view-notes .bs-t th{color:var(--mute);font-weight:600;font-size:12px} #view-notes .bs-mute{color:var(--mute);font-size:12px} #view-notes .bs-warn{color:var(--warn);font-weight:700} #view-notes .bs-note{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink2)} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 97번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 996z 996y 999zzz */ /* 2026-10-09 홈 '빠진 곳' — 원그래프·막대 대신 빠진 것만 단추로(996 html) */ .cv-slim .cv-gaps{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 8px} .cv-slim .cv-gb{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:8px 14px;font-size:14px;cursor:pointer;color:var(--ink)} .cv-slim .cv-gb b{font-size:18px;font-variant-numeric:tabular-nums} .cv-slim .cv-gb.g-miss b{color:var(--bad-ink,#c0262d)} .cv-slim .cv-gb.g-part b{color:var(--warn-ink,#9a5b00)} .cv-slim .cv-gb:hover,.cv-slim .cv-gs:hover{border-color:var(--accent)} .cv-slim .cv-gsrc{display:flex;flex-direction:column;gap:4px} .cv-slim .cv-gs{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:transparent;padding:9px 4px;font-size:14px;cursor:pointer;color:var(--ink)} .cv-slim .cv-gs svg{width:16px;height:16px;flex:none} .cv-slim .cv-gsl{min-width:120px;font-weight:600} .cv-slim .cv-gsl small{color:var(--mute);font-weight:400;margin-left:4px} .cv-slim .cv-gsn{flex:1;color:var(--mute)} .cv-slim .cv-gsn b{color:var(--ink);font-variant-numeric:tabular-nums} .cv-slim .cv-none{padding:14px 4px;font-size:15px;font-weight:600;color:var(--ok-ink,#0a7a4f)} .cv-slim .cv-none small{color:var(--mute);font-weight:400;margin-left:6px} /* 2026-10-09 홈 찾기창(997) */ @media (max-width:900px){ } /* 995 의 4번 줄 감추기 규칙의 예외 — 홈 찾기창 */ /* 2026-10-09 팩스 내용 2판 — 제목 아래 작은 표시(거래처·기한·금액·기간·문서번호) */ .fxd-row{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px} .fxd{display:inline-flex;align-items:center;font-size:12px;line-height:1.5;padding:0 7px;border-radius:999px;background:var(--surface-2,#F2F4F7);color:var(--text-secondary,#475467);border:1px solid transparent;white-space:nowrap} .fxd.mute{background:transparent;color:var(--mute,#667085);padding:0 2px} .fxd-c{cursor:pointer;background:var(--accent-soft,#EEF4FF);color:var(--accent,#2563EB);font-weight:600;border-color:transparent} .fxd-c:hover,.fxd-c:focus-visible{border-color:var(--accent,#2563EB)} .fxd-due.hot{background:var(--warn-soft,#FFF4E5);color:var(--warn,#C86A13);font-weight:600} .fxd-due.past{color:var(--mute,#667085);text-decoration:line-through} /* 2026-10-12 팩스 도착 즉시 AI 요약(fax.ai) — 목록 줄의 할 일 한 줄 · 열람 창 AI 요약 3줄. AI 표시는 --ai(✦), 기한 7일 안은 주황 */ .fxa-todo{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--ink-2,var(--text-secondary,#475467));min-width:0} .fxa-todo .fxa-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .fxa-todo.wait{color:var(--mute,#667085)} .fxa-ic{color:var(--ai,#4F46E5);font-size:11px;flex:none} .fxa-due{flex:none;font-size:12px;font-weight:600;color:var(--mute,#667085);white-space:nowrap} .fxa-due.hot{color:var(--warn,#C86A13);background:var(--warn-soft,#FFF4E5);border-radius:999px;padding:0 7px} .fxa-due.past{text-decoration:line-through;font-weight:500} .fxa-box{margin:0 4px 10px;padding:12px 14px;border:1px solid var(--ai-line,#E0E7FF);border-radius:var(--r-inner,12px);background:linear-gradient(160deg,var(--ai-tint1,#EEF2FF),var(--ai-tint2,#F7F8FF) 60%,var(--panel,#fff));text-align:left} .fxa-box[hidden]{display:none} .fxa-h{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ai,#4F46E5);margin-bottom:4px} .fxa-h .fxa-due{margin-left:auto} .fxa-urg{font-size:11.5px;font-weight:700;color:var(--warn,#C86A13);background:var(--warn-soft,#FFF4E5);border-radius:999px;padding:0 7px} .fxa-l{list-style:none;margin:0;padding:0} .fxa-l li{position:relative;padding-left:14px;font-size:14px;line-height:1.55;color:var(--ink,#101828)} .fxa-l li::before{content:"";position:absolute;left:3px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--ai,#4F46E5)} .fxa-wait{font-size:13.5px;color:var(--mute,#667085)} .fxa-src{margin-top:6px;font-size:11.5px;color:var(--mute,#667085)} @media (max-width:600px){ .fxa-box{margin:0 0 8px;padding:10px 12px} .fxa-l li{font-size:13.5px} } /* 2026-10-10 디자인 개편 · 수집자료 칸(홈·거래처·자료함·팩스) — docs/디자인_개편_2026-10.md 그래프 규칙: 주 계열 = --brand-chart(파랑) · 비교 계열 = --chart-rest(회색) · 전년 = 점선 테두리 · 빗금은 쓰지 않는다(지저분). */ /* ── 거래처 360 · 팩스 · 자료함 그림 색 ── */ :is(#view-c360,#view-files,#view-fax){--bv-sa:var(--brand-chart);--bv-bu:var(--chart-rest);--bv-py:var(--border-interactive)} :is(#view-c360,#view-files,#view-fax) pattern .hl{fill-opacity:0} :is(#view-c360,#view-files,#view-fax) .sw.c-bu{background:var(--bv-bu)} :is(#view-c360,#view-files,#view-fax) .sw.c-un{background:var(--accent-fill)} :is(#view-c360,#view-files,#view-fax) .bv-plot rect.we,:is(#view-c360,#view-files,#view-fax) .sw.c-we{fill:var(--panel2);fill-opacity:1;background:var(--panel2);border-color:var(--line)} :is(#view-c360,#view-files,#view-fax) .bv-plot rect.rd{fill:var(--chart-rest)} #view-c360 .bv-meter .tr i{background:var(--chart-rest)} /* ── 거래처 고르기: 제목을 다른 화면처럼 바탕 위 제목 줄로(카드 껍데기 없이) ── */ #view-c360 .c3-pick.card{background:transparent;border:0;box-shadow:none;padding:0} #view-c360 .c3-pick-in h2{font-size:var(--fs-7);font-weight:750;letter-spacing:-.02em;margin:0 0 14px;line-height:1.25} #view-c360 .c3-pick-q input{height:var(--ctl-h-lg);border-radius:var(--r-input,8px);background:var(--panel)} /* ── 홈 수집기: '늦음' 칩을 채우지 않고 옅은 바탕 + 상태 아이콘 색만(여섯 개가 다 호박색이면 시끄럽다) ── */ #dash .ds-pc.st-late,#dash .ds-pc.st-wait{background:var(--panel2);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)} #dash .ds-pc.st-late svg,#dash .ds-pc.st-wait svg{color:var(--warn-fill)} #dash .ds-pc.st-late>span,#dash .ds-pc.st-wait>span{color:var(--mute)} #dash .ds-pc.st-fail{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad-fill) 30%,transparent)} /* 재건축 4단계(C) 합친 시트 · core · 전체 111장 중 98번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 8개: 150p 955a 998 999 999c 999zzz1 999zzz2 999zzz2b */ @media (max-width:900px){ #save-ok{right:14px} } main.wrap tbody tr[role="button"]:focus-visible,main.wrap tr.row:focus-visible{ outline:2px solid var(--accent);outline-offset:-2px} #ops-tip{position:fixed;z-index:10050;max-width:340px;padding:9px 12px;border-radius:10px; background:var(--ink,#1E1D1B);color:var(--panel,#fff);font-size:13px;line-height:1.55;font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.18);pointer-events:none;word-break:keep-all;overflow-wrap:break-word} /* 2026-10-09 머리 [찾기] 단추(core 998) — 알림 종 옆 */ .hd-find{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;margin-right:8px;border:1px solid var(--line);border-radius:var(--r-input,8px);background:var(--panel);color:var(--mute);font-size:14px;cursor:pointer} .hd-find svg{width:16px;height:16px} .hd-find kbd{font:600 11px/1 inherit;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:3px 5px;background:var(--bg)} .hd-find:hover{border-color:var(--accent);color:var(--ink)} @media (max-width:900px){ .hd-find{min-height:44px;min-width:44px;padding:0 12px} .hd-find span,.hd-find kbd{display:none} } /* 2026-10-09 메뉴마다 AI 요약 칸(core/js/999) — 숫자 타일 + 도넛/막대, 글자는 한 줄 */ .br{padding:14px 18px;margin:0 0 14px} .br-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:14px} .br-tl{font-weight:700;} .br-body{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .br-ts{display:flex;gap:10px;flex-wrap:wrap;flex:0 1 auto} .br-t{display:flex;flex-direction:column;gap:2px;min-width:118px;padding:10px 14px;border-radius:var(--r-inner);text-align:left;font:inherit;color:inherit} .br-t.is-go{cursor:pointer} .br-l{font-size:13px;color:var(--mute)} .br-v{font-size:22px;color:var(--ink);line-height:1.2} .br-s{color:var(--mute)} .br-t.t-bad .br-v{color:var(--bad-ink,#c0262d)} .br-t.t-warn .br-v{color:var(--warn-ink,#9a5b00)} .br-t.t-ok .br-v{color:var(--ok-ink,#0a7a4f)} .br-viz{display:flex;align-items:center;gap:12px} .br-dn{width:64px;height:64px;flex:none} .br-lg{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13px;color:var(--mute)} .br-lg li{display:flex;align-items:center;gap:6px} .br-lg i{border-radius:3px;display:inline-block} .br-lg b{color:var(--ink);font-variant-numeric:tabular-nums} .br-bars{display:flex;flex-direction:column;gap:4px} .br-bt{font-size:12.5px;color:var(--mute)} .br-bw{display:flex;align-items:flex-end;gap:6px;height:64px} .br-b{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:22px} .br-b i{display:block;width:14px;border-radius:4px 4px 0 0;min-height:3px} .br-b em{font-style:normal;color:var(--mute);margin-top:3px} @media (max-width:900px){ .br{padding:12px} .br-t{min-width:calc(50% - 5px);box-sizing:border-box} .br-ts{flex-basis:100%} } /* 한 줄 보고 + 할 일 단추(화면에 이미 그래프가 있는 곳) */ .br.br-slim{padding:10px 16px} .br.br-slim .br-h{margin:0;flex-wrap:wrap} .br-as{display:inline-flex;gap:8px;flex-wrap:wrap;margin-left:auto} .br-a{border:1px solid var(--line);color:var(--ink);border-radius:var(--r-ctl);padding:5px 12px;font:inherit;cursor:pointer;} .br-a b{font-variant-numeric:tabular-nums} .br-a.t-bad b{color:var(--bad-ink,#c0262d)} .br-a.t-warn b{color:var(--warn-ink,#9a5b00)} @media (max-width:900px){ .br-as{margin-left:0;width:100%} } /* 2026-10-11 Claude 가 쓴 문장(스마트싱스처럼 큰 한 문장 + 짧은 줄) — tools/ai_brief.py → settings/aibrief */ .br-say{margin:2px 0 12px} .br-sh{margin:0;font-size:19px;line-height:1.4;font-weight:700;letter-spacing:-.01em;color:var(--ink,#121826);} .br-sl{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:5px} .br-sl li{position:relative;padding-left:14px;font-size:14px;line-height:1.5;color:var(--ink2,#465163)} .br-sl li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--icon-secondary,#8C95A6)} /* 2026-11-06 /unslop: 보라 점 → 무채색 */ .br-meta{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:12px;color:var(--mute,#586377)} .br-meta.old span{color:var(--warn,#C86A13)} .br-re{font:inherit;font-size:12px;padding:3px 10px;border-radius:var(--r-ctl);border:1px solid var(--line,#E5E7EB);background:var(--panel,#fff);color:var(--accent,#2563EB);cursor:pointer} .br-re:hover:not(:disabled){background:var(--accent-soft,#EEF4FF)} .br-re:disabled{color:var(--mute,#586377);cursor:default} .br-re:focus-visible{outline:2px solid var(--accent,#2563EB);outline-offset:2px} @media (max-width:900px){ .br-sh{font-size:17px} } /* 2026-10-11 흐름 카드(스마트싱스 에너지 모양) — 큰 문장 + 흰 카드(제목 ›·비교 한 줄·누계 면 그래프·범례·숫자 둘) + 넘김 점. .br.br-tr 은 999zzz2 의 .br 띠(테두리·그라데이션)를 걷어 내고 바탕 위에 문장, 그 옆(휴대폰은 아래)에 카드. */ .br.br-tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,520px);gap:14px 28px;align-items:start; padding:6px 0 0;margin:0 0 18px;background:none;border:0;box-shadow:none;border-radius:0} .br-trl{min-width:0;padding-top:4px} .br-tr .br-h{margin-bottom:8px;font-size:13px} .br-big{margin:0;font-size:24px;line-height:1.38;font-weight:750;letter-spacing:-.02em;color:var(--ink,#121826);} .br-tr .br-say{margin:10px 0 0} .br-tr .br-as{display:flex;margin:14px 0 0} .br-trr{min-width:0} .br-cards{display:grid;gap:12px} .br-cards.multi{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:var(--r-card)} .br-cards.multi::-webkit-scrollbar{display:none} .br-cards.multi>.br-card{flex:0 0 100%;scroll-snap-align:start} .br-cards.multi:focus-visible{outline:2px solid var(--accent-fill,#2B5DE8);outline-offset:3px} .br-card{box-sizing:border-box;min-width:0;background:var(--panel,#fff);border:1px solid var(--line,#E4E8EE);border-radius:var(--r-card);padding:16px 18px 14px;box-shadow:var(--e1,none)} .br-ct{display:inline-flex;align-items:center;gap:4px;margin:0;padding:0;border:0;background:none;font:inherit;font-size:16px;font-weight:750;color:var(--ink,#121826);letter-spacing:-.01em} button.br-ct{cursor:pointer;min-height:32px} .br-ct span{font-size:20px;line-height:1;color:var(--mute,#586377);margin-top:-2px} button.br-ct:hover span{color:var(--accent-ink,#1F4FD6)} button.br-ct:focus-visible{outline:2px solid var(--accent-fill,#2B5DE8);outline-offset:2px;border-radius:6px} .br-cs{margin:2px 0 6px;font-size:14px;line-height:1.45;color:var(--ink2,#465163);word-break:keep-all} .br-ch{position:relative;height:220px;margin:0} .br-svg{position:absolute;inset:0;width:100%;height:220px;overflow:visible} .br-base{stroke:var(--line2,#D5DBE3);stroke-width:1} .br-pa{fill:var(--chart-rest,#A9B2BF);fill-opacity:.22} .br-pl{fill:none;stroke:var(--chart-rest,#A9B2BF);stroke-width:1.5} .br-cl{fill:none;stroke:var(--accent-fill,#2B5DE8);stroke-width:2.25;stroke-linejoin:round} .br-tl2{stroke:var(--mute,#586377);stroke-width:1.25;stroke-dasharray:5 4} .br-now{stroke:var(--ink2,#465163);stroke-width:1;stroke-dasharray:2 3} .br-dot2{position:absolute;width:9px;height:9px;margin:-5px 0 0 -5px;border-radius:50%;box-sizing:border-box;pointer-events:none} .br-dot2.c{background:var(--accent-fill,#2B5DE8);border:2px solid var(--panel,#fff);width:11px;height:11px;margin:-6px 0 0 -6px} .br-dot2.p{background:var(--panel,#fff);border:2px solid var(--chart-rest,#A9B2BF)} .br-bub{position:absolute;top:0;display:flex;transform:translateX(-50%);pointer-events:none;white-space:nowrap} .br-bub.al{transform:translateX(-8px);} .br-bub.ar{transform:translateX(calc(-100% + 8px));} .br-bub span{font-size:12px;line-height:1;padding:3px 7px;border-radius:var(--r-pill);font-weight:700;font-variant-numeric:tabular-nums} .br-bub .c{background:var(--accent-fill,#2B5DE8);color:#fff} .br-bub .p{background:var(--surface-3,#EDF0F4);color:var(--ink2,#465163);font-weight:600} .br-tgl{position:absolute;right:0;font-size:12px;line-height:1;white-space:nowrap;pointer-events:none} .br-tgl.lft{right:auto;left:0} .br-xa{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--mute,#586377)} .br-lg2{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--mute,#586377)} .br-lg2 li{display:inline-flex;align-items:center;gap:6px} .br-lg2 i{display:inline-block;width:8px;height:8px;border-radius:50%} .br-lg2 i.c{background:var(--accent-fill,#2B5DE8)} .br-lg2 i.p{background:var(--chart-rest,#A9B2BF)} .br-lg2 i.t{width:14px;height:0;border-radius:0;border-top:2px dashed var(--mute,#586377)} .br-sts{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;padding-top:12px;border-top:1px solid var(--line,#E4E8EE)} .br-stt{min-width:0;padding:0 4px 0 0} .br-stt+.br-stt{border-left:1px solid var(--line,#E4E8EE);padding:0 0 0 16px} .br-stt>span{display:block;font-size:12px;color:var(--mute,#586377);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .br-stt p{margin:2px 0 0;display:flex;align-items:baseline;gap:3px;} .br-stt b{font-size:22px;line-height:1.2;font-weight:750;letter-spacing:-.02em;color:var(--ink,#121826);font-variant-numeric:tabular-nums} .br-stt em{font-style:normal;font-size:13px;color:var(--ink2,#465163)} .br-stt.t-bad b{color:var(--bad-ink,#BE3A1E)} .br-stt.t-warn b{color:var(--warn-ink,#965400)} .br-note{margin:8px 0 0;font-size:12px;color:var(--mute,#586377)} .br-dots{display:flex;justify-content:center;gap:2px;margin-top:6px} .br-pg{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .br-pg::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line2,#D5DBE3);transition:width .15s} .br-pg.on::before{width:18px;border-radius:4px;background:var(--ink2,#465163)} .br-pg:focus-visible{outline:2px solid var(--accent-fill,#2B5DE8);outline-offset:-2px;border-radius:6px} @media (max-width:1100px){ .br.br-tr{grid-template-columns:minmax(0,1fr)} } @media (max-width:900px){ .br-big{font-size:20px} .br-card{padding:14px 14px 12px} .br-stt b{font-size:20px} .br.br-tr .br-as{width:auto} } /* main.wrap p · li {font-size:15px}(0,1,2) 가 위 글자 크기를 덮어써서 — 흐름 카드 안은 한 단계 더 구체적으로 */ .br.br-tr .br-big{font-size:24px;line-height:1.38} .br.br-tr .br-cs{font-size:14px;line-height:1.45} .br.br-tr .br-note,.br.br-tr .br-lg2 li,.br.br-tr .br-meta{font-size:12px;line-height:1.4} .br.br-tr p.br-ct{font-size:16px;line-height:1.3} .br.br-tr .br-sl li{font-size:14px;line-height:1.5} .br.br-tr .br-stt p{font-size:13px;line-height:1.2} @media (max-width:900px){ .br.br-tr .br-big{font-size:20px} } @media (min-width:1101px){ /* 2026-10-11 대표님: CMS·가결산 띠가 좌우 배치 뒤 가운데가 비고 그래프가 작다 → 카드 칸을 넓히고(문장 0.85 : 카드 1.15) 문장은 세로 가운데 */ .br.br-tr{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch;gap:14px 24px} /* 2026-10-11 디자인 점검 5: 세로 가운데면 1440 에서 문장 위에 100~200px 빈 곳 → 위에 붙인다 */ .br.br-tr .br-trl{display:flex;flex-direction:column;} } /* ═══ 2026-10-11 디자인 점검(25건) ═══ 5 · 숫자 칸 모양(br-a1)도 흐름 카드 모양과 같은 결: 띠 상자(파란 바탕·테두리)를 걷고 바탕 위에 '✦ AI 요약' + 큰 문장 + 짧은 줄, 그 아래 흰 칸(숫자 칸 · 도넛). 999zzz2 의 .br 띠(테두리·그라데이션)보다 구체적으로 덮는다. */ .br.br-a1{padding:6px 0 0;margin:0 0 18px;background:none;border:0;box-shadow:none;border-radius:0} .br.br-a1 .br-h{margin-bottom:8px;font-size:13px} .br.br-a1 .br-big{font-size:24px;line-height:1.38;margin:0} .br.br-a1 .br-say{margin:10px 0 0} .br.br-a1 .br-sl li{font-size:14px;line-height:1.5} .br.br-a1 .br-meta{font-size:12px;line-height:1.4} .br.br-a1 .br-body{margin-top:14px;gap:12px 16px;align-items:stretch} .br.br-a1 .br-ts{gap:10px} .br.br-a1 .br-t{border-radius:var(--r-inner);padding:12px 16px;box-shadow:var(--e1,none)} .br.br-a1 .br-viz,.br.br-a1 .br-bars{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-inner);padding:10px 16px;box-shadow:var(--e1,none)} .br.br-a1 .br-as{display:flex;margin:14px 0 0} .br.br-a1.br-slim{padding:6px 0 0} .br-scl{flex-basis:100%;margin:0 0 -4px} .br-scope{display:inline-flex;align-items:center;font-size:12px;font-weight:650;color:var(--mute);letter-spacing:0;margin-right:2px;white-space:nowrap} .br-as>.br-scope{align-self:center} @media (max-width:900px){ .br.br-a1 .br-big{font-size:20px} .br.br-a1 .br-viz,.br.br-a1 .br-bars{flex:1 1 100%} } /* 9 · '내일(D-1)까지' 같은 덩어리는 한 줄로 */ .br-nb{white-space:nowrap} .br-big,.br-sh{word-break:keep-all;text-wrap:balance} /* 21 · 이번/지난 말풍선은 같은 자리에 쌓지 않고 좌우로 나란히 */ .br-bub,.br-bub.al,.br-bub.ar{flex-direction:row;align-items:center;gap:4px} /* 18 · 목표선 글자 대비 4.5:1 이상 — 반투명 바탕 대신 카드 바탕 그대로 */ .br-tgl{color:var(--ink2,#465163);background:var(--panel,#fff);padding:1px 4px;border-radius:4px} /* 3·8 · 진행 카드(kind:"meter") — 큰 % · 막대 하나 · 한 줄 */ .br-mt .br-mv{display:flex;align-items:baseline;gap:4px;margin:14px 0 8px} .br-mt .br-mv b{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--ink)} .br-mt .br-mv em{font-style:normal;font-size:18px;font-weight:700;color:var(--ink2)} .br-mt .br-mv span{margin-left:8px;font-size:13px;color:var(--mute)} .br-mb{height:12px;border-radius:var(--r-pill);background:var(--dv-track,#EEF0FA);overflow:hidden} .br-mb i{display:block;height:100%;min-width:4px;border-radius:inherit;background:var(--accent-fill,#2B5DE8)} .br-mn{margin:8px 0 0;font-size:13px;color:var(--ink2,#465163)} .br.br-tr .br-mt .br-mv{font-size:13px;line-height:1} .br.br-tr .br-mn{font-size:13px;line-height:1.45} /* 넘김 카드 높이는 저마다(짧은 진행 카드 밑에 빈 칸이 생기지 않게) */ .br-cards.multi{align-items:flex-start} @media (min-width:1101px){ /* 2026-10-11 디자인 점검 2차: 숫자 칸 모양(br-a1)도 넓은 화면에서는 왼쪽 문장 · 오른쪽 숫자 칸(흐름 카드 모양과 같은 배치) — 띠 높이를 줄여 목록이 위로 */ .br.br-a1:not(.br-slim){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:start} .br.br-a1:not(.br-slim)>*{grid-column:1} .br.br-a1:not(.br-slim)>.br-body{grid-column:2;grid-row:1/span 5;margin-top:4px;align-self:start;max-width:720px} /* ═══ 2026-10-11 디자인 마무리(이력 4-111) ═══ 5 · 넓은 화면 흐름 카드 옆 문장: 위에 붙이면 왼쪽 아래 약 200px 이 비고(팩스·CMS 출금), 가운데면 위가 빈다 → 문장 묶음은 카드 높이의 가운데, 대신 글을 한 단계 키워 빈 곳을 줄인다(그래프 높이 220 은 대표님 지시라 그대로) */ .br.br-tr .br-trl{padding-top:0} .br.br-tr .br-big{font-size:28px;line-height:1.36} .br.br-tr .br-sl{gap:8px;margin-top:12px} .br.br-tr .br-sl li{font-size:15px} .br.br-tr .br-as{margin-top:20px} } @media (max-width:640px){ /* ④-6 · 휴대폰(640 이하): 띠를 낮게 — '사무실 전체 · 방금 [다시 요약]' 은 'AI 요약' 제목 줄 오른쪽으로, 할 일 칩·숫자 칸은 한 줄 가로 칩(손가락으로 밀기). 글은 그대로 다 보인다 */ .br.br-a1,.br.br-tr{position:relative} .br.br-a1 .br-say>.br-meta,.br.br-tr .br-say>.br-meta{position:absolute;top:2px;right:0;margin:0;max-width:calc(100% - 100px);gap:8px} .br.br-tr .br-say>.br-meta{top:6px} .br-say>.br-meta>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .br.br-a1 .br-say>.br-meta .br-re,.br.br-tr .br-say>.br-meta .br-re{flex:none;min-height:32px;padding:3px 12px} .br.br-a1 .br-h,.br.br-tr .br-h{min-height:32px;margin-bottom:6px} .br.br-a1 .br-as,.br.br-tr .br-as{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-top:12px} .br.br-a1 .br-as::-webkit-scrollbar,.br.br-tr .br-as::-webkit-scrollbar{display:none} .br.br-a1 .br-as>*,.br.br-tr .br-as>*{flex:none} .br.br-a1:not(.br-slim) .br-body{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;position:relative;gap:10px;padding-bottom:2px} .br.br-a1:not(.br-slim) .br-body::-webkit-scrollbar{display:none} .br.br-a1:not(.br-slim) .br-body:has(>.br-scl){padding-top:26px} .br.br-a1:not(.br-slim) .br-body>.br-scl{position:absolute;top:0;left:0;margin:0} .br.br-a1:not(.br-slim) .br-body>*{flex:none} .br.br-a1:not(.br-slim) .br-ts{flex-wrap:nowrap;flex-basis:auto} .br.br-a1:not(.br-slim) .br-t{min-width:128px;max-width:200px} .br.br-a1:not(.br-slim) .br-viz,.br.br-a1:not(.br-slim) .br-bars{flex:none} } @media (min-width:1101px){ /* ═══ 2026-10-11 마지막 검수 — AI 띠 빈 곳(디자인 5 · 위·가운데 둘 다 빈 곳이 남던 것) ═══ 넓은 화면: 왼쪽 문장 묶음을 홈 AI 카드와 같은 연한 틴트 칸으로(오른쪽 흐름 카드와 같은 높이) — 제목은 위, 단추 줄은 칸 아래 선. 빈 곳이 '칸 안 여백'이 되어 떠 보이지 않는다. 그래프 높이(220)는 대표님 지시라 그대로. */ .br.br-tr .br-trl{justify-content:flex-start;padding:22px 24px;background:var(--panel,#fff);border:1px solid var(--line);border-radius:var(--r-card)} /* 2026-11-06 /unslop: 연보라 번짐 → 무채색 면(홈 요약 칸과 같음) */ .br.br-tr .br-trl .br-big{font-size:26px} .br.br-tr .br-trl .br-as{margin-top:auto;padding-top:18px} } /* ── 2026-10-12 그래프 규칙(90점 다듬기) — 모든 그래프가 같은 말씨 ── ① 축 글자 12px · var(--mute) · 숫자 tabular-nums(칸이 흔들리지 않게) ② 범례 표식: 막대·면·도넛 = 10px 네모(모서리 3px) · 선 = 8px 동그라미 · 목표 = 점선 ③ 숫자 뒤 단위(건·곳·명·%)는 작은 글자로 같은 줄 — 줄바꿈하지 않는다 ④ 자료가 모두 0 이면 빈 축·바닥에 붙은 선 대신 한 줄(.br-none · 메뉴 그래프는 .bv-none) ⑤ 날짜는 M/D(표와 같게) · 높이 220px·그래프 색 토큰은 대표님 결정 그대로 */ .br-lg i{width:10px;height:10px} .br-xa,.br-lg2{font-variant-numeric:tabular-nums} .br-stt p{flex-wrap:nowrap} .br-none{margin:20px 0 10px;font-size:13px;color:var(--mute)} .br-more{margin-top:6px} .br-more>summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;font-size:13px;color:var(--accent)} .br-more>summary::-webkit-details-marker{display:none} .br-more>summary::after{content:"›";display:inline-block;transform:rotate(90deg)} .br-more[open]>summary::after{transform:rotate(-90deg)} /* 2026-10-11 왼쪽 아래 상태 줄의 '수집 n/n'(js/999c) */ .status .st-col{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;color:var(--mute);background:none;border:0;padding:2px 6px;border-radius:var(--r-ctl);cursor:pointer} .status .st-col:hover{background:var(--panel2)} .status .st-col:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .status .st-col b{color:var(--ink);font-weight:700} .status .st-col .dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--ok,#07875B)} .status .st-col.t-warn .dot{background:var(--warn,#C86A13)} .status .st-col.t-warn b{color:var(--warn,#C86A13)} .status .st-col.t-bad .dot{background:var(--bad,#D92D4A)} .status .st-col.t-bad b{color:var(--bad,#D92D4A)} .st-col-pop{position:fixed;z-index:60;width:260px;max-width:calc(100vw - 16px);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgb(18 24 38/.16);padding:12px 14px} .st-col-pop .st-col-h{margin:0 0 8px;font-size:13px;font-weight:700} .st-col-pop ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .st-col-pop li{display:flex;justify-content:space-between;gap:10px;font-size:13px} .st-col-pop li em{font-style:normal;font-weight:700;color:var(--ok,#07875B)} .st-col-pop li.s-late em,.st-col-pop li.s-none em{color:var(--warn,#C86A13)} .st-col-pop li.s-fail em{color:var(--bad,#D92D4A)} /* 2026-10-11 사이드바 묶음 이름(업무 · 수임·수납 · 사무실) — js/350b 가 {sec:"이름"} 을 글자로 */ /* 2026-10-11 디자인 점검 25: 자동 수집이 정상이 아니면 홈 메뉴 옆 작은 점(늦음 = 호박 · 실패 = 산호) — 홈 메뉴에 다른 숫자 배지가 없을 때만 */ html:is([data-colst="warn"],[data-colst="bad"]) #mnav button[data-g="home"]:not([data-badge])::after{content:"";position:absolute;left:calc(50% + 10px);top:6px;width:8px;height:8px;border-radius:50%;background:var(--warn-fill,#FBBF24);box-shadow:0 0 0 2px var(--panel,#fff)} html[data-colst="bad"] #mnav button[data-g="home"]:not([data-badge])::after{background:var(--bad-fill,#BE3A1E)} #mnav button[data-g="home"] {position:relative} /* 2026-10-11 마지막 검수 F2: 줄마다 이유 한 줄(예 '거른 메일 n통') — 이름·상태 아래 전체 폭 */ .st-col-pop li{flex-wrap:wrap} .st-col-pop li small{flex:1 1 100%;font-size:12px;line-height:1.35;color:var(--mute)} /* ═══ 디자인 토큰 — 한 곳 (2026-10-10 디자인 개편 · docs/디자인_개편_2026-10.md) ═══ 색·글자 크기·간격·모서리 값은 여기에만 둔다. 예전엔 010a·999z·999zza 등 층마다 다시 정의했다(뒤가 이김) — 이 파일이 마지막이고 앞의 같은 정의는 지웠다. 화면 규칙은 var(--이름) 으로 읽기만 한다. 팔레트: 푸른빛이 살짝 도는 중립(틴티드 뉴트럴) + 강조 하나(코발트 파랑) + 상태 넷(완료=강조색 · 주의=호박 · 위험=산호 · 보조 계열=청록). 모서리 3단(2026-10-11 디자인 점검 11): --r-card 20(카드) · --r-inner 12(카드 안 칸) · --r-pill 999(알약). 단추는 --r-ctl. 2026-11-06 /unslop 다듬기: 알약 남용을 걷음 — 단추·구간 단추 --r-ctl 8(옛 10) · 입력칸·찾기 --r-input 8 · 작은 상태 칩 --r-chip 6 · 알약(--r-pill)은 숫자 배지·아바타·막대에만. AI 표시(✦·'AI 요약' 글씨)는 --ai 하나(로고 남색) — 누르는 것(단추·링크)은 --accent 만(점검 12). 2026-11-06 /unslop 다듬기: 요약 띠·홈 요약 칸은 --ai 를 쓰지 않음(무채색 · 반짝이 없음) · --bad-fill(흰 글자 숫자 배지·문제 점) = 차분한 인주 빨강 — 흰 글자 4.5:1 이상(밝게 #BE3A1E 5.5 · 어둡게 #B83A26 5.7). AI 카드 바탕(옅은 남색 틴트)·테두리는 --ai-tint1·--ai-tint2·--ai-line(2026-10-12 90점 다듬기 — 홈 이야기 카드·업데이트 노트가 따로 쓰던 #EEF2FF·#E0E7FF 를 모음). 명암: 본문 글자 4.5:1 이상(밝게·어둡게 모두) · 그래프 조각 3:1 이상(호박 채움만 예외 — 옆 숫자·범례로 같은 뜻). */ :root{ --sans:"Pretendard Variable",Pretendard,"Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace; --r:14px; --brand-ink:#FFFFFF; --gold:#8C5C0C; --gold-soft:#FBF1DC; --shadow-sm:0 1px 2px rgb(18 24 38/.04); --shadow:0 2px 8px rgb(18 24 38/.06); --m-sh:rgba(0,0,0,.14); --maxw:1720px; --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-5:16px; --fs-6:18px; --fs-7:24px; --fs-8:28px; --lh-tight:1.28; --lh-snug:1.45; --lh-base:1.65; --ls-xl:-.03em; --ls-lg:-.02em; --ls-md:-.01em; --ls-sm:0; --o2:#0F766E; --o3:#6D28D9; --o4:#A34B00; --o5:#4E5968; --fs-title:24px; --fs-h3:16px; --fs-body:14px; --fs-table:14px; --fs-sub:13px; --fs-kpi:24px; --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp8:32px; --r-card:20px; --r-inner:12px; --r-pill:999px; --r-ctl:8px; --r-input:8px; --r-chip:6px; --pad:24px; --topbar-h:66px; --dur:180ms; --sp05:6px; --chip-h:24px; --chip-h2:28px; --sb-h:0px; --sbw:0px; --desk-maxw:1560px; --bg:#F3F5F8; --panel:#FFFFFF; --panel2:#F7F9FB; --surface-3:#EDF0F4; --line:#E4E8EE; --line2:#D5DBE3; --border-interactive:#828C9C; --line-strong:#828C9C; --ink:#121826; --text-primary:#121826; --ink2:#465163; --mute:#586377; --text-secondary:#586377; --text-muted:#586377; --ink-3:#283041; --faint:#9AA4B2; --icon-secondary:#7D8798; --accent:#1F4FD6; --accent-ink:#1F4FD6; --accent-fill:#2B5DE8; --accent-soft:#ECF1FE; --brand:#4F7BF0; --brand-chart:#4F7BF0; --brand-fill:#2B5DE8; --brand-fill-h:#2350D2; --brand-line:#C9D6FB; --brand-text:#1F4FD6; --ok:#1F4FD6; --ok-ink:#1F4FD6; --ok-soft:#ECF1FE; --ok-fill:#2B5DE8; --warn:#965400; --warn-ink:#965400; --warn-soft:#FFF4E1; --warn-fill:#FBBF24; --bad:#BE3A1E; --bad-ink:#BE3A1E; --seal:#BE3A1E; --bad-soft:#FDEDE8; --seal-soft:#FDEDE8; --bad-fill:#BE3A1E; --info:#1F4FD6; --info-soft:#ECF1FE; --info-fill:#0B7380; --chart-rest:#A9B2BF; --sel:#E8EEFD; --sel-line:#2B5DE8; --o1:#4F7BF0; --sk:#E9EDF2; --sk2:#F3F5F8; --toast-bg:#1C2433; --toast-ink:#FFFFFF; --toast-sub:#C5CCD8; --e1:0 1px 2px rgb(18 24 38/.04),0 4px 14px rgb(18 24 38/.05); --dv-in:#5B6CF0; --dv-part:#FBBF24; --dv-miss:#F43F5E; --dv-unk:#CDD2EA; --dv-unk-line:#9AA1C4; --dv-track:#EEF0FA; --dv-hatch:rgb(255 255 255/.45); --dv-ok-ink:#1F4FD6; --dv-warn-ink:#965400; --dv-bad-ink:#BE3A1E; --dv-ok-soft:#ECF1FE; --dv-warn-soft:#FFF4E1; --dv-bad-soft:#FDEDE8; --dv-icon:#7D8798; --dv-mark:#FFFFFF; --up:#C92A2A; --up-soft:#FDEEEE; --down:#1F4FD6; --down-soft:#ECF1FE; --ai:#4F46E5; --ai-soft:#EEF0FE; --ai-tint1:#EEF2FF; --ai-tint2:#F7F8FF; --ai-line:#E0E7FF; --ou-r:16px; --ou-r2:12px; --ou-pad:22px; --fs-4:14px; --ctl-h:36px; --ctl-h-sm:30px; --ctl-h-lg:40px; } @media (max-width:1500px){ :root{--pad:22px} } @media (max-width:1000px){ :root{--sb-h:0px} } @media (max-width:900px){ :root{--pad:14px;--ou-r:16px;--ou-pad:16px} } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --brand-ink:#191F28; --gold:#E4B15B; --gold-soft:#35291A; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 8px rgba(0,0,0,.45); --m-sh:rgba(0,0,0,.55); --o2:#0D7C72; --o3:#6D28D9; --o4:#9A4C05; --o5:#455063; --bg:#0D1015; --panel:#161A21; --panel2:#1B2028; --surface-3:#232934; --line:#262C36; --line2:#323A46; --border-interactive:#7A8496; --line-strong:#7A8496; --ink:#EEF1F6; --text-primary:#EEF1F6; --ink2:#AEB6C4; --mute:#9FA9B9; --text-secondary:#9FA9B9; --text-muted:#9FA9B9; --ink-3:#D7DCE5; --faint:#667083; --icon-secondary:#7E889A; --accent:#7DA4FF; --accent-ink:#7DA4FF; --accent-fill:#3563EB; --accent-soft:#18223A; --brand:#5E8AF7; --brand-chart:#5E8AF7; --brand-fill:#3563EB; --brand-fill-h:#4471F0; --brand-line:#2A3A63; --brand-text:#7DA4FF; --ok:#7DA4FF; --ok-ink:#7DA4FF; --ok-soft:#18223A; --ok-fill:#3563EB; --warn:#F5B455; --warn-ink:#F5B455; --warn-soft:#30250F; --warn-fill:#FCD34D; --bad:#FF8D7A; --bad-ink:#FF8D7A; --seal:#FF8D7A; --bad-soft:#381D18; --seal-soft:#381D18; --bad-fill:#B83A26; --info:#7DA4FF; --info-soft:#18223A; --info-fill:#138996; --chart-rest:#59626F; --sel:#1C2A4A; --sel-line:#7DA4FF; --o1:#5E8AF7; --sk:#1E232C; --sk2:#252B35; --toast-bg:#252B35; --toast-ink:#EEF1F6; --toast-sub:#AEB6C4; --e1:0 1px 2px rgb(0 0 0/.3); --dv-in:#8B9BFF; --dv-part:#FCD34D; --dv-miss:#FB7185; --dv-unk:#3B4163; --dv-unk-line:#6B739A; --dv-track:#20253A; --dv-hatch:rgb(0 0 0/.35); --dv-ok-ink:#7DA4FF; --dv-warn-ink:#F5B455; --dv-bad-ink:#FF8D7A; --dv-ok-soft:#18223A; --dv-warn-soft:#30250F; --dv-bad-soft:#381D18; --dv-icon:#8C95A6; --dv-mark:#0D1015; --up:#FF7E7E; --up-soft:#3A1A1D; --down:#86AEFF; --down-soft:#18223A; --ai:#8B9BFF; --ai-soft:#1E2140; --ai-tint1:#1B1F3A; --ai-tint2:#151829; --ai-line:#2A3058; } } :root[data-theme="dark"]{ --brand-ink:#191F28; --gold:#E4B15B; --gold-soft:#35291A; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 8px rgba(0,0,0,.45); --m-sh:rgba(0,0,0,.55); --o2:#0D7C72; --o3:#6D28D9; --o4:#9A4C05; --o5:#455063; --bg:#0D1015; --panel:#161A21; --panel2:#1B2028; --surface-3:#232934; --line:#262C36; --line2:#323A46; --border-interactive:#7A8496; --line-strong:#7A8496; --ink:#EEF1F6; --text-primary:#EEF1F6; --ink2:#AEB6C4; --mute:#9FA9B9; --text-secondary:#9FA9B9; --text-muted:#9FA9B9; --ink-3:#D7DCE5; --faint:#667083; --icon-secondary:#7E889A; --accent:#7DA4FF; --accent-ink:#7DA4FF; --accent-fill:#3563EB; --accent-soft:#18223A; --brand:#5E8AF7; --brand-chart:#5E8AF7; --brand-fill:#3563EB; --brand-fill-h:#4471F0; --brand-line:#2A3A63; --brand-text:#7DA4FF; --ok:#7DA4FF; --ok-ink:#7DA4FF; --ok-soft:#18223A; --ok-fill:#3563EB; --warn:#F5B455; --warn-ink:#F5B455; --warn-soft:#30250F; --warn-fill:#FCD34D; --bad:#FF8D7A; --bad-ink:#FF8D7A; --seal:#FF8D7A; --bad-soft:#381D18; --seal-soft:#381D18; --bad-fill:#B83A26; --info:#7DA4FF; --info-soft:#18223A; --info-fill:#138996; --chart-rest:#59626F; --sel:#1C2A4A; --sel-line:#7DA4FF; --o1:#5E8AF7; --sk:#1E232C; --sk2:#252B35; --toast-bg:#252B35; --toast-ink:#EEF1F6; --toast-sub:#AEB6C4; --e1:0 1px 2px rgb(0 0 0/.3); --dv-in:#8B9BFF; --dv-part:#FCD34D; --dv-miss:#FB7185; --dv-unk:#3B4163; --dv-unk-line:#6B739A; --dv-track:#20253A; --dv-hatch:rgb(0 0 0/.35); --dv-ok-ink:#7DA4FF; --dv-warn-ink:#F5B455; --dv-bad-ink:#FF8D7A; --dv-ok-soft:#18223A; --dv-warn-soft:#30250F; --dv-bad-soft:#381D18; --dv-icon:#8C95A6; --dv-mark:#0D1015; --up:#FF7E7E; --up-soft:#3A1A1D; --down:#86AEFF; --down-soft:#18223A; --ai:#8B9BFF; --ai-soft:#1E2140; --ai-tint1:#1B1F3A; --ai-tint2:#151829; --ai-line:#2A3058; } /* ═══ 공통 부품 — 2026-10-10 디자인 개편 (docs/디자인_개편_2026-10.md) ═══ 색은 999zzz1 토큰만 읽는다. 화면 하나만의 꾸밈은 그 메뉴 칸 css 에 — 여기는 모든 화면이 같이 쓰는 부품만. 원칙: ① 제목 줄 = [제목 · 상태] ……… [거르기 · 검색] [주 단추] (주 단추는 늘 오른쪽 끝, 파란 채움 하나) ② 단추 높이 3단: 36(기본) · 30(작게) · 40(제목 줄 주 단추·입력칸) ③ 카드 모서리 20(--r-card) · 안쪽 칸 12(--r-inner) · 얇은 선 + 아주 옅은 그림자 ④ 글자 크기 단계: 12 · 13 · 14(본문) · 16 · 18 · 24(제목) — 0.5px 단위는 쓰지 않는다 ⑤ AI 요약 칸은 강조색이 살짝 도는 띠(화면마다 같은 자리 · 같은 모양) */ /* ── 바탕 · 옆 메뉴 ── */ .sb-crumb b{color:var(--ink);font-weight:700} .sb-crumb span{color:var(--mute)} /* ── 카드: 모서리 20(--r-card) · 얇은 선 · 아주 옅은 그림자(어둡게는 선만) ── */ .content .card{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--e1)} .content .card .card{border-radius:var(--r-inner);box-shadow:none} :root[data-theme="dark"] .content .card{box-shadow:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .content .card{box-shadow:none} } /* ── 제목 줄: 제목 24 · 굵기 750 · 주 단추는 오른쪽 끝 ── */ .content .wht-head{gap:8px 10px;min-height:44px;margin-bottom:14px} .content .wht-head>h2,#view-main .ds-title{font-size:var(--fs-7)!important;font-weight:750;letter-spacing:-.02em;color:var(--ink);line-height:1.25} .content .wht-head>.btn.primary,.content .wht-head>button.primary,.content .wht-head .btn.primary:last-child{margin-left:auto;order:99;min-height:var(--ctl-h);padding:0 16px;font-size:14px;font-weight:700;border-radius:var(--r-ctl)} .content .wht-head>select,.content .wht-head>input:not([type=checkbox]):not([type=radio]),.content .wht-head label>select,.content .wht-head label>input{min-height:var(--ctl-h);border-radius:var(--r-ctl);border:1px solid var(--line2);background:var(--panel);font-size:14px} .content .wht-head>input[type=search],.content .wht-head>input:not([type]){max-width:240px} /* ── 단추 3단 ── */ .content .btn{min-height:var(--ctl-h-sm);border-radius:var(--r-ctl);border-color:var(--line2);font-weight:600;color:var(--ink)} .content .btn:hover:not(:disabled){background:var(--surface-3);border-color:var(--border-interactive)} .content .btn.primary,.content button.primary{background:var(--accent-fill);border-color:transparent;color:#fff;font-weight:700} .content .btn.primary:hover:not(:disabled),.content button.primary:hover:not(:disabled){background:var(--brand-fill-h);border-color:transparent} .content .btn.sm{min-height:var(--ctl-h-sm)} /* 2026-10-11 디자인 점검 7: 꺼진 주 단추가 파란 바탕 + 회색 글씨(약 2:1)라 고장 난 것처럼 보였다 → 회색 바탕 + 흐린 글씨(4.5:1 이상) */ .content .btn.primary:disabled,.content button.primary:disabled{background:var(--surface-3);border-color:var(--line);color:var(--mute);opacity:1;cursor:not-allowed;box-shadow:none} .content .btn:focus-visible,.content button:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px} /* 지우기·해지 같은 되돌릴 수 없는 단추는 글자만 위험색(채우지 않는다) */ .content .btn.danger,.content .btn.bad{background:var(--panel);color:var(--bad-ink);border-color:var(--line2)} /* ── 구간 단추(세그먼트)·알약 거르기: 같은 모양 ── */ .content .seg{background:var(--surface-3);border-radius:var(--r-ctl);padding:3px;gap:2px} .content .seg{width:fit-content;max-width:100%} .content .seg>button{border-radius:calc(var(--r-ctl) - 3px);border-color:transparent!important;color:var(--ink2);font-weight:600;min-height:30px} .content .seg>button:not(.on):not([aria-selected="true"]):not([aria-pressed="true"]){background:transparent} .content .seg>button:hover:not(.on){color:var(--ink)} .content .seg>button.on,.content .seg>button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgb(18 24 38/.08),0 0 0 1px var(--line)} :root[data-theme="dark"] .content .seg>button.on{background:color-mix(in srgb,var(--ink) 12%,var(--surface-3));box-shadow:0 0 0 1px var(--line2)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .content .seg>button.on{background:color-mix(in srgb,var(--ink) 12%,var(--surface-3));box-shadow:0 0 0 1px var(--line2)} } /* ── 알약(상태 글자) ── */ .pill{font-weight:600} /* ── 표: 머리 옅은 바탕 · 13 · 굵게, 줄 위 손가락 바탕 ── */ .content table thead th{background:var(--panel2);color:var(--mute);font-size:13px;font-weight:650;letter-spacing:0;border-bottom:1px solid var(--line)} .content table tbody td{border-bottom-color:var(--line)} .content table tbody tr:hover>td{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)} /* ── AI 요약 칸: 화면마다 같은 띠 — 2026-11-06 /unslop 다듬기: 강조색 번짐·반짝이(✦)를 걷고 다른 칸과 같은 무채색 면 + 1px 선 · 'AI 요약' 글자는 보조 글자색(홈 요약 칸과 같은 결) ── */ .br{border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:none} .br-tl{color:var(--mute)} .br-t{background:var(--panel);border:1px solid var(--line)} .br-t.is-go:hover{border-color:var(--accent-fill)} .br-v{font-weight:750;letter-spacing:-.02em} .br-s{font-size:12px} .br-a{background:var(--panel);border-color:var(--line2);font-size:13px;font-weight:600;min-height:32px} .br-a:hover{border-color:var(--accent-fill);color:var(--accent-ink)} .br-b em{font-size:12px} #dash .bf{border:1px solid var(--brand-line);background:linear-gradient(100deg,color-mix(in srgb,var(--accent-soft) 85%,var(--panel)) 0%,var(--panel) 46%)} #dash .bf-stats{background:var(--panel);border:1px solid var(--line)} /* ── 큰 숫자: 고정폭 숫자 · 살짝 좁게 ── */ .br-v,.num{font-variant-numeric:tabular-nums} @media (max-width:900px){ /* ── 휴대폰: 누르는 곳 44 이상 ── */ .content .btn,.content .seg>button{min-height:40px} .content .wht-head>h2,#view-main .ds-title{font-size:22px!important} .content .wht-head>.btn.primary{min-height:44px} .content .wht-head>input[type=search],.content .wht-head>input:not([type]){max-width:none} /* 한 줄 보고가 '…' 로 잘리지 않게 */ #mnav.n6{grid-template-columns:repeat(6,minmax(0,1fr))} /* 2026-10-11 직원 아래 탭에 '출퇴근'(310 mnList) */ #mnav.n6 button{padding-left:0;padding-right:0;min-width:0} #mnav.n6 button span{font-size:12px;letter-spacing:-.03em;white-space:nowrap} #mnav.n6 button svg{width:22px;height:22px} } /* ── 휴대폰 위 하위 메뉴 줄: 선택 = 옆 메뉴와 같은 옅은 파랑(검정 덩어리 대신) ── */ #subnav button.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:700} /* 6칸일 때 글자·아이콘 한 단계 작게(360px 폰에서도 한 줄) */ /* 2026-10-15 대표님 "왼쪽 메뉴 삭제" — 위 막대(모든 화면 · 모든 너비) [로고 '택스민 데스크' = 홈(메뉴 런처)] [빵부스러기 = 지금 화면] ······ [공유 저장소 · 수집 n/10] [찾기 Ctrl K] [알림 종] [프로필] 사이드바 발치에 있던 상태 줄(.status — 900 placeShell 이 옮김)·연결 끊김 칩(#sb-net)이 여기 온다. 색은 문제일 때만(정상 = 회색 글씨). */ .topbar .tn-logo{display:flex;align-items:center;flex:none;cursor:pointer;border-radius:var(--r-ctl)} .topbar .tn-logo:focus-visible{outline:2px solid var(--sel-line,var(--accent));outline-offset:3px} @media (min-width:901px){ .topbar .tn-logo{margin-right:2px} .topbar .tn-logo .tm-wm{display:inline-block} .topbar .tn-logo+.sb-crumb{padding-left:14px;border-left:1px solid var(--line);min-height:20px} } /* 상태 줄 — 공유 저장소(점 + '정상/연결 중/끊김' · 080c) · 수집 n/10(999c) */ .topbar .tn-right .status.tn-status{display:flex;align-items:center;gap:2px;margin-right:4px;font-size:13px;color:var(--mute);white-space:nowrap} .topbar .tn-right .status.tn-status>span{display:inline-flex;align-items:center;gap:6px;padding:0 6px} .topbar .tn-right .status.tn-status>span:has(#dot-ai){display:none} .topbar .tn-right .status.tn-status .st-col{font-size:13px;min-height:32px} /* 2026-11-06 /unslop 다듬기: 정상은 무채색(점·'정상' 글자 모두 회색) — 판정(080c 점 · 999c t-ok/t-warn/t-bad)은 그대로, 색만 문제일 때 */ .topbar .tn-right .status.tn-status .dot.on{background:var(--icon-secondary);border-color:var(--icon-secondary)} .topbar .tn-right .status.tn-status span:has(.dot.on)::after{color:var(--mute)} .topbar .tn-right .status.tn-status .st-col.t-ok .dot{background:var(--icon-secondary)} .topbar .tn-right .status.tn-status .st-col.t-ok b{color:var(--ink2)} .topbar .tn-right .sb-net{display:none;align-items:center;gap:6px;flex:none;cursor:pointer;font-weight:700;border-radius:var(--r-chip,6px);padding:5px 10px;font-size:13px;color:var(--bad-ink);background:var(--bad-soft,transparent)} .topbar .tn-right .sb-net.on{display:inline-flex} .topbar .tn-right .sb-net i{width:7px;height:7px;border-radius:50%;background:var(--bad);flex:none} @media (max-width:1100px){ /* 좁아지면 '공유 저장소' 글자는 정상일 때 숨긴다(문제일 때만 보이게) */ .topbar .tn-right .status.tn-status>span:has(#dot-db.on){display:none} } @media (max-width:640px){ .topbar .tn-right .status.tn-status{margin-right:0} .topbar .tn-right .status.tn-status .st-col{padding:2px 4px;font-size:12px} } @media (max-width:359px){ .topbar .tn-right .status.tn-status{display:none} } /* 2026-11-04 대표님 "세로가 너무 길어 — 모든 UI 좀 개선해": 요약 칸 접기(core js/999 · 메뉴마다 기억 · 처음엔 접힘 — ✦ AI 한 줄 + 할 일 단추만) */ .br-fold{margin-left:auto;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:3px 12px;border:1px solid var(--line,#E5E7EB);border-radius:var(--r-ctl);background:var(--panel,#fff);color:var(--ink2,#465163);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap} .br-fold:hover{border-color:var(--accent-fill,#2B5DE8);color:var(--ink,#121826)} .br-fold:focus-visible{outline:2px solid var(--accent-fill,#2B5DE8);outline-offset:2px} .br.br-folded{display:block!important;min-height:0!important;padding-top:12px!important;padding-bottom:12px!important} @media (min-width:901px){.br.br-folded{padding-left:24px!important;padding-right:24px!important}} .br.br-folded .br-trr,.br.br-folded .br-body,.br.br-folded .br-sl,.br.br-folded details.br-more,.br.br-folded .br-meta,.br.br-folded .br-scl{display:none!important} .br.br-folded .br-trl{display:block!important;padding:0!important} @media (min-width:1101px){.br.br-folded .br-trl{padding:12px 16px!important}} /* 2026-11-06 /unslop: 넓은 화면은 문장 칸에 테두리가 있어(1101~) 접혀도 안 여백 — 글자·단추가 선에 붙지 않게 · 좁은 화면은 테두리 없이 그대로 */ .br.br-folded .br-h{margin-bottom:4px!important} .br.br-folded .br-big{font-size:18px!important;line-height:1.45!important;margin:0!important} .br.br-folded .br-as{margin-top:8px!important} @media (max-width:900px){.br-fold{min-height:40px}} /* 2026-10-26 거래처 묶음(994b) — 색 없이 글자·테두리로만 구분(대표님 10/12 색 절제) */ .gp-sel{height:34px;border:1px solid var(--line2);border-radius:var(--r-ctl,8px);background:var(--panel);color:var(--ink);padding:0 8px;max-width:100%} .gp-chips{display:inline-flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline} .gp-chip{display:inline-block;border:1px solid var(--line2);border-radius:var(--r-chip,6px);padding:0 8px;font-size:12.5px;line-height:20px;color:var(--ink2,var(--ink));white-space:nowrap} .gp-none{color:var(--mute)} .gp-edit{border:0;background:transparent;color:var(--ink2,var(--ink));text-decoration:underline;padding:0 2px;font-size:12.5px;cursor:pointer} .gp-dw{display:flex;flex-direction:column;gap:12px} .gp-lead,.gp-hint{margin:0;color:var(--mute);line-height:1.6;font-size:13.5px} .gp-h{margin:6px 0 0;font-size:15px;font-weight:700} .gp-rows{display:flex;flex-direction:column} .gp-row{display:flex;align-items:center;gap:8px;padding:9px 2px;border-bottom:1px solid var(--line);cursor:pointer} .gp-row input{width:18px;height:18px;flex:0 0 auto} .gp-nm{font-weight:600} .gp-row small{color:var(--mute)} .gp-st{margin-left:auto;color:var(--mute);font-size:12.5px} .gp-new{display:flex;gap:8px;flex-wrap:wrap} .gp-new input{flex:1 1 160px;min-width:0;height:36px;padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-ctl,8px);background:var(--panel)} .gp-tb{width:100%;border-collapse:collapse;font-size:13.5px} .gp-tb th,.gp-tb td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle} .gp-tb thead th{color:var(--mute);font-weight:500;font-size:12.5px} .gp-tb td.num{white-space:nowrap} .gp-how{font-size:13px;color:var(--mute)} .gp-how ul{margin:6px 0 0;padding-left:18px;line-height:1.7} .gp-bulk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .gp-bulk label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--mute)} .gp-bulk select,.gp-bulk input{height:34px;min-width:0;border:1px solid var(--line2);border-radius:var(--r-ctl,8px);background:var(--panel);color:var(--ink);padding:0 8px;font-size:14px} .gp-bulk input[type=search]{grid-column:1/-1} .gp-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .gp-n{color:var(--mute);font-size:12.5px} .gp-list{border:1px solid var(--line);border-radius:var(--r-ctl,8px);max-height:320px;overflow-y:auto} .gp-r{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer} .gp-r:last-child{border-bottom:0} .gp-r input{width:18px;height:18px;flex:0 0 auto} .gp-rn{display:flex;flex-direction:column;min-width:0;flex:1 1 auto} .gp-rn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gp-rn small{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gp-in{flex:0 0 auto;color:var(--mute);font-size:12px;border:1px solid var(--line2);border-radius:var(--r-chip,6px);padding:0 7px;line-height:20px} .gp-act{display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:0;background:var(--panel);padding:8px 0} .gp-act .btn{flex:1 1 auto} /* 거래처 고르기 화면 */ .c3-grp{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px} .c3-grp label{color:var(--mute);font-size:13px} .c3-grp-note{margin:0 0 12px;color:var(--mute);font-size:13px} @media (max-width:520px){.gp-bulk{grid-template-columns:1fr}} .c3-meta .c3-grpm{white-space:normal} .cv-gf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}.cv-gf label{color:var(--mute);font-size:13px} /* 2026-10-27 구조개선 단계 7 — 작업 차례(core js/500g qpQueueHtml) · 대표실 'MIN AI 관제'와 홈 서랍이 같이 씀 — 색 없이 선·굵기만(주의는 쓰지 않음) */ .qp-box{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink)} .qp-run{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:6px 0;border-bottom:1px solid var(--line)} .qp-run .qp-k,.qp-k{font-size:12px;font-weight:700;color:var(--text-secondary,var(--mute));min-width:28px} .qp-run b{font-weight:700;overflow-wrap:anywhere} .qp-run .qp-m{color:var(--text-secondary,var(--mute));overflow-wrap:anywhere} .qp-list{list-style:none;margin:0;padding:0} .qp-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto 48px;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)} .qp-list li:last-child{border-bottom:0} .qp-list li.is-me .qp-w,.qp-list li.is-me .qp-by{font-weight:700} .qp-n{font-weight:700;text-align:right;color:var(--ink2,var(--ink))} .qp-w{min-width:0;overflow-wrap:anywhere} .qp-new{font-style:normal;font-size:12px;color:var(--text-secondary,var(--mute))} .qp-by{color:var(--text-secondary,var(--mute));white-space:nowrap;max-width:9em;overflow:hidden;text-overflow:ellipsis} .qp-eta{text-align:right;font-weight:600} .qp-more,.qp-hold,.qp-rule,.qp-empty{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-secondary,var(--mute));overflow-wrap:anywhere} .qp-dw{padding:4px 2px} @media (max-width:600px){ .qp-list li{grid-template-columns:24px minmax(0,1fr) 44px;grid-template-areas:"n w e" ". b ."} .qp-list li .qp-n{grid-area:n}.qp-list li .qp-w{grid-area:w}.qp-list li .qp-eta{grid-area:e}.qp-list li .qp-by{grid-area:b;max-width:none;white-space:normal} } /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 99번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 975 975p 999zzz3 */ /* 2026-10-12 날짜별 접기 */ .un-fold>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none} .un-fold>summary::-webkit-details-marker{display:none} .un-fold>summary::after{content:"›";margin-left:auto;color:var(--mute);font-size:18px;transition:transform .15s} .un-fold[open]>summary::after{transform:rotate(90deg)} .un-fold>summary .un-d{margin:0} .un-n{font-size:12px;color:var(--mute)} .un-fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-inner)} @media (prefers-reduced-motion:reduce){ .un-fold>summary::after{transition:none} } .un-more{margin-top:8px} .un-more>summary{cursor:pointer;font-size:13px;color:var(--accent);font-weight:600;padding:4px 0} .un-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-inner)} /* 2026-10-17 비서에게 할 말 한 줄 — "데스크 패치를 진행해" */ #view-notes .un-say{margin:8px 0 0;font-size:15px} #view-notes .un-say b{font-weight:700} /* 2026-10-11 대표실 › 시스템 '공공데이터' 줄 (js/975p) */ #pd-body .pd-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:3px 0;font-size:13.5px} #pd-body .pd-m{color:var(--mute,#586377);font-size:12.5px} /* 2026-10-11 메뉴 전체 점검(대표님 "텍스트 최대한 줄이고 한눈에") — docs/디자인_벤치마크_2026-10.md 카드 말투를 홈 한눈 카드와 맞춘다: 모서리 20 · 옅고 넓은 그림자(어둡게는 선만). AI 요약 띠(.br)·안쪽 카드는 그대로. */ :is(#view-admin,#view-settings){--au-sh:0 1px 2px rgb(18 24 38/.04),0 8px 24px rgb(18 24 38/.06)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(#view-admin,#view-settings){--au-sh:none} } :root[data-theme="dark"] :is(#view-admin,#view-settings){--au-sh:none} /* 2026-10-22 대표실 › 시스템 '일일 보고' 줄 (js/976) — 색 없이 선·굵기만 */ #admin-dailyrep .dr-day{border-top:1px solid var(--line)} #admin-dailyrep .dr-day:first-child{border-top:0} #admin-dailyrep .dr-day>summary{display:flex;align-items:baseline;gap:10px;min-height:40px;padding:6px 2px;cursor:pointer;list-style:none;font-size:14px} #admin-dailyrep .dr-day>summary::-webkit-details-marker{display:none} #admin-dailyrep .dr-day>summary::after{content:"›";margin-left:auto;color:var(--text-secondary,var(--mute));font-size:18px;line-height:1;transition:transform .15s} #admin-dailyrep .dr-day[open]>summary::after{transform:rotate(90deg)} #admin-dailyrep .dr-day>summary b{white-space:nowrap} #admin-dailyrep .dr-s{min-width:0;color:var(--text-secondary,var(--mute));font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #admin-dailyrep .dr-day[open]>summary .dr-s{display:none} #admin-dailyrep .dr-top{padding:4px 2px 8px} #admin-dailyrep .dr-sum{font-size:15px;font-weight:600;line-height:1.5;overflow-wrap:anywhere} #admin-dailyrep .dr-h{margin-top:10px;font-size:13px;font-weight:700} #admin-dailyrep .dr-tom{margin:4px 0 0;padding-left:20px;font-size:14px;line-height:1.5} #admin-dailyrep .dr-m{margin-top:8px;color:var(--text-secondary,var(--mute));font-size:12px} #admin-dailyrep .dr-sec{margin-top:12px;padding:0 2px} #admin-dailyrep .dr-sec h4{margin:0 0 4px;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:4px} #admin-dailyrep .dr-b{margin-top:8px} #admin-dailyrep .dr-bh{font-size:13px;font-weight:600} #admin-dailyrep .dr-b ul{margin:2px 0 0;padding-left:18px;font-size:13.5px;line-height:1.5} #admin-dailyrep .dr-b li{overflow-wrap:anywhere} @media (max-width:600px){ #admin-dailyrep .dr-day>summary{flex-wrap:wrap;gap:2px 10px} #admin-dailyrep .dr-s{white-space:normal} } /* 2026-10-27 구조개선 단계 7 — 대표실 › 시스템 'MIN AI 관제'(js/977 · 170d) — 색은 문제·주의에만(.is-warn) */ #view-admin #sv-body{display:flex;flex-direction:column;gap:8px;color:var(--ink)} #view-admin .mi-req{border:1px solid var(--line);border-radius:10px;padding:0 10px} #view-admin .mi-req>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:40px;padding:8px 0;cursor:pointer;list-style:none} #view-admin .mi-req>summary::-webkit-details-marker{display:none} #view-admin .mi-req>summary::after{content:"›";margin-left:auto;color:var(--text-secondary,var(--mute));font-size:18px;line-height:1;transition:transform .15s} #view-admin .mi-req[open]>summary::after{transform:rotate(90deg)} #view-admin .mi-sub{font-size:12px;font-weight:400;color:var(--text-secondary,var(--mute))} #view-admin .mi-rq{display:flex;flex-direction:column;gap:6px;padding:6px 0 10px;border-top:1px solid var(--line)} #view-admin .mi-lab{font-size:13px;font-weight:700;color:var(--ink)} #view-admin .mi-rq textarea{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;font:inherit;font-size:14px;padding:8px;border:1px solid var(--line2,var(--line));border-radius:8px;background:var(--panel,var(--bg));color:var(--ink)} #view-admin .mi-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center} #view-admin .mi-row select{min-height:36px;max-width:100%;font:inherit;font-size:13.5px;padding:4px 8px;border:1px solid var(--line2,var(--line));border-radius:8px;background:var(--panel,var(--bg));color:var(--ink)} #view-admin .mi-note{margin:2px 0 6px;font-size:12.5px;line-height:1.5;color:var(--text-secondary,var(--mute))} #view-admin .mi-live{display:flex;flex-direction:column;gap:2px} #view-admin .mi-sec{padding:2px 0 6px} #view-admin .mi-h{margin:4px 0 2px;font-size:13px;font-weight:700;color:var(--ink)} #view-admin .mi-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;padding:6px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5} #view-admin .mi-l.mi-col{flex-direction:column;align-items:stretch} #view-admin .mi-k{flex:none;min-width:84px;font-size:12.5px;font-weight:700;color:var(--text-secondary,var(--mute))} #view-admin .mi-v{min-width:0;flex:1 1 220px;color:var(--ink);overflow-wrap:anywhere} #view-admin .mi-l.is-warn .mi-v,#view-admin .mi-l.is-warn .mi-k,#view-admin .mi-rp li.is-warn .mi-st{color:var(--warn-ink,var(--warn))} #view-admin .mi-rp{list-style:none;margin:2px 0 0;padding:0} #view-admin .mi-rp li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:3px 0} #view-admin .mi-st{font-size:12px;font-weight:700;white-space:nowrap;color:var(--text-secondary,var(--mute))} #view-admin .mi-t{min-width:0;overflow-wrap:anywhere} #view-admin .mi-by{font-size:12px;white-space:nowrap;color:var(--text-secondary,var(--mute))} #view-admin .mi-fold{border-top:1px solid var(--line);padding:2px 0} #view-admin .mi-fold>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-height:36px;padding:6px 0;cursor:pointer;font-size:13.5px;font-weight:600;list-style:none} #view-admin .mi-fold>summary::-webkit-details-marker{display:none} #view-admin .mi-fold>summary::after{content:"›";margin-left:auto;color:var(--text-secondary,var(--mute));font-size:16px;line-height:1;transition:transform .15s} #view-admin .mi-fold[open]>summary::after{transform:rotate(90deg)} #view-admin .mi-tt{width:100%;font-size:13px} #view-admin .mi-tt td,#view-admin .mi-tt th{padding:4px 6px;text-align:left;overflow-wrap:anywhere} #view-admin .mi-tt tr.is-off td{color:var(--text-secondary,var(--mute))} #view-admin .mi-bad{color:var(--warn-ink,var(--warn));font-weight:700} #view-admin .mi-steps{list-style:none;margin:2px 0 6px;padding:0;display:grid;grid-template-columns:1fr;gap:2px 12px;font-size:13px} #view-admin .mi-steps li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)} #view-admin .mi-steps em{font-style:normal;color:var(--text-secondary,var(--mute));text-align:right} @media (max-width:600px){ #view-admin .mi-k{min-width:0;flex-basis:100%} #view-admin .mi-rp li{grid-template-columns:auto minmax(0,1fr)} #view-admin .mi-rp li .mi-by{grid-column:2} } /* 2026-10-22 설정 › 명함 카드 (js/400f) — 색 없이 글자·선만 */ #set-nc .nc-row{display:flex;align-items:center;gap:var(--sp3,12px);padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} #set-nc .nc-row:last-child{border-bottom:0} #set-nc .nc-thumb{flex:0 0 auto;padding:0;border:1px solid var(--line);border-radius:var(--r-inner,8px);background:#fff;cursor:zoom-in;overflow:hidden;line-height:0} #set-nc .nc-thumb img{display:block;width:132px;height:auto;min-height:73px} #set-nc .nc-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px} #set-nc .nc-who{flex:1 1 120px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-table,14px)} #set-nc .nc-t{font-size:13px;color:var(--mute)} #set-nc .nc-act{display:flex;gap:6px;flex-wrap:wrap} #set-nc .nc-row.nc-big .nc-thumb{flex:1 1 100%;order:3;cursor:zoom-out} #set-nc .nc-row.nc-big .nc-thumb img{width:100%;max-width:560px} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 100번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 5개: 999zzz 997g 999zzz3 968 */ /* ── 홈 빠진 곳: 줄마다 없음·확인·모름을 위 세 단추와 같은 색 점으로 ── */ .cv-slim .cv-gsn .cv-sw{width:8px;height:8px;border-radius:50%;margin:0 4px 0 2px;vertical-align:1px} .cv-slim .cv-gb .cv-sw{width:9px;height:9px;border-radius:50%;margin-right:2px} .cv-slim .cv-gs{min-height:44px} .cv-slim .cv-sw.s-part{background:var(--dv-part)} .cv-slim .cv-sw.s-unk{background:var(--dv-unk-line)} /* 거래처 360 '최근 12개월 매출·매입': 단추 안 내용이 세로 가운데로 떠 위가 비던 것 → 위에서부터, 그림이 남는 높이를 채운다 */ #view-c360 .bv-chart{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;text-align:left} #view-c360 .bv-chart>.bv-plot{flex:1 1 0;min-height:112px;height:auto;max-height:220px} /* 홈(#dash, js/997b) — 2026-10-15 대표님 "메인 화면 위멤버스 메인 느낌으로 · 기존 디자인 살려서" ① 인사 한 줄 ② 메뉴 런처(둥근 네모 아이콘 바둑판 · 아래 이름 · 넉넉한 여백) ③ 3칸 패널(점선 구분 — AI 요약 · 처리할 일 · 수집 현황·소식). 색은 토큰(999zzz1)만: 아이콘 = 모두 같은 코발트 틴트(--accent-soft 바탕 + --accent 선) · 배지 = 진한 회색(--ink) · 빨강(--bad-fill)·호박(--warn-fill)은 문제·주의에만. 카드 말씨(모서리 --r-card · 옅은 그림자, 어둡게는 그림자 대신 테두리)와 AI 칸 틴트(--ai-tint*)는 2026-10-11 카드 그대로. */ #dash{--sh-sh:0 1px 2px rgb(18 24 38/.04),0 8px 24px rgb(18 24 38/.06);--sh-bd:transparent;--sh-hover:var(--panel2);--sh-dash:var(--line2)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #dash{--sh-sh:none;--sh-bd:var(--line);--sh-hover:var(--surface-3)} } :root[data-theme="dark"] #dash{--sh-sh:none;--sh-bd:var(--line);--sh-hover:var(--surface-3)} /* ── 틀 ── */ #dash>.sh{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch;margin:0} #dash .sh :where(button){font:inherit;color:inherit;-webkit-tap-highlight-color:transparent} /* :where — 아래 단추별 글자 크기가 이기게 */ #dash .sh button:focus-visible{outline:2px solid var(--sel-line);outline-offset:2px} /* 2026-10-11 대표님: 홈 = 이 묶음만. 아래 묶음(세무 검토 요약·수집기·빠진 곳·시트 누락)은 숨긴다 — 지우지 않는 까닭: 찾기창 질문·'빠진 곳' 서랍(996 openList)이 그 묶음의 계산값을 쓴다. */ #dash>:not(.sh){display:none!important} #view-main #att-today{display:none!important} #view-main>section.att-today{border-radius:var(--r-card);border:1px solid var(--sh-bd);box-shadow:var(--sh-sh)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #view-main>section.att-today{border-color:var(--line);box-shadow:none} } :root[data-theme="dark"] #view-main>section.att-today{border-color:var(--line);box-shadow:none} /* ── ① 인사 + 사무실 기온(greetHtml) — 카드 아닌 맨 위 한 줄 ── */ #dash .sh-greet{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:2px 4px 0} /* 2026-11-06 다듬기: 인사 → 오늘 날짜 제목(h1 · 먹색 · 장부 머리처럼 담백하게) */ #dash .sh-hi{margin:0;font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--ink);word-break:keep-all} #dash .sh-wx{margin:0;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:14px;color:var(--ink2)} #dash .sh-wx>b{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em} #dash .sh-wxi{display:inline-flex;color:var(--warn-ink)} #dash .sh-wxi:is(.ic-moon,.ic-cloud-moon){color:var(--ai)} #dash .sh-wxi:is(.ic-cloud,.ic-fog){color:var(--mute)} #dash .sh-wxi:is(.ic-rain,.ic-storm,.ic-snow){color:var(--accent)} #dash .sh-wxr{color:var(--mute)} /* ── ② 메뉴 런처 — 넓은 화면 6열 · 태블릿 4열 · 휴대폰 4열(아주 좁으면 3열) ── */ /* 2026-10-15 업무 묶음(대표님 "연관 있는 애들끼리 붙여 놔") — 묶음마다 작은 회색 제목 + 바둑판 · 묶음은 옆으로 흐르고 자리가 없으면 다음 줄 */ /* 2026-11-06 다듬기: 묶음이 줄마다 가운데로 모여 '거래처' 줄과 '수임·수납' 줄의 시작이 어긋나던 것 → 왼쪽 맞춤. 넓으면 두 열 격자(1열·2열 묶음의 제목 선이 줄마다 같은 자리) · 두 열이 안 들어가면 왼쪽부터 흐름(시작은 늘 같은 자리). */ #dash .sh-lnc{background:var(--panel);border:1px solid var(--sh-bd);border-radius:var(--r-card);box-shadow:var(--sh-sh);padding:24px 24px 20px;min-width:0; display:flex;flex-wrap:wrap;justify-content:flex-start;gap:24px 48px;--tw:100px} /* 두 열 = 내용 1220(5칸 532 + 사이 48 + 6칸 640) + 안쪽 여백 48 + 테두리 2 → 런처 1270 이상 = 화면 너비 1360 이상 */ @media (min-width:1360px){ #dash .sh-lnc{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start} } #dash .sh-lng{flex:0 1 auto;min-width:0;max-width:100%} #dash .sh-lngh{margin:0 0 12px;padding:0 0 8px 4px;font-size:13px;font-weight:600;line-height:1.3;color:var(--mute);border-bottom:1px solid var(--line);letter-spacing:.01em} #dash .sh-lnl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),var(--tw));gap:20px 8px} #dash .sh-lnl>li{min-width:0;display:flex;justify-content:center} #dash .sh-ln{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:140px;min-width:0;padding:4px 2px 6px;border:0;border-radius:var(--r-inner);background:none;cursor:pointer;text-align:center} /* 2026-11-06 다듬기: 아이콘 칸 = 무채색 면 + 가는 선 · 아이콘은 보조 글자색(하늘색 칸 20개가 화면을 물들이던 것) — 색은 숫자 배지의 문제(빨강)에만. 누르면 선·아이콘만 진해짐(뜨는 움직임 없음) */ #dash .sh-lni{position:relative;display:grid;place-items:center;width:64px;height:64px;flex:none;border-radius:var(--r-card);background:var(--panel2);border:1px solid var(--line);color:var(--ink2);transition:background .15s,color .15s,border-color .15s} #dash .sh-ln:hover .sh-lni,#dash .sh-ln:focus-visible .sh-lni{background:var(--surface-3);border-color:var(--line2);color:var(--ink)} @media (prefers-reduced-motion:reduce){ #dash .sh-lni{transition:none} } #dash .sh-lnn{font-size:14px;font-weight:600;line-height:1.35;color:var(--ink2);word-break:keep-all;overflow-wrap:anywhere;max-width:100%} #dash .sh-ln:hover .sh-lnn{color:var(--ink)} /* 숫자 배지 — 처리할 일이 있는 메뉴만 · 보통은 진한 회색, 문제(출금 실패)만 빨강 */ #dash .sh-lb{position:absolute;top:-7px;right:-9px;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--ink);color:var(--panel);font-size:12px;font-weight:700;line-height:22px;text-align:center;letter-spacing:0;box-shadow:0 0 0 2px var(--panel)} #dash .sh-lb.bad{background:var(--bad-fill);color:#fff} #dash .sh-lb.wait{background:var(--panel2);color:var(--ink2);box-shadow:0 0 0 2px var(--panel),inset 0 0 0 1px var(--line2)} /* 은행 등록 중 = 기다리는 곳 수(회색) */ /* '메뉴 편집' 타일(위멤버스 빈칸 +) — 점선 빈칸 */ #dash .sh-ln-add .sh-lni{background:none;color:var(--mute);border:1px dashed var(--line2)} #dash .sh-ln-add:hover .sh-lni,#dash .sh-ln-add:focus-visible .sh-lni{background:var(--panel2);color:var(--ink);border-color:var(--border-interactive)} #dash .sh-ln-add .sh-lnn{color:var(--mute);font-weight:500} /* ── ③ 3칸 패널 — 한 장 안에서 점선으로 나눔(위멤버스 아래 칸처럼) ── */ #dash .sh-pan{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);background:var(--panel);border:1px solid var(--sh-bd);border-radius:var(--r-card);box-shadow:var(--sh-sh);overflow:hidden;min-width:0} #dash .sh-col{min-width:0;padding:22px 24px 20px} #dash .sh-col+.sh-col{border-left:1px dashed var(--sh-dash)} #dash .sh-colh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)} #dash .sh-colh h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} #dash .sh-colm{font-size:12px;color:var(--mute);white-space:nowrap} #dash .sh-colh2{margin-top:18px} #dash .sh-cap{margin:8px 0 0;font-size:12px;color:var(--mute);line-height:1.45;word-break:keep-all} #dash .sh-empty{margin:6px 0 0;font-size:14px;color:var(--mute)} /* ③-1 AI 요약 칸 — 2026-11-06 다듬기: 남색 번짐·반짝이를 걷고 옆 두 칸과 같은 무채색 면(따로 바탕 없이 패널 그대로 · 제목·선·글자 모두 같은 토큰) */ #dash .sh-hl{margin:0;font-size:20px;font-weight:700;line-height:1.45;letter-spacing:-.02em;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance} #dash .sh-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 0;font-size:12px;font-weight:600;color:var(--mute)} #dash .sh-meta.old{color:var(--warn)} #dash .sh-re{font:inherit;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--r-ctl);border:1px solid var(--line2);background:transparent;color:var(--accent);cursor:pointer} #dash .sh-re:hover:not(:disabled){background:var(--accent-soft)} #dash .sh-re:disabled{color:var(--mute);cursor:default} #dash .sh-ai{list-style:none;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:8px} #dash .sh-ai li{position:relative;padding-left:16px;font-size:14px;line-height:1.55;color:var(--ink2);word-break:keep-all;overflow-wrap:anywhere} #dash .sh-ai li::before{content:"";position:absolute;left:4px;top:.7em;width:4px;height:4px;border-radius:50%;background:var(--faint)} /* 문장 옆 '자세히 보기 ›' 글씨(2026-10-12) — 누르는 글씨는 강조 파랑 하나(--accent · 토큰 규칙) */ #dash .sh-more{display:inline;margin:0 0 0 6px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;letter-spacing:0;color:var(--accent);cursor:pointer;white-space:nowrap;vertical-align:baseline} #dash .sh-hl .sh-more{font-size:14px;margin-left:8px} #dash .sh-more:hover{text-decoration:underline;text-underline-offset:3px} #dash .sh-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} /* ③-2 처리할 일 — 신규 수임 알림 · 원천세 진행 막대 · 할 일 줄 */ #dash .sh-rm{margin:0 0 12px;padding:0 0 10px;border-bottom:1px dashed var(--sh-dash)} #dash .sh-rm-h{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--ink2)} #dash .sh-rm ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} #dash .sh-rm li{display:flex;align-items:center;gap:8px;min-width:0} #dash .sh-rm-go{flex:1;min-width:0;text-align:left;background:none;border:0;padding:6px 4px;border-radius:var(--r-ctl);font:inherit;font-size:14px;color:var(--ink2);cursor:pointer;word-break:keep-all;line-height:1.45} #dash .sh-rm-go b{color:var(--ink)} #dash .sh-rm-go:hover,#dash .sh-rm-go:focus-visible{background:var(--sh-hover)} #dash .sh-rm-ow{color:var(--mute);font-size:12px} #dash .sh-rm-x{flex:none;background:none;border:1px solid var(--line);border-radius:var(--r-ctl);padding:4px 10px;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;min-height:32px} #dash .sh-rm-x:hover{color:var(--ink);border-color:var(--ink2)} #dash .sh-wb{margin:0 0 6px} #dash .sh-pl{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap} #dash .sh-pl>span{font-size:13px;color:var(--ink2);word-break:keep-all} #dash .sh-pl>b{font-size:22px;font-weight:750;letter-spacing:-.02em;color:var(--accent);line-height:1.1;white-space:nowrap} #dash .sh-pl>b small{font-size:13px;font-weight:600;color:var(--mute)} #dash .sh-bar{height:8px;border-radius:var(--r-pill);background:var(--dv-track);overflow:hidden;margin-top:8px} #dash .sh-bar i{display:block;height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent-fill),var(--ai))} #dash .sh-pf{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--mute)} #dash .sh-pf .sh-more{margin:0;font-size:13px} /* 할 일 줄(공지사항 목록처럼) — 이름 · 숫자 · › · 색 점은 문제(빨강)·확인 필요(호박)만, 나머지는 회색 */ #dash .sh-rows{list-style:none;margin:0;padding:0} #dash .sh-rows>li+li{border-top:1px solid var(--line)} #dash .sh-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto 12px;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 4px;border:0;border-radius:0;background:none;text-align:left} #dash button.sh-row{cursor:pointer} #dash button.sh-row:hover{background:var(--sh-hover)} #dash .sh-dt{width:8px;height:8px;border-radius:50%;background:var(--line2)} #dash .sh-row.t-bad .sh-dt{background:var(--bad-fill)} #dash .sh-row.t-warn .sh-dt{background:var(--warn-fill)} #dash .sh-rl{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dash .sh-row>b{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap} #dash .sh-row>b small{font-size:12px;font-weight:600;margin-left:1px;color:var(--mute)} #dash .sh-row.t-bad>b{color:var(--bad-ink)} #dash .sh-ra{font-size:16px;line-height:1;color:var(--mute)} /* ③-3 수집 현황 — 늦음·실패만 작은 줄 · 소식(업데이트 노트) */ #dash .sh-late{list-style:none;margin:-2px 0 8px 22px;padding:0;display:grid;gap:2px} #dash .sh-late li{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink2);line-height:1.5} #dash .sh-late li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} #dash .sh-late em{font-style:normal;font-weight:600;color:var(--warn-ink);white-space:nowrap} #dash .sh-late li.s-fail em{color:var(--bad-ink)} #dash .sh-late li.s-more{color:var(--mute)} #dash .sh-nt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px} #dash .sh-nt>li,#dash .sh-rows>li{min-width:0} #dash .sh-ntr{display:flex;overflow:hidden;align-items:baseline;gap:10px;width:100%;min-width:0;padding:5px 4px;border:0;border-radius:var(--r-ctl);background:none;text-align:left} #dash button.sh-ntr{cursor:pointer} #dash button.sh-ntr:hover{background:var(--sh-hover)} #dash .sh-ntd{flex:none;font-size:12px;color:var(--mute);min-width:34px} #dash .sh-ntt{flex:1;min-width:0;font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dash .sh-ntt b{font-weight:700;color:var(--ink);margin-right:2px} /* 원천세 안 한 곳 서랍(js/997b whtOpen — openDrawer · 996 서랍 표 말씨 cv-tb 그대로) */ .wo-tb thead th:last-child,.wo-tb td.wo-ph{width:120px;text-align:right;padding-right:6px;font-size:13px;color:var(--mute);white-space:nowrap} @media (max-width:1180px){ /* ── 좁은 화면 ── */ #dash .sh-lnc{gap:20px 32px} #dash .sh-pan{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #dash .sh-ca{grid-column:1/-1;border-bottom:1px dashed var(--sh-dash)} #dash .sh-col+.sh-col.sh-ct{border-left:0} } @media (max-width:900px){ #dash .sh-lng{flex:1 1 100%} #dash .sh-lnl{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))} } @media (max-width:700px){ #dash>.sh{gap:14px} #dash .sh-pan{grid-template-columns:minmax(0,1fr)} #dash .sh-col{padding:18px 16px 16px} #dash .sh-col+.sh-col{border-left:0;border-top:1px dashed var(--sh-dash)} #dash .sh-ca{border-bottom:0} #dash .sh-hl{font-size:19px} } @media (max-width:640px){ #dash .sh-hi{font-size:17px} #dash .sh-wx>b{font-size:18px} #dash .sh-lnc{padding:18px 10px 14px;gap:18px} #dash .sh-lng{flex:1 1 100%} #dash .sh-lngh{margin-bottom:10px} #dash .sh-lnl{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 2px} #dash .sh-lni{width:54px;height:54px} #dash .sh-lni svg{width:26px;height:26px} #dash .sh-lnn{font-size:13px} #dash .sh-lb{top:-6px;right:-8px} } @media (max-width:359px){ #dash .sh-lnl{grid-template-columns:repeat(3,minmax(0,1fr))} } /* ── 메뉴 편집 창(js/997b lnEdit · body 에 붙는 dialog) — 묶음 단위 · 보이기 켜고 끄기 · ↑↓ ── */ .ln-dlg{width:min(520px,calc(100vw - 24px));max-height:min(86vh,760px);padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);color:var(--ink);box-shadow:0 20px 48px rgb(18 24 38/.22);overflow:auto} .ln-dlg::backdrop{background:rgb(16 24 40/.32)} .ln-dlg .ln-dh{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 12px;background:var(--panel);border-bottom:1px solid var(--line)} .ln-dlg h2{margin:0;font-size:17px;font-weight:700} .ln-dlg h2 small{margin-left:6px;font-size:13px;font-weight:500;color:var(--mute)} .ln-dlg .ln-help{margin:12px 20px 4px;font-size:13px;line-height:1.5;color:var(--ink2);word-break:keep-all} .ln-dlg .ln-gs{padding:4px 20px 8px;display:grid;gap:14px} .ln-dlg .ln-g h3{margin:8px 0 6px;font-size:13px;font-weight:600;color:var(--mute)} .ln-dlg .ln-g ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-inner)} .ln-dlg .ln-g li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 12px;min-height:46px} .ln-dlg .ln-g li+li{border-top:1px solid var(--line)} .ln-dlg .ln-g label{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;font-size:14px} .ln-dlg .ln-g input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none} .ln-dlg .ln-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-ctl);background:var(--accent-soft);color:var(--accent);flex:none} .ln-dlg .ln-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ln-dlg li.off .ln-nm{color:var(--mute);text-decoration:line-through} .ln-dlg li.off .ln-ic{background:var(--panel2);color:var(--mute)} .ln-dlg .ln-mv{display:flex;gap:4px;flex:none} .ln-dlg .ln-mv .btn{min-width:36px;padding:0 8px} .ln-dlg .ln-df{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px 16px;background:var(--panel);border-top:1px solid var(--line)} .ln-dlg .ln-note{font-size:13px;color:var(--mute);line-height:1.4} /* 2026-10-15 왼쪽 메뉴를 뺀 뒤 홈(#dash 1320px 가운데)보다 '오늘 출퇴근'·'활동' 칸이 넓게 삐져나오던 것 — 같은 너비로 */ #view-main>section.att-today,#view-main>section.act-card{max-width:1320px;margin-left:auto;margin-right:auto;box-sizing:border-box} /* 2026-10-16 밤 자동 수집 지킴이(js/997g) — 홈 '수집 현황' 칸 한 줄 + [보기] 서랍. 색은 사람 확인이 있을 때만(t-warn · lv-human). */ #dash .sh-row.og-row{grid-template-columns:8px minmax(0,1fr) auto auto} #dash .og-row .og-n{font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap} #dash .og-row .og-n .num{font-weight:700;color:var(--ink)} #dash .og-row.t-warn .og-hm,#dash .og-row.t-warn .og-hm .num{color:var(--warn-ink)} #dash .og-row .og-go{font-size:13px;color:var(--mute);white-space:nowrap} @media (max-width:380px){ #dash .sh-row.og-row{gap:8px} #dash .og-row .og-n{font-size:12px} } #drw .og-dw{display:grid;gap:12px} #drw .og-meta{margin:0;font-size:13px;line-height:1.5;color:var(--mute);word-break:keep-all} #drw .og-sum{margin:0;font-size:14px;color:var(--ink)} #drw .og-sec h3{margin:2px 0 6px;font-size:14px;font-weight:700;color:var(--ink)} #drw .og-list{list-style:none;margin:0;padding:0;display:grid;gap:8px} #drw .og-it{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)} #drw .og-it.lv-human{border-color:var(--warn-fill)} #drw .og-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px} #drw .og-h b{min-width:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere} #drw .og-h em{font-style:normal;font-size:12px;font-weight:600;color:var(--mute);white-space:nowrap} #drw .og-it.lv-human .og-h em{color:var(--warn-ink)} #drw .og-l{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px;margin:4px 0 0;font-size:13px;line-height:1.5} #drw .og-k{color:var(--mute)} #drw .og-v{min-width:0;color:var(--ink2);overflow-wrap:anywhere;word-break:keep-all} #drw .og-todo .og-v{color:var(--ink);font-weight:600} #drw .og-empty{margin:0;font-size:14px;color:var(--ink2)} #drw .og-rule{font-size:13px;color:var(--ink2)} #drw .og-rule summary{cursor:pointer;color:var(--mute)} #drw .og-rule p{margin:6px 0 0;line-height:1.55;word-break:keep-all} #view-c360 .c3-pre-no{margin-left:auto;font-size:12px;color:var(--mute)} #view-flreq .frq-head input[type=month]{min-height:var(--ctl-h,36px);border-radius:var(--r-ctl,10px);border:1px solid var(--line2);background:var(--panel);color:var(--ink);font-size:14px;padding:0 10px} /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 101번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 5개: 999zzz 999zzz3 996 996b 996c */ #view-monthly .wht-head>select{min-width:0;width:auto} #view-monthly .wht-head>#mo-csv{order:99;margin-left:auto} #view-monthly .wht-head>#mo-q{flex:1 1 120px;min-width:120px;max-width:220px} /* 2026-10-11 메뉴 전체 점검(대표님 "텍스트 최대한 줄이고 한눈에") — docs/디자인_벤치마크_2026-10.md 카드 말투를 홈 한눈 카드와 맞춘다: 모서리 20 · 옅고 넓은 그림자(어둡게는 선만). AI 요약 띠(.br)·안쪽 카드는 그대로. */ :is(#view-anal,#view-monthly){--au-sh:0 1px 2px rgb(18 24 38/.04),0 8px 24px rgb(18 24 38/.06)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(#view-anal,#view-monthly){--au-sh:none} } :root[data-theme="dark"] :is(#view-anal,#view-monthly){--au-sh:none} :is(#view-anal,#view-monthly) .card:not(.card .card):not(.br){border-radius:var(--r-card);box-shadow:var(--au-sh)} /* '다 했어요' 빈 칸 — 할 일이 없을 때는 안심 한 줄 */ :is(#view-anal,#view-monthly) .au-done{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ok-ink)} :is(#view-anal,#view-monthly) .au-sub{display:block;margin-top:4px;font-size:13px;color:var(--mute);font-weight:400} /* 2026-10-11 디자인 점검 16: '직전 대비' 칸이 줄마다 3~4줄(한 줄 95px · 1440 에서 7곳만) → '▲444만' 한 줄만, 직전·예정고지 자세한 건 올리면(title) */ #view-anal table.an-tbl.an-v2 td.an2-cmp-td .an2-cd{display:none!important} #view-anal table.an-tbl.an-v2 td.an2-cmp-td .an2-cmp{cursor:help;white-space:nowrap} /* 2026-10-11 디자인 점검 18: 월별 표 '판매대행 미수집' 칸 — 진한 칸 색 위 흐린 숫자(약 4.0:1) → 본문 둘째 색 · 별표는 진한 호박 */ /* 2026-10-11 디자인 마무리(4-111): 진한 칸(파랑 20~35% 섞임) 위에서도 4.5:1 넘게 — 둘째 색(ink2) 대신 한 단계 진한 ink-3. 기울임은 그대로(수집 중 표시) */ #view-monthly .mo-table td:is(.mo-onm,.mo-pc),#view-monthly .mo-onm-k{color:var(--ink-3)} @media (min-width:901px){ /* 2026-10-11 디자인 점검 2차: '근거' 칸도 한 줄(둘째 줄은 올리면 · '+' 표시) — 1440 에서 한 화면에 보이는 곳 수를 늘린다 */ #view-anal table.an-tbl.an-v2 td.an2-src .an2-d{display:none!important} #view-anal table.an-tbl.an-v2 td.an2-src .an2-s{white-space:nowrap;cursor:help} #view-anal .an2-more{font-style:normal;display:inline-grid;place-items:center;width:16px;height:16px;margin-left:4px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink2);font-size:12px;font-weight:700;line-height:1;vertical-align:1px} } @media (min-width:1200px){ /* 넓은 화면(1200px 이상)은 한 줄 목록 — 둘째 줄(유형·신고일·계산 메모·AI 요약 둘째 줄)은 옆에 작게 붙이거나 올리면(title) 보인다 */ #view-anal table.an-tbl.an-v2 td.name .an-nmw{display:inline-flex;vertical-align:middle;max-width:calc(100% - 78px)} #view-anal table.an-tbl.an-v2 td.name .an-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #view-anal table.an-tbl.an-v2 td.name .sub{display:inline-block!important;vertical-align:middle;max-width:72px;margin:0 0 0 6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-anal table.an-tbl.an-v2 td.an2-next{white-space:nowrap} #view-anal table.an-tbl.an-v2 td.an2-next .an2-v{display:inline} #view-anal table.an-tbl.an-v2 td.an2-next .an2-d{display:inline!important;margin:0 0 0 6px;font-size:12px;white-space:nowrap} #view-anal table.an-tbl.an-v2 td.an2-inc .an2-d{display:none!important} #view-anal table.an-tbl.an-v2 .an2-n{-webkit-line-clamp:1} #view-anal table.an-tbl.an-v2 tbody td{padding-top:9px;padding-bottom:9px} } @media (max-width:640px){ /* ═══ 2026-10-11 디자인 마무리(이력 4-111) ④-6 · 휴대폰: 세금 예측 목록 첫 줄을 첫 화면(844) 안에 ═══ 검색·담당자·초기화를 한 줄로, 거르기 칩(전체·세무 검토…)은 한 줄 가로 칩(손가락으로 밀기) */ #view-anal .an-tools{flex-wrap:nowrap;gap:6px} #view-anal .an-tools .an-f{flex:0 1 auto;min-width:0} #view-anal .an-tools .an-f:first-child{flex:1 1 auto} #view-anal .an-tools #anal-owner{max-width:112px} #view-anal .an-tools .btn{flex:none;padding-left:10px;padding-right:10px} #view-anal #anal-stats.an-fbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain} #view-anal #anal-stats.an-fbar::-webkit-scrollbar{display:none} #view-anal #anal-stats.an-fbar>*{flex:none} } /* 2026-10-14 월별 · 끝난 달 머리 '✓ 완료'(색 없이) · 달 칸 누르면 상세(moDetail) */ #view-monthly .mo-table th.mo-done[data-ok]::after{content:attr(data-ok);display:block;width:max-content;margin:2px 0 0 auto;font-size:12px;font-weight:500;line-height:18px;color:var(--mute)} #view-monthly #mo-rows td[data-m]{cursor:pointer} #view-monthly #mo-rows td[data-m]:hover{text-decoration:underline;text-underline-offset:3px} #dlg-mo-dx{max-width:min(96vw,560px)} #dlg-mo-dx .mo-dx-st{margin:8px 0 6px;font-size:13px;color:var(--mute)} #dlg-mo-dx .mo-dx-t{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:14px} #dlg-mo-dx .mo-dx-t caption{text-align:left;font-weight:700;font-size:14px;padding:0 0 4px} #dlg-mo-dx .mo-dx-t th,#dlg-mo-dx .mo-dx-t td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;font-weight:400} #dlg-mo-dx .mo-dx-t thead th{font-size:12px;color:var(--mute)} #dlg-mo-dx .mo-dx-t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} #dlg-mo-dx .mo-dx-t tr.sub th{font-size:12px;color:var(--mute);padding-left:14px} #dlg-mo-dx .mo-dx-t tfoot th,#dlg-mo-dx .mo-dx-t tfoot td{font-weight:700;border-bottom:0} #dlg-mo-dx .mo-dx-t tfoot small{font-weight:400;font-size:12px;color:var(--mute);margin-left:4px} #dlg-mo-dx .mo-dx-vat{margin:10px 0 2px;font-size:14px} #dlg-mo-dx .mo-dx-vat small,#dlg-mo-dx .mo-dx-src{font-size:12px;color:var(--mute)} #dlg-mo-dx .mo-dx-vat .neg{color:var(--bad,#c0362c)} #dlg-mo-dx .mo-dx-t{table-layout:fixed} #dlg-mo-dx .mo-dx-t th[scope=row]{width:40%;white-space:normal;overflow-wrap:anywhere} #dlg-mo-dx .df{flex-wrap:wrap} @media (max-width:480px){ #dlg-mo-dx .mo-dx-t{font-size:13px} #dlg-mo-dx .mo-dx-t th,#dlg-mo-dx .mo-dx-t td{padding:5px 3px} #dlg-mo-dx .mo-dx-t th[scope=row]{width:34%} } /* 예정고지 납부서 칸 (2026-10-11 · js/996) — 홈 카드와 같은 결: 둥근 22px · 옅은 테두리 · 글자 최소 */ .prn{box-sizing:border-box;margin:0 0 16px;background:var(--panel,#fff);border:1px solid var(--line,#E4E8EE);border-radius:22px;box-shadow:var(--e1,none)} .prn[hidden]{display:none} .prn-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px} .prn-h h3{margin:0;font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink,#121826)} .prn-t{font-size:13px;color:var(--ink2,#465163);font-variant-numeric:tabular-nums} .prn-dr{margin-left:auto;font-size:13px;font-weight:650;color:var(--accent-ink,#1F4FD6);text-decoration:none;padding:4px 8px;border-radius:var(--r-ctl)} .prn-dr:hover{background:var(--surface-3,#EDF0F4)} .prn-dr:focus-visible {outline:2px solid var(--accent-fill,#2B5DE8);outline-offset:2px} @media (max-width:560px){ .prn{border-radius:20px} } /* 납부서 수집 메뉴 (2026-10-11 · js/996b · views/285) — 홈 카드와 같은 결: 둥근 22px · 옅은 테두리 · 글자 최소 · 토큰만(밝게·어둡게) */ #view-bills .wht-head .bl-seg{margin-left:auto} .bl{display:flex;flex-direction:column;gap:16px;min-width:0} .bl-src{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px} /* 11/3 카드 셋(예정고지·위멤버스·종소세 중간예납) — 넓으면 한 줄 셋, 좁으면 접힘 */ .bl-c,.bl-sec{box-sizing:border-box;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1,none)} .bl-c{display:flex;flex-direction:column;gap:6px;padding:18px 20px 16px} .bl-ch{display:flex;align-items:center;gap:8px} .bl-ch h3,.bl-h h3{margin:0;font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink)} .bl-tag{font-size:12px;color:var(--mute);padding:2px 8px;border-radius:var(--r-chip,6px);background:var(--surface-3)} .bl-big{margin:6px 0 0;font-size:26px;line-height:1.15;font-weight:750;letter-spacing:-.02em;color:var(--ink)} .bl-sub2{margin:0;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums} .bl-kv{list-style:none;margin:8px 0 2px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px} .bl-kv li{display:flex;align-items:baseline;gap:4px;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums} .bl-kv li span{color:var(--ink2)} .bl-kv b{font-size:18px;font-weight:750;color:var(--ink);margin-left:2px} .bl-st{display:flex;align-items:center;gap:7px;margin:4px 0 0;font-size:12.5px;color:var(--mute);min-width:0} .bl-st i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line2)} .bl-st.ok i{background:var(--ok-ink)} .bl-st.warn{color:var(--warn-ink)} .bl-st.warn i{background:var(--warn-ink)} .bl-st.run{color:var(--accent-ink)} .bl-st.run i{background:var(--accent-fill);animation:bl-pulse 1.2s ease-in-out infinite} @keyframes bl-pulse{50%{opacity:.25}} @media (prefers-reduced-motion:reduce){ .bl-st.run i{animation:none} } .bl-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px} /* 2026-10-11 디자인 점검 6: '지금 수집' 이 카드마다 파란 채움(한 화면 2개) → 테두리 단추(서버 PC 가 늘 자동으로 받으니 보조 동작) */ .content .bl .bl-run:disabled{background:var(--surface-3);border-color:var(--line);color:var(--mute);cursor:default} .bl .bl-dr{text-decoration:none} .bl-sec{padding:16px 18px 14px} .bl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px} .bl-t{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums} .bl-t b{color:var(--ink);font-weight:750} .bl-h .bl-dr,.bl-h .bl-kseg{margin-left:auto} .bl-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .bl-o{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;font:inherit;cursor:pointer; padding:12px 14px;border-radius:var(--r-inner);border:1px solid var(--line);background:var(--panel2);color:var(--ink)} .bl-o:hover{border-color:var(--line2);background:var(--panel)} .bl-o[aria-expanded="true"]{border-color:var(--accent-fill);background:var(--panel);box-shadow:0 0 0 1px var(--accent-fill) inset} .bl-o:focus-visible,.bl-go:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px} .bl-on{font-size:13px;font-weight:650;color:var(--ink2)} .bl-n{font-size:13px;color:var(--mute)} .bl-n b{font-size:24px;line-height:1.15;font-weight:750;letter-spacing:-.02em;color:var(--ink);margin-right:2px;font-variant-numeric:tabular-nums} .bl-s{font-size:12px;color:var(--mute);word-break:keep-all} .bl-l{list-style:none;margin:12px 0 0;padding:4px 0 0;border-top:1px solid var(--line);columns:2 320px;column-gap:24px} .bl-l li{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);break-inside:avoid;min-height:30px} .bl-l li.is-none{color:var(--mute)} .bl-l1{margin-top:0;border-top:0;padding-top:0} .bl-cn{flex:1;min-width:0;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bl-cn small{margin-left:6px;font-size:12px;color:var(--mute)} .is-none .bl-cn{color:var(--mute)} .bl-m{font-size:13.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} .is-none .bl-m{font-weight:500;color:var(--mute)} .bl-go{font-size:13px;font-weight:650;color:var(--accent-ink);text-decoration:none;padding:4px 10px;border-radius:var(--r-ctl);background:var(--surface-3);white-space:nowrap} .bl-go:hover{background:var(--accent-fill);color:#fff} .bl-no{font-size:12px;color:var(--mute);padding:4px 8px;border-radius:var(--r-chip,6px);border:1px dashed var(--line2);white-space:nowrap} .bl-e{margin:0;font-size:13px;color:var(--mute)} .bl-chk{border-style:dashed;border-color:var(--line2)} .content .bl-kseg>button{white-space:nowrap} .bl-kseg .num{margin-left:2px;font-variant-numeric:tabular-nums;opacity:.8} /* 가결산 세금 예측 목록 위 한 줄(js/996 · 담당자별 카드는 이 메뉴로 옮김) */ .prn .prn-one{margin:0} .prn-cnt{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums} .prn-cnt b{font-size:16px;font-weight:750;color:var(--ink)} .prn-one .prn-goto{margin-left:auto;font:inherit;font-size:13px;font-weight:650;border:0;background:none;cursor:pointer} .prn{padding:12px 18px} @media (max-width:560px){ .bl{gap:12px} .bl-src{grid-template-columns:minmax(0,1fr);gap:12px} .bl-c{padding:16px 16px 14px;border-radius:var(--r-card)} .bl-big{font-size:22px} .bl-sec{padding:14px 14px 12px;border-radius:var(--r-card)} .bl-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .bl-o{padding:10px 12px;border-radius:var(--r-inner)} .bl-n b{font-size:21px} .bl-l{columns:1} .bl-h .bl-kseg{margin-left:0;width:100%;display:flex} .bl-h .bl-kseg>button{flex:1;min-width:0;padding:0 6px} #view-bills .wht-head .bl-seg{margin-left:0} .prn-one .prn-goto{margin-left:0;padding-left:0} } /* 2026-10-11 디자인 점검 14: 0 은 흐리게 · 모두 0 이면 안심 카드 하나 */ .bl-kv li.z b{color:var(--mute);font-weight:600} .bl-calm{box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1,none);padding:22px 24px;display:flex;flex-direction:column;gap:6px} .bl-ok{display:flex;align-items:center;gap:8px;margin:0;font-size:20px;font-weight:750;letter-spacing:-.02em;color:var(--ink)} .bl-ok i{font-style:normal;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ok-soft);color:var(--ok-ink);font-size:15px} .bl-cs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;margin-top:12px} .bl-cr{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:12px 14px;border-radius:var(--r-inner);background:var(--panel2);min-width:0} .bl-cr>b{font-size:14px;font-weight:700;color:var(--ink)} .bl-cr>b small{font-weight:500;color:var(--mute);font-size:12px;margin-left:4px} .bl-cr .bl-st{margin:0;flex:1 1 auto} @media (max-width:560px){ .bl-calm{padding:18px 16px} .bl-ok{font-size:18px} .bl-cs{grid-template-columns:minmax(0,1fr)} } /* 부가세 신고 진행 (2026-10-11 · js/996c · views/287) — 홈 한눈 카드와 같은 결: 모서리 토큰(--r-card 20 · --r-inner 12 · --r-pill) · 옅은 그림자(어둡게는 테두리) · 글자 최소 · 토큰만. 단계 색 = 파랑 한 줄기(옅음 → 진함) + 끝은 초록: s0 자료 · s1 검토 · s2 작성 · s3 접수 · s4 전달 · s5 끝 */ #view-vatb{--vb-sh:0 1px 2px rgb(18 24 38/.04),0 8px 24px rgb(18 24 38/.06);--vb-bd:transparent; --vb-s0:var(--chart-rest);--vb-s1:color-mix(in srgb,var(--accent-fill) 30%,var(--panel));--vb-s2:color-mix(in srgb,var(--accent-fill) 55%,var(--panel)); --vb-s3:color-mix(in srgb,var(--accent-fill) 80%,var(--panel));--vb-s4:var(--accent-fill);--vb-s5:color-mix(in srgb,var(--accent-fill) 62%,var(--ink))} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #view-vatb{--vb-sh:none;--vb-bd:var(--line)} } :root[data-theme="dark"] #view-vatb{--vb-sh:none;--vb-bd:var(--line)} #view-vatb .wht-head .vb-seg{margin-left:auto} .vb{display:flex;flex-direction:column;gap:16px;min-width:0} .vb :where(button){font:inherit;color:inherit;-webkit-tap-highlight-color:transparent} .vb button:focus-visible,.vb input:focus-visible{outline:2px solid var(--sel-line,var(--accent-fill));outline-offset:2px} .vb-hero,.vb-list,.vb-oc{box-sizing:border-box;min-width:0;background:var(--panel);border:1px solid var(--vb-bd);box-shadow:var(--vb-sh)} /* ── 기간 고르기 + 큰 카드 ── */ .vb-top{display:flex;flex-direction:column;gap:12px;min-width:0} .content .vb-pseg{margin:0;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .content .vb-pseg::-webkit-scrollbar{display:none} .content .vb-pseg>button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 16px;border-radius:var(--r-inner);line-height:1.2;white-space:nowrap; border:1px solid var(--line);background:var(--panel);font-weight:650;color:var(--ink2)} .content .vb-pseg>button small{font-size:12px;font-weight:500;color:var(--mute)} .content .vb-pseg>button[aria-pressed="true"]{border-color:var(--accent-fill);background:var(--accent-soft);color:var(--accent-ink)} .content .vb-pseg>button[aria-pressed="true"] small{color:var(--accent-ink)} .vb-hero{border-radius:var(--r-card);padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px} .vb-hh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap} .vb-k{margin:0;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .vb-d{margin:0;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums} .vb-d.is-near{color:var(--warn-ink);font-weight:650} .vb-big{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;color:var(--ink)} .vb-big b{font-size:40px;line-height:1;font-weight:780;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .vb-big span{font-size:16px;color:var(--ink2)} .vb-big em{font-style:normal;margin-left:auto;font-size:15px;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums} .vb-bar{display:flex;gap:2px;height:10px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-3);min-width:0} .vb-bar i{display:block;min-width:4px;height:100%} .vb-bar.is-empty{opacity:.6} .vb-bar .s0,.vb-lg .s0{background:var(--vb-s0)} .vb-bar .s1,.vb-lg .s1{background:var(--vb-s1)} .vb-bar .s2,.vb-lg .s2{background:var(--vb-s2)} .vb-bar .s3,.vb-lg .s3{background:var(--vb-s3)} .vb-bar .s4,.vb-lg .s4{background:var(--vb-s4)} .vb-bar .s5,.vb-lg .s5{background:var(--vb-s5)} .vb-lg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px} .vb-lg button{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-ctl);border:1px solid transparent;background:none;cursor:pointer;font-size:13px;color:var(--ink2);min-height:30px} .vb-lg button:hover{background:var(--panel2)} .vb-lg button[aria-pressed="true"]{border-color:var(--line2);background:var(--panel2);color:var(--ink)} .vb-lg button i{width:10px;height:10px;border-radius:3px;flex:none} .vb-lg b{font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums} .vb-lg button.bad{color:var(--bad-ink)} .vb-lg button.bad b{color:var(--bad-ink)} /* ── 담당자 카드 ── */ .vb-own{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px} #view-vatb .vb-oc{border:1px solid var(--vb-bd);min-height:0} /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 102번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 999g 999zzz 999zzz3 */ /* 2026-10-09 CMS 회원·등록 두 탭 — 제목 바로 옆 */ .cms-mtab{display:inline-flex;gap:4px;margin:0 6px 0 2px;align-items:center} .cms-mtab button{font-weight:600} /* 2026-10-10 디자인 개편 · CMS 칸 그래프 — 빗금·점 무늬를 걷고 색 면만(옆 숫자·범례 글리프 ✓ ! × 가 같은 뜻을 전한다). 그림을 그리는 js 는 30_수임동의/js/999c(다른 세션 작업 중이라 손대지 않음) — 여기서는 색·무늬만. docs/디자인_개편_2026-10.md */ :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset) :is(.cv-stk,.cv-own-trk)>:is(.cv-f-mute,.cv-f-bad,.cv-f-wait){background-image:none} :is(#view-cmsmem,#view-cmspay) .cv-hl{stroke-opacity:0} :is(#view-cmspay) .cv-sw.cv-hatch{background-image:none} /* 2026-10-11 메뉴 전체 점검(대표님 "텍스트 최대한 줄이고 한눈에") — docs/디자인_벤치마크_2026-10.md 카드 말투를 홈 한눈 카드와 맞춘다: 모서리 20 · 옅고 넓은 그림자(어둡게는 선만). AI 요약 띠(.br)·안쪽 카드는 그대로. */ :is(#view-cmsnew,#view-cmsreg,#view-cmsmem,#view-cmspay,#view-cmsset){--au-sh:0 1px 2px rgb(18 24 38/.04),0 8px 24px rgb(18 24 38/.06)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(#view-cmsnew,#view-cmsreg,#view-cmsmem,#view-cmspay,#view-cmsset){--au-sh:none} } :root[data-theme="dark"] :is(#view-cmsnew,#view-cmsreg,#view-cmsmem,#view-cmspay,#view-cmsset){--au-sh:none} :is(#view-cmsnew,#view-cmsreg,#view-cmsmem,#view-cmspay,#view-cmsset) .card:not(.card .card):not(.br){border-radius:var(--r-card);box-shadow:var(--au-sh)} /* '다 했어요' 빈 칸 — 할 일이 없을 때는 안심 한 줄 */ :is(#view-cmsnew,#view-cmsreg,#view-cmsmem,#view-cmspay,#view-cmsset) .au-done{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ok-ink)} :is(#view-cmsnew,#view-cmsreg,#view-cmsmem,#view-cmspay,#view-cmsset) .au-sub{display:block;margin-top:4px;font-size:13px;color:var(--mute);font-weight:400} /* 웹 모드 안내: 두 줄 경고 상자 → 한 줄(설명은 ⓘ) · 경고색 테두리 대신 옅은 바탕 */ #view-cmspay #cpy-webmode,#view-cmsnew #cms-webmode{border-color:var(--line);background:var(--panel2);box-shadow:none;border-radius:var(--r-inner);padding:10px 14px} #view-cmspay #cpy-webmode{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px} #view-cmspay #cpy-webmode .cms-wm-l{display:inline-flex;align-items:center;gap:6px} #view-cmsnew #cms-webmode .cms-stepsd{display:inline-block;margin:0 0 0 10px} #view-cmsnew #cms-webmode .cms-stepsd[open]{display:block;margin:6px 0 0} @media (min-width:601px){ /* 출금 결과 칸: 0 인 칸(다음 달부터·등록대기)은 그리지 않으므로 남은 칸이 줄을 채운다 */ #view-cmspay .cpy-wm-k{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} } #view-cmsset .cst-ih{display:flex;align-items:center;gap:6px} /* 2026-10-11 디자인 점검 18: 범례 기호 대비 — 호박·장밋빛·회색 칸 위 흰 기호(1.4~3.7:1) → 진한 글씨(5:1 이상, 밝게·어둡게 모두) */ :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sw.cv-f-warn{color:#5B3B00} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sw.cv-f-bad{color:#2A0209} :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sw:is(.cv-f-mute,.cv-f-skip){color:#283041} /* 2026-10-11 디자인 점검 23: 결과 있는 달이 3달 미만이면 막대 대신 작은 표(js 999c monthCard) */ #view-cmspay .cv-mini{list-style:none;margin:0;padding:0;display:grid;gap:6px} #view-cmspay .cv-mini li{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding:10px 14px;border-radius:var(--r-inner);background:var(--panel2);font-size:14px;color:var(--ink2)} #view-cmspay .cv-mini li>b{min-width:36px;color:var(--ink);font-weight:750} #view-cmspay .cv-mini li span b{color:var(--ink);font-weight:750} #view-cmspay .cv-mini li span.bad b{color:var(--bad-ink)} #view-cmspay .cv-mini li span.zero{color:var(--mute)} #view-cmspay .cv-mini li em{font-style:normal;margin-left:auto;font-weight:650;color:var(--ink)} #view-cmspay .cv-mini li small{font-size:12px;color:var(--mute)} @media (min-width:1201px){ /* 2026-10-11 디자인 점검 15: 회원·등록 숫자 줄 3겹 → 상태 칩 줄과 출금 줄을 넓은 화면에서는 한 줄로(자리가 모자라면 저절로 다음 줄) */ #view-cmsreg .cr-cms{flex:0 1 auto;order:2} #view-cmsreg .cr-bar>details{order:3} } @media (prefers-color-scheme:dark){ /* (4-111 에서 걷음) 휴대폰 출금 줄 줄바꿈 → 954c 의 한 줄 가로 칩으로 되돌림(목록 첫 줄을 첫 화면 안에 · 재채점 ④-6) */ /* ═══ 2026-10-11 디자인 마무리(이력 4-111) ═══ 18 · 어둡게: 회색·청록 범례 칸 위 기호 대비 — '–'(회색 칸 위 진한 글씨 2.1:1) → 흰 글씨(6:1) · '⋯'(청록 위 흰 글씨 4.2:1) → 칸만 한 단계 진하게(5:1) */ :root:not([data-theme="light"]) :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sw:is(.cv-f-mute,.cv-f-skip){color:#fff} :root:not([data-theme="light"]) :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sw.cv-f-wait{background-color:#0F6F7A} } :root[data-theme="dark"] :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sw:is(.cv-f-mute,.cv-f-skip){color:#fff} :root[data-theme="dark"] :is(#view-cmsreg,#view-cmsnew,#view-cmsmem,#view-cmspay,#view-cmsset,#view-setup,#view-intake) .cv-sw.cv-f-wait{background-color:#0F6F7A} /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 103번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 996c 998i */ .vb-oc{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:left;cursor:pointer;padding:14px 16px 12px;border-radius:var(--r-card)} .vb-oc:hover{background:var(--panel2)} #view-vatb .vb-oc[aria-pressed="true"]{border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill) inset} .vb-on{font-size:13px;font-weight:650;color:var(--ink2)} .vb-n{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums} .vb-n b{font-size:26px;line-height:1.1;font-weight:760;letter-spacing:-.02em;color:var(--ink);margin-right:2px} .vb-oc .vb-bar{height:6px} .vb-os{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums} .vb-os span{padding:1px 7px;border-radius:var(--r-pill);font-weight:650} .vb-os .bad{background:var(--bad-soft);color:var(--bad-ink)} .vb-os .warn{background:var(--warn-soft);color:var(--warn-ink)} .vb-os .ok{background:var(--accent-soft);color:var(--accent-ink)} /* ── 목록 ── */ .vb-list{border-radius:var(--r-card);padding:14px 16px 10px} .vb-lh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px} .content .vb-fseg{margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;max-width:100%} .content .vb-fseg::-webkit-scrollbar{display:none} .content .vb-fseg>button{white-space:nowrap} .vb-fseg .num{margin-left:2px;font-variant-numeric:tabular-nums;opacity:.8} .vb-lt{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0} .vb-q{box-sizing:border-box;width:180px;max-width:100%;height:34px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:inherit;font-size:14px} .vb-chip{border:1px solid var(--accent-fill);background:var(--accent-soft);color:var(--accent-ink);border-radius:var(--r-pill);padding:4px 10px;font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap} .vb-rows{list-style:none;margin:0;padding:0} .vb-r{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) 84px 118px 32px;grid-template-areas:"nm pg amt act x" "sub sub sub sub sub" "det det det det det"; align-items:center;column-gap:12px;padding:9px 2px;border-bottom:1px solid var(--line)} .vb-r:last-child{border-bottom:0} .vb-nm{grid-area:nm;display:flex;align-items:baseline;gap:8px;min-width:0;background:none;border:0;padding:4px 0;cursor:pointer;text-align:left} .vb-nm b{font-size:14.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vb-nm small{flex:none;font-size:12px;color:var(--mute)} .vb-nm:hover b{color:var(--accent-ink)} .vb-pg{grid-area:pg;display:flex;align-items:center;gap:8px;min-width:0} .vb-dots{display:inline-flex;gap:4px;flex:none} .vb-dots i,.vb-steps>li>i{display:block;width:10px;height:10px;border-radius:50%;background:var(--surface-3);border:1.5px solid var(--line2);box-sizing:border-box} .vb-dots i.on,.vb-steps>li.on>i{background:var(--accent-fill);border-color:var(--accent-fill)} .vb-dots i.on.hu{background:color-mix(in srgb,var(--accent-fill) 55%,var(--panel));border-color:var(--accent-fill)} .vb-dots i.cur,.vb-steps>li.cur>i{border-color:var(--accent-fill);background:var(--panel)} .is-done .vb-dots i{background:var(--vb-s5);border-color:var(--vb-s5)} .vb-now{font-size:13px;color:var(--ink2);white-space:nowrap} .is-done .vb-now{color:var(--vb-s5);font-weight:650} .vb-flag{font-size:12px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--mute);white-space:nowrap} .vb-flag.bad{background:var(--bad-soft);color:var(--bad-ink)} .vb-flag.warn{background:var(--warn-soft);color:var(--warn-ink)} .vb-amt{grid-area:amt;text-align:right;font-size:13.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} .vb-act{grid-area:act;display:flex;justify-content:flex-end;min-width:0} .vb-go{border:1px solid var(--accent-fill);background:var(--accent-fill);color:#fff;border-radius:var(--r-ctl);padding:5px 12px;font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap;min-height:30px} .vb-go:hover{filter:brightness(1.06)} .vb-go.ghost{background:var(--panel);color:var(--accent-ink)} .vb-rc{display:flex;gap:6px;min-width:0} .vb-rcin,.vb-hin{box-sizing:border-box;min-width:0;height:32px;padding:0 10px;border-radius:var(--r-ctl);border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:inherit;font-size:13px} .vb-r .vb-rcin{width:150px} .vb-x{grid-area:x;width:32px;height:32px;border-radius:50%;border:0;background:none;cursor:pointer;color:var(--mute);font-size:18px;line-height:1;padding:0} .vb-x:hover{background:var(--panel2);color:var(--ink)} .vb-x span{display:inline-block;transition:transform .15s} .vb-x[aria-expanded="true"] span{transform:rotate(90deg)} .vb-sub{grid-area:sub;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-2px} .vb-r.is-na .vb-nm b,.vb-r.is-na .vb-now{color:var(--mute)} .vb-r.is-bad .vb-nm b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bad-ink);margin-left:6px;vertical-align:middle} .vb-det{grid-area:det;margin:8px 0 4px;padding:12px 14px;border-radius:var(--r-inner);background:var(--panel2);display:flex;flex-direction:column;gap:10px;min-width:0} .vb-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .vb-steps>li{display:grid;grid-template-columns:12px 84px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13px;min-height:26px} .vb-sl{font-weight:650;color:var(--ink2)} .vb-steps>li.on .vb-sl{color:var(--ink)} .vb-sm{color:var(--mute);min-width:0;overflow-wrap:anywhere} .vb-undo{border:0;background:none;color:var(--accent-ink);font-size:12.5px;font-weight:650;cursor:pointer;padding:4px 6px;border-radius:var(--r-ctl)} .vb-undo:hover{background:var(--panel)} .vb-hold{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .vb-hold .vb-hin{flex:1 1 180px} .vb-hw{margin:0;font-size:13px;color:var(--bad-ink)} .vb-log{list-style:none;margin:0;padding:0;font-size:12px;color:var(--mute);display:flex;flex-direction:column;gap:2px} .vb-more{display:block;margin:8px auto 4px;border:1px solid var(--line2);background:var(--panel);border-radius:var(--r-pill);padding:6px 16px;font-size:13px;cursor:pointer;color:var(--ink2)} .vb-e{margin:8px 0;font-size:13px;color:var(--mute)} @media (max-width:640px){ /* ── 휴대폰 ── */ .vb{gap:12px} #view-vatb .wht-head .vb-seg{margin-left:0} .vb-hero{padding:16px 16px 14px} .vb-big b{font-size:34px} .vb-own{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .vb-oc{padding:12px 12px 10px} .vb-n b{font-size:22px} .vb-list{padding:12px 12px 8px} .vb-lt{margin-left:0;width:100%} .vb-q{width:100%;flex:1} .vb-r{grid-template-columns:minmax(0,1fr) auto 32px;grid-template-areas:"nm amt x" "pg act act" "sub sub sub" "det det det";row-gap:4px;column-gap:8px} .vb-r .vb-rcin{width:120px} .vb-steps>li{grid-template-columns:12px 72px minmax(0,1fr) auto} } @media (prefers-reduced-motion:reduce){ .vb-x span{transition:none} } /* 2026-10-12 종소세 5월 준비 (js/998i) — 접힌 카드 한 장 · 예정고지 칸(996)과 같은 결 */ .itx-box{box-sizing:border-box;margin:0 0 16px;padding:14px 18px;background:var(--panel,#fff);border:1px solid var(--line,#E4E8EE);border-radius:22px;box-shadow:var(--e1,none)} .itx-box[hidden]{display:none} .itx summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;list-style:none;min-height:28px} .itx summary::-webkit-details-marker{display:none} .itx summary::after{content:"›";margin-left:auto;font-size:18px;color:var(--mute,#586377);transition:transform .15s} .itx[open] summary::after{transform:rotate(90deg)} .itx summary:focus-visible{outline:2px solid var(--accent-fill,#2B5DE8);outline-offset:2px;border-radius:var(--r-ctl)} .itx summary h3{margin:0;font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink,#121826)} .itx-t{font-size:13px;color:var(--ink2,#465163)} .itx-sum{font-size:13px;color:var(--mute,#586377);font-variant-numeric:tabular-nums} .itx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 8px} .itx-c{font:inherit;font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid var(--line,#E4E8EE);background:var(--panel2,#F7F9FB);color:var(--ink2,#465163);cursor:pointer;min-height:30px} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 104번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 3개: 998n 998p 999zzz3 */ /* 2026-10-12 거래처 한 장 — 안내 문구(예측) 칸 · 국세청 휴·폐업 표 (js/998n) */ .ed-text{margin:0 0 10px;padding:12px 14px;border-radius:14px;background:var(--panel2,#F7F9FB);border:1px solid var(--line,#E4E8EE); font:inherit;font-size:14px;line-height:1.6;color:var(--ink,#121826);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere} .ed-text:focus-visible{outline:2px solid var(--accent-fill,#2B5DE8);outline-offset:2px} .ed-why,.ed-wait{margin:0;font-size:13px;color:var(--mute,#586377)} .ed-note{font-size:12.5px;color:var(--mute,#586377)} .ed-card .c3-acts{align-items:center;flex-wrap:wrap;gap:8px} .c3-st.nts-tag.bad{background:var(--bad-soft,rgba(240,68,82,.12));color:var(--bad-ink,#B42318)} .c3-st.nts-tag.warn{background:var(--warn-soft,rgba(245,158,11,.14));color:var(--warn-ink,#8A5300)} .c3-pc .nts-mini{display:inline-block;margin-top:2px;font-style:normal;font-size:11.5px;font-weight:650;color:var(--bad-ink,#B42318)} /* 2026-10-11 거래처 한 장 — 4대보험 인원(공단 상시인원 · 급여 인원) 칸 (js/998p) */ .pi-line{margin:0 0 6px;font-size:15px;line-height:1.5;color:var(--ink,#121826);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px} .pi-line b{font-weight:700} .pi-line small{font-size:12.5px;color:var(--mute,#586377)} .pi-line.mute{color:var(--mute,#586377)} .pi-line.warn b{color:var(--warn-ink,#8A5300)} .pi-d{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12.5px;font-weight:650;background:var(--warn-soft,rgba(245,158,11,.14));color:var(--warn-ink,#8A5300)} .pi-note{margin:0;font-size:12.5px;color:var(--mute,#586377)} /* 2026-10-11 마지막 검수: 1명 차이는 흐리게(주황 아님) */ .pi-d.sm{background:var(--panel2,rgba(0,0,0,.05));color:var(--mute);font-weight:600} /* 2026-10-11 메뉴 전체 점검(대표님 "텍스트 최대한 줄이고 한눈에") — docs/디자인_벤치마크_2026-10.md 카드 말투를 홈 한눈 카드와 맞춘다: 모서리 20 · 옅고 넓은 그림자(어둡게는 선만). AI 요약 띠(.br)·안쪽 카드는 그대로. */ :is(#view-c360,#view-files,#view-fax){--au-sh:0 1px 2px rgb(18 24 38/.04),0 8px 24px rgb(18 24 38/.06)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(#view-c360,#view-files,#view-fax){--au-sh:none} } :root[data-theme="dark"] :is(#view-c360,#view-files,#view-fax){--au-sh:none} :is(#view-c360,#view-files,#view-fax) .card:not(.card .card):not(.br){border-radius:var(--r-card);box-shadow:var(--au-sh)} /* '다 했어요' 빈 칸 — 할 일이 없을 때는 안심 한 줄 */ :is(#view-c360,#view-files,#view-fax) .au-done{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ok-ink)} :is(#view-c360,#view-files,#view-fax) .au-sub{display:block;margin-top:4px;font-size:13px;color:var(--mute);font-weight:400} /* 빠진 곳 서랍: 판정 기준은 접힘(목록이 먼저) — 서랍은 body 아래(#drw-b)라 화면 id 로 묶지 않는다 */ #drw-b .cv-why{margin:0 0 10px} #drw-b .cv-why>summary{cursor:pointer;min-height:32px;display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--mute)} #drw-b .cv-why[open]>summary{color:var(--ink2)} /* 2026-10-11 결함(나): 거래처 한 장 '세금 예측' 탭의 예정고지 한 줄(js 380) */ #view-c360 .c3-pre{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:12px 0 0;padding:10px 14px;border-radius:var(--r-inner);background:var(--panel2);font-size:14px;color:var(--ink2)} #view-c360 .c3-pre>b{font-weight:750;color:var(--ink)} #view-c360 .c3-pre span b{color:var(--ink);font-weight:750} #view-c360 .c3-pre small{color:var(--mute);font-size:12px} /* 재건축 4단계(C) 합친 시트 · 가결산 · 전체 111장 중 105번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 998i 182 */ .itx-c b{font-weight:750;color:var(--ink,#121826);font-variant-numeric:tabular-nums} .itx-c.on{border-color:var(--accent-fill,#2B5DE8);background:var(--panel,#fff);box-shadow:0 0 0 1px var(--accent-fill,#2B5DE8) inset} .itx-c:focus-visible,.itx-n:focus-visible{outline:2px solid var(--accent-fill,#2B5DE8);outline-offset:2px} .itx-l{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto;border-top:1px solid var(--line,#E4E8EE)} .itx-l li{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line,#E4E8EE);min-height:30px} .itx-n{flex:0 1 220px;min-width:0;text-align:left;font:inherit;font-size:14px;color:var(--ink,#121826);background:none;border:0;padding:2px 0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .itx-n:hover{color:var(--accent-ink,#1F4FD6);text-decoration:underline} .itx-k{flex:none;font-size:12px;font-weight:650;padding:2px 8px;border-radius:999px;background:var(--surface-3,#EDF0F4);color:var(--ink2,#465163)} .itx-k.k-0{background:var(--bad-soft,rgba(240,68,82,.12));color:var(--bad-ink,#B42318)} .itx-k.k-1{background:var(--accent-soft,#E8EEFD);color:var(--accent-ink,#1F4FD6)} .itx-o{flex:none;font-size:12.5px;color:var(--mute,#586377)} .itx-w{flex:1;min-width:0;font-size:12.5px;color:var(--mute,#586377);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .itx-u{font-style:normal;color:var(--warn-ink,#8A5300)} .itx-f{margin:8px 0 0;font-size:12px;color:var(--mute,#586377);word-break:keep-all} @media (max-width:560px){ .itx-box{padding:12px 14px;border-radius:20px} .itx-l li{flex-wrap:wrap;gap:4px 8px} .itx-n{flex:1 1 60%} .itx-w{flex-basis:100%;white-space:normal} } /* 2026-10-15 택스민 가결산(가결산 도우미 결과 · js/182) — 색 없이 회색 글씨만(대표님 10/12 색 절제: 색은 문제·주의에만) 목록: 덮은 칸 둘째 줄 '택스민 HH:MM · 상태'(다음 부가세 .an2-gzd · 연 소득세 .an2-d — 같은 회색) · 연 소득세 미리보기 '결산 전'(.an2-gzp — 흐리게) 거래처 한 장: '세금 예측'·'가결산 문서' 탭 위 한 줄(.c3-gz) */ #view-anal table.an-tbl.an-v2 .an2-gzp{color:var(--mute);font-weight:600} #view-c360 .c3-gz{margin:0 0 12px;padding:8px 12px;border-radius:var(--r-inner);background:var(--panel2);font-size:13px;line-height:1.55;color:var(--ink2);overflow-wrap:anywhere} #view-c360 .c3-gz>b{font-weight:750;color:var(--ink)} #view-c360 .c3-gz b.num{font-weight:750;color:var(--ink)} #view-c360 .c3-gz .c3-gz-st{margin-left:4px;color:var(--mute);font-size:12px;white-space:nowrap} /* 다음 부가세 칸의 '택스민 09:12 · 확인 필요' 줄은 .an2-d 가 아니라 .an2-gzd — 넓은 화면 한 줄 목록에서 .an2-d 는 옆에 붙어(inline) 칸 밖으로 잘렸다 → 늘 둘째 줄 */ #view-anal table.an-tbl.an-v2 .an2-gzd{display:block;margin-top:1px;font-size:12px;color:var(--mute);white-space:nowrap} #view-c360 .c3-gz.c3-itr{padding:6px 12px;font-size:12.5px} /* 재건축 4단계(C) 합친 시트 · 수임동의 · 전체 111장 중 106번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 999zzz3 */ /* '다 했어요' 빈 칸 — 할 일이 없을 때는 안심 한 줄 */ :is(#view-setup,#view-intake) .au-done{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ok-ink)} :is(#view-setup,#view-intake) .au-sub{display:block;margin-top:4px;font-size:13px;color:var(--mute);font-weight:400} /* 서식 인쇄: 안내 상자를 제목 줄 단추 하나로 */ #view-intake .wht-head .ik-gosetup{margin-left:auto} /* 신규 수임: 빈 목록 '다 했어요' */ #view-setup #stc-rows td.empty{padding:36px 12px;text-align:center} /* 재건축 4단계(C) 합친 시트 · CMS · 전체 111장 중 107번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 999zzz3 999zzz3b */ @media (max-width:640px){ /* ④-6 · 휴대폰: 목록 첫 줄을 첫 화면(844) 안에 — '한눈에' 그래프 카드는 목록 뒤로(접기·펼치기는 그대로), 목록 머리는 한 줄 */ #view-cmsmem:not(.hidden),#view-cmsreg:not(.hidden){display:flex;flex-direction:column} #view-cmsmem>*,#view-cmsreg>*{min-width:0} #view-cmsmem>#cv-mem,#view-cmsreg>#cv-reg{order:1;margin-top:12px} #view-cmsmem .cmm-lh{flex-wrap:nowrap;padding:8px 0;gap:8px} #view-cmsmem .cmm-lh>.cmm-sum{flex:none;white-space:nowrap} #view-cmsmem .cmm-lh>.cmm-meta{min-width:0;overflow:hidden} #view-cmsmem .cmm-lh>.cmm-pager{margin-left:auto;flex:none} #view-cmsmem .cmm-fl>label.cmm-q{flex-direction:row;align-items:center;gap:8px} } /* 2026-10-15 회원·등록 = 세 단계 칩(출금 등록 · 은행 등록 중 · 등록 완료 — core 290g) + 등록 완료 다음 일 [출금 결과 ›][정산 ›](옛 메뉴 'CMS 출금'·'CMS 정산') */ #view-cmsreg .cr-go{order:4;display:flex;align-items:center;gap:6px;flex:none} #view-cmsreg .cr-go .btn{font-weight:600} /* CMS 미수 (2026-10-16 밤 · js/999h · views/325) — 4대보험 고지(999zzz7b)와 같은 결: 카드 --r-card · 옅은 테두리 · 토큰만(밝게·어둡게) 색은 문제에만(대표님 10/12): 3개월 넘게 밀림·반영 전 = 주황 글자 · 나머지 무채색(밀린 달 칩도 회색). 640px 아래는 줄마다 카드. */ .arv{display:flex;flex-direction:column;gap:12px;min-width:0} .arv-fresh{margin:0;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums} .arv-fresh.warn{color:var(--warn-ink)} .arv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px} .arv-ctl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2)} .arv-ctl[hidden],.arv-mine[hidden]{display:none} .arv-mine{font-size:13px;font-weight:600;color:var(--ink2)} #view-cmsar select,#view-cmsar .arv-q{box-sizing:border-box;height:var(--ctl-h);padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-ctl); background:var(--panel);color:var(--ink);font:inherit;font-size:14px} #view-cmsar select{min-width:140px} #view-cmsar .arv-q{flex:1 1 200px;max-width:280px;min-width:0} #view-cmsar select:focus-visible,#view-cmsar .arv-q:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px} .arv-sum{margin:0;font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums} .arv-sum b{font-weight:700;color:var(--ink)} .arv-sum b.w{color:var(--warn-ink)} .arv-wrap{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1,none);overflow-x:auto} .arv-tb{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums} .arv-tb thead th{position:sticky;top:0;z-index:1;padding:10px 10px;background:var(--panel2);border-bottom:1px solid var(--line); font-size:12.5px;font-weight:600;color:var(--ink2);text-align:left;white-space:nowrap} .arv-tb th.r,.arv-tb td.r{text-align:right} .arv-tb tbody>tr>th,.arv-tb tbody>tr>td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink);text-align:left} .arv-tb tbody>tr.arv-r{cursor:pointer} .arv-tb tbody>tr.arv-r:hover>*{background:var(--panel2)} .arv-tb tbody>tr:last-child>*{border-bottom:0} .arv-nm{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;max-width:260px} .arv-nm:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px;border-radius:4px} .arv-nm b{font-weight:650;color:var(--ink);overflow-wrap:anywhere} .arv-nm .num{font-size:12px;color:var(--mute)} .arv-c{display:block;min-width:0} .arv-ms{display:inline-flex;flex-wrap:wrap;gap:4px} .arv-m{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border:1px solid var(--line2);border-radius:var(--r-chip,6px);font-size:12.5px;color:var(--ink);white-space:nowrap} .arv-m small{font-size:12px;color:var(--mute)} .arv-age{display:block;margin-top:3px;font-size:12px;color:var(--mute)} .arv-age.w{color:var(--warn-ink);font-weight:600} .arv-why{color:var(--ink)} .arv-aft{display:block;margin-top:3px;font-size:12px;color:var(--ink2)} .arv-tot{font-weight:700;white-space:nowrap} .arv-memo{max-width:240px} .arv-lt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px} .arv-lt b{font-weight:600;color:var(--ink2);margin-right:2px} .arv-lw{display:block;font-size:12px;color:var(--mute)} .arv-none{color:var(--mute)} .arv-act{text-align:right;white-space:nowrap} .arv-act .btn+.btn{margin-left:6px} .arv-e{padding:24px 10px;text-align:center;color:var(--mute)} .arv-done{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 14px} .arv-done>summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink2)} .arv-done>summary .num{margin-left:4px;color:var(--mute);font-weight:400} .arv-pl{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;font-variant-numeric:tabular-nums} .arv-pl li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;color:var(--ink)} .arv-pl small{font-size:12px;color:var(--mute)} .arv-pn{padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px} .arv-done .arv-none{margin:8px 0 0;font-size:13px} .arv-foot{margin:0;font-size:12px;color:var(--mute)} /* 받음·메모 창 */ .arv-dlg{max-width:min(96vw,480px)} .arv-dlg .dh h2{margin:0;font-size:16px} .arv-f{display:flex;flex-direction:column;gap:12px;padding-top:12px} .arv-fs{margin:0;padding:0;border:0;min-width:0} .arv-fs legend{padding:0;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--ink2)} .arv-it{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-variant-numeric:tabular-nums} .arv-it small{font-size:12px;color:var(--mute)} .arv-how{display:flex;flex-wrap:wrap;gap:6px} .arv-rd{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line2);border-radius:var(--r-ctl);font-size:13.5px;cursor:pointer} .arv-rd:has(input:checked){border-color:var(--ink2);font-weight:600} .arv-l{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink2)} .arv-l small{font-weight:400;color:var(--mute)} .arv-l input,.arv-l textarea{box-sizing:border-box;width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;font-weight:400} .arv-l input{height:var(--ctl-h)} .arv-msg{margin:0;min-height:0;font-size:12.5px;color:var(--warn-ink)} .arv-msg:empty{display:none} .arv-acts{display:flex;justify-content:flex-end;gap:8px} .arv-note{margin:0;font-size:12px;color:var(--mute)} .arv-hist{border-top:1px solid var(--line);padding-top:8px} .arv-hh{margin:0 0 4px;font-size:12.5px;font-weight:600;color:var(--ink2)} .arv-hist ul{margin:0;padding-left:16px;font-size:13px;color:var(--ink)} .arv-hist small{font-size:12px;color:var(--mute)} @media (max-width:1100px){ .arv-tb thead th:nth-child(6),.arv-tb tbody>tr.arv-r>td.arv-memo{display:none} } @media (max-width:900px){ /* 태블릿·휴대폰: 표 머리 숨기고 줄마다 카드(이름 한 줄 + 칸 이름:값) — 768 에서 표가 칸 밖으로 넘쳐 900 부터 */ #view-cmsar .arv-q{max-width:none;flex-basis:100%} .arv-tb thead{display:none} .arv-tb,.arv-tb tbody{display:block} .arv-tb tbody>tr.arv-r{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)} .arv-tb tbody>tr.arv-r>th,.arv-tb tbody>tr.arv-r>td{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:0;border:0;background:none;text-align:right} .arv-tb tbody>tr.arv-r>td[data-l]::before{content:attr(data-l);flex:none;font-size:12px;color:var(--mute);text-align:left} .arv-tb tbody>tr.arv-r>th{display:block;text-align:left} .arv-tb tbody>tr.arv-r>td.arv-memo{display:flex;max-width:none} .arv-tb tbody>tr.arv-r>td.arv-memo>*{min-width:0} .arv-tb tbody>tr.arv-r>td .arv-c{text-align:right} .arv-tb tbody>tr.arv-r>td.arv-act{justify-content:flex-end;margin-top:4px} .arv-tb tbody>tr.arv-r>td.arv-act:empty{display:none} .arv-lt{max-width:200px} .arv-ms{justify-content:flex-end} .arv-nm{max-width:none} .arv-e{display:block} .arv-tb tbody>tr:not(.arv-r)>td{display:block} } /* 2026-11-03 달별 미수(받음 체크·해제 — js/999h monOpen) · 정리 안 된 미수 서버 요약(stats/ar_recon — rcPaint) · 색은 문제에만 */ .arv-dlg.arv-mdlg{max-width:min(96vw,860px);width:860px} .arv-mb{display:flex;flex-direction:column;gap:10px;padding-top:10px;min-width:0} .arv-mh{margin:0;font-size:12.5px;color:var(--ink2)} .arv-mrc{margin:0;font-size:13px;color:var(--ink)} .arv-mrc b{color:var(--warn-ink);font-weight:650;margin-right:4px} .arv-mw{max-height:62vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-card)} .arv-mt{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums} .arv-mt thead th{position:sticky;top:0;z-index:1;padding:8px;background:var(--panel2);border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink2);text-align:left;white-space:nowrap} .arv-mt th.r,.arv-mt td.r{text-align:right} .arv-mt tbody th,.arv-mt tbody td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--ink)} .arv-mt tbody th{font-weight:600;white-space:nowrap} .arv-mt tbody th small{display:block;font-size:11.5px;font-weight:400;color:var(--mute)} .arv-mt tbody tr:last-child>*{border-bottom:0} .arv-mt td.arv-mres{min-width:160px;white-space:normal;overflow:visible;text-overflow:clip} .arv-mbad .arv-mres{color:var(--ink)} .arv-mbad>th{color:var(--warn-ink)} .arv-mres.g{color:var(--ink2)} .arv-mc{display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap} .arv-mc input{width:16px;height:16px} .arv-mo{font-size:12.5px;color:var(--mute);white-space:nowrap} .arv-mmemo{max-width:180px;overflow-wrap:anywhere;font-size:12.5px;color:var(--ink2)} .arv-med>td{background:var(--panel2)} .arv-mf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px} .arv-mf input[name=memo]{flex:1 1 180px;min-width:0;box-sizing:border-box;height:var(--ctl-h);padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px} .arv-rec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 14px} .arv-rec>summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink2)} .arv-rec>summary b{color:var(--ink)} .arv-rec>summary small{margin-left:6px;font-weight:400;color:var(--mute)} .arv-rec-o{margin:8px 0 0;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums} .arv-rec-o b{color:var(--ink)} .arv-rec-l{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;font-variant-numeric:tabular-nums} .arv-rec-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;color:var(--ink)} .arv-rec-l small{font-size:12px;color:var(--mute)} .arv-rec-c{flex-basis:100%;padding-left:2px} @media (max-width:640px){ .arv-mt thead{display:none} .arv-mt,.arv-mt tbody,.arv-mt tr{display:block} .arv-mt tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:9px 10px;border-bottom:1px solid var(--line)} .arv-mt tbody tr>*{padding:0;border:0;background:none!important;min-width:0} .arv-mt tbody th{grid-column:1} .arv-mt tbody td.r{grid-column:2;text-align:right} .arv-mt tbody td{grid-column:1/-1;overflow-wrap:anywhere} .arv-mt tbody td.arv-mres{min-width:0} .arv-mt tbody td:empty{display:none} .arv-mmemo{max-width:none} .arv-med{background:var(--panel2)} } /* 2026-11-03 대표님: 미수 달을 연도 묶음(2025년 · 2026년) 아래 월로만 — 한 해 한 줄 · 연도 글자는 회색 이름표 · 색은 그대로(문제 표시 아님) */ .arv-yg{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:center;gap:4px} .arv-y{min-width:44px;font-size:12px;font-weight:650;color:var(--ink2);font-variant-numeric:tabular-nums} .arv-mt tbody tr.arv-myr th{padding:6px 8px;background:var(--panel2);font-size:12px;font-weight:650;color:var(--ink2);border-bottom:1px solid var(--line)} /* 재건축 4단계(C) 합친 시트 · 출퇴근 · 전체 111장 중 108번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 4개: 999zzz3 999zzz4 999zzz5 999zzz6 */ /* '다 했어요' 빈 칸 — 할 일이 없을 때는 안심 한 줄 */ :is(#view-attend) .au-done{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ok-ink)} :is(#view-attend) .au-sub{display:block;margin-top:4px;font-size:13px;color:var(--mute);font-weight:400} /* 한눈에: 0 인 예외 칸은 빼고, 모두 0 이면 '예외 없음 ✓' 한 칸 */ #view-attend .udx-k.ok b{color:var(--ok-ink)} /* 2026-10-11 출퇴근 3차(js/999g) — 홈 한눈 카드와 같은 말투: 큰 카드 24px · 옅은 그림자(어둡게는 선) · 흐린 이름 + 굵은 숫자 · 예외만 색. 색은 토큰(999zzz1)만 읽는다. 상태 색: 근무 중 = 강조 · 퇴근 = 흐림 · 재택 = 청록 · 휴가 = 보라 · 미출근·지각 = 호박 · 누락 = 산호 */ #view-attend{--ab-sh:0 1px 2px rgb(18 24 38/.04),0 8px 24px rgb(18 24 38/.06);--ab-bd:transparent; --t-warn:var(--warn-fill);--t-bad:var(--dv-miss);--t-mute:var(--chart-rest)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #view-attend{--ab-sh:none;--ab-bd:var(--line);} } :root[data-theme="dark"] #view-attend{--ab-sh:none;--ab-bd:var(--line);} /* ── 위 카드 틀: 12칸 ── */ #view-attend .at-top>.card{border-radius:var(--r-card);box-shadow:var(--ab-sh);border:1px solid var(--ab-bd);min-width:0} #view-attend .at-top>.at-week{grid-column:span 4} #view-attend .at-top.has-board>.at-week{grid-column:span 7} @media (max-width:1100px){ #view-attend .at-top>.at-week, #view-attend .at-top.has-board>.at-week {grid-column:span 6} } @media (max-width:760px){ #view-attend .at-top>.card,#view-attend .at-top.has-board>.card{grid-column:1/-1!important} } /* ── ① 내 오늘 카드: 상태 한 문장 + 큰 단추 하나 ── */ #view-attend .at-now{display:flex;flex-direction:column;align-items:stretch;text-align:left} #view-attend .at-now .at-now-l{min-width:0;width:100%;text-align:left} #view-attend .at-now .at-times{justify-content:flex-start} #view-attend .at-now .at-loc{justify-content:flex-start} #view-attend .at-now .at-date{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:0} #view-attend .at-state{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px} #view-attend .at-state>b{font-size:22px;font-weight:750;letter-spacing:-.02em;line-height:1.3;color:var(--ink);word-break:keep-all} #view-attend .at-state>b.t-warn{color:var(--warn-ink)} #view-attend .at-state>b.t-bad{color:var(--bad-ink)} #view-attend .at-state>b.t-ok{color:var(--ok-ink)} #view-attend .at-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:650} #view-attend .at-chip.wfh{background:color-mix(in srgb,var(--t-wfh) 14%,transparent);color:var(--ink)} #view-attend .at-now .at-times{margin-top:6px;font-size:13px;gap:12px;color:var(--mute)} #view-attend .at-now .at-times b{font-size:13px;color:var(--ink2)} #view-attend .at-now .at-times .at-flag.lv,#view-attend .at-now .at-times .at-flag.wfh{display:none} /* 위 상태 문장이 이미 말한다 */ #view-attend .at-now .at-now-r{display:flex;gap:8px;width:100%} #view-attend .at-now .btn.at-big{flex:1;height:56px;border-radius:var(--r-inner);font-size:17px;font-weight:750;min-width:0} #view-attend .at-now[data-st="pre"] #at-out,#view-attend .at-now[data-st="in"] #at-in,#view-attend .at-now[data-st="over"] #at-in, #view-attend .at-now[data-st="done"] .at-now-r{display:none} /* 2026-10-11 디자인 점검 6: 이 화면의 주 단추는 '출근하기/퇴근하기' 하나(파란 채움) — 사무실 밖이어도 눌리고 누르면 이유를 말한다(위치 규칙은 그대로) */ #view-attend .at-now[data-st="pre"] #at-in,#view-attend .at-now:is([data-st="in"],[data-st="over"]) #at-out{background:var(--accent-fill);color:#fff;border-color:transparent;box-shadow:none} #view-attend .at-now .at-loc{border-top:0;padding-top:0;font-size:13px;color:var(--mute)} #view-attend .at-now .at-loc #at-wfh{display:none} /* 재택 지정은 아래 작은 단추·오늘 사무실 카드에 */ #view-attend .at-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start;border-top:1px solid var(--line);padding-top:12px;margin-top:auto} #view-attend .at-acts .btn{height:32px} /* ── ② 오늘 사무실 ── */ #view-attend .at-board{padding:20px 22px;} #view-attend .ab-h{display:flex;align-items:center;justify-content:space-between;gap:8px} #view-attend .ab-h h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em} #view-attend .ab-late{color:var(--warn-ink);font-size:12px} #view-attend .ab-miss{color:var(--bad-ink)} #view-attend .ab-none{color:var(--mute);font-size:13px} @media (max-width:760px){ #view-attend .at-board{padding:18px 16px} } /* ── 연차 카드: 다음 발생 · 촉진 ── */ #view-attend .udx-lvf{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:10px;font-size:12.5px;color:var(--mute)} #view-attend .udx-lvf b{color:var(--ink)} #view-attend .udx-promo{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:650} #view-attend .udx-promo.warn{background:var(--warn-soft);color:var(--warn-ink)} #view-attend .udx-promo.bad{background:var(--bad-soft);color:var(--bad-ink)} #view-attend .udx-lvs{display:flex;flex-direction:column;gap:14px;margin-bottom:12px} #view-attend .udx-lvs-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;font-size:14px} #view-attend .udx-lvs-h .num b{font-size:18px} #view-attend .udx-lvs-h small{color:var(--mute)} #view-attend .udx-lvs .udx-sbar{width:100%!important} #view-attend .udx-lvs .udx-lvf{margin-top:6px} /* ── 탭 숫자 · 표 도구 ── */ #view-attend #at-tabs .at-tb{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:var(--r-pill);background:var(--warn-fill);color:#1d1300;font-size:11px;font-weight:750} #view-attend .at-ex{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r-pill);font-size:13px;cursor:pointer;background:var(--panel)} #view-attend .at-ex:has(input:checked){background:var(--warn-soft);border-color:var(--warn-fill);color:var(--warn-ink);font-weight:650} #view-attend .at-ex{width:auto;flex:0 0 auto} #view-attend .at-ex input{margin:0;accent-color:var(--warn-fill);width:16px;height:16px;min-width:0;flex:0 0 16px;padding:0;appearance:auto;-webkit-appearance:checkbox} #view-attend #at-rows .at-fixb{height:26px;padding:0 10px;margin-left:6px;font-size:12px} #view-attend #at-rows .at-flag.wait{background:var(--warn-soft);color:var(--warn-ink)} /* ── ③ 달력 ── */ #view-attend .ac-nav{display:inline-flex;align-items:center;gap:8px;margin-left:auto} #view-attend .ac-nav b{min-width:92px;text-align:center;font-size:15px} #view-attend .ac-leg{display:flex;flex-wrap:wrap;gap:6px 14px;padding:4px 18px 10px;font-size:12px;color:var(--mute)} #view-attend .ac-leg span{display:inline-flex;align-items:center;gap:6px} #view-attend .ac-leg i{width:10px;height:10px;border-radius:3px} #view-attend .ac-leg i.lv,#view-attend .ac-e.lv{background:color-mix(in srgb,var(--t-lv) 16%,transparent)} #view-attend .ac-leg i.lv{background:var(--t-lv)} #view-attend .ac-leg i.pend{border:1.5px dashed var(--t-warn)} #view-attend .ac-leg i.wfh{background:var(--t-wfh)} #view-attend .ac-leg i.hol{background:var(--t-bad)} #view-attend .ac-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:0 18px 14px} #view-attend .ac-wd{font-size:12px;font-weight:650;color:var(--mute);text-align:center;padding:4px 0} #view-attend .ac-wd.off{color:var(--faint)} #view-attend .ac-c{min-height:92px;border-radius:var(--r-inner);background:var(--panel2);padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0} #view-attend .ac-c.blank{background:none} #view-attend .ac-c.off{background:transparent;border:1px dashed var(--line)} #view-attend .ac-c.past{opacity:.72} #view-attend .ac-c.now{box-shadow:inset 0 0 0 2px var(--accent-fill);opacity:1} #view-attend .ac-n{font-size:12px;font-weight:700;color:var(--ink2)} #view-attend .ac-c.now .ac-n{color:var(--accent-ink)} #view-attend .ac-ev{display:flex;flex-direction:column;gap:3px;min-width:0} #view-attend .ac-e{display:block;font-style:normal;font-size:11.5px;line-height:1.35;padding:2px 6px;border-radius:6px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-attend .ac-e.lv{background:color-mix(in srgb,var(--t-lv) 16%,transparent)} #view-attend .ac-e.pend{background:transparent;border:1px dashed var(--t-warn);color:var(--warn-ink)} #view-attend .ac-e.wfh{background:color-mix(in srgb,var(--t-wfh) 16%,transparent)} #view-attend .ac-e.hol{background:var(--bad-soft);color:var(--bad-ink)} #view-attend .ac-e.more{color:var(--mute);padding-left:6px} #view-attend .ac-list{padding:0 18px 18px} #view-attend .ac-list h4{margin:4px 0 8px;font-size:14px} #view-attend .ac-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} #view-attend .ac-list li{display:flex;gap:12px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-inner);background:var(--panel2)} #view-attend .ac-list li.past{opacity:.7} #view-attend .ac-list li.now{box-shadow:inset 0 0 0 2px var(--accent-fill)} #view-attend .ac-ld{flex:0 0 58px;font-weight:700;font-size:13px} #view-attend .ac-ld small{color:var(--mute);font-weight:500} #view-attend .ac-lv{display:flex;flex-wrap:wrap;gap:4px;min-width:0} #view-attend .ac-lv .ac-e{white-space:normal} #view-attend .ac-none{margin:0;color:var(--mute);font-size:13px} @media (max-width:600px){ #view-attend .ac-grid{gap:3px;padding:0 10px 12px} #view-attend .ac-c{min-height:48px;padding:4px;border-radius:10px;gap:3px} #view-attend .ac-ev{flex-direction:row;flex-wrap:wrap;gap:3px} #view-attend .ac-c .ac-e{width:8px;height:8px;padding:0;border-radius:var(--r-pill);font-size:0;line-height:0} #view-attend .ac-c .ac-e.lv{background:var(--t-lv)} #view-attend .ac-c .ac-e.wfh{background:var(--t-wfh)} #view-attend .ac-c .ac-e.hol{background:var(--t-bad)} #view-attend .ac-c .ac-e.more{display:none} #view-attend .ac-list{padding:0 12px 14px} #view-attend .ac-leg{padding:4px 12px 10px} #view-attend #at-panel-cal .hg-head{flex-wrap:wrap} } /* ── 정정·재택 신청 창 ── */ #dlg-attreq .hidden{display:none!important} #dlg-attreq{max-width:520px} @media (max-width:767px){ /* 휴대폰: 휴가 신청·승인 표도 카드로(table.card-sm) — 위 '출퇴근·재택 요청' 카드와 같은 안쪽 여백 */ #view-attend #at-panel-appr>.tblwrap,#view-attend #at-panel-leave>.tblwrap{margin:0 20px 12px!important;width:auto!important;max-width:none!important;overflow:visible} #view-attend #at-panel-appr>.tblwrap>table,#view-attend #at-panel-leave>.tblwrap>table{width:100%!important;min-width:0!important} } /* 2026-10-11 직원용 오늘 사무실(api attend.board — 이름·상태만, 눌러도 안 간다) */ @media (max-width:900px){ /* 2026-10-11 디자인 점검 4: 휴대폰 — '오늘 카드'(출근하기)를 맨 위, AI 요약(월 그래프)은 그 아래, 나머지 카드·탭은 그 뒤. DOM 순서는 그대로(요약 칸은 제목 줄 뒤에 붙는다) — 보이는 순서만 바꾼다. 탭 줄은 넘치지 않게 줄바꿈 */ #view-attend:not(.hidden){flex-direction:column} #view-attend>.wht-head{order:0} #view-attend>.at-top>.at-now{margin-bottom:12px} #view-attend>.br{order:2} #view-attend>.at-top>.at-board{margin-bottom:12px} #view-attend>.at-top>.at-week {order:4;margin-bottom:12px} #view-attend .at-tabs2{row-gap:2px} #view-attend .at-tabs2>button{flex:1 1 auto} } /* 2026-10-11 디자인 점검 18: 퇴근·미출근 아바타(회색 바탕 흰 글자 2.1:1) → 옅은 회색 바탕 + 진한 글자 */ /* 2026-10-11 출퇴근 시프티형 정리(js/999h · views/190·240) — 대표 "출퇴근 UI 너무 난잡함" 탭 한 줄 · 홈 = 내 오늘 + 오늘 사무실(칩 한 줄) + 확인할 것 한 줄 · 신청은 바닥 시트 · 색은 토큰만. 예전 층(999zzz4)의 휴대폰 순서 규칙은 여기서 되돌린다. */ #view-attend{--t-ot:#C2410C} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #view-attend{--t-ot:#F59E6B} } :root[data-theme="dark"] #view-attend{--t-ot:#F59E6B} /* ── 머리 · 탭 한 줄 ── */ #view-attend>.at-head{margin-bottom:10px} #view-attend .at-tabs4{display:flex;flex-wrap:nowrap;width:100%;max-width:560px;margin:0 0 16px;overflow:visible} #view-attend .at-tabs4>button{flex:1 1 0;min-width:0;white-space:nowrap;padding-left:4px;padding-right:4px;overflow:hidden} @media (max-width:420px){ #view-attend .at-tabs4>button{font-size:13.5px;letter-spacing:-.02em} #view-attend .at-tl-a{display:none} #view-attend #at-tabs .at-tb{min-width:16px;height:16px;padding:0 4px;margin-left:2px;font-size:10.5px} } /* ── 홈: 한 줄로 쌓는다(PC 는 내 오늘 | 오늘 사무실 두 칸) ── */ #view-attend .at-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start} #view-attend .at-top>.card{grid-column:auto;margin:0} #view-attend .at-top>.at-now,#view-attend .at-top.has-board>.at-now{grid-column:1} #view-attend .at-top>.at-board,#view-attend .at-top.has-board>.at-board{grid-column:2;padding:18px 20px} #view-attend .at-top>.at-todo{grid-column:1/-1} #view-attend .at-top:not(.has-board)>.at-now{grid-column:1/-1;max-width:560px} #view-attend .at-top.hidden{display:none} @media (max-width:900px){ #view-attend:not(.hidden){display:block} #view-attend>*{order:0} #view-attend>.at-top{display:flex!important;flex-direction:column;align-items:stretch;gap:12px} #view-attend>.at-top>.card,#view-attend>.at-top>.at-todo{margin:0} #view-attend>.at-top>.at-now{order:0} #view-attend>.at-top>.at-board{order:1} #view-attend>.at-top>.at-todo{order:2} #view-attend>.at-top.hidden{display:none!important} #view-attend .at-tabs2{flex-wrap:nowrap;border-radius:var(--r-ctl)} /* 2026-11-06 /unslop: 알약 틀 → 1440 과 같은 바깥 반경(안쪽 단추 = 바깥 − 여백 3) */ #view-attend .at-top:not(.has-board)>.at-now{max-width:none} } /* 내 오늘: 날짜 · 상태 한 줄 · 큰 단추 하나 · 위치 한 줄 · (누락 안내) · 이번 주 한 줄 + [신청] */ #view-attend .at-now{gap:8px;padding:20px 22px} #view-attend .at-now .at-times{display:none} /* 상태 문장이 출근 시각·지금 몇 시간째를 이미 말한다 */ #view-attend .at-chip.trip{background:color-mix(in srgb,var(--t-trip) 16%,transparent);color:var(--ink)} #view-attend .at-chip:not(.wfh):not(.trip){background:var(--surface-3);color:var(--ink2)} #view-attend .at-alert{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 8px 14px;border-radius:var(--r-inner);background:var(--bad-soft);color:var(--bad-ink);font-size:13.5px;font-weight:650} #view-attend .at-alert.hidden{display:none} #view-attend .at-alert .btn{flex:none} #view-attend .at-foot2{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px;margin-top:2px;min-height:44px} #view-attend .at-wk{flex:1 1 auto;min-width:0;font-size:13px;color:var(--mute)} #view-attend .at-wk b{color:var(--ink);font-size:14px} #view-attend .at-wk.warn{color:var(--warn-ink)} #view-attend .at-wk.bad{color:var(--bad-ink);font-weight:650} #view-attend .at-foot2 .at-acts{border:0;padding:0;margin:0 0 0 auto;flex:none} #view-attend .btn.at-req{height:38px;min-width:84px;padding:0 18px;border-radius:var(--r-ctl);font-weight:700;background:var(--panel);border:1.5px solid var(--accent-fill);color:var(--accent-ink)} #view-attend .btn.at-req:hover{background:var(--accent-soft)} /* 오늘 사무실: 이름·상태 칩 한 줄 */ #view-attend .at-board{display:flex;flex-direction:column;gap:10px} #view-attend .ab-t{margin:0;font-size:15px;font-weight:700} #view-attend .ab-chips{display:flex;flex-wrap:wrap;gap:6px} #view-attend .ab-c{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--panel2);border:1px solid var(--line); font:inherit;font-size:13.5px;color:var(--ink2);cursor:pointer;white-space:nowrap;max-width:100%} #view-attend span.ab-c,#view-attend .ab-c:disabled{cursor:default} #view-attend button.ab-c:hover:not(:disabled){background:var(--surface-3)} #view-attend .ab-c:focus-visible{outline:2px solid var(--sel-line);outline-offset:2px} #view-attend .ab-c b{color:var(--ink);font-weight:700} #view-attend .ab-c>i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--t-mute);flex:none} #view-attend .ab-c em{font-style:normal;font-size:12px;font-weight:700} #view-attend .ab-c.t-in>i{background:var(--t-in)} #view-attend .ab-c.t-wfh>i{background:var(--t-wfh)} #view-attend .ab-c.t-lv>i{background:var(--t-lv)} #view-attend .ab-c.t-trip>i{background:var(--t-trip)} #view-attend .ab-c.t-warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--t-warn) 45%,transparent);color:var(--warn-ink)} #view-attend .ab-c.t-warn>i{background:var(--t-warn)} #view-attend .ab-c.t-bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--t-bad) 45%,transparent);color:var(--bad-ink)} #view-attend .ab-c.t-bad>i{background:var(--t-bad)} #view-attend .ab-c.me{border-color:var(--line2)} #view-attend .ab-c .ab-late{color:var(--warn-ink)} /* 세무사 '확인할 것' 한 줄 */ #view-attend .at-todo{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #view-attend .at-todo.hidden{display:none} #view-attend .at-td-k{font-size:13px;color:var(--mute);margin-right:2px} #view-attend .at-td{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--panel);font:inherit;font-size:13.5px;font-weight:650;color:var(--ink);cursor:pointer} #view-attend .at-td.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn-ink)} #view-attend .at-td.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad-ink)} #view-attend .at-td::after{content:"›";margin-left:2px} /* 2026-10-11 '확인할 것 없음'은 누를 것이 아니라 글자 — 단추 모양(알약·배경)을 빼고 글자만 */ #view-attend .at-td-none{font-size:13.5px;font-weight:600;color:var(--ok-ink)} #view-attend .at-td:focus-visible{outline:2px solid var(--sel-line);outline-offset:2px} /* ── 휴가·신청 ── */ #view-attend #at-panel-leave{padding:18px 20px} #view-attend .lv-me{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px} #view-attend .lv-me-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;min-width:0} #view-attend .lv-me-l .k{font-size:13px;color:var(--mute);font-weight:600} #view-attend .lv-me-l>b{font-size:26px;font-weight:800;letter-spacing:-.02em} #view-attend .lv-me-l .u{font-size:14px;color:var(--ink2)} #view-attend .lv-me-s{font-size:12.5px;color:var(--mute)} #view-attend .lv-sec{padding:12px 0 4px} #view-attend .lv-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px} #view-attend .lv-none{margin:0 0 6px;font-size:13px;color:var(--mute)} #view-attend details.lv-done>summary{cursor:pointer;list-style:none} #view-attend details.lv-done>summary::-webkit-details-marker{display:none} #view-attend details.lv-done>summary h3::after{content:"▾";font-size:12px;color:var(--mute)} #view-attend .rq-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} #view-attend .rq{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"m a" "r a";gap:2px 12px;align-items:center;padding:10px 12px;border-radius:var(--r-inner);background:var(--panel2)} #view-attend .rq-m{grid-area:m;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0} #view-attend .rq-n{font-size:14px} #view-attend .rq-k{font-size:13px;font-weight:700;} #view-attend .rq-t{font-size:13.5px;color:var(--ink)} #view-attend .rq-x{font-size:12px;color:var(--mute)} #view-attend .rq-r{grid-area:r;display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;color:var(--mute);min-width:0} #view-attend .rq-r:empty{display:none} #view-attend .rq-no{color:var(--bad-ink)} #view-attend .rq-a{grid-area:a;display:flex;align-items:center;gap:6px;justify-content:flex-end} #view-attend .btn.primary-o{border:1.5px solid var(--accent-fill);color:var(--accent-ink);background:var(--panel);font-weight:700} #view-attend .btn.primary-o:hover{background:var(--accent-soft)} #view-attend .lv-staff{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} #view-attend .lv-staff li{display:grid;grid-template-columns:72px 92px minmax(60px,1fr) auto;gap:10px;align-items:center;padding:6px 2px;font-size:13.5px} #view-attend .lv-staff li span.num b{font-size:16px} #view-attend .lv-bar{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden} #view-attend .lv-bar i{display:block;height:100%;background:var(--accent-fill);border-radius:var(--r-pill)} #view-attend .lv-st{display:flex;align-items:center;gap:8px;justify-content:flex-end;white-space:nowrap} #view-attend .lv-st small{color:var(--mute);font-size:12px} @media (max-width:600px){ #view-attend #at-panel-leave{padding:14px} #view-attend .rq{grid-template-columns:minmax(0,1fr);grid-template-areas:"m" "r" "a"} #view-attend .rq-a{justify-content:flex-start;margin-top:4px} #view-attend .lv-staff li{grid-template-columns:60px 80px minmax(40px,1fr);row-gap:2px} #view-attend .lv-staff .lv-st{grid-column:1/-1;justify-content:flex-start} } /* 접는 칸(휴가 발생 내역) */ #view-attend details.at-fold>summary{display:flex;align-items:center;gap:8px;padding:16px 18px;cursor:pointer;list-style:none} #view-attend details.at-fold>summary::-webkit-details-marker{display:none} #view-attend details.at-fold>summary h3{margin:0;font-size:15px} #view-attend details.at-fold>summary::after{content:"▾";margin-left:auto;color:var(--mute);font-size:13px;transition:transform .15s} #view-attend details.at-fold[open]>summary::after{transform:rotate(180deg)} #view-attend details.at-fold:not([open]){padding-bottom:0} /* ── 리포트 ── */ #view-attend .atr-tools{display:inline-flex;align-items:center;gap:6px;margin-left:auto} #view-attend .atr-tools input[type=month]{height:32px} #view-attend .atr-of{color:var(--mute);font-size:12px} @media (max-width:767px){ #view-attend #at-panel-report>.tblwrap{margin:0 14px 12px;width:auto;max-width:none;overflow:visible} #view-attend #atr-tbl{width:100%;min-width:0} #view-attend #at-panel-report .hg-head{flex-wrap:wrap} #view-attend .atr-tools{margin-left:0;width:100%} /* 월 요약 카드: 두 칸으로(한 사람 = 짧은 카드 하나) */ #view-attend #atr-tbl tbody>tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px} #view-attend #atr-tbl tbody>tr>td.atr-nm{grid-column:1/-1} #view-attend #atr-tbl tbody>tr>td.empty{grid-column:1/-1} #view-attend #atr-tbl tbody>tr>td{white-space:nowrap;font-size:13.5px} /* 확인 대기 표시가 있으면 근무일 칸을 한 줄 전체로(옆 칸과 겹치지 않게) */ #view-attend #atr-tbl tbody>tr>td:has(.atr-pend){grid-column:1/-1} #view-attend #atr-tbl .atr-pend{display:inline-block;margin:0 0 0 8px} } #view-attend .w52{padding:6px 18px 18px} #view-attend .w52:empty{display:none} #view-attend .w52-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:8px 0 10px} #view-attend .w52-h h3{margin:0;font-size:15px} #view-attend .w52-d{font-size:12.5px;color:var(--mute);font-weight:500;margin-left:4px} #view-attend .w52-n{font-size:12px;color:var(--mute)} #view-attend .w52-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} #view-attend .w52-l li{display:grid;grid-template-columns:72px minmax(80px,1fr) 92px 120px;gap:10px;align-items:center;font-size:13.5px} #view-attend .w52-bar{position:relative;height:10px;border-radius:var(--r-pill);background:var(--surface-3)} #view-attend .w52-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);background:var(--accent-fill)} #view-attend .w52-bar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink2);border-radius:1px} #view-attend .w52-l li.warn .w52-bar i{background:var(--warn-fill)} #view-attend .w52-l li.bad .w52-bar i{background:var(--bad-fill)} #view-attend .w52-s{font-size:12.5px;color:var(--mute)} #view-attend .w52-l li.warn .w52-s{color:var(--warn-ink);font-weight:650} #view-attend .w52-l li.bad .w52-s{color:var(--bad-ink);font-weight:700} @media (max-width:600px){ #view-attend .w52{padding:6px 14px 14px} #view-attend .w52-l li{grid-template-columns:56px minmax(40px,1fr) auto;row-gap:2px} #view-attend .w52-s{grid-column:1/-1} } #view-attend .at-flag.trip{background:color-mix(in srgb,var(--t-trip) 16%,transparent);color:var(--ink)} #view-attend .at-flag.ot{background:color-mix(in srgb,var(--t-ot) 14%,transparent);color:var(--ink)} #view-attend .at-flag.chk{background:var(--surface-3);color:var(--ink2)} #view-attend .at-flag.pend{background:var(--warn-soft);color:var(--warn-ink)} #view-attend .at-flag:is(.trip,.ot,.chk,.pend){margin-right:6px} /* 2026-10-11 GPS 확인 대기 · 데스크 시작일 안내 · 일정 › 데스크 시작일 */ #view-attend .atr-pend{display:block;margin:2px 0 0;font-size:12px;white-space:nowrap} #view-attend .atr-since{margin:8px 16px 0;font-size:12.5px;color:var(--mute)} #view-attend .as-since{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #view-attend #at-log-scope{display:none} /* ── 일정: 달력 범례 · 근무 일정 ── */ #view-attend .ac-leg i.trip,#view-attend .ac-e.trip{background:color-mix(in srgb,var(--t-trip) 18%,transparent)} #view-attend .ac-leg i.trip{background:var(--t-trip)} #view-attend .ac-leg i.ot,#view-attend .ac-e.ot{background:color-mix(in srgb,var(--t-ot) 16%,transparent)} #view-attend .ac-leg i.ot{background:var(--t-ot)} #view-attend .ac-e.sch{background:var(--surface-3);color:var(--ink2)} @media (max-width:600px){ #view-attend .ac-c .ac-e.trip{background:var(--t-trip)} #view-attend .ac-c .ac-e.ot{background:var(--t-ot)} #view-attend .ac-c .ac-e.sch{background:var(--ink2)} } #view-attend #at-panel-sched{margin-top:16px} @media (min-width:601px){ #view-attend #at-panel-cal .ac-list{display:none} } /* PC 는 달력 칸에 이미 글자가 있다 — 아래 목록은 휴대폰만 */ #view-attend details.as-edit>summary{list-style:none;display:inline-block;cursor:pointer;margin-bottom:10px} #view-attend details.as-edit>summary::-webkit-details-marker{display:none} #view-attend details.as-edit[open]>summary .btn{background:var(--accent-soft);color:var(--accent-ink)} #view-attend .as-sum{margin-left:auto;font-size:12.5px;color:var(--mute)} #view-attend #as-body{padding:0 18px 18px} #view-attend .as-me p{margin:0 0 8px;font-size:14px} #view-attend .as-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px} #view-attend .as-grid section{min-width:0} #view-attend .as-grid h4{margin:0 0 8px;font-size:13.5px;color:var(--ink2)} #view-attend .as-in{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin-top:6px} #view-attend .as-in input{width:72px} #view-attend .as-dow{display:flex;flex-direction:column;gap:6px} #view-attend .as-d{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #view-attend .as-d b{width:20px} #view-attend .as-d input[type=time],#view-attend .as-add input[type=time]{width:108px} #view-attend .as-hint{color:var(--mute);font-size:12px} #view-attend .as-days{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px} #view-attend .as-days li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:13px;padding:6px 10px;border-radius:var(--r-inner);background:var(--panel2)} #view-attend .as-days li small{color:var(--mute)} #view-attend .as-days li .btn{margin-left:auto} #view-attend .as-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px} #view-attend .as-add select,#view-attend .as-add input:not([type=checkbox]){height:32px} #view-attend .as-add input[maxlength]{flex:1 1 140px;min-width:0} #view-attend .as-foot{display:flex;justify-content:flex-end;margin-top:12px} #view-attend #as-body .cb{display:inline-flex;align-items:center;gap:6px;font-size:13px} @media (max-width:760px){ #view-attend .as-grid{grid-template-columns:minmax(0,1fr)} #view-attend #as-body{padding:0 14px 14px} } /* ── 바닥 시트(신청) · 정정·재택 창도 휴대폰에선 아래에서 ── */ #dlg-atsheet{max-width:560px} #dlg-atsheet .ats-types{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px} #dlg-atsheet .ats-types button{height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer} #dlg-atsheet .ats-types button.on{background:var(--accent-soft);border-color:var(--accent-fill);color:var(--accent-ink);font-weight:750} #dlg-atsheet .ats-types button:focus-visible{outline:2px solid var(--sel-line);outline-offset:2px} #dlg-atsheet .req{color:var(--bad-ink)} #dlg-atsheet .ats-info b.warn,#dlg-atsheet .ats-info .warn{color:var(--warn-ink)} #dlg-atsheet .ats-info b.bad,#dlg-atsheet .ats-info .bad{color:var(--bad-ink);font-weight:700} #dlg-atsheet .ats-info:empty{display:none} @media (max-width:600px){ #dlg-atsheet,#dlg-attreq{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88vh;border-radius:18px 18px 0 0;border-bottom:0} #dlg-atsheet .db,#dlg-attreq .db{max-height:calc(88vh - 130px);overflow:auto} #dlg-atsheet .ats-types{gap:6px 5px} #dlg-atsheet .ats-types button{height:34px;padding:0 12px;font-size:13.5px} #dlg-atsheet .df .btn,#dlg-attreq .df .btn{flex:1;height:44px} } /* 세무사 출퇴근 홈 = 직원 현황 표(js/999h3b · views/190 #at-staff) — 2026-10-13 대표 "직원 목록과 현황 · 너무 난잡하게 하지 마"(이력 4-133). ① 처리할 일 한 줄(있을 때만 · 누르면 펼침) ② 직원 현황 표 하나 ③ 행을 누르면 상세(PC 표 아래 · 휴대폰 누른 행 바로 아래 = css order). 색은 문제에만 글자색(.w 주의 = 지각·조퇴·미출근·52시간 주의·확인할 일 / .b 위험 = 결근·퇴근 누락·52시간 넘음). 바탕 칠·칩·색 막대 없음 — 52시간만 얇은 회색 막대. 토큰만(core/css/999zzz1) · 글자 12px 이상 · 휴대폰(≤760px)은 행이 칸 이름을 단 세로 카드. 옛 카드형 css = .bak_table */ #view-attend .at-top>.at-staff{grid-column:1/-1;min-width:0} #view-attend .at-staff{display:flex;flex-direction:column;gap:12px} #view-attend .at-staff.hidden{display:none} @media (max-width:900px){ #view-attend>.at-top>.at-staff{order:3} } #view-attend .at-staff .w{color:var(--warn-ink)} #view-attend .at-staff .b{color:var(--bad-ink)} /* 세무사 홈: 오늘 사무실 칩 카드는 숨김(표 '오늘' 열과 같은 판정) · 내 출근 카드는 한 줄로 */ #view-attend .at-top.sm-mgr>.at-board{display:none} #view-attend .at-top.sm-mgr>.at-now{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px} #view-attend .at-top.sm-mgr>.at-now .at-now-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;width:auto;flex:0 1 auto} #view-attend .at-top.sm-mgr>.at-now .at-state{margin:0} #view-attend .at-top.sm-mgr>.at-now .at-state>b{font-size:15px} #view-attend .at-top.sm-mgr>.at-now .at-times{margin:0} #view-attend .at-top.sm-mgr>.at-now .at-loc{order:2;flex:1 1 160px;min-width:0;font-size:12.5px} #view-attend .at-top.sm-mgr>.at-now .at-foot2{order:3;border:0;padding:0;margin:0;min-height:0;gap:12px;flex:0 1 auto} #view-attend .at-top.sm-mgr>.at-now .at-wk{font-size:12.5px} #view-attend .at-top.sm-mgr>.at-now .btn.at-req{height:36px;min-width:0;padding:0 14px} #view-attend .at-top.sm-mgr>.at-now .at-now-r{order:4;width:auto;flex:none} #view-attend .at-top.sm-mgr>.at-now .btn.at-big{flex:none;height:36px;padding:0 18px;font-size:14px;font-weight:700} #view-attend .at-top.sm-mgr>.at-now .at-alert{order:9;flex-basis:100%} /* ① 처리할 일 한 줄 */ #view-attend .sm-todo{border:1px solid var(--ab-bd,var(--line));border-radius:var(--r-card);background:var(--panel);box-shadow:var(--ab-sh)} #view-attend .sm-tbar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;width:100%;min-height:48px;padding:10px 16px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:var(--r-card)} #view-attend .sm-tbar:hover{background:var(--panel2)} #view-attend .sm-tbar:focus-visible{outline:2px solid var(--sel-line);outline-offset:-2px} #view-attend .sm-tbar>b{font-size:14.5px;font-weight:700} #view-attend .sm-tbar>b .num{color:var(--warn-ink)} #view-attend .sm-tsum{font-size:13px;color:var(--mute)} #view-attend .sm-tgo{margin-left:auto;font-size:12.5px;font-weight:650;color:var(--accent-ink)} #view-attend .sm-todo>.rq-list{padding:0 12px 12px;margin:0} #view-attend .sm-todo .sm-all{margin:0 12px 12px} #view-attend .rq-k{color:var(--ink2)} /* 신청 종류는 글자로 구분 — 색 없음 · 위치 확인(pd)·퇴근 누락(ms)만 색 */ #view-attend .rq.pd .rq-k{color:var(--warn-ink)} #view-attend .rq.ms .rq-k{color:var(--bad-ink)} /* ② 직원 현황 표 */ #view-attend .sm-box{margin:0;padding:16px 0 4px;border-radius:var(--r-card);box-shadow:var(--ab-sh);border:1px solid var(--ab-bd,var(--line));min-width:0} #view-attend .sm-hh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:0 20px 10px} #view-attend .sm-hh h3{margin:0;font-size:16px;font-weight:700} #view-attend .sm-hh small{font-size:12px;color:var(--mute)} #view-attend .sm-tb{display:flex;flex-direction:column;min-width:0} #view-attend .sm-r{display:grid;grid-template-columns:minmax(64px,.8fr) minmax(140px,1.5fr) minmax(170px,1.6fr) repeat(4,minmax(48px,.55fr)) minmax(96px,1fr) minmax(64px,.65fr) 16px; gap:4px 12px;align-items:center;padding:12px 20px;border-top:1px solid var(--line);order:0;min-width:0} #view-attend .sm-r.sm-head{padding-top:8px;padding-bottom:8px;font-size:12px;font-weight:600;color:var(--mute)} #view-attend .sm-r[data-sm-row]{cursor:pointer;font-size:13.5px;color:var(--ink2)} #view-attend .sm-r[data-sm-row]:hover,#view-attend .sm-r.on{background:var(--panel2)} #view-attend .sm-r[data-sm-row]:focus-visible{outline:2px solid var(--sel-line);outline-offset:-2px} #view-attend .sm-c{min-width:0} #view-attend .sm-c.c-n,#view-attend .sm-c.c-q{text-align:center} #view-attend .sm-c.c-x{color:var(--mute);text-align:right;font-size:12px} #view-attend .c-nm b{font-size:14.5px;font-weight:700;color:var(--ink)} #view-attend .c-td small{font-size:12px;color:var(--mute)} #view-attend .sm-tt{font-weight:650;color:var(--ink)} #view-attend .sm-wt{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px} #view-attend .sm-wt b{font-size:14px;font-weight:700;color:var(--ink)} #view-attend .sm-wt b.w{color:var(--warn-ink)} #view-attend .sm-wt b.b{color:var(--bad-ink)} #view-attend .sm-wt small{font-size:12px;color:var(--mute)} #view-attend .sm-wt small.w{color:var(--warn-ink);font-weight:650} #view-attend .sm-wt small.b{color:var(--bad-ink);font-weight:650} #view-attend .sm-wb{display:block;height:3px;margin-top:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;max-width:180px} #view-attend .sm-wb i{display:block;height:100%;background:color-mix(in srgb,var(--ink) 35%,transparent)} #view-attend .sm-v b{font-size:14px;font-weight:700} #view-attend .sm-v small{font-size:12px;margin-left:1px} #view-attend .sm-z{color:var(--mute)} #view-attend .c-lv b{font-size:14px;font-weight:700;color:var(--ink)} #view-attend .c-lv small{font-size:12px;color:var(--mute)} #view-attend .c-lv small.w{color:var(--warn-ink);font-weight:650} #view-attend .sm-none{margin:0;padding:14px 20px;font-size:13.5px;color:var(--mute)} /* ③ 상세 — PC 표 아래(order 999) · 휴대폰 누른 행 바로 아래 */ #view-attend .sm-det{order:999;padding:16px 20px 16px;border-top:2px solid var(--sel-line);min-width:0} #view-attend .sm-dh{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:10px} #view-attend .sm-dh h3{margin:0;font-size:16px;font-weight:700;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px} #view-attend .sm-dh h3 small{font-size:12.5px;font-weight:500;color:var(--mute)} #view-attend .sm-ym{display:inline-flex;align-items:center;gap:6px;margin-left:auto} #view-attend .sm-ym b{min-width:52px;text-align:center;font-size:14px} #view-attend .sm-kg{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 4px} #view-attend .sm-kc{display:flex;align-items:baseline;gap:6px;min-width:0} #view-attend .sm-kc dt{font-size:12.5px;color:var(--mute)} #view-attend .sm-kc dd{margin:0;font-size:14px;font-weight:700;color:var(--ink)} #view-attend .sm-kc dd.w{color:var(--warn-ink)} #view-attend .sm-kc dd.b{color:var(--bad-ink)} #view-attend .sm-sec{padding-top:12px;margin-top:12px;border-top:1px solid var(--line)} #view-attend .sm-sec h4{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font-size:14px;font-weight:700} #view-attend .sm-sec h4 small{font-size:12px;font-weight:500;color:var(--mute)} #view-attend .sm-sec h4 small.w{color:var(--warn-ink);font-weight:650} #view-attend .sm-days{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} #view-attend .sm-day{display:grid;grid-template-columns:76px 104px 92px minmax(0,1fr) auto;gap:4px 10px;align-items:center;min-height:38px;padding:3px 6px;border-bottom:1px solid var(--line);font-size:13.5px} #view-attend .sm-day:last-child{border-bottom:0} #view-attend .sm-day.now{background:var(--panel2);border-radius:var(--r-inner)} #view-attend .sm-dd{color:var(--ink2);font-weight:650} #view-attend .sm-dt{color:var(--ink)} #view-attend .sm-dm{color:var(--mute)} #view-attend .sm-df{display:flex;flex-wrap:wrap;gap:2px 12px;min-width:0} #view-attend .sm-f{font-size:12.5px;color:var(--mute);white-space:nowrap} #view-attend .sm-f.w{color:var(--warn-ink);font-weight:650} #view-attend .sm-f.b{color:var(--bad-ink);font-weight:650} #view-attend .sm-da{display:flex;justify-content:flex-end} #view-attend .sm-lvn{margin:0 0 6px;font-size:13.5px;line-height:1.7;color:var(--ink2)} #view-attend .sm-lvn b{font-size:15px;color:var(--ink)} #view-attend .sm-lvn small{font-size:12px;color:var(--mute);margin-left:8px} #view-attend .sm-lvn small.w{color:var(--warn-ink);font-weight:650} #view-attend .sm-lvl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} #view-attend .sm-lvl li{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:7px 6px;border-bottom:1px solid var(--line);font-size:13px} #view-attend .sm-lvl li:last-child{border-bottom:0} #view-attend .sm-lk{font-weight:700;color:var(--ink)} #view-attend .sm-lvl small{font-size:12px;color:var(--mute);min-width:0;overflow-wrap:anywhere} #view-attend .sm-ls{margin-left:auto;font-size:12.5px;color:var(--mute)} #view-attend .sm-ls.w{color:var(--warn-ink);font-weight:700} #view-attend .sm-dfoot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px} @media (max-width:1100px) and (min-width:761px){ /* 휴대폰: 머리 줄 숨기고 행 = 칸 이름 붙은 4칸 카드 · 상세는 누른 행 바로 아래 */ #view-attend .sm-r{grid-template-columns:minmax(56px,.7fr) minmax(120px,1.4fr) minmax(130px,1.4fr) repeat(4,minmax(40px,.5fr)) minmax(80px,.9fr) minmax(52px,.6fr) 12px;gap:4px 8px;padding-left:14px;padding-right:14px} } @media (max-width:760px){ #view-attend .sm-box{padding-top:14px} #view-attend .sm-hh{padding:0 14px 8px} #view-attend .sm-r.sm-head{display:none} #view-attend .sm-tb>*{order:var(--o,0)} #view-attend .sm-r{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;padding:12px 14px} #view-attend .sm-c.c-nm{grid-column:1/4} #view-attend .sm-c.c-x{grid-column:4;grid-row:1} #view-attend .sm-c.c-td{grid-column:1/-1} #view-attend .sm-c.c-wk{grid-column:1/-1} #view-attend .sm-c.c-lv{grid-column:1/3} #view-attend .sm-c.c-q{grid-column:3/5} #view-attend .sm-c.c-n,#view-attend .sm-c.c-q{text-align:left} #view-attend .sm-c[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font-size:12px;font-weight:500;color:var(--mute)} #view-attend .sm-c.c-td,#view-attend .sm-c.c-wk{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px} #view-attend .sm-c.c-td::before,#view-attend .sm-c.c-wk::before{display:inline;margin:0 4px 0 0;min-width:48px} #view-attend .sm-c.c-wk .sm-wb{flex-basis:100%;max-width:none;margin-top:4px} #view-attend .sm-det{order:var(--o,999);padding:14px} #view-attend .sm-ym{margin-left:0} #view-attend .sm-dh .sm-x{margin-left:auto} #view-attend .sm-kg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px} #view-attend .sm-day{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"d t m a" "f f f a";padding:8px 4px} #view-attend .sm-dd{grid-area:d} #view-attend .sm-dt{grid-area:t} #view-attend .sm-dm{grid-area:m} #view-attend .sm-df{grid-area:f} #view-attend .sm-da{grid-area:a} #view-attend .sm-df:empty{display:none} #view-attend .at-top.sm-mgr>.at-now .at-now-r{flex:1 1 100%} #view-attend .at-top.sm-mgr>.at-now .btn.at-big{flex:1;height:40px} #view-attend .sm-tbar{padding:10px 14px} #view-attend .sm-todo>.rq-list{padding:0 8px 8px} } /* 2026-10-12 대표님 "알록달록 색칠공부 말고 — 색은 다른 색을 써야 할 때만": 출퇴근 화면 상태색은 회색(종류는 글자로) */ #view-attend{--t-in:var(--mute);--t-lv:var(--mute);--t-trip:var(--mute);--t-wfh:var(--mute)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #view-attend{--t-in:var(--mute);--t-lv:var(--mute);--t-trip:var(--mute);--t-wfh:var(--mute)} } :root[data-theme="dark"] #view-attend{--t-in:var(--mute);--t-lv:var(--mute);--t-trip:var(--mute);--t-wfh:var(--mute)} /* 재건축 4단계(C) 합친 시트 · 4대보험 · 전체 111장 중 109번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 999zzz7 999zzz7b */ /* 4대보험 메뉴 (2026-10-15 · js/999i · views/345) — 납부서 수집(10_가결산 996b)과 같은 결: 카드 --r-card · 옅은 테두리 · 토큰만(밝게·어둡게) 색은 문제·주의에만(대표님 10/12): 실패 = 빨강 · 조치 필요·결과 확인 필요·입력 오류 = 주황 · 나머지는 무채색. 종류 구분은 글자로. */ .ins{display:flex;flex-direction:column;gap:16px;min-width:0} .ins-card{box-sizing:border-box;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1,none);padding:18px 20px 16px} .ins-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px} .ins-h h3{margin:0;font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink)} .ins-t{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums} .ins-t b{font-weight:700} .ins-h .ins-qseg{margin-left:auto} .ins-f{display:flex;flex-direction:column;gap:5px;min-width:0} .ins-f>label,.ins-l{font-size:12.5px;font-weight:600;color:var(--ink2)} .ins-f label small,.ins-f>small{font-weight:400;font-size:12px;color:var(--mute)} #view-ins input:not([type=checkbox]),#view-ins select,#ins-jobdlg input{box-sizing:border-box;width:100%;min-width:0;height:var(--ctl-h);padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-ctl); background:var(--panel);color:var(--ink);font:inherit;font-size:14px;font-variant-numeric:tabular-nums} #view-ins input:not([type=checkbox]):focus-visible,#view-ins select:focus-visible,#ins-jobdlg input:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px} #view-ins input[aria-invalid="true"],#view-ins select[aria-invalid="true"]{border-color:var(--warn-ink);box-shadow:0 0 0 1px var(--warn-ink) inset} .ins-new>.ins-f{margin-bottom:14px} .ins-cli{max-width:560px} .ins-pick{position:relative} .ins-pick[hidden]{display:none} .ins-qout{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:320px;overflow:auto;padding:4px;background:var(--panel); border:1px solid var(--line2);border-radius:var(--r-inner);box-shadow:var(--shadow)} .ins-qout[hidden]{display:none} .ins-qout button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;width:100%;padding:8px 10px;text-align:left;font:inherit;cursor:pointer; background:none;border:0;border-radius:var(--r-ctl);color:var(--ink)} .ins-qout button:hover,.ins-qout button:focus-visible{background:var(--panel2);outline:none} .ins-qout b{min-width:0;font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ins-qout .num{font-size:12.5px;color:var(--ink2)} .ins-qout small{grid-column:1/-1;font-size:12px;color:var(--mute)} .ins-none{margin:0;padding:10px;font-size:13px;color:var(--mute)} .ins-chosen{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--panel2)} .ins-chosen[hidden]{display:none} .ins-cw{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} .ins-cw b{font-size:15px;font-weight:700;color:var(--ink)} .ins-cw .num{font-size:13px;color:var(--ink2)} .ins-cw small{flex-basis:100%;font-size:12px;color:var(--mute)} .ins-mute{font-size:12.5px;color:var(--mute)} .ins-warn,.ins-cw small.ins-warn{color:var(--warn-ink)} .ins-kseg{align-self:flex-start;flex-wrap:wrap} .ins-kseg small{margin-left:3px;font-size:11.5px;color:var(--mute)} /* 2026-11-06 검증 지적: 휴대폰 폭에서 전역 .seg 규칙(core 600 — 한 줄 가로 스크롤 + 끝 흐림)이 넷째 단추 '근로자 상실'을 스크롤 뒤로 숨겼다 → 종류 단추는 줄바꿈(core 는 그대로 · id 로 이김) */ @media (max-width:1024px){#view-ins .ins-kseg:not(.hidden){flex-wrap:wrap;overflow-x:visible;padding-right:0;-webkit-mask-image:none;mask-image:none}} .ins-hint{margin:2px 0 0;font-size:12.5px;color:var(--mute)} .ins-two{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:12px 16px;margin-bottom:16px} .ins-new:not([data-kind="취득"]):not([data-kind="상실"]) .ins-acqonly{display:none} .ins-new[data-kind="성립"] .ins-acq,.ins-new[data-kind="상실"] .ins-acq,.ins-new[data-kind="성립"] .ins-rrnf{display:none} /* 2026-11-06 근로자 상실(js/999i pRow · readLoss): 상실 칸(.ins-loss)은 상실일 때만 · 상실에서 숨기는 칸(.ins-noloss — 적용일·팩스번호·취득일·대표자·초단시간) */ .ins-new:not([data-kind="상실"]) .ins-loss,.ins-new[data-kind="상실"] .ins-noloss,.ins-new[data-kind="상실"] .ins-noloss-i{display:none} .ins-rtx[hidden]{display:none} .ins-pg .ins-wide{grid-column:span 2} .ins-pg .ins-lrow{grid-column-start:1} /* 상실: 퇴사일·사유 한 줄 · 보수 총액 한 줄로 묶음(넓은 화면) */ @media (max-width:900px){.ins-pg .ins-lrow{grid-column-start:auto}} #view-ins .ins-loss select:disabled{color:var(--mute);background:var(--panel2);cursor:not-allowed} .ins-ph{display:flex;align-items:center;gap:10px;margin:4px 0 10px;padding-top:14px;border-top:1px solid var(--line)} .ins-ph h4{margin:0;font-size:14px;font-weight:700;color:var(--ink)} .ins-ph .btn{margin-left:auto} .ins-people{display:flex;flex-direction:column;gap:10px} .ins-p{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--panel2)} .ins-p-h{display:flex;align-items:center;gap:8px;margin-bottom:8px} .ins-pno{font-size:13px;font-weight:700;color:var(--ink2)} .ins-pdel{margin-left:auto} .ins-pdel[hidden]{display:none} .ins-pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px 12px} .ins-fo[hidden],.ins-cend[hidden],.ins-shortx[hidden],.ins-ceo-sh[hidden],.ins-ceo-on[hidden]{display:none} .ins-shortx{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px} .ins-shortx small{font-size:12px;white-space:normal} .ins-ceo-sh{margin:6px 0 0;font-size:13px} .ins-pc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px} .ins-ck{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);white-space:nowrap;cursor:pointer} .ins-ck input{width:16px;height:16px;margin:0;accent-color:var(--accent-fill)} .ins-ckg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--panel)} .ins-ckl{font-size:12px;color:var(--mute)} .ins-cend{flex-direction:row;align-items:center;gap:6px} .ins-cend label{font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap} #view-ins .ins-cend input{width:auto} .ins-lock{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--mute)} .ins-go{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:12px} .ins-msg{flex:1;min-width:0;margin:0;font-size:13px;color:var(--ink2)} .ins-msg.bad{color:var(--warn-ink)} .ins-appr{margin:-6px 0 12px;font-size:12.5px;color:var(--mute)} .ins-appr:empty{display:none} .ins-rows{display:flex;flex-direction:column} .ins-jh,.ins-j{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(90px,.6fr) 96px minmax(0,2.4fr);gap:4px 14px;align-items:start} .ins-jh{padding:0 4px 8px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mute)} .ins-j{padding:12px 4px;border-bottom:1px solid var(--line)} .ins-j:last-child{border-bottom:0} .ins-jm,.ins-jw{display:flex;flex-direction:column;gap:2px;min-width:0} .ins-jn{font-size:14px;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ins-jk{font-size:12.5px;color:var(--ink2)} .ins-jw{font-size:12.5px;color:var(--ink2)} .ins-jw .num{font-size:12px;color:var(--mute)} .ins-jx{min-width:0} .ins-next{margin:0;font-size:13px;line-height:1.5;color:var(--ink);word-break:keep-all} .ins-rb{display:flex;flex-wrap:wrap;gap:2px 6px;margin-top:4px;font-size:12.5px;color:var(--ink2)} .ins-rb i{font-style:normal;color:var(--faint)} .ins-why{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--mute);word-break:keep-all} .t-bad .ins-why,.t-warn .ins-why{color:var(--ink2)} .ins-edin{margin:4px 0 0;font-size:12px;line-height:1.5;word-break:keep-all} /* 2026-11-06 취득: 건보 EDI 를 못 했거나 리허설만 — 팩스 표시 아래 작은 글 */ .ins-blk{margin-top:4px;font-size:12.5px;color:var(--ink2)} .ins-blk summary{cursor:pointer;color:var(--mute)} .ins-blk ul{margin:4px 0 0;padding-left:18px} .ins-ja{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .ins-apv{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 24px;margin-top:6px;padding:12px 14px; border:1px solid var(--line);border-radius:var(--r-inner);background:var(--panel2)} .ins-apv-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px} .ins-apv a.btn{text-decoration:none} .ins-dl{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:13px} .ins-dl dt{color:var(--mute)} .ins-dl dd{margin:0;min-width:0;color:var(--ink)} .ins-dl dd b{white-space:nowrap} .ins-dl ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--ink2)} .ins-done{margin:0;font-size:13px;color:var(--ink2)} .ins-empty{margin:0;padding:14px 4px;font-size:13px;color:var(--mute)} /* 2026-10-15 검사 지적 반영: 맨 위 할 일 한 줄(3초 파악) · 팩스번호·또 보내기 접기 · 확인할 칸 · 세무사 번호 넣기 */ .ins-alert{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 14px;background:var(--panel);border:1px solid var(--line); border-radius:var(--r-inner);font-size:13.5px;color:var(--ink2)} .ins-alert[hidden]{display:none} .ins-alert b{font-weight:700;color:var(--warn-ink)} .ins-alert .btn{margin-left:auto} .ins-new:not([data-kind="취득"]):not([data-kind="상실"]) .ins-acqonly-i{display:none} .ins-more{margin:-4px 0 16px} .ins-more>summary{width:fit-content;cursor:pointer;font-size:12.5px;color:var(--ink2)} .ins-more[open]>summary{margin-bottom:10px} .ins-more .ins-two{margin-bottom:0} .ins-more .ins-ck{white-space:normal} .ins-wn summary{color:var(--warn-ink)} .ins-dl dt.ins-warn{color:var(--warn-ink)} .ins-dl dd small{display:block;margin-top:2px} .ins-fix{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px} .ins-fix label{font-size:12.5px;font-weight:600;color:var(--ink2)} #view-ins .ins-fix input{width:180px} /* 2026-10-27 소재지 비교 상자 · 공단 반송 상자 · 정정해서 다시 보내기(js/999i addrBox·rejBox·redoPaint) — 색은 다른 칸·반송에만(주황) */ .ins-addr,.ins-rj{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--panel2)} .ins-addr .ins-dl{font-size:12.5px} .ins-addr .ins-dl dd{word-break:keep-all;overflow-wrap:anywhere} .ins-addr .ins-dl dd.ins-warn{color:var(--warn-ink);text-decoration:underline;text-decoration-color:var(--warn-ink);text-underline-offset:3px} .ins-awhy{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink2);word-break:keep-all} .ins-addr .ins-mute,.ins-rj .ins-mute{margin:6px 0 0;font-size:12px;line-height:1.5;word-break:keep-all} .ins-aok{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%} #view-ins .ins-aok select{width:auto;max-width:100%;font-size:12.5px} .ins-addr .ins-ja .btn,.ins-rj .ins-ja .btn{white-space:nowrap} .ins-rj p{margin:0;font-size:13px;line-height:1.5;color:var(--ink);word-break:keep-all} .ins-rj .ins-rjl{margin-top:2px;font-size:12.5px;color:var(--ink2)} .ins-rj a.btn{text-decoration:none} .ins-redo[hidden]{display:none} .ins-redo-rows{display:grid;gap:8px;margin:10px 0} .ins-rdr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,220px);align-items:center;gap:6px 12px;font-size:13px} .ins-rdr b{font-weight:600;color:var(--ink)} #view-ins .ins-rdr input{width:100%;min-width:0;box-sizing:border-box} @media (max-width:640px){.ins-rdr{grid-template-columns:minmax(0,1fr) auto}.ins-rdr input{grid-column:1/-1} .ins-addr .ins-dl{grid-template-columns:minmax(0,1fr);gap:0}.ins-addr .ins-dl dd{margin-bottom:6px} .ins-addr .ins-ja .btn,.ins-rj .ins-ja .btn{white-space:normal}} @media (max-width:900px){ .ins-card{padding:14px 14px 12px} .ins-two{grid-template-columns:minmax(0,1fr)} .ins-pg{grid-template-columns:repeat(2,minmax(0,1fr))} .ins-jh{display:none} .ins-j{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px} .ins-js{grid-column:2;grid-row:1;justify-self:end} .ins-jw{grid-column:1/-1;flex-direction:row;gap:8px} .ins-jx{grid-column:1/-1} .ins-go{flex-wrap:wrap} .ins-go .btn{flex:1 0 100%} } /* 대표자 줄(최초 취득 자동 · 10/15) · 고용 직종부호 찾기 — 색 없이(주의 글자만 주황) */ .ins-ceo{margin-bottom:10px} .ins-ceo[hidden],.ins-ceo-b[hidden],.ins-ceo-emp[hidden]{display:none} .ins-ceo .ins-p-h{flex-wrap:wrap} .ins-ceo .ins-ceo-on{margin-left:auto} .ins-ceo-emp{margin-top:10px} .ins-v{display:flex;align-items:center;min-height:var(--ctl-h);font-size:14px;color:var(--ink);overflow-wrap:anywhere} .ins-new[data-ceoauto="1"] .ins-ceock{display:none} .ins-mask{white-space:nowrap;font-size:12px;letter-spacing:.5px;color:var(--ink2)} .ins-jobi{display:flex;gap:6px;min-width:0} .ins-jobi input{flex:1} .ins-jobi .btn{flex:none} .ins-jobn{min-height:1em;font-size:12px;color:var(--ink2)} .ins-jobn.ins-warn{color:var(--warn-ink)} .ins-jobdlg{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;background:rgba(0,0,0,.32)} .ins-jobdlg[hidden]{display:none} .ins-jobbox{box-sizing:border-box;width:min(560px,100%);max-height:80vh;display:flex;flex-direction:column;gap:10px;padding:16px 18px; background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-card);box-shadow:var(--shadow)} .ins-jobh{display:flex;align-items:center;gap:10px} .ins-jobh h4{margin:0;font-size:15px;font-weight:700;color:var(--ink)} .ins-jobh .btn{margin-left:auto} .ins-jobsrc{margin:0;font-size:12px;color:var(--mute)} .ins-jobs{margin:4px 0 2px;font-size:12.5px;font-weight:600;color:var(--ink2)} .ins-jobl{min-height:120px;overflow:auto;display:flex;flex-direction:column;gap:2px} .ins-jobl button{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;width:100%;padding:8px 10px;text-align:left; font:inherit;cursor:pointer;background:none;border:0;border-radius:var(--r-ctl);color:var(--ink)} .ins-jobl button:hover,.ins-jobl button:focus-visible{background:var(--panel2);outline:none} .ins-jobl b{font-size:14px;font-weight:700} .ins-jobl span{min-width:0;font-size:14px} .ins-jobl em{font-style:normal;font-size:12px;color:var(--mute)} .ins-jobl small{grid-column:2/-1;font-size:12px;color:var(--mute)} /* 4대보험 고지 (2026-10-15 밤 · js/999j · views/346) — 4대보험 메뉴(999zzz7)와 같은 결: 카드 --r-card · 옅은 테두리 · 토큰만(밝게·어둡게) 색은 주의에만(대표님 10/12): 확인할 곳(0원·조회 실패·크게 바뀜) = 주황 글자 · 반입 실패 = 빨강 글자 · 나머지 무채색. 640px 아래는 줄마다 카드. */ .content .seg.ib-tabs{margin:0 0 14px} .ib{display:flex;flex-direction:column;gap:12px;min-width:0} .ib-fresh{margin:0;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums} .ib-fresh b{font-weight:700;color:var(--ink)} .ib-fresh.warn,.ib-fresh.warn b{color:var(--warn-ink)} .ib-fresh.bad,.ib-fresh.bad b{color:var(--bad-ink)} .ib-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px} .ib-ctl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2)} .ib-ctl[hidden]{display:none} #view-insbill select,#view-insbill .ib-q{box-sizing:border-box;height:var(--ctl-h);padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-ctl); background:var(--panel);color:var(--ink);font:inherit;font-size:14px;font-variant-numeric:tabular-nums} #view-insbill select{min-width:140px} #view-insbill .ib-q{flex:1 1 200px;max-width:280px;min-width:0} #view-insbill select:focus-visible,#view-insbill .ib-q:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px} .ib-csv{margin-left:auto} .ib-csv[hidden]{display:none} .ib-sum{margin:0;font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums} .ib-sum b{font-weight:700;color:var(--ink)} .ib-w,.ib-sum b.ib-w{color:var(--warn-ink)} .ib-mu{color:var(--mute);font-weight:400} .ib-wrap{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1,none);overflow:hidden} .ib-tb{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums} .ib-tb thead th{position:sticky;top:0;z-index:1;padding:10px 10px;background:var(--panel2);border-bottom:1px solid var(--line); font-size:12.5px;font-weight:600;color:var(--ink2);text-align:left;white-space:nowrap} .ib-tb thead th small{margin-left:2px;font-size:12px;font-weight:400;color:var(--mute)} .ib-tb th.r,.ib-tb td.r{text-align:right} .ib-tb tbody>tr>th,.ib-tb tbody>tr>td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)} .ib-tb tbody>tr.ib-r{cursor:pointer} .ib-tb tbody>tr.ib-r:hover>*{background:var(--panel2)} .ib-tb tbody>tr.open>*{background:var(--panel2);border-bottom-color:transparent} .ib-tb tbody>tr:last-child>*{border-bottom:0} .ib-nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;max-width:280px} .ib-nm:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px;border-radius:4px} .ib-nm b{font-weight:650;color:var(--ink)} .ib-nm .num{font-size:12px;color:var(--mute)} .ib-fl{flex-basis:100%;font-size:12px;color:var(--mute)} .ib-fl.ib-w{color:var(--warn-ink);font-weight:600} .ib-unk{color:var(--mute)} .ib-tot{font-weight:700} .ib-hd{display:block;font-size:12px;color:var(--mute)} .ib-when{white-space:nowrap;color:var(--ink2)} .ib-gc{text-align:right;white-space:nowrap} .ib-e{padding:24px 10px;text-align:center;color:var(--mute)} .ib-det>td{padding:0 10px 14px;background:var(--panel2)} .ib-det-in{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--panel)} .ib-dl{margin:0 0 6px;font-size:13px;color:var(--ink2)} .ib-fails{margin:0 0 8px;padding-left:18px;font-size:12.5px;color:var(--ink2)} .ib-ph{margin:10px 0 8px;font-size:13.5px;font-weight:700;color:var(--ink)} .ib-ph .ib-mu{font-size:12px;margin-left:4px} .ib-det-in p.ib-mu{margin:6px 0 0;font-size:12px} .ib-pw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-inner)} .ib-pt{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums} .ib-pt th,.ib-pt td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left;color:var(--ink)} .ib-pt thead th{font-size:12px;font-weight:600;color:var(--ink2);background:var(--panel2)} .ib-pt tbody th{font-weight:600} .ib-pt tfoot th,.ib-pt tfoot td{border-bottom:0;font-weight:700;background:var(--panel2)} .ib-pt .r{text-align:right} .ib-ceo{margin-left:4px;font-size:12px;font-weight:600;color:var(--ink2)} .ib-foot{margin:0;font-size:12px;color:var(--mute)} @media (max-width:1024px){ /* 1024px 아래는 core 소메뉴 줄(#subnav — 951h)이 같은 두 화면을 보여 줘서 이 탭은 숨김(두 줄 겹침 방지) */ .content .seg.ib-tabs{display:none} } @media (max-width:1100px){ .ib-tb thead th:nth-child(10),.ib-tb tbody>tr.ib-r>td.ib-when{display:none} } @media (max-width:640px){ /* 휴대폰: 표 머리 숨기고 줄마다 카드(이름 한 줄 + 칸 이름:값 격자) */ .ib-csv{margin-left:0} #view-insbill .ib-q{max-width:none;flex-basis:100%} .ib-tb thead{display:none} .ib-tb,.ib-tb tbody{display:block} .ib-tb tbody>tr.ib-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line)} .ib-tb tbody>tr.ib-r>th,.ib-tb tbody>tr.ib-r>td{display:flex;justify-content:space-between;gap:8px;padding:0;border:0;background:none;text-align:right} .ib-tb tbody>tr.ib-r>td[data-l]::before{content:attr(data-l);font-size:12px;color:var(--mute);text-align:left} .ib-tb tbody>tr.ib-r>th{grid-column:1/-1;display:block;text-align:left;margin-bottom:4px} .ib-tb tbody>tr.ib-r>td.ib-when{display:none} .ib-tb tbody>tr.ib-r>td.ib-gc{grid-column:1/-1;justify-content:flex-end;margin-top:4px} .ib-tb tbody>tr.ib-r>td.ib-gc:empty{display:none} .ib-hd{display:inline;margin-left:6px} .ib-nm{max-width:none} .ib-det{display:block} .ib-det>td{display:block;padding:0 10px 12px} .ib-e{display:block} } /* 일용직 근로내용확인신고 파일 만들기(2026-10-26 · js/999k) — 색 없이(주의 글자만 주황) · 접힌 카드 */ .insd-body[hidden]{display:none} .insd-body{display:block} .insd-top{margin:0 0 14px} .insd-two{margin-top:12px} .insd-ck{margin:0 0 6px;align-items:flex-start} .insd-ck .ins-ck{white-space:normal;max-width:100%} .insd-ck .ins-ck small{font-size:12px;color:var(--mute);white-space:normal} .insd-pay[hidden]{display:none} #view-ins .insd-pay input{width:150px} .insd-p .ins-pg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .insd-p .insd-wide{grid-column:span 2} .insd-fo[hidden]{display:none} .insd-sum{margin-left:6px} .insd-more{margin:10px 0 0} #view-ins input.insd-ed{border-color:var(--ink2)} .insd-bulk{margin:12px 0 0} .insd-bulk textarea{box-sizing:border-box;width:100%;max-width:640px;display:block;margin:0 0 8px;padding:8px 10px;border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px} #insd-body .ins-go .btn{flex:0 0 auto} /* 주민번호 칸(적으면 바로 잠김 · 앞 6자리만) · 주민번호 넣은 파일 목록(2026-10-26 오후) */ .insd-p .insd-rrnf{grid-column:span 2} .insd-rrnf small{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--mute);min-height:18px} .insd-rrnf small.ins-warn{color:var(--warn-ink)} .insd-rrnx{padding:1px 8px;min-height:0;font-size:12px} .insd-files{margin:16px 0 0} .insd-files:empty{display:none} .insd-jh{margin:0 0 8px;font-size:14px} .insd-jh small{font-weight:400;font-size:12px;color:var(--mute);margin-left:6px} .insd-jl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .insd-j{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)} .insd-jw{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px} .insd-jw small{flex-basis:100%;font-size:12.5px;color:var(--ink2);overflow-wrap:anywhere} .insd-j.warn .insd-jw small{color:var(--warn-ink)} .insd-j.bad .insd-jw small{color:var(--bad-ink)} .insd-j .btn{flex:0 0 auto} @media (max-width:900px){ .insd-p .ins-pg{grid-template-columns:repeat(2,minmax(0,1fr))} .insd-p .insd-wide,.insd-p .insd-rrnf{grid-column:1/-1} #insd-body .ins-go .btn{flex:1 0 100%} } /* 2026-11-03 4대보험 수임(업무대행) 목록(js/999i2) — 색은 조치 필요·팩스 실패·14일 넘음(.warn)에만 · 640 이하 한 줄씩 쌓음 */ .insm .ins-h{flex-wrap:wrap;gap:6px 10px} .insm-who{margin-left:auto} .insm-start .ins-pick{max-width:520px} .insm-rows{margin-top:10px} .insm-g{margin:0 0 12px} .insm-g h4,.insm-g>summary{margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:default} .insm-g>summary{cursor:pointer} .insm-r{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(220px,2fr) minmax(160px,1.6fr) auto;gap:6px 12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)} .insm-r.warn .insm-nx{color:var(--warn-ink)} .insm-a{display:flex;flex-direction:column;min-width:0} .insm-a b{overflow-wrap:anywhere} .insm-mute{font-size:12px;color:var(--mute)} .insm-pts{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--ink2)} .insm-pt b{font-weight:600;color:var(--ink)} .insm-nx{font-size:12.5px;color:var(--ink2);overflow-wrap:anywhere} .insm-w{color:var(--warn-ink)} .insm-b{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end} .insm-fx,.insm-doc{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--ink2);padding:6px 10px;border-radius:var(--r-inner);background:var(--panel2)} .insm-doc{flex-direction:column;align-items:flex-start} .insm-fx input{width:150px;min-height:var(--ctl-h);padding:4px 8px;border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);font:inherit} @media (max-width:640px){ .insm-r{grid-template-columns:1fr} .insm-b{justify-content:flex-start} .insm-who{margin-left:0} .insm-fx input{flex:1 1 140px;width:auto} } /* 2026-11-04 4대보험 처리 현황(#insw · js/999i3) — 새 요청 단추 한 줄 + 현황표 · 줄을 누르면 그 카드만 아래에(.ins[data-inswsec]) · 색은 확인 필요에만 */ .insw .ins-h{margin-bottom:10px} .insw-chips{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} .insw-chip{font:inherit;font-size:12.5px;padding:4px 10px;border-radius:var(--r-ctl);border:1px solid var(--line2);background:var(--panel);color:var(--ink2);cursor:pointer} .insw-chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .insw-chip.bad{color:var(--warn,#b45309)} .insw-chip b{font-weight:700} .insw-new{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .insw-nb small{font-size:11px;color:var(--mute)} .insw-board{border-top:1px solid var(--line)} .insw-th,.insw-r{display:grid;grid-template-columns:minmax(120px,1.1fr) 104px minmax(0,1.3fr) minmax(0,2fr);gap:4px 14px;align-items:center} .insw-th{padding:8px 6px;font-size:12px;color:var(--mute);border-bottom:1px solid var(--line)} .insw-r{width:100%;box-sizing:border-box;padding:9px 6px;text-align:left;font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer} .insw-r:hover{background:var(--panel2)} .insw-who{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .insw-k{font-size:13px;color:var(--ink2)} .insw-st{font-size:13px;font-weight:600} .insw-r.c-bad .insw-st{color:var(--warn,#b45309)} .insw-r.c-done .insw-st{color:var(--mute);font-weight:500} .insw-nx{min-width:0;font-size:12.5px;color:var(--ink2);line-height:1.4} .insw-nx small{margin-left:6px;color:var(--mute)} .insw-empty{margin:10px 2px 0;font-size:13px;color:var(--mute)} .insw-more{margin:8px 0 0} .insw-hit{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-inner)} .ins[data-inswsec] > :where(.ins-card:not(.insw):not(#ins-redo)){display:none} /* :where — 아래 '보이기' 줄이 이기게(id 가 든 :not 은 점수가 높음) */ .ins[data-inswsec="req"] > .ins-new,.ins[data-inswsec="list"] > .ins-list,.ins[data-inswsec="man"] > #insm{display:block} /* 2026-11-04 대표님 "누르면 어차피 동일 화면에서 나오는데 개선" · "세로가 너무 길어": 요청·진행·수임 카드를 열면 현황표·칩은 접고 그 카드만 — [← 처리 현황]으로 돌아감 */ .insw-back{display:none} .ins[data-inswsec]:not([data-inswsec="board"]) .insw-back{display:inline-flex} .ins[data-inswsec]:not([data-inswsec="board"]) #insw-rows,.ins[data-inswsec]:not([data-inswsec="board"]) #insw-n{display:none} .ins[data-inswsec]:not([data-inswsec="board"]) .insw-new{margin-bottom:0} @media (max-width:640px){#view-ins .ins{padding-bottom:96px}.insw-chips{margin-left:0;width:100%} .insw-th{display:none}.insw-r{grid-template-columns:1fr auto;grid-template-areas:"w k" "s s" "n n"} .insw-who{grid-area:w}.insw-k{grid-area:k}.insw-st{grid-area:s}.insw-nx{grid-area:n}} /* 재건축 4단계(C) 합친 시트 · 수집자료 · 전체 111장 중 110번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 2개: 999zzz3 968 */ #view-c360 .c3-pre .btn{margin-left:auto;text-decoration:none} #view-flreq .frq-guide{margin:-6px 0 12px;font-size:13px;color:var(--mute)} #view-flreq .frq-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px} #view-flreq .frq-sum{flex:1;min-width:0;font-size:14px;color:var(--ink2)} #view-flreq .frq-sum b{font-weight:700;color:var(--ink)} #view-flreq .frq-sum.bad,#view-flreq .frq-sum .frq-bad{color:var(--bad-ink)} #view-flreq .frq-bar .btn[disabled],#view-flreq .frq-head .btn[disabled]{opacity:1;color:var(--text-secondary,var(--mute));background:var(--panel2);border-color:var(--line2);cursor:not-allowed} #view-flreq .frq-list{padding:0} #view-flreq .frq-list>.tblwrap{margin-left:0;margin-right:0;width:auto} /* 공통 규칙(.card>.tblwrap 좌우 -20px)은 안쪽 여백이 있는 카드용 — 이 카드는 여백 0 */ #view-flreq .frq-lh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2)} #view-flreq .frq-lh b{font-weight:700;color:var(--ink)} table.frq-t{width:100%;border-collapse:collapse;font-size:14px} table.frq-t th{font-size:13px;font-weight:600;text-align:left;white-space:nowrap} table.frq-t th,table.frq-t td{padding-left:10px;padding-right:10px} table.frq-t td{vertical-align:middle} table.frq-t th.frq-ck,table.frq-t td.frq-ck{width:40px;text-align:center;padding-left:6px;padding-right:2px} table.frq-t th.frq-mk,table.frq-t td.frq-mk{text-align:center;white-space:nowrap} table.frq-t td.frq-nm{min-width:120px} table.frq-t td.frq-nm b{font-weight:600} table.frq-t .sub{display:block;font-size:12px;color:var(--text-secondary,var(--mute));font-weight:400} table.frq-t td.frq-rq .pill+.sub{display:inline;margin-left:6px} table.frq-t tr.frq-on>td{background:var(--sel)} label.frq-ckl{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;cursor:pointer;margin:0} label.frq-ckl input{width:16px;height:16px;cursor:pointer} label.frq-ckl input:disabled{cursor:not-allowed;opacity:.45} #view-flreq .frq-ok{color:var(--ok-ink);font-weight:700} #view-flreq .frq-no{color:var(--faint)} #view-flreq .frq-why{margin-left:6px;font-size:12px;color:var(--bad-ink)} #view-flreq .frq-err{display:inline-block;margin-left:6px;font-size:12px;font-weight:600;color:var(--bad-ink)} #view-flreq td.frq-more{text-align:center;padding:10px 8px} @media (max-width:1024px){ #view-flreq .frq-head input[type=month],#view-flreq .frq-bar .btn{min-height:44px} label.frq-ckl{min-width:44px;min-height:44px} } @media (max-width:900px){ /* 휴대폰: 표 → 카드(값마다 data-l 라벨) — CMS 출금(956)과 같은 방식 */ table.frq-t,table.frq-t tbody,table.frq-t tr,table.frq-t td{display:block;width:auto} table.frq-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} table.frq-t tbody>tr{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px;background:var(--panel)} #view-flreq table.frq-t tbody>tr>td{border:0;padding:3px 0;text-align:left;white-space:normal} /* 2026-10-16 중요 표시 뺌 — id 선택자라 위 표 규칙(가운데 맞춤)보다 이긴다 */ table.frq-t td[data-l]{display:flex;gap:10px;align-items:baseline;justify-content:space-between} table.frq-t td[data-l]::before{content:attr(data-l);flex:none;font-size:13px;font-weight:600;color:var(--text-secondary,var(--mute))} table.frq-t td.frq-nm{order:-1;display:block;font-size:15px} table.frq-t td.frq-ck{order:-2;width:auto} #view-flreq table.frq-t tbody>tr>td.empty,#view-flreq table.frq-t tbody>tr>td.frq-more{display:block;padding:20px 8px;text-align:center} } @media (max-width:767px){ #view-flreq .frq-head input[type=month]{font-size:16px} } #view-flreq .frq-lh .frq-prev{margin-left:auto} /* 2026-10-20 확인 필요(홈택스 대조) — '요청됨' 옆 두 번째 표시 · 요약 줄의 주의 글자(색은 주의에만) */ table.frq-t td.frq-rq .pill+.pill{margin-left:6px} #view-flreq .frq-sum .frq-warn{color:var(--warn-ink,var(--ink));font-weight:600} /* 재건축 4단계(C) 합친 시트 · 관리 · 전체 111장 중 111번째 — 파일 번호가 곧 화면에 적용되는 순서(다른 칸 시트와 섞여 있음). 원래 조각 1개: 999zzz3 */ :is(#view-admin,#view-settings) .card:not(.card .card):not(.br){border-radius:var(--r-card);box-shadow:var(--au-sh)} /* '다 했어요' 빈 칸 — 할 일이 없을 때는 안심 한 줄 */ :is(#view-admin,#view-settings) .au-done{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ok-ink)} :is(#view-admin,#view-settings) .au-sub{display:block;margin-top:4px;font-size:13px;color:var(--mute);font-weight:400} /* 대표실: 기준 시점 문장 → 제목 줄 ⓘ · 비서 요청 설명 → ⓘ */ #view-admin .wht-head .adm-kpi-i{margin-left:2px} #view-admin .dr-card .dr-head .dr-i{order:0} /* 비서 요청: 받은 요청이 하나도 없으면 칸을 접는다(0 은 소음 — 요청이 오면 알림 벨과 함께 다시 보인다) */ #view-admin #dr-card.dr-empty{display:none} /* 세무 점검 (2026-10-26 · js/999r · views/347) — 4대보험 고지(999zzz7b)와 같은 결: 카드 --r-card · 옅은 테두리 · 토큰만(밝게·어둡게) 색은 주의에만(대표님 10/12): 확인 필요 = 주황 글자 · 확인 불가·처리함·해당 없음 = 무채색. 640px 아래는 줄마다 카드. 거래처 한 장 띠(#c3-risk · .rk-c3)도 여기 — 20_수집자료 c360 화면 안에 이 칸 JS 가 끼운다(그 칸 CSS 는 안 고침). */ .rk{display:flex;flex-direction:column;gap:12px;min-width:0} .rk-fresh{margin:0;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums} .rk-fresh b{font-weight:700;color:var(--ink)} .rk-fresh.warn,.rk-fresh.warn b{color:var(--warn-ink)} .rk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px} .content .seg.rk-seg{margin:0} .content .seg.rk-seg>button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--panel)} .rk-ctl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2)} #view-risk select,#view-risk .rk-q{box-sizing:border-box;height:var(--ctl-h);padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-ctl); background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px} #view-risk .rk-q{flex:1 1 200px;max-width:280px;min-width:0} #view-risk select:focus-visible,#view-risk .rk-q:focus-visible,#view-risk input[type=checkbox]:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px} .rk-sum{margin:0;font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums} .rk-sum b{font-weight:700;color:var(--ink)} .rk-w,.rk-sum b.rk-w{color:var(--warn-ink)} .rk-mu{color:var(--mute);font-weight:400} .rk-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-inner);background:var(--panel2)} .rk-bulk[hidden]{display:none} .rk-bulk b{font-size:13.5px;color:var(--ink)} #view-risk .rk-bm{max-width:320px} .rk-wrap{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1,none);overflow:hidden} .rk-tb{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums} .rk-tb thead th{position:sticky;top:0;z-index:1;padding:10px 10px;background:var(--panel2);border-bottom:1px solid var(--line); font-size:12.5px;font-weight:600;color:var(--ink2);text-align:left;white-space:nowrap} .rk-tb tbody>tr>th,.rk-tb tbody>tr>td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink);text-align:left;background:transparent;font-weight:400} .rk-tb tbody>tr.rk-r{cursor:pointer} .rk-tb tbody>tr.rk-r:hover>*{background:var(--panel2)} .rk-tb tbody>tr.open>*{background:var(--panel2);border-bottom-color:transparent} .rk-tb tbody>tr:last-child>*{border-bottom:0} .rk-tb .rk-ck{width:28px;padding-right:0} .rk-tb .rk-ck input{width:16px;height:16px;margin:2px 0 0;cursor:pointer} .rk-nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;max-width:520px;min-width:0;white-space:normal;height:auto} .rk-nm:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px;border-radius:4px} .rk-nm b{font-weight:650;color:var(--ink)} .rk-nm .num{font-size:12px;color:var(--mute)} .rk-why{flex-basis:100%;font-size:12.5px;color:var(--ink2);line-height:1.45} .rk-need .rk-why{color:var(--ink)} .rk-st{display:inline-block;font-size:12.5px;font-weight:650;color:var(--mute);white-space:nowrap} .rk-st-need{color:var(--warn-ink)} .rk-st-done,.rk-st-na{color:var(--ink2);font-weight:600} .rk-by{display:block;font-size:12px;color:var(--mute);white-space:nowrap} .rk-gc{text-align:right;white-space:nowrap} .rk-gc .btn+.btn{margin-left:4px} .rk-e{padding:24px 10px;text-align:center;color:var(--mute)} .rk-det>td{padding:0 10px 14px;background:var(--panel2)} .rk-det-in{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--panel)} .rk-dw{overflow-wrap:anywhere} .rk-dw{margin:0 0 8px;font-size:13.5px;color:var(--ink);font-weight:600} .rk-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 16px;margin:0 0 8px} .rk-dl>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;padding:4px 0;border-bottom:1px dashed var(--line);min-width:0} .rk-dl dt{flex:none;font-size:12.5px;color:var(--mute)} .rk-dl dd{flex:1 1 auto;min-width:0;margin:0;font-size:13px;color:var(--ink);text-align:right;overflow-wrap:anywhere} .rk-det-in p.rk-mu{margin:6px 0 0;font-size:12px} .rk-ph{margin:10px 0 4px;font-size:13px;font-weight:700;color:var(--ink)} .rk-hist{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink2)} .rk-mrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px} #view-risk .rk-memo{max-width:420px} .rk-foot{margin:0;font-size:12px;color:var(--mute);line-height:1.5} /* 거래처 한 장 띠 */ .rk-c3{padding:12px 16px;margin:12px 0 0} .rk-c3[hidden]{display:none} .rk-c3h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px} .rk-c3h b{font-size:14px;color:var(--ink)} .rk-c3h .rk-mu{font-size:12.5px} .rk-c3h .btn{margin-left:auto} .rk-c3l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .rk-c3l li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;gap:4px 10px;padding:7px 0;border-top:1px solid var(--line);font-size:13px} .rk-c3l li b{font-weight:650;color:var(--ink);white-space:nowrap} .rk-c3w{color:var(--ink2);min-width:0} .rk-c3a{white-space:nowrap} .rk-c3a .btn+.btn{margin-left:4px} @media (max-width:1100px){ .rk-tb thead th:nth-child(4),.rk-tb tbody>tr.rk-r>td[data-l="기간"]{display:none} } @media (max-width:640px){ /* 휴대폰: 표 머리 숨기고 줄마다 카드(이름·무엇 한 줄 + 칸 이름:값) */ #view-risk .rk-q,#view-risk .rk-bm{max-width:none;flex-basis:100%} .rk-ctl{flex:1 1 140px} .rk-ctl select{flex:1;min-width:0} .rk-tb thead{display:none} .rk-tb,.rk-tb tbody{display:block} .rk-tb tbody>tr.rk-r{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 10px;padding:12px 14px;border-bottom:1px solid var(--line)} .rk-tb tbody>tr.rk-r>th,.rk-tb tbody>tr.rk-r>td{display:flex;justify-content:space-between;gap:8px;padding:0;border:0;background:none;text-align:right;min-width:0;grid-column:2} .rk-tb tbody>tr.rk-r>td[data-l]:not(.rk-ck)::before{content:attr(data-l);flex:none;font-size:12px;color:var(--mute);text-align:left} .rk-tb tbody>tr.rk-r>td.rk-ck{grid-row:1;grid-column:1;width:auto;display:block} .rk-tb tbody>tr.rk-r>th{grid-row:1;display:block;text-align:left;margin-bottom:4px} .rk-tb tbody>tr.rk-r>td[data-l="기간"]{display:flex} .rk-tb tbody>tr.rk-r>td.rk-gc{grid-column:1/-1;justify-content:flex-end;flex-wrap:wrap;margin-top:6px} .rk-nm{max-width:none} .rk-det{display:block} .rk-det>td{display:block;padding:0 10px 12px} .rk-e{display:block} .rk-c3l li{grid-template-columns:auto minmax(0,1fr)} .rk-c3w{grid-column:1/-1} .rk-c3a{grid-column:1/-1;justify-self:end} .rk-c3h .btn{margin-left:0} } /* 거래처 등급 (2026-11-03 · js/999s · views/348) — 세무 점검(999zzz8)과 같은 결: 카드 --r-card · 옅은 테두리 · 토큰만(밝게·어둡게) 색은 주의에만(대표님 10/12): 예의주시 별·하락 화살표·지금 미수 = 주황 글자 · 나머지 무채색. 640px 아래는 줄마다 카드(상호 · ★ · 코멘트). 거래처 한 장 띠(#c3-grade · .gr-c3)도 여기 — 20_수집자료 c360 화면 안에 이 칸 JS 가 끼운다(그 칸 CSS 는 안 고침). */ .gr{display:flex;flex-direction:column;gap:12px;min-width:0} .gr-fresh{margin:0;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums;line-height:1.5} .gr-fresh b{font-weight:700;color:var(--ink)} .gr-fresh.warn,.gr-fresh.warn b{color:var(--warn-ink)} .gr-draft{font-weight:650;color:var(--ink)} .gr-sum{margin:0;font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums} .gr-sum b{font-weight:700;color:var(--ink)} .gr-wk,.gr-sum b.gr-wk,.gr-dn,.gr-ar{color:var(--warn-ink)} .gr-mu{color:var(--mute);font-weight:400} .gr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px} .content .seg.gr-seg{margin:0} .content .seg.gr-seg>button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--panel)} #view-grade .gr-q{box-sizing:border-box;height:var(--ctl-h);padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-ctl); background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;flex:1 1 200px;max-width:280px;min-width:0} #view-grade .gr-q:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px} .gr-own{display:flex;flex-wrap:wrap;gap:6px 8px} .gr-chip{display:inline-flex;align-items:baseline;gap:6px;height:auto;min-height:var(--ctl-h);padding:5px 12px;border:1px solid var(--line2);border-radius:999px; background:var(--panel);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap} .gr-chip small{font-size:11.5px;font-weight:400;color:var(--mute);font-variant-numeric:tabular-nums} .gr-chip small b{font-weight:700;color:var(--ink2)} .gr-chip small b.gr-wk{color:var(--warn-ink)} .gr-chip[aria-pressed="true"]{border-color:var(--ink);background:var(--panel2);box-shadow:inset 0 0 0 1px var(--ink)} .gr-chip:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px} .gr-wrap{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1,none);overflow:auto} .gr-tb{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums} .gr-tb thead th{position:sticky;top:0;z-index:1;padding:9px 10px;background:var(--panel2);border-bottom:1px solid var(--line); font-size:12.5px;font-weight:600;color:var(--ink2);text-align:left;white-space:nowrap} .gr-sb{padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;height:auto} .gr-sb:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px;border-radius:4px} .gr-tb thead th[aria-sort="ascending"] .gr-sb::after{content:" ▲";font-size:10px} .gr-tb thead th[aria-sort="descending"] .gr-sb::after{content:" ▼";font-size:10px} .gr-tb tbody>tr>th,.gr-tb tbody>tr>td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink);text-align:left;background:transparent;font-weight:400} .gr-tb tbody>tr.gr-r{cursor:pointer} .gr-tb tbody>tr.gr-r:hover>*{background:var(--panel2)} .gr-tb tbody>tr.gr-r:focus-visible{outline:2px solid var(--accent-fill);outline-offset:-2px} .gr-tb tbody>tr:last-child>*{border-bottom:0} .gr-tb tbody th b{font-weight:650;color:var(--ink)} .gr-fl{display:block;margin-top:2px;font-size:11.5px;color:var(--mute);font-weight:400} .gr-star{letter-spacing:1px;white-space:nowrap;color:var(--ink);font-size:13px} .gr-star.gr-wk{color:var(--warn-ink)} .gr-st{white-space:nowrap} .gr-tr{font-size:12.5px;white-space:nowrap;color:var(--ink2)} .gr-tr.gr-dn{color:var(--warn-ink);font-weight:650} .gr-num{text-align:right} .gr-tb tbody td.gr-num{text-align:right;font-weight:600} .gr-pt{white-space:nowrap;color:var(--ink2);cursor:help} .gr-ig{display:block;font-size:11.5px;color:var(--mute)} .gr-cm{min-width:160px;max-width:300px;font-size:13px;color:var(--ink);overflow-wrap:anywhere} .gr-h{display:inline-flex;align-items:flex-end;gap:2px;height:20px} .gr-h i{display:block;width:5px;border-radius:1px;background:var(--line2)} .gr-h i.gr-h0{background:transparent;border-bottom:1px dotted var(--line2)} .gr-h i.gr-hl{background:var(--ink2)} .gr-h i.gr-hw.gr-hl{background:var(--warn-ink)} .gr-ar{font-weight:650;white-space:nowrap} .gr-e{padding:24px 10px;text-align:center;color:var(--mute)} .gr-foot{margin:0;font-size:12px;color:var(--mute);line-height:1.55} /* 거래처 한 장 띠 */ .gr-c3{padding:10px 16px;margin:12px 0 0} .gr-c3[hidden]{display:none} .gr-c3h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--ink)} .gr-c3l{font-size:12.5px;font-weight:700;color:var(--ink2)} .gr-c3s{font-variant-numeric:tabular-nums;cursor:help} .gr-c3h .btn{margin-left:auto} @media (max-width:1100px){ .gr-tb .gr-hc{display:none} } @media (max-width:640px){ /* 휴대폰: 표 머리 숨기고 줄마다 카드 — 상호·★ 한 줄 + 코멘트 + 작은 칸들 */ #view-grade .gr-q{max-width:none;flex-basis:100%} .content .seg.gr-seg{display:flex;flex-wrap:wrap} .gr-chip{padding:4px 10px} .gr-tb thead{display:none} .gr-tb,.gr-tb tbody{display:block} .gr-tb tbody>tr.gr-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:12px 14px;border-bottom:1px solid var(--line)} .gr-tb tbody>tr.gr-r>th,.gr-tb tbody>tr.gr-r>td{display:block;padding:0;border:0;background:none;min-width:0} .gr-tb tbody>tr.gr-r>th{grid-row:1;grid-column:1} .gr-tb tbody>tr.gr-r>td.gr-st{grid-row:1;grid-column:2;text-align:right} .gr-tb tbody>tr.gr-r>td.gr-cm{grid-column:1/-1;max-width:none;min-width:0} .gr-tb tbody>tr.gr-r>td[data-l="담당"],.gr-tb tbody>tr.gr-r>td[data-l="지난달"],.gr-tb tbody>tr.gr-r>td[data-l="점수"],.gr-tb tbody>tr.gr-r>td[data-l="지금 미수"]{ display:inline-flex;gap:6px;font-size:12.5px;color:var(--ink2);grid-column:auto;text-align:left} .gr-tb tbody>tr.gr-r>td[data-l="점수"]::before,.gr-tb tbody>tr.gr-r>td[data-l="지금 미수"]::before{content:attr(data-l);color:var(--mute)} .gr-tb tbody>tr.gr-r>td.gr-parts,.gr-tb tbody>tr.gr-r>td.gr-hc{display:none} .gr-tb tbody td.gr-num{text-align:left} .gr-e{display:block} .gr-c3h .btn{margin-left:0} }