@charset "utf-8";
/* ==========================================================================
   V-hosting 관리자 콘솔
   교체 대상: html.css + _header.php 인라인 스타일
   ========================================================================== */

:root{
  --bg:#ffffff;
  --bg-sidebar:#f8faf9;
  --bg-hover:#f1f1ef;
  --bg-sunken:#f7f7f5;

  --text:#37352f;
  --text-2:#6b6a66;
  --text-3:#767572;   /* 4.61:1 - WCAG AA 통과 (구 #9b9a97 = 2.81:1 미달) */

  --line:#e9e9e7;
  --line-strong:#dcdcd9;

  /* 브랜드 - 구 디자인 상단 띠/로고의 청록. 역할을 나눠 쓴다.
     #1bc1c0 은 흰 글자 대비 2.23:1 이라 '채움' 전용, 글자는 --brand-ink. */
  --brand:#1bc1c0;
  --brand-ink:#0b6b6a;      /* 6.31:1 - 텍스트/버튼 배경 */
  --brand-on:#04302f;       /* --brand 위에 얹는 글자 6.42:1 */
  --brand-soft:#e9f7f7;
  --brand-line:#b8e6e5;

  --accent:var(--brand-ink);
  --accent-soft:var(--brand-soft);

  --ok:#2f7a52;
  --ok-soft:#e8f3ec;
  --warn:#9a5b17;
  --warn-soft:#fbf0e2;
  --danger:#a33a34;
  --danger-soft:#fbeceb;

  --r:4px;
  --sidebar-w:232px;

  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
         "Malgun Gothic","맑은 고딕","Noto Sans KR",Segoe UI,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}

html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}

/* ---------- 셸 ---------------------------------------------------------- */
#bodyFrame{display:flex;min-height:100vh;min-height:100dvh;border-top:3px solid var(--brand);}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--bg-sidebar);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;height:100dvh;
}
.sidebar__brand{
  padding:16px 14px 12px;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
}
.sidebar__logo{height:20px;width:auto;display:block;}
.sidebar__brandmeta{display:flex;align-items:center;gap:7px;}
.sidebar__badge{
  font-size:10.5px;font-weight:600;color:var(--brand-ink);
  background:var(--brand-soft);border-radius:3px;padding:1px 5px;
}
.sidebar__sub{font-size:11.5px;color:var(--text-3);}

.nav{padding:6px 8px;flex:1;}
.nav__label{
  font-size:11.5px;font-weight:600;color:var(--text-3);
  padding:10px 8px 4px;
}
.nav a{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;margin-bottom:1px;
  border-radius:var(--r);
  font-size:14px;color:var(--text-2);
}
.nav a:hover{background:var(--bg-hover);text-decoration:none;color:var(--text);}
.nav a.is-active{
  background:var(--brand-soft);color:var(--brand-ink);font-weight:600;
  box-shadow:inset 2px 0 0 var(--brand);
}
.nav a svg{flex:0 0 16px;opacity:.62;}
.nav a.is-active svg{opacity:1;}

.sidebar__foot{
  padding:10px 12px 14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--text-3);
}
.sidebar__foot a{color:var(--text-2);}
.sidebar__user{color:var(--text-2);margin-bottom:6px;}
.sidebar__user b{font-weight:600;color:var(--text);}

/* ---------- 본문 -------------------------------------------------------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  height:44px;flex:0 0 44px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  font-size:13px;color:var(--text-2);
}
.topbar__crumb b{font-weight:500;color:var(--text);}
.topbar__links a{color:var(--text-2);margin-left:14px;font-size:13px;}

.page{padding:28px 24px 56px;max-width:1180px;width:100%;}
.page__title{
  font-size:28px;font-weight:700;letter-spacing:-.022em;
  margin:0 0 4px;
}
.page__desc{color:var(--text-2);font-size:13.5px;margin:0 0 22px;}

/* ---------- 표 ---------------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
.tbl th{
  text-align:left;font-weight:500;font-size:12.5px;color:var(--text-3);
  padding:0 10px 7px;border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
.tbl td{
  padding:9px 10px;border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.tbl tbody tr:hover{background:var(--bg-sunken);}
.tbl .num,.tbl .mono{font-family:var(--mono);font-size:12.5px;}
.tbl .name{font-weight:500;}
.tbl .muted{color:var(--text-3);}
.muted{color:var(--text-3);}
.tbl .nowrap{white-space:nowrap;}
.tbl td .act{margin-left:10px;}
.tbl td .right .act,.tbl .right .act{margin-left:4px;}
.tbl .right{text-align:right;}
.tbl .empty{
  padding:44px 10px;text-align:center;color:var(--text-3);
  border-bottom:1px solid var(--line);
}

/* 상태 배지 - 실제 상태값만 표현 */
.badge{
  display:inline-block;padding:1px 7px;border-radius:var(--r);
  font-size:12px;line-height:1.6;white-space:nowrap;
  background:var(--bg-hover);color:var(--text-2);
}
.badge--ok{background:var(--ok-soft);color:var(--ok);}
.badge--warn{background:var(--warn-soft);color:var(--warn);}
.badge--off{background:var(--bg-hover);color:var(--text-3);}

