#nav-bar{
    display: flex;
    justify-content: space-between; /* 로고와 카트를 양끝으로 배치 */
    align-items: center;
    background-color: #c9c6c6;
    position: fixed;
    width: 100%;
    height: 40px;
    top:0;
    left:0;
    box-sizing: border-box;
    border-bottom: 2.5px solid #262626;
    box-shadow: inset 0 2.5px #eee, inset 0 -2.5px #bbb, 0 10px 20px rgba(0, 0, 0, .06);
    z-index: 1000; /* 다른 요소 위에 표시 */
}

#logo{
    order: 2;
    display: flex;
    height: 100%;
    text-transform: uppercase;
    text-align: center;
    align-items:center;
    white-space: nowrap;
}

#logo-text{
    font-family: 'figtree',sans-serif;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: 800;
    font-size: 26px;
    margin-left: 25px;
    display: inline;
}
/* #logo img {
  display: none;
  width: 45px;
  height: 40px;
  margin-left: 20px;
  vertical-align: middle;
} */

#logo-text-short{
    display: none; /* 기본적으로 숨김 */
    font-family: 'figtree',sans-serif;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: 800;
    font-size: 26px;
    margin-left: 25px;
}
@media (max-width: 650px) {
  #logo-text {
    display:none;
  }
  #logo-text-short {
    display: inline; /* 화면이 작아지면 짧은 텍스트 표시 */
  }

  /* ✅ hover 시 원본 텍스트 여전히 숨김 */
  #logo-text-short:hover {
    color: rgb(133, 39, 39);
  }
}

#logo a:hover{
    color: rgb(133, 39, 39);
}
/*-------------cart 파트-------------*/
/*-----------nav-bar 오른쪽----------*/
#cart-container{
  flex-shrink: 0;
  display: flex;
  padding-left: 18px;
  box-shadow:
    inset 1px 0 0 #999,    /* 첫 번째 선 (같은 위치에 있는 border-left 역할) */
    inset 2px 0 0 #c9c6c6,    /* 두 번째 선 */
    inset 3px 0 0 #ffffff;    /* 세 번째 선 */
}

#cart{
    order: 2;
    display: inline-flex;       /* 텍스트+스팬을 한 줄로 묶고 */
    font-family: 'figtree',sans-serif;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: 800;
    font-size: 26px;
    margin-right: 14px;
    cursor: pointer;
}

#cart-counter{
  display: inline-block;      /* 숫자만 블록처럼 취급 */
  min-width: 1ch;
  text-align: right;

}

#cart:hover{
    color: rgb(133, 39, 39);
}

/*---------------------------------*/

body{
    user-select: none;
    height: 100vh;
    /* 콘크리트 */
    background-image: url('/images/concrete.png'),
    linear-gradient(to left, #B55429, #6c1803);
    background-attachment: fixed;
    background-size: auto;
    background-position: center center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    margin: 0;
    overflow: hidden;
}

main {
    margin-top: 40px; /* 상단에 여백 추가 */
    margin-left: -8px;
    height: calc(100vh - 30px); /* 화면 높이에서 nav-bar 제외 */
    box-sizing: border-box;
}

.folder {
  text-align: center; /* 아이콘과 텍스트를 중앙 정렬 */
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  position: relative;
  display: inline-block; /* 아이콘 크기 고정 */
  background-size: contain; /* 배경 이미지를 폴더 크기에 맞게 축소 */
  background-repeat: no-repeat; /* 배경이 반복되지 않게 */
  background-position: center center; /* 배경을 중앙에 배치 */
}
.grid-container {
  padding:23px 23px;;
  display: grid;
  grid-template-columns: 100px;
  grid-template-rows: 115px 115px 115px 115px 115px 115px;  /* 6개의 100px 행 */
  grid-column-gap: 0px;
  grid-row-gap: 10px;
  justify-items: center;  /* 그리드 셀 내 가로 중앙 정렬 */
  align-items: center;    /* 그리드 셀 내 세로 중앙 정렬 */
}

.grid-container > div {
  position: relative; /* 내부에 absolute 요소의 기준 */
}

.folder img {
    width: 70px; /* 아이콘 크기 */
    height: 70px;
    margin-bottom: -15px; /* 이미지와 텍스트 간격 */
    z-index: 1;
    position: absolute;  /* 절대 위치 지정 */
    left: 50%; /* 가로 중앙 정렬 */
    top: 15px;  
    transform: translate(-50%, -20%);
    -webkit-user-drag: none; /* 크롬, 사파리 */
    user-drag: none;         /* 표준 (지원 브라우저 제한적) */
}

.folder-open img {
  content: url('/images/folder_opened.png');  /* 열린 폴더 이미지 */
  width: 70px;  /* 열린 폴더의 너비 */
  height: 70px; /* 열린 폴더의 높이 */
  margin-bottom: -15px;
  left: 50%; /* 기본 중앙 기준 유지 */
  /* 열린 상태일 때 원래 55px 이미지의 왼쪽 고정 위치를 유지 (55/2 = 27.5px) */
  transform: translate(-50%, -20%);
  -webkit-user-drag: none; /* 크롬, 사파리 */
  user-drag: none;         /* 표준 (지원 브라우저 제한적) */
}

.folder p {
  font-family:'figtree',sans-serif;
  position:absolute;
  top: 71px; /* 이미지 상단 15px + 이미지 높이 44px + 12px 간격 */
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: white;
  font-size: 14px;
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0.6); /* 검은색 박스 */
  padding: 2px 4px;
  display: inline-block; 
  border-radius: 5px;
  line-height: 1.2;   /* 16px × 1.1 = 약 17.6px */
 
}

