/* ==========================================================================
   2026 KB굿잡 부산 잡(JOB) 페스티벌
   공통 스타일시트
   ========================================================================== */

/* 부산체 (BusanFont_Provisional): 로고, 메인·서브 비주얼 제목, 서브 페이지 제목 등
   원본 ttf는 크롬에서 읽히지 않아(post 표 오류) 웹용으로 정리한 font/BusanFont.woff(1.5MB) / BusanFont.ttf 사용 */
@font-face {
  font-family: "BusanFont";
  src: url("../font/BusanFont.woff") format("woff"), url("../font/BusanFont.ttf") format("truetype");
  font-weight: 100 900; /* 한 가지 굵기만 있으므로 굵게(bold) 흉내 내지 않도록 */
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #3654ff;
  --color-primary-dark: #1c2b66;
  --color-primary-darker: #0b1330;
  --color-primary-light: #e8ecff;
  --color-primary-lighter: #f4f6ff;
  --color-violet: #7c5cff;
  /* KB굿잡 공식 컬러 C0 M18 Y100 K0 → #ffd100. 노란색은 모두 이 값 사용 */
  --color-kb-yellow: #ffd100;
  --color-accent: var(--color-kb-yellow);
  --color-accent-dark: #e7a800;
  --color-text: #0e1320;
  --color-text-muted: #626c82;
  --color-border: #e6e8f2;
  --color-bg: #fbfbfe;
  --color-bg-alt: #f2f3fa;

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --max-width: 1400px; /* 메인·서브 공통 본문 폭 */
  /* 모서리 기준: 콘텐츠(카드·박스) 최대 10px, 버튼 4~6px */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-btn: 6px;
  --radius-chip: 4px;
  --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.12);
  --shadow-glow-accent: 0 14px 32px rgba(255, 209, 0, 0.35);
  --shadow-glow-primary: 0 14px 32px rgba(0, 0, 0, 0.28);
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --header-height: 100px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 스크롤 없는 메인과 스크롤 있는 서브 간 폭 차이로 화면이 밀리지 않도록 스크롤바 자리를 항상 확보 */
  scrollbar-gutter: stable;
}

/* 메인은 스크롤바 자리가 비어 보이므로 히어로와 같은 배경으로 채움 */
html:has(body[data-page="home"]) {
  background: linear-gradient(180deg, #01c1d5 0%, #2796e8 50%, #3182f6 100%) fixed;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button {
  font-family: inherit;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0;
}

[hidden] {
  display: none !important;
}

/* ---------- 공통 유틸 ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: #5a5d6d;
  background: var(--color-primary-lighter);
  border: 1px solid var(--color-primary-light);
  padding: 10px 16px ;
  border-radius: 4px;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.section-head h2 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary-darker);
  margin-top: 14px;
}

.section-head p {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 16px;
}

.section {
  padding: 80px 0;
}

.section--alt {
  position: relative;
  overflow: hidden;
  background: #529fe1;
}

.section--alt .container {
  position: relative;
  z-index: 1;
}

.section-bg-text {
  position: absolute;
  left: 0;
  bottom: -0.22em;
  transform-origin: left bottom;
  font-size: clamp(100px, 13vw, 1000px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.section-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

.section-deco-1 {
  top: 98px;
  left: 7%;
  width: 240px;
}

.section-deco-2 {
  top: 30px;
  right: 3%;
  width: 180px;
}

.section-deco-3 {
  top: 84px;
  right: 22%;
  width: 220px;
}

@media (max-width: 860px) {
  .section-deco {
    display: none;
  }
}

.section--alt .section-head h2,
.section--alt .section-head p {
  color: #fff;
}

.section--alt .eyebrow {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap),
    background 0.2s ease;
  white-space: nowrap;
}

.btn-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-snap);
  font-size:12px;
}

.btn:hover .btn-arrow {
  transform: translateX(5px);
}

.btn-accent {
  background: var(--color-kb-yellow);
  color: #241c00;
}

.btn-accent:hover {
  transform: translateY(-3px);
  box-shadow: 10px 10px 0px rgb(0, 0, 0);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn-outline:hover {
  transform: translateY(-3px);
  box-shadow: 10px 10px 0px rgb(0, 0, 0);
}

.btn-primary {
  background: var(--color-primary-darker);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
}

.btn-block {
  width: 100%;
}

/* ---------- 헤더 / 내비게이션 ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  transition: background 0.3s ease, border-color 0.3s ease, height 0.3s ease;
}

.site-header.is-scrolled {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  max-width: 100%;
  padding: 0 100px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  font-weight: 800;
  justify-self: start;
}

.brand strong {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.site-header.is-scrolled .brand strong {
  color: var(--color-primary-darker);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.site-header.is-scrolled .nav-toggle {
  border-color: var(--color-border);
  background: #fff;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.site-header.is-scrolled .nav-toggle span {
  background: var(--color-primary-darker);
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 10px;
}

.main-nav a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 30px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-icon-external {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
}

.site-header.is-scrolled .main-nav a {
  color: var(--color-text);
}

.main-nav a:hover {
  background: #fff;
  color: var(--color-text);
}

.main-nav a.is-active {
  background: linear-gradient(135deg, var(--color-primary), #5b78ff);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.site-header.is-scrolled .main-nav a.is-active {
  color: #fff;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

/* 화면이 좁아지면 헤더 좌우 여백·메뉴 간격을 단계적으로 줄여 한 줄 유지 */
@media (max-width: 1400px) {
  .site-header .container {
    padding: 0 40px;
  }

  .main-nav a {
    padding: 3px 18px;
    font-size: 17px;
  }
}

@media (max-width: 1100px) {
  .brand strong {
    font-size: 22px;
  }

  .main-nav ul {
    gap: 4px;
  }

  .main-nav a {
    padding: 3px 12px;
    font-size: 16px;
  }
}

@media (max-width: 860px) {
  :root {
    --header-height: 72px;
  }

  .site-header .container {
    padding: 0 20px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* 사이트명이 길어 좁은 화면에서는 글자 크기를 줄이고, 그래도 넘치면 말줄임 */
  .brand {
    min-width: 0;
  }

  .brand strong {
    font-size: clamp(15px, 4.4vw, 20px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-footer .container {
    padding: 0 20px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .main-nav.is-open {
    max-height: 320px;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 20px;
    gap: 4px;
  }

  .main-nav a,
  .site-header.is-scrolled .main-nav a {
    padding: 13px 16px;
    color: var(--color-text);
  }

  .main-nav a.is-active,
  .site-header.is-scrolled .main-nav a.is-active {
    color: #fff;
  }
}

/* ---------- 히어로 ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1000px 560px at 10% -10%, rgba(255, 255, 255, 0.28), transparent 60%),
    radial-gradient(900px 520px at 100% 100%, rgba(6, 20, 90, 0.3), transparent 55%),
    linear-gradient(180deg, #01c1d5 0%, #2796e8 50%, #3182f6 100%);
  color: #fff;
  padding: calc(var(--header-height) + 110px) 0 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.hero-aurora span:nth-child(1) {
  width: 440px;
  height: 440px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.38), transparent 70%);
  animation: aurora-drift-1 16s ease-in-out infinite;
}

.hero-aurora span:nth-child(2) {
  width: 300px;
  height: 300px;
  bottom: -150px;
  left: -80px;
  background: radial-gradient(circle, rgba(255, 209, 0, 0.4), transparent 70%);
  animation: aurora-drift-2 20s ease-in-out infinite;
}

.hero-aurora span:nth-child(3) {
  width: 280px;
  height: 280px;
  top: 62%; /* 36% → 62%: 카드 QR과 겹치지 않도록 아래로 */
  left: 58%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.5), transparent 70%);
  animation: aurora-drift-3 24s ease-in-out infinite;
}

@keyframes aurora-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 40px) scale(1.1); }
}

@keyframes aurora-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -30px) scale(0.9); }
}

@keyframes aurora-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-35px, -35px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora span {
    animation: none;
  }
}

/* 오른쪽 여백에 둥실둥실 떠다니는 3D 오브젝트 */

.hero-objects {
  position: absolute;
  top: -25%;
  right: -43px;
  width: 906px;
  max-width: 83%;
  height: 603px;
  pointer-events: none;
  opacity: 0;
  animation: hero-objects-in 0.8s var(--ease-snap) 0.8s both;
}

.hero-objects--front {
  z-index: 2;
}

/* 사전참가 신청 배너 (기존 인물 일러스트 자리) */

.hero-apply-banner {
  position: absolute;
  z-index: 1;
  right: 200px;
  bottom: 0;
  width: clamp(240px, 36vh, 320px);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ffe24a 0%, var(--color-kb-yellow) 48%, #f0b400 82%, #d89a00 100%);
  color: #1a1400;
  /* 안쪽 테두리 음영 + 바닥 그림자로 광택 버튼 느낌 */
  box-shadow:
    inset 0 -12px 20px rgba(170, 105, 0, 0.35),
    inset 0 6px 10px rgba(255, 255, 255, 0.5),
    0 24px 30px -8px rgba(0, 0, 0, 0.45),
    0 8px 12px rgba(0, 0, 0, 0.22);
  transition: translate 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
  animation: hero-banner-in 0.9s var(--ease-snap) 1.1s both;
}

.hero-apply-banner:hover {
  translate: 0 -5px; /* 등장 애니메이션의 transform과 겹치지 않게 별도 속성 사용 */
  box-shadow:
    inset 0 -12px 20px rgba(170, 105, 0, 0.35),
    inset 0 6px 10px rgba(255, 255, 255, 0.5),
    0 34px 38px -8px rgba(0, 0, 0, 0.42),
    0 10px 14px rgba(0, 0, 0, 0.2);
}

/* 위쪽 광택 하이라이트 */
.hero-apply-banner::before {
  content: "";
  position: absolute;
  top: 4%;
  left: 15%;
  width: 70%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.12) 75%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* 글자가 광택 위에 오도록 */
.hero-apply-banner > * {
  position: relative;
}

.hero-apply-banner-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.65;
}

.hero-apply-banner-title {
  font-family: "BusanFont", var(--font-sans);
  font-size: clamp(28px, 4.4vh, 38px);
  font-weight: 600;
  line-height: 1.2;
}

.hero-apply-banner-desc {
  font-size: 15px;
  line-height: 1.5;
  word-break: keep-all;
  font-weight: 500;
  opacity: 0.8;
}

.hero-apply-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 40px;
  border-radius: 999px;
  background: var(--color-primary-darker);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.hero-apply-banner-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease-snap);
}

.hero-apply-banner:hover .hero-apply-banner-cta svg {
  transform: translateX(4px);
}

@keyframes hero-objects-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hero-banner-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 버튼 주변으로 은은하게 퍼지는 빛 링 (등장이 끝난 2s부터) */
.hero-apply-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: hero-banner-pulse 4.5s ease-out 2s infinite;
}

@keyframes hero-banner-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 209, 0, 0.55); }
  45%, 100% { box-shadow: 0 0 0 26px rgba(255, 209, 0, 0); } /* 퍼진 뒤 잠시 쉬었다 반복 */
}

/* ---------- 사전참가 신청: 랜야드에 걸린 사원증 (.hero-badge) ----------
   위치·크기 반응형은 기존 .hero-apply-banner 규칙을 그대로 사용.
   원형 배너 모양 관련 속성만 (0,2,0) 선택자로 덮어씀 → 원형으로 되돌리려면 index.html에서 hero-badge 클래스와 내부 마크업만 원복 */
.hero-badge {
  width: clamp(220px, 30vh, 270px);
  --strap: 12vh; /* 사원증 위로 올라가는 줄 길이 (위쪽은 흐려지며 사라져 헤더 메뉴와 겹치지 않음) */
}

.hero-badge .hero-apply-banner-title {
  font-size: clamp(24px, 3.4vh, 32px);
  white-space: nowrap;
}

.hero-apply-banner.hero-badge {
  display: block;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  /* 등장 후 줄 꼭대기를 축으로 살짝 흔들림 (transform은 등장 애니메이션이 쓰므로 rotate 속성 사용) */
  transform-origin: 50% calc(-1 * var(--strap) - 30px);
  animation: hero-banner-in 0.9s var(--ease-snap) 1.1s both, hero-badge-swing 5s ease-in-out 2s infinite;
}

.hero-apply-banner.hero-badge::before,
.hero-apply-banner.hero-badge::after {
  display: none;
}

.hero-apply-banner.hero-badge:hover {
  box-shadow: none;
}

@keyframes hero-badge-swing {
  0%, 100% { rotate: -1.2deg; }
  50% { rotate: 1.2deg; }
}

/* 랜야드 줄: 위로 갈수록 흐려지며 사라짐 */
.hero-badge .hero-badge-strap {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 30px);
  width: 22px;
  height: var(--strap);
  transform: translateX(-50%);
  border-radius: 2px;
  background:
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(255, 209, 0, 0.85) 22px 25px),
    linear-gradient(90deg, #16226b, #3654ff 35%, #4a66ff 55%, #1c2b9a);
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 90%);
  mask-image: linear-gradient(to top, #000 40%, transparent 90%);
}

/* 금속 클립: 줄 끝과 카드 구멍을 연결 */
.hero-badge .hero-badge-clip {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% - 22px);
  width: 34px;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

.hero-badge-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  text-align: center;
  box-shadow:
    0 26px 40px -14px rgba(0, 0, 0, 0.55),
    0 8px 14px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.3s var(--ease-snap);
}

/* 카드 표면 광택 */
.hero-badge-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

.hero-badge:hover .hero-badge-card {
  box-shadow:
    0 34px 46px -14px rgba(0, 0, 0, 0.5),
    0 10px 16px rgba(0, 0, 0, 0.16);
}

/* 상단 노란 띠 + 클립 구멍 */
.hero-badge-head {
  position: relative;
  padding: 30px 16px 12px;
  background: linear-gradient(180deg, #ffe24a, var(--color-kb-yellow) 60%, #f5c400);
  color: #1a1400;
}

.hero-badge-slot {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 42px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(11, 19, 48, 0.28);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35);
}

.hero-badge .hero-apply-banner-eyebrow {
  opacity: 0.75;
}

.hero-badge-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 18px 18px;
  color: var(--color-primary-darker);
}

.hero-badge .hero-apply-banner-desc {
  color: var(--color-text-muted);
  opacity: 1;
}

.hero-badge .hero-apply-banner-cta {
  margin-top: 8px;
}

/* 하단: 바코드 + 행사 정보 (출입증 느낌) */
.hero-badge-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px 13px;
  border-top: 1px dashed var(--color-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8a93a8;
}

.hero-badge-barcode {
  flex-shrink: 0;
  width: 64px;
  height: 18px;
  background: repeating-linear-gradient(
    90deg,
    #0b1330 0 2px,
    transparent 2px 4px,
    #0b1330 4px 5px,
    transparent 5px 8px,
    #0b1330 8px 11px,
    transparent 11px 13px
  );
}

