@charset "utf-8";
/* =========================================================================
   layout.css — 페이지 뼈대 : 상단 배너 / 헤더 / 메인 그리드 / 푸터
   수치는 모두 원본 computed style 실측값.
   ========================================================================= */

/* =========================================================================
   0. 페이지 뼈대
   -------------------------------------------------------------------------
   창이 페이지 내용보다 길면 원본은 '본문'을 늘려 푸터를 창 바닥에 붙인다.
   (1440px 높이 창에서 main 이 850 → 865 로 늘어난다)
   세로 flex + min-height:100vh + 본문 flex:1 이 그 방법이다.
   ========================================================================= */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.gov-banner,
.header,
.footer { flex: 0 0 auto; }            /* 내용이 넘쳐도 눌리지 않게 */
.main-page { flex: 1 0 auto; }

/* =========================================================================
   1. 전자정부 안내 배너 (32px)
   ========================================================================= */
.gov-banner {
  height: var(--h-banner);
  background: var(--c-bg-banner);
}
.gov-banner .txt {
  display: flex;
  align-items: center;
  gap: 0 8px;                         /* 원본 실측 */
  height: var(--h-banner);
  font-size: var(--fs-sm);            /* 15px (원본 실측) */
  color: var(--c-text);               /* 원본은 보조색이 아니라 본문색 */
}

/* =========================================================================
   2. 헤더
   ========================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 149px;                      /* 원본도 이 값을 직접 박아 둔다.
                                         안쪽 내용은 12+69.5 +10+57 = 148.5px 라서
                                         실제로는 0.5px 이 남는데, 그 0.5px 만큼
                                         본문 시작점이 181 로 내려간다.
                                         내용에 맡기면 180.5 가 되어 본문 글자가 통째로 1px 떠오른다. */
  background: #fff;
}

/* --- 2-1. 위쪽 줄 : 로고(142x48) + 유틸리티(444 폭) --- */
.header-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 12px;
  /* 높이를 박지 않는다. 원본도 내용(오른쪽 유틸 69.5px)이 높이를 정한다.
     예전엔 82px 로 박아 뒀는데 실제로는 12 + 69.5 = 81.5px 라서,
     헤더가 0.5px 두꺼워지고 그 아래 페이지 전체가 0.5px 씩 밀려 있었다.  */
}

.logo { width: 142px; height: 48px; align-self: center; }   /* 원본 실측 : 세로 중앙(y 55) */
.logo a,
.footer .logo {
  display: block;
  width: 142px; height: 48px;
  background: url("../assets/layout/logo-header.svg") no-repeat 50% 50%;
  background-size: 100% auto;
}

.header-util {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;                           /* 원본 실측 : 12+26+4+40 = 82 */
}

/* 윗줄 : For Foreigners / 어린이 / 시니어 / 지원 / 화면크기 */
.util-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;                          /* 원본 실측 */
  width: 100%;
  height: 25.5px;                     /* 원본 실측 : 본문 17px × 1.5
                                         26 으로 박으면 아랫줄이 통째로 0.5px 내려간다 */
}
/* 항목 사이 세로 구분선 — 원본 실측 :
   각 칸의 ::before 로 1×16px 선을 왼쪽 6px 자리에 그리고, 첫 칸만 숨긴다.
   (칸 사이 gap 이 12px 이라 선이 정확히 가운데 온다) */
.util-top > li { position: relative; }
.util-top > li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background: var(--c-border-gray);   /* #cdd1d5 */
}
.util-top > li:first-child::before { display: none; }
.util-top .btn-util {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;                     /* 원본 실측 */
  border-radius: 4px;
  font-size: var(--fs-sm);
  color: var(--c-text);               /* 원본 실측 */
  white-space: nowrap;
}
/* 원본 헤더는 마우스를 올려도 아무 변화가 없다 (실측).
   원본 CSS 가 `#iw_header .header-util .top .btn-txt { color:... }` 처럼
   id 선택자로 색을 못박아 둬서 전역 a:hover 가 이기지 못한다. */
.util-top .btn-util:hover { color: var(--c-text); text-decoration: none; }

/* 윗줄 아이콘은 16px (원본 실측 : padding 4 + 글자 + gap 2 + 16 + padding 4 = 123) */
.util-top .ico-arr-bottom,
.util-top .ico-new-window { width: 16px; height: 16px; }

