/*
Theme Name: 공공상조 (Gonggong)
Theme URI: https://xn--ob0ba813m2hh.com/
Author: 공공상조(주) / Claude Code
Description: 공공상조(주) 후불제 상조 공식 홈페이지 커스텀 테마. 확정안「정찰」기반 — 가격표가 히어로다.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: gonggong
*/

/* ── Pretendard (SIL OFL 1.1) — 동적 서브셋 92청크, 셀프호스팅 ──
 * 실제 @font-face 정의는 assets/fonts/pretendard.css 에 있고 functions.php 에서 먼저 로드한다.
 * CDN을 쓰지 않는 이유: 외부 의존·개인정보 이슈 (docs/16- 1절) */

/* ══════════════════════════════════════════════════════════
   공공상조 홈 확정안 — A안「정찰」 + 최상단 24시 긴급 블록
   단일 테마(라이트) 확정. 모든 색을 토큰으로 명시한다.
   ══════════════════════════════════════════════════════════ */
:root{
  --paper:#FFFFFF; --ground:#F4F7FA; --ink:#0E1620; --ink-2:#3C4956;
  --muted:#68727E; --rule:#D7DEE6; --rule-2:#E9EEF3;
  --brand:#0C6CB4; --brand-dk:#08507F; --tint:#EFF5FA;
  --earth:#60483C; --earth-tint:#F5F1ED;
  --urgent:#12212E; --urgent-ink:#F2F6F9;
  --sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --col:min(1080px,100% - 2.5rem);
  --col-narrow:min(760px,100% - 2.5rem);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  line-height:1.7; -webkit-font-smoothing:antialiased; word-break:keep-all;
}
.wrap{width:var(--col); margin-inline:auto;}
h1,h2,h3,h4{margin:0; line-height:1.26; text-wrap:balance; font-weight:700; letter-spacing:-.02em;}
p{margin:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}
.num{font-variant-numeric:tabular-nums;}
.eyebrow{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--brand);}

/* ── 1. 긴급 바 (B안에서 빌려온 유일한 요소) ───────────── */
.urgent{background:var(--urgent); color:var(--urgent-ink);}
.urgent .wrap{
  display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap;
  padding:.7rem 0; font-size:.88rem;
}
.urgent .msg{color:rgba(242,246,249,.76);}
.urgent .msg b{color:var(--urgent-ink); font-weight:600;}
.urgent .call{
  margin-left:auto; display:inline-flex; align-items:baseline; gap:.6rem;
  text-decoration:none; font-weight:800; font-size:1.06rem; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.urgent .call em{
  font-style:normal; font-size:.66rem; letter-spacing:.14em; font-weight:700;
  color:#7FC0F0;
}
.urgent .call:hover{text-decoration:underline; text-underline-offset:4px;}

/* ── 2. 헤더 ────────────────────────────────────────────── */
header.site{border-bottom:1px solid var(--rule); background:var(--paper);}
header.site .wrap{display:flex; align-items:center; gap:1.6rem; padding:1.05rem 0;}
header.site img{width:158px; height:auto;}
header.site nav ul{display:flex; gap:1.55rem; list-style:none; margin:0; padding:0; font-size:.9rem; color:var(--ink-2);}
header.site nav li{font-weight:500;}
header.site .quote{
  margin-left:auto; background:var(--brand); color:#fff; text-decoration:none;
  padding:.6rem 1.15rem; border-radius:6px; font-size:.87rem; font-weight:700; white-space:nowrap;
}

/* ── 3. 히어로 — 가격표가 히어로다 ──────────────────────── */
.hero{padding:clamp(2.8rem,6vw,4.6rem) 0 0;}
.hero h1{font-size:clamp(2rem,5.2vw,3.35rem); line-height:1.2; margin-top:1rem;}
.hero .lede{margin-top:1.25rem; font-size:1.04rem; color:var(--ink-2); max-width:50ch;}
.zeros{
  display:grid; grid-template-columns:repeat(3,1fr); margin-top:2.6rem;
  border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--paper);
}
.zeros > div{padding:1.6rem 1.35rem; border-right:1px solid var(--rule);}
.zeros > div:last-child{border-right:0;}
.zeros .n{
  font-size:clamp(2.3rem,6.2vw,3.25rem); font-weight:800; letter-spacing:-.045em;
  color:var(--brand); line-height:1; font-variant-numeric:tabular-nums;
}
.zeros .n small{font-size:.4em; font-weight:600; margin-left:.1em;}
.zeros .n.word{font-size:clamp(1.6rem,3.6vw,2.15rem); line-height:1.14; letter-spacing:-.035em;}
.zeros .l{margin-top:.6rem; font-size:.92rem; font-weight:700; color:var(--ink);}
.zeros .s{margin-top:.2rem; font-size:.8rem; color:var(--muted);}
.zeros .one{margin-top:.6rem; font-size:.86rem; font-weight:600; line-height:1.55; color:var(--ink-2);}
.hero .actions{display:flex; gap:.7rem; margin:1.9rem 0 0; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:.85rem 1.6rem; border-radius:7px;
  font-size:.94rem; font-weight:700; text-decoration:none; border:1px solid transparent;
}
.btn.primary{background:var(--brand); color:#fff;}
.btn.primary:hover{background:var(--brand-dk);}
.btn.ghost{border-color:var(--rule); color:var(--ink);}
.btn.ghost:hover{border-color:var(--ink);}
.hero .disclaimer{margin-top:1.1rem; font-size:.8rem; color:var(--muted);}

/* ── 섹션 공통 ──────────────────────────────────────────── */
section.blk{padding:clamp(3rem,6vw,4.6rem) 0;}
section.blk.alt{background:var(--ground);}
.sec-head{display:flex; align-items:flex-end; gap:1rem 1.6rem; flex-wrap:wrap; margin-bottom:1.9rem;}
.sec-head h2{font-size:clamp(1.4rem,3.2vw,1.85rem);}
.sec-head .desc{font-size:.92rem; color:var(--muted); max-width:46ch;}
.sec-head .more{margin-left:auto; font-size:.87rem; color:var(--brand); font-weight:600; text-decoration:none; white-space:nowrap;}
.sec-head .more:hover{text-decoration:underline; text-underline-offset:3px;}

/* ── 4. 정찰 상품표 ─────────────────────────────────────── */
.tscroll{overflow-x:auto; border:1px solid var(--rule); border-radius:12px; background:var(--paper);}
table.price{border-collapse:collapse; width:100%; min-width:720px; font-size:.9rem;}
table.price th, table.price td{padding:.9rem 1.05rem; text-align:right; border-bottom:1px solid var(--rule-2);}
table.price th:first-child, table.price td:first-child{text-align:left;}
table.price thead th{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border-bottom:1.5px solid var(--ink); font-weight:700; background:var(--paper);
}
table.price tbody td{color:var(--ink-2); font-variant-numeric:tabular-nums;}
table.price tbody tr:last-child td{border-bottom:0;}
table.price tbody tr:hover td{background:var(--tint);}
td.pname{font-weight:700; color:var(--ink); font-variant-numeric:normal; white-space:nowrap;}
td.pwas{color:var(--muted); text-decoration:line-through;}
td.pnow{font-weight:800; color:var(--brand); font-size:1.02rem;}
.badge-new{
  margin-left:.5rem; font-size:.63rem; letter-spacing:.08em; font-weight:700;
  background:var(--tint); color:var(--brand-dk); padding:.16rem .42rem; border-radius:3px;
  vertical-align:middle;
}
.tnote{margin-top:1.05rem; font-size:.82rem; color:var(--muted);}

/* ── 5. 공통 포함 항목 ──────────────────────────────────── */
.incl{display:grid; gap:.65rem 1.4rem; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); margin-top:1.6rem;}
.incl div{
  font-size:.88rem; color:var(--ink-2); padding-left:1.35rem; position:relative; line-height:1.6;
}
.incl div::before{
  content:''; position:absolute; left:0; top:.62em; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--brand); opacity:.85;
}
.incl b{color:var(--ink); font-weight:600;}

/* ── 6. 후불제 vs 선불식 ────────────────────────────────── */
table.vs{border-collapse:collapse; width:100%; min-width:640px; font-size:.9rem;}
table.vs th, table.vs td{padding:.95rem 1.1rem; text-align:left; border-bottom:1px solid var(--rule-2); vertical-align:top;}
table.vs thead th{font-size:.78rem; letter-spacing:.06em; color:var(--muted); font-weight:700; border-bottom:1.5px solid var(--ink);}
table.vs thead th.ours{color:var(--brand);}
table.vs td:first-child{font-weight:700; color:var(--ink); white-space:nowrap;}
table.vs td.ours{background:var(--tint); color:var(--ink); font-weight:600;}
table.vs tbody tr:last-child td{border-bottom:0;}

/* ── 7. 협약사 ──────────────────────────────────────────── */
.partners{display:flex; flex-wrap:wrap; gap:.55rem;}
.chip{
  border:1px solid var(--rule); background:var(--paper); border-radius:999px;
  padding:.45rem 1rem; font-size:.85rem; color:var(--ink-2);
}
.chip.count{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:700;}

