@charset "UTF-8";
/* ==============================================================
   new-content.css - 신규 디자인 콘텐츠 호환 스타일시트 (구 디자인 사이트 전용)

   생성 방식: 신규 디자인 컨테이너의 common.css + sub.css 전체를
   ".nd-content.nd-content" 스코프로 기계 변환한 결과 + fonts.css 원본 병합.
   선언부는 원본과 byte 단위로 동일하며 선택자에만 스코프가 붙는다.

   이 파일의 모든 규칙은 ".nd-content.nd-content" 안에서만 동작하므로,
   마커가 없는 기존 구 디자인 콘텐츠에는 어떤 영향도 주지 않는다.

   수작업 편집 금지 - 원본이 바뀌면 생성 스크립트를 다시 돌릴 것.
   ============================================================== */

/* ===== source: common.css ===== */
/* ==============================================================
   서울노동포털 - 공통 스타일시트
   (헤더, 푸터, 리셋, 공통 컴포넌트)

   브레이크포인트 (breakpoint)
   ─ 모바일  : 기본값 (~ 767px)
   ─ 태블릿  : 768px  ~ 1199px   (@media min-width: 768px)
   ─ 데스크톱: 1200px ~           (@media min-width: 1200px)

   주의사항
   ─ 컨테이너 양쪽 패딩은 절대 0이 되지 않도록 유지
   ─ [Tiles 공통] 표시된 영역은 header.jsp / footer.jsp 로 분리 예정
   ─ [프론트 전용] 표시된 스타일은 Tiles 연동 시 불필요하면 제거
   ============================================================== */


/* ────────────────────────────────────────
   CSS 변수
   ──────────────────────────────────────── */
.nd-content.nd-content {
    /* 색상 */
    --color-primary:        #3B82F6;
    --color-primary-hover:  #2563EB;
    --color-primary-medium: #4E90CE;
    --color-primary-dark:   #1B3A6E;
    --color-orange:         #E06218;
    --color-orange-light:   #F07535;

    /* 센터찾기/쉼터찾기 지도 페이지 강조색 */
    --color-center-blue:    #444EC7;
    --color-shelter-orange: #F97316;

    --color-text:           #333333;
    --color-text-sub:       #555555;
    --color-text-light:     #888888;
    --color-text-blue:      #2A5FAC;

    --color-bg:             #FFFFFF;
    --color-bg-util:        #F2F3F5;
    --color-bg-light:       #F5F7FA;
    --color-bg-footer:      #F8F9FB;
    --color-bg-footer-btm:  #3B4455;

    --color-border:         #DDDDDD;
    --color-border-light:   #EEEEEE;

    /* 서브페이지 테두리/구분선 (표·카드·탭·캘린더 등에서 공용으로 쓰는 슬레이트 톤) */
    --color-line:           #CBD5E1;
    --color-line-light:     #E2E8F0;

    /* 슬라이더 배경 */
    --slider-bg-start:      #ADDAFF;
    --slider-bg-end:        #DEF0FF;

    /* 반경 (KRDS 기준) */
    --radius-xs:  2px;
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  10px;
    --radius-xl:  12px;

    /* 그림자 */
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.10);

    /* 컨테이너 */
    --container-max:     1140px;
    --container-pad-sm:  20px;    /* 모바일 양쪽 최소 패딩 */
    --container-pad-md:  32px;    /* 태블릿 양쪽 패딩 */
    --container-pad-lg:  40px;    /* 데스크톱 양쪽 패딩 */

    /* 폰트 */
    --font: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}


/* ────────────────────────────────────────
   리셋 / 기본
   ──────────────────────────────────────── */
.nd-content.nd-content *, .nd-content.nd-content *::before, .nd-content.nd-content *::after { box-sizing: border-box; }

/* 검색폼 등에서 접근성용 <fieldset style="display:contents">로 감싸는 경우가 많은데,
   fieldset은 브라우저 기본 테두리/여백이 있고 일부 브라우저는 display:contents를
   완전히 지원하지 않아 기본 테두리가 그대로 보이는 경우가 있어 명시적으로 리셋 */
.nd-content.nd-content fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.nd-content.nd-content legend { padding: 0; }

.nd-content.nd-content {
    font-size: 16px;
    scroll-behavior: smooth;
}

.nd-content.nd-content {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.nd-content.nd-content a { color: inherit; text-decoration: none; }

.nd-content.nd-content ul, .nd-content.nd-content ol { list-style: none; margin: 0; padding: 0; }
.nd-content.nd-content h1, .nd-content.nd-content h2, .nd-content.nd-content h3, .nd-content.nd-content h4, .nd-content.nd-content h5, .nd-content.nd-content h6 { margin: 0; font-weight: 700; line-height: 1.3; }
.nd-content.nd-content p { margin: 0; }
.nd-content.nd-content button { cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
.nd-content.nd-content img { max-width: 100%; height: auto; display: block; }
.nd-content.nd-content address { font-style: normal; }

/* 스크린리더 전용 */
.nd-content.nd-content .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ────────────────────────────────────────
   공통 레이아웃 - 컨테이너
   주의: 양쪽 padding은 항상 최소 var(--container-pad-sm) 유지
   ──────────────────────────────────────── */
.nd-content.nd-content .container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad-sm);  /* 모바일: 양쪽 16px */
}

@media (min-width: 768px) {
    .nd-content.nd-content .container {
        padding: 0 var(--container-pad-md);  /* 태블릿: 양쪽 24px */
    }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .container {
        padding: 0 var(--container-pad-lg);  /* 데스크톱: 양쪽 20px */
    }
}


/* ────────────────────────────────────────
   유틸리티 바 (상단)
   [Tiles 공통] → utilBar.jsp
   ──────────────────────────────────────── */
.nd-content.nd-content .util-bar {
    background: var(--color-bg-util);
}

.nd-content.nd-content .util-bar__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad-sm);
    display: flex;
    justify-content: flex-start;
}

.nd-content.nd-content .util-bar__nav {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nd-content.nd-content .util-bar__nav li a {
    display: block;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--color-text-sub);
    border-right: 1px solid var(--color-border);
    transition: color .2s;
    white-space: nowrap;
}

.nd-content.nd-content .util-bar__nav li:last-child a { border-right: none; }
.nd-content.nd-content .util-bar__nav li.is-active a  { background: #fff; }
.nd-content.nd-content .util-bar__nav li a:hover      { color: var(--color-primary); }

/* 좁은 모바일(≤430px, 300px까지): 3개 탭이 줄바꿈 없이 한 줄에 들어가도록
   글자 크기와 좌우 패딩을 줄인다. */
@media (max-width: 430px) {
    .nd-content.nd-content .util-bar__nav li a {
        padding: 8px 6px;
        font-size: 9px;
    }
}

@media (min-width: 768px) {
    .nd-content.nd-content .util-bar__inner {
        padding: 0 var(--container-pad-md);
    }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .util-bar__inner {
        padding: 0 var(--container-pad-lg);
    }
}


/* ────────────────────────────────────────
   헤더
   [Tiles 공통] → header.jsp
   ──────────────────────────────────────── */
.nd-content.nd-content .header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nd-content.nd-content .header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad-sm);
    height: 70px;
    display: flex;
    align-items: center;
    gap: 0;
}

/* 로고 */
.nd-content.nd-content .header__logo {
    flex-shrink: 0;
    margin-right: 32px;
}

.nd-content.nd-content .header__logo a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nd-content.nd-content .header__logo img {
    height: 36px;
    width: auto;
    display: block;
}

/* GNB */
.nd-content.nd-content .gnb { flex: 1; }

.nd-content.nd-content .gnb__list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.nd-content.nd-content .gnb__link {
    display: block;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: color .2s, background .2s;
    white-space: nowrap;
}

.nd-content.nd-content .gnb__link:hover {
    color: var(--color-primary);
    background: #EBF4FF;
}

/* 헤더 유틸 */
.nd-content.nd-content .header__utils {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 8px;
}

.nd-content.nd-content .util-link {
    font-size: 12px;
    color: var(--color-text-sub);
    padding: 4px 4px;
    border-radius: 12px;
    transition: color .2s;
    white-space: nowrap;
}
.nd-content.nd-content .util-link:hover { color: var(--color-primary); }

.nd-content.nd-content .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--color-text-sub);
}

/* ── 검색 드롭다운 팝업 (바로가기 메뉴 검색 버튼에서 열림) ──
   .shortcut-menu__search-btn 클릭(data-open-search) 시 JS로 is-open 토글되어 펼쳐지는 검색창
   ───────────────────────────────────────────── */
.nd-content.nd-content .search-dropdown {
    position: relative;
}

.nd-content.nd-content .search-dropdown__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;              /* 아이콘/버튼이 우측에 있어 우측 정렬 → 화면 밖 넘침 방지 */
    z-index: 60;
    width: 520px;
    max-width: 90vw;
    padding: 22px 24px 24px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);

    /* 접힌 상태: 위쪽 기준으로 아래로 펼쳐지도록 */
    transform: scaleY(0);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    transition: transform .28s ease, opacity .28s ease, visibility .28s;
}

/* hover 시 아이콘→패널 사이 8px 간격에서 hover가 끊기지 않도록 투명 브릿지 */
.nd-content.nd-content .search-dropdown__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

/* hover / focus / 활성(js) 시 펼침 */
.nd-content.nd-content .search-dropdown:hover .search-dropdown__panel,
.nd-content.nd-content .search-dropdown:focus-within .search-dropdown__panel,
.nd-content.nd-content .search-dropdown.is-open .search-dropdown__panel {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}

.nd-content.nd-content .search-dropdown__form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 22px;
    border: 5px solid #CADDFF;
    border-radius: 40px;
    transition: border-color .2s;
}
.nd-content.nd-content .search-dropdown__form:focus-within {
    border-color: #99B9FF;
}

.nd-content.nd-content .search-dropdown__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: 16px;
    color: var(--color-text);
    padding: 5px 0;
}
.nd-content.nd-content .search-dropdown__input::placeholder {
    color: #9AA3AF;
}

.nd-content.nd-content .search-dropdown__submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 10px;   /* 아이콘을 우측 끝에서 살짝 왼쪽으로 */
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform .15s;
}
.nd-content.nd-content .search-dropdown__submit:hover { transform: scale(1.08); }
.nd-content.nd-content .search-dropdown__submit img { display: block; }

.nd-content.nd-content .search-dropdown__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

@media (min-width: 428px) and (max-width: 532px) {
    .nd-content.nd-content .search-dropdown__tags {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
    }
}

.nd-content.nd-content .search-tag {
    display: inline-flex;
    align-items: center;
    border: none;
    cursor: pointer;
    padding: 11px 15px;
    border-radius: 40px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: filter .2s, transform .15s;
}
.nd-content.nd-content .search-tag:hover { transform: translateY(-1px); filter: brightness(0.95); }

.nd-content.nd-content .search-tag--dark {
    background: #334155;
    color: #CADDFF;
}
.nd-content.nd-content .search-tag--light {
    background: #CADDFF;
    color: #334155;
}

/* ── 전체 폭 변형(헤더 전용) ──
   헤더 아래로 화면 전체 폭 띠가 펼쳐지고, 안쪽 콘텐츠는 중앙 정렬
   ───────────────────────────────────────────── */
.nd-content.nd-content .search-dropdown--full {
    position: static;   /* 패널 기준을 .header(sticky) 로 → 전체 폭 확보 */
}

.nd-content.nd-content .search-dropdown--full .search-dropdown__panel {
    top: 100%;          /* 헤더 바로 아래 */
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    padding: 28px 0 32px;
    border-radius: 0 0 20px 20px;
    /* 상단·좌우 번짐 제거 → 아래쪽으로만 그림자 (좌우 short line 방지) */
    box-shadow: 0 14px 18px -18px rgba(0, 0, 0, 0.28);
}

/* hover 유지용 브릿지: 아이콘 → 띠 사이 헤더 여백까지 덮음(전체 폭) */
.nd-content.nd-content .search-dropdown--full .search-dropdown__panel::before {
    top: -16px;
    height: 16px;
}

/* 안쪽 콘텐츠: 사이트 컨테이너 폭으로 중앙 정렬 */
.nd-content.nd-content .search-dropdown__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad-lg);
}

/* 전체 폭 변형에서는 검색 입력 바를 넓게(중앙) */
.nd-content.nd-content .search-dropdown--full .search-dropdown__form {
    max-width: 620px;
    margin: 0 auto;
}

/* 모바일 GNB */
.nd-content.nd-content .mobile-gnb {
    display: none;
    background: #fff;
    border-top: 1px solid var(--color-border-light);
}

.nd-content.nd-content .mobile-gnb.is-open {
    display: block;
}

.nd-content.nd-content .mobile-gnb__list {
    padding: 8px 0;
}

.nd-content.nd-content .mobile-gnb__list li a {
    display: block;
    padding: 12px var(--container-pad-sm);
    font-size: 14px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
    transition: background .2s;
}
.nd-content.nd-content .mobile-gnb__list li a:hover { background: var(--color-bg-light); }
.nd-content.nd-content .mobile-gnb__list li:last-child a { border-bottom: none; }

/* 태블릿 헤더 */
@media (min-width: 768px) {
    .nd-content.nd-content .header__inner {
        padding: 0 var(--container-pad-md);
        height: 74px;
    }

    .nd-content.nd-content .header__logo { margin-right: 20px; }

    .nd-content.nd-content .gnb__link { padding: 8px 10px; }

    .nd-content.nd-content .util-link { font-size: 13px; }
}

/* 태블릿~PC 사이(768~1199): GNB 숨김 구간에서 유틸(로그인·회원가입·검색·메뉴)을
   PC처럼 우측 끝에 차례로 배치 */
@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .header__logo { margin-right: auto; }
}

/* 데스크톱 헤더 */
@media (min-width: 1200px) {
    .nd-content.nd-content .header__inner {
        padding: 0 var(--container-pad-lg);
        height: 78px;
        justify-content: space-between; /* 로고-메뉴-유틸 균등 간격 */
    }

    /* [프론트 전용] display:contents로 메뉴 항목을 header__inner의 flex 자식으로 편입 */
    .nd-content.nd-content .gnb       { display: contents; }
    .nd-content.nd-content .gnb__list { display: contents; }

    .nd-content.nd-content .header__logo  { margin-right: 0; padding-right: 14px; }
    .nd-content.nd-content .header__utils { margin-left: 0; }

    /* 인디케이터가 헤더 하단에 붙도록 gnb__item을 전체 높이로 확장 */
    .nd-content.nd-content .gnb__item {
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    .nd-content.nd-content .gnb__link { padding: 10px 14px; font-size: 18px; }
}

/* 태블릿·모바일 헤더: 데스크톱 GNB는 ≥1200에서만 사용(display:contents).
   768~1199 구간은 GNB가 기본 배치로 표시되며 헤더가 가로로 넘치므로,
   ≤1199에서는 GNB를 숨기고 햄버거 메뉴를 사용한다. */
@media (max-width: 1199px) {
    .nd-content.nd-content .gnb { display: none; }  /* [프론트 전용] 태블릿 이하에서 GNB 숨김 → 햄버거 사용 */

    .nd-content.nd-content .search-dropdown--full .search-dropdown__panel { padding: 12px 0 20px; }

    .nd-content.nd-content .search-dropdown__form { padding: 1px 8px 1px 18px; }
    .nd-content.nd-content .search-dropdown__input { padding: 2px 0; font-size: 15px; }
}

/* 모바일 헤더 */
@media (max-width: 767px) {
    .nd-content.nd-content .util-link { display: none; }

    .nd-content.nd-content .header__logo { margin-right: auto; }
    .nd-content.nd-content .header__utils { gap: 2px; }
    .nd-content.nd-content .header__logo img { height: 30px; }
}


/* ────────────────────────────────────────
   GNB 드롭다운 메가메뉴
   [프론트 전용] PC 전용
   ──────────────────────────────────────── */
.nd-content.nd-content .gnb__mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    /* 닫힐 때: opacity·transform 먼저, visibility는 0.25s 후 hidden */
    transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
}

.nd-content.nd-content .gnb__mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    /* 열릴 때: visibility 즉시 visible, opacity·transform 애니메이션 */
    transition: opacity .25s ease, transform .25s ease, visibility 0s 0s;
}

.nd-content.nd-content .gnb__mega-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 14px var(--container-pad-sm) 24px;
    display: flex;
    gap: 0;
}

@media (min-width: 768px) {
    .nd-content.nd-content .gnb__mega-inner { padding: 14px var(--container-pad-md) 24px; }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .gnb__mega-inner { padding: 18px var(--container-pad-lg) 28px; }
}

.nd-content.nd-content .gnb__mega-col {
    flex: 1;
    padding: 0 14px;
    border-right: 1px solid var(--color-border-light);
}

.nd-content.nd-content .gnb__mega-col:first-child { padding-left: 0; }
.nd-content.nd-content .gnb__mega-col:last-child  { border-right: none; padding-right: 0; }

.nd-content.nd-content .gnb__mega-head {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.nd-content.nd-content .gnb__sub-list li + li { margin-top: 1px; }

.nd-content.nd-content .gnb__sub-list li a {
    display: block;
    font-size: 13px;
    color: var(--color-text-sub);
    padding: 5px 0;
    line-height: 1.5;
    transition: color .15s;
}

.nd-content.nd-content .gnb__sub-list li a:hover {
    color: var(--color-primary);
    font-weight: 500;
}

/* GNB 활성(hover) 항목 */
.nd-content.nd-content .gnb__item.is-hover > .gnb__link {
    color: var(--color-primary);
    background: #EBF4FF;
}

/* GNB 하단 인디케이터 - 선택 메뉴 아래 중앙에서 퍼지는 강조선 */
.nd-content.nd-content .gnb__item {
    position: relative;
}

.nd-content.nd-content .gnb__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}

.nd-content.nd-content .gnb__item.is-hover::after {
    transform: scaleX(1);
}

/* 모바일에서 메가메뉴 숨김 */
@media (max-width: 767px) {
    .nd-content.nd-content .gnb__mega { display: none !important; }
}


/* ────────────────────────────────────────
   푸터 정책 링크 바
   [Tiles 공통] → footer.jsp
   ──────────────────────────────────────── */
.nd-content.nd-content .footer-policy-bar {
    background: #fff;
    padding: 12px 0 20px;
}

.nd-content.nd-content .footer-policy-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.nd-content.nd-content .footer-policy-bar__left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nd-content.nd-content .footer-policy-bar__right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nd-content.nd-content .footer-policy-bar__link {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text);
    padding: 7px 12px;
    border: 1px solid rgb(204, 204, 204);
    border-radius: var(--radius-sm);
    transition: color .2s;
}

.nd-content.nd-content .footer-policy-bar__link--filled {
    color: #fff;
    background: rgb(153, 153, 153);
    border-color: rgb(153, 153, 153);
}

.nd-content.nd-content .footer-policy-bar__link:hover { color: var(--color-primary); }
.nd-content.nd-content .footer-policy-bar__link--filled:hover { color: var(--color-bg-light); }

@media (max-width: 767px) {
    .nd-content.nd-content .footer-policy-bar__inner { justify-content: center; }
    .nd-content.nd-content .footer-policy-bar__left,
    .nd-content.nd-content .footer-policy-bar__right { flex-wrap: wrap; justify-content: center; }
}


/* ────────────────────────────────────────
   관련 기관 슬라이더
   [Tiles 공통] → footer.jsp
   ──────────────────────────────────────── */
.nd-content.nd-content .related-orgs {
    background: #fff;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 17px 0 17px;
}

.nd-content.nd-content .related-orgs__inner {
    display: flex;
    align-items: center;
    gap: 12px;   /* 트랙-버튼 사이는 항상 이 값으로 고정, 남는 자투리 공간은 버튼 뒤(우측 끝)로 밀림 */
}

.nd-content.nd-content .related-orgs__track {
    flex: none;    /* 폭은 JS가 "완전히 보이는 로고 개수" 기준으로 지정 → 좌우 잘림 없음 */
    overflow: hidden;
}

.nd-content.nd-content .related-orgs__list {
    display: flex;
    align-items: center;
    gap: 16px;
    will-change: transform;
}

.nd-content.nd-content .related-orgs__item {
    flex-shrink: 0;
    width: 160px;
}

.nd-content.nd-content .related-orgs__item a {
    display: block;
}

.nd-content.nd-content .related-orgs__item img {
    display: block;
    width: 100%;
    height: 40px;
    object-fit: contain;
}

.nd-content.nd-content .related-orgs__ctrl {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.nd-content.nd-content .org-ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    background: transparent;
}

.nd-content.nd-content .org-ctrl-btn img {
    width: 32px;
    height: 32px;
}

/* 재생 상태(Footer_play.svg)는 아이콘을 조금 작게 */
.nd-content.nd-content .org-ctrl-btn--play.is-playing img {
    width: 29px;
    height: 29px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .related-orgs__list { gap: 10px; }
    .nd-content.nd-content .related-orgs__item { width: 120px; }
    .nd-content.nd-content .related-orgs__item img { height: 32px; }
}


/* ────────────────────────────────────────
   푸터
   [Tiles 공통] → footer.jsp
   ──────────────────────────────────────── */
.nd-content.nd-content .footer { background: #fff; }

.nd-content.nd-content .footer__body { padding-top: 32px; padding-bottom: 32px; }

.nd-content.nd-content .footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    position: relative;
}

.nd-content.nd-content .footer__info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nd-content.nd-content .footer__org {
    flex-shrink: 0;
    margin-top: -10px;
}

.nd-content.nd-content .footer__org img {
    height: 50px;
    width: auto;
    display: block;
}

.nd-content.nd-content .footer__address {
    font-size: 11px;
    color: var(--color-text-sub);
    line-height: 2;
}

/* 연락처 박스 */
.nd-content.nd-content .footer__contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.nd-content.nd-content .footer__contact-web-img {
    flex-shrink: 0;
    margin-left: -15px;
    transform: scale(0.85);
    transform-origin: left center;
}

.nd-content.nd-content .footer__contact-boxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.nd-content.nd-content .footer-contact-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
}

.nd-content.nd-content .footer-contact-box__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.nd-content.nd-content .footer-contact-box > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nd-content.nd-content .footer-contact-box__label {
    font-size: 12px;
    color: var(--color-text-sub);
}

