@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@200;300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
body, .f-noto-sans, .f-basic {font-family: 'Noto Sans KR', sans-serif;}

/*******************************
  디자인 토큰
********************************/
/* hys 모듈의 general.css 가 뒤에 주입돼도 밀리지 않도록 :root 보다 높은 명시도를 사용한다. */
html:root, html:root body {width: 100%}
html:root {
  /* 프로젝트 테마 색(보라) */
  --theme: #9975da;
  --theme-strong: #8763cf;
  --theme-weak: #f2edfb;
  --theme-line: #ddd0f4;

  /* HYS UI(input/select/textarea/button.hysui) 테마 — 프로젝트 테마 색과 폰트를 그대로 사용 */
  --hysui-theme-color: 153, 117, 218;
  --hysui-font: 'Noto Sans KR', sans-serif;

  /* 페이지 공통 */
  --page-bg: #f5f6f8;
  --card-bg: #ffffff;
  --card-line: #ebecf0;
  --card-radius: 14px;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 20px rgba(16, 24, 40, 0.04);
  --txt-1: #222733;
  --txt-2: #5b6474;
  --txt-3: #8d95a5;
  --line: #edeef2;
  --danger: #e5484d;
}

/*******************************
  관리자 페이지 공통 레이아웃
********************************/
/* 페이지 루트 */
.ap-root {background: var(--page-bg); min-height: 100vh; padding-bottom: 50px; color: var(--txt-1)}
@media (max-width: 700px) {
  .ap-root {min-height: calc(100vh - 60px)}
}

/* 페이지 본문 폭 */
.ap-body {max-width: 1180px; margin: 0 auto; padding: 0 40px}
@media (max-width: 700px) {
  .ap-body {padding: 0 16px}
}

/* 페이지 헤더 */
.ap-head {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 34px 0 22px}
.ap-head h1 {font-size: 26px; font-weight: 800; letter-spacing: -0.4px; color: var(--txt-1)}
.ap-head .ap-count {font-size: 15px; font-weight: 700; color: var(--theme); background: var(--theme-weak); border-radius: 20px; padding: 4px 12px; line-height: 1.4em}
.ap-head .ap-head-right {margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap}
@media (max-width: 700px) {
  .ap-head {padding: 22px 0 16px}
  .ap-head h1 {font-size: 22px}
}

/* 카드 */
.ap-card {background: var(--card-bg); border: solid 1px var(--card-line); border-radius: var(--card-radius); box-shadow: var(--card-shadow)}
.ap-card + .ap-card {margin-top: 16px}
.ap-card-head {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-bottom: solid 1px var(--line)}
.ap-card-head h2 {font-size: 16px; font-weight: 700; color: var(--txt-1)}
.ap-card-head .right {margin-left: auto; display: flex; align-items: center; gap: 6px}
.ap-card-body {padding: 18px 20px}

