/**
 * sjuF.css - 사주 서비스 공통 스타일
 * 
 * 용도: 모든 sjuF 페이지에서 공유하는 기본 레이아웃, 헤더, 푸터, 버튼, 반응형 기준
 * 
 * 페이지별 스타일:
 *   - sjuF01.css : 메인 페이지 (Hero, 신청폼, 후기, FAQ, 문의)
 *   - sjuF02.css : 마이페이지 (사이드바, 주문내역, 모달)
 *   - sjuF03.css : 설문조사
 *   - sjuF04.css : 포인트 내역
 * 
 * author: 초음개발팀
 * since: 2025-01-21
 * updated: 2025-12-30 - 페이지별 CSS 분리 (sjuF01~04)
 */

/* ========================================
   Reset & Base
   ======================================== */
* { box-sizing: border-box; }

.saju-page {
  margin: 0;
  padding: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  background: #0b1120;
  color: #f9fafb;
  line-height: 1.8;
  text-align: center;
  font-size: 17px;
}

.saju-page a { text-decoration: none; color: inherit; }

/* ========================================
   Container
   ======================================== */
.saju-page .container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* ========================================
   Header
   ======================================== */
.saju-page header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(15,23,42,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(248,113,113,0.4);
}

.saju-page .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.saju-page .header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.saju-page .header-login {
  display: flex;
  align-items: center;
}

.saju-page .logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: left;
}

.saju-page .logo span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #9ca3af;
  margin-top: 4px;
}

/* 로고 한 줄 표시 (마이페이지 등) */
.saju-page .logo.logo-inline span {
  display: inline;
  font-size: 20px;
  font-weight: 800;
  color: #9ca3af;
  margin-top: 0;
  margin-left: 0;
}

/* ========================================
   Login / Logout 버튼 (PC)
   ======================================== */
.saju-page .btn-login {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: 8px;
  color: #fecaca;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.saju-page .btn-login:hover {
  background: rgba(248,113,113,0.15);
  border-color: #f87171;
  color: #fff;
}

.saju-page .btn-login .login-icon {
  width: 16px;
  height: 16px;
}

.saju-page .header-login .user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 헤더 버튼 공통 스타일 */
.saju-page .header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* 관리자 배지 */
.saju-page .header-btn.admin-badge {
  background: rgba(248,113,113,0.15);
  border: 1px solid rgba(248,113,113,0.4);
  color: #fecaca;
  cursor: default;
}

/* 사용자 이름 */
.saju-page .header-btn.user-name {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fecaca;
  cursor: default;
}

/* 메인으로 / 문의 버튼 */
.saju-page .header-btn.btn-inquiry {
  background: transparent;
  border: 1px solid rgba(248,113,113,0.5);
  color: #fecaca;
}
.saju-page .header-btn.btn-inquiry:hover {
  background: rgba(248,113,113,0.15);
  border-color: #f87171;
  color: #fff;
}

/* 로그아웃 버튼 */
.saju-page .header-btn.btn-logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #9ca3af;
}
.saju-page .header-btn.btn-logout:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: #e5e7eb;
}

.saju-page .header-login .user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e5e7eb;
  font-size: 14px;
}

.saju-page .header-login .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(248,113,113,0.4);
}

.saju-page .header-login .user-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(248,113,113,0.2);
  border: 2px solid rgba(248,113,113,0.4);
}

.saju-page .header-login .user-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: #fecaca;
  font-size: 13px;
  font-weight: 500;
}

.saju-page .btn-logout {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: #9ca3af;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.saju-page .btn-logout:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: #e5e7eb;
}

/* 내페이지 버튼 (PC) */
.saju-page .btn-mypage {
  padding: 8px 14px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 6px;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.saju-page .btn-mypage:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  color: #fff;
}

/* 내페이지 버튼 (모바일) */
.saju-page .btn-mypage-mo {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 6px;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.saju-page .btn-mypage-mo:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  color: #fff;
}

/* ========================================
   공통 버튼
   ======================================== */
.saju-page .btn-primary {
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #f9fafb;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(248,113,113,0.5);
  transition: transform 0.05s, box-shadow 0.1s, background 0.1s;
  white-space: nowrap;
}

