/* ==========================================================
   sns_last_fixed — main.css 반응형 완전 동기화 버전
   brochurebox 기본 너비/마진 기준으로 각 구간 맞춤
========================================================== */

/* ── 기본 스타일 (데스크탑 ≥ 1301px) ──────────────────── */
/* 기본 brochurebox: width 292px, margin-right 20px, 4열 배치
   → 4번째(마지막)이므로 margin-right: 0                   */
.brochurebox.sns_last_fixed {
    clear: none !important;
    float: left !important;
    width: 292px !important;
    height: 176px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: url(/img/mobile/kr/lei/content/sns_more4_01.jpg) no-repeat !important;
    background-size: cover !important;
}

.sns_last_fixed .box_container {
    height: 176px !important;
    padding: 0 !important;
    width: 100% !important;
}

.sns_last_fixed .back_bg {
    background: rgba(52, 152, 219, 0.85) !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
}

.sns_last_fixed h3 {
    position: relative;
    z-index: 10;
    margin-top: 8px !important;   /* ↑ 위 여백 축소 */
    margin-bottom: 10px !important; /* ↓ 아래 여백 축소 → 리스트 바짝 붙임 */
    margin-left: 20px !important;
}

/* brochure_iconlink_box 내부 box_container: 높이 auto, 패딩 제거 */
.sns_last_fixed .brochure_iconlink_box .box_container {
    height: auto !important;
    padding: 0 !important;
}

.modern_sns_list {
    position: relative;
    z-index: 20;
    padding: 0 20px 8px !important; /* 상단 패딩 제거 → 리스트 올라옴 */
}

.modern_sns_list ul li {
    background: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 7px !important;
    height: 34px !important;
    border-radius: 3px;
    list-style: none;
    transition: all 0.2s ease;
    border: none !important;
}

.modern_sns_list ul li a {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    text-decoration: none !important;
}

.modern_sns_list ul li i {
    width: 20px;
    font-size: 16px;
    color: #3498db;
    margin-right: 10px;
    text-align: center;
}

.modern_sns_list ul li .text {
    font-size: 13px !important;
    color: #333 !important;
    font-weight: 600 !important;
    flex-grow: 1;
    line-height: normal;
}

.modern_sns_list ul li .arrow {
    font-size: 11px;
    color: #bbb;
}

.modern_sns_list ul li:hover {
    background: #fff !important;
    transform: translateX(5px);
}

.modern_sns_list ul li a img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin-right: 10px;
    flex-shrink: 0;
}


/* ==========================================================
   반응형 구간 — main.css brochurebox 너비에 정밀 동기화
========================================================== */

/* ── 1280px ~ 1300px ─────────────────────────────────────
   brochurebox: width 290px  (margin-right 20px 유지)
   4열 배치, 4번째이므로 margin-right: 0                   */
@media screen and (max-width: 1300px) and (min-width: 1280px) {
    .brochurebox.sns_last_fixed {
        width: 290px !important;
        margin-right: 0 !important;
        height: 176px !important;
    }
}

/* ── 1024px ~ 1279px ─────────────────────────────────────
   brochurebox: width 229px, margin-right 15px
   4열 배치, 4번째이므로 margin-right: 0                   */
@media screen and (max-width: 1279px) and (min-width: 1024px) {
    .brochurebox.sns_last_fixed {
        width: 229px !important;
        margin-right: 0 !important;
        height: 176px !important;
    }
}

/* ── 800px ~ 1023px ──────────────────────────────────────
   brochurebox: width 372px, margin-right 15px
   2열 배치 (1·2번 첫 줄 / 3·4번 둘째 줄)
   4번째(짝수 끝)이므로 margin-right: 0                    */
@media screen and (max-width: 1023px) and (min-width: 800px) {
    .brochurebox.sns_last_fixed {
        width: 372px !important;
        margin-right: 0 !important;
        height: 176px !important;
    }
}

/* ── 770px ~ 799px ───────────────────────────────────────
   brochurebox: width 357px, margin-right 15px / 2열 배치  */
@media screen and (max-width: 799px) and (min-width: 770px) {
    .brochurebox.sns_last_fixed {
        width: 357px !important;
        margin-right: 0 !important;
        height: 176px !important;
    }
}

/* ── 740px ~ 769px ───────────────────────────────────────
   brochurebox: width 342px / 2열 배치                     */
@media screen and (max-width: 769px) and (min-width: 740px) {
    .brochurebox.sns_last_fixed {
        width: 342px !important;
        margin-right: 0 !important;
        height: 176px !important;
    }
}

/* ── 720px ~ 739px ───────────────────────────────────────
   brochurebox: width 332px / 2열 배치                     */
@media screen and (max-width: 739px) and (min-width: 720px) {
    .brochurebox.sns_last_fixed {
        width: 332px !important;
        margin-right: 0 !important;
        height: 176px !important;
    }
}

/* ── 670px ~ 719px ───────────────────────────────────────
   brochurebox: width 307px / 2열 배치                     */
@media screen and (max-width: 719px) and (min-width: 670px) {
    .brochurebox.sns_last_fixed {
        width: 307px !important;
        margin-right: 0 !important;
        height: 176px !important;
    }
}

/* ── 640px ~ 669px ───────────────────────────────────────
   brochurebox: width 292px / 2열 배치                     */
@media screen and (max-width: 669px) and (min-width: 640px) {
    .brochurebox.sns_last_fixed {
        width: 292px !important;
        margin-right: 0 !important;
        height: 176px !important;
    }
}

/* ── 480px ~ 639px ───────────────────────────────────────
   brochurebox: width 100%, 1열 배치
   box_container height: 145px                             */
@media screen and (max-width: 639px) and (min-width: 480px) {
    .brochurebox.sns_last_fixed {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        height: auto !important;
        min-height: 145px;
    }
    .sns_last_fixed .box_container {
        height: 145px !important;
    }
}

/* ── 420px ~ 479px ───────────────────────────────────────
   brochurebox: width 100%, 1열 배치                       */
@media screen and (max-width: 479px) and (min-width: 420px) {
    .brochurebox.sns_last_fixed {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        height: auto !important;
        min-height: 145px;
    }
    .sns_last_fixed .box_container {
        height: 145px !important;
    }
}

/* ── 400px ~ 419px ─────────────────────────────────────── */
@media screen and (max-width: 419px) and (min-width: 400px) {
    .brochurebox.sns_last_fixed {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        height: auto !important;
        min-height: 145px;
    }
    .sns_last_fixed .box_container {
        height: 145px !important;
    }
}

/* ── 380px ~ 399px ─────────────────────────────────────── */
@media screen and (max-width: 399px) and (min-width: 380px) {
    .brochurebox.sns_last_fixed {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        height: auto !important;
        min-height: 145px;
    }
    .sns_last_fixed .box_container {
        height: 145px !important;
    }
}

/* ── 360px ~ 379px ─────────────────────────────────────── */
@media screen and (max-width: 379px) and (min-width: 360px) {
    .brochurebox.sns_last_fixed {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        height: auto !important;
        min-height: 145px;
    }
    .sns_last_fixed .box_container {
        height: 145px !important;
    }
}

/* ── ~ 359px (최소 화면) ────────────────────────────────── */
@media screen and (max-width: 359px) and (min-width: 1px) {
    .brochurebox.sns_last_fixed {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        height: auto !important;
        min-height: 145px;
    }
    .sns_last_fixed .box_container {
        height: 145px !important;
    }
}