/* guide.css — 청정배관케어 "기술정보"(가이드) 페이지 공용 스타일
   /guide/*  페이지에서 <link rel="stylesheet" href="../../css/guide.css"> 로 로드.
   ※ Tailwind 유틸리티·상단 드롭다운(.tech-*)은 styles.css, @font-face·base(html/body)는 각 페이지 인라인. */

/* ===== 애니메이션 (공용) ===== */
@keyframes call-ripple { 0% { box-shadow: 0 0 0 0 currentColor; opacity: .4; } 100% { box-shadow: 0 0 0 16px currentColor; opacity: 0; } }
.animate-call-ripple { animation: call-ripple 1.6s ease-out infinite; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.animate-marquee-left { animation: marquee-left 120s linear infinite; }
@keyframes cta-bg-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.animate-cta-bg { background: linear-gradient(90deg, #301F87, #122360); background-size: 400% 400%; animation: cta-bg-shift 2.4s ease infinite; }

/* 스크롤 페이드업 (index.html과 동일 — aos.css 인라인화) */
[data-aos]{opacity:0;transform:translate3d(0,100px,0);transition-property:opacity,transform;transition-duration:.8s;transition-timing-function:ease;transition-delay:0}
[data-aos].aos-animate{opacity:1;transform:translateZ(0);transition-delay:.1s}

/* ===== 가이드 본문(article) 전용 스코프 스타일 ===== */
#guide { --accent: #162556; --blue: #1e3a8a; }
#guide .lead { font-size: 1.05rem; line-height: 1.75; color: #334155; }
#guide h2 {
  scroll-margin-top: 7rem; margin: 0 0 14px; padding-left: 14px;
  border-left: 5px solid var(--blue); font-size: 1.5rem; font-weight: 800;
  line-height: 1.3; color: #0f172a; letter-spacing: -0.02em;
}
/* H3 = 답변 리드(첫 문장, 짧은 결론) */
#guide h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; color: #0f172a; line-height: 1.5; }
/* H4 = 하위 소제목(장비·사례 등) */
#guide h4 { margin: 22px 0 8px; font-size: 1.08rem; font-weight: 700; color: #1e3a8a; }
#guide p { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.75; color: #3f3f46; }
#guide section { padding: 32px 28px; margin-bottom: 16px; border-radius: 18px; border: 1px solid #e2e8f0; transition: opacity .8s ease, transform .8s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, translate .2s ease; }
#guide section:nth-of-type(odd) { background: #eff6ff; border-color: #93c5fd; }
#guide section:nth-of-type(even) { background: #fafafa; border-color: #cbd5e1; }
/* hover: 테두리 강조(B) + 살짝 떠오름(translate — transform 미사용으로 페이드업과 충돌 없음) */
#guide section:hover { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.25), 0 12px 24px rgba(2,32,89,.12); translate: 0 -2px; }
@media (max-width: 640px) { #guide section { padding: 24px 18px; } }
#guide strong { color: #0f172a; font-weight: 700; }

/* 히어로 요약 박스(#guide 밖이라 id로 직접 타겟) */
#guide-summary { border: 1px solid #bae6fd; background: #f0f9ff; border-radius: 16px; padding: 20px 22px; }
#guide-summary p { margin: 0; font-size: 1.05rem; line-height: 1.8; color: #1e293b; }
#guide-summary p + p { margin-top: 12px; }
#guide-summary h3 { margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; color: #0f172a; line-height: 1.5; }

/* 표 */
#guide .tbl-wrap { overflow-x: auto; margin: 6px 0 16px; -webkit-overflow-scrolling: touch; }
#guide table { width: 100%; border-collapse: collapse; font-size: 0.98rem; min-width: 460px; background: #fff; border-radius: 10px; overflow: hidden; }
#guide thead th { background: var(--accent); color: #fff; font-weight: 700; text-align: left; padding: 12px 14px; white-space: nowrap; }
#guide tbody td { border-bottom: 1px solid #e5e7eb; padding: 12px 14px; vertical-align: top; color: #3f3f46; }
#guide tbody tr:nth-child(even) { background: #f8fafc; }
#guide td strong { color: #1e3a8a; }

/* HowTo 단계 */
#guide ol.howto { list-style: none; counter-reset: step; margin: 6px 0 16px; padding: 0; }
#guide ol.howto > li {
  counter-increment: step; position: relative; padding: 14px 16px 14px 58px;
  margin-bottom: 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
  font-size: 1.0rem; line-height: 1.65; color: #3f3f46;
}
#guide ol.howto > li::before {
  content: counter(step); position: absolute; left: 14px; top: 14px;
  width: 30px; height: 30px; border-radius: 50%; background: #1e3a8a; color: #fff;
  font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center;
}
#guide ul.plain { margin: 6px 0 16px; padding-left: 20px; }
#guide ul.plain li { margin-bottom: 8px; font-size: 1.0rem; line-height: 1.7; color: #3f3f46; }

/* 경고 박스 */
#guide .warn { border: 1px solid #fecaca; background: #fef2f2; border-radius: 12px; padding: 16px 18px; margin: 6px 0 16px; }
#guide .warn h4 { margin-top: 0; color: #b91c1c; }
#guide .warn ul { margin: 0; padding-left: 20px; }
#guide .warn li { margin-bottom: 6px; color: #7f1d1d; line-height: 1.6; }

/* 사례 카드 */
#guide .case { border: 1px solid #e2e8f0; border-top: 3px solid #1e3a8a; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; background: #fff; }
#guide .case h4 { margin-top: 0; }
#guide .case dl { display: grid; grid-template-columns: 68px 1fr; gap: 8px 12px; margin: 0; }
#guide .case dt { font-weight: 700; color: #1e3a8a; font-size: 0.95rem; }
#guide .case dd { margin: 0; color: #3f3f46; line-height: 1.6; font-size: 0.98rem; }

/* 목차 */
#guide-toc { border: 1px solid #e2e8f0; background: #fafafa; border-radius: 16px; padding: 18px 22px; margin-top: 28px; margin-bottom: 44px; }
#guide-toc p.toc-title { margin: 0 0 14px; padding-left: 14px; border-left: 5px solid #1e3a8a; font-weight: 800; color: #0f172a; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.02em; }
#guide-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
#guide-toc li { margin-bottom: 7px; break-inside: avoid; }
#guide-toc a { color: #1e3a8a; text-decoration: none; font-size: 0.97rem; }
#guide-toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { #guide-toc ol { columns: 1; } #guide h2, #guide-toc p.toc-title { font-size: 1.32rem; } }

/* 지역 링크 그리드 */
#region-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 16px; }
@media (min-width: 640px) { #region-grid { grid-template-columns: repeat(4, 1fr); } }
#region-grid a { display: block; text-align: center; padding: 11px 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #1e3a8a; font-weight: 700; font-size: 0.92rem; text-decoration: none; transition: background .15s; }
#region-grid a:hover { background: #eff6ff; }

/* FAQ (홈 #faq-section 스타일 이식) */
#faq-section { --faq-accent: #1a6fb5; }
#faq-section .faq-item { border-bottom: 1px solid #eee; }
#faq-section .faq-item:last-child { border-bottom: none; }
#faq-section .faq-item > summary { list-style: none; cursor: pointer; padding: 16px 4px; font-weight: 600; font-size: 1.05rem; user-select: none; display: flex; gap: 8px; }
#faq-section .faq-item > summary::-webkit-details-marker { display: none; }
#faq-section .faq-item > summary::before { content: "Q. "; color: var(--faq-accent); font-weight: 700; }
#faq-section .faq-list { border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; }
#faq-section .faq-item[open] > summary { background: #f7f9fb; }
#faq-section .faq-item > p { margin: 0; padding: 0 18px 16px 40px; font-size: 1.0rem; line-height: 1.75; color: #444; }