/* =====================================================================
   관리자 화면 전용 스타일 (2026-07-31)

   **site.css 뒤에 얹는다.** site.css 를 고치지 않는 이유:
   그 파일은 정적페이지 편집기의 **미리보기**도 함께 쓴다. 거기서 미리보기는
   운영자가 쓴 본문이 공개 화면에서 어떻게 보이는지를 확인하는 자리라,
   관리자 화면을 예쁘게 하자고 site.css 를 건드리면 미리보기가 같이 변해
   "저장하면 이렇게 보인다"는 약속이 깨진다.

   그래서 여기서는 **관리자 껍데기와 부품만** 다시 칠한다. 선택자는 전부
   .admin / .admin-header 아래로 묶어 두었다.

   참고한 화면: 사용자가 보여 준 VIP 2.0 관리자.
   가져온 것 — 어두운 상단 바 + 알약 모양 현재 탭, 회색 띠 머리글의 괘선 표,
   색이 분명한 알약 배지, 마지막 칸의 작은 색버튼.
   바꾼 것 — 참조안의 남색 강조를 **이 사이트의 초록(--brand)** 으로 돌렸다.
   관리자도 같은 기관의 화면이라 남색을 새로 들일 이유가 없다.

   색 대비는 전부 흰 글씨 기준 실측이며 본문 기준 4.5:1 을 넘긴다.
     초록 #0B7F66 4.95:1 · 파랑 #2563EB 5.17:1 · 녹색 #15803D 5.06:1
     주황 #B45309 5.03:1 · 빨강 #B42318 6.61:1
   ===================================================================== */

.admin{
  --a-nav:#1F2733;        /* 상단 바 */
  --a-nav-2:#2B3543;      /* 상단 바에서 한 겹 밝은 곳(호버) */
  --a-blue:#2563EB;
  --a-green:#15803D;
  --a-amber:#B45309;
  --a-red:#B42318;
  --a-line:#DFE3E8;       /* 표 괘선 — site.css 의 --line 보다 조금 진하다.
                             칸을 모두 그으면 연한 선은 흐릿해서 격자가 안 보인다 */
  --a-head:#EFF2F5;       /* 표 머리글 띠 */
  background:#F4F6F8;     /* 흰 카드가 떠 보이도록 지면을 한 톤 내린다 */
  min-height:100vh;
}

/* ============================================================== 상단 바 */
.admin .admin-header{background:var(--a-nav);border-bottom:none}
.admin .admin-header .header-in{display:flex;align-items:center;gap:22px;
  min-height:56px;padding-top:0;padding-bottom:0}

.admin .admin-header .brand-text{gap:8px;font-size:17px;font-weight:800;color:#fff;
  letter-spacing:-.01em;white-space:nowrap}
