@charset "UTF-8";

/* =========================================================
   1. 레이아웃 및 본문 기본 스타일
   ========================================================= */
.about_text {
  max-width: 900px;
  margin-bottom: 80px;
  color: #2e2e2e;
  font-size: 16px;
}
.pageContainer {
  max-width: 1400px;
}
.pageItem {
  padding: 0px 15px 0;
}
.grid {
  grid-template-columns: 1fr 0.5fr;
  grid-gap: 65px;
  align-items: start;
}
.about_right {
  line-height: 1.6;
}
.about_Name {
  font-size: 23px;
  color: #000;
  line-height: 130%;
  margin: 20px 0 5px;
}
.works_years {
  font-size: 18px;
  padding-bottom: 15px;
}
.works_code {
  font-size: 14px;
  color: #b2b2b2;
}
.about_text {
  font-size: 14px;
  margin-bottom: 10px;
}
.m9-grid-block .m9-margin-height-1 {
  font-size: 16px !important;
  margin-top: 0;
  margin-bottom: 0;
}
.about_right .m9-column-1 p {
  font-size: 14px !important;
  color: #2e2e2e;
}
.works {
  grid-gap: 35px 25px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.works img {
  height: auto;
  aspect-ratio: 1/0.7;
}

/* =========================================================
   2. Swiper 슬라이드 및 슬라이더 스타일
   ========================================================= */
.swiper {
  height: auto;
  margin-bottom: 30px;
  width: 100% !important;
  margin: 0px 0 0;
}
.swiper-slide {
  width: 100% !important;
  height: auto;
  max-height: calc(100dvh - 200px);
}
.image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.swiper-wrapper {
  height: 100% !important;
}
.swiper-slide img {
  display: block;
  margin: 0 auto;
  width: 100%;
  object-fit: contain;
  max-height: calc(100dvh - 200px);
}
.swiper-slide:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  z-index: -1;
  transition: all .3s;
}
.swiper-slide.off:before {
  opacity: 1;
  z-index: 10;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  color: #e5e5e5;
}
.swiper-navigation-icon, .swiper-pagination {
  display: none;
}
.mov_con {
  height: 500px;
}
.works_info_container {
  width: 900px;
  margin: 0 auto;
  padding-top: 65px;
  max-width: -webkit-fill-available;
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  grid-gap: 50px;
}
.aboutThework, p {
  margin-block-start: 0;
  margin-block-end: 0;
}
.aboutThework {
  font-size: 18px;
}
.m9-grid-block .m9-grid-1>.m9-column-1, .m9-grid-block .m9-grid-2>.m9-column-2, .m9-grid-block .m9-grid-3>.m9-column-3, .m9-grid-block .m9-grid-4>.m9-column-4, .m9-grid-block .m9-grid-5>.m9-column-5, .m9-grid-block .m9-grid-6>.m9-column-6 {
  margin: 0;
}
.page_header3_Right {
  width: 100%;
  text-align: right;
}
.text_title {
  margin: 20px 0 0;
  line-height: 150%;
  font-size: 15px;
}
.topMenu {
  margin-top: 30px;
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  grid-gap: 45px;
  align-items: center;
}
.worksCateText {
  color: #b2b2b2;
}
.section_title {
  margin: 0px 15px 30px;
}

/* =========================================================
   3. Read More 더보기 컴포넌트 (기본 높이 500px 복구)
   ========================================================= */
.read-more-container {
  position: relative;
  margin: 0 0 20px auto;
  width: 100%;
}

