/* 굿맨비뇨기과 관리자 — 공통 스타일
 *
 * 색/여백/그림자/라운드는 아래 :root 토큰 한 곳에서만 정의한다. 개별 규칙에
 * 색상값을 직접 적지 말고 토큰을 쓰면 전체 톤을 한 번에 조정할 수 있다.
 * 본문 서체는 layout.php가 CDN에서 불러오는 Pretendard이며, 내려받기에
 * 실패하면 맑은 고딕 등 시스템 한글 서체로 자연스럽게 대체된다.
 */

:root {
    /* 중립색 */
    --c-bg: #f5f6f9;
    --c-surface: #ffffff;
    --c-surface-muted: #f8fafc;
    --c-border: #e6e8ec;
    --c-border-strong: #d6dae1;
    --c-text: #111827;
    --c-text-soft: #4b5563;
    --c-text-muted: #6b7280;
    --c-text-faint: #9ca3af;

    /* 강조색 */
    --c-accent: #2563eb;
    --c-accent-hover: #1d4ed8;
    --c-accent-soft: #eff6ff;
    --c-accent-ring: rgba(37, 99, 235, .18);

    /* 상태색 */
    --c-success: #15803d;
    --c-success-soft: #dcfce7;
    --c-warn: #b45309;
    --c-warn-soft: #fef3c7;
    --c-danger: #b91c1c;
    --c-danger-soft: #fee2e2;
    --c-info: #1d4ed8;
    --c-info-soft: #dbeafe;

    /* 상단 내비게이션 */
    --c-nav: #0f172a;
    --c-nav-text: #cbd5e1;

    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 6px 16px rgba(16, 24, 40, .08);

    --content-width: 1200px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.011em;
    background: var(--c-bg);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; letter-spacing: inherit; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 키보드로 이동할 때만 보이는 포커스 링 — 마우스 클릭에는 나타나지 않는다. */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------- 내비게이션 */

.admin-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-nav);
    background-image: linear-gradient(180deg, #16203a 0%, var(--c-nav) 100%);
    color: #fff;
    box-shadow: 0 1px 12px rgba(15, 23, 42, .18);
}
.admin-nav__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 56px;
}

.admin-nav__brand a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}
.admin-nav__brand a:hover { text-decoration: none; opacity: .9; }
.admin-nav__mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}
.admin-nav__brand-sub { color: var(--c-nav-text); font-weight: 500; }

/* 1차 카테고리로 묶어 항목 수가 줄었으므로 좁은 화면에서는 줄바꿈으로 흘린다.
 * 가로 스크롤 컨테이너로 두면 2차 메뉴(절대 위치)가 잘려 보이지 않는다. */
.admin-nav__menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.admin-nav__menu a {
    padding: 7px 11px;
    border-radius: var(--r-sm);
    color: var(--c-nav-text);
    font-size: 14px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.admin-nav__menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.admin-nav__menu a.is-active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; }

/* 1차 카테고리(그룹) — 누르면 2차 메뉴가 열린다 */
.admin-nav__group { position: relative; }
.admin-nav__group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-nav-text);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.admin-nav__group-toggle:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-nav__group-toggle.is-active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; }

.admin-nav__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: .7;
    transition: transform .15s ease;
}
.admin-nav__group.is-open .admin-nav__caret { transform: rotate(180deg); }

/* 2차 메뉴 — 어두운 내비 위에 뜨는 밝은 카드 */
.admin-nav__submenu {
    display: none;
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 60;
    min-width: 178px;
    padding: 6px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: var(--shadow-md);
}
.admin-nav__group.is-open .admin-nav__submenu { display: block; }
/* 화면 오른쪽 끝에서 열릴 때 밖으로 나가지 않도록 JS가 붙인다 */
.admin-nav__submenu.is-flipped { left: auto; right: 0; }

.admin-nav__menu .admin-nav__submenu a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    color: var(--c-text-soft);
    font-size: 14px;
    white-space: nowrap;
}
.admin-nav__menu .admin-nav__submenu a:hover {
    background: var(--c-surface-muted);
    color: var(--c-text);
    text-decoration: none;
}
.admin-nav__menu .admin-nav__submenu a.is-active {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-weight: 600;
}

