html, body {
  background: rgb(255, 255, 255) !important;
  margin: 0;
  padding: 0;
}

:root {
  --main-font-color:  #f4f4f4;
  --animation-transition: all 4s ease;
}


* {
  padding: 0;
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;

 
}

/* 4a3664 */
a{
  color:  #575757;
}


.informationBtn {
  transition: var(--animation-transition);
  transform-origin: top left;              
}

.informationBtn a{
  text-decoration: none;
  color: var(--main-font-color);
}

    .tree { list-style: none;
      margin: 0; 
      padding: 0;
      width: 94dvw;
      margin-bottom: 3rem;
       color: var(--main-font-color);
    }
      
    /* .tree > li { margin: .25rem 0 ; background-color: #00ff3c;} */
    details { margin: .25rem 0}
    summary { cursor: pointer; display: inline-flex; align-items: center; gap: .25rem;      }
    summary::-webkit-details-marker { display: none; } 

    .via { opacity: .8; }
    .indent { padding-left: 1rem;}

.caret {
  display: inline-block;
  transition: transform 0.4s ease;
}

details[open] > summary > .caret {
  transform: rotate(90deg);
}



  .bottom{
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100vw;
    z-index: 999;
    color: var(--main-font-color);
    mix-blend-mode: difference;
  }

    .bottom div{
      padding-left: 7px;
      padding-right: 7px;
      padding-bottom: 9px;
    } 

    .swiperContainer{
  width: 100vw;
  height: 100dvh;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  background: transparent !important;
  position: relative; 
}

.swiper {
  width: 100vw;         
  height: 100vh;         
  margin: 0;
  padding: 0;
  background: transparent !important;
}

.swiper-slide {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

.swiper-slide img {
  object-fit: contain !important; 
  max-height: 100% ;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;  /* Add this for extra centering */
}


.video-wrap {
  position: relative;
  width: 90%;
  height: 90%;
  overflow: hidden;
}

.video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 잘리지 않게 */
  object-position: center;
}


.mute-btn {
  position: absolute;
  bottom: calc(var(--padTop, 0px) + 8px);
  right: calc(var(--padRight, 0px) + 8px);
  z-index: 2;
  color: var(--main-font-color);
  background-color: transparent;
  mix-blend-mode :difference;
  border: 0;
  padding: 6px 8px;
  line-height: 1;
  cursor: pointer;
}

.caption{
  position: absolute;
  background-color: transparent;  
  top: 0;
  width: 60vw; /* 화면 너비의 60% */
  max-width: 1024px;
  padding-top: 7px;
  padding-left: 7px;
  z-index: 99;
  color: var(--main-font-color);
  mix-blend-mode :difference;
}



.caption a {
  color:#575757 ;
  pointer-events: auto;
}



#slide-counter,
#slide-caption {
  display: inline;   /* 또는 inline-block */
}


.infoContainer{
  padding-top: 0px;
  padding-left: 7px;
  color:#808080;
  padding-bottom: 5vh; 
  background-color: transparent;
  mix-blend-mode :difference;

}

.infoContainer li{
 list-style: none;
  background-color: transparent;
  mix-blend-mode :difference;
}


.infoContainer details ul{
margin-top: 0.3rem;
margin-bottom: 0.4rem;
transition: transform 4s ease, padding-bottom 4s ease;
background-color: transparent;
mix-blend-mode :difference;
}

.listRotate{
  transform-origin: top left;
  line-height: 1.6;
  transition: var(--animation-transition);
  padding-bottom: 0;
  transform: rotate(-3deg);
  padding-top: 0.4rem;
  user-select: none;             
  -webkit-user-select: none;    
  -ms-user-select: none;
  -webkit-touch-callout: none;   
  touch-action: manipulation;  
}






.experience p,
.legal p {
  transform-origin: top left;
  line-height: 1.6;
  transition: var(--animation-transition);
  padding-bottom: 0;
  transform: rotate(-3deg);
   user-select: none;             
  -webkit-user-select: none;    
  -ms-user-select: none;
  -webkit-touch-callout: none;   
  touch-action: manipulation;  
   cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.experience p:active,
.legal p:active {
  transform: rotate(3deg);
  padding-bottom: 1.6rem;
}

.active {
  padding-bottom: 1.6rem;   
  transform: rotate(3deg);         
}




.bio{
  margin-top: 0.7rem;
  color: var(--main-font-color);
}



/* bio-contact animation */
/* .rotateOnHover{
  transition: all 4s ease;
  transform-origin: left bottom;
} */

.rotateOnHover:hover{
transform: rotate(-3deg); 
}


.rotateOnHover{
  transition: var(--animation-transition);
  transform-origin: left bottom;
   user-select: none;             
  -webkit-user-select: none;    
  -ms-user-select: none;
  -webkit-touch-callout: none;   
  touch-action: manipulation;     
}

.rotateOnHover.rotated {
  transform: rotate(-3deg);
  padding-top: 0.8rem;
}




 .mainSummary,
 .subSummary {
  display: block;              
  will-change: transform;       
  transform: rotate(0deg); 
  transform-origin: top left;
  transition: transform 4s ease; 
}

/* details 열렸을 때만 회전 */
.infoContainer details[open] > .mainSummary {
  transform:  rotate(-3deg);
}
.infoContainer .subCategorie details[open] > .subSummary {
  transform:  rotate(-3deg);
}

@media (hover: hover) {
  .infoContainer details .mainSummary:hover { transform:  rotate(-3deg); }
  .subSummary:hover { transform:  rotate(-3deg); }
  .experience p:hover,
  .legal p:hover{ 
    padding-bottom: 1rem;
    transform: rotate(3deg);
  }
  .informationBtn:hover { transform: rotate(-3deg); }  /* ADD this line */
}





.infoContainer summary { cursor: pointer; }


.contact{
  padding-top: 1rem;
  padding-bottom: 1rem;
   color: var(--main-font-color);
}

.contact a{
  color: var(--main-font-color);
}

.contact h2 {
font-weight: 100;
}


.experience p:first-child {
margin-top: 0rem;
}

.experience p {
margin-top: 1rem;
}

.legal p {
  margin-top: 1rem;
  
}




@media screen and (max-width: 1024px) {
  .swiper{
    width: 95dvw;
    height: 90dvh;
  }

  .caption{
    width: 96dvw; 
    margin: 1dvw;
    pointer-events: none;  /* Caption doesn't intercept touches */
  }
  
  .caption a {
    pointer-events: auto;  /* Links still work */
  }

  .bottom{
    z-index: 99;
    pointer-events: none;  /* Bottom nav doesn't intercept touches */
  }
  
  .bottom a {
    pointer-events: auto;  /* Links/buttons still work */
  }
}

@media screen and (max-width: 820px) {
 
}

@media screen and (max-width: 430px) {
 
}