/* ══════════════════════════════════════════════════════════════════════
   se2u 관리자 전용 스타일 — 모든 규칙이 .adm 아래, /admin 에서만 켜짐(index.html 의 data-admin-css)
   색·글자 크기는 style.css 토큰만 사용 — 새 값 만들지 말 것. 인라인 스타일 금지
   ══════════════════════════════════════════════════════════════════════ */

/* 토큰은 .adm 과 .adm-login 둘 다에 걸 것 — 로그인 화면은 .adm 바깥이라 빠지면 값이 안 먹음 */
.adm, .adm-login {
  --adm-rail: 232px;          /* 왼쪽 메뉴 폭 */
  --adm-bar: 60px;            /* 위 띠 높이 */
  --adm-gap: 20px;
  --adm-radius: 10px;
}

.adm {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink-900);
  font-size: var(--fs-sm);
  display: grid;
  grid-template-columns: var(--adm-rail) 1fr;
  grid-template-rows: var(--adm-bar) 1fr;
  grid-template-areas: "rail bar" "rail main";
}

/* ── 왼쪽 메뉴 ─────────────────────────────────────────────── */
.adm__rail { grid-area: rail; background: var(--accent); color: var(--on-accent); padding: 18px 14px; }
.adm__brand { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 18px; }
.adm__brand img { width: 150px; height: auto; }
.adm__brand span { font-size: var(--fs-xs); opacity: .62; letter-spacing: .06em; }

.adm__nav { display: flex; flex-direction: column; gap: 2px; }
.adm__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 0 12px; border-radius: 8px;
  color: rgba(255,255,255,.72); text-decoration: none; font-size: var(--fs-sm);
}
.adm__nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.adm__nav a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.adm__nav b { /* 안 읽은 건수 */
  font-size: var(--fs-xs); font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--brand-red); color: #fff;
}
/* 묶음 머리글 — 누르는 것 아님, 아래 줄들의 갈래 이름 */
.adm__navhead {
  font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,.5);
  margin: 18px 0 4px; padding: 0 12px; letter-spacing: .04em;
}
.adm__navhead:first-of-type { margin-top: 14px; }
/* ⚠ 묶음 **안쪽** 줄은 한 칸 들여씁니다 — 머리글과 같은 줄에 서면 묶임이 안 보입니다. */
.adm__nav a.is-sub { padding-left: 22px; }

.adm__railfoot { margin-top: 22px; padding: 0 12px; }
.adm__railfoot a { color: rgba(255,255,255,.55); font-size: var(--fs-xs); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.adm__railfoot a:hover { color: #fff; text-decoration: underline; }

/* ── 위 띠 ─────────────────────────────────────────────────── */
.adm__bar {
  grid-area: bar; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 var(--adm-gap);
}
.adm__title { font-size: var(--fs-h3); font-weight: 600; margin: 0; }
.adm__spacer { flex: 1; }
.adm__who { font-size: var(--fs-xs); color: var(--ink-500); }

/* ── 본문 ─────────────────────────────────────────────────── */
.adm__main { grid-area: main; padding: var(--adm-gap); min-width: 0; }
.adm__panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--adm-radius); }
.adm__panel + .adm__panel { margin-top: var(--adm-gap); }
.adm__panelhead { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.adm__panelbody { padding: 16px; }

/* ── 단추 ─────────────────────────────────────────────────── */
.adm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-hi);
  background: var(--surface); color: var(--ink-900); font-size: var(--fs-sm);
  font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.adm-btn:hover { background: var(--surface-hi); }
