/* RED ARCHIVE 그누보드 커스텀 컬러 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&display=swap');

:root {
  --ra-blue: #1C3A6B;
  --ra-blue-mid: #2E5096;
  --ra-blue-lt: #D6DEF0;
  --ra-red: #9B2A2A;
  --ra-red-lt: #EDD8D8;
  --ra-ink: #1A1814;
  --ra-ink-mid: #4A4640;
  --ra-border: #D8D4CC;
  --ra-bg: #FAFAF8;
  --ra-paper: #F4F2EE;
}

/* 폰트 변경 */
body, h1, h2, h3, h4, h5, h6, input, button, select, textarea {
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif !important;
}

body { background: var(--ra-bg) !important; color: var(--ra-ink) !important; }

/* ── 헤더 전체 구조 ── */
#hd { background: var(--ra-bg) !important; border-bottom: 1px solid var(--ra-border) !important; }
#hd h1 a { color: var(--ra-blue) !important; }

/* hd_wrapper: 로고 + 검색 + 회원가입/로그인 한 줄 정렬 */
#hd_wrapper {
  background: var(--ra-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  height: 72px !important;
  max-width: 1185px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* 로고 */
#logo {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* 검색창 — 오른쪽 끝 정렬, 가로 축소 */
.hd_sch_wr {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
}
/* 인기검색어 숨김 */
.hd_sch_wr .popular_wr,
.hd_sch_wr #popular { display: none !important; }
#hd_sch {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
#sch_stx {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  min-width: 160px !important;
  width: 160px !important;
  border: 1px solid var(--ra-border) !important;
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
  font-size: 0.8rem !important;
  box-sizing: border-box !important;
}
#sch_submit {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  background: var(--ra-ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 4px 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
}

/* 회원가입/로그인 — 헤더 오른쪽 */
ul.hd_login {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  list-style: none !important;
}
ul.hd_login li a {
  font-size: 0.875rem !important;
  color: var(--ra-ink-mid) !important;
  white-space: nowrap !important;
}
ul.hd_login li a:hover {
  color: var(--ra-blue) !important;
}

/* ── GNB 메뉴 띠 — 햄버거 메뉴 크기에 맞춤 ── */
#gnb { background: var(--ra-blue) !important; }
#gnb .gnb_wrap {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
}
#gnb_1dul {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.gnb_empty {
  color: #fff !important;
  font-size: 0.8rem !important;
  line-height: 36px !important;
  padding: 0 16px !important;
}
.gnb_1dli { display: flex !important; align-items: center !important; }
.gnb_1da { height: 36px !important; line-height: 36px !important; font-size: 0.85rem !important; }
.gnb_menu_btn { height: 36px !important; line-height: 36px !important; }

/* 수정1: 로고 — 고딕 폰트로 변경 */
#logo a img { display: none !important; }
#logo a {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  text-decoration: none !important;
}
#logo a::before {
  content: 'RED' !important;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--ra-red) !important;
}
#logo a::after {
  content: 'ARCHIVE' !important;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: var(--ra-blue) !important;
}

