/* ==================================================================
   퇴근하자 — 페이지 v2.1 공통 CSS (= B9 빌드 Agent / 2026-05-16)
   SSOT 의존: DESIGN_SYSTEM_V1.md + APP_DESIGN_V1.md + SPEC_APP_BUILD_V2_1.md
   디자인 시스템: 베이지(#F5EFE6) + 그린(#1F6B3F) + 황금(#D4A24C)
   ================================================================== */

/* ====================
   디자인 토큰 (= DESIGN_SYSTEM_V1.md §2·§3·§6·§7 부합)
   ==================== */
:root {
  /* 컬러 */
  --color-base: #F5EFE6;
  --color-base-soft: #FAF4EB;
  --color-base-deep: #F0E5D2;
  --color-primary: #1F6B3F;
  --color-primary-dark: #154D2D;
  --color-primary-light: #2A8852;
  --color-accent: #D4A24C;
  --color-accent-dark: #B88A3E;
  --color-orange: #E08A3C;          /* 신규 / 데이터 라벨 14일 영역 */
  --color-orange-soft: #FCEEDD;
  --color-text-dark: #2A2620;
  --color-text-mid: #6B6258;
  --color-text-light: #9A9185;
  --color-white: #FFFFFF;
  --color-danger: #C44545;
  --color-danger-dark: #9A2C2C;     /* WCAG AA 정정 영역 (= D-1 카운트다운 cover / 컨트라스트 6.5+) */
  --color-danger-soft: #FAEAEA;
  --color-warn: #C57A1E;
  --color-warn-soft: #FBF4E7;
  --color-success: #4A9B6A;
  --color-success-soft: #ECF6F0;
  --color-border: #E5DDD0;

  /* 폰트 */
  --font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
                 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-hero: 36px;
  --font-h2: 28px;
  --font-h3: 20px;
  --font-lead: 18px;
  --font-body: 16px;
  --font-caption: 14px;
  --font-tiny: 13px;

  /* 간격 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* 라운드 */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* 그림자 */
  --shadow-card: 0 4px 20px rgba(42, 38, 32, 0.04);
  --shadow-card-hover: 0 12px 32px rgba(42, 38, 32, 0.08);
  --shadow-btn: 0 4px 16px rgba(31, 107, 63, 0.25);
  --shadow-fab: 0 8px 28px rgba(31, 107, 63, 0.45);
  --shadow-gold: 0 4px 16px rgba(212, 162, 76, 0.4);

  /* 레이아웃 */
  --sidebar-w: 240px;
}

@media (min-width: 768px) {
  :root {
    --font-hero: 56px;
    --font-h2: 36px;
    --font-h3: 24px;
    --font-lead: 20px;
    --font-body: 17px;
  }
}

/* ====================
   Reset + 기본
   ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family);
  color: var(--color-text-dark);
  background: var(--color-base);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; }

/* ====================
   App Shell (= APP_DESIGN_V1 §2.1·§2.2)
   ==================== */
.app { display: flex; min-height: 100vh; }

.app-sidebar {
  width: var(--sidebar-w);
  background: var(--color-white);
  border-right: 1px solid rgba(31, 107, 63, 0.08);
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
}
.app-sidebar__logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  padding: 8px 12px;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}
.app-sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.app-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 16px;                  /* H 정정 영역 (= 5+7 분리 / 컴맹 친화 15 → 16px) */
  font-weight: 500;
  color: var(--color-text-mid);
  transition: background .15s ease, color .15s ease;
  min-height: 48px;
}
.app-sidebar__item:hover { background: var(--color-base); color: var(--color-primary); }
.app-sidebar__item--active { background: var(--color-primary); color: var(--color-white); font-weight: 700; }
.app-sidebar__icon { font-size: 20px; width: 24px; text-align: center; }
.app-sidebar__divider { height: 1px; background: rgba(31, 107, 63, 0.08); margin: 12px 8px; }
.app-sidebar__bottom { margin-top: auto; padding-top: 8px; }

