@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

/* 부대행사관 배너용 로컬 폰트 (채용설명회 / 기업견학) */
@font-face {
    font-family: 'Hakgyoansim Allimjang';
    src: url('/font/Hakgyoansim Allimjang TTF B.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ONE Mobile';
    src: url('/font/ONE Mobile OTF Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ONE Mobile';
    src: url('/font/ONE Mobile OTF Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ONE Mobile';
    src: url('/font/ONE Mobile OTF Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   색상 변수 (Color Tokens)
   이번 정리 단계에서 신규로 등록. 기존 규칙의 하드코딩된 값은 아직
   치환하지 않았으며(별도 리팩터링 대상), 사이트 전반에서 3회 이상,
   2개 이상의 기능 영역에서 반복 사용되는 "핵심 팔레트"만 변수로
   등록했다. 특정 섹션에서만 1회 쓰인 원본 클론 고유색(예: 홈 섹션2/3의
   개별 그린 톤)은 변수화하지 않고 문서(docs/color-palette.md)에만
   기록해 두었다 — 자세한 근거와 유사색 목록은 그 문서 참고.
   ========================================================================== */

:root {
    /* 브랜드 / 포인트 컬러 */
    --color-brand-primary: #802f46; /* 메인 포인트 그린: 링크·탭 active, 버튼, 체크박스 accent, hover 등 사이트 전역 */
    --color-brand-primary-hover: #802f46; /* 포인트그린 계열 hover (예: 회사명 검색 버튼) */
    --color-brand-primary-dark: #802f46; /* 스팟 배너/브레드크럼 배경, 참여기업 상세 강조 바 */
    --color-brand-spot: #b92555; /* 서브페이지 상단 비주얼(#spot) 배경 */
    --color-navy: #232e41; /* 로고 텍스트, 모바일 전체메뉴 아이콘, 참여기업 상세 강조 바 */

    /* 텍스트 컬러 */
    --color-text-heading: #191919; /* 제목/라벨(굵게): 폼 라벨, 카드 제목, 목록 라벨 등 */
    --color-text-base: #222; /* 기본 본문(리셋 레벨) */
    --color-text-body: #666; /* 본문/보조 설명 텍스트 - 가장 널리 쓰이는 보조 텍스트색 */
    --color-text-dark: #333; /* 일부 서브 텍스트(설문조사 등) */
    --color-text-muted: #858585; /* 메타 정보(작성자/조회수 등) 옅은 보조 텍스트 */
    --color-text-secondary: #505050; /* 게시판/홍보자료 카운트 텍스트 */
    --color-text-faint: #6c7179; /* 카드 보조 설명(참여기업 카드 등) */
    --color-text-navy-soft: #162437; /* 카드 제목(참여기업 카드 h6 등) */

    /* 배경 컬러 */
    --color-white: #fff;
    --color-black: #000;
    --color-bg-card: #fff8fa; /* 카드/박스형 연녹 배경 (FAQ, 홍보자료, 설문조사 등) */
    --color-bg-muted: #f7f7f7; /* 테이블 헤더 등 옅은 회색 배경 */

    /* 보더 / 구분선 컬러 */
    --color-border: #e0e0e0; /* 카드/표 기본 테두리 */
    --color-border-light: #ddd; /* 입력창/버튼 등 옅은 테두리 */
    --color-border-soft: #e7e7e7; /* FAQ·홍보자료·설문조사 카드 테두리 */
    --color-divider: #eee; /* 리스트 항목 사이 얇은 구분선 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ol,
ul,
li {
    list-style: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-text-base);
    overflow-x: hidden;
    /* 전역 줄바꿈 기준: 단어(띄어쓰기) 단위로만 줄바꿈되도록 강제.
       (word-break/overflow-wrap은 상속되므로 이 아래 모든 요소에 적용되고,
       개별 컴포넌트에서 다른 값으로 재정의하지 않는 한 그대로 유지된다.) */
    word-break: keep-all;
    overflow-wrap: break-word;
}

html {
    overflow-x: hidden;
}

/* 모바일 전역 안전장치: 어떤 페이지든 이미지가 뷰포트보다 커져서
   가로 스크롤/레이아웃 파괴를 일으키지 않도록 기본값을 잡아둔다.
   컴포넌트별로 width/height를 명시한 규칙은 이 아래에서 그대로
   우선 적용되므로 기존 스타일과 충돌하지 않는다. */
img,
svg {
    max-width: 100%;
    height: auto;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    line-height: 1.4em;
}

a {
    text-decoration: none;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-divider);
    padding: 16px 0;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header .logo {
    text-decoration: none;
}

.site-header nav a {
    margin-left: 16px;
    text-decoration: none;
    color: var(--color-text-base);
}

main {
    padding: 40px 20px;
    min-height: 60vh;
}

/* ==========================================================================
   Header (smartcj.or.kr 원본 클론)
   ========================================================================== */

.wrap_box {
    position: relative;
    width: 95%;
    max-width: 1500px;
    margin: 0 auto;
}

#header {
    position: relative;
    transition: 0.3s;
}

#header .header_in {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    z-index: 2000;
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
}

#header .logo a {
    /* position: absolute;
  top: 21px;
  left: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-navy); */
    position: absolute;
    top: 21px;
    left: 0;
    z-index: 2200;
    display: flex;
}

/* 데스크톱 GNB (메가메뉴) */
#lnb {
    position: relative;
    float: right;
    right: 0;
    z-index: 2100;
}

#lnb .lnb_wrap {
    position: relative;
    overflow: visible; /* 원본은 overflow:hidden + JS로 높이를 늘려 펼치지만, 이번 단계는 JS 없이 CSS hover로만 구현 */
    padding-top: 10px;
    height: 60px;
}

#lnb .lnb_wrap ul {
    list-style: none;
}

#lnb .lnb_wrap > ul > li {
    position: relative;
    float: left;
}

#lnb .lnb_wrap > ul > li > a {
    display: block;
    height: 70px;
    padding: 0 25px;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 70px;
    text-align: center;
    color: var(--color-text-dark);
    text-decoration: none;
}

#lnb .lnb_wrap > ul > li > a::after {
    display: block;
    content: '';
    height: 3px;
    background: var(--color-black);
    transform: scale(0, 1);
    transition: 0.3s;
}

#lnb .lnb_wrap > ul > li.current > a,
#lnb .lnb_wrap > ul > li.actived > a {
    color: var(--color-text-dark);
}

#lnb .lnb_wrap > ul > li.current > a::after,
#lnb .lnb_wrap > ul > li.actived > a::after {
    transform: scale(1.1, 1);
}

#lnb .lnb_sub {
    position: absolute;
    top: 70px;
    left: 50%;
    display: none;
    width: 100%;
    max-width: 180px;
    padding-top: 20px;
    margin: 0 auto;
    list-style: none;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
}

#lnb .lnb_wrap > ul > li.desktop_sub_open .lnb_sub {
    display: block;
}

@media (min-width: 1261px) and (hover: hover) {
    #lnb .lnb_wrap > ul > li:hover .lnb_sub,
    #lnb .lnb_wrap > ul > li:focus-within .lnb_sub {
        display: block;
    }
}

#lnb .lnb_sub li a {
    display: block;
    padding: 5px 0;
    text-align: center;
    color: var(--color-text-body);
    text-decoration: none;
}

#lnb .lnb_sub li a:hover {
    color: var(--color-black);
}

/* 모바일 전체메뉴 토글 체크박스 - 화면에는 보이지 않고 #mgnbToggle:checked
   상태만 CSS에서 활용(JS 없이 순수 CSS로 클릭 토글 구현). label[for="mgnbToggle"]
   역할은 #m_gnb .btn_sitemap이 담당(아래, <label>로 마크업). */
.mgnb_toggle_input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* 모바일 전체메뉴 버튼 (기본 데스크톱에서는 숨김) */
#m_gnb {
    display: none;
}

#m_gnb .btn_sitemap {
    display: block;
    width: 50px;
    height: 60px;
    text-indent: -9999px;
    overflow: hidden;
    background-image:
        linear-gradient(var(--color-navy), var(--color-navy)),
        linear-gradient(var(--color-navy), var(--color-navy)),
        linear-gradient(var(--color-navy), var(--color-navy));
    background-repeat: no-repeat;
    background-size: 26px 2px;
    background-position:
        center 24px,
        center 30px,
        center 36px;
}

@media (max-width: 1440px) {
    #lnb .lnb_wrap > ul > li > a {
        padding: 0 20px;
        font-size: 1em;
    }
}

@media (max-width: 1260px) {
    #header .logo a {
        top: 12px;
    }

    #m_gnb {
        position: absolute;
        top: 5px;
        right: 0;
        display: block;
        z-index: 3100;
    }

    /* 전체메뉴 버튼(label) 클릭 -> #mgnbToggle 체크 -> #lnb가 우측에서
     슬라이드로 들어오는 패널로 전환(참고 사이트 financejobfair.co.kr의
     모바일 메뉴 구조 실측: 우측 슬라이드 패널 300px/화면폭 80%, 딤 오버레이
     없음, 대메뉴 클릭 시 아코디언으로 소메뉴 펼침). 패널은 항상 DOM에
     display:block 상태로 두고 transform으로 화면 밖에 대기시켜, 열고 닫을 때
     모두 부드럽게 슬라이드 애니메이션이 걸리도록 한다. 아코디언 펼침/접힘은
     public/js/mobile-menu.js가 대메뉴 클릭 시 li에 .mobile_sub_open 클래스를
     토글하는 방식으로 처리(햄버거<->X 아이콘 전환 로직은 아래 그대로 유지). */
    #lnb {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        z-index: 3000;
        display: block;
        float: none;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        overflow-y: auto;
        background: var(--color-white);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform 0.35s ease;
        visibility: hidden;
    }

    #mgnbToggle:checked ~ #lnb {
        transform: translateX(0);
        visibility: visible;
    }

    #lnb .lnb_wrap {
        height: auto;
        padding: 65px 15px 30px 20px;
    }

    #lnb .lnb_wrap > ul > li {
        float: none;
        width: 100%;
    }

    #lnb .lnb_wrap > ul > li > a {
        position: relative;
        display: block;
        height: auto;
        padding: 12px 28px 12px 10px;
        font-size: 0.95em;
        font-weight: 500;
        line-height: 1.4;
        text-align: left;
        border-bottom: 1px solid var(--color-divider);
    }

    /* 참고 사이트의 셰브런(펼침 화살표)을 동일 아이콘 언어(Material Icons)로 재현 */
    #lnb .lnb_wrap > ul > li > a::after {
        content: 'expand_more';
        position: absolute;
        top: 50%;
        right: 4px;
        height: auto;
        background: none;
        font-family: 'Material Icons';
        font-size: 20px;
        color: var(--color-text-muted);
        transform: translateY(-50%);
        transition: transform 0.25s ease;
    }

    /* 펼쳐진 대메뉴 강조 - 참고 사이트의 옅은 브랜드색 배경 강조를 우리
     --color-brand-primary(#802F46 = rgb(128, 47, 70))의 10% 투명도로 매핑 */
    #lnb .lnb_wrap > ul > li.mobile_sub_open > a {
        background: rgba(128, 47, 70, 0.1);
        color: var(--color-brand-primary);
    }

    #lnb .lnb_wrap > ul > li.mobile_sub_open > a::after {
        color: var(--color-brand-primary);
        transform: translateY(-50%) rotate(180deg);
    }

    #lnb .lnb_sub {
        position: static;
        display: none;
        width: 100%;
        max-width: none;
        padding: 6px 0 10px 10px;
        margin: 0;
        background: none;
        transform: none;
    }

    #lnb .lnb_wrap > ul > li.mobile_sub_open .lnb_sub {
        display: block;
    }

    #lnb .lnb_sub li a {
        padding: 7px 0;
        font-size: 0.9em;
        text-align: left;
    }

    /* 메뉴 열림(체크) 상태에서 햄버거 3줄 아이콘 -> X 아이콘으로 전환 (기존 그대로 유지) */
    #mgnbToggle:checked ~ #m_gnb .btn_sitemap {
        background-image:
            linear-gradient(
                45deg,
                transparent calc(50% - 1.5px),
                var(--color-navy) calc(50% - 1.5px),
                var(--color-navy) calc(50% + 1.5px),
                transparent calc(50% + 1.5px)
            ),
            linear-gradient(
                -45deg,
                transparent calc(50% - 1.5px),
                var(--color-navy) calc(50% - 1.5px),
                var(--color-navy) calc(50% + 1.5px),
                transparent calc(50% + 1.5px)
            );
        background-size:
            20px 20px,
            20px 20px;
        background-position: center, center;
    }
}

@media (max-width: 768px) {
    .wrap_box {
        width: 90%;
    }

    #header .logo a {
        font-size: 1.2rem;
    }
}

@media (max-width: 440px) {
    #header .logo a {
        font-size: 1rem;
        top: 14px;
    }
}

/* ==========================================================================
   메인 홈페이지 팝업 (views/partials/main-popup.ejs)
   참고 사이트(cbnu.weme.kr) 메인 팝업의 구조(중앙 오버레이 + 이미지 +
   "오늘 하루 보지 않기" + "닫기")와 실측 치수(팝업 박스 530px, 라운드 12px,
   딤 배경 50% 투명도, 하단 바 57px, 닫기 버튼 pill 형태)를 그대로 따르되,
   참고 사이트의 보라색 배색은 가져오지 않고 기존 --color-* 변수로 매핑했다.
   실제 팝업 이미지가 없으므로 다른 서브페이지와 동일한 관례로 회색
   placeholder 박스를 사용한다.
   ========================================================================== */

.main_popup_overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

.main_popup_overlay.is-visible {
    display: flex;
}

.main_popup_box {
    display: flex;
    flex-direction: column;
    width: 530px;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-white);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.main_popup_body {
    padding: 15px;
}

.main_popup_image {
    width: 100%;
    background: var(--color-bg-muted);
}

.main_popup_image_content {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.main_popup_image_text {
    display: block;
    padding: 40px 0;
    text-align: center;
    font-size: 0.9em;
    color: var(--color-text-muted);
}

.main_popup_footer {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 57px;
    padding: 0 15px;
    background: var(--color-bg-muted);
}

.main_popup_today {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95em;
    color: var(--color-text-body);
    cursor: pointer;
}

.main_popup_today input {
    width: 14px;
    height: 14px;
    accent-color: var(--color-brand-primary);
}

.main_popup_close {
    width: 59px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: var(--color-brand-primary);
    color: var(--color-white);
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
}

.main_popup_close:hover {
    background: var(--color-brand-primary-hover);
}

@media (max-width: 500px) {
    .main_popup_footer {
        height: auto;
        padding: 12px 15px;
    }

    .main_popup_today {
        font-size: 0.85em;
    }

    .main_popup_close {
        width: 52px;
        height: 36px;
        font-size: 0.9em;
    }
}

/* ==========================================================================
   Hero (section1) - 원본 클론
   ========================================================================== */

#container {
    position: relative;
    width: 100%;
    padding-top: 90px;
}

@media (max-width: 1260px) {
    #container {
        padding-top: 70px;
    }
}

.section1 {
    position: relative;
    background: url('../images/main_job_bg.png') 50% 100% / cover no-repeat;
}

.section1 .main-inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

/* .section1 .main-inner::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 34%;
  z-index: -1;
  width: 400px;
  height: 400px;
  background: url("https://smartcj.or.kr/project/design/main2026/element3.png") center center / contain no-repeat;
  filter: grayscale(82%) brightness(0.6) sepia(20%) hue-rotate(115deg) saturate(4) contrast(2.5);
  opacity: 0.3;
  animation: floating-B 22s ease-in-out -5s infinite;
} */

