/* ═══════════════════════════════════════════════════════════════════════════
   ONECLIP Booking 제품면 전용 추가 스타일
   BOOKING WEB #02 · WEB-BOOKING-CANDIDATE-02 · 2026-09-13

   ⚠ 이 파일은 «/products/booking/ 한 쪽에서만» 링크된다.
     그래서 여기서 :root 를 다시 정의해도 다른 7쪽에는 닿지 않는다.
     운영 site.css 는 «한 글자도» 바꾸지 않았다 (#02 §20).

   ⚠ 왜 BIZ 를 복제하지 않고 여기에 다시 쓰는가
     BIZ(biz.oneclip.co.kr)는 React 앱과 한 문서인 «다른 런타임»이고,
     소개 원본이 biz-site/ · biz-admin/ 두 벌이다. 컴포넌트를 가져올 수 없다.
     그래서 #01 조사에서 실측한 BIZ 의 «치수»만 옮겨 적었다 —
       컨테이너  min(1320px, 100% - 48px)   ← site.css 와 이미 동일
       히어로    2열 48fr / 52fr · gap 56px
       카드      radius 16px · 1px 선 · 0 16px 50px rgba(0,0,0,.28)
       eyebrow   mono 11.5px · letter-spacing .16em · 999px pill
       구획      padding 82px 0 (site.css --gap 과 등가)
       sec-head  max-width 62ch · margin-bottom 44px

   ⚠ 색 — 새로 만든 색이 하나도 없다 (#01 §05 권고 그대로)
       강조 #0085FD   App 제품면 승인값과 동일        검정 위 5.48:1
       채움 #0B6FD6   흰 글자 4.93:1 (AA)
       표식 #3DD68C   site.css 의 --live, 이미 존재    검정 위 10.62:1
     ⚠ BIZ 의 채움색 #3B7BFF 는 «쓰지 않았다» — 흰 글자 3.84:1 로 AA 미달이다.
       가족 DNA 를 맞추자고 접근성 결함까지 물려받지 않는다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --blue:#0085FD;
  --blue-deep:#3DA5FF;
  --blue-line:rgba(0,133,253,.38);
  /* ⚠ #11 §12 접근성 — 12% 였을 때 이 옅은 파랑 바탕 «위»의 10.5~11.5px 파란 글자가
     4.498:1 로 AA(4.5:1)에 «머리카락 한 올» 모자랐다. 13곳이 걸렸다.
     승인 색 #0085FD 는 그대로 두고 바탕 알파만 낮춰 4.778:1 로 넘겼다. */
  --blue-soft:rgba(0,133,253,.07);
  --btn-fill:#0B6FD6;
  --btn-fill-h:#0A63BE;
  --btn-on:#FFFFFF;
  /* 예약이 «연결됨/확인됨»을 뜻하는 표식. 브랜드 주색으로 올리지 않는다. */
  --bk-mark:#3DD68C;
  --bk-mark-soft:rgba(61,214,140,.12);
  --bk-mark-line:rgba(61,214,140,.34);
  /* BIZ 카드 면 — site.css --surface 보다 조금 투명하게 (유리 느낌) */
  --bk-glass:rgba(14,19,27,.82);
  --bk-shadow:0 16px 50px rgba(0,0,0,.28);
  --bk-shadow-lg:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.04);
}

/* ── 구획 사이 나눔선 — BIZ 는 배경 단을 바꿔 구분한다.
     site.css 의 .tint 를 그대로 쓰되, 연속된 어두운 구획에는 가는 선을 준다. */
.bk-line{border-top:1px solid var(--line-soft)}

/* ── eyebrow — BIZ 식 pill. site.css 의 .eyebrow 는 민무늬라 여기서만 pill 로 */
.bk-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  background:var(--blue-soft);border:1px solid var(--blue-line);
  border-radius:999px;padding:6px 15px;margin:0 0 18px;
}
.bk-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--blue);flex:none}
.bk-eyebrow.mark{color:var(--bk-mark);background:var(--bk-mark-soft);border-color:var(--bk-mark-line)}
.bk-eyebrow.mark::before{background:var(--bk-mark)}

/* ── mono 한 줄 라벨 (BIZ 의 AI BUSINESS OPERATING SYSTEM 자리) */
.bk-mono{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin:0 0 14px}