.admin .admin-header .brand-text:hover{color:#fff;opacity:.85}
/* 참조안처럼 이름 앞에 표식 하나 — 이미지가 아니라 글자라 따로 받을 것이 없다 */
.admin .admin-header .brand-text::before{content:"❋";color:var(--brand-soft);font-size:15px}

.admin .admin-header .gnb{height:auto;gap:4px;margin-left:8px;margin-right:auto;
  align-items:center;flex-wrap:wrap}
.admin .admin-header .gnb a{display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:8px;font-size:14.5px;font-weight:600;
  color:#C6CEDA;transition:.14s}
.admin .admin-header .gnb a:hover{background:var(--a-nav-2);color:#fff}
/* 현재 위치 — 참조안의 알약. 색만 이 사이트의 초록이다 */
.admin .admin-header .gnb a.on{background:var(--brand);color:#fff}
.admin .admin-header .gnb a.on:hover{background:var(--brand-deep);color:#fff}

/* 이름 = 비밀번호 변경 입구. 링크인 줄 알아야 눌러 보므로 호버에서 드러낸다 */
.admin .admin-header .who{display:inline-flex;align-items:center;gap:6px;
  margin-left:6px;padding:6px 10px;border-radius:8px;
  color:#8E99A8;font-size:13.5px;white-space:nowrap;transition:.14s}
.admin .admin-header a.who:hover{background:var(--a-nav-2);color:#fff}
/* 권한이 낮으면 이름 옆에 표시한다 — 왜 정적페이지가 안 보이는지 알 수 있게 */
.admin .admin-header .who-role{padding:1px 7px;border-radius:99px;
  background:#414D5D;color:#D4DAE3;font-size:11px;font-weight:700}
.admin .admin-header .cta{padding:7px 14px;border-radius:8px;font-size:13.5px;
  font-weight:600;background:transparent;color:#C6CEDA;border:1px solid #414D5D}
.admin .admin-header .cta:hover{background:var(--a-nav-2);color:#fff;border-color:#5A6878}

/* 안 읽은 문의 수 — 어두운 바 위라 빨강을 그대로 쓴다 */
.admin .admin-header .nav-badge{background:#E5484D;color:#fff;font-weight:700}

/* ============================================================ 본문 폭 */
.admin .main{max-width:1180px;padding-top:24px;padding-bottom:64px}

/* ========================================================== 화면 머리 */
/* 참조안의 "VIP 등급 설정 (검색건수: 43건)" 줄 */
.admin .admin-head{margin-bottom:16px}
.admin .admin-head h1,
.admin .main>h1{display:flex;align-items:center;gap:9px;
  font-size:21px;font-weight:800;letter-spacing:-.02em;color:#1B2430}
.admin .main>h1{margin:0 0 16px}
.admin .admin-head h1::before,
.admin .main>h1::before{content:"";flex:none;width:4px;height:19px;border-radius:2px;
  background:var(--brand)}
/* 건수는 제목이 아니라 곁들이는 값이다 — 크기·굵기를 확 낮춘다 */
.admin .admin-head .count{padding:2px 9px;border-radius:99px;background:var(--brand-soft);
  color:var(--brand-ink);font-size:13px;font-weight:700}

.admin .block-head{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin:30px 0 12px}
.admin .block-head h2{font-size:16.5px;font-weight:700;color:#1B2430}
.admin .block-head .more{font-size:13.5px;font-weight:600;color:var(--brand)}
.admin .block-head .more:hover{text-decoration:underline}

/* ======================================================== 검색·거르기 */
/* 참조안의 회색 패널. 지금 뷰에는 select 하나뿐이지만 나중에 늘어도 줄이 선다 */
.admin .admin-filter{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-bottom:14px;padding:12px 14px;background:#fff;
  border:1px solid var(--a-line);border-radius:10px}
.admin .admin-filter::before{content:"검색";flex:none;margin-right:2px;
  font-size:13px;font-weight:700;color:#6B7684}
.admin .admin-filter select,
.admin .admin-filter input[type=text]{padding:7px 12px;border:1px solid var(--a-line);
  border-radius:8px;font-size:14px;background:#fff;color:var(--ink)}
.admin .admin-filter select:focus,
.admin .admin-filter input:focus{outline:2px solid var(--brand);outline-offset:1px}

/* ================================================================ 표 */
.admin .admin-scroll{background:#fff;border:1px solid var(--a-line);border-radius:10px;
  overflow:auto}
.admin .admin-table{border-radius:0;border:none;background:transparent}
/* 참조안은 칸마다 세로선이 있다. 열이 많은 표에서 눈이 줄을 놓치지 않게 해 준다 */
.admin .admin-table th,
.admin .admin-table td{padding:10px 13px;font-size:14px;
  border-bottom:1px solid var(--a-line);border-right:1px solid var(--a-line)}
.admin .admin-table th:last-child,
.admin .admin-table td:last-child{border-right:none}
.admin .admin-table thead th{background:var(--a-head);color:#4A5563;
  font-size:13px;font-weight:700;text-align:center;white-space:nowrap;
  border-bottom:1px solid #CFD6DE}
.admin .admin-table tbody tr:last-child td{border-bottom:none}
.admin .admin-table tbody tr:hover{background:#F7F9FB}
/* 제목 칸만 왼쪽, 나머지는 가운데 — 참조안과 같다. 숫자와 짧은 값이 가운데로
   모이면 줄 간 비교가 쉬워진다 */
.admin .admin-table td{text-align:center;vertical-align:middle;color:#3A4350}
.admin .admin-table td.titlecol,
.admin .admin-table td.msgcol{text-align:left}
.admin .admin-table .titlecol a{font-weight:600;color:#1B2430}
.admin .admin-table .titlecol a:hover{color:var(--brand);text-decoration:underline}
.admin .admin-table .empty-cell{padding:34px 13px;color:var(--muted)}
.admin .admin-table.posts .tcol img{width:52px;height:39px;border-radius:5px;margin:0 auto}

/* 새로 들어온 문의 줄 — 왼쪽에 색 띠를 세운다(바탕색만으로는 약하다) */
.admin .admin-table.inquiries tr.is-new{background:#FFFBF3}
.admin .admin-table.inquiries tr.is-new td:first-child{box-shadow:inset 3px 0 0 var(--a-amber)}
.admin .admin-table.inquiries tr.is-new:hover{background:#FFF7E9}

/* 꺼 둔 게시판 줄 — 글자를 흐리게 해서 "지금 안 쓰는 줄"임을 한눈에 */
.admin .admin-table tr.is-off td{color:#8B95A1}
.admin .admin-table tr.is-off .titlecol{color:#6B7684;text-decoration:line-through}
.admin .admin-table code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:#4A5563;background:#F1F4F7;padding:2px 7px;border-radius:5px}

/* ============================================================== 배지 */
.admin .tag{display:inline-block;min-width:48px;padding:3px 10px;border-radius:99px;
  font-size:12.5px;font-weight:700;line-height:1.6;border:1px solid transparent}
.admin .tag.new{background:#FDF0E3;color:#8A4B0B;border-color:#F0D6B6}
.admin .tag.done{background:#E7F4EC;color:#136A38;border-color:#C4E3D0}
.admin .tag.hold{background:#EEF1F5;color:#4A5563;border-color:#D8DEE6}
.admin .badge{border-radius:99px;padding:2px 9px;font-size:11.5px}

/* ============================================================== 버튼 */
.admin .btn{border-radius:8px;font-weight:600}
.admin .btn.primary{background:var(--brand);border-color:var(--brand)}
.admin .btn.primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}

/* 표 마지막 칸의 작은 버튼들 — 참조안처럼 색으로 구실을 나눈다.
   글자만 있는 버튼을 나란히 두면 어느 쪽이 위험한지 눈에 안 들어온다. */
.admin .btn-sm{border-radius:7px;padding:5px 12px;font-size:13px;font-weight:600;
  border:1px solid transparent;background:var(--a-blue);color:#fff}
.admin .btn-sm:hover{background:#1D4FD8;color:#fff;border-color:transparent}
.admin .btn-sm.danger{background:var(--a-red);color:#fff;border-color:transparent}
.admin .btn-sm.danger:hover{background:#94190F;color:#fff}
.admin .btn-sm.ghost{background:#fff;color:#4A5563;border-color:var(--a-line)}
.admin .btn-sm.ghost:hover{background:#F1F4F7;color:#1B2430;border-color:#C3CBD5}
.admin .admin-table .actions{white-space:nowrap}
.admin .admin-table .actions>*+*,
.admin .admin-table .actions form{margin-left:5px}

/* ========================================================== 통계 카드 */
.admin .stat-grid{gap:12px;margin-bottom:6px}
.admin .stat{padding:16px 18px;background:#fff;border:1px solid var(--a-line);
  border-radius:10px;box-shadow:none}
.admin .stat .k{font-size:13px;font-weight:600;color:#6B7684}
.admin .stat .v{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#1B2430}
.admin .stat .v.accent{color:var(--a-amber)}

/* ============================================================== 서식 */
.admin .admin-form{border:1px solid var(--a-line);border-radius:10px;box-shadow:none}

/* ⚠ site.css 의 서식 규칙은 `input[type=text]` **하나만** 잡는다.
   비밀번호 변경 화면을 만들며 type=password 를 처음 쓰게 됐는데, 그 칸만
   테두리도 여백도 없는 맨 입력란으로 나왔다(2026-07-31 사용자 지적).

   그래서 여기서는 **타입을 하나씩 적지 않는다.** 글을 넣는 칸이 아닌 것만
   빼는 방식이라 나중에 email·tel·number·date 를 써도 또 빠뜨릴 일이 없다.
   (checkbox·radio 는 모양이 완전히 다르고, file 은 site.css 가 따로 잡는다.
    hidden 은 어차피 안 그려지지만 규칙에 걸리지 않게 함께 뺐다.) */
.admin .admin-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.admin .admin-form select,
.admin .admin-form textarea{
  width:100%;padding:11px 14px;font-size:16px;font-family:inherit;
  border:1px solid var(--a-line);border-radius:8px;
  background:#fff;color:var(--ink)}

.admin .admin-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):focus,
.admin .admin-form select:focus,
.admin .admin-form textarea:focus{outline:2px solid var(--brand);outline-offset:1px;
  border-color:var(--brand)}

/* 숫자 칸은 폭을 다 쓸 이유가 없다(정렬 순서처럼 두세 자리 값이다).
   위 규칙이 타입을 가리지 않으므로 여기서 되돌린다. */
.admin .admin-form input[type=number]{width:140px}
.admin .admin-form input[type=date]{width:200px}

/* 라벨 아래 붙는 도움말 — 제목과 입력란 사이에서 혼자 떠 보이지 않게 당겨 둔다 */
.admin .admin-form label small{margin-top:-2px;font-size:12.5px;color:#6B7684}

/* ============================================================== 알림 */
.admin .flash{border-radius:10px;border-color:#E9D3B4;font-weight:600}

/* ============================================================ 로그인 */
.admin .login-box{border:1px solid var(--a-line);border-radius:12px;box-shadow:none}

/* ============================================================== 좁은 화면 */
@media(max-width:820px){
  .admin .admin-header .header-in{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .admin .admin-header .gnb{margin-left:0;width:100%;gap:3px}
  .admin .admin-header .gnb a{padding:7px 11px;font-size:13.5px}
  .admin .admin-header .who{display:none}   /* 좁으면 이름보다 메뉴가 먼저다 */
  .admin .main{padding-top:18px}
  .admin .admin-table th,.admin .admin-table td{padding:9px 10px;font-size:13.5px}
}