/* H 정정 영역 (= 5+7 분리 / 더보기 접힘 영역 / 2026-05-17) */
.app-sidebar__group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px 6px;
  margin-top: 4px;
}
.app-sidebar__more-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-mid);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  min-height: 44px;
}
.app-sidebar__more-btn:hover { background: var(--color-base); color: var(--color-primary); }
.app-sidebar__more-arrow {
  margin-left: auto;
  font-size: 14px;
  transition: transform .2s ease;
}
.app-sidebar__more-btn[aria-expanded="true"] .app-sidebar__more-arrow {
  transform: rotate(180deg);
}
.app-sidebar__more-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.app-sidebar__more-list--open {
  max-height: 600px;
}
/* 데스크탑 1280px+ = 디폴트 펼침 cover (= 사장님 진입 친화) */
@media (min-width: 1280px) {
  .app-sidebar__more-list {
    max-height: 600px;                /* 디폴트 펼침 / 햄버거 영역 X */
  }
}

.app-main {
  flex: 1;
  min-width: 0;                     /* I2 게이트 4 정정 영역 (= flex 자식 영역 overflow 방지 / 320·768 영역 cover) */
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding-bottom: 24px;
}

.app-header {
  background: var(--color-white);
  border-bottom: 1px solid rgba(31, 107, 63, 0.08);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
}
.app-header__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
}
.app-header__user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--color-text-mid);
}
.app-header__avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}

/* 모바일 하단 탭 */
.app-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-white);
  border-top: 1px solid rgba(31, 107, 63, 0.08);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(42, 38, 32, 0.06);
}
.app-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-light);
  min-height: 56px;
}
.app-tabbar__item--active { color: var(--color-primary); font-weight: 700; }
.app-tabbar__icon { font-size: 22px; }

@media (max-width: 767px) {
  .app-sidebar { display: none; }
  .app-main { margin-left: 0; padding-bottom: 80px; }
  .app-tabbar { display: flex; }
  .app-header { padding: 16px 20px; }
  .app-header__title { font-size: 18px; }
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px;
}
@media (max-width: 767px) {
  .container { padding: 20px; }
}

/* ====================
   페이지 헤더
   ==================== */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-head__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.page-head__sub {
  font-size: 15px;
  color: var(--color-text-mid);
  margin-top: 4px;
}

.section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

/* ====================
   버튼
   ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: none;
  min-height: 48px;
  letter-spacing: -0.01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 8px 24px rgba(31, 107, 63, 0.35); }
.btn-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-text-dark);
  box-shadow: var(--shadow-gold);
}
.btn-danger {
  background: var(--color-danger);
  color: var(--color-white);
}
.btn-ghost {
  background: transparent;
  color: var(--color-text-mid);
  border: 1px solid var(--color-border);
}
.btn-block { width: 100%; }
.btn-sm { padding: 10px 16px; font-size: 14px; min-height: 40px; }

/* ====================
   카드
   ==================== */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid rgba(31, 107, 63, 0.06);
  box-shadow: var(--shadow-card);
}
.card--soft { background: var(--color-base); }
.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
}
.card__sub {
  font-size: 13px;
  color: var(--color-text-light);
}

/* ====================
   FAB 컴포넌트 (= 우측 하단 고정 / SPEC §2.2.1)
   영감: snapchat 85017 + edits 21558
   ==================== */
.fab-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  z-index: 200;
}
@media (max-width: 767px) {
  .fab-stack { bottom: 80px; right: 16px; }
}
.fab {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-fab);
  transition: transform .15s ease, box-shadow .15s ease;
  color: var(--color-white);
}
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab:active { transform: scale(0.95); }
.fab--camera { background: var(--color-primary); }
.fab--mic { background: var(--color-accent); color: var(--color-white); }
.fab--lg { width: 64px; height: 64px; font-size: 30px; }

/* ====================
   QR 카드 컴포넌트 (= SPEC §2.2.2·§2.2.3)
   영감: fetch 11760 + rover 13209 + zora 68263
   ==================== */
