@charset "UTF-8";

/* 기본 색상 */
:root {
	--accent-color: #9d8aae;
	--dark-main-color: #3e6974;
	--text-bright-color: #fff;
	--icon-color: #ffffff;
	--icon-bk-color: #f0dddd;
	--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 {font-size: 16px;
}



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

/*header 헤더*/
header{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100; /* 헤더를 중첩하는 순서 숫자가 '100' 높을수록 가장 위에 보임*/
	width: 100%;
	background-color: rgba(79, 79, 79, 0.9); /* Alpha = 투명 Alpha 0.5 = 반투명*/
}

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

/* head A : 사이트 이름*/
.headA{
	display: inline-block;
	line-height: 70px;
	padding-left: 20px;
	padding-right: 20px;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	text-decoration: none;
}
/* head B : 내비게이션 메뉴*/
.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);
}

@media(min-width: 786px){
	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;
	}
}

/* header C :토글 버튼*/
@media(max-width: 767px){
	/*작은 화면 전용 설정 Mobile*/
	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){
	/* 큰 화면 전용 설정 PC*/
	.headC{
		display: none;
	}
	.headB{
		display: block !important;
	}
}
/* 콘텐츠A: main-banner-image 히어로 이미지 */
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-image:url(img/main_img.jpg);
	background-position: center;
	background-size: cover;
	color: #ffffff;
	text-align: center;
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
	overflow: hidden;
	margin-bottom: 120px;
}

/* 제품 목록부분의 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: 10px;
	font-size: 18px;
}


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

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

/* M 콘텐츠B: 개요(icon+text)*/
.conB {
  text-align: center;
  padding: 100px 0;
  background-color: #fff;
  margin-bottom: 120px;
}
.card-art{
  background-image: url('img/p19.jpg');
}

.card-idea{
  background-image: url('img/p20.jpg');
}

.card-collabo{
  background-image: url('img/p21.jpg');
}


.conB .container {
  max-width: 1200px; /* 또는 var(--large-width) 사용 시 바꿔도 됨 */
  margin: 0 auto;
  padding: 0 20px;
}

.conB .text{
  border: 1px solid #eee;
  border-radius: 30px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  margin-bottom: 24px;
  padding: 0;
  min-height: 320px;          
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}
.card-title {
    font-size: 18px;
    margin-top: 12px;
    margin-bottom: 20px;
    font-weight: 600;
}

.card-title span {
    font-size: 14px;
    color: #555;
    opacity: 0.9;
}


/* conB 카드 안 이미지 기본 스타일 */
.conB .text img{
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;     
  border-radius: 50%;    
  transition: transform 0.4s ease;  
}

/* 마우스 올렸을 때 사진만 확대 */
.conB .text:hover img{
  transform: scale(1.12);    
}


/* 카드 hover 효과 */
.conB .text:hover{
  transform: translateY(-5px) scale(1.03); /* 살짝 떠오르면서 확대 */
}

.card-item {
    text-align: center;
}

.card-caption {
  background: rgba(0,0,0,0.55);
  color: #fff;
  text-align: center;
  padding: 12px 0;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.card-caption .title {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}

.card-caption .year {
  font-size: 14px;
  margin: 4px 0 0;
  opacity: 0.85;
}

/* M 콘텐츠C: 개요(icon+text)*/
.conC {
    background-color: #a0afd1;  /* 원하는 색 지정 */
    color: #fff;
    background-image: none;
    background-size: auto;
    background-position: initial;
    background-repeat: no-repeat;
}

.conC .text {
	padding: 20px;
 }
.conC h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}
.conC p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}
.conC a{
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #3d6eb2;
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}
.conC a:hover {
	background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2));
}
.conC .photo{
	min-height: 200px;
	background-image: url(img/art.jpg);
	background-position: center;
	background-size: cover;
}

/* M 콘텐츠D: 개요(icon+text)*/
.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: #3d6eb2;
	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),rgba(255,255,255,0.2));
}
.conD .photo{
	min-height: 200px;
	background-image: url(img/h.jpg);
	background-position: center;
	background-size: cover;
}
/* M footer 푸터*/
footer{
	color: #888;
	background-color: #444444;
}
footer .container{
	padding: 40px 20px;
}

/*푸터A:사이트 정보*/
.footA{
	margin-bottom: 10px;
}
.footA h2{
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
	letter-spacing: 0.1em;
	color: #999;
}
.footA p{
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
}
.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);
}*/
/*푸터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: 30%;
	text-align: center;
}
.footD a:hover{
	background-color: rgba(0,0,0,0.3);
}*/