/* ── 8. 장지 / 정보 카드 ────────────────────────────────── */
.cards{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.card{
  border:1px solid var(--rule); border-radius:10px; padding:1.35rem 1.3rem 1.5rem;
  background:var(--paper); text-decoration:none; display:block;
}
.card:hover{border-color:var(--brand);}
.card .ic{
  width:2.1rem; height:2.1rem; border-radius:7px; background:var(--earth-tint);
  display:grid; place-items:center; color:var(--earth); font-size:.95rem; font-weight:700;
}
.card h3{font-size:1.02rem; margin-top:.95rem;}
.card p{margin-top:.45rem; font-size:.85rem; color:var(--muted); line-height:1.65;}

/* ── 9. 상담 CTA ────────────────────────────────────────── */
.cta-band{background:var(--urgent); color:var(--urgent-ink); padding:clamp(2.6rem,5vw,3.6rem) 0;}
.cta-band .inner{display:flex; align-items:center; gap:1.6rem 2.4rem; flex-wrap:wrap;}
.cta-band h2{font-size:clamp(1.35rem,3.2vw,1.8rem); color:#fff;}

/* ── 하단 CTA 제목 전용 명조 (2026-08-17) ────────────────────
 * 상조 문서·부고·비문은 관습적으로 명조(바탕) 계열을 쓴다. 본문 Pretendard(고딕)
 * 하나로는 "예를 갖춘다"는 인상이 만들어지지 않아, 이 한 줄에만 명조를 얹는다.
 *
 * 나눔명조 ExtraBold — SIL Open Font License 1.1 (상업적 사용·재배포·임베딩 허용).
 * 전문은 assets/fonts/LICENSE.txt 하단. CDN을 쓰지 않고 셀프호스팅한다(docs/16- 1절).
 *
 * ⚠️ 완성형 11,172자를 다 담으면 woff2로도 수백 KB다. 이 문구에 실제로 나오는
 *    글자만 남긴 **서브셋(6.3KB)** 이다 — 생성기는 scripts/make-cta-font.py.
 *    문구를 고치면 그 스크립트의 TEXT도 같이 고치고 재실행할 것.
 *    서브셋에 없는 글자는 에러 없이 Pretendard로 대체돼 한 줄에 서체가 섞인다. */
@font-face{
  font-family:'CtaMyeongjo';
  src:url('assets/fonts/cta-myeongjo.woff2') format('woff2');
  font-weight:800; font-style:normal;
  /* 6KB라 사실상 즉시 뜨지만, 실패하더라도 글자는 보여야 한다 */
  font-display:swap;
  /* 한글 완성형 + 한자(禮·精誠) + 괄호·쉼표·마침표·가운뎃점.
     범위를 좁혀 두면 라틴·숫자는 이 폰트를 아예 거치지 않고 Pretendard로 간다.
     ⚠️ 한자 병기를 넣으면서 U+4E00-9FFF와 괄호를 열었다. 범위를 안 늘리면
        `禮`·`(`가 이 폰트를 건너뛰어 그 글자만 고딕으로 나온다. */
  unicode-range:U+AC00-D7A3, U+4E00-9FFF, U+0028-0029, U+002C, U+002E, U+00B7;
}
.cta-band h2.cta-title{
  font-family:'CtaMyeongjo', var(--sans);
  font-weight:800;
  /* 명조는 고딕보다 글자폭이 넓다. 같은 크기로 두면 줄이 하나 더 넘어간다 */
  font-size:clamp(1.25rem,2.9vw,1.72rem);
  line-height:1.45;
  letter-spacing:-.015em;
  max-width:22ch;   /* 24자 한 줄은 너무 길다 — 두 줄로 끊어 읽게 한다 */
}
.cta-band p{margin-top:.65rem; color:rgba(242,246,249,.72); font-size:.93rem; max-width:44ch;}
.cta-band .side{margin-left:auto; display:flex; flex-direction:column; gap:.65rem;}
.cta-band .tel{
  background:#fff; color:var(--urgent); text-decoration:none; border-radius:8px;
  padding:.9rem 1.6rem; font-weight:800; font-size:1.22rem; text-align:center;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.cta-band .tel em{display:block; font-style:normal; font-size:.64rem; letter-spacing:.14em; color:var(--brand-dk); font-weight:700; margin-bottom:.15rem;}
.cta-band .form-link{
  border:1px solid rgba(242,246,249,.28); color:var(--urgent-ink); text-decoration:none;
  border-radius:8px; padding:.72rem 1.6rem; font-size:.88rem; font-weight:600; text-align:center;
}
.cta-band .form-link:hover{border-color:rgba(242,246,249,.6);}

/* ── 10. 푸터 ───────────────────────────────────────────── */
footer.site{border-top:1px solid var(--rule); padding:2.6rem 0 3.4rem; font-size:.84rem; color:var(--muted);}
footer.site .top{display:flex; gap:1.2rem 2rem; flex-wrap:wrap; align-items:center; padding-bottom:1.5rem; border-bottom:1px solid var(--rule-2);}
footer.site img{width:140px; height:auto;}
footer.site .links{display:flex; gap:1.2rem; margin-left:auto; font-size:.85rem;}
footer.site .links a{color:var(--ink-2); text-decoration:none; font-weight:600;}
footer.site .links a:hover{text-decoration:underline; text-underline-offset:3px;}
footer.site .biz{margin-top:1.5rem; line-height:1.85;}
footer.site .biz b{color:var(--ink-2); font-weight:600;}
footer.site .biz .sep{color:var(--rule); margin:0 .55rem;}
footer.site .copy{margin-top:1.2rem; font-size:.79rem;}

@media (max-width:820px){
  /* 🔴 2026-08-17 이전에는 여기서 nav 를 display:none 으로 **숨기기만 했다.**
     대체 수단이 없어 모바일 방문자는 로고와 「상담 신청」 외에는 어느 페이지로도
     갈 수 없었다. 상조 유입은 대부분 모바일이라 사실상 사이트가 막혀 있던 셈이다.
     → 드로어로 바꿨다. 접는 동작은 `.has-js` 안에서만 한다(아래) — JS가 죽으면
       메뉴는 펼쳐진 목록으로 남는다. 못 쓰는 것보다 긴 편이 낫다. */
  .zeros{grid-template-columns:1fr;}
  .zeros > div{border-right:0; border-bottom:1px solid var(--rule);}
  .zeros > div:last-child{border-bottom:0;}
  .cta-band .side{margin-left:0; width:100%;}
}
@media (max-width:520px){
  .urgent .call{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}

/* ── 워드프레스 편입분 ─────────────────────────────────── */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 6px 0;
  font-size:.9rem; font-weight:700; text-decoration:none;
}
.skip-link:focus{left:0;}
header.site .brand{display:inline-flex; align-items:center; text-decoration:none;}
header.site nav a{text-decoration:none; color:inherit;}
header.site nav a:hover{color:var(--brand);}
footer.site .links ul{display:flex; gap:1.2rem; list-style:none; margin:0; padding:0;}
.entry{max-width:70ch; font-size:1rem; color:var(--ink-2);}
.entry > * + *{margin-top:1.1rem;}
.entry h2,.entry h3{color:var(--ink); margin-top:2rem;}
.entry a{color:var(--brand);}
.entry img{max-width:100%; height:auto;}
.pagination{margin-top:2rem; display:flex; gap:.5rem; font-size:.9rem;}

/* ── 하위 페이지 공통 ───────────────────────────────────── */
.wrap.narrow{width:var(--col-narrow);}
.page-head{padding:clamp(2.2rem,5vw,3.4rem) 0 clamp(1.6rem,3vw,2.2rem); border-bottom:1px solid var(--rule);}
.page-head h1{font-size:clamp(1.7rem,4.2vw,2.6rem); margin-top:.85rem;}
.page-head .lede{margin-top:1rem; font-size:1rem; color:var(--ink-2); max-width:56ch;}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:.8rem; color:var(--muted); margin-bottom:1.1rem;}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--brand); text-decoration:underline; text-underline-offset:3px;}
.crumbs .cur{color:var(--ink-2); font-weight:600;}

/* 안내 박스 */
.callout{
  margin-top:1.8rem; background:var(--tint); border:1px solid var(--rule);
  border-left:3px solid var(--brand); border-radius:0 9px 9px 0; padding:1.15rem 1.3rem;
}
/* ⚠️ 직계 자식으로 한정한다. `.callout b`로 두면 **문단 안의 강조 <b>까지 블록**이 되어
      문장이 중간에서 끊긴다. `/terms/`·`/contact/`·`/pending`에서 실제로 그렇게 나가고 있었다.
      제목 역할의 <b>는 전부 .callout의 직계 자식이다. */
.callout > b{display:block; color:var(--ink); font-size:.95rem; margin-bottom:.4rem;}
.callout p b{color:var(--ink); font-weight:700;}
.callout p{font-size:.9rem; color:var(--ink-2); line-height:1.7;}
.callout a{color:var(--brand); font-weight:600;}
.callout.warn{background:var(--earth-tint); border-color:var(--rule); border-left-color:var(--earth);}

/* 본문 아티클 */
.gsec + .gsec{margin-top:2.2rem;}
.gsec h2{font-size:1.18rem;}
.gsec p{margin-top:.7rem; font-size:.97rem; color:var(--ink-2); line-height:1.85;}
.gsec p b{color:var(--ink);}
.gsec a{color:var(--brand); font-weight:600;}
/* 본문 안 보조 목록 — 문단으로 풀면 늘어지는 항목들(체크리스트·유의점)을 받는다.
   ol.steps는 "순서"를, .glist는 "나열"을 맡는다. 둘을 섞지 말 것. */
.gsec[id]{scroll-margin-top:1.4rem;}
.gsec ul.glist{margin:.9rem 0 0; padding-left:0; list-style:none;}
.gsec ul.glist li{
  position:relative; padding-left:1.15rem; margin-top:.5rem;
  font-size:.93rem; color:var(--ink-2); line-height:1.75;
}
.gsec ul.glist li::before{
  content:''; position:absolute; left:0; top:.66em;
  width:.42rem; height:.42rem; border-radius:50%; background:var(--brand); opacity:.85;
}
.gsec ul.glist li b{color:var(--ink);}
/* 처리방침 제5조 수탁자 표 — 문자 연동 시에만 그려진다(inc/legal.php) */
table.consign-tbl{
  width:100%; margin-top:.9rem; border-collapse:collapse; font-size:.9rem; line-height:1.7;
}
table.consign-tbl th, table.consign-tbl td{
  padding:.6rem .7rem; text-align:left; vertical-align:top; border:1px solid var(--rule-2);
}
table.consign-tbl thead th{background:var(--ground); color:var(--muted); font-weight:600; white-space:nowrap;}
table.consign-tbl td{color:var(--ink-2);}
@media (max-width:560px){
  table.consign-tbl{display:block; overflow-x:auto;}   /* 좁은 화면에서 본문이 밀리지 않게 */
}
/* FAQ — 질문(h3)이 섹션 제목(h2)보다 확실히 작아야 목차 감각이 흐트러지지 않는다 */
.gfaq h3{
  margin-top:1.7rem; font-size:1rem; color:var(--ink); line-height:1.55;
}
.gfaq h3:first-of-type{margin-top:1rem;}
.gfaq h3::before{content:'Q. '; color:var(--brand); font-weight:700;}
/* 근거 각주 — 법령 출처. 본문 톤보다 낮추되 같은 화면에 남긴다(표시광고법 대응, page-utopia와 동일 방침) */
.gnote{
  margin-top:2.2rem; padding-top:1rem; border-top:1px solid var(--rule-2);
  font-size:.82rem; color:var(--muted); line-height:1.8;
}
/* 목차 — 섹션이 10개 안팎이라 상단에 지도가 필요하다 */
.gtoc{
  margin-bottom:2.4rem; padding:1.15rem 1.3rem;
  background:var(--tint); border:1px solid var(--rule); border-radius:10px;
}
.gtoc > b{display:block; font-size:.8rem; letter-spacing:.04em; color:var(--muted); font-weight:700;}
.gtoc ol{margin:.75rem 0 0; padding-left:1.15rem;}
.gtoc li{font-size:.9rem; line-height:1.9; color:var(--ink-2);}
.gtoc a{color:var(--ink-2); text-decoration:none;}
.gtoc a:hover{color:var(--brand); text-decoration:underline; text-underline-offset:3px;}
.incl.wide{grid-template-columns:1fr;}
.incl.wide div{font-size:.94rem; line-height:1.8;}

