/* 1. 기본 초기화 (기존 유지) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  width: 100%;
  background-color: #000000;
  color: #d1d1d1;
  font-family: 'Noto Sans KR', 'Montserrat', sans-serif;
  line-height: 1.6;
}

/* 2. 헤더 설정 */
header {
  width: 100%;
  height: auto;
  background: #000000;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.header-inner {
  max-width: 2800px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
  /* 중앙 배치를 위한 기준점 */
  justify-content: space-between;
  /* 양 끝 정렬 */
}


/* 1) 왼쪽 영역 (로고) */
.logo-container {
flex: 1;
  display: flex;
  justify-content: flex-start;
  /* 왼쪽 정렬로 변경 (균형 유지) */
  align-items: center;
  padding-left: 20px;
  /* 적절한 여백 */
}

/* 2) 중앙 영역 (시계) */
.header-center {
position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 3) 오른쪽 영역 (유저 메뉴) */
.user-menu-container {
flex: 1;
  display: flex;
  justify-content: flex-end;
  /* 오른쪽 정렬로 변경 */
  align-items: center;
  padding-right: 20px;
}

.user-menu {
  display: flex;
  gap: 40px;
  list-style: none;
  /* 점 제거 유지 */
}

/* 나머지 스타일 (기존 크기 유지) */
.main-logo {
  height: 14rem;
  width: 18rem;
  mix-blend-mode: screen;
  margin-bottom: -20px;
}

.logo-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 1;
}

.web-text {
  color: #00d4ff;
  text-transform: uppercase;
}

.challenge-text {
  color: #ffffff;
}

/* 전체 컨테이너 정렬 */
.header-center .clock-display {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

/* 날짜 박스들이 가로로 배치되는 컨테이너 */
.date-container {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 박스 사이 간격 */
  margin-bottom: 12px;
}

/* 년, 월, 일 박스 스타일 (화이트 바탕 + 검은 글자) */
.date-box {
  font-family: 'Montserrat', sans-serif;
  background-color: #ffffff;
  color: #000000;
  font-size: 2.5rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 6px;
  min-width: 50px;
  text-align: center;
}

/* 요일 텍스트 스타일 (배경 없이 하얀 글자) */
.day-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  color: #ffffff;
  font-weight: 500;
  margin-left: 5px;
  letter-spacing: 1px;
}

/* 시간 스타일 (기존 청록색 포인트 유지) */
.current-time {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.8rem;
  background-color: #000000;
  padding: 5px 10px;
  border-radius: 6px;
}

/* 시간 내 영문 단위 (H, M, S) 스타일 */
.time-unit {
  font-size: 1.2rem;
  /* 숫자보다 작게 */
  color: #06fb02;
  /* 단위는 흰색으로 포인트 */
  margin: 0 5px;
  font-weight: 400;
}



@media (max-width: 1500px) {

  .date-box,
  .day-text {
    font-size: 1.5rem;
  }

  .current-time {
    font-size: 1.3rem;
    letter-spacing: 0.3rem;
  }

  .date-container {
    gap: 5px;
  }

  .date-box {
    padding: 2px 8px;
    min-width: 40px;
  }
    .main-logo {
      width: 13rem;
      height: 11rem;
      margin-bottom: -20px;
    }
}


.user-menu a {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}

.user-menu a i {
  font-size: 2.5rem;
  color: #00d4ff;
}

@media (max-width: 1500px) {
  .header-inner {
    flex-direction: column !important;
    position: static !important;
    /* PC형 absolute 설정 해제 */
    padding: 20px 0;
    gap: 1.5rem;
    /* 요소 간 간격 설정 */
  }

  .logo-container,
  .header-center,
  .user-menu-container {
    width: 100%;
    height: auto;
    position: static !important;
    /* 위치 초기화 */
    transform: none !important;
    /* PC형 중앙 정렬 해제 */
    display: flex;
    justify-content: center;
    /* 가로 중앙 정렬 */
    margin: 0 auto;
  }

  .main-logo {
    margin-left: -55px;
  }

  /* 텍스트 크기 일괄 조정 */
  .logo-text,
  .current-date,
  .current-time
   {
    font-size: 1.8rem;
  }

  .current-time {
    letter-spacing: 0.3rem;
    /* 모바일에서는 자간을 조금 줄여 가독성 확보 */
  }

  .user-menu {
    gap: 10px;
    /* 메뉴 아이콘 간격 조정 */
    font-size: 1.2rem;
  }
        .user-menu a {
          font-size: 1.2rem;
        }
        .user-menu a i {
          font-size: 1.8rem;

        }

}


