/*
 * style.css
 * KNHTA 공통 스타일시트
 * 작성자: 조성우
 * 수정일: 2026-07-29 11:23:10.236
 * 재구성일: 2026-08-01 (분류 주석 정리, 로직 변경 없음)
 * 버전: ?v=1.3.7
 *
 * ==========================================================================
 * 전체 구조 안내
 * ==========================================================================
 *  0. 초소형 화면 보정 (max-width: 400px)
 *  1. 기본 베이스 & 글로벌 스타일
 *  2. 네비게이션 & 스크롤바
 *  3. 히어로 & 커버플로우 레이아웃
 *  4. 배경 물결 애니메이션 (헤더)
 *  5. 푸터 전용 상향 반전 물결 애니메이션
 *  6. 통합 모달 시스템
 *  7. 회원가입 관련 (홀로그램 CAPTCHA, 블러)
 *  8. 조직도 표 및 연결선 시스템
 *  9. 푸터 애니메이션 (ticker / marquee)
 * 10. 가로 스크롤바 숨김 유틸
 * ==========================================================================
 */

/* 1024px 이하 모바일/태블릿 화면 대상 */
@media (max-width: 400px) {
  html {
  /* zoom: 0.6; */
  font-size: 80% !important;
  }
}

/* ==========================================================================
   1. 기본 베이스 & 글로벌 스타일 (Base & Global Styles)
   ========================================================================== */

body {
	font-family: 'Noto Sans KR', sans-serif;
	background-color: #FAF8F5;
	color: #1E293B;
	word-break: keep-all;
	text-align: justify;
}

/* 텍스트 선택 및 터치 차단 */
body, html {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* 명조체 폰트 클래스 */
.font-serif-kr {
	font-family: 'Noto Serif KR', serif;
}

/* ==========================================================================
   2. 네비게이션 & 스크롤바 (Navigation & Custom Scrollbar)
   ========================================================================== */

/* 상단 메인 네비게이션 활성화 상태 */
.nav-active {
	color: #C59B27 !important;
	border-bottom: 2px solid #C59B27;
	font-weight: 700;
}

/* 커스텀 웹킷 스크롤바 */
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}


/* ==========================================================================
   3. 히어로 & 커버플로우 레이아웃 (Hero & Coverflow Layouts)
   ========================================================================== */
/* 히어로 섹션 배경 이미지 페이드 전환 */

/* 모바일 설정 */
.hero-fade-img {
	position: absolute;
	left: auto;
	right: 0;
	top: auto;
	bottom: 0;
	width: auto;
	height: 90%;
	opacity: 0.9;
	transition: opacity 1s ease-in-out;
	pointer-events: none;
	z-index: 0;
	object-fit: cover;
	object-position: right bottom;
}

@media (min-width: 1024px) {
	.hero-fade-img {
		left: 50%;
		transform: translateX(30%);
		right: auto;
		top: 0;
		bottom: auto;
		width: 30%;
		height: auto;
	}
}
/* 페이드 아웃 상태 */
.hero-fade-img.fade-out {
	opacity: 0;
}

/* 3D 커버플로우 모바일 연출 */
.coverflow-wrapper {
	perspective: 1000px;
}
.coverflow-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: none;
	scroll-behavior: auto;
	padding: 20px 10%;
	gap: 1rem;
	-webkit-overflow-scrolling: touch;
}
.coverflow-track::-webkit-scrollbar {
	display: none;
}
.coverflow-card {
	flex: 0 0 80%;
	scroll-snap-align: center;
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform-style: preserve-3d;
}

/* 푸터 카드 슬라이더 전용 스타일 */
.footer-slider {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox 스크롤바 숨김 */
}

.footer-slider::-webkit-scrollbar {
  display: none; /* Chrome, Safari 스크롤바 숨김 */
}

.footer-card {
  scroll-snap-align: start;
}

/* ==========================================================================
   4. 배경 물결 애니메이션 (Seamless Wave Animations)
   ========================================================================== */

.wave-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.wave-track {
	position: absolute;
	top: 0;
	left: 0;
	/* 타일 폭(600px) 여러 장을 덮을 만큼 넓게 */
	width: calc(100% + 2400px);
	height: 100%;
	background-repeat: repeat-x;
	background-position: 0 0;
	will-change: transform;
}

