@charset "UTF-8";

/* 기본 색상 */
:root {
	--main-color: #582640;
	--accent-color: #9d8aae;
	--dark-main-color: #424242;
	--text-bright-color: #fff;
	--icon-color: #ffffff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1500px;
	--middle-width: 1000px;
	background-color: #28282a;
}


/* 기본 설정: 폰트 크기 */
@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 {font-size: 16px;
}



/* 기본 설정: 페이지 전체 */
body {
	margin: 0;
	font-family: '맑은 고딕',
		'Apple SD Gothic Neo','sans-serif';
}

/* header 헤더 */
header {
    z-index: 100;
    
    /* 속성을 fixed로 한 번만 명확하게 정의 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    /* 배경색을 한 번만 명확하게 정의 */
    background-color: rgba(40, 40, 42, 0.9); 
}

.nohero header {
	position: static;
    background-color: #28282a;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px var(--gray-color);
}
/* headA: 사이트 이름 */
/* headA: 사이트 이름 (기존 코드 수정) */
.headA {
    /* 🌟 추가: Flexbox를 사용하여 이미지와 텍스트를 나란히 배치 및 중앙 정렬 🌟 */
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 15px; /* 이미지와 텍스트 사이 간격 */
    
    line-height: 70px; /* 기존 line-height는 이미지 중앙 정렬에 사용하기 어려워져 flex로 대체 */
    padding-left: 20px;
    padding-right: 20px;
    
    color: #28282a; 
    color: var(--text-bright-color);
    font-family: 'Montserrat',sans-serif;
    font-size: 24px;
    font-weight: bolder;
    text-decoration: none;
    
    /* 텍스트가 line-height: 70px에 의해 늘어지는 것을 방지하기 위해 */
    line-height: normal; 
    height: 70px; /* header 높이만큼 고정하여 flex 중앙 정렬이 되도록 함 */
}

/* 🌟 로고 아이콘 (logo-icon)에 대한 새로운 CSS 추가 🌟 */
.headA .logo-icon {
    height: 30px; /* 로고 이미지의 높이 설정 (폰트 크기 24px와 균형을 맞춤) */
    width: auto;
    /* vertical-align: middle; (flex를 사용하므로 필요 없음) */
}
/* headB: 네비게이션 메뉴 */
.headB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.headB a {
	display: block;
	padding: 15px;
	color: #fff;
	font-size: 12px;
	text-decoration: none;
}
.headB a:hover {
	background-color: rgba(0,0,0,0.3);
    color: #dcf241;
}
@media (min-width: 768px) {
		header .container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			max-width: 1000px;
			max-width: var(--large-width);
			margin-left: auto;
			margin-right: auto;
		}
		.headB ul {
			display: flex;
		}
}
/* HeaderC: 토글 버튼 */
@media (max-width: 767px){
	/* 작은 화면 전용 설정 */
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.headC{ 

		margin-right: 10px;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 28px;
		opacity: 0.5;
		cursor: pointer;
	}
	.headC:hover{
		opacity: 0.3;
	}
	.headB {
		display: none;
	}
}
	@media (min-width: 768px) {
		.headC {
			display: none;
		}
		.headB {
			display: block !important;
		}
}

/* 콘텐츠A: main-banner-image 히어로 이미지 Mobile*/
.conA {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		min-height: 450px;
        background: rgba(0, 0, 0, 0.5);
		background-image: url(img/inmain.png);
        
		background-position: center;
		background-size: cover;
		color: var(--text-bright-color);
		text-align: center;
}
/* 제품 목록부분의 sub배너 이미지작성 */
.conA.compact {
	height: 450px;
	min-height: 0;
	background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)), url(img/coffee.jpg);
}

.conA h1 {
		margin-top: 0;
		margin-bottom: 10px;
		font-family: 'Montserrat', sans-serif;
		letter-spacing: 0.2em;
		margin-left: 0.2em;
		font-size: 15vw;
}

.conA p {
		margin-top: 0;
		margin-bottom: 0px;
		font-size: 18px;
}
/* 콘텐츠A: main-banner-image 히어로 이미지 Mobile*/

/* SECTION WRAPPER */
.conE h2{
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #dcf241;
}

.conE .ticket-wrap {
    display: flex;
    gap: 25px;
    justify-content: center;
    padding-bottom: 190px;
	padding-top: 160px;
}

/* TICKET CARD */
.ticket-card {
    width: 260px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    padding-bottom: 25px;
}

