/* ==========================================================
   refine.css : 여백 · 레이아웃 · 모바일 정리
   - 모든 CSS 중 가장 마지막에 로드됨 (기존 규칙을 덮어씀)
   - 폭 / 좌우 여백 / 섹션 간격은 아래 변수만 바꾸면 전체에 반영
========================================================== */
:root {
	--wrap: 1200px;                          /* 콘텐츠 최대 폭 */
	--gutter: clamp(20px, 4vw, 40px);        /* 화면 좌우 여백 */
	--section-y: clamp(72px, 9vw, 128px);    /* 섹션 위아래 여백 */
	--head-gap: clamp(36px, 4.5vw, 64px);    /* 섹션 제목 ~ 콘텐츠 간격 */
	--card-gap: clamp(16px, 2.5vw, 32px);    /* 카드 사이 간격 */
}

html, body { overflow-x: clip; } /* hidden 은 position:sticky 헤더를 막음 */
body { word-break: keep-all; }
img { max-width: 100%; height: auto; }


/* ----------------------------------------------------------
   헤더 : 로고/아이콘이 화면 끝에 붙지 않도록
---------------------------------------------------------- */
#mainskin header .header-main .container_wr {
	max-width: calc(1440px + var(--gutter) * 2);
	width: 100%;
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	box-sizing: border-box;
}
#mainskin header .header-main-wrapper { gap: 0 16px; }


/* ----------------------------------------------------------
   메인 섹션 공통
---------------------------------------------------------- */
.main__section { margin: 0 !important; }

.main__section.event,
.main__section.signature,
.main__section.youtube {
	padding-top: var(--section-y) !important;
	padding-bottom: var(--section-y) !important;
}

/* 섹션 제목 크기/간격 통일 */
.main__section > h2.title1 {
	margin: 0;
	padding: 0 var(--gutter);
	font-size: clamp(28px, 3.2vw, 40px) !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
}
.main__section > h2.title1 > span {
	margin-top: 8px;
	font-size: clamp(15px, 1.4vw, 20px) !important;
	line-height: 1.4;
}
.main__section > h2.title1 + p.body2__reading {
	margin-top: 12px;
	padding: 0 var(--gutter);
	color: var(--secondary-heavy);
}

/* 섹션 안쪽 콘텐츠 폭 통일 */
.main__section.event .event__list__group,
.main__section .signature__list__group,
.main__section.youtube .youtube__zoom__group,
.main__section .youtube__list__group {
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	box-sizing: border-box;
}


/* ----------------------------------------------------------
   이벤트
---------------------------------------------------------- */
.main__section.event .event__list__group {
	padding-top: var(--head-gap);
	gap: clamp(28px, 4vw, 48px) var(--card-gap);
}
.main__section .event__list__group > li { flex-basis: calc(50% - var(--card-gap) / 2); }
.main__section .event__list__group .thumbnail--info--box { padding: 12px 4px 0; }
.main__section .event__list__group .thumbnail--info--box .body2__reading { margin-top: 4px; }
.main__section .event__list__more { margin-top: var(--head-gap); }


/* ----------------------------------------------------------
   시그니처
---------------------------------------------------------- */
.main__section .signature__list__group { padding-top: var(--head-gap); }
.main__section .signature__list__group .signature--box { margin-bottom: clamp(56px, 8vw, 120px); }
.main__section .signature__list__group .signature--box:last-child { margin-bottom: 0; }


/* ----------------------------------------------------------
   띠배너
---------------------------------------------------------- */
.main__section.ribbonbanner { height: auto; min-height: 420px; }
.main__section.ribbonbanner .ribbonbanner--info--box {
	position: relative;
	top: auto; left: auto;
	transform: none;
	padding: var(--section-y) var(--gutter);
}
.main__section.ribbonbanner .body1__reading { margin: 24px 0 40px; }


