/* =========================================================
   📱 SID Responsive Style (2025 version)
   for: cover_section, hero-dark, about, break-section, parallax,
        card-section, focus_section, location-section
   ========================================================= */

/* =========================
   💻 TABLET (769~1199px)
========================= */
@media (min-width: 768px) and (max-width: 1024px) {

  html { font-size: 16px; }

  /* 공통 섹션 간격 */
  section { padding:5%; }

  /* section1_Cover */
  #cover_section { padding: 6rem 5vw; }
  #cover_section h1 { font-size: 8rem; letter-spacing: 0;; }

  /* section2_Hero */
  .hero-dark { padding: 8rem 6vw; }
  .hero-dark h1 { font-size: 3rem; }

  .horizontal-scroll__section{height: 400vh;}
  /* About (가로스크롤 → 패드에서는 2열 정도 유지)
  .horizontal-scroll__section .about__inner {display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; } */

  /* section3_project */
  .horizontal-scroll__content{padding:20% 80px; width:200vh;}
  .proj-left p{max-width:100%;}
  .proj-left,
  .proj-center,
  .proj-right {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    min-height: auto;
    padding: 80px 2%;
  }
  .proj-left .text-block { min-height: auto; padding-bottom: 0; }
  .proj-center img,
  .proj-right img,
  .proj-left img { width: 100%; height: 56vh; }
  .proj-center .desc { position: static; transform: none; text-align: left; color: #333; margin-top: 10px; }
  .proj-facts { margin: 80px auto 120px; grid-template-columns: 1fr 1fr; }
  .proj-right .text { right: 8%; bottom: 16%; }

  /* Location Section */
  #location-section .location-container {flex-direction: column;}
  .location-map{border:none; width: 100%; }
  .location-map img {max-width: 100%; width: 100%; object-fit: cover; object-position: center -110px; /* 💥 중앙 기준으로 살짝 위쪽만 보이게 */ transform: none; }
  .location-info div.add{margin-top:4rem;}
  .location-map .btn_details{bottom:25%;}

  
  
}







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

  html { font-size: 15px; }
  body { line-height: 1.6; }
  section { padding: 6rem 5vw; }

  /* 팝업 */
  .popup {align-items: flex-start;   padding-top: 4vh; }
  .popup-img { width: 100vw;  height: auto;  max-height: 80vh; }
  .btn-overlay-download { font-size: 0.95rem; }
  .popup-hide-today { font-size: 0.85rem;  margin-bottom: 10vh; width: 100%;  text-align: right; margin-top: 5px; }

  /* 탑버튼, 백버튼 */
  .floating-btns {right: 20px; bottom: 0px; gap: 2px;}
  .floating-btns button {min-width: 40px; height: 40px; font-size: 0.65rem;}

  /* 하단 로고 메뉴 */
  .logo-btn { width: 50px; height: 50px;}

  /* Cover */
  #cover_section {padding: 5rem 5vw;}
  #cover_section h1 {font-size: 13vw; line-height: 1; letter-spacing: 1px; }

  /* 상단 스크롤 */
  .section1-slide { height:30px;}
  .scroll-text {gap:15rem;}

  /* Hero */
  .hero-dark {padding: 5rem 5vw; text-align: center; }
  .hero-dark h1 { font-size: 6vw; letter-spacing: -1px; }
  .hero-dark p {font-size:0.75rem; }
  .hero-dark::before {height: 100%;}

  /* About (가로스크롤 → 세로 스택 전환) */
  .about.horizontal-scroll__section {overflow: visible; }
  .about.horizontal-scroll__section .about__inner { display: flex; flex-direction: column; gap: 3rem; }
  .about.horizontal-scroll__section img { width: 100%; height: auto; }

  /* 프로젝트 */
  .back_title_area h4 {font-size:3rem}
  .project-category.interactive-line {gap:15px;}
  .horizontal-scroll__section {height: auto; padding-top:10%;}
  .horizontal-scroll__wrapper { position: relative; height: auto; overflow: visible; }
  .horizontal-scroll__content { display: block; width: 100%; height: auto;  padding:5%; }

  /* ✅ 아이템 세로 정렬 */
  .about__item { display: block; width: 100%; margin-bottom: 60px; opacity: 0; /* fade-in 시작 */ transform: translateY(50px); transition: all 0.8s ease; height: auto !important; /* 💥 핵심 */
    min-height: 0; padding:0; }
  .about__item.visible { opacity: 1; transform: translateY(0); }
  .about__item:nth-child(even) .content > div {transform:translateY(0px)}

  /* ✅ 이미지 크기 조정 */
  .img-wrapper {width: 100%; height: auto; aspect-ratio: 1 / 1; overflow: hidden; }
  .img-wrapper img { width: 100%; height: 100%; object-fit: cover; }

  /* ✅ hover 관련 요소 제거 */
  .hover-icon,
  .custom-cursor,
  .img-wrapper .overlay { display: none !important; }

  /* ✅ 텍스트 가독성 조정 */
  .about__item .content { padding-top: 12px; max-width: 100%; height: auto !important; /* PC용 height:50% 무시 */ }
  .about__item .content h3 {font-size: 2rem; }
  .about__item .content p { font-size: 0.85rem; color: #ddd; }
  
  /* 프로젝트 */
  .project-item:hover img{ transform:scale(1); }
  .project-overlay, .project-hover-icon, .project-hover-icon .project-plus { display:none; }
  .project-title-mobile {
    display:block; position:absolute; bottom:0; left:0; width:100%; background:rgba(0,0,0,0.5);
    color:#fff; font-size:14px; padding:6px 0; text-align:center; box-sizing:border-box;
  }
  .proj-hero h1 { left: 5%; bottom: 9%; }
  .proj-left h2 { font-size: clamp(40px, 12vw, 64px); }
  .proj-right h2 { font-size: clamp(32px, 9vw, 56px); }
  .proj-center h2 { font-size: clamp(36px, 10vw, 64px); line-height: 1;}
  .proj-facts { grid-template-columns: 120px 1fr; font-size: 12px; }
  
  .proj-left, 
  .proj-center, 
  .proj-right {flex-direction: column; align-items: stretch;   gap: 28px;   min-height: auto;   padding: 80px 2%; }
  .proj-left .text-block { min-height: auto; padding-bottom: 0; }
  .proj-center img,
  .proj-right img,
  .proj-left img { width: 100%; height: 56vh; }
  .proj-center .desc { position: static; transform: none; text-align: left; color: #333; margin-top: 10px; }
  .proj-facts { margin: 80px auto 120px; grid-template-columns: 1fr 1fr; max-width: 90%;}
  .mouse-scroll { display: none; } /* 모바일에서는 숨김 */
  
  /* Location Section */
  #location-section .location-container {flex-direction: column; text-align: center; gap: 40px;}
  .location-info div h3{text-align: left;}

  /* ✅ 로케이션 이미지 영역 */
  .location-map {position: relative;  width: 100%;  height: 300px; /* 보여줄 높이만 조절 */ overflow: hidden; border:none;}
  .location-map img {width: 100%; height: 150%; /* 💥 이미지 자체를 더 크게 보여줌 */ object-fit: cover;  object-position: center -110px; /* 💥 중앙 기준으로 살짝 위쪽만 보이게 */
    transform: none; /* 불필요한 translate 제거 */ }
  #location-section .address,
  #location-section .contact {font-size: 0.9rem; line-height: 1.2; text-decoration: none; text-decoration-skip-ink: none;}
  
  /* ✅ 버튼 위치 & 스타일 */
  .location-map .btn_details {font-size: 1rem; bottom: 10px; right: 12px; color: #000; background: rgba(0,0,0,0.4); border: 1px solid #000; }
  .location-info div.add{text-align: left; margin-top:3rem;}
  .location-info div.add h4{display: none;}

  /* Footer */
  footer { padding:0; font-size: 0.85rem; }
  footer ul{ display: flex; flex-direction:column; }

  }

@media(max-width:1200px){.project-gallery{grid-template-columns:repeat(4,1fr);} }
@media(max-width:960px){.project-gallery{grid-template-columns:repeat(3,1fr);} }
@media(max-width:720px){.project-gallery{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){.project-gallery{grid-template-columns:1fr;} }

@media (min-width: 1800px) {.proj-hero video {width: 100%;} }

@media (max-width: 900px) {
  .proj-left .img-wrap img,
  .proj-left .img-wrap video {height: auto; min-height: 240px;}
}