/* ============================================================
   page-consultation.css — consultation page: step-flow timeline,
   nameplate glossary, flow list, accordion FAQ
   ============================================================ */

:root {
  --cta-primary: #1E3A8A;
  --cta-secondary: #F1F5F9;
  --consult-primary: #1E3A8A;
  --consult-secondary: #0284C7;
  --consult-bg: #F1F5F9;
  --consult-radius-sm: 10px;
  --consult-radius-md: 20px;
  --consult-radius-lg: 36px;
  --consult-divider: 3px double #93C5FD;
}

body { font-family: 'Nanum Gothic', sans-serif; font-weight: 400; background: var(--consult-bg); color: #0F172A; }
h1, h2, h3 { font-family: 'Nanum Gothic', sans-serif; font-weight: 800; letter-spacing: -.01em; color: var(--consult-primary); }

main > section,
main > .photo-row { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
main > section + section,
main > section + .photo-row,
main > .photo-row + section { border-top: var(--consult-divider); }

/* ---- intro ---- */
.consult-lead { text-align: center; padding-top: 64px; }
.consult-lead h1 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); margin-bottom: 18px; }
.consult-lead p { color: #334155; font-size: 1.02rem; max-width: 660px; margin: 0 auto; }

/* ---- section intros ---- */
.timeline-section h2,
.nameplate-section h2,
.flow-section h2,
.faq-section h2 { font-size: 1.4rem; margin-bottom: 12px; }
.section-intro { color: #475569; margin-bottom: 24px; }

/* ---- 4-step timeline (numeral badges) ---- */
.prep-timeline { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.prep-step {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid #E2E8F0; border-radius: var(--consult-radius-md);
  padding: 20px; transition: transform .15s ease, box-shadow .15s ease;
}
.prep-step:hover { transform: translateX(4px); box-shadow: 0 10px 22px -14px rgba(30,58,138,.35); }
.step-badge {
  flex: none; width: 52px; height: 52px; border-radius: var(--consult-radius-sm);
  background: var(--consult-primary); color: #E0F2FE; font-weight: 800; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.step-body h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--consult-secondary); }
.step-body p { color: #334155; font-size: .94rem; }

/* ---- nameplate glossary (dl) ---- */
.spec-glossary { background: #fff; border-radius: var(--consult-radius-md); border: 1px solid #E2E8F0; padding: 8px 24px; }
.spec-glossary dt {
  color: var(--consult-primary); font-size: 1rem; padding-top: 16px;
  border-top: 1px dashed #E2E8F0;
}
.spec-glossary dt:first-of-type { border-top: none; }
.spec-glossary dd { font-size: .93rem; }

/* ---- flow list ---- */
.flow-list { list-style: none; counter-reset: flow; display: flex; flex-direction: column; gap: 16px; }
.flow-list li {
  position: relative; background: #fff; border-left: 4px solid var(--consult-secondary);
  border-radius: var(--consult-radius-sm); padding: 16px 18px 16px 52px;
}
.flow-list li::before {
  counter-increment: flow; content: counter(flow);
  position: absolute; left: 14px; top: 16px; font-weight: 800; color: var(--consult-secondary);
}
.flow-list h3 { font-size: 1rem; margin-bottom: 4px; }
.flow-list p { color: #334155; font-size: .92rem; }

/* ---- accordion FAQ ---- */
.faq-item {
  background: #fff; border: 1px solid #E2E8F0; border-radius: var(--consult-radius-sm);
  padding: 14px 18px; margin-bottom: 12px;
}
.faq-item summary {
  font-weight: 700; color: var(--consult-primary); position: relative; padding-right: 28px;
  transition: color .15s ease;
}
.faq-item summary:hover { color: var(--consult-secondary); }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0; top: -2px; font-size: 1.2rem; color: var(--consult-secondary);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: #334155; font-size: .93rem; margin-top: 10px; }

/* ---- photo row spacing override for this page ---- */
main > .photo-row { padding: 40px 20px; }

/* ---- consultation photos: 1:1 crop (base.css padding-trick), centered pair ---- */
.cons-photo-row { align-items: flex-start; }
.cons-photo-row figure { width: 220px; max-width: 42vw; border-radius: var(--home-radius-md, 14px); }

@media (max-width: 480px) {
  main > section, main > .photo-row { padding: 36px 16px; }
  .prep-step { flex-direction: column; align-items: flex-start; }
}