@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 {font-size: 16px;}



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


/* 콘텐츠A: main-banner-image 히어로 이미지 Mobile */
.conA {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100vh;
  min-height: 450px;
  background-image: url(img/TESTING.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
  color: var(--text-bright-color);
  background-attachment: fixed;
  overflow: hidden;
}

.conA-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 125%);
  z-index:1;
}

/* 로고 + 서브텍스트 박스 */
.hero-inner{
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 16px;
  padding: 0 20px;
  opacity: 0;                       /* 처음엔 안 보이게 */
  transform: translateY(30px) scale(0.96);
  animation: heroFadeUp 1.1s ease-out 0.25s forwards;
}

/* 배너 로고 이미지 */
.hero-logo{
  max-width: 70%;
  height:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.7));
}

.hero-logo2 {
  max-width: 55%;
  height: auto;
}

/* 서브 텍스트 */
.hero-sub{
  margin:0;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* PC에서 로고 조금 더 크게 */
@media (min-width: 768px){
  .hero-logo{
    max-width: 80%;   /* 1번 페이지: 타이포 로고는 크게 */
    margin-top: 300px;
  }

  .hero-logo2{
    max-width: 60%;   /* 2번 페이지: 하트 로고는 조금 작게 */
    margin-top: 300px;
  }

  .hero-inner{
    gap: 18px;        /* 로고랑 텍스트 사이 간격 통일 느낌 */
  }

  .hero-sub{
    font-size: 1.2rem;
  }
}

/* 히어로 로고/텍스트 페이드 업 */
@keyframes heroFadeUp{
  0%{
    opacity:0;
    transform: translateY(30px) scale(0.96);
  }
  60%{
    opacity:1;
    transform: translateY(0) scale(1);
  }
  100%{
    opacity:1;
    transform: translateY(0) scale(1);
  }
}


/* 제품 목록부분의 sub배너 이미지작성*/
.conA.compact {
	height: 450px;
	min-height: 0;
	background-image:linear-gradient(rgba(0,0,0,0.1),rgba(0, 0, 0, 0.5)), url(img/artwork.jpg); 
}
.conA .artwork{
	opacity: 0;
	transform: translateY(20px);
	animation: textUp 0.8s ease-out forwards;
}
@keyframes textUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.conA h1 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: "knewave", sans-serif;
	text-shadow: 2px 2px 0 #000, 4px 4px 0 #000;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
	font-size: 13vw;
}


.conA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 16px;
	
}


