/*8888 4000줄 넘는 토글있고 디자인은 이대로인 css*/



::selection {
  background: #9dff91;
  color: #ff9393;
}



:root {
  --font: "Pretendard", sans-serif;
}

html, body {
  font-family: "Pretendard Variable", sans-serif !important;

}
html { 
    height: auto;
    width: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    width: 100%;
}

/*=====================TOP BAR=====================*/
.top-bar {
  background:#ffffff;
  border-bottom:1px solid #000;
  height: 80px;
  display:flex;
  align-items:center;
  padding: 0;  /* ✔ 여백 모두 제거 */
}

.top-inner {
  width: 100%;
  max-width: none;     /* ✔ 1600px 제한 제거 */
  margin: 0;           /* ✔ auto 중앙정렬 제거 */
  padding: 0 50px;     /* ✔ 좌우 20px 정도만 남기기 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.top-logo {
  text-decoration: none;
  color: #111;
  font-size: 28px;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 100%; 
  margin-left: 0px; 
  margin-right: 350px;
}

.top-menu {
  display: flex;
  flex: 1;                     /* 메뉴 영역이 전체를 차지 */
  justify-content: space-between; /* ABOUT–COLLECTIONS–CONTACT 자동 균등 간격 */
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-weight: 300;
  align-items: center;
}

.top-link{
    text-decoration:none;
    color:#444;
    padding: 0;          
    display: flex;        
    align-items: center;
    height: 100%;
    letter-spacing: 0.20em;
}

.top-link:hover{
    color:#777;
}

