/*******************************************************************************
** 집잘알 디자인 토큰 시스템
** 모든 컴포넌트에서 공통으로 사용되는 디자인 토큰
*******************************************************************************/

:root {
  /* 집잘알 브랜드 컬러 토큰 */
  --primary: #0166FF; /* 메인 브랜드 컬러 */
  --primary-80: #2E81FF; /* 80% 투명 */
  --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: #9BA0A6; /* 비활성 텍스트 (비활성 회색) */
  
  /* 배경 토큰 */
  --bg-primary: #FFFFFF; /* 카드, 입력 필드 배경 */
  --bg-secondary: #FAFAFA; /* 페이지 전체 배경 */
  --bg-tertiary: #F0F4F6; /* 비활성 배경 */
  
  /* 테두리 토큰 */
  --border-light: #E9EBED; /* 연한 구분선 */
  --border-semilight: #E4E5ED; /* 연한 구분선 */
  --border-medium: #c4cad1; /* 일반 구분선 */
  --border-strong: #64768C; /* 강한 구분선 */
  
  --divider: #F0F4F6;
  
  /* 상태 컬러 */
  --error: #EF4444; /* 오류/경고 */
  --info: #5E9EFF; /* 정보 */
  --warning: #F59E0B; /* 경고 */
  --success: #10B981; /* 성공 */
  
  /* 집잘알 반응형 여백 토큰 */
  --space-2-6: clamp(2px, calc(2px + (100vw - 380px) * 0.05), 6px);
  --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-10-14: clamp(10px, calc(10px + (100vw - 380px) * 0.05), 14px);
  --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; /* 최대 컨테이너 너비 */
  --nav-height: 70px;
  
  /* 집잘알 보더 반경 토큰 */
  --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); overflow: hidden; }

/* === 집잘알 PAGE LAYOUT SYSTEM === */
/* 600px 기준 반응형 컨테이너 토큰 */
/* 
* 사용법:
* <div class="page-wrapper">
*   <div class="page-nav">
*     <div class="page-nav-content">
*       <div class="page-nav-left">뒤로/닫기버튼</div>
*       <div class="page-nav-center">제목</div>
*       <div class="page-nav-right">메뉴</div>
*     </div>
*   </div>
*   <div class="page-container">
*     <div class="page-content">...</div>
*   </div>
* </div>
*/

.page-wrapper { background: var(--bg-tertiary); min-height: 100dvh; padding: 0; }
.page-container { width: min(100%, var(--container-max)); margin: 0 auto; background: var(--bg-primary); padding: 0; display: flex; overflow: visible;
  flex-direction: column; min-height: calc(100dvh - 60px); }
.page-content { padding: var(--space-16-24); flex: 1; overflow-x: hidden; }

/* 600px 이상에서 카드 스타일 적용 */
@media (min-width: 600px) {
  .page-wrapper { padding: 90px 20px 30px 20px; }
  .page-container { border-radius: 12px; box-shadow: 0 4px 12px rgba(49, 56, 66, 0.03); min-height: calc(100dvh - 110px); }
  .page-content { padding: var(--space-16-24); }
}

/* 집잘알 Divider 컴포넌트 (구분선) - 섹션 구분용 */
.divider { width: 100vw; max-width: 100vw; height: 8px; 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%); }
}

.section-divider { width: 100vw; max-width: 100vw; height: 8px; background: var(--bg-tertiary); box-shadow: inset 0px 4px 4px 0px rgba(177, 184, 192, 0.05); margin: 0; margin-left: calc(-50vw + 50%); border: none; border-radius: 0; }
.divider-thin { height: 1px; background: var(--border-light); margin: 0; }

@media (min-width: 600px) {
  .section-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"/>
* 점3개: <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); }