/* Mobile size -콘텐츠A: main-banner-image [width=768]을 기준으로 PC*/
@media (min-width: 768px) {
	.conA h1 {
		font-size: 115px;
	}

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


.conB {
  padding: 60px 0;
  background-color: #fff;
  color: #111;
}

.conB .container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 제목 */
.conB-title {
  font: 800 34px/1.2 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
  margin-bottom: 32px;
  text-align: center;
}

/* 이미지 */
.conB .photo {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.conB .photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 텍스트 영역 */
.conB .text {
  padding: 30px 20px;
}

.conB .text h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

.conB .text p {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

.conB a {
  display: inline-block;
  padding: 10px 26px;
  color: #333;
  border: solid 1px #333;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}
.conB a:hover {
  background-color: #7baaf7;
  color: #fff;
  border: solid 1px #7baaf7;
}

/*PC 레이아웃*/
@media (min-width: 768px) {
  .conB .container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* 왼쪽 사진 / 오른쪽 텍스트 */
    align-items: center;
    column-gap: 60px;
  }

  .conB-title {
    grid-column: 1 / -1; 
    margin-bottom: 40px;
    text-align: left;
  }

  .conB .photo {
     grid-column: 1 / 2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }

  .conB .text {
    grid-column: 2 / 3;
    padding: 0;
  }
}

/*모바일*/
@media (max-width: 767px) {
  .conB .container {
    display: block;
    max-width: 80%;
  }

  .conB-title {
    text-align: center;
    font-size: 28px;
  }

  .conB .photo {
    margin-bottom: 20px;
  }

  .conB .text {
    text-align: center;
    padding: 0 10px;
  }

  .conB .text h3 {
    font-size: 18px;
  }

  .conB .text p {
    font-size: 14px;
    line-height: 1.7;
  }
}
/* 컨탠츠C: 개요(이미지+글자)*/

/* 공통 타일 스타일 */
.conC{
  padding: 0;               /* 풀폭 느낌 위해 섹션 패딩 제거 */
  margin: 0;
  background: #2c2c2c;
}

.conD{
	padding: 0;               
  margin: 0;
  background: #585858;
}

.conC .container, .conD .container{
  max-width: none;          /* .container 유지하되 이 섹션만 풀폭 */
  width: 100%;
  padding: 0;               /* 좌우 여백 제거 */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4칸 = 사진/텍스트/사진/텍스트 */
  gap: 0;                   
}

.tile{
  min-height: 46vh;         /* 화면을 큼직하게 채움 (원하면 40~55vh로 조절) */
}

/* 이미지 타일 */
.tile.image{
  background-size: cover;
  background-position: center;
}

/* 카드 타일 */
.tile.card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 36px 32px;
  text-align: center;
  align-items: center;
}
.tile.card h3{ 
	font-family: 'Knewave', sans-serif;
	margin:0 0 14px; 
	font-weight:100; 
	font-size: 16px;
	color: #7baaf7;  
	letter-spacing: 0.25em;
}

.tile.card p{ 
	margin:0 0 18px; 
	line-height:1.65; 
	color:#ffffff; 
}

.tile.card .btn{
  align-self: center;
  display:inline-block; 
  padding:8px 14px; 
  border-radius:6px;
  background: rgba(0, 0, 0, 0);
  border: solid 3px #7baaf7;
  color: #7baaf7; 
  text-decoration:none; 
  font-family: 'Montserrat', sans-serif;
  font-weight:700;
  transition:background .2s ease, transform .1s ease;
}
.tile.card .btn:hover{ 
	background:#7baaf7; 
	transform:translateY(-1px); 
	color: #fff;
}

/* conD는 순서만 다름 — HTML에서 card→image 순이므로 별도 스타일 필요 없음 */

/*!!!!!!모바일!!!!!*/

@media (max-width: 767px){
  .conC .container, .conD .container{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    grid-auto-flow: dense;       /* ← 빈 칸 생기면 채워 넣기 */
  }

  /* 모든 타일을 같은 비율/높이로 맞춤 (정사각형이 싫으면 4/3로 바꿔) */
  .conC .tile,
  .conD .tile{
    aspect-ratio: 1 / 1;        /* 1/1(정사각) 또는 4/3 추천 */
    min-height: 0;               /* 예전 min-height 무력화 */
    overflow: hidden;
    display: block;
	margin: 0;
  }

  /* 이미지가 <img> 태그로 들어간 경우에도 꽉 채움 */
  .conC .tile .image img, .conD .tile .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
	gap: 0 !important; 
	margin: 0;
  }

  .tile.card h3{
	text-align: center;
	margin: 0;
	padding: 0;
  }

  /* 배경이미지 방식도 안전하게 */
  .conC .tile.image, .conD .tile.image{
    background-size: cover;
    background-position: center;
  }

  /* 카드 타일은 가운데 정렬 + 여백만 */
  .conC .tile.card, .conD .tile.card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 10px;                   /* 혹시 남아있던 margin 제거 */
  }

  .tile.card p{
	display: none;
  }

  .tile.card .btn{
	display: none;
  }

  /* (선택) 특정 쌍 좌우 스왑 유지하려면 아래 켜두기 */
  /* conC: Project B만 반전 */
  	.conC .container > :nth-child(3){ grid-column: 2; }
     .conC .container > :nth-child(4){ grid-column: 1; } 

  /* conD: News A만 반전 */
  	.conD .container > :nth-child(1){ grid-column: 2; }
    .conD .container > :nth-child(2){ grid-column: 1; } 
}

