@font-face {
  font-family: ABCOracle;
  src: url('./font/ABCOracle-Regular.otf');
}

:root {
  --color-purple:  #DAC4FF;
  --color-gray:  #433D3D;
}


*{
 font-family: "ABCOracle", Arial, Helvetica, sans-serif;
   padding: 0;
   margin: 0;
    box-sizing: border-box;
}

html, body{
  background: #fff;
  transition: background-color 0.2s linear; /* JS가 바꾸지만 살짝 부드럽게 */
}


.header {
  position: fixed;
  inset: 0;                
  width: 100dvw;
  height: 100dvh;
  z-index: 999;
  pointer-events: none;  
}

.header-content{
  position: fixed;
  top: clamp(12px, 2.5vh, 28px);
  right: clamp(12px, 2.5vh, 28px);
  width: auto;
  max-width: calc(100dvw - (clamp(12px, 2.5vh, 28px) * 2));
  overflow: visible;    
  display: flex;
  flex-direction: row;      /* nav + hamburger */
  align-items: flex-start;
  gap: clamp(10px, 2vw, 22px);
  pointer-events: none;
}

/* 
.title {
  white-space: nowrap; 
}

.title a{
    text-decoration: none;
  
} */


.home-btn{
padding-top: calc(clamp(12px, 2.5vh, 28px)* 2) ;
padding-left:  clamp(12px, 2.5vh, 28px);
}


.home-btn a{
  text-decoration: none;
  color: var(--color-gray);
  font-size: 28px;

}


.menu-toggle{
  flex: 0 0 auto;
  width: clamp(48px, 9vw, 86px);
  height: clamp(48px, 9vw, 86px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1.4vw, 12px);
  pointer-events: auto;   
  cursor: pointer;
  z-index: 9999;

}

.menu-toggle span{
  height: clamp(10px, 1.8vw, 18px);
  width: 100%;
  background: #d4d4d4;
  border-radius: 999px;
  transition: transform .25s ease, opacity .25s ease;
  transform-origin: center;
}

/* open 상태: X 만들기 */
.menu-toggle.open span:nth-child(1){
  transform: translateY(calc(clamp(6px, 1.4vw, 12px) + clamp(10px, 1.8vw, 18px))) rotate(45deg);
}

.menu-toggle.open span:nth-child(2){
  opacity: 0;
}

.menu-toggle.open span:nth-child(3){
  transform: translateY(calc(-1 * (clamp(6px, 1.4vw, 12px) + clamp(10px, 1.8vw, 18px)))) rotate(-45deg);
}





.nav {
  width: min(44vw, 250px);
  max-width: 520px;
  opacity: 0;

  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  /* display: flex;
  justify-content: flex-start;
background-color: #DAC4FF;
  /* flex: 1;  */
  /* opacity: 0;   */
  /* margin-right: 5vw; */
  /* transition: all 0.3s ease;
  pointer-events: none;
  min-width: 0; 
  width: 20vw;
  height: 97vh;
  margin-top: 3vh;
  bottom: 0; */
/* background-color: rgb(255, 255, 255); */
  /* margin-left: auto;
  gap: clamp(1rem, 3vw, 3rem); */


}


.nav.active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3 ease;
  pointer-events: auto;
     
}


.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.2vw, 18px);
  margin-top: 2px;

}

@media (max-width: 768px){
  .nav ul {
    margin-top: 0;
    }
}

.nav a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-gray);
  
  /* 핵심: 폰트가 화면에 따라 자동 조절 */
  font-size: clamp(16px, 9vw, 45px);
  line-height: 1.05;

  padding: clamp(10px, 1.4vw, 14px) clamp(12px, 2vw, 18px);
  border-radius: clamp(14px, 2.2vw, 22px);

  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  transition: all 0.4s ease;
  /* 긴 텍스트 대비 */
  max-width: 100%;
  white-space: nowrap;
}


.nav a:hover{
  transform: scale(1.1);
}


.close {
  position: absolute;
  right: 2rem; /* 💡 같은 위치 */
  border: none;
  font-size: 2rem;
  cursor: pointer;
  background-color: transparent;   
}


/* home name */