#stay_hydrated img.stay-hydrated-icon {
  width: 75px !important;     /* 필요 시 조절 */
  height: 75px !important;    /* 필요 시 조절 */
  transform: translate(-50%, -20%);
  position: absolute;


}

 /* stay-hydrated 폴더 열림 */
#stay_hydrated.folder-open img.stay-hydrated-icon {
  content: url('/images/open_bottle.png'); /* 열린 폴더 이미지 */
  width: 75px !important;    /* 필요 시 조절 */
  height: 75px !important;    /* 필요 시 조절 */
  transform: translate(-50%, 20%);
  rotate: 45deg;
  /* 닫힌 이미지(55px) 기준 왼쪽 정렬 유지 보정 */
}




#lookbook, #shop, #stay_hydrated {
  display: flex;
  flex-direction: column;
  align-items: center;  /* 폴더 내 요소들 가로 중앙 정렬 */
  justify-content: center;  /* 폴더 내 요소들 세로 중앙 정렬 */
  width: 100%;  /* 그리드 셀 전체 너비 사용 */
  height: 100%;  /* 그리드 셀 전체 높이 사용 */
}

#lookbook{
  grid-column: 1;  /* 첫 번째 열 */
  grid-row: 1;     /* 첫 번째 행 */ 
}
#shop {
  grid-column: 1;  /* 첫 번째 열 */
  grid-row: 2;     /* 두 번째 행 */
}

#stay_hydrated {
  grid-column: 1;  /* 첫 번째 열 */
  grid-row: 3;     /* 세 번째 행 */
}


#lookbook:hover,
#shop:hover,
#stay_hydrated:hover {
    background-color: rgba(0, 0, 0, 0.35); /* 검은색 배경 */
    border-radius: 8px; /* 모서리 라운딩 */
    border: 2px solid #262626; /* 테두리 */
}


/*

팝업창

*/

/* 팝업 창 스타일 */
.popup {
    font-family: 'Figtree',sans-serif; /*글꼴*/
    font-weight: 800;
    font-size: 10px;
    position: fixed;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    background: white;
    box-sizing: border-box;
    border: 2px solid black;
    box-shadow: -0.3px -0.3px 0px white,
                3px 2px 0px rgb(42, 42, 42);
  }
  
  /* 팝업 헤더 */
  .popup-header {
    display: flex;
    justify-content: space-between;
    height: 30px; /* 헤더 높이*/
    width: 100%; /* 헤더 너비 */
    align-items: center;
    box-sizing: border-box; /* 패딩 포함 너비 계산 */
    background-color: #c9c6c6;
    color: rgb(0, 0, 0);
    border-bottom: 1.5px solid #262626;
    /* border-radius: 1px 1px 0 0;  */
    box-shadow: inset 0 2px #eee, /*상단 그림자*/
                inset 0 -2px #bbb, /*하단 그림자*/
                inset 2px 0 #eee, /*우측 그림자*/
                inset -2px 0 #eee; /*좌측 그림자*/ 
  }


  /* 제목 */
  .popup-title {
    text-decoration: none;
    white-space: nowrap;
    color: rgb(0, 0, 0);
    font-weight: 800;
    font-size: 20px;
    margin-left: 20px;
  }

    /* 닫기 버튼 */
