/* ═══════════════════════════════════════════════════════════════════════════ booking.oneclip.co.kr 전용 추가 스타일 WEB-BOOKING-BIZPARITY-13 · 2026-09-13 무엇인가 : biz.oneclip.co.kr 의 «머리띠(header.nav)» · «간편로그인 카드» · «CONTACT 구획» 셋을 이 주소로 옮겨 온 것. 어디서만 : booking.oneclip.co.kr 한 곳에서만 링크된다. oneclip.co.kr/products/booking/ 은 이 파일을 «읽지 않는다». site.css · booking-black.css 는 한 글자도 바꾸지 않았다. ⚠ 이름을 전부 «bz-» 로 갈아 끼웠다. 까닭 — BIZ 원본의 `.nav` `.btn` `.card` `.form` `.contact` `.field` 는 site.css 와 «글자까지 같은» 이름이다. 그대로 옮기면 회사 사이트 규칙과 뒤엉켜 어디가 이겼는지 알 수 없게 된다. 그래서 충돌이 «생길 수 없게» 했다. (site.css · booking-black.css 안의 `bz-` 등장 횟수 = 0 으로 확인함) ⚠⚠ 색 — BIZ 의 버튼 그라디언트 `linear-gradient(100deg,#3B7BFF,#2D6BF0)` 는 «가져오지 않았다». 그 색 위의 흰 글자는 3.84:1 로 AA(4.5:1) 미달이다. #11 §12 가 「BIZ 의 AA 미달 버튼 Gradient 를 Booking 에 재도입하지 말 것」 이라고 못 박은 바로 그 자리다. 대신 Booking 승인값을 쓴다 — 채움 --btn-fill #0B6FD6 · 흰 글자 4.93:1 (AA 통과) 강조 --blue #0085FD · 검정 위 5.48:1 새로 만든 색은 «하나도 없다». ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* BIZ 에만 있던 값 중 이 세 덩어리가 실제로 쓰는 것만 가져온다 */ --bz-line-3:rgba(255,255,255,.17); --bz-dim:#66718C; --bz-red:#F06E62; --bz-amber:#E9B15C; --bz-amber-soft:rgba(233,177,92,.13); --bz-green:#2FE08A; --bz-green-soft:rgba(47,224,138,.12); --bz-sh-lg:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.04); } /* ── 머리띠 ─────────────────────────────────────────────────────────────── BIZ 실측: sticky · 높이 72px · 배경 78% 불투명 + blur(18px) · 아래 1px 선 */ .bz-nav{position:sticky;top:0;z-index:60;background:var(--nav-bg); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line-soft);} .bz-nav-in{display:flex;align-items:center;gap:28px;height:72px;} /* ONECLIP 표식 — BIZ 와 같은 «고리 + 오른쪽 짧은 막대» */ .bz-brand{display:flex;align-items:center;gap:11px;padding-right:4px; font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.015em; color:var(--ink);text-decoration:none;} .bz-mark{width:27px;height:27px;border-radius:50%;border:2.7px solid #fff; position:relative;flex:none;} .bz-mark::after{content:"";position:absolute;top:9px;right:-3px;width:10px;height:2.7px; background:#fff;border-radius:2px;} .bz-nav-links{display:flex;gap:26px;margin-left:auto;font-size:14px; color:var(--muted);font-weight:500;} .bz-nav-links a{padding:3px 0;border-bottom:1.5px solid transparent; color:inherit;text-decoration:none;transition:.16s;} .bz-nav-links a:hover{color:var(--ink);border-bottom-color:var(--blue);} .bz-nav-cta{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto;} /* ── 단추 ─────────────────────────────────────────────────────────────── */ .bz-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:inherit;font-weight:700;font-size:15.5px;padding:15px 28px; border-radius:12px;border:1px solid transparent;text-decoration:none; transition:transform .15s ease,box-shadow .2s,background .2s,border-color .2s;} .bz-btn:hover{transform:translateY(-1px);} /* ⚠ BIZ 의 그라디언트가 아니라 Booking 승인 채움색이다 (위 머리말 참고) */ .bz-btn-primary{color:var(--btn-on);background:var(--btn-fill); box-shadow:0 12px 30px -16px rgba(11,111,214,.85);} .bz-btn-primary:hover{background:var(--btn-fill-h); box-shadow:0 18px 38px -18px rgba(11,111,214,.95);} .bz-btn-ghost{border-color:var(--bz-line-3);color:var(--ink); background:rgba(255,255,255,.05);} .bz-btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);} .bz-btn-sm{padding:10px 18px;font-size:14.5px;border-radius:10px;} .bz-btn[disabled]{opacity:.45;pointer-events:none;} /* ── 간편로그인 서랍 ───────────────────────────────────────────────────── BIZ 와 «같은 방식»으로 열고 닫는다 — grid-template-rows 0fr ↔ 1fr. 높이를 재지 않아도 되고, 내용이 길어져도 그대로 맞는다. */ .bz-login-dock{position:relative;flex:none;} .bz-chev{width:8px;height:8px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;flex:none; transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s;} [aria-expanded="true"] .bz-chev{transform:rotate(-135deg) translate(-2px,-2px);} .bz-acc{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .36s cubic-bezier(.2,.7,.3,1),opacity .26s;} .bz-acc.open{grid-template-rows:1fr;opacity:1;} .bz-acc-in{overflow:hidden;min-height:0;} #bzLoginAcc{position:absolute;top:calc(100% + 12px);right:0;z-index:70; width:min(320px,calc(100vw - 32px));pointer-events:none;} #bzLoginAcc.open{pointer-events:auto;} #bzLoginAcc.open.done > .bz-acc-in{overflow:visible;} .bz-login-card{background:#fff;border:1px solid var(--line);border-radius:20px; padding:26px 22px 18px;box-shadow:var(--bz-sh-lg);} .bz-lc-title{font-family:var(--display);font-weight:700;font-size:17px; text-align:center;letter-spacing:-.015em;color:#111;} .bz-sns-in{display:flex;flex-direction:column;gap:10px;margin-top:20px;} /* ⚠⚠ 다섯 단추는 «누를 수 없다» — 대표 지시. 그래서 진짜