/* =========================================
   리포트 빌더 전용 스타일시트
   (디자인 토큰·폰트는 theme.css 단일 소스, 여기서는 var() 참조만)
   ========================================= */

/* 학습 생활 지표: 라벨 | 슬라이더 | % 칩 한 줄. 트랙은 남는 폭을 채우고 max 32rem까지, 좁아지면 비례 축소 */
.habit-row-label {
  width: 5rem;
}
.habit-row-track {
  flex: 1 1 0;
  min-width: 8rem;
  max-width: 32rem;
}

/* 학습 생활 지표 range: 채움(JS --habit-track-bg), 썸(--habit-accent). 트랙은 얇게, 터치는 input 높이 44px 유지
   Tailwind에 appearance-none이 없을 수 있어 native 썸 제거는 여기서 지정
   WebKit: 썸 margin-top = (트랙높이 − 썸높이)/2 → 얇은 트랙 중심과 정렬
   Gecko: 기본적으로 트랙·썸 세로 정렬; 필요 시 --habit-range-track-h 조정 */
input.habit-range-input[type="range"] {
  --habit-track-bg: linear-gradient(to right, #1493e6 0%, #1493e6 100%, #e5e7eb 100%, #e5e7eb 100%);
  --habit-accent: #1493e6;
  --habit-moz-fill: #1493e6;
  /* 얇은 트랙 + 썸; 터치 영역은 래퍼 min-h-[44px] */
  --habit-range-input-h: 44px;
  --habit-range-track-h: 10px;
  --habit-range-thumb-h: 22px;
  --habit-range-thumb-w: 22px;
  --habit-thumb-y-offset: calc((var(--habit-range-track-h) - var(--habit-range-thumb-h)) / 2);
  width: 100%;
  height: var(--habit-range-input-h);
  min-height: var(--habit-range-input-h);
  padding: 0;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input.habit-range-input[type="range"]::-webkit-slider-runnable-track {
  height: var(--habit-range-track-h);
  border-radius: 9999px;
  background: var(--habit-track-bg);
}
input.habit-range-input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--habit-range-thumb-w);
  height: var(--habit-range-thumb-h);
  border-radius: 9999px;
  background: var(--habit-accent);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  margin-top: var(--habit-thumb-y-offset);
  cursor: pointer;
}
input.habit-range-input[type="range"]::-moz-range-track {
  height: var(--habit-range-track-h);
  border-radius: 9999px;
  background: #e5e7eb;
}
input.habit-range-input[type="range"]::-moz-range-progress {
  height: var(--habit-range-track-h);
  border-radius: 9999px 0 0 9999px;
  background: var(--habit-moz-fill);
}
input.habit-range-input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--habit-range-thumb-w);
  height: var(--habit-range-thumb-h);
  border: 2px solid #ffffff;
  border-radius: 9999px;
  background: var(--habit-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

/* data-habit-pct: JS가 0~100(10단위)로만 갱신. 기본 input 블록보다 아래에 두어 --habit-* 덮어씀 */
input.habit-range-input[data-habit-pct="0"] {
  --habit-accent: rgb(220,38,38);
  --habit-moz-fill: rgb(220,38,38);
  --habit-track-bg: linear-gradient(to right, #e5e7eb 0%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="10"] {
  --habit-accent: rgb(220,38,38);
  --habit-moz-fill: rgb(220,38,38);
  --habit-track-bg: linear-gradient(to right, rgb(220,38,38) 0%, rgb(220,38,38) 10%, #e5e7eb 10%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="20"] {
  --habit-accent: rgb(198,50,59);
  --habit-moz-fill: rgb(198,50,59);
  --habit-track-bg: linear-gradient(to right, rgb(198,50,59) 0%, rgb(198,50,59) 20%, #e5e7eb 20%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="30"] {
  --habit-accent: rgb(176,62,81);
  --habit-moz-fill: rgb(176,62,81);
  --habit-track-bg: linear-gradient(to right, rgb(176,62,81) 0%, rgb(176,62,81) 30%, #e5e7eb 30%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="40"] {
  --habit-accent: rgb(153,74,102);
  --habit-moz-fill: rgb(153,74,102);
  --habit-track-bg: linear-gradient(to right, rgb(153,74,102) 0%, rgb(153,74,102) 40%, #e5e7eb 40%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="50"] {
  --habit-accent: rgb(131,86,123);
  --habit-moz-fill: rgb(131,86,123);
  --habit-track-bg: linear-gradient(to right, rgb(131,86,123) 0%, rgb(131,86,123) 50%, #e5e7eb 50%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="60"] {
  --habit-accent: rgb(109,99,145);
  --habit-moz-fill: rgb(109,99,145);
  --habit-track-bg: linear-gradient(to right, rgb(109,99,145) 0%, rgb(109,99,145) 60%, #e5e7eb 60%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="70"] {
  --habit-accent: rgb(87,111,166);
  --habit-moz-fill: rgb(87,111,166);
  --habit-track-bg: linear-gradient(to right, rgb(87,111,166) 0%, rgb(87,111,166) 70%, #e5e7eb 70%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="80"] {
  --habit-accent: rgb(64,123,187);
  --habit-moz-fill: rgb(64,123,187);
  --habit-track-bg: linear-gradient(to right, rgb(64,123,187) 0%, rgb(64,123,187) 80%, #e5e7eb 80%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="90"] {
  --habit-accent: rgb(42,135,209);
  --habit-moz-fill: rgb(42,135,209);
  --habit-track-bg: linear-gradient(to right, rgb(42,135,209) 0%, rgb(42,135,209) 90%, #e5e7eb 90%, #e5e7eb 100%);
}
input.habit-range-input[data-habit-pct="100"] {
  --habit-accent: rgb(20,147,230);
  --habit-moz-fill: rgb(20,147,230);
  --habit-track-bg: linear-gradient(to right, rgb(20,147,230) 0%, rgb(20,147,230) 100%, #e5e7eb 100%, #e5e7eb 100%);
}

/* % 칩: data-habit-pct 값은 range와 동기 */
.habit-pct-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.125rem 0.625rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.habit-pct-chip[data-habit-pct="0"] {
  color: rgb(220,38,38);
  border-color: rgba(220,38,38,0.35);
  background-color: rgba(220,38,38,0.1);
}
.habit-pct-chip[data-habit-pct="10"] {
  color: rgb(220,38,38);
  border-color: rgba(220,38,38,0.35);
  background-color: rgba(220,38,38,0.1);
}
.habit-pct-chip[data-habit-pct="20"] {
  color: rgb(198,50,59);
  border-color: rgba(198,50,59,0.35);
  background-color: rgba(198,50,59,0.1);
}
.habit-pct-chip[data-habit-pct="30"] {
  color: rgb(176,62,81);
  border-color: rgba(176,62,81,0.35);
  background-color: rgba(176,62,81,0.1);
}
.habit-pct-chip[data-habit-pct="40"] {
  color: rgb(153,74,102);
  border-color: rgba(153,74,102,0.35);
  background-color: rgba(153,74,102,0.1);
}
.habit-pct-chip[data-habit-pct="50"] {
  color: rgb(131,86,123);
  border-color: rgba(131,86,123,0.35);
  background-color: rgba(131,86,123,0.1);
}
.habit-pct-chip[data-habit-pct="60"] {
  color: rgb(109,99,145);
  border-color: rgba(109,99,145,0.35);
  background-color: rgba(109,99,145,0.1);
}
.habit-pct-chip[data-habit-pct="70"] {
  color: rgb(87,111,166);
  border-color: rgba(87,111,166,0.35);
  background-color: rgba(87,111,166,0.1);
}
.habit-pct-chip[data-habit-pct="80"] {
  color: rgb(64,123,187);
  border-color: rgba(64,123,187,0.35);
  background-color: rgba(64,123,187,0.1);
}
.habit-pct-chip[data-habit-pct="90"] {
  color: rgb(42,135,209);
  border-color: rgba(42,135,209,0.35);
  background-color: rgba(42,135,209,0.1);
}
.habit-pct-chip[data-habit-pct="100"] {
  color: rgb(20,147,230);
  border-color: rgba(20,147,230,0.35);
  background-color: rgba(20,147,230,0.1);
}

/* 점수 버튼 활성화 스타일 (디자인 토큰 활용) */
.score-btn-active {
  background-color: var(--pf-primary) !important;
  color: white !important;
  border-color: var(--pf-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px var(--pf-primary-ring) !important;
}

/* 단원성취도 버튼 - 전 구간 1열 5개·동일 크기, 글자 테두리 안 (모바일은 아래 미디어에서 추가 보정) */
#unitArea .score-btn-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  gap: 0.25rem !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  min-width: 0 !important;
}
#unitArea .small-row .score-btn {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  padding: 0.2rem 0.25rem !important;
  border-radius: 0.5rem !important;
  font-size: clamp(0.5625rem, 1vw, 0.75rem) !important;
  font-weight: 600 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* PC: 버튼 행 최소 너비 확보 → 버튼이 너무 작아지지 않도록 */
@media (min-width: 768px) {
  #unitArea .score-btn-row {
    min-width: 300px !important;
  }
}

/* 아코디언 애니메이션 */
.accordion-content {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* SweetAlert2 Modern Academic Theme (theme.css --pf-font-family와 동일) */
.swal2-academic-popup {
  border-radius: 8px !important;
  font-family: var(--pf-font-family) !important;
}

/* ===== 스크롤바 커스텀 ===== */
::-webkit-scrollbar { 
  width: 8px; 
  height: 8px; 
}
::-webkit-scrollbar-track { 
  background: transparent; 
}
::-webkit-scrollbar-thumb { 
  background: #cbd5e1; 
  border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
  background: #94a3b8; 
}

/* ===== 스크롤바 숨김 유틸리티 (Tailwind 호환) ===== */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* =========================================
   리포트 빌더 전용 UI 컴포넌트
   (우측 패널은 Tailwind로 전환되어 제거됨)
   ========================================= */

/* ===== 결과 편집기 스타일 ===== */
.pf-editing {
  background: white;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  outline: 2px solid rgba(125, 211, 252, 0.5);
  outline-offset: 2px;
}

/* report_builder 전용 생성 버튼:
   공용 .pf-btn-primary와 충돌 없이 버튼 모양을 고정한다. */
.rb-btn-make {
  width: 100% !important;
  margin-top: 1rem !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0.75rem !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.rb-btn-make:active {
  transform: scale(0.99);
}
.pf-editable[contenteditable="true"] {
  background: #f0f9ff; /* sky-50 */
  border: 1px dashed #7dd3fc; /* sky-300 */
  border-radius: 0.5rem;
  padding: 0.5rem;
  outline: none;
}
.pf-editable[contenteditable="true"]:focus {
  outline: 2px solid #0ea5e9; /* sky-500 */
  outline-offset: 2px;
}

/* ===== 단원 트리 토글 스타일 ===== */
/* Tailwind CSS로 전면 교체되어 제거됨 */

/* ===== 기능 잠금 (Soft Locking) 스타일 ===== */
/* 무료회원 학부모 메시지: 내용은 보이게 하고 복사만 불가 (선택·드래그·우클릭 복사 방지) */
.sms-no-copy {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 무료회원 학부모 메시지: 아주 약한 blur로 '희미하게' 보이기 */
.blur-locked {
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

/* .lock-overlay: 미리보기 영역 내부로 한정(overflow), 다른 규칙에 의한 확대 방지 */
.lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 10;
  border-radius: inherit;
  overflow: hidden;
}

/* 오버레이 내부 SVG 크기 고정 (다른 규칙에 의해 커지는 것 방지) */
.lock-overlay svg {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  max-width: 2rem !important;
  max-height: 2rem !important;
  flex-shrink: 0 !important;
}

/* 버튼 안 자물쇠(.lock-icon) — 크기는 Tailwind w-5 h-5(버튼 아이콘과 동일) 사용, 위치만 보조 */
#btnCopySmsText .lock-icon,
#btnCopyReportUrl .lock-icon {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  left: auto !important;
  bottom: auto !important;
}

/* 결과 영역 복사 방지 (인라인 스타일 대체) */
.copy-protected,
.copy-protected * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 학부모 메시지 미리보기 (긴 URL/텍스트 줄바꿈) */
#smsPreview {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* 학부모 메시지 액션 버튼: 세 버튼 모양 통일 */
.sms-action-btn {
  flex: 1 1 0%;
  min-width: 100px;
  position: relative;
  min-height: 48px;
  padding: 0.75rem 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-size: 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

@media (min-width: 640px) {
  .sms-action-btn {
    min-width: 120px;
    padding-left: 1rem;
    padding-right: 2rem;
  }
}

.sms-action-btn-copy {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
}
.sms-action-btn-copy:hover {
  background: #f9fafb;
  color: #2563eb;
}

.sms-action-btn-url {
  background: var(--pf-primary);
  border: 1px solid var(--pf-primary);
  color: #ffffff;
}
.sms-action-btn-url:hover {
  background: var(--pf-primary-d);
  border-color: var(--pf-primary-d);
}

.sms-action-btn-preview {
  background: #1f2937;
  border: 1px solid #1f2937;
  color: #ffffff;
}
.sms-action-btn-preview:hover {
  background: #111827;
  border-color: #111827;
}

/* 미리보기 래퍼: 오버레이가 버튼 영역으로 넘치지 않도록 한정 */
.sms-preview-wrap {
  overflow: hidden;
}

/* ===== 성취도 배지(Badge) 일관성 규칙 ===== */
.achievement-badge,
.unit-badge,
[class*="badge"] {
  min-width: var(--badge-min-width) !important; /* 4rem = 64px */
  flex-shrink: 0 !important; /* 수축 방지 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* 성취도 배지가 포함된 모든 요소에 적용 */
span[class*="badge"],
span.unit-badge,
.achievement-badge {
  min-width: var(--badge-min-width) !important;
  flex-shrink: 0 !important;
}

/* ===== 모바일 전용 카드 레이아웃 (768px 미만) ===== */
@media (max-width: 767px) {
  /* 단원 입력 영역 전체 카드 스타일 */
  #unitArea {
    padding: 0.375rem !important;
    background: #F9FAFB !important;
  }

  /* 대단원/중단원 블록 카드 스타일 */
  .big-block,
  .mid-block {
    margin-bottom: 0.25rem !important;
    padding: 0.1875rem !important;
    background: white !important;
    border-radius: 0.75rem !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  /* 대단원/중단원 헤더 행: 기본 p-3, pl-8을 모바일에서 절반 수준으로 축소 */
  #unitArea .big-row {
    padding: 0.375rem 0.5rem !important;
  }
  #unitArea .mid-row {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    padding-right: 0.5rem !important;
    padding-left: 1rem !important;
  }

  /* 단원 입력 카드 스타일(모바일 단순화: 중첩 카드 느낌 최소화) */
  .unit-row,
  .small-row {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.1875rem 0 !important;
    margin-bottom: 0.0625rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 단원명 입력란 - 가로 전체 너비 */
  .unit-row > span,
  .small-row > span {
    width: 100% !important;
    margin-bottom: 0.1875rem !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    font-size: 0.875rem !important; /* text-sm */
    line-height: 1.5 !important;
    word-break: break-word !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  /* 성취도 버튼 영역 - 모바일에서도 반드시 한 줄 5개 */
  #unitArea .score-btn-row {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.125rem !important;
    justify-content: stretch !important;
    margin-top: 0.125rem !important;
    padding: 0.1rem !important;
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 0.625rem !important;
  }

  /* 학부모 메시지 복사 버튼 - 터치 영역 확보 (최소 44px) */
  #btnCopySmsText,
  #btnCopyReportUrl {
    min-height: 44px !important;
  }

  /* 성취도 선택 버튼 - 동일 크기, 라운드·여백 조정으로 가독성 확보, 터치 44px */
  #unitArea .small-row .score-btn {
    min-width: 0 !important;
    min-height: 44px !important;
    flex: 1 1 0% !important;
    padding: 0.125rem !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #unitArea .small-row .score-btn {
    text-align: center !important;
  }

  /* 단원 리스트 항목 카드 스타일 */
  .unit-item,
  [class*="unit-item"] {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    background: white !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }

  /* 단원명 텍스트 - 모바일에서 전체 너비 */
  .unit-item > span:first-child,
  [class*="unit-name"] {
    width: 100% !important;
    margin-bottom: 0.75rem !important;
    padding-right: 0 !important;
    font-size: 0.875rem !important; /* text-sm */
    line-height: 1.5 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* 배지 - 모바일에서 우측 정렬 */
  .unit-item > span:last-child,
  .unit-badge {
    align-self: flex-end !important;
    margin-top: 0.5rem !important;
  }

  /* 대단원/중단원 헤더 모바일 최적화 */
  .big-block > div:first-child,
  .mid-block > div:first-child {
    font-size: 1rem !important; /* text-base */
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* 중단원 헤더 모바일 최적화 */
  .mid-block > div[class*="font-bold"] {
    font-size: 0.9375rem !important; /* text-base */
    padding: 0.5rem 0.75rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ===== 터치 인터페이스 최적화 ===== */
@media (max-width: 767px) {
  /* 모든 버튼과 선택 영역 - 최소 44px x 44px */
  button:not(.score-btn),
  [role="button"],
  input[type="button"],
  input[type="submit"],
  a[role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.625rem 1rem !important; /* 터치 영역 확보 */
  }

  /* 입력 필드도 터치 영역 확보 */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    min-height: 44px !important;
    font-size: 1rem !important; /* text-base - 모바일에서 가독성 향상 */
    padding: 0.75rem 1rem !important;
  }

  /* 폰트 크기 최소화 방지 - text-xs 금지 */
  .text-xs {
    font-size: 0.875rem !important; /* text-sm으로 상향 */
  }

  /* 본문 텍스트는 text-base 유지 */
  body,
  p,
  span:not(.achievement-badge):not(.unit-badge) {
    font-size: 1rem !important; /* text-base */
  }

  /* billing.html 전용 모바일 최적화 */
  /* 요금제 카드 모바일 최적화 */
  .grid > div[class*="bg-white"] {
    margin-bottom: 1rem !important;
  }

  /* 포인트 내역 테이블 모바일 카드 변환 (컴팩트) */
  .billing-history-table table {
    display: block !important;
    width: 100% !important;
  }

  .billing-history-table thead {
    display: none !important;
  }

  .billing-history-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .billing-history-table tr {
    display: block !important;
    margin-bottom: 0.625rem !important;
    background: white !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 0.625rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    padding: 0.625rem !important;
    width: 100% !important;
  }

  .billing-history-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.375rem 0 !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid #F3F4F6 !important;
  }

  .billing-history-table td:last-child {
    border-bottom: none !important;
  }

  .billing-history-table td:before {
    content: attr(data-label);
    font-weight: 600;
    color: #6B7280;
    font-size: 0.8125rem;
    margin-right: 0.625rem;
    flex-shrink: 0;
  }

  .billing-history-table td span,
  .billing-history-table td {
    text-align: right !important;
    flex: 1;
  }
}

/* ===== 리포트 빌더 푸터 (페이지 톤에 맞춤) ===== */
.footer-report-builder {
  margin-top: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.footer-report-builder footer {
  background-color: #f1f5f9 !important; /* slate-100, 메인 배경과 동일 */
  border-top: 1px solid #e2e8f0 !important; /* slate-200, 부드러운 구분선 */
  margin-top: 0;
  border-radius: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.footer-report-builder footer > div {
  max-width: min(1400px, 100%);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem !important; /* 메인 p-4와 동일 */
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 1024px) {
  .footer-report-builder footer > div {
    padding: 1rem 1.5rem 1.25rem !important; /* lg: 메인 lg:p-6과 맞춤 */
  }
}

.footer-report-builder footer .text-sm {
  font-size: 0.8125rem; /* 약간 작은 본문 */
  color: #64748b !important; /* slate-500 */
}

.footer-report-builder footer .font-semibold.text-gray-900 {
  font-size: 0.8125rem;
  color: #475569 !important; /* slate-600 */
}

.footer-report-builder footer a {
  color: #0ea5e9;
}

.footer-report-builder footer a:hover {
  color: #0284c7;
}

/* 모바일: 가독성·터치 영역 보강 */
@media (max-width: 767px) {
  .footer-report-builder footer > div {
    padding: 1rem 1rem 1.25rem !important;
  }

  .footer-report-builder footer .text-sm,
  .footer-report-builder footer .font-semibold.text-gray-900 {
    font-size: 0.875rem !important; /* 14px, 모바일에서 읽기 좋게 */
  }

  .footer-report-builder footer .space-y-1 p {
    line-height: 1.5;
  }

  /* 고객문의 링크 터치 영역 확보 */
  .footer-report-builder footer a.inline-flex {
    min-height: 44px;
    padding: 0.5rem 0;
    align-items: center;
    display: inline-flex;
  }
}

/* ===== 빌링 페이지 모바일 스크롤 축소 ===== */
@media (max-width: 767px) {
  .billing-main.pf-main {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* 공개 요금제(/pricing): 좌하단 고객센터 FAB 가림 방지 */
.pricing-main.pf-main {
  padding-bottom: 6rem;
}

/* 포인트 이용 내역: 데스크톱에서 summary를 제목처럼만 표시 */
@media (min-width: 768px) {
  .billing-details-mobile summary {
    cursor: default;
  }
}

/* ===== 공지사항 진입 모달 (콘텐츠 길이에 맞는 컴팩트 패널) ===== */
.notice-modal-panel {
  width: min(100%, 28rem);
  max-width: 28rem;
}

.notice-board-row {
  transition: background-color 0.15s ease;
}

.notice-board-detail-view[hidden] {
  display: none !important;
}