:root{
  /* 바탕은 파랑기가 아주 옅게 도는 무채색으로 두어 브랜드 파랑이 도드라지게 한다 */
  --paper:#F9FAFB; --card:#FFFFFF; --sunk:#F1F6FA;
  --line:#E3E8EC; --line-2:#EFF3F6;
  --ink:#141A1F; --ink-2:#57626B; --ink-3:#8A939B;

  /* 브랜드: 텔레그램 계열 파랑 */
  --brand:#229ED9; --brand-deep:#1A7EAE; --brand-soft:#E6F4FB; --brand-ink:#136288;

  /* 시설 유형 세 갈래. 모두 파랑 이웃이라 한 서비스로 보인다 */
  --nat:#229ED9; --nat-deep:#1A7EAE; --nat-soft:#E6F4FB; --nat-ink:#136288;
  --bon:#5468C4; --bon-deep:#3F4FA0; --bon-soft:#ECEEFA; --bon-ink:#3A4791;
  --myo:#2A9D8F; --myo-deep:#1F7D71; --myo-soft:#E6F5F2; --myo-ink:#1B6B60;

  /* 강조: 파랑의 보색인 주황. 경고와 미확인 표시에만 쓴다 */
  --accent:#E1833C; --accent-deep:#B9631F; --accent-soft:#FDF2E8; --accent-ink:#9A5417;

  /* 예전 이름은 그대로 두고 브랜드 색에 잇는다 (여러 화면이 이 이름을 쓰고 있다) */
  --green:var(--brand); --green-deep:var(--brand-deep); --green-soft:var(--brand-soft);
  --amber-soft:var(--accent-soft); --amber-ink:var(--accent-ink);
  /* 토스 계열 인상을 내는 글꼴. 본문과 숫자를 한 벌로 쓴다 */
  --sans:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --num:var(--sans);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--num); font-variant-numeric:tabular-nums;}
a{color:var(--green);}
img{max-width:100%;}