/* 메뉴 "준비 중" 글씨 흰색 */
.gnb_empty { color: #fff !important; }

/* 핑크 경고 박스 → 블루 */
.tbl_frm01 .chk_box,
.register_form .alert,
.msg_box,
.tbl_frm01 .frm_info,
textarea[readonly] {
  background: var(--ra-blue-lt) !important;
  border-color: var(--ra-blue) !important;
  color: var(--ra-blue) !important;
}

/* GNB 메뉴 */
#gnb { background: var(--ra-blue) !important; }
#gnb a { color: #fff !important; }
#gnb a:hover { background: var(--ra-blue-mid) !important; }
#gnb .gnb_2da { background: var(--ra-blue-mid) !important; }

/* 버튼 */
.btn_submit, .btn01, input[type="submit"], .btn_frmline {
  background: var(--ra-blue) !important;
  color: #fff !important;
  border: 1px solid var(--ra-blue) !important;
  border-radius: 4px !important;
  transition: background 0.2s !important;
}
.btn_submit:hover, .btn01:hover, input[type="submit"]:hover, .btn_frmline:hover {
  background: var(--ra-blue-mid) !important;
}

/* 취소/보조 버튼 */
.btn_cancel, .btn02 {
  background: #fff !important;
  color: var(--ra-blue) !important;
  border: 1px solid var(--ra-border) !important;
  border-radius: 4px !important;
}
.btn_cancel:hover, .btn02:hover {
  border-color: var(--ra-blue) !important;
}

/* 링크 컬러 */
a { color: var(--ra-ink) !important; }
a:hover { color: var(--ra-blue) !important; }

/* 포인트 컬러 (빨간색 계열) */
.new_icon, .fa_icon, .ico_new, .sound_only { color: var(--ra-red) !important; }

/* 입력 필드 */
input[type="text"], input[type="password"], textarea, select {
  border: 1px solid var(--ra-border) !important;
  border-radius: 4px !important;
  background: #fff !important;
  padding: 10px 12px !important;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  border-color: var(--ra-blue) !important;
  box-shadow: 0 0 5px rgba(28,58,107,0.2) !important;
}

/* 테이블 */
.tbl_head01 th { background: var(--ra-blue) !important; color: #fff !important; }
.tbl_head01 td { border-bottom: 1px solid var(--ra-border) !important; }
.tbl_frm01 th { background: var(--ra-paper) !important; color: var(--ra-ink) !important; }

/* 게시판 콘텐츠 여백 */
#container { padding-left: 24px !important; padding-right: 24px !important; }
#container_title { margin-left: 0 !important; }

/* 게시판 리스트 */
.bo_tit a { color: var(--ra-ink) !important; }
.bo_tit a:hover { color: var(--ra-blue) !important; }
.bo_cate_on { color: var(--ra-blue) !important; border-bottom-color: var(--ra-blue) !important; }

/* 페이지네이션 */
.pg_wrap .pg_page, .pg_wrap .pg_current {
  border-radius: 4px !important;
}
.pg_wrap .pg_current {
  background: var(--ra-blue) !important;
  color: #fff !important;
  border-color: var(--ra-blue) !important;
}

/* 회원가입/로그인 페이지 */
.register_form, .login_wrap { max-width: 600px; margin: 40px auto !important; }
.member_confirm { max-width: 500px; margin: 60px auto !important; }

/* 체크박스/라디오 강조 */
input[type="checkbox"]:checked, input[type="radio"]:checked {
  accent-color: var(--ra-blue) !important;
}

/* 헤더/본문/푸터 min-width 통일 */
#hd, #wrapper, #ft { min-width: 0 !important; }

/* 푸터 */
#ft { background: var(--ra-blue) !important; }
#ft_wr {
  max-width: 1185px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 24px 20px 16px !important;
  display: block !important;
  text-align: left !important;
}
#ft_link { display: none !important; }
#ft_company {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
#ft_company h2 { display: none !important; }
.ft_info {
  display: grid !important;
  grid-template-columns: auto auto !important;
  gap: 2px 20px !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 0 !important;
  justify-content: start !important;
}
.ft_info span { display: block !important; }
#ft_copy {
  max-width: 1185px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 12px 20px !important;
  text-align: left !important;
}
.ft_cnt { display: none !important; }
#ft_company { display: block !important; }
#ft, #ft a { color: rgba(255,255,255,0.7) !important; }
#ft a:hover { color: #fff !important; }
#ft_copy { color: rgba(255,255,255,0.4) !important; font-size: 0.75rem !important; }

/* 관리자 메뉴 링크 */
#hd_nav a { color: var(--ra-ink-mid) !important; }
#hd_nav a:hover { color: var(--ra-blue) !important; }

/* 약관 동의 체크박스 영역 */
.agree_box, .frm_agree { border: 1px solid var(--ra-border) !important; background: var(--ra-paper) !important; }