/* ----------------------------------------------------------
   동영상
---------------------------------------------------------- */
.main__section.youtube .youtube__zoom__group { padding-top: var(--head-gap); gap: var(--card-gap); justify-items: stretch; align-items: center; }
.main__section.youtube .youtube__zoom__group { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.main__section .youtube__zoom__group .thumbnail--thumb--info { justify-self: stretch; padding: 0; }
.main__section .youtube__zoom__group .thumbnail--thumb { justify-self: stretch; width: 100%; }
.main__section .youtube__zoom__group .thumbnail--thumb a,
.main__section .youtube__zoom__group .thumbnail--thumb img { width: 100%; height: 100%; object-fit: cover; }
.main__section .youtube__zoom__group .youtube--hashtag--box { position: static; margin-top: 24px; padding-right: 0; }
.main__section .youtube__list__group {
	gap: var(--card-gap);
	margin-top: var(--card-gap);
}
.main__section .youtube__list__group li { flex: 1 1 0; max-height: none; }
.main__section .youtube__list__group li .thumbnail--thumb { display: block; width: 100%; padding: 0; border: 0; }
.main__section .youtube__list__group li img { width: 100%; height: 100%; object-fit: cover; }


/* ----------------------------------------------------------
   둘러보기
---------------------------------------------------------- */
.main__section .interior--info--absolute {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--gutter) var(--gutter) var(--gutter) max(var(--gutter), calc((100vw - 1440px) / 2));
}
.interior--info--absolute .body2__reading { margin-top: 20px; }


/* ----------------------------------------------------------
   푸터
---------------------------------------------------------- */
.footer__top,
.footer__bottom {
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	box-sizing: border-box;
}
.footer__top { padding-top: clamp(48px, 6vw, 72px); }
.footer__bottom { margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; padding-bottom: 48px; }
.footer__bottom { border-top: 0; position: relative; }
.footer__bottom:before {
	content: ''; position: absolute; top: 0;
	left: var(--gutter); right: var(--gutter);
	border-top: 1px solid var(--line-alternative);
}
.footer__bottom .footer__info { margin-top: 32px; align-items: center; }


/* ==========================================================
   900px 이하
========================================================== */
@media screen and (max-width: 900px) {
	.main__section.youtube .youtube__zoom__group { padding-top: var(--head-gap); }
	.main__section .youtube__zoom__group .thumbnail--thumb--info { padding: 0; }
	.main__section .youtube__zoom__group .youtube--hashtag--box { padding-right: 0; margin-top: 20px; }
	.main__section .youtube__list__group { padding-left: var(--gutter); }
}

/* ==========================================================
   모바일 (767px 이하)
========================================================== */
@media screen and (max-width: 767px) {
	#mainskin header .header-main .container_wr { padding-left: 16px; padding-right: 12px; }

	.main__section { margin-bottom: 0 !important; }

	/* 이벤트 : 1열, 카드 간격 축소 */
	.main__section.event .event__list__group { gap: 32px 0; }
	.main__section .event__list__group > li { flex-basis: 100%; }

	/* 시그니처 : 사진 아래 텍스트, 좌우 여백 정렬 */
	.main__section .signature__list__group .thumbnail--info--box { padding: 16px 0 0; }
	.main__section .signature__list__group .signature--box .thumbnail--info--box .display1 { padding: 0; }
	.main__section .signature__list__group .signature--box .thumbnail--info--box .body2__reading { margin-top: 16px; }

	/* 띠배너 */
	.main__section.ribbonbanner { min-height: 0; background-attachment: scroll; }
	.ribbonbanner--info--box .title1 { font-size: 20px; }

	/* 동영상 */
	.main__section .youtube__zoom__group { display: block; }
	.main__section .youtube__zoom__group .thumbnail--thumb { margin-bottom: 20px; }
	.main__section .youtube__zoom__group .thumbnail--thumb--info { display: flex; flex-direction: column; }
	.main__section .youtube__zoom__group .thumbnail--thumb--info .body2__reading { margin-top: 16px; }
	.main__section .youtube__list__group { padding-right: var(--gutter); gap: 12px; }

	/* 둘러보기 : 텍스트를 사진 위가 아닌 위쪽 블록으로 */
	.main__section.interior { display: flex; flex-direction: column-reverse; }
	.main__section .interior--info--absolute {
		position: relative;
		width: 100%;
		max-width: none;
		height: auto;
		padding: 56px var(--gutter);
	}
	.main__section .interior__slider__banner li { height: 280px; }

	/* 푸터 */
	.footer__top { padding-top: 48px; }
	.footer__bottom { padding-bottom: 40px; }
	.footer__bottom .footer__categrory { flex-wrap: wrap; gap: 8px 18px; }
	.footer__bottom .footer__info { margin-top: 24px; }
	.footer__bottom .footer__info .logo { width: 140px; height: 54px; background-position: left center; }
}


/* ----------------------------------------------------------
   메인 상단 이미지 : 투명 헤더 아래까지 화면 전체
---------------------------------------------------------- */
.main__section.visuallybanner .slider-item { height: 100vh; height: 100svh; min-height: 560px; }