/* 물결 — 높이 확보 + 타일 폭(px)만큼만 이동해 루프 끊김 제거 */
.wave-layer-1 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C100,15 200,75 300,45 C400,15 500,75 600,45 L600,0 L0,0 Z' fill='%23C59B27' fill-opacity='0.08'%3E%3C/path%3E%3C/svg%3E");
	background-size: 600px 56px;
	background-repeat: repeat-x;
	animation: waveMove1 22s linear infinite;
}

.wave-layer-2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 80' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C80,20 160,70 240,45 C320,20 400,70 480,50 L480,0 L0,0 Z' fill='%23C59B27' fill-opacity='0.08'%3E%3C/path%3E%3C/svg%3E");
	background-size: 400px 36px;
	background-repeat: repeat-x;
	animation: waveMove2 14s linear infinite;
}

/* 한 타일 폭만큼만 이동 → 이음매 없이 무한 반복 */
@keyframes waveMove1 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-600px); }
}
@keyframes waveMove2 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-480px); }
}

/* ==========================================================================
   5. 푸터 전용 상향 반전 & 밝은 화이트 물결 애니메이션
   ========================================================================== */

.wave-container-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	transform: scaleY(-1);
}

.wave-container-footer .wave-track {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% + 2400px);
	height: 100%;
	background-repeat: repeat-x;
	background-position: 0 0;
	will-change: transform;
}

@keyframes waveFooterRight {
	0% { transform: translateX(-50%); }
	100% { transform: translateX(0%); }
}

/* 푸터 물결 */
.wave-layer-footer-1 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C100,15 200,75 300,45 C400,15 500,75 600,45 L600,0 L0,0 Z' fill='%23FFFFFF' fill-opacity='0.30'%3E%3C/path%3E%3C/svg%3E");
	background-size: 600px 56px;
	background-repeat: repeat-x;
	animation: waveFooter1 22s linear infinite;
}
.wave-layer-footer-2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 80' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C80,20 160,70 240,45 C320,20 400,70 480,50 L480,0 L0,0 Z' fill='%23FFFFFF' fill-opacity='0.20'%3E%3C/path%3E%3C/svg%3E");
	background-size: 480px 48px;
	background-repeat: repeat-x;
	animation: waveFooter2 14s linear infinite;
}
@keyframes waveFooter1 {
	0% { transform: translateX(-600px); }
	100% { transform: translateX(0); }
}
@keyframes waveFooter2 {
	0% { transform: translateX(-480px); }
	100% { transform: translateX(0); }
}


/* ==========================================================================
   5. 통합 모달 시스템 (Modal Overlay & Container)
   ========================================================================== */

.modal-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(15, 23, 42, 0.75);
	backdrop-filter: blur(4px);
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	animation: modalFadeIn 0.2s ease-out;
	/* 모바일: 배경 터치가 뒤 요소로 전달되지 않도록 */
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}