/* 단계 목록 */
ol.steps{margin:1.6rem 0 0; padding-left:0; list-style:none; counter-reset:s;}
ol.steps li{
  counter-increment:s; position:relative; padding-left:2.5rem; margin-bottom:1rem;
  color:var(--ink-2); font-size:.94rem; line-height:1.75;
}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:.1rem;
  width:1.7rem; height:1.7rem; border-radius:50%; background:var(--paper); color:var(--brand);
  border:1px solid var(--rule); display:grid; place-items:center;
  font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums;
}
ol.steps li b{color:var(--ink);}

/* 비교표 확장 */
table.price.compare td, table.price.compare th{text-align:left;}
table.price.compare th a{color:var(--ink); text-decoration:none;}
table.price.compare th a:hover{color:var(--brand); text-decoration:underline; text-underline-offset:3px;}
table.price.compare thead th{color:var(--ink); font-size:.85rem; letter-spacing:0; text-transform:none;}
table.price.compare thead th:first-child{color:var(--muted); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;}
table.price.compare tbody td:first-child{font-weight:600; color:var(--ink); white-space:nowrap;}
table.price.compare tr.row-price td{font-size:1rem;}
table.price.compare td.hl{background:var(--tint); color:var(--brand-dk); font-weight:600;}
table.vs.spec td:first-child{width:11rem;}

/* 상품 상세 구성표 (대표 PPT 표 형식) */
table.pspec{border-collapse:collapse; width:100%; min-width:660px; font-size:.9rem;}
table.pspec th, table.pspec td{
  padding:.85rem 1rem; vertical-align:middle; text-align:center;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
table.pspec tr > *:last-child{border-right:0;}
table.pspec tr:last-child > *{border-bottom:0;}
table.pspec thead th{
  background:var(--brand); color:#fff; font-weight:700; font-size:1rem;
  border-color:var(--brand-dk); letter-spacing:-.01em;
}
table.pspec thead th.amt{font-variant-numeric:tabular-nums;}
table.pspec thead th .was{margin-left:.5em; font-size:.85em; font-weight:600; text-decoration:line-through; opacity:.72;}
table.pspec thead th .arw{margin:0 .3em; opacity:.8;}
table.pspec thead th .now{font-size:1.16em; font-weight:800;}
table.pspec td.grp{width:8rem; background:var(--ground); font-weight:700; color:var(--ink);}
table.pspec td.grp.wide{width:auto; background:var(--tint);}
table.pspec td.item{width:9.5rem; background:var(--tint); font-weight:600; color:var(--ink); white-space:nowrap;}
table.pspec td.val{color:var(--ink-2); line-height:1.65;}
table.pspec ul{display:inline-block; margin:0; padding-left:1.05rem; text-align:left;}
table.pspec ul li{list-style:disc; line-height:1.8;}
.tnote .more{margin-left:.6rem;}

/* 상품 상세 히어로 */
.price-hero{
  display:grid; gap:1.8rem 2.4rem; grid-template-columns:minmax(220px,auto) 1fr;
  align-items:center; border:1px solid var(--rule); border-radius:12px; padding:1.8rem;
}
.price-hero .pp .was{font-size:.85rem; color:var(--muted); text-decoration:line-through; font-variant-numeric:tabular-nums;}
.price-hero .pp .now{
  font-size:clamp(2.4rem,6vw,3.4rem); font-weight:800; letter-spacing:-.04em;
  color:var(--brand); line-height:1.05; font-variant-numeric:tabular-nums; margin-top:.2rem;
}
.price-hero .pp .now b{font-size:.32em; font-weight:700; margin-left:.15em;}
.price-hero .pp .cap{margin-top:.5rem; font-size:.8rem; color:var(--muted);}
.price-hero .pnote p{font-size:.96rem; color:var(--ink-2); line-height:1.75;}
.price-hero .pnote p b{color:var(--ink);}
.price-hero .pnote .sub{margin-top:.5rem; font-size:.82rem; color:var(--muted);}
.price-hero .pnote .btn{margin-top:1.2rem;}

/* 협약사 그룹 */
.ptgroup + .ptgroup{margin-top:2.2rem;}
.ptgroup h2{font-size:1.05rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem;}
.ptgroup h2 .cnt{
  font-size:.72rem; font-weight:700; color:var(--brand-dk); background:var(--tint);
  border-radius:999px; padding:.15rem .55rem; font-variant-numeric:tabular-nums;
}
a.chip{text-decoration:none;}
a.chip:hover{border-color:var(--brand); color:var(--brand);}

/* 상담 페이지 */
.contact-grid{display:grid; gap:1.6rem; grid-template-columns:minmax(280px,1fr) minmax(320px,1.35fr); align-items:start;}
.call-card{background:var(--urgent); color:var(--urgent-ink); border-radius:12px; padding:1.8rem;}
.call-card .eyebrow{color:#7FC0F0;}
.call-card h2{color:#fff; font-size:1.3rem; margin-top:.7rem;}
.call-card p{margin-top:.8rem; font-size:.92rem; color:rgba(242,246,249,.76); line-height:1.7;}
.call-card .telbig{
  margin-top:1.5rem; display:inline-flex; flex-direction:column; background:#fff; color:var(--urgent);
  text-decoration:none; border-radius:9px; padding:.9rem 1.6rem; font-weight:800; font-size:1.35rem;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.call-card .telbig em{font-style:normal; font-size:.6rem; letter-spacing:.14em; color:var(--brand-dk); font-weight:700;}
.call-card .sub{margin-top:1rem; font-size:.82rem; color:rgba(242,246,249,.6);}
.form-card{border:1px solid var(--rule); border-radius:12px; padding:1.8rem;}
.form-card h2{font-size:1.2rem;}
form.inquiry{margin-top:1.4rem; display:flex; flex-direction:column; gap:1.1rem;}
form.inquiry .field{display:flex; flex-direction:column; gap:.4rem;}
form.inquiry label{font-size:.88rem; font-weight:600; color:var(--ink);}
form.inquiry .req{color:var(--brand); margin-left:.15rem;}
form.inquiry input[type=text], form.inquiry input[type=tel], form.inquiry select, form.inquiry textarea{
  font:inherit; font-size:.94rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:7px; padding:.7rem .85rem; width:100%;
}
form.inquiry input:focus, form.inquiry select:focus, form.inquiry textarea:focus{
  border-color:var(--brand); outline:2px solid var(--tint); outline-offset:0;
}
form.inquiry input:disabled, form.inquiry select:disabled, form.inquiry textarea:disabled{
  background:var(--ground); color:var(--muted); cursor:not-allowed;
}
form.inquiry .hint{font-size:.79rem; color:var(--muted); line-height:1.6;}
form.inquiry .hint a{color:var(--brand); font-weight:600;}
form.inquiry .consent label{display:flex; align-items:flex-start; gap:.55rem; font-weight:500; font-size:.9rem;}
form.inquiry .consent input{margin-top:.25rem; accent-color:var(--brand);}
form.inquiry button:disabled{background:var(--muted); cursor:not-allowed;}
.form-msg:empty{display:none;}
.form-msg{font-size:.88rem; padding:.7rem .9rem; border-radius:7px; background:var(--ground); color:var(--ink-2);}
.form-msg.ok{background:var(--tint); color:var(--brand-dk); font-weight:600;}
.form-msg.err{background:var(--earth-tint); color:var(--earth); font-weight:600;}

/* 허니팟 — 화면 밖으로 밀어낸다. display:none이면 건너뛰는 봇이 있다 */
.gg-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* 접수 완료 패널 — 제출 성공 시 폼을 대체한다 */
.form-done{text-align:center; padding:2.2rem 1.2rem; border:1px solid var(--rule); border-radius:12px; background:var(--tint);}
.form-done .mark{width:52px; height:52px; margin:0 auto .9rem; border-radius:50%; background:var(--brand); color:#fff;
  font-size:1.6rem; line-height:52px; font-weight:700;}
.form-done h3{font-size:1.1rem; color:var(--brand-dk); margin:0 0 .5rem;}
.form-done p{font-size:.9rem; color:var(--ink-2); line-height:1.75; margin:0;}
/* .telbig 본체 스타일은 .call-card 스코프라 여기선 상속되지 않는다 → 밝은 배경용으로 따로 준다 */
.form-done .telbig{
  margin-top:1.2rem; display:inline-flex; flex-direction:column; align-items:center;
  background:var(--urgent); color:#fff; text-decoration:none; border-radius:9px;
  padding:.85rem 1.6rem; font-weight:800; font-size:1.3rem;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.form-done .telbig em{font-style:normal; font-size:.6rem; letter-spacing:.14em; color:#7FC0F0; font-weight:700;}

@media (max-width:820px){
  .price-hero{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}

/* ── 개인정보 수집 동의 고지 (개인정보보호법 §15②·§16②) ── */
.consent-box{border:1px solid var(--rule); border-radius:8px; background:var(--ground); padding:1rem 1.1rem; margin-bottom:.9rem;}
table.consent-tbl{width:100%; border-collapse:collapse; font-size:.84rem;}
table.consent-tbl th, table.consent-tbl td{padding:.5rem .2rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-2); line-height:1.65;}
table.consent-tbl tr:last-child th, table.consent-tbl tr:last-child td{border-bottom:0;}
table.consent-tbl th{width:7.5rem; color:var(--muted); font-weight:600; white-space:nowrap;}
table.consent-tbl td{color:var(--ink-2);}
table.consent-tbl td b{color:var(--ink); font-weight:700;}
.consent-box .hint{margin-top:.6rem;}

/* ── 약관·처리방침 (초안 표시 포함) ─────────────────────── */
.draft-banner{
  border:1px solid var(--warn-rule, #EBD7B4); background:var(--earth-tint);
  border-left:3px solid var(--earth); border-radius:0 9px 9px 0;
  padding:1.15rem 1.3rem; margin-bottom:2rem;
}
.draft-banner b{display:block; color:var(--earth); font-size:.95rem; margin-bottom:.45rem;}
.draft-banner p{font-size:.88rem; color:var(--ink-2); line-height:1.75;}
mark.todo{
  background:#FFF3C4; color:var(--ink); padding:.05rem .3rem; border-radius:3px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; font-weight:600;
}
mark.todo .todo-flag{
  font-size:.66rem; font-weight:700; letter-spacing:.06em; color:#8A6412;
  margin-left:.35rem; white-space:nowrap;
}
ul.legal-list{margin:.9rem 0 0; padding-left:1.15rem; font-size:.95rem; color:var(--ink-2); line-height:1.85;}
ul.legal-list li{margin-bottom:.35rem;}
ul.legal-list li::marker{color:var(--brand);}
ul.legal-list b{color:var(--ink);}
.gsec .sub{margin-top:.7rem; font-size:.88rem; color:var(--muted); line-height:1.75;}
.gsec .sub b{color:var(--ink-2);}
.gsec .tscroll{margin-top:1rem;}
.sec-head h2 .cnt{
  font-size:.72rem; font-weight:700; color:var(--brand-dk); background:var(--tint);
  border-radius:999px; padding:.15rem .55rem; margin-left:.5rem; vertical-align:middle;
  font-variant-numeric:tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   모션 — 절제가 원칙이다. 장례 업종에서 모션은 눈에 띄면 실패다.
   기존 사이트도 AOS fade-up 하나만 썼다(duration 1200~1400).
   ═══════════════════════════════════════════════════════════ */
 * ⚠️ `.has-motion` 스코프가 핵심이다. motion.js가 실제로 실행돼야 이 클래스가 붙는다.
 *    CSS만으로 opacity:0을 주면 JS 로드 실패 시 본문이 영영 안 보인다. */
.has-motion [data-reveal], .has-motion [data-reveal-item]{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.has-motion [data-reveal].is-in, .has-motion [data-reveal-item].is-in{opacity:1; transform:none;}
.has-motion [data-reveal]:has([data-reveal-item]){transition-delay:0ms;}

@media (prefers-reduced-motion:reduce){
  [data-reveal], [data-reveal-item]{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ── 무한 마퀴 (협약사) ─────────────────────────────────── */
.marquee{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{display:flex; gap:.55rem; width:max-content; will-change:transform;}
.marquee.is-running .marquee-track{animation:gg-marquee linear infinite;}
.marquee.rev .marquee-track{animation-direction:reverse;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee + .marquee{margin-top:.55rem;}
@keyframes gg-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none !important;}
  .marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
}

/* ── 통계 카운터 ────────────────────────────────────────── */
.stats{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--rule); border:1px solid var(--rule); border-radius:12px; overflow:hidden;}
.stats > div{background:var(--paper); padding:1.5rem 1.2rem; text-align:center;}
.stats .n{
  font-size:clamp(2rem,5vw,2.9rem); font-weight:800; letter-spacing:-.04em; color:var(--brand);
  font-variant-numeric:tabular-nums; line-height:1;
}
.stats .n .unit{font-size:.4em; font-weight:700; margin-left:.12em;}
.stats .l{margin-top:.55rem; font-size:.88rem; font-weight:600; color:var(--ink);}
.stats .s{margin-top:.2rem; font-size:.78rem; color:var(--muted);}

/* ═══════════════════════════════════════════════════════════
   이미지 밴드 / 카드 비주얼
   ═══════════════════════════════════════════════════════════ */
.band{
  position:relative; overflow:hidden; background:var(--ground);
  border-radius:0; margin:0;
}
.band .bg{position:absolute; inset:0;}
.band .bg img{width:100%; height:100%; object-fit:cover; display:block;}
.band .inner{position:relative; z-index:1; padding:clamp(2.6rem,6vw,4.4rem) 0;}
.band h2{font-size:clamp(1.4rem,3.4vw,2.05rem); line-height:1.32;}
.band p{margin-top:.95rem; font-size:.98rem; line-height:1.8; max-width:44ch;}

/* 밝은 사진 위 — 잉크 텍스트 */
.band.light .bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.1) 100%);}
.band.light h2{color:var(--ink);} .band.light p{color:var(--ink-2);}
/* 어두운 사진 위 — 흰 텍스트 */
.band.dark .bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(18,33,46,.92) 0%,rgba(18,33,46,.74) 48%,rgba(18,33,46,.38) 100%);}
.band.dark h2{color:#fff;} .band.dark p{color:rgba(242,246,249,.82);}
.band.dark .eyebrow{color:#7FC0F0;}
.band .cta{margin-top:1.6rem;}
@media (max-width:720px){
  .band.light .bg::after{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.96));}
  .band.dark .bg::after{background:linear-gradient(180deg,rgba(18,33,46,.86),rgba(18,33,46,.93));}
  .band p{max-width:none;}
}

/* 카드에 이미지 */
.card.has-img{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.card.has-img .thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ground);}
.card.has-img .thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1);}
.card.has-img:hover .thumb img{transform:scale(1.04);}
.card.has-img .body{padding:1.25rem 1.3rem 1.45rem; flex:1;}
.card.has-img .ic{position:absolute; left:.85rem; bottom:.85rem; z-index:1;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px);}
.cards.wide .card.has-img .thumb{aspect-ratio:16/9;}
@media (prefers-reduced-motion:reduce){.card.has-img:hover .thumb img{transform:none;}}

/* ── 히어로 비주얼 ──────────────────────────────────────── */
.hero{position:relative;}
.hero .hero-visual{
  position:absolute; right:0; top:0; bottom:0; width:44%; z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);
  mask-image:linear-gradient(90deg,transparent,#000 38%);
}
.hero .hero-visual img{width:100%; height:100%; object-fit:cover; object-position:70% 40%; opacity:.5;}
.hero .wrap{position:relative; z-index:1;}
@media (max-width:900px){.hero .hero-visual{display:none;}}

/* ── 히어로 아이브로우를 오른쪽 여백으로 (2026-08-17 마스터 요청) ──
 * 원래는 h1 위에 .72rem으로 얹혀 있었다. 그런데 h1이 워낙 커서 그 한 줄이
 * 거의 읽히지 않았고, 정작 오른쪽 44%는 사진이 opacity .5로 깔린 보조 영역이라
 * 사실상 비어 있었다. 빈자리로 옮기고 4배 가까이 키운다.
 *
 * 절대배치를 쓴 이유 — 흐름에 두면 h1·lede와 같은 폭을 먹어 줄바꿈이 흔들린다.
 * 위치만 옮기는 것이 목적이라 문서 순서(아이브로우 → h1)는 그대로 두었다.
 * 스크린리더 읽는 순서와 SEO 구조가 바뀌지 않는다.
 *
 * ⚠️ `.eyebrow`는 /grave/·/utopia/·page-head·band 등에서 공용으로 쓴다.
 *    반드시 `.hero` 안으로 한정할 것. 전역으로 건드리면 다른 페이지가 다 깨진다. */
@media (min-width:901px){
  .hero .eyebrow{
    position:absolute; right:0; top:.15rem; z-index:2;
    /* 2026-08-17 2차 — 마스터 요청으로 **두 배**로 키웠다(23px → 46px).
       폭도 같이 넓혀야 한다. 20rem에 46px를 넣으면 12자가 세 줄로 쪼개져
       "공기업 / 노동조합 / 협약 상조"처럼 끊긴다. 두 줄로 떨어지게 26rem으로 연다. */
    width:min(46%,26rem); text-align:right;
    font-size:clamp(1.6rem,3.6vw,2.9rem);
    line-height:1.35;
    /* 작을 땐 .18em 자간이 라벨처럼 보였지만, 키우면 글자가 흩어져 되레 안 읽힌다 */
    letter-spacing:.02em;
    /* 한글에 uppercase는 효과가 없다. 커진 뒤에는 지워 두는 편이 의도가 분명하다 */
    text-transform:none;
    /* 뒤에 사진이 깔린다 — 밝은 구간에서 파란 글씨가 묻히지 않게 흰 획을 한 겹 */
    text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.75);
  }
  /* 아이브로우가 흐름에서 빠지면서 h1 위 여백이 붕 떴다 */
  .hero h1{margin-top:0;}
}