/* 버튼 */
.ap-btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.4em; color: var(--txt-2); background: #fff; border: solid 1px #dfe1e6; border-radius: 9px; padding: 9px 14px; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s}
.ap-btn:disabled {opacity: 0.55; cursor: default}
.ap-btn.primary {color: #fff; background: var(--theme); border-color: var(--theme)}
.ap-btn.danger {color: var(--danger); border-color: #f3ced0}
.ap-btn.ghost {border-color: transparent; background: transparent}
.ap-btn.small {font-size: 13px; padding: 6px 10px; border-radius: 7px}
@media (hover: hover) and (pointer: fine) {
  .ap-btn:not(:disabled):hover {background: #f7f7fa; border-color: #cfd3da; color: var(--txt-1)}
  .ap-btn.primary:not(:disabled):hover {background: var(--theme-strong); border-color: var(--theme-strong); color: #fff}
  .ap-btn.danger:not(:disabled):hover {background: #fdf1f1; border-color: #eab6b8; color: var(--danger)}
  .ap-btn.ghost:not(:disabled):hover {background: #0000000a; border-color: transparent}
}
.ap-btn:not(:disabled):active {transform: translateY(1px)}

/* 필터 칩 */
.ap-chips {display: flex; flex-wrap: wrap; gap: 6px}
.ap-chip {font-family: inherit; font-size: 14px; font-weight: 500; color: var(--txt-2); background: #fff; border: solid 1px #e3e5ea; border-radius: 20px; padding: 7px 15px; line-height: 1.4em; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s}
.ap-chip.on {color: #fff; background: var(--theme); border-color: var(--theme)}
@media (hover: hover) and (pointer: fine) {
  .ap-chip:not(.on):hover {border-color: var(--theme-line); background: var(--theme-weak); color: var(--theme-strong)}
}

/* 테이블 */
.ap-table {width: 100%; border-collapse: collapse; font-size: 14px}
.ap-table th {font-size: 13px; font-weight: 700; color: var(--txt-3); background: #fafafb; text-align: left; padding: 12px 14px; white-space: nowrap; border-bottom: solid 1px var(--line)}
.ap-table td {padding: 12px 14px; color: var(--txt-2); border-bottom: solid 1px var(--line); vertical-align: middle}
.ap-table tbody tr:last-child > td {border-bottom: none}
.ap-table .num {font-variant-numeric: tabular-nums}
@media (hover: hover) and (pointer: fine) {
  .ap-table tbody tr:hover > td {background: #fafbfc}
}

/* 데이터 없음 */
.ap-empty {padding: 56px 20px; text-align: center; color: var(--txt-3); font-size: 15px}

/* 라벨/값 목록 */
.ap-dl {display: flex; flex-wrap: wrap; row-gap: 14px; font-size: 15px}
.ap-dl > dt {width: 130px; color: var(--txt-3); font-size: 14px; font-weight: 500; padding-top: 2px}
.ap-dl > dd {width: calc(100% - 130px); margin: 0; color: var(--txt-1); word-break: break-all}
@media (max-width: 520px) {
  .ap-dl > dt {width: 100%; padding-top: 0}
  .ap-dl > dd {width: 100%; margin-top: 4px}
}

/* 상태 뱃지 */
.ap-badge {display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; line-height: 1.4em; padding: 4px 10px; border-radius: 20px; background: #f0f1f4; color: var(--txt-2)}
.ap-badge.on {background: #e7f7ec; color: #1a7f3c}
.ap-badge.off {background: #f3f4f6; color: #8d95a5}
.ap-badge::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor}

.f-hi-melody{font-family: 'Hi Melody', sans-serif;}
.f-poor-story{font-family:'PoorStory', sans-serif;}
.noselect {-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none}

.vscroll::-webkit-scrollbar{background:#f5f5f5;width:6px}
.hscroll::-webkit-scrollbar{background:#f5f5f5;height:6px}
.hscroll::-webkit-scrollbar-thumb,
.vscroll::-webkit-scrollbar-thumb{background-color:#d6d6d6;border-radius:3px;cursor:pointer}
.hscroll::-webkit-scrollbar-thumb:hover,
.vscroll::-webkit-scrollbar-thumb:hover{background-color:#afafaf}

body {overflow-x: hidden}

/* loader */
.loader{display:block; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; text-align:center; z-index:9999}
.loader > div{margin:0 auto; border-radius:10px; display:inline-block; background:#FFF; box-shadow:0 0 50px 3px rgba(0,0,0,0.1); min-width:280px; min-height:170px; padding-top:30px; position:relative; top:50%; margin-top:-85px}
.load-imgwrap{display:flex; justify-content:center}
.loader img{width:60px}
.loader p{color:#444; font-size:15px; padding-top:20px}
html.loadershow,
html.loadershow body{height:100%; overflow:hidden}
@media(min-width:1070px){
  .loader > div{min-width:350px}
}