.qr-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-card);
  max-width: 360px;
}
.qr-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.qr-card__icon { font-size: 24px; }
.qr-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
}
.qr-card__image-wrap {
  background: var(--color-white);
  border: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  width: 224px;
  height: 224px;
}
.qr-card__image {
  width: 192px;
  height: 192px;
  display: block;
}
.qr-card__code {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  font-family: 'Menlo', 'Consolas', monospace;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.qr-card__expiry {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: 16px;
}
.qr-card__share {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.qr-card__share-btn {
  padding: 10px 14px;
  background: var(--color-base);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
}
.qr-card__share-btn:hover { background: var(--color-base-deep); }
.qr-card__hint {
  font-size: 13px;
  color: var(--color-text-mid);
  text-align: center;
  line-height: 1.5;
}

/* ====================
   배지 (= 황금 + 펄스 영역 / SPEC §1.2.3)
   ==================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.badge--primary { background: var(--color-primary); color: var(--color-white); }
.badge--gold {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-text-dark);
}
.badge--gold-pulse {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-text-dark);
  animation: pulse-gold 2s ease-in-out infinite;
}
.badge--soft { background: var(--color-base); color: var(--color-primary); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--green-dot { background: var(--color-success-soft); color: var(--color-success); }
.badge--yellow-dot { background: var(--color-warn-soft); color: var(--color-warn); }
.badge--orange-dot { background: var(--color-orange-soft); color: var(--color-orange); }

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 162, 76, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(212, 162, 76, 0); }
}

/* ====================
   입력
   ==================== */
.input {
  width: 100%;
  padding: 16px 20px;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 16px;
  color: var(--color-text-dark);
  font-family: inherit;
  min-height: 52px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(31, 107, 63, 0.12);
}
.input::placeholder { color: var(--color-text-light); }

.field { margin-bottom: 16px; }
.field__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-mid);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.select {
  width: 100%;
  padding: 14px 18px;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 16px;
  color: var(--color-text-dark);
  font-family: inherit;
  min-height: 48px;
  cursor: pointer;
}

/* 라디오 영역 */
.radio-list { display: flex; flex-direction: column; gap: 10px; }
.radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-base);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 2px solid transparent;
}
.radio-item:has(input:checked) { border-color: var(--color-primary); background: var(--color-success-soft); }
.radio-item input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.radio-item__label { font-size: 15px; font-weight: 600; color: var(--color-text-dark); flex: 1; }
.radio-item__hint { font-size: 13px; color: var(--color-text-mid); }

/* 슬라이더 */
.slider-wrap {
  margin-top: 12px;
  padding: 16px;
  background: var(--color-base);
  border-radius: var(--radius-md);
}
.slider-wrap__head {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--color-text-mid);
  margin-bottom: 8px;
}
.slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border);
  border-radius: var(--radius-full);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-card);
}
.slider::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid var(--color-white);
}
.slider-value {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary);
  margin-top: 6px;
}

/* 토글 */
.toggle {
  position: relative;
  display: inline-block;
  width: 48px; height: 28px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: background .2s ease;
}
.toggle__slider::before {
  position: absolute;
  content: "";
  height: 22px; width: 22px;
  left: 3px; bottom: 3px;
  background: var(--color-white);
  border-radius: 50%;
  transition: transform .2s ease;
}
.toggle input:checked + .toggle__slider { background: var(--color-primary); }
.toggle input:checked + .toggle__slider::before { transform: translateX(20px); }

/* ====================
   알림
   ==================== */
.alert {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.alert__icon { font-size: 20px; flex-shrink: 0; }
.alert--info { background: var(--color-base); border-left: 4px solid var(--color-primary); }
.alert--warn { background: var(--color-warn-soft); border-left: 4px solid var(--color-accent); }
.alert--danger { background: var(--color-danger-soft); border-left: 4px solid var(--color-danger); }
.alert--success { background: var(--color-success-soft); border-left: 4px solid var(--color-success); }

/* ====================
   표
   ==================== */
.data-table {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(31, 107, 63, 0.06);
  box-shadow: var(--shadow-card);
  border-collapse: separate;
  border-spacing: 0;
}
.data-table th {
  background: var(--color-base);
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-mid);
  text-align: left;
  letter-spacing: -0.01em;
}
.data-table td {
  padding: 16px 20px;
  font-size: 15px;
  color: var(--color-text-dark);
  border-top: 1px solid rgba(31, 107, 63, 0.06);
  vertical-align: middle;
}
.data-table tr:hover td { background: var(--color-base-soft); }

@media (max-width: 767px) {
  .data-table--responsive { display: none; }
}

