/* 백호(baekho) 앱 스타일 — 모바일 우선(standards/02 §6-1) · 색은 var(--hh-*) 만 · 터치 타깃 ≥44px · 입력 16px(iOS 확대 방지) */
* { box-sizing: border-box; }
/* `height:100%` 금지 — `* { box-sizing: border-box }` 와 만나면 body 의 아래 여백이 **높이 안쪽으로 먹혀** 공간을 예약하지 못한다.
   그러면 내용이 화면보다 길어지는 순간 마지막 줄이 고정 내비 밑으로 들어가 잘린다(2026-09-22 실측 gap=-23px · 사용자 보고 "모바일과 웹에서 UI 짤림"). */
html, body { margin: 0; min-height: 100%; }
body { background: var(--hh-bg); color: var(--hh-text); font: 15px/1.5 system-ui, -apple-system, "Noto Sans KR", sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
button { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--hh-border); background: var(--hh-card); color: var(--hh-text); font: inherit; font-size: 15px; cursor: pointer; touch-action: manipulation; }
button.primary { background: var(--hh-accent); border-color: var(--hh-accent); color: var(--hh-on-accent); font-weight: 700; }
button.danger { color: var(--hh-danger); border-color: var(--hh-danger); }
button.on { border-color: var(--hh-accent); color: var(--hh-accent); font-weight: 700; background: var(--hh-tint-accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--hh-border); background: var(--hh-surface); color: var(--hh-text); width: 100%; }
input:focus, select:focus { outline: none; border-color: var(--hh-accent); box-shadow: 0 0 0 3px var(--hh-tint-accent); }
label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hh-muted); margin: 0 2px 6px; }
a { color: var(--hh-accent); }
.hidden { display: none !important; }
.muted { color: var(--hh-muted); }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1 1 auto; }
.grow { flex: 1 1 auto; }
.card { background: var(--hh-surface); border: 1px solid var(--hh-border); border-radius: 14px; padding: 14px; margin: 10px 0; box-shadow: 0 1px 2px var(--hh-shadow); }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.field { margin-bottom: 12px; }
.err { padding: 10px 12px; border-radius: 10px; background: var(--hh-tint-danger); color: var(--hh-danger); font-weight: 700; font-size: 13.5px; margin: 8px 0; }
.note { padding: 10px 12px; border-radius: 10px; background: var(--hh-tint-accent); color: var(--hh-text); font-size: 13.5px; margin: 8px 0; }

/* 상단 바 · 채널 탭 */
.top { position: sticky; top: 0; z-index: 5; background: var(--hh-surface); border-bottom: 1px solid var(--hh-border); padding: 8px 12px calc(8px); display: flex; align-items: center; gap: 8px; }
.brand { font-weight: 900; letter-spacing: -.02em; font-size: 17px; color: var(--hh-accent); }
.brand small { color: var(--hh-muted); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.top .sp { flex: 1; }
.icon-btn { min-width: 44px; width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 20px; height: 20px; }
.chans { display: flex; gap: 6px; padding: 8px 12px 0; overflow-x: auto; }
.chans button { flex: 1 0 auto; }

/* 본문 */
main { padding: 8px 12px; max-width: 100%; }
.view { display: none; }
.view.on { display: block; }
.video-wrap { position: relative; background: var(--hh-video-bg); border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.video-wrap video { width: 100%; height: 100%; display: block; background: var(--hh-video-bg); }
.video-wrap .overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--hh-on-accent); background: var(--hh-overlay); font-weight: 700; }
.video-wrap .overlay { white-space: pre-line; word-break: break-word; font-size: 14px; line-height: 1.5 }   /* 진단 줄바꿈 표시(2026-09-22) */
.video-wrap .badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 6px; background: var(--hh-overlay); color: var(--hh-on-accent); font-size: 12px; font-weight: 700; }
.status { font-size: 12.5px; color: var(--hh-muted); margin: 8px 2px; min-height: 18px; }