.saju-page .btn-primary:hover {
  transform: translateY(-1px);
  background: #dc2626;
  box-shadow: 0 10px 26px rgba(248,113,113,0.7);
}

.saju-page .btn-inquiry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: 6px;
  color: #fecaca;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.saju-page .btn-inquiry:hover {
  background: rgba(248,113,113,0.15);
  border-color: #f87171;
  color: #fff;
}

.saju-page .btn-inquiry svg {
  width: 16px;
  height: 16px;
}

.saju-page .btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #9ca3af;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.saju-page .btn-back:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: #e5e7eb;
}

.saju-page .btn-back svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   Layout
   ======================================== */
.saju-page main { padding-bottom: 52px; }
.saju-page section { padding: 60px 0; }

/* ========================================
   Typography
   ======================================== */
.saju-page h2 {
  font-size: 36px;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
  color: #fef2f2;
}

.saju-page p {
  font-size: 17px;
  margin: 0 0 12px;
  color: #e5e7eb;
}

/* ========================================
   Footer
   ======================================== */
.saju-page footer {
  background: #020617;
  color: #9ca3af;
  font-size: 14px;
  padding: 24px 0 28px;
}

.saju-page footer div + div { margin-top: 8px; }

.saju-page .footer-title {
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 12px;
}

.saju-page .footer-desc {
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.6;
}

.saju-page .footer-info-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  color: #6b7280;
  line-height: 1.8;
}

.saju-page .footer-copyright {
  margin-top: 16px;
  color: #6b7280;
  font-size: 13px;
}

.saju-page .footer-links {
  margin-top: 16px;
}

.saju-page .footer-links a {
  color: #9ca3af;
  text-decoration: underline;
  margin-right: 16px;
}

.saju-page .footer-links a:hover {
  color: #fecaca;
}

/* ========================================
   공통 Form 컨트롤
   ======================================== */
.saju-page .form-control {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(248,113,113,0.4);
  border-radius: 8px;
  background-color: rgba(15,23,42,0.9);
  color: #f9fafb;
  font-size: 15px;
  transition: all 0.3s;
  height: 46px;
  box-sizing: border-box;
}

.saju-page textarea.form-control {
  height: auto;
  min-height: 60px;
}

.saju-page .form-control:focus {
  outline: none;
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.1);
}

.saju-page .radio-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: rgba(15,23,42,0.9);
  border: 2px solid rgba(248,113,113,0.4);
  color: #e5e7eb;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.3s;
  height: 46px;
  box-sizing: border-box;
}

.saju-page .radio-label:hover { border-color: #ef4444; }

.saju-page .form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-end;
}

.saju-page .form-group { flex: 1; }

.saju-page .form-row-top {
  align-items: flex-start;
}

.saju-page .form-label {
  display: block;
  color: #f9fafb;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 16px;
}

.saju-page .form-note {
  font-size: 14px;
  color: #9ca3af;
  margin-top: 6px;
}

.saju-page .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.saju-page .grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.saju-page .checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #e5e7eb;
  font-size: 14px;
}

.saju-page .checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.saju-page .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(248,113,113,0.2);
}

.saju-page .btn-cancel {
  padding: 12px 28px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #9ca3af;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.saju-page .btn-cancel:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: #e5e7eb;
}

.saju-page .btn-submit {
  padding: 12px 28px;
  background: #ef4444;
  border: none;
  border-radius: 8px;
  color: #f9fafb;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.saju-page .btn-submit:hover {
  background: #dc2626;
}

/* ========================================
   공통 Box 스타일
   ======================================== */
.saju-page .box {
  background: rgba(15,23,42,0.9);
  border-radius: 16px;
  border: 1px solid rgba(248,113,113,0.4);
  padding: 24px 28px 20px;
  margin: 16px auto 0;
  box-shadow: 0 12px 30px rgba(15,23,42,0.8);
  text-align: left;
  max-width: 750px;
}

.saju-page .box p {
  margin-bottom: 10px;
  font-size: 16px;
}

.saju-page .box p strong {
  color: #fecaca;
}

/* ========================================
   Admin Badge
   ======================================== */