/* 아랫줄 : 정부24 AI / 통합검색 / 로그인 / 회원가입 */
.util-bottom {
  display: flex;
  align-items: center;
  gap: 8px;                           /* 원본 실측 */
  height: 40px;
}
.util-bottom .btn-txt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: center;                 /* 원본 실측 */
}
.util-bottom .btn-txt:hover { background: none; color: var(--c-text); text-decoration: none; }   /* 원본 실측 : 변화 없음 */
/* 원본 실측 : 정부24 AI 789 / 통합검색 911 / 로그인 1026 / 회원가입 1126
   → '검색 묶음' 안은 붙어 있고(0), '로그인 묶음' 안과 묶음 사이는 8px 이다. */
.util-bottom .header-search,
.util-bottom .log-before { display: flex; align-items: center; }
.util-bottom .log-before { gap: 8px; }

/* --- 2-2. 아래쪽 줄 : GNB --- */
.header-bottom {
  position: relative;
  margin-top: 10px;                   /* 원본 실측 */
  height: var(--h-gnb);               /* 57px */
  border-top: 1px solid var(--c-border-gray);   /* 원본 실측 : 위쪽 선, #cdd1d5 */
}
/* GNB 줄은 위아래로 선이 두 개다. 아래 선은 원본이 border-bottom 이 아니라
   ::before 로 그린다 — border 로 그리면 높이가 57 → 58 이 되어 아래가 다 밀리기 때문.
   그래서 상자 밖(bottom:-1px)에 1px 짜리 막대를 띄워 놓는 방식을 그대로 따른다. */
.header-bottom::before {
  content: "";
  position: absolute;
  top: 56px; left: 0; right: 0;       /* 테두리 안쪽(124.5) 기준 + 56 = 180.5 */
  height: 1px;
  background: var(--c-border-gray);
}
.gnb { display: flex; align-items: center; gap: 16px; height: 56px; }   /* 원본 실측 */

.btn-depth-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 16px;
  font-size: var(--fs-tit);           /* 19px */
  font-weight: 700;
  color: var(--c-text-sub);
}
/* 아래 화살표는 원본 ico-gnb-arr.svg */
.btn-depth-1::after {
  content: "";
  width: 20px; height: 20px;
  margin-bottom: 2px;
  background: url("../assets/layout/ico-gnb-arr.svg") no-repeat 50% 50% / contain;
  transition: transform .2s;
}
.gnb > li.is-open > .btn-depth-1 { color: var(--c-primary); }
.gnb > li.is-open > .btn-depth-1::after { transform: rotate(180deg); }

/* 메가 메뉴 — 원본 구조 그대로.
   -------------------------------------------------------------------------
   4열로 감싸는 flex 이고, 항목 하나가 "굵은 링크 + 설명문" 한 쌍이다.
   설명문 위의 가는 선(border-top)이 링크와 설명을 나눈다.

   원본 실측 : wrap 0,182 1265x369 / box 1200 / ul gap 40 / li 270 / a 36.5 / desc padding-top 16
   li 폭 270 × 4 + 간격 40 × 3 = 1200 (= 콘텐츠 폭) */
.mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  display: none;
  padding-bottom: 34px;               /* 원본 실측 */
  background: #fff;
}
.header.is-mega-open .mega.is-open { display: block; }

.mega-inner { padding: 26px 24px; }   /* 원본 실측 : 위아래 26px */

/* 제목은 데스크톱에서 숨긴다 (원본도 0x0 — 모바일 전체메뉴에서만 쓰인다) */
.mega-tit { display: none; }

.depth-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;                          /* 원본 실측 */
}
.depth-2 > li { width: 270px; }       /* 원본 실측 */

.btn-depth-2 {
  display: flex;
  align-items: center;
  gap: 0 4px;
  padding: 4px;
  font-size: var(--fs-tit);           /* 19px */
  font-weight: 700;
  color: var(--c-text);
}
.btn-depth-2:hover { color: var(--c-primary-strong); text-decoration: underline; }

.depth-desc {
  margin-top: 4px;
  padding: 16px 4px 0;
  border-top: 1px solid var(--c-border-gray);   /* 원본 실측 #cdd1d5 */
  font-size: var(--fs-base);          /* 17px */
  line-height: 1.5;
  color: var(--c-text-sub);           /* #464c53 */
}

/* 모바일 햄버거 (CSS 로 3줄을 그린다 — 원본에 대응 에셋이 없어서) */
.btn-allmenu {
  display: none;
  position: absolute;
  right: 16px; top: 20px;
  width: 40px; height: 40px;
  place-items: center;
}
.btn-allmenu .bar,
.btn-allmenu .bar::before,
.btn-allmenu .bar::after {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--c-text);
}
.btn-allmenu .bar { position: relative; }
.btn-allmenu .bar::before,
.btn-allmenu .bar::after { content: ""; position: absolute; left: 0; }
.btn-allmenu .bar::before { top: -7px; }
.btn-allmenu .bar::after  { top: 7px; }

