/* =========================================================
   iWebple 서브메뉴 (iw-sub-nav) 1.12.0 — 11가지 스타일
   앞 화면 부분(관리자 화면 미리보기 전까지)은 PHP fallback_css() 와 같아야 한다 — tools/_s3_css.py 로 만든다.
   색상·크기는 플러그인이 :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 */
}

.iw-subnav.iw-subnav--left .iw-subnav__list { justify-content: flex-start; }
.iw-subnav.iw-subnav--center .iw-subnav__list { justify-content: center; }
.iw-subnav.iw-subnav--right .iw-subnav__list { justify-content: flex-end; }

.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; }
    /* 항목이 많으면 가로 스크롤 — 가운데 정렬은 풀어야 스크롤이 정상 동작 */
    .iw-subnav.iw-subnav .iw-subnav__list {
        justify-content: flex-start;
        gap: min(var(--_gap), 10px);
    }
    .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; }
/* 바 배경이 투명하면 그라데이션 끝 색이 없어 의미가 없다 */
.iw-subnav--s4tp .iw-subnav__inner::after { display: none; }

/* ---------------------------------------------------------
   가로 스크롤 신호 — 왼쪽 끝 페이드 · 모바일 가운데 맞춤  v1.12.0
   · 왼쪽 페이드는 목록이 왼쪽으로 밀렸을 때만(JS 가 .is-mid) 보인다 → 스크롤 안 하면 예전과 같다.
     목록 앞에 홈 아이콘·대메뉴 이름이 있으면 그 뒤(목록 시작선 --iwsn-fl)부터 흐린다.
   · 모바일에서 항목이 화면보다 적으면 가운데로 모은다(auto 여백). 넘치면 여백이 0 이 되어
     예전처럼 왼쪽부터 스크롤된다 — justify-content:center 와 달리 앞쪽이 잘리지 않는다.
   --------------------------------------------------------- */
.iw-subnav__inner::before {
    content: "";
    position: absolute;
    left: var(--iwsn-fl, 0px);
    top: 0;
    bottom: 0;
    width: 36px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    background: linear-gradient(to left, transparent, var(--_bg));
}
.iw-subnav__inner.is-mid::before { opacity: 1; }
.iw-subnav--s4tp .iw-subnav__inner::before { display: none; }
@media (max-width: 768px) {
    .iw-subnav.iw-subnav.iw-subnav--center:not(.iw-subnav--few) .iw-subnav__item:first-child,
    .iw-subnav.iw-subnav.iw-subnav--justify:not(.iw-subnav--few) .iw-subnav__item:first-child,
    .iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item:first-child,
    .iw-subnav.iw-subnav.iw-subnav--dots .iw-subnav__item:first-child { margin-left: auto !important; }
    .iw-subnav.iw-subnav.iw-subnav--center:not(.iw-subnav--few) .iw-subnav__item:last-child,
    .iw-subnav.iw-subnav.iw-subnav--justify:not(.iw-subnav--few) .iw-subnav__item:last-child,
    .iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item:last-child,
    .iw-subnav.iw-subnav.iw-subnav--dots .iw-subnav__item:last-child { margin-right: auto !important; }
}

/* =========================================================
   ⑤~⑪ 신규 스타일 (1.12.0) — nav 에 .iw-subnav--x 가 붙은 것만
   색 변수는 스타일 번호 접두로 분리했다(⑤ --_s5* · --iwsn-s5-* … ⑪ --_s11* · --iwsn-s11-*).
   공통 규칙은 그 스타일이 넘겨준 --_xac(포인트) · --_xbg(바탕) · --_xfg(글자) 만 쓴다.
   테마(iwebple-theme)의 .iw-subnav a { padding · 밑줄 } 규칙을 먼저 걷어 낸다.
   --------------------------------------------------------- */