/* 경고/안내 박스 (핑크 → 블루 라이트) */
.alert, .alert_txt, .caution, .msg_box,
div[style*="background:#ffe0e0"], div[style*="background-color:#ffe0e0"],
div[style*="background:pink"], div[style*="background-color:pink"],
.register_form .alert, .chk_box {
  background: var(--ra-blue-lt) !important;
  border: 1px solid var(--ra-blue) !important;
  color: var(--ra-blue) !important;
  border-radius: 4px !important;
}

/* 회원가입 약관동의 안내 텍스트 */
.stipulation, .privacy, .frm_info, .reg_form p.alert {
  background: var(--ra-paper) !important;
  border: 1px solid var(--ra-border) !important;
  color: var(--ra-ink) !important;
}

/* 필수입력 표시 색상 */
.required, .required_mark { color: var(--ra-red) !important; }

/* ── 포인트 숨김 ── */
.mb_point, #mb_point, .point, .autosave_point,
a[href*="point.php"], li:has(a[href*="point.php"]) { display: none !important; }

/* ── 로그인 상태 메시지 바 숨김 ── */
#hd_login_msg { display: none !important; }

/* ── 본문 바로가기 숨김 ── */
#skip_to_container { display: none !important; }

/* ── GNB 항상 가로 표시 (모바일/태블릿 포함) ──
   그누보드 기본 모바일 스킨(mobile.css)은 #gnb를 화면 왼쪽에서 슬라이드되는
   전체높이 드로어 메뉴로 정의한다 (position:fixed; left:0; height:100%;
   max-width:400px; z-index:99999; 평소엔 display:none).
   아래 display:block 강제만으로는 그 드로어가 항상 열린 채로 화면을 덮으므로
   position/치수/z-index를 전부 리셋해서 일반 문서 흐름의 가로 바로 만든다. */
#gnb {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: var(--ra-blue) !important;
}
#gnb > h2 { display: none !important; }
#gnb .gnb_wrap {
  display: flex !important;
  align-items: center !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: var(--ra-blue) !important;
}
#gnb_1dul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  width: 100% !important;
  position: static !important;
  background: var(--ra-blue) !important;
  overflow-x: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.gnb_1dli {
  display: flex !important;
  float: none !important;
  position: static !important;
  width: auto !important;
  line-height: normal !important;
}
.gnb_1da {
  display: block !important;
  white-space: nowrap !important;
  padding: 0 14px !important;
  border-bottom: 0 !important;
  color: #fff !important;
  font-weight: normal !important;
}
/* 햄버거 메뉴 버튼/전체메뉴 숨김 */
.gnb_mnal { display: none !important; }
#gnb_all, #gnb_all_bg { display: none !important; }

/* ── 헤더/로고 항상 표시 ── */
#hd { display: block !important; }
#hd_wrapper { display: flex !important; }

/* ── 로그인 폼 스타일 통일 ── */
#login_info {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 12px !important;
}
.login_if_auto { display: flex !important; align-items: center !important; gap: 6px !important; }
.login_if_auto label {
  font-size: 0.8rem !important;
  color: var(--ra-ink-mid) !important;
  cursor: pointer !important;
}
#login_auto_login {
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--ra-blue) !important;
}
.login_if_lpl a {
  font-size: 0.8rem !important;
  color: var(--ra-ink-mid) !important;
}
.login_if_lpl a:hover {
  color: var(--ra-blue) !important;
  text-decoration: underline !important;
}
/* 로그인 입력창 세로 간격 */
#login_id, #login_pw {
  display: block !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}
#login_fs .btn_submit {
  width: 100% !important;
  margin-top: 4px !important;
}

/* 회원가입 안내 배너 (핑크 → 딥레드) */
#fregister p { background: var(--ra-red) !important; }
#fregister p:before { background: #6B1A1A !important; }

/* 홈으로 돌아가기 링크 추가 스타일 */
.ra-home-link {
  display: inline-block;
  margin: 20px 0 10px;
  padding: 8px 20px;
  background: var(--ra-paper);
  color: var(--ra-blue);
  border: 1px solid var(--ra-border);
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
}
.ra-home-link:hover {
  background: var(--ra-blue);
  color: #fff !important;
  border-color: var(--ra-blue);
}