/* pC-콘텐츠B: 개요(아이콘 + 글자) [width=768px]를 기준으로 */
@media (min-width: 768px){
	.conB .container{
		display: flex;
		justify-content: center;
		align-items: stretch;
		flex-wrap: wrap;
		gap: 40px;
		max-width: 1600px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 60px;
  }
	.conB .card-item{
      flex: 0 1 calc((100% - 80px) / 3);
      margin-bottom: 0;

      padding: 0;
      min-height: 350px; 
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }
}
.conB i{
	font-size: 50px;
	color: #ffffff;
	margin-bottom: 10px;
	transform: scale(0.98);
	transition: 0.5s;
}
.conB i:hover{
	transform: scale(1.2);
}
/* pC-콘텐츠C: 개요(아이콘 + 글자) [width=768px]를 기준으로 */
@media (min-width: 768px){
	.conC .container{
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.conC .photo{
		flex: 3;
	}
	.conC .text{
		flex: 2;
		padding: 50px;
	}
}
/* pC-콘텐츠D: 개요(아이콘 + 글자) [width=768px]를 기준으로 */
@media (min-width: 768px){
	.conD .container{
		display: flex;
		flex-direction: row-reverse;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.conD .photo{
		flex: 0 0 400px;
	}
	.conD .text{
		flex: 1;
		padding: 50px;
	}
}

/*PC-footer:구조 레이아웃[width=768px]를 기준으로*/
@media (min-width: 768px){
	footer .container{
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.footA{
		flex: 0 0 40%;
	}
	.footB{
		flex: 0 0 60%;
	}
	.footC{
		flex: 0 0 100%;
	}
}

/*PC-footer B:구조 레이아웃[width=768px]를 기준으로*/
@media (min-width:768px){
	.footB{
		display: flex;
	}
	.footB div{
		flex: 1;
	}
	.footB div:not(:first-child){
		margin-left: 40px;
	}
}

/*about 페이지: post 작성*/
.post .container{
	max-width: 800px;
	max-width: var(--middle-width);
	margin-left: auto;
	margin-right: auto;
	padding: 60px 120px;
}

.post h1{
	padding-left: 0.5rem;
	border-left: solid 0.75rem #f4ad32;
	font-size: 2rem;
}
.post p{
	font-size: 1rem;
	line-height: 2;
}
/* ------------------ ABOUT 소개 레이아웃 ------------------ */

/* ABOUT 카드 스타일 */
.about-intro-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;

  background: #ffffff;
  padding: 60px 120px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  max-width: 1100px;
  margin: 120px auto 100px;
}


.about-photo img {
  width: 380px;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.about-text h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  margin-top: 0;
  line-height: 1.2;
}

.about-text p {
  font-size: 18px;
  line-height: 1.7;
  color: #333;
}


/* 전체 타임라인 박스 */
.history-timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 10px;
}

/* 가운데 세로 라인 */
.history-timeline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #ccc;
}

/* 각 연혁 박스 래퍼 */
.history-item {
  position: relative;
  width: 50%;
  padding: 10px 40px;
  box-sizing: border-box;
}

/* 왼쪽 / 오른쪽 */
.history-item.left {
  left: 0;
}

.history-item.right {
  left: 50%;
}

/* 선 위의 동그라미 – PC 기준, 세로선 정중앙 정렬 */
.history-item::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background-color: #cccccc;
    border: 3px solid #999999;
    border-radius: 50%;
    z-index: 2;
}
/* 왼쪽 아이템 – 아이템 오른쪽 끝(=세로선)에 맞추기 */
.history-item.left::after {
  left: calc(100% - 15px);
  transform: translateY(-50%);
}

/* 오른쪽 아이템 – 아이템 왼쪽 밖에서 세로선에 맞추기 */
.history-item.right::after {
  left: -15px;
  transform: translateY(-50%);
}


/* 안쪽 카드 모양 */
.history-content {
  position: relative;
  /*background-color: #fff;*/
  background-color: rgba(0,0,0,0.4);
  border-radius: 10px;
  padding: 20px 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* 텍스트 스타일 */
.history-content h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  color:#ddd;
}

