@charset "UTF-8";

/*기본 색상 & 공통 변수*/
:root {
	--main-color: #6e888e;
	--accent-color: #9d8aae;
	--dark-main-color: #3e6974;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}

/* 기본 폰트 크기 */
@media (max-width: 599px) {
	:root { font-size: 14px; }
}
@media (min-width: 600px) and (max-width: 799px) {
	:root { font-size: 16px; }
}
@media (min-width: 800px) {
	:root { font-size: 18px; }
}

body {
	margin: 0;
	font-family: '맑은 고딕','Apple SD Gothic Neo','sans-serif';
	font-size: 16px;
}

/* -----------------------------------------------------------
   Header
----------------------------------------------------------- */
header {
	position: fixed; 
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	padding: 0;
	
	/* Glass 효과 */
	background: rgba(255, 255, 255, 0.25);  
	backdrop-filter: blur(12px);            
	-webkit-backdrop-filter: blur(12px);    
	border-bottom: 1px solid rgba(255,255,255,0.3); 
}

.nohero header {
	position: static;
	border-bottom: 1px solid var(--gray-color);
}

/* 로고 */
.headA {
	display: flex;
	align-items: center;
	padding: 8px 20px;
	background: none !important; 
}

/* 로고 이미지 사이즈 고정 */
.headA img {
    height: 50px; 
    width: auto;
    display: block;
}


/* Navigation */
.headB ul {
	margin: 0; padding: 0;
	list-style: none;
}
.headB a {
	display: block;
	padding: 15px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}
.headB a:hover {
	background-color: rgba(0,0,0,0.3);
}

/* PC Header Layout */
@media (min-width: 768px){
	header .container{
		display: flex;
		align-items: center;
		max-width: var(--large-width);
		margin: 0 auto;
	}
	.headA {
		flex: 0 0 66%;
	}
	.headB {
		flex: 0 0 34%;
		display: block !important;
	}
	.headB ul {
		display: flex;
		justify-content: flex-end;
	}
	.headB li:not(:last-child){
		margin-right: 20px;
	}
}

/* Mobile Header */
@media (max-width: 767px){
	header .container-small{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.headC {
		margin-right: 10px;
		border: none;
		background: none;
		font-size: 28px;
		opacity: 0.5;
		cursor: pointer;
	}
	.headC:hover { opacity: .3; }
	.headB { display: none; }
}

@media (min-width:768px){
	.headC { display: none; }
}

/* -----------------------------------------------------------
   conA – Hero Section (INDEX)
----------------------------------------------------------- */
.conA {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-image: 
		linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),
		url(img/main_img2.jpg);
	background-size: cover;
	background-position: center;
	text-align: center;
	color: var(--text-bright-color);
}

.conA h1 {
	margin: 0 0 10px;
	font-family: 'Bitcount Single', sans-serif;
	letter-spacing: 0.2em;
	font-size: 15vw;
}
.conA p {
	margin: 0;
	font-size: 18px;
}

@media (min-width:768px){
	.conA h1 { font-size: 115px; }
	.conA p { font-size: 24px; }
}

/* Pagination Dots (사용 안 하면 HTML만 지워도 됨) */
.pagination-dots {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}
.pagination-dots .dot {
	width: 12px; height: 12px;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.5);
	cursor: pointer;
	transition: .3s;
}
.pagination-dots .dot.active {
	background-color: rgba(255,255,255,1);
}

/* -----------------------------------------------------------
   conB – Featured 3 items
----------------------------------------------------------- */
.conB .container {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	max-width: var(--large-width);
	margin: 0 auto;
	padding: 80px 20px;
}
.feature-item {
	flex: 1 1 300px;
	text-align: center;
}
.feature-photo {
	width: 100%;
	aspect-ratio: 1;
	background-size: cover;
	background-position: center;
	margin-bottom: 20px;
}
.feature-item h2 {
	margin: 0 0 10px;
	font-size: 20px;
}
.feature-item p {
	margin: 0;
	font-size: 14px;
	opacity: .8;
}