/* ── 수정2: 로그인 사이드바 입력창 간격 ── */
#outlogin input[type="text"],
#outlogin input[type="password"],
.login_input input,
#login_id, #login_pw {
  display: block !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ra-border) !important;
  border-radius: 4px !important;
  font-size: 0.875rem !important;
  box-sizing: border-box !important;
}
#outlogin .btn_submit,
#outlogin input[type="submit"],
.outlogin_btn {
  margin-top: 4px !important;
  width: 100% !important;
}

/* ── 수정3: 메뉴 준비중 띠 여백 축소 ── */
#gnb .gnb_empty {
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
  line-height: 36px !important;
}

/* 로그인 정보창 — 닉네임 잘림 방지 */
#ol_after_hd { height: auto !important; min-height: 80px !important; }
#ol_after_hd strong { overflow: visible !important; text-overflow: unset !important; white-space: normal !important; }

/* ── 수정4: 푸터 사업자 정보 ── */
.footer-business-info {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.5) !important;
  line-height: 1.8 !important;
  margin-top: 12px !important;
}
.footer-business-info p {
  margin: 0 !important;
}

/* ── 상단 유틸 바 완전 숨김 ── */
#tnb { display: none !important; }

/* ══════════════════════════════════════
   내 프로그램 페이지
   ══════════════════════════════════════ */

.ra-programs-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.ra-programs-header {
  margin-bottom: 36px;
}
.ra-programs-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ra-ink);
  margin: 0 0 8px;
}
.ra-programs-header p {
  font-size: 0.9rem;
  color: var(--ra-ink-mid);
  margin: 0;
}

/* 빈 상태 */
.ra-programs-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ra-ink-mid);
}
.ra-programs-empty i {
  font-size: 3rem;
  margin-bottom: 16px;
  color: var(--ra-border);
}
.ra-programs-empty p {
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.ra-programs-empty-sub {
  font-size: 0.85rem !important;
  color: var(--ra-ink-mid) !important;
}

/* 세트 그룹 */
.ra-programs-set {
  margin-bottom: 32px;
}
.ra-set-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ra-ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ra-border);
}
.ra-set-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--ra-blue);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* 프로그램 카드 그리드 */
.ra-programs-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 프로그램 카드 */
.ra-program-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--ra-ink) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ra-program-card:hover {
  border-color: var(--ra-blue);
  box-shadow: 0 2px 12px rgba(28, 58, 107, 0.1);
  color: var(--ra-ink) !important;
}

.ra-program-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ra-blue-lt);
  color: var(--ra-blue);
  overflow: hidden;
}
.ra-program-icon img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.ra-program-info {
  flex: 1;
  min-width: 0;
}
.ra-program-info h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ra-ink);
  margin: 0 0 2px;
}
.ra-program-info p {
  font-size: 0.8rem;
  color: var(--ra-ink-mid);
  margin: 0;
}

.ra-program-arrow {
  color: var(--ra-border);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: color 0.2s;
}
.ra-program-card:hover .ra-program-arrow {
  color: var(--ra-blue);
}

/* 모바일/태블릿 대응 (프로그램) */
@media (max-width: 1024px) {
  .ra-programs-page { padding: 24px 16px 40px; }
  .ra-program-card { padding: 14px 16px; gap: 12px; }
  .ra-program-icon { width: 38px; height: 38px; font-size: 1rem; }
}

/* ══════════════════════════════════════
   고객관리 페이지
   ══════════════════════════════════════ */

.ra-customers-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.ra-customers-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.ra-customers-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ra-ink);
  margin: 0 0 4px;
}
.ra-customers-header p {
  font-size: 0.85rem;
  color: var(--ra-ink-mid);
  margin: 0;
}

.ra-back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--ra-ink-mid) !important;
  margin-bottom: 8px;
  text-decoration: none !important;
}
.ra-back-link:hover { color: var(--ra-blue) !important; }

