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

:root {
  --primary-blue: #2563eb;
  --primary-dark: #0f172a;
  --toss-bg: #f8fafc;
  --toss-card-border: #e2e8f0;
}

html, body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 한국어 어절 단위 줄바꿈 보장 (단어 중간 쪼개짐 원천 차단) */
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: #0f172a;
}

/* 헤드라인·타이틀 밸런스 및 타이트한 자간 (토스·뱅크샐러드·핀다 스타일) */
h1, h2, h3, h4, .headline-balanced {
  word-break: keep-all;
  letter-spacing: -0.03em;
  line-height: 1.35;
}

/* 금융 숫자·영수증 수치 고정폭 정렬 (실시간 입력 시 흔들림 방지) */
input[type="number"],
#result-headline,
#result-metrics-grid,
#result-loss-bar,
#res-headline,
#res-metrics-grid,
#res-loss-bar,
table td,
table th,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* 배지·버튼·칩 내부 줄바꿈 방지 유틸리티 */
.badge-pill,
#result-badge,
#res-badge,
#cpa-badge,
#btn-share-receipt {
  white-space: nowrap;
  flex-shrink: 0;
}

/* High-intent CTA pulse animation */
.pulse-cta {
  animation: pulseBorder 2.2s infinite;
}

@keyframes pulseBorder {
  0%, 100% {
    box-shadow: 0 4px 20px -2px rgba(37, 99, 235, 0.35), 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  50% {
    box-shadow: 0 4px 24px -2px rgba(37, 99, 235, 0.45), 0 0 0 6px rgba(37, 99, 235, 0);
  }
}

/* Receipt card thermal printer simulation (Toss/Banksalad Dark Card) */
.receipt-paper {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  position: relative;
}

.receipt-paper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, #38bdf8 0, #38bdf8 10px, transparent 10px, transparent 20px);
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

/* Number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Range input styling */
input[type=range] {
  accent-color: #2563eb;
}

/* Smooth tab fade transitions */
.tab-content {
  transition: opacity 0.15s ease-in-out;
}

/* ==========================================================================
   [Toss / Banksalad / Nosearch / Ohou Benchmark]
   BIG-FONT & ONE-GLANCE HIERARCHY OVERHAUL (+35% ~ +60% Readability Upgrade)
   ========================================================================== */

/* 1. 글로벌 기본 가독성 스케일업: 초소형 텍스트(10px/11px/12px) 하한선 강제 상향 */
#view-calculators .text-\[10px\],
#interactive-calculator-section .text-\[10px\],
#atf-instant-checkout-bar .text-\[10px\] {
  font-size: 0.8125rem !important; /* 10px -> 13px (+30%) */
  line-height: 1.35 !important;
}

#view-calculators .text-\[11px\],
#interactive-calculator-section .text-\[11px\],
#atf-instant-checkout-bar .text-\[11px\] {
  font-size: 0.875rem !important; /* 11px -> 14px (+27%) */
  line-height: 1.4 !important;
}

#view-calculators .text-xs,
#interactive-calculator-section .text-xs,
#atf-instant-checkout-bar .text-xs {
  font-size: 0.9375rem !important; /* 12px -> 15px (+25%) */
  line-height: 1.45 !important;
}

/* 2. 6대 카테고리 네비게이션 탭 (강약 대비: 타이틀 Bold 800 vs 부제 Regular 400) */
.calc-nav-btn {
  padding: 0.95rem 1.05rem !important;
  border-width: 2px !important;
  border-radius: 1.125rem !important;
}
.calc-nav-btn > div:first-child {
  font-size: 1.1rem !important; /* 17.6px 선명한 타이틀 */
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.calc-nav-btn > div:last-child {
  font-size: 0.84rem !important; /* 13.4px 차분한 부제 */
  margin-top: 0.2rem !important;
  font-weight: 400 !important;
  opacity: 0.85;
}

/* 3. 좌측 입력 폼: 라벨은 차분하게(500), 입력 숫자는 선명하게(800) 강약 대비 */
#calc-form-title,
#interactive-calculator-section h3 {
  font-size: 1.35rem !important; /* 21.6px */
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

#calc-inputs-container label,
#interactive-calculator-section label {
  font-size: 0.95rem !important; /* 15.2px */
  font-weight: 500 !important; /* 볼드 과잉 해소: 라벨은 차분한 미디엄 웨이트 */
  color: #475569 !important;
  margin-bottom: 0.35rem !important;
}