/*중간 환기용 로고*/
	.conE{
		align-items: center;
		padding-top: 50px;
		display: flex;
		justify-content: center;
	}

	.conE img{
		display: block;
		height: auto;
		max-width: 10%;
	}

	.conE img:hover{
  		transform: scale(1.08);
  		animation: wiggle 0.35s ease-in-out;
	}

	@keyframes wiggle {
  		0%   { transform: scale(1.08) rotate(0deg); }
  		25%  { transform: scale(1.08) rotate(2deg); }
  		50%  { transform: scale(1.08) rotate(-2deg); }
  		75%  { transform: scale(1.08) rotate(1deg); }
  		100% { transform: scale(1.08) rotate(0deg); }
}

	@media (max-width: 767px){
		.conE img{
			max-width: 50%;
			min-width: 35%;
		}
	}

/*로고 끝*/

/*슬라이더*/
	.hero-wrap {
	max-width: 1800px;
	height: auto;
	margin: 50px auto;
	padding: 0 16px;
}
	/*섹션 제목*/
	.slide-title {
		font: 800 34px/1.2 'Montserrat', sans-serif;
		letter-spacing: 0.5px;
		margin-bottom: 32px;
		text-align: left;
	}

	/* Swiper 전체 */
	.swiper {
		padding: 32px 28px 56px; /* 좌우 여백 + 아래 도트 */
		border-radius: 16px;
		overflow: hidden;
	}

	/* 슬라이드 카드 */
	.swiper-slide {
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	height: 840px;
	}

	.swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	}

	/* 설명 텍스트 */
	.caption {
	position: absolute;
	inset: auto 0 0 0;
	color: #fff;
	padding: 30px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.2px;
	z-index: 1;
	}
	
	/*각 슬라이드 제목*/
	.swiper-slide h2{
		position: absolute;
		inset: auto 0 0 0;
		color: #fff;
		padding: 50px 20px;
		font-size: 40px;
		z-index: 2;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
	}
	
	/* 화살표 */
	.swiper-button-prev, .swiper-button-next {
		top: 50%;
		transform: translateY(-50%);
		color: #7baaf7;
	}

	.swiper-button-prev {
		left: 20px;
	}

	.swiper-button-next {
		right: 20px;
	}

	/* 도트(페이지네이션) */
	.swiper-pagination-bullet {
		opacity: 0.35;
	}

	.swiper-pagination-bullet-active {
		opacity: 1;
	}

	/* 반응형 */
	@media (max-width: 768px) {
		.swiper {
			padding: 24px 18px 46px;
		}

		.caption {
			font-size: 0;
		}
		
		.swiper-slide{
			max-height: 420px;
		}

		.swiper-slide h2{
			font-size: 25px;
			padding-left: 30px;
			padding-bottom: 0;
			
		}

		.slide-title{
			text-align: center;
    		font-size: 28px;
		}
	}
/*슬라이더*/

/* ===============================
   FOOTER: 공통 기본 스타일
================================*/
footer {
  background-color: rgba(18,18,18,0.8);
  color: #fff;
  padding: 40px 0 20px;
  width: 100%;
}

.footer-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 텍스트 */
.footA h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
}

/* SNS */
.footD ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  gap: 12px;
}

.footD a {
  font-size: 22px;
  color: #fff;
  opacity: 0.9;
  transition: 0.2s;
}

.footD a:hover {
  opacity: 1;
  transform: translateY(-3px);
}

/* 카피 */
.footC {
  text-align: center;
  margin-top: 30px;
  opacity: 0.7;
  font-size: 13px;
}

/* ===============================
   PC 레이아웃 (그대로 유지)
================================*/
@media (min-width: 768px) {
  .footer-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .footA { text-align: left; }
  .footD ul { justify-content: flex-end; }
  .footC { flex: 0 0 100%; margin-top: 40px; }
}