/* 행 액션 */
.act{
  font-size:12.5px;color:var(--text-2);
  padding:2px 6px;border-radius:var(--r);
}
.act:hover{background:var(--bg-hover);color:var(--text);text-decoration:none;}
.act--danger:hover{background:var(--danger-soft);color:var(--danger);}
.act[aria-disabled="true"]{color:var(--text-3);pointer-events:none;}

/* ---------- 폼 ---------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:12.5px;color:var(--text-2);font-weight:500;}
input[type=text],input[type=password],select,textarea{
  font-family:inherit;font-size:13.5px;color:var(--text);
  background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--r);
  padding:6px 9px;
}

/* 드롭다운 - OS 기본 위젯 대신 콘솔 톤에 맞춘 커스텀 셰브론
   size 가 있는 리스트박스(여러 줄)는 대상이 아니다. */
select:not([size]),select[size="1"]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:6px 32px 6px 11px;
  min-width:200px;max-width:100%;
  cursor:pointer;
  line-height:1.5;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23767572' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.75 6 7.75 9 4.75'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px 12px;
  transition:border-color .12s ease, background-color .12s ease;
}
select:not([size]):hover,select[size="1"]:hover{background-color:var(--bg-sunken);border-color:var(--text-3);}
select:focus{
  border-color:var(--brand-ink);
  background-color:var(--bg);
  box-shadow:0 0 0 3px var(--brand-soft);
}
select[size]:not([size="1"]){background-image:none;padding:2px;cursor:default;}
select::-ms-expand{display:none;}
@media (prefers-reduced-motion:reduce){ select{transition:none;} }
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.btn{
  font-family:inherit;font-size:13.5px;font-weight:500;
  padding:6px 13px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--text);
}
.btn:hover{background:var(--bg-hover);}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;}
.btn--primary:hover{background:#095756;}

/* ---------- 안내 -------------------------------------------------------- */
.note{
  margin-top:18px;padding:11px 13px;
  background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r);
  font-size:13px;color:var(--text-2);
}
.note a{color:var(--accent);font-weight:500;}

.skeleton{
  height:13px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--bg-hover) 25%,var(--bg-sunken) 37%,var(--bg-hover) 63%);
  background-size:400% 100%;
  animation:sk 1.3s ease infinite;
}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){
  .skeleton{animation:none;}
  .btn:active{transform:none;}
}