.nd-content.nd-content .footer-contact-box__num {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.nd-content.nd-content .footer__contact-hours {
    font-size: 11px;
    color: var(--color-text-light);
    padding: 6px 4px 0;
    text-align: right;
}

/* 카피라이트 바 */
.nd-content.nd-content .footer__bottom {
    background: var(--color-bg-footer-btm);
    padding: 14px 0;
}

.nd-content.nd-content .footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.nd-content.nd-content .footer__copy {
    font-size: 12px;
    color: #fff;
}

.nd-content.nd-content .footer__home-link {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    transition: color .2s;
}

/* 반응형: 태블릿 이상 */
@media (min-width: 768px) {
    .nd-content.nd-content .footer__body { padding-top: 20px; padding-bottom: 20px; }

    .nd-content.nd-content .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .nd-content.nd-content .footer-contact-box__num { font-size: 12px; }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .footer__inner {
        grid-template-columns: 1.2fr 1fr;
        gap: 40px;
    }
}

/* 모바일(≤767): 웹접근성 인증 이미지 좌측 여백 확보 + 연락처 박스 정리
   - 라벨/번호를 세로로 쌓고 번호 폰트를 유동 축소 → 좁은 화면(300px)에서도
     번호가 줄바꿈 없이 한 줄로 표시 */
@media (max-width: 767px) {
    .nd-content.nd-content .footer__contact-web-img { margin-left: 6px; }

    .nd-content.nd-content .footer__contact { gap: 10px; }

    .nd-content.nd-content .footer-contact-box { padding: 10px 12px; }

    .nd-content.nd-content .footer-contact-box > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    .nd-content.nd-content .footer-contact-box__label { font-size: 11px; }

    .nd-content.nd-content .footer-contact-box__num {
        font-size: clamp(11px, 3.4vw, 14px);
        white-space: nowrap;
    }
}


/* ==============================================================
   공용 버튼 (.btn / .btn_primary / .btn_outline)
   원래 css/sub.css에 있던 버튼 3종을 여기로 옮김 — 사이트맵(모바일 로그인/
   회원가입 버튼, 아래 섹션)은 common.html에 있어 모든 페이지에 공통 주입되는데,
   main.html만 sub.css 대신 main.css를 쓰기 때문에 sub.css의 클래스에 의존하면
   main.html에서만 스타일이 깨진다. 크기 변형(.btn_sm/md/lg/w110~260)과
   .btn_outline_muted는 실제로 필요한 sub.css 페이지에만 쓰이므로 그대로 둔다.
   ============================================================== */
.nd-content.nd-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 8px;
    font-weight: 500;
    font-family: var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.nd-content.nd-content .btn_primary {
    background: var(--color-primary);
    border: none;
    color: #fff;
}
.nd-content.nd-content .btn_primary:hover     { background: var(--color-primary-hover); }
.nd-content.nd-content .btn_primary:disabled  { background: #94A3B8; cursor: not-allowed; }

.nd-content.nd-content .btn_outline {
    background: #fff;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}
/* 아웃라인 버튼 계열 공용 hover: 옅은 배경 → 진한 색 채움 + 흰 글자로 반전 (.ext-link-btn 포함) */
.nd-content.nd-content .btn_outline:hover,
.nd-content.nd-content .ext-link-btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

/* ==============================================================
   공용 영상 썸네일 (.video_thumb / .video_thumb_0~8)
   원래 css/sub.css의 홍보영상 목록(promo-video-list.html) 카드 썸네일에만
   있던 스타일을 여기로 옮김 — main.html 홍보영상 탭에서도 같은 썸네일
   디자인을 재사용하기 위함(main.html만 sub.css 대신 main.css를 쓰기 때문).
   ============================================================== */
.nd-content.nd-content .video_thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
}

.nd-content.nd-content .video_thumb::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.nd-content.nd-content .video_thumb::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
    left: 50%;
    top: 50%;
    transform: translate(-38%, -50%);
    z-index: 2;
}

/* 썸네일 배경 색상 (9가지 순환) */
.nd-content.nd-content .video_thumb_0 { background: #1E3A6E; }
.nd-content.nd-content .video_thumb_1 { background: #1B4332; }
.nd-content.nd-content .video_thumb_2 { background: #4C1D95; }
.nd-content.nd-content .video_thumb_3 { background: #7C1D1D; }
.nd-content.nd-content .video_thumb_4 { background: #78350F; }
.nd-content.nd-content .video_thumb_5 { background: #065F46; }
.nd-content.nd-content .video_thumb_6 { background: #1C3D5A; }
.nd-content.nd-content .video_thumb_7 { background: #3B1F28; }
.nd-content.nd-content .video_thumb_8 { background: #1F2D40; }

/* ==============================================================
   사이트맵 페이지 (sitemap.html)
   ============================================================== */
.nd-content.nd-content .sitemap-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: #fff;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.nd-content.nd-content .sitemap-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.nd-content.nd-content.sitemap-is-open {
    overflow: hidden;
}

.nd-content.nd-content .sitemap-page {
    background: #fff;
    padding: 0;
}

.nd-content.nd-content .sitemap-card {
    max-width: 1250px;   /* 1250px 이상으로 화면을 넓혀도 폭·여백을 1250 기준으로 고정 */
    margin: 0 auto;
    background: #fff;
    padding: 20px 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (max-width: 1199px) {
    .nd-content.nd-content .sitemap-card { padding: 16px 24px; }
}
@media (max-width: 767px) {
    .nd-content.nd-content .sitemap-card { padding: 12px 16px; }
}

.nd-content.nd-content .sitemap-logo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px 0;
}
.nd-content.nd-content .sitemap-logo img {
    height: 36px;
    width: auto;
}
/* 모바일: 로고 좌측 정렬 (닫기 버튼은 우측 고정), 위 여백 축소 */
@media (max-width: 767px) {
    .nd-content.nd-content .sitemap-logo { justify-content: flex-start; padding-top: 16px; }
}

/* 모바일 사이트맵 전용 로그인/회원가입 버튼.
   PC·태블릿(≥768)에서는 헤더 우측 유틸이 담당하므로 숨기고,
   모바일에서만 로고와 메뉴 사이에 노출한다. */
.nd-content.nd-content .sitemap-auth {
    display: none;
}
@media (max-width: 767px) {
    .nd-content.nd-content .sitemap-auth {
        display: flex;
        gap: 8px;
        margin: -12px 0 12px;
    }
    /* 색상/테두리/hover는 공용 .btn_outline·.btn_primary 재사용, 이 자리만의 크기만 스코프 */
    .nd-content.nd-content .sitemap-auth__btn {
        flex: 1 1 0;
        height: 44px;
        font-size: 15px;
    }
}

.nd-content.nd-content .sitemap-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    color: #64748B;
    transition: color 0.18s;
}
.nd-content.nd-content .sitemap-close:hover { color: var(--color-text); }
.nd-content.nd-content .sitemap-close svg { display: block; }
/* 모바일: 로고 위 여백을 줄여 로고 박스가 비대칭이 되므로,
   닫기(X)를 로고 이미지 중앙(위 패딩16 + 이미지높이36/2 = 34px)에 맞춘다. */
@media (max-width: 767px) {
    .nd-content.nd-content .sitemap-close { top: 34px; }
    .nd-content.nd-content .sitemap-close svg { width: 35px; height: 35px; }
}

.nd-content.nd-content .sitemap-section {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.nd-content.nd-content .sitemap-section__bar {
    border-top: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    padding: 15px 0;
}

.nd-content.nd-content .sitemap-section__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.35;
}
@media (min-width: 768px) {
    .nd-content.nd-content .sitemap-section__title { font-size: 19px; }
}
@media (min-width: 1200px) {
    .nd-content.nd-content .sitemap-section__title { font-size: 21px; }
}

.nd-content.nd-content .sitemap-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 1200px) {
    .nd-content.nd-content .sitemap-cols {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 20px;
        align-items: flex-start;
    }
    /* 실제 컬럼 수(고정폭 컬럼 포함 여부)와 무관하게 모든 컬럼은 항상 가로 4개
       기준 폭(4분할)을 유지한다. flex:1 1 0인 채로 두면 컬럼이 4개보다 적을 때
       나머지 폭을 나눠 가져 박스(바)가 구조에 따라 늘어나 보인다. */
    .nd-content.nd-content .sitemap-col {
        flex-grow: 0;
        flex-basis: calc((100% - 60px) / 4);
        min-width: 0;
    }

}

.nd-content.nd-content .sitemap-col {
    display: flex;
    flex-direction: column;
}


.nd-content.nd-content .sitemap-box {
    display: flex;
    flex-direction: column;
}

.nd-content.nd-content .sitemap-box__head {
    background: #DBEAFE;
    border-radius: 8px 8px 0 0;
    padding: 12px 18px;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
}
@media (min-width: 1200px) {
    /* 컬럼이 4분할 폭으로 좁아져도 '서울시 노동자 종합지원기관' 같은 긴 제목이
       말줄임 없이 다 보이도록, 데스크톱에서도 17px 대신 15px을 쓴다. */
    /* 파란 타이틀 바는 한 줄로 유지한다. 컬럼에 min-width:fit-content를 주면
       제목은 안 잘리지만, 본문 리스트에 줄바꿈 안 되는 긴 단어(예: '서울시어르신
       돌봄종사자')가 있는 컬럼만 그 단어 폭 때문에 덜 줄어들어 컬럼끼리 폭이
       달라진다. 그래서 컬럼 최소폭은 그대로 0으로 두고, 제목만 말줄임으로 자른다. */
    .nd-content.nd-content .sitemap-box__head {
        font-size: 15px;
        padding: 14px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.nd-content.nd-content .sitemap-box__head--standalone {
    border-radius: 8px;
}

.nd-content.nd-content .sitemap-box__head a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.nd-content.nd-content .sitemap-box__head a:hover {
    text-decoration: underline;
}

.nd-content.nd-content .sitemap-box__body {
    padding: 10px 4px 12px 6px;
}
@media (min-width: 1200px) {
    .nd-content.nd-content .sitemap-box__body { padding: 12px 4px 14px 6px; }
}

.nd-content.nd-content .sitemap-box__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-content.nd-content .sitemap-box__list li {
    line-height: 2.1;
}

.nd-content.nd-content .sitemap-box__list li a {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.18s;
    display: inline-block;
}
@media (min-width: 1200px) {
    .nd-content.nd-content .sitemap-box__list li a { font-size: 13px; }
}

.nd-content.nd-content .sitemap-box__list li a:hover {
    color: var(--color-primary);
}


/* ── 사이트맵 모바일 아코디언 ──
   1200px 미만(태블릿 포함)에서는 섹션들을 일렬로 쌓고, 큰 타이틀(바)을 누르면
   해당 내용이 드롭다운으로 펼쳐진다. (JS가 .is-open 토글)
   PC(≥1200px)에서만 전체가 그대로 노출된다.
   ───────────────────────────────────────────── */
@media (max-width: 1199px) {
    /* 간격은 접힘 래퍼(.sm-collapse__inner) 내부에서 처리 */
    .nd-content.nd-content .sitemap-section { gap: 0; }

    /* 큰 타이틀 = 아코디언 헤더 (선은 글자 아래 한 줄만) */
    .nd-content.nd-content .sitemap-section__bar {
        position: relative;
        cursor: pointer;
        padding-right: 32px;
        user-select: none;
        border-top: none;
    }
    /* 펼침/접힘 화살표(쉐브론) */
    .nd-content.nd-content .sitemap-section__bar::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--color-primary);
        border-bottom: 2px solid var(--color-primary);
        transform: translateY(-70%) rotate(45deg);
        transition: transform .25s ease;
    }
    .nd-content.nd-content .sitemap-section.is-open .sitemap-section__bar::after {
        transform: translateY(-30%) rotate(-135deg);
    }

    /* 섹션 내용: grid-template-rows 0fr→1fr 로 높이 애니메이션 */
    .nd-content.nd-content .sm-collapse {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .32s ease;
    }
    .nd-content.nd-content .sitemap-section.is-open .sm-collapse {
        grid-template-rows: 1fr;
    }
    .nd-content.nd-content .sm-collapse__inner {
        overflow: hidden;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;             /* 여러 cols 블록 사이 간격 */
    }
    /* 바 → 첫 내용 여백 (내부에 있어 접힘 시 함께 클립됨) */
    .nd-content.nd-content .sm-collapse__inner > .sitemap-cols:first-child { margin-top: 6px; }

    .nd-content.nd-content .sitemap-cols {
        grid-template-columns: 1fr;
        gap: 6px;             /* 파란 타이틀(박스) 간 간격 */
        padding-top: 0;
    }

    /* 2단계: 박스 헤더(파란 타이틀)도 드롭다운 */
    .nd-content.nd-content .sitemap-box.is-collapsible > .sitemap-box__head {
        position: relative;
        cursor: pointer;
        padding-right: 40px;
        border-radius: 8px;           /* 접힘 상태: 완전 라운드 */
        user-select: none;
    }
    .nd-content.nd-content .sitemap-box.is-collapsible.is-open > .sitemap-box__head {
        border-radius: 8px 8px 0 0;   /* 펼침 상태: 상단만 라운드 */
    }
    /* 쉐브론 화살표 */
    .nd-content.nd-content .sitemap-box.is-collapsible > .sitemap-box__head::after {
        content: "";
        position: absolute;
        right: 16px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--color-primary);
        border-bottom: 2px solid var(--color-primary);
        transform: translateY(-70%) rotate(45deg);
        transition: transform .25s ease;
    }
    .nd-content.nd-content .sitemap-box.is-collapsible.is-open > .sitemap-box__head::after {
        transform: translateY(-30%) rotate(-135deg);
    }
    /* 본문: max-height + 세로 패딩을 함께 애니메이션 → 완전히 닫힘 */
    .nd-content.nd-content .sitemap-box.is-collapsible > .sitemap-box__body {
        overflow: hidden;
        max-height: 0;
        padding: 0 4px 0 6px;      /* 접힘: 세로 패딩 0 */
        transition: max-height .3s ease, padding .3s ease;
    }
    .nd-content.nd-content .sitemap-box.is-collapsible.is-open > .sitemap-box__body {
        max-height: 1200px;        /* 콘텐츠보다 충분히 큰 값 */
        padding: 10px 4px 12px 6px;
    }
}

/* 유틸리티 */
.nd-content.nd-content .is-hidden { display: none !important; }
.nd-content.nd-content .scroll-x  { overflow-x: auto; }


/* ==============================================================
   바로가기 메뉴 (모든 페이지 공통)
   js/common.js의 injectCommon()이 main 최하단에 주입하고,
   initShortcutMenuScroll()이 ≥1385px에서 스크롤 추적을 초기화한다.
   ============================================================== */
.nd-content.nd-content .shortcut-menu {
    background: transparent;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    /* overflow: visible → 검색 드롭다운 팝업이 카드 밖으로 펼쳐질 수 있도록 */
    overflow: visible;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.nd-content.nd-content .shortcut-menu__title {
    font-size: 13px;
    font-weight: 600;
    color: #F97316;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--color-border-light);
    background: #fff;
    text-align: center;
    /* overflow 제거에 따라 상단 모서리를 직접 둥글게 처리 */
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.nd-content.nd-content .shortcut-menu__list {
    flex: 0 0 auto;   /* flex:1 제거 → 내용 높이만큼만 차지 */
    padding: 4px 0;
}

.nd-content.nd-content .shortcut-menu__list li a,
.nd-content.nd-content .shortcut-menu__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--color-text-sub);
    transition: background .2s, color .2s;
}
.nd-content.nd-content .shortcut-menu__link:hover {
    background: var(--color-bg-light);
    color: #F97316;
}

.nd-content.nd-content .shortcut-menu__icon { flex-shrink: 0; }

/* 호버/클릭 시에만 아이콘을 강조(_clik) 버전으로 교체. 크기·위치는 원본과 동일하게 유지 */
.nd-content.nd-content .shortcut-menu__list li:nth-child(1) .shortcut-menu__link:is(:hover, :active) .shortcut-menu__icon {
    content: url("../images/new_portal/Go_to1_clik.svg");
}
.nd-content.nd-content .shortcut-menu__list li:nth-child(2) .shortcut-menu__link:is(:hover, :active) .shortcut-menu__icon,
.nd-content.nd-content .shortcut-menu__list li:nth-child(3) .shortcut-menu__link:is(:hover, :active) .shortcut-menu__icon {
    content: url("../images/new_portal/Go_to2_clik.svg");
}
.nd-content.nd-content .shortcut-menu__list li:nth-child(4) .shortcut-menu__link:is(:hover, :active) .shortcut-menu__icon {
    content: url("../images/new_portal/Go_to3_clik.svg");
}

.nd-content.nd-content .shortcut-menu__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: calc(100% - 20px);
    height: 34px;
    margin: 8px 10px 12px;
    padding: 0 9px;
    background: #F97316;
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    transition: background .2s;
    text-align: center;
}
.nd-content.nd-content .shortcut-menu__search-btn:hover { background: #D96210; }

.nd-content.nd-content .shortcut-menu__search-icon {
    flex-shrink: 0;
    background: transparent;
}

.nd-content.nd-content .shortcut-menu__search-text {
    margin-right: 10px;
}

/* 태블릿(768~1384): 여백 부족으로 화면 밖에 나가므로 숨김.
   ≤767 = 하단 카드, ≥1385 = 우측 세로 배치에서만 노출 */
@media (min-width: 768px) and (max-width: 1384px) {
    .nd-content.nd-content .shortcut-menu { display: none; }
}

/* ≥1385: 우측 세로 배치 + 스크롤 추적.
   .container는 이 구간(≥1200px)에서 --container-pad-lg(40px)만큼 양쪽에
   여백이 이미 있어, 실제 본문(퀵메뉴 버튼 등)은 --container-max(1140px) 경계보다
   40px 안쪽에서 끝난다. */
@media (min-width: 1385px) {
    /* shortcut-sticky-host(default-layout.jsp)가 content와 정확히 같은 높이를
       가지므로, 그 안의 .shortcut-menu-rail(inset:0, 레이아웃에 영향 없는 오버레이)이
       "떠다니다 멈추는 범위"를 정확히 content 높이만큼으로 제한해준다.
       .shortcut-menu는 이 rail 안에서 position:sticky로 스크롤을 따라가다가
       rail(=content) 하단에 닿으면 브라우저가 자동으로 멈춰준다 — JS 불필요. */
    .nd-content.nd-content .shortcut-sticky-host {
        position: relative;
    }

    /* 가로 위치(우측 정렬)는 반드시 여기(position:absolute, 앵커 기준 명확)서
       처리한다 — position:sticky 엘리먼트는 "고정되기 전" 상태에서 right를
       앵커가 아니라 원래 위치에서 왼쪽으로 밀어내는 상대 이동값으로 해석해서,
       .shortcut-menu 자체에 right를 주면 스크롤 상태에 따라 반대쪽(좌측)으로
       보이는 문제가 있었다(2026-09-08). */
    .nd-content.nd-content .shortcut-menu-rail {
        position: absolute;
        top: 0;
        bottom: 0;
        /* 100vw 대신 컨테이너 폭 기준 → 스크롤바/거터 폭에 영향받지 않음.
           max()로 최소 20px 여백을 보장 → 브레이크포인트(1385px) 부근에서 계산값이
           음수/과소가 되어 메뉴가 화면 밖으로 잘려나가는 것을 방지.
           -115px = width(115px) + 본문 컨텐츠와의 여백(0px, .container 안쪽 패딩
           40px을 감안해 실제 보이는 간격이 약 40px가 되도록 역산한 값). */
        right: max(20px, calc((100% - var(--container-max)) / 2 - 115px));
        width: 115px;
        pointer-events: none;
    }

    .nd-content.nd-content .shortcut-menu {
        display: flex;
        position: sticky;
        pointer-events: auto;
        top: 113px;
        width: 115px;
        flex-direction: column;
        align-items: stretch;
        align-self: start;
        /* 바로가기 박스와 검색 버튼을 별개 카드로 분리, 그 사이 간격 */
        gap: 14px;
        background: transparent;
        box-shadow: none;
    }

    /* 바로가기 목록만 감싸는 카드 (제목+목록). 검색 버튼은 이 카드 밖에서
       독립된 카드로 바로 아래 배치된다(.shortcut-menu의 gap로 간격 확보) */
    .nd-content.nd-content .shortcut-menu__box {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        overflow: hidden;
    }

    .nd-content.nd-content .shortcut-menu__title {
        padding: 10px 8px 8px;
        border-right: none;
        border-bottom: 1px solid var(--color-border-light);
        align-self: auto;
        display: block;
        font-size: 12px;
    }

    .nd-content.nd-content .shortcut-menu__list {
        flex-direction: column;
        flex: 0 0 auto;
        padding: 4px 0;
    }

    .nd-content.nd-content .shortcut-menu__link {
        justify-content: center;
        padding: 7px 8px;
        font-size: 8px;
        white-space: nowrap;
    }

    .nd-content.nd-content .shortcut-menu .shortcut-menu__icon svg {
        width: 8px;
        height: 8px;
    }

    .nd-content.nd-content .shortcut-menu__search-btn {
        width: 100%;
        height: 34px;
        margin: 0;
        padding: 0 10px;
        font-size: 12px;
        border-radius: var(--radius-lg);
        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    }
}

/* ≤767: 메인페이지(.quick-menu 아래)에서만 하단 2×2 격자 카드로 노출.
   그 외 페이지는 모바일에서 숨김(js/common.js가 main 최하단에 넣어준 것이
   본문 맨 아래로 튀어나와 보이므로, 메인 외 페이지에서는 노출하지 않는다) */
@media (max-width: 767px) {
    .nd-content.nd-content .shortcut-menu {
        display: none;
    }

    .nd-content.nd-content .page-main .shortcut-menu {
        display: flex;
        margin-top: 16px;
    }

    .nd-content.nd-content .page-main .shortcut-menu__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
        row-gap: 8px;
        padding: 10px;
    }
    .nd-content.nd-content .page-main .shortcut-menu__list li {
        border-radius: var(--radius-lg);
        background: #fff;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.13);   /* 테두리 없이 그림자로 강조 */
    }
    .nd-content.nd-content .page-main .shortcut-menu__list li a,
    .nd-content.nd-content .page-main .shortcut-menu__link {
        justify-content: flex-start;   /* 아이콘 기준 정렬: 각 열의 아이콘 x위치 일치 */
        font-size: 13px;
        padding: 12px clamp(10px, 5vw, 28px);
    }
}

.nd-content.nd-content .gnb__mega-panel:not([hidden]) {
    display: flex;
    gap: 0;
    width: 100%;
}
/* ===== source: sub.css ===== */
/* ==============================================================
   서울노동포털 - 서브 공통 스타일시트
   ============================================================== */

/* ────────────────────────────────────────
   서브 페이지 콘텐츠 inner 공통 레이아웃
   ──────────────────────────────────────── */
.nd-content.nd-content .content-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad-sm);
    padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
    .nd-content.nd-content .content-inner {
        padding-left: var(--container-pad-md);
        padding-right: var(--container-pad-md);
    }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .content-inner {
        padding-left: var(--container-pad-lg);
        padding-right: var(--container-pad-lg);
    }
}

/* 서브 페이지 본문 wrapper (.content-inner 의 바깥 래퍼) 하단 여백 */
.nd-content.nd-content .sub-content     { padding-bottom: 60px; }
.nd-content.nd-content .sub-content--lg { padding-bottom: 80px; }

/* ══════════════════════════════════════════════════════════
   공통 글자 규격 (타이포그래피 스케일)
   페이지 전용 글자 클래스는 만들지 않는다. 아래 9개 크기 클래스와
   7개 수식어만 조합해서 쓴다.

   ── 제목 (굵기 500) ────────────────────────────
     .tit_lg                  24px   (모바일 21px)   페이지 대표 제목
     .tit_md                  21px   (모바일 19px)   섹션 제목
     .tit_sm                  20px   (모바일 18px)   섹션 제목(작게)
     .dot_title               18px   (모바일 16px)   점 옆 제목
     .dot_title_sm            17px   (모바일 16px)   소제목
     .dot_title_xs            16px   (모바일 15px)   레이블·항목명

   ── 본문 (굵기 400) ────────────────────────────
     .dot_body                16px   (모바일 15px)   기본 본문
     .dot_body_sm             15px   (모바일 14px)   보조 본문
     .dot_body_xs             14px   (모바일 13px)   각주·안내문

   ── 수식어 (크기 클래스와 함께 사용) ─────────────
     .text-danger   빨강 #EF4444   주의·경고
     .text-muted    회색 #64748B   보조 설명
     .text-point    파랑 primary   링크·강조
     .text-invert   흰색           색 배경 위
     .text-success  초록 #16A34A   긍정·강조
     .text-strong   굵기 500       본문 중 강조
     .text-tight    줄높이 1       배지·번호 등 한 줄 요소
     .text-center / .text-right    정렬
     .text-right--sm-left          오른쪽 정렬(모바일은 왼쪽)
     .text-nowrap   줄바꿈 금지
     .text-preline  원문 줄바꿈 유지 (white-space: pre-line)
   ══════════════════════════════════════════════════════════ */

/* ── 제목 ── */
.nd-content.nd-content .tit_md,
.nd-content.nd-content .tit_lg,
.nd-content.nd-content .tit_sm,
.nd-content.nd-content .dot_title,
.nd-content.nd-content .dot_title_sm,
.nd-content.nd-content .dot_title_xs {
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
    word-break: keep-all;
    color: var(--color-text);
    font-family: var(--font);
}

.nd-content.nd-content .tit_lg { font-size: 24px; }
.nd-content.nd-content .tit_md { font-size: 21px; }
.nd-content.nd-content .tit_sm { font-size: 20px; }
.nd-content.nd-content .dot_title    { font-size: 18px; }
.nd-content.nd-content .dot_title_sm { font-size: 17px; }
.nd-content.nd-content .dot_title_xs { font-size: 16px; }

/* 제목 밑에 강조선 (표·핵심 섹션 등에 사용) */
.nd-content.nd-content .tit_accent {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
}

/* ── 본문 ── */
.nd-content.nd-content .dot_body,
.nd-content.nd-content .dot_body_sm,
.nd-content.nd-content .dot_body_xs {
    margin: 0;
    font-weight: 400;
    line-height: 1.7;
    word-break: keep-all;
    color: var(--color-text);
    font-family: var(--font);
}

.nd-content.nd-content .dot_body    { font-size: 16px; }
.nd-content.nd-content .dot_body_sm { font-size: 15px; }
.nd-content.nd-content .dot_body_xs { font-size: 14px; }

.nd-content.nd-content .dot_body p,
.nd-content.nd-content .dot_body_sm p,
.nd-content.nd-content .dot_body_xs p {
    margin: 0;
}

/* ── 수식어 ── */
/* 색·굵기·정렬 수식어는 .table 정의 뒤로 옮겨 두었다 (특이도 동률 시 뒤가 이김) */

@media (max-width: 767px) {
    .nd-content.nd-content .tit_lg       { font-size: 21px; }
    .nd-content.nd-content .tit_md       { font-size: 19px; }
    .nd-content.nd-content .tit_sm       { font-size: 18px; }
    .nd-content.nd-content .dot_title    { font-size: 16px; }
    .nd-content.nd-content .dot_title_sm { font-size: 16px; }
    .nd-content.nd-content .dot_title_xs { font-size: 15px; }

    .nd-content.nd-content .dot_body    { font-size: 15px; }
    .nd-content.nd-content .dot_body_sm { font-size: 14px; }
    .nd-content.nd-content .dot_body_xs { font-size: 13px; }

    .nd-content.nd-content .text-right--sm-left { text-align: left; }
}

/* ────────────────────────────────────────
   공용 외부링크 버튼 (바로가기·조문확인 등)
   .ext-link-btn = 표준(14px). 변형:
     --lg    큰 CTA (17px / 64px)          · 감정노동 등 CTA
     --md    중형 (15px, 줄바꿈 금지)       · 강소기업 등
     --xl    대형 밑줄 CTA (18px / 72px)    · 하단 이동 버튼
     --fixed 고정폭 (280×68)               · 마을세무사 액션
     --block 그리드 꽉참 (flex:1)          · 무료상담 도구
   모든 바로가기 버튼은 .ext-link-btn (+ 필요시 변형)을 사용한다.
   ──────────────────────────────────────── */
.nd-content.nd-content .ext-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-primary);
    text-decoration: none;
    word-break: keep-all;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-family: var(--font);
}

/* hover 강조 규칙은 .btn_outline과 공용 (아래 「공용 액션 버튼」 블록 참고) */

.nd-content.nd-content .ext-link-btn svg { flex-shrink: 0; }

/* 큰 CTA */
.nd-content.nd-content .ext-link-btn--lg {
    gap: 10px;
    padding: 0 28px;
    height: 64px;
    font-size: 17px;
}

/* 중형 (강소기업) */
.nd-content.nd-content .ext-link-btn--md {
    padding: 8px 18px;
    font-size: 15px;
    white-space: nowrap;
}

/* 대형 CTA (하단 이동 버튼) */
.nd-content.nd-content .ext-link-btn--xl {
    justify-content: center;
    gap: 10px;
    min-height: 72px;
    padding: 0 28px;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
}

/* 고정폭 액션 (마을세무사) */
.nd-content.nd-content .ext-link-btn--fixed {
    justify-content: center;
    gap: 10px;
    width: 280px;
    height: 68px;
    padding: 0 20px;
    font-size: 18px;
}

/* 그리드 꽉참 (무료상담 도구) */
.nd-content.nd-content .ext-link-btn--block {
    min-width: 180px;
    justify-content: center;
    padding: 14px 28px;
    white-space: nowrap;
    text-align: center;
}

/* ────────────────────────────────────────
   공용 액션 버튼 (제출·취소·신청 등)
   .btn / .btn_primary / .btn_outline(+hover)은 common.css로 옮김
   (common.html의 사이트맵이 main.html에서도 써야 해서 — 자세한 이유는
   common.css의 "공용 버튼" 섹션 주석 참고).
   .btn (+ 색상 1개 + 크기 1개 + 폭 0~1개)을 조합해서 쓴다.
     색상  --primary(채움) / --outline(파랑 테두리) / --outline-muted(회색 테두리)
     크기  --sm(36) / --md(52) / --lg(60)
     폭    --full(100%) · --flex1(flex:1 대신 공용 .flex-1 사용) ·
           --w110/--w200/--w220/--w240/--w260 (고정폭, 모바일엔 100%)
   ──────────────────────────────────────── */
.nd-content.nd-content .ext-link-btn:hover svg path[stroke] { stroke: #fff; }

.nd-content.nd-content .btn_outline_muted {
    background: #fff;
    border: 1px solid #64748B;
    color: var(--color-text);
}
.nd-content.nd-content .btn_outline_muted:hover { background: #F8FAFC; }

.nd-content.nd-content .btn_sm { height: 36px; padding: 0 16px; font-size: 13px; border-radius: 6px; }
.nd-content.nd-content .btn_md { height: 52px; font-size: 15px; }
.nd-content.nd-content .btn_lg { height: 60px; font-size: 16px; }

.nd-content.nd-content .btn_full { width: 100%; }
.nd-content.nd-content .btn_w110 { width: 110px; }
.nd-content.nd-content .btn_w200 { width: 200px; }
.nd-content.nd-content .btn_w220 { width: 220px; }
.nd-content.nd-content .btn_w240 { width: 240px; }
.nd-content.nd-content .btn_w260 { width: 260px; }

@media (max-width: 767px) {
    .nd-content.nd-content .btn_sm { height: 34px; padding: 0 14px; font-size: 12px; }
    .nd-content.nd-content .btn_md { height: 52px; font-size: 14px; }
    .nd-content.nd-content .btn_lg { height: 52px; font-size: 15px; }
    .nd-content.nd-content .btn_w110, .nd-content.nd-content .btn_w200, .nd-content.nd-content .btn_w220, .nd-content.nd-content .btn_w240, .nd-content.nd-content .btn_w260 { width: 100%; }
}

/* ────────────────────────────────────────
   공용 카드 (흰 배경 + 테두리 박스)
   .card (+ 색 1개 + 반경 1개)를 조합해서 쓴다. 폭·패딩은 각
   페이지 클래스에 구조값으로 남긴다.
     색  기본(var(--color-line)) / --accent(#99B9FF)
     반경 기본(14px) / --r18(18px)
     그림자 --shadow
   ──────────────────────────────────────── */
.nd-content.nd-content .card {
    box-sizing: border-box;
    border-radius: 14px;
    border: 1px solid var(--color-line);
}
.nd-content.nd-content .card_accent { border-color: #99B9FF; }
.nd-content.nd-content .card_r18    { border-radius: 18px; }
.nd-content.nd-content .card_shadow { box-shadow: 0 0 20px rgba(9, 9, 9, 0.10); }

/* ══════════════════════════════════════════════════════════
   공용 배지 (.badge)
   기본형은 알약 모양. 크기·모양·색은 변형 클래스를 조합한다.
   페이지마다 필요한 폭/여백처럼 이 배지만의 예외값은
   새 클래스를 만들지 말고 조상 선택자로 스코프한다
   (예: .edu-apply-table .badge { min-width: 78px; }).
   예) <span class="badge badge_gray">완료</span>
   ══════════════════════════════════════════════════════════ */
.nd-content.nd-content .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── 크기·모양 변형 ── */
.nd-content.nd-content .badge_lg   { height: 38px; padding: 0 20px; border-radius: 24px; font-size: 15px; }
.nd-content.nd-content .badge_pill { border-radius: 999px; }
.nd-content.nd-content .badge_auto { height: auto; padding: 8px 18px; }

/* ── 색상 변형 ── */
.nd-content.nd-content .badge_gray            { background: #F1F5F9; color: #64748B; }
.nd-content.nd-content .badge_orange          { background: #F97316; color: #fff; }
.nd-content.nd-content .badge_green           { background: #16A34A; color: #fff; font-weight: 600; }
.nd-content.nd-content .badge_blue            { background: #CADDFF; color: var(--color-primary-dark); }
.nd-content.nd-content .badge_primary         { background: var(--color-primary); color: #fff; }
.nd-content.nd-content .badge_outline         { background: #fff; border: 1px solid var(--color-line); color: #64748B; font-weight: 400; }
.nd-content.nd-content .badge_outline_muted   { border-color: #94A3B8; color: #475569; font-weight: 400; }
.nd-content.nd-content .badge_outline_primary { border-color: var(--color-primary); color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════
   공용 입력 박스 (.input_box)
   로그인·아이디찾기·비번재발급 페이지가 각자 만들었던 동일한
   "테두리 + 흰 배경 + 포커스 시 primary 테두리" 입력창을 통합.
   래퍼(label/div)·<input> 양쪽에 다 붙을 수 있어 :focus-within/:focus 둘 다 스코프.
   기본 크기(48px/18px)와 다른 곳은 height/padding만 페이지별로 덮어쓴다.
   ══════════════════════════════════════════════════════════ */
.nd-content.nd-content .input_box {
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s;
}
.nd-content.nd-content .input_box:focus-within,
.nd-content.nd-content .input_box:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* ══════════════════════════════════════════════════════════
   공용 절차/안내 박스 (.step_box)
   지원절차 플로우(.proc-flow__item, 6개 페이지), 감정노동 처리절차
   (.el-procedure-step, 2개 페이지), 근로권익 안내 박스(.labor-rights-box,
   22개 페이지)가 각자 만들었던 동일한 파란 테두리 박스 테두리를 통합.
   크기/배경/내부 레이아웃은 각 컴포넌트 클래스가 담당.
   ══════════════════════════════════════════════════════════ */
.nd-content.nd-content .step_box {
    border-radius: 8px;
    border: 1px solid #99B9FF;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════
   공용 폼 필드 박스 (.field_box)
   회원가입/쉼터대관/상담신청/컨설팅 폼이 각자 만들었던 동일한
   "회색 테두리 4px 반경 흰 배경" 입력창(input/select/트리거)을 통합.
   크기(height/padding/font-size)와 색(color), select 화살표 배경은
   각 컴포넌트 클래스가 계속 담당한다.
   ══════════════════════════════════════════════════════════ */
.nd-content.nd-content .field_box {
    border: 1px solid var(--color-line);
    border-radius: 4px;
    background: #fff;
    font-family: var(--font);
    outline: none;
}
.nd-content.nd-content .field_box:focus,
.nd-content.nd-content .field_box:focus-within {
    border-color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════
   공용 비밀번호 표시/숨김 토글 (.pw-toggle-btn / .pw-toggle-wrap)
   - .input_box(flex row + gap) 안에서는 버튼만 <input> 뒤에 추가하면 됨
   - 단독 <input class="field_box">(회원가입·마이페이지)에는 .pw-toggle-wrap으로
     감싸 버튼을 절대위치로 띄운다
   동작(type="password" ↔ "text")은 js/common.js initPasswordToggle()이 처리.
   ══════════════════════════════════════════════════════════ */
.nd-content.nd-content .pw-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    color: #94A3B8;
    cursor: pointer;
}
.nd-content.nd-content .pw-toggle-btn:hover { color: #64748B; }
.nd-content.nd-content .pw-toggle-btn__icon--hide { display: none; }
.nd-content.nd-content .pw-toggle-btn.is-visible .pw-toggle-btn__icon--show { display: none; }
.nd-content.nd-content .pw-toggle-btn.is-visible .pw-toggle-btn__icon--hide { display: block; }

.nd-content.nd-content .pw-toggle-wrap {
    position: relative;
    display: inline-block;
}
.nd-content.nd-content .pw-toggle-wrap input {
    padding-right: 34px;
}
.nd-content.nd-content .pw-toggle-wrap .pw-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* ══════════════════════════════════════════════════════════
   페이지 전용 클래스 접두어 약어 목록
   (2단어 이하 페이지명은 축약하지 않고 그대로 씀 — video-counsel-, basic-plan- 등)
   ──────────────────────────────────────────────────────────
   el    emotional-labor (감정노동자 권리보호)
   caf   consulting-apply-form (컨설팅 신청서)
   ecw   elderly-care-workers (어르신돌봄종사자)
   flc   free-legal-counsel (무료 노동법률상담)
   pft   platform-freelancer-tax (플랫폼·프리랜서 세무)
   psr   public-sector-regularization (공공부문 정규직화)
   seg   seoul-eum-gongje (서울형 유급병가지원 — 서울이음공제 페이지)
   vla   village-labor-attorney (마을노무사)
   sbc   small-business-consulting (소상공인 컨설팅)
   wsr   worker-shelter-rental (休서울이동노동자쉼터 대관신청)
   wsh   worker-shelter (休서울이동노동자쉼터 소개, 지도·대관정보)
   wsin  worker-shelter-intro (休서울이동노동자쉼터 소개 — 지원기관 상세페이지 공용 컴포넌트 사용)
   shx   special-health-exam (특수건강진단)
   wyc   with-you-center (직장 내 성희롱 예방 — harassment-prevention 패밀리 멤버)
   wms   working-mom-support (일하는 엄마 지원)
   pvl   promo-video-list (홍보영상 목록 — JS 생성 카드 마크업도 동일 접두어)
   sgs   seoul-gangso-support (서울형 강소기업 지원)
   gws   gig-worker-station (긱워커 스테이션 — 지원기관 상세페이지 공용 컴포넌트 사용)
   lrp   labor-rights-protector (노동권리보호관)
   tccd  tax-counsel-cases-detail (세무 상담사례 상세)
   scd   shelter-counsel-detail (쉼터 기초상담 상세)
   vcl   video-counsel-list (화상상담 목록 — video-counsel 패밀리 멤버)
   gu-map  labor-center-map.html / worker-shelter-map.html 공용 자치구 선택 지도 페이지
           (2단어 이상이라 축약하지 않고 그대로 씀 — support-agency- 사례와 동일.
            페이지 파일명일 뿐 아래 .map 클래스와는 무관한 별개 컴포넌트)
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   공통 배치 규격 (flex 유틸리티)
   페이지별 래퍼 클래스에 flex 선언을 넣지 않고 아래 22개를 조합한다.
   페이지 클래스는 padding·border·background·크기만 갖는다.

   ── 방향 ───────────────────────────────
     .row     가로 (display:flex)
     .stack   세로 (display:flex + column)

   ── 교차축 정렬 (align-items) ──────────
     .items-center  .items-start  .items-end  .items-stretch  .items-base

   ── 주축 정렬 (justify-content) ────────
     .justify-center  .justify-between  .justify-end

   ── 간격 (4px 그리드) ──────────────────
     .gap-0 .gap-4 .gap-8 .gap-12 .gap-16 .gap-20
     .gap-24 .gap-28 .gap-32 .gap-36 .gap-40

   ── 줄바꿈·크기 ────────────────────────
     .wrap      flex-wrap: wrap
     .flex-1    flex: 1        (남은 공간 채움)
     .shrink-0  flex-shrink: 0 (줄어들지 않음)

   예) <div class="row items-center gap-12">
   ※ 화면폭에 따라 flex 방향·간격이 바뀌는 래퍼는 유틸리티로 표현할 수
      없으므로 해당 페이지 규칙에 그대로 둔다.
   ※ .dot_block / .dot_head 의 gap:10px 은 점 표식(18px)과 들여쓰기
      (28px = 18+10)가 맞물려 있어 그리드 예외로 유지한다.
   ══════════════════════════════════════════════════════════ */
.nd-content.nd-content .row   { display: flex; }
.nd-content.nd-content .stack { display: flex; flex-direction: column; }

.nd-content.nd-content .items-center  { align-items: center; }
.nd-content.nd-content .items-start   { align-items: flex-start; }
.nd-content.nd-content .items-end     { align-items: flex-end; }
.nd-content.nd-content .items-stretch { align-items: stretch; }
.nd-content.nd-content .items-base    { align-items: baseline; }

.nd-content.nd-content .justify-center  { justify-content: center; }
.nd-content.nd-content .justify-between { justify-content: space-between; }
.nd-content.nd-content .justify-end     { justify-content: flex-end; }

.nd-content.nd-content .gap-0  { gap: 0; }
.nd-content.nd-content .gap-4  { gap: 4px; }
.nd-content.nd-content .gap-8  { gap: 8px; }
.nd-content.nd-content .gap-12 { gap: 12px; }
.nd-content.nd-content .gap-16 { gap: 16px; }
.nd-content.nd-content .gap-20 { gap: 20px; }
.nd-content.nd-content .gap-24 { gap: 24px; }
.nd-content.nd-content .gap-28 { gap: 28px; }
.nd-content.nd-content .gap-32 { gap: 32px; }
.nd-content.nd-content .gap-36 { gap: 36px; }
.nd-content.nd-content .gap-40 { gap: 40px; }
.nd-content.nd-content .gap-50 { gap: 50px; } /* 4px 그리드 예외 — basic-plan.html 목표값 그대로 유지 */

.nd-content.nd-content .wrap { flex-wrap: wrap; }

.nd-content.nd-content .flex-1   { flex: 1; }
.nd-content.nd-content .shrink-0 { flex-shrink: 0; }

.nd-content.nd-content .overflow-x-auto { overflow-x: auto; }

.nd-content.nd-content .icon-80 { width: 80px; height: 80px; }

/* ══════════════════════════════════════════════════════════
   공용 강조 테두리 박스 (.primary_box)
   연락처 안내(.contact-box), 경비노동자 상담 핫라인(.guard-worker-hotline-box),
   상담 동의(.counsel-agree-box)가 각자 만들었던 동일한 primary 색 테두리를 통합.
   크기/배경/내부 레이아웃은 각 컴포넌트 클래스가 계속 담당한다.
   ══════════════════════════════════════════════════════════ */
.nd-content.nd-content .primary_box {
    border: 1px solid var(--color-primary);
}

.nd-content.nd-content .contact-box { padding: 12px 14px; }

/* ────────────────────────────────────────
   공용 페이지네이션 번호
   (li 로 감싼 목록형: .pagination / 낱개 버튼형: .pagination-num
   / pageNavigationUtil이 생성하는 Bootstrap 스타일 마크업
   .page-item, .page-link, .active, .disabled 도 동일하게 적용
   — 사이트 전체 목록 화면이 같은 유틸을 공유하므로 여기서
   한 번만 고치면 모든 목록 페이지에 반영됨)
   ──────────────────────────────────────── */
.nd-content.nd-content .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-content.nd-content .pagination li,
.nd-content.nd-content .page-item {
    display: flex;
}

.nd-content.nd-content .pagination li button,
.nd-content.nd-content .pagination li span,
.nd-content.nd-content .pagination-num,
.nd-content.nd-content .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font);
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-line);
    border-right: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.nd-content.nd-content .pagination li:last-child button,
.nd-content.nd-content .pagination li:last-child span,
.nd-content.nd-content .pagination-num:last-child,
.nd-content.nd-content .page-item:last-child .page-link {
    border-right: 1px solid var(--color-line);
}

.nd-content.nd-content .pagination li button:hover,
.nd-content.nd-content .pagination-num:hover:not(.is-active):not([disabled]),
.nd-content.nd-content .page-link:hover {
    background: #F8FAFC;
}

.nd-content.nd-content .pagination-num[disabled],
.nd-content.nd-content .page-item.disabled .page-link {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.nd-content.nd-content .pagination li.is-active span,
.nd-content.nd-content .pagination-num.is-active,
.nd-content.nd-content .page-item.active .page-link {
    position: relative;
    z-index: 1;
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.nd-content.nd-content .pagination li.is-active + li button,
.nd-content.nd-content .pagination li.is-active + li span,
.nd-content.nd-content .pagination-num.is-active + .pagination-num,
.nd-content.nd-content .page-item.active + .page-item .page-link {
    border-left-color: var(--color-primary);
}

.nd-content.nd-content .pagination--lg li button,
.nd-content.nd-content .pagination--lg li span {
    width: 50px;
    height: 50px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .pagination li button,
    .nd-content.nd-content .pagination li span,
    .nd-content.nd-content .pagination-num,
    .nd-content.nd-content .page-link {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .nd-content.nd-content .pagination-num.is-active { font-size: 14px; }

    .nd-content.nd-content .pagination--lg li button,
    .nd-content.nd-content .pagination--lg li span {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* 탭 콘텐츠 패널 공용 (hidden 속성이 stack/row의 display에 덮이지 않도록 보장) */
.nd-content.nd-content .tab-panel[hidden] { display: none; }
.nd-content.nd-content .tab-panel--pad { padding-top: 32px; padding-bottom: 60px; }

/* ══════════════════════════════════════════════════════════
   공통 표 (.table)
   페이지별 표 클래스를 만들지 않고 아래 골격 + 변형을 조합한다.
   페이지 클래스에는 열 폭(.col-*)과 반응형 숨김만 남긴다.

   ── 유형 ───────────────────────────────
     .table_list   목록형(게시판) — 셀 높이 고정 52px, 가운데 정렬, 행 hover
       .table_tall   셀 높이 60px
     .table_data   내용형(정보 나열) — 패딩 기반, 왼쪽 정렬, 머리행 음영

   ── 변형 ───────────────────────────────
     .table_fixed    table-layout: fixed
     .table_divided  세로 구분선
     .table_boxed    전체 격자 테두리 (상단 강조선 없음)
     .table_plain    상단 강조선 없음
     .table_left     본문 셀 왼쪽 정렬 (머리행은 가운데 유지)
     .table_top      셀 위쪽 정렬
     .table_w480 / --w640 / --w720   가로 스크롤 임계폭

   ── flex 2열 표 (div 기반) ──────────────
     .table_row   행 구분선 (라벨/값 셀 폭은 표마다 달라 페이지 규칙 유지)

   ── 래퍼 ───────────────────────────────
     .table_wrap    overflow-x: auto  (가로 스크롤)

   예) <div class="table_wrap"><table class="table table_data table_divided table_w720">
   ══════════════════════════════════════════════════════════ */
.nd-content.nd-content .table_wrap { overflow-x: auto; }

.nd-content.nd-content .table {
    width: 100%;
    border-top: 3px solid var(--color-primary);
}

.nd-content.nd-content table.table { border-collapse: collapse; }

/* 셀 선택자는 :where() 로 감싸 특이도를 0,1,0 으로 낮춘다.
   그래야 .text-strong / .text-center 같은 유틸리티와 페이지별 셀 수식어가
   뒤에 오기만 하면 정상적으로 덮어쓸 수 있다. */
.nd-content.nd-content .table :where(th, td) {
    border-bottom: 1px solid var(--color-line);
    text-align: center;
    color: var(--color-text);
    font-family: var(--font);
}

.nd-content.nd-content .table :where(th) { font-weight: 500; }
.nd-content.nd-content .table :where(td) { font-weight: 400; }

/* ── 목록형 ── */
.nd-content.nd-content .table_list :where(th, td) {
    height: 52px;
    padding: 0 10px;
    font-size: 15px;
}

.nd-content.nd-content .table_list tbody tr:hover {
    background: #F8FAFC;
    cursor: pointer;
}

.nd-content.nd-content .table_tall :where(th, td) { height: 60px; }

/* ── 내용형 ── */
.nd-content.nd-content .table_data :where(th, td) {
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    vertical-align: middle;
    word-break: keep-all;
}

.nd-content.nd-content .table_data :where(thead th) { background: #9c9c9c; color: #fff; }

/* ── 변형 ── */
.nd-content.nd-content .table_fixed { table-layout: fixed; }

.nd-content.nd-content .table_divided :where(th, td) { border-right: 1px solid var(--color-line); }

.nd-content.nd-content .table_divided :where(th, td):last-child { border-right: none; }

.nd-content.nd-content .table_boxed { border-top: none; }

.nd-content.nd-content .table_boxed :where(th, td) { border: 1px solid var(--color-line); }

.nd-content.nd-content .table_boxed :where(th, td):first-child { border-left: none; }

.nd-content.nd-content .table_boxed :where(th, td):last-child { border-right: none; }

.nd-content.nd-content .table_boxed :where(thead tr:first-child th) { border-top: none; }

.nd-content.nd-content .table_plain { border-top: none; }

.nd-content.nd-content .table_left :where(th, td) { text-align: left; }

.nd-content.nd-content .table_left :where(thead th) { text-align: center; }

.nd-content.nd-content .table_top :where(th, td) { vertical-align: top; }

/* ── 글자 수식어 (표 셀에서도 덮어쓸 수 있도록 .table 뒤에 배치) ── */
.nd-content.nd-content .text-danger { color: #EF4444; }
.nd-content.nd-content .text-muted  { color: #64748B; }
.nd-content.nd-content .text-point  { color: var(--color-primary); }
.nd-content.nd-content .text-invert { color: #fff; }
.nd-content.nd-content .text-success { color: #16A34A; }
.nd-content.nd-content .text-strong { font-weight: 500; }
.nd-content.nd-content .text-tight  { line-height: 1; }
.nd-content.nd-content .text-center { text-align: center; }
.nd-content.nd-content .text-right  { text-align: right; }
.nd-content.nd-content .text-right--sm-left { text-align: right; }
.nd-content.nd-content .text-nowrap { white-space: nowrap; }
.nd-content.nd-content .text-preline { white-space: pre-line; }

.nd-content.nd-content .table_w480 { min-width: 480px; }
.nd-content.nd-content .table_w640 { min-width: 640px; }
.nd-content.nd-content .table_w720 { min-width: 720px; }

/* ── 세로형 라벨-값 표 (실제 <table>) ──
   가로 표(.table_data/.table_list)와 동일하게 진짜 <table>을 쓰고,
   행마다 <th scope="row">라벨</th><td>값</td> 구조로 둔다 — role 속성을 손으로 붙일 필요가 없다.
   예) <table class="table table_kv"><tbody>
         <tr><th scope="row">라벨</th><td>값</td></tr>
       </tbody></table> */
.nd-content.nd-content .table_kv :where(tr) { border-bottom: 1px solid var(--color-line); }

/* flex div 기반 표(연도-금액 등 라벨-값이 아닌 균등열 표)에서 쓰는 행 구분선 */
.nd-content.nd-content .table_row { border-bottom: 1px solid var(--color-line); }

.nd-content.nd-content .table_kv :where(th) {
    width: 170px;
    text-align: left;
    vertical-align: middle;
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 500;
}

.nd-content.nd-content .table_kv :where(th) img {
    display: inline-block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 10px;
}
.nd-content.nd-content .table_kv :where(th) span { vertical-align: middle; }

.nd-content.nd-content .table_kv :where(td) {
    text-align: left;
    vertical-align: middle;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.6;
}

/* 셀 수식어: 값이 여러 줄일 때 위쪽 정렬 (해당 td에만) */
.nd-content.nd-content .table_cell_top { vertical-align: top; padding-top: 18px; padding-bottom: 18px; line-height: 1.9; }

/* 셀 수식어: 값 칸을 오른쪽 정렬로 (보통 .text-danger 와 함께 사용) */
.nd-content.nd-content .table_cell_end { text-align: right; }

/* 아이콘 크기 변형 */
/* .table_kv th img 기본 규칙(0,1,1)과 특정도를 맞춰야 이길 수 있다 */
.nd-content.nd-content img.table_icon_sm { width: 16px; height: 16px; }

/* 표 변형: 아이콘 없이 라벨을 가운데 정렬해서 쓰는 표 (지도가 붙은 정보 표는 제외 — 배경 없음) */
.nd-content.nd-content .table_kv_center :where(th) { text-align: center; }

/* 표 변형: 라벨이 짧은 단어가 아니라 문장인 표 (고정폭 대신 비율폭) */
.nd-content.nd-content .table_kv_wide :where(th) { width: 35%; }

/* --kv-center/--kv-wide 를 쓰는 표에만 배경 적용 (지도 붙은 정보 표는 기본 .table_kv 라 제외됨) */
.nd-content.nd-content .table_kv_center :where(th),
.nd-content.nd-content .table_kv_wide :where(th) {
    background: #9c9c9c;
    color: #fff;
}

@media (max-width: 767px) {
    .nd-content.nd-content .table_list :where(th, td) { height: 44px; padding: 0 6px; font-size: 12px; }
    .nd-content.nd-content .table_tall :where(th, td) { height: 48px; }
    .nd-content.nd-content .table_data :where(th, td) { padding: 12px; font-size: 13px; }

    .nd-content.nd-content .table_kv :where(th) { width: 100px; padding: 14px 12px; font-size: 14px; }
    .nd-content.nd-content .table_kv :where(th) img { width: 15px; height: 15px; margin-right: 6px; }
    .nd-content.nd-content .table_kv :where(td) { font-size: 13px; padding: 14px 12px; }

    .nd-content.nd-content .table_kv_wide :where(th) { width: 40%; }

    /* 표 변형: 모바일에서 라벨/값을 세로로 쌓는 표 */
    .nd-content.nd-content .table_kv_stack_mobile :where(tr, th, td) { display: block; width: 100%; }
    .nd-content.nd-content .table_kv_stack_mobile :where(th) { text-align: left; padding-bottom: 4px; border-right: none; }
}

/* ────────────────────────────────────────
   공용 점(·) 목록 — 안내문 항목 표시용
   글꼴/색상은 부모 또는 함께 지정한 텍스트 클래스에서 상속받음
   ──────────────────────────────────────── */
.nd-content.nd-content .dot_list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    word-break: keep-all;
    color: var(--color-text);
    font-family: var(--font);
}

.nd-content.nd-content .dot_list_item {
    position: relative;
    padding-left: 16px;
}

.nd-content.nd-content .dot_list_item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.85em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
}

.nd-content.nd-content .dot_list_item_sub {
    margin-left: 14px;
}

.nd-content.nd-content .dot_list_item_flush {
    padding-left: 0;
}

.nd-content.nd-content .dot_list_item_flush::before {
    content: none;
}

/* ────────────────────────────────────────
   공용 항목 블록 (빨강 점 + 제목 + 본문)
   페이지 구분 없이 아래 4개 클래스만 사용한다.
     .dot_block   항목 블록 — 점제목과 그 아래 본문을 묶음
        --sep     항목 간 구분선
        --flush   자식 들여쓰기 없음 (중첩 블록용)
     .dot_head    점 + 제목 가로 줄
     .section_dot 점 표식 (속 빈 빨강 링)
     .dot_title   점 옆 제목   18px / 500 / 1.5  (모바일 16px)
     .dot_body    점 아래 본문 16px / 400 / 1.7  (모바일 15px)
   들여쓰기 28px = 점 18px + 간격 10px
   ──────────────────────────────────────── */
.nd-content.nd-content .dot_block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 점제목 아래 모든 콘텐츠(본문·목록·표·버튼) 들여쓰기 */
.nd-content.nd-content .dot_block > *:not(.dot_head) {
    padding-left: 28px;
}

/* 블록으로 묶이지 않고 점제목 바로 뒤에 오는 본문 */
.nd-content.nd-content .dot_head + .dot_body {
    padding-left: 28px;
}

.nd-content.nd-content .dot_block_flush > *:not(.dot_head) {
    padding-left: 0;
}

/* 항목 간 구분선 */
.nd-content.nd-content .dot_block_sep + .dot_block_sep {
    border-top: 1px solid var(--color-line-light);
    padding-top: 20px;
}

.nd-content.nd-content .dot_head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* 점 표식 — 제목 첫 줄 중앙에 맞춤
   margin-top = (라인박스 높이 − 점 높이) ÷ 2 + 잉크 보정(0.048em)
   font-size를 .dot_title과 동일하게 맞춰두고 전부 em으로 계산 — .dot_title font-size가
   바뀌면 여기 font-size 한 줄만 맞추면 margin-top 전체가 비례해서 따라온다(구 사이트
   default.css의 .tit_md { background-position: 0 0.3em } 방식 참고).
   "잉크 보정" 비율(0.048em)은 계산으로 못 구한다 — Noto Sans KR 한글 글자가 폰트
   라인박스 중심보다 아래로 치우쳐 그려지는 폰트 자체의 특성이라(이전 S-Core-Dream은
   반대로 위로 치우쳐 있었음), Playwright로 실제 렌더링 픽셀(점 중심 vs 글자 잉크 중심)을
   26개 샘플씩 측정해(18px 폰트에서 점이 잉크 중심보다 2.25px 위, 16px 폰트에서 2.11px 위,
   각각 font-size 대비 4.3%·5.3%) 평균으로 정했다 (2026-08-11, 폰트를 S-Core-Dream에서
   Noto Sans KR로 교체하며 재측정). 폰트가 바뀌지 않는 한 그대로 유효하다. */
.nd-content.nd-content .section_dot {
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: 4.5px solid #F87171;
    box-sizing: border-box;
    font-size: 18px;
    margin-top: calc((1.5em - 18px) / 2 + 0.048em);
}

/* .dot_title / .dot_body 스타일은 상단 「공통 글자 규격」 참조 */

@media (max-width: 767px) {
    .nd-content.nd-content .section_dot { font-size: 16px; }
}

/* ────────────────────────────────────────
   탭 없는 텍스트 페이지 콘텐츠 상단 여백
   ──────────────────────────────────────── */
.nd-content.nd-content .content-inner--top { padding-top: 6px; }

/* ────────────────────────────────────────
   공통 필수 입력 표시
   ──────────────────────────────────────── */
.nd-content.nd-content .required-dot {
    color: #EF4444;
    font-size: 20px;
    font-weight: 400;
}

.nd-content.nd-content .join-form-label.is-required::before,
.nd-content.nd-content .counsel-form-label.is-required::before,
.nd-content.nd-content .counsel-form-divider.is-required::before {
    content: '*';
    color: #EF4444;
    font-size: 19px;
    font-weight: 400;
    flex-shrink: 0;
}

/* ────────────────────────────────────────
   페이지 타이틀 바 (서브 공통)
   ──────────────────────────────────────── */
.nd-content.nd-content .page-title-bar {
    background: var(--color-primary);
    padding: 28px 0;
}

.nd-content.nd-content .page-title {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
}

/* ────────────────────────────────────────
   로그인 페이지
   ──────────────────────────────────────── */
.nd-content.nd-content .login-section {
    padding: 48px 0;
    background: #fff;
}

.nd-content.nd-content .login-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

/* ── 로그인 카드 ── */
.nd-content.nd-content .login-card {
    width: 520px;
    max-width: 100%;
    min-width: 0;
    padding: 36px 80px;
}

/* ── 입력 필드 ── */

/* 박스 규격(크기/테두리/배경/포커스)은 공용 .input_box 재사용 */

.nd-content.nd-content .login-input-wrap__icon {
    color: var(--color-primary);
}

.nd-content.nd-content .login-input-wrap__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.nd-content.nd-content .login-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: var(--font);
    color: var(--color-text);
    background: transparent;
}

.nd-content.nd-content .login-input-wrap input::placeholder {
    color: #94A3B8;
}

/* ── 아이디 찾기 / 비밀번호 재발급 ── */

.nd-content.nd-content .login-links a {
    font-size: 12px;
    color: var(--color-text);
    transition: color .2s;
}
.nd-content.nd-content .login-links a:hover { color: var(--color-primary); }

/* ── 회원가입 ── */
.nd-content.nd-content .login-join {
    padding-top: 14px;
    border-top: 1px solid var(--color-line);
}

/* ── 소셜 로그인 ── */
.nd-content.nd-content .login-social {
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nd-content.nd-content .login-social a img {
    width: 190px;
    display: block;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .page-title { font-size: 20px; }
    .nd-content.nd-content .page-title-bar { padding: 20px 0; }

    .nd-content.nd-content .login-section { padding: 32px 0; }

    .nd-content.nd-content .login-layout {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .nd-content.nd-content .login-card {
        padding: 28px 20px;
    }

    .nd-content.nd-content .login-social {
        width: 100%;
        align-items: center;
        text-align: center;
    }
}

/* ────────────────────────────────────────
   아이디 찾기 페이지
   ──────────────────────────────────────── */

/* 섹션 래퍼 – login-section과 동일 */
.nd-content.nd-content .find-id-section {
    padding: 48px 0;
    background: #fff;
}

/* 카드 + 안내 문구를 세로 중앙 정렬 */

/* 스텝 래퍼: 카드 폭 기준을 잡아준다 (없으면 모바일에서 내용 폭으로 붕괴) */
.nd-content.nd-content #findIdStep1,
.nd-content.nd-content #findIdStep2 {
    width: 580px;
    max-width: 100%;
}

/* 결과 화면 내부 요소 간격 (안내문 · 결과카드 · 버튼) */

/* 안내 문구 */

/* ── 입력 폼 카드 – login-card와 동일 크기/스타일 ── */
.nd-content.nd-content .find-id-form-card {
    width: 580px;
    max-width: 100%;
    padding: 44px 90px;
}

/* 박스 규격은 공용 .input_box 재사용 */
.nd-content.nd-content .find-id-form__input {
    font-size: 13px;
    font-family: var(--font);
    color: var(--color-text);
    width: 100%;
}
.nd-content.nd-content .find-id-form__input::placeholder { color: #94A3B8; }

.nd-content.nd-content .find-id-form__error {
    font-size: 11px;
    color: #E03B3B;
    min-height: 14px;
    display: block;
}

/* 일치 없음 안내 */
.nd-content.nd-content .find-id-form__no-match {
    margin: 4px 0 0;
}

/* ── 결과 카드 – login-card와 동일 크기/스타일 ── */
.nd-content.nd-content .find-id-result-card {
    width: 100%;
    padding: 44px 90px;
}

/* ── 액션 버튼 영역 ── */
.nd-content.nd-content .find-id-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* 결과 섹션 액션 버튼 영역: 결과 카드 너비에 맞춤 */
.nd-content.nd-content #findIdStep2 .find-id-actions { width: 580px; }

/* 결과 섹션 안내 문구: 서브배너 타이틀과 동일한 좌측 기준 */
.nd-content.nd-content #findIdStep2 .find-id-desc {
    width: 100%;
    text-align: left;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .find-id-section { padding: 32px 0; }
    .nd-content.nd-content .find-id-form-card,
    .nd-content.nd-content .find-id-result-card { width: 100%; padding: 28px 20px; }
    .nd-content.nd-content .find-id-actions { flex-direction: column; }
    .nd-content.nd-content #findIdStep2 .find-id-actions { width: 100%; }
}

/* ────────────────────────────────────────
   비밀번호 재발급 페이지
   ──────────────────────────────────────── */
.nd-content.nd-content .find-pw-section {
    padding: 40px 0;
    background: #fff;
}

/* 안내 문구 */

/* 폼 카드 */
.nd-content.nd-content .find-pw-card {
    width: 100%;
    padding: 44px 0 48px;
}

.nd-content.nd-content .find-pw-form {
    width: 720px;
}

.nd-content.nd-content .find-pw-form__row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nd-content.nd-content .find-pw-form__label {
    width: 110px;
    font-size: 14px;
    font-weight: 400;
    margin-top: 4px;
}

/* 나머지 박스 규격은 공용 .input_box 재사용, 이 폼만 살짝 더 큰 높이/여백 사용 */
.nd-content.nd-content .find-pw-form__input-wrap {
    width: 100%;
    height: 50px;
    padding: 0 20px;
}
.nd-content.nd-content .find-pw-form__icon img { width: 23px; height: 23px; object-fit: contain; }

.nd-content.nd-content .find-pw-form__input {
    margin-top: 4px;
    border: none;
    outline: none;
    font-size: 13px;
    background: transparent;
    font-family: var(--font);
    color: var(--color-text);
}
.nd-content.nd-content .find-pw-form__input::placeholder { color: #94A3B8; }

.nd-content.nd-content .find-pw-form__error {
    display: block;
    padding-left: 2px;
}
.nd-content.nd-content .find-pw-form__error:empty { display: none; }

/* 성공 화면 */
.nd-content.nd-content .find-pw-wrap--center { align-items: center; }

.nd-content.nd-content .find-pw-success-card {
    width: 100%;
    padding: 60px 0;
}

/* 버튼 영역 */
.nd-content.nd-content .find-pw-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .find-pw-section { padding: 32px 0; }
    .nd-content.nd-content .find-pw-card { padding: 28px 20px; }
    .nd-content.nd-content .find-pw-form { width: 100%; }
    .nd-content.nd-content .find-pw-form__row { flex-direction: column; align-items: stretch; gap: 6px; }
    .nd-content.nd-content .find-pw-form__label { width: auto; }
    .nd-content.nd-content .find-pw-form__field { width: 100%; }
    .nd-content.nd-content .find-pw-form__input-wrap { height: 60px; width: 100%; }
    .nd-content.nd-content .find-pw-actions { flex-direction: column; width: 100%; }
}

/* 400px 이하: 글자 크기 축소 + 좌우 여백 확보 (텍스트가 카드에 붙는 문제 방지) */
@media (max-width: 400px) {
    .nd-content.nd-content .find-pw-success-card { padding: 44px 20px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .find-pw-form { width: 100%; padding: 0 40px; }
}

/* ────────────────────────────────────────
   회원가입 페이지 (4단계 공통)
   ──────────────────────────────────────── */
.nd-content.nd-content .join-section {
    padding: 48px 0;
    background: #fff;
}

/* ── 단계 표시 바 ── */
.nd-content.nd-content .join-steps {
    display: flex;
    height: 72px;
}

.nd-content.nd-content .join-step {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    gap: 70px;
    background: #fff;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
}

.nd-content.nd-content .join-step:first-child {
    border-radius: 14px 0 0 14px;
}

.nd-content.nd-content .join-step:last-child {
    border-radius: 0 14px 14px 0;
}

.nd-content.nd-content .join-step.is-active {
    background: #F97316;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.nd-content.nd-content .join-step__num {
    font-size: 20px;
    font-weight: 100;
    line-height: 1;
    color: var(--color-text);
}

.nd-content.nd-content .join-step.is-active .join-step__num { color: #fff; }

.nd-content.nd-content .join-step.is-active .join-step__text { color: #fff; }

/* ── 본인인증 방법 선택 ── */

.nd-content.nd-content .join-auth__cards {
    display: flex;
    justify-content: center;
    gap: 28px;
}

.nd-content.nd-content .join-auth-card {
    width: 360px;
    padding: 24px;
}

.nd-content.nd-content .join-auth-card__img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}


/* ── 완료된 첫 번째 단계 (is-done) ── */
.nd-content.nd-content .join-step.is-done {
    border-left: 1px solid var(--color-line);
}

/* ── 약관 동의 영역 ── */

.nd-content.nd-content .join-terms__title {
    margin: 0 0 12px;
}

.nd-content.nd-content .join-terms__title + .join-terms__box {
    margin-bottom: 10px;
}

.nd-content.nd-content .join-terms__box {
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 10px;
    background: #fff;
}

.nd-content.nd-content .join-terms__check-row {
    padding: 14px 18px;
    background: #EAF2FF;
    border-radius: 6px;
}

/* .chk_inp.chk_inp--sm 공용 규칙 사용 (18px), 텍스트는 .dot_body_xs.text-point.text-strong */

.nd-content.nd-content .join-terms__scroll {
    height: 240px;
    overflow-y: auto;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 400;
    color: #334155;
    line-height: 1.8;
}

/* CMS 본문(CN)에 포함된 구디자인 제목/체크박스는 숨기고 약관 텍스트만 노출 (vglbCnsl 동의서 등) */
.nd-content.nd-content .join-terms__scroll > h3.tit_lg,
.nd-content.nd-content .join-terms__scroll .terms > ul.chk_inp {
    display: none;
}

/* ── 다음단계 버튼 ── */
.nd-content.nd-content .join-next-wrap {
    padding-top: 4px;
}

/* ── 정보입력 폼 (join-step3) ── */

.nd-content.nd-content .join-info-section {
    width: 100%;
}

.nd-content.nd-content .join-info-header {
    display: flex;
    align-items: center;
}

.nd-content.nd-content .join-required-note {
    font-size: 13px;
}

.nd-content.nd-content .join-form-table {
    width: 100%;
    border-left: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
}

.nd-content.nd-content .join-form-row {
    display: flex;
    align-items: stretch;
    min-height: 58px;
}

.nd-content.nd-content .join-form-row--tall {
    min-height: 70px;
}

.nd-content.nd-content .join-form-label {
    width: 160px;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-line);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text);
}

.nd-content.nd-content .join-form-field {
    padding: 0 16px;
    border-bottom: 1px solid var(--color-line);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nd-content.nd-content .join-form-row--tall .join-form-field {
    flex-wrap: nowrap;
    gap: 20px;
    align-items: center;
}

/* 테두리/반경/배경은 공용 .field_box 재사용 */
.nd-content.nd-content .join-input {
    width: 200px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--color-text);
    box-sizing: border-box;
}

.nd-content.nd-content .join-input::placeholder { color: #94A3B8; }

.nd-content.nd-content .join-select {
    height: 36px;
    padding: 0 28px 0 12px;
    font-size: 13px;
    color: var(--color-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23172554' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    min-width: 130px;
    box-sizing: border-box;
}

.nd-content.nd-content .join-field-msg.is-error { color: #EF4444; display: none; }
.nd-content.nd-content .join-field-msg.is-error.is-show { display: inline; }
.nd-content.nd-content .join-field-msg.is-ok { color: var(--color-primary); display: none; }
.nd-content.nd-content .join-field-msg.is-ok.is-show { display: inline; }

.nd-content.nd-content .join-input.is-error { border-color: #EF4444; }

/* 이메일 */
.nd-content.nd-content .join-email-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nd-content.nd-content .join-input--sm { width: 110px; }
.nd-content.nd-content .join-input--md { width: 150px; }

/* 라디오 버튼: .radio_inp.radio_inp--sm 공용 규칙 사용 (20px, 점 12px) */

.nd-content.nd-content .radio_inp__msg {
    min-width: 0;
}

/* 하단 버튼 */
.nd-content.nd-content .join-action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* ── 가입완료 (join-step4) ── */

.nd-content.nd-content .join-complete__img {
    width: 240px;
    height: 240px;
}

.nd-content.nd-content .join-complete__img img {
    width: 240px;
    height: 240px;
    object-fit: contain;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .join-section { padding: 32px 0; }

    .nd-content.nd-content .join-steps {
        height: auto;
        flex-direction: column;
    }

    .nd-content.nd-content .join-step {
        border: 1px solid var(--color-line);
        border-bottom: none;
        border-radius: 0;
        padding: 16px 20px;
    }

    .nd-content.nd-content .join-step:first-child { border-radius: 0; }
    .nd-content.nd-content .join-step:last-child  { border-bottom: 1px solid var(--color-line); border-radius: 0; }

    .nd-content.nd-content .join-step.is-active { border-color: transparent; }

    .nd-content.nd-content .join-step.is-done {
        border: 1px solid var(--color-line);
        border-bottom: none;
    }

    .nd-content.nd-content .join-auth__cards { flex-direction: column; gap: 20px; }
    .nd-content.nd-content .join-auth-card   { max-width: 100%; padding: 24px; }

    /* 정보입력 폼 모바일 */
    .nd-content.nd-content .join-info-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .nd-content.nd-content .join-form-row { flex-direction: column; min-height: auto; }
    .nd-content.nd-content .join-form-row--tall { min-height: auto; }
    .nd-content.nd-content .join-form-label { width: 100%; border-bottom: none; border-top: 1px solid var(--color-line); padding: 10px 12px; }
    .nd-content.nd-content .join-form-field { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
    .nd-content.nd-content .join-form-row--tall .join-form-field { flex-wrap: wrap; gap: 10px; align-items: center; }
    .nd-content.nd-content .join-input { width: 100%; max-width: 100%;
    font-family: var(--font);
    color: var(--color-text);
}
    .nd-content.nd-content .join-input--sm { width: 100px; }
    .nd-content.nd-content .join-input--md { width: 130px; }
    .nd-content.nd-content .join-email-group { flex-wrap: wrap; }
    .nd-content.nd-content .join-action-row { flex-direction: column; gap: 10px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* 태블릿: 라벨↔아이콘 간격(기본 70px)이 4개 스텝을 넘기므로 축소 */
    .nd-content.nd-content .join-step { padding: 0 12px; gap: 12px; min-width: 0; }
    .nd-content.nd-content .join-step__num  { font-size: 22px; }
    .nd-content.nd-content .join-auth-card  { padding: 24px; }

    /* 정보입력 폼 태블릿 */
    .nd-content.nd-content .join-form-label { width: 140px; }
    .nd-content.nd-content .join-input { width: 180px;
    font-family: var(--font);
    color: var(--color-text);
}
    .nd-content.nd-content .join-form-row--tall .join-form-field { gap: 16px; }
}

/* ────────────────────────────────────────
   개인정보처리방침 / 이용약관 페이지
   ──────────────────────────────────────── */
.nd-content.nd-content .privacy-title-bar {
    background: #06B6D4;
    padding: 28px 0;
}

.nd-content.nd-content .privacy-section {
    padding: 48px 0;
    background: #fff;
}

.nd-content.nd-content .privacy-text {
    padding: 16px 15px;
}

.nd-content.nd-content .privacy-text p {
    margin: 0 0 8px;
}

.nd-content.nd-content .privacy-article-title {
    margin: 16px 0 4px;
}

.nd-content.nd-content .privacy-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.nd-content.nd-content .privacy-list li {
    padding-left: 8px;
    line-height: 1.7;
}

/* 푸터 정책 링크 현재 페이지 활성 상태 */
.nd-content.nd-content .footer-policy-bar__left a.is-active {
    background: #555;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .privacy-title-bar { padding: 20px 0; }
    .nd-content.nd-content .privacy-section { padding: 32px 0; }
    .nd-content.nd-content .privacy-text {
        padding: 12px 8px;
    }
}

/* ────────────────────────────────────────
   休서울이동노동자 쉼터 페이지
   ──────────────────────────────────────── */

/* ────────────────────────────────────────
   페이지 타이틀 배너 (공통)
   ──────────────────────────────────────── */
.nd-content.nd-content .sub-hero {
    background-image: url(../images/new_portal/Sub-banner.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nd-content.nd-content .sub-hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 38px var(--container-pad-sm);
    min-height: 120px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .nd-content.nd-content .sub-hero__inner {
        padding-left: var(--container-pad-md);
        padding-right: var(--container-pad-md);
    }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .sub-hero__inner {
        padding-left: var(--container-pad-lg);
        padding-right: var(--container-pad-lg);
    }
}

.nd-content.nd-content .sub-hero__title {
    font-size: 23px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
    font-family: var(--font);
}

/* 타이틀이 긴 페이지용 축소 변형 (wsin) */
.nd-content.nd-content .sub-hero__title--sm {
    font-size: 22px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .sub-hero__inner { padding: 28px var(--container-pad-sm); min-height: 90px; }
    .nd-content.nd-content .sub-hero__title { font-size: 20px; }
    .nd-content.nd-content .sub-hero__title--sm { font-size: 17px; }
}

/* ────────────────────────────────────────
   브레드크럼
   ──────────────────────────────────────── */
.nd-content.nd-content .breadcrumb__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 25px var(--container-pad-sm);
}

/* 아이콘 잉크가 텍스트보다 위로 떠 보이는 착시 보정 */
.nd-content.nd-content .breadcrumb__inner > span:first-child img {
    transform: translateY(1px);
}

@media (min-width: 768px) {
    .nd-content.nd-content .breadcrumb__inner {
        padding-left: var(--container-pad-md);
        padding-right: var(--container-pad-md);
    }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .breadcrumb__inner {
        padding-left: var(--container-pad-lg);
        padding-right: var(--container-pad-lg);
    }
}

.nd-content.nd-content .breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-content.nd-content .breadcrumb__link {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.4;
    white-space: nowrap;
    font-family: var(--font);
}

.nd-content.nd-content .breadcrumb__current {
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--color-text);
    font-family: var(--font);
}

.nd-content.nd-content .breadcrumb__sep {
    color: #64748B;
    margin: 0 4px;
}

/* 실제 페이지로 연결된 상위 링크 */
.nd-content.nd-content .breadcrumb__link[href]:not([href="#"]) { cursor: pointer; }
.nd-content.nd-content .breadcrumb__link[href]:not([href="#"]):hover { color: var(--color-primary); text-decoration: underline; }

/* 현재 항목 드롭다운 (하위메뉴 형제 페이지) */
.nd-content.nd-content .breadcrumb__item--dropdown { position: relative; }

.nd-content.nd-content .breadcrumb__current--toggle { cursor: pointer; }
.nd-content.nd-content .breadcrumb__item--dropdown .breadcrumb__sep { cursor: pointer; }
.nd-content.nd-content .breadcrumb__item--dropdown .breadcrumb__sep svg { transition: transform .2s; }
.nd-content.nd-content .breadcrumb__item--dropdown.is-open .breadcrumb__sep svg { transform: rotate(180deg); }

.nd-content.nd-content .breadcrumb__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 180px;
    margin: 8px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    display: none;
}

.nd-content.nd-content .breadcrumb__item--dropdown.is-open .breadcrumb__dropdown { display: block; }

.nd-content.nd-content .breadcrumb__dropdown li { margin: 0; }

.nd-content.nd-content .breadcrumb__dropdown a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--color-text-sub);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    font-family: var(--font);
}

.nd-content.nd-content .breadcrumb__dropdown a:hover { background: #EBF4FF; color: var(--color-primary); }
.nd-content.nd-content .breadcrumb__dropdown a.is-current { color: var(--color-primary); font-weight: 600; }

/* 초소형 화면: 긴 경로가 한 줄을 넘겨 삐져나오지 않도록 폰트 축소 */
@media (max-width: 360px) {
    .nd-content.nd-content .breadcrumb__link,
    .nd-content.nd-content .breadcrumb__current { font-size: 12px; }
    .nd-content.nd-content .breadcrumb__sep { margin: 0 2px; }
}

/* ────────────────────────────────────────
   탭 메뉴
   ──────────────────────────────────────── */
/* ────────────────────────────────────────
   공용 탭 (박스형, 채움 스타일)
   ──────────────────────────────────────── */
.nd-content.nd-content .tab-box {
    height: 64px;
    font-size: 18px;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--color-line);
    border-left: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    letter-spacing: 0.1px;
    line-height: 1.5;
    padding: 0 12px;
    text-align: center;
    text-decoration: none;
    font-family: var(--font);
    color: var(--color-text);
}

.nd-content.nd-content .tab-box:first-child {
    border-left: 1px solid var(--color-line);
}

.nd-content.nd-content .tab-box.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.nd-content.nd-content .tab-box:not(.is-active):hover {
    background: #F8FAFC;
}

.nd-content.nd-content .tab-box:disabled {
    cursor: default;
    pointer-events: none;
}

/* 탭 수가 많아 폭이 좁아야 하는 경우 (예: 6개 이상) */
.nd-content.nd-content .tab-box--sm {
    min-width: 80px;
    font-size: 15px;
    padding: 0 8px;
    white-space: nowrap;
}

@media (min-width: 880px) {
    .nd-content.nd-content .tab-box--sm { font-size: 16px; white-space: normal; }
}

@media (max-width: 767px) {
    .nd-content.nd-content .tab-box {
        font-size: 13px;
        min-width: 0;
        height: auto;
        min-height: 50px;
        padding: 6px 6px;
        line-height: 1.3;
        word-break: keep-all;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .tab-box { font-size: 16px; height: 58px; }
}

/* 지도 영역 → .map / .map__placeholder 공용 규칙 재사용
   ([Backend] 카카오맵 SDK 연동 시 내부 div 교체) */

/* 정보 테이블(주소·전화번호·운영시간)은 공통 .table_label/.table_value 사용 */

/* ────────────────────────────────────────
   대관정보 섹션
   ──────────────────────────────────────── */
.nd-content.nd-content .wsh {
    border: 2px solid var(--color-line);
    padding: 30px 24px;
}

.nd-content.nd-content .wsh__body {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 16px 12px;
}

.nd-content.nd-content .wsh__img {
    width: 300px;
    height: 225px;
    object-fit: cover;
    display: block;
}

.nd-content.nd-content .wsh__items {
    align-self: stretch;
}

.nd-content.nd-content .wsh__item {
    padding: 0 16px;
    background: #F1F5F9;
    min-height: 60px;
}

.nd-content.nd-content .wsh__item-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* ────────────────────────────────────────
   노동자/사용자상담 페이지 (worker-counsel.html)
   ──────────────────────────────────────── */

.nd-content.nd-content .counsel-content {
    padding-bottom: 60px;
}

.nd-content.nd-content .counsel-content__inner {
    gap: 32px;
}

/* ── 탭 버튼 ── */

/* ── 안내 박스 ── */
.nd-content.nd-content .counsel-info {
    background: #fff;
    border: 1px solid var(--color-line);
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* ════════════════════════════════════════
   공통 검색 필터 (list-filter)
   counsel / faq / vedu / pvideo 페이지 공유
   ════════════════════════════════════════ */
.nd-content.nd-content .list-filter {
    background: #F1F5F9;
    padding: 28px 80px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.nd-content.nd-content .list-filter__select {
    height: 46px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23172554' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: 14px;
    padding: 0 32px 0 12px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: var(--font);
    color: var(--color-text);
}

.nd-content.nd-content .list-filter__select:focus { border-color: var(--color-primary); }

.nd-content.nd-content .list-filter__input {
    height: 46px;
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    padding: 0 16px;
    outline: none;
    font-family: var(--font);
    color: var(--color-text);
}

.nd-content.nd-content .list-filter__input:focus { border-color: var(--color-primary); }
.nd-content.nd-content .list-filter__input::placeholder { color: #94A3B8; }

.nd-content.nd-content .list-filter__btn {
    height: 46px;
    padding: 0 18px;
    background: #64748B;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.2s;
    font-family: var(--font);
}

.nd-content.nd-content .list-filter__btn:hover { background: #475569; }

@media (max-width: 767px) {
    .nd-content.nd-content .list-filter { padding: 16px; flex-direction: column; align-items: stretch; }
    /* 세로 스택 시 셀렉트도 전체폭 (변형 셀렉트 고정폭보다 우선하도록 특이성 상향) */
    .nd-content.nd-content .list-filter .list-filter__select { width: 100%; }
    /* 세로 배치에서 flex:1이 높이를 눌러 입력창이 납작해지므로 flex 해제 + 높이 복원 */
    .nd-content.nd-content .list-filter__input { min-width: 0; flex: 0 0 auto; height: 46px; }
    .nd-content.nd-content .list-filter__btn { width: 100%; justify-content: center;
    color: #fff;
    font-family: var(--font);
}
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .list-filter { padding: 24px 32px; }
}

/* ── 검색 필터 ── */
/* counsel 필터 select 너비 */
.nd-content.nd-content .list-filter__select--year  { width: 110px; }
.nd-content.nd-content .list-filter__select--type  { width: 170px; }
.nd-content.nd-content .list-filter__select--field { width: 90px; }

/* ── 목록 ── */

.nd-content.nd-content .counsel-list__count em {
    color: #006ED6;
    font-style: normal;
}

/* ── 테이블 ── */
.nd-content.nd-content .counsel-table .col-num     { width: 130px; }
.nd-content.nd-content .counsel-table .col-receipt { width: 155px; }
.nd-content.nd-content .counsel-table .col-title   { text-align: left; padding-left: 12px; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-content.nd-content .counsel-table .col-status  { width: 130px; }
.nd-content.nd-content .counsel-table .col-date    { width: 130px; }

/* ── 상태 뱃지 ── */
/* 모양/색은 공용 .badge(+ --orange/--gray) 재사용, 고정폭만 스코프 */
.nd-content.nd-content .counsel-status {
    width: 90px;
}

.nd-content.nd-content .counsel-status--approved {
    background: #F1F5F9;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

/* ── 페이지네이션 ── */
.nd-content.nd-content .counsel-pagination {
    padding: 40px 0;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    /* 긴 탭 라벨이 2줄로 접힐 때 줄 간격 확보 + 글자 살짝 축소 */
    .nd-content.nd-content .counsel-info           { flex-direction: column; padding: 20px; }
    .nd-content.nd-content .counsel-table          { table-layout: fixed; }
    .nd-content.nd-content .counsel-table th,
    .nd-content.nd-content .counsel-table td       { font-size: 12px; height: 44px; }
    .nd-content.nd-content .counsel-table .col-receipt { display: none; }
    .nd-content.nd-content .counsel-table .col-num      { width: 44px; }
    .nd-content.nd-content .counsel-table .col-status   { width: 76px; }
    .nd-content.nd-content .counsel-table .col-date     { width: 78px; }
    .nd-content.nd-content .counsel-status         { width: 72px; height: 28px; font-size: 11px; }
}

/* ────────────────────────────────────────
   노동자/사용자상담 상세 페이지 (worker-counsel-detail.html)
   ──────────────────────────────────────── */

/* ── 제목 행 ── */
.nd-content.nd-content .counsel-detail__title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-line);
}

/* 상태 배지는 공용 .badge(+ --lg --gray/--orange) 사용, 이 자리만의 여백만 스코프 */
.nd-content.nd-content #detailBadge { margin-left: 16px; }

/* ── 메타 행 ── */
.nd-content.nd-content .counsel-detail__meta-row {
    display: flex;
    align-items: center;
    min-height: 72px;
    border-bottom: 1px solid var(--color-line);
}

.nd-content.nd-content .counsel-detail__meta-left {
    padding: 0 30px;
}

.nd-content.nd-content .counsel-detail__meta-label {
    width: 90px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

.nd-content.nd-content .counsel-detail__meta-right {
    display: flex;
    align-items: center;
    gap: 0;
}

.nd-content.nd-content .counsel-detail__meta-name {
    padding: 0 20px;
    min-width: 120px;
}

.nd-content.nd-content .counsel-detail__meta-date {
    padding: 0 20px;
}

/* ── 본문 내용: 박스 규격(padding/border)은 공용 .post-detail__body 재사용 ── */
.nd-content.nd-content .counsel-detail__body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

.nd-content.nd-content .counsel-detail__body p {
    margin: 0;
}

/* ── 답변 박스 ── */
.nd-content.nd-content .counsel-answer {
    border: 2px solid var(--color-primary);
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 30px;
}

.nd-content.nd-content .counsel-answer__header {
    display: flex;
    align-items: center;
    padding: 18px 30px;
    background: #EFF6FF;
}

.nd-content.nd-content .counsel-answer__date {
    width: 100px;
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

@media (max-width: 767px) {
    /* 좁은 화면에서 답변 헤더 좌우 패딩(30px)이 과해 날짜가 삐져나오는 문제 */
    .nd-content.nd-content .counsel-answer__header { padding: 14px 16px; }
}
@media (max-width: 360px) {
    /* 초소형 화면: 기관명+날짜가 한 줄에 안 들어가면 날짜를 아래로 */
    .nd-content.nd-content .counsel-answer__header { flex-wrap: wrap; row-gap: 2px; padding: 12px 14px; }
    .nd-content.nd-content .counsel-answer__date { width: auto; }
}

.nd-content.nd-content .counsel-answer__body {
    padding: 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

.nd-content.nd-content .counsel-answer__body p {
    margin: 0;
}

.nd-content.nd-content .counsel-answer__info-list {
    list-style: disc;
    padding-left: 18px;
    margin: 4px 0 0;
}

.nd-content.nd-content .counsel-answer__info-list li {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* ── 목록 버튼 ── */
.nd-content.nd-content .counsel-detail__btn-wrap {
    padding: 10px 0 5px;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .counsel-detail__title-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 0;
        gap: 10px;
    }
    .nd-content.nd-content #detailBadge { font-size: 13px; }

    .nd-content.nd-content .counsel-detail__meta-row {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        padding: 12px 0;
        gap: 4px;
    }

    .nd-content.nd-content .counsel-detail__meta-left  { padding: 0; }
    .nd-content.nd-content .counsel-detail__meta-right { padding: 0; flex-direction: row; gap: 8px; }
    .nd-content.nd-content .counsel-detail__meta-name {
        padding: 0;
        min-width: auto;
    }
    .nd-content.nd-content .counsel-detail__meta-date {
        padding: 0;
    }

    .nd-content.nd-content .counsel-detail__body.post-detail__body { padding: 24px 0; font-size: 14px; }
    .nd-content.nd-content .counsel-answer__body { font-size: 14px; }
    .nd-content.nd-content .counsel-answer__info-list li { font-size: 14px; }
}

/* ────────────────────────────────────────
   반응형 조정
   ──────────────────────────────────────── */
@media (max-width: 767px) {
    .nd-content.nd-content .wsh { padding: 20px 14px; }
    .nd-content.nd-content .wsh__body { flex-direction: column; padding: 12px 0; gap: 16px; }
    .nd-content.nd-content .wsh__img { width: 100%; height: auto; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .wsh__body { gap: 20px; }
    .nd-content.nd-content .wsh__img { width: 220px; height: 165px; }
}

/* ────────────────────────────────────────
   대관 신청 페이지
   ──────────────────────────────────────── */
/* 대관규칙 박스 */
.nd-content.nd-content .wsr-rules {
    border: 1px solid var(--color-primary);
    padding: 30px 50px;
}

.nd-content.nd-content .wsr-rules__body {
    padding: 10px 20px;
}

.nd-content.nd-content .wsr-rules__notice {
    background: #F1F5F9;
    padding: 20px 40px;
}

.nd-content.nd-content .wsr-rules__agree {
    padding: 10px 0;
}

/* .chk_inp 공용 규칙 사용 (20px 기본 크기) */

.nd-content.nd-content .wsr-rules__agree-label {
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
}

/* 대관예약 신청 헤더 */

.nd-content.nd-content .wsr-apply__required-note {
    font-size: 15px;
}

.nd-content.nd-content .counsel-form-label {
    width: 180px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
}

/* 입력 요소: 테두리/반경/배경은 공용 .field_box 재사용 */
.nd-content.nd-content .wsr-select {
    height: 48px;
    padding: 0 36px 0 14px;
    font-size: 15px;
    color: var(--color-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23172554' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    min-width: 150px;
    box-sizing: border-box;
}

.nd-content.nd-content .wsr-input {
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
}

.nd-content.nd-content .wsr-input--sm {
    width: 160px;
}
.nd-content.nd-content .wsr-input--md {
    width: 320px;
}

.nd-content.nd-content .wsr-input::placeholder { color: #94A3B8; }

.nd-content.nd-content .wsr-textarea {
    width: 100%;
    height: 140px;
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-size: 15px;
    font-family: var(--font);
    color: var(--color-text);
    background: #fff;
    resize: vertical;
    line-height: 1.6;
    box-sizing: border-box;
}

.nd-content.nd-content .wsr-textarea:focus { outline: none; border-color: var(--color-primary); }
.nd-content.nd-content .wsr-textarea::placeholder { color: #94A3B8; }

.nd-content.nd-content .wsr-char-count {
    text-align: right;
    font-size: 15px;
    align-self: flex-end;
}

.nd-content.nd-content .wsr-field-error {
    display: none;
}

.nd-content.nd-content .wsr-field-error.is-show { display: block; }

/* 대관유형 이미지 + 설명 */
.nd-content.nd-content .wsr-type-img {
    width: 180px;
    height: 135px;
    object-fit: cover;
    display: block;
    margin: 16px;
}

/* ══════════════════════════════════════════════════════════
   공용 체크박스·라디오 행
   여러 페이지(상담·회원가입·쉼터대관 등)에 각각 따로 있던 동일한
   패턴을 하나로 묶음(2026-08-10). 그룹 레이아웃(gap·줄바꿈 등)은
   페이지마다 다를 수 있어 그대로 페이지 클래스로 둔다.

   체크박스: <label class="row items-center gap-N chk_inp [dot_body_sm]">
               <input type="checkbox"><span>텍스트</span></label>
     크기  기본 20px · --sm 18px · --lg 22px
     상태  --disabled (읽기전용처럼 흐리게)

   라디오:   <label class="row items-center gap-N radio_inp [dot_body_sm]">
               <input type="radio">
               <span class="shrink-0 row items-center justify-center radio_inp__circle"></span>
               <span>텍스트</span></label>
     크기  기본 24px(점 14px) · --sm 20px(점 12px)
   ══════════════════════════════════════════════════════════ */
.nd-content.nd-content .chk_inp { cursor: pointer; }
.nd-content.nd-content .chk_inp input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.nd-content.nd-content .chk_inp--sm input[type="checkbox"] { width: 18px; height: 18px; transform: translateY(-1px); }
.nd-content.nd-content .chk_inp--lg input[type="checkbox"] { width: 22px; height: 22px; }
.nd-content.nd-content .chk_inp--disabled { opacity: 0.45; pointer-events: none; }

.nd-content.nd-content .radio_inp { cursor: pointer; }
.nd-content.nd-content .radio_inp input[type="radio"] { display: none; }

.nd-content.nd-content .radio_inp__circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #64748B;
    background: #fff;
}

.nd-content.nd-content .radio_inp input[type="radio"]:checked ~ .radio_inp__circle::after {
    content: '';
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    display: block;
}

.nd-content.nd-content .radio_inp--sm .radio_inp__circle { width: 20px; height: 20px; }
.nd-content.nd-content .radio_inp--sm input[type="radio"]:checked ~ .radio_inp__circle::after { width: 12px; height: 12px; }

/* 날짜 + 시간 */
.nd-content.nd-content .booking-date-wrap {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap;
}

/* 캘린더 */
.nd-content.nd-content .booking-cal { flex-shrink: 0; }

.nd-content.nd-content .booking-cal__nav {
    height: 48px;
}

.nd-content.nd-content .booking-cal__nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #334155;
    padding: 4px 8px;
}

.nd-content.nd-content .booking-cal__month {
    min-width: 100px;
}

.nd-content.nd-content .booking-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 40px);
    gap: 2px;
}

.nd-content.nd-content .booking-cal__head-cell {
    width: 40px;
    height: 40px;
    font-size: 12px;
    background: #DBEAFE;
    border-bottom: 1px solid var(--color-line);
}

.nd-content.nd-content .booking-cal__day {
    width: 40px;
    height: 40px;
    font-size: 12px;
    color: var(--color-primary);
    cursor: pointer;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    background: #fff;
    transition: background .15s;
    user-select: none;
}

.nd-content.nd-content .booking-cal__day.is-selected { background: var(--color-primary); color: #fff; font-weight: 700; }
.nd-content.nd-content .booking-cal__day.is-unavailable { color: #EF4444; cursor: default; background: #F8FAFC; }
.nd-content.nd-content .booking-cal__day.is-empty { cursor: default; background: transparent; border: none; }
.nd-content.nd-content .booking-cal__day.is-today:not(.is-selected) { font-weight: 700; }
.nd-content.nd-content .booking-cal__nav-btn[disabled] { color: var(--color-line); cursor: default; }

/* 모바일: 달력 7열을 고정 40px 대신 유연폭으로 (좁은 화면에서 넘침 방지) */
@media (max-width: 767px) {
    .nd-content.nd-content .booking-cal { flex-shrink: 1; width: 100%; }
    .nd-content.nd-content .booking-cal__grid { grid-template-columns: repeat(7, 1fr); }
    .nd-content.nd-content .booking-cal__head-cell,
    .nd-content.nd-content .booking-cal__day { width: auto; }
}

.nd-content.nd-content .booking-cal__legend {
    margin-top: 16px;
    font-size: 13px;
}

.nd-content.nd-content .booking-cal__legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.nd-content.nd-content .booking-cal__legend-dot--selected { background: var(--color-primary); }
.nd-content.nd-content .booking-cal__legend-dot--unavail { background: #EF4444; }

/* 시간 그리드 */
.nd-content.nd-content .booking-time {
    min-width: 300px;
    padding-top: 6px;
}

.nd-content.nd-content .booking-time__title {
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.nd-content.nd-content .booking-time__grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.nd-content.nd-content .booking-time__grid td {
    font-size: 13px;
    text-align: center;
    padding: 8px 8px;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    cursor: pointer;
    white-space: nowrap;
    background: #fff;
    transition: background .1s;
    color: var(--color-text);
}

.nd-content.nd-content .booking-time__grid td:first-child { border-left: 1px solid var(--color-line); }
.nd-content.nd-content .booking-time__grid tr:first-child td { border-top: 1px solid var(--color-line); }

.nd-content.nd-content .booking-time__grid td:hover:not(.is-booked) { background: #EFF6FF; }
.nd-content.nd-content .booking-time__grid td.is-selected { background: #DBEAFE; color: var(--color-primary); font-weight: 600; }
.nd-content.nd-content .booking-time__grid td.is-booked { color: rgba(15, 23, 42, 0.25); cursor: default; background: #fff; }
.nd-content.nd-content .booking-time__grid td.is-empty { cursor: default; background: transparent; border-color: transparent; }

/* 모바일: 4열 시간표가 좁아지면 "09:00~10:00" 텍스트가 칸을 넘어 깨지므로 폰트·패딩 축소 */
@media (max-width: 767px) {
    .nd-content.nd-content .booking-time__grid td { font-size: 12px; padding: 9px 3px; }
}
@media (max-width: 479px) {
    .nd-content.nd-content .booking-time__grid td { font-size: 11px; padding: 9px 2px; }
}
@media (max-width: 360px) {
    .nd-content.nd-content .booking-time__grid td { font-size: 10px; padding: 9px 0; }
}
@media (max-width: 320px) {
    .nd-content.nd-content .booking-time__grid td { font-size: 9px; padding: 9px 0; }
}

.nd-content.nd-content .booking-time__note {
    margin-top: 39px;
}

.nd-content.nd-content .booking-time__note--edit {
    margin-bottom: 12px;
}

/* 장비대여 */

/* .chk_inp 공용 규칙 사용 (20px 기본 크기), 텍스트는 .dot_body_sm */

/* 하단 버튼 → .form-actions 공용 규칙 재사용 */

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .wsr-rules { padding: 20px 16px; }
    .nd-content.nd-content .wsr-rules__notice { padding: 16px 20px; }

    /* 좁은 화면: 시간 선택 패널 최소폭(300px) 해제 → 시간표는 .scroll-x로 스크롤 */
    .nd-content.nd-content .booking-time { min-width: 0; max-width: 100%; }
    .nd-content.nd-content .booking-time .scroll-x { min-width: 0; max-width: 100%; }
    .nd-content.nd-content .booking-date-wrap { min-width: 0; flex-direction: column; }

    .nd-content.nd-content .wsr-input--md { width: 100%; }
    .nd-content.nd-content .wsr-input--sm { width: 130px; }
    .nd-content.nd-content .wsr-type-img { width: 120px; height: 90px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .wsr-rules { padding: 24px 30px; }
    .nd-content.nd-content .wsr-input--md { width: 240px; }
}

/* ────────────────────────────────────────
   방문상담예약 페이지 (visit-counsel-apply.html)
   ──────────────────────────────────────── */

/* 기본 선택 - 드롭다운 + 기관정보 행 */
.nd-content.nd-content .visit-counsel-basic-top {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

/* 기관 정보 목록 */
.nd-content.nd-content .visit-counsel-facility-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
}

.nd-content.nd-content .visit-counsel-facility-info li::before {
    content: '• ';
}

/* 상담실 사진 4장 그리드 */
.nd-content.nd-content .visit-counsel-photo-grid {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
}

.nd-content.nd-content .visit-counsel-photo-grid img {
    flex: 1;
    min-width: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .nd-content.nd-content .visit-counsel-basic-top { flex-direction: column; gap: 12px; }
    .nd-content.nd-content .visit-counsel-photo-grid { flex-wrap: wrap; }
    .nd-content.nd-content .visit-counsel-photo-grid img { flex: 0 0 calc(50% - 4px); aspect-ratio: 4 / 3; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .visit-counsel-photo-grid img { aspect-ratio: 4 / 3; }
}

/* ────────────────────────────────────────
   방문상담예약 신청내역 조회 페이지 (visit-counsel-list.html)
   ──────────────────────────────────────── */

.nd-content.nd-content .visit-counsel-filter .list-filter__select {
    width: 185px;
}

.nd-content.nd-content .counsel-history-table .col-num    { width: 100px; }
.nd-content.nd-content .counsel-history-table .col-center { text-align: left; padding-left: 20px; }
.nd-content.nd-content .counsel-history-table .col-date   { width: 140px; }
.nd-content.nd-content .counsel-history-table .col-time   { width: 140px; }
.nd-content.nd-content .counsel-history-table .col-status { width: 130px; }
.nd-content.nd-content .counsel-history-table .col-reg    { width: 120px; }

.nd-content.nd-content .counsel-history-link {
    color: var(--color-primary);
    text-decoration: none;
}

.nd-content.nd-content .counsel-history-link:hover { text-decoration: underline; }

/* 상태 배지는 공용 .counsel-status(+ --pending/--done/--approved) 사용 */

@media (max-width: 767px) {
    .nd-content.nd-content .visit-counsel-filter .list-filter__select { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .visit-counsel-filter .list-filter__select { width: 150px; }
    .nd-content.nd-content .counsel-history-table .col-date { width: 110px; }
    .nd-content.nd-content .counsel-history-table .col-time { width: 110px; }
}

/* ────────────────────────────────────────
   화상상담 예약내역 조회 (video-counsel-list.html)
   기본 표/배지/페이지네이션은 공용 규칙(.counsel-history-table 등) 재사용
   ──────────────────────────────────────── */

/* 목록 상단: 건수 + 예약 신청 버튼 */

.nd-content.nd-content .vcl-head .counsel-list__count { margin: 0; }

/* 화상상담 예약내역 표 컬럼 폭 */
.nd-content.nd-content .video-counsel-history-table .col-num       { width: 70px; }
.nd-content.nd-content .video-counsel-history-table .col-no         { width: 200px; }
.nd-content.nd-content .video-counsel-history-table .col-datetime   { width: 220px; }
.nd-content.nd-content .video-counsel-history-table .col-counselor  { width: auto; }
.nd-content.nd-content .video-counsel-history-table .col-status     { width: 120px; }
.nd-content.nd-content .video-counsel-history-table .col-survey     { width: 110px; }
.nd-content.nd-content .video-counsel-history-table .col-reg        { width: 120px; }

@media (max-width: 767px) {
    .nd-content.nd-content .video-counsel-history-table .col-counselor,
    .nd-content.nd-content .video-counsel-history-table .col-survey { display: none; }
}

/* ── 예약내역 표 모바일: 기존 표 모양 유지한 채 축소 (마이페이지 방식) ──
   부가 컬럼을 숨기고 고정 레이아웃 + 폰트 축소로 화면에 맞춘다. */
@media (max-width: 767px) {
    .nd-content.nd-content .counsel-history-table,
    .nd-content.nd-content .video-counsel-history-table { table-layout: fixed; width: 100%; }

    .nd-content.nd-content .counsel-history-table th,
    .nd-content.nd-content .counsel-history-table td { font-size: 12px; height: 44px; padding: 0 4px; }

    /* 방문상담 예약내역: 번호·방문센터·예약날짜·상태 유지, 예약시간·등록일 숨김.
       모든 컬럼 명시 폭(합 ≤ 275) → 320px에서도 안 넘치고 넓어지면 비례 확장. */
    .nd-content.nd-content .counsel-history-table .col-time,
    .nd-content.nd-content .counsel-history-table .col-reg { display: none; }
    .nd-content.nd-content .counsel-history-table .col-num    { width: 38px; }
    .nd-content.nd-content .counsel-history-table .col-center {
        width: 98px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .nd-content.nd-content .counsel-history-table .col-date   { width: 82px; }
    .nd-content.nd-content .counsel-history-table .col-status { width: 56px; }
    .nd-content.nd-content .counsel-history-table .col-center .counsel-history-link {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 화상상담 예약내역: 번호·예약번호·예약일시·상태 유지, 담당상담사·설문·신청일 숨김. */
    .nd-content.nd-content .video-counsel-history-table .col-counselor,
    .nd-content.nd-content .video-counsel-history-table .col-survey,
    .nd-content.nd-content .video-counsel-history-table .col-reg { display: none; }
    .nd-content.nd-content .video-counsel-history-table .col-num      { width: 38px; }
    .nd-content.nd-content .video-counsel-history-table .col-no       {
        width: 88px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .nd-content.nd-content .video-counsel-history-table .col-datetime { width: 86px; white-space: normal; line-height: 1.3; }
    .nd-content.nd-content .video-counsel-history-table .col-status   { width: 54px; }
    .nd-content.nd-content .video-counsel-history-table .col-no .counsel-history-link {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 상태 배지 축소 (컬럼이 많은 화상상담 표에서만) */
    .nd-content.nd-content .video-counsel-history-table .counsel-status { width: 52px; height: 26px; font-size: 11px; }
}

/* ────────────────────────────────────────
   공지사항 목록 페이지 (notice-list.html)
   ──────────────────────────────────────── */

.nd-content.nd-content .notice-filter__select--field { width: 120px; }
.nd-content.nd-content .notice-filter .list-filter__input { max-width: 520px; }

/* 기본 표 스타일은 .counsel-history-table 공용 규칙 참조 */
.nd-content.nd-content .notice-table .col-num    { width: 90px; }
/* 쉼터상담 상담번호(T20240902-0007 형태)처럼 일련번호가 긴 경우 줄바꿈 방지 */
.nd-content.nd-content .notice-table .col-no     { width: 180px; white-space: nowrap; }
.nd-content.nd-content .notice-table .col-title  {
    text-align: left;
    padding-left: 20px;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nd-content.nd-content .notice-table .col-writer { width: 140px; }
.nd-content.nd-content .notice-table .col-date   { width: 120px; }
.nd-content.nd-content .notice-table .col-views  { width: 90px; }
.nd-content.nd-content .notice-table .col-category { width: 140px; }
.nd-content.nd-content .notice-table .col-file     { width: 100px; text-align: center; }
.nd-content.nd-content .notice-table .col-file img { display: inline-block; }

/* 제목 컬럼: 헤더("제목")는 가운데 정렬, 본문 제목은 좌측정렬 유지 — notice-table 공통 규칙 */
.nd-content.nd-content .notice-table th.col-title { text-align: center; }

.nd-content.nd-content .notice-table__link {
    color: var(--color-text);
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.nd-content.nd-content .notice-table__link:hover { color: var(--color-primary); text-decoration: underline; }

@media (max-width: 767px) {
    .nd-content.nd-content .notice-filter .list-filter__input { max-width: none; }
    /* 모바일: 표가 화면 밖으로 나가지 않도록 고정 레이아웃 + 부가 컬럼 숨김 */
    .nd-content.nd-content .notice-table { table-layout: fixed; }
    .nd-content.nd-content .notice-table .col-writer,
    .nd-content.nd-content .notice-table .col-views,
    .nd-content.nd-content .notice-table .col-category,
    .nd-content.nd-content .notice-table .col-file { display: none; }
    .nd-content.nd-content .notice-table th,
    .nd-content.nd-content .notice-table td { font-size: 12px; height: 44px; padding: 0 6px; }
    .nd-content.nd-content .notice-table .col-num  { width: 44px; }
    .nd-content.nd-content .notice-table .col-no   { width: 110px; }
    .nd-content.nd-content .notice-table .col-date { width: 82px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .notice-table .col-writer { width: 110px; }
    .nd-content.nd-content .notice-table .col-date   { width: 100px; }
}

/* ────────────────────────────────────────
   정책연구 목록 페이지 (policy-research.html)
   ──────────────────────────────────────── */

.nd-content.nd-content .notice-table .col-category { width: 120px; }
.nd-content.nd-content .notice-table .col-file     { width: 100px; }

.nd-content.nd-content .archive-card {
    display: flex;
    gap: 32px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 28px;
}

.nd-content.nd-content .archive-card__thumb {
    flex: 0 0 140px;
}

.nd-content.nd-content .archive-card__thumb img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--color-line-light);
}

.nd-content.nd-content .archive-card__body {
    min-width: 0;
}

.nd-content.nd-content .archive-card__badge {
    color: var(--color-primary);
    margin-right: 4px;
}

.nd-content.nd-content .archive-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-content.nd-content .archive-card__meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #334155;
}

.nd-content.nd-content .archive-card__meta-label {
    min-width: 70px;
    color: #64748B;
    font-weight: 500;
}

.nd-content.nd-content .archive-card__file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nd-content.nd-content .archive-card__actions {
    margin-top: auto;
}

.nd-content.nd-content .archive-card__actions .post-detail__file-btn {
    padding-top: 14px;
}

.nd-content.nd-content .archive-card__actions .post-detail__file-btn img,
.nd-content.nd-content .archive-card__actions .post-detail__file-btn span {
    margin-top: -4px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .notice-table .col-category,
    .nd-content.nd-content .notice-table .col-file { display: none; }

    .nd-content.nd-content .archive-card { flex-direction: column; padding: 20px; }
    .nd-content.nd-content .archive-card__thumb { width: 120px; }
}

/* ────────────────────────────────────────
   공지사항 상세 페이지 (notice-detail.html)
   ──────────────────────────────────────── */

.nd-content.nd-content .post-detail {
    width: 100%;
    border-top: 3px solid var(--color-primary);
}

.nd-content.nd-content .post-detail__title {
    min-height: 72px;
    border-bottom: 1px solid var(--color-line);
    padding: 0px 30px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.42;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.nd-content.nd-content .post-detail__meta {
    display: flex;
    border-bottom: 1px solid var(--color-line);
}

.nd-content.nd-content .post-detail__meta-item {
    flex: 1 1 0;
    min-height: 60px;
    padding: 14px 30px;
}

.nd-content.nd-content .post-detail__meta-item + .post-detail__meta-item {
    border-left: 1px solid var(--color-line-light);
}

.nd-content.nd-content .post-detail__meta-label {
    flex: 0 0 auto;
    min-width: 60px;
}

.nd-content.nd-content .post-detail__file {
    min-height: 72px;
    padding: 14px 30px;
    border-bottom: 1px solid var(--color-line);
}

.nd-content.nd-content .post-detail__file-info {
    min-width: 0;
}

.nd-content.nd-content .post-detail__file-icon { flex: 0 0 auto; }

.nd-content.nd-content .post-detail__file-name {
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
    font-family: var(--font);
}

.nd-content.nd-content .post-detail__file-name:hover { color: var(--color-primary); text-decoration: underline; }

.nd-content.nd-content .post-detail__file-actions {
    flex: 0 0 auto;
}

/* 나머지 모양(테두리/배경/hover)은 공용 .ext-link-btn 재사용, 이 자리만 살짝 더 큰 크기 사용 */
.nd-content.nd-content .post-detail__file-btn {
    padding: 10px 20px;
    font-size: 15px;
    cursor: pointer;
}
/* 아이콘이 인라인 svg가 아니라 <img>(색이 파일에 고정)라 stroke 재정의가 안 먹혀서 필터로 흰색 처리 */
.nd-content.nd-content .post-detail__file-btn:hover img { filter: brightness(0) invert(1); }

.nd-content.nd-content .post-detail__body {
    padding: 40px 30px;
    border-bottom: 1px solid var(--color-line);
}

.nd-content.nd-content .post-detail__body-img {
    max-width: 100%;
    height: auto;
}

/* CMS 리치텍스트 본문 — CMS 에디터로 작성한 HTML(글 + 이미지)이 렌더링되는 영역.
   [Backend] ${article.content} 등 CMS 응답을 이 컨테이너 안에 그대로 출력 */
.nd-content.nd-content .post-detail__content {
    width: 100%;
    max-width: 820px;
    text-align: left;
    color: #1E293B;
    font-size: 16px;
    line-height: 1.8;
    word-break: keep-all;
}

.nd-content.nd-content .post-detail__content > *:first-child { margin-top: 0; }
.nd-content.nd-content .post-detail__content > *:last-child  { margin-bottom: 0; }

.nd-content.nd-content .post-detail__content p { margin: 0 0 16px; }

.nd-content.nd-content .post-detail__content h3 {
    margin: 40px 0 14px;
    font-size: 21px;
    font-weight: 700;
    color: var(--color-text);
}

.nd-content.nd-content .post-detail__content h4 {
    margin: 34px 0 12px;
    font-size: 19px;
    font-weight: 500;
    color: var(--color-text);
}

.nd-content.nd-content .post-detail__content h5 {
    margin: 24px 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
}

.nd-content.nd-content .post-detail__content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 22px auto;
    border-radius: 8px;
}

/* 에디터가 삽입한 유튜브 등 영상 임베드(.con_movie > div > iframe) — 게시물마다
   iframe에 박힌 고정 width/height가 제각각이라 16:9 반응형으로 강제 통일 */
.nd-content.nd-content .post-detail__content .con_movie {
    max-width: 100%;
    margin: 22px auto;
}

.nd-content.nd-content .post-detail__content .con_movie > div {
    padding-top: 56.25%;
    height: 0;
    position: relative;
}

.nd-content.nd-content .post-detail__content .con_movie > div iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
}

.nd-content.nd-content .post-detail__content ul,
.nd-content.nd-content .post-detail__content ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.nd-content.nd-content .post-detail__content li { margin: 6px 0; }

.nd-content.nd-content .post-detail__content a {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.nd-content.nd-content .post-detail__content blockquote {
    margin: 20px 0;
    padding: 14px 18px;
    border-left: 4px solid var(--color-primary-hover);
    background: #F1F5F9;
    color: #334155;
}

.nd-content.nd-content .post-detail__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

.nd-content.nd-content .post-detail__content th,
.nd-content.nd-content .post-detail__content td {
    border: 1px solid var(--color-line);
    padding: 10px 12px;
    text-align: left;
}

.nd-content.nd-content .post-detail__content th {
    background: #F8FAFC;
    font-weight: 700;
}

.nd-content.nd-content .post-detail-actions {
    margin-top: 45px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .post-detail__title { padding: 14px 16px; font-size: 16px; }
    .nd-content.nd-content .post-detail__meta { flex-direction: column; }
    .nd-content.nd-content .post-detail__meta-item { padding: 12px 16px; min-height: 48px; }
    .nd-content.nd-content .post-detail__meta-item + .post-detail__meta-item { border-left: none; border-top: 1px solid var(--color-line-light); }
    .nd-content.nd-content .post-detail__file { padding: 14px 16px; }
    .nd-content.nd-content .post-detail__file-actions { width: 100%; }
    .nd-content.nd-content .post-detail__file-btn { flex: 1 1 0; justify-content: center;
    color: var(--color-primary);
    font-family: var(--font);
}
    .nd-content.nd-content .post-detail__body { padding: 24px 16px; }
    .nd-content.nd-content .post-detail__content { font-size: 15px; line-height: 1.75; }
    .nd-content.nd-content .post-detail__content h3 { font-size: 19px; }
    .nd-content.nd-content .post-detail__content h4 { font-size: 17px; }
    .nd-content.nd-content .post-detail__content h5 { font-size: 16px; }
    .nd-content.nd-content .post-detail-actions { margin-top: 30px; }
}

/* ────────────────────────────────────────
   자료실 상세 페이지 (정책연구·발행자료·서식자료)
   — 목록 상단의 대표자료 카드 스타일 재사용 + 상세 설명 박스
   (policy-research-detail / publications-detail / forms-data-detail)
   ──────────────────────────────────────── */

/* 상단 카드: 제목 아래 구분선 추가 */
.nd-content.nd-content .data-detail__feature .archive-card__title {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-line);
}

/* 상세 설명 박스 */
.nd-content.nd-content .data-detail__desc {
    margin-top: 24px;
    padding: 40px;
    background: #F8FAFC;
    border: 1px solid var(--color-line-light);
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.9;
    color: #334155;
}

.nd-content.nd-content .data-detail__desc p { margin: 0 0 20px; }
.nd-content.nd-content .data-detail__desc p:last-child { margin-bottom: 0; }

/* ${resultMap.CN}(CKEditor 원문)이 이 박스에 그대로 출력되므로, 구디자인 시절
   클래스명(table_A 등)이 섞여 있어도 태그 기준으로 일관되게 스타일이 입혀지도록
   .post-detail__content와 동일한 범위로 커버 */
.nd-content.nd-content .data-detail__desc h3 {
    margin: 32px 0 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--color-text);
}

.nd-content.nd-content .data-detail__desc h4 {
    margin: 28px 0 12px;
    font-size: 17px;
    font-weight: 500;
    color: var(--color-text);
}

.nd-content.nd-content .data-detail__desc h5 {
    margin: 20px 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.nd-content.nd-content .data-detail__desc img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    border-radius: 8px;
}

.nd-content.nd-content .data-detail__desc .con_movie {
    max-width: 100%;
    margin: 20px auto;
}

.nd-content.nd-content .data-detail__desc .con_movie > div {
    padding-top: 56.25%;
    height: 0;
    position: relative;
}

.nd-content.nd-content .data-detail__desc .con_movie > div iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
}

.nd-content.nd-content .data-detail__desc ul,
.nd-content.nd-content .data-detail__desc ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.nd-content.nd-content .data-detail__desc li { margin: 6px 0; }

.nd-content.nd-content .data-detail__desc a {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.nd-content.nd-content .data-detail__desc blockquote {
    margin: 20px 0;
    padding: 14px 18px;
    border-left: 4px solid var(--color-primary-hover);
    background: #FFFFFF;
    color: #334155;
}

.nd-content.nd-content .data-detail__desc table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

.nd-content.nd-content .data-detail__desc th,
.nd-content.nd-content .data-detail__desc td {
    border: 1px solid var(--color-line);
    padding: 10px 12px;
    text-align: left;
}

.nd-content.nd-content .data-detail__desc th {
    background: #FFFFFF;
    font-weight: 700;
}

.nd-content.nd-content .data-detail__desc-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
}

@media (max-width: 767px) {
    .nd-content.nd-content .data-detail__desc { padding: 24px 16px; font-size: 14px; }
    .nd-content.nd-content .data-detail__desc h3 { font-size: 17px; }
    .nd-content.nd-content .data-detail__desc h4 { font-size: 16px; }
    .nd-content.nd-content .data-detail__desc h5 { font-size: 15px; }
}

/* ────────────────────────────────────────
   세무 상담사례 상세 (tax-counsel-cases-detail.html) /
   쉼터 기초상담 상세 (shelter-counsel-detail.html)
   — 공통 클래스 재사용 + 페이지 전용 조정
   (브레드크럼 아래 파란선 제거·여백 축소, 제목 아래 회색선 제거)
   [수정: shelter-counsel-detail.html의 <main>이 tax-counsel-cases-detail
    클래스를 잘못 물려받고 있었음 — 자기 이름으로 바로잡고(각각 tccd/scd로 축약),
    기존 시각 출력은 유지하도록 선택자만 그룹으로 묶음. 이 오버라이드가
    shelter-counsel-detail.html에도 실제로 필요한 디자인인지는 별도 확인 필요.]
   ──────────────────────────────────────── */
.nd-content.nd-content .tccd .post-detail,
.nd-content.nd-content .scd .post-detail { border-top: none; }
.nd-content.nd-content .tccd .breadcrumb__inner,
.nd-content.nd-content .scd .breadcrumb__inner { padding-bottom: 10px; }
.nd-content.nd-content .tccd .post-detail__title,
.nd-content.nd-content .scd .post-detail__title {
    border-bottom: none;
    min-height: auto;
    padding-top: 30px;
    padding-bottom: 14px;
}

/* ────────────────────────────────────────
   노동자상담 신청하기 페이지 (worker-counsel-apply.html)
   ──────────────────────────────────────── */

.nd-content.nd-content .counsel-apply-wrap {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-bottom: 30px;
}

/* ── 동의 박스 ── */
.nd-content.nd-content .counsel-agree-box {
    padding: 30px 50px;
    display: flex;
    align-items: center;
    gap: 50px;
}

.nd-content.nd-content .counsel-agree-img {
    width: 158px;
    height: 158px;
    overflow: hidden;
}

.nd-content.nd-content .counsel-agree-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nd-content.nd-content .counsel-agree-radios {
    padding-top: 4px;
}

/* ── 섹션 구조 ── */

.nd-content.nd-content .counsel-required-note {
    font-size: 15px;
}

/* ── 폼 테이블 ── */
.nd-content.nd-content .counsel-form-table {
    width: 100%;
}

.nd-content.nd-content .counsel-form-row {
    display: flex;
    align-items: stretch;
    min-height: 72px;
}

.nd-content.nd-content .counsel-form-row--auto {
    min-height: auto;
}

/* ── 레이블 (스타일은 .counsel-form-label 공용 규칙 참조) ── */

.nd-content.nd-content .counsel-form-label--top {
    align-items: flex-start;
    padding-top: 20px;
}

/* 2열 행의 오른쪽 레이블 */
.nd-content.nd-content .counsel-form-divider {
    width: 180px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 500;
    border-left: 1px solid var(--color-line);
    line-height: 1.5;
    color: var(--color-text);
}

/* ── 필드 셀 ── */
.nd-content.nd-content .counsel-form-field {
    padding: 0 20px;
    min-width: 0;
}

.nd-content.nd-content .counsel-form-field--col {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px;
}


/* 상담 날짜/시간 필드: 캘린더 상하 여백 확보 */
.nd-content.nd-content .counsel-form-field--datetime {
    padding-top: 28px;
    padding-bottom: 28px;
}

.nd-content.nd-content .counsel-form-field--top {
    align-items: flex-start;
    padding-top: 18px;
    padding-bottom: 18px;
}

.nd-content.nd-content .counsel-form-field--compact {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* 두 컬럼 행 */
.nd-content.nd-content .counsel-form-field--half {
    min-width: 0;
    padding: 14px 20px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .counsel-form-field--half { padding: 12px 16px; width: 100%; }
}

/* ── 입력 컴포넌트: 테두리/반경/배경은 공용 .field_box 재사용 ── */
.nd-content.nd-content .counsel-input {
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    color: var(--color-text);
    box-sizing: border-box;
}

.nd-content.nd-content .counsel-input::placeholder { color: #94A3B8; }

.nd-content.nd-content .counsel-input--name   { width: 180px; }
.nd-content.nd-content .counsel-input--phone  { width: 100px; text-align: center; }
.nd-content.nd-content .counsel-input--email-local  { width: 140px; }
.nd-content.nd-content .counsel-input--email-domain {
    min-width: 120px;
    max-width: 200px;
}
.nd-content.nd-content .counsel-input--full {
    min-width: 0;
}

/* ── 선택 컴포넌트: 테두리/반경/배경은 공용 .field_box 재사용 ── */
.nd-content.nd-content .counsel-select {
    height: 48px;
    padding: 0 36px 0 16px;
    font-size: 15px;
    color: var(--color-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23172554' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
}

.nd-content.nd-content .counsel-select--phone { min-width: 90px; padding-right: 30px; }
.nd-content.nd-content .counsel-select--mid   { min-width: 160px; }
.nd-content.nd-content .counsel-select--email { min-width: 140px; }

/* ── 라디오 ── */
.nd-content.nd-content .counsel-radio-group {
    display: flex;
    align-items: center;
    gap: 10px 40px;
    flex-wrap: wrap;
    padding: 16px 0;
}

/* .radio_inp/.radio_inp__circle 공용 규칙 사용 (24px 기본 크기) */

/* ── 체크박스 ── */
.nd-content.nd-content .counsel-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 16px 0;
}

/* 항목이 길거나 세로로 한 줄씩 나열해야 보기 편한 경우(예: 컨설팅 신청 사항) */
.nd-content.nd-content .counsel-checkbox-group--col {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 12px 0;
}

/* .chk_inp 공용 규칙 사용 (18px → .chk_inp--sm), flex-shrink 필요하면 input에 shrink-0 */

/* CacheCommboUtil의 getRadioStrAttrDisabled/getCheckboxStrAttrDisabled 등은
   완성된 HTML 문자열(.form-check/.form-check-input/.form-check-label, 구디자인
   부트스트랩 클래스)을 그대로 반환해서 마크업 자체는 바꿀 수 없다 — 실제 DB
   코드값·checked/disabled 로직을 그대로 쓰기 위해 헬퍼는 유지하고, 색상/폰트만
   새 디자인 톤에 맞게 재스킨한다. 라디오는 새 디자인의 커스텀 동그라미
   인디케이터(.radio_inp__circle)까지는 재현 못하고, 네이티브 라디오를
   강조색으로 스타일링하는 선에서 절충. */
.nd-content.nd-content .counsel-radio-group .form-check,
.nd-content.nd-content .counsel-checkbox-group .form-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nd-content.nd-content .counsel-radio-group .form-check-input,
.nd-content.nd-content .counsel-checkbox-group .form-check-input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.nd-content.nd-content .counsel-radio-group .form-check-label,
.nd-content.nd-content .counsel-checkbox-group .form-check-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
}

/* ── 전화번호/이메일 그룹 ── */

/* ── 필드 노트 ── */

/* ── 텍스트에어리어 ── */
.nd-content.nd-content .counsel-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: 0;
    font-size: 15px;
    font-family: var(--font);
    color: var(--color-text);
    background: #fff;
    resize: none;
    outline: none;
    line-height: 1.7;
    box-sizing: border-box;
}

.nd-content.nd-content .counsel-textarea:focus { border-color: var(--color-primary); }
.nd-content.nd-content .counsel-textarea::placeholder { color: #94A3B8; }
.nd-content.nd-content .counsel-textarea--sm { font-size: 13px; }

.nd-content.nd-content .counsel-textarea-count {
    text-align: right;
    font-size: 14px;
    color: var(--color-text);
    font-family: var(--font);
    padding-top: 4px;
}

/* textarea 하단: 안내문(좌) + 글자수(우) 한 줄 배치 */
.nd-content.nd-content .counsel-textarea-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}
.nd-content.nd-content .counsel-textarea-foot .counsel-textarea-note { flex: 1; }
.nd-content.nd-content .counsel-textarea-foot .counsel-textarea-count { padding-top: 0; white-space: nowrap; }
@media (max-width: 767px) {
    .nd-content.nd-content .counsel-textarea-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
    .nd-content.nd-content .counsel-textarea-foot .counsel-textarea-count { align-self: flex-end; }
}

/* ── 하단 버튼 ── */
.nd-content.nd-content .counsel-apply-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .counsel-agree-box { flex-direction: column; padding: 20px; gap: 20px; }
    .nd-content.nd-content .counsel-agree-img { width: 100px; height: 100px; }

    .nd-content.nd-content .counsel-form-row { flex-direction: column; min-height: auto; }
    .nd-content.nd-content .counsel-form-row--auto { flex-direction: column; }
    .nd-content.nd-content .counsel-form-label { width: 100%; border-bottom: 1px solid var(--color-line); border-right: none; min-height: 48px; }
    .nd-content.nd-content .counsel-form-divider { width: 100%; border-left: none; border-top: 1px solid var(--color-line); min-height: 48px; }
    .nd-content.nd-content .counsel-form-field { padding: 12px 16px; }
    .nd-content.nd-content .counsel-form-field--col { padding: 12px 16px; }

    .nd-content.nd-content .counsel-input--name { width: 100%; }
    .nd-content.nd-content .counsel-input--email-local { width: 110px; }
    .nd-content.nd-content .counsel-input--email-domain { max-width: 140px; }

    .nd-content.nd-content .counsel-radio-group { gap: 16px; }
    .nd-content.nd-content .counsel-checkbox-group { gap: 8px 12px; }

    .nd-content.nd-content .counsel-apply-actions { flex-direction: column; align-items: center; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .counsel-agree-box { padding: 24px 30px; gap: 30px; }
    .nd-content.nd-content .counsel-agree-img { width: 120px; height: 120px; }

    .nd-content.nd-content .counsel-form-label { width: 150px; }
    .nd-content.nd-content .counsel-form-divider { width: 150px; }
    .nd-content.nd-content .counsel-select--mid { min-width: 130px; }
}

/* ────────────────────────────────────────
   자주묻는 질문(FAQ) 페이지 (faq.html)
   ──────────────────────────────────────── */

/* 콘텐츠 래퍼 */

.nd-content.nd-content .faq-content__inner {
    gap: 32px;
}

/* ── 카테고리 탭 ──
   스타일은 공용 .tab-box 재사용. 2행 그리드라 아래쪽 행만 위쪽 테두리를 지워
   위 행의 아래 테두리와 겹치지 않게 한다. */
.nd-content.nd-content .faq-categories__row:last-child .tab-box {
    border-top: none;
}

/* faq 검색 select 너비 */
.nd-content.nd-content .faq-search__select { width: 110px; }

/* ── FAQ 목록 ── */

.nd-content.nd-content .faq-list__wrap {
    border-top: 3px solid var(--color-primary);
}

/* ── FAQ 개별 항목 ── */
.nd-content.nd-content .faq-item__header {
    width: 100%;
    min-height: 52px;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--color-line);
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.nd-content.nd-content .faq-item__header:hover {
    background: #F8FAFC;
}

.nd-content.nd-content .faq-item.is-open > .faq-item__header {
    background: #fff;
}

/* 카테고리 뱃지 + 질문 텍스트 공통 */

/* 카테고리 뱃지 */
.nd-content.nd-content .faq-item__cat {
    width: 100px;
    text-align: center;
    padding: 12px 10px;
    align-self: stretch;
    border-right: 1px solid var(--color-line);
    background: var(--color-primary);
    color: #fff;
}

/* 질문 텍스트 */
.nd-content.nd-content .faq-item__question {
    padding: 0 16px;
    align-self: stretch;
}

.nd-content.nd-content .faq-item.is-open > .faq-item__header .faq-item__question {
    color: #F97316;
}

/* 토글 버튼 */
.nd-content.nd-content .faq-item__toggle {
    width: 60px;
    align-self: stretch;
    border-left: 1px solid var(--color-line);
    position: relative;
}

/* 닫힌 상태 토글 원형 */
.nd-content.nd-content .faq-item:not(.is-open) .faq-item__toggle::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E9E9E9;
}

/* 원 색상 전환 */
.nd-content.nd-content .faq-item__toggle::before {
    transition: background-color 0.3s ease;
}

/* 열린 상태 토글 원형 */
.nd-content.nd-content .faq-item.is-open .faq-item__toggle::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #99B9FF;
}

/* 아이콘 공통: 절대 배치 + 전환 */
.nd-content.nd-content .faq-item__toggle svg {
    position: absolute;
    z-index: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 닫힌 상태: + 표시, - 숨김(오른쪽 방향으로 대기) */
.nd-content.nd-content .faq-item .icon-plus  { opacity: 1; transform: rotate(0deg); }
.nd-content.nd-content .faq-item .icon-minus { opacity: 0; transform: rotate(90deg); }

/* 열린 상태: + 왼쪽으로 사라지고, - 회전해서 등장 */
.nd-content.nd-content .faq-item.is-open .icon-plus  { opacity: 0; transform: rotate(-90deg); }
.nd-content.nd-content .faq-item.is-open .icon-minus { opacity: 1; transform: rotate(0deg); }

/* ── 답변 박스 ── */
.nd-content.nd-content .faq-item__answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    background: #EFF6FF;
    border-bottom: 0px solid var(--color-line);
    transition: max-height 0.35s ease, padding 0.35s ease, border-bottom-width 0.35s ease;
}

.nd-content.nd-content .faq-item.is-open .faq-item__answer {
    max-height: 600px;
    padding: 24px 20px;
    border-bottom-width: 1px;
}

/* 검색결과 없음은 공통 .list-empty-msg 사용, 하단 구분선만 스코프 추가 */
.nd-content.nd-content .faq-list__wrap .list-empty-msg { border-bottom: 1px solid var(--color-line); }

.nd-content.nd-content .faq-item__answer p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}

/* ── 페이지네이션 ── */
.nd-content.nd-content .faq-pagination {
    padding: 40px 0;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .faq-content__inner { gap: 20px; }

    .nd-content.nd-content .faq-item__cat {
        width: 64px;
    }
    .nd-content.nd-content .faq-item__question {
        padding: 0 8px;
    }
    .nd-content.nd-content .faq-item__toggle   { width: 44px; }
    .nd-content.nd-content .faq-item__answer p { font-size: 12px; }
    .nd-content.nd-content .faq-item.is-open .faq-item__answer { padding: 16px 12px; }
}

/* ────────────────────────────────────────
   찾아가는 교육신청 목록 (visit-edu-list.html)
   ──────────────────────────────────────── */

/* vedu 필터 select 너비 */
.nd-content.nd-content .edu-filter__select { width: 150px; }

/* 목록 */

.nd-content.nd-content .edu-list__grid-wrap {
    padding-top: 20px;
    border-top: 3px solid var(--color-primary);
}

.nd-content.nd-content .edu-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

/* 카드: 반경/테두리는 공용 .card + .card_r18 재사용 */
.nd-content.nd-content .edu-card {
    min-width: 0;
    max-width: calc(50% - 10px);
    padding: 20px 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    cursor: pointer;
    transition: box-shadow 0.2s;
    text-decoration: none;
}

.nd-content.nd-content .edu-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }

.nd-content.nd-content .edu-card--featured {
    border: none;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.20);
}

.nd-content.nd-content .edu-card--featured:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.28); }

/* 뱃지 */
.nd-content.nd-content .edu-card__badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nd-content.nd-content .status_badge {
    height: 38px;
    padding: 0 20px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    white-space: nowrap;
}

.nd-content.nd-content .status_badge_open   { background: #F9841A; color: #fff; font-weight: 500; }
.nd-content.nd-content .status_badge_closed { background: #334155; color: #fff; font-weight: 500; }
.nd-content.nd-content .status_badge_org {
    border: 1px solid #93C5FD;
    font-weight: 400;
}

/* 카드 본문 */
.nd-content.nd-content .edu-card__title-bar {
    height: 54px;
    padding: 0 20px;
    background: #F1F5F9;
}

.nd-content.nd-content .edu-card__title {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 정보 목록 */
.nd-content.nd-content .edu-card__info {
    list-style: none;
    margin: 0;
    padding: 14px;
}

.nd-content.nd-content .edu-card__info-item {
    font-size: 15px;
    line-height: 1.6;
}

.nd-content.nd-content .edu-card__info-item::before {
    content: '·';
    flex-shrink: 0;
    margin-right: 5px;
}

.nd-content.nd-content .edu-card__info-label {
    color: var(--color-primary);
    font-weight: 500;
    margin-right: 4px;
}

/* 페이지네이션 */
.nd-content.nd-content .edu-pagination {
    padding: 50px 0;
}

@media (max-width: 767px) {
    .nd-content.nd-content .edu-row { flex-direction: column; }
    .nd-content.nd-content .edu-card { padding: 16px 20px; gap: 14px; }
    /* 좁은 화면에서 상태/기관 뱃지가 한 줄에 안 들어가면 줄바꿈 */
    .nd-content.nd-content .edu-card__badges { flex-wrap: wrap; }
    .nd-content.nd-content .status_badge { font-size: 14px; height: 32px; padding: 0 14px; }
    .nd-content.nd-content .status_badge_org { max-width: 100%; }
    .nd-content.nd-content .edu-card__title { font-size: 15px; }
    .nd-content.nd-content .edu-card__info-item { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .edu-filter__select { width: 120px; }
    .nd-content.nd-content .edu-card { padding: 18px 22px; gap: 16px; }
    .nd-content.nd-content .edu-card__title { font-size: 16px; }
    .nd-content.nd-content .edu-card__info-item { font-size: 14px; }
    .nd-content.nd-content .edu-card__title-bar { height: 48px; }
}

/* ────────────────────────────────────────
   방문상담예약 신청이력 (visitCounselDetail)
   ──────────────────────────────────────── */

/* 체크박스 읽기전용: 시각은 유지하고 인터랙션만 차단 */
.nd-content.nd-content .counsel-detail .chk_inp {
    pointer-events: none;
    cursor: default;
}

/* 버튼: rental-cancel-btn / rental-submit-btn 기존 크기 그대로 사용 */
.nd-content.nd-content .form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .form-actions { flex-direction: column; gap: 10px; }
}

/* ────────────────────────────────────────
   찾아가는 교육신청 상세 (visit-edu-detail.html)
   ──────────────────────────────────────── */

.nd-content.nd-content .edu-detail-content { padding-top: 10px; }

/* 상세 카드 */
.nd-content.nd-content .edu-detail-card {
    border: 1px solid var(--color-primary);
    padding: 30px;
    display: flex;
    align-items: stretch;
    gap: 20px;
}

/* 썸네일 — Labor_education.svg 자체에 배경·텍스트·일러스트 포함 */
.nd-content.nd-content .edu-detail-card__thumb {
    line-height: 0;
}

.nd-content.nd-content .edu-detail-card__thumb-img {
    width: 260px;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* 정보 영역 */
.nd-content.nd-content .edu-detail-card__info {
    min-width: 0;
}

/* 제목 줄바꿈 허용 */
.nd-content.nd-content .edu-card__title--wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}


/* 교육내용 섹션 헤더 */
.nd-content.nd-content .edu-detail-section__header {
    margin-bottom: 12px;
}

.nd-content.nd-content .edu-detail-section__bullet {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 5px solid #F87171;
    box-sizing: border-box;
}

/* 교육내용 본문 영역 */
.nd-content.nd-content .edu-detail-section__body {
    background: #F1F5F9;
    padding: 30px;
}

.nd-content.nd-content .edu-detail-section__text-wrap {
    padding: 16px;
}

/* 첨부파일 */

/* 강사 정보 — 배정 강사 유무 안내 (visitEduApplyHistory) */

.nd-content.nd-content .edu-instructor__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-content.nd-content .edu-instructor__item {
    padding: 16px;
    background: #fff;
}

.nd-content.nd-content .file-attachment {
    min-width: 0;
    /* flex 아이템으로서 부모보다 넓어지지 않도록 */
    max-width: 100%;
    padding: 16px;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
}

.nd-content.nd-content .file-attachment:hover { background: #F8FAFC; }

.nd-content.nd-content .file-attachment--plain { padding: 0; background: transparent; }
.nd-content.nd-content .file-attachment--plain:hover { background: transparent; }

.nd-content.nd-content .file-attachment svg { flex-shrink: 0; }

.nd-content.nd-content .file-attachment__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
}

/* 목록 버튼 */
.nd-content.nd-content .edu-list-btn-wrap {
    padding-bottom: 20px;
}

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .edu-detail-card { flex-direction: column; padding: 20px; }
    .nd-content.nd-content .edu-detail-card__thumb-img { width: 100%; }
    .nd-content.nd-content .edu-detail-section__body { padding: 16px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .edu-detail-card__thumb-img { width: 220px; }
}

/* ====================================================================
   찾아가는 교육 신청내역 조회 (visitEduApplyList)
   기본 표/페이지네이션은 공용 규칙 재사용
   ==================================================================== */

.nd-content.nd-content .edu-apply-table .col-num    { width: 90px; }
.nd-content.nd-content .edu-apply-table .col-title  { text-align: left; padding-left: 20px; }
.nd-content.nd-content .edu-apply-table .col-select { width: 130px; }
.nd-content.nd-content .edu-apply-table .col-done   { width: 140px; }
.nd-content.nd-content .edu-apply-table .col-period { width: 210px; }

.nd-content.nd-content .edu-apply-table__link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.nd-content.nd-content .edu-apply-table__link:hover { text-decoration: underline; }

/* 선정여부 / 교육완료여부 배지는 공용 .badge(+ --outline/--outline-primary) 사용 */
.nd-content.nd-content .edu-apply-table .badge { min-width: 78px; }

@media (max-width: 767px) {
    .nd-content.nd-content .edu-apply-table { table-layout: fixed; }
    .nd-content.nd-content .edu-apply-table th,
    .nd-content.nd-content .edu-apply-table td { font-size: 12px; height: 48px; padding: 0 6px; }
    .nd-content.nd-content .edu-apply-table .col-title {
        padding-left: 8px;
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .nd-content.nd-content .edu-apply-table .col-period { display: none; }
    .nd-content.nd-content .edu-apply-table .col-num    { width: 40px; }
    .nd-content.nd-content .edu-apply-table .col-select { width: 78px; }
    .nd-content.nd-content .edu-apply-table .col-done   { width: 84px; }
    .nd-content.nd-content .edu-apply-table .badge { min-width: 60px; height: 28px; font-size: 11px; padding: 0 8px; }
}

/* ====================================================================
   찾아가는 교육신청 폼 (visitEduApply)
   ==================================================================== */

/* 소속기관 입력 */
.nd-content.nd-content .edu-input--org { width: 240px; }

/* 수강인원 입력 */
.nd-content.nd-content .edu-input--count { width: 180px; }

/* 날짜/시간 입력 */
.nd-content.nd-content .edu-date-input {
    min-width: 200px;
    padding-right: 44px;
    cursor: pointer;
}

.nd-content.nd-content .edu-time-input {
    min-width: 180px;
    padding-right: 44px;
    cursor: pointer;
}

/* 교육시간 그룹 (시작 - 종료) */
.nd-content.nd-content .edu-time-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .edu-time-group { flex-wrap: wrap; }
    .nd-content.nd-content .edu-date-input,
    .nd-content.nd-content .edu-time-input { min-width: 0; flex: 1; }
    .nd-content.nd-content .edu-input--org,
    .nd-content.nd-content .edu-input--count { width: 100%; }
}

/* ── 날짜 선택 팝업 ── */
.nd-content.nd-content .edu-datepick-popup {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 16px;
    min-width: 280px;
}

/* ── 시간 선택 팝업 ── */
.nd-content.nd-content .edu-timepick-popup {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 220px;
    overflow-y: auto;
    min-width: 180px;
    padding: 6px 0;
}

.nd-content.nd-content .edu-timepick-item {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
}

.nd-content.nd-content .edu-timepick-item:hover { background: #F1F5F9; }

.nd-content.nd-content .edu-timepick-item.is-selected {
    background: #EFF6FF;
    color: var(--color-primary);
    font-weight: 600;
}

/* ────────────────────────────────────────
   홍보영상 목록 (promo-video-list.html)
   ──────────────────────────────────────── */

/* 검색 필터 */
/* pvideo 필터 select 너비 */
.nd-content.nd-content .pvl-filter__select--center { width: 200px; }
.nd-content.nd-content .pvl-filter__select--type   { width: 120px; }
/* pvideo 입력창 최대 너비 */
.nd-content.nd-content .pvl-filter .list-filter__input { max-width: 460px; }

/* 목록 영역 */

/* 그리드 */
/* 행 */
.nd-content.nd-content .pvl-row {
    display: flex;
    gap: 30px;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    margin-bottom: -1px;
    padding: 30px 0;
}

.nd-content.nd-content .pvl-row:first-child {
    border-top: 3px solid var(--color-primary);
}

/* 카드 */
.nd-content.nd-content .pvl-card {
    width: calc((100% - 60px) / 3);
    display: flex;
    flex-direction: column;
    gap: 20px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.nd-content.nd-content .pvl-card:hover { opacity: 0.82; }

/* 썸네일: css/common.css의 .video_thumb 공용 컴포넌트 사용(재생 아이콘 오버레이 등).
   목업은 .video_thumb_0~8 CSS 패턴을 썼지만, 실제 데이터는 THUMB_IMG_PATH 이미지가
   있으므로 그 안에 <img class="pvl-card__img">로 채운다. */
.nd-content.nd-content .pvl-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 텍스트 영역 */

.nd-content.nd-content .pvl-card__desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nd-content.nd-content .pvl-card__meta {
    padding: 10px 0;
}

.nd-content.nd-content .pvl-card__meta-item {
    font-size: 14px;
    color: #64748B;
    line-height: 1.6;
}

/* 검색결과 없음 */
.nd-content.nd-content .list-empty-msg {
    text-align: center;
    color: #64748B;
    padding: 60px 0;
    font-size: 14px;
}

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .pvl-filter .list-filter__input { max-width: 100%; }

    .nd-content.nd-content .pvl-row {
        flex-direction: column;
        gap: 24px;
        padding: 20px 0;
    }

    .nd-content.nd-content .pvl-card { gap: 14px; }
    .nd-content.nd-content .pvl-card__desc  { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .pvl-filter__select--center { width: 160px; }
    .nd-content.nd-content .pvl-filter__select--type   { width: 100px; }

    .nd-content.nd-content .pvl-row { gap: 20px; }
    .nd-content.nd-content .pvl-card__desc  { font-size: 14px; }
}

/* ============================================================
   중소사업주 컨설팅 신청 (consulting-apply.html)
   ============================================================ */

.nd-content.nd-content .consulting-card {
    background: #fff;
    padding: 50px 60px;
}

.nd-content.nd-content .consulting-card__illustration {
    width: 160px;
    padding-top: 4px;
}

.nd-content.nd-content .consulting-card__illustration img {
    width: 100%;
    height: auto;
}

.nd-content.nd-content .consulting-card__body {
    display: flex;
    flex-direction: column;
    gap: 36px;
    min-width: 0;
    padding: 0 40px;
}

/* ── 안내 정보 목록 ── */

.nd-content.nd-content .consulting-info-item {
    padding: 0 16px;
    min-height: 52px;
    background: #F1F5F9;
}

.nd-content.nd-content .consulting-info-item--tall {
    align-items: center;
    min-height: 68px;
}

.nd-content.nd-content .consulting-info-icon {
    width: 32px;
    height: 32px;
}

.nd-content.nd-content .consulting-info-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── 폼 ── */

.nd-content.nd-content .consulting-biz-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 테두리/반경/배경/포커스는 공용 .input_box 재사용, 이 폼만 살짝 더 큰 높이/여백 사용 */
.nd-content.nd-content .consulting-input-wrap {
    height: 54px;
    padding: 0 22px;
}

.nd-content.nd-content .consulting-biz-row .consulting-input-wrap {
    flex: 1;
    min-width: 0;   /* 입력칸이 줄어들어 조회 버튼을 밀어내지 않도록 */
}

.nd-content.nd-content .consulting-input-wrap__icon {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.nd-content.nd-content .consulting-input-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: var(--font);
    color: var(--color-text);
    background: transparent;
}

.nd-content.nd-content .consulting-input-wrap input::placeholder {
    color: #94A3B8;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .consulting-card {
        flex-direction: column;
        align-items: center;
        padding: 28px 20px;
        gap: 24px;
    }

    .nd-content.nd-content .consulting-card__illustration { width: 120px; }
    /* 세로 배치 시 본문이 좌우 패딩(80px)으로 카드를 넘겨 삐져나오는 문제 해결 */
    .nd-content.nd-content .consulting-card__body { width: 100%; align-self: stretch; padding: 0; gap: 24px; }

    /* 탭 내용 글자: 줄 간격 넓히고 크기 살짝 축소 (답답함 완화) */
    /* 넓어진 줄 간격에 맞춰 안내 항목 세로 여유 확보 */
    .nd-content.nd-content .consulting-info-item        { min-height: 56px; padding: 10px 16px; }
    .nd-content.nd-content .consulting-info-item--tall  { min-height: 74px; }

    /* 사업자등록번호 조회 버튼을 입력란 아래로 배치 */
    .nd-content.nd-content .consulting-biz-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .nd-content.nd-content .consulting-biz-row .consulting-input-wrap { flex: none; }  /* 세로 배치 시 높이 유지 */
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .consulting-card {
        padding: 40px 40px;
        gap: 28px;
    }

    .nd-content.nd-content .consulting-card__illustration { width: 140px; }
}

/* ────────────────────────────────────────
   중소사업주 컨설팅 신청 내역 조회 (탭2)
   ──────────────────────────────────────── */
.nd-content.nd-content .consulting-inquiry-card {
    flex-direction: row-reverse;
}

.nd-content.nd-content .consulting-inquiry-btns {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .consulting-inquiry-card { flex-direction: column; align-items: center; }
    .nd-content.nd-content .consulting-inquiry-btns { flex-direction: column; }
}

/* ────────────────────────────────────────
   중소사업주 컨설팅 동의서 페이지
   ──────────────────────────────────────── */

/* ── 버튼 영역 ── */
.nd-content.nd-content .consulting-agree-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 8px;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .consulting-agree-btns   { flex-direction: column; align-items: center; }
}

/* ────────────────────────────────────────
   중소사업주 컨설팅 신청서 작성 (consulting-apply-form.html)
   ──────────────────────────────────────── */

/* 읽기 전용 정적 값 */

/* 입력 너비 변형 */
.nd-content.nd-content .caf-input--xs   { width: 60px; text-align: center; }
.nd-content.nd-content .caf-input--date { width: 180px; }
.nd-content.nd-content .caf-input--md   { width: 240px; }
.nd-content.nd-content .caf-input--xl   { width: 500px; }

/* 선택 너비 고정 */
.nd-content.nd-content .caf-select--md  { width: 160px; }

/* 텍스트에어리어 높이 */
.nd-content.nd-content .caf-textarea { height: 140px; }

/* 달력 팝업 래퍼 */
.nd-content.nd-content .caf-datepicker-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nd-content.nd-content .caf-datepicker-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* 달력 열기 버튼 */
.nd-content.nd-content .caf-date-btn {
    width: 42px;
    height: 42px;
    background: #DBEAFE;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nd-content.nd-content .caf-date-btn:hover { background: #BFDBFE; }

/* 파일 첨부 트리거 버튼 (input처럼 보이는 버튼) */
/* 테두리/반경/배경은 공용 .field_box 재사용 */
.nd-content.nd-content .caf-file-trigger {
    width: 300px;
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    color: #94A3B8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.nd-content.nd-content .caf-file-trigger.has-file { color: var(--color-text); }
.nd-content.nd-content .caf-file-input { display: none; }

/* 화상상담 첨부파일 (caf-file-trigger 재사용 + 컴팩트 변형) */
.nd-content.nd-content .caf-file-trigger--compact {
    width: auto;
    padding: 0 22px;
    justify-content: center;
    color: #475569;
}
.nd-content.nd-content .video-counsel-file-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.nd-content.nd-content .video-counsel-file-list__item {
    font-size: 14px;
}
.nd-content.nd-content .video-counsel-file-list__remove {
    border: none;
    background: none;
    color: #EF4444;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

/* 인라인 텍스트 구분자 */

/* 컨설팅 신청 사항 체크박스 컬럼 */
.nd-content.nd-content .caf-check-col {
    padding: 4px 0;
    width: 100%;
}

/* .chk_inp.chk_inp--lg 공용 규칙 사용 (22px), 텍스트 크기는 .dot_body_sm */

/* 법정의무교육 하위 선택지 */
.nd-content.nd-content .caf-check-sub {
    display: flex;
    gap: 24px;
    padding-left: 32px;
    flex-wrap: wrap;
}

/* 신청 사항 안내 문구 */

/* 세로 여백이 필요한 필드 셀 */
.nd-content.nd-content .caf-field--padded {
    padding-top: 16px;
    padding-bottom: 16px;
    align-items: flex-start;
}

/* 필드 우측 안내 문구 */

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .caf-input--xl    { width: 100%; }
    .nd-content.nd-content .caf-file-trigger { width: 100%; max-width: 300px;
    font-family: var(--font);
    color: #94A3B8;
}
    .nd-content.nd-content .caf-check-sub    { padding-left: 0; flex-direction: column; gap: 12px; }
    .nd-content.nd-content .caf-select--md   { width: 120px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .caf-input--xl  { max-width: 400px; width: 100%; }
    .nd-content.nd-content .caf-select--md { width: 130px; }
}

/* ────────────────────────────────────────
   지원기관 상세페이지 공용 컴포넌트
   (gangbuk-labor-rights / gig-worker-station / working-mom-support /
    worker-shelter-intro / worker-shelter / taeil-memorial / elderly-care-workers 공유)
   ──────────────────────────────────────── */

/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title */

/* 브레드크럼 + 위젯 컨테이너 */
.nd-content.nd-content .nav-area {
    position: relative;
}

/* 본문 콘텐츠 */

.nd-content.nd-content .detail__inner {
    padding-top: 5px;
    gap: 24px;
}

/* 대표 이미지 + 소개 카드 (이미지 하단에 정보 카드가 겹치는 통일 레이아웃) */
.nd-content.nd-content .profile {
    position: relative;
}

.nd-content.nd-content .profile__media {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
}

.nd-content.nd-content .profile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nd-content.nd-content .profile__card {
    position: relative;
    margin: -80px 32px 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding: 28px 32px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 0 22px rgba(15, 23, 42, 0.28), 0 6px 14px rgba(15, 23, 42, 0.05);
}

.nd-content.nd-content .profile__intro {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

.nd-content.nd-content .profile__info {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding-left: 32px;
    border-left: 1px solid var(--color-line);
}

.nd-content.nd-content .profile__info li img {
    width: 20px;
    height: 20px;
}

.nd-content.nd-content .profile__info li span {
    font-size: 14px;
    color: var(--color-text);
}

/* 기관 소개 텍스트 */

/* 주요 프로그램 */

.nd-content.nd-content .programs__list {
    padding: 0 4px;
    list-style: none;
    margin: 0;
}

/* 지도 + 정보 테이블 wrapper (gap 없이 붙임) */
/* 지도 영역 */
.nd-content.nd-content .map {
    width: 100%;
    height: 360px;
    border: 1px solid var(--color-line);
    overflow: hidden;
}

.nd-content.nd-content .map__placeholder {
    width: 100%;
    height: 100%;
    background: #F8FAFC;
    color: #94A3B8;
    font-size: 14px;
}

.nd-content.nd-content .map__placeholder svg {
    opacity: 0.4;
}

/* 기관 정보 테이블은 공통 .table_label/.table_value 사용 */

.nd-content.nd-content .info__link {
    text-decoration: none;
}

.nd-content.nd-content .info__link:hover {
    color: #1e40af;
}

.nd-content.nd-content .info__link-icon {
    display: inline-block;
    vertical-align: middle;
}

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .detail__inner { padding-top: 0px; gap: 18px; }

    .nd-content.nd-content .profile__media { height: 170px; }
    .nd-content.nd-content .profile__card {
        margin: -50px 12px 0;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
    }
    .nd-content.nd-content .profile__intro { flex: 0 1 auto; }
    .nd-content.nd-content .profile__info {
        width: 100%;
        padding-left: 0;
        padding-top: 16px;
        border-left: none;
        border-top: 1px solid var(--color-line);
    }

    .nd-content.nd-content .map { height: 240px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .profile__media { height: 230px; }
    .nd-content.nd-content .profile__card { margin-top: -65px; }
}

/* ========================================================
   서울시노동자종합지원기관 (slc)
   ======================================================== */

/* 히어로 → .sub-hero / .sub-hero__inner / .sub-hero__title */

/* 본문 래퍼 */

.nd-content.nd-content .support-agency-content__inner {
    gap: 40px;
}

/* 섹션 */

/* 섹션 설명 문구 */

/* 문의 안내 바 */
.nd-content.nd-content .support-agency-inquiry {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    background: #EFF6FF;
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 14px;
    line-height: 1.5;
}

@media (min-width: 1200px) {
    .nd-content.nd-content .support-agency-inquiry { font-size: 15px; }
}

.nd-content.nd-content .support-agency-inquiry__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--color-primary-hover);
}

.nd-content.nd-content .support-agency-inquiry__label::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary-hover);
}

.nd-content.nd-content .support-agency-inquiry__text a {
    color: var(--color-primary-hover);
    text-decoration: none;
}

/* 2열 그리드 */
.nd-content.nd-content .support-agency-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .nd-content.nd-content .support-agency-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 카드 */
.nd-content.nd-content .support-agency-card {
    background: #fff;
    overflow: hidden;
}

.nd-content.nd-content .support-agency-card__header {
    padding: 0 20px;
    min-height: 70px;
    border-bottom: 1px solid #CADDFF;
}

@media (min-width: 1200px) {
    .nd-content.nd-content .support-agency-card__header { min-height: 80px; padding: 0 20px; }
}

.nd-content.nd-content .support-agency-card__icon {
    width: 28px;
    height: auto;
}

@media (min-width: 1200px) {
    .nd-content.nd-content .support-agency-card__icon { width: 34px; }
}

.nd-content.nd-content .support-agency-card__body {
    padding: 18px 20px;
}

@media (min-width: 1200px) {
    .nd-content.nd-content .support-agency-card__body { padding: 20px; }
}

.nd-content.nd-content .support-agency-card__list {
    list-style: disc;
    margin: 0;
    padding: 0 0 0 18px;
}

.nd-content.nd-content .support-agency-card__list li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.nd-content.nd-content .support-agency-card__list li a {
    color: var(--color-primary-hover);
    text-decoration: none;
}

@media (min-width: 1200px) {
    .nd-content.nd-content .support-agency-card__list li { font-size: 16px; }
}

/* ════════════════════════════════════════════
   마을노무사, 노동권리 보호관 (vla)
   ════════════════════════════════════════════ */

/* ── 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title ── */

/* ── 패널 컨테이너 → .content-inner .content-inner--top 조합으로 대체
      (기존 padding-top:6px 규칙이 이 shorthand 뒤에 와서 무효화되던 버그도 함께 해소) ── */


/* ── 섹션 ── */

/* ── 운영방법 아이템 목록 ── */

.nd-content.nd-content .vla-item__indent {
    padding-left: 1.2em;
}

/* ── 안내 문구 ── */

/* ── 외부 링크 버튼 영역 ── */

/* 마을세무사 액션 버튼 → .ext-link-btn .ext-link-btn--fixed */

/* ── 반응형 ── */
@media (max-width: 767px) {
    .nd-content.nd-content .ext-link-btn--fixed { width: 100%; max-width: 340px; font-size: 16px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .ext-link-btn--fixed { width: 300px; }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .ext-link-btn--fixed { width: 320px; height: 72px; }
}

/* ────────────────────────────────────────
   休서울노동자쉼터 소개 페이지 (worker-shelter-intro.html)
   ──────────────────────────────────────── */

/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title--sm */

/* 브레드크럼 + 바로가기 메뉴 컨테이너 */
/* 본문 콘텐츠 */

/* 섹션 */

/* 텍스트 */

/* 지원기준 */

/* 지원절차 플로우 (1행) */
.nd-content.nd-content .proc-flow {
    overflow-x: auto;
    padding-bottom: 4px;
}

/* 테두리/반경/정렬은 공용 .step_box 재사용 */
.nd-content.nd-content .proc-flow__item {
    min-width: 90px;
    padding: 14px 10px;
    background: #fff;
    position: relative;
}

.nd-content.nd-content .proc-flow__item--dual {
    gap: 10px;
}

.nd-content.nd-content .proc-flow__item--tall {
    padding-top: 48px;
    padding-bottom: 48px;
    gap: 18px;
}

.nd-content.nd-content .proc-flow__dual-cell {
    width: 100%;
}

.nd-content.nd-content .proc-flow__icon {
    width: 60px;
    height: 60px;
}

.nd-content.nd-content .proc-flow__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nd-content.nd-content .proc-flow__icon--lg {
    width: 50px;
    height: 50px;
}

.nd-content.nd-content .proc-flow__icon--lg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 빨간 강조 안내 문구 */

/* 노동권리 보호관: 캡션 2줄인 3번째 박스만 아이콘을 아래로 보정 */
.nd-content.nd-content .lrp .proc-flow__item:nth-child(5) .proc-flow__icon {
    margin-top: 28px;
}

.nd-content.nd-content .proc-flow__arrow {
    align-self: center;
    position: relative;
    z-index: 1;
    margin-left: -12px;
    margin-right: -12px;
}

.nd-content.nd-content .proc-flow > .proc-flow__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 30px;
    background: #fff;
}

.nd-content.nd-content .proc-flow__arrow + .proc-flow__item::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 30px;
    background: #fff;
}

@media (min-width: 1200px) {
    .nd-content.nd-content .proc-flow__icon { width: 70px; height: 70px; }
    .nd-content.nd-content .proc-flow__icon--lg { width: 58px; height: 58px; }
    .nd-content.nd-content .proc-flow__item { min-width: 120px; }
}

.nd-content.nd-content .wsin-table td {
    line-height: 1.6;
    vertical-align: middle;
    word-break: keep-all;
}

@media (max-width: 767px) {
    .nd-content.nd-content .proc-flow__icon { width: 48px; height: 48px; }
    .nd-content.nd-content .proc-flow__icon--lg { width: 44px; height: 44px; }
    .nd-content.nd-content .proc-flow__item { padding: 10px 6px; min-width: 120px; }
    }

/* ========================================================
   아름다운청년 전태일기념관 (jtm)
   ======================================================== */

/* 본문 콘텐츠 래퍼 */

/* 페이지 소개 */

/* 시설 소개 섹션 */

.nd-content.nd-content .taeil-memorial-facility__content {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.nd-content.nd-content .taeil-memorial-facility__img {
    width: 320px;
    height: 260px;
    display: block;
    object-fit: cover;
}

/* 층별 안내 */
.nd-content.nd-content .taeil-memorial-facility__floors {
    height: 260px;
    padding: 6px 20px;
    border: 1px solid #99B9FF;
    box-sizing: border-box;
}

.nd-content.nd-content .taeil-memorial-floor {
    min-height: 0;
}

/* 층수 배지는 공용 .badge(+ --primary) 사용, 고정폭만 스코프 */
.nd-content.nd-content .taeil-memorial-facility__floors .badge {
    width: 120px;
    height: 28px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .taeil-memorial-facility__content { flex-direction: column; }
    .nd-content.nd-content .taeil-memorial-facility__img { width: 100%; }
    .nd-content.nd-content .taeil-memorial-facility__floors .badge { width: 80px; font-size: 13px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .taeil-memorial-facility__img { width: 260px; }
    .nd-content.nd-content .taeil-memorial-facility__floors .badge { width: 100px; }
}

/* ────────────────────────────────────────
   감정노동 종사자 권리보호 페이지 (el)
   ──────────────────────────────────────── */

/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title */

/* 탭 버튼 영역 */
.nd-content.nd-content .el-tabs-wrap {
    position: relative;
}

.nd-content.nd-content .el-tabs-toggle {
    display: none;
    font-family: var(--font);
}

.nd-content.nd-content .el-tabs {
    display: flex;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad-sm);
    overflow-x: auto;
}

@media (min-width: 880px) {
    .nd-content.nd-content .el-tabs { padding: 0 var(--container-pad-md); overflow-x: visible; }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .el-tabs { padding: 0 var(--container-pad-lg); }
}

/* .tab-box.tab-box--sm 공용 규칙 사용 */

@media (max-width: 879px) {
    .nd-content.nd-content .el-tabs-wrap {
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0 var(--container-pad-sm);
        position: relative;
        z-index: 20;
    }

    /* ── 드롭다운 토글 버튼 ── */
    .nd-content.nd-content .el-tabs-toggle {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    background: #fff;
    color: #3f5486;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    transition: border-radius .2s ease, box-shadow .2s ease;
}

    /* 열렸을 때: 아래 패널과 이어지도록 하단을 각지게 + 그림자 제거 */
    .nd-content.nd-content .el-tabs-wrap.is-open .el-tabs-toggle {
        border-radius: 12px 12px 0 0;
        box-shadow: none;
    }

    /* 토글 라벨: 현재 탭 이름 */
    .nd-content.nd-content .el-tabs-toggle__text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 쉐브론 아이콘 */
    .nd-content.nd-content .el-tabs-toggle__icon {
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        border-right: 2px solid #3f5486;
        border-bottom: 2px solid #3f5486;
        transform: rotate(45deg);
        margin-top: -5px;
        transition: transform .22s ease, margin-top .22s ease;
    }
    .nd-content.nd-content .el-tabs-wrap.is-open .el-tabs-toggle__icon {
        transform: rotate(225deg);
        margin-top: 4px;
    }

    /* ── 드롭다운 패널 (문서 흐름에 포함 → 열리면 아래 콘텐츠가 밀림) ── */
    .nd-content.nd-content .el-tabs {
        position: static;
        max-width: none;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0 6px;
        overflow: hidden;
        border: 1px solid transparent;
        border-top: none;
        border-radius: 0 0 12px 12px;
        background: #fff;
        box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
        /* 닫힘 상태: 높이 0으로 접힘 */
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        transition: max-height .28s ease, opacity .2s ease, padding .28s ease, border-color .28s ease;
    }

    .nd-content.nd-content .el-tabs-wrap.is-open .el-tabs {
        max-height: 460px;
        opacity: 1;
        padding: 6px;
        border-color: var(--color-primary);
        pointer-events: auto;
    }

    /* ── 드롭다운 항목: .tab-box 공용 규칙을 이 컨텍스트에서만 덮어씀 ── */
    .nd-content.nd-content .el-tabs .tab-box {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 46px;
        height: auto;
        justify-content: flex-start;
        padding: 8px 16px;
        border: none;
        border-radius: 8px;
        font-size: 14.5px;
        font-weight: 400;
        color: #334155;
        text-align: left;
        white-space: normal;
        word-break: keep-all;
        transition: background .15s ease, color .15s ease;
    }
    .nd-content.nd-content .el-tabs .tab-box:first-child { border: none; }

    .nd-content.nd-content .el-tabs .tab-box:not(.is-active):hover { background: #F1F5F9; }

    .nd-content.nd-content .el-tabs .tab-box.is-active {
        background: #EFF6FF;
        color: #3f5486;
        font-weight: 500;
        border: none;
    }
}

/* 패널 컨테이너 */
.nd-content.nd-content .el-panels {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad-sm);
}

@media (min-width: 768px) {
    .nd-content.nd-content .el-panels { padding: 0 var(--container-pad-md); }
}

@media (min-width: 1200px) {
    .nd-content.nd-content .el-panels { padding: 0 var(--container-pad-lg); }
}


/* 정의 섹션 */

/* 정보 박스 (아이콘 + 설명) */
.nd-content.nd-content .el-info-box {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid var(--color-line);
}

/* CTA 버튼 */

/* 감정노동 CTA → .ext-link-btn .ext-link-btn--lg */

/* 직군 카드 그리드 */
.nd-content.nd-content .el-job-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.nd-content.nd-content .el-job-card {
    padding: 24px 20px;
    border-radius: 12px;
    text-align: center;
}

.nd-content.nd-content .el-job-card__img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.nd-content.nd-content .el-solo-job__desc {
    padding-left: 22px;
}

.nd-content.nd-content .el-solo-job__note {
    font-size: 13px;
    font-weight: 400;
    color: #EF4444;
    line-height: 1.6;
    padding-left: 22px;
}

/* 감정노동 원인 카드 레이아웃 */
.nd-content.nd-content .el-cause-cards {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.nd-content.nd-content .el-cause-card {
    padding: 24px 12px;
}

.nd-content.nd-content .el-cause-card--narrow {
    flex: 0 0 auto;
    width: 90px;
}

.nd-content.nd-content .el-cause-card__icon img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.nd-content.nd-content .el-cause-card__pills {
    width: 100%;
    padding-top: 14px;
}

.nd-content.nd-content .el-cause-pill {
    width: 100%;
    min-height: 54px;
    padding: 8px 10px;
    background: #F1F5F9;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 1.55;
    box-sizing: border-box;
}

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .el-info-box { flex-direction: column; align-items: flex-start; padding: 16px; }
    .nd-content.nd-content .ext-link-btn--lg { font-size: 14px; height: 52px; padding: 0 20px; }
    .nd-content.nd-content .el-job-cards { grid-template-columns: repeat(2, 1fr); }
    .nd-content.nd-content .el-cause-cards { flex-direction: column; }
    .nd-content.nd-content .el-cause-card--narrow { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .el-job-cards { grid-template-columns: repeat(2, 1fr); }
    .nd-content.nd-content .el-cause-card--narrow { width: 72px; }
    .nd-content.nd-content .el-cause-pill { font-size: 13px; }
}

/* ============================================================
   감정노동 원인 패널 — 법령·Q&A·조례 섹션
   ============================================================ */

/* 법령 섹션 */

.nd-content.nd-content .el-law-box {
    padding: 20px 24px;
    border: 1px solid var(--color-line);
}

/* Q&A 아코디언 섹션: 스타일은 공용 .faq-list__wrap 재사용 */

/* 관련법 Q&A: 열린 상태 원형 배경색 */
.nd-content.nd-content .el-qa-section .faq-item.is-open .faq-item__toggle::before {
    background: rgb(153, 185, 255);
}

/* 관련법 Q&A: 열린 상태 내부 기호 흰색 */
.nd-content.nd-content .el-qa-section .faq-item.is-open .icon-minus line {
    stroke: white;
}

/* 조례 현황 섹션 */

.nd-content.nd-content .el-impact-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-line);
    min-height: 80px;
}

.nd-content.nd-content .el-impact-label {
    width: 130px;
    text-align: center;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    padding: 16px 8px;
}

.nd-content.nd-content .el-impact-label--right {
    border-left: 1px solid var(--color-line);
}

.nd-content.nd-content .el-impact-content {
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

.nd-content.nd-content .el-health-bullet {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 4px solid #F87171;
    box-sizing: border-box;
}

.nd-content.nd-content .el-health-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .el-impact-row { flex-wrap: wrap; }
    .nd-content.nd-content .el-impact-label { width: 100%; }
    .nd-content.nd-content .el-impact-label--right { border-left: none; border-top: 1px solid var(--color-line); }
    .nd-content.nd-content .el-health-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   감정노동 현황 패널 (charts: 목업)
   ============================================================ */

.nd-content.nd-content .el-status-notes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nd-content.nd-content .el-status-notes li {
    font-size: 13px;
    font-weight: 400;
    color: #64748B;
    line-height: 1.7;
}

/* 차트 그리드 */
.nd-content.nd-content .el-status-charts {
    display: grid;
    gap: 16px;
}

.nd-content.nd-content .el-status-charts--2 {
    grid-template-columns: repeat(2, 1fr);
}

.nd-content.nd-content .el-status-charts--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 차트 카드(테두리 박스) */
.nd-content.nd-content .el-chart-card {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--color-line-light);
    border-radius: 6px;
    background: #fff;
    /* 그리드 트랙이 차트(SVG) 내부 콘텐츠 크기 이하로 줄어들 수 있도록 허용.
       (min-width:auto 기본값이면 창을 좁힐 때 Highcharts SVG가 축소되지 않아 가로 넘침 발생) */
    min-width: 0;
}

/* Highcharts 렌더 컨테이너 */
.nd-content.nd-content .el-chart {
    width: 100%;
    height: 320px;
    min-width: 0;
    overflow: hidden; /* 리플로우 지연 중 SVG가 잠깐 넘쳐도 레이아웃을 밀지 않도록 */

    /* ── 차트 색상 팔레트 ──
       계열/포인트에 부여한 시맨틱 클래스(.el-c--*)로 색을 지정하므로
       데이터 순서가 바뀌어도 색이 어긋나지 않습니다(순서 의존 제거).
       색을 바꾸려면 아래 팔레트 변수만 수정하세요. */
    --el-blue:   #7CB5EC;
    --el-orange: #F7A35C;
    --el-green:  rgb(145, 209, 106);
    --el-blue2:  rgb(73, 147, 255);
    --el-gray:   #B0B7C3;

    /* OS 다크모드에서도 항상 라이트 테마로 고정 (배경/그리드/텍스트 중립색) */
    --highcharts-background-color: #ffffff;
    --highcharts-neutral-color-100: #000000;
    --highcharts-neutral-color-80: #333333;
    --highcharts-neutral-color-60: #666666;
    --highcharts-neutral-color-40: #999999;
    --highcharts-neutral-color-20: #cccccc;
    --highcharts-neutral-color-10: #e6e6e6;
    --highcharts-neutral-color-5: #f2f2f2;
    --highcharts-neutral-color-3: #f7f7f7;
}

.nd-content.nd-content .el-status-charts--4 .el-chart {
    height: 300px;
}

/* 4단 차트 카드: 제목/단위/햄버거가 위로 붙도록 상단 여백 축소 */
.nd-content.nd-content .el-status-charts--4 .el-chart-card {
    padding-top: 6px;
}

.nd-content.nd-content .el-chart .highcharts-title {
    font-size: 15px;
    font-weight: 500;
    fill: var(--color-text);
}

/* 좁은 4단 차트: 제목이 햄버거 버튼과 겹치지 않도록 축소 + 좌측 정렬(JS) */
.nd-content.nd-content .el-status-charts--4 .el-chart .highcharts-title {
    font-size: 13px;
}

.nd-content.nd-content .el-chart .highcharts-subtitle {
    font-size: 11px;
    fill: #94A3B8;
}

.nd-content.nd-content .el-chart .highcharts-axis-labels text {
    fill: #64748B;
}

/* 꺾은선(spline) 마커 테두리 */
.nd-content.nd-content .el-chart .highcharts-markers .highcharts-point {
    stroke: #fff;
}

/* ── 시맨틱 색상 클래스 → 팔레트 매핑 ──
   차트 계열/포인트에 부여한 .el-c--* 클래스에 색을 연결합니다.
   컬럼은 fill, 꺾은선은 stroke가 적용됩니다(값 순서와 무관).
   색상 그룹만 옮기면 특정 항목 색을 바꿀 수 있습니다. */
.nd-content.nd-content .el-chart .el-c--employed,   /* 취업자수 */
.nd-content.nd-content .el-chart .el-c--regular,    /* 상용직 */
.nd-content.nd-content .el-chart .el-c--male,       /* 남성 */
.nd-content.nd-content .el-chart .el-c--direct,     /* 직영 */
.nd-content.nd-content .el-chart .el-c--approved,   /* 승인건수 */
.nd-content.nd-content .el-chart .el-c--stress-m {  /* 스트레스 고위험군(남) */
    fill: var(--el-blue);
    stroke: var(--el-blue);
}

.nd-content.nd-content .el-chart .el-c--emotional,  /* 감정노동자수(선) */
.nd-content.nd-content .el-chart .el-c--temp,       /* 임시·일용직 */
.nd-content.nd-content .el-chart .el-c--female,     /* 여성 */
.nd-content.nd-content .el-chart .el-c--partner,    /* 협력사 */
.nd-content.nd-content .el-chart .el-c--consign,    /* 위탁 */
.nd-content.nd-content .el-chart .el-c--applied,    /* 신청건수 */
.nd-content.nd-content .el-chart .el-c--stress-f {  /* 스트레스 고위험군(여) */
    fill: var(--el-orange);
    stroke: var(--el-orange);
}

.nd-content.nd-content .el-chart .el-c--service,        /* 서비스종사(월평균) */
.nd-content.nd-content .el-chart .el-c--mixed,          /* 혼합 */
.nd-content.nd-content .el-chart .el-c--approval-rate,  /* 승인율(선) */
.nd-content.nd-content .el-chart .el-c--depress-general {  /* 우울증 유병률(일반) */
    fill: var(--el-green);
    stroke: var(--el-green);
}

.nd-content.nd-content .el-chart .el-c--depress-emotional {  /* 우울증 유병률(감정노동자) */
    fill: var(--el-blue2);
    stroke: var(--el-blue2);
}

.nd-content.nd-content .el-chart .el-c--suicide {  /* 자살고위험군 비교 */
    fill: var(--el-gray);
    stroke: var(--el-gray);
}

/* 하단 안내 콜아웃(파란 박스) */
.nd-content.nd-content .el-status-callout {
    padding: 18px 20px;
    background: #EFF6FF;
    border-radius: 8px;
}

.nd-content.nd-content .el-status-callout__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
}

.nd-content.nd-content .el-status-callout__icon img {
    width: 100%;
    height: 100%;
}

@media (max-width: 1023px) {
    .nd-content.nd-content .el-status-charts--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .nd-content.nd-content .el-status-charts--2,
    .nd-content.nd-content .el-status-charts--4 { grid-template-columns: 1fr; }
    .nd-content.nd-content .el-chart,
    .nd-content.nd-content .el-status-charts--4 .el-chart { height: 280px; }
}

/* ============================================================
   실천약속 패널
   ============================================================ */

/* 실천 약속 목록 */

.nd-content.nd-content .el-promise-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nd-content.nd-content .el-promise-item {
    height: 64px;
    padding: 0 24px;
    background: #EFF6FF;
    border-radius: 8px;
    overflow: hidden;
}

/* 강성민원 단계별 대응 절차 */

.nd-content.nd-content .el-procedure-steps {
    display: flex;
    align-items: center;
    gap: 0;
}

/* 테두리/반경/정렬은 공용 .step_box 재사용 */
.nd-content.nd-content .el-procedure-step {
    padding: 24px 16px;
    min-width: 0;
}

.nd-content.nd-content .el-procedure-step__arrow {
    margin: 0 -10px;
    padding: 0 2px;
    background: #fff;
    z-index: 1;
}

.nd-content.nd-content .el-procedure-step__icon {
    width: 64px;
    height: 64px;
}

.nd-content.nd-content .el-procedure-step__icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.nd-content.nd-content .el-procedure-step__badge {
    width: 100%;
    height: 28px;
    background: #F1F5F9;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1;
}

@media (max-width: 767px) {
    .nd-content.nd-content .el-procedure-steps {
        flex-direction: column;
        gap: 8px;
    }
    .nd-content.nd-content .el-procedure-step__arrow {
        transform: rotate(90deg);
        margin: -6px 0;
    }
    .nd-content.nd-content .el-promise-item {
        height: auto;
        padding: 14px 18px;
    }
}

/* ────────────────────────────────────────
   서울시어르신돌봄종사자 종합지원센터 (ecw)
   ──────────────────────────────────────── */

/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title */

/* 본문 */

.nd-content.nd-content .ecw-content__inner {
    gap: 40px;
}

/* 페이지 소개 — elderly-care-workers/working-mom-support/living-wage-support/seg/seoul-gangso-support 공용 */

/* 지역센터 표(어르신돌봄/직장맘 공용): 라벨·값 칸은 공통 .table_label/.table_value 사용 */
.nd-content.nd-content .table_link {
    color: #1D4ED8;
    text-decoration: underline;
    font-family: var(--font);
    margin-right: 8px;
}

.nd-content.nd-content .table_link:hover { color: #1e40af; }

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .ecw-content__inner { gap: 28px; }
}

/* ────────────────────────────────────────
   서울시직장맘지원센터 페이지 (working-mom-support.html)
   ──────────────────────────────────────── */

/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title */

/* 본문 */

.nd-content.nd-content .wms-content__inner {
    gap: 40px;
}

/* 지역센터 표 스타일은 어르신돌봄 섹션의 공용 규칙 참조 */

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .wms-content__inner { gap: 28px; }
}

/* ────────────────────────────────────────
   위드유 서울직장성희롱성폭력예방센터 페이지 (with-you-center.html)
   ──────────────────────────────────────── */

/* 히어로 배너 */
/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title */

/* 본문 콘텐츠 */

.nd-content.nd-content .harassment-prevention-content__inner {
    gap: 48px;
}

/* 섹션 타이틀 */
.nd-content.nd-content .harassment-prevention-section__title {
    margin-bottom: 20px;
    line-height: 1.4;
}

/* 블록: 성희롱 정의·예방 섹션 */

/* 예방 조치 설명 */
.nd-content.nd-content .wyc-prevent-desc {
    font-size: 15px;
    line-height: 1.7;
    margin-left: 30px;
    margin-top: 10px;
}

.nd-content.nd-content .wyc-prevent-desc .wyc-fine {
    color: #EF4444;
    font-weight: 500;
}

/* 테이블 (성립요건 / 조치 의무): 라벨·값 칸은 공통 .table_label_wide/.table_value 사용 */
.nd-content.nd-content .harassment-prevention-table { margin-top: 10px; }

/* 직장 내 괴롭힘 금지 — 조문확인 버튼 위치 (본문 텍스트와 좌측 정렬) */
.nd-content.nd-content .harassment-prevention-btns {
    margin-top: 12px;
    margin-left: 30px;
}

/* 직장 내 괴롭힘 금지 — 과태료 강조 문구 두께 */

/* 직장 내 괴롭힘 금지 — 본문 파란 강조어 (색상만, 두께는 일반) */

/* 성희롱 유형 카드 */
.nd-content.nd-content .wyc-type-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.nd-content.nd-content .wyc-type-card {
    padding: 28px 24px;
}

.nd-content.nd-content .wyc-type-card__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nd-content.nd-content .wyc-type-card__desc {
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    width: 100%;
}

.nd-content.nd-content .wyc-type-card__desc li {
    list-style: disc;
    margin-left: 16px;
    margin-bottom: 4px;
}

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .harassment-prevention-content__inner { gap: 32px; }
    .nd-content.nd-content .wyc-type-cards { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
    .nd-content.nd-content .wyc-type-cards { grid-template-columns: repeat(3, 1fr); }
}

/* ────────────────────────────────────────
   서울형 생활입원비지원 (slw)
   ──────────────────────────────────────── */

/* 인트로 — 스타일은 .ecw-intro / .contact-box 공용 규칙 참조 */

/* 섹션 */

/* 하위 섹션 */

.nd-content.nd-content .section-block + .section-block {
    border-top: 1px solid var(--color-line-light);
    padding-top: 20px;
}

.nd-content.nd-content .rate-history-table__cell {
    padding: 18px 20px;
}

/* 2026년 강조 행 */
.nd-content.nd-content .rate-history-table__row--highlight .rate-history-table__cell {
    color: var(--color-primary);
    font-weight: 500;
}

/* 레이블형 테이블(추진현황)의 라벨 칸은 공통 .table_label_center 사용 */

/* 안내 문구 */

/* ────────────────────────────────────────
   서울형 이음공제
   ──────────────────────────────────────── */
.nd-content.nd-content .seg-content {
    padding-bottom: 60px;
}

.nd-content.nd-content .seg-content__inner {
    gap: 40px;
    padding-top: 6px;
}

/* 인트로 — 스타일은 .ecw-intro / .contact-box 공용 규칙 참조 (contact-label만 font-weight:700 별도) */

/* 섹션 공통 */

/* 본문 머리셀 (조건·내용·금액) */
.nd-content.nd-content .seg-table__td--head {
    background: #F8FAFC;
    font-weight: 500;
}

/* 3개 카드 */
.nd-content.nd-content .seg-cards {
    display: flex;
    gap: 18px;
}

.nd-content.nd-content .seg-card {
    padding: 30px 20px;
}

.nd-content.nd-content .seg-card__icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* 안내 문구 */

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .seg-cards {
        flex-direction: column;
    }
}

/* ────────────────────────────────────────
   서울형 강소기업 지원 (gangso)
   ──────────────────────────────────────── */

/* 인트로 — 스타일은 .ecw-intro / .contact-box 공용 규칙 참조 */

/* 섹션 */

/* 사업개요 항목 목록 */

.nd-content.nd-content .sgs-item__body {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* 링크 버튼 (외부 링크 스타일) */
/* 강소기업 링크 버튼 → .ext-link-btn .ext-link-btn--md */

/* 안내 문구 */

/* 하단 버튼 그룹 */
.nd-content.nd-content .sub-bottom-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 하단 이동 버튼 → .ext-link-btn .ext-link-btn--xl */

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .sgs-item__body { flex-direction: column; gap: 10px; }
    .nd-content.nd-content .ext-link-btn--md { white-space: normal; }
    .nd-content.nd-content .sub-bottom-btns { flex-direction: column; align-items: stretch; }
    .nd-content.nd-content .ext-link-btn--xl { min-height: 60px; font-size: 15px; padding: 14px 20px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .ext-link-btn--xl { font-size: 16px; padding: 0 20px; }
}

/* ────────────────────────────────────────
   무료 노동법률상담 (free-legal-counsel)
   ──────────────────────────────────────── */

/* 레이아웃 → .content-inner .sub-content .content-inner--top 조합으로 대체 */

.nd-content.nd-content .flc-page-title {
    margin-bottom: 8px;
    line-height: 1.4;
}

.nd-content.nd-content .flc-btn-group {
    margin-top: 4px;
}

/* 무료상담/컨설팅 링크 버튼 → .ext-link-btn */

.nd-content.nd-content .flc-divider {
    border: none;
    border-top: 1px solid var(--color-line-light);
    margin: 0;
}

.nd-content.nd-content .flc-section-title {
    line-height: 1.4;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-primary);
}

/* 무료상담 도구 버튼 → .ext-link-btn .ext-link-btn--block */

/* ─────────────────────────────────────────
   노동권리보호관 권리구제지원
   ─────────────────────────────────────────── */
/* 레이아웃 → .content-inner .sub-content .content-inner--top 조합으로 대체 */

.nd-content.nd-content .rights-protection-intro-links {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.nd-content.nd-content .rights-protection-intro-links li {
    font-size: 14px;
    color: #334155;
    line-height: 1.7;
}

.nd-content.nd-content .rights-protection-intro-links a {
    color: var(--color-primary);
    text-decoration: none;
}

.nd-content.nd-content .rights-protection-intro-links a:hover {
    text-decoration: underline;
}

.nd-content.nd-content .rps-table td.col-category {
    font-weight: 500;
    text-align: center;
    background: #F8FAFC;
    vertical-align: middle;
    width: 130px;
}

/* ========================================================
   경비노동자 전담 권리구제지원 (guard-worker-rights)
   ======================================================== */

.nd-content.nd-content .guard-worker-hotline-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 14px 20px;
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
    flex-wrap: wrap;
}

.nd-content.nd-content .guard-worker-hotline-box__label {
    color: #EF4444;
    font-weight: 500;
    white-space: nowrap;
}

.nd-content.nd-content .guard-worker-cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 8px;
}

@media (max-width: 767px) {
    .nd-content.nd-content .guard-worker-hotline-box { flex-direction: column; align-items: flex-start; gap: 4px; }
    .nd-content.nd-content .guard-worker-cta-row { flex-direction: column; align-items: stretch; }
    .nd-content.nd-content .guard-worker-cta-row .ext-link-btn { justify-content: center; }
}

/* ─────────────────────────────────────────
   플랫폼·프리랜서 세무상담
   ─────────────────────────────────────────── */
.nd-content.nd-content .pft-table-wrap {
    margin-top: 6px;
    padding-left: 28px;
    overflow-x: auto;
}

.nd-content.nd-content .pft-table__link {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.nd-content.nd-content .pft-table__link:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .nd-content.nd-content .pft-table-wrap { padding-left: 0; }
        .nd-content.nd-content .pft-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
}

/* ────────────────────────────────────────
   기본계획
   ──────────────────────────────────────── */

/* 3차 계획 안내문 */

/* 추진방향 표: 레이아웃 오프셋만 남기고 라벨·값 칸은 공통 .table_label/.table_value 사용 */
/* margin-left 로 자체 들여쓰기를 이미 갖고 있으므로,
   .dot_block > *:not(.dot_head) 의 공통 padding-left(28px)는 중복 적용되지 않도록 취소한다
   (안 그러면 상단 border-top은 margin 지점에서 시작하는데 내부 콘텐츠는 padding만큼 더 밀려
    "선보다 좌측이 잘린" 것처럼 보이고, 우측도 padding만큼 폭이 넘친다) */
.nd-content.nd-content .basic-plan-table {
    margin-left: 30px;
    width: calc(100% - 30px);
}

/* .dot_block > *:not(.dot_head) 의 공통 padding-left(0,2,0)보다 우선하려면
   같은 자릿수(0,2,0)로 맞춰야 한다 — 클래스 단독 선택자(0,1,0)로는 이길 수 없다 */
.nd-content.nd-content .dot_block > .basic-plan-table {
    padding-left: 0;
}

/* 정책목표 및 추진과제 */
.nd-content.nd-content .basic-plan-goal-wrap {
    margin-top: 10px;
    margin-left: 30px;
    width: calc(100% - 30px);
}

.nd-content.nd-content .dot_block > .basic-plan-goal-wrap {
    padding-left: 0;
}

.nd-content.nd-content .basic-plan-goal {
    width: 100%;
    max-width: 640px;
    background: var(--color-primary);
    border-radius: 16px 16px 0 0;
    padding: 24px 20px;
    text-align: center;
}

.nd-content.nd-content .basic-plan-fields {
    width: 100%;
    border: 1px solid var(--color-primary);
    border-radius: 16px;
    padding: 30px 20px;
}

/* 목표 다이어그램 (3단 헤더 + 연결패널) — basic-plan.html / vision-goals.html 공용 */
.nd-content.nd-content .goal-diagram__headers,
.nd-content.nd-content .goal-diagram__body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.nd-content.nd-content .goal-diagram__header {
    flex: 1 1 200px;
    min-height: 64px;
    background: #CADDFF;
    border-radius: 8px;
    text-align: center;
    padding: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    word-break: keep-all;
}

@media (min-width: 1200px) {
    .nd-content.nd-content .goal-diagram__header { min-height: 80px; font-size: 17px; }
}

.nd-content.nd-content .goal-diagram__panel {
    position: relative;
    flex: 1 1 200px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 24px 20px;
}

.nd-content.nd-content .goal-diagram__connector {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 38px;
    background: #fff;
}

.nd-content.nd-content .goal-diagram__connector--icon-bg::before {
    content: "";
    display: block;
    width: 33px;
    height: 30px;
    background: url("../images/Guidelines.svg") center / contain no-repeat;
}

@media (max-width: 767px) {
    .nd-content.nd-content .basic-plan-table,
    .nd-content.nd-content .basic-plan-goal-wrap { margin-left: 0; width: 100%; }
    .nd-content.nd-content .goal-diagram__headers,
    .nd-content.nd-content .goal-diagram__body { flex-direction: column; }
}

/* ────────────────────────────────────────
   공공부문 정규직화 (인트로·항목은 living-wage-support·basic-plan 공통 클래스 재사용)
   ──────────────────────────────────────── */

/* ────────────────────────────────────────
   주요행사 (major-events.html)
   ──────────────────────────────────────── */


.nd-content.nd-content .major-events-layout {
    display: flex;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
}

/* 달력 카드 */
.nd-content.nd-content .major-events-cal {
    flex: 1 1 460px;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
}

.nd-content.nd-content .major-events-cal__nav {
    margin-bottom: 16px;
}

.nd-content.nd-content .major-events-cal__nav-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: #334155;
    cursor: pointer;
    transition: color 0.2s;
}

.nd-content.nd-content .major-events-cal__nav-btn:hover { color: var(--color-primary); }

.nd-content.nd-content .major-events-cal__month {
    min-width: 110px;
}

.nd-content.nd-content .major-events-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: stretch;
    border-top: 1px solid var(--color-line-light);
    border-left: 1px solid var(--color-line-light);
}

.nd-content.nd-content .major-events-cal__head-cell {
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    background: #F8FAFC;
    border-right: 1px solid var(--color-line-light);
    border-bottom: 1px solid var(--color-line-light);
}

.nd-content.nd-content .major-events-cal__head-cell.is-sun { color: #EF4444; }
.nd-content.nd-content .major-events-cal__head-cell.is-sat { color: var(--color-primary); }

.nd-content.nd-content .major-events-cal__day {
    position: relative;
    min-height: 68px;
    padding: 8px 4px;
    border-right: 1px solid var(--color-line-light);
    border-bottom: 1px solid var(--color-line-light);
    background: #fff;
    cursor: pointer;
    transition: background 0.15s;
    /* 그리드 행이 옆 셀(뱃지 있는 셀)만큼 늘어나도 날짜 숫자는 항상 셀 맨 위에서 시작하도록 고정
       (justify-content 기본값에 기대지 않고 명시) — 뱃지 유무에 따라 숫자 위치가 오르내리던 원인 */
    justify-content: flex-start;
}

.nd-content.nd-content .major-events-cal__day.is-empty { cursor: default; background: #F8FAFC; }
.nd-content.nd-content .major-events-cal__day:not(.is-empty):hover { background: #F8FAFC; }

.nd-content.nd-content .major-events-cal__day.is-sun .major-events-cal__day-num { color: #EF4444; }
.nd-content.nd-content .major-events-cal__day.is-sat .major-events-cal__day-num { color: var(--color-primary); }

.nd-content.nd-content .major-events-cal__today-tag {
    padding: 6px 8px 3px;
}

.nd-content.nd-content .major-events-cal__day-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: var(--color-primary);
    border-radius: 10px;
    padding: 8px 12px;
    line-height: 1;
}

.nd-content.nd-content .major-events-cal__day.has-event .major-events-cal__day-num { font-weight: 700; }

.nd-content.nd-content .major-events-cal__day.is-selected {
    background: var(--color-primary);
}

.nd-content.nd-content .major-events-cal__day.is-selected .major-events-cal__day-num,
.nd-content.nd-content .major-events-cal__day.is-selected.is-sun .major-events-cal__day-num,
.nd-content.nd-content .major-events-cal__day.is-selected.is-sat .major-events-cal__day-num,
.nd-content.nd-content .major-events-cal__day.is-selected .major-events-cal__today-tag {
    color: #fff;
}

.nd-content.nd-content .major-events-cal__day.is-selected .major-events-cal__day-badge {
    background: #fff;
    color: var(--color-primary);
}

.nd-content.nd-content .major-events-cal__day.is-selected:hover { background: var(--color-primary); }

/* 선택일 일정 카드 — 달력과 항상 같은 높이를 유지하고(.major-events-layout의 stretch),
   일정이 많아 넘치면 내부 스크롤로만 처리한다 */
.nd-content.nd-content .major-events-detail {
    flex: 1 1 360px;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 28px;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(9, 9, 9, 0.08);
    overflow-y: auto;
}

.nd-content.nd-content .major-events-detail__header {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-line-light);
}

.nd-content.nd-content .major-events-detail__icon {
    width: 52px;
    height: 52px;
    margin-top: 5px;
}

.nd-content.nd-content .major-events-detail__event + .major-events-detail__event {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-line-light);
}

.nd-content.nd-content .major-events-detail__title {
    display: block;
    text-decoration: none;
    margin-bottom: 14px;
}

.nd-content.nd-content .major-events-detail .dot_list_item {
    font-size: 14px;
    color: #334155;
    line-height: 1.7;
}

.nd-content.nd-content .major-events-detail__contact {
    margin: 16px 0 0;
}

@media (max-width: 1023px) {
    .nd-content.nd-content .major-events-layout { flex-direction: column; }
    .nd-content.nd-content .major-events-cal,
    .nd-content.nd-content .major-events-detail { flex-basis: auto; width: 100%; }
}

@media (max-width: 767px) {
    .nd-content.nd-content .major-events-cal { padding: 16px; }
    .nd-content.nd-content .major-events-cal__day { min-height: 52px; }
    .nd-content.nd-content .major-events-detail { padding: 20px; }
}

/* ─── 주요행사 상세 (major-events-detail-*.html) ─── */
.nd-content.nd-content .event-detail {
    width: 100%;
    border-top: 3px solid var(--color-primary);
}

.nd-content.nd-content .event-detail__title {
    min-height: 72px;
    padding: 18px 6px;
    border-bottom: 1px solid var(--color-line);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.nd-content.nd-content .event-detail__table th {
    width: 160px;
    background: #F8FAFC;
    font-weight: 500;
    white-space: nowrap;
}

/* 구분 배지는 공용 .badge(+ --lg --pill --outline-muted) 사용 */
.nd-content.nd-content .event-detail__table .badge { min-width: 88px; }

@media (max-width: 767px) {
    .nd-content.nd-content .event-detail__title { font-size: 18px; padding: 16px 4px; }
        .nd-content.nd-content .event-detail__table th { width: 96px; }
}

/* ════════════════════════════════════════════
   화상상담 (video-counsel.html)
   ════════════════════════════════════════════ */

/* ── 화상회의 준비사항 ── */
.nd-content.nd-content .video-counsel-guide {
    padding: 32px;
    border-radius: 12px;
    background: #F8FAFC;
}

.nd-content.nd-content .video-counsel-guide-cols {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.nd-content.nd-content .video-counsel-guide-col {
    min-width: 0;
}

.nd-content.nd-content .video-counsel-guide-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
}

.nd-content.nd-content .video-counsel-guide-label::before {
    content: '';
    flex-shrink: 0;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--color-primary);
}

.nd-content.nd-content .video-counsel-quote {
    position: relative;
    padding: 22px 30px;
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    background: #F0FDF4;
}

.nd-content.nd-content .video-counsel-quote__text {
    margin: 0;
    font-size: 13px;
    font-style: italic;
    color: #15803D;
    line-height: 1.9;
    word-break: keep-all;
}

.nd-content.nd-content .video-counsel-quote__mark {
    position: absolute;
    top: 4px;
    left: 12px;
    font-size: 32px;
    font-weight: 700;
    color: #86EFAC;
    font-family: Georgia, serif;
    line-height: 1;
}

.nd-content.nd-content .video-counsel-quote__mark--end {
    top: auto;
    left: auto;
    bottom: -6px;
    right: 12px;
}

.nd-content.nd-content .video-counsel-warning {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #DC2626;
    word-break: keep-all;
}

.nd-content.nd-content .video-counsel-warning__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #DC2626;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.nd-content.nd-content .video-counsel-check-heading {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.nd-content.nd-content .video-counsel-check-heading__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

/* 테두리/반경/배경은 .video-counsel-guide-image와 공유 (아래 결합 선택자) */
.nd-content.nd-content .video-counsel-checklist {
    padding: 20px 24px;
}

/* 배지는 공용 .badge(+ --auto --green) 사용, 이 자리만의 여백만 스코프 */
.nd-content.nd-content .video-counsel-guide-col .badge { margin: 0 0 10px; }

.nd-content.nd-content .video-counsel-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-content.nd-content .video-counsel-info-list__item {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    word-break: keep-all;
}

.nd-content.nd-content .video-counsel-info-list__icon {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
}

.nd-content.nd-content .video-counsel-checklist,
.nd-content.nd-content .video-counsel-guide-image {
    border: 1px solid var(--color-line-light);
    border-radius: 12px;
    background: #fff;
}

.nd-content.nd-content .video-counsel-guide-image {
    margin-top: 4px;
    overflow: hidden;
}

.nd-content.nd-content .video-counsel-guide-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── 준비 서류 첨부 안내 ── */

/* ── 하단 예약 신청 버튼 ── */
.nd-content.nd-content .video-counsel-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 8px;
}

@media (max-width: 1023px) {
    .nd-content.nd-content .video-counsel-guide-cols {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .nd-content.nd-content .video-counsel-guide {
        padding: 20px;
    }
    .nd-content.nd-content .video-counsel-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ─────────────────────────────────────────
   중소사업주컨설팅 — 온라인 신청방법 단계 목록
   ─────────────────────────────────────────── */
.nd-content.nd-content .sbc-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-content.nd-content .sbc-steps__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-line);
}

.nd-content.nd-content .sbc-steps__row:first-child {
    border-top: 1px solid var(--color-line);
}

.nd-content.nd-content .sbc-steps__num {
    width: 64px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
}

.nd-content.nd-content .sbc-steps__text {
    min-width: 200px;
}

.nd-content.nd-content .sbc-steps__btn {
    margin-left: auto;
}

/* ── 자문계약 관련 답변 강조 박스 ── */
.nd-content.nd-content .sbc-faq-answer--highlight p {
    padding: 16px;
    border: 1px dashed #93C5FD;
    border-radius: 6px;
    background: #fff;
}

/* ────────────────────────────────────────
   권리구제 기관 (rights-protection-agency.html)
   ──────────────────────────────────────── */
.nd-content.nd-content .rights-agency-content {
    padding-top: 8px;
    padding-bottom: 80px;
}

.nd-content.nd-content .rights-agency-content__inner {
    gap: 16px;
}

/* 목록 타이틀 */
.nd-content.nd-content .rights-agency-list-title {
    margin-bottom: 4px;
}

/* 표 */
.nd-content.nd-content .rights-agency-table col:nth-child(1) { width: 56px; }
.nd-content.nd-content .rights-agency-table col:nth-child(2) { width: 150px; }
.nd-content.nd-content .rights-agency-table col:nth-child(4) { width: 170px; }
.nd-content.nd-content .rights-agency-table col:nth-child(5) { width: 110px; }

/* 바로가기 버튼: 스타일은 공용 .ext-link-btn 재사용, 표 안이라 크기만 축소 */
.nd-content.nd-content .rights-agency-table__link {
    padding: 6px 14px;
    font-size: 13px;
    white-space: nowrap;
}

/* ========================================================
   특수건강진단 지원 (special-health-exam)
   ======================================================== */

.nd-content.nd-content .shx-content__inner {
    gap: 24px;
    padding-top: 6px;
}

/* 지원 개요 박스 (라벨 + 목록) */
.nd-content.nd-content .shx-overview {
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: 16px 20px;
}

.nd-content.nd-content .shx-overview__list {
    min-width: 240px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    gap: 4px;
    word-break: keep-all;
}

/* 섹션 공통 */

/* 관련 근거 항목 */

.nd-content.nd-content .shx-item__body {
    padding-left: 30px;
}

/* 출장 검진버스 하위 블록 */

/* 하위 블록 간 구분선 */
.nd-content.nd-content .shx-sub + .shx-sub {
    border-top: 1px solid var(--color-line-light);
    padding-top: 16px;
}

.nd-content.nd-content .shx-sub__desc {
    padding-left: 30px;
}

.nd-content.nd-content .shx-sub__table {
    padding-left: 30px;
}

/* 표 — 세로 구분선 없이 가로줄만 (.table_divided 오버라이드) */
.nd-content.nd-content .shx-table th,
.nd-content.nd-content .shx-table td {
    border-right: none;
    text-align: left;
    padding: 18px 16px;
}

.nd-content.nd-content .shx-table th {
    text-align: center;
    border-bottom: 2px solid var(--color-primary);
}

.nd-content.nd-content .shx-table td:first-child {
    text-align: center;
}

/* 안내 문구 목록 */
.nd-content.nd-content .shx-notes {
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #EF4444;
    line-height: 1.7;
    word-break: keep-all;
}

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .shx-item__body,
    .nd-content.nd-content .shx-sub__desc,
    .nd-content.nd-content .shx-sub__table { padding-left: 0; }
    .nd-content.nd-content .shx-table th,
    .nd-content.nd-content .shx-table td { padding: 12px; }
}

/* ────────────────────────────────────────
   긱 워커 스테이션 (workerSupport/gigWorkerStation)
   ──────────────────────────────────────── */

.nd-content.nd-content .gws-content__inner {
    gap: 24px;
}

/* 지원 내용 */

/* =========================================================
   비전 및 목표 (laborPolicy/visionGoals)
   ========================================================= */
.nd-content.nd-content .vision-goals-content {
    padding: 10px 0 80px;
}

.nd-content.nd-content .vision-goals__title {
    margin-top: 32px;
}

/* 비전 배너 */
.nd-content.nd-content .vision-goals-vision {
    position: relative;
    margin: 28px 0 0;
    padding: 24px 24px;
    background: #735ca0;
    border-radius: 60px;
    text-align: center;
}

/* "비전" 배지는 공용 .badge(+ --auto --pill --blue) 사용, 넓은 패딩만 스코프 */
.nd-content.nd-content .vision-goals-vision .badge { padding: 3px 50px; font-size: 14px; }

/* 3대 목표 */
.nd-content.nd-content .vision-goals-goals {
    margin-top: 40px;
    width: 100%;
    border: 1px solid var(--color-primary);
    border-radius: 16px;
    padding: 30px 20px;
}

/* 헤더·패널·연결부 — .goal-diagram__* 공용 클래스 사용 (basic-plan.html 쪽에 정의) */

/* 하단 화살표 */
.nd-content.nd-content .vision-goals-divider {
    margin: 26px 0;
}

/* 최종 목표 배너 */
.nd-content.nd-content .vision-goals-result {
    padding: 40px 24px;
    background: #CFE0F5 url("../images/Vision-goals.svg") center / cover no-repeat;
    border-radius: 16px;
    text-align: center;
}

@media (max-width: 767px) {
    .nd-content.nd-content .vision-goals-content { padding: 32px 0 60px; }
}

/* ════════════════════════════════════════════════
   청소년 노동인권 (youth-labor-rights)
   ════════════════════════════════════════════════ */
.nd-content.nd-content .labor-rights-content {
    padding-bottom: 80px;
}

.nd-content.nd-content .labor-rights-content__inner {
    gap: 44px;
    padding-top: 6px;
}

/* 공통 텍스트/목록 */
.nd-content.nd-content .dot_list .labor-rights-flat {
    padding-left: 0;
}

.nd-content.nd-content .dot_list .labor-rights-subitem {
    padding-left: 14px;
}

/* 출처 안내 박스 */
.nd-content.nd-content .labor-rights-notice {
    padding: 20px 24px;
    border: 1px solid #93C5FD;
    border-radius: 4px;
}

/* 링크/다운로드 버튼 */
/* 노동인권 계열 링크 버튼 → .ext-link-btn */

/* 대주제 그룹 */

/* 검정 볼드 소제목 (근로조건이 다를 경우 / 현장실습생 …) */

/* 파란 대괄호 라벨 */

/* 안내 박스 (파란 테두리): 테두리/반경은 공용 .step_box 재사용 */
.nd-content.nd-content .labor-rights-box {
    padding: 24px;
}

/* 안내 박스 2단 그리드 (권리/의무) */
.nd-content.nd-content .labor-rights-box-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.nd-content.nd-content .labor-rights-box--full {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .nd-content.nd-content .labor-rights-box-grid { grid-template-columns: 1fr; }
}

/* 취직인허증 발급절차 카드 */
.nd-content.nd-content .labor-rights-steps-wrap {
    padding: 6px 0;
}

.nd-content.nd-content .labor-rights-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* 테두리/반경/정렬은 공용 .step_box 재사용 */
.nd-content.nd-content .labor-rights-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 20px;
    background: #fff;
    position: relative;
}

.nd-content.nd-content .labor-rights-step__img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.nd-content.nd-content .labor-rights-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    z-index: 1;
    margin-left: -12px;
    margin-right: -12px;
}

.nd-content.nd-content .labor-rights-step-arrow img {
    display: block;
    width: 30px;
    height: 36px;
    object-fit: contain;
}

.nd-content.nd-content .labor-rights-steps > .labor-rights-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 30px;
    background: #fff;
}

.nd-content.nd-content .labor-rights-step-arrow + .labor-rights-step::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 30px;
    background: #fff;
}

/* 표 */
.nd-content.nd-content .labor-rights-table-wrap {
    width: 100%;
    overflow-x: auto;
    padding-top: 4px;
}

/* 설명 셀 — 왼쪽 정렬 + 불릿 목록 */
.nd-content.nd-content .labor-rights-table__td--left {
    text-align: left;
    vertical-align: top;
    padding: 16px 20px;
}

.nd-content.nd-content .labor-rights-table__td--left .dot_list {
    font-size: 14px;
    line-height: 1.6;
}

/* 표 안 바로가기 버튼 (세로 정렬 + 컴팩트) */

.nd-content.nd-content .labor-rights-table__btns .ext-link-btn {
    padding: 6px 14px;
    font-size: 13px;
}

/* 근거 법령 / 상담 — 파란 밑줄 섹션 */

.nd-content.nd-content .labor-rights-bar-title {
    margin: 0 0 12px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-primary);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
}

.nd-content.nd-content .labor-rights-ref-list, .nd-content.nd-content .labor-rights-consult-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-content.nd-content .labor-rights-ref-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 8px;
    border-bottom: 1px solid var(--color-line-light);
}

.nd-content.nd-content .labor-rights-ref-dot {
    margin-right: 8px;
}

.nd-content.nd-content .labor-rights-consult-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 8px;
    border-bottom: 1px solid var(--color-line-light);
}

.nd-content.nd-content .labor-rights-consult-item__name {
    width: 180px;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1.6;
    word-break: keep-all;
}

.nd-content.nd-content .labor-rights-consult-item .ext-link-btn {
    flex-shrink: 0;
}

/* 반응형 */
@media (max-width: 767px) {
    .nd-content.nd-content .labor-rights-content__inner { gap: 32px; }
    .nd-content.nd-content .labor-rights-steps { flex-direction: column; }
    .nd-content.nd-content .labor-rights-step-arrow { transform: rotate(90deg); align-self: center; margin: 0; }
    .nd-content.nd-content .labor-rights-steps > .labor-rights-step:not(:last-child)::after,
    .nd-content.nd-content .labor-rights-step-arrow + .labor-rights-step::before { display: none; }
    .nd-content.nd-content .labor-rights-box { padding: 18px; }
    .nd-content.nd-content .labor-rights-ref-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .nd-content.nd-content .labor-rights-consult-item { flex-direction: column; align-items: flex-start; gap: 12px; }
    .nd-content.nd-content .labor-rights-consult-item__name { width: auto; text-align: left; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .nd-content.nd-content .labor-rights-steps { flex-wrap: wrap; }
    .nd-content.nd-content .labor-rights-step { flex: 1 1 42%; }
    .nd-content.nd-content .labor-rights-step-arrow { display: none; }
    .nd-content.nd-content .labor-rights-steps > .labor-rights-step:not(:last-child)::after,
    .nd-content.nd-content .labor-rights-step-arrow + .labor-rights-step::before { display: none; }
}

/* ════════════════════════════════════════
   통합검색 결과 (search)
   [Tiles] /WEB-INF/views/search/searchResult.jsp
   ════════════════════════════════════════ */
.nd-content.nd-content .search-result-filter .list-filter__input { max-width: 520px; }

.nd-content.nd-content .search-tabs .tab-box {
    height: 44px;
    font-size: 13px;
    padding: 0 4px;
    min-width: 0;
}

.nd-content.nd-content .search-tabs-toggle { display: none; }

/* 모바일: 가로 5칸씩 나눠 넣기엔 라벨이 길어 넘치므로, 클릭 시 펼쳐지는
   세로 1열 드롭다운으로 전환 */
@media (max-width: 767px) {
    .nd-content.nd-content .search-tabs-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 46px;
        padding: 10px 16px;
        background: #fff;
        border: 1px solid var(--color-line);
        border-radius: 8px;
        font-family: var(--font);
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text);
        cursor: pointer;
    }

    .nd-content.nd-content .search-tabs-toggle__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nd-content.nd-content .search-tabs-toggle__icon {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-left: 8px;
        border-right: 2px solid var(--color-text-sub);
        border-bottom: 2px solid var(--color-text-sub);
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    .nd-content.nd-content .search-tabs-wrap.is-open .search-tabs-toggle__icon {
        transform: rotate(225deg);
        margin-top: 4px;
    }

    .nd-content.nd-content .search-tabs {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        border: 1px solid transparent;
        border-radius: 8px;
        overflow: hidden;
        transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease, border-color .25s ease;
    }

    .nd-content.nd-content .search-tabs-wrap.is-open .search-tabs {
        max-height: 600px;
        opacity: 1;
        margin-top: 4px;
        border-color: var(--color-line);
    }

    .nd-content.nd-content .search-tabs__row { flex-direction: column; }

    .nd-content.nd-content .search-tabs .tab-box {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 46px;
        font-size: 14px;
        padding: 10px 16px;
        text-align: left;
        border: none;
        border-top: 1px solid var(--color-line);
    }
    .nd-content.nd-content .search-tabs__row:first-child .tab-box:first-child { border-top: none; }
}

@media (max-width: 767px) {
    .nd-content.nd-content .search-result-filter .list-filter__input { max-width: none; }
}

.nd-content.nd-content .search-result__count {
    margin: -14px 0 2px;
    text-align: center;
}
.nd-content.nd-content .search-result__count em {
    color: #006ED6;
    font-style: normal;
    font-weight: 700;
}

.nd-content.nd-content .search-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 3px solid var(--color-primary);
}

.nd-content.nd-content .search-result-item {
    border-bottom: 1px solid var(--color-line-light);
}

.nd-content.nd-content .search-result-item__link {
    display: block;
    padding: 22px 8px;
    transition: background 0.2s;
}
.nd-content.nd-content .search-result-item__link:hover { background: #F8FAFC; }

.nd-content.nd-content .search-result-item__cat {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    background: #EBF4FF;
    border-radius: 4px;
}

.nd-content.nd-content .search-result-item__title {
    display: block;
    margin-bottom: 6px;
}
.nd-content.nd-content .search-result-item__title em {
    color: #006ED6;
    font-style: normal;
    font-weight: 700;
}

.nd-content.nd-content .search-result-item__desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nd-content.nd-content .search-result-item__url {
    display: inline-block;
}

/* 경로(HOME > 카테고리 > ...) — li 사이에 구분자 삽입 */
.nd-content.nd-content .search-result-item__path {
    flex-wrap: wrap;
    margin-top: 4px;
}
.nd-content.nd-content .search-result-item__path li + li::before {
    content: "›";
    margin-right: 4px;
}

/* 결과 없음 */
.nd-content.nd-content .search-empty {
    text-align: center;
    padding: 80px 20px;
    border-top: 3px solid var(--color-primary);
}
.nd-content.nd-content .search-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    opacity: 0.6;
}
.nd-content.nd-content .search-empty__title {
    margin-bottom: 10px;
}
.nd-content.nd-content .search-empty__title em {
    color: #006ED6;
    font-style: normal;
    font-weight: 700;
}

@media (max-width: 767px) {
    .nd-content.nd-content .search-result-item__link { padding: 18px 4px; }
}

/* ── 검색 결과 레이아웃: 본문(탭+목록) + 사이드바(인기검색어/내가 찾은 검색어) ── */
.nd-content.nd-content .search-layout {
    align-items: flex-start;
}
.nd-content.nd-content .search-layout__main {
    min-width: 0;
}
.nd-content.nd-content .search-layout__aside {
    width: 108px;
}
.nd-content.nd-content .search-word-box {
    padding: 10px;
}
@media (max-width: 767px) {
    .nd-content.nd-content .search-layout { flex-direction: column; align-items: stretch; gap: 8px; }
    .nd-content.nd-content .search-layout__main { order: 1; }
    .nd-content.nd-content .search-layout__aside { width: 100%; order: 2; }
}

.nd-content.nd-content .search-word-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nd-content.nd-content .search-word-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background: var(--color-text-sub);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    flex-shrink: 0;
}
/* 순위가 높을수록 회색 톤이 진하고 두께(font-weight)가 굵어짐 */
.nd-content.nd-content #monthBestkeyword li:nth-child(1) .search-word-rank { background: #1E293B; font-weight: 800; font-size: 10px; }
.nd-content.nd-content #monthBestkeyword li:nth-child(2) .search-word-rank { background: #334155; font-weight: 700; }
.nd-content.nd-content #monthBestkeyword li:nth-child(3) .search-word-rank { background: #64748B; font-weight: 600; }
.nd-content.nd-content #monthBestkeyword li:nth-child(4) .search-word-rank { background: #94A3B8; font-weight: 500; }
.nd-content.nd-content #monthBestkeyword li:nth-child(5) .search-word-rank { background: #CBD5E1; color: #475569; font-weight: 400; }
.nd-content.nd-content .search-word-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #F1F5F9;
    color: var(--color-text-sub);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.nd-content.nd-content .search-word-remove:hover {
    background: #E2E8F0;
}
.nd-content.nd-content .search-word-clear {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    color: var(--color-text-sub);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.nd-content.nd-content .search-word-clear:hover {
    color: var(--color-text);
}
.nd-content.nd-content .search-word-empty {
    color: var(--color-text-sub);
    font-size: 11px;
}

/* ════════════════════════════════════════════════════════════
   마이페이지 (mypage-history / mypage-profile)
   ════════════════════════════════════════════════════════════ */


.nd-content.nd-content .mypage-content__inner {
    gap: 28px;
}

/* ── 1차 최상위 탭 (GNB) — 공용 .tab-box 재사용 ──
   비활성 탭은 data-nav-href로 페이지 이동 처리 (common.js) */

/* ── 2차 그룹 탭 (신청 내역 하위) ── */
.nd-content.nd-content .mypage-subtabs {
    border-bottom: 1px solid var(--color-line);
}

.nd-content.nd-content .mypage-subtab {
    position: relative;
    padding: 0 24px;
    height: 52px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    margin-bottom: -1px;
    font-family: var(--font);
}

.nd-content.nd-content .mypage-subtab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.2s;
}

.nd-content.nd-content .mypage-subtab:not(.is-active):hover {
    color: var(--color-text);
}

.nd-content.nd-content .mypage-subtab.is-active {
    color: var(--color-primary);
    font-weight: 600;
}

.nd-content.nd-content .mypage-subtab.is-active::after {
    transform: scaleX(1);
}

/* ── 3차 세부 필터 (상담 이력 하위) ── */

.nd-content.nd-content .mypage-filters__label {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    margin-right: 4px;
}

.nd-content.nd-content .mypage-filter {
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--color-line);
    border-radius: 20px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: var(--font);
}

.nd-content.nd-content .mypage-filter:not(.is-active):hover {
    background: #F1F5F9;
}

.nd-content.nd-content .mypage-filter.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ── 패널 ── */


.nd-content.nd-content .mypage-list__count em {
    color: #006ED6;
    font-style: normal;
}

/* 구분(상담종류) 컬럼 */
.nd-content.nd-content .counsel-table .col-category { width: 120px; }
.nd-content.nd-content .counsel-table .col-name     { text-align: left; padding-left: 12px; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 모바일: 마이페이지 표는 등록일 컬럼을 숨겨 제목 공간 확보.
   본문 td에 col-* 클래스가 없는 정적 표라 헤더/본문을 nth-child로 함께 숨긴다.
   (마이페이지 표 컬럼 순서: 번호(1)/구분(2)/제목·명(3)/상태(4)/등록일(5)) */
@media (max-width: 767px) {
    .nd-content.nd-content .counsel-table .col-category { width: 60px; }
    .nd-content.nd-content .mypage-panel .counsel-table th:nth-child(5),
    .nd-content.nd-content .mypage-panel .counsel-table td:nth-child(5) { display: none; }
}

/* ── 개인정보 수정 전 비밀번호 인증 (join-form-table 스타일 재사용) ── */
.nd-content.nd-content .pw-auth {
    width: 100%;
}

/* pwConfirmForm 내부(표 + 버튼) 간격 */

.nd-content.nd-content .pw-auth__input {
    width: 100%;
    max-width: 480px;
    height: 44px;
}

/* ── 회원정보 수정: join-form-table 스타일 재사용 ── */

@media (max-width: 767px) {
    .nd-content.nd-content .mypage-subtab { padding: 0 14px; font-size: 15px;
    font-family: var(--font);
    color: #64748B;
}
    .nd-content.nd-content .mypage-filters__label { width: 100%; margin-bottom: 4px; }
}

/* ══════════════════════════════════════════════════════════
   자치구 선택 지도 (.gu-map) — map.html(파랑) /
   worker-shelter-map.html(주황) 공용. 강조색은 각 페이지 최상위에
   --gu-accent 변수로 주입한다. 하단 카드는 .support-agency-card
   (seoul-labor-support.html) 마크업을 그대로 재사용하고 강조색만 덮어쓴다.
   ══════════════════════════════════════════════════════════ */
/* 버튼(.gu-map-wrap__toggle)이 없을 땐(≥1385px) 이 래퍼가 그냥
   .gu-map 하나만 감싸는 빈 껍데기라 flex column이 딱히 해될 게 없고,
   버튼이 나타날 땐(<1385px) 지도 "위"에 자기 공간을 차지하고 앉아서
   지도 내용과 절대 안 겹치게 된다 — 예전엔 position:absolute로
   지도 위에 얹혀 있었는데, 토글 스위치처럼 작을 땐 안 보였지만
   텍스트+아이콘이 든 버튼으로 커지면서 화면이 좁아질수록(지도 자체는
   줄어드는데 버튼 크기는 거의 그대로라) 노원구 등 지도 상단 자치구를
   실제로 가리는 문제가 있었다 */
.nd-content.nd-content .gu-map-wrap {
    display: flex;
    flex-direction: column;
}
/* 센터/쉼터 지도 간 이동 버튼 — 공용 바로가기 버튼(.ext-link-btn)을
   그대로 재사용하고, --color-primary/--color-primary-hover만 이
   범위 안에서 다시 정의해 색만 맞춘다(아이콘도 stroke="currentColor"라
   같이 따라감 — 새 색 변형 클래스를 또 만들 필요 없음). 색은 지금 보고
   있는 페이지가 아니라 "이동할 목적지" 페이지의 강조색으로 준다(센터
   페이지의 쉼터찾기 버튼은 주황, 쉼터 페이지의 센터찾기 버튼은 파랑) —
   그래서 --gu-accent(현재 페이지 색)가 아니라 각 방향별 modifier
   클래스(--shelter/--center)로 목적지 색을 직접 지정한다.
   labor-center-map.html/worker-shelter-map.html 상단 우측 바로가기
   메뉴(.shortcut-menu)가 화면 폭 1385px 미만에서 안 보이므로, 그
   구간에서만 대신 노출한다 */
.nd-content.nd-content .gu-map-wrap__toggle {
    display: none;
    align-self: flex-end;
    margin-bottom: 0px;
}
.nd-content.nd-content .gu-map-wrap__toggle--shelter {
    --color-primary: var(--color-shelter-orange);
    /* 어둡게(black 혼합)도, 밝게(white 혼합)도 다 애매해서 — 그냥
       테두리/글자와 같은 색을 그대로 hover 배경으로 쓴다 */
    --color-primary-hover: var(--color-shelter-orange);
}
.nd-content.nd-content .gu-map-wrap__toggle--center {
    --color-primary: var(--color-center-blue);
    --color-primary-hover: var(--color-center-blue);
}
@media (max-width: 1384px) {
    .nd-content.nd-content .gu-map-wrap__toggle { display: inline-flex; }
}
.nd-content.nd-content .gu-map {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    padding: 16px;
    box-sizing: border-box;
}
/* 지도(.gu-map-wrap)와 그 아래 시설 카드/안내문구 섹션 사이 간격만 공용
   .gap-16(16px)보다 좁게 — 이 페이지의 .content-inner는 이 두 블록만
   자식으로 가지므로 다른 곳에 영향 없이 여기서만 좁혀도 안전하다 */
.nd-content.nd-content .gu-map-page .content-inner {
    gap: 8px;
}
.nd-content.nd-content .gu-map__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    /* 지도 전체가 바닥에 놓인 느낌을 주는 그림자 — 구별 inset shadow와 달리
       svg 전체에 한 번만 걸리는 필터라 어떤 구가 위에 그려지든 z-order
       문제 없이 항상 균일하다 */
    filter: drop-shadow(6px 10px 0 rgba(15, 23, 42, .07));
}
/* 구역 간 경계는 선(stroke) 대신 아래 inset shadow 필터가 만드는 안쪽
   음영으로만 구분 — hover/선택 시에만 색이 달라진다. stroke 기반 방식에서
   반복되던 바깥 테두리 잔선·클립 경계 스파이크·교차 아티팩트 문제를
   근본적으로 없애기 위한 선택.
   전 구역 동일 색(가장 밝은 톤)으로 통일 — 이전에는 맞닿은 구끼리 겹치지
   않도록 4색(welsh-powell 그래프 컬러링) tone-0~3을 배정했으나 색을
   통일하며 더 이상 구분이 필요 없어져 제거했다 */
/* CSS drop-shadow는 자기 도형 바깥으로 그림자를 던지는 방식이라, 맞닿은
   옆 구 중 DOM상 나중에 그려지는 쪽이 그 위를 덮어버려 구마다 그림자가
   보였다 안 보였다 하는 문제가 있었다(테두리 z-order 버그와 같은 종류).
   그래서 SVG filter(#guMapInnerShadow, feComponentTransfer로 알파를
   반전 후 blur→그 결과를 도형 알파와 in으로 교차)로 도형 "안쪽"에서만
   가장자리를 어둡게 하는 inset 그림자로 바꿨다 — 이웃 구 위로 전혀
   번지지 않으므로 어떤 순서로 그려지든 항상 자기 자신에게만 균일하게
   보인다 */
.nd-content.nd-content .gu-map__path {
    fill: #E6EBF1;
    stroke: none;
    cursor: pointer;
    filter: url(#guMapInnerShadow);
    transition: fill .15s, filter .15s;
    /* 모바일 브라우저 기본 탭 하이라이트가 자치구 폴리곤이 아니라 그
       bounding box 전체를 파란 사각 띠로 덮어버려서 꺼둔다 */
    -webkit-tap-highlight-color: transparent;
    /* 마우스 클릭 시 뜨는 포커스 링은 끄되(선택 상태는 채우기 색·들뜨는
       효과로 이미 뚜렷이 구분됨), 키보드로 Tab 이동 중인 상태는 :focus-visible로
       별도 표시한다 — outline이 폴리곤 모양을 따라가지 않고 사각형(bounding
       box)으로 뜨더라도, 25개 자치구를 순서대로 Tab 이동하는 키보드 사용자에게
       "지금 포커스가 어디 있는지" 알려주는 최소한의 시각 피드백은 필요하다 */
    outline: none;
}
.nd-content.nd-content .gu-map__path:focus-visible {
    outline: 3px solid #2b55c0;
    outline-offset: -2px;
}
/* hover 색상은 클릭(선택) 시 색상과 동일하게 — 미리보기 성격으로 통일 */
.nd-content.nd-content .gu-map__path:hover {
    fill: var(--gu-accent, var(--color-primary));
}
/* 마포/용산/성동/광진과 남쪽 이웃(영등포·동작·서초·강남·송파) 사이의 경계는
   폴리곤을 옮기지 않고, 그 경계선 위에 배경색과 같은 색의 두꺼운 stroke를
   덧그려 그 폭만큼 "지워 보이게" 한다 — 실제 지오메트리는 그대로라 어디서도
   교차·스파이크가 생기지 않고, 전체 구간이 정확히 같은 굵기로 균일하게
   벌어져 보인다. 각 구 자신의 <g> 안에 넣어 선택 시 위로 들뜨는 transform을
   그대로 상속하므로 들뜬 상태에서도 어긋나지 않는다 */
.nd-content.nd-content .gu-map__erase-edge {
    fill: none;
    stroke: #fff;
    stroke-width: 18;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.nd-content.nd-content .gu-map__label {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--font);
    fill: #64748B;
    text-anchor: middle;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    transition: fill .15s, font-weight .15s, font-size .15s, transform .15s;
}
/* 선택·호버 시 뜨는 입체 효과 — 참고 데모(test_map.html)와 동일한 원리로,
   스케일로 키운 복제본을 "삐져나오게" 하는 방식(모양의 굴곡에 따라 옆면
   두께가 제각각 달라 보이는 문제가 있었다) 대신, 도형 자체에 방향이 고정된
   솔리드 drop-shadow를 여러 겹 쌓아 어떤 자치구 모양이든 항상 균일한
   두께의 "옆면"이 생기게 한다. 선택된 구는 JS에서 다른 구 그룹보다 뒤(위)로
   옮겨지므로, 실제로 겹치는 그림자를 써도 이웃 구에 가려지지 않는다.
   호버는 같은 기법을 절반 강도로 써서 "미리보기"임이 구분되게 한다 */
.nd-content.nd-content .gu-map__path,
.nd-content.nd-content .gu-map__erase-edge {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .15s, fill .15s, filter .15s;
}
.nd-content.nd-content .gu-map__group:not(.is-selected):hover .gu-map__path,
.nd-content.nd-content .gu-map__group:not(.is-selected):hover .gu-map__erase-edge {
    transform: translateY(-4px);
}
.nd-content.nd-content .gu-map__group:not(.is-selected):hover .gu-map__path {
    filter:
        drop-shadow(0 1px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 55%, black))
        drop-shadow(0 2px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 55%, black))
        drop-shadow(0 3px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 55%, black))
        drop-shadow(0 5px 6px rgba(15, 23, 42, .15));
}
.nd-content.nd-content .gu-map__group.is-selected .gu-map__path,
.nd-content.nd-content .gu-map__group.is-selected .gu-map__erase-edge {
    transform: translateY(-8px);
}
/* 선택된 구는 색이 채워지고 위로 뜨면서 그 자체로 옆 구와 뚜렷하게
   구분되므로, 간격용 흰 선(erase-edge)이 더 필요 없다 — 오히려 색이 채워진
   블록 위에 흰 줄이 파여 보이는 부작용이 생겨 꺼둔다. 이웃 쪽에 남아있는
   같은 경계의 erase-edge 사본은 선택된 구가 그 위로 올라오면서(z-order)
   가려지므로 간격 자체는 계속 유지된다 */
.nd-content.nd-content .gu-map__group.is-selected .gu-map__erase-edge {
    opacity: 0;
}
.nd-content.nd-content .gu-map__group.is-selected .gu-map__path {
    fill: var(--gu-accent, var(--color-primary));
    filter:
        drop-shadow(0 2px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 65%, black))
        drop-shadow(0 4px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 65%, black))
        drop-shadow(0 6px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 65%, black))
        drop-shadow(0 10px 12px rgba(15, 23, 42, .22));
}
/* 라벨(text)은 모든 지역 도형이 그려진 뒤 별도 레이어(.gu-map__labels)에 한꺼번에
   그려 넣는다 — 좁고 긴 자치구(강북구 등) 라벨이 이웃 도형의 경계선(stroke)에
   가려 글자가 깨져 보이는 문제를 막기 위함 */
/* 기본 크기가 22px로 올라오면서 금천구 등 좁은 자치구의 절대 상한
   (약 22.6px, isPointInFill 실측 — 라벨을 어디로 옮겨도 이 이상은 불가능)
   에 거의 다 붙어버려, 선택 시 "더 커 보이는" 여유가 1.8% 남짓만 남는다.
   데스크톱/모바일 구분 없이 동일한 값을 쓰기로 해서(사용자 요청) 아래
   font-size가 모든 화면 폭에 그대로 적용된다 — 화면 폭별로 다른 값을
   또 쓰고 싶어지면 병목이 데스크톱에는 없다는 점(뷰박스 좌표라 폭과
   무관)을 기억할 것 */
.nd-content.nd-content .gu-map__label.is-selected {
    fill: #fff;
    font-weight: 700;
    font-size: 22.4px;
    transform: translateY(-8px);
}
/* hover 시 도형 fill이 선택색으로 바뀌는 것과 짝을 맞춰, 글자색도 선택 시와
   동일한 흰색으로. 도형이 -4px 뜨는 것과 같이 라벨도 따라 움직여야 글자가
   도형 위에서 어긋나지 않는다 — 굵기는 선택 상태와 구분되도록 그대로 둔다 */
.nd-content.nd-content .gu-map__label.is-hover:not(.is-selected) {
    fill: #fff;
    font-size: 22.2px;
    transform: translateY(-4px);
}

@media (max-width: 767px) {
    .nd-content.nd-content .gu-map { padding: 14px; }
}

/* 카드 안 아이콘+제목 행을 카드 중앙에 정렬 */
.nd-content.nd-content .gu-map-page .support-agency-card__header {
    justify-content: center;
    /* 카드 안 가로 구분선(공용 #CADDFF)도 테두리 색과 같게 */
    border-bottom-color: var(--gu-accent);
}
.nd-content.nd-content .gu-map-page .support-agency-card__header .dot_title_xs {
    color: var(--gu-accent);
    /* 공용 .dot_title_xs(16px/모바일 15px)보다 지도 페이지 카드 제목만 3px 더 크게 */
    font-size: 19px;
}

@media (max-width: 767px) {
    /* 300~327px 구간에서 가장 긴 제목("서대문구 노동자종합지원센터" 등)이
       고정 18px로는 2줄로 줄바꿈됨 — vw 기반 clamp로 좁은 폭에서만 더
       줄어들게 하고, 350px 이상에서는 기존 18px 그대로 유지(실측
       canvas measureText로 300~767px 전 구간 한 줄 유지 확인) */
    .nd-content.nd-content .gu-map-page .support-agency-card__header .dot_title_xs {
        font-size: clamp(12px, 8vw - 10px, 18px);
        white-space: nowrap;
    }
}
/* 센터찾기·쉼터찾기 카드 테두리도 각 페이지 타이틀과 같은 강조색으로 (공용 card_accent 파랑 대신) */
.nd-content.nd-content .gu-map-page--center .support-agency-card.card_accent,
.nd-content.nd-content .gu-map-page--shelter .support-agency-card.card_accent {
    border-color: var(--gu-accent);
}
/* 지도 아래 시설 카드는 seoul-labor-support.html의 .support-agency-card/.support-agency-grid를
   그대로 재사용. 다만 이 페이지는 구 대부분이 카드 1장이라 공용 repeat(2,1fr)을
   그대로 쓰면 카드가 왼쪽 칸에만 붙어 지도·제목과 어긋나 보이고, 카드 2장인
   구(예: 마포구)에서 2열로 보이게 하려던 auto-fit(minmax) 시도는 이 페이지의
   카드 목록 컨테이너 폭이 화면 폭과 무관하게 정확히 "520px×2+20px gap=1060px"로
   수렴하는 지점이 있어(넓은 화면에서 항상 여기로 귀결) 그 정확한 경계값에서
   auto-fit 트랙 계산이 부동소수점 오차로 1열로 접히는 문제가 재현됨 — CSS만으로
   "가용폭 기준"으로 열 수를 추론하는 방식은 이 폭 조합에서 원천적으로 불안정하다.
   그래서 화면 폭이 아니라 실제 카드 "개수"(JS가 이미 알고 있음)로 열 수를
   결정하도록 바꿈: 기본은 항상 폭 520px 단일 열 중앙정렬, JS가 카드 2장 이상일
   때만 붙이는 .support-agency-grid--multi 클래스가 있고 화면이 768px 이상일
   때만 고정 2열(520px씩)로 전환 — 폭 계산이 전혀 끼어들지 않으므로 그 경계값
   문제 자체가 발생할 수 없다 */
.nd-content.nd-content .gu-map-page .support-agency-grid {
    margin: 0 auto;
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}
/* [hidden] 표준 동작(display:none)이 위 display:grid 선언에 덮여 무시되던
   문제 — hidden 처리된 빈 그리드가 높이 0으로도 여전히 레이아웃에 남아
   상위 섹션의 gap을 하나 더 차지해, 카드가 보일 때보다 안내 문구가 보일
   때 위 여백이 16px 더 벌어지는 원인이었다. 속성 선택자로 특이도를 올려
   진짜로 없앤다 */
.nd-content.nd-content .gu-map-page .support-agency-grid[hidden] {
    display: none;
}
@media (min-width: 768px) {
    .nd-content.nd-content .gu-map-page .support-agency-grid.support-agency-grid--multi {
        grid-template-columns: repeat(2, minmax(0, 520px));
    }
}
.nd-content.nd-content .gu-map-card {
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, transform .15s;
}
.nd-content.nd-content .gu-map-card:not(.gu-map-card--empty):hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.nd-content.nd-content .gu-map-card--empty {
    opacity: .6;
}
.nd-content.nd-content .gu-map-card--empty .support-agency-card__header .dot_title_xs {
    color: var(--color-text-light);
}
/* 정보가 없는 구를 선택했을 때 카드 자리 대신 표시하는 안내 문구 — 별도
   버튼 없이 지도 아래에 텍스트만 보여주되, 카드와 같은 톤의 테두리로 감싼다.
   --gu-accent는 .gu-map-page에 이미 페이지별로 선언돼 있어(센터=파랑,
   쉼터=주황) 별도 페이지 스코프 규칙 없이 그대로 상속된다 */
.nd-content.nd-content .gu-map-empty-msg {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    color: var(--color-text-light);
    padding: 20px 24px;
    font-size: 17px;
    background: #fff;
    border: 1px solid var(--gu-accent, var(--color-line));
    border-radius: 18px;
    box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════
   노동자지원기관 "센터소개" 콘텐츠 (cnts, cntnts_id=A10000xx)
   [주의] CN은 관리자가 입력한 구디자인 원본 마크업(.total_center/.slide_wrap/
   .list_dep2/.table_A 등)이라 그대로 두고, selectContents.jsp의 스크립트가
   렌더 직후 이 DOM을 신디자인 공용 컴포넌트로 재조립한다 — 그 결과물이
   .profile/.profile__media/.profile__card/.profile__info(프로필 정보 카드),
   .programs__list/.dot_block(주요 프로그램), .map(지도) 이며, 전부 shelterRent
   소개 페이지 등에서 이미 쓰는 기존 클래스라 여기서 별도 CSS를 추가하지 않는다.
   ════════════════════════════════════════════════════════════ */
.nd-content.nd-content .total_center {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ════════════════════════════════════════════════════════════
   키오스크형 단독 화면 (.empty 레이아웃 — 헤더/푸터 없음)
   QR 스캔으로 진입하는 쉼터 방문기록(shelterVisitRcord), qr 모듈 등에서 사용.
   대응 목업이 없어 사이트 공용 톤(.card/.btn/.counsel-form-table 등)만으로
   가운데 정렬된 단일 카드 화면을 구성한다.
   ════════════════════════════════════════════════════════════ */
.nd-content.nd-content .kiosk-page {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg-light);
    padding: 40px 20px;
    box-sizing: border-box;
}
.nd-content.nd-content .kiosk-page__inner {
    width: 100%;
    max-width: 480px;
}
.nd-content.nd-content .kiosk-page__inner--wide {
    max-width: 680px;
}
.nd-content.nd-content .kiosk-page__header {
    text-align: center;
    margin-bottom: 4px;
}
.nd-content.nd-content .kiosk-page__btn-wrap {
    margin-top: 4px;
}
.nd-content.nd-content .kiosk-page__footer {
    text-align: center;
    margin-top: 8px;
}
.nd-content.nd-content .kiosk-card {
    padding: 24px 20px;
    background: var(--color-bg);
}
.nd-content.nd-content .kiosk-card--complete {
    padding: 40px 20px;
}
@media (max-width: 480px) {
    .nd-content.nd-content .kiosk-page { padding: 24px 12px; }
    .nd-content.nd-content .kiosk-card { padding: 20px 16px; }
}

/* ════════════════════════════════════════════════════════════
   노동통계 (cnsltStats) — Chart.js 캔버스는 그대로 두고
   탭/검색폼/카드 테두리만 사이트 공용 톤으로 재구성. 대응 목업 없음.
   ════════════════════════════════════════════════════════════ */
.nd-content.nd-content .stats-tabs { gap: 8px; }
.nd-content.nd-content .stats-term { row-gap: 8px; }
.nd-content.nd-content .stats-chart-card {
    border: 1px solid var(--color-line);
    overflow: hidden;
}
.nd-content.nd-content .stats-chart-card .chart-body {
    margin: 50px;
}
@media (max-width: 767px) {
    .nd-content.nd-content .stats-chart-card .chart-body { margin: 24px 12px; }
    .nd-content.nd-content .stats-chart-card .chart-header > div,
    .nd-content.nd-content .stats-chart-card > div[style*="padding-left: 60px"] {
        padding-left: 20px !important;
    }
}

/* qr/selectQrCode.jsp — 쉼터 방문기록용 QR 안내 키오스크 화면(.kiosk-page 재사용) */
.nd-content.nd-content .kiosk-qr-img {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nd-content.nd-content .kiosk-qr-img img {
    max-width: 100%;
    max-height: 100%;
}

/* remedyRight/selectRemedyRightPrint.jsp — 인쇄용 공식 신청서(권리보호관 도구).
   병합 셀(rowspan/colspan) 구조를 유지해야 해서 counsel-form-table 대신
   실제 table을 그대로 쓰고, 보더/여백만 신디자인 톤으로 맞춘다. */
.nd-content.nd-content .remedy-print-table {
    width: 100%;
    border-top: 2px solid var(--color-text);
    border-collapse: collapse;
}
.nd-content.nd-content .remedy-print-table th,
.nd-content.nd-content .remedy-print-table td {
    border: 1px solid var(--color-line);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-text);
    text-align: left;
    vertical-align: middle;
}
.nd-content.nd-content .remedy-print-table th {
    background: var(--color-bg-light);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}
.nd-content.nd-content .remedy-print-table__sign {
    padding: 24px 0;
}

/* shelterEdc/selectShelterEdc.jsp — 교육 정보 요약(썸네일+메타정보) */
.nd-content.nd-content .shelter-edc-summary__thumb {
    width: 240px;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-light);
}
.nd-content.nd-content .shelter-edc-summary__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nd-content.nd-content .shelter-edc-summary__body {
    min-width: 260px;
}
@media (max-width: 600px) {
    .nd-content.nd-content .shelter-edc-summary__thumb { width: 100%; }
}

/* instrctr 등 안내형 허브 페이지의 공지 카드 (.card 공용 규칙과 짝) */
.nd-content.nd-content .counsel-notice-box {
    padding: 24px;
    background: var(--color-bg-light);
}

/* 원문자(①②③...) 심볼 — dot_list--num 번호 매김에 사용 */
@counter-style dot-circled-num {
    system: fixed;
    symbols: '①' '②' '③' '④' '⑤' '⑥' '⑦' '⑧' '⑨' '⑩' '⑪' '⑫' '⑬' '⑭' '⑮' '⑯' '⑰' '⑱' '⑲' '⑳';
    suffix: '';
}

/* vglbAtny 등 번호 매김 약관/안내 목록 (dot_list의 불릿을 원문자로 대체) */
.nd-content.nd-content .dot_list--num {
    counter-reset: dotnum;
}
.nd-content.nd-content .dot_list--num > .dot_list_item {
    padding-left: 20px;
    counter-increment: dotnum;
}
.nd-content.nd-content .dot_list--num > .dot_list_item::before {
    content: counter(dotnum, dot-circled-num);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1em;
    font-weight: 400;
    /* .dot_list_item::before(점 마커)가 지정한 width/height/border-radius/background/transform이
       그대로 남아있으면 숫자가 5px짜리 원 안에 갇혀 줄바꿈되며 점과 숫자가 겹쳐 보인다 — 전부 리셋. */
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    transform: none;
}
/* ===== source: fonts.css (@font-face - 스코프 대상 아님, TTF -> 서브셋 woff2 로 교체) ===== */
/* ==============================================================
   Noto Sans KR 웹폰트 (로컬 파일)
   출처: Google Fonts (https://fonts.google.com/noto/specimen/Noto+Sans+KR)
   라이선스: SIL Open Font License 1.1 (상업적 사용 가능)
   ============================================================== */

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansKR-100.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansKR-200.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansKR-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansKR-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansKR-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansKR-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansKR-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansKR-800.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/NotoSansKR-900.woff2') format('woff2');
}


/* ==============================================================
   중화 레이어 - 구 default.css 누수 되돌리기 (구 디자인 사이트 전용)
   생성 스크립트가 함께 출력한다. 수작업 편집 금지.

   특이도 계약
     변환분 ".nd-content.nd-content"  = 클래스 2개  (항상 최우선)
     중화층 ".nd-content"           = 클래스 1개  (구 규칙만 이기고 신규에는 진다)
     구 default.css                        = 클래스 0~2개
   각 중화 규칙은 "이겨야 할 구 규칙"을 주석에 명시하고, 그보다 딱 한 단계만
   높은 특이도를 쓴다. 동률일 때는 이 파일이 default.css 보다 뒤에 실려 이긴다.
   ============================================================== */

/* ── A. 전역 리셋(default.css 101행)의 `font: inherit` / `font-size: 100%` 되돌리기
      이겨야 할 구 규칙: 타입 선택자 77개 (0,0,1) → 중화층 (0,1,1) 로 충분 ── */
.nd-content h1 { font-size: 2em; }
.nd-content h2 { font-size: 1.5em; }
.nd-content h3 { font-size: 1.17em; }
.nd-content h4 { font-size: 1em; }
.nd-content h5 { font-size: 0.83em; }
.nd-content h6 { font-size: 0.67em; }

/* 구 `h1~h6 { font-family: 'S-Core-Dream' }` (0,0,1) 차단 - 신규는 var(--font) 상속 */
.nd-content h1, .nd-content h2, .nd-content h3,
.nd-content h4, .nd-content h5, .nd-content h6 { font-family: inherit; }

.nd-content strong, .nd-content b { font-weight: bold; }
.nd-content em, .nd-content i, .nd-content cite, .nd-content dfn, .nd-content var { font-style: italic; }
.nd-content code, .nd-content kbd, .nd-content samp, .nd-content pre, .nd-content tt { font-family: monospace; font-size: 1em; }
.nd-content small { font-size: smaller; }
.nd-content big { font-size: larger; }
.nd-content sub { vertical-align: sub; font-size: smaller; }
.nd-content sup { vertical-align: super; font-size: smaller; }
.nd-content th { font-weight: bold; }
.nd-content u, .nd-content ins { text-decoration: underline; }
.nd-content s, .nd-content strike, .nd-content del { text-decoration: line-through; }

/* 전역 리셋의 `margin: 0; padding: 0` 중, 신규 CSS 가 0 으로 재선언하지 않는
   태그들의 UA 기본 여백 복원. (ul/ol/p/h1~h6 은 신규 CSS 가 0 으로 명시하므로 제외) */
.nd-content blockquote { margin: 1em 40px; }
.nd-content dl { margin: 1em 0; }
.nd-content dd { margin-left: 40px; }
.nd-content figure { margin: 1em 40px; }
.nd-content pre { margin: 1em 0; }
.nd-content hr { margin: 0.5em auto; border: 1px inset; }

/* 구 `body { letter-spacing: -0.05em }` 상속 차단 (신규에는 없음) */
.nd-content { letter-spacing: normal; }

/* 구 145행 `ul:after, ol:after, dl:after` (0,0,2) clearfix 의사요소 제거.
   신규 디자인의 flex/grid 리스트에 빈 아이템이 하나 더 생겨 간격이 어긋난다.
   (신규 CSS 에 ul/ol/dl 의 ::after 규칙이 0건임을 확인) */
.nd-content ul::after,
.nd-content ol::after,
.nd-content dl::after { content: none; display: none; clear: none; }

/* 구 189행 `caption, legend` (0,0,1) 의 1px 강제 숨김 해제 */
.nd-content caption { height: auto; width: auto; overflow: visible; clip: auto; margin: 0; }

/* 구 210행 `table` (0,0,1) 의 width:100% / table-layout:fixed / border-collapse 되돌림.
   클래스가 붙은 표(.table / .table_data / .notice-table 등)는 변환분(0,2,x)이 이기므로
   클래스 없는 bare <table> 만 UA 기본으로 돌아간다.
   word-break 는 양쪽 모두 keep-all 이라 건드리지 않는다. */
.nd-content table { width: auto; table-layout: auto; border-collapse: separate; border-spacing: 2px; }

/* ── B. 클래스명이 겹치는 구 규칙 되돌리기 (전수 조사로 확인된 4종 + 1) ── */

/* 구 `.tit_md` (0,1,0) 이 거는 불릿 이미지/좌측 패딩 제거.
   구 사이트도 게시판 본문에선 `.board_con .tit_md` (0,2,0) 로 같은 중화를 하고 있다.
   중화층 (0,2,0) 이므로 변환분 `.nd-content.nd-content .tit_md` (0,3,0) 에는 진다. */
.nd-content .tit_md { padding-left: 0; background-image: none; }

/* 구 `.tit_lg span` (0,1,1) 의 별도 서식 제거 → 중화층 (0,2,1) */
.nd-content .tit_lg span {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
    margin-top: 0;
}

/* 구 `.dot_list li` (0,1,2) 의 항목 하단 여백·글자색 제거 → 중화층 (0,2,2).
   신규는 li 가 아니라 `.dot_list_item` 으로 처리하며 margin-bottom/color 를 선언하지 않는다
   (색은 상속받은 var(--color-text) #333 이 맞고, 구 규칙은 #444 를 강제한다).
   색을 따로 지정하는 신규 클래스(.text-danger 등)는 변환분 (0,3,0) 이라 이 규칙을 이긴다.
   불릿/좌패딩도 변환분 `.nd-content.nd-content .dot_list_item` (0,3,x) 이 이기므로 건드리지 않는다. */
.nd-content .dot_list li { margin-bottom: 0; color: inherit; }

/* 구 `.step_box` (0,1,0) 의 overflow/여백 제거 → 중화층 (0,2,0) */
.nd-content .step_box { overflow: visible; margin: 0; }

/* 구 게시판 표 `.table_A.responsive tr / colgroup` (0,2,1) 이 모바일에서
   본문 안의 신규 표까지 덮치는 것 차단 (selectBbs10 / selectBbs30 해당).
   중화층을 (0,2,1) 로 맞춰 동률 → 뒤에 실리는 이 파일이 이긴다.
   변환분의 `.pft-table tr`(0,3,1) / `.table_kv_stack_mobile :where(tr,th,td)`(0,3,0) 에는 진다. */
@media screen and (max-width: 768px) {
    .nd-content.nd-content tr { display: table-row; width: auto; }
    .nd-content.nd-content colgroup { display: table-column-group; }
}

/* ── C. 본문 폭 컨테이너 ──
   구 사이트에는 신규 디자인의 본문 폭 컨테이너가 없다(특히 selectContents 는
   CN 을 아무 래퍼 없이 그대로 출력한다). 그래서 마커 자신이 .content-inner 역할을 한다.
   신규 사이트는 이 파일을 로드하지 않고 페이지 JSP 가 .content-inner 로 감싸므로
   여백이 이중으로 붙지 않는다.
   변환분의 body 규칙 `.nd-content.nd-content { margin:0; padding:0 }` (0,2,0) 을 이겨야 하므로 (0,3,0). */
.nd-content.nd-content.nd-content {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad-sm);
    padding-right: var(--container-pad-sm);
}
@media (min-width: 768px) {
    .nd-content.nd-content.nd-content { padding-left: var(--container-pad-md); padding-right: var(--container-pad-md); }
}
@media (min-width: 1200px) {
    .nd-content.nd-content.nd-content { padding-left: var(--container-pad-lg); padding-right: var(--container-pad-lg); }
}

/* ── D. 고정 헤더 회피 여백 ──
   구 사이트의 #header 는 `position: absolute; top: 0; height: 80px` 라 문서 흐름에서 빠져 있고,
   본문이 그 아래로 내려오는 장치는 `#main, #contents { margin-top: 80px }` 하나뿐이다.

   selectContents 는 CN 을 아무 래퍼 없이 #wrapper 바로 아래에 출력하므로, 구 CMS 콘텐츠는
   관례적으로 자기 최상위 div 에 id="contents" 를 직접 달아 그 여백을 받아왔다
   (실제 저장 콘텐츠로 확인: <div class="business" id="contents">).

   신규 콘텐츠에 그 id 를 요구하면 게시판 상세에서 페이지 JSP 의 #contents 와 ID 가 중복되고
   본문 안에 80px 공백이 생긴다. 그래서 id 대신 "마커가 #wrapper 바로 아래인 경우"
   (= CN 이 페이지 최상위인 selectContents) 에만 같은 값을 준다.
   게시판 상세는 마커가 #contents 안쪽 깊숙이 들어가므로 이 규칙에 매치되지 않는다.

   하단 여백도 같은 이유로 여기서 준다. 신규 사이트는 페이지 JSP 가 `.sub-content`
   (padding-bottom: 60px) 로 감싸지만 구 사이트에는 그 래퍼가 없고, 구 CSS 의
   `#contents > div:last-of-type { padding-bottom: 80px }` 도 마커에는 걸리지 않아
   본문이 푸터에 붙는다. 신규 사이트와 같은 값(60px)으로 맞춘다.

   특이도 (1,1,0) 으로 변환분의 body 규칙 `.nd-content.nd-content { margin: 0; padding: 0 }` (0,2,0) 을 이긴다. */
#wrapper > .nd-content { margin-top: 80px; padding-bottom: 60px; }
@media screen and (max-width: 1080px) {
    #wrapper > .nd-content { margin-top: 60px; }
}