/* ================================================
   포토스포츠 헤더 리뉴얼 스타일
   적용 파일: Common/CSS/Common_pc_ims_renew.css
   ================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css');

/* ========================================
   PC/Mobile 섹션 분리 (PC 기준 - 769px 이상)
   ======================================== */
@media (min-width: 769px) {
  /* PC에서는 모바일 전용 섹션 숨김 */
  .mobile-only {
    display: none !important;
  }

  /* PC에서는 모바일 햄버거 메뉴 숨김 */
  .mobile-menu-wrapper {
    display: none !important;
  }

  /* PC에서 모바일 전용 햄버거 메뉴 & 패널 숨김 */
  .menu-btn,
  #menuBtn {
    display: none !important;
  }

  .menu-overlay,
  #menuOverlay {
    display: none !important;
  }

  .menu-panel,
  #menuPanel {
    display: none !important;
  }

  /* PC에서 로그인 페이지 모바일 홈 버튼 숨김 */
  .login-home-btn {
    display: none !important;
  }

  /* 컨텐츠 영역 1500px 중앙정렬 컨테이너 */
  .content-wrapper {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* content-wrapper 이후 푸터가 정상 배치되도록 clear */
  .content-wrapper::after {
    content: '';
    display: table;
    clear: both;
  }

  /* Basket 페이지 본문만 1500px 중앙정렬 */
  .basket-inner-wrapper {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Schedule 페이지 본문만 1500px 중앙정렬 */
  .schedule-inner-wrapper {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* OrderDetail 페이지 테이블 영역 1500px 제한 */
  .col-sm-12.piclist_table.list {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto !important;
    padding: 0 20px;
    box-sizing: border-box;
    float: none !important;
  }

  /* OrderDetail 페이지 구매자정보/받는사람정보/결제정보 영역 1500px 제한 */
  .PurchaseTable {
    max-width: 1500px;
    margin: 0 auto !important;
  }

  /* FAQ 페이지 섹션 타이틀 아래 여백 추가 */
  .orderlist-section-title {
    margin-bottom: 90px !important;
  }

  /* FAQ 이미지 40% 너비, 중앙정렬 */
  .faq-image-item {
    width: 40% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .faq-image-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
  }

  /* ========================================
       Purchase 페이지 버튼 영역
       ======================================== */
  .purchase-button-area {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    padding: 30px 0;
  }

  .btn-primary-purchase {
    background: linear-gradient(135deg, #ffbe00, #ffa500);
    color: #fff;
    border: none;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 190, 0, 0.3);
  }

  .btn-primary-purchase:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 190, 0, 0.4);
  }

  .btn-secondary-purchase {
    background: #fff;
    color: #333;
    border: 2px solid #ffbe00;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .btn-secondary-purchase:hover {
    background: #fff8e1;
  }

  .btn-outline-purchase {
    background: #fff;
    color: #666;
    border: 2px solid #ddd;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .btn-outline-purchase:hover {
    border-color: #999;
    color: #333;
  }

  /* 총 결제 금액 표 - 카드 스타일 */
  .TotalPrice {
    background: transparent !important;
    padding: 40px 0 !important;
    border: none !important;
  }

  .TotalPrice center {
    display: block;
    max-width: 500px;
    margin: 0 auto;
  }

  .TotalPrice table {
    width: 100%;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }

  .TotalPrice table td,
  .TotalPrice table th {
    padding: 18px 24px;
    font-size: 15px;
    border: none;
    text-align: center;
  }

  .TotalPrice table tr {
    border-bottom: 1px solid #f5f5f5;
  }

  .TotalPrice table tr:last-child {
    border-bottom: none;
    background: linear-gradient(to right, #fff9e6, #fffbf0);
  }

  .TotalPrice table td:first-child,
  .TotalPrice table th:first-child {
    font-weight: 500;
    color: #666;
    width: 50%;
  }

  .TotalPrice table td:last-child {
    font-weight: 600;
    color: #333;
    font-size: 16px;
  }

  .TotalPrice table tr:last-child th {
    color: #333;
    font-size: 17px;
    font-weight: 700;
  }

  .TotalPrice table tr:last-child td {
    color: #ffbe00;
    font-size: 20px;
    font-weight: 700;
  }

  .TotalPrice p {
    display: inline;
    margin: 0;
    font-weight: 700;
  }

  /* Purchase 페이지 - 모든 테이블 hover 효과 제거 */
  .Basket.list table tr:hover,
  .Basket.list table tbody tr:hover,
  .Basket.list table tr:hover td,
  .Basket.list table tbody tr:hover td,
  .PurchaseTable tr:hover,
  .PurchaseTable tbody tr:hover,
  .PurchaseTable tr:hover td,
  .PurchaseTable tbody tr:hover td,
  .TotalPrice table tr:hover,
  .TotalPrice table tbody tr:hover,
  .TotalPrice table tr:hover td,
  .TotalPrice table tbody tr:hover td {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* 필수 입력 표시 스타일 */
  .PurchaseTable th .required {
    color: #ff4444;
    font-size: 14px;
    margin-right: 4px;
    font-weight: 600;
  }

  .PurchaseTable th p {
    display: none;
  }
}

/* Pretendard 폰트 전체 적용 */
* {
  font-family: 'Pretendard Variable', Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif !important;
}

/* ========================================
   커스텀 스크롤바 (노란색 테마)
   ======================================== */

/* 스크롤바 전체 영역 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* 스크롤바 트랙 (배경) */
::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

/* 스크롤바 thumb (드래그하는 부분) */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffbe00 0%, #e5aa00 100%);
  border-radius: 10px;
  border: 2px solid #f5f5f5;
  transition: all 0.3s ease;
}

/* 스크롤바 thumb 호버 */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffd700 0%, #ffbe00 100%);
  border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(255, 190, 0, 0.5);
}

/* 스크롤바 thumb 액티브 (클릭 시) */
::-webkit-scrollbar-thumb:active {
  background: #e5aa00;
}

/* Firefox용 스크롤바 */
* {
  scrollbar-width: thin;
  scrollbar-color: #ffbe00 #f5f5f5;
}

/* ========== 헤더 전체 구조 ========== */
.wrap {
  position: relative;
  width: 1500px !important;
  max-width: 1500px !important;
  margin: 0 auto !important; /* 중앙 정렬 */
  padding: 0 !important;
}

/* 헤더 고정 시 .wrap 영향 제거 */
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* 모달 열릴 때 배경 스크롤 잠금 */
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
}

body.modal-open,
body.modal-open html {
  overflow: hidden !important;
  height: 100% !important;
}

/* ========== 섹션4 스타일 ========== */
.section4 {
  background: #f8f9fa;
  height: calc(100vh - 60px) !important;
  min-height: 540px !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: none !important;
}