/* ── 대표 인사말 ────────────────────────────────────────── */
.greeting{display:grid; gap:2rem 2.8rem; grid-template-columns:minmax(200px,260px) 1fr; align-items:start;}
.greeting .portrait{border-radius:12px; overflow:hidden; border:1px solid var(--rule); background:var(--ground);}
.greeting .portrait img{width:100%; height:auto; display:block;}
.greeting .portrait figcaption{padding:.75rem .9rem; font-size:.82rem; color:var(--muted); text-align:center;}
.greeting .portrait figcaption b{display:block; color:var(--ink); font-size:.95rem; margin-bottom:.15rem;}
.greeting .say .lead{
  font-size:clamp(1.15rem,2.6vw,1.5rem); line-height:1.62; color:var(--ink); font-weight:600;
  letter-spacing:-.015em;
}
.greeting .say .lead em{font-style:normal; color:var(--brand);}
.greeting .say p{margin-top:1.1rem; font-size:.97rem; color:var(--ink-2); line-height:1.9;}
.greeting .sign{margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid var(--rule);
  font-size:.9rem; color:var(--muted);}
.greeting .sign b{color:var(--ink); font-size:1.02rem; margin-left:.4rem;}
@media (max-width:720px){.greeting{grid-template-columns:1fr;} .greeting .portrait{max-width:220px;}}

/* ── 상품 메뉴 드롭다운 ─────────────────────────────────── */
header.site nav li{position:relative;}
header.site nav .has-sub > a::after{content:'⌄'; font-size:.8em; margin-left:.25rem; opacity:.6; vertical-align:.1em;}
header.site nav .sub{
  position:absolute; left:-.9rem; top:100%; margin-top:.55rem; min-width:15rem;
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  padding:.5rem; list-style:none; display:flex; flex-direction:column; gap:.1rem;
  box-shadow:0 12px 28px rgba(14,22,32,.09);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:30;
}
header.site nav .has-sub:hover .sub,
header.site nav .has-sub:focus-within .sub{opacity:1; visibility:visible; transform:none;}
header.site nav .sub a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.55rem .7rem; border-radius:6px; font-size:.87rem; white-space:nowrap;
}
header.site nav .sub a:hover{background:var(--tint);}
header.site nav .sub .price{font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums;}
header.site nav .sub .sep{height:1px; background:var(--rule-2); margin:.35rem .3rem;}