/* ── 큰 한글 제목 — BIZ h1 48px/800/-1.056px 를 반응형으로 옮긴 것 ─────────
   ⚠ #02 §17 — 모바일에서 «그냥 축소»하지 않는다. 최소 34px 를 지킨다. */
.bk-h1{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(34px,5.6vw,58px);line-height:1.16;letter-spacing:-.03em;
  margin:0 0 22px;word-break:keep-all;
}
.bk-h1 .acc{color:var(--blue)}
.bk-h2{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(26px,3.3vw,40px);line-height:1.26;letter-spacing:-.026em;
  margin:0 0 16px;word-break:keep-all;
}
.bk-h2 .acc{color:var(--blue)}
.bk-head{max-width:62ch;margin-bottom:44px}
.bk-head .lead{margin-top:0}

/* ── 01 HERO — BIZ 와 같은 48 / 52 ──────────────────────────────────────── */
.bk-hero{padding:clamp(44px,5.6vw,86px) 0 clamp(34px,4vw,56px);border-bottom:1px solid var(--line-soft)}
.bk-hero-grid{display:grid;grid-template-columns:48fr 52fr;gap:56px;align-items:center}
.bk-hero p.lead{max-width:52ch}

/* 흐름 칩 — FIND → BOOK → CONNECT → VISIT */
.bk-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:9px;margin:30px 0 0;padding:0;list-style:none}
.bk-flow li{display:flex;align-items:center;gap:9px}
.bk-flow .f{border:1px solid var(--line);background:var(--surface);border-radius:11px;
  padding:10px 15px;min-width:104px}
.bk-flow .f.on{border-color:var(--blue-line);background:var(--blue-soft)}
.bk-flow b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;color:var(--faint);margin-bottom:3px}
.bk-flow .f.on b{color:var(--blue)}
.bk-flow span{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.bk-flow .ar{color:var(--faint);font-size:13px;flex:none}

/* ── 히어로 오른쪽 무대 ────────────────────────────────────────────────────
   ⚠⚠ #02 §03 · §19 — 실제 예약센터 캡처를 «아직 확보하지 못했다».
     그래서 가짜 앱 화면을 그리지 않는다. 대신
       ① 가운데를 «대기 자리»로 비워 두고 무엇이 들어올지 글로 적는다
       ② 주변 카드는 표본임을 무대 머리에서 한 번, 카드마다 한 번 밝힌다
     빈 기기 틀만 세우면 고장 난 화면처럼 보이므로 «설명이 있는 자리»로 만들었다. */
.bk-stage{position:relative;background:var(--bk-glass);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--bk-shadow-lg);padding:16px}
.bk-stage-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--faint);
  padding:4px 6px 14px}
.bk-stage-top .s{display:inline-flex;align-items:center;gap:7px;color:var(--bk-mark)}
.bk-stage-top .s::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bk-mark)}
.bk-stage-top .r{margin-left:auto;color:var(--faint)}

.bk-slot{border:1px dashed var(--line-3,#3A4759);border-radius:14px;background:var(--ground);
  min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;padding:28px 22px}
.bk-slot .t{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--blue)}
.bk-slot .d{font-size:14.5px;color:var(--ink-2);line-height:1.7;max-width:34ch;margin:0}
.bk-slot .n{font-size:var(--t-cap);color:var(--faint);margin:0}

.bk-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.bk-chip{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 13px}
.bk-chip b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--faint);margin-bottom:5px}
.bk-chip span{display:block;font-family:var(--display);font-size:19px;font-weight:700;
  color:var(--ink);letter-spacing:-.02em}
.bk-chip.ok span{color:var(--bk-mark);font-size:15.5px}

/* ── 02 증거 띠 — BIZ 히어로 아래 4칸. 숫자 KPI 를 만들지 않는다 (#02 §04) */
.bk-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:clamp(30px,4vw,52px)}
.bk-proof div{background:var(--ground);padding:22px 20px}
.bk-proof b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  color:var(--blue);margin-bottom:6px}
.bk-proof span{display:block;font-size:15.5px;color:var(--ink-2)}

/* ── 페이지 안쪽 내비 (#02 §01) ────────────────────────────────────────────
   ⚠ 전역 내비(회사 공통)는 손대지 않는다 — 다른 7쪽과 같아야 한다.
     Booking 구획 이동은 «그 아래» 한 줄을 더 붙여 해결한다. 전부 페이지 안 앵커다. */
