/* 엔젤홈케어 성북지사 — 사이트 공통 스타일 */
:root{
  --navy:#0F4C75;        /* 브랜드 기본 */
  --navy-deep:#0B3A5A;
  --ink:#16314A;         /* 본문 글자 */
  --muted:#5B6E80;
  --accent:#E8743B;      /* 전화 CTA 전용 */
  --teal:#2BA7A0;
  --bg:#F4F8FB;          /* 바탕 */
  --card:#FFFFFF;
  --line:#D9E4EE;
  --warn-bg:#FDF1E9;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:17px;line-height:1.75;
  padding-bottom:76px; /* 모바일 하단 전화바 공간 */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* 헤더 */
.site-header{background:var(--navy);color:#fff}
.site-header .wrap{max-width:860px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-weight:800;font-size:1.25rem;color:#fff;letter-spacing:-0.01em}
.brand small{display:block;font-weight:400;font-size:.78rem;color:#CFE2F2;letter-spacing:0}
.main-nav{display:flex;gap:4px;flex-wrap:wrap}
.main-nav a{color:#E4EFF8;font-size:.95rem;padding:6px 10px;border-radius:8px}
.main-nav a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.main-nav a[aria-current="page"]{background:rgba(255,255,255,.18);color:#fff;font-weight:700}

/* 본문 레이아웃 */
main{max-width:860px;margin:0 auto;padding:0 20px}
.section{margin:44px 0}
h1{font-size:1.8rem;line-height:1.35;letter-spacing:-0.02em;font-weight:800;margin:36px 0 10px}
.lede{font-size:1.06rem;color:var(--muted);max-width:40em}
h2{font-size:1.32rem;font-weight:800;letter-spacing:-0.01em;margin-bottom:14px;color:var(--navy-deep)}
h3{font-size:1.08rem;font-weight:700;margin:22px 0 6px}
p{max-width:44em;margin-bottom:12px}
ul,ol{padding-left:1.3em;max-width:42em}
li{margin-bottom:6px}
strong{color:var(--navy-deep)}

/* 전화 블록 — 이 사이트의 핵심 요소 */
.call-band{background:var(--navy);color:#fff;border-radius:16px;padding:22px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:28px 0}
.call-band .icon{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.call-band .numbers a{display:block;color:#fff;font-weight:800;font-size:1.35rem;line-height:1.4;letter-spacing:.01em}
.call-band .note{margin-left:auto;text-align:right;color:#CFE2F2;font-size:.92rem;line-height:1.5}
.call-band .note b{display:block;color:#fff;font-size:1rem}
@media (max-width:560px){.call-band .note{margin-left:0;text-align:left}}

/* 카드/박스 */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:14px}
.card h3{margin-top:0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.notice{background:var(--warn-bg);border-radius:12px;padding:16px 20px;font-size:.98rem}
.notice-title{font-weight:800;color:var(--accent)}

/* 절차(실제 순서가 있는 내용에만 사용) */
.steps{list-style:none;padding:0;counter-reset:step}
.steps li{counter-increment:step;display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.steps li::before{content:counter(step);flex:none;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.steps b{display:block}

/* Q&A (GEO 핵심 구조) */
.qa{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 22px;margin-bottom:12px}
.qa h3{color:var(--navy);margin:16px 0 4px}
.qa p,.qa ul{margin-bottom:16px}

/* 표 */
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.97rem}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#E9F1F8;color:var(--navy-deep);white-space:nowrap}
tr:last-child td{border-bottom:none}

/* 푸터 */
.site-footer{background:var(--navy-deep);color:#C6D8E8;margin-top:56px;font-size:.92rem}
.site-footer .wrap{max-width:860px;margin:0 auto;padding:30px 20px 40px}
.site-footer b{color:#fff}
.site-footer a{color:#fff}
.site-footer .nap{line-height:1.9}

/* 모바일 하단 고정 전화바 */
.call-dock{position:fixed;left:0;right:0;bottom:0;background:var(--accent);z-index:50;box-shadow:0 -2px 10px rgba(22,49,74,.25)}
.call-dock a{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-weight:800;font-size:1.12rem;padding:16px;text-decoration:none}
@media (min-width:861px){
  body{padding-bottom:0}
  .call-dock{display:none}
}

/* 홈 히어로 */
.hero{padding:46px 0 8px}
.hero h1{font-size:2.05rem;margin-top:0}
.hero .area{color:var(--teal);font-weight:800;font-size:1rem;margin-bottom:8px}
@media (max-width:560px){.hero h1{font-size:1.6rem}}

.breadcrumb{font-size:.88rem;color:var(--muted);margin-top:22px}
.breadcrumb a{color:var(--muted)}
.btn-link{display:inline-block;background:var(--navy);color:#fff;border-radius:10px;padding:10px 18px;font-weight:700;margin-top:4px}
.btn-link:hover{background:var(--navy-deep);text-decoration:none}