/* KPI strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid rgba(31, 107, 63, 0.06);
  box-shadow: var(--shadow-card);
}
@media (max-width: 767px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
.kpi-strip__item {
  text-align: center;
  border-right: 1px solid rgba(31, 107, 63, 0.06);
  padding: 4px 0;
}
.kpi-strip__item:last-child { border-right: none; }
.kpi-strip__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kpi-strip__label {
  font-size: 13px;
  color: var(--color-text-mid);
  font-weight: 600;
  margin-top: 4px;
}
.kpi-strip__value--success { color: var(--color-success); }
.kpi-strip__value--danger { color: var(--color-danger); }
.kpi-strip__value--warn { color: var(--color-warn); }

/* KPI grid (= dashboard 영역) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1023px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } }

.stat-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 22px;
  border: 1px solid rgba(31, 107, 63, 0.06);
  box-shadow: var(--shadow-card);
}
.stat-card__label {
  font-size: 14px;
  color: var(--color-text-mid);
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.stat-card__value {
  font-size: 30px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat-card__sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-success);
  font-weight: 600;
}
.stat-card__sub--danger { color: var(--color-danger); }
.stat-card__sub--warn { color: var(--color-accent-dark); }

/* ====================
   탭
   ==================== */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-mid);
  border: none;
  background: transparent;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  min-height: 44px;
}
.tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ====================
   필터 칩
   ==================== */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 10px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-mid);
  min-height: 40px;
}
.filter-chip--active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ====================
   text-overflow 보호 (= 게이트 2 부합)
   ==================== */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====================
   토스트
   ==================== */
.toast-area {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--color-text-dark);
  color: var(--color-white);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: toast-in .25s ease-out;
  max-width: 90vw;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ====================
   포커스 표시 (= 50대 친화 / 게이트 3 부합)
   ==================== */
:focus-visible {
  outline: 4px solid rgba(31, 107, 63, 0.4);
  outline-offset: 2px;
}

/* ====================
   반응형 헬퍼
   ==================== */
.hide-mobile { }
.show-mobile { display: none; }
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block; }
}

/* ====================
   PWA 진입 안내 영역
   ==================== */
.pwa-prompt {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  display: none;
  align-items: center;
  gap: 12px;
  z-index: 300;
}
.pwa-prompt--show { display: flex; }
.pwa-prompt__body { flex: 1; font-size: 14px; line-height: 1.5; }
.pwa-prompt__btn {
  padding: 8px 14px;
  background: var(--color-white);
  color: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
}

/* ==================================================================
   B14 V3 신규 영역 (= 2026-05-17 / dashboard 7일차 결제 훅 6 component)
   SSOT: SPEC_APP_BUILD_V3.md §2 + COPY_SSOT_V4.md §1~§5 + REFERRAL_FLOW v1
   결정 93 (= 7일차 자물쇠 훅) + 결정 95 (= 지인 0원) + 결정 97 (= 추천 영상)
   ================================================================== */

/* ====================
   component 1: 블러 + 자물쇠 차트 (= COPY v4 §1.3·§1.4)
   ==================== */
.chart-locked {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid rgba(31, 107, 63, 0.06);
  box-shadow: var(--shadow-card);
  min-height: 240px;
  overflow: hidden;
}
.chart-locked .chart-content {
  filter: blur(5px) opacity(0.65);   /* I2 정정 영역 (= 시각 인식 가능 / 호기심 자극 / opacity 0.4 → 0.65) */
  pointer-events: none;
  user-select: none;
  transition: filter 1s ease;
}
/* hover 1초 풀림 영역 (= 사장님 호기심 결제 훅 강화 / I2 §3) */
.chart-locked:hover .chart-content {
  filter: blur(0) opacity(1);
}
.chart-locked .chart-lock-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 10;
  width: 90%;
  text-align: center;
}
.chart-locked .chart-lock-icon {
  font-size: 64px;
  color: var(--color-accent);
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(212, 162, 76, 0.45));
}
.chart-locked .chart-lock-copy {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.5;
  letter-spacing: -0.02em;
  max-width: 280px;
}
.chart-locked .chart-lock-cta {
  margin-top: 4px;
  padding: 12px 22px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  letter-spacing: -0.01em;
}
.chart-locked .chart-lock-cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

