/* cycle.css — 팔레트: #FBF7EC/#FFFFFF/#3A3220/#9A7508, Jua/Gowun Dodum, 헤더 좌측 세로 배치 + 대형 넘버링 스텝 */
:root{
  --bg:#FBF7EC; --surface:#FFFFFF; --text:#3A3220; --accent:#9A7508;
  --line:#E5DCC3; --radius:24px; --maxw:800px;
}
body{ background:var(--bg); color:var(--text); font-family:'Gowun Dodum','Malgun Gothic',sans-serif; line-height:1.75; }
h1,h2,h3{ font-family:'Jua','Gowun Dodum',sans-serif; letter-spacing:-.01em; text-align:left; }

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

/* 레이아웃 — 좌측 세로 헤더 + 우측 본문 */
.page{ display:flex; align-items:flex-start; min-height:100vh; }

.site-header{ flex:none; width:240px; min-height:100vh; position:sticky; top:0; background:var(--surface); border-right:1px solid var(--line); padding:32px 24px; }
.header-inner{ display:flex; flex-direction:column; gap:28px; height:100%; }
.wordmark{ font-family:'Jua',sans-serif; font-size:1.15rem; color:var(--text); }
.main-nav{ display:flex; flex-direction:column; gap:14px; font-size:.95rem; }
.main-nav a{ color:var(--text); opacity:.75; border-bottom:1px solid transparent; padding-bottom:2px; width:fit-content; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ opacity:1; border-color:var(--accent); }
.cta-tel{ margin-top:auto; font-weight:700; color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:4px; width:fit-content; }

main{ flex:1; min-width:0; padding:48px 32px 80px; }
main > section{ max-width:var(--maxw); }

.hero{ padding-bottom:32px; border-bottom:1px solid var(--line); }
.hero h1{ font-size:clamp(1.7rem,4vw,2.4rem); }
.hero p{ margin-top:16px; font-size:1.02rem; }

main > section + section{ padding-top:36px; padding-bottom:36px; border-top:1px solid var(--line); }
main > section:last-of-type{ border-bottom:none; }

h2{ font-size:1.3rem; }
h2 + p{ margin-top:14px; }
p{ color:var(--text); }
p + p{ margin-top:12px; }
p a{ text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }

/* 대형 넘버링 스텝 */
.step-section{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; }
.step-num{ font-family:'Jua',sans-serif; font-size:clamp(3.2rem,8vw,5.5rem); line-height:1; color:var(--accent); }
.step-body h2{ margin-top:6px; }
.step-body p{ margin-top:14px; }
.step-body p:first-of-type{ margin-top:14px; }

.mini-list{ display:grid; gap:10px; margin-top:18px; }
.mini-list li{ display:flex; gap:14px; align-items:baseline; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:12px 18px; font-size:.95rem; }
.mini-list li span{ flex:none; min-width:96px; font-weight:700; color:var(--text); }

figure.content-figure{ margin:28px 0; }
figure.content-figure picture{ display:block; }
figure.content-figure img{ border:2px solid var(--line); border-radius:var(--radius); margin:0 auto; }
figure.content-figure figcaption{ margin-top:10px; font-size:.85rem; color:var(--text); opacity:.7; }

.cta-block{ margin-top:20px; display:flex; flex-wrap:wrap; gap:12px 28px; }
.cta-block .cta-tel, .cta-block .cta-sms{ font-weight:700; font-size:1rem; color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:4px; }

.related{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px 20px; }
.related a{ font-size:.92rem; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }

footer.site-footer{ margin-left:240px; background:#2C2717; color:rgba(255,255,255,.85); padding:36px 24px; 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,.6); }
.footer-bottom{ margin-top:14px; color:rgba(255,255,255,.4); font-size:.78rem; }

@media (max-width:860px){
  .page{ flex-direction:column; }
  .site-header{ width:100%; min-height:0; position:static; border-right:0; border-bottom:1px solid var(--line); padding:20px; }
  .header-inner{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:16px; height:auto; }
  .main-nav{ flex-direction:row; flex-wrap:wrap; gap:10px 16px; }
  .cta-tel{ margin-top:0; margin-left:auto; }
  main{ padding:32px 20px 60px; }
  .step-section{ grid-template-columns:1fr; }
  footer.site-footer{ margin-left:0; }
}

@media (max-width:480px){
  .header-inner{ flex-direction:column; align-items:flex-start; }
  .cta-tel{ margin-left:0; }
}

/* FAQ */
.qa-list{ display:grid; gap:12px; margin-top:18px; }
.qa-list details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; }
.qa-list details[open]{ border-color:var(--accent); }
.qa-list summary{ cursor:pointer; font-weight:700; color:var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.qa-list summary::-webkit-details-marker{ display:none; }
.qa-list summary::after{ content:"+"; flex:none; font-family:'Jua',sans-serif; font-size:1.2rem; color:var(--accent); transition:transform .2s ease; }
.qa-list details[open] summary::after{ content:"−"; }
.qa-list details p{ margin-top:12px; font-size:.95rem; }

/* 환경별 권장 관리 주기 표 */
.table-wrap{ margin-top:18px; overflow-x:auto; }
.table-section table{ width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--radius); overflow:hidden; min-width:480px; }
.table-section caption{ caption-side:top; text-align:left; font-size:.85rem; color:var(--text); opacity:.7; margin-bottom:8px; }
.table-section th, .table-section td{ padding:12px 16px; border:1px solid var(--line); text-align:left; font-size:.95rem; line-height:1.6; }
.table-section thead th{ background:var(--bg); color:var(--text); font-weight:700; font-family:'Jua','Gowun Dodum',sans-serif; }
.table-section tbody tr:nth-child(even){ background:rgba(154,117,8,.05); }
.table-section td:first-child{ font-weight:700; white-space:nowrap; }