:root{
  color-scheme: light only;
  --navy:#1F4E79; --navy2:#2E5C9E; --bg:#F4F6FA; --line:#E3E8F0;
  --ink:#1E2430; --sub:#6B7484; --ok:#1E8E5A; --warn:#C77700; --bad:#C0392B;
  --chip:#EDF2FA;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif; background:var(--bg); color:var(--ink); font-size:13px;}
a{color:var(--navy2);}

/* ---- 앱 셸 ---- */
.shell{display:flex; min-height:100vh;}
.side{width:216px; background:var(--navy); color:#fff; padding:18px 0; flex-shrink:0;}
.logo{padding:0 20px 16px; font-size:17px; font-weight:bold; letter-spacing:.5px; border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:12px;}
.logo a{color:#fff; text-decoration:none;}
.logo span{color:#9CC3F5; font-size:11px; display:block; font-weight:normal; margin-top:3px;}
.mgroup{padding:10px 20px 4px; font-size:11px; color:#9CB6DC; letter-spacing:1px;}
.mi{display:flex; align-items:center; gap:8px; padding:9px 20px; color:#DCE7F7; font-size:13px; text-decoration:none;}
.mi:hover{background:rgba(255,255,255,.08);}
.mi.on{background:#fff; color:var(--navy); font-weight:bold; border-radius:0 20px 20px 0; margin-right:12px;}
.mi .soon{margin-left:auto; font-size:10px; background:rgba(255,255,255,.18); padding:2px 6px; border-radius:8px; color:#BCD2EF;}
.main{flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{background:#fff; border-bottom:1px solid var(--line); padding:12px 22px; display:flex; align-items:center; gap:12px;}
.crumb{color:var(--sub); font-size:12px;}
.crumb b{color:var(--ink); font-size:15px; display:block; margin-top:2px;}
.me{margin-left:auto; display:flex; align-items:center; gap:10px;}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--navy2); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold;}
.me .who{text-align:right;}
.me .who b{display:block; font-size:12px;}
.me .who span{font-size:11px; color:var(--sub);}
.me a.out{font-size:11px; color:var(--sub); text-decoration:none; border:1px solid var(--line); padding:5px 10px; border-radius:6px; background:#fff;}
.content{padding:20px 22px; overflow:auto;}

/* ---- 카드/테이블 ---- */
.card{background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:16px; overflow:hidden;}
.card h3{font-size:13px; padding:12px 16px; border-bottom:1px solid var(--line); background:#FBFCFE; display:flex; align-items:center; gap:8px;}
.card h3 .cnt{background:var(--chip); color:var(--navy2); font-size:11px; padding:2px 8px; border-radius:10px;}
.toolbar{display:flex; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); align-items:center; flex-wrap:wrap;}
.search{border:1px solid var(--line); border-radius:6px; padding:7px 10px; font-size:12px; width:200px;}
select.filter, .toolbar select{border:1px solid var(--line); border-radius:6px; padding:7px 8px; font-size:12px; background:#fff; font-family:inherit;}
.sp{flex:1;}
.btn{border:0; border-radius:6px; padding:8px 14px; font-size:12px; cursor:pointer; font-family:inherit; text-decoration:none; display:inline-block;}
.btn.pri{background:var(--navy2); color:#fff;}
.btn.ghost{background:#fff; border:1px solid var(--line); color:var(--ink);}
.btn.ok{background:var(--ok); color:#fff;}
.btn.bad{background:#fff; border:1px solid #E7B4AD; color:var(--bad);}
.btn.sm{padding:5px 10px; font-size:11px;}
table{width:100%; border-collapse:collapse; font-size:12px;}
th{background:#F7F9FC; color:var(--sub); font-weight:600; text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
td{padding:9px 12px; border-bottom:1px solid #EEF1F6; vertical-align:middle;}
tr:last-child td{border-bottom:0;}
tbody tr:hover td{background:#FAFCFF;}
.tag{display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600;}
.t-wait{background:#FFF3E0; color:var(--warn);}
.t-ok{background:#E6F4EC; color:var(--ok);}
.t-off{background:#F0F1F4; color:#7A8394;}
.t-dept{background:var(--chip); color:var(--navy2);}
.t-contact{background:#FDEBD0; color:#B9770E;}
.t-hold{background:#F0F1F4; color:#7A8394;}
.t-bad{background:#FDECEA; color:var(--bad);}
.muted{color:var(--sub); font-size:11px;}
.foot{padding:10px 16px; display:flex; align-items:center; gap:6px; color:var(--sub); font-size:11px;}
.pg{margin-left:auto; display:flex; gap:4px;}
.pg a, .pg span{border:1px solid var(--line); border-radius:5px; padding:3px 9px; text-decoration:none; color:var(--ink);}
.pg .cur{background:var(--navy2); color:#fff; border-color:var(--navy2);}
.legend{display:flex; gap:14px; padding:10px 16px; font-size:11px; color:var(--sub); border-top:1px solid var(--line); background:#FBFCFE; flex-wrap:wrap;}
.kpis{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.kpi{flex:1; min-width:150px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px;}
.kpi .n{font-size:22px; font-weight:bold; color:var(--navy);}
.kpi .n.warn{color:var(--warn);}
.kpi .l{font-size:11px; color:var(--sub); margin-top:2px;}
.banner{background:#FFF7E8; border:1px solid #F2DCB3; color:#8A5A00; border-radius:8px; padding:10px 14px; font-size:12px; margin-bottom:16px;}
.flash{border-radius:8px; padding:10px 14px; font-size:12px; margin-bottom:16px;}
.flash.ok{background:#E6F4EC; color:#1E8E5A; border:1px solid #BCE3CE;}
.flash.err{background:#FDECEA; color:#C0392B; border:1px solid #F2C4BE;}
.subtabs{display:flex; border-bottom:1px solid var(--line); background:#fff; padding:0 22px;}
.subtab{padding:11px 16px; font-size:13px; color:var(--sub); text-decoration:none; border-bottom:2px solid transparent;}
.subtab.on{color:var(--navy2); font-weight:bold; border-bottom-color:var(--navy2);}

/* ---- 폼 ---- */
.formgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px; padding:16px;}
.formgrid .full{grid-column:1/-1;}
.fld label{display:block; font-size:12px; font-weight:600; margin-bottom:5px;}
.fld label em{color:var(--bad); font-style:normal;}
.fld input, .fld select, .fld textarea{width:100%; border:1px solid var(--line); border-radius:7px; padding:9px 11px; font-size:13px; font-family:inherit;}
.fld textarea{min-height:70px; resize:vertical;}
.fld .hint{font-size:11px; color:var(--sub); margin-top:4px;}
.formfoot{padding:0 16px 16px; display:flex; gap:8px;}

/* ---- 인증 화면 ---- */
.authwrap{min-height:100vh; background:linear-gradient(135deg,#16345C 0%,#2E5C9E 100%); display:flex; align-items:center; justify-content:center; padding:40px;}
.authcard{background:#fff; border-radius:14px; width:420px; padding:34px 36px; box-shadow:0 14px 40px rgba(0,0,0,.25);}
.authcard h2{color:var(--navy); font-size:20px; margin-bottom:4px;}
.authcard .sub2{color:var(--sub); font-size:12px; margin-bottom:22px;}
.authcard .fld{margin-bottom:14px;}
.wide{width:100%; padding:12px; font-size:14px; margin-top:6px;}
.authlink{text-align:center; margin-top:14px; font-size:12px; color:var(--sub);}
.authlink a{font-weight:600; text-decoration:none;}
.authcard .banner{margin:18px 0 0;}

/* ---- 히스토리 ---- */
.btn.hist{background:#F0E9FB; color:#6B3FA0; border:1px solid #DCCBF2;}
.summary{display:flex; gap:20px; padding:14px 16px; flex-wrap:wrap; align-items:center;}
.summary .item b{display:block; font-size:11px; color:var(--sub); font-weight:600; margin-bottom:3px;}
.histform{display:flex; gap:10px; padding:14px 16px; align-items:flex-start; flex-wrap:wrap;}
.histform input[type=date]{border:1px solid var(--line); border-radius:7px; padding:9px 10px; font-size:13px; font-family:inherit;}
.histform textarea{flex:1; min-width:240px; border:1px solid var(--line); border-radius:7px; padding:9px 11px; font-size:13px; font-family:inherit; min-height:60px; resize:vertical;}
.timeline{padding:6px 16px 14px;}
.titem{display:flex; gap:14px; padding:13px 0; border-bottom:1px dashed #E6EAF2;}
.titem:last-child{border-bottom:0;}
.tdate{width:92px; flex-shrink:0; text-align:center;}
.tdate .d{font-weight:bold; color:var(--navy); font-size:13px;}
.tdate .dot{width:9px; height:9px; background:var(--navy2); border-radius:50%; margin:6px auto 0;}
.tbody2{flex:1; min-width:0;}
.tbody2 .memo{font-size:13px; line-height:1.55;}
.tbody2 .meta{margin-top:5px; font-size:11px; color:var(--sub);}
.tacts{flex-shrink:0; display:flex; gap:4px; align-items:flex-start;}
.editing{background:#F6F9FF; border:1px solid #CCDCF5; border-radius:8px; padding:10px; margin:2px 0 6px;}
@media (max-width: 900px){
  .titem{flex-wrap:wrap;}
  .tdate{width:auto; display:flex; gap:6px; align-items:center;}
  .tdate .dot{margin:0;}
  .tacts{width:100%; justify-content:flex-end;}
  .histform textarea{min-width:100%;}
}

/* ---- 국가 선택 칩 ---- */
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{border:1px solid var(--line); border-radius:16px; padding:7px 13px; font-size:12px; cursor:pointer; background:#fff; user-select:none;}
.chip input{display:none;}
.chip.on{background:var(--navy2); color:#fff; border-color:var(--navy2); font-weight:600;}

/* ---- 테이블 가로 스크롤 래퍼 ---- */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tw table{min-width:640px;}

/* ---- 권한 매트릭스 ---- */
.pm td, .pm th{text-align:center;}
.pm td:first-child, .pm th:first-child{text-align:left;}
.pm select{border:1px solid var(--line); border-radius:5px; padding:4px 6px; font-size:11px; font-family:inherit; background:#fff;}
.pm .lock{color:#AEB6C4; font-size:11px;}

/* ---- 모바일 메뉴 토글 버튼 (데스크톱에서는 숨김) ---- */
.menu-btn{display:none; border:1px solid var(--line); background:#fff; border-radius:8px; width:40px; height:40px; font-size:18px; cursor:pointer; flex-shrink:0; align-items:center; justify-content:center;}
.backdrop{display:none;}

/* ==================== 모바일 (≤900px) ==================== */
@media (max-width: 900px){
  body{font-size:14px;}
  .shell{display:block;}
  /* 사이드바 → 슬라이드 서랍 */
  .side{position:fixed; top:0; left:0; bottom:0; width:240px; z-index:1000;
        transform:translateX(-100%); transition:transform .2s ease; overflow-y:auto;}
  .shell.nav-open .side{transform:translateX(0);}
  .backdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999;}
  .shell.nav-open .backdrop{display:block;}
  .mi.on{border-radius:0; margin-right:0;}
  .menu-btn{display:flex;}
  .main{min-height:100vh;}
  .topbar{position:sticky; top:0; z-index:500; padding:10px 14px;}
  .crumb b{font-size:14px;}
  .me .who{display:none;}          /* 이름은 서랍/공간 절약을 위해 숨김 */
  .content{padding:14px 12px;}
  .subtabs{padding:0 12px; overflow-x:auto; white-space:nowrap;}
  .subtab{padding:12px 12px;}
  /* KPI 2열 */
  .kpis{gap:8px;}
  .kpi{min-width:calc(50% - 8px); padding:12px 14px;}
  .kpi .n{font-size:19px;}
  /* 툴바·버튼 터치 크기 */
  .toolbar{padding:10px 12px; gap:6px;}
  .search{width:100%; padding:11px 12px; font-size:14px;}
  select.filter, .toolbar select{flex:1; min-width:100px; padding:11px 8px; font-size:13px;}
  .btn{padding:11px 14px; font-size:13px;}
  .btn.sm{padding:9px 12px; font-size:12px;}
  .toolbar .btn.pri{width:100%; text-align:center;}
  /* 표: 좌우 스와이프 */
  th, td{padding:10px 10px; font-size:12px;}
  /* 입력 폼 1열 */
  .formgrid{grid-template-columns:1fr; padding:12px;}
  .fld input, .fld select, .fld textarea{padding:12px; font-size:15px;}  /* iOS 확대 방지(≥16px 권장이나 15px+viewport로 처리) */
  .formfoot{padding:0 12px 12px;}
  .formfoot .btn{flex:1; text-align:center;}
  /* 인증 화면 */
  .authwrap{padding:16px; align-items:flex-start; padding-top:8vh;}
  .authcard{width:100%; padding:26px 22px;}
  .legend{gap:8px; padding:10px 12px;}
  .foot{flex-wrap:wrap;}
}
@media (max-width: 480px){
  .kpi{min-width:calc(50% - 8px);}
  .crumb{display:none;}            /* 초소형 화면: 상단은 메뉴버튼+로그아웃만 */
  .topbar .pagetitle-mobile{display:block; font-size:15px; font-weight:bold;}
}
.pagetitle-mobile{display:none;}