/* =========================
   Admin page layout
   ========================= */
/* 관리 로그: 붙여넣기 b/strong·기울임 (Tailwind CDN이 JS에만 있는 클래스를 못 쓸 때·프리플라이트 상속 대비) */
#adminPage .admin-log-entry-view b,
#adminPage .admin-log-entry-view strong,
#adminPage .admin-log-entry-editor b,
#adminPage .admin-log-entry-editor strong {
    font-weight: 700;
}
#adminPage .admin-log-entry-view i,
#adminPage .admin-log-entry-view em,
#adminPage .admin-log-entry-editor i,
#adminPage .admin-log-entry-editor em {
    font-style: italic;
}
#adminPage .admin-log-entry-view u,
#adminPage .admin-log-entry-editor u {
    text-decoration: underline;
}
#adminPage .admin-log-entry-view s,
#adminPage .admin-log-entry-view strike,
#adminPage .admin-log-entry-editor s,
#adminPage .admin-log-entry-editor strike {
    text-decoration: line-through;
}
/* 관리 로그: 표 (붙여넣기 후에도 보이도록 기본 테두리) */
#adminPage .admin-log-entry-view table,
#adminPage .admin-log-entry-editor table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0;
}
#adminPage .admin-log-entry-view th,
#adminPage .admin-log-entry-view td,
#adminPage .admin-log-entry-editor th,
#adminPage .admin-log-entry-editor td {
    border: 1px solid #cbd5e1;
    padding: 0.35rem 0.5rem;
    vertical-align: top;
}
#adminPage .admin-log-entry-view th,
#adminPage .admin-log-entry-editor th {
    font-weight: 700;
    background-color: #f1f5f9;
}
/*
 * 관리자 CTA 첫 클릭이 씹히는 문제 방지.
 * 목록/테이블을 클릭 핸들러 안에서 다시 그리면 브라우저 scroll anchoring이
 * 스크롤을 보정하면서 버튼이 포인터 아래에서 밀려나고, 화면이 흔들린 뒤
 * 두 번째 클릭에야 동작하는 경우가 있다. (진입 직후 첫 클릭만 정상인 패턴)
 */