@media (prefers-reduced-motion: reduce) {
  .hero-apply-banner.hero-badge {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-objects,
  .hero-apply-banner,
  .hero-apply-banner::after {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 1200px) {
  .hero-apply-banner {
    right: 24px;
  }
}

@media (max-width: 980px) {
  body[data-page="home"] .hero .container {
    display: flex;
    flex-direction: column;
  }

  .hero-apply-banner {
    position: relative;
    order: 1;
    right: auto;
    bottom: auto;
    width: 260px;
    max-width: none;
    margin-top: 32px;
  }
}

.hero-object {
  position: absolute;
  width: auto;
  height: auto;
  animation: hero-object-float 8s ease-in-out infinite;
  will-change: transform;
}

.hero-object--alt {
  animation-name: hero-object-float-alt;
}

.hero-object--pop {
  z-index: 2;
}

.hero-object-01 { left: 0%; top: 0.9%; width: 20.99%; animation-duration: 9s; }
.hero-object-02 { left: 43.15%; top: 5.34%; width: 20.44%; animation-duration: 10.5s; animation-delay: .5s; }
.hero-object-14 { left: 68.22%; top: 44.55%; width: 11.6%; animation-duration: 7.5s; animation-delay: 1.3s; }
.hero-objects--front .hero-object-14 { left: calc(73.5% - 10px); } /* 메인: 사원증 카드 글자를 가리지 않도록 오른쪽으로 */
.hero-object-03 { left: 85.75%; top: 23.52%; width: 12.15%; animation-duration: 8.2s; animation-delay: .8s; }
.hero-object-12 { left: 77.35%; top: 44.93%; width: 8.29%; animation-duration: 6.8s; animation-delay: 1.7s; }
.hero-object-11 { left: 86.19%; top: 66.54%; width: 8.62%; animation-duration: 9.5s; animation-delay: .3s; }
.hero-object-06 { left: 33.46%; top: 61.11%; width: 7.18%; animation-duration: 7s; animation-delay: 1.1s; }
.hero-objects--front .hero-object-06 { top: 74%; } /* 메인: 아래로 (61% → 74%) */
.hero-object-05 { left: 27.62%; top: 0.9%; width: 7.73%; animation-duration: 6.3s; animation-delay: 1.9s; }
.hero-object-10 { left: 61%; top: 83%; width: 6.63%; animation-duration: 8.7s; animation-delay: .6s; }
.hero-object-07 { left: 19.34%; top: 45.89%; width: 5.52%; animation-duration: 6s; animation-delay: 1.4s; }
.hero-object-04 { left: 95.25%; top: 88.53%; width: 4.75%; animation-duration: 9.2s; animation-delay: .2s; }
.hero-object-08 { left: 67.96%; top: 61.76%; width: 5.19%; animation-duration: 5.6s; animation-delay: 2.1s; }
.hero-object-13 { left: 86.74%; top: 51.62%; width: 4.42%; animation-duration: 7.8s; animation-delay: 1s; }
.hero-object-09 { left: 91.16%; top: 1.68%; width: 3.65%; animation-duration: 6.6s; animation-delay: 1.6s; }

/* 왼쪽 가장자리 큰 흐린 삼각형: 절반이 화면 밖으로 나가 가려지도록 배치 */
.hero-object-side {
  z-index: 0;
  left: -70px;
  bottom: 40%;
  width: 340px;
  rotate: 20deg; /* 떠다니는 transform 애니메이션과 별개로 회전 */
  pointer-events: none;
  animation: hero-object-float 10s ease-in-out infinite, hero-side-in 0.8s var(--ease-snap) 0.8s both;
}

@keyframes hero-side-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-object-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}

@keyframes hero-object-float-alt {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(8px, -12px) rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-object {
    animation: none;
  }
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 22px;
  max-width: 780px;
}

.hero h1 {
  position: relative;
  z-index: 3;
  font-family: "BusanFont", var(--font-sans);
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 600;
  letter-spacing: -0.00em;
  line-height: 1.2;
  opacity: 0;
  animation: hero-fade-up 0.7s var(--ease-snap) 0.1s both;
}

.hero-title-light {
  font-weight: 400;
}

.hero-desc {
  font-size: 24px;
  color: #fff;
  letter-spacing: -0.3px;
  opacity: 0;
  animation: hero-fade-up 0.7s var(--ease-snap) 0.1s both;
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-desc,
  .hero h1,
  .hero-meta,
  .hero-actions,
  .hero-summary {
    animation: none;
    opacity: 1;
  }
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  margin-top:20px;
  animation: hero-fade-up 0.7s var(--ease-snap) 0.4s both;
}

.hero-meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "omnigothic", var(--font-sans);
  font-size: 26px;
}

.hero-meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.hero-meta li strong {
  font-weight: 700;
  margin-right: 2px;
}

.hero-meta .highlight {
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 0 4px;
  z-index: 0;
}

.hero-meta .highlight::before,
.hero-meta .highlight::after {
  content: "";
  position: absolute;
  bottom: 0.02em;
  height: 0.62em;
  background: var(--color-kb-yellow);
  z-index: -1;
}

.hero-meta .highlight::before {
  left: -6px;
  right: -4px;
  border-radius: 2px 10px 4px 12px / 10px 3px 12px 4px;
  transform: rotate(-1.5deg) skewX(-2deg);
  opacity: 0.7;
}

.hero-meta .highlight::after {
  left: -3px;
  right: -7px;
  border-radius: 10px 3px 12px 4px / 3px 11px 4px 10px;
  transform: rotate(1deg) skewX(1deg) translateY(1px);
  opacity: 0.3;
}

.hero-summary {
  font-size: clamp(15px, 2vh, 17px);
  line-height: 1.75;
  color: rgba(255, 255, 255,1);
  opacity: 0;
  animation: hero-fade-up 0.7s var(--ease-snap) 0.25s both;
}

@media (max-width: 980px) {
  .hero-summary br {
    display: none;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 50px;
  opacity: 0;
  animation: hero-fade-up 0.7s var(--ease-snap) 0.52s both;
}

.hero-actions .btn {
  width: 270px;
  padding: 20px 40px;
  font-size: 19px;
  gap: 16px;
}

/* KB굿잡 공식 컬러 강조 (메인 제목) */
.kb-yellow {
  color: var(--color-kb-yellow);
}

/* 메인: 히어로~주최·주관 영역을 스크롤 없이 한 화면에 표시.
   화면 높이에 맞춰 여백·글자 크기를 vh 기준으로 줄임 */
body[data-page="home"] .hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + clamp(24px, 6vh, 110px));
}

body[data-page="home"] .hero > .container {
  margin-top: auto;
  margin-bottom: auto;
}

body[data-page="home"] .hero-partners {
  margin-top: clamp(24px, 5vh, 70px);
}

body[data-page="home"] .hero-inner {
  gap: clamp(12px, 2.2vh, 22px);
}

body[data-page="home"] .hero h1 {
  top: -30px;
  font-size: clamp(38px, min(7vw, 7.2vh), 68px);
}

/* h1을 위로 올린 만큼 설명글도 당겨서 h1과의 간격을 좁힘 */
body[data-page="home"] .hero-summary {
  margin-top: -36px;
}

/* 메인은 스크롤 없이 바로 보이므로, 주최·주관 바를 배너 다음 순서로 늦춤 */
body[data-page="home"] .hero-partners.reveal {
  transition-delay: 1.4s;
}

body[data-page="home"] .hero-desc {
  font-size: clamp(18px, 2.4vh, 24px);
}

body[data-page="home"] .hero-meta li {
  font-size: clamp(18px, 2.6vh, 26px);
}

body[data-page="home"] .hero-actions {
  margin-top: clamp(12px, 4vh, 50px);
}

body[data-page="home"] .hero-actions .btn {
  padding-top: clamp(14px, 2vh, 20px);
  padding-bottom: clamp(14px, 2vh, 20px);
}

/* ---------- 메인 반응형 ---------- */

/* 본문 폭(1400px)보다 좁아지면 헤더와 같은 좌우 여백 확보 */
@media (max-width: 1400px) {
  body[data-page="home"] .hero > .container {
    padding: 0 40px;
  }

  body[data-page="home"] .hero-partners {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* 배너가 오른쪽 끝으로 붙는 구간: 배너 앞 오브젝트가 버튼 글자를 가리므로 숨김 */
@media (max-width: 1200px) {
  .hero-objects--front {
    display: none;
  }
}

/* 태블릿: 배너가 본문 아래로 내려오는 구간 */
@media (max-width: 980px) {
  /* 떠다니는 오브젝트가 글자를 가리지 않도록 본문을 위로 */
  .hero-inner {
    position: relative;
    z-index: 3;
  }

  .hero-objects {
    top: -12%;
    right: -12%;
    max-width: 90%;
  }

  .hero-apply-banner-title {
    font-size: 30px;
    white-space: nowrap;
  }

  /* 사원증이 본문 아래로 내려오므로 줄을 짧게 하고, 줄+클립 높이만큼 위 여백 확보 */
  .hero-apply-banner.hero-badge {
    --strap: 64px;
    margin-top: 110px;
  }
}

/* 모바일 */
@media (max-width: 640px) {
  body[data-page="home"] .hero > .container {
    padding: 0 20px;
  }

  /* 단어 중간(페스티/벌)에서 끊기지 않도록 어절 단위 줄바꿈 */
  body[data-page="home"] .hero h1 {
    top: -16px;
    font-size: clamp(28px, 8.4vw, 40px);
    word-break: keep-all;
  }

  body[data-page="home"] .hero-summary {
    margin-top: -16px;
    font-size: 15px;
    word-break: keep-all;
  }

  body[data-page="home"] .hero-meta {
    margin-top: 8px;
  }

  body[data-page="home"] .hero-meta li {
    flex-wrap: wrap;
    row-gap: 2px;
    font-size: 17px;
  }

  .hero-apply-banner {
    align-self: center;
    width: 240px;
    padding: 20px;
  }

  .hero-apply-banner-title {
    font-size: 26px;
  }

  .hero-apply-banner-desc,
  .hero-apply-banner-cta {
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  body[data-page="home"] .hero-meta li {
    font-size: 15px;
  }
}

/* ---------- 행사 소개 (About) ---------- */

.about-intro {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.about-intro-simple {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.about-intro-garland {
  position: absolute;
  top: 0px;
  width: 340px;
  height: auto;
  pointer-events: none;
}

.about-intro-garland--left {
  left: 0%;
}

.about-intro-garland--right {
  right: 0%;
  transform: scaleX(-1);
}

@media (max-width: 960px) {
  .about-intro-garland {
    display: none;
  }
}

.about-intro-title {
  font-family: "BusanFont", var(--font-sans);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-primary-darker);
}

.about-intro-title-light {
  font-weight: 300;
}

.about-intro-title-thin {
  font-weight: 400;
}

.about-intro-desc {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.about-intro-lead {
  display: block;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary-darker);
}

/* ---------- 개요 카드 ---------- */

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

.overview-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 28px 26px;
  border: 1px solid var(--color-border);
  transition: transform 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
}

.overview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.14);
}

.overview-card .num {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.overview-card .num span {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.overview-card h3 {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
}

.overview-card p {
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ---------- 메인 하단 박람회장 풍경 (부스 + 사람 실루엣, 무한 흐름) ---------- */

.hero-crowd {
  position: relative;
  z-index: 0;
  height: clamp(80px, 14vh, 160px);
  margin-top: clamp(16px, 3vh, 40px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hero-crowd-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: hero-crowd-scroll 90s linear infinite;
}

.hero-crowd-scene {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 1600 / 180;
  flex-shrink: 0;
}

@keyframes hero-crowd-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-crowd-track {
    animation: none;
  }
}

@media (max-width: 860px) {
  .hero-crowd {
    height: 72px;
    margin-top: 24px;
  }
}

/* 일러스트 이미지 버전 (.hero-crowd--photo)
   - images/job_fair_strip.png(5893×360): 원본 선화(job_fair_line.png)의 3줄을 사람 키에 맞춰 같은 높이로
     잘라 가로 한 줄로 이어 붙이고 영어 글자를 지운 이미지
   - 선화를 흑백 반전(흰 선 + 검정 배경) 후 screen 블렌드 → 검정 배경은 사라지고 흰 선만 파란 배경 위에 남음
   - 가로로 반복하며 흐름 + 좌우 끝 페이드
   이미지를 바꾸면 키프레임의 원본 비율(5893/360)만 맞추면 됨 */
.hero-crowd--photo {
  --crowd-h: clamp(110px, 16vh, 180px);
  height: var(--crowd-h);
  /* 좌우 끝만 페이드 (위쪽은 페이드 없이 그대로) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  /* 마스크가 쌓임 맥락을 만들므로 블렌드는 바깥 요소에 지정해야 파란 배경과 섞임 */
  mix-blend-mode: screen;
  opacity: 0.75;
}

.hero-crowd--photo .hero-crowd-track {
  display: none;
}

.hero-crowd-photo {
  height: 100%;
  background: url("../images/job_fair_strip.png") repeat-x;
  background-size: auto 100%;
  filter: grayscale(1) invert(1) contrast(1.4);
  animation: hero-crowd-photo-scroll 140s linear infinite;
}

/* 이미지 한 장 폭(표시 높이 × 5893/360)만큼 이동하면 처음과 같은 화면 → 무한 반복 */
@keyframes hero-crowd-photo-scroll {
  from { background-position-x: 0; }
  to { background-position-x: calc(-1 * var(--crowd-h) * 5893 / 360); }
}

@media (max-width: 860px) {
  .hero-crowd--photo {
    --crowd-h: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-crowd-photo {
    animation: none;
  }
}

/* 풍경 바로 아래에 주최·주관 바가 붙도록 */
body[data-page="home"] .hero-crowd + .hero-partners {
  margin-top: 0;
}

/* ---------- 주최·주관 로고 (히어로 하단 바 + 무한 슬라이드) ---------- */

.hero-partners {
  position: relative;
  z-index: 1;
  margin-top: 70px;
  padding: 16px 100px;
  background: rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.partners-label {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.partners-static {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.hero-partners .marquee {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

/* 좁은 화면: [라벨 | 로고] 두 줄 구성 (주최 / 주관) */
@media (max-width: 860px) {
  .hero-partners,
  body[data-page="home"] .hero-partners {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 12px;
    padding: 16px 20px;
  }

  .partners-static {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 420px;
  }
}

.partner-box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width:80px;
  padding: 5px 12px;
  background: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-primary-darker);
  text-align: center;
  overflow: hidden;
}

.partner-box img {
  width: auto;
  height: auto;
  max-height: 24px;
  max-width: 120px;
  object-fit: contain;
}

.partner-box img + span {
  display: none;
}

/* 좁은 화면: 로고 박스를 줄이고 주최 3개는 칸 폭에 맞춰 축소 */
@media (max-width: 860px) {
  .partner-box {
    height: 40px;
    padding: 4px 10px;
  }

  .partner-box img {
    max-height: 20px;
    max-width: 96px;
  }

  .partners-static .partner-box {
    min-width: 0;
    padding: 4px 6px;
  }

  .partners-static .partner-box img {
    max-width: 100%;
  }
}

.marquee {
  margin-top: 22px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  animation: marquee-scroll 70s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* ---------- 스크롤 reveal 애니메이션 ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition: opacity 0.7s ease, transform 0.7s var(--ease-snap);
  }
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 하이라이트 카드 (캐러셀) ---------- */

.program-carousel {
  position: relative;
  padding: 0 56px;
}

.program-carousel-viewport {
  overflow: hidden;
  margin: -40px 0;
  padding: 40px 0;
}

.program-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.45s var(--ease-snap);
}

.program-card {
  flex: 0 0 340px;
  width: 340px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #509ddf;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap),
    border-color 0.3s ease;
}

.program-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-sm);
}

.program-card-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
}

.program-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.program-card-media--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 1px solid var(--color-border);
  background: repeating-linear-gradient(
      135deg,
      var(--color-bg-alt),
      var(--color-bg-alt) 10px,
      #eef1ff 10px,
      #eef1ff 20px
    );
  color: var(--color-text-muted);
}

.program-card-media--placeholder .icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.program-card-media--placeholder .icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-primary);
}

.program-card-media--placeholder strong {
  font-size: 13px;
  font-weight: 600;
}

.program-card-body {
  padding: 22px 22px 26px;
}

.program-card-body h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary-darker);
  line-height: 1.4;
}

.program-card-body p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.program-card-more {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--color-primary-light);
  background: var(--color-primary-lighter);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.program-card-more .btn-arrow {
  transition: transform 0.3s var(--ease-snap);
}

