/* ============================================
   레이아웃 — 모바일 기본 + 태블릿/데스크탑 반응형

   - ~767px        : 모바일 (기본)
   - 768~1199px    : 태블릿
   - 1200px~       : 데스크탑

   구조:
   - 헤더/탭바 = 화면 끝까지 가로로 (전체 너비)
   - 안쪽 콘텐츠만 = 1200px 박스로 가운데 정렬
   ============================================ */

/* ===== 앱 전체 컨테이너 ===== */
.app-container {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  min-height: 100vh;
  margin: 0 auto;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
}

/* ===== 상단 헤더: 화면 끝까지 가로 ===== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-top: env(safe-area-inset-top);

  /* 화면 끝까지 늘리는 트릭 */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);

  display: flex;
  align-items: center;
  justify-content: center;
}

.app-title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ===== 메인 콘텐츠 영역 ===== */
.app-main {
  flex: 1;
  padding: var(--space-md);
  padding-bottom: calc(var(--tabbar-height) + var(--space-md));
}

/* ===== 하단 탭바: 화면 끝까지 가로 ===== */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--tabbar-height);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: center;
}

/* 탭바 내부 콘텐츠 (안쪽만 1200px 제한) */
.tab-bar-inner {
  width: 100%;
  max-width: var(--max-width);
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  color: var(--color-text-secondary);
  transition: color 0.2s;
}

.tab-item.active {
  color: var(--color-primary);
}

.tab-icon {
  font-size: var(--font-xl);
}

.tab-label {
  font-size: var(--font-xs);
  font-weight: 500;
}

/* ============================================
   태블릿 (768px ~ 1199px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1199px) {
  .app-container {
    max-width: var(--max-width-tablet);
  }

  .tab-bar-inner {
    max-width: var(--max-width-tablet);
  }

  .app-main {
    padding: var(--space-lg);
    padding-bottom: calc(var(--tabbar-height) + var(--space-lg));
  }

  .app-title {
    font-size: var(--font-xl);
  }
}

/* ============================================
   데스크탑 (1200px 이상)
   ============================================ */
@media (min-width: 1200px) {
  .app-container {
    max-width: var(--max-width-desktop);
  }

  .tab-bar-inner {
    max-width: var(--max-width-desktop);
  }

  .app-main {
    padding: var(--space-xl);
    padding-bottom: calc(var(--tabbar-height) + var(--space-xl));
  }

  .app-title {
    font-size: var(--font-2xl);
  }

  .tab-icon {
    font-size: var(--font-2xl);
  }

  .tab-label {
    font-size: var(--font-sm);
  }
}