/* -----------------------------------------------------------
   conC – Mixed 2-column section
----------------------------------------------------------- */
.conC {
	padding: 60px 20px;
	background-color: #f5f5f5;
}
.conC .container {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: var(--large-width);
	margin: 0 auto;
}

.mixed-row {
	display: flex;
	gap: 40px;
	align-items: stretch;
}
.mixed-row.reverse {
	flex-direction: row-reverse;
}

.text-block {
	flex: 1;
	padding: 20px;
	background: none;
}
.text-block h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}
.text-block p {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}

.mixed-photo {
	flex: 1;
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
}

@media (max-width:767px){
	.mixed-row,
	.mixed-row.reverse {
		flex-direction: column;
		gap: 20px;
	}
}

/* -----------------------------------------------------------
   conD – Full Banner
----------------------------------------------------------- */
.conD {
	padding: 0;
}
.full-banner {
	width: 100%;
	height: 400px;
	background-position: center;
	background-size: cover;
}

/* -----------------------------------------------------------
   Social Icons
----------------------------------------------------------- */
.social-section {
	padding: 60px 20px;
	background: #fff;
}
.social-section .container {
	max-width: var(--large-width);
	margin: 0 auto;
}
.social-icons {
	display: flex;
	justify-content: center;
	gap: 20px;
}
.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    background: rgba(110, 136, 142, 0.2); /* BAPE main color 기반 */

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border: 1px solid rgba(255, 255, 255, 0.25);

    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.social-icons a:hover {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.4);
    
    color: #fff;
}


/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */
footer {
	color: var(--text-bright-color);
	background-color: #000;
}
footer .container {
	display: flex;
	gap: 40px;
	max-width: var(--large-width);
	margin: 0 auto;
	padding: 40px 20px;
}
footer .footA,
footer .footB {
	flex: 1;
}
footer p {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
}
footer a {
	color: inherit;
	text-decoration: none;
}
@media (max-width:767px){
	footer .container {
		flex-direction: column;
	}
}

/* -----------------------------------------------------------
   About Page
----------------------------------------------------------- */
.about-page .container {
	max-width: var(--large-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* ABOUT 상단 히어로 – 이미지 없이 텍스트만 */
.about-hero {
    padding: 140px 20px 80px;
    text-align: center;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f5f7fa 60%,
        #ffffff 100%
    );
}

.meta-label {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background-color: rgba(110,136,142,0.15);
	color: var(--main-color);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
	text-transform: uppercase;
}

.about-hero h1 {
    margin: 0 0 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(2.2rem, 4vw, 3rem);
    letter-spacing: -0.03em;
    color: #111;
    text-shadow: none;
}

.about-hero p {
    max-width: 720px;
    margin: 0 auto 10px;
    font-size: 0.98rem;
    line-height: 1.9;
    color: rgba(0, 0, 0, 0.7);
}

/* VALUES / PROCESS 카드 섹션 (Glass 느낌) */
.about-cards {
	max-width: var(--middle-width);
	margin: 60px auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* 개별 카드 */
.about-card {
	position: relative;
	padding: 28px 28px 24px;
	border-radius: 24px;

	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.8),
		rgba(255, 255, 255, 0.6)
	);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);

	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

/* 상단 작은 라벨 (VALUES / PROCESS) */
.about-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	margin-bottom: 14px;

	border-radius: 999px;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	background: rgba(110, 136, 142, 0.08);        
	border: 1px solid rgba(110, 136, 142, 0.3);
	color: #5b6b70;
}

/* 카드 제목/본문 */
.about-card h2 {
	margin: 0 0 10px;
	font-size: 1.3rem;
}

.about-card p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.8;
	opacity: 0.9;
}

@media (max-width: 599px) {
	.about-card {
		padding: 22px 18px 20px;
		border-radius: 18px;
	}
}

.about-hero p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 15px; /* 🔥 폰트 크기 줄이기 */
    color: rgba(29, 29, 29, 0.85);
    margin-top: 12px;
    line-height: 2;
    max-width: 720px; /* 🔥 본문 폭 제한 (더 깔끔함) */
    margin-left: auto;
    margin-right: auto; /* 🔥 가운데 정렬 유지 */
}