.history-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;color:#ccc;
}
/* HISTORY 섹션 전체 배경(윗부분 아치) */
#history {
  position: relative;
  margin-top: 100px;
  padding: 0;
  background-color: #f5f5f5;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  overflow: hidden;
  background-image: url("img/about_bg-2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.history-title {
  font-size: 50px;
  font-weight: 700;
  text-align: center;
  margin-top: 120px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .post .container.about-intro-wrap {
    padding: 20px;
	margin:10px;
  }
}
@media screen and (max-width: 768px) {
  .about-intro-wrap {
    flex-direction: column;
    padding: 16px;
    gap: 32px;
    align-items: center;
  }
}
@media screen and (max-width: 768px) {
	#history {
    padding: 90px 0 60px;
    border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  }
  .history-title {
    margin: 0 0 40px;
  }
  .about-intro-wrap {
    flex-direction: column;
    padding: 12px;
    gap: 32px;
	align-items: center;
  }
  .about-intro-content {
    padding: 0 20px;
  }

  .about-photo img {   
    max-width: none;
    display: block;
	width:100%;
  }


  .about-text h1 {
    font-size: 26px;
  }

  .about-text p {
    font-size: 16px;
  }

  /* 세로 라인 위치 */
  .history-timeline::after {
    left: 30px;
  }

  /* 모든 아이템 좌우 정렬 초기화 */
  .history-item,
  .history-item.left,
  .history-item.right {
    width: 100%;
    left: 0;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* 동그라미 위치 — 모바일은 무조건 세로선 위치로 고정 */
  .history-item::after {
    left: 40px !important;
    transform: translate(-50%, -50%);
  }

  /* 데스크톱용 left/right 동그라미 위치를 모두 무시 */
  .history-item.left::after,
  .history-item.right::after {
    left: 20px !important;
  }
}

/* M product 소개*/
.listA h1{
	margin-top: 100px;
	font-size: 2rem;
	text-align: center;
}
.listA .container{
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 30px auto;
}
.listA article{
	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;
	background-color: #3c3c3c;
	color: #ddd;
	background-color: rgb(153, 178, 235); 
	color: #ddd;
}
.listA .photo{
	min-height: 350px;
	background-position: center;
	background-size: cover;
}
.listA .text{
	margin: 10px;
}
.listA h2{
	font-size: 18px;
}
.listA p{
	font-size: 14px;
	opacity: 0.8;
}

/* M product 소개*/
.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;
	background-color: #f00; 
	color: #ddd;
}
.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-width: 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: 1rem;
	color: inherit;
	text-decoration: none;
}

@media (min-width:768px){
	.contact-warp{
		display: flex;
	}
	.contact{
		flex: 1;
		margin-right: 20px;
	}
	.contact:last-child{
		margin-right: 0;
	}
}
/*문의 페이지: 지도*/
.location iframe{
	width: 100%;
	height: 400px;
	vertical-align: bottom; /*세로 정렬은 아래*/
}
.location h2{
	margin: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #66cbe5;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 1.5rem;
	text-align: center;
}

/* Artwork 섹션 간 간격 늘리기 */
.listA {
    margin-bottom: 120px; 
}
/* Project No.2 섹션만 회색 배경 */
.listA:nth-of-type(3) {
    background: #f4f4f4;
    padding: 60px 0;
	margin-bottom: 0;
}
/* 아트워크 영역 강제 고정 */
.conA-artwork {
    position: relative;
    width: 100%;
    height: 40vh !important;     /* 섹션 높이 강제 */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 0 !important;
}

/* 배경 이미지가 반드시 섹션 안에만 존재 */
.conA-artwork .artwork_bg-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
    display: block;
}

/* 제목을 강제로 이미지 하단에 붙임 */
.conA-artwork h1 {
    position: absolute;
    bottom: 0; 
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    /*font-size: 10vw;*/
	font-size: 5rem;
    line-height: 0.7;  
    color: #009999;
}
/* ===========================
   Artwork Detail Page
   =========================== */

.art-detail {
  padding-top: 90px; /* 헤더 높이만큼 여백 */
}

/* 브레드크럼 */
.art-breadcrumb {
  font-size: 14px;
  color: #777;
  padding: 20px 20px 10px;
}

.art-breadcrumb a {
  color: #777;
  text-decoration: none;
}

.art-breadcrumb a:hover {
  text-decoration: underline;
}

.art-breadcrumb .sep {
  margin: 0 6px;
}

.art-breadcrumb .current {
  color: #333;
}

/* 상단 히어로 영역 */
.art-detail-hero {
  padding: 20px 0 40px;
  border-bottom: 1px solid #eee;
}

.art-detail-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.art-image {
  flex: 0 0 380px;
  max-width: 100%;
}

.art-image img {
  width: 100%;
  display: block;
  border: 1px solid #eee;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.art-summary {
  flex: 1;
  min-width: 260px;
}

.art-summary h1 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 28px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

.art-meta {
  margin: 0 0 20px;
}

.art-meta div {
  display: flex;
  margin-bottom: 4px;
  font-size: 14px;
}

.art-meta dt {
  width: 90px;
  color: #777;
}

