/* ── Itdasy Design System v1 · screens/home-v41.css ─────────────
   홈 v4.1 톤다운 — 캐러셀/슬롯/3카드/FAB 스타일
   mockup: ../../mockups/01-home.html 참고
   tokens: tokens.css */

/* ============ 헤더 ============ */
/* 홈 탭 활성 시 글로벌 탑바의 #headerPersona 숨김 (v4.1 헤더 아바타와 중복 방지).
   updateHeaderProfile() 의 display:flex 인라인 스타일을 덮으려 !important 사용.
   DOM/JS 는 손대지 않으므로 외부 호환 유지. 다른 탭에서는 영향 없음. */
body:has(#tab-home.active) #headerPersona { display: none !important; }

/* [2026-06-07] 홈 상단 빈 공백 축소 — 전역 .tab(padding-top:24px) + #homeV41Root 이중 패딩으로
   헤더~첫 카드 사이 공백이 과했음. 홈 탭에만 상단 패딩 축소(다른 탭 24px 유지). */
#tab-home.tab.active { padding-top: 8px; }

.hv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 4px;
}
@media (max-width: 767px) {
  .hv-header {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 10px;
  }
}
.hv-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hv-header__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 40px;
}
.hv-header__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-pill);
  display: block;
}
.hv-header__initial {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: -0.3px;
}
.hv-header__text { min-width: 0; }
.hv-header__date {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 500;
}
.hv-header__shop {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
  margin-top: 1px;
}
.hv-bell {
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 0.5px solid var(--border);
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  padding: 0;
}

/* ============ AI 라벨 ============ */
.hv-ai-label {
  padding: 10px 16px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.hv-ai-label__icon {
  display: inline-flex;
  align-items: center;
  color: var(--text);
}
.hv-ai-label__text {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.hv-ai-label__text b { color: var(--text); }
.hv-ai-label__count {
  font-size: 11px;
  color: var(--text-subtle);
  margin-left: auto;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ============ 캐러셀 ============ */
.hv-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* 2026-05-01 ── mandatory → proximity. 사용자 보고: '드래그 부드럽지 않음'.
     mandatory 는 손 떼면 무조건 가장 가까운 카드로 snap → 부자연스러움.
     proximity 는 가까이 있을 때만 snap → 자연스러운 관성 스크롤. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 16px 8px;
}
/* 2026-05-01 ── 캐러셀 좌우 화살표 (4-5개 이상 카드 시 옆 보이게 한 칸씩 이동) */
.hv-carousel-wrap { position: relative; }
.hv-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: none;  /* 모바일은 숨김 (터치 스와이프), PC 만 표시 */
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.12s, transform 0.12s;
}
.hv-carousel-nav:hover { background: var(--surface-2); }
.hv-carousel-nav:active { transform: translateY(-50%) scale(0.94); }
.hv-carousel-nav--prev { left: -6px; }
.hv-carousel-nav--next { right: -6px; }
@media (min-width: 768px) {
  .hv-carousel-nav { display: flex; }
}
.hv-carousel::-webkit-scrollbar { display: none; }

.hv-card {
  flex: 0 0 calc(100% - 36px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-sm);
}
.hv-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.hv-card:active { transform: scale(0.99); }

/* 첫 카드(차별점)만 옅은 핑크 강조 — 토큰 기반으로 다크에서도 작동 */
.hv-card.hv-card--featured {
  background: linear-gradient(180deg, var(--brand-bg) 0%, var(--surface) 100%);
  border-color: var(--brand);
}

.hv-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hv-card__cat {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hv-card__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
}
.hv-card__cat-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle);
  letter-spacing: 0.2px;
}

