/* stain.css — 팔레트: #F5F1F2/#FFFFFF/#3D1220/#7B2540, Nanum Myeongjo/Spoqa Han Sans Neo, 오버랩 카드형 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css');

:root{
  --bg:#F5F1F2; --surface:#FFFFFF; --text:#3D1220; --accent:#7B2540;
  --radius:24px; --maxw:640px;
}
body{
  background:var(--bg); color:var(--text); line-height:1.75;
  font-family:'Spoqa Han Sans Neo',-apple-system,'Malgun Gothic',sans-serif;
}
h1,h2,h3{ font-family:'Nanum Myeongjo','Spoqa Han Sans Neo',-apple-system,'Malgun Gothic',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:1rem; top:1rem; }

/* 헤더 — 스크롤 시 축소 */
.site-header{ position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid #e9dfe2; padding:20px 20px; transition:padding .25s ease, box-shadow .25s ease; }
.site-header.is-shrunk{ padding:9px 20px; box-shadow:0 4px 14px rgba(61,18,32,.1); }
.header-inner{ max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wordmark{ font-family:'Nanum Myeongjo',serif; font-weight:800; font-size:1.1rem; color:var(--text); }
.main-nav{ display:flex; gap:18px; flex-wrap:wrap; font-size:.9rem; }
.main-nav a{ color:#6b4753; border-bottom:1px solid transparent; padding-bottom:2px; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--text); border-color:var(--accent); }
.cta-tel{ background:var(--accent); color:#fff; font-weight:700; padding:.55em 1.1em; border-radius:999px; font-size:.88rem; white-space:nowrap; }
.cta-tel:hover{ background:#631d34; }

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

.hero{ padding:8px 0 0; }
.hero h1{ font-size:clamp(1.6rem,4.4vw,2.35rem); }
.hero > p{ margin-top:16px; color:#5a3540; font-size:1rem; }

section{ padding:44px 0 0; }
section:first-of-type{ padding-top:0; }
h2{ font-size:1.3rem; }
h2 + p, h2 + .overlap-card{ margin-top:16px; }
p{ color:#4a2e38; }
p + p{ margin-top:14px; }

a{ color:var(--accent); border-bottom:1px solid rgba(123,37,64,.35); }
a:hover{ border-color:var(--accent); }

/* 오버랩 카드 — 이미지 위에 텍스트 박스가 겹치는 형태 */
.overlap-card{ position:relative; margin:28px 0 68px; }
.overlap-card picture, .overlap-card img{ display:block; width:100%; }
.overlap-card img{ aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); box-shadow:0 18px 40px rgba(61,18,32,.22); }
.overlap-card .card-text{
  position:absolute; left:20px; right:20px; bottom:-44px;
  background:var(--surface); color:var(--text);
  padding:18px 20px; border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(61,18,32,.16);
  font-size:.92rem; line-height:1.6;
}
.overlap-card--reverse .card-text{ background:var(--accent); color:#fff; }

.cta-block{ margin:40px 0; padding:26px 22px; background:var(--surface); border-radius:var(--radius); box-shadow:0 10px 26px rgba(61,18,32,.1); }
.cta-block p{ color:#4a2e38; }
.cta-block .cta-tel, .cta-block .cta-sms{
  display:block; width:100%; text-align:center; margin-top:14px;
  font-weight:700; padding:.95em 1em; border-radius:var(--radius); font-size:.98rem;
}
.cta-block .cta-tel{ background:var(--accent); color:#fff; border:0; }
.cta-block .cta-tel:hover{ background:#631d34; }
.cta-block .cta-sms{ background:var(--bg); color:var(--text); border:1px solid #e9dfe2; }
.cta-block .cta-sms:hover{ background:#eee3e6; }

.related{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px 18px; }
.related a{ font-size:.9rem; border-bottom:1px solid rgba(123,37,64,.35); }

footer.site-footer{ margin-top:64px; background:#3D1220; color:rgba(255,255,255,.85); padding:38px 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,.74); border:0; }
.footer-links a:hover{ color:#fff; }
.biz-info p{ margin:2px 0; color:rgba(255,255,255,.64); }
.footer-bottom{ margin-top:14px; color:rgba(255,255,255,.42); font-size:.78rem; }

/* FAQ */
#faq h2 + .qa-list{ margin-top:16px; }
.qa-list{ display:grid; gap:12px; }
.qa-list details{ background:var(--surface); border:1px solid #e9dfe2; border-radius:var(--radius); padding:14px 16px; }
.qa-list summary{ cursor:pointer; font-weight:700; color:var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.qa-list summary::-webkit-details-marker{ display:none; }
.qa-list summary::after{ content:'+'; font-size:1.3rem; color:var(--accent); flex:none; }
.qa-list details[open] summary::after{ content:'−'; }
.qa-list summary:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.qa-list p{ margin-top:10px; font-size:.95rem; color:#4a2e38; }

@media (max-width:480px){
  .overlap-card .card-text{ left:12px; right:12px; bottom:-52px; padding:16px; }
  .overlap-card{ margin-bottom:76px; }
}

/* 얼룩 유형별 처리 접근법 표 */
#stain-table{ overflow-x:auto; }
#stain-table table{
  width:100%; margin-top:16px; border-collapse:collapse;
  background:var(--surface); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 10px 26px rgba(61,18,32,.1);
}
#stain-table th, #stain-table td{
  padding:14px 16px; border:1px solid #e9dfe2; text-align:left; font-size:.92rem; color:#4a2e38;
}
#stain-table th{ background:var(--accent); color:#fff; font-family:'Nanum Myeongjo','Spoqa Han Sans Neo',-apple-system,'Malgun Gothic',serif; }
#stain-table td:first-child{ font-weight:700; color:var(--text); white-space:nowrap; }

@media (max-width:600px){
  #stain-table table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
}