.bodyone {
  width: 100%;
  height: auto;
  height: auto;
  /* 내용에 따라 늘어나도록 설정 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px

}



.overlay-nature {
  width: 86%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  /* 넘치는 이미지 숨김 */
}

.nature-slider-track {
  display: flex;
  width: 500%;
  /* 이미지 5개이므로 가로로 5배 길게 */
  height: 100%;
  /* 1.5초 동안 부드럽게 밀려나도록 설정 */
  transition: transform 5s cubic-bezier(0.45, 0, 0.55, 1);
  will-change: transform;
  /* 모바일 성능 최적화 */
}

.nature-slide {
  width: 20%;
  /* 전체 트랙의 1/5씩 차지 */
  height: 100%;
  background-size: cover;
  background-position: center;
}



.boards-container {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: stretch;

  gap: 5vw;

  width: 90%;

  max-width: 1800px;

  height: 90%;

}



.mirror-board {

  flex: 1;

  display: flex;

}



.metal-frame {

  flex: 1;

  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(5, 5, 5, 0.95));

  backdrop-filter: blur(20px) saturate(180%);



  /* 1. 두꺼운 테두리 설정 (기본 색상은 투명하게 비워둠) */

  border: 35px solid transparent;



  /* 2. 움직이는 메탈 그라데이션 핵심 설정 */

  background-image:

    linear-gradient(rgba(15, 15, 15, 0.9), rgba(15, 15, 15, 0.9)),

    /* 내부 배경 */

    linear-gradient(110deg,

      #333 20%,

      #555 40%,

      #ffffff 50%,

      /* 이 부분이 반사되는 빛입니다 */

      #555 60%,

      #333 80%);

  background-origin: border-box;

  background-clip: padding-box, border-box;

  background-size: 200% 100%;

  /* 그라데이션을 2배로 늘려 흐를 공간을 만듦 */



  border-radius: 20px;

  padding: 3vh 2.5vw;

  display: flex;

  flex-direction: column;

  justify-content: space-between;



  box-shadow:

    0 30px 60px rgb(254, 252, 252),

    inset 0 0 20px rgb(249, 249, 249);



  /* 3. 애니메이션 실행 (6초마다 한 번씩 빛이 흐름) */

  animation: shine-metal 10s linear infinite;

  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



/* 금속 광택 애니메이션 정의 */

@keyframes shine-metal {

  0% {

    background-position: 200% 0;

  }



  100% {

    background-position: -200% 0;

  }

}



/* 마우스 올리면 더 빠르게 번쩍이는 효과 */

.metal-frame:hover {

  transform: translateY(-15px) scale(1.02);

  animation: shine-metal 3s linear infinite;

  /* 호버 시 3초로 속도 증가 */

  border-color: rgba(255, 255, 255, 0.1);

}



.board-body h2 {

  font-size: clamp(2rem, 4vh, 3.5rem);

  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

  /* 글자에도 은은한 광택 */

  text-align: center;


}



.board-body h2 {

  font-size: clamp(2rem, 4vh, 3.5rem);

  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

  /* 글자에도 은은한 광택 */

}



.board-header {

  display: flex;

  align-items: center;

  gap: 15px;

  font-weight: 700;

  font-size: 1.5rem;

  color: #ffffff;

}



.dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

}



.dot.green {

  background: #02f627da;

  box-shadow: 0 0 10px #02f627;

  height: 20px;

  width: 20px;

}



.dot.blue {

  background: #0026ff;

  box-shadow: 0 0 10px #0400ff;

  height: 20px;

  width: 20px;

}

/* 기본적으로 (PC 화면) 모바일용 줄바꿈을 숨깁니다 */
.mobile-br {
  display: none;
}

/* 모바일 화면 (화면 너비 768px 이하) 스타일 */
@media screen and (max-width: 768px) {
  .mobile-br {
    display: inline;
    /* 모바일에서 줄바꿈 태그를 활성화합니다 */
  }
}

/* 1. 컨테이너를 컴퍼지션 판으로 변환 */

.board-body {

  display: grid;

  /* 3열 3행의 불규칙한 그리드 생성 */

  grid-template-columns: 1.2fr 0.8fr 1fr;

  grid-template-rows: 300px 250px;

  gap: 15px;

  padding: 15px;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  box-sizing: border-box;



}



