@charset "utf-8";
/* 칸 학원매매 — 단일 스타일시트
 * 설계 원칙: 밝은 배경 / 큰 타이포 / 넓은 여백 / 큰 라운드 카드.
 * 강한 배경색 섹션을 연속으로 두지 않는다(흰색 ↔ 아주 옅은 틴트만 교차).
 */

/* ═══════════ 토큰 ═══════════ */
:root {
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-display: 'SUIT Variable', var(--font-sans);

  --brand: #693BF2;
  --brand-rgb: 105, 59, 242;
  --brand-dark: #5527D5;
  --brand-soft: #F3EFFF;
  --brand-line: #DDCFFE;
  --brand-light: #956CF9;
  --brand-wash: #FAF8FF;
  --brand-focus: #AA89F7;
  --verify: #0f9d63;        /* 검증·안전 신호 */
  --alert: #e11d48;

  --ink: #0f172a;
  --body: #374151;
  --sub: #6b7280;
  --faint: #9ca3af;
  --line: #e5e9f0;
  --tint: #f5f8fd;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --shadow-sm: 0 2px 10px rgba(15, 23, 42, .05);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, .12);

  --header-h: 76px;
  --cta-h: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ═══════════ base ═══════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--cta-h);
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, picture, svg { max-width: 100%; }
img { display: block; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* display 를 지정한 컴포넌트가 [hidden] 을 이기지 못하도록 특이도를 맞춘다 */
.kh-gnb-menu[hidden], .kh-listfilter-detail[hidden], .kh-scrap-count[hidden],
.kh-mobile[hidden], .kh-fixed-cta[hidden] { display: none; }

.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;
}
.kh-skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  padding: 10px 18px; background: var(--brand); color: #fff; border-radius: 0 0 8px 8px;
  font-weight: 700; transition: top .15s ease;
}
.kh-skip-link:focus { top: 0; }

.kh-container { width: min(100% - 40px, 1280px); margin-inline: auto; }

