/* 관리자 페이지 — style.css의 토큰을 그대로 써요 */

body.admin { background: var(--surface-2); min-height: 100vh; }
.admin-main { padding-top: 28px; padding-bottom: 80px; }
.admin .header-tools { margin-left: auto; }
.account { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }

.btn-s {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.btn-s:hover { border-color: var(--accent); color: var(--accent); }
.btn-s.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-s.primary:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn-s.danger { border-color: transparent; background: transparent; color: var(--bad); }
.btn-s.danger:hover { background: var(--bad-soft); }
.btn-s.big { height: 48px; padding: 0 24px; font-size: 16px; }
.btn-s:disabled { opacity: .5; cursor: default; }

.gate-box { max-width: 480px; margin: 64px auto; padding: 40px 32px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.gate-box h1 { margin: 0 0 12px; font-size: 22px; }
.gate-box p { margin: 0 0 24px; color: var(--muted); }

.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--seg); }
.seg button { height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(10, 26, 51, .12); }
.admin-tabs { margin-bottom: 24px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.filters, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actions .spacer { flex: 1; }
.filters select, .filters input { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; }

.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 15px; }
.table th { padding: 11px 14px; text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.table tbody tr[tabindex] { cursor: pointer; }
.table tbody tr[tabindex]:hover { background: var(--accent-soft); }
.table .c-date { width: 150px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.table .c-cat { width: 140px; }
.table .c-num { width: 100px; white-space: nowrap; }
.table .c-del { width: 84px; padding-block: 8px; text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.table .c-photo { width: 64px; padding-block: 8px; }
.table .faculty-photo { width: 30px; height: 40px; border-radius: 6px; font-size: 14px; }
.table .msg { padding: 32px; text-align: center; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 14.5px; }
.pager-count { color: var(--muted); }
.pager-pages { display: flex; flex-wrap: wrap; gap: 4px; }
.pager-pages button { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.pager-pages button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.pager-pages button:disabled { opacity: .4; cursor: default; }
.pager-pages span { align-self: center; padding: 0 4px; color: var(--faint); }
.pager select { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; }
.table .sub { display: block; font-size: 13px; color: var(--muted); }

.state { font-weight: 600; font-size: 14px; }
.state.ok { color: var(--good); }
.state.wait { color: var(--warn); }
.state.bad { color: var(--bad); }
.seg .count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; line-height: 20px; text-align: center; }
.app-info { display: grid; gap: 0; margin: 0 0 16px; }
.app-info div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.app-info dt { color: var(--muted); }
.app-info dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.app-info a, .app-files a { color: var(--accent); }
.app-files { margin-bottom: 16px; }
.app-files ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.app-files small { color: var(--muted); }

.panel-box { margin-bottom: 20px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-box h2 { margin: 0 0 6px; font-size: 19px; }
.panel-box .table { border-radius: 10px; }
.hint { margin: 4px 0 12px; font-size: 13.5px; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; font-size: 14px; font-weight: 600; }
.field legend { padding: 0; margin-bottom: 8px; }
.field input, .field textarea, .field select, dialog textarea, .inline-form input, .link-row input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 400;
}
.field textarea, dialog textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus, dialog textarea:focus, .inline-form input:focus, .link-row input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.check { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; white-space: nowrap; cursor: pointer; }
.check small { color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 14px; }
.photo-field { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.photo-field .hint { margin-bottom: 0; }

.link-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; margin-bottom: 8px; }
.icon-x { width: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-x:hover { background: var(--bad-soft); color: var(--bad); }

.admin-list { list-style: none; margin: 16px 0; padding: 0; }
.admin-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.admin-list small { color: var(--muted); }
.inline-form { display: flex; gap: 8px; max-width: 480px; }

dialog { width: min(520px, 100vw - 32px); padding: 22px; border: 0; background: var(--surface); color: var(--text); border-radius: 16px; box-shadow: 0 20px 60px rgba(10, 26, 51, .25); }
dialog.wide { width: min(760px, 100vw - 32px); }
dialog::backdrop { background: rgba(10, 26, 51, .35); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 18px; font-size: 20px; }
dialog .actions { margin-top: 18px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 100; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 12px;
  background: var(--navy); color: #fff; font-size: 15px; box-shadow: 0 8px 24px rgba(10, 26, 51, .25);
}

@media (max-width: 760px) {
  .grid-2, .grid-3, .link-row { grid-template-columns: 1fr; }
  .link-row { padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
  .table { display: block; overflow-x: auto; }
  .table .c-date { width: auto; }
  .admin-tabs { display: flex; overflow-x: auto; }
  .account span { display: none; }
}

/* ---------- 성과 입력 (report.html)과 관리자 성과 탭 ---------- */
.report-head h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
.report-head .hint { max-width: 760px; margin-bottom: 20px; }
.report-rule { flex: 1 1 360px; margin: 0; }
.report-rule b { color: var(--text); }
.chip { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 6px; background: var(--seg); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 20px; vertical-align: 1px; }
.chip.ok { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.chip.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.grid-2 > .full { grid-column: 1 / -1; }
.field .req { font-style: normal; color: var(--bad); }
.field .help, .field .doi-msg { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.doi-row { display: flex; gap: 8px; }
.doi-row input { flex: 1; min-width: 0; }
.table .c-link { width: 1%; white-space: nowrap; }
.table .c-link .actions { flex-wrap: nowrap; gap: 6px; }
.table .c-link .btn-s { height: 32px; padding: 0 10px; font-size: 13.5px; text-decoration: none; }
.panel-box > .toolbar h2 { margin: 0; }
.rep-add { max-width: 640px; margin-top: 14px; }
.rep-add input[name="name"] { max-width: 160px; }
.rep-filters { margin-bottom: 8px; color: var(--muted); }
.table-wrap { overflow-x: auto; margin-bottom: 8px; }
.rep-summary { font-variant-numeric: tabular-nums; }
.rep-summary .c-num { width: auto; text-align: right; }
.rep-list-head { justify-content: flex-start; margin: 24px 0 10px; }
.rep-list-head select { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600; }
.admin-tabs button { flex: none; white-space: nowrap; }
/* 성과 입력: 왼쪽 세로 탭 + 내용 (휴대폰은 위에 가로로 밀어 보는 탭) */
.report-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.report-body .panel-box { margin: 0; }
.side-tabs { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 14px; background: var(--seg); }
.side-tabs button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 42px; padding: 0 14px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer;
}
.side-tabs button:hover { color: var(--text); }
.side-tabs button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(10, 26, 51, .12); }
.side-tabs .count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; line-height: 20px; text-align: center; }
@media (max-width: 760px) {
  .table .c-link .actions { flex-wrap: wrap; }
  .table.report-list { display: table; }
  .report-body { grid-template-columns: 1fr; gap: 16px; }
  .side-tabs { position: static; flex-direction: row; overflow-x: auto; }
  .side-tabs button { flex: none; width: auto; height: 38px; }
  .report-list .c-date { display: none; }
  .rep-add { flex-wrap: wrap; }
  .rep-add input[name="name"] { max-width: none; }
}