@charset "UTF-8";
/* ============================================================
   이상한상품권 — 공용 디자인 시스템 (v6)
   이 파일 하나만 고치면 홈페이지 전체 디자인이 함께 바뀝니다.
   ============================================================ */

/* ---------- 폰트 ---------- */
@font-face{font-family:'Pretendard';font-weight:400;font-display:swap;src:url('fonts/Pretendard-Regular.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:500;font-display:swap;src:url('fonts/Pretendard-Medium.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:600;font-display:swap;src:url('fonts/Pretendard-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:700;font-display:swap;src:url('fonts/Pretendard-Bold.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-weight:800;font-display:swap;src:url('fonts/Pretendard-ExtraBold.woff2') format('woff2');}

/* iOS WebKit에서 커스텀 폰트의 굵은 글씨가 얇게 렌더링되는 문제 보정 */
@supports (-webkit-touch-callout: none){
  h1,h2,h3,h4,strong,b,.num-xl,.num-lg{ -webkit-text-stroke:0.32px currentColor; }
}

/* ---------- 디자인 토큰 ---------- */
:root{
  /* 색 */
  --ink:#0B1B2E;
  --ink-70:rgba(11,27,46,.70);
  --ink-55:rgba(11,27,46,.55);
  --ink-40:rgba(11,27,46,.40);
  --bg:#FFFFFF;
  --bg-soft:#F5F8FC;
  --bg-soft-2:#EDF2F9;
  --line:#E3E9F2;
  --line-strong:#CDD8E8;
  --accent:#1B5FD9;
  --accent-deep:#0E3F9B;
  --accent-soft:#EDF3FE;
  --gold:#9C7420;
  --danger:#C0392B;
  --danger-soft:#FDF1EF;
  --ok:#12805C;

  /* 반경 */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-pill:100px;

  /* 그림자 (아주 절제) */
  --sh-1:0 1px 2px rgba(11,27,46,.05);
  --sh-2:0 6px 22px -12px rgba(11,27,46,.22);
  --sh-3:0 18px 44px -22px rgba(11,27,46,.32);

  /* 간격 */
  --gut:20px;
  --sec:clamp(42px, 6.2vw, 88px);

  /* 헤더 높이 (스크롤 시 축소) */
  --hd:68px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.65; letter-spacing:-0.015em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:16px;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px;}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gut);}
@media(min-width:640px){ :root{--gut:24px;} }
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--gut);}
.tnum{font-variant-numeric:tabular-nums;}
.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;}

/* ============================================================
   타이포그래피 스케일
   ============================================================ */
h1,.h1{font-size:clamp(1.72rem,1.28rem + 1.95vw,2.9rem);font-weight:800;letter-spacing:-0.038em;line-height:1.22;}
h2,.h2{font-size:clamp(1.3rem,1.1rem + .95vw,1.95rem);font-weight:800;letter-spacing:-0.03em;line-height:1.3;}
h3,.h3{font-size:clamp(1.06rem,1rem + .35vw,1.22rem);font-weight:700;letter-spacing:-0.02em;line-height:1.4;}
h4{font-size:1rem;font-weight:700;letter-spacing:-0.02em;}
.lead{font-size:clamp(.96rem,.92rem + .3vw,1.14rem);color:var(--ink-70);line-height:1.68;}
.cap{font-size:.82rem;color:var(--ink-55);line-height:1.55;}
.cap-xs{font-size:.75rem;color:var(--ink-40);line-height:1.5;}
.num-xl{font-size:clamp(2.1rem,1.5rem + 2.4vw,3rem);font-weight:800;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;line-height:1;}
.num-lg{font-size:clamp(1.5rem,1.2rem + 1.1vw,1.9rem);font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1.1;}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);line-height:1.5;}
.eyebrow-ko{font-size:.84rem;font-weight:700;letter-spacing:-.01em;color:var(--accent);text-transform:none;}

/* ============================================================
   헤더 (스크롤 시 축소)
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease,background .25s ease;
}
.site-header.shrunk{box-shadow:var(--sh-2);background:rgba(255,255,255,.94);}
.hd-row{
  display:flex;align-items:center;gap:14px;
  height:var(--hd);transition:height .25s ease;
}
.site-header.shrunk .hd-row{height:56px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.02rem;letter-spacing:-.035em;flex-shrink:0;}
.brand img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-strong);flex-shrink:0;}
.hd-nav{flex:1;min-width:0;}
.hd-nav ul{list-style:none;display:flex;gap:22px;align-items:center;}
.hd-nav a{font-size:.9rem;font-weight:600;color:var(--ink-70);transition:color .15s;white-space:nowrap;}
.hd-nav a:hover,.hd-nav a[aria-current="page"]{color:var(--ink);}
.hd-cta{
  display:none;flex-shrink:0;background:var(--ink);color:#fff;
  font-size:.82rem;font-weight:700;padding:9px 16px;border-radius:var(--r-pill);
  border:none;cursor:pointer;transition:background .2s ease;
}
.hd-cta:hover{background:var(--accent);}
.hd-burger{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:10px;
  width:44px;height:44px;flex-shrink:0;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;
}
.hd-burger span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .22s ease;}
.hd-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg);}
.hd-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hd-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg);}
@media(min-width:900px){ .hd-cta{display:inline-block;} }
@media(max-width:899px){
  .hd-nav{display:none;}
  .hd-burger{display:flex;}
  .hd-row{justify-content:space-between;}
}
.hd-drawer{
  display:none;position:fixed;left:0;right:0;top:56px;z-index:59;
  background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-3);
  max-height:calc(100vh - 56px);overflow-y:auto;
}
.hd-drawer.open{display:block;}
.hd-drawer ul{list-style:none;padding:6px var(--gut) 10px;}
.hd-drawer li + li{border-top:1px solid var(--line);}
.hd-drawer a{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;font-weight:600;font-size:1rem;}
.hd-drawer a::after{content:"›";color:var(--ink-40);font-size:1.1rem;}
.hd-drawer .drawer-cta{margin:10px var(--gut) 18px;}

/* 스크롤 진행 바 */
.scroll-progress{position:fixed;top:0;left:0;height:2.5px;width:0;background:var(--accent);z-index:70;transition:width .08s linear;}

