:root{
  --navy:#16233f; --navy-deep:#0f1a30; --blue:#2b4a8b;
  --ink:#222; --sub:#666; --line:#e6e8ee; --bg:#f4f5f8; --paper:#fff;
  --maxw:756px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65; word-break:keep-all}
.wrap{max-width:var(--maxw); margin:0 auto; background:var(--paper);
  box-shadow:0 0 40px rgba(22,35,63,.08)}
img{display:block; width:100%; height:auto}
/* 세로로 이어 붙인 이미지 사이의 hairline 틈 제거.
   원본 756px 를 뷰포트 폭에 맞춰 줄이면 높이가 소수로 계산되고(예: 390px 폭에서
   1162px → 599.44px), 브라우저가 이를 반올림하는 과정에서 경계마다 1px 미만의
   배경색 줄이 비친다. 1px 겹쳐 덮어 시안이 한 장처럼 이어지게 한다. */
.wrap img{margin-bottom:-1px}
a{color:inherit}
.banner{display:block; transition:opacity .15s}
.banner:active{opacity:.85}
.intro{padding:20px; background:var(--navy-deep); color:#c9d3e8;
  font-size:13px; text-align:center; letter-spacing:-.2px}
.intro strong{color:#fff; font-weight:700}
.imgmap{position:relative}
.imgmap .hotspot{position:absolute; display:block}
.imgmap .hotspot:focus-visible{outline:3px solid var(--blue); outline-offset:2px}

/* 스크린리더 전용 (h1 등) — 시각적으로만 감춤, 크롤러·보조기기에는 그대로 노출 */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

.crumb{padding:10px 20px; background:var(--paper); color:var(--sub);
  font-size:12px; letter-spacing:-.2px; border-bottom:1px solid var(--line)}
.crumb a{color:var(--blue); text-decoration:none}
.crumb .sep{margin:0 6px; opacity:.55}
/* 이미지 아래 텍스트 요약 블록 — 검색·AI 인용을 위한 실제 본문 레이어 */
.sec{padding:28px 24px 30px; background:var(--paper); border-bottom:1px solid var(--line)}
.sec h2{font-size:17px; color:var(--navy); letter-spacing:-.4px; line-height:1.45; margin-bottom:10px}
.sec p{font-size:14px; color:#3a3a3a; margin-bottom:10px}
.sec p:last-child{margin-bottom:0}
.sec strong{color:var(--navy)}
.sec ul{margin:10px 0 0 18px; font-size:14px; color:#3a3a3a}
.sec li{margin-bottom:6px}
.sec .note{font-size:12.5px; color:var(--sub); margin-top:12px}

.faq{padding:56px 24px 48px; background:var(--paper)}
.faq h2{font-size:22px; color:var(--navy); text-align:center; margin-bottom:6px; letter-spacing:-.5px}
.faq .faq-sub{text-align:center; font-size:13px; color:var(--sub); margin-bottom:28px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:2px solid var(--navy)}
.faq summary{list-style:none; cursor:pointer; padding:18px 30px 18px 4px;
  font-size:15px; font-weight:700; color:var(--navy); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%;
  width:9px; height:9px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 4px 20px; font-size:14px; color:#444}
.faq .a p+p{margin-top:8px}
.related{padding:0 24px 44px; background:var(--paper); text-align:center}
.related h3{font-size:15px; color:var(--navy); margin-bottom:14px}
.related a{display:inline-block; font-size:13px; color:var(--blue); text-decoration:none;
  border:1px solid var(--line); border-radius:20px; padding:8px 16px; margin:4px 3px}
footer{background:var(--navy-deep); color:#8fa0c4; padding:32px 24px 130px;
  font-size:12px; line-height:1.9}
footer .biz{color:#c9d3e8; font-weight:700; font-size:13px}
footer a{color:#c9d3e8; text-decoration:none}
.sticky-cta{position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw); z-index:100; display:flex;
  padding-bottom:env(safe-area-inset-bottom); background:var(--navy-deep);
  box-shadow:0 -4px 20px rgba(0,0,0,.18)}
.sticky-cta a{flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 8px; font-size:15px; font-weight:800; text-decoration:none; letter-spacing:-.3px}
.cta-phone{background:var(--navy); color:#fff}
.cta-kakao{background:#fee500; color:#191600}
.sticky-cta svg{width:19px; height:19px; flex:none}
@media (min-width:800px){ .intro{font-size:14px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }