/* ===== 변수 / 리셋 / 베이스 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 브라우저 스크롤바가 페이지 로딩 중 깜빡이며 콘텐츠를 좌우로 밀지 않도록 자리 예약 */
html { scrollbar-gutter: stable; }

/* ===== select 옵션 리스트 디자인 (전 페이지 공통) =====
   네이티브 <option> 은 OS 가 그리는 영역이라 cross-browser 스타일링 한계가 있지만
   Chrome / Edge / Firefox 에서 background / color 가 적용됨. OS 기본 파란색 하이라이트
   대신 브랜드 톤으로 통일. (admin.css 에도 동일 룰이 있어 어드민 페이지에서도 일관) */
select option {
  background: #FFFFFF;
  color: #2D2D2D;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  padding: 10px 14px;
  font-weight: 600;
}
select option:checked,
select option:hover {
  background: linear-gradient(0deg, #FF4081, #FF4081);
  color: white;
}
select option:disabled {
  color: rgba(0, 0, 0, .35);
  background: #F4F5F9;
}

/* ===== date / time / datetime-local / month input 디자인 (전 페이지 공통) =====
   네이티브 캘린더/시계 아이콘을 브랜드 SVG 로 교체하고, 입력 필드 자체도 폼 타입과 일관되게.
   - WebKit/Chrome: ::-webkit-calendar-picker-indicator 로 아이콘 변경 가능
   - Firefox: 부분 지원 (기본 dropdown 유지). 필드 자체 스타일은 동일 적용.
   날짜 popup 자체는 OS 가 그리지만 트리거 + 필드 시각은 통일됨. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 14px;
  /* 사용자 요청: 디폴트 상태에서도 핑크 톤 (이전: 회색 보더) */
  color: #FF4081;
  background: white;
  border: 1px solid #FF4081;
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  box-sizing: border-box;
  /* 분위기는 외부 글로우로만 — height 에 영향 X */
  box-shadow: 0 0 0 2px rgba(255, 64, 129, .08);
}
/* 빈 값(placeholder) 상태에서도 핑크 글씨 */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit { color: #FF4081; padding: 0; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="month"]::-webkit-datetime-edit-fields-wrapper { color: #FF4081; }
input[type="date"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="month"]::-webkit-datetime-edit-text { color: #FF4081; padding: 0 2px; }
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover {
  border-color: #FF4081;
  background: #FFF8FB;
  box-shadow: 0 0 0 3px rgba(255, 64, 129, .14);
}
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus {
  outline: none;
  border-color: #FF4081;
  background: white;
  box-shadow: 0 0 0 4px rgba(255, 64, 129, .22);
}
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled {
  background: #F4F5F9;
  color: #b8b8b8;
  cursor: not-allowed;
}
/* 캘린더 아이콘 — 브랜드 핑크 SVG 로 교체 (Chrome/Edge/Safari) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FF4081' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='17' rx='3'/><path d='M3 9h18'/><path d='M8 2v4'/><path d='M16 2v4'/><circle cx='8' cy='14' r='1.2' fill='%23FF4081'/><circle cx='12' cy='14' r='1.2' fill='%23FF4081'/><circle cx='16' cy='14' r='1.2' fill='%23FF4081'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  width: 22px;
  height: 22px;
  opacity: .95;
  transition: opacity .15s ease, transform .15s ease;
  filter: none;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: 1; transform: scale(1.08); }
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FF4081' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  width: 22px;
  height: 22px;
  opacity: .95;
  filter: none;
}
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; transform: scale(1.08); }
/* 내부 datetime edit 필드 — 빈 placeholder 색 / 포커스 시 핑크 */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="month"]::-webkit-datetime-edit-fields-wrapper { color: #2D2D2D; }
input[type="date"]:focus::-webkit-datetime-edit-year-field,
input[type="date"]:focus::-webkit-datetime-edit-month-field,
input[type="date"]:focus::-webkit-datetime-edit-day-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-year-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-month-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-day-field,
input[type="time"]:focus::-webkit-datetime-edit-hour-field,
input[type="time"]:focus::-webkit-datetime-edit-minute-field {
  background: rgba(255, 64, 129, .12);
  color: #FF4081;
  border-radius: 4px;
  padding: 1px 3px;
}

/* ============ 폰트 깜빡임 (FOUT) 방지 ============
   Ctrl+Shift+R 하드 리프레시 시 웹폰트 도착 전까지 본문을 숨김 → fallback → 웹폰트 swap 시
   글자가 깨졌다 복구되는 현상 제거. 최대 1.2s 후엔 자동 노출 (common.js 가 클래스 토글). */
html.fonts-pending body { visibility: hidden; }
html.fonts-pending::before {
  content: '';
  position: fixed; inset: 0;
  background: #FFF8F3;
  z-index: 99999;
  pointer-events: none;
}
/* 폰트 로드 완료 시 부드럽게 페이드 인 */
html.fonts-ready body { animation: kj-fonts-fadein .15s ease-out; }
@keyframes kj-fonts-fadein { from { opacity: .6; } to { opacity: 1; } }
/* 모션 줄이기 사용자엔 페이드 없이 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
  html.fonts-ready body { animation: none; }
}

/* ============ 페이지 전환 (View Transitions API) ============
   Chrome 126+, Edge 126+ 에서 자동으로 cross-fade 적용. 미지원 브라우저는 무시.
   사이드바는 양 페이지에서 동일 모양이라 cross-fade 가 시각적으로 거의 무변화 — 깜빡임 최소화. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .18s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-old(root) { animation-name: kj-fade-out; }
::view-transition-new(root) { animation-name: kj-fade-in; }
@keyframes kj-fade-out { to { opacity: 0; } }
@keyframes kj-fade-in  { from { opacity: 0; } }
/* 모션 줄이기 사용자 — 트랜지션 비활성화 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ============ View Transitions API 미지원 브라우저용 — 콘텐츠만 페이드 인 ============
   사이드바는 그대로 두고 .main 영역만 부드럽게 페이드 인하여
   "새로고침 느낌" 을 줄임. kj-ready 는 사이드바 주입 후 추가됨 (common.js). */
.main {
  opacity: 0;
  transition: opacity .22s ease-out;
}
body.kj-ready .main {
  opacity: 1;
}
/* ⚠ transform 을 제거한 이유: .main 에 transform 이 있으면 후손 position:fixed 요소의
   containing block 이 viewport 가 아니라 .main 이 되어, 페이지를 스크롤할 때 모달(뽑기 팝업,
   결과 모달, 큐 오버레이 등) 이 viewport 를 벗어나 따라가지 않는 버그가 발생.
   페이드인 진입 효과는 opacity 만으로도 충분히 자연스러움. */
@media (prefers-reduced-motion: reduce) {
  .main { opacity: 1 !important; transition: none !important; }
}
@supports (view-transition-name: none) {
  .main { opacity: 1; transition: none; }
}

/* ============ 사이드바 placeholder (FOUC 방지) ============
   common.js / admin-common.js 가 사이드바를 inject 하기 전 흰 영역이 잠깐 보이는 현상 방지.
   body 배경에 가짜 사이드바 컬러를 미리 깔아둠 — JS 가 실제 sidebar 를 그 위에 덮어 씀.
   ※ 실제 적용은 아래 body rule 에서 (background shorthand 충돌 회피) */

/* ============ 커스텀 체크박스 (사이트 전역) ============ */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #d4d4d8;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  transition: all .15s;
  background: white;
  flex-shrink: 0;
  vertical-align: middle;
  margin: 0;
}
input[type="checkbox"]:hover { border-color: #FF6B9D; }
input[type="checkbox"]:checked {
  background: #FF4081;
  border-color: #FF4081;
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 11px;
  margin-top: -1px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 64, 129, .25);
  outline: none;
}
input[type="checkbox"]:disabled {
  opacity: .4;
  cursor: not-allowed;
}
/* 라디오 버튼도 함께 정돈 */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 2px solid #d4d4d8;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all .15s;
  background: white;
  flex-shrink: 0;
  vertical-align: middle;
  margin: 0;
}
input[type="radio"]:checked {
  border-color: #FF4081;
  border-width: 6px;
}
input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 64, 129, .25);
  outline: none;
}

/* ===== 전역 포커스 가시성 ===== 키보드 사용자가 명확히 인식할 수 있도록 */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(255, 64, 129, .55);
  outline-offset: 2px;
}
/* 접근성: 마우스 클릭 시엔 outline 제거, 키보드 탭에서만 표시 */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* 스크린리더 전용 텍스트 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* 사용자 모션 줄이기 — 화려한 애니메이션 자동 비활성화 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 한글 텍스트 가독성 (전역) =====
   긴 한국어 단락이 단어 중간에 끊기지 않도록 word-break:keep-all 적용.
   설명/안내 박스 등 주요 영역에 자동 적용. */
p, li, .desc, .crumb, .sub, .helper, .small-note, .notice-body,
.event-guide, .gp-notice, .gp-membership-notice,
.adm-card p, .adm-card small,
.notice-section, .notice-section li {
  word-break: keep-all;
  line-height: 1.7;
}
/* 모바일에선 더 관대한 줄간격 */
@media (max-width: 600px) {
  p, li, .desc, .sub { line-height: 1.75; }
}
/* 줄바꿈 명시 헬퍼 — <span class="ko-break">긴 텍스트</span> */
.ko-break { word-break: keep-all; line-height: 1.7; display: block; }