/* ============================================================
   섹션 / 공통 레이아웃
   ============================================================ */
section{padding:var(--sec) 0;}
.sec-soft{background:var(--bg-soft);}
.sec-ink{background:var(--ink);color:#fff;}
.sec-ink .lead,.sec-ink .cap{color:rgba(255,255,255,.72);}
.sec-head{margin-bottom:clamp(24px,3vw,40px);max-width:62ch;}
.sec-head .eyebrow,.sec-head .eyebrow-ko{margin-bottom:10px;display:block;}
.sec-head h2 + p{margin-top:12px;}

/* ============================================================
   버튼
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-weight:700;font-size:.95rem;letter-spacing:-.02em;
  padding:14px 22px;min-height:50px;border-radius:var(--r-sm);
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
  text-align:center;
}
.btn:active{transform:scale(.985);}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px -8px rgba(27,95,217,.6);}
.btn-primary:hover{background:var(--accent-deep);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:var(--accent);}
.btn-ghost{background:#fff;border-color:var(--line-strong);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-on-ink{background:#fff;color:var(--ink);}
.btn-on-ink:hover{background:var(--accent);color:#fff;}
.btn-ghost-ink{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;}
.btn-ghost-ink:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-sm{padding:9px 15px;min-height:40px;font-size:.85rem;}
.btn-block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:11px;}
@media(max-width:420px){ .btn-row .btn{flex:1 1 100%;} }

/* 마그네틱 버튼(데스크톱 전용, 아주 작게) */
@media(hover:hover) and (pointer:fine){
  .btn-magnetic{will-change:transform;}
}

/* ============================================================
   카드 / 표면
   ============================================================ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);}
.card-pad{padding:22px;}
.card-hover{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.card-hover:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);transform:translateY(-2px);}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;font-weight:700;padding:6px 12px;
  border-radius:var(--r-pill);background:var(--bg-soft);border:1px solid var(--line);
  color:var(--ink-70);white-space:nowrap;
}
.pill-accent{background:var(--accent-soft);border-color:#D3E3FD;color:var(--accent-deep);}
.pill-btn{cursor:pointer;transition:border-color .18s ease,background .18s ease;}
.pill-btn:hover{border-color:var(--accent);background:#fff;}
/* 모바일에서는 누를 수 있는 pill의 터치 영역을 충분히 확보 */
@media(max-width:899px){
  .pill-btn{min-height:46px;padding:11px 15px;}
}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;}

/* ============================================================
   히어로
   ============================================================ */
.hero{padding:clamp(30px,5vw,78px) 0 clamp(30px,3.6vw,54px);position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 320px at 12% -8%, #E9F1FF 0%, rgba(233,241,255,0) 68%),
    radial-gradient(560px 280px at 92% 8%, #F1F6FF 0%, rgba(241,246,255,0) 70%);
}
.hero .lead{margin-top:clamp(18px,2.3vw,26px);max-width:40ch;line-height:1.72;}
.hero .btn-row{margin-top:clamp(24px,3vw,32px);}
.hero-meta{margin-top:clamp(18px,2.2vw,24px);}

/* 히어로 옆 시세 요약 카드 */
/* 히어로: 어절 단위로만 줄바꿈되게 (기기별 어색한 끊김 방지) */
.hero h1 span,.hero .lead span{display:inline-block;}
/* 히어로 : eyebrow → 헤드라인 2줄(같은 크기) */
.hero .eyebrow{margin-bottom:clamp(16px,2vw,22px);}
.hero h1{max-width:none;margin-top:0;line-height:1.32;
  font-size:clamp(1.24rem,6.2vw,2rem);}
.hero h1 .l1,.hero h1 .l2{display:block;}
.hero h1 .l1{margin-bottom:2px;}

/* 히어로 H1 안의 질문줄 — 훅으로 자연스럽게 이어지도록 작게 */
.hero h1 .q{
  display:block;font-style:normal;
  font-size:clamp(.92rem,.86rem + .32vw,1.08rem);
  font-weight:700;letter-spacing:-.025em;line-height:1.5;
  color:var(--ink-55);margin-bottom:clamp(8px,1vw,12px);
}
.hero .lead b{color:var(--ink);font-weight:800;}
.eyebrow i{font-style:normal;opacity:.45;margin:0 4px;}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,44px);align-items:start;}
@media(min-width:940px){ .hero-grid{grid-template-columns:1.08fr .92fr;align-items:center;} }