/* ABOUT – 인용구(명언) 섹션 */
.about-quote {
  padding: 120px 0;
  background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
}

.quote-box {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.quote-mark {
  display: block;
  font-size: 40px;
  opacity: 0.25;
  line-height: 1;
}

.quote-mark-top {
  margin-bottom: 10px;
}

.quote-mark-bottom {
  margin-top: 18px;
}

.quote-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
  margin-bottom: 8px;
}

.quote-author {
  font-size: 16px;
  font-weight: 300;
  color: #666;
}

/* ABOUT 하이라이트 카드 (전시/커뮤니티) */
.about-highlight {
	background-color: rgba(62,105,116,0.08);
	padding: 70px 0;
}
.about-highlight .container {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.highlight-card {
	flex: 1;
	background-color: #fff;
	padding: 30px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}
.highlight-card h3 {
	margin: 0 0 12px;
	font-size: 1.4rem;
}
.highlight-card p {
	margin: 0;
	line-height: 1.8;
	color: rgba(0,0,0,0.7);
}

@media (min-width:768px){
	.about-highlight .container {
		flex-direction: row;
	}
}

/* -----------------------------------------------------------
   Artwork listA
----------------------------------------------------------- */
.listA h1 {
	font-size: 2rem;
	text-align: center;
}
.listA .container {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--large-width);
	margin: 30px auto;
}
.listA article {
	flex: 1 1 300px;
	display: flex;
}
.listA a {
	flex: 1;
	margin: 10px;
	border: 1px solid var(--gray-color);
	color: inherit;
	text-decoration: none;
}
.listA a:hover { opacity: .8; }
.listA .photo {
	min-height: 200px;
	background-size: cover;
	background-position: center;
}
.listA .text { margin: 10px; }
.listA h2 { font-size: 18px; }
.listA p { font-size: 14px; opacity: .8; }

/* -----------------------------------------------------------
   Artwork listB
----------------------------------------------------------- */
.listB h1 {
	font-size: 2rem;
	text-align: center;
}
.listB .container {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--large-width);
	margin: 30px auto;
}
.listB article {
	flex: 1 1 384px;
	display: flex;
}
.listB a {
	flex: 1;
	margin: 10px;
	display: flex;
	border: 1px solid var(--gray-color);
	color: inherit;
	text-decoration: none;
}
.listB a:hover { opacity: .8; }
.listB .photo {
	flex: 2;
	background-size: cover;
	background-position: center;
}
.listB .text {
	flex: 3;
	margin: 10px;
}
.listB h2 { font-size: 18px; }
.listB p { font-size: 14px; opacity: .8; }

@media (max-width:384px){
	.listB .photo { flex: 1; }
	.listB p { display:none; }
}

/* -----------------------------------------------------------
   Contact Page
----------------------------------------------------------- */
@media (min-width:768px){
	.contact-wrap { display: flex; }
}

.contact {
	flex: 1;
	margin: 20px 20px 20px 0;
	padding: 20px;
	border: 1px solid var(--gray-color);
	text-align: center;
}
.contact:last-child { margin-right: 0; }

.contact span {
	display: inline-block;
	width: 2em; line-height: 2em;
	font-size: 2.2rem;
	border-radius: 50%;
	background-color: var(--main-color);
	color: var(--icon-color);
	margin-bottom: 20px;
}
.contact h2 {
	margin-top: 0;
	font-size: 1.2rem;
}
.contact a {
	font-size: 1.4rem;
	color: inherit;
	text-decoration: none;
}

/* Location / 지도*/
.location h2 {
	margin: 0;
	padding: 20px 0;
	background-color: var(--main-color);
	color: var(--text-bright-color);
	font-size: 1.5rem;
	text-align: center;
}
.location iframe {
	width: 100%;
	height: 400px;
	vertical-align: bottom;
}

/* -----------------------------------------------------------
   Artwork Page (새 레이아웃)
----------------------------------------------------------- */
.artwork-hero {
    padding: 120px 20px 60px;
    text-align: center;
    background: linear-gradient(
        to bottom,
        rgba(228, 176, 188, 0.822),
        rgba(0,0,0,0)
    );
    color: rgba(0, 0, 0, 0.85);
}