/* ===== 모바일 전역 최적화 =====
   - iOS 폼 자동 줌 방지 (input font-size 16px+)
   - 탭 타겟 최소 44px
   - 가로 스크롤 방지
   - 모바일 패딩 축소 */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
/* 모든 인풋/select/textarea — iOS 줌 방지 (16px) */
@media (max-width: 600px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="date"], input[type="time"],
  input:not([type]), textarea, select {
    font-size: 16px !important;
  }
  /* 버튼/링크 최소 탭 타겟 — 44x44 권장 */
  button, .btn-primary, .btn-ghost, a.btn-primary, a.btn-ghost {
    min-height: 44px;
  }
  /* 탭 가능한 카드 항목 — 누르기 쉽게 */
  .card, .free-card, .step, .trust-item { -webkit-tap-highlight-color: rgba(255,107,157,.2); }

  /* 컨텐츠 영역 패딩 정리 */
  .page-header { padding: 22px 5% 10px !important; gap: 12px !important; }
  .page-header h1 { font-size: 24px !important; }
  .page-header .crumb { font-size: 12px !important; }

  /* 테이블 — 가로 스크롤 허용 (admin 표) */
  .adm-table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 테이블 셀 패딩 축소 */
  table.adm-table th, table.adm-table td { padding: 10px 8px !important; font-size: 12.5px; }

  /* 모달 — 작은 화면에서 풀폭 (단, 절대 픽셀 캡으로 무한 비례 스케일 차단) */
  .kj-modal-card, .ud-card, .od-card, .rf-detail-card,
  .adm-confirm-card { max-width: min(96vw, 560px) !important; }
}
@media (max-width: 380px) {
  .page-header h1 { font-size: 20px !important; }
  .card-title { font-size: 15px !important; }
  /* 모바일 작은 화면 — 카드 그리드 1열 */
  .grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}