html:has(#adminPage:not(.hidden)),
body:has(#adminPage:not(.hidden)),
#adminPage {
    overflow-anchor: none;
}
/* 관리자는 웹 전용 — body 의 앱용 안전 영역 여백(상단 상태바 28px·하단 네비 80px)을 걷는다.
   admin.html 은 html.platform-web 을 붙이지 않아 네이티브 기본값이 그대로 남는다.

   !important 는 앱의 키보드 규칙을 이기기 위한 것이다. 앱은 입력에 포커스가 가면
   `body:has(input:focus)` 로 body 여백을 `!important` 로 바꿔 키보드 위 빈 띠를 없앤다.
   관리자도 같은 style.css 를 읽으므로, 입력·체크박스를 누르는 순간 padding-top 이
   0 → 28px 로 뛰고 문서 전체가 28px 내려앉았다. 그 사이 포인터 아래의 요소가
   비켜나 mouseup 이 다른 노드에 떨어지고 — click 이 아예 발생하지 않는다.
   「첫 클릭에는 화면만 움직이고 두 번째에야 눌린다」의 정체다.
   관리자에는 키보드가 없으니 여백을 통째로 고정해 규칙 자체를 무력화한다. */
body:has(#adminPage) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* ── 관리자 셸: 좌측 사이드바 + 상단 바 + 본문 ──
   사이드바는 문서 스크롤과 무관하게 화면 높이만큼 고정(sticky). 본문은 문서 스크롤 하나만 쓴다.
   접힌 상태(.is-collapsed)는 56px 레일 — 하위 메뉴는 sidebar.js 가 플라이아웃으로 띄운다. */
#adminPage .admin-shell {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}
#adminPage .admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 232px;
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    z-index: 40;
    box-sizing: border-box;
}
#adminPage .admin-shell.is-collapsed .admin-sidebar {
    width: 56px;
    flex-basis: 56px;
}
#adminPage .admin-sidebar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 8px 0 18px;
    border-bottom: 1px solid #f1f5f9;
    flex: 0 0 auto;
}
#adminPage .admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
}
#adminPage .admin-sidebar-wordmark {
    font-size: 16px;
    font-weight: 800;
    color: #059669;
    letter-spacing: -0.01em;
}
#adminPage .admin-sidebar-brand-sub {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}
#adminPage .admin-sidebar-mark {
    display: none;
    font-size: 15px;
    font-weight: 800;
    color: #059669;
}
#adminPage #adminEnvBadge {
    margin-left: auto;
}
#adminPage .admin-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #94a3b8;
    flex: 0 0 auto;
}
#adminPage .admin-sidebar-toggle:hover {
    background: #f1f5f9;
    color: #475569;
}
#adminPage .admin-sidebar-toggle svg {
    width: 16px;
    height: 16px;
}
#adminPage .admin-sidebar-toggle--foot {
    display: none;
}
#adminPage .admin-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
}
#adminPage .admin-nav-group {
    display: flex;
    flex-direction: column;
}
#adminPage .admin-nav-group-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-align: left;
    white-space: nowrap;
}
#adminPage .admin-nav-group-btn:hover {
    background: #f8fafc;
    color: #1e293b;
}
#adminPage .admin-nav-group-btn .admin-nav-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #94a3b8;
}
#adminPage .admin-nav-group-btn .admin-nav-chev {
    margin-left: auto;
    width: 14px;
    height: 14px;
    color: #cbd5e1;
    transition: transform 0.15s ease;
}
#adminPage .admin-nav-group.is-open .admin-nav-chev {
    transform: rotate(90deg);
}
#adminPage .admin-nav-group.is-active > .admin-nav-group-btn {
    background: #ecfdf5;
    color: #047857;
}
#adminPage .admin-nav-group.is-active > .admin-nav-group-btn .admin-nav-icon {
    color: #059669;
}
#adminPage .admin-nav-sub {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 6px 0;
}
#adminPage .admin-nav-group.is-open .admin-nav-sub {
    display: flex;
}
#adminPage .admin-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 30px;
    padding: 0 12px 0 25px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    text-align: left;
    white-space: nowrap;
}
#adminPage .admin-nav-item::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
    flex: 0 0 5px;
}
#adminPage .admin-nav-item:hover {
    background: #f8fafc;
    color: #1e293b;
}
#adminPage .admin-nav-item.is-active {
    color: #047857;
    font-weight: 700;
}
#adminPage .admin-nav-item.is-active::before {
    background: #059669;
}
/* 접힌 레일 */
#adminPage .admin-shell.is-collapsed .admin-sidebar-head {
    padding: 0;
    justify-content: center;
}
#adminPage .admin-shell.is-collapsed .admin-sidebar-wordmark,
#adminPage .admin-shell.is-collapsed .admin-sidebar-brand-sub,
#adminPage .admin-shell.is-collapsed #adminEnvBadge,
#adminPage .admin-shell.is-collapsed .admin-sidebar-head .admin-sidebar-toggle,
#adminPage .admin-shell.is-collapsed .admin-nav-label,
#adminPage .admin-shell.is-collapsed .admin-nav-chev,
#adminPage .admin-shell.is-collapsed .admin-nav-sub,
#adminPage .admin-shell.is-collapsed .admin-sidebar-since {
    display: none !important;
}
#adminPage .admin-shell.is-collapsed .admin-sidebar-mark {
    display: inline;
}
#adminPage .admin-shell.is-collapsed .admin-sidebar-nav {
    padding: 12px 8px;
    align-items: center;
}
#adminPage .admin-shell.is-collapsed .admin-nav-group-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
}
#adminPage .admin-shell.is-collapsed .admin-nav-group-btn .admin-nav-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}
#adminPage .admin-shell.is-collapsed .admin-sidebar-toggle--foot {
    display: inline-flex;
    width: 40px;
    height: 40px;
}
#adminPage .admin-sidebar-flyout {
    position: fixed;
    z-index: 60;
    min-width: 168px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#adminPage .admin-sidebar-flyout.hidden {
    display: none;
}
#adminPage .admin-sidebar-flyout-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    padding: 4px 12px 6px 12px;
}
#adminPage .admin-sidebar-flyout .admin-nav-item {
    height: 32px;
    padding-left: 12px;
}
#adminPage .admin-sidebar-flyout .admin-nav-item::before {
    display: none;
}
#adminPage .admin-sidebar-flyout .admin-nav-item.is-active {
    background: #ecfdf5;
}
/* 사이드바 바닥 */
#adminPage .admin-sidebar-foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 14px 16px;
    border-top: 1px solid #f1f5f9;
}
#adminPage .admin-sidebar-since {
    margin: 0;
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
}
#adminPage .admin-sidebar-foot-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
#adminPage .admin-sidebar-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}
#adminPage .admin-sidebar-logout:hover {
    background: #f8fafc;
    color: #1e293b;
}
#adminPage .admin-sidebar-logout svg {
    width: 15px;
    height: 15px;
}
#adminPage .admin-shell.is-collapsed .admin-sidebar-foot {
    padding: 8px;
}
#adminPage .admin-shell.is-collapsed .admin-sidebar-foot-actions {
    flex-direction: column;
}
#adminPage .admin-shell.is-collapsed .admin-sidebar-logout {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
}
/* 본문 열 */
#adminPage .admin-shell-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
#adminPage .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 56px; /* 도구 행이 길면 한 줄 더 내려앉는다 — 잘리지 않게 */
    padding: 6px 28px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    flex: 0 0 auto;
}
#adminPage .admin-topbar-crumb {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 0 0 auto;
}
#adminPage .admin-topbar-group {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}
#adminPage .admin-topbar-group:empty + .admin-topbar-sep {
    display: none;
}
#adminPage .admin-topbar-sep {
    font-size: 12px;
    color: #cbd5e1;
}
#adminPage .admin-topbar-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}
#adminPage .admin-topbar-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}
#adminPage .admin-topbar-actions {
    order: 2;
}
/* 화면 설명 한 줄 — 카드 머리에 있던 안내문을 상단 바로 올린다. 누르면 전문이 펼쳐진다 */
#adminPage .admin-topbar-sub {
    order: 1;
    flex: 1 1 140px;
    min-width: 0;
    cursor: pointer;
}
#adminPage .admin-topbar-sub.is-open {
    order: 5;
    flex-basis: 100%;
    padding-bottom: 4px;
}
#adminPage .admin-topbar-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#adminPage .admin-topbar-sub:hover .admin-topbar-note {
    color: #334155;
}
#adminPage .admin-topbar-sub.is-open .admin-topbar-note {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}
/* 화면별 도구 행 — admin.html 에서 data-topbar-actions 로 적고 sidebar.js 가 상단 바로 옮긴다 */
#adminPage .admin-topbar-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
/* 화면 밖일 때는 [hidden], 화면 안에서 조건부로 숨길 때는 .hidden — 둘 다 display:flex 를 이긴다 */
#adminPage .admin-topbar-tools[hidden],
#adminPage .admin-topbar-tools.hidden,
#adminPage .admin-topbar-sub[hidden],
#adminPage .admin-topbar-actions[hidden],
#adminPage .admin-topbar-note[hidden] {
    display: none !important;
}
#adminPage .admin-topbar-tools-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}
/* ── 상단 바 버튼: 크기·모서리는 한 벌, 색만 역할별로 ─────────────────────────
   화면마다 px-3/px-4/px-5, py-1.5/py-2/py-2.5/py-3 이 섞여 높이가 들쭉날쭉했다.
   .admin-topbar-btn 을 쓰는 버튼은 물론, 아직 tailwind 클래스를 그대로 쓰는
   버튼도 아래 규칙이 같은 높이(32px)·같은 글자(12px)로 맞춘다. */
