/* ==========================================================================
   subpage.css — 하위 페이지(/cost/, /process/ …) 공용 스타일

   style.css 를 먼저 불러온 뒤 이 파일을 얹는다. 여기 있는 건 메인 한 장짜리
   구조에는 없던 것들: 서브 히어로, 빵부스러기, 상세 카드, FAQ 아코디언 등.
   ========================================================================== */

/* 이 페이지 전용 스타일.
   ⚠️ 본문은 JS 없이도 보여야 합니다. 네이버 Yeti 는 JS 를 실행하지 않으므로,
   메인의 [data-reveal](기본 opacity:0) 방식을 그대로 쓰면 본문이 통째로 안 읽힙니다.
   그래서 기본은 '보임' 이고, JS 가 켜졌을 때(.js)만 등장 연출을 겁니다. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1!important;transform:none!important;transition:none}}

.sub-hero{padding:132px 0 56px;position:relative}
.sub-hero h1{font-family:var(--serif);font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.24;color:var(--cream);margin:.5rem 0 0;font-weight:700;letter-spacing:-.01em}
.sub-hero h1 b{color:var(--gold);font-weight:700}
.sub-hero .lede{color:var(--muted);font-size:1.02rem;line-height:1.85;max-width:44rem;margin:1.5rem 0 0}

.crumb{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--dim);flex-wrap:wrap}
.crumb a{color:var(--dim);text-decoration:none;transition:color .3s}
.crumb a:hover{color:var(--gold)}
.crumb span[aria-current]{color:var(--muted)}

.brk{border:0;border-top:1px solid var(--line-soft);margin:0}

.detail{display:grid;gap:1.1rem;margin-top:2.4rem}
.detail__item{border:1px solid var(--line-soft);background:rgba(33,25,23,.42);padding:1.7rem 1.6rem;border-radius:var(--r-md)}
.detail__hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.detail__hd h3{font-family:var(--sans);font-size:1.06rem;color:var(--cream);margin:0;font-weight:600;letter-spacing:-.01em}
.detail__amt{font-family:var(--serif);font-size:1.24rem;color:var(--gold);white-space:nowrap;font-weight:700}
.detail__item p{color:var(--muted);font-size:.94rem;line-height:1.85;margin:.9rem 0 0}
.detail__tags{display:flex;gap:.45rem;flex-wrap:wrap;margin:1rem 0 0;padding:0;list-style:none}
.detail__tags li{font-size:.78rem;color:var(--dim);border:1px solid var(--hair);padding:.3rem .6rem;border-radius:var(--r-xs)}

.callout{border:1px solid rgba(217,178,124,.28);background:linear-gradient(160deg,rgba(217,178,124,.075),rgba(217,178,124,.02));padding:2rem 1.8rem;border-radius:var(--r-md);margin-top:2.4rem}
.callout p.k{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dp);margin:0 0 .7rem}
.callout h3{font-family:var(--serif);font-size:1.5rem;color:var(--cream);margin:0;font-weight:700}
.callout h3 b{color:var(--gold)}
.callout p.d{color:var(--muted);font-size:.95rem;line-height:1.85;margin:1rem 0 0}

.exc{list-style:none;padding:0;margin:2rem auto 0;display:grid;gap:.1rem;max-width:56rem}
.exc li{display:flex;justify-content:space-between;gap:1rem;padding:1.05rem .2rem;border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:.95rem;align-items:baseline}
.exc li b{color:var(--cream);font-weight:500;flex:0 0 auto}
.exc li span{text-align:right;color:var(--dim);font-size:.88rem;line-height:1.7}

.faq{margin-top:2.4rem;display:grid;gap:.1rem}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;padding:1.35rem .3rem;color:var(--cream);font-size:1rem;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:'+';color:var(--gold-dp);font-size:1.3rem;flex:0 0 auto;transition:transform .35s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);font-size:.94rem;line-height:1.9;margin:0;padding:0 .3rem 1.5rem}

/* 위 .cost 박스(max-width:680px)와 폭을 맞춰 정렬이 어긋나 보이지 않게 한다 */
.calcwrap{max-width:680px;margin-inline:auto}
.calc{width:100%;border-collapse:collapse;margin-top:2rem;font-size:.94rem;min-width:26rem}
.calc th,.calc td{padding:1rem .8rem;border-bottom:1px solid var(--line-soft);text-align:right;color:var(--muted);white-space:nowrap}
.calc th{color:var(--gold-dp);font-weight:500;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;border-bottom-color:var(--line)}
.calc th:first-child,.calc td:first-child{text-align:left;color:var(--cream)}
.calc td:last-child{color:var(--gold);font-family:var(--serif);font-weight:700;font-size:1.06rem}
.calc tbody tr:last-child td{border-bottom:0}

.endcta{text-align:center;padding:4.5rem 0 5.5rem}
.endcta h2{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.3rem);color:var(--cream);margin:0 0 1rem;font-weight:700}
.endcta p{color:var(--muted);font-size:.98rem;line-height:1.85;margin:0 0 2.2rem}
.endcta .row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

@media(max-width:640px){
  .sub-hero{padding:104px 0 40px}
  .detail__item{padding:1.4rem 1.2rem}
  .exc li{flex-direction:column;gap:.35rem}
  .exc li span{text-align:left}
}