.program-card:hover .program-card-more {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.program-card:hover .program-card-more .btn-arrow {
  transform: translateX(5px);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.carousel-btn svg {
  width: 14px;
  height: 14px;
}

.carousel-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.carousel-btn--prev {
  left: 0;
}

.carousel-btn--next {
  right: 0;
}

@media (max-width: 640px) {
  .program-carousel {
    padding: 0 44px;
  }

  .program-card {
    flex-basis: 240px;
    width: 240px;
  }

  .carousel-btn {
    width: 36px;
    height: 36px;
  }
}

/* ---------- 프로그램 상세 리스트 ---------- */

/* ---------- 프로그램 페이지: 이벤트 / 프로그램 카드 ---------- */

/* 카테고리 탭 (전체 / 이벤트 / 프로그램) - .page-head 오른쪽, 구분선 위 */
.page-head--with-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.page-head--with-tabs .program-tabs {
  flex-shrink: 0;
  margin-left: auto; /* 제목 아래로 줄바꿈돼도 오른쪽 정렬 유지 */
}

.program-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

.program-tab {
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.program-tab:hover {
  color: var(--color-primary-darker);
}

.program-tab.is-active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

/* 썸네일 오른쪽 상단 카테고리 뱃지 */
.program-card-media {
  position: relative;
}

/* 프로그램 페이지 썸네일은 정사각 홍보 이미지에 맞춰 1:1 */
.program-grid .program-card-media {
  aspect-ratio: 1 / 1;
}

.program-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.program-card-badge--event {
  background: var(--color-kb-yellow);
  color: #1a1400;
}

.program-card-badge--program {
  background: var(--color-primary);
  color: #fff;
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* 카드가 하나씩 아래에서 위로 등장.
   - 페이지 진입: 상단 띠(0.1s)·본문 제목 영역(0.3s) 다음인 0.5s부터 90ms 간격
   - 탭 클릭: js/main.js에서 애니메이션을 재시작하고 지연을 0부터 다시 지정
   fill-mode를 backwards로 두어 끝난 뒤 hover 이동 효과와 충돌하지 않게 함 */
.program-grid > .program-card {
  animation: program-card-in 0.55s var(--ease-snap) 0.5s backwards;
}

.program-grid > .program-card:nth-child(2) { animation-delay: 0.59s; }
.program-grid > .program-card:nth-child(3) { animation-delay: 0.68s; }
.program-grid > .program-card:nth-child(4) { animation-delay: 0.77s; }
.program-grid > .program-card:nth-child(5) { animation-delay: 0.86s; }
.program-grid > .program-card:nth-child(n + 6) { animation-delay: 0.95s; }

@keyframes program-card-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .program-grid > .program-card {
    animation: none;
  }
}

/* 메인 캐러셀용 고정 폭을 풀고 그리드 칸에 맞춤 */
.program-grid .program-card {
  width: auto;
  flex: none;
}

/* 카드 전체 클릭: 버튼 링크(.program-card-more)의 클릭 영역을 카드 전체로 확장 */
.program-card--static {
  position: relative;
  cursor: pointer;
}

.program-card--static .program-card-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* 썸네일 뱃지(z-index 1) 위까지 덮음 */
  border-radius: var(--radius-sm);
}

.program-card--static .program-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  word-break: keep-all;
}

/* 내용은 줄임 없이 전부 표시 */
.program-card--static .program-card-desc {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  line-height: 1.4;
  min-height: 3.2em; /* 한 줄이어도 2줄 높이를 미리 확보해 카드끼리 아래 정보 위치를 맞춤 (1.6 × 2) */
  font-size:16px
}

.program-card-meta {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.program-card-meta div {
  display: flex;
  gap: 12px;
}

.program-card-meta dt {
  flex: 0 0 104px;
  font-weight: 700;
  color: var(--color-primary-darker);
}

.program-card-meta dd {
  margin: 0;
  color: var(--color-text);
}

/* 버튼을 카드 맨 아래로 (카드 높이가 달라도 버튼 위치 정렬) */
.program-card--static .program-card-meta {
  margin-bottom: 22px;
}

.program-card--static .program-card-more {
  margin-top: auto;
}

/* 준비 중 안내 카드 */
.program-card--soon {
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 24px;
  border: 1px dashed #c3cdfa;
  word-break: keep-all;
  box-shadow: none;
  cursor: default;
  text-align: center;
}

.program-card--soon:hover {
  transform: none;
}

.program-card--soon p {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 980px) {
  .program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .program-card--soon {
    min-height: 140px;
  }
}

.program-list {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.program-row {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 32px;
  align-items: start;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.program-row-media.placeholder-box {
  position: relative;
  aspect-ratio: 1 / 1;
}

.program-row-media--photo {
  position: relative;
  aspect-ratio: 1.09 / 1;
}

.program-row-media--photo img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.program-row-badge {
  position: absolute;
  top: -14px;
  left: -14px;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary), var(--color-violet));
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  border: 3px solid var(--color-bg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.program-row-media .icon {
  width: 60px;
  height: 60px;
}

.program-row-media .icon svg {
  width: 28px;
  height: 28px;
}

.program-row-media strong {
  font-size: 16px;
}

.program-row-title {
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary-darker);
}

.program-row-desc {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.75;
}

.program-row-meta {
  margin-top: 20px;
}

@media (max-width: 840px) {
  .program-row {
    grid-template-columns: 1fr;
  }

  .program-row-media.placeholder-box,
  .program-row-media--photo {
    max-width: 270px;
  }
}

/* ---------- 참가기업 로고 월 ---------- */

.logo-wall-section {
  background: #f4f8ff;
}

.quicklinks-section {
  background: #d3def4;
}

.quicklinks-section .eyebrow {
  background: #fff;
  border-color: rgba(11, 19, 48, 0.16);
}

.logo-wall {
  position: relative;
}

.logo-wall-hex {
  position: absolute;
  top: 30%;
  left: 0;
  width: 340px;
  height: 340px;
  transform: translate(-55%, -50%);
  color: rgba(11, 19, 48, 0.08);
  z-index: 0;
  pointer-events: none;
  animation: logo-wall-hex-spin 30s linear infinite;
}

@keyframes logo-wall-hex-spin {
  from {
    transform: translate(-55%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-55%, -50%) rotate(360deg);
  }
}

.logo-wall-gear {
  position: absolute;
  bottom: 100px;
  right: 0;
  width: 130px;
  height: 130px;
  transform: translate(55%, 55%);
  color: rgba(11, 19, 48, 0.08);
  z-index: 0;
  pointer-events: none;
  animation: logo-wall-gear-spin 30s linear infinite;
}

@keyframes logo-wall-gear-spin {
  from {
    transform: translate(55%, 55%) rotate(0deg);
  }
  to {
    transform: translate(55%, 55%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-wall-hex,
  .logo-wall-gear {
    animation: none;
  }
}

@media (max-width: 860px) {
  .logo-wall-hex,
  .logo-wall-gear {
    display: none;
  }
}

.logo-wall-viewport {
  position: relative;
  z-index: 1;
  height: 600px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}

.logo-wall-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.logo-wall-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 20px;
}

.logo-wall-item {
  aspect-ratio: 3 / 1;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  color: var(--color-text-muted);
}

.logo-wall-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width:120px;
  max-height:40px;
}

@media (max-width: 860px) {
  .logo-wall-viewport {
    height: 380px;
  }

  .logo-wall-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .logo-wall-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 퀵링크 ---------- */

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

.quicklink-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid rgba(11, 19, 48, 0.14);
  overflow: hidden;
  transition: transform 0.35s var(--ease-snap), box-shadow 0.35s var(--ease-snap),
    border-color 0.3s ease;
}

.quicklink-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--quicklink-tint);
  opacity: 0.6;
  transition: transform 0.5s var(--ease-snap);
  z-index: 0;
}

.quicklink-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.quicklink-card:hover::before {
  transform: scale(1.2);
}

.quicklink-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.quicklink-card .icon {
  width: 54px;
  height: 54px;
  border-radius: 6px;
  background: var(--quicklink-grad);
  box-shadow: 0 12px 20px -8px var(--quicklink-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ease-snap);
}

.quicklink-card:hover .icon {
  transform: rotate(-6deg) scale(1.06);
}

.quicklink-card .icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}

.quicklink-card-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-snap), background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

.quicklink-card-arrow svg {
  width: 16px;
  height: 16px;
}

.quicklink-card:hover .quicklink-card-arrow {
  background: var(--color-primary-darker);
  border-color: var(--color-primary-darker);
  color: #fff;
  transform: rotate(45deg);
}

.quicklink-card h3 {
  position: relative;
  z-index: 1;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary-darker);
}

.quicklink-card p {
  position: relative;
  z-index: 1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  flex-grow: 1;
}

.quicklink-card--companies {
  --quicklink-grad: linear-gradient(135deg, #3654ff, #5b78ff);
  --quicklink-tint: #e8ecff;
  --quicklink-shadow: rgba(54, 84, 255, 0.35);
}

.quicklink-card--program {
  --quicklink-grad: linear-gradient(135deg, #7c5cff, #a78bfa);
  --quicklink-tint: #ece5ff;
  --quicklink-shadow: rgba(124, 92, 255, 0.35);
}

.quicklink-card--info {
  --quicklink-grad: var(--color-kb-yellow);
  --quicklink-tint: #fff3d6;
  --quicklink-shadow: rgba(255, 209, 0, 0.35);
}

/* ---------- 페이지 헤더 (하위 페이지 공통) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1000px 560px at 10% -10%, rgba(255, 255, 255, 0.28), transparent 60%),
    radial-gradient(900px 520px at 100% 100%, rgba(6, 20, 90, 0.3), transparent 55%),
    linear-gradient(180deg, #01c1d5 0%, #2796e8 50%, #3182f6 100%);
  color: #fff;
  padding: calc(var(--header-height) + 56px) 0 56px; /* 제목은 본문으로 이동, D-day·신청 버튼 띠 */
}

.page-hero .hero-objects {
  top: -20%;
  right: -60px;
  width: 560px;
  height: 372px;

}

/* 서브 상단 띠: 메인과 같은 왼쪽 큰 흐린 삼각형 (띠 높이에 맞춰 축소, 아래로 반쯤 잘리게) */
.page-hero .hero-object-side {
  left: -140px;
  bottom: -70px;
  width: 340px;
  rotate: 45deg; /* 메인(20deg)보다 시계방향으로 20도 더 */
}

/* 서브 상단 띠: 메인 h1과 같은 행사명 */
.page-hero-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  align-items: center;
  text-align: center;
}

.page-hero-title {
  font-family: "BusanFont", var(--font-sans);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  word-break: keep-all;
  /* 행사명 글자와 신청 버튼의 세로 중앙을 한 줄로 맞춤 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
}

/* 서브 상단 띠: D-day + 사전참가 신청 */
.page-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; /* 띠 내용 전체 중앙 정렬 */
  gap: 20px;
  min-height: 58px;
}

.page-hero-dday {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

/* 행사명 + 사전참가 신청 버튼 한 줄 */
.page-hero-title-row {
  max-width: 100%; /* 가운데 정렬 시 좁은 화면에서 넘치지 않고 줄바꿈 */
}

/* D-day 블릿 (날짜·장소 앞) */
.page-hero-dday-count {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-primary-darker);
  color: var(--color-kb-yellow);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.page-hero-dday-info {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  word-break: keep-all;
}

/* 메인 원형 배너와 같은 광택 노란 버튼 (작은 알약형) */
.page-hero-apply {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  line-height: 1.3;
  padding: 13px 24px;
  border-radius: 999px;
  overflow: hidden;
  background: radial-gradient(120% 140% at 50% 30%, #ffe24a 0%, var(--color-kb-yellow) 50%, #f0b400 100%);
  color: #1a1400;
  font-size: 16px;
  font-weight: 800;
  box-shadow:
    inset 0 -4px 8px rgba(170, 105, 0, 0.3),
    inset 0 3px 5px rgba(255, 255, 255, 0.5),
    0 10px 18px -6px rgba(0, 0, 0, 0.45);
  transition: translate 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
}

.page-hero-apply::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 10%;
  width: 80%;
  height: 48%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.page-hero-apply svg {
  position: relative;
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease-snap);
}

.page-hero-apply:hover {
  translate: 0 -3px;
  box-shadow:
    inset 0 -4px 8px rgba(170, 105, 0, 0.3),
    inset 0 3px 5px rgba(255, 255, 255, 0.5),
    0 16px 22px -6px rgba(0, 0, 0, 0.4);
}

.page-hero-apply:hover svg {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .page-hero {
    padding: calc(var(--header-height) + 36px) 0 40px;
  }

  .page-hero-inner {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .page-hero-dday {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .page-hero-dday-info {
    font-size: 14px;
  }
}

/* 서브페이지 .eyebrow 라벨 임시 숨김 (다시 노출하려면 이 규칙만 삭제) */
body:not([data-page="home"]) .eyebrow {
  display: none;
}

body:not([data-page="home"]) .page-head h1 {
  margin-top: 0;
}

/* 본문 상단 페이지 제목 + 설명 (비주얼에서 본문으로 이동) */
.page-head {
  margin-bottom: 26px;
  padding-bottom: 28px;
}

.page-head h1 {
  margin-top: 14px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary-darker);
}

.page-head p {
  margin-top: 10px;
  max-width: 720px;
  font-size: 16px;
  color: var(--color-text-muted);
  word-break: keep-all;
}

/* 서브페이지 진입 애니메이션 (덩어리 단위): ① 상단 띠 전체 → ② 본문 제목 영역 전체 → ③ 카드 */
.page-hero-main,
.page-head {
  animation: hero-fade-up 0.7s var(--ease-snap) both;
}

.page-hero-main { animation-delay: 0.1s; }
.page-head { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .page-hero-main,
  .page-head {
    animation: none;
  }
}

/* ---------- 참가기업 페이지 ---------- */

.companies-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  margin-top: -34px;
  position: relative;
  z-index: 2;
}

.companies-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-darker);
}

.companies-count strong {
  color: var(--color-primary);
  font-size: 17px;
}

.companies-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 10px 16px;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
  transition: border-color 0.2s ease;
}

.search-field:focus-within {
  border-color: var(--color-primary);
}

.search-field svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-text-muted);
  flex-shrink: 0;
}

.search-field input {
  border: none;
  outline: none;
  font-size: 14px;
  width: 100%;
  font-family: inherit;
  background: transparent;
  color: var(--color-text);
}

.dropdown {
  position: relative;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dropdown-toggle:hover {
  border-color: var(--color-primary);
}

.dropdown-toggle .chevron {
  width: 16px;
  height: 16px;
  stroke: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.dropdown.is-open .dropdown-toggle {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.dropdown.is-open .dropdown-toggle .chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 20;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown.is-open .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-menu li {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-menu li:hover {
  background: var(--color-primary-lighter);
}

.dropdown-menu li.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
}

.company-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.company-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
}

.company-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.company-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-violet));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.company-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary-darker);
}

.company-industry {
  display: inline-block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 2px 10px;
  border-radius: 999px;
}

.company-jobs {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.company-jobs li {
  font-size: 13px;
  color: var(--color-text-muted);
  padding-left: 14px;
  position: relative;
}

.company-jobs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

.company-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.companies-load-more {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.companies-load-more .btn span {
  opacity: 0.85;
  font-weight: 600;
}

/* ---------- 안내 페이지 ---------- */

.info-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-block + .info-block {
  margin-top: 56px;
}

/* 안내 페이지 진입: 상단 띠(0.1s) → 본문 제목(0.3s) → 배치도(0.5s) → 오시는 길(0.6s) */
body[data-page="info"] .info-block {
  animation: program-card-in 0.55s var(--ease-snap) 0.5s backwards;
}

body[data-page="info"] .info-block + .info-block {
  animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="info"] .info-block {
    animation: none;
  }
}

.info-block-head {
  max-width: 100%;
}

.info-block h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary-darker);
}