.admin-nav__user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--c-nav-text);
    white-space: nowrap;
}
.admin-nav__who { display: flex; align-items: center; gap: 7px; }
.admin-nav__who strong { color: #fff; font-weight: 600; }
.admin-nav__role {
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}
.admin-nav__logout button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    padding: 5px 11px;
    border-radius: var(--r-sm);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.admin-nav__logout button:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .38); }

/* ---------------------------------------------------------------- 본문 골격 */

.admin-main {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 28px 24px 64px;
}
h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}
h2 { font-size: 17px; letter-spacing: -0.015em; }

.flash {
    padding: 12px 14px;
    border-radius: var(--r-md);
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid transparent;
    box-shadow: var(--shadow-xs);
}
.flash--success { background: var(--c-success-soft); color: var(--c-success); border-color: #bbf7d0; }
.flash--error { background: var(--c-danger-soft); color: var(--c-danger); border-color: #fecaca; }

/* ---------------------------------------------------------------- 표 */

/* 표는 그 자체가 카드로 보이게 하고, .table-scroll이나 패널 안에 들어간
 * 표는 테두리가 겹치지 않도록 아래에서 다시 지운다. */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
th, td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    font-size: 14px;
    vertical-align: middle;
}
th {
    background: var(--c-surface-muted);
    font-weight: 600;
    font-size: 13px;
    color: var(--c-text-soft);
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--c-surface-muted); }

/* 목록이 비었을 때 나오는 "…없습니다" 한 칸짜리 행 */
tbody td[colspan] {
    text-align: center;
    color: var(--c-text-faint);
    padding: 36px 14px;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
}
.table-scroll table { min-width: 640px; border: none; border-radius: 0; box-shadow: none; }

/* 수정/등록 화면의 폼도 표와 같은 카드로 보이게 한다. 목록 위 검색줄의 폼은
 * .toolbar 안에 들어 있어 여기에 걸리지 않는다. */
.admin-main > form {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    max-width: 720px;
}

/* ---------------------------------------------------------------- 버튼 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: var(--shadow-xs);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:hover { background: var(--c-surface-muted); text-decoration: none; }
.btn:active { box-shadow: none; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--c-surface); }

.btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn--danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn--danger:hover { background: var(--c-danger); border-color: var(--c-danger); }
.btn--small { padding: 4px 9px; font-size: 12.5px; }

/* ---------------------------------------------------------------- 폼 */

.form-row { margin-bottom: 16px; }
.form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-soft);
    margin-bottom: 6px;
}
.form-row input[type=text], .form-row input[type=password], .form-row input[type=date],
.form-row input[type=tel], .form-row input[type=number], .form-row input[type=email],
.form-row textarea, .form-row select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: 14px;
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--c-text-faint); }
.form-row textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

.form-actions { margin-top: 24px; display: flex; gap: 8px; }
.form-error { color: var(--c-danger); font-size: 13px; margin-top: 6px; }
.hint { color: var(--c-text-muted); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.checkbox-row { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.checkbox-row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--c-accent); }

/* ---------------------------------------------------------------- 툴바 / 뱃지 */