.artwork-hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 10px;
}

.artwork-hero p {
    color: rgba(0,0,0,0.65);
    font-size: 18px;
    margin-top: 0;
}

.artwork-page {
    padding: 20px 0 80px;
}

.artwork-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    padding: 20px;
}

.artwork-item {
    width: 100%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    transition: .3s;
}
.artwork-item:hover {
    opacity: 0.8;
}

/* 페이지네이션 */
.artwork-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.artwork-pagination .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
}

.artwork-pagination .dot.active {
    background: #6e888e;
}

.section-divider {
    width: 100%;
    height: 1px;
    margin: 60px 0;
    background: linear-gradient(
        90deg,
        rgba(110,136,142,0) 0%,
        rgba(110,136,142,0.4) 50%,
        rgba(110,136,142,0) 100%
    );
}

.footer-accent {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        #6e888e,
        #9d8aae
    );
}

.bg-shape {
    position: absolute;
    width: 280px;
    height: 280px;
    background: radial-gradient(
        circle,
        rgba(110,136,142,0.15),
        rgba(110,136,142,0)
    );
    filter: blur(40px);
    z-index: -1;
    top: -40px;
    right: -50px;
}

.section-label {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(110,136,142,0.2);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--dark-main-color);
    margin-bottom: 10px;
}

.about-hero-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.about-hero-icon lottie-player {
    width: 80px;
    height: 80px;
}

/* =========================
   ABOUT – 브랜드 스토리 스타일
   ========================= */

/* 스토리 본문 텍스트 (폰트 크기, 줄 간격) */
.about-hero p {
    font-size: 0.9rem;          /* 기본보다 살짝 작게 */
    line-height: 1.9;           /* 줄 간격 넉넉하게 */
    color: rgba(0, 0, 0, 0.72); /* 너무 진하지 않은 회색 톤 */
    max-width: 640px;
    margin: 0 auto 12px;
}

/* 제목 아래 얇은 그라디언트 라인 */
.about-story-divider {
    width: 56px;
    height: 2px;
    margin: 26px auto 22px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--main-color),
        var(--accent-color)
    );
}

/* 둥실둥실 떠다니는 점 아이콘 */
.about-hero-icon {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.about-hero-icon span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(110, 136, 142, 0.40);  /* 메인 톤에서 따온 블루그레이 */
    animation: aboutDot 1.4s infinite ease-in-out;
    transform-origin: center;
}

.about-hero-icon span:nth-child(2) {
    animation-delay: 0.15s;
}
.about-hero-icon span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes aboutDot {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* 푸터 안에 들어간 아이콘 스타일 */
footer .footer-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 40px 0 20px;
}

footer .footer-icons a {
    width: 45px;
    height: 45px;
    background: #ffffff20;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    transition: 0.3s;
}

footer .footer-icons a:hover {
    background: #ffffff35;
    color: white;
}

/* 메인 이미지 아래 로고 섹션 */
.logo-strip {
    padding: 40px 0 30px;
    background: #f7f7f7;   /* 필요 없으면 지워도 됨 */
}

.logo-strip-inner {
    max-width: 260px;
    margin: 0 auto;
}

.logo-strip-inner img {
    width: 100%;
    height: auto;
    display: block;
}

.artwork-grid {
    width: 90%;
    max-width: 1200px;
    margin: 60px auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 35px;
}

.art-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    transition: 0.35s ease;
    cursor: pointer;
    transform: translateY(0);
}

.art-card img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 12px;
}

.art-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

.art-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.artwork-hero {
    padding: 120px 0 80px;
    text-align: center;
    background: linear-gradient(to bottom, #fafafa, #ffffff);
}

.artwork-hero h1 {
    font-size: 48px;
    font-weight: 700;
}

.artwork-hero p {
    margin-top: 10px;
    font-size: 18px;
    color: #555;
}

.artwork-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    margin: 60px auto;
}

.artwork-item {
    width: 100%;
    padding-bottom: 120%;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    transition: 0.35s ease;
    cursor: pointer;
}

.artwork-item:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 18px 28px rgba(0,0,0,0.18);
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: .7s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.artwork-pagination {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 80px;
}