/* ===============================
    MOBILE 
================================*/
@media (max-width: 767px) {

  .footer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;       /* 가운데 정렬 */
    text-align: center;
  }

  .footA {
    margin-bottom: 12px;
  }

  .footD ul {
    justify-content: center;   /* SNS 가운데 */
    margin-top: 16px;
  }

  .footC {
    margin-top: 20px;
  }
}

/*header 헤더*/
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
}

/*header 헤더*/
.page-index .site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  opacity: 0;
  transform: translateY(-20px);
  animation: headerDrop 0.8s ease-out 0.1s forwards;
}

@keyframes headerDrop{
  0%{
    opacity:0;
    transform: translateY(-20px);
  }
  100%{
    opacity:1;
    transform: translateY(0);
  }
}

/* 헤더 본체 */
.header-wrap {
  height: 64px;
  width: 35%;
  min-width: 800px;
  background: rgba(18, 18, 18, 0.8); 
  border-radius: 12px;
  border: 1px solid #eaeaea;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 0 16px;
  margin: 20px 0 0 40px;
  backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 상단 줄: 로고 + 햄버거 */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

}

/* 로고 */
.headA img {
  height: 21px;
  width: auto;
}

/* 데스크탑에서는 햄버거 숨김 */
.headC {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* 메뉴 (데스크탑 가로형) */
.headB {
  margin-left: 24px;
}

.headB ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0 16px 0 0;
}

.headB a {
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
}

.headB a:hover {
  color: #7baaf7;
}

/*헤더 모바일*/
@media (max-width: 767px){

  .header-wrap {
    width: 80%;
    min-width: 0;
    margin: 20px auto 0;
    padding: 15px 8px;
    height: auto;

    display: flex;
    flex-direction: column;   /* 위: header-top / 아래: 메뉴 */
    align-items: stretch;
    justify-content: flex-start;

    border-radius: 12px;      /* 항상 깔끔한 둥근 카드 */
    border: 1px solid #eaeaea;
    background: rgba(18, 18, 18, 0.8);
    overflow: hidden;         /* 안에서만 내용 늘어남 */
  }

  /* 상단 한 줄 */
  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .headA img {
    height: 20px;
	padding-left: 10px;
  }

  /* 모바일에서 햄버거 보이게 */
  .headC {
    display: block;
    font-size: 22px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
  }

  /* 메뉴: 기본은 숨김, 카드 안에서 아래로 펼쳐짐 */
  .headB {
    display: none;          /* slideToggle 대상 */
    width: 100%;
    margin-top: 6px;
  }

  .headB ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
  }

  .headB li {
    width: 100%;
  }

  .headB a {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
  }
}

/*about 페이지:post작성*/
	.aboutA,
	.aboutB {
	padding: 60px 0;
	background: #f3f3f3;
	color: #111;
	}

	.aboutA{
		background: rgb(228, 228, 228);
	}

	.aboutB{
		padding: 60px 0;
		background: #f1f1f1;
		color: #111;
	}

	.aboutA .container,
	.aboutB .container {
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 20px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		align-items: center;
	}

	/* 이미지 박스 */
	.aboutA .photo,
	.aboutB .photo {
		width: 100%;
		height: 350px;
		background-size: cover;
		background-position: center;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	}

	/* 실제 이미지 경로 여기서 변경 가능 */
	.aboutA .photo {
		background-image: url('img/hattie_face.jpg');
	}
	.aboutB .photo {
		background-image: url('img/hattie_vision.jpg');
		opacity: 0.8;
	}

	/* 텍스트 */
	.aboutA .text,
	.aboutB .text {
	padding: 10px;
	}

	.aboutA h2,
	.aboutB h2 {
	margin-top: 0;
	margin-bottom: 14px;
	font-size: 28px;
	font-weight: 800;
	font-family: 'Montserrat', sans-serif;
	}

	.aboutA p,
	.aboutB p {
		font-size: 15px;
		line-height: 1.7;
		color: #2b2b2b;
		margin-bottom: 14px;
	}

	/* MOBILE LAYOUT*/
	@media (max-width: 767px) {
	.aboutA .container,
	.aboutB .container {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0 16px;
	}

	.aboutA .photo,
	.aboutB .photo {
		height: 260px;
	}

	.aboutA h2,
	.aboutB h2 {
		font-size: 22px;
		text-align: center;
	}

	.aboutA p,
	.aboutB p {
		font-size: 14px;
		text-align: center;
	}
}
/* =========================
   Artwork Modal (라이트박스)
   ========================= */