/* =========================================================================
   3. 메인 : 좌 792 + 우 384, 간격 24
   ========================================================================= */
/* 원본 실측 : main 850 = 위 24 + 콘텐츠 810 + 아래 16
   위쪽 24px 을 .main-col 의 margin-top 으로 주면 '마진 상쇄(margin collapsing)'
   때문에 부모 밖으로 빠져나가 .main-page 높이가 24px 모자라진다.
   그래서 부모의 padding 으로 준다. */
.main-page {
  padding: 24px 0 16px;
  background: var(--c-bg-page);
}

.main-col {
  display: flex;
  gap: var(--gap-col);
}

.area-left,
.area-right {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card);               /* 12px */
}
.area-left  { width: var(--w-left);  flex: 0 0 var(--w-left); }
.area-right { width: var(--w-right); flex: 0 0 var(--w-right); }

/* 좌측 위 : 검색바 + 자주 찾는 서비스 (간격 24px — 원본 실측) */
.sch-section1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 좌측 아래 : 3개 카드를 2열 그리드로
   ┌──────────┬──────────┐
   │ 생활·가족 │ 원스톱    │ 243px
   │ 가이드    ├──────────┤
   │ (2행)     │ 혜택알리미 │ 253px
   └──────────┴──────────┘
     300px       480px                                                 */
.sch-section2 {
  display: grid;
  grid-template-columns: 300px 480px;
  grid-template-rows: 243px 253px;
  gap: var(--gap-card);
}
.sc-main-lifeguide { grid-row: 1 / span 2; }

/* 좌측 3카드는 '둥근 사각형'이 아니라 폴더(서류철) 모양이다.
   -------------------------------------------------------------------------
   오른쪽 위가 44px 낮게 파여 있고, 그 홈에 이전/다음 버튼이 들어앉는다.
   이 모양은 CSS 로는 못 그려서 원본은 SVG 한 장을 border-image 로 9분할해 쓴다.

     border-image-slice: 67 110 28 28
       → 이미지를 위 67 / 오른쪽 110 / 아래 28 / 왼쪽 28 로 잘라 9칸을 만든다.
         네 모서리는 그대로 두고, 변은 늘이고, 가운데(fill)는 채운다.
         덕분에 카드 크기가 달라져도 '홈'과 둥근 모서리 모양이 안 망가진다.

   ::before 를 카드보다 살짝 크게(top -6 / 좌우 -8 / 아래 -10) 잡는 이유는
   SVG 안에 그림자용 여백이 그만큼 들어 있어서다. 그래야 그림 경계 = 카드 경계가 된다. */
.sch-fld-cont { min-width: 0; position: relative; }
.sch-fld-cont::before {
  content: "";
  position: absolute;
  top: -6px; left: -8px; right: -8px; bottom: -10px;
  border-image-source: url("../assets/main/bg-sc-main-folder.svg");
  border-image-slice: 67 110 28 28 fill;
  border-image-width: 67px 110px 28px 28px;
}
/* 혜택알리미는 홈이 더 넓은 변형 (버튼 대신 넓은 여백이 필요해서) */
.sch-fld-cont.type2::before {
  border-image-source: url("../assets/main/bg-sc-main-folder2.svg");
  border-image-slice: 67 162 28 28 fill;
  border-image-width: 67px 162px 28px 28px;
}
.sch-fld-cont > .cont-wrap {
  position: relative;
  z-index: 1;                         /* 폴더 그림 위에 내용이 오게 */
  display: flex;
  flex-direction: column;
  gap: 10px;                          /* 원본 실측 : row-gap 1rem */
  height: 100%;
  padding: 20px;
}
.sc-main-onestop > .cont-wrap { gap: 7px; overflow: hidden; }   /* 원본 실측 */
.sc-main-lifeguide > .cont-wrap { overflow: hidden; }           /* 원본 실측 */

/* =========================================================================
   4. 푸터
   ========================================================================= */
/* 원본은 푸터 아래에 110px 여백이 있다 (모바일 하단 바 자리) */
.footer {
  padding-bottom: 110px;
  background: var(--c-bg-gray);
}

