/* ==============================
   챔로드 — Stripe Design System
   ============================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ── Design Tokens ── */
:root {
  --c-primary:        #533afd;
  --c-primary-deep:   #4434d4;
  --c-primary-press:  #2e2b8c;
  --c-primary-soft:   #665efd;
  --c-primary-sub:    #b9b9f9;
  --c-brand-dark:     #1c1e54;
  --c-ink:            #0d253d;
  --c-ink-2:          #273951;
  --c-ink-mute:       #475569; /* 구 #64748d — 가독성 개선으로 한 단계 진하게 */
  --c-canvas:         #ffffff;
  --c-canvas-soft:    #f6f9fc;
  --c-hairline:       #e3e8ee;
  --c-hairline-input: #a8c3de;
  --c-ruby:           #ea2261;

  --shadow-1: rgba(0,55,112,.08) 0 1px 3px;
  --shadow-2: rgba(0,55,112,.08) 0 8px 24px, rgba(0,55,112,.04) 0 2px 6px;
}

/* ── Base ── */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400; /* 300(Light)은 작은 한글이 흐릿하게 렌더되어 400으로 상향 (2026-07-07 가독성 개선) */
  font-feature-settings: "ss01";
  background: var(--c-canvas-soft);
  color: var(--c-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Color mapping: Tailwind blue → Stripe indigo ── */
.bg-blue-700  { background-color: var(--c-primary)      !important; }
.bg-blue-600  { background-color: var(--c-primary-soft)  !important; }
.bg-blue-800  { background-color: var(--c-primary-deep)  !important; }
.bg-blue-500  { background-color: var(--c-primary)       !important; }
.bg-blue-50   { background-color: #ede9ff                !important; }
.bg-blue-100  { background-color: #dcd8ff                !important; }

.hover\:bg-blue-700:hover { background-color: var(--c-primary)      !important; }
.hover\:bg-blue-800:hover { background-color: var(--c-primary-deep)  !important; }
.hover\:bg-blue-100:hover { background-color: #dcd8ff                !important; }
.hover\:bg-blue-50:hover  { background-color: #ede9ff                !important; }

.text-blue-700  { color: var(--c-primary)      !important; }
.text-blue-600  { color: var(--c-primary-soft)  !important; }
.text-blue-800  { color: var(--c-primary-deep)  !important; }
.text-blue-500  { color: var(--c-primary)       !important; }
.text-blue-400  { color: var(--c-primary-sub)   !important; }
.text-blue-200  { color: var(--c-primary-sub)   !important; }
.text-blue-100  { color: #c7c2ff                !important; }
.hover\:text-blue-700:hover { color: var(--c-primary)      !important; }
.hover\:text-blue-600:hover { color: var(--c-primary-soft)  !important; }

.border-blue-700 { border-color: var(--c-primary)      !important; }
.border-blue-600 { border-color: var(--c-primary-soft)  !important; }
.border-blue-500 { border-color: var(--c-primary)       !important; }
.border-blue-200 { border-color: var(--c-primary-sub)   !important; }
.border-blue-100 { border-color: #dcd8ff                !important; }
.hover\:border-blue-300:hover { border-color: var(--c-primary-sub) !important; }
.hover\:border-blue-200:hover { border-color: var(--c-primary-sub) !important; }

.accent-blue-700 { accent-color: var(--c-primary) !important; }
.accent-blue-600 { accent-color: var(--c-primary) !important; }

/* Gradient stops */
.from-blue-700 {
  --tw-gradient-from: var(--c-primary) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(83,58,253,0)) !important;
}
.from-blue-50 {
  --tw-gradient-from: #ede9ff !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(237,233,255,0)) !important;
}
.to-blue-600 { --tw-gradient-to: var(--c-brand-dark) !important; }
.to-blue-500 { --tw-gradient-to: var(--c-brand-dark) !important; }
.to-blue-100 { --tw-gradient-to: #dcd8ff             !important; }

/* Dark slate → brand-dark */
.bg-slate-700 { background-color: var(--c-brand-dark) !important; }
.bg-slate-800 { background-color: var(--c-brand-dark) !important; }

/* Canvas soft */
.bg-slate-50  { background-color: var(--c-canvas-soft) !important; }

/* Shadow overrides */
.shadow-sm { box-shadow: var(--shadow-1) !important; }
.shadow-md { box-shadow: var(--shadow-2) !important; }
.shadow-lg { box-shadow: var(--shadow-2) !important; }

/* ── Pill buttons — solid ── */
a.bg-blue-700, button.bg-blue-700,
a.bg-blue-800, button.bg-blue-800,
a.bg-blue-600, button.bg-blue-600,
a.bg-green-600, button.bg-green-600,
a.bg-slate-700, button.bg-slate-700,
a.bg-slate-800, button.bg-slate-800 {
  border-radius: 9999px !important;
  font-weight: 400;
}

/* Pill buttons — soft fill */
button.bg-blue-50,  a.bg-blue-50,
button.bg-blue-100, a.bg-blue-100,
button.bg-slate-100, a.bg-slate-100,
button.bg-slate-200, a.bg-slate-200,
button.bg-amber-100, a.bg-amber-100,
button.bg-amber-200, a.bg-amber-200 {
  border-radius: 9999px !important;
}

/* Pill buttons — outline */
button.border-slate-300, a.border-slate-300,
button.border-slate-200, a.border-slate-200 {
  border-radius: 9999px !important;
}

/* Tab switcher internal buttons */
div.bg-slate-100 > button { border-radius: 9999px !important; }

/* ── Auth page overrides (.btn-primary / .input-field defined inline) ── */
.btn-primary {
  background: var(--c-primary)   !important;
  border-radius: 9999px           !important;
  font-weight: 400                !important;
}
.btn-primary:hover    { background: var(--c-primary-deep) !important; }
.btn-primary:disabled { background: var(--c-primary-sub)  !important; }
.auth-tab.active {
  color: var(--c-primary)               !important;
  border-bottom-color: var(--c-primary) !important;
}
.input-field {
  border-radius: 6px                     !important;
  border-color: var(--c-hairline-input)  !important;
}
.input-field:focus {
  border-color: var(--c-primary)              !important;
  box-shadow: 0 0 0 3px rgba(83,58,253,.15) !important;
}

/* ── Navbar ── */
.navbar-sticky {
  position: sticky;
  top: 0; z-index: 100;
  background: var(--c-canvas);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-hairline);
  box-shadow: none;
}
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ── Cards ── */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* ── Hero gradient ── */
.hero-gradient {
  background: linear-gradient(
    135deg,
    var(--c-primary-press) 0%,
    var(--c-primary)       50%,
    var(--c-brand-dark)    100%
  );
}

/* ── Progress bar ── */
.progress-bar { transition: width 0.45s ease-in-out; }

/* ── Multi-step form ── */
.form-step { display: none; animation: fadeSlide 0.3s ease; }
.form-step.active { display: block; }
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Step dots ── */
.step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.step-dot.active  { background: var(--c-primary);    color: #fff; }
.step-dot.done    { background: #16a34a;              color: #fff; }
.step-dot.pending { background: var(--c-hairline);   color: var(--c-ink-mute); }
.step-line { flex: 1; height: 2px; }
.step-line.done    { background: #16a34a; }
.step-line.pending { background: var(--c-hairline); }

/* ── Form inputs ── */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-primary)              !important;
  box-shadow: 0 0 0 3px rgba(83,58,253,.15) !important;
}
input[type="number"][class*="pr-14"] { text-align: right; }

/* ── Term tooltips ── */
.term-tip {
  border-bottom: 1px dashed var(--c-hairline-input);
  cursor: help; position: relative; display: inline-block;
}
.term-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--c-ink); color: var(--c-canvas);
  font-size: 13px; font-weight: 400; line-height: 1.5;
  padding: 7px 11px; border-radius: 8px;
  white-space: normal; width: 220px; text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s; z-index: 100;
  box-shadow: var(--shadow-2);
}
.term-tip::before {
  content: '';
  position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--c-ink);
  opacity: 0; transition: opacity 0.15s; z-index: 100;
}
/* 터치 기기에는 hover가 없다 — 탭하면 .tip-open이 붙는다(main.js initGlossary) */
.term-tip:hover::after,
.term-tip:hover::before,
.term-tip:focus-visible::after,
.term-tip:focus-visible::before,
.term-tip.tip-open::after,
.term-tip.tip-open::before { opacity: 1; }
.term-tip.tip-open { background: rgba(83,58,253,.07); border-radius: 3px; }
.term-tip:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 3px; }

/* ── Result cards ── */
.result-high   { border-left: 5px solid #16a34a; }
.result-medium { border-left: 5px solid var(--c-primary); }
.result-low    { border-left: 5px solid var(--c-hairline); }
.badge-high    { background: #dcfce7; color: #15803d; }
.badge-medium  { background: #ede9ff; color: var(--c-primary-deep); }
.badge-low     { background: var(--c-canvas-soft); color: var(--c-ink-mute); }

/* ── Disclaimer box ── */
.disclaimer-box {
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-ink);
  line-height: 1.7;
}

/* ── Checklist ── */
.checklist-item { transition: opacity 0.2s; }
.checklist-item.completed { opacity: 0.5; }
.checklist-item.completed .item-name { text-decoration: line-through; color: var(--c-ink-mute); }
.checklist-item.na { opacity: 0.55; }
.checklist-item.na .item-name { color: var(--c-ink-mute); }

/* ── FAQ accordion ── */
.faq-answer { display: none; animation: fadeSlide 0.2s ease; }
.faq-answer.open { display: block; }
.faq-icon { transition: transform 0.25s; }
.faq-icon.open { transform: rotate(45deg); }

/* ── Pricing featured card ── */
.pricing-featured {
  border: 2px solid var(--c-primary) !important;
  position: relative;
  transform: scale(1.03);
}
@media (max-width: 640px) {
  .pricing-featured { transform: scale(1); }
  .step-label { display: none; }
  .section    { padding: 36px 0; }
  .section-sm { padding: 24px 0; }
  #toast { bottom: 16px; right: 16px; left: 16px; border-radius: 12px; text-align: center; }
  #scroll-top-btn { bottom: 64px; right: 16px; }
}

/* ── Toast ── */
#toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  padding: 12px 20px; border-radius: 9999px;
  color: #fff; font-size: 14px; font-weight: 400;
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateY(0); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-canvas-soft); }
::-webkit-scrollbar-thumb { background: var(--c-primary-sub); border-radius: 3px; }

/* ── Print ── */
@media print {
  .no-print { display: none !important; }
  .navbar-sticky { position: static; }
}

/* ── Comparison table ── */
.compare-table th { background: var(--c-primary); color: #fff; }
.compare-table tr:nth-child(even) { background: var(--c-canvas-soft); }
.compare-table { table-layout: fixed; width: 100%; }
.compare-table th:first-child,
.compare-table td:first-child { width: 60px; word-break: keep-all; }

/* ── Story highlight ── */
.story-highlight { color: var(--c-primary); font-weight: 400; }

/* ── SPA ── */
#p-home { display: block; }

/* ── Section spacing ── */
.section    { padding: 64px 0; }
.section-sm { padding: 40px 0; }

/* ── Footer ── */
.footer-stripe  { background: var(--c-canvas); border-top: 1px solid var(--c-hairline); }
.footer-heading { font-size: 13px; font-weight: 400; color: var(--c-ink); margin-bottom: 12px; }
.footer-link    { color: var(--c-ink-mute); text-decoration: none; font-size: 13px; transition: color 0.15s; }
.footer-link:hover { color: var(--c-ink); }

/* ── Mobile ── */
@media (max-width: 768px) {
  .hero-gradient > div { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  section, .max-w-5xl, .max-w-3xl, .max-w-6xl { max-width: 100%; }
  .compare-table td, .compare-table th { font-size: 13px; padding: 10px 8px; }
  .pricing-featured { transform: scale(1) !important; }
  .text-blue-100 { color: #c7c2ff                   !important; }
  .text-blue-200 { color: var(--c-primary-sub)       !important; }
  .term-tip::after { width: 160px; left: 0; transform: none; }
  .term-tip::before { left: 12px; transform: none; }
  .footer-stripe > div > div:first-child { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

/* ── Scroll-to-top button ── */
#scroll-top-btn {
  position: fixed;
  bottom: 76px; right: 24px; z-index: 9998;
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: var(--c-primary);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(83,58,253,.35);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  pointer-events: none;
}
#scroll-top-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#scroll-top-btn:hover   { background: var(--c-primary-deep); }
#scroll-top-btn svg     { width: 20px; height: 20px; }

/* ── 플로팅 임시저장 버튼 ── */
#temp-save-btn {
  position: fixed;
  bottom: 24px; left: 24px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 9999px;
  background: #fff; color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(83,58,253,.20);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#temp-save-btn:hover  { background: var(--c-primary); color: #fff; box-shadow: 0 6px 18px rgba(83,58,253,.35); }
#temp-save-btn.saved  { background: #16a34a; border-color: #16a34a; color: #fff; }
#temp-save-btn .ts-ic { font-size: 14px; line-height: 1; }
@media (max-width: 640px) {
  #temp-save-btn { bottom: 16px; left: 16px; padding: 9px 13px; font-size: 12px; }
}

/* ── 3D 버튼 효과 ── */
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 7px 0 rgba(0,0,0,0.25), 0 0 0 0 rgba(255,255,255,0.5); }
  50%       { box-shadow: 0 7px 0 rgba(0,0,0,0.25), 0 0 0 8px rgba(255,255,255,0); }
}

.btn-3d-white {
  box-shadow: 0 7px 0 rgba(0,0,0,0.25) !important;
  transition: box-shadow 0.1s ease, transform 0.1s ease !important;
  animation: btn-pulse 2s ease-in-out infinite;
}
.btn-3d-white:hover {
  box-shadow: 0 4px 0 rgba(0,0,0,0.25) !important;
  transform: translateY(3px) scale(1.03) !important;
  animation: none !important;
}
.btn-3d-white:active {
  box-shadow: none !important;
  transform: translateY(7px) scale(0.98) !important;
  animation: none !important;
}

.btn-3d-primary {
  box-shadow: 0 7px 0 #2a1aa8 !important;
  transition: box-shadow 0.1s ease, transform 0.1s ease !important;
}
.btn-3d-primary:hover {
  box-shadow: 0 4px 0 #2a1aa8 !important;
  transform: translateY(3px) scale(1.02) !important;
}
.btn-3d-primary:active {
  box-shadow: none !important;
  transform: translateY(7px) scale(0.98) !important;
}

/* ══════════════════════════════════════════════
   가독성 개선 (2026-07-07)
   — 읽을 텍스트가 많은 사이트 특성상, 연한 회색과
     11~12px 글씨가 피로하다는 사용자 피드백 반영.
   ══════════════════════════════════════════════ */

/* 회색 텍스트를 한 단계씩 진하게 — 흰 배경 기준 WCAG AA 이상 확보 */
.text-slate-400 { color: #64748b !important; } /* 기존 #94a3b8 (대비 2.9:1 미달) → 4.8:1 */
.text-slate-500 { color: #475569 !important; } /* 기존 #64748b → 7.1:1 */

/* 다크 배경(네이비 히어로·다크 카드) 안에서는 밝은 회색 유지 — 어두운 바탕에선 진하게 하면 오히려 안 보임 */
.bg-slate-700 .text-slate-400, .bg-slate-800 .text-slate-400, .hero-gradient .text-slate-400,
.bg-slate-700 .text-slate-500, .bg-slate-800 .text-slate-500, .hero-gradient .text-slate-500 {
  color: #b6c2d4 !important;
}

/* 최소 글자 크기 상향: text-xs 12px → 13px, text-[11px] 11px → 12px */
.text-xs { font-size: 0.8125rem !important; line-height: 1.25rem !important; }
.text-\[11px\] { font-size: 0.75rem !important; }

/* text-xs에 행간이 명시된 곳은 그 값을 유지 */
.text-xs.leading-relaxed { line-height: 1.625 !important; }
.text-xs.leading-loose   { line-height: 2 !important; }
.text-xs.leading-normal  { line-height: 1.5 !important; }
.text-xs.leading-snug    { line-height: 1.375 !important; }