/* ==========================================================================
   빈소 binso.co.kr — 공통 스타일

   설계 규칙 (임의값 금지)
   - 간격은 4px 배수 스케일만 사용: 4 8 12 16 20 24 32 40 48
   - 그리드 gap 은 2종:  --gap(16px) 패널 사이 / --gap-in(10px) 패널 안쪽
   - 카드 패딩은 2종:    --pad(20px) 넓은 카드 / --pad-sm(14px) 좁은 카드
   - 컬럼 비율은 3종만:  1fr 1fr  /  2fr 1fr  /  repeat(n,1fr)
   - 모든 그리드는 align-items:stretch (같은 줄 카드 높이 일치)
   ========================================================================== */

:root{
  /* 색 */
  --navy:#1B3A52;
  --navy-2:#24435C;
  --blue:#2C5F8A;
  --ink:#161A1F;
  --ink-2:#59616B;
  --ink-3:#8E969F;
  --line:#E2E7EB;
  --line-2:#CFD7DE;
  --bg:#F2F5F7;
  --soft:#EBF1F5;
  --white:#fff;
  --warn:#A8443C;

  /* 간격 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:48px;

  --gap:var(--s4);
  --gap-in:10px;
  --pad:var(--s6);
  --pad-sm:14px;

  /* 형태 */
  --r:10px;
  --r-lg:14px;
  --shadow:0 8px 28px rgba(27,58,82,.08);
  --container:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.7;
  letter-spacing:-.015em;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.container{width:min(var(--container),calc(100% - var(--s8)));margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--s4);top:-60px;z-index:999;background:var(--navy);color:#fff;padding:var(--s3) var(--s4);border-radius:0 0 var(--r) var(--r)}
.skip-link:focus{top:0}

/* ==========================================================================
   그리드 시스템 — 이 4개만 사용
   ========================================================================== */
.grid-2,.grid-3,.grid-4,.grid-2-1{display:grid;gap:var(--gap);align-items:stretch}
.grid-2  {grid-template-columns:repeat(2,1fr)}
.grid-3  {grid-template-columns:repeat(3,1fr)}
.grid-4  {grid-template-columns:repeat(4,1fr)}
.grid-2-1{grid-template-columns:2fr 1fr}

/* 그리드 직계 자식은 높이를 채운다 */
.grid-2>*,.grid-3>*,.grid-4>*,.grid-2-1>*{display:flex;flex-direction:column}

/* ==========================================================================
   헤더 / 드로어
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{height:68px;display:flex;align-items:center;gap:var(--s6)}
.brand{display:flex;align-items:center;gap:var(--s3)}
.brand img{display:block;height:40px;width:auto}
.brand-caption{
  font-size:12px;color:var(--ink-3);font-weight:500;white-space:nowrap;
  padding-left:var(--s3);border-left:1px solid var(--line);
}
/* 드로어 안 로고는 조금 작게 */
.drawer-head .brand img{height:34px}
/* 푸터 로고 — BINSO 포함 전체 로고 */
.footer-about .brand{display:block}
.footer-about .brand-full{display:block;height:88px;width:auto}
.desktop-nav{margin-left:auto;display:flex;gap:var(--s6);font-size:14px;font-weight:600}
.desktop-nav a{padding:var(--s1) 0;border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.desktop-nav a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.header-actions{display:flex;align-items:center}
.menu-btn{display:none;border:0;background:transparent;cursor:pointer;padding:var(--s1);line-height:0}
.menu-btn svg{width:24px;height:24px;stroke:var(--ink)}

.drawer-backdrop{position:fixed;inset:0;background:rgba(22,26,31,.4);z-index:90}
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(300px,84vw);z-index:100;
  background:var(--white);transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column;
}
.mobile-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)}
.drawer-close{border:0;background:transparent;cursor:pointer;padding:var(--s1);line-height:0}
.drawer-close svg{width:22px;height:22px;stroke:var(--ink)}
.mobile-drawer nav{display:flex;flex-direction:column;padding:var(--s2) 0;overflow-y:auto;flex:1}
.mobile-drawer nav a{padding:var(--s3) var(--s5);font-size:15px;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-drawer nav a:hover{background:var(--soft)}

/* ==========================================================================
   히어로
   ========================================================================== */
.hero{padding:var(--s9) 0 var(--s8);background:linear-gradient(180deg,var(--white) 0,var(--bg) 100%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--blue);margin-bottom:var(--s3)}
.hero h1{font-size:40px;line-height:1.28;letter-spacing:-.055em;font-weight:800}
.hero h1 em{font-style:normal;color:var(--navy)}
.hero-desc{margin-top:var(--s4);font-size:15.5px;color:var(--ink-2)}

.hero-search{position:relative;margin-top:var(--s6);display:grid;grid-template-columns:44px 1fr auto;align-items:center;background:var(--white);border:1.5px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow)}
.hero-search:focus-within{border-color:var(--navy)}
.hero-search .ico{display:flex;justify-content:center}
.hero-search .ico svg{width:19px;height:19px;stroke:var(--ink-3)}
.hero-search input{height:56px;border:0;outline:0;min-width:0;font-size:15.5px;background:transparent}
.hero-search input::placeholder{color:var(--ink-3)}
.hero-search .go{height:56px;padding:0 var(--s6);border:0;background:var(--navy);color:#fff;border-radius:0 10px 10px 0;font-weight:700;font-size:15px;cursor:pointer}
.hero-search .go:hover{background:var(--navy-2)}
.search-results{position:absolute;left:0;right:0;top:62px;background:var(--white);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);z-index:30;overflow:hidden}
.search-results a{display:block;padding:var(--s3) var(--s5);border-bottom:1px solid var(--line)}
.search-results a:last-child{border-bottom:0}
.search-results a:hover{background:var(--soft)}
.search-results b{display:block;font-size:14.5px;font-weight:600}
.search-results small{font-size:12.5px;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.chips button{border:1px solid var(--line-2);background:var(--white);border-radius:999px;padding:var(--s1) var(--s4);font-size:13px;color:var(--ink-2);cursor:pointer;transition:border-color .12s,color .12s}
.chips button:hover{border-color:var(--blue);color:var(--blue)}

.quick-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad);box-shadow:var(--shadow)}
.quick-card h2{font-size:14px;font-weight:700;margin-bottom:var(--s3);color:var(--navy)}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-in);align-items:stretch}
.quick-grid a{border:1px solid var(--line);border-radius:var(--r);padding:var(--pad-sm);transition:border-color .12s,background .12s}
.quick-grid a:hover{border-color:var(--blue);background:var(--soft)}
.quick-grid b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.025em}
.quick-grid small{font-size:11.5px;color:var(--ink-3);line-height:1.5}

/* ==========================================================================
   빠른 답변
   ========================================================================== */