#adminPage .admin-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
#adminPage .admin-topbar-btn:hover {
    background: #f1f5f9;
}
#adminPage .admin-topbar-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
#adminPage .admin-topbar-btn--primary {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
}
#adminPage .admin-topbar-btn--primary:hover {
    background: #047857;
    border-color: #047857;
}
#adminPage .admin-topbar-btn--blue {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
#adminPage .admin-topbar-btn--blue:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
#adminPage .admin-topbar-btn--ok {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}
#adminPage .admin-topbar-btn--ok:hover {
    background: #d1fae5;
}
#adminPage .admin-topbar-btn--warn {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}
#adminPage .admin-topbar-btn--warn:hover {
    background: #fef3c7;
}
#adminPage .admin-topbar-btn--danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}
#adminPage .admin-topbar-btn--danger:hover {
    background: #fee2e2;
}
/* 아직 tailwind 클래스를 그대로 쓰는 버튼도 같은 치수로 (색·테두리는 그대로 둔다) */
#adminPage .admin-topbar-tools button:not(.admin-topbar-btn):not(.admin-seg-btn):not(.admin-push-history-tab):not(.admin-users-bulk-btn) {
    height: 32px;
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
    line-height: 1;
    border-radius: 8px;
    white-space: nowrap;
}
/* 묶음 안에 든 작은 버튼(세그먼트·기록 구분 탭·일괄 작업)은 한 단계 작게 */
#adminPage .admin-topbar-tools .admin-seg-btn,
#adminPage .admin-topbar-tools .admin-push-history-tab,
#adminPage .admin-topbar-tools .admin-users-bulk-btn {
    height: 26px;
    min-height: 26px;
    padding: 0 10px;
    font-size: 11px;
    line-height: 1;
    border-radius: 6px;
}
/* 도구 행 안의 입력칸도 버튼과 같은 높이로 */
#adminPage .admin-topbar-tools input[type="search"],
#adminPage .admin-topbar-tools input[type="text"],
#adminPage .admin-topbar-tools select {
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
}
#adminPage .admin-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1480px; /* 넓은 모니터에서 w-full 표의 열이 늘어지지 않게 — 왼쪽 정렬 */
    padding: 20px 28px 40px 28px;
    box-sizing: border-box;
}
#adminPage .admin-tab-content {
    margin-top: 0;
}
/* 세그먼트 컨트롤 (툴바용) */
#adminPage .admin-seg {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
#adminPage .admin-seg-btn {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}
#adminPage .admin-seg-btn:hover {
    color: #1e293b;
}
#adminPage .admin-seg-btn.is-on {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
/* 사용자 관리: 일괄 작업 바 — 선택이 없으면 회색으로 남아 있다 */
#adminPage .admin-users-bulk-bar {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}
#adminPage .admin-users-bulk-bar.is-empty {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}
#adminPage .admin-users-toolbar-inner .admin-users-bulk-bar.is-empty .admin-users-bulk-btn {
    opacity: 0.55;
    cursor: not-allowed;
}
/* 사용자 관리: 선택 시 일괄 작업 바의 버튼 (툴바 공통 버튼 규칙보다 앞선다) */
#adminPage .admin-users-toolbar-inner .admin-users-bulk-btn {
    height: 24px;
    padding: 0 8px;
    border-radius: 5px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