.art-meta dd {
  margin: 0;
  color: #333;
}

.art-summary-text {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* 공통 섹션 */
.art-section {
  padding: 40px 0;
}

.art-section h2 {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 700;
}

.art-section p {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

/* split 레이아웃 영역 */
.art-section-split {
  background-color: #fafafa;
}

.art-split-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.art-split-block {
  flex: 2;
  min-width: 260px;
}

.art-split-block h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 17px;
}

.art-side-note {
  flex: 1;
  min-width: 220px;
  padding: 20px 24px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.art-side-note h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

/* 키워드 영역 */
.art-tags ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.art-tags li {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background-color: #fafafa;
}

/* 모바일 대응 */
@media (max-width: 767px) {
  .art-detail {
    padding-top: 70px;
  }
  .art-detail-layout {
    flex-direction: column;
  }
  .art-image {
    flex: 1 1 auto;
  }
}

/* ===========================
   Artwork Detail Page FIX
   =========================== */

/* 전체 폭 제한 + 좌우 여백 + 중앙 정렬 */
.art-detail main,
.art-detail,
.art-section,
.art-detail-hero .container,
.art-section .container {
    max-width: 1150px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* 이미지 가운데 정렬 */
.art-detail-layout {
    justify-content: center;
}

.art-image {
    display: flex;
    justify-content: center;
}

/* 본문 텍스트 최대 폭 제한 */
.art-summary,
.art-section p {
    max-width: 760px;
}

/* 모바일 반응형 */
@media (max-width: 767px) {
    .art-detail,
    .art-section,
    .art-detail-hero .container,
    .art-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .art-detail-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .art-summary-text {
        text-align: left;
    }
}
footer .container {
  max-width: var(--large-width);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column; /* 위: footA, 아래: footC */
  gap: 20px;
}
/* 푸터 전체를 가운데 정렬 */
.footA {
    display: flex;
    flex-direction: column;
    align-items: center;  
    justify-content: center;
    gap: 15px;
    text-align: center;   
}
/* 푸터 전체 중앙 정렬 — 두 줄 구조 유지 */
footer .container {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;   /* 가로 중앙 */
    justify-content: center;
    text-align: center;    /* 텍스트 중앙 */
    gap: 15px;
}

/* 1줄째(이름 + 링크/메일 + SNS 아이콘)도 가운데 */
.footA {
    display: flex;
    flex-direction: row;   /* 가로 배치 그대로 유지 */
    align-items: center;
    justify-content: center; /* 가운데 정렬 핵심 */
    gap: 40px;
}

/* 연락처 텍스트 가운데정렬 */
.footA p {
    margin: 0;
    text-align: center;
}

/* SNS 아이콘 가로 가운데 
.footD ul {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0;
    margin: 0;
}*/

.footC {
    text-align: center;
    width: 100%;
}
/* 푸터 전체 중앙 정렬 — 두 줄 구조 유지 */
footer .container {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;   /* 가로 중앙 */
    justify-content: center;
    text-align: center;    /* 텍스트 중앙 */
    gap: 15px;
}
.footA {
    display: flex;
    flex-direction: row;   /* 가로 배치 그대로 유지 */
    align-items: center;
    justify-content: center; /* 가운데 정렬 핵심 */
    gap: 40px; width: 100%; display:block;
}

/* 연락처 텍스트 가운데정렬 */
.footA p {
    margin: 0;
    text-align: center; width: 100%;display:block;
}

.footC {
    text-align: center;display:block;
    width: 100%;
}

.footC {
  font-size: 12px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

/* 화면이 좁을 때는 자동 줄바꿈 (모바일 대응) */
@media (max-width: 767px) {
  .footA {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* ========== PPTX / 영상 페이지 스타일 ========== */

.pptx {
    background-color: var(--main-color);  
    color: var(--text-bright-color);
    padding: 60px 0;
}

.pptx video {
    width: 100%;
    display: block;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pptx .container {
        display: block;
        width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }
}
.conB a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.headC i.fa-bars {
    color: #ffffff !important;
}

/* 작품 제목과 이미지 간격 */
.card-caption .title {
    margin-bottom: 20px !important;
}

/* 연도와 이미지 사이 */
.card-caption .year {
    margin-bottom: 30px !important;
}

/* 작품 이미지 아래 간격 */
.listA .photo {
    margin-bottom: 60px !important;
}
/* 메뉴 아이콘 강제 흰색 적용 */
.headC .fa-bars {
    color: #ffffff !important;
}

/* conB 카드 아이콘만 파란색 적용 */
.conB .text i {
    color: #253a84;
}