/* .section1 .main-inner::after {
  content: "";
  position: absolute;
  bottom: 6%;
  right: 2%;
  z-index: -1;
  width: 500px;
  height: 500px;
  background: url("https://smartcj.or.kr/project/design/main2026/element3.png") center center / contain no-repeat;
  filter: grayscale(82%) brightness(0.6) sepia(20%) hue-rotate(115deg) saturate(4) contrast(2.5);
  opacity: 0.3;
  animation: floating-A 18s ease-in-out infinite;
} */

.section1 .main-inner i {
    display: block;
    font-style: normal;
}

.section1 .main-inner img {
    display: block;
}

@keyframes floating-A {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    33% {
        transform: translate(100px, 50px) rotate(10deg) scale(1.1);
    }
    66% {
        transform: translate(50px, -80px) rotate(-5deg) scale(0.9);
    }
}

@keyframes floating-B {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    40% {
        transform: translate(-120px, -60px) rotate(-15deg) scale(1.15);
    }
    75% {
        transform: translate(-40px, 40px) rotate(8deg) scale(0.95);
    }
}

@media (max-width: 1600px) {
    .section1 {
        overflow-y: hidden;
    }

    .section1 .main-inner {
        width: 90%;
        margin: 0 auto;
    }

    .section1 .main-inner img {
        width: 100%;
    }

    .section1 .main-inner::before {
        width: 150px;
        height: 150px;
    }

    .section1 .main-inner::after {
        width: 200px;
        height: 200px;
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out 0s 1 normal forwards running;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

@keyframes fadeInUp {
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .section1 {
        overflow: hidden;
        background: url('../images/main_job_bg.png') 23% 50% / cover no-repeat;
    }

    .section1 .main-inner {
        flex-direction: column;
        width: 75%;
        gap: 20px;
        padding: 1rem 0 3rem;
        box-sizing: border-box;
    }

    /* .section1 .main-inner::after {
    width: 300px;
    height: 300px;
    bottom: 15%;
  } */
}

/* 아이폰 SE급(320~380px)의 매우 좁은 화면에서는 버튼 글자가
   답답해 보이지 않도록 폰트만 한 단계 더 줄인다. */
@media (max-width: 380px) {
    .main_cta a {
        min-height: 48px;
        font-size: 13px;
    }
}

/* ===========================================================================
   메인 CTA · 입사지원방법 · 취업성공반
   =========================================================================== */
.section1 .main_copy {
    flex: 0 1 609px;
}

.section1 .main-inner > i:last-child {
    flex: 0 1 810px;
}

.main_cta {
    display: flex;
    gap: 14px;
    margin-top: 26px;
}

.main_cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 245px;
    min-height: 66px;
    border-radius: 20px;
    color: var(--color-white);
    font-size: 21px;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.main_cta a:hover {
    filter: brightness(0.94);
    transform: translateY(-2px);
}

.main_cta_success {
    background: #ec2a75;
}
.main_cta_apply {
    background: #55cbbb;
}
.main_cta_preregister {
    background: var(--color-brand-primary);
}
.main_cta_company {
    display: none !important;
    background: #6551b8;
}

.intro_design_nav {
    display: flex;
    justify-content: center;
    margin: 0 auto 72px;
    border-bottom: 1px solid var(--color-border);
}

.intro_design_nav a {
    box-sizing: border-box;
    width: 170px;
    padding: 20px 0;
    border-bottom: 2px solid transparent;
    color: var(--color-text-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.intro_design_nav a.is-active {
    border-color: #9b3653;
    color: #9b3653;
}

.join_design_page,
.success_class_page {
    max-width: 1224px;
    padding-bottom: 110px;
}

.join_intro {
    margin-bottom: 58px;
}

.join_intro h3,
.intro_highlight_title {
    display: inline;
    margin: 0;
    color: var(--color-text-heading);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.5;
    background: linear-gradient(transparent 58%, #fff26c 58%);
}

.join_intro h3 span {
    color: #9b3653;
}

.join_intro p {
    margin: 17px 0 0;
    color: var(--color-text-body);
    font-size: 17px;
    line-height: 1.7;
}

.join_steps_section,
.join_benefits,
.success_intro,
.success_class_page > section {
    margin-bottom: 64px;
}

.join_design_steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
}

.join_design_steps li,
.success_feature_grid article,
.success_apply_steps li,
.success_design_cta,
.join_design_cta {
    border: 1px solid #f1dde4;
    border-radius: 10px;
    background: #fff8fa;
}

.join_design_steps li {
    position: relative;
    min-height: 190px;
    padding: 26px 20px;
    text-align: center;
}

.join_design_steps li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -22px;
    color: #d9d9d9;
    content: '›';
    font-size: 30px;
    transform: translateY(-50%);
}

.join_design_steps strong,
.success_apply_steps strong {
    display: block;
    color: #9b3653;
    font-size: 24px;
}

.join_design_steps h4 {
    margin: 8px 0 9px;
    color: var(--color-text-heading);
    font-size: 18px;
}
.join_design_steps p,
.success_feature_grid p {
    margin: 0;
    color: var(--color-text-body);
    font-size: 14px;
    line-height: 1.6;
}

.join_benefits ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 48px;
    padding: 26px 0 0;
    margin: 0;
    list-style: none;
}
.join_benefits li {
    color: var(--color-text-heading);
    font-size: 18px;
    font-weight: 700;
}
.join_benefits li::before {
    margin-right: 13px;
    color: #55cbbb;
    content: '✓';
}

.join_design_cta,
.success_design_cta {
    margin-top: 56px;
    padding: 34px 24px;
    text-align: center;
}
.join_design_cta strong,
.success_design_cta strong {
    display: block;
    color: #9b3653;
    font-size: 21px;
}
.join_design_cta p {
    margin: 16px 0 22px;
    color: var(--color-text-heading);
    font-weight: 700;
}
.join_design_cta a,
.success_design_cta a {
    display: inline-block;
    min-width: 250px;
    padding: 15px 28px;
    border-radius: 6px;
    background: #93324f;
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
}

.success_intro strong {
    display: block;
    margin: 14px 0;
    color: #9b3653;
}
.success_intro p {
    color: var(--color-text-body);
    line-height: 1.7;
}
.success_feature_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 24px;
}
.success_feature_grid article {
    padding: 24px;
}
.success_feature_grid h4 {
    margin: 0 0 13px;
    font-size: 18px;
}
.success_recommend_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 40px;
    padding: 24px 0 0;
    margin: 0;
    list-style: none;
}
.success_recommend_list li {
    position: relative;
    padding-left: 26px;
    color: var(--color-text-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}
.success_recommend_list li::before {
    position: absolute;
    left: 0;
    top: 0;
    color: #55cbbb;
    content: '✓';
    font-weight: 800;
}
.success_lead_quote {
    margin: 0 0 64px;
    padding: 22px 0;
    border-top: 1px dashed var(--color-border-light);
    border-bottom: 1px dashed var(--color-border-light);
    text-align: center;
    color: #9b3653;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
}
.success_apply_section {
    position: relative;
}
.success_qr_box {
    margin: 35px auto 25px;
    text-align: center;
}
.success_qr_box h4 {
    margin-bottom: 18px;
    font-size: 18px;
}
.success_qr_box img,
.success_qr_placeholder {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    object-fit: contain;
}
.success_qr_placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--color-bg-muted);
    color: var(--color-text-faint);
    font-size: 13px;
}
.success_apply_steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    padding: 0;
    margin: 26px 0 0;
    list-style: none;
}
.success_apply_steps li {
    padding: 22px;
    text-align: center;
}
.success_apply_steps span {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
}
.success_apply_notice {
    margin: 26px 0 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-heading);
}
.success_design_cta small {
    display: block;
    margin-bottom: 14px;
    color: #9b3653;
    font-weight: 700;
}
.success_design_cta strong {
    margin-bottom: 22px;
}

@media (max-width: 1024px) {
    /* 481~1024px(큰 폰 가로모드, 소형 태블릿) 구간에서 텍스트 영역과
     마스코트 이미지가 가로로 나란히 배치된 채 각각 100% 너비를
     요구하면 서로 절반씩 찌그러져 CTA 버튼 글자가 겹치는 문제가
     있었다. 480px 이하와 동일하게 세로로 쌓아 항상 각 요소가
     컨테이너 전체 너비를 온전히 쓰도록 한다. */
    .section1 .main-inner {
        flex-direction: column;
        width: min(88%, 440px);
    }
    .section1 .main_copy,
    .section1 .main-inner > i:last-child {
        flex-basis: auto;
        width: 100%;
    }
    .section1 .main-inner > i:last-child {
        max-width: 310px;
    }
    .main_cta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
    }
    .main_cta a {
        min-width: 0;
        min-height: 52px;
        flex: 1 1 calc(50% - 5px);
        padding: 6px 4px;
        border-radius: 15px;
        font-size: 15px;
        line-height: 1.25;
        text-align: center;
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    .main_cta .main_cta_company {
        display: inline-flex !important;
    }
    .intro_design_nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
        margin-bottom: 32px;
        border: 0;
    }
    .intro_design_nav a {
        display: flex;
        width: auto;
        min-width: 0;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        padding: 7px 4px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        font-size: 13px;
    }
    .intro_design_nav a.is-active {
        border: 1px solid #9b3653;
    }
    .join_design_page,
    .success_class_page {
        padding-bottom: 60px;
    }
    .join_intro h3,
    .intro_highlight_title {
        font-size: 19px;
    }
    .join_intro p {
        font-size: 15px;
    }
    .join_steps_section,
    .join_benefits,
    .success_intro,
    .success_class_page > section {
        margin-bottom: 44px;
    }
    .join_design_steps {
        display: block;
        margin-top: 18px;
    }
    .join_design_steps li {
        min-height: 0;
        margin-bottom: 36px;
        padding: 20px 16px;
    }
    .join_design_steps li:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -33px;
        transform: translateX(50%) rotate(90deg);
    }
    .join_design_steps strong,
    .success_apply_steps strong {
        font-size: 21px;
    }
    .join_design_steps h4 {
        font-size: 16px;
    }
    .join_design_steps p {
        font-size: 13px;
    }
    .join_benefits ul {
        display: block;
        padding-top: 19px;
    }
    .join_benefits li {
        margin-bottom: 19px;
        font-size: 16px;
    }
    .join_design_cta,
    .success_design_cta {
        margin-top: 28px;
        padding: 27px 18px;
    }
    .join_design_cta strong,
    .success_design_cta strong {
        font-size: 16px;
        line-height: 1.5;
    }
    .join_design_cta p {
        font-size: 14px;
        line-height: 1.6;
    }
    .join_design_cta a,
    .success_design_cta a {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .success_feature_grid,
    .success_apply_steps,
    .success_recommend_list {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .success_feature_grid article {
        padding: 19px;
    }
    .success_apply_steps {
        margin-top: 20px;
    }
    .success_lead_quote {
        margin-bottom: 44px;
        padding: 18px 0;
        font-size: 16px;
    }
    .success_overview_list {
        margin-bottom: 8px;
    }

    .sub-inner.join_design_page {
        width: min(90%, 360px);
        margin-right: auto;
        margin-left: auto;
    }
}

/* ==========================================================================
   주요행사 (section2) - 원본 클론
   ========================================================================== */

@font-face {
    font-family: 'Paperlogy-7Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2')
        format('woff2');
    font-weight: 700;
    font-style: normal;
}

.section2 {
    background: #ecf3ef;
    line-height: 1.4;
}

.section2 .section_inner {
    max-width: 93.75rem;
    margin: 0 auto;
    padding: 90px 0;
}

.section2 h2 {
    font-size: 35px;
    font-weight: 500;
    text-align: center;
    font-family: 'Paperlogy-7Bold', sans-serif;
    color: var(--color-black);
    padding-bottom: 60px;
}

.section2 .main-program {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 47px;
    list-style: none;
}

.section2 .main-program li {
    background: var(--color-white);
    text-align: center;
    height: 22.5rem;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.2s ease-in-out;
}

.section2 .main-program li:hover {
    box-shadow: 10px 10px 22px -6px rgba(207, 207, 207, 0.8);
}

.section2 .main-program li img {
    display: block;
    width: 100%;
}

.section2 .main-program li h3 {
    padding: 30px 0 10px;
    font-size: 28px;
    font-weight: 500;
    font-family: 'Paperlogy-7Bold', sans-serif;
    color: var(--color-black);
}

.section2 .main-program li p {
    font-family: pretendard;
    font-size: 18px;
    font-weight: 600;
    color: #9a9a9a;
}

