@charset "utf-8";
/* =========================================================================
   overlay.css — 화면 위로 덮이는 것들
   (통합검색 레이어 / 모달 / 모바일 전체메뉴 / 푸터 관련서비스 레이어)
   -------------------------------------------------------------------------
   z-index 층위를 여기서 한 번에 관리한다.

     90   맨 위로 버튼
     100  헤더(sticky)
     200  헤더 유틸 드롭다운
     900  푸터 관련서비스 레이어
     1000 통합검색 레이어 / 전체메뉴
     1100 모달
   ========================================================================= */

/* =========================================================================
   0. 공통
   ========================================================================= */
.modal-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}

/* 오버레이가 열려 있는 동안 뒤 페이지가 스크롤되지 않게 잠근다 */
body.is-locked { overflow: hidden; }

/* =========================================================================
   1. 통합검색 레이어
   ========================================================================= */
/* 원본 구조 : 흰 화면 전체를 덮고, 792px 상자를 가로·세로 가운데에 둔다.
   원본은 table / table-cell 로 세로 가운데 정렬을 한다(옛 기법). 결과는 flex 와 같다. */
.total-search-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #fff;
  animation: fade-in .18s ease;
}
.total-search-inner {
  position: relative;
  width: 792px;                       /* 원본 실측 */
  max-width: 100%;
}
/* 이 안에서는 공통 .inner-wrap 의 1248px·좌우 24px 규칙을 끈다 */
.total-search-inner .inner-wrap { max-width: none; padding: 0; }

/* 제목 + 입력창 = 140px 묶음 (원본 실측) */
.total-search-tit {
  height: 48px;
  font-size: 32px;                    /* 원본 실측 */
  font-weight: 700;
  line-height: 48px;
  color: var(--c-text);
}

/* 두 칼럼은 가는 선 아래에 40px 띄워 놓는다 */
.total-search-cols {
  display: flex;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #d6e0eb;      /* 원본 실측 */
}
.ts-col { width: 50%; padding: 0 24px; }
.ts-tit {
  margin-bottom: 24px;                /* 원본 실측 */
  font-size: var(--fs-tit);           /* 19px */
  font-weight: 700;
}

/* 자주 찾는 서비스 TOP 10 — 한 줄에 하나씩, 간격 16px */
.rank-list {
  display: flex;
  flex-direction: column;
  gap: 16px;                          /* 원본 실측 */
  margin-bottom: 24px;                /* 원본 실측 */
}
.rank-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);          /* 17px */
}
.rank-list .num {
  flex: 0 0 auto;
  width: 20px;                        /* 원본 실측 */
  color: var(--c-text);
}
.rank-list a:hover { color: var(--c-primary-strong); }

/* 최근 검색어 */
.recent-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.recent-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
}
.recent-list .word { flex: 1; min-width: 0; }
.recent-list .btn-del { color: var(--c-text-weak); font-size: 13px; }
.recent-list .btn-del:hover { color: var(--c-red); }
.recent-list .empty { color: var(--c-text-sub); }

/* 닫기 버튼 — 원본은 상자 오른쪽 바깥 위에 40x40 으로 떠 있다 */
.btn-close-layer {
  position: absolute;
  top: 0;
  right: -200px;                      /* 원본 실측 : 상자(792) 기준 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  font-size: 0;
}
.btn-close-layer::after {
  content: "";
  width: 24px; height: 24px;
  background: url("../assets/ico/ico-close-total-search.svg") no-repeat 50% 50% / contain;
}
.btn-close-layer:hover { color: var(--c-primary-strong); }

/* =========================================================================
   2. 모달
   ========================================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 24px;
}
/* 원본 실측 : 760 × 480, 안쪽 여백 24, radius 12 */
.modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: 480px;
  max-height: calc(100vh - 160px);
  padding: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
  animation: pop-in .18s ease;
}

.modal-header {
  position: relative;
  flex: none;
  padding: 8px 32px 24px 16px;        /* 원본 실측 */
}
.modal-title {
  font-size: 24px;                    /* 원본 실측 */
  font-weight: 700;
  line-height: 1.5;
}
.modal-title em { font-style: normal; color: var(--c-primary); }

.btn-close-modal {
  position: absolute;
  right: 0; top: 6px;
  width: 24px; height: 24px;          /* 원본 실측 */
  background: url("../assets/ico/ico-close-modal.svg") no-repeat 50% 50% / contain;
}

