/* 밸류클립 홈 — 레이아웃 v3.dc.html 의 그리드·수치를 그대로 옮긴다.
*
* 브레이크포인트는 700 / 1000 두 개뿐. 그 외 추가 금지(§5.2).
* 섹션 순서: 히어로 → 본문2열 → 도감 → 계산소 → 편집 원칙 → 레터.
*/
/* ══ 히어로 밴드 — 허니 틴트 풀블리드 + 하단 잉크 룰 ══════════════ */
.vc-heroband{background:var(--vc-honey-100);border-bottom:var(--vc-bd)}
.vc-hero{display:grid;grid-template-columns:1fr;gap:18px;padding:28px 0 30px}
.vc-hero__copy{display:flex;flex-direction:column;gap:12px}
.vc-hero__h1{
font-weight:800;font-size:clamp(29px,4.4vw,44px);
line-height:1.14;letter-spacing:-.06em;
}
.vc-hero__lead{
font-size:15px;line-height:1.7;color:var(--vc-gray);max-width:470px;
}
/* 신뢰 지표 3개 — CTA 버튼을 두지 않는다. 아래가 곧 콘텐츠다(§6.4) */
.vc-stats{display:flex;gap:16px;align-items:flex-end}
.vc-stat{display:flex;flex-direction:column;gap:1px}
.vc-stat__n{font-weight:800;font-size:21px;letter-spacing:-.045em}
.vc-stat__l{font-size:11.5px;color:var(--vc-gray)}
.vc-stat__sep{width:1px;height:32px;background:var(--vc-rule-hero);flex:none}
/* ══ 대표글 (FEATURE) ══════════════════════════════════════════════ */
.vc-feature{
display:flex;flex-direction:column;gap:12px;
padding-bottom:24px;border-bottom:var(--vc-bd);
}
.vc-feature__t{
font-weight:800;font-size:clamp(21px,2.5vw,27px);
line-height:1.3;letter-spacing:-.05em;color:var(--vc-ink);
}
a.vc-feature__link{color:inherit}
a.vc-feature__link:hover .vc-feature__t{color:var(--vc-honey-ink)}
.vc-feature__sum{
font-size:14.5px;line-height:1.75;color:var(--vc-gray);max-width:620px;
}
/* 최신 인사이트 섹션 헤더 여백 */
.vc-listhead{padding:22px 0 4px;margin-bottom:0}
/* ══ 전문가 도감 (전폭, 허니 틴트) ═════════════════════════════════ */
.vc-exp{padding:40px 0 0}
.vc-exp__box{
background:var(--vc-honey-100);border:var(--vc-bd);
border-radius:var(--vc-r-card-lg);padding:18px;
display:flex;flex-direction:column;gap:14px;
}
.vc-exp__lead{font-size:14px;line-height:1.7;color:var(--vc-gray);max-width:600px}
.vc-exp4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.vc-exp__card{
background:var(--vc-surface);border:1px solid var(--vc-honey-line);
border-radius:var(--vc-r-btn);padding:12px;
display:flex;flex-direction:column;gap:4px;
}
.vc-exp__name{font-size:13.5px;font-weight:700}
.vc-exp__role{font-size:12px;line-height:1.6;color:var(--vc-gray)}
.vc-exp__foot{
display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;padding-top:2px;border-top:1px solid var(--vc-line-honey);
}
.vc-exp__disc{font-size:12.5px;line-height:1.7;color:var(--vc-gray)}
/* ══ 계산소 (전폭) ═════════════════════════════════════════════════ */
.vc-calc{padding:34px 0 0}
.vc-calc8{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.vc-calc__card{
background:var(--vc-surface);border:var(--vc-bd-thin);border-radius:var(--vc-r-card);
padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;
color:var(--vc-ink);transition:border-color 160ms ease-out;
}
.vc-calc__card:hover{border-color:var(--vc-ink);color:var(--vc-ink)}
.vc-calc__label{font-size:12px;font-weight:700;text-align:center;line-height:1.35}
/* 아이콘은 로고 부품(막대·사각·원)만. 이모지·아이콘 폰트·픽토그램 금지(§6.9) */
.vc-ico{
width:28px;height:28px;flex:none;
border:var(--vc-bd);border-radius:var(--vc-r-sm);background:var(--vc-honey-100);
display:flex;align-items:center;justify-content:center;
}
.vc-ico i{display:block;font-style:normal}
/* 8종 — 부품은 막대·사각·원·호뿐이다.
* 여덟 개가 **한눈에 서로 달라야** 한다. 그래서 방향(가로/세로/사선)·형태
* (면/테두리/원)·개수를 셋 다 어긋나게 짰다. 같은 축을 두 번 쓰지 않는다. */
/* 취득 — 들어오는 한 획(가로 면) 위에 문턱 */
.vc-ico--acq{flex-direction:column;gap:2px}
.vc-ico--acq i{width:14px;height:5px;background:var(--vc-honey);border-radius:1px}
.vc-ico--acq::after{
content:'';width:14px;height:2px;background:var(--vc-ink);border-radius:999px;
}
/* 양도 — 나가는 두 획, 위가 길고 아래가 짧다(줄어드는 방향) */
.vc-ico--transfer{flex-direction:column;gap:3px;align-items:flex-start;padding-left:7px}
.vc-ico--transfer i:nth-child(1){width:14px;height:3px;background:var(--vc-honey);border-radius:999px}
.vc-ico--transfer i:nth-child(2){width:8px;height:3px;background:var(--vc-ink);border-radius:999px}
/* 상속·증여 — 넘어가는 종이 한 장(테두리 사각 + 접힌 귀) */
.vc-ico--inherit i{
position:relative;width:13px;height:15px;
border:1.5px solid var(--vc-ink);border-radius:2px;background:var(--vc-surface);
}
.vc-ico--inherit i::after{
content:'';position:absolute;left:2.5px;top:4px;
width:7px;height:2px;background:var(--vc-honey);
}
/* 중개 — 두 쪽을 잇는 호 */
.vc-ico--broker i{
width:16px;height:9px;border:1.5px solid var(--vc-ink);border-bottom:0;
border-radius:9px 9px 0 0;
}
/* 안분 — 하나를 둘로 가른 세로 막대 두 개(높이가 다르다) */
.vc-ico--split{gap:3px;align-items:flex-end;padding-bottom:6px}
.vc-ico--split i:nth-child(1){width:5px;height:14px;background:var(--vc-ink)}
.vc-ico--split i:nth-child(2){width:5px;height:8px;background:var(--vc-honey)}
/* 보유 — 쌓여 가는 층(가로 테두리 사각) */
.vc-ico--hold i{
width:15px;height:11px;border:1.5px solid var(--vc-ink);border-radius:2px;
background:var(--vc-honey);
}
/* 낙찰 — 떨어지는 원(테두리 원 + 아래 바닥선) */
.vc-ico--bid{flex-direction:column;gap:2px}
.vc-ico--bid i{width:11px;height:11px;border:1.5px solid var(--vc-ink);border-radius:999px}
.vc-ico--bid::after{content:'';width:15px;height:2px;background:var(--vc-honey);border-radius:999px}
/* 전월세 — 세 줄, 가운데만 허니(전세↔월세 사이의 환산) */
.vc-ico--rent{flex-direction:column;gap:2.5px}
.vc-ico--rent i:nth-child(1),.vc-ico--rent i:nth-child(3){width:14px;height:2px;background:var(--vc-ink);border-radius:999px}
.vc-ico--rent i:nth-child(2){width:9px;height:3px;background:var(--vc-honey);border-radius:999px}
/* ── 펼침 패널 ────────────────────────────────────────────────────
* 카드를 누르면 그리드 아래가 벌어진다. 페이지 이동이 아니라 그 자리에서.
* JS 가 없으면 카드는 그냥 /lab/#id 로 가는 링크다 — 죽는 경로가 없다.
*/
.vc-calcpanel{
background:var(--vc-surface);border:var(--vc-bd);border-radius:var(--vc-r-card-lg);
padding:15px 16px;margin-bottom:10px;
display:flex;flex-direction:column;gap:10px;
}
.vc-calcpanel[hidden]{display:none}
.vc-calcpanel__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vc-calcpanel__t{font-size:16px;font-weight:800;letter-spacing:-.045em}
.vc-calcpanel__x{
margin-left:auto;width:32px;height:32px;flex:none;
border:var(--vc-bd-thin);border-radius:var(--vc-r-btn);background:transparent;
font-size:18px;line-height:1;color:var(--vc-gray);
}
.vc-calcpanel__x:hover{border-color:var(--vc-ink);color:var(--vc-ink)}
.vc-calcpanel__d{font-size:14px;line-height:1.7;color:var(--vc-ink);max-width:560px}
.vc-calcpanel__meta{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;
padding-top:10px;border-top:var(--vc-bd-thin);
}
.vc-calcpanel__meta dt{font-size:11.5px;font-weight:700;color:var(--vc-honey-ink);white-space:nowrap}
.vc-calcpanel__meta dd{margin:0;font-size:12.5px;line-height:1.65;color:var(--vc-gray)}
.vc-calcpanel__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:2px}
.vc-calcpanel__note{font-size:12px;line-height:1.6;color:var(--vc-gray)}
/* 열린 카드는 눌린 상태로 보인다 */
.vc-calc__card[aria-expanded="true"]{border:var(--vc-bd);background:var(--vc-honey-100)}
/* 결과 예시 밴드 (다크) */
.vc-calcband{
padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;
}
.vc-calcband__copy{display:flex;flex-direction:column;gap:2px}
.vc-calcband__l{font-size:11px;font-weight:700;color:var(--vc-honey)}
.vc-calcband__cond{font-size:12px;color:var(--vc-gray-dark)}
.vc-calcband__right{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.vc-calcband__amt{
font-weight:800;font-size:clamp(19px,2.4vw,24px);
letter-spacing:-.04em;color:var(--vc-bg);
}
.vc-calcband__won{font-size:14px;font-weight:600;color:var(--vc-gray-dark)}
.vc-calcband__go{font-size:12.5px;font-weight:700;color:var(--vc-honey);white-space:nowrap}
.vc-calcband__go:hover{color:var(--vc-honey-200)}
/* ══ 편집 원칙 (전폭) ══════════════════════════════════════════════ */
.vc-princ{padding:34px 0 6px}
.vc-princ .vc-secthead{margin-bottom:4px}
.vc-princ__list{display:flex;flex-direction:column}
.vc-princ__item{
display:flex;gap:13px;align-items:baseline;
padding:10px 0;border-bottom:var(--vc-bd-thin);
}
.vc-princ__n{
flex:none;width:19px;font-size:13px;font-weight:800;color:var(--vc-honey-ink);
font-variant-numeric:tabular-nums;
}
.vc-princ__t{font-size:13.5px;line-height:1.7}
/* ══ 브레이크포인트 700 ════════════════════════════════════════════ */
@media (min-width:700px){
.vc-hero{grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:end}
.vc-exp4{grid-template-columns:repeat(4,1fr);gap:10px}
.vc-calc8{gap:10px}
}