.adm-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.adm-btn--primary:hover { background: var(--accent-600); }
.adm-btn--danger { color: var(--brand-red); border-color: var(--brand-red); background: var(--surface); }
.adm-btn--danger:hover { background: #FDECEC; }
.adm-btn--sm { min-height: 34px; padding: 0 10px; font-size: var(--fs-xs); }
.adm-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── 표 ───────────────────────────────────────────────────── */
.adm-tablewrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.adm-table th, .adm-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table th { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; white-space: nowrap; background: var(--paper); }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover { background: var(--paper); }
/* 비공개 줄은 한눈에 달라 보이게 — .adm-stack__item.is-off 와 같은 빗금 */
.adm-table tbody tr.is-off { background: repeating-linear-gradient(135deg, var(--paper) 0 10px, var(--surface) 10px 20px); }
.adm-table tbody tr.is-off .adm-table__title { color: var(--ink-500); }
.adm-table__title { font-weight: 600; color: var(--ink-900); text-decoration: none; display: block; max-width: 60ch; }
.adm-table__title:hover { text-decoration: underline; }
.adm-table__actions { display: flex; gap: 6px; white-space: nowrap; }
.adm-table__nowrap { white-space: nowrap; }
.adm-table--fixed { table-layout: fixed; }

/* ── 받은 글 목록 ─────────────────────────────────────────── */
/* 줄 전체가 눌림 — 제목만 링크면 누를 자리가 좁음 */
/* 이름은 adm-inbox__… — adm-row 를 <tr> 에 쓰지 말 것(위쪽 display:flex 규칙이라 표가 무너짐) */
.adm-table--rows tbody tr.adm-inbox { cursor: pointer; }
.adm-table--rows tbody tr.adm-inbox:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* ⚠ **안 본 것**은 한눈에 달라야 합니다 — 왼쪽 굵은 선 + 진한 글씨. */
.adm-inbox.is-new td:first-child { box-shadow: inset 3px 0 0 var(--brand-red); }
.adm-inbox.is-new .adm-inbox__name { font-weight: 700; }
.adm-inbox__name { display: inline-block; font-weight: 600; color: var(--ink-900); margin-right: 6px; }
.adm-inbox__sub { display: block; font-size: var(--fs-xs); color: var(--ink-500); }
.adm-inbox__excerpt { display: block; max-width: 46ch; color: var(--ink-500); font-size: var(--fs-xs); line-height: 1.6; }

/* 첨부 파일 한 줄 */
.adm-file { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-file__name { font-variant-numeric: tabular-nums; }

.adm-actions--gap { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ── 세로로 쌓는 목록 (채용 공고) ──────────────────────────────
   표 아님 — 한 건이 한 덩어리로 읽히게 쌓음 */
.adm-stack { list-style: none; margin: 0; padding: 0; }
.adm-stack__item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px; border-bottom: 1px solid var(--line);
}
.adm-stack__item:last-child { border-bottom: 0; }
.adm-stack__item:hover { background: var(--paper); }
/* ⚠ 비노출은 **한눈에** 달라 보여야 합니다 — 안 그러면 내려 둔 줄 모르고 지나칩니다. */
.adm-stack__item.is-off { background: repeating-linear-gradient(135deg, var(--paper) 0 10px, var(--surface) 10px 20px); }
.adm-stack__item.is-off .adm-stack__title,
.adm-stack__item.is-off .adm-stack__desc { color: var(--ink-500); }

.adm-stack__main { flex: 1 1 auto; min-width: 0; }
.adm-stack__title {
  display: block; font-size: var(--fs-body); font-weight: 600;
  color: var(--ink-900); text-decoration: none;
}
.adm-stack__title:hover { text-decoration: underline; }
.adm-stack__desc { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-900); line-height: 1.6; }
.adm-stack__meta { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--ink-500); }

.adm-stack__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.adm-stack__tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 760px) {
  .adm-stack__item { flex-direction: column; gap: 12px; }
  .adm-stack__side { align-items: flex-start; width: 100%; }
  .adm-stack__tags { justify-content: flex-start; }
}

