@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");

/* ==========================================================================
   색상 변수 (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: #B82C5D; /* 서브페이지 상단 비주얼(#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;
}

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

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

  #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%;
  } */
}

/* ==========================================================================
   주요행사 (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: 630px) {
  .snb_group {
    box-sizing: border-box;
    width: 100%;
    margin-top: 1em;
    padding: 0 15px;
  }

  .snb_group > li {
    box-sizing: border-box;
    flex: 1 1 0;
    width: auto;
    margin-right: 0;
    margin-bottom: 1em;
    padding: 0 2px;
  }
}

@media (max-width: 544px) {
  .snb_group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    padding: 0;
  }

  .snb_group > li > a {
    padding: 10px 0;
    font-size: 14px;
    letter-spacing: -0.07rem;
  }
}

/* ---- 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_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 .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 {
  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 {
  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_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 {
  font-size: 1.1em;
  font-weight: 700;
}

@media (max-width: 900px) {
  .promo_grid_card {
    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 {
    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_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;
  }
}

/* ==========================================================================
   게시판 상세보기 (공지사항/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_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%;
}

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

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

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

  .survey_title {
    font-size: 1em;
  }

  .survey_options {
    gap: 10px 16px;
  }

  .survey_etc_input {
    width: 120px;
  }
}

/* ==========================================================================
   참여기업 (현장채용관 / 간접채용관 / 온라인 입사지원 기업) - 원본 클론
   원본(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 .withAdd {
  font-family: Pretendard, "Malgun Gothic", "Open Sans", "나눔 고딕", "Nanum Gothic", 돋움, dotum;
}

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

.inner .cont2 .contBox2 h6 {
  padding: 0.2em 0 0.6em;
  font-size: 20px;
  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_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_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;
}

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

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

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