#adminPage .admin-users-toolbar-inner .admin-users-bulk-btn:hover {
    background: #f8fafc;
}
#adminPage .admin-users-toolbar-inner .admin-users-bulk-btn--danger {
    color: #b91c1c;
    border-color: #fecaca;
}
#adminPage .admin-users-toolbar-inner .admin-users-bulk-btn--danger:hover {
    background: #fef2f2;
}
/* 표 안의 태그 칩 (모먼트 관리 등) */
#adminPage .admin-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    max-width: 180px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 축별 칸(어떻게·어디서·무엇을·누구와)에 홀로 앉은 칩은 칸 폭을 넘지 않는다 — 전문은 title */
#adminPage td > .admin-chip {
    max-width: 100%;
}
/* 무엇을 칸 — 메뉴 이름은 길어서 자르지 않고 줄을 바꾼다 */
#adminPage .admin-chip--wrap {
    height: auto;
    min-height: 22px;
    padding: 3px 8px;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
/* 무엇을 칸 — 카테고리 칩 한 줄, 먹은 것은 배경 없는 글자로 다음 줄 */
#adminPage .admin-what-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
#adminPage .admin-what-head {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
}
#adminPage .admin-what-head > .admin-chip {
    max-width: 100%;
    min-width: 0;
}
#adminPage .admin-what-menu {
    font-size: 12px;
    line-height: 1.35;
    color: #334155;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* 사진 분석(AI)이 채운 메뉴 표시 — 카테고리 칩 옆 카메라 */
#adminPage .admin-what-ai {
    display: inline-flex;
    flex-shrink: 0;
    color: #64748b;
    cursor: help;
}
/* 메뉴 글자 앞에 붙을 때는 글자 흐름 안에 선다 */
#adminPage .admin-what-menu > .admin-what-ai {
    vertical-align: -3px;
    margin-right: 3px;
}
#adminPage .admin-chip--meal {
    background: #ecfdf5;
    color: #047857;
}
/* 대시보드 월 헤더 접기 버튼 */
#adminPage .js-dash-month-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    border-radius: 4px;
    color: #94a3b8;
    vertical-align: middle;
}
#adminPage .js-dash-month-toggle:hover {
    background: #e2e8f0;
    color: #334155;
}
#adminPage .js-dash-month-toggle svg {
    width: 11px;
    height: 11px;
    transition: transform 0.15s ease;
}
#adminPage th.is-month-collapsed .js-dash-month-toggle svg {
    transform: rotate(-90deg);
}
/*
 * 트렌드 표의 합계 열(「7일 합」·월 합계) 연회색.
 * 예전에는 슬레이트 100 으로 덮어 칠해, 색이 있는 행(끼니는 amber, 기록 시각은 sky)을
 * 지나갈 때도 흰 행과 똑같은 회색이 되어 행의 색이 끊겼다. 색을 덮는 대신 얹는다 —
 * 행의 제 색 위에 회색 한 겹이 올라가므로 겹치는 자리는 자연히 더 짙어진다.
 * background-image 로 얹어서 행의 background-color(호버 포함)를 건드리지 않는다.
 */