/* ── 꼬리표 · 상태 ─────────────────────────────────────────── */
.adm-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px;
  background: var(--surface-hi); color: var(--ink-500); font-size: var(--fs-xs); white-space: nowrap;
}
.adm-tag--new     { background: #FDECEC; color: var(--brand-red); font-weight: 600; }
.adm-tag--working { background: #FDF2E1; color: #8A5B10; }
.adm-tag--done    { background: #E7F1F1; color: var(--teal-600); }
.adm-tag--spam    { background: var(--surface-hi); color: var(--ink-500); text-decoration: line-through; }
.adm-tag--open    { background: #E7F1F1; color: var(--teal-600); font-weight: 600; }
.adm-tag--closed  { background: var(--surface-hi); color: var(--ink-500); }
.adm-tag--draft   { background: #FDF2E1; color: #8A5B10; }

/* ── 입력 ─────────────────────────────────────────────────── */
.adm-form { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.adm-field { display: flex; flex-direction: column; gap: 6px; }
.adm-field__label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-500); }
.adm-field__label i { font-style: normal; color: var(--brand-red); margin-left: 3px; }
.adm-field__hint { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.55; }
/* 이름표 옆 괄호 설명 — 이름표보다 옅고 가늘게(별표와 구분) */
.adm-field__labelnote { margin-left: 6px; font-weight: 400; opacity: .75; }
/* 못 고치는 칸 — 입력칸처럼 보이되 눌리지 않음 */
.adm-static { padding: 9px 0; font-size: var(--fs-sm); color: var(--ink-500); }

.adm-input {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-hi);
  border-radius: 8px; background: var(--surface); color: var(--ink-900);
  font: inherit; font-size: var(--fs-sm);
}
.adm-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea.adm-input { min-height: 120px; resize: vertical; line-height: 1.6; }
textarea.adm-input--tall { min-height: 260px; }
.adm-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* 두 개 중 하나 고르기(접수기간) — 누르는 자리는 칸 전체(44px) */
.adm-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-choice__item {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line-hi);
  border-radius: 8px; background: var(--surface); cursor: pointer; font-size: var(--fs-sm);
}
.adm-choice__item:hover { background: var(--surface-hi); }
.adm-choice__item input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.adm-choice__item:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.adm-choice__item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ⚠ 달력 칸은 글줄 칸만큼 넓을 필요가 없습니다. */
.adm-input--date { max-width: 240px; }
.adm-row > * { flex: 1 1 220px; }
.adm-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 저장 결과 한 마디 — 단추 옆에 붙습니다. */
.adm-saved { font-size: var(--fs-xs); color: var(--teal-600); }
.adm-saved--warn { color: var(--brand-red); }

/* 검색·필터 줄 */
.adm-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-filters .adm-input { width: auto; min-width: 180px; }

/* ── 본문 편집기 (Tiptap) ──────────────────────────────────── */
.adm-editor { border: 1px solid var(--line-hi); border-radius: 8px; background: var(--surface); overflow: hidden; }
.adm-editor__bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.adm-editor__btn {
  min-height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ink-900); font: inherit; font-size: var(--fs-xs);
  cursor: pointer; white-space: nowrap;
}
.adm-editor__btn:hover { background: var(--surface-hi); }
.adm-editor__btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.adm-editor__sep { width: 1px; height: 20px; background: var(--line-hi); margin: 0 4px; }

/* 편집기 안쪽은 방문자 화면(page.css)과 비슷하게 — 똑같을 필요는 없음 */
.adm-editor__body {
  min-height: 300px; max-height: 60vh; overflow-y: auto; padding: 16px 18px;
  font-size: var(--fs-body); line-height: 1.75; color: var(--ink-900);
}
.adm-editor__body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adm-editor__body > * { margin: 0 0 .9em; }
.adm-editor__body > *:last-child { margin-bottom: 0; }
.adm-editor__body h2 { font-size: var(--fs-h3); font-weight: 600; margin-top: 1.4em; }
.adm-editor__body h3 { font-size: var(--fs-body); font-weight: 600; margin-top: 1.2em; }
.adm-editor__body ul, .adm-editor__body ol { padding-left: 1.3em; }
.adm-editor__body li { margin-bottom: .3em; }
.adm-editor__body a { color: var(--teal-600); }
.adm-editor__body img { max-width: 100%; height: auto; border-radius: 6px; }
.adm-editor__body iframe { max-width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 6px; }
.adm-editor__body [data-youtube-video] { max-width: 100%; }
/* 빈 상태 안내 */
.adm-editor__body p.is-editor-empty:first-child::before {
  content: "여기에 본문을 쓰십시오"; color: var(--ink-500); float: left; height: 0; pointer-events: none;
}
.adm-editor__hint { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line);
  background: var(--paper); font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.6; }

/* ── 영문 묶음 ─────────────────────────────────
   국문 칸과 갈라 보이게 테두리. fieldset 기본 여백·테두리는 0 으로 눕히고 다시 깜 */