.saju-page .admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: rgba(248,113,113,0.15);
  border: 1px solid rgba(248,113,113,0.4);
  border-radius: 6px;
  color: #fecaca;
  font-size: 13px;
  font-weight: 600;
}

/* ========================================
   Pagination
   ======================================== */
.saju-page .pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.saju-page .page-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(248,113,113,0.4);
  border-radius: 8px;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  transition: all 0.2s;
}

.saju-page .page-btn:hover,
.saju-page .page-btn.active {
  background: rgba(239,68,68,0.2);
  border-color: #ef4444;
  color: #fecaca;
}

/* ========================================
   Modal
   ======================================== */
.saju-page .modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 9999;
  overflow-y: auto;
}

.saju-page .modal-content {
  max-width: 800px;
  margin: 40px auto;
  padding: 40px;
  background: #0f172a;
  border-radius: 16px;
  border: 1px solid rgba(248,113,113,0.4);
  text-align: left;
}

.saju-page .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.saju-page .modal-title {
  margin: 0;
  font-size: 24px;
  color: #f9fafb;
}

.saju-page .modal-close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 28px;
  cursor: pointer;
}

.saju-page .modal-body {
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.7;
}

.saju-page .modal-body p {
  font-size: 13px;
  line-height: 1.7;
}

.saju-page .modal-body li {
  font-size: 13px;
  line-height: 1.7;
}

.saju-page .modal-body ul {
  margin-left: 20px;
}

/* ========================================
   Loading Overlay
   ======================================== */
.saju-page .loading-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.saju-page .loading-overlay.active { display: flex; }

.saju-page .loading-content {
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(248,113,113,0.4);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  max-width: 400px;
  margin: 0 20px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.8);
}

.saju-page .loading-content h3 {
  font-weight: 700;
  font-size: 20px;
  color: #f9fafb;
  margin-bottom: 8px;
}

.saju-page .loading-content p {
  color: #9ca3af;
  font-size: 15px;
}

.saju-page .loading-spinner {
  width: 64px;
  height: 64px;
  border: 4px solid rgba(248,113,113,0.2);
  border-top-color: #ef4444;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 24px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   공통 상태 메시지
   ======================================== */
.saju-page .no-data,
.saju-page .no-review {
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
  font-size: 15px;
  line-height: 1.8;
}

/* ========================================
   PC/모바일 헤더 분기 - 기본 상태
   ======================================== 
   
   [문제 배경]
   PC와 모바일에서 완전히 다른 헤더 레이아웃을 사용해야 했다.
   - PC (768px 이상): 로고 왼쪽, 버튼들 오른쪽 한 줄 배치
   - 모바일 (767px 이하): 로고와 버튼들만 헤더에, 탭 메뉴는 별도 행
   
   [초기 문제점]
   639px 미디어쿼리에서 .header-inner에 flex-direction: column을 적용했더니,
   767px 이하에서 PC 헤더가 숨겨져야 함에도 불구하고
   PC 헤더가 세로로 표시되는 문제가 발생했다.
   
   [해결 방법]
   1. 639px 미디어쿼리에서 header-inner에 column 적용하지 않음
   2. 767px 미디어쿼리에서 PC/모바일 분기를 명확히 처리
   3. !important를 사용하여 우선순위 보장
   
   [HTML 구조 - sjuF0101.jsp (메인페이지)]
   <header>
     <div class="header-inner header-pc">PC용</div>
     <div class="header-inner header-mobile">모바일용</div>
     <div class="header-mobile-cta header-mobile">CTA 버튼</div>
   </header>
   
   [HTML 구조 - sjuF02~05.jsp (마이페이지 등)]
   <header class="header-pc">PC용 헤더</header>
   <header class="header-mobile">모바일용 헤더</header>
   <nav class="mo-tab-nav header-mobile">탭 메뉴 (헤더 아래 별도 행)</nav>
   
   [개선 포인트]
   모바일에서 탭 메뉴(mo-tab-nav)를 header 외부로 분리하여
   최상단 헤더에는 로그아웃 버튼만 표시하고,
   탭 메뉴는 그 아래 별도 행에 표시하도록 변경했다.
*/

/* 기본 상태: PC 헤더 표시, 모바일 헤더 숨김 */
.saju-page .header-pc { display: flex; }
.saju-page .header-mobile { display: none; }

.saju-page .header-right-mobile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.saju-page .header-mobile-cta {
  padding: 8px 0 12px;
}

.saju-page .btn-primary-mo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  background: #ef4444;
  color: #f9fafb;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(248,113,113,0.5);
  transition: all 0.2s ease;
}

