@charset 'utf-8';

:root {
    --brand:#50565c; 
    --brand-600:#4e555c;
    --bg:#f6f7fb; 
    --card:#fff; 
    --text:#555; 
    --text-red:#A23736;
    --text-blue:#121D50;
    --text-green:#A2AC70;
    --muted:#6b7280; 
    --border:#50565c;
    --border-002:#e5e7eb;
    --radius:8px;
    --line: #eee;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
    margin:0;
    font-family:system-ui,-apple-system, Segoe UI, Roboto, Noto Sans KR, Arial, Apple SD Gothic Neo, sans-serif;
    background:var(--bg);
    color:var(--text)
}

h1{margin:0;font-size:20px}

label{display:block;font-size:13px;color:var(--muted);}

input[type="text"],input[type="password"],input[type="date"],
input[type="month"], input[type="number"] {
  width:100%;
  padding:8px 8px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  font-size:14px
}
select{
  padding:8px 8px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  font-size:14px
}

/* 레이아웃 */
.app{display:grid;grid-template-columns:200px 1fr;min-height:100dvh}
@media (max-width:1024px){.app{grid-template-columns:80px 1fr}}

/* 사이드바 */
.sidebar{position:sticky;top:0;height:100dvh;background:linear-gradient(180deg,var(--brand),var(--brand-600));color:#fff;padding:16px 12px}
.logo{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px}
.logo svg{width:28px;height:28px}
.logo strong{font-size:18px;line-height:1}
@media (max-width:1024px){.logo strong{display:none}}

.nav{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.nav a{color:#fff;text-decoration:none}
.nav a{appearance:none;border:0;background:transparent;color:#fff;text-align:left;display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border-radius:12px;font-size:16px;line-height:1.2;cursor:default}
.nav a:hover{background:rgba(255,255,255,.08)}
.nav a.active{background:#fff;color:var(--brand)}
.nav svg{width:22px;height:22px;flex:0 0 22px}
.nav span{white-space:nowrap}
@media (max-width:1024px){.nav span{display:none}}

.sidebar .bottom{margin-top:auto;display:grid;gap:6px;color:#e5e7eb}

/* 상단바 */
.topbar{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--border-002);display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.topbar .title{display:flex;align-items:center;gap:10px;font-weight:700}
.topbar .actions{display:flex;gap:8px}
.btn{display:inline-block;text-decoration:none;border:1px solid var(--border);background:#fff;border-radius:var(--radius);padding:6px 8px;font-size:14px;color:#1f2937;cursor:pointer}
.btn:hover{background:#f3f4f6;color:#1f2937}

.btn.setup, .btn.add{background-color:#4F6D83;color:#eee}

/* 메인 */
main{padding:16px;display:grid;} /*gap:16px*/

.toolbar {margin-bottom:10px;}

h1{margin:0 0 12px}
h2{font-size:1.0em}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;font-size:12px}
th{background:#59748B;color:#fff;text-align:center}
td{color:#555}

tr.list td {text-align: right;}
tr.list td.cnt {text-align: center;}
tr.list td.lf {text-align: left;}

.table-box {
  margin-bottom:20px; 
  border: 1px solid #59748B; 
  border-radius: 6px; 
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.table-box table {border-collapse: collapse; width: max-content;}
.table-box table tr:nth-child(odd) {background-color: #f5f5f5;}
.table-box table tr.sumrow{background:#A3C5C3;font-weight:600;}
.table-box th,.table-box td {border-bottom: 1px solid #59748B;padding: 10px 8px;}
.table-box tr:last-child td {border-bottom: none;}

.grid{ display:grid; gap:12px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-5{ grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid-6{ grid-template-columns: repeat(6, minmax(0,1fr)); }

textarea.note {
  width: 100%;
  border: 1px solid #efefef;
  border-radius: 8px;
}


/* 탭메뉴 */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border-002); margin:0 0 12px; }
.tabs [role="tab"]{
  appearance:none; border:0; background:none; cursor:pointer;
  padding:10px 14px; border-radius:10px 10px 0 0; font-size:14px; color:#475569;
}
.tabs [role="tab"][aria-selected="true"]{
  background:#fff; color:#111827; border:1px solid var(--border); border-bottom-color:#fff;
  box-shadow:0 -1px 0 #fff inset;
}
.tabs a{ text-decoration:none; color:inherit; display:inline-block; }
.tabs-wrap{ position:sticky; top:0; z-index:50; background:var(--bg); padding-top:8px; }
@media (prefers-color-scheme: dark){
  .tabs { border-bottom-color:#334155; }
  .tabs [role="tab"]{ color:#cbd5e1; }
  .tabs [role="tab"][aria-selected="true"]{
    background:#0b1220; color:#fff; border-color:#334155; border-bottom-color:#0b1220;
    box-shadow:0 -1px 0 #0b1220 inset;
  }
  .tabs-wrap{ background:#0b1220; }
}

.controls {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:end;
  margin-bottom:12px;
}

/* modal */
.backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.4);
  align-items:center; justify-content:center;
  z-index:999;
  overscroll-behavior: contain;
}
.backdrop.show{ display:flex; }
fieldset{border:1px solid #ddd; padding:12px; border-radius:8px;margin-bottom:12px}
legend{padding:0 6px}
/* .modal-body > input[type=text], .modal-body > input[type=number], input[type=date], .modal-body > select, textarea{padding:8px; width:100%} */
.modal-body > input, .modal-body >select, .modal-body > textarea { padding:6px; width:100%;}
.toggle{display:flex;align-items:center;gap:8px;margin:6px 0}
.ui-autocomplete{
  z-index: 2000 !important;
  background:#fff !important;
  border:1px solid #e5e7eb; 
  border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  max-height:100px; 
  overflow:auto;
}
#modal{background:#fff;max-width:820px;width:96%;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.2);overflow:hidden}
/* 모달을 세로 플렉스로 만들어 본문만 스크롤 */
.modal{
  display:flex;
  flex-direction:column;
  max-height: 90vh;                 /* 화면 92% 높이 제한 */
  width:96%;
  max-width: 820px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  overflow:auto;                   /* 컨테이너는 숨김 */
}
/* 헤더/푸터는 sticky로 고정 */
.modal-head, .modal-foot{
  position: sticky;
  z-index: 1;
  background:#fff;                   /* 투명 방지 */
}
.modal-head{top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f6f7f9;border-bottom:1px solid #eaecef}
.modal-head h2{margin:0;font-size:16px}
.modal-body{
  overflow:auto;                     /* 여기서만 스크롤 */
  -webkit-overflow-scrolling: touch; /* iOS 관성 스크롤 */
  overscroll-behavior: contain;      /* 스크롤 체이닝 방지 */
  padding:12px;                      /* (원래 값 유지 가능) */
}
.modal-foot{bottom:0;display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #eaecef;background:#fafbfc}


small{color:#888}
button.primary{background:#4F6D83;color:#fff;border-radius:var(--radius);padding:6px 8px;cursor:pointer}
button.ghost{background:#fff;border:1px solid #d0d7de;border-radius:var(--radius);padding:6px 8px;cursor:pointer}
button.danger{background:#ef4444;color:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:6px 8px;cursor:pointer}
.close-x{background:transparent;font-size:20px;cursor:pointer}
.grid-5 select, .grid-5 input {width: 100%;}

form.inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 12px;
}
.muted{color:var(--muted);font-size:12px}

.pager{color:#444;}
.pager a, .pager strong {
    color:#444;
    display: inline-block;
    margin: 0 2px;
    text-decoration: none;
}

/* 반응형: 화면이 줄수록 3→2→1열로 */
@media (max-width: 1200px){
  .grid-4{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .grid-4, .grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .grid-4, .grid-2{ grid-template-columns: 1fr; }
}