/* 차트 자물쇠 풀린 애니메이션 (= 결제 후) */
.chart-unlocked .chart-content {
  filter: blur(0) opacity(1);
  pointer-events: auto;
  animation: chart-unlock 1.2s ease-out;
}
.chart-unlocked .chart-lock-overlay {
  display: none;
}
@keyframes chart-unlock {
  0%   { filter: blur(8px) opacity(0.4); }
  50%  { filter: blur(2px) opacity(0.7); }
  100% { filter: blur(0) opacity(1); }
}

.chart-locked-content-placeholder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 200px;
  padding: 12px;
}
.chart-locked-bar {
  height: 22px;                   /* I2 정정 영역 (= 18px → 22px 시각 강화) */
  background: linear-gradient(90deg, var(--color-primary-light), var(--color-accent));
  border-radius: var(--radius-sm);
  opacity: 1;                     /* I2 정정 영역 (= 0.7 → 1 / .chart-content 영역 opacity 0.65 cover) */
  box-shadow: 0 2px 8px rgba(31, 107, 63, 0.18);   /* I2 정정 영역 (= 시각 인식 강화) */
}
.chart-locked-bar:nth-child(1) { width: 65%; }
.chart-locked-bar:nth-child(2) { width: 82%; }
.chart-locked-bar:nth-child(3) { width: 48%; }
.chart-locked-bar:nth-child(4) { width: 73%; }
.chart-locked-bar:nth-child(5) { width: 90%; }

.chart-locked-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.chart-locked--wide { grid-column: span 2; }
@media (max-width: 767px) {
  .chart-locked-grid { grid-template-columns: 1fr !important; }
  .chart-locked--wide { grid-column: auto !important; }
}
@media (max-width: 480px) {
  .chart-locked-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .chart-locked--wide { grid-column: auto !important; }
}

/* ====================
   component 2: D-1 카운트다운 sticky bar (= COPY v4 §2)
   ==================== */
.d1-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 110;
  background: var(--color-base-deep);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 2px solid var(--color-danger);
  box-shadow: 0 4px 12px rgba(196, 69, 69, 0.12);
}
.d1-countdown {
  color: var(--color-danger-dark);   /* WCAG AA 정정 영역 (= #9A2C2C / 컨트라스트 6.5+ / 베이지 deep 배경 부합) */
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.d1-pressure-copy {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.d1-pressure-copy small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-mid);
}
.d1-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.d1-cta {
  padding: 10px 20px;
  background: var(--color-accent);
  color: var(--color-text-dark);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 800;
  min-height: 40px;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  letter-spacing: -0.01em;
}
.d1-cta:hover { background: var(--color-accent-dark); transform: translateY(-1px); }
.d1-safety-copy {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-mid);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .d1-sticky-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
  }
  .d1-cta-wrap { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .d1-pressure-copy { font-size: 13px; }
}

/* ====================
   component 3 정정 영역 (= I2 M Agent / 2026-05-17)
   영상 component 영원 폐기 (= R-Sidebiz-11 부합 / 박대표 시간 0건)
   대체 = 정적 절약 배너 + 손실 회피 카피 (= 황금 + 베이지 토큰)
   ==================== */
.savings-banner {
  margin: 0 0 28px;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--color-warn-soft) 0%, var(--color-base-soft) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 162, 76, 0.35);
  box-shadow: var(--shadow-card);
}
.savings-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.savings-banner__main { flex: 1; }
.savings-banner__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-mid);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.savings-banner__value {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-primary-dark);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.savings-banner__loss {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-danger);
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.savings-banner__cta {
  padding: 14px 22px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: var(--shadow-btn);
}
.savings-banner__cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}
@media (max-width: 767px) {
  .savings-banner { padding: 20px; }
  .savings-banner__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .savings-banner__value { font-size: 28px; }
  .savings-banner__cta { width: 100%; justify-content: center; }
}

/* ====================
   component 5b 정정 영역 (= I2 M Agent / 2026-05-17)
   7일차 추천 CTA 한 줄 배너 (= COPY v4 §5.3 verbatim 인용)
   산만하지 않게 = 한 줄 영역 / 베이지 soft 영역
   ==================== */