:root {
  --bg: #FFF8F3;
  --bg-2: #FFE8EE;
  --surface: #ffffff;
  --pink: #FF6B9D;
  --pink-deep: #FF4081;
  --yellow: #FFC93C;
  --sky: #6EC5FF;
  --mint: #7FE3C5;
  --text: #2D2D2D;
  --text-soft: #5A5A5A;
  --side-w: 248px;
  --line: rgba(255, 107, 157, 0.18);
  --shadow-sm: 0 4px 12px rgba(0,0,0,.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,.06);
}
/* 다크 테마 */
body.dark-theme {
  --bg: #1a1424;
  --bg-2: #2a1f3a;
  --surface: #251c33;
  --text: #f5f0fa;
  --text-soft: #a89bc1;
  --line: rgba(255, 107, 157, 0.25);
  --shadow-sm: 0 4px 12px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.4);
}
body.dark-theme .sidebar { background: #1f1730; }
body.dark-theme .card,
body.dark-theme .step,
body.dark-theme .free-card,
body.dark-theme .trust-item,
body.dark-theme .grade-item,
body.dark-theme .board-wrap,
body.dark-theme .grade-list,
body.dark-theme .kuji-hero,
body.dark-theme .ship-card,
body.dark-theme footer,
body.dark-theme .placeholder,
body.dark-theme .lastone-card { background: var(--surface); }
body.dark-theme .alert,
body.dark-theme .post,
body.dark-theme .cart-item,
body.dark-theme .hist-item,
body.dark-theme .com-write,
body.dark-theme .alerts-bar { background: var(--surface); }
body.dark-theme .sched-item { background: var(--surface); }
body.dark-theme .toast { background: var(--surface); color: var(--text); }
body.dark-theme .draw-stage { background: var(--surface); }
body.dark-theme .rc-front { background: var(--surface); }
/* 사이드바 토글 chev — hover 시 흰 배경이 다크모드에서 떠있어 보임 */
body.dark-theme .side-section h6.side-toggle:hover .chev { background: var(--bg-2); color: var(--pink-deep); }
body.dark-theme .side-section h6.side-toggle .chev { color: var(--text-soft); }
/* ghost 버튼 — 흰 배경 + dark text 가 다크모드에서 흰-on-흰 / 흰 border 가 안 보임 */
body.dark-theme .btn-ghost,
body.dark-theme a.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--text); }
body.dark-theme .btn-ghost:hover { background: var(--bg-2); }
/* 노란 안내 박스 — 라이트모드 #fff8da~#ffe8a8 그라데이션 + 갈색 텍스트. 다크모드에선 반투명 + 밝은 텍스트 */
body.dark-theme .notice-box {
  background: linear-gradient(135deg, rgba(255,201,60,.16), rgba(255,232,168,.12));
  border-left-color: var(--yellow);
}
body.dark-theme .notice-box p { color: #FFD78A; }
/* 뒤로가기 버튼 — 라이트모드 흰 + dark border 가 다크에서 흰-on-흰 */
body.dark-theme .back-btn { background: var(--surface); border-color: var(--text); color: var(--text); box-shadow: 0 4px 0 var(--text); }
/* 출석 완료 mint 버튼 — color: var(--text) 가 다크에서 밝아져 mint 위 안 보임. 어두운 텍스트 명시 */
body.dark-theme .greet-checkin:disabled { background: var(--mint); color: #064E3B; box-shadow: 0 4px 0 #4cba9b; }

/* 다크 모드 추가 보강 — 흰 배경/검은 텍스트 잔재 일괄 정리 */
body.dark-theme input[type="text"],
body.dark-theme input[type="email"],
body.dark-theme input[type="password"],
body.dark-theme input[type="number"],
body.dark-theme input[type="tel"],
body.dark-theme input[type="url"],
body.dark-theme input[type="search"],
body.dark-theme input[type="date"],
body.dark-theme input[type="time"],
body.dark-theme input:not([type]),
body.dark-theme textarea,
body.dark-theme select {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder { color: var(--text-soft); opacity: .7; }
body.dark-theme input[type="checkbox"],
body.dark-theme input[type="radio"] { background: var(--bg-2); border-color: rgba(255,107,157,.4); }
body.dark-theme .ribbon { background: var(--surface); color: var(--pink); }
body.dark-theme .greet-card { background: var(--surface); color: var(--text); }
body.dark-theme .notice-row { background: var(--surface); color: var(--text); }
body.dark-theme .notice-block { background: var(--surface); border-color: var(--line); }
body.dark-theme .notice-block > h3 { background: linear-gradient(135deg, #2a1f3a, #251c33); color: var(--pink); border-color: var(--line); }
body.dark-theme .notice-block .notice-section { background: rgba(255,255,255,.04) !important; border-color: var(--line) !important; color: var(--text); }
body.dark-theme .stock-bar { background: var(--bg-2); color: var(--text); }
body.dark-theme .stock-bar .fill { background: rgba(255,255,255,.12); }
/* 마이페이지 */
body.dark-theme .tabs { background: var(--surface); }
body.dark-theme .hist-search-bar { background: var(--surface); border-color: var(--line); }
body.dark-theme .hist-search-bar input { background: transparent; }
body.dark-theme .hist-no-result { background: var(--surface); color: var(--text-soft); }
body.dark-theme .hist-pager .hp-btn { background: var(--surface); border-color: var(--line); color: var(--text); }
body.dark-theme .default-ship-card { background: var(--surface); border-color: var(--line); color: var(--text); }
body.dark-theme .default-ship-card .ds-item { background: var(--bg-2); border-color: var(--line); }
body.dark-theme .default-ship-card .ds-item.is-default { background: rgba(255,64,129,.08); }
body.dark-theme .default-ship-card .ds-item .ds-row-actions button { background: var(--surface); border-color: var(--line); color: var(--text); }
body.dark-theme .default-ship-card .ds-empty { background: var(--bg-2); color: var(--text-soft); }
body.dark-theme .pf-edit-btn { background: rgba(255,255,255,.16); }
/* 카트 페이저 */
body.dark-theme .cart-pager .cp-btn { background: var(--surface); border-color: var(--line); color: var(--text); }
/* 배송 요약 바 / 카드 메타 */
body.dark-theme .ship-summary { background: var(--surface); color: var(--text); }
body.dark-theme .ship-summary .ss-toggle { background: var(--bg-2); color: var(--text); }
body.dark-theme .ship-card .ship-meta:hover { background: var(--bg-2); }
body.dark-theme .ship-card .track-no { background: var(--bg-2); color: var(--text); }
body.dark-theme .ship-card .ship-item-row { background: var(--bg-2); }
body.dark-theme .ship-card .ship-item-row .e { background: var(--surface); }
body.dark-theme .ship-card .ship-step .ball { background: var(--surface); border-color: rgba(255,255,255,.18); }
/* 모달 카드 */
body.dark-theme .kj-modal-card,
body.dark-theme .kj-ship-card,
body.dark-theme .kj-ship-picker-card,
body.dark-theme .link-card,
body.dark-theme .od-detail-card,
body.dark-theme .pf-zoom-card,
body.dark-theme .draw-stage,
body.dark-theme .cm-card,
body.dark-theme .ud-modal .ud-card,
body.dark-theme .prob-card { background: var(--surface); color: var(--text); }
body.dark-theme .kj-modal-body .kj-info-row { background: var(--bg-2); }
body.dark-theme .kj-ship-item { background: var(--bg-2); border-color: var(--line); color: var(--text); }
body.dark-theme .kj-ship-item.selected { background: rgba(255,64,129,.12); }
body.dark-theme .kj-ship-item .row-actions button { background: var(--surface); border-color: var(--line); color: var(--text); }
body.dark-theme .kj-ship-empty { background: var(--bg-2); color: var(--text-soft); }
body.dark-theme .kj-ship-add-btn { background: var(--surface); }
body.dark-theme .kj-ship-actions .cancel { background: var(--surface); color: var(--text); border-color: var(--line); }
body.dark-theme .kj-modal-actions .kj-btn-ghost { background: var(--bg-2); color: var(--text); }
body.dark-theme .od-items-list { background: var(--bg-2); }
/* 글쓰기 페이지 */
body.dark-theme .write-card { background: var(--surface); color: var(--text); }
body.dark-theme .editor-toolbar { background: var(--bg-2); }
body.dark-theme .editor-toolbar button { background: var(--surface); color: var(--text); }
body.dark-theme .body-editor,
body.dark-theme .title-input { background: var(--surface); color: var(--text); border-color: var(--line); }
body.dark-theme .cat-row .cat-chip { background: var(--bg-2); color: var(--text-soft); }
body.dark-theme .write-tip { background: var(--bg-2); color: var(--text-soft); }
body.dark-theme .login-required { background: var(--surface); color: var(--text); }
body.dark-theme .link-footer { background: var(--bg-2); border-color: var(--line); }
body.dark-theme .link-cancel { background: var(--surface); color: var(--text); border-color: var(--line); }
/* 주문 / 환불 / 검색 인풋 등 어드민이 아닌 사용자 사이드 인풋들 */
body.dark-theme .od-search input, body.dark-theme .od-search select { background: var(--surface); color: var(--text); border-color: var(--line); }
/* community */
body.dark-theme .com-write input, body.dark-theme .com-write textarea { background: var(--surface); color: var(--text); }
/* 마이페이지 프로필 카드는 그라데이션이라 OK */
/* 알림/리스트 등의 배경 */
body.dark-theme .alerts-bar input { background: transparent; color: var(--text); }
body.dark-theme .alerts-list .alert-item { background: var(--surface); }
/* 전반 흰색 작은 칩 */
body.dark-theme .pill { background: var(--bg-2); color: var(--text); }
body.dark-theme .pill.ok { background: rgba(16,185,129,.18); color: #5ee9b8; }
body.dark-theme .pill.warn { background: rgba(245,158,11,.18); color: #ffd25e; }
body.dark-theme .pill.bad { background: rgba(239,68,68,.18); color: #ff8b8b; }
body.dark-theme .pill.info { background: rgba(99,102,241,.22); color: #c5c8ff; }

/* 배송 추적 — 진행 단계 라인/볼 다크 톤 */
body.dark-theme .ship-step::before { background: rgba(255,255,255,.1); }
body.dark-theme .ship-step .ball { background: var(--bg-2); border-color: rgba(255,255,255,.18); color: var(--text); }
body.dark-theme .ship-step.done .ball { background: var(--pink); border-color: var(--pink); color: white; }
body.dark-theme .ship-step.done::before { background: var(--pink); }
body.dark-theme .ship-step.current .ball { background: var(--yellow); border-color: var(--yellow); color: #1a1424; }

/* 쿠지 셀 보드 다크 톤 */
body.dark-theme .cell { background: var(--bg-2); border-color: rgba(255,255,255,.1); color: var(--text); }
body.dark-theme .cell.sold { background: rgba(255,255,255,.04); color: var(--text-soft); border-color: rgba(255,255,255,.06); }
body.dark-theme .board-legend .swatch { border-color: rgba(255,255,255,.18); }

/* 상세 페이지 안내 섹션 4색 다크 톤 */
body.dark-theme .notice-block .notice-section.ns-pink   { background: rgba(255,107,157,.10); border-color: rgba(255,107,157,.25); }
body.dark-theme .notice-block .notice-section.ns-mint   { background: rgba(127,227,197,.08); border-color: rgba(127,227,197,.25); }
body.dark-theme .notice-block .notice-section.ns-orange { background: rgba(255,193,90,.08); border-color: rgba(255,193,90,.25); }
body.dark-theme .notice-block .notice-section.ns-purple { background: rgba(157,135,255,.08); border-color: rgba(157,135,255,.28); }
body.dark-theme .notice-block .notice-section ul { color: var(--text); }
body.dark-theme .notice-block > h3 { background: linear-gradient(135deg, #2a1f3a, #251c33); border-color: var(--line); }
body {
  font-family: 'Pretendard', -apple-system, sans-serif;
  background-color: var(--bg);
  /* 사이드바 영역(좌측 var(--side-w))은 흰색으로 미리 칠해 FOUC 제거. JS 가 실제 sidebar 로 덮음. */
  background-image: linear-gradient(to right, #fff 0, #fff var(--side-w), transparent var(--side-w));
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  /* 데스크톱 레이아웃 고정 — body min-width: 1280px 보다 창이 작을 때 가로 스크롤 표시 */
  overflow-x: auto;
}
/* 다크 모드: 사이드바 placeholder 색 보강 */
body.dark-theme {
  background-image: linear-gradient(to right, #1f1730 0, #1f1730 var(--side-w), transparent var(--side-w));
}
@media (max-width: 900px) {
  body, body.dark-theme { background-image: none; }
}
.display { font-family: 'Jua', 'Pretendard', sans-serif; }
.hand { font-family: 'Gowun Dodum', sans-serif; }
a { color: inherit; }

/* ============ FOUC 방지 — 사이드바·푸터 JS 주입 전 페이지 콘텐츠 가림 ============
   common.js 가 로드돼 .main 에 footer 추가 + sidebar 렌더링 끝나기 전까지
   .main 을 살짝 흐리게 표시 → 캐시된 옛 마크업이 잠시 보이는 현상 차단. */
.main { opacity: 0; transition: opacity .08s ease; }
body.kj-ready .main { opacity: 1; }
/* JS 가 로드되지 않거나 실패해도 5초 뒤엔 무조건 보이게 (안전망) */
@keyframes kjFallbackShow { to { opacity: 1; } }
.main { animation: kjFallbackShow 0s 4s forwards; }

/* ===== 사이드바 ===== */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--side-w);
  height: 100vh;
  background: white;
  border-right: 2px dashed var(--line);
  padding: 24px 18px;
  display: flex; flex-direction: column;
  z-index: 200;
  /* 사이드바 자체 스크롤 — 콘텐츠 넘치면 스크롤은 가능하되 스크롤바 자체는 숨김
     (브라우저 페이지 스크롤바와 중복 방지) */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
  transition: transform .25s ease;
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

.logo {
  font-family: 'Jua', sans-serif;
  font-size: 30px;
  color: var(--pink-deep);
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* 좌측 정렬 — 중앙정렬 안 함 */
  gap: 14px;
  padding: 18px 14px;             /* 상하 대칭 패딩 + 좌측 여백 */
  margin-bottom: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease;
  transform-origin: left center;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  white-space: nowrap;            /* "관리자 콘솔" 등 한글 텍스트가 좁은 사이드바에서 줄바꿈되는 문제 방지 */
}
.logo > * { line-height: 1; }
/* hover 시 살짝 위로 띄우는 부드러운 효과 (사용자 요청). 회전/스케일 없음. */
.logo {
  transition: transform .18s ease-out;
  transform-origin: left center;
}
.logo:hover { transform: translateY(-3px); }
.logo:active { transform: translateY(-1px); transition-duration: .08s; }

/* ===== 쿠지히트 공식 로고 마크 (사이드바 + 푸터 통합) — 사용자 제공 webp 이미지 사용 ===== */
.logo-mark {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  /* hover/active 애니메이션 제거 → 고정 위치 유지 */
}
.logo-mark svg,
.logo-mark img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
/* 텍스트 — flex 자녀, 자동 수직 중앙 (parent .logo: align-items center) */
.logo-text {
  display: inline-block;
  line-height: 1;
  /* Jua 폰트 ascender 가 살짝 위에 치우쳐 있어 ink-center 가 박스 위쪽에 위치.
     로고 마크와 시각적 중앙을 맞추기 위해 살짝 아래로 보정. */
  transform: translateY(1px);
}

/* 레거시 — .logo-emoji 가 남아있는 페이지 호환 (관리자 / 일부 정적 페이지) — 고정 디자인 */
.logo-emoji {
  background: var(--yellow);
  border-radius: 16px;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 5px 0 var(--pink-deep);
  flex-shrink: 0;
}

/* ===== 모바일 반응형 — 화면 크기에 따라 사이즈 자동 조정 ===== */
@media (max-width: 600px) {
  .logo { font-size: 24px !important; gap: 12px !important; padding: 14px 12px !important; }
  .logo-mark { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 4px 0 var(--pink-deep), 0 6px 14px rgba(255,107,157,.22); }
  .logo-emoji { width: 46px; height: 46px; font-size: 24px; box-shadow: 0 4px 0 var(--pink-deep); border-radius: 13px; }
}

.side-section { margin-bottom: 18px; }
.side-section h6 {
  font-size: 12.5px; color: var(--text-soft); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 0 10px 8px;
}
/* 사이드바 섹션 접기/펼치기 */
.side-section h6.side-toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .15s, color .15s;
  outline: none;
}
.side-section h6.side-toggle:hover { background: var(--bg-2); color: var(--pink-deep); }
.side-section h6.side-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(255, 64, 129, .35); }
.side-section h6.side-toggle .chev {
  color: var(--pink-deep);
  transition: transform .22s ease, background .15s, color .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-2);
  flex-shrink: 0;
  /* hover 시 scale 트랜스폼이 미세한 픽셀 시프트를 만들어 SVG 가 떨리는 현상 → 제거. 회전만 유지. */
  transform-origin: 50% 50%;
}
.side-section h6.side-toggle .chev svg {
  width: 14px;
  height: 14px;
  display: block;
}
.side-section h6.side-toggle:hover .chev { background: white; color: var(--pink-deep); }
.side-section.collapsed h6.side-toggle .chev { transform: rotate(-90deg); }
/* 떨림 방지 — hover 시에도 동일한 transform 유지 (scale 제거) */
.side-section.collapsed h6.side-toggle:hover .chev { transform: rotate(-90deg); }
.side-section .side-nav-list {
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  /* active 버튼의 box-shadow(4px) 가 overflow:hidden 에 잘리지 않도록 하단 여유 확보 */
  padding-bottom: 6px;
  transition: max-height .25s ease, opacity .18s ease, margin-top .2s ease;
}
.side-section.collapsed .side-nav-list {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}
.side-nav-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.side-nav-list a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  transition: all .15s;
  cursor: pointer;
  line-height: 1; /* 아이콘 + 텍스트 수직 중앙 정렬 */
  white-space: nowrap;
}
.side-nav-list a > span:not(.ico) { line-height: 1; }
.side-nav-list a .ico {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  border-radius: 8px;
  line-height: 1;
  flex-shrink: 0;
}
/* SVG 아이콘이 들어간 경우 — 인라인 baseline 동작 차단하고 flex 정렬에 맡김 */
.side-nav-list a .ico .kj-svg-icon {
  width: 22px; height: 22px;
  display: block;
  vertical-align: middle;
  margin: 0;
}
.side-nav-list a:hover { background: var(--bg-2); color: var(--pink-deep); }
.side-nav-list a.active {
  background: var(--pink);
  color: white;
  box-shadow: 0 4px 0 var(--pink-deep);
}
.side-nav-list a.active .ico { background: rgba(255,255,255,.95); }
.side-nav-list a .badge-dot {
  margin-left: auto;
  background: var(--yellow);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
}
/* 다크모드 — 노란 배지가 어두운 사이드바에서 너무 튀어 보임. 핑크 그라데이션으로 통일 */
body.dark-theme .side-nav-list a .badge-dot {
  background: linear-gradient(135deg, #FF85AB, #FF4081);
  color: white;
}

.side-bottom {
  margin-top: auto;
  padding-top: 18px;
  border-top: 2px dashed var(--line);
}
.side-cta {
  background: var(--pink);
  color: white; border: none;
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  font-weight: 700;
  font-family: 'Pretendard';
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--pink-deep);
  transition: transform .15s;
}
.side-cta:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--pink-deep); }

/* mobile toggle */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 18px; left: 18px;
  z-index: 250;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: white;
  border: 2px solid var(--pink);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--pink);
  color: var(--pink-deep);
}
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150; }

/* ===== 전역 버튼 정중앙 정렬 (아이콘 + 텍스트) =====
   button, a.btn-primary, a.btn-ghost, .adm-btn 등 모든 버튼 요소의
   콘텐츠가 가로·세로 중앙에 정렬되도록 통일. inline-flex 가 본디 가지는
   baseline alignment 문제를 한 번에 해결. */
button:not(.cell):not(.cell-x):not(.fav-btn):not(.tgl):not(.swatch):not(.sidebar-toggle),
a.btn-primary,
a.btn-ghost,
a.side-cta,
.adm-btn,
.kj-btn-primary,
.kj-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
}
/* 텍스트만 있는 버튼 — gap 무효 */
button:not(.cell):not(.cell-x):not(.fav-btn):not(.tgl):not(.sidebar-toggle):empty,
button:not(.cell):not(.cell-x):not(.fav-btn):not(.tgl):not(.sidebar-toggle) > *:only-child {
  /* gap 은 multi-child 일 때만 시각적 효과 */
}

/* ===== main wrapper ===== */
.main { margin-left: var(--side-w); min-height: 100vh; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* common */
.section-title { text-align: center; margin-bottom: 64px; }
.section-title h2 { font-family: 'Jua', sans-serif; font-size: 44px; margin-bottom: 12px; }
.section-title p { color: var(--text-soft); font-size: 17px; }

.page-header {
  padding: 32px 6% 12px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.back-btn {
  background: white; border: 2px solid var(--text);
  width: 42px; height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 4px 0 var(--text);
  transition: transform .15s;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
}
.back-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--text); }
.back-btn .kj-svg-icon { width: 22px; height: 22px; display: block; }
.page-header h1 { font-family: 'Jua'; font-size: 32px; }
.page-header .crumb { color: var(--text-soft); font-size: 13px; }

/* 공통 버튼 */
.btn-primary {
  background: var(--pink-deep); color: white; border: none;
  padding: 18px 36px; border-radius: 999px; font-weight: 700;
  font-size: 16px; cursor: pointer; font-family: 'Pretendard';
  box-shadow: 0 6px 0 #d62a6a;
  transition: transform .15s;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover { transform: translateY(3px); box-shadow: 0 3px 0 #d62a6a; }
.btn-ghost {
  background: white; color: var(--text); border: 3px solid var(--text);
  padding: 15px 32px; border-radius: 999px; font-weight: 700;
  font-size: 16px; cursor: pointer; font-family: 'Pretendard';
  text-decoration: none;
  display: inline-block;
}

.badge {
  display: inline-block;
  background: var(--mint); color: var(--text);
  padding: 6px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  margin-bottom: 20px;
  transform: rotate(-2deg);
}

/* 카드 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
/* ============ 카드 그리드 스켈레톤 (로딩 시) ============
   .grid[data-loading] 일 때 가짜 카드 N개를 렌더 — JS 가 첫 카드 추가하면 attribute 제거. */
.grid[data-loading]::before,
.grid[data-loading]::after,
.grid[data-loading] .skeleton-card {
  content: '';
  background: linear-gradient(110deg, #f3eef0 30%, #faf6f8 50%, #f3eef0 70%);
  background-size: 200% 100%;
  animation: kj-skeleton 1.4s linear infinite;
  border-radius: 24px;
  height: 420px;
  display: block;
}
.grid[data-loading]::before { content: ''; }
.grid[data-loading]::after  { content: ''; }
@keyframes kj-skeleton {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
body.dark-theme .grid[data-loading]::before,
body.dark-theme .grid[data-loading]::after {
  background: linear-gradient(110deg, #2a1f3a 30%, #352847 50%, #2a1f3a 70%);
  background-size: 200% 100%;
}
.card { background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06); transition: border-color .15s; cursor: pointer; border: 3px solid transparent; text-decoration: none; color: inherit; display: block; }
.card:hover { border-color: var(--pink); }
.card-img { height: 280px; display: flex; align-items: center; justify-content: center; font-size: 80px; position: relative; overflow: hidden; }
.card-img .card-fallback-icon { width: 96px; height: 96px; display: inline-flex; align-items: center; justify-content: center; }
.card-img .card-fallback-icon .kj-svg-icon { width: 96px; height: 96px; display: block; }
.card-img > img.real-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* 이미지 로딩 실패 시 — broken image 아이콘 대신 gradient 배경 그대로 노출 */
.card-img > img.real-img[alt]::after {
  content: attr(alt);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  color: var(--text-soft);
  font-family: 'Jua', sans-serif;
  font-size: 14px;
  padding: 12px;
  text-align: center;
}
@media (max-width: 720px) {
  .card-img { height: 220px; }
  .card-body { padding: 14px 16px 18px; }
  .card-title { font-size: 16px; margin-bottom: 8px; }
  .card-price { font-size: 16px; }
}
.card-img.g1 { background: linear-gradient(135deg, #FFCAD4, #FF6B9D); }
.card-img.g2 { background: linear-gradient(135deg, #FFEAB0, #FFC93C); }
.card-img.g3 { background: linear-gradient(135deg, #C5E8FF, #6EC5FF); }
.card-img.g4 { background: linear-gradient(135deg, #C8F2DE, #7FE3C5); }
.ribbon { position: absolute; top: 14px; left: 14px; background: white; color: var(--pink-deep); padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.stock-bar { background: var(--bg-2); border-radius: 999px; padding: 6px 14px; font-size: 11.5px; font-weight: 700; color: var(--text-soft); display: flex; align-items: center; justify-content: space-between; margin: 14px 18px 0; }
.stock-bar .fill { flex: 1; height: 6px; background: rgba(0,0,0,.08); border-radius: 999px; margin: 0 10px; overflow: hidden; }
.stock-bar .fill > div { height: 100%; background: var(--pink); border-radius: 999px; }
.card-body { padding: 20px 22px 24px; }
.card-cat { font-size: 12px; color: var(--text-soft); margin-bottom: 6px; }
.card-title { font-family: 'Jua'; font-size: 19px; margin-bottom: 12px; line-height: 1.3; }
.card-foot { display: flex; align-items: center; justify-content: space-between; }
.card-price { font-family: 'Jua'; color: var(--pink-deep); font-size: 18px; }
.card-tag { background: var(--mint); color: #0a4d3a; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
body.dark-theme .card-tag { background: rgba(127, 227, 197, .25); color: #7FE3C5; }

/* ===== 할인 가격 (정가 가로줄 + 판매가 + 할인율 배지) =====
   원피스/주술회전/나히아 등 카드와 쿠지 상세 페이지 공통 사용 */
.card-price-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.card-price-orig {
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  color: #9aa0a6;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(239, 68, 68, .7);
  font-weight: 600;
}
.card-price-off {
  font-family: 'Pretendard', sans-serif;
  font-size: 12.5px;
  color: white;
  background: linear-gradient(135deg, var(--pink-deep), #ef4444);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: -.01em;
}
body.dark-theme .card-price-orig { color: #b8b8b8; text-decoration-color: rgba(239, 68, 68, .8); }

/* ===== 매진 (SOLD OUT) — 카드 흑백 처리 + 정중앙 배지 =====
   판이 모두 매진된 경우, 카드 자체를 흑백으로 노출하고 SOLD OUT 라벨을 띄움.
   접근(클릭)은 가능하지만 상세 페이지에서 모든 등급이 자동으로 품절 처리됨. */
.card.is-soldout {
  filter: grayscale(1) brightness(.85);
  transition: filter .15s, border-color .15s;
}
.card.is-soldout:hover { border-color: transparent; transform: none; filter: grayscale(.85) brightness(.92); }
.card.is-soldout .card-img > img.real-img,
.card.is-soldout .card-img .card-fallback-icon { opacity: .7; }
.card.is-soldout .card-price,
.card.is-soldout .card-tag { opacity: .55; }
/* 매진된 쿠지 카드 — 즐겨찾기 버튼 비활성화 (시각적 노이즈 + 매진 상품은 즐겨찾기 의미 없음) */
.card.is-soldout .fav-btn { display: none; }
.card .soldout-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  z-index: 3;
  font-family: 'Jua', sans-serif;
  font-size: 22px;
  letter-spacing: .03em;
  color: white;
  background: rgba(20, 20, 30, .78);
  padding: 8px 22px;
  border-radius: 12px;
  border: 2.5px solid white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  pointer-events: none;
  white-space: nowrap;
}
body.dark-theme .card.is-soldout { filter: grayscale(1) brightness(.65); }
body.dark-theme .card.is-soldout:hover { filter: grayscale(.9) brightness(.7); }

/* ===== 쿠지 상세 페이지 — 매진 상태 (body 클래스) =====
   sold-out 상태에선 hero 영역도 살짝 흑백 처리, 등급 카드는 모두 sold-out class 가 부여됨 */
body.kuji-sold-out .kuji-hero { filter: grayscale(.55); }
body.kuji-sold-out .kuji-meta h2,
body.kuji-sold-out .kuji-meta .desc,
body.kuji-sold-out .kuji-meta .cat-chip { opacity: .8; }

/* 등급 컬러 칩 (전역)
   ============================================
   등급 배지 — 미니멀 / 세련된 톤
   기존: 다중 그라데이션 + 무거운 그림자 + S shimmer 애니메이션 → 화려하지만 노이즈 많음
   변경: 소프트 컬러칩 (연한 배경 + 짙은 텍스트 + 얇은 보더). 깔끔 + 가독성 + admin/유저 페이지 통합.
   ============================================ */
.gr {
  position: relative;
  letter-spacing: .01em;
  font-weight: 800 !important;
  border: 1px solid transparent;
  /* 화려한 그라데이션/이중 그림자 제거 — 단순 색칩으로 통일 */
}
/* 광택 ::before / 스파클 ::after — 옛 디자인 잔재. 명시적으로 비활성. */
.gr::before, .gr::after { content: none !important; display: none !important; }

/* === S 등급 (라스트원) — 핑크 (브랜드 컬러) === */
.gr-s {
  background: rgba(255, 64, 129, .12);
  color: #C2185B;
  border-color: rgba(255, 64, 129, .35);
  text-shadow: none;
  box-shadow: none;
  animation: none;
}

/* === A 등급 — 골드 === */
.gr-a {
  background: rgba(255, 179, 0, .14);
  color: #8A5A00;
  border-color: rgba(255, 179, 0, .38);
  text-shadow: none;
  box-shadow: none;
}

/* === B 등급 — 블루 === */
.gr-b {
  background: rgba(42, 139, 216, .12);
  color: #1565C0;
  border-color: rgba(42, 139, 216, .35);
  text-shadow: none;
  box-shadow: none;
}

/* === C 등급 — 그린 === */
.gr-c {
  background: rgba(45, 168, 132, .12);
  color: #1B7A5E;
  border-color: rgba(45, 168, 132, .35);
  text-shadow: none;
  box-shadow: none;
}

/* === D 등급 — 그레이 === */
.gr-d {
  background: rgba(0, 0, 0, .05);
  color: #525252;
  border-color: rgba(0, 0, 0, .12);
  text-shadow: none;
  box-shadow: none;
}

/* 다크 테마 보정 — 알파 배경 위에 살짝 밝은 톤 */
body.dark-theme .gr-s { background: rgba(255, 64, 129, .22); color: #FF80AB; border-color: rgba(255, 64, 129, .5); }
body.dark-theme .gr-a { background: rgba(255, 179, 0, .22); color: #FFD54F; border-color: rgba(255, 179, 0, .5); }
body.dark-theme .gr-b { background: rgba(42, 139, 216, .22); color: #90CAF9; border-color: rgba(42, 139, 216, .5); }
body.dark-theme .gr-c { background: rgba(45, 168, 132, .22); color: #80E2C0; border-color: rgba(45, 168, 132, .5); }
body.dark-theme .gr-d { background: rgba(255, 255, 255, .08); color: #cfcfcf; border-color: rgba(255, 255, 255, .18); }

/* 안내 박스 */
.notice-box {
  background: linear-gradient(135deg, #fff8da, #ffe8a8);
  border-left: 6px solid var(--yellow);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 24px;
  display: flex; gap: 14px;
  align-items: flex-start;
}
.notice-box .ico { font-size: 24px; flex-shrink: 0; }
.notice-box p { font-size: 13.5px; color: #6b5300; line-height: 1.55; }
.notice-box p b { color: var(--pink-deep); }

/* live (전역) */
.live { padding: 100px 6%; background: linear-gradient(135deg, #2D1B3D 0%, #4A2545 100%); color: white; position: relative; overflow: hidden; }
.live::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,107,157,.3), transparent 60%); top: -200px; right: -100px; }
.live .section-title h2 { color: white; }
.live .section-title p { color: rgba(255,255,255,.7); }
.live-pulse { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 64, 129, 0.2); color: #ffb3cf; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.live-pulse .dot { width: 8px; height: 8px; background: #ff4081; border-radius: 50%; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.3); } }
.live-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.live-row { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); border-radius: 18px; padding: 14px 20px; display: grid; grid-template-columns: 44px 1fr auto auto; gap: 16px; align-items: center; animation: slideIn .5s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.live-row .avatar { width: 44px; height: 44px; background: linear-gradient(135deg, var(--pink), var(--yellow)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.live-row .who { font-size: 14px; }
.live-row .who b { font-family: 'Jua'; }
.live-row .who small { color: rgba(255,255,255,.6); display: block; font-size: 12px; margin-top: 2px; }
.live-row .grade { font-family: 'Jua'; font-size: 14px; padding: 6px 14px; border-radius: 999px; }
.live-row .grade.s { background: linear-gradient(135deg, #ff4081, #ffc93c); color: white; }
.live-row .grade.a { background: rgba(255, 201, 60, 0.2); color: #ffd76b; }
.live-row .grade.b { background: rgba(110, 197, 255, 0.2); color: #9fd6ff; }
.live-row .grade.c { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.live-row .time { font-size: 12px; color: rgba(255,255,255,.5); }

/* schedule (전역) */
.schedule { padding: 100px 6%; background: linear-gradient(135deg, #FFF1E1, #FFE3EC); }
.sched-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sched-item { background: white; padding: 22px 28px; border-radius: 20px; display: flex; align-items: center; gap: 24px; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.sched-date { background: var(--pink); color: white; width: 70px; height: 70px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.sched-date .m { font-size: 12px; }
.sched-date .d { font-family: 'Jua'; font-size: 26px; line-height: 1; }
.sched-info { flex: 1; }
.sched-info h4 { font-family: 'Jua'; font-size: 18px; margin-bottom: 4px; }
.sched-info p { color: var(--text-soft); font-size: 14px; }
.sched-status { background: var(--yellow); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sched-item:nth-child(2) .sched-date { background: var(--sky); }
.sched-item:nth-child(3) .sched-date { background: var(--mint); color: var(--text); }
.sched-item:nth-child(4) .sched-date { background: var(--yellow); color: var(--text); }

/* ===== 토스트 알림 ===== */
.toast-host {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: white;
  border-radius: 14px;
  padding: 14px 22px 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
  border-left: 5px solid var(--pink);
  pointer-events: auto;
  min-width: 240px;
  max-width: 420px;
  animation: toastIn .3s cubic-bezier(.34, 1.56, .64, 1);
}
.toast.out { animation: toastOut .25s ease forwards; }
.toast .ico { font-size: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.toast .ico .kj-svg-icon { width: 22px; height: 22px; display: block; }
/* 메시지에 \n 들어있으면 줄바꿈 인식 */
.toast > span:not(.ico) { white-space: pre-line; line-height: 1.45; }
.toast.success { border-left-color: var(--mint); }
.toast.warn { border-left-color: var(--yellow); }
.toast.error { border-left-color: var(--pink-deep); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ============ 폭죽 입자 (등급별 사용) ============ */
.confetti {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 14px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9000;
  animation: confettiFly 1.4s cubic-bezier(.4, .6, .4, 1) forwards;
  will-change: transform, opacity;
}
@keyframes confettiFly {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.6); }
  15%  { opacity: 1; transform: translate(calc(var(--dx) * .2), calc(var(--dy) * .2)) rotate(calc(var(--rot) * .2)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 280px)) rotate(var(--rot)) scale(.7); }
}

/* ============ S/A 등급 축하 오버레이 ============ */
.celebrate-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(20,10,30,.55), rgba(20,10,30,.85));
  backdrop-filter: blur(6px);
  animation: celebrateIn .35s cubic-bezier(.34, 1.56, .64, 1);
  cursor: pointer;
}
.celebrate-overlay.out {
  animation: celebrateOut .35s ease forwards;
}
@keyframes celebrateIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes celebrateOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.celebrate-card {
  text-align: center;
  color: white;
  position: relative;
  padding: 40px 56px;
  animation: celebratePop .8s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes celebratePop {
  0%   { transform: scale(.4) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
.celebrate-emoji {
  font-size: 120px;
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(255,255,255,.4));
  animation: celebrateBounce 1.2s ease-in-out infinite;
}
@keyframes celebrateBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.05); }
}
.celebrate-grade {
  font-family: 'Jua', sans-serif;
  font-size: 18px;
  padding: 6px 22px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 14px;
  background: white;
  color: var(--pink-deep);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.celebrate-title {
  font-family: 'Jua', sans-serif;
  font-size: 48px;
  margin-top: 22px;
  text-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 20px rgba(255,201,60,.6);
}
.celebrate-sub { font-size: 18px; opacity: .9; margin-top: 8px; }

/* 회전 광선 (S 등급 한정) */
.celebrate-rays {
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,201,60,.45) 20deg, transparent 40deg,
    transparent 80deg, rgba(255,107,157,.4) 100deg, transparent 120deg,
    transparent 160deg, rgba(255,201,60,.45) 180deg, transparent 200deg,
    transparent 240deg, rgba(255,107,157,.4) 260deg, transparent 280deg,
    transparent 320deg, rgba(255,201,60,.45) 340deg, transparent 360deg
  );
  z-index: -1;
  display: none;
  animation: raysSpin 4s linear infinite;
}
.celebrate-gr-s .celebrate-rays,
.celebrate-last .celebrate-rays { display: block; }
@keyframes raysSpin {
  to { transform: rotate(360deg); }
}

/* A상은 골드 글로우만 */
.celebrate-gr-a .celebrate-emoji {
  filter: drop-shadow(0 0 30px rgba(255,201,60,.7));
}
.celebrate-gr-s .celebrate-emoji,
.celebrate-last .celebrate-emoji {
  filter: drop-shadow(0 0 40px rgba(255,201,60,.9)) drop-shadow(0 0 60px rgba(255,107,157,.7));
}
.celebrate-last .celebrate-title { color: #fff7da; }

/* ============ 브랜드 SVG 아이콘 ============
   기본 사이즈는 1.1em — 글자보다 살짝 크게 잡아 시각적으로 자연스럽게 보이도록.
   더 큰 아이콘이 필요한 곳은 별도 px / em 으로 명시 (sidebar 22px / toast 22px 등). */
.kj-svg-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.22em;
  flex-shrink: 0;
  line-height: 1;
}
/* data-kj-icon 자동 삽입 wrapper — flex 컨테이너로 SVG + 텍스트 자동 수직 정렬 */
.kj-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.kj-icon-wrap .kj-svg-icon {
  width: 1.1em; height: 1.1em;
  display: block;
  vertical-align: middle;
}

/* ===== SVG + 텍스트 수직 중앙 정렬 (버튼/뱃지/pill 한정) =====
   광범위한 button{display:inline-flex} 는 기존 레이아웃 깨질 수 있어
   data-kj-icon 이 부착된 요소만 inline-flex 로 처리. */
[data-kj-icon] {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: .35em;
}
/* 헤딩 등 block 요소엔 자동으로 flex 적용해도 문제 없음 (h1~h4) */
h1[data-kj-icon], h2[data-kj-icon], h3[data-kj-icon], h4[data-kj-icon] {
  display: flex;
}
/* 너비 100% 버튼 — 안의 콘텐츠 중앙 정렬 */
.btn-primary[data-kj-icon], .btn-ghost[data-kj-icon],
.auth-btn[data-kj-icon], .login-btn[data-kj-icon],
.draw-btn[data-kj-icon], .gp-draw-btn[data-kj-icon],
.kakao-btn[data-kj-icon] {
  justify-content: center;
}
/* data-kj-icon-done wrapper — gap 으로 처리하므로 margin 제거 */
[data-kj-icon-done] > .kj-icon-wrap:first-child { margin-right: 0; }
/* SVG 가 텍스트보다 살짝 큰 건 자연스럽지만, 너무 작아 보이는 곳 보강 */
.adm-btn[data-kj-icon] .kj-svg-icon,
.pill[data-kj-icon] .kj-svg-icon { width: 1.15em; height: 1.15em; }
/* JS 가 SVG 를 주입하기 전 미리 자리 예약 — 페이지 전환 시 레이아웃 시프트(박스 오른쪽 이동) 방지 */
[data-kj-icon]:not([data-kj-icon-done]) {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
[data-kj-icon]:not([data-kj-icon-done])::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
h1[data-kj-icon]:not([data-kj-icon-done]),
h2[data-kj-icon]:not([data-kj-icon-done]),
h3[data-kj-icon]:not([data-kj-icon-done]),
h4[data-kj-icon]:not([data-kj-icon-done]) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25em;
  line-height: 1.15;
}
/* 제목 안에 들어간 아이콘 — wrapper 자체에 명시적 크기 지정 (line-height 영향 차단) */
h1 > .kj-icon-wrap, h2 > .kj-icon-wrap, h3 > .kj-icon-wrap, h4 > .kj-icon-wrap {
  width: 1em; height: 1em;
  line-height: 1;
  /* Jua/Pretendard 한글 폰트 ink 영역이 em-box 중앙보다 살짝 위에 치우쳐 있어
     기하학적 flex-center 만으로는 SVG 가 텍스트보다 아래로 보임 — 살짝 위로 보정 */
  transform: translateY(-0.08em);
}
h1 > .kj-icon-wrap .kj-svg-icon,
h2 > .kj-icon-wrap .kj-svg-icon,
h3 > .kj-icon-wrap .kj-svg-icon,
h4 > .kj-icon-wrap .kj-svg-icon {
  width: 100%; height: 100%; display: block;
}
/* data-kj-icon 자동 삽입 시 부모는 flex 정렬로 자동 변환 */
[data-kj-icon-done] {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
/* 제목 — flex 레이아웃 + line-height 정규화로 SVG 와 텍스트 정확 중앙 정렬 */
h1[data-kj-icon-done],
h2[data-kj-icon-done],
h3[data-kj-icon-done],
h4[data-kj-icon-done],
h1:has(.kj-svg-icon),
h2:has(.kj-svg-icon),
h3:has(.kj-svg-icon),
h4:has(.kj-svg-icon) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25em;
  line-height: 1.15;
}
.logo-emoji .kj-svg-icon { width: 24px; height: 24px; display: block; vertical-align: middle; }
.foot-grid > div:first-child .logo-emoji .kj-svg-icon { width: 22px; height: 22px; }
.tp-icon .kj-svg-icon { width: 22px; height: 22px; display: block; vertical-align: middle; }

/* SVG 아이콘이 들어간 styled-button 링크 — 기존 사이드바 nav 등은 자체 스타일 유지 */
a.btn-primary:has(.kj-svg-icon),
a.btn-ghost:has(.kj-svg-icon),
a.side-cta:has(.kj-svg-icon),
a.adm-btn:has(.kj-svg-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ============ 우측 하단 SNS FAB 스택 ============
   카카오채널 (최하단) + 인스타그램 + 네이버 밴드 — bottom 위치 stack 으로 쌓음.
   ⚠ 좌측에 보이는 'scroll-top-btn' 은 별도 위치(top-right of FAB).
   ⚡ will-change: transform 으로 각 FAB 를 자체 compositing layer 로 분리 — 스크롤 시 페이지 본문과 함께 repaint 되지 않음. */
.kakao-fab {
  position: fixed;
  bottom: 28px; right: 24px;
  z-index: 800;
  will-change: transform;
  background: #FEE500;
  color: #181600;
  border: none;
  border-radius: 999px;
  /* Jua 한글 폰트 글리프가 line-box 중앙보다 살짝 아래에 그려져
     padding-bottom 을 padding-top 보다 크게 잡아 텍스트 시각 중앙 보정 */
  padding: 13px 20px 11px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jua', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(254, 229, 0, .45), 0 4px 8px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.kakao-fab:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(254, 229, 0, .55), 0 6px 12px rgba(0,0,0,.12); }
.kakao-fab .kakao-label { font-size: 13.5px; }

/* 인스타그램 FAB — 카카오 위 (bottom + 카카오 높이) */
.insta-fab {
  position: fixed;
  bottom: 84px; right: 24px;
  z-index: 800;
  will-change: transform;
  width: 48px; height: 48px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #FFD66A 0%, #FF6B6B 35%, #DD2A7B 65%, #8134AF 100%);
  box-shadow: 0 8px 22px rgba(221, 42, 123, .35), 0 4px 8px rgba(0,0,0,.08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.insta-fab:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(221, 42, 123, .45), 0 6px 12px rgba(0,0,0,.12); }
.insta-fab svg { width: 24px; height: 24px; color: white; }

/* 네이버 밴드 FAB — 인스타 위 */
.band-fab {
  position: fixed;
  bottom: 140px; right: 24px;
  z-index: 800;
  will-change: transform;
  width: 48px; height: 48px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: #00C73C;
  box-shadow: 0 8px 22px rgba(0, 199, 60, .35), 0 4px 8px rgba(0,0,0,.08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.band-fab:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 199, 60, .45), 0 6px 12px rgba(0,0,0,.12); }
.band-fab svg { width: 26px; height: 26px; color: white; }

@media (max-width: 600px) {
  .kakao-fab { padding: 12px; }
  .kakao-fab .kakao-label { display: none; }
  .insta-fab { bottom: 80px; }
  .band-fab { bottom: 132px; }
}

/* ============ 맨 위로 버튼 ============
   SNS FAB 스택 (카카오 28 / 인스타 84 / 밴드 140) 위에 위치 — 가리지 않도록 196 */
.scroll-top-btn {
  position: fixed;
  bottom: 196px; right: 24px;
  will-change: transform, opacity;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--pink-deep);
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  z-index: 800;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--pink); transform: translateY(-3px); }

/* ============ 페이지 진입 페이드 ============ */
.main { animation: pageFadeIn .35s ease; }
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ 글로벌 검색 모달 (Ctrl/⌘ + K) ============ */
.search-modal {
  position: fixed; inset: 0;
  background: rgba(20, 10, 30, 0.6);
  backdrop-filter: blur(8px);
  z-index: 700;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 20px;  /* 고정 — vh 비례 제거 */
}
.search-modal.show { display: flex; }
.search-card {
  width: 100%; max-width: 600px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  overflow: hidden;
  animation: searchPop .25s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes searchPop {
  from { opacity: 0; transform: scale(.95) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.search-input-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.search-input-row .ico { font-size: 22px; }
.search-input-row input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Pretendard';
  font-size: 16px;
  color: var(--text);
  outline: none;
}
.search-input-row .key {
  background: var(--bg-2);
  color: var(--pink-deep);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'Consolas', monospace;
}
.search-results { max-height: 420px; overflow-y: auto; padding: 8px; }
.search-section { padding: 6px 0; }
.search-section h6 {
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 14px 6px;
}
.search-item {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: background .12s;
}
.search-item:hover,
.search-item.focused { background: var(--bg-2); }
.search-item .em { font-size: 22px; }
.search-item .info b { display: block; font-size: 14px; }
.search-item .info small { color: var(--text-soft); font-size: 11.5px; }
.search-item .arr { margin-left: auto; color: var(--text-soft); font-size: 13px; }
.search-empty { padding: 40px 20px; text-align: center; color: var(--text-soft); }
.search-empty .em { font-size: 48px; display: block; margin-bottom: 10px; }
.search-hint {
  display: flex; gap: 14px;
  padding: 10px 22px;
  font-size: 11px;
  color: var(--text-soft);
  border-top: 1px solid var(--line);
}
.search-hint span { display: inline-flex; align-items: center; gap: 4px; }
.search-hint kbd {
  background: var(--bg-2);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'Consolas', monospace;
  font-size: 10px;
}

/* ============ 모바일 하단 네비게이션 ============ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 90;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) 8px;
  justify-content: space-around;
}
.bottom-nav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 10px;
  transition: color .15s;
  position: relative;
}
.bottom-nav a .ico { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.bottom-nav a .ico .kj-svg-icon { width: 22px; height: 22px; display: block; vertical-align: middle; }
.bottom-nav a.active { color: var(--pink-deep); }
.bottom-nav a .badge-dot {
  position: absolute;
  top: 4px; right: calc(50% - 18px);
  background: var(--pink-deep);
  color: white;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
}

/* ============ 카드 즐겨찾기 ♡ 버튼 ============ */
.fav-btn {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.95);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-soft);
  z-index: 2;
  backdrop-filter: blur(6px);
  transition: all .18s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.fav-btn:hover { transform: scale(1.12); }
.fav-btn.on {
  color: var(--pink-deep);
  animation: favPop .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes favPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

/* ============ 사용자 인사 / 출석 체크 위젯 ============ */
.greet-band {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 6%;
}

/* ============ 홈 공지사항 섹션 ============ */
.notice-section {
  max-width: 1200px;
  margin: 22px auto 0;
  padding: 0 6%;
}
.notice-section .notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.notice-section .notice-head h3 {
  font-family: 'Jua', sans-serif;
  font-size: 18px;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.notice-section .notice-more {
  font-size: 13px; font-weight: 700;
  color: #6366F1;
  text-decoration: none;
}
.notice-section .notice-more:hover { text-decoration: underline; }

.notice-section .notice-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.notice-row {
  background: white;
  border-radius: 14px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-left: 4px solid #6366F1;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .15s, box-shadow .15s;
}
.notice-row:hover { transform: translateX(4px); box-shadow: 0 6px 14px rgba(99,102,241,.18); }
.notice-pill {
  background: linear-gradient(135deg, #6366F1, #818cf8);
  color: white;
  font-family: 'Jua', sans-serif;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
}
.notice-text b { display: block; font-family: 'Jua', sans-serif; font-size: 14.5px; margin-bottom: 2px; }
.notice-text small { color: var(--text-soft); font-size: 12px; }
.notice-time { font-size: 11px; color: var(--text-soft); white-space: nowrap; }
@media (max-width: 600px) {
  .notice-row { grid-template-columns: 1fr; gap: 6px; }
  .notice-pill { justify-self: start; }
  .notice-time { display: none; }
}
.greet-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  box-shadow: var(--shadow-sm);
  border: 2px dashed var(--line);
  position: relative;
  overflow: hidden;
}
.greet-card::before {
  content: '✨';
  position: absolute;
  top: -10px; right: 30%;
  font-size: 60px;
  opacity: .15;
}
.greet-avatar {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--pink), var(--yellow));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.greet-info h3 { font-family: 'Jua'; font-size: 18px; margin-bottom: 4px; }
.greet-info p { font-size: 13px; color: var(--text-soft); }
.greet-info .quick {
  display: flex; gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.greet-info .quick > span,
.greet-info .quick > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}
.greet-info .quick > span { background: var(--bg-2); color: var(--pink-deep); }
.greet-info .quick > a { background: var(--bg); color: var(--text); }
.greet-info .quick .kj-icon-wrap { width: 14px; height: 14px; }
.greet-info .quick .kj-icon-wrap .kj-svg-icon { width: 16px; height: 16px; }
.greet-info .quick a:hover { color: var(--pink-deep); }
.greet-checkin {
  background: linear-gradient(135deg, var(--pink-deep), var(--pink));
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 14px;
  font-family: 'Jua';
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 5px 0 #c0265e;
  transition: transform .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.greet-checkin:hover:not(:disabled) { transform: translateY(2px); box-shadow: 0 3px 0 #c0265e; }
.greet-checkin:disabled {
  background: var(--mint);
  color: var(--text);
  box-shadow: 0 4px 0 #4cba9b;
  cursor: not-allowed;
}

/* 출석 7일 게이지 */
.streak-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex; gap: 6px; align-items: center;
  font-size: 12px;
  color: var(--text-soft);
}
.streak-dots { display: flex; gap: 5px; flex: 1; }
.streak-dots .dot {
  flex: 1;
  height: 8px;
  background: var(--bg-2);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.streak-dots .dot.done { background: linear-gradient(90deg, var(--pink), var(--yellow)); }
.streak-dots .dot.today { animation: dotPulse 1.4s ease infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 64, 129, .5); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 64, 129, 0); }
}

/* ============ 카드 마이크로 인터랙션 ============ */
.card { position: relative; }
.card-img { overflow: hidden; }

/* ============ 빈 상태 개선 ============ */
.placeholder { animation: emptyFloat 3s ease-in-out infinite; }
@keyframes emptyFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ============ 모바일에서 main padding-bottom (하단 네비 공간) ============ */
@media (max-width: 900px) {
  body:not([data-page="login"]):not([data-page="contact"]) .main { padding-bottom: 80px; }
  .bottom-nav { display: flex; }
  /* SNS 스택 위 (밴드 204 + 56) — 인스타/밴드와 겹치지 않게 */
  .scroll-top-btn { bottom: 260px; }
  .kakao-fab { bottom: 88px; }
  .insta-fab { bottom: 148px; }
  .band-fab { bottom: 204px; }
  .greet-card { grid-template-columns: auto 1fr; padding: 18px; }
  .greet-checkin { grid-column: 1 / -1; width: 100%; }
}

/* placeholder */
.placeholder {
  max-width: 700px; margin: 80px auto;
  padding: 64px 32px; text-align: center;
  background: white; border-radius: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.placeholder .pe { font-size: 80px; margin-bottom: 18px; display: block; }
.placeholder h2 { font-family: 'Jua'; font-size: 28px; margin-bottom: 10px; }
.placeholder p { color: var(--text-soft); font-size: 14.5px; }

/* footer */
/* ============ 푸터 — 쿠지히트 브랜드 디자인 ============ */
footer {
  background: linear-gradient(180deg, #ffffff 0%, #FFF8F3 100%);
  padding: 64px 6% 28px;
  border-top: 3px dashed var(--line);
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255, 107, 157, .08), transparent 60%);
  top: -100px; right: -120px;
  pointer-events: none;
}
footer::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255, 201, 60, .12), transparent 60%);
  bottom: -100px; left: -80px;
  pointer-events: none;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  margin-bottom: 36px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
/* 브랜드 블록 (첫 컬럼) */
.foot-grid > div:first-child .logo {
  font-family: 'Jua';
  font-size: 26px;
  color: var(--pink-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.foot-grid > div:first-child .logo-emoji,
.foot-grid > div:first-child .logo-mark {
  background: transparent;
  border-radius: 12px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  overflow: hidden;
  /* 푸터 로고 — hover/active 애니메이션 없음 (고정 디자인) */
}
.foot-grid > div:first-child .logo-emoji {
  background: var(--yellow);
  box-shadow: 0 5px 0 var(--pink-deep);
}
.foot-grid > div:first-child .logo-mark svg,
.foot-grid > div:first-child .logo-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* 푸터 로고 — hover 시 살짝 위로 띄우기 (사이드바와 동일). 마크 자체는 회전/스케일 X */
.foot-grid > div:first-child .logo:hover .logo-mark,
.foot-grid > div:first-child .logo:active .logo-mark { transform: none !important; }
.foot-grid > div:first-child .logo:hover .logo-mark svg,
.foot-grid > div:first-child .logo:active .logo-mark svg,
.foot-grid > div:first-child .logo:hover .logo-mark img,
.foot-grid > div:first-child .logo:active .logo-mark img { transform: none !important; }
/* 푸터 모바일 */
@media (max-width: 600px) {
  .foot-grid > div:first-child .logo-emoji,
  .foot-grid > div:first-child .logo-mark { width: 40px; height: 40px; }
}
.foot-grid > div:first-child p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.7;
  margin-top: 4px;
  word-break: keep-all;
}
/* 작은 카카오 채널 알림 (브랜드 컬럼 안) */
.foot-kakao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  background: #FEE500;
  color: #181600;
  /* Jua 한글 폰트 시각 중앙 보정 — top 1px 늘리고 bottom 1px 줄임 */
  padding: 10px 16px 8px;
  border-radius: 999px;
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 12px rgba(254, 229, 0, .35);
  transition: transform .15s, box-shadow .15s;
}
.foot-kakao:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(254, 229, 0, .45); }

/* 컬럼 헤딩 + 링크 */
.foot-grid h5 {
  font-family: 'Jua';
  margin-bottom: 18px;
  font-size: 15px;
  color: var(--text);
  position: relative;
  padding-bottom: 8px;
}
.foot-grid h5::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 28px; height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--yellow));
  border-radius: 999px;
}
.foot-grid ul { list-style: none; }
.foot-grid li { margin-bottom: 10px; font-size: 13.5px; color: var(--text-soft); }
.foot-grid li a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color .15s, padding-left .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.foot-grid li a:hover { color: var(--pink-deep); padding-left: 4px; }

/* SNS 아이콘 푸터 */
.foot-social {
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.foot-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  line-height: 1;
  /* 이모지/특수문자 글리프가 box 중앙보다 살짝 아래로 렌더되는 현상 보정
     padding-bottom 으로 콘텐츠 영역을 위로 밀어 광학 중앙 맞춤 (border-box 기준) */
  padding: 0 0 4px 0;
  text-decoration: none;
  transition: all .15s;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  color: var(--text);
}
.foot-social a:hover { background: var(--pink); color: white; border-color: var(--pink); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 107, 157, .3); }

/* 법적 링크 / 사업자 정보 영역 */
.foot-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1.5px dashed var(--line);
  position: relative;
  z-index: 1;
}
.legal-links {
  text-align: center;
  display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 14px;
}
.legal-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  padding: 4px 0;
  position: relative;
  transition: color .15s;
}
.legal-links a b { color: var(--pink-deep); }
.legal-links a:hover { color: var(--pink-deep); }
.legal-links a:hover::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--pink-deep);
  border-radius: 999px;
}
.legal-links span { color: #d4d4d8; }

.foot-biz {
  text-align: center;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.7;
  margin-bottom: 6px;
}
.foot-biz b { color: var(--text); }
.copy {
  text-align: center;
  color: #b0b0b8;
  font-size: 12.5px;
  padding-top: 6px;
  font-family: 'Pretendard', sans-serif;
  letter-spacing: .02em;
}

/* responsive */
@media (max-width: 900px) {
  :root { --side-w: 0px; }
  .sidebar { transform: translateX(-100%); width: 280px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: flex; align-items: center; justify-content: center; }
  .sidebar.open ~ .sidebar-backdrop { display: block; }
  .main { margin-left: 0; padding-top: 70px; }
  .live-row { grid-template-columns: 40px 1fr auto; }
  .live-row .time { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  footer { padding: 48px 6% 24px; }
}
@media (max-width: 540px) {
  .section-title h2 { font-size: 32px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-grid > div:first-child { grid-column: auto; }
  .legal-links { gap: 8px; font-size: 12px; }
  .foot-biz { font-size: 11.5px; }
}

/* ============================================
   UI 고정 — 창이 줄어들어도 데스크톱 레이아웃 유지
   - 가로 스크롤은 html 에만 (body 도 overflow-x:auto 면 스크롤바가 두 개 생김!)
   - 셀 / 카드 / 사이드바 픽셀 사이즈 절대 줄어들지 않음
   - 1620px = sidebar 248 + main content 1372 (board 12셀 + 카드 4개 모두 수용)
   ============================================ */
html { overflow-x: auto !important; min-width: 1620px; }
body { overflow-x: visible !important; }
body, body.dark-theme { min-width: 1620px; }

/* viewport < 1620px 일 때, 모바일/태블릿 미디어쿼리들이 끼치는 영향 무효화 */
@media (max-width: 1620px) {
  /* === 사이드바 데스크톱 모드 강제 === */
  :root { --side-w: 248px !important; }
  .sidebar {
    transform: none !important;
    width: 248px !important;
    padding: 24px 18px !important;
  }
  .sidebar.open { transform: none !important; }
  .sidebar-toggle, .sidebar-backdrop { display: none !important; }

  /* === main 영역 데스크톱 마진 === */
  .main { margin-left: 248px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  body:not([data-page="login"]):not([data-page="contact"]) .main { padding-bottom: 0 !important; }

  /* === FOUC placeholder 배경 === */
  body { background-image: linear-gradient(to right, #fff 0, #fff 248px, transparent 248px) !important; }
  body.dark-theme { background-image: linear-gradient(to right, #1f1730 0, #1f1730 248px, transparent 248px) !important; }

  /* === 모바일 하단 네비 숨김 === */
  .bottom-nav { display: none !important; }

  /* === 푸터 그리드 데스크톱 4컬럼 유지 === */
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr !important; gap: 44px !important; }
  .foot-grid > div:first-child { grid-column: auto !important; }
  footer { padding: 64px 6% 28px !important; }

  /* === 라이브 행 데스크톱 4컬럼 유지 === */
  .live-row { grid-template-columns: 44px 1fr auto auto !important; }
  .live-row .time { display: block !important; }

  /* === 인사 카드 데스크톱 3컬럼 유지 === */
  .greet-card { grid-template-columns: auto 1fr auto !important; padding: 22px 26px !important; }
  .greet-checkin { grid-column: auto !important; width: auto !important; }

  /* === 섹션 타이틀 폰트 데스크톱 사이즈 유지 === */
  .section-title h2 { font-size: 44px !important; }

  /* === FAB 데스크톱 위치 — SNS 스택 위로 scroll-top 올림 === */
  .scroll-top-btn { bottom: 196px !important; }
  .kakao-fab { bottom: 28px !important; padding: 12px 20px 12px 16px !important; }
  .kakao-fab .kakao-label { display: inline !important; }
  .insta-fab { bottom: 84px !important; }
  .band-fab { bottom: 140px !important; }

  /* === 쿠지 뽑기 페이지 카드 그리드 4열 고정 === */
  .featured .grid { grid-template-columns: repeat(4, 280px) !important; justify-content: center !important; }
  .live-mini .lm-row .time { display: block !important; }
  .live-mini .lm-row .who small { display: inline !important; }

  /* === 쿠지 상세 — hero-row 2컬럼 / 보드 10열 고정 (셀 100×50, 2:1 비율 절대 고정) === */
  .hero-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important; gap: 24px !important; }
  body.is-event-kuji .hero-row { grid-template-columns: 1fr !important; }
  .hero-row .kuji-hero .kuji-img-big { aspect-ratio: 4 / 5 !important; max-height: 560px !important; }
  .alpha-board, .num-board {
    grid-template-columns: repeat(10, 100px) !important;
    gap: 10px !important;
    justify-content: start !important;
  }
  .cell.ticket { width: 100px !important; height: 50px !important; border-radius: 10px !important; }
  .cell.ticket .cell-mark { font-size: 20px !important; }
  .trust-points { grid-template-columns: 1fr 1fr !important; }
  .notice-block > .notice-body { grid-template-columns: 1fr 1fr !important; padding: 22px 26px 26px !important; }

  /* === 홈(home.css) 데스크톱 레이아웃 고정 === */
  .hero { grid-template-columns: 1.1fr 1fr !important; padding: 60px 6% 100px !important; }
  .free-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
  .lastone-info h2 { white-space: normal !important; }

  /* === 마이페이지(mypage.css) 데스크톱 레이아웃 고정 === */
  .my-stats { grid-template-columns: repeat(4, 1fr) !important; }
  .profile-card { grid-template-columns: 96px 1fr auto !important; gap: 22px !important; padding: 28px 32px !important; }
  .hist-pager .hp-info { display: flex !important; }

  /* === 카트(cart.css) 데스크톱 레이아웃 고정 === */
  .cart-page { grid-template-columns: 1fr 360px !important; }

  /* === 배송(shipping.css) 데스크톱 레이아웃 고정 === */
  .ship-grid { grid-template-columns: 1fr 1fr !important; }
}