@charset "utf-8";
/* =========================================================================
   icons.css — 아이콘 전용
   -------------------------------------------------------------------------
   원본과 동일하게 <i class="ico ico-xxx"> 빈 요소에 background-image 로
   아이콘을 얹는다. 파일은 tools/fetch_assets.py 로 내려받은 원본 SVG/PNG.

   왜 <img> 가 아니라 배경 이미지인가
     - 아이콘은 "내용"이 아니라 "장식"이라 대체 텍스트가 필요 없다.
       (의미는 옆의 글자나 .sr-only 가 전달한다)
     - CSS 만으로 크기·상태별 교체가 가능하다.
   ========================================================================= */

.ico {
  display: inline-block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  vertical-align: middle;
}

/* --- 20px 기본 아이콘 --- */
.ico-ai,
.ico-search,
.ico-login,
.ico-join      { width: 20px; height: 20px; }
.ico-ai        { background-image: url("../assets/ico/ico-ai.svg"); }
.ico-search    { background-image: url("../assets/ico/ico-search.svg"); }
.ico-login     { background-image: url("../assets/ico/ico-login.svg"); }
.ico-join      { background-image: url("../assets/ico/ico-join.svg"); }

/* --- 상단 배너 태극기 (24x16) --- */
/* 원본은 24x24 상자 안에 24x16 그림 (상자를 16 으로 두면 세로 중심이 달라진다) */
.ico-korea-flag {
  width: 24px; height: 24px;
  background-image: url("../assets/ico/ico-korea-flag.svg");
  background-size: 24px 16px;
}

/* --- 모바일 전체메뉴 대분류 아이콘 --- */
/* 원본은 .iconset(2.4rem = 24px) 상자에 background-size:contain 으로 얹는다.
   내려받은 SVG 자체는 18~24px 로 제각각인데, contain 이 상자에 맞춰 늘려 주므로
   상자 크기만 24px 로 맞추면 원본과 같은 크기로 보인다.
   '정부24 홈'만 원본이 .iconset.sm(2rem = 20px) 을 쓴다. */
.ico-menu-minwon,
.ico-menu-benefit,
.ico-menu-life-guide,
.ico-menu-policy,
.ico-menu-customer,
.ico-korean-flag      { width: 24px; height: 24px; }
.ico-menu-minwon      { background-image: url("../assets/ico/ico-menu-minwon.svg"); }
.ico-menu-benefit     { background-image: url("../assets/ico/ico-menu-benefit.svg"); }
.ico-menu-life-guide  { background-image: url("../assets/ico/ico-menu-life-guide.svg"); }
.ico-menu-policy      { background-image: url("../assets/ico/ico-menu-policy.svg"); }
.ico-menu-customer    { background-image: url("../assets/ico/ico-menu-customer.svg"); }
.ico-menu-home        { width: 20px; height: 20px;
                        background-image: url("../assets/ico/ico-menu-home.svg"); }
.ico-korean-flag      { background-image: url("../assets/ico/ico-korean-flag.svg"); }

/* --- 화살표 --- */
.ico-arr-bottom {
  width: 16px; height: 16px;
  background-image: url("../assets/ico/ico-arr-bottom.svg");
}
.ico-arr-right {
  width: 20px; height: 20px;
  background-image: url("../assets/ico/ico-arr-right.svg");
}

/* --- 새 창 열림 --- */
.ico-new-window {
  width: 14px; height: 14px;
  background-image: url("../assets/ico/ico-new-window.svg");
}
.ico-new-window2 {
  width: 20px; height: 20px;
  background-image: url("../assets/main/ico-mo-main-new-window.svg");
}
.ico-new-window-lg {
  width: 20px; height: 20px;
  background-image: url("../assets/ico/ico-new-window.svg");
}

/* --- 자주 찾는 서비스 칩의 문서 종류 표시 --- */
.ico-doc { width: 20px; height: 20px; background-image: url("../assets/main/ico-mo-main-doc.svg"); }
.ico-pdf { width: 20px; height: 20px; background-image: url("../assets/main/ico-mo-main-pdf.svg"); }