.info-block .desc {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.info-detail-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-detail-list li {
  display: flex;
  gap: 12px;
  font-size: 16px;
}

.info-detail-list .k {
  flex-shrink: 0;
  width: 100px;
  font-weight: 700;
  color: var(--color-primary);
}

.program-row-meta.info-detail-list .k {
  width: 60px;
}

.info-detail-list .v {
  color: var(--color-text);
}

/* 전시장 배치도 이미지 (확정 후 사용) */
.floor-plan-img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* 교통 안내 카드 (자가용 / 지하철 / 버스) */
.transport-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.transport-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
  padding: 26px 32px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  word-break: keep-all;
}

.transport-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  grid-row: span 2;
}

.transport-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-primary-lighter);
  color: var(--color-primary);
}

.transport-card-icon svg {
  width: 22px;
  height: 22px;
}

.transport-card-head h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-primary-darker);
}

.transport-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
}

.transport-list li {
  display: flex;
  gap: 12px;
}

.transport-list .k {
  flex: 0 0 150px;
  font-weight: 700;
  color: var(--color-primary-darker);
}

.transport-list .v {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
}

.transport-note {
  grid-column: 2;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.transport-source {
  font-size: 13px;
  color: var(--color-text-muted);
}

.transport-source a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .transport-card {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .transport-card-head {
    grid-row: auto;
    margin-bottom: 16px;
  }

  .transport-note {
    grid-column: auto;
  }
}

/* 오시는 길: 지도 + 주소 + 교통 안내를 카드 하나로 */
.location-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.location-card .map-frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.location-card .naver-map-card {
  padding: 24px 32px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 자가용 / 지하철 / 버스: 가로 카드 3개 */
.location-card .transport-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 32px 32px;
}

/* 카드별 대표 색: 자가용(KB 노랑) / 지하철(초록) / 버스(파랑) */
.transport-card--car { --tc-accent: #f0b400; --tc-tint: #fff7d6; }
.transport-card--subway { --tc-accent: #2fa84f; --tc-tint: #e6f6ea; }
.transport-card--bus { --tc-accent: var(--color-primary); --tc-tint: var(--color-primary-lighter); }

.location-card .transport-card {
  position: relative;
  display: block;
  padding: 26px 24px 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.location-card .transport-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.location-card .transport-card-icon {
  display: flex;
  width: 44px;
  height: 44px;
  background: var(--tc-tint);
  color: var(--tc-accent);
}

/* 카드 폭이 좁아 항목명을 위, 내용을 아래로 */
.location-card .transport-list {
  gap: 0;
}

.location-card .transport-list li {
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px dashed var(--color-border);
}

.location-card .transport-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.location-card .transport-list .k {
  flex: none;
  font-size: 13px;
  color: var(--tc-accent);
}

.transport-card--car .transport-list .k {
  color: #b58700; /* 노랑 글자는 흰 배경에서 잘 안 보여 진하게 */
}

/* 지하철 노선 뱃지 */
.line-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.line-badge--2 { background: #2fa84f; }
.line-badge--donghae { background: #0b6fb8; }

@media (max-width: 980px) {
  .location-card .transport-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .location-card .naver-map-card {
    padding: 22px 20px;
  }

  .location-card .transport-grid {
    padding: 0 20px 20px;
  }

  .location-card .transport-card {
    padding: 20px;
  }
}

/* 네이버 지도 안내 카드 */
.naver-map-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.naver-map-card-info {
  flex: 1;
  min-width: 0;
}

.naver-map-card-info strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-primary-darker);
}

.naver-map-card-info p {
  margin-top: 4px;
  font-size: 15px;
  color: var(--color-text-muted);
}

/* 주소 복사 + 네이버 지도 버튼 묶음 */
.naver-map-card-actions {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
}

.copy-address-btn {
  background: #fff;
  border-width: 1px; /* 공통 .btn은 2px */
  padding: 15px 29px; /* 줄어든 테두리만큼 보정해 옆 네이버 버튼과 높이 유지 */
  border-color: var(--color-border);
  color: var(--color-primary-darker);
}

.copy-address-btn svg {
  width: 16px;
  height: 16px;
}

.copy-address-btn:hover {
  transform: translateY(-2px);
  border-color: #000;
  color:#000;
}

/* 복사 완료 상태 */
.copy-address-btn.is-copied {
  border-color:#000;
  color: #000;
}

.naver-map-btn {
  flex-shrink: 0;
  background: #03c75a;
  color: #fff;
}

.naver-map-btn:hover {
  transform: translateY(-2px);
  background: #02b351;
}

@media (max-width: 640px) {
  .naver-map-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  /* 버튼 묶음을 카드 폭에 맞추고, 두 버튼을 세로로 쌓아 화면 밖으로 넘치지 않게 */
  .naver-map-card-actions {
    width: 100%;
    flex-direction: column;
  }

  .copy-address-btn,
  .naver-map-btn {
    width: 100%;
  }
}

.map-frame {
  width: 100%;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 네이버 지도 커스텀 마커 (라벨 + 핀) */
.map-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 핀 끝(하단 중앙)이 좌표에 오도록 보정 — 라벨 길이가 바뀌어도 자동 정렬 */
  transform: translate(-50%, -100%);
}

.map-label-text {
  padding: 8px 14px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.map-label-text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
}

.map-label-pin {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--color-primary);
}

/* 네이버 지도 인증 실패 시 안내 */
.map-frame--error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-bg-alt);
  text-align: center;
  word-break: keep-all;
  color: var(--color-text-muted);
  font-size: 15px;
}

.placeholder-box {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--color-primary-light);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 20px;
}

.placeholder-box .icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-box .icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-primary);
}

.placeholder-box strong {
  color: var(--color-primary-darker);
  font-size: 15px;
}

.placeholder-box span {
  font-size: 18px;
}

/* ---------- 푸터 ---------- */

.site-footer {
  position: relative;
  background: var(--color-primary-darker);
  color: rgba(255, 255, 255, 0.72);
  padding: 48px 0 48px;
  font-size: 13px;
}

.site-footer .container {
  max-width: 100%;
  padding: 0 100px;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-violet), var(--color-accent));
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}

.footer-brand strong {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.footer-copyright {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

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

.footer-links label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 700;
}

.footer-select-wrap {
  position: relative;
}

.footer-select-wrap::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.6);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.footer-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 220px;
  padding: 11px 38px 11px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.footer-select:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
}

.footer-select option {
  color: var(--color-text);
  background: #fff;
}


/* ---------- 반응형 ---------- */

@media (max-width: 980px) {
  /* 태블릿·모바일: 섹션 좌우 여백 */
  .section {
    padding-left: 15px;
    padding-right: 15px;
  }

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

@media (max-width: 640px) {
  .hero-objects,
  .hero-object-side {
    display: none;
  }

  .section {
    padding: 48px 15px;
  }

  .quicklink-grid,
  .company-grid {
    grid-template-columns: 1fr;
  }

  .companies-toolbar {
    margin-top: 20px;
    flex-direction: column;
    align-items: stretch;
  }

  .companies-filters {
    justify-content: stretch;
  }

  .search-field {
    max-width: none;
  }

  .dropdown {
    width: 100%;
  }

  .dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .dropdown-menu {
    left: 0;
    right: 0;
    min-width: 0;
  }

  .footer-links {
    width: 100%;
  }

  .footer-select {
    width: 100%;
    min-width: 0;
  }

  .hero {
    padding: calc(var(--header-height) + 56px) 0 0;
  }

  .map-frame,
  .info-block > .placeholder-box {
    aspect-ratio: 4 / 3;
  }
}

/* 줄바꿈 금지 (정류장 번호 등) */
.nowrap {
  white-space: nowrap;
}

/* ---------- 반응형 글자 크기 (태블릿 / 모바일) ---------- */

/* 태블릿 */
@media (max-width: 980px) {
  .page-hero {
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-hero-title {
    font-size: 30px;
  }

  .page-hero-dday-info {
    font-size: 17px;
  }

  .page-head h1 {
    font-size: 30px;
  }

  .page-head p {
    font-size: 15px;
  }

  .section-head h2 {
    font-size: 26px;
  }

  .program-card-body h3 {
    font-size: 19px;
  }

  .info-block h2 {
    font-size: 21px;
  }

  /* 안내 블록(배치도 / 오시는 길) 여백 */
  .info-block {
    gap: 18px;
  }

  .info-block + .info-block {
    margin-top: 44px;
  }
}

/* ---------- 모바일 메뉴 바 ----------
   860px 이하: 상단 헤더(사이트명·햄버거)를 없애고 파란 비주얼이 헤더 역할,
   비주얼 맨 아래에 메뉴 바(js/main.js에서 헤더 메뉴를 복제해 삽입)를 포함 */
.mobile-nav {
  display: none;
}

@media (max-width: 860px) {
  .site-header {
    display: none;
  }

  .page-hero {
    padding-top: 32px;
    padding-bottom: 0;
  }

  /* 메인: 메뉴 바가 히어로 맨 위에 붙음 */
  body[data-page="home"] .hero {
    padding-top: 0;
  }

  body[data-page="home"] .hero .mobile-nav {
    margin-bottom: clamp(28px, 6vh, 60px);
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }

  .mobile-nav {
    display: block;
    position: relative;
    z-index: 3;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(6, 20, 90, 0.18);
  }

  /* 서브 비주얼: 왼쪽 [행사명 / D-day·일시·장소] + 오른쪽 정사각형 사전참가 신청 버튼.
     버튼이 행사명(p) 안에 있으므로 중간 래퍼를 display: contents로 풀어 그리드에 직접 배치 */
  .page-hero-inner {
    justify-content: stretch;
  }

  .page-hero-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
    text-align: left;
  }

  .page-hero-title-row,
  .page-hero-title {
    display: contents;
  }

  .page-hero-title-text {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .page-hero-dday {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 8px;
  }

  .page-hero .page-hero-apply {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 96px;
    height: 96px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.25;
    text-align: center;
    word-break: keep-all;
  }

  /* 서브 비주얼은 좌우 여백(15px)이 있으므로 메뉴 바만 끝까지 늘림 */
  .page-hero .mobile-nav {
    margin: 28px -15px 0;
  }

  .mobile-nav ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .mobile-nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 50px;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
  }

  .mobile-nav a.is-active {
    color: #fff;
  }

  /* 현재 페이지 밑줄 (KB 노랑) */
  .mobile-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--color-kb-yellow);
  }
}

@media (max-width: 360px) {
  .mobile-nav a {
    font-size: 14px;
  }

  .page-hero .page-hero-dday-info {
    font-size: 13px;
  }
}

/* 모바일 */
@media (max-width: 640px) {
  .page-hero-title {
    font-size: 23px;
    gap: 12px;
  }

  .page-hero-apply {
    padding: 10px 20px;
    font-size: 14px;
  }

  .page-hero .page-hero-apply {
    width: 84px;
    height: 84px;
    padding: 8px;
    border-radius: 16px;
  }

  /* 행사명 두 줄: "2026 KB굿잡" / "부산 잡(JOB) 페스티벌" */
  .page-hero-title {
    font-size: clamp(18px, 5.4vw, 23px);
  }

  .page-hero-title-text .kb-yellow::after {
    content: "\A";
    white-space: pre;
  }

  /* 일시 / 장소를 한 줄씩 (사이 구분점 "·"은 숨김) */
  .page-hero-dday-info .nowrap {
    display: block;
    line-height: 1.5;
  }

  .page-hero-dday-sep {
    display: none;
  }
  .page-hero-dday-count {
    font-size: 13px;
  }

  .page-hero-dday-info {
    font-size: 14px;
  }

  .page-head {
    margin-bottom: 16px;
    padding-bottom: 20px;
  }

  .page-head h1 {
    font-size: 24px;
  }

  .page-head p {
    font-size: 14px;
  }

  .section-head h2 {
    font-size: 22px;
  }

  .section-head p {
    font-size: 14px;
  }

  .program-card-body h3 {
    font-size: 17px;
  }

  .program-card-body p,
  .program-card--static .program-card-desc {
    font-size: 14px;
  }

  /* 카드가 한 줄에 하나씩 세로로 쌓이므로 카드끼리 높이 맞춤용 최소 높이 해제 */
  .program-card--static .program-card-desc {
    min-height: 0;
  }

  /* 기간 / 참여 방법 정보 여백 */
  .program-card-meta {
    margin-top: 14px;
    padding-top: 14px;
    gap: 6px;
    font-size: 13px;
  }

  .program-card-meta dt {
    flex-basis: 92px;
  }

  .program-card--static .program-card-meta {
    margin-bottom: 18px;
  }

  .info-block h2 {
    font-size: 19px;
  }

  .info-block {
    gap: 14px;
  }

  .info-block + .info-block {
    margin-top: 36px;
  }

  /* 오시는 길 카드 안쪽: 카드 + 교통 카드 여백이 겹쳐 본문이 좁아지므로 축소 */
  .location-card .naver-map-card {
    padding: 18px 16px;
  }

  .location-card .transport-grid {
    padding: 0 16px 16px;
  }

  .location-card .transport-card {
    padding: 18px 16px;
  }

  .transport-card-head h3 {
    font-size: 17px;
  }

  .naver-map-card-info strong {
    font-size: 17px;
  }

  .naver-map-card-info p {
    font-size: 14px;
  }
}

/* ---------- 시안 공유용 "준비중입니다" 안내 (js/main.js, body[data-preview]) ---------- */
[data-preview-soon] {
  cursor: pointer;
}

.preview-toast {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 40px;
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(11, 19, 48, 0.92);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s var(--ease-snap);
}

.preview-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- 프로그램 카드 QR (장항준 감독 강연 초대권) ----------
   응모 페이지가 모바일에서만 열리므로
   - 마우스를 쓰는 기기(PC): QR 코드 표시, 버튼 숨김, 카드 전체 클릭 해제
   - 터치 기기(휴대폰·태블릿): QR 숨김, "참여 페이지" 버튼으로 바로 이동 */
.program-card-qr {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}

.program-card-qr img {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
}

.program-card-qr p {
  /* 카드 설명(.program-card-body p)의 줄 수 제한 해제 */
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.program-card-qr strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  color: var(--color-primary-darker);
}

.program-card-qr span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
  .program-card--qr .program-card-qr {
    display: flex;
  }

  .program-card--qr .program-card-more--mobile {
    display: none;
  }

  .program-card--qr {
    cursor: default;
  }
}

/* ---------- 메인: 카드 2장 나란히 (사전참가 신청 / 장항준 감독 강연 초대권 QR) ----------
   - 넘김 없이 두 장을 한눈에, 살짝 겹쳐 배치 (왼쪽 사전참가 신청이 위)
   - 두 카드는 시안마다 같은 모양 (시안 1 사원증, 시안 2·3 입장권), 높이도 같게
   - 응모 페이지가 모바일에서만 열리므로 QR 카드는 PC(마우스)=QR, 휴대폰·태블릿(터치)=응모 버튼 */
body[data-page="home"] .hero .hero-apply-group {
  --card-overlap: 26px;
  position: absolute;
  z-index: 1;
  right: 120px;
  bottom: -40PX;
  display: grid;
  grid-template-columns: auto auto;
  align-items: stretch;
}

/* 카드 묶음 안에서는 신청 요소 자체의 절대 위치·여백 해제 */
body[data-page="home"] .hero .hero-apply-group .hero-apply-banner {
  position: relative;
  right: auto;
  bottom: auto;
  margin: 0;
}

.hero-stack-card {
  grid-row: 1;
}

.hero-stack-card[data-card="apply"] {
  grid-column: 1;
  z-index: 2;
}

.hero-stack-card[data-card="qr"] {
  grid-column: 2;
  z-index: 1;
  margin-left: calc(-1 * var(--card-overlap));
}

/* 카드 폭 (두 장이 들어가도록) */
.hero-apply-group .hero-stack-card .v2-ticket,
.hero-apply-group .hero-stack-card .hero-apply-banner.hero-badge {
  width: clamp(250px, 18vw, 285px);
}

@media (max-width: 1400px) {
  body[data-page="home"] .hero .hero-apply-group {
    right: 40px;
  }
}

@media (max-width: 1200px) {
  body[data-page="home"] .hero .hero-apply-group {
    right: 0;
  }
}