/* COLOR THEMES */
.ticket-card.beige { background: #e1e7b5; }
.ticket-card.white { background: #e1e7b5; }
.ticket-card.red { background: #e1e7b5;}

/* TOP IMAGE */
.ticket-img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

/* DATE */
.ticket-date {
    display: flex;
    justify-content: space-between;
    margin: 15px 20px;
    font-size: 14px;
}

/* TITLE */
.ticket-info h4 {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin: 5px 0 15px;
    line-height: 1.3;
}

.ticket-info h4 strong {
    font-size: 22px;
    font-weight: 700;
}

/* EXTRA INFO */
.ticket-extra {
    padding: 0 20px;
    font-size: 12px;
    line-height: 1.4;
}

.ticket-extra span {
    font-weight: 700;
}

/* BARCODE */
.barcode {
    width: 80%;
    height: 35px;
    background: repeating-linear-gradient(
        90deg,
        #000 0px,
        #000 2px,
        transparent 2px,
        transparent 5px
    );
    margin: 15px auto 0;
}

/* DOT HOLES */
.dot {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
}

.dot.top-left {
    top: 15px;
    left: 15px;
}




/* 🧩 conB 섹션 (세 카드 섹션) */

.conB {
    /* 카드들을 가로로 배치 (Flexbox) */
    display: flex;
    /* 카드 사이의 간격 */
    gap: 40px;
    /* 카드들을 중앙에 정렬 */
    justify-content: center;
    /* 상하 패딩 */
    padding: 100px 0;
}
.conB h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 30px;
    border-top: 1px solid #6e6e6e; /* 어두운 배경에 맞게 색상 변경 */
    padding-bottom: 10px;
    padding-top: 40px;
    padding-left: 0;
    color: #dcf241; /* 강조색 */
}
/* 개별 카드 스타일 (.container) */
.conB .container {
    /* 카드의 고정 너비 */
    width: 260px;
    /* 둥근 모서리 */
    border-radius: 35px;
    /* 내부 여백 */
    padding: 30px 25px;
    /* 패딩이 너비에 포함되도록 설정 */
    box-sizing: border-box;
    /* 폰트 지정 */
    font-family: 'Pretendard', sans-serif;
    /* 고정 높이 설정 */
    height: 300px; 
    
    /* 텍스트가 어두운 배경 위에서 잘 보이도록 흰색으로 설정 */
    color: #fff;
    
    /* 배경 이미지 로딩 실패 시 보일 예비색 */
    background-color: #e5e5e5;
    
    /* 가상 요소의 기준점 설정 */
    position: relative;
    z-index: 1; /* 콘텐츠를 가상 요소 위에 배치 */
}

/* ------------------------------------ */
/* 🖼️ 개별 카드 배경 이미지 설정 */
/* ------------------------------------ */
.conB .container.card-01 {
    background-image: url(img/show1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    
}

.conB .container.card-02 {
    background-image: url(img/show2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.conB .container.card-03 {
    background-image: url(img/show3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ------------------------------------ */
/* 💡 배경 투명도 오버레이 (가상 요소) */
/* ------------------------------------ */
.conB .container::before {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit; /* 부모의 둥근 모서리 상속 */
    z-index: 0; /* 배경 이미지와 콘텐츠 사이에 배치 */

    /* 투명도 설정: 검정색 30% 불투명도 (숫자를 변경하여 투명도 조절 가능) */
    background: rgba(0, 0, 0, 0.5); 
}

/* ------------------------------------ */
/* ✍️ 카드 내부 콘텐츠 스타일 */
/* ------------------------------------ */

/* 상단 번호 + 태그 (.text) */
.conB .container .text {
    /* 번호와 태그를 좌우로 배치 */
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 20px;
    position: relative;
    z-index: 2; /* 오버레이보다 위에 배치 */
}

/* 태그 스타일 (.conX-tag) */
.conX-tag {
    /* 배경색 */
    background: #fff;
    /* 내부 여백 */
    padding: 3px 8px;
    /* 둥근 모서리 (알약 모양) */
    border-radius: 20px;
    /* 폰트 크기 */
    font-size: 11px;
    /* 폰트 두께 */
    font-weight: 600;
    color: #000; /* 흰색 태그 배경 위에서 글자가 잘 보이도록 */
}

/* 제목 (h3) */
.conB .container h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}

/* 서브 텍스트 (p) */
.conB .container p {
    margin-top: 15px;
    font-size: 14px;
    opacity: 0.7;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}

/* ==================================== */
/* 💡 conC 섹션 (인용구 섹션) */
/* ==================================== */
/* (conC 관련 스타일은 제공되지 않아 추가하지 않았습니다.) */

/* conC */
.conC {
	
    padding: 180px 20px;
    /* 텍스트 정렬 */
    text-align: center;
    /* 폰트 크기 */
    font-size: 20px;
    /* 폰트 두께 */
    font-weight: 600;
    /* 줄 간격 */
    line-height: 1.6;
	color: #fff;

    /* 👇 아래 부분을 추가/수정합니다 👇 */

    /* 배경 이미지를 검은색과 섞어서 어둡게 만듭니다. */
    background-color: rgba(0, 0, 0, 0.4); /* 혼합할 검은색 레이어의 투명도 */
    background-image: url(img/wall.jpg);
    
    /* 이미지와 배경색을 곱셈(multiply) 모드로 혼합 */
    background-blend-mode: multiply;

    /* 3. 배경 이미지 크기 조정: 섹션을 완전히 채우도록 설정 */
    background-size: cover; 

    /* 4. 배경 이미지 반복 방지 */
    background-repeat: no-repeat; 

    /* 5. 배경 이미지 위치 중앙 정렬 */
    background-position: center center;

    /* (선택 사항) 배경 이미지를 스크롤해도 고정시키려면: */
    /* background-attachment: fixed; */
}

/* conC 섹션의 텍스트에 적용 */
.conC p { 
    /* 폰트 지정 (imaginaryfriend-bb가 없으면 sans-serif 사용) */
    font-family: "imaginaryfriend-bb", sans-serif;
    /* 굵기 지정 */
    font-weight: 700; 
    /* 기울임 지정 */
    font-style: normal;
}
.conF {
    /* 1. 이미지 경로 설정 */
    background-image: url('img/art.png'); 
    
    /* 2. 섹션 높이 지정 (내용이 없으므로 반드시 필요) */
    height: 700px; /* 원하는 높이로 설정 */
    
    /* 🌟 이 부분을 추가하세요! (상단 마진 제거) 🌟 */
    margin-top:-100px; 
    
    /* 3. 이미지 표시 방식 설정 (가장 일반적인 설정) */
    background-size: contain;    
    background-position: center; 
    background-repeat: no-repeat;
}
/* 콘텐츠I: main-banner-image 히어로 이미지 Mobile*/
.conI {
    width: 100%;
    height: 100vh;              /* 화면 세로 가득 */
    background-image: url(img/profilemain1.png);
    background-size: cover;   /* 이미지 전체 노출  */
    background-repeat: no-repeat; /* 잘림 방지 + 반복 방지 */
    background-position: center; /* 가운데 정렬 */
    background-color: #28282a;     /* 여백 생길 때 배경색 (원하는 색으로 변경 가능) */
}
/* 제품 목록부분의 sub배너 이미지작성 */
.conI.compact {
	height: 450px;
	min-height: 0;
	background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)), url(img/profilemain1.jpg);
}

.conI h1 {
		margin-top: 0;
		margin-bottom: 10px;
		font-family: 'Montserrat', sans-serif;
		letter-spacing: 0.2em;
		margin-left: 0.2em;
		font-size: 15vw;
}

.conI p {
		margin-top: 0;
		margin-bottom: 0px;
		font-size: 18px;
}
/* 전체 섹션 */
.conZ {
    background: #ffffff;
    padding: 190px 0;
    background-image: url(img/PP.png);
    background-size: cover;

}

/* 레이아웃 묶음 */
.profile-wrap {
    display: flex;
    /* 🌟 이 줄을 수정합니다. 현재 flex-start에서 center로 변경 🌟 */
    align-items: center;    /* 텍스트와 이미지를 수직 중앙에 맞춤 */
    justify-content: center;
    gap: 80px;                 
    max-width: 1400px;
    margin: 0 auto;
}

/* -----------------------------
   Left : Basquiat Portrait Image
   ----------------------------- */
.profile-img {
    width: 500px;
    height: 610px;
    background-image: url(img/profliephoto.jpg);
    background-size: cover;
    background-position: center;
    border: 6px solid #cfc6b4; /* 바랜 액자 느낌 */
}

/* -----------------------------
   Right : Text Content
   ----------------------------- */
.profile-text {
    width: 600px;
}

/* 제목 위 라인 */
.profile-line {
    width: 200px;
    height: 2px;
    background: #111;
    margin-bottom: 30px;
}

/* 제목 */
.profile-text h1 {
    font-size: 52px;
    font-weight: 700;
    color: #111;
    line-height: 1.15;
    margin-bottom: 35px;
}

/* 설명 텍스트 */
.profile-text p {
    font-size: 18px;
    color: #111;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* -----------------------------
   반응형
   ----------------------------- */
@media (max-width: 1100px) {
    .profile-wrap {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .profile-text {
        width: 90%;
        text-align: center;
    }

    .profile-line {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ==================================== */
/* 콘텐츠A: main-banner-image 히어로 이미지 (<img> 태그 사용) */
/* ==================================== */
.conH {
    /* 배경 설정 제거 (img 태그가 대신 함) */
    background-image: none;
    
    height: auto;
    min-height: 500px; 
    
    /* 🌟 반응형 상단/하단 패딩 🌟 */
    padding-top: 15vw; 
    padding-bottom: 10vw; 

    /* 내용물을 상단에 붙이고 가로 중앙에 오도록 Flexbox 설정 */
    display: flex; 
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    
    /* 🌟 필수: 자식 absolute 요소의 기준점 🌟 */
    position: relative; 
    overflow: hidden; 
}

/* 텍스트 콘텐츠 컨테이너 */
.conH .container {
    position: relative;
    z-index: 2; /* 이미지 위에 오도록 */
    /* 필요하다면 텍스트를 중앙에 정렬하는 스타일 추가 */
    max-width: 80%;
    text-align: center;
    margin: 0 auto;
}

/* 🌟 img 태그 스타일링 (모바일 기본 설정) 🌟 */
.conH .conh-visual {
    /* 섹션의 배경처럼 보이도록 절대 위치 지정 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 🌟 모바일 기본: 이미지가 잘리지 않고 전체가 보이도록 (작아 보일 수 있음) 🌟 */
    object-fit: contain; 
    
    z-index: 1; 
}

/* ==================================== */
/* PC 버전 설정 (>= 768px) */
/* ==================================== */
@media (min-width: 768px) {
    /* conH 섹션 패딩 (PC) */
    .conH {
        padding-top: 150px; 
        padding-bottom: 100px;
        
        /* 🌟 핵심 수정: PC에서 높이 제한을 해제하여 이미지를 담을 공간을 무한정 확보 🌟 */
        min-height: 0; 
        height: auto; 
    }

    /* img 태그 스타일링 (PC) */
    .conH .conh-visual {
        /* 이미지가 잘리지 않게 하려면 'contain'을 유지해야 합니다. */
        object-fit: contain; 
    }
}

/* 💡 참고: 그라데이션 오버레이는 CSS로 다시 적용해야 합니다. */
/* 만약 그라데이션이 필요하다면, .conH에 가상 요소를 추가해야 합니다. */

/* 콘텐츠A: main-banner-image (width=768px) PC */
@media (min-width: 768px) {
	.conH {
		padding: 0;
        padding-bottom: 100px;
        margin: 0;
        height: 2240px;
    }
}

/* 콘텐츠A: main-banner-image (width=768px) PC */
@media (min-width: 768px) {
	.conA h1 {
		font-size: 115px;
	}

	.conA p {
		font-size: 24px;
	}
}

/* M콘텐츠D:개요(글자 + 이미지 : 반대로 배치하기) */
.conD .container {
	padding-top: 2px;
}

.conD .text {
	padding: 20px;
}
.conD h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}

.conD p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}
.conD a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	box-shadow: 0 0 0 1px #888;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #b2a83d;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}
.conD a:hover {
	background-image: linear-gradient(rgba(255,255,255,0.2),rada(255,255,255,0.2));
}
.conD .photo {
	min-height: 300px;
	background-image: url(img/h.jpg);
	background-position: center;
	background-size: cover;
}
/* PC-콘텐츠D: 개요(image + text ) [width=768px]를 기준으로 */
@media (min-width: 768px){
	.conD .container {
		display: flex;
		flex-direction: row-reverse;
		max-width: 1000px;
		max-width: var(--large-width);
		margin: 0 auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.conD .photo {
		flex: 0 0 400px;
	}
	.conD .text {
		flex: 1;
		padding: 50px;
	}
}
/*footer*/
footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: 3e6974;
	background-color: var(--dark-main-color);
}

footer .container{
	padding: 40px 20px;
}
/*PC-footer: 구조 레이아웃[width=768px]를 기준으로*/
@media (min-width: 768px) {
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin: 0 auto;
	}
	.footA {
		flex: 0 0 40%;
	}
	.footB {
		flex: 0 0 60%;
	}
	.footC {
		flex: 0 0 100%;
	}
}
/* M푸터A: 사이트 정보 */
.footA {
	margin-bottom: 30px;
}
.footA h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
}
.footA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 12px;
}
.footA a {
	color: inherit;
	text-decoration: none;
}
/* 푸터B: 푸터 메뉴 */
.footB div {
	margin-bottom: 20px;
}
.footB h3 {
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: solid 1px currentColor;
	font-size: 14px;
}
.footB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footB a {
	display: block;
	padding: 5px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}
.footB a:hover {
	background-color: rgba(0,0,0,0.3);
    color: #dcf241;
}
/* PC-footer: [width=768px]를 기준으로 */
@media (min-width: 768px) {
	.footB {
		display: flex;
	}
	.footB div {
		flex: 1;
	}
	.footB div:not(:first-child) {
		margin-left: 40px;
	}
}
/* 푸터C: 저작권 */
.footC {
	font-size: 12px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}
/* 푸터D: SNS 메뉴 */
.footD {
	margin-top: 20px;
}
.footD ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footD a {
	display: block;
	margin-right: 8px;
	padding: 0;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
}
.footD a:hover {
	background-color: rgba(0,0,0,0.3);
    color: #dcf241;
}
/* about 페이지: post 작성 */
.post .container {
	max-width: 800px;
	max-width: var(--middle-width);
	margin-left: auto;
	margin-right: auto;
	padding: 30px 10px;
}

.post h1 {
	padding-left: 0.5rem;
	border-left: solid 0.75rem #b2a83d;
	border-left: solid 0.75rem var(--accent-color);
	font-size: 2rem;
}
.post p {
	font-size: 1rem;
	line-height: 2;
}
/* 소개 페이지: 이미지와 연혁 */
.history {
	background-color: #66cbe5;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
}
.history .text {
	padding: 20px;
}
.history h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.5rem;
}
.history .photo {
	min-height: 300px;/*~500px*/
	background-image: url(img/plant.jpg);
	background-position: center;
	background-size: cover;
}
.history table {
	border-collapse: collapse;
	border-top: solid 1px #ddd;
	border-top: solid 1px var(--gray-color);
	font-size: 0.875rem;
	width: 100%;
}
/*th 대신 tr 가능*/
.history th, .history td {
	padding-top: 1.8rem;
	padding-bottom: 1.8rem;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px  var(--gray-color);
}
.history th {
	padding-right: 1rem;
	text-align: start;
	word-break: keep-all;
}
/* PC-콘텐츠C: 개요(image + text ) [width=768px]를 기준으로 */
@media (min-width: 768px){
	.history .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin: 0 auto;
	}
	.history .photo {
		flex: 3;
	}
	.history .text {
		flex: 2;
		padding: 50px;
	}
}
/* product 소개 */
.listA h1 {
	font-size: 2rem;
	text-align: center;
}
.listA .container {
	display: flex;
	text-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 30px auto;
}
.listA artcle {  
	flex: 1 1 300px;
	display: flex;
}
.listA a {
	flex: 1;
	margin: 10px;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	color: inherit;
	text-decoration: none;
}
.listA a:hover {
	opacity: 0.8;
} 

.listA .photo {
	min-height: 200px;
	background-position: center;
	background-size: cover;
}
.listA .text {
	margin: 10px;
}
.listA h2 {
	font-size: 18px;
}
.listA p {
	font-size: 14px;
	opacity: 0.8;
}
/* product_b 소개 */
.listB h1 {
	font-size: 2rem;
	text-align: center;
}
.listB .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	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: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	color: inherit;
	text-decoration: none;
}
.listB a:hover {
	opacity: 0.8;
} 
.listB .photo {
	flex: 2;
	min-height: 0;
	background-position: center;
	background-size: cover;
}
.listB .text {
	flex: 3;
	margin: 10px;
}
.listB h2 {
	font-size: 18px;
}
.listB p {
	font-size: 14px;
	opacity: 0.8;
}
/* 너비가 600px 이하의 미디어에서 */
@media (max-with: 384px) {
	.listB .photo {
		flex: 1;
	}
	.listB p {
		display: none;
	}
}
/* 문의 페이지: 문의 대상 */
.contact {
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 20px;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	text-align: center;
}
.contact span {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 2.2rem;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
	background-color: #66cbe5;
	background-color: var(--main-color);
	color: #fff;
	color: var(--icon-color);
}
.contact h2 {
	margin-top: 0;
	font-size: 1.2rem;
}
.contact a {
	font-size: 1.4rem;
	color: inherit;
	text-decoration: none;
}
@media (min-width: 768px) {
	.contact-wrap {
		display: flex;
	}
	.contact {
		flex: 1;
	}
	.contact:first-child {
		margin-right: 20px;
	}
}
/* 문의 페이지: 문의 대상 */