.popup-close {
    width: 22px; /* 버튼 크기 */
    height: 22px; 
    background-color: #c9c6c6; /* 기본 배경색 */
    border: 1px solid #fff; /* 윗면 테두리 */
    box-shadow: inset 1px 1px 0px #fff, /* 윗면 흰색 */
                inset -3px -3px 0px black, /* 아랫면 검은색 */
                1px 1px 0px #b1b1b1; /* 외부 음영 */
                /* -1px -1px 0px #262626; 외부 테두리 */
    font-size: 22px; /* 버튼 안 텍스트 크기 */
    font-weight: bold; /* 텍스트 강조 */
    color: black; /* 텍스트 색상 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* 커서 변경 */
    text-align: center; /* 텍스트 정렬 */
    margin-right: 8px; /* 오른쪽 여백 */
    padding:0;
}

.popup-close:hover {
    box-shadow: inset -2px -2px 0px #fff, /* 눌린 효과: 윗면 흰색 */
                inset 3px 3px 0px black; /* 눌린 효과: 아랫면 검은색 */
    background-color: #8d8a8a; /* 살짝 어두운 배경 */
}
/*닫기 버튼 눌렀을 때*/
.popup-close:active {
    box-shadow: inset -2px -2px 0px #262626, /* 눌린 윗면 검은색 */
                inset 2px 2px 0px #eee; /* 눌린 아랫면 흰색 */
    background-color: #8d8a8a; /* 더 어두운 배경 */
    color: #e1e1e1; /* 텍스트 색상 */
}
  /* .popup-header .popup-line {
    user-select: none;
    -webkit-user-drag: none;
    float: right;
    margin-left: 0px;
    width: 100%; 
    height: 20px;
    
} */


  .popup-body{
    color: black;
    /* background-color: #EDEFEF; */
    background-color:#fffafa;
    background-image: url('/images/concrete.png');
    height: calc(100% - 30px); /* 팝업창 높이에서 헤더 높이 뺀 값 */
    overflow-x: hidden; /* 가로 스크롤 */
    overflow-y: auto; /* 세로 스크롤 */
    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.2); /* 위쪽과 왼쪽 음영 */
    box-sizing: border-box; /* 팝업창 크기 유지 */
  }

  .popup-body::-webkit-scrollbar {
    width: 20px; /* 세로 스크롤바 너비 */
    height: 20px; /* 가로 스크롤바 높이 */
}
  .popup-body::-webkit-scrollbar-track {
    margin-top: 2px; /* 스크롤바와 테두리 사이 여백 */
    margin-bottom: 1.5px;  /* 스크롤바와 테두리 사이 여백 */
     /* 상단 테두리 */
    border-left: 1.5px solid black; /* 좌측 테두리 */
    background: rgba(120, 111, 111, 0.2); /* 연한 회색 */
}
  .popup-body::-webkit-scrollbar-thumb {
    background: #a0a0a0; /* 진한 회색 */
    border: 1px solid; /* 모든 방향의 너비와 스타일 지정 */
    border-color: #a0a0a0 #3c3737 #3c3737 #a0a0a0; /* 방향별 색상 지정 (상, 우, 하, 좌) */
    box-shadow: inset 1px 1px #eee, /*상단 그림자*/
                inset -1px -1.5px #414141, /*하단 그림자*/
                inset 1px 0 #eee, /*우측 그림자*/
                inset -1.5px 0 #414141; /*좌측 그림자*/
}
  .popup-body::-webkit-scrollbar-thumb:hover {
    background: #808080; /* 더 진한 회색 */
}



/*------------notification 팝업------------*/

.notification-main p {
  font-family: 'Figtree',sans-serif;
  font-weight: 800;
  font-size: 24px;
  text-align: center; /* 텍스트 중앙 정렬 */
  margin-top: 60px;
  margin-bottom: 0px;

}
.notification-comment {
  font-family: 'Figtree',sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-align: center; /* 텍스트 중앙 정렬 */
}

.notification-ascii{
  font-family: 'Figtree',sans-serif;
  font-weight: 600;
  font-size: 6.8px;
  text-align: center; /* 텍스트 중앙 정렬 */
  overflow: hidden; /* 내용이 넘치지 않도록 설정 */
  margin: -60px 0 0 0;
}
.notification-ascii pre {
  white-space: pre-wrap; /* 줄 바꿈 허용 */
  margin: 0; /* 기본 여백 제거 */
  padding: 0; /* 기본 패딩 제거 */
}
/*------------------------------------*/