/* ---------- 헤더 ---------- */
header{
  position:sticky; top:0; z-index:30;
  background:rgba(250,251,249,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.bar{
  padding:11px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
/* 심볼 없이 글자만 쓴다 */
.logo{display:inline-flex; align-items:center; text-decoration:none;}
.logo-word{
  font-family:var(--num); font-size:20.5px; font-weight:800;
  color:var(--ink); letter-spacing:-.035em; line-height:1;
}
.logo:hover .logo-word{color:var(--brand-ink);}
.nav{display:flex; gap:4px;}
.nav a{
  font-size:13.5px; color:var(--ink-2); text-decoration:none;
  padding:6px 11px; border-radius:8px;
}
.nav a:hover{background:var(--sunk); color:var(--green);}
.nav a.on{color:var(--green); font-weight:700; background:var(--green-soft);}

main{max-width:1040px; margin:0 auto; padding:26px 16px 8px;}
main.doc, main.detail{max-width:720px;}

.crumb{font-size:12.5px; color:var(--ink-3); margin-bottom:16px;}
.crumb a{color:var(--ink-2); text-decoration:none;}
.crumb a:hover{color:var(--green);}

h1{
  font-family:var(--num); font-size:27px; font-weight:800;
  letter-spacing:-.028em; line-height:1.35; margin:0 0 8px;
  text-wrap:balance;
}
h2{
  font-family:var(--num); font-size:19px; font-weight:800;
  letter-spacing:-.02em; margin:34px 0 12px; text-wrap:balance;
}
h3{font-family:var(--num); font-size:15.5px; font-weight:700; margin:0 0 4px;}
.sub{margin:0 0 22px; font-size:13.5px; color:var(--ink-2);}
.sub b{font-family:var(--num); font-size:16px; color:var(--ink);}

/* ---------- 홈 ---------- */
.hero{
  padding:44px 0 38px; border-bottom:1px solid var(--line); margin-bottom:30px;
}
.hero h1{font-size:34px; line-height:1.38; margin-bottom:14px;}
@media(min-width:700px){ .hero h1{font-size:42px;} .hero{padding:64px 0 52px;} }
.hero-sub{margin:0 0 26px; font-size:15px; color:var(--ink-2); line-height:1.8;}
.hero-sub b{color:var(--ink);}
.hero-act{display:flex; flex-wrap:wrap; gap:9px;}

.stats{
  /* 칸 수가 늘어도 고르게 나뉘도록 한다 */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:13px; overflow:hidden; margin-bottom:12px;
}
.stats div{background:var(--card); padding:18px 14px; text-align:center;}
.stats span{
  display:block; font-family:var(--num); font-size:23px;
  font-weight:800; letter-spacing:-.02em; line-height:1.2;
}
.stats em{display:block; margin-top:3px; font-size:11.5px; font-style:normal; color:var(--ink-3);}

.block{margin-top:38px;}
.block h2{margin-top:0;}
.more-link{
  display:inline-block; margin-top:14px; font-size:13.5px;
  text-decoration:none; font-weight:500;
}

/* ---------- 카드 ---------- */
.cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:9px;}
@media(min-width:620px){ .cards{grid-template-columns:1fr 1fr;} }
@media(min-width:900px){ main.home .cards, main.area .cards{grid-template-columns:1fr 1fr 1fr;} }
.cards a{
  display:flex; flex-direction:column; gap:5px; height:100%;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:15px 16px; text-decoration:none; color:var(--ink);
  transition:border-color .12s, transform .12s;
}
.cards a:hover{border-color:#B7D9EA; transform:translateY(-1px);}
.c-name{font-size:14.5px; font-weight:700; line-height:1.45;}
.c-loc{font-size:12.5px; color:var(--ink-2);}
.c-meta{font-size:12px; color:var(--ink-3); line-height:1.6;}
.c-meta b{font-family:var(--num); font-weight:700; color:var(--ink-2);}

/* ---------- 상세 ---------- */
.tag{
  display:inline-block; font-size:11.5px; font-weight:500;
  border-radius:5px; padding:3px 8px; margin-right:5px;
}
.tag-nat{background:var(--green-soft); color:var(--green);}
.tag-bon{background:var(--bon-soft); color:var(--bon-ink);}
.tag-myo{background:var(--myo-soft); color:var(--myo-ink);}

.rows{border-top:1px solid var(--line); margin:0 0 20px;}
.row{display:flex; gap:14px; padding:12px 2px; border-bottom:1px solid var(--line-2);}
.row dt{width:100px; flex-shrink:0; font-size:12.5px; color:var(--ink-3); margin:0;}
.row dd{margin:0; font-size:14px; flex-grow:1; word-break:break-all;}

.actions{display:flex; gap:8px; margin-bottom:20px;}
.act{
  text-align:center; text-decoration:none; border-radius:11px;
  padding:13px 24px; font-size:14.5px; font-weight:700; transition:.12s;
}
.act-1{background:var(--green); color:#fff;}
.act-1:hover{background:var(--green-deep);}
.act-2{background:var(--card); border:1px solid var(--line); color:var(--ink-2); font-weight:500;}
.act-2:hover{border-color:#B7D9EA;}

.soon{
  background:var(--amber-soft); border-radius:11px;
  padding:15px 17px; font-size:13px; color:var(--amber-ink); line-height:1.7;
}
.soon a{display:inline-block; margin-top:6px; color:var(--amber-ink); font-weight:700;}

.near{margin-top:38px; padding-top:24px; border-top:1px solid var(--line);}
.near h2{font-size:17px; letter-spacing:-.025em; margin:0 0 12px;}
.linklist{list-style:none; margin:0; padding:0;}
.linklist li{display:flex; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid var(--line-2);}
.linklist a{flex-grow:1; font-size:14px; text-decoration:none; color:var(--ink);}
.linklist a:hover{color:var(--green);}
.linklist span{font-size:11.5px; color:var(--ink-3);}

/* ---------- 안내 글 ---------- */
article{font-size:15.5px; line-height:1.9;}
article p{margin:0 0 17px;}
.lead{font-size:17px; line-height:1.85; color:var(--ink); margin-bottom:26px;}
article b{font-weight:700;}

.cmp{display:grid; grid-template-columns:1fr; gap:10px; margin:20px 0 26px;}
@media(min-width:620px){ .cmp{grid-template-columns:1fr 1fr;} }
.cmp-col{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px;}
.cmp-col h3{margin:0 0 9px; color:var(--green);}
.cmp-col ul{margin:0; padding-left:17px; font-size:13.5px; color:var(--ink-2); line-height:1.85;}

.qa p{background:var(--sunk); border-radius:11px; padding:14px 17px; margin-bottom:10px; font-size:14px; line-height:1.8;}

.tbl{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:20px 0 22px; background:var(--card);}
/* .tbl 안에 진짜 <table> 이 들어가는 경우.
   손대지 않으면 표가 글자 폭만큼만 줄어들어 상자 오른쪽이 텅 빈다. */
.tbl table{width:100%; border-collapse:collapse;}
.tbl thead th{
  background:var(--sunk); font-size:11.5px; font-weight:600; color:var(--ink-3);
  text-align:left; padding:11px 16px; border-bottom:1px solid var(--line-2);
}
.tbl thead th:last-child{text-align:right;}
.tbl tbody td{
  padding:12px 16px; font-size:13.5px; border-bottom:1px solid var(--line-2);
}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody td:last-child{text-align:right; font-family:var(--num); font-weight:700;}
.tbl tbody td b{font-weight:800; color:var(--green);}

.tbl-row{display:grid; grid-template-columns:1fr 1.2fr 1.2fr 1.4fr; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line-2); font-size:13px; font-family:var(--num);}
.tbl-row:last-child{border-bottom:none;}
.tbl-head{background:var(--sunk); font-size:11.5px; color:var(--ink-3); font-family:var(--sans);}
.hi-good{color:var(--green); font-weight:800;}
.hi-bad{color:#B8442F; font-weight:800;}

.chk{list-style:none; margin:16px 0 22px; padding:0;}
.chk li{position:relative; padding:9px 0 9px 26px; font-size:14px; border-bottom:1px solid var(--line-2); line-height:1.75;
  /* 두 줄이 되는 항목에서 마지막 글자 하나만 내려오면 지저분하다.
     keep-all 로 낱말 중간이 끊기지 않게 하고, balance 로 두 줄의 길이를
     비슷하게 나눈다. 화면 폭이 바뀌어도 알아서 다시 나뉜다. */
  word-break:keep-all; text-wrap:balance;}
.chk li:before{
  content:""; position:absolute; left:6px; top:19px;
  width:7px; height:7px; border-radius:50%; background:var(--green);
}

.steps{list-style:none; counter-reset:s; margin:20px 0 26px; padding:0;}
.steps li{position:relative; padding:0 0 20px 42px; counter-increment:s;}
.steps li:before{
  content:counter(s); position:absolute; left:0; top:1px;
  width:27px; height:27px; border-radius:50%;
  background:var(--green-soft); color:var(--green);
  font-family:var(--num); font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.steps p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.8;}

.note{
  background:var(--sunk); border-left:3px solid var(--green);
  border-radius:0 11px 11px 0; padding:15px 18px;
  font-size:13.5px; line-height:1.8; color:var(--ink-2); margin:24px 0;
}
.note b{color:var(--ink);}

.cta{
  margin-top:38px; padding:24px; background:var(--card);
  border:1px solid var(--line); border-radius:13px; text-align:center;
}
.cta p{margin:0 0 14px; font-size:14.5px; color:var(--ink-2);}
.cta .act{display:inline-block;}

/* ---------- 푸터 ---------- */
footer{
  max-width:1040px; margin:46px auto 0; padding:26px 16px 46px;
  border-top:1px solid var(--line);
}
footer p{margin:0; font-size:11.5px; color:var(--ink-3); line-height:1.8;}

/* ---------- 편의시설 현황 ---------- */
.amen-sec{margin-top:34px; padding-top:22px; border-top:1px solid var(--line);}
.amen-sec h2{font-size:17px; letter-spacing:-.025em; margin:0 0 13px;}
.amen{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:11px; overflow:hidden;
}
@media(min-width:560px){ .amen{grid-template-columns:1fr 1fr;} }
.amen li{
  display:flex; align-items:center; gap:10px;
  background:var(--card); padding:12px 15px; font-size:13.5px;
}
.amen li svg{width:18px; height:18px; flex-shrink:0;}
.amen li span{flex-grow:1;}
.amen li b{font-size:12.5px; font-weight:700;}
.amen li.yes{color:var(--ink);}
.amen li.yes svg{color:var(--green);}
.amen li.yes b{color:var(--green);}
.amen li.no{color:var(--ink-3);}
.amen li.no svg{color:#C3CDD4;}
.amen li.no b{color:var(--ink-3); font-weight:400;}
.amen-note{margin:11px 0 0; font-size:12.5px; color:var(--ink-2);}
.amen-note b{font-weight:700; color:var(--ink);}

/* ---------- 지역 현황 ---------- */
.areastat{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin:0 0 20px;
}
@media(min-width:560px){ .areastat{grid-template-columns:repeat(4,1fr);} }
.areastat div{background:var(--card); padding:14px 12px; text-align:center;}
.areastat span{display:block; font-family:var(--num); font-size:19px; font-weight:800; letter-spacing:-.02em;}
.areastat em{display:block; margin-top:2px; font-size:11px; font-style:normal; color:var(--ink-3);}

.c-amen{display:flex; flex-wrap:wrap; gap:4px; margin-top:3px;}
.c-amen i{
  font-style:normal; font-size:10.5px; color:var(--green);
  background:var(--green-soft); border-radius:4px; padding:2px 6px;
}

/* ---------- 참고 가격 ---------- */
.price{margin:0 0 20px; border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden;}
.price-head{
  display:flex; align-items:center; gap:9px;
  padding:14px 17px 12px; border-bottom:1px solid var(--line-2);
}
.price-head h2{font-size:17px; letter-spacing:-.025em; margin:0;}
.price-warn{
  font-size:10.5px; font-weight:700; color:var(--amber-ink);
  background:var(--amber-soft); border-radius:5px; padding:3px 8px;
}
/* 보건복지부에 신고된 값이라는 표시 */
.price-src-tag{
  font-size:10.5px; font-weight:700; color:var(--green);
  background:var(--green-soft); border-radius:5px; padding:3px 8px;
}
.price-tbl th{word-break:keep-all;}
.price-tbl tr.grp th{
  font-size:11.5px; font-weight:700; color:var(--ink-2); width:auto;
  background:var(--sunk); padding:8px 17px;
}
.price-tbl th.more{font-size:12px; color:var(--ink-3); width:auto;}
.price-tbl{width:100%; border-collapse:collapse;}
.price-tbl th{
  width:auto; max-width:60%; text-align:left; font-weight:400;
  font-size:13px; color:var(--ink-2); padding:10px 17px; vertical-align:top; line-height:1.6;
}
.price-tbl td{
  text-align:right; white-space:nowrap;
  font-size:14px; font-weight:700; padding:10px 17px 10px 0;
  font-family:var(--num); font-variant-numeric:tabular-nums;
}
.price-tbl td em{font-style:normal; font-size:11px; font-weight:400; color:var(--ink-3); font-family:var(--sans);}
.price-tbl tr{border-bottom:1px solid var(--line-2);}
.price-tbl tr:last-child{border-bottom:none;}
.price-tbl tr.mg{background:var(--sunk);}
.price-src{
  margin:0; padding:13px 17px; background:var(--sunk);
  border-top:1px solid var(--line-2);
  font-size:11.5px; color:var(--ink-2); line-height:1.75;
}
.price-src b{color:var(--ink);}
.price-guide{
  display:block; padding:12px 17px; border-top:1px solid var(--line-2);
  font-size:13px; font-weight:700; text-decoration:none;
}
.price-guide:hover{background:var(--sunk);}

/* ---------- 없는 쪽 ---------- */
.nf{padding-top:28px;}
.nf h1{margin:0 0 10px; font-size:26px; letter-spacing:-.03em;}
.nf-lead{
  margin:0 0 22px; font-size:15px; line-height:1.8;
  color:var(--ink-2); word-break:keep-all;
}
.nf-act{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px;}

/* ---------- 화장 요금 ---------- */
.crf{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin:0 0 22px;
}
.crf h2{margin:0; padding:15px 17px 0; font-size:17px; letter-spacing:-.025em;}
.crf-a{
  margin:0; padding:8px 17px 15px; font-size:14px; line-height:1.75;
  color:var(--ink-2); word-break:keep-all;
}
.crf-a b{color:var(--ink); font-size:15px;}

/* ---------- 상조 회사 조회 ---------- */
.sj-badge{
  display:inline-block; border-radius:999px; padding:3px 11px;
  font-size:12px; font-weight:800; letter-spacing:-.01em;
}
.sj-live{background:var(--brand-soft); color:var(--brand-ink);}
.sj-gone{background:#FDECE7; color:#B8442F;}

.sj-find{margin:22px 0 8px;}
.sj-find input{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:15px;
  padding:14px 16px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--ink);
}
.sj-find input:focus{outline:none; border-color:var(--brand);}
.sj-hint{margin:8px 0 0; font-size:12px; color:var(--ink-3); line-height:1.7;}

.sj-list{list-style:none; margin:0; padding:0;}
.sj-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:12px 2px; border-bottom:1px solid var(--line-2); text-decoration:none;
}
.sj-list a:hover{background:var(--sunk);}
.sj-n{font-size:14px; font-weight:700; color:var(--ink); word-break:keep-all; line-height:1.5;}
.sj-list a:hover .sj-n{color:var(--green);}
.sj-m{
  font-size:11.5px; color:var(--ink-3); white-space:nowrap;
  font-family:var(--num); flex-shrink:0;
}
.sj-m b{color:var(--ink-2); font-weight:800;}
.sj-x{font-style:normal; color:#B8442F; font-weight:700;}
.sj-none{
  margin:18px 0; padding:18px; background:var(--sunk); border-radius:12px;
  font-size:13.5px; color:var(--ink-2); text-align:center;
}

/* ---------- 상조 회사 거르기 ---------- */
.sj-filt{
  display:flex; flex-direction:column; gap:10px;
  margin:16px 0 6px; padding:15px 16px;
  background:var(--sunk); border-radius:12px;
}
.sj-g{display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
.sj-gl{
  font-size:11.5px; font-weight:700; color:var(--ink-3);
  width:88px; flex-shrink:0; letter-spacing:-.01em;
}
@media(max-width:520px){ .sj-gl{width:100%; margin-bottom:1px;} }
.sj-g select{
  font-family:inherit; font-size:12.5px; padding:6px 10px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--ink); cursor:pointer;
}
.sj-c{
  font-family:inherit; font-size:12.5px; font-weight:600;
  padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink-2); cursor:pointer;
}
.sj-c:hover{border-color:var(--green); color:var(--green);}
.sj-c.on{background:var(--green); border-color:var(--green); color:#fff; font-weight:700;}
/* 무언가 고른 때만 나타난다. 「전체」 단추 넷을 대신한다 */
.sj-clear{
  align-self:flex-start; font-family:inherit; font-size:12px; font-weight:700;
  padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink-3); cursor:pointer;
}
.sj-clear:hover{border-color:var(--ink-3); color:var(--ink-2);}
.sj-why{margin-bottom:20px !important;}
.sj-why b{color:var(--ink-2);}

/* ---------- 장지 다음은 상조 ---------- */
/* 시설 쪽 맨 끝. 여기까지 내려온 사람은 이 시설을 진지하게 보고 있는 사람이다 */
/* 회색 바탕에 작은 머리말이면 다른 칸과 구분이 안 돼 그냥 지나친다.
   문의로 이어지는 유일한 자리이므로 색과 크기로 분명히 세운다. */
.nextq{
  margin:38px 0 0; padding:24px 22px 22px;
  background:var(--brand-soft); border:1px solid #CFE7F5; border-radius:16px;
}
.nextq h2{
  margin:0 0 10px; font-size:21px; line-height:1.4;
  letter-spacing:-.03em; color:var(--ink); text-wrap:balance;
}
.nextq-lead{
  margin:0 0 16px; font-size:14px; line-height:1.8;
  color:var(--ink-2); word-break:keep-all;
}
.nextq-lead b{color:var(--ink);}
.nextq-links{list-style:none; margin:0 0 16px; padding:0;}
/* 카드에 설명글까지 넣으면 겹이 두 배가 된다. 화살표 한 줄이면 충분하다 */
.nextq-links li + li{border-top:1px solid #CFE7F5;}
.nextq-links a{
  display:flex; align-items:center; gap:9px;
  padding:12px 2px; font-size:14.5px; font-weight:700;
  color:var(--ink); text-decoration:none; letter-spacing:-.015em;
}
.nextq-links a::before{content:"→"; color:var(--brand); font-weight:800; flex-shrink:0;}
.nextq-links a:hover{color:var(--brand);}

.nextq-ask{
  margin:0; font-size:13.5px; line-height:1.7; color:var(--ink-2); word-break:keep-all;
}
.nextq .kko{margin-top:12px;}

/* ---------- 카카오톡으로 물어보기 ---------- */
/* 카카오 브랜드 색을 그대로 쓴다. 사람들이 이 노랑을 보고 무엇인지 바로 안다.
   채널 주소가 없는 동안에는 같은 모양으로 두되 눌리지 않는다. */
.kko{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#FEE500; color:#191919; border:none; border-radius:12px;
  font-family:inherit; font-weight:800; text-decoration:none;
  box-shadow:0 2px 10px rgba(19,26,22,.10);
}
.kko svg{width:21px; height:21px; flex-shrink:0;}
/* 글 안에 놓이는 단추는 좌우를 꽉 채운다.
   양 끝이 위 문단·카드와 같은 선에 맞아야 화면이 정돈되어 보인다. */
.kko-lg{display:flex; width:100%; box-sizing:border-box; margin-top:18px; padding:16px 24px; font-size:15.5px;}
.kko-md{display:flex; width:100%; box-sizing:border-box; margin-top:14px; padding:14px 20px; font-size:14.5px;}
.kko-sm{margin-top:12px; padding:11px 16px; font-size:13.5px;}
.stick .kko-sm{display:flex; width:100%; box-sizing:border-box;}
a.kko:hover{background:#F5DC00;}
/* 채널을 열기 전에도 모양은 그대로 둔다. 흐려 두면 고장 난 것처럼 보인다 */
.kko-off{cursor:default; box-shadow:none;}
.kko-soon{
  margin:9px 0 0; font-size:12px; color:var(--ink-3); line-height:1.7;
}

/* 계산기 결과 아래 물어보는 자리 */
.calc-ask{margin-top:14px;}
.calc-ask-t{
  margin:0; font-size:13px; line-height:1.7; color:var(--ink-2); word-break:keep-all;
}

/* ---------- 찾아가는 길 ---------- */
.way{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin:0 0 22px;
}
.way h2{margin:0; padding:15px 17px 13px; font-size:17px; letter-spacing:-.025em;}
.way h3{
  margin:0 0 7px; font-size:12px; font-weight:700; color:var(--ink-3);
  letter-spacing:.01em;
}
.way-note{
  margin:0; padding:12px 17px; font-size:13px; line-height:1.75;
  border-top:1px solid var(--line-2); word-break:keep-all; color:var(--ink-2);
}
.way-note b{color:var(--ink);}
.way-ok{background:var(--brand-soft);}
.way-mid{background:var(--sunk);}
.way-warn{background:#FDF3F0;}
.way-warn b{color:#B8442F;}
.way-g{padding:13px 17px; border-top:1px solid var(--line-2);}
.way-list{list-style:none; margin:0; padding:0;}
.way-list li{
  font-size:13px; line-height:1.75; padding:4px 0;
  color:var(--ink-2); word-break:keep-all;
}
.way-stop li{display:flex; align-items:baseline; gap:10px; justify-content:space-between;}
.way-n{color:var(--ink); font-weight:600;}
.way-d{font-size:12px; color:var(--ink-3); white-space:nowrap; font-family:var(--num);}
.way-d b{color:var(--green); font-weight:700;}
.way-addr{margin:0; font-size:13.5px; color:var(--ink); line-height:1.7; word-break:keep-all;}
.way-car{
  margin:9px 0 0; padding:10px 12px; background:var(--sunk); border-radius:9px;
  font-size:12.5px; line-height:1.75; color:var(--ink-2); word-break:keep-all;
}
.way-src{margin:5px 0 0; font-size:11px; color:var(--ink-3); line-height:1.7; word-break:keep-all;}
.way-busy{
  margin:0; padding:12px 17px; background:var(--sunk);
  border-top:1px solid var(--line-2);
  font-size:11.5px; line-height:1.75; color:var(--ink-2); word-break:keep-all;
}

/* ---------- 나란히 보기 ---------- */
.fcmp{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin:0 0 22px;
}
.fcmp h2{margin:0; padding:15px 17px 0; font-size:17px; letter-spacing:-.025em;}
.fcmp-lead{
  margin:0; padding:7px 17px 14px; font-size:12.5px; line-height:1.7;
  color:var(--ink-2); word-break:keep-all;
}
.fcmp-wrap{overflow-x:auto; border-top:1px solid var(--line);}
.fcmp-tbl{border-collapse:collapse; width:100%; min-width:460px; font-size:13px;}
.fcmp-tbl th, .fcmp-tbl td{
  padding:11px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.fcmp-tbl thead th{
  background:var(--sunk); font-size:12px; font-weight:700;
  white-space:normal; word-break:keep-all; min-width:96px;
}
.fcmp-tbl thead th a{text-decoration:none;}
.fcmp-tbl tbody th{
  font-size:12px; font-weight:600; color:var(--ink-2);
  background:var(--card); width:110px; white-space:normal; word-break:keep-all;
}
.fcmp-tbl td b{font-family:var(--num); font-size:14px; font-weight:800;}
.fcmp-tbl td i{font-style:normal; font-size:12px; color:var(--ink-3);}
.fcmp-me{background:var(--brand-soft) !important;}
.fcmp-tbl thead th.fcmp-me{color:var(--brand);}
.fcmp-note{
  margin:0; padding:13px 17px; background:var(--sunk);
  font-size:11.5px; line-height:1.75; color:var(--ink-2); word-break:keep-all;
}
.fcmp-note b{color:var(--ink);}

/* ---------- 시군구로 좁혀 보기 ---------- */
.narrow{margin:0 0 22px;}
.narrow h2{margin:0 0 11px; font-size:16px; letter-spacing:-.02em;}
.narrow-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px;}
.narrow-list a{
  display:inline-flex; align-items:baseline; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:7px 13px; font-size:13px; text-decoration:none; color:var(--ink);
}
.narrow-list a:hover{border-color:var(--green); color:var(--green);}
.narrow-list b{font-family:var(--num); font-size:12px; color:var(--ink-3); font-weight:700;}
.narrow-list a:hover b{color:var(--green);}

/* ---------- 지역별 값 ---------- */
.apr{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin:0 0 22px;
}
.apr h2{margin:0; padding:15px 17px 0; font-size:17px; letter-spacing:-.025em;}
.apr-lead{
  margin:0; padding:8px 17px 15px; font-size:14px; line-height:1.75;
  color:var(--ink-2); word-break:keep-all;
}
.apr-lead b{color:var(--ink); font-size:15px;}
.apr-band{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.apr-cell{background:var(--card); padding:13px 8px; text-align:center;}
.apr-cell em{
  display:block; font-style:normal; font-size:11px; color:var(--ink-3); margin-bottom:3px;
}
.apr-cell b{
  display:block; font-family:var(--num); font-size:17px;
  font-weight:800; letter-spacing:-.02em;
}
.apr-mid{background:var(--green-soft);}
.apr-mid b{color:var(--green);}
.apr-mgmt{
  margin:0; padding:13px 17px; border-bottom:1px solid var(--line-2);
  font-size:13px; line-height:1.75; color:var(--ink-2); word-break:keep-all;
}
.apr-mgmt b{color:var(--ink);}
.apr-note{
  margin:0; padding:13px 17px; background:var(--sunk);
  font-size:11.5px; line-height:1.75; color:var(--ink-2); word-break:keep-all;
}
.apr-note b{color:var(--ink);}

/* ---------- 규모 막대 ---------- */
.capbar{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:15px 17px; margin:0 0 20px;
}
.capbar-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px;}
.capbar-top span{font-size:12.5px; color:var(--ink-2);}
.capbar-top b{font-family:var(--num); font-size:17px; font-weight:800;}
.capbar-track{height:7px; background:var(--line-2); border-radius:4px; overflow:hidden;}
.capbar-track i{display:block; height:100%; background:var(--green); border-radius:4px;}
.capbar-note{margin:8px 0 0; font-size:11.5px; color:var(--ink-3);}

/* ---------- 안내 글: 그림과 짜임 ---------- */
.doc-lead{margin:-6px 0 22px; font-size:14px; color:var(--ink-2); line-height:1.8;}
.doc .lead{font-size:15.5px; line-height:1.95; color:var(--ink); margin:0 0 26px;}

/* 그림 */
.fig{margin:26px 0 30px; padding:0;}
.fig svg{
  display:block; width:100%; height:auto;
  background:var(--card); border:1px solid var(--line); border-radius:13px; padding:6px 0;
}
.fig figcaption{margin-top:10px; font-size:12.5px; color:var(--ink-3); line-height:1.7; text-align:center;}


.fig-box{fill:var(--card); stroke:var(--line); stroke-width:1.4;}
.fig-mark{fill:var(--brand-soft); stroke:#BFE2F4;}
.fig-last{fill:var(--brand); stroke:var(--brand);}
.fig-pane{fill:var(--card); stroke:var(--line); stroke-width:1.4;}
.fig-in{fill:var(--brand-soft); stroke:#BFE2F4;}
.fig-out{fill:var(--accent-soft); stroke:#F0D5BC;}
.fig-line{stroke:#B7C3CC; stroke-width:1.6;}
.fig-day{font-family:var(--num); font-size:12.5px; font-weight:800; fill:var(--ink-3);}
.fig-t{font-size:14px; font-weight:700; fill:var(--ink); text-anchor:middle;}
.fig-s{font-size:11.5px; fill:var(--ink-3); text-anchor:middle;}
.fig-warn{fill:var(--accent-ink);}
.fig-on{fill:#fff;}
.fig-li{font-size:13px; fill:var(--ink);}
.fig-strong{font-weight:700; fill:var(--accent-ink);}
.fig-dim{font-size:11.5px; fill:var(--ink-3);}

/* 눈에 띄게 둘 말 */
.callout{
  margin:24px 0; padding:16px 18px; border-radius:12px;
  background:var(--brand-soft); color:var(--brand-ink);
  font-size:14px; line-height:1.85;
}
.callout b{color:var(--brand-ink);}

/* 묻고 답하기 */
.qa{margin:20px 0 26px;}
.qa dt{font-size:14.5px; font-weight:700; color:var(--ink); margin:18px 0 7px;}
.qa dt:first-child{margin-top:0;}
.qa dd{margin:0; padding-left:13px; border-left:2px solid var(--line);
  font-size:14px; color:var(--ink-2); line-height:1.9;}

/* 차례대로 할 것 */
.steps{margin:18px 0 26px; padding-left:20px;}
.steps li{margin:0 0 12px; font-size:14px; color:var(--ink-2); line-height:1.9;}
.steps li b{color:var(--ink);}
.tail{margin:26px 0 0; font-size:14px; color:var(--ink-2); line-height:1.9;}

/* 알아보기 목록의 갈래 */
.gcat{margin:0 0 34px;}
.gcat h2{font-size:17px; margin:0 0 5px;}
.gcat-desc{margin:0 0 14px; font-size:13px; color:var(--ink-3); line-height:1.7;}
/* 견주기 막대 */
.fig-bar-pub{fill:var(--brand); }
.fig-bar-pri{fill:var(--accent);}
.fig-num{font-family:var(--num); font-size:13.5px; font-weight:800; fill:var(--ink);}
.fig-strong2{font-weight:700; fill:var(--ink);}
/* ---------- 펼침 메뉴 ---------- */
.nav-drop{position:relative; display:inline-flex;}
.nav-drop > a{display:inline-flex; align-items:center; gap:5px;}
.caret{
  width:0; height:0; display:inline-block;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; opacity:.5; transition:transform .18s;
}
.nav-drop:hover .caret{transform:rotate(180deg); opacity:.8;}
.drop{
  position:absolute; right:0; top:calc(100% + 7px); z-index:60;
  min-width:212px; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 28px rgba(19,26,22,.13); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .17s ease, transform .17s ease, visibility .17s;
}
.nav-drop:hover .drop, .nav-drop:focus-within .drop{opacity:1; visibility:visible; transform:none;}
.drop a{padding:9px 11px; border-radius:8px; display:block;}
.drop a:hover{background:var(--brand-soft);}
.drop b{display:block; font-size:13px; font-weight:700; color:var(--ink);}
.drop em{display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); margin-top:3px;}
/* 손가락으로 쓰는 화면에서는 펼침 없이 바로 알아보기로 간다 */
@media(hover:none){ .drop{display:none;} .caret{display:none;} }

/* ---------- 떠오르는 효과 ---------- */
.rise{opacity:0; transform:translateY(14px);}
.rise-on{opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);}
/* 카드가 여럿이면 조금씩 시차를 둔다 */
.cards li:nth-child(2).rise-on{transition-delay:.05s;}
.cards li:nth-child(3).rise-on{transition-delay:.10s;}
.cards li:nth-child(4).rise-on{transition-delay:.15s;}
.stats div:nth-child(2).rise-on{transition-delay:.06s;}
.stats div:nth-child(3).rise-on{transition-delay:.12s;}
.stats div:nth-child(4).rise-on{transition-delay:.18s;}
@media(prefers-reduced-motion: reduce){
  .rise{opacity:1; transform:none;}
}

/* 카드에 손을 얹었을 때 */
.cards li a{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
.cards li a:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(19,26,22,.09);}
/* 그림에 쓰는 낱낱의 모양들 */
.fig-node{fill:var(--brand);}
.fig-ring-in{fill:var(--brand-soft); stroke:var(--brand); stroke-width:2;}
.fig-ring-out{fill:var(--accent-soft); stroke:var(--accent); stroke-width:2;}
.fig-big{font-family:var(--num); font-size:17px; font-weight:800; fill:var(--ink); text-anchor:middle;}
.fig-big2{font-family:var(--num); font-size:13.5px; font-weight:800; fill:var(--brand-ink); text-anchor:middle;}
.fig-mini{font-size:11px; fill:#fff; text-anchor:middle; font-weight:700;}
/* 띠와 동심원 */
.fig-seg-a{fill:var(--brand);}
.fig-seg-b{fill:var(--accent);}
.fig-seg-b2{fill:#7FBEDE;}
.fig-seg-c{fill:#8FA3B0;}
.fig-seg-d{fill:#C2CDD4;}
.fig-seg-end{fill:#CFD8DE;}
.fig-ring-near{fill:var(--brand); }
.fig-ring-mid{fill:#BFE2F4;}
.fig-ring-far{fill:#EAF1F5;}
.fig-mini2{font-size:10.5px; fill:#fff; text-anchor:middle;}
/* 계단 그림 */
.fig-step-1{fill:var(--brand);}
.fig-step-2{fill:#E7EEF3; stroke:var(--line); stroke-width:1.4;}
.fig-step-3{fill:#D3E6F2; stroke:#BFE2F4; stroke-width:1.4;}
.fig-step-4{fill:var(--brand-soft); stroke:var(--brand); stroke-width:1.6;}
.fig-node-2{fill:#9DB2BF;}
/* ---------- 사진 ---------- */
.hero-img{margin:0 0 26px; border-radius:16px; overflow:hidden; background:var(--sunk);}
.hero-img img{display:block; width:100%; height:auto;}

/* 안내 첫 화면: 글과 사진을 나란히 */
.hero-with-img{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;}
.hero-photo{margin:0; border-radius:18px; overflow:hidden; background:var(--sunk);}
.hero-photo img{display:block; width:100%; height:auto;}
@media(max-width:820px){
  .hero-with-img{grid-template-columns:1fr; gap:22px;}
  .hero-photo{order:-1;}
}
/* ---------- 글 안 사진 ---------- */
/* 글을 끊지 않도록 낮게 자른 사진을 쓴다. 설명은 사진이 왜 거기 있는지 잇는 말이다 */
.art-img{margin:26px 0 28px;}
.art-img img{
  display:block; width:100%; height:auto;
  border-radius:14px; background:var(--sunk);
}
.art-img figcaption{
  margin-top:9px; font-size:12.5px; color:var(--ink-3);
  line-height:1.7; text-align:center;
}
@media(max-width:600px){
  .art-img{margin:20px -16px 22px;}
  .art-img img{border-radius:0;}
  .art-img figcaption{padding:0 16px;}
}
/* ---------- 띠 사진 ---------- */
/* 목록 위에 한 장 두어 글자만 이어지지 않게 한다 */
.band{margin:0 0 22px; border-radius:14px; overflow:hidden; background:var(--sunk);}
.band img{display:block; width:100%; height:auto;}
@media(max-width:600px){
  .band{margin:0 -16px 18px; border-radius:0;}
}
/* ---------- 지역 카드 안 유형별 링크 ---------- */
.area-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px 13px; list-style:none;
}
.area-card .c-name{display:block; font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:9px;}
.area-links{display:flex; flex-wrap:wrap; gap:6px;}
.area-links a{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--sunk); border-radius:999px; padding:5px 11px;
  font-size:12.5px; color:var(--ink-2); text-decoration:none;
  transition:background .14s, color .14s;
}
.area-links a b{font-family:var(--num); font-weight:800; color:var(--brand);}
.area-links a:hover{background:var(--brand-soft); color:var(--brand-ink);}
/* ---------- 시설 사진 ---------- */
.fac-photo{margin:0 0 22px; border-radius:14px; overflow:hidden; background:var(--sunk); position:relative;}
.fac-photo img{display:block; width:100%; height:auto; max-height:380px; object-fit:cover;}
.fac-photo figcaption{
  position:absolute; right:10px; bottom:10px;
  background:rgba(0,0,0,.5); color:#fff; border-radius:6px;
  padding:4px 9px; font-size:10.5px; line-height:1.4;
}
/* 그 시설 사진이 아닐 때는 흐리게 두어 헷갈리지 않게 한다 */
/* 그 시설 사진이 아니라는 것이 한눈에 드러나야 한다 */
.fac-photo-alt img{opacity:.7; filter:saturate(.85);}
.fac-photo-alt::before{
  content:"참고 사진"; position:absolute; left:10px; top:10px; z-index:2;
  background:var(--accent); color:#fff; border-radius:6px;
  padding:4px 10px; font-size:11px; font-weight:700;
}
.fac-photo-alt figcaption{left:10px; right:10px; text-align:center;}
.fac-photo-alt figcaption{background:rgba(0,0,0,.58);}
@media(max-width:600px){
  .fac-photo{margin:0 -16px 18px; border-radius:0;}
}

/* ---------- 소개 · 폰 화면 ----------
   줄어드는 효과는 걷어냈다. 기기마다 어긋나 손이 많이 갔다.
   사진 한 장과 그 위에 얹은 글, 그것으로 충분하다. */
.scrollhero{ position:relative; }
.sh-stage{ position:relative; }
.sh-shot{
  position:relative; margin:0; overflow:hidden;
  width:100%; aspect-ratio:1696 / 960;
}
.sh-bg{ display:block; width:100%; height:100%; object-fit:cover; }

/* 폰 화면 자리.
   사진에서 화면 사각형을 직접 재어 맞췄다 (원본 1600x906 기준 680,190 ~ 927,714). */
.sh-phone{
  position:absolute; overflow:hidden; pointer-events:none;
  left:42.50%; top:20.97%; width:15.50%; height:57.95%;
  border-radius:12% / 5.7%;
  background:#FBFBF9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),
             inset 0 2px 12px rgba(10,16,22,.14);
}
.sh-phone img{
  position:absolute; inset:0;
  width:100%; height:100%; max-width:none; min-width:0;
  object-fit:cover; object-position:top center; display:block;
  filter:brightness(.945) contrast(.97) saturate(.9);
}
/* 앞면 카메라 */
.sh-phone::before{
  content:""; position:absolute; z-index:2;
  left:50%; top:1.5%; width:4.2%; aspect-ratio:1;
  transform:translateX(-50%);
  background:#0B0F14; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}
/* 유리 반사 */
.sh-phone::after{
  content:""; position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(112deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.07) 22%,
      rgba(255,255,255,0) 44%,
      rgba(255,255,255,0) 100%),
    radial-gradient(120% 70% at 50% 108%, rgba(12,18,26,.13), rgba(12,18,26,0) 60%);
}

/* 글은 왼쪽 빈자리에. 폰은 42.5% 에서 시작하므로 그 앞에서 멈춘다 */
.sh-copy{
  position:absolute; z-index:4;
  left:7%; top:50%; transform:translateY(-50%);
  color:#1B2429; text-align:left;
  max-width:min(33%, 440px);
}
.sh-t{
  margin:0 0 14px; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(20px, 3.2vw, 50px); line-height:1.2;
}
.sh-s{
  margin:0; color:#4B5B66; font-weight:500;
  font-size:clamp(12px, 1.15vw, 17px); line-height:1.65;
}
.sh-t, .sh-s{ word-break:keep-all; }

/* 화면에 들어올 때 떠오른다 */
.sh-copy .sh-t, .sh-copy .sh-s{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.7,.25,1),
             transform .8s cubic-bezier(.2,.7,.25,1);
}
.sh-copy.on .sh-t, .sh-copy.on .sh-s{ opacity:1; transform:translateY(0); }
.sh-copy.on .sh-s{ transition-delay:.18s; }

/* 좁은 화면: 사진을 키워 폰을 오른쪽으로 밀고, 비는 왼쪽에 글을 얹는다 */
@media(max-width:759px){
  .sh-stage{ overflow:hidden; }
  .sh-shot{ width:168%; margin-left:-4%; }
  .sh-stage::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to right,
      rgba(255,255,255,.90) 0%, rgba(255,255,255,.66) 38%,
      rgba(255,255,255,.12) 58%, rgba(255,255,255,0) 70%);
  }
  .sh-copy{ left:5%; max-width:50%; }
  .sh-t{ font-size:clamp(18px, 5.2vw, 24px); }
  .sh-s{ font-size:12px; line-height:1.6; }
}

@media(prefers-reduced-motion: reduce){
  .sh-copy .sh-t, .sh-copy .sh-s{ opacity:1; transform:none; transition:none; }
}

/* ---------- 소개 맨 첫 화면: 자연 속 가족 영상 ----------
   말보다 먼저 보게 한다. 소리는 내지 않는다. */
.filmhero{
  position:relative; height:100vh; min-height:520px; max-width:100%;
  overflow:hidden; background:#0E1519;
}
.fh-vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* 글씨가 읽히도록 아래쪽만 덮는다.
   위쪽까지 덮으면 인물이 어두워져 영상이 칙칙해 보인다 */
.fh-veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(8,14,18,0)   0%,
    rgba(8,14,18,0)   48%,
    rgba(8,14,18,.22) 72%,
    rgba(8,14,18,.55) 100%);
}
.fh-copy{
  position:absolute; left:0; right:0; bottom:11%;
  padding:0 7vw; color:#fff;
  /* 줄바꿈은 글에 넣은 <br> 로만 한다. 폭이 좁아 제멋대로 잘리지 않게 넉넉히 둔다 */
  max-width:min(96%, 1000px);
}
/* 한글은 낱말 한가운데서 끊으면 안 된다(「정하/면」).
   히어로 글은 낱말을 지키고 줄 길이를 고르게 맞춘다 */
.fh-t, .fh-s, .sh-t, .sh-s{ word-break:keep-all; text-wrap:balance; }
.fh-t{
  margin:0 0 18px; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(28px, 3.6vw, 56px); line-height:1.22;
  text-shadow:0 2px 24px rgba(0,0,0,.32);
}
.fh-s{
  margin:0; font-weight:500; color:rgba(255,255,255,.92);
  font-size:clamp(13px, 1.2vw, 18px); line-height:1.7;
  text-shadow:0 1px 14px rgba(0,0,0,.36);
}

/* 글씨가 흐릿하게 떠오르며 자리를 잡는다. 큰 줄이 먼저, 작은 줄이 뒤따른다 */
@keyframes heroRise{
  from{ opacity:0; transform:translateY(22px); filter:blur(7px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0); }
}
.fh-t, .fh-s{
  opacity:0; animation:heroRise .95s cubic-bezier(.2,.7,.25,1) forwards;
}
.fh-t{ animation-delay:.35s; }
.fh-s{ animation-delay:.75s; }
/* 자동재생이 막힌 기기에서만 나오는 재생 단추 */
.fh-play{
  position:absolute; left:50%; top:50%; z-index:3;
  transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px 13px 18px; border:0; border-radius:999px;
  background:rgba(255,255,255,.94); color:#1B2429;
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}
.fh-play[hidden]{display:none;}
.fh-play svg{width:18px; height:18px;}
.fh-play:hover{background:#fff;}

/* 내려 보라는 표시 */
.fh-down{
  position:absolute; left:50%; bottom:26px; width:20px; height:20px;
  margin-left:-10px; border-right:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7);
  transform:rotate(45deg); animation:fhdown 1.9s ease-in-out infinite;
}
@keyframes fhdown{
  0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.45; }
  50%    { transform:rotate(45deg) translate(4px,4px); opacity:.95; }
}
@media(max-width:759px){
  .fh-copy{ bottom:16%; padding:0 8vw; max-width:100%; }
  .fh-t{ font-size:clamp(24px, 7vw, 34px); }
}
@media(prefers-reduced-motion: reduce){
  .fh-down{ animation:none; }
  .fh-t, .fh-s{ opacity:1; animation:none; }
  .sh-copy .sh-t, .sh-copy .sh-s{
    opacity:1; transform:none; filter:none; transition:none;
  }
}


/* ---------- 옆에 붙어 따라오는 알림 ----------
   본문은 가운데 720px 안에 있고, 남는 오른쪽 여백에 세워 둔다.
   자리가 없으면(좁은 화면) 본문 흐름 안으로 내려앉는다. */
.stick{
  position:sticky; top:96px; float:right;
  width:236px; margin:0 -300px 24px 32px;
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:20px 18px 18px;
  box-shadow:0 6px 24px rgba(19,26,22,.07);
  text-align:center;
}
.stick-t{
  margin:0 0 8px; font-size:15.5px; font-weight:800;
  color:var(--ink); line-height:1.45; letter-spacing:-.02em;
}
.stick-s{
  margin:0 0 14px; font-size:12.5px; line-height:1.65; color:var(--ink-3);
}
.stick-b{
  display:block; background:var(--brand); color:#fff;
  border-radius:10px; padding:11px 12px;
  font-size:13.5px; font-weight:700; text-decoration:none;
  transition:background .14s, transform .14s;
}
.stick-b:hover{ background:var(--brand-deep); transform:translateY(-1px); }
/* 창구가 아직 정해지지 않았다. 모양은 두되 눌러도 아무 일이 없게 한다 */
.stick-b.is-off{ cursor:default; }
.stick-b.is-off:hover{ background:var(--brand); transform:none; }

/* 옆에 세울 자리가 없으면 카드를 접고 오른쪽 아래에 떠 있는 단추 하나만 남긴다.
   본문 맨 위를 차지하지 않으니 글을 읽는 데 방해가 없다 */
@media(max-width:1180px){
  .stick{
    position:fixed; top:auto; left:auto; right:16px; bottom:20px; z-index:80;
    float:none; width:auto; margin:0; padding:0;
    background:none; border:0; box-shadow:none; text-align:left;
  }
  .stick-t, .stick-s{ display:none; }
  .stick-b{
    display:inline-flex; align-items:center; justify-content:center;
    padding:14px 22px; border-radius:999px; font-size:14px;
    box-shadow:0 6px 22px rgba(19,26,22,.24);
  }
  .stick-b.is-off:hover{ transform:none; }
  /* 카드가 접히면 카카오톡 단추도 떠 있는 알약이 된다 */
  .stick .kko-sm{
    display:inline-flex; width:auto; margin-top:0;
    padding:13px 22px; border-radius:999px; font-size:14px;
    box-shadow:0 6px 22px rgba(19,26,22,.24);
  }
}
@media(max-width:600px){
  .stick{ right:14px; bottom:16px; }
  .stick-b{ padding:13px 20px; font-size:13.5px; }
  .stick .kko-sm{ padding:12px 18px; font-size:13.5px; }
}

/* 좁은 화면에서는 그림이 폭에 맞춰 줄어들며 안쪽 글자까지 작아진다.
   짜임(칸 크기·간격)은 그대로 두고 글자만 키워 읽히게 한다 */
@media(max-width:680px){
  /* 짜임을 건드리지 않는 선에서만 키운다. 더 키우면 글자가 칸을 넘는다 */
  .fig-day{ font-size:14.5px; }
  .fig-t{ font-size:16px; }
  .fig-s{ font-size:13px; }
}

/* ---------- 좋은 점 · 아쉬운 점 두 칸 ---------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 22px;}
.two > div{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px 6px;
}
.two h3{margin:0 0 8px; font-size:13px; font-weight:700; color:var(--ink-2);}
.two .chk{margin:0;}
@media(max-width:600px){ .two{grid-template-columns:1fr;} }

/* 물음에 바로 답하는 문단은 조금 크고 진하게 */
.ans{font-size:15.5px; line-height:1.85;}

/* ---------- 글 맨 위의 물음과 한 줄 답 ----------
   찾는 사람은 답부터 원한다. 본문을 읽기 전에 먼저 답을 준다.
   기존 .qa 는 본문 안 문답 목록이라 이름을 따로 둔다 */
.qlead{
  margin:0 0 26px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); overflow:hidden;
}
.ql-i{padding:15px 18px; border-top:1px solid var(--line-2);}
.ql-i:first-child{border-top:none;}
.ql-q{
  margin:0 0 7px; font-size:14px; font-weight:700; color:var(--ink);
  padding-left:21px; position:relative; word-break:keep-all;
}
.ql-q::before{
  content:"Q"; position:absolute; left:0; top:0;
  font-family:var(--num); font-weight:800; color:var(--brand);
}
.ql-a{
  margin:0; font-size:13.5px; line-height:1.8; color:var(--ink-2);
  padding-left:21px; position:relative; word-break:keep-all;
}
.ql-a::before{
  content:"A"; position:absolute; left:0; top:0;
  font-family:var(--num); font-weight:800; color:var(--ink-3);
}
.ql-a b{color:var(--ink);}

/* 누가 만들고 언제 정리했는지 밝힌다. 읽는 사람이 판단할 수 있어야 한다 */
.foot-meta{
  margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line-2);
  font-size:11.5px; line-height:1.9; color:var(--ink-3);
}
.foot-meta b{color:var(--ink-2);}

/* ---------- 오래된 신고값 경고 ----------
   2016년 신고분이 283곳이다. 그대로 믿고 찾아가시면 안 된다 */
.price-old{
  margin:12px 0 0; padding:12px 14px; border-radius:10px;
  background:var(--accent-soft); border:1px solid #F0D2B4;
  color:var(--accent-ink); font-size:13px; line-height:1.75; word-break:keep-all;
}
.price-old b{color:var(--accent-deep);}
.price-old-mid{
  background:var(--sunk); border-color:var(--line);
  color:var(--ink-2); font-size:12.5px;
}

/* ---------- 상조 계약 자가점검 ----------
   계약서를 펴 놓고 하나씩 눌러 보게 한다. 답은 아무 데도 보내지 않는다 */
.chk-tool{
  margin:24px 0 30px; border:1px solid var(--line); border-radius:16px;
  background:var(--card); overflow:hidden;
}
.chk-head{padding:18px 20px 14px; border-bottom:1px solid var(--line-2); background:var(--sunk);}
.chk-t{margin:0 0 4px; font-size:14.5px; font-weight:700; color:var(--ink);}
.chk-s{margin:0; font-size:12px; color:var(--ink-3);}

.chk-list{list-style:none; margin:0; padding:0; counter-reset:cq;}
.chk-q{
  padding:16px 20px; border-top:1px solid var(--line-2);
  transition:background .15s;
}
.chk-q:first-child{border-top:none;}
.chk-q.need{background:#FEF7F2;}
.chk-ask{
  margin:0 0 10px; font-size:14px; line-height:1.6; color:var(--ink);
  counter-increment:cq; padding-left:26px; position:relative; word-break:keep-all;
}
.chk-ask::before{
  content:counter(cq); position:absolute; left:0; top:0;
  font-family:var(--num); font-size:12.5px; font-weight:800; color:var(--ink-3);
}
.chk-btns{display:flex; gap:6px; padding-left:26px; flex-wrap:wrap;}
.chk-btns button{
  border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  border-radius:999px; padding:7px 15px;
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:border-color .14s, background .14s, color .14s;
}
.chk-btns button:hover{border-color:var(--brand);}
.chk-btns button.on{background:var(--brand); border-color:var(--brand); color:#fff;}
.chk-q.need .chk-btns button.on{background:var(--accent); border-color:var(--accent);}
.chk-why{
  margin:10px 0 0; padding-left:26px;
  font-size:12.5px; line-height:1.7; color:var(--accent-ink); word-break:keep-all;
}

.chk-sum{
  padding:18px 20px; border-top:1px solid var(--line);
  background:var(--brand-soft); font-size:14px; line-height:1.75;
  color:var(--ink); word-break:keep-all;
}
.chk-sum b{color:var(--brand-ink);}
.chk-msg{margin:0;}
.chk-go{
  display:inline-block; margin-top:14px;
  background:var(--brand); color:#fff; border-radius:10px;
  padding:10px 18px; font-size:13px; font-weight:700; text-decoration:none;
}
.chk-go:hover{background:var(--brand-deep);}

@media(max-width:600px){
  .chk-q{padding:14px 16px;}
  .chk-head{padding:16px;}
  .chk-sum{padding:16px;}
  .chk-btns button{padding:7px 13px; font-size:12px;}
}

/* ---------- 개념 페이지의 지역 목록 ---------- */
.arealist{
  list-style:none; margin:0 0 24px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:8px;
}
.arealist a{
  display:flex; align-items:baseline; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; text-decoration:none; color:var(--ink-2); font-size:13px;
  transition:border-color .14s, transform .14s;
}
.arealist a:hover{border-color:var(--brand); transform:translateY(-1px);}
.arealist .ar-n{flex-grow:1; color:var(--ink); font-weight:600;}
.arealist .ar-c{font-family:var(--num); font-weight:800; color:var(--brand);}

/* ---------- 장례 총비용 계산기 ---------- */
.calc{
  margin:24px 0 30px; border:1px solid var(--line); border-radius:16px;
  background:var(--card); overflow:hidden;
}
.calc-head{padding:18px 20px 14px; border-bottom:1px solid var(--line-2); background:var(--sunk);}
.calc-t{margin:0 0 4px; font-size:14.5px; font-weight:700; color:var(--ink);}
.calc-s{margin:0; font-size:12px; color:var(--ink-3);}
.calc-body{padding:6px 20px 14px;}
.calc-g{
  margin:16px 0 6px; font-size:11.5px; font-weight:800;
  color:var(--ink-3); letter-spacing:.04em;
}
.calc-f{
  display:flex; align-items:center; gap:12px;
  padding:9px 0; border-top:1px solid var(--line-2);
}
.calc-g + .calc-f{border-top:none;}
.calc-n{flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--ink);}
.calc-n em{
  display:block; margin-top:2px; font-style:normal;
  font-size:11.5px; color:var(--ink-3); line-height:1.5; word-break:keep-all;
}
.calc-in{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;}
.calc-in input{
  width:96px; text-align:right;
  border:1px solid var(--line); border-radius:9px; padding:8px 10px;
  font-family:var(--num); font-size:14px; font-weight:700; color:var(--ink);
  background:var(--card); outline:none;
}
.calc-in input:focus{border-color:var(--brand);}
.calc-in i{font-style:normal; font-size:12px; color:var(--ink-3);}

.calc-out{padding:16px 20px; border-top:1px solid var(--line); background:var(--brand-soft);}
.calc-row{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:14px; color:var(--ink-2);
}
.calc-row b{font-family:var(--num); font-size:24px; font-weight:800; color:var(--brand-ink);}
.calc-note{
  margin:10px 0 0; font-size:12.5px; line-height:1.75;
  color:var(--ink-2); word-break:keep-all;
}
.calc-note:empty{display:none;}
.calc-note b{color:var(--accent-ink);}

@media(max-width:600px){
  .calc-body{padding:6px 16px 14px;}
  .calc-head, .calc-out{padding:16px;}
  .calc-in input{width:82px;}
}

/* ---------- 장례·상조 글 끝의 문의 자리 ---------- */
.ask{
  margin:34px 0 8px; padding:22px 24px 24px;
  border:1px solid #CFE7F5; border-radius:16px; background:var(--brand-soft);
}
.ask h2{margin:0 0 6px; font-size:17px; color:var(--ink);}
.ask-lead{margin:0 0 18px; font-size:13.5px; line-height:1.7; color:var(--ink-2); word-break:keep-all;}
.ask-two{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.ask-two > div{background:var(--card); border-radius:12px; padding:15px 17px 7px;}
.ask-two h3{margin:0 0 9px; font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.02em;}
.ask-two .chk{margin:0;}
.ask-two .chk li{font-size:13px; line-height:1.7;}
.ask-go{
  display:inline-block; margin-top:18px;
  background:var(--brand); color:#fff; border-radius:11px;
  padding:13px 26px; font-size:14px; font-weight:700; text-decoration:none;
}
.ask-go:hover{background:var(--brand-deep);}
.ask-soon{
  margin:18px 0 0; font-size:12.5px; color:var(--ink-3);
  padding:11px 14px; background:var(--card); border-radius:10px; word-break:keep-all;
}
@media(max-width:600px){
  .ask{padding:18px 16px 20px; margin-left:-16px; margin-right:-16px; border-radius:0;}
  .ask-two{grid-template-columns:1fr; gap:12px;}
}

/* ================= 첫 화면 팝업 (모든 쪽 공용) ================= */
/* ---------- 첫 화면 팝업: 모심이 무엇인지 알린다 ---------- */
.pop{position:fixed; inset:0; z-index:200; display:flex;
     align-items:center; justify-content:center; padding:20px;}
.pop[hidden]{display:none;}
.pop-back{position:absolute; inset:0; background:rgba(10,16,22,.5);
          backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
          animation:popfade .24s ease;}
.pop-box{position:relative; width:min(356px,100%);
         max-height:calc(100dvh - 40px); overflow:auto;
         background:var(--card); border-radius:24px;
         box-shadow:0 1px 2px rgba(10,16,22,.06),
                    0 12px 28px -6px rgba(10,16,22,.18),
                    0 32px 60px -12px rgba(10,16,22,.28);
         animation:poprise .34s cubic-bezier(.16,1,.3,1);}
@keyframes popfade{from{opacity:0}to{opacity:1}}
@keyframes poprise{from{opacity:0; transform:translateY(18px) scale(.97)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){
  .pop-back, .pop-box{animation:none;}
  .pop-go, .pop-go svg{transition:none;}
}

.pop-x{position:absolute; top:12px; right:12px; z-index:3;
       width:34px; height:34px; border:0; border-radius:50%;
       background:rgba(10,16,22,.34); color:#fff; font-size:20px; line-height:1;
       cursor:pointer; font-family:inherit;
       backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
       transition:background .16s ease;}
.pop-x:hover{background:rgba(10,16,22,.56);}

.pop-art{position:relative; aspect-ratio:2/1; overflow:hidden;
         background:var(--sunk); border-radius:24px 24px 0 0;}
.pop-art img{width:100%; height:100%; object-fit:cover; display:block;}
/* 사진 아래끝을 카드 바탕으로 부드럽게 넘겨 경계를 지운다 */
.pop-art:after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:26%;
  background:linear-gradient(to top, var(--card) 4%, rgba(255,255,255,0) 100%);}

.pop-copy{position:relative; padding:10px 22px 18px; text-align:left;}
.pop-t b{font-family:var(--num); font-weight:800; letter-spacing:-.035em;
  color:var(--brand);}
.pop-t{margin:0 0 9px; font-size:22px; font-weight:800; line-height:1.32;
  letter-spacing:-.035em; color:var(--ink); word-break:keep-all;}
.pop-s{margin:0 0 14px; font-size:13.5px; line-height:1.7; color:var(--ink-2);
  word-break:keep-all;}

/* 무엇을 갖고 있는 곳인지 숫자로 한눈에.
   상자를 두면 안쪽 여백 때문에 숫자만 혼자 들여쓰기가 된다.
   가로줄만 남겨 제목·설명·단추와 같은 축에 세운다 */
.pop-nums{display:flex; justify-content:space-between; gap:16px;
  margin:0 0 13px; padding:10px 0; background:none;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.pop-n{display:flex; flex-direction:column; align-items:center;
  background:none; padding:0; text-align:center;}
.pop-n b{display:block; font-family:var(--num); font-size:23px; font-weight:800;
  color:var(--ink); letter-spacing:-.04em; line-height:1.1;
  font-variant-numeric:tabular-nums;}
.pop-n span{display:block; margin-top:4px; font-size:12px; color:var(--ink-3);
  letter-spacing:-.01em; white-space:nowrap;}

.pop-go{display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:13px 16px; border-radius:14px; border:0;
  background:var(--brand); color:#fff; font-family:inherit;
  font-size:15.5px; font-weight:700; letter-spacing:-.02em;
  text-decoration:none; cursor:pointer;
  box-shadow:0 1px 2px rgba(19,98,136,.2), 0 6px 16px -4px rgba(34,158,217,.45);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;}
.pop-go:hover{background:var(--brand-deep); transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(19,98,136,.22), 0 10px 22px -4px rgba(34,158,217,.5);}
.pop-go:active{transform:none;}
.pop-go svg{width:17px; height:17px; flex:none;
  transition:transform .18s cubic-bezier(.2,.7,.25,1);}
.pop-go:hover svg{transform:translateX(3px);}

.pop-foot{display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:14px;}
.pop-foot button{border:0; background:none; padding:4px 2px; cursor:pointer;
  font-family:inherit; font-size:12.5px; color:var(--ink-3);
  text-underline-offset:3px; transition:color .16s ease;}
.pop-foot button:hover{color:var(--ink-2); text-decoration:underline;}
.pop-foot i{width:1px; height:11px; background:var(--line); display:block; flex:none;}

/* 세로가 짧은 기기에서는 사진을 더 낮춰 한 화면에 다 들어오게 한다 */
@media(max-height:700px){
  .pop-art{aspect-ratio:21/9;}
}
@media(max-width:759px){
  .pop{padding:16px;}
  .pop-box{width:min(360px,100%); border-radius:22px;}
  .pop-art{border-radius:22px 22px 0 0;}
  .pop-copy{padding:12px 20px 20px;}
  .pop-t{font-size:21px;}
  .pop-s{font-size:13.5px; margin-bottom:16px;}
  .pop-nums{margin-bottom:16px; padding:13px 0; gap:10px;}
  .pop-n span{font-size:11.5px;}
  .pop-n b{font-size:22px;}
  .pop-go{font-size:15px; padding:14px 16px;}
}
body.pop-on{overflow:hidden;}

/* ---------- 알아보기 카드 ----------
   글 제목만 줄지어 두면 무엇이 무엇인지 눈에 들어오지 않는다.
   갈래마다 색을 주고 그림을 얹어, 훑어보다가 걸리게 한다.
   그림은 선으로만 그린다. 사진을 열일곱 장 만들면 글씨가 섞여 들어간다. */
.gcards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(226px, 1fr));
}
.gcards a{
  display:flex; flex-direction:column; height:100%;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  text-decoration:none; color:var(--ink);
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.gcards a:hover{
  border-color:#B7D9EA; transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(19,26,22,.09);
}
.gc-thumb{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/10; flex-shrink:0;
}
.gc-thumb svg{width:54px; height:54px;}
/* 사진을 얹는 칸은 여백 없이 꽉 채운다 */
.gc-thumb.gc-photo{background:var(--sunk); padding:0;}
.gc-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.gc-body{display:flex; flex-direction:column; gap:5px; flex:1; padding:13px 15px 14px;}
.gc-name{font-size:14.5px; font-weight:700; line-height:1.45; letter-spacing:-.02em;}
.gc-desc{font-size:12px; color:var(--ink-3); line-height:1.65; flex:1;}
.gc-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px;}
.gc-tags i{
  font-style:normal; font-size:11px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:999px; padding:3px 8px;
}

/* 갈래마다 색을 달리해 어느 묶음의 글인지 색으로 먼저 읽히게 한다 */
.gc-start{background:var(--nat-soft); color:var(--nat-deep);}
.gc-choose{background:var(--myo-soft); color:var(--myo-deep);}
.gc-sangjo{background:var(--bon-soft); color:var(--bon-deep);}
.gc-topic{background:var(--accent-soft); color:var(--accent-deep);}

/* 좁은 화면에서는 세로로 길게 늘어놓지 않고 옆으로 밀어 본다 */
@media(max-width:619px){
  .gcards{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:72%;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:6px; scrollbar-width:none;
  }
  .gcards::-webkit-scrollbar{display:none;}
  .gcards li{scroll-snap-align:start;}
  .gc-thumb svg{width:46px; height:46px;}
}

/* 화면에는 안 보이되 검색 엔진과 화면 낭독기에는 읽히는 제목.
   지도처럼 큰 제목을 둘 자리가 없는 쪽에 쓴다. */
.only-read{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 시설 쪽 자주 묻는 것 — 사람들이 검색창에 치는 말 그대로 묻고 첫 문장에 답한다 */
.facqa{margin:34px 0 0;}
.facqa > h2{margin:0 0 14px; font-size:19px; letter-spacing:-.03em;}
.facqa-i{padding:14px 0; border-top:1px solid var(--line);}
.facqa-i:last-of-type{border-bottom:1px solid var(--line);}
.facqa-i h3{margin:0 0 6px; font-size:15.5px; font-weight:700; letter-spacing:-.03em; color:var(--ink);}
.facqa-i p{margin:0; font-size:14.5px; line-height:1.72; color:var(--ink-2);}
.facqa-src{margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-3);}
@media(max-width:640px){
  .facqa-i h3{font-size:15px;}
  .facqa-i p{font-size:14px;}
}

/* 지역 쪽 머리글 — 목록만 있던 자리에 이 지역이 어떤 곳인지 한 문단으로 알린다 */
.area-lead{margin:14px 0 20px; padding:14px 16px; background:var(--sunk);
  border-radius:12px; font-size:14.5px; line-height:1.75; color:var(--ink-2);}
.area-lead b{color:var(--ink); font-weight:700;}
.area-lead .num{font-variant-numeric:tabular-nums;}
@media(max-width:640px){ .area-lead{font-size:14px; padding:13px 14px;} }



/* ---------- 바닥글 ---------- */
/* 네 칸을 가로로 벌린다. 세로로 길게 늘어놓으면 화면 아래가 무거워진다 */
.foot-grid{display:grid; gap:26px 30px; grid-template-columns:1fr; margin-bottom:26px;}
/* 좁은 화면에서는 회사 정보만 한 줄을 다 쓰고, 바로가기와 문의는 나란히 둔다.
   셋을 세로로 쌓으면 바닥글만 한 화면을 넘긴다 */
@media(min-width:400px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-col-1{grid-column:1 / -1;}
}
@media(min-width:900px){
  .foot-grid{grid-template-columns:1.7fr 1fr 1.15fr;}
  .foot-col-1{grid-column:auto;}
}
.foot-brand{margin:0; font-size:17px; font-weight:800; letter-spacing:-.04em; color:var(--ink);}
.foot-tag{margin:2px 0 12px; font-size:12px; color:var(--brand-ink); font-weight:600; letter-spacing:-.02em;}
.foot-h{margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:-.01em; color:var(--ink-2);}
.foot-links{list-style:none; margin:0; padding:0; display:grid; gap:7px;}
.foot-links a{font-size:12.5px; color:var(--ink-3); text-decoration:none;}
.foot-links a:hover{color:var(--brand-ink);}
.foot-biz-nm{margin:0 0 6px; font-size:13px; color:var(--ink-2);}
.foot-biz-nm b{color:var(--ink); font-weight:700;}
.foot-biz-l{margin:0 0 6px; font-size:12px; line-height:1.7; color:var(--ink-3); word-break:keep-all;}
.foot-biz-l a{color:var(--ink-3); text-decoration:underline; text-underline-offset:2px;}
.foot-biz-l a:hover{color:var(--brand-ink);}
.foot-dim{color:var(--ink-3); opacity:.72;}
.foot-src{margin:0 0 14px; padding-top:18px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.8; color:var(--ink-3);}
.foot-src b{color:var(--ink-2); font-weight:600;}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px;
  font-size:11.5px; color:var(--ink-3);}
@media(max-width:620px){
  footer{margin-top:34px; padding:22px 16px 34px;}
  .foot-grid{gap:18px 20px; margin-bottom:20px;}
  .foot-brand{font-size:16px;}
  .foot-tag{margin-bottom:10px;}
  .foot-h{margin-bottom:8px;}
  .foot-links{gap:8px;}
  .foot-biz-l{margin-bottom:4px; line-height:1.62;}
  .foot-src{padding-top:14px; margin-bottom:10px;}
  .foot-bottom{flex-direction:column;}
}
/* 아주 좁은 화면에서는 바로가기를 두 줄로 접어 세로 길이를 줄인다 */
@media(max-width:399px){
  .foot-links{grid-template-columns:1fr 1fr; gap:8px 12px;}
}