/* 2. 각 영역별 위치 및 색상 지정 (HTML 구조는 그대로 유지) */

.board-body>div {

  display: flex;

  justify-content: center;

  align-items: center;

  transition: 0.4s ease;

  flex-direction: column;

}



.board-body h2 {


  font-size: 2.0rem;

  font-weight: 900;

  letter-spacing: -1px;


}

.board-body p {

  font-size: 1rem;
  text-align: center;

}



/* [적] 회사소개 - 좌측 상단 크게 배치 */

.company {

  grid-column: 1 / 2;

  grid-row: 1 / 3;

  background-color: #e62f21;

  color: #ffffff;

  outline: 3px solid #ffffff;

  outline-offset: -1px;

  border-radius: 5px;

  justify-content: center;
  /* 세로 중앙 */
}



/* [청] 상품안내 - 우측 상단 가로로 길게 */

.business {

  grid-column: 2 / 4;

  grid-row: 1 / 2;

  background-color: #0800ff;

  color: #ffffff;

  outline: 3px solid #ffffff;

  outline-offset: -1px;

  border-radius: 5px;

}



/* [황] ESG경영 - 중앙 하단 */

.contact {

  grid-column: 2 / 3;

  grid-row: 2 / 3;

  background-color: #fac901;

  color: #000000;

  outline: 3px solid #ffffff;

  outline-offset: -1px;

  border-radius: 5px;

}



/* [백] 회사정보 - 우측 하단 */

.esg {

  grid-column: 3 / 4;

  grid-row: 2 / 3;

  background-color: #00ff04be;

  color: #000000;

  outline: 3px solid #ffffff;

  outline-offset: -1px;

  border-radius: 5px;

}



/* 마우스 호버 시 강렬한 대비 효과 */

.board-body>div:hover {

  filter: contrast(1.2) brightness(1.1);

  transform: scale(0.98);

  /* 살짝 눌리는 느낌 */

  cursor: pointer;

}




.board-footer {

  margin-top: 2vh;

  padding-top: 1.5vh;

  border-top: 1px solid #222;

  color: #ff00c8;

  font-size: 1.2rem;

  text-transform: uppercase;

}


/* 컨테이너: 고정 너비 대신 유동적인 너비 설정 */
.simple-order-wrap {
  width: 100%;
  /* 부모 너비에 맞춤 */
  max-width: 1200px;
  /* 최대 너비 제한 */
  margin: 2rem auto;
  padding: 0 20px;
  box-sizing: border-box;
  /* 패딩이 너비에 포함되도록 설정 */
}

/* 한 줄에 하나씩 배치 */
.order-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  width: 100%;
  /* 전체 너비 사용 */
}

/* 라벨: 고정 width(550px)를 제거하고 유동적으로 변경 */
.order-item label {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: inherit;
  width: 100%;
  /* 고정값 550px에서 100%로 수정 */
  max-width: 100%;
  /* 화면보다 커지지 않게 제한 */
}

/* 입력창: max-width 단위를 추가하고 유동적으로 변경 */
.order-item input {
  width: 100%;
  /* 부모 너비의 100% 사용 */
  max-width: 1000px;
  /* 최대 너비 제한 (단위 px 추가) */
  padding: 15px 0;
  font-size: 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid #555;
  color: inherit;
  outline: none;
  box-sizing: border-box;
}

/* 클릭 시 강조 */
.order-item input:focus {
  border-bottom-color: #fff;
}

/* 버튼: 이미 100%로 설정되어 있어 유지하되 모바일 대응 추가 */
.order-btn {
  margin-top: 10px;
  width: 100%;
  padding: 15px;
  /* 패딩 조절 */
  border: 1px solid #333;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.3s;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #2cff02c7;
  outline: 3px solid #ffffff;
  outline-offset: -1px;
}

.order-btn strong {
  font-size: 2rem;
  margin-bottom: 5px;
  color: #000000;
}

.order-btn span {
  font-size: 1.5rem;
  color: #000000;
  font-weight: 700;
}

.order-btn:hover {
  background-color: #fff;
}

.order-btn:hover strong,
.order-btn:hover span {
  color: #0d01fb;
  /* 호버 시 텍스트 색상 변경 일괄 적용 */
}