.answer{background:var(--white);border-bottom:1px solid var(--line);padding:var(--s6) 0}
.answer-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.answer-head .eyebrow{margin:0}
.answer-head h2{font-size:18px;font-weight:800;letter-spacing:-.035em}
.answer dl{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
.answer dl>div{background:var(--soft);border-radius:var(--r);padding:var(--pad-sm) var(--s4)}
.answer dt{font-size:12px;font-weight:700;color:var(--blue);margin-bottom:var(--s1)}
.answer dd{font-size:14px;color:var(--ink-2);line-height:1.65}
.answer-src{margin-top:var(--s3);font-size:12.5px;color:var(--ink-3)}

/* ==========================================================================
   섹션 / 패널
   ========================================================================== */
.section{padding:var(--s9) 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5)}
.section-head h2{font-size:21px;font-weight:800;letter-spacing:-.04em}
.section-head .more{font-size:13px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.section-head .more:hover{color:var(--blue)}
.lead{font-size:15px;color:var(--ink-2);margin-bottom:var(--s5);max-width:760px}
.lead strong{color:var(--ink);font-weight:700}

.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.panel-head h2,.panel-head h3{font-size:16px;font-weight:700;letter-spacing:-.03em}
.panel-head a{font-size:12.5px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.panel-head a:hover{color:var(--blue)}
.panel h4{font-size:14.5px;font-weight:700;letter-spacing:-.025em;margin:var(--s5) 0 var(--s2)}
.panel h4:first-of-type{margin-top:0}
.panel p{font-size:14.5px;color:var(--ink-2)}
.panel p+p{margin-top:var(--s2)}
.panel p strong{color:var(--ink);font-weight:700}
.panel .push{margin-top:auto;padding-top:var(--s4)}

/* ==========================================================================
   지역 그리드 — 17개 시도 + 전체 = 18칸, 9열 2행으로 딱 맞음
   ========================================================================== */
.region-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.region-grid a{background:var(--white);padding:var(--pad-sm) var(--s2);text-align:center;transition:background .12s}
.region-grid a:hover{background:var(--soft)}
.region-grid .rn{display:block;font-size:14px;font-weight:600}
.region-grid .rc{display:block;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-top:2px}

/* ==========================================================================
   리스트류
   ========================================================================== */
.rank-list li{border-bottom:1px solid var(--line)}
.rank-list li:last-child{border-bottom:0}
.rank-list a{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:var(--s3);padding:var(--s3) 2px}
.rank-list .rk{font-size:13px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;text-align:center}
.rank-list b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.025em}
.rank-list small{font-size:12.5px;color:var(--ink-3)}
.rank-list .meta{font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.rank-list a:hover b{color:var(--blue)}

.steps{counter-reset:s;border-top:1px solid var(--line)}
.steps li{counter-increment:s;position:relative;padding:var(--pad-sm) 0 var(--pad-sm) var(--s8);border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:var(--pad-sm);width:25px;height:25px;border-radius:50%;background:var(--soft);color:var(--navy);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.steps b{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}

.bullets li{position:relative;padding:var(--s2) 0 var(--s2) 22px;font-size:14.5px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.bullets li:last-child{border-bottom:0}
.bullets li::before{content:'';position:absolute;left:6px;top:17px;width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.bullets b{color:var(--ink);font-weight:700}
.bullets.avoid li::before{content:'\00d7';left:4px;top:7px;width:auto;height:auto;border-radius:0;background:none;color:var(--warn);font-weight:800;font-size:14px}

/* ==========================================================================
   표
   ========================================================================== */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:var(--s3) var(--s2);text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:12.5px;font-weight:700;color:var(--ink-3);border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{color:var(--ink-2)}
.tbl td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy);white-space:nowrap}
.tbl th.num{color:var(--ink-3)}
.note-sm{font-size:12.5px;color:var(--ink-3);margin-top:var(--s3);line-height:1.7}

.callout{background:var(--soft);border-radius:var(--r);padding:var(--pad-sm) var(--s4);font-size:13.5px;color:var(--navy);line-height:1.75;margin-top:var(--s4)}
.callout b{font-weight:800;color:var(--navy)}


/* ==========================================================================
   3일 절차 / 도구 / 가이드 / 화환 카드
   ========================================================================== */
.day{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad)}
.day-head{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s3)}
.day-num{font-size:11.5px;font-weight:800;color:var(--navy);background:var(--soft);border-radius:5px;padding:3px var(--s2)}
.day-title{font-size:15px;font-weight:700;letter-spacing:-.03em}
.day li{position:relative;padding:var(--s1) 0 var(--s1) var(--s3);font-size:14px;color:var(--ink-2)}
.day li::before{content:'\00b7';position:absolute;left:2px;color:var(--ink-3)}

.card-link{border-radius:var(--r-lg);padding:var(--pad-sm);transition:background .12s,border-color .12s}
.card-link b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.03em}
.card-link small{font-size:12px;line-height:1.5}

.tool-grid .card-link{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.tool-grid .card-link:hover{background:var(--navy-2)}
.tool-grid .card-link small{opacity:.75}

.guide-grid .card-link{background:var(--white);border:1px solid var(--line)}
.guide-grid .card-link:hover{border-color:var(--blue);background:var(--soft)}
.guide-grid .card-link b{font-weight:600;letter-spacing:-.025em}
.guide-grid .card-link small{color:var(--ink-3)}

.flower-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad-sm)}
.flower-item .fn{font-size:13.5px;font-weight:600;letter-spacing:-.025em}
.flower-item .fp{font-size:19px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:2px}


/* ==========================================================================
   FAQ
   ========================================================================== */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{padding:var(--s4) var(--s7) var(--s4) 2px;font-size:15px;font-weight:600;letter-spacing:-.025em;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:var(--s2);top:var(--s3);font-size:19px;font-weight:400;color:var(--ink-3)}
.faq details[open] summary{color:var(--navy)}
.faq details[open] summary::after{content:'\2212'}
.faq .ans{padding:0 2px var(--s4);font-size:14.5px;color:var(--ink-2)}

/* ==========================================================================
   푸터
   ========================================================================== */
.site-footer{background:var(--white);border-top:1px solid var(--line);margin-top:var(--s5);padding:var(--s8) 0 var(--s7)}
.footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:var(--s7);align-items:start}
.footer-grid h3{font-size:13px;font-weight:700;margin-bottom:var(--s3)}
.footer-grid a{display:block;font-size:13px;color:var(--ink-2);padding:3px 0}
.footer-grid a:hover{color:var(--blue)}
.footer-about p{font-size:13px;color:var(--ink-3);line-height:1.8;margin-top:var(--s3)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.footer-bottom nav{display:flex;gap:var(--s4);flex-wrap:wrap}
.footer-bottom a:hover{color:var(--blue)}

.mobile-cta{display:none}

/* ==========================================================================
   상세 페이지
   ========================================================================== */
.crumb{padding:var(--s3) 0;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow-x:auto}
.crumb a{color:var(--ink-2);font-weight:500}
.crumb a:hover{color:var(--blue)}
.crumb i{font-style:normal;margin:0 var(--s2);color:var(--line-2)}

.hall-head{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.tag{display:inline-block;font-size:11.5px;font-weight:700;color:var(--navy);background:var(--soft);border-radius:5px;padding:var(--s1) var(--gap-in);margin-bottom:var(--s3)}
.hall-head h1{font-size:30px;font-weight:800;letter-spacing:-.05em;line-height:1.3}
.hall-addr{margin-top:var(--s2);font-size:15px;color:var(--ink-2)}
.hall-lead{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch;margin-top:var(--gap)}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad) var(--pad-sm);text-align:center}
.stat .v{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.055em;color:var(--navy);font-variant-numeric:tabular-nums}
.stat .v span{font-size:15px;font-weight:700;letter-spacing:-.03em}
.stat .k{font-size:12.5px;color:var(--ink-3);margin-top:var(--s2);font-weight:500}

.info-list{border-top:1px solid var(--line)}
.info-list>div{display:flex;gap:var(--s4);padding:var(--s3) 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.info-list dt{width:84px;flex-shrink:0;color:var(--ink-3);font-weight:500}
.info-list dd{flex:1;font-weight:500;word-break:break-all}
.info-list dd a{color:var(--blue);font-weight:700}

.fac-list{display:flex;flex-wrap:wrap;gap:var(--s2)}
.fac-list span{font-size:13.5px;font-weight:600;letter-spacing:-.025em;border:1px solid var(--line-2);color:var(--navy);background:var(--soft);border-radius:7px;padding:var(--s2) var(--pad-sm)}

.map-box{height:260px;border-radius:var(--r);border:1px solid var(--line-2);background:repeating-linear-gradient(0deg,transparent 0 31px,var(--line) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,var(--line) 31px 32px),var(--bg);display:flex;align-items:center;justify-content:center;font-size:13.5px;color:var(--ink-3);font-weight:500}
.map-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:var(--gap)}
.map-btns a{text-align:center;padding:var(--s3);border-radius:var(--r);border:1px solid var(--line-2);font-size:14.5px;font-weight:600;background:var(--white);transition:border-color .12s,background .12s}
.map-btns a:hover{border-color:var(--blue);background:var(--soft)}



/* ==========================================================================
   반응형 — 컬럼 수만 줄이고 간격 스케일은 유지
   ========================================================================== */
@media (max-width:1024px){
  .desktop-nav{display:none}
  .brand-caption{display:none}
  .menu-btn{display:block;margin-left:auto}
  .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero h1{font-size:33px}
  .grid-3,.grid-2-1{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .region-grid{grid-template-columns:repeat(6,1fr)}
  .answer dl{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--s6)}
}
@media (max-width:720px){
  .container{width:calc(100% - var(--s7))}
  .hero{padding:var(--s7) 0 var(--s6)}
  .hero h1{font-size:27px}
  .hero-search{grid-template-columns:40px 1fr}
  .hero-search .go{display:none}
  .section{padding:var(--s6) 0}
  .section-head h2{font-size:18px}
  .grid-2{grid-template-columns:1fr}
  .region-grid{grid-template-columns:repeat(3,1fr)}
  .hall-head{padding:var(--pad)}
  .hall-head h1{font-size:23px}
  .stat .v{font-size:32px}
  .tbl th,.tbl td{padding:var(--s3) var(--s1);font-size:13.5px}
  .footer-grid{grid-template-columns:1fr;gap:var(--s5)}
  .mobile-cta{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;height:56px;z-index:70;
  }
  .mobile-cta a{display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:-.03em}
  .mobile-cta a:first-child{background:var(--white);color:var(--navy);border-top:1px solid var(--line);border-right:1px solid var(--line)}
  .mobile-cta a:last-child{background:var(--navy);color:#fff}
}
@media (max-width:420px){
  .grid-4,.quick-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ==========================================================================
   v5 추가 — 섹션 리듬 / 본문 조판
   흰 패널만 반복되지 않도록 배경을 교차시키고,
   읽는 본문은 패널 없이 넓게 풀어 데이터 블록과 구분한다.
   ========================================================================== */
.section--alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* 읽는 본문 — 패널 없이 */
.prose{max-width:820px}
.prose p{font-size:15.5px;color:var(--ink-2);line-height:1.85}
.prose p+p{margin-top:var(--s3)}
.prose strong{color:var(--ink);font-weight:700}
.prose h3{font-size:17px;font-weight:800;letter-spacing:-.035em;margin:var(--s7) 0 var(--s3)}
.prose h3:first-child{margin-top:0}

/* 기준 목록 — 번호가 순서를 뜻할 때만 사용 */
.criteria{counter-reset:c;border-top:1px solid var(--line-2)}
.criteria li{counter-increment:c;position:relative;padding:var(--s5) 0 var(--s5) var(--s9);border-bottom:1px solid var(--line)}
.criteria li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:var(--s5);font-size:14px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.criteria b{display:block;font-size:16px;font-weight:700;letter-spacing:-.03em;margin-bottom:var(--s1)}
.criteria p{font-size:14.5px;color:var(--ink-2);line-height:1.8}

/* 비교 카드 2종 */
.vs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);align-items:stretch}
.vs>*{display:flex;flex-direction:column}
.vs-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad)}
.vs-card.is-alt{background:var(--soft);border-color:var(--line-2)}
.vs-card h4{font-size:16px;font-weight:800;letter-spacing:-.035em;margin-bottom:var(--s1)}
.vs-card .sub{font-size:12.5px;color:var(--ink-3);margin-bottom:var(--s4)}
.vs-card dl>div{display:flex;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:14px}
.vs-card dl>div:last-child{border-bottom:0}
.vs-card dt{width:62px;flex-shrink:0;color:var(--ink-3);font-weight:600;font-size:12.5px;padding-top:2px}
.vs-card dd{flex:1;color:var(--ink-2);line-height:1.65}