.artwork-pagination .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 6px;
    border-radius: 50%;
    background: #ccc;
}

.artwork-pagination .dot.active {
    background: #111;
}

.artwork-item {
    position: relative;
    overflow: hidden;
}

.artwork-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: 0.4s ease;
}

.artwork-item:hover::before {
    opacity: 1;
}

.artwork-item .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    font-size: 20px;
    color: white;
    opacity: 0;
    transition: 0.4s ease;
    text-align: center;
    letter-spacing: 1px;
}

.artwork-item:hover .overlay-text {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.artwork-item {
    position: relative;
    overflow: hidden;
}

.artwork-item::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.artwork-item:hover::after {
    opacity: 1;
}

/* Grid Layout */
.artwork-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px;
    margin-top: 80px;
}

/* artwork item */
.artwork-item {
    position: relative;
    width: 100%;
    padding-bottom: 110%;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .35s ease;
}

.artwork-item:hover {
    transform: scale(1.03);
}

/* overlay dark */
.artwork-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: .35s ease;
}

.artwork-item:hover::before {
    opacity: 1;
}

/* overlay text */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -35%);
    color: #fff;
    opacity: 0;
    font-size: 18px;
    letter-spacing: 2px;
    transition: .35s ease;
}

.artwork-item:hover .overlay-text {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* Fade-up */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.lightbox.show {
    display: flex;
}
.lightbox img {
    width: 70%;
    max-width: 900px;
    border-radius: 14px;
    animation: zoomIn .35s ease;
}
@keyframes zoomIn {
    from { transform: scale(.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.infinite-slider {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
}

.slider-track {
    display: flex;
    gap: 40px;
    animation: scrollLeft 25s linear infinite;
}

.slider-track img {
    width: 280px;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

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

/* About 페이지 하단 박스 섹션 그라디언트 배경 */
.about-gradient-section {
    background: linear-gradient(
        to top,
        #9c9c9c 0%, 
        rgba(233, 236, 239, 0) 70% /* 위로 갈수록 투명해짐 */
    );
    padding: 80px 0;
    margin-top: 50px;
}

/* ABOUT 하단 배경 그라디언트 */
.about-extra {
    background: linear-gradient(to top, rgba(255, 200, 200, 0.4), rgba(255,255,255,0));
    padding: 100px 0 120px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 컨테이너를 세련되게 중앙 정렬 */
.about-extra .container {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1050px;
}

/* 글래스 박스 */
.extra-box {
    flex: 1;
    padding: 40px 35px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.08);
    animation: fadeUp 1.1s ease forwards;
    opacity: 0;
}

/* fade-up 애니메이션 */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 텍스트 스타일 */
.extra-box h2 {
    font-size: 23px;
    margin-bottom: 15px;
    font-weight: 700;
}

.extra-box p {
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
}

/* ============================
   ABOUT 하이라이트 섹션 리디자인
   ============================ */
.about-highlight {
  padding: 90px 0 120px;
  background: linear-gradient(
    to top,
    #ffeef4 0%,
    #8f8f8f 35%,
    rgba(255,255,255,0) 100%
  );
}

.about-highlight .container {
  max-width: var(--large-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 카드: 글래스모피즘 스타일 */
.highlight-card {
  position: relative;
  flex: 1;
  padding: 28px 32px;
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition: transform 0.3s ease, box-shadow 0.3s ease,
              background 0.3s ease;
}

/* 카드 안에 얇은 하이라이트 레이어 */
.highlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.9),
    rgba(255,255,255,0.1)
  );
  opacity: 0.7;
  pointer-events: none;
}

/* 카드 텍스트 스타일 */
.highlight-card h3 {
  position: relative;
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.highlight-card p {
  position: relative;
  margin: 0;
  line-height: 1.9;
  color: rgba(0,0,0,0.72);
  font-size: 0.95rem;
}

/* 살짝 떠오르는 호버 효과 */
.highlight-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.8);
}

/* 태블릿 이상에서 2컬럼 */
@media (min-width: 768px) {
  .about-highlight .container {
    flex-direction: row;
  }
}

/* ===========================================
   SUPER GLASSMORPHISM CARD FOR ABOUT PAGE
   =========================================== */
.about-highlight {
  padding: 120px 0 160px;
  background: linear-gradient(
    to top,
    rgba(255, 192, 215, 0.4),
    rgba(255,255,255,0)
  );
}

/* 카드 부모 컨테이너 */
.about-highlight .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 진짜 글래스 카드 */
.highlight-card {
  position: relative;
  padding: 40px 36px;
  border-radius: 24px;

  /* 오리지널 유리 배경 */
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  /* 유리 느낌 주는 테두리 */
  border: 3px solid rgba(255, 255, 255, 0.45);

  /* 깊이감 그림자 */
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(255, 255, 255, 0.2) inset;

  overflow: hidden;
}

/* 카드 위에 반사광 */
.highlight-card::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 180%;
  height: 180%;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.7) 0%,
    rgba(255,255,255,0.1) 25%,
    rgba(255,255,255,0) 60%
  );

  opacity: 0.35;
  pointer-events: none;
}