@media (max-width: 1500px) {

  /* 1. 전체 컨테이너 높이 및 여백 조정 */
  .bodyone {
  height: auto !important;
  min-height: calc(100vh - 10rem);
  padding: 40px 20px !important;
  /* 100px에서 20px로 축소 */
  overflow: hidden;
  }

  /* 2. 보드 컨테이너 세로 배치 */
  .boards-container {
    flex-direction: column !important;
    height: auto !important;
    width: 95% !important;
    gap: 40px !important;
  }

  /* 3. 메탈 프레임 두께 및 패딩 축소 */
  .metal-frame {
    border-width: 15px !important;
    /* 35px에서 축소 */
    padding: 30px 20px !important;
    border-radius: 15px;
  }

  /* 4. 그리드 레이아웃을 한 줄로 변경 (핵심) */
  .board-body {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    grid-template-columns: none !important;
    /* 그리드 해제 */
    grid-template-rows: none !important;
    gap: 15px !important;
    padding: 0 !important;
  }

  /* 5. 내부 박스들(Company, Business 등) 높이 및 스타일 복구 */
  .board-body>div {
    width: 100% !important;
    height: 120px !important;
    /* 모바일에서 보기 적당한 높이 */
    grid-column: auto !important;
    /* 그리드 위치 값 초기화 */
    grid-row: auto !important;
    outline-width: 2px !important;
  }

  .board-body h2 {
    font-size: 1.5rem !important;
    /* 글자 크기 축소 */
  }

  .board-body p {
    font-size: 0.9rem !important;
  }

  /* 6. 하단 주문 폼 영역 텍스트 축소 */
  .order-item label {
    font-size: 1.0rem !important;
  }

  .order-item input {
    font-size: 1.0rem !important;
  }

  .order-btn strong {
    font-size: 1.4rem !important;
  }

  .order-btn span {
    font-size: 0.9rem !important;
  }

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


  /* 7. 장식용 닷(Dot) 크기 조절 */
  .dot.green,
  .dot.blue {
    width: 15px !important;
    height: 15px !important;
  }
}




/* 1. 푸터 기본 배경 및 레이아웃 */
.main-footer {
  color: #ffffff;
  padding: 0px 20px;
  font-size: 1rem;
  line-height: 1.6;
  font-family: 'Malgun Gothic', sans-serif;
  margin-top: 30px;  
}

/* 2. 자동 줄바꿈 반응형 그리드 시스템 */
.footer-grid {
  max-width: 2000px;
  margin: 0 auto;
  display: grid;
  /* 데스크톱에서는 5열 나란히, 화면이 좁아지면 각 항목 최소 200px 유지하며 다음 줄로 이동 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 60px;
  
}

/* 3. 모든 카드 항목 공통 스타일 */
.f-card,
.fcardimg {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 4. 항목 타이틀 스타일 */
.f-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00d4ff;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
  text-align: center;
}

/* 타이틀 밑에 들어가는 공통 포인트 선 */
.f-title::after {
  content: '';
  display: block;
  width: auto;
  height: 2px;
  background-color: #565656;
  /* 깔끔한 블루 포인트 */
  margin-top: 8px;
}

/* 카드 내부 텍스트 */
.f-card p {
  margin: 4px 0;
  word-break: keep-all;
  /* 한글 단어 단위 줄바꿈 */
}

/* 5. QR 코드 이미지 정렬 (일반 카드들과 높이/정렬 맞춤) */
.fcardimg {
  justify-content: center;
  align-items: center;

  
}

.fcardimg img {
  max-width: 160px;
  width: 100%;
  height: auto;
  margin-top: 5px;
  
}

.footer-grid>.f-card:nth-of-type(4) p,
.footer-grid>.f-card:nth-of-type(5) p {
  text-align: right;
}

.warning {
  color: #fe7c02;
}

/* 6. 모바일 환경 미세 조정 */
@media (max-width: 480px) {
  .main-footer {
    padding: 40px 15px;
  }
}




/*                                 */
.side-shortcut-bar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  /* 배경을 아주 얇은 반투명으로 두어 영역만 구분 */
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  border-radius: 0 15px 15px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  z-index: 10000;
}

/* 개별 아이템 */
.shortcut-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 165px;
  /* 텍스트 길이를 고려해 약간 넓힘 */
  padding: 8px;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
  /* 아이템 배경 투명하게 */
  background: transparent;
  margin-left: -10px;
}