/* 용어 풀이 */
.terms{border-top:1px solid var(--line-2)}
.terms>div{display:grid;grid-template-columns:132px 1fr;gap:var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.terms dt{font-size:15px;font-weight:700;letter-spacing:-.03em}
.terms dt small{display:block;font-size:12px;color:var(--ink-3);font-weight:500;margin-top:2px}
.terms dd{font-size:14.5px;color:var(--ink-2);line-height:1.8}

/* 비용 항목 */
.cost li{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.cost li:last-child{border-bottom:0}
.cost b{font-size:14.5px;font-weight:600}
.cost small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;line-height:1.6;margin-top:1px}
.cost .w{font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap}

/* 조문 안내 요약 — 링크만 */
.brief li{display:grid;grid-template-columns:96px 1fr auto;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:14.5px}
.brief li:last-child{border-bottom:0}
.brief dt,.brief .k{font-size:12.5px;font-weight:700;color:var(--blue)}
.brief .v{color:var(--ink-2);line-height:1.7}
.brief .go{font-size:12.5px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.brief li:hover .go{color:var(--blue)}

@media (max-width:720px){
  .vs{grid-template-columns:1fr}
  .terms>div{grid-template-columns:1fr;gap:var(--s1)}
  .criteria li{padding-left:var(--s7)}
  .brief li{grid-template-columns:1fr;gap:var(--s1)}
  .brief .go{display:none}
}

/* ==========================================================================
   v6 추가 — 대분량 원페이지 대응
   ========================================================================== */

/* 파트 목차 */
.toc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad)}
.toc-title{font-size:13px;font-weight:800;color:var(--ink-3);margin-bottom:var(--s4)}
.toc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-in);counter-reset:tc}
.toc-grid a{counter-increment:tc;display:block;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--pad-sm);transition:border-color .12s,background .12s}
.toc-grid a:hover{border-color:var(--blue);background:var(--soft)}
.toc-grid a::before{content:counter(tc,decimal-leading-zero);display:block;font-size:11px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;margin-bottom:2px}
.toc-grid b{display:block;font-size:14px;font-weight:700;letter-spacing:-.03em}
.toc-grid small{font-size:11.5px;color:var(--ink-3);line-height:1.5}

/* 파트 구분 헤더 */
.part-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);padding-bottom:var(--s5);margin-bottom:var(--s7);border-bottom:2px solid var(--navy)}
.part-num{font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.1em;font-variant-numeric:tabular-nums;display:block;margin-bottom:var(--s1)}
.part-head h2{font-size:26px;font-weight:800;letter-spacing:-.045em;line-height:1.25}
.part-head p{font-size:14px;color:var(--ink-3);margin-top:var(--s2);max-width:520px}
.part-head .top{font-size:12.5px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.part-head .top:hover{color:var(--blue)}

/* 파트 하단 개별 페이지 링크 */
.part-more{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line-2)}
.part-more span{font-size:12.5px;font-weight:700;color:var(--ink-3);align-self:center;margin-right:var(--s2)}
.part-more a{font-size:13.5px;font-weight:600;letter-spacing:-.025em;border:1px solid var(--line-2);background:var(--white);border-radius:999px;padding:var(--s2) var(--s4);transition:border-color .12s,color .12s}
.part-more a:hover{border-color:var(--blue);color:var(--blue)}

/* 타임라인 (장례 절차) */
.timeline{border-left:2px solid var(--line-2);padding-left:var(--s6);margin-left:var(--s2)}
.timeline>li{position:relative;padding-bottom:var(--s6)}
.timeline>li:last-child{padding-bottom:0}
.timeline>li::before{content:'';position:absolute;left:calc(-1 * var(--s6) - 6px);top:6px;width:10px;height:10px;border-radius:50%;background:var(--navy);border:2px solid var(--white);box-shadow:0 0 0 2px var(--line-2)}
.timeline .tl-when{font-size:11.5px;font-weight:800;color:var(--blue);letter-spacing:.06em}
.timeline .tl-title{font-size:16px;font-weight:700;letter-spacing:-.03em;margin:2px 0 var(--s2)}
.timeline .tl-body{font-size:14.5px;color:var(--ink-2);line-height:1.8}
.timeline ul{margin-top:var(--s2)}
.timeline ul li{position:relative;padding:3px 0 3px var(--s3);font-size:14px;color:var(--ink-2)}
.timeline ul li::before{content:'\00b7';position:absolute;left:2px;color:var(--ink-3)}

/* 장지 유형 카드 */
.opt{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad)}
.opt h4{font-size:16px;font-weight:800;letter-spacing:-.035em}
.opt .opt-sub{font-size:12.5px;color:var(--ink-3);margin:2px 0 var(--s3)}
.opt p{font-size:14px;color:var(--ink-2);line-height:1.75}
.opt dl{margin-top:var(--s3);border-top:1px solid var(--line)}
.opt dl>div{display:flex;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:13.5px}
.opt dl>div:last-child{border-bottom:0}
.opt dt{width:54px;flex-shrink:0;color:var(--ink-3);font-weight:600;font-size:12.5px;padding-top:1px}
.opt dd{flex:1;color:var(--ink-2);line-height:1.6}

/* 체크리스트 (행정) */
.todo>li{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.todo>li:last-child{border-bottom:0}
.todo .mark{width:18px;height:18px;border:1.5px solid var(--line-2);border-radius:4px;flex-shrink:0;align-self:center}
.todo b{font-size:14.5px;font-weight:600;letter-spacing:-.025em}
.todo small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:1px}
.todo .due{font-size:12px;font-weight:700;color:var(--warn);white-space:nowrap}
.todo .due.ok{color:var(--ink-3)}

@media (max-width:1024px){
  .toc-grid{grid-template-columns:repeat(2,1fr)}
  .part-head h2{font-size:22px}
}
@media (max-width:720px){
  .toc-grid{grid-template-columns:1fr}
  .part-head{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .part-head h2{font-size:20px}
  .part-head .top{display:none}
  .timeline{padding-left:var(--s5)}
  .timeline>li::before{left:calc(-1 * var(--s5) - 6px)}
  .todo>li{grid-template-columns:1fr auto}
  .todo .mark{display:none}
}

/* ==========================================================================
   v7 — 높이 불균형 보정
   stretch 로 늘어난 짧은 패널 안에 빈 공간이 생기는 문제.
   억지로 늘리지 않고 (1) 배치를 바꾸거나 (2) 카드를 쌓아 채운다.
   ========================================================================== */

/* 한 컬럼에 카드를 세로로 쌓을 때 */
.stack{gap:var(--gap)}
.stack>*{flex:0 0 auto}

/* 항목이 많은 목록은 2열로 — 세로 길이를 절반으로 */
.cost.is-2col{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--s7)}
.cost.is-2col li{border-bottom:1px solid var(--line)}
.cost.is-2col li:nth-last-child(-n+2){border-bottom:0}

/* 내용 길이가 본래 다른 행은 stretch 를 풀어 자연 높이로 */
.grid-2.is-top,.grid-2-1.is-top{align-items:start}

@media (max-width:720px){
  .cost.is-2col{grid-template-columns:1fr}
  .cost.is-2col li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .cost.is-2col li:last-child{border-bottom:0}
}