.section2 .main-program li a {
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 20px;
    border: 1px solid #2f8054;
    border-radius: 5px;
    background-color: #2f8054;
    color: var(--color-white);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.section2 .main-program li a:hover {
    background-color: var(--color-white);
    color: #2f8054;
}

@media (max-width: 1600px) {
    .section2 img {
        max-width: 100%;
    }

    .section2 h2 {
        font-size: 30px;
    }

    .section2 .section_inner {
        width: 95%;
    }

    .section2 .main-program li h3 {
        font-size: 22px;
    }
}

@media (max-width: 1380px) {
    .section2 .main-program li h3 {
        font-size: 20px;
    }
}

@media (max-width: 1280px) {
    .section2 .main-program {
        gap: 35px;
    }

    .section2 .main-program li {
        height: 19.5rem;
    }

    .section2 .main-program li h3 {
        font-size: 19px;
    }

    .section2 .main-program li p {
        font-size: 16px;
    }
}

@media (max-width: 1030px) {
    .section2 .main-program {
        grid-template-columns: repeat(2, 1fr);
    }

    .section2 .main-program li p {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .section2 h2 {
        padding-bottom: 40px;
        font-size: 25px;
    }

    .section2 .section_inner {
        width: 90%;
        padding: 40px 0;
    }

    .section2 .main-program {
        grid-template-columns: repeat(1, 1fr);
    }

    .section2 .main-program li {
        height: auto;
        padding-bottom: 30px;
    }

    .section2 .main-program li p {
        padding: 0 15px;
        font-size: 14px;
    }

    .section2 .main-program li p br {
        display: none;
    }
}

@media (max-width: 600px) {
    .section2 h2 {
        padding-bottom: 25px;
        font-size: 23px;
    }

    .section2 .main-program li h3 {
        padding: 20px 0 10px;
    }
}

@media (max-width: 510px) {
    .section2 .main-program li p {
        letter-spacing: -0.06rem;
    }
}

/* ==========================================================================
   참여방법 (section3) - 원본 클론
   ========================================================================== */

.section3 {
    line-height: 1.4;
}

.section3 .section_inner {
    max-width: 93.75rem;
    margin: 0 auto;
    padding: 90px 0;
}

.section3 h2 {
    font-size: 35px;
    font-weight: 500;
    text-align: center;
    font-family: 'Paperlogy-7Bold', sans-serif;
    color: var(--color-black);
    padding-bottom: 60px;
}

.section3 .howto_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.section3 .howto_box .item {
    background-color: #f1ffef;
    border-radius: 30px;
    padding: 60px;
}

.section3 .howto_box .item .top_desc {
    position: relative;
}

.section3 .howto_box .item .img {
    position: absolute;
    top: -30px;
    right: -30px;
}

.section3 .howto_box .item h4 {
    padding-bottom: 30px;
    font-family: 'Paperlogy-7Bold', sans-serif;
    font-size: 30px;
    color: #2a4132;
}

.section3 .howto_box .item .p_desc1 {
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    line-height: 1.6em;
    color: var(--color-black);
}

.section3 .howto_box .item .p_desc1 span {
    color: #f60;
}

.section3 .howto_box .item .p_desc2 {
    font-size: 20px;
    font-weight: 600;
    color: #232e40;
}

.section3 .howto_box .item .w_in {
    display: flex;
    gap: 20px;
}

.section3 .howto_box .item .w_in > div {
    flex: 1 1 0%;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 20px 30px;
}

.section3 .howto_box .item.left .p_desc2 {
    margin-top: 40px;
}

.section3 .howto_box .item.left .w_in {
    margin-top: 40px;
}

.section3 .howto_box .item.left .w_in > div {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    font-size: 18px;
    font-weight: 600;
    color: #232e40;
}

.section3 .howto_box .item.left .w_in > div i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background-color: #e8ede6;
    color: #2a4132;
    font-size: 16px;
}

.section3 .howto_box .item.right .w_in {
    flex-direction: column;
    margin-top: 20px;
}

.section3 .howto_box .item.right .w_in > div h5 {
    font-size: 16px;
    font-weight: 600;
    color: #2a4132;
}

@media (max-width: 1600px) {
    .section3 h2 {
        font-size: 30px;
    }

    .section3 .section_inner {
        width: 95%;
    }
}

@media (max-width: 1440px) {
    .section3 .howto_box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .section3 h2 {
        padding-bottom: 40px;
        font-size: 25px;
    }

    .section3 .section_inner {
        width: 90%;
        padding: 40px 0;
    }

    .section3 .howto_box {
        gap: 20px;
    }

    .section3 .howto_box .item {
        border-radius: 20px;
        padding: 30px;
    }

    .section3 .howto_box .item h4 {
        padding-bottom: 10px;
        font-size: 24px;
    }

    .section3 .howto_box .item .p_desc1 {
        font-size: 0.95em;
    }

    .section3 .howto_box .item .p_desc2 {
        font-size: 17px;
    }

    .section3 .howto_box .item .w_in {
        flex-direction: column;
    }

    .section3 .howto_box .item .w_in > div {
        padding: 20px;
    }

    .section3 .howto_box .item .top_desc {
        padding-right: 130px;
    }

    .section3 .howto_box .item .img {
        top: 0;
        right: 0;
    }

    .section3 .howto_box .item .img img {
        width: 120px;
    }

    .section3 .howto_box .item.left .p_desc1 br {
        display: none;
    }

    .section3 .howto_box .item.left .p_desc2 {
        margin-top: 20px;
    }

    .section3 .howto_box .item.left .w_in {
        margin-top: 20px;
    }

    .section3 .howto_box .item.left .w_in > div {
        gap: 10px;
        padding: 20px;
        font-size: 16px;
    }

    .section3 .howto_box .item.left .w_in > div i {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .section3 h2 {
        padding-bottom: 25px;
        font-size: 23px;
    }
}

@media (max-width: 510px) {
    .section3 .howto_box .item {
        border-radius: 10px;
        padding: 20px;
    }

    .section3 .howto_box .item .top_desc {
        padding-right: 90px;
    }

    .section3 .howto_box .item h4 {
        padding-bottom: 5px;
        font-size: 20px;
    }

    .section3 .howto_box .item .p_desc1 {
        font-size: 14px;
        line-height: 1.4em;
    }

    .section3 .howto_box .item .p_desc2 {
        font-size: 16px;
    }

    .section3 .howto_box .item .img img {
        width: 80px;
    }

    .section3 .howto_box .item .w_in {
        gap: 10px;
    }
}

/* ==========================================================================
   채용공고 (section5) - 원본 클론
   ========================================================================== */

.section5 {
    background: var(--color-bg-muted);
    line-height: 1.4;
}

.section5 .section_inner {
    max-width: 93.75rem;
    margin: 0 auto;
    padding: 90px 0;
}

.section5 h2 {
    font-size: 35px;
    font-weight: 500;
    text-align: center;
    font-family: 'Paperlogy-7Bold', sans-serif;
    color: var(--color-black);
    padding-bottom: 60px;
}

.section5 .bgB {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 10px;
    margin-bottom: 40px;
    padding: 16px 40px;
    border-radius: 10px 10px 0 0;
    background: #2f8054;
    color: var(--color-white);
    font-size: 16px;
    text-decoration: none;
}

.section5 .bgB span {
    font-size: 30px;
}

.section5 .bgB:hover {
    background: #21593a;
    color: var(--color-white);
}

.section5 .cont2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    margin-bottom: 3.5rem;
}

.section5 .cont2 .contBox2 {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 2em 1.6em;
    border-radius: 10px;
    background-color: var(--color-white);
    cursor: pointer;
}

.section5 .cont2 .contBox2 .img_wrap {
    flex-shrink: 0;
    flex-basis: 200px;
}

.section5 .cont2 .contBox2 .img_wrap img {
    max-width: 100%;
    vertical-align: middle;
}

.section5 .cont2 .contBox2 .withAdd {
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
}

.section5 .cont2 .contBox2 h6 {
    padding: 0.2em 0 0.6em;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-text-navy-soft);
}

.section5 .cont2 .contBox2 p {
    font-size: 17px;
    font-weight: 500;
    color: #2a4132;
}

.section5 .cont2 .contBox2 p:last-child {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-faint);
}

@media (max-width: 1600px) {
    .section5 h2 {
        font-size: 30px;
    }

    .section5 .section_inner {
        width: 95%;
    }
}

@media (max-width: 1030px) {
    .section5 .bgB {
        margin-bottom: 20px;
        padding: 0.5em 1.5em;
        font-size: 17px;
    }

    .section5 .cont2 {
        grid-template-columns: 1fr;
        gap: 1em;
    }
}

@media (max-width: 768px) {
    .section5 h2 {
        padding-bottom: 40px;
        font-size: 25px;
    }

    .section5 .section_inner {
        width: 90%;
        padding: 40px 0;
    }
}

@media (max-width: 600px) {
    .section5 h2 {
        padding-bottom: 25px;
        font-size: 23px;
    }

    .section5 .cont2 .contBox2 {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .section5 .cont2 .contBox2 .img_wrap {
        flex-basis: auto;
    }

    .section5 .cont2 .contBox2 .img_wrap img {
        height: 60px;
    }

    .section5 .cont2 .contBox2 h6 {
        font-size: 17px;
    }

    .section5 .cont2 .contBox2 p {
        font-size: 15px;
    }

    .section5 .cont2 .contBox2 p:last-child {
        font-size: 14px;
    }
}

/* ==========================================================================
   Footer - 원본 클론
   ========================================================================== */

#footer {
    width: 100%;
    padding: 2em 0;
}

.footer_box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    color: var(--color-text-body);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
}

.footer_box .address {
    position: relative;
    display: flex;
    flex-direction: column;
    color: #9b9b9b;
}

.footer_box .address::before {
    position: absolute;
    top: 0;
    left: -50px;
    content: '';
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
}

.footer_box p {
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.4px;
}

.footer_box .address p {
    display: flex;
    gap: 0 20px;
}

@media (max-width: 1260px) {
    .footer_box {
        gap: 40px;
    }

    .footer_box .footer_logo {
        width: 95px;
    }

    .footer_box .address::before {
        left: -20px;
    }

    .footer_box .address p {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .footer_box {
        flex-direction: column;
        gap: 20px;
    }

    .footer_box .address p {
        justify-content: center;
        gap: 0 10px;
    }

    .footer_box .address::before {
        display: none;
    }
}

@media (max-width: 440px) {
    .footer_box .footer_logo {
        width: 75px;
    }
}

/* ==========================================================================
   서브페이지 공통 레이아웃 - 원본 클론
   (Sub Visual / Breadcrumb / Local Nav / Contents Wrapper)
   ========================================================================== */

.h_type1 {
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--color-black);
}

/* ---- Sub Visual (#spot) ---- */

#spot {
    position: relative;
    overflow: hidden;
    background: var(--color-brand-spot);
}

#spot .wrap_box {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    gap: 30px;
    padding: 50px;
}

#spot h2 {
    font-size: 2.2em;
    font-family: 'Paperlogy-7Bold', sans-serif;
    color: var(--color-white);
    letter-spacing: 0.04em;
}

/* 애니메이션 XX */
/* #spot::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 25%;
  z-index: 1;
  width: 400px;
  height: 400px;
  background: url("https://smartcj.or.kr/project/design/main2026/element3.png") center center / contain no-repeat;
  filter: grayscale(82%) brightness(0.6) sepia(20%) hue-rotate(115deg) saturate(4) contrast(2.5);
  opacity: 0.3;
  animation: floating-B 22s ease-in-out -5s infinite;
}

#spot::after {
  content: "";
  position: absolute;
  right: 21%;
  bottom: -20%;
  z-index: 1;
  width: 400px;
  height: 400px;
  background: url("https://smartcj.or.kr/project/design/main2026/element3.png") center center / contain no-repeat;
  filter: grayscale(82%) brightness(0.6) sepia(20%) hue-rotate(115deg) saturate(4) contrast(2.5);
  opacity: 0.3;
  animation: floating-A 18s ease-in-out infinite;
} */

@media (max-width: 1440px) {
    #spot::before,
    #spot::after {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 900px) {
    #spot .wrap_box {
        gap: 10px;
        padding: 15px;
    }

    #spot h2 {
        font-size: 2em;
    }

    #spot img {
        max-width: 40%;
        padding: 20px 0;
    }
}

@media (max-width: 800px) {
    #spot::before,
    #spot::after {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 782px) {
    #spot h2 {
        font-size: 1.6em;
    }
}

@media (max-width: 668px) {
    #spot h2 {
        font-size: 1.3em;
    }
}

@media (max-width: 500px) {
    #spot::before {
        width: 100px;
        height: 100px;
    }

    #spot::after {
        width: 130px;
        height: 130px;
    }
}

/* ---- Breadcrumb (.location) ---- */

.location {
    position: relative;
    height: 62px;
    background: var(--color-brand-primary-dark);
}

.location .stle_ul {
    list-style: none;
}

.location .stle_ul::after {
    display: block;
    clear: both;
    content: '';
}

.location .stle_ul > li {
    position: relative;
    float: left;
}

.location .stle_ul > li > a {
    box-sizing: content-box;
    display: block;
    min-width: 120px;
    padding: 0 70px 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    background: url('https://smartcj.or.kr/project/design/com/bg_stle_arrow.png') 90% center
        no-repeat;
    color: var(--color-white);
    font-size: 1rem;
    line-height: 62px;
}

.location .stle_ul > li.home > a {
    min-width: 50px;
    padding: 0;
    background: url('https://smartcj.or.kr/project/design/com/bg_home.png') center center no-repeat;
    text-indent: -9999px;
}

.location .stle_ul > li > ul {
    display: none;
    position: absolute;
    top: 62px;
    left: -1px;
    right: 0;
    z-index: 10000;
    list-style: none;
    background: var(--color-white);
}

.location .stle_ul > li:hover > ul {
    display: block;
}

.location .stle_ul > li > ul > li > a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 10px 0 8px 20px;
    border: 1px solid var(--color-border-light);
    border-top: none;
    color: var(--color-text-body);
    font-size: 0.95em;
    line-height: 1.2em;
}

.location .stle_ul > li > ul > li > a:hover {
    background: #f8f8f8;
}

@media (max-width: 858px) {
    .location .stle_ul > li:nth-child(4),
    .location .stle_ul > li:nth-child(5),
    .location .stle_ul > li:nth-child(6) {
        display: none !important;
    }
}

@media (max-width: 668px) {
    .location {
        display: none;
    }
}

/* ---- Local Nav (#snb) ---- */

#snb {
    width: 100%;
}

.snb_group {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    text-align: center;
    margin-top: 5em;
}

.snb_group > li > a {
    display: block;
    padding: 20px 40px;
    border-bottom: 2px solid #e1e1e1;
    color: var(--color-text-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03rem;
}

.snb_group > li > a:hover,
.snb_group > li > a.over {
    border-bottom: 2px solid var(--color-brand-primary);
    color: var(--color-brand-primary);
}

/* localNav가 빈 배열(탭 없는 서브페이지, 예: 설문조사)로 전달된 경우
   #snb/local-nav.ejs 구조는 그대로 두고 CSS로만 숨김 처리 */
#snb:not(:has(.snb_group li)) {
    display: none;
}

@media (max-width: 1000px) {
    #snb {
        width: 90%;
        margin: 0 auto;
    }
}

@media (max-width: 858px) {
    .snb_group {
        width: 100%;
        margin-top: 3em;
    }
}

@media (max-width: 770px) {
    .snb_group > li {
        width: 29%;
        margin-right: 1em;
    }

    .snb_group > li > a {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    #snb {
        box-sizing: border-box;
        width: min(90%, 360px);
        margin: 0 auto;
    }

    .snb_group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
        width: 100%;
        margin: 1.25em auto 0;
        padding: 0;
    }

    .snb_group > li {
        width: auto;
        margin: 0;
        padding: 0;
    }

    .snb_group > li > a {
        display: flex;
        box-sizing: border-box;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        padding: 7px 4px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        color: var(--color-text-heading);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -0.03rem;
        line-height: 1.2;
        text-align: center;
        word-break: keep-all;
    }

    .snb_group > li > a:hover,
    .snb_group > li > a.over {
        border: 1px solid var(--color-brand-primary);
        border-bottom: 1px solid var(--color-brand-primary);
        color: var(--color-brand-primary);
    }
}

/* ---- Contents Wrapper ---- */

#contents_box::after {
    display: block;
    clear: both;
    content: '';
}

#contents {
    width: 100%;
    padding: 70px 0 100px;
    color: var(--color-text-body);
    font-size: 1em;
}

#contents img {
    max-width: 100%;
}

.sub-inner {
    width: 1500px;
    margin: 0 auto;
}

@media (max-width: 1600px) {
    .sub-inner {
        width: 90%;
    }
}

@media (max-width: 544px) {
    #contents {
        padding: 30px 0 50px;
    }
}

/* ---- 행사안내 (event_info) ---- */
/* 첨부 디자인 이미지(카드형: 좌측 포스터 + 우측 라벨배지 정보리스트) 구조를
   재구성. 카드 배경/그림자, 라벨 배지 색상은 이미지 그대로가 아니라 기존
   :root 변수로 매핑(초록 라벨 배지 → --color-brand-primary, 실측 결과
   #1aa76f로 브랜드 그린 계열 중 --color-brand-primary(#289857)와 가장 근접). */

.event_info {
    display: flex;
    box-sizing: border-box;
    gap: 70px;
    margin-bottom: 60px;
    padding: 60px;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.event_info .img_box {
    width: 31%;
}

.event_info .img_box img {
    display: block;
    width: 100%;
}

.event_info .desc_box {
    width: 69%;
}

.event_info .desc_heading span {
    color: #646464;
    font-size: 17px;
    font-weight: 500;
}

.event_info .desc_heading h3 {
    margin-bottom: 20px;
    color: var(--color-text-heading);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.04rem;
}

.event_overview_list {
    display: flex;
    flex-direction: column;
}

.event_overview_list li {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider);
}

.event_overview_list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.event_overview_label {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    background: var(--color-brand-primary);
    color: var(--color-white);
    font-size: 0.9em;
    font-weight: 700;
    white-space: nowrap;
}

.event_overview_value {
    color: var(--color-text-dark);
    font-size: 1em;
    line-height: 1.6;
}

@media (max-width: 1600px) {
    .event_info .desc_heading h3 {
        margin-bottom: 10px;
        font-size: 22px;
    }

    .event_info .img_box {
        width: 40%;
    }

    .event_info .desc_box {
        width: 60%;
    }
}

