@charset "UTF-8";
/* ==============================================================
   서울노동포털 - 공통 스타일시트
   (헤더, 푸터, 리셋, 공통 컴포넌트)

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

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


/* ────────────────────────────────────────
   CSS 변수
   ──────────────────────────────────────── */
:root {
    /* 색상 */
    --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;
}


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

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    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;
}

a { color: inherit; text-decoration: none; }

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

/* 스크린리더 전용 */
.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;
}

/* 본문 바로가기(스킵 내비). 평소엔 .sr-only 처럼 숨기고 키보드 포커스가 오면 좌상단에 보인다.
   default-layout.jsp 가 <body> 바로 뒤(유틸바 앞)에 둬서 Tab 첫 포커스가 된다.
   배경은 흰 글자 대비 4.5:1 이상이 되도록 --color-primary(3.7:1)보다 진한 색을 쓴다. */
.skip-link {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    z-index: 100000;            /* 메인 팝업 레이어(99999) 위 */
    width: auto; height: auto;
    padding: 12px 20px; margin: 0;
    overflow: visible;
    clip: auto;
    background: #1D4ED8;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
/* 바로가기로 이동했을 때 sticky 헤더(70~78px)에 본문 첫 줄이 가리지 않게 */
#mainContent { scroll-margin-top: 80px; }


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

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

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


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

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

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

.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;
}

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

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

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

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


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

.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;
}

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

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

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

/* GNB */
.gnb { flex: 1; }

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

.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;
}

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

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

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

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

/* 헤더 통합검색 아이콘 — 우측 바로가기 메뉴(.shortcut-menu)가 사라지는 구간(<1366px)에서
   햄버거(#sitemapOpen) 옆에 노출한다. 바로가기 메뉴의 '검색' 버튼과 같은 [data-open-search] 동작을 쓴다.
   ≥1366px 에서는 바로가기 메뉴의 '검색' 버튼이 있으므로 숨긴다. */
.header__search-btn { display: none; }
.header__search-btn svg { display: block; }
@media (max-width: 1365px) {
    .header__search-btn { display: flex; }
}

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

.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가 끊기지 않도록 투명 브릿지 */
.search-dropdown__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

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

.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;
}
.search-dropdown__form:focus-within {
    border-color: #99B9FF;
}

.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;
}
.search-dropdown__input::placeholder {
    color: #9AA3AF;
}

.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;
}
.search-dropdown__submit:hover { transform: scale(1.08); }
.search-dropdown__submit img { display: block; }

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

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

.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;
}
.search-tag:hover { transform: translateY(-1px); filter: brightness(0.95); }

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

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

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

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

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

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

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

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

.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;
}
.mobile-gnb__list li a:hover { background: var(--color-bg-light); }
.mobile-gnb__list li:last-child a { border-bottom: none; }

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

    .header__logo { margin-right: 20px; }

    .gnb__link { padding: 8px 10px; }

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

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

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

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

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

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

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

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

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

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

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

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


/* ────────────────────────────────────────
   GNB 드롭다운 메가메뉴
   [프론트 전용] PC 전용
   ──────────────────────────────────────── */
.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;
}

.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;
}

.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) {
    .gnb__mega-inner { padding: 14px var(--container-pad-md) 24px; }
}

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

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

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

.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);
}

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

.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;
}

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

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

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

.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;
}

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

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


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

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

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

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

.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;
}

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

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

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

/* 두 줄 구간(2026-10-12): 링크 4개가 한 줄에 들어가지 않으면(10px 기준 화면 폭 약 455px 미만)
   왼쪽 묶음·오른쪽 묶음이 위아래 두 줄로 가운데 정렬되며 글자도 10px 이라 작고 어색했다.
   → 각 줄을 좌우 2분할(버튼이 줄 폭을 꽉 채움), 글자는 모바일 일반 버튼(.btn_md, 14px)과 같게.
   줄바꿈 여부는 CSS 로 감지할 수 없어 폭 기준으로 나눈다 — 글꼴 차이에 대비해 여유를 두고 480px 미만.
   한 줄 구간(480px 이상)은 기존 그대로 */
@media (max-width: 479.98px) {
    .footer-policy-bar__inner {
        flex-direction: column;
        align-items: stretch;
    }
    .footer-policy-bar__left,
    .footer-policy-bar__right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;   /* 긴 글자(프리랜서 안심결제 이용약관)가 ≤375 에서 두 줄이 되어도 같은 줄 버튼 높이 맞춤 */
        gap: 8px;
    }
    .footer-policy-bar__link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 3px 8px;       /* 두 줄(프리랜서 안심결제 이용약관)이어도 한 줄 버튼과 같은 44px 이 되도록 상하 여백 축소(2026-10-13) */
        font-size: 14px;
        line-height: 1.25;
        text-align: center;
        word-break: keep-all;
    }
}


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

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

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

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

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

.related-orgs__item a {
    display: block;
}

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

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

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

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

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

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


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

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

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

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

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

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

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

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

