@charset "utf-8";
/* CSS Document */

/*---------------메인 비쥬얼 섹션--------------*/
.main-visual{width:100%; height:100vh; position:fixed; z-index: 0;}
.main-visual + .spacer {display: block; width: 100%; height: 100vh;}
.main-visual p,.main-visual h2{color:#fff; line-height: 120%;}
.main-visual .inner-wrap{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:calc(100% - var(--layout-flax-margin)); max-width:var(--layout-width); z-index: 3; padding:var(--gap-140) 0; box-sizing: border-box;}
.main-visual .dark-overlay{position:absolute; top:0px; left:0px; width:100%; height: 100vh; background-color:rgba(0,0,0,0.3); z-index: 2;}
.main-visual .contents-wrap{position:relative; width:100%; height: 100vh; overflow: hidden; z-index: 0;}
.main-visual .contents-wrap img{width:100%; height: 100%; object-fit: cover; object-position: center;}
.main-visual .contents-wrap figure{width:100%; height: inherit;}
.main-visual .contents-wrap figure:nth-child(2){position:absolute; z-index: 1; opacity:1;}
.main-visual .contents-wrap figure.active{z-index: 2; opacity:1;}
.main-visual .contents-wrap figure.active{z-index: 2; opacity:1;}
.main-visual .text-wrap{position:relative;}
.main-visual .text-wrap .tlt{font-size:var(--font-size-xxxxlarge); margin-bottom:var(--gap-10); opacity:1; font-weight: 300;}
.main-visual .text-wrap .stlt{font-size:var(--font-size-xhuge); opacity:1; font-weight: 500;}
.main-visual .text-wrap .text-set{position:absolute; left:0;  }
.main-visual .text-wrap .text-set:nth-child(1) > .tlt{font-size:var(--font-size-xhuge); margin-bottom:var(--gap-10); position:relative; font-weight: 500;}
.main-visual .text-wrap .text-set:nth-child(1) > .stlt{font-size:var(--font-size-xxxxlarge); display:flex; align-items: center; font-weight: 300;}
.main-visual .text-wrap .text-set:nth-child(1) > .stlt > img{margin-right:5px;}
.main-visual .text-wrap .text-set:nth-child(1) > .tlt > img{position:absolute; top:-20px;}
.main-visual .text-wrap .text-set:nth-child(1) > .tlt > .slush01{left:20px;}
.main-visual .text-wrap .text-set:nth-child(1) > .tlt > .slush02{left:80px;}

/* 텍스트 기본 상태 */
.main-visual .text-wrap .tlt,
.main-visual .text-wrap .stlt { opacity:0; transform:translateY(30px); transition:transform 600ms ease, opacity 600ms ease; will-change:transform, opacity; }

/* 들어올 때: 아래(30px) -> 제자리(0) */
.main-visual .text-wrap .text-set.text-anim-in .tlt { opacity:1; transform:translateY(0); transition-delay:0ms; }
.main-visual .text-wrap .text-set.text-anim-in .stlt { opacity:1; transform:translateY(0); transition-delay:500ms; }

/* 나갈 때: 위로 사라지기 (-30px) */
.main-visual .text-wrap .text-set.text-anim-out .tlt,
.main-visual .text-wrap .text-set.text-anim-out .stlt { opacity:0; transform:translateY(-30px); transition-delay:0ms; }


.main-visual .controller-wrap{display:flex; gap:var(--gap-40); justify-content: flex-end; align-items: center;}
.main-visual .controller-wrap .progress-list{display:flex; gap:20px; align-items: center;}
.main-visual .controller-wrap .progress-list p{font-weight: 600; font-size:var(--font-size-normal);}
.main-visual .controller-wrap .progress-list > li{transition:all .3s; display:flex; align-items: center;}
.main-visual .controller-wrap .bar-wrap{width:180px; height: 3px; background-color:rgba(255,255,255,1); display:none;}
.main-visual .controller-wrap .bar{width:10%; height:inherit; background-color:var(--color-point);}
.main-visual .controller-wrap .progress-wrap.active p{display:none;}
.main-visual .controller-wrap .progress-wrap.active .bar-wrap{display:block;}
.main-visual .controller-wrap .button-wrap{display:flex; align-items: center; gap:20px;}
.main-visual .controller-wrap .button-wrap button{padding:10px; box-sizing: border-box;  border-radius: 50%; background-color:rgba(0,0,0,0); transition:background-color .3s;}
.main-visual .controller-wrap .button-wrap button:hover{background-color:rgba(0,0,0,0.5);}

@media only screen and (max-width:425px){
	.main-visual .controller-wrap .bar-wrap{width:100px;}
}

/*--------------------------미술관 소개 ----------------------------*/
/* 레이아웃 기본 */
.intro-gbam { background: var(--color-bright); color: var(--color-dark);}
.intro-gbam .inner-wrap {  max-width: var(--layout-width); width:calc(100% - var(--layout-flax-margin)); margin: 0 auto; padding: var(--gap-140) 0; }

/* 헤더 */
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-20); padding: var(--gap-40) 0 var(--gap-80); }
.section-head .head-left { display: flex; flex-direction: column; gap: var(--gap-5); }
.title-kr { font-size: var(--font-size-xxxlarge); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.title-en { font-size: var(--font-size-xlarge); color: #ECEDF1; text-transform: uppercase; font-weight: 900; }
.head-right { margin-left: auto; }

/* VISION / MISSION */
.vision-mission { max-width: 900px; margin-left: auto; display: grid; grid-template-columns: 1fr; gap: var(--gap-60); }
.label { font-size: var(--font-size-xlarge); font-weight: 800; line-height: 1.3; margin-bottom: var(--gap-15); }
.desc { font-size: var(--font-size-medium); color: var(--color-dark); }

/* 건립개요 */
.overview { max-width: 900px; margin-left: auto; padding-top: var(--gap-60);}
.overview .label { margin-bottom: var(--gap-20); }
.overview .row { display: grid; grid-template-columns: 100px 1fr; align-items: start; gap: var(--gap-20); padding: var(--gap-15) 0; border-top: 1px solid var(--color-border); }
.overview .row:last-of-type { border-bottom: 1px solid var(--color-border); }
.overview .th { font-size: var(--font-size-normal); color: var(--color-dark); line-height: 1.6; }
.overview .td { font-size: var(--font-size-normal); color: var(--color-font); line-height: 1.7; word-break: keep-all; }


/* 반응형 */

@media (max-width: 768px) {
    .vision-mission { gap: var(--gap-20); }
    .overview .row { grid-template-columns: 1fr; gap: var(--gap-5); padding: 14px 0; }
}

@media (max-width: 420px) {
    .btn-more .icon-plus { width: 16px; height: 16px; }
}

/*-------------------------- 아카이브 ----------------------------*/
.archive { background: var(--color-bright); color: var(--color-dark); }
.archive .inner-wrap { max-width: var(--layout-width); width: calc(100% - var(--layout-flax-margin)); margin: 0 auto; padding: var(--gap-140) 0; }

/* 섹션 헤더 (공통 패턴 유지) */
.archive .section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-20); padding: var(--gap-40) 0 var(--gap-80); }
.archive .section-head .head-left { display: flex; flex-direction: column; gap: var(--gap-5); }
.archive .title-kr { font-size: var(--font-size-xxxlarge); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.archive .title-en { font-size: var(--font-size-xlarge); color: #ECEDF1; text-transform: uppercase; font-weight: 900; }

/* 리스트 그리드 */
.archive-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-40); }
.archive-item a { display: block; text-decoration: none; color: var(--color-dark); }
.archive-item .thumb { width: 100%; aspect-ratio: 4 / 5; background: var(--color-light-gray); overflow: hidden; transform-style: preserve-3d; transition: all 1.5s ease-in-out;}
.archive-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archive-item .meta { margin-top: var(--gap-20); }
.archive-item .date { font-size: var(--font-size-small); color: var(--color-font); }
.archive-item .title { margin-top: var(--gap-10); font-size: var(--font-size-medium); font-weight: 600; line-height: 1.6; color: var(--color-dark); word-break: keep-all; }