.bk-subnav{position:sticky;top:66px;z-index:50;background:rgba(7,9,14,.88);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line-soft)}
.bk-subnav-in{display:flex;align-items:center;gap:20px;min-height:52px;flex-wrap:wrap;padding:7px 0}
.bk-subnav .nm{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--faint);flex:none}
.bk-subnav a{font-size:14px;color:var(--muted);text-decoration:none;border:0;white-space:nowrap}
.bk-subnav a:hover{color:var(--blue)}
.bk-subnav .sp{margin-left:auto}
section[id]{scroll-margin-top:126px}

/* ── 6 분야 카드 (#02 §05) ─────────────────────────────────────────────── */
.bk-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bk-cat{background:var(--bk-glass);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--bk-shadow);padding:22px 20px}
.bk-cat b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--faint);margin-bottom:10px}
.bk-cat h3{margin:0;font-size:18px;color:var(--ink)}

/* ── 맞춤 사슬 6단 (#10 §26) ─────────────────────────────────────────────
   ⚠ 「자동으로 맞춰 준다」로 읽히면 안 된다. 그래서 화살표 대신 «번호»를 쓴다.
     화살표는 저절로 흘러가는 느낌을 주고, 번호는 사람이 밟는 단계로 읽힌다. */
.bk-evo{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0;padding:0;list-style:none;
  counter-reset:none}
.bk-evo li{background:var(--bk-glass);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--bk-shadow);padding:18px 16px}
.bk-evo li:first-child{border-color:var(--blue-line);background:var(--blue-soft)}
.bk-evo b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--faint);margin-bottom:11px;font-weight:500}
.bk-evo li:first-child b{color:var(--blue)}
.bk-evo .k{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.09em;
  color:var(--ink);margin-bottom:6px}
.bk-evo .d{display:block;font-size:var(--t-cap);color:var(--muted);line-height:1.6}
.bk-motto{margin:30px 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(19px,2.4vw,28px);line-height:1.45;letter-spacing:-.024em;color:var(--muted)}
.bk-motto strong{color:var(--ink);font-weight:700}

/* ── 4 단계 (#02 §06) ─────────────────────────────────────────────────── */
.bk-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bk-step{background:var(--bk-glass);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--bk-shadow);padding:22px 20px}
.bk-step b{display:block;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;color:var(--blue);margin-bottom:12px}
.bk-step h3{margin:0 0 7px;font-size:17.5px}
.bk-step p{margin:0;font-size:var(--t-desc);color:var(--muted);line-height:1.7}

/* ── ONE BOOKING 3단 (#02 §07) ────────────────────────────────────────── */
.bk-two{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.bk-side{background:var(--bk-glass);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--bk-shadow);padding:26px 24px}
.bk-side b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--blue);margin-bottom:14px}
.bk-side p{margin:0;font-size:16px;color:var(--ink-2);line-height:1.85}
.bk-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-width:172px;border:1px solid var(--blue-line);background:var(--blue-soft);
  border-radius:18px;padding:26px 20px;text-align:center}
.bk-mid .k{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;
  color:var(--ink);line-height:1.3}
.bk-mid .d{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--blue)}
.bk-close{margin-top:26px;text-align:center;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,2vw,23px);letter-spacing:-.02em;color:var(--ink)}
.bk-close em{font-style:normal;color:var(--blue)}

/* ── 여정 타임라인 — BIZ .day 구조의 변형 (#02 §08) ────────────────────────
   ⚠ BIZ 는 08:00 · 11:00 처럼 «시각»을 쓴다. 실제 처리시간으로 읽히므로
     여기서는 STEP 번호만 쓴다 (#02 §08 명시). */
.bk-jl{display:grid;gap:0}
.bk-jrow{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:start}
.bk-jmark{padding:26px 18px 26px 0;text-align:right}
.bk-jmark .dot{display:none}
.bk-jmark .num{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.bk-jbody{position:relative;min-width:0;border-left:1px solid var(--line);padding:20px 0 20px 26px}
/* 점은 «본문 칸의 왼쪽 선» 위에 얹는다. 칸을 따로 만들지 않는다 —
   전에 ::before 로 격자 칸을 하나 더 만들었더니 카드가 90px 로 찌그러졌다. */
.bk-jbody::before{content:"";position:absolute;left:-6px;top:32px;width:11px;height:11px;
  border-radius:50%;background:var(--ground);border:2px solid var(--blue)}
.bk-jcard{background:var(--bk-glass);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--bk-shadow);padding:22px 24px}
.bk-jcard .tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.13em;color:var(--blue);border:1px solid var(--blue-line);
  background:var(--blue-soft);border-radius:999px;padding:4px 11px;margin-bottom:13px}