/* 인증마크 2개(AlphaSSL 씰 + 웹접근성 마크)를 세로로 쌓는다 — 가로로 두면 모바일에서 연락처 박스가 좁아진다 */
.footer__contact-web-img {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-left: -15px;
    transform: scale(0.85);
    transform-origin: left center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .footer__contact { gap: 10px; }

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

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

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

    .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 페이지에만 쓰이므로 그대로 둔다.
   ============================================================== */
.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;
}

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

.btn_outline {
    background: #fff;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}
/* 아웃라인 버튼 계열 공용 hover: 옅은 배경 → 진한 색 채움 + 흰 글자로 반전 (.ext-link-btn 포함) */
.btn_outline:hover,
.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를 쓰기 때문).
   ============================================================== */
.video_thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
}

.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;
}

.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가지 순환) */
.video_thumb_0 { background: #1E3A6E; }
.video_thumb_1 { background: #1B4332; }
.video_thumb_2 { background: #4C1D95; }
.video_thumb_3 { background: #7C1D1D; }
.video_thumb_4 { background: #78350F; }
.video_thumb_5 { background: #065F46; }
.video_thumb_6 { background: #1C3D5A; }
.video_thumb_7 { background: #3B1F28; }
.video_thumb_8 { background: #1F2D40; }

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

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

body.sitemap-is-open {
    overflow: hidden;
}

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

.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) {
    .sitemap-card { padding: 16px 24px; }
}
@media (max-width: 767px) {
    .sitemap-card { padding: 12px 16px; }
}

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

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

.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;
}
.sitemap-close:hover { color: var(--color-text); }
.sitemap-close svg { display: block; }
/* 모바일: 로고 위 여백을 줄여 로고 박스가 비대칭이 되므로,
   닫기(X)를 로고 이미지 중앙(위 패딩16 + 이미지높이36/2 = 34px)에 맞춘다. */
@media (max-width: 767px) {
    .sitemap-close { top: 34px; }
    .sitemap-close svg { width: 35px; height: 35px; }
}

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

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

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

}

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


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

.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으로 두고, 제목만 말줄임으로 자른다. */
    .sitemap-box__head {
        font-size: 15px;
        padding: 14px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

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

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

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

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

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

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

.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) {
    .sitemap-box__list li a { font-size: 13px; }
}

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


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

    /* 큰 타이틀 = 아코디언 헤더 (선은 글자 아래 한 줄만) */
    .sitemap-section__bar {
        position: relative;
        cursor: pointer;
        padding-right: 32px;
        user-select: none;
        border-top: none;
    }
    /* 펼침/접힘 화살표(쉐브론) */
    .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;
    }
    .sitemap-section.is-open .sitemap-section__bar::after {
        transform: translateY(-30%) rotate(-135deg);
    }

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

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

    /* 2단계: 박스 헤더(파란 타이틀)도 드롭다운 */
    .sitemap-box.is-collapsible > .sitemap-box__head {
        position: relative;
        cursor: pointer;
        padding-right: 40px;
        border-radius: 8px;           /* 접힘 상태: 완전 라운드 */
        user-select: none;
    }
    .sitemap-box.is-collapsible.is-open > .sitemap-box__head {
        border-radius: 8px 8px 0 0;   /* 펼침 상태: 상단만 라운드 */
    }
    /* 쉐브론 화살표 */
    .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;
    }
    .sitemap-box.is-collapsible.is-open > .sitemap-box__head::after {
        transform: translateY(-30%) rotate(-135deg);
    }
    /* 본문: max-height + 세로 패딩을 함께 애니메이션 → 완전히 닫힘 */
    .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;
    }
    .sitemap-box.is-collapsible.is-open > .sitemap-box__body {
        max-height: 1200px;        /* 콘텐츠보다 충분히 큰 값 */
        padding: 10px 4px 12px 6px;
    }
}

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


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

.shortcut-menu__title {
    font-size: 15px;   /* 13 → 15 (2026-10-28) */
    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);
}

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

.shortcut-menu__list li a,
.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;
}
.shortcut-menu__link:hover {
    background: var(--color-bg-light);
    color: #F97316;
}

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

/* 호버/클릭 시에만 아이콘을 강조(_clik) 버전으로 교체. 크기·위치는 원본과 동일하게 유지 */
.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");
}
.shortcut-menu__list li:nth-child(2) .shortcut-menu__link:is(:hover, :active) .shortcut-menu__icon,
.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");
}
.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");
}