/* 반응형 */
@media (max-width: 1024px) {
    .archive-list { grid-template-columns: repeat(3, 1fr); gap: var(--gap-30); }
}
@media (max-width: 768px) {
    .archive .inner-wrap { padding: var(--gap-80) 0; }
    .archive .section-head { padding: var(--gap-30) 0 var(--gap-40); }
    .archive-list { grid-template-columns: repeat(2, 1fr); gap: var(--gap-20); }
    .archive .title-kr { font-size: var(--font-size-xxlarge); }
}
@media (max-width: 480px) {
    .archive-list { grid-template-columns: 1fr; gap: var(--gap-20); }
    .archive .title-en { font-size: var(--font-size-normal); }
}



/*-------------------------- 행사 ----------------------------*/
.event { background: var(--color-bright); color: var(--color-dark); }
.event .inner-wrap { max-width: var(--layout-width); width: calc(100% - var(--layout-flax-margin)); margin: 0 auto; padding: var(--gap-140) 0; }

/* 섹션 헤더 (공통 패턴) */
.event .section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-20); padding: var(--gap-40) 0 var(--gap-80); }
.event .section-head .head-left { display: flex; flex-direction: column; gap: var(--gap-5); }
.event .title-kr { font-size: var(--font-size-xxxlarge); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.event .title-en { font-size: var(--font-size-xlarge); color: var(--color-light-gray); text-transform: uppercase; font-weight: 900; }

/* 리스트 그리드 */
.event-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-80); }
.event-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; background: var(--color-bright);}

