/* #########################################################
 * 기본 : 폰트 · 포인트 색상 · reset
 * ######################################################### */
@font-face { font-family:'SeoulNotice'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/SeoulAlrimTTF-Heavy.woff2') format('woff2'); font-weight:900; font-display:swap; }

/* ========== 포인트 색상 (마이페이지 설정 → header.html 에서 --theme 덮어씀) ========== */
:root { --theme:#0062cc; --theme-on:#fff; --theme-dark:color-mix(in srgb,var(--theme) 82%,#000); --theme-soft:color-mix(in srgb,var(--theme) 7%,#fff); --theme-soft2:color-mix(in srgb,var(--theme) 15%,#fff); --theme-line:color-mix(in srgb,var(--theme) 30%,#fff); --theme-ring:color-mix(in srgb,var(--theme) 15%,transparent); }
/* ========== reset ========== */
* { box-sizing:border-box; margin:0; padding:0; }
html { overflow-y: scroll; }
body { font-family:'Pretendard', -apple-system, sans-serif; font-size:14px; color:#222; background:#fff; }
a { color:inherit; text-decoration:none; }
ul, ol, li { list-style:none; }
button { border:0; background:none; cursor:pointer; font:inherit; }
.dark { background-color: #333; color:#fff; } 
/* ========== 관리자 레이아웃 (좌측 메뉴 + 우측 본문) ========== */
body:not(.login-body) {  }

header { margin-bottom:0px; background:#fff; }
header .top-inner { display:flex; align-items:center; justify-content:space-between; padding:7px 20px; line-height:35px; }
header .top-inner .buttons { border:1px solid #dcdfe6; border-radius:6px; color:#4a5468; font-size:14px; text-decoration:none; height:36px; line-height:36px; margin-right:10px; padding:0 15px; }
header .top-inner div.buttons:hover { border:1px solid var(--theme); color:var(--theme); }
header .top-logo { padding:0; font-size:25px; margin-right:20px; display:flex; align-items: center;  }
header .top-logo-link { text-decoration:none; color:inherit; }
header .familysite { display:flex; align-items: center;; margin-right:auto;  }
header .familysite h1 { font-size:18px; margin-right:10px;  }
header .familysite select { height:30px; width:120px; padding:0 8px; border:1px solid #ddd; border-radius:4px; box-sizing:border-box; }
header .familysite-addbtn { display:inline-flex; align-items:center; justify-content:center; height:30px; margin-left:8px; padding:0 16px; border:0; border-radius:4px; background:#353b48; color:#fff; font-size:13px; font-family:inherit; line-height:1; box-sizing:border-box; cursor:pointer; transition:background .2s; }
header .userinfo { display:flex; align-items:center; gap:5px; margin:0px 15px; line-height:normal; }
header .userinfo h1 { font-size:15px; line-height:20px; }
header .userinfo h2 { font-size:15px; line-height:20px; font-weight:400; }
header .userinfo span { font-size:15px; line-height:20px; padding:0 5px; }
header .userinfo em { font-style:normal; font-size:14px; line-height:20px; color:#aaa; padding:0 5px; }
header .top-search { display:flex; margin-left:15px; }
header .top-search h1 { font-size:15px; }
header .top-search input.search-frm { width:180px; line-height:32px; height:32px;  border:1px solid #ddd; border-radius:5px; padding:0px 5px; }
header .top-search input.search-frm:hover {}
header .top-search button.search-btn { padding:0px 10px; font-size:18px; }
header .top-nav { display:flex; justify-content:flex-start; padding:0 20px; }
header .top-menu { display:flex; gap:20px; margin:0; padding:0; list-style:none; }
header .top-menu li a { display:flex; align-items:center; gap:6px; padding:12px 0; color:#4a5468; font-size:15px; text-decoration:none; border-bottom:3px solid transparent; position:relative;  }
header .top-menu li.on a { color:var(--theme); font-weight:600; border-bottom-color:transparent; }
header .top-menu li.on a::after { content:''; position:absolute; left:50%; bottom:-3px; width:0; height:0; margin-left:-7px; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid var(--theme); }
header .top-logout { display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #dcdfe6; border-radius:6px; color:#4a5468; font-size:14px; text-decoration:none; height:36px; }
header .top-logout:hover { border-color:var(--theme); color:var(--theme); }
header .userinfo-me { display:inline-flex; align-items:center; gap:6px; color:inherit; }
header .top-inner a.buttons:hover { border-color:var(--theme); color:var(--theme); }
header .top-inner .buttons.on { border-color:var(--theme); background:var(--theme); color:var(--theme-on); }
header .top-inner .buttons.on:hover { color:var(--theme-on); }
.top-menu-right a.on span { color:var(--theme); }

/* ========== 프로필 사진 (avatar.html) ========== */
.avatar { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; overflow:hidden; border-radius:50%; background:#eef0f4; color:#a3acb9; vertical-align:middle; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-sm { width:28px; height:28px; font-size:13px; }
.avatar-md { width:48px; height:48px; font-size:20px; }
.avatar-lg { width:110px; height:110px; font-size:46px; }
header .userinfo-photo { display:inline-flex; align-items:center; border-radius:50%; }
header .userinfo-photo:hover .avatar { box-shadow:0 0 0 2px var(--theme); }

@media (min-width:1024px) and (max-width:1700px) {
    .avatar-sm { width:26px; height:26px; font-size:12px; }
    .avatar-lg { width:100px; height:100px; font-size:42px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .avatar-sm { width:26px; height:26px; font-size:12px; }
    .avatar-md { width:44px; height:44px; font-size:18px; }
    .avatar-lg { width:96px; height:96px; font-size:40px; }
}

@media (max-width:767px) {
    .avatar-sm { width:24px; height:24px; font-size:11px; }
    .avatar-md { width:40px; height:40px; font-size:17px; }
    .avatar-lg { width:84px; height:84px; font-size:34px; }
}
.nav-location { height:35px; line-height:35px; background-color:var(--theme); background-image:linear-gradient(180deg,color-mix(in srgb,var(--theme) 94%,#fff) 0%,color-mix(in srgb,var(--theme) 88%,#000) 100%); color:var(--theme-on); padding:0px 30px; }
#container { margin-left:240px; border-left:1px solid #ddd; padding:0px 0px 50px 0px; }
.admin-content { flex:1 1 auto; min-width:0; width:100%; padding:0px; background:#fff;   }
.dashboard-main-content { padding:0px 20px 0px 20px; }
.page-title { margin-bottom:14px; font-size:15px; height:40px; line-height:40px; padding:0px 15px; font-weight:700; color:#343a4a; }
.page-title i { margin-right:6px; color:var(--theme); position:relative; top:1px; }
footer { margin-top:0px; padding:20px 30px; border-top:1px solid #e3e6ec; font-size:12px; color:#999; padding:15px 20px; }
/* ===== 좌측 메뉴 ===== */
.admin-body { }

.left-menu {  position:absolute; top:130px; left:0; z-index:5; flex:none; width:240px; height:auto; }
.left-menu .lm-list { margin:0; padding:5px 0px; list-style:none; }
.left-menu .lm-list i { padding:5px 0px; position:relative; top:1px; margin-right:5px; }
.left-menu .lm-list h1 { background-color:var(--theme); color:var(--theme-on); height:35px; line-height:35px; font-size:15px; padding:0px 28px; margin:10px; border-radius:30px; font-weight:400; }
.left-menu .lm-list li { padding:0px 15px; line-height:35px; }
.left-menu .lm-list li::before { content:"·"; padding-right:10px; }
.left-menu .lm-list li a:hover { color:var(--theme); }
.left-menu .lm-list li.on::before { content:"\f00c"; padding-right:8px; font-family:"Font Awesome 6 Free"; font-size:11px; font-weight:900; color:var(--theme); }
.left-menu .lm-list li.mb-on::before { content:"\f00c"; padding-right:8px; font-family:"Font Awesome 6 Free"; font-size:11px; font-weight:900; color:var(--theme); }
.left-menu .lm-list li.on > a { color:var(--theme); font-weight:700; }

.top-menu-right { margin-left:auto; display:flex; justify-items: center; }
.top-menu-right span { font-size:18px; line-height:45px; padding:0px 15px;  }
.top-menu-right a:hover span, .top-menu-right span:hover { color:var(--theme); }

/* ========== 마이페이지 : 프로필 사진 ========== */
.pf-photobox { display:flex; align-items:center; gap:20px; }
.pf-photo { position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:110px; height:110px; overflow:hidden; border:3px solid var(--theme-soft2); border-radius:50%; background:#eef0f4; }
.pf-photo img { display:none; width:100%; height:100%; object-fit:cover; }
.pf-photo.has-img img { display:block; }
.pf-photo .pf-noimg { font-size:46px; color:#b8c0cc; }
.pf-photo.has-img .pf-noimg { display:none; }
.pf-photobtns { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.pf-file { position:relative; height:34px; margin:0; padding:0 14px; cursor:pointer; }
.pf-file input { display:none; }
.pf-del { padding-top:0; font-size:13px; color:#777; }

@media (min-width:1024px) and (max-width:1700px) {
    .pf-photo { width:100px; height:100px; }
    .pf-photo .pf-noimg { font-size:42px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .pf-photobox { gap:16px; }
    .pf-photo { width:96px; height:96px; }
    .pf-photo .pf-noimg { font-size:40px; }
}

@media (max-width:767px) {
    .pf-photobox { gap:14px; }
    .pf-photo { width:84px; height:84px; }
    .pf-photo .pf-noimg { font-size:34px; }
    .pf-file { height:36px; padding:0 12px; }
}

@media (max-width: 1024px) {
  .login-box { width:100%; max-width:380px; padding:32px 20px 24px; }
  .login-logo { font-size:18px; }
  .login-field { height:44px; }
  .msgbox { gap:10px; padding:12px 14px; }
  .msgbox .msg-icon { flex:0 0 28px; width:28px; height:28px; font-size:14px; }
  .msgbox .msg-title { font-size:13px; }
  .msgbox .msg-text { font-size:12px; }
}

@media (max-width: 1024px) {
  body:not(.login-body) { display:block; }
  #admin-side { position:relative; width:100%; height:auto; overflow:visible; box-shadow:0 4px 12px rgba(0, 0, 0, 0.2); }
  .admin-logo, .admin-userinfo, .admin-home { height:56px; padding:0 16px; }
  #admin-side nav .menu-group { height:52px; padding:0 16px; }
  #admin-side nav .menu-item { padding:0 40px; }
  #admin-side nav .menu-item.on { padding-left:37px; }
  #container { padding:16px; }
  .admin-content { padding:16px; }
  .page-title { font-size:18px;  }
}
/* 좌측 메뉴(absolute)보다 본문이 짧을 때 푸터가 겹치지 않게 */
#container { min-height:calc(100vh - 130px); }

@media (min-width:1024px) and (max-width:1700px) {
    #container { min-height:calc(100vh - 130px); }
}

@media (min-width:768px) and (max-width:1023px) {
    #container { min-height:0; }
}

@media (max-width:767px) {
    #container { min-height:0; }
}
/* ========== 햄버거 메뉴 · 헤더 반응형 ========== */
.menu-toggle { display:none; }

@media (min-width:768px) and (max-width:1023px) {
    header .top-inner { flex-wrap:wrap; align-items:center; gap:10px; padding:10px 16px; line-height:normal; }
    header .top-logo-link { order:1; margin-right:auto; }
    header .top-logo { font-size:20px; margin-right:0; }
    header .menu-toggle { order:2; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #dcdfe6; border-radius:8px; font-size:18px; color:#4a5468; }
    header .menu-toggle:hover { border-color:var(--theme); color:var(--theme); }
    header .familysite { order:3; display:none; flex-wrap:wrap; align-items:center; gap:8px; width:100%; margin-right:0; padding-top:10px; border-top:1px solid #eef0f4; }
    header .familysite h1 { font-size:15px; margin-right:0; }
    header .familysite select { flex:1; width:auto; height:36px; }
    header .familysite-addbtn { height:36px; margin-left:0; }
    header .top-search { flex:1 1 100%; align-items:center; gap:8px; margin-left:0; }
    header .top-search h1 { font-size:14px; white-space:nowrap; }
    header .top-search input.search-frm { flex:1; width:auto; height:36px; line-height:36px; }
    header .userinfo { order:4; display:none; align-items:center; flex-wrap:wrap; gap:4px; width:100%; margin:0; line-height:normal; }
    header .userinfo h1, header .userinfo h2, header .userinfo span, header .userinfo em { font-size:14px; line-height:20px; }
    header .top-inner .buttons { order:5; display:none; flex:1 1 calc(33.333% - 7px); margin-right:0; padding:0 8px; text-align:center; white-space:nowrap; }
    header .top-logout-form { order:6; display:none; width:100%; }
    header .top-logout { justify-content:center; width:100%; }
    body.menu-open header .familysite { display:flex; }
    body.menu-open header .userinfo { display:flex; }
    body.menu-open header .top-inner .buttons { display:block; }
    body.menu-open header .top-logout-form { display:block; }
    header .top-nav { align-items:center; padding:0 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    header .top-menu { flex:none; gap:16px; }
    header .top-menu li a { padding:10px 0; font-size:14px; white-space:nowrap; }
    .top-menu-right { flex:none; padding-left:10px; }
    .top-menu-right span { font-size:16px; line-height:42px; padding:0 9px; }
    .nav-location { padding:0 16px; font-size:14px; }
    .left-menu { position:static; display:none; width:100%; padding:6px 0; border-bottom:1px solid #e3e6ec; }
    body.menu-open .left-menu { display:block; }
    .left-menu .lm-list h1 { margin:6px 16px; }
    .left-menu .lm-list li { padding:0 26px; }
    #container { margin-left:0; border-left:0; }
}

@media (max-width:767px) {
    header .top-inner { flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; line-height:normal; }
    header .top-logo-link { order:1; margin-right:auto; }
    header .top-logo { font-size:18px; margin-right:0; }
    header .menu-toggle { order:2; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid #dcdfe6; border-radius:8px; font-size:17px; color:#4a5468; }
    header .menu-toggle:hover { border-color:var(--theme); color:var(--theme); }
    header .familysite { order:3; display:none; flex-wrap:wrap; align-items:center; gap:8px; width:100%; margin-right:0; padding-top:10px; border-top:1px solid #eef0f4; }
    header .familysite h1 { font-size:14px; margin-right:0; }
    header .familysite select { flex:1; width:auto; height:36px; }
    header .familysite-addbtn { height:36px; margin-left:0; }
    header .top-search { flex:1 1 100%; align-items:center; gap:6px; margin-left:0; }
    header .top-search h1 { display:none; }
    header .top-search input.search-frm { flex:1; width:auto; height:36px; line-height:36px; }
    header .top-search button.search-btn { font-size:16px; padding:0 8px; }
    header .userinfo { order:4; display:none; align-items:center; flex-wrap:wrap; gap:4px; width:100%; margin:0; line-height:normal; }
    header .userinfo h1, header .userinfo h2, header .userinfo span, header .userinfo em { font-size:13px; line-height:20px; }
    header .top-inner .buttons { order:5; display:none; flex:1 1 calc(50% - 4px); margin-right:0; padding:0 6px; font-size:13px; text-align:center; white-space:nowrap; }
    header .top-logout-form { order:6; display:none; width:100%; }
    header .top-logout { justify-content:center; width:100%; }
    body.menu-open header .familysite { display:flex; }
    body.menu-open header .userinfo { display:flex; }
    body.menu-open header .top-inner .buttons { display:block; }
    body.menu-open header .top-logout-form { display:block; }
    header .top-nav { display:none; flex-direction:column; padding:0 12px; border-top:1px solid #eef0f4; }
    body.menu-open header .top-nav { display:flex; }
    header .top-menu { flex-direction:column; gap:0; }
    header .top-menu li a { padding:12px 4px; font-size:14px; border-bottom:1px solid #f0f2f5; }
    header .top-menu li.on a::after { display:none; }
    header .top-menu li.on a { border-left:3px solid var(--theme); padding-left:10px; }
    .top-menu-right { justify-content:space-around; margin-left:0; padding:4px 0; }
    .top-menu-right span { font-size:17px; line-height:44px; padding:0 10px; }
    .nav-location { padding:0 12px; font-size:13px; }
    .left-menu { position:static; display:none; width:100%; padding:4px 0 8px; border-bottom:1px solid #e3e6ec; }
    body.menu-open .left-menu { display:block; }
    .left-menu .lm-list h1 { margin:6px 12px; font-size:14px; }
    .left-menu .lm-list li { padding:0 22px; font-size:14px; }
    #container { margin-left:0; border-left:0; }
}

/* ========== 작은 데스크톱 (1024~1700) : 상단줄 한 줄 유지 ========== */
@media (min-width:1024px) and (max-width:1700px) {
    header .top-inner { flex-wrap:nowrap; gap:6px; padding:7px 16px; }
    header .top-inner h1, header .top-inner h2, header .top-inner span, header .top-inner em, header .top-inner a, header .top-inner button { white-space:nowrap; }
    header .top-logo { font-size:21px; margin-right:12px; }
    header .familysite { flex:0 1 auto; min-width:0; }
    header .familysite h1 { font-size:15px; margin-right:8px; }
    header .familysite select { width:120px; }
    header .familysite-addbtn { padding:0 12px; }
    header .top-search { margin-left:12px; align-items:center; }
    header .top-search h1 { display:none; }
    header .top-search input.search-frm { width:150px; }
    header .userinfo { align-items:center; margin:0 10px; line-height:normal; }
    header .userinfo h1, header .userinfo h2, header .userinfo span { font-size:14px; line-height:20px; }
    header .userinfo em { font-size:13px; line-height:20px; }
    header .top-inner .buttons { display:flex; align-items:center; justify-content:center; width:38px; padding:0; margin-right:6px; font-size:0; }
    header .top-inner .buttons i { font-size:15px; }
    header .top-inner .buttons:hover { border-color:var(--theme); color:var(--theme); }
    header .top-logout { justify-content:center; width:38px; padding:0; font-size:0; }
    header .top-logout i { font-size:15px; }
    header .top-menu { gap:18px; }
    header .top-menu li a { font-size:14px; white-space:nowrap; }
    .top-menu-right span { padding:0 11px; }
}

@media (min-width:1024px) and (max-width:1300px) {
    header .top-logo { font-size:19px; margin-right:8px; }
    header .familysite h1 { display:none; }
    header .familysite select { width:110px; }
    header .top-search { margin-left:8px; }
    header .top-search input.search-frm { width:120px; }
    header .userinfo h1, header .userinfo > span { display:none; }
    header .top-menu { gap:14px; }
    header .top-menu li a { font-size:13px; }
    .top-menu-right span { font-size:16px; padding:0 8px; }
}

/* 결재 대기 숫자 · 보기 화면 버튼 */
.menu-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:5px; padding:0 5px; border-radius:9px; background:#e04848; font-size:11px; font-style:normal; font-weight:700; line-height:1; color:#fff; vertical-align:middle; }
.ap-head-btns { display:flex; gap:4px; }

@media (min-width:1024px) and (max-width:1300px) {
    header .top-inner .buttons .menu-badge { position:absolute; top:-4px; right:-4px; margin:0; }
    header .top-inner .buttons { position:relative; }
}

@media (min-width:768px) and (max-width:1023px) {
    .menu-badge { min-width:18px; height:18px; margin-left:5px; font-size:11px; }
    .ap-head-btns { display:flex; gap:4px; }
}

@media (max-width:767px) {
    .menu-badge { min-width:16px; height:16px; margin-left:4px; padding:0 4px; font-size:10px; }
    .ap-head-btns { display:flex; justify-content:flex-end; gap:4px; }
}
/* ========== 햄버거 메뉴 : 애니메이션 내려오기 ========== */
@keyframes menuslide { from { opacity:0; transform:translateY(-14px); clip-path:inset(0 0 100% 0); } to { opacity:1; transform:translateY(0); clip-path:inset(0 0 0 0); } }

/* 태블릿 (768~1023) */
@media (min-width:768px) and (max-width:1023px) {
    header .menu-toggle i { transition:transform .3s ease; }
    body.menu-open header .menu-toggle { border-color:var(--theme); color:var(--theme); }
    body.menu-open header .menu-toggle i { transform:rotate(90deg); }
    body.menu-open header .familysite { animation:menuslide .35s ease-out both; }
    body.menu-open header .userinfo { animation:menuslide .35s ease-out .05s both; }
    body.menu-open header .top-inner .buttons { animation:menuslide .35s ease-out .1s both; }
    body.menu-open header .top-logout-form { animation:menuslide .35s ease-out .14s both; }
    body.menu-open .left-menu { animation:menuslide .4s ease-out .18s both; }
    body.menu-open .nav-location { display:none; }
    body.menu-open #container { display:none; }
}

/* 모바일 (767 이하) */
@media (max-width:767px) {
    header .menu-toggle i { transition:transform .3s ease; }
    body.menu-open header .menu-toggle { border-color:var(--theme); color:var(--theme); }
    body.menu-open header .menu-toggle i { transform:rotate(90deg); }
    body.menu-open header .familysite { animation:menuslide .35s ease-out both; }
    body.menu-open header .userinfo { animation:menuslide .35s ease-out .05s both; }
    body.menu-open header .top-inner .buttons { animation:menuslide .35s ease-out .1s both; }
    body.menu-open header .top-logout-form { animation:menuslide .35s ease-out .14s both; }
    body.menu-open header .top-nav { animation:menuslide .4s ease-out .18s both; }
    body.menu-open .left-menu { animation:menuslide .4s ease-out .22s both; }
    body.menu-open .nav-location { display:none; }
    body.menu-open #container { display:none; }
}

/* 동작 줄이기 설정 사용자 */
@media (prefers-reduced-motion:reduce) {
    body.menu-open header .familysite { animation:none; }
    body.menu-open header .userinfo { animation:none; }
    body.menu-open header .top-inner .buttons { animation:none; }
    body.menu-open header .top-logout-form { animation:none; }
    body.menu-open header .top-nav { animation:none; }
    body.menu-open .left-menu { animation:none; }
    header .menu-toggle i { transition:none; }
}
/* ========== 로고 : 동그라미 마크 + ERP 테마색 ========== */
header .top-logo { display:flex; align-items:center; gap:8px; }
header .top-logo em { font-style:normal; color:var(--theme); }
header .top-logo-mark { flex:0 0 auto; width:22px; height:22px; border:5px solid var(--theme); border-radius:50%; box-sizing:border-box; }

/* 작은 데스크톱 (1024~1700) */
@media (min-width:1024px) and (max-width:1700px) {
    header .top-logo { gap:7px; }
    header .top-logo-mark { width:20px; height:20px; border-width:5px; }
}

/* 태블릿 (768~1023) */
@media (min-width:768px) and (max-width:1023px) {
    header .top-logo { gap:7px; }
    header .top-logo-mark { width:19px; height:19px; border-width:4px; }
}

/* 모바일 (767 이하) */
@media (max-width:767px) {
    header .top-logo { gap:6px; }
    header .top-logo-mark { width:17px; height:17px; border-width:4px; }
}
/* ========== 메시지 박스 ========== */
.msgbox { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; padding:14px 16px; border-radius:8px; background:#fff; box-shadow:0 2px 10px rgba(17, 24, 39, 0.06); animation:msgbox-in 0.25s ease; }
.msgbox .msg-icon { flex:0 0 32px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; }
.msgbox .msg-body { flex:1; min-width:0; padding-top:5px; }
.msgbox .msg-title { display:block; font-size:14px; font-weight:700; line-height:1.4; }
.msgbox .msg-text { margin-top:3px; font-size:13px; line-height:1.6; color:#666; word-break:keep-all; }
.msg-ok { border-color:#22c55e; background:#f3fcf6; }
.msg-ok .msg-icon { background:#dcf7e6; color:#16a34a; }
.msg-ok .msg-title { color:#15803d; }
.msg-fail { border-color:#ef4444; background:#fef5f5; }
.msg-fail .msg-icon { background:#fde2e2; color:#dc2626; }
.msg-fail .msg-title { color:#b91c1c; }
.msg-warn { border-color:#f59e0b; background:#fffaf0; }
.msg-warn .msg-icon { background:#fdefd3; color:#d97706; }
.msg-warn .msg-title { color:#b45309; }
.msg-info { border-color:var(--theme); background:var(--theme-soft); }
.msg-info .msg-icon { background:var(--theme-soft2); color:var(--theme); }
.msg-info .msg-title { color:var(--theme-dark); }

@keyframes msgbox-in { from { opacity:0; transform:translateY(-6px); } }

/* ========== 페이지 제목 줄 ========== */
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; width:100%; border-bottom:1px solid #ddd; }
.page-head .page-title { margin-bottom:0; }

/* ========== 버튼 ========== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 8px; border:1px solid transparent; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background 0.15s, border-color 0.15s; margin-right:10px; }
.btn-sm { height:30px; padding:0 10px; font-size:12px; }
.btn-primary { background:var(--theme); color:var(--theme-on); padding:20px 15px; }
.btn-primary:hover { background:var(--theme-dark); }
.btn-dark { background:#343a4a; color:#fff; padding:18px 15px; }
.btn-dark:hover { background:#232733; }
.btn-light { background:#fff; border-color:#d5d9e0; color:#444; padding:20px 15px; }
.btn-light:hover { background:#f1f3f6; border-color:var(--theme-line); color:var(--theme-dark); }
.btn-delete { width:80px; margin-left:auto; background:#fff; border-color:#f3c4c4; color:#dc2626; padding:20px 15px; }
.btn-danger:hover { background:#fef2f2; }
.inline-form { display:inline; }
.btn-small-light { background:#fff; border-color:#d5d9e0; color:#444; padding:20px 15px; }
.btn-small-light:hover { background:#f1f3f6; border-color:var(--theme-line); color:var(--theme-dark); }

/* ========== 검색 ========== */
.search-bar { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:0px 30px; }
.search-total { font-size:13px; color:#666; }
.search-total b { color:var(--theme); }
.search-box { display:flex; gap:6px; }
.search-box select, .search-box input { height:38px; padding:0 10px; border:1px solid #d5d9e0; border-radius:6px; background:#fff; font-size:13px; }
.search-box input { width:220px; }
.search-box select:focus, .search-box input:focus { outline:none; border-color:var(--theme); box-shadow:0 0 0 3px var(--theme-ring); }

/* ========== 목록 테이블 ========== */
.table-wrap { overflow-x:auto; background:#fff;padding:0px 30px; }
.table-wrap-mail { overflow-x:auto; background:#fff;padding:0px 0px; }
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th { padding:13px 12px; background:#f8f9fb; border-bottom:1px solid #e6e9ef; font-weight:600; color:#555; text-align:left; white-space:nowrap; }
.admin-table td { padding:13px 12px; border-bottom:1px solid #f0f2f5; color:#333; vertical-align:middle; }
.admin-table tbody tr:hover { background:var(--theme-soft); }
.admin-table td small { display:block; margin-top:2px; font-size:11px; color:#999; }
.admin-table .col-num { width:70px; text-align:center; color:#999; }
.admin-table .col-manage { width:130px; text-align:center; white-space:nowrap; }
.admin-table .empty { padding:50px 0; text-align:center; color:#999; }

/* 사이트 상세 */
.sv-btns {display:flex;flex-wrap:wrap;gap:6px;}
.sv-wrap {display:flex;flex-wrap:wrap;gap:20px;margin:20px 0; padding:20px;}
.sv-box {flex:1 1 calc(50% - 10px);min-width:0;padding:20px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;}
.sv-title {display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px;font-weight:700;color:#222;}
.sv-title i {color:var(--theme);}
.sv-list {margin:0;}
.sv-row {display:flex;align-items:flex-start;padding:10px 0;border-top:1px solid #f1f2f4;}
.sv-row:first-child {border-top:0;}
.sv-row dt {flex:0 0 130px;font-size:13px;color:#888;}
.sv-row dd {flex:1;min-width:0;margin:0;font-size:14px;color:#222;word-break:break-all;}
.sv-code {font-family:Consolas, Menlo, monospace;}
.sv-memo {white-space:pre-line;}
.sv-left {margin-left:6px;font-style:normal;}
.sv-ok {margin:0;font-size:14px;color:#16a34a;}
.sv-fault {margin:0;}
.sv-link {color:inherit;font-weight:600;}
.sv-link:hover {color:var(--theme);text-decoration:underline;}

@media (min-width:1024px) and (max-width:1700px) {
    .sv-row dt {flex-basis:110px;}
}

@media (min-width:768px) and (max-width:1023px) {
    .sv-box {flex-basis:100%;}
    .sv-row dt {flex-basis:110px;}
}

@media (max-width:767px) {
    .sv-box {flex-basis:100%;padding:16px;}
    .sv-row {flex-direction:column;gap:4px;}
    .sv-row dt {flex-basis:auto;}
    .page-head .sv-btns {margin-top:10px;}
}

/* ========== 뱃지 ========== */
.badge { display:inline-block; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.4; }
.badge-top { background:var(--theme-soft2); color:var(--theme-dark); }
.badge-normal { background:#f1f3f6; color:#555; }
.badge-on { background:#dcf7e6; color:#15803d; }
.badge-off { background:#fde2e2; color:#b91c1c; }
.badge-me { margin-left:4px; background:#343a4a; color:#fff; }

/* ========== 탭 메뉴 ========== */
.tab-menu { display:flex; gap:4px; margin-bottom:20px; border-bottom:1.5px solid #ddd; padding-left:10px; }
.tab-menu a { position:relative; top:0px; padding:8px 22px; border:2px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; font-size:14px; font-weight:600; color:#777; transition:color 0.15s, background 0.15s; background:#f7f7f7 }
.tab-menu a:hover { color:var(--theme-dark); background:var(--theme-soft2); }
.tab-menu a.on { background:var(--theme); border-color:var(--theme);  color:var(--theme-on); }

.empty-text { padding:40px 0; text-align:center; color:#999; }
.preview-favicon { width:32px; height:32px; object-fit:contain; }


/* ========== 페이징 ========== */
.paging { display:flex; justify-content:center; gap:4px; margin-top:20px; }
.paging a { min-width:34px; height:34px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e1e4ea; border-radius:6px; background:#fff; font-size:13px; color:#555; }
.paging a:hover { border-color:var(--theme); color:var(--theme); }
.paging a.on { background:var(--theme); border-color:var(--theme); color:var(--theme-on); font-weight:600; }
.paging a.pg-arrow { color:#888; }

/* ========== 공통 입력 폼 ========== */
.form-box { max-width:1020px; padding:10px 28px 24px; background:#fff;}
.form-section { margin:26px 0 4px; padding-bottom:10px; border-bottom:2px solid #343a4a; font-size:15px; font-weight:700; color:#343a4a; }
.form-section:first-child { margin-top:14px; }

.form-row { display:flex; align-items:flex-start; gap:20px; padding:16px 0; border-bottom:1px solid #f0f2f5; }
.form-row:last-of-type { border-bottom:0; }
.form-label { flex:0 0 130px; padding-top:10px; font-size:13px; font-weight:600; color:#444; }
.form-label .req { margin-left:2px; font-style:normal; color:#ef4444; }
.form-field { flex:1; min-width:0; }
.form-field-2 { display:flex; gap:8px; }
.form-field-2 > * { flex:1; min-width:0; }

/* 입력칸 */
.form-field input[type=text], .form-field input[type=email], .form-field input[type=password], .form-field input[type=number], .form-field input[type=url], .form-field input[type=tel], .form-field input[type=date], .form-field select, .form-field textarea { width:100%; height:40px; padding:0 12px; border:1px solid #d5d9e0; border-radius:6px; background:#fff; font-size:14px; font-family:inherit; color:#222; transition:border-color 0.15s, box-shadow 0.15s; }
.form-field .selectshort { width:160px; }
.form-field textarea { height:auto; padding:10px 12px; line-height:1.6; resize:vertical; }
.form-field select { padding-right:30px; cursor:pointer; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline:none; border-color:var(--theme); box-shadow:0 0 0 3px var(--theme-ring); }
.form-field input::placeholder, .form-field textarea::placeholder { color:#aab1bd; }
.form-field input.is-readonly, .form-field input[readonly] { background:#f4f6f9; color:#888; cursor:not-allowed; }
.form-field input.is-error, .form-field textarea.is-error { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239, 68, 68, 0.12); }

/* 짧은 입력칸 */
.form-field .w-sm { max-width:160px; }
.form-field .w-md { max-width:320px; }

/* 파일 업로드 */
.form-field input[type=file] { width:100%; padding:8px 10px; border:1px dashed #c9ced8; border-radius:6px; background:#fafbfd; font-size:13px; cursor:pointer; }
.form-field input[type=file]:hover { border-color:var(--theme); background:var(--theme-soft); }
.form-preview { display:flex; align-items:center; gap:10px; margin-top:8px; }
.form-preview img { max-width:120px; max-height:80px; padding:4px; border:1px solid #e3e6ec; border-radius:6px; background:#fff; }

/* 도움말 · 에러 문구 */
.form-help { margin-top:6px; font-size:12px; color:#999; line-height:1.5; }
.form-help a { color:var(--theme); }
.form-help a:hover { text-decoration:underline; }
.form-error { margin-top:6px; font-size:12px; color:#dc2626; }

/* 라디오 · 체크박스 */
.radio-group, .check-group { display:flex; flex-wrap:wrap; gap:8px 20px; padding-top:10px; }
.radio, .check { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:#333; cursor:pointer; }
.radio input, .check input { width:16px; height:16px; margin:0; accent-color:var(--theme); cursor:pointer; }

/* 읽기 전용 정보 */
.form-info .form-field { padding-top:10px; font-size:13px; color:#666; line-height:1.8; }
.form-info small { margin-left:4px; color:#999; }

/* 하단 버튼 */
.form-actions { display:flex; justify-content:center; gap:8px; margin-top:6px; padding-top:24px; }
.form-actions .btn { min-width:110px; height:42px; }

.domain-input { display:flex; align-items:center; gap:8px; }
.domain-input input { flex:1 1 auto; min-width:0; }
.domain-input .btn { flex:none; height:40px; }

@media (max-width: 1024px) {
  .page-head { flex-wrap:wrap; gap:10px; }
  .search-bar { flex-direction:column; align-items:stretch; }
  .search-box { width:100%; }
  .search-box input { flex:1; width:auto; min-width:0; }
  .table-wrap { background:transparent; box-shadow:none; }
  .admin-table thead { display:none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display:block; width:100%; }
  .admin-table tr { margin-bottom:10px; padding:10px 14px; background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(17, 24, 39, 0.05); }
  .admin-table td { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed #eee; text-align:right; }
  .admin-table td:last-child { border-bottom:0; }
  .admin-table td::before { content:attr(data-label); flex-shrink:0; font-size:12px; font-weight:600; color:#888; text-align:left; }
  .admin-table .col-num { display:none; }
  .admin-table .col-manage { width:100%; justify-content:flex-end; gap:6px; }
  .admin-table .empty { display:block; text-align:center; }
  .admin-table .empty::before { content:none; }
  .paging a { min-width:30px; height:30px; font-size:12px; }
}

@media (max-width: 1024px) {
  .form-box { padding:6px 16px 20px; }
  .form-section { margin-top:20px; font-size:14px; }
  .form-row { flex-direction:column; gap:8px; padding:14px 0; }
  .form-label { flex:none; padding-top:0; }
  .form-field-2 { flex-direction:column; }
  .form-field .w-sm, .form-field .w-md { max-width:none; }
  .radio-group, .check-group { padding-top:0; }
  .form-info .form-field { padding-top:0; }
  .form-actions { padding-top:20px; }
  .form-actions .btn { flex:1; min-width:0; }
}
/* 제목줄 버튼 (목록 등) : 테두리 없이 얇게 */
.page-head .btn-light { height:auto; padding:8px 12px; border:0; background:transparent; box-shadow:none; color:#555; }
.page-head .btn-light:hover { background:var(--theme-soft); color:var(--theme-dark); }

@media (min-width:768px) and (max-width:1023px) {
    .page-head .btn-light { height:auto; padding:8px 12px; border:0; background:transparent; box-shadow:none; color:#555; }
    .page-head .btn-light:hover { background:var(--theme-soft); color:var(--theme-dark); }
}

@media (max-width:767px) {
    .page-head .btn-light { width:auto; align-self:flex-end; height:auto; padding:6px 10px; border:0; background:transparent; box-shadow:none; color:#555; }
    .page-head .btn-light:hover { background:var(--theme-soft); color:var(--theme-dark); }
}

/* ========== 관리자 로그인 ========== */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; background:#343a4a; }
.login-box { width:380px; padding:40px 32px 28px; background:#fff; border-radius:12px; box-shadow:0 20px 50px rgba(0, 0, 0, 0.35); }
.login-logo { text-align:center; font-size:20px; font-weight:700; color:#343a4a; margin-bottom:20px; }
.login-logo span { display:inline-block; padding:2px 9px; margin-right:4px; border-radius:50%; background:#343a4a; color:#fff; font-family:'SeoulNotice'; font-size:20px; }
.login-desc { margin:8px 0 26px; text-align:center; font-size:13px; color:#888; }
.login-field { display:flex; align-items:center; height:46px; margin-bottom:12px; padding:0 14px; border:1px solid #d5d9e0; border-radius:6px; background:#fff; }
.login-field:focus-within { border-color:#007bff; box-shadow:0 0 0 3px rgba(0, 123, 255, 0.15); }
.login-field i { width:18px; color:#aab1bd; font-size:14px; }
.login-field input { flex:1; min-width:0; height:100%; margin-left:0px; border:0; outline:none; font-size:14px; background:transparent; }
.login-btn { display:block; width:100%; height:48px; margin-top:6px; border-radius:6px; background:#007bff; color:#fff; font-size:15px; font-weight:600; }
.login-btn:hover { background:#0069d9; }
.login-home { display:block; margin-top:18px; text-align:center; font-size:13px; color:#888; }
.login-home:hover { color:#343a4a; }
.login-home i { margin-right:4px; }

/* 로그인 : 자동로그인 체크박스 (커스텀) */
.login-remember { display:inline-flex; align-items:center; gap:8px; margin:2px 0 6px; font-size:13px; color:#555; cursor:pointer; user-select:none; }
.login-remember input { appearance:none; -webkit-appearance:none; position:relative; flex:0 0 auto; width:18px; height:18px; margin:0; border:1.5px solid #c5ccd8; border-radius:5px; background:#fff; cursor:pointer; transition:background .2s, border-color .2s, box-shadow .2s; }
.login-remember input::after { content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .18s ease; }
.login-remember input:hover { border-color:#456fc8; }
.login-remember input:checked { background:#456fc8; border-color:#456fc8; }
.login-remember input:checked::after { transform:rotate(45deg) scale(1); }
.login-remember input:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(69,111,200,.25); }
.login-remember span { line-height:18px; }
.login-remember:hover span { color:#333; }

@media (min-width:768px) and (max-width:1023px) {
    .login-remember { display:inline-flex; align-items:center; gap:8px; margin:2px 0 6px; font-size:13px; color:#555; }
    .login-remember input { width:18px; height:18px; border-radius:5px; }
    .login-remember input::after { left:5px; top:1px; width:5px; height:10px; }
    .login-remember span { line-height:18px; }
}

@media (max-width:767px) {
    .login-remember { display:inline-flex; align-items:center; gap:9px; margin:4px 0 8px; font-size:14px; color:#555; }
    .login-remember input { width:20px; height:20px; border-radius:6px; }
    .login-remember input::after { left:6px; top:2px; width:5px; height:10px; }
    .login-remember span { line-height:20px; }
}

/* ========== 관리자 메인 (대시보드) ========== */
.dash-row { display:flex; gap:20px; margin-top:20px; }
.dash-row2 > .dash-box { flex:1 1 0; min-width:0; }
.dash-row3 > .dash-box { flex:1 1 0; min-width:0; }
.dash-row3 > .dash-join { flex:0 0 260px; }
.dash-box { display:flex; flex-direction:column; padding:20px 24px; background:#fff; border:1px solid #e5e8ec; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.dash-box-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.dash-box-head h3 { margin:0; font-size:16px; font-weight:700; color:#222; white-space:nowrap; }
.dash-box-head h3 i { margin-right:6px; color:var(--theme-dark); }
.dash-box-head h3 small { margin-left:6px; font-size:12px; font-weight:400; color:#999; }

/* 그래프 */
.dash-legend { display:flex; gap:12px; font-size:12px; color:#777; }
.dash-legend em { display:flex; align-items:center; gap:5px; font-style:normal; }
.dash-legend em:before { content:""; width:10px; height:10px; border-radius:2px; }
.dash-legend .lg-visit:before { background:var(--theme-dark); }
.dash-legend .lg-pv:before { background:#b8c2cf; }
.dash-chart { display:flex; align-items:stretch; gap:6px; height:220px; padding-top:18px; border-bottom:1px solid #e5e8ec; }
.dash-chart-col { display:flex; flex-direction:column; flex:1 1 0; min-width:0; }
.dash-chart-bars { display:flex; align-items:flex-end; justify-content:center; gap:3px; flex:1; }
.dash-chart-bars span { position:relative; display:block; width:40%; max-width:16px; height:0; border-radius:3px 3px 0 0; transition:height .9s cubic-bezier(.22,1,.36,1); }
.dash-chart-bars .bar-visit { background:var(--theme-dark); }
.dash-chart-bars .bar-pv { background:#b8c2cf; }
.dash-chart-bars span b { position:absolute; left:50%; bottom:100%; margin-bottom:3px; transform:translateX(-50%); font-size:10px; font-weight:600; color:#555; white-space:nowrap; opacity:0; transition:opacity .2s; }
.dash-chart-col:hover .dash-chart-bars span b { opacity:1; }
.dash-chart-col.today .dash-chart-bars span b { opacity:1; }
.dash-chart-col em { margin-top:6px; font-size:11px; font-style:normal; color:#999; text-align:center; white-space:nowrap; }
.dash-chart-col.today em { color:var(--theme-dark); font-weight:700; }

/* 방문 현황 */
.dash-stats { display:flex; flex-wrap:wrap; gap:12px; flex:1; }
.dash-stat { display:flex; flex-direction:column; justify-content:center; flex:1 1 calc(50% - 6px); min-width:0; padding:16px 18px; background:var(--theme-soft); border-radius:8px; }
.dash-stat i { font-size:18px; color:var(--theme-dark); }
.dash-stat span { margin-top:8px; font-size:13px; color:#666; }
.dash-stat strong { margin-top:4px; font-size:26px; font-weight:800; color:#222; white-space:nowrap; }
.dash-stat small { margin-top:2px; font-size:12px; color:#888; }
.dash-stat small b { color:var(--theme-dark); }

/* 목록 */
.dash-list { margin:0; padding:0; list-style:none; }
.dash-list li { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed #eceef1; font-size:14px; }
.dash-list li:last-child { border-bottom:0; }
.dash-list li p { flex:1; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#333; }
.dash-list li p small { color:#999; }
.dash-list li em { flex:0 0 auto; font-size:12px; font-style:normal; color:#999; }
.dash-list li > i { color:#aab2bd; }
.dash-list .dash-empty { justify-content:center; padding:30px 0; color:#999; }
.dash-badge { flex:0 0 auto; max-width:90px; padding:2px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--theme-dark); background:var(--theme-soft); border-radius:10px; }

/* 오늘 가입 */
.dash-join-body { display:flex; flex-direction:column; justify-content:center; flex:1; }
.dash-join-body strong { display:flex; align-items:baseline; justify-content:center; gap:4px; padding:20px 0; }
.dash-join-body strong b { font-size:54px; font-weight:800; color:var(--theme-dark); line-height:1; }
.dash-join-body strong span { font-size:16px; color:#666; }
.dash-join-body ul { margin:0; padding:0; list-style:none; border-top:1px solid #eceef1; }
.dash-join-body li { display:flex; justify-content:space-between; padding:10px 0; font-size:14px; color:#666; }
.dash-join-body li em { font-style:normal; font-weight:700; color:#222; }

/* 사용량 */
.dash-usage { margin-bottom:16px; }
.dash-usage:last-child { margin-bottom:0; }
.usage-head { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; font-size:13px; color:#555; }
.usage-head > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usage-head i { width:16px; margin-right:4px; color:var(--theme-dark); text-align:center; }
.usage-head em { flex:0 0 auto; font-style:normal; color:#888; }
.usage-bar { position:relative; height:22px; overflow:hidden; background:#eef0f3; border-radius:11px; }
.usage-fill { position:absolute; top:0; left:0; bottom:0; width:0; background:var(--theme-dark); border-radius:11px; transition:width 1.2s cubic-bezier(.22,1,.36,1); }
.usage-bar.warn .usage-fill { background:#f0a020; }
.usage-bar.danger .usage-fill { background:#e04848; }
.usage-bar b { position:relative; display:flex; align-items:center; justify-content:center; height:100%; font-size:12px; font-weight:700; color:#222; text-shadow:0 0 3px rgba(255,255,255,.9); }
.usage-bar b.usage-on { position:absolute; top:0; left:0; width:100%; color:var(--theme-on); text-shadow:none; clip-path:inset(0 100% 0 0); transition:clip-path 1.2s cubic-bezier(.22,1,.36,1); }
.usage-bar.warn b.usage-on { color:#fff; }
.usage-bar.danger b.usage-on { color:#fff; }
/* 플랫폼 정보 */
.dash-info { margin:0; padding:0; list-style:none; }
.dash-info li { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid #eceef1; font-size:14px; }
.dash-info li:last-child { border-bottom:0; }
.dash-info li span { flex:0 0 auto; color:#777; }
.dash-info li em { min-width:0; font-style:normal; font-weight:600; color:#222; text-align:right; word-break:break-all; }

/* 작은 데스크톱 (1024~1700) */
@media (min-width:1024px) and (max-width:1700px) {
    .dash-row { gap:16px; }
    .dash-box { padding:18px 18px; }
    .dash-row3 > .dash-join { flex:0 0 220px; }
    .dash-stat { padding:14px 14px; }
    .dash-stat strong { font-size:22px; }
    .dash-chart { gap:4px; }
    .dash-chart-col em { font-size:10px; }
    .dash-badge { max-width:70px; }
}

/* 태블릿 */
@media (min-width:768px) and (max-width:1023px) {
    .dash-row { flex-wrap:wrap; gap:16px; margin-top:16px; }
    .dash-row2 > .dash-box { flex:1 1 100%; }
    .dash-row3 > .dash-box { flex:1 1 calc(50% - 8px); }
    .dash-row3 > .dash-join { flex:1 1 100%; }
    .dash-box { padding:18px 18px; }
    .dash-box-head h3 { font-size:15px; }
    .dash-chart { gap:4px; height:200px; }
    .dash-chart-col em { font-size:10px; }
    .dash-stat { flex:1 1 calc(25% - 9px); padding:14px 14px; }
    .dash-stat strong { font-size:22px; }
    .dash-join-body { flex-direction:row; align-items:center; gap:20px; }
    .dash-join-body strong { flex:0 0 auto; padding:10px 20px; }
    .dash-join-body ul { flex:1; border-top:0; border-left:1px solid #eceef1; padding-left:20px; }
    .dash-badge { max-width:70px; }
}

/* 모바일 */
@media (max-width:767px) {
    .dash-row { flex-direction:column; gap:12px; margin-top:12px; }
    .dash-row2 > .dash-box { flex:1 1 auto; }
    .dash-row3 > .dash-box { flex:1 1 auto; }
    .dash-row3 > .dash-join { flex:1 1 auto; }
    .dash-box { padding:16px 14px; border-radius:8px; }
    .dash-box-head { flex-wrap:wrap; margin-bottom:12px; }
    .dash-box-head h3 { font-size:15px; }
    .dash-chart { gap:4px; height:180px; }
    .dash-chart-col:nth-child(-n+7) { display:none; }
    .dash-chart-col em { font-size:10px; }
    .dash-stats { gap:8px; }
    .dash-stat { flex:1 1 calc(50% - 4px); padding:12px 12px; }
    .dash-stat strong { font-size:20px; }
    .dash-list li { font-size:13px; }
    .dash-badge { max-width:64px; }
    .dash-join-body strong { padding:12px 0; }
    .dash-join-body strong b { font-size:44px; }
    .usage-head { font-size:12px; }
    .usage-bar { height:20px; }
    .dash-info li { font-size:13px; }
    .dash-info li span { flex:0 0 80px; }
}
/* ========== 게시판 관리 ========== */
.badge-type { background:#f1f3f6; color:#555; }
.badge-type.type-board { background:#e8f0ff; color:#1d4ed8; }
.badge-type.type-gallery { background:#fdeef8; color:#be185d; }
.badge-type.type-file { background:#e6f7f4; color:#0f766e; }
.badge-type.type-memo { background:#fff4dd; color:#b45309; }
.badge-type.type-guest { background:#efe9fd; color:#6d28d9; }

.link-url { display:inline-flex; align-items:center; gap:5px; font-family:Consolas, monospace; font-size:12px; color:var(--theme); }
.link-url i { font-size:10px; color:var(--theme-line); }
.link-url:hover { text-decoration:underline; }

@media (max-width: 1024px) {
  .link-url { font-size:11px; }
}
/* ========== 게시판 생성 / 수정 ========== */
.size-input { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.size-input input[type=number] { width:110px !important; }
.size-input .unit { font-size:13px; color:#888; }

.preview-text { font-family:Consolas, monospace; font-size:12px; color:var(--theme); }

.perm-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 16px; }
.perm-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid #eef0f4; border-radius:8px; background:#fafbfd; }
.perm-item .perm-name { flex:1; min-width:0; font-size:13px; font-weight:600; color:#444; }
.perm-item select { width:auto !important; min-width:90px; height:34px !important; font-size:13px !important; }

.form-row.is-disabled { opacity:0.45; }
.form-row.is-disabled input { cursor:not-allowed; }

.check-group + .check-group { margin-top:4px; }

@media (max-width: 1024px) {
  .size-input input[type=number] { width:90px !important; }
  .perm-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
  .perm-item { padding:8px 10px; }
}

@media (max-width: 767px) {
  .perm-grid { grid-template-columns:1fr; }
}

@media (max-width: 1024px) {
  .tab-menu { overflow-x:auto; white-space:nowrap; }
  .tab-menu a { flex-shrink:0; padding:10px 16px; font-size:13px; }
}
/* ========== 사이트 설정 - 메뉴 ========== */
.form-box.form-wide { max-width:1200px; }
.menu-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; }
.menu-head .form-help { margin-top:0; }
.menu-wrap { box-shadow:none; border:1px solid #e6e9ef; }

.menu-table td { padding:8px 8px; }
.menu-table input[type=text], .menu-table select { width:100%; height:36px; padding:0 10px; border:1px solid #d5d9e0; border-radius:6px; background:#fff; font-size:13px; font-family:inherit; }
.menu-table input[type=text]:focus, .menu-table select:focus { outline:none; border-color:var(--theme); box-shadow:0 0 0 3px var(--theme-ring); }
.menu-table input[type=radio], .menu-table input[type=checkbox] { width:16px; height:16px; accent-color:var(--theme); cursor:pointer; }

.menu-table .col-order { width:76px; white-space:nowrap; text-align:center; }
.menu-table .col-type { width:110px; }
.menu-table .col-index, .menu-table .col-del { width:64px; text-align:center; }
.menu-table .col-status { width:90px; }

.order-btn { width:28px; height:28px; border:1px solid #e1e4ea; border-radius:6px; background:#fff; font-size:11px; color:#777; }
.order-btn:hover { border-color:var(--theme); color:var(--theme); }
.order-btn.row-remove:hover { border-color:#ef4444; color:#ef4444; }

.menu-table tr.is-new { background:var(--theme-soft); }
.menu-table tr.is-del { opacity:0.4; }
.menu-table tr.is-del input[type=text] { text-decoration:line-through; }

@media (max-width: 1024px) {
  .menu-head { flex-direction:column; align-items:flex-start; }
  .menu-wrap { overflow-x:auto; }
  .menu-table { min-width:820px; }
  .menu-table thead { display:table-header-group; }
  .menu-table, .menu-table tbody { display:table; width:100%; }
  .menu-table tr { display:table-row; margin:0; padding:0; box-shadow:none; border-radius:0; }
  .menu-table td { display:table-cell; width:auto; padding:6px; border-bottom:1px solid #f0f2f5; text-align:left; }
  .menu-table td::before { content:none; }
  .menu-table .col-order, .menu-table .col-index, .menu-table .col-del { text-align:center; }
}
/* ========== 사이트 설정 - 레이아웃 ========== */
.layout-help { margin:14px 0 18px; }
.layout-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; padding-bottom:10px; }
.layout-card { display:flex; flex-direction:column; border:2px solid #e6e9ef; border-radius:10px; background:#fff; overflow:hidden; transition:border-color 0.15s, box-shadow 0.15s; }
.layout-card:hover { border-color:var(--theme-line); box-shadow:0 6px 18px rgba(17, 24, 39, 0.08); }
.layout-card.is-active { border-color:var(--theme); }

.layout-thumb { position:relative; aspect-ratio:4 / 3; background:#e5e7eb; }
.layout-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.layout-noshot { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; height:100%; color:#9ca3af; }
.layout-noshot i { font-size:34px; }
.layout-noshot span { font-size:12px; letter-spacing:0.5px; }
.layout-badge { position:absolute; top:10px; right:10px; }

.layout-info { flex:1; padding:14px 16px 8px; }
.layout-title { display:block; font-size:15px; font-weight:700; color:#343a4a; }
.layout-folder { display:block; margin-top:4px; font-family:Consolas, monospace; font-size:12px; color:#999; }

.layout-action { display:flex; gap:6px; padding:10px 20px;  }
.layout-action form { flex:1; }
.layout-action .le-edit { flex:0 0 auto; width:auto; }
.layout-tool { display:flex; justify-content:flex-end; margin:0 0 14px; }

/* #########################################################
 * 레이아웃 편집 (웹FTP)
 * ######################################################### */
.le-site { margin-left:8px; font-size:12px; font-weight:400; color:#999; }
.le-back { margin:0 15px 0 0; height:34px; padding:0 14px; }
.le-wrap { display:flex; height:calc(100vh - 230px); min-height:520px; margin:20px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; overflow:hidden; }
.le-side { flex:0 0 280px; display:flex; flex-direction:column; min-width:0; border-right:1px solid #e5e7eb; background:#fafbfc; }
.le-stool { display:flex; gap:4px; padding:8px; border-bottom:1px solid #eef0f3; }
.le-tbtn { width:34px; height:32px; padding:0; border:1px solid #dfe3e8; border-radius:6px; background:#fff; font-size:13px; color:#555; cursor:pointer; }
.le-tbtn:hover { border-color:var(--theme); color:var(--theme); }
.le-cur { padding:7px 12px; border-bottom:1px solid #eef0f3; overflow:hidden; font-size:12px; color:#777; white-space:nowrap; text-overflow:ellipsis; }
.le-cur i { margin-right:4px; color:var(--theme); }
.le-tree { flex:1; margin:0; padding:6px 0; list-style:none; overflow:auto; font-size:13px; }
.le-sub { display:none; margin:0; padding:0 0 0 14px; list-style:none; }
.le-node.open > .le-sub { display:block; }
.le-row { display:flex; align-items:center; gap:6px; height:28px; padding:0 8px; cursor:pointer; white-space:nowrap; }
.le-row:hover { background:#eef1f5; }
.le-row.on { background:var(--theme-soft2); color:var(--theme-dark); font-weight:600; }
.le-caret { flex:0 0 10px; font-size:11px; color:#999; text-align:center; }
.le-ic { flex:0 0 16px; font-size:13px; color:#8a93a3; text-align:center; }
.le-dir > .le-row > .le-ic { color:#e0a526; }
.le-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.le-acts { display:none; gap:2px; }
.le-row:hover .le-acts { display:inline-flex; }
.le-acts button { width:22px; height:22px; padding:0; border:0; border-radius:4px; background:transparent; font-size:11px; color:#777; cursor:pointer; }
.le-acts button:hover { background:#dfe3e8; color:#222; }
.le-none { padding:4px 10px; font-size:12px; color:#aaa; }
.le-err { padding:6px 10px; font-size:12px; color:#c0392b; }
.le-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.le-bar { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid #eef0f3; }
.le-path { flex:1; min-width:0; overflow:hidden; font-family:Consolas, Menlo, monospace; font-size:13px; color:#444; white-space:nowrap; text-overflow:ellipsis; transition:color .3s; }
.le-path.saved { color:#16a34a; }
.le-dirty { display:none; font-style:normal; font-size:14px; color:#e04848; }
.le-dirty.on { display:inline; }
.le-auto { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#666; white-space:nowrap; cursor:pointer; }
.le-auto input { margin:0; accent-color:var(--theme); }
.le-save { height:32px; margin:0; padding:0 14px; }
.le-editor { position:relative; flex:1; min-height:0; }
.le-editor .CodeMirror { position:absolute; inset:0; height:auto; font-family:Consolas, Menlo, "D2Coding", monospace; font-size:13px; line-height:1.55; }
.le-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; color:#aaa; }
.le-empty i { font-size:36px; color:#d0d5dc; }
.le-empty p { margin:0; font-size:14px; }
.le-build { border-top:1px solid #eef0f3; background:#fafbfc; }
.le-bhead { display:flex; align-items:center; gap:10px; padding:7px 12px; }
.le-bstate { font-size:12px; font-weight:600; color:#888; }
.le-bstate i { margin-right:3px; font-size:9px; }
.le-bstate.is-run { color:#2563eb; }
.le-bstate.is-run i { font-size:12px; }
.le-bstate.is-ok { color:#16a34a; }
.le-bstate.is-fail { color:#c0392b; }
.le-btime { font-style:normal; font-size:12px; color:#999; }
.le-lbtn { margin-left:auto; padding:4px 8px; border:0; border-radius:4px; background:transparent; font-size:12px; color:#666; cursor:pointer; }
.le-lbtn:hover { background:#eef1f5; }
.le-bbtn { height:30px; margin:0; padding:0 12px; font-size:12px; }
.le-log { display:none; max-height:180px; margin:0; padding:10px 12px; overflow:auto; border-top:1px solid #eef0f3; background:#1e1f24; font-family:Consolas, Menlo, monospace; font-size:12px; line-height:1.5; color:#d4d4d4; white-space:pre-wrap; word-break:break-all; }
.le-log.on { display:block; }
.le-token { display:none; }

@media (min-width:1024px) and (max-width:1700px) {
    .le-side { flex:0 0 240px; }
    .le-wrap { height:calc(100vh - 240px); }
}

@media (min-width:768px) and (max-width:1023px) {
    .le-back { margin:0 10px 0 0; padding:0 12px; }
    .le-wrap { height:calc(100vh - 220px); margin:20px; }
    .le-side { flex:0 0 220px; }
    .le-acts { display:inline-flex; }
    .le-auto { font-size:11px; }
}

@media (max-width:767px) {
    .le-site { display:block; margin:2px 0 0; }
    .le-back { margin:0 10px 0 0; padding:0 10px; font-size:12px; }
    .le-wrap { flex-direction:column; height:auto; min-height:0; margin:20px; }
    .le-side { flex:none; max-height:260px; border-right:0; border-bottom:1px solid #e5e7eb; }
    .le-acts { display:inline-flex; }
    .le-row { height:32px; }
    .le-bar { flex-wrap:wrap; gap:8px; }
    .le-path { flex:1 1 100%; order:1; }
    .le-auto { order:2; }
    .le-save { order:3; margin-left:auto; }
    .le-editor { flex:none; height:60vh; }
    .le-bhead { flex-wrap:wrap; }
    .le-lbtn { margin-left:0; }
    .le-bbtn { margin-left:auto; }
}

@media (max-width: 1024px) {
  .layout-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .layout-info { padding:12px 12px 6px; }
  .layout-action { padding:0 12px 12px; }
}

@media (max-width: 767px) {
  .layout-grid { grid-template-columns:1fr; }
}
/* ========== 사이트 설정 - 기준 디렉토리 ========== */
.page-dir-input { margin-top:10px; }
.page-dir-input.is-disabled { opacity:0.4; }
.page-dir-input.is-disabled input { cursor:not-allowed; }

@media (max-width: 1024px) {
  .page-dir-input { margin-top:8px; }
}
/* ========== 게시판 생성 - 메뉴에서 찾기 ========== */
.id-find { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.id-find select { width:auto !important; min-width:220px; max-width:100%; }
.menu-linked { color:#16a34a; font-weight:600; }
.menu-linked:empty { display:none; }

@media (max-width: 1024px) {
  .id-find { flex-direction:column; align-items:stretch; }
  .id-find select { min-width:0; width:100% !important; }
}
/* ========== 회원 관리 ========== */
.tab-menu.tab-sm { margin-bottom:14px; }
.tab-menu.tab-sm a { padding:9px 16px; font-size:13px; }
.tab-menu.tab-sm a b { margin-left:4px;  font-weight:700; }

.member-id { display:flex; align-items:center; gap:8px; }
.member-icon { flex:0 0 28px; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#eef1f6; color:#aab1bd; font-size:12px; overflow:hidden; }
.member-icon img { width:100%; height:100%; object-fit:cover; }

@media (max-width: 1024px) {
  .tab-menu.tab-sm a { padding:8px 12px; font-size:12px; }
  .member-id { justify-content:flex-end; }
}
/* ========== 회원 수정 ========== */
.zip-input { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.zip-input .btn { height:40px; }
.addr-input { margin-top:8px; }
.form-field input[readonly].addr-input, .form-field #zipcode[readonly] { background:#f8f9fb; color:#333; cursor:default; }

.zip-layer { display:none; position:relative; height:440px; margin-top:10px; border:1px solid #d5d9e0; border-radius:8px; overflow:hidden; background:#fff; }
.zip-layer.is-open { display:block; }
.zip-layer #zip-wrap { width:100%; height:100%; }
.zip-close { position:absolute; top:8px; right:8px; z-index:2; width:30px; height:30px; border-radius:50%; background:#343a4a; font-size:13px; color:#fff; }
.zip-close:hover { background:#000; }

.preview-icon { width:48px !important; height:48px !important; border-radius:50%; object-fit:cover; }

@media (max-width: 1024px) {
  .zip-input .btn { flex:1; }
  .zip-layer { height:400px; }
}

/* ========== 사이트 설정 - 메뉴 ========== */
.form-box.form-wide { max-width:1200px; }
.menu-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; }
.menu-head .form-help { margin-top:0; }
.menu-wrap { box-shadow:none; border:1px solid #e6e9ef; }

.menu-table td { padding:8px 8px; }
.menu-table input[type=text], .menu-table select { width:100%; height:36px; padding:0 10px; border:1px solid #d5d9e0; border-radius:6px; background:#fff; font-size:13px; font-family:inherit; }
.menu-table input[type=text]:focus, .menu-table select:focus { outline:none; border-color:var(--theme); box-shadow:0 0 0 3px var(--theme-ring); }
.menu-table input[type=radio], .menu-table input[type=checkbox] { width:16px; height:16px; accent-color:var(--theme); cursor:pointer; }

.menu-table .col-order { width:76px; white-space:nowrap; text-align:center; }
.menu-table .col-type { width:110px; }
.menu-table .col-index, .menu-table .col-del { width:64px; text-align:center; }
.menu-table .col-status { width:90px; }

.order-btn { width:28px; height:28px; border:1px solid #e1e4ea; border-radius:6px; background:#fff; font-size:11px; color:#777; }
.order-btn:hover { border-color:var(--theme); color:var(--theme); }
.order-btn.row-remove:hover { border-color:#ef4444; color:#ef4444; }

.menu-table tr.is-new { background:var(--theme-soft); }
.menu-table tr.is-del { opacity:0.4; }
.menu-table tr.is-del input[type=text] { text-decoration:line-through; }

@media (max-width: 1024px) {
  .menu-head { flex-direction:column; align-items:flex-start; }
  .menu-wrap { overflow-x:auto; }
  .menu-table { min-width:820px; }
  .menu-table thead { display:table-header-group; }
  .menu-table, .menu-table tbody { display:table; width:100%; }
  .menu-table tr { display:table-row; margin:0; padding:0; box-shadow:none; border-radius:0; }
  .menu-table td { display:table-cell; width:auto; padding:6px; border-bottom:1px solid #f0f2f5; text-align:left; }
  .menu-table td::before { content:none; }
  .menu-table .col-order, .menu-table .col-index, .menu-table .col-del { text-align:center; }
}
/* ========== 메뉴 상태 표시 ========== */
.menu-table tr.is-hidden td { background:#f6f7f9; }
.menu-table tr.is-hidden input[type=text] { color:#999; }
.menu-table tr.is-stop td { background:#fdf4f4; }
.menu-table tr.is-stop input[type=text] { color:#c08080; }

@media (max-width: 1024px) {
  .menu-table tr.is-hidden td { background:#f6f7f9; }
  .menu-table tr.is-stop td { background:#fdf4f4; }
}
/* ========== 메뉴 열기 칸 ========== */
.menu-table .col-open { width:100px; }
.menu-table .col-open select { width:100%; }

@media (max-width:1024px){
.menu-table .col-open { width:90px; }
}

/* ========== 모바일 (767px 이하) ========== */
@media (max-width:767px) {

/* 로그인 */
.login-body { padding:12px; }
.login-box { padding:28px 16px 20px; border-radius:10px; }
.login-logo { font-size:17px; }
.login-logo span { font-size:17px; }
.login-desc { margin:6px 0 20px; font-size:12px; }
.login-field { height:42px; padding:0 12px; }
.login-field input { font-size:13px; }
.login-btn { height:44px; font-size:14px; }

/* 메시지 박스 */
.msgbox { gap:8px; padding:10px 12px; margin-bottom:12px; }
.msgbox .msg-icon { flex:0 0 26px; width:26px; height:26px; font-size:13px; }
.msgbox .msg-body { padding-top:3px; }

/* 레이아웃 · 사이드바 */
#container { padding:10px; }
.admin-logo, .admin-userinfo, .admin-home { height:50px; padding:0 14px; }
.admin-logo h1 { font-size:18px; }
.admin-logo span { font-size:18px; }
.admin-userinfo .name, .admin-home .home { font-size:14px; }
#admin-side nav .menu-group { height:46px; padding:0 14px; }
#admin-side nav .menu-group span { font-size:15px; margin-left:10px; }
#admin-side nav .menu-group > i:first-child { font-size:17px; }
#admin-side nav .menu-item { height:38px; line-height:38px; padding:0 32px; font-size:13px; }
#admin-side nav .menu-item.on { padding-left:29px; }

/* 본문 공통 */
.admin-content { padding:12px; border-radius:8px; }
.page-title { font-size:16px; padding-bottom:12px;  }
#admin-footer { margin-top:24px; padding-top:12px; font-size:11px; }
.page-head { flex-direction:column; align-items:stretch; }
.page-head .btn { width:100%; }

/* 버튼 */
.btn { height:36px; padding:0 12px; font-size:12px; }
.btn-sm { height:28px; padding:0 8px; font-size:11px; }

/* 검색 */
.search-box { flex-wrap:wrap; }
.search-box select { flex:1 1 100%; }
.search-box input { flex:1; }
.search-box select, .search-box input { height:36px; font-size:12px; }

/* 목록 테이블 (카드형) */
.admin-table tr { padding:8px 12px; border-radius:8px; }
.admin-table td { padding:7px 0; font-size:12px; }
.admin-table td::before { font-size:11px; }
.admin-table .col-manage { flex-wrap:wrap; }
.badge { padding:2px 7px; font-size:10px; }

/* 페이징 */
.paging { flex-wrap:wrap; gap:3px; margin-top:14px; }
.paging a { min-width:28px; height:28px; padding:0 4px; font-size:11px; }

/* 입력 폼 */
.form-box { padding:4px 12px 16px; border-radius:8px; }
.form-section { margin-top:16px; font-size:13px; }
.form-row { padding:12px 0; }
.form-label { font-size:12px; }
.form-field input[type=text], .form-field input[type=email], .form-field input[type=password], .form-field input[type=number], .form-field input[type=url], .form-field input[type=tel], .form-field input[type=date], .form-field select { height:38px; font-size:13px; }
.form-field textarea { font-size:13px; }
.form-preview { flex-wrap:wrap; }
.radio-group, .check-group { gap:6px 14px; }
.radio, .check { font-size:13px; }
.form-actions { flex-direction:column; }
.form-actions .btn { width:100%; height:40px; }

/* 게시판 생성 · 수정 */
.size-input input[type=number] { width:80px !important; }
.perm-item select { min-width:80px; }

/* 탭 메뉴 */
.tab-menu a { padding:9px 12px; font-size:12px; }
.tab-menu.tab-sm a { padding:7px 10px; font-size:11px; }

/* 사이트 설정 - 메뉴 */
.menu-head .btn { width:100%; }
.menu-table { min-width:760px; }

/* 레이아웃 카드 */
.layout-grid { gap:10px; }
.layout-title { font-size:14px; }

/* 회원 수정 - 우편번호 */
.zip-layer { height:360px; }
}
/* ========== 사이트 설정 - 페이지 파일 ========== */
.page-file-actions { display:flex; flex-wrap:wrap; gap:8px; }
.page-file-result { margin-top:10px; color:#2e7d32; font-size:13px; }
.page-file-wrap { margin-top:12px; }
.page-file-table .col-path { font-family:monospace; font-size:12px; color:#555; word-break:break-all; }
.page-file-table .col-state { width:90px; text-align:center; }
.badge-empty { background:#fff4e0; color:#c77700; }

@media (min-width:768px) and (max-width:1023px) {
.page-file-actions { display:flex; flex-wrap:wrap; gap:8px; }
.page-file-result { margin-top:10px; color:#2e7d32; font-size:13px; }
.page-file-wrap { margin-top:10px; }
.page-file-table .col-path { font-family:monospace; font-size:12px; color:#555; word-break:break-all; }
.page-file-table .col-state { width:80px; text-align:center; }
.badge-empty { background:#fff4e0; color:#c77700; }
}

@media (max-width:767px) {
.page-file-actions { display:flex; flex-wrap:wrap; gap:6px; }
.page-file-result { margin-top:8px; color:#2e7d32; font-size:12px; }
.page-file-wrap { margin-top:8px; }
.page-file-table .col-path { font-family:monospace; font-size:11px; color:#555; word-break:break-all; }
.page-file-table .col-state { width:auto; text-align:left; }
.badge-empty { background:#fff4e0; color:#c77700; }
}
/* ========== 사이트 설정 - 기타 설정 ========== */
.maint-time { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ip-textarea { font-family:monospace; font-size:13px; }
.form-field .check + .ip-textarea { margin-top:8px; }

@media (min-width:768px) and (max-width:1023px) {
.maint-time { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ip-textarea { font-family:monospace; font-size:13px; }
.form-field .check + .ip-textarea { margin-top:8px; }
}

@media (max-width:767px) {
.maint-time { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.maint-time .unit { text-align:center; }
.ip-textarea { font-family:monospace; font-size:12px; }
.form-field .check + .ip-textarea { margin-top:6px; }
}

/* ========== 사이트 설정 - 점검 시간 ========== */
.maint-box { display:flex; align-items:stretch; gap:12px; max-width:620px; }
.maint-field { flex:1 1 0; display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid #e3e7ef; border-radius:10px; background:var(--theme-soft); transition:border-color 0.2s ease, box-shadow 0.2s ease; }
.maint-field:focus-within { border-color:var(--theme); box-shadow:0 0 0 3px var(--theme-ring); background:#fff; }
.maint-label { font-size:12px; font-weight:600; color:var(--theme); }
.maint-label i { margin-right:4px; }
.maint-field input[type=datetime-local] { width:100%; padding:0; border:0; background:transparent; font-size:15px; color:#222; outline:none; }
.maint-arrow { display:flex; align-items:center; color:var(--theme-line); font-size:14px; }
.maint-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; max-width:620px; margin-top:10px; }
.maint-dur { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; background:#f1f3f7; color:#777; font-size:13px; }
.maint-dur.is-ok { background:var(--theme-soft2); color:var(--theme); font-weight:600; }
.maint-dur.is-error { background:#fdecec; color:#d14343; font-weight:600; }
.maint-quick { display:flex; flex-wrap:wrap; gap:6px; }

@media (min-width:768px) and (max-width:1023px) {
.maint-box { display:flex; align-items:stretch; gap:10px; max-width:100%; }
.maint-field { flex:1 1 0; display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid #e3e7ef; border-radius:10px; background:var(--theme-soft); }
.maint-field:focus-within { border-color:var(--theme); box-shadow:0 0 0 3px var(--theme-ring); background:#fff; }
.maint-label { font-size:12px; font-weight:600; color:var(--theme); }
.maint-field input[type=datetime-local] { width:100%; padding:0; border:0; background:transparent; font-size:14px; color:#222; outline:none; }
.maint-arrow { display:flex; align-items:center; color:var(--theme-line); font-size:13px; }
.maint-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; max-width:100%; margin-top:10px; }
.maint-dur { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; background:#f1f3f7; color:#777; font-size:13px; }
.maint-quick { display:flex; flex-wrap:wrap; gap:6px; }
}

@media (max-width:767px) {
.maint-box { display:flex; flex-direction:column; align-items:stretch; gap:6px; max-width:100%; }
.maint-field { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid #e3e7ef; border-radius:10px; background:var(--theme-soft); }
.maint-field:focus-within { border-color:var(--theme); box-shadow:0 0 0 3px var(--theme-ring); background:#fff; }
.maint-label { font-size:12px; font-weight:600; color:var(--theme); }
.maint-field input[type=datetime-local] { width:100%; padding:0; border:0; background:transparent; font-size:14px; color:#222; outline:none; }
.maint-arrow { justify-content:center; color:var(--theme-line); font-size:12px; transform:rotate(90deg); }
.maint-tools { display:flex; flex-direction:column; align-items:stretch; gap:8px; max-width:100%; margin-top:8px; }
.maint-dur { display:flex; justify-content:center; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; background:#f1f3f7; color:#777; font-size:12px; }
.maint-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
}

/* ========== 관리 사이트 - 네임서버 확인 결과 ========== */
#ns-check-result.ns-loading { color:var(--theme); }
#ns-check-result.ns-ok { color:#15803d; font-weight:600; }
#ns-check-result.ns-fail { color:#dc2626; font-weight:600; }

@media (min-width:768px) and (max-width:1023px) {
#ns-check-result.ns-loading { color:var(--theme); font-size:12px; }
#ns-check-result.ns-ok { color:#15803d; font-weight:600; font-size:12px; }
#ns-check-result.ns-fail { color:#dc2626; font-weight:600; font-size:12px; }
}

@media (max-width:767px) {
#ns-check-result.ns-loading { color:var(--theme); font-size:11px; word-break:break-all; }
#ns-check-result.ns-ok { color:#15803d; font-weight:600; font-size:11px; word-break:break-all; }
#ns-check-result.ns-fail { color:#dc2626; font-weight:600; font-size:11px; word-break:break-all; }
}
/* ========== 관리 사이트 - 설치 로딩 ========== */
.install-box { max-width:860px; margin:10px 30px 30px; padding:24px; border:1px solid #e3e7ef; border-radius:10px; background:#fff; }
.install-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.install-icon { display:flex; align-items:center; justify-content:center; flex:none; width:46px; height:46px; border-radius:50%; font-size:22px; }
.install-head.is-run .install-icon { background:var(--theme-soft2); color:var(--theme); }
.install-head.is-ok .install-icon { background:#dcf7e6; color:#16a34a; }
.install-head.is-fail .install-icon { background:#fde2e2; color:#dc2626; }
.install-text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.install-text strong { font-size:17px; color:#343a4a; }
.install-text span { font-size:13px; color:#888; }
.install-log { height:320px; margin:0; padding:14px 16px; overflow:auto; border-radius:8px; background:#1f2430; color:#d6deeb; font-family:Consolas, monospace; font-size:12px; line-height:1.7; white-space:pre-wrap; word-break:break-all; }
.install-actions { display:none; justify-content:center; gap:8px; margin-top:16px; }
.install-actions.is-show { display:flex; }
.install-actions .is-hide { display:none; }

@media (min-width:768px) and (max-width:1023px) {
.install-box { max-width:100%; margin:10px 16px 24px; padding:20px; }
.install-head { display:flex; align-items:center; gap:12px; }
.install-icon { width:42px; height:42px; font-size:20px; }
.install-text strong { font-size:16px; }
.install-log { height:280px; font-size:12px; }
.install-actions.is-show { display:flex; flex-wrap:wrap; }
}

@media (max-width:767px) {
.install-box { max-width:100%; margin:8px 10px 20px; padding:14px; }
.install-head { display:flex; align-items:flex-start; gap:10px; }
.install-icon { width:38px; height:38px; font-size:18px; }
.install-text strong { font-size:15px; }
.install-text span { font-size:12px; }
.install-log { height:240px; padding:10px 12px; font-size:11px; }
.install-actions.is-show { display:flex; flex-direction:column; }
.install-actions .btn, .install-actions .inline-form .btn { width:100%; }
}
/* ========== 관리 사이트 - 아이디 + 2차 도메인 ========== */
.subdomain-input { display:flex; align-items:stretch; max-width:420px; }
.subdomain-input input { flex:1 1 auto; min-width:0; border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
.subdomain-base { display:flex; align-items:center; flex:none; padding:0 14px; border:1px solid #d5d9e0; border-left:0; border-radius:0 6px 6px 0; background:#f4f6f9; color:#555; font-size:14px; font-family:Consolas, monospace; }

@media (min-width:768px) and (max-width:1023px) {
.subdomain-input { display:flex; align-items:stretch; max-width:100%; }
.subdomain-input input { flex:1 1 auto; min-width:0; }
.subdomain-base { padding:0 12px; font-size:13px; }
}

@media (max-width:767px) {
.subdomain-input { display:flex; align-items:stretch; max-width:100%; }
.subdomain-input input { flex:1 1 auto; min-width:0; }
.subdomain-base { padding:0 10px; font-size:12px; }
}
.bank-custom { margin-top:8px; }
.bank-custom[hidden] { display:none; }

/* 로그인 문자 인증 */
.otp-info { margin:0 0 16px; font-size:14px; line-height:1.7; color:#555; text-align:center; }
.otp-info b { color:#222; }
.otp-timer { display:inline-block; margin-left:4px; font-weight:700; color:var(--theme); }
.otp-timer.over { color:#dc2626; }
.otp-code input { font-size:20px; letter-spacing:8px; text-align:center; }
.otp-code input::placeholder { font-size:14px; letter-spacing:0; }
.otp-sub { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.otp-sub form { margin:0; }
.otp-link { border:0; background:none; padding:0; font-size:13px; color:var(--theme); cursor:pointer; }
.otp-link:hover { text-decoration:underline; }
.otp-link:disabled { color:#aaa; cursor:default; text-decoration:none; }
.otp-link.gray { color:#888; }

@media (min-width:768px) and (max-width:1023px) {
    .otp-info { margin:0 0 16px; font-size:14px; }
    .otp-code input { font-size:20px; letter-spacing:8px; }
    .otp-sub { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
    .otp-link { font-size:13px; }
}

@media (max-width:767px) {
    .otp-info { margin:0 0 14px; font-size:13px; }
    .otp-code input { font-size:18px; letter-spacing:6px; }
    .otp-sub { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
    .otp-link { font-size:13px; padding:6px 0; }
}

/* 사이트 로그 */
.visit-summary { display:flex; gap:12px; margin-bottom:16px; margin-left:20px; margin-right:20px; }
.visit-summary .vs-item { flex:1; padding:16px 18px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; }
.visit-summary .vs-label { display:block; font-size:13px; color:#888; }
.visit-summary .vs-num { display:block; margin-top:6px; font-size:22px; font-weight:700; color:var(--theme-dark); }
.visit-quick { display:flex; gap:6px; margin-bottom:10px; margin-left:20px; margin-right:20px; }
.visit-tilde { color:#999; }
.visit-ip a { font-weight:600; color:#222; }
.visit-ip a:hover { color:var(--theme); }
.visit-ref .visit-site { font-weight:700; color:#222; }
.visit-ref .visit-site:hover { color:var(--theme); }
.visit-ref .visit-keyword { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; background:var(--theme-soft2); font-size:12px; color:var(--theme-dark); }
.visit-ref .visit-url { display:block; margin-top:3px; font-size:12px; color:#8a8f98; word-break:break-all; }
.visit-ref a.visit-url:hover { color:var(--theme); text-decoration:underline; }
.visit-direct { color:#888; }
.visit-country { white-space:nowrap; }
.visit-isp { color:#555; font-size:13px; white-space:nowrap; }
.visit-page { display:block; margin-top:4px; max-width:360px; color:#888; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.visit-page i { margin-right:2px; font-size:11px; }
.visit-page:hover { color:#1e88e5; }

@media (min-width:1024px) and (max-width:1700px) {
    .visit-page { max-width:260px; }
    .visit-isp { font-size:12px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .visit-page { max-width:200px; }
    .visit-isp { font-size:12px; }
}

@media (max-width:767px) {
    .visit-page { max-width:none; white-space:normal; word-break:break-all; }
    .visit-isp { white-space:normal; }
}


@media (min-width:768px) and (max-width:1023px) {
    .visit-summary { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
    .visit-summary .vs-item { flex:1 1 calc(50% - 5px); padding:14px 16px; }
    .visit-summary .vs-num { font-size:20px; }
    .visit-quick { display:flex; gap:6px; margin-bottom:10px; }
    .visit-ref .visit-keyword { font-size:12px; }
    .visit-ref .visit-url { font-size:12px; }
}

@media (max-width:767px) {
    .visit-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
    .visit-summary .vs-item { flex:1 1 calc(50% - 4px); padding:12px 14px; }
    .visit-summary .vs-label { font-size:12px; }
    .visit-summary .vs-num { margin-top:4px; font-size:18px; }
    .visit-quick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
    .visit-quick .btn { flex:1; text-align:center; }
    .visit-tilde { display:none; }
    .visit-ref .visit-keyword { display:inline-block; margin:4px 0 0; font-size:11px; }
    .visit-ref .visit-url { font-size:11px; }
}
/* 국가별 접속 차단 */
.geo-group { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; }
.geo-group .geo-off { padding-left:20px; border-left:1px solid #e5e7eb; color:#dc2626; }

@media (min-width:768px) and (max-width:1023px) {
    .geo-group { display:flex; flex-wrap:wrap; gap:8px 16px; }
    .geo-group .geo-off { padding-left:16px; }
}

@media (max-width:767px) {
    .geo-group { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
    .geo-group .geo-off { padding-left:0; padding-top:8px; border-left:0; border-top:1px solid #e5e7eb; width:100%; }
}
/* 마이페이지 - 포인트 색상 */
.theme-colors { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.theme-color { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:14px; }
.theme-color .swatch { display:inline-block; width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #d1d5db; }
.theme-color input:checked + .swatch { box-shadow:0 0 0 2px var(--theme); }
.theme-color .sw-0 { background:#222222; }
.theme-color .sw-1 { background:#0062cc; }
.theme-color .sw-2 { background:#198754; }
.theme-color .sw-3 { background:#6f42c1; }
.theme-color .swatch-input { width:30px; height:26px; padding:0; border:1px solid #d1d5db; border-radius:6px; background:none; cursor:pointer; }

@media (min-width:768px) and (max-width:1023px) {
    .theme-colors { display:flex; flex-wrap:wrap; gap:10px 16px; }
    .theme-color { font-size:14px; }
}

@media (max-width:767px) {
    .theme-colors { display:flex; flex-wrap:wrap; gap:10px 14px; }
    .theme-color { font-size:13px; }
    .theme-color .swatch { width:20px; height:20px; }
}

/* 컨텐츠 관리 */
.ct-err { margin:20px; padding:12px 16px; border:1px solid #f0c2c2; border-radius:6px; background:#fdeeee; color:#c0392b; font-size:14px; }
.ct-link { color:#1e88e5; font-weight:600; }
.ct-head { margin:20px; padding-bottom:14px; border-bottom:2px solid #444; }
.ct-head h3 { margin:0 0 10px; color:#222; font-size:20px; font-weight:700; }
.ct-info { display:flex; flex-wrap:wrap; align-items:center; gap:6px 28px; margin:0; padding:0; list-style:none; color:#555; font-size:13px; }
.ct-info li { display:flex; align-items:center; gap:6px; }
.ct-info b { color:#333; font-weight:600; }
.ct-body { margin:20px; padding:24px; min-height:200px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; line-height:1.7; overflow-x:auto; }
.ct-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:20px; }
.ct-delform { display:inline-flex; margin:0; }
.ct-form { margin:20px; }
.ct-row { display:flex; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid #eef0f2; }
.ct-label { flex:0 0 120px; color:#333; font-size:14px; font-weight:600; }
.ct-field { display:flex; align-items:center; flex-wrap:wrap; gap:10px; flex:1; min-width:0; }
.ct-field input[type=text] { flex:1 1 320px; max-width:520px; min-width:0; height:36px; padding:0 10px; border:1px solid #ccd2d8; border-radius:4px; background:#fff; color:#333; font-size:14px; }
.ct-field input[readonly] { background:#f3f5f7; color:#777; }
.ct-num { width:100px; height:36px; padding:0 10px; border:1px solid #ccd2d8; border-radius:4px; background:#fff; color:#333; font-size:14px; }
.ct-path { color:#888; font-size:13px; font-family:Consolas, monospace; }
.ct-radios label { display:inline-flex; align-items:center; gap:6px; margin-right:16px; color:#333; font-size:14px; cursor:pointer; }
.ct-editor { margin:20px 0; }

@media (min-width:1024px) and (max-width:1700px) {
    .ct-body { padding:20px; }
    .ct-label { flex:0 0 100px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .ct-head h3 { font-size:18px; }
    .ct-info { gap:6px 18px; }
    .ct-body { padding:18px; }
    .ct-label { flex:0 0 90px; font-size:13px; }
    .ct-field input[type=text] { max-width:none; }
}

@media (max-width:767px) {
    .ct-err { margin:20px 0; font-size:13px; }
    .ct-head { margin:20px 0; }
    .ct-head h3 { font-size:17px; word-break:break-all; }
    .ct-info { flex-direction:column; align-items:flex-start; gap:6px; }
    .ct-body { margin:20px 0; padding:14px; }
    .ct-actions { margin:20px 0; flex-wrap:wrap; }
    .ct-actions .btn { flex:1; text-align:center; }
    .ct-delform { flex:1; }
    .ct-delform .btn { width:100%; }
    .ct-form { margin:20px 0; }
    .ct-row { flex-direction:column; align-items:stretch; gap:8px; }
    .ct-label { flex:none; font-size:13px; }
    .ct-field input[type=text] { flex:1 1 100%; max-width:none; }
    .ct-path { font-size:12px; }
}
.col-manage .ct-delform { margin-left:4px; vertical-align:middle; }
.ct-del { color:#c0392b; }
.ct-del:hover { border-color:#c0392b; background:#c0392b; color:#fff; }

@media (max-width:767px) {
    .col-manage .ct-delform { flex:none; margin-left:4px; }
}
.dash-link { color:inherit; text-decoration:none; }
.dash-link:hover { color:#1e88e5; text-decoration:underline; }
/* 게시물 관리 */
.bv-bar { display:flex; align-items:center; gap:8px; margin:20px; }
.bv-chk { width:40px; text-align:center; }
.bv-chk input { width:16px; height:16px; cursor:pointer; }
.bv-subject { text-align:left; }
.bv-lock { margin-right:4px; color:#999; font-size:12px; }
.bv-meta { margin-left:4px; color:#e67e22; font-size:12px; font-style:normal; }
.bv-delsel { color:#c0392b; }
.bv-delsel:hover { border-color:#c0392b; background:#c0392b; color:#fff; }

@media (min-width:768px) and (max-width:1023px) {
    .bv-bar { margin:20px; }
}

@media (max-width:767px) {
    .bv-bar { margin:20px 0; }
    .bv-bar .btn { flex:1; }
    .bv-chk { width:auto; text-align:left; }
}
/* 직원 등록 - 아이디 + 메일 도메인 */
.mail-id { display:flex; align-items:center; gap:8px; max-width:520px; }
.mail-id input[type=text] { flex:1 1 auto; min-width:0; }
.mail-at { flex:none; color:#888; font-size:15px; }
.form-field .mail-id select.mail-domain { flex:none; width:180px; }

@media (min-width:1024px) and (max-width:1700px) {
    .mail-id { max-width:480px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mail-id { max-width:100%; }
    .form-field .mail-id select.mail-domain { width:160px; }
}

@media (max-width:767px) {
    .mail-id { flex-wrap:wrap; max-width:100%; gap:6px; }
    .mail-id input[type=text] { flex:1 1 calc(100% - 30px); }
    .form-field .mail-id select.mail-domain { flex:1 1 100%; width:100%; }
}
/* ========== 그룹웨어 기본설정 ========== */
.form-fieldset { margin:0; padding:0; border:0; min-width:0; }
.biz-list { display:flex; flex-direction:column; gap:8px; max-width:560px; }
.biz-row { display:flex; align-items:center; gap:8px; }
.biz-row input { flex:1 1 0; min-width:0; }
.biz-row .biz-sep { flex:0 0 auto; color:#999; }
.biz-row .biz-del { flex:0 0 auto; }
.biz-add { margin-top:10px; }
.biz-add:disabled { opacity:.45; cursor:not-allowed; }
.addr-input { display:flex; flex-direction:column; gap:8px; max-width:560px; }
.addr-zip { display:flex; gap:8px; }
.addr-zip input { flex:0 0 140px; min-width:0; }
.addr-input .addr-full { width:100%; }

@media (min-width:1024px) and (max-width:1700px) {
    .biz-list { max-width:520px; }
    .addr-input { max-width:520px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .form-fieldset { margin:0; padding:0; border:0; min-width:0; }
    .biz-list { display:flex; flex-direction:column; gap:8px; max-width:100%; }
    .biz-row { display:flex; align-items:center; gap:8px; }
    .biz-row input { flex:1 1 0; min-width:0; }
    .biz-row .biz-sep { flex:0 0 auto; color:#999; }
    .biz-add { margin-top:10px; }
    .addr-input { display:flex; flex-direction:column; gap:8px; max-width:100%; }
    .addr-zip { display:flex; gap:8px; }
    .addr-zip input { flex:0 0 140px; min-width:0; }
    .addr-input .addr-full { width:100%; }
}

@media (max-width:767px) {
    .form-fieldset { margin:0; padding:0; border:0; min-width:0; }
    .biz-list { display:flex; flex-direction:column; gap:8px; max-width:100%; }
    .biz-row { display:flex; align-items:center; gap:6px; }
    .biz-row input { flex:1 1 0; min-width:0; }
    .biz-row .biz-sep { flex:0 0 auto; color:#999; }
    .biz-add { width:100%; margin-top:10px; }
    .addr-input { display:flex; flex-direction:column; gap:8px; max-width:100%; }
    .addr-zip { display:flex; gap:6px; }
    .addr-zip input { flex:1 1 0; min-width:0; }
    .addr-zip .btn { flex:0 0 auto; }
    .addr-input .addr-full { width:100%; }
}
/* ========== 그룹웨어 팀관리 ========== */
.gt-wrap { display:flex; align-items:flex-start; gap:20px; }
.gt-wrap [hidden] { display:none !important; }
.gt-box { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid #e5e8ec; border-radius:10px; }
.gt-tree-box { flex:0 0 340px; }
.gt-edit-box { flex:1 1 0; }
.gt-box-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid #eceef1; }
.gt-box-head h3 { min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; color:#222; }
.gt-box-head h3 i { margin-right:6px; color:var(--theme-dark); }
.gt-box-body { padding:18px; }
.gt-tree { margin:0; padding:8px 0; list-style:none; max-height:640px; overflow-y:auto; }
.gt-item { margin:0; list-style:none; }
.gt-node { display:flex; align-items:center; gap:8px; width:100%; padding:9px 18px; border:0; border-left:3px solid transparent; background:transparent; font:inherit; font-size:14px; color:#333; text-align:left; cursor:pointer; transition:background .15s; }
.gt-node:hover { background:#f5f7fa; }
.gt-node.on { background:var(--theme-soft); border-left-color:var(--theme-dark); color:var(--theme-dark); font-weight:600; }
.gt-node > i { flex:0 0 auto; color:#aab2bd; }
.gt-node.on > i { color:var(--theme-dark); }
.gt-node .gt-branch { flex:0 0 auto; color:#c5ccd8; }
.gt-node .gt-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gt-node .gt-leader { flex:0 0 auto; font-size:12px; font-weight:400; color:#888; }
.gt-node .gt-cnt { flex:0 0 auto; min-width:34px; padding:1px 7px; font-size:11px; font-weight:600; color:#666; background:#eef0f3; border-radius:10px; text-align:center; }
.gt-item.depth-1 .gt-node { padding-left:36px; }
.gt-item.depth-2 .gt-node { padding-left:54px; }
.gt-item.depth-3 .gt-node { padding-left:72px; }
.gt-item.depth-4 .gt-node { padding-left:90px; }
.gt-item.depth-5 .gt-node { padding-left:108px; }
.gt-empty { padding:30px 18px; list-style:none; font-size:13px; color:#999; text-align:center; }
.gt-msg { display:none; margin-bottom:14px; padding:10px 14px; font-size:13px; border-radius:6px; }
.gt-msg.ok { display:block; color:#1b7a43; background:#e8f6ee; }
.gt-msg.fail { display:block; color:#c03030; background:#fdecec; }
.gt-leader-field { display:flex; gap:8px; max-width:420px; }
.gt-leader-field select { flex:1 1 auto; min-width:0; }
.gt-leader-field .btn { flex:0 0 auto; }
.gt-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.gt-members { margin-top:28px; }
.gt-members h4 { margin:0 0 10px; font-size:14px; font-weight:700; color:#222; }
.gt-members h4 b { margin-left:4px; color:var(--theme-dark); }
.gt-member-list { margin:0; padding:0; list-style:none; border-top:1px solid #eceef1; }
.gt-member-list li { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid #eceef1; font-size:14px; }
.gt-member-list li > i { flex:0 0 auto; color:#aab2bd; }
.gt-member-list .gt-mname { flex:0 0 auto; font-weight:600; color:#222; }
.gt-member-list .gt-mid { flex:0 0 auto; font-size:12px; color:#999; }
.gt-member-list .gt-mmeta { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#666; text-align:right; }
.gt-member-list .gt-empty { display:block; border-bottom:0; }
.gt-badge { flex:0 0 auto; padding:2px 8px; font-size:11px; font-weight:600; border-radius:10px; }
.gt-badge.lead { color:var(--theme-on); background:var(--theme-dark); }
.gt-badge.stop { color:#c03030; background:#fdecec; }

@media (min-width:1024px) and (max-width:1700px) {
    .gt-wrap { gap:16px; }
    .gt-tree-box { flex:0 0 280px; }
    .gt-node { padding:9px 14px; }
    .gt-box-body { padding:16px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .gt-wrap { display:flex; align-items:flex-start; gap:14px; }
    .gt-tree-box { flex:0 0 260px; }
    .gt-edit-box { flex:1 1 0; }
    .gt-box-head { padding:12px 14px; }
    .gt-box-body { padding:14px; }
    .gt-tree { max-height:520px; }
    .gt-node { padding:9px 12px; font-size:13px; }
    .gt-item.depth-1 .gt-node { padding-left:28px; }
    .gt-item.depth-2 .gt-node { padding-left:42px; }
    .gt-item.depth-3 .gt-node { padding-left:56px; }
    .gt-item.depth-4 .gt-node { padding-left:70px; }
    .gt-item.depth-5 .gt-node { padding-left:84px; }
    .gt-node .gt-leader { display:none; }
    .gt-member-list li { flex-wrap:wrap; font-size:13px; }
    .gt-member-list .gt-mmeta { flex:1 1 100%; text-align:left; padding-left:24px; }
}

@media (max-width:767px) {
    .gt-wrap { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
    .gt-tree-box { flex:1 1 auto; }
    .gt-edit-box { flex:1 1 auto; }
    .gt-box { border-radius:8px; }
    .gt-box-head { padding:12px 14px; }
    .gt-box-body { padding:14px; }
    .gt-tree { max-height:300px; }
    .gt-node { padding:10px 12px; font-size:14px; }
    .gt-item.depth-1 .gt-node { padding-left:26px; }
    .gt-item.depth-2 .gt-node { padding-left:40px; }
    .gt-item.depth-3 .gt-node { padding-left:54px; }
    .gt-item.depth-4 .gt-node { padding-left:68px; }
    .gt-item.depth-5 .gt-node { padding-left:82px; }
    .gt-leader-field { max-width:100%; }
    .gt-actions .btn { flex:1 1 auto; }
    .gt-member-list li { flex-wrap:wrap; font-size:13px; }
    .gt-member-list .gt-mmeta { flex:1 1 100%; text-align:left; padding-left:24px; }
}
/* 팀관리 여백 */
.gt-wrap { padding:0 24px 24px; }
.gt-box-head { padding:16px 22px; }
.gt-box-body { padding:22px; }
.gt-box-head .btn-light { height:auto; padding:6px 12px; }

@media (min-width:1024px) and (max-width:1700px) {
    .gt-wrap { padding:0 20px 20px; }
    .gt-box-head { padding:14px 18px; }
    .gt-box-body { padding:18px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .gt-wrap { padding:0 16px 20px; }
    .gt-box-head { padding:12px 16px; }
    .gt-box-body { padding:16px; }
    .gt-box-head .btn-light { height:auto; padding:6px 10px; }
}

@media (max-width:767px) {
    .gt-wrap { padding:0 12px 16px; }
    .gt-box-head { padding:12px 14px; }
    .gt-box-body { padding:14px; }
    .gt-box-head .btn-light { height:auto; padding:5px 10px; }
}
/* 기본설정 : 직급 · 직책 목록 */
.pos-list { display:flex; flex-direction:column; gap:8px; max-width:360px; }
.pos-row { display:flex; align-items:center; gap:8px; }
.pos-row input { flex:1 1 0; min-width:0; }
.pos-row .dyn-del { flex:0 0 auto; }

@media (min-width:768px) and (max-width:1023px) {
    .pos-list { display:flex; flex-direction:column; gap:8px; max-width:360px; }
    .pos-row { display:flex; align-items:center; gap:8px; }
    .pos-row input { flex:1 1 0; min-width:0; }
}

@media (max-width:767px) {
    .pos-list { display:flex; flex-direction:column; gap:8px; max-width:100%; }
    .pos-row { display:flex; align-items:center; gap:6px; }
    .pos-row input { flex:1 1 0; min-width:0; }
}

/* 기본설정 : 순서 버튼 */
.dyn-btns { display:flex; flex:0 0 auto; gap:4px; }
.dyn-btns .btn { width:30px; padding:0; justify-content:center; }
.dyn-btns .btn:disabled { opacity:.35; cursor:not-allowed; }
.biz-list { max-width:640px; }

@media (min-width:768px) and (max-width:1023px) {
    .dyn-btns { display:flex; flex:0 0 auto; gap:4px; }
    .dyn-btns .btn { width:30px; padding:0; justify-content:center; }
    .biz-list { max-width:100%; }
}

@media (max-width:767px) {
    .dyn-btns { display:flex; flex:0 0 auto; gap:3px; }
    .dyn-btns .btn { width:28px; padding:0; justify-content:center; }
    .biz-row { flex-wrap:wrap; }
    .biz-row .dyn-btns { flex:1 1 100%; justify-content:flex-end; }
}
/* 기본설정 : 인감도장 */
.seal-box { display:flex; align-items:flex-start; gap:16px; }
.seal-preview { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:120px; height:120px; overflow:hidden; border:1px dashed #c5ccd8; border-radius:8px; background:#fafbfc; }
.seal-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.seal-empty { font-size:34px; color:#d0d5dd; }
.seal-control { display:flex; flex-direction:column; gap:8px; min-width:0; }
.seal-control input[type="file"] { max-width:100%; font-size:13px; }
.seal-del { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#c03030; cursor:pointer; }

@media (min-width:768px) and (max-width:1023px) {
    .seal-box { display:flex; align-items:flex-start; gap:14px; }
    .seal-preview { width:110px; height:110px; }
    .seal-control { display:flex; flex-direction:column; gap:8px; min-width:0; }
}

@media (max-width:767px) {
    .seal-box { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
    .seal-preview { width:100px; height:100px; }
    .seal-control { display:flex; flex-direction:column; gap:8px; width:100%; }
}
/* 기본설정 : 사업자등록증 */
.bizreg-preview { position:relative; cursor:zoom-in; }
.bizreg-preview.empty { cursor:default; }
.bizreg-preview .bizreg-pdf { color:#e04848; }
.bizreg-preview .bizreg-zoom { position:absolute; right:6px; bottom:6px; display:flex; align-items:center; justify-content:center; width:26px; height:26px; font-size:12px; color:#fff; background:rgba(0,0,0,.55); border-radius:50%; opacity:0; transition:opacity .2s; }
.bizreg-preview:hover .bizreg-zoom { opacity:1; }
.bizreg-preview.empty .bizreg-zoom { display:none; }

@media (min-width:768px) and (max-width:1023px) {
    .bizreg-preview { position:relative; cursor:zoom-in; }
}

@media (max-width:767px) {
    .bizreg-preview { position:relative; cursor:zoom-in; }
    .bizreg-preview .bizreg-zoom { opacity:1; }
}

/* 확대 레이어 (화면 중앙) */
.img-layer { position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; }
.img-layer[hidden] { display:none !important; }
.img-layer-dim { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); }
.img-layer-box { position:relative; display:flex; flex-direction:column; width:760px; max-width:100%; max-height:85vh; overflow:hidden; background:#fff; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.3); }
.img-layer-head { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid #eceef1; }
.img-layer-head strong { font-size:15px; color:#222; }
.img-layer-close { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; border-radius:6px; background:transparent; font-size:18px; color:#666; cursor:pointer; }
.img-layer-close:hover { background:#f2f4f7; color:#222; }
.img-layer-body { display:flex; flex:1 1 auto; align-items:flex-start; justify-content:center; min-height:0; overflow:auto; padding:16px; background:#f5f6f8; }
.img-layer-body img { display:block; max-width:100%; max-height:calc(85vh - 90px); height:auto; object-fit:contain; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.img-layer-body iframe { display:block; width:100%; height:calc(85vh - 90px); border:0; background:#fff; }
body.layer-open { overflow:hidden; }

@media (min-width:1024px) and (max-width:1700px) {
    .img-layer-box { width:700px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .img-layer { padding:20px; }
    .img-layer-box { width:640px; max-width:100%; max-height:85vh; }
    .img-layer-body img { max-height:calc(85vh - 90px); }
    .img-layer-body iframe { height:calc(85vh - 90px); }
}

@media (max-width:767px) {
    .img-layer { padding:12px; }
    .img-layer-box { width:100%; max-height:88vh; border-radius:8px; }
    .img-layer-head { padding:10px 12px; }
    .img-layer-body { padding:10px; }
    .img-layer-body img { max-height:calc(88vh - 70px); }
    .img-layer-body iframe { height:calc(88vh - 70px); }
}

/* ========== 그룹웨어 양식관리 ========== */
.gf-forms-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.gf-forms-head h4 { margin:0; }
.gf-forms-head .btn { height:auto; padding:6px 12px; }
.gf-form-list li .gf-form-title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:#222; text-decoration:none; }
.gf-form-list li .gf-form-title:hover { color:var(--theme-dark); text-decoration:underline; }
.gf-form-list li .gt-mmeta { flex:0 0 auto; }
.gf-form-list li .btn { flex:0 0 auto; height:auto; padding:4px 10px; }

@media (min-width:768px) and (max-width:1023px) {
    .gf-forms-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .gf-form-list li { flex-wrap:nowrap; }
    .gf-form-list li .gt-mmeta { flex:0 0 auto; padding-left:0; text-align:right; }
}

@media (max-width:767px) {
    .gf-forms-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .gf-form-list li { flex-wrap:wrap; }
    .gf-form-list li .gf-form-title { flex:1 1 calc(100% - 90px); }
    .gf-form-list li .gt-mmeta { flex:1 1 auto; padding-left:24px; text-align:left; }
}

/* ========== 문서 편집기 ========== */
.de { display:flex; flex-direction:column; overflow:hidden; border:1px solid #dfe3e8; border-radius:8px; background:#fff; }
.de-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; padding:8px 10px; background:#f7f8fa; border-bottom:1px solid #dfe3e8; }
.de-toolbar.de-src-mode .de-group { opacity:.4; pointer-events:none; }
.de-toolbar.de-src-mode .de-group:last-child { opacity:1; pointer-events:auto; }
.de-group { display:flex; align-items:center; gap:2px; padding-right:6px; border-right:1px solid #e1e4e8; }
.de-group:last-child { padding-right:0; border-right:0; }
.de-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid transparent; border-radius:5px; background:transparent; font-size:13px; color:#444; cursor:pointer; }
.de-btn:hover { background:#e9edf2; }
.de-btn.on { background:var(--theme-soft); border-color:var(--theme-line); color:var(--theme-dark); }
.de-btn.wide { width:auto; gap:4px; padding:0 8px; font-size:12px; }
.de-color input { position:absolute; left:0; bottom:0; width:100%; height:100%; padding:0; border:0; opacity:0; cursor:pointer; }
.de-color .de-swatch { position:absolute; left:7px; right:7px; bottom:4px; height:3px; border-radius:2px; }
.de-select { height:30px; padding:0 6px; border:1px solid #dfe3e8; border-radius:5px; background:#fff; font-size:12px; color:#333; }
.de-select.font { width:110px; }
.de-select.size { width:72px; }
.de-pop { position:relative; }
.de-grid { position:absolute; top:34px; left:0; z-index:20; padding:8px; background:#fff; border:1px solid #dfe3e8; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.12); }
.de-grid[hidden] { display:none; }
.de-grid-cells { display:flex; flex-wrap:wrap; gap:2px; width:174px; }
.de-grid-cells span { width:20px; height:20px; border:1px solid #d0d5dd; background:#fff; cursor:pointer; }
.de-grid-cells span.on { background:var(--theme-soft); border-color:var(--theme-dark); }
.de-grid-label { margin-top:6px; font-size:12px; color:#555; text-align:center; }
.de-paper-wrap { display:flex; justify-content:center; min-height:420px; max-height:calc(100vh - 240px); padding:24px; overflow:auto; background:#eef0f3; }
.de-paper-wrap[hidden] { display:none; }
.de-paper { flex:0 0 auto; width:794px; min-height:1123px; padding:60px 70px; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.de-body { min-height:320px; outline:none; }
.de-body .de-sel { background:rgba(0,98,204,.18) !important; }
.de-source { width:100%; min-height:520px; padding:14px; border:0; font-family:Consolas, monospace; font-size:13px; line-height:1.5; resize:vertical; }
.de-source[hidden] { display:none; }
/* 문서 불러오기 */
.de-import { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px; }
.de-import .btn { height:auto; padding:6px 12px; cursor:pointer; }
.de-import-msg { font-size:13px; color:#666; }
.de-import-msg.wait { color:#888; }
.de-import-msg.ok { color:#1b7a43; }
.de-import-msg.fail { color:#c03030; }

@media (min-width:768px) and (max-width:1023px) {
    .de-import { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
}

@media (max-width:767px) {
    .de-import { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
    .de-import .btn { justify-content:center; }
}

@media (min-width:1024px) and (max-width:1700px) {
    .de-paper-wrap { padding:18px; }
    .de-paper { width:760px; padding:50px 56px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .de-toolbar { gap:4px; padding:6px 8px; }
    .de-group { padding-right:4px; }
    .de-btn { width:28px; height:28px; }
    .de-select.font { width:96px; }
    .de-select.size { width:64px; }
    .de-paper-wrap { padding:14px; max-height:none; }
    .de-paper { flex:1 1 auto; width:auto; min-width:0; min-height:900px; padding:40px 36px; }
}

@media (max-width:767px) {
    .de { border-radius:6px; }
    .de-toolbar { gap:3px; padding:6px; }
    .de-group { padding-right:3px; }
    .de-btn { width:28px; height:28px; font-size:12px; }
    .de-select.font { width:88px; }
    .de-select.size { width:60px; }
    .de-grid { left:auto; right:0; }
    .de-paper-wrap { padding:8px; max-height:none; min-height:300px; }
    .de-paper { flex:1 1 auto; width:auto; min-width:0; min-height:600px; padding:24px 18px; }
    .de-source { min-height:400px; font-size:12px; }
}
/* 결재란 · 큰 칸 */
.doc-content table.de-table.de-approval { width:auto; margin-left:auto; table-layout:auto; }
.doc-content table.de-table.de-approval th { width:72px; padding:4px 6px; font-size:13px; text-align:center; }
.doc-content table.de-table.de-approval th:first-child { width:30px; line-height:1.3; }
.doc-content table.de-table.de-approval td.de-signbox { width:72px; height:64px; }
.doc-content table.de-table td.de-tall { height:120px; vertical-align:top; }

@media (max-width:767px) {
    .doc-content table.de-table.de-approval th { width:54px; font-size:12px; }
    .doc-content table.de-table.de-approval td.de-signbox { width:54px; height:50px; }
    .doc-content table.de-table td.de-tall { height:90px; }
}
/* ========== 전자결재 ========== */
.ap-st { white-space:nowrap; }
.ap-st-D { color:#666; background:#eef0f3; }
.ap-st-P { color:#0b5cad; background:#e6f0fb; }
.ap-st-A { color:#1b7a43; background:#e8f6ee; }
.ap-st-R { color:#c03030; background:#fdecec; }
.ap-st-C { color:#8a6d00; background:#fff5d6; }
.admin-table td.ap-title a { font-weight:600; color:#222; text-decoration:none; }
.admin-table td.ap-title a:hover { color:var(--theme-dark); text-decoration:underline; }
.admin-table td small { display:block; font-size:12px; color:#999; }

@media (min-width:768px) and (max-width:1023px) {
    .admin-table td.ap-title a { font-weight:600; }
}

@media (max-width:767px) {
    .admin-table td.ap-title a { font-weight:600; word-break:break-all; }
    .admin-table td small { display:inline; margin-left:4px; }
}

/* 전자결재 : 양식 선택 */
.ap-pick { display:flex; flex-direction:column; gap:22px; }
.ap-pick-empty { padding:40px 0; color:#999; text-align:center; }
.ap-pick-group h3 { margin:0 0 10px; font-size:15px; font-weight:700; color:#222; }
.ap-pick-group h3 i { margin-right:6px; color:var(--theme-dark); }
.ap-pick-list { display:flex; flex-wrap:wrap; gap:10px; }
.ap-pick-item { display:flex; align-items:center; gap:10px; flex:0 0 220px; padding:16px 18px; border:1px solid #dfe3e8; border-radius:8px; background:#fff; font-size:14px; font-weight:600; color:#333; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.ap-pick-item i { font-size:20px; color:var(--theme-dark); }
.ap-pick-item:hover { border-color:var(--theme-dark); box-shadow:0 4px 14px rgba(0,0,0,.08); }

/* 전자결재 : 작성 */
.ap-form-name { display:flex; align-items:center; gap:10px; font-weight:600; }
.ap-form-name .btn { height:auto; padding:4px 10px; font-weight:400; }
.ap-title-input { width:100%; max-width:640px; }
.ap-line { display:flex; flex-direction:column; gap:10px; max-width:640px; }
.ap-search { position:relative; display:flex; align-items:center; }
.ap-search > i { position:absolute; left:12px; font-size:13px; color:#999; }
.ap-search input { width:100%; padding-left:34px; }
.ap-result { position:absolute; top:100%; left:0; right:0; z-index:30; max-height:280px; margin:4px 0 0; padding:4px 0; overflow-y:auto; list-style:none; background:#fff; border:1px solid #dfe3e8; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.12); }
.ap-result[hidden] { display:none; }
.ap-result li button { display:flex; align-items:baseline; gap:8px; width:100%; padding:8px 12px; border:0; background:transparent; font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.ap-result li button:hover { background:var(--theme-soft); }
.ap-result li button small { font-size:12px; color:#888; }
.ap-result-empty { padding:10px 12px; font-size:13px; color:#999; }
.ap-line-list { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
.ap-line-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #e5e8ec; border-radius:6px; background:#fafbfc; font-size:14px; }
.ap-line-item .ap-step { display:flex; align-items:center; justify-content:center; flex:0 0 24px; height:24px; font-size:12px; font-weight:700; color:var(--theme-on); background:var(--theme-dark); border-radius:50%; }
.ap-line-item b { flex:0 0 auto; }
.ap-line-item small { flex:1 1 auto; min-width:0; font-size:12px; color:#888; }
.ap-line-empty { margin:0; font-size:13px; color:#999; }
.ap-line-empty[hidden] { display:none; }

@media (min-width:768px) and (max-width:1023px) {
    .ap-pick { display:flex; flex-direction:column; gap:18px; }
    .ap-pick-item { flex:0 0 calc(50% - 5px); }
    .ap-line { max-width:100%; }
    .ap-title-input { max-width:100%; }
}

@media (max-width:767px) {
    .ap-pick { display:flex; flex-direction:column; gap:16px; }
    .ap-pick-item { flex:1 1 100%; padding:14px; }
    .ap-line { max-width:100%; }
    .ap-title-input { max-width:100%; }
    .ap-line-item { flex-wrap:wrap; }
    .ap-line-item .dyn-btns { margin-left:auto; }
}
/* 전자결재 : 여백 */
.ap-pick { padding:4px 24px 28px; }
.ap-pick-group { padding:18px 20px; border:1px solid #e5e8ec; border-radius:10px; background:#fff; }
.ap-pick-group h3 { margin:0 0 14px; }
.ap-pick-item { padding:18px 20px; }

@media (min-width:1024px) and (max-width:1700px) {
    .ap-pick { padding:4px 20px 24px; }
    .ap-pick-group { padding:16px 18px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .ap-pick { padding:4px 16px 20px; }
    .ap-pick-group { padding:14px 16px; }
    .ap-pick-item { padding:16px; }
}

@media (max-width:767px) {
    .ap-pick { padding:4px 12px 16px; }
    .ap-pick-group { padding:12px 14px; border-radius:8px; }
    .ap-pick-item { padding:14px; }
}
/* 전자결재 : 결재자 검색 아이콘 */
.form-field .ap-search { position:relative; display:block; width:100%; }
.form-field .ap-search > i { position:absolute; top:50%; left:14px; z-index:1; font-size:13px; color:#999; transform:translateY(-50%); pointer-events:none; }
.form-field .ap-search input[type="text"] { width:100%; padding-left:38px; }

@media (min-width:768px) and (max-width:1023px) {
    .form-field .ap-search > i { left:13px; }
    .form-field .ap-search input[type="text"] { padding-left:36px; }
}

@media (max-width:767px) {
    .form-field .ap-search > i { left:12px; }
    .form-field .ap-search input[type="text"] { padding-left:34px; }
}
/* 전자결재 : 문서 보기 */
.ap-info { display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 24px 16px; padding:14px 18px; border:1px solid #e5e8ec; border-radius:8px; background:#fff; }
.ap-info dl { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; }
.ap-info dt { color:#888; }
.ap-info dd { margin:0; font-weight:600; color:#222; }
.ap-act { display:flex; flex-direction:column; gap:10px; margin:0 24px 16px; padding:16px 18px; border:1px solid var(--theme-line); border-radius:8px; background:var(--theme-soft); }
.ap-act-title { font-size:14px; color:var(--theme-dark); }
.ap-act-title i { margin-right:6px; }
.ap-act textarea { width:100%; resize:vertical; }
.ap-act-btns { display:flex; gap:8px; }
.ap-recall { display:flex; justify-content:flex-end; margin:0 24px 12px; }
.ap-view-wrap { max-height:none; margin:0 24px; border-radius:8px; }
.ap-history { margin:20px 24px 28px; padding:16px 18px; border:1px solid #e5e8ec; border-radius:8px; background:#fff; }
.ap-history h3 { margin:0 0 10px; font-size:15px; color:#222; }
.ap-history h3 i { margin-right:6px; color:var(--theme-dark); }
.ap-history ul { margin:0; padding:0; list-style:none; }
.ap-history li { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 0; border-bottom:1px solid #eceef1; font-size:14px; }
.ap-history li:last-child { border-bottom:0; }
.ap-h-step { flex:0 0 40px; font-size:12px; font-weight:700; color:#888; }
.ap-history li small { color:#888; }
.ap-h-date { margin-left:auto; font-size:13px; color:#888; }
.ap-h-comment { flex:1 1 100%; margin:2px 0 0 50px; padding:8px 12px; border-radius:6px; background:#f5f6f8; font-size:13px; color:#444; white-space:pre-wrap; }

@media (min-width:1024px) and (max-width:1700px) {
    .ap-info { margin:0 20px 14px; }
    .ap-act { margin:0 20px 14px; }
    .ap-recall { margin:0 20px 12px; }
    .ap-view-wrap { margin:0 20px; }
    .ap-history { margin:18px 20px 24px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .ap-info { gap:8px 20px; margin:0 16px 14px; padding:12px 14px; }
    .ap-act { margin:0 16px 14px; padding:14px; }
    .ap-recall { margin:0 16px 12px; }
    .ap-view-wrap { margin:0 16px; }
    .ap-history { margin:16px 16px 20px; padding:14px; }
}

@media (max-width:767px) {
    .ap-info { flex-direction:column; gap:6px; margin:0 12px 12px; padding:12px; }
    .ap-act { margin:0 12px 12px; padding:12px; }
    .ap-act-btns .btn { flex:1 1 0; }
    .ap-recall { margin:0 12px 10px; }
    .ap-view-wrap { margin:0 12px; padding:8px; }
    .ap-history { margin:14px 12px 16px; padding:12px; }
    .ap-h-date { flex:1 1 100%; margin-left:50px; }
    .ap-h-comment { margin-left:0; }
}
/* 목록 문서번호 */
.admin-table td.ap-docno-cell { font-size:13px; white-space:nowrap; color:#555; }

@media (max-width:767px) {
    .admin-table td.ap-docno-cell { white-space:normal; }
}/* 전자결재 : 첨부파일 */
.ap-files { display:flex; flex-direction:column; gap:6px; margin:0 0 10px; padding:0; list-style:none; }
.ap-files li { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #e5e8ec; border-radius:6px; background:#fafbfc; font-size:14px; }
.ap-files li > i { flex:0 0 auto; color:#999; }
.ap-file-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#333; text-decoration:none; }
a.ap-file-name:hover { color:var(--theme-dark); text-decoration:underline; }
.ap-files li small { flex:0 0 auto; font-size:12px; color:#999; }
.ap-file-input { max-width:100%; font-size:13px; }
.ap-filebox h3 b { margin-left:4px; color:var(--theme-dark); }
.ap-filebox .ap-files { margin:0; }

@media (min-width:768px) and (max-width:1023px) {
    .ap-files li { display:flex; align-items:center; gap:8px; font-size:13px; }
}

@media (max-width:767px) {
    .ap-files li { flex-wrap:wrap; gap:6px; padding:8px 10px; font-size:13px; }
    .ap-file-name { flex:1 1 calc(100% - 30px); white-space:normal; word-break:break-all; }
}
/* 전자결재 : 참조자 */
.ap-line-item .ap-ref-icon { flex:0 0 24px; font-size:13px; color:#999; text-align:center; }
.ap-line-empty[hidden] { display:none; }
.ap-info .ap-info-refs dd { display:flex; flex-wrap:wrap; gap:6px; font-weight:400; }
.ap-ref { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:12px; background:#eef0f3; font-size:13px; color:#888; }
.ap-ref.read { background:var(--theme-soft); color:var(--theme-dark); }
.ap-ref i { font-size:11px; }

@media (min-width:768px) and (max-width:1023px) {
    .ap-ref { padding:2px 7px; font-size:12px; }
}

@media (max-width:767px) {
    .ap-info .ap-info-refs { flex-direction:column; align-items:flex-start; }
    .ap-ref { padding:2px 7px; font-size:12px; }
}
/* 전자결재 : 전결 체크 */
.ap-line-item .ap-final { display:inline-flex; flex:0 0 auto; align-items:center; gap:4px; padding:2px 8px; border:1px solid #dfe3e8; border-radius:12px; background:#fff; font-size:12px; color:#666; cursor:pointer; }
.ap-line-item .ap-final input { margin:0; }

@media (min-width:768px) and (max-width:1023px) {
    .ap-line-item .ap-final { padding:2px 7px; font-size:12px; }
}

@media (max-width:767px) {
    .ap-line-item .ap-final { padding:2px 6px; font-size:11px; }
}
/* ========== 그룹웨어 일정 ========== */
.sc-wrap { position:relative; display:flex; align-items:flex-start; gap:20px; padding:0 24px 28px; }
.sc-cal { flex:1 1 0; min-width:0; padding:16px 18px; border:1px solid #e5e8ec; border-radius:12px; background:#fff; }
.sc-head { display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.sc-head h3 { min-width:130px; margin:0; font-size:20px; font-weight:700; color:#222; text-align:center; }
.sc-nav { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:0; border-radius:50%; background:transparent; font-size:14px; color:#555; cursor:pointer; }
.sc-nav:hover { background:#f0f2f5; }
.sc-today { height:auto; margin-left:auto; padding:6px 14px; border-radius:16px; }
.sc-week { display:flex; border-bottom:1px solid #eceef1; }
.sc-week span { flex:1 1 0; padding:6px 0; font-size:12px; font-weight:600; color:#666; text-align:center; }
.sc-week .sun { color:#e53935; }
.sc-week .sat { color:#1e6fd9; }
.sc-grid { display:flex; flex-direction:column; touch-action:pan-y; }
.sc-row { position:relative; min-height:112px; border-bottom:1px solid #f0f2f5; }
.sc-days { display:flex; height:100%; min-height:inherit; }
.sc-cell { position:relative; flex:1 1 0; min-width:0; padding:4px 4px 18px; cursor:pointer; transition:background .15s; }
.sc-cell:hover { background:#f8f9fb; }
.sc-cell.sel { background:var(--theme-soft); }
.sc-cell-top { display:flex; align-items:center; gap:3px; height:22px; overflow:hidden; }
.sc-num { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:13px; font-weight:600; color:#333; }
.sc-cell.sun .sc-num { color:#e53935; }
.sc-cell.sat .sc-num { color:#1e6fd9; }
.sc-cell.other .sc-num { opacity:.35; }
.sc-cell.today .sc-num { background:var(--theme); color:var(--theme-on); }
.sc-holi { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:#e53935; }
.sc-more { position:absolute; left:6px; bottom:2px; font-size:11px; font-weight:600; color:#888; }
.sc-bars { position:absolute; top:28px; left:0; right:0; height:0; pointer-events:none; }
.sc-bar { position:absolute; display:flex; align-items:center; height:17px; padding:0 6px; overflow:hidden; border:0; border-radius:4px; background:transparent; font:inherit; font-size:11px; text-align:left; cursor:pointer; pointer-events:auto; box-sizing:border-box; border-left:2px solid transparent; border-right:2px solid transparent; background-clip:padding-box; }
.sc-bar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-bar.block { background-color:var(--c); color:#fff; }
.sc-bar.block.light { color:#333; }
.sc-bar.timed { color:#333; }
.sc-bar.timed:before { content:""; flex:0 0 6px; width:6px; height:6px; margin-right:4px; border-radius:50%; background:var(--c); }
.sc-bar.timed:hover { background-color:#f0f2f5; }

.sc-day { flex:0 0 320px; min-width:0; padding:16px 18px; border:1px solid #e5e8ec; border-radius:12px; background:#fff; }
.sc-day-head { display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.sc-day-head h3 { margin:0; font-size:17px; font-weight:700; color:#222; }
.sc-day-holi { font-size:13px; color:#e53935; }
.sc-day-list { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
.sc-empty { padding:30px 0; font-size:13px; color:#999; text-align:center; list-style:none; }
.sc-item { display:flex; align-items:flex-start; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:#f7f8fa; font:inherit; text-align:left; cursor:pointer; }
.sc-item:hover { background:#eef1f5; }
.sc-dot { flex:0 0 10px; width:10px; height:10px; margin-top:5px; border-radius:50%; }
.sc-item-body { display:flex; flex:1 1 auto; flex-direction:column; gap:2px; min-width:0; }
.sc-item-body b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:#222; }
.sc-item-body small { font-size:12px; color:#777; }
.sc-item-body .sc-item-sub { color:#999; }
.sc-scope { flex:0 0 auto; margin-top:4px; font-size:11px; color:#bbb; }

.sc-fab { position:fixed; right:28px; bottom:28px; z-index:50; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border:0; border-radius:50%; background:var(--theme); font-size:22px; color:var(--theme-on); box-shadow:0 6px 18px rgba(0,0,0,.22); cursor:pointer; transition:transform .15s; }
.sc-fab:hover { transform:scale(1.06); }

/* 일정 창 */
.sc-sheet { position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; display:flex; align-items:center; justify-content:center; }
.sc-sheet[hidden] { display:none; }
.sc-sheet-dim { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); }
.sc-sheet-box { position:relative; display:flex; flex-direction:column; width:480px; max-width:calc(100% - 32px); max-height:88vh; overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.sc-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eceef1; }
.sc-sheet-head strong { font-size:16px; color:#222; }
.sc-sheet-btn { padding:6px 10px; border:0; border-radius:6px; background:transparent; font:inherit; font-size:15px; color:#555; cursor:pointer; }
.sc-sheet-btn.save { font-weight:700; color:var(--theme-dark); }
.sc-sheet-btn[hidden] { visibility:hidden; display:inline-block; }
.sc-sheet-body { display:flex; flex-direction:column; gap:4px; padding:14px 18px 20px; overflow-y:auto; }
.sc-input-title { width:100%; padding:8px 2px; border:0; border-bottom:2px solid #e5e8ec; border-radius:0; background:transparent; font-size:20px; font-weight:600; color:#222; outline:none; }
.sc-input-title:focus { border-bottom-color:var(--theme); }
.sc-colors { display:flex; flex-wrap:wrap; gap:10px; padding:12px 0 8px; }
.sc-color { position:relative; cursor:pointer; }
.sc-color input { position:absolute; opacity:0; pointer-events:none; }
.sc-sw { display:block; width:26px; height:26px; border-radius:50%; box-shadow:0 0 0 2px #fff, 0 0 0 2px transparent; transition:box-shadow .15s; }
.sc-color input:checked + .sc-sw { box-shadow:0 0 0 2px #fff, 0 0 0 4px #444; }
.sc-sw-0 { background:#4285f4; }
.sc-sw-1 { background:#039be5; }
.sc-sw-2 { background:#0b8043; }
.sc-sw-3 { background:#f6bf26; }
.sc-sw-4 { background:#f4511e; }
.sc-sw-5 { background:#e67c73; }
.sc-sw-6 { background:#8e24aa; }
.sc-sw-7 { background:#616161; }
.sc-field { display:flex; align-items:center; gap:10px; min-height:46px; border-bottom:1px solid #f0f2f5; font-size:14px; color:#333; }
.sc-field[hidden] { display:none; }
.sc-field > span { flex:0 0 auto; min-width:76px; color:#555; }
.sc-field > span i { width:16px; margin-right:4px; color:#888; text-align:center; }
.sc-field select { flex:1 1 auto; min-width:0; }
.sc-allday { justify-content:space-between; }
.sc-when .sc-when-label { min-width:40px; }
.sc-when input[type="date"] { flex:1 1 auto; min-width:0; }
.sc-when input[type="time"] { flex:0 0 120px; }
.sc-form-allday .sc-time { display:none; }
form.allday .sc-time { display:none; }
.sc-switch { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
.sc-switch input { position:absolute; opacity:0; }
.sc-switch span { position:absolute; inset:0; border-radius:12px; background:#cfd4da; transition:background .2s; }
.sc-switch span:after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
.sc-switch input:checked + span { background:var(--theme); }
.sc-switch input:checked + span:after { transform:translateX(20px); }
.sc-seg { display:flex; flex:1 1 auto; gap:4px; padding:3px; border-radius:20px; background:#f0f2f5; }
.sc-seg label { flex:1 1 0; cursor:pointer; }
.sc-seg input { position:absolute; opacity:0; pointer-events:none; }
.sc-seg span { display:block; padding:6px 0; border-radius:16px; font-size:13px; color:#555; text-align:center; transition:background .15s; }
.sc-seg input:checked + span { background:#fff; font-weight:600; color:var(--theme-dark); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.sc-icon-input > i { flex:0 0 20px; color:#888; text-align:center; }
.sc-icon-input input { flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none; }
.sc-memo { align-items:flex-start; padding-top:10px; }
.sc-memo textarea { flex:1 1 auto; min-width:0; border:0; background:transparent; resize:vertical; outline:none; }
.sc-note { margin:6px 0 0; font-size:12px; color:#e08600; }
.sc-note[hidden] { display:none; }
.sc-owner { margin:8px 0 0; font-size:13px; color:#777; }
.sc-owner[hidden] { display:none; }
.sc-del { align-self:flex-start; height:auto; margin-top:14px; padding:8px 14px; }
.sc-del[hidden] { display:none; }

@media (min-width:1024px) and (max-width:1700px) {
    .sc-wrap { gap:16px; padding:0 20px 24px; }
    .sc-day { flex:0 0 280px; }
    .sc-row { min-height:104px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .sc-wrap { flex-direction:column; align-items:stretch; gap:14px; padding:0 16px 90px; }
    .sc-cal { padding:14px; }
    .sc-day { flex:1 1 auto; padding:14px; }
    .sc-row { min-height:100px; }
    .sc-head h3 { font-size:18px; }
    .sc-fab { right:20px; bottom:20px; }
}

@media (max-width:767px) {
    .sc-wrap { flex-direction:column; align-items:stretch; gap:10px; padding:0 8px 90px; }
    .sc-cal { padding:10px 6px; border-radius:10px; }
    .sc-head { gap:2px; margin-bottom:8px; padding:0 4px; }
    .sc-head h3 { min-width:110px; font-size:17px; }
    .sc-week span { font-size:11px; }
    .sc-row { min-height:72px; }
    .sc-cell { padding:2px 1px 14px; }
    .sc-cell-top { justify-content:center; height:20px; }
    .sc-num { width:20px; height:20px; font-size:12px; }
    .sc-holi { display:none; }
    .sc-more { left:50%; bottom:1px; font-size:10px; transform:translateX(-50%); }
    .sc-bars { top:24px; }
    .sc-bar { height:14px; padding:0 3px; border-radius:3px; font-size:9px; }
    .sc-bar.timed:before { flex:0 0 5px; width:5px; height:5px; margin-right:2px; }
    .sc-day { flex:1 1 auto; padding:12px; border-radius:10px; }
    .sc-day-head h3 { font-size:16px; }
    .sc-fab { right:16px; bottom:16px; width:52px; height:52px; font-size:20px; }
    .sc-sheet { align-items:flex-end; }
    .sc-sheet-box { width:100%; max-width:100%; max-height:92vh; border-radius:16px 16px 0 0; animation:sc-up .22s ease-out; }
    .sc-sheet-body { padding:12px 16px 24px; }
    .sc-input-title { font-size:18px; }
    .sc-when input[type="time"] { flex:0 0 108px; }
}

@keyframes sc-up {
    from { transform:translateY(100%); }
    to { transform:translateY(0); }
}
/* ========== 출근 · 퇴근 버튼 ========== */
.att-btn { display:flex; flex-direction:column; gap:12px; padding:16px 18px; border:1px solid #e5e8ec; border-radius:12px; background:#fff; box-sizing:border-box; }
.att-btn-now { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.att-btn-date { font-size:13px; color:#777; }
.att-btn-clock { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; color:#222; }
.att-btn.is-in .att-btn-clock { color:var(--theme-dark); }
.att-btn-row { display:flex; gap:10px; }
.att-btn-row button { display:flex; flex:1 1 0; flex-direction:column; align-items:center; gap:2px; padding:12px 0; border:0; border-radius:10px; font:inherit; cursor:pointer; transition:opacity .15s, transform .1s; }
.att-btn-row button:active { transform:scale(.97); }
.att-btn-row button:disabled { opacity:.45; cursor:default; }
.att-btn-row b { font-size:15px; }
.att-btn-row small { font-size:12px; opacity:.85; }
.att-btn-in { background:var(--theme); color:var(--theme-on); }
.att-btn-out { background:#37474f; color:#fff; }

/* ========== 그룹웨어 근태관리 ========== */
.at-top { display:flex; align-items:stretch; gap:20px; padding:0 24px 16px; }
.at-top .att-btn { flex:0 0 360px; }
.at-sum { display:flex; flex:1 1 auto; align-items:center; min-width:0; padding:16px 18px; border:1px solid #e5e8ec; border-radius:12px; background:#fff; }
.at-sum-item { display:flex; flex:1 1 0; flex-direction:column; align-items:center; gap:6px; min-width:0; border-left:1px solid #f0f2f5; }
.at-sum-item:first-child { border-left:0; }
.at-sum-item span { font-size:13px; color:#777; }
.at-sum-item b { font-size:22px; font-weight:700; color:#222; }
.at-tool { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:0 24px 16px; }
.at-tool select { width:auto; min-width:200px; height:36px; padding:0 34px 0 12px; border:1px solid #dfe3e8; border-radius:8px; background-color:#fff; font-size:14px; color:#333; cursor:pointer; }
.at-tool select:focus { border-color:var(--theme); outline:none; }
.at-worktime { display:flex; align-items:center; gap:4px; height:36px; margin:0; padding:0 4px 0 12px; border:1px solid #dfe3e8; border-radius:18px; background:#fff; box-sizing:border-box; }
.at-worktime span { margin-right:4px; font-size:13px; font-weight:600; color:#666; }
.at-worktime em { font-style:normal; color:#aaa; }
.at-worktime input { width:auto; height:28px; padding:0 4px; border:0; background:transparent; font-size:14px; font-variant-numeric:tabular-nums; color:#333; outline:none; }
.at-worktime .btn { height:28px; margin-left:4px; padding:0 12px; border:0; border-radius:14px; background:var(--theme); font-size:13px; line-height:28px; color:var(--theme-on); }
.at-worktime-view { display:inline-flex; align-items:center; height:36px; padding:0 14px; border:1px solid #dfe3e8; border-radius:18px; background:#fff; font-size:13px; color:#666; box-sizing:border-box; }
.at-excel { display:inline-flex; align-items:center; gap:6px; height:36px; margin-left:auto; padding:0 14px; border-radius:8px; line-height:1; }
.at-cal-wrap { padding-bottom:28px; }
.at-cell-body { display:flex; flex-direction:column; gap:2px; padding:4px 2px 0; }
.at-t { font-size:12px; line-height:1.3; font-variant-numeric:tabular-nums; color:#333; }
.at-t.in:before { content:"출 "; color:#999; }
.at-t.out:before { content:"퇴 "; color:#999; }
.at-cnt { font-size:12px; font-weight:600; color:#333; }
.at-tag { display:inline-block; align-self:flex-start; padding:1px 6px; border-radius:8px; font-size:10px; font-weight:600; line-height:1.5; }
.at-tag.late { background:#fff1e0; color:#e08600; }
.at-tag.early { background:#f3e8fd; color:#8e24aa; }
.at-tag.noout { background:#fde8e8; color:#e53935; }
.at-tag.working { background:#e6f4ea; color:#0b8043; }
.at-tag.absent { background:#f0f2f5; color:#999; }
.at-legend { display:flex; flex-wrap:wrap; gap:6px; padding-top:10px; }
.at-day-add { height:auto; margin-top:10px; }
.at-day-add[hidden] { display:none; }
.at-item { display:flex; flex-direction:column; gap:8px; width:100%; padding:12px; border:0; border-radius:10px; background:#f7f8fa; font:inherit; text-align:left; box-sizing:border-box; }
button.at-item { cursor:pointer; }
button.at-item:hover { background:#eef1f5; }
.at-item-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.at-item-head b { font-size:14px; color:#222; }
.at-item-head small { font-size:12px; color:#888; }
.at-item-time { display:flex; gap:8px; }
.at-item-time span { display:flex; flex:1 1 0; flex-direction:column; gap:2px; min-width:0; }
.at-item-time em { font-size:11px; font-style:normal; color:#999; }
.at-item-time b { font-size:15px; font-weight:600; color:#333; }
.at-item-memo { margin:0; font-size:12px; color:#777; }
.at-sheet-who { margin:0 0 6px; font-size:14px; font-weight:600; color:#333; }
.at-sheet .sc-field input { flex:1 1 auto; min-width:0; }

@media (min-width:1024px) and (max-width:1700px) {
    .at-top { gap:16px; padding:0 20px 14px; }
    .at-top .att-btn { flex:0 0 320px; }
    .at-sum-item b { font-size:20px; }
    .at-tool { padding:0 20px 14px; }
    .at-cal-wrap { padding-bottom:24px; }
    .at-t { font-size:11px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .at-top { flex-direction:column; gap:12px; padding:0 16px 12px; }
    .at-top .att-btn { flex:1 1 auto; }
    .at-sum { padding:14px; }
    .at-sum-item b { font-size:19px; }
    .at-tool { padding:0 16px 12px; }
    .at-cal-wrap { padding-bottom:24px; }
    .at-t { font-size:11px; }
}

@media (max-width:767px) {
    .att-btn { gap:10px; padding:14px; }
    .att-btn-clock { font-size:22px; }
    .att-btn-row button { padding:11px 0; }
    .at-top { flex-direction:column; gap:10px; padding:0 8px 10px; }
    .at-top .att-btn { flex:1 1 auto; }
    .at-sum { flex-wrap:wrap; padding:8px 4px; }
    .at-sum-item { flex:1 1 33%; padding:6px 0; border-left:0; }
    .at-sum-item span { font-size:12px; }
    .at-sum-item b { font-size:17px; }
    .at-tool { gap:8px; padding:0 8px 10px; }
    .at-tool select { flex:1 1 100%; min-width:0; }
    .at-worktime { flex:1 1 auto; justify-content:space-between; }
    .at-worktime input { font-size:13px; }
    .at-excel { padding:0 12px; }
    .at-cal-wrap { padding-bottom:20px; }
    .at-cell-body { align-items:center; gap:0; padding:2px 0 0; }
    .at-t { font-size:9px; letter-spacing:-.3px; }
    .at-t.in:before { content:none; }
    .at-t.out:before { content:none; }
    .at-cnt { font-size:10px; }
    .at-cell-body .at-tag { display:none; }
    .at-cell:after { content:""; position:absolute; left:4px; right:4px; bottom:4px; height:3px; border-radius:2px; }
    .at-cell.st-absent:after { background:#cfd4da; }
    .at-cell.st-early:after { background:#8e24aa; }
    .at-cell.st-late:after { background:#f6a623; }
    .at-cell.st-noout:after { background:#e53935; }
    .at-item-time b { font-size:14px; }
}
/* 그룹웨어 메모 색상 */
.gm-c-yellow { --memo:#fff6c7; --memo-line:#f1dd7a; }
.gm-c-pink { --memo:#ffe3ea; --memo-line:#f5b3c4; }
.gm-c-blue { --memo:#e3effd; --memo-line:#a9c9f0; }
.gm-c-green { --memo:#e2f6e8; --memo-line:#a6dbb6; }
.gm-c-gray { --memo:#f0f2f5; --memo-line:#cfd5dc; }

/* 그룹웨어 좌측 메모 */
.gm-side { margin:20px; padding:12px; border:1px solid #e4e8ec; border-radius:6px; background:#fafbfc; }
.gm-shead { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:#444; font-size:13px; font-weight:700; }
.gm-shead b { color:var(--theme); }
.gm-more { color:#999; font-size:11px; font-weight:400; }
.gm-more:hover { color:var(--theme); }
.gm-quick { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.gm-quick textarea { width:100%; height:64px; padding:8px; border:1px solid #e4d98f; border-radius:4px; background:#fff9d6; color:#333; font-family:inherit; font-size:12px; line-height:1.5; resize:vertical; }
.gm-quick textarea:focus { border-color:var(--theme); outline:0; }
.gm-qbtn { width:100%; height:30px; margin:0; padding:0; font-size:12px; }
.gm-slist { display:flex; flex-direction:column; gap:4px; }
.gm-slist li a { display:flex; align-items:center; gap:6px; padding:6px 8px; border-left:3px solid var(--memo-line); border-radius:3px; background:var(--memo); color:#333; font-size:12px; line-height:1.4; }
.gm-slist li a:hover { color:var(--theme); }
.gm-slist li span { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.gm-slist li em { flex:none; color:#999; font-size:11px; font-style:normal; }
.gm-pin { color:#e03131; font-size:10px; }
.gm-sempty { padding:10px 0; color:#aaa; font-size:12px; text-align:center; }

/* 메모장 목록 */
.gm-count { margin-left:8px; color:#888; font-size:13px; font-weight:400; }
.gm-count b { color:var(--theme); }
.gm-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:20px; }
.gm-search { display:flex; flex:1; gap:6px; min-width:0; }
.gm-search .ma-input { max-width:360px; }
.gm-empty { margin:20px; padding:60px 0; color:#aaa; text-align:center; }
.gm-empty i { margin-bottom:10px; font-size:36px; }
.gm-cards { display:flex; flex-wrap:wrap; gap:16px; margin:20px; }
.gm-card { display:flex; flex-direction:column; width:calc((100% - 48px) / 4); min-height:200px; padding:14px 16px; border:1px solid var(--memo-line); border-radius:8px; background:var(--memo); box-shadow:0 2px 6px rgba(17, 24, 39, 0.05); }
.gm-chead { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.gm-ctitle { flex:1; min-width:0; color:#222; font-size:14px; font-weight:700; line-height:1.4; word-break:break-all; }
.gm-pinform { margin:0; }
.gm-pinbtn { color:#bbb; font-size:13px; }
.gm-pinbtn.on { color:#e03131; }
.gm-cbody { flex:1; display:-webkit-box; overflow:hidden; color:#444; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-all; -webkit-line-clamp:6; -webkit-box-orient:vertical; }
.gm-cfoot { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:12px; }
.gm-cfoot em { color:#999; font-size:11px; font-style:normal; }
.gm-cact { display:flex; gap:4px; }
.gm-cact form { margin:0; }
.gm-cact .ma-sbtn { margin:0; background:rgba(255, 255, 255, 0.7); }

/* 메모 쓰기 */
.gm-form { margin:20px; padding:20px; border:1px solid var(--memo-line); border-radius:8px; background:var(--memo); }
.gm-ftitle { width:100%; height:40px; margin-bottom:10px; padding:0 4px; border:0; border-bottom:1px dashed var(--memo-line); background:transparent; color:#222; font-family:inherit; font-size:16px; font-weight:700; }
.gm-ftitle:focus { outline:0; }
.gm-ftext { width:100%; min-height:360px; padding:4px; border:0; background:transparent; color:#333; font-family:inherit; font-size:14px; line-height:1.8; resize:vertical; }
.gm-ftext:focus { outline:0; }
.gm-fopt { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--memo-line); }
.gm-colors { display:flex; gap:8px; }
.gm-color { cursor:pointer; }
.gm-color input { display:none; }
.gm-color span { display:block; width:24px; height:24px; border:2px solid var(--memo-line); border-radius:50%; background:var(--memo); }
.gm-color input:checked + span { border-color:#343a4a; box-shadow:0 0 0 2px #fff inset; }
.gm-pincheck { display:inline-flex; align-items:center; gap:6px; color:#555; font-size:13px; cursor:pointer; }
.gm-pincheck i { color:#e03131; }
.gm-factions { display:flex; justify-content:center; gap:8px; margin-top:20px; }
.gm-delform { display:flex; justify-content:flex-end; margin:20px; }

/* 그룹웨어 메인 */
.gd-hello { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:20px; padding:20px 24px; border-radius:8px; background:var(--theme-soft); }
.gd-htext { display:flex; flex-direction:column; gap:4px; }
.gd-htext strong { color:#222; font-size:18px; }
.gd-htext em { color:#777; font-size:13px; font-style:normal; }
.gd-quick { display:flex; flex-wrap:wrap; gap:12px; margin:20px; }
.gd-qitem { position:relative; display:flex; flex:1 1 120px; flex-direction:column; align-items:center; gap:8px; padding:18px 10px; border:1px solid #e4e8ec; border-radius:8px; background:#fff; color:#444; font-size:13px; font-weight:600; }
.gd-qitem i { color:var(--theme); font-size:22px; }
.gd-qitem:hover { border-color:var(--theme); color:var(--theme); }
.gd-badge { position:absolute; top:8px; right:10px; padding:0 7px; border-radius:9px; background:#e03131; color:#fff; font-size:11px; font-style:normal; line-height:18px; }
.gd-row { display:flex; flex-wrap:wrap; gap:20px; margin:20px; }
.gd-box { flex:1 1 320px; min-width:0; padding:16px 20px; border:1px solid #e4e8ec; border-radius:8px; background:#fff; }
.gd-bhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #f0f2f4; }
.gd-bhead h3 { color:#343a4a; font-size:15px; }
.gd-bhead h3 i { margin-right:6px; color:var(--theme); }
.gd-stat { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.gd-num { display:flex; align-items:baseline; gap:8px; }
.gd-num b { color:var(--theme); font-size:32px; }
.gd-num span { color:#777; font-size:13px; }
.gd-list { display:flex; flex-direction:column; }
.gd-list li a { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed #f0f2f4; color:#333; font-size:13px; }
.gd-list li:last-child a { border-bottom:0; }
.gd-list li a:hover { color:var(--theme); }
.gd-list li span { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.gd-list li em { color:#999; font-size:12px; font-style:normal; }
.gd-dot { flex:none; width:10px; height:10px; border:1px solid var(--memo-line); border-radius:50%; background:var(--memo); }
.gd-empty { padding:20px 0; color:#aaa; font-size:13px; text-align:center; }

@media (min-width:1024px) and (max-width:1700px) {
    .gm-card { width:calc((100% - 32px) / 3); }
    .gd-qitem { flex:1 1 100px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .gm-side { margin:20px; }
    .gm-bar { margin:20px; }
    .gm-cards { gap:12px; margin:20px; }
    .gm-card { width:calc((100% - 12px) / 2); }
    .gm-form { margin:20px; padding:16px; }
    .gm-ftext { min-height:300px; }
    .gd-hello { margin:20px; padding:16px 20px; }
    .gd-htext strong { font-size:16px; }
    .gd-quick { gap:10px; margin:20px; }
    .gd-qitem { flex:1 1 calc((100% - 20px) / 3); }
    .gd-row { margin:20px; }
}

@media (max-width:767px) {
    .gm-side { margin:20px; }
    .gm-bar { flex-direction:column; align-items:stretch; margin:20px 0; }
    .gm-search .ma-input { max-width:none; }
    .gm-bar .btn-primary { width:100%; }
    .gm-empty { margin:20px 0; }
    .gm-cards { gap:10px; margin:20px 0; }
    .gm-card { width:100%; min-height:0; }
    .gm-form { margin:20px 0; padding:14px; }
    .gm-ftitle { font-size:15px; }
    .gm-ftext { min-height:260px; font-size:14px; }
    .gm-fopt { flex-direction:column; align-items:flex-start; }
    .gm-factions .btn { flex:1; }
    .gm-delform { margin:20px 0; }
    .gd-hello { flex-direction:column; align-items:stretch; margin:20px 0; padding:16px; }
    .gd-htext strong { font-size:15px; }
    .gd-quick { gap:8px; margin:20px 0; }
    .gd-qitem { flex:1 1 calc((100% - 16px) / 3); padding:14px 6px; font-size:12px; }
    .gd-qitem i { font-size:19px; }
    .gd-row { gap:20px; margin:20px 0; }
    .gd-box { flex:1 1 100%; padding:14px; }
}
/* 그룹웨어 메인 추가 */
.gd-hright { display:flex; align-items:center; gap:14px; }
.gd-clock { color:var(--theme); font-family:Consolas, monospace; font-size:24px; font-weight:700; letter-spacing:1px; }
.gd-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed #f0f2f4; }
.gd-links a { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:4px; background:#f7f8fa; color:#555; font-size:12px; }
.gd-links a:hover { color:var(--theme); }
.gd-acct { margin-left:6px; color:#999; font-size:11px; font-weight:400; }
.gd-from { flex:0 0 90px; overflow:hidden; color:#555; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }
.gd-unread .gd-from { color:#111; }
.gd-unread span { font-weight:700; }
.gd-empty .btn { margin-top:10px; }
.gd-wide { flex:2 1 480px; }
.gd-calnav { display:flex; align-items:center; gap:4px; }
.gd-calnav button { height:26px; min-width:26px; padding:0 8px; border:1px solid #e4e8ec; border-radius:4px; background:#fff; color:#555; font-size:12px; }
.gd-calnav button:hover { border-color:var(--theme); color:var(--theme); }
.gd-calnav .gm-more { margin-left:6px; }
.gd-week { display:flex; border-bottom:1px solid #f0f2f4; }
.gd-week span { width:calc(100% / 7); padding:6px 0; color:#777; font-size:12px; font-weight:600; text-align:center; }
.gd-week .sun { color:#e03131; }
.gd-week .sat { color:#1c7ed6; }
.gd-days { display:flex; flex-wrap:wrap; }
.gd-day { display:flex; align-items:center; justify-content:center; width:calc(100% / 7); height:40px; color:#333; font-size:13px; }
.gd-day:hover { background:var(--theme-soft); color:var(--theme); }
.gd-day.sun { color:#e03131; }
.gd-day.sat { color:#1c7ed6; }
.gd-day.other { color:#ccc; pointer-events:none; }
.gd-day.today { position:relative; color:var(--theme-on); font-weight:700; }
.gd-day.today::before { content:""; position:absolute; width:30px; height:30px; border-radius:50%; background:var(--theme); z-index:0; }
.gd-day.today { z-index:0; }
.gd-day.today { text-shadow:none; }
.gd-memo { display:flex; flex-direction:column; gap:8px; }
.gd-memo .ma-input { flex:none; width:100%; }
.gd-mtext { width:100%; min-height:200px; padding:10px; border:1px solid #e4d98f; border-radius:4px; background:#fff9d6; color:#333; font-family:inherit; font-size:13px; line-height:1.6; resize:vertical; }
.gd-mtext:focus { border-color:var(--theme); outline:0; }
.gd-mfoot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gd-mfoot .ma-btn { margin:0; }

@media (min-width:1024px) and (max-width:1700px) {
    .gd-clock { font-size:20px; }
    .gd-from { flex:0 0 70px; }
    .gd-day { height:36px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .gd-hright { gap:10px; }
    .gd-clock { font-size:18px; }
    .gd-from { flex:0 0 80px; }
    .gd-wide { flex:1 1 100%; }
    .gd-day { height:38px; }
    .gd-mtext { min-height:160px; }
}

@media (max-width:767px) {
    .gd-hright { justify-content:space-between; }
    .gd-clock { font-size:18px; }
    .gd-from { flex:0 0 64px; font-size:12px; }
    .gd-wide { flex:1 1 100%; }
    .gd-calnav .gm-more { display:none; }
    .gd-day { height:36px; font-size:12px; }
    .gd-day.today::before { width:26px; height:26px; }
    .gd-mtext { min-height:140px; }
    .gd-mfoot { flex-direction:column; align-items:stretch; }
    .gd-mfoot .ma-btn { width:100%; }
}
.gd-day.today { isolation:isolate; }
.gd-day.today::before { z-index:-1; }
.mc-accbox .avatar { width:50px; height:50px; font-size:11px; }

@media (min-width:768px) and (max-width:1023px) {
    .mc-accbox .avatar { display:none; }
}

@media (max-width:767px) {
    .mc-accbox .avatar { display:none; }
}
.mc-accbox { display:inline-flex; align-items:center; gap:2px; height:36px; padding:0 6px 0 0px; color:var(--theme); width:194px;  }
.mc-accsel { height:30px; padding:0 2px; border:0; outline:0; background:transparent; color:var(--theme); font-size:13px; font-weight:600; cursor:pointer; }
.mc-accounts .mc-add { height:36px; }

@media (min-width:768px) and (max-width:1023px) {
    .mc-accsel { min-width:180px; }
}

@media (max-width:767px) {
    .mc-accbox { flex:1; min-width:0; margin:0px 20px; }
    .mc-accsel { flex:1; min-width:0; }
    .mc-accounts .mc-add { flex:none; }
}
/* 웹메일 */
.mc-addr { padding-right:6px; }
.mc-at { flex:none; color:#999; font-size:14px; }
.mc-domain { flex:none; max-width:150px; height:32px; padding:0 8px; border:1px solid #e4e8ec; border-radius:4px; background:#f7f8fa; color:#333; font-size:13px; }
.mc-wrap { display:flex; justify-content:center; margin:20px; padding:40px 0; }
.mc-box { display:flex; flex-direction:column; width:100%; max-width:400px; padding:36px 32px; border:1px solid #dfe3e8; border-radius:10px; background:#fff; text-align:center; }
.mc-icon { margin-bottom:14px; color:var(--theme); font-size:40px; }
.mc-title { margin:0 0 8px; color:#222; font-size:22px; font-weight:700; }
.mc-desc { margin:0 0 20px; color:#777; font-size:13px; }
.mc-msg { margin:0 0 14px; padding:10px 12px; border-radius:4px; background:#fdeeee; color:#c0392b; font-size:13px; text-align:left; }
.mc-field { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:0 12px; height:44px; border:1px solid #ccd2d8; border-radius:6px; background:#fff; }
.mc-field i { color:#999; }
.mc-field input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:#333; font-size:14px; }
.mc-btn { height:44px; margin-top:6px; font-size:15px; }
.mc-email { margin-left:8px; color:#888; font-size:14px; font-weight:400; }
.mc-accounts { display:flex; flex-wrap:wrap; gap:8px; margin:20px; }
.mc-acc { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid #dfe3e8; border-radius:20px; background:#fff; color:#444; font-size:13px; }
.mc-acc.on { border-color:var(--theme); color:var(--theme); font-weight:600; }
.mc-acc em { padding:1px 6px; border-radius:8px; background:#eef4fb; color:var(--theme); font-size:11px; font-style:normal; }
.mc-add { border-style:dashed; color:#888; }
.mc-block { margin:20px; }
.mc-unread td { font-weight:700; }
.mb-time { margin:20px; color:#aaa; font-family:Consolas, monospace; font-size:11px; text-align:right; }
@media (min-width:768px) and (max-width:1023px) {
    .mc-wrap { margin:20px; padding:30px 0; }
    .mc-box { padding:30px 24px; }
}

@media (max-width:767px) {
    .mc-wrap { margin:20px 0; padding:10px 0; }
    .mc-box { max-width:none; padding:24px 16px; border-radius:8px; }
    .mc-title { font-size:19px; }
    .mc-accounts { margin:20px 0; }
    .mc-block { margin:20px 0; }
}

/* 웹메일 좌측 메뉴 */
.mb-write { display:flex; gap:6px; margin:20px; }
.mb-write .btn { flex:1; height:38px; border:1px solid #ccd2d8; border-radius:6px; background:#fff; color:#444; font-size:14px; font-weight:600; line-height:36px; text-align:center; }
.btn-me { width:85px; height:39px; line-height:39px; border-radius: 6px; border:1px solid #ddd; text-align:center; }
.cancel { border:1px solid #ddd; }
.mb-write .btn-primary { border-color:var(--theme); background:var(--theme); color:#fff; }


/* 태블릿 · 모바일 : 본문 위 메일쓰기 버튼 */
.mb-mwrite { display:none; }
@media (min-width:768px) and (max-width:1023px) {
    .mb-mwrite { display:flex; gap:8px; margin:20px; }
    .mb-mwrite .btn { flex:1; height:40px; margin:0; padding:0 12px; border:1px solid #ccd2d8; border-radius:6px; background:#fff; color:#444; font-size:14px; font-weight:600; }
    .mb-mwrite .btn-primary { border-color:var(--theme); background:var(--theme); color:var(--theme-on); }
}

@media (max-width:767px) {
    .mb-mwrite { display:flex; gap:8px; margin:0px; }
    .mb-mwrite .btn { flex:1; height:42px; margin:0; padding:0 10px; border:1px solid #ccd2d8; border-radius:6px; background:#fff; color:#444; font-size:14px; font-weight:600; }
    .mb-mwrite .btn-primary { border-color:var(--theme); background:var(--theme); color:var(--theme-on); }
    .btn-me { width:185px; height:42px; line-height:42px; border-radius: 6px; border:1px solid #ddd; text-align:center; }
}
.lm-list li.mb-on > a { color:var(--theme); font-weight:700; }
.mb-cnt { float:right; margin-top:6px; padding:0 7px; border-radius:9px; background:var(--theme); color:#fff; font-size:11px; font-style:normal; font-weight:600; line-height:18px; }
.lm-list li.mb-group { margin-top:16px; padding:6px 0; color:#999; font-size:12px; }
.mb-usage { margin:20px; padding:12px 14px; border:1px solid #e4e8ec; border-radius:6px; background:#fafbfc; }
.mb-utext { display:flex; align-items:baseline; gap:4px; margin-bottom:8px; color:#777; font-size:12px; line-height:1.4; }
.mb-utext span { margin-right:auto; }
.mb-utext b { color:var(--theme); font-size:13px; }
.mb-utext em { color:#999; font-style:normal; }
.mb-ubar { display:block; width:100%; height:6px; border:0; border-radius:3px; background:#e4e8ec; overflow:hidden; appearance:none; }
.mb-ubar::-webkit-progress-bar { border-radius:3px; background:#e4e8ec; }
.mb-ubar::-webkit-progress-value { border-radius:3px; background:var(--theme); }
.mb-ubar::-moz-progress-bar { border-radius:3px; background:var(--theme); }

/* 메일쓰기 : 첨부 파일 미리 업로드 */
.mw-filetotal { color:#555; font-size:12px; font-weight:600; }
.mw-filelist { flex:1 1 100%; display:flex; flex-direction:column; gap:4px; margin:0; padding:0; list-style:none; }
.mw-filelist:empty { display:none; }
.mw-filelist li { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #eceef1; border-radius:4px; background:#fafbfc; font-size:12px; color:#444; }
.mw-filelist li > i { color:#999; }
.mw-fname { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mw-fbar { flex:0 0 140px; height:8px; border:0; border-radius:4px; background:#f5ecc8; overflow:hidden; appearance:none; -webkit-appearance:none; }
.mw-fbar::-webkit-progress-bar { background:#f5ecc8; border-radius:4px; }
.mw-fbar::-webkit-progress-value { background:#f5c518; border-radius:4px; transition:width .2s; }
.mw-fbar::-moz-progress-bar { background:#f5c518; border-radius:4px; }
.mw-fsize { flex:0 0 auto; min-width:70px; color:#888; font-style:normal; text-align:right; white-space:nowrap; }
.mw-fpct { flex:0 0 38px; color:#b8860b; font-weight:700; text-align:right; }
.mw-fdel { flex:0 0 auto; width:24px; height:24px; border-radius:4px; color:#aaa; font-size:12px; }
.mw-fdel:hover { background:#fdecec; color:#c0392b; }
.mw-filelist li.mw-fing { border-color:#f3e2a9; background:#fffbea; }
.mw-filelist li.mw-fdone .mw-fbar { display:none; }
.mw-filelist li.mw-fdone .mw-fpct { color:#2e9d5b; }
.mw-filelist li.mw-ferr { border-color:#f3c4c4; background:#fef5f5; }
.mw-filelist li.mw-ferr .mw-fbar { display:none; }
.mw-filelist li.mw-ferr .mw-fpct { color:#c0392b; }
.mw-filelist li.mw-ferr .mw-fsize { color:#c0392b; }

@media (min-width:1024px) and (max-width:1700px) {
    .mw-fbar { flex:0 0 110px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mw-filelist li { gap:6px; padding:6px 8px; }
    .mw-fbar { flex:0 0 90px; }
    .mw-fsize { min-width:60px; }
}

@media (max-width:767px) {
    .mw-filetotal { flex:1 1 100%; }
    .mw-filelist li { flex-wrap:wrap; gap:4px 6px; padding:8px; font-size:12px; }
    .mw-fname { flex:1 1 calc(100% - 60px); }
    .mw-fbar { order:5; flex:1 1 100%; height:6px; }
    .mw-fsize { order:4; flex:1 1 auto; min-width:0; text-align:left; }
    .mw-fpct { order:3; flex:0 0 auto; }
    .mw-fdel { order:2; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mw-filelist li { padding:6px 8px; }
    .mw-fpct { flex:0 0 38px; }
    .mw-upload { padding:10px; }
}

@media (max-width:767px) {
    .mw-filetotal { flex:1 1 100%; }
    .mw-filelist li { gap:6px; padding:7px 8px; font-size:12px; }
    .mw-fpct { flex:0 0 36px; }
    .mw-upload { padding:10px; }
    .mw-uptext { gap:4px 8px; }
    .mw-uptext em { flex:1 1 100%; margin-left:0; }
}

@media (min-width:1024px) and (max-width:1700px) {
    .mb-usage { padding:10px 12px; }
    .mb-utext { font-size:11px; }
    .mb-utext b { font-size:12px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mb-write { margin:20px; }
    .mb-usage { margin:20px; padding:10px 12px; }
    .mb-utext { font-size:12px; }
}

@media (max-width:767px) {
    .mb-write { margin:20px; }
    .mb-usage { margin:20px; padding:12px; }
    .mb-utext { font-size:12px; }
    .mb-ubar { height:8px; }
}

@media (min-width:1024px) and (max-width:1700px) {
    .mb-write .btn { font-size:13px; }
    .mb-tools { gap:4px; }
    .mb-tools a { font-size:10px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mb-write { margin:20px; }
    .mb-write .btn { height:36px; font-size:13px; line-height:34px; }
    .mb-tools { gap:4px; margin:20px; }
    .mb-tools a { padding:7px 0; font-size:10px; }
    .lm-list li.mb-box > a { padding-top:6px; padding-bottom:6px; }
}

@media (max-width:767px) {
    .mb-write { margin:20px; }
    .mb-write .btn { height:40px; line-height:38px; }
    .mb-tools { gap:6px; margin:20px; }
    .mb-tools a { padding:10px 0; font-size:12px; }
    .mb-tools a i { font-size:17px; }
    .lm-list li.mb-box > a { padding-top:9px; padding-bottom:9px; }
}

/* 웹메일 목록 */
.mb-count { margin-left:8px; color:#888; font-size:13px; font-weight:400; }
.mb-count b { color:var(--theme); }
.mb-form { margin:20px; }
.mb-tool { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px; padding:10px 12px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.mb-chk { display:inline-flex; align-items:center; padding:0 6px; }
.mb-tbtn { height:32px; padding:0 12px; font-size:13px; }
.mb-del { color:#fff; background-color: #b91c1c; }
.junk { color:#b91c1c; }
.mb-movebox { display:flex; align-items:center; gap:6px; margin-left:auto; }
.mb-move { height:32px; padding:0 8px; border:1px solid #ccd2d8; border-radius:4px; background:#fff; color:#333; font-size:13px; }
.mb-table td.mb-c { width:36px; text-align:center; }
.mb-table th.mb-c { width:36px; }
.mb-star { color:#f5b301; }
.mb-star-off { color:#ccc; }
.mb-who { max-width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mb-subject a { color:#333; }
.mb-subject a:hover { color:var(--theme); }
.mb-date { width:90px; color:#777; white-space:nowrap; }
.mb-size { width:70px; color:#999; font-size:12px; white-space:nowrap; }
.mb-unread td { font-weight:700; }
.mb-unread .mb-subject a { color:#111; }
.mb-paging { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin:20px; }
.mb-paging a { min-width:32px; height:32px; padding:0 8px; border:1px solid #dfe3e8; border-radius:4px; background:#fff; color:#555; font-size:13px; line-height:30px; text-align:center; }
.mb-paging a.on { border-color:var(--theme); background:var(--theme); color:#fff; }

@media (min-width:1024px) and (max-width:1700px) {
    .mb-who { max-width:150px; }
    .mb-tbtn { padding:0 10px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mb-form { margin:20px; }
    .mb-tool { gap:5px; padding:10px; }
    .mb-tbtn { height:32px; padding:0 9px; font-size:12px; }
    .mb-movebox { width:100%; margin-left:0; }
    .mb-move { flex:1; }
    .mb-who { max-width:120px; }
    .mb-size { display:none; }
    .mb-paging { margin:20px; }
}

@media (max-width:767px) {
    .mb-form { margin:20px 0; }
    .mb-tool { gap:5px; padding:10px 8px; }
    .mb-tbtn { flex:1; height:34px; padding:0 6px; font-size:12px; }
    .mb-movebox { width:100%; margin-left:0; }
    .mb-move { flex:1; height:34px; }
    .mb-table td.mb-c { width:auto; text-align:left; }
    .mb-who { max-width:none; }
    .mb-size { display:none; }
    .mb-paging { margin:20px 0; }
}

/* 웹메일 읽기 */
.mr-tool { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:20px; padding:10px 12px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.mr-nav { display:flex; gap:6px; margin-left:auto; }
.mr-box { margin:20px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.mr-head { display:flex; align-items:center; gap:10px; padding:20px 20px 10px; }
.mr-starform { margin:0; }
.mr-star { padding:0; border:0; background:transparent; color:#ccc; font-size:18px; cursor:pointer; }
.mr-star.on { color:#f5b301; }
.mr-subject { flex:1; min-width:0; margin:0; color:#222; font-size:20px; font-weight:700; word-break:break-all; }
.mr-info { margin:0; padding:0 20px 16px; border-bottom:1px solid #eef0f3; }
.mr-row { display:flex; gap:10px; padding:3px 0; font-size:13px; }
.mr-row dt { flex:0 0 70px; color:#999; }
.mr-row dd { flex:1; min-width:0; margin:0; color:#444; word-break:break-all; }
.mr-files { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 20px; border-bottom:1px solid #eef0f3; background:#fafbfc; }
.mr-ftitle { width:100%; color:#666; font-size:13px; }
.mr-ftitle b { color:var(--theme); }
.mr-file { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:6px 12px; border:1px solid #dfe3e8; border-radius:4px; background:#fff; color:#444; font-size:13px; }
.mr-file span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mr-file em { color:#999; font-size:12px; font-style:normal; }
.mr-file:hover { border-color:var(--theme); color:var(--theme); }
.mr-frame { display:block; width:100%; min-height:300px; border:0; border-radius:0 0 6px 6px; background:#fff; }

@media (min-width:1024px) and (max-width:1700px) {
    .mr-subject { font-size:18px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mr-tool { gap:5px; margin:20px; padding:10px; }
    .mr-box { margin:20px; }
    .mr-head { padding:16px 16px 8px; }
    .mr-subject { font-size:17px; }
    .mr-info { padding:0 16px 14px; }
    .mr-files { padding:12px 16px; }
}

@media (max-width:767px) {
    .mr-tool { gap:5px; margin:20px 0; padding:10px 8px; }
    .mr-nav { margin-left:0; }
    .mr-box { margin:20px 0; }
    .mr-head { padding:14px 14px 8px; }
    .mr-subject { font-size:16px; }
    .mr-info { padding:0 14px 12px; }
    .mr-row dt { flex:0 0 60px; }
    .mr-files { padding:12px 14px; }
    .mr-file { width:100%; }
    .mr-frame { min-height:240px; }
}

/* 웹메일 도구 (주소록 · 수신차단 · 메일함 관리) */
.ma-msg { margin:20px; padding:10px 14px; border-radius:4px; background:#fdeeee; color:#c0392b; font-size:13px; }
.ma-box { margin:20px; padding:16px 20px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.ma-title { margin:0 0 12px; color:#333; font-size:15px; font-weight:700; }
.ma-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ma-input { flex:1 1 140px; min-width:0; height:36px; padding:0 10px; border:1px solid #ccd2d8; border-radius:4px; background:#fff; color:#333; font-size:13px; }
.ma-wide { flex:2 1 220px; }
.ma-small { flex:1 1 120px; height:28px; font-size:12px; }
.ma-btn { height:36px; padding:0 16px; font-size:13px; }
.ma-tablewrap { margin:20px; }
.ma-act { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.ma-act form { margin:0; }
.ma-inline { flex-wrap:nowrap; gap:4px; }
.ma-sbtn { height:28px; padding:0 10px; font-size:12px; }
.ma-del { color:#c0392b; }
.ma-tag { padding:1px 8px; border-radius:10px; background:#eef4fb; color:var(--theme); font-size:11px; }

@media (min-width:1024px) and (max-width:1700px) {
    .ma-input { flex:1 1 120px; }
    .ma-wide { flex:2 1 180px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .ma-msg { margin:20px; }
    .ma-box { margin:20px; padding:14px 16px; }
    .ma-input { flex:1 1 45%; }
    .ma-wide { flex:1 1 100%; }
    .ma-tablewrap { margin:20px; }
}

@media (max-width:767px) {
    .ma-msg { margin:20px 0; }
    .ma-box { margin:20px 0; padding:14px 12px; }
    .ma-row { gap:6px; }
    .ma-input { flex:1 1 100%; height:38px; }
    .ma-wide { flex:1 1 100%; }
    .ma-small { flex:1 1 auto; height:32px; }
    .ma-btn { flex:1; height:38px; }
    .ma-tablewrap { margin:20px 0; }
    .ma-inline { width:100%; }
}

/* 웹메일 환경설정 */
.ms-ok { margin:20px; padding:10px 14px; border-radius:4px; background:#e8f6ee; color:#1e8449; font-size:13px; }
.ms-item { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #f0f2f4; }
.ma-title + .ms-item { border-top:0; }
.ms-label { flex:0 0 180px; color:#444; font-size:14px; }
.ms-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ms-small { color:#777; font-size:12px; word-break:break-all; }
.ms-small b { color:var(--theme); }
.ms-state { display:inline-block; padding:2px 10px; border-radius:10px; font-size:12px; font-weight:600; }
.ms-state.ok { background:#e8f6ee; color:#1e8449; }
.ms-state.bad { background:#fdeeee; color:#c0392b; }
.ms-layouts { display:flex; flex-wrap:wrap; gap:10px; }
.ms-layout { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.ms-layout input { display:none; }
.ms-layout em { color:#666; font-size:12px; font-style:normal; }
.ms-pic { display:flex; gap:3px; width:84px; height:56px; padding:5px; border:2px solid #dfe3e8; border-radius:6px; background:#f7f8fa; }
.ms-pic i { display:block; border-radius:2px; background:#cdd3da; }
.ms-pic b { display:block; flex:1; border-radius:2px; background:#e4e8ec; }
.ms-pic-basic { flex-direction:column; }
.ms-pic-basic i { flex:1; }
.ms-pic-lr i { flex:0 0 40%; }
.ms-pic-tb { flex-direction:column; }
.ms-pic-tb i { flex:0 0 45%; }
.ms-layout input:checked + .ms-pic { border-color:var(--theme); background:#eef4fb; }
.ms-layout input:checked ~ em { color:var(--theme); font-weight:700; }
.ms-radios { display:flex; flex-wrap:wrap; gap:16px; color:#444; font-size:14px; }
.ms-radios label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.ms-switch { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
.ms-switch input { display:none; }
.ms-switch span { position:absolute; inset:0; border-radius:12px; background:#cdd3da; transition:background .2s; }
.ms-switch span::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s; }
.ms-switch input:checked + span { background:var(--theme); }
.ms-switch input:checked + span::after { left:23px; }
.ms-sign { display:block; width:100%; min-height:160px; margin-top:10px; padding:10px; border:1px solid #ccd2d8; border-radius:4px; background:#fff; color:#333; font-size:13px; resize:vertical; }
.ms-save { display:flex; justify-content:center; margin:20px; }
.ms-save .ma-btn { min-width:160px; height:42px; font-size:15px; }

@media (min-width:1024px) and (max-width:1700px) {
    .ms-label { flex:0 0 150px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .ms-ok { margin:20px; }
    .ms-label { flex:0 0 140px; font-size:13px; }
    .ms-pic { width:72px; height:48px; }
    .ms-save { margin:20px; }
}

@media (max-width:767px) {
    .ms-ok { margin:20px 0; }
    .ms-item { gap:8px; }
    .ms-label { flex:1 1 100%; font-size:13px; font-weight:600; }
    .ms-layouts { width:100%; justify-content:space-between; }
    .ms-pic { width:84px; height:52px; }
    .ms-item select { width:100%; }
    .ms-save { margin:20px 0; }
    .ms-save .ma-btn { width:100%; }
}
/* 웹메일 쓰기 */
.mw-hidden { display:none; }
.mw-form { margin:20px; }
.mw-tool { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:20px; }
.mw-btn { height:36px; padding:0 16px; font-size:13px; }
.mw-box { padding:6px 20px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.mw-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #f0f2f4; }
.mw-row:last-child { border-bottom:0; }
.mw-row.mw-off { display:none; }
.mw-label { flex:0 0 90px; color:#555; font-size:13px; font-weight:600; }
.mw-field { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.mw-input { flex:1; min-width:0; height:36px; padding:0 10px; border:1px solid #ccd2d8; border-radius:4px; background:#fff; color:#333; font-size:13px; }
.mw-input:focus { border-color:var(--theme); outline:0; }
.mw-addr { flex:none; max-width:160px; height:36px; padding:0 8px; border:1px solid #ccd2d8; border-radius:4px; background:#f7f8fa; color:#555; font-size:12px; }
.mw-sbtn { height:36px; padding:0 12px; border:1px solid #ccd2d8; background:#fff; color:#555; font-size:12px; }
.mw-filebtn { position:relative; overflow:hidden; cursor:pointer; }
.mw-filebtn input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.mw-filelist { color:#666; font-size:12px; word-break:break-all; }
.mw-fwd { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid #e4e8ec; border-radius:4px; background:#fafbfc; color:#555; font-size:12px; cursor:pointer; }
.mw-fwd em { color:#999; font-style:normal; }
.mw-editor { margin-top:20px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.mw-etool { display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:6px 8px; border-bottom:1px solid #eef0f3; background:#fafbfc; border-radius:6px 6px 0 0; }
.mw-etool button { width:32px; height:30px; border-radius:4px; color:#555; font-size:13px; }
.mw-etool button:hover { background:#eef1f5; color:var(--theme); }
.mw-color { position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:30px; border-radius:4px; color:#555; cursor:pointer; }
.mw-color:hover { background:#eef1f5; color:var(--theme); }
.mw-color input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.mw-sep { width:1px; height:18px; margin:0 4px; background:#dfe3e8; }
.mw-area { min-height:420px; padding:20px; color:#222; font-size:14px; line-height:1.7; outline:0; word-break:break-word; }
.mw-area img { max-width:100%; height:auto; }
.mw-area blockquote { margin:10px 0 0; padding:0 0 0 12px; border-left:3px solid #dfe3e8; color:#555; }
.mw-signature { color:#666; }

@media (min-width:1024px) and (max-width:1700px) {
    .mw-label { flex:0 0 80px; }
    .mw-area { min-height:360px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mw-form { margin:20px; }
    .mw-box { padding:4px 16px; }
    .mw-label { flex:0 0 72px; font-size:12px; }
    .mw-addr { max-width:130px; }
    .mw-area { min-height:320px; padding:16px; }
}

@media (max-width:767px) {
    .mw-form { margin:20px 0; }
    .mw-tool { gap:6px; margin-bottom:16px; }
    .mw-tool .mw-btn { flex:1; height:40px; margin:0; padding:0 10px; }
    .mw-tool .mw-btn .dark { background:#333;  }
    .mw-box { padding:6px 14px; }
    .mw-row { flex-direction:column; align-items:stretch; gap:8px; padding:12px 0; }
    .mw-label { flex:none; font-size:12px; }
    .mw-row > .mw-input { flex:none; width:100%; height:42px; padding:0 12px; font-size:14px; }
    .mw-field { flex-wrap:wrap; gap:6px; }
    .mw-field .mw-input { flex:1 1 100%; height:42px; padding:0 12px; font-size:14px; }
    .mw-addr { flex:1; max-width:none; height:38px; margin:0; }
    .mw-sbtn { flex:0 0 auto; height:38px; margin:0; padding:0 14px; }
    .mw-filebtn { flex:1; justify-content:center; }
    .mw-editor { margin-top:16px; }
    .mw-etool { gap:2px; padding:6px; }
    .mw-area { min-height:260px; padding:14px; font-size:14px; }    
    .cancel { border:1px solid #ddd; }
}
/* 웹메일 목록 - 태블릿 · 모바일 한 줄 리스트 */
@media (min-width:768px) and (max-width:1024px) {
    .mb-form .table-wrap { padding:0; }
    .mb-table, .mb-table tbody { display:block; width:100%; }
    .mb-table thead { display:none; }
    .mb-table tr { display:flex; align-items:center; gap:10px; width:100%; margin:0; padding:11px 8px; border-bottom:1px solid #eef0f3; border-radius:0; background:transparent; box-shadow:none; }
    .mb-table td { display:block; width:auto; padding:0; border:0; text-align:left; }
    .mb-table td::before { content:none; }
    .mb-table td.mb-c { flex:none; width:auto; text-align:center; }
    .mb-table .mb-who { flex:0 0 140px; max-width:140px; overflow:hidden; color:#333; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }
    .mb-table .mb-subject { flex:1 1 auto; min-width:0; overflow:hidden; }
    .mb-table .mb-subject a { display:block; overflow:hidden; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }
    .mb-table .mb-date { flex:none; width:auto; color:#999; font-size:12px; }
    .mb-table .mb-size { display:none; }
    .mb-table .empty { width:100%; padding:40px 0; text-align:center; }
    .mb-table tr.mb-unread .mb-who { color:#111; font-weight:700; }
}

@media (max-width:767px) {
    .mb-form .table-wrap { padding:0; }
    .mb-table, .mb-table tbody { display:block; width:100%; }
    .mb-table thead { display:none; }
    .mb-table tr { display:flex; align-items:center; gap:8px; width:100%; margin:0; padding:12px 4px; border-bottom:1px solid #eef0f3; border-radius:0; background:transparent; box-shadow:none; }
    .mb-table td { display:block; width:auto; padding:0; border:0; text-align:left; }
    .mb-table td::before { content:none; }
    .mb-table td.mb-c { flex:none; width:auto; text-align:center; }
    .mb-table td.mb-c input { width:16px; height:16px; }
    .mb-table .mb-who { flex:0 0 76px; max-width:76px; overflow:hidden; color:#333; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }
    .mb-table .mb-subject { flex:1 1 auto; min-width:0; overflow:hidden; }
    .mb-table .mb-subject a { display:block; overflow:hidden; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }
    .mb-table .mb-date { flex:none; width:auto; color:#999; font-size:11px; }
    .mb-table .mb-size { display:none; }
    .mb-table .empty { width:100%; padding:40px 0; text-align:center; }
    .mb-table tr.mb-unread .mb-who { color:#111; font-weight:700; }
}
/* ========== 디비 관리 ========== */
.db-wrap { display:flex; flex-direction:column; gap:14px; padding:0 24px 28px; }
.db-top { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.db-pickbox { display:flex; align-items:center; gap:8px; height:44px; padding:0 4px 0 14px; border:1px solid #e5e8ec; border-radius:10px; background:#fff; box-sizing:border-box; cursor:pointer; }
.db-pickbox i { font-size:14px; color:var(--theme-dark); }
.db-pick { width:auto; min-width:220px; height:34px; padding:0 30px 0 4px; border:0; background-color:transparent; font-size:14px; font-weight:600; color:#222; cursor:pointer; outline:none; }
.db-backup { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 16px; border-radius:10px; font-size:14px; }
.db-backup:disabled { opacity:.6; cursor:wait; }
.db-newdb { display:flex; align-items:center; gap:6px; margin:0 0 0 auto; }
.db-newdb input { width:200px; height:44px; padding:0 14px; border:1px solid #e5e8ec; border-radius:10px; background:#fff; font-size:14px; box-sizing:border-box; outline:none; }
.db-newdb input:focus { border-color:var(--theme); }
.db-newdb .btn { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 16px; border-radius:10px; font-size:14px; }
.db-tabs { display:flex; align-self:flex-start; gap:4px; padding:4px; border-radius:10px; background:#f0f2f5; }
.db-tabs button { display:flex; align-items:center; gap:6px; padding:8px 16px; border:0; border-radius:8px; background:transparent; font:inherit; font-size:14px; color:#666; cursor:pointer; transition:background .15s; }
.db-tabs button:hover { color:#333; }
.db-tabs button.on { background:#fff; font-weight:600; color:var(--theme-dark); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.db-pane { display:none; flex-direction:column; gap:12px; min-width:0; padding:16px 18px; border:1px solid #e5e8ec; border-radius:12px; background:#fff; }
.db-pane.on { display:flex; }
.db-list { display:flex; flex-direction:column; gap:12px; }
.db-list[hidden] { display:none; }
.db-detail { display:flex; flex-direction:column; gap:12px; }
.db-detail[hidden] { display:none; }
.db-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.db-bar input[type="text"] { width:240px; height:34px; padding:0 12px; border:1px solid #dfe3e8; border-radius:8px; font-size:14px; box-sizing:border-box; }
.db-bar .btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; }
.db-bar-r { margin-left:auto; }
div.db-bar-r { display:flex; gap:6px; }
.db-count { font-size:13px; color:#888; }
.db-dname { font-size:16px; color:#222; }
.db-sub { display:flex; gap:2px; padding:3px; border-radius:8px; background:#f0f2f5; }
.db-sub button { padding:5px 12px; border:0; border-radius:6px; background:transparent; font:inherit; font-size:13px; color:#666; cursor:pointer; }
.db-sub button.on { background:#fff; font-weight:600; color:var(--theme-dark); box-shadow:0 1px 2px rgba(0,0,0,.1); }
.db-subpane { display:flex; flex-direction:column; gap:10px; }
.db-scroll { max-width:100%; max-height:70vh; overflow:auto; border:1px solid #eceef1; border-radius:8px; }
.db-table { width:100%; border-collapse:collapse; font-size:13px; }
.db-table th { position:sticky; top:0; z-index:1; padding:9px 12px; border-bottom:1px solid #e5e8ec; background:#f7f8fa; font-weight:600; color:#555; text-align:left; white-space:nowrap; }
.db-table td { padding:8px 12px; border-bottom:1px solid #f0f2f5; color:#333; white-space:nowrap; vertical-align:middle; }
.db-table tbody tr:hover td { background:#fafbfc; }
.db-table tbody tr:last-child td { border-bottom:0; }
.db-table .r { text-align:right; }
.db-table .c { text-align:center; }
.db-table td.db-mute { color:#888; }
.db-table td.db-empty { padding:30px 0; color:#999; text-align:center; font-size:15px; }
.db-link { padding:0; border:0; background:transparent; font:inherit; font-weight:600; color:var(--theme-dark); cursor:pointer; }
.db-link:hover { text-decoration:underline; }
.db-badge { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px; background:#eef1f5; font-size:10px; font-style:normal; font-weight:600; color:#666; vertical-align:middle; }
.db-badge.all { margin-left:0; background:var(--theme-soft); color:var(--theme-dark); }
.db-badge.lock { background:#fde8e8; color:#e53935; }
.db-grid td { max-width:320px; overflow:hidden; text-overflow:ellipsis; font-family:Consolas, Menlo, monospace; font-size:12px; }
.db-grid td.db-null { font-style:italic; color:#bbb; }
.db-pager { display:flex; align-items:center; justify-content:center; gap:10px; font-size:13px; color:#666; }
.db-pager button { width:32px; height:32px; border:1px solid #dfe3e8; border-radius:8px; background:#fff; color:#555; cursor:pointer; }
.db-pager button:disabled { opacity:.4; cursor:default; }
.db-h { margin:6px 0 0; font-size:14px; font-weight:600; color:#333; }
.db-pre { margin:0; padding:14px; overflow:auto; border-radius:8px; background:#1f2430; font-family:Consolas, Menlo, monospace; font-size:12px; line-height:1.6; color:#e6e6e6; white-space:pre; }
.db-pre[hidden] { display:none; }
.db-copy { align-self:flex-start; height:auto; }
.db-loading { padding:30px 0; font-size:13px; color:#999; text-align:center; }
.db-acts { display:flex; justify-content:center; gap:4px; }
.db-acts button { padding:4px 10px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; font:inherit; font-size:12px; color:#555; cursor:pointer; }
.db-acts button:hover { border-color:var(--theme); color:var(--theme-dark); }
.db-acts button.del { border-color:#f5c2c0; color:#e53935; }
.db-check { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#555; cursor:pointer; }

.db-sql { display:flex; flex-direction:column; gap:10px; }
.db-sql textarea { width:100%; min-height:180px; padding:14px; border:1px solid #2c3240; border-radius:8px; background:#1f2430; font-family:Consolas, Menlo, monospace; font-size:13px; line-height:1.6; color:#e6e6e6; resize:vertical; box-sizing:border-box; outline:none; }
.db-sql textarea:focus { border-color:var(--theme); }
.db-chips { display:flex; flex-wrap:wrap; gap:6px; max-height:72px; overflow-y:auto; }
.db-chips button { padding:3px 10px; border:1px solid #e5e8ec; border-radius:12px; background:#f7f8fa; font-family:Consolas, Menlo, monospace; font-size:12px; color:#555; cursor:pointer; }
.db-chips button:hover { border-color:var(--theme); color:var(--theme-dark); }
.db-hint { font-size:12px; color:#aaa; }
.db-results { display:flex; flex-direction:column; gap:14px; }
.db-res { display:flex; flex-direction:column; gap:8px; }
.db-res-head { display:flex; align-items:center; gap:10px; }
.db-res-head code { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#555; }
.db-res-meta { flex:0 0 auto; font-size:12px; color:#888; }
.db-res-ok { padding:10px 12px; border-radius:8px; background:#e6f4ea; font-size:13px; color:#0b8043; }
.db-res-err { padding:10px 12px; border-radius:8px; background:#fde8e8; font-size:13px; color:#c62828; white-space:pre-wrap; word-break:break-all; }
.db-res-more { margin:0; font-size:12px; color:#e08600; }

.db-layer { position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; display:flex; align-items:center; justify-content:center; }
.db-layer[hidden] { display:none; }
.db-layer-dim { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); }
.db-layer-box { position:relative; display:flex; flex-direction:column; width:520px; max-width:calc(100% - 32px); max-height:90vh; overflow:hidden; border-radius:14px; background:#fff; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.db-layer-box.wide { width:1100px; }
.db-layer-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #eceef1; }
.db-layer-head strong { font-size:16px; color:#222; }
.db-x { width:32px; height:32px; border:0; border-radius:50%; background:transparent; font-size:16px; color:#777; cursor:pointer; }
.db-x:hover { background:#f0f2f5; }
.db-layer-body { display:flex; flex-direction:column; gap:12px; padding:16px 18px; overflow-y:auto; }
.db-layer-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid #eceef1; }
.db-row { display:flex; flex-wrap:wrap; gap:10px; }
.db-f { display:flex; flex-direction:column; gap:6px; min-width:0; }
.db-f.grow { flex:1 1 220px; }
.db-f > span { font-size:13px; font-weight:600; color:#555; }
.db-f input[type="text"] { height:36px; padding:0 10px; border:1px solid #dfe3e8; border-radius:8px; font-size:14px; box-sizing:border-box; }
.db-f select { height:36px; padding:0 30px 0 10px; border:1px solid #dfe3e8; border-radius:8px; font-size:14px; }
.db-host { display:flex; gap:6px; }
.db-host select { flex:0 0 150px; }
.db-host input[type="text"] { flex:1 1 auto; min-width:0; }
.db-host .btn { flex:0 0 auto; height:36px; }
.db-note { margin:-4px 0 0; font-size:12px; color:#888; }
.db-note[hidden] { display:none; }
.db-all { align-self:flex-start; font-weight:600; }
.db-privs { display:flex; flex-wrap:wrap; gap:6px; }
.db-privs .db-check { flex:0 0 calc(33.333% - 4px); padding:6px 8px; border:1px solid #eceef1; border-radius:6px; font-size:12px; box-sizing:border-box; }
.db-cols td { padding:4px 6px; }
.db-cols input[type="text"] { width:100%; min-width:90px; height:32px; padding:0 8px; border:1px solid #dfe3e8; border-radius:6px; font-size:13px; box-sizing:border-box; }
.db-cols select { height:32px; padding:0 24px 0 8px; border:1px solid #dfe3e8; border-radius:6px; font-size:13px; }
.db-cols input[type="checkbox"] { width:16px; height:16px; }
.db-cdel { width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:#999; cursor:pointer; }
.db-cdel:hover { background:#fde8e8; color:#e53935; }
.db-cadd { align-self:flex-start; height:auto; }

@media (min-width:1024px) and (max-width:1700px) {
    .db-wrap { padding:0 20px 24px; }
    .db-newdb input { width:170px; }
    .db-layer-box.wide { width:calc(100% - 64px); }
}

@media (min-width:768px) and (max-width:1023px) {
    .db-wrap { gap:12px; padding:0 16px 24px; }
    .db-pickbox { flex:1 1 auto; min-width:0; }
    .db-pick { flex:1 1 auto; min-width:0; }
    .db-newdb { flex:1 1 100%; margin:0; }
    .db-newdb input { flex:1 1 auto; width:auto; min-width:0; }
    .db-tabs { align-self:stretch; }
    .db-tabs button { flex:1 1 0; justify-content:center; }
    .db-pane { padding:14px; }
    .db-bar input[type="text"] { flex:1 1 200px; width:auto; }
    .db-grid td { max-width:240px; }
    .db-layer-box.wide { width:calc(100% - 32px); }
    .db-privs .db-check { flex:0 0 calc(50% - 3px); }
}

@media (max-width:767px) {
    .db-wrap { gap:10px; padding:0 8px 20px; }
    .db-top { gap:6px; }
    .db-pickbox { flex:1 1 0; min-width:0; height:42px; }
    .db-pick { flex:1 1 auto; min-width:0; }
    .db-backup { flex:0 0 auto; height:42px; padding:0 14px; }
    .db-backup span { display:none; }
    .db-newdb { flex:1 1 100%; margin:0; }
    .db-newdb input { flex:1 1 auto; width:auto; min-width:0; height:42px; }
    .db-newdb .btn { flex:0 0 auto; height:42px; padding:0 14px; }
    .db-tabs { align-self:stretch; }
    .db-tabs button { flex:1 1 0; justify-content:center; padding:8px 6px; font-size:13px; }
    .db-pane { padding:12px 10px; border-radius:10px; }
    .db-bar input[type="text"] { flex:1 1 100%; width:auto; }
    .db-detail .db-sub { order:3; flex:1 1 100%; }
    .db-sub button { flex:1 1 0; }
    .db-scroll { max-height:60vh; }
    .db-table { font-size:12px; }
    .db-table th { padding:8px; }
    .db-table td { padding:7px 8px; }
    .db-grid td { max-width:180px; }
    .db-sql textarea { min-height:150px; font-size:12px; }
    .db-res-head { flex-wrap:wrap; }
    .db-layer { align-items:flex-end; }
    .db-layer-box { width:100%; max-width:100%; max-height:92vh; border-radius:14px 14px 0 0; }
    .db-layer-box.wide { width:100%; }
    .db-layer-foot .btn { flex:1 1 0; }
    .db-host select { flex:0 0 120px; }
    .db-privs .db-check { flex:0 0 calc(50% - 3px); }
}
.col-manage .btn + .btn { margin-left:4px; }
/* ========== 루트 인증 ========== */
.rg-wrap { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 220px); padding:24px; box-sizing:border-box; }
.rg-box { display:flex; flex-direction:column; align-items:center; gap:14px; width:380px; max-width:100%; padding:36px 32px 28px; border:1px solid #e5e8ec; border-radius:16px; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.06); box-sizing:border-box; }
.rg-icon { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--theme-soft); font-size:26px; color:var(--theme-dark); }
.rg-title { margin:0; font-size:20px; font-weight:700; color:#222; }
.rg-desc { margin:-6px 0 0; font-size:13px; color:#888; text-align:center; }
.rg-msg { align-self:stretch; padding:10px 12px; border-radius:8px; background:#fde8e8; font-size:13px; color:#c62828; text-align:center; }
.rg-field { display:flex; align-self:stretch; align-items:center; gap:10px; height:46px; padding:0 14px; border:1px solid #dfe3e8; border-radius:10px; background:#fff; box-sizing:border-box; cursor:text; }
.rg-field:focus-within { border-color:var(--theme); }
.rg-field i { color:#999; }
.rg-field input { flex:1 1 auto; min-width:0; height:100%; padding:0; border:0; background:transparent; font-size:15px; outline:none; }
.rg-btn { align-self:stretch; height:46px; border-radius:10px; font-size:15px; font-weight:600; }
.rg-btn:disabled { opacity:.5; cursor:not-allowed; }
.rg-back { font-size:13px; color:#888; }
.rg-back:hover { color:var(--theme-dark); }
.rg-lock { margin:0 0 0 auto; }
.rg-lock .btn { display:inline-flex; align-items:center; gap:6px; }

@media (min-width:1024px) and (max-width:1700px) {
    .rg-wrap { min-height:calc(100vh - 200px); padding:20px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .rg-wrap { min-height:calc(100vh - 200px); padding:20px 16px; }
    .rg-box { width:400px; padding:32px 28px 24px; }
}

@media (max-width:767px) {
    .rg-wrap { align-items:flex-start; min-height:0; padding:32px 12px; }
    .rg-box { width:100%; padding:28px 20px 22px; border-radius:14px; }
    .rg-icon { width:56px; height:56px; font-size:22px; }
    .rg-title { font-size:18px; }
    .rg-field { height:44px; }
    .rg-btn { height:44px; }
}
/* ========== 좌측 메뉴 · DB 목록 ========== */
.lm-db li { display:flex; align-items:center; }
.lm-db li a { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lm-db-del { flex:0 0 auto; width:28px; height:28px; margin-right:6px; padding:0; border:0; border-radius:6px; background:transparent; font-size:12px; color:#bbb; cursor:pointer; opacity:0; transition:opacity .15s, background .15s; }
.lm-db li:hover .lm-db-del { opacity:1; }
.lm-db-del:hover { background:#fde8e8; color:#e53935; }
.lm-db-new { display:flex; gap:4px; margin:12px 8px 4px; }
.lm-db-new input { flex:1 1 auto; min-width:0; height:32px; padding:0 10px; border:1px solid #dfe3e8; border-radius:8px; background:#fff; font-size:13px; box-sizing:border-box; outline:none; }
.lm-db-new input:focus { border-color:var(--theme); }
.lm-db-new button { flex:0 0 32px; width:32px; height:32px; padding:0; border:0; border-radius:8px; background:var(--theme); font-size:13px; color:var(--theme-on); cursor:pointer; }

@media (min-width:768px) and (max-width:1023px) {
    .lm-db-del { opacity:1; }
    .lm-db-new { margin:10px 6px 4px; }
}

@media (max-width:767px) {
    .lm-db-del { width:32px; height:32px; opacity:1; }
    .lm-db-new { margin:10px 6px 4px; }
    .lm-db-new input { height:36px; font-size:14px; }
    .lm-db-new button { flex:0 0 36px; width:36px; height:36px; }
}
/* ========== 디비 관리 · 임포트 ========== */
.db-import { display:flex; flex-direction:column; gap:12px; }
.db-drop { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:180px; padding:24px; border:2px dashed #d5dae0; border-radius:12px; background:#fafbfc; text-align:center; box-sizing:border-box; transition:border-color .15s, background .15s; }
.db-drop.over { border-color:var(--theme); background:var(--theme-soft); }
.db-drop.has { border-style:solid; border-color:var(--theme); background:#fff; }
.db-drop i { font-size:32px; color:var(--theme-dark); }
.db-drop strong { font-size:14px; color:#333; word-break:break-all; }
.db-ilimit { font-size:12px; color:#888; }
.db-ilimit b { color:#555; }
.db-drop input[type="file"] { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.db-itarget { font-size:13px; color:#666; }
.db-itarget b { color:var(--theme-dark); }
#db-irun:disabled { opacity:.6; cursor:wait; }

@media (min-width:768px) and (max-width:1023px) {
    .db-drop { min-height:160px; padding:20px; }
    .db-drop i { font-size:28px; }
}

@media (max-width:767px) {
    .db-drop { min-height:140px; padding:18px 12px; }
    .db-drop i { font-size:26px; }
    .db-drop strong { font-size:13px; }
    .db-itarget { flex:1 1 100%; }
}
/* ========== 가상호스트 편집기 ========== */
.vh-field { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.vh-field span { font-family:Consolas, Menlo, monospace; font-size:13px; word-break:break-all; }
.vh-open { display:inline-flex; align-items:center; gap:6px; height:auto; }
.vh-layer { position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; display:flex; align-items:center; justify-content:center; }
.vh-layer[hidden] { display:none; }
.vh-dim { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); }
.vh-box { position:relative; display:flex; flex-direction:column; width:960px; max-width:calc(100% - 32px); height:80vh; overflow:hidden; border:1px solid #1f2a1f; border-radius:12px; background:#0b0f0b; box-shadow:0 16px 48px rgba(0,0,0,.5); }
.vh-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid #1d2a1d; }
.vh-head strong { display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; font-family:Consolas, Menlo, monospace; font-size:13px; font-weight:600; color:#39ff14; white-space:nowrap; text-overflow:ellipsis; }
.vh-x { flex:0 0 auto; width:32px; height:32px; border:0; border-radius:50%; background:transparent; font-size:16px; color:#5fd35f; cursor:pointer; }
.vh-x:hover { background:#142014; }
.vh-editor { flex:1 1 auto; width:100%; min-height:0; padding:16px; overflow:auto; border:0; background:#000; font-family:Consolas, Menlo, "D2Coding", monospace; font-size:13px; line-height:1.6; color:#33ff33; caret-color:#33ff33; white-space:pre; tab-size:4; resize:none; outline:none; box-sizing:border-box; }
.vh-editor::selection { background:#1f5f1f; color:#eaffea; }
.vh-out { flex:0 0 auto; max-height:130px; margin:0; padding:10px 16px; overflow:auto; border-top:1px solid #1d2a1d; background:#061006; font-family:Consolas, Menlo, monospace; font-size:12px; line-height:1.5; color:#7dff7d; white-space:pre-wrap; word-break:break-all; }
.vh-out.err { background:#1a0606; color:#ff6b6b; }
.vh-out[hidden] { display:none; }
.vh-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid #1d2a1d; background:#0b0f0b; }
.vh-foot .btn { display:inline-flex; align-items:center; gap:6px; }

@media (min-width:1024px) and (max-width:1700px) {
    .vh-box { width:calc(100% - 64px); max-width:960px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .vh-box { width:calc(100% - 32px); height:82vh; }
    .vh-editor { padding:14px; font-size:12px; }
}

@media (max-width:767px) {
    .vh-layer { align-items:flex-end; }
    .vh-box { width:100%; max-width:100%; height:92vh; border-radius:14px 14px 0 0; }
    .vh-head { padding:10px 12px; }
    .vh-head strong { font-size:12px; }
    .vh-editor { padding:12px; font-size:12px; }
    .vh-out { padding:8px 12px; }
    .vh-foot { flex-wrap:wrap; padding:10px 12px; }
    .vh-foot .btn { flex:1 1 0; justify-content:center; }
}
/* 네임서버 */
.nsc-panel { margin:20px; padding:16px 18px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.nsc-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.nsc-bar label { margin-right:4px; font-weight:600; color:#333; }
.nsc-bar input[type=text] { flex:0 1 320px; min-width:0; height:34px; padding:0 10px; border:1px solid #ccd2d8; border-radius:4px; background:#fff; color:#333; }
.nsc-result { margin-top:10px; padding:10px 12px; border-radius:4px; background:#f5f7f9; color:#555; font-size:13px; line-height:1.6; white-space:pre-wrap; }
.nsc-result.is-ok { background:#eaf6ee; color:#1e7b3a; }
.nsc-result.is-fail { background:#fdeeee; color:#c0392b; }
.nsc-result[hidden] { display:none; }
.nsc-flash { margin:0 0 16px; }
.nsl-domain { font-weight:600; color:#222; }
.nsl-ns { color:#666; font-size:13px; }

.nsf-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-bottom:12px; border-bottom:2px solid #444; margin:20px; }
.nsf-title h3 { margin:0 0 10px; color:#222; font-size:20px; font-weight:700; }
.nsf-info { display:flex; flex-wrap:wrap; gap:6px 28px; margin:0; padding:0; list-style:none; color:#555; font-size:13px; }
.nsf-info li { position:relative; padding-left:12px; }
.nsf-info li:before { content:""; position:absolute; left:0; top:8px; width:4px; height:4px; border-radius:50%; background:#aaa; }
.nsf-info b { margin-right:6px; color:#333; font-weight:600; }
.nsf-tools { display:flex; flex-wrap:wrap; gap:6px; }
.nsf-line { border:1px solid #1e88e5; background:#fff; color:#1e88e5; padding:20px 15px; }
.nsf-line:hover { background:#1e88e5; color:#fff; }
.nsf-box { border-bottom:1px solid #dfe3e8; }
.nsf-bar { display:flex; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid #8a9aab; margin:20px; }
.nsf-bar h4 { margin:0; color:#222; font-size:16px; font-weight:600; }
.nsf-fold { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:auto; border:1px solid #c5ccd3; border-radius:2px; background:#fff; color:#555; font-size:11px; cursor:pointer; }
.nsf-fold i { transition:transform .2s; }
.nsf-box.is-fold .nsf-body { display:none; }
.nsf-box.is-fold .nsf-fold i { transform:rotate(180deg); }
.nsf-zone { display:flex; align-items:center; flex-wrap:wrap; gap:10px 24px; padding:12px 20px; border-bottom:1px solid #e3e7eb; background:#f7f9fb; font-size:13px; margin:20px; }
.nsf-zone label { display:flex; align-items:center; gap:6px; color:#444; font-weight:600; }
.nsf-zone .nsf-in { width:110px; }
.nsf-nslist { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.nsf-nslist b { margin-right:2px; color:#444; font-weight:600; }
.nsf-nslist .nsf-in { width:170px; }
.nsf-serial { margin-left:auto; color:#999; font-size:12px; }
.nsf-in { height:30px; min-width:0; padding:0 8px; border:1px solid #ccd2d8; border-radius:3px; background:#fff; color:#333; font-size:13px; }
.nsf-in:disabled { border-color:transparent; background:transparent; color:#333; opacity:1; -webkit-text-fill-color:#333; appearance:none; -webkit-appearance:none; cursor:default; }
.nsf-in:disabled::placeholder { color:#999; -webkit-text-fill-color:#999; }
.nsf-table { width:100%; table-layout:fixed; }
.nsf-table th { font-weight:500; }
.nsf-table th select { width:100%; max-width:170px; height:30px; padding:0 6px; border:1px solid #ccd2d8; border-radius:3px; background:#fff; color:#555; font-size:13px; }
.nsf-table td .nsf-in { width:100%; }
.nsf-table tr[hidden] { display:none; }
.nsf-c-type { width:110px; }
.nsf-c-host { width:160px; }
.nsf-c-ttl { width:100px; }
.nsf-c-prio { width:90px; }
.nsf-c-svc { width:190px; text-align:center; }
.nsf-prio.is-off { visibility:hidden; }
.nsf-row.is-hide { display:none; }
.nsf-del { display:none; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid #e3b4b4; border-radius:3px; background:#fff; color:#c0392b; cursor:pointer; }
.nsf-del:hover { background:#c0392b; color:#fff; }
.nsf-box.is-edit .nsf-del { display:inline-flex; }
.nsf-box.is-edit .nsf-zone { background:#fffdf3; }
.nsf-savebar { display:flex; justify-content:space-between; gap:8px; padding:14px 20px; }
.nsf-savebar[hidden] { display:none; }
.nsf-result { margin:0 20px 14px; padding:10px 12px; border-radius:4px; background:#fdeeee; color:#c0392b; font-size:13px; line-height:1.6; white-space:pre-wrap; }
.nsf-result[hidden] { display:none; }
.nsf-layer { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.45); }
.nsf-layer[hidden] { display:none; }
.nsf-layer-box { display:flex; flex-direction:column; width:100%; max-width:720px; max-height:90vh; border-radius:8px; background:#fff; overflow:hidden; }
.nsf-layer-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #e3e7eb; }
.nsf-layer-head h4 { margin:0; color:#222; font-size:16px; font-weight:600; }
.nsf-close { border:0; background:none; color:#666; font-size:24px; line-height:1; cursor:pointer; }
.nsf-layer-body { padding:14px 18px; overflow:auto; }
.nsf-hlist { margin:0; padding:0; list-style:none; }
.nsf-hlist li { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #eef0f2; color:#333; font-size:13px; }
.nsf-hsize { margin-left:auto; color:#999; font-size:12px; }
.nsf-hempty { justify-content:center; color:#999; }
.nsf-hview { margin:12px 0 0; padding:12px; max-height:340px; border-radius:4px; background:#000; color:#33ff33; font-family:Consolas, monospace; font-size:12px; line-height:1.5; white-space:pre; overflow:auto; }
.nsf-hview[hidden] { display:none; }

@media (min-width:1024px) and (max-width:1700px) {
    .nsf-c-host { width:130px; }
    .nsf-c-svc { width:160px; }
    .nsf-nslist .nsf-in { width:150px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .nsc-panel { padding:14px; }
    .nsc-bar input[type=text] { flex:1 1 220px; }
    .nsf-head { align-items:flex-start; flex-direction:column; }
    .nsf-title h3 { font-size:18px; }
    .nsf-info { gap:6px 18px; }
    .nsf-bar { padding:14px 12px; }
    .nsf-zone { padding:12px; }
    .nsf-nslist .nsf-in { width:140px; }
    .nsf-serial { margin-left:0; }
    .nsf-c-type { width:90px; }
    .nsf-c-host { width:100px; }
    .nsf-c-ttl { width:80px; }
    .nsf-c-prio { width:70px; }
    .nsf-c-svc { width:120px; }
    .nsf-table th select { font-size:12px; }
    .nsf-savebar { padding:12px; }
    .nsf-result { margin:0 12px 12px; }
}

@media (max-width:767px) {
    .nsc-panel { padding:12px; }
    .nsc-bar { flex-direction:column; align-items:stretch; }
    .nsc-bar input[type=text] { flex:none; width:100%; }
    .nsc-bar .btn { width:100%; }
    .nsf-head { align-items:flex-start; flex-direction:column; }
    .nsf-title h3 { font-size:17px; word-break:break-all; }
    .nsf-info { flex-direction:column; gap:4px; }
    .nsf-tools { width:100%; }
    .nsf-tools .btn { flex:1; text-align:center; }
    .nsf-bar { padding:12px 4px; gap:10px; }
    .nsf-zone { flex-direction:column; align-items:stretch; padding:12px; }
    .nsf-zone label { justify-content:space-between; }
    .nsf-nslist { flex-direction:column; align-items:stretch; }
    .nsf-nslist .nsf-in { width:100%; }
    .nsf-serial { margin-left:0; }
    .nsf-table, .nsf-table tbody { display:block; width:100%; }
    .nsf-table thead { display:block; }
    .nsf-table thead tr { display:flex; gap:8px; padding:10px 0; }
    .nsf-table thead th { display:none; }
    .nsf-table thead th.nsf-c-type, .nsf-table thead th.nsf-c-svc { display:block; flex:1; width:auto; padding:0; border:0; }
    .nsf-table th select { max-width:none; }
    .nsf-table tr { display:block; }
    .nsf-table tbody tr.nsf-row { position:relative; margin-bottom:10px; padding:10px 12px; border:1px solid #e3e7eb; border-radius:6px; }
    .nsf-table tbody td { display:flex; align-items:center; gap:10px; width:auto; padding:4px 0; border:0; text-align:left; }
    .nsf-table tbody td[data-label]:before { content:attr(data-label); flex:0 0 70px; color:#888; font-size:12px; }
    .nsf-table tbody td.nsf-c-svc { position:absolute; top:6px; right:6px; padding:0; }
    .nsf-table tbody td.nsf-c-prio:has(.is-off) { display:none; }
    .nsf-table tr.nsf-row.is-hide { display:none; }
    .nsf-table tr[hidden] { display:none; }
    .nsf-table #nsf-empty td { justify-content:center; }
    .nsf-savebar { padding:12px 0; }
    .nsf-savebar .btn { flex:1; }
    .nsf-result { margin:0 0 12px; }
    .nsf-layer-box { max-height:94vh; }
    .nsf-hlist li { flex-wrap:wrap; }
    .nsf-hdate { flex:1 1 100%; }
    .nsf-hsize { margin-left:0; margin-right:auto; }
}
.nsc-panel + .search-bar { margin-top:20px; }
.nsc-flash + .nsc-panel { margin-top:0; }
.nsf-head { margin-top:10px; margin-bottom:24px; padding-bottom:16px; }
.nsf-title h3 { margin-bottom:14px; }
.nsf-info { gap:8px 32px; }
.nsf-box { margin-top:24px; }
.nsf-bar { padding:20px 24px; }
.nsf-zone { gap:12px 28px; padding:16px 24px; }
.nsf-nslist { gap:8px; }
.nsf-table th { padding:12px 10px; }
.nsf-table td { padding:8px 10px; vertical-align:middle; }
.nsf-savebar { padding:18px 24px; }
.nsf-result { margin:0 24px 18px; }
.nsf-layer-body { padding:16px 20px; }
.nsf-hlist li { gap:10px; padding:10px 0; }

@media (min-width:1024px) and (max-width:1700px) {
    .nsf-bar { padding:18px 16px; }
    .nsf-zone { padding:14px 16px; }
    .nsf-table th { padding:10px 8px; }
    .nsf-table td { padding:8px; }
    .nsf-savebar { padding:16px; }
    .nsf-result { margin:0 16px 16px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .nsc-panel + .search-bar { margin-top:16px; }
    .nsf-head { margin-bottom:20px; padding-bottom:14px; }
    .nsf-box { margin-top:20px; }
    .nsf-bar { padding:16px 12px; }
    .nsf-zone { gap:10px 20px; padding:14px 12px; }
    .nsf-table th { padding:10px 6px; }
    .nsf-table td { padding:6px; }
    .nsf-savebar { padding:14px 12px; }
    .nsf-result { margin:0 12px 14px; }
}

@media (max-width:767px) {
    .nsc-panel + .search-bar { margin-top:14px; }
    .nsc-bar { gap:10px; }
    .nsf-head { margin-bottom:16px; padding-bottom:12px; gap:12px; }
    .nsf-title h3 { margin-bottom:10px; }
    .nsf-box { margin-top:16px; }
    .nsf-bar { padding:14px 4px; }
    .nsf-zone { gap:12px; padding:14px 12px; }
    .nsf-nslist { gap:8px; }
    .nsf-table tbody tr.nsf-row { margin-bottom:12px; padding:12px 14px; }
    .nsf-table tbody td { padding:5px 0; }
    .nsf-savebar { padding:14px 0; gap:10px; }
    .nsf-result { margin:0 0 14px; }
}
/* 사이트 장애 */
.sh-banner { display:flex; align-items:center; gap:10px; margin:20px; padding:12px 16px; border:1px solid #f0c2c2; border-radius:6px; background:#fdeeee; color:#c0392b; font-size:14px; }
.sh-banner i { font-size:16px; }
.sh-fault { display:inline-block; margin-left:4px; vertical-align:middle; text-align:left; }
.sh-fault summary { list-style:none; cursor:pointer; }
.sh-fault summary::-webkit-details-marker { display:none; }
.sh-badge i { margin-right:4px; font-size:7px; vertical-align:middle; animation:sh-blink 1.2s infinite; }
.sh-list { width:420px; max-width:60vw; margin:8px 0 0; padding:10px 12px; border:1px solid #f0c2c2; border-radius:6px; background:#fff; list-style:none; }
.sh-list li { padding:8px 0; border-bottom:1px solid #f3e1e1; }
.sh-list li:last-child { border-bottom:0; }
.sh-list strong { display:block; color:#c0392b; font-size:13px; }
.sh-list p { margin:4px 0 0; color:#555; font-size:12px; line-height:1.5; white-space:normal; word-break:break-all; }
.sh-list pre { margin:8px 0 0; padding:8px 10px; max-height:180px; border-radius:4px; background:#000; color:#33ff33; font-family:Consolas, monospace; font-size:11px; line-height:1.5; white-space:pre-wrap; word-break:break-all; overflow:auto; }
@keyframes sh-blink { 50% { opacity:.2; } }

@media (min-width:1024px) and (max-width:1700px) {
    .sh-list { width:360px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .sh-banner { margin:20px; font-size:13px; }
    .sh-list { width:300px; max-width:70vw; }
    .sh-list pre { max-height:150px; }
}

@media (max-width:767px) {
    .sh-banner { margin:20px 0; padding:10px 12px; font-size:13px; }
    .sh-fault { display:block; margin:6px 0 0; }
    .sh-list { width:auto; max-width:none; }
    .sh-list pre { max-height:140px; font-size:10px; }
}
/* 터미널 */
.tm-wrap { display:flex; flex-direction:column; margin:20px; border:1px solid #222; border-radius:6px; background:#000; overflow:hidden; }
.tm-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:8px 12px; background:#1b1e22; color:#ccc; font-size:13px; }
.tm-status { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#999; }
.tm-status:before { content:""; width:8px; height:8px; border-radius:50%; background:#999; }
.tm-status.is-on { color:#33ff33; }
.tm-status.is-on:before { background:#33ff33; }
.tm-status.is-wait { color:#f0b429; }
.tm-status.is-wait:before { background:#f0b429; }
.tm-status.is-off { color:#ff6b6b; }
.tm-status.is-off:before { background:#ff6b6b; }
.tm-user { color:#888; }
.tm-user i { margin-right:4px; }
.tm-tools { display:flex; align-items:center; gap:6px; margin-left:auto; }
.tm-tools select { height:28px; padding:0 6px; border:1px solid #3a4048; border-radius:3px; background:#111; color:#ccc; font-size:12px; }
.tm-screen { height:calc(100vh - 300px); min-height:420px; padding:0; background:#000; overflow:hidden; }
.tm-screen .xterm { height:100%; padding:8px 0 8px 10px; box-sizing:border-box; }
.tm-screen .xterm-viewport { background:#000 !important; }
.tm-wrap.is-full { position:fixed; inset:0; z-index:2000; margin:0; border:0; border-radius:0; }
.tm-wrap.is-full .tm-screen { flex:1; height:auto; min-height:0; }
.tm-msg { color:#33ff33; font-size:12px; opacity:0; transition:opacity .2s; }
.tm-msg.on { opacity:1; }

@media (min-width:768px) and (max-width:1023px) {
    .tm-tools { flex-wrap:wrap; }
}

@media (max-width:767px) {
    .tm-msg { display:none; }
    .tm-tools { flex-wrap:wrap; }
    .tm-tools .btn { flex:1 1 calc(33.333% - 6px); }
    .tm-tools select { flex:1 1 calc(33.333% - 6px); }
}

@media (min-width:1024px) and (max-width:1700px) {
    .tm-screen { height:calc(100vh - 280px); min-height:380px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .tm-wrap { margin:20px; }
    .tm-screen { height:calc(100vh - 260px); min-height:360px; }
}

@media (max-width:767px) {
    .tm-wrap { margin:20px 0; }
    .tm-bar { gap:8px; padding:8px; }
    .tm-user { display:none; }
    .tm-tools { width:100%; margin-left:0; }
    .tm-tools .btn { flex:1; }
    .tm-screen { height:60vh; min-height:300px; }
    .tm-screen .xterm { padding:4px 0 4px 6px; }
}
.rg-trust { display:flex; align-items:center; gap:8px; margin:12px 0 16px; color:#555; font-size:13px; cursor:pointer; user-select:none; }
.rg-trust input { width:16px; height:16px; margin:0; accent-color:#1e88e5; cursor:pointer; }

@media (min-width:768px) and (max-width:1023px) {
    .rg-trust { margin:12px 0 14px; font-size:13px; }
}

@media (max-width:767px) {
    .rg-trust { margin:10px 0 14px; font-size:12px; }
    .rg-trust input { width:18px; height:18px; }
}
/* 서버 상태 */
.sv-state-title { padding-left:20px; padding-right:20px; }
.sv-state-title h1 { font-size:18px; margin-bottom:20px;  }
.sv-status { display:flex; flex-wrap:wrap; gap:10px; margin:20px; }
.sv-item { display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:4px; flex:0 0 calc(20% - 8px); min-width:0; padding:12px 14px; border:1px solid #dfe3e8;  border-radius:6px; background:#fff; font-size:13px; box-sizing:border-box; }
.sv-item.is-fail { border-left-color:#e74c3c; background:#fdf3f3; }
.sv-dot { flex:0 0 10px; width:10px; height:10px; border-radius:50%; background:#2ecc71; box-shadow:0 0 0 3px rgba(46,204,113,.18); }
.sv-item.is-fail .sv-dot { background:#e74c3c; box-shadow:0 0 0 3px rgba(231,76,60,.18); animation:sh-blink 1.2s infinite; }
.sv-name { flex:1 1 calc(100% - 18px); min-width:0; color:#222; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-port { margin-left:18px; color:#888; font-size:12px; white-space:nowrap; }
.sv-state { margin-left:auto; color:#1e9e55; font-size:12px; white-space:nowrap; }
.sv-item.is-fail .sv-state { color:#c0392b; }
.sv-ms { color:#aaa; font-size:11px; white-space:nowrap; }

@media (min-width:1024px) and (max-width:1700px) {
    .sv-item { flex:0 0 calc(20% - 8px); padding:10px 12px; font-size:12px; }
    .sv-port { font-size:11px; }
    .sv-state { font-size:11px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .sv-status { margin:20px; gap:8px; }
    .sv-item { flex:0 0 calc(33.333% - 6px); padding:10px 12px; font-size:12px; }
    .sv-port { font-size:11px; }
    .sv-state { font-size:11px; }
}

@media (max-width:767px) {
    .sv-status { margin:20px 0; gap:8px; }
    .sv-item { flex:0 0 calc(50% - 4px); padding:10px; font-size:12px; column-gap:6px; }
    .sv-port { margin-left:16px; font-size:11px; }
    .sv-state { font-size:11px; }
    .sv-ms { display:none; }
}
.sv-title { display:flex; align-items:baseline; gap:10px;  color:#222; font-size:16px; font-weight:700; }
.sv-title em { color:#888; font-size:13px; font-style:normal; font-weight:400; }
.svi-faults { width:auto; max-width:none; margin:20px; }
.svi-box { margin:20px; }

@media (min-width:768px) and (max-width:1023px) {
    .sv-title { margin:20px 20px 0; font-size:15px; }
    .svi-faults { margin:20px; }
    .svi-box { margin:20px; }
}

@media (max-width:767px) {
    .sv-title { margin:20px 0 0; font-size:15px; }
    .sv-title em { font-size:12px; }
    .svi-faults { margin:20px 0; }
    .svi-box { margin:20px 0; }
}
/* 서버관리 - 메일 도메인 */
.md-form { margin:0; }
.md-switch { padding:0; border:0; background:transparent; }
.md-switch input { pointer-events:none; }
.md-off td { opacity:0.55; }
.md-off td:last-child { opacity:1; }
.ma-sbtn[disabled] { opacity:0.4; cursor:not-allowed; }

@media (min-width:768px) and (max-width:1023px) {
    .md-off td { opacity:0.6; }
}

@media (max-width:767px) {
    .md-off td { opacity:0.6; }
    .md-switch { margin-left:auto; }
}
/* 마이페이지 - 메일 관리 */
.mm-addr { display:flex; flex:2 1 300px; align-items:center; gap:6px; min-width:0; }
.mm-addr .ma-input { flex:1 1 auto; }
.mm-domain { flex:none; max-width:170px; height:36px; }
.mm-quota { display:flex; flex:0 1 130px; align-items:center; gap:6px; color:#777; font-size:13px; }
.mm-quota .ma-input { flex:1 1 auto; }
.mm-qinput { max-width:90px; }
.mm-filter { display:flex; flex-wrap:wrap; gap:6px; margin:20px; }
.mm-chip { padding:5px 14px; border:1px solid #dfe3e8; border-radius:16px; background:#fff; color:#555; font-size:12px; }
.mm-chip:hover { border-color:var(--theme); color:var(--theme); }
.mm-chip.on { border-color:var(--theme); background:var(--theme); color:var(--theme-on); }

@media (min-width:1024px) and (max-width:1700px) {
    .mm-addr { flex:2 1 260px; }
    .mm-domain { max-width:150px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mm-addr { flex:1 1 100%; }
    .mm-quota { flex:1 1 45%; }
    .mm-filter { margin:20px; }
}

@media (max-width:767px) {
    .mm-addr { flex:1 1 100%; flex-wrap:wrap; }
    .mm-addr .ma-input { flex:1 1 calc(100% - 30px); }
    .mm-domain { flex:1 1 100%; max-width:none; }
    .mm-quota { flex:1 1 100%; }
    .mm-qinput { max-width:none; }
    .mm-filter { margin:20px 0; }
}
/* 마이페이지 - 메일 관리 : 저장소 요약 */
.mm-disk { display:flex; flex-wrap:wrap; gap:20px; margin:20px; }
.mm-dbox { flex:1 1 320px; min-width:0; padding:16px 20px; border:1px solid #dfe3e8; border-radius:8px; background:#fff; }
.mm-dbox.mm-over { border-color:#f3c4c4; background:#fef7f7; }
.mm-dhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; color:#444; font-size:14px; font-weight:600; }
.mm-dhead i { margin-right:6px; color:var(--theme); }
.mm-dhead em { color:#888; font-size:13px; font-style:normal; font-weight:400; white-space:nowrap; }
.mm-dhead em b { color:var(--theme); font-size:15px; }
.mm-bar { display:block; width:100%; height:10px; border:0; border-radius:5px; background:#eef0f3; overflow:hidden; appearance:none; }
.mm-bar::-webkit-progress-bar { border-radius:5px; background:#eef0f3; }
.mm-bar::-webkit-progress-value { border-radius:5px; background:var(--theme); }
.mm-bar::-moz-progress-bar { border-radius:5px; background:var(--theme); }
.mm-over .mm-bar::-webkit-progress-value { background:#e04848; }
.mm-over .mm-bar::-moz-progress-bar { background:#e04848; }
.mm-dfoot { display:flex; justify-content:space-between; gap:10px; margin-top:8px; color:#777; font-size:12px; }
.mm-dfoot b { color:#333; }
.mm-warn { margin-top:8px; color:#c0392b; font-size:12px; }

@media (min-width:1024px) and (max-width:1700px) {
    .mm-dbox { flex:1 1 280px; padding:14px 16px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mm-disk { gap:20px; margin:20px; }
    .mm-dbox { flex:1 1 100%; padding:14px 16px; }
}

@media (max-width:767px) {
    .mm-disk { gap:20px; margin:20px 0; }
    .mm-dbox { flex:1 1 100%; padding:14px; }
    .mm-dhead { flex-direction:column; align-items:flex-start; gap:4px; }
}
/* 마이페이지 - 메일 관리 : 도메인별 용량 */
.mm-dombox { margin:20px; padding:16px 20px; border:1px solid #dfe3e8; border-radius:8px; background:#fff; }
.mm-dombox .ma-title i { margin-right:6px; color:var(--theme); }
.mm-domrow { display:flex; align-items:center; gap:16px; padding:10px 0; border-top:1px solid #f0f2f4; }
.mm-dombox .ma-title + .mm-domrow { border-top:0; }
.mm-domrow.on .mm-domname { color:var(--theme); }
.mm-domname { flex:0 0 180px; min-width:0; overflow:hidden; color:#333; font-size:14px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }
.mm-domname:hover { color:var(--theme); }
.mm-dombar { flex:1 1 auto; min-width:0; }
.mm-domnum { display:flex; flex:0 0 120px; align-items:baseline; justify-content:flex-end; gap:6px; }
.mm-domnum b { color:var(--theme); font-size:14px; }
.mm-domnum span { color:#999; font-size:12px; }
.mm-domcnt { display:flex; flex:0 0 150px; justify-content:flex-end; gap:10px; color:#777; font-size:12px; }
.mm-domcnt b { color:#333; }

@media (min-width:1024px) and (max-width:1700px) {
    .mm-domname { flex:0 0 150px; }
    .mm-domcnt { flex:0 0 130px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mm-dombox { margin:20px; padding:14px 16px; }
    .mm-domrow { flex-wrap:wrap; gap:8px 12px; }
    .mm-domname { flex:1 1 auto; }
    .mm-domnum { flex:0 0 auto; }
    .mm-dombar { flex:1 1 100%; order:3; }
    .mm-domcnt { flex:1 1 100%; order:4; justify-content:flex-start; }
}

@media (max-width:767px) {
    .mm-dombox { margin:20px 0; padding:14px 12px; }
    .mm-domrow { flex-wrap:wrap; gap:6px 10px; }
    .mm-domname { flex:1 1 auto; font-size:13px; }
    .mm-domnum { flex:0 0 auto; }
    .mm-dombar { flex:1 1 100%; order:3; }
    .mm-domcnt { flex:1 1 100%; order:4; justify-content:flex-start; }
}
/* 마이페이지 - 메일 관리 : 도메인 한도 */
.mm-domsub { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; color:#777; font-size:12px; }
.mm-domsub b { color:#333; }
.mm-domform { flex:0 0 auto; gap:4px; }
.mm-domform .ma-input { width:100px; flex:none; }
.mm-unit { color:#999; font-size:12px; }
.mm-domrow.mm-over .mm-bar::-webkit-progress-value { background:#e04848; }
.mm-domrow.mm-over .mm-bar::-moz-progress-bar { background:#e04848; }
.mm-domrow.mm-over .mm-domsub b { color:#c0392b; }

@media (min-width:1024px) and (max-width:1700px) {
    .mm-domform .ma-input { width:90px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .mm-domform { flex:1 1 100%; order:5; }
    .mm-domform .ma-input { width:auto; flex:1 1 auto; }
}

@media (max-width:767px) {
    .mm-domsub { gap:4px 10px; font-size:11px; }
    .mm-domform { flex:1 1 100%; order:5; }
    .mm-domform .ma-input { width:auto; flex:1 1 auto; }
}
/* =========================================================
 * 메뉴검색 (sr-)
 * ========================================================= */
.sr-form { display:flex; align-items:center; gap:10px; margin:20px; }
.sr-input { flex:1; min-width:0; height:46px; padding:0 16px; border:1px solid #d5d9e0; border-radius:8px; font-size:15px; background:#fff; color:#111827; box-sizing:border-box; }
.sr-input:focus { outline:none; border-color:var(--theme); }
.sr-btn { flex:0 0 auto; height:46px; padding:0 22px; display:flex; align-items:center; gap:6px; }
.sr-info { margin:0 20px; color:#6b7280; font-size:14px; }
.sr-info b { color:var(--theme); }
.sr-groups { display:flex; flex-wrap:wrap; align-items:flex-start; margin:10px; }
.sr-group { flex:0 0 calc(33.333% - 20px); margin:10px; padding:16px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-sizing:border-box; min-width:0; }
.sr-gtitle { display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; padding:0 0 10px; border-bottom:2px solid var(--theme); font-size:15px; font-weight:700; color:#111827; }
.sr-gtitle em { font-style:normal; font-size:12px; font-weight:600; color:var(--theme); background:#eef3ff; padding:2px 8px; border-radius:10px; }
.sr-list { list-style:none; margin:0; padding:0; }
.sr-list li { margin:0; padding:0; }
.sr-list li + li { border-top:1px solid #f1f3f5; }
.sr-link { display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:6px; color:#111827; text-decoration:none; }
.sr-link:hover { background:#f5f8ff; }
.sr-icon { flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#eef3ff; color:var(--theme); font-size:14px; }
.sr-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sr-name { font-size:14px; font-weight:600; }
.sr-url { font-style:normal; font-size:12px; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-go { flex:0 0 auto; color:#c0c6d0; font-size:12px; }
.sr-link:hover .sr-go { color:var(--theme); }
.sr-empty { display:flex; flex-direction:column; align-items:center; gap:12px; margin:20px; padding:50px 20px; background:#fff; border:1px dashed #d5d9e0; border-radius:10px; color:#6b7280; }
.sr-empty i { font-size:32px; color:#c0c6d0; }
.sr-empty p { margin:0; font-size:15px; }

/* 작은 데스크톱 (1024~1700) */
@media (min-width:1024px) and (max-width:1700px) {
.sr-group { flex:0 0 calc(50% - 20px); }
}

/* 태블릿 (768~1023) */
@media (min-width:768px) and (max-width:1023px) {
.sr-form { margin:20px; }
.sr-input { height:44px; font-size:14px; }
.sr-btn { height:44px; padding:0 18px; }
.sr-info { margin:0 20px; font-size:13px; }
.sr-groups { margin:10px; }
.sr-group { flex:0 0 calc(50% - 20px); margin:10px; padding:14px; }
.sr-gtitle { font-size:14px; }
.sr-link { padding:10px 6px; }
.sr-icon { flex:0 0 32px; height:32px; font-size:13px; }
.sr-name { font-size:14px; }
.sr-url { font-size:11px; }
.sr-empty { margin:20px; padding:40px 20px; }
}

/* 모바일 (767 이하) */
@media (max-width:767px) {
.sr-form { margin:20px; gap:8px; }
.sr-input { height:42px; padding:0 12px; font-size:14px; }
.sr-btn { height:42px; padding:0 14px; font-size:13px; }
.sr-info { margin:0 20px; font-size:13px; }
.sr-groups { flex-direction:column; align-items:stretch; margin:10px; }
.sr-group { flex:1 1 auto; width:auto; margin:10px; padding:12px; }
.sr-gtitle { font-size:14px; margin:0 0 6px; padding:0 0 8px; }
.sr-link { gap:10px; padding:12px 4px; }
.sr-icon { flex:0 0 30px; height:30px; font-size:13px; }
.sr-name { font-size:14px; }
.sr-url { font-size:11px; }
.sr-empty { margin:20px; padding:36px 16px; }
.sr-empty i { font-size:28px; }
.sr-empty p { font-size:14px; }
}
/* 통합검색 : 데이터 결과 */
.sr-gtitle span { display:flex; align-items:center; gap:8px; min-width:0; }
.sr-gtitle span i { color:var(--theme); }
.sr-data .sr-link { padding:10px 8px; }
.sr-date { flex:0 0 auto; font-size:12px; color:#9ca3af; }
.sr-more { display:flex; justify-content:flex-end; align-items:center; gap:4px; margin:10px 0 0; padding:8px 0 0; border-top:1px solid #f1f3f5; font-size:13px; color:var(--theme); text-decoration:none; }
.sr-more:hover { text-decoration:underline; }

/* 태블릿 (768~1023) */
@media (min-width:768px) and (max-width:1023px) {
.sr-gtitle span { gap:6px; }
.sr-date { font-size:11px; }
.sr-more { font-size:12px; }
}

/* 모바일 (767 이하) */
@media (max-width:767px) {
.sr-gtitle span { gap:6px; }
.sr-data .sr-link { flex-wrap:wrap; padding:12px 4px; }
.sr-data .sr-text { flex:1 1 calc(100% - 30px); }
.sr-date { order:3; flex:1 1 100%; font-size:11px; }
.sr-data .sr-go { order:2; }
.sr-more { font-size:12px; }
}
/* 검색 종류 셀렉트 (상단 · 검색 화면) */
.top-search .search-type { flex:0 0 auto; height:32px; margin:0 6px 0 0; padding:0 8px; border:1px solid #d5d9e0; border-radius:6px; background:#fff; color:#333; font-size:13px; cursor:pointer; }
.top-search .search-type:focus { outline:none; border-color:var(--theme); }
.sr-type { flex:0 0 auto; height:46px; padding:0 12px; border:1px solid #d5d9e0; border-radius:8px; background:#fff; color:#111827; font-size:14px; cursor:pointer; }
.sr-type:focus { outline:none; border-color:var(--theme); }

/* 작은 데스크톱 (1024~1700) */
@media (min-width:1024px) and (max-width:1700px) {
.top-search .search-type { height:30px; padding:0 6px; font-size:12px; }
}

/* 태블릿 (768~1023) */
@media (min-width:768px) and (max-width:1023px) {
.top-search .search-type { height:34px; padding:0 8px; font-size:13px; }
.sr-type { height:44px; padding:0 10px; font-size:13px; }
}

/* 모바일 (767 이하) */
@media (max-width:767px) {
.top-search .search-type { height:34px; padding:0 6px; font-size:12px; }
.sr-form { flex-wrap:wrap; }
.sr-type { flex:0 0 100px; height:42px; padding:0 8px; font-size:13px; }
.sr-input { flex:1 1 calc(100% - 110px); }
.sr-btn { flex:1 1 100%; justify-content:center; }
}

/* #########################################################
 * 휴지통
 * ######################################################### */
.tr-count { margin-left:8px; font-size:13px; font-weight:400; color:#888; }
.tr-count b { color:var(--theme); }
.tr-emptybtn { margin:0 15px 0 0; color:#c0392b; }
.tr-emptybtn:hover { border-color:#f3c4c4; background:#fef2f2; color:#c0392b; }
.tr-tabs { flex-wrap:wrap; margin:0 20px 20px; padding-left:0; }
.tr-tabs a em { margin-left:4px; font-style:normal; font-size:12px; opacity:.8; }
.tr-tabs a.tr-mail { margin-left:auto; background:transparent; color:#777; font-weight:500; }
.tr-tabs a.tr-mail:hover { background:var(--theme-soft2); color:var(--theme-dark); }
.tr-form { margin:20px; }
.tr-tool { display:flex; align-items:center; gap:6px; margin-bottom:10px; padding:8px 12px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.tr-chk { display:inline-flex; align-items:center; padding:0 4px; }
.tr-chk input { width:16px; height:16px; margin:0; accent-color:var(--theme); cursor:pointer; }
.tr-tbtn { height:32px; margin:0; padding:0 12px; border:1px solid #ccd2d8; background:#fff; color:#444; font-size:13px; }
.tr-tbtn:hover { border-color:var(--theme); color:var(--theme); }
.tr-del { color:#c0392b; }
.tr-del:hover { border-color:#f3c4c4; background:#fef2f2; color:#c0392b; }
.tr-list { margin:0; padding:0; list-style:none; border:1px solid #e5e7eb; border-radius:8px; background:#fff; overflow:hidden; }
.tr-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #f0f2f5; }
.tr-item:last-child { border-bottom:0; }
.tr-item:hover { background:var(--theme-soft); }
.tr-icon { flex:0 0 36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#f1f3f6; color:#777; font-size:15px; }
.tr-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tr-text b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; color:#222; }
.tr-text em { font-style:normal; font-size:12px; color:#999; }
.tr-left { flex:0 0 auto; padding:3px 9px; border-radius:12px; background:#f1f3f6; font-size:12px; color:#666; white-space:nowrap; }
.tr-left.tr-soon { background:#fde2e2; color:#b91c1c; }
.tr-btns { flex:0 0 auto; display:flex; gap:4px; }
.tr-rbtn { height:30px; margin:0; padding:0 10px; border:1px solid #ccd2d8; background:#fff; color:#444; font-size:12px; }
.tr-rbtn:hover { border-color:var(--theme); color:var(--theme); }
.tr-rbtn.tr-del { color:#c0392b; }
.tr-rbtn.tr-del:hover { border-color:#f3c4c4; background:#fef2f2; }
.tr-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; color:#999; }
.tr-empty i { font-size:34px; color:#c8cdd5; }
.tr-empty p { margin:0; font-size:14px; }

@media (min-width:1024px) and (max-width:1700px) {
    .tr-item { gap:10px; padding:12px; }
    .tr-tabs a { padding:8px 16px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .tr-count { font-size:12px; }
    .tr-emptybtn { margin:0 10px 0 0; padding:0 12px; }
    .tr-tabs { margin:0 20px 16px; }
    .tr-tabs a { padding:8px 14px; font-size:13px; }
    .tr-form { margin:20px; }
    .tr-item { gap:10px; padding:12px; }
    .tr-icon { flex:0 0 32px; height:32px; font-size:14px; }
    .tr-rbtn span { display:none; }
    .tr-rbtn { width:32px; padding:0; }
}

@media (max-width:767px) {
    .tr-count { display:block; margin:2px 0 0; font-size:12px; }
    .tr-emptybtn { margin:0 10px 0 0; padding:0 10px; font-size:12px; }
    .tr-tabs { gap:4px; margin:0 20px 14px; border-bottom:0; }
    .tr-tabs a { padding:6px 10px; border-radius:16px; font-size:12px; }
    .tr-tabs a.tr-mail { margin-left:0; }
    .tr-form { margin:20px; }
    .tr-tool { flex-wrap:wrap; gap:4px; padding:8px; }
    .tr-tbtn { flex:1; height:34px; padding:0 8px; font-size:12px; }
    .tr-item { flex-wrap:wrap; gap:8px; padding:12px 10px; }
    .tr-icon { flex:0 0 30px; height:30px; font-size:13px; }
    .tr-text { flex:1 1 calc(100% - 80px); }
    .tr-left { order:4; }
    .tr-btns { order:5; margin-left:auto; }
    .tr-rbtn { height:32px; padding:0 10px; }
}

/* #########################################################
 * 알림
 * ######################################################### */
/* 상단 종 */
.al-wrap { position:relative; display:flex; }
.al-bell { position:relative; display:block; }
.al-badge { display:none; position:absolute; top:7px; right:5px; min-width:17px; height:17px; padding:0 4px; border:2px solid #fff; border-radius:9px; background:#e04848; font-size:10px; font-style:normal; font-weight:700; line-height:13px; color:#fff; text-align:center; box-sizing:border-box; }
.al-badge.on { display:block; }
.al-layer { display:none; position:absolute; top:100%; right:0; z-index:1000; width:360px; margin-top:4px; border:1px solid #dfe3e8; border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(20,30,50,.16); overflow:hidden; }
.al-layer.on { display:block; animation:al-drop .15s ease-out; }
@keyframes al-drop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.al-lhead { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eef0f3; }
.al-lhead b { font-size:15px; color:#222; }
.al-lhead form { margin:0; }
.al-lhead button { padding:0; border:0; background:none; font-size:12px; color:#888; cursor:pointer; }
.al-lhead button:hover { color:var(--theme); }
.al-llist { max-height:420px; margin:0; padding:0; list-style:none; overflow-y:auto; }
.al-litem a { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid #f3f4f6; text-decoration:none; }
.al-litem a:hover { background:#f7f8fa; }
.al-litem.al-new a { background:var(--theme-soft); }
.al-litem.al-new a:hover { background:var(--theme-soft2); }
.al-lempty { padding:40px 16px; font-size:13px; color:#999; text-align:center; }
.al-lmore { display:block; padding:11px 0; border-top:1px solid #eef0f3; background:#fafbfc; font-size:13px; color:#555; text-align:center; text-decoration:none; }
.al-lmore:hover { color:var(--theme); }
.al-lmore i { margin-left:3px; font-size:11px; }

/* 알림 공통 (상단 펼침 · 전체 화면) */
.al-icon { flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#eef1f5; color:#6b7280; font-size:14px; }
.al-icon.al-k-approval { background:#e6efff; color:#2563eb; }
.al-icon.al-k-schedule { background:#e5f6ec; color:#0b8043; }
.al-icon.al-k-attend { background:#fff1e0; color:#d97706; }
.al-icon.al-k-team { background:#f1e8fb; color:#8e24aa; }
.al-icon.al-k-account { background:#e0f5f5; color:#0f8a8a; }
.al-icon.al-k-note { background:#fde8ef; color:#d6336c; }
.al-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.al-text b { font-size:13px; font-weight:500; line-height:1.45; color:#333; word-break:break-all; }
.al-new .al-text b { font-weight:700; color:#111; }
.al-text em { font-style:normal; font-size:12px; color:#999; }

/* 전체 화면 */
.al-count { margin-left:8px; font-size:13px; font-weight:400; color:#888; }
.al-count b { color:var(--theme); }
.al-tabs { margin:0 20px 20px; padding-left:0; }
.al-tabs a em { margin-left:4px; font-style:normal; font-size:12px; opacity:.8; }
.al-form { margin:20px; }
.al-tool { display:flex; align-items:center; gap:6px; margin-bottom:10px; padding:8px 12px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.al-tright { display:flex; gap:6px; margin-left:auto; }
.al-chk { display:inline-flex; align-items:center; padding:0 4px; }
.al-chk input { width:16px; height:16px; margin:0; accent-color:var(--theme); cursor:pointer; }
.al-tbtn { height:32px; margin:0; padding:0 12px; border:1px solid #ccd2d8; background:#fff; color:#444; font-size:13px; }
.al-tbtn:hover { border-color:var(--theme); color:var(--theme); }
.al-tbtn:disabled { opacity:.45; cursor:default; }
.al-del { color:#c0392b; }
.al-del:hover { border-color:#f3c4c4; background:#fef2f2; color:#c0392b; }
.al-list { margin:0; padding:0; list-style:none; border:1px solid #e5e7eb; border-radius:8px; background:#fff; overflow:hidden; }
.al-item { display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid #f0f2f5; }
.al-item:last-child { border-bottom:0; }
.al-item:hover { background:#f7f8fa; }
.al-item.al-new { background:var(--theme-soft); }
.al-link { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:13px 0; text-decoration:none; }
.al-item.al-new .al-link::after { content:''; flex:0 0 8px; height:8px; border-radius:50%; background:#e04848; }
.al-rbtn { flex:0 0 30px; width:30px; height:30px; margin:0; padding:0; border:1px solid transparent; background:transparent; color:#aaa; font-size:13px; }
.al-rbtn:hover { border-color:#f3c4c4; background:#fef2f2; color:#c0392b; }
.al-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; color:#999; }
.al-empty i { font-size:34px; color:#c8cdd5; }
.al-empty p { margin:0; font-size:14px; }

@media (min-width:1024px) and (max-width:1700px) {
    .al-layer { width:340px; }
    .al-item { padding:0 12px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .al-badge { top:5px; right:2px; }
    .al-layer { width:340px; }
    .al-count { font-size:12px; }
    .al-tabs { margin:0 20px 16px; }
    .al-tabs a { padding:8px 14px; font-size:13px; }
    .al-form { margin:20px; }
    .al-tool { flex-wrap:wrap; }
    .al-item { padding:0 12px; }
    .al-icon { flex:0 0 32px; height:32px; font-size:13px; }
}

@media (max-width:767px) {
    .al-badge { top:6px; right:2px; }
    .al-layer { left:50%; right:auto; width:calc(100vw - 20px); max-width:400px; transform:translateX(-50%); }
    .al-layer.on { animation:none; }
    .al-llist { max-height:60vh; }
    .al-litem a { padding:12px 14px; }
    .al-count { display:block; margin:2px 0 0; font-size:12px; }
    .al-tabs { gap:4px; margin:0 20px 14px; border-bottom:0; }
    .al-tabs a { padding:6px 12px; border-radius:16px; font-size:12px; }
    .al-form { margin:20px; }
    .al-tool { flex-wrap:wrap; gap:4px; padding:8px; }
    .al-tbtn { height:34px; padding:0 10px; font-size:12px; }
    .al-tright { width:100%; margin:4px 0 0; }
    .al-tright .al-tbtn { flex:1; }
    .al-item { gap:6px; padding:0 8px; }
    .al-link { gap:10px; padding:12px 0; }
    .al-icon { flex:0 0 30px; height:30px; font-size:12px; }
    .al-text b { font-size:13px; }
}
.al-lcount { display:none; margin-left:4px; font-style:normal; font-size:14px; font-weight:700; color:#e04848; }
.al-lcount.on { display:inline; }

/* #########################################################
 * 쪽지
 * ######################################################### */
.nt-writebtn { margin:0 15px 0 0; padding:0 14px; height:34px; }
.nt-tabs { margin:0 20px 20px; padding-left:0; }
.nt-tabs .nt-new { display:inline-block; min-width:18px; height:18px; margin-left:4px; padding:0 5px; border-radius:9px; background:#e04848; font-size:11px; font-style:normal; font-weight:700; line-height:18px; color:#fff; text-align:center; }

/* 목록 */
.nt-search { display:flex; gap:6px; max-width:420px; margin:20px; }
.nt-search input[type=text] { flex:1; min-width:0; height:36px; padding:0 12px; border:1px solid #ccd2d8; border-radius:6px; font-size:13px; }
.nt-search input[type=text]:focus { border-color:var(--theme); outline:none; }
.nt-sbtn { width:36px; height:36px; margin:0; padding:0; border:1px solid #ccd2d8; background:#fff; color:#555; }
.nt-sbtn:hover { border-color:var(--theme); color:var(--theme); }
.nt-form { margin:20px; }
.nt-tool { display:flex; align-items:center; gap:6px; margin-bottom:10px; padding:8px 12px; border:1px solid #dfe3e8; border-radius:6px; background:#fff; }
.nt-total { margin-left:auto; font-size:13px; color:#888; }
.nt-total b { color:var(--theme); }
.nt-chk { display:inline-flex; align-items:center; padding:0 4px; }
.nt-chk input { width:16px; height:16px; margin:0; accent-color:var(--theme); cursor:pointer; }
.nt-tbtn { height:32px; margin:0; padding:0 12px; border:1px solid #ccd2d8; background:#fff; color:#444; font-size:13px; }
.nt-tbtn:hover { border-color:var(--theme); color:var(--theme); }
.nt-del { color:#c0392b; }
.nt-del:hover { border-color:#f3c4c4; background:#fef2f2; color:#c0392b; }
.nt-list { margin:0; padding:0; list-style:none; border:1px solid #e5e7eb; border-radius:8px; background:#fff; overflow:hidden; }
.nt-item { display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid #f0f2f5; }
.nt-item:last-child { border-bottom:0; }
.nt-item:hover { background:#f7f8fa; }
.nt-item.nt-unread { background:var(--theme-soft); }
.nt-link { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:13px 0; text-decoration:none; }
.nt-link .avatar { flex:0 0 40px; width:40px; height:40px; }
.nt-link .avatar i { font-size:16px; }
.nt-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.nt-top { display:flex; align-items:center; gap:8px; }
.nt-top b { font-size:14px; font-weight:600; color:#222; }
.nt-top em { font-style:normal; font-size:12px; color:#999; }
.nt-text p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#666; }
.nt-unread .nt-top b::after { content:''; display:inline-block; width:7px; height:7px; margin-left:6px; border-radius:50%; background:#e04848; vertical-align:middle; }
.nt-unread .nt-text p { font-weight:600; color:#222; }
.nt-state { flex:0 0 auto; padding:3px 9px; border-radius:12px; background:#fff1e0; font-size:12px; color:#d97706; white-space:nowrap; }
.nt-state.is-read { background:#f1f3f6; color:#888; }
.nt-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; color:#999; }
.nt-empty i { font-size:34px; color:#c8cdd5; }
.nt-empty p { margin:0; font-size:14px; }

/* 읽기 */
.nt-view { margin:20px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.nt-vhead { display:flex; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid #f0f2f5; }
.nt-vhead .avatar { flex:0 0 48px; }
.nt-vwho { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.nt-vwho em { font-style:normal; font-size:12px; color:#999; }
.nt-vwho b { font-size:16px; color:#222; }
.nt-vwho span { font-size:12px; color:#aaa; }
.nt-vtime { display:flex; flex-direction:column; align-items:flex-end; gap:6px; font-size:12px; color:#888; }
.nt-vbody { min-height:160px; padding:24px 20px; font-size:14px; line-height:1.75; color:#333; white-space:pre-wrap; word-break:break-all; }
.nt-vbtns { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:14px 20px; border-top:1px solid #f0f2f5; background:#fafbfc; border-radius:0 0 8px 8px; }
.nt-vbtns form { margin:0; }
.nt-vbtn { height:34px; margin:0; padding:0 14px; }
.nt-vbtns form:last-child { margin-left:auto; }

/* 쓰기 */
.nt-write { margin:20px; padding:20px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.nt-wrow { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.nt-wlabel { flex:0 0 80px; padding-top:9px; font-size:13px; font-weight:600; color:#444; }
.nt-to { position:relative; flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:38px; padding:4px 8px; border:1px solid #ccd2d8; border-radius:6px; background:#fff; cursor:text; }
.nt-to:focus-within { border-color:var(--theme); }
.nt-chip { display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 4px 0 10px; border-radius:14px; background:var(--theme-soft2); font-size:13px; color:var(--theme-dark); }
.nt-chip b { font-weight:600; }
.nt-chip em { font-style:normal; font-size:12px; opacity:.75; }
.nt-chipx { width:20px; height:20px; padding:0; border:0; border-radius:50%; background:transparent; font-size:11px; color:inherit; cursor:pointer; }
.nt-chipx:hover { background:rgba(0,0,0,.08); }
.nt-find { flex:1; min-width:120px; height:28px; padding:0 4px; border:0; font-size:13px; outline:none; background:transparent; }
.nt-found { display:none; position:absolute; top:100%; left:-1px; right:-1px; z-index:50; max-height:260px; margin:4px 0 0; padding:4px 0; list-style:none; border:1px solid #dfe3e8; border-radius:6px; background:#fff; box-shadow:0 8px 20px rgba(20,30,50,.12); overflow-y:auto; }
.nt-found.on { display:block; }
.nt-found li { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px; cursor:pointer; }
.nt-found li.on, .nt-found li:hover { background:var(--theme-soft); }
.nt-found li b { color:#222; }
.nt-found li em { font-style:normal; font-size:12px; color:#999; }
.nt-found li.nt-fnone { color:#999; cursor:default; }
.nt-content { width:100%; min-height:220px; padding:12px 14px; border:1px solid #ccd2d8; border-radius:6px; font-size:14px; line-height:1.7; resize:vertical; box-sizing:border-box; }
.nt-content:focus { border-color:var(--theme); outline:none; }
.nt-wfoot { display:flex; align-items:center; gap:10px; margin-top:12px; }
.nt-len { font-size:12px; color:#999; }
.nt-len b { color:var(--theme); }
.nt-wbtns { display:flex; gap:6px; margin-left:auto; }
.nt-wbtns .btn { height:36px; margin:0; padding:0 16px; }

@media (min-width:1024px) and (max-width:1700px) {
    .nt-item { padding:0 12px; }
    .nt-tabs a { padding:8px 16px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .nt-writebtn { margin:0 10px 0 0; padding:0 12px; }
    .nt-tabs { margin:0 20px 16px; }
    .nt-tabs a { padding:8px 14px; font-size:13px; }
    .nt-search { max-width:none; margin:20px; }
    .nt-form { margin:20px; }
    .nt-item { padding:0 12px; }
    .nt-view { margin:20px; }
    .nt-write { margin:20px; padding:16px; }
}

@media (max-width:767px) {
    .nt-writebtn { margin:0 10px 0 0; padding:0 10px; height:32px; font-size:12px; }
    .nt-tabs { gap:4px; margin:0 20px 14px; border-bottom:0; }
    .nt-tabs a { padding:6px 12px; border-radius:16px; font-size:12px; }
    .nt-search { max-width:none; margin:20px; }
    .nt-form { margin:20px; }
    .nt-tool { flex-wrap:wrap; gap:4px; padding:8px; }
    .nt-tbtn { height:34px; padding:0 10px; font-size:12px; }
    .nt-total { font-size:12px; }
    .nt-item { gap:6px; padding:0 8px; }
    .nt-link { gap:10px; padding:12px 0; }
    .nt-link .avatar { flex:0 0 34px; width:34px; height:34px; }
    .nt-state { padding:2px 7px; font-size:11px; }
    .nt-view { margin:20px; }
    .nt-vhead { flex-wrap:wrap; gap:10px; padding:14px; }
    .nt-vhead .avatar { flex:0 0 40px; width:40px; height:40px; }
    .nt-vtime { width:100%; flex-direction:row; align-items:center; justify-content:space-between; }
    .nt-vbody { min-height:120px; padding:18px 14px; }
    .nt-vbtns { padding:12px 14px; }
    .nt-vbtn { padding:0 10px; font-size:12px; }
    .nt-write { margin:20px; padding:14px; }
    .nt-wrow { flex-direction:column; gap:6px; }
    .nt-wlabel { flex:none; padding-top:0; }
    .nt-to { width:100%; box-sizing:border-box; }
    .nt-content { min-height:180px; }
    .nt-wfoot { flex-wrap:wrap; }
    .nt-wbtns { width:100%; }
    .nt-wbtns .btn { flex:1; }
}
/* #########################################################
 * 권한관리
 * ######################################################### */
.au-form { margin:20px; }
.au-wrap { overflow-x:auto; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.au-table { width:100%; min-width:640px; border-collapse:collapse; font-size:13px; }
.au-table th { padding:12px 10px; border-bottom:1px solid #e5e7eb; background:#f7f8fa; font-weight:600; color:#444; text-align:center; white-space:nowrap; }
.au-table td { padding:10px; border-bottom:1px solid #f0f2f5; text-align:center; }
.au-table tr:last-child td { border-bottom:0; }
.au-table th.au-menu { text-align:left; }
.au-table td.au-menu { text-align:left; font-weight:500; color:#333; white-space:nowrap; }
.au-group td { padding:9px 12px; background:var(--theme-soft); font-size:12px; font-weight:700; color:var(--theme-dark); text-align:left; }
.au-colchk { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.au-table input[type=checkbox] { width:16px; height:16px; margin:0; accent-color:var(--theme); cursor:pointer; vertical-align:middle; }
.au-table input[type=checkbox]:disabled { cursor:default; opacity:.6; }
.au-master { color:#999; }
.au-table tbody tr:not(.au-group):hover td { background:#fafbfc; }
.au-foot { display:flex; justify-content:flex-end; margin-top:14px; }
.au-save { height:38px; margin:0; padding:0 22px; }
.au-denied { display:flex; flex-direction:column; align-items:center; gap:10px; margin:20px; padding:60px 20px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; text-align:center; }
.au-denied i { font-size:40px; color:#c8cdd5; }
.au-denied strong { font-size:16px; color:#222; }
.au-denied p { margin:0; font-size:13px; color:#888; }
.au-dbtns { display:flex; gap:6px; margin-top:10px; }
.au-dbtns .btn { height:36px; margin:0; padding:0 16px; }

@media (min-width:1024px) and (max-width:1700px) {
    .au-table th { padding:11px 8px; }
    .au-table td { padding:9px 8px; }
}

@media (min-width:768px) and (max-width:1023px) {
    .au-form { margin:20px; }
    .au-table { font-size:12px; }
    .au-table th { padding:10px 6px; }
    .au-table td { padding:9px 6px; }
    .au-denied { margin:20px; padding:50px 20px; }
}

@media (max-width:767px) {
    .au-form { margin:20px; }
    .au-table { min-width:560px; font-size:12px; }
    .au-table th { padding:9px 5px; }
    .au-table td { padding:8px 5px; }
    .au-colchk { flex-direction:column; gap:3px; }
    .au-foot { margin-top:12px; }
    .au-save { width:100%; }
    .au-denied { margin:20px; padding:40px 16px; }
    .au-denied i { font-size:34px; }
    .au-denied strong { font-size:15px; }
    .au-dbtns { width:100%; }
    .au-dbtns .btn { flex:1; }
}
.au-search { position:relative; display:flex; align-items:center; gap:10px; max-width:360px; margin-bottom:14px; }
.au-search i { position:absolute; left:12px; font-size:13px; color:#999; pointer-events:none; }
.au-search input { flex:1; min-width:0; height:36px; padding:0 12px 0 34px; border:1px solid #ccd2d8; border-radius:6px; font-size:13px; }
.au-search input:focus { border-color:var(--theme); outline:none; }
.au-none { display:none; font-size:12px; color:#999; white-space:nowrap; }
.au-none.on { display:inline; }
.au-hide { display:none; }
@media (min-width:768px) and (max-width:1023px) {
    .au-search { max-width:none; }
}

@media (max-width:767px) {
    .au-search { flex-wrap:wrap; max-width:none; }
    .au-search input { height:38px; }
    .au-none { width:100%; }
}