.shortcut-item:hover {
  transform: translateX(8px);
  background: rgba(255, 255, 255, 0.1);
  /* 호버 시에만 살짝 표시 */
}

/* 로고 박스 - 배경색 제거 및 투명화 */
.logo-wrapper {
  width: 38px;
  height: 36px;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 배경색과 테두리 제거 */
  background: transparent !important;
  padding: 0;
  overflow: hidden;
  /* 이미지 선명도 유지 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.logo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 이미지 비율 유지 */
  display: block;
}

/* 텍스트 스타일 */
.short-text {
  margin-left: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;  
  color: #ffffff;
  letter-spacing: 0.8px;
  white-space: nowrap;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  /* 배경이 투명하므로 가독성 위해 그림자 강화 */
}

/* 첫 번째 shortcut-item 안에 있는 short-text만 녹색으로 지정 */
.shortcut-item:first-child .short-text {
  color: #03C75A !important;
  /* 네이버 전용 녹색 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-size: 1.2rem;  
}

/* 마지막 텍스트 */
.shortcut-item:last-child .short-text {
  color: #ff2b2b !important;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

  font-size: 1.2rem;
}

/* [추가] 모바일 화면(너비 768px 이하)에서는 보이지 않음 */
@media (max-width: 1024px) {
  .side-shortcut-bar {
    display: none !important;
    /* 화면에서 완전히 제거 */
  }
}



/* ================= 홈AI 전용 스타일 시작 ================= */
:root {
  --home-ai-glow: rgba(0, 242, 254, 0.6);
  --home-ai-bg: #0d1117;
  --home-ai-panel: rgba(22, 27, 34, 0.9);
  --home-ai-border: rgba(48, 54, 61, 0.8);
  --home-ai-text: #c9d1d9;
}

/* 1. 우측 가장자리 회전형 아이콘 */
.home-ai-trigger {
  position: fixed;
  right: 30px;
  top: 33%;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* 기존 요소들보다 무조건 위에 뜨도록 설정 */
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-ai-trigger.hidden {
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
  pointer-events: none;
}

.home-ai-trigger:hover {
  transform: translateY(-50%) scale(1.1);
}

.circle-layer {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  border: 15px solid transparent;
}

.layer-1 {
  width: 100%;
  height: 100%;
  border-top-color: #fe7b00;
  border-bottom-color: #2100fa;
  animation: rotateClockwise 10s linear infinite;
}

.layer-2 {
  width: 85%;
  height: 85%;
  border-left-color: #e500fe;
  border-right-color: rgb(36, 250, 3);
  animation: rotateCounterClockwise 6s linear infinite;
}

.layer-3 {
  width: 70%;
  height: 70%;
  border-top-color: rgba(1, 139, 1, 0.85);
  border-bottom-color: #00fedc;
  animation: rotateClockwise 7s linear infinite;
}

.trigger-text {
  font-size: 2.5rem;
  font-weight: bold;
  z-index: 10;
  user-select: none;
  animation: colorChange5Step 50s infinite;
}

/* 5가지 눈에 띄는 색상 변경 애니메이션 정의 */
@keyframes colorChange5Step {

  0%,
  20% {
    color: #ffffff;
  }

  21%,
  40% {
    color: #4dfa3c;
  }

  41%,
  60% {
    color: #ffc400;
  }

  61%,
  80% {
    color: #ff8c00;
  }

  81%,
  100% {
    color: #ff3cff;
  }
}

/* 2. 중앙 대화창 (화면 정중앙 고정) */
.chat-modal {
  position: fixed;
  left: 50%;
  top: 50%;/
  transform: translate(-50%, -50%) scale(0.9);
  transform-origin: center center;
  width: 30vw;
  min-width: 360px;
  height: 50vh;
  background: var(--home-ai-panel);
  border: 1px solid var(--home-ai-border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 242, 254, 0.15);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10000;
}

.chat-modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.chat-header {
  padding: 16px;
  border-bottom: 1px solid var(--home-ai-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  user-select: none;
}

.chat-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-title::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #00f2fe;
  border-radius: 50%;
  box-shadow: 0 0 8px #00f2fe;
}

.close-btn {
  background: none;
  border: none;
  color: #8b949e;
  cursor: pointer;
  font-size: 40px;
}

.close-btn:hover {
  color: #f85149;
}

.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: var(--home-ai-border);
  border-radius: 4px;
}

.msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.5;
  word-break: break-all;
}