.bk-jcard h3{margin:0 0 8px;font-size:19px}
.bk-jcard p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.8}
.bk-jcard .src{margin:12px 0 0;font-size:var(--t-cap);color:var(--faint);line-height:1.65}

/* ── 파트너 카드 4 (#02 §09) ──────────────────────────────────────────── */
.bk-cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bk-card{background:var(--bk-glass);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--bk-shadow);padding:24px 22px}
.bk-card h3{margin:0 0 8px;font-size:17.5px}
.bk-card p{margin:0;font-size:var(--t-desc);color:var(--muted);line-height:1.7}
.bk-card .mk{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--bk-mark);background:var(--bk-mark-soft);border:1px solid var(--bk-mark-line);
  border-radius:999px;padding:3px 9px;margin-bottom:13px}

/* ── 세미 보조 카드 (#02 §10) ──────────────────────────────────────────────
   ⚠ BIZ 는 세미가 주인공(요소 31개)이다. 여기서는 «한 번, 작게»가 원칙이다. */
.bk-semi{display:flex;align-items:center;gap:18px;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:18px 22px 18px 18px;max-width:620px}
.bk-semi img{width:64px;height:64px;object-fit:contain;background:transparent;flex:0 0 auto}
.bk-semi .nm{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--blue);margin:0 0 5px}
.bk-semi .ms{margin:0;font-size:16.5px;color:var(--ink);line-height:1.6;font-weight:600}
.bk-role{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.bk-role li{font-family:var(--mono);font-size:var(--t-cap);letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.bk-not{margin-top:20px;font-size:var(--t-desc);color:var(--faint);line-height:1.75}

/* ── 생태계 흐름 (#02 §11) ────────────────────────────────────────────── */
.bk-eco{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center}
.bk-eco .n{background:var(--bk-glass);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--bk-shadow);padding:26px 22px;text-align:center}
.bk-eco .n.mid{border-color:var(--blue-line);background:var(--blue-soft)}
.bk-eco .n b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--faint);margin-bottom:9px}
.bk-eco .n.mid b{color:var(--blue)}
.bk-eco .n span{display:block;font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:-.02em;color:var(--ink);line-height:1.35}
.bk-eco .ar{color:var(--faint);font-size:15px}
.bk-tri{margin-top:30px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--faint);text-align:center;line-height:2}

/* ── 문의 2열 — BIZ Contact 구조 계승 (#02 §13) ───────────────────────── */
.bk-contact{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(28px,4vw,56px);align-items:start}
.bk-ccards{display:grid;gap:12px;margin-top:30px}
.bk-ccard{display:flex;align-items:center;gap:15px;background:var(--bk-glass);
  border:1px solid var(--line);border-radius:14px;padding:17px 20px;text-decoration:none;border-width:1px}
.bk-ccard b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--faint);margin-bottom:5px;font-weight:500}
.bk-ccard span{display:block;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
a.bk-ccard:hover{border-color:var(--blue-line)}
a.bk-ccard:hover span{color:var(--blue)}

.bk-form{background:var(--bk-glass);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--bk-shadow);padding:clamp(22px,2.6vw,30px)}
.bk-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-f{display:block}
.bk-f.full{grid-column:1 / -1}
.bk-f label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--faint);margin-bottom:7px}
.bk-f label .req{color:var(--blue)}
.bk-f input,.bk-f select,.bk-f textarea{
  width:100%;box-sizing:border-box;background:var(--ground);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-family:var(--sans);font-size:15px;line-height:1.5}
.bk-f textarea{min-height:108px;resize:vertical}
.bk-f input::placeholder,.bk-f textarea::placeholder{color:var(--faint)}
.bk-f input:focus,.bk-f select:focus,.bk-f textarea:focus{outline:2px solid var(--blue);
  outline-offset:1px;border-color:var(--blue)}
.bk-agree{display:flex;align-items:flex-start;gap:10px;margin-top:16px;
  font-size:var(--t-cap);color:var(--muted);line-height:1.7}
/* ⚠ #11 §12 — 13px 이면 손가락으로 누르기 어렵다(WCAG 2.2 목표 크기 24px).
   폼을 열었을 때를 대비해 지금 키워 둔다. */