@media (max-width: 1024px) {
    .event_info {
        gap: 40px;
        padding: 40px;
    }

    .event_info .img_box {
        width: 35%;
    }

    .event_info .desc_heading span {
        font-size: 15px;
    }

    .event_info .desc_heading h3 {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .event_overview_list li {
        gap: 16px;
        padding: 14px 0;
        font-size: 15px;
    }

    .event_overview_label {
        min-width: 76px;
        height: 28px;
    }
}

@media (max-width: 980px) {
    .event_info {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 40px;
        gap: 30px;
    }

    .event_info .img_box {
        width: 50%;
    }

    .event_info .desc_box {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .event_info {
        flex-direction: column-reverse;
        align-items: center;
        gap: 30px;
        padding: 30px;
    }

    .event_info .img_box img {
        width: 100%;
        max-width: 300px !important;
    }

    .event_overview_list li {
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 500px) {
    .event_info .img_box {
        width: 70%;
    }

    .event_overview_list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .event_overview_label {
        min-width: 76px;
    }
}

/* ---- 오시는 길 (event_map_guide) ---- */

.event_mapTit {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.event_mapTit h4 {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-black);
}

.event_mapTit span {
    position: relative;
    padding-left: 20px;
    color: #1a1a1a;
}

.event_mapTit span::before {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 1px;
    height: 1em;
    background: #cdcdcd;
    transform: translateY(-50%);
}

.event_map .event_map_placeholder,
.event_map .event_map_canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    background: #f1f1f1;
    color: #999;
    font-size: 0.9em;
}

@media (max-width: 800px) {
    .h_type1 {
        margin-bottom: 15px;
        font-size: 1.2em;
    }
}

@media (max-width: 768px) {
    .event_mapTit {
        flex-direction: column;
        gap: 5px;
    }

    .event_mapTit span {
        padding-left: 0;
    }

    .event_mapTit span::before {
        display: none;
    }

    .event_map .event_map_placeholder,
    .event_map .event_map_canvas {
        height: 300px;
    }
}

/* ==========================================================================
   참여방법 서브페이지 (/intro/join) - 원본 클론
   원본은 .howto_box를 여러 페이지에서 재사용하는 범용(unscoped) 스타일과
   홈페이지 section3 전용 오버라이드(색상 등)를 함께 갖고 있음.
   아래는 서브페이지에서 쓰이는 범용 스타일이며, 홈페이지의 .section3 .howto_box ...
   규칙이 이 규칙보다 selector 특이도가 높아 홈페이지 쪽에는 영향을 주지 않음.
   ========================================================================== */

.howto_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.howto_box .item {
    background-color: var(--color-bg-card);
    border-radius: 30px;
    padding: 60px;
}

.howto_box .item .top_desc {
    position: relative;
}

.howto_box .item .img {
    position: absolute;
    top: -30px;
    right: -30px;
}

.howto_box .item h4 {
    padding-bottom: 30px;
    font-family: 'Paperlogy-7Bold', sans-serif;
    font-size: 30px;
    color: #0d6135;
}

.howto_box .item .p_desc1 {
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    line-height: 1.6em;
}

.howto_box .item .p_desc1 span {
    color: #f60;
}

.howto_box .item .p_desc2 {
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-heading);
}

.howto_box .item .w_in {
    display: flex;
    gap: 20px;
}

.howto_box .item .w_in > div {
    flex: 1 1 0%;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 20px 30px;
}

.howto_box .item.left .p_desc2 {
    margin-top: 40px;
}

.howto_box .item.left .w_in {
    margin-top: 40px;
}

.howto_box .item.left .w_in > div {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    font-size: 18px;
    font-weight: 600;
    color: #232e40;
}

.howto_box .item.left .w_in > div i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background-color: #e4f5de;
    color: var(--color-text-heading);
    font-size: 16px;
}

.howto_box .item.right .w_in {
    flex-direction: column;
    margin-top: 20px;
}

.howto_box .item.right .w_in > div h5 {
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-heading);
}

@media (max-width: 1440px) {
    .howto_box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .howto_box {
        gap: 20px;
    }

    .howto_box .item {
        border-radius: 20px;
        padding: 30px;
    }

    .howto_box .item h4 {
        padding-bottom: 10px;
        font-size: 24px;
    }

    .howto_box .item .p_desc1 {
        font-size: 0.95em;
    }

    .howto_box .item .p_desc2 {
        font-size: 17px;
    }

    .howto_box .item .w_in {
        flex-direction: column;
    }

    .howto_box .item .w_in > div {
        padding: 20px;
    }

    .howto_box .item .top_desc {
        padding-right: 130px;
    }

    .howto_box .item .img {
        top: 0;
        right: 0;
    }

    .howto_box .item .img img {
        width: 120px;
    }

    .howto_box .item.left .p_desc1 br {
        display: none;
    }

    .howto_box .item.left .p_desc2 {
        margin-top: 20px;
    }

    .howto_box .item.left .w_in {
        margin-top: 20px;
    }

    .howto_box .item.left .w_in > div {
        gap: 10px;
        padding: 20px;
        font-size: 16px;
    }

    .howto_box .item.left .w_in > div i {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

@media (max-width: 500px) {
    .howto_box .item {
        border-radius: 10px;
        padding: 20px;
    }

    .howto_box .item .top_desc {
        padding-right: 90px;
    }

    .howto_box .item h4 {
        padding-bottom: 5px;
        font-size: 20px;
    }

    .howto_box .item .p_desc1 {
        font-size: 14px;
        line-height: 1.4em;
    }

    .howto_box .item .p_desc2 {
        font-size: 16px;
    }

    .howto_box .item .img img {
        width: 80px;
    }

    .howto_box .item .w_in {
        gap: 10px;
    }
}

/* ==========================================================================
   참여방법 서브페이지 (/intro/join)
   참고 사이트(cbnu.weme.kr/sub2)의 섹션 구성(접수 기간/방법/절차/양식 다운로드)을
   가져오되, 색상·라운드·카드 톤은 참고 사이트 원색이 아닌 우리 기존
   --color-* 변수(다른 서브페이지 카드/박스형 UI와 동일한 톤)로 매핑했다.
   ========================================================================== */

.join_section {
    margin-bottom: 56px;
}

.join_section:last-child {
    margin-bottom: 0;
}

.join_section_title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--color-text-heading);
}

.join_section_title .material-icons {
    color: var(--color-brand-primary);
    font-size: 1.2em;
}

.join_date {
    margin: 0;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-card);
    color: var(--color-brand-primary-dark);
    font-size: 1.2em;
    font-weight: 700;
}

.join_method_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.join_method_item {
    padding: 28px 24px;
    border-radius: 12px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-card);
}

.join_method_case {
    margin: 0 0 12px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--color-text-heading);
}

.join_method_desc {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--color-text-body);
}

.join_method_note {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 16px;
}

.join_method_note_label {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--color-text-body);
}

.join_email_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-brand-primary);
    font-weight: 600;
    text-decoration: none;
}

.join_email_link .material-icons {
    font-size: 1em;
}

.join_email_link:hover {
    color: var(--color-brand-primary-hover);
}

.join_step_list {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.join_step_item {
    display: flex;
    align-items: stretch;
    flex: 1;
}

.join_step_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 20px 15px;
    border-radius: 8px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-card);
    text-align: center;
}

.join_step_num {
    display: block;
    margin-bottom: 10px;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-brand-primary);
}

.join_step_text {
    margin: 0;
    font-size: 0.92em;
    line-height: 1.5;
    color: var(--color-text-heading);
}

.join_step_note {
    display: block;
    margin-top: 6px;
    font-size: 0.85em;
    font-weight: 400;
    color: var(--color-text-muted);
}

.join_step_arrow {
    flex-shrink: 0;
    align-self: center;
    width: 24px;
    margin: 0 8px;
    color: var(--color-border-light);
}

.join_download_list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.join_download_link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    color: var(--color-text-heading);
    font-weight: 700;
    text-decoration: none;
    transition:
        border-color 0.2s,
        color 0.2s;
}

.join_download_link .material-icons {
    color: var(--color-brand-primary);
    font-size: 1.1em;
}

.join_download_link:hover {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}

@media (max-width: 768px) {
    .join_method_list {
        grid-template-columns: 1fr;
    }

    .join_step_list {
        flex-direction: column;
        gap: 14px;
    }

    .join_step_item {
        flex-direction: column;
        align-items: stretch;
    }

    .join_step_arrow {
        margin: 0;
        transform: rotate(90deg);
    }
}

@media (max-width: 500px) {
    .join_section {
        margin-bottom: 40px;
    }

    .join_section_title {
        font-size: 1.2em;
    }

    .join_date {
        padding: 16px 18px;
        font-size: 1.05em;
    }

    .join_method_item {
        padding: 20px;
    }

    .join_download_list {
        flex-direction: column;
    }

    .join_download_link {
        justify-content: center;
    }
}

/* ==========================================================================
   입장 QR 발급 방법 서브페이지 (/intro/qr-guide)
   첨부 디자인 시안의 구조(QR 코드 박스 + 4단계 스텝형 안내)만 그대로 옮기고,
   시안의 청록색 계열 배색은 가져오지 않고 기존 --color-* 변수로 매핑했다.
   실제 QR 이미지가 없으므로 배치도 placeholder와 동일한 관례로 회색 박스 +
   안내 문구를 넣었다.
   ========================================================================== */

.qr_guide_section {
    margin-bottom: 56px;
}

.qr_guide_section:last-child {
    margin-bottom: 0;
}

.qr_guide_qr_section {
    text-align: center;
}

.qr_guide_qr_title {
    margin: 0 0 24px;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-text-heading);
}

.qr_guide_code_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    border-radius: 8px;
    background: var(--color-bg-muted);
}

.qr_guide_code_image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr_guide_code_placeholder_text {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.qr_guide_steps_title {
    margin: 0 0 20px;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-text-heading);
}

.qr_guide_notice_section {
    text-align: center;
}

.qr_step_list {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qr_step_item {
    display: flex;
    align-items: stretch;
    flex: 1;
}

.qr_step_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 20px 15px;
    border-radius: 8px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-card);
    text-align: center;
}

.qr_step_num {
    display: block;
    margin-bottom: 10px;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-brand-primary);
}

.qr_step_text {
    margin: 0 0 6px;
    font-size: 1em;
    font-weight: 700;
    color: var(--color-text-heading);
}

.qr_step_desc {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--color-text-body);
}

.qr_step_arrow {
    flex-shrink: 0;
    align-self: center;
    width: 24px;
    margin: 0 8px;
    color: var(--color-border-light);
}

@media (max-width: 768px) {
    .qr_step_list {
        flex-direction: column;
        gap: 14px;
    }

    .qr_step_item {
        flex-direction: column;
        align-items: stretch;
    }

    .qr_step_arrow {
        margin: 0;
        transform: rotate(90deg);
    }
}

@media (max-width: 500px) {
    .qr_guide_section {
        margin-bottom: 40px;
    }

    .qr_guide_code_box {
        width: 160px;
        height: 160px;
    }

    .qr_guide_qr_title {
        font-size: 1.1em;
    }

    .qr_guide_steps_title {
        font-size: 1.1em;
    }
}

/* ==========================================================================
   배치도 서브페이지 (/intro/floorplan)
   첨부 디자인 시안 중 "카드 틀 + 섹션 타이틀"과 같은 페이지 레이아웃
   요소만 코드로 재구성했다. 배치도 자체(건물 도면/구역 지도)는 실제
   이미지 파일 한 장을 그대로 넣는 영역이라, 개별 구역을 코드로 그리거나
   더미 데이터로 채우지 않고 자리만 잡아두는 placeholder만 둔다.
   색상은 이미지 원색을 가져오지 않고 기존 :root 변수로 매핑했다.
   ========================================================================== */

.floorplan_panel {
    box-sizing: border-box;
    padding: 50px;
    border: 10px solid var(--color-brand-primary-dark);
    border-radius: 16px;
    background: var(--color-white);
}

.floorplan_title {
    position: relative;
    display: inline-block;
    margin: 0 0 30px;
    padding: 14px 32px;
    border-radius: 40px;
    background: var(--color-brand-primary-dark);
    color: var(--color-white);
    font-size: 1.5em;
    font-weight: 700;
}

.floorplan_title::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 36px;
    border-width: 14px 10px 0 0;
    border-style: solid;
    border-color: var(--color-brand-primary-dark) transparent transparent transparent;
}

.floorplan_image_wrap {
    width: 100%;
}

/* 실제 배치도 이미지를 넣을 때 사용할 클래스.
   의도적으로 aspect-ratio를 강제하지 않아, 이미지 고유 비율 그대로 표시된다. */
.floorplan_image {
    display: block;
    width: 100%;
    height: auto;
}

/* 이미지 준비 전 자리표시자. 시안에서 실측한 배치도 영역 비율(가로:세로
   ≈ 1419:810, 약 1.75:1)로 자리만 잡아둔다 - 실제 이미지 교체 시 삭제. */
.floorplan_image_placeholder {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1419 / 810;
    border: 2px dashed var(--color-border-light);
    border-radius: 8px;
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: 1.1em;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .floorplan_panel {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .floorplan_panel {
        padding: 20px;
        border-width: 6px;
    }

    .floorplan_title {
        font-size: 1.2em;
        padding: 10px 22px;
    }

    .floorplan_image_placeholder {
        font-size: 0.95em;
    }
}

/* ==========================================================================
   게시판형 서브페이지 (공지사항/Q&A/자주묻는질문) - 원본 클론
   ========================================================================== */

#board {
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
}

#board_top {
    position: relative;
    height: 30px;
    margin-bottom: 20px;
    vertical-align: middle;
}

#board_top .post_info {
    float: left;
    padding: 5px 0 0 5px;
    color: var(--color-text-secondary);
    font-size: 0.95em;
    font-weight: 600;
}

#board_top .font_post {
    padding-left: 10px;
    color: var(--color-text-muted);
    font-weight: normal;
}

#board_top .search_info {
    float: right;
}

#board_top .search_info fieldset {
    border: 0;
}

#board_top .search_info legend {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
}

#board_top .select_search {
    box-sizing: border-box;
    min-width: 70px;
    height: 30px;
    padding: 3px 3px 3px 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 3px;
    color: var(--color-text-body);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 16px;
    font-weight: 400;
    appearance: none;
    background: var(--color-white)
        url('https://smartcj.or.kr/admode/module/board/images/kor/bg_select.png') no-repeat 100%
        50% / auto 80%;
}

#board_top .input_search {
    box-sizing: content-box;
    min-width: 120px;
    height: 28px;
    padding: 0 3px;
    border: 1px solid var(--color-border-light);
    border-radius: 3px;
    color: var(--color-text-body);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 16px;
    line-height: 28px;
}

#board_top .btn_search input {
    width: 66px;
    height: 30px;
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 16px;
    background: var(--color-black);
    border: 0;
    border-radius: 3px;
    color: var(--color-white);
    font-weight: 400;
    cursor: pointer;
}

@media (max-width: 1000px) {
    #board_top {
        height: auto;
    }

    #board_top .post_info {
        display: none;
    }

    #board_top.job_board_top .post_info {
        display: block;
        float: none;
    }

    #board_top .search_info {
        float: none;
        box-sizing: border-box;
        padding: 20px 0;
        border-top: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
        background: #f9f9f9;
        text-align: center;
    }

    #board_top .input_search {
        width: 130px;
    }
}

/* ---- Q&A 목록 전용 (qna-list.ejs) - 첨부 디자인 이미지 구조 참고,
   색상은 기존 --color-* 변수만 사용 ---- */

.qna_write_btn {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    padding: 8px 22px;
    border-radius: 20px;
    background: var(--color-brand-primary-dark);
    color: var(--color-white);
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
}

.qna_write_btn:hover {
    background: var(--color-brand-primary-hover);
}

/* 기본 .table_board_basic td는 white-space:nowrap + ellipsis로 셀 전체를
   한 줄 텍스트처럼 자르는데, Q&A 제목 셀은 [자물쇠 아이콘 + 제목 + 상태뱃지]
   3요소라 셀 레벨 ellipsis를 그대로 쓰면 뱃지까지 함께 잘려나간다.
   그래서 이 셀만 flex로 바꾸고, 제목 텍스트 쪽에만 ellipsis를 적용해
   상태뱃지는 항상 온전히 보이도록 분리했다. */
.table_board_basic td.qna_title_cell {
    display: flex;
    overflow: visible;
    align-items: center;
    gap: 8px;
    white-space: normal;
}

.qna_title_link {
    display: inline-flex;
    overflow: hidden;
    flex: 0 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.qna_lock_icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 1.05em;
}

.qna_title_text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qna_status_badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78em;
    font-weight: 600;
    white-space: nowrap;
}

