/* ==========================================================================
   시스템난방 · 난방배관수리 — Premium Utilitarian Minimalism & Editorial UI
   (배경색은 사용자 지침에 따라 웜 본/오프화이트 대신 뉴트럴 화이트/그레이로 조정)
   ========================================================================== */
@font-face{
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-display: swap;
}
@font-face{
  font-family: 'Instrument Serif';
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/instrument-serif@latest/latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root{
  /* Canvas / surfaces — 뉴트럴(베이지 아님) */
  --mu-bg:            #FFFFFF;
  --mu-surface:       #F7F7F8;
  --mu-surface-alt:   #F1F1F2;

  /* Structural borders */
  --mu-border:        #EAEAEA;

  /* Text */
  --mu-text:          #111111;
  --mu-text-sub:      #2F3437;
  --mu-text-muted:    #787774;

  /* Primary CTA (solid near-black) */
  --mu-ink:           #111111;
  --mu-ink-hover:     #333333;

  /* Copper — 업종(배관) 유래 액센트, 소량만 사용 */
  --mu-copper:        #B5651D;

  /* Pale accent pastels (tags/badges) */
  --mu-pale-red:      #FDEBEC; --mu-pale-red-text:   #9F2F2D;
  --mu-pale-blue:     #E1F3FE; --mu-pale-blue-text:  #1F6C9F;
  --mu-pale-green:    #EDF3EC; --mu-pale-green-text: #346538;
  --mu-pale-yellow:   #FBF3DB; --mu-pale-yellow-text:#956400;

  --mu-font-serif: 'Instrument Serif', 'Pretendard', serif;
  --mu-font-sans:  'Pretendard', -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;

  --mu-fs-h1:   clamp(2rem, 4.6vw, 3rem);
  --mu-fs-h2:   clamp(1.5rem, 2.8vw, 2rem);
  --mu-fs-h3:   clamp(1.05rem, 1.6vw, 1.2rem);
  --mu-fs-body: 19px;

  --mu-gutter:   clamp(20px, 4vw, 40px);
  --mu-sec-pad:  clamp(72px, 9vw, 128px);
  --mu-radius:   10px;
  --mu-radius-sm:6px;
  --mu-ease:     cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--mu-font-sans);
  font-size: var(--mu-fs-body);
  line-height: 1.6;
  color: var(--mu-text-sub);
  background: var(--mu-bg);
}
body, p, h1, h2, h3, li, td, th, a, span, div, button, summary {
  word-break: keep-all; overflow-wrap: break-word;
}
h1,h2{ font-family: var(--mu-font-serif); font-weight: 400; margin: 0 0 .5em; letter-spacing:-0.02em; line-height:1.15; color: var(--mu-text); }
h3{ font-family: var(--mu-font-sans); font-weight: 700; margin: 0 0 .5em; color: var(--mu-text); }
h1{ font-size: var(--mu-fs-h1); }
h2{ font-size: var(--mu-fs-h2); }
h3{ font-size: var(--mu-fs-h3); }
p{ margin: 0 0 1em; max-width: 68ch; }
a{ color: var(--mu-text); }
img{ max-width:100%; height:auto; display:block; }

/* ---------- header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--mu-gutter);
  border-bottom: 1px solid var(--mu-border);
  position: sticky; top:0; background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  z-index:50;
}
.hdr-logo{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--mu-text); }
.hdr-logo__icon{ flex-shrink:0; }
.hdr-logo__text{ display:flex; flex-direction:column; min-width:0; }
.hdr-logo__name{ font-family: var(--mu-font-serif); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1.15rem; }
.hdr-logo__tagline{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:400; color: var(--mu-text-muted); font-size:.8rem; }
@media (max-width:480px){ .hdr-logo__tagline{ display:none; } }
.hdr-nav a{
  display:inline-block; padding:10px 20px; background: var(--mu-ink); color:#fff;
  text-decoration:none; border-radius: var(--mu-radius-sm); font-weight:600; font-size:.9rem;
  transition: background .2s var(--mu-ease);
}
.hdr-nav a:hover{ background: var(--mu-ink-hover); }

/* ---------- buttons ---------- */
.btn-primary{
  display:inline-block; padding:14px 28px;
  background: var(--mu-ink); color:#fff; text-decoration:none;
  border-radius: var(--mu-radius-sm); font-weight:600;
  transition: background .2s var(--mu-ease), transform .15s var(--mu-ease);
}
.btn-primary:hover{ background: var(--mu-ink-hover); }
.btn-primary:active{ transform: scale(0.98); }
.btn-primary--large{ font-size:1.05rem; padding:16px 36px; }