.iw-subnav.iw-subnav--x { color: var(--_xfg); font-weight: 400; }
.iw-subnav.iw-subnav--x a { padding: 0; border: 0; font-size: inherit; font-weight: inherit; color: inherit; text-decoration: none; white-space: normal; }
.iw-subnav.iw-subnav--x ul,
.iw-subnav.iw-subnav--x ol { list-style: none; margin: 0; padding: 0; }
.iw-subnav.iw-subnav--x li { list-style: none; margin: 0; padding: 0; background: none; }
.iw-subnav.iw-subnav--x li::before,
.iw-subnav.iw-subnav--x li::marker { content: none; }
.iw-subnav.iw-subnav--x summary { list-style: none; cursor: pointer; }
.iw-subnav.iw-subnav--x summary::-webkit-details-marker { display: none; }
.iw-subnav.iw-subnav--x summary::marker { content: ""; }
.iw-subnav.iw-subnav--x .iw-subnav__inner { padding: 0 40px; overflow: visible; gap: 0; }
.iw-subnav.iw-subnav--x a:focus-visible,
.iw-subnav.iw-subnav--x summary:focus-visible { outline: 2px solid var(--_xac); outline-offset: -2px; }
/* 화살표 · 꺾쇠 · 메뉴 아이콘 (글자색을 따른다) */
.iw-subnav--x .iwsn-caret { flex: none; width: 8px; height: 8px; margin-left: 14px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.iw-subnav--x details[open] > summary .iwsn-caret { transform: translateY(2px) rotate(-135deg); }
.iw-subnav--x .iwsn-arw { flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.iw-subnav--x .iwsn-burger { position: relative; flex: none; display: block; width: 18px; height: 14px; }
.iw-subnav--x .iwsn-burger::before,
.iw-subnav--x .iwsn-burger::after,
.iw-subnav--x .iwsn-burger b { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.iw-subnav--x .iwsn-burger::before { top: 0; }
.iw-subnav--x .iwsn-burger b { top: 6px; }
.iw-subnav--x .iwsn-burger::after { top: 12px; }
.iw-subnav--x details[open] > summary .iwsn-burger::before { transform: translateY(6px) rotate(45deg); }
.iw-subnav--x details[open] > summary .iwsn-burger b { opacity: 0; }
.iw-subnav--x details[open] > summary .iwsn-burger::after { transform: translateY(-6px) rotate(-45deg); }
/* 스크롤이 없는 형태는 끝 페이드가 필요 없다 */
.iw-subnav--location .iw-subnav__inner::after, .iw-subnav--location .iw-subnav__inner::before,
.iw-subnav--side .iw-subnav__inner::after, .iw-subnav--side .iw-subnav__inner::before,
.iw-subnav--card .iw-subnav__inner::after, .iw-subnav--card .iw-subnav__inner::before,
.iw-subnav--float .iw-subnav__inner::after, .iw-subnav--float .iw-subnav__inner::before,
.iw-subnav--mega .iw-subnav__inner::after, .iw-subnav--mega .iw-subnav__inner::before { display: none; }
/* 3차 메뉴 줄 (큰 숫자 탭 · 점 줄 아래) */
.iw-subnav.iw-subnav--x .iwsn-sub3wrap { max-width: var(--_max); margin: 0 auto; padding: 0 40px 18px; }
.iw-subnav.iw-subnav--x .iwsn-sub3--row { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.iw-subnav.iw-subnav--x .iwsn-sub3--row a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: calc(var(--_fs) - 1px); font-weight: 500; color: var(--_xfg); opacity: .62; }
.iw-subnav.iw-subnav--x .iwsn-sub3--row a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.iw-subnav.iw-subnav--x .iwsn-sub3--row a:hover { opacity: 1; }
.iw-subnav.iw-subnav--x .iwsn-sub3--row .is-current a { opacity: 1; color: var(--_xac); font-weight: 700; }

/* ---------------------------------------------------------
   ⑤ location — 위치 드롭다운 바  ⌂ › 대메뉴 ▼ › 현재 ▼
   --------------------------------------------------------- */
.iw-subnav--location {
    --_s5ac: var(--iwsn-s5-ac, var(--iw-brand, #1a5fb4));
    --_s5bg: var(--iwsn-s5-bg, #ffffff);
    --_s5fg: var(--iwsn-s5-fg, #222222);
    --_xac: var(--_s5ac); --_xbg: var(--_s5bg); --_xfg: var(--_s5fg); --_bg: var(--_s5bg);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
    z-index: 30;
}
.iw-subnav.iw-subnav--location .iw-subnav__inner { align-items: stretch; height: var(--_h); }
.iw-subnav.iw-subnav--location .iwsn-loc__home { flex: none; display: flex; align-items: center; justify-content: center; width: var(--_h); background: var(--_xac); color: #fff; }
.iw-subnav.iw-subnav--location .iwsn-drop { position: relative; flex: 0 0 clamp(190px, 15vw, 260px); border-right: 1px solid rgba(0, 0, 0, .1); }
.iw-subnav.iw-subnav--location .iwsn-drop__btn { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 22px; font-size: var(--_fs); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.iw-subnav.iw-subnav--location .iwsn-drop__t { overflow: hidden; text-overflow: ellipsis; }
.iw-subnav.iw-subnav--location .iwsn-loc__d2 .iwsn-drop__btn,
.iw-subnav.iw-subnav--location .iwsn-loc__d3 .iwsn-drop__btn { font-weight: 700; }
.iw-subnav.iw-subnav--location details[open] > .iwsn-drop__btn { color: var(--_xac); }
.iw-subnav.iw-subnav--location .iwsn-drop__list { position: absolute; left: -1px; right: -1px; top: 100%; z-index: 40; padding: 8px 0; background: #fff; color: #333; border-top: 2px solid var(--_xac); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); }
.iw-subnav.iw-subnav--location .iwsn-drop__list a { display: flex; align-items: center; min-height: 44px; padding: 8px 22px; font-size: calc(var(--_fs) - 1px); font-weight: 500; line-height: 1.35; transition: background .15s ease, color .15s ease; }
.iw-subnav.iw-subnav--location .iwsn-drop__list a:hover { background: #f4f6f8; color: var(--_xac); }
.iw-subnav.iw-subnav--location .iwsn-drop__list .is-current > a { color: var(--_xac); font-weight: 700; }
/* ⑤ 어두운 바탕색만 고르고 글자색은 비웠을 때 (1.13.0 · .iwsn-dk — PHP 가 흰 글자 변수와 함께 붙인다)
   홈 칸이 포인트색이라 바와 같은 색이면 묻힌다 → 반투명 흰색 · 칸 사이 선 · 열린 칸 글자도 흰 바탕용으로.
   사진 위(겹칠 때)는 히어로 sub.css 의 더 센 규칙이 이긴다. */
.iw-subnav.iw-subnav--location.iwsn-dk .iwsn-loc__home { background: rgba(255, 255, 255, .16); }
.iw-subnav.iw-subnav--location.iwsn-dk .iwsn-drop { border-right-color: rgba(255, 255, 255, .2); }
.iw-subnav.iw-subnav--location.iwsn-dk details[open] > .iwsn-drop__btn { color: #fff; }
/* ⑤ 사진 위에 겹칠 때 고른 바탕색·진하기 (1.13.0)
   iw-main-hero visual/css/sub.css 가 겹칠 때 --_s5bg 를 어두운 반투명으로 덮는다(.iwv .iwsv-slot--over .iw-subnav--location · 0,3,0).
   관리자에서 바탕색이나 진하기를 고르면 nav 에 .iwsn-ov + --iwsn-s5-obg/ofg 가 붙고, 아래가 더 세게(0,5,0) 다시 덮는다.
   .iwsn-ov-lt = 밝은 바탕(진한 글자) — 홈 칸 · 칸 사이 선 · 열린 칸 글자를 사진 밖 모양으로 돌린다.
   고른 값이 없으면 클래스가 안 붙어 예전과 같다. 사진 위가 아닌 자리(모바일 .iwsv-navmo · 비주얼 아래)는 원래 바탕색(--iwsn-s5-bg) 그대로. */
.iwv .iwsv-slot--over .iw-subnav.iw-subnav--location.iwsn-ov { --_s5bg: var(--iwsn-s5-obg); --_s5fg: var(--iwsn-s5-ofg); }
.iwv .iwsv-slot--over .iw-subnav.iw-subnav--location.iwsn-ov-lt .iwsn-loc__home { background: var(--_xac); color: #fff; }
.iwv .iwsv-slot--over .iw-subnav.iw-subnav--location.iwsn-ov-lt .iwsn-drop { border-right-color: rgba(0, 0, 0, .1); }
.iwv .iwsv-slot--over .iw-subnav.iw-subnav--location.iwsn-ov-lt details[open] > .iwsn-drop__btn { color: var(--_xac); }
/* ⑤ 위치 드롭다운 — 펼침 방향 (1.14.0 · 설정 nx_dir) · 769px 이상에서만 — 모바일은 늘 아래(예전 그대로)
   iwsn-dir-up   위로 — 버튼 위 공간이 펼침 칸보다 작으면 JS 가 그 칸에 is-down 을 붙여 이번만 아래로
   iwsn-dir-auto 아래로 — 아래 공간이 모자라고 위가 더 넓으면 JS 가 is-up 을 붙여 이번만 위로
   JS 는 클래스만 토글하고 자리·선·그림자·화살표는 여기서 정한다. 클래스가 없는 사이트(기본 = 아래)는 이 규칙이 하나도 안 걸린다 */
@media (min-width: 769px) {
  .iw-subnav.iw-subnav--location.iwsn-dir-up .iwsn-drop:not(.is-down) > .iwsn-drop__list,
  .iw-subnav.iw-subnav--location.iwsn-dir-auto .iwsn-drop.is-up > .iwsn-drop__list { top: auto; bottom: 100%; border-top: 0; border-bottom: 2px solid var(--_xac); box-shadow: 0 -14px 30px rgba(0, 0, 0, .14); }
  .iw-subnav.iw-subnav--location.iwsn-dir-up .iwsn-drop:not(.is-down) > summary .iwsn-caret { transform: translateY(2px) rotate(-135deg); }
  .iw-subnav.iw-subnav--location.iwsn-dir-up .iwsn-drop[open]:not(.is-down) > summary .iwsn-caret,
  .iw-subnav.iw-subnav--location.iwsn-dir-auto .iwsn-drop.is-up[open] > summary .iwsn-caret { transform: translateY(-2px) rotate(45deg); }
  .iw-subnav.iw-subnav--location.iwsn-measure .iwsn-drop.is-measure > .iwsn-drop__list { visibility: hidden; }
  /* 사진 위에 겹친 바(히어로 sub.css 가 늘 위로) — 「위」 설정에서 위 공간이 모자라 is-down 이면 거기서도 이번만 아래로 */
  .iwv .iwsv-slot--over .iw-subnav.iw-subnav--location.iwsn-dir-up .iwsn-drop.is-down > .iwsn-drop__list { top: 100%; bottom: auto; border-bottom: 0; border-top: 2px solid var(--_xac); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
}

/* ---------------------------------------------------------
   ⑥ side — 세로 목록 (왼쪽 대메뉴 이름 · 오른쪽 한 줄씩)
   --------------------------------------------------------- */
.iw-subnav--side {
    --_s6ac: var(--iwsn-s6-ac, var(--iw-brand, #1a5fb4));
    --_s6bg: var(--iwsn-s6-bg, #ffffff);
    --_s6fg: var(--iwsn-s6-fg, #1d2125);
    --_xac: var(--_s6ac); --_xbg: var(--_s6bg); --_xfg: var(--_s6fg); --_bg: var(--_s6bg);
}
.iw-subnav.iw-subnav--side .iw-subnav__inner { display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 880px); gap: 40px; align-items: start; padding-top: clamp(40px, 3.6vw, 60px); padding-bottom: clamp(32px, 3vw, 48px); }
.iw-subnav.iw-subnav--side .iwsn-side__title { margin: 0; font-size: clamp(26px, 2.2vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; color: var(--_xfg); }
.iw-subnav.iw-subnav--side .iwsn-side__title::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: 18px; background: var(--_xac); }
.iw-subnav.iw-subnav--side .iwsn-fold__btn { display: none; }
.iw-subnav.iw-subnav--side .iwsn-side__list { border-top: 2px solid var(--_xfg); }
.iw-subnav.iw-subnav--side .iwsn-side__item { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.iw-subnav.iw-subnav--side .iwsn-side__a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--_h); padding: 10px 10px 10px 22px; font-size: calc(var(--_fs) + 1px); font-weight: 500; line-height: 1.35; transition: color .15s ease; }
.iw-subnav.iw-subnav--side .iwsn-side__a .iwsn-arw { opacity: .35; transition: opacity .15s ease; }
.iw-subnav.iw-subnav--side .iwsn-side__a:hover { color: var(--_xac); }
.iw-subnav.iw-subnav--side .iwsn-side__a:hover .iwsn-arw { opacity: 1; }
.iw-subnav.iw-subnav--side .iwsn-side__item.is-current > .iwsn-side__a { color: var(--_xac); font-weight: 700; }
.iw-subnav.iw-subnav--side .iwsn-side__item.is-current > .iwsn-side__a::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; background: var(--_xac); }
.iw-subnav.iw-subnav--side .iwsn-side__item.is-current > .iwsn-side__a .iwsn-arw { opacity: 1; }
.iw-subnav.iw-subnav--side .iwsn-side__sub { padding: 0 0 14px 38px; }
.iw-subnav.iw-subnav--side .iwsn-side__sub a { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: calc(var(--_fs) - 1px); color: var(--_xfg); opacity: .6; }
.iw-subnav.iw-subnav--side .iwsn-side__sub a::before { content: ""; width: 8px; height: 1px; background: currentColor; }
.iw-subnav.iw-subnav--side .iwsn-side__sub a:hover { opacity: 1; }
.iw-subnav.iw-subnav--side .iwsn-side__sub .is-current a { opacity: 1; color: var(--_xac); font-weight: 700; }

/* ---------------------------------------------------------
   ⑦ num — 큰 숫자 탭 (위 굵은 선 = 현재)
   --------------------------------------------------------- */
.iw-subnav--num {
    --_s7ac: var(--iwsn-s7-ac, var(--iw-brand, #1a5fb4));
    --_s7bg: var(--iwsn-s7-bg, #ffffff);
    --_s7fg: var(--iwsn-s7-fg, #1d2125);
    --_xac: var(--_s7ac); --_xbg: var(--_s7bg); --_xfg: var(--_s7fg); --_bg: var(--_s7bg);
    --_color: var(--_s7fg); --_hbg: transparent;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}
.iw-subnav.iw-subnav--num .iw-subnav__list { gap: 0; }
.iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item { flex: 1 1 0; min-width: 0; }
.iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item > a {
    position: relative; width: 100%; height: auto; min-width: 0;
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;
    padding: 24px 24px 22px; border-radius: 0; border-top: 1px solid rgba(0, 0, 0, .12);
    color: var(--_xfg); white-space: nowrap; transition: color .18s ease;
}
.iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item + .iw-subnav__item > a { box-shadow: inset 1px 0 0 rgba(0, 0, 0, .08); }
.iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item > a::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--_xac); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item > a:hover { background: transparent; color: var(--_xfg); }
.iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item > a:hover::after { transform: scaleX(.35); }
.iw-subnav.iw-subnav--num .iwsn-num__no { font-size: clamp(30px, 2.5vw, 44px); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--_xfg); opacity: .3; font-variant-numeric: tabular-nums; }
.iw-subnav.iw-subnav--num .iwsn-num__t { font-size: var(--_fs); font-weight: 600; line-height: 1.3; opacity: .72; }
.iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item.is-current > a::after { transform: scaleX(1); }
.iw-subnav.iw-subnav--num .iw-subnav__item.is-current .iwsn-num__no { color: var(--_xac); opacity: 1; font-weight: 600; }
.iw-subnav.iw-subnav--num .iw-subnav__item.is-current .iwsn-num__t { opacity: 1; font-weight: 800; }
.iw-subnav.iw-subnav--num.has-sub3 { box-shadow: none; }

/* ---------------------------------------------------------
   ⑧ card — 카드 격자 (오른쪽 아래 화살표 · 현재 카드 채움)
   --------------------------------------------------------- */
.iw-subnav--card {
    --_s8ac: var(--iwsn-s8-ac, var(--iw-brand, #1a5fb4));
    --_s8bg: var(--iwsn-s8-bg, #f3f5f8);
    --_s8fg: var(--iwsn-s8-fg, #1d2125);
    --_xac: var(--_s8ac); --_xbg: var(--_s8bg); --_xfg: var(--_s8fg); --_bg: var(--_s8bg);
}
.iw-subnav.iw-subnav--card .iw-subnav__inner { display: block; padding-top: 32px; padding-bottom: 32px; }
.iw-subnav.iw-subnav--card .iwsn-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.iw-subnav.iw-subnav--card .iwsn-card { display: flex; flex-direction: column; background: #fff; color: var(--_xfg); border: 1px solid rgba(0, 0, 0, .09); border-radius: 14px; transition: border-color .18s ease, box-shadow .18s ease; }
.iw-subnav.iw-subnav--card .iwsn-card__a { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 112px; padding: 22px 22px 18px; font-size: calc(var(--_fs) + 1px); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.iw-subnav.iw-subnav--card .iwsn-card__a .iwsn-arw { position: relative; align-self: flex-end; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; opacity: .3; transform: none; transition: opacity .18s ease; }
.iw-subnav.iw-subnav--card .iwsn-card__a .iwsn-arw::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -4px 0 0 -6px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.iw-subnav.iw-subnav--card .iwsn-card:hover { border-color: var(--_xac); box-shadow: 0 8px 22px rgba(0, 0, 0, .07); }
.iw-subnav.iw-subnav--card .iwsn-card:hover .iwsn-arw { opacity: 1; }
.iw-subnav.iw-subnav--card .iwsn-card.is-current { background: var(--_xac); border-color: var(--_xac); color: #fff; }
.iw-subnav.iw-subnav--card .iwsn-card.is-current .iwsn-arw { opacity: 1; }
.iw-subnav.iw-subnav--card .iwsn-card__sub { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 22px 18px; margin-top: -6px; }
.iw-subnav.iw-subnav--card .iwsn-card__sub a { font-size: calc(var(--_fs) - 2px); font-weight: 500; opacity: .8; }
.iw-subnav.iw-subnav--card .iwsn-card__sub a:hover,
.iw-subnav.iw-subnav--card .iwsn-card__sub .is-current a { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------
   ⑨ float — 떠 있는 메뉴 단추 (바 없음)
   --------------------------------------------------------- */
.iw-subnav--float {
    --_s9ac: var(--iwsn-s9-ac, var(--iw-brand, #1a5fb4));
    --_s9bg: var(--iwsn-s9-bg, #16191d);
    --_s9fg: var(--iwsn-s9-fg, #ffffff);
    --_xac: var(--_s9ac); --_xbg: var(--_s9bg); --_xfg: var(--_s9fg); --_bg: transparent;
    height: 0; z-index: 80;
}
.iw-subnav.iw-subnav--float .iw-subnav__inner { padding: 0; max-width: none; height: 0; }
.iw-subnav.iw-subnav--float .iwsn-float { position: fixed; right: 28px; bottom: 28px; z-index: 90; }
.iw-subnav.iw-subnav--float .iwsn-float__btn { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 26px 0 8px; border-radius: 999px; background: var(--_xbg); color: var(--_xfg); box-shadow: 0 12px 32px rgba(0, 0, 0, .26); }
.iw-subnav.iw-subnav--float .iwsn-float__btn .iwsn-burger { box-sizing: content-box; width: 18px; padding: 16px 13px 14px; border-radius: 50%; background: var(--_xac); color: #fff; }
.iw-subnav.iw-subnav--float .iwsn-burger::before { top: 16px; left: 13px; right: 13px; }
.iw-subnav.iw-subnav--float .iwsn-burger b { top: 22px; left: 13px; right: 13px; }
.iw-subnav.iw-subnav--float .iwsn-burger::after { top: 28px; left: 13px; right: 13px; }
.iw-subnav.iw-subnav--float .iwsn-float__t { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; white-space: nowrap; }
.iw-subnav.iw-subnav--float .iwsn-float__t small { font-size: 12px; font-weight: 500; opacity: .66; }
.iw-subnav.iw-subnav--float .iwsn-float__t b { font-size: var(--_fs); font-weight: 700; }
.iw-subnav.iw-subnav--float .iwsn-float__panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: 300px; max-height: min(70vh, 560px); overflow: auto; padding: 20px 10px 12px; background: #fff; color: #222; border-radius: 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, .2); }
.iw-subnav.iw-subnav--float .iwsn-float__head { margin: 0 14px 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, .1); font-size: 13px; font-weight: 700; color: #8a919a; }
.iw-subnav.iw-subnav--float .iwsn-float__list > li > a { display: flex; align-items: center; min-height: 46px; padding: 8px 14px; border-radius: 10px; font-size: var(--_fs); font-weight: 600; line-height: 1.35; transition: background .15s ease, color .15s ease; }
.iw-subnav.iw-subnav--float .iwsn-float__list > li > a:hover { background: #f3f5f8; }
.iw-subnav.iw-subnav--float .iwsn-float__item.is-current > a { background: #f3f5f8; color: var(--_xac); font-weight: 800; }
.iw-subnav.iw-subnav--float .iwsn-float__sub { padding: 2px 0 8px 28px; }
.iw-subnav.iw-subnav--float .iwsn-float__sub a { display: block; padding: 6px 0; font-size: calc(var(--_fs) - 2px); color: #6b7280; }
.iw-subnav.iw-subnav--float .iwsn-float__sub .is-current a { color: var(--_xac); font-weight: 700; }

/* ---------------------------------------------------------
   ⑩ dots — 점 줄 (가로선 위 마디 · 지나온 마디 채움)
   --------------------------------------------------------- */
.iw-subnav--dots {
    --_s10ac: var(--iwsn-s10-ac, var(--iw-brand, #1a5fb4));
    --_s10bg: var(--iwsn-s10-bg, #ffffff);
    --_s10fg: var(--iwsn-s10-fg, #1d2125);
    --_xac: var(--_s10ac); --_xbg: var(--_s10bg); --_xfg: var(--_s10fg); --_bg: var(--_s10bg);
    --_color: var(--_s10fg); --_hbg: transparent;
}
.iw-subnav.iw-subnav--dots .iw-subnav__list { gap: 0; padding-top: 8px; }
.iw-subnav.iw-subnav.iw-subnav--dots .iw-subnav__item { position: relative; flex: 1 1 0; min-width: 120px; }
.iw-subnav.iw-subnav--dots .iw-subnav__item::before,
.iw-subnav.iw-subnav--dots .iw-subnav__item::after { content: ""; position: absolute; top: 27px; height: 2px; background: rgba(0, 0, 0, .14); }
.iw-subnav.iw-subnav--dots .iw-subnav__item::before { left: 0; right: 50%; }
.iw-subnav.iw-subnav--dots .iw-subnav__item::after { left: 50%; right: 0; }
.iw-subnav.iw-subnav--dots .iw-subnav__item:first-child::before,
.iw-subnav.iw-subnav--dots .iw-subnav__item:last-child::after { display: none; }
.iw-subnav.iw-subnav--dots .iw-subnav__item.is-done::before,
.iw-subnav.iw-subnav--dots .iw-subnav__item.is-done::after,
.iw-subnav.iw-subnav--dots .iw-subnav__item.is-current::before { background: var(--_xac); }
.iw-subnav.iw-subnav.iw-subnav--dots .iw-subnav__item > a {
    position: relative; z-index: 1; width: 100%; height: auto; min-width: 0;
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px;
    padding: 18px 10px 22px; border-radius: 0; color: var(--_xfg); text-align: center;
}
.iw-subnav.iw-subnav.iw-subnav--dots .iw-subnav__item > a:hover { background: transparent; color: var(--_xac); }
.iw-subnav.iw-subnav--dots .iwsn-dot { flex: none; box-sizing: border-box; width: 12px; height: 12px; margin: 4px; border-radius: 50%; background: #fff; border: 2px solid rgba(0, 0, 0, .25); transition: border-color .18s ease; }
.iw-subnav.iw-subnav--dots .iw-subnav__item > a:hover .iwsn-dot { border-color: var(--_xac); }
.iw-subnav.iw-subnav--dots .iw-subnav__item.is-done .iwsn-dot { background: var(--_xac); border-color: var(--_xac); }
.iw-subnav.iw-subnav--dots .iw-subnav__item.is-current .iwsn-dot { width: 20px; height: 20px; margin: 0; border: 6px solid var(--_xac); box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--_xac); }
.iw-subnav.iw-subnav--dots .iwsn-dots__t { font-size: var(--_fs); font-weight: 600; line-height: 1.3; opacity: .62; white-space: nowrap; }
.iw-subnav.iw-subnav--dots .iw-subnav__item.is-done .iwsn-dots__t { opacity: .85; }
.iw-subnav.iw-subnav--dots .iw-subnav__item.is-current .iwsn-dots__t { opacity: 1; font-weight: 800; color: var(--_xfg); }

/* ---------------------------------------------------------
   ⑪ mega — 현재 위치 한 줄 + 전체 메뉴 펼침
   --------------------------------------------------------- */
.iw-subnav--mega {
    --_s11ac: var(--iwsn-s11-ac, var(--iw-brand, #1a5fb4));
    --_s11bg: var(--iwsn-s11-bg, #1a1e23);
    --_s11fg: var(--iwsn-s11-fg, #ffffff);
    --_xac: var(--_s11ac); --_xbg: var(--_s11bg); --_xfg: var(--_s11fg); --_bg: var(--_s11bg);
    z-index: 30;
}
.iw-subnav.iw-subnav--mega .iw-subnav__inner { position: static; align-items: stretch; justify-content: space-between; height: var(--_h); padding-right: 0; }
.iw-subnav.iw-subnav--mega .iwsn-path { display: flex; align-items: center; min-width: 0; font-size: calc(var(--_fs) - 1px); font-weight: 500; }
.iw-subnav.iw-subnav--mega .iwsn-path li { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.iw-subnav.iw-subnav--mega .iwsn-path li + li::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 14px 0 10px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .5; }
.iw-subnav.iw-subnav--mega .iwsn-path a { opacity: .72; overflow: hidden; text-overflow: ellipsis; }
.iw-subnav.iw-subnav--mega .iwsn-path a:hover { opacity: 1; }
.iw-subnav.iw-subnav--mega .iwsn-path li:last-child a { opacity: 1; font-weight: 700; }
.iw-subnav.iw-subnav--mega .iwsn-path__home { display: flex; }
.iw-subnav.iw-subnav--mega .iwsn-mega { position: static; flex: none; display: flex; }
.iw-subnav.iw-subnav--mega .iwsn-mega__btn { display: flex; align-items: center; gap: 14px; height: 100%; padding: 0 30px; background: var(--_xac); color: #fff; font-size: var(--_fs); font-weight: 700; white-space: nowrap; }
.iw-subnav.iw-subnav--mega .iwsn-mega__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; max-height: min(78vh, 720px); overflow: auto; padding: 44px 0 50px; background: #fff; color: #222; border-top: 3px solid var(--_xac); box-shadow: 0 26px 44px rgba(0, 0, 0, .18); }
.iw-subnav.iw-subnav--mega .iwsn-mega__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px 30px; max-width: var(--_max); margin: 0 auto; padding: 0 40px; }
.iw-subnav.iw-subnav--mega .iwsn-mega__h { margin: 0 0 10px; padding-bottom: 12px; border-bottom: 2px solid #222; font-size: calc(var(--_fs) + 2px); font-weight: 800; letter-spacing: -.02em; }
.iw-subnav.iw-subnav--mega .iwsn-mega__col.is-current .iwsn-mega__h { color: var(--_xac); border-color: var(--_xac); }
.iw-subnav.iw-subnav--mega .iwsn-mega__list > li > a { display: block; padding: 7px 0; font-size: calc(var(--_fs) - 1px); font-weight: 500; line-height: 1.4; color: #4b5360; }
.iw-subnav.iw-subnav--mega .iwsn-mega__list a:hover { color: var(--_xac); }
.iw-subnav.iw-subnav--mega .iwsn-mega__list .is-current > a { color: var(--_xac); font-weight: 700; }
.iw-subnav.iw-subnav--mega .iwsn-mega__sub { padding: 0 0 6px 12px; }
.iw-subnav.iw-subnav--mega .iwsn-mega__sub a { display: block; padding: 4px 0; font-size: calc(var(--_fs) - 3px); color: #8a919a; }
.iw-subnav.iw-subnav--mega .iwsn-mega__sub a::before { content: "- "; }

/* ---------------------------------------------------------
   신규 스타일 — 태블릿 · 모바일
   --------------------------------------------------------- */
@media (max-width: 1024px) {
    .iw-subnav.iw-subnav--side .iw-subnav__inner { grid-template-columns: minmax(180px, 32%) minmax(0, 1fr); gap: 28px; }
    .iw-subnav.iw-subnav--location .iwsn-drop { flex-basis: 200px; }
    .iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item > a { padding: 20px 18px 18px; }
}
@media (max-width: 768px) {
    .iw-subnav.iw-subnav--x .iw-subnav__inner { padding: 0 20px; }
    .iw-subnav.iw-subnav--x .iwsn-sub3wrap { padding: 0 20px 14px; }
    .iw-subnav.iw-subnav--x .iwsn-sub3--row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px 18px; }
    .iw-subnav.iw-subnav--x .iwsn-sub3--row a { white-space: nowrap; }

    /* ⑤ ⌂ + 현재 칸만 — 열면 화면 폭 목록 */
    .iw-subnav.iw-subnav--location .iw-subnav__inner { padding: 0; position: relative; }
    .iw-subnav.iw-subnav--location .iwsn-loc__d1 { display: none; }
    .iw-subnav.iw-subnav--location .iwsn-drop { position: static; flex: 1 1 0; min-width: 0; }
    .iw-subnav.iw-subnav--location .iwsn-drop:last-child { border-right: 0; }
    .iw-subnav.iw-subnav--location .iwsn-drop__btn { padding: 0 16px; }
    .iw-subnav.iw-subnav--location .iwsn-drop__list { left: 0; right: 0; max-height: 60vh; overflow: auto; }

    /* ⑥ 접힌 상자 (현재 ▼) */
    .iw-subnav.iw-subnav--side .iw-subnav__inner { display: block; padding-top: 14px; padding-bottom: 14px; }
    .iw-subnav.iw-subnav--side .iwsn-side__title { display: none; }
    .iw-subnav.iw-subnav--side .iwsn-fold__btn { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 18px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 10px; font-size: calc(var(--_fs) + 1px); font-weight: 700; }
    .iw-subnav.iw-subnav--side .iwsn-fold[open] > .iwsn-fold__btn { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
    .iw-subnav.iw-subnav--side .iwsn-side__list { border: 1px solid rgba(0, 0, 0, .16); border-top: 0; border-radius: 0 0 10px 10px; padding: 0 4px; }
    .iw-subnav.iw-subnav--side .iwsn-side__item:last-child { border-bottom: 0; }
    .iw-subnav.iw-subnav--side .iwsn-side__a { min-height: 48px; padding-left: 16px; font-size: var(--_fs); }
    .iw-subnav.iw-subnav--side .iwsn-side__sub { padding-left: 30px; }

    /* ⑦ ⑩ 가로 스크롤 */
    .iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item { flex: 0 0 auto; }
    .iw-subnav.iw-subnav.iw-subnav--num .iw-subnav__item > a { width: auto; min-width: 112px; padding: 16px 16px 14px; gap: 4px; }
    .iw-subnav.iw-subnav--num .iwsn-num__no { font-size: 24px; }
    .iw-subnav.iw-subnav.iw-subnav--dots .iw-subnav__item { flex: 0 0 auto; min-width: 104px; }
    .iw-subnav.iw-subnav.iw-subnav--dots .iw-subnav__item > a { padding: 14px 8px 16px; gap: 10px; }
    .iw-subnav.iw-subnav--dots .iw-subnav__item::before,
    .iw-subnav.iw-subnav--dots .iw-subnav__item::after { top: 23px; }

    /* ⑧ 2열 격자 */
    .iw-subnav.iw-subnav--card .iw-subnav__inner { padding-top: 18px; padding-bottom: 18px; }
    .iw-subnav.iw-subnav--card .iwsn-card__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .iw-subnav.iw-subnav--card .iwsn-card { border-radius: 12px; }
    .iw-subnav.iw-subnav--card .iwsn-card__a { min-height: 78px; gap: 10px; padding: 14px 14px 12px; font-size: var(--_fs); }
    .iw-subnav.iw-subnav--card .iwsn-card__a .iwsn-arw { width: 26px; height: 26px; }
    .iw-subnav.iw-subnav--card .iwsn-card__sub { padding: 0 14px 12px; }

    /* ⑨ 화면 아래 가운데 */
    .iw-subnav.iw-subnav--float .iwsn-float { right: auto; left: 50%; bottom: 16px; transform: translateX(-50%); }
    .iw-subnav.iw-subnav--float .iwsn-float__btn { height: 54px; padding-right: 22px; }
    .iw-subnav.iw-subnav--float .iwsn-float__btn .iwsn-burger { padding: 13px 11px 13px; }
    .iw-subnav.iw-subnav--float .iwsn-burger::before { top: 13px; left: 11px; right: 11px; }
    .iw-subnav.iw-subnav--float .iwsn-burger b { top: 19px; left: 11px; right: 11px; }
    .iw-subnav.iw-subnav--float .iwsn-burger::after { top: 25px; left: 11px; right: 11px; }
    .iw-subnav.iw-subnav--float .iwsn-float__panel { right: auto; left: 50%; transform: translateX(-50%); width: min(320px, calc(100vw - 32px)); }

    /* ⑪ 위치 줄은 마지막 두 칸 · 단추는 아이콘만 · 펼침은 한 줄씩 */
    .iw-subnav.iw-subnav--mega .iwsn-path li:not(:first-child):not(:nth-last-child(-n+2)) { display: none; }
    .iw-subnav.iw-subnav--mega .iwsn-mega__btn { padding: 0 20px; }
    .iw-subnav.iw-subnav--mega .iwsn-mega__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .iw-subnav.iw-subnav--mega .iwsn-mega__panel { padding: 24px 0 28px; max-height: 70vh; }
    .iw-subnav.iw-subnav--mega .iwsn-mega__in { grid-template-columns: 1fr; gap: 22px; padding: 0 20px; }
    .iw-subnav.iw-subnav--mega .iwsn-mega__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
    .iw-subnav.iw-subnav--mega .iwsn-mega__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .iw-subnav--x *,
    .iw-subnav--x *::before,
    .iw-subnav--x *::after { transition: none !important; }
}


/* ---------------------------------------------------------
   항목이 적은(few) 바에서 글자가 길 때 — 예전 4종 모바일  v1.12.0 (4단계)
   · 예전에는 항목을 1/3씩 같은 폭으로 나누고 글자 폭을 무시해(min-width:0) 긴 이름이 옆 항목 위로 겹쳤다.
   · 같은 폭 나누기는 그대로 두고, 항목이 제 글자보다 좁아지지만 않게 한다 → 다 들어가면 예전과 똑같고,
     안 들어가면 목록이 가로로 밀리며 오른쪽 안내(페이드)가 보인다.
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .iw-subnav.iw-subnav.iw-subnav--few .iw-subnav__item { min-width: max-content !important; }
    .iw-subnav.iw-subnav.iw-subnav--few .iw-subnav__list { overflow-x: auto; }
    .iw-subnav.iw-subnav--few .iw-subnav__inner:not(.is-end)::after { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .iw-subnav__item > a,
    .iw-subnav--tabs .iw-subnav__item > a::after { transition: none; }
}

/* 인쇄 */
@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; }

/* ⑤~⑪ 신규 스타일 미리보기 (1.12.0) */
.iwsn-preview--location { background: #fff; border: 1px solid #e0e0e0; }
.iwsn-preview--location .p-home { background: #1a5fb4; color: #fff; padding: 9px 10px; }
.iwsn-preview--location .p-item { color: #333; border-right: 1px solid #e6e6e6; padding: 9px 14px; }
.iwsn-preview--location .p-item.is-on { color: #1a5fb4; }
.iwsn-preview--side { background: #fff; border: 1px solid #e0e0e0; padding: 8px 10px; gap: 12px; align-items: flex-start; }
.iwsn-preview--side .p-head { font-size: 14px; font-weight: 800; color: #111; border-top: 2px solid #1a5fb4; padding-top: 4px; }
.iwsn-preview--side .p-col { display: flex; flex-direction: column; flex: 1; border-top: 2px solid #111; }
.iwsn-preview--side .p-item { padding: 5px 8px; color: #444; border-bottom: 1px solid #eee; }
.iwsn-preview--side .p-item.is-on { color: #1a5fb4; box-shadow: inset 3px 0 0 #1a5fb4; }
.iwsn-preview--num { background: #fff; border: 1px solid #e0e0e0; }
.iwsn-preview--num .p-item { display: flex; flex-direction: column; flex: 1; padding: 6px 8px; color: #555; border-top: 3px solid transparent; }
.iwsn-preview--num .p-item em { font-style: normal; font-size: 17px; font-weight: 300; color: #bbb; line-height: 1.1; }
.iwsn-preview--num .p-item.is-on { border-top-color: #1a5fb4; color: #111; }
.iwsn-preview--num .p-item.is-on em { color: #1a5fb4; font-weight: 700; }
.iwsn-preview--card { background: #f3f5f8; padding: 6px; gap: 5px; }
.iwsn-preview--card .p-item { flex: 1; background: #fff; border: 1px solid #e3e6ea; border-radius: 6px; padding: 12px 8px; color: #222; }
.iwsn-preview--card .p-item.is-on { background: #1a5fb4; border-color: #1a5fb4; color: #fff; }
.iwsn-preview--float { background: repeating-linear-gradient(135deg, #f6f7f9 0 8px, #eef0f3 8px 16px); padding: 18px 8px 8px; justify-content: flex-end; }
.iwsn-preview--float .p-all { background: #16191d; color: #fff; border-radius: 999px; padding: 7px 14px; }
.iwsn-preview--dots { background: #fff; border: 1px solid #e0e0e0; padding: 6px 4px; }
.iwsn-preview--dots .p-item { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; padding: 2px; color: #888; background: linear-gradient(#ccc, #ccc) no-repeat center 6px / 100% 2px; }
.iwsn-preview--dots .p-item i { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #bbb; box-sizing: border-box; }
.iwsn-preview--dots .p-item.is-on { color: #111; }
.iwsn-preview--dots .p-item.is-on i { border: 3px solid #1a5fb4; }
.iwsn-preview--mega { background: #1a1e23; justify-content: space-between; }
.iwsn-preview--mega .p-item { color: rgba(255, 255, 255, .75); padding: 9px 12px; }
.iwsn-preview--mega .p-item b { color: #fff; }
.iwsn-preview--mega .p-all { background: #1a5fb4; color: #fff; padding: 9px 12px; }

/* ---------------------------------------------------------
   관리자 — 화면 아래 고정 저장 바 (메인/서브 히어로와 같은 방식)
   --------------------------------------------------------- */
.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; }