/* 내용이 길면 여기만 스크롤된다 (헤더·푸터는 고정) */
.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px;                  /* 원본 실측 */
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* (.modal-footer / .checkbox 는 지웠다 — 예전 '첫 진입 공지 팝업' 의 잔해다.
    원본 모달에는 푸터가 없고, 지금 클론에도 그 팝업이 없다.)

/* 자주 찾는 서비스 전체 목록 */
/* 원본 실측 : 3열 wrap, 간격 12, 항목 (100% - 24) / 3 = 218.66 × 48 */
.gather-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.gather-list > li { width: calc((100% - 24px) / 3); }
.gather-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--r-chip);
  border: 1px solid var(--c-border-gray);   /* 원본 실측 #cdd1d5 */
  background: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}
/* 원본 모아보기 목록도 마우스를 올려도 변화가 없다 (실측 : 흰 배경 + #cdd1d5 테두리 유지).
   전역 a:hover 가 색을 바꾸지 않도록 여기서 원래 값을 그대로 다시 지정한다. */
.gather-list a:hover {
  border-color: var(--c-border-gray);
  color: var(--c-text);
  background: #fff;
  text-decoration: none;
}

/* =========================================================================
   3. 모바일 전체메뉴
   ========================================================================= */
.allmenu { position: fixed; inset: 0; z-index: 1000; }
.allmenu-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(360px, 92vw);
  background: #fff;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
  animation: slide-left .22s ease;
}
.allmenu-head {
  position: relative;
  padding: 20px 56px 16px 20px;
  background: var(--c-primary-weak);
}
/* 원본과 같이 아이콘 + '정부24 홈' 을 전체메뉴 맨 위에 둔다.
   (원본은 전체화면 레이어라 position:fixed 로 좌측 상단에 띄우지만,
    이 클론의 전체메뉴는 오른쪽에서 밀려 나오는 패널이라 머리말 안에 넣는다) */
.allmenu-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--c-text);
}
.allmenu-user { font-size: var(--fs-sm); color: var(--c-text-sub); }
.allmenu-user strong { color: var(--c-primary); font-weight: 700; }
.allmenu-head .btn-close-modal { top: 16px; }

.allmenu-util {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 20px 0;
}
.allmenu-util .btn { height: 44px; }

.allmenu-search { padding: 12px 20px 16px; border-bottom: 1px solid var(--c-border-line); }
.allmenu-search .btn { height: 44px; }

/* 아코디언 */
.accordion { flex: 1; min-height: 0; overflow-y: auto; }
.acc-item { border-bottom: 1px solid var(--c-border-line); }
.acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: left;
}
/* 글자가 남는 자리를 다 차지해야 화살표가 오른쪽 끝으로 밀린다.
   (아이콘 · 글자 · 화살표 세 칸이라 justify-content 만으로는 가운데가 벌어진다) */
.acc-btn > .txt { flex: 1 1 auto; }
.acc-btn[aria-expanded="true"] { color: var(--c-primary); }
.acc-btn[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.acc-panel { padding: 0 20px 16px; }
.acc-panel a {
  display: block;
  padding: 8px 0 8px 12px;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}
.acc-panel a:hover { color: var(--c-primary-strong); }

/* 소분류 안의 묶음(원본 depth-3) — 고객센터의 이용안내·인증센터 같은 것 */
.acc-sub-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 0 8px 12px;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  text-align: left;
}
.acc-sub-btn > .txt { flex: 1 1 auto; }
.acc-sub-btn[aria-expanded="true"] { color: var(--c-primary); font-weight: 700; }
.acc-sub-btn[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.acc-sub a {
  padding-left: 24px;                 /* 한 단계 더 들여쓴다 */
  font-size: var(--fs-xs);
}

.allmenu-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--c-border-line);
  background: var(--c-bg-gray);
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}
.allmenu-zoom { margin-bottom: 14px; }
.allmenu-zoom-tit { display: block; margin-bottom: 6px; font-weight: 700; color: var(--c-text); }
.zoom-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.zoom-btns button {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-gray);
  background: #fff;
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}
.zoom-btns button[aria-pressed="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-weight: 700;
}
.allmenu-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* =========================================================================
   4. 푸터 관련서비스 레이어 (아래에서 위로 펼쳐짐)
   ========================================================================= */
.btn-related {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 52px 0 24px;
  font-size: var(--fs-base);
  text-align: left;                  /* 원본 실측 */
}
.btn-related:hover { color: var(--c-primary-strong); }
.btn-related[aria-expanded="true"] { color: var(--c-primary); }