/* ==========================================================================
   v8 — 패널 내 도해 (PC / 모바일 이미지 분리)
   1024px 초과: 가로 3:2 이미지  /  1024px 이하: 정사각 1:1 이미지
   <picture> 의 media 쿼리로 브라우저가 알아서 고른다.
   ========================================================================== */
.fig{margin:var(--s4) 0 0;flex:0 0 auto}
.fig .frame{
  display:block;position:relative;
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--white);
  transition:border-color .12s;
}
.fig .frame:hover{border-color:var(--blue)}
.fig img{display:block;width:100%;height:auto}

/* 확대 배지 */
.fig .zoom{
  position:absolute;right:var(--s2);bottom:var(--s2);
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(22,26,31,.66);color:#fff;
  border-radius:999px;padding:5px 11px;
  font-size:11.5px;font-weight:700;letter-spacing:-.02em;
  backdrop-filter:blur(4px);
}
.fig .zoom svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2}
.fig figcaption{font-size:12.5px;color:var(--ink-3);margin-top:var(--s2);line-height:1.6}

/* ==========================================================================
   v11 — 장례식장 상세 페이지 전용
   ========================================================================== */

/* 규모 비교 막대 */
.compare>div{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.compare>div:last-child{border-bottom:0}
.compare .row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)}
.compare .lbl{font-size:14px;font-weight:600}
.compare .val{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.compare .val b{color:var(--navy);font-weight:800;font-size:15px}
.compare .bar{position:relative;height:8px;background:var(--soft);border-radius:99px;overflow:hidden}
.compare .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--navy);border-radius:99px}
.compare .bar .avg{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-3)}
.compare .cap{font-size:12px;color:var(--ink-3);margin-top:var(--s2);line-height:1.6}
.compare-legend{display:flex;gap:var(--s4);margin-top:var(--s3);font-size:12px;color:var(--ink-3)}
.compare-legend span{display:inline-flex;align-items:center;gap:5px}
.compare-legend i{width:11px;height:8px;border-radius:2px;background:var(--navy);display:inline-block}
.compare-legend i.line{width:2px;height:12px;background:var(--ink-3);border-radius:0}

/* 교통 / 거리 목록 */
.route>li{display:grid;grid-template-columns:56px 1fr auto;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.route>li:last-child{border-bottom:0}
.route .kind{font-size:11.5px;font-weight:800;color:#fff;background:var(--navy);border-radius:5px;padding:4px 0;text-align:center;letter-spacing:-.02em}
.route .kind.bus{background:var(--blue)}
.route .kind.car{background:var(--ink-2)}
.route b{font-size:14.5px;font-weight:600;letter-spacing:-.025em}
.route small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:1px}
.route .dist{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}

/* 데이터 미확보 표시 */
.pending{
  border:1px dashed var(--line-2);border-radius:var(--r);
  padding:var(--s4);font-size:13.5px;color:var(--ink-3);line-height:1.7;
  background:var(--bg);
}
.pending b{color:var(--ink-2);font-weight:700}

@media (max-width:720px){
  .route>li{grid-template-columns:52px 1fr;row-gap:var(--s1)}
  .route .dist{grid-column:2}
}


/* ==========================================================================
   v12 — 카드 바닥 정렬
   stretch 를 유지하되 남는 공간을 카드 "안"의 특정 요소가 흡수하게 한다.
   .is-top(정렬 해제)은 더 이상 쓰지 않는다.
   ========================================================================== */

/* 남는 세로 공간을 흡수하는 요소 */
.fill{flex:1 1 auto;min-height:0}

/* 패널 내부도 flex column 이어야 .fill 이 동작 */
.panel,.opt{display:flex;flex-direction:column}

/* 지도는 컬럼 높이에 맞춰 늘어난다 */
.map-box{height:auto;min-height:260px;border-radius:var(--r-lg)}

/* 상세 페이지 스탯 아래 여백 */
.stats{margin-bottom:var(--s9)}

/* 지역 라벨이 들어가는 순위 목록 — 첫 칸을 넓혀 줄바꿈 방지 */
.rank-list.is-region a{grid-template-columns:52px 1fr auto}
.rank-list.is-region .rk{
  font-size:11.5px;font-weight:700;color:var(--ink-2);
  background:var(--soft);border-radius:5px;padding:4px 0;
  white-space:nowrap;letter-spacing:-.03em;
}

/* prose 가 그리드 자식일 때 위쪽 정렬 유지 */
.grid-2>.prose,.grid-2-1>.prose{justify-content:flex-start}

/* 마지막 콜아웃을 패널 바닥에 붙인다.
   flex / grid 로 늘리면 <b> 가 독립 항목이 되어 본문과 갈라지므로
   박스는 block 그대로 두고 위쪽 여백만 밀어낸다. */
.callout.fill{
  flex:0 0 auto;
  display:block;
  margin-top:auto;
}
/* 세로로 쌓은 카드 중 마지막 카드가 컬럼 높이를 채운다 */
.stack>*:last-child{flex:1 1 auto}

/* ==========================================================================
   v13 — 근조화환 상품 카드 (이미지형)
   ========================================================================== */
.flower-item{padding:0;overflow:hidden}
.flower-item .thumb{
  display:block;width:100%;aspect-ratio:288/280;
  object-fit:cover;background:var(--soft);
  border-bottom:1px solid var(--line);
}
.flower-item .body{padding:var(--pad-sm);display:flex;flex-direction:column;flex:1 1 auto}
.flower-item .fn{font-size:13.5px;font-weight:600;letter-spacing:-.025em;margin:0}
.flower-item .fp{
  font-size:19px;font-weight:800;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;margin-top:2px;
}
.flower-item .fnote{
  font-size:11.5px;color:var(--ink-3);line-height:1.5;
  margin-top:auto;padding-top:var(--s2);
}


/* ==========================================================================
   v14 — 패널 안 요소 정렬 보정
   .prose 는 "전체 폭 본문" 전용. 패널 옆에 나란히 놓을 때는 .panel 을 쓴다.
   ========================================================================== */

/* 패널 안 문단 간격 */
.panel>p+p{margin-top:var(--s3)}

/* 패널 안 주문 버튼 — 남는 공간을 흡수하되 버튼은 커지지 않는다 */

/* 연한 배경 패널 안의 콜아웃은 흰 배경으로 대비 */
.panel[style*="--bg"] .callout{background:var(--white)}

/* compare 가 패널 안에 들어갔을 때 상단 여백 제거 */
.panel>.compare>div:first-child{padding-top:0}

/* ==========================================================================
   v15 — 주문 흐름 (화환 → 준비물 → 주문 → 리본)
   ========================================================================== */

/* 주문 전 확인할 3가지 */
.need{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);counter-reset:nd;margin-top:var(--s6)}
.need>div{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--pad);counter-increment:nd;position:relative;
}
.need>div::before{
  content:counter(nd);
  position:absolute;top:var(--pad);right:var(--pad);
  width:24px;height:24px;border-radius:50%;
  background:var(--soft);color:var(--navy);
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;
}
.need b{display:block;font-size:15px;font-weight:700;letter-spacing:-.03em}
.need p{font-size:13.5px;color:var(--ink-2);line-height:1.7;margin-top:var(--s2)}
.need .eg{
  display:inline-block;margin-top:var(--s3);font-size:12.5px;font-weight:600;
  color:var(--navy);background:var(--soft);border-radius:6px;padding:5px 10px;
}

/* 전체 폭 주문 버튼 */
.order-bar{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;margin-top:var(--gap);
  background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:var(--s5);font-size:16px;font-weight:700;letter-spacing:-.03em;
  transition:background .12s;
}
.order-bar:hover{background:var(--navy-2)}
.order-bar small{font-size:13px;font-weight:500;opacity:.7}
.order-note{font-size:12.5px;color:var(--ink-3);text-align:center;margin-top:var(--s5);line-height:1.7}
.order-note a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* 리본 문구 — 종교 탭 */
.ribbon-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--gap)}
.ribbon-tabs button{
  border:1px solid var(--line-2);background:var(--white);border-radius:var(--r);
  padding:var(--s3) var(--s2);font-size:14px;font-weight:600;letter-spacing:-.03em;
  color:var(--ink-2);cursor:pointer;transition:all .12s;
}
.ribbon-tabs button:hover{border-color:var(--blue);color:var(--blue)}
.ribbon-tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

