@charset "utf-8";

/* ==========================================================================
   responsive.css  —  메인 골격(head / index / tail) 반응형 보정
   --------------------------------------------------------------------------
   - default.css(고정폭 1200px 레이아웃)는 그대로 두고, 이 파일에서
     미디어쿼리로만 덮어써 반응형으로 만듭니다.
   - 적용 대상: 루트 head.php / tail.php 골격(#hd, #gnb, #wrapper, #ft 등).
   - 데스크탑(>1200px)에서는 이 파일의 규칙이 거의 적용되지 않으므로
     기존 PC 화면은 그대로 유지됩니다.
   - 유지보수: 색상 / 간격 / 분기점은 아래 :root 변수만 바꾸면 됩니다.
   ========================================================================== */

:root {
    --rwd-container: 1200px;   /* 콘텐츠 최대 폭 (default.css의 1200px와 동일) */
    --rwd-gutter: 16px;        /* 모바일/태블릿 좌우 안쪽 여백 */
    --rwd-header-h: 56px;      /* 모바일 헤더 바 높이 */
    --rwd-drawer-w: 300px;     /* 모바일 드로워(메뉴) 폭 */
    --rwd-point: #4158d1;      /* 포인트 색 (기존 gnb 버튼 색과 동일) */
    --rwd-z-drawer: 1100;      /* 드로워 z-index */
    --rwd-z-dim: 1090;         /* 드로워 배경 dim z-index */
}

/* 미디어(이미지/영상) 가변화 — 영역을 넘지 않도록 */
#hd img,
#wrapper img,
#ft img { max-width: 100%; height: auto; }


/* ==========================================================================
   1) 햄버거 버튼 / 드로워 배경(dim)
   - 기본(데스크탑)에서는 숨김. 모바일 분기에서만 노출.
   ========================================================================== */
.nav-toggle { display: none; }       /* 데스크탑: 숨김 (모바일 분기에서 표시) */
.nav-dim    { display: none; }       /* 드로워 열렸을 때만 표시 */


/* ==========================================================================
   2) 컨테이너 유동화 (≤1200px)
   - default.css: #hd, #wrapper, #ft { min-width:1200px } 로 인해
     좁은 화면에서 가로 스크롤이 생김 → 여기서 해제하고 유동 폭으로 전환.
   ========================================================================== */
@media (max-width: 1200px) {

    /* 고정 min-width 해제 (가로 스크롤 방지) */
    #hd,
    #wrapper,
    #ft { min-width: 0; }

    /* 고정폭(1200px) 래퍼들을 '유동 + 최대폭'으로 전환 */
    #hd_wrapper,
    #gnb .gnb_wrap,
    #container_wr,
    #ft_wr,
    #ft_copy {
        width: auto;
        max-width: var(--rwd-container);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--rwd-gutter);
        padding-right: var(--rwd-gutter);
    }

    /* 본문/사이드: 좁은 화면에서는 세로로 쌓이도록 */
    #container {
        float: none;
        width: auto;
        margin: 20px 0;
    }
    #aside {
        float: none;
        width: auto;
        margin: 0 0 20px;
    }
}


/* ==========================================================================
   3) 모바일 헤더 + 햄버거 드로워 (≤768px)
   - 헤더 바: [로고] ............... [햄버거]
   - 메뉴(#gnb)는 왼쪽에서 슬라이드되는 드로워로 전환.
   ========================================================================== */
@media (max-width: 768px) {

    /* ----- 헤더 바 ----- */
    #hd_wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: auto;
        min-height: var(--rwd-header-h);
    }
    #logo { float: none; padding: 8px 0; }
    #logo img { max-height: 36px; width: auto; }

    /* 상단 로그인 메뉴는 헤더 바에서 숨김 (드로워 하단으로 대체) */
    .hd_login { position: static; top: auto; right: auto; display: none; }

    /* 햄버거 버튼 노출 */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    /* 3줄 아이콘 (가운데 막대 + 위/아래 가상요소) */
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        content: "";
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        transition: transform .2s ease, opacity .2s ease;
    }
    .nav-toggle__bars { position: relative; }
    .nav-toggle__bars::before { position: absolute; top: -7px; left: 0; }
    .nav-toggle__bars::after  { position: absolute; top: 7px;  left: 0; }

    /* 열림 상태: 햄버거 → X 모양 */
    .hd--nav-open .nav-toggle__bars { background: transparent; }
    .hd--nav-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
    .hd--nav-open .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

    /* ----- GNB 드로워 ----- */
    #gnb {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 80%;
        max-width: var(--rwd-drawer-w);
        background: #fff;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: var(--rwd-z-drawer);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .25);
    }
    .hd--nav-open #gnb { transform: translateX(0); }

    #gnb .gnb_wrap { width: auto; max-width: none; padding: 0; }

    /* 데스크탑 전용 '전체메뉴' 버튼/오버레이는 모바일에서 비활성화 */
    #gnb .gnb_mnal,
    #gnb .gnb_menu_btn,
    #gnb_all,
    #gnb_all_bg { display: none !important; }

    /* 1차 메뉴: 가로 → 세로 목록 */
    #gnb #gnb_1dul { border-bottom: 0; font-size: 1.15em; }
    #gnb .gnb_1dli {
        float: none;
        line-height: normal;
        border-bottom: 1px solid #eee;
    }
    #gnb .gnb_1da { padding: 14px 18px; }
    #gnb .gnb_1dli .bg { display: none; }  /* 데스크탑 드롭다운 화살표 숨김 */

    /* 2차 메뉴: 드롭다운(절대위치) → 항상 펼친 들여쓰기 목록 */
    #gnb .gnb_2dul {
        display: block;
        position: static;
        top: auto;
        min-width: 0;
        padding-top: 0;
    }
    #gnb .gnb_2dul .gnb_2dul_box { border: 0; box-shadow: none; }
    #gnb .gnb_2da { padding: 10px 18px 10px 30px; background: #f7f7f8; }

    /* ----- 드로워 배경 dim ----- */
    .hd--nav-open .nav-dim {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, .45);
        z-index: var(--rwd-z-dim);
    }

    /* 드로워 열렸을 때 배경(본문) 스크롤 잠금 */
    body.nav-open { overflow: hidden; }

    /* ----- 푸터: 다단 → 세로 스택 ----- */
    #ft_wr { display: block; padding: 24px 0; }
    #ft_wr .ft_cnt {
        width: 100%;
        float: none;
        padding: 12px var(--rwd-gutter);
    }
    #ft_copy { width: auto; }
}


/* ==========================================================================
   4) 메인(index) 콘텐츠용 반응형 그리드 헬퍼
   - index.php의 .main-content 안에서 자유롭게 사용하세요.
   - .rwd-grid 안의 자식들이 화면 폭에 따라 자동으로 열 수가 줄어듭니다.
   ========================================================================== */
.main-content { margin: 20px 0; }

.rwd-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);   /* 데스크탑: 4열 */
}
@media (max-width: 1024px) {
    .rwd-grid { grid-template-columns: repeat(3, 1fr); }  /* 태블릿: 3열 */
}
@media (max-width: 768px) {
    .rwd-grid { grid-template-columns: repeat(2, 1fr); }  /* 모바일: 2열 */
}
@media (max-width: 480px) {
    .rwd-grid { grid-template-columns: 1fr; }             /* 소형: 1열 */
}