.adm-group {
  border: 1px solid var(--line); border-radius: var(--adm-radius);
  margin: 4px 0 0; padding: 16px;
  background: var(--paper);
}
.adm-group__head {
  padding: 0 6px; margin-left: -6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-900); letter-spacing: .04em;
}
.adm-group__hint {
  margin: 0 0 14px; font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-500);
}
.adm-group__hint strong { color: var(--ink-900); }
/* 묶음 안은 바탕이 --paper 라 입력칸을 흰색으로 되돌림 — 안 그러면 칸이 안 보임 */
.adm-group .adm-input { background: #FFFFFF; }
.adm-group .adm-field:last-child { margin-bottom: 0; }

/* ── 안내 · 빈 상태 ────────────────────────────────────────── */
/* 읽는 중 띠 — **화면 맨 위에 붙습니다**(자리를 차지하지 않음). 움직임 줄임 설정에서는 멈춰 있는 띠 */
.adm-loadbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  height: 4px; margin: 0; overflow: hidden; background: var(--line);
}
/* 한 번 자랍니다 — 다 읽으면 .is-done 이 붙어 100% 를 채우고 사라집니다 */
.adm-loadbar__fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: var(--ink-900);
  animation: adm-loadbar 2.4s cubic-bezier(.12,.85,.28,1) forwards;
}
@keyframes adm-loadbar {
  from { width: 0; }
  to   { width: 92%; }
}
.adm-loadbar.is-done { opacity: 0; transition: opacity .28s ease-out .12s; }
.adm-loadbar.is-done .adm-loadbar__fill { animation: none; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .adm-loadbar__fill { animation: none; width: 100%; opacity: .3; }
}
/* 화면에는 안 보이고 읽어 주기만 하는 글자 — style.css 의 .sr-only 는 관리자에서 안 켜집니다 */
.adm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 첨부파일 목록(글 편집 화면) */
.adm-files { margin: 0 0 10px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.adm-files li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.adm-files a { text-decoration: underline; text-underline-offset: 3px; }
.adm-files__size { margin-left: auto; color: var(--ink-500); font-size: var(--fs-xs); }

.adm-empty { padding: 44px 16px; text-align: center; color: var(--ink-500); font-size: var(--fs-sm); }
.adm-empty strong { display: block; color: var(--ink-900); font-size: var(--fs-body); margin-bottom: 6px; }

.adm-note {
  border: 1px solid var(--line); border-left: 3px solid var(--brand-amber);
  background: var(--paper); border-radius: 6px; padding: 12px 14px;
  font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-500);
}
.adm-note strong { color: var(--ink-900); }
.adm-note--danger { border-left-color: var(--brand-red); }
.adm-note + .adm-note { margin-top: 10px; }

/* ⚠ 화면 아래에 늘 떠 있는 경고 — **임시 저장소라는 것을 잊지 않도록.** 지우지 마십시오. */
.adm__warn {
  position: sticky; bottom: 0; margin-top: var(--adm-gap);
  background: var(--brand-red); color: #fff; border-radius: 8px;
  padding: 10px 14px; font-size: var(--fs-xs); line-height: 1.6;
}
.adm__warn b { font-weight: 700; }

/* ── 쪽 넘김 ──────────────────────────────────────────────── */
.adm-pager { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 14px; }
.adm-pager button {
  min-width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line-hi);
  background: var(--surface); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.adm-pager button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.adm-pager button:disabled { opacity: .4; cursor: not-allowed; }
.adm-pager span { font-size: var(--fs-xs); color: var(--ink-500); margin: 0 8px; }

/* ── 받은 글 상세 ─────────────────────────────────────────── */
.adm-dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; font-size: var(--fs-sm); margin: 0; }
.adm-dl dt { color: var(--ink-500); font-size: var(--fs-xs); padding-top: 2px; }
.adm-dl dd { margin: 0; white-space: pre-wrap; line-height: 1.7; overflow-wrap: anywhere; }
.adm-dl dd a { color: var(--teal-600); }

/* ── 대문(요약) ───────────────────────────────────────────── */
.adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--adm-gap); }
.adm-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--adm-radius);
  padding: 18px; text-decoration: none; color: inherit; display: block;
}
.adm-card:hover { border-color: var(--line-hi); background: var(--paper); }
/* 셋 다 display: block 필수 — <span> 이라 그냥 두면 한 줄로 붙음 */
.adm-card__k { display: block; font-size: var(--fs-xs); color: var(--ink-500); }
.adm-card__v { display: block; font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; margin-top: 8px; letter-spacing: -.02em; }
.adm-card__s { display: block; font-size: var(--fs-xs); color: var(--ink-500); margin-top: 6px; }

/* ── 로그인 ───────────────────────────────────────────────── */
.adm-login { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 24px; }
.adm-login__box {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--adm-radius); padding: 30px 26px;
}
.adm-login__box img { width: 170px; height: auto; display: block; margin-bottom: 6px; }
.adm-login__box h1 { font-size: var(--fs-h3); margin: 0 0 20px; }
.adm-login__box .adm-form { gap: 14px; }
.adm-login__err { color: var(--brand-red); font-size: var(--fs-xs); }

/* ── 좁은 화면 ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .adm { grid-template-columns: 1fr; grid-template-rows: auto var(--adm-bar) 1fr; grid-template-areas: "rail" "bar" "main"; }
  .adm__rail { padding: 12px 14px; }
  .adm__nav { flex-direction: row; flex-wrap: wrap; align-items: center; }
  /* 좁은 화면에서도 머리글은 남김 — 줄 전체를 차지해 아래 줄들이 한 묶음으로 보임 */
  .adm__navhead { width: 100%; margin: 10px 0 2px; }
  .adm__nav a.is-sub { padding-left: 12px; }
  .adm__railfoot { margin-top: 8px; }
  .adm-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .adm-dl dd { margin-bottom: 10px; }
}