/* 태블릿: 본문 아래 가운데, 두 장 나란히 */
@media (max-width: 980px) {
  body[data-page="home"] .hero .hero-apply-group {
    position: relative;
    right: auto;
    bottom: auto;
    order: 1;
    align-self: center;
    margin-top: 40px;
  }

  .hero-apply-group .hero-stack-card .v2-ticket,
  .hero-apply-group .hero-stack-card .hero-apply-banner.hero-badge {
    width: 260px;
  }
}

/* 모바일: 위아래로 쌓고 살짝 겹침 */
@media (max-width: 640px) {
  body[data-page="home"] .hero .hero-apply-group {
    grid-template-columns: auto;
  }

  .hero-stack-card[data-card="qr"] {
    grid-row: 2;
    grid-column: 1;
    margin-left: 0;
    margin-top: calc(-1 * var(--card-overlap) + 8px);
  }

  .hero-apply-group .hero-stack-card .v2-ticket,
  .hero-apply-group .hero-stack-card .hero-apply-banner.hero-badge {
    width: min(300px, calc(100vw - 40px));
  }
}

/* QR 카드 공통: QR 이미지 + 안내 */
.hero-qr-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  text-align: left;
}

.hero-qr-img {
  flex-shrink: 0;
  display: block;
  width: 88px;
  height: 88px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
}

.hero-qr-hint {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-primary);
}

/* 사원증(시안 1) 안에서는 가운데 정렬 */
.hero-badge--qr .hero-qr-box {
  justify-content: center;
}

/* 터치 기기용 응모 버튼 (PC에서는 숨김) */
.hero-qr-link {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-primary-darker);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.hero-qr-link svg {
  width: 16px;
  height: 16px;
}

@media (hover: none), (pointer: coarse) {
  .hero-qr-box {
    display: none;
  }

  .hero-qr-link {
    display: inline-flex;
  }
}

/* 카드 2장 높이 맞춤: 겹친 칸(grid)의 높이 = 더 긴 카드 높이, 두 카드 모두 그만큼 늘이고 남는 공간은 본문에 */
.hero-stack-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* 시안 1 사원증 */
.hero-stack-card > .hero-apply-banner.hero-badge {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hero-stack-card .hero-badge-card {
  flex: 1;
}

.hero-stack-card .hero-badge-body {
  flex: 1;
  justify-content: center;
}

/* 시안 2 입장권 */
.hero-stack-card > .v2-ticket {
  flex: 1;
}

/* 시안 3 입장권 (자리 요소 안에 입장권) */
.hero-stack-card > .hero-apply-banner.v3-ticket-slot { /* main-v3.css보다 우선 */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hero-stack-card > .v3-ticket-slot > .v2-ticket {
  flex: 1;
}

/* 입장권 흰 부분이 늘어나고 노란 꼬리표는 아래 고정 */
.hero-stack-card .v2-ticket-main {
  flex: 1;
}

/* 카드 묶음 안의 입장권·사원증 자체 기울기 제거 (시안 2·3 전용 css의 rotate보다 우선)
   기울기는 묶음(.hero-stack-card)이 담당: 활성 카드 0°, 뒤 카드만 기울임 */
.hero-stack-card .v2-ticket.v2-ticket,
.hero-stack-card .v3-ticket-slot .v2-ticket,
.hero-stack-card .v3-ticket-slot .v2-ticket:hover,
.hero-stack-card .v2-ticket.v2-ticket:hover {
  transform: none;
}

/* 장항준 감독 카드 문구 */
.hero-qr-title {
  font-family: "BusanFont", var(--font-sans);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: #0b1330;
  word-break: keep-all;
}

.hero-qr-quote {
  font-size: 16px; /* 14px → 16px */
  font-weight: 700;
  color: #0b1330; /* 어두운 남색에 가까운 검정 */
  word-break: keep-all;
}

.hero-qr-how {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--color-primary-lighter);
  font-size: 12px;
  font-weight: 600;
  color: #0b1330;
}

.hero-qr-how b {
  font-size: 11px;
  color: var(--color-primary);
}

/* 시안 1 사원증: 본문 가운데 정렬 유지, 간격 촘촘하게 */
.hero-badge--qr .hero-badge-body {
  gap: 4px;
}

.hero-badge--qr .hero-qr-title {
  font-size: 19px;
}

/* 장항준 카드 "다른 프로그램 구경하기" 버튼: 한 줄 유지 (사원증은 폭이 좁아 글자·여백 살짝 축소) */
.hero-stack-card .v2-ticket-cta,
.hero-stack-card .hero-apply-banner-cta {
  white-space: nowrap;
}

.hero-badge--qr .hero-apply-banner-cta {
  padding: 9px 14px;
  font-size: 14px;
}

/* 입장권형 QR 카드(시안 2·3): 노란 꼬리표에 QR + 응모 기간 */
.v2-ticket .v2-ticket-stub.v2-ticket-stub--qr { /* 시안 3 규칙보다 우선 */
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.v2-ticket-stub--qr .hero-qr-img {
  width: 92px;
  height: 92px;
  border: 0;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35);
}

.hero-qr-stub-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-qr-stub-text strong {
  font-size: clamp(19px, 1.6vw, 24px);
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.15;
}

.v2-ticket-stub--qr .hero-qr-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #0b1330;
  opacity: 0.8;
}

/* 휴대폰·태블릿: 꼬리표에는 응모 기간만 (QR·스캔 안내 숨김) */
@media (hover: none), (pointer: coarse) {
  .v2-ticket-stub--qr .hero-qr-img,
  .v2-ticket-stub--qr .hero-qr-hint {
    display: none;
  }
}

/* ---------- 카드 2장 나란히: 겹침 보정 ---------- */

/* 겹침 순서: 오른쪽(장항준) 카드가 위 — 사전참가 신청 카드는 오른쪽에 여백이 있어 살짝 가려져도 내용이 가려지지 않음 */
.hero-stack-card[data-card="apply"] {
  z-index: 1;
}

.hero-stack-card[data-card="qr"] {
  z-index: 2;
}

/* 앞쪽 4면체가 카드(QR)를 가리지 않도록 메인에서는 카드 뒤로 */
body[data-page="home"] .hero .hero-objects--front {
  z-index: 0;
}

/* 시안 1 사원증: 두 장이 나란히 있으므로 랜야드 줄을 짧게 (헤더 메뉴와 겹치지 않게) */
.hero-apply-group .hero-badge {
  --strap: 9vh;
}

/* 한 글자만 줄바꿈되지 않도록 어절 단위 */
.hero-qr-hint,
.hero-qr-stub-text,
.hero-stack-card .v2-ticket-desc,
.hero-stack-card .hero-apply-banner-desc {
  word-break: keep-all;
}

/* 시안 1 사원증: 장항준 카드 내용 압축 (사원증이 너무 길어지지 않게) */
.hero-badge--qr .hero-qr-title {
  font-size: 17px;
}

.hero-badge--qr .hero-qr-quote {
  font-size: 14px;
}

.hero-badge--qr .hero-qr-img {
  width: 76px;
  height: 76px;
}

.hero-badge--qr .hero-badge-body {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* 데스크톱에서 화면 높이가 낮으면 카드 묶음을 살짝 축소 (헤더 메뉴와 겹치지 않게) */
@media (min-width: 981px) and (max-height: 900px) {
  body[data-page="home"]:not(.v2) .hero .hero-apply-group {
    scale: 0.86;
    transform-origin: 100% 100%;
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  body[data-page="home"]:not(.v2) .hero .hero-apply-group {
    scale: 0.76;
  }
}


/* 카드 2장 나란히: 화면이 좁을 때(1400px 이하) 카드 안 글자·여백 축소 */
.hero-apply-group .v2-ticket-title {
  font-size: clamp(22px, 1.9vw, 30px);
}

@media (max-width: 1400px) {
  .hero-apply-group .v2-ticket-main {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero-apply-group .v2-ticket-stub {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-apply-group .v2-ticket .v2-ticket-stub.v2-ticket-stub--qr {
    gap: 12px;
  }

  .hero-apply-group .v2-ticket-stub--qr .hero-qr-img {
    width: 76px;
    height: 76px;
  }
}

/* 카드 2장 살짝 기울임: 사전참가 신청은 왼쪽, 장항준은 오른쪽 (바닥 가운데 기준, V자) */
.hero-stack-card[data-card="apply"],
.hero-stack-card[data-card="qr"] {
  transform-origin: 50% 100%;
}

.hero-stack-card[data-card="apply"] {
  rotate: -4deg;
  translate: 0 9px; /* 아래로 살짝 */
}

.hero-stack-card[data-card="qr"] {
  rotate: 0deg; /* QR 인식을 위해 장항준 카드는 똑바로 */
  translate: 16px 0; /* 오른쪽으로 살짝 이동 */
}

@media (max-width: 640px) {
  .hero-stack-card[data-card="apply"] {
    rotate: -2deg;
  }

  .hero-stack-card[data-card="qr"] {
    rotate: 0deg;
  }
}

/* 입장권 2장: 노란 꼬리표 높이를 같게 → 흰 부분 높이도 같아지고 절취선 위치가 맞음 */
.hero-apply-group {
  --stub-h: 140px;
}

.hero-apply-group .hero-stack-card .v2-ticket-stub {
  box-sizing: border-box;
  height: var(--stub-h);
  justify-content: center;
}

@media (max-width: 1400px) {
  .hero-apply-group {
    --stub-h: 128px;
  }
}

/* 시안 1 사원증: 카드가 내용 폭으로 줄어들지 않고 사원증 폭을 꽉 채우도록 (두 장 폭 통일) */
.hero-stack-card > .hero-apply-banner.hero-badge {
  align-items: stretch;
}

/* ---------- 메인 푸터: 운영사무국 정보 + 개인정보처리방침·이메일 무단 수집 거부 ---------- */
.site-footer--main {
  padding: 36px 0;
}

.site-footer--main .footer-top {
  align-items: center;
}

.site-footer--main .footer-brand strong {
  font-size: 15px;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  font-style: normal;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.footer-info a {
  color: inherit;
}

.footer-info i {
  margin: 0 8px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.3);
}

.site-footer--main .footer-copyright {
  margin-top: 12px;
}

.footer-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-policy-btn {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-policy-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* 개인정보처리방침은 법적으로 눈에 띄게 표시 */
.footer-policy-btn--strong {
  color: var(--color-kb-yellow);
  font-weight: 800;
}

.footer-policy-btn--strong:hover {
  color: var(--color-kb-yellow);
}

@media (max-width: 860px) {
  .site-footer--main .container {
    padding: 0 20px;
  }

  .site-footer--main .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-policy {
    order: -1; /* 모바일에서는 버튼을 위로 */
  }
}

/* ---------- 정책 모달 (dialog) ---------- */
.policy-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(84vh, 860px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.policy-modal[open] {
  display: flex;
  flex-direction: column;
  animation: policy-modal-in 0.3s var(--ease-snap);
}

.policy-modal::backdrop {
  background: rgba(11, 19, 48, 0.55);
  backdrop-filter: blur(2px);
}

/* 투명도 변화 없이 살짝 올라오기만 (애니메이션이 멈춰도 내용은 항상 보이게) */
@keyframes policy-modal-in {
  from { transform: translateY(16px); }
  to { transform: none; }
}

.policy-modal--small {
  width: min(480px, calc(100vw - 32px));
}

.policy-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.policy-modal-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--color-primary-darker);
}

.policy-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary-darker);
  cursor: pointer;
}

.policy-modal-close:hover {
  background: var(--color-border);
}

.policy-modal-close svg {
  width: 20px;
  height: 20px;
}

.policy-modal-body {
  padding: 22px 24px 28px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.75;
  color: #3a4256;
  word-break: keep-all;
}

.policy-modal-body p {
  margin: 0 0 10px;
}

.policy-lead {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--color-primary-lighter);
  color: var(--color-primary-darker);
}

.policy-modal-body h3 {
  margin: 24px 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary-darker);
}

.policy-table {
  width: 100%;
  margin: 4px 0 12px;
  border-collapse: collapse;
  border-top: 2px solid var(--color-primary-darker);
  font-size: 14px;
}

.policy-table th,
.policy-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.policy-table th {
  width: 110px;
  background: var(--color-bg-alt);
  font-weight: 700;
  color: var(--color-primary-darker);
}

.policy-table a,
.policy-modal-body a {
  color: var(--color-primary);
  word-break: break-all;
}

/* 모달 열렸을 때 배경 스크롤 막기 */
body:has(.policy-modal[open]) {
  overflow: hidden;
}

@media (max-width: 640px) {
  .policy-modal {
    max-height: 88vh;
  }

  .policy-modal-head {
    padding: 16px 18px;
  }

  .policy-modal-head h2 {
    font-size: 17px;
  }

  .policy-modal-body {
    padding: 18px 18px 24px;
  }

  .policy-table th {
    width: 84px;
  }
}

/* 참가기업 페이지: 정보 확정 전 안내 박스 */
.companies-placeholder {
  gap: 10px;
  min-height: 320px;
  aspect-ratio: auto;
  text-align: center;
  word-break: keep-all;
}

.companies-placeholder strong {
  font-size: 18px;
}

.companies-placeholder > span:not(.icon) {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ---------- 메인 카드 2장: 마우스를 올리면 확실히 떠오르게 ---------- */
.hero-stack-card[data-card="apply"],
.hero-stack-card[data-card="qr"] {
  transition: translate 0.35s var(--ease-snap), rotate 0.35s var(--ease-snap), scale 0.35s var(--ease-snap), filter 0.35s var(--ease-snap);
}

.hero-stack-card[data-card="apply"]:hover,
.hero-stack-card[data-card="qr"]:hover {
  z-index: 3;
  rotate: 0deg;
  scale: 1.06;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.35));
}

.hero-stack-card[data-card="apply"]:hover {
  translate: 0 -12px;
}

.hero-stack-card[data-card="qr"]:hover {
  translate: 16px -12px;
}

/* 카드 안 버튼: 색은 그대로, 화살표만 움직임 */
.hero-stack-card:hover .v2-ticket-cta svg {
  transform: translateX(4px);
}

@media (hover: none) {
  .hero-stack-card[data-card="apply"]:hover,
  .hero-stack-card[data-card="qr"]:hover {
    scale: 1;
    filter: none;
  }
}

/* ---------- 행사안내: 항목 바로가기 탭 (프로그램 페이지 .program-tabs와 같은 모양·위치) ---------- */
.info-tab {
  padding: 9px 22px;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.info-tab:hover {
  color: var(--color-primary-darker);
}

.info-tab.is-active {
  color: var(--color-primary);
}

/* 항목이 5개라 좁은 화면에서는 가로 스크롤 */
.info-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.info-tabs::-webkit-scrollbar {
  display: none;
}

/* 바로가기로 이동했을 때 섹션 제목이 헤더에 가려지지 않게 */
body[data-page="info"] .info-block {
  scroll-margin-top: 90px;
}

@media (max-width: 640px) {
  .info-tab {
    padding: 8px 14px;
    font-size: 14px;
  }
}

/* ---------- 행사안내: 행사 개요 ---------- */
.overview-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 360px at 10% -10%, rgba(255, 255, 255, 0.3), transparent 60%),
    radial-gradient(600px 360px at 100% 110%, rgba(6, 20, 90, 0.35), transparent 60%),
    linear-gradient(135deg, #01c1d5 0%, #2796e8 50%, #3654ff 100%);
  color: #fff;
  word-break: keep-all;
}

.overview-obj {
  position: absolute;
  pointer-events: none;
  animation: hero-object-float 8s ease-in-out infinite;
}

.overview-obj--1 { right: 13px; top: -27px; width: clamp(140px, 20vw, 260px); }
.overview-obj--2 { right: 18%; bottom: -40px; width: clamp(80px, 9vw, 130px); animation-delay: 1s; animation-name: hero-object-float-alt; }
.overview-obj--3 { right: 8%; bottom: 22%; width: clamp(36px, 4vw, 56px); animation-delay: 0.5s; }