.ribbon-out{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  background:var(--soft);border-radius:var(--r-lg);padding:var(--s5);
}
.ribbon-out .txt{font-size:19px;font-weight:700;letter-spacing:-.035em;color:var(--navy)}
.ribbon-out .sub{font-size:12.5px;color:var(--ink-2);margin-top:var(--s1)}
.ribbon-out .copy{
  border:1px solid var(--line-2);background:var(--white);border-radius:var(--r);
  padding:var(--s3) var(--s5);font-size:14px;font-weight:700;color:var(--navy);
  cursor:pointer;white-space:nowrap;transition:all .12s;
}
.ribbon-out .copy:hover{border-color:var(--navy)}
.ribbon-out .copy.done{background:var(--navy);border-color:var(--navy);color:#fff}

@media (max-width:720px){
  .need{grid-template-columns:1fr}
  .ribbon-tabs{grid-template-columns:repeat(2,1fr)}
  .ribbon-out{flex-direction:column;align-items:stretch}
  .ribbon-out .copy{width:100%}
  .order-bar{font-size:15px;padding:var(--s4)}
}

/* 리본 대체 문구 선택지 */
.ribbon-alt{margin-top:var(--gap)}
.ribbon-alt .lbl{font-size:12.5px;font-weight:700;color:var(--ink-3);margin-bottom:var(--s3)}
.ribbon-alt .list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.ribbon-alt button{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line-2);background:var(--white);border-radius:var(--r);
  padding:var(--s3) var(--s4);transition:all .12s;
}
.ribbon-alt button:hover{border-color:var(--blue)}
.ribbon-alt button[aria-pressed="true"]{border-color:var(--navy);background:var(--soft)}
.ribbon-alt .t{font-size:14px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.ribbon-alt .len{
  font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.ribbon-alt .len.over{color:var(--warn)}
.ribbon-alt .note{font-size:12.5px;color:var(--ink-3);margin-top:var(--s3);line-height:1.7}

@media (max-width:720px){ .ribbon-alt .list{grid-template-columns:1fr} }

/* 마지막 안내문도 바닥 정렬 (내부는 block 유지) */
.note-sm.fill{flex:0 0 auto;margin-top:auto;padding-top:var(--s4)}
.bullets.fill,.route.fill,.timeline.fill,.compare.fill{flex:1 1 auto}

/* 주문 버튼 — 폭 전체, 내용 가운데 */
.order-bar{flex-wrap:wrap}
.order-bar small{width:auto}
@media (max-width:480px){
  .order-bar{flex-direction:column;gap:var(--s1)}
}

/* 상세 페이지 부제 — 핵심 지표 요약 */
.hall-sub{
  margin-top:var(--s2);font-size:15px;font-weight:700;
  color:var(--navy);letter-spacing:-.03em;
}
.hall-sub+.hall-addr{margin-top:var(--s1);font-size:14.5px}

/* ==========================================================================
   v16 — 값 옆 복사 버튼
   주소·전화처럼 그대로 옮겨 적는 정보에 붙입니다.
   ========================================================================== */
.copyable{display:flex;align-items:flex-start;gap:var(--s2);flex-wrap:wrap}
.copyable>span{flex:1;min-width:0}

.btn-copy{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  border:1px solid var(--line-2);background:var(--white);color:var(--ink-2);
  border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:700;
  letter-spacing:-.02em;cursor:pointer;white-space:nowrap;
  transition:all .12s;line-height:1.5;
}
.btn-copy:hover{border-color:var(--navy);color:var(--navy)}
.btn-copy.done{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-copy svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}
.btn-copy.done svg{display:none}

/* 헤드 영역의 주소 — 조금 크게 */
.hall-addr.copyable .btn-copy{padding:4px 10px;font-size:12px}

/* 복사 안내 토스트 */
.copy-toast{
  position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:#fff;border-radius:99px;
  padding:11px 22px;font-size:13.5px;font-weight:700;letter-spacing:-.02em;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:200;
  box-shadow:0 8px 24px rgba(22,26,31,.25);
}
.copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:721px){ .copy-toast{bottom:32px} }
@media (prefers-reduced-motion:reduce){ .copy-toast{transition:none} }

/* 정보 목록 안 복사 버튼 정렬 */
.info-list dd.copyable{display:flex;align-items:center;gap:var(--s2)}
.info-list dd.copyable>span{flex:1;min-width:0;word-break:break-all}

/* ==========================================================================
   v17 — 모바일 정렬 보정
   ========================================================================== */

/* ── 헤더: 햄버거를 오른쪽 끝으로 ────────────────────────────────
   .desktop-nav 가 margin-left:auto 로 오른쪽 정렬을 만들고 있는데,
   모바일에서 nav 가 숨겨지면 그 밀어내기가 사라져
   .header-actions 가 로고 바로 옆에 붙던 문제.
   PC 레이아웃이 틀어지지 않도록 모바일에서만 적용합니다. */
.brand{flex:0 0 auto}
@media (max-width:1024px){
  .header-actions{margin-left:auto}
}

/* ── 스탯 카드: 숫자와 단위가 한 줄에 ───────────────────────────── */
.stat .v{
  white-space:nowrap;
  display:flex;align-items:baseline;justify-content:center;gap:1px;
}
.stat .v span{white-space:nowrap}
.stat{display:flex;flex-direction:column;justify-content:center}

/* 자릿수가 많으면 글자를 줄여 한 줄을 유지 */
@media (max-width:520px){
  .stat{padding:var(--s5) var(--s2)}
  .stat .v{font-size:27px;letter-spacing:-.06em}
  .stat .v span{font-size:13px}
  .stat .k{font-size:12px;margin-top:6px}
}
@media (max-width:380px){
  .stat .v{font-size:23px}
  .stat .v span{font-size:12px}
}

/* ── 화환 카드: 잘림 방지 ───────────────────────────────────────
   원본이 세로로 긴 화환 사진이라 cover 로 자르면 위아래가 날아갑니다.
   contain 으로 전체를 보여주고 여백은 배경으로 채웁니다. */
.flower-item .thumb{
  object-fit:contain;
  background:#F7F8F9;
  padding:var(--s2);
  aspect-ratio:1/1;
}

/* ── 모바일 화환 2×2 ────────────────────────────────────────────
   기존에는 420px 이하에서 1열이었는데, 4개가 한 화면에 보이는
   2×2 가 훨씬 낫습니다. */
@media (max-width:720px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .flower-item .body{padding:var(--s3)}
  .flower-item .fn{font-size:12.5px;line-height:1.45}
  .flower-item .fp{font-size:16px}
  .flower-item .fnote{font-size:11px;padding-top:var(--s1)}
}
@media (max-width:420px){
  /* 도구·가이드 카드만 1열, 화환은 2열 유지 */
  .tool-grid.grid-4,
  .guide-grid.grid-4{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   v18 — 모바일 정보 밀도
   한 줄에 하나씩 늘어놓으니 스크롤만 길어지고 읽기 어려웠습니다.
   짧은 라벨은 여러 열로 채우고 카드 높이를 줄입니다.
   ========================================================================== */

/* ── 지역 그리드 ─────────────────────────────────────────────────
   시도 이름은 3~5자라 좁은 화면에서도 3열 이상이 들어갑니다.
   긴 이름(경상북도)은 짧게 줄여 표기합니다. */
@media (max-width:720px){
  .region-grid{grid-template-columns:repeat(4,1fr)}
  .region-grid a{padding:var(--s3) 4px}
  .region-grid .rn{font-size:13px;letter-spacing:-.04em;white-space:nowrap}
  .region-grid .rc{font-size:11px;margin-top:1px}
}
@media (max-width:420px){
  .region-grid{grid-template-columns:repeat(3,1fr)}
  .region-grid .rn{font-size:12.5px}
}

/* ── 목차 ────────────────────────────────────────────────────────
   8칸이 세로로 늘어져 한 화면을 다 잡아먹던 문제 */
@media (max-width:720px){
  .toc{padding:var(--s4)}
  .toc-grid{grid-template-columns:repeat(2,1fr);gap:var(--s2)}
  .toc-grid a{padding:var(--s3) var(--s3)}
  .toc-grid a::before{margin-bottom:1px}
  .toc-grid b{font-size:13.5px;letter-spacing:-.04em}
  .toc-grid small{
    font-size:11px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
}
@media (max-width:380px){
  .toc-grid small{display:none}
  .toc-grid a{padding:var(--s3) var(--s2)}
}

/* ── 지금 필요한 것부터 ──────────────────────────────────────────
   히어로 우측 카드. 8칸이라 2열로 채웁니다. */
@media (max-width:720px){
  .quick-card{padding:var(--s4)}
  .quick-grid{grid-template-columns:repeat(2,1fr);gap:var(--s2)}
  .quick-grid a{padding:var(--s3)}
  .quick-grid b{font-size:13px;letter-spacing:-.04em}
  .quick-grid small{
    font-size:11px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
}
@media (max-width:420px){
  /* 위 v17 에서 1열로 내렸던 것을 되돌립니다 */
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .quick-grid small{display:none}
}

/* ── 가이드·도구 카드 ────────────────────────────────────────────
   설명이 짧아 2열로 충분합니다. */
@media (max-width:720px){
  .guide-grid .card-link,
  .tool-grid .card-link{padding:var(--s3)}
  .guide-grid .card-link b,
  .tool-grid .card-link b{font-size:13.5px;letter-spacing:-.04em}
  .guide-grid .card-link small,
  .tool-grid .card-link small{
    font-size:11px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
}
@media (max-width:420px){
  .tool-grid.grid-4,
  .guide-grid.grid-4{grid-template-columns:repeat(2,1fr)}
  .guide-grid .card-link small,
  .tool-grid .card-link small{display:none}
}

/* ── 주문 전 확인 3가지 ──────────────────────────────────────────
   모바일에서 1열이라 세로가 길었습니다. 번호를 왼쪽으로 옮겨 압축합니다. */
@media (max-width:720px){
  .need{gap:var(--s2)}
  .need>div{padding:var(--s4) var(--s4) var(--s4) 46px}
  .need>div::before{top:var(--s4);left:var(--s4);right:auto}
  .need b{font-size:14px}
  .need p{font-size:13px;margin-top:4px}
  .need .eg{margin-top:var(--s2);font-size:12px}
}

/* ==========================================================================
   v19 — 화환 카드 비율 확정
   화환은 세로로 긴 형태입니다. 정사각 카드에 contain 으로 넣으면
   위아래에 큰 여백이 생깁니다. 3:4 세로형으로 고정합니다.

   업로드 권장 : 600 x 800 px (3:4)
   ========================================================================== */
.flower-item .thumb{
  aspect-ratio:3/4;
  object-fit:cover;          /* 소스가 3:4 면 잘림 없이 꽉 채워집니다 */
  object-position:center;
  padding:0;
  background:#F7F8F9;
  width:100%;
  height:auto;
  display:block;
}

/* picture 가 flex 아이템으로 늘어나지 않도록 */
.flower-item>picture{flex:0 0 auto;display:block;line-height:0}

/* 텍스트 영역은 내용 높이만 */
.flower-item .body{flex:1 1 auto;justify-content:flex-start}

/* ==========================================================================
   v20 — 모바일 푸터
   5개 컬럼이 1열로 떨어지면 세로가 지나치게 길어집니다.
   링크 그룹이 짧으므로 2열로 압축합니다.
   ========================================================================== */
@media (max-width:720px){
  .site-footer{padding:var(--s7) 0 var(--s6)}

  .footer-grid{
    grid-template-columns:repeat(2,1fr);
    gap:var(--s5) var(--s4);
  }
  /* 소개 블록은 전체 폭 */
  .footer-about{grid-column:1 / -1}
  .footer-about .brand-full{height:64px}
  .footer-about p{font-size:12.5px;line-height:1.7;margin-top:var(--s2)}

  .footer-grid h3{
    font-size:12.5px;margin-bottom:var(--s2);
    color:var(--ink);letter-spacing:-.03em;
  }
  .footer-grid a{
    font-size:12.5px;padding:4px 0;letter-spacing:-.03em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  .footer-bottom{
    margin-top:var(--s5);padding-top:var(--s4);
    flex-direction:column;align-items:flex-start;gap:var(--s2);
    font-size:12px;
  }
  .footer-bottom nav{gap:var(--s3);row-gap:var(--s1)}
}

@media (max-width:380px){
  .footer-grid{gap:var(--s4) var(--s3)}
  .footer-grid a{font-size:12px}
}

/* 데이터 출처·갱신일 */
.synced{color:var(--ink-3);font-size:12px;line-height:1.7}
.synced time{font-weight:700;color:var(--ink-2)}
.footer-about .synced{display:inline-block;margin-top:var(--s1)}

/* ==========================================================================
   v21 — 가이드 문서 본문 조판
   관리자에서 HTML 로 입력한 내용이 이 안에 들어갑니다.
   ========================================================================== */
.doc{font-size:15.5px;line-height:1.9;color:var(--ink-2)}
.doc>*:first-child{margin-top:0}
.doc h3{
  font-size:19px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
  margin:var(--s7) 0 var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--line);
}
.doc h4{font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:var(--s6) 0 var(--s2)}
.doc p{margin:0 0 var(--s4)}
.doc p:last-child{margin-bottom:0}
.doc strong{color:var(--ink);font-weight:700}
.doc a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.doc ul,.doc ol{margin:0 0 var(--s4)}
.doc .bullets li{font-size:15px}
.doc .steps li{font-size:15px}
.doc .tbl{margin:0 0 var(--s4)}
.doc .callout{margin:var(--s4) 0}
.doc blockquote{
  margin:var(--s4) 0;padding:var(--s4) var(--s5);
  background:var(--soft);border-radius:var(--r);
  font-size:15px;color:var(--navy);
}
.doc hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
.doc img{max-width:100%;height:auto;border-radius:var(--r);margin:var(--s4) 0}
.doc code{background:var(--soft);border-radius:4px;padding:2px 6px;font-size:13.5px}

@media (max-width:720px){
  .doc{font-size:15px;line-height:1.85}
  .doc h3{font-size:17px;margin:var(--s6) 0 var(--s3)}
  .doc h4{font-size:15.5px}
}

/* ==========================================================================
   v22 — 조문 도구
   ========================================================================== */
.tool-fld{margin-bottom:var(--s5)}
.tool-fld:last-child{margin-bottom:0}
.tool-fld>label{display:block;font-size:13.5px;font-weight:700;margin-bottom:var(--s2);letter-spacing:-.03em}
.tool-inp{
  width:100%;border:1px solid var(--line-2);border-radius:var(--r);
  padding:12px 14px;background:var(--white);font-size:15px;font-family:inherit;
}
.tool-inp:focus{outline:none;border-color:var(--navy)}
.tool-hint{font-size:12.5px;color:var(--ink-3);margin-top:var(--s2);line-height:1.7}
.tool-hint label{font-size:12.5px;font-weight:700;color:var(--ink-2)}

/* 선택 버튼 그룹 */
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.seg.wrap{display:flex;flex-wrap:wrap}
.seg button{
  border:1px solid var(--line-2);background:var(--white);border-radius:var(--r);
  padding:11px 14px;font-size:14px;font-weight:600;letter-spacing:-.03em;
  color:var(--ink-2);cursor:pointer;transition:all .12s;
}
.seg.wrap button{flex:0 1 auto;padding:9px 14px;font-size:13.5px}
.seg button:hover{border-color:var(--blue);color:var(--blue)}
.seg button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* 결과 */
.tool-out{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  background:var(--soft);border-radius:var(--r-lg);padding:var(--s5);margin-top:var(--s5);
}
.tool-out .lbl{font-size:12.5px;color:var(--ink-3);font-weight:600}
.tool-out .val{
  font-size:34px;font-weight:800;letter-spacing:-.05em;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1.2;margin-top:2px;
}
.tool-out .sub{font-size:13px;color:var(--ink-2);margin-top:3px}

/* 작은 정보 카드 */
.tool-card{
  border:1px solid var(--line);border-radius:var(--r);padding:var(--pad-sm);
  background:var(--white);text-align:center;display:flex;flex-direction:column;
}
.tool-card .k{font-size:12px;color:var(--ink-3);font-weight:600}
.tool-card .v{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-top:2px}
.tool-card .d{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.5;flex:1}
.tool-card .btn-copy{margin-top:var(--s3);align-self:center}

/* 49재 날짜 목록 */
.date-list{margin-top:var(--s5)}
.date-list>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--line);
}
.date-list>div:last-child{border-bottom:0}
.date-list .n{font-size:14.5px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.date-list .n small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);margin-top:1px}
.date-list .d{font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--navy);
              font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.date-list .d small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3);margin-top:1px}
.date-list>div.is-main{background:var(--soft);border-radius:var(--r);padding:var(--s4);border-bottom:0;margin:var(--s2) 0}
.date-list>div.is-main .d{font-size:19px}
.date-list>div.is-past{opacity:.45}

/* 조문 문자 결과 */
.msg-list{margin-top:var(--s5);display:grid;gap:var(--s3)}
.msg-list article{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad);
  background:var(--white);
}
.msg-list .tone{font-size:11.5px;font-weight:800;color:#fff;background:var(--navy);
                border-radius:5px;padding:3px 9px;display:inline-block;letter-spacing:-.02em}
