/* ============================================================
   page-eonyang-sirocco-fan.css
   언양 시로코팬 교체 — 불고기 특구 식당가 + 근교 공장지대 안내 페이지
   Title: Do Hyeon / Body: Nanum Gothic 400·700
   배경: 따뜻한 앰버 틴트(#FFFBEB) — 그을음/기름 환경을 상징하는 톤
   Layout signature: 점선 디바이더(석쇠 선을 연상시키는 짧은 대시 반복)
   ============================================================ */

:root {
  --cta-primary: #A16207;
  --cta-secondary: #FFFBEB;
  --eon-ink: #451A03;
  --eon-sub: #92400E;
  --eon-line: #FDE68A;
  --eon-card-bg: #FFFFFF;
}

body { font-family: 'Nanum Gothic', sans-serif; font-weight: 400; background: #FFFBEB; color: var(--eon-ink); }
h1, h2, h3 { font-family: 'Do Hyeon', sans-serif; font-weight: 400; color: var(--eon-ink); letter-spacing: -.01em; }

/* ---- signature divider: short dash repeat, evokes grill lines ---- */
.eon-divider {
  max-width: 1080px; margin: 0 auto; height: 10px;
  background-image: repeating-linear-gradient(90deg, var(--eon-sub) 0 14px, transparent 14px 26px);
  opacity: .35;
}

/* ---- hero ---- */
.eon-hero { padding: 56px 20px 40px; }
.eon-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.eon-hero-inner h1 { font-size: clamp(1.9rem, 5.4vw, 2.6rem); margin-bottom: 22px; }
.eon-hero-inner p { line-height: 1.9; font-size: 1rem; color: var(--eon-ink); }

/* ---- band shell ---- */
.eon-band { padding: 48px 20px; }
.eon-band--alt { background: #FEF3C7; }
.eon-band-inner { max-width: 1080px; margin: 0 auto; }
.eon-band h2 { font-size: clamp(1.3rem, 3vw, 1.65rem); margin-bottom: 16px; line-height: 1.5; }
.eon-lead { color: var(--eon-sub); line-height: 1.85; margin-bottom: 28px; max-width: 760px; }
.eon-band > .eon-band-inner > p { line-height: 1.9; }

/* ---- checklist cards ---- */
.eon-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.eon-check-card {
  background: var(--eon-card-bg); border: 1px solid var(--eon-line);
  border-radius: 16px; padding: 22px 20px;
}
.eon-check-card svg { margin-bottom: 12px; }
.eon-check-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.eon-check-card p { font-size: .92rem; line-height: 1.75; color: var(--eon-sub); }

/* ---- scenario case cards ---- */
.eon-case-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.eon-case-card {
  background: var(--eon-card-bg); border-left: 4px solid var(--cta-primary);
  border-radius: 4px 16px 16px 4px; padding: 22px 22px;
}
.eon-case-card h3 { font-size: 1.05rem; margin-bottom: 10px; color: var(--eon-ink); }
.eon-case-card p { font-size: .92rem; line-height: 1.75; color: var(--eon-sub); }

/* ---- spec comparison table ---- */
.eon-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--eon-line); }
.eon-table { min-width: 560px; background: var(--eon-card-bg); }
.eon-table th, .eon-table td { padding: 13px 16px; text-align: left; font-size: .92rem; border-bottom: 1px solid var(--eon-line); }
.eon-table thead th { background: #FEF3C7; color: var(--eon-ink); font-weight: 700; }
.eon-table tbody th { font-weight: 700; color: var(--eon-ink); white-space: nowrap; }
.eon-table tbody td { color: var(--eon-sub); }
.eon-table tbody tr:last-child th, .eon-table tbody tr:last-child td { border-bottom: none; }

/* ---- step list ---- */
.eon-step-list { list-style: none; counter-reset: eon-step; display: flex; flex-direction: column; gap: 14px; }
.eon-step-list li {
  counter-increment: eon-step; position: relative; padding: 14px 20px 14px 56px;
  background: var(--eon-card-bg); border: 1px solid var(--eon-line); border-radius: 12px;
  font-size: .95rem; line-height: 1.7;
}
.eon-step-list li::before {
  content: counter(eon-step); position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--cta-primary); color: #fff;
  font-family: 'Do Hyeon', sans-serif; font-size: .9rem; display: flex; align-items: center; justify-content: center;
}

/* ---- safety list ---- */
.eon-safety-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.eon-safety-list li {
  padding: 12px 18px; border-radius: 10px; background: var(--eon-card-bg);
  border: 1px solid var(--eon-line); font-size: .93rem; line-height: 1.7;
}

/* ---- misconception accordion ---- */
.eon-faq-list { display: flex; flex-direction: column; }
.eon-faq details { border-top: 1px solid var(--eon-line); padding: 4px 0; }
.eon-faq details:last-child { border-bottom: 1px solid var(--eon-line); }
.eon-faq summary { padding: 16px 30px 16px 0; font-weight: 700; color: var(--eon-ink); font-size: 1rem; position: relative; }
.eon-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; color: var(--cta-primary); font-weight: 700;
}
.eon-faq details[open] summary::after { content: "\2212"; }
.eon-faq details p { padding: 0 0 18px; color: var(--eon-sub); line-height: 1.85; font-size: .93rem; }

/* ---- exactly one animation type on this page: CSS-only scroll reveal ---- */
.eon-hero-inner, .eon-check-card, .eon-case-card, .eon-table-wrap, .eon-step-list li, .eon-safety-list li, .eon-faq details {
  animation: eon-reveal .5s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}
@keyframes eon-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eon-hero-inner, .eon-check-card, .eon-case-card, .eon-table-wrap, .eon-step-list li, .eon-safety-list li, .eon-faq details { animation: none; }
}

@media (max-width: 480px) {
  .eon-hero { padding: 44px 16px 32px; }
  .eon-band { padding: 40px 16px; }
  .eon-check-card, .eon-case-card { padding: 18px 16px; }
}