/* ── 비용 훅 (기업개요에서 가져온 서사) ─────────────────── */
.costhook{text-align:center;}
.costhook .q{font-size:clamp(1.25rem,3vw,1.7rem); font-weight:700; color:var(--ink); letter-spacing:-.02em;}
.costhook .guesses{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.3rem;}
.costhook .guesses span{
  border:1px dashed var(--rule); border-radius:999px; padding:.5rem 1.15rem;
  font-size:.95rem; color:var(--muted); font-variant-numeric:tabular-nums;
}
.costhook .answer{
  margin-top:1.7rem; display:inline-flex; flex-direction:column; align-items:center;
  background:var(--tint); border:1px solid var(--rule); border-radius:12px; padding:1.4rem 2.2rem;
}
.costhook .answer .k{font-size:.8rem; letter-spacing:.1em; color:var(--brand-dk); font-weight:700;}
.costhook .answer .v{
  font-size:clamp(1.8rem,4.6vw,2.6rem); font-weight:800; color:var(--brand);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-top:.35rem; line-height:1.1;
}
.costhook .answer .s{margin-top:.5rem; font-size:.84rem; color:var(--muted);}

/* ── 협약사 로고 마퀴 ───────────────────────────────────── */
.partners-band .marquee{padding:.2rem 0;}
.partners-band .marquee:first-of-type{margin-top:.4rem;}
/* 한 줄 마퀴로 바뀌면서 카드 높이를 1.5배(96→144px)로 키웠다.
   두 줄일 때보다 로고 판독성이 중요해졌고, 세로 여백도 한 줄분이 비었다. */
.pcard-logo{
  flex:0 0 auto; height:144px; border:1px solid var(--rule); border-radius:9px;
  overflow:hidden; background:var(--paper); display:flex; align-items:center;
}
.pcard-logo img{height:100%; width:auto; display:block; object-fit:contain;}
/* 확인기 카드 바로 아래 안내 문구. 카드가 가운데 정렬이라 이것만 좌측이면 축이 어긋난다. */
.marquee-note{margin-top:1.5rem; text-align:center;}

/* ── 상품 카드 ──────────────────────────────────────────── */
.cards.prod-cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
/* PC에서는 상품 5종이 한 줄에 들어가야 한다.
   최소폭 230px면 1080px 컨테이너에 4개까지만 들어가 5번째가 다음 줄로 떨어졌다.
   → 데스크톱에서만 최소폭을 185px로 낮추고 gap을 줄여 5열을 확보한다.
   auto-fit이라 상품 수가 바뀌어도 열 수는 자동으로 따라간다. */
@media (min-width:1024px){
  .cards.prod-cards{grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:.85rem;}
  .cards.prod-cards .card.has-img .body{padding:1.05rem 1rem 1.25rem;}
  .cards.prod-cards .card.has-img .body h3{font-size:1rem;}
  .cards.prod-cards .card .pline .now{font-size:1.3rem;}
}
/* 한 줄로 늘어서면 태그라인 줄 수 차이(1줄/2줄)로 가격줄 높이가 어긋난다.
   body를 세로 플렉스로 두고 남는 여백을 태그라인 쪽(margin-bottom:auto)으로 흡수시켜
   가격줄을 카드 바닥에 정렬한다. 가격줄의 기존 margin-top은 그대로 유지된다. */
.cards.prod-cards .card.has-img .body{display:flex; flex-direction:column;}
.cards.prod-cards .card.has-img .body p{margin-bottom:auto;}
.card.has-img .thumb .flag{
  position:absolute; top:.8rem; left:.8rem; z-index:1;
  background:var(--brand); color:#fff; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; padding:.22rem .55rem; border-radius:4px;
}
/* 준비 중 배지 — `신규`(.flag)와 같은 자리를 쓰지만 성격이 반대다.
   브랜드 블루로 칠하면 "새로 나온 상품"처럼 읽혀 클릭을 부추긴다. 눌러도 내용이 없는
   페이지이므로 채도를 빼고 톤만 남긴다. (유토피아 전환상품 — 웨딩·줄기세포) */
.card.has-img .thumb .flag.soft{
  background:rgba(255,255,255,.92); color:var(--muted);
  border:1px solid var(--rule); font-weight:600;
}
.card.has-img .body h3{font-size:1.06rem;}
.card.has-img .body p{margin-top:.45rem; font-size:.85rem; color:var(--muted); line-height:1.65;}
.card .pline{
  margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--rule-2);
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
}
.card .pline .was{font-size:.82rem; color:var(--muted); text-decoration:line-through; font-variant-numeric:tabular-nums;}
.card .pline .now{
  margin-left:auto; font-size:1.45rem; font-weight:800; color:var(--brand);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1;
}
.card .pline .now b{font-size:.58em; font-weight:700; margin-left:.1em;}

/* ── 상세 페이지 배너 ───────────────────────────────────── */
.prod-banner, .topic-banner{
  width:min(1080px,100% - 2.5rem); margin:1.6rem auto 0;
  border-radius:12px; overflow:hidden; background:var(--ground);
  /* 2026-08-17: 1920/420(4.57:1) → 3:1. 상품 배너를 정물 5장으로 교체하면서
     원본이 3:1이 됐다. 4.57:1로 두면 위아래를 잘라 국화·유골함이 프레임에서 밀린다. */
  aspect-ratio:3/1; border:1px solid var(--rule);
}
.topic-banner{aspect-ratio:16/6;}
.prod-banner img, .topic-banner img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:640px){.prod-banner{aspect-ratio:16/7;} .topic-banner{aspect-ratio:16/8;}}

/* ── 협약사 찾기 (/partners/) ────────────────────────────
   목적은 목록 열람이 아니라 "우리 회사가 협약사인가"에 답하는 것이다.
   그래서 검색·필터를 상단에 고정 배치하고, 카드는 로고 우선으로 읽히게 한다. */
.pfind{margin-bottom:1.8rem;}
.pfind-label{display:block; font-weight:700; margin-bottom:.6rem; font-size:1.02rem;}
.pfind-box{position:relative; max-width:520px;}
.pfind-box input{
  width:100%; padding:.85rem 2.6rem .85rem 1rem; font:inherit; font-size:1rem;
  border:1px solid var(--rule); border-radius:10px; background:var(--paper); color:var(--ink);
}
.pfind-box input:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);}
.pfind-box input::-webkit-search-cancel-button{display:none;}
.pfind-clear{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  width:1.9rem; height:1.9rem; border:0; border-radius:50%; cursor:pointer;
  background:var(--ground); color:var(--muted); font-size:1.15rem; line-height:1;
}
.pfind-clear:hover{background:var(--rule-2); color:var(--ink);}

.pfind-tabs{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem;}
.ptab{
  border:1px solid var(--rule); background:var(--paper); color:var(--ink-2);
  padding:.45rem .85rem; border-radius:999px; font:inherit; font-size:.88rem; cursor:pointer;
}
.ptab span{color:var(--muted); font-size:.8rem; margin-left:.15rem;}
.ptab:hover{border-color:var(--brand); color:var(--brand);}
.ptab.is-on{background:var(--brand); border-color:var(--brand); color:#fff;}
.ptab.is-on span{color:rgba(255,255,255,.75);}
.pfind-count{margin:.8rem 0 0; font-size:.88rem; color:var(--muted); min-height:1.2em;}

.pgrid{
  display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.pcard{
  border:1px solid var(--rule); border-radius:10px; background:var(--paper);
  overflow:hidden; display:flex; flex-direction:column;
}
/* ⚠️ display를 지정한 요소는 브라우저 기본 [hidden]{display:none}을 이겨버린다.
   JS 필터가 hidden 속성으로 숨기므로 여기서 명시적으로 되돌려야 한다. */
.pcard[hidden], .pempty[hidden]{display:none;}
.pcard-img{height:110px; background:var(--paper); display:flex; align-items:center; justify-content:center;}
.pcard-img img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.pcard-name{
  padding:.6rem .7rem; font-size:.85rem; line-height:1.4; color:var(--ink);
  border-top:1px solid var(--rule-2); background:var(--ground);
}
/* 로고가 없는 기관 — 이름만으로도 카드 높이가 크게 어긋나지 않게 */
.pcard.no-logo{justify-content:center; min-height:96px; background:var(--ground);}
.pcard.no-logo .pcard-name{border-top:0; background:transparent; font-weight:600; text-align:center;}

/* 못 찾았을 때가 안내가 가장 필요한 순간이다 */
.pempty{
  border:1px solid var(--brand); background:var(--tint);
  border-radius:12px; padding:1.4rem 1.5rem; margin-top:1rem;
}
.pempty b{display:block; font-size:1.05rem; margin-bottom:.4rem;}
.pempty p{margin:0 0 1rem; color:var(--ink-2);}
.pfind-note{margin-top:1.6rem;}

@media (max-width:560px){
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .pcard-img{height:88px;}
}

/* ══════════════════════════════════════════════════════════
   협약사 확인기 (.pfw) — 홈 + 필요 시 다른 페이지 공용
   "우리 회사가 협약사인가"에 한 화면에서 답하는 부품.
   결과가 '아니오'일 때가 더 중요해서 miss 상태도 대비하게 만든다.
   ══════════════════════════════════════════════════════════ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 2026-08-17 가운데 정렬(마스터 요청). 카드는 wrap 폭(1080)인데 입력 박스가 620px라
   오른쪽 절반이 비어 좌측으로 쏠려 보였다. 카드를 좁히는 대신 **내용을 가운데로** 모은다 —
   카드 폭을 줄이면 결과 패널(협약 확인 결과 + CTA 2개)이 좁아져 모바일 레이아웃이 먼저 깨진다. */
.pfw{
  margin-top:2.2rem; border:1px solid var(--rule); border-radius:14px;
  background:var(--paper); padding:1.6rem 1.6rem 1.5rem; text-align:center;
}
.pfw-title{margin:0; font-size:1.15rem; letter-spacing:-.01em;}
.pfw-desc{margin:.45rem 0 1.05rem; font-size:.9rem; color:var(--muted);}

/* 입력 + 버튼 + 자동완성. position:relative 는 자동완성 목록의 기준이다. */
.pfw-box{position:relative; display:flex; gap:.5rem; max-width:620px; margin-inline:auto;}
.pfw-input{
  flex:1; min-width:0; padding:.85rem 2.2rem .85rem 1rem; font:inherit;
  border:1.5px solid var(--rule); border-radius:10px; background:var(--paper); color:var(--ink);
}
/* 입력 필드는 왼쪽 정렬 고정. `text-align`은 input에도 상속되므로 카드를 가운데로 두면
   플레이스홀더와 입력 중인 글자까지 가운데로 튄다(타이핑할 때마다 글자가 좌우로 흔들린다). */
.pfw-input{text-align:left;}
.pfw-input:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);}
.pfw-input::-webkit-search-cancel-button{display:none;}
.pfw-clear{
  position:absolute; top:50%; transform:translateY(-50%); right:6.2rem;
  width:26px; height:26px; border:0; border-radius:50%; cursor:pointer;
  background:var(--rule-2); color:var(--muted); font-size:1rem; line-height:1;
}
.pfw-clear:hover{background:var(--rule); color:var(--ink);}
.pfw-go{white-space:nowrap;}