/* 헤더 버튼 그룹 */
.ra-header-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ra-download-wrap {
  position: relative;
}
.ra-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--ra-paper2, #EDEAE4);
  color: var(--ra-ink) !important;
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.ra-btn-download:hover { background: var(--ra-border); }
.ra-download-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 10;
  min-width: 160px;
  overflow: hidden;
}
.ra-download-menu.ra-show { display: block; }
.ra-download-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--ra-ink) !important;
  text-decoration: none !important;
  transition: background 0.15s;
}
.ra-download-menu a:hover { background: var(--ra-paper); }
.ra-download-menu a i { color: var(--ra-blue); width: 16px; text-align: center; }

/* 업로드 버튼 */
.ra-btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--ra-paper2, #EDEAE4);
  color: var(--ra-ink) !important;
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.ra-btn-upload:hover { background: var(--ra-border); }

/* 업로드 모달 */
.ra-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ra-modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.ra-modal-box h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ra-ink);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ra-modal-box h3 i { color: var(--ra-blue); }
.ra-modal-desc {
  font-size: 0.8rem;
  color: var(--ra-ink-mid);
  line-height: 1.6;
  margin: 0 0 20px;
}
.ra-file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 2px dashed var(--ra-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ra-ink-mid);
  transition: all 0.2s;
}
.ra-file-label:hover { border-color: var(--ra-blue); color: var(--ra-blue); }
.ra-file-label i { font-size: 1.2rem; color: var(--ra-blue); }
.ra-modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.ra-btn-cancel {
  padding: 10px 20px;
  background: var(--ra-paper2);
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.ra-btn-submit {
  padding: 10px 20px;
  background: var(--ra-blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ra-btn-submit:hover { opacity: 0.9; }

/* 버튼 */
.ra-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--ra-blue);
  color: #fff !important;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s;
}
.ra-btn-add:hover { background: var(--ra-blue-mid); color: #fff !important; }

.ra-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--ra-blue);
  color: #fff !important;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  text-decoration: none !important;
  cursor: pointer;
}
.ra-btn-edit:hover { background: var(--ra-blue-mid); color: #fff !important; }

.ra-btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--ra-red);
  color: #fff !important;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
}
.ra-btn-delete:hover { background: #7a2020; }

.ra-view-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* 검색 */
.ra-search-box { margin-bottom: 20px; }
.ra-search-box form {
  display: flex;
  gap: 0;
}
.ra-search-input {
  flex: 1;
  padding: 10px 14px !important;
  border: 1px solid var(--ra-border) !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  font-size: 0.875rem;
}
.ra-search-btn {
  padding: 10px 16px;
  background: var(--ra-ink);
  color: #fff;
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
}

/* 고객 카드 (목록) */
.ra-customer-card {
  margin-bottom: 8px;
}
.ra-customer-main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ra-customer-main:hover {
  border-color: var(--ra-blue);
  box-shadow: 0 2px 8px rgba(28, 58, 107, 0.08);
}

.ra-customer-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ra-paper);
  color: var(--ra-ink-mid);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ra-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
}