/* 4-1. 관련 서비스 버튼 줄 (흰 배경 56px) */
.footer-related {
  position: relative;
  height: 56px;
  background: #fff;
  border-top: 1px solid var(--c-border-gray);
  border-bottom: 1px solid var(--c-border-gray);   /* 원본 실측 : 아래에도 선이 있다 */
}
/* 원본 실측 : li 는 300px 고정이라 1200px 줄의 왼쪽 900px 만 채운다 */
.footer-related-list { display: flex; }
.footer-related-list > li {
  /* 0 0 300px 로 두면 **줄지도 늘지도 않아서**, 폭이 948px 밑으로 내려가는 순간
     300×3 = 900px 이 상자(737px)를 뚫고 나가 페이지 전체에 가로 스크롤이 생겼다.
     (768~1023px 구간에서만 나던 버그 — 모바일 구간에는 아래 responsive.css 의
      flex:1 1 0 이 걸려 있어서 눈에 띄지 않았다)
     0 1 300px 이면 자리가 넉넉할 때는 300px 그대로, 모자랄 때만 줄어든다. */
  flex: 0 1 300px;
  min-width: 0;
  border-left: 1px solid var(--c-border-gray);   /* 원본 실측 #cdd1d5, 왼쪽에 선 (버튼이 1px 안쪽) */
}
.footer-related-list > li:last-child { border-right: 1px solid var(--c-border-gray); }

/* 4-2. 기관 정보 */
.info-footer { padding: 40px 24px 24px; }

.info-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  margin-bottom: 16px;
}
.info-toggle .sns-link { margin-left: auto; }
.sns-link .list { display: flex; gap: 8px; }

/* '정부24 안내'를 펼쳤을 때 나오는 블록 (원본 .info 실측)
   콜센터 줄 바로 아래에 붙고, 위쪽에 구분선 1px 이 생긴다. */
.info-footer .info {
  padding-top: 32px;
  border-top: 1px solid var(--c-border-gray);
  font-size: var(--fs-base);
}
.info-footer .address { font-style: normal; }          /* <address> 기본 기울임 해제 */
.info-footer .add {
  display: flex;
  flex-direction: column;
  gap: 8px;                          /* 원본 실측 : 본관/별관 두 줄 사이 8px */
}
.info-footer .info .tel { margin-top: 16px; }
.info-footer .info .tel > .list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-footer .info .tel .label { font-weight: 700; }
/* '내선번호' 라벨과 목록이 가로로 나란히 (원본 : 목록이 x 99.28 에서 시작) */
.info-footer .info .tel > .list > li { display: flex; gap: 0 8px; }
.info-footer .extension > li + li { margin-top: 4px; }  /* 원본 실측 : 4줄 사이 4px */

.info-footer .link .list > li + li { margin-top: 4px; }  /* 원본 실측 : 줄 사이 4px */
.info-footer .link .btn-txt {
  gap: 4px;                          /* 원본 실측 : 글자-아이콘 4px */
  font-size: var(--fs-base);         /* 17px — .btn-txt 기본(15px)을 쓰면 줄이 3px 낮아진다 */
}

/* 원본 실측 : 17px, '콜센터' 같은 라벨만 700, 번호는 400 */
.info-tel { font-size: var(--fs-base); color: var(--c-text); }
.info-tel .list { display: flex; flex-wrap: wrap; gap: 4px 8px; }
/* 원본 실측 : li 오른쪽에 8px 여백이 더 있다 (gap 8 + padding 8 = 16 간격) */
.info-tel .list > li { position: relative; padding-right: 8px; }
/* 두 콜센터 항목 사이의 세로 구분선. 원본은 li 오른쪽 끝에 1x12px 막대를 붙인다
   (헤더 유틸 구분선과 같은 방식이지만 색이 다르다 — 여긴 #6d7882) */
.info-tel .list > li::after {
  content: "";
  position: absolute;
  right: 0; top: 6px;
  width: 1px; height: 12px;
  background: var(--c-text-weak);
}
.info-tel .list > li:last-child::after { display: none; }
.info-tel .label { font-weight: 700; }
.info-tel strong { font-weight: 400; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border-gray);
}
.fnb .list { display: flex; align-items: center; gap: 12px; }
.fnb a { font-size: var(--fs-sm); color: var(--c-text); }
.fnb a:hover { color: var(--c-primary-strong); }
.fnb .strong { font-weight: 700; color: var(--c-navy-deep); }   /* 원본 실측 #052b57 */
.footer-bottom .copy { font-size: var(--fs-sm); color: var(--c-text-sub); }

/* =========================================================================
   5. 맨 위로 버튼 (56x56, 원본 ico-top.svg + 'Top' 글자)
   ========================================================================= */
/* 원본은 안 보일 때 bottom:-100px 으로 화면 아래에 내려 두고,
   스크롤하면 24px 로 올린다 (opacity/visibility 를 쓰지 않는다). */
.btn-top {
  position: fixed;
  right: 24px;
  bottom: -100px;
  z-index: 9;                         /* 원본 실측 */
  width: 56px; height: 56px;
  padding-top: 30px;
  background-color: #fff;
  border: 1px solid var(--c-border-gray);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .08);   /* 원본 실측 */
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-sub);
  transition: bottom .25s;
}
.btn-top.show { bottom: 24px; }