*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",Arial,sans-serif;background:#f3f6fb;color:#0f172a;font-size:14px}
.app{display:flex;min-height:100vh}
.sidebar{width:196px;background:#142033;color:#dbeafe;position:fixed;top:0;bottom:0;left:0;padding:20px 14px;overflow-y:auto;z-index:50}
.sidebar.client{background:#17322b}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}
.brand-mark{width:42px;height:42px;background:#2f6df6;color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex:0 0 auto}
.brand strong{display:block;color:#fff;font-size:18px;word-break:keep-all}
.brand span{display:block;font-size:12px;color:#9fb2d0;margin-top:4px}
.nav p{margin:24px 0 8px;color:#8fa3c1;font-size:12px;font-weight:700}
.nav a{display:block;color:#e5eefc;text-decoration:none;padding:6px 12px;border-radius:8px;font-weight:700;margin-bottom:3px;word-break:keep-all}
.nav a:hover,.nav a.active{background:#2f6df6;color:#fff}
.main{margin-left:196px;width:calc(100% - 196px);min-width:0}
.topbar{min-height:84px;background:#fff;border-bottom:1px solid #dce3ee;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:16px}
.topbar h1{margin:0;font-size:26px;word-break:keep-all}
.topbar p{margin:8px 0 0;color:#64748b;line-height:1.5;word-break:keep-all}
.top-title{min-width:0}
.top-actions{display:flex;gap:12px;align-items:center;white-space:nowrap}
.content{padding:28px 32px;min-width:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:26px}
.stats-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-card{background:#fff;border:1px solid #dce3ee;border-radius:14px;padding:22px;min-width:0}
.stat-card p{margin:0 0 12px;color:#475569;font-weight:700;word-break:keep-all}
.stat-card strong{font-size:28px;line-height:1.2}
.stat-card span{color:#2563eb;margin-left:6px;line-height:1.5}
.stat-card.danger span,.stat-card.danger strong{color:#dc2626}
.panel{background:#fff;border:1px solid #dce3ee;border-radius:14px;padding:22px;margin-bottom:24px;min-width:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.panel h2{margin:0 0 16px;font-size:21px;word-break:keep-all}
.panel-sub{margin-top:24px}
.table{width:100%;border-collapse:collapse;min-width:760px}
.table th{background:#f8fafc;color:#334155;text-align:left;font-weight:800}
.table th,.table td{border-bottom:1px solid #e5eaf2;padding:15px 14px;vertical-align:middle;word-break:keep-all}
.table a{color:#1d4ed8;font-weight:700}
.disabled-row{opacity:.45;background:#f8fafc}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.badge.blue{background:#dbeafe;color:#1d4ed8}
.badge.green{background:#dcfce7;color:#15803d}
.badge.orange{background:#ffedd5;color:#c2410c}
.badge.gray{background:#e5e7eb;color:#374151}
.badge.red{background:#fee2e2;color:#b91c1c}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #cbd5e1;border-radius:8px;padding:10px 14px;text-decoration:none;background:#fff;color:#0f172a;font-weight:800;cursor:pointer;white-space:nowrap}
.btn.primary{background:#2f6df6;border-color:#2f6df6;color:#fff}
.btn.outline{border-color:#2f6df6;color:#2f6df6}
.btn.small{padding:8px 12px;font-size:13px}
.filter-box{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.filter-box input,.filter-box select{height:40px;border:1px solid #cbd5e1;border-radius:8px;padding:0 12px;background:#fff}
.filter-box input{min-width:260px}
.form-panel{max-width:none;width:100%}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid label{display:flex;flex-direction:column;gap:8px;font-weight:800;color:#334155;min-width:0}
.form-grid label.wide,.form-grid > .wide{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{border:1px solid #cbd5e1;border-radius:8px;padding:12px;min-height:42px;font:inherit;width:100%;min-width:0}
.form-grid textarea{height:110px}
.form-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.executive-block{display:block;width:100%;clear:both;margin-top:20px;padding-top:18px;border-top:1px solid #e5eaf2;box-sizing:border-box}
.executive-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.executive-row{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:12px;margin-bottom:12px;width:100%;box-sizing:border-box}
.executive-row > label{display:flex;flex-direction:column;gap:8px;font-weight:800;color:#334155;min-width:0;margin:0}
.executive-row > label:nth-child(1){flex:1.4 1 0}
.executive-row > label:nth-child(2){flex:1 1 0}
.executive-row > label:nth-child(3){flex:1 1 0}
.executive-row input,.executive-row select{border:1px solid #cbd5e1;border-radius:8px;padding:12px;min-height:42px;font:inherit;width:100%;min-width:0;box-sizing:border-box}
.executive-actions{display:flex;align-items:flex-end;flex:0 0 auto;min-width:72px;min-height:42px}
.executive-actions .btn{white-space:nowrap;padding:10px 14px;height:42px;box-sizing:border-box}
.notice{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;padding:14px 16px;border-radius:10px;margin-bottom:18px;font-weight:700;line-height:1.6;word-break:keep-all}
.guide-table{width:100%;border-collapse:collapse;margin-bottom:18px;min-width:560px}
.guide-table th,.guide-table td{border:1px solid #e5eaf2;padding:13px;text-align:left;word-break:keep-all}
.guide-table th{background:#f8fafc;width:150px}
.upload-box{border:1px dashed #94a3b8;border-radius:14px;padding:30px;display:flex;gap:12px;align-items:center;background:#f8fafc;flex-wrap:wrap}
.sample-box{border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;padding:34px;text-align:center;color:#64748b;font-weight:800;min-height:220px;display:flex;align-items:center;justify-content:center}
.login-body{min-height:100vh;background:linear-gradient(135deg,#142033,#233b63);display:flex;align-items:center;justify-content:center}
.login-wrap{width:100%;max-width:460px;padding:24px}
.login-panel{background:#fff;border-radius:20px;padding:34px;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.login-brand{display:flex;gap:14px;align-items:center;margin-bottom:26px}
.login-brand h1{margin:0;font-size:26px}
.login-brand p{margin:4px 0 0;color:#64748b}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f1f5f9;padding:6px;border-radius:12px;margin-bottom:20px}
.login-tab{border:0;border-radius:9px;padding:12px;font-weight:900;background:transparent;cursor:pointer}
.login-tab.active{background:#2f6df6;color:#fff}
.login-form label{display:block;font-weight:800;margin:14px 0 8px}
.login-form input{width:100%;height:46px;border:1px solid #cbd5e1;border-radius:9px;padding:0 12px}
.login-form button{width:100%;height:48px;border:0;border-radius:10px;background:#2f6df6;color:#fff;font-weight:900;margin-top:20px;cursor:pointer}
.login-help{margin-top:18px;color:#64748b;font-size:13px;line-height:1.5}
.page-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.kpi-note{font-size:12px;color:#64748b;margin-top:8px;line-height:1.5}
.process-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.process-list li{background:#f8fafc;border:1px solid #e5eaf2;border-radius:12px;padding:14px;font-weight:800;color:#334155;word-break:keep-all;line-height:1.45}
.process-list span{display:block;color:#2563eb;font-size:12px;margin-bottom:6px}
.file-chip{display:inline-flex;border:1px solid #dbe4f0;background:#f8fafc;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;color:#475569;white-space:nowrap}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.result-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.muted{color:#64748b}
.login-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.client-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mobile-menu-btn{display:none;border:0;background:#142033;color:#fff;border-radius:10px;width:42px;height:42px;font-size:24px;font-weight:900;line-height:1;cursor:pointer;flex:0 0 auto}
.mobile-dim{display:none}
@media(max-width:1200px){
.stats-grid,.stats-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.process-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.result-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
body{font-size:14px}
.app{display:block;min-height:100vh}
.sidebar{
position:fixed;
top:0;
left:0;
bottom:0;
width:82%;
max-width:320px;
transform:translateX(-105%);
transition:transform .22s ease;
box-shadow:18px 0 40px rgba(15,23,42,.25);
padding:18px 16px 28px;
}
body.menu-open .sidebar{transform:translateX(0)}
.mobile-dim{
display:none;
position:fixed;
inset:0;
background:rgba(15,23,42,.45);
z-index:40;
}
body.menu-open .mobile-dim{display:block}
.brand{margin-bottom:18px}
.brand-mark{width:38px;height:38px;border-radius:10px;font-size:18px}
.brand strong{font-size:17px}
.nav p{margin:18px 0 6px}
.nav a{padding:11px 12px;font-size:14px}
.main{margin-left:0;width:100%;min-width:0}
.topbar{
min-height:auto;
padding:12px 14px;
align-items:flex-start;
gap:10px;
position:sticky;
top:0;
z-index:30;
}
.mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center}
.top-title{flex:1;min-width:0}
.topbar h1{font-size:20px;line-height:1.25}
.topbar p{font-size:12px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.top-actions{gap:6px;font-size:12px}
.top-actions span{display:none}
.top-actions .btn{padding:8px 10px;font-size:12px;border-radius:8px}
.content{padding:14px}
.stats-grid,.stats-grid.three,.stats-grid.four,.client-summary{grid-template-columns:1fr;gap:12px;margin-bottom:16px}
.stat-card{padding:18px;border-radius:14px}
.stat-card strong{font-size:28px}
.stat-card span{display:inline;margin-left:4px}
.panel{padding:16px;border-radius:14px;margin-bottom:16px}
.panel-head{align-items:flex-start;flex-direction:column}
.panel h2{font-size:19px;margin-bottom:12px}
.page-toolbar{align-items:stretch}
.page-toolbar .btn{width:100%}
.filter-box{display:grid;grid-template-columns:1fr;gap:8px}
.filter-box input,.filter-box select,.filter-box .btn{width:100%;min-width:0}
.form-grid{grid-template-columns:1fr;gap:12px}
.form-grid label.wide{grid-column:auto}
.executive-row{flex-wrap:nowrap;overflow-x:auto}
.executive-row > label{min-width:140px}
.form-actions{display:grid;grid-template-columns:1fr;gap:8px}
.form-actions .btn{width:100%}
.upload-box{display:block;padding:18px}
.upload-box input[type="file"]{width:100%;margin-bottom:12px}
.notice{font-size:13px}
.process-list{grid-template-columns:1fr}
.table-wrap{margin:0 -2px;padding-bottom:4px}
.table{min-width:720px}
.table th,.table td{padding:12px 10px;font-size:13px}
.guide-table{min-width:520px}
.result-grid{grid-template-columns:1fr;gap:12px}
.sample-box{min-height:160px;padding:20px}
.login-wrap{padding:18px}
.login-panel{padding:24px;border-radius:18px}
.login-brand h1{font-size:22px}
}
@media(max-width:420px){
.sidebar{width:86%;max-width:300px}
.topbar{padding:10px 12px}
.topbar h1{font-size:18px}
.content{padding:12px}
.stat-card strong{font-size:26px}
.panel{padding:14px}
.login-choice{grid-template-columns:1fr}
}
/* 수신처 상세 팝업 */
.addr-modal{
position:fixed;inset:0;z-index:80;display:none;
align-items:center;justify-content:center;padding:16px;
}
.addr-modal.is-open{display:flex}
.addr-modal-dim{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.addr-modal-panel{
position:relative;z-index:1;width:min(640px,100%);
max-height:min(86vh,720px);overflow:auto;
background:#fff;border-radius:14px;border:1px solid #dce3ee;
box-shadow:0 18px 50px rgba(15,23,42,.22);padding:22px;
}
.addr-modal-panel h3{margin:0 0 14px;font-size:18px}
.addr-modal-close{
position:absolute;top:12px;right:12px;
border:0;background:#eef2f7;border-radius:8px;
width:34px;height:34px;cursor:pointer;font-size:18px;line-height:1;
}
.addr-modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.table .btn-link{border:0;background:none;color:#1d4ed8;cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.table .btn-link:hover{color:#1e3a8a}
/* 그룹 우편 미리보기 — 포스트피아 PDF(DK6) 기준 · 값/고정 구분 */
.mail-preview-panel{width:min(980px,96vw);max-height:min(94vh,1100px);padding:18px 22px 20px}
.mail-preview-legend{
display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
margin:0 0 12px;padding:10px 12px;border-radius:8px;
background:#f8fafc;border:1px solid #e2e8f0;font-size:12px;color:#475569;
}
.mail-preview-legend .lg{display:inline-flex;align-items:center;gap:6px}
.mail-preview-legend i{
display:inline-block;width:14px;height:14px;border-radius:3px;flex:0 0 auto;
}
.mail-preview-legend .lg-val i{background:#fef3c7;border:1px solid #f59e0b}
.mail-preview-legend .lg-fix i{background:#fff;border:1px solid #cbd5e1}
.mail-preview-legend .lg-sys i{background:#f1f5f9;border:1px dashed #94a3b8}
.mail-preview-meta{
margin:0 0 12px;padding:8px 12px;border-radius:8px;
background:#eff6ff;border:1px solid #bfdbfe;font-size:12.5px;color:#1e40af;
}
.mail-preview-body{display:flex;flex-direction:column;gap:20px;background:#e8edf3;margin:0 -8px;padding:14px 8px;border-radius:8px}
.mail-a4{
width:100%;max-width:720px;margin:0 auto;
min-height:980px;height:auto;
background:#fff;color:#111;
box-shadow:0 2px 10px rgba(15,23,42,.12);
border:1px solid #c5cdd8;
position:relative;overflow:visible;
font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
font-size:13px;line-height:1.5;
box-sizing:border-box;
}
.mail-a4-num{
position:absolute;top:8px;right:12px;z-index:2;
font-size:11px;color:#94a3b8;font-weight:700;
}
.mail-fix{color:#1e293b}
.mail-val{
display:inline;color:#0f172a;background:#fef3c7;
border-bottom:2px solid #f59e0b;border-radius:2px;
padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.mail-sys{
display:inline;color:#64748b;background:#f1f5f9;
border:1px dashed #94a3b8;border-radius:3px;padding:0 4px;font-size:11.5px;
}
.mail-var{
display:inline;color:#b45309;background:#fffbeb;
border:1px dashed #f59e0b;border-radius:3px;
padding:0 3px;font-size:11px;font-family:ui-monospace,Menlo,monospace;
}
/* 1장 봉투 */
.mail-p1{padding:36px 40px 28px;min-height:980px}
.mail-p1-sender{max-width:58%}
.mail-p1-sender .line{margin:0 0 3px}
.mail-p1-sender .who{margin-top:10px;font-size:15px;font-weight:700}
.mail-p1-sender .zip{margin-top:6px;letter-spacing:.04em}
.mail-p1-sender .tel{margin-top:4px;color:#475569;font-size:12.5px}
.mail-p1-nosend{
display:inline-block;margin-top:10px;padding:3px 10px;
border:1.5px solid #334155;font-size:12px;font-weight:700;letter-spacing:.04em;
}
.mail-p1-recip-wrap{
margin:72px 0 0 38%;
text-align:left;
}
.mail-p1-tag{
display:inline-block;margin-bottom:10px;padding:4px 12px;
border:1.5px solid #1e40af;border-radius:4px;
color:#1e40af;font-size:12.5px;font-weight:800;
}
.mail-p1-office{margin:0 0 12px;font-size:12px}
.mail-p1-recip .line{margin:0 0 3px}
.mail-p1-recip .who{margin-top:12px;font-size:16px;font-weight:800}
.mail-p1-recip .zip{margin-top:8px;letter-spacing:.06em;font-size:15px;font-weight:700}
.mail-p1-route{margin-top:14px;font-size:12px}
.mail-p1-foot{
margin-top:48px;padding-top:10px;border-top:1px solid #e2e8f0;
font-size:11px;color:#64748b;
}
/* 2장 안내문 */
.mail-p2{padding:40px 44px 36px}
.mail-p2-title{
text-align:center;margin:8px auto 22px;max-width:280px;
padding:10px 16px;border:2px solid #3b82f6;border-radius:4px;
font-size:18px;font-weight:800;color:#1e3a8a;letter-spacing:.02em;
}
.mail-p2-recv{margin:0 0 14px;font-size:14px}
.mail-p2-greet{margin:0 0 20px;font-size:12.5px;word-break:keep-all}
.mail-sec{margin:0 0 18px}
.mail-sec-h{margin:0 0 8px;font-size:14px;font-weight:800;color:#1d4ed8}
.mail-sec-b{margin:0;font-size:12.5px;word-break:keep-all;color:#334155}
.mail-officer{
width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:13px;
}
.mail-officer th{
background:#f3efe6;border:1px solid #d6d0c4;padding:8px 10px;font-weight:800;text-align:center;
}
.mail-officer td{border:1px solid #e2e8f0;padding:8px 10px;text-align:center}
.mail-officer td:first-child{text-align:left;width:28%}
.mail-officer td:nth-child(2){width:36%}
.mail-note{margin:6px 0 0;font-size:11.5px;color:#475569}
.mail-docs{margin:6px 0 0;padding-left:1.2em;font-size:12.5px;color:#334155}
.mail-docs li{margin:0 0 4px}
.mail-p2-logo{margin-top:28px;text-align:right;font-size:13px;font-weight:700;color:#64748b}
/* 3장 수수료·문의 */
.mail-p3{padding:36px 44px 32px}
.mail-fee{
width:100%;border-collapse:collapse;margin:10px 0 12px;font-size:13px;
}
.mail-fee th{
background:#f3efe6;border:1px solid #d6d0c4;padding:8px 10px;font-weight:800;text-align:center;
}
.mail-fee td{border:1px solid #e2e8f0;padding:8px 10px}
.mail-fee td.amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mail-fee tr.total td{font-weight:800;background:#fafafa}
.mail-p3-copy{margin:0 0 10px;font-size:12.5px;word-break:keep-all}
.mail-p3-inquiry{margin:14px 0 0;font-size:12.5px;line-height:1.65}
.mail-p3-disclaimer{
margin:20px 0 0;padding:12px 14px;border-radius:6px;
background:#f1f5f9;border:1px solid #e2e8f0;font-size:11.5px;color:#475569;word-break:keep-all;
}
.mail-p3-bottom{
margin-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
font-size:12px;color:#334155;
}
/* 4장 템플릿 동봉 */
.mail-p4{padding:36px 44px}
.mail-p4-box{
border:1px solid #cbd5e1;border-radius:4px;padding:18px 20px;margin:0 0 16px;
}
.mail-p4-box h4{margin:0 0 10px;font-size:14px}
.mail-p4-box ul{margin:0;padding-left:1.1em;font-size:12.5px;color:#334155}
.mail-p4-box li{margin:0 0 4px}
.mail-p4-note{
margin:0 0 14px;padding:10px 12px;border-radius:6px;
background:#f8fafc;border:1px dashed #94a3b8;font-size:12px;color:#475569;
}
@media(max-width:720px){
.mail-preview-panel{width:min(100%,96vw);padding:14px}
.mail-a4{max-width:100%;min-height:0}
.mail-p1-recip-wrap{margin-left:0;margin-top:40px}
}