/* ============================================================
   page-service-detail.css — 배기팬 교체 공사 서비스 상세
   Layout: left sticky ToC + right long-form content.
   Signature: 팬 형식별 스펙 비교표. Divider: dashed. Animation: hover only.
   ============================================================ */

:root {
  --cta-primary: #9A3412;
  --cta-secondary: #FAF7F2;
  --sd-ink: #1C1917;
  --sd-rust: #9A3412;
  --sd-bg: #FAF7F2;
  --sd-line: #E7DFD3;
  --sd-radius-sm: 3px;
  --sd-radius-md: 14px;
  --sd-radius-lg: 26px;
}

body { font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 400; background: var(--sd-bg); color: var(--sd-ink); }
h1, h2, h3 { font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 700; letter-spacing: -.01em; color: var(--sd-ink); }

/* ---- hero ---- */
.sd-hero { max-width: 880px; margin: 0 auto; padding: 60px 24px 20px; text-align: center; }
.sd-hero h1 { font-size: 2rem; margin-bottom: 14px; }
.sd-hero p { color: #57534E; font-size: 1.02rem; }

/* ---- layout: sticky ToC + content ---- */
.sd-layout {
  max-width: 1180px; margin: 0 auto; padding: 30px 24px 10px;
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px;
  align-items: start;
}

.sd-toc {
  position: sticky; top: 84px;
  background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-radius-md);
  padding: 20px 18px;
}
.sd-toc__label { font-weight: 700; color: var(--sd-rust); font-size: .82rem; letter-spacing: .06em; margin-bottom: 12px; }
.sd-toc ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sd-toc a { display: block; font-size: .92rem; color: #57534E; padding: 4px 0 4px 12px; border-left: 2px solid var(--sd-line); transition: border-color .15s, color .15s; }
.sd-toc a:hover { color: var(--sd-rust); border-left-color: var(--sd-rust); }

.sd-content { min-width: 0; }

.sd-section {
  padding: 26px 0 34px;
  border-bottom: 1px dashed var(--sd-line);
}
.sd-section:last-child { border-bottom: none; }
.sd-section h2 {
  font-size: 1.35rem; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 3px solid var(--sd-rust); display: inline-block;
}
.sd-section h3 { font-size: 1.04rem; color: var(--sd-rust); margin-bottom: 6px; }
.sd-section > p { margin-bottom: 14px; color: #3F3A34; }

/* ---- spec table (signature centerpiece) ---- */
.sd-table-wrap { overflow-x: auto; border-radius: var(--sd-radius-md); border: 1px solid var(--sd-line); }
.sd-table { min-width: 640px; font-size: .94rem; }
.sd-table th, .sd-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--sd-line); }
.sd-table thead th { background: var(--sd-rust); color: #fff; font-weight: 700; }
.sd-table tbody th[scope="row"] { color: var(--sd-rust); font-weight: 700; white-space: nowrap; }
.sd-table tbody tr { background: #fff; transition: background-color .15s, transform .15s; }
.sd-table tbody tr:nth-child(even) { background: #FBF3EA; }
.sd-table tbody tr:hover { background: #F3E3D3; transform: translateY(-2px); }
.sd-table tbody tr:last-child td, .sd-table tbody tr:last-child th { border-bottom: none; }
.sd-table-summary { margin-top: 12px; font-size: .92rem; color: #57534E; }

/* ---- glossary dl ---- */
.sd-dl dt {
  font-weight: 700; color: var(--sd-rust); background: #fff;
  border: 1px solid var(--sd-line); border-radius: var(--sd-radius-sm);
  display: inline-block; padding: 5px 12px; margin-top: 16px; margin-bottom: 8px;
  transition: transform .15s, box-shadow .15s;
}
.sd-dl dt:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(154,52,18,.15); }
.sd-dl dd { color: #3F3A34; margin-bottom: 4px; padding-left: 2px; }

/* ---- 8-step timeline (no numbered badges on this page) ---- */
.sd-timeline { list-style: none; counter-reset: sd-step; display: flex; flex-direction: column; gap: 0; }
.sd-timeline li {
  position: relative; padding: 16px 0 16px 26px; border-left: 2px solid var(--sd-line);
  transition: border-color .15s, background-color .15s;
}
.sd-timeline li::before {
  content: "\2192"; position: absolute; left: -11px; top: 18px;
  background: var(--sd-bg); color: var(--sd-rust); font-weight: 700; font-size: 1rem;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
}
.sd-timeline li:hover { border-left-color: var(--sd-rust); background: #FBF3EA; border-radius: 0 var(--sd-radius-sm) var(--sd-radius-sm) 0; }
.sd-timeline li p { color: #3F3A34; font-size: .95rem; }

/* ---- safety list ---- */
.sd-safety { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sd-safety li {
  background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-radius-lg);
  padding: 16px 20px; color: #3F3A34; font-size: .95rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.sd-safety li:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28,25,23,.08); border-color: var(--sd-rust); }
.sd-safety strong { color: var(--sd-rust); }

/* ---- CTA theming (structure from base.css) ---- */
.cta { background: #fff; border-top: 1px dashed var(--sd-line); }
.cta-lead { color: var(--sd-ink); }

/* ---- page list grid (service-detail sub pages, 4 per row) ---- */
.page-card-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0; }
.page-card {
  display: block; padding: 18px 20px; background: #fff; border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-md); font-weight: 700; color: var(--sd-rust);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.page-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(154,52,18,.15); border-color: var(--sd-rust); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .sd-layout { grid-template-columns: 1fr; }
  .sd-toc { position: static; }
  .sd-toc ul { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  .sd-toc a { white-space: nowrap; border-left: none; border-bottom: 2px solid var(--sd-line); padding: 4px 10px; }
  .page-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .sd-hero h1 { font-size: 1.55rem; }
  .sd-section h2 { font-size: 1.15rem; }
  .page-card-grid { grid-template-columns: 1fr; }
}