.qna_status_pending {
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.qna_status_done {
    background: var(--color-brand-primary);
    color: var(--color-white);
}

@media (max-width: 1000px) {
    .qna_write_btn {
        position: static;
        display: block;
        width: fit-content;
        margin: 0 0 15px auto;
    }
}

@media (max-width: 600px) {
    .table_board_basic td.qna_title_cell {
        flex-wrap: wrap;
    }

    .qna_title_link {
        flex-basis: 100%;
    }
}

/* ---- Q&A 글쓰기 (qna-write-form.ejs) - 첨부 디자인 이미지의 표 형태
   글쓰기 폼 구조 참고, 색상은 기존 --color-* 변수만 사용 ---- */

.qna_write_required_note {
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-text-heading);
    color: var(--color-text-body);
    font-size: 0.9em;
}

.qna_req {
    margin-right: 2px;
    color: var(--color-brand-primary);
    font-weight: 700;
}

.qna_write_table {
    border-top: 1px solid var(--color-border);
}

.qna_write_row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border);
}

.qna_write_label {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 220px;
    align-items: center;
    padding: 18px 20px;
    background: var(--color-bg-card);
    color: var(--color-text-heading);
    font-weight: 700;
}

.qna_write_value {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding: 18px 20px;
}

.qna_write_row_content .qna_write_value {
    align-items: stretch;
}

.qna_write_input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 3px;
    background: var(--color-white);
    color: var(--color-text-dark);
    font-family: inherit;
    font-size: 0.95em;
}

.qna_write_input:focus {
    border-color: var(--color-brand-primary);
    outline: none;
}

.qna_write_input_short {
    max-width: 320px;
}

.qna_write_input_wide {
    max-width: 100%;
}

.qna_write_textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 400px;
    padding: 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 3px;
    background: var(--color-white);
    color: var(--color-text-dark);
    font-family: inherit;
    font-size: 0.95em;
    line-height: 1.6;
    resize: vertical;
}

.qna_write_textarea:focus {
    border-color: var(--color-brand-primary);
    outline: none;
}

.qna_write_value_password {
    flex-wrap: wrap;
    gap: 10px 16px;
}

.qna_write_hint {
    color: var(--color-text-muted);
    font-size: 0.85em;
    white-space: nowrap;
}

.qna_write_btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.qna_write_submit_btn {
    padding: 12px 36px;
    border: 0;
    border-radius: 3px;
    background: var(--color-brand-primary-dark);
    color: var(--color-white);
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
}

.qna_write_submit_btn:hover {
    background: var(--color-brand-primary-hover);
}

.qna_write_cancel_btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 36px;
    border: 1px solid var(--color-border-light);
    border-radius: 3px;
    background: var(--color-white);
    color: var(--color-text-heading);
    font-size: 0.95em;
    font-weight: 700;
    text-decoration: none;
}

.qna_write_cancel_btn:hover {
    border-color: var(--color-text-heading);
    background: var(--color-bg-muted);
}

@media (max-width: 768px) {
    .qna_write_label {
        flex-basis: 150px;
        padding: 14px;
        font-size: 0.95em;
    }

    .qna_write_value {
        padding: 14px;
    }

    .qna_write_textarea {
        min-height: 280px;
    }
}

@media (max-width: 600px) {
    .qna_write_row {
        flex-direction: column;
    }

    .qna_write_label {
        flex-basis: auto;
        padding-bottom: 8px;
    }

    .qna_write_input_short,
    .qna_write_input_wide {
        max-width: 100%;
    }

    .qna_write_btns {
        flex-direction: column;
    }

    .qna_write_submit_btn,
    .qna_write_cancel_btn {
        justify-content: center;
        width: 100%;
    }
}

/* ---- Q&A 상세 (qna-detail.ejs) - 첨부 디자인 이미지 구조 참고, 색상은
   기존 --color-* 변수만 사용. 질문 영역은 기존 게시판 상세(.view_head/
   .view_title/.view_content/.view_btns/.btn_list)를 그대로 재사용하고,
   답변 영역만 신규로 추가했다(board-detail.ejs 자체는 미수정). ---- */

.qna_detail_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.qna_detail_meta span {
    position: relative;
    padding-left: 15px;
}

.qna_detail_meta span:first-child {
    padding-left: 0;
}

.qna_detail_meta span:not(:first-child)::before {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 1px;
    height: 12px;
    background: var(--color-border-light);
    transform: translateY(-50%);
}

.qna_detail_meta b {
    margin-right: 4px;
    color: var(--color-text-heading);
    font-weight: 600;
}

.qna_answer_head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0 0;
}

.qna_answer_arrow {
    color: var(--color-text-muted);
    font-size: 1.1em;
}

.qna_answer_content {
    padding-top: 20px;
}

.qna_answer_empty {
    padding: 60px 0;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    text-align: center;
}

@media (max-width: 500px) {
    .qna_detail_meta {
        gap: 6px 12px;
        font-size: 0.85em;
    }

    .qna_answer_empty {
        padding: 40px 0;
    }
}

.table_board_basic caption {
    display: none;
}

.table_board_basic,
.table_board_basic td,
.table_board_basic th {
    border: 0;
    font-size: inherit;
}

.table_board_basic {
    table-layout: fixed;
    border-top: 2px solid var(--color-black);
}

.table_board_basic th {
    padding: 25px 5px;
    border-bottom: 1px solid #a2a2a2;
    color: #2a2a2a;
    font-weight: 600;
    font-size: 0.95em;
}

.table_board_basic tbody tr:hover {
    background: var(--color-bg-muted);
    transition: 0.3s;
}

.table_board_basic tbody td {
    background: none;
}

.table_board_basic td {
    overflow: hidden;
    padding: 25px 0;
    border-bottom: 1px solid #d7d7d7;
    color: var(--color-text-body);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Montserrat, 'Noto Sans KR', sans-serif;
    font-weight: 500;
}

.table_board_basic td a {
    color: var(--color-text-body);
}

.table_board_basic td img {
    vertical-align: middle;
}

.table_board_basic .td_left {
    padding-left: 15px;
    text-align: left;
    font-size: 1.05em;
}

.table_board_basic td.no_post {
    box-sizing: border-box;
    height: 140px;
    text-align: center;
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
}

@media (max-width: 767px) {
    .mobile_x {
        display: none !important;
    }
}

/* ---- 페이지네이션 (재사용: 게시판형 / 리스트형 공통) ---- */

.list_page {
    clear: both;
    padding: 15px 0;
    text-align: center;
}

.list_page a,
.list_page strong {
    box-sizing: content-box;
    display: inline-block;
    width: 32px;
    margin: 0 3px;
    border-radius: 30px;
    line-height: 32px;
    text-align: center;
    vertical-align: top;
}

.list_page .num {
    color: #404040;
}

.list_page .num:hover {
    color: var(--color-brand-primary);
    font-weight: 600;
}

.list_page strong {
    border: 1px solid var(--color-brand-primary);
    background: var(--color-brand-primary);
    color: var(--color-white);
}

.list_page .btn_first,
.list_page .btn_prev,
.list_page .btn_next,
.list_page .btn_last {
    overflow: hidden;
    width: 32px;
    border: 1px solid var(--color-border-light);
    text-indent: -9999px;
}

.list_page .btn_first {
    background: url('https://smartcj.or.kr/admode/module/board/images/kor/btn_first.png') center
        center / 70% no-repeat;
}

.list_page .btn_prev {
    background: url('https://smartcj.or.kr/admode/module/board/images/kor/btn_prev.png') center
        center / 70% no-repeat;
}

.list_page .btn_next {
    background: url('https://smartcj.or.kr/admode/module/board/images/kor/btn_next.png') center
        center / 70% no-repeat;
}

.list_page .btn_last {
    background: url('https://smartcj.or.kr/admode/module/board/images/kor/btn_last.png') center
        center / 70% no-repeat;
}

#board_bottom .btn_board_bottom {
    box-sizing: content-box;
    height: 50px;
    padding-top: 10px;
}

#board_bottom .btn_board_bottom ul {
    overflow: hidden;
}

#board_bottom .btn_board_bottom li {
    float: left;
    padding-right: 5px;
}

/* ==========================================================================
   자주묻는 질문 (FAQ) 아코디언 - 구조만 참고사이트(cbnu.weme.kr) 참고,
   색상/폰트는 우리 사이트 기존 규칙 재사용
   (포인트그린 #289857, 카드배경 #f4f7f3, 보더 #e7e7e7, 본문색 #666, 라벨색 #191919)
   ========================================================================== */

.faq_empty {
    padding: 60px 0;
    color: var(--color-text-body);
    text-align: center;
}

.faq_list {
    list-style: none;
}

.faq_item {
    margin-bottom: 10px;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    background: var(--color-bg-card);
    overflow: hidden;
}

.faq_question {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 50px 15px 20px;
    border: 0;
    background: none;
    color: var(--color-text-heading);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 1.125em;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.faq_num {
    color: var(--color-text-heading);
}

.faq_question::before,
.faq_question::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    width: 16px;
    height: 2px;
    color: var(--color-brand-primary);
    background: currentColor;
    border-radius: 2px;
    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}

.faq_question::before {
    transform: translateY(-50%) rotate(90deg);
}

.faq_question::after {
    transform: translateY(-50%);
}

.faq_item.active .faq_question::before {
    opacity: 0;
    transform: translateY(-50%) rotate(90deg) scaleX(0);
}

.faq_answer {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 20px;
    background: var(--color-white);
    color: var(--color-text-body);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 1em;
    line-height: 1.6;
    opacity: 0;
    overflow: hidden;
    transition:
        grid-template-rows 0.3s ease,
        padding 0.3s ease,
        opacity 0.2s ease;
}

.faq_item.active .faq_answer {
    grid-template-rows: 1fr;
    padding: 15px 20px;
    opacity: 1;
}

.faq_answer_inner {
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 500px) {
    .faq_question {
        padding: 15px 45px 15px 15px;
        font-size: 1em;
    }

    .faq_answer {
        padding: 0 15px;
        font-size: 0.95em;
    }

    .faq_item.active .faq_answer {
        padding: 12px 15px;
    }

    .faq_question::before,
    .faq_question::after {
        right: 15px;
    }
}

/* ==========================================================================
   홍보자료 (홍보영상/카드뉴스) - 구조만 참고사이트(cbnu.weme.kr) 참고,
   색상/폰트는 우리 사이트 기존 규칙 재사용
   (포인트그린 #289857, 카드배경 #f4f7f3, 보더 #e7e7e7, 라벨색 #191919, 본문색 #666)
   탭 active 스타일은 Local Nav(.snb_group)와 동일한 초록 밑줄을 재사용
   ========================================================================== */

.promo_tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    list-style: none;
}

.promo_tabs a {
    display: inline-block;
    padding: 8px 10px;
    /* border-bottom: 2px solid #e1e1e1; */
    color: var(--color-text-heading);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 1.1rem;
    font-weight: 700;
}

.promo_tabs a.over {
    /* border-bottom: 2px solid var(--color-brand-primary); */
    color: #fff;
    background-color: var(--color-brand-primary);
    font-weight: 400;
    border-radius: 50px;
}

.promo_state {
    margin-bottom: 20px;
    color: var(--color-text-secondary);
    font-size: 0.95em;
    font-weight: 600;
}

.promo_state span {
    padding: 0 4px;
    color: var(--color-text-muted);
    font-weight: 400;
}

.promo_empty {
    padding: 60px 0;
    color: var(--color-text-body);
    text-align: center;
}

.promo_grid {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
    list-style: none;
}

.promo_grid_video {
    grid-template-columns: repeat(2, 1fr);
}

.promo_grid_card,
.promo_grid_etc {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
}

.promo_thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    background: var(--color-bg-card);
}

.promo_thumb iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* 카드뉴스 썸네일 - 참고 사이트(cbnu.weme.kr/boardList?id=policy) 실측 결과
   모서리가 둥글지 않은 사각형 썸네일이라, 공용 .promo_thumb(둥근 모서리,
   홍보영상과 공유)과 달리 카드뉴스 그리드 안에서만 각지게 재정의.
   실제 이미지가 없어 회색 placeholder 배경 + 안내 텍스트로 대체. */
.promo_grid_card .promo_thumb,
.promo_grid_etc .promo_thumb {
    border-radius: 0;
    background: var(--color-bg-muted);
}

.promo_thumb_card {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 0.95em;
    font-weight: 500;
}

.promo_thumb_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo_grid_card .promo_thumb_card img {
    object-fit: contain;
}

/* 홍보자료 > 기타: 포스터 썸네일을 A4 비율로 잘림 없이 전체 표시 */
.promo_grid_etc .promo_thumb_card {
    aspect-ratio: 210 / 297;
    background: #f5f5f5;
}
.promo_grid_etc .promo_thumb_card img {
    object-fit: contain;
}

.promo_title {
    margin-top: 12px;
    color: var(--color-text-heading);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 1em;
    font-weight: 500;
    text-align: center;
}

/* 카드뉴스 제목 - 참고 사이트 실측(18px/600)에 맞춰 카드뉴스 그리드
   안에서만 더 굵게. 홍보영상 쪽 .promo_title은 그대로 유지. */
.promo_grid_card .promo_title,
.promo_grid_etc .promo_title {
    font-size: 1.1em;
    font-weight: 700;
}

@media (max-width: 900px) {
    .promo_grid_card,
    .promo_grid_etc {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .promo_grid_video {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .promo_tabs {
        gap: 12px;
    }

    .promo_tabs a {
        font-size: 1em;
    }

    .promo_grid {
        gap: 20px;
    }

    .promo_grid_card,
    .promo_grid_etc {
        grid-template-columns: 1fr;
    }
}

.promo_card_link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   카드뉴스 상세 (promo-card-detail-gallery.ejs) - 참고 사이트
   (cbnu.weme.kr/boardView?id=policy) 실측: 상단 한 줄 안내문 + 이미지
   6장 내외가 세로로 순서대로 나열, 이미지 간 간격 약 24px, 이미지 비율
   16:9, 하단 좌측 정렬 "목록" 버튼(작고 옅은 테두리형). 이미지 파일이
   없어 회색 placeholder로 대체. 색상은 기존 --color-* 변수만 사용.
   ========================================================================== */

.promo_card_gallery {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 30px;
}

.promo_card_gallery_item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: 1em;
}

.promo_card_slider {
    margin-bottom: 30px;
}

.promo_card_slider_hint {
    display: none;
    width: fit-content;
    margin: 0 auto 14px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(128, 47, 70, 0.1);
    color: var(--color-brand-primary);
    font-size: 0.95rem;
    font-weight: 800;
}

.promo_card_slider_hint span {
    padding: 0 4px;
    font-size: 1.15em;
}

.promo_card_slider_stage {
    position: relative;
}

.promo_card_gallery.promo_card_gallery--slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--color-brand-primary) #eadfe3;
    scrollbar-width: auto;
}

.promo_card_gallery--slider::-webkit-scrollbar {
    height: 12px;
}

.promo_card_gallery--slider::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eadfe3;
}

.promo_card_gallery--slider::-webkit-scrollbar-thumb {
    border: 2px solid #eadfe3;
    border-radius: 999px;
    background: var(--color-brand-primary);
}