/* 하단 내비 */
nav.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; background: var(--hh-surface); border-top: 1px solid var(--hh-border); padding-bottom: env(safe-area-inset-bottom); }
nav.bottom button { flex: 1; border: 0; border-radius: 0; background: transparent; min-height: 56px; font-size: 12px; color: var(--hh-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
nav.bottom button svg { width: 22px; height: 22px; }
nav.bottom button.on { color: var(--hh-accent); font-weight: 700; }

/* 타임라인 막대 */
.tl { position: relative; height: 56px; background: var(--hh-card); border: 1px solid var(--hh-border); border-radius: 10px; overflow: hidden; touch-action: none; user-select: none; }
.tl .rec { position: absolute; top: 18px; bottom: 6px; background: var(--hh-rec); border-radius: 2px; }
.tl .ev { position: absolute; top: 4px; min-width: 3px; height: 12px; background: var(--hh-event); border-radius: 2px; }

/* 사건 목록 — 가족이 쓰는 화면이라 줄 하나에 "시각 · 종류 · 지속" 만(계획서 HH_EVENTS Phase E1) */
.evlist { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.evlist .evrow { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: flex-start; text-align: left; padding: 0 12px; }
.evlist .evrow b { font-variant-numeric: tabular-nums; font-size: 16px; }
.evlist .evrow span { color: var(--hh-muted); }
.evlist .evrow i { margin-left: auto; font-style: normal; color: var(--hh-muted); font-size: 13px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chips button { min-height: 40px; font-size: 14px; }
.tl .cur { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--hh-accent); box-shadow: 0 0 0 1px var(--hh-surface); }
.tl .lab { position: absolute; top: 2px; font-size: 10px; color: var(--hh-faint); transform: translateX(-50%); }
.tl .lab.first { transform: none; }
.tl.days { height: auto; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tl.days button { min-height: 40px; min-width: 40px; padding: 0 10px; font-size: 13px; }
.ctl { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.ctl button { flex: 1 1 auto; }
.timebox { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.timebox .now { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* PTZ 패드 */
.ptz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 260px; margin: 8px auto; }
.ptz button { aspect-ratio: 1; min-height: 56px; font-size: 20px; }
.zoom { display: flex; gap: 6px; justify-content: center; }

/* 목록 */
.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--hh-border); border-radius: 12px; background: var(--hh-card); }
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .t span { color: var(--hh-muted); font-size: 12.5px; }
.bar { height: 8px; background: var(--hh-border); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--hh-accent); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--hh-tint-accent); color: var(--hh-accent); }
.pill.off { background: var(--hh-tint-danger); color: var(--hh-danger); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--hh-border); vertical-align: top; }
.tablewrap { overflow-x: auto; }

/* 로그인 */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--hh-bg); }
.login .box { width: 100%; max-width: 400px; }
.login .sub { color: var(--hh-muted); margin: 0 0 22px; }
.login h2 { margin: 0 0 4px; font-size: 24px; }
.login button.primary { width: 100%; margin-top: 6px; }
.login .end { text-align: center; padding: 24px 0; color: var(--hh-muted); }

@media (min-width: 720px) {
  main { max-width: 900px; margin: 0 auto; }
  .chans { max-width: 900px; margin: 0 auto; }
}