/* 자동완성 목록은 가운데 정렬에서 제외한다 — 항목이 "이름 + 소속" 2단이라
   가운데로 모으면 글자 시작점이 항목마다 달라져 훑기가 어려워진다. */
.pfw-ac{
  position:absolute; top:calc(100% + .35rem); left:0; right:0; z-index:30; text-align:left;
  list-style:none; margin:0; padding:.3rem; max-height:19rem; overflow-y:auto;
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 12px 28px rgba(14,22,32,.12);
}
.pfw-ac[hidden]{display:none;}
.pfw-ac li{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  padding:.55rem .7rem; border-radius:7px; cursor:pointer;
}
.pfw-ac li.is-on, .pfw-ac li:hover{background:var(--tint);}
.pfw-ac-l{font-weight:600; font-size:.95rem;}
.pfw-ac-l mark{background:transparent; color:var(--brand); font-weight:800;}
.pfw-ac-s{font-size:.78rem; color:var(--muted);}

.pfw-result{margin-top:1.1rem; border-radius:12px; padding:1.15rem 1.3rem; border:1px solid var(--rule);}
.pfw-result[hidden]{display:none;}
.pfw-result.is-hit{border-color:var(--brand); background:var(--tint);}
.pfw-result.is-miss{border-color:var(--rule); background:var(--ground);}
.pfw-head{margin:0; font-size:1.02rem; font-weight:700; line-height:1.5;}
.pfw-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.35em; height:1.35em; margin-right:.45rem; border-radius:50%;
  background:var(--brand); color:#fff; font-size:.78em;
}
.pfw-body{margin:.5rem 0 0; font-size:.9rem; color:var(--ink-2); line-height:1.65;}
/* 결과 패널도 카드 정렬을 따른다. 본문이 2~3줄로 짧아 가운데 정렬이 읽기를 해치지 않는다. */
.pfw-result{max-width:620px; margin-inline:auto;}
.pfw-cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; justify-content:center;}

@media (max-width:560px){
  .pfw{padding:1.25rem 1.1rem;}
  .pfw-box{flex-wrap:wrap;}
  .pfw-input{flex:1 1 100%;}
  .pfw-clear{right:.6rem; top:1.55rem;}
  .pfw-go{flex:1 1 100%; text-align:center;}
  .pfw-cta .btn{flex:1 1 100%; text-align:center;}
}

/* ── 협약사 카드가 상세로 가는 링크가 되면서 필요해진 것들 ── */
a.pcard{text-decoration:none; color:inherit; transition:border-color .15s, transform .15s;}
a.pcard:hover{border-color:var(--brand); transform:translateY(-2px);}
.pcard-sub{display:block; margin-top:.15rem; font-size:.75rem; color:var(--muted); font-weight:500;}
.pcard-hit{display:block; margin-top:.25rem; font-size:.75rem; color:var(--brand); font-weight:700;}
.pcard-hit[hidden]{display:none;}

/* ── 협약사 상세 ─────────────────────────────────────────── */
.pdetail{
  display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap;
  border:1px solid var(--rule); border-radius:14px; padding:1.5rem; background:var(--paper);
}
.pdetail-logo{
  flex:0 0 220px; height:124px; display:flex; align-items:center; justify-content:center;
  background:var(--ground); border-radius:10px; padding:.6rem;
}
.pdetail-logo img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.pdetail-body{flex:1 1 260px;}
.pdetail-badge{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.08em;
  color:#fff; background:var(--brand); padding:.28rem .6rem; border-radius:99px;
}
.pdetail-lede{margin:.7rem 0 0; font-size:1rem; line-height:1.7; color:var(--ink);}
.pdetail-note{margin:.55rem 0 0; font-size:.88rem; color:var(--ink-2); line-height:1.65;}
.pdetail-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.3rem;}

/* 소속 단체 명단 — 기존 사이트에서 이미지였던 부분 */
.mgroup{margin-top:1.6rem;}
.mgroup:first-of-type{margin-top:.4rem;}
.mgroup-title{
  margin:0 0 .7rem; font-size:.95rem; font-weight:800; color:var(--ink);
  display:flex; align-items:center; gap:.45rem;
}
.mgroup-title span{
  font-size:.72rem; font-weight:700; color:var(--muted);
  background:var(--paper); border:1px solid var(--rule); border-radius:99px; padding:.1rem .45rem;
}
.mlist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.5rem;
}
.mlist li{
  background:var(--paper); border:1px solid var(--rule); border-radius:8px;
  padding:.6rem .75rem; font-size:.88rem; color:var(--ink-2); line-height:1.4;
}
@media (max-width:560px){
  .mlist{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.4rem;}
  .mlist li{font-size:.82rem; padding:.5rem .6rem;}
  .pdetail-logo{flex:1 1 100%; height:96px;}
}

/* ── 주제 히어로 (.thero) — /grave/ 장지상담 ─────────────────
 * page-head(텍스트만)로는 장지 페이지가 너무 비어 보였다. 장지는 이 회사의
 * 실제 강점(전문가 상담 + 본사 차량 현장 답사)인데 화면상 가장 약한 페이지였다.
 *
 * 홈 히어로(.hero)를 재사용하지 않은 이유: 홈의 주인공은 가격표이고 이미지는
 * 오른쪽 44%에 opacity .5로 깔리는 보조 요소다. 장지는 반대로 "어떤 자리에
 * 모실지"가 주제라 풍경이 주인공이어야 한다. 그래서 전폭(full-bleed) 밴드로 만들고
 * 텍스트는 왼쪽 여백(안개 영역)에 얹는다.
 *
 * .band.dark 대신 라이트 그라데이션을 쓴 이유: 생성 이미지가 밝은 새벽 안개라
 * 어둡게 덮으면 이미지가 죽고 사이트의 라이트 단일 테마와도 어긋난다.
 * 텍스트 가독성은 왼쪽 흰색 92% → 오른쪽 투명 그라데이션으로 확보한다.
 * 모바일(720px 이하)에서는 가로 그라데이션이 통하지 않으므로 세로로 전환한다. */
.thero{
  position:relative; overflow:hidden; background:var(--ground);
  border-bottom:1px solid var(--rule);
}
.thero-bg{position:absolute; inset:0; z-index:0;}
.thero-bg img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:64% 62%;
}
.thero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 34%,rgba(255,255,255,.42) 68%,rgba(255,255,255,.06) 100%),
    linear-gradient(0deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 42%);
}
.thero .wrap{
  position:relative; z-index:1;
  padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(1.8rem,4vw,2.6rem);
  min-height:clamp(320px,34vw,430px); display:flex; flex-direction:column; justify-content:center;
}
.thero h1{font-size:clamp(1.8rem,4.6vw,2.85rem); margin-top:.85rem;}
.thero .lede{
  margin-top:1.05rem; font-size:1.02rem; color:var(--ink-2); line-height:1.8;
  max-width:38ch; text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.thero .actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem;}
.thero .actions .btn.ghost{
  background:rgba(255,255,255,.72); border-color:var(--rule); backdrop-filter:blur(4px);
}
.thero .actions .btn.ghost b{font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
/* 5종 바로가기 — 카드까지 스크롤하지 않고 원하는 형태로 바로 가게 한다 */
.thero-jump{
  list-style:none; margin:1.7rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.thero-jump a.chip{background:rgba(255,255,255,.82); backdrop-filter:blur(4px);}
.thero-jump a.chip em{font-style:normal; color:var(--earth); font-weight:700; margin-right:.35rem;}

/* 태블릿 — 폭이 줄면 텍스트가 이미지의 밝은 오른쪽까지 넘어가 읽기 어려워진다.
   본문 폭을 풀어주는 대신(그게 원인이었다) 흰색 구간을 오른쪽으로 더 밀어준다. */
@media (min-width:721px) and (max-width:900px){
  .thero-bg img{object-position:62% 64%;}
  .thero-bg::after{
    background:
      linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.92) 52%,rgba(255,255,255,.6) 80%,rgba(255,255,255,.12) 100%),
      linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 45%);
  }
  .thero .lede{max-width:42ch;}
}
/* 모바일 — 겹치기를 포기하고 스택으로 바꾼다.
   가로 폭이 좁으면 텍스트가 이미지의 밝은 쪽까지 침범해서, 가독성을 확보하려고
   흰 오버레이를 .9 이상 올리면 정작 사진이 사라진다(히어로가 약해 보이는 원인 그 자체).
   그래서 텍스트 블록 아래에 사진을 온전히 한 장 놓는다. 오버레이도 걷어낸다. */
@media (max-width:720px){
  .thero{display:flex; flex-direction:column;}
  .thero-bg{position:relative; inset:auto; order:2; aspect-ratio:16/9;}
  .thero-bg::after{content:none;}
  .thero-bg img{object-position:64% 68%;}
  .thero .wrap{order:1; min-height:0; padding:1.8rem 0 1.9rem;}
  .thero .lede{text-shadow:none;}
  .thero .actions .btn.ghost{background:var(--paper);}
  .thero-jump a.chip{background:var(--paper);}
}

/* ══════════════════════════════════════════════════════════
   유토피아 추모관 (/utopia/) — 원 페이지
   ──────────────────────────────────────────────────────────
   원문(utopia.co.kr)은 봉안당 7종이 **탭**이라 한 번에 하나만 보인다.
   장지를 고르는 사람은 비교가 목적이므로 전부 펼쳐 세로로 놓았다.
   대신 길어지므로 (1) 섹션 여백을 .blk보다 줄이고 (2) 안치단마다 얇은
   구분선을 넣어 "어디까지가 한 항목인지"를 잃지 않게 한다.
   ══════════════════════════════════════════════════════════ */

/* 시설 요약 — 어디에 있고 누구와 계약하는지를 표 이전에 못 박는다 */
.ufacts{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  background:var(--rule); border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  margin-bottom:1.6rem;
}
.ufacts > div{background:var(--paper); padding:1.15rem 1.25rem;}
.ufacts .k{display:block; font-size:.74rem; letter-spacing:.12em; font-weight:700; color:var(--muted);}
.ufacts .v{display:block; margin-top:.4rem; font-size:.95rem; font-weight:600; color:var(--ink); line-height:1.6;}

/* 안치단 1종 = 1블록. .blk보다 좁은 여백 + 구분선 */
section.blk.uhall{padding:clamp(2.2rem,4vw,3rem) 0;}
section.blk.uhall + section.blk.uhall{border-top:1px solid var(--rule-2);}
.uhead{margin-bottom:1.3rem;}
.uhead h3{font-size:clamp(1.15rem,2.6vw,1.45rem); display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem;}
.uhead h3 .sub{
  font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--brand-dk);
  background:var(--tint); border-radius:999px; padding:.2rem .6rem;
}
.uhead .udesc{margin-top:.75rem; font-size:.95rem; color:var(--ink-2); line-height:1.85; max-width:62ch;}