.saju-page .btn-primary-mo:hover {
  background: #dc2626;
  box-shadow: 0 8px 20px rgba(248,113,113,0.6);
}

.saju-page .btn-inquiry-mo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: 6px;
  color: #fecaca;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.saju-page .btn-inquiry-mo:hover {
  background: rgba(248,113,113,0.15);
  border-color: #f87171;
}

.saju-page .btn-inquiry-mo svg { width: 14px; height: 14px; }

.saju-page .btn-login-mo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: 6px;
  color: #fecaca;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.saju-page .btn-login-mo:hover {
  background: rgba(248,113,113,0.15);
  border-color: #f87171;
  color: #fff;
}

.saju-page .btn-login-mo svg { width: 16px; height: 16px; }

.saju-page .btn-logout-mo {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: #fecaca;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.saju-page .btn-logout-mo:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}

/* ========================================
   마이페이지 모바일 헤더 (공통)
   
   [레이아웃 구조] - PC처럼 왼쪽 로고, 오른쪽 버튼
   ┌─────────────────────────────────────┐
   │인생 7포인트 사주리포트         홈  로그아웃│
   └─────────────────────────────────────┘
   
   - 왼쪽: 로고
   - 오른쪽: 홈 버튼 + 로그아웃 버튼
   ======================================== */
.saju-page .mo-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
}

/* 모바일 로고 - 왼쪽 */
.saju-page .mo-logo {
  font-size: 15px;
  font-weight: 800;
  color: #f9fafb;
  text-decoration: none;
  letter-spacing: -0.03em;
}

.saju-page .mo-logo span {
  color: #9ca3af;
}

/* 모바일 헤더 오른쪽 버튼 그룹 */
.saju-page .mo-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 홈 버튼 - 왼쪽 배치 (2025-12-31 변경) */
.saju-page .mo-header-inner > .mo-home-btn {
  padding: 8px 16px;
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: 8px;
  color: #fecaca;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.saju-page .mo-header-inner > .mo-home-btn:hover {
  background: rgba(248,113,113,0.2);
  border-color: #f87171;
}

/* 홈 버튼 - 오른쪽 버튼 그룹 내부 (기존 스타일 유지) */
.saju-page .mo-header-right .mo-home-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: 6px;
  color: #fecaca;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.saju-page .mo-header-right .mo-home-btn:hover {
  background: rgba(248,113,113,0.15);
  border-color: #f87171;
}

/* 로그아웃 버튼 */
.saju-page .mo-logout-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: #9ca3af;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.2s;
}

.saju-page .mo-logout-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
}

/* ========================================
   마이페이지 모바일 탭 네비게이션 (공통)
   
   [주의] PC(768px 이상)에서는 숨겨야 함!
   기본적으로 display: none으로 설정하고,
   767px 이하에서만 display: flex로 표시
   ======================================== */
.saju-page .mo-tab-nav {
  display: none;  /* 기본: 숨김 (PC) */
  gap: 8px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
}

.saju-page .mo-tab-item {
  flex-shrink: 0;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.saju-page .mo-tab-item:hover {
  background: rgba(255,255,255,0.05);
  color: #e5e7eb;
}

.saju-page .mo-tab-item.active {
  background: rgba(248,113,113,0.15);
  border-color: rgba(248,113,113,0.4);
  color: #fecaca;
}

.saju-page .mo-tab-item.admin {
  border-color: rgba(251,191,36,0.3);
  color: #fcd34d;
}

.saju-page .mo-tab-item.admin.active {
  background: rgba(251,191,36,0.15);
  border-color: rgba(251,191,36,0.5);
}

/* 관리자 아이콘 (PC) */
.saju-page .admin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 6px;
}

/* 관리자 아이콘 (모바일) */
.saju-page .admin-icon-mo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-right: 4px;
}

/* ========================================
   공통 버튼 (btn-sm)
   ======================================== */
.saju-page .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

