/* ============================================================
   BM SMILE 업무 포털 — 공통 디자인 시스템 (단일 소스)
   2026-07 리뉴얼 "안내데스크": BM 네이비 히어로 + 펫치 온기
   색상 정본: BMSMILE 문서 디자인 시스템 v2 tokens.js
   (포털 디자인 브리프 ~/fetch-docs/design-brief/ 기준)
   ============================================================ */

/* Pretendard 셀프호스트 (전사 표준 서체) */
@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* 색상 — 문서 시스템 v2 정본 값 */
  --primary: #2b3a4d;          /* main: BM 슬레이트 네이비 (면·주요 버튼) */
  --primary-dark: #22303f;     /* 네이비 심화 (호버·그라디언트 끝) */
  --ink: #16294a;              /* 헤딩·강조 텍스트·테이블 헤더 */
  --box: #eef2f8;              /* 박스 배경·태그 배경 */
  --accent: #3e5169;           /* 보조 슬레이트 (외곽선 버튼 등) */
  --bg: #f5f6f8;               /* 페이지 배경 */
  --surface: #ffffff;          /* paper */
  --text: #33332f;             /* body */
  --text-muted: #6b6a65;       /* gray: 캡션·비활성 */
  --text-soft: #98a0aa;
  --border: #e2e2de;           /* cellLn */
  --warn: #c0392b;             /* risk: 에러·위험 */
  --warn-bg: #fbf0e6;          /* warnBg */
  --warn-tx: #7a4b12;          /* warnTx */
  --zebra: #fafaf8;
  --ok: #2e7d5b;               /* 확인 그린 (네이비와 어울리는 차분한 톤) */
  --ok-bg: #e7f2ed;
  --ok-tx: #1f5c43;
  --soon: #8d97a3;
  --cream: #fbf4e7;            /* 펫치 존 — 마스코트 털색에서 딴 웜 틴트 */

  /* 형태 */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(22, 41, 74, .05), 0 4px 14px rgba(22, 41, 74, .07);
  --shadow-hover: 0 6px 22px rgba(22, 41, 74, .13);

  /* 간격 / 타이포 */
  --space: 16px;
  --tap: 48px;                 /* 최소 터치 타깃 */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
  --container: 720px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- 헤더 (BM 네이비 면 + 화이트 로고) ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--primary);
  /* PWA(홈화면 앱)에서 상태바(시계·배터리) 영역만큼 네이비를 확장해 콘텐츠 가림 방지 */
  padding-top: env(safe-area-inset-top, 0);
}
.app-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 13px var(--space);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* 헤더 좌측 클러스터 = [BMSMILE 로고] · [펫치 아바타 + 알약] (2026-07-25 로고 복원) */
.brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand-logo__img { height: 23px; width: auto; display: block; opacity: .95; transition: opacity .12s ease; }
.brand-logo:hover .brand-logo__img { opacity: 1; }
/* 로고와 펫치 알약 사이 은은한 세로 구분선 */
.brand-cluster .brand { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .22); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}
.brand__logo-img { height: 22px; display: block; }
.brand__name {
  font-size: 14px;
  color: #eef2f8;
  opacity: .85;
  border-left: 1px solid rgba(255, 255, 255, .25);
  padding-left: 10px;
}
.brand__by {
  font-size: 11.5px;
  color: rgba(238, 242, 248, .62);
  letter-spacing: -.01em;
  margin-left: 2px;
}
/* 브랜드 = 펫치 둥근 아바타 + 흰 알약(홈 버튼) — 2026-07-25 밀도/브랜드 교정 */
.brand__avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: center 46%;
  background: var(--primary-dark);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 2px 6px rgba(10, 20, 38, .3);
  transition: transform .12s ease;
}
.brand__pill {
  font-size: 14.5px; font-weight: 800; color: var(--ink);
  background: #fff; border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px; padding: 6px 15px; line-height: 1; letter-spacing: -.01em;
  box-shadow: 0 1px 3px rgba(10, 20, 38, .22); transition: box-shadow .12s ease, transform .12s ease;
}
.brand:hover .brand__avatar { transform: scale(1.05); }
.brand:hover .brand__pill { box-shadow: 0 3px 9px rgba(10, 20, 38, .3); }
.brand:active .brand__pill { transform: translateY(1px); }
.app-header__user { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.app-header__user a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.app-header__user .muted { color: rgba(255, 255, 255, .55); }

/* ---------- 홈 히어로 (네이비 밴드 + 걸터앉은 펫치) ---------- */
.hero {
  background: linear-gradient(168deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 36px 0 44px;
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space);
  position: relative;
}
.hero__date { font-size: 13px; color: rgba(238, 242, 248, .6); margin: 0 0 10px; }
.hero__clock { font-variant-numeric: tabular-nums; color: rgba(238, 242, 248, .85); font-weight: 700; }
.hero__tz { font-size: 11px; color: rgba(238, 242, 248, .45); }
.hero__inner h1 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 8px;
}
.hero__sub { font-size: 14.5px; color: rgba(238, 242, 248, .78); margin: 0; max-width: 40em; }
.hero__sub b { color: #fff; font-weight: 700; }
.worldclock {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 2px 0 18px;
  font-size: 12.5px;
  color: rgba(238, 242, 248, .55);
  font-variant-numeric: tabular-nums;
}
.worldclock .wc b {
  font-weight: 700;
  color: rgba(238, 242, 248, .72);
  margin-right: 5px;
}
.worldclock .wc:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1px; height: 10px;
  margin-left: 18px;
  vertical-align: -1px;
  background: rgba(238, 242, 248, .2);
}
/* 히어로 마스코트 = 펫치 도감 진입점 (말풍선 링크) */
.hero__gallery {
  position: absolute;
  right: 12px;
  bottom: -6px;               /* 밴드 안에서 인사말 쪽으로 날아오는 모습 (망토 비행) */
  display: inline-block;
  text-decoration: none;
  z-index: 7;                 /* 카드보다 위 */
}
.hero__mascot {
  display: block;
  height: 116px;
  transform: scaleX(-1);      /* 진행방향을 텍스트 쪽(왼쪽)으로 */
  filter: drop-shadow(0 8px 14px rgba(10, 20, 38, .35));
  pointer-events: none;
}
.hero__bubble {
  position: absolute;
  bottom: calc(100% - 10px);
  right: 4px;
  white-space: nowrap;
  background: #fff; color: var(--ink);
  font-size: 12.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 14px;
  box-shadow: 0 3px 12px rgba(10, 20, 38, .22);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero__bubble::after {
  content: ''; position: absolute; top: 100%; right: 26px;
  border: 6px solid transparent; border-top-color: #fff;
}
.hero__gallery:hover .hero__bubble,
.hero__gallery:focus-visible .hero__bubble {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(10, 20, 38, .28);
}
/* 은은하게 반짝 — 골드 글로우가 천천히 숨쉬듯 (발견성) */
@keyframes bubble-glow {
  0%, 100% { box-shadow: 0 3px 12px rgba(10, 20, 38, .22); }
  50%      { box-shadow: 0 3px 16px rgba(240, 200, 120, .65); }
}
.hero__bubble { animation: bubble-glow 2.6s ease-in-out infinite; }
.hero__gallery:hover .hero__bubble { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero__bubble { animation: none; } }

/* ---------- 레이아웃 ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space);
  padding-bottom: 56px;
}
h1 { font-size: 22px; color: var(--ink); margin: 8px 0 4px; letter-spacing: -.02em; }
h2 { font-size: 16px; color: var(--ink); margin: 0 0 12px; letter-spacing: -.01em; }
.page-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }
.muted { color: var(--text-muted); }

/* 뒤로 / 브레드크럼 */
.crumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--text-muted);
  text-decoration: none; margin-bottom: 12px;
}
.crumb:hover { color: var(--ink); }