/* 시설 사진 — 1장이면 와이드, 2장이면 나란히 */
.ushots{margin-bottom:1.5rem;}
.ushots figure{margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--rule); background:var(--ground);}
.ushots img{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover;}
.ushots figcaption{padding:.6rem .9rem; font-size:.82rem; color:var(--muted); font-weight:600;}
.ushots.two{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
/* 3장 — 수종 비교용. auto-fit이 아니라 고정 3열이다: 좁아질 때 2+1로 깨지면
   "셋을 나란히 비교한다"는 의도가 무너진다. 모바일에서는 아래 미디어쿼리로 1열. */
.ushots.three{display:grid; gap:.8rem; grid-template-columns:repeat(3,1fr);}
.ushots.three img{aspect-ratio:4/3;}
@media (max-width:640px){.ushots.three{grid-template-columns:1fr;}}

/* 관리비 / 단기 사용료 — 표로 만들 만큼 크지 않다. 두 칸 박스로 붙인다. */
.ugrid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-bottom:1.6rem;}
.ubox{border:1px solid var(--rule); border-radius:12px; padding:1.15rem 1.25rem; background:var(--paper);}
.ubox h4{font-size:.8rem; letter-spacing:.1em; color:var(--muted); font-weight:700;}
.ulist{list-style:none; margin:.85rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem;}
.ulist li{display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1rem; font-size:.88rem; color:var(--ink-2);}
.ulist li b{
  min-width:3.6rem; font-size:.82rem; color:var(--ink); font-weight:700;
}
.ulist li em{font-style:normal; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; margin-left:.3rem;}

/* 표 제목 */
.utitle{font-size:.95rem; margin:1.6rem 0 .8rem; display:flex; align-items:baseline; gap:.5rem;}
.utitle small{font-size:.76rem; font-weight:600; color:var(--muted);}

/* 선택 기준 카드 — 금액표를 걷어낸 자리를 채운다(2026-08-17).
 * 표가 아니라 카드인 이유: 남은 정보가 "값"이 아니라 "판단 기준"이라 행·열로 정렬할 축이 없다.
 * 읽는 순서도 위에서 아래 하나뿐이므로 그리드로 흘려보낸다. */
.uchoice{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.uchoice > div{
  border:1px solid var(--rule); border-radius:12px; padding:1.2rem 1.3rem; background:var(--paper);
}
.uchoice > div b{display:block; font-size:.97rem; color:var(--ink); line-height:1.45;}
.uchoice > div p{margin-top:.6rem; font-size:.89rem; color:var(--ink-2); line-height:1.8;}
.uchoice > div .unit{font-size:.78rem; font-weight:700; color:var(--brand-dk); margin-left:.3rem;}
.uchoice > div /* 추가 안치 규칙 — 구역별로 단위가 달라 나란히 놓고 대조시킨다 */
.uaddon{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.uaddon > div{border:1px solid var(--rule); border-radius:12px; padding:1.2rem 1.3rem; background:var(--paper);}
.uaddon b{display:block; font-size:.95rem; color:var(--ink);}
.uaddon .f{margin-top:.7rem; font-size:.92rem; font-weight:700; color:var(--brand);}
.uaddon .ex{margin-top:.55rem; font-size:.85rem; color:var(--muted); line-height:1.75;}
.uaddon .m{margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--rule-2); font-size:.86rem; color:var(--ink-2);}
.uaddon .m em{font-style:normal; font-weight:700; color:var(--ink);}

.unotes{margin-top:.7rem;}
.uchoice.one{grid-template-columns:1fr;}
.blk.alt .uchoice > div{background:var(--paper);}

/* 원문 표 이식 — 2단 헤더(colspan)와 병합 셀(rowspan)을 살린다 */
table.price.utable{min-width:520px; font-size:.88rem;}
table.price.utable th, table.price.utable td{text-align:center; padding:.75rem .9rem;}
table.price.utable th:first-child, table.price.utable td:first-child{text-align:left;}
table.price.utable thead th.grp{
  border-bottom:1px solid var(--rule-2); color:var(--ink); font-size:.76rem; letter-spacing:.06em;
}
table.price.utable thead th.sub{border-bottom:1.5px solid var(--ink); text-transform:none;}
/* colspan 그룹 사이 경계 — 지상층/지하층을 눈으로 가른다 */
table.price.utable thead th.grp + th.grp{border-left:1px solid var(--rule);}
table.price.utable td.empty{color:var(--rule); }
table.price.utable td.pname{white-space:nowrap;}
table.price.utable sup{color:var(--earth); font-weight:700;}
table.price.utable small{font-weight:600; color:var(--muted); font-size:.78em;}

/* 값이 자리마다 달라 표로 옮길 수 없는 경우(특별실) */
.urange{
  border:1px solid var(--rule); border-left:3px solid var(--brand); border-radius:10px;
  background:var(--tint); padding:1.2rem 1.35rem;
}
.urange .v{
  font-size:clamp(1.25rem,3vw,1.7rem); font-weight:800; color:var(--brand);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.2;
}
.urange p{margin-top:.6rem; font-size:.89rem; color:var(--ink-2); line-height:1.75;}
.urange.sm .v{font-size:1.15rem;}

/* 원문 카피 인용 */
.uquote{
  font-size:clamp(1.02rem,2.3vw,1.2rem); line-height:1.75; color:var(--ink);
  font-weight:600; letter-spacing:-.015em; max-width:52ch;
  padding-left:1.1rem; border-left:3px solid var(--earth);
}

/* 수목 1종 = 사진 + 표 2단. 좁아지면 사진이 위로 간다. */
.utree{display:grid; gap:1.4rem 1.8rem; grid-template-columns:minmax(240px,340px) 1fr; align-items:start;}
.utree + .utree{margin-top:2.2rem; padding-top:2.2rem; border-top:1px solid var(--rule-2);}
.utree figure{margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--rule); background:var(--ground);}
.utree figure img{width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover;}
.utree .body > .utitle:first-child{margin-top:0;}
/* ⚠️ 그리드 자식의 기본 min-width는 auto다. 안에 든 .tscroll(min-width:520px 표)이
      그대로 최소폭이 되어 트랙이 522px로 굳고, 좁은 화면에서 래퍼를 밀어낸다.
      (375px 뷰포트에서 가로 스크롤이 생겼다.) min-width:0 이어야 .tscroll이 제 안에서 스크롤한다. */
.utree > *{min-width:0;}

.unotes{margin:1rem 0 0; padding-left:1.1rem; font-size:.85rem; color:var(--muted); line-height:1.8;}

/* 표시금액 안내 하단 — 전국 장지 안내 회선 */
.utopia-nationwide{
  margin-top:.85rem; padding-top:.85rem; border-top:1px solid var(--rule-2);
}
/* 수치의 출처·기준일. 표시광고법상 근거를 문장에서 떼되 같은 화면에 남긴다. */
.utopia-nationwide .src{
  display:block; margin-top:.4rem; font-size:.78rem; color:var(--muted); line-height:1.6;
}

@media (max-width:760px){
  .utree{grid-template-columns:1fr;}
  .utree figure{max-width:420px;}
}

/* ── 협약식 사진 ─────────────────────────────────────────────
   원본이 700px대 스마트폰 사진이라 크게 늘리면 화질이 드러난다.
   그래서 2열로 묶고 최대 폭을 제한한다. 1장뿐이면 가운데 한 장으로 크게 준다. */
.pshots{display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin-top:.4rem;}
.pshots.one{grid-template-columns:1fr; max-width:620px; margin-inline:auto;}
.pshots figure{
  margin:0; border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  background:var(--ground); line-height:0;
}
.pshots img{width:100%; height:auto; display:block;}
@media (max-width:560px){
  .pshots{grid-template-columns:1fr; gap:.7rem;}
}

/* 주제 히어로 — 페이지별 초점 보정.
   .thero의 데스크톱 높이는 폭의 약 1/2.7이라, 원본 비율이 다른 이미지는 잘리는 위치가 달라진다.
   피사체가 하단(책상·문서)에 있는 컷은 아래를 살려야 한다. */
.thero-guide .thero-bg img{object-position:50% 55%;}   /* 한지 질감 — 창틀 그림자가 왼쪽 상단 */
.thero-about .thero-bg img{object-position:70% 58%;}
/* 국화 다발이 **왼쪽 아래**에 몰린 컷이다. .thero는 왼쪽을 흰색 95%로 덮어 텍스트를 얹으므로,
   그대로 두면 꽃이 글자 밑에서 씻겨 나가고 오른쪽엔 빈 회색만 남는다.
   ⚠️ object-position의 X로는 못 고친다 — 원본 비율(2.25)이 히어로(약 2.97)보다 **세로로 길어**
      cover가 폭 기준으로 맞춰지고, 가로로는 잘릴 여백 자체가 없어 X값이 무시된다.
      (18%로 바꿔 봤지만 화면이 그대로였다.)
   그래서 좌우를 뒤집어 꽃을 오른쪽으로 보낸다. 대칭에 가까운 꽃 정물이라 뒤집어도 어색하지 않다. */
.thero-products .thero-bg img{transform:scaleX(-1); object-position:50% 78%;}
@media (max-width:720px){
  .thero-guide .thero-bg img, .thero-about .thero-bg img{object-position:60% 72%;}
  /* 모바일은 텍스트 아래에 사진이 통째로 깔리고(.thero 모바일 규칙) 16:9로 잘린다.
     그라데이션이 없어 뒤집을 이유도 없다 — 원본 그대로, 꽃이 있는 아래쪽만 잡는다. */
  .thero-products .thero-bg img{transform:none; object-position:40% 76%;}
}

/* 상품 바로가기 칩 — 이름 + 회원가를 한 칩에 담는다.
   장지·전환상품 칩은 이름뿐이지만, 상품은 "얼마인가"가 곧 선택 기준이라 값을 같이 보인다. */
.thero-products .thero-jump a.chip em{
  font-style:normal; font-weight:800; color:var(--brand-dk);
  font-variant-numeric:tabular-nums; margin-left:.4rem;
}
.thero-products .thero-jump a.chip em::after{content:'만원'; font-size:.82em; font-weight:700; margin-left:.05em;}

/* ── 협약서 스캔 ─────────────────────────────────────────────
   2면 펼침 문서라 사진과 다르게 다뤄야 한다. 가로를 최대한 쓰고,
   문서라는 걸 알 수 있게 흰 배경 + 얇은 테두리만 준다(그림자 없음). */