.content-box {
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🌟 기본 노출 높이 500px 복원 */
.content-box.is-collapsed {
  max-height: 500px;
}

/* 닫혀 있을 때 아래쪽 그라데이션 */
.read-more-container.is-collapsed-wrap::after,
.content-box.is-collapsed.has-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.read-more-container.is-expanded-wrap::after {
  opacity: 0;
}

.toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  padding: 12px 0 6px 0;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.toggle-button:hover {
  color: #666;
}


/* =========================================================
   4. 탭(Tabs) 컴포넌트
   ========================================================= */
.tabs {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 30px;
}
.tabs_btnBox {
  width: 100%;
  display: flex;
}
.tabs_btnBox .tabLabel {
  flex: 1;
  text-align: center;
}
input[type="radio"] {
  display: none;
}
.tabLabel {
  padding: 15px 15px;
  background: transparent;
  cursor: pointer;
  border-bottom: 1px solid #d3d3d3;
  margin-right: -1px;
  flex-grow: 1;
  text-align: center;
  font-size: 16px;
  color: #838383;
}
.TabsContent {
  display: none;
  width: 100%;
  padding: 50px 0px;
  order: 1;
}
input[type="radio"]:checked + label {
  background: #fff;
  color: #838383;
  border-bottom: 1px solid #d3d3d3;
  transition: .5s all;
}
.tabs:has(#tab1:checked) label[for="tab1"],
.tabs:has(#tab2:checked) label[for="tab2"],
.tabs:has(#tab3:checked) label[for="tab3"],
.tabs:has(#tab4:checked) label[for="tab4"],
.tabs:has(#tab5:checked) label[for="tab5"],
.tabs:has(#tab6:checked) label[for="tab6"] {
  background: #fff;
  color: #000;
  border-bottom: 1px solid #000;
  transition: .5s all;
}
#tab1:checked ~ .con1,
#tab2:checked ~ .con2,
#tab3:checked ~ .con3,
#tab4:checked ~ .con4,
#tab5:checked ~ .con5,
#tab6:checked ~ .con6 {
  display: block;
}
.con1, .con2, .con3, .con4 {
  width: 800px;
  margin: 0 auto;
}
.con5, .con6 {
  width: 100%;
  margin: 0 auto;
}
.moItem {
  display: none;
}
.tabItemList {
  display: grid;
  margin-bottom: 3px;
}
.tabItemList h5 {
  font-size: 16px;
  margin: 0;
  line-height: 130%;
  margin-bottom: 5px;
  font-weight: 400;
}
.tabItemList p {
  font-size: 14px;
  line-height: 150%;
  color: #7f7f7f;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tabListYear {
  font-weight: 400;
}
.litItem {
  margin-bottom: 5px;
}
.worksPre {
  font-family: 'Inter', 'Noto sans KR', sans-serif;
  font-size: 16px;
  line-height: 170%;
  margin: 0;
}

/* =========================================================
   5. 모달 팝업 트리거 & 스타일 (스퀘어 디자인)
   ========================================================= */
.prov-modal-trigger, .ex-modal-trigger, .lit-modal-trigger {
  color: #111111;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.prov-modal-trigger:hover, .ex-modal-trigger:hover, .lit-modal-trigger:hover {
  color: #a0a0a0;
}

.prov-detail-modal-overlay, .ex-detail-modal-overlay, .lit-detail-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.prov-detail-modal-card, .ex-detail-modal-card, .lit-detail-modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 500px;
  border-radius: 0px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: modalFadeIn 0.2s ease-out;
  border: 1px solid #111111;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.prov-detail-modal-header, .ex-detail-modal-header, .lit-detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.prov-detail-modal-header h4, .ex-detail-modal-header h4, .lit-detail-modal-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.prov-detail-modal-close, .ex-detail-modal-close, .lit-detail-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0;
}
.prov-detail-modal-close:hover, .ex-detail-modal-close:hover, .lit-detail-modal-close:hover {
  color: #0f172a;
}

.prov-detail-modal-body, .ex-detail-modal-body, .lit-detail-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}

.prov-modal-row, .ex-modal-row, .lit-modal-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.prov-modal-row.vertical, .ex-modal-row.vertical, .lit-modal-row.vertical {
  flex-direction: column;
  gap: 6px;
}

.prov-modal-label, .ex-modal-label, .lit-modal-label {
  min-width: 75px;
  font-weight: 600;
  color: #64748b;
  font-size: 12px;
}

.prov-modal-val, .ex-modal-val, .lit-modal-val {
  color: #1e293b;
  line-height: 1.5;
  word-break: break-all;
}
.prov-modal-val.title-val, .ex-modal-val.title-val, .lit-modal-val.title-val {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
}
.prov-modal-val a, .ex-modal-val a, .lit-modal-val a {
  color: #000;
  text-decoration: none;
}
.prov-modal-val a, .ex-modal-val a, .lit-modal-val a:hover {
  color: #a0a0a0;
}

.prov-modal-summary-box, .ex-modal-summary-box, .lit-modal-summary-box {
  width: 100%;
  padding-top: 12px;
  border-radius: 0px !important;
  color: #334155;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =========================================================
   6. 🌟 아코디언 메뉴 스타일
   ========================================================= */
.accordion-container {
  margin: 0 auto;
  margin-top: 50px;
}
.accordion-item {
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
.accordion-header {
  width: 100%;
  padding: 15px 0;
  cursor: pointer;
  border: none;
  outline: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #d3d3d3;
  transition: all 0.2s ease;
  background: #fff;
  font-family: 'Inter', 'Noto sans KR', sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-header:hover {
  border-bottom: 1px solid #000;
}
.accordion-content {
  display: none; /* 👈 초기 닫힘 상태 */
  background-color: #fff;
  padding: 15px 0;
}
.acco_Item2 {
  font-size: 14px;
  line-height: 1.8;
  color: #4b5563;
  margin: 0;
}
.worksInfo {
  text-align: center;
  margin-top: 50px;
  color: #8d8d8d;
}
.worksInfo a {
  color: #8d8d8d;
  transition: all .2s;
}
.worksInfo a:hover {
  color: #000;
}

/* =========================================================
   7. 모바일 반응형 미디어 쿼리
   ========================================================= */
@media screen and (max-width: 764px) {
  .pageItem {
    padding: 50px 0;
  }
  .section_title {
    font-size: 30px;
    margin: 60px 15px 30px;
  }
  .grid {
    grid-template-columns: 1fr;
    grid-gap: 5px;
  }
  .about_Name {
    font-size: 17px;
  }
  .m9-grid-block .m9-margin-height-1 {
    font-size: 17px !important;
  }
  .about_text {
    display: block !important;
    margin-top: 0;
    margin-bottom: 40px;
  }
  .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
  .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    font-size: 18px;
  }
  .swiper-slide, .swiper-slide img {
    max-height: 500px;
  }
  .pageContainer {
    padding: 120px 15px 0px;
  }
  .swiper {
    height: auto;
    margin-bottom: 30px;
    width: 100% !important;
    margin-top: 0;
  }
  .works_info_container {
    padding-top: 30px;
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
  .aboutThework {
    font-size: 20px;
  }
  .works {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    gap: 25px;
  }
  .works img {
    height: 150px;
  }
  .mov_con {
    margin-bottom: 30px;
  }
  .page_header3_Right {
    padding: 0px 0px 15px;
  }
  .topMenu {
    margin-top: 0px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
  .tabs_btnBox {
    flex-wrap: wrap;
  }
  .tabs_btnBox .tabLabel {
    flex: auto;
    width: 33.333%;
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    padding: 12px 5px;
  }
  .con1, .con2, .con3, .con4, .con5, .con6 {
    width: 100%;
  }
}