/* mold.css — 팔레트: #F0F7F6/#FFFFFF/#0B3B3C/#C4502D, Hahmlet/IBM Plex Sans KR, 좌측 세로 헤더 + 지그재그 본문 */
:root{
  --bg:#F0F7F6; --surface:#FFFFFF; --text:#0B3B3C; --accent:#C4502D;
  --radius:0px; --maxw:800px; --header-w:230px;
}
body{ background:var(--bg); color:var(--text); font-family:'IBM Plex Sans KR',-apple-system,'Malgun Gothic',sans-serif; line-height:1.8; }
h1,h2,h3{ font-family:'Hahmlet',serif; letter-spacing:-.01em; color:var(--text); }

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

/* 페이지 골격 — 좌측 세로 헤더 + 우측 본문, 하단 전체폭 푸터 */
.page-shell{ display:grid; grid-template-columns:var(--header-w) 1fr; align-items:start; }

/* 헤더 — 좌측 세로 배치 고정 사이드바 */
.site-header{ position:sticky; top:0; height:100vh; background:var(--surface); border-right:1px solid #d7e6e4; padding:32px 22px; }
.header-inner{ display:flex; flex-direction:column; gap:26px; height:100%; }
.wordmark{ font-family:'Hahmlet',serif; font-weight:700; font-size:1.1rem; color:var(--text); line-height:1.4; }
.main-nav{ display:flex; flex-direction:column; gap:12px; font-size:.92rem; }
.main-nav a{ color:#2e5c5c; padding:2px 0; border-left:2px solid transparent; padding-left:10px; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--accent); border-color:var(--accent); }
.site-header .cta-tel{ margin-top:auto; display:block; text-align:center; background:var(--accent); color:#fff; font-weight:700; padding:14px 10px; border-radius:var(--radius); }

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

.hero{ padding-bottom:20px; }
.hero h1{ font-size:clamp(1.6rem,4vw,2.2rem); padding-left:24px; }
.hero p{ margin-top:16px; padding-left:24px; color:#284a4a; font-size:1.02rem; }

section{ padding:34px 0; }
h2{ font-size:1.3rem; padding-left:24px; text-indent:0; }
h2 + p{ margin-top:16px; }
p{ color:#25423f; }
p + p{ margin-top:14px; }
section p{ padding-left:24px; }

/* 지그재그 교차 배치 */
.zigzag{ display:flex; align-items:center; gap:32px; margin:32px 0; }
.zigzag.reverse{ flex-direction:row-reverse; }
.zigzag .content-figure{ flex:0 0 40%; margin:0; }
.zigzag .zigzag-text{ flex:1; padding-left:0; }
.zigzag .zigzag-text p{ padding-left:0; }

figure.content-figure img{ box-shadow:0 10px 28px rgba(11,59,60,.22); border-radius:var(--radius); }
figure.content-figure figcaption{ margin-top:10px; font-size:.82rem; color:#4e6d6a; }

/* CTA — 풀와이드 바 */
.cta-block{ margin:40px 0; padding:28px 24px; background:var(--surface); border:1px solid #d7e6e4; }
.cta-block p{ padding-left:0; margin-bottom:14px; }
.cta-block .cta-tel, .cta-block .cta-sms{ display:block; width:100%; text-align:center; padding:16px; font-weight:700; border-radius:var(--radius); }
.cta-block .cta-tel{ background:var(--accent); color:#fff; }
.cta-block .cta-sms{ margin-top:12px; background:var(--bg); color:var(--text); border:2px solid var(--accent); }

.related{ margin-top:16px; padding-left:24px; display:flex; flex-wrap:wrap; gap:10px 20px; }
.related a{ font-size:.92rem; color:#2e5c5c; border-bottom:1px solid #b7cfcb; padding-bottom:1px; }
.related a:hover{ color:var(--accent); border-color:var(--accent); }

a{ color:var(--accent); }
section p a{ text-decoration:underline; text-underline-offset:2px; }

footer.site-footer{ background:#08282A; color:rgba(255,255,255,.85); 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); }
.footer-links a:hover{ color:#fff; }
.biz-info p{ margin:2px 0; color:rgba(255,255,255,.62); }
.footer-bottom{ margin-top:14px; color:rgba(255,255,255,.4); font-size:.78rem; }

@media (max-width:860px){
  .page-shell{ grid-template-columns:1fr; }
  .site-header{ position:static; height:auto; border-right:0; border-bottom:1px solid #d7e6e4; padding:18px 20px; }
  .header-inner{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; height:auto; }
  .main-nav{ flex-direction:row; flex-wrap:wrap; gap:14px; }
  .main-nav a{ border-left:0; padding-left:0; }
  .site-header .cta-tel{ margin-top:0; width:auto; padding:10px 16px; }
  main{ padding:32px 18px 10px; }
  .zigzag, .zigzag.reverse{ flex-direction:column; }
  .zigzag .content-figure{ flex:none; width:100%; }
}

@media (max-width:400px){
  .hero h1{ padding-left:14px; }
  .hero p, h2, section p{ padding-left:14px; }
}

/* FAQ */
#faq{ padding-top:0; }
.qa-list{ display:flex; flex-direction:column; gap:12px; padding-left:24px; padding-right:24px; }
.qa-list details{ background:var(--surface); border:1px solid #d7e6e4; border-radius:var(--radius); padding:16px 18px; overflow-wrap:break-word; }
.qa-list summary{ font-weight:700; color:var(--text); cursor:pointer; list-style:none; padding-right:24px; position:relative; }
.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; }
.qa-list details[open] summary::after{ content:"−"; }
.qa-list details[open] summary{ margin-bottom:10px; }
.qa-list p{ padding-left:0; margin-top:0; color:#25423f; }

@media (max-width:400px){
  .qa-list{ padding-left:14px; padding-right:14px; }
}

/* 원인별 대응 표 */
#cause-table{ overflow-x:auto; }
#cause-table table{ width:100%; border-collapse:collapse; margin-top:18px; margin-left:24px; max-width:calc(100% - 24px); }
#cause-table th, #cause-table td{ padding:12px 14px; border:1px solid var(--line, #d7e6e4); text-align:left; font-size:.92rem; color:#25423f; }
#cause-table thead th{ background:var(--accent); color:#fff; font-family:'Hahmlet',serif; font-weight:700; }
#cause-table tbody tr:nth-child(even){ background:var(--surface); }
#cause-table tbody tr:nth-child(odd){ background:var(--bg); }

@media (max-width:860px){
  #cause-table table{ display:block; overflow-x:auto; white-space:normal; margin-left:0; max-width:100%; }
}

@media (max-width:400px){
  #cause-table table{ margin-left:0; }
}