#calc-inputs-container input[type="number"],
#calc-inputs-container select,
#interactive-calculator-section input[type="number"],
#interactive-calculator-section select {
  font-size: 1.15rem !important; /* 18.4px */
  font-weight: 800 !important; /* 사용자가 입력하는 핵심 숫자만 강하게 강조 */
  height: 3.25rem !important; /* 52px 터치 영역 */
  padding: 0.55rem 0.95rem !important;
  border-width: 2px !important;
  border-radius: 0.875rem !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
}
#calc-inputs-container input[type="number"]:focus,
#calc-inputs-container select:focus,
#interactive-calculator-section input[type="number"]:focus,
#interactive-calculator-section select:focus {
  background-color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

/* 시나리오 1초 자동입력 칩: 비선택 칩은 가볍게(500), 선택된 칩만 강조 */
#calc-scenario-chips button,
#interactive-calculator-section a[href*="index.html"] {
  font-size: 0.875rem !important; /* 14px */
  padding: 0.42rem 0.8rem !important;
  border-radius: 0.65rem !important;
}

/* 4. 우측 영수증 결과 카드: 핵심 금액만 초강조(900) & 부가 텍스트는 가볍게(400) */
#result-headline,
#res-headline {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important; /* 21.6px ~ 28px (줄바꿈·잘림 없는 최적 크기) */
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.03em !important;
}

/* 영수증 핵심 숫자 카드 (메트릭 그리드 — -108,499원 등 긴 숫자가 절대 ...으로 잘리지 않도록 설계) */
#result-metrics-grid > a,
#res-metrics-grid > a {
  padding: 0.85rem 0.75rem !important;
  border-radius: 1rem !important;
}
#result-metrics-grid > a > div:nth-child(1),
#res-metrics-grid > a > div:nth-child(1) {
  font-size: 0.82rem !important; /* 메트릭 라벨 13.1px */
  font-weight: 400 !important; /* 라벨 볼드 제거 -> 아래 숫자가 확 살아남! */
  color: #94a3b8 !important;
}
#result-metrics-grid > a > div:nth-child(2),
#res-metrics-grid > a > div:nth-child(2) {
  font-size: clamp(1.12rem, 1.55vw, 1.38rem) !important; /* 18px ~ 22px (-108,499원 9글자도 1줄에 완벽 표시!) */
  font-weight: 900 !important; /* 오직 핵심 결과 숫자에만 최고 강도(900) 부여 */
  line-height: 1.25 !important;
  letter-spacing: -0.04em !important;
  margin-top: 0.2rem !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#result-metrics-grid > a > div:nth-child(3),
#res-metrics-grid > a > div:nth-child(3) {
  font-size: 0.76rem !important; /* 하단 직결 링크 12.2px */
  font-weight: 500 !important; /* 보조 링크 볼드 완화 */
  opacity: 0.9;
}

/* 5. 주요 구매·혜택 CTA 버튼 (명확한 행동 유도 700~800) */
#input-instant-coupang-btn,
#input-instant-lp-btn,
#impulse-coupang-btn,
#res-impulse-btn,
#atf-main-btn,
#atf-impulse-btn,
#cpa-action-link,
#res-cpa-title,
#receipt-action-items a,
#res-action-items a,
#product-recommendations a div.w-full.text-center,
#res-products-grid a div.w-full.text-center {
  font-size: 0.975rem !important; /* 15.6px (말줄임표 잘림 방지) */
  padding-top: 0.78rem !important;
  padding-bottom: 0.78rem !important;
  border-radius: 0.85rem !important;
  font-weight: 800 !important;
}

/* 6. 부연 설명 텍스트: 말줄임표(...) 강제 절단(-webkit-line-clamp: 1) 완전 해제 및 가벼운 서체(400) 적용 */
#input-instant-sub,
#impulse-sub,
#res-impulse-sub,
#cpa-desc {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: keep-all !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