.ra-customer-info { flex: 1; min-width: 0; }
.ra-customer-info h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ra-ink);
  margin: 0 0 2px;
}
.ra-customer-gender {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ra-ink-mid);
  margin-left: 4px;
}
.ra-customer-gender-lg {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ra-ink-mid);
  margin-left: 6px;
}
.ra-customer-birth {
  font-size: 0.8rem;
  color: var(--ra-ink-mid);
  margin: 0 0 4px;
}
.ra-customer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.ra-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ra-blue-lt);
  color: var(--ra-blue);
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 500;
}
.ra-tag-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  text-decoration: none !important;
  color: var(--ra-blue) !important;
  border: 1px solid var(--ra-blue-lt);
  cursor: pointer;
  transition: all 0.2s;
}
.ra-tag-link:hover {
  background: var(--ra-blue);
  color: #fff !important;
  border-color: var(--ra-blue);
}
.ra-tag-link i { font-size: 0.6rem; }
.ra-customer-arrow {
  color: var(--ra-border);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.ra-customer-main:hover .ra-customer-arrow { color: var(--ra-blue); }

/* 빈 상태 */
.ra-customers-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ra-ink-mid);
}
.ra-customers-empty i {
  font-size: 3rem;
  margin-bottom: 16px;
  color: var(--ra-border);
}
.ra-customers-empty p {
  font-size: 1.05rem;
  margin: 0 0 20px;
}
.ra-btn-add-empty {
  display: inline-block;
  padding: 10px 24px;
  background: var(--ra-blue);
  color: #fff !important;
  border-radius: 6px;
  font-size: 0.875rem;
  text-decoration: none !important;
}
.ra-btn-add-empty:hover { background: var(--ra-blue-mid); color: #fff !important; }

/* 상세보기 테이블 */
.ra-detail-card {
  background: #fff;
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.ra-detail-table {
  width: 100%;
  border-collapse: collapse;
}
.ra-detail-table th {
  width: 120px;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ra-ink-mid);
  background: var(--ra-paper);
  border-bottom: 1px solid var(--ra-border);
  vertical-align: top;
}
.ra-detail-table td {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--ra-ink);
  border-bottom: 1px solid var(--ra-border);
}
.ra-detail-table tr:last-child th,
.ra-detail-table tr:last-child td { border-bottom: none; }
.ra-memo-cell { white-space: pre-wrap; }

/* 궁합 섹션 */
.ra-compat-section {
  background: #fff;
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  padding: 24px;
}
.ra-compat-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ra-red);
  margin: 0 0 8px;
}
.ra-compat-section p {
  font-size: 0.85rem;
  color: var(--ra-ink-mid);
  margin: 0 0 16px;
}
.ra-compat-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ra-compat-select {
  flex: 1;
  padding: 10px 12px !important;
  border: 1px solid var(--ra-border) !important;
  border-radius: 6px !important;
  font-size: 0.875rem;
}
.ra-btn-compat {
  padding: 10px 20px;
  background: var(--ra-red);
  color: #fff !important;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ra-btn-compat:hover { background: #7a2020; }

/* 궁합 결과 */
.ra-compat-result {
  background: #fff;
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
}
.ra-compat-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
}
.ra-compat-person { text-align: center; }
.ra-compat-person h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 12px 0 4px;
}
.ra-compat-person p {
  font-size: 0.8rem;
  color: var(--ra-ink-mid);
  margin: 0;
}
.ra-compat-heart {
  font-size: 2rem;
  color: var(--ra-red);
}
.ra-btn-compat-launch {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--ra-red);
  color: #fff !important;
  border: none;
  border-radius: 6px;
}
.ra-btn-compat-launch:hover {
  background: #7a2020;
}
.ra-compat-note {
  font-size: 0.85rem;
  color: var(--ra-ink-mid);
}

/* 폼 스타일 */
.ra-customer-form {
  background: #fff;
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  padding: 28px 24px;
}
.ra-form-group {
  margin-bottom: 20px;
}
.ra-form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ra-ink);
  margin-bottom: 6px;
}
.ra-required { color: var(--ra-red); }
.ra-form-input {
  width: 100%;
  padding: 10px 12px !important;
  border: 1px solid var(--ra-border) !important;
  border-radius: 6px !important;
  font-size: 0.875rem;
  box-sizing: border-box;
}
.ra-form-textarea {
  width: 100%;
  padding: 10px 12px !important;
  border: 1px solid var(--ra-border) !important;
  border-radius: 6px !important;
  font-size: 0.875rem;
  box-sizing: border-box;
  resize: vertical;
}
.ra-form-row {
  display: flex;
  gap: 16px;
}
.ra-form-row .ra-form-group { flex: 1; }
.ra-radio-group {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 4px;
}
.ra-radio, .ra-checkbox {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--ra-ink);
  cursor: pointer;
}
.ra-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ra-checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ra-ink);
  cursor: pointer;
  padding: 6px 8px;
  border: 1px solid var(--ra-border);
  border-radius: 4px;
  transition: border-color 0.2s;
}
.ra-checkbox-item:has(input:checked) {
  border-color: var(--ra-blue);
  background: var(--ra-blue-lt);
}
.ra-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ra-border);
}
.ra-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 32px;
  background: var(--ra-blue);
  color: #fff !important;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.ra-btn-save:hover { background: var(--ra-blue-mid); }