.promo_card_slide {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 56px 16px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.promo_card_slide .promo_card_gallery_item,
.promo_card_slide img.promo_card_gallery_item {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 78vh;
    max-height: 78svh;
    aspect-ratio: auto;
    object-fit: contain;
}

.promo_card_slider_arrow {
    position: absolute;
    top: calc(50% - 10px);
    z-index: 2;
    display: grid;
    width: 46px;
    height: 58px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: rgba(128, 47, 70, 0.92);
    box-shadow: 0 5px 16px rgba(35, 46, 65, 0.2);
    color: #fff;
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.promo_card_slider_arrow--prev {
    left: 8px;
}

.promo_card_slider_arrow--next {
    right: 8px;
}

.promo_card_slider_arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.promo_card_slider_count {
    margin: 12px 0 0;
    color: var(--color-text-muted);
    font-weight: 700;
    text-align: center;
}

.promo_card_slider_count strong {
    color: var(--color-brand-primary);
}

@media (max-width: 768px) {
    .promo_card_slider_hint {
        display: block;
    }
}

img.promo_card_gallery_item {
    display: block;
    object-fit: cover;
}

/* 홍보자료 > 기타 상세 이미지는 원본 비율을 유지해 잘림 없이 전체 노출 */
.promo_card_detail_etc img.promo_card_gallery_item {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.promo_card_detail_btns {
    padding-top: 10px;
    text-align: center;
}

.promo_card_list_btn {
    display: inline-block;
    padding: 12px 40px;
    border-radius: 3px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
}

.promo_card_list_btn:hover {
    background: var(--color-brand-primary);
}

@media (max-width: 500px) {
    .promo_card_detail_intro {
        margin-bottom: 20px;
        padding-bottom: 15px;
        font-size: 0.9em;
    }

    .promo_card_gallery {
        gap: 16px;
    }

    .promo_card_slider_hint {
        margin-bottom: 10px;
        padding: 7px 13px;
        font-size: 0.85rem;
    }

    .promo_card_slide {
        padding: 0 42px 12px;
    }

    .promo_card_slider_arrow {
        width: 36px;
        height: 48px;
        border-radius: 8px;
        font-size: 30px;
    }

    .promo_card_slider_arrow--prev {
        left: 2px;
    }

    .promo_card_slider_arrow--next {
        right: 2px;
    }
}

/* ==========================================================================
   게시판 상세보기 (공지사항/Q&A 공용) - 원본에 참고할 상세 페이지가 없어
   기본 스펙대로 구현. 색상은 기존 규칙 재사용
   (포인트그린 #289857, 라벨색 #191919, 본문/메타 텍스트 #666/#858585, 보더 #ddd/#eee)
   ========================================================================== */

.view_empty {
    padding: 60px 0;
    color: var(--color-text-body);
    text-align: center;
}

.view_head {
    padding: 30px 0 20px;
    border-bottom: 2px solid var(--color-black);
}

.view_title {
    margin-bottom: 15px;
    color: var(--color-text-heading);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.4;
}

.view_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.view_meta span {
    position: relative;
    padding-left: 15px;
}

.view_meta span:first-child {
    padding-left: 0;
}

.view_meta span:not(:first-child)::before {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 1px;
    height: 12px;
    background: var(--color-border-light);
    transform: translateY(-50%);
}

.view_file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-divider);
    color: var(--color-text-body);
    font-size: 0.95em;
}

.view_file img {
    width: 16px;
    height: 16px;
}

.view_file a {
    color: var(--color-text-body);
}

.view_file a:hover {
    color: var(--color-brand-primary);
    text-decoration: underline;
}

.view_file_links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.view_content {
    min-height: 200px;
    padding: 40px 0;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-dark);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 1em;
    line-height: 1.8;
}

.view_content img {
    max-width: 100%;
}

.notice_attached_images {
    display: grid;
    gap: 24px;
    width: 100%;
    max-width: 960px;
    margin: 32px auto 0;
}

.notice_attached_image_link {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.notice_attached_image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    max-height: 80svh;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    object-fit: contain;
}

@media (min-width: 900px) {
    .notice_attached_images--multiple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 1200px;
        align-items: start;
    }
}

@media (max-width: 640px) {
    .notice_attached_images {
        gap: 16px;
        margin-top: 24px;
    }

    .notice_attached_image_link {
        width: 100%;
    }
}

.view_nav {
    border-bottom: 1px solid var(--color-border-light);
}

.view_nav_item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid var(--color-divider);
    color: var(--color-text-body);
    text-decoration: none;
}

.view_nav_item:hover .view_nav_title {
    color: var(--color-brand-primary);
    text-decoration: underline;
}

.view_nav_label {
    flex-shrink: 0;
    width: 90px;
    color: var(--color-text-heading);
    font-weight: 600;
}

.view_nav_title {
    overflow: hidden;
    color: var(--color-text-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.view_btns {
    padding: 30px 0 0;
    text-align: center;
}

.appdetail_page .view_btns {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.appdetail_page .view_btns .btn_list {
    box-sizing: border-box;
    width: 112px;
    padding: 12px 0;
    font-family: inherit;
    font-size: inherit;
    line-height: normal;
    text-align: center;
}

.appdetail_delete_form {
    display: block;
}

.appdetail_delete_btn {
    border: 0;
    cursor: pointer;
}

.btn_list {
    display: inline-block;
    padding: 12px 40px;
    border-radius: 3px;
    background: var(--color-black);
    color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
}

.btn_list:hover {
    background: var(--color-brand-primary);
}

@media (max-width: 500px) {
    .view_title {
        font-size: 1.2em;
    }

    .view_nav_item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .view_nav_label {
        width: auto;
    }

    .view_nav_title {
        width: 100%;
        white-space: normal;
    }
}

/* ==========================================================================
   설문조사 - 구조만 참고사이트(cbnu.weme.kr/sub7) 참고, 색상/폰트는
   우리 사이트 기존 규칙 재사용
   (포인트그린 #289857, 카드배경 #f4f7f3, 보더 #e7e7e7, 라벨색 #191919,
   본문색 #666/#333, 버튼은 기존 .btn_list와 동일한 검정→그린 hover 패턴)
   ========================================================================== */

.survey_intro {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-body);
    font-size: 0.95em;
    line-height: 1.7;
}

.survey_list {
    list-style: none;
}

.survey_box {
    margin-bottom: 20px;
    padding: 25px 30px;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    background: var(--color-bg-card);
}

.survey_title {
    margin-bottom: 15px;
    color: var(--color-text-heading);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 1.125em;
    font-weight: 600;
    line-height: 1.5;
}

.survey_required {
    margin-left: 4px;
    color: var(--color-brand-primary);
}

.survey_options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.survey_options label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-dark);
    font-size: 0.95em;
    cursor: pointer;
}

.survey_options input[type='radio'],
.survey_options input[type='checkbox'] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-brand-primary);
}

.survey_group_row {
    margin-bottom: 16px;
}

.survey_group_row:last-child {
    margin-bottom: 0;
}

.survey_group_label {
    margin-bottom: 8px;
    color: var(--color-text-heading);
    font-weight: 600;
    font-size: 0.95em;
}

.survey_etc_label {
    gap: 6px !important;
}

.survey_etc_input {
    box-sizing: border-box;
    width: 160px;
    padding: 5px 8px;
    border: 0;
    border-bottom: 1px solid #ccc;
    background: none;
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 0.9em;
}

.survey_textarea {
    box-sizing: border-box;
    width: 100%;
    height: 90px;
    padding: 12px 15px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-dark);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 0.95em;
    line-height: 1.6;
    resize: vertical;
}

.survey_submit {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 16px;
    border: 0;
    border-radius: 3px;
    background: var(--color-black);
    color: var(--color-white);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
}

.survey_submit:hover {
    background: var(--color-brand-primary);
}

.survey_privacy {
    margin: 28px 0 18px;
    padding: 25px 30px;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    background: var(--color-bg-card);
}

.survey_privacy_title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--color-text-heading);
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.5;
}

.survey_privacy_badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    background: #1f6fe5;
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
}

.survey_privacy_box {
    position: relative;
    margin-bottom: 8px;
    padding: 16px 18px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-body);
    font-size: 0.92em;
    line-height: 1.7;
    max-height: 220px;
    transition: max-height 0.25s ease;
}

.survey_privacy_box:not(.is-expanded)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--color-white));
}

.survey_privacy_box.is-expanded {
    max-height: 4000px;
}

.survey_privacy_toggle {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 16px;
    padding: 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: var(--color-bg-muted);
    color: var(--color-text-heading);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
}

.survey_privacy_toggle:hover {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}

.survey_privacy_box p {
    margin: 0 0 12px;
}

.survey_privacy_detail_title {
    margin: 8px 0 8px !important;
    color: var(--color-text-heading);
    font-weight: 700;
}

.survey_privacy_detail_list {
    margin: 0;
    padding-left: 1.2em;
}

.survey_privacy_detail_list li {
    margin-bottom: 4px;
}

.survey_privacy_options {
    margin-top: 4px;
}

.survey_hub {
    padding: 10px 0 40px;
}

.survey_hub_lead {
    margin: 0 0 28px;
    color: var(--color-text-body);
    font-size: 1.05em;
    line-height: 1.6;
    text-align: center;
}

.survey_hub_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.survey_hub_card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
    padding: 36px 28px;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    background: var(--color-bg-card);
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.survey_hub_card:hover {
    border-color: var(--color-brand-primary);
    background: #fff;
    transform: translateY(-2px);
}

.survey_hub_card strong {
    color: var(--color-text-heading);
    font-size: 1.35em;
    font-weight: 700;
}

.survey_hub_card span {
    color: var(--color-text-body);
    font-size: 0.95em;
    line-height: 1.5;
}

.survey_profile {
    margin-bottom: 20px;
    padding: 25px 30px;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    background: var(--color-bg-card);
}

.survey_profile_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

.survey_profile_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-text-heading);
    font-size: 0.92em;
    font-weight: 600;
}

.survey_profile_field input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-dark);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 0.95em;
    font-weight: 400;
}

.survey_field_note {
    color: var(--color-text-muted);
    font-size: 0.82em;
    font-weight: 400;
}

.survey_profile_hint {
    margin: 12px 0 0;
    color: var(--color-text-body);
    font-size: 0.88em;
    line-height: 1.5;
}

.survey_profile_hint.prereg_verify_note_success {
    color: #16803c;
    font-weight: 700;
}

.survey_profile_hint.prereg_verify_note_error {
    color: #c62828;
    font-weight: 700;
}

.prereg_verify_group {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.prereg_verify_input {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    max-width: 260px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-dark);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 0.95em;
}

.prereg_verify_btn {
    flex-shrink: 0;
    width: auto;
    margin-top: 0;
    padding: 10px 18px;
    font-size: 0.9em;
}

.prereg_code_row {
    margin-top: 10px;
}

.prereg_phone_row {
    margin-bottom: 16px;
}

.survey_empty {
    margin: 0 0 20px;
    padding: 24px;
    border: 1px dashed var(--color-border-soft);
    border-radius: 8px;
    color: var(--color-text-body);
    text-align: center;
    line-height: 1.6;
}

@media (max-width: 500px) {
    .survey_box {
        padding: 20px;
    }

    .survey_title {
        font-size: 1em;
    }

    .survey_options {
        gap: 10px 16px;
    }

    .survey_etc_input {
        width: 120px;
    }

    .survey_privacy {
        padding: 20px;
    }

    .survey_hub_grid,
    .survey_profile_grid {
        grid-template-columns: 1fr;
    }

    .survey_hub_card {
        min-height: 140px;
        padding: 28px 22px;
    }

    .survey_profile {
        padding: 20px;
    }

    .prereg_verify_input {
        max-width: none;
    }

    .prereg_verify_btn {
        padding: 10px 12px;
        white-space: nowrap;
    }
}

/* ==========================================================================
   참여기업 (현장채용관 / 간접채용관 / 온라인 입사지원 기업) - 원본 클론
   원본(smartcj.or.kr) 채용관의 검색창 + 필터(근무지역/직종구분/최종학력/근무형태
   체크박스) + 카드형 리스트 구조를 실측 클래스명 그대로 재사용.
   포인트그린 #289857 등 기존 색상 변수 재사용.
   ========================================================================== */

/* 카테고리 탭 (tabType1) */
.tabType1 ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding-bottom: 60px;
    box-sizing: border-box;
}

.tabType1 ul li {
    display: flex;
    align-items: center;
}

.tabType1 ul li + li::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 16px;
    background: var(--color-border-light);
}

.tabType1 ul li a {
    font-size: 22px;
    font-weight: 700;
    color: #d8d8d8;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.12s;
}

.tabType1 ul li a:hover {
    color: #444;
}

.tabType1 ul li a.on {
    color: var(--color-brand-primary);
    font-weight: 700;
}

/* 회사명 검색 */
.company_search {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.company_search p {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #313131;
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 22px;
    font-weight: 700;
}

.company_search p b {
    color: var(--color-brand-primary);
    font-weight: 700;
}

.company_search form {
    width: 60%;
}

.search-container {
    display: flex;
    width: 100%;
}

#search-bar {
    width: 100%;
    padding: 14px 24px;
    border: 1px solid var(--color-border-light);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 16px;
}

#search-bar:focus {
    outline: none;
    border-color: var(--color-brand-primary);
}

.search-btn {
    padding: 14px 26px;
    border: 0;
    border-radius: 0 999px 999px 0;
    background-color: var(--color-brand-primary);
    color: var(--color-white);
    cursor: pointer;
}

.search-btn:hover {
    background-color: var(--color-brand-primary-hover);
}

.search-btn i {
    font-size: 16px;
}

/* 필터 (근무지역 / 직종구분 / 최종학력 / 근무형태) */
fieldset.job_search {
    margin-bottom: 30px;
    border: 0;
}

.job_search ul.tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #dedede;
    list-style: none;
    color: #555;
}

.job_search ul.tabs li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 30px;
    background: #f6f6f6;
    color: var(--color-black);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.job_search ul.tabs li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    height: 25px;
    background: #dedede;
}

.job_search ul.tabs li .material-icons {
    color: #d8d8d8;
    line-height: 20px;
}

.job_search ul.tabs li.active,
.job_search ul.tabs li.active .material-icons {
    color: var(--color-brand-primary) !important;
}

.job_search .tab_content {
    padding: 30px;
    background: #fbfbfb;
    color: var(--color-black);
    font-size: 20px;
    font-weight: 600;
}

.job_search .inChk_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.job_search .inpChk {
    display: flex;
    align-items: center;
}

.job_search .inpChk input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background: url('https://smartcj.or.kr/project/design/com/checkbox.png') no-repeat;
    background-size: contain;
    appearance: none;
    cursor: pointer;
}

.job_search .inpChk input[type='checkbox']:checked {
    background-image: url('https://smartcj.or.kr/project/design/com/checkbox_checked.png');
}

.job_search .inpChk label {
    cursor: pointer;
}

.job_search .inpChk .txt {
    font-size: 16px;
}

.btn_search {
    display: flex;
    justify-content: flex-end;
}

.btn_search button {
    padding: 15px 35px;
    border: 0;
    border-radius: 5px;
    background: var(--color-brand-primary);
    color: var(--color-white);
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}

.btn_search button:hover {
    background: var(--color-black);
}

/* 채용정보 카드 리스트 */
.job_empty {
    padding: 60px 0;
    color: var(--color-text-body);
    text-align: center;
}

.inner .cont2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    margin-bottom: 3.5rem;
}

.inner .cont2 .contBox2 {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 2em 1.6em;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.inner .cont2 .contBox2 .img_wrap {
    flex-shrink: 0;
    flex-basis: 200px;
}

.inner .cont2 .contBox2 .job_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
    border-radius: 8px;
    color: var(--color-white);
    background-color: grey;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.inner .cont2 .contBox2 .job_logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    background: var(--color-white);
}

.inner .cont2 .contBox2 .withAdd {
    font-family: Pretendard, 'Malgun Gothic', 'Open Sans', '나눔 고딕', 'Nanum Gothic', 돋움, dotum;
}

.inner .cont2 .contBox2 p {
    font-size: 20px;
    font-weight: 700;
    color: #099d5d;
}

.inner .cont2 .contBox2 h6 {
    padding: 0.2em 0 0.6em;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-navy-soft);
}

.inner .cont2 .contBox2 p:last-child {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-faint);
}

@media (max-width: 1440px) {
    .job_search ul.tabs li {
        font-size: 18px;
    }

    .job_search ul.tabs {
        height: 60px;
    }

    .job_search .tab_content {
        font-size: 18px;
    }
}

