/* 첫 화면(/) 모바일 폭(767px 이하) 다듬기 — hmt-front#43
   기존 style.css·sub.css 는 건드리지 않고 이 파일로 덮어쓴다.
   768px 이상(태블릿·PC)에는 어떤 규칙도 적용하지 않는다. */

@media (max-width: 767px) {

    /* ── 머리 ─────────────────────────────────────────────── */
    .m_nav {
        width: 100% !important;
        padding: 8px 12px !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .m_nav .navbar-brand {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        overflow: hidden;
    }

    .m_nav .navbar-brand img.logo {
        display: block;
        height: 40px !important;
        width: auto !important;
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }

    .m_nav .navbar-toggler.b_btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        border-radius: 8px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .m_nav .navbar-toggler-icon {
        width: 22px !important;
        height: 22px !important;
        background-size: 100% 100% !important;
        filter: invert(100%) !important;
    }

    /* ── 메인 슬라이드 ────────────────────────────────────── */
    #main_con {
        height: auto !important;
        display: block !important;
        overflow: visible !important;
    }

    .m_con {
        height: auto !important;
    }

    #header-carousel,
    #header-carousel .carousel-inner {
        height: auto !important;
    }

    #header-carousel .carousel-item {
        height: min(62vh, 520px) !important;
        min-height: 340px;
        position: relative !important;
        overflow: hidden;
    }

    #header-carousel .carousel-item img.main_bg {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 사진 아래를 어둡게 깔아 흰 글씨가 묻히지 않게 한다 */
    #header-carousel .carousel-item::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 62%;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
        pointer-events: none;
        z-index: 1;
    }

    #header-carousel .carousel-caption {
        align-items: flex-end !important;
        justify-content: flex-start !important;
        padding: 0 20px 68px !important;
        z-index: 2;
    }

    /* 1번 슬라이드 — 사진 속 '오늘 함께, 내일도!' 간판에 소개 문장이 닿지 않게
       문장을 조금 올리고 그라데이션을 같은 비율로 키워 가독성을 유지한다 */
    #header-carousel .carousel-item:first-child::after {
        height: 76%;
    }

    #header-carousel .carousel-item:first-child .carousel-caption {
        padding-bottom: 92px !important;
    }

    #header-carousel .carousel-caption .container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header-carousel .carousel-caption .row {
        margin: 0 !important;
        --bs-gutter-x: 0;
    }

    #header-carousel .carousel-caption .col-lg-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        text-align: left !important;
    }

    #header-carousel .carousel-caption .m_txt,
    #header-carousel .carousel-caption p.m_txt {
        position: static !important;
        width: auto !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 17px !important;
        line-height: 1.6 !important;
        font-weight: 500 !important;
        text-align: left !important;
        letter-spacing: 0 !important;
        word-break: keep-all !important;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    /* 2번 슬라이드 — 글자 이미지가 잘리거나 흐릿하지 않게 */
    #header-carousel .carousel-caption p.sm_txt {
        text-align: center !important;
        font-size: 15px !important;
    }

    #header-carousel .carousel-caption p.sm_txt .main_txt_img {
        display: inline-block !important;
        width: 160px !important;
        max-width: 60% !important;
        height: auto !important;
        margin: 0 0 8px !important;
        vertical-align: middle;
    }

    #header-carousel .carousel-caption p.sm_txt span {
        display: inline-block !important;
        font-size: 27px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

    #header-carousel .carousel-control-prev,
    #header-carousel .carousel-control-next {
        width: 36px !important;
        opacity: 0.85 !important;
    }

    #header-carousel .carousel-control-prev-icon,
    #header-carousel .carousel-control-next-icon {
        width: 24px !important;
        height: 24px !important;
        border: 0 !important;
        background-size: 100% 100% !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    }

    /* ── 바로가기 6개 ─────────────────────────────────────── */
    #main_con .con_box {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        padding: 24px 16px !important;
        box-sizing: border-box;
    }

    .con_box .con_01 {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }

    .con_box .container-xxl {
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        align-items: stretch !important;
    }

    .b_icon {
        display: block !important;
    }

    .b_icon .container.menu_btn {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .b_icon .menu_btn > .row,
    .b_icon .menu_btn > .row > .col-md-4,
    .b_icon .col-md-4 > .row,
    .b_icon .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    .b_icon .f_box {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin: 0 !important;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    .b_icon .f_box > .col-10 {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .b_icon .f_box > .col-10 > a {
        display: block;
        height: 100%;
        text-decoration: none;
    }

    .feature.b_icon .feature-box {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        align-content: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 92px !important;
        padding: 16px 12px !important;
        background: #f3f6ff !important;
        border: 0 !important;
        border-radius: 14px !important;
        box-sizing: border-box;
    }

    .feature.b_icon .icon_btn i {
        display: inline-block !important;
        position: static !important;
        top: auto !important;
        font-size: 24px !important;
        line-height: 1 !important;
        margin: 0 !important;
        color: var(--primary) !important;
    }

    .feature.b_icon .f_box .col-10 h4 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        color: #22304a !important;
        word-break: keep-all !important;
        text-align: center !important;
    }

    /* 손가락으로 눌렀을 때 색이 뒤집히거나 아이콘이 튀지 않게 */
    .feature.b_icon .f_box .col-10 .feature-box:hover,
    .feature.b_icon .f_box .col-10 .feature-box:active {
        background: #f3f6ff !important;
        border-color: transparent !important;
    }

    .feature.b_icon .f_box .col-10 .feature-box:hover .fw-semi-bold h4,
    .feature.b_icon .f_box .col-10 .feature-box:active .fw-semi-bold h4 {
        color: #22304a !important;
    }

    .feature.b_icon .f_box .col-10 .feature-box:hover i,
    .feature.b_icon .f_box .col-10 .feature-box:active i {
        color: var(--primary) !important;
    }

    .feature.b_icon .f_box .col-10 .feature-box:hover i::before,
    .feature.b_icon .f_box .col-10 .feature-box:active i::before {
        transform: none !important;
    }

    /* 데스크톱 옆 퀵메뉴는 모바일에서 띄우지 않는다 */
    .quick_Wrap {
        display: none !important;
    }

    /* ── 인스타그램·안내 이미지: 좌우 여백만 ───────────────── */
    .con_wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px 28px !important;
        box-sizing: border-box;
    }

    .con_wrap .popup {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        margin: 0 !important;
        --bs-gutter-x: 0;
    }

    .con_wrap .popup > .ig-section,
    .con_wrap .popup > .m_board {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
    }

    .ig-section {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 0 !important;
    }

    .ig-slider-wrap {
        max-width: 400px;
        margin: 0 auto;
        padding: 0 30px;
    }

    /* 안내 이미지는 지금처럼 한 장씩 보이게 두고, 옆 칸이 잘려 보이는 것만 막는다 */
    .center_info {
        overflow: hidden;
    }

    .center_info img {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* ── 공지사항 ─────────────────────────────────────────── */
    .m_board {
        min-height: 0 !important;
    }

    .lat {
        background: transparent !important;
    }

    .lat .lat_title {
        display: block;
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #e5e5e5;
    }

    .lat .lat_title a {
        color: #111 !important;
        margin-top: 0 !important;
    }

    .lat h2 {
        font-size: 20px !important;
        padding-bottom: 10px !important;
    }

    .lat ul {
        padding: 0 !important;
        margin: 0 !important;
    }

    .lat li {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        list-style: none !important;
        min-height: 48px !important;
        line-height: 48px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border-bottom: 1px solid #eee !important;
    }

    .lat li::marker {
        content: none !important;
    }

    .lat li a {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-all !important;
    }

    .lat li a strong {
        font-weight: 600 !important;
    }

    .lat .lt_info {
        display: block !important;
        float: none !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
    }

    .lat .lt_info .lt_date {
        font-size: 13px !important;
        line-height: 1 !important;
        color: #888 !important;
        white-space: nowrap !important;
    }

    .lat .lt_more {
        width: auto !important;
        top: 2px;
        right: 0;
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #888 !important;
    }

    /* ── 하단 ─────────────────────────────────────────────── */
    .copyright {
        padding: 20px 16px !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .copyright .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .copyright .row {
        margin: 0 !important;
    }

    .copyright .text-center {
        text-align: center !important;
        margin-bottom: 0 !important;
    }

    .copyright a {
        display: block !important;
        font-size: 13px !important;
    }

    .copyright .text-center > span {
        display: block !important;
        font-size: 13px !important;
    }

    .copyright p {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .copyright p span {
        display: block !important;
        margin-left: 0 !important;
        font-size: 13px !important;
    }

    /* ≤450 블록의 br{display:inline-block} 때문에 줄이 섞이던 것을 되돌린다 */
    .copyright br {
        display: block !important;
        content: normal !important;
        padding: 0 !important;
    }

    /* ── 네이버 앱 웹뷰 겹침 완화 (hmt-front#45b) ──────────────
       첫 화면에서 동시에 움직이는 레이어를 줄인다. 하위 페이지에도 .wow 가
       있으므로 첫 화면 래퍼(#main_con·.con_wrap) 안으로만 한정한다. */
    #main_con .wow,
    .con_wrap .wow {
        animation: none !important;
        visibility: visible !important;
    }

    /* 인스타 슬라이더는 이동 transition 만 남기고 합성 레이어 예약을 푼다 */
    .ig-slider-track {
        will-change: auto !important;
    }

    /* 홈 하단 묶음 그림이 자기 상자 밖으로 새어 그려지지 않게 가둔다 */
    .con_box,
    .con_wrap {
        contain: paint;
    }
}