.rate-peek{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;}
.rate-peek-hd{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-soft);}
.rate-peek-hd .hd-l{display:flex;flex-direction:column;gap:3px;min-width:0;}
.rate-peek-hd .t{font-size:.84rem;font-weight:800;letter-spacing:-.02em;}
.rate-peek-hd .s{font-size:.74rem;font-weight:600;color:var(--ink-55);}
.rate-peek-hd .s b{color:var(--accent);font-weight:800;font-variant-numeric:tabular-nums;}
.rate-peek-hd .d{font-size:.72rem;color:var(--ink-55);font-variant-numeric:tabular-nums;}
.rate-peek-list{padding:6px 8px;}
.rate-peek-row{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r-xs);transition:background .16s ease;}
.rate-peek-row:hover{background:var(--bg-soft);}
.rate-peek-row + .rate-peek-row{border-top:1px solid var(--line);}
.rate-peek-row .nm{flex:1;min-width:0;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rate-peek-row .pc{font-size:1.06rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.rate-peek-row .pc small{font-size:.72rem;margin-left:1px;}
.rate-peek-ft{padding:13px 20px;border-top:1px solid var(--line);background:var(--bg-soft);text-align:center;}
.rate-peek-ft a{font-size:.85rem;font-weight:700;color:var(--accent);}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block;}

/* ============================================================
   벤토 그리드 (신뢰 지표)
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:820px){ .bento{grid-template-columns:repeat(4,1fr);} }
.bento-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px;display:flex;flex-direction:column;gap:5px;justify-content:center;
}
.bento-item .k{font-size:.79rem;color:var(--ink-55);font-weight:600;}
.bento-item .v{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.1;}
.bento-wide{grid-column:span 2;}
@media(min-width:820px){ .bento-feature{grid-column:span 2;grid-row:span 1;} }
.bento-accent{background:var(--ink);border-color:var(--ink);color:#fff;}
.bento-accent .k{color:rgba(255,255,255,.65);}

/* ============================================================
   시세 리스트 (핵심 컴포넌트)
   ============================================================ */
.rate-group{margin-bottom:30px;}
.rate-group-t{font-size:.82rem;font-weight:800;color:var(--ink-55);letter-spacing:.02em;margin-bottom:11px;}
.rate-list{display:flex;flex-direction:column;gap:9px;}
.rate-row{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px 18px;transition:border-color .18s ease,box-shadow .18s ease,transform .16s ease;
}
.rate-row:hover{border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-1px);}
.rate-row:active{transform:scale(.995);}
.rate-row .nm{display:flex;align-items:center;gap:9px;flex:1;min-width:0;font-weight:700;font-size:.96rem;letter-spacing:-.02em;}
.rate-row .pc{font-size:1.2rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.03em;flex-shrink:0;}
.rate-row .pc small{font-size:.74rem;margin-left:1px;font-weight:700;}
.rate-row .py{font-size:.76rem;color:var(--ink-55);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0;min-width:118px;text-align:right;}
.rate-row .go{font-size:.74rem;font-weight:700;color:var(--ink-40);flex-shrink:0;}
.rate-row:hover .go{color:var(--accent);}

@media(max-width:640px){
  .rate-row{flex-wrap:wrap;padding:14px 15px;}
  .rate-row .nm{flex:1 1 auto;}
  .rate-row .pc{order:2;}
  .rate-row .py{order:3;flex:1 1 100%;text-align:left;min-width:0;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}
  .rate-row .go{display:none;}
}

/* ============================================================
   예상금액 계산기
   ============================================================ */
.est{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:clamp(20px,3vw,34px);}
.est-hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px;}
.biz-hours{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg-soft);white-space:nowrap;}
.biz-hours .led{width:7px;height:7px;border-radius:50%;background:var(--ink-40);flex-shrink:0;}
.biz-hours.open{color:var(--ok);border-color:#BFE5D7;background:#F0FBF7;}
.biz-hours.open .led{background:var(--ok);box-shadow:0 0 0 3px rgba(18,128,92,.16);}
.biz-hours.closed{color:var(--ink-55);}

.est-items{display:flex;flex-direction:column;gap:12px;margin:20px 0 14px;}
.est-empty{padding:26px 18px;text-align:center;color:var(--ink-55);font-size:.9rem;background:var(--bg-soft);border:1px dashed var(--line-strong);border-radius:var(--r-sm);}
.est-item{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;background:var(--bg-soft);}
.est-item-x{position:absolute;top:11px;right:11px;background:none;border:none;font-size:.74rem;font-weight:700;color:var(--ink-40);cursor:pointer;padding:4px 6px;border-radius:6px;}
.est-item-x:hover{color:var(--danger);background:#fff;}
.est-fields{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:600px){ .est-fields{grid-template-columns:1.5fr 1.1fr .7fr;} }
.fld{display:flex;flex-direction:column;gap:5px;min-width:0;}
.fld label{font-size:.74rem;font-weight:700;color:var(--ink-55);}
.fld select,.fld input{
  width:100%;padding:11px 12px;border:1px solid var(--line-strong);border-radius:10px;
  background:#fff;font-size:.92rem;font-weight:600;min-height:44px;
  appearance:none;-webkit-appearance:none;
}
.fld select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230B1B2E' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.fld select:focus,.fld input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(27,95,217,.13);}
.est-item-res{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line-strong);}
.est-item-res .l{font-size:.79rem;color:var(--ink-55);font-weight:600;}
.est-item-res .v{font-size:1.08rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.025em;}
.est-item-res.pending .v{color:var(--gold);font-size:.95rem;}
.est-note{margin-top:9px;font-size:.79rem;color:var(--ink-55);line-height:1.55;}
.est-note.warn{color:var(--danger);}

.est-add{
  width:100%;padding:14px;border:1.5px dashed var(--line-strong);border-radius:var(--r-sm);
  background:#fff;font-weight:700;font-size:.92rem;color:var(--accent);cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.est-add:hover{border-color:var(--accent);background:var(--accent-soft);}

.est-total{
  margin-top:18px;padding:20px 22px;border-radius:var(--r);
  background:var(--ink);color:#fff;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;
}
.est-total .l{font-size:.8rem;color:rgba(255,255,255,.66);font-weight:600;}
.est-total .v{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:3px;}
.est-total .side{font-size:.78rem;color:rgba(255,255,255,.7);font-weight:600;text-align:right;}
.est-total .sub{flex:1 1 100%;font-size:.78rem;color:rgba(255,255,255,.6);margin-top:2px;}
.est-total .note{
  flex:1 1 100%;font-size:.76rem;line-height:1.6;color:rgba(255,255,255,.55);
  margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);
}

.est-extra{display:none;grid-template-columns:1fr;gap:11px;margin-top:16px;}
@media(min-width:600px){ .est-extra{grid-template-columns:1fr 1fr;} }
.est-extra .full{grid-column:1/-1;}

.est-steps{margin-top:18px;font-size:.8rem;font-weight:700;color:var(--ink-55);}
.est-actions{display:none;flex-wrap:wrap;gap:10px;margin-top:11px;}
.est-actions .btn{flex:1 1 220px;}
.est-caution{display:none;list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.est-caution li{font-size:.79rem;color:var(--ink-55);line-height:1.6;padding-left:14px;position:relative;margin-bottom:6px;}
.est-caution li::before{content:"·";position:absolute;left:3px;font-weight:800;}
.est-caution a{color:var(--accent);font-weight:700;text-decoration:underline;}

/* 브랜드 페이지용 미니 계산기 */
.est-mini{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:20px;}
.est-mini .est-total{margin-top:14px;padding:16px 18px;}

/* ============================================================
   프로세스 / 스텝
   ============================================================ */
.steps{display:grid;grid-template-columns:1fr;gap:12px;counter-reset:st;}
@media(min-width:760px){ .steps{grid-template-columns:repeat(4,1fr);} }
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;position:relative;}
.step .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent-deep);
  font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.step .t{font-weight:700;font-size:.98rem;letter-spacing:-.02em;margin-bottom:5px;}