/*--------------CART 팝업--------------*/

  .popup[data-title="CART"] {
    position: fixed;
    right: 1px; /* 오른쪽에 붙도록 설정 */
    transform: translateY(-50%); /* 세로 중앙 정렬 */
    animation: slideDown 0.6s ease-in-out forwards; /* 팝업 애니메이션 */
}
  @keyframes slideDown {
  from {
    transform: translateY(-200%); /* 위에서 시작 */
    opacity: 1;
  }
  to {
    transform: translateY(-50%);   /* 중앙 위치로 도착 */
    opacity: 1;
  }
}
  .cart-content-default h1{
    font-family: 'Figtree',sans-serif;
    font-weight: 800;
    text-align: center; /* 텍스트 중앙 정렬 */
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 80px;
  }
  .cart-content-default pre{
    font-family: 'Figtree',sans-serif;
    font-size:12px;
    white-space: pre-wrap; /* 줄 바꿈 허용 */
    margin: 0 0 0 20px; /* 기본 여백 제거 */
  }

  /*---------active cart 팝업---------*/

  .popup[data-title="CART"] .popup-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    max-height: 100vh;
    scroll-behavior: auto; /* or smooth */
  }

  .cart-item-container{
    flex: 1 1 auto;
  }

  .cart-content-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
  }
  .cart-item-img-wrap{
    height: 240px;
    overflow: hidden;         /* ✅ 넘치는 부분 숨기기 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px; 
  }
  .cart-item-img-wrap img{
    height: 240px;
    object-fit: contain;
    transform-origin: center center; /* 이미지 중심을 기준으로 확대 */
    transform: scale(1.4);
    -webkit-user-drag: none; /* 크롬, 사파리 */
    user-drag: none;         /* 표준 (지원 브라우저 제한적) */
  }
  .cart-item-info-active {
    display:flex;
    flex-direction: column;
    justify-content: center;
  }
  .cart-item-title {
    font-family: 'Figtree',sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 16px;

  }
  .cart-item-color-size {
    font-family: 'Figtree',sans-serif;
    font-weight: 200;
    font-size: 13px;
    text-transform: uppercase; /* 소문자 변환 */
    text-align: center;
    letter-spacing: 0.12px;
    line-height: 1.33;
  }
  
  .cart-item-price {
    font-family: 'Figtree',sans-serif;
    font-weight: 200;
    font-size: 13px;
    text-align: center;
    letter-spacing: 0.12px;
    line-height: 1.33;
    margin-bottom: 8px;

  }
  .cart-quantity-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  .btn-cart-remover{
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
  }
  .btn-cart-remover:hover path{
    stroke: rgb(133, 39, 39); /* 아이콘 색상 변경 */
  }

  .cart-item-quantity{
    display: flex;
    margin: 0 10px;
    font-family: 'Figtree',sans-serif;
    font-weight: 200;
    font-size: 12px;
  }
  .btn-cart-adder{
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;

  }
  @keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
  }

  .shake {
    animation: shake 0.3s ease;
  }

  .btn-cart-adder:hover path {
    stroke: rgb(133, 39, 39); /* 아이콘 색상 변경 */
    
  }

  .cart-actions{
    display: flex;
    flex: 0 0 80px;   /* ← shrink 방지 + 고정 높이 */
    min-height: 80px; /* 안전장치 */
    background-color: #c9c6c6;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-top: 2.5px solid #262626;
    box-shadow: inset 0 -2.5px #bbb,  
                inset 0  2.5px #eee,
                inset 2px 0 #eee,
                inset -2px 0 #eee;
    padding: 0 0;
    position: sticky;   /* sticky 제거 */
    bottom: 0px; /* 화면 하단에 고정 */
    height: 120px;

  }

  .btn-checkout{
  display: flex;
  justify-content: center;
  align-self: center;
  font-family: 'Figtree',sans-serif;
  background: #a0a0a0; /* 진한 회색 */
  color: #262626; /* 검은색 텍스트 */
  border: 1px solid; /* 모든 방향의 너비와 스타일 지정 */
  border-color: #a0a0a0 #3c3737 #3c3737 #a0a0a0; /* 방향별 색상 지정 (상, 우, 하, 좌) */
  box-shadow: inset 2px 2px #eee, /*상단 그림자*/
              inset -2px -1.5px #414141, /*하단 그림자*/
              inset 2px 0 #eee, /*우측 그림자*/
              inset -1.5px 0 #414141; /*좌측 그림자*/
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.1s ease;
}
  .btn-checkout:hover {
    background: #808080; /* 더 진한 회색 */
    box-shadow: inset 2px 2px #414141, /*상단 그림자*/
                inset -2px -1.5px #eee, /*하단 그림자*/
                inset 2px 0 #eee, /*우측 그림자*/
                inset -1.5px 0 #414141; /*좌측 그림자*/
  }
  .btn-checkout:active {
    background: #a0a0a0; /* 더 진한 회색 */
    box-shadow: inset 2px 2px #eee, /*상단 그림자*/
                inset -2px -1.5px #414141, /*하단 그림자*/
                inset 2px 0 #eee, /*우측 그림자*/
                inset -1.5px 0 #414141; /*좌측 그림자*/ 
                
  }
  


