@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
.gallery { box-sizing: border-box; }


/* 베이스 */
html, body { margin:0; padding:0; background:#000; color:#e9eef5; font-family:system-ui, -apple-system, Segoe UI, Roboto, Pretendard, Apple SD Gothic Neo, sans-serif; }
.wrap { max-width:800px; margin:0 auto; background:#000; }

/* 공통 유틸 */
.section { width:100%; position:relative; }
.hidden-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }


video { width:100%; display:block}
/* =============== 1) 히어로 + 컨택트 =============== */
/* 히어로 이미지를 비율박스로 설정 (원본 비율 유지) */
.hero {
	position:relative;
	width:100%;
	/* 스크린샷 세로로 긴 비율을 감안해 임의로 240% 높이. 필요 시 조정 */
	padding-top:240%;
	overflow:hidden;
}
.hero > img {
	position:absolute; inset:0;
	width:100%; height:100%; object-fit:cover; object-position:center top;
}
/* 클릭 핫스팟 공통 (절대 좌표는 %로) */
.hotspot {
	position:absolute;
	display:block;
}
.hotspot:active { transform:scale(.98); }
/* 접근성(포커스) */
.hotspot:focus-visible { outline:2px solid #4aa3ff; outline-offset:2px; }

/* 아이콘 대체: 안쪽에 텍스트 라벨(선택) */
.hotspot .label {
	position:absolute; inset:auto 0 0 0;
	margin:auto; text-align:center;
	font-size:14px; color:#fff; padding:2% 0;
	opacity:.9;
}

/* === 위치 지정 (스크린샷 기준 대략 배치, 필요 시 %만 조정하세요) === */
/* 컨택트 4개 버튼 영역: 이미지 중간 검은 바 영역을 가정 */
/* 버튼 지름(가로/세로) */
:root { --btn:14%; } /* 버튼 크기(지름) % */

/* 공통 y축(상단에서 몇 %) */
/* 스크린샷에서 검은 바가 히어로 상단 대비 약 52%~60% 구간에 위치 */
/* 중앙정렬 느낌으로 동일 y 사용 */
.phone   { top: 80.7%; left: 5.2%; width: 15.8%; height: 9%; }
.kakao   { top: 80.7%; left: 30%; width: 15.8%; height: 9%; }
.mail    { top: 80.7%; left: 54.7%; width: 15.8%; height: 9%; }
.inquiry { top: 80.7%; left: 79.4%; width: 15.8%; height: 9%; }

/* 클릭 범위를 보이게 하고 싶으면 아래 활성화
.hotspot { box-shadow:0 0 0 1px rgba(255,255,255,.2) inset; }
*/

/* =============== 2) 유튜브(반응형) =============== */
.video-section { width:100%;}
.video-title { font-size:22px; font-weight:800; letter-spacing:.02em; margin:6% 0 4%; color:#ffffff; }
.video-wrap {
	position:relative; width:100%; 
	/* 16:9 비율 */
	padding-top:56.25%;
}
.video-wrap iframe {
	position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* =============== 3) 갤러리(어코디언) =============== */
/* ===== Gallery ===== */
.gallery { width:100%; padding:16% 3% 0% 3%; background:#fff; text-align:center; }
.gal-title {
	font-family: 'Paperozi';
	font-size:44px;
	font-weight:900;
	color:#2a2a2a;
	letter-spacing:.02em;
	margin:0;
}
.gal-underline {
    width: 12%;
    height: 4px;
    background: #125dcf;
    margin: 7% auto 0%;
}


/* 연도는 정확히 중앙, +는 오른쪽 고정 */
.ac-head{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;   /* 연도 글자 중앙 정렬 */
	padding:9% 0 4%;
	border-bottom: 1px solid #125dcf;
	cursor:pointer;
}

.ac-year{
	font-family: 'Paperozi';
	font-style: italic;
	font-size:100px;
	font-weight:900;
	color:#000;
	/* 필요시 줄바꿈 방지: white-space:nowrap; */
}

/* + 아이콘: 우측 절대배치 → 가운데에 영향 X */
.ac-plus{
	position:absolute;
	right:7%;
	top:50%;
	transform:translateY(-50%);
	width:28px; height:28px;
	border:1px solid #777; border-radius:50%;
}

/* + 기호 */
.ac-plus::before, .ac-plus::after{
	content:""; position:absolute; background:#000;
}
.ac-plus::before{
	width:50%; height:2px; top:50%; left:25%;
	transform:translateY(-50%); /* 가로선 */
}
.ac-plus::after{
	width:2px; height:50%; top:25%; left:50%;
	transform:translateX(-50%); /* 세로선 */
}

/* 열림/닫힘 */
.ac-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.ac-item.open .ac-body{ max-height:2000px; }

/* open 상태: + → – , 열린 항목만 연도 파란색 */
.ac-item.open .ac-plus::after{ opacity:0; }
.ac-item.open .ac-year{ color:#125dcf; }

/* (선택) 더 이상 필요없으면 제거해도 됨 */
.ac-year.active { color:#125dcf; }



/* 썸네일 그리드 */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4%;
    margin: 5% 0 10%;
}
.cell {
	background:#125dcf;
	aspect-ratio:1/0.75;
}

.grid .cell{
	position: relative;
	overflow: hidden;       /* 박스 밖으로 나간 부분 숨기기 */
	aspect-ratio: 1 / 0.75; /* 이미 사용 중인 비율 유지 */
}

.grid .cell > img{
	position:absolute; inset:0;
	width:100%;
	height:100%;
	object-fit: cover;       /* 세로 길면 width 100%, 가로 넓으면 height 100% 효과 */
	object-position: center; /* 중앙 기준으로 크롭 */
	display:block;
}

/* More View 버튼 */
.more {
    display: inline-block;
    padding: 11px 11%;
    border: 2px solid #125dcf;
    border-radius: 999px;
    font-size: 40px;
    color: #125dcf;
    text-decoration: none;
}
.more:active { background:#125dcf; color:#fff; }


/* SWIPE UP 아이콘(하단) */
.swipeup {
	background:#FFF; width:100%; display:flex; flex-direction:column; align-items:center;
	padding:8% 0 0%;
}


/* 작은 기기에서 헤더 타이포 여백 조금 */
@media (max-width:640px){
	.ac-head { padding:10% 0 4%; }
	.ac-year { font-size:12vw; }
	.ac-plus { width:36px; height:36px; top:58% }
	.gal-title { font-size:4.8vw; }
	.more { font-size:5vw; }
}





/* ===== Modal Gallery ===== */
.gallery-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.gallery-modal.show{ display:block; }
.gallery-modal[aria-hidden="true"]{ display:none; }

.gm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); }

.gm-dialog{
	position:relative; z-index:1;
	width:min(1024px, 96vw); height:min(86vh, 860px);
	margin:4vh auto; background:#0b0b0b; color:#fff; border-radius:14px;
	display:flex; flex-direction:column; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.35);
}

.gm-header{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.12);
}
.gm-title{ font-weight:700; font-size:16px; }
.gm-close{ cursor:pointer; user-select:none; font-size:18px; opacity:.9; }
.gm-close:active{ transform:scale(.96); }

.gm-main{
	position:relative; flex:1; display:flex; align-items:center; justify-content:center;
	background:#000;
}
.gm-main img{ max-width:100%; max-height:100%; display:block; }

.gm-nav{
	position:absolute; top:50%; transform:translateY(-50%);
	width:46px; height:46px; border-radius:50%;
	background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;
	font-size:28px; cursor:pointer; user-select:none;
	border:1px solid rgba(255,255,255,.15);
}
.gm-prev{ left:14px; }
.gm-next{ right:14px; }
.gm-nav:active{ transform:translateY(-50%) scale(.96); }

.gm-thumbs{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
	gap:10px; padding:12px; background:#0b0b0b; border-top:1px solid rgba(255,255,255,.12);
}
.gm-thumbs .th{
	position:relative; background:#111; aspect-ratio:1/1; overflow:hidden; border-radius:8px; cursor:pointer;
	border:1px solid transparent;
}
.gm-thumbs .th img{ width:100%; height:100%; object-fit:cover; display:block; }
.gm-thumbs .th.active{ border-color:#125dcf; box-shadow:0 0 0 2px rgba(18,93,207,.4); }

/* 모바일 높이 보정 */
@media (max-width:640px){
	.gm-dialog{ margin:2vh auto; height:92vh; }
}


/* === Gallery Modal: 디자인 오버라이드 (참고 이미지 스타일) === */
.gm-dialog{
	background:#125dcf; /* 파란 바탕 */
	color:#fff;
}
.gm-header{
	border-bottom:none;
	background:#000; /* 상단 검은 띠 느낌 */
	color:#fff;
}
.gm-title{ font-weight:700; font-size:16px; letter-spacing:.02em; }
.gm-close{ font-size:24px; }

.gm-main{
	background:#000;
	overflow:auto; /* 긴 이미지 세로 스크롤 허용 */
}
.gm-main img{ max-width:100%; height:auto; display:block; }

.gm-nav{
	background:transparent;
	border:none;
	color:#fff;
	font-size:28px;
	width:48px; height:48px;
}
.gm-nav:active{ transform:translateY(-50%) scale(.96); }

.gm-thumbs{
	background:#000; /* 하단 검은 바 */
	border-top:none;
	padding:16px;
}
.gm-thumbs .th{
	background:#125dcf;
	border:2px solid #000;
}
.gm-thumbs .th.active{
	border-color:#fff;
	box-shadow:none;
}

.imagemap {
	position:relative;
	width:100%;
}
	
.scroll_up{
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 47%;
    cursor: pointer;
}

@media (max-width:640px){
	.gm-thumbs{
		display:grid;
		grid-template-columns: repeat(4, 1fr); /* 한 번에 4개만 보이게 */
		gap:10px;
	}
}