.section4.fp-section {
  height: 100vh !important;
  padding-top: 60px !important;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.section4 .section-container {
  display: flex !important;
  height: calc(100vh - 60px) !important;
  width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* 좌측 영역 (2/3) */
.section4-left {
  width: 66.67% !important;
  height: calc(100vh - 60px) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 우측 영역 (1/3) */
.section4-right {
  width: 33.33% !important;
  height: calc(100vh - 60px) !important;
}

/* 1번 구역 (좌측 상단 1/3) */
.section4-area1 {
  width: 100% !important;
  height: 33.33% !important;
  min-height: calc((100vh - 60px) / 3) !important;
  /* background: url('/Common/images_renew/main/s4_1-1.png') center center / cover
      no-repeat,
    #ff6b6b !important; */
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* 2번 구역 (좌측 중단 1/3) */
.section4-area2 {
  width: 100% !important;
  height: 33.33% !important;
  min-height: calc((100vh - 60px) / 3) !important;
  /* background: url('/Common/images_renew/main/s4_2.png') center center / cover
      no-repeat,
    #4ecdc4 !important; */
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* 3번 구역 (좌측 하단 1/3) */
.section4-area3 {
  width: 100% !important;
  height: 33.33% !important;
  min-height: calc((100vh - 60px) / 3) !important;
  /* background: url('/Common/images_renew/main/s4_3.png') center center / cover
      no-repeat,
    #45b7d1 !important; */
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* 4번 구역 (우측 전체) */
.section4-area4 {
  width: 100% !important;
  height: 100% !important;
  background: #ffffff !important;
  min-height: calc(100vh - 60px) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.section4-area {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #ddd !important;
}

.section4-content {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 24px !important;
  padding: 50px 60px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 프로모션 텍스트 스타일 */
.section4-prom-text {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: white !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
  transition: all 0.3s ease !important;
  z-index: 2 !important;
  position: relative !important;
  margin-left: 100px !important;
}

.section4-area1:hover .section4-prom-text,
.section4-area2:hover .section4-prom-text,
.section4-area3:hover .section4-prom-text {
  font-size: 42px !important;
  transform: translateX(10px) !important;
}

/* 섹션4 플러스 버튼 스타일 */
.section4-button {
  width: 60px !important;
  height: 60px !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
  margin-right: 60px !important;
}

.section4-button .button-text {
  opacity: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  transform: scale(0.8) !important;
  color: white !important;
}

.section4-button .button-icon {
  font-size: 24px !important;
  font-weight: 300 !important;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  opacity: 1 !important;
  text-align: center !important;
  transform: scale(1) rotate(0deg) !important;
  color: white !important;
}

.section4-area1:hover .section4-button,
.section4-area2:hover .section4-button,
.section4-area3:hover .section4-button {
  width: 160px !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: white !important;
  transform: translateY(-5px) !important;
}

.section4-area1:hover .section4-button .button-text,
.section4-area2:hover .section4-button .button-text,
.section4-area3:hover .section4-button .button-text {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.section4-area1:hover .section4-button .button-icon,
.section4-area2:hover .section4-button .button-icon,
.section4-area3:hover .section4-button .button-icon {
  opacity: 0 !important;
  transform: scale(1.2) rotate(180deg) !important;
}

/* ========== 섹션5 알약형 공지사항 & 대회현장 ========== */
.pill-notice-container {
  width: 690px !important;
  height: 45px !important;
  margin: 60px auto 60px auto !important;
  z-index: 10 !important;
}

/* 대회현장 섹션 */
.race-site-section {
  display: flex;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  gap: 100px;
  align-items: center;
  padding: 0;
}

/* 좌측 타이틀 영역 (50%) */
.race-site-left {
  flex: 0 0 calc(50% - 50px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 170px;
}

.race-site-content {
  width: 100%;
}

.race-site-more {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-bottom: 50px;
}

.race-site-more:hover {
  color: #ffc107;
  transform: translateX(5px);
}

.race-site-title {
  font-size: 120px;
  font-weight: 900;
  color: #222;
  margin: 0 0 30px 0;
  line-height: 1.1;
  letter-spacing: -3px;
}

.race-site-subtitle {
  font-size: 24px;
  font-weight: 300;
  color: #666;
  margin: 0;
  letter-spacing: 1px;
}

/* 우측 갤러리 영역 (50%) */
.race-site-right {
  flex: 0 0 calc(50% - 50px);
  position: relative;
  overflow: visible;
  padding: 0 80px;
}

.race-site-swiper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.race-site-swiper .swiper-wrapper {
  display: flex;
  position: relative;
  left: 0;
  cursor: grab;
  user-select: none;
}

.race-site-swiper .swiper-slide {
  width: 600px !important;
  min-width: 600px !important;
  height: 600px !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-right: 25px;
  flex-shrink: 0;
}

.race-site-swiper .swiper-slide:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.race-site-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  pointer-events: none;
}

/* 네비게이션 버튼 */
.race-site-btn-prev,
.race-site-btn-next {
  position: absolute;
  bottom: 0;
  transform: none;
  width: 56px;
  height: 56px;
  border: 2px solid #ddd;
  background: white;
  border-radius: 50%;
  font-size: 22px;
  color: #333;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.race-site-btn-prev {
  left: -150px;
}

.race-site-btn-next {
  left: -80px;
}

.race-site-btn-prev:hover,
.race-site-btn-next:hover {
  background: #ffc107;
  border-color: #ffc107;
  color: white;
  transform: scale(1.1);
}

/* ========== 섹션5: 대회현장 ========== */
.section5 {
  background: #f8f9fa;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* 섹션5 fullPage.js 너비 오버라이드 */
.section5.fp-section {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.section5 .fp-tableCell {
  width: 100% !important;
}

.section5 .section-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  max-width: 1920px !important;
  width: 1920px !important;
  margin: 0 auto;
  padding: 0 60px;
  overflow: visible;
}

@media (max-width: 1920px) {
  .section5 .section-container {
    width: 100% !important;
    padding: 0 60px;
  }
}

/* 섹션5 대회현장 우측 갤러리가 우측으로 확장되도록 */
.section5.fp-section .fp-overflow,
.section5.fp-is-overflow .fp-overflow.fp-auto-height,
.section5.fp-is-overflow .fp-overflow.fp-auto-height-responsive,
.section5.fp-is-overflow > .fp-overflow {
  overflow: visible !important;
}

.race-site-section {
  overflow: visible !important;
}

.race-site-right {
  flex: 1 !important;
  max-width: none !important;
  padding-right: 0 !important;
}

/* 섹션 6: 대회일정 */
.section6 {
  background: #ffbe00 !important;
}

.section6.fp-section {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.section6 .section-container {
  max-width: 1920px !important;
  width: 1920px !important;
  margin: 0 auto !important;
  padding-bottom: 0 !important;
}

.schedule-section {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 좌측 로고 영역 (50%) */
.schedule-left {
  flex: 0 0 50%;
  display: flex;
  gap: 20px;
  padding: 40px 20px 0 0;
  overflow: hidden;
  position: relative;
  justify-content: flex-end;
}

.logo-column {
  width: 235px;
  min-width: 235px;
  max-width: 235px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.logo-track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.column-1 .logo-track {
  animation-name: scrollUp;
  animation-duration: 20s;
}

.column-2 .logo-track {
  animation-name: scrollDown;
  animation-duration: 25s;
}

.column-3 .logo-track {
  animation-name: scrollUp;
  animation-duration: 22s;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

.logo-card {
  background: white;
  border-radius: 10px;
  padding: 40px;
  min-height: 150px;
  width: 235px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo-card.no-padding {
  padding: 0;
  overflow: hidden;
}

.logo-card.no-padding img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.logo-placeholder {
  font-size: 18px;
  font-weight: 600;
  color: #999;
  text-align: center;
  line-height: 1.4;
}

/* 우측 텍스트 영역 (50%) */
.schedule-right {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 100px;
  margin-top: 50px;
}

.schedule-content {
  width: 100%;
}

.schedule-label {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0 0 20px 0;
}

.schedule-title {
  font-size: 120px;
  font-weight: 900;
  color: #000;
  margin: 0 0 20px 0;
  line-height: 1.1;
}

.schedule-subtitle {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  margin: 0 0 60px 0;
}

.schedule-list {
  margin-top: 40px;
}

.schedule-item {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.schedule-item:hover {
  background: rgba(255, 255, 255, 0.3);
  padding-left: 20px;
}

.schedule-name {
  font-size: 20px;
  font-weight: 500;
  color: #000;
}

/* 섹션 7: 탭 콘텐츠 */
.section7 {
  background: #fff !important;
}

.section7-container {
  max-width: 1500px !important;
  width: 1500px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  padding-top: 40vh !important;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 탭 네비게이션 */
.tab-navigation {
  display: flex;
  gap: 60px;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 60px;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
}

.tab-buttons {
  display: flex;
  gap: 60px;
}

.tab-more-link {
  font-size: 18px;
  color: #000;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.tab-more-link:hover {
  color: #666;
}

.tab-btn {
  background: none;
  border: none;
  padding: 20px 0;
  font-size: 24px;
  font-weight: 400;
  color: #999;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.tab-btn.active {
  color: #000;
  font-weight: 700;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: #000;
}

/* 탭 콘텐츠 영역 */
.tab-content-area {
  flex: 1;
  overflow: visible;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  overflow: visible;
}

/* 섹션7: 공지사항 탭 & 대회소개 탭 (동일 스타일) */
.section7 .notice-list,
.section7 .schedule-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  height: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  font-size: inherit !important;
  color: inherit !important;
  margin: 0 !important;
}

/* Reset any li styles within Section 7 lists */
.section7 .notice-list li,
.section7 .schedule-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.section7 .notice-card,
.section7 .schedule-card {
  background: white !important;
  padding: 30px !important;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  height: 100% !important;
  position: relative !important;
  border: 3px solid transparent !important;
}

.section7 .notice-card:hover,
.section7 .schedule-card:hover {
  background: #f9f9f9 !important;
  border: 3px solid #ffbe00 !important;
}

.section7 .notice-badge,
.section7 .schedule-badge {
  display: inline-block !important;
  width: fit-content !important;
  background: transparent !important;
  border: 2px solid #000 !important;
  padding: 10px 24px !important;
  border-radius: 30px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000 !important;
  transition: all 0.3s ease !important;
}

.section7 .notice-card:hover .notice-badge,
.section7 .schedule-card:hover .schedule-badge {
  background: #ffbe00 !important;
  border-color: #ffbe00 !important;
}

.section7 .notice-title,
.section7 .schedule-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #000 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  flex: 1 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.section7 .notice-date,
.section7 .schedule-date {
  font-size: 16px !important;
  color: #666 !important;
  font-weight: 400 !important;
  position: absolute !important;
  top: 30px !important;
  right: 30px !important;
}

.section7 .notice-more,
.section7 .schedule-more {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #000 !important;
  padding-top: 20px !important;
  border-top: 1px solid #e0e0e0 !important;
}

.section7 .marathon-card {
  display: block !important;
  background: white !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 30px !important;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: none !important;
  gap: 0 !important;
}

.section7 .marathon-card:hover {
  background: #f9f9f9;
}

.section7 .card-badge {
  display: inline-block !important;
  background: transparent !important;
  border: 2px solid #000 !important;
  padding: 10px 20px !important;
  border-radius: 25px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin-bottom: 20px !important;
}

.section7 .card-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.4 !important;
}

.section7 .card-info {
  margin: 20px 0 !important;
}

.section7 .info-row {
  display: flex !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.section7 .info-label {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #666 !important;
  width: 80px !important;
}

.section7 .info-value {
  font-size: 16px !important;
  color: #333 !important;
  flex: 1 !important;
}

.section7 .card-footer {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e0e0e0 !important;
}

.section7 .more-link {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #000 !important;
}

/* 상품 탭 */
.product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  overflow: visible;
}

.product-card {
  background: white;
  border-radius: 15px;
  overflow: visible;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.product-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  aspect-ratio: 16/9;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.product-info .product-name {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.product-goto {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: white;
  border-radius: 50%;
  text-decoration: none;
  font-size: 20px;
  font-weight: 300;
  transition: all 0.3s;
  flex-shrink: 0;
}

.product-goto:hover {
  background: #333;
  transform: translateX(3px);
}

.pill-notice {
  width: 100% !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 25px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

.pill-notice-content {
  flex: 1 !important;
  height: 45px !important;
  overflow: hidden !important;
  padding: 0 25px !important;
  position: relative !important;
}

#pill_mainnews_content {
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
}

#pill_mainnews_content table {
  width: 100% !important;
  border-collapse: collapse !important;
}

#pill_mainnews_content table tr {
  height: 45px !important;
  display: table-row !important;
}

#pill_mainnews_content table td {
  height: 45px !important;
  line-height: 45px !important;
  vertical-align: middle !important;
  padding: 0 !important;
  border: none !important;
  white-space: nowrap !important;
}

.pill-notice-table {
  position: relative !important;
  top: 0 !important;
  transition: top 0.8s ease !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.pill-notice-row {
  height: 45px !important;
  display: table-row !important;
}

.pill-notice-row td {
  height: 45px !important;
  vertical-align: middle !important;
  padding: 0 10px !important;
  border: none !important;
}

.pill-notice-row td:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.pill-notice-row a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: inherit !important;
}

.notice-label {
  background: #ff6b6b !important;
  color: white !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

.notice-label::before {
  content: '📢' !important;
  font-size: 11px !important;
}

.notice-title {
  flex: 1 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #333 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.notice-date {
  font-size: 13px !important;
  color: #888 !important;
  font-weight: 400 !important;
  flex-shrink: 0 !important;
}

.pill-notice-arrow {
  height: 100% !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.pill-notice-arrow:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

.pill-notice-arrow span {
  font-size: 13px !important;
  color: #666 !important;
  font-weight: 500 !important;
}

.pill-notice-arrow svg {
  width: 18px !important;
  height: 18px !important;
  color: #666 !important;
}

/* ========== 4번 영역 내부 스타일 ========== */

/* 상단: 문의상담 노란 카드 */
.contact-card {
  background: #ffbe00 !important;
  border-radius: 15px !important;
  padding: 25px 15px !important;
  text-align: center !important;
  margin: 70px auto 60px auto !important;
  flex: none !important;
  box-shadow: 0 4px 12px rgba(255, 190, 0, 0.3) !important;
  width: 60% !important;
  max-width: 220px !important;
}

.phone-icon {
  width: 45px !important;
  height: 45px !important;
  margin: 0 auto 18px auto !important;
  color: #000 !important;
  display: block !important;
  animation: phoneRing 2s infinite ease-in-out !important;
}

@keyframes phoneRing {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  10% {
    transform: translateY(-3px) rotate(-5deg);
  }
  30% {
    transform: translateY(-2px) rotate(3deg);
  }
  40% {
    transform: translateY(-1px) rotate(-2deg);
  }
  60% {
    transform: translateY(-2px) rotate(2deg);
  }
  70% {
    transform: translateY(-1px) rotate(-1deg);
  }
}

.phone-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.contact-label {
  font-size: 20px !important;
  color: #333 !important;
  margin-bottom: 15px !important;
  font-weight: 600 !important;
}

.contact-number {
  font-size: 26px !important;
  font-weight: bold !important;
  color: #333 !important;
  letter-spacing: 0.8px !important;
}

/* 중간: 연락처 정보 */
.contact-info {
  flex: 1 !important;
  padding: 10px 55px !important;
}

.info-row {
  display: flex !important;
  margin-bottom: 15px !important;
  align-items: baseline !important;
}

.info-label {
  width: 75px !important;
  font-weight: 600 !important;
  color: #333 !important;
  font-size: 19px !important;
  flex-shrink: 0 !important;
  line-height: 1.4 !important;
  margin-right: 20px !important;
}

.info-value {
  color: #555 !important;
  font-size: 19px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

.holiday-text {
  color: #e74c3c !important;
  font-size: 19px !important;
  font-weight: 600 !important;
}

/* 하단: 은행 정보 */
.bank-info {
  flex: none !important;
  text-align: center !important;
  margin: 15px !important;
  padding: 0 !important;
}

.bank-info img {
  max-width: 90% !important;
  height: auto !important;
  border-radius: 8px !important;
}

/* ========== 헤더 리뉴얼 ========== */
.header-renewal {
  background: #ffffff !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 60px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  box-shadow: none !important;
  width: 100vw !important;
}

.header-top {
  width: 100vw !important;
  background: #fff !important;
  max-width: 100vw !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}

.header-container {
  width: 1500px !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 15px 20px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* 모든 가능한 컨테이너 제한 제거 */
.header-renewal,
.header-renewal *,
.header-top,
.header-top *,
.header-container,
.header-container * {
  box-sizing: border-box !important;
}

/* Bootstrap 컨테이너 제한 완전 제거 - 헤더에만 적용 */
.header-renewal .container,
.header-renewal .container-fluid,
.header-top .container,
.header-top .container-fluid {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* wrap 클래스가 헤더에 영향주는 것 방지 */
.header-renewal {
  width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin: 0 !important;
}

/* 모든 Bootstrap 반응형 제한 제거 */
@media (min-width: 1200px) {
  .header-renewal .container,
  .header-renewal .container-fluid {
    max-width: none !important;
    width: 100% !important;
  }
}

@media (min-width: 992px) {
  .header-renewal .container,
  .header-renewal .container-fluid {
    max-width: none !important;
    width: 100% !important;
  }
}

/* 헤더 안 메뉴 영역 스타일 */
.main-nav-area {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: calc(1500px - 400px);
}

/* TopMenu를 헤더 안에서 인라인으로 표시 */
.main-nav-area .nav-renewal {
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.main-nav-area .navbar-header {
  display: none !important; /* 헤더 안에서는 모바일 토글과 중복 로고 숨김 */
}

.main-nav-area .navbar-collapse {
  display: flex !important;
  float: none !important;
  width: 100% !important;
  justify-content: center !important;
}

.main-nav-area .main-nav-list {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 40px !important;
  list-style: none !important;
  align-items: center !important;
}

.main-nav-area .main-nav-list > li {
  float: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.main-nav-area .main-nav-list > li > a {
  display: inline-block !important;
  padding: 0 !important;
}

.main-nav-area .main-nav-list > li > a > span {
  font-size: 16px !important;
  color: #333 !important;
  font-weight: 500 !important;
  display: inline !important;
  white-space: nowrap !important;
}

/* ========== 로고 영역 ========== */
.logo-area {
  display: flex;
  align-items: center;
  width: 200px;
  flex-shrink: 0;
}

.logo-area .logo-link {
  display: inline-block;
}

/* 로고 이미지 강제 표시 - 기존 CSS 오버라이드 */
.logo-area img,
.logo-area .logo-link img,
.header-renewal .logo-area img {
  height: 50px !important;
  width: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

/* 새 로고 사용시 (images_renew/logo.png) */
.logo-area .logo-link img[src*='images_renew'] {
  height: 40px !important;
}

/* SVG 로고 특별 처리 */
.logo-area .logo-link img[src*='.svg'] {
  height: 40px !important;
  width: auto !important;
  max-width: 200px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 기존 스타일 오버라이드 강화 */
.wrap > a[href='/Main.aspx'] {
  display: none !important; /* 혹시 있을 기존 로고 숨김 */
}

/* 로고 링크 보장 */
.header-renewal .logo-area .logo-link {
  display: block !important;
  height: auto !important;
}

/* ========== 유틸 메뉴 영역 ========== */
.util-menu-area {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-direction: row !important;
  white-space: nowrap !important;
  width: 200px;
  flex-shrink: 0;
  justify-content: flex-end;
}

.welcome-msg {
  color: #666;
  font-size: 14px;
  margin-right: 10px;
}

.util-menu-area .loginbar {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  background: transparent !important;
  padding: 0 !important;
  padding-top: 0 !important;
  border: none !important;
  flex-direction: row !important;
  white-space: nowrap !important;
}

/* 로그인바 링크 스타일 */
.loginbar a,
.loginbar input[type='submit'] {
  color: #666 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  transition: all 0.3s !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-block !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

.loginbar a:hover {
  background: #f5f5f5;
  color: #333;
}

/* 로그인/로그아웃 버튼 강조 */
.loginbar .btn-login,
.loginbar .btn-logout {
  background: #ffc107 !important;
  color: #333 !important;
  font-weight: 500;
  border: none !important;
}

.loginbar .btn-login:hover,
.loginbar .btn-logout:hover {
  background: #ffb300 !important;
}

/* 회원가입 버튼 */
.loginbar .btn-join {
  border: 1px solid #ddd !important;
}

.loginbar .btn-join:hover {
  border-color: #999 !important;
  background: #f9f9f9;
}

/* 관리자 버튼 */
.loginbar .btn-admin {
  padding: 8px 20px !important;
  background: #6c757d !important;
  color: white !important;
  border: 1px solid #6c757d !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.3s !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.loginbar .btn-admin:hover {
  background: #5a6268 !important;
  border-color: #5a6268 !important;
}

/* ========== 사용자 드롭다운 메뉴 ========== */
.user-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 0 !important;
}

.user-dropdown-toggle {
  padding: 8px 20px !important;
  background: transparent !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  text-decoration: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
}

.user-dropdown-toggle:hover {
  background: #f8f8f8 !important;
  border-color: #ffbe00 !important;
  color: #ffbe00 !important;
}

.user-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  min-width: 140px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  margin-top: 0;
}

.user-dropdown:hover .user-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.user-dropdown-menu a,
.user-dropdown-menu input[type='submit'] {
  display: block !important;
  padding: 10px 20px !important;
  color: #666 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border-radius: 0 !important;
}

.user-dropdown-menu a:hover,
.user-dropdown-menu input[type='submit']:hover {
  background: #f8f8f8 !important;
  color: #ffbe00 !important;
}

.user-dropdown-logout {
  border-top: 1px solid #f0f0f0 !important;
  margin-top: 5px !important;
  padding-top: 15px !important;
}

/* ========== 메인 네비게이션 (TopMenu) ========== */
.nav-renewal {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.nav-renewal .container-fluid {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.nav-renewal .navbar-header {
  display: none; /* PC에서는 모바일 토글 숨김 */
}

.nav-renewal .navbar-collapse {
  padding: 0 !important;
  display: block !important;
  height: auto !important;
}

/* 메인 메뉴 리스트 */
.nav-renewal .main-nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin: 0;
  padding: 0;
  float: none !important;
  list-style: none;
}

.nav-renewal .main-nav-list > li {
  position: relative;
  float: none !important;
  display: block;
}

.nav-renewal .main-nav-list > li > a {
  padding: 20px 35px;
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 25px;
  transition: background 0.3s;
}

.nav-renewal .main-nav-list > li > a span {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  transition: all 0.3s;
}

/* 메뉴 hover 효과 */
.nav-renewal .main-nav-list > li:hover > a span,
.nav-renewal .main-nav-list > li.hover > a span {
  color: #ffc107;
}

/* 활성화된 메뉴 - 배경 + 텍스트 굵게 */
.nav-renewal .main-nav-list > li.active > a {
  background: rgba(255, 190, 0, 0.15);
}

.nav-renewal .main-nav-list > li.active > a span {
  color: #ffbe00;
  font-weight: 700;
}

/* 메뉴 하단 라인 효과 */
.nav-renewal .main-nav-list > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: #ffbe00;
  transition: width 0.3s;
}

.nav-renewal .main-nav-list > li:hover > a::after,
.nav-renewal .main-nav-list > li.hover > a::after,
.nav-renewal .main-nav-list > li.active > a::after {
  width: 100%;
}

/* ========== 서브메뉴 스타일 ========== */
.subnav-renewal {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 999;
  height: auto;
  pointer-events: none;
}

.subnav-renewal .submenu-container {
  position: absolute;
  top: 0;
  left: 50%;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  padding: 15px 0;
  min-width: 120px;
  width: auto;
  z-index: 1000;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(-15px) scale(0.8) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  pointer-events: none !important;
  will-change: transform, opacity;
}

/* 장바구니 서브메뉴 - 좁은 폭 */
#SubMenu_SB {
  min-width: 100px;
}

/* 커뮤니티 서브메뉴 - 조금 더 넓은 폭 */
#SubMenu_SC {
  min-width: 130px;
}

/* 메뉴 hover 시 서브메뉴 표시 */
.main-nav-list > li:hover .subnav-renewal .submenu-container,
.main-nav-area .main-nav-list > li:hover .subnav-renewal .submenu-container {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.subnav-renewal .submenu-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.subnav-renewal .submenu-container li {
  float: none !important;
  display: block;
  margin: 0;
}

.subnav-renewal .submenu-container a {
  display: block;
  padding: 10px 25px;
  white-space: nowrap;
  text-decoration: none;
}

.subnav-renewal .submenu-container a span {
  color: #666;
  font-size: 14px;
  transition: all 0.2s;
}

.subnav-renewal .submenu-container li:hover {
  background: #f8f8f8;
}

.subnav-renewal .submenu-container li:hover a span {
  color: #ffc107;
  padding-left: 5px;
}

/* ========== 콘텐츠 영역 조정 ========== */
.wrap > div[style*='position:relative'] {
  max-width: 1500px;
  margin: 20px auto 0;
  padding: 0 20px;
}

#ContentPlaceHolder1 {
  margin-top: 90px; /* 고정 헤더 높이만큼 여백 추가 */
}

/* ========== 플로팅 배너 제거 ========== */
#AdPhotosports {
  display: none !important;
}

/* ========== 움직이는 텍스트 바 (PC 전용) ========== */
@media (min-width: 769px) {
  .moving-text-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 98px !important;
    background-color: #ffbe00 !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    z-index: 100 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
}

/* JavaScript로 제어되는 텍스트 흐름 */
.js-moving-text-container {
  display: none !important;
  white-space: nowrap !important;
  width: max-content !important;
  will-change: transform !important;
  position: relative !important;
  animation: none !important;
  transition: none !important;
  transform: translateX(0px) !important;
}

.js-moving-text {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-weight: 600 !important;
  font-size: 70px !important;
  color: #ffd045 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin-right: 300px !important;
  display: none !important;
}

/* 스크롤 힌트 아이콘 */
.scroll-hint-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 101 !important;
  animation: floatUpDown 2s ease-in-out infinite !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.mouse-icon svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.scroll-text {
  color: white !important;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  white-space: nowrap !important;
}

@keyframes floatUpDown {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0px) !important;
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px) !important;
  }
}

/* ========== 메인 비디오 (PC 전용) ========== */
@media (min-width: 769px) {
  .main-video-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    margin-left: calc(-50vw + 50%) !important;
  }

  .main-video {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* fullPage.js 섹션 오버플로우 제한 해제 */
#fullpage {
  overflow: visible !important;
}

.fp-section {
  overflow: visible !important;
}

/* ========== 섹션2 Swiper 갤러리 ========== */
.swiper-gallery-section {
  display: flex !important;
  align-items: flex-end !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 40px 0 40px 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: absolute !important;
  top: -25px !important;
}

/* 배경 장식용 노란 사각형 */
.yellow-decoration {
  position: absolute !important;
  left: calc(-50vw + 900px) !important;
  bottom: 25px !important;
  width: 481px !important;
  height: 676px !important;
  background-color: #ffbe00 !important;
  border-radius: 20px !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 섹션2의 section-container 오버플로우 해제 */
.section2 .section-container {
  overflow: visible !important;
  width: 100vw !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 섹션2 자체도 오버플로우 해제 */
.section2 {
  overflow: visible !important;
}

/* fullPage 섹션들도 오버플로우 해제 */
.fp-section {
  overflow: visible !important;
}

.fp-tableCell {
  overflow: visible !important;
}

.gallery-controls-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: 200px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 10 !important;
}

.arrow-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
  margin-bottom: 10px !important;
}

/* 진행 바 컨테이너 */
.progress-bars-container {
  display: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 15px !important;
  width: 200px !important;
  padding: 0 10px !important;
}

.progress-bar {
  height: 4px !important;
  background-color: #ffe496 !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  position: relative !important;
  flex: 1 !important;
  margin: 0 2px !important;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background-color: #000000;
  border-radius: 2px;
  transition: none;
}

.gallery-swiper {
  width: calc(4 * 350px + 3 * 25px) !important; /* 4개 이미지만 보이도록 */
  height: 530px !important;
  overflow: hidden !important;
  position: relative !important;
}

.gallery-swiper .swiper-slide {
  width: 350px !important;
  height: 530px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.gallery-swiper .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* PC에서 모바일 pagination 숨김 */
.swiper-pagination {
  display: none !important;
}

.gallery-btn {
  background: rgba(255, 255, 255, 0.8) !important;
  border: none !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.3s !important;
}

.gallery-btn:hover {
  background: rgba(255, 255, 255, 1) !important;
}

.fp-tableCell {
  overflow: visible !important;
}

/* 섹션1 설정 - 하단바를 위한 공간 확보 (PC 전용) */
@media (min-width: 769px) {
  .section1 {
    position: relative !important;
    overflow: visible !important;
  }

  .fp-section.section1 {
    position: relative !important;
    overflow: visible !important;
  }

  .section1 .section-container {
    position: relative !important;
    height: 100vh !important;
  }
}

/* ========== 모바일 대응 ========== */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    padding: 10px 15px;
  }

  .logo-area img {
    height: 35px;
  }

  .util-menu-area {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }

  .welcome-msg {
    display: none;
  }

  .loginbar {
    flex-wrap: wrap;
    justify-content: center;
  }

  .loginbar a {
    padding: 6px 12px;
    font-size: 13px;
  }

  .nav-renewal .navbar-header {
    display: block;
  }

  .nav-renewal .navbar-collapse {
    display: block !important;
  }

  .nav-renewal .navbar-collapse.in {
    display: block !important;
  }

  .nav-renewal .main-nav-list {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .nav-renewal .main-nav-list > li {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
  }

  .nav-renewal .main-nav-list > li > a {
    padding: 15px 20px;
  }
}

/* ========== 1920px 이상 와이드 모니터 대응 ========== */
@media (min-width: 1921px) {
  /* 섹션2 갤러리 1920px 제한 */
  .swiper-gallery-section {
    width: 1920px !important;
    left: 50% !important;
    margin-left: -960px !important;
    bottom: 15vh !important;
    top: auto !important;
  }

  /* 노란색 박스 위치 조정 (1920px 기준 중앙에서 계산) */
  .yellow-decoration {
    left: 50% !important;
    margin-left: calc(-800px - 60px) !important;
    bottom: 15vh !important;
  }
}

/* ========== 메인 푸터 스타일 (PC 전용) ========== */
@media (min-width: 769px) {
  /* 푸터 섹션 전체 배경 */
  .section.fp-auto-height {
    background: #ffbe00 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: relative !important;
  }

  .main-footer {
    background: transparent !important;
    padding: 60px 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .footer-container {
    max-width: 1500px !important;
    width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  /* 좌측 영역 */
  .footer-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
  }

  .footer-logo {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
  }

  .footer-logo-img {
    height: 40px !important;
  }

  .footer-logo-text {
    font-size: 14px !important;
    color: #000 !important;
    font-weight: 500 !important;
  }

  .footer-menu {
    display: flex !important;
    gap: 30px !important;
  }

  .footer-menu a {
    color: #000 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: opacity 0.3s !important;
  }

  .footer-menu a:hover {
    opacity: 0.7 !important;
  }

  .footer-copyright {
    font-size: 14px !important;
    color: #000 !important;
    font-weight: 700 !important;
  }

  .footer-social {
    display: flex !important;
    gap: 15px !important;
  }

  .social-icon {
    width: 40px !important;
    height: 40px !important;
    border: 2px solid #000 !important;
    border-radius: 50% !important;
    display: block !important;
    transition: all 0.3s !important;
  }

  .social-icon:hover {
    background: #000 !important;
  }

  /* 우측 영역 */
  .footer-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 15px !important;
  }

  .footer-security-text {
    font-size: 12px !important;
    color: #000 !important;
    text-align: right !important;
    font-weight: 500 !important;
  }

  .footer-payment-img {
    display: flex !important;
    align-items: center !important;
  }

  .footer-payment-img img {
    height: auto !important;
    max-width: 125px !important;
    width: 125px !important;
    transform: scale(0.5) !important;
    transform-origin: right center !important;
  }
} /* PC 푸터 스타일 미디어 쿼리 끝 */

/* ========== 일반 페이지용 푸터 wrapper (가로 스크롤 방지 - PC 전용) ========== */
@media (min-width: 769px) {
  body {
    overflow-x: hidden !important;
  }

  /* MasterPage 기존 푸터 숨김 */
  footer.footer {
    display: none !important;
    visibility: hidden !important;
  }

  /* 일반 페이지 푸터 wrapper - 헤더와 동일한 방식 */
  .page-footer-wrapper[style],
  div.page-footer-wrapper,
  .page-footer-wrapper {
    background: #ffbe00 !important;
    width: 100vw !important;
    max-width: none !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 80px 0 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
    clear: both !important;
    overflow-x: hidden !important;
  }

  /* 부모 요소들의 padding/margin 제거 */
  body {
    overflow-x: hidden !important;
  }

  .page-footer-wrapper .main-footer {
    background: transparent !important;
    padding: 60px 0 !important;
    overflow-x: hidden !important;
  }
}

/* fullPage.js 워터마크 숨김 */
#fp-nav.fp-show-active a.active + .fp-tooltip,
.fp-watermark {
  display: none !important;
  visibility: hidden !important;
}

/* ========== 사진검색 플로팅 버튼 ========== */
.photo-search-floating {
  position: fixed !important;
  right: 0 !important;
  top: calc(50% - 280px) !important;
  transform: translateY(-50%) !important;
  z-index: 9999 !important;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.photo-search-floating.panel-active {
  right: 670px !important;
}

.floating-btn {
  background: url('/Common/images_renew/gnb/sideBtn.png') no-repeat center
    center transparent !important;
  background-size: contain !important;
  border: none !important;
  width: 49px !important;
  height: 161px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.floating-btn:hover {
  opacity: 0.9 !important;
}

.floating-btn .btn-text,
.floating-btn .btn-icon {
  display: none !important;
}

/* 배경 dim */
.photo-search-dim {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.4s ease !important;
  z-index: 9998 !important;
}

.photo-search-dim.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ========== 사진검색 패널 ========== */
.photo-search-panel {
  position: fixed !important;
  right: -700px !important;
  top: calc(50% - 280px - 80.5px) !important;
  width: 650px !important;
  height: 600px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2) !important;
  border-radius: 0 20px 20px 0 !important;
  z-index: 10000 !important;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
}

.photo-search-panel.active {
  right: 20px !important;
}

/* 패널 헤더 */
.panel-header {
  padding: 85px 25px !important;
  border-bottom: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  border-radius: 0 20px 0 0 !important;
  position: relative !important;
}

.panel-title {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* 타이틀 등장 애니메이션 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.photo-search-panel.active .panel-title {
  animation: fadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}

.panel-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #ffbe00 !important;
  border: none !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: #000 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  line-height: 1 !important;
  position: absolute !important;
  right: 15px !important;
  top: 15px !important;
}

.panel-close:hover {
  background: #000 !important;
  color: #ffbe00 !important;
  transform: rotate(90deg) !important;
}

/* 패널 컨텐츠 */
.panel-content {
  flex: 1 !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding-bottom: 55px !important;
}

/* 그라데이션 - panel-content에 배치하여 스크롤과 무관하게 고정 */
.panel-content::after {
  content: '' !important;
  position: absolute !important;
  bottom: 55px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 536px !important;
  height: 64px !important;
  background: linear-gradient(
    to bottom,
    rgba(255, 190, 0, 0) 0%,
    rgba(255, 190, 0, 0.85) 60%,
    rgba(255, 190, 0, 1) 100%
  ) !important;
  pointer-events: none !important;
  border-radius: 0 0 16px 16px !important;
  z-index: 50 !important;
}

/* 노란색 컨테이너 박스 */
.marathon-list {
  width: 536px !important;
  height: 320px !important;
  background: #ffbe00 !important;
  border-radius: 16px !important;
  margin: 0 auto !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.7) transparent !important;
}

/* 스크롤바 스타일 (Chrome, Safari, Edge) */
.marathon-list::-webkit-scrollbar {
  width: 8px !important;
}

.marathon-list::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.marathon-list::-webkit-scrollbar-button:start:decrement,
.marathon-list::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.marathon-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.marathon-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 4px !important;
  z-index: 200 !important;
}

.marathon-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}

.marathon-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 507px !important;
  min-height: 74px !important;
  padding: 12px 20px !important;
  background: #fff !important;
  margin: 0 auto 4px auto !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}
.panel-footer {
  padding: 15px;
  text-align: center;
  border-radius: 0 0 24px 24px;
  border-top: none;
}

.marathon-more {
  display: flex !important;
  align-items: Center !important;
  justify-content: center !important;
  width: 50%;
  margin: 0 auto;
  background: #ffbe00;
  border-radius: 12px;
  font-size: 16px;
  padding: 12px 20px;
  font-weight: 700;
}

.marathon-item:hover {
  background: #fff8e1 !important;
  transform: translateX(-5px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.marathon-item .marathon-date {
  font-size: 12px !important;
  color: #999 !important;
  margin-bottom: 6px !important;
  display: block !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.marathon-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000 !important;
  display: block !important;
  line-height: 1.4 !important;
  word-break: keep-all !important;
  text-align: left !important;
}

/* 기존 panel-gradient 요소는 HTML에서 제거 예정 - 이제 ::after로 대체됨 */
.panel-gradient {
  display: none !important;
}

/* 스크롤바 스타일링 */
.panel-content::-webkit-scrollbar {
  width: 8px !important;
}

.panel-content::-webkit-scrollbar-track {
  background: #f0f0f0 !important;
}

.panel-content::-webkit-scrollbar-thumb {
  background: #ffbe00 !important;
  border-radius: 4px !important;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background: #ffa500 !important;
}

/* ========== Marathon List Page ========== */
/* 페이지 컨테이너 1500px */
.marathon-list-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 상단 배너 영역 */
.marathon-top-banner {
  width: 100%;
  max-width: 1500px;
  height: 500px;
  margin-top: 100px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  overflow: visible;
  background-image: url('/Common/images_renew/menu1/menu1_top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 80px;
}

/* 히어로 배너 내 타이틀 */
.marathon-top-banner .hero-title {
  color: #000;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  margin-top: -40px;
}

/* 타이틀 등장 애니메이션 */
.hero-title-animate {
  opacity: 0;
  transform: translateY(calc(-50% + 40px));
  animation: heroFadeSlideUp 1s ease-out forwards;
  animation-delay: 0.2s;
}

@keyframes heroFadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

.marathon-top-banner .hero-title h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.marathon-top-banner .hero-title p {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

/* 가로선 - 히어로 배너 하단 기준 80px 위 */
.marathon-top-banner::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 5%;
  width: 0;
  height: 1px;
  background: #000;
  z-index: 1;
  animation: lineGrow 1s ease-out 0.3s forwards;
}

/* 기존 레이아웃 1500px 적용 */
.marathon-list-container .col-sm-3,
.marathon-list-container .col-sm-9 {
  float: left;
}

.marathon-list-container .col-sm-3 {
  width: 25%;
}

.marathon-list-container .col-sm-9 {
  width: 75%;
}

/* Breadcrumb 영역 - 히어로 배너 내부에 위치 */
.marathon-top-banner .breadcrumb-wrapper {
  position: absolute;
  bottom: 26px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.marathon-top-banner .breadcrumb-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== 대회일정 페이지 히어로 배너 ==================== */
.schedule-top-banner {
  width: 100%;
  max-width: 1500px;
  height: 500px;
  margin-top: 100px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  overflow: visible;
  background-image: url('/Common/images_renew/menu2/menu2_top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 80px;
}

.schedule-top-banner .hero-title {
  color: #000;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  margin-top: -40px;
}

.schedule-top-banner .hero-title h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.schedule-top-banner .hero-title p {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.schedule-top-banner::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 5%;
  width: 0;
  height: 1px;
  background: #000;
  z-index: 1;
  animation: lineGrow 1s ease-out 0.3s forwards;
}

@keyframes lineGrow {
  from {
    width: 0;
  }
  to {
    width: 90%;
  }
}

.schedule-top-banner .breadcrumb-wrapper {
  position: absolute;
  bottom: 26px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.schedule-top-banner .breadcrumb-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== 상품안내 페이지 히어로 배너 ==================== */
.product-top-banner {
  width: 100%;
  max-width: 1500px;
  height: 500px;
  margin-top: 100px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  overflow: visible;
  background-image: url('/Common/images_renew/menu3/menu3_top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 80px;
}

.product-top-banner .hero-title {
  color: #000;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  margin-top: -40px;
}

.product-top-banner .hero-title h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.product-top-banner .hero-title p {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.product-top-banner::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 5%;
  width: 0;
  height: 1px;
  background: #000;
  z-index: 1;
  animation: lineGrow 1s ease-out 0.3s forwards;
}

.product-top-banner .breadcrumb-wrapper {
  position: absolute;
  bottom: 26px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.product-top-banner .breadcrumb-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== 구매목록 페이지 히어로 배너 ==================== */
.orderlist-top-banner {
  width: 100%;
  max-width: 1500px;
  height: 500px;
  margin-top: 100px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  overflow: visible;
  background-image: url('/Common/images_renew/menu4/menu4_top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 80px;
}

.orderlist-top-banner .hero-title {
  color: #000;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  margin-top: -40px;
}

.orderlist-top-banner .hero-title h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.orderlist-top-banner .hero-title p {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.orderlist-top-banner::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 5%;
  width: 0;
  height: 1px;
  background: #000;
  z-index: 1;
  animation: lineGrow 1s ease-out 0.3s forwards;
}

.orderlist-top-banner .breadcrumb-wrapper {
  position: absolute;
  bottom: 26px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.orderlist-top-banner .breadcrumb-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== 장바구니 페이지 히어로 배너 ==================== */
.basket-top-banner {
  width: 100%;
  max-width: 1500px;
  height: 500px;
  margin-top: 100px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  overflow: visible;
  background-image: url('/Common/images_renew/menu4/menu4_top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 80px;
}

.basket-top-banner .hero-title {
  color: #000;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  margin-top: -40px;
}

.basket-top-banner .hero-title h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.basket-top-banner .hero-title p {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.basket-top-banner::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 5%;
  width: 0;
  height: 1px;
  background: #000;
  z-index: 1;
  animation: lineGrow 1s ease-out 0.3s forwards;
}

.basket-top-banner .breadcrumb-wrapper {
  position: absolute;
  bottom: 26px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.basket-top-banner .breadcrumb-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== 커뮤니티 페이지 히어로 배너 ==================== */
.community-top-banner {
  width: 100%;
  max-width: 1500px;
  height: 500px;
  margin-top: 100px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  overflow: visible;
  background-image: url('/Common/images_renew/menu5/menu5_top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 80px;
}

.community-top-banner .hero-title {
  color: #000;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  margin-top: -40px;
}

.community-top-banner .hero-title h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.community-top-banner .hero-title p {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.community-top-banner::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 5%;
  width: 0;
  height: 1px;
  background: #000;
  z-index: 1;
  animation: lineGrow 1s ease-out 0.3s forwards;
}

.community-top-banner .breadcrumb-wrapper {
  position: absolute;
  bottom: 26px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.community-top-banner .breadcrumb-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== 상품안내 섹션 스타일 ==================== */
.product-section-container {
  width: 100%;
  max-width: 1000px;
  margin: 120px auto;
  padding: 0 20px;
}

.product-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.product-section.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* 섹션 헤더 */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-subtitle {
  font-size: 24px;
  color: #000;
  margin: 0 0 10px 0;
  font-weight: 600;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.section-title {
  font-size: 48px;
  font-weight: 600;
  color: #000;
  margin: 0;
  line-height: 1.4;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.section-title .highlight {
  background: linear-gradient(to right, #ffbe00 0%, #ffbe00 100%);
  background-size: 0% 34px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding: 0 5px;
  font-size: 48px;
  display: inline-block;
  position: relative;
  line-height: 1.2;
}

.product-section.aos-animate .section-title .highlight {
  animation: highlightDraw 1s ease-out 0.3s forwards;
}

@keyframes highlightDraw {
  from {
    background-size: 0% 34px;
  }
  to {
    background-size: 100% 34px;
  }
}

/* 구분선 */
.section-divider {
  width: 1px;
  height: 60px;
  background: #000;
  margin: 40px auto;
}

/* 설명 텍스트 */
.section-description {
  font-size: 16px;
  color: #000;
  text-align: center;
  margin: 0 0 40px 0;
  line-height: 1.6;
}

/* 상품 테이블 */
.product-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 7px 0;
  margin-top: 40px;
  margin-left: -7px;
  margin-right: -7px;
}

.product-table thead th {
  background: #ffbe00;
  color: #000;
  font-size: 24px;
  font-weight: 600;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  padding: 15px 20px;
  text-align: center;
  border: none;
}

.product-table thead th:first-child {
  border-top-left-radius: 10px;
}

.product-table thead th:last-child {
  border-top-right-radius: 10px;
}

.product-table tbody td {
  padding: 20px;
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  color: #000;
  background: #fff;
  border: none;
  border-bottom: 1px solid #ffbe00;
}

.product-table tbody tr:hover td {
  background: #f9f9f9;
}

/* 액자 가격 테이블 마지막 행 */
.frame-table tbody tr.last-row td {
  border-bottom: 3px solid #ffbe00;
}

/* 액자 사이즈 표 */
.frame-guide-section {
  margin-top: 60px;
  text-align: center;
}

.frame-guide-title {
  font-size: 24px;
  font-weight: 600;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  color: #000;
  margin: 0 0 30px 0;
}

.frame-guide-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 상품 타입 박스 섹션 */
.product-type-boxes {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 60px;
  padding: 0 20px;
}

.product-type-box {
  flex: 1;
  max-width: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.product-type-box:hover {
  transform: translateY(-4px);
}

.product-type-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  background-color: #ffbe00;
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 20px 0;
  width: 100%;
}

.product-type-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 20px 0;
  transition: transform 0.6s ease-out;
}

.product-type-box:hover .product-type-image {
  transform: scale(1.03);
}

.product-type-description {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* 사진 인화 상품 설명 섹션 */
.print-product-info-section {
  margin-top: 80px;
  text-align: center;
}

.print-info-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 32px;
  font-weight: 600;
  color: #000;
  background: linear-gradient(to top, #ffbe00 50%, transparent 50%);
  display: inline-block;
  padding: 0 10px;
  margin: 0 0 40px 0;
}

.print-info-description {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 26px;
  font-weight: 600;
  color: #000;
  margin: 0 0 30px 0;
}

.print-info-description p {
  margin: 10px 0;
}

.print-info-notice {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0 0 50px 0;
}

.print-info-notice p {
  margin: 5px 0;
}

.print-service-boxes {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0 20px;
}

.print-service-column {
  flex: 1;
  max-width: 320px;
  text-align: center;
}

.print-service-column-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0 0 20px 0;
}

.print-service-content-box {
  background-color: #fafafa;
  border-radius: 12px;
  padding: 30px 20px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
}

.print-service-item {
  background-color: #ffbe00;
  border-radius: 25px;
  padding: 12px 20px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

/* 상담 및 무통장 안내 박스 */
.consultation-box {
  background-color: #fafafa;
  border-radius: 12px;
  padding: 40px 50px;
  margin-bottom: 80px;
}

.consultation-logo {
  margin-bottom: 30px;
}

.consultation-logo img {
  height: 20px;
  width: auto;
}

.consultation-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 23px;
  font-weight: 600;
  color: #000;
  margin: 0 0 20px 0;
}

.consultation-divider {
  width: 100%;
  height: 1px;
  background-color: #ddd;
  margin-bottom: 30px;
}

.consultation-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
}

.consultation-left {
  flex: 1;
}

.consultation-time-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.time-label {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  padding: 8px 20px;
  border-radius: 5px;
  display: inline-block;
}

.time-label.inquiry {
  background-color: #ffbe00;
}

.time-label.lunch {
  background-color: #ffeebd;
}

.time-value {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 23px;
  font-weight: 600;
  color: #000;
}

.consultation-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.bank-icon {
  width: 40px;
  height: auto;
  margin-bottom: 5px;
}

.bank-name,
.bank-account {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 23px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* 지원 섹션 */
.support-section {
  text-align: center;
  padding: 40px 0;
}

.support-logo {
  max-width: 400px;
  height: auto;
  margin: 30px auto;
  display: block;
}

/* 대회일정 필터 */
.schedule-filter-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 20px;
  margin-bottom: 40px;
}

.schedule-year-selector {
  flex-shrink: 0;
  margin-right: 40px;
}

.year-dropdown {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 40px 10px 20px;
  border: 2px solid #ffbe00;
  border-radius: 8px;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M1.41 0L6 4.59L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
}

.year-dropdown:hover {
  background-color: #fff9e6;
}

.schedule-month-selector {
  flex: 1;
  display: flex;
  justify-content: center;
}

.month-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  align-items: center;
}

.month-list li {
  position: relative;
  margin: 0 -8px;
}

.month-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid #ffbe00;
  background-color: #fff;
  color: #999;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

.month-list li a:hover {
  transform: scale(1.15);
  z-index: 10;
  background-color: #fff9e6;
  color: #000;
}

.month-list li.active a {
  background-color: #ffbe00;
  color: #000;
  border-color: #ffbe00;
  z-index: 5;
  transform: scale(1.1);
}

/* 활성화된 월 동심원 애니메이션 */
.month-list li.active a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #ffbe00;
  transform: translate(-50%, -50%);
  animation: ripple 2s ease-out infinite;
  opacity: 0;
}

.month-list li.active a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #ffbe00;
  transform: translate(-50%, -50%);
  animation: ripple 2s ease-out infinite 1s;
  opacity: 0;
}

@keyframes ripple {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0.6;
  }
  100% {
    width: 150%;
    height: 150%;
    opacity: 0;
  }
}

/* 대회일정 테이블 */
.schedule-table-container {
  padding: 0 20px;
  margin-bottom: 40px;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
}

.schedule-row {
  height: 135px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.schedule-row:hover {
  background-color: #ffbe00;
}

.schedule-row td {
  padding: 10px 3px !important;
  vertical-align: middle !important;
}

/* 1열: 날짜 */
.schedule-date {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
}

.date-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 115px;
  padding: 10px 3px;
}

.date-year-month {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 28px;
  font-weight: 400;
  color: #666;
  margin-bottom: 0;
  line-height: 1;
}

.date-day-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  margin-top: 0;
}

.date-day {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 48px;
  font-weight: 700;
  color: #000;
  line-height: 1;
}

.date-dayofweek {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

/* 요일별 색상 (요일 한글자만) */
.schedule-row.day-1 .date-dayofweek {
  color: #ff0c49;
} /* 일요일 */
.schedule-row.day-2 .date-dayofweek,
.schedule-row.day-3 .date-dayofweek,
.schedule-row.day-4 .date-dayofweek,
.schedule-row.day-5 .date-dayofweek,
.schedule-row.day-6 .date-dayofweek {
  color: #ffbe00;
} /* 평일 (월~금) */
.schedule-row.day-7 .date-dayofweek {
  color: #250cff;
} /* 토요일 */

/* 2열: 대회 정보 */
.schedule-event {
  text-align: left;
  padding-left: 50px !important;
}

.event-link {
  text-decoration: none;
  color: #000;
  display: block;
}

.event-link:hover {
  text-decoration: none;
  color: #000;
}

.event-name {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 34px;
  font-weight: 700;
  color: #000;
  margin-bottom: 5px;
}

.event-type {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 34px;
  font-weight: 400;
  color: #000;
}

/* 3열: 장소 */
.schedule-place {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  text-align: left;
}

/* 4열: 연락처 */
.schedule-contact {
  text-align: center;
}

.contact-group,
.contact-phone {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

/* 대회일정 페이지네이션 */
.schedule-table-container ~ div {
  text-align: center;
  padding: 40px 0;
}

.schedule-table-container ~ div .pagination,
.schedule-table-container ~ .col-xs-12 .pagination {
  display: inline-flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-table-container ~ div .pagination li,
.schedule-table-container ~ .col-xs-12 .pagination li {
  margin: 0;
}

.schedule-table-container ~ div .pagination li a,
.schedule-table-container ~ .col-xs-12 .pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  border: none;
  color: #999;
  text-decoration: none;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.schedule-table-container ~ div .pagination li a:hover,
.schedule-table-container ~ .col-xs-12 .pagination li a:hover {
  background-color: #fff9e6;
}

.schedule-table-container ~ div .pagination li.active a,
.schedule-table-container ~ .col-xs-12 .pagination li.active a {
  background-color: #ffbe00;
  color: #000;
  font-weight: 700;
}

/* 페이지네이션 화살표(꺾쇠) - 양쪽 2개씩 총 4개 */
.schedule-table-container ~ div .pagination li:first-child a,
.schedule-table-container ~ div .pagination li:nth-child(2) a,
.schedule-table-container ~ div .pagination li:nth-last-child(2) a,
.schedule-table-container ~ div .pagination li:last-child a,
.schedule-table-container ~ .col-xs-12 .pagination li:first-child a,
.schedule-table-container ~ .col-xs-12 .pagination li:nth-child(2) a,
.schedule-table-container ~ .col-xs-12 .pagination li:nth-last-child(2) a,
.schedule-table-container ~ .col-xs-12 .pagination li:last-child a {
  border: 1px solid #ddd;
  color: #ffbe00;
}

.breadcrumb-home-link {
  display: flex;
  align-items: center;
  gap: 30px;
  text-decoration: none;
  cursor: pointer;
}

.breadcrumb-home-link:hover {
  text-decoration: none;
  opacity: 0.8;
}

.breadcrumb-home-icon {
  height: 28px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.breadcrumb-arrow {
  height: 20px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.6;
}

.breadcrumb-text {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.breadcrumb-current {
  color: #000;
}

/* ==================== 새로운 마라톤 리스트 레이아웃 ==================== */

/* 전체 컨테이너 */
.marathon-new-layout {
  max-width: 1500px;
  margin: 60px auto 0;
  padding: 0 20px;
}

/* 연도 필터 탭 - 통합 컨테이너 구조 */
.year-filter-tabs {
  display: inline-flex;
  gap: 0;
  margin-bottom: 30px;
  border: 2px solid #ffbe00;
  border-radius: 50px;
  background: #fff;
  padding: 4px;
  opacity: 0;
  animation: yearTabFadeIn 0.8s ease-out 0.3s forwards;
}

@keyframes yearTabFadeIn {
  to {
    opacity: 1;
  }
}

.year-tab {
  padding: 10px 35px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  background: transparent;
  color: #ccc;
}

.year-tab.active {
  background: #ffbe00;
  color: #000;
}

.year-tab:hover {
  text-decoration: none;
}

/* 카드 리스트 */
.marathon-card-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 개별 카드 */
.marathon-card {
  display: flex;
  gap: 59px;
  border: 10px solid #ffbe00;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  padding: 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.marathon-card.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* 좌측: 타이틀 + 이미지 (546px) */
.marathon-card-left {
  width: 546px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.marathon-card-title-box {
  background: #000;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  padding: 25px 20px;
  border-radius: 15px;
  line-height: 1.4;
}

.marathon-card-image {
  flex: 1;
  border-radius: 15px;
  overflow: hidden;
  background: #f0f0f0;
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marathon-card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(240, 240, 240, 0.95);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.marathon-card-image.no-image::before {
  opacity: 1;
}

.marathon-card-image.no-image::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background-image: url('/Common/images_renew/logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  opacity: 0.3;
}

.marathon-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 우측: 정보 (895px) */
.marathon-card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.marathon-card-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.marathon-card-date-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.marathon-year-badge {
  background: #ffbe00;
  color: #000;
  font-size: 24px;
  font-weight: 700;
  padding: 0 24px;
  border-radius: 50px;
  display: inline-block;
}

.marathon-date-text {
  font-size: 48px;
  font-weight: 700;
  color: #000;
}

.marathon-card-name {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
}

.marathon-card-place {
  font-size: 18px;
  color: #666;
  font-weight: 400;
}

.marathon-card-link {
  margin-top: 10px;
}

.marathon-card-link a {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  display: inline-block;
}

.marathon-card-link a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* 페이지네이션 */
.marathon-pagination {
  margin-top: 60px;
  margin-bottom: 80px;
  text-align: center;
}

.marathon-pagination .pagination {
  display: inline-flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.marathon-pagination .pagination li {
  margin: 0;
}

.marathon-pagination .pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  color: #999;
  background: transparent;
  border: none;
  transition: all 0.3s ease;
}

.marathon-pagination .pagination li.active a {
  background: #ffbe00;
  color: #000;
}

.marathon-pagination .pagination li:not(.active) a:hover {
  color: #000;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .marathon-top-banner {
    height: 300px;
    border-radius: 12px;
  }

  .breadcrumb-text {
    font-size: 16px;
  }

  .breadcrumb-home-icon {
    height: 24px;
  }

  .breadcrumb-arrow {
    height: 16px;
  }
}

/* ==========================================
   대회일정 상세 페이지 (Schedule View)
   ========================================== */

/* 대회명 제목 스타일 */
.schedule-view-title {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 2px solid #e0e0e0;
}

.schedule-view-title h2 {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 42px;
  font-weight: 700;
  color: #000;
  margin: 0;
  line-height: 1.3;
}

/* 본문 컨테이너 */
.schedule-view-container {
  max-width: 1500px;
  margin: 80px auto 100px;
  padding: 0 20px;
}

.schedule-view-content {
  background: #f5f5f5;
  border-radius: 20px;
  padding: 60px;
  position: relative;
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* 좌측: 정보 섹션 */
.schedule-info-section {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* 대회일시 & 카운트다운 섹션 */
.info-datetime-section {
  display: flex;
  gap: 60px;
  margin-bottom: 50px;
  align-items: flex-start;
}

.info-datetime-left {
  flex: 1;
}

.info-datetime-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 카운트다운 래퍼 */
.countdown-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.countdown-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  text-align: right;
}

/* 플립 카운트다운 */
.countdown-container {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.flip-card {
  width: 60px;
  height: 70px;
  position: relative;
  perspective: 500px;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2c2c2c;
  border-radius: 8px;
  backface-visibility: hidden;
}

.flip-card-front {
  z-index: 2;
  transform-origin: top center;
  transition: transform 0.5s ease-in-out;
}

.flip-card-back {
  z-index: 1;
}

.flip-card-inner.flip .flip-card-front {
  transform: rotateX(90deg) translateY(-50%);
}

.flip-number {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 36px;
  font-weight: 700;
  color: #ffbe00;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.countdown-label {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 10px;
  font-weight: 600;
  color: #666;
  letter-spacing: 1px;
}

.info-main-item {
  margin-bottom: 50px;
}

.info-label {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.info-value-large {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 32px;
  font-weight: 400;
  color: #000;
  margin: 0;
  line-height: 1.4;
}

/* 2열 그리드 */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 60px;
}

.info-grid-col {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label-small {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  margin: 0 0 8px 0;
}

.info-value {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  margin: 0;
  line-height: 1.5;
}

.homepage-link {
  color: #000;
  text-decoration: none;
  word-break: break-all;
  transition: color 0.3s ease;
}

.homepage-link:hover {
  color: #ffbe00;
  text-decoration: underline;
}

/* 우측: 로고 섹션 - 절대위치로 우하단 배치 */
.schedule-logo-section {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 0;
}

.schedule-view-logo {
  width: 250px;
  height: auto;
  opacity: 0.15;
}

/* 반응형 */
@media (max-width: 1200px) {
  .schedule-view-content {
    padding: 50px 40px;
  }

  .schedule-logo-section {
    bottom: 30px;
    right: 30px;
  }

  .schedule-view-logo {
    width: 200px;
  }
}

@media (max-width: 968px) {
  .schedule-view-content {
    padding: 40px 30px;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .schedule-logo-section {
    bottom: 20px;
    right: 20px;
  }

  .schedule-view-logo {
    width: 150px;
  }
}

@media (max-width: 768px) {
  .schedule-view-top-banner {
    height: auto;
    min-height: 400px;
    padding: 60px 20px;
  }

  .schedule-category {
    font-size: 16px;
  }

  .schedule-view-container {
    margin: 50px auto 60px;
  }

  .schedule-view-content {
    padding: 30px 20px 80px;
  }

  .info-value-large {
    font-size: 24px;
  }

  .info-label {
    font-size: 16px;
  }

  .info-value {
    font-size: 18px;
  }

  .schedule-logo-section {
    bottom: 15px;
    right: 15px;
  }

  .schedule-view-logo {
    width: 120px;
  }
}

/* ========================================
   Member/Mypage/OrderList.aspx 스타일
======================================== */

/* 섹션 제목 */
.orderlist-section-title {
  text-align: center;
  margin: 60px 0 40px 0;
}

.orderlist-subtitle {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0 0 12px 0;
}

.orderlist-main-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 48px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* ========================================
   Community/Faq.aspx 스타일
======================================== */

/* FAQ 섹션 제목 */
.faq-section-title {
  text-align: center;
  margin: 60px 0 60px 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.faq-section-title.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.faq-subtitle {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0 0 12px 0;
}

.faq-main-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 48px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* FAQ 질문-답변 래퍼 */
.faq-question-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
}

.faq-question-wrapper:last-child {
  margin-bottom: 0;
}

/* FAQ 질문 이미지 */
.faq-image-item {
  width: 890px;
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  position: relative;
}

.faq-image-item.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.faq-image-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* FAQ 이미지 텍스트 오버레이 */
.faq-image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 20px));
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 30px;
  font-weight: 600;
  color: #000;
  text-align: center;
  width: 90%;
  pointer-events: none;
}

/* FAQ 답변 영역 (각 질문 이미지 바로 아래) */
.faq-answer-wrapper {
  width: 1500px;
  background-color: #fafafa;
  padding: 60px 80px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.faq-answer-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.faq-answer-content {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  line-height: 1.6;
  text-align: center;
}

/* FAQ 답변 영역 내 이미지 스타일 */
.faq-answer-content img {
  width: 890px;
  height: auto;
  display: block;
  margin: 20px auto;
}

.faq-answer-empty {
  text-align: center;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 25px;
  color: #666;
  padding: 40px 0;
  margin: 60px auto;
}

/* ========================================
   Member/Mypage/EditInfo.aspx 스타일
======================================== */

/* 상단 배너 */
.editinfo-top-banner {
  width: 100%;
  max-width: 1500px;
  height: 500px;
  margin-top: 100px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  overflow: visible;
  background-image: url('/Common/images_renew/mypage/mypage_top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 80px;
}

.editinfo-top-banner .hero-title {
  color: #000;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  margin-top: -40px;
}

.editinfo-top-banner .hero-title h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.editinfo-top-banner .hero-title p {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.editinfo-top-banner::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 5%;
  width: 0;
  height: 1px;
  background: #000;
  z-index: 1;
  animation: lineGrow 1s ease-out 0.3s forwards;
}

.editinfo-top-banner .breadcrumb-wrapper {
  position: absolute;
  bottom: 26px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.editinfo-top-banner .breadcrumb-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* 섹션 제목 */
.editinfo-section-title {
  text-align: center;
  margin: 60px 0 60px 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.editinfo-section-title.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.editinfo-subtitle {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0 0 12px 0;
}

.editinfo-main-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 48px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* 폼 래퍼 */
.editinfo-form-wrapper {
  max-width: 1200px;
  margin: 0 auto 60px auto;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.editinfo-form-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.editinfo-form-container {
  background-color: #fafafa;
  padding: 60px 80px;
  border-radius: 8px;
}

.editinfo-form-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 28px;
  font-weight: 600;
  color: #000;
  margin: 0 0 30px 0;
  text-align: left;
}

/* 폼 테이블 */
.editinfo-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  margin-bottom: 30px;
  table-layout: fixed;
  box-sizing: border-box;
}

.editinfo-table td {
  padding: 15px 20px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 18px;
  line-height: 1.6;
  box-sizing: border-box;
  overflow: hidden;
}

.editinfo-table td:first-child {
  font-weight: 600;
  color: #000;
  background-color: #f5f5f5;
  width: 15%;
}

.editinfo-table td:last-child {
  color: #333;
  width: 85%;
}

.editinfo-table input[type='text'],
.editinfo-table input[type='password'],
.editinfo-table select {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  max-width: 100%;
  box-sizing: border-box;
}

.editinfo-table input[type='text']:focus,
.editinfo-table input[type='password']:focus,
.editinfo-table select:focus {
  outline: none;
  border-color: #ffbe00;
}

/* CHEditor 및 textarea 스타일 */
.editinfo-table textarea,
.editinfo-table #Board_Content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* CHEditor 컨테이너 및 iframe 강제 스타일 */
.editinfo-table iframe,
iframe[id*='cheditor'] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.cheditor_container,
.cheditor_instance,
div[id*='cheditor'] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.editinfo-table .cheditor_container,
.editinfo-table .cheditor_instance {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* CHEditor toolbar wrapper padding, height 제거 */
.cheditor-tb-wrapper {
  padding: 0 !important;
  height: auto !important;
}

/* PurchaseTable 라디오 버튼 스타일 */
.PurchaseTable input[type='radio'] {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
  cursor: pointer;
  accent-color: #ffd700; /* 노란색 */
}

.PurchaseTable input[type='radio'] + label {
  vertical-align: middle;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
}

.PurchaseTable tr td {
  padding: 12px 0px 12px 10px !important;
}

.PurchaseTable tr th {
  padding: 12px 10px 12px 0px !important;
}

/* 주소 검색 버튼 */
.address-search-btn {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 20px;
  background-color: #666;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}

.address-search-btn:hover {
  background-color: #555;
}

/* 버튼 영역 */
.editinfo-button-wrapper {
  text-align: center;
  margin-top: 40px;
}

.editinfo-button-confirm,
.editinfo-button-cancel {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 60px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 10px;
}

.editinfo-button-confirm {
  background-color: #ffbe00;
  color: #000;
}

.editinfo-button-confirm:hover {
  background-color: #e5ab00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.editinfo-button-cancel {
  background-color: #666;
  color: #fff;
}

.editinfo-button-cancel:hover {
  background-color: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   PictureList 페이지 스타일 (Marathon/PictureList.aspx)
   ============================================ */

/* PictureList는 기존 .marathon-top-banner 스타일 재사용 (2559번째 줄) */

/* 경기 정보 카드 */
.picturelist-competition-info {
  max-width: 1500px;
  margin: 60px auto 30px auto;
  text-align: center;
  padding: 40px;
  background: #fafafa;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.picturelist-competition-info.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.competition-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 36px;
  font-weight: 700;
  color: #000;
  margin: 0 0 20px 0;
}

.competition-details {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  color: #666;
}

.competition-date,
.competition-place {
  font-weight: 500;
}

.competition-separator {
  margin: 0 15px;
  color: #cccccc;
}

/* 컨텐츠 영역 - 1500px 컨테이너 */
.picturelist-content-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 검색 영역 (검색 전) */
.picturelist-search-section {
  text-align: center;
  padding: 60px 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.picturelist-search-section.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.picturelist-search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.search-input {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  width: 500px;
  height: 55px;
  padding: 0 20px;
  font-size: 16px;
  border: 2px solid #dddddd;
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #ffbe00;
  box-shadow: 0 0 0 3px rgba(255, 190, 0, 0.1);
}

.search-button {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  width: 120px;
  height: 55px;
  background-color: #ffbe00;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease,
    box-shadow 0.3s ease;
}

.search-button:hover {
  background-color: #e5ab00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.search-checkbox-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
}

.search-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.search-checkbox-label {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  user-select: none;
}

/* 안내 박스 */
.picturelist-notice-box {
  margin: 40px 0;
  padding: 30px 40px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 4px solid #ffbe00;
}

.notice-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin: 0 0 15px 0;
}

/* 일반 notice-list - Section 7 제외 */
.notice-list {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin: 0;
}

/* Section 7이 아닐 때만 padding-left 적용 */
div:not(.section7) .notice-list {
  padding-left: 20px;
}

/* Section 7 전용 - 좌측 패딩 강제 제거 */
.section7 .notice-list {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: normal !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
}

.notice-list li {
  margin-bottom: 8px;
}

.section7 .notice-list li {
  margin-bottom: 0 !important;
}

.notice-warning {
  color: #f44336;
  font-weight: 600;
}

/* 검색 결과 영역 (검색 후) */
.picturelist-result-wrapper {
  display: flex;
  gap: 30px;
  padding: 60px 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  box-sizing: border-box;
}

.picturelist-result-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* 좌측: 썸네일 리스트 (65%) */
.picturelist-thumbnail-section {
  flex: 0 0 65%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.piclist_pictures {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  width: 100%;
}

.picturelist-thumbnail-section .picture_item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: border 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  border: 3px solid transparent;
}

.picture_item:hover {
  border-color: #ffbe00;
  box-shadow: 0 4px 16px rgba(255, 190, 0, 0.3);
}

.picture_item.active {
  border-color: #ffbe00;
  box-shadow: 0 0 0 1px #ffbe00, 0 4px 12px rgba(255, 190, 0, 0.25);
  animation: neon-pulse 2s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px #ffbe00, 0 4px 12px rgba(255, 190, 0, 0.25);
  }
  50% {
    box-shadow: 0 0 0 1px #ffbe00, 0 0 12px rgba(255, 190, 0, 0.5),
      0 4px 12px rgba(255, 190, 0, 0.35);
  }
}

/* 가이드 스텝 통통 튀는 애니메이션 */
@keyframes bounce-step {
  0%,
  10%,
  100% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-8px);
  }
}

.picture-item-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}

.picture-item-checkbox input[type='checkbox'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #ffbe00;
}

.picture-item-image {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picture-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: none;
  margin: 0 !important;
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.picinfo {
  padding: 10px;
  text-align: center;
  font-size: 13px;
  color: #666;
  background: transparent;
  border: none;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.picturelist-thumbnail-section .col-xs-12 {
  margin-top: auto;
  text-align: center;
  width: 100%;
  padding: 30px 0 10px 0;
}

.picturelist-thumbnail-section .pagination {
  display: inline-flex;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.picturelist-thumbnail-section .pagination li {
  margin: 0;
}

.picturelist-thumbnail-section .pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  color: #cccccc;
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.3s ease;
  background-color: transparent;
  border: none;
}

.picturelist-thumbnail-section .pagination li a:hover {
  background-color: #fff9e6;
  color: #000;
}

.picturelist-thumbnail-section .pagination li.active a {
  background-color: #ffbe00;
  color: #000;
  font-weight: 600;
}

/* 우측: 미리보기 + 버튼 (35%) */
.picturelist-preview-section {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  position: relative;
}

.preview-image-container {
  position: relative;
  width: 100%;
  height: 700px;
  background: #fafafa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #eee;
  box-sizing: border-box;
  padding: 20px;
}

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.preview-placeholder p {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  color: #999;
  margin: 0;
  text-align: center;
}

.preview-image-container img[name='big_pic'] {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 60%;
  min-height: 60%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* pointer-events: none; */
}

/* 회전된 이미지도 중앙 정렬 */
#Marathon_Picture .rotate270,
#Marathon_Picture .rotate90,
#Marathon_Picture .rotate180 {
  transform-origin: center center !important;
}

#Marathon_Picture .rotate90 {
  transform: rotate(90deg) !important;
}

#Marathon_Picture .rotate180 {
  transform: rotate(180deg) !important;
}

#Marathon_Picture .rotate270 {
  transform: rotate(270deg) !important;
}

/* 워터마크 오버레이 */
.watermark-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 5;
}

.watermark-message {
  position: absolute;
  width: 60%;
  max-width: 400px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}

/* 버튼 컨테이너 */
.preview-button-container {
  display: flex;
  gap: 15px;
}

.preview-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.preview-btn svg {
  flex-shrink: 0;
}

.preview-btn-secondary {
  background: white;
  border: 2px solid #ffbe00;
  color: #000;
}

.preview-btn-secondary:hover {
  background: #fff9e6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 190, 0, 0.2);
}

.preview-btn-primary {
  background: #ffbe00;
  border: 2px solid #ffbe00;
  color: #000;
}

.preview-btn-primary:hover {
  background: #e5ab00;
  border-color: #e5ab00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 관리자 다운로드 버튼 */
.admin-download-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  background: #ffbe00;
  color: #000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-download-btn:hover {
  background: #e5ab00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.admin-download-btn svg {
  flex-shrink: 0;
}

/* ===== 로그인 페이지 스타일 ===== */

/* 로그인 페이지에서 wrap의 max-width 제한 해제 */
body:has(.login-container) .wrap {
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 로그인 페이지에서 form 높이 100% */
body:has(.login-container) form {
  height: 100% !important;
  display: block !important;
}

/* 로그인 페이지에서 Footer 숨김 */
body:has(.login-container) .footer {
  display: none !important;
}

/* 로그인 페이지에서 스크롤 제거 */
body:has(.login-container) {
  overflow: hidden !important;
  height: 100vh !important;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.login-container {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 좌측: 로그인 영역 (40%) */
.login-left {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center; /* 가로 중앙정렬 */
  padding: 40px;
  background: white;
}

.login-card {
  width: 80%; /* 좌측 영역의 80% */
  max-width: 480px;
  /* 슬라이드업 애니메이션 초기 상태 */
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  /* 박스 테두리 */
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  padding: 50px 40px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.login-card.animate {
  opacity: 1;
  transform: translateY(0);
}

.login-logo {
  text-align: center;
  margin-bottom: 30px;
}

.login-logo img {
  height: 35px;
}

.login-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 32px;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin: 0 0 10px 0;
}

.login-subtitle {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  color: #666;
  text-align: center;
  margin: 0 0 40px 0;
}

.login-form {
  margin-bottom: 25px;
}

.login-form .form-group {
  margin-bottom: 15px;
}

.login-input {
  width: 100%;
  height: 54px;
  padding: 0 20px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.login-input:focus {
  outline: none;
  border-color: #ffbe00;
  box-shadow: 0 0 0 3px rgba(255, 190, 0, 0.1);
}

.login-input::placeholder {
  color: #999;
}

.login-button {
  width: 100%;
  height: 54px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  background: #ffbe00;
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.login-button:hover {
  background: #e5ab00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 190, 0, 0.3);
}

.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #eee;
}

.login-links .link-item {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.login-links .link-item:hover {
  color: #ffbe00;
}

.login-links .link-divider {
  color: #ddd;
}

.login-register {
  text-align: center;
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid #eee;
}

.login-register span {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  color: #666;
  margin-right: 8px;
}

.login-register .register-link {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  color: #ffbe00;
  text-decoration: none;
  transition: color 0.3s ease;
}

.login-register .register-link:hover {
  color: #e5ab00;
  text-decoration: underline;
}

/* 우측: 이미지 영역 (60%) */
.login-right {
  width: 60%;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.login-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.login-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 190, 0, 0.85) 0%,
    rgba(255, 190, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  background-size: 200% 200%;
  animation: gradientMove 8s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.overlay-content {
  text-align: center;
  color: white;
  padding: 40px;
}

.overlay-content h3 {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 15px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.overlay-content p {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 20px;
  font-weight: 300;
  margin: 0;
  opacity: 0.95;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

/* 타이핑 애니메이션 텍스트 */
.typing-text {
  display: inline-block;
  min-height: 60px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
}

/* 타이핑 커서 블링크 애니메이션 */
.typing-cursor {
  font-size: 48px;
  color: white;
  animation: blink 0.7s infinite;
  margin-left: 5px;
  font-weight: 300;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* 구매목록 표 스타일 */
.piclist_table.list table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.piclist_table.list table colgroup col {
  border: none;
}

/* 표 헤더 */
.piclist_table.list table th {
  background-color: #ffbe00;
  color: #000;
  font-size: 22px;
  font-weight: 600;
  height: 61px;
  text-align: center;
  vertical-align: middle;
  border: none;
  padding: 0 15px;
}

/* 데이터 행 */
.piclist_table.list table td {
  color: #000;
  font-size: 22px;
  font-weight: 400;
  height: 113px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #000;
  padding: 0 15px;
  transition: background-color 0.3s ease;
}

/* 데이터 행 클릭 가능하도록 커서 변경 */
.piclist_table.list table tbody tr {
  cursor: pointer;
}

/* 행 hover 효과 */
.piclist_table.list table tr:hover td {
  background-color: #ffbe00;
}

/* 헤더는 hover 제외 */
.piclist_table.list table tr:first-child:hover th {
  background-color: #ffbe00;
}

/* 구매번호 링크 스타일 */
.piclist_table.list table td a {
  color: #000;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.piclist_table.list table td a:hover {
  opacity: 0.7;
}

/* 결제 여부 색상 */
.piclist_table.list table td:last-child {
  font-weight: 600;
}

/* 빈 데이터 메시지 */
.piclist_table.list table td[colspan] b {
  font-size: 22px;
  color: #666;
}

/* 페이지네이션 컨테이너 */
.piclist_table.list ~ .col-xs-12 {
  text-align: center;
  padding: 40px 0;
}

/* 페이지네이션 스타일 */
.piclist_table.list ~ .col-xs-12 .pagination {
  display: inline-flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.piclist_table.list ~ .col-xs-12 .pagination li {
  margin: 0;
}

.piclist_table.list ~ .col-xs-12 .pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  color: #cccccc;
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.3s ease;
  background-color: transparent;
  border: none;
}

.piclist_table.list ~ .col-xs-12 .pagination li a:hover {
  background-color: #fff9e6;
}

.piclist_table.list ~ .col-xs-12 .pagination li.active a {
  background-color: #ffbe00;
  color: #000;
  font-weight: 700;
  border-color: transparent;
}

/* 페이지네이션 화살표 - 양쪽 2개씩 총 4개 */
.piclist_table.list ~ .col-xs-12 .pagination li:first-child a,
.piclist_table.list ~ .col-xs-12 .pagination li:nth-child(2) a,
.piclist_table.list ~ .col-xs-12 .pagination li:nth-last-child(2) a,
.piclist_table.list ~ .col-xs-12 .pagination li:last-child a {
  color: #ffbe00;
}

/* ========================================
   Order Detail Page Styles
   ======================================== */

/* 주문 상세 테이블 스타일 */
.piclist_table.list table tr.order-detail-item {
  border-top: 1px solid #ddd;
  height: 80px;
}

.piclist_table.list table tr.order-detail-item-row {
  border-top: none !important;
  border-bottom: none !important;
  height: 80px;
}

/* 상품 내부 가로선 제거 */
.piclist_table.list table tr.order-detail-item td,
.piclist_table.list table tr.order-detail-item-row td {
  border-bottom: none !important;
}

/* 모든 셀 높이 통일 */
.piclist_table.list table tr.order-detail-item td,
.piclist_table.list table tr.order-detail-item-row td {
  height: 80px;
  vertical-align: middle !important;
  font-size: 20px;
}

/* hover 효과 완전 제거 */
.piclist_table.list table tr.order-detail-item:hover,
.piclist_table.list table tr.order-detail-item-row:hover,
.piclist_table.list table tr.order-detail-item:hover td,
.piclist_table.list table tr.order-detail-item-row:hover td {
  background-color: transparent !important;
  cursor: default !important;
}

/* 이미지 셀 스타일 */
.order-detail-image-cell {
  vertical-align: middle !important;
  padding: 0 !important;
  text-align: center !important;
  height: 240px;
}

.order-detail-image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 5% 0;
  box-sizing: border-box;
}

/* 이미지 영역 - 70% (여백 10% 제외) */
.order-detail-image-wrapper a {
  height: 70%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 5%;
  box-sizing: border-box;
  position: relative;
}

.order-detail-image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* 이미지 정보 오버레이 */
.order-detail-image-info {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 15px;
  border-radius: 4px;
  text-align: center;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.order-detail-image-wrapper a:hover .order-detail-image-info {
  opacity: 1;
}

/* 버튼 영역 - 20% */
.order-detail-button-area {
  height: 20%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
}

/* 다운로드 버튼 스타일 */
.order-detail-download-btn {
  background-color: #ffbe00;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 90%;
  max-width: 115px;
}

.order-detail-download-btn:hover {
  background-color: #e5aa00;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 190, 0, 0.3);
}

/* 결제금액 컬럼 녹색 처리 */
.piclist_table.list table tr.order-detail-item td:last-child,
.piclist_table.list table tr.order-detail-item-row td:last-child {
  color: #4caf50;
  font-weight: bold;
}

/* 체크박스 세로 정렬 */
.piclist_table.list table tr.order-detail-item-row .aspNetDisabled,
.piclist_table.list table tr.order-detail-item-row input[type='checkbox'] {
  vertical-align: middle;
  margin: 0 0 0 5px;
}

/* ========================================
   Total Price Summary Section (가로 배치)
   ======================================== */

/* TotalPrice 영역 전체 */
.piclist_table.list table td.TotalPrice {
  padding: 100px 0 !important;
  background-color: transparent !important;
  text-align: center !important;
  border-bottom: none !important;
}

/* TotalPrice가 속한 행 하단 선 제거 */
.piclist_table.list table tr:has(td.TotalPrice) {
  border-bottom: none !important;
}

/* Hover 효과 제거 */
.piclist_table.list table td.TotalPrice:hover {
  background-color: transparent !important;
}

.piclist_table.list table td.TotalPrice center {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.piclist_table.list table td.TotalPrice center table {
  display: table !important;
  width: auto !important;
  margin: 0 !important;
  border: none !important;
  border-collapse: separate !important;
}

.piclist_table.list table td.TotalPrice center table tbody {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 50px !important;
}

/* 각 행을 독립된 박스로 */
.piclist_table.list table td.TotalPrice center table tr {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  width: 220px !important;
  border: none !important;
  background-color: transparent !important;
}

/* Hover 효과 제거 */
.piclist_table.list table td.TotalPrice center table tr:hover {
  background-color: transparent !important;
}

.piclist_table.list table td.TotalPrice center table tr td,
.piclist_table.list table td.TotalPrice center table tr th {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  border: none !important;
  background-color: transparent !important;
  text-align: center !important;
  padding: 0 !important;
}

/* Hover 효과 제거 */
.piclist_table.list table td.TotalPrice center table tr td:hover,
.piclist_table.list table td.TotalPrice center table tr th:hover {
  background-color: transparent !important;
}

/* 제목 (노란색 박스) - 모두 동일한 높이 */
.piclist_table.list table td.TotalPrice center table tr td:first-child,
.piclist_table.list table td.TotalPrice center table tr th:first-child {
  background-color: #ffbe00 !important;
  color: #000 !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  padding: 15px 25px !important;
  border-radius: 8px !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 60px !important;
  line-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 제목 Hover 효과 제거 */
.piclist_table.list table td.TotalPrice center table tr td:first-child:hover,
.piclist_table.list table td.TotalPrice center table tr th:first-child:hover {
  background-color: #ffbe00 !important;
}

/* 금액 (일반 텍스트) - Literal과 "원"이 한 줄로 */
.piclist_table.list table td.TotalPrice center table tr td:last-child {
  font-size: 25px !important;
  font-weight: 700 !important;
  color: #333 !important;
  text-align: center !important;
  background-color: transparent !important;
  padding: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  line-height: 1 !important;
  height: auto !important;
  padding-bottom: 12px !important;
}

/* ========================================
   Purchase Info Sections (구매자정보, 받는사람정보, 결제정보)
   ======================================== */

/* 섹션 제목 스타일 */
.col-sm-12.mg_top_30 > b {
  display: block !important;
  font-size: 48px !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-bottom: 30px !important;
}

/* PurchaseTable 전체 스타일 */
.PurchaseTable {
  width: 775px !important;
  margin: 0 auto !important;
  border-collapse: separate !important;
  border-spacing: 0 15px !important;
  border: none !important;
}

/* 모든 테두리 제거 */
.PurchaseTable tr,
.PurchaseTable td,
.PurchaseTable th {
  border: none !important;
}

/* colgroup 설정 */
.PurchaseTable colgroup col:first-child {
  width: 215px !important;
}

.PurchaseTable colgroup col:last-child {
  width: 477px !important;
}

/* 행 스타일 */
.PurchaseTable tr {
  height: 45px !important;
}

/* 왼쪽 항목 영역 (th) - 노란색 박스 */
.PurchaseTable th {
  background-color: #ffbe00 !important;
  color: #000 !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  width: 215px !important;
  height: 45px !important;
}

/* 오른쪽 내용 영역 (td) */
.PurchaseTable td {
  font-size: 25px !important;
  font-weight: 600 !important;
  color: #333 !important;
  padding: 0 0 0 50px !important;
  vertical-align: middle !important;
  text-align: left !important;
  height: 45px !important;
}

/* 섹션 사이 구분선 */
.col-sm-12.mg_top_30 {
  margin-top: 80px !important;
  padding-top: 80px !important;
  position: relative !important;
}

/* 구분선 - 가상 요소로 775px 제한 */
.col-sm-12.mg_top_30::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 775px !important;
  height: 1px !important;
  background-color: #000 !important;
}

/* 첫 번째 섹션(구매자정보)은 위쪽 선 없음 */
.col-sm-12.mg_top_30:first-of-type {
  padding-top: 0 !important;
}

.col-sm-12.mg_top_30:first-of-type::before {
  display: none !important;
}

/* ========================================
   Download Notice (다운로드 안내)
   ======================================== */

.download-notice {
  width: 775px !important;
  margin: 50px auto 100px !important;
  padding: 15px 30px !important;
  background-color: #f2f2f2 !important;
  border: 1px dashed #ffbe00 !important;
  border-radius: 10px !important;
  color: red !important;
  font-size: 20px !important;
  font-weight: bold !important;
  text-align: center !important;
  line-height: 1.2 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* ========================================
   Community List Search (검색창)
   ======================================== */

.community-search-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 40px auto !important;
  width: 100% !important;
}

.community-search-box {
  display: flex !important;
  align-items: center !important;
  background-color: #fff !important;
  border: 2px solid #ffbe00 !important;
  border-radius: 50px !important;
  padding: 8px 20px !important;
  width: 500px !important;
  max-width: 90% !important;
  box-shadow: 0 2px 8px rgba(255, 190, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

.community-search-box:hover {
  box-shadow: 0 4px 12px rgba(255, 190, 0, 0.35) !important;
  border-color: #e5aa00 !important;
}

.community-search-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  font-size: 16px !important;
  padding: 8px 15px !important;
  background-color: transparent !important;
  color: #333 !important;
}

.community-search-input::placeholder {
  color: #999 !important;
}

.community-search-btn {
  width: 24px !important;
  height: 24px !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-left: 10px !important;
  transition: transform 0.2s ease !important;
}

.community-search-btn:hover {
  transform: scale(1.1) !important;
}

.community-search-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ========================================
   Community Write Button (게시글 작성 버튼)
   ======================================== */

.community-write-btn {
  background: linear-gradient(135deg, #ffbe00 0%, #ffd700 100%) !important;
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 30px !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(255, 190, 0, 0.3) !important;
}

.community-write-btn:hover {
  background: linear-gradient(135deg, #ffd700 0%, #ffbe00 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 190, 0, 0.5) !important;
}

.community-write-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(255, 190, 0, 0.4) !important;
}

/* ========================================
   Community Action Buttons (수정/삭제 버튼)
   ======================================== */

.community-action-btn {
  background-color: #ffbe00 !important;
  color: #333 !important;
  border: none !important;
  padding: 12px 30px !important;
  font-family: 'Pretendard', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  line-height: normal !important;
  height: auto !important;
  margin-left: 10px !important;
}

.community-action-btn:hover {
  background-color: #ffa500 !important;
}

/* 수정 버튼 (기본 노란색 유지) */
.community-edit-btn {
  background-color: #ffbe00 !important;
  color: #333 !important;
}

.community-edit-btn:hover {
  background-color: #ffa500 !important;
}

/* 삭제 버튼 (검정색 테두리 - 깔끔하게) */
.community-delete-btn {
  background-color: #fff !important;
  color: #333 !important;
  border: 2px solid #333 !important;
}

.community-delete-btn:hover {
  background-color: #333 !important;
  color: #fff !important;
}

/* ========================================
   Scroll Animation (스크롤 인터랙션)
   ======================================== */

/* 초기 상태 - 숨김 */
.scroll-animate {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
}

/* 애니메이션 활성화 - 나타남 */
.scroll-animate.aos-animate {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 각 요소별 딜레이 효과 (순차적 애니메이션) */
.scroll-animate:nth-child(1) {
  transition-delay: 0s !important;
}

.scroll-animate:nth-child(2) {
  transition-delay: 0.1s !important;
}

.scroll-animate:nth-child(3) {
  transition-delay: 0.2s !important;
}

.scroll-animate:nth-child(4) {
  transition-delay: 0.3s !important;
}

.scroll-animate:nth-child(5) {
  transition-delay: 0.4s !important;
}

.scroll-animate:nth-child(6) {
  transition-delay: 0.5s !important;
}

/* ========================================
   장바구니 페이지 스타일 (Basket Page)
   ======================================== */

/* 결제 단계 표시 컨테이너 */
.payment-steps-container {
  width: 100%;
  max-width: 1000px;
  margin: 60px auto 40px auto;
  padding: 0 20px;
}

.payment-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  padding: 0 30px;
}

/* 배경 연결선 (원 중앙에 딱 맞게 - 얇고 깔끔하게) */
.payment-steps::before {
  content: '';
  position: absolute;
  top: 30px; /* 원의 중앙 높이 (60px / 2) */
  left: calc(12.5% + 30px); /* 첫 번째 원 중앙부터 */
  right: calc(12.5% + 30px); /* 마지막 원 중앙까지 */
  height: 1px; /* 3px → 1px 얇게 */
  background: #dddddd; /* 더 연한 회색 */
  z-index: 1;
}

/* 각 단계 */
.payment-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  flex: 1;
}

.payment-step .step-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #dddddd; /* 3px → 2px 얇게, 연한 회색 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.payment-step .step-number {
  font-size: 24px;
  font-weight: 700;
  color: #999;
  transition: all 0.4s ease;
}

.payment-step .step-label {
  font-size: 14px;
  font-weight: 500;
  color: #999;
  text-align: center;
  transition: all 0.4s ease;
  white-space: nowrap;
  max-width: 120px;
}

/* 활성화된 단계 - 깔끔하고 세련되게 */
.payment-step.active .step-circle {
  background: #ffbe00; /* 단색으로 깔끔하게 */
  border: 2px solid #ffbe00;
  box-shadow: 0 0 0 4px rgba(255, 190, 0, 0.15); /* 부드러운 외곽선 */
  transform: scale(1.05); /* 살짝만 확대 */
  animation: ripple 1.5s ease-out infinite; /* 동심원 애니메이션 */
}

.payment-step.active .step-number {
  color: #000;
  font-weight: 800;
}

.payment-step.active .step-label {
  color: #000;
  font-weight: 700;
}

/* 동심원 애니메이션 */
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 190, 0, 0.4),
      0 0 0 4px rgba(255, 190, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 190, 0, 0),
      0 0 0 4px rgba(255, 190, 0, 0.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 190, 0, 0), 0 0 0 4px rgba(255, 190, 0, 0.15);
  }
}

/* 단계 연결선 제거 (배경선으로 대체됨) */
.step-line {
  display: none;
}

/* 장바구니 총 금액 카드 */
.basket-total-price-card {
  background: #fafafa;
  border-radius: 12px;
  padding: 40px 60px;
  margin: 30px auto;
  max-width: 500px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.price-label {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.price-value {
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.price-divider {
  height: 1px;
  background: #e5e5e5;
  margin: 8px 0;
}

.price-divider-bold {
  height: 2px;
  background: #333;
  margin: 16px 0;
}

.price-row-total {
  padding: 20px 0 0 0;
}

.price-label-total {
  font-size: 20px;
  color: #000;
  font-weight: 700;
}

.price-value-total {
  font-size: 28px;
  color: #ffbe00;
  font-weight: 800;
}

/* 장바구니 버튼 영역 */
.basket-button-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding: 30px 0 150px;
}

.basket-button-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.basket-button-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 체크박스 스타일 */
.basket-checkbox-all {
  margin-right: 8px;
}

/* 버튼 공통 스타일 - ReplyDiv 버튼 스타일 참고 */
.basket-btn-delete,
.basket-btn-delete-all,
.basket-btn-continue,
.basket-btn-purchase {
  padding: 12px 30px !important;
  font-family: 'Pretendard', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  line-height: normal !important;
  height: auto !important;
}

/* 삭제 버튼 */
.basket-btn-delete {
  background-color: #f5f5f5 !important;
  color: #666 !important;
  border: 1px solid #e0e0e0 !important;
}

.basket-btn-delete:hover {
  background-color: #e0e0e0 !important;
  color: #333 !important;
}

/* 전체 삭제 버튼 */
.basket-btn-delete-all {
  background-color: #fff !important;
  color: #f44336 !important;
  border: 1px solid #f44336 !important;
}

.basket-btn-delete-all:hover {
  background-color: #f44336 !important;
  color: #fff !important;
}

/* 계속 쇼핑 버튼 */
.basket-btn-continue {
  background-color: #fff !important;
  color: #333 !important;
  border: 2px solid #333 !important;
}

.basket-btn-continue:hover {
  background-color: #333 !important;
  color: #fff !important;
}

/* 구매하기 버튼 (메인 CTA) - ReplyDiv 스타일 적용 */
.basket-btn-purchase {
  background-color: #ffbe00 !important;
  color: #333 !important;
  border: none !important;
  min-width: 150px !important;
}

.basket-btn-purchase:hover {
  background-color: #ffa500 !important;
}

/* 장바구니 테이블 - 다른 페이지와 동일한 스타일 적용 */
.Basket.list table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.Basket.list table colgroup col {
  border: none;
}

/* 표 헤더 - 노란색 배경 (다른 페이지와 통일) */
.Basket.list table th {
  background-color: #ffbe00;
  color: #000;
  font-size: 22px;
  font-weight: 600;
  height: 61px;
  text-align: center;
  vertical-align: middle;
  border: none;
  padding: 0 15px;
}

/* 데이터 행 */
.Basket.list table td {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #000;
  padding: 16px 12px;
  transition: background-color 0.3s ease;
}

/* 행 hover 효과 - 노란색 (다른 페이지와 통일) */
.Basket.list table tr:hover td {
  background-color: #ffbe00;
}

/* 헤더는 hover 유지 */
.Basket.list table tr:first-child:hover th {
  background-color: #ffbe00;
}

/* 반응형 */
@media (max-width: 768px) {
  .payment-steps-container {
    padding: 0 15px;
    margin: 40px auto 60px auto;
  }

  .payment-step .step-circle {
    width: 50px;
    height: 50px;
  }

  .payment-step .step-number {
    font-size: 20px;
  }

  .payment-step .step-label {
    font-size: 12px;
  }

  .step-line {
    margin: 0 10px;
  }

  .basket-button-area {
    flex-direction: column;
    gap: 20px;
  }

  .basket-button-left,
  .basket-button-right {
    width: 100%;
    justify-content: center;
  }

  .basket-total-price-card {
    padding: 30px 20px;
  }
}

/* ===== FindAccount (아이디/비밀번호 찾기) 페이지 스타일 ===== */

.findaccount-top-banner {
  width: 100%;
  max-width: 1500px;
  height: 500px;
  margin-top: 100px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  overflow: visible;
  background-image: url('/Common/images_renew/mypage/mypage_top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 80px;
}

.findaccount-top-banner .hero-title {
  color: #000;
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  margin-top: -40px;
}

.findaccount-top-banner .hero-title h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.findaccount-top-banner .hero-title p {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.findaccount-top-banner::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 5%;
  width: 0;
  height: 1px;
  background: #000;
  z-index: 1;
  animation: lineGrow 1s ease-out 0.3s forwards;
}

.findaccount-top-banner .breadcrumb-wrapper {
  position: absolute;
  bottom: 26px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 30px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.findaccount-top-banner .breadcrumb-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.findaccount-section-title {
  text-align: center;
  margin: 60px 0 60px 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.findaccount-section-title.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.findaccount-subtitle {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0 0 12px 0;
}

.findaccount-main-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 48px;
  font-weight: 600;
  color: #000;
  margin: 0 0 30px 0;
}

.findaccount-tab-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.findaccount-tab-links .tab-link {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 20px;
  font-weight: 500;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 10px 20px;
  border-radius: 8px;
}

.findaccount-tab-links .tab-link:hover {
  color: #ffbe00;
  background: rgba(255, 190, 0, 0.1);
}

.findaccount-tab-links .tab-link.active {
  color: #ffbe00;
  font-weight: 600;
}

.findaccount-tab-links .tab-divider {
  color: #e0e0e0;
  font-size: 20px;
}

.findaccount-form-wrapper {
  max-width: 1000px;
  margin: 0 auto 60px auto;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.findaccount-form-wrapper.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.findaccount-form-container {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.find-account-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
  border-bottom: 2px solid #e0e0e0;
}

.find-tab {
  flex: 1;
  max-width: 300px;
  padding: 20px 30px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  color: #666;
  border-bottom: 4px solid transparent;
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: -2px;
}

.find-tab .tab-icon {
  font-size: 24px;
}

.find-tab:hover {
  color: #ffbe00;
  background: rgba(255, 190, 0, 0.05);
}

.find-tab.active {
  color: #ffbe00;
  border-bottom-color: #ffbe00;
  font-weight: 600;
}

.find-form-section {
  animation: fadeInSection 0.5s ease;
}

@keyframes fadeInSection {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.findaccount-form-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin: 0 0 12px 0;
}

.findaccount-form-desc {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 15px;
  color: #666;
  margin: 0 0 40px 0;
  line-height: 1.6;
}

.findaccount-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

.findaccount-table td {
  padding: 20px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.findaccount-table td:first-child {
  width: 25%;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  vertical-align: top;
  padding-top: 28px;
}

.findaccount-table td:last-child {
  width: 75%;
}

.find-input {
  width: 100%;
  max-width: 400px;
  height: 50px;
  padding: 0 20px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.find-input:focus {
  outline: none;
  border-color: #ffbe00;
  box-shadow: 0 0 0 3px rgba(255, 190, 0, 0.1);
}

.find-input::placeholder {
  color: #999;
}

.find-select {
  height: 50px;
  padding: 0 15px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: white;
  cursor: pointer;
}

.find-select:focus {
  outline: none;
  border-color: #ffbe00;
}

.radio-group {
  display: flex;
  gap: 30px;
  align-items: center;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  color: #333;
}

.radio-label input[type='radio'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #ffbe00;
}

.radio-text {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.email-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.email-input-group .find-input.email-part {
  max-width: 180px;
}

.email-at {
  font-size: 18px;
  color: #666;
  font-weight: 500;
}

.phone-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.phone-input-group .find-input.phone-part {
  max-width: 100px;
}

.phone-dash {
  font-size: 18px;
  color: #666;
  font-weight: 500;
}

.findaccount-button-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 40px;
}

.findaccount-button-confirm {
  min-width: 180px;
  height: 56px;
  background: #ffbe00;
  color: #000;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 17px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.findaccount-button-confirm:hover {
  background: #e5ab00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 190, 0, 0.3);
}

.findaccount-button-cancel {
  min-width: 180px;
  height: 56px;
  background: #ffffff;
  color: #666;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 17px;
  font-weight: 600;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.findaccount-button-cancel:hover {
  border-color: #ffbe00;
  color: #ffbe00;
  background: rgba(255, 190, 0, 0.05);
}

.find-result-box {
  text-align: center;
  padding: 60px 40px;
  animation: fadeInSection 0.6s ease;
}

.find-result-box .result-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 30px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
}

.find-result-success .result-icon {
  background: rgba(0, 200, 83, 0.1);
  color: #00c853;
}

.find-result-error .result-icon {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.find-result-box .result-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 30px 0;
  color: #000;
}

.find-result-box .result-content {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 40px;
}

.find-result-box .result-content p {
  margin: 8px 0;
}

.find-result-box .result-highlight {
  font-size: 28px;
  font-weight: 700;
  color: #ffbe00;
  margin: 20px 0;
}

.find-result-box .result-notice {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 25px 30px;
  margin-bottom: 40px;
}

.find-result-box .result-notice p {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  margin: 8px 0;
  text-align: left;
}

/* ========================================
   Register Page Styles
   ======================================== */

/* Agreement Cards */
.register-agreement-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
}

.register-agreement-header {
  background: #f8f9fa;
  padding: 20px 30px;
  border-bottom: 1px solid #e9ecef;
}

.register-agreement-header h3 {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #000;
}

.register-agreement-header .required-badge {
  color: #ff0000;
  font-weight: 700;
  margin-left: 4px;
}

.register-agreement-header .optional-badge {
  color: #666;
  font-weight: 500;
  margin-left: 4px;
}

.register-agreement-content {
  padding: 30px;
}

/* Agreement Textarea */
.register-agreement-textarea {
  width: 100%;
  height: 300px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 13px;
  line-height: 1.8;
  color: #333;
  background: #fafafa;
  resize: vertical;
  overflow-y: auto;
}

.register-agreement-textarea::-webkit-scrollbar {
  width: 8px;
}

.register-agreement-textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.register-agreement-textarea::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 4px;
}

.register-agreement-textarea::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* Privacy Content */
.register-privacy-content {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.register-privacy-content > p {
  font-size: 15px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 20px;
}

.register-privacy-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.register-privacy-table th,
.register-privacy-table td {
  border: 1px solid #e0e0e0;
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
}

.register-privacy-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #000;
}

.register-privacy-table td {
  background: #fff;
  color: #333;
  line-height: 1.6;
}

.register-notice {
  font-size: 13px;
  color: #666;
  margin-top: 12px;
  text-align: left;
  line-height: 1.6;
}

/* Agreement Footer */
.register-agreement-footer {
  padding: 20px 30px;
  background: #fafafa;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 30px;
  justify-content: center;
}

.register-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  user-select: none;
}

.register-radio-label input[type='radio'] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #ffbe00;
}

.register-radio-label:hover {
  color: #000;
}

/* All Agree Checkbox */
.register-all-agree {
  padding: 24px 0;
  text-align: center;
  border-top: 2px solid #e9ecef;
  margin-top: 16px;
}

.register-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  user-select: none;
}

.register-checkbox-label input[type='checkbox'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #ffbe00;
}

.register-checkbox-label:hover {
  color: #ffbe00;
}

/* ========================================
   RegisterForm Page Styles
   ======================================== */

/* Required Notice */
.regform-required-notice {
  background: #fff9e6;
  border-left: 4px solid #ffbe00;
  padding: 16px 20px;
  margin-bottom: 30px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  color: #333;
  border-radius: 4px;
}

.required-mark {
  color: #ff0000;
  font-weight: 700;
  margin-right: 2px;
}

/* RegisterForm Table */
.regform-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
}

.regform-table tbody tr {
  border-bottom: 1px solid #e9ecef;
}

.regform-table tbody tr:last-child {
  border-bottom: none;
}

.regform-label {
  width: 25%;
  padding: 24px 20px;
  background: #f8f9fa;
  font-weight: 600;
  font-size: 15px;
  color: #000;
  vertical-align: top;
  text-align: left;
}

.regform-input {
  width: 75%;
  padding: 24px 30px;
  background: #fff;
  vertical-align: top;
}

/* Form Controls */
.regform-textbox {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.regform-textbox:focus {
  outline: none;
  border-color: #ffbe00;
  box-shadow: 0 0 0 3px rgba(255, 190, 0, 0.1);
}

.regform-textbox-short {
  width: 180px;
}

.regform-textbox-medium {
  width: 240px;
}

.regform-textbox-full {
  width: 100%;
  margin-bottom: 8px;
}

.regform-textbox-zip {
  width: 120px;
  background: #f8f9fa;
}

.regform-textbox-phone {
  width: 80px;
}

.regform-textbox-email {
  width: 180px;
}

/* Select Dropdown */
.regform-select {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s;
}

.regform-select:focus {
  outline: none;
  border-color: #ffbe00;
}

/* Inline Group (생년월일, 휴대폰, 이메일) */
.regform-inline-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.regform-unit {
  font-size: 14px;
  color: #666;
  margin-right: 8px;
}

.regform-separator {
  font-size: 14px;
  color: #999;
  margin: 0 4px;
}

/* Address Group */
.regform-address-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.regform-address-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.regform-button-search {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  padding: 10px 20px;
  background: #ffbe00;
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.regform-button-search:hover {
  background: #e5aa00;
}

.regform-button-search:active {
  transform: scale(0.98);
}

/* Validation Messages */
.regform-validation-msg {
  margin-top: 8px;
  font-size: 13px;
}

.validation-ok {
  color: #00a86b;
  font-weight: 500;
}

.validation-error {
  color: #ff4444;
  font-weight: 500;
}

/* Hint Text */
.regform-hint {
  font-size: 13px;
  color: #666;
  margin-top: 8px;
  line-height: 1.6;
}

/* Radio Group */
.regform-radio-group {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.regform-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  user-select: none;
}

.regform-radio {
  accent-color: #ffbe00;
}

.regform-radio-label:hover {
  color: #000;
}

/* Cancel Button */
.findaccount-button-cancel {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  background: #f1f3f5;
  color: #495057;
  border: 1px solid #dee2e6;
  padding: 14px 40px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 12px;
}

.findaccount-button-cancel:hover {
  background: #e9ecef;
  color: #212529;
  transform: translateY(-1px);
}

.findaccount-button-cancel:active {
  transform: translateY(0);
}

/* ========================================
   RegisterComplete Page Styles
   ======================================== */

.regcomplete-card {
  background: #fff;
  border-radius: 16px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Success Icon */
.regcomplete-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Title & Subtitle */
.regcomplete-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.regcomplete-subtitle {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 18px;
  color: #666;
  margin: 0 0 40px 0;
  line-height: 1.6;
}

/* Info Box */
.regcomplete-info-box {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 32px 40px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.regcomplete-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.regcomplete-info-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.regcomplete-info-item span {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 15px;
  color: #333;
  line-height: 1.8;
}

/* Button Group */
.regcomplete-button-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.regcomplete-button-primary {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  background: #ffbe00;
  color: #000;
  border: none;
  padding: 16px 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(255, 190, 0, 0.2);
}

.regcomplete-button-primary:hover {
  background: #e5aa00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 190, 0, 0.3);
}

.regcomplete-button-primary:active {
  transform: translateY(0);
}

.regcomplete-button-secondary {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  background: #f1f3f5;
  color: #495057;
  border: 1px solid #dee2e6;
  padding: 16px 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.regcomplete-button-secondary:hover {
  background: #e9ecef;
  color: #212529;
  transform: translateY(-2px);
}

.regcomplete-button-secondary:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .regcomplete-card {
    padding: 40px 24px;
  }

  .regcomplete-title {
    font-size: 24px;
  }

  .regcomplete-subtitle {
    font-size: 16px;
  }

  .regcomplete-info-box {
    padding: 24px 20px;
  }

  .regcomplete-button-group {
    flex-direction: column;
    width: 100%;
  }

  .regcomplete-button-primary,
  .regcomplete-button-secondary {
    width: 100%;
  }
}

/* ========================================== */
/* 메인 페이지 비디오 텍스트 오버레이 (PC 전용) */
/* ========================================== */

/* 정먹바위체 폰트 - 모든 가능한 경로 시도 */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

@font-face {
  font-family: 'SangSangRock';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/SangSangRockOTF.woff')
    format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@media (min-width: 769px) {
  /* .main-video-container는 라인 1860에서 position: fixed로 이미 정의됨 */

  /* 모바일 전용 텍스트 숨김 */
  .video-text-mobile {
    display: none !important;
  }

  .video-text-overlay {
    position: absolute;
    bottom: 150px;
    right: 150px;
    z-index: 10;
    pointer-events: none;
    display: flex;
    gap: 30px;
    align-items: center;
  }

  .video-text-line {
    font-family: 'SangSangRock', 'Black Han Sans', sans-serif !important;
    font-size: 65px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 0, 0, 0.7) !important;
    opacity: 0;
    transform: translateX(60px);
    animation: videoTextFlow 13s ease-in-out infinite;
    white-space: nowrap !important;
    letter-spacing: 2px !important;
  }

  .video-text-line:nth-child(2) {
    animation-delay: 0.4s !important;
  }

  @keyframes videoTextFlow {
    0%,
    38.5% {
      /* 0~5초: 대기 (숨김) */
      opacity: 0;
      transform: translateX(60px);
    }
    61.5% {
      /* 5~8초: 등장 (3초 슬라이드 + 페이드인) */
      opacity: 1;
      transform: translateX(0);
    }
    92.3% {
      /* 8~12초: 완전 노출 유지 (4초) */
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      /* 12~13초: 사라짐 (1초 페이드아웃 + 왼쪽 이동) */
      opacity: 0;
      transform: translateX(-40px);
    }
  }
}

/* ========================================
   Main.aspx 전용 반응형 CSS
   대상: PC 브라우저 768px ~ 1499px
   목적: 섹션 왼쪽 빈 공간 제거
   원리: left: 50% + translateX(-50%) 제거
   작성일: 2025-01-31
   ======================================== */

@media (min-width: 768px) and (max-width: 1499px) {
  /*
    ========================================
    핵심 수정: 모든 문제 섹션의 중앙 정렬 방식 제거
    - 기존: left: 50% + transform: translateX(-50%) → 1500px 기준 중앙
    - 수정: left: 0 + transform: none → 화면 왼쪽부터 100vw 사용
    ========================================
    */

  /* 모든 섹션 위치 초기화 */
  #fullpage .section1,
  #fullpage .section3,
  #fullpage .section4,
  #fullpage .section4.fp-section,
  #fullpage .section5.fp-section,
  #fullpage .section6.fp-section {
    left: 0 !important;
    transform: none !important;
  }

  /* 섹션1: 비디오 컨테이너 */
  #fullpage .section1 .main-video-container {
    margin-left: 0 !important;
  }

  /* 섹션1: 노란바 */
  #fullpage .section1 .moving-text-bar {
    margin-left: 0 !important;
  }
}

/* ========================================
   롤백 방법: 위 미디어쿼리 블록 삭제 (7978~8009줄)
   ======================================== */

/* Fix footer overlap issue - clearfix for col-sm-12 containers */
.col-sm-12.pd_top_15.pd_left_0.pd_right_0::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

/* ========================================
   OrderList Pagination Styles (PC)
   Schedule/List.aspx와 동일한 디자인 적용
   ======================================== */

/* 페이지네이션 컨테이너 - 테이블과의 간격(40px), 푸터와의 간격(40px) */
.orderlist-pagination {
  text-align: center;
  padding: 40px 0;
}

/* 페이지네이션 리스트 */
.orderlist-pagination .pagination {
  display: inline-flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.orderlist-pagination .pagination li {
  margin: 0;
}

/* 페이지네이션 링크 - 40px 원형 버튼 */
.orderlist-pagination .pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  border: none;
  color: #999;
  text-decoration: none;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* 호버 효과 */
.orderlist-pagination .pagination li a:hover {
  background-color: #fff9e6;
}

/* 활성 페이지 - 노란색 배경 */
.orderlist-pagination .pagination li.active a {
  background-color: #ffbe00;
  color: #000;
  font-weight: 700;
}

/* 페이지네이션 화살표(꺾쇠) - 양쪽 2개씩 총 4개 */
.orderlist-pagination .pagination li:first-child a,
.orderlist-pagination .pagination li:nth-child(2) a,
.orderlist-pagination .pagination li:nth-last-child(2) a,
.orderlist-pagination .pagination li:last-child a {
  border: 1px solid #ddd;
  color: #ffbe00;
}

/* OrderList 페이지의 페이지네이션 스타일 - Schedule과 동일하게 적용 */
.col-sm-12.pd_top_15 ~ div .pagination {
  display: inline-flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.col-sm-12.pd_top_15 ~ div .pagination li {
  margin: 0;
}

.col-sm-12.pd_top_15 ~ div .pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  border: none;
  color: #999;
  text-decoration: none;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.col-sm-12.pd_top_15 ~ div .pagination li a:hover {
  background-color: #fff9e6;
}

.col-sm-12.pd_top_15 ~ div .pagination li.active a {
  background-color: #ffbe00;
  color: #000;
  font-weight: 700;
}

/* 페이지네이션 화살표(꺾쇠) - 양쪽 2개씩 총 4개 */
.col-sm-12.pd_top_15 ~ div .pagination li:first-child a,
.col-sm-12.pd_top_15 ~ div .pagination li:nth-child(2) a,
.col-sm-12.pd_top_15 ~ div .pagination li:nth-last-child(2) a,
.col-sm-12.pd_top_15 ~ div .pagination li:last-child a {
  border: 1px solid #ddd;
  color: #ffbe00;
}

/* OrderList 페이지 페이지네이션 - 더 강력한 우선순위 적용 */
div[style*='margin-top: 40px'] .pagination {
  display: inline-flex !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

div[style*='margin-top: 40px'] .pagination li {
  margin: 0 !important;
}

div[style*='margin-top: 40px'] .pagination li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  border: none !important;
  color: #999 !important;
  text-decoration: none !important;
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

div[style*='margin-top: 40px'] .pagination li a:hover {
  background-color: #fff9e6 !important;
}

div[style*='margin-top: 40px'] .pagination li.active a {
  background-color: #ffbe00 !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* 화살표 버튼 */
div[style*='margin-top: 40px'] .pagination li:first-child a,
div[style*='margin-top: 40px'] .pagination li:nth-child(2) a,
div[style*='margin-top: 40px'] .pagination li:nth-last-child(2) a,
div[style*='margin-top: 40px'] .pagination li:last-child a {
  border: 1px solid #ddd !important;
  color: #ffbe00 !important;
}

/* OrderList 페이지 - 테이블과 페이지네이션 사이 간격 (PC 전용) */
@media (min-width: 769px) {
  /* OrderList 페이지의 테이블에만 하단 마진 추가 */
  .col-sm-12.pd_top_15 .col-xs-12.mg_top_30.piclist_table.list {
    margin-bottom: 40px !important;
  }
}

/* OrderList 페이지 전용 - 테이블 하단 간격 강제 적용 */
@media (min-width: 769px) {
  /* OrderList 페이지의 piclist_table에 하단 간격 추가 */
  div.col-sm-12.pd_top_15.pd_left_0.pd_right_0
    > div.col-xs-12.mg_top_30.piclist_table.list {
    margin-bottom: 40px !important;
    display: block !important;
  }

  /* 페이지네이션 wrapper도 display block 강제 */
  div.col-sm-12.pd_top_15.pd_left_0.pd_right_0
    ~ div[style*='margin-top: 40px'] {
    display: block !important;
    clear: both !important;
  }
}

/* ==================== 마이페이지 탭 메뉴 스타일 ==================== */
.mypage-tabs-wrapper {
  text-align: center;
  margin-bottom: 50px;
}

.mypage-tabs {
  display: inline-flex;
  gap: 0;
  border: 2px solid #ffbe00;
  border-radius: 50px;
  background: #fff;
  padding: 4px;
}

.mypage-tab {
  padding: 12px 30px;
  border-radius: 50px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  color: #999;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.mypage-tab:hover {
  color: #666;
  text-decoration: none;
}

.mypage-tab.active {
  background: #ffbe00;
  color: #000;
}

.mypage-tab.active:hover {
  color: #000;
}

/* 마이페이지 콘텐츠 영역 */
.mypage-content {
  flex: 1;
  min-width: 0;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .mypage-tabs-wrapper {
    margin-bottom: 30px;
    padding: 0 10px;
  }

  .mypage-tabs {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 6px;
    gap: 4px;
  }

  .mypage-tab {
    padding: 10px 16px;
    font-size: 14px;
    flex: 1 1 calc(50% - 4px);
    text-align: center;
    border-radius: 12px;
  }
}

/* ========================================
   메인 팝업 스타일 (PC)
   ======================================== */
.main-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-popup-container {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: popupFadeIn 0.3s ease;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.main-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-popup-close:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.main-popup-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.main-popup-slides {
  position: relative;
  width: 100%;
}

.main-popup-slide {
  display: none;
  width: 100%;
}

.main-popup-slide.active {
  display: block;
  animation: slideFadeIn 0.4s ease;
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main-popup-slide img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
  object-fit: contain;
}

/* 배경 이미지 스타일 (cover) */
.main-popup-image {
  width: 100%;
  height: 450px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-popup-link {
  display: block;
  cursor: pointer;
}

.main-popup-link:hover .main-popup-image {
  opacity: 0.95;
}

/* 슬라이드 네비게이션 버튼 */
.main-popup-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.main-popup-nav:hover {
  background: #ffbe00;
  color: #000;
  transform: translateY(-50%) scale(1.1);
}

.main-popup-prev {
  left: 12px;
}

.main-popup-next {
  right: 12px;
}

/* 인디케이터 */
.main-popup-indicators {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.main-popup-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.main-popup-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.main-popup-dot.active {
  background: #ffbe00;
  border-color: #ffbe00;
  transform: scale(1.2);
}

/* 탭 메뉴 */
.main-popup-tabs {
  display: flex;
  border-top: 1px solid #eee;
  background: #fff;
}

.main-popup-tab {
  flex: 1;
  padding: 14px 12px;
  border: none;
  background: #f5f5f5;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border-right: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-popup-tab:last-child {
  border-right: none;
}

.main-popup-tab:hover {
  background: #eee;
  color: #333;
}

.main-popup-tab.active {
  background: #ffbe00;
  color: #000;
}

/* 하단 영역 */
.main-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #f8f9fa;
  border-top: 1px solid #eee;
}

.main-popup-today-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.main-popup-today-check input[type='checkbox'] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #ffbe00;
}

.main-popup-today-check span {
  user-select: none;
}

.main-popup-close-btn {
  padding: 10px 24px;
  background: #333;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.main-popup-close-btn:hover {
  background: #ffbe00;
  color: #000;
}

/* ========================================
   커뮤니티 본문 하단 프로모션 배너 (세로 레이아웃)
   ======================================== */
.community-prom-banner-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.community-prom-item {
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 30px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.community-prom-item:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.community-prom-text {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .community-prom-banner-container {
    margin-top: 30px;
    padding-top: 20px;
    gap: 12px;
  }

  .community-prom-item {
    height: 180px;
    padding: 20px;
  }

  .community-prom-text {
    font-size: 16px;
  }
}

/* ========================================
   Purchase 페이지 - PC/모바일 뷰 전환
   ======================================== */

/* PC에서 모바일 뷰 숨김 */
.purchase-mobile-view {
  display: none !important;
}

/* PC에서 PC 뷰 표시 */
.purchase-pc-view {
  display: block !important;
}

/* ========================================
   Schedule View 관리자 버튼 스타일
   ======================================== */

.schedule-admin-buttons {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.schedule-btn {
  font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.schedule-btn-edit {
  background: linear-gradient(135deg, #ffbe00 0%, #ffd700 100%);
  color: #000;
  box-shadow: 0 2px 8px rgba(255, 190, 0, 0.3);
}

.schedule-btn-edit:hover {
  background: linear-gradient(135deg, #ffd700 0%, #ffbe00 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 190, 0, 0.5);
}

.schedule-btn-delete {
  background: #dc3545;
  color: #fff;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.schedule-btn-delete:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
}