.art-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;                 /* 기본은 숨김 */
  justify-content: center;
  align-items: flex-start;       /* 화면 위쪽에서 시작 */
  padding: 40px 0;
}

/* body에 modal-open 붙었을 때 배경 스크롤 막기 */
body.modal-open {
  overflow: hidden;
}

.art-modal.is-open {
  display: flex;
}

/* 어두운 배경 */
.art-modal-overlay {
  position: fixed;               /* 화면 전체 덮게 */
  inset: 0;
  background: rgba(0,0,0,0.7);
}

/* 모달 박스 */
.art-modal-content {
  position: relative;
  z-index: 1;
  background: #111;
  color: #fff;
  border-radius: 16px;
  padding: 20px;
  max-width: 900px;
  max-height: 90vh;              /* 화면 90% 까지만 */
  width: 90vw;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
  overflow-y: auto;              /* 🔥 모달 안에서 세로 스크롤 */
}

/* 닫기 버튼 */
.art-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #7baaf7;
  font-size: 28px;
  cursor: pointer;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* 이미지 영역 */
.art-modal-image-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.art-modal-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 정보 영역 */
.art-modal-info {
  /* 별도 스크롤 X, 전체 박스(.art-modal-content)가 스크롤 담당 */
}

.art-modal-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-family: 'Montserrat', sans-serif;
}

.art-modal-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #e5e5e5;
}

.art-modal-content {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}

.art-modal-content::-webkit-scrollbar {
  display: none;              /* Chrome/Safari */
}

/* 모바일 레이아웃 */
@media (max-width: 767px) {
  .art-modal {
    align-items: flex-start;
    padding: 40px 0 24px;
  }

  .art-modal-content {
    grid-template-columns: 1fr;
    max-width: 95vw;
    max-height: 85vh;            /* 모바일에선 85vh 정도 */
    padding: 16px;
  }

  .art-modal-title {
    font-size: 18px;
  }

  .art-modal-desc {
    font-size: 14px;
  }
}

	
/* HISTORY TITLE */
.history-title-section {
    text-align: center;
    padding: 40px 0 10px;
    background: #f1f1f1;
}

.history-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #111;
    margin: 10px;
    letter-spacing: 0.05em;

}

/* 모바일 */
@media (max-width: 767px) {
    .history-title {
        font-size: 26px;
    }

    .history-title-section {
        padding: 30px 0 5px;
    }
}

/* 연혁 이미지 영역 */

.history-img-section {
  width: 100%;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  background: #f1f1f1; /* 기존 history 배경 느낌 유지하고 싶으면 사용 */
}

/* 공통 이미지 스타일 */
.history-img {
  width: 100%;
  max-width: 650px;   /* PC에서 너무 커지지 않게 */
  height: auto;
  display: block;
}

/* 모바일 조정 */
@media (max-width: 767px) {
  .history-img {
    width: 80%;
    max-width: 360px;
    padding: 0;
  }
  
  .history-img-section {
    padding: 20px 0;
    overflow-x: hidden;
  }
}
/* ===== 아트워크 공통 레이아웃 ===== */
.artwork-grid {
  padding: 40px 0 60px;
  background: #fff;
  color: #111;
}

.artwork-grid .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== 필터 버튼 ===== */

/* 라디오 숨기기 */
.artwork-grid input[type="radio"] {
  display: none;
}

/* 필터 버튼 줄 */
.art-filter {
  margin-bottom: 60px;
}

.art-filter label {
  display: inline-block;
  padding: 6px 14px;
  margin-right: 6px;
  background: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}