/* 상태 배지(리본) */
.event-item .status { position: absolute; top: -14px; left: 24px; display: inline-flex; align-items: center; justify-content: center; height: 51px; font-size: var(--font-size-small); font-weight: 700; color: var(--color-bright); width:67px;}
.event-item .status > .inner-status{position:relative; width:100%; height: 100%;}
.event-item .status svg{position:absolute; z-index: 0; top:0; left:0; width:100%;}
.event-item .status p{position:absolute; z-index: 1; text-align: center; top:50%; left:50%; transform: translate(-50%,-50%);}
.event-item .status-planned svg{ fill: #C8AAAA; }
.event-item .status-in_progress svg{ fill: #C8B9AA; }
.event-item .status-completed svg{ fill: #C6C6C6; }

/* 카드 타이포 */
.event-item a { display: flex; flex-direction: column; justify-content: space-between; height: 100%; text-decoration: none; color: inherit; padding: var(--gap-60) var(--gap-40) var(--gap-40); border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-bright); box-shadow: 15px 15px 25px rgba(0,0,0,.2); position: relative; transition: transform .25s; }
.event-item a:hover { transform: translateY(-4px); }
.event-item .content { flex: 1; display: flex; flex-direction: column; }
.event-item .title { margin: 0 0 var(--gap-30); font-size: var(--font-size-xlarge); font-weight: 800; line-height: 1.5; text-align: center; color: var(--color-dark); word-break: keep-all; }
.event-item .desc { margin: 0 0 var(--gap-60); font-size: var(--font-size-medium); line-height: 1.8; color: var(--color-font); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.event-item .info { margin-top: var(--gap-40); }
.event-item .date { margin: 0 0 var(--gap-10); font-size: var(--font-size-medium); font-weight: 700; text-align: center; color: var(--color-dark); }
.event-item .place { margin: 0; font-size: var(--font-size-medium); text-align: center; color: var(--color-dark); }



/* 반응형 */
@media (max-width: 1200px) { 
	.event-list { grid-template-columns: repeat(2, 1fr); gap: var(--gap-60); } 
}

@media (max-width: 768px) { 
	.event-item .status{top:-25px;}
}

@media (max-width: 640px) { 
	.event-item .status{top:-25px; width:50px;}
	.event .inner-wrap { padding: var(--gap-80) 0; } 
	.event .section-head { padding: var(--gap-30) 0 var(--gap-40); } 
	.event .title-kr { font-size: var(--font-size-xxlarge); } 
	.event-list { grid-template-columns: 1fr; gap: var(--gap-40); } 
	.event-item { padding: var(--gap-50) var(--gap-30) var(--gap-30); } 
	.event-item .desc { margin: 0 0 var(--gap-40); font-size: var(--font-size-normal); } 
}
@media (max-width: 420px) { 
	.event .title-en { font-size: var(--font-size-normal); } 
}

/*-------------------------- 공지사항 ----------------------------*/
.notice { background: var(--color-bright); color: var(--color-dark); }
.notice .inner-wrap { max-width: var(--layout-width); width: calc(100% - var(--layout-flax-margin)); margin: 0 auto; padding: var(--gap-140) 0; }

/* 헤더 (공통 구조) */
.notice .section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-20); padding: var(--gap-40) 0 var(--gap-80); }
.notice .section-head .head-left { display: flex; flex-direction: column; gap: var(--gap-5); }
.notice .title-kr { font-size: var(--font-size-xxxlarge); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.notice .title-en { font-size: var(--font-size-xlarge); color: var(--color-light-gray); text-transform: uppercase; font-weight: 900; }

/* 본문 레이아웃 */
.notice-body { display: flex;  gap: var(--gap-60); }
.notice .thumb { flex: 0 0 35%;  max-width: 35%; height: 320px; overflow: hidden; border-radius: 10px; transform-style: preserve-3d; transition: all 1.5s ease-in-out; border:1px solid #d6d6d6; text-align: center; display:flex; justify-content: center;}
.notice .thumb img { height: 100%; width: auto; object-fit: cover; object-position: center; display:inline-block;  }
.notice-list { flex: 1; display: flex; flex-direction: column; gap: var(--gap-20); }

/* 리스트 아이템 */
.notice-item { border-bottom: 1px solid var(--color-border); padding-bottom: var(--gap-10); }
.notice-item:last-child { border-bottom: none; }
.notice-item a { display: flex; flex-direction: column; gap: var(--gap-5); text-decoration: none; color: inherit; transition: color .25s; }
.notice-item .date { font-size: var(--font-size-small); color: var(--color-font); }
.notice-item .title { font-size: var(--font-size-medium); font-weight: 600; line-height: 1.5; color: var(--color-dark); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }


/* 반응형 */
@media (max-width: 768px) { 
	.notice-body { flex-direction: column; gap: var(--gap-40); } 
	.notice .thumb { flex: none; max-width: 100%; width: 100%; height: auto; }
    .notice .thumb img { width: 100%; height: auto; object-fit: cover; }
	.notice-list {width:100%;}
}
@media (max-width: 640px) { 
	.notice .inner-wrap { padding: var(--gap-80) 0; } 
	.notice .section-head { padding: var(--gap-30) 0 var(--gap-40); } 
	.notice .title-kr { font-size: var(--font-size-xxlarge); } 
}
@media (max-width: 420px) { 
	.notice .title-en { font-size: var(--font-size-normal); } 
}