#adminPage #adminDashboardStatsTable td.js-dash-sum-td {
    background-image: linear-gradient(rgba(51, 65, 85, 0.12), rgba(51, 65, 85, 0.12));
}
/*
 * 트렌드 표: 월·주 머리를 고정하고 표 안에서 세로로 스크롤한다.
 * 가로 스크롤 상자(#dashboardTrendTableScroll)가 이미 스크롤 컨테이너라, 그 안의 sticky 는
 * 문서가 아니라 이 상자를 기준으로 붙는다. 그래서 상자에 높이를 줘야 세로 sticky 가 작동한다.
 * 항목·전체 두 열은 이미 가로로 고정돼 있어, 머리의 그 두 칸은 가로·세로 양쪽으로 붙는다.
 */
/* 패널이 화면 높이에 딱 맞아야 문서 쪽 스크롤이 생기지 않는다.
   문서가 스크롤되면 표가 상단 바(56px) 밑으로 밀려 들어가 고정한 머리가 가려진다.
   트렌드 화면에서는 표가 세로를 최대한 쓰도록 아래 여백을 걷는다 (읽을 것이 표뿐이다).
   빼는 값 = 상단 바(설명을 펼치면 커지므로 sidebar.js 가 재서 넣는다) + 본문 위 여백 20 + 아래 숨 12 */
#adminPage .admin-main:has(#dashboard-panel-trend:not(.hidden)) {
    padding-bottom: 12px;
}
/* 주차 열이 계속 늘어나는 표(트렌드·페이지별)는 1480px 상한을 풀어 화면 폭을 다 쓴다.
   상한이 남아 있으면 넓은 모니터에서도 오른쪽이 비고 표 안에 가로 스크롤이 생긴다. */