.ra-btn-cancel {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: #fff;
  color: var(--ra-ink-mid) !important;
  border: 1px solid var(--ra-border);
  border-radius: 6px;
  font-size: 0.9rem;
  text-decoration: none !important;
}
.ra-btn-cancel:hover { border-color: var(--ra-ink-mid); }

/* 모바일/태블릿 대응 (고객관리) */
@media (max-width: 1024px) {
  .ra-customers-page { padding: 24px 16px 40px; }
  .ra-customers-header { flex-direction: column; gap: 12px; }
  .ra-form-row { flex-direction: column; gap: 0; }
  .ra-checkbox-grid { grid-template-columns: repeat(2, 1fr); }
  .ra-compat-form { flex-direction: column; }
  .ra-compat-pair { gap: 16px; }
  .ra-detail-table th { width: 90px; font-size: 0.75rem; padding: 10px 12px; }
  .ra-detail-table td { padding: 10px 12px; font-size: 0.8rem; }
}

/* ══════════════════════════════════════
   모바일/태블릿 반응형 (그누보드 레이아웃)
   ══════════════════════════════════════ */

/* 모바일/태블릿 (1024px 이하 — 아이패드 세로/가로 포함) */
@media (max-width: 1024px) {
  /* 상단 유틸바 숨김 */
  #tnb { display: none !important; }

  /* 헤더 */
  #hd_wrapper {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  /* 로고 */
  #logo { order: 1 !important; }
  #logo a::before { font-size: 18px !important; }
  #logo a::after { font-size: 18px !important; }

  /* 로그인/회원가입 링크 — 모바일에서 잘 보이도록 */
  ul.hd_login {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  ul.hd_login li a {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
    background: var(--ra-blue) !important;
    color: #fff !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }

  /* 검색창 — 모바일에서 숨김 */
  .hd_sch_wr {
    display: none !important;
  }

  /* GNB 메뉴바 */
  #gnb { height: 36px !important; overflow: hidden !important; }
  #gnb .gnb_wrap { height: 36px !important; }
  #gnb_1dul { height: 36px !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  .gnb_1da { height: 36px !important; line-height: 36px !important; font-size: 0.75rem !important; padding: 0 10px !important; white-space: nowrap !important; }
  .gnb_menu_btn { height: 36px !important; line-height: 36px !important; }
  #gnb_all, #gnb_all_bg { display: none !important; }

  /* 콘텐츠 영역 */
  #wrapper { padding: 0 !important; min-width: 0 !important; }
  #hd_wrapper, #gnb .gnb_wrap, #container_wr, #ft_wr { max-width: 100% !important; width: 100% !important; }
  #container { padding: 0 !important; width: 100% !important; float: none !important; margin: 0 !important; min-height: 0 !important; }

  /* 사이드바 숨김 (메인에서는 불필요) */
  #aside {
    display: none !important;
  }

  /* 게시판 테이블 */
  .tbl_head01 { font-size: 0.8rem !important; }
  .tbl_head01 th, .tbl_head01 td { padding: 8px 6px !important; }

  /* 푸터 */
  #ft { padding: 20px 16px !important; }
  .footer-business-info { font-size: 0.7rem !important; }
}



/* ══════════════════════════════════════
   유튜브 미리보기 / 임베드
   ══════════════════════════════════════ */

/* 목록 썸네일 위 재생 버튼 */
.gall_img { position: relative !important; }
.gall_img .yt_thumb { width: 100% !important; height: auto !important; object-fit: cover !important; }
.yt_play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 48px !important;
  color: rgba(255,255,255,0.9) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  pointer-events: none !important;
}

/* 상세 페이지 임베드 (반응형 16:9) */
.ra-yt-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 0 0 20px;
  border-radius: 8px;
  background: #000;
}
.ra-yt-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}