/* --- 공지 배지 --- */
.ico-pin       { width: 16px; height: 16px; background-image: url("../assets/ico/ico-pin-black.svg"); }

/* =========================================================================
   생활·가족가이드 아이콘 (44x44, 원본 img-main-life-guide0X.svg)
   ========================================================================= */
.ico-main-life {
  display: block;
  width: 44px; height: 44px;
  border-radius: 16px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 44px 44px;
}
.guide-01 { background-image: url("../assets/main/img-main-life-guide01.svg"); }
.guide-02 { background-image: url("../assets/main/img-main-life-guide02.svg"); }
.guide-03 { background-image: url("../assets/main/img-main-life-guide03.svg"); }
.guide-04 { background-image: url("../assets/main/img-main-life-guide04.svg"); }
.guide-05 { background-image: url("../assets/main/img-main-life-guide05.svg"); }
.guide-06 { background-image: url("../assets/main/img-main-life-guide06.svg"); }
.guide-07 { background-image: url("../assets/main/img-main-life-guide07.svg"); }
.guide-08 { background-image: url("../assets/main/img-main-life-guide08.svg"); }

/* =========================================================================
   마이 정부24 서비스 아이콘 (36x36 박스, 24px 아이콘)
   ========================================================================= */
/* 원본 실측 : 36px 원 안에 20px 그림 (24px 로 두면 아이콘이 커 보인다) */
.ico-service {
  display: inline-block;
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 100%;
  background-color: var(--c-bg-banner);   /* #eef2f7 (원본 실측) */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px auto;
}
/* 푸터 관련서비스 레이어의 큰 아이콘 (원본 ico-main-service-XX) */
.ico-service-lg {
  display: inline-block;
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 16px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 28px auto;
}
.ico-service-lg.ico-service-00 { background-color: #f4f5f6; background-image: url("../assets/main/ico-main-service-00.svg"); }
.ico-service-lg.ico-service-01 { background-color: #e7f4fe; background-image: url("../assets/main/ico-main-service-01.svg"); }
.ico-service-lg.ico-service-03 { background-color: #eaf6ec; background-image: url("../assets/main/ico-main-service-03.svg"); }
.ico-service-lg.ico-service-04 { background-color: #fdefec; background-image: url("../assets/main/ico-main-service-04.svg"); }
.ico-service-lg.ico-service-08 { background-color: #eee9fc; background-image: url("../assets/main/ico-main-service-08.svg"); }

.ico-service-01 { background-image: url("../assets/ico/ico-login-before-service-01.svg"); }
.ico-service-02 { background-image: url("../assets/ico/ico-login-before-service-02.svg"); }
.ico-service-03 { background-image: url("../assets/ico/ico-login-before-service-03.svg"); }
.ico-service-04 { background-image: url("../assets/ico/ico-login-before-service-04.svg"); }

/* =========================================================================
   SNS (40x40 원형)
   ========================================================================= */
.ico-sns {
  display: block;
  width: 40px; height: 40px;
  border: 1px solid var(--c-border-gray);
  border-radius: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px auto;         /* 원본 실측 : 원 안에 24px 아이콘 */
}
/* 원본은 SNS 아이콘에 마우스를 올려도 테두리가 그대로다 (실측) — hover 규칙 없음 */
.ico-instagram { background-image: url("../assets/ico/ico-instagram.svg"); }
.ico-twitter   { background-image: url("../assets/ico/ico-twitter.svg"); }
.ico-kakao     { background-image: url("../assets/ico/ico-kakao-story.svg"); }
.ico-blog      { background-image: url("../assets/ico/ico-blog.svg"); }

/* =========================================================================
   기타 단독 아이콘 버튼
   ========================================================================= */

/* 캐러셀 좌우 버튼.
   버튼 상자(32x32)는 투명하고 실제 원은 ::after 에 그린다.
   원본은 버튼 자리에 원을 그대로 겹쳐 놓는다 (위로 올리지 않는다) —
   카드 오른쪽 위가 폴더 모양으로 파여 있어서 그 홈에 저절로 들어앉기 때문이다. */
.btn-control {
  width: 32px; height: 32px;
  background: none;
  border: 0;
}
.btn-control { position: relative; }
.btn-control::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 32px;
  border: 1px solid var(--c-border-gray);
  background: #fff url("../assets/ico/ico-arr-right.svg") no-repeat 50% 50%;
  background-size: 20px;              /* 원본 실측 */
}
.btn-control.prev::after { transform: translateY(-50%) rotate(180deg); }
/* 비활성은 회색으로 꽉 찬 원 (투명도를 낮추는 방식이 아니다) */
.btn-control:disabled { cursor: default; }
.btn-control:disabled::after { background-color: var(--c-border-gray); }

/* 생활·가족가이드 목록의 작은 화살표 (16px) */
.guide-panel .ico-arr-right { width: 16px; height: 16px; }

/* '펼쳐보기' — 원본은 아이콘이 글자 '뒤'에 오고 16px 이다 (버튼 전체 78x28) */
.ico-gather::after {
  content: "";
  width: 16px; height: 16px;
  background: url("../assets/ico/ico-gather.svg") no-repeat 50% 50% / contain;
}

/* '더 보기 →' (원본 실측 : 아이콘 16px, 버튼 전체 69x28) */
.ico-more-right::after {
  content: "";
  width: 16px; height: 16px;
  background: url("../assets/ico/ico-more-right.svg") no-repeat 50% 50% / contain;
}

/* 배너 컨트롤 (24x24) */
/* 원본 실측 : 흰 원 + 1px 테두리 (pause 는 radius 24, 좌우 화살표는 40) */
.btn-swiper {
  width: 24px; height: 24px;
  border-radius: 40px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 12px auto;
  border: 1px solid var(--c-border-gray);
}
.btn-swiper.pause,
.btn-swiper.play { border-radius: 24px; }
/* ico-swiper-arr.svg 는 '왼쪽' 화살표다 — 뒤집는 쪽은 next 다 (원본 실측) */
.btn-swiper.prev  { background-image: url("../assets/ico/ico-swiper-arr.svg"); }
.btn-swiper.next  { background-image: url("../assets/ico/ico-swiper-arr.svg"); transform: rotate(180deg); }
.btn-swiper.pause { background-image: url("../assets/ico/ico-swiper-pause.svg"); }
.btn-swiper.play  { background-image: url("../assets/ico/ico-swiper-play.svg"); }

/* 맨 위로 */
.btn-top {
  background-image: url("../assets/ico/ico-top.svg");
  background-repeat: no-repeat;
  background-position: 50% 14px;
  border-radius: 8px;                 /* 원본 실측 : 원형이 아니다 */
}

/* 푸터 관련서비스 버튼의 + 표시 */
.btn-related {
  background: #fff url("../assets/ico/ico-more-plus.svg") no-repeat calc(100% - 24px) 50%;
}

/* 푸터 안내 토글 */
.btn-footer-toggle {
  width: 32px; height: 32px;
  background: url("../assets/ico/ico-footer-toggle.svg") no-repeat 50% 50% / 32px auto;
  transition: transform .2s;
}
.btn-footer-toggle[aria-expanded="true"] { transform: rotate(180deg); }

/* 닫기 (모달 / 레이어) */
/* 닫기 아이콘은 overlay.css 에서 각각 지정한다 (모달 / 레이어가 다른 그림) */
/* 검색 버튼 (입력창 안 24x24) */
.btn-send {
  width: 24px; height: 24px;
  background: url("../assets/ico/ico-search.svg") no-repeat 50% 50%;
  background-size: 24px auto;
}

/* 최근 검색어 시계 아이콘은 원본에 없으므로 생략하고 텍스트만 쓴다 */