.pdocs{display:grid; gap:1rem; margin-top:.4rem;}
.pdocs figure{margin:0; border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:#fff;}
.pdocs a{display:block; line-height:0;}
.pdocs img{width:100%; height:auto; display:block;}
.pdocs a:hover{outline:2px solid var(--brand); outline-offset:-2px;}

/* ══════════════════════════════════════════════════════════
   플로팅 상담 (.fcall) — 2026-08-17
   ──────────────────────────────────────────────────────────
   스크롤 중 어디서든 전화를 걸 수 있게 오른쪽에 띄운다.
   마크업은 footer.php 맨 끝, 표시 제어는 assets/js/motion.js.

   z-index 40 — 기존 최대는 GNB 드롭다운·자동완성의 30이다.
   그 위, 그러나 skip-link(999)보다는 아래에 둔다(접근성 우선).
   ══════════════════════════════════════════════════════════ */
.fcall{
  position:fixed; right:clamp(.9rem,2vw,1.6rem); bottom:clamp(1.1rem,3vw,2rem);
  z-index:40; display:flex; flex-direction:column; gap:.5rem; align-items:flex-end;
  /* JS가 .is-in을 붙이기 전까지는 아래에서 대기 — 갑자기 튀어나오지 않게 */
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.fcall.is-in{opacity:1; transform:none; pointer-events:auto;}
/* hidden 속성은 JS가 처음 켤 때 떼어낸다. JS가 죽어도 화면을 가리지 않는다. */
.fcall[hidden]{display:none;}

.fcall-btn{
  display:flex; align-items:center; gap:.65rem;
  padding:.8rem 1.15rem .8rem .95rem; border-radius:999px;
  background:var(--brand); color:#fff; text-decoration:none;
  box-shadow:0 10px 26px rgba(12,108,180,.32), 0 2px 6px rgba(14,22,32,.14);
  transition:background .18s ease, transform .18s ease;
}
.fcall-btn:hover{background:var(--brand-dk); transform:translateY(-2px);}
.fcall-ico{display:flex; flex:none;}
.fcall-txt{display:flex; flex-direction:column; line-height:1.15;}
.fcall-txt em{
  font-style:normal; font-size:.66rem; letter-spacing:.08em;
  font-weight:700; color:rgba(255,255,255,.82);
}
.fcall-txt b{font-size:1.02rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}

.fcall-sub{
  font-size:.78rem; font-weight:600; text-decoration:none;
  padding:.42rem .8rem; border-radius:999px;
  background:var(--paper); color:var(--ink-2); border:1px solid var(--rule);
  box-shadow:0 4px 12px rgba(14,22,32,.1);
}
.fcall-sub:hover{border-color:var(--brand); color:var(--brand-dk);}

/* 모바일 — 번호를 접고 아이콘만 남긴다.
   좁은 화면에서 알약 버튼이 본문을 가리고, tel: 도 여기서는 확실히 동작한다. */
@media (max-width:600px){
  .fcall-txt{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .fcall-btn{padding:.95rem; border-radius:50%;}
  .fcall-sub{font-size:.72rem; padding:.38rem .7rem;}
}

/* 모션을 끈 사용자에게는 이동 없이 그대로 나타난다 */
@media (prefers-reduced-motion:reduce){
  .fcall{transition:none; transform:none;}
  .fcall.is-in{transform:none;}
}

/* ══════════════════════════════════════════════════════════
   크루즈 「5가지 선택」 (.cruise5) — 2026-08-17
   ──────────────────────────────────────────────────────────
   원문의 대표 문구를 살린 강조 블록. 이 페이지에서 가장 중요한 대목인데
   `.uchoice` 카드로 두니 아래 체크리스트와 무게가 같아 묻혔다.
   번호를 크게 세워 "다섯 가지"라는 사실 자체가 먼저 읽히게 한다.
   ══════════════════════════════════════════════════════════ */
.cruise5{
  margin-top:2.2rem; border:1px solid var(--rule); border-radius:14px;
  background:var(--paper); overflow:hidden;
}
.cruise5-head{
  padding:1.5rem 1.6rem 1.3rem;
  background:var(--tint); border-bottom:1px solid var(--rule);
}
.cruise5-head .eyebrow{font-size:.72rem; letter-spacing:.14em;}
.cruise5-head h3{
  margin-top:.5rem; font-size:clamp(1.2rem,2.8vw,1.6rem); color:var(--ink); letter-spacing:-.02em;
}
.cruise5-head h3 b{color:var(--brand); font-weight:800;}
.cruise5-head p{margin-top:.6rem; font-size:.9rem; color:var(--ink-2); line-height:1.75; max-width:52ch;}

.cruise5-list{list-style:none; margin:0; padding:0;}
.cruise5-list li{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.15rem 1.6rem; border-top:1px solid var(--rule-2);
}
.cruise5-list li:first-child{border-top:0;}
/* 번호 — 세로 리듬을 만드는 축이다. tabular-nums로 자리를 고정한다. */
.cruise5-list .n{
  flex:none; width:2rem; height:2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; font-weight:800; font-size:.92rem;
  font-variant-numeric:tabular-nums; margin-top:.1rem;
}
.cruise5-list b{display:block; font-size:.98rem; color:var(--ink); line-height:1.45;}
.cruise5-list p{margin-top:.45rem; font-size:.89rem; color:var(--ink-2); line-height:1.8;}

@media (max-width:560px){
  .cruise5-head{padding:1.2rem 1.15rem 1rem;}
  .cruise5-list li{padding:1rem 1.15rem; gap:.8rem;}
  .cruise5-list .n{width:1.75rem; height:1.75rem; font-size:.85rem;}
}

/* ── 모바일 메뉴 (드로어) ─────────────────────────────────
 * 데스크톱은 기존 가로 GNB 그대로. 820px 이하에서만 버튼+세로 목록으로 바뀐다. */
.navtoggle{
  display:none; align-items:center; gap:.5rem; cursor:pointer;
  -webkit-user-select:none; user-select:none;              /* 연타 시 '메뉴' 글자가 선택되는 것 방지 */
  -webkit-tap-highlight-color:transparent;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule);
  border-radius:7px; padding:.55rem .8rem; font:inherit; font-size:.87rem; font-weight:700;
}
.navtoggle .bars{position:relative; width:1.05rem; height:2px; background:currentColor; border-radius:2px;}
.navtoggle .bars::before, .navtoggle .bars::after{
  content:''; position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}
.navtoggle .bars::before{top:-6px;} .navtoggle .bars::after{top:6px;}
.navtoggle.is-on .bars{background:transparent;}
.navtoggle.is-on .bars::before{transform:translateY(6px) rotate(45deg);}
.navtoggle.is-on .bars::after{transform:translateY(-6px) rotate(-45deg);}
.navtoggle:hover{border-color:var(--brand); color:var(--brand);}

@media (max-width:820px){
  header.site .wrap{flex-wrap:wrap; row-gap:.85rem; gap:.7rem;}
  header.site .brand{order:1;}
  header.site .quote{order:2; margin-left:auto;}
  .navtoggle{display:inline-flex; order:3;}
  header.site nav{order:4; flex:1 1 100%; border-top:1px solid var(--rule); padding-top:.35rem;}

  /* 세로 목록 — 손가락 타깃을 키운다(각 행 약 48px) */
  header.site nav ul{flex-direction:column; gap:0; font-size:1rem;}
  header.site nav > ul > li{border-bottom:1px solid var(--rule-2);}
  header.site nav > ul > li:last-child{border-bottom:0;}
  header.site nav > ul > li > a{display:block; padding:.85rem .15rem; font-weight:700; color:var(--ink);}

  /* 하위 메뉴는 접지 않고 그대로 편다. 2단 토글은 여닫는 수고만 늘린다.
     데스크톱용 드롭다운 속성(절대배치·투명·그림자)을 전부 되돌린다. */
  header.site nav .has-sub > a::after{content:none;}
  header.site nav .sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:transparent;
    min-width:0; margin:0; padding:0 0 .55rem .85rem; gap:0;
  }
  header.site nav .sub a{padding:.55rem .3rem; font-size:.93rem; color:var(--ink-2);}
  header.site nav .sub a:hover{background:transparent; color:var(--brand);}
  header.site nav .sub .sep{display:none;}

  /* 접기는 JS가 살아 있을 때만 */
  .has-js header.site nav{display:none;}
  .has-js header.site nav.is-open{display:block;}
}

/* ── 모바일 점검 보정 (2026-08-17) ─────────────────────────
 * 모바일 메뉴를 고친 뒤 전 페이지를 390px에서 계측했다. 레이아웃 넘침은 0이었지만
 * 실사용을 막는 결함 두 가지가 남아 있었다. */

/* ① iOS 확대 방지 — 입력 글꼴이 16px 미만이면 Safari가 포커스 순간 페이지를 확대한다.
 *    확대된 화면은 되돌아오지 않아, 상담 폼을 채우는 내내 가로로 밀린 화면을 보게 된다.
 *    상담 신청은 이 사이트의 전환 지점이다. 여기서 이탈하면 그걸로 끝이다. */
@media (max-width:820px){
  form.inquiry input[type=text], form.inquiry input[type=tel],
  form.inquiry select, form.inquiry textarea,
  .pfind-box input{
    font-size:16px;
  }
}

/* ② 가로 스크롤 표에 "더 있다"는 신호를 준다.
 *    /products/ 비교표는 모바일에서 5종 중 2종만 보인다. 스크롤이 되긴 하지만
 *    보이는 단서가 없어 **나머지 3종이 없는 줄 안다.** 정찰 상품표가 이 사이트의
 *    핵심 논지인데 그 절반이 안 보이는 상태였다.
 *    .is-scrollable 은 nav.js가 실제로 넘칠 때만 붙인다 — 표가 화면에 다 들어가는
 *    페이지에서 없는 스크롤을 안내하지 않기 위해서다. */
.tscroll{position:relative;}
.tscroll.is-scrollable::after{
  content:''; position:absolute; top:1px; right:1px; bottom:1px; width:2.2rem;
  border-radius:0 11px 11px 0; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
  transition:opacity .2s ease;
}
.tscroll.is-scrollable.at-end::after{opacity:0;}
.tscroll-hint{
  /* nav.js가 실제로 넘칠 때만 만들어 넣는다 — 존재 자체가 곧 "스크롤된다"는 뜻이다 */
  margin:0 0 .55rem; font-size:.82rem; color:var(--muted);
}
.tscroll-hint b{color:var(--ink-2); font-weight:600;}