#adminPage .admin-main:has(#dashboard-panel-trend:not(.hidden)),
#adminPage .admin-main:has(#dashboard-panel-page:not(.hidden)) {
    max-width: none;
}
#adminPage #dashboard-panel-trend:not(.hidden) {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--admin-topbar-h, 56px) - 2rem);
    min-height: 18rem;
    margin-bottom: 0;
}
#adminPage #dashboardTrendTableScroll {
    flex: 1 1 auto;
    min-height: 0;
}
#adminPage #adminDashboardStatsTable thead tr {
    /* 아래로 지나가는 행이 비쳐 보이지 않게 — 머리 칸의 반투명 배경이 이 위에 얹힌다 */
    background-color: #f8fafc;
}
#adminPage #adminDashboardStatsTable thead th {
    position: sticky;
    top: 0;
    z-index: 35;
}
/* 둘째 줄(주차)은 첫 줄(월) 높이만큼 내려 붙는다 — 높이는 dashboard.js 가 재서 넣는다 */
#adminPage #adminDashboardStatsTable #dashboardHeadRow2 th {
    top: var(--dash-head-row1-h, 27px);
}
/* 왼쪽으로도 고정되는 「항목」·「전체」 머리 칸은 가장 위층 */
#adminPage #adminDashboardStatsTable thead th[rowspan] {
    z-index: 45;
}
@media (max-width: 900px) {
    #adminPage .admin-topbar,
    #adminPage .admin-main {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* UI가이드: 다른 관리자 탭과 동일하게 문서(페이지) 스크롤 하나만 사용.
   내부 overflow/고정 높이로 이중 스크롤·잘림을 만들지 않는다.
   display:flex 가 .hidden 보다 특이성이 높지 않도록 :not(.hidden) / .hidden 분리. */
#adminPage #admin-tab-content-uiGuide.admin-ui-guide.hidden {
    display: none !important;
}
#adminPage #admin-tab-content-uiGuide.admin-ui-guide:not(.hidden) {
    display: block;
    margin-top: 0;
    padding-bottom: 2rem;
}
#adminPage #admin-tab-content-uiGuide .admin-ui-guide-panel {
    display: block;
    overflow: visible;
    min-height: 0;
}
#adminPage #admin-tab-content-uiGuide .admin-ui-guide-panel.hidden {
    display: none !important;
}
#adminPage #admin-tab-content-uiGuide .admin-ui-guide-embed {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow: visible !important;
    position: relative;
}
/* 시안 허브 · 팝업 · 플로우 · 팔레트: 콘텐츠 자연 높이 → 페이지 스크롤 */
#adminPage #admin-tab-content-uiGuide #uiGuideHubMount.ui-guide-hub,
#adminPage #admin-tab-content-uiGuide #uiGuidePopupMount,
#adminPage #admin-tab-content-uiGuide #uiGuidePopupMount.popup-inventory,
#adminPage #admin-tab-content-uiGuide #uiGuideFlowMount,
#adminPage #admin-tab-content-uiGuide #uiGuideFlowMount.screen-flow,
#adminPage #admin-tab-content-uiGuide #uiGuidePaletteMount.ui-guide-shadow-host {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}
/* 허브 폰 미리보기: 시안 폰 비율에 맞춘 고정 프레임 (내부 화면만 스크롤) */
#adminPage #admin-tab-content-uiGuide .ugh-phone.ui-guide-shadow-host {
    width: min(100%, 390px) !important;
    height: min(844px, calc(100dvh - 9.5rem)) !important;
    min-height: 640px !important;
    max-height: min(844px, calc(100dvh - 9.5rem)) !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
}
/* 와이드 시안 패널 */
#adminPage #admin-tab-content-uiGuide .ui-guide-hub.is-wide-preview .ugh-phone.ui-guide-shadow-host {
    width: 100% !important;
    max-width: 1100px !important;
    height: min(900px, calc(100dvh - 10rem)) !important;
    min-height: 560px !important;
    max-height: min(900px, calc(100dvh - 10rem)) !important;
    overflow: auto !important;
    border-radius: 16px !important;
}
/* 모달 미리보기 */
#adminPage #admin-tab-content-uiGuide .ugh-modal-preview.ui-guide-shadow-host {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    border-radius: 0 !important;
}
#adminPage #admin-tab-content-monitoring > .space-y-4,
#adminPage #admin-tab-content-alerts > .flex.flex-col.gap-4,
#adminPage #admin-tab-content-content > .flex.flex-col.gap-4 {
    gap: 0.35rem;
}
#adminPage #admin-tab-content-monitoring .monitoring-main-section .p-6,
#adminPage #admin-tab-content-alerts .content-main-section .p-6,
#adminPage #admin-tab-content-content .content-main-section .p-6 {
    padding: 0.7rem !important;
}
/* 사용자 탭: 관리 툴바 — 상단 바에 얹힌다 */
#adminPage .admin-users-toolbar-inner {
    gap: 0.5rem;
    align-items: center;
}
/* 사용자 테이블: 일반 표시 (thead → tbody 순서) */
#adminPage #adminUsersTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed; /* 열 폭은 머리행이 정한다 — 긴 이메일·UID 는 셀 안 고정폭 블록이 자른다 */
}
#adminPage .admin-users-thead {
    background: #f8fafc;
}
#adminPage .admin-users-thead th {
    background: #f8fafc;
    vertical-align: middle;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    letter-spacing: -0.012em;
}
#adminPage #adminUsersTable thead th .line-clamp-2,
#adminPage #adminUsersTable thead th > span {
    font-weight: 600;
    line-height: 1.4;
}
/* 정렬 버튼: 헤더 셀 안에서 정돈된 클릭 영역 */
#adminPage #adminUsersTable .admin-users-sort {
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 0.375rem;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
#adminPage #adminUsersTable .admin-users-sort:hover {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.85);
}
#adminPage #adminUsersTable .admin-users-sort:focus-visible {
    outline: 2px solid #34d399;
    outline-offset: 1px;
}
#adminPage #adminUsersTable .admin-users-sort .admin-users-sort-indicator {
    display: inline-block;
    vertical-align: 0.05em;
    min-width: 0.875rem;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0;
}
#adminPage #adminUsersTable tbody td {
    vertical-align: middle;
}
/* 사용자 테이블: 번호·이메일 패딩 축소, 닉네임(4열)·활동제한(8) 폭은 admin.html·users.js와 동기 */
#adminPage #adminUsersTable th:nth-child(2),
#adminPage #adminUsersTable th:nth-child(3),
#adminPage #adminUsersTable td:nth-child(2),
#adminPage #adminUsersTable td:nth-child(3) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
#adminPage #adminUsersTable th:nth-child(2),
#adminPage #adminUsersTable td:nth-child(2) {
    min-width: 0;
    max-width: 3.25rem;
}
#adminPage #adminUsersTable th:nth-child(3),
#adminPage #adminUsersTable td:nth-child(3) {
    min-width: 0;
    max-width: 11rem;
}
#adminPage #adminUsersTable th:nth-child(4),
#adminPage #adminUsersTable td:nth-child(4) {
    min-width: 6.5rem;
    max-width: 9.75rem;
}
#adminPage #adminUsersTable th:nth-child(8),
#adminPage #adminUsersTable td:nth-child(8) {
    min-width: 8rem;
    max-width: 11rem;
    width: auto;
}
#adminPage #adminUsersTable th:nth-child(11),
#adminPage #adminUsersTable td:nth-child(11) {
    min-width: 3.25rem;
    max-width: 4rem;
    width: auto;
}

