/* urine.css — 팔레트: #F1F8FA/#FFFFFF/#123B4F/#1E6C82, Wanted Sans/Noto Sans KR, 단면도 계층형 */
@font-face {
  font-family: 'Wanted Sans';
  src: url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#F1F8FA; --surface:#FFFFFF; --text:#123B4F; --accent:#1E6C82;
  --accent-mid:#175A70; --radius:9999px; --maxw:720px;
}

*{ box-sizing:border-box; }
html{ overflow-x:hidden; }
body{
  background:var(--bg); color:var(--text);
  font-family:'Noto Sans KR',-apple-system,'Malgun Gothic',sans-serif;
  line-height:1.75; overflow-x:hidden;
}
h1,h2,h3{ font-family:'Wanted Sans','Noto Sans KR',-apple-system,'Malgun Gothic',sans-serif; letter-spacing:-.01em; text-align:center; }

a{ color:var(--accent); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--text); color:#fff; padding:.6em 1em; z-index:100; }
.skip-link:focus-visible{ left:1rem; top:1rem; }

/* 헤더 — 비고정 */
.site-header{ position:static; background:var(--surface); border-bottom:1px solid #dbe8ec; padding:16px 20px; }
.header-inner{ max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wordmark{ font-weight:700; font-size:1.05rem; color:var(--text); text-decoration:none; }
.main-nav{ display:flex; gap:16px; flex-wrap:wrap; font-size:.9rem; }
.main-nav a{ color:#3d5c68; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; }
.main-nav a:hover{ color:var(--accent); border-color:var(--accent); }
.cta-tel{ background:var(--accent); color:#fff; font-weight:700; font-size:.88rem; padding:10px 22px; border-radius:var(--radius); text-decoration:none; white-space:nowrap; }
.cta-tel:hover{ background:var(--accent-mid); }

main{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

.hero{ padding:44px 0 36px; text-align:center; }
.hero h1{ font-size:clamp(1.6rem,4.5vw,2.4rem); }
.hero p{ margin-top:16px; color:#33505f; font-size:1.02rem; text-align:left; }

/* 섹션 — 사선 clip-path 구분 */
.section-band{ position:relative; padding:52px 22px; margin:0 -22px 8px; }
.section-band::before{
  content:""; position:absolute; inset:0; background:var(--surface);
  clip-path:polygon(0 26px,100% 0,100% calc(100% - 26px),0 100%);
  z-index:0; border:1px solid #dbe8ec;
}
.section-band > *{ position:relative; z-index:1; }
#related{ padding:40px 0 60px; }

h2{ font-size:1.3rem; margin-bottom:16px; }
h2 + p{ margin-top:0; }
p{ color:#28495a; }
p + p{ margin-top:14px; }

/* 침투 단면도 — 표층/중층/심층 세로 스택 */
.strata{ display:flex; flex-direction:column; margin:22px 0 6px; }
.stratum{ padding:24px 22px 30px; color:#fff; }
.stratum h3{ text-align:left; font-size:1.05rem; margin-bottom:8px; color:#fff; }
.stratum p{ color:rgba(255,255,255,.92); font-size:.94rem; }
.stratum-top{ background:var(--accent); clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%); margin-bottom:-20px; }
.stratum-mid{ background:var(--accent-mid); clip-path:polygon(0 22px,100% 0,100% calc(100% - 22px),0 100%); margin-bottom:-20px; }
.stratum-deep{ background:var(--text); clip-path:polygon(0 22px,100% 0,100% 100%,0 100%); }

/* 이미지 — 각진 프레임 */
figure.content-figure{ margin:30px auto; text-align:center; }
figure.content-figure img{ margin:0 auto; display:block; max-width:100%; height:auto; border:1px solid #123B4F; border-radius:0; }
figure.content-figure figcaption{ margin-top:8px; font-size:.82rem; color:#4b6774; }

/* CTA — 필 형태 */
.cta-block{ margin:36px 0 8px; padding:26px 22px; background:#e7f2f4; border:1px solid #cfe3e8; text-align:center; }
.cta-block p{ margin-bottom:16px; }
.cta-block .cta-tel, .cta-block .cta-sms{
  display:inline-block; margin:0 8px 8px; padding:12px 26px; border-radius:var(--radius);
  font-weight:700; text-decoration:none; font-size:.95rem;
}
.cta-block .cta-tel{ background:var(--accent); color:#fff; }
.cta-block .cta-tel:hover{ background:var(--accent-mid); }
.cta-block .cta-sms{ background:transparent; color:var(--accent); border:2px solid var(--accent); }
.cta-block .cta-sms:hover{ background:var(--accent); color:#fff; }

.related{ margin-top:14px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; }
.related a{ font-size:.9rem; text-decoration:none; border-bottom:1px solid #a9c7cf; padding-bottom:1px; }
.related a:hover{ border-color:var(--accent); color:var(--accent); }

footer.site-footer{ margin-top:20px; background:var(--text); color:rgba(255,255,255,.82); padding:36px 20px; font-size:.85rem; }
.footer-inner{ max-width:1120px; margin:0 auto; }
.footer-links{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:18px; }
.footer-links a{ color:rgba(255,255,255,.72); text-decoration:none; }
.footer-links a:hover{ color:#fff; }
.biz-info p{ margin:2px 0; color:rgba(255,255,255,.62); }
.biz-info a{ color:rgba(255,255,255,.75); }
.footer-bottom{ margin-top:14px; color:rgba(255,255,255,.4); font-size:.78rem; }

/* FAQ */
#faq{ padding:40px 0 8px; }
.qa-list{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.qa-list details{
  background:var(--surface); border:1px solid #dbe8ec; padding:16px 20px;
}
.qa-list summary{
  cursor:pointer; font-weight:700; color:var(--text); font-size:.98rem;
  list-style:none; position:relative; padding-right:26px;
}
.qa-list summary::-webkit-details-marker{ display:none; }
.qa-list summary::after{
  content:"+"; position:absolute; right:0; top:0; color:var(--accent); font-weight:700; font-size:1.1rem;
}
.qa-list details[open] summary::after{ content:"−"; }
.qa-list details[open] summary{ margin-bottom:10px; }
.qa-list summary:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.qa-list p{ font-size:.94rem; }

/* 오염 경과별 접근법 표 */
.table-wrap{ margin-top:18px; overflow-x:auto; }
.table-wrap table{ width:100%; border-collapse:collapse; background:var(--surface); font-size:.92rem; }
.table-wrap th, .table-wrap td{ border:1px solid #dbe8ec; padding:12px 14px; text-align:left; vertical-align:top; }
.table-wrap th{ background:var(--accent); color:#fff; font-weight:700; white-space:nowrap; }
.table-wrap td:first-child{ font-weight:700; color:var(--text); white-space:nowrap; }
.table-wrap td{ color:#28495a; }
.table-wrap tbody tr:nth-child(even){ background:#f7fbfc; }

@media (max-width:480px){
  .header-inner{ justify-content:center; text-align:center; }
  .main-nav{ justify-content:center; }
  .section-band{ padding:40px 16px; }
  .qa-list details{ padding:14px 16px; }
  .table-wrap table{ font-size:.86rem; }
  .table-wrap th, .table-wrap td{ padding:10px; }
}