.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;
}
.shortcut-menu__search-btn:hover { background: #D96210; }

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

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

/* 태블릿(768~1365): 여백 부족으로 화면 밖에 나가므로 숨김.
   ≤767 = 하단 카드, ≥1366 = 우측 세로 배치에서만 노출.
   (2026-10-08: 1385 → 1366 — 1366×768 노트북에서도 보이도록. 본문 글자 끝(.container 안쪽 패딩 40px 포함,
   1060px 폭)과 메뉴 사이 간격은 1366에서 약 20px 이상이 되도록 아래 right 최소값을 10px로 맞춤)
   이 구간에서 통합검색 진입은 헤더의 검색 아이콘(.header__search-btn)이 대신한다.
   (2026-10-12: 768~1365 → 1366 미만 전체로 숨김. Windows 배율 125% 등에서 화면 폭이 767.2px 처럼
   소수가 되면 max-width:767px·min-width:768px 어느 쪽에도 걸리지 않아 기본 display:flex 로
   본문 하단에 노출되던 문제(join_complete.do 767px). ≤767 메인 하단 카드는 아래에서 다시 노출)
   (2026-10-29 고객 요청: 1366 미만 전체를 숨기지 않고 아래 '오른쪽 세로 띠'로 노출 — 숨김 규칙 삭제) */

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

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

    .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로 간격 확보) */
    .shortcut-menu__box {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: var(--radius-lg);
        border: 1px solid #dfe3ea;   /* 그림자 대신 테두리(2026-10-28) */
        overflow: hidden;
    }

    .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: 15px;   /* 12 → 15 (2026-10-28) */
        white-space: nowrap;
    }

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

    /* (2026-10-28) 글자 16px = 메인 퀵메뉴(온라인 상담 17px)보다 1px 작게.
       기본 규칙(.shortcut-menu__list li a)보다 우선하도록 같은 선택자로 지정 */
    .shortcut-menu__list li a,
    .shortcut-menu__link {
        justify-content: flex-start;
        padding: 8px 12px;
        font-size: 16px;
        white-space: nowrap;
    }

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

    .shortcut-menu__search-btn {
        width: 100%;
        height: 34px;
        margin: 0;
        padding: 0 10px;
        font-size: 16px;
        border-radius: var(--radius-lg);
    }
}

/* ≤767: (2026-10-29 고객 요청) 바로가기 메뉴를 화면 오른쪽에 붙는 세로 띠로 — 모든 페이지 공통(참고: 강북노동자복지관 모바일웹 QUICK MENU).
   이전에는 메인에서만 퀵메뉴 아래 2×2 카드로 보였다. position:fixed 라 DOM 위치(레일·메인 이동)와 상관없이 같은 자리에 뜬다.
   767.98: 소수 폭(767~768 사이)에서도 빠지지 않도록
   (2026-10-29 고객 요청) 768~1365 에서도 숨기지 않고 같은 세로 띠로 → 1366 미만 전체(1365.98: 소수 폭 대비) */
@media (max-width: 1365.98px) {
    .shortcut-menu,
    .page-main .shortcut-menu {
        display: flex;
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 90;
        width: 56px;
        margin: 0;
        flex-direction: column;
        gap: 6px;
        background: transparent;
        box-shadow: none;
    }
    .shortcut-menu__box {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #dfe3ea;
        border-right: 0;
        border-radius: 10px 0 0 10px;
        overflow: hidden;
    }
    .shortcut-menu__title {
        padding: 6px 4px;
        border: 0;
        border-radius: 0;
        background: #F97316;
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        word-break: keep-all;
    }
    .shortcut-menu__list,
    .page-main .shortcut-menu__list {
        display: flex;
        flex-direction: column;
        padding: 2px 0;
        gap: 0;
    }
    .page-main .shortcut-menu__list li { border: 0; border-radius: 0; background: transparent; }
    .shortcut-menu__list li + li { border-top: 1px solid #eef1f5; }
    .shortcut-menu__list li a,
    .shortcut-menu__link,
    .page-main .shortcut-menu__list li a,
    .page-main .shortcut-menu__link {
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 8px 2px;
        font-size: 10.5px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        letter-spacing: -0.03em;
    }
    .shortcut-menu__icon { width: 18px; height: 18px; }
    .shortcut-menu__search-btn {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 7px 0 6px;
        flex-direction: column;
        gap: 2px;
        font-size: 10.5px;
        border-radius: 10px 0 0 10px;
    }
    .shortcut-menu__search-icon { width: 20px; height: 20px; }
    .shortcut-menu__search-text { margin-right: 0; }

    /* (2026-11-13) 아래로 스크롤하는 동안만 오른쪽 밖으로 비켜 줌 — 위로 스크롤하거나 멈추면(1초) 다시 나옴.
       is-tucked 는 shortcutMenu.jsp 스크립트가 붙였다 뗀다. .page-main 규칙(translateY)보다 뒤·같은 특이도로 덮어씀 */
    .shortcut-menu,
    .page-main .shortcut-menu {
        transition: transform .25s ease, opacity .25s ease;
    }
    .shortcut-menu.is-tucked,
    .page-main .shortcut-menu.is-tucked {
        transform: translate(100%, -50%);
        opacity: 0;
        pointer-events: none;
    }
}
@media (max-width: 1365.98px) and (prefers-reduced-motion: reduce) {
    .shortcut-menu,
    .page-main .shortcut-menu { transition: none; }
}

.gnb__mega-panel:not([hidden]) {
    display: flex;
    gap: 0;
    width: 100%;
}