/* ---------- section base ---------- */
main > article > section, main > section{ padding: var(--mu-sec-pad) var(--mu-gutter); max-width:960px; margin:0 auto; }

/* ---------- home hero ---------- */
.home-hero{ text-align:left; max-width:960px; }
.home-hero__intro{ max-width:60ch; margin:0 0 28px; font-size:1.05rem; }

.home-trust ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.home-trust li{
  display:inline-block; background: var(--mu-pale-blue); color: var(--mu-pale-blue-text);
  border-radius: 9999px; padding:8px 18px; font-weight:600; font-size:.8rem;
  letter-spacing:.02em;
}
.home-trust li:nth-child(2){ background: var(--mu-pale-green); color: var(--mu-pale-green-text); }
.home-trust li:nth-child(3){ background: var(--mu-pale-yellow); color: var(--mu-pale-yellow-text); }

.home-gallery__grid, .svc-gallery__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px;
}
.home-gallery__grid img, .svc-gallery__grid img{ aspect-ratio:4/3; object-fit:cover; border-radius: var(--mu-radius); }

.home-services__group{ margin-bottom:40px; }
.home-services__group h3{ padding-bottom:8px; border-bottom:1px solid var(--mu-border); }
.home-services__group ol{ list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; }
.home-services__group li a{
  display:block; padding:24px; border:1px solid var(--mu-border); border-radius: var(--mu-radius);
  text-decoration:none; color:var(--mu-text); background: var(--mu-surface);
  transition: box-shadow .2s var(--mu-ease), transform .2s var(--mu-ease);
}
.home-services__group li strong{ display:block; font-family:var(--mu-font-serif); font-size:1.1rem; margin-bottom:6px; }
.home-services__group li span{ color: var(--mu-text-muted); font-size:.88rem; }

.home-bottom-cta{ text-align:center; }
.home-bottom-cta p{ color: var(--mu-text-muted); margin-top:20px; }

/* ---------- FAQ (accordion, no box, +/- toggle) ---------- */
.svc-faq__item, .home-faq details{
  border-bottom:1px solid var(--mu-border); padding:18px 0;
}
.svc-faq__item summary, .home-faq summary{
  cursor:pointer; font-weight:600; font-family: var(--mu-font-sans); list-style:none;
  display:flex; align-items:center; justify-content:space-between; color: var(--mu-text);
}
.svc-faq__item summary::-webkit-details-marker, .home-faq summary::-webkit-details-marker{ display:none; }
.svc-faq__item summary::after, .home-faq summary::after{
  content:"+"; font-family: var(--mu-font-sans); font-size:1.2rem; color: var(--mu-text-muted); flex-shrink:0; margin-left:12px;
}
.svc-faq__item[open] summary::after, .home-faq details[open] summary::after{ content:"−"; }
.svc-faq__item p, .home-faq p{ margin-top:10px; color: var(--mu-text-muted); }

/* ---------- symptom table (진단 패널) ---------- */
.svc-symptom-table table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.svc-symptom-table th, .svc-symptom-table td{ padding:14px; border-bottom:1px solid var(--mu-border); text-align:left; }
.svc-symptom-table th{ font-family: var(--mu-font-sans); font-weight:700; color: var(--mu-text-muted); font-size:.78rem; text-transform:none; }
.svc-symptom-table td:first-child{ font-weight:600; }
.svc-symptom-table td a{ color: var(--mu-pale-blue-text); text-decoration:underline; }

/* ---------- service page ---------- */
.svc-hero{ text-align:left; }
.svc-hero__img{ width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:24px; border-radius: var(--mu-radius); }
.svc-hero__actions{ display:flex; align-items:center; gap:20px; margin-top:20px; }
.svc-hero__home-link{ color: var(--mu-text-muted); text-decoration:none; font-size:.9rem; }

