/* 계산소 — v13 화면 02b (§7.2) * * **아직 v12 골격이다.** 화면 본체는 테마가 아니라 WPCode 스니펫의 JS 페이로드가 * 그린다(`snapshot/lab-payload-original.js`). 그 CSS 가 `--navy`·`--yel` 같은 * **v12 토큰**을 부르는데 v13 팔레트에는 그 이름이 없다 — 값이 안 풀려 배경이 * 투명해지고 흰 글자만 남는다. 실측 대비 **1.02:1**, 제목이 아예 안 보였다. * * 여기서는 **읽히게만** 만든다. 02b 이미지대로 다시 세우는 것은 별도 작업이고, * 그때 이 파일이 그 자리를 받는다. 공용 CSS 에 넣지 않는 이유는 지뢰 4 와 같다 — * 화면 전용 규칙을 공용에 두면 다른 화면과 충돌한다. */ /* ══ 통합 허브 (§7.2 · 시안 02b) ═══════════════════════════════════ * 2열 빌보드 타일. v12 의 4열 그리드는 조항·키워드가 들어갈 자리가 없어 * 시안이 2열로 뒤집었다. 컨테이너 쿼리로 넓어질 때만 열을 늘린다 — * 미디어쿼리로 열을 정하면 목업·사이드바 안에서 폭을 오판한다(§10.1, 실제 사고). */ .vc-lab__lead{font-size:12.5px;line-height:1.62;color:var(--vc-body);margin:0 0 12px} .vc-lab__tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .vc-lab__tab{display:inline-flex;align-items:center;gap:5px;padding:6px 10px; font-size:11.5px;font-weight:700;color:var(--vc-body); background:var(--vc-paper);border:1px solid var(--vc-line-2); border-radius:var(--vc-r-sm);cursor:pointer} .vc-lab__tab.is-on{border-color:var(--vc-primary);color:var(--vc-primary-deep); background:var(--vc-primary-tint)} .vc-lab__tabn{font-size:11px;font-weight:800;color:var(--vc-muted)} .vc-lab__tab.is-on .vc-lab__tabn{color:var(--vc-primary-deep)} .vc-lab__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; container-type:inline-size} .vc-tile{position:relative;display:flex;flex-direction:column;gap:3px; min-height:116px;padding:11px 12px;background:var(--vc-paper); border:1px solid var(--vc-line-2);border-radius:var(--vc-r-tile); color:inherit;overflow:hidden} a.vc-tile:hover{border-color:var(--vc-line-3);color:inherit} /* 마크는 우상단 옅은 원 위에 — 시안 02b 의 타일 아이콘 자리다. */ .vc-tile__mark{position:absolute;top:9px;right:9px;width:44px;height:44px; border-radius:var(--vc-r-pill);background:var(--vc-primary-tint); display:flex;align-items:center;justify-content:center} .vc-tile__no{font-size:10.5px;font-weight:700;color:var(--vc-muted)} .vc-tile__t{font-size:14px;font-weight:800;letter-spacing:-.03em;color:var(--vc-ink); line-height:1.35;word-break:keep-all;max-width:64%} .vc-tile__law{margin-top:2px} .vc-tile__kw{margin-top:auto;font-size:11px;line-height:1.5;color:var(--vc-muted); word-break:keep-all} /* 「준비 중」 칩이 우하단에 겹쳐 앉으므로 키워드 줄이 그 자리를 비워 준다. */ .vc-tile--soon .vc-tile__kw{padding-right:58px} .vc-tile__kw b{color:var(--vc-primary)} /* 준비 중 — **링크가 아니다.** 실동작처럼 보이면 안 된다(§7.2) */ .vc-tile--soon{background:var(--vc-tint)} .vc-tile--soon .vc-tile__t,.vc-tile--soon .vc-tile__mark{opacity:.55} .vc-tile__soon{position:absolute;bottom:11px;right:12px;font-size:10px;font-weight:800; color:var(--vc-muted);background:var(--vc-paper); border:1px solid var(--vc-line-2);border-radius:var(--vc-r-xs);padding:2px 6px} .vc-lab__foot{margin:12px 0 0;padding-top:9px;border-top:1px solid var(--vc-line-2); font-size:11px;line-height:1.55;color:var(--vc-muted)} @container (min-width:560px){ .vc-lab__grid{grid-template-columns:repeat(4,minmax(0,1fr))} } /* ══ 개별 계산기 (§7.3 · 시안 02) ═══════════════════════════════════ * 값은 전부 JS(assets/js/lab-acq.js)가 채운다. 여기 있는 것은 자리와 서식뿐. * 결과판은 **밝다** — 개발이관서 §7.3 은 다크 결과판이었는데 v13 §7.3·시안 02 가 * 밝은 판으로 뒤집었다(충돌 시 v13 이 이긴다). 다크 면은 기한 스트립 하나뿐이다. */ .vc-acq__fields{display:flex;flex-direction:column;gap:12px;padding-top:11px} .vc-acq__f{display:flex;flex-direction:column;gap:7px} .vc-acq__l{font-size:11.5px;font-weight:700;color:var(--vc-body)} /* ★ 2026-08-02 사용자 지시 — *"입력 텍스트 칸이라고 하나 숫자나 규격이 너무 커서 * 유아틱해보여."* 맞다. 22px/800 은 이 화면에서 **결론(총액 28px) 다음으로 큰 활자**였다. * 입력값이 결론만큼 소리치면 위계가 사라지고, 큰 활자를 담으려고 칸도 52px 로 * 부풀어 다섯 칸이면 화면 한 장을 먹었다. 읽는 값이 아니라 **넣는 값**이다 — * 본문(14.5px)보다 크되 결론보다 작게. 칸도 그만큼 내린다(52 → 44). */ .vc-acq__inp{height:44px;border:1.5px solid var(--vc-primary);border-radius:var(--vc-r-md); background:var(--vc-paper);display:flex;align-items:center;gap:8px;padding:0 12px} .vc-acq__inp input{flex:1;min-width:0;border:0;background:none;padding:0; font-family:inherit;font-size:16px;font-weight:700;letter-spacing:-.02em; color:var(--vc-ink)} .vc-acq__inp input:focus{outline:0} .vc-acq__inp:focus-within{box-shadow:var(--vc-focus)} .vc-acq__unit{font-size:12px;font-weight:700;color:var(--vc-muted);flex:none} /* 5택 이상은 세그먼트가 못 담는다(334px 안에 5칸이면 글자가 깨진다) — 네이티브 select. */ .vc-acq__sel{width:100%;height:44px;padding:0 11px; border:1.5px solid var(--vc-primary);border-radius:var(--vc-r-md); background:var(--vc-paper);color:var(--vc-ink); font-family:inherit;font-size:13px;font-weight:700} .vc-acq__sel:focus{outline:0;box-shadow:var(--vc-focus)} /* 세그먼트 — 아카이브의 밑줄 탭(.vc-seg)과 다른 물건이다. 이름을 나눠 둔다. */ .vc-acq__seg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--vc-line-2); border:1px solid var(--vc-line-2);border-radius:var(--vc-r-sm);overflow:hidden} .vc-acq__seg--3{grid-template-columns:repeat(3,1fr)} .vc-acq__opt{height:38px;background:var(--vc-paper);border:0;cursor:pointer; font-family:inherit;font-size:12.5px;font-weight:600;color:var(--vc-muted)} .vc-acq__opt.is-on{background:var(--vc-primary-tint);color:var(--vc-primary-deep);font-weight:800} .vc-acq__more{display:flex;flex-direction:column;gap:12px} .vc-acq__out{display:flex;flex-direction:column;gap:11px;padding-top:11px} .vc-acq__empty{margin:11px 0 0;font-size:12.5px;color:var(--vc-muted)} .vc-acq__total{display:flex;align-items:baseline;gap:8px;padding:1px 0 9px; border-bottom:1px solid var(--vc-line-2)} .vc-acq__totall{font-size:10px;font-weight:800;color:var(--vc-muted);flex:none} .vc-acq__totalv{font-size:28px;font-weight:800;line-height:1.05;margin-left:auto;color:var(--vc-ink)} .vc-acq__lede{font-size:11.5px;font-weight:700;color:var(--vc-body)} .vc-acq__rows{display:flex;flex-direction:column;border-top:1px solid var(--vc-line-2)} .vc-acq__row{display:grid;grid-template-columns:minmax(0,1fr) 54px 88px;gap:8px; align-items:baseline;padding:9px 0;border-bottom:1px solid var(--vc-line); font-size:12.5px;font-weight:700} .vc-acq__pct{font-weight:800;color:var(--vc-amber-ink);text-align:right} .vc-acq__won{font-weight:800;text-align:right;color:var(--vc-ink)} /* 안 붙는 세목은 물러난다 — 0 을 굵게 쓰면 낸 돈처럼 읽힌다. */ .vc-acq__row--off,.vc-acq__row--off .vc-acq__pct,.vc-acq__row--off .vc-acq__won{ color:var(--vc-muted);font-weight:700} .vc-acq__formula{background:var(--vc-tint);border:1px solid var(--vc-line-2); border-radius:var(--vc-r-sm);padding:10px 11px; display:flex;flex-direction:column;gap:5px} .vc-acq__formula>.vc-n{font-size:12.5px;font-weight:800;color:var(--vc-ink)} .vc-acq__brkbox{gap:10px} .vc-acq__brks{display:flex;flex-direction:column;gap:9px} .vc-acq__brk{display:grid;grid-template-columns:78px minmax(0,1fr) 46px;align-items:center;gap:9px} .vc-acq__brkl{font-weight:700} .vc-acq__brk.is-on .vc-acq__brkl{color:var(--vc-ink);font-weight:800} .vc-acq__brkr{text-align:right;font-weight:700} .vc-acq__brk.is-on .vc-acq__brkr{color:var(--vc-ink);font-weight:800} .vc-acq__trk{height:8px;background:var(--vc-line);border:1px solid var(--vc-line-2); border-radius:var(--vc-r-xs);position:relative;overflow:hidden;min-width:0} .vc-acq__bar{position:absolute;left:0;top:0;bottom:0;background:var(--vc-line-3)} .vc-acq__brk.is-on .vc-acq__bar{background:var(--vc-primary)} .vc-acq__brkcap{padding-top:8px;border-top:1px solid var(--vc-line)} /* 범위 밴드 (§7.3) — 계약가 미확정 가정. 골격은 공용 `.vc-sub` 가 준다. * 트랙 34px 안에 프라이머리 틴트 면을 두고 좌우를 2px 프라이머리로 못 박는다(시안 02). */ .vc-acq__bandhd{display:flex;align-items:baseline;gap:8px} .vc-acq__bandl{font-size:11.5px;font-weight:700;color:var(--vc-body)} .vc-acq__bandn{margin-left:auto;font-size:11px;font-weight:700;color:var(--vc-muted)} .vc-acq__bandtrk{position:relative;height:34px;background:var(--vc-line); border:1px solid var(--vc-line-2);border-radius:var(--vc-r-xs);overflow:hidden} .vc-acq__bandfill{position:absolute;left:18%;right:18%;top:0;bottom:0; background:var(--vc-primary-tint); border-left:2px solid var(--vc-primary);border-right:2px solid var(--vc-primary)} .vc-acq__bandv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:11.5px;font-weight:800;color:var(--vc-primary-deep)} .vc-acq__bandft{display:flex;justify-content:space-between;font-size:11px;color:var(--vc-muted)} /* 버튼 2 (§7.3) — 44px, 라운드는 버튼 토큰. 앰버는 쓰지 않는다(행동은 프라이머리). */ .vc-acq__btns{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px} .vc-acq__btns--one{grid-template-columns:1fr} .vc-acq__btn{height:44px;display:flex;align-items:center;justify-content:center; font-family:inherit;font-size:13px;font-weight:700;cursor:pointer; background:var(--vc-paper);border:1.5px solid var(--vc-line-2); border-radius:var(--vc-r-btn);color:var(--vc-primary)} .vc-acq__btn:hover{border-color:var(--vc-primary);color:var(--vc-primary-deep)} .vc-acq__btn--fill{background:var(--vc-primary);border-color:var(--vc-primary);color:var(--vc-on-dark)} .vc-acq__btn--fill:hover{background:var(--vc-primary-deep);color:var(--vc-on-dark)} /* 주의 — 좌측 2px 앰버. 면(面)으로 칠하지 않는다(§2.1). */ .vc-acq__warn{border-left:2px solid var(--vc-amber);padding:1px 0 1px 12px; display:flex;flex-direction:column;gap:5px} .vc-acq__warnh{font-size:10px;font-weight:800;color:var(--vc-amber-ink)} .vc-acq__warnb{margin:0;font-size:12.5px;line-height:1.65;color:var(--vc-body)} .vc-acq__note{margin:2px 0 0;padding-top:9px;border-top:1px solid var(--vc-line-2); font-size:11px;line-height:1.55;color:var(--vc-muted)} /* 히어로 — 다크 면을 되살리지 않는다(§2.1 컬러 히어로 금지). 1단 상자로 세운다. * * ★ 선택자에 `.vc-page__body` 를 앞세운 이유 — 페이로드는 자기 CSS 를 **런타임에 * `