.overview-label {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 18px;
  font-weight: 700;
}

.overview-title {
  position: relative;
  margin-top: 18px;
  font-family: "BusanFont", var(--font-sans);
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.overview-title span {
  color: var(--color-kb-yellow);
}

.overview-facts {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.overview-facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(11, 19, 48, 0.28);
  font-size: 15px;
  font-weight: 600;
}

.overview-facts b {
  color: var(--color-kb-yellow);
  font-weight: 800;
}

.overview-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 28px;
  align-items: start;
}

.overview-text {
  font-size: 16px;
  line-height: 1.85;
  color: #3a4256;
  word-break: keep-all;
}

.overview-text p + p {
  margin-top: 14px;
}

.overview-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.overview-points li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.4);
  word-break: keep-all;
}

.overview-point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.overview-point-icon svg {
  width: 22px;
  height: 22px;
}

.overview-points strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary-darker);
}

.overview-points li > span:last-child {
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (max-width: 980px) {
  .overview-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .overview-obj--2,
  .overview-obj--3 {
    display: none;
  }

  .overview-obj--1 {
    opacity: 0.55;
  }

  .overview-facts li {
    width: 100%;
    font-size: 14px;
  }

  .overview-text {
    font-size: 15px;
  }

  .overview-points li {
    padding: 16px;
  }
}

/* ---------- 행사안내: 공지사항 ---------- */
.notice-list {
  border-top: 2px solid var(--color-primary-darker);
}

.notice-list li {
  border-bottom: 1px solid var(--color-border);
}

.notice-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 12px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease;
}

.notice-item:hover {
  background: var(--color-primary-lighter);
}

.notice-num {
  flex: 0 0 40px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: center;
}

.notice-tag {
  flex-shrink: 0;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
}

.notice-title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary-darker);
  word-break: keep-all;
}

.notice-item:hover .notice-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notice-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform 0.25s var(--ease-snap);
}

.notice-item:hover .notice-arrow {
  transform: translateX(4px);
  color: var(--color-primary);
}

/* 공지 모달 내용 */
.notice-modal .policy-modal-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notice-steps {
  margin: 0 0 10px;
  padding-left: 22px;
}

.notice-steps li {
  margin-bottom: 4px;
  padding-left: 4px;
}

.notice-link,
.notice-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.policy-modal-body a.notice-link,
.policy-modal-body a.notice-file {
  color: #fff;
  word-break: keep-all;
}

.notice-link.is-disabled,
.notice-file.is-disabled {
  border: 1px dashed #c3cdfa;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  cursor: default;
}

.notice-link em,
.notice-file em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
}

.notice-files {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.notice-note {
  color: var(--color-primary-darker);
  font-weight: 600;
}

.policy-modal-body .notice-closing {
  margin-top: 20px;
  font-weight: 700;
  color: var(--color-primary-darker);
}

@media (max-width: 640px) {
  .notice-item {
    gap: 10px;
    padding: 18px 6px;
  }

  .notice-num {
    flex-basis: 26px;
    font-size: 13px;
  }

  .notice-title {
    font-size: 15px;
  }
}

/* ---------- 행사안내: 자주하는 질문 (아코디언) ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
  border-color: #c3cdfa;
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.5);
}

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 56px 20px 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-darker);
  list-style: none;
  cursor: pointer;
  word-break: keep-all;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* 펼침 화살표 */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease-snap);
}

.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--color-primary);
}

/* 밑줄은 질문 글자에만 (Q 동그라미 제외) */
.faq-item summary:hover .faq-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-q {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.faq-a {
  position: relative;
  margin: 0 20px 20px;
  padding: 16px 18px 16px 46px;
  border-radius: 10px;
  background: var(--color-bg-alt);
  font-size: 15px;
  line-height: 1.75;
  color: #3a4256;
  word-break: keep-all;
}

.faq-a::before {
  content: "A";
  position: absolute;
  left: 18px;
  top: 15px;
  font-weight: 800;
  color: var(--color-primary);
}

.faq-a p + p {
  margin-top: 6px;
}

.faq-a a {
  color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 640px) {
  .faq-item summary {
    padding: 16px 44px 16px 14px;
    font-size: 15px;
    gap: 10px;
  }

  .faq-item summary::after {
    right: 18px;
  }

  .faq-q {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .faq-a {
    margin: 0 12px 14px;
    padding: 14px 14px 14px 38px;
    font-size: 14px;
  }

  .faq-a::before {
    left: 14px;
    top: 13px;
  }
}

/* 공지사항: 번호 | 제목 | 등록일 */
.notice-date {
  flex: 0 0 96px;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .notice-item {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .notice-title {
    flex-basis: calc(100% - 100px);
  }

  .notice-item .notice-date {
    flex-basis: 100%;
    padding-left: 36px;
    font-size: 13px;
    text-align: left;
  }
}

/* 페이지 탭(프로그램·행사안내)을 상단 메뉴 활성 모양(모서리 4px)에 맞춤 */
.program-tabs {
  border-radius: 8px;
}

.program-tab,
.info-tab {
  border-radius: 4px;
}


/* 공지사항: 자주하는 질문과 같은 카드형 목록 */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 0;
}

.notice-list li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notice-item {
  padding: 20px;
}

.notice-item:hover {
  background: transparent;
}

@media (max-width: 640px) {
  .notice-item {
    padding: 16px 14px;
  }

  .notice-item .notice-date {
    padding-left: 36px;
  }
}

/* 공지사항: 등록일은 오른쪽 끝에 작은 회색 글씨 (모바일도 같은 줄) */
.notice-item .notice-date {
  flex: 0 0 auto;
  padding-left: 0;
  font-size: 13px;
  font-weight: 500;
  color: #8a93a8;
  text-align: right;
}

@media (max-width: 640px) {
  .notice-item {
    flex-wrap: nowrap;
  }

  .notice-item .notice-date {
    flex-basis: auto;
    font-size: 12px;
  }
}

/* 공지사항 2개: 좌우 2칸 (태블릿 이하 한 줄씩) */
.notice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 860px) {
  .notice-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* 공지사항: 개인(한 명) / 단체(여러 명) 아이콘 */
.notice-who {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary-darker);
}

.notice-who svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 640px) {
  .notice-who {
    width: 32px;
    height: 32px;
  }

  .notice-who svg {
    width: 16px;
    height: 16px;
  }
}

/* 공지사항: 오른쪽 문서 아이콘 (등록일 대체) */
.notice-doc {
  flex-shrink: 0;
  display: flex;
  color: #8a93a8;
}

.notice-doc svg {
  width: 20px;
  height: 20px;
}

/* 공지사항 카드 hover: 자주하는 질문 펼침 상태와 같은 테두리·그림자 */
.notice-list li:hover {
  border-color: #c3cdfa;
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.5);
}

/* 자주하는 질문 hover: 펼침 상태와 같은 테두리·그림자 */
.faq-item:hover {
  border-color: #c3cdfa;
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.5);
}

/* 공지사항 모달 본문 글자 크기 */
.notice-modal .policy-modal-body {
  font-size: 15px;
}

/* 서브 본문·비주얼 좌우 여백: 본문 폭(1400px)보다 좁은 화면에서 화면 끝에 붙지 않게 (980px 이하는 기존 15px) */
@media (min-width: 981px) and (max-width: 1480px) {
  body:not([data-page="home"]) .section > .container,
  .page-hero .page-hero-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* 서브 비주얼: 노란 버튼 제거 후 모든 화면에서 행사명·일시 가운데 정렬 */
@media (max-width: 860px) {
  .page-hero-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .page-hero-dday {
    justify-content: center;
  }
}

/* 제목 영역 등장 애니메이션이 끝난 뒤 transform이 남지 않게 (남으면 안의 고정 탭이 화면 기준으로 고정되지 않음) */
.page-head {
  animation-fill-mode: backwards;
}

/* 페이지 탭(프로그램·행사안내): 선택된 탭은 앞에 파란 점 + 검정 글자, 나머지는 옅은 회색 */
.program-tab,
.info-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a3aabb;
}

.program-tab:hover,
.info-tab:hover {
  color: #5b6478;
}

.program-tab::before,
.info-tab::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  display: none;
}

.program-tab.is-active,
.info-tab.is-active {
  background: #fff;
  color: #0b1330;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.program-tab.is-active::before,
.info-tab.is-active::before {
  display: block;
}

/* 탭 바 흰 배경, 선택된 탭은 박스·그림자 없이 점 + 검정 글자만 */
.program-tabs {
  background: #fff;
}

.program-tab.is-active,
.info-tab.is-active {
  background: transparent;
  box-shadow: none;
}

/* 행사안내 탭으로 이동 시 섹션 위치 (140px → 80px, 모바일 70px → 10px) */
body[data-page="info"] .info-block {
  scroll-margin-top: 80px;
}

@media (max-width: 860px) {
  body[data-page="info"] .info-block {
    scroll-margin-top: 10px;
  }
}

/* 행사안내 탭: 제목 오른쪽에 겹쳐 두고, 스크롤하면 헤더 아래(72px)에 붙어 따라옴 (position: sticky)
   - 제목 영역(.page-head) 아래 여백(26px + 28px)과 탭 높이(50px)만큼 위로 끌어올려 제목 줄 오른쪽에 맞춤 */
.info-tabs {
  display: flex; /* inline-flex이면 margin auto로 오른쪽 정렬이 안 됨 */
  position: sticky;
  top: 72px;
  z-index: 90;
  width: fit-content;
  margin: -104px 0 54px auto;
}

@media (max-width: 860px) {
  .info-tabs {
    top: 8px;
    width: auto;
    margin: -10px 0 32px;
  }
}

/* 프로그램 목록: 한 줄에 4개, 카드 설명 15px */
.program-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.program-card--static .program-card-desc {
  font-size: 15px;
}

/* 항목명이 "기간 / 참여 방법"으로 짧아져 항목명 칸 축소 */
.program-card-meta dt {
  flex-basis: 72px;
}

@media (max-width: 1200px) {
  .program-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .program-card--static .program-card-desc {
    font-size: 14px;
  }
}

/* ---------- 프로그램 카드: 마우스를 올리면 뒤집혀 내용·참여하기 표시 (.program-card--flip) ----------
   - 앞면: 이미지 + 제목 / 뒷면: 설명, 기간, 참여 방법, 참여하기
   - 마우스: hover 시 뒤집힘 / 키보드: 포커스 시 뒤집힘 / 터치: 탭하면 뒤집힘 (js/main.js .is-flipped) */
.program-card.program-card--flip {
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
  perspective: 1400px;
}

.program-card.program-card--flip:hover {
  transform: none;
  box-shadow: none;
}

.flip-inner {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-snap);
}

.program-card--flip:hover .flip-inner,
.program-card--flip:focus-within .flip-inner,
.program-card--flip.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-face {
  display: flex;
  flex-direction: column;
  border: 1px solid #509ddf;
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-front {
  height: 100%;
}

.flip-front-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 22px;
  word-break: keep-all;
}

.flip-front-body h3,
.flip-back h3 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-primary-darker);
}

.flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #8a93a8;
}

.flip-hint svg {
  width: 14px;
  height: 14px;
}

.flip-back {
  position: absolute;
  inset: 0;
  gap: 10px;
  padding: 24px 22px 22px;
  transform: rotateY(180deg);
  word-break: keep-all;
  overflow-y: auto;
}

/* 뒷면 배지는 이미지 위가 아니라 글 흐름 안에 */
.flip-back .program-card-badge--static {
  position: static;
  align-self: flex-start;
}

.flip-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.flip-back .program-card-meta {
  margin: 4px 0 0;
}

/* 참여하기 버튼은 뒷면 맨 아래 */
.flip-back .program-card-more {
  margin-top: auto;
}

.flip-back .program-card-more:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.flip-back .program-card-more:hover .btn-arrow {
  transform: translateX(5px);
}

/* 터치 기기: 앞면 안내 문구를 "탭하여 자세히 보기"로 */
@media (hover: none) {
  .program-card--flip:hover .flip-inner {
    transform: none;
  }

  .program-card--flip.is-flipped .flip-inner {
    transform: rotateY(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip-inner {
    transition: none;
  }
}

@media (max-width: 640px) {
  .flip-front-body h3,
  .flip-back h3 {
    font-size: 17px;
  }

  .flip-desc {
    font-size: 14px;
  }
}

/* 뒤집기 카드 앞면: 제목 아래 기간·참여 방법 */
.flip-front-body {
  justify-content: flex-start;
}

.flip-front-body .program-card-meta {
  margin: 4px 0 0;
}

.flip-front-body .flip-hint {
  margin-top: auto;
}

/* 뒷면: 설명은 크게, 참여하기는 맨 아래 */
.flip-back .flip-desc {
  font-size: 16px;
}

/* 뒷면 내용이 짧아 가운데로 모아 배치 */
.flip-back {
  justify-content: center;
  gap: 12px;
  padding: 28px 24px;
}

.flip-back .program-card-more {
  margin-top: 12px;
}

/* 뒷면: 내용은 위에서부터, 참여하기 버튼은 맨 아래 */
.flip-back {
  justify-content: flex-start;
}

.flip-back .program-card-more {
  margin-top: auto;
}

/* 장항준 카드 뒷면: QR 코드 + 휴대폰 전용 안내 */
.flip-qr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}

.flip-qr-img {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
}

.flip-qr-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.flip-qr-note strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: #0b1330;
}

/* 휴대폰·태블릿: QR 대신 안내 문구만 (참여하기 버튼으로 바로 이동) */
@media (hover: none), (pointer: coarse) {
  .flip-qr-img,
  .flip-qr-pc {
    display: none;
  }
}

/* 뒷면 설명 글자 15px */
.flip-back .flip-desc {
  font-size: 15px;
}

/* 장항준 카드 뒷면: QR 위, 안내 문구 아래 (가운데 정렬) */
.flip-qr {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  text-align: center;
}

.flip-qr-img {
  width: 112px;
  height: 112px;
}

/* 뒤집기 카드 앞면: 제목 ↔ 기간·참여 방법 간격 정리
   - 제목은 2줄 높이로 고정해 카드끼리 구분선·항목 위치가 가로로 나란히 맞도록
   - 구분선 위아래 여백 축소 */
.flip-front-body {
  gap: 0;
  padding: 18px 22px 20px;
}

.flip-front-body h3 {
  min-height: calc(19px * 1.4 * 2);
}

.flip-front-body .program-card-meta {
  margin: 14px 0 0;
  padding-top: 14px;
  gap: 6px;
}

@media (max-width: 640px) {
  .flip-front-body h3 {
    min-height: 0;
  }
}

/* 뒤집기 카드 hover: 공지사항·자주하는 질문과 같은 검정 그림자 */
.flip-face {
  transition: box-shadow 0.3s ease;
}

.program-card--flip:hover .flip-face,
.program-card--flip:focus-within .flip-face,
.program-card--flip.is-flipped .flip-face {
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.35);
}

/* ---------- 행사 개요: 소개글 아래에 ◯ + ◯ + ◯ + ◯ ---------- */
.overview-body {
  grid-template-columns: 1fr;
  gap: 36px;
}

.overview-points {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.overview-points li {
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 190px);
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 18px;
  border-radius: 50%;
  text-align: center;
  box-shadow: none;
}

/* 원 사이 + 기호 */
.overview-points li + li {
  margin-left: 34px;
}

.overview-points li + li::before {
  content: "+";
  position: absolute;
  left: -44px;
  top: 50%;
  width: 34px;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  color: #a3aabb;
}

.overview-points .overview-point-icon {
  margin-bottom: 6px;
}

.overview-points strong {
  font-size: 15px;
}

.overview-points li > span:last-child {
  font-size: 12px;
}