@media (max-width: 1024px) {
    .job_search ul.tabs li {
        padding: 15px;
        font-size: 17px;
    }

    .job_search .tab_content {
        font-size: 17px;
    }

    .job_search .inChk_wrapper {
        gap: 15px;
    }

    .job_search ul.tabs {
        height: auto;
        grid-template-columns: 1fr 1fr;
    }

    .job_search ul.tabs li:nth-child(2)::after {
        display: none;
    }
}

@media (max-width: 1000px) {
    .inner .cont2 {
        grid-template-columns: 1fr;
        gap: 1em;
    }
}

@media (max-width: 768px) {
    .tabType1 ul {
        padding-bottom: 30px;
    }

    .tabType1 ul li + li::before {
        margin: 0 12px;
    }

    .tabType1 ul li a {
        font-size: 16px;
        line-height: 2;
    }

    .company_search p {
        font-size: 17px;
    }

    .company_search form {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .inner .cont2 .contBox2 {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .inner .cont2 .contBox2 .img_wrap {
        flex-basis: auto;
    }

    .inner .cont2 .contBox2 h6 {
        font-size: 17px;
    }

    .inner .cont2 .contBox2 p {
        font-size: 15px;
    }

    .inner .cont2 .contBox2 p:last-child {
        font-size: 14px;
    }
}

@media (max-width: 425px) {
    .job_search ul.tabs li {
        padding: 10px 15px;
        font-size: 15px;
    }

    .job_search .tab_content {
        padding: 15px;
        font-size: 15px;
    }

    .btn_search button {
        width: 100%;
        padding: 10.5px 0;
        font-size: 16px;
    }
}

/* 카드 클릭 이동 지원: .contBox2가 div에서 a로 바뀌어도 기존 카드 스타일이
   그대로 보이도록 링크 기본 스타일만 무력화 (레이아웃/색상 변경 없음) */
.inner .cont2 .contBox2 {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* ==========================================================================
   참여기업 채용정보 상세 (현장/간접/온라인 공용) - 재구성
   참고 사이트(cbnu.weme.kr/RecrBoardView)의 3단 구성(기업정보/채용정보/사전접수)
   "구조"만 참고. 색상은 참고 사이트 값을 가져오지 않고 기존 :root 변수만 사용.
   기업정보 카드/표 라벨-값 목록은 기존 나의 지원현황 상세(.appdetail_*)와
   동일한 비율(로고 220x110, 카드 padding 30px 등)을 재사용해 두 상세 화면간
   시각적 일관성을 유지. 목록 복귀 버튼은 기존 .view_btns/.btn_list 재사용.
   ========================================================================== */

.jobdetail_section {
    margin-bottom: 48px;
}

.jobdetail_apply_notice {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-heading);
}

.jobdetail_section_title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--color-text-heading);
    font-size: 1.7rem;
    font-weight: 700;
}

.jobdetail_section_title .material-icons {
    color: var(--color-brand-primary);
    font-size: 0.85em;
}

.jobdetail_apply_desc {
    margin: 28px 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(128, 47, 70, 0.16);
    border-radius: 6px;
    background: rgba(128, 47, 70, 0.06);
    color: var(--color-text-heading);
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: #e63946;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.jobdetail_apply_desc + .jobdetail_submit_wrap {
    padding-top: 16px;
}

/* 기업정보 */
.jobdetail_company_card {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.jobdetail_logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 110px;
    border-radius: 8px;
    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    background: var(--color-bg-muted);
}

.jobdetail_logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    background: var(--color-white);
}

.jobdetail_company_kv {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jobdetail_company_kv_row {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.jobdetail_kv_label {
    flex-shrink: 0;
    width: 100px;
    color: var(--color-text-heading);
    font-weight: 600;
}

.jobdetail_kv_value {
    color: var(--color-text-body);
    flex: 1;
    min-width: 0;
}

.jobdetail_preline,
.appdetail_preline {
    white-space: pre-line;
}

.jobdetail_company_name {
    color: var(--color-text-heading);
    font-weight: 700;
}

.jobdetail_link {
    color: var(--color-text-body);
    text-decoration: underline;
}

.jobdetail_link:hover {
    color: var(--color-brand-primary);
}

/* 채용정보 표 */
.jobdetail_table_wrap {
    overflow-x: auto;
    margin-bottom: 20px;
}

.jobdetail_table {
    width: 100%;
    border-collapse: collapse;
}

.jobdetail_table caption {
    display: none;
}

.jobdetail_table th {
    padding: 14px 16px;
    background: var(--color-brand-primary-dark);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.9em;
    text-align: center;
    white-space: nowrap;
}

.jobdetail_table td {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-body);
    font-size: 0.9em;
    text-align: center;
}

.jobdetail_table td.jobdetail_table_desc {
    text-align: left;
}

/* 채용정보 라벨-값 목록 (채용유형/근무예정지/지원자격/구비서류/복리후생/기타사항) */
.jobdetail_kv_list {
    border-top: 1px solid var(--color-border);
}

.jobdetail_kv_row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--color-divider);
}

.jobdetail_kv_row .jobdetail_kv_label {
    width: 120px;
}

/* 사전접수 폼 */
.jobdetail_form_row {
    margin-bottom: 22px;
}

.jobdetail_form_label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-heading);
    font-weight: 600;
}

.jobdetail_req {
    margin-left: 4px;
    color: var(--color-brand-primary);
}

.jobdetail_input,
.jobdetail_select {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    padding: 12px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-dark);
    font-family: inherit;
    font-size: 0.95em;
}

.jobdetail_input:focus,
.jobdetail_select:focus {
    outline: none;
    border-color: var(--color-brand-primary);
}

.jobdetail_field_error {
    display: none;
    margin: 6px 0 0;
    color: var(--color-brand-primary);
    font-size: 0.85em;
}

.jobdetail_field_error.is-visible {
    display: block;
}

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

.jobdetail_phone_group .jobdetail_select {
    width: auto;
    max-width: 90px;
}

.jobdetail_phone_group .jobdetail_input {
    width: auto;
    max-width: 140px;
}

.jobdetail_phone_dash {
    color: var(--color-text-muted);
}

/* .jobdetail_option_group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jobdetail_option_group.jobdetail_option_row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 24px;
} */

.jobdetail_option_group select {
    width: 100%;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-dark);
    font-family: inherit;
    font-size: 0.95em;
}

.jobdetail_option_group select:focus {
    border: 1px solid var(--color-brand-primary);
    outline: none;
}

.jobdetail_option_group label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-dark);
    font-size: 0.95em;
    cursor: pointer;
}

.jobdetail_option_group input[type='radio'],
.jobdetail_option_group input[type='checkbox'] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-brand-primary);
}

/* 면접일시 - 고정 날짜 + 시간 버튼(.time-select-btn) 그룹 */
.jobdetail_interview_group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.jobdetail_interview_date {
    flex-shrink: 0;
    color: var(--color-text-heading);
    font-weight: 600;
    font-size: 0.95em;
}

.time_select_group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.time-select-btn {
    box-sizing: border-box;
    min-width: 56px;
    padding: 10px 16px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-dark);
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.15s,
        color 0.15s,
        border-color 0.15s;
}

.time-select-btn:hover {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}

.time-select-btn.active {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary);
    color: var(--color-white);
}

@media (max-width: 600px) {
    .time-select-btn {
        min-width: 48px;
        padding: 8px 10px;
        font-size: 0.85em;
    }
}

.jobdetail_file_row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jobdetail_file_btn {
    flex-shrink: 0;
    padding: 10px 20px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: var(--color-bg-muted);
    color: var(--color-text-heading);
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
}

.jobdetail_file_btn:hover {
    background: var(--color-border-light);
}

.jobdetail_file_row input[type='file'] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.jobdetail_file_name {
    color: var(--color-text-muted);
    font-size: 0.9em;
}

.jobdetail_privacy_label {
    margin: 30px 0 10px;
    color: var(--color-text-heading);
    font-size: 0.9em;
    font-weight: 600;
}

.jobdetail_privacy_box {
    max-height: 200px;
    padding: 20px 24px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-muted);
    color: var(--color-text-body);
    font-size: 0.85em;
    line-height: 1.7;
}

.jobdetail_privacy_box h4 {
    margin: 14px 0 6px;
    color: var(--color-text-heading);
    font-size: 1em;
}

.jobdetail_privacy_box h4:first-child {
    margin-top: 0;
}

.jobdetail_privacy_agree {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 4px 0;
    color: var(--color-text-dark);
    font-size: 0.95em;
}

.jobdetail_privacy_agree input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand-primary);
}

.jobdetail_submit_wrap {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 30px 0 0;
}

.jobdetail_submit_btn,
.jobdetail_list_btn {
    flex: 1;
    display: inline-block;
    box-sizing: border-box;
    padding: 14px 0;
    border-radius: 3px;
    font-weight: 600;
    font-size: 1.05em;
    text-align: center;
    cursor: pointer;
}

.jobdetail_submit_btn {
    border: 1px solid transparent;
    background: var(--color-brand-primary);
    color: var(--color-white);
}

.jobdetail_submit_btn:hover {
    background: var(--color-brand-primary-hover);
}

.jobdetail_list_btn {
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-muted);
    color: var(--color-text-heading);
    text-decoration: none;
}

.jobdetail_list_btn:hover {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}

@media (max-width: 1024px) {
    .jobdetail_logo {
        width: 180px;
        height: 90px;
    }

    .jobdetail_section_title {
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .jobdetail_company_card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px;
    }

    .jobdetail_logo {
        width: 100%;
        height: 90px;
    }
}

@media (max-width: 600px) {
    .jobdetail_section_title {
        font-size: 1.2rem;
    }

    .jobdetail_kv_row,
    .jobdetail_company_kv_row {
        flex-direction: column;
        gap: 4px;
    }

    .jobdetail_kv_label,
    .jobdetail_kv_row .jobdetail_kv_label {
        width: auto;
    }

    /* 표는 원본처럼 컬럼을 그대로 우겨넣기보다, 이 사이트의 다른 상세표
     (.contTable/.appdetail_table)와 동일하게 라벨-값 카드형으로 세로 스택.
     375px에서 5개 컬럼 표를 그대로 유지하면 글자가 과도하게 줄바꿈되어
     가독성이 떨어지는 것을 실측으로 확인해 이 방식을 택함. */
    .jobdetail_table thead {
        display: none;
    }

    .jobdetail_table,
    .jobdetail_table tbody,
    .jobdetail_table tr,
    .jobdetail_table td {
        display: block;
        width: 100% !important;
    }

    .jobdetail_table td {
        padding: 6px 0;
        border-bottom: 0;
        text-align: left !important;
    }

    .jobdetail_table td::before {
        display: block;
        margin-bottom: 2px;
        color: var(--color-text-heading);
        font-weight: 600;
        content: attr(data-label);
    }

    .jobdetail_table tr {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--color-border);
    }

    .jobdetail_input,
    .jobdetail_select {
        max-width: 100%;
    }

    .jobdetail_phone_group {
        flex-wrap: wrap;
    }

    .jobdetail_privacy_box {
        padding: 16px;
    }

    .jobdetail_submit_wrap {
        gap: 8px;
    }

    .jobdetail_submit_btn,
    .jobdetail_list_btn {
        padding: 14px 0;
        font-size: 0.95em;
    }
}

/* ==========================================================================
   나의 지원현황 (/member/my-applications) - 디자인 이미지 기준 구현
   (첨부: "충북대학교 취업박람회 _ 나의 지원 현황_로그인 했을 때")
   이미지 고유 색상(마젠타 계열 강조색)은 가져오지 않고 기존 팔레트로 매핑:
   헤더행 배경 #f7f7f7(contTable th와 동일), 라벨/제목 #191919, 본문/보조
   텍스트 #666, 구분선 #e0e0e0/#eee, hover 강조는 기존 포인트그린 #289857.
   ========================================================================== */

.myapp_title {
    margin-bottom: 0.5em;
    color: var(--color-text-heading);
    font-size: 1.6rem;
    font-weight: 700;
}

.myapp_desc {
    margin-bottom: 30px;
    color: var(--color-text-body);
    font-size: 0.95em;
    line-height: 1.6;
}

.myapp_empty {
    padding: 60px 0;
    color: var(--color-text-body);
    text-align: center;
}

.myapp_login_page {
    padding-top: 100px;
    padding-bottom: 180px;
}

.myapp_login_card {
    display: flex;
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 80px;
    border: 1px solid #dedede;
    background: #fff;
    gap: 22px;
    align-items: center;
}

.myapp_login_fields {
    flex: 1;
}

.myapp_login_fields label {
    display: flex;
    min-height: 56px;
    border: 1px solid #ddd;
    border-bottom: 0;
    align-items: center;
}

.myapp_login_fields label:last-child {
    border-bottom: 1px solid #ddd;
}

.myapp_login_fields span {
    width: 195px;
    padding-left: 18px;
    color: #333;
}

.myapp_login_fields input {
    flex: 1;
    height: 54px;
    padding: 0 18px;
    border: 0;
    font-size: 15px;
    outline: 0;
}

.myapp_login_submit {
    min-width: 238px;
    min-height: 166px;
    border: 0;
    border-radius: 4px;
    background: #922f4a;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.myapp_login_submit:hover {
    background: #78243b;
}

.myapp_table_wrap {
    overflow-x: auto;
    margin: 0.5em 0 2em;
}

.myapp_table {
    width: 100%;
    border-collapse: collapse;
}

.myapp_table caption {
    display: none;
}

.myapp_table thead th {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    color: var(--color-text-heading);
    font-weight: 600;
    font-size: 0.95em;
    text-align: left;
    white-space: nowrap;
}

.myapp_table tbody td {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-divider);
    color: var(--color-text-body);
    font-size: 0.95em;
}

.myapp_table tbody tr:last-child td {
    border-bottom: 1px solid var(--color-border);
}

.myapp_company {
    color: var(--color-text-heading);
    font-weight: 700;
}

.myapp_table th.myapp_action,
.myapp_table td.myapp_action {
    text-align: right;
}

.myapp_view_btn {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-heading);
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
}

.myapp_view_btn:hover {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary);
    color: var(--color-white);
}

.myapp_action_form {
    display: inline;
}

.myapp_delete_btn {
    cursor: pointer;
}

@media (max-width: 1024px) {
    .myapp_table thead th,
    .myapp_table tbody td {
        padding: 16px 18px;
    }
}

@media (max-width: 600px) {
    .myapp_login_page {
        padding-top: 40px;
        padding-bottom: 70px;
    }

    .myapp_login_card {
        display: block;
        padding: 22px;
    }

    .myapp_login_fields span {
        width: 120px;
        padding-left: 12px;
        font-size: 13px;
    }

    .myapp_login_submit {
        width: 100%;
        min-height: 54px;
        margin-top: 16px;
    }
    .myapp_title {
        font-size: 1.3rem;
    }

    .myapp_table thead {
        display: none;
    }

    .myapp_table,
    .myapp_table tbody,
    .myapp_row,
    .myapp_table td {
        display: block;
        width: 100%;
    }

    .myapp_row {
        padding: 16px 0;
        border-bottom: 1px solid var(--color-border);
    }

    .myapp_table tbody tr:last-child td {
        border-bottom: 0;
    }

    .myapp_table td {
        padding: 4px 0;
        border-bottom: 0;
        text-align: left !important;
    }

    .myapp_table td::before {
        display: inline-block;
        min-width: 84px;
        margin-right: 8px;
        color: var(--color-text-heading);
        font-weight: 600;
        content: attr(data-label);
    }

    .myapp_company {
        font-size: 1.05em;
    }

    .myapp_action {
        margin-top: 8px;
    }

    .myapp_table td.myapp_action::before {
        display: none;
    }
}

