/* ==========================================================================
   admin.css — 관리자 화면(상담 신청서 · SEO 관리) 공통 스타일.
   사이트 본문 CSS 는 쓰지 않고 tokens.css 의 변수만 공유한다.
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-canvas-soft);
  font-feature-settings: 'ss01';
  word-break: keep-all;
}

[hidden] {
  display: none !important;
}

/* ---------- 상단 바 ---------- */
.adm-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-hairline);
}

.adm-bar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--s-md) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-xl);
}

.adm-bar__brand {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-thin);
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.adm-bar__brand b {
  font-weight: var(--fw-regular);
  color: var(--c-primary);
}

.adm-bar__tabs {
  display: flex;
  gap: var(--s-xs);
}

.adm-bar__tab {
  padding: var(--s-sm) var(--s-lg);
  border-radius: var(--r-pill);
  color: var(--c-ink-mute);
  font-size: var(--fs-body-md);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.adm-bar__tab:hover {
  background: var(--c-canvas-soft);
  color: var(--c-ink);
}

.adm-bar__tab.is-active {
  background: var(--c-primary);
  color: #fff;
}

.adm-bar__out {
  margin-left: auto;
  color: var(--c-ink-mute);
  font-size: var(--fs-caption);
  text-decoration: none;
  white-space: nowrap;
}

.adm-bar__out:hover {
  color: var(--c-primary);
}

/* ---------- 레이아웃 ---------- */
.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px var(--gutter) 120px;
}

.login {
  max-width: 420px;
  margin: 10vh auto 0;
}

.hidden {
  display: none !important;
}

h1 {
  margin: 0 0 var(--s-sm);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-thin);
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
}

h2 {
  margin: 0 0 var(--s-lg);
  font-size: var(--fs-heading-md);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-heading-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
}

.sub {
  margin: 0 0 var(--s-xl);
  color: var(--c-ink-mute);
  font-size: var(--fs-body-md);
}

.card {
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  padding: var(--card-pad);
  margin-bottom: var(--s-xl);
  box-shadow: var(--elev-1);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-primary-deep);
  margin-bottom: var(--s-md);
}

/* ---------- 폼 ---------- */
label {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--c-ink-secondary);
  margin: var(--s-lg) 0 var(--s-sm);
}

input[type='text'],
input[type='password'],
input[type='search'],
select,
textarea {
  width: 100%;
  min-height: 40px;
  font: inherit;
  font-size: var(--fs-body-md);
  color: var(--c-ink);
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline-input);
  border-radius: var(--r-sm);
  padding: var(--s-sm) var(--s-md);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.14);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--s-sm) var(--s-lg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font: inherit;
  font-size: var(--fs-button-md);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn:hover {
  background: var(--c-primary-deep);
}

.btn.ghost {
  background: var(--c-canvas);
  color: var(--c-ink-secondary);
  border-color: var(--c-hairline);
}

.btn.ghost:hover {
  background: var(--c-canvas-soft);
  color: var(--c-primary);
}

.btn.sm {
  min-height: 32px;
  padding: 6px var(--s-md);
  font-size: var(--fs-button-sm);
}

.btn.danger {
  background: rgba(234, 34, 97, 0.1);
  color: var(--c-ruby);
  border-color: rgba(234, 34, 97, 0.2);
}

.btn.danger:hover {
  background: rgba(234, 34, 97, 0.16);
}

.status {
  font-size: var(--fs-caption);
  color: var(--c-ink-mute);
}

.status.err {
  color: var(--c-ruby);
}

.status.ok {
  color: var(--c-primary-deep);
}

.hint {
  margin: var(--s-xs) 0 0;
  font-size: var(--fs-micro);
  color: var(--c-ink-mute);
  line-height: 1.6;
}

/* ---------- 도구 모음 ---------- */
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-lg);
  flex-wrap: wrap;
  margin-bottom: var(--s-xl);
}

.toolbar {
  display: flex;
  gap: var(--s-md);
  flex-wrap: wrap;
  margin-bottom: var(--s-lg);
}

.toolbar .search {
  flex: 1;
  min-width: 220px;
}

