/*******************************************************************************
** 집잘알 디자인 토큰 시스템
** 모든 페이지에서 공통으로 사용되는 브랜드 디자인 토큰
*******************************************************************************/

:root {
    /* 🎨 집잘알 브랜드 컬러 시스템 */
    --primary: #0166FF;         /* 메인 브랜드 컬러 */
    --primary-60: #5E9EFF;      /* 60% 밝기 */
    --primary-40: #9FC8FF;      /* 40% 밝기 */
    --primary-20: #E3EFFF;      /* 20% 밝기 */
    --primary-10: #EAF3FF;      /* 10% 밝기 (배경용) */
     
    /* 서브 컬러 시스템 */
    --secondary: #64768C;       /* 서브 컬러 */
    --secondary-light: #B1B8C0; /* 연한 서브 컬러 */
    --secondary-lighter: #D6DADF; /* 가장 연한 서브 컬러 */
         
    /* 텍스트 컬러 시스템 */
    --text-primary: #1A1E27;    /* 주요 텍스트 (진한 회색) */
    --text-secondary: #6D7788;  /* 보조 텍스트 (중간 회색) */
    --text-tertiary: #B1B8C0;   /* 비활성 텍스트 (연한 회색) */
     
    /* 배경 시스템 */
    --bg-primary: #FFFFFF;      /* 카드, 입력 필드 배경 */
    --bg-secondary: #FAFAFA;    /* 페이지 전체 배경 */
    --bg-tertiary: #F0F4F6;     /* 비활성 영역 */
             
    /* 테두리 시스템 */
    --border-light: #E9EBED;    /* 연한 구분선 */
    --border-medium: #B1B8C0;   /* 일반 구분선 */
    --border-strong: #64768C;   /* 강조 구분선 */
  
    --divider: #F0F4F6;
             
    /* 시맨틱 컬러 */
    --error: #EF4444;           /* 에러/위험 */
    --info: #5E9EFF;            /* 정보 */
    --warning: #F59E0B;         /* 경고 */
    --success: #10B981;         /* 성공 */
    
     
    /* 📐 반응형 간격 시스템 */
    --space-4-8: clamp(4px, calc(4px + (100vw - 380px) * 0.05), 8px);
    --space-6-10: clamp(6px, calc(6px + (100vw - 380px) * 0.05), 10px);
    --space-8-12: clamp(8px, calc(8px + (100vw - 380px) * 0.05), 12px);
    --space-12-16: clamp(12px, calc(12px + (100vw - 380px) * 0.05), 16px);
    --space-14-18: clamp(14px, calc(14px + (100vw - 380px) * 0.05), 18px);
    --space-16-20: clamp(16px, calc(16px + (100vw - 380px) * 0.05), 20px);
    --space-16-24: clamp(16px, calc(16px + (100vw - 380px) * 0.05), 24px);
    --space-20-24: clamp(20px, calc(20px + (100vw - 380px) * 0.05), 24px);
    --space-16-30: clamp(16px, calc(16px + (100vw - 380px) * 0.038), 30px);
    --space-22-36: clamp(22px, calc(22px + (100vw - 380px) * 0.038), 36px);
    --space-20-28: clamp(20px, calc(20px + (100vw - 380px) * 0.038), 28px);
    --space-24-32: clamp(24px, calc(24px + (100vw - 380px) * 0.038), 32px);
    --space-32-40: clamp(32px, calc(32px + (100vw - 380px) * 0.038), 40px);
    --space-40-48: clamp(40px, calc(40px + (100vw - 380px) * 0.038), 48px);
  
    /* 📦 레이아웃 시스템 */
    --container-max: 600px;     /* 최대 컨테이너 너비 */
    
    /* 🎯 네이티브 앱 스타일 토큰 */
    --radius-xs: 6px;           /* 작은 둥근 모서리 */
    --radius-sm: 8px;           /* 기본 둥근 모서리 */
    --radius-md: 12px;          /* 중간 둥근 모서리 */
    --radius-lg: 16px;          /* 큰 둥근 모서리 */
    --radius-xl: 20px;          /* 매우 큰 둥근 모서리 */
    --radius-full: 9999px;      /* 완전 둥근 모서리 */
    
    /* 그림자 시스템 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(1, 102, 255, 0.1);
    --shadow-xl: 0 20px 25px rgba(1, 102, 255, 0.15);
  
  
      /* 🔤 반응형 타이포그래피 */
      --fs-11-14: clamp(11px, calc(11px + (100vw - 320px) * 0.025), 12.5px);  /* 작은 텍스트 */
      --fs-12-16: clamp(12px, calc(12px + (100vw - 320px) * 0.0333), 14px);   /* 작은 본문 */
      --fs-13-17: clamp(13px, calc(13px + (100vw - 320px) * 0.0333), 15px);   /* 작은 본문 */
      --fs-14-18: clamp(14px, calc(14px + (100vw - 320px) * 0.0333), 16px);   /* 본문 */
      --fs-16-20: clamp(16px, calc(16px + (100vw - 320px) * 0.0333), 18px);   /* 서브제목 */
      --fs-18-22: clamp(18px, calc(18px + (100vw - 320px) * 0.0333), 20px);   /* 제목 */
      --fs-20-24: clamp(20px, calc(20px + (100vw - 320px) * 0.0333), 22px);
      --fs-22-28: clamp(22px, calc(22px + (100vw - 320px) * 0.0333), 24px);   /* 큰 제목 */
      --fs-24-32: clamp(24px, calc(24px + (100vw - 320px) * 0.0667), 28px);   /* 디스플레이 */  
}

