* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

html, body {	width: 100%;	height: 100%;	overflow-x: auto;	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;	background-color: #edf3fe;	color: #1e293b;	min-width:300px;}

body {
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

/* 상단 프로그레스 바 */
#progress-container {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 4px;    background: rgba(0, 0, 0, 0.08);    z-index: 9999;}
#progress-bar {    height: 100%;    background: #2563eb;    width: 0%;    transition: width 0.1s ease-out;}
#runner-icon {
    position: absolute;
    top: 7px;                      /* 바 위로 튀어나오게 위치 조절 */
    left: -12px;
    transform: translateX(-50%);
    width: 23px;
    height: 23px;
    background: url('images/run4.gif') no-repeat center/contain;
    transition: left 0.1s ease-out;
    pointer-events: none;
}

/* Snap 섹션 기본 */
.snap-section {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 24px 20px;
	overflow: hidden;
	background-image: var(--bg-img, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* 메인 커버 섹션 */
#sec-intro {	background-color: #101929;	color: #ffffff;	text-align: center;}

.main-gif-container {	position: relative;	width: 100%;	max-width: 720px;	min-height: 260px;	display: flex;	justify-content: center;	align-items: center;	margin-bottom: 20px;}

.main-gif-img {	width: 100%;	height: auto;	max-height: 60vh;	object-fit: contain;	display: block;	border-radius: 8px;	opacity: 0;	transition: opacity 0.5s ease-in-out;}
.main-gif-img.loaded {	opacity: 1;}

.gif-loader {	position: absolute;	display: flex;	flex-direction: column;	align-items: center;	gap: 12px;	color: #38bdf8;	font-size: 14px;	font-weight: 600;}
.spinner {	width: 40px;	height: 40px;	border: 4px solid rgba(56, 189, 248, 0.2);	border-top: 4px solid #38bdf8;	border-radius: 50%;	animation: spin 0.8s linear infinite;}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.main-sub-title {margin-bottom: 28px;} .main-sub-title img{width: 100%;	height: auto;object-fit: contain;	display: block;max-width:250px;}

.mouse-indicator {	display: flex;	flex-direction: column;	align-items: center;	gap: 8px;	color: #64748b;	font-size: 12px;	font-weight: 600;}
.mouse-icon {	width: 22px;	height: 36px;	border: 2px solid #38bdf8;	border-radius: 12px;	position: relative;}
.mouse-icon::after {	content: '';	position: absolute;	top: 6px;	left: 50%;	transform: translateX(-50%);	width: 3px;	height: 8px;	background-color: #38bdf8;	border-radius: 2px;	animation: mouseScroll 1.5s infinite;}
@keyframes mouseScroll {
	0% { opacity: 1; top: 6px; }
	100% { opacity: 0; top: 18px; }
}

/* 기사 본문 카드 */
.card-container {	width: 100%;	max-width: 1080px;	display: grid;	grid-template-columns: 1fr;	gap: 24px;	align-items: center;}

/* 쇼츠 영상 박스 */
.media-box {	width: 100%;	background: #000000;	border-radius: 8px;	overflow: hidden;}
.media-box.video-shorts {	position: relative;	width: 100%;	max-width: 212px;   height: 370px; 	margin: 0 auto;`}
.media-box.video-shorts iframe {	width: 100%; height: 100%; border: 0;}

/* 이미지 박스 */
.img-box {	width: 100%;	border-radius: 8px;	overflow: hidden;	background: #ffffff;}
.img-box img {	width: 100%;	height: auto;	max-height: 460px;	object-fit: cover;	display: block;}

/* 이미지 슬라이더 래퍼 */
.img-slider-wrapper {    width: 100%;    position: relative;}
/* 좌우 스크롤 슬라이더 컨테이너 */
.img-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* 좌우로 딱딱 들어맞는 스냅 효과 */
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    padding-bottom: 8px;
	cursor: grab; /* PC 마우스 커서 손모양 */
    user-select: none;
}
.img-slider:active {cursor: grabbing; /* 마우스 클릭 유지 시 잡는 손모양 */}
.img-slider::-webkit-scrollbar {    height: 4px;} /* 스크롤바 미관 개선 (숨김 처리) */
.img-slider::-webkit-scrollbar-thumb {    background: #cbd5e1;    border-radius: 4px;}

.slide-item {    flex: 0 0 100%;    scroll-snap-align: start;    border-radius: 8px;    overflow: hidden;    background: #ffffff;}
.slide-item img {    width: 100%;    height: auto;    max-height: 400px;    object-fit: cover;    display: block;    pointer-events: none; /* 드래그 중 이미지 자체 쏠림 방지 */}

/* PC용 좌우 화살표 버튼 */
.slider-btn {position:absolute;top:45%;transform: translateY(-45%);width: 30px;height: 30px;background: rgba(255, 255, 255, 0.30);border:1px solid #cbd5e1;border-radius: 50%;color: #1e293b;    font-size: 14px;    font-weight:bold;cursor: pointer;z-index: 10;display: flex;align-items: center;justify-content:center;transition: all 0.2s;}
/*.slider-btn:hover {    background: #2563eb;    color: #ffffff;    border-color: #2563eb;}*/
.slider-btn.prev { left: 8px; }
.slider-btn.next { right: 8px; }
.slider-hint {text-align: center;font-size: 11px;color: #64748b;margin-top: 6px;}

.text-content-box {	display: flex;	flex-direction: column;	justify-content: center;}

.section-badge-chip {	display:none;/*display: inline-block;*/	align-self: flex-start;	font-size: 11px;	font-weight: 800;	letter-spacing: 1px;	padding: 4px 10px;	border-radius: 4px;	background: #eff6ff;	color: #2563eb;	margin-bottom: 12px;}

.article-title {	font-size: 20px; 	font-weight: 800;	color: #1e293b;	line-height: 1.35;	margin-bottom: 8px; 	word-break: keep-all;letter-spacing:-0.3px;}
.article-desc {	font-size: 14px;    line-height: 1.6; color: #334155;	word-break: keep-all;letter-spacing:-0.5px;}
.article-desc p {	margin-bottom: 6px;}
.mal {font-family:"Nanum Myeongjo","Noto Serif KR", "Batang", "바탕", "AppleMyungjo", "애플명조", Georgia, serif;color:dimgray;}

/* 관련기사 */
.archive-wrapper {	width: 96%;	max-width: 960px;}
.archive-header-title {	font-size: 20px;	font-weight: 800;	color: #0f172a;	margin-bottom: 20px;}
.archive-list {	display: flex;	flex-direction: column;	gap: 16px;}
.archive-item-card {	display: grid;	grid-template-columns: 1fr;	background: #ffffff;	border: 1px solid #cbd5e1;	border-radius: 4px;	text-decoration: none;	overflow: hidden;	transition: border-color 0.2s ease;}
.archive-item-card:hover {	border-color: #2563eb;}
.archive-thumb {	background: #253352;	min-height: 120px;overflow:hidden;max-height:120px;}.archive-thumb img{width:100%;}
.archive-info {	padding: 14px 14px;	display: flex;	flex-direction: column;	justify-content: center;}
.archive-title {	font-size: 19px;	font-weight: 800;	color: #aa1c46;	margin-bottom: 0;	word-break: keep-all;}
.archive-summary {display:none;font-size: 13.5px;	line-height: 1.6;	color: #475569;	word-break: keep-all;}

/* 제작진(Makers) 섹션 - 앞선 본문 섹션과 동일한 밝은 배경 스타일 */
#sec-makers { color: #1e293b;}
.makers-wrapper {    width: 100%;    max-width: 800px;    text-align: center;    padding: 20px;}
.makers-grid {display: grid;gap: 16px;margin-bottom: 36px;}
.maker-card {padding: 18px 20px;    border-radius: 8px;    display: flex;    flex-direction: column;    align-items: center;    gap: 4px;}
.maker-card .role {    font-size: 12px;    color: #64748b;    font-weight: 500;}
.maker-card .name {    font-size: 16px;    font-weight: 700;    color: #1e293b;}
.makers-copyright {    font-size: 12px;    color: #94a3b8;    border-top: 1px solid #e2e8f0;    padding-top: 20px;}

/* PC 반응형 (2열 그리드) */
@media (min-width: 768px) {
	#runner-icon {left:-20px;width: 32px; height: 32px;}
	.main-sub-title img{max-width:320px;}
	.card-container {grid-template-columns: 4fr 6fr;	gap: 30px;}
	.photo-container{grid-template-columns: 1fr 1fr;gap: 30px;}
	.media-box.video-shorts {		max-width: 290px;		height: 510px;     /* PC에서는 시원하게 원래 크기로 */	}
	.archive-wrapper {	width: 100%;}
	.archive-header-title {	font-size: 24px;}
	.article-title {		font-size: 28px;		margin-bottom: 16px;	}
	.article-desc {		font-size: 15px;		line-height: 1.75;	}
	.article-desc p {		margin-bottom: 10px;font-size:20px;	}
	/* 5.jpg 관련기사 카드 PC용 2열 가로 배치 */
	.archive-item-card {		grid-template-columns: 240px 1fr;	}	
	.archive-item-card-text {		grid-template-columns: 1fr;	}	
	.archive-thumb {		min-height: 100%;	max-height:140px;}
	.archive-info {	padding: 20px 24px;	}
	.archive-title {	font-size: 21px;margin-bottom:8px;}
	.archive-summary {	display:block;font-size: 19px;}
}