/* 개발용 샘플 데이터 고지 */
.kh-sampleflag {
  background: #fff7e6; border-bottom: 1px solid #f2d492; color: #7a5200;
  font-size: 13.5px; text-align: center; padding: 9px 20px;
}
.kh-sampleflag strong { color: #8a4b00; }

/* ═══════════ 버튼 ═══════════ */
.kh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.kh-btn--lg { height: 56px; padding: 0 32px; font-size: 17px; }
.kh-btn--block { display: flex; width: 100%; }
.kh-btn--primary { background: var(--brand); color: #fff; }
.kh-btn--primary:hover { background: var(--brand-dark); }
.kh-btn--dark { background: var(--ink); color: #fff; }
.kh-btn--dark:hover { background: #1e293b; }
.kh-btn--outline { background: #fff; color: var(--brand); border-color: var(--brand-line); }
.kh-btn--outline:hover { background: var(--brand-soft); }
.kh-btn--ghost { background: #fff; color: var(--body); border-color: var(--line); }
.kh-btn--ghost:hover { background: var(--tint); }

.kh-tag {
  display: inline-flex; align-items: center; height: 21px; padding: 0 6px;
  border: 1px solid currentColor; border-radius: 4px; background: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: 0;
}
.kh-tag--recommended { color: var(--brand); }
.kh-tag--urgent { color: #d61c3c; }
.kh-tag--exclusive { color: #6d28d9; }
.kh-tag--sold { color: #666; }

.kh-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--tint); border: 1px solid var(--line);
  font-size: 13px; color: var(--body);
}

/* ═══════════ 헤더 — NCP(ncloud.com) 클론 ═══════════
 * 벨트: 브랜드 블루 배경 + 화이트 13px/600 링크 (NCP nav-belt)
 * 바: 화이트 솔리드 + GNB 16px/700 + 우측 검색아이콘·아웃라인·필 버튼 (NCP nav-bar) */
.kh-utilbar { background: var(--brand); }
.kh-utilbar-inner { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.kh-utilbar-links { display: flex; align-items: center; gap: 22px; }
.kh-utilbar-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .92);
}
.kh-utilbar-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kh-scrap-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #fff; color: var(--brand); font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 기본: 글라스(블러) 배경. 홈 최상단(.kh-header--overlay.is-top)에서는 투명 + 화이트 텍스트 (NCP 패턴) */
.kh-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease, border-color .25s ease;
}
.kh-header--overlay.is-top {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.kh-header--overlay.is-top .kh-header-logo-img { filter: brightness(0) invert(1); }
/* 최상단 화이트는 GNB 1단 메뉴에만 — 드롭다운 패널 링크는 제외 */
.kh-header--overlay.is-top .kh-gnb > ul > li > a,
.kh-header--overlay.is-top .kh-gnb-toggle { color: #fff; }
.kh-header--overlay.is-top .kh-gnb > ul > li > a:hover,
.kh-header--overlay.is-top .kh-gnb-toggle:hover { color: rgba(255, 255, 255, .8); }
.kh-header--overlay.is-top .kh-gnb li.on > a::after { background: #fff; }
.kh-header--overlay.is-top .kh-hd-ico { color: #fff; }
.kh-header--overlay.is-top .kh-hd-ico:hover { background: rgba(255, 255, 255, .14); }
.kh-header--overlay.is-top .kh-hd-btn--outline {
  border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff;
}
.kh-header--overlay.is-top .kh-hd-btn--outline:hover { border-color: #fff; }
.kh-header--overlay.is-top .kh-hd-btn--fill { background: #fff; border-color: #fff; color: #222; }
.kh-header--overlay.is-top .kh-header-burger { color: #fff; }
.kh-header-inner { display: flex; align-items: center; gap: 40px; height: var(--header-h); }
.kh-header-logo { flex: none; display: flex; align-items: center; }
.kh-header-logo-img { height: 22px; width: auto; }

.kh-gnb { flex: 1; }
.kh-gnb > ul { display: flex; gap: 32px; }
.kh-gnb li { position: relative; }
.kh-gnb a, .kh-gnb-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  height: var(--header-h); padding: 0;
  background: none; border: 0;
  font-size: 16px; font-weight: 700; color: #222; letter-spacing: -.02em;
}
.kh-gnb a:hover, .kh-gnb-toggle:hover, .kh-gnb li.on > a { color: var(--brand); }
.kh-gnb li.on > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--brand);
}
.kh-gnb-toggle::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.kh-gnb-menu {
  position: absolute; top: 100%; left: -14px; z-index: 10;
  display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); gap: 2px;
  padding: 14px; min-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.kh-gnb-menu--wide { grid-template-columns: repeat(4, minmax(92px, 1fr)); min-width: 420px; }
.kh-gnb-menu a { padding: 8px 10px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: var(--body); }
.kh-gnb-menu a:hover { background: var(--brand-soft); color: var(--brand); }

.kh-header-right { display: flex; align-items: center; gap: 8px; flex: none; }
.kh-hd-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; color: #222;
}
.kh-hd-ico:hover { background: var(--tint); }
.kh-hd-ico svg { width: 19px; height: 19px; }
.kh-hd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 16px; border-radius: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.kh-hd-btn--outline { border: 1px solid #d0d5dd; color: #222; background: #fff; }
.kh-hd-btn--outline:hover { border-color: #222; }
.kh-hd-btn--fill { border: 1px solid var(--brand); background: var(--brand); color: #fff; }
.kh-hd-btn--fill:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.kh-header-burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; background: none; border: 0; padding: 0; color: var(--ink);
}
.kh-header-burger svg { width: 24px; height: 24px; }

/* ═══════════ 모바일 메뉴 ═══════════ */
.kh-mobile { position: fixed; inset: 0; z-index: 400; background: rgba(15, 23, 42, .45); }
.kh-mobile[hidden] { display: none; }
.kh-mobile-panel {
  position: absolute; inset: 0 0 0 auto; width: min(88vw, 360px);
  background: #fff; padding: 18px 20px 40px; overflow-y: auto;
}
.kh-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.kh-mobile-close { width: 40px; height: 40px; background: none; border: 0; color: var(--ink); }
.kh-mobile-close svg { width: 22px; height: 22px; }
.kh-mobile-cta { display: grid; gap: 8px; margin-bottom: 24px; }
.kh-mobile-label {
  display: block; margin: 22px 0 8px;
  font-size: 12.5px; font-weight: 800; color: var(--faint); letter-spacing: .04em;
}
.kh-mobile-link {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.kh-mobile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kh-mobile-grid a {
  padding: 9px 6px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13.5px; text-align: center; color: var(--body);
}
.kh-mobile-tel {
  display: block; margin-top: 26px; padding: 14px; border-radius: var(--r-sm);
  background: var(--brand-soft); color: var(--brand); font-weight: 800; text-align: center;
}

/* ═══════════ 상단 밴드 — 헤드라인 + Airbnb식 필 검색 + 지역 칩 ═══════════
 * Airbnb 실측(1440): 필 850×66, radius 100, 1px #ddd, 그림자 0 8px 24px rgba(0,0,0,.1),
 * 세그먼트 라벨 12/600 + 값 14/400, 구분선 1×32 #ddd, 우측 원형 버튼 48(안쪽 9px).
 * 밴드 배경은 숨고식 옅은 회색(#f7f8fa) — 흰 필이 여백에 떠 보이지 않게 면을 깔아준다. */
.kh-top { padding: 52px 0 44px; background: #f7f8fa; border-bottom: 1px solid #eceef2; }
.kh-top-title { margin: 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.kh-top-desc { margin: 10px 0 0; font-size: 15px; color: var(--sub); }
.kh-top-desc strong { font-weight: 700; color: var(--ink); }

.kh-pill {
  display: flex; align-items: center;
  width: min(100%, 850px); height: 66px; margin: 26px 0 0;
  background: #fff; border: 1px solid #ddd; border-radius: 100px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .02), 0 8px 24px rgba(0, 0, 0, .08);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.kh-pill:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .02), 0 10px 28px rgba(0, 0, 0, .12); }
.kh-pill:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 12px 32px rgba(0, 0, 0, .14); }
.kh-pill-seg { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 0 0 200px; height: 100%; padding: 0 24px; border-radius: 100px; transition: background .15s var(--ease); }
.kh-pill-seg--grow { flex: 1 1 auto; min-width: 0; }
.kh-pill-seg:hover { background: #f2f2f2; }
.kh-pill-seg:focus-within { background: #f2f2f2; }
.kh-pill-label { font-size: 12px; font-weight: 600; color: #222; line-height: 1.2; }
.kh-pill-field {
  width: 100%; border: 0; outline: 0; padding: 0; background: transparent;
  font-size: 14.5px; font-weight: 400; color: #222; line-height: 1.3; appearance: none;
}
.kh-pill-field::placeholder { color: #6c6c6c; }
select.kh-pill-field { cursor: pointer; padding-right: 18px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right center; }
.kh-pill-div { flex: none; width: 1px; height: 32px; background: #ddd; transition: opacity .15s var(--ease); }
.kh-pill-seg:hover + .kh-pill-div, .kh-pill-div:has(+ .kh-pill-seg:hover),
.kh-pill-seg:focus-within + .kh-pill-div, .kh-pill-div:has(+ .kh-pill-seg:focus-within) { opacity: 0; }
.kh-pill-btn {
  flex: none; width: 48px; height: 48px; margin: 0 9px 0 4px;
  border: 0; border-radius: 50%; background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.kh-pill-btn svg { width: 18px; height: 18px; }
.kh-pill-btn:hover { background: var(--brand-dark); transform: scale(1.05); }
.kh-pill-btn:active { transform: scale(.94); }

.kh-top-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.kh-top-chips-label { margin-right: 4px; font-size: 13px; font-weight: 600; color: var(--faint); }
.kh-chip-link {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px;
  border: 1px solid #dfe2e7; border-radius: 100px; background: #fff;
  font-size: 13.5px; font-weight: 500; color: var(--body);
  transition: border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.kh-chip-link em { font-style: normal; font-weight: 600; color: var(--faint); font-size: 12.5px; }
.kh-chip-link:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.kh-chip-link:hover em { color: var(--ink); }

/* ═══════════ 업종 타일 — 직방 홈 구조 ═══════════
 * 직방 실측(1440): 타일 180×120 그리드, 글자만. 여기서는 건수를 더하고 호버 시 화살표가 들어온다. */
.kh-cats { padding: 56px 0 0; background: #fff; }
.kh-cats-head { margin-bottom: 20px; }
.kh-cats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.kh-cats-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 108px; padding: 18px 18px 16px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; color: var(--ink);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.kh-cats-tile__name { font-size: 16.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.kh-cats-tile__meta { font-size: 13px; font-weight: 500; color: var(--faint); transition: color .18s var(--ease); }
.kh-cats-tile__arrow {
  position: absolute; right: 14px; bottom: 14px; width: 18px; height: 18px; color: var(--ink);
  opacity: 0; transform: translateX(-6px); transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.kh-cats-tile:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .07); }
.kh-cats-tile:hover .kh-cats-tile__meta { color: var(--ink); }
.kh-cats-tile:hover .kh-cats-tile__arrow { opacity: 1; transform: none; }
.kh-cats-tile--all { background: var(--ink); border-color: var(--ink); color: #fff; }
.kh-cats-tile--all .kh-cats-tile__meta { color: rgba(255, 255, 255, .6); }
.kh-cats-tile--all .kh-cats-tile__arrow { color: #fff; }
.kh-cats-tile--all:hover { background: #262626; border-color: #262626; }
.kh-cats-tile--all:hover .kh-cats-tile__meta { color: #fff; }

/* 베스트매물 — 타일 아래 첫 매물 섹션 */
.kh-best { padding: 64px 0 0; }

/* 목록 페이지 검색/셀렉트 (히어로 없음 → 기본형만 유지) */
.kh-select {
  height: 42px; padding: 0 36px 0 14px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center;
  font-size: 14.5px; color: var(--body); appearance: none; cursor: pointer;
}
.kh-select:hover { border-color: #999; }
.kh-search-main {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 4px 4px 16px;
}
.kh-search-ico { width: 20px; height: 20px; color: #999; flex: none; }
.kh-search-main input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; font-size: 15px; color: #111; }
.kh-search-main input::placeholder { color: #999; }
.kh-search-btn { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; }
.kh-search-btn:hover { background: var(--brand-dark); }

/* ═══════════ 이미지 슬롯 ═══════════ */
.kh-picture { display: block; }
.kh-picture img { width: 100%; height: 100%; object-fit: cover; }
.kh-imgslot {
  display: flex; align-items: center; justify-content: center; width: 100%;
  background: repeating-linear-gradient(135deg, #eef2f8 0 12px, #e7ecf5 12px 24px);
  color: #94a3b8;
}
.kh-imgslot__label { font-size: 12px; letter-spacing: .02em; padding: 4px 10px; }

/* ═══════════ 서비스 카드 ═══════════
 * 사진 없이 그라디언트 배경 + 라인 모티프 + 타이포로 구성한다(NCP 톤).
 * variant: --buy(라이트 블루) / --sell(다크 네이비·비공개 무드) / --analysis(라이트 그린) */
.kh-features { padding: 76px 0 88px; margin-top: 0; }
.kh-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kh-feature {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 248px; padding: 26px 28px 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.kh-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kh-feature--buy { background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand-wash) 52%, #fff 100%); border-color: var(--brand-line); }
.kh-feature--analysis { background: linear-gradient(135deg, #e2f6ec 0%, #f2fbf7 52%, #fff 100%); border-color: #cfeadd; }
.kh-feature--sell { background: linear-gradient(132deg, #241348 0%, #392065 58%, var(--brand) 135%); border-color: #392065; }

.kh-feature-motif {
  position: absolute; z-index: -1; right: -34px; top: -30px;
  color: var(--brand); opacity: .12; transform: rotate(-8deg);
}
.kh-feature-motif svg { width: 190px; height: 190px; display: block; }
.kh-feature--analysis .kh-feature-motif { color: var(--verify); }
.kh-feature--sell .kh-feature-motif { color: var(--brand-line); opacity: .14; }

.kh-feature-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--brand); }
.kh-feature-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.kh-feature-desc { margin-top: 2px; font-size: 15px; color: var(--sub); line-height: 1.62; max-width: 34ch; }
.kh-feature-cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 18px;
  font-size: 15px; font-weight: 700; color: var(--brand);
}
.kh-feature-cta svg { width: 15px; height: 15px; transition: transform .18s ease; }
.kh-feature:hover .kh-feature-cta svg { transform: translateX(3px); }

.kh-feature--analysis .kh-feature-eyebrow { color: var(--verify); }
.kh-feature--analysis .kh-feature-cta { color: var(--verify); }
.kh-feature--sell .kh-feature-eyebrow { color: var(--brand-light); }
.kh-feature--sell .kh-feature-title { color: #fff; }
.kh-feature--sell .kh-feature-desc { color: rgba(243, 239, 255, .78); }
.kh-feature--sell .kh-feature-cta { color: #fff; }

/* ═══════════ 섹션 공통 ═══════════ */
.kh-section { padding: 88px 0; }
.kh-section--top { padding-top: 48px; }
.kh-section--tint { background: var(--tint); }
.kh-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.kh-section-head--center { justify-content: center; text-align: center; }
.kh-section-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.3; color: var(--ink);
}
.kh-section-desc { margin-top: 10px; font-size: 16px; color: var(--sub); }
.kh-section-nav { display: flex; gap: 8px; flex: none; }
.kh-arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--body); display: flex; align-items: center; justify-content: center;
}
.kh-arrow:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
.kh-arrow svg { width: 18px; height: 18px; }
.kh-arrow.swiper-button-disabled { opacity: .35; cursor: default; }
.kh-section-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 28px;
  font-size: 15.5px; font-weight: 700; color: var(--brand);
}
.kh-section-more::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
}

.kh-page-head { padding: 52px 0 8px; }
.kh-page-title {
  font-family: var(--font-display);
  font-size: clamp(27px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.28; color: var(--ink);
}
.kh-page-desc { margin-top: 14px; font-size: 16.5px; color: var(--sub); }
.kh-page-head .kh-btn { margin-top: 22px; }

/* ═══════════ 매물 카드 v4 — 알스퀘어 오피스 카드 구조 + Linear 마감 ═══════════
 * 알스퀘어 실측: 261px, radius 12, 1px rgba(238,238,238,.75), 그림자 0 0 10px rgba(0,0,0,.1),
 * 이름 20/700 #000 → 위치 20/700 #0286ff. 사진이 없으므로 그 아래를 라벨-값 4행으로 채운다.
 * Linear 규칙: 호버는 배경·테두리 한 단계만, 0.1s, 이동 없음. */
.kh-cards-list { list-style: none; margin: 0; padding: 0; }
.kh-card {
  position: relative; height: 100%;
  background: #fff; border: 1px solid #ececec; border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .06);
  transition: background .1s var(--ease), border-color .1s var(--ease);
}
.kh-card:hover { background: #fafafa; border-color: #d9d9d9; }
.kh-card.is-sold .kh-card__link { opacity: .5; }
.kh-card__link { display: flex; flex-direction: column; height: 100%; padding: 22px 22px 18px; color: inherit; }
.kh-card__badge { margin: 0 0 10px; }
.kh-card__title {
  margin: 0; padding-right: 30px;
  font-size: 19px; line-height: 1.32; font-weight: 700; letter-spacing: -.02em; color: #111;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kh-card__where { margin: 6px 0 0; font-size: 16.5px; line-height: 1.35; font-weight: 700; color: var(--brand); }
.kh-card__rows { margin: 18px 0 0; padding: 0; border-top: 1px solid #ececec; }
.kh-card__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1f1f1; }
.kh-card__rows div:last-child { border-bottom: 0; }
.kh-card__rows dt { font-size: 13.5px; color: #767676; }
.kh-card__rows dd { margin: 0; font-size: 15px; font-weight: 600; color: #111; font-variant-numeric: tabular-nums; text-align: right; }
.kh-card__rows div:first-child dd { font-size: 17px; font-weight: 700; }
.kh-card__foot { display: flex; justify-content: space-between; margin: auto 0 0; padding-top: 14px; font-size: 12.5px; color: #9a9a9a; }
.kh-card__fav {
  position: absolute; top: 16px; right: 14px; z-index: 2;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #c4c4c4; border-radius: 50%;
  transition: color .1s var(--ease), background .1s var(--ease);
}
.kh-card__fav svg { width: 20px; height: 20px; }
.kh-card__fav:hover { color: #111; background: #f1f1f1; }
.kh-card__fav[aria-pressed="true"] { color: var(--brand); }
.kh-card__fav[aria-pressed="true"] svg { fill: currentColor; }

/* ═══════════ 매수 카드 ═══════════ */
.kh-buyer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kh-buyer {
  display: flex; flex-direction: column; height: 100%; padding: 24px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.kh-buyer__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--faint);
}
.kh-buyer__foot a { font-weight: 700; color: var(--brand); }
.kh-buyer__budget { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.kh-buyer__budget span { font-size: 13px; color: var(--sub); }
.kh-buyer__budget strong { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--brand); letter-spacing: -.03em; }
.kh-buyer__row { display: flex; gap: 12px; margin-bottom: 10px; }
.kh-buyer__row dt { flex: none; width: 62px; font-size: 13px; color: var(--faint); padding-top: 3px; }
.kh-buyer__row dd { display: flex; flex-wrap: wrap; gap: 5px; }
.kh-buyer__more { font-size: 13px; color: var(--sub); align-self: center; }
.kh-buyer__note { margin-top: 12px; font-size: 14px; color: var(--sub); }

.kh-hotregion { display: flex; flex-wrap: wrap; gap: 10px; }
.kh-hotregion li { display: inline-flex; align-items: center; gap: 6px; }
.kh-hotregion em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--brand); }

/* ═══════════ 절차 · 체크리스트 ═══════════ */
.kh-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.kh-process-item {
  padding: 26px 22px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.kh-process-step {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-display); font-size: 15px; font-weight: 800;
}
.kh-process-title { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.kh-process-desc { margin-top: 8px; font-size: 14.5px; color: var(--sub); line-height: 1.6; }

.kh-checklist {
  margin-top: 56px; padding: 40px; border-radius: var(--r-lg);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.kh-checklist-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.kh-checklist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px; margin-top: 24px; }
.kh-checklist-grid li { display: flex; gap: 10px; }
.kh-checklist-grid svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--verify); }
.kh-checklist-grid strong { display: block; font-size: 15.5px; color: var(--ink); }
.kh-checklist-grid span { display: block; margin-top: 3px; font-size: 14px; color: var(--sub); line-height: 1.6; }
.kh-checklist-grid--plain { margin-top: 20px; }

/* ═══════════ 대형 CTA ═══════════ */
.kh-cta { padding: 0 0 96px; }
.kh-cta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.kh-cta-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 46px 44px; border-radius: var(--r-lg); border: 1px solid var(--line);
}
.kh-cta-card--sell { background: linear-gradient(135deg, var(--brand-wash) 0%, var(--brand-soft) 100%); border-color: var(--brand-line); }
.kh-cta-card--buy { background: var(--ink); border-color: var(--ink); color: #fff; }
.kh-cta-eyebrow { font-size: 13.5px; font-weight: 800; color: var(--brand); }
.kh-cta-card--buy .kh-cta-eyebrow { color: var(--brand-light); }
.kh-cta-title {
  font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800; line-height: 1.32; letter-spacing: -.035em; color: var(--ink);
}
.kh-cta-card--buy .kh-cta-title { color: #fff; }
.kh-cta-desc { font-size: 15.5px; color: var(--sub); line-height: 1.65; }
.kh-cta-card--buy .kh-cta-desc { color: rgba(255, 255, 255, .78); }
.kh-cta-card .kh-btn { margin-top: 18px; }

/* ═══════════ 공지 · FAQ ═══════════ */
.kh-cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.kh-cs-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 18px; }
.kh-cs-list li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kh-cs-list time { color: var(--faint); font-size: 13.5px; flex: none; }
.kh-faq-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.kh-faq-item dt { font-size: 16px; font-weight: 700; color: var(--ink); }
.kh-faq-item dd { margin-top: 8px; font-size: 15px; color: var(--sub); line-height: 1.7; }
.kh-faq--wide { max-width: 900px; }

/* ═══════════ 목록 필터 ═══════════ */
.kh-listfilter { padding: 22px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-md); }
.kh-listfilter-main {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 20px;
}
.kh-listfilter-main input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font-size: 15.5px; }
.kh-listfilter-main .kh-search-btn { height: 44px; padding: 0 24px; }
.kh-listfilter-toggle {
  height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 14.5px; font-weight: 700; color: var(--body); flex: none;
}
.kh-listfilter-toggle[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.kh-listfilter-detail { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 16px; }
.kh-listfilter-actions { display: flex; gap: 8px; margin-left: auto; }
.kh-listfilter-actions .kh-btn { height: 42px; }
.kh-listcount { margin: 26px 0 16px; font-size: 15px; color: var(--sub); }
.kh-listcount strong { color: var(--ink); font-weight: 800; }

.kh-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 44px; }
.kh-pager a { padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 14.5px; }
.kh-pager a:hover { border-color: var(--brand-line); color: var(--brand); }
.kh-pager-now { font-size: 14.5px; color: var(--sub); }

.kh-empty { padding: 72px 20px; text-align: center; }
.kh-empty-title { font-size: 20px; font-weight: 800; color: var(--ink); }
.kh-empty-desc { margin-top: 10px; font-size: 15.5px; color: var(--sub); }
.kh-empty .kh-btn, .kh-empty-actions { margin-top: 24px; }
.kh-empty-actions { display: flex; gap: 10px; justify-content: center; }

/* ═══════════ 상세 ═══════════ */
.kh-breadcrumb { padding: 20px 0; font-size: 13.5px; color: var(--sub); }
.kh-breadcrumb .kh-container { display: flex; gap: 8px; }
.kh-breadcrumb a:hover { color: var(--brand); }
.kh-detail { padding: 12px 0 80px; }
.kh-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.kh-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.kh-detail-title { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
.kh-detail-lead { margin-top: 12px; font-size: 17px; color: var(--sub); }
.kh-detail-price { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 40px; }
.kh-detail-price span { font-size: 15px; color: var(--sub); }
.kh-detail-price strong { font-family: var(--font-display); font-size: 42px; font-weight: 800; letter-spacing: -.04em; color: var(--brand); }
.kh-detail-h2 { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--ink); margin: 40px 0 16px; letter-spacing: -.03em; }
.kh-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kh-spec > div { display: flex; gap: 14px; background: #fff; padding: 15px 20px; }
.kh-spec dt { flex: none; width: 84px; font-size: 14px; color: var(--sub); }
.kh-spec dd { font-size: 15px; font-weight: 700; color: var(--ink); }
.kh-detail-memo { font-size: 15.5px; line-height: 1.8; color: var(--body); }

.kh-detail-side { position: sticky; top: calc(var(--header-h) + 20px); }
.kh-detail-box { padding: 28px; border: 1px solid var(--brand-line); border-radius: var(--r-lg); background: var(--brand-soft); display: grid; gap: 10px; }
.kh-detail-box-title { font-size: 18px; font-weight: 800; color: var(--ink); }
.kh-detail-box-desc { font-size: 14.5px; color: var(--sub); margin-bottom: 8px; line-height: 1.6; }

/* ═══════════ 폼 ═══════════ */
.kh-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.kh-form { display: grid; gap: 28px; }
.kh-fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 26px 28px; display: grid; gap: 18px; margin: 0; }
.kh-fieldset > legend { padding: 0 8px; font-size: 15px; font-weight: 800; color: var(--brand); }
.kh-field { display: grid; gap: 7px; }
.kh-field > span { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.kh-field > span em { font-style: normal; margin-left: 5px; font-size: 12px; color: var(--alert); font-weight: 700; }
.kh-field small { font-size: 13px; color: var(--faint); }
.kh-field input[type="text"], .kh-field input[type="tel"], .kh-field input[type="number"],
.kh-field input[type="search"], .kh-field textarea, .kh-field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; font-size: 15.5px; color: var(--ink);
}
.kh-field textarea { resize: vertical; line-height: 1.7; }
.kh-field select[multiple] { padding: 8px; height: auto; background-image: none; }
.kh-field input:focus, .kh-field textarea:focus, .kh-field select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.kh-field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.kh-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--body); cursor: pointer; }
.kh-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brand); flex: none; }
.kh-check a { color: var(--brand); text-decoration: underline; }
.kh-check--inline { display: inline-flex; margin-right: 14px; }
.kh-checkgroup { border: 0; padding: 0; margin: 0; }
.kh-checkgroup > legend { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; padding: 0; }
.kh-hp { position: absolute; left: -9999px; }
.kh-form-error, .kh-form-errors p {
  margin: 0 0 8px; padding: 12px 16px; border-radius: var(--r-sm);
  background: #fef2f4; color: #b91c3c; font-size: 14.5px;
}
.kh-alert { padding: 18px 22px; border-radius: var(--r-md); margin-bottom: 26px; }
.kh-alert--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.kh-alert strong { display: block; font-size: 16px; margin-bottom: 4px; }
.kh-form-side-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 16px; }
.kh-steplist { display: grid; gap: 14px; counter-reset: step; }
.kh-steplist li { padding-left: 34px; position: relative; }
.kh-steplist li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.kh-steplist strong { display: block; font-size: 15px; color: var(--ink); }
.kh-steplist span { display: block; font-size: 14px; color: var(--sub); line-height: 1.6; margin-top: 2px; }

/* ═══════════ 문서 페이지 ═══════════ */
.kh-doc { max-width: 820px; }
.kh-doc h2 { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--ink); margin: 36px 0 12px; }
.kh-doc h2:first-child { margin-top: 0; }
.kh-doc p, .kh-doc li { font-size: 15.5px; line-height: 1.8; color: var(--body); }
.kh-doc ul { list-style: disc; padding-left: 20px; }
.kh-doc a { color: var(--brand); text-decoration: underline; }

/* ═══════════ 푸터 ═══════════ */
.kh-footer { background: var(--tint); border-top: 1px solid var(--line); padding: 44px 0 56px; }
.kh-footer-nav { display: flex; flex-wrap: wrap; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.kh-footer-nav a { font-size: 14.5px; color: var(--body); }
.kh-footer-nav a:hover { color: var(--brand); }
.kh-footer-nav .is-strong { font-weight: 800; color: var(--ink); }
.kh-footer-body { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-top: 28px; }
.kh-footer-brand { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.kh-footer-corp { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--sub); }
.kh-footer-copy { margin-top: 16px; font-size: 13px; color: var(--faint); }
.kh-footer-cs-label { font-size: 13px; color: var(--sub); }
.kh-footer-cs-tel { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.kh-footer-cs-time { font-size: 13.5px; color: var(--sub); margin-top: 4px; }
.kh-footer-cs-mail { font-size: 13.5px; color: var(--brand); }

/* ═══════════ 모바일 고정 CTA · 탑버튼 ═══════════ */
.kh-fixed-cta { display: none; }
.kh-top-btn {
  position: fixed; right: 20px; bottom: calc(24px + var(--cta-h)); z-index: 150;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--body); box-shadow: var(--shadow-md);
  align-items: center; justify-content: center; display: none;
}
.kh-top-btn.is-on { display: flex; }
.kh-top-btn svg { width: 20px; height: 20px; }

/* ═══════════ 반응형 ═══════════ */
@media (max-width: 1279px) {
  .kh-cards-grid, .kh-cards-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .kh-process { grid-template-columns: repeat(3, 1fr); }
  .kh-gnb > ul { gap: 22px; }
  .kh-header-inner { gap: 24px; }
}

@media (max-width: 1023px) {
  .kh-cats-grid { grid-template-columns: repeat(4, 1fr); }
  .kh-pill-seg { flex-basis: 160px; }
  .kh-container { width: min(100% - 32px, 100%); }
  .kh-features-grid { grid-template-columns: 1fr; }
  .kh-buyer-grid { grid-template-columns: repeat(2, 1fr); }
  .kh-checklist-grid { grid-template-columns: repeat(2, 1fr); }
  .kh-cta-grid { grid-template-columns: 1fr; }
  .kh-cs-grid { grid-template-columns: 1fr; gap: 32px; }
  .kh-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .kh-detail-side { position: static; }
  .kh-form-layout { grid-template-columns: 1fr; gap: 32px; }
  .kh-cards-grid, .kh-cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .kh-gnb { display: none; }
  .kh-header-burger { display: inline-flex; }
  .kh-header-inner { height: 60px; gap: 12px; justify-content: space-between; }
  .kh-header-tel span { display: none; }
  .kh-header-tel { padding: 8px; }
  .kh-header-tel svg { width: 22px; height: 22px; }
  :root { --header-h: 60px; }
}

@media (max-width: 767px) {
  :root { --cta-h: calc(62px + env(safe-area-inset-bottom)); }
  body { font-size: 15px; }
  .kh-utilbar-links:first-child { display: none; } /* 벨트 좌측 서비스 라인 숨김 */
  .kh-utilbar-inner { justify-content: flex-end; }

  .kh-top { padding: 28px 0 28px; }
  .kh-top-title { font-size: 22px; }
  .kh-top-desc { font-size: 13.5px; }
  .kh-top-chips { gap: 6px; margin-top: 14px; }
  .kh-top-chips-label { display: none; }
  .kh-chip-link { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .kh-pill { flex-direction: column; align-items: stretch; height: auto; margin-top: 18px; padding: 6px; border-radius: 16px; }
  .kh-pill-seg { flex: none; height: 56px; padding: 0 16px; border-radius: 10px; }
  .kh-pill-div { width: auto; height: 1px; margin: 0 16px; }
  .kh-pill-btn { width: 100%; height: 46px; margin: 6px 0 0; border-radius: 10px; }
  .kh-cats { padding-top: 36px; }
  .kh-cats-head { margin-bottom: 14px; }
  .kh-cats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kh-cats-tile { height: 80px; padding: 12px 12px 10px; border-radius: 8px; }
  .kh-cats-tile__name { font-size: 14px; }
  .kh-cats-tile__meta { font-size: 12px; }
  .kh-cats-tile__arrow { display: none; }
  .kh-best { padding-top: 44px; }

  .kh-features { padding: 44px 0 56px; margin-top: 0; }
  .kh-feature { min-height: 0; padding: 24px 22px 22px; }
  .kh-feature-title { font-size: 23px; }
  .kh-section { padding: 56px 0; }
  .kh-section--top { padding-top: 32px; }
  .kh-section-head { margin-bottom: 24px; }
  .kh-section-nav { display: none; }

  .kh-cards-grid, .kh-cards-grid--4, .kh-buyer-grid { grid-template-columns: 1fr; gap: 14px; }
  .kh-process { grid-template-columns: 1fr; gap: 10px; }
  .kh-process-item { padding: 20px; display: grid; grid-template-columns: 34px 1fr; gap: 4px 14px; }
  .kh-process-step { grid-row: span 2; margin-bottom: 0; }
  .kh-checklist { padding: 26px 20px; margin-top: 36px; }
  .kh-checklist-grid { grid-template-columns: 1fr; gap: 16px; }
  .kh-cta { padding-bottom: 56px; }
  .kh-cta-card { padding: 32px 24px; }
  .kh-spec { grid-template-columns: 1fr; }
  .kh-field-row { grid-template-columns: 1fr; }
  .kh-fieldset { padding: 20px 18px 22px; }
  .kh-listfilter { padding: 16px; }
  .kh-listfilter-main { flex-wrap: wrap; border-radius: var(--r-md); padding: 12px; }
  .kh-listfilter-main input { flex: 1 1 100%; order: -1; padding: 0 4px; }
  .kh-search-ico { display: none; }
  .kh-listfilter-detail .kh-field { flex: 1 1 calc(50% - 6px); }
  .kh-listfilter-actions { width: 100%; margin-left: 0; }
  .kh-listfilter-actions .kh-btn { flex: 1; }
  .kh-footer-body { flex-direction: column; gap: 28px; }

  .kh-fixed-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
    display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .kh-fixed-cta__btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: #fff; color: var(--ink); font-size: 15px; font-weight: 700;
  }
  .kh-fixed-cta__btn svg { width: 17px; height: 17px; }
  .kh-fixed-cta__btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
  .kh-top-btn { right: 14px; bottom: calc(14px + var(--cta-h)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Approved Soomgo / Toss prototype foundations */
:root{
  /* Legacy component aliases resolve to the single brand palette. */
  --blue:var(--brand); --blue-d:var(--brand-dark); --blue-t:var(--brand-soft);
  --ink:#1A1A1E; --ink-2:#4E5968; --ink-3:#8B95A1; --ink-4:#B0B8C1;
  --line:#E6E8EA; --line-2:#F2F4F6; --bg:#F7F8FA; --chip:#F4F5F7; --red:#F04452; --warm:#FFF4E5;
  --r:10px; --r-lg:16px; --w:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:var(--ink);background:#fff;font-size:15px;line-height:1.5;letter-spacing:-.01em;word-break:keep-all}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hd-in{height:72px;display:flex;align-items:center;gap:36px}
.hd-logo img{height:20px;width:auto}
.gnb{display:flex;gap:28px;font-size:16px;font-weight:500}
.gnb a{padding:8px 0;color:var(--ink)}
.gnb a.on{color:var(--blue)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.hd-tel{font-size:14px;color:var(--ink-2);margin-right:8px;display:flex;align-items:center;gap:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:8px;font-size:15px;font-weight:600;transition:background .12s,border-color .12s,color .12s}
.btn-line{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-line:hover{background:var(--bg)}
.btn-fill{background:var(--blue);color:#fff}
.btn-fill:hover{background:var(--blue-d)}
.btn-lg{height:52px;padding:0 24px;font-size:16px;border-radius:10px}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center}
.burger svg{width:24px;height:24px}

/* hero */
.hero{padding:48px 0 8px}
.hero-in{display:grid;grid-template-columns:1fr 440px;gap:40px;align-items:center}
.hero h1{font-size:36px;font-weight:700;line-height:1.3;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-sub{margin-top:14px;font-size:17px;color:var(--ink-2)}
.search{margin-top:28px;display:flex;background:var(--chip);border:1px solid var(--chip);border-radius:12px;padding:6px;gap:4px}
.search:focus-within{border-color:var(--blue);background:#fff}
.search select,.search input{height:48px;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);padding:0 14px;outline:0;min-width:0}
.search select{appearance:none;-webkit-appearance:none;padding-right:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center/16px;flex:0 0 132px}
.search .sep{width:1px;background:var(--line);margin:12px 0}
.search input{flex:1}
.search input::placeholder{color:var(--ink-3)}
.search .btn{height:48px;border-radius:9px;padding:0 22px}
.hot{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 6px;align-items:center;font-size:13px;color:var(--ink-3)}
.hot a{border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--ink-2);background:#fff}
.hot a:hover{border-color:var(--ink-4)}
.hero-art img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* category */
.cats{padding:24px 0 0}
.cats-grid{display:grid;grid-template-columns:repeat(12,1fr)}
.cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 12px;border-radius:12px;transition:background .12s}
.cat:hover{background:var(--bg)}
.cat img{width:58px;height:58px;object-fit:contain}
.cat span{font-size:14px;font-weight:500;color:var(--ink)}
.cat.all i{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--bg);color:var(--ink-2)}
.cat.all svg{width:24px;height:24px}

/* stats */
.stats{margin:28px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.stats div{padding:18px 0;display:flex;align-items:baseline;gap:10px;justify-content:center}
.stats div+div{border-left:1px solid var(--line)}
.stats dt{font-size:14px;color:var(--ink-2)}
.stats dd{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stats dd small{font-size:14px;font-weight:500;color:var(--ink-2);margin-left:2px}

/* promo banners */
.promo{padding:40px 24px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pb{position:relative;display:flex;align-items:center;border-radius:var(--r-lg);padding:28px 30px;min-height:172px;overflow:hidden;transition:background .12s}
.pb--sell{background:var(--blue-t)}
.pb--buy{background:var(--warm)}
.pb-txt{flex:1;min-width:0}
.pb-eyebrow{font-size:13px;font-weight:600;color:var(--blue)}
.pb--buy .pb-eyebrow{color:#D9730D}
.pb h3{margin-top:6px;font-size:22px;font-weight:700;line-height:1.3;letter-spacing:-.02em}
.pb p{margin-top:8px;font-size:14px;color:var(--ink-2)}
.pb-link{margin-top:14px;display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--ink)}
.pb-link svg{width:16px;height:16px}
.pb img{width:150px;height:150px;object-fit:contain;flex:0 0 150px;margin-right:-6px}

/* sections */
.sec{padding:64px 0 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-h h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.sec-h p{margin-top:4px;font-size:14px;color:var(--ink-3)}
.more{font-size:14px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.more svg{width:16px;height:16px}
.tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink-2);background:#fff;transition:background .12s,color .12s,border-color .12s}
.tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tab:not(.on):hover{background:var(--bg)}

/* listing card (잡코리아 텍스트 카드 구조) */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;min-height:186px;transition:box-shadow .2s,border-color .2s}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.card .fav{position:absolute;top:14px;right:14px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ink-4);border-radius:6px}
.card .fav:hover{color:var(--ink-2);background:var(--bg)}
.card .fav svg{width:20px;height:20px}
.card-where{font-size:13px;color:var(--ink-3);padding-right:32px;display:flex;align-items:center;gap:6px}
.card-where b{font-weight:600;color:var(--red);font-size:12px}
.card-where b.blue{color:var(--blue)}
.card-title{margin-top:4px;font-size:17px;font-weight:600;line-height:25px;color:var(--ink);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:16px}
.card-price{margin-top:8px;font-size:15px;color:var(--ink);display:flex;align-items:baseline;gap:6px}
.card-price strong{font-size:18px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card-tags{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:4px}
.card-tags span{height:22px;display:inline-flex;align-items:center;padding:0 7px;border-radius:4px;background:var(--chip);font-size:11.5px;font-weight:600;color:#768091;font-variant-numeric:tabular-nums}
.card-foot{margin-top:12px;display:flex;justify-content:space-between;font-size:12px;color:var(--ink-4)}
.card.sold{background:var(--bg)}
.card.sold .card-title{color:var(--ink-3)}

/* buyer cards */
.bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bcard{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:#fff;transition:box-shadow .2s}
.bcard:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.bcard-top{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3)}
.bcard-top b{color:var(--blue);font-weight:600}
.bcard h3{margin-top:6px;font-size:17px;font-weight:600;line-height:25px}
.bcard dl{margin-top:12px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.bcard dt{color:var(--ink-3)}
.bcard dd{color:var(--ink);font-weight:500}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink)}
.step{padding:22px 20px 26px 0;border-top:1px solid transparent}
.step+.step{padding-left:20px;border-left:1px solid var(--line)}
.step i{font-style:normal;font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.04em}
.step h3{margin-top:10px;font-size:17px;font-weight:600}
.step p{margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.6}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;font-size:16px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;color:var(--ink-3);flex:0 0 20px;transition:transform .15s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .a{padding:0 4px 20px;font-size:15px;color:var(--ink-2);line-height:1.7;max-width:820px}

/* cta */
.cta{margin-top:72px;background:var(--blue);color:#fff}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:44px 24px}
.cta h2{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.cta p{margin-top:8px;font-size:15px;opacity:.85}
.cta-btns{display:flex;gap:10px;flex:0 0 auto}
.cta .btn-w{background:#fff;color:var(--blue)}
.cta .btn-w:hover{background:var(--brand-soft)}
.cta .btn-o{border:1px solid rgba(255,255,255,.6);color:#fff}
.cta .btn-o:hover{background:rgba(255,255,255,.1)}

/* footer */
.ft{background:var(--bg);padding:40px 0 56px;font-size:13px;color:var(--ink-2)}
.ft-nav{display:flex;gap:22px;font-size:14px;font-weight:500;color:var(--ink);padding-bottom:22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ft-body{display:flex;justify-content:space-between;gap:24px;padding-top:24px;flex-wrap:wrap}
.ft-corp p{margin-top:4px;line-height:1.6}
.ft-corp p span+span::before{content:"·";margin:0 8px;color:var(--ink-4)}
.ft-brand{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px}
.ft-cs{text-align:right}
.ft-cs strong{display:block;font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin:2px 0}
.ft-copy{margin-top:16px;color:var(--ink-4)}

/* mobile fixed cta */
.mcta{display:none}

/* responsive */
@media (max-width:1100px){
  .cats-grid{grid-template-columns:repeat(6,1fr);row-gap:4px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step:nth-child(4){border-left:0;padding-left:0}
  .step:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .hero-art{order:-1;max-width:360px;margin:0 auto}
  .hero{padding-top:20px}
  .hero h1{font-size:28px}
  .bcards{grid-template-columns:repeat(2,1fr)}
  .promo{grid-template-columns:1fr}
  .cta-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:768px){
  body{padding-bottom:72px}
  .wrap{padding:0 16px}
  .hd-in{height:56px;gap:0}
  .gnb,.hd-tel,.hd-r .btn{display:none}
  .burger{display:flex;margin-left:auto}
  .hd-logo img{height:17px}
  .hero{padding-top:12px}
  .hero-art{max-width:300px}
  .hero h1{font-size:25px}
  .hero-sub{font-size:15px}
  .search{flex-wrap:wrap;padding:8px;gap:6px;background:#fff;border-color:var(--line)}
  .search select{flex:1 1 40%;height:42px;background-color:var(--chip);border-radius:8px}
  .search .sep{display:none}
  .search input{flex:1 1 100%;height:44px;background:var(--chip);border-radius:8px}
  .search .btn{flex:1 1 100%;height:46px}
  .hot{display:none}
  .cats-grid{grid-template-columns:repeat(4,1fr)}
  .cat img,.cat.all i{width:50px;height:50px}
  .cat span{font-size:13px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div{justify-content:flex-start;padding:14px 12px}
  .stats div:nth-child(3){border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .promo{padding:28px 16px 0;gap:12px}
  .pb{padding:20px;min-height:0}
  .pb h3{font-size:19px}
  .pb p{display:none}
  .pb img{width:96px;height:96px;flex-basis:96px}
  .sec{padding-top:44px}
  .sec-h h2{font-size:20px}
  .cards{grid-template-columns:1fr;gap:10px}
  .card{min-height:0}
  .bcards{grid-template-columns:1fr;gap:10px}
  .steps{grid-template-columns:1fr}
  .step,.step+.step{padding:18px 0;border-left:0;border-top:1px solid var(--line)}
  .step:first-child{border-top:0}
  .cta{margin-top:48px}
  .cta-in{padding:32px 16px}
  .cta h2{font-size:22px}
  .cta-btns{width:100%}
  .cta-btns .btn{flex:1}
  .ft-cs{text-align:left}
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:8px}
  .mcta .btn{flex:1;height:48px;font-size:15px}
}


/* ===== v5.1 additions ===== */
/* search autocomplete */
.search-wrap{position:relative;margin-top:28px}
.search-wrap .search{margin-top:0}
.ac{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:8px;z-index:30;display:none}
.ac.on{display:block}
.ac-g{padding:6px 10px 4px;font-size:12px;font-weight:600;color:var(--ink-4)}
.ac a{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:8px;font-size:14.5px}
.ac a:hover,.ac a.hl{background:var(--bg)}
.ac a b{font-weight:600;color:var(--blue)}
.ac a small{font-size:12px;color:var(--ink-3)}
.ac-row{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 8px}
.ac-row a{padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink-2)}

/* category sub-panel */
.cat{position:relative}
.cat-sub{position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%);min-width:150px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:6px;z-index:20;display:none;text-align:left}
.cat:hover .cat-sub,.cat:focus-within .cat-sub{display:block}
.cat-sub a{display:flex;justify-content:space-between;padding:7px 10px;border-radius:6px;font-size:13.5px;color:var(--ink)}
.cat-sub a:hover{background:var(--bg)}
.cat-sub a small{color:var(--ink-4);font-size:12px}
.cat-sub::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}

/* market summary (toss style) */
.mkt{margin-top:32px;display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
.mkt-box{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;background:#fff;display:flex;flex-direction:column}
.big4{flex:1;align-content:space-evenly}
.mkt-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mkt-h h3{font-size:15px;font-weight:600;color:var(--ink-2)}
.mkt-h span{font-size:12px;color:var(--ink-4)}
.big4{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px}
.big4 dt{font-size:13px;color:var(--ink-3)}
.big4 dd{margin-top:4px;font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.big4 dd small{font-size:15px;font-weight:500;color:var(--ink-2);margin-left:2px}
.big4 .chg{display:block;font-size:13px;font-weight:500;margin-top:3px}
.up{color:var(--red)} .dn{color:var(--blue)} .flat{color:var(--ink-3)}
.tlist{display:flex;flex-direction:column}
.tlist a{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;padding:10px 4px;border-radius:8px;transition:background .12s}
.tlist a:hover{background:var(--bg)}
.tlist .rk{font-size:14px;font-weight:700;color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums}
.tlist .nm{font-size:15px;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlist .nm small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:1px}
.tlist .vl{text-align:right;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tlist .vl small{display:block;font-size:12.5px;font-weight:500;margin-top:1px}

/* promo carousel */
.feat{padding-top:16px}
.feat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fc{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;min-height:112px;transition:background .12s,border-color .12s}
.fc:hover{background:var(--bg)}
.fc b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.fc span{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}
.fc img{width:76px;height:76px;object-fit:contain;flex:0 0 76px}

/* tabs w/ skeleton */
.sk{border:1px solid var(--line);border-radius:var(--r);min-height:186px;padding:18px;display:flex;flex-direction:column;gap:10px}
.sk i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,#F2F4F6 25%,#E9ECEF 50%,#F2F4F6 75%);background-size:200% 100%;animation:sh 1.1s infinite}
.sk i:nth-child(1){width:45%}.sk i:nth-child(2){width:80%;height:18px}.sk i:nth-child(3){width:35%;height:18px}.sk i:nth-child(4){width:70%;margin-top:auto}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card:active{transform:scale(.985)}

/* rank section */
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--line);padding-top:6px}
.rank-grid .tlist a{padding:12px 6px;border-bottom:1px solid var(--line-2);border-radius:0}

/* region drilldown */
.rg{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.rg-sido{display:flex;gap:6px;padding:14px 16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;background:var(--bg)}
.rg-sido::-webkit-scrollbar{display:none}
.rg-sido button{flex:0 0 auto;height:34px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);background:transparent}
.rg-sido button b{font-weight:600;color:var(--ink-4);margin-left:3px;font-size:12.5px}
.rg-sido button.on{background:var(--ink);color:#fff}
.rg-sido button.on b{color:rgba(255,255,255,.7)}
.rg-body{display:grid;grid-template-columns:1fr 300px}
.rg-gu{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:8px 10px;align-content:start}
.rg-gu a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;font-size:14.5px}
.rg-gu a:hover{background:var(--bg)}
.rg-gu a b{font-size:13px;font-weight:600;color:var(--blue)}
.rg-gu a.z{color:var(--ink-4)}.rg-gu a.z b{color:var(--ink-4);font-weight:500}
.rg-side{border-left:1px solid var(--line);padding:18px 20px;background:#fff}
.rg-side h4{font-size:14px;font-weight:600;color:var(--ink-2)}
.rg-side .tlist{margin-top:6px}
.rg-side .tlist a{padding:8px 2px}

/* closed deals */
.deals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.deal{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:#fff}
.deal .dk{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:600}
.deal h3{margin-top:10px;font-size:16px;font-weight:600;line-height:1.4}
.deal p{margin-top:8px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.deal dl{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.deal dt{color:var(--ink-3)}.deal dd{font-weight:600;font-variant-numeric:tabular-nums}

/* ===== detail page (toss style) ===== */
.crumb{padding:16px 0 0;font-size:13px;color:var(--ink-3);display:flex;gap:6px}
.dt-grid{display:grid;grid-template-columns:1fr 340px;gap:48px;padding:20px 0 0;align-items:start}
.dt-head .card-where{font-size:14px}
.dt-head h1{margin-top:6px;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.dt-price{margin-top:18px;display:flex;align-items:baseline;gap:10px}
.dt-price span{font-size:15px;color:var(--ink-2)}
.dt-price strong{font-size:40px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.dt-price em{font-style:normal;font-size:14px;font-weight:600;color:var(--red)}
.kstat{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.kstat div{padding:16px 18px;border-left:1px solid var(--line)}
.kstat div:first-child{border-left:0}
.kstat dt{font-size:13px;color:var(--ink-3)}
.kstat dd{margin-top:4px;font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dt-sec{margin-top:40px}
.dt-sec h2{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.kv{border-top:1px solid var(--ink)}
.kv div{display:grid;grid-template-columns:140px 1fr;padding:13px 4px;border-bottom:1px solid var(--line);font-size:15px}
.kv dt{color:var(--ink-3)}
.kv dd{font-weight:500;font-variant-numeric:tabular-nums}
.dt-sec p.txt{font-size:15px;line-height:1.75;color:var(--ink-2)}
.cmp{width:100%;border-collapse:collapse;font-size:14px;border-top:1px solid var(--ink)}
.cmp th,.cmp td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.cmp th{font-weight:500;color:var(--ink-3);font-size:13px}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp tr.me td{font-weight:700;background:var(--blue-t)}
.cmp td .up,.cmp td .dn{font-size:12px;margin-left:4px}
.side{position:sticky;top:88px;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff}
.side .lbl{font-size:13px;color:var(--ink-3)}
.side .pr{margin-top:4px;font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.side .ln{margin:16px 0;height:1px;background:var(--line)}
.side .btn{width:100%;height:50px;font-size:16px;border-radius:10px}
.side .btn+.btn{margin-top:8px}
.side p{margin-top:12px;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.dt-sheet{display:none}
.notice{margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--bg);font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* ===== sell step form (soomgo style) ===== */
.stepwrap{max-width:640px;margin:0 auto;padding:36px 24px 80px}
.prog{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-3)}
.prog b{color:var(--ink);font-weight:600}
.prog-bar{margin-top:10px;height:4px;background:var(--line-2);border-radius:2px;overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--blue);width:20%;transition:width .25s}
.step-pane{display:none;margin-top:36px}
.step-pane.on{display:block}
.step-pane h2{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.step-pane .sub{margin-top:8px;font-size:15px;color:var(--ink-2)}
.opts{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .12s,background .12s;background:#fff}
.opt img{width:48px;height:48px;object-fit:contain}
.opt:hover{background:var(--bg)}
.opt.on{border-color:var(--blue);background:var(--blue-t);color:var(--blue)}
.opt input{position:absolute;opacity:0}
.fld{margin-top:22px}
.fld label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.fld input,.fld select{width:100%;height:52px;border:1px solid var(--line);border-radius:10px;padding:0 16px;font:inherit;font-size:16px;background:#fff;outline:0}
.fld input:focus,.fld select:focus{border-color:var(--blue)}
.fld .unit{position:relative}
.fld .unit input{padding-right:52px}
.fld .unit span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--ink-3)}
.fld .hint{margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chk{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:var(--ink-2)}
.chk input{width:18px;height:18px}
.step-nav{margin-top:32px;display:flex;gap:10px}
.step-nav .btn{height:52px;font-size:16px;border-radius:10px}
.step-nav .btn-fill{flex:1}
.priv{margin-top:24px;padding:14px 16px;border-radius:10px;background:var(--bg);font-size:13px;color:var(--ink-2);line-height:1.6;display:flex;gap:10px}
.priv svg{width:18px;height:18px;flex:0 0 18px;color:var(--blue);margin-top:2px}
.done{text-align:center;padding:40px 0}
.done img{width:160px;margin:0 auto}
.done h2{margin-top:16px}

@media (max-width:1100px){
  .rg-gu{grid-template-columns:repeat(3,1fr)}
  .deals{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .mkt{grid-template-columns:1fr}
  .rg-body{grid-template-columns:1fr}
  .rg-side{border-left:0;border-top:1px solid var(--line)}
  .rank-grid{grid-template-columns:1fr}
  .dt-grid{grid-template-columns:1fr;gap:0}
  .side{display:none}
  .feat-row{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .search-wrap{margin-top:20px}
  .ac{display:none!important}
  .cat-sub{display:none!important}
  .mkt{margin-top:20px;gap:10px}
  .mkt-box{padding:16px 18px;border-radius:12px}
  .big4{gap:14px 16px}
  .big4 dd{font-size:24px}
  .feat-row{grid-template-columns:1fr;gap:10px}
  .fc{min-height:0;padding:14px 16px}
  .fc img{width:56px;height:56px;flex-basis:56px}
  .rg-gu{grid-template-columns:repeat(2,1fr);padding:6px}
  .rg-gu a.z{display:none}
  .deals{grid-template-columns:1fr;gap:10px}
  .dt-head h1{font-size:22px}
  .dt-price strong{font-size:32px}
  .kstat{grid-template-columns:repeat(2,1fr)}
  .kstat div:nth-child(3){border-left:0}
  .kstat div:nth-child(n+3){border-top:1px solid var(--line)}
  .kv div{grid-template-columns:100px 1fr;font-size:14px}
  .dt-sheet{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;align-items:center}
  .dt-sheet .pr{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
  .dt-sheet .pr small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:500}
  .dt-sheet .btn{flex:1;height:48px}
  .stepwrap{padding:20px 16px 40px}
  .step-pane h2{font-size:22px}
  .opts{grid-template-columns:repeat(2,1fr)}
  .row2{grid-template-columns:1fr}
}

/* ===== CI integration: mobile-first component system ===== */
:root{--font-display:var(--font-sans);--ink:#1a1a1e;--body:#4e5968;--sub:#8b95a1;--faint:#b0b8c1;--line:#e6e8ea;--tint:#f7f8fa;--r-sm:8px;--r-md:12px;--r-lg:16px;--header-h:56px}
html{scroll-padding-top:80px}body{overflow-x:clip;padding-bottom:calc(72px + env(safe-area-inset-bottom));font-size:15px;color:var(--ink);line-height:1.5}
[hidden]{display:none!important}main{min-height:45vh}button,input,select,textarea{font-family:inherit}input[type=checkbox],input[type=radio]{accent-color:var(--brand)}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a,button{touch-action:manipulation}svg{vertical-align:middle}
:focus-visible{outline:3px solid var(--brand-focus);outline-offset:3px}
.kh-container,.wrap{width:100%;max-width:1280px;padding-inline:16px;margin-inline:auto;min-width:0}
.kh-header{position:sticky;top:0;z-index:50;height:auto;background:#fff!important;backdrop-filter:none;border-bottom:1px solid var(--line);box-shadow:none}
.kh-header-inner{height:56px;gap:24px}.kh-header-logo-img{height:18px;width:auto;max-width:180px;filter:none!important}.kh-header-logo{flex-shrink:0}.kh-gnb{display:none}.kh-header-right{margin-left:auto;gap:8px;display:flex;align-items:center}.kh-hd-scrap{font-size:13px;color:var(--body)}.kh-hd-scrap span:not([hidden]){display:inline-flex;margin-left:4px;color:var(--blue)}.kh-header-burger{display:flex;width:44px;height:44px;align-items:center;justify-content:center}.kh-header-burger svg{width:24px;height:24px}.kh-hd-btn{display:none}
.kh-gnb-menu{background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px #10182814;max-height:min(65vh,480px);overflow:auto;color:var(--ink);z-index:55}.kh-gnb-menu a{color:var(--ink)!important;min-height:40px}
.kh-mobile{position:fixed;inset:0;background:#0005;z-index:100;display:flex;justify-content:flex-end}.kh-mobile-panel{background:#fff;max-width:400px;width:100%;height:100%;overflow-y:auto;padding:20px 20px calc(28px + env(safe-area-inset-bottom));animation:kh-drawer .2s ease-out}.kh-mobile-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kh-mobile-link{min-height:44px}.kh-mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.kh-mobile-grid a{font-size:14px;min-height:42px;padding:8px;border-radius:6px}
.kh-sampleflag{font-size:11px;padding:5px 16px;text-align:center}.kh-section{padding:40px 0}.kh-section--top{padding-top:24px}.kh-section--tint{background:#f7f8fa}.kh-section-title,.kh-h2{font-family:var(--font-sans);font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.4}.kh-section-desc,.kh-page-desc{font-size:14px;color:var(--body);margin-top:8px}.kh-section-head{margin-bottom:20px;text-align:left;align-items:end}.kh-page-head{padding:32px 0 8px}.kh-page-title{font:700 27px/1.3 var(--font-sans);letter-spacing:-.025em}.kh-section-more{font-size:14px;margin-top:22px}.kh-section-head--center{text-align:left}
.kh-btn,.kh-hd-btn{border-radius:8px;font-weight:600;letter-spacing:-.01em;min-height:44px;padding-inline:18px;transition:background .15s,box-shadow .15s,transform .15s}.kh-btn--primary,.kh-hd-btn--fill{color:#fff;background:var(--blue);border-color:var(--blue)}.kh-btn--outline,.kh-hd-btn--outline{color:var(--ink);border:1px solid var(--line);background:#fff}.kh-chip{background:#f4f5f7;border:0;color:var(--body);border-radius:4px;font-size:12px;font-weight:500;padding:4px 7px}.kh-btn:active,.btn:active{transform:scale(.985)}
.kh-cards-grid,.kh-buyer-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.kh-cards-grid>li,.kh-buyer-grid>li,.cards>li{min-width:0}.kh-card{height:100%;position:relative;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:none;overflow:hidden;transition:border-color .16s,box-shadow .16s}.kh-card__link{display:flex;flex-direction:column;min-height:188px;padding:18px}.kh-card__where{margin:0;padding-right:28px;font-size:13px;font-weight:400;line-height:1.5;color:var(--sub);white-space:normal}.kh-card__title{font-size:17px;font-weight:600;color:var(--ink);line-height:25px;letter-spacing:-.01em;margin:5px 16px 0 0;min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.kh-card__price{display:flex;align-items:baseline;gap:7px;font-size:14px;margin-top:10px}.kh-card__price strong{color:var(--blue);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.kh-card__status{font-size:12px;font-weight:600;color:var(--blue);margin-left:auto}.kh-card__status.is-urgent{color:#e03f4c}.kh-card__tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:14px}.kh-card__tags span{background:#f4f5f7;border-radius:4px;color:#667282;font-size:11.5px;font-weight:600;padding:3px 7px;white-space:nowrap}.kh-card__foot{border:0;padding:0;margin:12px 0 0;font-size:12px;color:#8b95a1;display:flex;justify-content:space-between;gap:8px}.kh-card__fav{top:10px;right:10px;width:36px;height:36px;border:0;background:transparent;color:#a4adb9;z-index:2}.kh-card__fav svg{width:20px;height:20px}.kh-card__fav[aria-pressed=true]{color:var(--blue)}.kh-card__fav[aria-pressed=true] svg{fill:var(--brand-soft)}.kh-card.is-sold{background:#f7f8fa}
.kh-buyer{padding:20px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:none}.kh-buyer__budget{padding-bottom:14px;border-bottom:1px solid var(--line-2);display:flex;align-items:baseline;justify-content:space-between;gap:12px}.kh-buyer__budget span{font-size:13px;color:var(--sub)}.kh-buyer__budget strong{font-size:22px;color:var(--blue)}.kh-buyer__row{font-size:14px;margin-top:12px}.kh-buyer__row dt{font-size:13px}.kh-buyer__foot{font-size:12px;gap:8px;margin-top:18px}
.kh-listfilter{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;margin-bottom:20px}.kh-listfilter-main{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;background:#f4f5f7;border:0;padding:8px;border-radius:8px}.kh-listfilter-main input{width:100%;min-width:0;background:transparent;font-size:16px;outline:0;border:0;height:44px;padding:0}.kh-listfilter-main .kh-search-ico{position:static;width:20px;transform:none;color:var(--sub)}.kh-search-btn{background:var(--blue);color:#fff;border-radius:8px;height:44px;padding:0 15px;font-size:14px}.kh-listfilter-toggle{grid-column:1/-1;height:40px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:14px;margin:0}.kh-listfilter-detail{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-top:18px;margin-top:12px;border-top:1px solid var(--line)}.kh-field span{font-size:13px;color:var(--body)}.kh-select,.kh-input,.kh-textarea{border:1px solid var(--line);border-radius:8px;box-shadow:none;padding:12px;font-size:16px;min-width:0;max-width:100%;background:#fff}.kh-select,.kh-input{min-height:48px;width:100%}.kh-listfilter-actions{display:flex;align-items:end;gap:8px}.kh-listcount{font-size:14px;margin:0 0 16px}.kh-pager{margin-top:24px}.kh-pager a{border-radius:8px;min-width:44px;min-height:44px}
.kh-process{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--ink);margin-top:18px}.kh-process-item{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:20px 0;box-shadow:none;min-height:0}.kh-process-step{display:block;background:none;color:var(--blue);width:auto;height:auto;font-size:13px;font-weight:700}.kh-process-step:before{content:'STEP ';}.kh-process-title{font-size:17px;font-weight:600;margin:8px 0}.kh-process-desc{font-size:14px;color:var(--body);line-height:1.7}.kh-checklist-grid{display:grid;grid-template-columns:1fr;gap:22px}.kh-checklist-grid li{display:flex;gap:12px}.kh-checklist-grid strong{font-size:15px}.kh-checklist-grid span{font-size:14px;color:var(--body)}.kh-checklist-grid svg{width:20px;flex:0 0 20px;color:var(--blue)}
.kh-cta{padding:32px 0;background:#f7f8fa}.kh-cta-grid{display:grid;grid-template-columns:1fr;gap:16px}.kh-cta-card{padding:24px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);box-shadow:none}.kh-cta-title{font-size:24px;font-weight:700;line-height:1.35}.kh-cta-desc{font-size:14px;color:var(--body)}.kh-cta-eyebrow{font-size:12px;color:var(--blue)}
.kh-doc{max-width:900px;font-size:15px;line-height:1.85}.kh-doc h2{font-size:19px;font-weight:700;margin:32px 0 12px}.kh-empty{padding:56px 20px;text-align:center}.kh-empty-title{font-size:24px;font-weight:700}.kh-empty-desc{font-size:14px;max-width:460px;margin:12px auto 22px}.kh-empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.kh-form-layout{display:grid;grid-template-columns:1fr;gap:28px}.kh-form{gap:24px}.kh-fieldset{border:1px solid var(--line);border-radius:12px;background:#fff;padding:20px;min-width:0}.kh-fieldset-title{font-size:20px;font-weight:700}.kh-form-grid{grid-template-columns:1fr}.kh-field label{font-size:14px}.kh-form-error{font-size:13px;color:#d92b3e}.kh-success{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:12px;padding:26px}.kh-sidebox{background:#f7f8fa;border:1px solid var(--line);border-radius:12px;box-shadow:none;padding:22px}.kh-form-side-title{font-size:18px;font-weight:700}
.kh-footer{background:#f7f8fa;padding:32px 0;color:var(--body);margin-top:48px;border-top:1px solid var(--line)}.kh-footer-nav{display:flex;flex-wrap:wrap;gap:12px 20px;border-bottom:1px solid var(--line);padding-bottom:20px;font-size:13px}.kh-footer-body{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-top:24px}.kh-footer-brand{font-size:17px;font-weight:700;color:var(--ink)}.kh-footer-corp{font-size:12px;line-height:1.8;display:flex;flex-wrap:wrap;gap:2px 10px}.kh-footer-cs{text-align:left}.kh-footer-cs-tel{font-size:25px;font-weight:700;color:var(--ink)}.kh-footer-cs-time,.kh-footer-cs-mail,.kh-footer-copy{font-size:12px}.kh-footer-copy{margin-top:14px;color:var(--sub)}
.kh-fixed-cta{position:fixed;inset:auto 0 0;z-index:45;display:flex;gap:8px;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}.kh-fixed-cta__btn{height:48px;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:14px;font-weight:600}.kh-fixed-cta__btn--primary{background:var(--blue);color:#fff;border-color:var(--blue)}.kh-fixed-cta__btn svg{width:18px;height:18px}.kh-top-btn{bottom:calc(84px + env(safe-area-inset-bottom));right:16px;width:40px;height:40px;background:#fff;color:var(--body);border:1px solid var(--line);box-shadow:0 2px 10px #0001;border-radius:50%}
/* Home mobile layout keeps search first; illustrations support rather than delay it. */
.hero{padding-top:24px}.hero-in{display:flex;flex-direction:column;gap:12px;align-items:stretch}.hero-art{order:0;max-width:260px;margin:auto}.hero h1{font-size:27px}.hero-sub{font-size:14px}.search input{min-width:0}.cats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.cat{min-width:0}.cat span{font-size:12px}.cat img{width:52px;height:52px}.mkt{grid-template-columns:1fr}.mkt-box{min-width:0}.tlist .nm{min-width:0}.big4{gap:24px 16px;align-content:start}.big4 dd{font-size:26px}.sec{padding-top:44px}.sec-h h2{font-size:21px}.sec-h{align-items:center}.sec-h .more{font-size:12px}.promo{padding-inline:16px}.feat-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px}.fc{flex:0 0 85%;scroll-snap-align:start;min-width:0}.fc img{height:60px;width:60px}.cards{grid-template-columns:1fr}.faq summary{min-height:60px;font-size:15px}.faq summary:after{content:'+';color:var(--sub);font-size:22px;font-weight:400}.faq details[open] summary:after{content:'−'}.faq summary svg{display:none}.faq .a{font-size:14px;animation:kh-in .18s ease-out}.kh-home-panel:not([hidden]),[data-home-panel]:not([hidden]){animation:kh-in .2s ease-out}
@keyframes kh-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes kh-drawer{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
/* Progressive enhancement never hides content behind a scroll-trigger. */
.kh-reveal{opacity:1;transform:none}.kh-reveal.is-in{animation:kh-in .28s ease-out}
@media(min-width:640px){.kh-cards-grid,.cards,.kh-buyer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kh-listfilter-detail,.kh-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kh-listfilter-main{grid-template-columns:24px minmax(0,1fr) auto auto}.kh-listfilter-toggle{grid-column:auto;padding:0 14px}.kh-checklist-grid,.kh-cta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cats-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.kh-process{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.fc{flex-basis:46%}}
@media(min-width:1024px){:root{--header-h:72px}body{padding-bottom:0}.kh-container,.wrap{padding-inline:24px}.kh-header-inner{height:72px;gap:36px}.kh-header-logo-img{height:21px;max-width:210px}.kh-gnb{display:block}.kh-gnb>ul{gap:28px}.kh-gnb a,.kh-gnb-toggle{font-size:16px;font-weight:500;color:var(--ink)}.kh-header-burger{display:none}.kh-hd-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;min-height:40px;font-size:14px;padding:0 16px}.kh-header-right{gap:10px}.kh-hd-scrap{margin-right:10px}.kh-fixed-cta{display:none}.kh-section{padding:56px 0}.kh-section--top{padding-top:28px}.kh-page-head{padding-top:44px}.kh-page-title{font-size:32px}.kh-section-title{font-size:24px}.kh-cards-grid,.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.kh-buyer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.kh-card__link{min-height:202px}.kh-listfilter-detail{grid-template-columns:repeat(4,minmax(0,1fr))}.kh-listfilter-actions{grid-column:1/-1}.kh-process{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 20px}.kh-footer-body{flex-direction:row}.kh-footer-cs{text-align:right}.kh-footer{padding:40px 0 48px}.kh-top-btn{bottom:24px}.kh-form-layout{grid-template-columns:minmax(0,1fr) 300px}.hero{padding:48px 0 8px}.hero-in{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:32px;align-items:center}.hero h1{font-size:34px}.hero-art{max-width:none;order:0}.hero-sub{font-size:16px}.search{flex-wrap:wrap}.search select{flex:1 1 100px}.search input{flex:1 1 170px}.search .sep{display:none}.search .btn{padding:0 18px}.cats-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.cat span{font-size:13px}.mkt{grid-template-columns:1.15fr 1fr}.big4{align-content:space-evenly}.big4 dd{font-size:28px}.sec{padding-top:64px}.sec-h h2{font-size:24px}.promo{padding-inline:24px}.feat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.fc{min-height:110px}.fc img{width:76px;height:76px}.faq summary{font-size:16px}}
@media(hover:hover){.kh-card:hover{border-color:#cad2dd;box-shadow:0 4px 16px #0000000e}.kh-mobile-grid a:hover{background:#f4f5f7}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.kh-reveal{opacity:1!important;transform:none!important}}
.kh-guide-hero{display:flex;align-items:center;justify-content:space-between;gap:20px}.kh-guide-hero img{width:100px;height:100px;object-fit:contain;flex-shrink:0}.kh-guide-hero .kh-page-title{font-size:24px}.kh-guide-hero .kh-page-desc{max-width:600px}@media(min-width:1024px){.kh-guide-hero img{width:150px;height:150px}.kh-guide-hero .kh-page-title{font-size:32px}}
.dt-mobile-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}.dt-mobile-actions>*{flex:1}.dt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}.dt-grid>div{min-width:0}.side{display:none}.kstat{grid-template-columns:repeat(2,minmax(0,1fr))}.kstat dd{font-size:20px;overflow-wrap:anywhere}.kstat div:nth-child(3){border-left:0}.kstat div:nth-child(n+3){border-top:1px solid var(--line)}.cmp{font-size:13px}.cmp th,.cmp td{padding:12px 6px}.dt-head h1{font-size:26px}.dt-price strong{font-size:36px}.dt-sec .steps{grid-template-columns:1fr}.dt-sec .step{padding:18px 0;border-left:0}.dt-sec{overflow-wrap:anywhere}.kh-comparison-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.kh-comparison-scroll table{min-width:540px}
@media(min-width:1024px){.dt-mobile-actions{display:none}.dt-grid{grid-template-columns:minmax(0,1fr) 300px;gap:40px}.side{display:block;position:sticky;top:90px}.kstat{grid-template-columns:repeat(4,minmax(0,1fr))}.kstat div:nth-child(3){border-left:1px solid var(--line)}.kstat div:nth-child(n+3){border-top:0}.kstat div{padding:16px 12px}.kstat dd{font-size:20px}.dt-head h1{font-size:28px}.dt-price strong{font-size:40px}.dt-sec .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.cat-main{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;width:100%;min-height:78px;justify-content:center}.cat-sub{max-width:300px;min-width:220px}.cat-sub a{gap:12px}.cat:focus-within .cat-sub{display:block}.kh-autocomplete{position:relative;margin-top:28px}.kh-autocomplete .search-wrap{margin:0}.kh-suggest{position:absolute;left:0;right:0;top:100%;z-index:35;border:1px solid var(--line);background:white;border-radius:10px;box-shadow:0 8px 24px #0001;max-height:300px;overflow:auto;padding:6px}.kh-suggest a{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px;border-radius:6px;font-size:14px}.kh-suggest a:hover,.kh-suggest a:focus{background:#f4f5f7}.kh-suggest small{color:var(--sub);min-width:28px}.kh-hint{font-size:12px;color:var(--sub);line-height:1.6;margin-top:10px}.dt-compare-scroll .cmp{min-width:480px}.dt-sec .hint{font-size:12px;color:var(--sub);line-height:1.65;margin-top:10px}.crumb{flex-wrap:wrap;font-size:12px}.dt-head .card-where{display:flex;flex-wrap:wrap;font-size:13px;gap:6px}.kh-home-cards>.kh-card{min-width:0}
@media(max-width:639px){.bcards{grid-template-columns:1fr}.cta-btns .btn{padding:0 12px;font-size:14px}.kh-footer-corp span+span:before{display:none}.hero h1{font-size:25px}.pb h3{font-size:18px}.cat-sub{display:none!important}}
/* Step form: no-JS all fields visible; enhanced navigation is handled in JS. */
.kh-sr-only{position:absolute!important;width:1px;height:1px;padding:0!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0!important}.kh-page-head--form{padding-top:28px}.kh-page-head--form .kh-page-title{font-size:25px}.kh-form-layout--steps{max-width:1040px;gap:40px}.kh-stepwrap{gap:20px}.kh-form-errors:empty{display:none}.kh-form-errors:not(:has(p)){display:none}.kh-step-title{font-size:24px;line-height:1.4;letter-spacing:-.025em;font-weight:700;margin-bottom:8px}.kh-step-desc{font-size:14px;line-height:1.65;color:var(--body);margin-bottom:24px}.kh-step-pane .kh-fieldset{border:0;padding:0;border-radius:0;gap:22px}.kh-step-progress-heading{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);margin-bottom:10px}.kh-step-progress-heading b{color:var(--blue)}.kh-step-meter{height:4px;background:#e8edf4;border-radius:4px;overflow:hidden}.kh-step-meter span{height:100%;display:block;background:var(--blue);transition:width .22s ease}.kh-step-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.kh-step-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kh-step-options legend{margin-bottom:12px}.kh-step-option{position:relative;flex-direction:column;justify-content:center;align-items:center;border:1px solid var(--line);border-radius:10px;min-height:64px;padding:12px 8px;text-align:center;font-size:13px;transition:background .15s,border-color .15s}.kh-step-option input{position:absolute;top:6px;right:6px;width:14px;height:14px;opacity:.4}.kh-step-option:has(input:checked){border-color:var(--blue);background:var(--brand-soft);color:var(--blue)}.kh-step-option:has(input:checked) input{opacity:1}.kh-step-option:focus-within{outline:3px solid var(--brand-focus);outline-offset:2px}.kh-step-option img{height:42px;width:42px;object-fit:contain}.kh-step-nav{display:flex;gap:10px;margin-top:6px}.kh-step-nav .kh-btn{height:52px}.kh-step-nav [data-step-next],.kh-step-nav [data-step-submit]{flex:1}.kh-step-privacy{background:#f6f8fb;border-radius:8px;font-size:12px;line-height:1.65;color:var(--sub);padding:14px}.kh-step-pane.is-active{animation:kh-in .2s ease-out}.kh-form-side{border-top:1px solid var(--line);padding-top:24px}.kh-field-row{grid-template-columns:minmax(0,1fr);gap:20px}.kh-field input[type=text],.kh-field input[type=number],.kh-field input[type=tel],.kh-field select,.kh-field textarea{font-size:16px;min-height:50px}.kh-checkgroup .kh-check--inline{margin:0;min-height:42px;align-items:center;padding:8px;font-size:13px}.kh-checkgroup:has(.kh-check--inline){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.kh-checkgroup:has(.kh-check--inline) legend{grid-column:1/-1}.kh-field small{font-size:12px;color:var(--sub)}.kh-check input{min-width:18px}.kh-form-main{min-width:0}
@media(min-width:640px){.kh-step-options{grid-template-columns:repeat(3,minmax(0,1fr))}.kh-field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.kh-page-head--form .kh-container{max-width:1040px}.kh-form-side{border:1px solid var(--line);border-radius:12px;background:#f7f8fa;padding:22px;position:sticky;top:96px}.kh-page-head--form .kh-page-title{font-size:28px}.kh-form-layout--steps{grid-template-columns:minmax(0,1fr) 280px}.kh-step-title{font-size:26px}}
.kh-step-options{max-height:440px;overflow-y:auto;padding:4px;align-content:start}.kh-step-options legend{padding:0 0 10px}.kh-step-nav{position:sticky;bottom:78px;background:#fff;padding-top:12px;padding-bottom:8px;z-index:3}.kh-form-side .kh-steplist span{font-size:13px}.kh-step-option:has(img){min-height:100px}
@media(min-width:1024px){.kh-step-nav{bottom:0}.kh-step-options{max-height:480px}}
body[data-form="1"]{padding-bottom:0}body[data-form="1"] .kh-step-nav{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 -12px 18px #ffffffee}body[data-form="1"] .kh-top-btn{bottom:24px}
.kh-hd-tel{display:none;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2);margin-right:4px;white-space:nowrap}
@media(min-width:1180px){.kh-hd-tel{display:inline-flex}}
.kh-card__where{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kh-card__status{margin-left:0;font-size:12px;font-weight:600;color:var(--blue)}
.kh-card__status.is-urgent{color:#e03f4c}
.kh-home-cards .kh-card__title,.kh-cards-grid .kh-card__title{min-height:50px}

/* 2026-09-29 푸터 위 여백 제거 */
.kh-footer{margin-top:0}
/* 2026-09-29 이용안내: FAQ 제목 아래 여백, 하단 배너(메인과 동일한 매도·매수 배너), 모바일 절차 스와이프 */
body[data-page="guide"] #kh-guide-faq+.faq{margin-top:20px}
body[data-page="guide"] .kh-guide-promo{padding-top:48px;padding-bottom:64px}
body[data-page="guide"] .pb h3{font-size:clamp(23px,2.6vw,29px);font-weight:800;line-height:1.28;letter-spacing:-.035em}
body[data-page="guide"] .pb-eyebrow{font-size:13px;font-weight:750}
body[data-page="guide"] .pb-link{font-size:14px;font-weight:750}
@media(max-width:767px){
  body[data-page="guide"] .kh-guide-promo{padding-top:32px;padding-bottom:40px}
  body[data-page="guide"] .pb h3{font-size:21px}
  body[data-page="guide"] .kh-process{display:flex;gap:10px;margin:18px -16px 0;padding:6px 16px 10px;border-top:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  body[data-page="guide"] .kh-process::-webkit-scrollbar{display:none}
  body[data-page="guide"] .kh-process .kh-process-item{display:block;flex:0 0 72%;min-width:0;padding:20px 18px 22px;border:1px solid var(--line);border-radius:16px;background:#fff;scroll-snap-align:start}
  body[data-page="guide"] .kh-process .kh-process-step{margin-bottom:0}
}