@charset "utf-8";
/* =========================================================================
   responsive.css — 화면 폭에 따른 레이아웃 변경
   -------------------------------------------------------------------------
   원본은 데스크톱(1248px) 기준으로 만들고 아래로 내려가며 무너뜨리는
   'desktop first' 방식이라 여기서도 max-width 미디어쿼리를 쓴다.
   ========================================================================= */

/* ---------- 1) 1248px 미만 : 고정폭 → 가변폭 ---------- */
@media (max-width: 1247px) {
  .area-left  { width: auto; flex: 1 1 auto; min-width: 0; }
  .area-right { width: 340px; flex: 0 0 340px; }

  .sch-section2 { grid-template-columns: minmax(260px, 38%) 1fr; }
  .search-area  { width: 100%; max-width: 588px; }
  .main-search-ai { width: 100%; }
}

/* ---------- 1-1) 통합검색 닫기 버튼 ----------
   원본은 상자(792) 바깥 오른쪽 200px 자리에 닫기를 둔다.
   그 자리가 없는 좁은 화면에서는 화면 밖으로 나가 '닫을 수 없는 창'이 된다.
   → 상자 위쪽에 자리를 만들어 안으로 들인다. (1056px 미만부터 필요) */
@media (max-width: 1099px) {
  .total-search-inner { padding-top: 48px; }
  .btn-close-layer { right: 0; top: 0; }
}

/* ---------- 2) 1023px 미만 : 한 컬럼 ---------- */
@media (max-width: 1023px) {
  /* 원본은 이 폭부터 GNB 줄을 통째로 감추고(#iw_header .header-bottom{display:none})
     메뉴를 전체메뉴 버튼 하나로 몰아넣는다. 예전에는 여기서 GNB 를 남겨 두고
     좁아지면 가로로 스크롤시켰는데, 원본에는 없는 동작이라 똑같이 감춘다.
     감추는 대신 전체메뉴(햄버거) 버튼을 이 폭부터 함께 띄운다 — 안 그러면
     768~1023px 구간에서 주메뉴로 들어갈 길이 사라진다. */
  .header-bottom { display: none; }
  .btn-allmenu   { display: grid; }
  /* 헤더 높이 149px 은 '데스크톱에서 본문 시작점을 181px 에 맞추기 위한' 못박은 값이다.
     GNB 줄을 감추면 안쪽 내용이 81.5px 밖에 안 되는데 상자만 149px 로 남아
     헤더 아래에 67px 짜리 흰 띠가 생긴다 → 내용에 맞춰 준다. */
  .header { height: auto; }

  .main-col { flex-direction: column; }
  .area-left,
  .area-right { width: auto; flex: 1 1 auto; }

  .area-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .main-event-banner { grid-column: 1 / -1; }
}

/* ---------- 3) 767px 미만 : 모바일 ---------- */
@media (max-width: 767px) {
  :root { --fs-base: 16px; --fs-tit: 18px; }

  .inner-wrap { padding: 0 16px; }

  /* 헤더 : 로고 + 햄버거만 */
  .header-top { height: 64px; padding-top: 8px; padding-right: 56px; }

  /* (GNB·메가메뉴용 모바일 규칙이 여기 있었는데, 위 1023px 구간에서
      .header-bottom 을 통째로 감추게 되면서 아무 데도 걸리지 않는 죽은 규칙이 됐다) */

  /* 좌측 카드 그리드 해제 → 순서대로 한 줄씩 */
  .sch-section2 { display: flex; flex-direction: column; }
  .sc-main-lifeguide { grid-row: auto; }
  .sch-fld-cont > .cont-wrap { height: auto; padding: 16px; }
  .sc-main-lifeguide { min-height: 420px; }

  .area-right { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 16px; }
  .main-favorite,
  .main-mygov,
  .main-notice { height: auto; }
  .login-before { padding: 20px; }

  /* 검색창 : 마스코트를 빼고 폭을 채운다 */
  .search-area { height: 56px; }
  .input-fn { height: 52px; padding: 6px 16px; }
  .main-search-ai .input-fn::before { display: none; }
  .input-fn .input { height: 40px; padding-left: 4px; font-size: 16px; }

  /* 칩 : 한 페이지를 화면 폭에 맞추고 2열로 */
  .chip-page {
    flex: 0 0 100%;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, 48px);   /* 8개를 2열 × 4행으로 */
  }

  /* 생활·가족가이드 : 데스크톱의 '카드 밖으로 19px 삐져나오기'를 되돌린다 */
  .sc-main-lifeguide .cont-area { margin: 0; }
  .sc-main-lifeguide .hor-scroll-wrap { margin-left: 0; }
  .sc-main-lifeguide .btn-tab { padding: 0 0 8px; }
  .guide-panel { flex: 0 0 100%; width: 100%; margin-right: 0; padding: 4px 0; }
  .guide-panel a { width: 100%; }
  .guide-panel .txt { max-width: none; }

  .benefit-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }

  /* 푸터 */
  /* 300px 고정 3개(900)가 화면을 넘친다 → 폭을 나눠 갖게 */
  .footer-related-list > li { flex: 1 1 0; min-width: 0; }
  .btn-related { padding: 0 8px; font-size: var(--fs-sm); }
  /* 레이어도 화면 폭 안으로 */
  .related-layer.footer-channel,
  .related-layer.footer-policy,
  .related-layer.footer-policy.etc { left: 16px; right: 16px; width: auto; min-width: 0; max-width: none; }
  .channel-list > li { width: calc((100% - 12px) / 2); }
  .related-service-list > li { width: 100%; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fnb .list { flex-wrap: wrap; row-gap: 4px; }
  .info-footer { padding: 24px 16px; }

  /* bottom 은 숨김(-100px)/보임(12px) 두 상태를 따로 둬야 한다.
     여기서 bottom:12px 만 쓰면 모바일에서 버튼이 늘 떠 있다. */
  .btn-top { right: 12px; width: 48px; height: 48px; padding-top: 26px; background-position: 50% 10px; }
  .btn-top.show { bottom: 12px; }
}

/* ---------- 4) 479px 미만 ---------- */
@media (max-width: 479px) {
  .onestop-links { grid-template-columns: minmax(0, 1fr); }
  .mygov-service a { width: 100%; }
  .depth-2 > li { width: 100%; }
}

/* ---------- 5) 인쇄 ---------- */
@media print {
  .header, .footer, .btn-top, .banner-control, .main-search-ai { display: none !important; }
  body { background: #fff; }
  .card, .sch-fld-cont > .cont-wrap { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}

/* ---------- 6) 동작 줄이기 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}