/* 내부 텍스트 */
.highlight-card h3 {
  margin: 0 0 14px;
  font-size: 1.45rem;
  font-weight: 600;
  color: #111;
}

.highlight-card p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(0,0,0,0.75);
  line-height: 1.8;
}

/* Hover 효과 — 진짜 유리처럼 빛 반사 */
.highlight-card:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(255, 255, 255, 0.3) inset;
}

/* PC에서 2개 나란히 */
@media (min-width: 768px) {
  .about-highlight .container {
    flex-direction: row;
  }
}

.about-main-title {
    font-family: "Bitcount Single", sans-serif;
    font-weight: 700; 
    font-size: 64px;
    letter-spacing: 1px;
}

/* ABOUT 메인 제목 폰트 적용 */
.about-main-title {
    font-family: "Bitcount Single", sans-serif !important;
    font-weight: 700 !important;
    font-size: 64px;
    margin-bottom: 30px;
    text-align: center;
}

/* ===========================
   CONTACT PAGE – GLASS STYLE
   =========================== */

/* 인트로 섹션 */
.contact-hero {
    padding: 120px 20px 60px;
    text-align: center;
    background: radial-gradient(circle at top, rgba(110,136,142,0.12), #ffffff 55%);
}

.contact-hero .container {
    max-width: var(--large-width);
    margin: 0 auto;
}

.contact-hero h1 {
    margin: 10px 0 16px;
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    letter-spacing: 0.06em;
}

.contact-hero p {
    margin: 0;
    color: rgba(0,0,0,0.7);
    line-height: 1.8;
}

/* 컨택트 카드 섹션 전체 */
.contact-section {
    padding: 20px 20px 80px;
    background: linear-gradient(to bottom, rgba(245,248,250,0.4), rgba(235,241,244,0.9));
}

.contact-section .container {
    max-width: var(--large-width);
    margin: 0 auto;
}

/* 카드 래퍼 */
.contact-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* 개별 카드 – 글래스 효과 */
.contact {
    flex: 1 1 260px;
    padding: 26px 24px 22px;
    border-radius: 24px;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.85),
        rgba(255,255,255,0.65)
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 18px 45px rgba(0,0,0,0.06);

    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 55px rgba(0,0,0,0.08);
}

/* 아이콘 동그라미 */
.contact span.fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: radial-gradient(circle at 30% 20%, #ffffff, rgba(110,136,142,0.35));
    color: #ffffff;
    margin-bottom: 18px;
    font-size: 1.4rem;
}

/* 카드 안 텍스트 */
.contact h2 {
    margin: 0 0 10px;
    font-size: 1.15rem;
}

.contact p {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(0,0,0,0.7);
}

.contact a {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--dark-main-color);
    text-decoration: none;
}

.contact a:hover {
    text-decoration: underline;
}