#result-summary-text,
#res-summary {
  font-size: 0.925rem !important; /* 14.8px */
  font-weight: 400 !important; /* 요약 설명문 볼드 제거로 피로도 해소 */
  line-height: 1.5 !important;
  padding: 0.85rem 1rem !important;
}

#product-recommendations a p,
#res-products-grid a p {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: keep-all !important;
  font-size: 0.85rem !important; /* 13.6px */
  font-weight: 400 !important; /* 추천 사유는 차분한 일반체(400)로 상품명·절감액과 강약 대비 */
  line-height: 1.45 !important;
}

/* 카톡 보관함의 장문 부연 설명 문단 숨김 (버튼만 깔끔하게 노출) */
#receipt-kakao-memo-bridge > p {
  display: none !important;
}

/* 가로 스크롤바 숨김 유틸리티 */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   [SMARTPHONE MOBILE-FIRST DIET OVERHAUL (@media max-width: 767px)]
   "1화면 1초점 (One-Screen One-Focus)" — 스마트폰 글자량·박스 수 70% 압축
   PC(>= 768px) 화면과 모든 DOM ID/테스트 무결성은 100% 그대로 유지
   ========================================================================== */
@media (max-width: 767px) {
  /* 1. 상단 헤더 & 메인 여백 슬림화 */
  header > div {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }
  main {
    padding-top: 0.75rem !important;
    padding-bottom: 1rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  #view-calculators {
    gap: 0.75rem !important;
  }
  #view-calculators > * + * {
    margin-top: 0.75rem !important;
  }

  /* 2. 6대 카테고리 탭: 3열 2줄(3x2) 초간결 알약 버튼 (부제 숨김!) */
  .calc-nav-btn {
    padding: 0.65rem 0.35rem !important;
    border-radius: 0.875rem !important;
    text-align: center !important;
  }
  .calc-nav-btn > div:first-child {
    font-size: 0.95rem !important; /* 15.2px 모바일 3열 최적 크기 */
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
  }
  /* 모바일에서는 카테고리 2번째 줄 부제("1등급 본전" 등)를 숨겨 12줄 -> 6단어로 압축 */
  .calc-nav-btn > div:last-child {
    display: none !important;
  }

  /* 3. 상단 인기 급상승 중복 배너 숨김 (아래 시나리오 칩과 100% 중복 방지) */
  #seasonal-surge-banner {
    display: none !important;
  }

  /* 4. 시나리오 1초 자동입력 칩: 3줄 줄바꿈 금지 -> 깔끔한 1줄 가로 스와이프! */
  #calc-scenario-bar {
    padding: 0.6rem 0.75rem !important;
  }
  #calc-scenario-chips,
  .preset-quick-chips-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.4rem !important;
    padding-bottom: 0.15rem !important;
    scrollbar-width: none !important;
  }
  #calc-scenario-chips::-webkit-scrollbar,
  .preset-quick-chips-row::-webkit-scrollbar {
    display: none !important;
  }
  #calc-scenario-chips button,
  .preset-quick-chips-row a {
    font-size: 0.825rem !important;
    padding: 0.4rem 0.7rem !important;
    flex-shrink: 0 !important;
  }

  /* 5. 입력 폼: 모바일 2열 컴팩트 그리드 (세로 스크롤 길이 50% 단축) */
  #calc-form-title,
  #interactive-calculator-section h3 {
    font-size: 1.2rem !important;
  }
  #calc-form-subtitle {
    display: none !important;
  }
  #calc-inputs-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }
  #calc-inputs-container > * + * {
    margin-top: 0 !important;
  }
  /* 체크박스나 긴 선택창은 모바일에서 2칸 전체 사용 */
  #calc-inputs-container > div.mobile-col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
  #calc-inputs-container label,
  #interactive-calculator-section label {
    font-size: 0.875rem !important; /* 14px 선명한 라벨 */
    margin-bottom: 0.25rem !important;
  }
  #calc-inputs-container input[type="number"],
  #calc-inputs-container select,
  #interactive-calculator-section input[type="number"],
  #interactive-calculator-section select {
    font-size: 1.05rem !important; /* 16.8px (iOS 자동 줌 방지 및 가독성 확보) */
    height: 2.85rem !important; /* 45.6px 컴팩트 터치 영역 */
    padding: 0.4rem 0.65rem !important;
    border-radius: 0.75rem !important;
  }

  /* 6. 좌측 입력폼 하단 중복 브릿지 박스(#input-instant-cta-box) 모바일 숨김
        (모바일에서는 바로 아래 #receipt-card가 이어지므로 중복 노출 완벽 차단!) */
  #input-instant-cta-box {
    display: none !important;
  }

  /* 7. 영수증 결과 카드(#receipt-card): 9개 박스 -> 핵심 3요소만 남기고 싹 다이어트! */
  #receipt-card {
    padding: 1.15rem !important;
    border-radius: 1.25rem !important;
  }
  #result-headline,
  #res-headline {
    font-size: 1.35rem !important; /* 21.6px 모바일 한눈에 들어오는 굵은 결론 */
    line-height: 1.3 !important;
  }

  /* 영수증 메트릭 카드: 세로 3줄 쌓임 -> 가로 3열(또는 2열) 한눈 요약 알약으로 압축! */
  #result-metrics-grid,
  #res-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    margin-bottom: 0.5rem !important;
  }
  #result-metrics-grid.mobile-metrics-4,
  #res-metrics-grid.mobile-metrics-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #result-metrics-grid > a,
  #res-metrics-grid > a {
    padding: 0.65rem 0.5rem !important;
    border-radius: 0.85rem !important;
    text-align: center !important;
  }
  #result-metrics-grid > a > div:nth-child(1),
  #res-metrics-grid > a > div:nth-child(1) {
    font-size: 0.75rem !important; /* 12px 라벨 */
    color: #cbd5e1 !important;
  }
  #result-metrics-grid > a > div:nth-child(2),
  #res-metrics-grid > a > div:nth-child(2) {
    font-size: 1.05rem !important; /* 16.8px 굵은 숫자 */
    margin-top: 0.15rem !important;
  }
  /* 메트릭 카드 하단 3번째 줄 부가 링크("1단계 처방 ↗")는 모바일에서 숨겨 숫자만 깔끔하게 강조 */
  #result-metrics-grid > a > div:nth-child(3),
  #res-metrics-grid > a > div:nth-child(3) {
    display: none !important;
  }

  /* 모바일 영수증 내 부가·중복 박스(손실 게이지, 긴 요약문, 체감가 중복배너, 하단 카톡박스) 과감히 숨김 */
  #result-loss-bar,
  #res-loss-bar,
  #result-summary-text,
  #res-summary,
  #receipt-zero-feel-banner,
  #res-zero-feel-banner,
  #receipt-kakao-memo-bridge,
  #res-kakao-memo-bridge {
    display: none !important;
  }

  /* 영수증 처방 장바구니: 모바일에서는 1순위 핵심 처방 딱 1개만 노출 (2·3순위 중복 카드 숨김) */
  #receipt-action-items > div:nth-child(n+2),
  #res-action-items > div:nth-child(n+2) {
    display: none !important;
  }
  #receipt-action-items-box {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
  }

  /* 8. CPA 혜택 카드: 모바일에서 설명문·서브링크 2개 숨기고 메인 버튼 1개만 깔끔하게 노출 */
  #cpa-desc,
  #cpa-sub-links,
  #res-cpa-coupang-sub,
  #res-cpa-lp-sub {
    display: none !important;
  }

  /* 9. 맞춤 상품 추천 4선: 모바일 1열~2열 가독성 최적화 (노란 절감 배지 & 상품명 온전 노출) */
  #product-recommendations,
  #res-products-grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  #product-recommendations > a,
  #res-products-grid > a {
    padding: 0.9rem !important;
    border-radius: 1rem !important;
  }
  #product-recommendations > a .text-base,
  #res-products-grid > a .text-base {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }
  #product-recommendations a div.w-full.text-center,
  #res-products-grid a div.w-full.text-center {
    font-size: 0.92rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    border-radius: 0.75rem !important;
  }
}