.step .d{font-size:.86rem;color:var(--ink-55);line-height:1.6;}
.sec-ink .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
.sec-ink .step .n{background:rgba(255,255,255,.14);color:#fff;}
.sec-ink .step .d{color:rgba(255,255,255,.66);}

.mini-steps{display:grid;grid-template-columns:1fr;gap:9px;margin:14px 0;}
@media(min-width:620px){ .mini-steps{grid-template-columns:repeat(2,1fr);} }
.mini-step{display:flex;gap:11px;align-items:flex-start;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;}
.mini-step .n{flex-shrink:0;width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;}
.mini-step p{font-size:.87rem;line-height:1.55;margin:0;}

/* ============================================================
   FAQ 아코디언
   ============================================================ */
.faq{display:flex;flex-direction:column;gap:9px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:border-color .2s ease;}
.faq-item.open{border-color:var(--accent);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 19px;background:none;border:none;cursor:pointer;text-align:left;
  font-weight:700;font-size:.95rem;letter-spacing:-.02em;line-height:1.5;
}
.faq-q .ic{flex-shrink:0;width:19px;height:19px;position:relative;}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--ink-40);border-radius:2px;transition:transform .25s ease,background .2s ease;}
.faq-q .ic::before{top:8.6px;left:2px;width:15px;height:1.8px;}
.faq-q .ic::after{left:8.6px;top:2px;width:1.8px;height:15px;}
.faq-item.open .ic::after{transform:rotate(90deg);}
.faq-item.open .ic::before,.faq-item.open .ic::after{background:var(--accent);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:700px;}
.faq-a-in{padding:0 19px 19px;font-size:.9rem;color:var(--ink-70);line-height:1.7;}
.faq-a-in a{color:var(--accent);font-weight:700;text-decoration:underline;}

/* ============================================================
   콜아웃 / 경고
   ============================================================ */