/* 활성 필터 버튼 강조 */
#filter-all:checked      ~ .art-filter label[for="filter-all"],
#filter-cover:checked    ~ .art-filter label[for="filter-cover"],
#filter-drawing:checked  ~ .art-filter label[for="filter-drawing"],
#filter-sketchbook:checked  ~ .art-filter label[for="filter-sketchbook"],
#filter-project:checked  ~ .art-filter label[for="filter-project"] {
  background: #333;
  color: #fff;
}

/* ===== 제목: 필터에 따라 바뀌는 부분 ===== */

.artwork-titles {
  margin-bottom: 16px;	
  font-family: 'Montserrat', sans-serif;
}

/* 기본은 다 숨김 */
.art-title {
  display: none;
  font-size: 1.6rem;
  margin: 0;
  text-align: left;
}

/* 필터 상태에 따라 하나만 보이게 */
#filter-all:checked      ~ .artwork-titles .art-title-all { display: block; }
#filter-cover:checked    ~ .artwork-titles .art-title-cover { display: block; }
#filter-drawing:checked  ~ .artwork-titles .art-title-drawing { display: block; }
#filter-sketchbook:checked  ~ .artwork-titles .art-title-sketchbook { display: block; }
#filter-project:checked  ~ .artwork-titles .art-title-project { display: block; }

/* ===== 작품 그리드 ===== */

	/* PC: 3x3 */
	.artwork-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.artwork-list article {
		width: 100%;
		aspect-ratio: 1 / 1;      /* 정사각형 */
		background: #e3e3e3;      /* 와이어프레임용 연회색 */
		border-radius: 6px;
		overflow: hidden;
	}

	.artwork-list img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 더보기 버튼 */
	.artwork-more {
		text-align: center;
		margin-top: 22px;

	}

	.btn-more {
		display: inline-block;
		padding: 6px 24px;
		background: none;
		color: #333;
		text-decoration: none;
		font-size: 0.9rem;
		border: solid 1px;
		border-radius: 4px;
	}

	.artwork-more a:hover{
		background-color: #7baaf7;
		color: #fff;
		transition: background .2s ease;
	}

	/* ===== 실제 필터링 로직 (이미지 show/hide) ===== */

	/* ALL */
	#filter-all:checked ~ .artwork-list article {
	display: block;
	}

	/* COVER */
	#filter-cover:checked ~ .artwork-list article {
	display: none;
	}
	#filter-cover:checked ~ .artwork-list article[data-cat*="cover"] {
	display: block;
	}

	/* DRAWING */
	#filter-drawing:checked ~ .artwork-list article {
	display: none;
	}
	#filter-drawing:checked ~ .artwork-list article[data-cat*="drawing"] {
	display: block;
	}

	/* Sketchbook */
	#filter-sketchbook:checked ~ .artwork-list article {
	display: none;
	}
	#filter-sketchbook:checked ~ .artwork-list article[data-cat*="sketchbook"] {
	display: block;
	}

	/* PROJECT */
	#filter-project:checked ~ .artwork-list article {
	display: none;
	}
	#filter-project:checked ~ .artwork-list article[data-cat*="project"] {
	display: block;
	}


	.artwork-grid input[type="radio"] {
  		position: absolute;
  		left: -9999px;
	}

	/* ===== 모바일: 1열 그리드 ===== */
	@media (max-width: 767px) {
	.artwork-list {
		grid-template-columns: 1fr;   /* 1자형 */
	}

	.art-title {
		font-size: 2rem;
	}

	/* 필터 버튼: 한 줄씩 크게, 터치하기 쉽게 */
	.art-filter {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0 0 20px 0;
	}

	.art-filter label {
		width: 100%;
		text-align: center;
		padding: 10px 14px;   /* PC보다 살짝 더 높이 */
		font-size: 15px;
		border-radius: 6px;
		box-sizing: border-box;
	}
}
/* ===== 아트워크 레이아웃 끝 ===== */