/* 카테고리 점 색상 */
.hv-dot--pink   { background: var(--brand-strong); }
.hv-dot--amber  { background: var(--warn); }
.hv-dot--red    { background: var(--danger); }
.hv-dot--coral  { background: #D85A30; }
.hv-dot--green  { background: var(--ok); }
.hv-dot--purple { background: var(--brand); }

/* 사진 스택 */
.hv-card__photos { display: flex; }
.hv-card__photo {
  width: 30px;
  height: 30px;
  border: 2px solid var(--surface);
  border-radius: 7px;
  overflow: hidden;
  margin-left: -8px;
}
.hv-card__photo:first-child { margin-left: 0; }
.hv-photo-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #F4C0D1, #BC6675);
}
.hv-photo-fill.hv-photo-fill--2 { background: linear-gradient(135deg, #FAC775, #BA7517); }
.hv-photo-fill.hv-photo-fill--3 { background: linear-gradient(135deg, #C0DD97, #639922); }

.hv-card__headline {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.hv-card__sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  font-weight: 500;
}

.hv-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  /* native button reset — macOS Safari 디폴트 그라데이션/그림자 제거 */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: inherit;
}
.hv-card--featured .hv-card__cta { background: var(--brand-strong); color: #FFF; }

/* 빈 예약 카드 — 전체 클릭으로 캘린더 이동 */
.hv-booking--empty { cursor: pointer; }
.hv-booking--empty:active { transform: scale(0.99); }
.hv-booking--empty:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ============ 점 인디케이터 ============ */
.hv-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 12px 0 10px;
  align-items: center;
}
.hv-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: all 0.25s;
  cursor: pointer;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
}
.hv-dot.is-on {
  width: 22px;
  border-radius: var(--r-pill);
  background: var(--text);
}

/* ============ 오늘의 예약 ============ */
.hv-booking {
  margin: 4px 16px 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
}
.hv-booking__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 11px;
}
.hv-booking__label {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
}
.hv-booking__title {
  font-size: 14px;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: -0.2px;
  color: var(--text);
}
.hv-booking__link {
  font-size: 11px;
  color: var(--text-muted);
  padding: 5px 10px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  font-weight: 500;
}
/* 슬롯 = row 형태: 시간 · 핑크 bar · 이름/서비스 · 상태 배지 (2026-05-16) */
.hv-slots {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.hv-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--border);
  outline: 0;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}
