/* =========================================================
   iWebple 서브메뉴 (iw-sub-nav)
   색상·크기는 플러그인이 :root 에 CSS 변수로 주입한다.
   ========================================================= */

/* 배경을 칠하는 본체 — 테마의 nav/section 규칙에 밀리지 않게 클래스 3중 + !important */
.iw-subnav.iw-subnav.iw-subnav {
    background: var(--_bg) !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.iw-subnav {
    --_bg: var(--iwsn-bg, #b5714a);
    --_color: var(--iwsn-color, #fff);
    --_abg: var(--iwsn-active-bg, #fff);
    --_acolor: var(--iwsn-active-color, #333);
    --_hbg: var(--iwsn-hover-bg, rgba(255, 255, 255, .16));
    --_fs: var(--iwsn-fs, 16px);
    --_fw: var(--iwsn-fw, 700);
    --_h: var(--iwsn-h, 60px);
    --_gap: var(--iwsn-gap, 0px);
    --_radius: var(--iwsn-radius, 0px);
    --_max: var(--iwsn-max, 1600px);
    --_pad: var(--iwsn-pad, 34px);
    --_min: var(--iwsn-min, 0px);

    width: 100%;
    background: var(--_bg);
    font-family: inherit;
    position: relative;
    z-index: 20;
}

.iw-subnav.is-sticky {
    position: sticky;
    top: 0;
}

.iw-subnav.iw-subnav .iw-subnav__inner {
    max-width: var(--_max);
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 16px;
    position: relative;   /* 오른쪽 페이드(::after)의 기준 상자 — v1.10.1 */
}

/* 정렬 — v1.11.0
   가운데·오른쪽 모음은 justify-content 를 쓰지 않는다.
   justify-content:center|flex-end 는 항목이 폭을 넘칠 때 왼쪽(앞쪽) 항목이
   스크롤 영역 밖으로 밀려나 아예 볼 수 없다(scrollLeft 가 음수가 못 되므로).
   auto 마진은 남는 공간이 없으면 자동으로 0 이 되어,
   "들어가면 가운데 / 넘치면 왼쪽부터 + 정상 스크롤" 이 그대로 성립한다. */
.iw-subnav.iw-subnav--left .iw-subnav__list,
.iw-subnav.iw-subnav--center .iw-subnav__list,
.iw-subnav.iw-subnav--right .iw-subnav__list { justify-content: flex-start; }

.iw-subnav.iw-subnav.iw-subnav--center .iw-subnav__item:first-child,
.iw-subnav.iw-subnav.iw-subnav--right .iw-subnav__item:first-child { margin-left: auto !important; }
.iw-subnav.iw-subnav.iw-subnav--center .iw-subnav__item:last-child { margin-right: auto !important; }

.iw-subnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: var(--_gap);
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.iw-subnav.iw-subnav .iw-subnav__list::-webkit-scrollbar { display: none; }

.iw-subnav.iw-subnav .iw-subnav__item {
    flex: 0 0 auto;
    display: flex;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
.iw-subnav.iw-subnav .iw-subnav__item::before,
.iw-subnav.iw-subnav .iw-subnav__item::marker { content: none !important; }

.iw-subnav.iw-subnav .iw-subnav__item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--_h);
    padding: 0 var(--_pad);
    min-width: var(--_min);
    font-size: var(--_fs);
    font-weight: var(--_fw);
    line-height: 1.2;
    color: var(--_color);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--_radius);
    transition: background .18s ease, color .18s ease;
}

.iw-subnav.iw-subnav .iw-subnav__item > a:hover,
.iw-subnav.iw-subnav .iw-subnav__item > a:focus-visible {
    background: var(--_hbg);
    color: var(--_color);
}

/* 균등 분배 — 항목이 바 폭을 똑같이 나눠 가진다 (관공서 사이트 표준)
   위의 flex:0 0 auto 를 반드시 덮어야 하므로 뒤에 두고 !important */
.iw-subnav.iw-subnav.iw-subnav--justify .iw-subnav__list {
    justify-content: space-between !important;
    gap: 0 !important;
}
.iw-subnav.iw-subnav.iw-subnav--justify .iw-subnav__item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.iw-subnav.iw-subnav.iw-subnav--justify .iw-subnav__item > a {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 8px;
}

.iw-subnav.iw-subnav .iw-subnav__home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_h);
    height: var(--_h);
    flex: 0 0 auto;
    color: var(--_color);
    opacity: .85;
    text-decoration: none;
}
.iw-subnav.iw-subnav .iw-subnav__home:hover { opacity: 1; color: var(--_color); }

.iw-subnav.iw-subnav .iw-subnav__parent {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-right: 22px;
    margin-right: 6px;
    font-size: calc(var(--_fs) + 1px);
    font-weight: 800;
    color: var(--_acolor);
    white-space: nowrap;
}

/* ---------------------------------------------------------
   ① bar — 꽉 찬 색 바, 현재 항목만 흰 박스
   --------------------------------------------------------- */
.iw-subnav.iw-subnav--bar .iw-subnav__item.is-current > a {
    background: var(--_abg);
    color: var(--_acolor);
}

/* ---------------------------------------------------------
   끝 채우기 (edge bleed) — bar + 균등분배(justify) 전용
   컨테이너 최대폭(1600/1800px)을 쓰면 화면 양옆 여백에 바 배경색이 띠로 남고
   현재 항목 흰 박스가 화면 끝에 닿지 않는다.
   → 이 조합에서는 최대폭·좌우패딩을 풀어 항목이 화면을 정확히 나눠 갖게 한다.
   가짜 요소나 넘침을 쓰지 않으므로 가로 스크롤이 생길 여지가 없다.
   --------------------------------------------------------- */
.iw-subnav.iw-subnav--bar.iw-subnav--justify .iw-subnav__inner {
    max-width: none;
    padding: 0;
}
/* 모바일에서 항목이 많아 가로 스크롤로 전환되면(=few 아님) 좌우 여백을 되살린다 */
@media (max-width: 768px) {
    .iw-subnav.iw-subnav--bar.iw-subnav--justify:not(.iw-subnav--few) .iw-subnav__inner { padding: 0 8px; }
}

/* ---------------------------------------------------------
   ② tabs — 흰 배경 + 아래 경계선, 현재 항목 굵은 밑줄
   --------------------------------------------------------- */
.iw-subnav--tabs {
    border-bottom: 1px solid rgba(0, 0, 0, .10);
}
.iw-subnav.iw-subnav--tabs .iw-subnav__item > a {
    position: relative;
    color: var(--_color);
    border-radius: 0;
}
.iw-subnav--tabs .iw-subnav__item > a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 3px;
    background: var(--_acolor);
    transition: left .22s ease, right .22s ease;
}
.iw-subnav--tabs .iw-subnav__item > a:hover::after {
    left: 22%;
    right: 22%;
}
.iw-subnav.iw-subnav--tabs .iw-subnav__item.is-current > a {
    color: var(--_acolor);
    background: transparent;
}
.iw-subnav--tabs .iw-subnav__item.is-current > a::after {
    left: 0;
    right: 0;
}