/* ---------- 좁은 화면 --------------------------------------------------- */
@media (max-width:900px){
  #bodyFrame{flex-direction:column;}
  .sidebar{
    width:100%;flex:none;height:auto;position:static;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .nav{display:flex;flex-wrap:wrap;gap:2px;padding:4px 8px 8px;}
  .nav__label{display:none;}
  .nav a{margin:0;}
  .sidebar__foot{display:flex;justify-content:space-between;align-items:center;}
  .sidebar__user{margin:0;}
  .page{padding:20px 16px 40px;}
  .table-scroll{overflow-x:auto;}
}

/* ---------- 탭 ---------------------------------------------------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.tabs a{
  padding:6px 10px;font-size:13.5px;color:var(--text-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tabs a:hover{color:var(--text);text-decoration:none;}
.tabs a.is-active{color:var(--brand-ink);font-weight:600;border-bottom-color:var(--brand);}

/* ---------- 툴바 -------------------------------------------------------- */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.toolbar__spacer{flex:1;}
.toolbar__hint{font-size:13px;color:var(--text-3);}

/* ---------- 사용량 미터 (실측값 표시) ----------------------------------- */
.meter{
  display:inline-block;vertical-align:middle;
  width:110px;height:6px;border-radius:999px;
  background:var(--bg-hover);overflow:hidden;
}
.meter__fill{display:block;height:100%;background:var(--brand);border-radius:999px;}
.meter__fill.is-high{background:var(--warn);}
.meter__fill.is-full{background:var(--danger);}

/* ---------- 페이지 이동 ------------------------------------------------- */
.pageArea{margin-top:16px;font-size:13px;color:var(--text-2);}
.pageArea a{padding:2px 7px;border-radius:var(--r);}
.pageArea a:hover{background:var(--bg-hover);text-decoration:none;}

/* ---------- 기타 -------------------------------------------------------- */
.tbl--narrow{max-width:560px;}
.popform{padding:14px 16px;}
.popform .btn{width:100%;}

/* 비밀번호 열: 값 길이가 달라도 액션 위치를 고정해 훑기 쉽게 */
.tbl td.pwcell > .pw,
.tbl td.pwcell > .muted{display:inline-block;min-width:124px;}
@media (max-width:900px){ .tbl td.pwcell > .pw,.tbl td.pwcell > .muted{min-width:0;} }


/* ---------- 비밀번호 마스킹 --------------------------------------------- */
.pw{display:inline-block;}
.pw-toggle{
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  color:var(--text-3);
  border-bottom:1px dashed var(--line-strong);padding-bottom:1px;
}
.pw-toggle:hover,.pw-toggle:focus-visible{
  color:var(--text);border-bottom-color:var(--text-3);text-decoration:none;
}
.pw.is-open > .mono{color:var(--text);}

/* ---------- 커스텀 드롭다운 --------------------------------------------- */
.cselect{position:relative;display:inline-block;}
.cselect__native{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);border:0;min-width:0;
}
.cselect__btn{
  display:flex;align-items:center;gap:10px;
  min-width:200px;max-width:320px;
  font-family:inherit;font-size:13.5px;color:var(--text);text-align:left;
  background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:6px 10px 6px 11px;cursor:pointer;
  transition:border-color .12s ease,background-color .12s ease;
}
.cselect__btn:hover{background:var(--bg-sunken);border-color:var(--text-3);}
.cselect__btn.is-placeholder .cselect__val{color:var(--text-3);}
.cselect.is-open .cselect__btn,
.cselect__btn:focus-visible{
  border-color:var(--brand-ink);outline:none;
  box-shadow:0 0 0 3px var(--brand-soft);
}
.cselect__val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cselect__chev{
  flex:0 0 9px;width:9px;height:9px;
  border-right:1.6px solid var(--text-3);border-bottom:1.6px solid var(--text-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s ease;
}
.cselect.is-open .cselect__chev{transform:rotate(225deg) translate(-3px,-3px);}

.cselect__list{
  position:absolute;z-index:40;top:calc(100% + 4px);left:0;
  min-width:100%;max-width:340px;max-height:280px;overflow-y:auto;
  background:var(--bg);border:1px solid var(--line-strong);border-radius:6px;
  box-shadow:0 4px 16px rgba(15,15,15,.12),0 1px 3px rgba(15,15,15,.08);
  padding:4px;
}
.cselect__opt{
  display:block;padding:6px 9px;border-radius:var(--r);
  font-size:13.5px;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.cselect__opt:hover,.cselect__opt:focus-visible{
  background:var(--bg-hover);text-decoration:none;outline:none;
}
.cselect__opt.is-selected{color:var(--brand-ink);font-weight:600;background:var(--brand-soft);}
@media (prefers-reduced-motion:reduce){
  .cselect__btn,.cselect__chev{transition:none;}
}

/* 빈 상태 행은 호버 강조 대상이 아니다 */
.tbl tbody tr:hover td.empty{background:var(--bg);}

/* 구 _header.php 인라인 스타일에 있던 것. 사이드바 밖 화면(etc/member/
   domain/list)이 아직 쓰므로 유지한다. 해당 화면들을 새로 짜면 삭제 가능. */
.left{float:left;}
.border0110{border-bottom:1px solid var(--line-strong);border-right:1px solid var(--line-strong);}


/* =========================================================================
   div 기반 그리드 (etc/product, member/회원목록·직원목록)
   JS 가 만드는 마크업은 그대로 두고 클래스만 새 표 시스템에 맞춘다.
   ========================================================================= */
.listBody,.listHead{width:100%;}
.listRow{display:flex;align-items:stretch;}
.listRow > div{
  padding:9px 10px;border-bottom:1px solid var(--line);
  font-size:13.5px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.listRow:hover > div:not(.listTitle){background:var(--bg-sunken);}
.listRow .listTitle{
  border-bottom:1px solid var(--line-strong);
  color:var(--text-3);font-size:12.5px;font-weight:500;background:transparent;
}
.listRow .border0110{border-right:0;}      /* 세로 구분선 제거 - 행 구분선만 남긴다 */
.listRow input[type=checkbox]{margin:0;vertical-align:middle;}

.listNum{flex:0 0 44px;}
.listSmall{flex:0 0 84px;}
.listMiddle{flex:0 0 124px;}
.listLarge{flex:0 0 152px;}
.listExec{flex:0 0 200px;}
.listText{flex:1 1 auto;min-width:180px;}
.layerBoxT{flex:0 0 104px;color:var(--text-3);}
.layerBoxC{flex:0 0 144px;}
.layerBoxF{flex:0 0 252px;}

/* =========================================================================
   필터 바 (회원/직원 목록 상단 검색 영역)
   ========================================================================= */
.filterbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;
  padding:14px 16px;margin-bottom:18px;
  background:var(--bg-sunken);border:1px solid var(--line);border-radius:6px;
}
.filterbar .field{margin:0;gap:5px;}
.filterbar__total{margin-left:auto;font-size:13px;color:var(--text-2);align-self:center;}
.filterbar__total b{font-size:15px;color:var(--text);font-family:var(--mono);}
.filterbar input[type=text]{min-width:150px;}
.filterbar .num{width:70px;}

/* =========================================================================
   3열 패널 편집기 (etc/menu, etc/category)
   ========================================================================= */
.panels{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.panel{
  flex:1 1 260px;min-width:240px;
  border:1px solid var(--line);border-radius:6px;background:var(--bg);
  display:flex;flex-direction:column;
}
.panel__head{
  padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--text-2);
  background:var(--bg-sunken);border-radius:6px 6px 0 0;
}
.panel__body{padding:10px 12px 12px;}
.panel__foot{
  padding:9px 12px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.panel__foot .spacer{flex:1;}

/* 리스트박스 (select[size]) - 드롭다운이 아니라 목록이므로 그대로 쓰되 톤만 맞춘다 */
.listbox{
  width:100%;min-width:0;
  border:1px solid var(--line-strong);border-radius:var(--r);
  font-family:inherit;font-size:13.5px;color:var(--text);
  background:var(--bg);padding:2px;
  appearance:none;-webkit-appearance:none;background-image:none;cursor:pointer;
}
.listbox:focus{
  outline:none;border-color:var(--brand-ink);box-shadow:0 0 0 3px var(--brand-soft);
}
.listbox option{padding:5px 7px;border-radius:3px;}
.listbox option:checked{background:var(--brand-soft);color:var(--brand-ink);font-weight:600;}

.btn--sm{padding:4px 9px;font-size:12.5px;}
.btn--ghost{border-color:transparent;background:transparent;color:var(--text-2);}
.btn--ghost:hover{background:var(--bg-hover);color:var(--text);}

/* ---------- 로그인 화면 ------------------------------------------------- */
.login{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  min-height:100dvh;padding:24px;
}
.login__card{width:100%;max-width:380px;}
.login__brand{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:26px;
}
.login__logo{width:150px;max-width:64%;height:auto;display:block;}
.login__sub{font-size:12.5px;color:var(--text-3);margin-top:10px;letter-spacing:.01em;}
.login__form .field{margin-bottom:13px;}
.login__form input{width:100%;padding:9px 11px;font-size:14px;}
.login__btn{width:100%;padding:9px;font-size:14px;margin-top:6px;}
.login__foot{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--text-3);line-height:1.75;
}
.login__foot .row{display:flex;gap:6px;}
.login__foot .row .k{flex:0 0 60px;color:var(--text-2);font-weight:500;}
.login__foot .row .v{flex:1;min-width:0;}
.login__foot .biz{margin-top:8px;color:var(--text-3);}
.login__toplink{
  position:absolute;top:16px;right:20px;
  font-size:12.5px;color:var(--text-2);
}
.login__toplink:hover{color:var(--brand-ink);}
.login{position:relative;}