.bk-agree{min-height:24px;align-items:center;gap:8px}
.bk-agree-in{display:inline-flex;align-items:center;gap:10px;min-height:24px;cursor:pointer}
.bk-agree input{accent-color:var(--blue);flex:none;width:18px;height:18px;margin:0}
.bk-note{margin:14px 0 0;font-size:var(--t-cap);color:var(--faint);line-height:1.7}

/* ── 마무리 (#02 §14) ─────────────────────────────────────────────────── */
.bk-closing-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,56px);align-items:center}
.bk-graphic{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  border:1px solid var(--line);background:var(--bk-glass);border-radius:20px;
  box-shadow:var(--bk-shadow);padding:30px 26px;min-width:320px}
.bk-graphic .g{text-align:center;min-width:92px}
.bk-graphic .g b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--faint);margin-bottom:7px}
.bk-graphic .g span{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;
  color:var(--ink);letter-spacing:-.02em}
.bk-graphic .g.mid span{color:var(--blue)}
.bk-graphic .ar{color:var(--faint);font-size:15px}

/* ═══════════════ 반응형 ═══════════════════════════════════════════════════
   ⚠ #02 §17 — 데스크톱을 «그냥 축소»하지 않는다. 순서를 바꾸고 열을 접는다.
     390px 에서도 H1 은 34px 밑으로 내려가지 않는다. */

@media (max-width:1040px){
  .bk-hero-grid{grid-template-columns:1fr;gap:38px}
  .bk-cats{grid-template-columns:repeat(2,1fr)}
  .bk-steps{grid-template-columns:repeat(2,1fr)}
  .bk-evo{grid-template-columns:repeat(3,1fr)}
  .bk-cards4{grid-template-columns:repeat(2,1fr)}
  .bk-two{grid-template-columns:1fr;gap:14px}
  .bk-mid{min-width:0;padding:18px}
  .bk-eco{grid-template-columns:1fr;gap:10px}
  .bk-eco .ar{text-align:center;transform:rotate(90deg)}
  .bk-contact{grid-template-columns:1fr}
  .bk-closing-grid{grid-template-columns:1fr}
  .bk-graphic{min-width:0}
}
@media (max-width:820px){
  .bk-proof{grid-template-columns:repeat(2,1fr)}
  .bk-jrow{grid-template-columns:64px minmax(0,1fr)}
  .bk-jbody{padding-left:20px}
  .bk-jmark{padding-right:12px}
}
@media (max-width:620px){
  .bk-cats{grid-template-columns:1fr}
  .bk-steps{grid-template-columns:1fr}
  .bk-evo{grid-template-columns:repeat(2,1fr)}
  .bk-cards4{grid-template-columns:1fr}
  .bk-chips{grid-template-columns:repeat(2,1fr)}
  .bk-fgrid{grid-template-columns:1fr}
  /* 한 줄에 하나씩 쌓이면 세로로 너무 길어지고 화살표가 허공에 뜬다. 2칸 격자로 접는다. */
  .bk-flow{display:grid;grid-template-columns:1fr 1fr}
  .bk-flow li{width:auto}
  .bk-flow .f{width:100%;min-width:0}
  .bk-flow .ar{display:none}
  .bk-subnav-in{gap:14px;min-height:46px}
  .bk-subnav .nm{display:none}
  .bk-subnav .sp{display:none}
  section[id]{scroll-margin-top:118px}
}
@media (max-width:460px){
  .bk-proof{grid-template-columns:1fr}
  .bk-jrow{grid-template-columns:1fr}
  .bk-jmark{padding:18px 0 0;text-align:left}
  .bk-jbody{border-left:0;padding:10px 0 22px}
  .bk-jbody::before{display:none}
  .bk-semi{flex-direction:column;align-items:flex-start;gap:13px}
  .bk-stage{padding:12px}
  .bk-graphic{flex-direction:column}
  .bk-graphic .ar{transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* Booking hero: preserve the complete user-provided artwork at every width. */
.bk-slot.bk-slot--visual{
  min-height:0;padding:0;gap:0;overflow:hidden;
  border:1px solid rgba(0,136,255,.24);border-radius:14px;
  background:#07111d;box-shadow:0 12px 32px rgba(0,0,0,.24);
}
.bk-hero-image{display:block;width:100%;height:auto;max-width:100%;}