.msg-list p{font-size:15px;line-height:1.85;margin-top:var(--s3);color:var(--ink);white-space:pre-line}
.msg-list .foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
                margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.msg-list .len{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* 용어 설명 */
.terms>div{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.terms>div:last-child{border-bottom:0}
.terms dt{font-size:15px;font-weight:700;letter-spacing:-.03em;display:flex;align-items:baseline;gap:var(--s2)}
.terms dt small{font-size:12px;font-weight:600;color:var(--ink-3)}
.terms dd{font-size:14px;color:var(--ink-2);line-height:1.8;margin-top:4px}

@media (max-width:720px){
  .tool-out{flex-direction:column;align-items:stretch;text-align:center}
  .tool-out .btn-copy{width:100%;justify-content:center}
  .tool-out .val{font-size:30px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .tool-card .v{font-size:19px}
  .seg{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .seg.wrap button{flex:1 1 calc(50% - var(--s2));font-size:13px;padding:9px 8px}
}

/* 지도 버튼 영역의 button 을 a 와 동일하게 */
.map-btns button{
  font:inherit;cursor:pointer;
  border:1px solid var(--line-2);background:var(--white);color:var(--ink);
  border-radius:var(--r);padding:11px var(--s5);
  font-size:14px;font-weight:600;letter-spacing:-.03em;
  transition:all .12s;
}
.map-btns button:hover{border-color:var(--navy);color:var(--navy)}
.map-btns button.done{background:var(--navy);border-color:var(--navy);color:#fff}

/* ==========================================================================
   v23 — 앵커 스크롤 오프셋
   헤더가 상단에 고정(sticky)되어 있어 앵커로 이동하면
   섹션 제목이 헤더 뒤로 숨습니다. 그만큼 여유를 둡니다.
   ========================================================================== */
:target{scroll-margin-top:88px}
section[id],article[id],div[id],h2[id],h3[id]{scroll-margin-top:88px}

@media (max-width:1024px){
  :target{scroll-margin-top:76px}
  section[id],article[id],div[id],h2[id],h3[id]{scroll-margin-top:76px}
}
@media (max-width:760px){
  /* 모바일은 헤더가 자동 높이라 조금 더 넉넉히 */
  :target{scroll-margin-top:84px}
  section[id],article[id],div[id],h2[id],h3[id]{scroll-margin-top:84px}
}

/* ==========================================================================
   v24 — 하단 고정 CTA 정리
   메인·지역·가이드·도구는 정보 제공 페이지라 하단 바를 두지 않습니다.
   장례식장 상세에서만 노출합니다 (전화 · 근조화환).

   전역 body padding 대신 CTA 와 함께 출력되는 스페이서를 씁니다.
   CTA 가 없는 페이지에는 빈 공간이 생기지 않습니다.
   ========================================================================== */
.mobile-cta-space{display:none}

@media (max-width:720px){
  .mobile-cta-space{display:block;height:56px}
}

/* ==========================================================================
   v25 — 목록 배지 · 주소 표시 보정
   ========================================================================== */

/* 지역 배지가 칸을 넘지 않도록 */
.rank-list.is-region a{grid-template-columns:minmax(52px,auto) 1fr auto}
.rank-list.is-region .rk{
  padding:4px 8px;font-size:11px;
  max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:center;
}

/* 목록 안 주소 — PC 에서는 자르지 않습니다.
   flex 로 두면 주소가 두 줄이 될 때 버튼이 가운데로 밀립니다.
   버튼이 글자처럼 문장 끝에 이어지도록 인라인으로 흘립니다. */
.addr-cell{
  font-size:12.5px;color:var(--ink-3);
  margin-top:4px;line-height:1.7;
}
.addr-cell .txt{word-break:keep-all}
.addr-cell .btn-copy{
  vertical-align:1px;margin-left:6px;
  padding:2px 8px;font-size:11px;line-height:1.5;
}

@media (max-width:900px){
  /* 좁아지면 주소는 한 줄로 줄이고 버튼은 아래로 */
  .addr-cell .txt{
    display:block;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .addr-cell .btn-copy{margin:5px 0 0}
}

/* ==========================================================================
   v26 — 시군구 장례식장 표
   이름 칸은 주소까지 두 줄인데 숫자 칸은 한 줄이라
   baseline 정렬로 위쪽에 붙어 보이던 문제를 바로잡습니다.
   ========================================================================== */
.hall-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--white);
}
.hall-table{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}

.hall-table thead th{
  background:var(--soft);
  padding:12px 14px;
  font-size:12.5px;font-weight:700;color:var(--ink-3);
  text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--line-2);
}
.hall-table thead th.num{text-align:right;padding-right:14px}

.hall-table tbody td{
  padding:14px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;          /* ← 세로 가운데 정렬 */
}
.hall-table tbody tr:last-child td{border-bottom:0}
.hall-table tbody tr:hover{background:#FAFCFD}

.hall-table .nm-cell{width:38%;min-width:240px}
.hall-table a.nm{font-weight:600;letter-spacing:-.03em}
.hall-table a.nm:hover{color:var(--blue)}

.hall-table td.num{
  text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-weight:700;font-size:15px;
  width:76px;
}
.hall-table td.num i{
  font-style:normal;font-size:12px;font-weight:600;
  color:var(--ink-3);margin-left:1px;
}
.hall-table .none{color:var(--line-2);font-weight:500}

.hall-table .fac-cell{
  font-size:12.5px;color:var(--ink-2);line-height:1.7;
  word-break:keep-all;
}

@media (max-width:900px){
  .hall-table{font-size:13.5px}
  .hall-table tbody td{padding:12px 10px}
  .hall-table td.num{font-size:14px;width:64px}
  .hall-table .nm-cell{min-width:200px}
}

/* 구분 배지 (공설 / 사설) */
.hall-table .gubun{
  display:inline-block;margin-left:6px;
  font-size:11px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink-2);background:var(--soft);
  border-radius:4px;padding:2px 7px;vertical-align:2px;
}

/* ==========================================================================
   v27 — 모바일에서는 표를 카드로
   가로 스크롤은 숫자가 화면 밖에 숨어 아무도 보지 않습니다.
   같은 HTML 을 CSS 로만 카드 형태로 바꿉니다.
   ========================================================================== */
@media (max-width:720px){
  .hall-table-wrap{
    overflow:visible;border:0;background:transparent;border-radius:0;
  }
  .hall-table{min-width:0;display:block}
  .hall-table thead{display:none}
  .hall-table tbody{display:grid;gap:var(--s3)}

  .hall-table tbody tr{
    display:block;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:var(--pad-sm) var(--pad-sm) var(--s3);
  }
  .hall-table tbody tr:hover{background:var(--white)}
  .hall-table tbody td{
    display:block;padding:0;border-bottom:0;
  }

  /* 이름 + 주소 */
  .hall-table .nm-cell{width:auto;min-width:0}
  .hall-table a.nm{font-size:15.5px;font-weight:700;letter-spacing:-.035em;line-height:1.4}
  .hall-table .addr-cell{margin-top:var(--s2)}
  .hall-table .addr-cell .txt{
    display:block;font-size:12.5px;line-height:1.65;
    white-space:normal;overflow:visible;text-overflow:clip;
  }
  .hall-table .addr-cell .btn-copy{margin:6px 0 0}

  /* 숫자 3개를 한 줄로 */
  .hall-table td.num{
    display:inline-flex;align-items:baseline;gap:3px;
    width:auto;text-align:left;
    margin:var(--s3) var(--s4) 0 0;
    font-size:15px;
  }
  .hall-table td.num::before{
    content:attr(data-label);
    font-size:11.5px;font-weight:600;color:var(--ink-3);
    margin-right:2px;
  }
  .hall-table td.num i{font-size:12px}

  /* 편의시설 */
  .hall-table .fac-cell{
    margin-top:var(--s3);padding-top:var(--s3);
    border-top:1px solid var(--line);
    font-size:12px;line-height:1.65;
  }
}

@media (max-width:400px){
  .hall-table td.num{margin-right:var(--s3);font-size:14px}
  .hall-table a.nm{font-size:15px}
}

/* 검색 페이지 폼 */
.search-form{display:flex;gap:var(--s2);max-width:560px}
.search-form .tool-inp{flex:1}
.btn-search{
  flex:0 0 auto;border:0;background:var(--navy);color:#fff;
  border-radius:var(--r);padding:12px 26px;
  font-size:15px;font-weight:700;letter-spacing:-.03em;cursor:pointer;
  transition:background .12s;
}
.btn-search:hover{background:var(--navy-2)}
@media (max-width:520px){
  .btn-search{padding:12px 18px;font-size:14px}
}

/* ==========================================================================
   v28 — 지역 페이지 요약
   숫자가 문장 안에 묻혀 있어 한눈에 안 들어오던 문제를 고칩니다.
   ========================================================================== */
.area-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
  margin-bottom:var(--s5);
}
.area-stats .stat{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5) var(--s4);text-align:center;
  display:flex;flex-direction:column;justify-content:center;
}
.area-stats .v{
  font-size:28px;font-weight:800;letter-spacing:-.05em;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap;
  display:flex;align-items:baseline;justify-content:center;gap:1px;
}
.area-stats .v span{font-size:13px;font-weight:700;color:var(--ink-2)}
.area-stats .k{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:6px}
.area-stats .sub{font-size:11.5px;color:var(--ink-3);margin-top:3px}

/* 요약 카드 2단 */
.area-brief{margin-bottom:var(--s6);align-items:stretch}
.area-brief .panel{display:flex;flex-direction:column}
.area-brief p{font-size:14.5px;line-height:1.85;color:var(--ink-2)}

/* 전국 평균 비교 막대 */
.compare-bar{margin-top:auto;padding-top:var(--s4);display:grid;gap:var(--s3)}
.compare-bar .row{display:grid;grid-template-columns:72px 1fr 52px;align-items:center;gap:var(--s3)}
.compare-bar .lbl{font-size:12.5px;font-weight:700;letter-spacing:-.03em;
                  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compare-bar .bar{display:block;height:9px;background:var(--soft);border-radius:99px;overflow:hidden}
.compare-bar .bar i{display:block;height:100%;background:var(--navy);border-radius:99px}
.compare-bar .val{font-size:13px;font-weight:800;text-align:right;
                  font-variant-numeric:tabular-nums;color:var(--navy)}
.compare-bar .is-avg .bar i{background:var(--line-2)}
.compare-bar .is-avg .lbl,
.compare-bar .is-avg .val{color:var(--ink-3);font-weight:600}

/* 편의시설 비율 */
.fac-stat{display:grid;gap:var(--s3)}
.fac-stat .row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}
.fac-stat .n{font-size:13.5px;font-weight:600;letter-spacing:-.03em}
.fac-stat .c{font-size:13px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.fac-stat .c small{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.fac-stat .bar{display:block;height:6px;background:var(--soft);border-radius:99px;overflow:hidden}
.fac-stat .bar i{display:block;height:100%;background:var(--blue);border-radius:99px}

@media (max-width:900px){
  .area-stats{grid-template-columns:repeat(2,1fr)}
  .area-stats .v{font-size:24px}
}
@media (max-width:520px){
  .area-stats{gap:var(--s2)}
  .area-stats .stat{padding:var(--s4) var(--s2)}
  .area-stats .v{font-size:21px}
  .area-stats .v span{font-size:12px}
  .area-stats .k{font-size:11.5px}
  .area-stats .sub{font-size:11px}
  .compare-bar .row{grid-template-columns:62px 1fr 46px}
}

/* ==========================================================================
   v29 — 지역 안내 본문
   중복 콘텐츠를 피하려면 지역마다 다른 텍스트가 충분히 있어야 합니다.
   그 텍스트가 읽히도록 문서 형태로 조판합니다.
   ========================================================================== */
.area-doc{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--pad);
  margin-bottom:var(--s6);
}
.area-doc>section{padding:var(--s6) 0;border-bottom:1px solid var(--line)}
.area-doc>section:first-child{padding-top:0}
.area-doc>section:last-child{padding-bottom:0;border-bottom:0}

.area-doc h2{
  font-size:16.5px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
  margin-bottom:var(--s3);
  display:flex;align-items:center;gap:var(--s2);
}
.area-doc h2::before{
  content:'';width:3px;height:15px;background:var(--navy);border-radius:2px;flex:0 0 auto;
}
.area-doc p{
  font-size:15px;line-height:1.9;color:var(--ink-2);
  margin-bottom:var(--s3);word-break:keep-all;
}
.area-doc p:last-child{margin-bottom:0}
.area-doc strong{color:var(--ink);font-weight:700}

.area-doc .compare-bar{
  margin-top:var(--s5);padding:var(--s4) var(--s5);
  background:var(--bg);border-radius:var(--r);
}
.area-doc .fac-stat{
  margin-top:var(--s5);padding:var(--s5);
  background:var(--bg);border-radius:var(--r);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5);
}

@media (max-width:720px){
  .area-doc{padding:var(--pad-sm)}
  .area-doc>section{padding:var(--s5) 0}
  .area-doc h2{font-size:15.5px}
  .area-doc p{font-size:14.5px;line-height:1.85}
  .area-doc .fac-stat{grid-template-columns:1fr;gap:var(--s3);padding:var(--s4)}
}

/* ==========================================================================
   v30 — 부조금 정리
   엑셀 양식을 그대로 옮긴 표입니다. 입력은 브라우저에만 저장됩니다.
   ========================================================================== */
.bujo-tools{display:flex;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.bujo-search{
  flex:1;min-width:180px;
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:10px 13px;font-size:14px;font-family:inherit;background:var(--white);
}
.bujo-search:focus{outline:none;border-color:var(--navy)}
.bujo-sort{
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:10px 12px;font-size:13.5px;font-family:inherit;
  background:var(--white);font-weight:600;color:var(--ink-2);
}

.bujo-wrap{
  overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--white);
}
table.bujo{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
table.bujo th{
  background:var(--soft);padding:9px 6px;
  font-size:12px;font-weight:700;color:var(--ink-2);
  border:1px solid var(--line-2);white-space:nowrap;
}
table.bujo td{
  border:1px solid var(--line);padding:0;vertical-align:middle;
}
table.bujo tr:hover td{background:#FAFCFD}

table.bujo .c-no{
  width:44px;text-align:center;font-size:12px;color:var(--ink-3);
  padding:8px 4px;font-variant-numeric:tabular-nums;background:var(--bg);
}
table.bujo .c-date{width:88px}
table.bujo .c-name{width:110px}
table.bujo .c-rel{width:112px}
table.bujo .c-amt{width:110px}
table.bujo .c-del{width:34px;text-align:center;background:var(--bg)}

table.bujo input,
table.bujo select{
  width:100%;border:0;background:transparent;
  padding:9px 8px;font-size:13.5px;font-family:inherit;color:var(--ink);
  border-radius:0;
}
table.bujo input:focus,
table.bujo select:focus{
  outline:2px solid var(--blue);outline-offset:-2px;background:var(--white);
}
table.bujo input::placeholder{color:var(--line-2)}
table.bujo .c-amt input{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
table.bujo select{cursor:pointer;color:var(--ink-2);font-size:13px}
table.bujo .empty-row{
  text-align:center;padding:var(--s7) 0;color:var(--ink-3);font-size:13.5px;background:var(--white);
}

.row-del{
  border:0;background:transparent;color:var(--line-2);
  font-size:17px;line-height:1;padding:6px 4px;width:100%;
  transition:color .12s;
}
.row-del:hover{color:var(--warn)}

.bujo-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s3);flex-wrap:wrap;
}
.btn-line{
  border:1px dashed var(--line-2);background:transparent;color:var(--ink-2);
  border-radius:var(--r);padding:9px 18px;font-size:13px;font-weight:700;
  transition:all .12s;
}
.btn-line:hover{border-color:var(--navy);color:var(--navy);border-style:solid}
.bujo-foot .saved{font-size:12px;color:var(--ok);font-weight:600}

/* 동작 버튼 */
.bujo-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.btn-act{
  border:1px solid var(--line-2);background:var(--white);color:var(--ink);
  border-radius:var(--r);padding:11px 20px;font-size:14px;font-weight:700;
  letter-spacing:-.03em;transition:all .12s;
}
.btn-act:hover{border-color:var(--navy)}
.btn-act.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-act.primary:hover{background:var(--navy-2)}
.btn-act.danger{color:var(--warn);border-color:#E3C4C0}
.btn-act.danger:hover{background:var(--warn);border-color:var(--warn);color:#fff}

/* 합계표 */
table.bujo-sum{width:100%;border-collapse:collapse;font-size:13.5px}
table.bujo-sum th{
  background:var(--soft);padding:9px 8px;font-size:12px;font-weight:700;
  color:var(--ink-2);border:1px solid var(--line-2);text-align:left;
}
table.bujo-sum th.num{text-align:right}
table.bujo-sum td{padding:9px 8px;border:1px solid var(--line);}
table.bujo-sum td.num{
  text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;
}
table.bujo-sum tr.off td{color:var(--line-2);font-weight:500}
table.bujo-sum tfoot th{
  background:var(--navy);color:#fff;border-color:var(--navy);
  font-size:13px;padding:11px 8px;
}
table.bujo-sum tfoot th.num{font-size:14px;font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .bujo-actions .btn-act{flex:1;text-align:center;padding:11px 12px;font-size:13.5px}
  table.bujo{font-size:13px}
  table.bujo .c-date{width:70px}
  table.bujo .c-name{width:86px}
  table.bujo .c-rel{width:100px}
  table.bujo .c-amt{width:94px}
}

/* 인쇄 */
@media print{
  .site-header,.site-footer,.mobile-cta,.mobile-cta-space,
  .crumb,.bujo-tools,.bujo-foot,.bujo-actions,.callout,
  .part-more,.stack,.hall-head .tag{display:none!important}
  body{background:#fff;font-size:11pt}
  .section{padding:0}
  .panel{border:0;padding:0;background:#fff}
  .bujo-wrap{border:0;overflow:visible}
  table.bujo{min-width:0;font-size:10pt}
  table.bujo .c-del{display:none}
  table.bujo input,table.bujo select{
    -webkit-appearance:none;appearance:none;padding:5px 6px;font-size:10pt;
  }
  .grid-2-1{display:block}
  table.bujo-sum{margin-top:16pt;max-width:300pt}
}

/* 부조금 정리 — 버튼이 늘어나 줄바꿈 대응 */
.bujo-actions{gap:var(--s2)}
.bujo-actions .btn-act{flex:0 1 auto}
@media (max-width:720px){
  .bujo-actions{display:grid;grid-template-columns:repeat(2,1fr)}
  .bujo-actions .btn-act{width:100%}
  .bujo-actions .btn-act.primary{grid-column:1/-1}
}