@charset "utf-8";

/********************
*********************
****** common *******
*********************
*********************/

#pc .pc_sub { display:block; }
#pc .mobile_sub { display:none; }
#mobile .pc_sub { display:none; }
#mobile .mobile_sub { display:block; padding:0 2%; }
#mobile .conTit { display:none; }
#pc br.pc { display:block; }
#pc br.mobile { display:none; }
#mobile br.pc { display:none; }
#mobile br.mobile { display:block; }

#mobile .mobile_sub h2, #mobile .mobile_sub h3 { color:#224ecc !important; }
#mobile .mobile_sub .strong, #mobile .mobile_sub .strong a { color:#363636 !important; }
#mobile .mobile_sub h2 { font-size:15px }
#mobile .mobile_sub p{margin:0 0 20px 0}
#mobile .mobile_sub .box{padding:10px;background:#ececec;border-radius:5px;margin-bottom:5px}

/* 이용약관, 개인정보취급방침, 이메일무단수집거부 */
.policy{font-size:16px;line-height:150%;color:#464646;}
.policy p{font-size:16px;margin:20px 0;}
.policy p strong{font-weight:600;}
.policy h2{font-size:35px;font-weight:600;margin-bottom:100px;text-align:center;color:#000;}
.policy h3{font-size:20px;font-weight:600 !important;color:#102c51;font-weight:normal;text-align:left !important;margin:70px auto 20px !important;}
.policy h3.first{margin:0px auto 20px;}
.policy h4{font-size:18px;color:#102c51;font-weight:500;margin:40px auto 10px;padding:5px 0;}
.policy ol{margin-left:0;padding-left:10px;}
.policy ol > li{list-style-type:decimal;margin:10px 0 10px 10px;}
.policy ul{margin-left:0 !important;padding-left:10px;}
.no_email{max-width:500px;margin:0 auto;}
.no_email p{margin:30px 0;}
.no_email p img{margin-bottom:30px;}
#mobile .policy{font-size:15px;}
#mobile .policy h2{font-size:20px;margin-bottom:50px;}
#mobile .policy h3{margin:40px auto 10px;}

/* 서브공통 — 주석 형식: 역할 → 적용 위치(클래스) */
:root {
  /* ---- 폰트·색상 ---- */
  --gp-primary: #0e4b8b; /* 강조 색상 → .label 글자, FAQ Q, 표 머리, 선택된 탭 */
  --gp-title-color: #222222; /* 제목 색상 → .page_tit .tit .box_tit, 목록 글자 */
  --gp-text-color: #4b4b4b; /* 본문 색상 → .sub 전체 글자, 첫 섹션 .txt */
  --gp-muted-color: #6c6c6c; /* 보조 글자 색상 → .txt, 보조문구(.note) */
  --gp-bg: #ffffff; /* 기본 배경 → .sub */
  --gp-bg-soft: #f6f6f6; /* 보조 섹션 배경 → .area.gray, 흰 섹션 안 박스 */
  /* ---- 가로폭·배치 ---- */
  --gp-content-max: 1280px; /* 콘텐츠 최대폭 → .inner */
  --gp-narrow-max: 800px; /* 좁은 본문 최대폭 → .inner.narrow */
  --gp-side-padding: 20px; /* 콘텐츠 좌우 여백 → .inner */
  --gp-split-columns: 2; /* 이미지·본문 배치 열 수 → .half */
  --gp-grid-columns: 3; /* 기본 카드 열 수 → .grid */
  --gp-grid-column-gap: 20px; /* 카드 사이 가로 간격 → .grid, 목록 */
  --gp-grid-row-gap: 20px; /* 카드 사이 세로 간격 → .grid, 목록 */
  /* ---- 글자 크기·굵기·줄간격 ---- */
  --gp-page-title-size: 40px; /* 페이지 제목 크기 → .page_tit (h1) */
  --gp-title-size: 25px; /* 섹션 제목 크기 → .tit (h2) */
  --gp-card-title-size: 20px; /* 카드 제목 크기 → .box_tit (h3) */
  --gp-description-size: 16px; /* 서브문구 크기 → .txt */
  --gp-body-size: 16px; /* 본문 크기 → .sub 전체 */
  --gp-caption-size: 14px; /* 보조문구 크기 → .label, .note */
  --gp-button-size: 18px; /* 버튼 글자 크기 → 버튼 (현재 미사용) */
  --gp-heading-weight: 700; /* 제목 굵기 → .page_tit .tit .box_tit */
  --gp-body-weight: 400; /* 본문 굵기 → .sub 전체 */
  --gp-heading-line-height: 1.3; /* 제목 줄간격 → .page_tit .tit .box_tit */
  --gp-body-line-height: 1.5; /* 본문 줄간격 → .sub 전체 */
  --gp-heading-letter-spacing: -0.03em; /* 제목 자간 → .page_tit .tit .box_tit */
  --gp-body-letter-spacing: -0.01em; /* 본문 자간 → .sub 전체 */
  /* ---- 여백·모서리·이미지 ---- */
  --gp-first-top: 70px; /* 첫 섹션 위 여백 (페이지 최상단 공간) → .area.top */
  --gp-section-top: 100px; /* 섹션 위 여백 → .area */
  --gp-section-bottom: 100px; /* 섹션 아래 여백 → .area, .area.top */
  --gp-title-description-gap: 16px; /* 제목과 서브문구 사이 → .tit_box 안 */
  --gp-header-content-gap: 100px; /* 제목 묶음과 콘텐츠 사이 → .tit_box 아래, .half > .con */
  --gp-paragraph-gap: 16px; /* 본문 문단 사이 → .txt_box */
  --gp-card-padding-y: 32px; /* 카드 내부 위·아래 → .box */
  --gp-card-padding-x: 32px; /* 카드 내부 좌·우 → .box */
  --gp-card-text-gap: 12px; /* 카드 제목과 본문 사이 → .box 안 */
  --gp-card-radius: 16px; /* 카드 모서리 → .box, .point */
  --gp-image-radius: 16px; /* 이미지 모서리 → .img */

  /* ---- 추가 변수 (아이스픽스 전용) ---- */
  --gp-section-primary: linear-gradient(90deg, rgba(1,127,245,1) 0%, rgba(48,176,250,1) 100%); /* 파란 섹션 배경 → .area.blue (진행 과정) */
  --gp-label-bg: #eff1f4; /* 제목 위 라벨 배경 → .label */
  --gp-small-radius: 12px; /* 작은 박스 모서리 → .check .faq .note .tab */
}

/* =========================================================
   서브 콘텐츠 공통 틀
   - 페이지 최상위: <div class="sub sub0202"> (sub + 페이지명)
   - 여기에는 모든 페이지가 함께 쓰는 큰 틀만 둡니다.
     섹션(area) · 가로폭(inner) · 제목 묶음(tit_box) · 본문(txt_box)
     이미지(img) · 2단 배치(half) · 좌우 배치(side) · 칸 나누기(grid) · 아이콘(ico)
   - 박스·목록·FAQ 등 나머지는 각 페이지 <style> 안에서 .sub0000 으로 작성합니다.
   ========================================================= */
.sub,
.sub *,
.sub *::before,
.sub *::after { box-sizing: border-box; }

.sub {
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: var(--gp-body-size);
  font-weight: var(--gp-body-weight);
  line-height: var(--gp-body-line-height);
  letter-spacing: var(--gp-body-letter-spacing);
  color: var(--gp-text-color);
  background: var(--gp-bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.sub h1, .sub h2, .sub h3, .sub h4,
.sub p, .sub ul, .sub ol, .sub figure { margin: 0; }
.sub ul, .sub ol { padding: 0; list-style: none; }
.sub img { max-width: 100%; }

/* 아이콘 (lucide.dev 인라인 SVG) — 크기는 font-size 로 조절 */
.sub .ico {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 섹션 (area) ---- */
.sub .area { padding: var(--gp-section-top) 0 var(--gp-section-bottom); }
.sub .area.top { padding-top: var(--gp-first-top); } /* 페이지 첫 섹션 — 위 여백은 --gp-first-top 으로 따로 조절 */
.sub .area.gray { background: var(--gp-bg-soft); --gp-label-bg: #e6e9ee; } /* 회색 배경 */
.sub .area.blue { background: var(--gp-section-primary); } /* 파란 배경 (진행 과정) */

/* ---- 가로폭 (inner) ---- */
.sub .inner {
  width: 100%;
  max-width: var(--gp-content-max);
  margin: 0 auto;
  padding: 0 var(--gp-side-padding);
}
.sub .inner.narrow { max-width: var(--gp-narrow-max); }

/* ---- 제목 묶음 (tit_box) : label → tit → txt ---- */
.sub .tit_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gp-title-description-gap);
  margin-bottom: var(--gp-header-content-gap);
}
.sub .tit_box.center { align-items: center; text-align: center; }

/* 제목 위 라벨 */
.sub .label {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gp-label-bg);
  font-size: var(--gp-caption-size);
  font-weight: 500;
  line-height: 1.4;
  color: var(--gp-primary);
}

/* 페이지 제목(page_tit) · 섹션 제목(tit) */
.sub .page_tit,
.sub .tit {
  font-weight: var(--gp-heading-weight);
  line-height: var(--gp-heading-line-height);
  letter-spacing: var(--gp-heading-letter-spacing);
  color: var(--gp-title-color);
  text-wrap: balance;
}
.sub .page_tit { font-size: var(--gp-page-title-size); }
.sub .tit { font-size: var(--gp-title-size); }

/* 제목 아래 서브문구 */
.sub .txt {
  max-width: 760px;
  font-size: var(--gp-description-size);
  color: var(--gp-muted-color);
  text-wrap: pretty;
}
.sub .area.top .txt { color: var(--gp-text-color); }

/* 파란 섹션 안 제목 묶음은 흰 글자 */
.sub .area.blue .label { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.sub .area.blue .tit { color: #ffffff; }
.sub .area.blue .txt { color: rgba(255, 255, 255, 0.86); }

/* ---- 본문 문단 묶음 (txt_box) ---- */
.sub .txt_box { display: flex; flex-direction: column; gap: var(--gp-paragraph-gap); }
.sub .txt_box p { text-wrap: pretty; }

/* ---- 이미지 (img) ---- */
.sub .img {
  aspect-ratio: 16 / 9;
  border-radius: var(--gp-image-radius);
  overflow: hidden;
  background: var(--gp-bg-soft);
}
.sub .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- 2단 배치 (half) : 왼쪽 글(con) · 오른쪽 이미지(img) ---- */
.sub .half {
  display: grid;
  grid-template-columns: repeat(var(--gp-split-columns), minmax(0, 1fr));
  gap: 48px;
  align-items: center;
}
.sub .half > .con { display: flex; flex-direction: column; gap: calc(var(--gp-header-content-gap) * 0.6); }
.sub .half .tit_box { margin-bottom: 0; }

/* ---- 좌우 배치 (side) : 왼쪽 제목 · 오른쪽 목록 (FAQ·안내사항) ---- */
.sub .side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
}
.sub .side > .tit_box { margin-bottom: 0; }

/* ---- 칸 나누기 (grid) : 기본 3칸, col2 · col4 · col5 ---- */
.sub .grid {
  display: grid;
  grid-template-columns: repeat(var(--gp-grid-columns), minmax(0, 1fr));
  column-gap: var(--gp-grid-column-gap);
  row-gap: var(--gp-grid-row-gap);
}
.sub .grid.col2 { --gp-grid-columns: 2; }
.sub .grid.col4 { --gp-grid-columns: 4; }
.sub .grid.col5 { --gp-grid-columns: 5; }

/* =========================================================
   모바일 값 (상위 요소에 #mobile 이 있을 때만 적용)
   ========================================================= */
#mobile .sub {
  /* ---- 가로폭·배치 ---- */
  --gp-content-max: 100%;
  --gp-narrow-max: 100%;
  --gp-side-padding: 20px;
  --gp-split-columns: 1;
  --gp-grid-columns: 1;
  --gp-grid-column-gap: 10px;
  --gp-grid-row-gap: 10px;
  /* ---- 글자 크기·굵기·줄간격 ---- */
  --gp-page-title-size: 25px;
  --gp-title-size: 20px;
  --gp-card-title-size: 18px;
  --gp-description-size: 14px;
  --gp-body-size: 14px;
  --gp-caption-size: 14px;
  --gp-button-size: 16px;
  --gp-heading-line-height: 1.35;
  /* ---- 여백·모서리·이미지 ---- */
  --gp-first-top: 30px;
  --gp-section-top: 60px;
  --gp-section-bottom: 60px;
  --gp-title-description-gap: 12px;
  --gp-header-content-gap: 32px;
  --gp-paragraph-gap: 12px;
  --gp-card-padding-y: 24px;
  --gp-card-padding-x: 20px;
  --gp-card-text-gap: 10px;
  --gp-card-radius: 12px;
  --gp-image-radius: 12px;
  /* ---- 추가 변수 ---- */
  --gp-small-radius: 10px;
}
#mobile .sub .label { padding: 5px 12px; font-size: 13px; }
#mobile .sub .img { aspect-ratio: 4 / 3; }
#mobile .sub .half { gap: 24px; }
#mobile .sub .side { grid-template-columns: minmax(0, 1fr); gap: var(--gp-header-content-gap); }
#mobile .sub .grid.col2,
#mobile .sub .grid.col4,
#mobile .sub .grid.col5 { --gp-grid-columns: 1; }