/*------------------------------------*/

/*------------LOOKBOOK 팝업------------*/



  .lookbook-content {
    margin: 5px;
  }

  .lookbook-image-container {
  width: 100%; /* 부모 컨테이너가 화면 전체를 사용하도록 설정 */
  }

  .lookbook-image-list ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0px;
    margin: 0px;
    gap: 0;
  }
  .lookbook-image-item {
    width: 20%; /* 5개 열 */
    padding: 5px 0 5px 0; /* 상단과 하단에 여백 추가 */
    box-sizing: border-box;
    cursor: pointer;
  }

  .lookbook-image-wrap {
  width: 100%;
  padding-top: 100%; /* 정사각형 비율 유지 */
  position: relative;
  }

  .lookbook-image {
    background-image: url(/images/paper.webp);
    background-size: 60px auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;  
    margin: 0 13px 0 13px; /* 좌우 여백 추가 */
  }
  .lookbook-image-title{
    font-family: 'Figtree',sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    margin-top: -16px;
    color: black;
  }

  /*------------------------------------*/

  /*--------------shop 팝업--------------*/
  .shop-grid {
    margin: 2px;
    margin-bottom: 8px;
    flex: 1;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .shop-item-container {
    object-fit: cover;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0px 5px 0px 5px;
  }

  .shop-item-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    -webkit-user-drag: none; /* 크롬, 사파리 */
    user-drag: none;         /* 표준 (지원 브라우저 제한적) */
  }

  .shop-image-container {
    position: relative;
    height: 420px;
    margin-top: 10px;
    margin-bottom:5px;
    cursor: pointer;
  }
  .coming-soon {
  position: absolute;
  top: 0;
  left: 8.2%;
  width: 337px;
  height: 100%;
  background-image: url("/images/dirt.png");
  background-color: rgba(114, 110, 110, 0.7); 
  z-index: 1;
  object-fit: center;
  pointer-events: none; 
  }

  .coming-soon_1 {
    position: absolute;
    top: 0;
    left: 10.9%;
    width: 315px;
    height: 100%;
    background-image: url("/images/dirt.png");
    background-color: rgba(114, 110, 110, 0.7); /* 👈 흰색 반투명 */
    z-index: 1;
    object-fit: center;
    pointer-events: none; /* 클릭 막지 않도록 */
  }
  
  .coming-soon img,
  .coming-soon_1 img {
    position: absolute;
    top: 20px;
    left:47%;
    transform: translate(0, 0);
    width: 20px !important; /* 이미지 크기 */
    height: 20px !important; /* 이미지 크기 */
  }

  .hover_img {
   display: none !important;
  }

  /*잠시 보류 */
  /* .hover_img {
    position: absolute; 
    top: 30px;
    left: 0;
    opacity: 0;
    z-index: 1;
  } */

  /* #shop-item-container:hover .hover_img {
    opacity: 1;
  }

  #shop-item-container:hover img:not(.hover_img) {
    opacity: 0;
  } */
   /*----------------보류----------------*/

  .shop-item-info {
    font-family: 'Figtree',sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .shop-item-title {
    box-sizing: border-box;
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 2px;
  }
  .shop-item-color {
    font-weight: 200;
    font-size: 12px;
  }
  .shop-item-price {
    font-weight: 200;
    font-size: 12px;
  }

  /*---------------------------------------*/

  /*------------item 팝업------------*/
    .popup.shop-popup .popup-body { 
      overflow: hidden !important;
    }

   .item-content-wrapper{
    margin-top: 2px;
    margin-left: 2px;
    box-sizing: border-box;
    display: flex; /* 플렉스 박스 사용 */
    flex-direction: row; /* 가로 방향으로 정렬 */
    height: 100%; /* 팝업 크기 기준으로 높이 설정 */
    align-items: flex-start; /* 아이템 상단 정렬 */
   }

   .item-image{ 
    flex:2;
    display: flex; /* 내부 이미지 정렬을 위해 flex 사용 */
    justify-content: center;
    overflow: hidden; /* 이미지가 영역을 벗어나지 않도록 설정 */
    
   }
   .item-image img {
    height:420px;
    display: flex;
    justify-content: center; /* 이미지 가로 중앙 정렬 */
    align-items: flex-start; /* 이미지 상단 정렬 */ 
    margin-top: 30px; 
    object-fit: cover;
    -webkit-user-drag: none; /* 크롬, 사파리 */
    user-drag: none;         /* 표준 (지원 브라우저 제한적) */
   }
   /*--paper_1.webp 이미지 스타일 */
   .item-image img[src*="paper_1.webp"] {  
    width: 200px;
    display: flex;
    justify-content: center; /* 이미지 가로 중앙 정렬 */
    align-items: flex-start; /* 이미지 상단 정렬 */ 
    object-fit: contain;
    -webkit-user-drag: none; /* 크롬, 사파리 */
    user-drag: none;         /* 표준 (지원 브라우저 제한적) */
    }

   .item-info-container {
    flex: 1.5; /* 비율 설정 */
    /* overflow-y: auto;  */
    box-sizing: border-box;
    margin-top: 30px; /* 상단 여백 */
    margin-left: 15px; /* 왼쪽 여백 */
    margin-right: 15px;
  }

  .item-info {
    font-family: 'Figtree',sans-serif;
    display: flex;
    flex-direction: column; /* 세로 방향으로 정렬 */
  }

  .item-info-header {
    display: flex;
    flex-direction: column; /* 세로 방향으로 정렬 */
    height: 120px;
  }
  .item-info-body{
    height: 220px;
  }

  .item-title {
    font-weight: 800;
    font-size: 26px;
    line-height: 26px;
    margin-top: 13px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
  }
  .item-color{
    font-weight: 500;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
    padding-left: 5px;
  }
  .item-price {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    padding-left: 5px;
  }
  .item-details-toggle {
    width: 270px;
    display: block;
  }

  .item-details {
    overflow: hidden;
    max-height: 0; /* 초기에는 숨김 */
    height: 100%;
    list-style-position: none;
    margin-top: 0px;
    margin-left: 0px;
    padding: 0;
    transition: all 0.4s ease;
  }
  .item-details.open {
    transition: all 0.4s ease;
    margin-top:4px;
    max-height: 200px; /* 충분한 높이로 설정 */
    font-size: 14px;
  }
  .btn-details-toggle {
    display: flex;
    justify-content: space-between; /* 텍스트 왼쪽 / 화살표 오른쪽 */
    align-items: center;            /* 세로 가운데 정렬 */
    background: none;
    border: none;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    width: 100%;
    text-align: left;  /* 텍스트 왼쪽 정렬 (옵션) */
    font-family: 'Figtree',sans-serif; /* 글머리 기호 폰트 */ 
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.2px;
    cursor: pointer;
    padding: 0 6px 3px 5px;
    color:black;

  }

  .arrow-icon {
  transition: transform 0.4s ease;
  transform-origin: center; /* 회전 중심 정확히 */
  margin-left: 6px;
  }

  .arrow-icon.rotate {
    transform: rotate(180deg);
  }

  .item-details li::before {
    content: "•"; /* 글머리 기호 */ 
    font-family: 'Figtree',sans-serif; /* 글머리 기호 폰트 */
    color: #262626; /* 글머리 기호 색상 */
    font-weight: 700; /* 글머리 기호 두껍게 */
    margin-right: 3px;
    display: inline-block;
  }
  .item-details li {
    font-family: 'Figtree',sans-serif; /* 글머리 기호 폰트 */
    font-weight: 400;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
  }
  .item-details p{
    font-family: 'Figtree',sans-serif; /* 글머리 기호 폰트 */
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 3px;
    margin-top: 8px; /* 상단 여백 제거 */
  }
  .item-size-toggle{
    width: 270px;
    display: block;
  }

  .btn-size-toggle{
    display: flex;
    justify-content: space-between; /* 텍스트 왼쪽 / 화살표 오른쪽 */
    align-items: center;            /* 세로 가운데 정렬 */
    background: none;
    border: none;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    width: 100%;
    text-align: left;  /* 텍스트 왼쪽 정렬 (옵션) */
    font-family: 'Figtree',sans-serif; /* 글머리 기호 폰트 */ 
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.2px;
    cursor: pointer;
    padding: 0 6px 3px 5px;
    color: black;
  }
  .item-size{
    transition: all 0.4s ease;
    overflow: hidden;
    max-height: 0;
    font-family: 'Figtree',sans-serif; /* 글머리 기호 폰트 */

    
  }
  .item-size.open {
    transition: all 0.4s ease;
    margin-top:4px;
    max-height: 40px; /* 충분한 높이로 설정 */
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding-left: 5px;

  }
  

/* .item-details li{
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
  } */

  /*------------add to cart 버튼------------*/
  .item-actions {
  display: flex;
  margin-right: 30px;
  justify-content: flex-end;
  }

  .btn-add-to-cart {
  background: #a0a0a0; /* 진한 회색 */
  color: #262626; /* 검은색 텍스트 */
  border: 1px solid; /* 모든 방향의 너비와 스타일 지정 */
  border-color: #a0a0a0 #3c3737 #3c3737 #a0a0a0; /* 방향별 색상 지정 (상, 우, 하, 좌) */
  box-shadow: inset 2px 2px #eee, /*상단 그림자*/
              inset -2px -1.5px #414141, /*하단 그림자*/
              inset 2px 0 #eee, /*우측 그림자*/
              inset -1.5px 0 #414141; /*좌측 그림자*/
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.1s ease;
}
  .btn-add-to-cart:hover {
    background: #808080; /* 더 진한 회색 */
    box-shadow: inset 2px 2px #414141, /*상단 그림자*/
                inset -2px -1.5px #eee, /*하단 그림자*/
                inset 2px 0 #eee, /*우측 그림자*/
                inset -1.5px 0 #414141; /*좌측 그림자*/
  }
  .btn-add-to-cart:active {
    background: #a0a0a0; /* 더 진한 회색 */
    box-shadow: inset 2px 2px #eee, /*상단 그림자*/
                inset -2px -1.5px #414141, /*하단 그림자*/
                inset 2px 0 #eee, /*우측 그림자*/
                inset -1.5px 0 #414141; /*좌측 그림자*/ 
                
  }

  /*------------팝업------------*/


  /*------------stay hydrated 팝업------------*/

  .archive-content {
    margin: 5px;
  }

  .archive-image-container {
  width: 100%; /* 부모 컨테이너가 화면 전체를 사용하도록 설정 */
  }

  .archive-image-list ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0px;
    margin: 0px;
    gap: 0;
  }
  .archive-image-item {
    width: 20%; /* 5개 열 */
    padding: 5px 0 5px 0; /* 상단과 하단에 여백 추가 */
    box-sizing: border-box;
    cursor: pointer;
}
  
  .archive-image-wrap {
  width: 100%;
  padding-top: 100%; /* 정사각형 비율 유지 */
  position: relative;
}

  .archive-image {
    background-image: url(/images/paper_1.webp);
    background-size: 60px auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;  
    margin: 0 13px 0 13px; /* 좌우 여백 추가 */
  }
  .archive-image-title{
    font-family: 'Figtree',sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    margin-top: -16px;
    color: black;
  }

  /*------------lookbook-img 팝업------------*/
  .lookbook-popup .popup-body {
    overflow: hidden; /* 스크롤 제거 */
  }

  /*------------archive-img 팝업------------*/
  .archive-popup .popup-body {
    overflow: hidden; /* 스크롤 제거 */
  }

  /*==================모바일==================*/
  /* 공통: iOS 안전영역 변수 (노치) */
  :root{
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
  }

 /* ===== 공통: 최신 뷰포트 단위로 교체 & safe-area 보정 ===== */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 기본 바디의 100vh를 dvh로 교체 */
