/* 관리자 콘솔 공통 테마.
 * 운영 콘솔(layout_header.ejs 를 쓰는 화면 전체)에 같은 디자인 언어를 적용한다.
 * 기준은 사용자 관리 화면(public/css/manage-user.css)과 같다.
 * 공개·사용자 화면으로 번지지 않도록 모든 선택자를 html.admin-responsive 아래에 둔다.
 * 색·글자 크기·모서리 값은 이미 쓰이던 값만 재사용한다(docs/ui/guidelines.md). */

html.admin-responsive {
    --ac-ink: #17203a;
    --ac-text: #33405c;
    --ac-muted: #647089;
    --ac-line: #dce4f1;
    --ac-soft: #f5f7fb;
    --ac-blue: #344cdb;
    --ac-blue-soft: #eef2ff;
}

/* ----- 페이지 제목 ----- */
html.admin-responsive .subpage-common .subpage__title { font-size: 28px; letter-spacing: -0.4px; color: var(--ac-ink); }
html.admin-responsive .subpage-common .page-location > ul > li { font-size: 13px; color: var(--ac-muted); }
html.admin-responsive .subpage-common .page-location ul li:last-child { color: #545c5a; }
html.admin-responsive .subpage-info { align-items: flex-end; gap: 20px; }
html.admin-responsive .subpage-info-right { align-items: center; gap: 8px; }

/* ----- 본문: 바깥 .inner 가 카드이므로 안쪽 상자는 테두리·여백 없이 둔다 ----- */
html.admin-responsive .content-body { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* ----- 도구 버튼(작성·삭제·이동) ----- */
html.admin-responsive .component-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; min-height: 34px; min-width: 0; margin: 0; padding: 0 12px;
    border: 1px solid var(--ac-line); border-radius: 8px; background: var(--ac-soft); color: #3d4756;
    font-family: "Noto Sans KR", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.2px;
    white-space: nowrap; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
html.admin-responsive .component-button:hover,
html.admin-responsive .component-button:focus-visible { border-color: #3d4756; box-shadow: 0 2px 8px rgba(35, 48, 76, 0.08); }
html.admin-responsive .component-button--red { border-color: #fff0ec; background: #fff0ec; color: #a12627; }
html.admin-responsive .component-button--red:hover,
html.admin-responsive .component-button--red:focus-visible { border-color: #a12627; }

html.admin-responsive .component-button-small {
    display: inline-flex; align-items: center; justify-content: center; width: auto; height: 28px; min-height: 28px;
    margin: 0; padding: 0 10px; border: 1px solid var(--ac-line); border-radius: 6px; background: #fff;
    color: #3d4756; font-family: "Noto Sans KR", sans-serif; font-size: 12.5px; font-weight: 600;
    letter-spacing: -0.2px; text-decoration: none; vertical-align: middle;
    transition: background-color .15s, border-color .15s, color .15s;
}
html.admin-responsive a.component-button-small:hover,
html.admin-responsive a.component-button-small:focus-visible,
html.admin-responsive .component-button-small:hover { border-color: #9eb4e7; background: var(--ac-blue-soft); color: var(--ac-blue); }

/* 기본 동작 버튼(폼 제출)은 주 버튼 하나만 둔다 */
html.admin-responsive .fill-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--ac-blue); color: #fff;
    font-family: "Noto Sans KR", sans-serif; font-size: 14px; font-weight: 700;
    transition: background-color .15s;
}
html.admin-responsive .fill-button:hover { background: #263fae; }

/* ----- 필터 ----- */
html.admin-responsive .content-area .component-group { margin-bottom: 16px; }
html.admin-responsive .component-group .component-group__line { margin-bottom: 8px; }
html.admin-responsive .component-group .component-box {
    display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 38px;
    margin: 0 8px 0 0; padding: 0 8px; border: 1px solid var(--ac-line); border-radius: 9px; background: #fff;
}
/* 회원 구분 같은 라디오는 칩으로 바꾼다(관리자 화면 공통). */
html.admin-responsive .component-group .component-box .component-label__radio {
    position: relative; display: inline-flex; align-items: center; height: 30px; margin: 0; padding: 0 12px;
    border: 1px solid transparent; border-radius: 7px; color: var(--ac-muted);
    font-family: "Noto Sans KR", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.2px;
    cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
html.admin-responsive .component-group .component-box .component-label__radio input[type=radio] {
    position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0;
}
html.admin-responsive .component-group .component-box .component-label__radio input[type=radio]::before { display: none; }
html.admin-responsive .component-group .component-box .component-label__radio span { margin: 0; font-size: 13px; }
html.admin-responsive .component-group .component-box .component-label__radio:has(input[type=radio]:checked) {
    border-color: #9eb4e7; background: var(--ac-blue-soft); color: var(--ac-blue);
}
html.admin-responsive .component-group .component-box .component-label__radio:has(input[type=radio]:focus-visible) {
    outline: 2px solid var(--ac-blue); outline-offset: 2px;
}
html.admin-responsive .component-group .charge-log-total { font-size: 14px; color: var(--ac-text); }
html.admin-responsive .component-group .charge-log-total span { color: var(--ac-blue); font-weight: 700; }

/* ----- 검색 ----- */
html.admin-responsive .component-group .component-search {
    width: 320px; height: 38px; padding: 0 4px 0 12px; border: 1px solid #d8dee8; border-radius: 9px;
    background: #fff; box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
html.admin-responsive .component-group .component-search:focus-within { border-color: #8f9df0; box-shadow: 0 0 0 3px rgba(49, 88, 217, .12); }
html.admin-responsive .component-group .component-search form { align-items: center; }
html.admin-responsive .component-group .component-search input[type=text] {
    height: 30px; min-height: 0; padding: 0; color: var(--ac-ink);
    font-family: "Noto Sans KR", sans-serif; font-size: 13px; line-height: 1.2; letter-spacing: 0;
}
html.admin-responsive .component-group .component-search input[type=text]::placeholder { color: #9eabc1; }
html.admin-responsive .component-group .component-search button {
    height: 30px; min-height: 0; padding: 0 12px; border-radius: 6px; background: var(--ac-ink); color: #fff;
}
html.admin-responsive .component-group .component-search button img { filter: brightness(0) invert(1); opacity: 0.92; }
html.admin-responsive .component-group .component-search button:hover { background: #263fae; }

/* 안내 문구 상자 */
html.admin-responsive .content-body .list-guide { border-radius: 8px; }

/* ----- 표: 흰 카드 + 연한 머리글 ----- */
html.admin-responsive .content-body .component-table {
    margin-bottom: 18px; max-width: 100%; overflow-x: auto;
    border: 1px solid var(--ac-line); border-radius: 10px;
}
html.admin-responsive .content-body .component-table table { table-layout: fixed; width: 100%; border-collapse: collapse; }
html.admin-responsive .content-body .component-table table th,
html.admin-responsive .content-body .component-table table td {
    height: auto; padding: 10px; border-bottom: 1px solid #edf1f6; border-radius: 0;
    background: transparent; color: var(--ac-text); text-align: left;
    font-family: "Noto Sans KR", sans-serif; font-size: 13px; line-height: 1.45; letter-spacing: -0.2px;
    vertical-align: middle; overflow: hidden; text-overflow: ellipsis;
}
html.admin-responsive .content-body .component-table table th {
    background: var(--ac-soft); border-bottom: 1px solid var(--ac-line); color: #5e6980;
    font-size: 12px; font-weight: 600; white-space: normal; word-break: keep-all;
}
html.admin-responsive .content-body .component-table table th:first-child,
html.admin-responsive .content-body .component-table table th:last-child { border-radius: 0; }
html.admin-responsive .content-body .component-table table tbody tr:last-child td { border-bottom: 0; }
html.admin-responsive .content-body .component-table table tbody tr:hover td { background: var(--ac-soft); }
html.admin-responsive .content-body .component-table table td a { color: var(--ac-blue); }

/* ----- 페이지 이동 ----- */
html.admin-responsive .content-body .pagenation { margin-top: 4px; }
html.admin-responsive .content-body .pagenation button,
html.admin-responsive .content-body .pagenation button.previous,
html.admin-responsive .content-body .pagenation button.next,
html.admin-responsive .content-body .pagenation button.previous:last-child,
html.admin-responsive .content-body .pagenation button.next:first-child {
    min-width: 34px; min-height: 34px; margin: 0; padding: 0 6px; border-radius: 8px;
    color: var(--ac-text); font-size: 13px; font-weight: 600;
}
html.admin-responsive .content-body .pagenation button:hover:not(:disabled) { background: var(--ac-blue-soft); color: var(--ac-blue); }
html.admin-responsive .content-body .pagenation button.active { background: var(--ac-blue); color: #fff; }

/* ----- 작성·수정 폼 ----- */
html.admin-responsive .content-body .form-table--full,
html.admin-responsive .content-body .form-table {
    margin: 0 0 24px; border: 1px solid #e4e7ec; border-radius: 8px; overflow: hidden;
}
html.admin-responsive .content-body .form_area--line { border-bottom: 1px solid #e4e7ec; }
html.admin-responsive .content-body .form_area--line:last-child { border-bottom: 0; }
html.admin-responsive .content-body .form_area--line dt {
    width: 170px; padding: 16px 12px 16px 28px; border: 0; border-right: 1px solid #e4e7ec;
    background: #fafbfc; color: #475467;
    font-family: "Noto Sans KR", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.2px;
}
html.admin-responsive .content-body .form_area--line dd { min-height: 56px; padding: 12px 16px; border: 0; }
html.admin-responsive .content-body .form_area--line dd > input {
    height: 38px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 6px;
    color: #344054; font-size: 14px; text-indent: 0; letter-spacing: -0.2px;
}
html.admin-responsive .content-body .form_area--line dd > input:focus {
    border-color: var(--ac-blue); box-shadow: 0 0 0 3px rgba(49, 88, 217, .12);
}
html.admin-responsive .content-body .form_area--line dd > .field-hint { color: var(--ac-muted); }