.modal-container {
  background-color: #ffffff;
  border-radius: 0.875rem;
  border: 1px solid rgba(197, 155, 39, 0.3);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  width: 100%;
  height: auto;
  max-height: 85vh;          /* 모바일 기본 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 데스크톱만 따로 */
@media (min-width: 1024px) {
  .modal-container {
    max-width: 56rem !important;
	max-height: 90vh !important;        /* 조절하면서 보기 */
  }/* 로그인 */
  .modal-container.max-w-md {
    max-width: 28rem !important;
  }

  /* 약관·색소 등 max-w-2xl */
  .modal-container.max-w-2xl {
    max-width: 42rem !important;
  }
}

.modal-header {
	background-color: #1B2A4A;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(197, 155, 39, 0.3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #ffffff;
	flex-shrink: 0;
}

.modal-body {
	padding: 1.25rem;
	overflow-y: auto; /* 내용 초과 시 내부 스크롤 생성 */
	flex-grow: 1;
	font-size: 0.875rem;
	color: #334155;
}

.modal-footer {
	background-color: #f8fafc;
	padding: 0.875rem 1.25rem;
	border-top: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	flex-shrink: 0;
}

@keyframes modalFadeIn {
	from { opacity: 0; transform: scale(0.97); }
	to { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   6. 회원가입 css
   ========================================================================== */

    /* 홀로그램 보안문자 영역 배경 애니메이션 */
    @keyframes slowHologramShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .hologram-shield-bg {
      background: linear-gradient(135deg, #fadedd, #e7ffe5, #f4ebff, #ffe5f6, #b3d2ff);
      background-size: 400% 400%;
      animation: slowHologramShift 10s ease infinite;
    }

    /* 주소 검색 및 예시 모달 배경 커스텀 블러 */
    .backdrop-blur-custom-2px {
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }

    /* 폼 제출 처리 중 표시되는 투명 오버레이 블러 스타일 */
    .loading-backdrop-blur {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      background-color: rgba(255, 255, 255, 0.4);
    }


/* ==========================================================================
   7. 조직도 표 및 연결선 시스템 (Org Chart System)
   ========================================================================== */

.org-chart-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.org-table {
	border-collapse: collapse;
	background-color: #ffffff;
	border: 1.5px solid #1B2A4A;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 조직도 헤더 셀 */
.org-table th {
	background-color: #1B2A4A;
	color: #ffffff;
	font-weight: 700;
	padding: 3px 8px;
	border: 1px solid #1B2A4A;
	text-align: center;
	white-space: nowrap;
}

/* 조직도 데이터 셀 */
.org-table td {
	padding: 8px 10px;
	border: 1px solid #CBD5E1;
	text-align: center;
	color: #1E293B;
	background-color: #ffffff;
	word-break: keep-all;
	text-align: justify;
	text-align-last: center; /* 단문 및 마지막 줄 가운데 정렬 */
}

/* 수직 연결선 (표 사이 상하 간격) */
.org-line {
	width: 2px;
	height: 30px;
	background-color: #1B2A4A;
}

/* 모바일 반응형 조직도 폭 조절 */
@media (max-width: 768px) {
	.org-table-director100 {
		width: 100% !important;
		max-width: none !important;
	}
	.org-table-director80 {
		width: 80% !important;
		max-width: none !important;
	}
	.org-table-director60 {
		width: 60% !important;
		max-width: none !important;
	}
	.org-table-director40 {
		width: 40% !important;
		max-width: none !important;
	}
}


/* ==========================================================================
   8. 푸터 애니메이션
   ========================================================================== */

/* 푸터 무한 자동 스크롤 애니메이션 */
@keyframes footerTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-ticker {
  display: flex;
  width: max-content;
  animation: footerTicker 25s linear infinite;
}

.animate-ticker:hover {
  animation-play-state: paused;
}

/* 푸터 마키 롤링 애니메이션 */
@keyframes footerMarquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-footer-marquee {
  display: flex;
  width: max-content;
  animation: footerMarquee 35s linear infinite;
}

.footer-marquee-wrapper:hover .animate-footer-marquee {
  animation-play-state: paused;
}


/* ==========================================================================
   9. 가로 스크롤바 숨김 전용 클래스 (Scrollbar Hide)
   ========================================================================== */
.scrollbar-hide::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}
.scrollbar-hide {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

/* ==========================================================================
   11. 게시판 공통 액션 버튼 (다운로드 / 사진 보기)
   --------------------------------------------------------------------------
   알림마당 · 발간자료실 · 양식자료실 리스트 우측 버튼 통일
   ========================================================================== */
.board-action-btn {
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #f1f5f9; /* slate-100 */
	color: #64748b; /* slate-500 */
	border-radius: 0.5rem;
	transition: background-color 0.15s ease, color 0.15s ease;
	flex-shrink: 0;
	border: none;
	cursor: pointer;
	text-decoration: none;
}
.board-action-btn:hover {
	background-color: #e2e8f0; /* slate-200 */
	color: #475569; /* slate-600 */
}
.board-action-btn.is-disabled,
.board-action-btn[disabled] {
	color: #94a3b8; /* slate-400 */
	cursor: default;
}
.board-action-btn i {
	font-size: 0.75rem;
	line-height: 1;
}
.board-action-btn.board-vis-icon {
	cursor: default;
	pointer-events: none;
}
.board-action-btn.board-vis-icon:hover {
	background-color: #f1f5f9;
	color: inherit;
}


/* ==========================================================================
   12. 먹 방울 효과
   --------------------------------------------------------------------------
   교육원장 인사말
   ========================================================================== */

/* 먹물 방울 기본 스타일 (기본값: 검은/슬레이트 먹빛) */
.ink-drop {
	position: absolute;
	border-radius: 50%;
	
	/* RGBA 값 자체를 변수로 지정 (기본 먹빛) */
	--ink-color-center: rgba(15, 23, 42, 0.8);
	--ink-color-mid: rgba(15, 23, 42, 0.3);
	
	background: radial-gradient(
		circle, 
		var(--ink-color-center) 0%, 
		var(--ink-color-mid) 50%, 
		rgba(0, 0, 0, 0) 75%
	);
	filter: url('#ink-bleed');
	opacity: 0;
	transform: scale(0);
	animation: inkSpread 8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* =========================================
   [색상 테마 클래스]
   ========================================= */

/* 푸른빛 먹물 (청묵) */
.ink-blue {
	--ink-color-center: rgb(0, 7, 21);
	--ink-color-mid: rgba(0, 7, 21, 0.3);
}

/* 붉은빛 먹물 (주묵) */
.ink-red {
	--ink-color-center: rgb(16, 0, 0);
	--ink-color-mid: rgba(16, 0, 0, 0.3);
}

/* =========================================
   [위치 설정]
   ========================================= */

/* 우상단 1번 방울 (메인 대형) */
.ink-tr-1 {
	top: -50px;
	right: -30px;
	width: 240px;
	height: 240px;
	animation-delay: 0s;
}

/* 우상단 2번 방울 (중형 곁방울) */
.ink-tr-2 {
	top: 60px;
	right: 140px;
	width: 130px;
	height: 130px;
	animation-delay: 0.8s;
}

/* 우상단 3번 방울 (소형 곁방울) */
.ink-tr-3 {
	top: 10px;
	right: 220px;
	width: 80px;
	height: 80px;
	animation-delay: 1.5s;
}

/* 좌하단 1번 방울 (메인 대형) */
.ink-bl-1 {
	bottom: -50px;
	left: -30px;
	width: 250px;
	height: 250px;
	animation-delay: 0.4s;
}

/* 좌하단 2번 방울 (중소형 곁방울) */
.ink-bl-2 {
	bottom: 70px;
	left: 120px;
	width: 110px;
	height: 110px;
	animation-delay: 1.1s;
}

/* =========================================
   [애니메이션 키프레임]
   ========================================= */
@keyframes inkSpread {
	0% {
		opacity: 0;
		transform: scale(0.05);
	}
	15% {
		opacity: 0.4;
	}
	40% {
		opacity: 0.2;
		transform: scale(1);
	}
	85% {
		opacity: 0.12;
		transform: scale(1.08);
	}
	100% {
		opacity: 0;
		transform: scale(1.12);
	}
}
/* =========================================
   [모바일 전용 위치 조절 (768px 미만)]
   ========================================= */
@media (max-width: 767px) {
	.ink-tr-2 {
		top: 160px;
		right: 30px;
	}

	/* 우상단 3번 방울: 더 오른쪽으로(right 감소) */
	.ink-tr-3 {
		top: 80px;
		right: 100px;
	}
}



/* ==========================================================================
   13. 금선 곡선 효과 (Gold Line Overlay)
   ========================================================================== */

/* 금선 테마 변수 정의 (필요 시 색상 일괄 변경 가능) */
:root {
	--gold-line-color-primary: #ecd799; /* 메인 금색 */
	--gold-line-color-secondary: #fff8ec; /* 앤티크 금색 */
}

/* 금선 SVG 위치 지정 */
.gold-lines {
	position: absolute;
	pointer-events: none;
	width: 320px;
	height: 320px;
	z-index: 1; /* 먹물 방울(z-0) 바로 위 배치 */
}

/* 위치 지정 */
.gold-lines-tr {
	top: -20px;
	right: -20px;
}

.gold-lines-bl {
	bottom: -20px;
	left: -20px;
}

/* 금선 기본 스타일 및 색상 적용 */
.gold-line {
	/* CSS 속성으로 선 색상 및 스타일 지정 */
	stroke: var(--gold-line-color-primary);
	stroke-linecap: round;
	
	/* 애니메이션 속성 */
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: drawGoldLine 8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* 선별 굵기, 색상 뉘앙스, 애니메이션 시차 부여 */
.line-1 {
	stroke-width: 1.5px;
	animation-delay: 0.2s;
}

.line-2 {
	stroke-width: 1.2px;
	stroke: var(--gold-line-color-secondary); /* 보조 금색 적용 */
	animation-delay: 0.6s;
}

.line-3 {
	stroke-width: 0.8px;
	animation-delay: 1s;
}

/* =========================================
   [금선 애니메이션 키프레임]
   ========================================= */
@keyframes drawGoldLine {
	0% {
		stroke-dashoffset: 600;
		opacity: 0;
	}
	15% {
		opacity: 0.85;
	}
	50% {
		stroke-dashoffset: 0;
		opacity: 0.7;
	}
	80% {
		stroke-dashoffset: -200;
		opacity: 0.2;
	}
	100% {
		stroke-dashoffset: -600;
		opacity: 0;
	}
}

/*

				<!-- 2. [신규] 우상단 금선 곡선 레이어 -->
				<div class="absolute inset-0 pointer-events-none z-0 overflow-hidden">
					<!-- 먹물 애니메이션 -->
					<div class="ink-drop ink-tr-1 ink-blue"></div>
					<div class="ink-drop ink-tr-2 ink-blue"></div>
					<div class="ink-drop ink-tr-3 ink-blue"></div>

					<div class="ink-drop ink-bl-1 ink-blue"></div>
					<div class="ink-drop ink-bl-2 ink-blue"></div>

					<!-- 우상단 금선 곡선 -->
					<svg class="gold-lines gold-lines-tr" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path class="gold-line line-1" d="M 50,0 Q 200,150 400,100" />
						<path class="gold-line line-2" d="M 100,0 Q 220,180 400,160" />
						<path class="gold-line line-3" d="M 0,50 Q 180,220 350,400" />
					</svg>

					<!-- 좌하단 금선 곡선 -->
					<svg class="gold-lines gold-lines-bl" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path class="gold-line line-1" d="M 0,300 Q 180,200 350,400" />
						<path class="gold-line line-2" d="M 0,220 Q 200,150 400,280" />
					</svg>
				</div>
				<div class="relative z-10 .......써야함>
*/


.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.story-card {
	flex: 0 0 220px;
	scroll-snap-align: center;
	transition: transform 0.35s ease, opacity 0.35s ease;
	transform: scale(0.88);
	opacity: 0.75;
}
.story-card.is-center {
	transform: scale(1.08);
	opacity: 1;
	z-index: 5;
}
@media (min-width: 640px) {
	.story-card { flex: 0 0 260px; }
}


/* 카드 기본 고정 스타일 */
.story-card-item {
	position: absolute;
	width: 300px;
	background-color: #ffffff;
	border-radius: 1rem;
	border: 1px solid #e2e8f0;
	overflow: hidden;
	opacity: 0;
	transform: translateX(0) scale(0.5);
	z-index: 0;
	pointer-events: none;
	transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
	            opacity 0.45s ease,
	            box-shadow 0.45s ease,
	            border-color 0.45s ease;
	user-select: none;
}

@media (min-width: 640px) {
	.story-card-item {
		width: 360px;
	}
}

/* 1. 중앙 선택 카드 (Scale 1.25) */
.story-card-item.active {
	opacity: 1 !important;
	transform: translateX(0) scale(1.25) !important;
	z-index: 30;
	pointer-events: auto;
	cursor: pointer;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 10px 15px -5px rgba(0, 0, 0, 0.04);
	border-color: #64748b !important;
}

/* 2. 안쪽 좌/우 카드 (Scale 0.85) */
.story-card-item.prev1 {
	opacity: 0.75 !important;
	transform: translateX(-280px) scale(0.85) !important;
	z-index: 20;
	pointer-events: auto;
	cursor: pointer;
}

.story-card-item.next1 {
	opacity: 0.75 !important;
	transform: translateX(280px) scale(0.85) !important;
	z-index: 20;
	pointer-events: auto;
	cursor: pointer;
}

@media (min-width: 640px) {
	.story-card-item.prev1 { transform: translateX(-360px) scale(0.85) !important; }
	.story-card-item.next1 { transform: translateX(360px) scale(0.85) !important; }
}

/* 3. 바깥쪽 좌/우 카드 (Scale 0.65) */
.story-card-item.prev2 {
	opacity: 0.35 !important;
	transform: translateX(-500px) scale(0.65) !important;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
}

.story-card-item.next2 {
	opacity: 0.35 !important;
	transform: translateX(500px) scale(0.65) !important;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
}

@media (min-width: 640px) {
	.story-card-item.prev2 { transform: translateX(-660px) scale(0.65) !important; }
	.story-card-item.next2 { transform: translateX(660px) scale(0.65) !important; }
}

/* ==========================================================================
   14. 전승후원 페이지 스크롤 등장 애니메이션 (Sponsor Reveal)
   --------------------------------------------------------------------------
   .sponsor-reveal 요소가 뷰포트에 들어오면 .is-visible 이 붙어 페이드·상승
   ========================================================================== */
.sponsor-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sponsor-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 캠페인 카드 호버 시 부드러운 그림자 */
#campaign-cards-grid article {
	will-change: transform, box-shadow;
}

/* ==========================================================================
   가로 카드 스크롤 — 전승장학 방식 (넓을 때 균등 축소, 더 이상 안 되면 스크롤)
   --------------------------------------------------------------------------
   · 기본: flex + 가운데 정렬 + 최소 너비
   · 컨테이너가 충분하면 카드가 균등 분배되며 살짝 줄어듦
   · 카드 min-width 합보다 좁아지면 overflow → 가로 스크롤
   · h-scroll-md-N / h-scroll-lg-N : 해당 breakpoint부터 N열 그리드
   ========================================================================== */
:root {
	--card-min-w: 16.5rem; /* ~264px — 이보다 카드가 작아지지 않음 */
}

.h-scroll-cards,
.sponsor-cards-scroll {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	/* 스크롤 모드: 첫 카드(왼쪽)부터 — 가운데 포커스 금지 */
	justify-content: flex-start;
	align-items: stretch;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: none;
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0.35rem 0.25rem 0.9rem;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	scrollbar-width: thin;
	scrollbar-color: #22c55e #e2e8f0;
}
.h-scroll-cards::-webkit-scrollbar,
.sponsor-cards-scroll::-webkit-scrollbar {
	height: 6px;
	display: block;
}
.h-scroll-cards::-webkit-scrollbar-track,
.sponsor-cards-scroll::-webkit-scrollbar-track {
	background: #e2e8f0;
	border-radius: 999px;
}
.h-scroll-cards::-webkit-scrollbar-thumb,
.sponsor-cards-scroll::-webkit-scrollbar-thumb {
	background: #22c55e;
	border-radius: 999px;
}
.h-scroll-cards::-webkit-scrollbar-thumb:hover,
.sponsor-cards-scroll::-webkit-scrollbar-thumb:hover {
	background: #16a34a;
}

/* 모바일·좁은 폭: 고정 최소 너비, 스크롤 */
.h-scroll-cards > *,
.sponsor-cards-scroll > .sponsor-card,
.sponsor-cards-scroll > * {
	flex: 0 0 var(--card-min-w);
	width: var(--card-min-w);
	max-width: var(--card-min-w);
	min-width: var(--card-min-w);
	scroll-snap-align: none;
}
.h-scroll-cards.h-scroll-wide > * {
	--card-min-w: 18rem;
	flex-basis: var(--card-min-w);
	width: var(--card-min-w);
	max-width: var(--card-min-w);
	min-width: var(--card-min-w);
}

/* sm: 2열 — 최종 목표가 2열일 때만 (lg-3/lg-4와 같이 쓰면 중간 2행 단계 스킵 → 계속 스크롤) */
@media (min-width: 640px) {
	.h-scroll-cards.h-scroll-sm-2:not(.h-scroll-lg-3):not(.h-scroll-lg-4):not(.h-scroll-md-3):not(.h-scroll-md-4) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
		overflow: visible;
		padding-left: 0;
		padding-right: 0;
		scroll-snap-type: none;
		scrollbar-width: none;
		justify-content: center;
	}
	.h-scroll-cards.h-scroll-sm-2:not(.h-scroll-lg-3):not(.h-scroll-lg-4):not(.h-scroll-md-3):not(.h-scroll-md-4) > * {
		flex: none;
		width: auto;
		max-width: none;
		min-width: 0;
		scroll-snap-align: unset;
	}
}

/* md: 최종 열 수에 도달할 때만 그리드. md-2+lg-3 조합은 md에서 2행으로 접히지 않고 스크롤 유지 */
@media (min-width: 768px) {
	.h-scroll-cards.h-scroll-md-2:not(.h-scroll-lg-3):not(.h-scroll-lg-4),
	.h-scroll-cards.h-scroll-md-3,
	.h-scroll-cards.h-scroll-md-4,
	.sponsor-cards-scroll {
		display: grid;
		gap: 1.5rem;
		overflow: visible;
		padding-left: 0;
		padding-right: 0;
		scroll-snap-type: none;
		scrollbar-width: none;
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}
	.h-scroll-cards.h-scroll-md-2:not(.h-scroll-lg-3):not(.h-scroll-lg-4) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.h-scroll-cards.h-scroll-md-3,
	.sponsor-cards-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.h-scroll-cards.h-scroll-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.h-scroll-cards.h-scroll-md-2:not(.h-scroll-lg-3):not(.h-scroll-lg-4) > *,
	.h-scroll-cards.h-scroll-md-3 > *,
	.h-scroll-cards.h-scroll-md-4 > *,
	.sponsor-cards-scroll > * {
		flex: none;
		width: auto;
		max-width: none;
		min-width: 0;
		scroll-snap-align: unset;
	}
}

/* lg: 3·4열 */
@media (min-width: 1024px) {
	.h-scroll-cards.h-scroll-lg-3 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
		overflow: visible;
		padding: 0;
		scroll-snap-type: none;
		scrollbar-width: none;
	}
	.h-scroll-cards.h-scroll-lg-4 {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
		overflow: visible;
		padding: 0;
		scroll-snap-type: none;
		scrollbar-width: none;
	}
	.h-scroll-cards.h-scroll-lg-3 > *,
	.h-scroll-cards.h-scroll-lg-4 > * {
		flex: none;
		width: auto;
		max-width: none;
		min-width: 0;
	}
}

/* 2행 매트릭스 — 1행 카드와 동일 타이밍 (md 기준)
   좁을 때: 열 너비 고정 → 바로 가로 스크롤 (중간 축소 단계 없음)
   넓을 때: 3열 균등 분배, 컨테이너에 맞춰 살짝 줄어듦 */
.h-scroll-matrix {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 0.25rem 0.25rem 0.85rem;
	scrollbar-width: thin;
	scrollbar-color: #22c55e #e2e8f0;
	justify-content: flex-start;
}
.h-scroll-matrix::-webkit-scrollbar { height: 6px; display: block; }
.h-scroll-matrix::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 999px; }
.h-scroll-matrix::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 999px; }
.h-scroll-matrix-inner {
	display: grid;
	grid-template-rows: auto auto;
	grid-auto-flow: row;
	gap: 0.75rem 1rem;
	/* min-width:100% 제거 → 강제로 찌그러지는 중간 단계 방지 */
	width: max-content;
	min-width: 0;
}
.h-scroll-matrix-inner.cols-3 {
	/* 고정 폭만 — minmax 범위로 줄어들다 스크롤되는 단계 제거 */
	grid-template-columns: repeat(3, var(--card-min-w));
}
.h-scroll-matrix-inner.cols-2 {
	grid-template-columns: repeat(2, var(--card-min-w, 340px));
}
@media (min-width: 768px) {
	.h-scroll-matrix {
		overflow: visible;
		padding: 0;
		scrollbar-width: none;
	}
	.h-scroll-matrix-inner.cols-3 {
		width: 100%;
		min-width: 0;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
	.h-scroll-matrix-inner.cols-2 {
		width: 100%;
		min-width: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

.h-scroll-logo-pair {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 1rem;
	overflow-x: auto;
	padding: 0.25rem 0.25rem 0.85rem;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: #22c55e #e2e8f0;
}
.h-scroll-logo-pair::-webkit-scrollbar { height: 6px; display: block; }
.h-scroll-logo-pair::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 999px; }
.h-scroll-logo-pair::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 999px; }
.h-scroll-logo-pair > * {
	flex: 0 0 min(85vw, 22rem);
	width: min(85vw, 22rem);
	max-width: min(85vw, 22rem);
	scroll-snap-align: start;
}
@media (min-width: 1024px) {
	.h-scroll-logo-pair {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
		overflow: visible;
		padding: 0;
		scroll-snap-type: none;
		scrollbar-width: none;
	}
	.h-scroll-logo-pair > * {
		flex: none;
		width: auto;
		max-width: none;
	}
	.h-scroll-logo-pair.h-scroll-logo-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pantone-chip {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid #e2e8f0;
	background: #fff;
	min-width: 0;
}
.pantone-chip .pantone-swatch {
	aspect-ratio: 1 / 1;
	width: 100%;
	flex-shrink: 0;
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.pantone-chip .pantone-meta {
	padding: 0.85rem;
	background: #fff;
	flex: 1;
}
.h-scroll-cards.pantone-track > .pantone-chip {
	flex: 0 0 min(42vw, 10.5rem);
	width: min(42vw, 10.5rem);
	max-width: min(42vw, 10.5rem);
}
@media (min-width: 640px) {
	.h-scroll-cards.pantone-track.h-scroll-sm-2 > .pantone-chip {
		width: auto;
		max-width: none;
		flex: none;
	}
}

/* 과정 카드 트랙: 좁을 때만 카드 고정폭(스크롤), md+는 그리드가 width 제어 */
.course-cards-track > .course-card {
	flex: 0 0 var(--card-min-w, 18.5rem);
	width: var(--card-min-w, 18.5rem);
	max-width: 20rem;
}
@media (min-width: 768px) {
	.course-cards-track > .course-card {
		flex: none;
		width: auto;
		max-width: none;
	}
}

/* 전수과정 카드: 스크롤 구간(좁은 화면)=세로형 / 데스크탑 그리드=가로형 */
.course-card {
	min-height: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
}
.course-card .course-card-media {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	min-height: 0;
	flex-shrink: 0;
}
.course-card .course-card-body {
	width: 100%;
	flex: 1 1 auto;
}
@media (min-width: 768px) {
	/* h-scroll-md-2 그리드 구간: 가로형 (이미지 왼쪽) */
	.course-card {
		flex-direction: row;
		align-items: stretch;
		min-height: 11.5rem;
	}
	.course-card .course-card-media {
		width: 42%;
		max-width: 42%;
		aspect-ratio: auto;
		min-height: 100%;
		height: auto;
		align-self: stretch;
	}
	.course-card .course-card-media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.course-card .course-card-media {
		position: relative;
	}
	.course-card .course-card-body {
		width: 58%;
		max-width: 58%;
	}
}

.h-scroll-until-lg {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 1rem;
	overflow-x: auto;
	padding: 0.25rem 0.25rem 0.85rem;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: #22c55e #e2e8f0;
}
.h-scroll-until-lg::-webkit-scrollbar { height: 6px; display: block; }
.h-scroll-until-lg::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 999px; }
.h-scroll-until-lg::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 999px; }
.h-scroll-until-lg > * {
	flex: 0 0 min(70vw, 16rem);
	width: min(70vw, 16rem);
	max-width: min(70vw, 16rem);
	scroll-snap-align: start;
}
@media (min-width: 1024px) {
	.h-scroll-until-lg {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
		overflow: visible;
		padding: 0;
		scroll-snap-type: none;
		scrollbar-width: none;
	}
	.h-scroll-until-lg > * {
		flex: none;
		width: auto;
		max-width: none;
	}
	.h-scroll-until-lg.steps-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* ==========================================================================
   카드·로고 가로세로 비율 고정
   ========================================================================== */
/* 이미지형 카드 미디어 영역 */
.h-scroll-cards .aspect-\[4\/3\],
.sponsor-card .aspect-\[4\/3\],
.card-media-4x3 {
	aspect-ratio: 4 / 3;
	width: 100%;
	overflow: hidden;
}
.h-scroll-cards .aspect-\[4\/3\] img,
.sponsor-card .aspect-\[4\/3\] img,
.card-media-4x3 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 유관기관·협력단체 로고 카드 — 2:1 고정 + iOS에서도 비율 유지·잘림 없음 */
.partner-logo-card {
	aspect-ratio: 2 / 1;
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
}
/* 롤링 마키: 너비 고정 → 높이는 2:1 */
#footerMarqueeWrapper .partner-logo-card {
	width: 7rem;
	flex-shrink: 0;
}
@media (min-width: 640px) {
	#footerMarqueeWrapper .partner-logo-card {
		width: 9rem;
	}
}
/* 절대 배치 + contain: 카드 안 여백 두고 원본 비율 유지 (flex % 높이 iOS 버그 회피) */
.partner-logo-card img,
.partner-logo-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto !important;
	height: auto !important;
	max-width: 86% !important;
	max-height: 78% !important;
	object-fit: contain !important;
	object-position: center center !important;
	display: block;
}

.logo-ratio-box {
	aspect-ratio: 1 / 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
}
.logo-ratio-box img {
	max-width: 72%;
	max-height: 72%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
}
/* 가로형 로고 슬롯 */
.logo-ratio-wide {
	aspect-ratio: 16 / 9;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.logo-ratio-wide img {
	max-width: 80%;
	max-height: 70%;
	object-fit: contain;
}

.admin-log-table {
	table-layout: fixed;
	width: max-content;
	min-width: 100%;
	border-collapse: collapse;
}
.admin-log-table th,
.admin-log-table td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
.admin-log-table th { user-select: none; }
.admin-col-resizer {
	position: absolute;
	top: 0; right: 0;
	width: 6px; height: 100%;
	cursor: col-resize;
	background: transparent;
}
.admin-col-resizer:hover { background: rgba(22,43,83,0.25); }
.admin-copy-cell { cursor: pointer; }
.admin-copy-cell:hover { color: #162B53; text-decoration: underline; }
.admin-copy-cell.copied { background: #dcfce7; }

.post-content-input,
#postContent,
#editPostContent {
	text-align: justify;
	text-justify: inter-word;
	word-break: keep-all;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	line-height: 1.7;
	min-height: 120px;
	max-height: 60vh;
	resize: none;
	overflow-y: hidden;
}
.post-body-justify {
	text-align: justify;
	text-justify: inter-word;
	word-break: keep-all;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	line-height: 1.75;
}