/* 지도 섹션 */
.contact-location {
    padding: 40px 20px 80px;
    background: linear-gradient(to top, #000, rgba(0,0,0,0.06));
}

.contact-location h2 {
    margin: 0 0 20px;
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    color: #fff;
}

.contact-location .location-inner {
    max-width: var(--large-width);
    margin: 0 auto;
    border-radius: 26px;
    overflow: hidden;

    background: radial-gradient(circle at top left, rgba(255,255,255,0.12), rgba(0,0,0,0.65));
    padding: 3px;
}

.contact-location iframe {
    width: 100%;
    height: 420px;
    border: none;
    display: block;
    border-radius: 22px;
}

/* 모바일 레이아웃 */
@media (max-width: 767px) {
    .contact-section {
        padding-top: 10px;
    }
    .contact-wrap {
        flex-direction: column;
    }
    .contact {
        padding: 22px 20px 20px;
    }
    .contact-location iframe {
        height: 320px;
    }
}

.about-top-logo {
    width: 160px;
    margin: 60px auto 20px;
    padding: 20px 30px;
    border-radius: 18px;

    /* 글래스모피즘 */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);

    display: flex;
    justify-content: center;
    align-items: center;

    animation: fadeIn 1s ease-out forwards;
    opacity: 0;
}

.about-top-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.15));
}

/* fade-in */
@keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); }
    from { opacity: 0; transform: translateY(10px); }
}