/* 태블릿: 원 크기 축소 */
@media (max-width: 980px) {
  .overview-points li {
    width: 140px;
    padding: 12px;
  }

  .overview-points li + li {
    margin-left: 20px;
  }

  .overview-points li + li::before {
    left: -32px;
    width: 24px;
    font-size: 22px;
  }

  .overview-points .overview-point-icon {
    width: 36px;
    height: 36px;
  }

  .overview-points strong {
    font-size: 14px;
  }
}

/* 모바일: 2개씩 두 줄 (+ 기호는 같은 줄 사이에만) */
@media (max-width: 640px) {
  .overview-points {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: 40px;
    row-gap: 16px;
  }

  .overview-points li {
    width: 138px;
    padding: 10px;
  }

  .overview-points li + li {
    margin-left: 0;
  }

  .overview-points li + li::before {
    display: none;
  }

  .overview-points li:nth-child(2n)::before {
    display: block;
    left: -32px;
  }

  .overview-points li > span:last-child {
    font-size: 11px;
  }
}

/* 행사 개요 원: 더 크게, 글자도 크게 */
.overview-points li {
  width: clamp(190px, 17vw, 240px);
  padding: 22px;
}

.overview-points .overview-point-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
}

.overview-points .overview-point-icon svg {
  width: 26px;
  height: 26px;
}

.overview-points strong {
  font-size: 18px;
}

.overview-points li > span:last-child {
  font-size: 14px;
}

@media (max-width: 1200px) {
  .overview-points li {
    width: 180px;
  }

  .overview-points strong {
    font-size: 16px;
  }

  .overview-points li > span:last-child {
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  .overview-points li {
    width: 150px;
    padding: 14px;
  }

  .overview-points .overview-point-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
  }

  .overview-points strong {
    font-size: 15px;
  }

  .overview-points li > span:last-child {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .overview-points li {
    width: 148px;
    padding: 12px;
  }

  .overview-points strong {
    font-size: 15px;
  }
}

/* 행사 개요: 원 → 화면 폭을 꽉 채우는 사각형 4개 (사이 + 기호 유지) */
.overview-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 44px;
}

.overview-points li {
  width: auto;
  aspect-ratio: auto;
  padding: 34px 20px;
  border-radius: var(--radius-md);
}

.overview-points li + li {
  margin-left: 0;
}

.overview-points li + li::before {
  left: -39px; /* 칸 사이(44px) 가운데 */
  width: 34px;
}

@media (max-width: 980px) {
  .overview-points {
    gap: 30px;
  }

  .overview-points li {
    width: auto;
    padding: 24px 12px;
  }

  .overview-points li + li::before {
    left: -27px;
    width: 24px;
  }
}

/* 모바일: 2개씩 두 줄 */
@media (max-width: 640px) {
  .overview-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 14px;
  }

  .overview-points li {
    width: auto;
    padding: 20px 10px;
  }

  .overview-points li:nth-child(2n)::before {
    left: -27px;
  }
}

/* 메인: 앞쪽 4면체(카드 아래쪽)는 카드 위로 */
body[data-page="home"] .hero .hero-objects--front {
  z-index: 3;
}

/* 메인 카드 겹침 순서: 사전참가 신청 카드가 장항준 카드 위로 */
.hero-stack-card[data-card="apply"] {
  z-index: 2;
}

.hero-stack-card[data-card="qr"] {
  z-index: 1;
}

/* 주관 로고 28개(15개 → 28개): 흐르는 속도를 이전과 같게 */
.marquee-track {
  animation-duration: 130s;
}

/* ---------- 참가기업 페이지 ---------- */
/* ① KB굿잡 참가기업 바로가기 */
.companies-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  word-break: keep-all;
}

.companies-cta-text strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #0b1330;
}

.companies-cta-text span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--color-text-muted);
}

.companies-cta-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.companies-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, transform 0.3s var(--ease-snap);
}

.companies-cta-btn:hover {
  background: #2a44e6;
  transform: translateY(-2px);
}

.companies-cta-btn svg {
  width: 18px;
  height: 18px;
}

/* 엑셀 내려받기: 상대적으로 작게 (hidden 속성 제거 시 노출) */
.companies-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: #3a4256;
  font-size: 14px;
  font-weight: 700;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.companies-download-btn[hidden] {
  display: none;
}

.companies-download-btn:hover {
  border-color: #0b1330;
  color: #0b1330;
}

.companies-download-btn svg {
  width: 16px;
  height: 16px;
}

/* ② 참가기업관 구성 */
.pavilion-block {
  margin-top: 56px;
}

.pavilion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pavilion-card {
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  word-break: keep-all;
}

.pavilion-name {
  padding-bottom: 12px;
  border-bottom: 2px solid #0b1330;
  font-size: 18px;
  font-weight: 800;
  color: #0b1330;
}

.pavilion-companies {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  font-size: 15px;
  color: #3a4256;
}

.pavilion-companies li::before {
  content: "· ";
  color: var(--color-primary);
  font-weight: 800;
}

.pavilion-empty {
  grid-column: 1 / -1;
  padding: 48px 20px;
  border: 1px dashed #c3cdfa;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  text-align: center;
  font-size: 15px;
  color: var(--color-text-muted);
}

@media (max-width: 980px) {
  .pavilion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .companies-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px;
  }

  .companies-cta-text strong {
    font-size: 16px;
  }

  .companies-cta-text span {
    font-size: 14px;
  }

  .companies-cta-btn {
    padding: 15px 20px;
    font-size: 16px;
  }

  .pavilion-block {
    margin-top: 40px;
  }

  .pavilion-grid {
    grid-template-columns: 1fr;
  }
}

/* 엑셀 내려받기 버튼: 밝은 녹색 */
.companies-download-btn {
  border-color: #1a9257;
  background: #1a9257;
  color: #fff;
}

.companies-download-btn:hover {
  border-color: #157a48;
  background: #157a48;
  color: #fff;
}

/* 엑셀 버튼 아이콘: 흰 사각형 안 녹색 X (엑셀 파일 표시) */
.companies-download-btn .xls-icon {
  display: flex;
}

.companies-download-btn .xls-icon svg {
  width: 20px;
  height: 20px;
}

/* 참가기업 확인하기: KB 노랑 + KB 그레이 */
.companies-cta-btn--kb {
  gap: 10px;
  background: linear-gradient(180deg, #ffd84d 0%, #ffd100 55%, #f5c400 100%);
  color: #3d3630;
  box-shadow:
    inset 0 -3px 0 rgba(150, 110, 0, 0.25),
    0 10px 22px -10px rgba(0, 0, 0, 0.35);
}

/* hover 시 색은 그대로 (살짝 떠오르는 효과만) */
.companies-cta-btn--kb:hover {
  background: linear-gradient(180deg, #ffd84d 0%, #ffd100 55%, #f5c400 100%);
  color: #3d3630;
}

.companies-cta-btn--kb .kb-mark {
  padding: 3px 8px;
  border-radius: 4px;
  background: #3d3630;
  color: #ffd100;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* 참가기업 버튼 모서리 6px */
.companies-cta-btn,
.companies-download-btn {
  border-radius: 6px;
}

/* 엑셀 버튼 hover: 색은 그대로, 2px 위로 */
.companies-download-btn {
  transition: transform 0.3s var(--ease-snap);
}

.companies-download-btn:hover {
  border-color: #1a9257;
  background: #1a9257;
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- 프로그램 페이지: 부대 프로그램 (① 이벤트 / ② 프로그램) ---------- */
.pg-section + .pg-section {
  margin-top: 64px;
}

.pg-section[hidden] {
  display: none;
}

.pg-section-head {
  margin-bottom: 24px;
}

.pg-section-head h2 {
  font-size: 24px;
  font-weight: 800;
  color: #0b1330;
}

.pg-section-head p {
  margin-top: 6px;
  font-size: 16px;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.pg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.pg-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  animation: program-card-in 0.55s var(--ease-snap) 0.5s backwards;
}

.pg-card:hover {
  border-color: #c3cdfa;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.35);
}

/* 일러스트 / 사진 영역 */
.pg-media {
  position: relative;
  aspect-ratio: 400 / 260;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.pg-illust,
.pg-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-snap);
}

.pg-card:hover .pg-illust,
.pg-card:hover .pg-photo {
  transform: scale(1.04);
}

.pg-photo {
  object-position: center 20%;
}

/* 내용: 이름 / 소개 / 정보 */
.pg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
  word-break: keep-all;
}

.pg-tag {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
}

.pg-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: #0b1330;
}

.pg-desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.pg-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
}

.pg-meta div {
  display: flex;
  gap: 10px;
}

.pg-meta dt {
  flex: 0 0 64px;
  font-weight: 700;
  color: #0b1330;
}

.pg-meta dd {
  margin: 0;
  color: #3a4256;
}

/* 기념품 사진 (일러스트와 구분: 정보 아래 작은 사진, 전달 전 hidden) */
.pg-gift {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-alt);
}

.pg-gift[hidden] {
  display: none;
}

.pg-gift img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  background: #fff;
}

.pg-gift figcaption {
  font-size: 13px;
  font-weight: 700;
  color: #3a4256;
}

/* 참여하기 버튼 (사전등록 이벤트) */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding: 11px 16px;
  border-radius: 6px;
  background: #0b1330;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.3s var(--ease-snap);
}

.pg-meta + .pg-btn,
.pg-gift + .pg-btn,
.pg-body > .pg-btn {
  margin-top: 16px;
}

.pg-btn:hover {
  transform: translateY(-2px);
}

.pg-btn svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1200px) {
  .pg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .pg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pg-section + .pg-section {
    margin-top: 44px;
  }

  .pg-section-head h2 {
    font-size: 20px;
  }

  .pg-section-head p {
    font-size: 14px;
  }

  .pg-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pg-title {
    font-size: 17px;
  }

  .pg-desc {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-card {
    animation: none;
  }
}

/* 프로그램 카드 썸네일: 정사각형 (홍보 이미지가 1:1이라 잘리지 않게, 일러스트도 정사각 viewBox) */
.pg-media {
  aspect-ratio: 1 / 1;
}

.pg-photo {
  object-position: center;
}

/* 프로그램 태그(AI 타로 등)는 제목 앞에 한 줄로 */
.pg-title .pg-tag {
  display: inline-block;
  align-self: auto;
  margin: 0 6px 0 0;
  vertical-align: 2px;
}

/* 공지 첨부파일 다운로드 버튼: 파란 점선 테두리, 흰 배경, 앞에 다운로드 아이콘 */
.policy-modal-body a.notice-file {
  border: 1.5px dashed var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  transition: background 0.2s ease;
}

.policy-modal-body a.notice-file:hover {
  background: var(--color-primary-lighter);
}

.notice-file-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.policy-modal-body a.notice-file em {
  color: #8a93a8;
}

/* 공지 첨부파일 버튼: 가로 100% */
.notice-files {
  align-items: stretch;
}

.notice-files li,
.policy-modal-body a.notice-file {
  width: 100%;
}

/* 공지 첨부파일 버튼 모서리 6px */
.policy-modal-body a.notice-file {
  border-radius: 6px;
}

/* 프로그램 카드 설명: 2줄 높이 고정 (짧아도 2줄 자리, 길면 2줄에서 말줄임) */
.pg-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.6em * 2);
}

/* ---------- 프로그램 카드 뒤집기 (.pg-card--flip) ----------
   앞면: 썸네일 + 제목 + 정보 / 뒷면: 설명 + 참여 방식
   두 면을 같은 칸에 겹쳐(grid) 높이는 큰 쪽에 맞춤 */
.pg-card.pg-card--flip {
  overflow: visible;
  border: 0;
  background: transparent;
  perspective: 1400px;
}

.pg-card.pg-card--flip:hover {
  box-shadow: none;
}

.pg-flip-inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-snap);
}

.pg-card--flip:hover .pg-flip-inner,
.pg-card--flip:focus-within .pg-flip-inner,
.pg-card--flip.is-flipped .pg-flip-inner {
  transform: rotateY(180deg);
}

.pg-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.pg-card--flip:hover .pg-face,
.pg-card--flip:focus-within .pg-face,
.pg-card--flip.is-flipped .pg-face {
  border-color: #c3cdfa;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.35);
}

/* 뒤집기 카드에서는 썸네일 확대 효과 없음 */
.pg-card--flip:hover .pg-illust,
.pg-card--flip:hover .pg-photo {
  transform: none;
}

/* 뒷면 */
.pg-back {
  transform: rotateY(180deg);
  padding: 28px 22px 22px;
  word-break: keep-all;
}

.pg-back .pg-desc {
  display: block;
  min-height: 0;
  margin-top: 12px;
  font-size: 15px;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.pg-back-foot {
  margin-top: auto;
  padding-top: 18px;
}

.pg-back-foot .pg-btn {
  display: flex;
  width: 100%;
  margin-top: 0;
}

/* 현장 참여 표시 (버튼 자리, 같은 높이) */
.pg-onsite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px 16px;
  border: 1px dashed #c3cdfa;
  border-radius: 6px;
  background: var(--color-primary-lighter);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
}

.pg-onsite svg {
  width: 15px;
  height: 15px;
}

/* 터치 기기: hover 대신 탭으로 뒤집기 (js/main.js) */
@media (hover: none) {
  .pg-card--flip:hover .pg-flip-inner {
    transform: none;
  }

  .pg-card--flip.is-flipped .pg-flip-inner {
    transform: rotateY(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-flip-inner {
    transition: none;
  }
}

/* 뒤집기 카드 뒷면: 제목 위 분류 배지 (이벤트 노랑 / 프로그램 파랑) */
.pg-badge {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.pg-badge--event {
  background: var(--color-kb-yellow);
  color: #241c00;
}

.pg-badge--program {
  background: var(--color-primary);
  color: #fff;
}

/* 뒷면 기간·참여 방법 */
.pg-meta--back {
  margin-top: 14px;
}

/* 참여하기 버튼 hover: 움직임 없이 살짝 진한 색 */
.pg-btn {
  transition: background 0.2s ease;
}

.pg-btn:hover {
  transform: none;
  background: #000;
}

/* 카드 정보(혜택 / 운영 시간·장소 등): 항목명 칸을 카드 안에서 가장 긴 항목명에 맞춤
   (혜택 한 줄만 있는 카드는 혜택 바로 뒤에 내용) */
.pg-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
}

.pg-meta div {
  display: contents;
}

.pg-meta dt {
  flex: none;
  white-space: nowrap;
}

/* 제목 앞 태그(AI 타로·특별강연 등): 파란색 대신 남색 바탕 + 흰 글자 */
.pg-tag {
  background: #0b1330;
  color: #fff;
}

/* 장항준 특별강연 뒷면: PC는 QR, 휴대폰은 응모 버튼 */
.pg-qr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-alt);
}

.pg-qr img {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  padding: 4px;
  border-radius: 6px;
  background: #fff;
}

.pg-qr p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.pg-qr strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: #0b1330;
}

.pg-back-foot .pg-btn--mobile {
  display: none; /* PC에서는 QR만 */
}

@media (hover: none), (pointer: coarse) {
  .pg-qr {
    display: none;
  }

  .pg-back-foot .pg-btn--mobile {
    display: flex;
  }
}

/* 제목 앞 태그(특별강연): 세로 높이 줄임 */
.pg-title .pg-tag {
  padding: 1px 8px;
  font-size: 12px;
  line-height: 1.5;
  vertical-align: 3px;
}

/* 뒷면 배지(이벤트·프로그램): 글자 세로 정중앙 */
.pg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 11px;
  line-height: 1;
}

/* 카드 정보(운영 시간·장소 등) 여백 축소: 구분선 위아래·줄 사이 */
.pg-meta {
  margin-top: 10px;
  padding-top: 10px;
  row-gap: 3px;
}

.pg-front .pg-body {
  padding: 16px 20px 13px;
}

/* ==========================================================================
   모서리(border-radius) 통일: 콘텐츠 최대 10px / 버튼 6px / 배지·태그 4px
   (변수: --radius-sm 8px, --radius-md 10px, --radius-lg 10px, --radius-btn 6px, --radius-chip 4px)
   ========================================================================== */