/* ==========================================================================
   입사지원서 상세 (/member/my-applications/:id) - 디자인 이미지 기준 구현
   (첨부: "충북대학교 취업박람회 _ 나의 지원 현황 _ 자세히보기")
   지난 나의 지원현황 페이지와 동일한 색상 매핑을 그대로 재사용:
   라벨 #191919, 값 #666, 구분선 #eee/#e0e0e0, 강조 헤더 배경은 이미 참여기업
   상세(job-detail)에서 쓰던 #34895d를 재사용. 목록 버튼도 기존 .view_btns/
   .btn_list를 그대로 재사용(신규 CSS 없음). 이미지 고유의 마젠타 강조색은
   가져오지 않음.
   ========================================================================== */

.appdetail_section {
    margin-bottom: 40px;
}

.appdetail_section_title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--color-text-heading);
    font-size: 1.2rem;
    font-weight: 700;
}

.appdetail_section_title .material-icons {
    color: var(--color-brand-primary);
    font-size: 1.1em;
}

/* 기업 정보 카드 */
.appdetail_company_card {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.appdetail_logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 110px;
    border-radius: 8px;
    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

.appdetail_company_kv {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.appdetail_company_kv_row {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.appdetail_kv_label {
    flex-shrink: 0;
    width: 100px;
    color: var(--color-text-heading);
    font-weight: 600;
}

.appdetail_kv_value {
    color: var(--color-text-body);
}

.appdetail_company_name {
    color: var(--color-text-heading);
    font-weight: 700;
}

/* 채용정보 요약표 */
.appdetail_table_wrap {
    overflow-x: auto;
    margin-bottom: 20px;
}

.appdetail_table {
    width: 100%;
    border-collapse: collapse;
}

.appdetail_table caption {
    display: none;
}

.appdetail_table th {
    padding: 14px 16px;
    background: var(--color-brand-primary-dark);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.9em;
    text-align: center;
    white-space: nowrap;
}

.appdetail_table td {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-body);
    font-size: 0.9em;
    text-align: center;
}

.appdetail_table td.appdetail_table_desc {
    text-align: left;
}

/* 라벨-값 목록 (채용정보 상세 항목 / 지원 정보 공용) */
.appdetail_kv_list {
    border-top: 1px solid var(--color-border);
}

.appdetail_kv_row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--color-divider);
}

.appdetail_kv_row .appdetail_kv_label {
    width: 120px;
}

/* 개인정보 취급 방침 */
.appdetail_privacy_label {
    margin: 30px 0 10px;
    color: var(--color-text-heading);
    font-size: 0.9em;
    font-weight: 600;
}

.appdetail_privacy_box {
    /* padding: 20px 24px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-muted);
  color: var(--color-text-body);
  font-size: 0.9em; */
    max-height: 200px;
    padding: 20px 24px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-muted);
    color: var(--color-text-body);
    font-size: 0.85em;
    line-height: 1.7;
}

.appdetail_privacy_agree {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 4px 40px;
    color: var(--color-text-dark);
    font-size: 0.95em;
}

.appdetail_privacy_agree input[type='checkbox'] {
    width: 18px;
    height: 18px;
    background: url('https://smartcj.or.kr/project/design/com/checkbox.png') no-repeat;
    background-size: contain;
    appearance: none;
    cursor: default;
}

.appdetail_privacy_agree input[type='checkbox']:checked {
    background-image: url('https://smartcj.or.kr/project/design/com/checkbox_checked.png');
}

@media (max-width: 1024px) {
    .appdetail_logo {
        width: 180px;
        height: 90px;
    }
}

@media (max-width: 768px) {
    .appdetail_company_card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px;
    }

    .appdetail_logo {
        width: 100%;
        height: 90px;
    }
}

@media (max-width: 600px) {
    .appdetail_section_title {
        font-size: 1.05rem;
    }

    .appdetail_kv_row,
    .appdetail_company_kv_row {
        flex-direction: column;
        gap: 4px;
    }

    .appdetail_kv_label,
    .appdetail_kv_row .appdetail_kv_label {
        width: auto;
    }

    .appdetail_table thead {
        display: none;
    }

    .appdetail_table,
    .appdetail_table tbody,
    .appdetail_table tr,
    .appdetail_table td {
        display: block;
        width: 100% !important;
    }

    .appdetail_table td {
        padding: 6px 0;
        border-bottom: 0;
        text-align: left !important;
    }

    .appdetail_table td::before {
        display: block;
        margin-bottom: 2px;
        color: var(--color-text-heading);
        font-weight: 600;
        content: attr(data-label);
    }

    .appdetail_table tr {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--color-border);
    }

    .appdetail_privacy_box {
        padding: 16px;
    }
}

/* ── 부대행사관 ── */
.extra_hall {
    max-width: 1100px;
    margin: 0 auto;
}
.extra_panel {
    position: relative;
    background: #fff;
    border: 1px solid #eadfe4;
    border-radius: 16px;
    padding: 40px 42px 46px;
    box-shadow: 0 10px 28px rgba(128, 47, 70, 0.07);
    overflow: hidden;
}
.extra_panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-spot));
}
.extra_hall_title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-divider);
    color: var(--color-brand-primary);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.extra_hall_mark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--color-brand-primary) 0 35%, transparent 36%),
        conic-gradient(
            from 0deg,
            var(--color-brand-primary),
            transparent 40%,
            var(--color-brand-spot),
            transparent 75%,
            var(--color-brand-primary)
        );
    flex: 0 0 auto;
}
.extra_hall_desc {
    margin: -6px 0 28px;
    color: #444;
    line-height: 1.7;
    font-size: 15px;
}
.extra_section_title {
    position: relative;
    margin: 0 0 18px;
    padding-left: 14px;
    color: var(--color-brand-primary);
    font-size: 20px;
    font-weight: 800;
}
.extra_section_title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 2px;
    background: var(--color-brand-primary);
}
.extra_service_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}
.extra_service_item {
    display: block;
}
.extra_service_title {
    display: block;
    color: var(--color-brand-primary);
    font-size: 16px;
    margin-bottom: 4px;
}
.extra_service_desc {
    margin: 0;
    color: #333;
    line-height: 1.6;
    font-size: 14px;
}

/* 운영관: 안내 목록 (체크 리스트) */
.extra_bullet_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.extra_bullet_list li {
    position: relative;
    padding: 14px 18px 14px 46px;
    background: var(--color-bg-card);
    border: 1px solid #f1dfe4;
    border-radius: 10px;
    color: #222;
    line-height: 1.6;
    font-size: 15px;
}
.extra_bullet_list li::before {
    content: '\2713';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-brand-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}
.extra_operation_grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    align-items: start;
}
.extra_operation_media img {
    width: 100%;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    background: #f7f0f3;
    box-shadow: 0 10px 24px rgba(35, 46, 65, 0.08);
}
.extra_operation_placeholder {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: #f7f0f3;
    color: #8a6b76;
    display: grid;
    place-items: center;
    font-size: 14px;
}
/* 부대행사관 배너 (채용설명회 / 기업견학) — 이미지 배너 대신 코드로 구현해
   두 관의 레이아웃·타이포그래피를 통일하고, 문구는 손쉽게 고칠 수 있게 함 */
.extra_banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 28px;
    padding: 16px 4px 32px;
    border-bottom: 1px solid var(--color-divider);
    background: #fff;
    overflow: visible;
    min-height: 280px;
}
.extra_banner_text {
    position: relative;
    z-index: 2;
    flex: 0 1 auto;
    max-width: 460px;
    min-width: 0;
}
.extra_banner_eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-family: 'ONE Mobile', Pretendard, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text-heading);
}
.extra_banner_logo {
    height: 22px;
    width: auto;
    display: block;
}
.extra_banner_title {
    margin: 0 0 14px;
    font-family: 'Hakgyoansim Allimjang', 'Paperlogy-7Bold', sans-serif;
    font-weight: 700;
    font-size: 62px;
    line-height: 1.15;
    color: var(--color-brand-primary);
}
.extra_banner_title span {
    background: linear-gradient(transparent 60%, #f9d9e2 60%);
}
.extra_banner_heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
}
.extra_banner_heading .extra_banner_title {
    margin: 0;
}
.extra_banner_sub {
    margin: 0;
    font-family: 'ONE Mobile', Pretendard, sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.5;
    color: #333;
}
.extra_banner_meta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.extra_banner--briefing .extra_banner_meta {
    transform: translate(12px, 4px);
}
.extra_banner_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--color-brand-primary);
    color: #fff;
    font-family: 'ONE Mobile', Pretendard, sans-serif;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.extra_banner_date {
    font-family: 'Hakgyoansim Allimjang', 'Paperlogy-7Bold', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--color-brand-primary);
    white-space: nowrap;
}
.extra_banner_char {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    flex: 0 0 auto;
    align-self: flex-end;
    margin: -30px -10px -20px -24px;
    pointer-events: none;
}
@media (min-width: 641px) {
    .extra_banner--briefing .extra_banner_char {
        margin-left: 8px;
    }
}
.extra_banner_char img {
    display: block;
    height: 310px;
    width: auto;
}
.extra_banner_char--bus img {
    height: 340px;
}
.extra_banner--visit .extra_banner_title,
.extra_banner--visit .extra_banner_date {
    color: #354f70;
}
.extra_banner--visit .extra_banner_title span {
    background: linear-gradient(transparent 60%, #dceaf7 60%);
}
.extra_banner--visit .extra_banner_badge {
    background: #354f70;
}
@media (max-width: 640px) {
    .extra_banner {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        min-height: 0;
        padding: 22px 16px 26px;
        text-align: center;
    }
    .extra_banner_text {
        max-width: 100%;
        text-align: center;
    }
    .extra_banner_eyebrow {
        justify-content: center;
    }
    .extra_banner_title {
        font-size: 34px;
    }
    .extra_banner_heading {
        flex-direction: column;
        gap: 10px;
    }
    .extra_banner_sub {
        font-size: 15px;
    }
    .extra_banner_meta {
        flex-direction: row;
        justify-content: center;
    }
    .extra_banner--briefing .extra_banner_meta {
        transform: none;
    }
    .extra_banner_date {
        font-size: 20px;
    }
    .extra_banner_char {
        right: auto;
        bottom: auto;
        align-self: center;
        margin: 0;
        transform: none;
    }
    .extra_banner_char img {
        height: 140px;
    }
    .extra_banner_char--bus img {
        height: 130px;
    }
}
.extra_briefing_sub {
    margin: 0 0 22px;
    color: #333;
    line-height: 1.7;
}
.extra_briefing_sub p {
    margin: 0 0 4px;
}
.extra_briefing_apply {
    margin-top: 26px;
    text-align: center;
}
.extra_briefing_apply_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--color-brand-primary);
    box-shadow: 0 6px 16px rgba(128, 47, 70, 0.2);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.extra_briefing_apply_link:hover {
    transform: translateY(-2px);
    background: var(--color-brand-spot);
    box-shadow: 0 9px 20px rgba(128, 47, 70, 0.26);
    color: #fff;
}

/* 정보제공관: 안내 카드 그리드 */
.info_grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.info_card {
    background: #fff;
    border: 1px solid var(--color-border-soft);
    border-left: 4px solid var(--color-brand-primary);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 4px 14px rgba(35, 46, 65, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.info_card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(35, 46, 65, 0.1);
}
.info_card_badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(128, 47, 70, 0.08);
    color: var(--color-brand-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.info_card_content {
    margin: 0;
    color: #333;
    line-height: 1.7;
    font-size: 14.5px;
}

/* 채용설명회 / 기업견학: 표 */
.extra_table_wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(35, 46, 65, 0.06);
}
.extra_briefing_table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 560px;
}
.extra_briefing_table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.extra_briefing_table thead th {
    background: var(--color-brand-spot);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    padding: 16px;
    border: none;
}
.extra_briefing_table--briefing thead th:nth-child(1) {
    width: 20%;
}
.extra_briefing_table--briefing thead th:nth-child(2) {
    width: 40%;
}
.extra_briefing_table--briefing thead th:nth-child(3) {
    width: 40%;
}
.extra_briefing_table--visit {
    table-layout: auto;
    --visit-navy: #354f70;
    --visit-navy-hover: #eef4fa;
}
.extra_briefing_table--visit thead th {
    background: var(--visit-navy);
}
.extra_briefing_table tbody th,
.extra_briefing_table tbody td {
    padding: 16px;
    border: none;
    border-bottom: 1px solid var(--color-divider);
    color: #222;
    text-align: center;
    font-weight: 600;
    vertical-align: middle;
}
.extra_briefing_table tbody th {
    white-space: nowrap;
    color: var(--color-brand-primary);
    font-weight: 800;
}
.extra_briefing_table--visit tbody th {
    color: var(--visit-navy);
}
.extra_briefing_table--visit tbody td:nth-child(3) {
    text-align: left;
}
.extra_briefing_table--visit tbody td:nth-child(3).is-empty,
.extra_briefing_table--visit tbody td.extra_visit_note {
    text-align: center;
}
.extra_visit_content_lines {
    display: block;
    white-space: pre-line;
    line-height: 1.65;
}
.extra_visit_qr {
    display: inline-block;
    width: auto;
    max-width: 96px;
    height: auto;
    max-height: 136px;
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}
.extra_visit_note_media,
.extra_visit_note_action {
    display: block;
}
.extra_visit_note_media + .extra_visit_note_action {
    margin-top: 10px;
}
.extra_visit_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--visit-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.extra_visit_link:hover {
    color: #fff;
    filter: brightness(1.08);
}
.extra_briefing_table tbody tr.is-even td,
.extra_briefing_table tbody tr.is-even th {
    background: var(--color-bg-muted);
}
.extra_briefing_table tbody tr:hover td,
.extra_briefing_table tbody tr:hover th {
    background: #fbeef2;
}
.extra_briefing_table--visit tbody tr:hover td,
.extra_briefing_table--visit tbody tr:hover th {
    background: var(--visit-navy-hover);
}
.extra_briefing_table tbody tr:last-child th,
.extra_briefing_table tbody tr:last-child td {
    border-bottom: none;
}
.extra_preline {
    white-space: pre-line;
}
@media (max-width: 840px) {
    .extra_panel {
        padding: 26px 20px 30px;
    }
    .extra_hall_title {
        font-size: 22px;
    }
    .extra_operation_grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .extra_table_wrap {
        width: 100%;
        max-width: 100%;
        border: none;
        box-shadow: none;
        overflow: visible;
    }
    .extra_briefing_table {
        min-width: 0;
        max-width: 100%;
    }
    .extra_briefing_table,
    .extra_briefing_table thead,
    .extra_briefing_table tbody,
    .extra_briefing_table tr,
    .extra_briefing_table th,
    .extra_briefing_table td {
        display: block;
        width: 100% !important;
    }
    .extra_briefing_table thead {
        display: none;
    }
    .extra_briefing_table tbody tr {
        margin-bottom: 12px;
        border: 1px solid var(--color-border);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(35, 46, 65, 0.05);
    }
    .extra_briefing_table tbody th,
    .extra_briefing_table tbody td {
        text-align: left;
        white-space: normal;
        padding: 10px 14px;
    }
    .extra_briefing_table.extra_briefing_table--briefing tbody tr th {
        background: #f3e8ec;
        color: var(--color-brand-primary);
    }
    .extra_briefing_table tbody th::before,
    .extra_briefing_table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--color-brand-primary);
        font-size: 12px;
        font-weight: 800;
    }
    .extra_briefing_table--visit tbody th::before,
    .extra_briefing_table--visit tbody td::before {
        color: var(--visit-navy);
    }
    .extra_visit_qr {
        width: auto;
        max-width: 64px;
        height: auto;
        max-height: 91px;
    }
    .extra_briefing_table tbody tr:last-child th,
    .extra_briefing_table tbody tr:last-child td {
        border-bottom: 1px solid var(--color-divider);
    }
    .extra_briefing_table tbody tr > *:last-child {
        border-bottom: none !important;
    }
}