.trial-referral-strip {
  margin: 0 0 24px;
  padding: 14px 20px;
  background: var(--color-base-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 14px;
}
.trial-referral-strip__icon {
  font-size: 24px;
  flex-shrink: 0;
}
.trial-referral-strip__body { flex: 1; min-width: 0; }
.trial-referral-strip__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-dark);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.trial-referral-strip__sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-mid);
  letter-spacing: -0.01em;
  margin-top: 2px;
  line-height: 1.4;
}
.trial-referral-strip__cta {
  padding: 10px 16px;
  background: var(--color-accent);
  color: var(--color-text-dark);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.trial-referral-strip__cta:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}
@media (max-width: 767px) {
  .trial-referral-strip { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .trial-referral-strip__cta { width: 100%; justify-content: center; }
}

/* ====================
   component 4: 결제 후 자물쇠 풀린 UX (= COPY v4 §4)
   ==================== */
.paid-hero {
  margin: 0 0 24px;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--color-success-soft), var(--color-base-soft));
  border-radius: var(--radius-lg);
  border-left: 5px solid var(--color-success);
}
.paid-hero__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.3;
}
.paid-hero__sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-mid);
  line-height: 1.5;
}
.setup-progress-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid rgba(31, 107, 63, 0.06);
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
}
.setup-progress-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.setup-step-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.setup-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-base);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border);
}
.setup-step--done {
  background: var(--color-success-soft);
  border-left-color: var(--color-success);
}
.setup-step--current {
  background: var(--color-warn-soft);
  border-left-color: var(--color-accent);
}
.setup-step__icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.2;
}
.setup-step__body { flex: 1; }
.setup-step__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.4;
}
.setup-step__eta {
  font-size: 13px;
  color: var(--color-text-mid);
  margin-top: 2px;
}

/* ====================
   component 5: 친구 추천 배너 (= COPY v4 §5.3·§5.4 + REFERRAL §5.1)
   ==================== */
.referral-banner {
  margin: 0 0 28px;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--color-base-soft) 0%, var(--color-warn-soft) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 162, 76, 0.25);
  box-shadow: var(--shadow-card);
}
.referral-banner__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.4;
}
.referral-banner__codes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.referral-copy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-dark);
  min-height: 48px;
  cursor: pointer;
  text-align: left;
  letter-spacing: -0.01em;
}
.referral-copy-btn:hover { background: var(--color-base); }
.referral-copy-btn.copied {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}
.referral-copy-btn strong {
  color: var(--color-primary);
  font-family: 'Menlo', 'Consolas', monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.referral-banner__share {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.referral-share-btn {
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-dark);
  min-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  letter-spacing: -0.01em;
}
.referral-share-btn:hover { background: var(--color-base); }
.referral-share-telegram { background: #229ED9; color: #FFFFFF; border-color: #229ED9; }
.referral-share-telegram:hover { background: #1B86B8; }
.referral-share-copy { background: var(--color-base); color: var(--color-text-dark); border-color: var(--color-border); }
.referral-share-copy:hover { background: var(--color-bg); }
.referral-banner__stats {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-mid);
  text-align: center;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}
.referral-banner__stats strong {
  color: var(--color-primary);
  font-weight: 800;
  font-size: 16px;
}
@media (max-width: 480px) {
  .referral-banner__share { grid-template-columns: 1fr 1fr; }
}

/* ====================
   component 6: 지인 무료 배지 (= REFERRAL §5.2 + COPY v4 §5.1)
   ==================== */
.badge-founder-referral {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-text-dark);     /* WCAG AA 정정 영역 (= #2A2620 / 황금 배경 컨트라스트 7+ / 디자인 시스템 부합) */
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 800;                  /* 정정 영역 (= 700 → 800 / 가독성 보강) */
  box-shadow: var(--shadow-gold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.badge-founder-referral__icon {
  font-size: 14px;
  line-height: 1;
}

.founder-referral-strip {
  margin: 0 0 24px;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  border-radius: var(--radius-lg);
  color: var(--color-text-dark);     /* WCAG AA 정정 영역 (= 황금 배경 일관 / badge-founder-referral 영역 부합) */
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-gold);
}
.founder-referral-strip__icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.founder-referral-strip__body { flex: 1; }
.founder-referral-strip__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 2px;
}
.founder-referral-strip__sub {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.92;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .founder-referral-strip { flex-direction: row; padding: 12px 16px; }
  .founder-referral-strip__title { font-size: 14px; }
  .founder-referral-strip__sub { font-size: 12px; }
}