/* ---------- 기능 페이지 헤더 (네이비 배너 + 펫치 칩) ---------- */
.pagehero {
  background: linear-gradient(168deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 18px;
}
.pagehero__chip {
  flex: none;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  overflow: hidden;
}
.pagehero__chip img { max-height: 48px; max-width: 50px; width: auto; height: auto; display: block; }
.pagehero h1 { font-size: 20px; color: #fff; margin: 0; }
.pagehero p { margin: 3px 0 0; font-size: 13px; color: rgba(238, 242, 248, .72); }

/* ---------- 카드 ---------- */
.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

/* ---------- 홈: 오늘의 현황 대시보드 (로그인 사용자) ---------- */
.dash { margin: 6px 0 30px; }
.dash__head {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0 4px 12px;
}
.dash__title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.dash__hint { font-size: 12px; color: var(--text-soft); margin-left: auto; }
.dash__me { display: flex; flex-direction: column; gap: 3px; }
.dash__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-soft); }
.dash__name { font-size: 17px; color: var(--ink); }
.dash__dept {
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  padding-left: 8px; margin-left: 6px; border-left: 1px solid var(--border);
}
.stat--placeholder { border-left-color: var(--border); opacity: .82; }
.stat--placeholder .stat__value { color: var(--text-soft); }
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 4px solid var(--box);   /* 기본은 은은한 박스톤 */
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.stat:active { transform: translateY(-1px); }
.stat__label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.stat__value {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__value em { font-size: 14px; font-weight: 700; font-style: normal; color: var(--text-muted); margin-left: 3px; }
.stat__value--muted { font-size: 20px; color: var(--primary); }
.stat__note { font-size: 12px; color: var(--text-soft); }
.stat__note--live { color: var(--ink); font-weight: 700; }
.stat--alert { border-left-color: var(--warn); }
.stat--alert .stat__value { color: var(--warn); }
.stat--alert .stat__note { color: var(--warn-tx); }
.stat--ok { border-left-color: var(--ok); }
.stat--ok .stat__note { color: var(--ok-tx); }

@media (hover: none) {
  .stat:hover { transform: none; box-shadow: var(--shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .stat { transition: none; }
  .stat:hover { transform: none; }
}

/* ---------- 홈: 기능 그룹 ---------- */
.menu-group { margin-bottom: 30px; }
.menu-group:last-child { margin-bottom: 0; }
.menu-group.is-first { margin-top: 8px; }   /* 모든 그룹 제목은 밝은 영역에서 동일하게 */
.group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 4px 12px;
}
.group-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
}
.group-desc { font-size: 12px; color: var(--text-soft); }

/* 그룹 헤딩 → 허브 링크 + 접기/펼치기(아코디언) */
.group-head__link {
  display: flex; align-items: baseline; gap: 10px;
  text-decoration: none; flex: 1 1 auto; min-width: 0;
}
.group-head__link:hover .group-title { color: var(--primary); }
.group-more { color: var(--accent); font-weight: 700; font-style: normal; opacity: 0; transition: opacity .15s; }
.group-head__link:hover .group-more { opacity: 1; }
.group-toggle {
  margin-left: auto; flex: none; border: 0; background: transparent;
  cursor: pointer; padding: 6px 8px; color: var(--text-soft); line-height: 0;
  border-radius: 8px;
}
.group-toggle:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.group-toggle__chev {
  display: inline-block; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease; margin-bottom: 2px;
}
.menu-group.is-collapsed .group-toggle__chev { transform: rotate(-45deg); margin-bottom: -2px; }
.menu-group.is-collapsed [data-acc-body] { display: none; }
@media (hover: none) { .group-more { opacity: 1; } }

/* ---------- 홈: 기능 카드 그리드 ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}
.menu-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  min-height: 156px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
a.menu-card:active { transform: translateY(-1px); }
.menu-card.is-soon { cursor: default; opacity: .62; }
.menu-card.is-soon:hover { transform: none; box-shadow: var(--shadow); }
.menu-card__chip {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  overflow: hidden;
}
.menu-card__chip img { max-height: 46px; max-width: 48px; width: auto; height: auto; display: block; }
.menu-card__icon {                 /* 이미지 없는 기능의 이모지 폴백 */
  width: 58px; height: 58px;
  display: grid; place-items: center;
  font-size: 28px;
  border-radius: 50%;
  background: var(--box);
}
.menu-card__title { font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.menu-card__desc { font-size: 13px; color: var(--text-muted); margin-top: -6px; }
.menu-card__foot { margin-top: auto; }
.badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.badge.badge-active { color: var(--primary); background: var(--box); }
.badge.badge-soon { color: var(--soon); background: #eff0f2; }

/* 신호등 상태 (사용가능=초록 / 준비중=노랑 / 이용불가·권한없음=빨강) */
.badge.sig { display: inline-flex; align-items: center; }
.badge.sig i { width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.sig-ok { color: var(--ok-tx); background: var(--ok-bg); }
.sig-ok i { background: var(--ok); }
.sig-soon { color: #7a5b12; background: #fbf3e0; }
.sig-soon i { background: #d99a1c; }
.sig-closed { color: var(--warn); background: #faecea; }
.sig-closed i { background: var(--warn); }
.badge-beta { color: #5b3fa8; background: #efeafb; margin-left: 6px; }
.badge-admin { color: #7a5b12; background: #fbf3e0; margin-left: 6px; font-weight: 700; }

/* 리포트 잠금 화면 (관리자 코드 입력) */
.lockcard { text-align: center; padding: 30px 22px 28px; max-width: 420px; margin: 0 auto; }
.lockcard__icon { font-size: 34px; }
.lockcard__title { margin: 10px 0 6px; font-size: 17px; color: var(--ink); }
.lockcard__desc { margin: 0 0 18px; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.lockcard__err { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--warn); }
.lockform { display: flex; gap: 8px; justify-content: center; }
.lockform__input {
  width: 140px; text-align: center; letter-spacing: .4em;
  font-size: 20px; font-family: inherit;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.lockform__input:focus { outline: none; border-color: var(--primary); }
.pagehero__badge {
  font-size: 11px; font-weight: 700; vertical-align: middle;
  color: #fff; background: rgba(255,255,255,.2);
  padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}

/* ---------- 펫치 도감(갤러리) ---------- */
.gal-hero {
  overflow: hidden; border-radius: var(--radius); margin-bottom: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(168deg, var(--primary), var(--primary-dark));
}
.gal-hero__txt h1 { color: #fff; margin: 0 0 6px; }
.gal-hero__intro { color: rgba(238,242,248,.9); font-size: 14px; margin: 0 0 4px; }
.gal-hero__count { color: rgba(238,242,248,.6); font-size: 12.5px; margin: 0; }
.gal-hero__count b { color: #fff; }
.gal-hero__note {
  margin: 12px 0 0; max-width: 46ch;
  padding: 9px 13px; border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(238,242,248,.72); font-size: 12.5px; line-height: 1.5;
}
.gal-hero__note b { color: rgba(238,242,248,.92); font-weight: 700; }
.gal-hero__mascot { flex: none; height: 108px; align-self: flex-end; margin-bottom: -22px; }
.gal-hero__btn {
  display: inline-block; margin-top: 12px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: background .12s ease;
}
.gal-hero__btn:hover { background: rgba(255,255,255,.26); }
.gal-dl {
  position: absolute; top: 8px; right: 8px;
  font-size: 10.5px; font-weight: 700;
  color: #fff; background: var(--primary);
  padding: 2px 8px; border-radius: 999px;
}
.gal-empty {
  padding: 26px 18px; text-align: center;
  font-size: 14px; color: var(--text-muted);
  background: var(--cream); border-radius: var(--radius-sm);
}

/* About 펫치 */
.gal-about {
  display: flex; gap: 20px; align-items: center;
  background: var(--surface); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 26px; box-shadow: var(--shadow);
}
.gal-about__face { flex: none; width: 96px; height: 96px; border-radius: 20px; object-fit: cover; }
.gal-about__body { min-width: 0; }
.gal-about__body h2 { margin: 0 0 3px; }
.gal-about__tag { color: var(--text-muted); font-weight: 700; font-size: 13.5px; margin: 0 0 10px; }
.gal-about__body p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--text); }
.gal-about__body b { color: var(--ink); }
.gal-about__owner { color: var(--text-soft); font-size: 12.5px !important; margin-bottom: 0 !important; }
@media (max-width: 560px) {
  .gal-about { flex-direction: column; text-align: center; }
}

/* 아코디언 섹션 */
.gal-acc { margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.gal-acc > summary {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 4px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.gal-acc > summary::-webkit-details-marker { display: none; }
.gal-acc > summary::before {
  content: '▸'; color: var(--text-soft); font-size: 12px;
  transition: transform .15s ease; align-self: center;
}
.gal-acc[open] > summary::before { transform: rotate(90deg); }
.gal-acc__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.gal-acc__desc { font-size: 12px; color: var(--text-soft); flex: 1; }
.gal-acc__count {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  background: var(--box); border-radius: 999px; padding: 2px 10px;
}
.gal-acc[open] .gal-grid { padding-bottom: 18px; }
.gal-story {
  font-size: 13px; line-height: 1.7; color: var(--text-muted);
  background: var(--cream); border-radius: var(--radius-sm);
  padding: 16px 18px; margin: 4px 0 18px;
}
.gal-story b { color: var(--ink); }
.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.gal-card {
  margin: 0; background: var(--surface);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gal-card__img {
  position: relative;
  height: 128px; display: grid; place-items: center;
  background: var(--cream); padding: 10px;
}
.gal-no {
  position: absolute; top: 8px; left: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--primary); background: rgba(255,255,255,.7);
  padding: 1px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.badge-comingsoon {
  position: absolute; top: 8px; right: 8px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--warn);
  padding: 3px 8px; border-radius: 999px;
}
/* 홈 · 곧 만나요 — 커밍순 기능 펫치(도감 locked와 공통 소스). 메뉴보다 작고 조용하게. */
.soon-strip { margin-top: 28px; }
.soon-strip .group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.soon-more { font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.soon-more:hover { color: var(--ink); }
.soon-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.soon-card {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
}
.soon-card__face {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--box); filter: grayscale(.15);
}
.soon-card__txt { min-width: 0; line-height: 1.34; }
.soon-card__txt b { display: block; font-size: 13.5px; color: var(--ink); letter-spacing: -.01em; }
.soon-card__txt span { display: block; font-size: 11.5px; color: var(--text-muted); }

.gal-more {
  display: block; width: 100%;
  margin: 4px 0 20px; padding: 13px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: var(--shadow); transition: background .12s ease;
}
.gal-more:hover { background: var(--box); }
.gal-more span { color: var(--text-muted); }
.gal-card.is-hidden { display: none; }
.gal-card__img img { max-height: 108px; max-width: 100%; width: auto; }
/* 타운홀 씬 = 배경 포함 → 카드 꽉 채우기(크림 여백 없이) */
.gal-card--scene .gal-card__img { padding: 0; background: var(--primary); }
.gal-card--scene .gal-card__img img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.gal-card[data-full] { cursor: zoom-in; }
.gal-card[data-full]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gal-card figcaption { padding: 11px 13px 14px; }
.gal-card figcaption b { display: block; font-size: 14px; color: var(--ink); }
.gal-card figcaption span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.gal-card.is-locked .gal-card__img { background: var(--box); }
.gal-card.is-locked figcaption b { color: var(--text-muted); }
.gal-lock { font-size: 34px; opacity: .5; }
.gal-card.is-locked { opacity: .82; }
@media (hover: hover) {
  .gal-card:not(.is-locked):hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
}

/* 이미지 크게 보기 라이트박스 */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16, 24, 40, .72);
  display: grid; place-items: center; padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__close {
  position: absolute; top: 16px; right: 18px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255,255,255,.28); }
.lightbox__inner {
  margin: 0; max-width: min(520px, 92vw); text-align: center;
}
.lightbox__inner img {
  max-width: 100%; max-height: 72vh;
  background: var(--cream); border-radius: var(--radius);
  padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 16px;
}
.lightbox__meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lightbox__no {
  color: var(--primary); background: rgba(255,255,255,.92);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 999px; flex: none;
}
.lightbox__bar b { color: #fff; font-size: 16px; }
.lightbox__label { color: rgba(255,255,255,.65); font-size: 13px; }
.lightbox__bar .btn { width: auto; margin: 0; flex: none; }
.lightbox__savehint { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.72); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255,255,255,.3); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.gal-cuts {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 700;
  color: var(--primary); background: rgba(255,255,255,.8);
  padding: 2px 7px; border-radius: 999px;
}

/* ---------- 온보딩 체크리스트 ---------- */
.ob-sec { padding: 20px 22px; }
.ob-sec__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.ob-sec__icon { font-size: 20px; }
.ob-list { list-style: none; margin: 0; padding: 0; }
.ob-list li { border-top: 1px solid var(--border); }
.ob-list li:first-child { border-top: 0; }
.ob-item {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 13px 2px;
  font-weight: 400; color: var(--text); font-size: 14.5px;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.ob-item input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ob-item__box {
  flex: none; width: 22px; height: 22px;
  border: 2px solid #cbd2da; border-radius: 7px;
  display: grid; place-items: center;
  transition: background .12s ease, border-color .12s ease;
}
.ob-item__box::after {
  content: '✓'; color: #fff; font-size: 14px; font-weight: 700;
  opacity: 0; transform: scale(.6); transition: opacity .12s ease, transform .12s ease;
}
.ob-item:has(input:checked) .ob-item__box { background: var(--ok); border-color: var(--ok); }
.ob-item:has(input:checked) .ob-item__box::after { opacity: 1; transform: scale(1); }
.ob-item:has(input:checked) .ob-item__txt { color: var(--text-muted); text-decoration: line-through; }
.ob-item:has(input:focus-visible) .ob-item__box { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- 폼 ---------- */
label {
  display: block;
  font-size: 12.5px; font-weight: 700;
  color: var(--ink);
  margin: 18px 0 6px;
}
label:first-child { margin-top: 0; }
.hint { font-weight: 400; color: var(--text-muted); }
select, input, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  font-size: 16px;               /* iOS 확대 방지 */
  font-family: inherit;
  color: var(--text);
  background: var(--zebra);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
select:focus, input:focus, textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(43, 58, 77, .14);
}
input[readonly] { color: var(--text-muted); }

/* 체크박스 그룹 — 알약 토글(복수 선택). 법인폰 목적·채널 등 */
.checkgroup { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.checkgroup label {
  display: inline-flex; align-items: center;
  margin: 0; min-height: 0;
  padding: 9px 15px;
  font-size: 14px; font-weight: 600; color: var(--text);
  background: var(--zebra);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.checkgroup label:has(input:checked) {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.checkgroup label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.checkgroup input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.etc-field { margin-top: 12px; }
.etc-field[hidden] { display: none; }

/* 법인폰 선택 칩 (폰 = 브랜드, 상태색) */
.phone-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 2px;
}
.phone-chip {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  margin: 0; min-height: 0; padding: 13px 15px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.phone-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.phone-chip__brand { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.phone-chip__num { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.phone-chip__status { font-size: 11.5px; font-weight: 700; margin-top: 5px; }
.phone-chip:not(.is-out):hover { border-color: #c6cdd6; }
.phone-chip:has(input:checked) { border-color: var(--primary); background: var(--box); }
.phone-chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.phone-chip:not(.is-out) .phone-chip__status { color: var(--ok); }
.phone-chip:not(.is-out) .phone-chip__status::before { content: '● '; }
.phone-chip.is-out { cursor: not-allowed; background: #faecea; border-color: #f2d5d0; opacity: .85; }
.phone-chip.is-out .phone-chip__status { color: var(--warn); }
.phone-chip.is-out .phone-chip__status::before { content: '● '; }

.chk-line {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text);
  cursor: pointer;
}
.chk-line input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; }
.chk-line b { color: var(--ink); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap);
  padding: 14px 18px;
  font-size: 15.5px; font-weight: 700;
  font-family: inherit;
  border: 0; border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  margin-top: 22px;
  transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: scale(.99); }
.btn-sm { width: auto; min-height: 40px; padding: 8px 16px; font-size: 14px; margin: 0; }
.btn-accent {                       /* 보조 액션(반납 등) — 외곽선 슬레이트 */
  background: var(--surface);
  color: var(--accent);
  border: 1px solid #c6cdd6;
}
.btn-accent:hover { background: var(--box); border-color: var(--accent); }

/* ---------- 리스트 행 ---------- */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }
.row__main { min-width: 0; }
.row__main b { font-size: 15px; color: var(--ink); }
.tag { font-size: 12px; color: var(--text-muted); }
.warn { font-size: 12px; color: var(--warn); font-weight: 700; }
.count { color: var(--primary); font-weight: 700; }

/* 회의실 하단 액션 (예약 딥링크 + 새로고침) */
.room-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* 회의실 안내 배너 (오늘만 조회 · 예약 딥링크) */
.rooms-notice {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px;
  background: var(--box);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
}
.rooms-notice__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rooms-notice__txt b { font-size: 13.5px; color: var(--ink); }
.rooms-notice__txt span { font-size: 12.5px; color: var(--text-muted); }
.rooms-notice .btn { flex: none; }

/* ---------- 회의실 일간 타임라인 ---------- */
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tl-head h2 .tag { font-weight: 400; margin-left: 4px; }
.tl { --tl-room-w: 132px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tl-row { display: flex; align-items: stretch; min-width: 460px; }
.tl-room {
  flex: none; width: var(--tl-room-w);
  padding: 10px 12px 10px 0;
  font-size: 13px; font-weight: 700; color: var(--ink);
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  border-top: 1px solid var(--border);
  /* 가로 스크롤 시 방이름이 왼쪽으로 밀려나 잘리지 않게 고정(모바일 핵심).
     데스크톱은 가로 넘침이 없어 시각적 변화 없음. */
  position: sticky; left: 0; z-index: 4; background: var(--surface);
  word-break: keep-all; overflow-wrap: anywhere;
}
.tl-hint {
  display: none;
  font-size: 12px; color: var(--text-soft); margin: 0 0 8px;
}
.tl-live { font-size: 10.5px; font-weight: 700; color: var(--warn); }
.tl-track {
  position: relative; flex: 1; min-height: 46px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.tl-row--axis .tl-room, .tl-row--axis .tl-track { border-top: 0; min-height: 22px; }
.tl-row--axis .tl-track { border-left: 0; }
.tl-tick {
  position: absolute; top: 0;
  font-size: 11px; color: var(--text-soft);
  transform: translateX(-50%); font-variant-numeric: tabular-nums;
}
.tl-tick.is-first { transform: none; }
.tl-tick.is-last { transform: translateX(-100%); }
.tl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--warn); z-index: 3; }
.tl-ev {
  position: absolute; top: 5px; bottom: 5px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px; overflow: hidden;
  font-size: 12px; line-height: 1.2; white-space: nowrap;
  color: #fff; background: var(--primary);
  border-radius: 7px; box-shadow: var(--shadow);
  z-index: 2; cursor: pointer;
  border: 0; text-align: left; font-family: inherit;
}
.tl-ev:hover { filter: brightness(1.08); }
.tl-ev:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl-ev b { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .8; }
.tl-ev.is-now { background: var(--ok); }
.tl-ev.is-past { background: #b7bdc6; }
.tl-empty {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--text-soft);
}

/* 예약 상세 팝업 (.lightbox 오버레이 재사용, 안쪽은 카드) */
.rm-detail {
  background: var(--surface); border-radius: var(--radius);
  padding: 22px 22px 24px; text-align: left;
  max-width: min(380px, 92vw); width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.rm-detail__room {
  margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rm-detail__state {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--box); color: var(--text-muted);
}
.rm-detail__state.is-now { background: var(--ok); color: #fff; }
.rm-detail__state.is-past { background: #b7bdc6; color: #fff; }
.rm-detail__time {
  margin: 0 0 16px; font-size: 15px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rm-detail__grid { display: grid; grid-template-columns: 64px 1fr; gap: 10px 12px; margin: 0; }
.rm-detail__grid dt { font-size: 13px; color: var(--text-muted); font-weight: 700; }
.rm-detail__grid dd { margin: 0; font-size: 14px; color: var(--text); word-break: keep-all; }

/* 모바일: 방이름 칸 살짝 좁혀 트랙 여유 확보 + 가로스크롤 안내 노출 */
@media (max-width: 560px) {
  .tl { --tl-room-w: 108px; }
  .tl-room { font-size: 12.5px; padding-right: 10px; }
  .tl-hint { display: block; }
}

/* ---------- 상단 탭 내비 (알약) ---------- */
.subnav { display: flex; gap: 8px; margin: 4px 0 18px; flex-wrap: wrap; }
.subnav a {
  min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px;
  background: var(--surface);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 700; font-size: 13.5px;
  box-shadow: var(--shadow);
  transition: color .12s ease;
}
.subnav a:hover { color: var(--ink); }
.subnav a.is-active { background: var(--primary); color: #fff; }

/* ---------- 월간 리포트 막대 ---------- */
.statrow { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.statrow__label { flex: 0 0 128px; font-size: 13px; color: var(--ink); font-weight: 700; }
.statrow__track { flex: 1; height: 10px; background: var(--box); border-radius: 999px; overflow: hidden; }
.statrow__fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.statrow__val { flex: 0 0 auto; min-width: 64px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.statrow__sub { margin: -2px 0 8px 140px; font-size: 12px; color: var(--text-soft); }
@media (max-width: 560px) {
  .statrow__label { flex-basis: 84px; font-size: 12px; }
  .statrow__sub { margin-left: 96px; }
}

/* ---------- 이력 검색·필터 바 ---------- */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 14px;
}
.filterbar input, .filterbar select {
  width: auto; min-height: 40px; flex: 0 1 auto;
  padding: 8px 12px; font-size: 14px;
}
.filterbar input[name="q"] { flex: 1 1 180px; min-width: 0; }
.filterbar .btn { margin: 0; }

/* ---------- 테이블 ---------- */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}
th {
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  background: var(--box);
}
th:first-child { border-radius: 8px 0 0 8px; }
th:last-child { border-radius: 0 8px 8px 0; }
tr:nth-child(even) td { background: var(--zebra); }
/* 내용이 긴 셀(할인 내역·에러 등)은 줄바꿈 허용 — 가로 스크롤 방지 */
td.cell-wrap { white-space: normal; min-width: 240px; max-width: 420px; word-break: break-word; }
td.cell-wrap .hint { font-size: 12px; margin-top: 2px; }
td .num { font-variant-numeric: tabular-nums; }

/* ---------- 빈 상태 ---------- */
.empty { color: var(--text-muted); font-size: 14px; padding: 8px 0; }

/* 상태 일러스트 (state_loading / state_empty / state_notfound) */
.statefig { text-align: center; padding: 30px 16px; }
.statefig img { height: 116px; display: block; margin: 0 auto 12px; }
.statefig b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.statefig .statefig__sub { font-size: 13px; color: var(--text-muted); margin: 0; }
.statefig .btn { width: auto; margin-top: 18px; }
.statefig--page { padding: 56px 16px; }        /* 404 등 페이지 전체용 */
.statefig--page img { height: 150px; }
.statefig--page b { font-size: 18px; }

/* ---------- 자동화 결과 상태 ---------- */
.result-status {
  padding: 18px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  border: 1px solid transparent;
}
.st-running, .st-pending { background: var(--box); color: var(--ink); border-color: #dce4ef; }
.st-success { background: var(--ok-bg); color: var(--ok-tx); border-color: #cfe5db; }
.st-failed  { background: #faecea; color: var(--warn); border-color: #f2d5d0; }
.st-partial { background: var(--warn-bg); color: var(--warn-tx); border-color: #f0dcc4; }
.fail-reason { font-weight: 400; font-size: 13px; margin-top: 8px; word-break: break-word; }

/* 진행 중 화면 — 자료 물고 뛰는 펫치 */
.result-status.st-loadingfig { text-align: center; padding: 26px 18px; }
.st-loadingfig img { height: 116px; display: block; margin: 0 auto 10px; }
/* 로딩 안내 둘째 줄 — 아마란스 핑계는 한 줄 내려서 조용히 */
.load-note {
  display: block; margin-top: 7px;
  font-weight: 400; font-size: 13px; line-height: 1.5;
  color: var(--text-muted); max-width: 34em; margin-inline: auto;
}
.load-note b { font-weight: 700; color: var(--ink); }

.spinner {
  display: inline-block;
  width: 15px; height: 15px;
  vertical-align: -2px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 이력 상태 배지 */
.st-badge-success { color: var(--ok-tx); background: var(--ok-bg); }
.st-badge-failed  { color: var(--warn); background: #faecea; }
.st-badge-running { color: var(--ink); background: var(--box); }
.st-badge-partial { color: var(--warn-tx); background: var(--warn-bg); }

/* ---------- 환영(로그인 전) 랜딩 ---------- */
.welcome { text-align: center; padding: 40px 20px 52px; max-width: 460px; margin: 0 auto; }
.welcome__pet {
  height: 150px; transform: scaleX(-1);
  filter: drop-shadow(0 8px 14px rgba(10, 20, 38, .18)); margin-bottom: 6px;
}
.welcome__title { font-size: 24px; color: var(--ink); margin: 0 0 10px; }
.welcome__sub { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin: 0 0 26px; }
.welcome__btn { max-width: 340px; margin: 0 auto; }
.welcome__hint { font-size: 12.5px; color: var(--text-soft); margin: 12px 0 0; }
.welcome__kiosk { margin-top: 16px; font-size: 14.5px; }   /* 공용 기기 진입 — 보조 위계 */

/* ---------- 준비중 안내 ---------- */
.soon-wrap { text-align: center; padding: 44px 16px; }
.soon-wrap img { height: 120px; display: block; margin: 0 auto 4px; }
.soon-wrap .soon-icon { font-size: 48px; }
.soon-wrap h1 { margin-top: 12px; }
.soon-wrap .page-sub { margin-bottom: 14px; }

/* ---------- 접근 게이트·404·잠금 공통 카드 (단일 카드 + 일러스트 1컷) ---------- */
.gatecard {
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
  padding: 44px 26px 34px;
}
.gatecard__pet {
  height: 138px; display: block; margin: 0 auto 14px;
  filter: drop-shadow(0 8px 14px rgba(10, 20, 38, .16));
}
.gatecard__title { font-size: 21px; color: var(--ink); margin: 0 0 10px; }
.gatecard__sub { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 22px; }
.gatecard__who {
  display: inline-block; margin: 0 0 18px; padding: 7px 14px;
  background: var(--box); border-radius: 999px;
  font-size: 13px; color: var(--ink); font-weight: 700;
}
.gatecard .btn { max-width: 320px; margin: 0 auto; }
.gatecard__hint { font-size: 12.5px; color: var(--text-soft); margin: 14px 0 0; }
.gatecard__hint a { color: var(--accent); font-weight: 700; }
@media (max-width: 560px) {
  .gatecard { padding: 34px 18px 28px; }
  .gatecard__pet { height: 116px; }
  .gatecard__title { font-size: 19px; }
}

/* ============================================================
   반응형 브레이크포인트
   ============================================================ */

/* 모바일: 히어로 마스코트 축소 (카드와 겹침 최소화) */
@media (max-width: 560px) {
  .hero { padding: 26px 0 92px; }        /* 하단 여백에 펫치 비행 + 말풍선 공간 */
  .hero__inner h1 { font-size: 22px; }
  .hero__gallery { bottom: -60px; right: 10px; }
  .hero__mascot { height: 72px; }
  .hero__bubble { font-size: 11px; padding: 6px 10px; right: 0; }
  .gal-hero__mascot { display: none; }   /* 좁은 화면에선 텍스트만 (펫치는 데스크톱에서) */
  .pagehero { padding: 18px; gap: 12px; }
  .pagehero__chip { width: 50px; height: 50px; }
  .pagehero__chip img { height: 40px; }
  .pagehero h1 { font-size: 18px; }
}

/* 태블릿 이상: 컨테이너 넓히고 여백 확대 */
@media (min-width: 700px) {
  :root { --container: 880px; }
  .container { padding: 24px; padding-bottom: 64px; }
  h1 { font-size: 24px; }
  .hero__inner h1 { font-size: 30px; }
}

/* PC: 홈 카드 폭·컨테이너 더 넓게 */
@media (min-width: 1024px) {
  :root { --container: 960px; }
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 마우스 환경에서만 미세 호버 강조 (터치는 제외) */
@media (hover: none) {
  a.menu-card:hover { transform: none; box-shadow: var(--shadow); }
}

/* ============================================================
   인사총무 지식 허브 (/hr/*) — 2026-07
   기존 토큰·클래스(.card .badge .subnav .row 등) 위에 얹는다.
   ============================================================ */

/* 허브 통합검색 */
.hr-search { display: flex; gap: 8px; margin-bottom: 20px; }
.hr-search input[type="search"] { flex: 1; min-width: 0; }
.hr-search .btn { flex: none; margin: 0; padding: 0 20px; }
.hr-result { text-decoration: none; color: var(--text); }
.hr-result:hover .row__main b { color: var(--primary); }
.hr-result .badge { flex: none; }

/* 규정·양식 카드 리스트 */
.reg-list {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.reg-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
  text-decoration: none; color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.reg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.reg-card.is-soon { opacity: .66; }
.reg-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.reg-card__title { font-size: 15.5px; color: var(--ink); letter-spacing: -.01em; line-height: 1.35; }
.reg-card__top .badge { flex: none; }
.reg-card__sum { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.reg-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: auto; padding-top: 6px;
  font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.reg-card__src { color: var(--text-soft); }
.reg-card__open { color: var(--primary); font-weight: 700; text-decoration: none; }
.reg-card__open:hover { text-decoration: underline; }

/* 규정 상세 */
.reg-detail__titlebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reg-detail__titlebar h1 { margin: 0; }
.reg-detail__sum { color: var(--text-muted); font-size: 14px; margin: 10px 0 12px; line-height: 1.6; }
.reg-detail__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 12.5px; color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.reg-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.reg-detail__actions .btn { margin: 0; }
.reg-viewer { width: 100%; height: 76vh; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--zebra); }

/* FAQ 아코디언 (도감 아코디언 재사용 + 답변 스타일) */
.hr-faq { margin-bottom: 0; }
.hr-faq__a {
  margin: 0 0 14px; padding: 0 4px 4px 22px;
  font-size: 13.5px; line-height: 1.7; color: var(--text);
}

/* 지출 체크리스트 */
.hr-check { margin: 4px 0 0; padding-left: 20px; }
.hr-check li { font-size: 14px; color: var(--text); margin: 8px 0; line-height: 1.55; }
.hr-check a { color: var(--primary); font-weight: 700; }

/* ── 결재라인 조회기 ── */
.ar-amount-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ar-amount-chips button {
  width: auto; min-height: 36px; margin: 0; padding: 6px 14px;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: var(--accent); background: var(--surface);
  border: 1px solid #c6cdd6; border-radius: 999px;
}
.ar-amount-chips button:hover { background: var(--box); border-color: var(--accent); }

.ar-head { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.ar-head b { color: var(--ink); font-size: 16px; }
.ar-line { list-style: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0; padding: 0; }
.ar-step {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--box); border-radius: 12px;
}
.ar-step__no {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.ar-step__name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ar-step__act { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: .02em; }
.ar-step__act--approve { color: var(--ok-tx); background: var(--ok-bg); }
.ar-step__act--agree { color: var(--warn-tx); background: var(--warn-bg); }
.ar-step__act--file { color: var(--primary); background: #dfe6f1; }
.ar-step__arrow { display: flex; align-items: center; color: var(--text-soft); font-weight: 700; }
.ar-cc {
  margin-top: 14px; padding: 10px 14px;
  background: #dfe6f1; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink);
}
.ar-cc b { margin-right: 8px; }
.ar-note {
  margin-top: 12px; padding: 10px 14px;
  background: var(--cream); border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-muted); line-height: 1.6;
}
.ar-note--review { background: var(--warn-bg); color: var(--warn-tx); }
.ar-ref { margin-top: 12px; font-size: 11.5px; color: var(--text-soft); }
.ar-ref code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.ar-fallback { font-size: 14px; color: var(--text-muted); padding: 4px 0; }
.ar-demos { display: flex; flex-wrap: wrap; gap: 10px; }
.ar-demo {
  width: auto; min-height: 40px; margin: 0; padding: 9px 16px;
  font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: #fff; background: var(--primary); border: 0; border-radius: 999px;
  transition: background .12s ease;
}
.ar-demo:hover { background: var(--primary-dark); }
.ar-src { font-size: 12px; color: var(--text-soft); margin: 14px 4px 0; line-height: 1.6; }

/* 온보딩 진행률 */
.ob-progress { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.ob-progress__bar { flex: 1; height: 10px; background: var(--box); border-radius: 999px; overflow: hidden; }
.ob-progress__bar span { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 999px; transition: width .25s ease; }
.ob-progress__pct { flex: none; font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ob-item__link { color: var(--primary); font-weight: 700; text-decoration: none; }
.ob-item__link:hover { text-decoration: underline; }

/* 온보딩 생활 가이드 아코디언 */
.ob-guide { margin-bottom: 4px; }
.ob-guide__icon { font-size: 18px; }
.ob-guide__body { padding: 4px 4px 16px; }
.ob-guide__intro { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.ob-guide__block { margin-bottom: 16px; }
.ob-guide__block:last-child { margin-bottom: 0; }
.ob-guide__sub { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.ob-guide__list { margin: 0; padding-left: 20px; }
.ob-guide__list li { font-size: 13.5px; color: var(--text); line-height: 1.65; margin: 3px 0; }
.ob-guide__links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; padding-left: 20px; }
.ob-guide__links a { font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none; }
.ob-guide__links a:hover { text-decoration: underline; }

/* 계정과목 검색 목록 */
.acct-list { display: flex; flex-direction: column; }
.acct-item { border-bottom: 1px solid var(--border); }
.acct-item[hidden] { display: none; }
.acct-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 2px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.acct-item > summary::-webkit-details-marker { display: none; }
.acct-item > summary::after {
  content: '＋'; color: var(--text-soft); font-size: 15px; flex: none;
}
.acct-item[open] > summary::after { content: '－'; }
.acct-code { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.acct-code b { font-size: 14.5px; color: var(--ink); }
.acct-cat {
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: var(--box); padding: 2px 8px; border-radius: 999px; flex: none;
}
.acct-detail {
  margin: 0 0 12px; padding: 0 4px; font-size: 13px;
  color: var(--text-muted); line-height: 1.65;
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .menu-card, .btn { transition: none; }
  a.menu-card:hover { transform: none; }
  .nav-drawer, .nav-scrim { transition: none; }
}

/* ============================================================
   헤더 햄버거 · 드로어 메뉴 · 푸터 (2026-07 전역 내비/푸터)
   ============================================================ */
/* 헤더 존재감 — 살짝 두껍게 + 아래 그림자 */
.app-header { box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(10,20,38,.16); }
.app-header__inner { padding-top: 15px; padding-bottom: 15px; }
.brand__logo-img { height: 24px; }

/* 햄버거 버튼 */
.navbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 8px 14px 8px 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  transition: background .12s ease;
}
.navbtn:hover { background: rgba(255,255,255,.18); }
.navbtn__bars { display: inline-grid; gap: 3px; width: 16px; }
.navbtn__bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; }

/* 스크림 + 드로어 */
.nav-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(12,20,34,.44); opacity: 0;
  transition: opacity .2s ease;
}
body.nav-open .nav-scrim { opacity: 1; }
.nav-drawer {
  position: fixed; top: 0; right: 0; z-index: 40;
  width: min(340px, 86vw); height: 100%;
  background: var(--surface);
  display: flex; flex-direction: column;
  box-shadow: -14px 0 40px rgba(10,20,38,.22);
  transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top, 0);
}
body.nav-open .nav-drawer { transform: translateX(0); }

/* 드로어 헤더 — 이름 + 멤버십 배지 */
.nav-drawer__head { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); background: var(--box); }
.nav-who b { display: block; font-size: 16px; color: var(--ink); letter-spacing: -.01em; }
.nav-who span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.nav-tier {
  display: flex; align-items: center; gap: 11px; margin-top: 14px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--soon);
}
.nav-tier__icon { font-size: 22px; line-height: 1; }
.nav-tier__txt b { display: block; font-size: 13.5px; color: var(--ink); }
.nav-tier__txt span { display: block; font-size: 11.5px; color: var(--text-muted); }
.nav-tier--owner  { border-left-color: #d9a441; background: linear-gradient(90deg, #fbf3e0, var(--surface) 60%); }
.nav-tier--family { border-left-color: var(--ok); }
.nav-tier--friend { border-left-color: var(--primary); }
.nav-tier--neighbor { border-left-color: var(--soon); }

/* 드로어 상단 빠른 액션 (마이페이지 · 로그아웃) */
.nav-acts { display: flex; gap: 8px; margin-top: 12px; }
.nav-acts a {
  flex: 1; text-align: center; padding: 9px 10px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; font-weight: 700; color: var(--ink); text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.nav-acts a:hover { background: var(--box); }
.nav-acts__out:hover { background: #faecea; color: var(--warn); border-color: #f2d5d0; }

/* 등급 사다리 (4단계, 내 등급 하이라이트) */
.nav-tiers { margin-top: 14px; }
.nav-tiers__cap { margin: 0 0 8px; font-size: 11px; font-weight: 700; color: var(--text-soft); letter-spacing: .02em; }
.nav-tiers__cap b { color: var(--ink); }
.nav-tierrow {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px;
  border-radius: 9px; opacity: .62;
}
.nav-tierrow__ic { font-size: 17px; width: 20px; text-align: center; }
.nav-tierrow__txt { min-width: 0; line-height: 1.25; }
.nav-tierrow__txt b { display: block; font-size: 12.5px; color: var(--ink); }
.nav-tierrow__txt span { display: block; font-size: 11px; color: var(--text-muted); }
.nav-tierrow.is-me { opacity: 1; background: #fbf3e0; }
.nav-tierrow__me {
  margin-left: auto; flex: none; font-style: normal;
  font-size: 10px; font-weight: 800; color: #7a5b12;
  background: #f6e4bf; padding: 2px 8px; border-radius: 999px;
}

/* 마이페이지 */
.mp-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; }
.mp-h__me { font-size: 13px; font-weight: 700; color: var(--primary); }
.mp-h__sub { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.mp-tiers { display: grid; gap: 4px; }
.mp-tiers .nav-tierrow { padding: 10px 12px; }
.mp-tiers .nav-tierrow__ic { font-size: 20px; }
.mp-tiers .nav-tierrow__txt b { font-size: 13.5px; }
.mp-tiers .nav-tierrow__txt span { font-size: 12px; }
.mp-list { list-style: none; margin: 0 0 14px; padding: 0; }
.mp-list li { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.mp-list li:last-child { border-bottom: 0; }
.mp-list li span { color: var(--text-muted); font-size: 14px; }
.mp-list li b { font-size: 18px; color: var(--ink); }
.mp-list li b em { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 2px; }
.mp-actions { text-align: center; }
.mp-note { text-align: center; font-size: 12.5px; color: var(--text-muted); margin: 16px 0 0; }

/* 드로어 메뉴 트리 */
.nav-tree { flex: 1; padding: 12px 12px 4px; }
.nav-tree__lead {
  display: block; padding: 11px 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.nav-tree__lead:hover { background: var(--box); }
.nav-sec { padding: 6px 0; }
.nav-sec__title { margin: 8px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--text-soft); text-transform: uppercase; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 14px; color: var(--text); text-decoration: none;
}
.nav-item:hover { background: var(--box); color: var(--ink); }
.nav-item__ic { width: 20px; text-align: center; }
.nav-item.is-soon { color: var(--text-soft); cursor: default; }
.nav-item.is-soon em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--soon); background: var(--box); padding: 2px 7px; border-radius: 999px; }

.nav-drawer__foot { padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--border); }
.nav-drawer__foot a {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.nav-drawer__foot a:hover { background: #faecea; color: var(--warn); border-color: #f2d5d0; }

/* ---------- 푸터 (네이비 북엔드) ---------- */
.app-footer { margin-top: 48px; background: linear-gradient(168deg, var(--primary), var(--primary-dark)); }
.app-footer__inner {
  max-width: var(--container); margin: 0 auto; padding: 30px var(--space) 34px;
  display: grid; gap: 22px;
}
.foot-brand__logo { height: 22px; display: block; }
.foot-brand__tag { margin: 10px 0 0; font-size: 12.5px; color: rgba(238,242,248,.62); }
.foot-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 18px 14px; }
.foot-col__title { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: rgba(238,242,248,.5); text-transform: uppercase; }
.foot-col a, .foot-col span { display: block; font-size: 13px; line-height: 2; text-decoration: none; }
.foot-col a { color: rgba(238,242,248,.86); }
.foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-col span { color: rgba(238,242,248,.4); }
.foot-col span em { font-style: normal; font-size: 10px; margin-left: 5px; opacity: .8; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; }
.foot-legal p { margin: 0 0 4px; font-size: 12px; color: rgba(238,242,248,.6); }
.foot-legal b { color: rgba(238,242,248,.85); font-weight: 700; }
.foot-legal__sign { margin-top: 8px !important; color: rgba(238,242,248,.45) !important; }

/* 슬림 푸터(2026-07-24) — 하위 페이지는 사이트맵 없이 얇은 한 줄. 홈은 footer 블록을 비워 제거. */
.app-footer--slim { margin-top: 40px; }
.app-footer--slim .app-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 16px var(--space); font-size: 12.5px;
}
.app-footer--slim .foot-brand__logo { height: 18px; }
.foot-slim__by { color: rgba(238,242,248,.82); font-weight: 600; }
.foot-slim__sep { color: rgba(238,242,248,.3); }
.foot-slim__ask { color: rgba(238,242,248,.62); text-decoration: none; }
a.foot-slim__ask:hover { color: #fff; text-decoration: underline; }
.foot-slim__legal { margin-left: auto; color: rgba(238,242,248,.42); font-size: 11.5px; }
@media (max-width: 560px) {
  .app-footer--slim .foot-slim__legal { margin-left: 0; flex-basis: 100%; }
}

/* 좁은 화면 — 로고+알약+메뉴가 한 줄에 들어오게 클러스터를 촘촘히 */
@media (max-width: 480px) {
  .brand-cluster { gap: 9px; }
  .brand-logo__img { height: 20px; }
  .brand-cluster .brand { padding-left: 9px; gap: 8px; }
  .brand__avatar { width: 30px; height: 30px; }
  .brand__pill { font-size: 13.5px; padding: 5px 12px; }
}