.msg.user {
  background: #238636;
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}

.msg.gemini {
  background: #21262d;
  color: var(--home-ai-text);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  border: 1px solid var(--home-ai-border);
}

.chat-input-area {
  padding: 14px;
  border-top: 1px solid var(--home-ai-border);
  display: flex;
  gap: 8px;
}

.chat-input {
  flex: 1;
  background: #0d1117;
  border: 1px solid var(--home-ai-border);
  border-radius: 8px;
  padding: 10px 12px;
  color: #ffffff;
  font-size: 1.2rem;
  outline: none;
}

.chat-input:focus {
  border-color: #4facfe;
}

.send-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 8px;
  color: #000000;
  font-weight: bold;
  padding: 0 16px;
  cursor: pointer;
}

@keyframes rotateClockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounterClockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

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

  .home-ai-trigger,
  .chat-modal {
    display: none !important;
  }
}

/* ================= 홈AI 전용 스타일 끝 ================= */


/* 3. 우측 가장자리 회전형 게시판 아이콘 (완전 투명 배경 + 상위 레이어 빛 스윕) */
.board-trigger {
  position: fixed;
  right: 30px;
  top: 66%;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  /* [수정] 블랙 배경을 그대로 투과하도록 완벽한 투명 처리 */
  background: transparent;

  /* 빛줄기가 원형 바깥으로 빠져나가지 않도록 커팅 */
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9998;
}

.board-trigger::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 40%;
  height: 200%;

  /* 완전 블랙 배경 위에서 칼날처럼 날카롭고 선명하게 반짝이도록 실버/화이트 광원 처리 */
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 25%,
      rgba(255, 255, 255, 0.95) 50%,
      /* 크롬 메탈 표면의 강한 하이라이트 */
      rgba(255, 255, 255, 0.3) 75%,
      rgba(255, 255, 255, 0) 100%);

  transform: rotate(35deg);
  animation: metalGlowSweep 3s ease-in-out infinite;

  /* 회전 링(z-index: 1~3)과 글자보다 무조건 위에 뜨도록 설정 */
  z-index: 20;
  pointer-events: none;
  /* 클릭 이벤트가 글자나 모달에 방해 안 되게 처리 */
}

.board-trigger:hover {
  transform: translateY(-50%) scale(1.1);
}

/* --------------------------------------------------
   은빛 회전 링 레이어 스타일 (레이어 순서 하향 조정)
-------------------------------------------------- */
.metal-layer {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  border: 15px solid transparent;
  pointer-events: none;
}

.m-layer-1 {
  width: 100%;
  height: 100%;
  border-top-color: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(148, 163, 184, 0.6);
  animation: rotateClockwise 12s linear infinite;
  z-index: 3;
  /* 빛줄기(20)보다 아래 */
}

.m-layer-2 {
  width: 85%;
  height: 85%;
  border-left-color: rgba(241, 245, 249, 0.8);
  border-right-color: rgba(71, 85, 105, 0.5);
  animation: rotateCounterClockwise 8s linear infinite;
  z-index: 2;
}

.m-layer-3 {
  width: 70%;
  height: 70%;
  border-top-color: rgba(203, 213, 225, 0.6);
  border-bottom-color: rgba(255, 255, 255, 0.9);
  animation: rotateClockwise 9s linear infinite;
  z-index: 1;
}

/* 중앙 글자 스타일 (빛줄기 바로 아래 레이어 배치) */
.board-text {
  font-size: 2.2rem;
  font-weight: bold;
  color: #ffffff;
  user-select: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);

  z-index: 10;
  /* 회전 링보다는 위, 지나가는 빛줄기보다는 아래 */
}

/* 대각선 광택 스윕 애니메이션 */
@keyframes metalGlowSweep {
  0% {
    left: -150%;
  }

  50%,
  100% {
    left: 150%;
  }
}



/* ===== 주문현황 패널 ===== */
.board-modal-anther {
  position: fixed;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  width: 50%;
  max-width: 850px;

  display: none;
  flex-direction: column;

  z-index: 9999;

  animation: fadeInBoard 0.25s ease;
  align-items: center;
}

/* ===== 게시판 박스 ===== */
.board-content-anther {
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: #ffffff;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.25),
    0 0 25px rgba(0, 150, 255, 0.08);
  animation: boardPop 0.25s ease;
  align-items: center;
}