.hv-slot:last-child { border-bottom: none; }
.hv-slot.is-now { background: var(--brand-bg); }
.hv-slot__time {
  width: 44px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.hv-slot.is-now .hv-slot__time { color: var(--brand-strong); }
.hv-slot__bar {
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: var(--brand-strong);
  flex-shrink: 0;
}
.hv-slot__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hv-slot__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv-slot__svc {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv-slot__status {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.hv-slot--more {
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
/* 슬롯 상태 배지 — 캘린더 컬러코딩과 동일 톤 */
.st-done   { background: #E1F5EE;        color: #0F6E56; }
.st-conf   { background: var(--brand-bg); color: var(--brand-strong); }
.st-canc   { background: var(--surface-2); color: var(--text-subtle); text-decoration: line-through; }
.st-noshow { background: #FEF3C7;        color: #92400E; }

/* ============ 오늘 매출 카드 (헤더 아래) ============ */
.hv-today-rev {
  margin: 4px 16px 12px;
  padding: 18px 18px 14px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
}
.hv-today-rev__label {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
  letter-spacing: -0.2px;
}
.hv-today-rev__amount {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -1.2px;
  margin: 4px 0 2px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hv-today-rev__diff {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.hv-today-rev__grid {
  display: flex;
  gap: 1px;
  margin-top: 14px;
  background: var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.hv-today-rev__cell {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--surface-2);
}
.hv-today-rev__cell-label {
  font-size: 10.5px;
  color: var(--text-subtle);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv-today-rev__cell-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* ============ 운영 3카드 ============ */
.hv-ops { padding: 0 16px 6px; }
.hv-ops__title {
  font-size: 11px;
  color: var(--text-subtle);
  margin: 0 2px 8px;
  font-weight: 600;
}
.hv-ops__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* INVENTORY_HIDDEN: 3 → 2 */
  gap: 6px;
}
.hv-ops__card {
  padding: 11px 13px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.hv-ops__cat {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 500;
}
.hv-ops__val {
  font-size: 14px;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: -0.3px;
  color: var(--text);
}
.hv-ops__val.is-danger { color: var(--danger); }

/* ============ 자동화 칩 ============ */
.hv-chips {
  display: flex;
  gap: 6px;
  padding: 6px 16px 10px;
  flex-wrap: wrap;
}
.hv-chip {
  font-size: 11px;
  color: var(--text-muted);
  padding: 5px 10px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.hv-chip__on {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--ok);
}

/* ============ 챗봇 FAB ============ */
.hv-fab {
  position: absolute;
  right: 16px;
  bottom: 84px;
  width: 54px;
  height: 54px;
  border-radius: var(--r-pill);
  background: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  padding: 0;
  cursor: pointer;
  z-index: 20;
}
.hv-fab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--brand-strong);
  color: #FFF;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
}

/* ============ PC 사이드바 ============ */
.hv-sidebar {
  width: 96px;
  background: var(--surface);
  border-right: 0.5px solid var(--border);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hv-sidebar__logo {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}
.hv-sidebar__item {
  width: 72px;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.hv-sidebar__item.is-active { background: var(--surface-2); }
.hv-sidebar__label {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 500;
}
.hv-sidebar__item.is-active .hv-sidebar__label {
  color: var(--text);
  font-weight: 700;
}
.hv-sidebar__fab {
  width: 60px;
  height: 60px;
  border-radius: var(--r-pill);
  background: var(--brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}
.hv-sidebar__spacer { flex: 1; }

/* ============ PC 그리드 ============ */
.hv-pc-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
  margin-top: 12px;
}
.hv-pc-grid .hv-booking { margin: 0; }

/* ============ PC 분기 (1100px+) ============ */
@media (min-width: 1100px) {
  .hv-carousel {
    padding: 4px 0 8px;
  }
  /* mockup의 .pc-carousel 패턴 — 첫 카드 56%, 나머지 38% */
  .hv-carousel .hv-card {
    flex: 0 0 calc(56% - 5px);
  }
  .hv-carousel .hv-card:nth-child(2),
  .hv-carousel .hv-card:nth-child(3),
  .hv-carousel .hv-card:nth-child(4),
  .hv-carousel .hv-card:nth-child(5),
  .hv-carousel .hv-card:nth-child(6) {
    flex: 0 0 calc(38% - 5px);
  }
  .hv-fab {
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 60px;
  }
}

/* ============ 모션 줄임 ============ */
@media (prefers-reduced-motion: reduce) {
  .hv-card,
  .hv-card:hover,
  .hv-card:active {
    transform: none;
    transition: none;
  }
  .hv-dot {
    transition: none;
  }
}

/* ============ 레거시 섹션 강제 숨김 ============
   외부 JS (renderHomeResume 등) 가 display:block 으로 보이게 해도
   v4.1 홈에서는 항상 숨김. 캐러셀에 이어하기 카드가 이미 있어서 중복 노출 방지. */
#tab-home #resume-section,
#tab-home #homeTomorrowSched { display: none !important; }

/* ============ [2026-05-28] 헤더 매출 칩 + 알림 벨 박스 + 잇비 카드 ============ */

/* 헤더 매출 칩 */
.hv5-rev-chip {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  gap: 2px; padding: 9px 14px;
  background: #fff; border: 0.5px solid #E5E8EB; border-radius: 10px;
  cursor: pointer; line-height: 1;
}
.hv5-rev-chip:active { background: #F7F8FA; }
.hv5-rev-chip-label { font-size: 11px; color: #8B95A1; font-weight: 500; margin-bottom: 2px; }
.hv5-rev-chip-amt { font-size: 16px; color: #191F28; font-weight: 500; letter-spacing: -0.3px; }
.hv5-rev-chip-amt > span { font-size: 16px; color: #191F28; letter-spacing: -0.3px; }

/* 알림 벨 박스 (기존 .hv5-bell override) */
.hv5-hdr .hv5-bell {
  position: relative;
  width: 40px; height: 40px; padding: 0;
  background: #fff; border: 0.5px solid #E5E8EB; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #191F28; cursor: pointer; flex-shrink: 0;
}
.hv5-hdr .hv5-bell:active { background: #F7F8FA; }
.hv5-hdr .hv5-bell-badge {
  position: absolute; top: 6px; right: 6px;
  width: 7px !important; height: 7px !important;
  min-width: 0 !important; padding: 0 !important;
  border-radius: 50% !important;
  background: #BC6675; border: 0;
  display: block; font-size: 0;
}

/* [2026-05-28] AI 예상 매출 칩 (라벨 핑크 · 숫자 검정) */
.hv5-pred-chip {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  gap: 2px; padding: 9px 14px;
  background: #fff; border: 0.5px solid #E5E8EB; border-radius: 10px;
  cursor: pointer; line-height: 1;
}
.hv5-pred-chip:active { background: #F7F8FA; }
.hv5-pred-chip-label { font-size: 9px; color: #BC6675; font-weight: 500; margin-bottom: 2px; }
.hv5-pred-chip-amt { font-size: 16px; color: #191F28; font-weight: 500; letter-spacing: -0.3px; }
.hv5-pred-chip-amt > span { font-size: 16px; color: #191F28; letter-spacing: -0.3px; }
.hv5-rev-chip-label, .hv5-pred-chip-label, .hv5-rev-chip-amt, .hv5-pred-chip-amt { white-space: nowrap; }

/* 모바일 B안 — 매출 요약 카드 (한 카드 위계) */
.hv5-rev-sum {
  display: none;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  padding: 10px 12px;
  background: #FAFAFB; border: 0.5px solid #E5E8EB; border-radius: 10px;
  cursor: pointer; font-family: inherit; text-align: left;
}
.hv5-rev-sum:active { background: #F2F4F6; }
.hv5-rev-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hv5-rev-sum-bot { border-top: 0.5px solid #E5E8EB; margin-top: 8px; padding-top: 8px; }
.hv5-rev-sum-label { font-size: 11px; color: #8B95A1; font-weight: 500; letter-spacing: -0.2px; }
.hv5-rev-sum-val { display: inline-flex; align-items: baseline; gap: 2px; }
.hv5-rev-sum-val > span:first-child { font-size: 18px; font-weight: 500; color: #191F28; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.hv5-rev-sum-unit { font-size: 11px; color: #8B95A1; }
.hv5-rev-sum-pred-label { font-size: 11px; color: #BC6675; font-weight: 500; letter-spacing: -0.2px; }
.hv5-rev-sum-pred-val { display: inline-flex; align-items: baseline; gap: 2px; }
.hv5-rev-sum-pred-val > span:first-child { font-size: 13px; font-weight: 500; color: #191F28; font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
  .hv5-rev-chip, .hv5-pred-chip { display: none; }
  .hv5-rev-sum { display: block; }
}

/* pulse 애니메이션 (잇비 상태 dot 등 공용) */
@keyframes hv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.15); }
}

/* 잇비 카드 컨테이너 */
.hv5-itbi-card {
  background: #fff; border: 0.5px solid #E5E8EB; border-radius: 14px;
  padding: 16px; margin-bottom: 12px;
}

/* 잇비 카드 상단 */
.hv5-itbi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-bottom: 12px; border-bottom: 0.5px solid #F0F1F4;
}
.hv5-itbi-head-l { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.hv5-itbi-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #F7EFF0; color: #BC6675;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hv5-itbi-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hv5-itbi-name-row { display: inline-flex; align-items: center; gap: 6px; }
.hv5-itbi-name { font-size: 13px; font-weight: 500; color: #191F28; letter-spacing: -0.2px; }
.hv5-itbi-beta {
  font-size: 9px; font-weight: 600; color: #BC6675;
  background: #F7EFF0; padding: 2px 6px; border-radius: 4px;
}
.hv5-itbi-status {
  font-size: 11px; color: #BC6675; display: inline-flex; align-items: center; gap: 4px;
}
.hv5-itbi-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #BC6675;
  display: inline-block;
  animation: hv-pulse 1.8s ease-in-out infinite;
}
.hv5-itbi-all {
  background: none; border: 0; padding: 0;
  font-size: 11px; color: #8B95A1; cursor: pointer;
  flex-shrink: 0; align-self: center;
}
.hv5-itbi-all:active { color: #4E5968; }

/* 잇비 카드 메시지 */
.hv5-itbi-msg {
  display: flex; gap: 10px; padding: 12px 0;
}
.hv5-itbi-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #F7EFF0; color: #BC6675;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hv5-itbi-msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hv5-itbi-msg-text { font-size: 13px; color: #191F28; line-height: 1.55; }
.hv5-itbi-msg.is-empty .hv5-itbi-msg-text { color: #8B95A1; }
.hv5-itbi-msg-time { font-size: 11px; color: #B0B8C1; }

/* 인라인 액션 버튼 */
.hv5-itbi-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hv5-itbi-action-btn {
  background: #fff; color: #4E5968;
  border: 0.5px solid #E5E8EB; border-radius: 999px;
  padding: 6px 14px; font-size: 11px; font-weight: 500;
  cursor: pointer; line-height: 1.2;
}
.hv5-itbi-action-btn.is-primary { background: #191F28; color: #fff; border-color: #191F28; }
.hv5-itbi-action-btn:active { transform: scale(0.97); }

/* 잇비 카드 입력창 */
.hv5-itbi-input {
  display: flex; align-items: center; gap: 6px;
  background: #F7F8FA; border: 0.5px solid #E5E8EB; border-radius: 24px;
  padding: 5px 5px 5px 12px;
  cursor: text; user-select: none;
}
.hv5-itbi-input-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #4E5968; flex-shrink: 0; cursor: pointer;
  background: transparent; border: 0; padding: 0;
}
.hv5-itbi-input-icon:active { background: rgba(0,0,0,0.04); }
.hv5-itbi-input-field {
  flex: 1; min-width: 0; font-size: 12px; color: #191F28;
  background: transparent; border: 0; outline: 0;
  padding: 0; font-family: inherit;
}
.hv5-itbi-input-field::placeholder { color: #B0B8C1; font-size: 12px; }
.hv5-itbi-input-placeholder { font-size: 12px; }
.hv5-itbi-send {
  width: 34px; height: 34px; border-radius: 50%;
  background: #191F28; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ============ [2026-05-29] 메인홈 컴팩트 — 양옆 12px·위 여백 축소 ============
   전역 상단바(.app-header)는 그대로 두고 콘텐츠만 위로/양옆으로 붙임.
   모바일·PC 공통, 렌더 상태와 무관하게 안정적용(게이트 없음). 다른 탭·온보딩 무영향. */
/* !important: PC 분기의 #tab-home.tab(style-responsive.css)보다 우선. 하단 패딩(탭바 여백)은 보존 */
#tab-home { padding-top: 12px !important; padding-left: 12px !important; padding-right: 12px !important; }
#homePostConnect { padding-left: 0; padding-right: 0; }
#homeV41Root { padding: 0 !important; }
#tab-home .hv5-row { gap: 8px !important; margin-bottom: 8px !important; }