.callout{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:17px 19px;font-size:.9rem;line-height:1.7;}
.callout.warn{background:var(--danger-soft);border-color:#F0CFC9;border-left-color:var(--danger);}
.callout.warn strong{color:var(--danger);}
.callout + .callout{margin-top:11px;}
.callout a{color:var(--accent);font-weight:700;text-decoration:underline;}

.check-list{list-style:none;display:grid;gap:11px;}
.check-list li{position:relative;padding-left:27px;font-size:.92rem;line-height:1.65;}
.check-list li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;
  background:var(--accent-soft);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1.2' stroke='%231B5FD9' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.x-list{list-style:none;display:grid;gap:11px;}
.x-list li{position:relative;padding-left:27px;font-size:.92rem;line-height:1.65;}
.x-list li::before{content:"✕";position:absolute;left:3px;top:0;color:var(--danger);font-weight:800;font-size:.86rem;}

/* ============================================================
   본문 아티클 (가이드/브랜드/정책 페이지)
   ============================================================ */
.doc{padding-top:clamp(30px,4vw,50px);padding-bottom:clamp(30px,4vw,50px);}
.doc article{margin-bottom:clamp(30px,4vw,46px);}
.doc article > * + *{margin-top:13px;}
.doc h2{margin-bottom:4px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.doc h3{margin-top:22px;}
.doc p{font-size:.96rem;line-height:1.78;color:var(--ink-70);}
.doc p strong{color:var(--ink);font-weight:700;}
.doc ul,.doc ol{padding-left:19px;display:grid;gap:8px;}
.doc li{font-size:.94rem;line-height:1.72;color:var(--ink-70);}
.doc li strong{color:var(--ink);}
.doc a{color:var(--accent);font-weight:600;}
.doc a:hover{text-decoration:underline;}

.breadcrumb{font-size:.76rem;color:var(--ink-40);padding:16px 0 0;}
.breadcrumb a{color:var(--ink-55);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span{margin:0 6px;opacity:.5;}

.tbl{width:100%;border-collapse:collapse;margin:14px 0;}
.tbl th{text-align:left;font-size:.78rem;font-weight:700;color:var(--ink-55);padding-bottom:9px;border-bottom:1px solid var(--line-strong);}
.tbl th:last-child{text-align:right;}
.tbl td{padding:13px 0;border-bottom:1px solid var(--line);font-size:.93rem;color:var(--ink-70);}
.tbl td:last-child{text-align:right;font-weight:800;font-size:1.02rem;color:var(--ink);font-variant-numeric:tabular-nums;}

/* 시세표(rates.html)는 숫자 열이 2개라 마지막 열만 정렬하면 앞 열이 어긋난다 */
.tbl-rates th:nth-child(3),
.tbl-rates td:nth-child(3){text-align:right;}
.tbl-rates td:nth-child(3){font-weight:800;font-size:1.02rem;color:var(--ink);font-variant-numeric:tabular-nums;}

/* 브랜드 페이지 히어로 */
.brand-hero{padding:26px 0 clamp(26px,3vw,38px);}
.brand-hero .rate-big{
  display:flex;align-items:baseline;gap:12px;margin-top:20px;padding:20px 24px;
  background:var(--ink);color:#fff;border-radius:var(--r);flex-wrap:wrap;
}
.brand-hero .rate-big .n{font-size:clamp(2rem,1.5rem + 2vw,2.7rem);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;}
.brand-hero .rate-big .l{font-size:.82rem;color:rgba(255,255,255,.66);font-weight:600;}
.brand-hero .rate-big .l b{display:block;color:#fff;font-size:.92rem;margin-bottom:2px;}

/* ------------------------------------------------------------
   3초 확인 블록 — 긴 글을 읽기 전에 "내 상품권이 되는지"부터 판단
   ------------------------------------------------------------ */
.quick-check{
  margin-top:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px 14px;
}
.quick-check .qc-hd{
  font-size:.78rem;font-weight:800;color:var(--ink-55);
  letter-spacing:-.01em;margin-bottom:12px;
}
.qc-row{
  display:grid;grid-template-columns:1fr;gap:3px;
  padding:11px 0;border-top:1px solid var(--line);
}
.qc-row:first-of-type{border-top:none;padding-top:0;}
.qc-row .k{
  font-size:.75rem;font-weight:800;color:var(--ink-40);
}
.qc-row .v{font-size:.9rem;line-height:1.6;font-weight:500;color:var(--ink);}
.qc-row .v b{font-weight:800;}
.qc-row.is-block .k{color:var(--danger);}
.qc-row.is-block .v{color:var(--ink-70);}
.qc-cta{
  display:block;margin-top:13px;padding:13px 14px;text-align:center;
  background:var(--bg-soft);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font-size:.88rem;font-weight:700;color:var(--ink);
  transition:border-color .18s ease,background .18s ease;
}
.qc-cta:hover{border-color:var(--accent);background:#fff;color:var(--accent);}
@media(min-width:620px){
  .qc-row{grid-template-columns:112px 1fr;gap:14px;align-items:baseline;}
  .qc-row .k{padding-top:1px;}
}

/* 시세 옆에 항상 같은 문장으로 붙는 안내 */
.rate-note{
  margin-top:12px;font-size:.78rem;line-height:1.6;color:var(--ink-40);
}
.brand-hero .rate-note{margin-top:12px;}

.other-brands{border-top:1px solid var(--line);padding-top:26px;margin-top:8px;}
.other-brands h4{font-size:.9rem;margin-bottom:12px;color:var(--ink-55);}
.ob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
@media(min-width:620px){ .ob-grid{grid-template-columns:repeat(4,1fr);} }
.ob-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.86rem;font-weight:600;transition:border-color .18s ease;}
.ob-link:hover{border-color:var(--accent);}
.ob-link .r{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;font-size:.9rem;}

/* ============================================================
   CTA 패널
   ============================================================ */
.cta-panel{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(30px,4.5vw,56px) clamp(22px,4vw,48px);text-align:center;}
.cta-panel h2{color:#fff;}
.cta-panel .lead{color:rgba(255,255,255,.72);margin:14px auto 0;max-width:46ch;}
.cta-panel .btn-row{justify-content:center;margin-top:26px;}
.cta-panel .cap{color:rgba(255,255,255,.5);}
.cta-panel a.inline{color:rgba(255,255,255,.8);text-decoration:underline;}
.cta-3{display:grid;grid-template-columns:1fr;gap:11px;margin-top:28px;text-align:left;}
@media(min-width:720px){ .cta-3{grid-template-columns:repeat(3,1fr);} }
.cta-3 .c{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);padding:18px;}
.cta-3 .c .n{font-size:.72rem;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:.08em;margin-bottom:8px;}
.cta-3 .c .t{font-weight:700;font-size:.95rem;margin-bottom:5px;}
.cta-3 .c .d{font-size:.83rem;color:rgba(255,255,255,.65);line-height:1.6;}

/* ============================================================
   외부 프로필 링크 카드
   ============================================================ */
.proof-grid{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:640px){ .proof-grid{grid-template-columns:repeat(2,1fr);} }
.proof-card{display:flex;align-items:center;gap:13px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .18s ease,transform .18s ease;}
a.proof-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.proof-card .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.proof-card .nm{display:block;font-weight:700;font-size:.93rem;}
.proof-card .mt{display:block;font-size:.78rem;color:var(--ink-55);}
.proof-card .go{font-size:.72rem;font-weight:700;color:var(--ink-40);white-space:nowrap;}
a.proof-card:hover .go{color:var(--accent);}

/* ============================================================
   푸터
   ============================================================ */
.site-footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:44px 0 calc(44px + env(safe-area-inset-bottom));margin-top:0;}
.ft-top{display:grid;grid-template-columns:1fr;gap:26px;padding-bottom:26px;border-bottom:1px solid var(--line);}
@media(min-width:760px){ .ft-top{grid-template-columns:1.3fr 1fr 1fr;} }
.ft-col h5{font-size:.78rem;font-weight:800;color:var(--ink-55);letter-spacing:.04em;margin-bottom:12px;}
.ft-col ul{list-style:none;display:grid;gap:9px;}
.ft-col a{font-size:.87rem;color:var(--ink-70);}
.ft-col a:hover{color:var(--accent);}
.ft-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1rem;margin-bottom:11px;}
.ft-brand img{width:26px;height:26px;border-radius:50%;}
.ft-biz{font-size:.81rem;color:var(--ink-55);line-height:1.75;}
.ft-biz b{color:var(--ink-70);font-weight:600;}
.ft-bottom{padding-top:22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;}
.ft-bottom p{font-size:.76rem;color:var(--ink-40);}
.biz-copy{cursor:pointer;border-bottom:1px dotted var(--ink-40);}
.biz-copy:hover{color:var(--accent);border-color:var(--accent);}

/* ============================================================
   하단 고정 CTA (모바일)
   ============================================================ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:58;
  display:flex;gap:9px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.sticky-cta.show{transform:translateY(0);}
.sticky-cta .btn{flex:1;min-height:48px;font-size:.9rem;padding:12px 14px;}
@media(min-width:900px){ .sticky-cta{display:none;} }
body.has-sticky{padding-bottom:78px;}
@media(min-width:900px){ body.has-sticky{padding-bottom:0;} }

.to-top{
  position:fixed;right:16px;bottom:84px;z-index:57;
  width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);
  box-shadow:var(--sh-2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.to-top.show{opacity:1;pointer-events:auto;}
@media(min-width:900px){ .to-top{bottom:24px;} }

/* ============================================================
   모달 / 토스트
   ============================================================ */
.modal-ov{
  position:fixed;inset:0;z-index:100;background:rgba(11,27,46,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-ov.show{display:flex;animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:#fff;border-radius:var(--r-lg);padding:28px 26px;max-width:400px;width:100%;
  max-height:88vh;overflow-y:auto;position:relative;box-shadow:var(--sh-3);
  animation:popIn .22s cubic-bezier(.22,1,.36,1);
}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:14px;background:none;border:none;font-size:1.1rem;color:var(--ink-40);cursor:pointer;padding:5px;line-height:1;}
.modal-x:hover{color:var(--ink);}
.modal h4{font-size:1.02rem;margin-bottom:5px;padding-right:24px;}
.modal .m-sub{font-size:1.5rem;font-weight:800;color:var(--accent);letter-spacing:-.02em;margin-bottom:16px;font-variant-numeric:tabular-nums;}
/* QR은 카메라로 인식되어야 하므로 넉넉하게. max-width로 작은 화면에서도 넘치지 않게 */
.modal img{width:264px;max-width:100%;height:auto;object-fit:contain;margin:0 auto 12px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;background:#fff;}
.modal .qr-cap{font-size:.78rem;color:var(--ink-55);text-align:center;margin-bottom:16px;}
.modal .m-lbl{font-size:.78rem;font-weight:800;color:var(--ink-55);margin-bottom:9px;padding-top:14px;border-top:1px solid var(--line);}
.modal ol{padding-left:18px;display:grid;gap:6px;}
.modal ol li{font-size:.86rem;color:var(--ink-70);line-height:1.55;}
.modal .m-warn{margin-top:14px;padding:11px 13px;background:var(--danger-soft);border:1px solid #F0CFC9;border-radius:var(--r-sm);font-size:.79rem;line-height:1.6;color:var(--ink-70);}
.modal .m-warn b{color:var(--danger);}
.modal .m-warn a{color:var(--accent);font-weight:700;text-decoration:underline;}
.modal .m-btn{display:block;text-align:center;margin-top:16px;padding:13px;background:var(--accent);color:#fff;border-radius:var(--r-sm);font-weight:700;font-size:.9rem;}
.modal .m-btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line-strong);margin-top:9px;}

.toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,16px);z-index:110;
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:var(--r-pill);
  font-size:.86rem;font-weight:600;box-shadow:var(--sh-3);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
  max-width:calc(100vw - 40px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ============================================================
   등장 애니메이션 (절제)
   ============================================================ */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);}
.rv.on{opacity:1;transform:none;}
.rv-s > *{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);}
.rv-s.on > *{opacity:1;transform:none;}
.rv-s.on > *:nth-child(1){transition-delay:0s}
.rv-s.on > *:nth-child(2){transition-delay:.05s}
.rv-s.on > *:nth-child(3){transition-delay:.1s}
.rv-s.on > *:nth-child(4){transition-delay:.15s}
.rv-s.on > *:nth-child(5){transition-delay:.2s}
.rv-s.on > *:nth-child(6){transition-delay:.25s}
.rv-s.on > *:nth-child(7){transition-delay:.3s}
.rv-s.on > *:nth-child(8){transition-delay:.35s}
@media (prefers-reduced-motion: reduce){
  .rv,.rv-s > *{opacity:1!important;transform:none!important;transition:none!important;}
  .sticky-cta{transition:none;}
}

/* 유틸 */
.mt-0{margin-top:0!important}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.tc{text-align:center}
.hide-sm{display:none}
@media(min-width:640px){ .hide-sm{display:block} }


/* ============================================================
   모바일 우선 최종 조정 (방문자 대부분이 모바일)
   ============================================================ */
@media(max-width:639px){
  body{font-size:15.5px;}
  .sec-head{margin-bottom:20px;}
  .sec-head h2 + p{margin-top:9px;}

  /* 버튼: 두 개일 때 세로로 쌓되 높이를 줄여 스크롤 부담 감소 */
  .btn{padding:13px 18px;min-height:50px;font-size:.94rem;}
  .btn-row{gap:9px;}
  .btn-row .btn{flex:1 1 100%;}

  /* 카드 여백 축소 */
  .card-pad{padding:18px;}
  .bento-item{padding:18px 16px;}
  .step{padding:18px 16px;}
  .est{padding:18px 16px;}
  .cta-panel{padding:30px 20px;border-radius:var(--r);}

  /* 시세 행: 한 줄에 브랜드+% , 아래줄에 환산금액 */
  .rate-row{padding:13px 14px;gap:8px;}
  .rate-row .nm{font-size:.93rem;}
  .rate-row .pc{font-size:1.14rem;}

  /* 문서형 페이지 본문 가독성 */
  .doc p{font-size:.95rem;line-height:1.75;}
  .doc li{font-size:.93rem;}
  .doc h3{margin-top:18px;}

  /* 히어로 시세 미리보기 카드 축소 */
  .rate-peek-hd{padding:13px 16px;}
  .rate-peek-row{padding:11px 10px;}
  .rate-peek-ft{padding:12px 16px;}

  /* 모달이 화면을 꽉 채우지 않도록 */
  .modal{padding:24px 20px;border-radius:var(--r);}
  .modal img{width:244px;padding:9px;}

  /* 하단 고정바가 가리는 만큼만 정확히 확보 */
  .sticky-cta{padding:8px 14px calc(8px + env(safe-area-inset-bottom));gap:8px;}
  .sticky-cta .btn{min-height:46px;font-size:.88rem;padding:11px 10px;}
  body.has-sticky{padding-bottom:70px;}
  .to-top{bottom:76px;right:12px;width:38px;height:38px;}
}

/* 아주 좁은 기기(360px 이하) 대응 */
@media(max-width:360px){
  :root{--gut:16px;}
  h1,.h1{font-size:1.62rem;}
  .hero-punch{font-size:1.1rem;}
  .rate-row .py{font-size:.73rem;}
  .pill{font-size:.73rem;padding:6px 10px;}
}

/* 히어로 시세카드 — 최대 시세 배지 & 조건 캡션 */
/* '오늘 최고' 뱃지 — 왕관 아이콘 + 골드 그라디언트 */
.tag-max,.badge-best{
  display:inline-flex;align-items:center;gap:2px;flex-shrink:0;
  font-size:.55rem;font-weight:800;letter-spacing:-.01em;line-height:1;
  color:#9A7418;background:#FBF4E3;border:1px solid #EEDFBB;
  padding:2.5px 5px 2.5px 4px;border-radius:4px;
}
.tag-max svg,.badge-best svg{width:8px;height:7px;flex-shrink:0;opacity:.85;}
.tag-max{margin-right:1px;}
/* 최고 시세 행은 아주 옅게만 구분 */
.rate-peek-row.is-top{background:linear-gradient(90deg,#FEFBF3 0%,rgba(254,251,243,0) 62%);}
.rate-peek-cap{margin-top:7px;font-size:.72rem;color:var(--ink-40);line-height:1.5;font-weight:500;}

/* 히어로 신뢰 한 줄 */
.trust-line{font-size:.83rem;color:var(--ink-55);font-weight:600;line-height:1.7;}
.trust-line i{opacity:.4;font-style:normal;margin:0 3px;}
.link-like{background:none;border:none;padding:0;font:inherit;color:var(--ink-70);
  font-weight:700;cursor:pointer;border-bottom:1px dotted var(--ink-40);
  transition:color .16s ease,border-color .16s ease;}
.link-like:hover{color:var(--accent);border-color:var(--accent);}
/* 모바일에서 히어로 버튼 2단 배치 */
@media(max-width:639px){
  .btn-row-2{display:grid;grid-template-columns:1.15fr .85fr;gap:9px;}
  .btn-row-2 .btn{flex:none;width:100%;padding:13px 8px;}
}
@media(max-width:359px){ .btn-row-2{grid-template-columns:1fr;} }

/* ============================================================
   한시 공지 배너 (화면을 가리지 않는 작은 카드)
   ============================================================ */
.notice-bar{
  position:fixed;z-index:90;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);
  box-shadow:0 16px 40px -16px rgba(11,27,46,.4);
  padding:16px 18px;max-width:360px;margin:0 auto;
  opacity:0;transform:translateY(14px);transition:opacity .26s ease,transform .26s ease;
}
.notice-bar.show{opacity:1;transform:none;}
@media(min-width:900px){
  .notice-bar{left:auto;right:24px;bottom:24px;margin:0;width:340px;}
}
.nb-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:-.01em;
  color:var(--accent-deep);background:var(--accent-soft);border:1px solid #D3E3FD;
  padding:3px 8px;border-radius:5px;}
.nb-title{font-size:.98rem;font-weight:800;letter-spacing:-.028em;line-height:1.4;margin-top:9px;}
.nb-rows{margin-top:11px;border-top:1px solid var(--line);}
.nb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:.82rem;}
.nb-row span{color:var(--ink-55);font-weight:600;}
.nb-row b{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.nb-foot{font-size:.75rem;color:var(--ink-40);line-height:1.55;margin-top:10px;}
.nb-btns{display:flex;gap:8px;margin-top:14px;}
.nb-btns button{flex:1;min-height:44px;border-radius:10px;font-size:.86rem;font-weight:700;cursor:pointer;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink-70);transition:border-color .18s,background .18s;}
.nb-btns .nb-kakao{background:var(--accent);border-color:var(--accent);color:#fff;}
.nb-btns .nb-kakao:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.nb-btns .nb-close{flex:0 0 76px;}
.nb-btns .nb-close:hover{border-color:var(--ink);color:var(--ink);}
.notice-bar .nb-later{
  display:block;width:100%;margin-top:8px;padding:6px 0;background:none;border:none;cursor:pointer;
  font-size:.75rem;color:var(--ink-40);text-decoration:underline;text-underline-offset:2px;}
.notice-bar .nb-later:hover{color:var(--ink-70);}
/* 실시간 상담 상태 */
.nb-live{display:inline-flex;align-items:center;gap:5px;margin-left:6px;
  font-size:.7rem;font-weight:700;color:var(--ink-55);}
.nb-live i{width:6px;height:6px;border-radius:50%;background:var(--ink-40);display:inline-block;}
.nb-live.on{color:var(--ok);}
.nb-live.on i{background:var(--ok);box-shadow:0 0 0 3px rgba(18,128,92,.16);}
@media(prefers-reduced-motion:reduce){ .notice-bar{transition:none;} }

/* ============================================================
   7차 보강 — PC 히어로 확대 / 브랜드 페이지 타이포 정돈
   ============================================================ */

/* PC에서만 헤드라인 확대 (모바일은 index.html 인라인 값 유지)
   ※ 인라인 스타일보다 우선하도록 !important 사용 */
@media(min-width:900px){
  .hero h1{ font-size:2.5rem !important; line-height:1.3 !important; }
  .hero h1 .l1{ margin-bottom:6px !important; }
}
@media(min-width:1200px){
  .hero h1{ font-size:2.75rem !important; }
}

/* 시세 미리보기: 정식 명칭이 길어도 잘리지 않게 */
.rate-peek-row .nm{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4;}
@media(max-width:400px){ .rate-peek-row .nm{font-size:.88rem;} }

/* ---------- 브랜드·정보 페이지 본문 정돈 ---------- */
.doc article{margin-bottom:clamp(38px,5vw,60px);}
.doc h2{
  font-size:clamp(1.22rem,1.06rem + .72vw,1.6rem);
  letter-spacing:-.032em;line-height:1.34;
  margin-bottom:2px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.doc h2 + p{margin-top:16px;}
.doc h3{
  font-size:clamp(1rem,.96rem + .22vw,1.1rem);
  font-weight:700;letter-spacing:-.022em;margin-top:26px;
}
.doc p{font-size:.96rem;line-height:1.8;color:var(--ink-70);}
.doc article > * + *{margin-top:15px;}
.doc ul,.doc ol{display:grid;gap:11px;padding-left:0;}
.doc ol{padding-left:19px;}
.doc li{line-height:1.75;}
.doc .check-list,.doc .x-list{gap:12px;}
.doc .callout{padding:18px 20px;line-height:1.75;}
.doc .tbl{margin:18px 0 4px;}
.doc .tbl td{padding:14px 0;}
.doc .mini-steps{margin:18px 0 6px;gap:10px;}
.doc .mini-step{padding:14px 16px;}
.doc .mini-step p{line-height:1.65;}
.doc .est-mini{margin-top:18px;}
.doc .faq{margin-top:18px;}
.doc .cap{margin-top:12px;}

/* 브랜드 히어로 : 여백·리듬 정돈 */
.brand-hero{padding:22px 0 clamp(30px,3.4vw,44px);}
.brand-hero h1{
  font-size:clamp(1.5rem,1.2rem + 1.5vw,2.3rem);
  letter-spacing:-.035em;line-height:1.3;margin-top:12px;max-width:18ch;
}
.brand-hero .lead{margin-top:14px;max-width:46ch;line-height:1.75;}
.brand-hero .rate-big{margin-top:24px;padding:22px 24px;gap:14px;}
.brand-hero .rate-big .l{line-height:1.6;}
.brand-hero .pill-row{margin-top:14px;}
@media(max-width:639px){
  .brand-hero .rate-big{padding:18px 18px;}
  .doc h2{font-size:1.22rem;padding-bottom:12px;}
  .doc p{font-size:.95rem;line-height:1.78;}
}

/* 브랜드 바로가기 칩 */
.pick-q{font-size:.88rem;font-weight:700;color:var(--ink-70);margin-bottom:11px;}
.pick-row{margin-bottom:22px;}
.pick-row .pill-btn{gap:7px;}
@media(max-width:899px){
  .pick-row{gap:8px;}
  .pick-row .pill-btn{min-height:46px;padding:11px 14px;font-size:.82rem;}
}

/* 브랜드 페이지 문맥형 내부 링크 */
.doc-context{font-size:.92rem;line-height:1.75;color:var(--ink-70);margin-bottom:20px;
  padding:15px 17px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-sm);}
.doc-context a{color:var(--accent);font-weight:700;}
.doc-context a:hover{text-decoration:underline;}