/* 관리자 대시보드 > 페이지별 (usageDaily) 테이블: 짙은 보더, 행 단위 줄무늬, 7일 합 열 강조 */
#adminDashboardPageUsageTable th,
#adminDashboardPageUsageTable td {
    border-color: #94a3b8 !important;
}
#adminDashboardPageUsageTable thead th {
    background-color: #e8eef4;
}
#adminDashboardPageUsageTable thead tr:first-child th {
    border-bottom-color: #94a3b8 !important;
}
#adminDashboardPageUsageTable #pageDashboard7dSumHead {
    background-color: #cbd5e1 !important;
    color: #334155;
}
#adminDashboardPageUsageTable tbody tr:nth-child(odd) td {
    background-color: #ffffff;
}
#adminDashboardPageUsageTable tbody tr:nth-child(even) td {
    background-color: #f1f5f9;
}
#adminDashboardPageUsageTable tbody tr:nth-child(odd) td[data-page-dash-7block-start] {
    background-color: #e2e8f0;
}
#adminDashboardPageUsageTable tbody tr:nth-child(even) td[data-page-dash-7block-start] {
    background-color: #cbd5e1;
}
#adminDashboardPageUsageTable tbody tr:hover td {
    background-color: #e2e8f0 !important;
}
#adminDashboardPageUsageTable tbody tr:hover td[data-page-dash-7block-start] {
    background-color: #94a3b8 !important;
    color: #0f172a;
}

/*
 * 구분 셀 색띠 — 53행짜리 표에서 묶음 경계를 잡아 준다.
 * 구분 이름이 셀에 그대로 적혀 있으니 색은 정체성이 아니라 덩어리 표시다. 그래서 구분마다
 * 고유색이 아니라 4톤을 돌려 쓴다 (js/admin/dashboard.js computePageUsageSectionTones).
 * 위쪽 border-color 일괄 !important 를 이겨야 해서 여기도 !important 를 쓴다.
 * hover 규칙이 더 구체적이라 마우스를 올리면 기존대로 행 전체가 강조된다.
 */
#adminDashboardPageUsageTable tbody td[data-usage-tone] {
    border-left-width: 4px;
    border-left-style: solid;
}
#adminDashboardPageUsageTable tbody td[data-usage-tone='1'] {
    background-color: #e5effa !important;
    border-left-color: #2a78d6 !important;
}
#adminDashboardPageUsageTable tbody td[data-usage-tone='2'] {
    background-color: #fdede7 !important;
    border-left-color: #eb6834 !important;
}
#adminDashboardPageUsageTable tbody td[data-usage-tone='3'] {
    background-color: #e4f5ef !important;
    border-left-color: #1baf7a !important;
}
#adminDashboardPageUsageTable tbody td[data-usage-tone='4'] {
    background-color: #e9e7f4 !important;
    border-left-color: #4a3aa7 !important;
}
/* 묶음이 바뀌는 행에만 굵은 가로선 — 색띠와 함께 경계를 두 번 말해 준다 */
#adminDashboardPageUsageTable tbody tr[data-usage-section-start] > td {
    border-top: 2px solid #64748b !important;
}
/* 한 구분 안에서 카드 종류(item)가 바뀌는 자리 — 구분 경계보다 한 단계 옅게 */
#adminDashboardPageUsageTable tbody tr[data-usage-item-start] > td {
    border-top: 2px solid #94a3b8 !important;
}