/*news*/
	.page-title{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 100vh;
		background-position: center;
		background-size: cover;
		text-align: center;
		color: #000000;
		height: 250px;
		min-height: 0;
	}

	.page-title h1{
		margin-top: 80px;
		margin-bottom: 5px;
		font-family: 'Knewave',sans-serif;
		font-weight: 400;
		text-shadow: 2px 2px 0 #000, 4px 4px 0 #000;
		letter-spacing: 0.2em;	
		margin-left: 0.2em;
		font-size: 4vw;
  		color: #7baaf7

	}

	.page-title p{
		margin-top: 0;
		margin-bottom: 0;
		font-size: 16px;
	}

	@media (min-width: 768px) {
		.page-title{
			font-size: 115px;
		}

		.page-title p {
			font-size: 24px;
		}
	}

	.news{
		padding: 30px 0 60px;
		background:#fff;
		color:#111;
	}

	.news .container{
		max-width: var(--large-width, 1000px);
		margin: 0 auto;
		padding: 0 16px;
	}



	/* 작은 상단 타이틀 */

	.news-kicker{
		font-size: 22px;
		font-weight: 700;
		letter-spacing: .1em;
		color:#000000;
		margin: 8px 16px;
	}

	/* 카드 */
	.news-card{
		display: grid;
		grid-template-columns: 320px 1fr; /* 좌 이미지, 우 텍스트 */
		gap: 24px;
		border: 2px solid #e5e5e5;
		border-radius: 8px;
		padding: 16px;
		background:#fff;
		margin-bottom: 24px;
		transition: box-shadow .2s ease, transform .2s ease;
	}
	.news-card:hover{
		box-shadow: 0 6px 24px rgba(0,0,0,.08);
		transform: translateY(-2px);
	}

	/* 왼쪽 이미지 */
	.news-card .thumb{
		display:block;
		width: 100%;
		aspect-ratio: 16 / 9;   /* 와이어프레임처럼 가로형 썸네일 */
		border-radius: 6px;
		overflow: hidden;
		background-size: cover;
		background-position: center;
	}

	/* 오른쪽 텍스트 */
	.news-card .meta{ 
		display:flex;
		flex-direction:column; 
		gap:10px; 
	}
		
	.news-card .headline{
		margin: 6px 0 4px;
		font-size: 20px;
		font-weight: 800;
	}
	.news-card .headline a{ 
		color:inherit; 
		text-decoration:none; 
	}
	.news-card .headline a:hover{ 
		text-decoration:underline; 
	}

	.news-card .summary{
		margin:0;
		color:#555;
		line-height: 1.7;
		font-size: 15px;
	}

	.news-card .btn{
		align-self:flex-start;
		padding: 8px 0;
		color:#777	; 
		text-decoration:none; 
		font-weight:700;
		transition: background .2s ease;
	}
	.news-card .btn:hover{ 
		color: #7baaf7;
	}

	/* 하단 중앙 버튼 */
	.news-more{
		display:flex; 
		justify-content:center; 
		margin-top: 20px;
		padding: 20px 0;
	}
	.news-more .btn.ghost{
		color: #7baaf7;
		border: 3px solid #7baaf7;
		padding: 10px 20px;
		border-radius: 6px;
		font-weight: 600;
		text-decoration: none;
		transition: background .2s ease;
	}
	.news-more .btn.ghost:hover{ 
		background:#7baaf7;
		color: #fff; 
	}

	/* ========== 반응형 ========== */
	@media (max-width: 767px){
	.news-card{
		grid-template-columns: 1fr; /* 위 이미지, 아래 텍스트 */
		gap: 12px;
		padding: 12px;
	}
	.news-card .thumb{ aspect-ratio: 3 / 2; }
	.news-card .headline{ font-size: 18px; }
	.news-card .summary{ font-size: 14px; line-height: 1.6; }
	}
	
	
	/*뉴스 B*/
	.newsB {
	padding: 60px 0;
	background: #fafafa;
	color: #111;
	}

	.newsB .container {
		max-width: var(--large-width, 1000px);
		margin: 0 auto;
		padding: 0 16px;
	}

	/* 소제목 */
	.newsB-kicker {
		font-size: 14px;
		font-weight: 700;
		letter-spacing: .08em;
		color: #8e8e8e;
		margin: 8px 0 24px;
	}

	/* 그리드 */
	.newsB-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;

	}

	/* 카드 */
	.newsB-card {
		background: #444;
		border: 0px solid;
		color: #ffffff;
		border-radius: 8px;
		overflow: hidden;
		transition: box-shadow .25s ease, transform .25s ease;
		box-shadow: 0 15px 15px rgba(0,0,0,0.2);
	}
	.newsB-card:hover {
		transform: translateY(-3px);
	}

	.newsB-card .thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	}

	.newsB-card h3 {
	margin: 12px 16px 16px;
	font-size: 17px;
	line-height: 1.4;
	font-weight: 700;
	}
	.newsB-card h3 a {
	color: inherit;
	text-decoration: none;
	}
	.newsB-card h3 a:hover {
	text-decoration: underline;
	}

	/* 하단 버튼 */
	.newsB-more {
	display: flex;
	justify-content: center;
	margin-top: 32px;
	}
	.newsB-more .btn.ghost {
	color: #7baaf7;
	border: 3px solid #7baaf7;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease;
	}
	.newsB-more .btn.ghost:hover {
	background: #7baaf7;
	color: #fff;
	}

	/* ========== 반응형 ========== */
	@media (max-width: 767px) {
	.newsB-grid {
		grid-template-columns: 1fr; /* 모바일: 한 줄씩 */
		gap: 16px;
	}
	.newsB-card h3 {
		margin: 10px 12px 14px;
		font-size: 16px;
	}
}