/* 홈 타일 — 가족이 처음 보는 화면. 큰 단추 하나가 앱 하나(규약 03 §2) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; min-height: 104px;
        background: var(--hh-surface); border: 1px solid var(--hh-border); border-radius: 14px; }
.tile-ic svg { width: 34px; height: 34px; }
.tile-nm { font-size: 16px; font-weight: 700; }
.tile-st { font-size: 12px; color: var(--hh-muted); }

/* 하단바는 **앱 안에서만** 나온다 — 홈에서는 없다(2026-09-23). 없을 때는 아래 여백도 없앤다. */
#app.no-nav main { padding-bottom: 12px; }
body:has(#app.no-nav) { padding-bottom: 0; }   /* 하단바가 없으면 64px 자리도 비운다(로그인·홈) */

/* 서버 그림(로고) — 홈 위쪽. 관리자가 바꿀 수 있다(standards/02 §9-5) */
.logo { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; vertical-align: middle; }
.logo.lg { width: 64px; height: 64px; border-radius: 12px; margin-right: 10px; object-fit: contain; }  /* 관리 미리보기도 잘리지 않게 */

/* 홈 마스코트 — 항목이 하나뿐일 때도 홈이 허전하지 않게. 앱이 늘면(.sm) 작아진다 */
.hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0 2px; }
/* 상자를 만들지 않는다 — 그림이 가로든 세로든 **그림 크기 그대로**(빈 칸·테두리 없음 · 2026-09-23) */
/* 틀은 **정사각형 + 꽉 채우기** — 어떤 사진을 올려도 여백·테두리 없이 보인다(2026-09-23 사용자 결정: 다리는 잘려도 됨).
   위쪽 기준(object-position)이라 세로 사진을 올려도 **머리는 항상 남는다**. */
.mascot { width: min(86vw, 360px); aspect-ratio: 1; object-fit: cover; object-position: 50% 22%;
          border-radius: 22px; display: block; }
.hero.sm .mascot { width: min(40vw, 150px); }
.hello { font-size: 15px; font-weight: 700; color: var(--hh-muted); }


/* **사진 왼쪽 · 메뉴 오른쪽** — 폰에서도 같은 배치(2026-09-23 사용자 지시). 폭에 따라 크기만 달라진다. */
/* 폰은 **1열** — 정사각 사진 위, 메뉴 아래(2026-09-23 사용자 결정). 두 칸 배치는 넓은 화면에서만. */
.home-wrap .hero { padding: 2px 0; }
.home-menu .card { margin: 10px 0 0; }
@media (min-width: 820px) {
  /* 두 칸을 **묶어서 화면 가운데**로 — 칸을 늘이지 않고 내용 크기대로 두고 그룹을 중앙 정렬한다
     (늘였더니 오른쪽만 빈 칸이 남아 좌우가 어긋났다 · 2026-09-23 사용자 지적) */
  .home-wrap { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 28px; align-items: center;
               min-height: calc(100vh - 150px); }
  .home-menu { width: min(44vw, 520px); }
  .home-menu .tiles { grid-template-columns: 1fr; }               /* 타일이 카드 폭을 채운다(빈 칸 없음) */
  .home-menu .tile { min-height: 150px; }
  .home-wrap .hero { padding: 0; }
  .home-wrap .mascot { width: 100%; }
  .home-menu .card { margin: 0; }
  .home-wrap .mascot { width: min(42vw, 420px); }
  .home-menu .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* FHD(1920×1080) PC 기준 — 900px 칸에 갇히지 않게 넓히고, 사진·메뉴가 화면을 고르게 쓴다(2026-09-23 사용자 지시).
   높이 1080 을 염두에 두고 사진은 한 화면에 들어가는 크기로 묶는다. */
@media (min-width: 1280px) {
  main { max-width: 1240px; }
  .chans { max-width: 1240px; }
}
@media (min-width: 1600px) {                                     /* FHD(1920×1080) 기준 */
  main { max-width: 1440px; }
  .chans { max-width: 1440px; }
  .home-wrap { gap: 56px; }
  .home-wrap .mascot { width: min(40vw, 560px); }
  .home-menu { width: min(36vw, 560px); }
  .home-menu .card { padding: 20px 22px; }
  .home-menu .tile { min-height: 190px; }
  .home-menu .tile-nm { font-size: 20px; }
  .home-menu .tile-ic svg { width: 44px; height: 44px; }
  .hello { font-size: 17px; }
}