/* 허브(목차) 화면 공용 스타일 — 관리 · 보고서 센터 · 분석관리 · 모돈관리가 같은 표를 본다.
   타일(카드) 목록 + 위 제목 + '← 상위로' 링크. 페이지마다 따로 꾸미던 것을 한곳으로. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; background: var(--bg); color: var(--ink); padding: 20px; }
@media (max-width: 768px) { body { padding: 12px; } }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 0 40px; }   /* 종부일지와 같은 폭 */
.wrap h1, .hub-title {
  font-size: var(--fs-title); font-weight: 700; margin: 12px 0 6px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sub { color: var(--ink-soft); font-size: 0.8125rem; margin-bottom: 24px; line-height: 1.7; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
a.tile { display: block; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, var(--surface), var(--surface-0));
  border: 1px solid var(--surface-3); border-radius: 14px; padding: 20px; transition: border-color .15s; }
a.tile:hover { border-color: rgba(102, 126, 234, .5); }
a.tile .ico { font-size: 1.625rem; }
a.tile h2 { font-size: var(--fs-h2); font-weight: 700; margin: 10px 0 6px; color: var(--ink); }
a.tile p { font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.65; }
.status { margin-top: 18px; background: var(--surface-0); border: 1px solid var(--surface-2);
  border-radius: 12px; padding: 16px 18px; font-size: 0.8125rem; line-height: 1.8; }
.status .k { color: var(--ink-soft); display: inline-block; min-width: 88px; }
.ok { color: var(--good); } .err { color: var(--bad); } .muted { color: var(--ink-dim); }
a.back { color: var(--ink-soft); font-size: 0.8125rem; text-decoration: none; }
a.back:hover { color: var(--ink); }
/* 권한 없음 안내 */
.no-access { margin-top: 24px; background: var(--surface-0); border: 1px solid var(--surface-2); border-radius: 14px;
  padding: 32px 20px; text-align: center; }
.no-access .ico { font-size: 2rem; }
.no-access h2 { font-size: var(--fs-h2); font-weight: 700; margin: 10px 0 6px; }
.no-access p { color: var(--ink-soft); font-size: 0.8125rem; margin-bottom: 14px; }
.no-access a { color: var(--accent-text, var(--accent)); font-size: 0.875rem; text-decoration: none; font-weight: 700; }

/* ── 묶음 (관리 화면) ────────────────────────────────────────────────
   19칸을 하는 일로 나눈 구역. 칸이 하나도 안 보이는 묶음은 이름까지 감춘다
   (권한으로 칸이 빠져도 빈 제목만 남지 않게). */
.hub-group { margin-top: 26px; }
.hub-group[hidden] { display: none !important; }
/* a.tile { display:block } 이 브라우저 기본 [hidden] 규칙을 눌러, 권한 없는 사람에게도
   숨겼어야 할 칸이 그대로 보였다 (타 농장 성적). 여기서 확실히 감춘다. */
a.tile[hidden], .tile[hidden] { display: none !important; }
.hub-gt {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.9375rem; font-weight: 700; color: var(--ink-soft);
  margin: 0 0 10px; -webkit-text-fill-color: currentColor;   /* h1 그라데이션 규칙에 안 걸리게 */
}
.hub-gt::after { content: ""; order: 1; flex: 1; height: 1px; background: var(--surface-3); }
.hub-gt .cnt { order: 2; font-size: 0.75rem; font-weight: 700; color: var(--ink-dim);
  background: var(--surface-2); border-radius: 999px; padding: 1px 9px; }
a.tile h3 { font-size: var(--fs-h2); font-weight: 700; margin: 10px 0 6px; color: var(--ink); }
/* 묶음 안에서는 칸 크기를 고정한다. auto-fit 이면 칸이 둘뿐인 묶음(사람)만 넓어져
   묶음마다 칸 크기가 달라 보인다. */
.hub-group .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* 이미 저장된 기록을 덮어쓰거나 되돌리는 칸 — 보기만 하는 칸과 구별한다 */
.care {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: 0.6875rem; font-weight: 700; white-space: nowrap; vertical-align: 2px;
  color: var(--warn); border: 1px solid var(--warn-30, currentColor); border-radius: 5px;
  background: var(--warn-soft);
}
a.tile:has(.care) { border-color: var(--warn-30, var(--surface-3)); }
.sub .care { vertical-align: 1px; margin-left: 0; }

/* ── 칸 정리 (관리 화면) ─────────────────────────────────────────────
   [칸 정리] → 칸마다 보임·숨김 → [완료]. 숨긴 칸은 맨 아래 '숨긴 칸 N개' 에 접혀 있다.
   정리하는 동안 단추 줄은 위에 붙어 따라온다 (폰은 상단 바 52px 아래). */
.hub-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; min-height: 40px; }
.hub-tools .hub-note { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.5; }
.hub-tools.editing { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 8px 0; box-shadow: 0 1px 0 var(--surface-3); }
@media (max-width: 768px) { .hub-tools.editing { top: 52px; } }
.hub-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 6px 14px; border-radius: 9px;
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--surface-3); }
.hub-btn.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.hub-btn svg { width: 17px; height: 17px; }
.hub-group a.tile { position: relative; }
.hub-eye { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.hub-eye svg { width: 15px; height: 15px; }
a.tile.hub-off { border-style: dashed; }
a.tile.hub-off > :not(.hub-eye) { opacity: 0.5; }   /* 흐리게 하되 '숨김' 글자는 또렷하게 */
a.tile.hub-off .hub-eye { background: var(--surface-3); color: var(--ink); }
.hub-hidden { margin-top: 26px; }
.hub-fold { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px dashed var(--surface-3); background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.9375rem; font-weight: 700; }
.hub-fold span { flex: 1; }
.hub-fold svg { width: 18px; height: 18px; flex: none; }
.hub-fold[aria-expanded="true"] .hub-chev { transform: rotate(180deg); }
.hub-hid-list { margin-top: 8px; display: grid; gap: 6px; }
.hub-hid-list[hidden] { display: none; }
.hub-hid-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 10px; background: var(--surface-0); border: 1px solid var(--surface-2); }
.hub-hid-row a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
.hub-hid-row a svg { width: 18px; height: 18px; flex: none; color: var(--ink-soft); }
.hub-hid-row .hub-btn { min-height: 36px; font-size: 0.8125rem; }