body{
  height: 100dvh; /* 실기 툴바 변화 반영 */
}

/* 메인도 dvh 기준 */
main{
  height: calc(100dvh - 40px); /* nav 40px 높이 반영(모바일에선 아래에서 오버라이드) */
}



/* ===== CART 팝업: transform 충돌 제거 & 우측 고정 ===== */
.popup[data-title="CART"]{
  left: auto !important;
  right: 0 !important;
  top: 50%;
  transform: translateY(-50%) !important; /* X축 이동 제거 */
  width: min(420px, 100svw); /* 데스크톱에선 사이드 패널 느낌, 모바일은 아래서 풀로 */
}

/* ====================== 모바일 전용 ======================= */
/* ====================== 모바일 전용 ======================= */
/* ====================== 모바일 전용 ======================= */

@media (max-width: 768px){
  /* 네비 */
  html, body {
    overflow: hidden;          /* 바탕 스크롤 막기 */
    overscroll-behavior: none; /* 상하/좌우 체인 스크롤 차단 */
  }

  #nav-bar{ height: 56px; }
  main{
    margin-top: 56px;
    height: calc(100dvh - 56px);
    overflow-x: hidden;
    overflow-y: hidden;
  }

  /* 모든 팝업을 풀스크린(네비 아래) */
  .popup{
    width: 100svw !important;
    height: calc(100dvh - 56px) !important; /* 네비 제외 */
    top: calc(50% + 28px) !important;       /* 56/2 보정 */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 0;
  }

  /* CART만 가로 중앙이 아니라 우측고정 + X축 이동 제거 */
  .popup[data-title="CART"]{
    left: auto !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 100svw !important;
  }

  /* 내부 스크롤 정책: 겹치지 않게 조정 */
  .popup.shop-popup .popup-body{ 
    overflow: hidden !important; 
  }
  /* 팝업 본문은 안전영역만큼 여백 */
.popup-body{
   -webkit-overflow-scrolling: touch;
  padding-bottom: max(0px, var(--safe-bottom));
}
  .item-info-container{
    /* 헤더 30px + 내부 상단여백 등을 넉넉히 제외 */
    max-height: calc(100dvh - 56px - 30px - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 폴더 그리드는 탭타겟 크게 */
  .grid-container{
    grid-template-columns: 100px;
    grid-row-gap: 12px;
    padding: 20px 16px;
  }


/*==================notification 팝업==================*/

.notification-ascii{
  position: absolute;
  top:70%;
  left:50%;
  transform: translate(-50%, -50%);
}

/*==================lookbook 팝업==================*/
.lookbook-image-list ul {
  margin: 18px;
}
.lookbook-image-item {
    width: 33% ; /* 3개 열 */
}

/*==================shop 팝업==================*/
.shop-image-container{ 
  position: relative; 
  height: auto;
  aspect-ratio: 3 / 4; 
  width: 100%;
}
.shop-item-container img {
    width: 100%;
    height: 100%;
    object-fit: conver;
    display: block;
}
.coming-soon,
.coming-soon_1{
  left: 0 !important;
  width: 100% !important;
  background-color: rgba(114,110,110,0.5);
  background-image: url("/images/dirt.png");
}
.coming-soon img,
.coming-soon_1 img{
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  width: 20px !important;
  height: 20px !important;
}

/*===============stay hydrated 팝업===============*/
.archive-image-list ul {
  margin:18px;
}
.archive-image-item {
    width:33% ; /* 3개 열 */
}



/*==================item 팝업==================*/
.item-content{
  height:100%;
  box-sizing: border-box;
}
.item-content-wrapper{
  flex-direction: column; /* 세로 방향으로 정렬 */
  align-items: center; /* 가로 중앙 정렬 */

}
#item-content{
  flex:1 1 50% !important;
}
.item-image {
  margin-top: 10px;
  overflow:hidden;
  width:100%;
}
.item-image img {
  height:80%;
  object-fit: contain;
  transform-origin: center center;
  transform: scale(1.5);
}
.item-image img[src*="paper_1.webp"] {
  object-fit: contain;
  padding:30px;
  height:50%;
}


.item-info{
  justify-content: flex-start; /* 상단부터 배치 */  
  overflow-y: auto;
  height:max-content;
}
.item-info-body{
 margin-bottom: 100px;
}

.item-info-header {
  height: 80px;
}
.item-title {
  font-weight: 800;
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.item-color {
  font-weight: 500;
  font-size: 14px;
  padding: 0;
}
.item-price {
  font-weight: 300;
  font-size: 14px;
  padding: 0;
  margin-bottom: 0px;
}
.item-info-body{
  height: max-content;
}
.item-actions-container{
    all:unset;
    display: flex;
    width: 100vw;
    max-width: 100vw;
    min-height: 80px; /* 안전장치 */
    background-color: #c9c6c6;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-top: 2.5px solid #262626;
    box-shadow: inset 0 -2.5px #bbb,  
                inset 0  2.5px #eee,
                inset 2px 0 #eee,
                inset -2px 0 #eee;
    padding: 0 0;
    position: absolute;  
    left: 0;
    right: 0;
    bottom: 0; /* 화면 하단에 고정 */
    height: 80px;
    z-index: 100;

}
.item-actions {
  margin:0px;
}

.btn-add-to-cart{
  display: flex;
  align-items: center;
  justify-content: center;
}

}

/* 작은 폰에서 디테일/사이즈 토글 max-height 확대 */
@media (max-width: 450px){
  .item-details.open{ max-height: 280px; }
  .item-size.open{ max-height: 80px; }
}