/* ---------------------------------------------------------
   ③ pill — 연한 배경 위 알약 버튼
   --------------------------------------------------------- */
.iw-subnav--pill .iw-subnav__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    align-items: center;
}
.iw-subnav--pill .iw-subnav__list { gap: max(var(--_gap), 8px); }
.iw-subnav.iw-subnav--pill .iw-subnav__item > a {
    height: calc(var(--_h) - 24px);
    border-radius: 999px;
    padding: 0 clamp(16px, 1.8vw, 26px);
}
.iw-subnav.iw-subnav--pill .iw-subnav__item.is-current > a {
    background: var(--_abg);
    color: var(--_acolor);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
.iw-subnav--pill .iw-subnav__home { height: calc(var(--_h) - 24px); }

/* ---------------------------------------------------------
   ④ soft — 흰 바탕 위 연회색 캡슐 버튼, 현재 항목만 진하게
   기존 3종과 변수 이름을 분리(--_s4*)했으므로 서로 간섭하지 않는다.
   기본 규칙(.iw-subnav.iw-subnav .iw-subnav__item>a)과 특이도가 같으므로
   반드시 그 뒤에 온다 — 위치를 옮기지 말 것.
   --------------------------------------------------------- */
.iw-subnav--soft {
    --_s4bg:  var(--iwsn-s4-bg, #f2f2f4);
    --_s4fg:  var(--iwsn-s4-fg, #333);
    --_s4hbg: var(--iwsn-s4-hbg, #e7e7ec);
    --_s4abg: var(--iwsn-s4-abg, #111);
    --_s4afg: var(--iwsn-s4-afg, #fff);
    --_s4h:   var(--iwsn-s4-h, 46px);
    --_s4r:   var(--iwsn-s4-r, 999px);
    --_s4gap: var(--iwsn-s4-gap, 10px);
    --_s4pad: var(--iwsn-s4-pad, 26px);
    --_s4pv:  var(--iwsn-s4-pv, 14px);
    /* 글자 크기: 전용값이 없으면 공통 글자 크기를 그대로 쓴다 */
    --_s4fs:  var(--iwsn-s4-fs, var(--_fs));
}
.iw-subnav.iw-subnav--soft .iw-subnav__inner {
    padding-top: var(--_s4pv);
    padding-bottom: var(--_s4pv);
    align-items: center;
}
.iw-subnav.iw-subnav--soft .iw-subnav__list { gap: var(--_s4gap) !important; }
.iw-subnav.iw-subnav--soft .iw-subnav__item > a {
    height: var(--_s4h);
    min-width: 0;
    padding: 0 var(--_s4pad);
    font-size: var(--_s4fs);
    border-radius: var(--_s4r);
    background: var(--_s4bg);
    color: var(--_s4fg);
}
.iw-subnav.iw-subnav--soft .iw-subnav__item > a:hover,
.iw-subnav.iw-subnav--soft .iw-subnav__item > a:focus-visible {
    background: var(--_s4hbg);
    color: var(--_s4fg);
}
.iw-subnav.iw-subnav--soft .iw-subnav__item.is-current > a {
    background: var(--_s4abg);
    color: var(--_s4afg);
}
.iw-subnav.iw-subnav--soft .iw-subnav__home {
    height: var(--_s4h);
    width: var(--_s4h);
    border-radius: var(--_s4r);
    background: var(--_s4bg);
    color: var(--_s4fg);
    margin-right: var(--_s4gap);
    opacity: 1;
}
.iw-subnav.iw-subnav--soft .iw-subnav__parent { color: var(--_s4fg); }
/* 균등 분배와 같이 쓰면 캡슐이 폭을 나눠 갖는다(그것대로 쓸 수 있게 둔다).
   이미지처럼 가운데 모으려면 정렬을 "가운데 모음"으로. */
.iw-subnav.iw-subnav--soft.iw-subnav--justify .iw-subnav__list { gap: var(--_s4gap) !important; }
/* 균등 분배 블록의 padding:0 8px 이 더 높은 특이도로 버튼 여백을 덮어쓴다 → 되돌린다 */
.iw-subnav.iw-subnav.iw-subnav--soft.iw-subnav--justify .iw-subnav__item > a { padding: 0 var(--_s4pad); }

/* ---------------------------------------------------------
   반응형
   --------------------------------------------------------- */
@media (max-width: 1024px) {
    /* PC용 큰 여백·간격을 화면에 맞게 자동으로 줄인다 (설정값이 더 작으면 그대로 유지) */
    .iw-subnav.iw-subnav .iw-subnav__item > a {
        padding: 0 min(var(--_pad), 24px);
        min-width: 0;
    }
    .iw-subnav.iw-subnav .iw-subnav__list { gap: min(var(--_gap), 24px); }
    .iw-subnav.iw-subnav .iw-subnav__parent { display: none; }
}

@media (max-width: 768px) {
    .iw-subnav {
        --_h: var(--iwsn-m-h, 48px);
        --_fs: var(--iwsn-m-fs, 14px);
    }
    .iw-subnav__inner { padding: 0 8px; }
    /* 항목이 많으면 가로 스크롤.
       v1.10.1 까지는 여기서 가운데 정렬까지 같이 풀려서(justify-content:flex-start)
       모바일에서는 무조건 왼쪽 붙음이었다. 이제 가운데 맞춤은 위쪽 auto 마진이
       담당하므로 이 줄은 스크롤에 영향을 주지 않는다. */
    .iw-subnav.iw-subnav .iw-subnav__list {
        justify-content: flex-start;
        gap: min(var(--_gap), 10px);
    }
    /* 균등 분배(justify)인데 항목이 많아 모바일에서 자동 폭으로 바뀐 경우 —
       화면에 다 들어가면 가운데로 모은다(넘치면 auto 마진이 0 이 되어 왼쪽부터). */
    .iw-subnav.iw-subnav.iw-subnav--justify:not(.iw-subnav--few) .iw-subnav__item:first-child { margin-left: auto !important; }
    .iw-subnav.iw-subnav.iw-subnav--justify:not(.iw-subnav--few) .iw-subnav__item:last-child { margin-right: auto !important; }
    .iw-subnav.iw-subnav .iw-subnav__item > a {
        padding: 0 min(var(--_pad), 15px);
        min-width: 0;
    }
    .iw-subnav.iw-subnav.iw-subnav--justify .iw-subnav__item { flex: 0 0 auto !important; }
    .iw-subnav.iw-subnav.iw-subnav--justify .iw-subnav__item > a {
        width: auto !important;
        padding: 0 min(var(--_pad), 15px);
    }

    /* 항목이 적으면(few) 모바일에서도 균등 분배를 유지한다 — 2개면 50/50, 3개면 1/3씩.
       위의 "justify → 자동폭 + 스크롤" 규칙을 되돌리는 것이므로 반드시 뒤에 온다. */
    .iw-subnav.iw-subnav.iw-subnav--few .iw-subnav__list {
        justify-content: space-between !important;
        gap: 0 !important;
        overflow-x: visible;
    }
    .iw-subnav.iw-subnav--few .iw-subnav__inner::after { display: none; }
    .iw-subnav.iw-subnav.iw-subnav--few .iw-subnav__item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    .iw-subnav.iw-subnav.iw-subnav--few .iw-subnav__item > a {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 4px !important;
    }
    .iw-subnav--pill .iw-subnav__inner { padding-top: 8px; padding-bottom: 8px; }
    .iw-subnav--pill .iw-subnav__item > a { height: calc(var(--_h) - 16px); }
    .iw-subnav--pill .iw-subnav__home { height: calc(var(--_h) - 16px); }

    /* ④ 버튼형 모바일 — 인라인에는 --iwsn-s4-mfs 만 들어오고
       실제로 쓰는 --_s4fs 는 여기서 갈아끼운다.
       (인라인 style 의 변수는 미디어쿼리 선언을 이기므로 이름을 분리해야 한다) */
    .iw-subnav--soft {
        --_s4fs: var(--iwsn-s4-mfs, var(--_fs));
        --_s4pv: calc(var(--iwsn-s4-pv, 14px) * .7);
    }
    /* 높이는 PC 값에서 8px 줄이되 44px 를 넘지 않는다 (v1.10.1)
       PC 를 60 으로 올려도 모바일은 44 에서 멈춘다. 「모바일 버튼 높이」를
       직접 넣으면(--iwsn-s4-hm) 그 값이 그대로 쓰인다. */
    .iw-subnav.iw-subnav--soft .iw-subnav__item > a {
        height: var(--iwsn-s4-hm, min(max(34px, calc(var(--_s4h) - 8px)), 44px));
        padding: 0 min(var(--_s4pad), 16px);
    }
    .iw-subnav.iw-subnav--soft .iw-subnav__home {
        height: var(--iwsn-s4-hm, min(max(34px, calc(var(--_s4h) - 8px)), 44px));
        width: var(--iwsn-s4-hm, min(max(34px, calc(var(--_s4h) - 8px)), 44px));
        margin-right: min(var(--_s4gap), 8px);
    }
    /* 간격은 유지하되(버튼이 붙어 보이면 안 된다) 화면 폭에 맞게 줄인다 */
    .iw-subnav.iw-subnav--soft .iw-subnav__list { gap: min(var(--_s4gap), 8px) !important; }
    .iw-subnav.iw-subnav--soft.iw-subnav--few .iw-subnav__item > a { padding: 0 8px !important; }
}

/* ---------------------------------------------------------
   아주 좁은 화면 — 한 단계 더 줄인다  v1.10.1
   --------------------------------------------------------- */
@media (max-width: 480px) {
    .iw-subnav.iw-subnav .iw-subnav__item > a { padding: 0 min(var(--_pad), 12px); }
    .iw-subnav.iw-subnav .iw-subnav__list { gap: min(var(--_gap), 6px); }

    .iw-subnav.iw-subnav--soft .iw-subnav__item > a {
        height: var(--iwsn-s4-hm, min(max(32px, calc(var(--_s4h) - 12px)), 40px));
        padding: 0 min(var(--_s4pad), 12px);
    }
    .iw-subnav.iw-subnav--soft .iw-subnav__home {
        height: var(--iwsn-s4-hm, min(max(32px, calc(var(--_s4h) - 12px)), 40px));
        width: var(--iwsn-s4-hm, min(max(32px, calc(var(--_s4h) - 12px)), 40px));
    }
    .iw-subnav.iw-subnav--soft .iw-subnav__list { gap: min(var(--_s4gap), 6px) !important; }
}

/* ---------------------------------------------------------
   가로 스크롤 신호 — 오른쪽 끝 페이드  v1.10.1
   항목이 폭을 넘으면 목록은 원래부터 가로로 스크롤된다(overflow-x:auto).
   그런데 아무 표시가 없으면 "잘렸다" 로 보여서 더 있는 줄 모른다.
   그래서 오른쪽 끝을 바 배경색으로 흐린다.

   · 예전에는 이 규칙이 768px 미디어쿼리 안에만 있어서 PC 에서 항목이 넘칠 때는
     신호가 없었다 → 밖으로 뺐다.
   · 그라데이션 끝 색이 바 배경색과 같으므로, 넘치지 않는 바에서는 배경 위에
     같은 색을 덧칠하는 셈이라 눈에 보이지 않는다. JS 가 스크롤이 필요 없거나
     끝에 닿으면 .is-end 를 붙여 아예 숨긴다.
   --------------------------------------------------------- */
.iw-subnav__inner::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s ease;
    background: linear-gradient(to right, transparent, var(--_bg));
}
.iw-subnav__inner.is-end::after { opacity: 0; }
/* 왼쪽 페이드 — 스크롤을 옮겨서 앞쪽에 가려진 항목이 생겼을 때만 (v1.11.0) */
.iw-subnav__inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    background: linear-gradient(to left, transparent, var(--_bg));
    z-index: 1;
}
.iw-subnav__inner.can-prev::before { opacity: 1; }
/* 바 배경이 투명하면 그라데이션 끝 색이 없어 의미가 없다 */
.iw-subnav--s4tp .iw-subnav__inner::after,
.iw-subnav--s4tp .iw-subnav__inner::before { display: none; }
/* 항목이 적어 균등 분배를 유지하는 모바일에서는 스크롤 자체가 없다 */
.iw-subnav--few .iw-subnav__inner::after,
.iw-subnav--few .iw-subnav__inner::before { display: none; }

/* ---------------------------------------------------------
   좌우 화살표 + "밀어서 보세요" 안내  v1.11.0
   JS 가 넘침을 재고 .can-prev / .can-next 를 붙일 때만 보인다.
   → JS 가 없거나 넘치지 않으면 아예 안 보이므로 기존 화면은 그대로다.
   --------------------------------------------------------- */
.iw-subnav.iw-subnav .iw-subnav__edge {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .18);
    color: var(--_color);
    cursor: pointer;
    box-shadow: none;
    min-width: 0;
    line-height: 0;
    font-size: 0;
    -webkit-appearance: none;
    appearance: none;
}
.iw-subnav.iw-subnav .iw-subnav__edge::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.iw-subnav.iw-subnav .iw-subnav__edge--prev { left: 2px; }
.iw-subnav.iw-subnav .iw-subnav__edge--next { right: 2px; }
.iw-subnav.iw-subnav .iw-subnav__edge--prev::before { margin: -4px 0 0 -2px; transform: rotate(-135deg); }
.iw-subnav.iw-subnav .iw-subnav__edge--next::before { margin: -4px 0 0 -6px; transform: rotate(45deg); }

.iw-subnav__inner.can-prev .iw-subnav__edge--prev,
.iw-subnav__inner.can-next .iw-subnav__edge--next { display: block; }

/* 흰 바탕(④ 버튼형)에서는 흐린 검정 원 + 진한 화살표가 자연스럽다 */
.iw-subnav.iw-subnav--soft .iw-subnav__edge {
    background: rgba(0, 0, 0, .06);
    color: var(--_s4fg);
}
/* 안내 방식 설정 — 화살표만 끄기 / 전부 끄기 */
.iw-subnav--hint-fade .iw-subnav__edge { display: none !important; }
.iw-subnav--hint-none .iw-subnav__edge,
.iw-subnav--hint-none .iw-subnav__inner::after,
.iw-subnav--hint-none .iw-subnav__inner::before { display: none !important; }

/* 처음 몇 초 동안 오른쪽 화살표가 살짝 움직여 "더 있다" 는 것을 알린다 */
.iw-subnav__inner.can-next:not(.hint-done) .iw-subnav__edge--next {
    animation: iwsn-nudge 1.4s ease-in-out 3;
}
@keyframes iwsn-nudge {
    0%, 60%, 100% { transform: translateX(0); }
    30% { transform: translateX(-4px); }
}

/* 안내 문구 — 한 번 스크롤하면 사라진다 */
.iw-subnav.iw-subnav .iw-subnav__swipe {
    position: absolute;
    left: 50%;
    bottom: 2px;
    z-index: 4;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}
.iw-subnav__inner.can-next .iw-subnav__swipe { opacity: 1; }
.iw-subnav__inner.hint-done .iw-subnav__swipe { opacity: 0 !important; }

@media (max-width: 480px) {
    .iw-subnav.iw-subnav .iw-subnav__edge { width: 26px; height: 26px; margin-top: -13px; }
}

@media (prefers-reduced-motion: reduce) {
    .iw-subnav__item > a,
    .iw-subnav--tabs .iw-subnav__item > a::after { transition: none; }
    .iw-subnav .iw-subnav__edge--next { animation: none !important; }
}

/* 인쇄 */
@media print { .iw-subnav { display: none; } }


/* =========================================================
   관리자 화면 미리보기 (프론트에는 영향 없음)
   ========================================================= */
.iwsn-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    max-width: 1100px;
}
.iwsn-preset {
    display: block;
    background: #fff;
    border: 2px solid #dcdcde;
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.iwsn-preset:hover { border-color: #a7aaad; }
.iwsn-preset.is-on { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }
.iwsn-preset input { margin-right: 6px; }
.iwsn-preset__name { font-weight: 700; }
.iwsn-preset__desc { display: block; margin-top: 8px; font-size: 12px; color: #646970; line-height: 1.5; }

.iwsn-preview {
    display: flex;
    margin-top: 10px;
    border-radius: 4px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
}
.iwsn-preview .p-item { padding: 9px 10px; white-space: nowrap; }

.iwsn-preview--bar { background: #b5714a; }
.iwsn-preview--bar .p-item { color: #fff; }
.iwsn-preview--bar .p-item.is-on { background: #fff; color: #333; }

.iwsn-preview--tabs { background: #fff; border: 1px solid #e0e0e0; }
.iwsn-preview--tabs .p-item { color: #666; border-bottom: 3px solid transparent; }
.iwsn-preview--tabs .p-item.is-on { color: #111; border-bottom-color: #b5714a; }

.iwsn-preview--pill { background: #f3f0ed; padding: 6px; gap: 5px; }
.iwsn-preview--pill .p-item { color: #6b5a50; border-radius: 999px; padding: 6px 12px; }
.iwsn-preview--pill .p-item.is-on { background: #b5714a; color: #fff; }

.iwsn-preview--soft { background: #fff; border: 1px solid #e6e6e6; padding: 7px 6px; gap: 6px; }
.iwsn-preview--soft .p-item { background: #f2f2f4; color: #333; border-radius: 999px; padding: 7px 13px; }
.iwsn-preview--soft .p-item.is-on { background: #111; color: #fff; }

/* ---------------------------------------------------------
   관리자 — 화면 아래 고정 저장 바 (메인/서브 히어로와 같은 방식)
   --------------------------------------------------------- */
.iwsn-savebar {
    position: fixed;
    left: 160px;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 24px;
    background: #fff;
    border-top: 1px solid #dcdcde;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
}
.iwsn-savebar .button { margin: 0 !important; }
.iwsn-savebar__hint { font-size: 12px; color: #646970; }
body.folded .iwsn-savebar { left: 36px; }
body.wp-admin #wpbody-content { padding-bottom: 88px; }
@media (max-width: 960px) {
    .iwsn-savebar { left: 0; }
}
/* 저장이 막혔을 때 원인 입력칸 표시 — 화면 밖에서 걸리면 보이지 않아서 넣었다 */
.iwsn-invalid { outline: 2px solid #d63638 !important; outline-offset: 1px; }