/* ===== 상단 헤더 ===== */
.board-header-anther {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px 24px;
  border-radius: 18px 18px 0 0;
  background-color: #0033ff;
  color: #ffffff;
  width: 50%;
  margin: 0 auto;
  border: 2px solid rgb(255, 255, 255);
}

/* ===== 제목 ===== */
.board-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-align: center;

}

/* ===== 닫기 버튼 영역 ===== */
.board-header-right {
  position: absolute;
  top: 15px;
  right: 18px;
}

/* ===== 닫기 버튼 ===== */
.board-close-btn {
  width: 38px;
  height: 38px;

  border: none;
  border-radius: 50%;

  background: rgb(30, 1, 251);
  cursor: pointer;

  position: relative;
  transition: all 0.2s ease;
}

/* X 표시 */
.board-close-btn::before,
.board-close-btn::after {
  content: "";
  position: absolute;

  top: 50%;
  left: 50%;

  width: 18px;
  height: 2px;

  background: #ffffff;
}

.board-close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.board-close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.board-close-btn:hover {
  background: rgb(246, 1, 1);
  transform: scale(1.2);
}

/* ===== 테이블 ===== */
.board-table {
  width: 100%;
  border-collapse: collapse;  
  background: #0f172a;
  color: #e2e8f0;

}

/* ===== 테이블 헤더 ===== */
.board-table thead {
  background: #1e2432;
  
}

/* ===== 헤더 ===== */
.board-table th {
  padding: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #f8fafc;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== 테이블 내용 ===== */
.board-table td {
  padding: 15px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #cbd5e1;
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;  
}

/* ===== 줄 hover ===== */
.board-table tbody tr:hover td {
  background: #172033;
  color: #ffffff;
}

/* ===== 짝수 줄 ===== */
.board-table tbody tr:nth-child(even) td {
  background: #111827;
}

/* ===== 스크롤바 ===== */
.board-content-anther::-webkit-scrollbar {
  width: 8px;
}

/* ===== 스크롤바 배경 ===== */
.board-content-anther::-webkit-scrollbar-track {
  background: #0b1220;

}

/* ===== 스크롤바 ===== */
.board-content-anther::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
      rgba(59, 130, 246, 0.55),
      rgba(99, 102, 241, 0.55));

}

/* ===== 스크롤 hover ===== */
.board-content-anther::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
      rgba(96, 165, 250, 0.8),
      rgba(129, 140, 248, 0.8));
}

/* ===== 애니메이션 ===== */
@keyframes fadeInBoard {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes boardPop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.boareanthertext {
  width: 100%;
  padding: 16px 20px;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(135deg,
      rgba(30, 41, 59, 0.96),
      rgba(15, 23, 42, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: center;
}

.boareanthertext h2 {
  margin: 0;

  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;

  color: #f8fafc;

  text-shadow: 0 0 12px rgba(59, 130, 246, 0.18);
}


/* ===== 모바일에서 게시판 상시 노출을 위한 CSS 수정 ===== */
@media (max-width: 1024px) {

  /* 1. 트리거 아이콘의 기존 숨김 설정 해제 및 일반 영역화 */
  .board-trigger {
    display: none !important;
    /* 아이콘은 모바일에서 감춥니다 */
  }

  /* 2. 게시판 모달을 페이지의 고정된 섹션으로 변환 */
  .board-modal-anther {
    display: flex !important;
    /* hidden 상태를 강제 노출 */
    position: static !important;
    /* 화면 고정(fixed) 해제 */
    transform: none !important;
    /* 위치 보정 제거 */
    top: auto !important;
    left: auto !important;
    margin: 40px auto 20px auto !important;
    /* 푸터 바로 위에 배치 */
    width: 96% !important;
    /* 모바일 너비 최적화 */
    z-index: 1 !important;
    /* 레이어 순서 조정 */
    background: #ffffff !important;
    box-shadow: none !important;
    /* 그림자 제거로 깔끔하게 처리 */
  }

  /* 3. 모달 상단 닫기 버튼 영역은 필요 없으므로 숨김 */
  .board-header-right {
    display: none !important;
  }

  /* 4. 모바일에서의 게시판 가독성 조정 */
  .board-content-anther {
    max-height: none !important;
    /* 높이 제한 해제하여 내용 모두 노출 */
    overflow-y: visible !important;
  }
    .board-header-anther {
      width: auto;
      cursor: pointer;
    }
}