.svc-info__block{ margin-bottom:28px; }

.svc-process__list{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; }
.svc-process__item{ border:1px solid var(--mu-border); border-radius: var(--mu-radius); padding:24px; background: var(--mu-surface); }
.svc-process__num{ font-family: var(--mu-font-serif); font-size:1.7rem; color: var(--mu-copper); display:block; margin-bottom:8px; }

.svc-checklist ul{ padding-left:1.2em; }
.svc-checklist li{ margin-bottom:8px; }

.svc-cta-mid{ background: var(--mu-surface); text-align:center; border-radius: var(--mu-radius); max-width:960px; }

.svc-related__list{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; }
.svc-related__list a{ display:block; padding:18px; border:1px solid var(--mu-border); border-radius: var(--mu-radius); text-decoration:none; color:var(--mu-text); background: var(--mu-surface); }
.svc-related__list span{ display:block; color: var(--mu-text-muted); font-size:.85rem; margin-top:6px; }

.svc-bottom-cta{ text-align:center; }
.dp-back-main{ margin-top:24px; }
.dp-back-main a{ color: var(--mu-text-muted); text-decoration:none; }

/* ---------- contact page ---------- */
.contact-intro{ font-size:1.05rem; max-width:60ch; }
.contact-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; max-width:960px; padding:0; margin:0 0 40px; }
.contact-card{
  display:block; padding:32px 28px; border:1px solid var(--mu-border); border-radius: var(--mu-radius);
  text-decoration:none; color: var(--mu-text); min-height:160px; background: var(--mu-surface);
  transition: box-shadow .2s var(--mu-ease);
}
.contact-card:hover{ box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.contact-card strong{ display:block; font-family: var(--mu-font-serif); font-size:1.3rem; margin-bottom:10px; }
.contact-card span{ display:block; font-size:1.1rem; font-weight:600; margin-bottom:6px; }
.contact-card small{ color: var(--mu-text-muted); }
.contact-card--tel{ border-color: var(--mu-copper); }

.contact-info table{ width:100%; border-collapse:collapse; }
.contact-info th, .contact-info td{ padding:14px; border-bottom:1px solid var(--mu-border); text-align:left; }
.contact-info th{ width:160px; color: var(--mu-text-muted); font-weight:600; font-size:.85rem; }
.contact-info td{ font-weight:500; }

.contact-process ol{ padding-left:1.3em; }
.contact-process li{ margin-bottom:10px; }

/* ---------- footer ---------- */
.site-footer{ padding: 32px var(--mu-gutter); font-size:.85rem; color: var(--mu-text-muted); border-top:1px solid var(--mu-border); text-align:center; }
.ftr-links{ margin-top:12px; }
.ftr-links a{ color: var(--mu-text-sub); text-decoration:none; margin:0 6px; }
.ftr-links a:hover{ text-decoration:underline; }

/* ---------- scroll reveal (subtle, IntersectionObserver-driven) ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s var(--mu-ease), transform .6s var(--mu-ease); }
  .reveal.is-visible{ opacity:1; transform:none; }
}

@media (hover:hover) and (pointer:fine){
  .contact-card:hover{ box-shadow: 0 2px 8px rgba(0,0,0,.04); }
  .svc-related__list a:hover, .home-services__group li a:hover{ box-shadow: 0 2px 8px rgba(0,0,0,.04); transform: translateY(-2px); }
}

/* ---------- floating CTA ---------- */
.dp-float-cta{
  position: fixed; right: 20px; bottom: 20px; width:56px; height:56px;
  background: var(--mu-ink); border-radius: 9999px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  text-decoration:none; z-index:60;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transition: transform .2s var(--mu-ease), background .2s var(--mu-ease);
}
.dp-float-cta:hover{ background: var(--mu-ink-hover); transform: scale(1.05); }
.dp-float-cta svg{ width:24px; height:24px; }
@media (prefers-reduced-motion: reduce){
  .dp-float-cta{ transition:none; }
}