.toolbar .pick {
  width: 180px;
  flex: none;
}

/* ---------- 표 ---------- */
.tbl-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-tabular);
  letter-spacing: var(--ls-body-tabular);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

thead th {
  font-size: var(--fs-micro-cap);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro-cap);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding: 0 var(--s-md) var(--s-md);
  border-bottom: 1px solid var(--c-hairline);
  white-space: nowrap;
  text-align: left;
}

tbody td {
  padding: var(--s-lg) var(--s-md);
  border-bottom: 1px solid var(--c-hairline);
  vertical-align: top;
}

tbody tr:hover td {
  background: var(--c-canvas-soft);
}

td.num {
  color: var(--c-ink-mute);
  width: 52px;
}

/* 페이지명 — 관리자가 한눈에 알아볼 수 있어야 하는 칸 */
td.pname a {
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-body-md);
  letter-spacing: 0;
}

td.pname a:hover {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

td.pname small {
  display: block;
  margin-top: var(--s-xs);
  font-size: var(--fs-micro);
  color: var(--c-ink-mute);
  letter-spacing: 0;
}

td.cur {
  color: var(--c-ink-mute);
  min-width: 280px;
  line-height: 1.6;
  letter-spacing: 0;
}

td.cur em {
  font-style: normal;
  color: var(--c-ink-mute);
}

td.when {
  color: var(--c-ink-mute);
  white-space: nowrap;
  min-width: 132px;
}

td.name {
  color: var(--c-ink);
  min-width: 90px;
}

td.company {
  color: var(--c-ink-mute);
  min-width: 120px;
}

td.phone {
  white-space: nowrap;
  min-width: 124px;
}

td.msg {
  min-width: 340px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--c-ink-secondary);
  line-height: 1.6;
  letter-spacing: 0;
}

td.act {
  white-space: nowrap;
}

td.act select {
  width: 92px;
  min-height: 32px;
  padding: 5px var(--s-sm);
  font-size: var(--fs-micro);
}

td.act .del {
  margin-left: var(--s-xs);
}

/* ---------- 배지 ---------- */
.badge {
  display: inline-block;
  font-size: var(--fs-micro-cap);
  letter-spacing: var(--ls-micro-cap);
  padding: var(--s-xs) var(--s-sm);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.b-신규 { background: var(--c-primary-subdued); color: var(--c-primary-deep); }
.b-확인 { background: var(--c-canvas-cream); color: var(--c-lemon); }
.b-완료 { background: rgba(83, 58, 253, 0.08); color: var(--c-ink-mute); }
.b-보류 { background: var(--c-canvas-soft); color: var(--c-ink-mute); }
.b-set { background: var(--c-primary-subdued); color: var(--c-primary-deep); }
.b-def { background: var(--c-canvas-soft); color: var(--c-ink-mute); }

#newBadge {
  font-size: var(--fs-caption);
  padding: var(--s-xs) var(--s-md);
  margin-left: var(--s-sm);
  vertical-align: middle;
}

.count {
  color: var(--c-ink-mute);
  font-size: var(--fs-caption);
  margin-top: var(--s-lg);
}

.empty {
  text-align: center;
  color: var(--c-ink-mute);
  padding: 48px 0;
}

/* ---------- 모달 ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--s-xl);
  background: rgba(13, 37, 61, 0.5);
  overflow-y: auto;
}

.modal {
  width: min(560px, 100%);
  background: var(--c-canvas);
  border-radius: var(--r-xl);
  padding: var(--card-pad);
  box-shadow: var(--elev-2);
}

.modal .mpath {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--c-ink-mute);
}

.modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-md);
  margin-top: var(--s-xl);
}

.noidx {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  margin-top: var(--s-lg);
  font-size: var(--fs-body-md);
  color: var(--c-ink-secondary);
}

.noidx input {
  width: auto;
  min-height: 0;
}

@media (max-width: 767px) {
  .adm-bar__inner {
    flex-wrap: wrap;
    gap: var(--s-md);
  }

  .adm-bar__out {
    margin-left: 0;
  }

  .wrap {
    padding: 32px var(--gutter) 80px;
  }
}