.saju-page .btn-sm.gray {
  background: rgba(255,255,255,0.08);
  color: #d1d5db;
}

.saju-page .btn-sm.gray:hover {
  background: rgba(255,255,255,0.12);
}

.saju-page .btn-sm.primary {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.saju-page .btn-sm.primary:hover {
  background: rgba(59, 130, 246, 0.3);
}

.saju-page .btn-sm.purple {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

.saju-page .btn-sm.purple:hover {
  background: rgba(139, 92, 246, 0.3);
}

.saju-page .btn-sm.green {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.saju-page .btn-sm.green:hover {
  background: rgba(34, 197, 94, 0.3);
}

.saju-page .btn-sm.done {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  cursor: default;
}

.saju-page .btn-sm.orange {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.saju-page .btn-sm.orange:hover {
  background: rgba(251, 146, 60, 0.3);
}

/* ========================================
   공통 빈 상태
   ======================================== */
.saju-page .empty-state {
  padding: 60px 20px;
  text-align: center;
}

.saju-page .empty-state.small {
  padding: 30px 20px;
}

.saju-page .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.saju-page .empty-state p {
  color: #6b7280;
  margin-bottom: 20px;
}

.saju-page .empty-state .sub-text {
  margin-top: 6px;
  font-size: 12px;
}

.saju-page .btn-primary-link {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
}

/* ========================================
   공통 닫기 버튼
   ======================================== */
.saju-page .btn-close {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 24px;
  cursor: pointer;
}

.saju-page .btn-close:hover {
  color: #f9fafb;
}

/* ========================================
   RESPONSIVE - 공통 브레이크포인트
   ======================================== */

/* ========== Mobile (< 640px) ========== */
@media (max-width: 639px) {
  .saju-page { font-size: 15px; }
  .saju-page .container { width: 100%; max-width: 100%; padding: 0 16px; }
  .saju-page h2 { font-size: 24px; word-break: keep-all; }
  .saju-page p { font-size: 15px; }
  .saju-page section { padding: 40px 0; }
  
  /* 
   * ========================================
   * [CRITICAL] 헤더 레이아웃 문제 해결 (2025-12-30)
   * ========================================
   * 
   * [문제 상황]
   * PC 헤더에서 로고와 버튼들이 세로로 배치되는 문제 발생.
   * 스크린샷에서 확인된 증상:
   *   - "인생 7포인트 사주 리포트" (로고)
   *   - "한 번은 정리해서 보고 넘어가야 할 타이밍을 위해" (서브타이틀)
   *   - R**n님, 내페이지, 로그아웃, 지금 신청 버튼이 아래줄로 내려감
   * 
   * [원인 분석]
   * 이전 코드에서 639px 미디어쿼리에 다음 스타일이 있었음:
   *   .saju-page .header-inner { flex-direction: column; gap: 12px; padding: 12px 0; }
   *   .saju-page .logo { font-size: 16px; text-align: center; }
   *   .saju-page .header-right { width: 100%; justify-content: center; gap: 12px; }
   * 
   * 이 스타일이 .header-inner 전체에 적용되어,
   * PC 헤더(.header-inner.header-pc)도 세로 배치로 변경됨.
   * 
   * 767px 이하에서는 .header-pc가 display:none으로 숨겨져야 하는데,
   * 실제로는 PC 헤더가 보이고 있었음.
   * 이는 CSS 우선순위 문제 또는 브라우저 캐시 문제일 수 있음.
   * 
   * [해결 방법]
   * 1. 639px 미디어쿼리에서 header-inner에 대한 스타일 제거
   *    - PC 헤더 레이아웃이 깨지지 않도록 함
   * 2. 767px 미디어쿼리에서 PC/모바일 분기 처리
   *    - .header-pc { display: none !important; }
   *    - .header-mobile { display: flex !important; }
   * 3. !important 사용으로 CSS 우선순위 보장
   * 
   * [주의사항]
   * - 헤더 레이아웃 변경 시 767px 미디어쿼리만 수정할 것
   * - 639px 미디어쿼리에서는 헤더 관련 스타일 추가하지 말 것
   * - 브라우저 캐시 문제가 의심되면 Ctrl+Shift+R로 강력 새로고침
   */
  
  /* 헤더 버튼 크기 조정만 (레이아웃 변경 없음) */
  .saju-page .btn-login { padding: 8px 16px; font-size: 13px; }
  .saju-page .header-login .user-info { gap: 8px; }
  .saju-page .header-login .user-profile { font-size: 13px; }
  .saju-page .header-login .user-avatar { width: 28px; height: 28px; }
  
  /* Box Mobile */
  .saju-page .box { padding: 20px 16px; margin: 12px auto 0; }
  .saju-page .box p { font-size: 14px; }
  
  /* Form Mobile */
  .saju-page .form-row { flex-direction: column; gap: 20px; }
  .saju-page .form-group { max-width: 100% !important; }
  .saju-page .form-label { font-size: 14px; }
  .saju-page .form-control { font-size: 14px; padding: 10px 12px; height: 44px; }
  .saju-page .form-note { font-size: 12px; }
  .saju-page .radio-label { padding: 10px 12px; font-size: 14px; height: 44px; }
  .saju-page .radio-label span { font-size: 13px !important; }
  .saju-page .grid-2 { gap: 8px; }
  .saju-page .grid-3 { gap: 6px; }
  .saju-page .form-actions { flex-direction: column; }
  .saju-page .form-actions button { width: 100%; }
  .saju-page .btn-cancel { order: 2; }
  .saju-page .btn-submit { order: 1; }
  
  /* Pagination Mobile */
  .saju-page .pagination { flex-wrap: wrap; }
  .saju-page .page-btn { width: 32px; height: 32px; font-size: 13px; }
  
  /* Modal Mobile */
  .saju-page .modal-content { margin: 16px; padding: 24px 16px; max-width: calc(100% - 32px); }
  .saju-page .modal-title { font-size: 20px; }
  
  /* Footer Mobile */
  .saju-page footer { padding: 20px 0 24px; font-size: 12px; }
  .saju-page .footer-title { font-size: 14px !important; }
  
  /* Loading Mobile */
  .saju-page .loading-content { padding: 32px 24px; margin: 0 16px; }
  .saju-page .loading-content h3 { font-size: 18px !important; }
  .saju-page .loading-content p { font-size: 14px !important; }
  
  .saju-page .btn-inquiry { padding: 8px 12px; font-size: 13px; }
}

/* ========== Small (sm: 640px ~ 767px) ========== */
@media (min-width: 640px) and (max-width: 767px) {
  .saju-page .container { width: 100%; max-width: 640px; padding: 0 20px; }
  .saju-page .header-inner { flex-direction: row; }
  .saju-page .logo { text-align: left; }
  .saju-page h2 { font-size: 28px; }
  .saju-page .form-row { flex-direction: column; gap: 20px; }
  .saju-page .form-group { max-width: 100% !important; }
}

/* ========== Medium (md: 768px ~ 1023px) ========== */
@media (min-width: 768px) and (max-width: 1023px) {
  .saju-page .container { width: 100%; max-width: 768px; padding: 0 24px; }
  .saju-page h2 { font-size: 32px; }
  .saju-page .form-row { flex-wrap: wrap; }
  .saju-page .form-row .form-group { flex: 1 1 45%; min-width: 280px; }
}

/* ========== Large (lg: 1024px ~ 1279px) ========== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .saju-page .container { width: 100%; max-width: 1024px; padding: 0 32px; }
}

/* ========== XL (xl: 1280px+) ========== */
@media (min-width: 1280px) {
  .saju-page .container { width: 100%; max-width: 1200px; padding: 0 20px; }
}

/* ========================================
   PC/모바일 헤더 분기 (767px 이하)
   ========================================
   
   [문제 해결 핵심]
   이 미디어쿼리가 PC/모바일 헤더 분기의 핵심이다.
   639px 미디어쿼리에서는 헤더 레이아웃을 건드리지 않고,
   여기서만 display 속성으로 전환한다.
   
   [필수 규칙]
   1. PC 헤더는 반드시 display: none !important 적용
   2. 모바일 헤더는 반드시 display: flex !important 적용
   3. !important는 다른 미디어쿼리와의 충돌 방지를 위해 필수
   
   [HTML 구조 참고]
   
   sjuF0101.jsp (메인페이지):
   <header>
     <div class="header-inner header-pc">...</div>        <- PC에서만 표시
     <div class="header-inner header-mobile">...</div>    <- 모바일에서만 표시
     <div class="header-mobile-cta header-mobile">...</div> <- 모바일 CTA 버튼
   </header>
   
   sjuF02~05.jsp (마이페이지 등):
   <header class="header-pc">PC용 헤더</header>
   <header class="header-mobile">모바일용 헤더</header>
   <nav class="mo-tab-nav header-mobile">탭 메뉴 (헤더 아래 별도 행)</nav>
   
   [마이페이지 탭 메뉴 분리 이유]
   초기에는 탭 메뉴(mo-tab-nav)가 header 내부에 있었는데,
   이로 인해 최상단 헤더에 버튼들(구매내역, 포인트, 설문관리)이
   함께 표시되어 레이아웃이 복잡해졌다.
   
   해결:
   - 탭 메뉴를 header 밖으로 분리
   - header-mobile 클래스를 추가하여 모바일에서만 표시
   - 최상단 헤더에는 로그아웃 버튼만, 탭 메뉴는 아래 별도 행에 표시
*/
@media (max-width: 767px) {
  /* 
   * PC 헤더 완전 숨김
   * - .header-pc: <header class="header-pc"> 태그용 (sjuF02~05)
   * - .header-inner.header-pc: <div class="header-inner header-pc"> 태그용 (sjuF01)
   */
  .saju-page .header-pc { display: none !important; }
  .saju-page .header-inner.header-pc { display: none !important; }
  
  /* 
   * 모바일 헤더 표시
   * - .header-mobile: <header class="header-mobile"> 태그용 (sjuF02~05)
   * - .header-inner.header-mobile: <div class="header-inner header-mobile"> 태그용 (sjuF01)
   * - flex-direction: row !important로 가로 배치 강제
   */
  .saju-page .header-mobile { display: flex !important; }
  .saju-page .header-inner.header-mobile {
    display: flex !important;
    flex-direction: row !important;  /* 세로 배치 방지 */
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 4px;
    gap: 12px;
  }
  
  /* 모바일 헤더 내부 요소 스타일 */
  .saju-page .header-inner.header-mobile .logo {
    font-size: 15px;
    text-align: left;
    flex-shrink: 0;  /* 로고 크기 고정 */
  }
  .saju-page .header-inner.header-mobile .logo span { display: none; }  /* 서브타이틀 숨김 */
  .saju-page .header-inner.header-mobile .header-right-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;  /* 버튼 영역 크기 고정 */
  }
  
  /* 모바일 탭 네비게이션 표시 (767px 이하) */
  .saju-page .mo-tab-nav {
    display: flex !important;
  }
}

/* ========================================
   공통 별점 선택 (Rating Select)
   ======================================== */
.saju-page .rating-select {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.saju-page .rating-select label { cursor: pointer; }
.saju-page .rating-select input[type="radio"] { display: none; }

.saju-page .rating-select span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(248,113,113,0.4);
  border-radius: 8px;
  color: #9ca3af;
  font-size: 14px;
  transition: all 0.2s;
}

.saju-page .rating-select input[type="radio"]:checked + span {
  background: rgba(251,191,36,0.2);
  border-color: #fbbf24;
  color: #fbbf24;
}

/* ========================================
   공통 후기 텍스트 영역 (Review Textarea)
   ======================================== */
.saju-page .review-textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 2px solid rgba(248,113,113,0.4);
  border-radius: 8px;
  background: rgba(15,23,42,0.9);
  color: #f9fafb;
  font-size: 15px;
  resize: vertical;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.saju-page .review-textarea:focus {
  outline: none;
  border-color: #ef4444;
}

.saju-page .review-textarea::placeholder {
  color: #6b7280;
}

/* ========================================
   공통 별점/후기 RESPONSIVE
   ======================================== */
@media (max-width: 639px) {
  .saju-page .rating-select { flex-wrap: wrap; gap: 6px; }
  .saju-page .rating-select span { width: 36px; height: 36px; font-size: 13px; }
  .saju-page .review-textarea { min-height: 100px; font-size: 14px; }
}