/* ============================================================
   iWebple Core — 공통 디자인 토큰 & 규칙
   모든 테마/빌더 디자인이 이 파일을 물려받는다.
   여기서 정한 것: 폰트(Pretendard), 컨테이너 1600px, 색상 토큰,
   반응형 브레이크포인트(태블릿 1024 / 모바일 768).
   ============================================================ */

/* --- Pretendard 웹폰트 (CDN) --- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* 폰트 */
  --iw-font: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 레이아웃 */
  --iw-container: 1600px;   /* 꽉 찬 기본 폭 */
  --iw-gutter: 30px;        /* 좌우 안전 여백 */
  --iw-section-y: 90px;     /* 섹션 상하 기본 여백(PC) */

  /* 색상 토큰 (기업 톤: 선명·모던) — 디자인에서 var()로 참조 */
  --iw-ink: #141a1f;        /* 본문 진한 글자 */
  --iw-body: #4c565e;       /* 본문 회색 글자 */
  --iw-muted: #8a939b;      /* 보조 텍스트 */
  --iw-line: #e3e6e9;       /* 구분선 */
  --iw-bg: #ffffff;         /* 기본 배경 */
  --iw-bg-soft: #f4f6f8;    /* 옅은 배경 */
  --iw-brand: #1a5fb4;      /* 기본 포인트색(디자인별 --iw-accent로 덮어씀) */

  /* 반응형 브레이크포인트(참고용 주석 — 미디어쿼리에서 직접 사용) */
  /* 태블릿: max-width 1024px / 모바일: max-width 768px */
}

/* --- 공통 컨테이너: 1600px 꽉 참, 가운데 정렬 ---
   ★ 규칙: 최상위 wrap에 외부 패딩(예: 80px 60px) 넣지 않음.
   좌우는 gutter만, 상하는 섹션 안쪽에서 처리. (박경호 원칙) */
.iw-container {
  width: 100%;
  max-width: var(--iw-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--iw-gutter);
  padding-right: var(--iw-gutter);
}

/* --- 섹션 공통: 상하 여백만, 좌우 외부 패딩 없음 --- */
.iw-section {
  font-family: var(--iw-font);
  padding-top: var(--iw-section-y);
  padding-bottom: var(--iw-section-y);
  color: var(--iw-body);
}

/* --- 엔터=br 한 칸: 본문 텍스트는 줄바꿈 보존 --- */
.iw-richtext {
  white-space: normal;
  line-height: 1.85;
}

/* --- 이미지 기본 --- */
.iw-section img { display: block; max-width: 100%; }

/* ============================================================
   반응형 — 모든 디자인이 자동 대응.
   좌우 2단 레이아웃은 각 디자인 CSS에서 아래 브레이크포인트를 써서
   모바일에서 1단으로 전환한다. (여기선 공통 폭·여백만 축소)
   태블릿: 넓은 레이아웃 유지하되 폭/여백 축소 (2단계 기본)
   ============================================================ */

/* 태블릿 (~1024px): 여백만 줄이고 레이아웃은 유지 */
@media (max-width: 1024px) {
  :root {
    --iw-section-y: 64px;
    --iw-gutter: 24px;
  }
}

/* 모바일 (~768px): 여백 더 축소 (2단→1단 전환은 각 디자인에서) */
@media (max-width: 768px) {
  :root {
    --iw-section-y: 48px;
    --iw-gutter: 18px;
  }
}