.home-name {
position: absolute;
  display: flex;
  justify-content: center;   /* 가로 중앙 */
  align-items: center;       /* 세로 중앙 */
  height: 100dvh;   
  width: 100dvw;
  z-index: 99;
    /* mix-blend-mode: difference; */
  pointer-events: none;
  transition: transform 0.5s ease;
  transform-origin: center;

}

.home-name p {
font-size: clamp(30px, 10vw, 85px);
  margin: 0;
  color: var(--color-gray);
}

.home-name.scaled {
  transform: scale(0.5); /* 줄이고 싶은 비율 */
}


.home-name > div{
  width: clamp(50px, 90vw, 900px);
  /* background-color: #9EDBFF; */
  display: flex;
}


.home-name > div img{
  width: 100%;
  object-fit: contain;
}

/* sticker */


.sticker-area {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}


.sticker {
  position: absolute;
  cursor: grab;
  user-select: none;
  transition: none; /* 부드럽게 이동 안 하게 */
  z-index: 50; 
    height: auto;
    width: var(--w);
}

@media (max-width: 768px) {
  .sticker { width: calc(var(--w) * 1.39); } 
}

.sticker.is-fixed{
   position: fixed;
  z-index: 200;

}

.sticker.is-fixed{
   position: fixed;
  z-index: 200;
}



.sticker.is-fixed.wiggle{
  transform-origin: 50% 50%;
  will-change: transform;
  animation: fixedWiggle 0.5s ease-in-out infinite;
}

/* 가운데 축으로 -3도 ~ +3도 */
@keyframes fixedWiggle{
  0%   { transform: translate(-50%, -50%) rotate(-3deg); }
  50%  { transform: translate(-50%, -50%) rotate( 3deg); }
  100% { transform: translate(-50%, -50%) rotate(-3deg); }
}





/*home: event */

.marquee{
  box-sizing:border-box;
  position:absolute;
  display:flex;
  align-items:center;
  height:clamp(8dvh,10px,76px);
  width:96vw; 
  border-radius:clamp(15px,2.5vw,22px);
  overflow:hidden;
  background:#DAC4FF;
  left:0; right:0;
  bottom:2.5vh;
  margin:auto;
  z-index:99;
  white-space:nowrap;
}

.marquee__inner{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;              /* 내용만큼 */
  animation:marquee 14s linear infinite;
  will-change:transform;
  color: var(--color-gray);
}

/* hover pause (SCSS & 대신 순수 CSS) */
.marquee:hover .marquee__inner{
  animation-play-state:paused;
}

.marquee__group{
  display:inline-flex;
  flex:0 0 auto;                  /* 줄어들지 않게 */
  white-space:nowrap;
  /* font-size:28px; */
font-size: clamp(20px, 4vw, 25px);
  padding-right:2rem;             /* 그룹 사이 약간 띄우기 */
}

/* 두 그룹(복제본) 전체 중 절반만큼 이동하면 seamless */
@keyframes marquee{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}



.home-events{
  width: 100%;
  height: 100dvh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

}

.events-inner{
  width: 40%;
  max-width: 1000px;
  color: var(--color-gray);
}


@media (max-width: 768px){
  .events-inner{
  width: 90%;
}

}

.event-item{
  margin-top: 20px;
  margin-bottom: 40px;
  color: var(--color-gray);
}

.event-name{
  font-size: 28px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}


.event-link-arrow {
  text-decoration: none;
  font-size: 0.9em;
  transition: transform 0.2s ease;
  color: var(--color-gray);
}

.event-link-arrow:hover {
  transform: translateX(3px);
}


.event-date,
.event-address{
  font-size: 1.2rem;
  color: #433d3db0;
}

.event-category{
  color: #433d3db0;
}





:root{
  --tabH: 76px;     /* 탭 높이 */
  --tabLift: 12px;  /* hover/active 올라가는 값 */
  --gapX: 14px;
  --padX: 20px;
  --rows: 1;        /* 기본 1줄 */
}


.porftolioMenu{
  position: fixed;
  left: 0; right: 0; bottom:2.5vh;
  z-index: 999;
  background: transparent;
  height: calc((var(--tabH) * var(--rows)) + var(--tabLift) + env(safe-area-inset-bottom));
  overflow: visible;
  
}