.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.toolbar form { display: flex; gap: 8px; }
.toolbar__title { margin-left: 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.toolbar__spacer { flex: 1; }
.toolbar input[type=text], .toolbar select {
    padding: 8px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: 14px;
    background: var(--c-surface);
    box-shadow: var(--shadow-xs);
}
.toolbar input[type=text]:focus, .toolbar select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-ring);
}

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
}
.badge--on { background: var(--c-success-soft); color: var(--c-success); border-color: #bbf7d0; }
.badge--off { background: #f1f3f5; color: var(--c-text-muted); border-color: #e2e5e9; }
.badge--pending { background: var(--c-warn-soft); color: var(--c-warn); border-color: #fde68a; }
.badge--done { background: var(--c-info-soft); color: var(--c-info); border-color: #bfdbfe; }

/* ---------------------------------------------------------------- 상담 캘린더 */

.calendar { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.calendar th {
    background: var(--c-surface-muted);
    padding: 9px 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--c-border);
}
.calendar td {
    border-bottom: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    vertical-align: top;
    height: 104px;
    padding: 6px;
    font-size: 12px;
    background: var(--c-surface);
}
.calendar td:last-child, .calendar th:last-child { border-right: none; }
.calendar tbody tr:hover { background: transparent; }
.calendar td.is-other-month { background: #fbfcfd; color: var(--c-text-faint); }
.calendar .day-num {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--c-text-soft);
    margin-bottom: 5px;
}
.calendar td.is-today .day-num {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: #fff;
}
.calendar th:nth-child(1), .calendar td:nth-child(1) .day-num { color: #dc2626; }
.calendar th:nth-child(7), .calendar td:nth-child(7) .day-num { color: var(--c-accent); }
.calendar td.is-today:nth-child(1) .day-num,
.calendar td.is-today:nth-child(7) .day-num { color: #fff; }
.calendar .chip {
    display: block;
    padding: 3px 6px;
    margin-bottom: 3px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
    transition: filter .12s ease;
}
.calendar .chip:hover { text-decoration: none; filter: brightness(.96); }
.calendar .chip--pending { background: var(--c-warn-soft); color: var(--c-warn); border-color: #fde68a; }
.calendar .chip--confirmed { background: var(--c-success-soft); color: var(--c-success); border-color: #bbf7d0; }
.calendar .chip--done { background: var(--c-info-soft); color: var(--c-info); border-color: #bfdbfe; }
.calendar .chip--absent { background: var(--c-danger-soft); color: var(--c-danger); border-color: #fecaca; }

/* ---------------------------------------------------------------- 로그인 */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 16px;
}
.login-box {
    width: min(380px, 100%);
    background: var(--c-surface);
    padding: 36px 32px;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}
.login-box h1 {
    text-align: center;
    font-size: 19px;
    margin-bottom: 24px;
}
.login-box .form-actions { margin-top: 22px; }

/* ---------------------------------------------------------------- 방문통계 대시보드 */

.stats-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}
.stats-toolbar__group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.stats-toolbar__icon { display: flex; color: var(--c-text-faint); }
.stats-toolbar__icon svg { width: 16px; height: 16px; }
.stats-toolbar select, .stats-toolbar input[type=date] {
    padding: 7px 11px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: 14px;
    background: var(--c-surface);
    color: var(--c-text);
}
.stats-toolbar select:focus, .stats-toolbar input[type=date]:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.stats-toolbar__group--segmented {
    display: flex;
    background: #eef0f4;
    border-radius: var(--r-md);
    padding: 3px;
    gap: 2px;
}
.stats-toolbar__group--segmented .btn {
    border: none;
    background: transparent;
    border-radius: var(--r-sm);
    color: var(--c-text-soft);
    box-shadow: none;
    font-weight: 500;
}
.stats-toolbar__group--segmented .btn:hover { background: rgba(255, 255, 255, .7); }
.stats-toolbar__group--segmented .btn--primary {
    background: var(--c-surface);
    color: var(--c-text);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}
.stats-toolbar__group--segmented .btn--primary:hover { background: var(--c-surface); }

.stats-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 20px; }
.stats-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.stats-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--c-border-strong);
}
.stats-card__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stats-card__icon svg { width: 18px; height: 18px; }
.stats-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stats-card__label { font-size: 12.5px; color: var(--c-text-muted); white-space: nowrap; }
.stats-card__value {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.stats-card--blue .stats-card__icon { background: var(--c-accent-soft); color: var(--c-accent); }
.stats-card--violet .stats-card__icon { background: #f5f3ff; color: #7c3aed; }
.stats-card--amber .stats-card__icon { background: #fffbeb; color: #d97706; }
.stats-card--rose .stats-card__icon { background: #fff1f2; color: #e11d48; }
.stats-card--emerald .stats-card__icon { background: #ecfdf5; color: #059669; }
.stats-card--cyan .stats-card__icon { background: #ecfeff; color: #0891b2; }

.stats-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.stats-panel h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-text);
}
.stats-panel__icon { display: flex; color: var(--c-text-muted); }
.stats-panel__icon svg { width: 16px; height: 16px; }
.stats-panel .table-scroll { border: none; border-radius: 0; box-shadow: none; }
.stats-panel .hint { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border); }

/* 패널 간격은 그리드 gap이 전부 담당하고(세로로 쌓이는 좁은 화면 포함),
 * 그리드 블록끼리의 간격만 .stats-grid의 margin이 맡는다. */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.stats-grid .stats-panel { margin-bottom: 0; }

.bar-list__row {
    display: grid;
    grid-template-columns: 120px 1fr 112px;
    align-items: center;
    gap: 12px;
    margin-bottom: 11px;
    font-size: 13px;
}
.bar-list__row:last-child { margin-bottom: 0; }
.bar-list__label { color: var(--c-text-soft); word-break: keep-all; }
.bar-list__track { background: #eef0f4; border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.bar-list__fill {
    background: linear-gradient(90deg, #3b82f6, var(--c-accent));
    height: 100%;
    border-radius: var(--r-pill);
    transition: width .3s ease;
}
.bar-list__value { text-align: right; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

.truncate { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-text { word-break: break-all; font-size: 12px; color: var(--c-text-muted); }
.session-row { cursor: pointer; }
.session-row:hover { background: var(--c-accent-soft); }

/* 패널 안쪽 필터 줄. 목록 위 .toolbar와 달리 이미 카드(.stats-panel) 안에 있으므로
 * 배경/테두리 없이 제목 바로 아래 한 줄로만 흐른다. */
.stats-panel__filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: -4px 0 16px;
}
.stats-panel__filters input[type=search],
.stats-panel__filters select {
    padding: 6px 10px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: 13.5px;
    background: var(--c-surface);
    color: var(--c-text);
}
.stats-panel__filters input[type=search] { min-width: 200px; }
.stats-panel__filters input[type=search]:focus,
.stats-panel__filters select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.stats-panel__count { margin-left: auto; font-size: 12.5px; color: var(--c-text-muted); }

/* 표 안의 페이지 주소 링크(새 창으로 열림) — 셀 폭을 넘기지 않게 .truncate가 감싼다. */
.table-scroll td a { color: var(--c-accent); }
.table-scroll td a:hover { text-decoration: underline; }

/* 이벤트 표: 행을 누르면 그 이벤트가 발생한 페이지 목록이 아래에 펼쳐진다. */
.event-row { cursor: pointer; }
.event-row:hover { background: var(--c-accent-soft); }
.event-row.is-open { background: var(--c-accent-soft); }
.row-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 8px;
    border-left: 5px solid var(--c-text-faint);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    vertical-align: middle;
    transition: transform .15s ease;
}
.event-row.is-open .row-caret { transform: rotate(90deg); border-left-color: var(--c-accent); }

.stats-drilldown {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
}
.stats-drilldown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.stats-drilldown__head h3 { font-size: 13.5px; font-weight: 600; margin: 0; }

/* 표 안에서 글자처럼 보이지만 눌리는 버튼(접속 IP로 필터 걸기). */
.link-button {
    padding: 0;
    border: none;
    background: none;
    color: var(--c-accent);
    font: inherit;
    cursor: pointer;
}
.link-button:hover { text-decoration: underline; }
.ip-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 접속 IP 옆의 회선 종류 뱃지. 색은 "위험도"가 아니라 "사람 회선일 가능성"을 뜻한다:
 * 데이터센터(주황)는 사람이 아닐 가능성이 높다는 표시일 뿐, 공격이라는 뜻이 아니다. */
.ip-net {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 500;
    vertical-align: middle;
    background: var(--c-surface-muted);
    color: var(--c-text-muted);
    cursor: help;
}
.ip-net:empty { display: none; }
.ip-net--residential, .ip-net--mobile { background: var(--c-success-soft); color: var(--c-success); }
.ip-net--institution { background: var(--c-info-soft); color: var(--c-info); }
.ip-net--datacenter { background: var(--c-warn-soft); color: var(--c-warn); }
.ip-net--verified { background: var(--c-info-soft); color: var(--c-info); }
.ip-net--warn { background: var(--c-danger-soft); color: var(--c-danger); }
.ip-host { display: block; margin-top: 6px; font-size: 12px; color: var(--c-text-muted); }

a.path-timeline__url:hover { color: var(--c-accent); text-decoration: underline; }

.kv-table { background: transparent; border: none; box-shadow: none; border-radius: 0; }
.kv-table td, .kv-table th { border-bottom: 1px solid var(--c-border); padding: 11px 4px; }
.kv-table tr:last-child td, .kv-table tr:last-child th { border-bottom: none; }
.kv-table tbody tr:hover { background: transparent; }
.kv-table th {
    width: 172px;
    background: transparent;
    font-weight: 600;
    color: var(--c-text-muted);
    text-align: left;
    white-space: nowrap;
}

.path-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--c-border); }
.path-timeline li { position: relative; padding: 6px 0 16px 22px; }
.path-timeline li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 11px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.path-timeline__exit::before { background: var(--c-text-faint); box-shadow: 0 0 0 3px #f1f3f5; }
.path-timeline__time {
    display: inline-block;
    width: 76px;
    color: var(--c-text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.path-timeline__page { font-weight: 600; }
.path-timeline__url { display: block; margin-left: 76px; color: var(--c-text-faint); font-size: 12px; word-break: break-all; }
.path-timeline__duration { display: block; margin-left: 76px; color: var(--c-text-muted); font-size: 12px; }

/* ---------------------------------------------------------------- 반응형 */

@media (max-width: 1100px) {
    .stats-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    body { font-size: 14.5px; }

    .admin-nav__inner {
        flex-wrap: wrap;
        gap: 8px 16px;
        padding: 10px 16px;
    }
    .admin-nav__brand { flex: 1 1 auto; }
    .admin-nav__user { order: 2; }
    .admin-nav__menu {
        order: 3;
        flex: 1 0 100%;
        padding-bottom: 2px;
    }

    .admin-main { padding: 20px 16px 48px; }
    h1 { font-size: 20px; margin-bottom: 16px; }

    .toolbar form { flex-wrap: wrap; }
    .toolbar form input[type=text],
    .toolbar form select { flex: 1 1 140px; }

    .form-actions { flex-wrap: wrap; }
    .form-actions .btn { flex: 1 1 auto; }

    .calendar td { height: 78px; padding: 4px; }
    .calendar .chip { font-size: 11px; padding: 2px 4px; }

    .stats-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stats-card { padding: 14px; }
    .stats-card__value { font-size: 20px; }
    .stats-toolbar { padding: 10px; }
    .stats-toolbar__group { flex: 1 1 100%; }
    .stats-panel { padding: 16px; }

    .stats-panel__filters { gap: 6px; }
    .stats-panel__filters input[type=search] { flex: 1 1 100%; min-width: 0; }
    .stats-panel__filters select { flex: 1 1 44%; }
    .stats-panel__count { margin-left: 0; flex: 1 1 100%; }

    .bar-list__row { grid-template-columns: 96px 1fr 92px; gap: 8px; font-size: 12.5px; }
    .truncate { max-width: 160px; }
    .kv-table th { width: 110px; }
}

/* ---------------------------------------------------------------- 건강정보 글 작성 */

/* 본문 편집기가 들어가므로 다른 폼(720px)보다 넓게 쓴다. */
.admin-main > form.health-form { max-width: 960px; }
.health-form__section {
    margin: 28px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
}
.health-form input[type=datetime-local] {
    padding: 9px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    font-size: 14px;
    background: var(--c-surface);
    color: var(--c-text);
}
/* 편집기 파일을 불러오지 못했을 때만 보이는 HTML 직접 입력 칸 */
.health-form #body_html { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* FAQ·참고 자료처럼 줄을 늘려 가며 적는 입력 */
.repeat-row {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--c-border);
    justify-items: start;
}
.repeat-row--inline { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; align-items: center; }
@media (max-width: 640px) {
    .repeat-row--inline { grid-template-columns: 1fr; }
}

/* 글 형식 점검표 */
.health-check {
    max-width: 960px;
    margin-bottom: 18px;
    padding: 14px 18px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
}
.health-check summary { cursor: pointer; font-weight: 600; }
.health-check ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 6px 16px;
}
.health-check .is-ok { color: var(--c-success); }
.health-check .is-missing { color: var(--c-warn); }