/* 🌟 location 컨테이너: Flexbox 적용 및 텍스트 배경 지정 🌟 */
.location {
    display: flex; /* 자식 요소(지도와 정보)를 가로로 배치 */
    width: 100%;
    max-width: var(--large-width); /* 최대 너비 설정 (필요에 따라 조정) */
    margin: 0 auto;
    padding-bottom: 150px;
    padding-top: 250px;
}

/* 1. 지도 컨테이너 (2/3 크기) */
.location-map {
    flex: 2; /* 2/3 비율 */
}

.location iframe {
    width: 100%; /* 부모(location-map)의 100% 너비 */
    height: 500px;
    vertical-align: bottom;
}

/* 2. 지역 정보 컨테이너 (1/3 크기) */
.location-info {
    flex: 1; /* 1/3 비율 */
    background-color: #28282a; /* 텍스트 백그라운드 색상 (어두운 회색) */
    color: #fff;
    padding: 30px; /* 내부 여백 */
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
}

/* 🌟 지역 이름 (제목) 스타일 수정 🌟 */
.location .info-title {
    /* 기존 h4 스타일을 info-title에 맞게 수정 */
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    
    background-color: transparent; /* 배경색 제거 (이미 location-info에 배경색 있음) */
    color: #dcf241; /* 강조 색상 */
    
    font-size: 2.5rem; /* 큰 제목으로 조정 */
    text-align: center; /* 가운데 정렬 */
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

/* 3. 설명 글 스타일 (왼쪽 정렬) */
.location .info-description {
    margin: 0;
    font-size: 16px; 
    line-height: 1.6;
    text-align: left; /* 왼쪽 정렬 */
    max-width: 350px; /* 문단의 최대 너비를 350px로 제한 (조정 가능) */
    margin-left: auto; /* info-title이 중앙 정렬이므로 문단도 중앙에 오도록 설정 */
    margin-right: auto;
}
.location-info .highlight {
    color: #dcf241; /* 요청하신 강조 색상 적용 */
    font-weight: bold; /* 굵게 표시 */
}


/* 전체 섹션 */
.product-wrapper {
    width: 90%;
    margin: 0 auto;
	margin-top: 80px;
    padding: 50px 0;
}

/* 그리드 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

/* 카드 공통 */
.card-img {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    background-color: #ffffff;
}

/* 이미지 적용 */
.img1 {
    background-image: url("img/Gift Set Lexon x Jean-Michel Basquiat Equals Pi.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img2 { 
	background-image: url("img/Gift Set Lexon x Jean-Michel Basquiat In Italian.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img3 { 
	background-image: url("img/Bearbrick Jean-Michel Basquiat 1 .png");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img4 { 
	background-image: url("img/Bearbrick Jean-Michel Basquiat 2 .png");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img5 { 
	background-image: url("img/Bearbrick Jean-Michel Basquiat 3 .png");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img6 { 
	background-image: url("img/Beat Bop Case - Gold.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img7 { 
	background-image: url("img/Onion Gum Case.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img8 { 
	background-image: url("img/Crown Sticker Case.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img9 { 
	background-image: url("img/Warrior Case.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img10 { 
	background-image: url("img/In Italian Case.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img11 { background-image: url("img/In This Case.webp");
	background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img12 { 
	background-image: url("img/Doodle AirPods - White Logo Pro Case.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img13 { 
	background-image: url("img/Doodle MagSafe Wallet.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img14 { 
	background-image: url("img/Crown Sticker MacBook Case.webp");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img15 { 
	background-image: url("img/[Baskia Brooklyn] Graffiti - Soft Knit Skirt Women.jpeg");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img16 { 
	background-image: url("img/[Baskia Brooklyn] Repit-Patterned Karanit Women.jpeg");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img17 { background-image: url("img/[Baskia Brooklyn] Mock-neck Crown Pattern Knitwear Women.jpeg");
	background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img18 { 
	background-image: url("img/[Baskia Brooklyn] Belted Goose-Down Best Women's.jpeg");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img19 { 
	background-image: url("img/[Baskia Brooklyn] Brooklyn lettering collar sweatshirt Men's.jpeg");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img20 { background-image: url("img/[Baskia Brooklyn] Brooklyn stretch cotton-pants men's.jpeg");
	background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img21 { 
	background-image: url("img/[Baskia Brooklyn] Windblock Stadium Jacket Women's.jpeg");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img22 { background-image: url("img/[Baskia Brooklyn] Batman block high-neck wind-resistant knitwear Men's.jpeg");
	background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img23 { 
	background-image: url("img/[Baskia Brooklyn] Bettman Block High-Neck Wind-resistant Knitwear Women's .jpeg");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img24 { 
	background-image: url("img/[Baskia Brooklyn] Pants-Skirt Women.jpeg");
    background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
.img25 { background-image: url("img/[Baskia Brooklyn] B quilting high-neck goose-down jumper Men's.jpeg");
	background-size: 70% auto; /* 너비를 70%로, 높이는 자동 */
    background-repeat: no-repeat;
    background-position: center;
}
/* 텍스트 스타일 */
.card .brand {
    font-size: 14px;
    margin-top: 12px;
    color: #555;
    font-weight: 600;
}

.card .category {
    font-size: 20px;
    color: #d1d1d1;
    margin-top: -10px;
}

.card .price {
    margin-top: 3px;
    font-size: 15px;
    font-weight: bold;
    color: #dcf241;
}

/* -------- BANNER -------- */
.banner-large {
    grid-column: span 3;
    position: relative;
    height: 360px;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 60px;
}
.banner-large.first-banner {
    margin-top: -3px;
}

/* 배너 이미지 */
.banner-img {
    width: 100%;
    height: 100%;
    background-image: url("img/crown.png");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

/* 배너 텍스트 */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    padding: 50px;
    background: rgba(0, 0, 0, 0.4);
}

.banner-overlay .small {
    font-size: 14px;
    opacity: 0.8;
}

.banner-overlay h2 {
    font-size: 48px;
    margin-top: 10px;
    font-weight: 700;
    
}

.view-btn {
    margin-top: 20px;
    font-size: 14px;
    color: white;
    text-decoration: underline;
}

/* -------- 반응형 -------- */
@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .banner-large {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    .banner-large {
        grid-column: span 1;
    }
}


/* 1. 메인 비주얼/전시 배너 섹션 */
.museum-hero-section {
    padding-top: 70px; 
    
    /* 🌟 배경 이미지 위에 어두운 오버레이를 적용 🌟 */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), /* 검은색 40% 불투명도 오버레이 */
        url('img/news background.png'); /* 배경 이미지 */
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* background-color는 이제 이미지 아래에만 적용됩니다. */
}

.main-exhibition-wrap {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    gap: 30px;
}

/* 좌측 텍스트 영역 */
.main-text {
    flex: 1;
    padding-top: 50px;
}

.main-text h1 {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 30px 0;
    color: #ffffff;
}

.date-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #dddddd;
    margin-bottom: 40px;
}

.date-info .icon {
    font-size: 16px;
    margin-right: 10px;
}

.date-info p {
    margin: 0;
}

.detail-link-wrap {
    display: flex;
    gap: 20px;
}

.detail-link {
    color: #cccccc;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #939393;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.detail-link:hover {
    color: #000000;
    background-color: #dcf241;
    border: 1px solid #ffffff;
}

/* 우측 포스터 카드 */
.main-poster-card {
    width: 300px; /* 고정 너비 */
    height: 400px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.poster-image {
    width: 100%;
    height: 100%;
    background-image: url('img/poster.jpg'); /* 포스터 이미지 파일명으로 변경 */
    background-size: cover;
    background-position: center;
}

.poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.poster-overlay p {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.3;
}

.poster-overlay .date {
    font-size: 14px;
    font-weight: 300;
}

/* 2. 교육과 행사 섹션 */
.museum-events-section {
    max-width: 1600px;
    margin: 60px auto;
    padding: 0 20px;
    padding-top: 10px;
    text-align: center;
}

.museum-events-section h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #dcf241;
}

.events-grid {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    gap: 40px;
}

.event-card {
    width: 350px;
}

.event-img {
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* 임시 이미지 */
.img-author { background-image: url('img/art 15.jpeg'); }
.img-kids { background-image: url('img/art 9.jpg'); }
.img-curator { background-image: url('img/art 16.jpeg'); }

.event-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #d8d8d8;
}

/* ==================================== */
/* 기본 설정 */
/* ==================================== */

/* 3. 미술관의 새로운 이야기 섹션 (기존 CSS 기반) */
.museum-news-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px; /* 하단 패딩 추가 */
    background-color: #28282a; /* 배경색 통일 */
}

.museum-news-section h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 30px;
    border-bottom: 1px solid #6e6e6e; /* 어두운 배경에 맞게 색상 변경 */
    padding-bottom: 10px;
    padding-top: 40px;
    color: #dcf241; /* 강조색 */
}

/* 뉴스 아이템 공통 스타일 */
.news-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #6e6e6e;
    text-decoration: none;
    color: #858484;
    transition: background-color 0.2s;
}

.news-item:hover {
    background-color: #d9dfb9;
    color: #222222;
}

.news-item .date {
    width: 60px;
    font-size: 13px;
    font-weight: 600;
    color: #dcf241; /* 날짜도 강조색으로 변경 */
    margin-right: 20px;
    flex-shrink: 0;
}

.news-item .date:hover {
    width: 60px;
    font-size: 13px;
    font-weight: 600;
    color: #101010; /* 뉴스 본문 색상 */
    margin-right: 20px;
    flex-shrink: 0;
}
.news-item p {
    flex: 1;
    margin: 0;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff; /* 뉴스 본문 색상 */
}
.news-item p:hover {
    flex: 1;
    margin: 0;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #101010; /* 뉴스 본문 색상 */
}


/* ==================================== */
/* 페이지네이션 스타일 */
/* ==================================== */
.pagination-controls {
    text-align: center;
    margin-top: 40px;
}
.btn {
    border: none;
    outline: none;
    padding: 10px 16px;
    background-color: #444; /* 어두운 배경에 맞게 버튼 배경색 조정 */
    color: #fff;
    cursor: pointer;
    margin: 0 4px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* Active 및 Hover 스타일 */
.btn.active, .btn:hover {
    background-color: #dcf241; /* 노란색 강조색 */
    color: #222; /* 어두운 글자색 */
}

/* 4. 하단 홍보 배너/문화 체험 섹션 */
.museum-bottom-banner {
    background-color: #e1e7b5;
    padding: 80px 0;
    padding-top: 60px;
}

.banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.text-wrap h3 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 15px;
}

.date-range {
    font-size: 15px;
    color: #292626;
    margin-bottom: 25px;
}

.reservation-btn {
    display: inline-block;
    background-color: #333;
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.reservation-btn:hover {
    background-color: #555;
}

.banner-photo {
    width: 300px;
    height: 200px;
    background-image: url('img/art 16.jpeg'); /* 하단 배너 이미지 파일명으로 변경 */
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

/* 4. Order 섹션 */
.Order {
    background-color: #e1e7b5;
    padding: 80px 0;
    padding-top: 60px;
}

.Order-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.Order-wrap h3 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 15px;
}

.Orderrange {
    font-size: 15px;
    color: #292626;
    margin-bottom: 25px;
}

.Order-btn {
    display: inline-block;
    background-color: #333;
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.Order-btn:hover {
    background-color: #555;
}

.Order-photo {
    width: 300px;
    height: 200px;
    background-image: url('img/A.png'); /* 하단 배너 이미지 파일명으로 변경 */
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}
/* ------------------------------------ */
/* 모바일 반응형 (767px 이하) */
/* ------------------------------------ */
@media (max-width: 767px) {
    .main-exhibition-wrap {
        flex-direction: column;
        align-items: center;
        padding: 30px 20px;
    }
    
    .main-text {
        padding-top: 0;
        text-align: center;
    }

    .main-text h1 {
        font-size: 30px;
    }

    .detail-link-wrap {
        justify-content: center;
        flex-wrap: wrap;
    }

    .main-poster-card {
        width: 100%;
        height: 350px;
        margin-top: 30px;
    }

    .events-grid {
        flex-direction: column;
        align-items: center;
    }

    .museum-events-section h2, .museum-news-section h2 {
        text-align: center;
    }
    
    .event-card {
        width: 100%;
    }

    .banner-content {
        flex-direction: column;
        
    }
    
    
    .banner-photo {
        width: 100%;
        height: 180px;
    }
}

.artSlider {
    background-color: #333; /* 슬라이더 배경색 */
    padding-top: 60px;       /* 전체 상단 여백 (제목 위) */
    padding-bottom: 60px;    /* 전체 하단 여백 */
}
.artSlider h2 {

    margin: 0 auto;
    padding: 0 180px;
    padding-top: 80px;
    padding-bottom: 5px;
    color: #fff;
    text-align: center; 
    
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* 🌟 설명 <p> 스타일 추가 (기존 .slider-caption p 대체) 🌟 */
.artSlider p {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 50px;
    padding-top: 10px;
    padding-bottom: 55px; /* 설명과 카드 사이 간격 */

    color: #fff;
    text-align: center; /* 텍스트 중앙 정렬 */
    
    font-size: 14px;
    opacity: 0.4;
}
.artSlider .slider-caption {
    max-width: 1000px; /* 전체 컨테이너 너비에 맞게 조정 (선택 사항) */
    margin: 0 auto;
    padding: 0 50px; /* .scroll-container의 좌우 패딩과 맞춥니다. */
    padding-top: 50px; /* 슬라이더 상단과의 간격 확보 */
    color: #fff; /* 밝은 텍스트 색상 (슬라이더 배경 #333에 대비) */
    text-align: left;
}

.artSlider .slider-caption p {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
}


/* 전체 슬라이더 */
.artSlider .scroll-container {
    background-color: #333;
    overflow-x: auto;
    white-space: nowrap;
    padding: 50px;
    padding-top: 0px; /* 부제목과의 간격을 줄입니다. (기존 100px에서 변경) */
    padding-bottom: 60px;
    display: flex;
    gap: 15px;
}

/* 카드 래퍼 */
.artCard {
  width: 300px;
  height: 400px;
  position: relative;
  flex-shrink: 0;
}

/* 이미지 */
.artImg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  transition: .4s ease;
}

/* 텍스트 — 박스 제거 버전 */
.artText {
  position: absolute;
  top: 50%;  
  left: 50%;
  transform: translate(-50%, -50%); /* 가운데 정렬 핵심 */
  color: #dcf241;
  font-size: 20px;
  opacity: 0;
  transition: .4s ease;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-shadow: 0 0 5px rgba(0,0,0,0.8);
}

/* hover 시 이미지 흐리고 텍스트만 나타남 */
.artCard:hover .artImg {
  opacity: 0.5;
}

.artCard:hover .artText {
  opacity: 1;
}

/* 이미지 연결 */
.A1 { background-image: url("img/Andy Warhol.jpg"); }
.A2 { background-image: url("img/Matilde Basquiat.jpg"); }
.A3 { background-image: url("img/Keith Haring.jpg"); }
.A4 { background-image: url("img/Al Diaz.jpg"); }
.A5 { background-image: url("img/Charlie Parker.jpg"); }
.A6 { background-image: url("img/Cy Twombly.jpeg"); }
.A7 { background-image: url("img/Jean Dubuffet.webp"); }


/* 기본 세팅 */
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #28282a; 
  color: #000;
}

.page-title {

text-align: center;

font-size: 80px;

margin-top: 30px;

padding-top: 130px;

color: #dcf241;

font-family: 'Permanent Marker', cursive;


/* Permanent Marker는 굵기 조절이 어렵기 때문에 400으로 유지합니다. */

font-weight: 400;

font-style: normal;


}



/* Grid 컨테이너 */

.art-grid {

display: grid;

grid-template-columns: repeat(6, 1fr);

grid-auto-rows: 200px;

gap: 10px;

padding: 20px;

padding-bottom: 140px;

}



/* 작품 카드 */

.art-item {

position: relative;

overflow: hidden;

border: 3px solid #000;

cursor: pointer;

transition: transform 0.3s ease;

}



/* Hover 확대 */

.art-item:hover {

transform: scale(1.03);

}



/* 이미지 */
.art-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 초기 이미지의 오퍼시티를 낮춰서 어둡게 보이게 설정 */
    opacity: 0.5; /* 원하는 어둡기 정도로 조절 가능 (0.0~1.0) */
    /* 오퍼시티 변화에 대한 transition 추가 */
    transition: opacity 0.4s ease;
}



/* Hover 시 이미지 어둡게 */

.art-item:hover img {

opacity: 0.5;

}



/* 작품명 텍스트 */
.art-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(255, 255, 255);
    background-color: rgba(40, 40, 42, 0.8);
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
    /* 초기에는 텍스트를 숨김 */
    opacity: 0;
    /* 텍스트 나타나는 효과에 대한 transition 유지 */
    transition: opacity 0.4s ease;
    text-align: center;
    padding: 5px;
}

/* Hover 시 텍스트 표시 */
.art-item:hover .art-title {
    opacity: 1;
}


/* Hover 시 이미지 오퍼시티 원복 (원래 색상) */
.art-item:hover img {
    opacity: 1; /* 원래 밝기로 (오퍼시티 제거) */
}



/* 비정형 Grid 스타일 */

.art-item.big {

grid-row: span 2;

grid-column: span 2;

}

.art-item.wide {

grid-column: span 2;

}

.art-item.tall {

grid-row: span 2;

}



/* 반응형 */

@media (max-width: 1200px) {

.art-grid {

grid-template-columns: repeat(4, 1fr);

grid-auto-rows: 180px;

}

}



@media (max-width: 768px) {

.art-grid {

grid-template-columns: repeat(2, 1fr);

grid-auto-rows: 180px;

}

}