.porftolioMenu ul{
  position: absolute;
  left: 0; right: 0;  
  display: flex;
  flex-wrap: wrap;               /* 스크롤 X */
  justify-content: center;
  align-items: flex-end;
  gap: var(--gapX);
  margin: 0;

  list-style: none;
  /* padding: var(--tabLift) var(--padX) env(safe-area-inset-bottom); */
  overflow: visible;             
}


.porftolioMenu a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  height:clamp(8dvh,10px,76px);
  padding: 0 44px;
  border-radius: 30px ;
  text-decoration: none;
  color: #000;
font-size: clamp(20px, 2vw, 20px);
    box-shadow:0 10px 26px rgba(0,0,0,.18);

  /* 아래가 뜨지 않게: 기본을 아래로 내려놓고(active/hover 때 0) */
  transform: translateY(var(--tabLift));
  transition: transform 220ms ease;
}

.porftolioMenu a:hover,
.porftolioMenu a.active{
  transform: translateY(0);
}




@media (max-width: 480px){
  :root{ --tabLift: 8px; }
  .porftolioMenu ul{ gap: 10px; padding-left: 16px; padding-right: 16px; }
}


/* ====== 메뉴별 색상 ====== */
.porftolioMenu li:nth-child(1) a {
  background-color: #7CFF6B; /* Selected Works */
}

.porftolioMenu li:nth-child(2) a {
  background-color: #FFF1D6; /* Book */
}

.porftolioMenu li:nth-child(3) a {
  background-color: #FF7A2F; /* Exhibition */
}

.porftolioMenu li:nth-child(4) a {
  background-color: #9EDBFF; /* Press */
}

.porftolioMenu li:nth-child(5) a {
  background-color: #E6E6E6; /* Workshops */
}






/* 모바일 드롭다운 메뉴 */