/* 푸터 관련서비스 레이어 — 원본 실측
   버튼 줄 위로 열리고, 상자는 흰 카드(테두리 #b1b8be, radius 12, 안쪽 24px)다.
   폭은 내용에 맞춘다 : 국민소통채널 1200 / 디지털증명 872 / 부가서비스 611 */
/* 위치 기준은 버튼이 아니라 '콘텐츠 폭(1200)' 이다 — 원본도 같다 */
.related-anchor { position: relative; }
.related-layer {
  position: absolute;
  bottom: 60px;                       /* 원본 실측 : 버튼 줄(56) 위 */
  z-index: 900;
  animation: slide-up .2s ease;
}
/* 원본은 콘텐츠 폭(1200) 기준으로 0% / 25% / 10% 를 쓴다.
   여기서는 .inner-wrap 의 좌우 패딩 24px 을 더해 같은 자리에 오게 px 로 적는다. */
.related-layer.footer-channel    { left: 24px; width: 1200px; }
.related-layer.footer-policy     { left: 324px; min-width: 450px; }   /* 24 + 1200×25% */
.related-layer.footer-policy.etc { left: 144px; max-width: 980px; }   /* 24 + 1200×10% */
.related-dialog {
  position: relative;
  padding: 24px;
  max-width: none;
  border: 1px solid #b1b8be;          /* 원본 실측 */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 24px rgba(0, 0, 0, .12);
}
.related-header {
  padding: 0 32px 16px 0;             /* 원본 실측 */
}
.related-title {
  font-size: 24px;                    /* 원본 실측 */
  font-weight: 700;
  line-height: 1.5;
}
.btn-close-related {
  position: absolute;
  right: 24px; top: 26px;
  width: 24px; height: 24px;          /* 원본 실측 */
  background: url("../assets/ico/ico-close-common.svg") no-repeat 50% 50% / contain;
}

/* 기관 로고 타일 — 4열, 간격 12, 타일 74px, 로고 198x72 (원본 실측) */
.channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.channel-list > li { width: calc((100% - 36px) / 4); }
.channel-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  border-radius: 8px;
  border: 1px solid var(--c-border-soft);
  background: #fff;
}
.channel-list a:hover { border-color: var(--c-primary-strong); }   /* 원본 CSS 에 hover 가 없어 전역 링크색(#0b50d0)에 맞춘다 */
.channel-list img { width: 198px; height: 72px; object-fit: contain; }

/* 디지털증명 / 부가서비스 — 아이콘 48px + 제목 17/700 + 설명 15 (원본 실측) */
.related-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.related-service-list > li {
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--c-border-soft);
}
.related-service-list a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0 12px;
  height: 50px;
}
.related-service-list a:hover { text-decoration: none; }
.related-service-list a:hover strong { color: var(--c-primary-strong); }
.related-service-list .txt-wrap { min-width: 0; }
.related-service-list strong { display: block; font-size: var(--fs-base); font-weight: 700; }
.related-service-list span { display: block; font-size: var(--fs-sm); color: var(--c-text); }

/* =========================================================================
   5. 애니메이션
   ========================================================================= */
@keyframes fade-in    { from { opacity: 0; } }
@keyframes slide-down { from { transform: translateY(-16px); opacity: 0; } }
@keyframes slide-up   { from { transform: translateY(16px);  opacity: 0; } }
@keyframes slide-left { from { transform: translateX(24px);  opacity: 0; } }
@keyframes pop-in     { from { transform: scale(.96);        opacity: 0; } }

/* =========================================================================
   6. 반응형
   ========================================================================= */
@media (max-width: 1023px) {
  .total-search-tit { font-size: 22px; }
  .total-search-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 767px) {
  /* 모바일에서는 헤더 유틸을 감추고 햄버거만 남긴다
     (햄버거를 켜는 건 responsive.css 의 1023px 구간에서 이미 했다) */
  .header-util { display: none; }

  .total-search-inner { padding: 32px 0 0; }
  .rank-list { grid-template-columns: minmax(0, 1fr); }
  .gather-list { grid-template-columns: minmax(0, 1fr); }

  .modal { padding: 12px; }
  .modal-dialog { max-height: 88vh; }
  .btn-related { font-size: var(--fs-xs); padding: 0 28px 0 8px; background-position: calc(100% - 6px) 50%; }
  .related-dialog { padding: 16px; max-height: 70vh; }
  .channel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}