.top-item{
    position:relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.dropdown{
  position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:110%;               
    min-width:260px;
    background:#ffffff;
    border:1px solid #3a3a3a;
    display:none;
    z-index: 9999;
}
.top-item:hover .dropdown{
    display:block;
}
.dropdown-item {
    display: block;
    padding: 20px 25px;
    font-size: 12px;
    color: #444;
    text-decoration: none;
    border-top: 1px solid #3a3a3a;
    background: #fafafa;
}
.dropdown-item:first-child {
    border-top: none;
}
.dropdown-item:hover {
    background:#eee;
}
.dropdown-item--disabled {
    color:#555;
    cursor:default;
    opacity: 1 !important;  
}
.dropdown-item:hover:not(.dropdown-item--disabled){
    background:#eee;
}

/* ================== SUB HEADER ================== */
.sub-header {
  width: 100%;
  padding: 0 50px;
  font-size: 24px;
  font-weight: 350;
  border-bottom: 1px solid #000;
  background: #ffffff;
  letter-spacing: 0.05em;
  height: 80px;
  display: flex;
  align-items: center;
}



/*=====================ABOUT PAGE=====================*/
.about-layout{
    display:flex;
    height:calc(100vh - 48px);
}
.about-left{
    flex:0 0 40%;
    border-right:1px solid #d0d0d0;
    background:#f4f4f4;
}
.about-left img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.about-right{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 80px;
}
.about-text{
    max-width:60%;
    font-size:30px;
    line-height:1.8;
    color:#000;
    transform:translateY(0);
    transition:transform 0.35s ease;
}
.about-text.slide-out{
    transform:translateY(40px);
}

/*=====================ARTWORK LIST (listB)=====================*/
.listB{
    padding:80px 0 120px;
    border-top:1px solid #e1e1e1;
}
.listB>h1{
    max-width:1200px;
    margin:0 auto 40px;
    padding:0 24px;
    font-size:12px;
    letter-spacing:0.35em;
    font-weight:400;
    text-transform:uppercase;
    color:#999;
}
.listB article:nth-child(odd){
    grid-column:1/2;
}
.listB article:nth-child(even){
    grid-column:2/3;
}
.listB .photo{
    width:100%;
    padding-top:70%;
    background-size:cover;
    background-position:center;
    background-color:#e5e5e5;
}
.listB .text{
    margin-top:12px;
}
.listB .text h2{
    margin:0;
    font-size:14px;
    font-weight:400;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#666;
    transition:color 0.25s ease;
}
.listB .text p{
    margin-top:4px;
    font-size:12px;
    line-height:1.6;
    color:#999;
}
.listB article:hover .text h2{
    color:#9bd48a;
}



/* ================= HERO 메인================= */

/* 왼쪽 텍스트 */
.hero-left {
  width: 700px;          /* ← 핵심: 고정 폭으로 변경 */
  padding-left: 100px;
  padding-right: 10px;
  margin-top: -20px;
  position: relative;
  z-index: 10;
}

.hero-left h1 {
  font-size: 80px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;

}



.hero-right {
  flex: 1;               /* ← 핵심: 50% 제거, 자동 확장 */
  display:flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
}


/* 실제 이미지 */
.hero-img-real {
  width: 50%;
  height: auto;
  object-fit: contain;   
  display: block;
  justify-content: start;
}

.hero {
  width: 100%;
  height: 800px;
  padding: 20px;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
}



.hero-maintext {
  font-size: 80px;      
  line-height: 1.2;
  font-weight: 600;
  word-break: keep-all;
}

.fixed-hero {
  width: 40%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.fixed-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;   
  background: #f8f8f8;   
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    filter 0.6s ease,
    transform 0.6s ease,
    opacity 0.6s ease;
}



/* Hover layer */
.hero-hover {
  position: absolute;
  inset: 0;
  opacity: 0;    
  background: rgba(255,255,255,0.0); /* 💥 흰색을 조금 더해 흐림 강조 */
  transition: opacity .35s ease;
  pointer-events: none;
  
}


.hero-img-wrap:hover .hero-img {
 filter:
    blur(30px)          /* 핵심: 강한 블러 */
    brightness(1.3)    /* 잔상처럼 밝기 증가 */
    contrast(1.1)
    saturate(1.25);     /* 색감 유지 + 퍼진 색 표현 */
  
  opacity: 0.55;        /* 잔상 느낌을 위해 흐림 */
  transform: scale(1.20); /* 살짝 확대되어 퍼짐 효과 강화 */
}

.hero-img-wrap:hover .hero-hover {
  opacity: 1;

}

.hover-title {
  font-size: 26px;
  color: #fff;
  transition: color .25s;
}

.hover-title:hover {
  color: #9bed79;  /* 포인트 색상 */
}

.hover-sub {
  font-size: 13px;
  margin-top: 6px;
  color: #ddd;
}

/* ================= HERO 아래 얇은 구분선 ================= */
.hero-divider {
  width: 100%;
  border-top: 1px solid #000;
  margin: 40px 0 0;
}


/* =========================================================
   COLLECTION DETAIL — 2번 이미지 100% 동일 레이아웃
========================================================= */

/* ---------- 상단 COLLECTION BAR ---------- */
.collection-bar {
  width: 100%;
  padding: 12px 20px;
  border-bottom: 1px solid #000;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #777;
  background: #fafafa;
}

/* 전체 페이지 */
.artwork-page {
  width: 100%;
  margin: 0;
  padding: 0;
}

.artwork-grid {
  width: 100%;
}

/* ---------- ROW ---------- */
.art-row {
  display: flex;
  width: 100%;
  min-height: 260px;   
  border-top: 1px solid #000;
}

.art-row:last-child {
  border-bottom: 1px solid #000;
}

/* ---------- LEFT (IMAGE 50%) ---------- */
.art-left {
  width: 50%;
  border-right: 1px solid #000;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.art-img-box {
  width: 100%;
  max-width: 336px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.art-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- RIGHT (TEXT 50%) ---------- */
.art-right {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

/* ---------- category 제거 ---------- */
.art-category {
  display: none !important;
}

/* ---------- 제목 + 사이즈 라인 ---------- */
.art-title-line {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #000;
}

.art-title {
  flex: 1;
  font-size: 17px;
  font-weight: 500;
  color: #000;
}

.art-size {
  white-space: nowrap;
  font-size: 14px;
  border-left: 1px solid #000;
  padding-left: 10px;
  margin-left: 10px;
}

/* ---------- Medium 텍스트 ---------- */
.art-medium {
  font-size: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #000;  
}

/* ---------- 설명 ---------- */
.art-description {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  margin-top: 8px;
}

/* ---------- 짝수 행 반전 ---------- */
.art-row:nth-child(even) {
  flex-direction: row-reverse;
}

.art-row:nth-child(even) .art-left {
  border-right: none;
  border-left: 1px solid #000;
}


/*=========================================================
   EXHIBITION
=========================================================*/
.exhibition{
    margin-top:160px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}
.exhibition img{
    width:100%;
    display:block;
}


/*=========================================================
  ABOUT PAGE — 최종 정리본
=========================================================*/

/* 전체 리스트 박스 */
.menu-list {
  width: 650px;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-bottom: none;
  font-family: inherit;
}

/* 각 그룹(항목 1개 + 내용박스) */
.menu-item {
  border-bottom: 1px solid #cfcfcf;
}

/* 제목 줄 */
.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 10px 26px;
  background: #fff;
  cursor: pointer;
}

.menu-row span {
  font-size: 25px;
  color: #b8b8b8;
  font-weight: 400;
  transition: color .25s ease;
}

/* hover 시 title 색 */
.menu-row:hover span {
  color: #000;
}

/* ACTIVE (선택된) 메뉴 강조용 */
.active-title {
  font-weight: 600;
  color: #000 !important;
}

/* + 버튼 */
.plus-btn {
  font-size: 50px;
  text-decoration: none;
  transition: opacity .25s ease;
  opacity: 0;
}

/* 행 hover 시 + 버튼도 검정 */
.menu-row:hover .plus-btn {
  color: #000;
  opacity: 1;
}

/* 메뉴 열릴 때 + 유지 */
.menu-item .content-box.show ~ .menu-row .plus-btn,
.menu-item .content-box.show .plus-btn {
  color: #000;
}


/* 메뉴 열릴 때 제목 글자 검정 유지 */
.menu-item.active .menu-row span {
  color: #000 !important;
  font-weight: 600;
}

/* 열릴 때 + 버튼도 항상 보이게 */
.menu-item.active .plus-btn {
  opacity: 1 !important;
  color: #000 !important;
}



/* 내용 박스(토글) */
.content-box {
  background: #fff;
  border-top: 1px solid #cfcfcf;
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  transition: max-height .3s ease, padding .3s ease;
}

/* 열릴 때 */
.content-box.show {
  max-height: 260px;
  padding: 20px 22px;
}

/* 내용 텍스트 */
.content-box p {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  color: #333;
}

/* 왼쪽 이미지 or 영상 */
.about-left img,
.about-left video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-left {
  flex: 0 0 40%;
  border-right: 1px solid #d0d0d0;
  background: #f4f4f4;
}

.about-layout {
  display: flex;
  height: calc(100vh - 48px);
}

.about-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 80px;
}



.info-box a {
    color: #333;
    text-decoration: underline;
}



/* ================== CONTACT SECTION ================== */
/* 회색 지도 */
.contact-map iframe {
  width: 100%;
  height: 740px;
  border: none;
  filter: grayscale(100%) brightness(0.75);
}



.contact-map {
  width: 100%;
  height: 740px;
  position: relative;
}


.contact-section {
 position: relative;
 width: 100%;
 min-height: 600px;
 height: auto; 
}


/* 떠 있는 오른쪽 패널 */
.contact-panel {
  position: absolute;
  top: 50%;
  right: 40px;
  width: 600px;
  border: 1px solid #000000;   
  background: #fff;
  transform: translateY(-50%);
}

/* 내부 박스들 */
.info-box {
  padding: 10px 26px;
  font-size: 20px;
  /*line-height: 1.7;*/
  color: #0c0c0c;
  border-bottom: 1px solid #0c0c0c; 
}



.info-box:last-child {
  border-bottom: none;
}



.info-title {
  font-size: 20px;     
  /*font-weight: 600;*/
  margin-bottom: 6px;
  text-transform: uppercase;
  border-bottom: 1px solid #000;
  padding-bottom: 4px;
  
}

.info-subtitle {
  font-size: 20px;
  /*font-weight: 700;*/
  margin-bottom: 6px;
  text-transform: uppercase;
  /*border-bottom: 1px solid #000;*/
  padding-bottom: 4px;

}


.info-box a {
  font-size: 15px;
  color: #33ea00; /* 링크 색상 */
  text-decoration: underline; 
}

/* <br><br> 줄 간격 정리용 */
.info-box br {
  content: "";
  display: block;
  margin-bottom: 6px;
}

.info-box p {
  margin-top: 8px;
  margin-bottom: 0;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  font-size: 12px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #000;
}

.footer-icons {
  display: flex;
  gap: 18px;
  margin-bottom: 8px;
}

.footer-icons a {
  color: #000;
  font-size: 20px;
}

.footer-icons a:hover {
  color: #777;
}
.footer-divider {
  width: 100%;
  border-top: 1px solid #000;
  margin: 8px 0 16px 0;
}




/* ================= GREEN SECTION ================= */

.green-section {
  width: 100%;
  padding: 80px 0;
  background: #9dff9a;     
}

.green-inner {
  width: 86%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.green-left {
  width: 26%;
  font-size: 20px;
  line-height: 1.6;
}

.green-center {
  width: 26%;
  font-size: 20px;
  line-height: 1.5;
  margin-top: 0;
  
}

.green-right {
  width: 32%;
}

.green-right img {
  width: 100%;
  height: 600px;
  display: block;
  object-fit: cover;
}

.green-left h4 {
  margin-top: 0;
}


/* ================= BLACK SECTION ================= */
.black-section {
  width: 100%;
  background: #29282a;
  padding: 60px 0;
}

.black-inner {
  width: 86%;
  margin: 0 auto;
  display: flex;
 justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* LEFT (TEXT) */
.black-left {
  width: 42%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.black-left img {
  width: 80%;                   
  height: auto;
  display: block;
  object-fit: contain;
  object-fit: cover;
  margin-top: 0;              
}

/* 오른쪽: 텍스트 */
.black-right {
  width: 42%;
  color: #fff;
             
}

.black-right h2 {
  font-size: 25px;
  letter-spacing: 0.12em;
  margin-bottom: 11px;
  font-weight: 600;
  margin-top: 0;
}

.black-right p {
  font-size: 20px;
  line-height: 1.7;
  color: #ccc;
  width: 300px;
  margin-top: 20px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .black-inner {
    flex-direction: column;
    gap: 40px;
  }

  .black-left,
  .black-right {
    width: 100%;
  }

}



/* ==========================================================
   📱 MOBILE GLOBAL (max-width: 768px)
========================================================== */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }


  /* ===== SUB HEADER ===== */
  .sub-header {
    font-size: 15px;
    padding: 12px 20px;
  }


  /* ==========================================================
     ARTWORK PAGE
  =========================================================== */
  .art-row {
    flex-direction: column !important;
  }

  .art-left, .art-right {
    width: 100% !important;
    padding: 18px !important;
  }

  .art-left {
    border-right: none !important;
    border-bottom: 1px solid #000 !important;
  }

  .art-img-box {
    max-width: 92%;
    aspect-ratio: 1/1;
  }

  .art-title {
    font-size: 16px;
  }

  .art-size {
    font-size: 13px;
  }

  .art-medium {
    font-size: 13px;
  }

  .art-description {
    font-size: 13px;
  }

    /* ==========================================================
     HERO SECTION (모바일)
  =========================================================== */
  .hero {
    flex-direction: column;
    padding: 60px 0 40px;
  }

  .hero-left {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 30px;
  }

  .hero-maintext {
    font-size: 32px;
    line-height: 1.3;
  }

  .hero-right {
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: center;
  }

  .fixed-hero {
    width: 100%;
    max-width: 500px;
  }


  /* ==========================================================
     GREEN SECTION
  =========================================================== */
  .green-inner {
    flex-direction: column;
    gap: 40px;
    width: 90%;
  }

  .green-left,
  .green-center,
  .green-right {
    width: 100%;
    font-size: 17px;
    line-height: 1.6;
  }

  .green-right img {
    width: 100%;
    object-fit: cover;
  }


  /* ==========================================================
     BLACK SECTION
  =========================================================== */
  .black-inner {
    flex-direction: column;
    width: 90%;
    gap: 40px;
  }

  .black-left,
  .black-right {
    width: 100%;
  }

  .black-left img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .black-right h2 {
    font-size: 16px;
  }

  .black-right p {
    font-size: 14px;
  }


  /* ==========================================================
     ABOUT PAGE / MENU LIST (모바일)
  =========================================================== */
  .about-layout {
    flex-direction: column;
    height: auto;
  }

  .about-left {
    width: 100% !important;
    height: 300px !important;
    border-right: none;
    border-bottom: 1px solid #d0d0d0;
  }

  .about-right {
    padding: 40px 20px !important;
  }

  .menu-list {
    width: 100%;
  }

  .menu-row span {
    font-size: 16px;
  }

  .plus-btn {
    font-size: 22px;
  }

  .content-box.show {
    max-height: 400px;
  }


  /* ==========================================================
      CONTACT PAGE (모바일)
  =========================================================== */

    .contact-map {
    height: auto !important;
    margin-bottom: 20px !important;
  }


  .contact-panel {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    transform: none;
    border-left: none;
    border-right: none;
  }

  .contact-map iframe {
    height: 300px;
    margin-bottom: 0;
  }

  .info-box {
    font-size: 17px;
  }

  .info-title {
    font-size: 17px;
  }

  .info-subtitle {
    font-size: 17px;
  }


  /* ==========================================================
      FOOTER (모바일)
  =========================================================== */
  .footer-icons a {
    font-size: 18px;
  }

}

/* ==========================================================
   FIX — Center all artwork images
========================================================== */
.art-img-box {
  margin: 0 auto !important;
  display: block !important;
}

/* ==========================================================
   DESKTOP — full-width horizontal borders for each row
========================================================== */
.art-row {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid #000;
}
.art-row:last-child {
  border-bottom: 1px solid #000;
}


/* ---------- 모바일 ---------- */
@media (max-width: 768px) {
  .art-row {
    flex-direction: column;
  }

  .art-left,
  .art-right {
    width: 100%;
    padding: 16px;
  }

  .art-left {
    border-right: none;
    border-bottom: 1px solid #000;
  }

  .art-row:nth-child(even) {
    flex-direction: column;
  }

  .art-row:nth-child(even) .art-left {
    border-left: none;
  }

  .art-img-box {
    max-width: 80%;
  }
}



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

  /* ROW 전체 full-width */
  .art-row {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    border-left: none !important;
    border-right: none !important;

  }

  /* 이미지 영역 */
  .art-left {
    width: 100% !important;
    padding: 18px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }



  /* 텍스트 영역 */
  .art-right {
    width: 100% !important;
    padding: 20px 24px !important;
    border-top: 1px solid #000 !important;
    box-sizing: border-box;
  }

  /* 작품명 + 사이즈 줄바꿈 */
  .art-title-line {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .art-size {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    color: #555;
  }

  /* 내부 border 제거 */
  .art-title-line,
  .art-medium,
  .art-description {
    border-bottom: none !important;
  }

}


/* ============================
   ARTWORK ZOOM ON HOVER
============================ */

/* 확대 준비 */
@media (max-width: 768px) {
.art-img-box {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

/* 이미지 확대 시 부드럽게 */
.art-img-box img {
  transition: transform 0.25s ease-out;
  transform-origin: center center;
}

/* 확대 상태 */
.art-img-box.zoom-active img {
  transform: scale(2.2);
  cursor: zoom-out;
}

/* ============================
   BLUR — 다른 artwork 흐림처리
============================ */
.art-row.blur {
  filter: blur(5px) brightness(1);
  pointer-events: none;
  transition: filter 0.3s ease;
}

/* 확대된 행 blur 제거 */
.art-row.active-row {
  filter: none !important;
  pointer-events: auto;
}
}

/* ==========================================================
   📱 CONTACT PAGE — MOBILE FINAL VERSION (중복 유지)
========================================================== 
@media (max-width: 320px) {

  .contact-section {
    padding: 0;
    margin: 0;
  }

  .contact-map {
    width: 100%;
    height: auto;
  }

  .contact-map iframe {
    width: 100%;
    height: 300px !important;
    filter: grayscale(100%) brightness(0.85);
  }

  .contact-panel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
    margin-top: 0;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #000 !important;
  }

  .info-box {
    padding: 16px 20px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    border-bottom: 1px solid #000 !important;
  }

  .info-box:last-child {
    border-bottom: none !important;
  }

  .info-title,
  .info-subtitle {
    font-size: 15px !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
  }

  .info-title {
    border-bottom: 1px solid #000;
  }

  .info-box a {
    font-size: 14px !important;
  }
}*/


/* ==========================================================
   📱 ABOUT PAGE — MOBILE LAYOUT (중복 유지)
========================================================== */
@media (max-width: 768px) {

  .about-layout {
    flex-direction: column;
    height: 1500px !important;
    width: 100%;
  }

  .about-left {
    width: none !important;
    height: 250px !important;
    border-right: none;
    border-bottom: 1px solid #d0d0d0;
    background: #f4f4f4;
  }

  .about-left img,
  .about-left video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-right {
    width: 100% !important;
    padding: 0 !important;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .menu-list {
    width: 100% !important;
    border-left: none;
    border-right: none;
  }

  .menu-row {
    height: 100px;
    padding: 0 20px;
  }

  .menu-row span {
    font-size: 17px;
    letter-spacing: 0.02em;
  }

  .content-box {
    padding: 0 20px;
  }

  .content-box.show {
    max-height: 380px;
    padding: 18px 20px;
  }

  .content-box p {
    font-size: 14.5px;
    line-height: 1.55;
  }

  .plus-btn {
    font-size: 20px;
  }
}


/* ===================== MOBILE FIX ===================== */

@media (max-width: 768px) {
  .green-inner {
    grid-template-columns: 1fr; /* 1단 구조로 변화 */
    row-gap: 40px;
    text-align: left;
  }

  .green-left p,
  .green-center,
  .green-caption {
    max-width: 100%;
  }

  .green-right img {
    max-width: 100%;
    width: 100%;
  }

  .green-section {
    padding: 60px 20px;
  }
}

@media (max-width: 768px) {
  .green-left h4 {
    font-size: 16px;
  }

  .green-left p {
    font-size: 15px;
    line-height: 1.6;
  }

  .green-center {
    font-size: 20px;
    line-height: 1.4;
  }

  .green-right img {
    width: 100%;
    border-radius: 6px;
  }

  .green-caption {
    font-size: 12px;
  }
}


/* ==========================================================
   📱 HERO IMAGE — MOBILE NO-CROP VERSION
========================================================== */
@media (max-width: 768px) {

  /* HERO 전체 */
  .hero {
    flex-direction: column !important;
    height: autos !important;
    padding: 40px 20px !important;
    overflow: hidden !important;
  }

  .hero-left {
    width: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
  }

  .hero-left h1 {
    font-size: 40px !important;
    line-height: 1.3 !important;
  }

  .hero-right {
    width: 100% !important;
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
  }


 .hero-img-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    height: 340px !important;    /* ★ 레이아웃 고정 */
    overflow: hidden !important; /* ★ 확대해도 밖으로 안 나가게 */
  }
  /* 2) 이미지 자체를 absolute로 띄워서
        확대/블러 되어도 부모 높이에 영향 X */
  .hero-img {
    position: absolute !important; 
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: contain !important;
    transform-origin: center center !important;
    transition: 
      filter 0.3s ease,
      transform 0.3s ease,
      opacity 0.3s ease;
  }

 /* 3) 모바일 hover 효과 — 이미지만 적용, 박스 높이 그대로 유지 */
  .hero-img-wrap:hover .hero-img {
    transform: translate(-50%, -50%) scale(1.15) !important;
    filter: none;
    opacity: 1;
  }

  /* 모바일에서 hover 텍스트는 숨김 */
  .hero-hover {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================
   📱 MOBILE NAV COMPLETE FIX
========================================================== */
@media (max-width: 768px) {

  /* NAV 전체 폭 확보 */
  .top-bar {
    height: 70px !important;
  }

  .top-inner {
    padding: 0 12px !important;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
  }

  /* 로고 WB — 줄바꿈 방지 */
  .top-logo {
    font-size: 15px !important;
    margin-right: 6px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* 메뉴 */
  .top-menu {
    display: flex;
    align-items: center;
    gap: 6px !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
  }

  /* sub-header 위 여백 추가 */
  .sub-header {
    height: 70px !important;          
    padding-top: 10px !important;    
    padding-bottom: 10px !important;
    margin-top: 8px !important;       
  }

  .top-link {
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
  }

  /* 드롭다운 메뉴 크기 축소 */
  .dropdown {
    min-width: 150px !important;
    left: -50% !important;
    transform: none !important;
    top: 100% !important;
    border: 1px solid #000;
  }

  .dropdown-item {
    padding: 12px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }
}

/* ===========================
   MOBILE NAV (햄버거 메뉴)
=========================== */
.mobile-nav-toggle {
  display: none; 
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 10px;
}

.mobile-nav-toggle .m-line {
  width: 26px;
  height: 2px;
  background: #000;
  transition: .3s;
}

/* 햄버거 → X로 변환 */
.mobile-nav-toggle.open .m-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.mobile-nav-toggle.open .m-line:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.open .m-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* 모바일 네비게이션 */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: #fff;
  width: 100%;
  border-top: 1px solid #000;
  position: absolute;
  top: 70px;
  left: 0;
  z-index: 9000;
}

.mobile-nav a {
  padding: 16px 22px;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #e1e1e1;
}

.mobile-nav a:hover {
  background: #f7f7f7;
}

/* 모바일에서만 보이기 */
@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: flex;
  }

  .top-menu {
    display: none !important;
  }

  .mobile-nav {
    display: none;
  }

  .mobile-nav.open {
    display: flex;
  }
}

/* ==========================================================
   📱 MOBILE — max-width 768px (공통 모바일)
========================================================== */
@media (max-width: 768px) {

  body, html {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* ---------- TOP BAR ---------- */
  .top-bar {
    height: 70px !important;
    position: relative !important;  
    display: flex;
    align-items: center;
  }
  .top-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;  /* 로고 왼쪽 유지 */
    padding: 0 14px !important;
    position: relative;
  }

  /* 로고 — 원래 위치 그대로 왼쪽 */
  .top-logo {
    font-size: 15px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    margin-right: auto !important;  /* 햄버거와 겹치지 않게 */
    margin-left: 10px;
  }

  .top-menu {
    display: none !important;
  }

  /* ---------- MOBILE NAV TOGGLE (햄버거 버튼) ---------- */
  .mobile-nav-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;

    /* 🔥 오른쪽 고정 */
    position: absolute !important;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);

    z-index: 9999 !important;
  }

  .mobile-nav-toggle .m-line {
    width: 26px;
    height: 2px;
    background: #000;
    transition: .3s;
  }

  /* 햄버거 → X */
  .mobile-nav-toggle.open .m-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .mobile-nav-toggle.open .m-line:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav-toggle.open .m-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }


  /* ---------- MOBILE NAV MENU ---------- */
  .mobile-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-top: 1px solid #000;

    position: absolute;
    top: 70px;
    left: 0;
    z-index: 9000;
  }

  .mobile-nav.open {
    display: flex !important;
  }

  .mobile-nav a {
    padding: 16px 22px;
    font-size: 16px;
    border-bottom: 1px solid #e1e1e1;
    color: #333;
    text-decoration: none;
  }
}

  /* ---------- ABOUT PAGE ---------- */
  @media (max-width: 768px) {
  .about-layout {
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
  }

  .about-left {
    width: 100% !important;
    height: 260px !important;
    border-right: none !important;
    border-bottom: 1px solid #d0d0d0 !important;
    overflow: hidden !important;
  }

  .about-left img,
  .about-left video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .about-right {
    width: 100% !important;
    padding: 0 20px !important;
  }

  .menu-list {
    width: 100% !important;
    border-left: none !important;
    border-right: none !important;
  }

  .menu-row {
    height: 90px !important;
    padding: 0 20px !important;
  }

  .menu-row span {
    font-size: 17px !important;
  }

  .plus-btn {
    font-size: 22px !important;
  }


  /* ---------- HERO ---------- */
  .hero {
    flex-direction: column !important;
    padding: 40px 20px !important;
    height: auto !important;
  }

  .hero-left {
    width: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
  }

  .hero-left h1 {
    font-size: 40px !important;
    line-height: 1.3 !important;
  }

  .hero-right {
    width: 100% !important;
    margin-top: 20px !important;
    justify-content: center !important;
  }

  .hero-img-wrap {
    width: 100% !important;
    max-width: 340px !important;
    height: 340px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .hero-img {
    position: absolute !important;
    top: 50%; left: 50%;
    height: 100%;
    width: auto;
    transform: translate(-50%, -50%);
    object-fit: contain !important;
  }


  /* ---------- GREEN SECTION ---------- */
  .green-inner {
    flex-direction: column !important;
    width: 90% !important;
    gap: 40px !important;
  }

  .green-left,
  .green-center,
  .green-right {
    width: 100% !important;
  }

  .green-right img {
    width: 100% !important;
    height: auto !important;
  }


  /* ---------- BLACK SECTION ---------- */
  .black-inner {
    flex-direction: column !important;
    width: 90% !important;
    gap: 40px !important;
  }

  .black-left,
  .black-right {
    width: 100% !important;
  }

  .black-left img {
    width: 100% !important;
    height: auto !important;
  }


  /* ---------- ARTWORK ROW ---------- */
  .art-row {
    flex-direction: column !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .art-left {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    padding: 18px !important;
  }

  .art-right {
    width: 100% !important;
    padding: 20px 22px !important;
  }

  .art-title-line {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .art-size {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  }
/* ==========================================================
   📱 SMALL MOBILE — max-width 320px
========================================================== */
@media (max-width: 320px) {

  .top-logo {
    font-size: 13px !important;
  }

  .menu-row {
    height: 80px !important;
  }

  .menu-row span {
    font-size: 15px !important;
  }

  .plus-btn {
    font-size: 18px !important;
  }

  .hero-left h1 {
    font-size: 32px !important;
  }

  .hero-img-wrap {
    max-width: 280px !important;
    height: 280px !important;
  }

  .mobile-nav a {
    font-size: 15px !important;
    padding: 14px 18px !important;
  }
}
/*지도 모바일*/
@media (max-width: 768px) {
  .contact-map iframe {
    height: 600px !important;   /* 원하는 만큼 조절 가능 */
  }


::selection {
  background: #9dff91;
  color: #ff9393;
}



:root {
  --font: "Pretendard", sans-serif;
}

html, body {
  font-family: "Pretendard Variable", sans-serif !important;
}
html { 
    height: auto;
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*=====================TOP BAR=====================*/
.top-bar {
  background:#ffffff;
  border-bottom:1px solid #000;
  height: 80px;
  display:flex;
  align-items:center;
  padding: 0;  /* ✔ 여백 모두 제거 */
}

.top-inner {
  width: 100%;
  max-width: none;     /* ✔ 1600px 제한 제거 */
  margin: 0;           /* ✔ auto 중앙정렬 제거 */
  padding: 0 50px;     /* ✔ 좌우 20px 정도만 남기기 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.top-logo {
  text-decoration: none;
  color: #111;
  font-size: 28px;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 100%; 
  margin-left: 0px; 
  margin-right: 350px;
}

.top-menu {
  display: flex;
  flex: 1;                     /* 메뉴 영역이 전체를 차지 */
  justify-content: space-between; /* ABOUT–COLLECTIONS–CONTACT 자동 균등 간격 */
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-weight: 300;
  align-items: center;
}

.top-link{
    text-decoration:none;
    color:#444;
    padding: 0;          
    display: flex;        
    align-items: center;
    height: 100%;
    letter-spacing: 0.20em;
}

.top-link:hover{
    color:#777;
}

.top-item{
    position:relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.dropdown{
  position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:110%;               
    min-width:260px;
    background:#ffffff;
    border:1px solid #3a3a3a;
    display:none;
    z-index: 9999;
}
.top-item:hover .dropdown{
    display:block;
}
.dropdown-item {
    display: block;
    padding: 20px 25px;
    font-size: 12px;
    color: #444;
    text-decoration: none;
    border-top: 1px solid #3a3a3a;
    background: #fafafa;
}
.dropdown-item:first-child {
    border-top: none;
}
.dropdown-item:hover {
    background:#eee;
}
.dropdown-item--disabled {
    color:#555;
    cursor:default;
    opacity: 1 !important;  
}
.dropdown-item:hover:not(.dropdown-item--disabled){
    background:#eee;
}
}

/* ================== SUB HEADER ================== */
.sub-header {
  width: 100%;
  padding: 0 50px;
  font-size: 24px;
  font-weight: 350;
  border-bottom: 1px solid #000;
  background: #ffffff;
  letter-spacing: 0.05em;
  height: 80px;
  display: flex;
  align-items: center;
}



/*=====================ABOUT PAGE=====================*/
.about-layout{
    display:flex;
    height:calc(100vh - 48px);
}
.about-left{
    flex:0 0 40%;
    border-right:1px solid #d0d0d0;
    background:#f4f4f4;
}
.about-left img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.about-right{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 80px;
}
.about-text{
    max-width:60%;
    font-size:30px;
    line-height:1.8;
    color:#000;
    transform:translateY(0);
    transition:transform 0.35s ease;
}
.about-text.slide-out{
    transform:translateY(40px);
}

/*=====================ARTWORK LIST (listB)=====================*/
@media (max-width: 768px) {
.listB{
    padding:80px 0 120px;
    border-top:1px solid #e1e1e1;
}
.listB>h1{
    max-width:1200px;
    margin:0 auto 40px;
    padding:0 24px;
    font-size:12px;
    letter-spacing:0.35em;
    font-weight:400;
    text-transform:uppercase;
    color:#999;
}
.listB article:nth-child(odd){
    grid-column:1/2;
}
.listB article:nth-child(even){
    grid-column:2/3;
}
.listB .photo{
    width:100%;
    padding-top:70%;
    background-size:cover;
    background-position:center;
    background-color:#e5e5e5;
}
.listB .text{
    margin-top:12px;
}
.listB .text h2{
    margin:0;
    font-size:14px;
    font-weight:400;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#666;
    transition:color 0.25s ease;
}
.listB .text p{
    margin-top:4px;
    font-size:12px;
    line-height:1.6;
    color:#999;
}
.listB article:hover .text h2{
    color:#9bd48a;
}

}

/* ================= HERO 메인================= */

/* 왼쪽 텍스트 */
@media (max-width: 768px) {
.hero-left {
  width: 700px;          /* ← 핵심: 고정 폭으로 변경 */
  padding-left: 100px;
  padding-right: 10px;
  margin-top: -20px;
  position: relative;
  z-index: 10;
}

.hero-left h1 {
  font-size: 80px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;

}



.hero-right {
  flex: 1;               /* ← 핵심: 50% 제거, 자동 확장 */
  display:flex;
  justify-content: flex-start;
  align-items: center;
}


/* 실제 이미지 */
.hero-img-real {
  width: 50%;
  height: auto;
  object-fit: contain;   
  display: block;
  justify-content: start;
}

.hero {
  width: 100%;
  height: 800px;
  padding: 20px;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
}



.hero-maintext {
  font-size: 80px;      
  line-height: 1.2;
  font-weight: 600;
  word-break: keep-all;
}

.fixed-hero {
  width: 40%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.fixed-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;   
  background: #f8f8f8;   
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    filter 0.6s ease,
    transform 0.6s ease,
    opacity 0.6s ease;
}



/* Hover layer */
.hero-hover {
  position: absolute;
  inset: 0;
  opacity: 0;    
  background: rgba(255,255,255,0.0); /* 💥 흰색을 조금 더해 흐림 강조 */
  transition: opacity .35s ease;
  pointer-events: none;
  
}


.hero-img-wrap:hover .hero-img {
 filter:
    blur(30px)          /* 핵심: 강한 블러 */
    brightness(1.3)    /* 잔상처럼 밝기 증가 */
    contrast(1.1)
    saturate(1.25);     /* 색감 유지 + 퍼진 색 표현 */
  
  opacity: 0.55;        /* 잔상 느낌을 위해 흐림 */
  transform: scale(1.20); /* 살짝 확대되어 퍼짐 효과 강화 */
}

.hero-img-wrap:hover .hero-hover {
  opacity: 1;

}

.hover-title {
  font-size: 26px;
  color: #fff;
  transition: color .25s;
}

.hover-title:hover {
  color: #9bed79;  /* 포인트 색상 */
}

.hover-sub {
  font-size: 13px;
  margin-top: 6px;
  color: #ddd;
}

/* ================= HERO 아래 얇은 구분선 ================= */
.hero-divider {
  width: 100%;
  border-top: 1px solid #000;
  margin: 40px 0 0;
}


/* =========================================================
   COLLECTION DETAIL — 2번 이미지 100% 동일 레이아웃
========================================================= */

/* ---------- 상단 COLLECTION BAR ---------- */

.collection-bar {
  width: 100%;
  padding: 12px 20px;
  border-bottom: 1px solid #000;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #777;
  background: #fafafa;
}

/* 전체 페이지 */
.artwork-page {
  width: 100%;
  margin: 0;
  padding: 0;
}

.artwork-grid {
  width: 100%;
}

/* ---------- ROW ---------- */
.art-row {
  display: flex;
  width: 100%;
  min-height: 260px;   
  border-top: 1px solid #000;
}

.art-row:last-child {
  border-bottom: 1px solid #000;
}

/* ---------- LEFT (IMAGE 50%) ---------- */
.art-left {
  width: 50%;
  border-right: 1px solid #000;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.art-img-box {
  width: 100%;
  max-width: 336px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.art-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- RIGHT (TEXT 50%) ---------- */
.art-right {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

/* ---------- category 제거 ---------- */
.art-category {
  display: none !important;
}

/* ---------- 제목 + 사이즈 라인 ---------- */
.art-title-line {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #000;
}

.art-title {
  flex: 1;
  font-size: 17px;
  font-weight: 500;
  color: #000;
}

.art-size {
  white-space: nowrap;
  font-size: 14px;
  border-left: 1px solid #000;
  padding-left: 10px;
  margin-left: 10px;
}

/* ---------- Medium 텍스트 ---------- */
.art-medium {
  font-size: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #000;  
}

/* ---------- 설명 ---------- */
.art-description {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  margin-top: 8px;
}

/* ---------- 짝수 행 반전 ---------- */
.art-row:nth-child(even) {
  flex-direction: row-reverse;
}

.art-row:nth-child(even) .art-left {
  border-right: none;
  border-left: 1px solid #000;
}


/*=========================================================
   EXHIBITION
=========================================================*/
.exhibition{
    margin-top:160px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}
.exhibition img{
    width:100%;
    display:block;
}


/*=========================================================
  ABOUT PAGE — 최종 정리본
=========================================================*/

/* 전체 리스트 박스 */
.menu-list {
  width: 650px;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-bottom: none;
  font-family: inherit;
}

/* 각 그룹(항목 1개 + 내용박스) */
.menu-item {
  border-bottom: 1px solid #cfcfcf;
}

/* 제목 줄 */
.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 10px 26px;
  background: #fff;
  cursor: pointer;
}

.menu-row span {
  font-size: 25px;
  color: #b8b8b8;
  font-weight: 400;
  transition: color .25s ease;
}

/* hover 시 title 색 */
.menu-row:hover span {
  color: #000;
}

/* ACTIVE (선택된) 메뉴 강조용 */
.active-title {
  font-weight: 600;
  color: #000 !important;
}

/* + 버튼 */
.plus-btn {
  font-size: 50px;
  text-decoration: none;
  transition: opacity .25s ease;
  opacity: 0;
}

/* 행 hover 시 + 버튼도 검정 */
.menu-row:hover .plus-btn {
  color: #000;
  opacity: 1;
}

/* 메뉴 열릴 때 + 유지 */
.menu-item .content-box.show ~ .menu-row .plus-btn,
.menu-item .content-box.show .plus-btn {
  color: #000;
}


/* 메뉴 열릴 때 제목 글자 검정 유지 */
.menu-item.active .menu-row span {
  color: #000 !important;
  font-weight: 600;
}

/* 열릴 때 + 버튼도 항상 보이게 */
.menu-item.active .plus-btn {
  opacity: 1 !important;
  color: #000 !important;
}



/* 내용 박스(토글) */
.content-box {
  background: #fff;
  border-top: 1px solid #cfcfcf;
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  transition: max-height .3s ease, padding .3s ease;
}

/* 열릴 때 */
.content-box.show {
  max-height: 260px;
  padding: 20px 22px;
}

/* 내용 텍스트 */
.content-box p {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  color: #333;
}

/* 왼쪽 이미지 or 영상 */
.about-left img,
.about-left video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-left {
  flex: 0 0 40%;
  border-right: 1px solid #d0d0d0;
  background: #f4f4f4;
}

.about-layout {
  display: flex;
  height: calc(100vh - 48px);
}

.about-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 80px;
}



.info-box a {
    color: #333;
    text-decoration: underline;
}



/* ================== CONTACT SECTION ================== */
/* 회색 지도 */
.contact-map iframe {
  width: 100%;
  height: 740px;
  border: none;
  filter: grayscale(100%) brightness(0.75);
}



.contact-map {
  width: 100%;
  height: 740px;
  position: relative;
}


.contact-section {
 position: relative;
 width: 100%;
 min-height: 600px;
 height: auto; 
}


/* 떠 있는 오른쪽 패널 */
.contact-panel {
  position: absolute;
  top: 50%;
  right: 40px;
  width: 600px;
  border: 1px solid #000000;   
  background: #fff;
  transform: translateY(-50%);
}

/* 내부 박스들 */
.info-box {
  padding: 10px 26px;
  font-size: 20px;
  /*line-height: 1.7;*/
  color: #0c0c0c;
  border-bottom: 1px solid #0c0c0c; 
}



.info-box:last-child {
  border-bottom: none;
}



.info-title {
  font-size: 20px;     
  /*font-weight: 600;*/
  margin-bottom: 6px;
  text-transform: uppercase;
  border-bottom: 1px solid #000;
  padding-bottom: 4px;
  
}

.info-subtitle {
  font-size: 20px;
  /*font-weight: 700;*/
  margin-bottom: 6px;
  text-transform: uppercase;
  /*border-bottom: 1px solid #000;*/
  padding-bottom: 4px;

}


.info-box a {
  font-size: 15px;
  color: #33ea00; /* 링크 색상 */
  text-decoration: underline; 
}

/* <br><br> 줄 간격 정리용 */
.info-box br {
  content: "";
  display: block;
  margin-bottom: 6px;
}

.info-box p {
  margin-top: 8px;
  margin-bottom: 0;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  font-size: 12px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #000;
}

.footer-icons {
  display: flex;
  gap: 18px;
  margin-bottom: 8px;
}

.footer-icons a {
  color: #000;
  font-size: 20px;
}

.footer-icons a:hover {
  color: #777;
}
.footer-divider {
  width: 100%;
  border-top: 1px solid #000;
  margin: 8px 0 16px 0;
}




/* ================= GREEN SECTION ================= */

.green-section {
  width: 100%;
  padding: 80px 0;
  background: #9dff9a;     
}

.green-inner {
  width: 86%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.green-left {
  width: 26%;
  font-size: 20px;
  line-height: 1.6;
}

.green-center {
  width: 26%;
  font-size: 20px;
  line-height: 1.5;
  margin-top: 0;
  
}

.green-right {
  width: 32%;
}

.green-right img {
  width: 100%;
  height: 600px;
  display: block;
  object-fit: cover;
}

.green-left h4 {
  margin-top: 0;
}


/* ================= BLACK SECTION ================= */
.black-section {
  width: 100%;
  background: #29282a;
  padding: 60px 0;
}

.black-inner {
  width: 86%;
  margin: 0 auto;
  display: flex;
 justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* LEFT (TEXT) */
.black-left {
  width: 42%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.black-left img {
  width: 80%;                   
  height: auto;
  display: block;
  object-fit: contain;
  object-fit: cover;
  margin-top: 0;              
}

/* 오른쪽: 텍스트 */
.black-right {
  width: 42%;
  color: #fff;
             
}

.black-right h2 {
  font-size: 25px;
  letter-spacing: 0.12em;
  margin-bottom: 11px;
  font-weight: 600;
  margin-top: 0;
}

.black-right p {
  font-size: 20px;
  line-height: 1.7;
  color: #ccc;
  width: 300px;
  margin-top: 20px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .black-inner {
    flex-direction: column;
    gap: 40px;
  }

  .black-left,
  .black-right {
    width: 100%;
  }

}

}

/* ==========================================================
   📱 MOBILE GLOBAL (max-width: 768px)
========================================================== */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }


  /* ===== SUB HEADER ===== */
  .sub-header {
    font-size: 15px;
    padding: 12px 20px;
  }


  /* ==========================================================
     ARTWORK PAGE
  =========================================================== */
  @media (max-width: 768px) {
  .art-row {
    flex-direction: column !important;
  }

  .art-left, .art-right {
    width: 100% !important;
    padding: 18px !important;
  }

  .art-left {
    border-right: none !important;
    border-bottom: 1px solid #000 !important;
  }

  .art-img-box {
    max-width: 92%;
    aspect-ratio: 1/1;
  }

  .art-title {
    font-size: 16px;
  }

  .art-size {
    font-size: 13px;
  }

  .art-medium {
    font-size: 13px;
  }

  .art-description {
    font-size: 13px;
  }

    /* ==========================================================
     HERO SECTION (모바일)
  =========================================================== */
  .hero {
    flex-direction: column;
    padding: 60px 0 40px;
  }

  .hero-left {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 30px;
  }

  .hero-maintext {
    font-size: 32px;
    line-height: 1.3;
  }

  .hero-right {
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: center;
  }

  .fixed-hero {
    width: 100%;
    max-width: 500px;
  }


  /* ==========================================================
     GREEN SECTION
  =========================================================== */
  .green-inner {
    flex-direction: column;
    gap: 40px;
    width: 90%;
  }

  .green-left,
  .green-center,
  .green-right {
    width: 100%;
    font-size: 17px;
    line-height: 1.6;
  }

  .green-right img {
    width: 100%;
    object-fit: cover;
  }


  /* ==========================================================
     BLACK SECTION
  =========================================================== */
  .black-inner {
    flex-direction: column;
    width: 90%;
    gap: 40px;
  }

  .black-left,
  .black-right {
    width: 100%;
  }

  .black-left img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .black-right h2 {
    font-size: 16px;
  }

  .black-right p {
    font-size: 14px;
  }


  /* ==========================================================
     ABOUT PAGE / MENU LIST (모바일)
  =========================================================== */
  .about-layout {
    flex-direction: column;
    height: auto;
  }

  .about-left {
    width: 100% !important;
    height: 300px !important;
    border-right: none;
    border-bottom: 1px solid #d0d0d0;
  }

  .about-right {
    padding: 40px 20px !important;
  }

  .menu-list {
    width: 100%;
  }

  .menu-row span {
    font-size: 16px;
  }

  .plus-btn {
    font-size: 22px;
  }

  .content-box.show {
    max-height: 400px;
  }


  /* ==========================================================
      CONTACT PAGE (모바일)
  =========================================================== */

    .contact-map {
    height: auto !important;
    margin-bottom: 20px !important;
  }


  .contact-panel {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    transform: none;
    border-left: none;
    border-right: none;
  }

  .contact-map iframe {
    height: 300px;
    margin-bottom: 0;
  }

  .info-box {
    font-size: 17px;
  }

  .info-title {
    font-size: 17px;
  }

  .info-subtitle {
    font-size: 17px;
  }


  /* ==========================================================
      FOOTER (모바일)
  =========================================================== */
  .footer-icons a {
    font-size: 18px;
  }

}

/* ==========================================================
   FIX — Center all artwork images
========================================================== 
.art-img-box {
  margin: 0 auto !important;
  display: block !important;
}

/* ==========================================================
   DESKTOP — full-width horizontal borders for each row
========================================================== */
.art-row {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid #000;
}
.art-row:last-child {
  border-bottom: 1px solid #000;
}
}


/* ---------- 모바일 ---------- */
@media (max-width: 768px) {
  .art-row {
    flex-direction: column;
  }

  .art-left,
  .art-right {
    width: 100%;
    padding: 16px;
  }

  .art-left {
    border-right: none;
    border-bottom: 1px solid #000;
  }

  .art-row:nth-child(even) {
    flex-direction: column;
  }

  .art-row:nth-child(even) .art-left {
    border-left: none;
  }

  .art-img-box {
    max-width: 80%;
  }
}



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

  /* ROW 전체 full-width */
  .art-row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 !important;
    border-left: none !important;
    border-right: none !important;

  }

  /* 이미지 영역 */
  .art-left {
    width: 100% !important;
    padding: 18px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }



  /* 텍스트 영역 */
  .art-right {
    width: 100% !important;
    padding: 20px 24px !important;
    border-top: 1px solid #000 !important;
    box-sizing: border-box;
  }

  /* 작품명 + 사이즈 줄바꿈 */
  .art-title-line {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .art-size {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    color: #555;
  }

  /* 내부 border 제거 */
  .art-title-line,
  .art-medium,
  .art-description {
    border-bottom: none !important;
  }

}


/* ============================
   ARTWORK ZOOM ON HOVER
============================ */
@media (max-width: 768px) {
/* 확대 준비 */
.art-img-box {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

/* 이미지 확대 시 부드럽게 */
.art-img-box img {
  transition: transform 0.25s ease-out;
  transform-origin: center center;
}

/* 확대 상태 */
.art-img-box.zoom-active img {
  transform: scale(2.2);
  cursor: zoom-out;
}

/* ============================
   BLUR — 다른 artwork 흐림처리
============================ */
.art-row.blur {
  filter: blur(5px) brightness(1);
  pointer-events: none;
  transition: filter 0.3s ease;
}

/* 확대된 행 blur 제거 */
.art-row.active-row {
  filter: none !important;
  pointer-events: auto;
}
}

/* ==========================================================
   📱 CONTACT PAGE — MOBILE FINAL VERSION (중복 유지)
========================================================== 
@media (max-width: 320px) {

  .contact-section {
    padding: 0;
    margin: 0;
  }

  .contact-map {
    width: 100%;
    height: auto;
  }

  .contact-map iframe {
    width: 100%;
    height: 300px !important;
    filter: grayscale(100%) brightness(0.85);
  }

  .contact-panel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
    margin-top: 0;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #000 !important;
  }

  .info-box {
    padding: 16px 20px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    border-bottom: 1px solid #000 !important;
  }

  .info-box:last-child {
    border-bottom: none !important;
  }

  .info-title,
  .info-subtitle {
    font-size: 15px !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
  }

  .info-title {
    border-bottom: 1px solid #000;
  }

  .info-box a {
    font-size: 14px !important;
  }
}*/


/* ==========================================================
   📱 ABOUT PAGE — MOBILE LAYOUT (중복 유지)
========================================================== */
@media (max-width: 768px) {

  .about-layout {
    flex-direction: column;
    height: 1500px !important;
    width: 100%;
  }

  .about-left {
    width: none !important;
    height: 250px !important;
    border-right: none;
    border-bottom: 1px solid #d0d0d0;
    background: #f4f4f4;
  }

  .about-left img,
  .about-left video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-right {
    width: 100% !important;
    padding: 0 !important;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .menu-list {
    width: 100% !important;
    border-left: none;
    border-right: none;
  }

  .menu-row {
    height: 100px;
    padding: 0 20px;
  }

  .menu-row span {
    font-size: 17px;
    letter-spacing: 0.02em;
  }

  .content-box {
    padding: 0 20px;
  }

  .content-box.show {
    max-height: 380px;
    padding: 18px 20px;
  }

  .content-box p {
    font-size: 14.5px;
    line-height: 1.55;
  }

  .plus-btn {
    font-size: 20px;
  }
}


/* ===================== MOBILE FIX ===================== */

@media (max-width: 768px) {
  .green-inner {
    grid-template-columns: 1fr; /* 1단 구조로 변화 */
    row-gap: 40px;
    text-align: left;
  }

  .green-left p,
  .green-center,
  .green-caption {
    max-width: 100%;
  }

  .green-right img {
    max-width: 100%;
    width: 100%;
  }

  .green-section {
    padding: 60px 0;
  }
}

@media (max-width: 768px) {
  .green-left h4 {
    font-size: 16px;
  }

  .green-left p {
    font-size: 15px;
    line-height: 1.6;
  }

  .green-center {
    font-size: 20px;
    line-height: 1.4;
  }

  .green-right img {
    width: 100%;
    border-radius: 6px;
  }

  .green-caption {
    font-size: 12px;
  }
}


/* ==========================================================
   📱 HERO IMAGE — MOBILE NO-CROP VERSION
========================================================== */
@media (max-width: 768px) {

  /* HERO 전체 */
  .hero {
    flex-direction: column !important;
    height: autos !important;
    padding: 40px 20px !important;
    overflow: hidden !important;
  }

  .hero-left {
    width: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
  }

  .hero-left h1 {
    font-size: 40px !important;
    line-height: 1.3 !important;
  }

  .hero-right {
    width: 100% !important;
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
  }


 .hero-img-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    height: 340px !important;    /* ★ 레이아웃 고정 */
    overflow: hidden !important; /* ★ 확대해도 밖으로 안 나가게 */
  }
  /* 2) 이미지 자체를 absolute로 띄워서
        확대/블러 되어도 부모 높이에 영향 X */
  .hero-img {
    position: absolute !important; 
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: contain !important;
    transform-origin: center center !important;
    transition: 
      filter 0.3s ease,
      transform 0.3s ease,
      opacity 0.3s ease;
  }

 /* 3) 모바일 hover 효과 — 이미지만 적용, 박스 높이 그대로 유지 */
  .hero-img-wrap:hover .hero-img {
    transform: translate(-50%, -50%) scale(1.15) !important;
    filter: none;
    opacity: 1;
  }

  /* 모바일에서 hover 텍스트는 숨김 */
  .hero-hover {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================
   📱 MOBILE NAV COMPLETE FIX
========================================================== */
@media (max-width: 768px) {

  /* NAV 전체 폭 확보 */
  .top-bar {
    height: 70px !important;
  }

  .top-inner {
    padding: 0 12px !important;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
  }

  /* 로고 WB — 줄바꿈 방지 */
  .top-logo {
    font-size: 15px !important;
    margin-right: 6px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* 메뉴 */
  .top-menu {
    display: flex;
    align-items: center;
    gap: 6px !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
  }

  /* sub-header 위 여백 추가 */
  .sub-header {
    height: 40px !important;          
    padding-top: 10px !important;    
    padding-bottom: 10px !important;
    margin-top: 8px !important;       
  }

  .top-link {
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
  }

  /* 드롭다운 메뉴 크기 축소 */
  .dropdown {
    min-width: 150px !important;
    left: -50% !important;
    transform: none !important;
    top: 100% !important;
    border: 1px solid #000;
  }

  .dropdown-item {
    padding: 12px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }
}

/* ===========================
   MOBILE NAV (햄버거 메뉴)
=========================== */
.mobile-nav-toggle {
  display: none; 
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 10px;
}

.mobile-nav-toggle .m-line {
  width: 26px;
  height: 2px;
  background: #000;
  transition: .3s;
}

/* 햄버거 → X로 변환 */
.mobile-nav-toggle.open .m-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.mobile-nav-toggle.open .m-line:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.open .m-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* 모바일 네비게이션 */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: #fff;
  width: 100%;
  border-top: 1px solid #000;
  position: absolute;
  top: 70px;
  left: 0;
  z-index: 9000;
}

.mobile-nav a {
  padding: 16px 22px;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #e1e1e1;
}

.mobile-nav a:hover {
  background: #f7f7f7;
}

/* 모바일에서만 보이기 */
@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: flex;
  }

  .top-menu {
    display: none !important;
  }

  .mobile-nav {
    display: none;
  }

  .mobile-nav.open {
    display: flex;
  }
}

/* ==========================================================
   📱 MOBILE — max-width 768px (공통 모바일)
========================================================== */
@media (max-width: 768px) {

  body, html {
    overflow-x: visible !important;
    max-width: 100% !important;
  }

  /* ---------- TOP BAR ---------- */
  .top-bar {
    height: 70px !important;
    position: relative !important;  
    display: flex;
    align-items: center;
  }
  .top-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;  /* 로고 왼쪽 유지 */
    padding: 0 14px !important;
    position: relative;
  }

  /* 로고 — 원래 위치 그대로 왼쪽 */
  .top-logo {
    font-size: 15px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    margin-right: auto !important;  /* 햄버거와 겹치지 않게 */
    margin-left: 5px;
  }

  .top-menu {
    display: none !important;
  }

  /* ---------- MOBILE NAV TOGGLE (햄버거 버튼) ---------- */
  .mobile-nav-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;

    /* 🔥 오른쪽 고정 */
    position: absolute !important;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);

    z-index: 9999 !important;
  }

  .mobile-nav-toggle .m-line {
    width: 26px;
    height: 2px;
    background: #000;
    transition: .3s;
  }

  /* 햄버거 → X */
  .mobile-nav-toggle.open .m-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .mobile-nav-toggle.open .m-line:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav-toggle.open .m-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }


  /* ---------- MOBILE NAV MENU ---------- */
  .mobile-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-top: 1px solid #000;

    position: absolute;
    top: 70px;
    left: 0;
    z-index: 9000;
  }

  .mobile-nav.open {
    display: flex !important;
  }

  .mobile-nav a {
    padding: 16px 22px;
    font-size: 16px;
    border-bottom: 1px solid #e1e1e1;
    color: #333;
    text-decoration: none;
  }
}

@media (max-width: 768px) {

  /* ---------- ABOUT PAGE ---------- */
  .about-layout {
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
  }

  .about-left {
    width: 100% !important;
    height: 260px !important;
    border-right: none !important;
    border-bottom: 1px solid #d0d0d0 !important;
    overflow: hidden !important;
  }

  .about-left img,
  .about-left video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .about-right {
    width: 100% !important;
    padding: 0  !important;
  }

  .menu-list {
    width: 100% !important;
    border-left: none !important;
    border-right: none !important;
  }

  .menu-row {
    height: 90px !important;
    padding: 0 20px !important;
  }

  .menu-row span {
    font-size: 17px !important;
  }

  .plus-btn {
    font-size: 22px !important;
  }


  /* ---------- HERO ---------- */
  .hero {
    flex-direction: column !important;
    padding: 40px 0px !important;
    height: auto !important;
  }

  .hero-left {
    width: 100% !important;
    padding: 10px 10px 10px 30px !important;
    margin: 0 !important;
  }

  .hero-left h1 {
    font-size: 40px !important;
    line-height: 1.3 !important;
  }

  .hero-right {
    width: 100% !important;
    margin-top: 20px !important;
    justify-content: center !important;
  }

  .hero-img-wrap {
    width: 100% !important;
    max-width: 340px !important;
    height: 340px !important;
    overflow: visible !important;
    position: relative !important;
  }

  .hero-img {
    position: absolute !important;
    top: 50%; left: 50%;
    height: 100%;
    width: auto;
    transform: translate(-50%, -50%);
    object-fit: contain !important;
  }


  /* ---------- GREEN SECTION ---------- */
  .green-inner {
    flex-direction: column !important;
    width: 90% !important;
    gap: 40px !important;
  }

  .green-left,
  .green-center,
  .green-right {
    width: 100% !important;
  }

  .green-right img {
    width: 100% !important;
    height: auto !important;
  }


  /* ---------- BLACK SECTION ---------- */
  .black-inner {
    flex-direction: column !important;
    width: 90% !important;
    gap: 40px !important;
  }

  .black-left,
  .black-right {
    width: 100% !important;
  }

  .black-left img {
    width: 100% !important;
    height: auto !important;
  }


  /* ---------- ARTWORK ROW ---------- */
/* ==========================================================
   ARTWORK DETAIL — MOBILE (max-width: 768px)
   👉 이미지가 과하게 커지던 부분 + 수정 주석 포함
========================================================== */
@media (max-width: 768px) {

  /* ---------- ARTWORK ROW ---------- */
  .art-row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  

  .art-left {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    padding: 18px !important;
  }

  .art-right {
    width: 100% !important;
    padding: 20px 22px !important;
  }

  .art-title-line {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .art-size {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
  /* ======================================================
     ⭐ 문제 원인 1: max-width: 42% 강제 값 때문에
        이미지가 모바일에서도 비정상적으로 커졌음
     ⭐ 해결법: 모바일에서 width, max-width 모두 100%로 고정
  ====================================================== */
  .art-img-box {
    width: 100% !important;       /* ← 모바일 전체폭에 맞게 */
    max-width: 100% !important;   /* ← 42% 강제 적용 제거 */
    margin: 0 auto !important;
    padding: 0 !important;        /* ← 남는 내부 여백 제거 */
  }

  /* ======================================================
     ⭐ 문제 원인 2: 이미지 높이를 유지하려고 비율이 이상해짐
     ⭐ 해결: object-fit: contain + height auto로 자연 비율 유지
  ====================================================== */
  .art-img-box img {
    width: 100% !important;
    height: auto !important;       /* ← 화면에 맞게 자연 비율 */
    object-fit: contain !important;
    display: block !important;
  }
}


/* ==========================================================
   📱 SMALL MOBILE — max-width 320px
========================================================== */
@media (max-width: 320px) {

  .top-logo {
    font-size: 13px !important;
  }

  .menu-row {
    height: 80px !important;
  }

  .menu-row span {
    font-size: 15px !important;
  }

  .plus-btn {
    font-size: 18px !important;
  }

  .hero-left h1 {
    font-size: 32px !important;
  }

  .hero-img-wrap {
    max-width: 280px !important;
    height: 280px !important;
  }

  .mobile-nav a {
    font-size: 15px !important;
    padding: 14px 18px !important;
  }
}
/*지도 모바일*/
@media (max-width: 768px) {
  .contact-map iframe {
    height: 600px !important;   /* 원하는 만큼 조절 가능 */
  }
}



/* pptx: 비디오*/
.pptx {
background-color: #66CBE5;
background-color: var(--main-color);
color: #fff;
color: var(--text-bright-color);
}
.pptx video {
width: 100%;
position: center;
}
/* PC-pptx: 개요(image + text ) [width=768px]를 기준으로 */
@media (min-width: 768px) {
.pptx .container {
display: block;
width: 1500px;
margin-left: auto;
margin-right: auto;
}
}

/* ===================== FIX: 모바일 토글 강제 표시 ===================== */
/*@media (max-width: 768px) {

  .mobile-nav-toggle {
    display: flex !important;
    position: absolute !important;
    left: 14px;
    top: 18px;
    z-index: 9999 !important;
  }

  .top-bar {
    position: relative !important;
  }
}
*/

/* ================================
   1024px 이하 상단 메뉴 최적화
================================ */
@media (max-width: 1300px) {

  /* 로고 영역 */
  .top-logo {
    font-size: 18px !important;
    letter-spacing: 2px;
    white-space: nowrap;
  }

  /* 상단 전체 바 */
  .top-inner {
    padding: 0 24px !important;
    justify-content: space-between !important;
  }

  /* 네비 메뉴 */
  .top-menu {
    gap: 18px !important;  /* 메뉴 간 간격 */
  }

  .top-menu .top-link {
    font-size: 13px !important;   /* 글씨 줄이기 */
    letter-spacing: 4px !important; /* 간격 확보 */
    padding: 0 6px !important;   /* 좌우 여백 */
  }

  /* COLLECTIONS 드롭다운 내부 */
  .dropdown-item {
    font-size: 13px !important;
  }
}


/* pptx: 비디오*/
.pptx {
background-color: #66CBE5;
background-color: var(--main-color);
color: #fff;
color: var(--text-bright-color);
}
.pptx video {
width: 100%;
position: center;
}
/* PC-pptx: 개요(image + text ) [width=768px]를 기준으로 */
@media (min-width: 768px) {
.pptx .container {
display: block;
width: 1500px;
margin-left: auto;
margin-right: auto;
}
}

/* ===================== FIX: 모바일 토글 강제 표시 ===================== */
/*@media (max-width: 768px) {

  .mobile-nav-toggle {
    display: flex !important;
    position: absolute !important;
    left: 14px;
    top: 18px;
    z-index: 9999 !important;
  }

  .top-bar {
    position: relative !important;
  }
}
*/

/* ================================
   1024px 이하 상단 메뉴 최적화
================================ */
@media (max-width: 1300px) {

  /* 로고 영역 */
  .top-logo {
    font-size: 18px !important;
    letter-spacing: 2px;
    white-space: nowrap;
  }

  /* 상단 전체 바 */
  .top-inner {
    padding: 0 15px !important;
    justify-content: space-between !important;
  }

  /* 네비 메뉴 */
  .top-menu {
    gap: 18px !important;  /* 메뉴 간 간격 */
  }

  .top-menu .top-link {
    font-size: 13px !important;   /* 글씨 줄이기 */
    letter-spacing: 4px !important; /* 간격 확보 */
    padding: 0 6px !important;   /* 좌우 여백 */
  }

  /* COLLECTIONS 드롭다운 내부 */
  .dropdown-item {
    font-size: 13px !important;
  }
}


/* ==========================================================
   ARTWORK ZOOM — DESKTOP ONLY
========================================================== */
@media (min-width: 769px) {
    .art-img-box {
        position: relative;
        overflow: hidden;
    }

    .art-img-box img {
        transition: transform .35s ease;
    }

    .art-img-box:hover img {
        transform: scale(1.15);
    }

    /* 다른 요소 흐림 처리 */
    .art-row.blur {
        filter: blur(5px) brightness(0.9);
        transition: 0.3s;
    }

    .art-row.active-row {
        filter: none !important;
    }
}


/* ==========================================================
   ARTWORK ZOOM — MOBILE ONLY
========================================================== */
@media (max-width: 768px) {
    .art-img-box {
        position: relative;
        overflow: hidden;
        cursor: zoom-in;
    }

    .art-img-box img {
        transition: transform 0.25s ease-out;
    }

    .art-img-box.zoom-active img {
        transform: scale(8);
        cursor: zoom-out;
    }

    .art-row.blur {
        filter: blur(5px) brightness(1);
        pointer-events: none;
    }

    .art-row.active-row {
        filter: none !important;
        pointer-events: auto;
    }
}
/* =======================================================
   📱 MOBILE FULL FIX — 모바일 전체 페이지 폭 강제 고정
   👉 모든 튀어나오는 요소 무력화
======================================================= */
@media (max-width: 768px) {

  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* 100vw 사용한 모든 요소 강제 무력화 */
  * {
    max-width: 100% !important;
  }

  /* art-row 강제 고정 */
  .art-row {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* img가 밖으로 나가는 것을 방지 */
  img, video {
    max-width: 100% !important;
    height: auto !important;
  }


/* =======================================================
   COLLECTION IMAGE SPACING FIX (Perfect symmetric padding)
======================================================= */
.listB article {
  padding: 0 !important;
  margin: 0 !important;
}
.listB .photo {
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff; /* 흰 여백 */
}

.listB .photo img {
  width: 100%;
  height: auto;
  object-fit: contain; /* ⭐ 각 이미지 비율대로 최적 여백 자동 생성 */
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* 텍스트와 이미지 사이의 위아래 여백 균등 */
.listB .text {
  padding: 20px 0 !important;
  margin: 0 !important;
}
}