/* 모바일 메뉴 기본 숨김 */
/* .portfolioNav--mobile{ display:none; } */
 /* 데스크탑 탭 숨김 */
  .porftolioMenu{ display:none; }

  /* 모바일 네비: 하단 고정 */
  .portfolioNav--mobile{
    display:block;
  }



  .portfolioMobileBtn{
    width: fit-content;
    align-items:center;
     color:var(--color-gray);                
    -webkit-appearance:none;   
    appearance:none;
    gap:10px;
     background: var(--portfolio-btn-bg, #7CFF6B);
    border:0;
    border-radius:18px;
    padding:14px 16px;
    box-shadow:0 10px 26px rgba(0,0,0,.18);

    font-size:36px;
    line-height:1;
    cursor:pointer;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .portfolioMobileBtn__icon{
    font-size:26px;
    transition: transform 200ms ease;
  }

  /* 열렸을 때 아이콘 방향 */
  .portfolioMobileBtn[aria-expanded="true"] .portfolioMobileBtn__icon{
    transform: rotate(180deg);
  }

  /* ✅ 패널을 버튼 "위"에 띄우기 */
  .portfolioMobileMenu{
    position:absolute;
    left:0;
    padding-left:clamp(15px,2.5vw,22px);
    display: inline-flex;  
    gap: 10px;                 
    width: max-content;          
    max-width: calc(100vw - 32px); 
    flex-direction: column;
    bottom: calc(100% + 10px); 
    /* background:#fff; */
    border-radius:18px;
    /* padding:14px 16px; */

    min-width: min(520px, 100%);
    transform-origin: bottom left;

    /* 닫힌 상태 애니메이션 준비 */
    transform: translateY(10px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  /* ✅ 열림 상태 */
  .portfolioNav--mobile.is-open .portfolioMobileMenu{
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  .portfolioMobileMenu a{
    display: inline-flex;        
    align-self: flex-start;        
    width: max-content;           
    max-width: 100%;
    padding:16px 20px; 
    text-decoration:none;
    color:var(--color-gray);
    border-radius: 18px;
    font-size:36px;
    line-height:1.05;
    transition: all 0.4s ease;
  }



  .portfolioMobileMenu a:hover{
  transform: scale(1.1);
}


  .portfolioMobileBtn:hover{
  transform: scale(1.04);
}


  .portfolioMobileLang{
    margin-top:8px;
    padding-top:10px;
    border-top:1px solid rgba(0,0,0,.12);
    font-size:32px;
  }
 
  .portfolioMobileLang a{ 
    display:inline; 
    
    padding:0; }

  .portfolioMobileMenu a:nth-child(1)  {
  background-color: #7CFF6B; /* Selected Works */
}

.portfolioMobileMenu a:nth-child(2) {
  background-color: #FFF1D6; /* Book */
}

.portfolioMobileMenu a:nth-child(3) {
  background-color: #FF7A2F; /* Exhibition */
}

.portfolioMobileMenu a:nth-child(4) {
  background-color: #9EDBFF; /* Press */
}

.portfolioMobileMenu a:nth-child(5) {
  background-color: #E6E6E6; /* Workshops */
}


.grid-controls{
position: relative;
display: block;
z-index: 9999;
}


.portfolio-controls{
  position: fixed;
  padding-left:  clamp(12px, 2.5vh, 28px);
  padding-right:  clamp(12px, 2.5vh, 28px);
  bottom: clamp(12px, 3vh, 28px);
  /* left: clamp(12px, 2.5vh, 28px); */
  z-index: 1000;
  width: 100dvw;
  justify-content: space-between;
  height: auto;
  display: flex;
  align-items: center;
  gap: 12px; /* 버튼 ↔ range 간격 */
}

.grid-controls{
  width: min(340px, 80vw);
  margin-top: clamp(12px, 2.5vh, 28px);
}

/* range 기본 리셋 */
.grid-controls input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;            /* thumb가 커서 클릭 영역 확보 */
  background: transparent; /* 트랙은 아래에서 따로 */
  cursor: pointer;
  outline: none;
}

/* ====== WebKit (Chrome, Safari, Edge) ====== */

/* 트랙(회색 바) */
.grid-controls input[type="range"]::-webkit-slider-runnable-track{
  height: 30px;
  background: #d9d9d9;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* 손잡이(큰 반투명 원) */
.grid-controls input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width: 55px;
  height: 55px;
  border-radius: 50%;

  background: rgb(255, 255, 255);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);

  /* thumb를 트랙 중앙에 맞추기 (중요) */
  margin-top: calc((30px - 55px) / 2);
}

/* ====== Firefox ====== */

/* 트랙 */
.grid-controls input[type="range"]::-moz-range-track{
  height: 30px;
  background: #d9d9d9;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* 손잡이 */
.grid-controls input[type="range"]::-moz-range-thumb{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

/* Firefox는 기본 focus outline이 거슬리면 */
.grid-controls input[type="range"]::-moz-focus-outer{
  border: 0;
}




@media (max-width: 768px){

.grid-controls{
  width: 100%;
}

  /* 데스크탑 탭 숨김 */
  .porftolioMenu{ display:none; }

  /* 모바일 네비: 하단 고정 */
  .portfolioNav--mobile{
    display:block;
    position:fixed;

    left:16px;
    right:16px;
    bottom: 80px;
    z-index:1000;
  }



  .portfolioMobileBtn{
    width: fit-content;
    align-items:center;
     color:#000;                
    -webkit-appearance:none;   

    appearance:none;
    gap:10px;
  background: var(--portfolio-btn-bg, #7CFF6B);
    border:0;
    border-radius:18px;
    padding:14px 16px;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
    font-size:23px;
    line-height:1;
    cursor:pointer;
    
  }

  .portfolioMobileBtn__icon{
    font-size:26px;
    transition: transform 200ms ease;
  }

  /* 열렸을 때 아이콘 방향 */
  .portfolioMobileBtn[aria-expanded="true"] .portfolioMobileBtn__icon{
    transform: rotate(180deg);
  }

  /* ✅ 패널을 버튼 "위"에 띄우기 */
  .portfolioMobileMenu{
    position:absolute;
    padding-left:0;
   display: inline-flex;          
    gap: 10px;                   
    width: max-content;          
    max-width: calc(100vw - 32px); 
    flex-direction: column;
    bottom: calc(100% + 10px); 
    border-radius:18px;
    min-width: min(520px, 100%);
    transform-origin: bottom left;

    /* 닫힌 상태 애니메이션 준비 */
    transform: translateY(10px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  /* ✅ 열림 상태 */
  .portfolioNav--mobile.is-open .portfolioMobileMenu{
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;

  }

  .portfolioMobileMenu a{
    display: inline-flex;        
    align-self: flex-start;        
    width: max-content;           
    max-width: 100%;
   padding:16px 20px;        
    /* border-radius: 999px;    */
       /* box-shadow:0 10px 26px rgba(0,0,0,.18);      */
    text-decoration:none;
    color:#000;
    border-radius: 18px;
    font-size:23px;

    line-height:1.05;

  /* 모바일 애니메이션 */
  transform: scale(1);
  transition: transform 120ms ease-out;
  will-change: transform;
  }

  .portfolioMobileMenu a:active{
  transform: scale(0.94);
}


  .portfolioMobileLang{
    margin-top:8px;
    padding-top:10px;
    border-top:1px solid rgba(0,0,0,.12);
    font-size:32px;
  }
 
  .portfolioMobileLang a{ 
    display:inline; 
    
    padding:0; }

  .portfolioMobileMenu a:nth-child(1)  {
  background-color: #7CFF6B; /* Selected Works */
}

.portfolioMobileMenu a:nth-child(2) {
  background-color: #FFF1D6; /* Book */
}

.portfolioMobileMenu a:nth-child(3) {
  background-color: #FF7A2F; /* Exhibition */
}

.portfolioMobileMenu a:nth-child(4) {
  background-color: #9EDBFF; /* Press */
}

.portfolioMobileMenu a:nth-child(5) {
  background-color: #E6E6E6; /* Workshops */
}



}





.portfolio-child{
  padding-bottom: calc((var(--tabH) * var(--rows)) + var(--tabLift) + 20px + env(safe-area-inset-bottom));
}



.projects-grid {
  --cols: 9; 
  margin-left: clamp(12px, 2.5vh, 28px);
  margin-right: clamp(12px, 2.5vh, 28px);
  max-width: calc(100dvw - (clamp(12px, 2.5vh, 28px) * 2));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  margin-top: clamp(12px, 10vh, 50px);
  justify-items: center;
  justify-content: center;
  column-gap: clamp(12px, 4vh, 28px);
  row-gap: 5rem;
   justify-items: stretch; 
}

.project-card {
  width: 100%;  
  text-align: center;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background-color: #433D3D;
  background: transparent !important;
    transition: transform 180ms ease, opacity 180ms ease;
  will-change: transform, opacity;
}

.project-card img {
  width: 100%;
  transition: transform 0.3s ease;
  object-fit: cover;         
  object-position: left center;  
  will-change: transform;
  height: auto;        
  display: block;      
  object-fit: initial;  
}

.project-card:hover img {
  transform: scale(1.05);
}


.projects-grid.is-switching .project-card{
  transform: translateY(2px) scale(0.99);
  opacity: 0.95;
}


/* portfolio-detail-page */

.detail-container{
  position: absolute;
  display: grid;
  width: 100dvw;
  padding-left: clamp(12px, 2.5vh, 56px);
  padding-right: clamp(12px, 2.5vh, 56px);
  padding-top: clamp(12px, 2.5vh, 56px);
  grid-template-columns: 1fr 1fr; 
  column-gap: clamp(14px, 5vh, 56px);
  /* margin-top: clamp(12px, 2.5vh, 28px); */
  position: absolute;
  padding-bottom:clamp(48px, 9vw, 86px);

}
/* 
.detail-container > div{
  border: 1px solid blue;
} */

.back-toggle{
  position: fixed;
  right: clamp(12px, 2.5vh, 56px);
  z-index: 1200;
  bottom: 10px;
  width: clamp(48px, 9vw, 86px);
  height: clamp(48px, 9vw, 86px);

  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */

  /* 배경이 필요하면 */
  /* padding: 10px; border-radius: 999px; */
}

/* ✅ 막대(핵심) */
.back-toggle span{
  width: 100%;
  height: clamp(10px, 1.8vw, 18px);
  background: #d4d4d4;
  border-radius: 999px;
  display: block;
  transition: transform .25s ease, opacity .25s ease;
  transform-origin: left center; /* 화살표 느낌 더 좋음 */
}

/* 화살표 모양 */
.back-toggle span:nth-child(1){
  transform: translateY(clamp(13px, 2.2vw, 24px)) rotate(-45deg);
    width: clamp(42px, 6vw, 73px);
}

.back-toggle span:nth-child(2){
  opacity: 1;
  width: clamp(48px, 9vw, 86px);
}

.back-toggle span:nth-child(3){
  transform: translateY(calc(-1 * clamp(13px, 2.2vw, 24px))) rotate(45deg);
      width: clamp(42px, 6vw, 73px);
}



.detail-info{
height: auto;
min-width: 500px;
/* width:  clamp(200px, 60vh, 550px); */
padding-right: clamp(48px, 12vw, 185px);
}

.detail-info-title{
  font-size: 25px;
}

.info-row{
  margin-top: 1rem;
}

.info-text{
  width: 100%;
  display: grid;
  margin-top: 2rem;
  grid-template-columns:  1fr; /* 이미지 | 텍스트 */
  row-gap: 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;

}

.info-text a{
  color: #000;
}
.project-title{
   margin-top: clamp(12px, 8vh, 40px);
   font-size: 27px;
}



.info-row > span {
display: block;

}

/* Desktop 기본: 세로 리스트 */
.detail-images--desktop{
  display: flex;
  flex-direction: column;
  gap: 24px;

}




.detail-image img{
  display: block;
}

/* Mobile slider 기본은 숨김 */
.detail-images--mobile{
  display: none;
}

/* ✅ 모바일에서만 slider 보이게 */
@media (max-width: 768px){
    .detail-container{
    grid-template-columns: 1fr;

  }


  .detail-info{
    min-width: 0;
  }
  
  .detail-images--desktop{
    display: none;
  }

  .detail-images--mobile{
    display: flex;
        /* background-color: #7CFF6B; */
      /* justify-content: center; */
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
  }

    .detail-images--mobile:has(> .detail-slide:only-child){
    justify-content: center;
  }

  .detail-slide{
    flex: 0 0 90%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
  }

  .detail-slide img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  /* 스크롤바 숨기기(선택) */
  .detail-images--mobile::-webkit-scrollbar{ display:none; }
  .detail-images--mobile{ scrollbar-width: none; }
}


/* about-page */


.bg {
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100%;
  pointer-events: none;
  z-index: 0;

}



.bg .shape {
  position: absolute;
  width: var(--w);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.95;
}





/* Mobile: shapes 살짝 더 작게 */
@media (max-width: 768px) {
  .bg .shape {
    width: calc(var(--w) * 0.8); /* 80%로 축소 */
  }
}

@media (max-width: 380px) {
  .bg .shape {
    width: calc(var(--w) * 0.7);
  }
}


.about{
  position: relative;
  max-width: 1100px;
  /* padding: 4rem 1.5rem; */
  /* padding-top: 12vh; */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  /* background-color: aqua; */

  /* display: none; */
}

.ghost-about-icon{
  position: fixed;
  right:100px;
  bottom: 6vh;
  width: 10vw;
}



.ghost-about-icon img{
  width: 100%;
}

@media (max-width: 768px) {
.ghost-about-icon{display: none;}
}


.speaker-icon{
  /* background-color: #2d9c2d; */
    height: 16dvh;
    position: absolute;
    display: inline;
    top: 25vh;
}

.speaker-icon img{
  height:100%;
}

.about-hero {
  grid-column: 1 / -1;
  margin-top: clamp(12px, 10vh, 50px);
  padding-left:  clamp(12px, 2.5vh, 28px);
  padding-right:  clamp(12px, 2.5vh, 28px);
  font-size: 25px;
  z-index: 99;
  color: #433D3D;
}


.about-text {
  display: inline;
}

.speaker-btn {
  display: inline-flex;
  vertical-align: baseline;
  margin-left: 0.4em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 50px; 
  height: 1.4rem;
   transform: translateY(3px);
 -webkit-tap-highlight-color: transparent;
}



.speaker-btn img {
height: 100%;
transform: scale(5);  
}


.speaker-btn.is-playing img {
  opacity: 0.6;
  /* transform: scale(1.1); */
}


.bottom-grid{
  padding-top: 5vh;
  max-width: 1000px;
  z-index: 99;
   
  /* padding: 4rem 1.5rem; */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* 카드 공통 */
.pill {
  border-radius: 999px;
  padding: 1.25rem 2rem;
  padding-left:   clamp(12px, 2.5vh, 28px);
  color: #433d3db0;
}


.pill > p{
  color: var(--color-gray);
  font-size: 20px;
  margin-top: 0.5rem;
}


.contact-item{
  display: grid;
  grid-gap: 1rem;
  color: var(--color-gray);
}

.contact-item a{
 color: var(--color-gray);
 text-decoration: none;
}


.about-right{
  margin-left:  clamp(12px, 2.5vh, 28px);
  margin-bottom:  clamp(12px, 2.5vh, 28px);
}


/* 반응형: 좁을 때는 1~2열로 줄이기 */
@media (max-width: 900px) {
  
  .about {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  
  }

   .about-backgroundimage img{
  transform: scale(1.7); 
     transform: scale(1.7) translateY(90px); /* ⭐ 아래로 */
    transform-origin: right top;            /* 기준점 */
  
   }

    .projects-grid {
      margin-bottom: 10dvh;
  }

  .bottom-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .about-hero{
    font-size: 20px;
  }

  .pill > p{
     font-size: 17px;

  }

  .project-card img {
   max-width: 100%;   /* ← 여기 */
}

.porftolioMenu a{
  font-size: 15px;
}
}

@media (max-width: 768px){
  :root{
    --rows: 1;     /* ✅ fixed 높이 1줄로 */
    --tabH: 60px;
    --tabLift: 10px;
    --gap: 10px;
    --padX: 16px;
  }

  .porftolioMenu ul{
    flex-wrap: nowrap;          /* ✅ 1줄 유지 */
    justify-content: flex-start;
    overflow-x: auto;           /* ✅ 스와이프 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .porftolioMenu ul::-webkit-scrollbar{ display:none; }

  .porftolioMenu li{ flex: 0 0 auto; }
  .porftolioMenu a{ padding: 0 22px; font-size: 18px; }
}



@media (max-width: 600px) {
  .about {
    grid-template-columns: 1fr;
  }

}


/* event page */

.dot{width:25px; height:25px; border-radius:50%; display:inline-block; background-color: #b5b5b5; }
.font--green{ 
color: #2d9c2d;}

.font--green a{ 
color: #2d9c2d;}

.font--red{ 
color: #c4c4c4;}

.font--red a{ 
color: #c4c4c4;}

.dot--green{ 
background-color: #2d9c2d;
color: #2d9c2d;}

.dot--red{ 
color: #c4c4c4;}


.event-container{
width: 100dvw;
display: flex;
justify-content: center;
}

.event-list{
  display: grid;
  grid-template-columns: repeat(1,1fr);

  margin-top:clamp(12px, 10vh, 50px) ;
  margin-left:  clamp(12px, 2.5vh, 28px);
  margin-right: clamp(12px, 2.5vh, 28px);
  margin-bottom: clamp(12px, 2.5vh, 28px);
}

.event{
  font-weight: lighter;
  font-size: 26px;
  min-height: 30vh;
}

.event-meta {
  margin-left: 1rem;
  display: flex; 
  flex-direction: column;   

}

.event-list li{
list-style: none;
}

.event-image{
  object-fit: contain;
  height: 100%;

}

.event-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 비율 유지 + 꽉 채움 */
  display: block;
}


.link-arrow{
  display: inline-block;
  height: 14px;
  width: 14px;
  align-self: center;

}

.link-arrow img{
  width: 100%;
}


.event-detail-info{
display: grid;
grid-template-columns: 25px 300px 400px;
}



/* .detail-info{
height: auto;
width: 300px;
} */


@media (max-width: 768px){


/* 
.event-list{
  grid-template-columns: repeat(1fr);
}
.event{
  width: 100%;
  flex-direction: column;
}

.dot{
  min-width: 12px;
  height: 12px;
}

.event-date, .event-place{
  font-size: 12px;
} */

/* .detail-info{
  width: 100%;
  padding-left: 0.5rem;
  font-size: 14px;
} */

}