/*뉴스 B 끝*/
/*어바웃, 뉴스 제목(?) 공통 모바일*/
@media (max-width: 767px) {
	.page-title h1{
		font-size: 14vw;
		color: #7baaf7;
	}
}

/*문의페이지:문의 대상*/

.contact-hero {
  position: relative;
  width: 100%;
  height: 100vh;                /* 화면 꽉 차게 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 배경 이미지 */
.contact-bg {
  position: absolute;
  inset: 0;
  background: url('img/Hattie_studio.jpg') center/cover no-repeat;
  z-index: 1;
}

/* 반투명 오버레이 박스 */
.contact-overlay {
  position: relative;
  z-index: 2;
  background: rgba(18, 18, 19, 0.6);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 24px 28px;

  width: 70%;          /* 전체 화면의 90% */
  max-width: 420px;    /* 하지만 420px 이상 커지지 않음 */
  margin: 0 auto;      /* 가운데 정렬 */
	
  box-shadow: 0 10px 30px rgba(0,0,0,0.9);
}

/* 폼 요소 */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-form h2 {
  font-size: 28px;
  margin: 0;
  color: #ffffff;
}
.contact-form p {
  font-size: 15px;
  color: #a8a8a8;
  margin-bottom: 12px;
}

.contact-form label {
  font-weight: 600;
  font-size: 14px;
  color: #e0e0e0;
}
.contact-form input,
.contact-form textarea {
  width: 90%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #000000;
  font-size: 14px;
  resize: none;
  background-color: #e6e6e6;
}
.contact-form textarea {
  height: 70px;
}

.contact-form button {
  background-color: #111;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  transition: background .3s;
}

.contact-form button:hover {
  background-color: #dddddd;
}

/* ======================
   반응형: 모바일
   ====================== */
@media (max-width: 767px) {
  .contact-overlay {
    width: 70%;
    padding: 20px 16px;
    text-align: left;
  }
  .contact-form h2 { 
   font-size: 22px; 
 }
  .contact-form input, .contact-form textarea {
    font-size: 13px;
  }

  .contact-form textarea {
  height: 40px;
}
}

/*pptx*/
.pptx {
	background-color: #66CBE5;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
	}
	
	.pptx video {
	width: 100%;
	position: center;
	margin-top: 120px;
	}

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