@media (min-width: 380px) {
    :root {
      /* 380px 이상에서 타이포그래피 최적화 */
      --fs-11-14: clamp(12.5px, calc(12.5px + (100vw - 380px) * 0.00682), 14px);
      --fs-12-16: clamp(14px, calc(14px + (100vw - 380px) * 0.00909), 16px);
      --fs-13-17: clamp(15px, calc(15px + (100vw - 380px) * 0.00909), 17px);
      --fs-14-18: clamp(16px, calc(16px + (100vw - 380px) * 0.00909), 18px);
      --fs-16-20: clamp(18px, calc(18px + (100vw - 380px) * 0.00909), 20px);
      --fs-18-22: clamp(20px, calc(20px + (100vw - 380px) * 0.00909), 22px);
      --fs-20-24: clamp(22px, calc(22px + (100vw - 380px) * 0.00909), 24px);
      --fs-22-28: clamp(24px, calc(24px + (100vw - 380px) * 0.01818), 28px);
      --fs-24-32: clamp(28px, calc(28px + (100vw - 380px) * 0.01818), 32px);
    }
  }


/*공통 컴포넌트*/
.page-section {
  background: var(--bg-secondary);
  padding: 32px 16px;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* 600px 이상에서만 조정 */
@media (min-width: 600px) {
  .page-section {
    padding: 40px 20px;
  }
}

/* 600px 이하에서 전체 화면 활용 */
@media (max-width: 600px) {
  .page-section {
    padding: 0;
  }
}

.app-container {
width: min(100%, var(--container-max));
margin: 0 auto;
background: var(--bg-primary);
padding: 0;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(1, 102, 255, 0.08);
border: 1px solid rgba(1, 102, 255, 0.1);
/* bleed 요소가 둥근 모서리 안에서 깔끔히 잘리도록 */
overflow: hidden;
}


/* 🔄 Divider 컴포넌트 (공용) - 피그마 디자인 기반 */
.divider {
  width: 100vw;
  max-width: 100vw;
  height: 10px;
  background: #F0F4F6;
  box-shadow: inset 0px 4px 4px 0px rgba(177, 184, 192, 0.07);
  margin: 24px 0;
  margin-left: calc(-50vw + 50%);
  border: none;
  border-radius: 0;
}

/* 데스크탑에서 컨테이너 최대 너비에 맞춰 제한 */
@media (min-width: 481px) {
.divider {
  width: var(--container-max);
  max-width: var(--container-max);
  margin-left: calc(-1 * var(--container-max) / 2 + 50%);
}
}

/* ═══ 🧩 NAVBAR COMPONENT ═══ */
/* 유연한 네비게이션 바 컴포넌트 - 3-slot 구조 */
/* 
* 📚 자주 사용할 Heroicons:
* 
* 뒤로가기: <path d="M15 19l-7-7 7-7"/>
* 메뉴: <path d="M4 6h16M4 12h16M4 18h16"/>  
* 검색: <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
* 설정: <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
* 닫기: <path d="M6 18L18 6M6 6l12 12"/>
* 체크: <path d="M5 13l4 4L19 7"/>
* 더보기: <path d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zM12 13a1 1 0 110-2 1 1 0 010 2zM12 20a1 1 0 110-2 1 1 0 010 2z"/>
* 편집: <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
*/

.as-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-8-12) var(--space-16-30);
}

.as-navbar-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 44px;
  gap: 8px;
}

/* 왼쪽 슬롯 */
.as-navbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}

/* 중앙 슬롯 */
.as-navbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

/* 우측 슬롯 */
.as-navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

/* 네비바 요소들 */
.as-navbar-title {
  font-size: var(--fs-16-20);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
}

.as-navbar-button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.as-navbar-button:hover {
  background: var(--bg-tertiary);
}

.as-navbar-button.primary {
  color: var(--primary);
}

.as-navbar-icon {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border-radius: 4px;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.as-navbar-icon:hover {
  color: var(--text-primary);
}