/* CONTACT HERO */
.contact-hero {
    padding: 120px 0 80px;
    text-align: center;
    background: linear-gradient(to bottom, #ffffff 0%, #f5f7fa 70%, #f3f4f6 100%);
}

.contact-hero h1 {
    font-size: 40px;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.contact-hero p {
    color: #666;
    line-height: 1.7;
}

/* CONTACT CARDS */
.contact-section {
    padding: 40px 0 80px;
    background: #f5f7fa;
}

.contact-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

.contact-wrap .contact {
    flex: 1 1 260px;
    max-width: 320px;
    padding: 24px 24px 20px;
    border-radius: 20px;
    text-align: left;
    box-sizing: border-box;
}

.contact-wrap .contact span.fa {
    font-size: 22px;
    margin-bottom: 12px;
    display: inline-block;
    color: #111;
}

.contact-wrap .contact h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.contact-wrap .contact p {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.contact-wrap .contact a {
    font-weight: 600;
    font-size: 14px;
}

/* 글래스 카드 공통 */
.glass-card {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* LOCATION SECTION */
.location-section {
    padding: 80px 0 120px;
    background: linear-gradient(to bottom, #f5f7fa 0%, #e9ecef 40%, #dde2e7 100%);
    display: flex;
    justify-content: center;
}

.container-small {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

/* LOCATION 라벨 */
.location-label {
    display: inline-block;
    padding: 10px 26px;
    margin-bottom: 28px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    letter-spacing: 0.15em;
}

/* MAP 박스 + 글래스 */
.location-box {
    width: 100%;
    border-radius: 26px;
    overflow: hidden;
    padding: 12px;
    box-sizing: border-box;
}

.glass {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* MAP IFRAME */
.location-box iframe {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 20px;
}

/* 반응형 */
@media (max-width: 768px) {
    .contact-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-wrap .contact {
        max-width: 100%;
    }

    .location-box iframe {
        height: 320px;
    }
}

.about-hero-icon {
    margin-top: 30px;   /* 위 간격 줄임 */
    margin-bottom: 10px; /* 아래 간격 줄임 */
}

.about-hero-icon img {
    width: 90px;  /* 필요하면 로고 크기도 조절 */
    height: auto;
}

.about-hero-section {
    padding-top: 40px;    /* 원래 100px 이상일 가능성 높음 → 줄이자 */
}

.about-hero-icon {
    margin-top: 30px;     /* 헤더와 로고 사이 */
    margin-bottom: 10px;  /* 로고와 섹션 제목 사이 */
    text-align: center;
}

.about-hero-icon img {
    width: 90px;
    height: auto;
}

/* 로고 간격 통일 — ABOUT / ARTWORK / CONTACT 공통 적용 */
.page-logo-wrapper {
    text-align: center;
    margin-top: 60px;     /* 로고 위 여백 줄임 */
    margin-bottom: 40px;  /* 로고 아래 여백 줄임 */
}

.page-logo-wrapper img {
    width: 95px;
    opacity: 0.9;
}


/* 페이지 타이틀(group) 전체 묶음 spacing 정리 */
.page-hero-group {
    margin-top: -10px;    /* 로고 아래와 간격 좁힘 */
    margin-bottom: 60px;
	/* ------------------------------------------------
   공통 상단 로고 (ABOUT / ARTWORK / CONTACT)
-------------------------------------------------- */
.page-top-logo {
  text-align: center;
  margin: 32px 0 12px;   /* 위 간격 / 아래 간격 */
}

.page-top-logo img {
  max-width: 200px;      /* 로고 최대 가로길이 */
  width: 35%;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.12)); /* 살짝 그림자 */
}

}

.page-top-logo {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 10px;
}

.page-top-logo img {
    width: 90px;
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* 공통 상단 로고 */
.page-top-logo {
    display: flex;
    justify-content: center;
    margin-top: 40px;      /* 헤더 아래 여백 */
    margin-bottom: 24px;   /* 로고와 섹션 사이 여백 */
}

.page-top-logo img {
    width: 80px;
    height: auto;
    display: block;
}

/* 로고가 들어가는 각 페이지의 히어로 위쪽 여백 조금 줄이기 */
.about-hero,
.artwork-hero,
.contact-hero {
    padding-top: 0;
}

/* 이미 있는 스타일이 있다면, 이 코드가 더 아래에 있어야 우선 적용됨 */


.page-top-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0 20px;
    position: relative;
    z-index: 10;
}

.page-top-logo img {
    height: 65px;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.25s ease;
}

.page-top-logo img:hover {
    opacity: 1;
}

.quote-footer {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.quote-profile {
  width: 120px;      /* 사진 크기 조절하고 싶으면 여기 바꾸면 됨 */
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.08); /* 살짝 테두리 */
}

.quote-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.highlight-card--exhibit::before {
  background-image: url("img/card-exhibit.jpg");
}

.highlight-card--community::before {
  background-image: url("img/card-community.jpg");
}

/* =========================
   ARTWORK PAGE GRADIENT FIX
   ========================= */

/* ARTWORK 전체 배경 톤 */
.artwork-page {
    padding: 0 0 80px;          /* 위 여백은 hero에서 처리하니까 0으로 */
    background: #f5f7fa;        /* CONTACT 카드 영역이랑 같은 톤 */
}

/* 헤더 밑 타이틀 영역 그라디언트 */
.artwork-hero {
    padding: 120px 0 60px;
    text-align: center;
    background: linear-gradient(
        to bottom,
        #ffffff 0%,             /* 헤더 바로 밑은 흰색에서 시작 */
        #f5f7fa 70%             /* 아래로 갈수록 CONTACT랑 같은 회색으로 이어짐 */
    );
}

/* ARTWORK 상단 흰색 띠 제거용 오버라이드 */
.artwork-page {
  background: #f5f7fa;  /* 카드들 뒤 배경 톤 */
  padding: 0 0 80px;
}

/* 그리드 섹션 위 여백을 margin → padding 으로 옮기기 */
.artwork-grid {
  margin-top: 0;        /* 기존 margin-top 제거 */
  padding-top: 60px;    /* 간격은 padding으로 확보 */
  background: #f5f7fa;  /* 위쪽 여백까지 같은 색으로 */
}

/* ARTWORK 상단 로고 ↔ 타이틀 간격 줄이기 */

/* 아트워크 페이지에서만 로고 아래 여백 줄이기 */
.artwork-page .page-top-logo {
  padding: 20px 0 4px;   /* 위 20, 아래 4 정도만 */
}

/* 아트워크 히어로 타이틀 위 여백 줄이기 */
.artwork-hero {
  padding-top: 32px;     /* 기존보다 훨씬 작게 */
}

/* pptx: 비디오*/
.pptx {
    background-color: #66CBE5;
    background-color: var(--main-color);
    color: #fff;
    color: var(--text-bright-color);
}

.pptx video {
    width: 100%;
    position: center;
}

/*PC-pptx: 개요(image + text) [width=768px]를 기준으로*/
@media (min-width: 768px) {
    .pptx .container {
        display: block;
        width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }
}