/* 관리자 > AI > AI 식단분석: 목록·상세 독립 스크롤 */
#adminPage #ai-main-aiDietReports .admin-ai-diet-panels {
    min-height: 0;
}
#adminPage #ai-main-aiDietReports .admin-ai-diet-panel-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 10rem;
}
@media (min-width: 1024px) {
    #adminPage #ai-main-aiDietReports .admin-ai-diet-panel-scroll {
        max-height: calc(100vh - 17.5rem);
    }
}
@media (max-width: 1023px) {
    #adminPage #ai-main-aiDietReports #aiDietReportsList.admin-ai-diet-panel-scroll {
        max-height: min(40vh, 22rem);
    }
    #adminPage #ai-main-aiDietReports #aiDietReportsDetail.admin-ai-diet-panel-scroll {
        max-height: min(55vh, 32rem);
    }
}

/* 콘텐츠 팝업: 이미지 좌우 꽉 채움 (박스 폭 100%), 세로는 비율 유지 */
.content-popup-images {
    margin-left: 0;
    margin-right: 0;
}
.content-popup-images img {
    width: 100%;
    max-height: 70vh;
    height: auto;
    object-fit: contain;
    display: block;
    vertical-align: top;
}

/* 콘텐츠 팝업 하단 — Soft Mint (밝은 면 + 초록 CTA) */
.content-popup-footer {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-top: 1px solid var(--line);
}
.content-popup-footer-nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-bottom: 1px solid var(--line);
}
.content-popup-footer-actions {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.content-popup-footer-seg {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.85rem 0.5rem;
    min-height: 3.35rem;
    text-align: center;
    color: var(--ink);
    background: var(--card);
    border: none;
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.content-popup-footer-seg:last-child {
    border-right: none;
}
.content-popup-footer-seg--action {
    min-height: 4.35rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.content-popup-footer-label {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
}
.content-popup-footer-hint {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--muted);
    max-width: 11rem;
}
.content-popup-footer-seg:hover:not(:disabled) {
    background: var(--page);
}
.content-popup-footer-seg:active:not(:disabled) {
    background: var(--green-soft);
}
.content-popup-footer-seg:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}
.content-popup-footer-close {
    background: var(--cta-mint-grad);
    color: #fff;
    box-shadow: var(--cta-mint-shadow);
}
.content-popup-footer-close .content-popup-footer-label {
    color: #fff;
}
.content-popup-footer-close .content-popup-footer-hint {
    color: rgba(255, 255, 255, 0.82);
}
.content-popup-footer-close:hover:not(:disabled) {
    filter: brightness(1.02);
}
.content-popup-footer-close:active:not(:disabled) {
    filter: brightness(0.96);
}

.content-popup-inner { position: relative; }
/* 단일 팝업일 때 숫자만 숨기고 바는 공간 유지 (Tailwind .hidden 사용 금지) */
.content-popup-counter-bar.popup-counter-empty .content-popup-counter-text { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════
   기록 시트 — 디자인 시스템 (위계: 핵심 입력 › 부가 › 메모)
   ═══════════════════════════════════════════════════════════ */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) {
    --entry-accent: var(--green);
    --entry-accent-dark: var(--green-deep);
    --entry-accent-soft: var(--green-soft);
    --entry-accent-ring: rgb(60 184 137 / 0.22);
    --entry-surface: #ffffff;
    /* 본문 캔버스(page-deep) ↔ 필드 흰면 ↔ 보조 밴드 — 대비는 분명하되 슬레이트 톤은 쓰지 않음 */
    --entry-surface-body: var(--page-deep, #faf6f2);
    --entry-surface-muted: #f5f1eb;
    --entry-surface-band: #f3efe8;
    --entry-surface-subtle: var(--green-soft);
    --entry-text-primary: var(--ink);
    --entry-text-secondary: var(--ink-2);
    --entry-text-muted: var(--muted);
    /* placeholder만 muted보다 한 톤 연하게 */
    --entry-placeholder: #b0a89e;
    --entry-border: var(--line);
    --entry-border-soft: var(--line);
    --entry-border-row: var(--line);
    --entry-input-bg: #fff;
    --entry-input-bg-focus: #ffffff;
    --entry-radius: 0.75rem;
    --entry-radius-lg: 1rem;
    --entry-form-divider: 1px solid var(--entry-border-soft);
    --entry-form-label-w: 7.25rem;
    --entry-form-row-gap: 0.625rem;
    --entry-form-core-gap: 0;
    --entry-form-input-pl: 0.5rem;
    --entry-form-core-input-pl: 0;
    --entry-form-content-offset: calc(var(--entry-form-label-w) + var(--entry-form-row-gap) + var(--entry-form-input-pl));
    --entry-form-row-h: 2.625rem;
    --entry-action-icon: #76a797;
}