/* 콘텐츠 박스 (최대 10px) */
.hero-badge-card,
.policy-modal,
.overview-points li,
.overview-hero {
  border-radius: var(--radius-md);
}

.overview-facts li,
.company-avatar,
.hero-qr-img,
.hero-qr-how,
.policy-lead,
.faq-a,
.program-card-qr img,
.flip-qr-img,
.pg-gift,
.pg-qr,
.overview-point-icon {
  border-radius: var(--radius-sm);
}

/* 버튼 (6px) */
.hero-apply-banner-cta,
.v2-ticket-cta,
.hero-qr-link,
.page-hero-apply,
.page-hero .page-hero-apply,
.program-card-more,
.footer-select,
.footer-policy-btn,
.nav-toggle,
.search-field,
.dropdown-toggle,
.policy-modal-close,
.companies-cta-btn,
.companies-download-btn,
.pg-btn,
.pg-onsite,
.policy-modal-body a.notice-file,
.main-nav a {
  border-radius: var(--radius-btn);
}

.page-hero-apply::before {
  border-radius: 4px;
}

/* 배지·태그·작은 칩 (4px) */
.program-card-badge,
.pg-badge,
.pg-tag,
.notice-tag,
.page-hero-dday-count,
.line-badge,
.company-industry,
.overview-label,
.map-label-text,
.preview-toast,
.program-tab,
.info-tab {
  border-radius: var(--radius-chip);
}

/* 탭 바 */
.program-tabs {
  border-radius: var(--radius-btn);
}

@media (max-width: 860px) {
  .page-hero .page-hero-apply {
    border-radius: var(--radius-btn);
  }
}

/* 메인 카드 등장 순서: 사전참가 신청 → (0.45초 뒤) 장항준 감독 강연 */
body[data-page="home"] .hero-apply-group .hero-apply-banner,
body[data-page="home"] .hero-apply-group .v2-ticket {
  animation: none;
  opacity: 1;
}

body[data-page="home"] .hero-stack-card {
  animation: hero-banner-in 0.9s var(--ease-snap) both;
}

body[data-page="home"] .hero-stack-card[data-card="apply"] {
  animation-delay: 1.1s;
}

body[data-page="home"] .hero-stack-card[data-card="qr"] {
  animation-delay: 1.55s;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero-stack-card {
    animation: none;
  }
}

/* ---------- 서브 페이지 진입 애니메이션 정리 ----------
   상단 띠(0.1s) → 제목·탭(0.3s) → 본문 덩어리 순서대로 (backwards: 끝난 뒤 transform이 남지 않아 sticky·hover와 충돌 없음) */
.info-tabs {
  animation: hero-fade-up 0.7s var(--ease-snap) 0.3s backwards;
}

/* 참가기업: 바로가기 박스(0.5s) → 참가기업관 구성(0.6s) */
.companies-cta,
.pavilion-block {
  animation: program-card-in 0.55s var(--ease-snap) 0.5s backwards;
}

.pavilion-block {
  animation-delay: 0.6s;
}

/* 행사안내: 개요(0.5s) → 배치도(0.6s) → 오시는 길(0.7s) → 공지사항(0.8s) → 자주하는 질문(0.9s) */
body[data-page="info"] #floor-plan { animation-delay: 0.6s; }
body[data-page="info"] #location { animation-delay: 0.7s; }
body[data-page="info"] #notice { animation-delay: 0.8s; }
body[data-page="info"] #faq { animation-delay: 0.9s; }

/* 프로그램: 카드가 한 장씩 (70ms 간격) */
.pg-grid > .pg-card:nth-child(2) { animation-delay: 0.57s; }
.pg-grid > .pg-card:nth-child(3) { animation-delay: 0.64s; }
.pg-grid > .pg-card:nth-child(4) { animation-delay: 0.71s; }
.pg-grid > .pg-card:nth-child(5) { animation-delay: 0.78s; }
.pg-grid > .pg-card:nth-child(n + 6) { animation-delay: 0.85s; }

@media (prefers-reduced-motion: reduce) {
  .info-tabs,
  .companies-cta,
  .pavilion-block {
    animation: none;
  }
}

/* 프로그램: 영역 제목·설명도 순서대로 (이벤트 0.45s → 카드 0.5s~ / 프로그램 0.85s → 카드) */
.pg-section-head {
  animation: program-card-in 0.55s var(--ease-snap) 0.45s backwards;
}

#programs .pg-section-head {
  animation-delay: 0.85s;
}

#programs .pg-grid > .pg-card:nth-child(1) { animation-delay: 0.9s; }
#programs .pg-grid > .pg-card:nth-child(2) { animation-delay: 0.97s; }
#programs .pg-grid > .pg-card:nth-child(3) { animation-delay: 1.04s; }
#programs .pg-grid > .pg-card:nth-child(4) { animation-delay: 1.11s; }
#programs .pg-grid > .pg-card:nth-child(5) { animation-delay: 1.18s; }
#programs .pg-grid > .pg-card:nth-child(n + 6) { animation-delay: 1.25s; }

@media (prefers-reduced-motion: reduce) {
  .pg-section-head {
    animation: none;
  }
}

/* 지도 라벨: 말풍선과 꼬리(삼각형) 사이에 선이 보이지 않게
   - 그림자를 말풍선 상자 대신 라벨 전체(말풍선+꼬리)에 한 번만
   - 꼬리를 1px 위로 겹쳐 틈 제거 */
.map-label {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.map-label-text {
  box-shadow: none;
}

.map-label-pin {
  margin-top: -1px;
}

/* 모달 닫기 버튼: 원형 */
.policy-modal-close {
  border-radius: 50%;
}

/* 모달 닫기 버튼 hover: X가 90도 회전 */
.policy-modal-close svg {
  transition: transform 0.35s var(--ease-snap);
}

.policy-modal-close:hover svg {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .policy-modal-close svg {
    transition: none;
  }
}

/* 서브 비주얼 860px 이하: 이전 그리드 배치에서 남은 align-self(end/start) 때문에
   행사명은 오른쪽, D-day는 왼쪽으로 쏠리던 문제 → 모두 가운데 */
@media (max-width: 860px) {
  .page-hero-inner {
    justify-content: center;
  }

  .page-hero-title-text,
  .page-hero-dday {
    align-self: center;
    text-align: center;
  }

  .page-hero-title {
    justify-content: center;
  }
}

/* 서브 비주얼 640px 이하: D-day 배지를 일시·장소 위로 올려 세로 가운데 정렬 */
@media (max-width: 640px) {
  .page-hero-dday {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .page-hero-dday-info .nowrap {
    display: block;
  }
}

/* ---------- 메인 카드 2장: PC보다 좁은 화면 ----------
   981~1180px: 카드가 제목을 가리므로 태블릿처럼 본문 아래 가운데로 */
@media (min-width: 981px) and (max-width: 1180px) {
  body[data-page="home"] .hero .container {
    display: flex;
    flex-direction: column;
  }

  body[data-page="home"] .hero .hero-apply-group,
  body[data-page="home"]:not(.v2) .hero .hero-apply-group {
    position: relative;
    right: auto;
    bottom: auto;
    order: 1;
    align-self: center;
    margin-top: 48px;
    scale: none;
  }
}

/* 장항준 카드: "응모하러 가기"가 보이는 경우(1180px 이하 또는 터치 기기)
   → "다른 프로그램 구경하기"·QR·스캔 안내 숨김 */
@media (max-width: 1180px), (hover: none), (pointer: coarse) {
  .hero-stack-card .v2-ticket.v2-ticket--qr .v2-ticket-cta { /* main-v3.css보다 우선 */
    display: none;
  }

  .v2-ticket--qr .hero-qr-link {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 8px;
  }

  .v2-ticket-stub--qr .hero-qr-img,
  .v2-ticket-stub--qr .hero-qr-hint {
    display: none;
  }

  /* QR이 빠진 노란 꼬리표: 사전참가 신청 카드의 D-day처럼 왼쪽 정렬 + 큰 날짜 */
  .hero-apply-group .v2-ticket .v2-ticket-stub.v2-ticket-stub--qr {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 26px;
    padding-right: 26px;
  }

  .v2-ticket-stub--qr .hero-qr-stub-text {
    gap: 8px;
  }

  .v2-ticket-stub--qr .hero-qr-stub-text strong {
    font-family: "BusanFont", var(--font-sans);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
  }
}

/* 모바일(카드 위아래): 기울임·겹침 없이 똑바로, 적당한 간격 */
@media (max-width: 640px) {
  .hero-stack-card[data-card="apply"],
  .hero-stack-card[data-card="qr"],
  .hero-stack-card[data-card="apply"]:hover,
  .hero-stack-card[data-card="qr"]:hover {
    rotate: 0deg;
    translate: 0 0;
  }

  .hero-stack-card[data-card="qr"] {
    margin-top: 20px;
  }

  .v2-ticket-stub--qr .hero-qr-stub-text strong {
    font-size: 38px;
  }
}

/* 사전등록 이벤트 뒷면: 일자리정보망 로그인 필요 안내 */
.pg-login-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: #3a4256;
  word-break: keep-all;
}

.pg-login-note svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--color-primary);
}

/* 메인 사전참가 신청 카드: 일자리정보망 로그인 필요 안내 */
.v3-ticket-slot .v2-ticket-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #5a6378;
  word-break: keep-all;
}

.v3-ticket-slot .v2-ticket-note svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--color-primary);
}

/* 부산체 적용: 로고 · 서브 페이지 제목 */
.brand strong,
.page-head h1 {
  font-family: "BusanFont", var(--font-sans);
}

/* 메인 장항준 카드: 당첨자 발표 / 강의 일시 / 장소 ("다른 프로그램 구경하기" 버튼 자리) */
.hero-qr-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  line-height: 1.45;
  word-break: keep-all;
}

.hero-qr-info div {
  display: flex;
  gap: 8px;
}

.hero-qr-info dt {
  flex: 0 0 68px;
  font-weight: 700;
  color: #0b1330;
}

.hero-qr-info dd {
  margin: 0;
  color: #3a4256;
}

/* 메인 참여 혜택: 모바일에서 길면 줄바꿈 */
@media (max-width: 640px) {
  .hero-meta li {
    align-items: flex-start;
  }

  .hero-meta li::before {
    margin-top: 0.55em;
  }

  .hero-meta li strong {
    flex-shrink: 0;
  }
}

/* 메인: 장항준 카드가 길어져 앞쪽 분홍 삼각형이 QR 안내를 가리지 않도록 아래로 */
body[data-page="home"] .hero-objects--front .hero-object-10 {
  top: 89%;
}

/* ---------- 프로그램 페이지: ① 사전 신청 이벤트 / ② 참여형 특별관 / ③ 현장 프로그램 ----------
   .pg-card--open: 뒤집기 없이 앞면에 내용 모두 표시 (면접비 지원 카드만 .pg-card--flip) */
.pg-card--open .pg-desc {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.pg-card-foot {
  margin-top: auto;
  padding-top: 18px;
}

.pg-card-foot .pg-btn {
  display: flex;
  width: 100%;
  margin-top: 0;
}

/* 장항준 특별강연: PC는 QR, 휴대폰·태블릿은 응모 버튼 */
.pg-card-foot .pg-btn--mobile {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .pg-card-foot .pg-btn--mobile {
    display: flex;
  }
}

/* 면접비 지원: 앞면 안내 (뒷면 수령 방법 확인) */
.pg-flip-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: auto 0 0;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  word-break: keep-all;
}

.pg-flip-hint svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

/* 면접비 지원: 뒷면 수령 방법 단계 */
.pg-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pg-step;
  font-size: 14px;
  line-height: 1.55;
  color: #3a4256;
}

.pg-steps > li {
  position: relative;
  padding-left: 32px;
  counter-increment: pg-step;
}

.pg-steps > li::before {
  content: counter(pg-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.pg-steps ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--color-bg-alt);
  list-style: none;
  font-size: 13px;
}

.pg-steps ul strong {
  margin-right: 6px;
  color: #0b1330;
}

/* 영역별 등장 순서: 사전 신청 이벤트 → 참여형 특별관 → 현장 프로그램 */
#pavilion .pg-section-head { animation-delay: 0.7s; }
#pavilion .pg-grid > .pg-card { animation-delay: 0.75s; }
#onsite .pg-section-head { animation-delay: 0.85s; }
#onsite .pg-grid > .pg-card:nth-child(1) { animation-delay: 0.9s; }
#onsite .pg-grid > .pg-card:nth-child(2) { animation-delay: 0.97s; }
#onsite .pg-grid > .pg-card:nth-child(3) { animation-delay: 1.04s; }
#onsite .pg-grid > .pg-card:nth-child(4) { animation-delay: 1.11s; }
#onsite .pg-grid > .pg-card:nth-child(n + 5) { animation-delay: 1.18s; }

/* 행사안내: 오시는 길이 맨 마지막 (개요 → 배치도 → 공지사항 → 자주하는 질문 → 오시는 길) */
body[data-page="info"] #notice { animation-delay: 0.7s; }
body[data-page="info"] #faq { animation-delay: 0.8s; }
body[data-page="info"] #location { animation-delay: 0.9s; }

/* 프로그램 탭: 글자가 길어져도 한 줄 (좁은 화면에서는 가로 스크롤) */
.program-tab,
.info-tab {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 프로그램 영역 바로가기: 이동했을 때 영역 제목이 고정 탭에 가려지지 않게 (행사안내와 같음) */
body[data-page="program"] .pg-section {
  scroll-margin-top: 80px;
}

@media (max-width: 860px) {
  body[data-page="program"] .pg-section {
    scroll-margin-top: 10px;
  }
}

/* ---------- 뒤집기 카드 구분 ----------
   ① 썸네일 오른쪽 위 "자세히" 배지 (마우스를 올리면 아이콘이 한 바퀴 돎)
   ② 앞면 아래 파란 안내 문구 (.pg-flip-hint) */
.pg-flip-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: rgba(11, 19, 48, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}

.pg-flip-chip svg {
  width: 13px;
  height: 13px;
  transition: transform 0.6s var(--ease-snap);
}

.pg-card--flip:hover .pg-flip-chip svg {
  transform: rotate(360deg);
}

/* 뒤집기 카드 앞면 설명도 전체 표시 */
.pg-card--flip .pg-front .pg-desc {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* 메인: 사전참가 신청 카드 앞 파란 삼각형 45px 아래로 */
body[data-page="home"] .hero-objects--front .hero-object-06 {
  margin-top: 45px;
}

/* 메인 일시·장소·참여 혜택: 항목 간격 넓힘 (10px → 18px) + 입장 마감 시간 */
.hero-meta {
  gap: 18px;
}

.hero-meta-sub {
  font-size: 0.72em;
  opacity: 0.85;
  white-space: nowrap;
}

/* 프로그램 뒷면: 강조 안내 (장항준 각본집 이벤트) */
.pg-back-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff6cc;
  color: #4a3b00;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}

/* 프로그램 뒷면: 제목 아래 부제 (내일찾집) */
.pg-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  word-break: keep-all;
}

/* 공지 신청 링크: 외부 사이트(새 창) 아이콘 */
.notice-link-ext {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--ease-snap);
}

.policy-modal-body a.notice-link {
  transition: background 0.2s ease;
}

.policy-modal-body a.notice-link:hover {
  background: var(--color-primary-darker);
}

.policy-modal-body a.notice-link:hover .notice-link-ext {
  transform: translate(2px, -2px);
}

/* 화면에는 안 보이고 화면낭독기만 읽는 글자 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* border-radius 규칙 (콘텐츠 최대 10px / 버튼 6px / 배지·태그 4px) — 이후 추가한 요소에도 적용 */
.notice-link,
.policy-modal-body a.notice-link {
  border-radius: var(--radius-btn); /* 버튼 6px */
}

.pg-flip-chip {
  border-radius: var(--radius-chip); /* 배지 4px */
}