/* ============================================================
   공간잇다 — 공간 대관 마켓플레이스 · 디자인 시스템 v3 (미드나잇 다크 프리미엄)
   딥 차콜 베이스 · 에메랄드 네온 액센트 · 글래스 카드 · 세리프 디스플레이
   ============================================================ */
:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e6e9ef;
  --line-2: #eef1f5;
  --accent: #4f46e5;
  --accent-2: #6366f1;
  --accent-soft: #eef2ff;
  --dark: #0f1729;
  --gold: #d9a441;
  --ok: #059669;
  --warn: #d97706;
  --info: #2563eb;
  --radius: 18px;
  --radius-sm: 14px;
  --shadow-sm: 0 4px 16px -8px rgba(15, 23, 42, 0.12);
  --shadow: 0 16px 40px -18px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 30px 70px -28px rgba(15, 23, 42, 0.28);
  --glow: 0 0 0 1px rgba(79, 70, 229, 0.18), 0 10px 30px -10px rgba(79, 70, 229, 0.45);
  --header-h: 70px;
  --serif: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/*  ⚠ display 를 지정한 요소는 hidden 속성만으로 안 숨는다. 클래스마다 따로 적어 오다
    .empty-state 가 빠져 "검색 결과가 없습니다" 가 결과 4건과 함께 315px 를 차지했다
    (2026-08-14 실측). 여기서 한 번에 막는다 — 개별 [hidden] 규칙을 새로 추가하지 말 것. */
[hidden] { display: none !important; }
img, svg, video, canvas, iframe { max-width: 100%; }
html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }
body {
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  overflow-x: clip;
  max-width: 100%;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
input, select { font-family: inherit; }

/*  ── 숫자 인풋의 위/아래 화살표(스핀 버튼)를 없앤다 ─────────────────────────
    금액 칸에서 1원 단위로 오르내리는 화살표는 쓸 일이 없고 오른쪽 폭만 먹는다
    (150,000원 같은 값에서 특히 그렇다). 모바일에서는 브라우저가 아예 안 그린다 —
    즉 PC 에서만 보이는 군더더기였다.
    ⚠ 값을 못 바꾸게 하는 게 아니다. **버튼만 사라지고** 키보드 ↑↓ 는 그대로 듣는다.
    ⚠ 전역이다. 수량·인원·시간 칸의 화살표도 함께 사라진다 — 의도한 것이다
      (같은 이유로 군더더기이고, 한 곳만 고치면 화면마다 달라 보인다).
    ⚠ 전에는 `.qt__t`(견적서 표) **한 곳에만** 같은 규칙이 있었다. 사본을 늘리지 않고
      여기로 올렸다 — 그쪽에서는 지웠다.  */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
/*  파이어폭스 — 구형은 -moz-appearance, 최신은 표준 appearance 를 본다 */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
em { font-style: normal; }
::selection { background: var(--accent); color: #fff; }
::placeholder { color: var(--faint); opacity: 1; }

/* ================= 버튼 ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-size: 0.92rem; font-weight: 700; transition: all 0.2s ease; white-space: nowrap; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: #4338ca; transform: translateY(-1px); box-shadow: var(--glow); }
.btn--outline { border: 1.5px solid var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); }
.btn--sm { padding: 9px 16px; font-size: 0.85rem; }
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--block { width: 100%; }
/* 폼을 끝내는 버튼 — 위 여백을 줄이면서도 '여기서 끝난다' 가 분명해야 한다.
   높이·굵기·그림자로 세운다(색은 이미 브랜드 채우기다) */
.btn--submit { padding-top: 16px; padding-bottom: 16px; font-size: 1.02rem; font-weight: 800;
  letter-spacing: -0.01em; border-radius: 12px; margin-top: 4px;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28); }
.btn--submit:hover { box-shadow: 0 6px 18px rgba(79, 70, 229, 0.34); }

/* ================= 헤더 ================= */
.header { position: sticky; top: 0; z-index: 100; background: rgba(247, 248, 250, 0.72); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s, background 0.2s; }
.header.is-scrolled { background: rgba(247, 248, 250, 0.9); border-bottom-color: var(--line); }
.header__inner { max-width: 1220px; margin: 0 auto; height: var(--header-h); padding: 0 32px; display: flex; align-items: center; gap: 22px; }
.logo { display: flex; align-items: center; gap: 9px; font-size: 1.34rem; font-weight: 700; letter-spacing: 0; font-family: var(--serif); flex-shrink: 0; white-space: nowrap; }
.logo__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.header__nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.header__link { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); transition: color 0.15s; white-space: nowrap; }
/* 사업자 등록 내비: 기본 숨김 → auth.js가 비로그인/호스트/파트너에게만 표시 (새로고침 깜빡임 방지) */
.js-host-nav { display: none; }
.header__link:hover { color: var(--accent); }
.header__sep { width: 1px; height: 18px; background: var(--line); }
.hmenu { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 42px; height: 40px; margin-left: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.hmenu span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: 0.2s; }
.hmenu.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hmenu.is-open span:nth-child(2) { opacity: 0; }
.hmenu.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* 메뉴가 한 줄에 안 들어가는 중간 너비(≤1024)에서는 햄버거로 접기 */
@media (max-width: 1024px) {
  .header__nav { display: none; }
  .hmenu { display: flex; }
  .header__nav.is-open { display: flex; position: absolute; top: 100%; right: 12px; left: 12px; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px; margin-top: 6px; margin-left: 0; }
  .header__nav.is-open .header__link, .header__nav.is-open .btn { width: 100%; padding: 12px; text-align: left; }
  .header__nav.is-open .header__sep { display: none; }
  .header__nav.is-open .auth-area { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; padding-top: 6px; border-top: 1px solid var(--line-2); margin-top: 4px; }
  .header__nav.is-open .auth-area .header__link { padding: 10px 12px; }
  .header__nav.is-open .auth-name { width: 100%; text-align: center; padding: 8px 12px; }
  .header__nav.is-open .bell-wrap { align-self: flex-start; }
}

/* ================= 히어로 (밝은 스플릿 + 사진 콜라주) ================= */
.hero { overflow: hidden; background: radial-gradient(900px 480px at 78% -10%, rgba(99, 102, 241, 0.10) 0%, transparent 58%), var(--bg); }
.hero__inner { max-width: 1180px; margin: 0 auto; padding: 40px 32px 40px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.hero__eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em; color: var(--accent); background: var(--accent-soft); padding: 6px 13px; border-radius: 999px; }
.hero__title { font-size: 2.4rem; font-weight: 800; line-height: 1.22; letter-spacing: -0.035em; margin: 15px 0 13px; color: var(--ink); }
.hero__title em { color: var(--accent); font-style: normal; }
.hero__sub { font-size: 0.98rem; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* 검색 바 */
.searchbar { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 8px 8px 8px 6px; box-shadow: var(--shadow-lg); max-width: 900px; }
.searchbar__field { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; border-radius: 13px; transition: background 0.15s; min-width: 0; cursor: text; }
.searchbar__field:hover { background: var(--surface-2); }
.searchbar__field--sm { flex: 0 0 116px; }
.searchbar__div { width: 1px; height: 30px; background: var(--line-2); flex-shrink: 0; }
.searchbar__label { font-size: 0.7rem; font-weight: 700; color: var(--ink-2); padding-left: 26px; letter-spacing: 0.02em; }
.searchbar__input { display: flex; align-items: center; gap: 8px; }
.searchbar__input .ic { color: var(--accent); flex-shrink: 0; }
.searchbar__input input, .searchbar__input select { flex: 1; border: none; outline: none; background: none; font-size: 0.95rem; font-weight: 600; color: var(--ink); min-width: 0; }
.searchbar__input input::placeholder { color: var(--faint); font-weight: 500; }
.searchbar__go { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.searchbar__go:hover { background: #4338ca; }

.hero__stats { display: flex; gap: 28px; margin-top: 24px; }
.hero__stats strong { font-size: 1.35rem; font-weight: 800; display: block; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.hero__stats span { font-size: 0.78rem; color: var(--muted); margin-top: 6px; display: block; }

/* 히어로 사진 콜라주 */
.hero__gallery { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero__gcol { display: flex; flex-direction: column; gap: 12px; }
.hero__gcol:last-child { padding-top: 26px; }
.hero__gcol img { width: 100%; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow-sm); display: block; }
.hero__gcol:first-child img:first-child { height: 168px; }
.hero__gcol:first-child img:last-child { height: 128px; }
.hero__gcol:last-child img:first-child { height: 140px; }
.hero__gcol:last-child img:last-child { height: 176px; }
.hero__chip { position: absolute; left: -12px; bottom: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 999px; padding: 9px 15px; font-weight: 800; font-size: 0.84rem; color: var(--ink); }

/* ===== 목적 온보딩 히어로 ===== */
.hero--intent { background: radial-gradient(1000px 560px at 50% -12%, rgba(99, 102, 241, 0.12) 0%, transparent 60%), radial-gradient(700px 400px at 88% 6%, rgba(59, 130, 246, 0.07) 0%, transparent 55%), var(--bg); }
.hero--intent .hero__inner { display: block; grid-template-columns: none; max-width: 900px; margin: 0 auto; padding: 30px 24px 14px; text-align: center; }
.hero--intent .hero__eyebrow { background: linear-gradient(92deg, var(--accent), var(--accent-2)); border: 0; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: 0.01em; padding: 9px 18px; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28); }
@media (max-width: 560px) { .hero--intent .hero__eyebrow { font-size: 0.86rem; padding: 8px 15px; white-space: normal; } }
/* '공간잇다' 브랜드 강조 (그라데이션 텍스트) */
.brand-ink { font-weight: 800; white-space: nowrap; background: linear-gradient(92deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* 실시간 활성도 티커 */
.livebar { display: inline-flex; align-items: center; gap: 9px; margin: 0 auto 20px; padding: 7px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 0.84rem; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.livebar__dot { width: 7px; height: 7px; border-radius: 50%; background: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2); flex-shrink: 0; animation: nowpulse 1.8s ease-in-out infinite; }
.livebar__txt { transition: opacity 0.25s; }
.livebar__txt b { color: var(--ink); font-weight: 800; }
/* 제목 옆 인라인 실시간 배지 */
.livebar--inline { display: inline-flex; vertical-align: middle; margin: 0 0 4px 10px; padding: 5px 12px; font-size: 0.78rem; box-shadow: none; }
@media (max-width: 560px) { .livebar--inline { display: flex; margin: 8px 0 0; width: fit-content; } }
.hero--intent .hero__title { font-family: var(--serif); font-weight: 700; font-size: 2.3rem; letter-spacing: -0.02em; margin: 14px auto 4px; }
.hero--intent .hero__sub { font-size: 0.98rem; margin-bottom: 20px; }
.intent { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 760px; margin: 0 auto; }
.intent__chip { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 108px; padding: 12px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); font-weight: 700; font-size: 0.84rem; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.intent__chip:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--ink); }
.intent__ic { width: 42px; height: 42px; border-radius: 50%; background: var(--tint); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.intent__ic .ic { width: 20px; height: 20px; stroke-width: 1.7; }
.hero__ways { margin-top: 16px; font-size: 0.9rem; color: var(--muted); }
.hero__ways a { color: var(--ink-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.hero__ways a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.hero--intent .hero__stats { justify-content: center; margin-top: 16px; }
@media (max-width: 760px) {
  .hero--intent .hero__inner { padding: 20px 14px 6px; }
  .hero--intent .hero__title { font-size: 1.85rem; }
  .hero--intent .hero__sub { font-size: 0.9rem; margin-bottom: 10px; }
  .intent { gap: 7px; }
  .intent__chip { width: calc(33.333% - 7px); padding: 11px 6px; font-size: 0.8rem; }
  .intent__ic { width: 38px; height: 38px; }
}

/* ===== 결정 중심 3갈래 히어로 (레거시) ===== */
.hero--decide { background: radial-gradient(1100px 460px at 50% -12%, rgba(99, 102, 241, 0.11) 0%, transparent 62%), var(--bg); }
.hero--decide .hero__inner { display: block; grid-template-columns: none; max-width: 1000px; margin: 0 auto; padding: 40px 24px 34px; text-align: center; }
.hero--decide .hero__title { font-size: 2.3rem; margin: 12px auto 10px; }
.hero--decide .hero__sub { font-size: 1rem; margin-bottom: 24px; }
.hero--decide .hero__stats { justify-content: center; margin-top: 30px; }
@media (max-width: 760px) {
  .hero--decide .hero__inner { padding: 26px 14px 22px; }
  .hero--decide .hero__title { font-size: 1.6rem; }
  .hero--decide .hero__sub { font-size: 0.9rem; margin-bottom: 18px; }
  .hero--decide .hero__stats { margin-top: 18px; gap: 20px; }
  .section { padding: 24px 16px; }
  .section__title { font-size: 1.35rem; }
}

/* 라이트 배경 검색 바 (카테고리 위) */
.section--search { padding-top: 6px; padding-bottom: 16px; }
.searchbar--light { max-width: none; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
/* 통합 검색 박스 */
/* 목적 탭 + 검색박스 일체형 */
.searchwrap { max-width: 900px; margin: 0 auto; }
.intent-tabs { display: flex; justify-content: safe center; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 14px; touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.intent-tabs::-webkit-scrollbar { display: none; }
.intent-tab { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 10px 16px; font-size: 0.86rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-bottom: none; border-radius: 13px 13px 0 0; white-space: nowrap; transition: color 0.15s, background 0.15s; position: relative; top: 1px; touch-action: pan-x; }
.intent-tab__ic { display: inline-flex; color: var(--ink-2); }
.intent-tab:hover { color: var(--accent); background: var(--surface); }
.intent-tab:hover .intent-tab__ic { color: var(--accent); }
.searchwrap .searchbox { max-width: none; border-radius: 4px 18px 18px 18px; position: relative; z-index: 1; }
@media (max-width: 560px) { .intent-tab { padding: 9px 13px; font-size: 0.8rem; } .searchwrap .searchbox { border-radius: 14px; } }
.searchbox { max-width: 900px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 13px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.searchbox .searchbar { box-shadow: none; border: 1px solid var(--line); border-radius: 15px; margin: 0; }
.searchbox .ai-box { margin: 0; }
.searchbox .searchbar__go { box-shadow: none; }
/* AI 추천 강조 — 연한 인디고 배경 + 반짝임으로 스마트 기능 구분 */
.ai-box--hl { background: linear-gradient(100deg, rgba(99, 102, 241, 0.09), rgba(59, 130, 246, 0.07)); border: 1px solid rgba(79, 70, 229, 0.22); box-shadow: none; }
.ai-box--hl .ai-box__tag { color: var(--accent); font-weight: 800; white-space: nowrap; }
.ai-box__spark { display: inline-block; animation: aiSpark 2.2s ease-in-out infinite; }
@keyframes aiSpark { 0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(12deg); } }
.ai-box--hl input::placeholder { color: rgba(79, 70, 229, 0.55); }
/* 공간+렌탈 패키지 퀵 배너 */
/* 프로모션 배너 캐러셀 */
.promo { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px -14px rgba(79,70,229,0.5); }
.promo__track { display: flex; transition: transform 0.55s cubic-bezier(0.4, 0, 0.15, 1); }
.promo__slide { position: relative; flex: 0 0 100%; display: flex; align-items: center; gap: 13px; padding: 16px 18px; min-height: 68px; color: #fff; text-decoration: none; overflow: hidden; }
.promo__slide--a { background: linear-gradient(105deg, #4f46e5, #7c6cf0 55%, #9d7bf5); }
.promo__slide--b { background: linear-gradient(105deg, #db2777, #f0577f 55%, #f7896a); }
.promo__slide--c { background: linear-gradient(105deg, #0e7490, #1597b8 55%, #34b3c4); }
.promo__deco { position: absolute; right: -6px; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: 4.4rem; opacity: 0.22; line-height: 1; pointer-events: none; }
.promo__badge { flex-shrink: 0; align-self: flex-start; margin-top: 2px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; background: rgba(255,255,255,0.22); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 999px; }
.promo__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; z-index: 1; }
.promo__tx b { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.promo__tx span { font-size: 0.82rem; opacity: 0.95; }
.promo__tx span em { font-style: normal; font-weight: 800; background: rgba(255,255,255,0.24); padding: 1px 6px; border-radius: 6px; }
.promo__cta { flex-shrink: 0; align-self: center; font-weight: 800; font-size: 0.84rem; white-space: nowrap; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4); padding: 8px 14px; border-radius: 999px; z-index: 1; transition: background 0.15s; }
.promo__slide:hover .promo__cta { background: rgba(255,255,255,0.3); }
.promo__dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.promo__dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.5); transition: width 0.2s, background 0.2s; }
.promo__dot.is-on { width: 18px; background: #fff; }
@media (max-width: 560px) { .promo__cta { display: none; } .promo__tx b { font-size: 0.9rem; } .promo__tx span { font-size: 0.74rem; } .promo__deco { font-size: 3.4rem; } }
/*  ── 메인 리뉴얼 ─────────────────────────────────────────────────────────
    히어로와 검색이 별개 섹션이라 첫 화면에 '행동할 요소'가 없었다.
    하나로 합쳐 카피 아래 바로 검색·견적요청이 오게 한다. */
.hero--intent.section--search { padding-bottom: 22px; }
.hero--intent.section--search .hero__inner { padding: 28px 24px 16px; }
.hero--intent.section--search .hero__title { margin-bottom: 0; }
/* 프로모션 — 캐러셀에서 한 줄 배너로 (높이 축소) */
.promo--slim { border-radius: 13px; box-shadow: 0 6px 18px -10px rgba(79, 70, 229, 0.45); }
.promo--slim .promo__slide { min-height: 56px; padding: 12px 16px; }
.promo--slim .promo__tx b { font-size: 0.92rem; }
.promo--slim .promo__tx span { font-size: 0.77rem; }
.promo--slim .promo__dots { bottom: 6px; }
/*  2트랙 분기 — A(검색)는 위 검색바, B(견적 요청)는 이 카드.
    예전에는 B트랙 진입이 페이지 한참 아래 '이용방법'에만 있어 사실상 숨어 있었다. */
.tracks { margin-top: 10px; }
.tracks__b { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color 0.15s, transform 0.15s; }
.tracks__b:hover { border-color: var(--accent); transform: translateY(-1px); }
.tracks__ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.tracks__tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tracks__tx b { font-size: 0.92rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.tracks__tx span { font-size: 0.79rem; color: var(--muted); line-height: 1.5; }
.tracks__go { flex-shrink: 0; font-size: 1.05rem; font-weight: 800; color: var(--accent); }
/* 신뢰 지표 — 실제로 세어진 값만 (허구 수치 금지) */
.trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.trust__i { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 1px; align-items: center; padding: 10px 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 11px; }
.trust__i strong { font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.trust__i span { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-align: center; word-break: keep-all; }
/* 특가 필터 칩 — 번개특가 섹션을 대신한다 */
.chip--flash { color: #b91c1c; border-color: #fecaca; background: #fef2f2; display: inline-flex; align-items: center; gap: 4px; }
.chip--flash svg { flex-shrink: 0; }
.chip--flash.is-active { background: #b91c1c; border-color: #b91c1c; color: #fff; }
/* 이용 방법 — 재방문자에겐 불필요하므로 접이식 */
@media (max-width: 560px) {
  .hero--intent.section--search .hero__inner { padding: 22px 18px 14px; }
  .trust__i { flex: 1 1 calc(50% - 4px); }
  .tracks__b { gap: 10px; padding: 12px 13px; }
  .tracks__ic { width: 34px; height: 34px; }
}
/*  메인 섹션의 영문 장식(kicker) 제거에 따른 여백 보정.
    kicker 는 2026-08-21 에 전 페이지에서 제거했다(사용자 지시). 이 여백 보정만 남는다.
    kicker(글자 높이 + margin-bottom 8px ≈ 22px)가 빠진 만큼 제목 위 여백을 되돌려 준다. */
.section--svc .section__head,
.section--browse .section__head { align-items: center; margin-bottom: 18px; }
.section--svc .section__title,
.section--browse .section__title { margin-top: 6px; line-height: 1.3; }
.section--svc { padding-top: 34px; }
/* 접이식 이용방법 — kicker 가 빠져 제목만 남으므로 요약행 높이를 맞춘다 */
/*  ── 관리자 '데이터 수집' 탭 ─────────────────────────────────────────────── */
.ad-tblwrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.ad-tbl { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 620px; }
.ad-tbl thead th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-size: 0.74rem; font-weight: 800; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.ad-tbl th.r, .ad-tbl td.r { text-align: right; }
.ad-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.ad-tbl tbody tr:last-child td { border-bottom: 0; }
.ad-tbl tbody tr:hover { background: var(--surface-2); }
.ad-tbl td b { color: var(--ink); font-weight: 800; }
.ad-sub { display: block; font-style: normal; font-size: 0.7rem; font-weight: 600; color: var(--faint); margin-top: 1px; }
.dcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; color: var(--ink-2); }
/* 전환 퍼널 */
.dfun { display: flex; flex-direction: column; gap: 7px; }
.dfun__r { display: flex; align-items: center; gap: 10px; }
.dfun__l { flex: 0 0 130px; font-size: 0.82rem; font-weight: 700; color: var(--ink-2); }
.dfun__bar { flex: 1 1 auto; min-width: 0; height: 22px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.dfun__bar b { display: block; height: 100%; background: linear-gradient(92deg, var(--accent), var(--accent-2)); border-radius: 6px; transition: width 0.3s; }
.dfun__n { flex: 0 0 62px; text-align: right; font-size: 0.84rem; font-weight: 800; color: var(--ink); }
.dfun__p { flex: 0 0 54px; text-align: right; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
/* 분포 막대 */
.dbars { display: flex; flex-direction: column; gap: 6px; }
.dbars__r { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; }
.dbars__r > span { flex: 0 0 96px; font-weight: 700; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbars__r i { flex: 1 1 auto; min-width: 0; height: 16px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.dbars__r i b { display: block; height: 100%; background: var(--accent); border-radius: 5px; opacity: 0.75; }
.dbars__r em { flex: 0 0 auto; font-style: normal; font-size: 0.76rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .dfun__l { flex: 0 0 88px; font-size: 0.76rem; }
  .dfun__n { flex: 0 0 48px; font-size: 0.78rem; }
  .dfun__p { flex: 0 0 42px; font-size: 0.72rem; }
  .dbars__r > span { flex: 0 0 74px; font-size: 0.76rem; }
}
/* 컴팩트 섹션 헤더 */
.section__head--tight { margin: 26px 0 12px; }
.section__title--sm { font-size: 1.3rem; }
.section--browse { padding-top: 20px; }   /* kicker 제거로 줄어든 상단 여백 보정 */
.host { margin-top: 8px; }

/* ================= 섹션 공통 ================= */
.section { max-width: 1180px; margin: 0 auto; padding: 32px 32px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.section__title { font-family: inherit; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.section__sub { font-size: 0.9rem; color: var(--muted); }

/* ================= 카테고리 ================= */
.cats { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: 0 0 auto; width: 148px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; background: none; border: none; box-shadow: none; cursor: pointer; text-align: center; }
.cat__img { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--tint); display: flex; align-items: center; justify-content: center; transition: box-shadow 0.18s, transform 0.18s; }
.cat__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat__img .ic { color: var(--ink); position: relative; z-index: 0; }
.cat:hover .cat__img { transform: translateY(-3px); box-shadow: var(--shadow); }
@media (max-width: 560px) { .cat { width: 124px; } }
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat__ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; transition: transform 0.22s; }
.cat:hover .cat__ic { transform: scale(1.08) rotate(-3deg); }
.cat__ic .ic { width: 19px; height: 19px; }
.cat__label { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }

/* ================= 칩 (필터) ================= */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 9px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); transition: all 0.15s; }
.chip:hover { color: var(--ink); border-color: var(--faint); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ================= 공간 카드 ================= */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 20px; }
.sp-card { background: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; box-shadow: none; transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1); cursor: pointer; }
.sp-card:hover { transform: translateY(-4px); }
.sp-card:hover .sp-card__thumb { box-shadow: var(--shadow); }
.sp-card__thumb { border-radius: 16px; position: relative; aspect-ratio: 4 / 3; overflow: hidden; transition: box-shadow 0.2s; }
.sp-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); z-index: 1; }
/* 브랜드 기본 썸네일 (이미지 없음/로드 실패 시 노출) */
.sp-ph { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; }
.sp-ph__mark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: rgba(255, 255, 255, 0.92); letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); }
.sp-ph__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28); }
.sp-ph--lg .sp-ph__mark { font-size: 1.8rem; gap: 11px; }
.sp-ph--lg .sp-ph__dot { width: 14px; height: 14px; }
.sp-card:hover .sp-card__thumb img { transform: scale(1.07); }
.sp-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 800; color: #fff; background: rgba(23, 20, 15, 0.5); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 999px; letter-spacing: 0.02em; line-height: 1; }
.sp-card__badge i { width: 6px; height: 6px; border-radius: 50%; background: #64e6a6; box-shadow: 0 0 0 3px rgba(100, 230, 166, 0.3); display: inline-block; }
/* 즉시예약 배지 — 대비 강화 */
.sp-card__badge--now { background: #059669; box-shadow: 0 4px 12px -4px rgba(5, 150, 105, 0.6); font-size: 0.74rem; padding: 6px 12px; }
.sp-card__badge--now i { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); animation: nowpulse 1.8s ease-in-out infinite; }
@keyframes nowpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.sp-card__heart { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all 0.15s; }
.sp-card__heart:hover { color: var(--accent); transform: scale(1.1); }
.sp-card__heart.is-on { color: var(--accent); }
.sp-card__heart.is-on .ic { fill: var(--accent); }
.sp-card__body { padding: 12px 2px 2px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 128px; }
.sp-card__name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sp-card__cat { font-size: 0.72rem; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; }
.sp-card__name { font-size: 1.05rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.35; }
.sp-card__meta { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--muted); flex-wrap: nowrap; }
.sp-card__meta .ic { width: 14px; height: 14px; color: var(--faint); flex-shrink: 0; }
.sp-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.sp-card__loc { flex: 1; min-width: 0; }
.sp-card__loctxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-card__cap { flex-shrink: 0; }
.sp-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 8px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
/* 카드 태그 줄 — 높이 균일화 */
.sp-tags--row { min-height: 24px; margin-top: 7px; }
.optag--pkg { color: var(--info); background: rgba(37, 99, 235, 0.1); }
.optag--ghost { color: var(--faint); background: var(--surface-2); font-weight: 600; }
.sp-card__price { font-family: "Pretendard Variable", "Pretendard", sans-serif; font-size: 1.28rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; white-space: nowrap; }
.sp-card__price span { font-size: 0.72rem; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.sp-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 700; color: var(--ink-2); flex-shrink: 0; white-space: nowrap; }
.sp-card__rating .ic { width: 14px; height: 14px; color: var(--gold); fill: var(--gold); }
.sp-card__rating em { color: var(--faint); font-weight: 500; }

/* ================= 플래그십 ================= */
.flag { max-width: 1220px; margin: 0 auto; padding: 0 32px; }
.flag__inner { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--surface); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.flag__media { position: relative; min-height: 380px; overflow: hidden; }
.flag__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flag__mediascrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(23,20,15,0.35), rgba(23,20,15,0) 60%); }
.flag__tag { position: absolute; top: 22px; left: 22px; z-index: 2; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; color: #fff; background: var(--accent); padding: 7px 14px; border-radius: 999px; }
.flag__body { padding: 52px 50px; display: flex; flex-direction: column; justify-content: center; }
.flag__eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; color: var(--accent); }
.flag__title { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.025em; margin: 12px 0 14px; line-height: 1.3; }
.flag__desc { font-size: 0.96rem; color: var(--muted); line-height: 1.75; margin-bottom: 26px; }
.flag__spec { display: flex; gap: 34px; margin-bottom: 30px; }
.flag__spec div strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; display: block; }
.flag__spec div span { font-size: 0.8rem; color: var(--muted); margin-top: 2px; display: block; }

/* ================= 호스트 CTA ================= */
.host { max-width: 1220px; margin: 46px auto 0; padding: 0 32px; }
.host__inner { position: relative; overflow: hidden; background: var(--dark); color: #fff; border-radius: 26px; padding: 66px 44px; text-align: center; }
.host__inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 0%, rgba(207, 122, 95, 0.22), transparent 60%); }
.host__title { position: relative; font-family: var(--serif); font-size: 2.35rem; font-weight: 600; margin: 0 0 16px; letter-spacing: -0.025em; line-height: 1.3; }
.host__sub { position: relative; color: rgba(255, 255, 255, 0.72); line-height: 1.75; margin-bottom: 32px; }
.host__actions { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.host__note { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }

/* ================= 푸터 ================= */
.footer { margin-top: 92px; background: var(--surface); border-top: 1px solid var(--line-2); }
.footer__inner { max-width: 1220px; margin: 0 auto; padding: 58px 32px 38px; display: grid; grid-template-columns: 1.3fr 2fr; gap: 44px; }
.logo--footer { font-size: 1.2rem; }
.footer__desc { color: var(--muted); font-size: 0.9rem; margin: 14px 0 6px; }
.footer__co { color: var(--faint); font-size: 0.82rem; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__col h4 { font-size: 0.82rem; font-weight: 800; margin-bottom: 14px; letter-spacing: 0.02em; }
.footer__col a { display: block; font-size: 0.86rem; color: var(--muted); padding: 5px 0; transition: color 0.15s; }
.footer__col a:hover { color: var(--accent); }
.footer__copy { max-width: 1220px; margin: 0 auto; padding: 20px 32px; border-top: 1px solid var(--line-2); font-size: 0.8rem; color: var(--faint); }
.footer__legal { max-width: 1220px; margin: 0 auto; padding: 14px 32px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; border-top: 1px solid var(--line-2); }
.footer__legal a { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.footer__legal a:hover { color: var(--accent); }
.footer__legal a.is-strong { color: var(--ink-2); font-weight: 800; }
.footer__legal-sep { color: var(--line); font-size: 0.75rem; }
.footer__legal + .footer__biz { border-top: 0; }
.footer__biz { max-width: 1220px; margin: 0 auto; padding: 8px 32px 0; }
.footer__biz-row { margin: 1px 0; font-size: 0.75rem; color: var(--faint); line-height: 1.5; }
.footer__biz-row b { color: var(--muted); font-weight: 700; }
.footer__biz-broker { margin: 5px 0 0; font-size: 0.74rem; color: var(--faint); line-height: 1.45; word-break: keep-all; }
.footer__biz + .footer__copy { border-top: 0; padding-top: 8px; }
.footer__legal + .footer__copy { border-top: 0; padding-top: 10px; }
body[data-require="admin"] .footer__legal, body[data-require="admin"] .footer__biz { max-width: none; margin: 0; padding-left: 40px; }
/* 관리자: 푸터를 최대한 컴팩트하게 */
body[data-require="admin"] .footer { margin-top: 28px; }
body[data-require="admin"] .footer__legal { padding-top: 12px; padding-bottom: 0; gap: 3px 8px; }
body[data-require="admin"] .footer__legal a { font-size: 0.78rem; }
body[data-require="admin"] .footer__biz { padding-top: 6px; }
body[data-require="admin"] .footer__biz-row, body[data-require="admin"] .footer__biz-broker { font-size: 0.72rem; margin: 1px 0; }
body[data-require="admin"] .footer__copy { padding-top: 6px; padding-bottom: 16px; font-size: 0.74rem; }

/* ================= 토스트 ================= */
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 14px 24px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 300; animation: toastin 0.25s ease; }
.toast[hidden] { display: none; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============================================================
   상세 · 예약 페이지 (space.html)
   ============================================================ */
.sp { max-width: 1180px; margin: 0 auto; padding: 26px 32px 90px; }
.sp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--muted); margin-bottom: 18px; }
.sp-back:hover { color: var(--ink); }
.sp-gallery { position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; border-radius: 20px; overflow: hidden; height: 440px; margin-bottom: 30px; }
.sp-gallery__main { grid-row: 1 / 3; position: relative; overflow: hidden; }
.sp-gallery__sm { position: relative; overflow: hidden; }
.sp-gallery img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.sp-gallery__main:hover img, .sp-gallery__sm:hover img { transform: scale(1.05); }
.sp-gallery__nav { display: none; }
/* 데스크톱: 격자에는 대표 + 보조 2장만 놓는다. 나머지는 '모두 보기' 버튼(모달)과
   모바일 캐러셀에서 본다.
   ⚠ 선택자를 .sp-gallery__sm 으로 좁혔다. 예전엔 > *:nth-child(n+4) 라서 갤러리 안에
     버튼 같은 다른 자식을 넣으면 그것까지 같이 숨었다. */
@media (min-width: 761px) { .sp-gallery > .sp-gallery__sm:nth-child(n+4) { display: none; } }
/* 사진 N장 모두 보기 — 모바일은 캐러셀로 전부 볼 수 있어 감춘다 */
.sp-gallery__more { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex;
  align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 0.86rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.14); transition: transform .15s; }
.sp-gallery__more:hover { transform: translateY(-1px); }
.sp-gallery__more .ic { width: 15px; height: 15px; }
@media (max-width: 760px) { .sp-gallery__more { display: none; } }
/* 전체 사진 모달
   ⚠ .modal__card 는 전역 max-width:420px 다. 갤러리는 사진을 봐야 하는 화면이라
     그 폭으로는 우표만큼 작아진다. 그래서 갤러리일 때만 아래 클래스로 넓힌다.
     (닫을 때 클래스를 떼지 않으면 공유·예약 확인 모달까지 넓어진다 — galClose 참조) */
.modal__card--gal { max-width: min(1140px, 95vw); max-height: 94vh; padding: 14px 16px 16px; }
.sp-galhint { margin: 0 0 10px; font-size: 0.8rem; color: var(--faint); }
.sp-galgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
  max-height: 78vh; overflow-y: auto; }
.sp-galgrid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; cursor: zoom-in;
  background: var(--surface-2); transition: transform .15s, box-shadow .15s; }
.sp-galgrid img:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
/* 크게 보기 — 좌우 넘기기 + 썸네일 띠 */
.sp-galview { position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border-radius: 12px; overflow: hidden; }
.sp-galbig { display: block; width: 100%; max-height: 74vh; object-fit: contain; }
.sp-galnav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.94); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,.18); transition: background .15s; }
.sp-galnav:hover { background: #fff; }
.sp-galnav--prev { left: 12px; }
.sp-galnav--next { right: 12px; }
.sp-galstrip { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; }
.sp-galstrip img { width: 84px; height: 62px; flex-shrink: 0; object-fit: cover; border-radius: 8px;
  cursor: pointer; opacity: .5; transition: opacity .15s; background: var(--surface-2); }
.sp-galstrip img:hover { opacity: .85; }
.sp-galstrip img.is-on { opacity: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-galback { font-size: 0.84rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.sp-galback:hover { color: var(--ink); }
@media (max-width: 760px) {
  .modal__card--gal { max-width: 100%; padding: 12px; }
  .sp-galgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .sp-galnav { width: 38px; height: 38px; font-size: 1.2rem; }
  .sp-galstrip img { width: 64px; height: 48px; }
}
.sp-layout { display: grid; grid-template-columns: 1fr 380px; gap: 50px; align-items: start; }
.sp-layout > *, .sp-main, .book { min-width: 0; }
.sp-head__cat { font-size: 0.74rem; font-weight: 800; color: var(--accent); letter-spacing: 0.05em; }
.sp-head__title { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; letter-spacing: -0.025em; margin: 8px 0 12px; }
.sp-head__meta { display: flex; align-items: center; gap: 18px; font-size: 0.9rem; color: var(--muted); flex-wrap: wrap; }
.sp-head__meta span { display: inline-flex; align-items: center; gap: 6px; }
.sp-head__meta .ic { width: 16px; height: 16px; color: var(--faint); }
.sp-head__meta .rate { color: var(--ink-2); font-weight: 700; }
.sp-head__meta .rate .ic { color: var(--gold); fill: var(--gold); }
.sp-sec { padding: 30px 0; border-top: 1px solid var(--line-2); }
.sp-sec:first-of-type { border-top: none; }
.sp-sec__title { font-size: 1.2rem; font-weight: 800; margin-bottom: 16px; letter-spacing: -0.01em; }
.sp-desc { color: var(--ink-2); line-height: 1.85; font-size: 0.96rem; }
.sp-amen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sp-amen li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink-2); font-weight: 600; }
.sp-amen .ic { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.sp-rev { display: flex; flex-direction: column; gap: 14px; }
.sp-revrow { display: flex; gap: 12px; padding: 16px; background: var(--surface-2); border-radius: 14px; }
.sp-revrow__av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.9rem; }
.sp-revrow__name { font-weight: 700; font-size: 0.9rem; }
.sp-revrow__stars { color: var(--gold); font-size: 0.78rem; margin: 2px 0 6px; }
.sp-revrow__txt { font-size: 0.9rem; color: var(--ink-2); line-height: 1.6; }
.sp-revrow__body { flex: 1; min-width: 0; }
/* 공간 상세 — 찜·공유 액션 */
.sp-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sp-head__actions { display: flex; gap: 8px; flex-shrink: 0; margin-top: 4px; }
.sp-act { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 11px; font-size: 0.86rem; font-weight: 700; color: var(--ink-2); background: var(--surface); transition: all 0.15s; }
.sp-act:hover { border-color: var(--ink); color: var(--ink); }
.sp-act .ic { color: var(--muted); }
.sp-act.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sp-act.is-on .ic { color: var(--accent); fill: var(--accent); }
/* 해시태그 링크 */
.optag--link { transition: all 0.15s; }
.optag--link:hover { background: var(--accent); color: #fff; }
/* 검색 태그 배너 */
/* 공유 시트 */
.share__sub { font-size: 0.95rem; font-weight: 700; margin: 8px 0 16px; line-height: 1.5; }
.share__sub span { display: block; font-size: 0.82rem; font-weight: 500; color: var(--muted); margin-top: 4px; }
.share__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.share__b { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 13px; font-size: 0.84rem; font-weight: 700; color: var(--ink-2); background: var(--surface); transition: all 0.15s; }
.share__b:hover { border-color: var(--ink); transform: translateY(-2px); }
.share__b--kko { background: #fee500; border-color: #fee500; color: #3a2929; }
.share__b--kko:hover { background: #f5dc00; border-color: #f5dc00; }
.share__ic { font-size: 1.5rem; }
/* 포토 리뷰 */
.sp-revphotos { margin-bottom: 16px; }
.sp-revphotos__t { font-size: 0.86rem; font-weight: 800; color: var(--ink-2); margin-bottom: 8px; }
.sp-revphotos__row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.sp-revphotos__row img { width: 96px; height: 96px; flex-shrink: 0; object-fit: cover; border-radius: 12px; cursor: pointer; transition: transform 0.15s; }
.sp-revphotos__row img:hover { transform: scale(1.03); }
.sp-revrow__photos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.sp-revrow__photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; cursor: pointer; }
.sp-revreply { margin-top: 10px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sp-revreply b { display: block; font-size: 0.8rem; font-weight: 800; color: var(--accent); margin-bottom: 3px; }
.sp-revreply span { font-size: 0.86rem; color: var(--ink-2); line-height: 1.55; }
.sp-revreply__btn { margin-top: 9px; font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.sp-revreply__form { margin-top: 9px; }
.sp-revreply__form textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 0.88rem; resize: vertical; outline: none; margin-bottom: 8px; }
.sp-revform__photos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.sp-revform__ph { position: relative; }
.sp-revform__ph img { width: 60px; height: 60px; object-fit: cover; border-radius: 9px; }
.sp-revform__ph button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.62rem; }
.sp-revform__add { display: inline-block; margin: 0 10px 10px 0; font-size: 0.82rem; font-weight: 700; color: var(--accent); cursor: pointer; }
/* 지도 헤드 */
.mapp__headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sp-rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* 예약 카드 (sticky) */
.book { position: sticky; top: calc(var(--header-h) + 22px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-sm); }
.book__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px; }
.book__price strong { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; }
.book__price span { color: var(--muted); font-size: 0.88rem; }
.book__field { margin-bottom: 12px; }
.book__label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.book__field input, .book__field select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font-size: 0.92rem; font-weight: 600; color: var(--ink); background: var(--surface); outline: none; transition: border-color 0.15s; }
.book__field input:focus, .book__field select:focus { border-color: var(--ink); }
.book__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.book__sum { margin: 20px 0 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.book__sumrow { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--muted); margin-bottom: 8px; }
.book__total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; color: var(--ink); font-size: 1.05rem; padding-top: 10px; border-top: 1px dashed var(--line); }
.book__total b { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.book__note { font-size: 0.78rem; color: var(--faint); text-align: center; margin-top: 12px; line-height: 1.5; }
/* #2a: 부대서비스 옵션 체크박스 */
/* #2a: 모바일 스티키 하단 견적 바 */
.bk-mobar { display: none; }
@media (max-width: 900px) {
  .bk-mobar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 470; background: var(--surface); border-top: 1px solid var(--line); padding: 10px 16px; box-shadow: 0 -8px 24px -14px rgba(15,23,42,0.25); }
  .bk-mobar__l { display: flex; flex-direction: column; line-height: 1.2; }
  .bk-mobar__l b { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
  .bk-mobar__l span { font-size: 0.7rem; color: var(--muted); }
  .bk-mobar .btn { margin-left: auto; flex-shrink: 0; }
  .sp-layout { padding-bottom: 80px; }
}
/* #2b: 매칭 파트너 미니 프로필 */
.sp-sec__sub { font-size: 0.88rem; color: var(--muted); margin: -4px 0 14px; }
.matchp { display: flex; flex-direction: column; gap: 8px; }
.matchp__empty { font-size: 0.9rem; color: var(--faint); }
.matchp-card { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--surface); }
.matchp-card__hd { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 14px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
.matchp-card__ava { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.matchp-card__info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.matchp-card__info b { font-size: 0.95rem; font-weight: 800; }
.matchp-card__info span { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.matchp-card__chev { color: var(--faint); transition: transform 0.18s; flex-shrink: 0; }
.matchp-card.is-open .matchp-card__chev { transform: rotate(180deg); }
.matchp-card__body { padding: 0 14px 14px 63px; }
.matchp-card__items { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.matchp-chip { font-size: 0.76rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 3px 8px; }
.matchp-card__intro { font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.matchp-card__ph { display: flex; gap: 6px; margin-bottom: 10px; }
.matchp-card__ph img { width: 68px; height: 52px; object-fit: cover; border-radius: 8px; }
@media (max-width: 560px) { .matchp-card__body { padding-left: 14px; } }

/* ============================================================
   검색 결과 (search.html)
   ============================================================ */
.srch { max-width: 1220px; margin: 0 auto; padding: 34px 32px 90px; }
/*  ⚠ 상단 층이 목록 시작을 밀어내고 있었다. 실측(2026-08-19): 첫 카드가 모바일 305px
    (화면의 36%) · 데스크톱 461px (49%). 층은 다섯이고 그중 **기능이 없는 것은 제목
    블록 하나**다(검색창·지역칩·개수/정렬·즉시예약+태그는 모두 조작에 쓰인다).
    ⚠ 해시태그 칩을 접어 넣지 않는다. 그 줄은 29px(화면의 3.4%)뿐이고, 접으면
      "안 보이는 필터가 결과를 줄여 왜 안 나오지" 가 된다 — 이미 겪은 함정이다.
      그리고 그 줄은 이미 가로 스크롤 한 줄이다.
    그래서 손대는 곳은 제목 블록뿐이다. 데스크톱에서 kicker("SEARCH")와 부제를
    걷어낸다 — 검색 페이지에 와 있는 사람에게 "여기는 검색 페이지" 라고 알려 주는
    자리였다(모바일은 이미 감추고 있었다).                                        */
.srch__top { margin-bottom: 14px; }
.srch__top .mp__sub { display: none; }
.srch__title { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; }
.srch__layout { display: grid; grid-template-columns: 236px 1fr; gap: 44px; align-items: start; }
/* 검색 결과 카드: 좁게 눌리지 않게 넉넉히 */
.results .grid { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 24px; }
.filters { position: static; }
.filters__mtoggle { display: none; }
/* 상세 필터 버튼 (검색 컨트롤 바) — 켜 놓은 개수를 배지로 함께 보여 준다 */
.v-morefilt { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 700; font-size: 0.9rem; color: var(--ink-2); white-space: nowrap; transition: all 0.14s; }
.v-morefilt:hover, .v-morefilt.is-open { border-color: var(--accent); color: var(--accent); }
.v-morefilt.has-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.v-morefilt__n { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
/*  ⚠ display 를 준 요소는 hidden 속성만으로 사라지지 않는다. 이걸 빼먹어 필터를 하나도
    켜지 않았는데 버튼에 '0' 배지가 붙어 있었다(이 저장소에서 반복된 함정). */
.v-morefilt__n[hidden] { display: none; }
.v-morefilt__c { font-size: 0.8rem; color: var(--faint); transition: transform 0.18s; }
.v-morefilt.is-open .v-morefilt__c { transform: rotate(180deg); }
/*  상세 필터 패널 — PC 는 드롭다운, 모바일은 하단 시트(아래 760px 블록에서 바뀐다) */
.filters__sheet { display: none; }
.filters__sheet.is-open { display: block; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; margin-bottom: 20px; box-shadow: var(--shadow-sm); animation: rqnDown 0.24s cubic-bezier(0.2,0.8,0.2,1); }
.filters__head { display: none; }
.filters__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 28px; padding: 6px 22px 4px; }
.filters__body .filt { border-bottom: none; padding: 15px 0 4px; }
.filters__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 22px 16px; }
.filters__foot .btn { min-width: 116px; }
.filters__backdrop { display: none; }
.v-filterbar .filt__chk { flex-shrink: 0; }
/*  지역(고정) + 유형 칩(가로 스크롤) 한 줄 — 예전에는 두 줄을 따로 먹었다 */
.v-filterrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.v-filterrow .v-filterbar { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
/*  지역 칩은 칩 줄과 함께 밀리지 않게 고정한다 — 스크롤 상자 밖의 형제다.
    ⚠ flex-shrink 를 0 으로 둔다. 안 두면 좁은 화면에서 이 칩이 먼저 눌려 글자가 잘린다. */
.rgchip--fixed { flex: 0 0 auto; }
/*  적용된 필터 칩 — 접힌 필터가 결과를 줄이고 있다는 사실을 숨기지 않는다 */
.filtchips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -8px 0 14px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
/*  ⚠ display 를 준 요소는 hidden 속성만으로 사라지지 않는다(이 저장소에서 반복된 함정) */
.filtchips[hidden] { display: none; }
.filtchips::-webkit-scrollbar { display: none; }
.fchip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px 5px 11px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fchip i { font-style: normal; font-size: 0.86rem; line-height: 1; opacity: 0.7; }
.fchip:hover i { opacity: 1; }
.fchip--all { border-color: var(--line); background: var(--surface); color: var(--muted); }
.filt { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.filt:first-child { padding-top: 0; }
.filt__t { display: block; font-size: 0.82rem; font-weight: 800; margin-bottom: 12px; letter-spacing: 0.01em; }
.filt__region, .filt__sel { width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.9rem; font-weight: 600; color: var(--ink); background: var(--surface); outline: none; }
.filt__region:focus, .filt__sel:focus { border-color: var(--ink); }
/* 필터 — 선택 칩 스타일 (커스텀) */
.filt__list { display: flex; flex-wrap: wrap; gap: 7px; }
.filt__chk { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-2); font-weight: 600; cursor: pointer; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); transition: all 0.14s; }
.filt__chk:hover { border-color: var(--accent); color: var(--accent); }
.filt__chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.filt__chk:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px -5px rgba(79, 70, 229, 0.5); }
/* 토글(지금 예약 가능만·패키지) — iOS 스위치 */
/*  ⚠ `.hf-toggle` 을 같은 규칙에 얹었다 — 사본을 만들면 한쪽만 고쳐진다.
    ⚠ 폼에서 `.hf-label` 과 **겹쳐 쓰지 말 것.** `.hf-label{display:block}` 이 이 규칙보다
      뒤(1358행)에 있어 같은 특이도로 이긴다 → flex 가 죽고 gap 이 무시된다
      (실측: 틈 0px · 세로 중심 6px 어긋남). 토글 자리에는 이 클래스만 쓴다. */
.filt__toggle, .hf-toggle { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
/*  폼 라벨과 같은 크기·아래 여백으로 맞춘다(.hf-label 이 0.84rem · 5px) */
.hf-toggle { font-size: 0.84rem; margin-bottom: 5px; width: fit-content; }
.filt__toggle input, .hf-toggle input { appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line); cursor: pointer; transition: background 0.18s; flex-shrink: 0; }
.filt__toggle input::after, .hf-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.18s; }
.filt__toggle input:checked, .hf-toggle input:checked { background: var(--accent); }
.filt__toggle input:checked::after, .hf-toggle input:checked::after { transform: translateX(16px); }
.results__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.results__count { font-size: 1rem; color: var(--muted); }
.results__count b { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); font-weight: 600; margin-right: 2px; }
.results__tools { display: flex; align-items: center; gap: 12px; }
.results__sort { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.results__sort .filt__sel { width: auto; padding: 9px 12px; }
.srch__empty { text-align: center; padding: 70px 20px; color: var(--faint); }
.srch__empty p { margin-bottom: 16px; }
/* 목록/지도 뷰 토글 */
.viewtoggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.viewtoggle__b { padding: 7px 15px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.viewtoggle__b.is-active { background: var(--ink); color: #fff; }
/* 키워드 검색바 */
.srch-kw { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.srch-kw:focus-within { border-color: var(--ink); }
.srch-kw__ic { font-size: 0.95rem; opacity: 0.7; }
.srch-kw input { flex: 1; border: none; outline: none; background: none; font-size: 0.95rem; font-weight: 600; color: var(--ink); padding: 12px 0; min-width: 0; }
.srch-kw input::placeholder { color: var(--faint); font-weight: 500; }
.srch-kw__clear { width: 30px; height: 30px; border-radius: 50%; color: var(--muted); font-size: 0.8rem; flex-shrink: 0; }
.srch-kw__clear:hover { background: var(--surface-2); }
/* 즉시예약 스위치 + 태그 슬라이더 */
/*  #1a: 통합 스마트 필터 — 상세 필터 패널 안에 들어간다.
    ⚠ 예전에는 목록 바로 위에 항상 펼쳐진 195px 짜리 칩 덩어리였다. 모바일 첫 화면이
      필터로만 채워져 공간 카드가 0.1장밖에 보이지 않았다. 테두리·배경은 패널이 이미
      갖고 있으므로 여기서는 지운다. */
.smartbar { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; background: none; border: 0; }
.filt--smart { grid-column: 1 / -1; }
/*  인기 태그는 칩이 10개다. 한 열(약 256px)에 넣으면 4줄로 눌리는데 옆 '옵션' 칸은
    토글 두 개로 비어 있었다(실측 1440px). 두 열을 쓰게 해 2줄로 만든다.
    ⚠ span 2 는 열이 하나뿐인 좁은 화면에서도 안전하다(격자가 알아서 클램프하고,
      모바일 시트는 display:block 이라 아예 무시된다). */
.filt--tags { grid-column: span 2; }
.smartbar__g { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.smartbar__g .smartbar__t { padding-top: 7px; }
.smartbar__t { font-size: 0.78rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.smartbar__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.smartchip { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 0.82rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all 0.14s; white-space: nowrap; }
.smartchip:hover { border-color: var(--accent); }
.smartchip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.smartbar__reset { align-self: flex-start; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-decoration: underline; white-space: nowrap; }
/* #1b: 개별 vs 패키지 가격비교 배지 */
.sp-card__pkg { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; padding: 7px 11px; border-radius: 9px; background: linear-gradient(90deg, var(--accent-soft), rgba(238,236,253,0.4)); border: 1px solid #ddd8fb; text-decoration: none; }
.sp-card__pkg__l { font-size: 0.76rem; font-weight: 800; color: var(--accent-ink); white-space: nowrap; }
.sp-card__pkg__p { font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.sp-card__pkg__p s { color: var(--faint); font-weight: 600; margin-right: 2px; }
.sp-card__pkg__p em { font-style: normal; font-weight: 800; color: #e2402f; margin-left: 2px; }
.qsw { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; font-size: 0.86rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.qsw__track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--line); transition: background 0.18s; }
.qsw__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.18s; }
.qsw.is-on { color: var(--ok); }
.qsw.is-on .qsw__track { background: var(--ok); }
.qsw.is-on .qsw__knob { transform: translateX(18px); }
/*  .qbar / .qtags-wrap 규칙을 지웠다(2026-08-21) — 상단 4번째 줄을 없애면서
    쓰는 곳이 0이 됐다. 태그는 상세 필터 시트 안에서 .qtags--wrap(줄바꿈)으로 나온다. */
.qtags { display: flex; gap: 7px; flex-wrap: nowrap; width: max-content; padding-right: 20px; }
/*  상세 필터 시트 안에서는 **줄바꿈**이다. 가로 스크롤이면 좁은 칸에서 옆으로 숨어
    있는 줄도 모른다.
    ⚠ 이 규칙은 반드시 `.qtags` **뒤**에 와야 한다. 앞에 두었더니 같은 특이도라
      뒤의 `flex-wrap:nowrap; width:max-content` 가 이겨서 칩이 칸 밖으로 흘렀다
      (실측: #반려동물·#노래방·#24시간이 필터 상자 밖으로 나갔다). 옮기지 말 것.
    ⚠ `min-width:0` 이 필요하다 — 시트가 격자라 이게 없으면 열이 min-content 만큼
      넓어져 칸이 통째로 밀린다(카드 격자에서 겪은 것과 같은 원인). */
.qtags--wrap { flex-wrap: wrap; width: auto; min-width: 0; max-width: 100%; padding-right: 0; row-gap: 8px; }
.qtag { flex-shrink: 0; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.83rem; font-weight: 700; color: var(--ink-2); background: var(--surface); white-space: nowrap; transition: all 0.15s; }
.qtag:hover { border-color: var(--accent); color: var(--accent); }
.qtag.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.qtag-lbl { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 700; color: var(--faint); white-space: nowrap; padding-right: 2px; }
.qtag-lbl svg { opacity: 0.7; }
.qtag--recent { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-color: var(--line-2); }
.qtag--recent .qtag__x { display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.62rem; color: var(--faint); background: rgba(0,0,0,0.06); }
.qtag--recent .qtag__x:hover { background: var(--accent); color: #fff; }
.qtag--clear { flex-shrink: 0; border: 0; background: transparent; color: var(--faint); font-weight: 600; font-size: 0.78rem; padding: 8px 4px; }
.qtag--clear:hover { color: var(--accent); }
.qtag-sep { flex-shrink: 0; width: 1px; align-self: center; height: 18px; background: var(--line); margin: 0 3px; }
.filt__toggle--sm { margin-top: 12px; font-size: 0.84rem; }
/*  ⚠ 예전에는 여기서 .qbar 를 세로로 쌓았다(flex-direction: column). 스위치와 태그가 두 줄을
    먹어 그만큼 카드가 아래로 밀렸다. 한 줄로 두고, 좁아지면 라벨 뒷말('가능만')만 접는다.
    (태그는 2026-08-21 에 상세 필터 시트로 옮겼다 — .qbar 자체가 없어졌다.) */
@media (max-width: 560px) { .qsw { font-size: 0.8rem; gap: 7px; } .qsw__more { display: none; } .qsw__track { width: 36px; height: 21px; } .qsw__knob { width: 15px; height: 15px; } .qsw.is-on .qsw__knob { transform: translateX(15px); } }
/* 지도 뷰 */
.srch-map { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.srch-map[hidden] { display: none; }
.srch-map__canvas { width: 100%; height: 620px; }
.srch-map__fb { padding: 18px; display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; }
.srch-map__note { font-size: 0.86rem; color: var(--muted); background: var(--surface-2); padding: 11px 14px; border-radius: 10px; margin-bottom: 6px; }
.smap-pin { display: inline-block; padding: 5px 11px; background: var(--ink); color: #fff; font-size: 0.8rem; font-weight: 800; border-radius: 999px; box-shadow: var(--shadow-sm); white-space: nowrap; border: 2px solid var(--surface); }
.smap-pin--now { background: #059669; }
/*  주소를 정확히 못 찾아 시·도 기준으로 찍은 핀 — 정확한 핀과 구별되게 둔다.
    ⚠ 실패했다고 마커를 없애면 호스트가 자기 공간이 빠진 걸 알 수 없다. */
.smap-pin--rough { background: var(--muted); border-style: dashed; }
/*  지도 위 안내 (몇 곳을 대략 위치로 찍었는지 등) */
.srch-map__msg { margin: 0; padding: 10px 14px; font-size: 0.82rem; color: var(--ink-2); background: var(--surface-2); border-top: 1px solid var(--line-2); line-height: 1.55; }
.srch-map__msg[hidden] { display: none; }
/* ===== 관리자 콘솔 ===== */
.logo__admin { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 6px; vertical-align: 2px; margin-left: 4px; }
/* 마이페이지 사업자 승인 배너 */
.mp-bizbanner { margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; font-size: 0.92rem; line-height: 1.55; }
.mp-bizbanner--pending { background: rgba(217,119,6,0.12); border: 1px solid rgba(217,119,6,0.3); color: #92610f; }
.mp-bizbanner--rejected { background: rgba(220,38,38,0.09); border: 1px solid rgba(220,38,38,0.28); color: #b0332a; }
.mp-bizbanner b { font-weight: 800; }
.btn--xs { padding: 5px 10px; font-size: 0.76rem; border-radius: 8px; }
.ad-kpis { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.ad-kpi { flex: 1 1 150px; background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; box-shadow: none; min-width: 0; }
.ad-kpi:last-child { border-right: 0; }
/*  ⚠ 클래스 이름을 ad-kpi--hl 로 바꿨다. 예전 이름은  이었는데 그건 **도움말
    페이지의 키워드 하이라이트 칩**(.hl · display:inline)과 같은 이름이었다.
    그 규칙이 뒤에 와서 display:flex 를 덮어써 카드가 block+inline 으로 흐르고
    아이콘·금액·라벨이 한 줄에 뒤엉켰다(실측: 정산 "와일리 수수료(매출)" 칸).
    ⚠  처럼 짧고 흔한 이름을 컴포넌트에 쓰지 말 것 — 어느 파일이 이겼는지
      찾기까지 시간이 걸린다. 어드민 것은 ad- 를 붙인다.                     */
.ad-kpi--hl { background: var(--accent-soft); }
.ad-kpi__ic { font-size: 1.1rem; }
.ad-kpi b { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ad-kpi__l { font-size: 0.82rem; color: var(--muted); }
.ad-note { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 14px 18px; background: var(--accent-soft); border: 1px solid rgba(79,70,229,0.25); border-radius: 12px; font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; }
.ad-note > svg { flex-shrink: 0; margin-top: 2px; }
.ad-note__tx { flex: 1; min-width: 0; }
.ad-note--ok { background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.25); }
.ad-note b { color: var(--accent); }
/* 승인 카드 */
.ad-appr { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.ad-appr__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ad-appr__name { font-size: 1.05rem; font-weight: 800; margin: 0 8px; }
.ad-appr__meta { font-size: 0.8rem; color: var(--faint); }
.ad-appr__act { display: flex; gap: 7px; flex-wrap: wrap; }
.ad-appr__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; font-size: 0.88rem; color: var(--ink-2); }
.ad-appr__grid > div span { display: inline-block; min-width: 66px; color: var(--faint); font-weight: 700; }
.ad-appr__intro { grid-column: 1 / -1; }
.ad-role { font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.ad-role--guest { color: var(--info); background: rgba(37,99,235,0.1); }
.ad-role--host { color: #b45309; background: rgba(217,119,6,0.12); }
.ad-role--vendor { color: var(--accent); background: var(--accent-soft); }
.ad-role--admin { color: #fff; background: var(--ink); }
/* 툴바 */
.ad-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ad-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.ad-filters .chip b { margin-left: 3px; color: inherit; opacity: 0.7; }
.ad-search { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.9rem; min-width: 220px; background: var(--surface); color: var(--ink); outline: none; }
/* 섹션 검색바 */
.ad-srch { display: flex; align-items: center; gap: 8px; padding: 9px 13px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.ad-srch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ad-srch__ic { display: inline-flex; color: var(--faint); flex-shrink: 0; }
.ad-srch__in { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 0.92rem; color: var(--ink); }
.ad-srch__in::placeholder { color: var(--faint); }
.ad-srch__x { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted); font-size: 0.7rem; cursor: pointer; }
.ad-srch__x:hover { background: var(--line); color: var(--ink); }
.ad-search:focus { border-color: var(--ink); }
/* 테이블 */
.ad-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ad-tr { display: grid; grid-template-columns: 80px 1.4fr 1.6fr 90px 1.5fr; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); font-size: 0.88rem; }
.ad-tr:last-child { border-bottom: none; }
.ad-tr--h { background: var(--surface-2); font-size: 0.76rem; font-weight: 800; color: var(--muted); letter-spacing: 0.02em; }
.ad-tr__id b { display: block; font-weight: 700; }
.ad-tr__id em { font-style: normal; font-size: 0.78rem; color: var(--faint); }
.ad-tr__email { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-tr__act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ad-rolesel { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.78rem; background: var(--surface); color: var(--ink); }
.ad-lock { font-size: 0.78rem; font-weight: 700; color: var(--faint); }
/* 정렬 가능한 헤더 */
.ad-sort { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 3px; transition: color 0.12s; }
.ad-sort:hover { color: var(--accent); }
.ad-sort.is-active { color: var(--accent); font-weight: 800; }
.ad-sort__ar { font-size: 0.62rem; opacity: 0.45; line-height: 1; }
.ad-sort.is-active .ad-sort__ar { opacity: 1; }
/* 관리자 콘솔 확장 */
.ad-h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; margin: 20px 0 12px; }
.ad-h3__s { font-family: "Pretendard Variable", "Pretendard", sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-left: 6px; }
.ad-hint { font-size: 0.82rem; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.ad-hint code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
.ad-kpi--money b em { font-size: 0.82rem; font-weight: 600; font-style: normal; color: var(--muted); margin-left: 1px; }
.ad-kpi--money b { font-size: 1.12rem; }
.ad-tr--prod { grid-template-columns: 1.6fr 0.9fr 1fr 0.85fr 0.9fr 1.9fr; }
.ad-tr--bk { grid-template-columns: 1.15fr 1.6fr 1fr 0.95fr 0.9fr 0.8fr; }
.ad-tr--set { grid-template-columns: minmax(120px, 1.3fr) 58px 54px 94px 108px minmax(130px, 1fr) minmax(118px, 0.9fr); align-items: center; }
.ad-set-pay { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ad-set-pay b { font-weight: 800; }
.ad-set-pay .ad-linkbtn--tax { padding: 0; font-size: 0.72rem; color: var(--accent); white-space: nowrap; }
.ad-table.ad-table--x { overflow-x: auto; overflow-y: visible; }
.ad-table--x .ad-tr--set > span { white-space: nowrap; }
.ad-table--x .ad-tr--set .ad-tr__id { overflow: hidden; text-overflow: ellipsis; }
.ad-role { white-space: nowrap; }
.ad-tr__act--nowrap { flex-wrap: nowrap; white-space: nowrap; justify-content: flex-start; }
.ad-chkcell { display: flex; align-items: center; justify-content: center; }
.ad-chk { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); margin: 0; }
.ad-tr--set.is-sel { background: rgba(79, 70, 229, 0.07); }
/* 환불·주문 표 */
.ad-tr--ord { grid-template-columns: 0.85fr 1.35fr 0.85fr 1.6fr 1fr 0.85fr 0.75fr; align-items: center; }
.ad-tr--ord .ad-tr__id em { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.ad-table--x .ad-tr--ord > span { white-space: nowrap; }
.ad-ord__it { display: flex; flex-direction: column; gap: 2px; min-width: 0; white-space: normal !important; }
.ad-ord__it i { font-style: normal; font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ad-ord__pr { display: block; font-size: 0.72rem; color: #b45309; font-weight: 700; }
.ad-ord__when b { font-weight: 700; }
.ord-time { display: block; font-size: 0.72rem; color: #059669; font-weight: 600; margin-top: 1px; }
.ord-time--x { color: #b91c1c; }
.ad-ntpush { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.ad-ntpush input { accent-color: var(--accent); }
.quote-badge--refund { background: #fef2f2; color: #b91c1c; }
/* #3a: 견적요청 라이브 타이머 + 입찰 배지 */
.rfp-live { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; background: linear-gradient(90deg, #fff7ed, #fffaf3); border: 1px solid #fde3c4; }
.rfp-live__timer { font-size: 0.86rem; font-weight: 800; color: #b45309; }
.rfp-live__timer.is-urgent { color: #dc2626; }
.rfp-live__timer.is-over { color: var(--muted); }
.rfp-live__timer b { font-weight: 800; }
.rfp-live__bids { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.rfp-live__bids b { color: var(--accent); }
.rfp-live__cmp { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--accent); background: var(--surface); color: var(--accent); font: inherit; font-size: 0.78rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.rfp-live__cmp:hover { background: var(--accent-soft); }
/* #3b: 견적 1:1 비교 모달 */
.qcmp-cat { margin-top: 16px; }
.qcmp-cat__h { font-size: 0.9rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.qcmp-cat__h span { font-size: 0.74rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.qcmp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.qcmp-col { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.qcmp-col.is-low { border-color: var(--accent); background: var(--accent-soft); }
.qcmp-col__nm { font-size: 0.85rem; font-weight: 800; color: var(--ink); }
.qcmp-low { font-size: 0.66rem; font-weight: 800; color: #fff; background: var(--accent); padding: 1px 6px; border-radius: 999px; }
.qcmp-col__price { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.qcmp-col__rate { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.qcmp-col__desc { font-size: 0.78rem; color: var(--ink-2); line-height: 1.5; flex: 1; }
.qcmp-col .btn { margin-top: 4px; }
/* 취소 정책 계산 박스(환불 모달) */
.ad-cancelbox { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); }
.ad-cancelbox__tier { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 800; color: var(--accent); margin-bottom: 10px; }
.ad-cancelbox__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; padding: 4px 0; }
.ad-cancelbox__row b { font-weight: 800; font-size: 1.05rem; }
.ad-cancelbox__row--pen { color: #b45309; border-top: 1px dashed var(--line-2); margin-top: 4px; padding-top: 8px; }
/* 주문 취소 모달 표 색상(그리드는 .ad-pdrow 정의 뒤에서 지정) */
.ad-pdrow__rf { color: #059669; font-weight: 700; }
.ad-pdrow__pen { color: #b45309; font-weight: 700; }
/* 수수료율 관리 표 */
.ad-tr--fee { grid-template-columns: minmax(140px, 1.6fr) 84px minmax(150px, 1fr) 80px 84px 84px; cursor: pointer; }
.ad-tr--fee:hover { background: rgba(79, 70, 229, 0.05); }
.ad-fee-rate { font-size: 1rem; font-weight: 800; color: var(--accent); }
.ad-fee-rate.is-mix { color: #b45309; font-size: 0.88rem; }
.ad-fee-tag { font-style: normal; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.ad-fee-tag--cust { color: var(--accent); background: var(--accent-soft); }
.ad-fee-tag--def { color: var(--faint); background: var(--surface-2); }
@media (max-width: 860px) {
  .ad-tr--fee { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 16px; }
  .ad-tr--fee > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
  .ad-tr--fee > span[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 0.82rem; font-weight: 600; }
  .ad-tr--fee .ad-tr__id { padding: 0 0 2px; font-size: 1.05rem; }
}
/* 섹션 바(제목 + 우측 툴바) */
.ad-secbar { display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 20px 0 12px; }
.ad-secbar__act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-segtabs { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; }
.ad-seg { border: 0; background: none; padding: 5px 11px; border-radius: 7px; font-size: 0.78rem; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; }
.ad-seg b { color: inherit; margin-left: 2px; }
.ad-seg.is-active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.ad-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: rgba(79, 70, 229, 0.07); border: 1px solid rgba(79, 70, 229, 0.22); border-radius: 10px; margin-bottom: 10px; font-size: 0.86rem; }
/* 지표 툴팁 (?) */
.ad-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); cursor: help; vertical-align: middle; }
.ad-tip i { font-style: normal; font-size: 0.62rem; font-weight: 800; line-height: 1; }
.ad-tip__bub { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: 236px; max-width: 60vw; background: var(--ink); color: #fff; padding: 9px 11px; border-radius: 9px; font-size: 0.76rem; font-weight: 500; line-height: 1.5; text-align: left; opacity: 0; visibility: hidden; transition: opacity 0.15s; z-index: 60; box-shadow: var(--shadow-lg); pointer-events: none; }
.ad-tip__bub::after { content: ""; position: absolute; top: 100%; left: calc(50% - var(--tipShift, 0px)); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); }
.ad-tip:hover .ad-tip__bub, .ad-tip:focus .ad-tip__bub { opacity: 1; visibility: visible; }
.ad-tr--mem { grid-template-columns: 1.6fr 0.7fr 1.2fr; }
/* ⚠ 칼럼 수(6)와 이 값의 개수가 같아야 한다. '인증' 을 넣으면서 5 → 6 이 됐다 —
   안 맞추면 마지막 칼럼(관리 버튼)이 줄 밖으로 밀려 나간다 */
.ad-tr--u { grid-template-columns: 72px 1.3fr 0.9fr 104px 78px 1.6fr; }
.ad-tr__rev { font-weight: 700; color: var(--ink-2); }
.ad-refund-done { font-size: 0.76rem; color: var(--faint); }
.ad-refund .btn { justify-content: center; }
/* 패키지 관리 */
.ad-pkgs { display: flex; flex-direction: column; gap: 8px; }
.ad-pkg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ad-pkg__body b { font-weight: 700; }
.ad-pkg__body span { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.ad-pkg__act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 공지 */
.ad-notice-form { display: flex; gap: 8px; margin-bottom: 12px; }
.ad-notices { display: flex; flex-direction: column; gap: 8px; }
.ad-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.ad-notice b { font-weight: 700; }
.ad-notice span { font-size: 0.78rem; color: var(--faint); margin-left: 8px; }
/* 문의 */
.ad-inqs { display: flex; flex-direction: column; gap: 10px; }
.ad-inq { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ad-inq__top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.9rem; }
.ad-inq__top b { font-weight: 700; }
.ad-inq__top span { font-size: 0.78rem; color: var(--faint); }
.ad-inq__q { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }
.ad-inq__a { font-size: 0.88rem; color: var(--accent); background: var(--accent-soft); padding: 9px 12px; border-radius: 9px; margin-top: 8px; }
.ad-inq__form { display: flex; gap: 8px; margin-top: 10px; }
/* 리뷰 모니터링 */
.ad-revs { display: flex; flex-direction: column; gap: 10px; }
.ad-rev { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ad-rev.is-hidden { opacity: 0.55; }
.ad-rev__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 0.9rem; }
.ad-rev__top span { color: var(--gold); font-size: 0.82rem; }
.ad-rev__txt { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 8px; }
.ad-rev__ph { display: flex; gap: 7px; margin-bottom: 8px; }
.ad-rev__ph img { width: 64px; height: 64px; object-fit: cover; border-radius: 9px; }
/* 홈 공지 배너 */
.noticebar { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; padding: 9px 18px; background: var(--ink); color: #fff; font-size: 0.85rem; font-weight: 600; }
.noticebar[hidden] { display: none; }
/* 실시간 데이터 유입 토스트 */
.live-toast { position: fixed; left: 20px; bottom: 20px; z-index: 400; max-width: 340px; display: flex; align-items: center; gap: 9px; padding: 12px 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 0.86rem; font-weight: 600; opacity: 0; transform: translateY(12px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.live-toast.show { opacity: 1; transform: translateY(0); }
.live-toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); } }
/* 마이페이지 정렬·기간 툴바 */
.mp-toolbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 14px; }
/* A-3: 공간 견적요청 파이프라인 3단계 */
.hpipe { display: flex; align-items: stretch; gap: 6px; margin-bottom: 12px; }
.hpipe__stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; transition: border-color 0.14s, background 0.14s, box-shadow 0.14s; }
.hpipe__stage:hover { border-color: var(--accent); }
.hpipe__stage.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.hpipe__n { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.hpipe__l { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.hpipe__stage.is-on .hpipe__n, .hpipe__stage.is-on .hpipe__l { color: var(--accent); }
.hpipe__arrow { display: flex; align-items: center; color: var(--faint); font-size: 1.1rem; font-weight: 700; }
.hpipe-sub { margin-right: auto; }
@media (max-width: 560px) { .hpipe { gap: 3px; } .hpipe__stage { padding: 11px 4px; } .hpipe__n { font-size: 1.2rem; } .hpipe__l { font-size: 0.7rem; } .hpipe__arrow { font-size: 0.85rem; } }
/* A-4: 매출 리포트(공간 단독 vs 패키지) */
/* B-1: 현장 진행 상태 트래커 */
/* ── 파트너 견적 카드 요약 (2열) ───────────────────────────────────────
   왼쪽에 '언제·어디서·몇 명 + 이용 공간 + 요청 품목', 오른쪽에 '돈 + 상태 + 할 일'.
   ⚠ 오른쪽 열은 폭을 고정한다. 금액 자릿수에 따라 열 폭이 흔들리면 카드마다 좌우가
     어긋나 목록이 지저분해진다. */
.vqc { display: grid; grid-template-columns: 1fr 190px; gap: 14px; align-items: start; }
.vqc__l { min-width: 0; cursor: pointer; }
.vqc__when { font-size: 0.95rem; font-weight: 800; color: var(--ink); line-height: 1.45; word-break: keep-all; }
.vqc__place { margin-top: 5px; }
.vqc-place { display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-size: 0.83rem; color: var(--ink-2); }
.vqc-place .ic { color: var(--accent); flex-shrink: 0; align-self: center; }
.vqc-place b { font-weight: 800; color: var(--ink); }
.vqc-place em { font-style: normal; font-size: 0.78rem; color: var(--muted); }
.vqc__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.vqc-tag { font-size: 0.75rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; }
.vqc-tag--etc { color: var(--muted); background: var(--surface-2); font-weight: 700; }
.vqc__meta { margin-top: 7px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.77rem; color: var(--muted); }

.vqc__r { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.vqc-money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.vqc-money__l { font-size: 0.73rem; font-weight: 700; color: var(--muted); }
.vqc-money__l em { font-style: normal; color: var(--faint); }
.vqc-money__v { font-family: var(--serif); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vqc-money__v em { font-style: normal; font-size: 0.82rem; font-weight: 700; margin-left: 1px; }
.vqc-money__v--none { font-size: 1.1rem; color: var(--muted); }
.vqc-money--ask .vqc-money__v { color: var(--ink-2); }
/* 🎉 선택됨 — 금액 바로 아래(옆)에 브랜드 뱃지로. 예전에는 카드 중간 vq-list 안에 있어 안 보였다 */
.vqc-badge { font-size: 0.74rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.vqc-badge--won { color: #fff; background: var(--accent); box-shadow: 0 3px 10px -3px rgba(79, 70, 229, 0.6); }
.vqc-badge--pick { color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(79, 70, 229, 0.3); }
.vqc-badge--wait { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.vqc__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

@media (max-width: 640px) {
  /* 좁은 화면은 위아래로 — 190px 열을 유지하면 왼쪽 글이 두 글자씩 끊긴다 */
  .vqc { grid-template-columns: 1fr; gap: 10px; }
  .vqc__r { align-items: stretch; }
  .vqc-money { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
  .vqc-money__v { font-size: 1.3rem; }
  .vqc__acts { justify-content: stretch; }
  .vqc__acts .btn { flex: 1; }
}

/* ── 현장 진행 — 한 줄 타임라인 ────────────────────────────────────────
   예전 .jobtrk 는 제목·단계·버튼 세 줄을 쓰는 큰 회색 박스(14줄 CSS)였다. 카드 높이의
   절반가까이를 먹어 정작 중요한 금액·요청 내용이 아래로 밀렸다 — 한 줄로 눕혔다.
   ⚠ 단계 이름은 '현재 단계만' 글로 보인다. 넷을 다 적으면 좁은 화면에서 두 줄로 접힌다. */
.jbar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
.jbar__t { flex: none; font-size: 0.78rem; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.jbar__steps { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 3px; }
.jbar__act { flex: none; display: flex; align-items: center; gap: 5px; }
.jbar__wait, .jbar__fin { font-size: 0.74rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.jbar__fin { color: var(--ok); }
.jstep { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.jstep__d { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.66rem; font-style: normal; font-weight: 800;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--muted); }
.jstep__l { font-size: 0.74rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.jstep__ln { flex: 1 1 auto; min-width: 6px; height: 2px; background: var(--line); border-radius: 2px; }
.jstep.is-done .jstep__d { background: var(--ok); border-color: var(--ok); color: #fff; }
.jstep.is-cur .jstep__d { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 560px) {
  /* 좁으면 두 줄로 — 버튼이 단계를 밀어내 화면 밖으로 나가는 것을 막는다 */
  .jbar { flex-wrap: wrap; }
  .jbar__steps { order: 3; width: 100%; }
  .jbar__act { margin-left: auto; }
}
/* 게스트용 현장 상태 칩 */
.job-chip { display: inline-flex; align-items: center; font-size: 0.74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.job-chip--s3 { background: #e7f6ee; color: #067a4b; }
/* B-2: CAPA 한도 초과 표시 */
.vq-capfull { font-size: 0.82rem; font-weight: 700; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 7px 12px; }
/* B-3: 연동 현황 */
.mg-h__s { font-size: 0.76rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.vlink-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; margin-bottom: 8px; background: var(--surface); }
.vlink-row--warn { border-color: #fed7aa; background: #fff7ed; }
.vlink-row__l { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vlink-row__l b { font-size: 0.92rem; font-weight: 800; }
.vlink-row__l span { font-size: 0.78rem; color: var(--muted); }
.vlink-row__st { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.vlink-st--warn { color: #b45309; }
.vlink-st--ok { color: #067a4b; }
.vlink-row__st b { color: var(--accent); }
.mp-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); border-radius: 10px; padding: 4px; }
.mp-seg__b { border: 0; background: none; padding: 6px 11px; border-radius: 7px; font-size: 0.8rem; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; white-space: nowrap; }
.mp-seg__b b { color: inherit; margin-left: 2px; font-weight: 800; }
.mp-seg__b:hover { color: var(--ink); }
.mp-seg__b.is-on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.mp-daterange { display: inline-flex; align-items: center; gap: 6px; }
.mp-daterange input[type="date"] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 0.82rem; font-family: inherit; }
.mp-daterange.is-on input[type="date"] { border-color: var(--accent); }
.mp-daterange__t { color: var(--faint); font-weight: 700; }
.settle-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.settle-nav { display: inline-flex; align-items: center; gap: 12px; }
.settle-nav b { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; min-width: 82px; text-align: center; }
.settle-nav__b { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.settle-nav__b:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.settle-nav__b:disabled { opacity: 0.35; cursor: default; }
.noticebar__item { white-space: nowrap; }
/* 통계 차트 */
.ad-chart { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px 4px; margin-bottom: 8px; }
.chart { width: 100%; height: auto; display: block; }
.chart-x { fill: var(--faint); font-size: 11px; font-weight: 600; }
.chart-v { fill: var(--ink); font-size: 10px; font-weight: 800; }
.ad-chart rect[data-amt] { cursor: pointer; transition: opacity 0.12s; }
.ad-chart rect[data-amt]:hover { opacity: 1 !important; }
.chart-tip { position: fixed; z-index: 700; pointer-events: none; background: var(--ink); color: #fff; font-size: 0.8rem; font-weight: 700; padding: 7px 11px; border-radius: 9px; box-shadow: var(--shadow-lg); white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.chart-tip b { color: #fff; font-weight: 800; opacity: 0.75; }
.chart-tip[hidden] { display: none; }
.ad-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ad-rank { display: flex; flex-direction: column; gap: 6px; }
.ad-rankrow { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 0.9rem; }
.ad-rankrow b { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-rank__n { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.76rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ad-rank__v { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
/* 쿠폰·포인트 폼 */
.ad-cform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ad-inp { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.86rem; background: var(--surface); color: var(--ink); outline: none; flex: 1; min-width: 130px; }
.ad-inp:focus { border-color: var(--ink); }
.ad-inp--sm { flex: 0 0 auto; min-width: 96px; width: 110px; }
.ad-tr--cp { grid-template-columns: 1.2fr 0.9fr 0.9fr 0.8fr 0.7fr 0.8fr 0.9fr 1fr; }
.ad-tr--cp code { background: var(--surface-2); padding: 2px 7px; border-radius: 6px; font-size: 0.82rem; }
.ad-scope { font-size: 0.74rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ad-bearer { font-size: 0.72rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ad-bearer--platform { color: var(--accent); background: var(--accent-soft); }
.ad-bearer--provider { color: #047857; background: rgba(5,150,105,0.1); }
.ad-kpi--mkt b { color: #c0432c; }
.ad-tr--pt { grid-template-columns: 1.4fr 0.8fr 1.4fr 0.9fr 0.7fr; }
.ad-pt-pos { color: var(--ok); font-weight: 800; }
.ad-pt-neg { color: #dc2626; font-weight: 800; }
/* 시스템 설정 */
.ad-cfg { margin-bottom: 14px; }
.ad-cfg__l { display: block; font-size: 0.84rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.ad-cfg textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font-family: inherit; font-size: 0.9rem; line-height: 1.6; resize: vertical; outline: none; background: var(--surface); color: var(--ink); }
.ad-cfg textarea:focus { border-color: var(--ink); }
/* 이용 약관 관리 */
.ad-legal { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; background: var(--surface); overflow: hidden; }
.ad-legal__top { width: 100%; display: flex; align-items: center; gap: 8px; padding: 15px 16px; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.ad-legal__top:hover { background: var(--surface-2); }
.ad-legal__top b { font-size: 1rem; font-weight: 800; }
.ad-legal__chev { margin-left: auto; color: var(--faint); display: inline-flex; }
.ad-legal__chev svg { transform: rotate(90deg); transition: transform 0.18s; }
.ad-legal__top.is-open .ad-legal__chev svg { transform: rotate(-90deg); color: var(--accent); }
.ad-legal__body { padding: 0 16px 16px; }
.ad-legal__row { display: flex; gap: 8px; margin-bottom: 8px; }
.ad-legal__row .ad-inp { margin: 0; }
.ad-legal__row .ad-inp:first-child { flex: 1 1 auto; min-width: 0; }
.ad-legal__row .ad-inp:last-child { flex: 0 0 200px; width: 200px; max-width: 44%; }
@media (max-width: 560px) { .ad-legal__row { flex-wrap: wrap; } .ad-legal__row .ad-inp:last-child { flex: 1 1 100%; width: auto; max-width: none; } }
.ad-legal__ta { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.82rem; line-height: 1.6; resize: vertical; outline: none; background: var(--surface-2); color: var(--ink); }
.ad-legal__ta:focus { border-color: var(--ink); background: var(--surface); }
.ad-legal__act { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ad-legal__act .btn { margin: 0; }
.ad-legal__act .btn--accent { margin-left: auto; }
.ad-tr--adm { grid-template-columns: 1.4fr 1.6fr 1.4fr; }
.ad-permlist { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
/* 회원 상세 정보 모달 */
.ad-info__grid { display: block; }
.ad-info__grid > div { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 0.9rem; color: var(--ink); }
.ad-info__grid > div span { flex-shrink: 0; width: 108px; color: var(--faint); font-weight: 700; }
.ad-info__grid > div b { color: var(--ink); font-weight: 800; }
.ad-info__sec { font-size: 0.82rem; font-weight: 800; color: var(--muted); margin: 18px 0 6px; }
/* 패키지 쿠폰 입력 */
.pkgm__coupon { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.pkgm__coupon input { flex: 1; min-width: 140px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.9rem; background: var(--surface); color: var(--ink); outline: none; }
.pkgm__coupon input:focus { border-color: var(--ink); }
.pkgm__couponmsg { flex: 1 1 100%; font-size: 0.82rem; font-weight: 600; }
.pkgm__couponmsg.ok { color: var(--ok); }
.pkgm__couponmsg.no { color: var(--accent); }
/* 마이페이지 포인트·쿠폰 */
.mp-points { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 18px; padding: 13px 18px; background: var(--accent-soft); border: 1px solid rgba(79,70,229,0.22); border-radius: 12px; font-size: 0.9rem; color: var(--ink-2); }
.mp-points b { color: var(--accent); font-weight: 800; }
.mp-points__bal { display: inline-flex; align-items: center; gap: 6px; }
.mp-cpbtn { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-family: inherit; font-size: 0.88rem; font-weight: 700; color: var(--accent); background: var(--surface); border: 1px solid rgba(79,70,229,0.35); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background 0.13s, box-shadow 0.13s; }
.mp-cpbtn:hover { background: #fff; box-shadow: var(--shadow-sm); }
.mp-cpbtn b { color: var(--accent); }
.mp-cpbtn__chev { font-size: 1.1rem; line-height: 1; margin-left: -1px; }
@media (max-width: 640px) { .mp-cpbtn { margin-left: 0; width: 100%; justify-content: center; } }
/* 쿠폰 모달 */
.modal__card--narrow { max-width: 360px; }
.cpm__note { display: flex; align-items: flex-start; gap: 6px; font-size: 0.82rem; color: var(--ink-2); background: var(--accent-soft); border-radius: 10px; padding: 10px 13px; margin: 2px 0 12px; line-height: 1.45; }
/* 안내문은 반드시 하나의 span으로 감싼다 — flex 컨테이너에서 텍스트 노드와 <b>가 각각
   flex 아이템이 되면 좁은 모달에서 '결제 화/면'처럼 단어 중간이 잘려 보인다 */
.cpm__note > span { flex: 1 1 auto; min-width: 0; word-break: keep-all; }
.cpm__note svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.cpm__note b { color: var(--accent); font-weight: 800; }
.cpm__list { display: flex; flex-direction: column; gap: 10px; }
.cpm__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px dashed var(--line-2); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); }
.cpm__disc { display: flex; flex-direction: column; gap: 3px; }
.cpm__disc b { font-family: var(--serif); font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.cpm__code { font-size: 0.76rem; font-weight: 700; color: var(--faint); letter-spacing: 0.02em; }
.cpm__cond { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); text-align: right; }
.cpm__cond span { color: var(--faint); }
.mp-reviewed { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 700; color: var(--gold); padding: 6px 4px; }
/* 게스트 대시보드 — 다가오는 일정 카드 */
.dash-upwrap { margin-top: 20px; }
.dash-h--main { font-size: 1.05rem; margin-bottom: 14px; }
.dash-upcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.upcard { display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; font-family: inherit; box-shadow: var(--shadow-sm); transition: transform 0.18s, box-shadow 0.18s; }
.upcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.upcard__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.upcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 사진이 없는 일정(견적 요청 등) — 빈 박스로 남지 않게 카테고리 아이콘을 중앙에 표시하고 높이를 낮춘다 */
.upcard__thumb--ico { aspect-ratio: 21/9; display: flex; align-items: center; justify-content: center; }
.upcard__ico { display: flex; color: rgba(255, 255, 255, 0.92); }
.upcard__badge { position: absolute; top: 12px; left: 12px; font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.upcard__dday { position: absolute; top: 12px; right: 12px; font-size: 0.72rem; font-weight: 800; color: #fff; background: rgba(16,14,30,0.62); backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 999px; }
.upcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.upcard__kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; color: var(--accent); }
.upcard__title { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.upcard__meta { display: flex; align-items: center; gap: 5px; font-size: 0.83rem; font-weight: 600; color: var(--ink-2); }
.upcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.upcard__more { font-size: 0.82rem; font-weight: 700; color: var(--accent); }
.dash-upempty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; color: var(--muted); text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.dash-upempty svg { color: var(--faint); }
.dash-upempty p { line-height: 1.5; }
@media (max-width: 860px) { .ad-2col { grid-template-columns: 1fr; } .ad-tr--cp, .ad-tr--pt, .ad-tr--adm { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .ad-tr--prod, .ad-tr--bk { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .ad-tr--prod .ad-tr__act, .ad-tr--bk .ad-tr__act { grid-column: 1 / -1; }
  /* 정산 표 → 라벨 카드형 */
  .ad-table.ad-table--x { overflow-x: visible; }
  .ad-tr--set, .ad-tr--ord { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 16px; }
  .ad-tr--set > span, .ad-tr--ord > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; white-space: normal !important; min-width: 0; }
  .ad-tr--set > span[data-label]::before, .ad-tr--ord > span[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 0.82rem; font-weight: 600; flex-shrink: 0; }
  .ad-tr--ord.ad-tr--h { display: none; }
  .ad-ord__it { align-items: flex-end; }
  .ad-tr--set .ad-tr__id { padding: 0 0 2px; font-size: 1.05rem; }
  .ad-tr--set .ad-tr__id b { font-weight: 800; }
  .ad-tr--set .ad-set-role { justify-content: flex-start; padding: 0 0 9px; border-bottom: 1px solid var(--line-2); margin-bottom: 5px; }
  .ad-tr--set .ad-set-pay { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ad-tr--set .ad-set-pay b { margin-left: auto; font-size: 1.08rem; }
  .ad-tr--set .ad-set-pay .ad-linkbtn--tax { flex-basis: 100%; justify-content: flex-end; margin-top: 5px; }
  .ad-tr--set .ad-st__wrap { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ad-tr--set .ad-st__wrap::before { margin-right: auto; }
  /* 회원 목록 → 라벨 카드형 */
  .ad-tr--u { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 16px; position: relative; }
  .ad-tr--u > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; white-space: normal !important; min-width: 0; }
  .ad-tr--u > span[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 0.82rem; font-weight: 600; flex-shrink: 0; }
  .ad-tr--u .ad-tr__id { padding: 0 70px 8px 0; border-bottom: 1px solid var(--line-2); margin-bottom: 5px; }
  .ad-tr--u .ad-tr__id b { font-size: 1.05rem; font-weight: 800; }
  .ad-tr--u .ad-u-role { position: absolute; top: 14px; right: 16px; padding: 0; }
  .ad-tr--u .ad-tr__act { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 10px; justify-content: flex-start; flex-wrap: wrap; gap: 7px; }
  .ad-tr--u .ad-rolesel { flex: 1 0 96px; }
}
.ad-del { color: #dc2626; border: 1px solid #fecaca; background: #fff; }
.ad-del:hover { background: #fef2f2; }
.ad-st { font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; color: var(--faint); background: var(--surface-2); }
.ad-st--ok { color: var(--ok); background: rgba(5,150,105,0.1); }
.ad-st--pend { color: #b45309; background: rgba(217,119,6,0.12); }
.ad-st--info { color: var(--accent); background: var(--accent-soft); }
.ad-st--rej { color: #dc2626; background: rgba(220,38,38,0.1); }
.ad-st--req { color: #b45309; background: rgba(217,119,6,0.12); }
/*  국세청 사업자등록 확인 배지 — 값은 서버(D1 biz_verify)에서 온다.
    ⚠ '확인'(초록)과 '폐업·불일치'(빨강)와 '미확인'(회색)을 반드시 다른 색으로 둔다.
      회계 항등식이 초록 상자에 '불일치' 라고 적혀 신호가 모순됐던 것과 같은 실수를 막는다. */
.ad-nts { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 2px 7px; border-radius: 999px;
  font-size: .69rem; font-weight: 800; white-space: nowrap; vertical-align: middle; }
.ad-nts svg { flex: 0 0 auto; }
.ad-nts--ok { color: var(--ok); background: rgba(5,150,105,0.1); }
.ad-nts--bad { color: #dc2626; background: rgba(220,38,38,0.1); }
.ad-nts--none { color: var(--faint); background: var(--surface-2); }
/*  입점 신청의 '사업자등록 확인' 은 입력칸 없이 버튼만 있는 줄이다 —
    .hf-verify 는 input+button 을 전제하므로 버튼이 늘어지지 않게 눌러 둔다.      */
.hf-verify--one { display: flex; }
.hf-verify--one > .btn { flex: 0 0 auto; min-width: 148px; }
@media (max-width: 560px) { .hf-verify--one > .btn { flex: 1 1 auto; } }
/* PG 자동 분리정산 — 정산 상태 셀 + 안내 + 세금계산서 조회 */
.ad-st__wrap { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.ad-st__sub { font-size: 0.68rem; font-weight: 700; color: var(--faint); white-space: nowrap; }
.ad-linkbtn--tax { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; }
.ad-note--pg { background: rgba(5,150,105,0.07); border-color: rgba(5,150,105,0.28); }
.ad-note--pg b { color: #047857; }
.ad-note__s { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.ad-taxbox { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ad-taxbox__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; font-size: 0.86rem; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.ad-taxbox__row:last-child { border-bottom: 0; }
.ad-taxbox__row b { font-weight: 800; color: var(--ink); }
.ad-taxbox__row--tot { background: var(--surface-2); }
.ad-taxbox__no { font-family: ui-monospace, monospace; letter-spacing: 0.02em; color: var(--accent) !important; }
/* PG 자동정산 — 마이페이지 정산 패널 */
.payout-box--pg { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px; background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.28); border-radius: 12px; font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }
.payout-box--pg svg { flex-shrink: 0; margin-top: 1px; color: #047857; }
.payout-box--pg b { color: #047857; font-weight: 800; }
.settle-acct__pg { font-size: 0.72rem; font-weight: 700; color: #047857; background: rgba(5,150,105,0.1); padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.settle-split { margin-top: 14px; }
.settle-split__bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--line-2); }
.settle-split__done { background: var(--ok); }
.settle-split__sched { background: rgba(217,119,6,0.55); }
.settle-split__lbl { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 0.82rem; color: var(--muted); }
.settle-split__lbl b { color: var(--ink); font-weight: 800; }
.settle-split__lbl .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.settle-split__lbl .dot--done { background: var(--ok); }
.settle-split__lbl .dot--sched { background: rgba(217,119,6,0.7); }
.ad-st--sus { color: #6b7280; background: #e5e7eb; }
/* 서류 모달 */
.ad-doc { margin-bottom: 14px; }
.ad-doc__t { font-size: 0.84rem; font-weight: 800; color: var(--ink-2); margin-bottom: 7px; }
.ad-doc__files { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-doc__files img { width: 100px; height: 78px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }
.ad-doc__file { font-size: 0.82rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 8px 12px; border-radius: 9px; }
/* 일괄 등록 */
.ad-bulk { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm); max-width: 720px; }
.ad-bulk__t { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.ad-bulk__d { font-size: 0.86rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.ad-bulk__d code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 0.82rem; }
.ad-bulk textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86rem; line-height: 1.6; resize: vertical; outline: none; background: var(--surface); color: var(--ink); }
.ad-bulk textarea:focus { border-color: var(--ink); }
.ad-bulk__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.ad-bulk__res { margin-top: 12px; font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }
@media (max-width: 720px) {
  .ad-tr { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ad-tr--h { display: none; }
  .ad-tr__email { grid-column: 1 / -1; }
  .ad-tr__act { grid-column: 1 / -1; }
}

/* ============================================================
   호스트 공간 등록 (host.html)
   ============================================================ */
.hostreg { max-width: 1080px; margin: 0 auto; padding: 34px 32px 90px; }
.hostreg__head { margin-bottom: 30px; }
.hostreg__title { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.025em; margin: 6px 0 8px; }
.hostreg__sub { color: var(--muted); font-size: 0.96rem; line-height: 1.6; word-break: keep-all; max-width: 38em; }
.hostreg__layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
/*  ⚠ 값을 재서 줄였다. 예전에는 입력칸 46px · 카드 패딩 30px · 필드 간격 18px 라
    1단계 [다음 단계] 버튼 아래끝이 790px 였고, 760px 노트북에서 화면 밖으로 밀렸다.
    도구: scratchpad 의 측정 스크립트(tools/mobile-measure.mjs 와 같은 방식). */
.hf { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: 22px 24px; }
.hf-field { margin-bottom: 13px; }
/* 아래 칸과 붙어 뭉쳐 보이는 자리에만 더 띄운다(활동 지역 → 사업장 주소).
   .hf-field 전체를 넓히면 폼이 길어져 스크롤 압박이 커진다 */
.hf-field--gap { margin-bottom: 18px; }
.hf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .hf-row { grid-template-columns: 1fr; } }
.hf-label { display: block; font-size: 0.84rem; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.hf-label i { color: var(--accent); font-style: normal; }
.hf-opt { font-weight: 500; color: var(--faint); font-size: 0.78rem; }
.hf-hint { display: block; font-size: 0.77rem; color: var(--faint); margin-top: 4px; line-height: 1.45; }
.hf-hint--ok { color: #047857; font-weight: 700; }
.hf-hint--err { color: #c0432c; font-weight: 700; }
.hf-hint--ok svg, .hf-hint--err svg { vertical-align: -2px; }
/* 계좌 실명인증 — 입력창 + 인증 버튼 인라인.
   ⚠ align-items:stretch 로 두면 버튼이 입력칸 높이에 늘어나 글자가 위아래로 떠 보였다.
     둘 다 44px 로 못 박고 center 로 맞춘다 */
.hf-verify { display: flex; gap: 8px; align-items: center; }
.hf-verify input { flex: 1; min-width: 0; }
.hf-verify .btn { flex: 0 0 auto; white-space: nowrap; }
.btn--dark { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn--dark:hover { background: #000; }
.btn--dark.is-ok { background: #047857; border-color: #047857; color: #fff; }

/* ── 입력칸 옆 보조 버튼(우편번호 검색 · 계좌 인증) ─────────────────────────
   회색(btn--soft) 이라 입력칸과 구분이 안 돼 눌러야 할 것인지 몰랐다. 브랜드색
   아웃라인으로 세워 시선을 끈다 — 채우기(solid)는 제출 버튼의 자리이므로 비워 둔다. */
.btn--line { height: 44px; padding: 0 16px; border: 1.5px solid var(--accent);
  background: var(--surface); color: var(--accent); font-weight: 600; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background 0.15s, border-color 0.15s, color 0.15s; }
.btn--line:hover { background: var(--accent-soft); }
.btn--line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 인증이 끝나면 초록으로 굳는다 — 되돌릴 일이 없으므로 잠근 티를 낸다 */
.btn--line.is-ok { border-color: #047857; color: #047857; background: rgba(4, 120, 87, 0.08); }
.btn--line.is-ok svg { color: #047857; }
.btn--line:disabled { cursor: default; }
.btn--line:disabled:hover { background: rgba(4, 120, 87, 0.08); }
/*  ⚠ 체크박스·라디오를 **제외**한다. 바로 아래 높이 규칙은 진작 제외했는데 이 폭·패딩·
    테두리 규칙은 안 해서, .hf 를 새로 쓴 화면에서 체크박스가 100% 로 늘어났다
    (실측 2026-08-24 book.html: 부대서비스 체크박스 65×13 → 라벨이 54px 로 눌려
     글자가 한 자씩 접히고 칩이 103px 로 부풀었다). 체크박스가 100% 폭이어야 하는
    폼은 없다 — 규칙을 높이 쪽과 같은 모양으로 맞춘다.  */
.hf input:not([type="checkbox"]):not([type="radio"]), .hf select, .hf textarea { width: 100%; min-width: 0; max-width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.92rem; font-weight: 600; color: var(--ink); background: var(--surface); outline: none; transition: border-color 0.15s; }
/*  ⚠ 손가락으로 누르는 대상은 42px 아래로 내려가지 않게 못 박는다. 패딩만 줄이면
    number 입력처럼 내용 높이가 작은 칸이 40px 밑으로 떨어져 누르기 어려워진다. */
/* 입력칸 높이를 44px 로 못 박는다 — 옆에 세우는 버튼과 딱 맞아야 줄이 어긋나 보이지 않는다.
   ⚠ min-height 만 두면 select 는 브라우저마다 다른 높이로 자란다. 둘 다 44px 로 맞춘다 */
/*  ⚠ 체크박스·라디오는 이 규칙에서 뺀다. 손가락 크기(44px)는 **글자를 넣는 칸**에
    필요한 것이고, 체크박스에까지 걸면 18px 상자가 44px 로 늘어나 옆 글자와 중심이
    어긋난다(실측 2026-08-24: 44px 상자 중심이 21px 글자 줄 중심보다 **13px 아래**.
    개인정보 제3자 제공 동의 줄이 그래서 삐뚤어 보였다).
    ⚠ :not() 로 빼야 한다 — .hf 안에 체크박스가 여러 곳 있고(동의·옵션·서비스 선택)
      한 곳만 따로 되돌리면 다른 곳이 그대로 어긋난다. */
.hf input:not([type="checkbox"]):not([type="radio"]), .hf select { min-height: 44px; height: 44px; }
.hf textarea { min-height: 44px; }
/* iOS Safari: date/time/number 입력이 네이티브 폭으로 컨테이너를 넘치는 문제 방지 */
.hf input[type="date"], .hf input[type="time"], .hf input[type="datetime-local"], .hf input[type="month"], .hf input[type="number"] { -webkit-appearance: none; appearance: none; }
.hf input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.hf input:focus, .hf select:focus, .hf textarea:focus { border-color: var(--ink); }
.hf textarea { resize: vertical; line-height: 1.6; font-weight: 500; }
.hf-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hf-chk { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); cursor: pointer; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; transition: all 0.15s; text-align: left; }
.hf-chk:hover { border-color: var(--accent); }
.hf-chk input { width: auto; flex-shrink: 0; accent-color: var(--accent); }
.hf-chk:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.hf-chk > span { display: flex; align-items: center; gap: 9px; min-width: 0; word-break: keep-all; line-height: 1.35; }
.hf-chk .ic { flex-shrink: 0; width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.hf-chk--space { font-size: 0.94rem; font-weight: 700; color: var(--ink); padding: 13px 14px; margin-bottom: 10px; }
@media (max-width: 560px) { .hf-checks { grid-template-columns: 1fr; } }
.hf-space { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; background: var(--surface-2); }
.hf-space .hf-row { margin-bottom: 4px; }
.hf-sublabel { font-size: 0.82rem; font-weight: 800; color: var(--muted); margin: 4px 0 8px; }
/* 부대 서비스 — 카테고리별 세부 요청 */
.hf-svc { display: flex; flex-direction: column; }
.hf-svc .ic { vertical-align: -3px; color: var(--accent); }
.hf-svc__note { margin-top: 6px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.84rem; font-family: inherit; }
/* 예약 진행 공간 배너 */
.rq-venue { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 14px; padding: 14px; margin-bottom: 18px; }
.rq-venue[hidden] { display: none; }
/* 카테고리별 요청사항 패널 */
.rqn-title { font-size: 0.92rem; font-weight: 800; margin-bottom: 10px; }
.rqn-title span { font-size: 0.76rem; font-weight: 600; color: var(--faint); margin-left: 4px; }
.rqn-empty { display: flex; align-items: center; gap: 11px; font-size: 0.86rem; line-height: 1.6; word-break: keep-all; color: var(--muted); padding: 15px 16px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 11px; }
.rqn-empty .ic { flex-shrink: 0; color: var(--accent); }
.rqn-empty b { color: var(--ink-2); }
.rqn { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; animation: rqnDown 0.28s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes rqnDown { from { opacity: 0; transform: translateY(-8px); max-height: 0; } to { opacity: 1; transform: none; max-height: 500px; } }
/* 견적 요청 위저드 */
.wz-bar { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 560px; margin: 0 auto 26px; }
/*  단계 표시는 버튼이다 — 눌러서 그 단계로 돌아갈 수 있다(js/request.js 의 #wzBar 핸들러) */
.wz-i { display: flex; align-items: center; gap: 8px; opacity: 0.5; transition: opacity 0.2s;
  border: 0; background: none; font: inherit; padding: 4px 2px; margin: 0; color: inherit;
  -webkit-tap-highlight-color: transparent; }
.wz-i.is-active, .wz-i.is-done { opacity: 1; }
.wz-i:disabled { cursor: default; }
.wz-i.is-go { cursor: pointer; }
.wz-i.is-go:hover .wz-i__l, .wz-i.is-go:focus-visible .wz-i__l { color: var(--accent); text-decoration: underline; }
.wz-i.is-go:hover .wz-i__n { border-color: var(--accent); color: var(--accent); }
.wz-i.is-done.is-go:hover .wz-i__n { color: #fff; border-color: var(--ok); }
.wz-i__n { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 800; background: var(--surface-2); color: var(--muted); border: 1.5px solid var(--line); transition: all 0.2s; }
.wz-i.is-active .wz-i__n { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--glow); }
.wz-i.is-done .wz-i__n { background: var(--ok); color: #fff; border-color: var(--ok); }
.wz-i__l { font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.wz-i__line { flex: 1; max-width: 44px; height: 2px; background: var(--line); }
.wz-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.wz-nav .btn { flex: 1; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(0.3); }
.wz-nav [data-next]:only-child, .wz-nav > span:first-child + [data-next] { flex: 0 0 auto; }
/* 예산 범위 */
.rq-budget { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rq-budget .filt__sel { flex: 1; min-width: 150px; }
/*  '직접 입력' 을 골랐을 때만 나오는 금액 칸 (원 단위 표시를 붙여 무엇을 적는지 분명히) */
.rq-budget__amt { flex: 1 1 150px; min-width: 130px; display: flex; align-items: center; gap: 6px; }
.rq-budget__amt[hidden] { display: none; }
.rq-budget__amt input { flex: 1; min-width: 0; }
.rq-budget__amt em { font-style: normal; font-size: 0.86rem; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
/*  ⚠ 예전에는 flex: 1 0 100% 로 줄을 통째로 차지해 예산 필드만 130px 였다.
    드롭다운 옆에 붙인다(좁아지면 저절로 다음 줄로 내려간다). */
.rq-flex { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 0.86rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; cursor: pointer; margin-top: 4px; }
.rq-flex input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; padding: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.rq-flex span { flex: 0 0 auto; }
.rq-budget { gap: 8px 10px; }
/* 드래그&드롭 업로드 */
.rq-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 18px; border: 2px dashed var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; }
.rq-drop:hover, .rq-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.rq-drop__ic { font-size: 1.5rem; color: var(--accent); }
.rq-drop__t { font-size: 0.9rem; font-weight: 700; }
.rq-drop__d { font-size: 0.78rem; color: var(--muted); }
#rqRefFiles { margin-top: 10px; }
/* 요약 */
.rq-review { margin: 16px 0; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.rq-review__t { display: flex; align-items: center; gap: 9px; font-size: 0.95rem; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.rq-review__ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.rq-review__list { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 0.9rem; color: var(--ink-2); }
.rq-review__list li { display: flex; align-items: center; gap: 9px; }
.rq-review__list li .ic { flex-shrink: 0; color: var(--accent); }
.rq-review__list li span { min-width: 0; }
/*  ⚠ 헤더는 **누르는 것**이다(접기·펼치기) — 커서와 hover 로 알린다. 없으면 접을 수
    있다는 것을 아무도 모른다(기능은 있는데 안 쓰이던 이유다).                    */
.rqn__head { width: 100%; display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 12px 14px; background: var(--surface-2); font-weight: 800; font-size: 0.9rem;
  border: 0; text-align: left; cursor: pointer; }
.rqn__head:hover { background: #eef0f6; }
.rqn__ttl { flex: 0 1 auto; min-width: 0; }
/*  접힌 채로도 무엇을 적었는지 보이게 — 요약이 없으면 접기가 오히려 불편해진다.  */
.rqn__sum { flex: 1 1 auto; min-width: 0; text-align: right; font-size: .76rem; font-weight: 700;
  color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rqn__ttl .ic { vertical-align: -2px; color: var(--accent); }
.rqn__chev { color: var(--faint); }
.rqn__body { padding: 12px 14px; }
.rqn__optlabel { font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.rqn__optlabel b { color: var(--accent); margin-left: 4px; }
/*  안 고르면 자동 견적이 오지 않는다 — 경고가 아니라 안내라서 노랑 계열로 둔다 */
.rqn__optwarn { display: inline-block; margin-left: 4px; font-style: normal; font-weight: 600; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 1px 8px; }
.rqn__opts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.rqn__opt { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.83rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all 0.13s; user-select: none; }
.rqn__opt:hover { border-color: var(--accent); }
.rqn__opt input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.rqn__opt.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.rqn__note { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 0.9rem; resize: vertical; }
/* ── 항목별 희망 예산 + 자동 작성 문장 (견적 요청) ── */
.rqn__bd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; }
.rqn__bdl { font-size: 0.82rem; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.rqn__bdin { display: inline-flex; align-items: center; gap: 5px; }
.rqn__bdin input { width: 130px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 0.88rem; text-align: right; background: var(--surface); }
.rqn__bdin span { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.rqn__bdest { border: 1px solid var(--line-2); background: var(--surface); color: var(--accent); border-radius: 999px; padding: 6px 11px; font-size: 0.78rem; font-weight: 800; cursor: pointer; }
.rqn__bdest:hover { border-color: var(--accent); }
.rqn__bdhint, .rqn__bdrange { font-size: 0.78rem; color: var(--muted); }
.rqn__bdrange { flex: 1 1 100%; }
.rqn__bdrange b { color: var(--accent); }
/*  ⚠ 강조색(accent)을 **배경과 글자에 둘 다** 써서 항목마다 반복될 때 시선을 끌었다.
    여기는 회원이 적는 곳이 아니라 '이렇게 전달된다' 를 보여주는 자리라 보조 정보다.
    ⚠ 그렇다고 너무 낮추지 않는다 — 읽히긴 해야 한다. **배경만** 회색으로 내리고
      글자 크기·색은 그대로 둔다(제목의 accent 색만 한 단계 차분하게).            */
.rqn__auto { margin-bottom: 10px; padding: 10px 12px; background: var(--surface-2, #f6f7fb);
  border: 1px solid var(--line-2); border-radius: 10px; }
.rqn__autot { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.rqn__autot svg { color: var(--accent); }        /* 아이콘만 강조색 — 무엇인지 알아보게 */
.rqn__autot em { font-style: normal; font-weight: 700; color: var(--muted); font-size: 0.74rem; }
.rqn__autox { margin: 0; font-family: inherit; font-size: 0.82rem; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; word-break: keep-all; }
/* 파트너 견적 제출 — 회원 희망 예산 · ±10% 권장 범위 */
.q-bd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; padding: 9px 12px; background: var(--accent-soft); border-radius: 9px; font-size: 0.81rem; color: var(--ink-2); }
.q-bd__l, .q-bd__r { display: inline-flex; align-items: center; gap: 5px; }
.q-bd__l b, .q-bd__r b { color: var(--accent); font-weight: 800; }
.q-price.is-over { border-color: #f0a; box-shadow: 0 0 0 2px rgba(255, 0, 170, 0.12); }
.q-bd__warn { display: block; margin-top: 5px; font-size: 0.78rem; font-weight: 700; color: #b91c1c; }

/* ── 첨부파일 칩 + 미리보기 뷰어 ── */
.atg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.atg__img { position: relative; width: 74px; height: 74px; padding: 0; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.atg__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atg__zoom { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; font-size: 0.68rem; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.15s; }
.atg__img:hover .atg__zoom { opacity: 1; }
.atg__doc { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface-2); font-size: 0.82rem; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.atg__doc:hover { border-color: var(--accent); color: var(--accent); }
.atg__nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atg__sz { font-style: normal; font-weight: 600; color: var(--faint); font-size: 0.74rem; }
.atg__dl { flex-shrink: 0; font-size: 0.72rem; font-weight: 800; color: var(--accent); }
.atv { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.atv[hidden] { display: none !important; }
.atv__bd { position: absolute; inset: 0; background: rgba(12, 14, 20, 0.82); }
.atv__card { position: relative; z-index: 1; width: min(94vw, 900px); max-height: 92vh; background: var(--surface); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.atv__top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.atv__nm { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atv__cnt { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.atv__dl { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 800; text-decoration: none; }
.atv__x { border: 0; background: none; font-size: 1.05rem; color: var(--muted); cursor: pointer; padding: 2px 4px; }
.atv__stage { position: relative; display: flex; align-items: center; justify-content: center; background: #0f1115; min-height: 240px; }
.atv__img { max-width: 100%; max-height: calc(92vh - 56px); object-fit: contain; display: block; }
.atv__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #111; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.atv__nav--prev { left: 10px; } .atv__nav--next { right: 10px; }

/* ── 파트너 단가표(자동매칭) ── */
.vr-own { background: rgba(99, 102, 241, 0.04); }
/*  열 폭 고정 — colgroup 으로 못 박아야 품목명 길이에 따라 숫자 칸이 밀리지 않는다.
    합계 100% 이므로 min-width(720px) 안에서 항상 같은 자리에 정렬된다. */
/* 헤더와 값 모두 가운데 — 내 품목 표와 같은 규칙으로 통일 */
.vr-chev { display: none; }
/*  ── 모바일: 표 → 접이식 카드 ─────────────────────────────────────────────
    min-width:720px 표를 좁은 화면에 그대로 두면 가로 스크롤에 의존해야 하고,
    실제로는 조상 요소에서 잘려 단위 칸만 보이고 드래그도 안 됐다.
    품목명을 누르면 그 품목의 값만 펼치는 카드로 바꿔 가로 스크롤을 아예 없앤다. */
@media (max-width: 760px) {
  /* 접힌 상태: 품목명만 보인다 */
  /* 펼친 상태: 나머지 칸을 2열 그리드로 */
}
/* 단가표에서 제외한 품목 — 되돌릴 수 있게 칩으로 남긴다 */
.vr-off { margin-top: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 10px; }
.vr-off > b { font-size: 0.78rem; font-weight: 800; color: var(--muted); }
.vr-off__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vr-offchip { border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.vr-offchip:hover { border-color: var(--accent); color: var(--accent); }
.vr-offchip i { font-style: normal; font-weight: 800; color: var(--accent); margin-left: 2px; }
.vr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* 매칭 조건 — 파트너가 직접 넣는 키워드 */
.vr-add { display: flex; gap: 7px; align-items: center; }
.vr-add input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 0.86rem; background: var(--surface); }
.vr-add .btn { flex: 0 0 auto; white-space: nowrap; }
.vr-chips--own { margin-top: 8px; align-items: center; }
.vr-mytag { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); border: 1px solid #c7d2fe; color: var(--accent); border-radius: 999px; padding: 5px 7px 5px 11px; font-size: 0.79rem; font-weight: 700; }
.vr-mytag button { border: 0; background: none; color: inherit; opacity: 0.6; font-size: 0.72rem; font-weight: 800; cursor: pointer; padding: 0 2px; line-height: 1; }
.vr-mytag button:hover { opacity: 1; color: #dc2626; }
/* 업종별 안내 문구 */
.vp-guide { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; padding: 9px 12px; background: var(--accent-soft); border-radius: 9px; font-size: 0.81rem; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.vp-guide svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.vp-guide > span { flex: 1 1 auto; min-width: 0; word-break: keep-all; }
/* 상품 목록 컬럼 헤더 (단가·최소수량·최소금액을 한 줄에) */
/*  헤더와 행이 반드시 같은 트랙을 쓸 것 — 따로 선언하면 열이 어긋난다(9열 vs 8열 사고).
    보유·최소금액은 '1000개'·'400000원'이 잘리지 않도록 단위 라벨 폭까지 계산해 고정한다. */
/*  품목명은 좁히고 숫자 열을 넓혀 가운데 정렬 — 7자리(1000000) + 단위 라벨 자리 30px 수용. */
/*  10열 — 사진·품목명·단위·단가·최소수량·최소금액·요청연결·보유·노출·삭제.
    요청 연결(std_key)은 회원 요청과 이을 표준 품목을 고르는 칸이다. 좁으면 표준 품목명이
    잘리므로 96px 을 확보한다. 열이 늘어 폭이 부족하면 아래 반응형에서 카드 모드로 접는다. */
/*  조회형 5칸 — 품목 · 단가 · 조건 · **노출** · 관리.
    ⚠ `1fr` 은 `minmax(auto,1fr)` 이라 줄지 않는 내용이 있으면 그 열이 min-content 만큼
      넓어져 행이 밖으로 잘린다. 그래서 전부 `minmax(0, …)` 이다(공간 카드에서 겪은 그것).
    ⚠ 노출을 **자기 열**로 뺐다. 전에는 관리 칸(148px) 안에 토글이 있었는데
      "토글 23 + 6 + 수정 81 + 6 + 삭제 28 = 144" 로 여유가 4px 뿐이었다 — 간격을 12px 로
      벌리면 156px 으로 넘쳤고, 글자 없는 스위치로 바꾸면 헤더가 `관리` 하나여서
      **무엇을 켜는지 알 수 없었다.** 이제 헤더에 `노출` 이 있어 스위치에 글자가 필요 없다.
      56 + 117 = 173px (옛 148px 대비 +25px, 조건 열에서 나온다). */
.vp-hd, .vp-row { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.4fr) 56px 117px; gap: 12px; }
.vp-stdlink { font-size: 0.78rem; }
.vp-stdlink.is-self { display: flex; align-items: center; justify-content: center; color: var(--faint); font-weight: 700; font-size: 0.74rem; }
/*  border-box 이므로 행의 1px 테두리만큼 내부 트랙이 좁아진다.
    헤더에 투명 테두리를 같이 줘야 두 그리드의 트랙 위치가 정확히 일치한다. */
.vp-hd { display: grid; padding: 0 10px 6px; border: 1px solid transparent; border-top: 0; border-bottom: 0; font-size: 0.72rem; font-weight: 800; color: var(--muted); }
.vp-hd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*  헤더와 값이 정확히 겹치려면 두 요소의 박스 모델이 같아야 한다.
    입력칸은 padding 9/30(오른쪽은 .mg-unit 라벨 자리)이므로 헤더도 같은 여백을 주고 가운데 정렬한다.
    → 라벨 중심과 숫자 중심이 같은 x 좌표에 놓인다. */
.vp-hd .r, .vp-hd .c { text-align: center; }
.vp-hd .r { padding: 0 30px 0 9px; }
/*  ⚠ 머리줄이 숨는 지점은 조회형 행이 접히는 지점(760px)과 **같아야** 한다.
    980 으로 두었더니 950px 에서 머리줄은 사라졌는데 칸은 4열 규칙을 써서 행이 부풀었다
    (실측 46px → 101px). 기준을 하나로 맞춘다. */
@media (max-width: 760px) { .vp-hd { display: none; } }
/* 회원 화면 — 파트너 품목별 단가표 */
.vrate { margin: 12px 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.vrate__h { display: flex; align-items: center; gap: 6px; padding: 10px 13px; background: var(--surface-2); font-size: 0.88rem; font-weight: 800; border-bottom: 1px solid var(--line-2); }
.vrate__h span { font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.vrate__tw { overflow-x: auto; }
.vrate__t { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.vrate__t th { text-align: left; font-size: 0.74rem; font-weight: 800; color: var(--muted); padding: 8px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.vrate__t td { padding: 9px 13px; border-bottom: 1px solid var(--line); }
.vrate__t tbody tr:last-child td { border-bottom: 0; }
.vrate__nm { font-weight: 700; color: var(--ink-2); }
.vrate__p { white-space: nowrap; } .vrate__p b { color: var(--accent); font-weight: 800; }
.vrate__m { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.vrate__fee, .vrate__note { margin: 0; padding: 8px 13px; font-size: 0.78rem; color: var(--muted); border-top: 1px solid var(--line); }
.vrate__note { background: var(--surface-2); }
/* 업체 카드 — 대표 품목 단가 */
.v-card__rates { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin: 8px 0; cursor: pointer; }
.v-rate { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); font-size: 0.76rem; }
.v-rate em { font-style: normal; color: var(--ink-2); font-weight: 700; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-rate b { color: var(--accent); font-weight: 800; }
.v-rate i { font-style: normal; color: var(--faint); font-size: 0.72rem; }
.v-rate--more { color: var(--muted); font-weight: 700; }
/* 요청 폼 — 규모 입력 */
.rqn__scale { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; }
.rqn__scl { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.rqn__sclin { display: inline-flex; align-items: center; gap: 5px; }
.rqn__sclin input { width: 110px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 0.86rem; text-align: right; background: var(--surface); }
.rqn__sclin em { font-style: normal; font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.rqn__sclhint { flex: 1 1 100%; display: flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--muted); font-weight: 600; }

/* ── A트랙: 업체 상세에서 품목 담기 ── */
.vrate__pick { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.vrate__min { display: block; margin-top: 2px; font-style: normal; font-size: 0.72rem; color: var(--faint); font-weight: 600; }
.vrate__q { width: 74px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 7px; font: inherit; font-size: 0.84rem; text-align: right; background: var(--surface); }
.vrate__q:disabled { background: var(--surface-2); color: var(--faint); }
.vrate__sumh, .vrate__sum { text-align: right; white-space: nowrap; }
.vrate__sum { color: var(--faint); font-size: 0.84rem; }
.vrate__sum.is-on { color: var(--ink-2); }
.vrate__sum b { color: var(--accent); font-weight: 800; }
.vrate__total { padding: 10px 13px; border-top: 1px solid var(--line-2); background: var(--accent-soft); }
.vrate__tl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.85rem; }
.vrate__tl b { font-weight: 800; }
.vrate__tl--sub { color: var(--muted); font-size: 0.8rem; margin-top: 3px; }
.vrate__tl--fin { margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--line-2); font-size: 0.95rem; }
.vrate__tl--fin b { color: var(--accent); font-size: 1.12rem; }
.vreq__pickhint { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
/* 파트너 카드 — 타 카테고리는 개수만 */
.hreq-etc { font-style: normal; color: var(--faint); font-weight: 600; }
/* 예약 완료 → 견적 요청 유도 배너 */
.svcprompt { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 13px 16px; background: var(--accent-soft); border: 1px solid var(--line-2); border-radius: 12px; }
.svcprompt__ic { flex-shrink: 0; display: flex; color: var(--accent); }
.svcprompt__tx { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; color: var(--ink-2); }
.svcprompt__tx em { display: block; margin-top: 2px; font-style: normal; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.svcprompt__x { flex-shrink: 0; border: 0; background: none; color: var(--muted); font-size: 0.95rem; cursor: pointer; padding: 2px 4px; }
@media (max-width: 700px) { .svcprompt { flex-wrap: wrap; } .svcprompt__tx { flex: 1 1 100%; order: 2; } }

/* ── 견적 제출: 품목 동적 테이블 (단가·수량 → 합계 자동 계산) ── */
.qt { margin: 0 0 12px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.qt__h { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: 0.83rem; font-weight: 800; color: var(--ink-2); }
.qt__h span { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.qt__fill { margin-left: auto; border: 1px solid var(--line-2); background: var(--surface); color: var(--accent); border-radius: 999px; padding: 5px 10px; font-size: 0.74rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.qt__fill:hover { border-color: var(--accent); }
/* 폭이 좁아도 잘리지 않게 — 고정폭 대신 비율 컬럼(table-layout:fixed) + 전 요소 min-width:0 */
.qt, .qt__tw, .qt__foot { min-width: 0; }
.qt__tw { overflow-x: hidden; }
.qt__t { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.84rem; }
.qt__t th { text-align: left; font-size: 0.72rem; font-weight: 800; color: var(--muted); padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.qt__t td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.qt__t tbody tr:last-child td { border-bottom: 0; }
.qt__t col.qt-c1 { width: 30px; } .qt__t col.qt-c2 { width: auto; }
.qt__t col.qt-c3 { width: 92px; } .qt__t col.qt-c4 { width: 68px; } .qt__t col.qt-c5 { width: 96px; }
.qt__ck { width: 30px; text-align: center; }
.qt__nm { min-width: 0; }
.qt__nm input { width: 100%; min-width: 0; }
.qt__nm em { display: block; margin-top: 1px; font-style: normal; font-size: 0.7rem; color: var(--faint); font-weight: 700; }
.qt__t input[type="text"], .qt__t input[type="number"] { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 7px; font: inherit; font-size: 0.83rem; background: var(--surface); }
/*  ⚠ 스핀 버튼 제거는 전역으로 올렸다(파일 앞쪽). 여기서는 정렬만 정한다. */
.qt__t input[type="number"] { text-align: right; }
.qt__amh, .qt__am { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt__am { color: var(--faint); font-size: 0.83rem; }
.qt__am b { color: var(--accent); font-weight: 800; }
.qt__fee td { background: rgba(99, 102, 241, 0.05); }
.qt__t tr.is-off { opacity: 0.5; }
.qt__foot { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line-2); background: var(--accent-soft); }
.qt__add { border: 1px dashed var(--line-2); background: var(--surface); color: var(--muted); border-radius: 8px; padding: 5px 10px; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.qt__add:hover { border-color: var(--accent); color: var(--accent); }
.qt__sum { margin-left: auto; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); }
.qt__sum b { color: var(--accent); font-size: 1.05rem; font-weight: 800; }
.qt__warn { margin: 0; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 0.76rem; font-weight: 700; color: #b45309; background: #fffbeb; }

/* ── 지역 2단계 선택 (시·도 → 시·군·구) ── */
/* 회원 KPI 포커스 필터 배너 — "결제 대기만 보고 있어요 / 전체 보기" */
.memfocus { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 13px; background: var(--accent-soft); border: 1px solid var(--line-2); border-radius: 10px; }
.memfocus__t { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--ink-2); }
.memfocus__t b { color: var(--accent); font-weight: 800; }
.memfocus__x { flex-shrink: 0; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 5px 11px; font-size: 0.76rem; font-weight: 800; cursor: pointer; }
.memfocus__x:hover { border-color: var(--accent); color: var(--accent); }
.dash-kpi { cursor: pointer; }

/* 필터바의 지역 2단계 (업체 목록·공간 찾기)
   검색창이 남는 폭을 다 먹어 시·군·구 셀렉트가 잘리던 문제 → 셀렉트에 고정폭을 주고 검색창을 줄인다 */
/*  지역 셀렉트를 화면에서만 감춘다 — 값은 그대로 상태 보관함으로 쓴다.
    ⚠ display:none 이 아니다. 감춘 셀렉트에도 값이 들어가고 change 가 흘러야 한다
      (js/regionpick.js 가 여기에 값을 넣고, 필터는 이 value 를 읽는다).
      hidden 속성이나 display:none 을 쓰면 브라우저마다 dispatchEvent 동작이 갈린다. */
.v-region2--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.v-region2 { display: flex; flex: 0 0 auto; gap: 6px; }
.v-region2 select {
  flex: 0 0 auto; width: 132px; min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 12px; background: var(--surface); font-weight: 600; text-overflow: ellipsis;
}
.v-region2 select:last-child { width: 152px; }
.v-region2 select:disabled { color: var(--faint); background: var(--surface-2); }
@media (max-width: 860px) {
  .v-region2 { flex: 1 1 100%; }
  .v-region2 select, .v-region2 select:last-child { flex: 1 1 0; width: auto; }
}
.hf-region { display: flex; gap: 8px; }
.hf-region select { flex: 1 1 0; min-width: 0; }
.hf-region select:disabled { color: var(--faint); background: var(--surface-2); }
/* 업체 목록 — 예산 이하 필터 */
.vbud { display: inline-flex; align-items: center; gap: 4px; }
.vbud input { width: 104px; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 0.84rem; text-align: right; background: var(--surface); }
.vbud em { font-style: normal; font-size: 0.8rem; color: var(--muted); font-weight: 700; }
@media (max-width: 640px) { .vbud input { width: 88px; } }
/* 좁은 화면(모바일·분할 화면) — 표를 행 단위 카드로 쌓아 잘림 없이 전부 보이게 */
@media (max-width: 620px) {
  .qt__t, .qt__t tbody, .qt__t tr, .qt__t td { display: block; width: auto; }
  .qt__t colgroup, .qt__t thead { display: none; }
  .qt__t tr { position: relative; padding: 9px 10px 9px 34px; border-bottom: 1px solid var(--line); }
  .qt__t tr:last-child { border-bottom: 0; }
  .qt__t td { border: 0; padding: 3px 0; }
  .qt__t td.qt__ck { position: absolute; left: 10px; top: 12px; padding: 0; width: auto; }
  .qt__t td:nth-child(3)::before { content: "단가"; }
  .qt__t td:nth-child(4)::before { content: "수량"; }
  .qt__t td:nth-child(3), .qt__t td:nth-child(4) { display: flex; align-items: center; gap: 8px; }
  .qt__t td:nth-child(3)::before, .qt__t td:nth-child(4)::before { flex: 0 0 42px; font-size: 0.74rem; font-weight: 800; color: var(--muted); }
  .qt__t td.qt__am { text-align: left; padding-top: 5px; font-weight: 700; }
  .qt__t td.qt__am::before { content: "소계 "; font-size: 0.74rem; font-weight: 800; color: var(--muted); }
}
.vr-seg { display: flex; flex-wrap: wrap; gap: 7px; }
/* 자동 산출 견적 (파트너 견적 제출) */
.rqn__files { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.rqn-file { position: relative; display: inline-flex; align-items: center; gap: 5px; }
.rqn-file img { width: 54px; height: 42px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); }
.rqn-file button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.65rem; }
.rqn-file--doc { font-size: 0.76rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 5px 10px 5px 8px; border-radius: 999px; }
.rqn-file--doc button { position: static; width: 15px; height: 15px; margin-left: 3px; }
.rqn__add { display: inline-block; margin-top: 10px; font-size: 0.82rem; font-weight: 700; color: var(--accent); cursor: pointer; }
/* 사업자 등록 */
/* 섹션 사이 26px 는 폼이 여섯 구역이라 그것만 130px 이 된다 — 18px 로 줄여
   스크롤을 덜어낸다(구분선이 이미 구역을 갈라 주므로 여백에 덜 의존해도 된다) */
.hf-sec { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 18px 0 11px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.hf-sec:first-of-type { margin-top: 6px; }
.bz-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bz-doc { border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: var(--surface); }
.bz-doc__head { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.bz-doc__req { font-size: 0.68rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; }
.bz-doc__opt { font-size: 0.68rem; font-weight: 700; color: var(--faint); background: var(--surface-2); padding: 2px 7px; border-radius: 999px; }
/* 핵심 옵션 해시태그 */
.sp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.sp-tags--head { margin-top: 14px; }
/*  ⚠ 반경은 알약(999px)으로 통일했다. 8px 이었을 때 한 카드 안에 세 반경이 섞였다 —
    실측: 태그 8px · 썸네일 13px · 바로예약 배지 999px. "검색 페이지 배지가 각지고
    투박하다" 는 신고의 실제 원인이 이것이었다(검색과 메인은 같은 클래스를 쓰므로
    페이지 차이가 아니었다). 글자를 담는 작은 조각은 999px, 상자는 12~16px 이다.   */
.optag { font-size: 0.72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; letter-spacing: -0.01em; }
/*  ── 부대서비스 연계 배지 (js/svclink.js) ─────────────────────────────────
    "이 공간 지역에 오는 파트너가 몇 곳" — 파트너 레코드에서 센 실제 숫자다.
    ⚠ 카드 전체가 눌리는 영역이라 안쪽 링크는 stopPropagation 을 한다(svclink.js).
    ⚠ 한 줄로 굴린다. 두 줄이 되면 카드 높이가 카드마다 달라져 격자가 흔들린다.   */
/*  태그칩 줄 + 부대서비스 줄을 **한 줄**로 합치는 감싸개(공간찾기 카드).
    ⚠ 두 자식이 각각 블록이라 두 줄을 먹었다. 여기서 나란히 놓고, 좁으면 접힌다.
    ⚠ 자식들의 위쪽 여백을 지운다 — 감싸개가 여백을 가지므로 두 번 들어가면 줄이
      다시 벌어져 합친 효과가 사라진다. */
.sp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; min-width: 0; }
.sp-chips > .sp-tags, .sp-chips > .sp-svc { margin-top: 0; }
.sp-chips > .sp-tags--row { min-height: 0; }
.sp-svc { display: flex; align-items: center; gap: 5px; margin: 7px 0 0; overflow: hidden; }
.sp-svc__b { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 8px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
  font-size: 0.7rem; font-weight: 700; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; transition: border-color .15s, color .15s; }
.sp-svc__b > span { overflow: hidden; text-overflow: ellipsis; }
.sp-svc__b > em { font-style: normal; font-weight: 800; color: var(--accent); }
.sp-svc__b svg { flex: 0 0 auto; opacity: .75; }
.sp-svc__b:hover { border-color: var(--accent); color: var(--accent); }
.sp-svc__more { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; color: var(--faint); }
/*  ⚠ 메인은 모바일에서 2열이라 카드가 172px 다 — 배지 두 개를 넣으면 **둘 다 잘려**
    "촬영… 2" "기… 1" 이 된다(실측 2026-08-19: 잘림 2 · 공간찾기는 358px 라 0).
    잘린 이름은 아무 것도 알려주지 않으므로 좁은 격자에서는 **하나만** 보여준다.
    ⚠ 격자로 갈라야 한다 — 폭이 아니라 열 수가 원인이다(같은 390px 에서 공간찾기는
      1열이라 두 개가 들어간다). 그래서 .grid(메인) 에만 건다.                  */
@media (max-width: 760px) {
  .grid .sp-svc__b:nth-of-type(2), .grid .sp-svc__more { display: none; }
}
.optag--lg { font-size: 0.82rem; padding: 5px 12px; border-radius: 10px; }
.optag--edit { display: inline-flex; align-items: center; gap: 5px; background: var(--accent); color: #fff; font-weight: 800; padding: 5px 11px; box-shadow: 0 3px 10px -4px rgba(79,70,229,0.6); }
.optag--edit button { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.28); color: #fff; font-size: 0.62rem; }
.optag--edit button:hover { background: rgba(255,255,255,0.5); }
.tagin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.tagin:focus-within { border-color: var(--ink); }
.tagin__list { display: contents; }
.tagin__input { flex: 1; min-width: 140px; border: none; outline: none; background: none; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.tagsug { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.tagsug__b { font-size: 0.8rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; transition: all 0.15s; }
.tagsug__b:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* 호스트 폼 — 이미지 드롭존 */
.dropzone { border: 2px dashed var(--line); border-radius: 14px; padding: 26px 18px; text-align: center; cursor: pointer; background: var(--surface-2); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus-visible, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.dropzone__ic { font-size: 1.5rem; }
.dropzone__t { font-size: 0.9rem; font-weight: 700; color: var(--ink-2); margin-top: 4px; }
.dropzone__t b { color: var(--accent); }
.dropzone__s { font-size: 0.78rem; color: var(--faint); margin-top: 3px; }
.hf-urladd { display: flex; gap: 8px; margin-top: 10px; }
.hf-urladd input { flex: 1; min-width: 0; }
.hf-urladd .btn { flex: 0 0 auto; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; }
.ph-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); cursor: grab; background: var(--surface-2); }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ph-thumb.is-rep { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ph-thumb.is-drag { opacity: 0.4; }
.ph-thumb__rep { position: absolute; left: 5px; bottom: 5px; font-size: 0.64rem; font-weight: 800; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 999px; }
.ph-thumb__x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(15,23,42,0.6); color: #fff; font-size: 0.66rem; display: flex; align-items: center; justify-content: center; }
.ph-thumb__x:hover { background: #e2402f; }
/* 편의시설 직접 추가 */
.amen-add { display: flex; gap: 8px; margin-top: 10px; }
.amen-add input { flex: 1; min-width: 0; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.9rem; font-family: inherit; outline: none; }
.amen-add input:focus { border-color: var(--ink); }
.amen-add .btn { flex: 0 0 auto; }
.hf-chk--custom { position: relative; padding-right: 30px; }
.hf-chk__x { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 0.58rem; display: inline-flex; align-items: center; justify-content: center; }
.hf-chk__x:hover { background: #e2402f; color: #fff; }
/*  이 클래스는 원래 '편의시설 칩' 안에 겹쳐 놓는 절대배치 전용이다.
    그리드 칸(.vp-row)에서 그대로 쓰면 부모에 position 이 없어 엉뚱한 곳으로 떠버려
    화면에서 사라진다 — 그런 자리에서는 정적 배치로 되돌린다. */
.vp-row .hf-chk__x { position: static; transform: none; width: 21px; height: 21px; margin: 0 auto; border: 1px solid var(--line-2); font-size: 0.62rem; font-weight: 800; cursor: pointer; padding: 0; }
.vp-row .hf-chk__x:hover { background: #e2402f; border-color: #e2402f; color: #fff; }
/* 가격 원 단위 · 주소 검색 */
.hf-suffix { position: relative; }
.hf-suffix__u { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; font-weight: 700; color: var(--muted); pointer-events: none; }
.hf-suffix input { padding-right: 34px; }
.hf-addr { display: flex; gap: 8px; }
.hf-addr input { flex: 1; min-width: 0; }
.hf-addr .btn { flex: 0 0 auto; white-space: nowrap; }
.section__more { font-size: 0.9rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.section__more:hover { text-decoration: underline; }
/* ===== 역경매 이용 가이드 모달 ===== */
.gmodal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; }
.gmodal[hidden] { display: none; }
.gmodal__bd { position: absolute; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(3px); }
.gmodal__card { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: var(--surface); border-radius: 4px; padding: 30px 28px; box-shadow: var(--shadow-lg); animation: gpop 0.25s cubic-bezier(0.2,0.8,0.3,1); }
@keyframes gpop { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.gmodal__x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); font-size: 1rem; background: var(--surface-2); }
.gmodal__x:hover { color: var(--ink); }
/* 회원가입 약관 동의 */
.su-agree { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); font-size: 0.84rem; line-height: 1.55; color: var(--ink-2); cursor: pointer; transition: border-color 0.15s; }
.su-agree input { width: 18px; height: 18px; min-width: 18px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.su-agree--err { border-color: #e2402f; background: rgba(226, 64, 47, 0.05); }
.su-link { display: inline; padding: 0; background: none; border: none; font: inherit; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.su-link:hover { color: var(--ink); }
/* 약관 모달 본문 */
.terms-head { margin-bottom: 16px; padding-right: 40px; }
.terms-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 4px; }
/* 공간 상세 — 숨김/비공개 안내 */
.sp-unavail { max-width: 520px; margin: 60px auto; text-align: center; padding: 40px 24px; }
.sp-unavail__ic { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--faint); }
.sp-unavail h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.02em; }
.sp-unavail p { color: var(--muted); line-height: 1.65; margin: 0 0 24px; }
.sp-unavail__act { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.terms-updated { font-size: 0.78rem; color: var(--faint); font-weight: 600; }
.terms-body { font-size: 0.88rem; line-height: 1.65; color: var(--ink-2); }
.terms-body h4 { font-size: 0.92rem; font-weight: 800; color: var(--ink); margin: 18px 0 6px; }
.terms-body h4:first-child { margin-top: 0; }
.terms-body p { margin: 0 0 8px; }
.terms-body ol,
.terms-body ul { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.terms-body ol li,
.terms-body ul li { padding-left: 2px; word-break: keep-all; }
.terms-body b { color: var(--ink); font-weight: 700; }
.terms-demo { margin-top: 14px; padding: 10px 12px; background: var(--surface-2); border-radius: 9px; font-size: 0.78rem; color: var(--faint); }
.guide__eyebrow { display: inline-block; font-size: 0.74rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 5px 12px; border-radius: 999px; }
.guide__title { font-family: var(--serif); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 8px; }
.guide__lead { font-size: 0.95rem; color: var(--muted); line-height: 1.6; }
.guide__lead b { color: var(--ink); }
.guide__diagram { margin: 20px 0 8px; padding: 18px; background: var(--surface-2); border-radius: 16px; text-align: center; }
.gdia__vendors { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gdia__v { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 800; color: var(--ink-2); background: var(--surface); border: 1.5px solid var(--line); padding: 9px 15px; border-radius: 14px; box-shadow: var(--shadow-sm); transition: transform 0.14s; }
.gdia__v:hover { transform: translateY(-2px); }
.gdia__v .ic, .gdia__v svg { width: 20px; height: 20px; }
.gdia__v--blue { border-color: rgba(79,70,229,0.4); background: rgba(79,70,229,0.07); color: var(--accent); }
.gdia__v--pink { border-color: rgba(236,72,153,0.4); background: rgba(236,72,153,0.07); color: #db2777; }
.gdia__v--yellow { border-color: rgba(234,179,8,0.45); background: rgba(234,179,8,0.10); color: #b7791f; }
.gdia__arrow { margin: 12px 0; }
.gdia__arrowtx { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 5px 12px; border-radius: 999px; }
.gdia__arrow::after { content: "▼"; display: block; color: var(--accent); font-size: 0.7rem; margin-top: 6px; }
.gdia__me { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 800; color: #fff; background: linear-gradient(100deg, var(--accent), var(--accent-2)); padding: 11px 22px; border-radius: 999px; box-shadow: var(--glow); }
.gdia__metrophy { font-size: 1.15rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
/* 스텝 아이콘 3색 로테이션 (파랑·핑크·노랑·파랑) */
.gstep--c0 .gstep__ic { background: rgba(79,70,229,0.12); color: var(--accent); }
.gstep--c1 .gstep__ic { background: rgba(236,72,153,0.12); color: #db2777; }
.gstep--c2 .gstep__ic { background: rgba(234,179,8,0.16); color: #b7791f; }
.gstep--c3 .gstep__ic { background: rgba(5,150,105,0.13); color: var(--ok); }
.gstep--c0 .gstep__n { background: var(--accent); }
.gstep--c1 .gstep__n { background: #db2777; }
.gstep--c2 .gstep__n { background: #ca8a04; }
.gstep--c3 .gstep__n { background: var(--ok); }
.guide__steps { list-style: none; margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gstep { display: flex; flex-direction: column; gap: 6px; padding: 15px 15px 16px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 15px; opacity: 0; transform: translateY(8px); animation: gstepin 0.4s ease forwards; animation-delay: calc(var(--i) * 0.09s + 0.1s); }
/*  아이콘 · 제목 · 번호를 **한 줄**에 둔다(사용자 지시 2026-08-21). 전에는 제목이
    아이콘 줄 아래로 내려와 카드가 3층이었다.
    ⚠ 제목이 두 줄로 접히면 '한 줄' 이 아니게 되므로 세 값을 함께 조인다 —
      아이콘 40→34px · 제목 0.98→0.92rem · 번호 26→22px. 실측으로 골랐다
      (가장 긴 "파트너가 견적 경쟁" 이 카드 안에 한 줄로 들어가야 한다).
    ⚠ keep-all 을 둔다 — 접힐 때라도 낱말 중간에서 끊기지 않게. */
.gstep__top { display: flex; align-items: center; gap: 9px; }
.gstep__t { flex: 1; min-width: 0; font-size: 0.92rem; font-weight: 800; margin: 0;
  line-height: 1.3; word-break: keep-all; }
.gstep__d { font-size: 0.83rem; color: var(--muted); line-height: 1.5; word-break: keep-all; }
@media (max-width: 480px) { .guide__steps { grid-template-columns: 1fr; } }
@keyframes gstepin { to { opacity: 1; transform: none; } }
.gstep__n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.74rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gstep__ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.gstep__tx { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.gstep__tx b { font-size: 0.98rem; font-weight: 700; }
.gstep__tx span { font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.guide__why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.gwhy { text-align: center; padding: 15px 8px; border-radius: 13px; display: flex; flex-direction: column; gap: 3px; border: 1px solid transparent; }
.gwhy--0 { background: rgba(79,70,229,0.08); border-color: rgba(79,70,229,0.18); }
.gwhy--1 { background: rgba(236,72,153,0.08); border-color: rgba(236,72,153,0.18); }
.gwhy--2 { background: rgba(234,179,8,0.10); border-color: rgba(234,179,8,0.22); }
.gwhy__e { font-size: 1.5rem; }
.gwhy__ic { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 3px; }
.gwhy--0 .gwhy__ic { color: var(--accent); }
.gwhy--1 .gwhy__ic { color: #db2777; }
.gwhy--2 .gwhy__ic { color: #b7791f; }
.gdia__meic { display: inline-flex; align-items: center; }
.gwhy b { font-size: 0.86rem; font-weight: 800; }
.gwhy span { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.guide-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft); border-color: rgba(79, 70, 229, 0.28); color: var(--accent); font-weight: 700; }
.guide-btn:hover { background: rgba(79, 70, 229, 0.14); border-color: var(--accent); }
.guide-play { flex-shrink: 0; }
.how-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 480px) {
  .gmodal__card { padding: 26px 20px; }
  /* 혜택 3종 — 아이콘+제목 한 줄 컴팩트 칩(설명은 숨겨 두 줄 내로) */
  .guide__why { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
  .gwhy { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px; text-align: center; }
  .gwhy__ic { margin-bottom: 0; }
  .gwhy__ic svg { width: 17px; height: 17px; }
  .gwhy b { font-size: 0.76rem; white-space: nowrap; }
  .gwhy span { display: none; }
}
/* ===== 패키지 기획전 ===== */
/* 매거진형 히어로 — 배경 사진 + 딤 오버레이 + 화이트 타이포 */
.pkg-hero { position: relative; background-color: #14121f; background-image: linear-gradient(180deg, rgba(16,14,30,0.58) 0%, rgba(16,14,30,0.66) 46%, rgba(16,14,30,0.90) 100%), url("https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?w=1680&h=900&fit=crop&q=80"); background-size: cover; background-position: center 42%; background-repeat: no-repeat; }
.pkg-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 88px; background: linear-gradient(180deg, transparent 0%, var(--bg) 100%); pointer-events: none; z-index: 0; }
.pkg-hero__inner { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; padding: 108px 32px 82px; }
.pkg-hero .hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em; padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 22px -8px rgba(0,0,0,0.45); }
.pkg-hero__title { font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; margin: 16px 0 14px; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.28); }
.pkg-hero__sub { font-size: 1.05rem; color: rgba(255,255,255,0.82); max-width: 560px; line-height: 1.7; word-break: keep-all; }
.pkg-hero__sub b { color: #fff; font-weight: 700; }
.pkg-hero__stats { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 40px; }
.pkg-hstat { display: flex; align-items: center; gap: 11px; }
.pkg-hstat__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.22); color: #fff; backdrop-filter: blur(6px); }
.pkg-hstat__tx strong { display: block; font-family: var(--serif); font-size: 1.34rem; font-weight: 800; color: #fff; line-height: 1.1; }
.pkg-hstat__tx span { font-size: 0.78rem; color: rgba(255,255,255,0.7); font-weight: 600; }
@media (max-width: 560px) { .pkg-hero__inner { padding: 84px 24px 56px; } .pkg-hero__stats { gap: 18px 26px; } }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 30px; }
.pkg-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pkg-card__thumb { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.pkg-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 배지: 할인=브랜드 1점 · 나머지=모노톤 프로스트 라벨 */
.pkg-card__badge { position: absolute; top: 13px; left: 13px; font-size: 0.71rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 999px; box-shadow: 0 2px 10px -4px rgba(0,0,0,0.35); }
.pkg-card__save { position: absolute; top: 13px; right: 13px; font-size: 0.73rem; font-weight: 800; color: #fff; background: var(--accent); padding: 5px 11px; border-radius: 999px; box-shadow: 0 3px 12px -3px rgba(79,70,229,0.6); }
.pkg-card__body { padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pkg-card__theme { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; color: var(--accent); }
.pkg-card__title { font-family: var(--serif); font-size: 1.26rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.32; }
.pkg-card__sub { font-size: 0.88rem; color: var(--muted); line-height: 1.62; letter-spacing: 0.005em; }
.pkg-card__meta { display: flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); flex-wrap: wrap; margin-top: 2px; }
.pkg-card__meta .ic { vertical-align: -2px; }
.pkg-card__dot { color: var(--faint); margin: 0 3px; }
.pkg-card__incl { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 11px 13px; line-height: 1.5; letter-spacing: 0.005em; }
.pkg-card__incl > svg { flex-shrink: 0; color: var(--accent); }
.pkg-card__incl b { color: var(--ink-2); font-weight: 800; }
.vinfo-items__t { display: inline-flex; align-items: center; gap: 6px; }
.vinfo-items__t svg { color: var(--accent); flex-shrink: 0; }
/* 인라인 라인 아이콘 — 텍스트 기준선 정렬 + 배지/칩 정렬 */
svg.ic { vertical-align: -0.16em; }
.sp-card__flash, .book__flash { display: inline-flex; align-items: center; gap: 2px; }
.sp-card__flash svg.ic, .book__flash svg.ic, .optag svg.ic { vertical-align: 0; }
.optag { display: inline-flex; align-items: center; gap: 4px; }
.share__ic { display: inline-flex; align-items: center; justify-content: center; }
.co-method span { display: inline-flex; align-items: center; gap: 7px; }
/* 참여 파트너 — 모노톤 아바타 칩 · 가로 스크롤 */
.pkg-card__pwrap { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.pkg-card__plabel { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; color: var(--faint); }
.pkg-card__partners { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; scroll-behavior: smooth; }
.pkg-card__partners::-webkit-scrollbar { display: none; }
.pkg-card__partners.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.pkg-card__partners.is-dragging .pkg-partner { pointer-events: none; }
.pkg-partner { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 0.76rem; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.pkg-partner:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--ink); }
.pkg-partner__av { width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.pkg-partner__av svg { display: block; }
.pkg-partner__av--host { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.pkgm__partner { display: inline-flex; align-items: center; gap: 4px; }
.pkgm__partner svg { flex-shrink: 0; }
.pkg-card__cta { margin-top: 14px; font-weight: 800; }
.pkgm__partner { color: var(--ink-2); font-weight: 700; }
/* 예약·결제 금액 요약 바 */
.ad-bksum { display: flex; flex-direction: column; gap: 7px; padding: 16px; margin-top: 12px; background: var(--surface-2); border-radius: 11px; }
.ad-bksum__i { display: flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: 0.84rem; color: var(--muted); font-weight: 600; }
.ad-bksum__i b { margin-left: 4px; font-family: var(--serif); font-size: 0.98rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
/* 순매출 = 헤드라인 강조 */
.ad-bksum__i--net { padding-bottom: 9px; margin-bottom: 3px; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); font-weight: 700; }
.ad-bksum__i--net b { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.ad-bksum__i--rf b { color: var(--accent); }
/* 패키지 관리 — 드래그 정렬 리스트 */
.ad-pkgcards { display: flex; flex-direction: column; gap: 10px; }
.ad-pkgcard { display: flex; align-items: stretch; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, opacity 0.15s, transform 0.1s; }
.ad-pkgcard.is-hidden { opacity: 0.55; }
.ad-pkgcard.dragging { opacity: 0.4; box-shadow: var(--shadow-lg); border-color: var(--accent); }
.ad-pkgcard__grip { flex-shrink: 0; display: flex; align-items: center; font-size: 1.3rem; color: var(--faint); cursor: grab; user-select: none; }
.ad-pkgcard:active .ad-pkgcard__grip { cursor: grabbing; }
.ad-pkgcard__ord { flex-shrink: 0; align-self: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ad-pkgcard__main { flex: 1; min-width: 0; }
.ad-pkgcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ad-pkgcard__title { display: block; font-size: 1.02rem; font-weight: 800; margin: 3px 0; }
.ad-pkgcard__price { font-size: 0.82rem; color: var(--muted); }
.ad-pkgcard__act { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.ad-pkgcard__stat { display: flex; gap: 18px; margin: 12px 0; padding: 10px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font-size: 0.86rem; color: var(--muted); }
.ad-pkgcard__stat b { color: var(--ink); font-weight: 800; margin-left: 3px; }
.ad-pkgcard__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ad-pkgcard__plabel { font-size: 0.72rem; font-weight: 800; color: var(--faint); margin-right: 2px; }
.pkg-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.pkg-card__price { display: flex; flex-direction: column; }
.pkg-card__list { font-size: 0.78rem; color: var(--faint); text-decoration: line-through; }
.pkg-card__price b { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; color: var(--ink); }
.pkg-card__price em { font-size: 0.9rem; font-weight: 600; font-style: normal; margin-left: 1px; }
/* 패키지 상세·결제 모달 */
.pkgm { position: relative; }
.pkgm__thumb { position: relative; height: 170px; margin: -22px -22px 16px; overflow: hidden; }
.pkgm__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pkgm .modal__x { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(255,255,255,0.92); box-shadow: var(--shadow-sm); }
.pkgm__thumb .pkg-card__save { top: 14px; left: 14px; right: auto; }
.pkgm__title { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 6px; }
.pkgm__sub { font-size: 0.9rem; color: var(--muted); line-height: 1.55; }
.pkgm__meta { display: flex; align-items: center; gap: 4px; font-size: 0.84rem; font-weight: 600; color: var(--ink-2); margin-top: 10px; flex-wrap: wrap; }
.pkgm__sec { font-size: 0.82rem; font-weight: 800; color: var(--muted); margin: 20px 0 10px; }
.pkgm__sec-sub { font-weight: 600; color: var(--faint); font-size: 0.92em; }
/* 패키지 제휴 공간 선택 */
.pkgm__spaces { display: flex; flex-direction: column; gap: 8px; }
.pkgm__space { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 4px; cursor: pointer; transition: border-color 0.14s, background 0.14s; }
.pkgm__space:hover { border-color: var(--muted); }
.pkgm__space input { accent-color: var(--accent); width: 17px; height: 17px; flex: 0 0 auto; }
.pkgm__space:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pkgm__space-info { display: flex; flex-direction: column; gap: 2px; }
.pkgm__space-info b { font-size: 0.92rem; font-weight: 700; }
.pkgm__space-info span { font-size: 0.8rem; color: var(--muted); }
/* 패키지 일시 판매중지 */
.pkg-card.is-sold .pkg-card__thumb img { filter: grayscale(0.7) brightness(0.8); }
.pkg-card__soldout { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; background: rgba(23, 20, 15, 0.86); color: #fff; font-size: 0.85rem; font-weight: 800; white-space: nowrap; }
.pkgm__items { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pkgm__items li { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.pkgm__ic { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.pkgm__it { flex: 1; display: flex; flex-direction: column; }
.pkgm__it b { font-size: 0.92rem; font-weight: 700; }
.pkgm__it span { font-size: 0.8rem; color: var(--muted); }
.pkgm__ip { font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.pkgm__calc { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; margin: 16px 0; }
.pkgm__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; color: var(--ink-2); padding: 3px 0; }
.pkgm__strike { color: var(--faint); text-decoration: line-through; }
.pkgm__row--save { color: var(--accent); font-weight: 700; }
.pkgm__row--total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-weight: 700; }
.pkgm__row--total b { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.pkgm__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.pkgm__fld { display: flex; flex-direction: column; gap: 6px; }
.pkgm__fld label { font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.pkgm__fld input { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.92rem; font-weight: 600; color: var(--ink); background: var(--surface); outline: none; }
.pkgm__fld input:focus { border-color: var(--ink); }
.pkgm__err { color: var(--accent); font-size: 0.84rem; font-weight: 600; margin-bottom: 10px; }
.pkgm__note { font-size: 0.78rem; color: var(--faint); text-align: center; margin-top: 12px; line-height: 1.5; }
.pkgm--done { text-align: center; padding: 8px 0; }
.pkgm--done .co-done__ic { margin: 8px auto 14px; }
@media (max-width: 560px) { .pkgm__form { grid-template-columns: 1fr; } }
/* 상세 모달 항목별 요청 */
.rd-sec { font-size: 0.82rem; font-weight: 800; color: var(--muted); margin: 14px 0 8px; }
/* ── 항목별 요청사항 ──────────────────────────────────────────────────
   회색 상자 안에 줄글이 빽빽해 파트너가 핵심 조건을 못 짚었다. 핵심을 칩·콜아웃으로
   갈라 세운다. 구조 파싱은 js/mypage.js parseCatNote() 가 한다. */
.rd-catnote { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; margin-bottom: 9px; }
.rd-catnote__h { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 800; }
.rd-catnote__h .ic { color: var(--accent); flex-shrink: 0; }
.rd-catnote p { margin: 5px 0 0; font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; }

/* 이용시간·희망예산 — 한 줄 사실 */
.rd-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rd-fact { display: inline-flex; align-items: center; gap: 5px; font-size: 0.79rem; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border-radius: 7px; padding: 4px 8px; }
.rd-fact .ic { color: var(--muted); flex-shrink: 0; }
.rd-fact--won { color: var(--accent); background: var(--accent-soft); }
.rd-fact--won .ic { color: var(--accent); }

/* 필요 품목 — 칩으로 */
.rd-need { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.rd-need__n { font-size: 0.75rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; }
.rd-chipi { font-size: 0.8rem; font-weight: 700; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }
/* 품목에 붙은 조건은 칩 아래 한 줄씩 — 칩에 넣으면 칩이 문장이 된다 */
.rd-specs { margin: 8px 0 0; padding-left: 15px; display: flex; flex-direction: column; gap: 3px;
  font-size: 0.81rem; line-height: 1.5; color: var(--muted); }
.rd-specs b { color: var(--ink-2); font-weight: 700; }

/* ⚠ 협의 필요 — 입찰 전에 반드시 읽어야 하는 조건이라 따로 세운다 */
.rd-warn { margin-top: 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; }
.rd-warn > b { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 800; color: #92400e; }
.rd-warn > b .ic { color: #d97706; flex-shrink: 0; }
.rd-warn ul { margin: 6px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px;
  font-size: 0.84rem; line-height: 1.55; color: #78350f; word-break: keep-all; }

/* 회원이 직접 쓴 글 — 자동 문장과 구분한다 */
.rd-free { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); }
.rd-free__t { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; color: var(--muted); }
.rd-free p { margin-top: 3px; font-size: 0.86rem; color: var(--ink-2); }
.q-memreq__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.q-memreq__files img { width: 60px; height: 46px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); }
/* 업체 견적 폼 — 회원 요청 박스 */
.q-memreq { background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.28); border-radius: 9px; padding: 9px 11px; margin: 8px 0; font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }
.rq-venue__thumb { width: 84px; height: 66px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.rq-venue__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rq-venue__tag { display: inline-block; font-size: 0.7rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; margin-bottom: 3px; }
.rq-venue__body b { display: block; font-size: 1.02rem; font-weight: 800; }
.rq-venue__meta { font-size: 0.84rem; color: var(--muted); margin-top: 2px; }
.rq-venue__slot { font-size: 0.84rem; color: var(--ink-2); font-weight: 700; margin-top: 3px; }
.hf-err { color: var(--accent); font-size: 0.86rem; font-weight: 600; margin-bottom: 12px; }
.hf-note { font-size: 0.78rem; color: var(--faint); text-align: center; margin-top: 14px; line-height: 1.5; }
.hf-preview { position: sticky; top: calc(var(--header-h) + 20px); }
.hf-preview__label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 14px; }

/* 로고 (심볼 + 워드마크) */
.logo { gap: 8px; }
.logo__mark { flex-shrink: 0; }
.logo__wm { font-family: var(--serif); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.logo__wm em { color: var(--accent); font-style: normal; margin-left: 1px; }

/* 헤더 인증 영역 + 알림 종 */
.auth-area { display: flex; align-items: center; gap: 18px; margin-left: 4px; }
.header__nav > *, .auth-area > * { align-self: center; }
.bell svg { display: block; }
.auth-name { display: inline-flex; align-items: center; gap: 6px; font-size: 0.83rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); padding: 5px 12px 5px 9px; border-radius: 999px; white-space: nowrap; }
.auth-name__ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.auth-name__ic svg { width: 13px; height: 13px; }
/* 사업장 주소 검색 */
.addr-row { display: flex; gap: 8px; align-items: center; }
.addr-row input { flex: 1; min-width: 0; }
.addr-row .btn { flex: 0 0 auto; white-space: nowrap; }
/* 우편번호는 5자리라 좁게 — 도로명주소가 넓은 자리를 가져야 읽힌다 */
.addr-zip { flex: 0 0 92px !important; max-width: 92px; text-align: center; letter-spacing: 0.04em; }
.addr-detail { margin-top: 8px; }
@media (max-width: 520px) {
  /* 세 칸이 한 줄에 들어가지 않는다 — 우편번호+버튼을 위, 주소를 아래로 */
  .addr-row { flex-wrap: wrap; }
  .addr-zip { flex: 0 0 92px !important; order: 1; }
  .addr-row .btn { order: 2; flex: 1 !important; }
  .addr-row input:not(.addr-zip) { order: 3; flex-basis: 100%; }
}
.bell-wrap { position: relative; }
/* 모바일 전용 알림 벨 (햄버거 옆) — 데스크톱에선 숨김 */
.bell-wrap--m { display: none; }
@media (max-width: 1024px) {
  .bell-wrap--m { display: flex; align-items: center; margin-left: auto; }
  .bell-wrap--m + .hmenu { margin-left: 0; }
  #nav .bell-wrap { display: none; }
  /* 모바일 벨 드롭다운: 화면 밖으로 잘리지 않게 뷰포트에 고정 */
  .bell-wrap--m .bell-dd { position: fixed; top: calc(var(--header-h) + 6px); left: 12px; right: 12px; width: auto; max-width: none; max-height: 72vh; margin-top: 0; }
}
.bell { position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-2); transition: background 0.15s; }
.bell:hover { background: var(--surface-2); }
.bell__badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.66rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
.bell-dd { position: absolute; top: 100%; right: 0; margin-top: 10px; width: 300px; max-height: 380px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 200; }
.bell-dd:not([hidden]) { animation: bellSlide 0.18s ease; transform-origin: top right; }
@keyframes bellSlide { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.bell-dd__t { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 0.8rem; padding: 8px 10px 10px; color: var(--muted); }
.bell-dd__act { display: flex; gap: 4px; }
.bell-dd__act button { font-size: 0.72rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.bell-dd__act button:hover { color: var(--accent); border-color: var(--accent); }
.bell-item { display: block; padding: 11px 12px; border-radius: 10px; font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; }
.bell-item:hover { background: var(--surface-2); }
.bell-item.is-unread { background: var(--accent-soft); border-left: 3px solid var(--accent); padding-left: 12px; }
.bell-item.is-unread .bell-item__t { position: relative; }
.bell-item.is-unread .bell-item__t::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }
.bell-item time { display: block; font-size: 0.72rem; color: var(--faint); margin-top: 3px; }
.bell-empty { padding: 24px; text-align: center; color: var(--faint); font-size: 0.86rem; }

/* 예약 달력 (상세 예약 카드) */
.cal { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-top b { font-size: 0.9rem; font-weight: 800; }
.cal-nav { width: 28px; height: 28px; border-radius: 8px; font-size: 1.15rem; color: var(--ink-2); }
.cal-nav:hover:not(:disabled) { background: var(--surface-2); }
.cal-nav:disabled { color: var(--line); cursor: default; }
.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-wd span { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--faint); padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-e { aspect-ratio: 1 / 0.9; }
.cal-d { aspect-ratio: 1 / 0.9; border-radius: 8px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.cal-d:hover:not(:disabled) { background: var(--surface-2); }
.cal-d:disabled { color: var(--line-2); cursor: default; }
.cal-d.is-sel { background: var(--accent); color: #fff; font-weight: 800; }

/* 마이페이지 상태 배지 · 예약 요청 */
.mp-book__status.st-amber { color: var(--warn); background: rgba(217, 138, 31, 0.13); }
.mp-book__status.st-green { color: var(--ok); background: #dcefe4; }
.mp-book__status.st-gray { color: var(--muted); background: var(--surface-2); }
/*  ⚠ st-blue · st-red 는 지금 쓰이지 않는다. 그래도 남긴다 — 이 클래스는 js/mypage.js 가
    "st-" + s.c 로 조립하고 s.c 는 상태표(amber·green·gray)에서 온다. 색 팔레트의 일부만
    지우면 나중에 c:"red" 상태를 추가했을 때 배지가 무색으로 나온다. */
.mp-book__status.st-blue { color: var(--info); background: rgba(59, 130, 246, 0.16); }
.mp-book__status.st-red { color: var(--accent); background: var(--accent-soft); }
.mp-tab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.66rem; font-weight: 800; vertical-align: middle; }
.mp-req { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; margin-bottom: 12px; }
.mp-req__act { display: flex; gap: 8px; flex-shrink: 0; }

/* ============================================================
   목적별 큐레이션
   ============================================================ */
.col { position: relative; aspect-ratio: 3 / 3.4; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; padding: 22px; transition: transform 0.22s; }
.col:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.col__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s; }
.col:hover .col__bg { transform: scale(1.07); }
.col__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,20,15,0.05), rgba(23,20,15,0.72)); }
.col__txt { position: relative; color: #fff; }
.col__txt b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.col__txt span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); margin-top: 3px; display: block; }

/* ============================================================
   로그인 · 회원가입
   ============================================================ */
.auth-page { max-width: 440px; margin: 0 auto; padding: 60px 24px 80px; }
/* 스플릿 인증 화면 */
.auth-body { background: var(--surface); }
.auth-split { display: grid; grid-template-columns: 4fr 6fr; min-height: 100vh; }
.auth-visual { position: relative; padding: 48px 46px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; overflow: hidden; background: #1e1b4b; }
.auth-visual__bg { position: absolute; inset: 0; background: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1200&q=80&auto=format&fit=crop") center/cover; opacity: 0.42; }
.auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(30,26,20,0.45), rgba(30,26,20,0.86)); }
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual__logo { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 9px; color: #fff; }
.auth-visual__logo .logo__dot { background: var(--accent-2); box-shadow: 0 0 0 4px rgba(233,122,92,0.3); }
.auth-visual__copy h2 { font-family: var(--serif); font-size: 2.1rem; font-weight: 700; line-height: 1.34; letter-spacing: -0.02em; }
.auth-visual__copy p { margin-top: 14px; font-size: 1rem; line-height: 1.6; opacity: 0.86; }
.auth-visual__foot { font-size: 0.9rem; font-weight: 700; opacity: 0.9; }
/*  ── 좌측 패널의 '하는 일' 셋 ───────────────────────────────────────────
    실측: 로고와 문구 사이 가운데가 텅 빈 검정이었다(1440×950). 그림 대신 글로 채운다 —
    외부 요청 0건이고, 로그인하러 온 사람에게 가장 쓸모 있는 정보다.
    ⚠ 숫자를 넣지 말 것(재고 34곳 중 30곳이 데모다). 셋 다 실제로 되는 기능만 적었다. */
.auth-visual__pts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.auth-visual__pts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start;
  font-size: 0.88rem; line-height: 1.5; opacity: 0.9; }
.auth-visual__tx { min-width: 0; }
.auth-visual__pts b { display: block; font-weight: 700; opacity: 1; }
.auth-visual__n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 999px; background: rgba(255,255,255,0.14); font-size: 0.72rem; font-weight: 800; }
/*  ── 소셜 로그인을 폼 위로 ─────────────────────────────────────────────
    ⚠ 카카오·네이버 버튼은 js/kakao.js · js/naver.js 가 채운다(hidden 으로 시작).
      키가 없으면 열리지 않으므로, 이 묶음이 비었을 때 '또는' 구분선만 남으면 이상하다 —
      :empty 로 함께 감춘다(:has 를 쓰지 않는다 — 자식이 늘 있고 hidden 일 뿐이다).   */
.auth-social { display: grid; gap: 8px; }
.auth-social > div[hidden] { display: none; }
.auth-social:empty { display: none; }
/*  2분할 가로 — 색 덩어리를 절반으로. 실측: 세로로 쌓았을 때 브랜드 버튼 2개 + 주버튼이
    폼 세로의 20%(147px)였다. 2분할이면 약 98px.
    ⚠ 라벨을 짧게 한다("카카오로 시작하기" 114px 는 모바일 절반 폭 167px 에서 아이콘·
      여백까지 넣으면 빡빡하다). 짧은 이름은 CSS 로 갈지 않는다 — 버튼 글자는
      js/kakao.js · js/naver.js 가 넣으므로 거기서 정한다.
    ⚠ 한쪽만 열렸을 때 절반만 남으면 어색하다 — 그때는 통째로 늘린다.            */
.auth-social--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.auth-social--duo > * { min-width: 0; }
.auth-social--duo.is-single { grid-template-columns: 1fr; }
.auth-social--duo .btn { padding-left: 8px; padding-right: 8px; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-or span { font-size: 0.76rem; font-weight: 600; color: var(--faint); white-space: nowrap; }
/*  소셜이 하나도 안 열렸으면 구분선을 숨긴다(스크립트가 클래스를 붙인다)  */
.auth-or.is-alone { display: none; }
.auth-help { margin-top: 12px; font-size: 0.76rem; line-height: 1.55; color: var(--faint); text-align: center; }
/*  ── 입점 분기 배너 ────────────────────────────────────────────────────
    메인 헤더에서 비로그인용 '사업자 등록' 을 감췄으므로 이 배너가 입점 경로를 받는다.
    ⚠ 각주처럼 보이면 안 된다. 예전 사업자 링크는 데모 안내와 **같은 클래스**(.auth-demo)를
      써서 눈에 안 들어왔다 — 그래서 상자로 만들고 화살표를 붙인다.                */
.auth-biz { display: block; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface-2); text-decoration: none; transition: border-color .15s, background .15s; }
.auth-biz:hover { border-color: var(--accent); background: var(--surface); }
.auth-biz__t { display: block; font-size: 0.86rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.auth-biz__s { display: block; margin-top: 3px; font-size: 0.74rem; font-weight: 500; color: var(--muted); line-height: 1.5; }
.auth-biz__go { display: inline-block; margin-top: 8px; font-size: 0.8rem; font-weight: 800; color: var(--accent); }
/*  1줄 배너 — 제목과 화살표를 한 줄에. 설명은 받는 쪽(business.html)이 말한다.  */
.auth-biz--slim { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.auth-biz--slim .auth-biz__t { font-size: 0.82rem; }
.auth-biz--slim .auth-biz__go { margin-top: 0; flex: 0 0 auto; font-size: 0.78rem; }
/*  ── 간격을 세 단계로 못 박는다 ────────────────────────────────────────────
    실측(고치기 전): 8 · 24 · 16 · 14 · 16 · 17 · 13 · 18 · 12 · 22px — 같은 성격의
    자리가 다 달랐다. 답답함의 원인은 '좁다' 가 아니라 **리듬이 없다** 였다.
      필드 사이 16 · 묶음 사이 24 · 섹션 사이 32                                */
/*  ⚠ 제목 바로 아래가 소셜 버튼이 됐다(부제를 지웠다) — 붙어 버려서 0px 이었다.
    묶음 사이 간격(24)을 준다.                                                  */
.auth-card .auth-card__title + .auth-social { margin-top: 24px; }
.auth-card .field + .field { margin-top: 16px; }
.auth-card #loginForm { margin-top: 0; }
.auth-card #loginForm button[type="submit"] { margin-top: 24px; }
.auth-card .auth-alt { margin-top: 24px; }
.auth-card .auth-help { margin-top: 8px; }
.auth-card .auth-biz { margin-top: 32px; }
@media (max-width: 760px) {
  .auth-visual__pts { display: none; }   /* 모바일은 좌측 패널 자체가 감춰진다 */
  .auth-biz { margin-top: 18px; padding: 12px 14px; }
}
.auth-main { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: radial-gradient(680px 460px at 82% 8%, rgba(99, 102, 241, 0.10) 0%, transparent 62%), radial-gradient(520px 420px at 10% 100%, rgba(59, 130, 246, 0.06) 0%, transparent 60%), var(--bg); }
.auth-main .auth-tabs .ic { vertical-align: -3px; }
.auth-main .auth-card { width: 100%; max-width: 380px; background: none; border: none; box-shadow: none; padding: 0; }
.auth-back { display: inline-block; margin-bottom: 20px; font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.auth-back:hover { color: var(--accent); }
@media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } .auth-visual { display: none; } .auth-main { min-height: 100vh; } }
.auth-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 40px 34px; box-shadow: var(--shadow-sm); }
.auth-card__title { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; }
.auth-card__sub { font-size: 0.92rem; color: var(--muted); margin: 8px 0 24px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; margin-bottom: 22px; }
.auth-tab { padding: 12px; border-radius: 9px; font-size: 0.9rem; font-weight: 700; color: var(--muted); transition: all 0.15s; }
.auth-tab.is-active { background: var(--ink); color: #fff; }
/* 사업자 유형 탭 — 고급 아이콘 통일 */
.biz-tabs { gap: 8px; padding: 8px; }
.biz-tab { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: 12px; text-align: left; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink-2); transition: all 0.16s; }
.biz-tab__ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); transition: all 0.16s; }
.biz-tab__tx { display: flex; flex-direction: column; line-height: 1.25; }
.biz-tab__tx b { font-size: 0.98rem; font-weight: 800; }
.biz-tab__tx span { font-size: 0.78rem; font-weight: 500; color: var(--faint); }
.biz-tab:hover { border-color: var(--ink-2); }
.biz-tab.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); box-shadow: var(--glow); }
.biz-tab.is-active .biz-tab__ic { background: var(--accent); color: #fff; }
.biz-tab.is-active .biz-tab__tx span { color: var(--accent); }
.field { margin-bottom: 16px; }
.field__label { display: block; font-size: 0.84rem; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.field__hint { font-size: 0.82rem; color: var(--muted); background: var(--accent-soft); padding: 10px 13px; border-radius: 10px; margin-bottom: 14px; }
.field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font-size: 0.95rem; font-weight: 600; color: var(--ink); background: var(--surface); outline: none; transition: border-color 0.15s; }
.field input:focus { border-color: var(--ink); }
.auth-err { color: var(--accent); font-size: 0.86rem; font-weight: 600; margin-bottom: 12px; }
.auth-alt { text-align: center; font-size: 0.88rem; color: var(--muted); margin-top: 18px; }
.auth-alt a { color: var(--accent); font-weight: 700; }
/* 소셜 로그인 (카카오) */
.social-div { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--faint); font-size: 0.8rem; }
.social-div::before, .social-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn--kakao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #FEE500; color: #191600; border: 0; font-weight: 800; }
.btn--kakao:hover { background: #f5dc00; }
.btn--kakao svg { flex-shrink: 0; }
/* 네이버 — 브랜드색 #03C75A. 카카오 버튼 바로 아래 서므로 간격을 준다 */
.btn--naver { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #03C75A; color: #fff; border: 0; font-weight: 800; margin-top: 8px; }
.btn--naver:hover { background: #02b350; }
.btn--naver svg { flex-shrink: 0; }
/* 카카오 슬롯이 감춰졌을 때(키 없음) 네이버 버튼만 남으면 위 간격이 어색하다 */
[data-kakao-login][hidden] + [data-naver-login] .btn--naver { margin-top: 0; }
/*  ⚠ .btn--naver 의 margin-top:8px 은 **세로로 쌓던 시절**의 값이다. 2분할 안에서는
    그 마진 때문에 네이버 버튼만 8px 내려가 두 버튼이 어긋난다(실측: 카카오 291~340,
    네이버 299~348). 묶음이 이미 gap 으로 간격을 주므로 여기서는 없앤다.          */
.auth-social--duo .btn--naver { margin-top: 0; }
.auth-demo { text-align: center; font-size: 0.8rem; color: var(--faint); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.auth-demo b { color: var(--ink-2); }
.auth-demo__link { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 700; font-size: 0.85rem; }
.auth-demo__link:hover { text-decoration: underline; }

/* ============================================================
   마이페이지
   ============================================================ */
/*  ⚠ 하단 여백을 **126px 로 통일**했다(모바일과 같게). 90px 은 플로팅 챗봇
      (48~56px + 오프셋)에 아슬해서 맨 아래 요소가 닿았다. */
.mp { max-width: 1120px; margin: 0 auto; padding: 34px 32px 126px; }
.mp__head { margin-bottom: 24px; }
.mp__title { font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 6px; }
.mp__sub { color: var(--muted); font-size: 0.92rem; }
.mp-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); margin-bottom: 26px; }
.mp-tab { position: relative; padding: 12px 18px; font-size: 0.94rem; font-weight: 700; color: var(--muted); }
.mp-tab.is-active { color: var(--ink); }
.mp-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1.5px; height: 2.5px; background: var(--accent); border-radius: 3px; }
/* 관리자 콘솔 — 접이식 메뉴(햄버거) */
.ad-seedbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ad-seedbtns[hidden] { display: none; }
.ad-lockbox { max-width: 440px; margin: 24px auto; text-align: center; border: 1px solid var(--line); border-radius: 16px; padding: 34px 24px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ad-lockbox__ic { color: var(--accent); display: flex; justify-content: center; margin-bottom: 12px; }
.ad-lockbox__row { display: flex; gap: 8px; justify-content: center; }
.ad-lockbox__row .ad-inp { flex: 1; max-width: 220px; margin: 0; }
.ad-lockbox .hf-err { margin-top: 10px; }
.ico { vertical-align: -3px; flex-shrink: 0; }
/* ===== 관리자 좌측 드로어 사이드바 ===== */
.adx-burger { position: fixed; left: 12px; top: 11px; z-index: 330; height: 40px; padding: 0 15px 0 12px; border-radius: 999px; display: inline-flex; flex-direction: row; align-items: center; gap: 9px; background: var(--ink); box-shadow: var(--shadow); transition: background 0.15s; }
.adx-burger:hover { background: #000; }
.adx-burger__bars { display: flex; flex-direction: column; gap: 4px; }
.adx-burger__bars span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.22s, opacity 0.22s; }
.adx-burger__lbl { color: #fff; font-size: 0.86rem; font-weight: 700; white-space: nowrap; }
.adx-burger.is-open .adx-burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.adx-burger.is-open .adx-burger__bars span:nth-child(2) { opacity: 0; }
.adx-burger.is-open .adx-burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.adx-drawer { position: fixed; left: 0; top: var(--header-h); bottom: 0; z-index: 310; width: 262px; background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 62px 14px 22px; overflow-y: auto; transform: translateX(-102%); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.adx-drawer[data-open] { transform: translateX(0); }
.adx-drawer__brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); padding: 0 8px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.adx-drawer__brand .logo__dot { width: 9px; height: 9px; }
.adx-nav { display: flex; flex-direction: column; gap: 2px; }
.adx-nav__div { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; padding: 14px 10px 5px; }
.adx-nav .mp-tab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 10px; text-align: left; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.adx-nav .mp-tab .ico { color: var(--muted); transition: color 0.15s; }
.adx-nav .mp-tab:hover { background: var(--surface-2); color: var(--ink); }
.adx-nav .mp-tab.is-active { background: var(--accent); color: #fff; font-weight: 700; box-shadow: var(--glow); }
.adx-nav .mp-tab.is-active .ico { color: #fff; }
.adx-nav .mp-tab.is-active::after { display: none; }
.adx-nav .mp-tab__badge { margin-left: auto; }
.adx-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(2px); animation: adFade 0.2s ease; }
.adx-backdrop[hidden] { display: none; }
@keyframes adFade { from { opacity: 0; } to { opacity: 1; } }
/* KPI 아이콘(원형 강조) */
.ad-kpi__ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.ad-kpi__ic .ico { vertical-align: 0; }
.ad-kpi--money .ad-kpi__ic { background: rgba(37, 99, 235, 0.1); color: var(--info); }
.ad-kpi--hl .ad-kpi__ic { background: var(--accent); color: #fff; }
.ad-h3 .ico { vertical-align: -3px; color: var(--accent); margin-right: 3px; }
/* 클릭 가능한 KPI 카드 */
button.ad-kpi { font-family: inherit; text-align: left; }
.ad-kpi--link { cursor: pointer; transition: background 0.14s; }
.ad-kpi--link:hover { background: var(--surface-2); }
.ad-kpi__l .ico { color: var(--faint); vertical-align: -2px; margin-left: 2px; }
.ad-kpi--link:hover .ad-kpi__l .ico { color: var(--accent); }
/* 정산 상세 링크 + 모달 */
.ad-linkbtn { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; }
.ad-linkbtn:hover { text-decoration: underline; }
.ad-linkbtn .ico { color: currentColor; }
.ad-pdsum { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 15px; background: var(--surface-2); border-radius: 11px; margin-bottom: 12px; font-size: 0.86rem; color: var(--muted); }
.ad-pdsum b { color: var(--ink); font-weight: 800; margin-left: 3px; }
.ad-pdsum__pay b { color: var(--accent); }
.modal__card.modal__card--wide { max-width: 660px; }
.ad-pdsum { flex-wrap: wrap; }
.ad-pdtable { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; max-height: 54vh; overflow-y: auto; }
.ad-pdrow { display: grid; grid-template-columns: 94px minmax(0, 1fr) 92px 98px 60px; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-2); font-size: 0.85rem; }
.ad-pdrow > span { white-space: nowrap; }
.ad-pdrow > span:nth-child(3), .ad-pdrow > span:nth-child(4) { text-align: right; }
.ad-pdrow > span:nth-child(5) { text-align: center; }
.ad-pdrow:last-child { border-bottom: none; }
.ad-pdrow--h { background: var(--surface-2); font-size: 0.74rem; font-weight: 800; color: var(--muted); position: sticky; top: 0; z-index: 1; }
.ad-pdtable .ad-pdrow--ord { grid-template-columns: 0.85fr 1.5fr 0.8fr 0.8fr 0.8fr 0.7fr; gap: 8px; }
.ad-pdtable .ad-pdrow--ord > span:nth-child(3), .ad-pdtable .ad-pdrow--ord > span:nth-child(4), .ad-pdtable .ad-pdrow--ord > span:nth-child(5) { text-align: right; }
.ad-pdtable .ad-pdrow--ord .ad-pdrow__nm em { display: block; font-style: normal; font-size: 0.72rem; color: var(--accent); font-weight: 700; margin-top: 2px; white-space: normal; }
.ad-pdrow__nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-pdrow__nm em { color: var(--faint); font-style: normal; }
.ad-pdrow b { font-weight: 800; }
/* 지급 신청/상태 */
.ad-st--req { color: #b45309; background: rgba(217, 119, 6, 0.14); }
.ad-tr--set.is-req { background: rgba(217, 119, 6, 0.06); }
.ad-flash { animation: adFlash 2.6s ease; position: relative; z-index: 1; }
@keyframes adFlash { 0%, 35% { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(79, 70, 229, 0.1); } 100% { box-shadow: none; } }
.payout-box { padding: 14px 16px; border-radius: 12px; font-size: 0.92rem; line-height: 1.5; }
.payout-box--done { background: rgba(5, 150, 105, 0.1); border: 1px solid rgba(5, 150, 105, 0.3); color: #067a52; }
.payout-box--req { background: rgba(217, 119, 6, 0.12); border: 1px solid rgba(217, 119, 6, 0.3); color: #92610f; }
.payout-box b { font-weight: 800; }
/* 정산 계좌 표시 */
.settle-acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; padding: 11px 15px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.settle-acct__i { font-size: 0.88rem; font-weight: 600; color: var(--ink-2); }
.settle-acct__i b { font-weight: 800; color: var(--ink); }
.settle-acct__i code { background: var(--surface); border: 1px solid var(--line); padding: 2px 8px; border-radius: 7px; font-size: 0.84rem; margin-left: 3px; }
.settle-acct__i--none { color: #b45309; font-weight: 700; }
/* 정산 내역 목록 헤더 + 아이템 카드 */
.settle-listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 12px; }
.settle-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; cursor: pointer; transition: border-color 0.14s, box-shadow 0.14s, transform 0.1s; }
.settle-item:hover { border-color: var(--accent); box-shadow: 0 6px 18px -10px rgba(79, 70, 229, 0.5); transform: translateY(-1px); }
.settle-item__l { min-width: 0; }
.settle-item__r { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.settle-item__amt { font-family: var(--serif); font-size: 1.15rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.settle-item__amt em { font-size: 0.78rem; font-weight: 700; font-style: normal; margin-left: 1px; }
.settle-item__more { font-size: 0.76rem; font-weight: 700; color: var(--faint); }
.settle-item:hover .settle-item__more { color: var(--accent); }
/* 정산 내역 카드 — 한눈에 보기(거래액·수수료·입금액·상태) */
.settle-item--rich { display: block; padding: 14px 16px; margin-bottom: 10px; cursor: default; }
.settle-item--rich:hover { transform: none; border-color: var(--line-2); box-shadow: none; }
.settle-item__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.settle-item__acts .btn { flex-shrink: 0; }
@media (max-width: 480px) { .settle-item__acts { width: 100%; } .settle-item__acts .btn { flex: 1; } }
.settle-item__head { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.settle-item__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.settle-item__title b { font-weight: 800; font-size: 1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settle-st { flex-shrink: 0; font-size: 0.72rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.settle-st.is-paid { background: #e7f6ee; color: #067a4b; }
.settle-st.is-wait { background: #fff3e0; color: #b45309; }
.settle-item__meta { font-size: 0.8rem; color: var(--muted); margin: 6px 0 10px; }
.settle-item__nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; border-top: 1px dashed var(--line-2); padding-top: 10px; }
.settle-num { display: flex; flex-direction: column; gap: 2px; }
.settle-num i { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.settle-num b { font-weight: 800; font-size: 0.95rem; color: var(--ink); }
.settle-num--fee b { color: #b45309; }
.settle-num--pay b { color: var(--accent); font-size: 1.05rem; }
/* 정산 툴바(날짜 지정 + 정렬) */
.settle-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.settle-range { display: flex; align-items: center; gap: 6px; color: var(--muted); flex-wrap: wrap; }
.settle-range input[type="date"] { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 0.82rem; color: var(--ink); background: var(--surface); min-width: 0; }
.settle-range__t { color: var(--faint); }
.mp-sort { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 10px; padding: 3px; }
.mp-sort__l { font-size: 0.76rem; font-weight: 700; color: var(--muted); padding: 0 6px 0 4px; }
.mp-sort__b { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--muted); padding: 5px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.mp-sort__b.is-on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px -1px rgba(0,0,0,0.12); }
.mp-sort__ar { font-size: 0.7rem; }
/* 필터 합계 요약 바 */
.settle-sumbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 14px; margin-bottom: 12px; font-size: 0.82rem; color: var(--muted); }
.settle-sumbar b { color: var(--ink); font-weight: 800; }
.settle-sumbar__wait { color: #b45309 !important; }
.settle-sumbar__pay { color: var(--accent) !important; }
@media (max-width: 560px) { .settle-filter { flex-direction: column; align-items: stretch; } .mp-sort { justify-content: space-between; } .settle-sumbar__r { width: 100%; } }
/* 정산 상세 모달 */
.settle-modal__note { grid-column: 1 / -1; }
.settle-modal__fee { color: #dc2626 !important; }
.settle-modal__total { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px 16px; background: var(--accent-soft); border: 1px solid rgba(79, 70, 229, 0.2); border-radius: 12px; }
/* 수수료율 설정 (회원 상세) */
.ad-feerate { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.ad-feerate__cur { font-size: 0.9rem; }
.ad-feerate__cur b { font-size: 1.05rem; color: var(--accent); }
.ad-feerate__cur em { font-style: normal; color: var(--faint); font-size: 0.8rem; margin-left: 3px; }
.ad-feerate__edit { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ad-feerate__in { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.ad-feerate__in input { width: 64px; border: 0; outline: none; background: transparent; font-size: 0.95rem; font-weight: 700; text-align: right; color: var(--ink); }
.ad-feerate__in span { color: var(--muted); font-weight: 700; }
/* 패키지 카드 수수료율 버튼 */
.ad-pkgfee { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.82rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ad-pkgfee:hover { border-color: var(--accent); color: var(--accent); }
.ad-pkgfee b { color: var(--ink); font-weight: 800; }
/* 정산 표 — 적용 수수료율 배지 */
.ad-set-rate { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.ad-set-rate--mix { color: #b45309; background: rgba(217, 119, 6, 0.14); }
.ad-pdrate { font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--accent); margin-left: 4px; }
/* 수수료율 이력 편집기 */
.fee-rules { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.fee-rule { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.fee-rule__from { font-size: 0.86rem; color: var(--muted); }
.fee-rule__pct { margin-left: auto; font-size: 1rem; font-weight: 800; color: var(--accent); }
.fee-add { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; background: var(--accent-soft); border: 1px solid rgba(79, 70, 229, 0.2); border-radius: 10px; flex-wrap: wrap; }
.fee-add__f { display: flex; flex-direction: column; gap: 4px; }
.fee-add__f label { font-size: 0.74rem; font-weight: 700; color: var(--muted); }
.fee-add__f input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.9rem; background: var(--surface); color: var(--ink); }
.fee-add__f input[type="number"] { width: 92px; text-align: right; font-weight: 700; }
.fee-add .btn { margin-left: auto; }
.settle-modal__docs { display: flex; gap: 8px; margin-top: 14px; }
.settle-modal__docs .btn { flex: 1; }
/* 결제 영수증 (카드 매출전표) */
.rcpt { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 6px; }
.rcpt__brand { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--ink); color: #fff; font-weight: 800; font-size: 0.95rem; }
.rcpt__brand span { margin-left: auto; font-weight: 600; font-size: 0.72rem; opacity: 0.7; }
.rcpt__rows { padding: 8px 16px; }
.rcpt__r { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 0.86rem; }
.rcpt__r:last-child { border-bottom: 0; }
.rcpt__r > span { color: var(--muted); flex-shrink: 0; }
.rcpt__r > b { text-align: right; font-weight: 700; }
.rcpt__calc { padding: 12px 16px; background: var(--surface-2); border-top: 1px solid var(--line); }
.rcpt__c { display: flex; justify-content: space-between; font-size: 0.86rem; color: var(--muted); padding: 3px 0; }
.rcpt__c--total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); font-size: 1rem; }
.rcpt__c--total b { font-weight: 800; color: var(--accent); }
.rcpt__foot { padding: 11px 16px; font-size: 0.74rem; color: var(--faint); background: var(--surface-2); border-top: 1px dashed var(--line); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.settle-modal__total span { font-size: 0.88rem; font-weight: 700; color: var(--ink-2); }
.settle-modal__total b { font-family: var(--serif); font-size: 1.35rem; font-weight: 800; color: var(--accent); }
/* 역경매·견적 관리 */
.ad-tr--rfp { grid-template-columns: 1fr 1.15fr 1fr 0.7fr 1.1fr 0.8fr 1.35fr; }
.ad-tr--rfp em { font-style: normal; font-size: 0.76rem; }
.ad-rfp__amt { display: flex; flex-direction: column; line-height: 1.25; }
.ad-rfp__amt b { font-weight: 800; color: var(--ink); font-size: 0.9rem; }
.ad-rfp__amt em { color: var(--faint); font-size: 0.72rem; }
.ad-rfp__none { color: var(--faint); font-size: 0.82rem; }
.ad-rfp__cats { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-rfp__catblk { margin-bottom: 14px; }
.ad-rfp__catt { font-size: 0.82rem; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.ad-rfp__bid { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--surface-2); border-radius: 9px; margin-bottom: 5px; font-size: 0.86rem; }
.ad-rfp__bid > span:first-child { flex: 1; font-weight: 700; }
.ad-rfp__bid b { font-weight: 800; }
@media (max-width: 860px) { .ad-tr--rfp { grid-template-columns: 1fr 1fr; } .ad-tr--rfp .ad-rfp__cats, .ad-tr--rfp .ad-rfp__amt, .ad-tr--rfp .ad-tr__act { grid-column: 1 / -1; } .ad-rfp__amt { flex-direction: row; gap: 6px; align-items: baseline; } }

/* 예약·결제 기간 필터 */
.ad-period { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ad-period__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chip--sm { padding: 5px 12px; font-size: 0.8rem; }
.ad-period__range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-period__range input[type="date"] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 0.85rem; font-family: inherit; }
.ad-period__tilde { color: var(--faint); font-weight: 700; }
.ad-period__lbl { margin-left: 4px; color: var(--muted); font-size: 0.82rem; }
.ad-period__lbl b { color: var(--accent); font-weight: 800; }
.ad-bksum__i--net b { color: var(--accent); }

/* 회원별 매출 아코디언 */
.ad-tr--click { cursor: pointer; transition: background 0.14s; }
.ad-tr--click:hover { background: var(--surface-2); }
.ad-tr--click.is-open { background: var(--surface-2); }
.ad-mem__rk { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 7px; border-radius: 6px; background: var(--accent-weak, rgba(79,70,229,0.1)); color: var(--accent); font-size: 0.74rem; font-weight: 800; }
.ad-mem__amt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ad-mem__chev { display: inline-flex; color: var(--faint); transition: transform 0.18s; }
.ad-tr--click.is-open .ad-mem__chev { transform: rotate(180deg); color: var(--accent); }
.ad-memdet { background: var(--surface-2); border-radius: 10px; margin: 2px 0 8px; padding: 4px 6px; overflow-x: auto; }
.ad-memdet__row { display: grid; grid-template-columns: 34px 96px 84px minmax(0, 1fr) 110px; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line-2); font-size: 0.84rem; }
.ad-memdet__row:last-child { border-bottom: none; }
.ad-memdet__row--h { font-size: 0.72rem; font-weight: 800; color: var(--muted); }
.ad-memdet__row > span:last-child { text-align: right; }
.ad-memdet__n { color: var(--faint); font-weight: 700; }
.ad-memdet__nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-memdet__amt b { font-weight: 800; }
.ad-memdet__empty { padding: 14px; text-align: center; color: var(--faint); font-size: 0.85rem; }
.ad-mtag { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
.ad-mtag--host { background: rgba(37,99,235,0.12); color: #2563eb; }
.ad-mtag--vendor { background: rgba(217,119,6,0.14); color: #b45309; }
.ad-mtag--pkg { background: rgba(5,150,105,0.13); color: #059669; }
@media (max-width: 680px) { .ad-memdet__row { grid-template-columns: 24px 82px minmax(0, 1fr) 88px; gap: 6px; font-size: 0.8rem; } .ad-memdet__row > span:nth-child(3), .ad-memdet__row--h > span:nth-child(3) { display: none; } }
@media (max-width: 680px) { .modal__card--wide { max-width: 100%; } .ad-pdrow { grid-template-columns: 72px minmax(0, 1fr) 84px 54px; gap: 6px; font-size: 0.8rem; padding: 9px 11px; } .ad-pdrow > span:nth-child(4), .ad-pdrow--h > span:nth-child(4) { display: none; }
  .ad-pdtable .ad-pdrow--ord { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .ad-pdtable .ad-pdrow--ord > span { display: flex; }
  .ad-pdtable .ad-pdrow--ord > span:nth-child(4), .ad-pdtable .ad-pdrow--ord > span:nth-child(5) { display: flex !important; }
  .ad-pdtable .ad-pdrow--ord > span:nth-child(2) { flex-basis: 100%; }
  .ad-pdtable .ad-pdrow--ord.ad-pdrow--h { display: none; }
  .ad-pdtable .ad-pdrow--ord .ad-pdrow__rf::before { content: "환불 "; color: var(--muted); font-weight: 600; }
  .ad-pdtable .ad-pdrow--ord .ad-pdrow__pen::before { content: "위약금 "; color: var(--muted); font-weight: 600; }
}
body[data-require="admin"] .mp { padding-left: 20px; }
/* 관리자 헤더: 로고를 가운데 컨테이너가 아닌 화면 맨 왼쪽에 붙여 사이드바와 정렬 통일 */
body[data-require="admin"] .header__inner { max-width: none; margin: 0; padding-left: 24px; }
/* 모바일: 관리 메뉴 버거를 헤더 좌측에 배치 → 로고를 오른쪽으로 밀어 자리 확보 */
@media (max-width: 860px) { body[data-require="admin"] .header__inner { padding-left: 116px; } }
@media (max-width: 400px) { body[data-require="admin"] .header__inner { padding-left: 54px; } .adx-burger__lbl { display: none; } .adx-burger { padding: 0 11px; } }
/* 데스크톱: 사이드바 상시 고정(도킹) — 햄버거·백드롭 숨김 */
@media (min-width: 861px) {
  .adx-burger { display: none; }
  .adx-backdrop { display: none !important; }
  .adx-drawer { transform: none; box-shadow: none; padding-top: 22px; }
  body[data-require="admin"] .mp { margin-left: 262px; padding-left: 40px; }
  body[data-require="admin"] .footer { margin-left: 262px; }
  body[data-require="admin"] .footer__copy { max-width: none; margin: 0; padding-left: 40px; text-align: left; }
}
@media (max-width: 600px) { .adx-drawer { width: 84vw; } }
.mp-empty { text-align: center; padding: 60px 20px; color: var(--faint); }
.mp-book { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; margin-bottom: 12px; cursor: pointer; transition: border-color 0.15s; }
.mp-book:hover { border-color: var(--line); }
.mp-book__name { font-weight: 800; font-size: 1rem; }
.mp-book__meta { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.mp-book__right { text-align: right; flex-shrink: 0; }
.mp-book__status { display: inline-block; font-size: 0.72rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; }
.mp-book__price { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin-top: 6px; }

/* 알림 드롭다운 텍스트 줄바꿈(반응형) */
.bell-dd { width: min(340px, calc(100vw - 28px)); }
.bell-item { display: flex; flex-direction: column; }
.bell-item__txt { display: block; word-break: keep-all; line-height: 1.45; }
.bell-item__t { display: block; font-weight: 800; font-size: 0.86rem; word-break: keep-all; line-height: 1.35; }
.bell-item__s { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; word-break: keep-all; line-height: 1.4; }

/* 채팅 안읽음 배지 · 반짝임 */
.chat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 999px; background: #e2402f; color: #fff; font-size: 0.64rem; font-weight: 800; }
.mp-bk.has-unread { border-color: #e2402f; box-shadow: 0 0 0 3px rgba(226, 64, 47, 0.14); animation: bkGlow 1.6s ease-in-out infinite; }
@keyframes bkGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(226, 64, 47, 0.12); } 50% { box-shadow: 0 0 0 5px rgba(226, 64, 47, 0.22); } }
.mp-bk.has-unread [data-chat] { background: #e2402f; color: #fff; }

/* 버튼 변형 */
.btn--soft { background: var(--surface-2); color: var(--ink-2); }
.btn--soft:hover { background: var(--line-2); }
.btn--danger { color: #dc2626; border: 1px solid #fecaca; background: #fff; }
.btn--danger:hover { background: #fef2f2; }

/* 예약 카드(액션 포함) */
.mp-bk { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; }
.mp-bk__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-bk__info { cursor: pointer; min-width: 0; }
.mp-bk__act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }

/* 후기 작성 */
.sp-revlogin { font-size: 0.9rem; color: var(--muted); margin-bottom: 14px; }
.sp-revlogin a { color: var(--accent); font-weight: 700; }
.sp-revform { margin: 12px 0 18px; padding: 16px; background: var(--surface-2); border-radius: 12px; }
.sp-revstars { display: flex; gap: 4px; margin-bottom: 10px; }
.sp-revstars button { font-size: 1.5rem; color: var(--line); line-height: 1; }
.sp-revstars button.on { color: var(--gold); }
.sp-revform textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.92rem; font-family: inherit; resize: vertical; outline: none; margin-bottom: 10px; }
.sp-revform textarea:focus { border-color: var(--ink); }
#revToggle { margin-bottom: 4px; }

/* 모달 */
/*  ⚠ z-index 는 하단 내비(480)·채팅 위젯(500)·필터 시트(520)보다 위여야 한다.
    400 이던 동안 **하단 내비가 모달 위에** 그려져 모달 아래 66px 가 가려졌다
    (실측 390×844: 카드 하단 844 · 내비 상단 778). '사진 짤림'·'닫기 버튼 없음'·
    '견적 보내기 못 누름' 세 신고가 모두 이 하나였다.
    ⚠ 지역 시트(.rgs 620/615)보다는 아래여야 한다 — 그쪽은 모달 위에서 열린다.  */
.modal { position: fixed; inset: 0; z-index: 560; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(23,20,15,0.5); backdrop-filter: blur(2px); }
.modal__card { position: relative; width: 100%; max-width: 420px; background: var(--surface); border-radius: 4px; padding: 22px; box-shadow: var(--shadow-lg); max-height: 86vh; overflow-y: auto; }
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal__head b { font-size: 1.1rem; font-weight: 800; }
.modal__x { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); font-size: 1rem; }
.modal__x:hover { background: var(--surface-2); }
.modal__sub { color: var(--muted); font-size: 0.88rem; margin-bottom: 14px; }
.modal__note { font-size: 0.78rem; color: var(--faint); margin-top: 12px; line-height: 1.5; }

/* 채팅 */
.chat { height: 300px; overflow-y: auto; background: var(--surface-2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.chat-empty { margin: auto; color: var(--faint); font-size: 0.88rem; }
.chat-msg { max-width: 82%; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; text-align: right; }
.chat-msg__n { display: block; font-size: 0.7rem; color: var(--faint); margin-bottom: 3px; }
.chat-msg__b { display: inline-block; padding: 9px 13px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 0.9rem; line-height: 1.4; text-align: left; word-break: keep-all; }
.chat-msg.mine .chat-msg__b { background: var(--accent); color: #fff; border-color: var(--accent); }
.chat-msg time { display: block; font-size: 0.66rem; color: var(--faint); margin-top: 3px; }
.chat-input { display: flex; gap: 8px; }
.chat-input input { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.92rem; outline: none; }
.chat-input input:focus { border-color: var(--ink); }

/* 반짝할인 배지·할인가 */
.sp-card__flash, .v-card__flash { position: absolute; bottom: 12px; left: 12px; font-size: 0.72rem; font-weight: 800; color: #fff; background: #e2402f; padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(226,64,47,0.4); }
/*  파트너 단가표 머리의 기간 할인 안내 — 오른쪽에 붙여 표 제목과 겹치지 않게 둔다 */
.vrate__flash { margin-left: auto; font-size: 0.73rem; font-weight: 800; color: #fff; background: #e2402f; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sp-old { color: var(--faint); text-decoration: line-through; font-size: 0.8rem; font-weight: 600; font-family: "Pretendard Variable", "Pretendard", sans-serif; }
.book__old { color: var(--faint); text-decoration: line-through; font-size: 0.95rem; font-weight: 600; margin-right: 6px; }
.book__flash { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-size: 0.72rem; font-weight: 800; color: #fff; background: #e2402f; padding: 3px 8px; border-radius: 999px; vertical-align: middle; }
.book__coupon { margin-top: 4px; }
.book__couponrow { display: flex; gap: 8px; }
.book__couponrow input { flex: 1; }
.book__couponmsg { display: block; font-size: 0.78rem; margin-top: 6px; }
.book__couponmsg.ok { color: var(--ok); }
.book__couponmsg.no { color: var(--accent); }
.book__disc span:last-child { color: var(--accent); font-weight: 700; }

/* 일정 변경 표시 */
.mp-bk__change { margin: 10px 0 0; padding: 10px 12px; background: rgba(217, 138, 31, 0.13); border-radius: 10px; font-size: 0.84rem; color: var(--ink-2); line-height: 1.55; }
.mp-bk__change s { color: var(--faint); }
.mp-bk__change b { color: var(--accent); }

/* 마이페이지 제목행 · 할인관리 */
.mp__titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) {
  .mp__titlerow { flex-direction: column; align-items: stretch; gap: 12px; }
  .mp__title { margin-bottom: 0; }
  .mp__hactions { width: 100%; }
  .mp__hactions .btn { flex: 1; }
}
.disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 18px; }
.disc-card { border: 1px solid var(--line-2); border-radius: 14px; padding: 18px; background: var(--surface); }
.disc-card__t { font-size: 1rem; font-weight: 800; margin-bottom: 12px; }
.disc-card input { width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.92rem; margin-bottom: 10px; outline: none; background: var(--surface); }
.disc-card input:focus { border-color: var(--ink); }
.disc-card .book__row { gap: 10px; }

/* 예약 카드 부가 정보 */
.mp-bk__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mp-dday { font-size: 0.72rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; }
.mp-bk__sub { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }
.mp-bk__sub b { color: var(--ink-2); }
/* 호스트 예약 요청 카드 — 금액 강조 + 정보 그룹 + 요청사항 박스 */
.bk-host__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.bk-host__ttl { min-width: 0; }
.bk-host__kicker { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 6px; margin-bottom: 5px; }
.bk-host .mp-book__name { font-size: 1.08rem; }
.bk-host__guest { display: inline-flex; align-items: center; gap: 5px; font-size: 0.92rem; color: var(--ink-2); font-weight: 600; margin-top: 6px; }
.bk-host__guest .ic { color: var(--muted); }
.bk-host__guest b { font-weight: 800; color: var(--ink); }
.bk-host__manner { color: var(--faint); font-weight: 600; }
.bk-host__amt { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding: 8px 14px; background: var(--accent-soft); border: 1px solid rgba(79, 70, 229, 0.16); border-radius: 12px; }
.bk-host__amt-l { font-size: 0.7rem; font-weight: 700; color: var(--accent); opacity: 0.85; }
.bk-host__amt-v { font-family: var(--serif); font-size: 1.4rem; font-weight: 800; color: var(--accent); line-height: 1.15; white-space: nowrap; }
.bk-host__amt-v em { font-size: 0.82rem; font-weight: 700; font-style: normal; margin-left: 1px; }
.bk-host__settle { font-size: 0.7rem; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.bk-host__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 14px; }
.bk-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); padding: 7px 13px; border-radius: 9px; }
.bk-chip .ic { color: var(--muted); }
.bk-chip--tel { color: var(--accent); background: var(--accent-soft); font-weight: 800; }
.bk-host__st { margin-left: auto; }
.bk-req { margin-top: 14px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; }
.bk-req__t { display: block; font-size: 0.76rem; font-weight: 800; color: var(--faint); margin-bottom: 8px; letter-spacing: 0.03em; }
.bk-req__x { font-size: 0.95rem; line-height: 1.75; color: var(--ink-2); letter-spacing: 0.015em; margin: 0; }
@media (max-width: 520px) { .bk-host__top { flex-direction: column; } .bk-host__amt { align-self: stretch; flex-direction: row; align-items: center; justify-content: space-between; } .bk-host__settle { margin-top: 0; } }
.mp-bk__policy { font-size: 0.78rem; color: var(--faint); margin-top: 8px; }
.cal-d.is-block { text-decoration: line-through; color: var(--line) !important; }
.cal-d.is-partial { position: relative; }
.cal-d.is-partial::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #e2402f; }

/* 결제 확인 모달 */
.cf { background: var(--surface-2); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
/* 게스트 예약카드 보증금 라인 */
.mp-bk__dep { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-2); margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: var(--surface-2); }
.mp-bk__dep svg { color: var(--accent); flex-shrink: 0; }
.mp-bk__dep--refunded { color: var(--good, #1f9d63); }
.mp-bk__dep--deducted { color: #b45309; }
/* 관리자 보증금(예수금) 목록 */
.ad-deps { display: flex; flex-direction: column; gap: 8px; }
.ad-dep { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.ad-dep__nm b { font-size: 0.94rem; }
.ad-dep__nm em { display: block; font-style: normal; font-size: 0.8rem; color: var(--muted); }
.ad-dep__amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.ad-dep__st { font-size: 0.76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ad-dep__st--held { background: var(--accent-soft, #eef0fe); color: var(--accent); }
.ad-dep__st--refunded { background: rgba(31,157,99,.14); color: #1f9d63; }
.ad-dep__st--deducted { background: rgba(180,83,9,.14); color: #b45309; }
.ad-dep__act { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .ad-dep { grid-template-columns: 1fr auto; grid-auto-rows: auto; } .ad-dep__st, .ad-dep__act { grid-column: span 1; } }

/* 이용권 · QR */
.ticket { text-align: center; padding: 8px 0; }
.qr { display: grid; width: 156px; height: 156px; margin: 6px auto 14px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; gap: 1px; }
.qr span { background: transparent; }
.qr span.on { background: var(--ink); border-radius: 1px; }
.ticket__code { font-family: monospace; font-weight: 800; letter-spacing: 0.14em; font-size: 1.05rem; color: var(--ink); }
.ticket__info { font-size: 0.92rem; color: var(--ink-2); line-height: 1.6; margin: 12px 0; }
.ticket__info b { font-weight: 800; }
.ticket__note { font-size: 0.8rem; color: var(--faint); }

/* 정산 대시보드 */
.settle-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.settle-kpi { background: transparent; border: 0; border-right: 1px solid var(--line-2); border-radius: 0; padding: 13px 14px; text-align: left; display: flex; flex-direction: column; gap: 3px; }
.settle-kpi:last-child { border-right: 0; }
.settle-kpi strong { display: block; font-family: inherit; font-size: 1.2rem; font-weight: 800; color: var(--ink); line-height: 1.05; letter-spacing: -0.02em; }
.settle-kpi span { display: block; font-size: 0.76rem; color: var(--muted); }
.settle-kpi--hl { background: var(--accent-soft); }
.settle-kpi--hl strong { color: var(--accent); }
.settle-kpi--hl span { color: var(--accent); font-weight: 700; }
@media (max-width: 760px) {
  .settle-kpi:nth-child(2) { border-right: 0; }
  .settle-kpi:nth-child(1), .settle-kpi:nth-child(2) { border-bottom: 1px solid var(--line-2); }
}

/* 내 등록 공간 수정/삭제 */
.mine-wrap { display: flex; flex-direction: column; position: relative; }
.mine-wrap.is-hidden .sp-card { opacity: 0.55; filter: grayscale(0.4); }
.mine-hidden-tag { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; background: rgba(23, 20, 15, 0.82); color: #fff; font-size: 0.72rem; font-weight: 700; }
.mine-act { display: flex; gap: 8px; margin-top: 10px; }
.mine-act .btn { flex: 1; }
/* 노출/숨김 토글 스위치 (카드 우측 상단) */
.mine-toggle { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px 4px 11px; cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 800; color: var(--muted); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.3); transition: color 0.14s; }
.mine-toggle__lbl { line-height: 1; }
.mine-toggle .switch { position: relative; width: 32px; height: 18px; border-radius: 999px; background: #cbd2dc; transition: background 0.16s; flex-shrink: 0; }
.mine-toggle .switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left 0.16s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.mine-toggle.is-on { color: var(--accent); }
.mine-toggle.is-on .switch { background: var(--accent); }
.mine-toggle.is-on .switch i { left: 16px; }
.mine-toggle:hover { border-color: var(--accent); }

/* 견적요청 리드타임 안내 */
.rq-flow__title { font-weight: 800; font-size: 0.98rem; color: var(--ink); margin-bottom: 12px; }
.rq-flow { list-style: none; counter-reset: rqf; display: grid; gap: 10px; margin: 0; padding: 0; }
.rq-flow li { counter-increment: rqf; position: relative; padding-left: 34px; }
.rq-flow li::before { content: counter(rqf); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.rq-flow li b { display: block; color: var(--ink); font-size: 0.92rem; margin-bottom: 1px; }
.rq-flow li span { font-size: 0.84rem; color: var(--muted); }
.rq-flow li span b { display: inline; color: var(--accent); font-size: inherit; }
.rq-flow__note { margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed #e0cf9f; font-size: 0.82rem; color: var(--ink-2); }

/* 원스톱 · 역경매 소개 */
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.how-step { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm); }
.how-step .how-step__n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.05rem; font-weight: 800; line-height: 1; margin-bottom: 12px; box-shadow: 0 4px 12px -3px rgba(79,70,229,0.5); }
.how-step b { display: block; font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.how-step span { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.how-svc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.how-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; font-size: 0.9rem; font-weight: 700; }
.how-chip .ic { width: 18px; height: 18px; }

/* 부대 서비스 마켓 카드 */
.svc-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.svc-grid::-webkit-scrollbar { display: none; }
.svc-grid.is-drag { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.svc-grid .svc-card { flex: 0 0 246px; scroll-snap-align: start; -webkit-user-drag: none; user-select: none; }
.svc-grid.is-drag .svc-card { pointer-events: none; }
.guide-play { vertical-align: -4px; margin-right: 4px; }
.guide-btn { display: inline-flex; align-items: center; }
.svc-card { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; text-decoration: none; color: inherit; transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s; }
.svc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--ink); }
.svc-card__ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--ink); }
.svc-card__ic .ic { width: 20px; height: 20px; }
.svc-card__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.svc-card__t { font-weight: 800; font-size: 0.92rem; }
.svc-card__d { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 460px) { .svc-grid .svc-card { flex-basis: 78vw; } }

/* 역경매 견적 비교 */
.rfp-quotes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.rfp-cat { margin-bottom: 6px; }
.rfp-cat__h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.9rem; margin: 12px 0 8px; }
.rfp-cat__h .ic { color: var(--accent); }
.rfp-cat__cnt { margin-left: auto; font-size: 0.76rem; font-weight: 800; color: #fff; background: var(--accent); padding: 2px 10px; border-radius: 999px; }
.rfp-empty { font-size: 0.85rem; color: var(--faint); padding: 6px 0 8px; }
/*  자동 견적이 왜 안 왔는지 — '견적 대기 중' 만 있으면 회원은 그냥 기다린다 */
.rfp-hold { display: flex; gap: 6px; align-items: flex-start; font-size: 0.8rem; line-height: 1.5; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 10px; margin: 4px 0 8px; }
.rfp-hold svg { flex: 0 0 auto; margin-top: 2px; }
.rfp-hold b { color: #78350f; }
.rfp-hold em { font-style: normal; color: #b45309; opacity: .85; }
.rfp-cat .quote-row { margin-bottom: 6px; }
.quote-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 11px; border: 1px solid transparent; }
.quote-row.is-sel { border-color: var(--ok); background: rgba(18, 161, 80, 0.16); }
.quote-row__l b { font-weight: 800; }
.quote-cat { font-size: 0.74rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.quote-desc { font-size: 0.84rem; color: var(--muted); margin-top: 4px; line-height: 1.55; }
/* 파트너 전달사항 — 배송·셋팅·회수 조건이 숫자 뒤에 붙어 안 읽혔다. 떼어 세운다.
   ⚠ 금액 내역(quote-desc)과 색을 달리해야 눈이 갈린다. */
.qmemo { margin-top: 7px; background: var(--accent-soft); border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 10px; padding: 9px 11px; }
.qmemo__t { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 800; color: var(--accent); }
.qmemo__t .ic { color: var(--accent); flex-shrink: 0; }
.qmemo p { margin: 4px 0 0; font-size: 0.85rem; font-weight: 600; line-height: 1.6; color: var(--ink); word-break: keep-all; }
/* 견적 비교 표에서도 전달사항은 따로 — 예전엔 desc 를 80자로 잘라 통째로 사라졌다 */
.qcmp-col__memo { margin-top: 5px; display: flex; align-items: flex-start; gap: 4px; font-size: 0.75rem;
  font-weight: 600; line-height: 1.45; color: var(--accent); background: var(--accent-soft);
  border-radius: 7px; padding: 5px 7px; word-break: keep-all; }
.qcmp-col__memo .ic { flex-shrink: 0; margin-top: 1px; }
/* 비교 칼럼의 현재 상태 — 버튼이 '되돌리기' 로 바뀌었으므로 상태는 따로 적어야 한다.
   버튼 글자만 보면 지금이 확정인지 선택인지 알 수 없다 */
.qcmp-col__tag { margin-top: 6px; font-size: 0.74rem; font-weight: 800; color: var(--accent); }
.qcmp-col.is-picked .qcmp-col__tag { color: var(--ok); }
/* 되돌리기 버튼과 확정 버튼이 나란히 설 수 있게 */
.qcmp-col .btn + .btn { margin-top: 5px; }
.quote-row__r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* 선택 상태에서 버튼이 셋(선택함·확정하기·선택 해제)이라 좁은 화면에서 넘쳤다 */
.quote-row__r { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.quote-price { font-weight: 800; font-size: 1rem; }
.quote-badge { font-size: 0.76rem; font-weight: 800; color: var(--ok); }
.rfp-cat__done { margin-left: auto; font-size: 0.74rem; font-weight: 800; color: var(--ok); background: rgba(18, 161, 80, 0.16); padding: 2px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.rfp-cat__done + .rfp-cat__cnt { margin-left: 6px; }
/* '견적 보기 (N곳) ▾' — 머리줄 전체가 여닫기 버튼이라 이건 표시일 뿐이다(따로 안 누른다).
   전에 이 자리에 있던 파란 '이 항목 확정' 버튼은 머리줄 클릭과 겹쳐 무엇이 눌리는지
   알 수 없었다 — 확정은 견적 줄 안으로 옮겼다 */
.rfp-cat__see { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.76rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; white-space: nowrap; }
.rfp-cat__h:hover .rfp-cat__see { border-color: var(--accent); color: var(--accent); }
.rfp-cat__see.is-pick { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.rfp-cat__caret { font-style: normal; font-size: 0.68rem; opacity: 0.7; }
/* 0건 — 파란 칩에 '0곳' 이 적혀 있으면 무언가 와 있는 것처럼 읽힌다. 회색으로 눕힌다 */
.rfp-cat__wait { margin-left: auto; font-size: 0.74rem; font-weight: 600; color: var(--faint);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 10px; white-space: nowrap; }
.quote-low { font-size: 0.68rem; font-weight: 800; color: #fff; background: var(--ok); padding: 2px 7px; border-radius: 999px; margin-left: 7px; vertical-align: 2px; }
/* 예산 비교 바 */
/* 예산 현황 — 넉 줄(제목·게이지·합계·남은예산)로 125px 을 먹어 아래 목록을 첫 화면
   밖으로 밀어냈다(실측). 한 줄로 눕힌다. 좁은 화면에서는 두 줄로 접힌다 */
.rfp-budget { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 13px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px; }
.rfp-budget.is-over { border-color: rgba(242, 119, 95, 0.45); background: rgba(242, 119, 95, 0.09); }
.rfp-budget__lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 0.83rem;
  font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.rfp-budget__lbl svg { color: var(--accent); flex-shrink: 0; }
.rfp-budget__lbl b { font-weight: 800; color: var(--ink); }
.rfp-budget__lbl em { font-style: normal; font-weight: 600; color: var(--muted); font-size: 0.78rem; }
.rfp-budget__pct { font-size: 0.83rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.rfp-budget.is-over .rfp-budget__pct { color: #c0432c; }
/* 게이지는 남은 자리를 채운다 — 얇게 눕혀도 '얼마나 썼나' 는 그대로 읽힌다 */
.rfp-budget__bar { flex: 1; min-width: 60px; height: 6px; border-radius: 999px;
  background: var(--line-2); overflow: hidden; }
.rfp-budget__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width 0.4s ease; min-width: 3px; }
.rfp-budget.is-over .rfp-budget__bar i { background: linear-gradient(90deg, #e2402f, #d9583f); }
.rfp-budget__note { font-size: 0.8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rfp-budget__note em { font-style: normal; font-weight: 500; color: var(--faint); }
.rfp-budget.is-over .rfp-budget__note { color: #c0432c; }
@media (max-width: 560px) { .rfp-budget__bar { order: 9; flex-basis: 100%; } }
.rfp-budget.is-over .rfp-budget__note svg { color: #c0432c; }
/* RFP 선택 유도 헤드카피 */
.rfp-cta-copy { display: flex; align-items: center; gap: 7px; margin: 12px 0; padding: 12px 15px; background: var(--accent-soft); border: 1px solid rgba(79,70,229,0.16); border-radius: 11px; font-size: 0.92rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.rfp-cta-copy svg { color: var(--accent); flex-shrink: 0; }
/* 업체: 내가 낸 견적 목록 (카테고리별) */
.vq-list { display: grid; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.vq-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.vq-row__cat { font-weight: 800; font-size: 0.88rem; }
.vq-row__price { font-weight: 800; }
.vq-row__st { font-size: 0.78rem; font-weight: 700; color: var(--gold, #b0851f); }
.vq-row__disc { font-size: 0.72rem; font-weight: 800; color: #fff; background: var(--ok); padding: 1px 7px; border-radius: 999px; }
.vq-row__act { margin-left: auto; display: flex; gap: 6px; }
/* 공간 견적 표시(회원) */
.quote-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 4px; }
.quote-by { font-size: 0.8rem; color: var(--muted); }
.quote-disc { font-size: 0.74rem; font-weight: 800; color: var(--ok); background: rgba(18, 161, 80, 0.16); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
/* 공간 견적 폼(호스트) */
.q-orig { font-size: 0.86rem; color: var(--ink-2); margin: -4px 0 12px; }
.q-orig b { font-weight: 800; }
.q-orig span { color: var(--faint); font-size: 0.8rem; }
.q-disc-live { min-height: 4px; margin: -4px 0 12px; }
.q-disc-badge { display: inline-block; font-size: 0.8rem; font-weight: 800; color: #fff; background: var(--ok); padding: 4px 11px; border-radius: 999px; }
.q-disc-none { font-size: 0.8rem; font-weight: 700; color: #c0432c; }
.mp-bk__info--click { cursor: pointer; }
.mp-bk__info--click:hover .mp-book__name { color: var(--accent); }
/* 견적 요청 상세 모달 */
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rd-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; }
.rd-chip .ic { color: var(--accent); }
/* 담당 카테고리가 하나도 없을 때 — 예전에는 요청의 전체 카테고리로 폴백해 남의 항목을 드러냈다 */
.rd-chip--none { color: var(--muted); font-weight: 600; background: none; border-style: dashed; }
.rd-rows { display: grid; gap: 1px; background: var(--line-2); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.rd-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface); font-size: 0.9rem; }
.rd-row span { color: var(--muted); }
.rd-row b { font-weight: 800; color: var(--ink); text-align: right; }
.rd-note { margin-top: 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 11px; }
.rd-note b { font-size: 0.82rem; color: var(--muted); font-weight: 800; }
.rd-note p { margin: 5px 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.rd-note--empty { color: var(--faint); font-size: 0.86rem; }
/* 공간 견적 폼 — 요청 요약 */
.sq-req { font-size: 0.84rem; color: var(--ink-2); background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; margin: -4px 0 14px; line-height: 1.6; }
.sq-req b { font-weight: 800; }
.sq-req__detail { display: block; color: var(--muted); font-style: italic; margin-top: 3px; }
.sq-req__more { background: none; border: none; color: var(--accent); font-weight: 800; font-size: 0.8rem; cursor: pointer; padding: 2px 0 0; text-decoration: underline; }
/* 견적요청 카드 접기/펼치기 */
.rfp-card__head { cursor: pointer; }
.rfp-card .mp-bk__right { display: flex; align-items: center; gap: 10px; }
.rfp-card__chev { font-size: 0.85rem; color: var(--faint); transition: transform 0.2s; }
.rfp-card.is-collapsed .rfp-card__chev { transform: rotate(-90deg); }
.rfp-card.is-collapsed .rfp-card__body { display: none; }
.rfp-card__head:hover .mp-book__name { color: var(--accent); }
/* 선택/확정 상태 */
.quote-row.is-pick { border-color: var(--accent); background: var(--accent-soft); }
.quote-row.is-dim { opacity: 0.5; }
.quote-picked { font-size: 0.78rem; font-weight: 800; color: var(--accent); }
.quote-name--link { cursor: pointer; }
.quote-name--link:hover { color: var(--accent); }
.quote-name__see { font-size: 0.72rem; color: var(--accent); font-weight: 700; }
/* 벤더: 확정된 이용 공간 배너 */
.vq-space { margin-top: 10px; padding: 11px 13px; background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.28); border-radius: 11px; font-size: 0.88rem; color: var(--ink); }
.vq-space b { font-weight: 800; }
.vq-space__sub { font-size: 0.8rem; color: var(--muted); margin-top: 3px; }
.vq-space--wait { background: var(--surface-2); border-color: var(--line); color: var(--muted); font-size: 0.82rem; }
/* 공간 상세 정보 모달 */
.si-thumb { height: 180px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.si-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.si-price { font-weight: 800; font-size: 1.05rem; }
.si-price em { font-size: 0.8rem; font-weight: 500; color: var(--muted); font-style: normal; }
.si-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.si-tags span { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }
/* 견적 비교 요약 (feature 3) */
.rfp-compare { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* 접힘 머리 — 표는 접혀 있고 가장 중요한 한 줄(최저가 조합 · 예산 대비)만 늘 보인다.
   ⚠ summary 의 기본 삼각형을 지운다(우리 ▾ 와 두 개가 된다) */
.rfp-compare__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 800; font-size: 0.86rem; padding: 9px 13px; background: var(--surface-2);
  cursor: pointer; list-style: none; }
.rfp-compare__h::-webkit-details-marker { display: none; }
.rfp-compare[open] .rfp-compare__h { border-bottom: 1px solid var(--line); }
.rfp-compare__h svg { color: var(--accent); flex-shrink: 0; }
.rfp-compare__h > span { color: var(--ink-2); }
.rfp-compare__sum { margin-left: auto; font-weight: 800; color: var(--ink); white-space: nowrap; }
.rfp-compare__gap { font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--ok);
  background: rgba(18, 161, 80, 0.13); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.rfp-compare__gap.is-over { color: #c0432c; background: rgba(242, 119, 95, 0.16); }
.rfp-compare__chev { font-style: normal; font-size: 0.7rem; color: var(--faint); transition: transform 0.18s; }
.rfp-compare[open] .rfp-compare__chev { transform: rotate(180deg); }
@media (max-width: 560px) { .rfp-compare__sum { margin-left: 0; flex-basis: 100%; } }
.rfp-cmp { width: 100%; border-collapse: collapse; font-size: 0.86rem; table-layout: fixed; }
.rfp-cmp th, .rfp-cmp td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.rfp-cmp th:first-child, .rfp-cmp td:first-child { text-align: left; font-weight: 700; white-space: normal; word-break: keep-all; width: 38%; }
.rfp-cmp th:last-child, .rfp-cmp td:last-child { width: 15%; }
@media (max-width: 560px) { .rfp-cmp { font-size: 0.8rem; } .rfp-cmp th, .rfp-cmp td { padding: 7px 8px; } }
.rfp-cmp thead th { color: var(--muted); font-weight: 700; font-size: 0.78rem; }
.rfp-cmp tbody tr:last-child td { border-bottom: none; }
/* .rfp-compare__foot 은 접힘 머리(__sum·__gap)로 옮겨 더 쓰지 않는다 */
/* 마감 임박 배너 (feature 2) */
.rfp-dl { margin-top: 12px; padding: 11px 14px; background: rgba(217, 138, 31, 0.12); border: 1px solid rgba(217, 138, 31, 0.35); border-radius: 11px; font-size: 0.86rem; color: #92610f; }
.rfp-dl b { font-weight: 800; }
/* 신뢰 지표 · 추천 배지 */
.quote-row__name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.quote-trust { display: inline-block; font-size: 0.76rem; font-weight: 700; color: var(--gold, #b0851f); margin-top: 3px; }
.quote-rec { font-size: 0.68rem; font-weight: 800; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 999px; }
/* 공간 견적 시간 충돌 경고 (feature 4) */
.sq-conflict { margin: -4px 0 12px; padding: 10px 12px; background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.25); border-radius: 10px; font-size: 0.82rem; font-weight: 700; color: #c0392b; }
/* 첨부(사진·파일) */
.att-input { width: 100%; font-size: 0.82rem; }
.att-prev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.att-prev img { width: 60px; height: 46px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); }
.att-file { font-size: 0.76rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.qfiles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
/* 견적 사진 미리보기(캐러셀 진입) */
.qphotos { position: relative; margin-top: 8px; width: 120px; cursor: zoom-in; }
.qphotos__img { width: 120px; height: 82px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); display: block; }
.qphotos__cnt { position: absolute; right: 5px; bottom: 5px; font-size: 0.68rem; font-weight: 800; color: #fff; background: rgba(0,0,0,0.6); padding: 1px 7px; border-radius: 999px; }
/* 라이트박스 (<>) */
.lb { position: relative; text-align: center; }
.lb__img { display: block; max-width: 100%; max-height: 66vh; width: auto; margin: 0 auto; object-fit: contain; border-radius: 10px; background: #111; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); font-size: 1.4rem; line-height: 1; cursor: pointer; color: #fff; z-index: 2; }
.lb__prev { left: 8px; } .lb__next { right: 8px; }
.lb__nav:disabled { opacity: 0.25; cursor: default; }
.modal__card { overflow-x: hidden; }
/* 업체 찾기 */
/* 업체 찾기 — 검색·지역·가로 필터 */
.v-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.v-controls .srch-kw { flex: 1 1 240px; min-width: 200px; margin-bottom: 0; }
.v-region { flex: 0 0 auto; width: 168px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); font-weight: 600; }
/*  칩 줄 — 지역 칩 하나 + 카테고리 칩들이 한 줄로 흐른다.
    ⚠ mask-image 로 끝을 흐리게 하던 방식을 버렸다. 마스크는 늘 걸려 있어서 끌 것이
      없을 때도 마지막 칩이 반투명하게 보였고, 오른쪽 끝까지 밀어도 계속 흐렸다.
      지금은 .v-filterrow 가 겹쳐 그리는 그라데이션이고, 더 남았을 때만 나타난다. */
.v-filterbar { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 0; -webkit-overflow-scrolling: touch; }
.v-filterbar::-webkit-scrollbar { display: none; }
.v-filterbar > .chips { flex: 0 0 auto; flex-wrap: nowrap; width: max-content; }
.v-filterbar .chip { flex-shrink: 0; }

/*  지역 칩 — 셀렉트 박스 두 개를 대신한다. 누르면 시트가 올라온다(js/regionpick.js).
    ⚠ 줄을 오른쪽으로 밀어도 왼쪽에 붙어 남는다(sticky). 어느 지역으로 보고 있는지는
      스크롤 위치와 무관하게 계속 보여야 한다. */
.rgchip { position: sticky; left: 0; z-index: 2; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.rgchip .ic { flex: 0 0 auto; }
.rgchip__c { font-size: 0.72rem; color: var(--faint); }
.rgchip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rgchip.is-on .rgchip__c { color: rgba(255, 255, 255, 0.8); }
/*  sticky 칩 뒤로 다른 칩이 지나가는 게 보이면 지저분하다 — 오른쪽에 짧은 가림막을 둔다 */
.rgchip::after { content: ""; position: absolute; left: 100%; top: -6px; bottom: -6px; width: 8px;
  background: linear-gradient(90deg, var(--bg, #fff), transparent); pointer-events: none; }

/*  오른쪽 페이드 + '›' 힌트 — 더 남았을 때만 보인다.
    is-scrollable · is-atend 는 js/dragscroll.js 가 붙인다. */
.v-filterrow { position: relative; }
.v-more { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 6px rgba(15, 23, 42, 0.16);
  color: var(--ink-2); font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center; padding-bottom: 2px; }
.v-more:hover { color: var(--accent); }
.v-filterrow:has(.v-filterbar.is-scrollable:not(.is-atend)) .v-more { display: flex; }
/*  칩이 화살표 밑에서 잘려 보이지 않게, 그라데이션으로 자연스럽게 사라지게 한다 */
.v-filterrow::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 54px;
  background: linear-gradient(90deg, transparent, var(--bg, #fff) 62%); pointer-events: none; opacity: 0;
  transition: opacity 0.18s; z-index: 1; }
.v-filterrow:has(.v-filterbar.is-scrollable:not(.is-atend))::after { opacity: 1; }
@media (max-width: 560px) { .v-region { width: 100%; } }
.v-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.v-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 10px -4px rgba(15,23,42,0.08); transition: transform 0.16s, box-shadow 0.16s; }
.v-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(15,23,42,0.28); }
.v-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; background: var(--surface-2); }
.v-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2,0.7,0.3,1); }
.v-card:hover .v-card__thumb img { transform: scale(1.05); }
.v-card__rate { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; font-size: 0.73rem; font-weight: 700; color: #fff; background: rgba(15,23,42,0.42); backdrop-filter: blur(6px) saturate(160%); padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 8px -3px rgba(0,0,0,0.3); }
.v-card__rate--new { background: linear-gradient(100deg, var(--accent), var(--accent-2)); letter-spacing: 0.03em; }
/* 결과 수 + 정렬 헤더 */
.v-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
/*  즉시예약 토글이 이 줄로 올라왔다(4줄 → 3줄). 좁은 화면에서 이 줄이 접히면 다시
    4줄이 되므로 폭을 조인다 — 실측으로 값을 골랐다(390px 에서 한 줄 유지).
    ⚠ '정렬' 글자와 결과 수의 '개 공간' 을 모바일에서 줄인다. 셀렉트가 '추천순' 을
      그대로 보여주므로 라벨이 없어도 뜻이 통한다. */
.v-listhead__l { display: flex; align-items: center; gap: 10px; min-width: 0; }
@media (max-width: 760px) {
  .v-listhead { gap: 8px; flex-wrap: nowrap; }
  .v-listhead__l { gap: 7px; flex: 1; min-width: 0; }
  .v-listhead .results__count { font-size: 0.86rem; white-space: nowrap; }
  .v-listhead .results__count b { font-size: 1.02rem; }
  .v-listhead .results__tools { gap: 7px; flex-shrink: 0; }
  .v-listhead .results__sort > span { display: none; }
  .v-listhead .qsw { flex-shrink: 0; }
}
@media (max-width: 430px) { .rc__u { display: none; } }
/*  ⚠ 아주 좁은 화면(≤374px) 대응은 **CSS 뒤쪽** "모바일 정돈" 블록 다음에 둔다.
    여기 두었더니 그 블록의 .v-listhead{flex-wrap:nowrap} 이 순서로 이겨 무효였다
    (실측: flex-basis 는 먹었는데 flex-wrap 은 안 먹어 왼쪽 묶음이 폭 0 이 됐다). */
.v-count { font-size: 0.95rem; color: var(--muted); }
.v-count b { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); font-weight: 600; margin-right: 2px; }
/* 빈 화면 (검색 결과 없음) */
.empty-state { text-align: center; padding: 64px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-state__ic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--faint); margin-bottom: 8px; }
.empty-state b { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.empty-state p { font-size: 0.9rem; color: var(--muted); margin-bottom: 14px; }
.v-card__body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v-card__name { font-size: 1.04rem; font-weight: 800; cursor: pointer; }
.v-card__name:hover { color: var(--accent); }
.v-card__blurb { font-size: 0.85rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.55em; }
.v-tags { display: flex; flex-wrap: wrap; gap: 5px; }
/* 맞춤 업체 카드 — 대표 렌탈 품목 칩 (한눈에 인지) */
.v-card__items { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 2px 0 2px; cursor: pointer; }
.v-card__itemcap { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 800; color: var(--accent); }
.v-card__itemcap .ic { color: var(--accent); }
.v-item { font-size: 0.75rem; font-weight: 700; color: var(--ink-2); background: var(--accent-soft); border: 1px solid rgba(79,70,229,0.16); padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.v-item--more { color: var(--accent); background: var(--surface); }
.vinfo-items__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
/* 파트너가 상품 관리에서 올린 품목 사진 — 사진 있는 품목만 카드로 */
.vitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; margin-top: 10px; }
.vitem { margin: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.vitem img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
/*  사진 없는 품목의 자리표시자 — 이름 첫 글자. 사진 유무와 무관하게 단가가 보이도록
    카드 형태를 똑같이 유지한다(사진 없는 품목이 단가 없는 것처럼 보이던 문제). */
.vitem__ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3;
  background: var(--surface-2); color: var(--faint); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.vitem--nopic { border-style: dashed; }
.vitem figcaption { padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.vitem figcaption b { font-size: 0.79rem; font-weight: 700; color: var(--ink-2); line-height: 1.35; word-break: keep-all; }
.vitem figcaption em { font-style: normal; font-size: 0.76rem; font-weight: 800; color: var(--accent); }
@media (max-width: 520px) { .vitems { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; } }
.v-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.v-tag .ic { color: var(--accent); }
.v-card__cta { margin-top: auto; }
.v-card__links { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; }
.v-link { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.v-link:hover { color: var(--accent); text-decoration: underline; }
.v-link__sep { color: var(--line); }
@media (max-width: 900px) { .v-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v-grid { grid-template-columns: 1fr; } }
/* 업체 후기 모달 */
.vrev-summary { display: flex; gap: 16px; align-items: center; padding: 14px; background: var(--surface-2); border-radius: 12px; margin-bottom: 14px; }
.vrev-score { text-align: center; flex-shrink: 0; }
.vrev-score strong { display: block; font-size: 2rem; font-weight: 800; color: var(--gold, #b0851f); line-height: 1; }
.vrev-score span { font-size: 0.76rem; color: var(--muted); }
.vrev-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vrev-bar { display: flex; align-items: center; gap: 7px; font-size: 0.74rem; color: var(--muted); }
.vrev-bar span { width: 22px; }
.vrev-bar i { flex: 1; height: 6px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.vrev-bar i b { display: block; height: 100%; background: var(--gold, #b0851f); }
.vrev-bar em { width: 20px; text-align: right; font-style: normal; }
.vrev-list { display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto; }
.vrev-row { display: flex; gap: 10px; }
.vrev-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.vrev-nm { font-weight: 700; font-size: 0.9rem; }
.vrev-nm em { color: var(--gold, #b0851f); font-style: normal; font-size: 0.8rem; margin-left: 4px; }
.vrev-tx { font-size: 0.86rem; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
/* 업체 상세 모달 */
.vinfo-thumb { height: 170px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.vinfo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vinfo-intro { font-size: 0.9rem; color: var(--ink-2); line-height: 1.6; margin: 0 0 12px; }
/* 업체 모달 — 사진 캐러셀 */
.vmg { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; border-radius: 14px; aspect-ratio: 16 / 10; background: var(--surface-2); }
.vmg::-webkit-scrollbar { display: none; }
.vmg__slide { flex: 0 0 100%; scroll-snap-align: center; }
.vmg__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vmg--multi .vmg__slide { position: relative; }
/* 업체 모달 — 참고가 */
.vinfo-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 0.92rem; color: var(--ink-2); background: var(--accent-soft); border: 1px solid rgba(79,70,229,0.16); border-radius: 11px; padding: 11px 14px; margin-bottom: 12px; }
.vinfo-price b { font-size: 1.1rem; font-weight: 800; color: var(--accent); }
.vinfo-price span { font-size: 0.78rem; color: var(--muted); }
/* 업체 모달 — 견적 요청 폼 */
.vreq { border: 1px solid var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 55%); border-radius: 14px; padding: 15px 16px; margin: 4px 0 16px; }
.vreq__head { font-size: 0.95rem; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.vreq__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vreq__f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.vreq__f > span { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.vreq__f input, .vreq__f textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink); background: var(--surface); outline: none; }
.vreq__f input:focus, .vreq__f textarea:focus { border-color: var(--accent); }
.vreq__label { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.vreq__label span { color: var(--faint); font-weight: 500; }
.vreq__items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vreq__item { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.8rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.vreq__item input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.vreq__item:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.vreq__err { color: #e2402f; font-size: 0.82rem; font-weight: 600; margin: 0 0 10px; }
.vreq__notice { font-size: 0.86rem; color: var(--muted); }
.vreq__notice a { color: var(--accent); font-weight: 700; }
@media (max-width: 480px) { .vreq__row { grid-template-columns: 1fr; } }
/* 맞춤 업체 카드 — 대여 시작가 */
.v-card__from { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.v-card__from b { color: var(--accent); font-weight: 800; }
.vinfo-items { background: var(--surface-2); border-radius: 11px; padding: 12px 14px; margin-bottom: 14px; }
.vinfo-items b { font-size: 0.82rem; color: var(--muted); font-weight: 800; }
.vinfo-items ul { margin: 7px 0 0; padding-left: 18px; }
.vinfo-items li { font-size: 0.88rem; color: var(--ink); line-height: 1.7; }
/* 업체 정보 편집 — 사진 */
.biz-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.biz-photo { position: relative; width: 92px; height: 70px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.biz-photo img { width: 100%; height: 100%; object-fit: cover; }
.biz-photo__x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7rem; cursor: pointer; }
/* 직접 요청 배지 */
.rq-direct { font-size: 0.72rem; font-weight: 800; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 999px; vertical-align: 1px; }
/* 공간 상세 sticky 섹션 내비 */
.sp-nav { position: sticky; top: var(--header-h); z-index: 50; display: flex; gap: 2px; background: rgba(247,248,250,0.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); padding: 3px 0; margin: 12px 0 22px; overflow-x: auto; scrollbar-width: none; }
.sp-nav::-webkit-scrollbar { display: none; }
.sp-nav a { padding: 11px 15px; font-size: 0.9rem; font-weight: 700; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s; }
.sp-nav a:hover { color: var(--ink); }
.sp-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.sp-sec { scroll-margin-top: calc(var(--header-h) + 60px); }
/* 견적요청 하위탭 · 액션 */
.rfp-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
/* 기간 필터 바 */
.lf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; background: var(--surface-2); border-radius: 11px; }
.lf__t { font-size: 0.82rem; font-weight: 800; color: var(--muted); }
.lf__d { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 0.86rem; background: var(--surface); }
.lf__sep { color: var(--faint); }
/* 세그먼트 컨트롤 — 밑줄만 있던 탭은 어느 쪽이 켜졌는지 약했다. 배경 박스 안에서
   고른 칸만 흰 알약으로 떠오르게 한다. inline-flex 라 내용만큼만 넓어진다 */
.rfp-subtabs { display: inline-flex; gap: 4px; margin-bottom: 16px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; max-width: 100%; }
.rfp-subtab { background: none; border: none; padding: 8px 14px; border-radius: 9px;
  font-size: 0.9rem; font-weight: 700; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.rfp-subtab:hover { color: var(--ink-2); }
.rfp-subtab.is-active { background: var(--surface); color: var(--ink); font-weight: 800;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04); }
/* 개수는 탭 글자 뒤 작은 칩. 꺼진 탭에서도 읽혀야 하므로 흰 글자를 쓰지 않는다 */
.rfp-subtab__n { font-size: 0.72rem; font-weight: 800; color: var(--muted);
  background: rgba(100, 116, 139, 0.14); border-radius: 999px; padding: 1px 8px;
  min-width: 20px; text-align: center; }
.rfp-subtab.is-active .rfp-subtab__n { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 560px) {
  /* 두 칸이 화면을 넘지 않게 — 글자가 길어 좁은 화면에서 잘렸다 */
  .rfp-subtabs { display: flex; width: 100%; }
  .rfp-subtab { flex: 1; justify-content: center; padding: 8px 6px; font-size: 0.83rem; }
}
/* 견적 그룹 헤더(공간/서비스) */
.rfp-group { margin-top: 12px; }
.rfp-group:first-child { margin-top: 6px; }
/* 섹션 캡슐 헤더 — 투박한 회색 바였다. 은은한 바탕 + 보더 + 라운드로 '구역' 임을
   알리되 카드보다 조용해야 한다(주인공은 안쪽 견적이다) */
.rfp-group__h { width: 100%; display: flex; align-items: center; gap: 9px; font-size: 0.9rem;
  font-weight: 700; color: var(--ink); padding: 11px 13px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s; }
.rfp-group__h:hover { border-color: var(--accent); background: var(--surface); }
.rfp-group__h svg { color: var(--accent); flex-shrink: 0; }
.rfp-group__t { min-width: 0; }
/* '(호스트)' 같은 부제는 제목보다 약하게 — 굵게 두면 둘이 싸운다 */
.rfp-group__t em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 0.84rem; }
.rfp-group__cnt { margin-left: auto; font-size: 0.74rem; font-weight: 700; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
  white-space: nowrap; }
.rfp-group__chev { margin-left: auto; color: var(--faint); display: inline-flex; }
.rfp-group__chev svg { color: var(--faint); transform: rotate(90deg); transition: transform 0.18s; }
.rfp-group__h.is-off .rfp-group__chev svg { transform: rotate(0deg); }
.rfp-group__body { padding-top: 4px; }
/* 직접요청 예산·견적 라인 */
.rfp-dline { font-size: 0.9rem; color: var(--ink-2); margin-top: 10px; padding: 10px 13px; background: var(--surface-2); border-radius: 10px; }
.rfp-dline b { font-weight: 800; color: var(--ink); }
/* 벤더 들어온요청 섹션 헤더 */
.vreq-sec { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; }
.vreq-sec:first-child { margin-top: 4px; }
.vreq-sec b { font-size: 1rem; font-weight: 800; }
.vreq-sec span { font-size: 0.74rem; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 8px; }
.vreq-sec em { font-size: 0.8rem; color: var(--muted); font-style: normal; }
/* 핵심 플로우 스텝 인디케이터 */
.steps { display: flex; align-items: flex-start; margin: 4px 0 14px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.step::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.step:first-child::before { display: none; }
.step.is-done::before, .step.is-cur::before { background: var(--accent); }
.step__dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line); color: var(--faint); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; }
.step.is-done .step__dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.is-cur .step__dot { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.step__l { font-size: 0.74rem; font-weight: 700; color: var(--faint); }
.step.is-done .step__l, .step.is-cur .step__l { color: var(--ink-2); }
.steps--lg { max-width: 520px; margin: 8px auto 26px; }
.steps--lg .step__dot { width: 32px; height: 32px; font-size: 0.9rem; }

/* 슬림 1줄 진행 표시(요청 카드) — 옛 .steps 는 원+글자를 세로로 쌓아 카드마다 60px 넘게
   먹었다. 가로로 눕히고 **지금 단계만** 글자를 보인다. 지난·남은 단계는 점만 */
.sbar { display: flex; align-items: center; gap: 5px; margin: 0 0 10px; flex-wrap: wrap; }
.sstep { display: inline-flex; align-items: center; gap: 5px; }
.sstep__d { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2);
  border: 1.5px solid var(--line); color: var(--faint); display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800;
  font-style: normal; flex-shrink: 0; }
.sstep.is-done .sstep__d { background: var(--accent); border-color: var(--accent); color: #fff; }
.sstep.is-cur .sstep__d { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* 글자는 지금 단계에만 — 다섯 개를 다 쓰면 다시 두 줄이 된다 */
.sstep__l { display: none; font-size: 0.74rem; font-weight: 700; color: var(--accent); }
.sstep.is-cur .sstep__l { display: inline; }
.sstep__ln { flex: 1; min-width: 8px; height: 1.5px; background: var(--line); }
/* 이은 선은 '지나온 곳' 까지만 칠한다 — 다음 점이 끝났으면 그 앞 선도 끝난 것이다 */
.sstep.is-done + .sstep__ln { background: var(--accent); }
.steps--lg .step::before { top: 16px; }
.steps--lg .step__l { font-size: 0.82rem; }
.pay-done { font-size: 0.82rem; font-weight: 800; color: var(--ok); }
/* 결제 페이지 */
.checkout { max-width: 1040px; margin: 0 auto; padding: calc(var(--header-h) + 28px) 20px 60px; }
.checkout__title { font-family: var(--serif); font-size: 1.7rem; margin: 0 0 4px; }
.checkout__sub { color: var(--muted); margin: 0 0 20px; }
.co-grid { display: grid; grid-template-columns: 1.3fr 1.05fr; gap: 22px; align-items: start; }
.co-h { font-size: 1rem; font-weight: 800; margin: 0 0 12px; }
.co-order, .co-pay { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
/* #4a: 투명 통합 세부 영수증 */
.co-receipt { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.co-receipt__h { font-size: 0.78rem; font-weight: 800; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.co-receipt__row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; padding: 4px 0; color: var(--ink-2); }
.co-receipt__row em { font-style: normal; color: var(--muted); font-size: 0.82rem; }
.co-receipt__row b { font-weight: 700; white-space: nowrap; }
.co-receipt__sum { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 7px; }
.co-receipt__sum b { color: var(--ink); font-weight: 800; }
.co-receipt__empty { font-size: 0.84rem; color: var(--faint); margin: 0; }
/* #4b: D-Day 환불 정책 타임라인 */
.co-refund { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.co-refund__h { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.co-refund__h span { margin-left: auto; font-size: 0.74rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.co-refund__tl { display: flex; gap: 4px; }
.co-refund__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border-radius: 8px; background: var(--surface-2); border: 1px solid transparent; }
.co-refund__step b { font-size: 0.9rem; font-weight: 800; color: var(--muted); }
.co-refund__step span { font-size: 0.64rem; font-weight: 700; color: var(--faint); }
.co-refund__step.is-past { opacity: 0.5; }
.co-refund__step.is-now { background: var(--accent-soft); border-color: var(--accent); }
.co-refund__step.is-now b { color: var(--accent); }
.co-refund__step.is-now span { color: var(--accent-ink); }
.co-refund__now { margin: 10px 0 0; font-size: 0.82rem; color: var(--ink-2); }
.co-refund__now b { color: var(--accent); font-weight: 800; }
.co-refund__now a { color: var(--muted); font-size: 0.76rem; margin-left: 4px; }
.co-sum { margin-top: 14px; }
.co-sum__row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--ink-2); margin-bottom: 6px; }
.co-sum__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; margin-top: 6px; border-top: 2px solid var(--line); }
.co-sum__total b { font-size: 1.3rem; font-weight: 800; color: var(--accent); }
.co-budget { margin-top: 12px; font-size: 0.84rem; color: var(--muted); }
.co-method { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 8px; cursor: pointer; font-weight: 700; }
.co-method:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.co-method input { accent-color: var(--accent); }
.co-note { font-size: 0.78rem; color: var(--faint); line-height: 1.6; margin-top: 12px; }
.co-done { text-align: center; padding: 40px 20px; }
.co-done__ic { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.co-done h1 { font-size: 1.4rem; margin: 0 0 8px; }
.co-done p { color: var(--muted); margin: 0 0 22px; }
.co-help { font-size: 0.86rem; color: var(--ink-2); background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; }
.co-help b { color: var(--accent); font-weight: 800; }
.co-cnt { font-size: 0.76rem; font-weight: 700; color: var(--muted); margin-left: 6px; }
.co-item { display: flex; align-items: center; gap: 11px; padding: 13px 4px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.co-item input { position: absolute; opacity: 0; pointer-events: none; }
.co-item__box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.co-item input:checked + .co-item__box { background: var(--accent); border-color: var(--accent); }
.co-item input:checked + .co-item__box::after { content: "✓"; color: #fff; font-size: 0.8rem; font-weight: 800; }
.co-item.is-paid { cursor: default; opacity: 0.72; }
.co-item.is-paid input:checked + .co-item__box { background: var(--ok); border-color: var(--ok); }
.co-item__info { flex: 1; min-width: 0; }
.co-item__info b { font-weight: 700; display: block; }
.co-item__info span { font-size: 0.82rem; color: var(--muted); }
.co-item__price { font-weight: 800; font-style: normal; flex-shrink: 0; }
.co-paid { font-size: 0.72rem; color: var(--ok); font-weight: 800; }
@media (max-width: 860px) { .co-grid { grid-template-columns: 1fr; } }
/* 플로팅 채팅 위젯 */
/*  ⚠ 컨테이너는 클릭을 **통과시킨다**(pointer-events:none). 버블·패널만 받는다.
    안 그러면 아무것도 그려지지 않은 gap·정렬 여백이 뒤의 버튼을 가린다 —
    실측: .cw 617px vs 패널 557px, 그 60px 이 클릭을 먹고 있었다. */
.cw { position: fixed; right: 20px; bottom: 20px; z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.cw > * { pointer-events: auto; }
.cw__bubble { width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(24,23,15,0.22); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.15s; }
.cw__bubble:hover { transform: scale(1.06); }
@keyframes cwbounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } 60% { transform: translateY(-2px); } }
.cw__bubble.cw--alert { animation: cwbounce 1s ease-in-out infinite; }
/* 채팅 숨기기 버튼 + 접힘 핸들 */
.cw__min { position: absolute; top: -4px; left: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); color: var(--muted); border: 1px solid var(--line); font-size: 0.6rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(24,23,15,0.15); opacity: 0; cursor: pointer; transition: opacity 0.15s, color 0.15s; }
.cw__min:hover { color: var(--ink); }
.cw__bubble:hover .cw__min { opacity: 1; }
.cw--collapsed .cw__bubble, .cw--collapsed .cw__panel { display: none; }
.cw__handle { position: relative; display: none; align-items: center; justify-content: center; width: 32px; height: 54px; padding: 0; border: none; border-radius: 15px 0 0 15px; background: var(--accent); color: #fff; box-shadow: -5px 6px 18px rgba(24,23,15,0.24); cursor: pointer; margin-right: -16px; transition: width 0.15s; }
/* ⚠ CHAT_SVG 는 원형 버튼(56px)과 이 손잡이(폭 32px) 둘 다 쓴다. 원형 쪽을 30px 로
   키웠으므로 여기서는 눌러 준다 — 안 그러면 손잡이 밖으로 삐져나온다 */
.cw__handle svg { width: 20px; height: 20px; }
.cw__handle:hover { width: 38px; }
.cw--collapsed .cw__handle { display: flex; }
.cw__handle svg { width: 20px; height: 20px; }
.cw__hdot { position: absolute; top: 7px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: #e2402f; border: 1.5px solid var(--accent); }
@keyframes cwshake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-4px); } 30% { transform: translateX(4px); } 45% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.cw__bubble.cw--shake, .cw__handle.cw--shake { animation: cwshake 0.5s ease-in-out; }
/* 홈 3갈래 진입 */
.paths__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.path-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: inherit; transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s; overflow: hidden; }
.path-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(24,23,15,0.1); border-color: var(--ink); }
.path-card--hl { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 60%); }
.path-card__badge { position: absolute; top: 16px; right: 16px; font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--accent); padding: 3px 10px; border-radius: 999px; }
.path-card__ic { font-size: 2.1rem; }
.path-card__t { font-size: 1.2rem; font-weight: 800; }
.path-card__d { font-size: 0.9rem; color: var(--muted); line-height: 1.6; flex: 1; }
.path-card__d b { color: var(--ink-2); }
.path-card__cta { font-weight: 800; color: var(--accent); margin-top: 4px; }
@media (max-width: 820px) { .paths__grid { grid-template-columns: 1fr; } }
/* 대시보드 */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.dash-kpi { background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 13px 16px; text-align: left; font-family: inherit; cursor: pointer; transition: background 0.14s; display: flex; flex-direction: column; gap: 3px; position: relative; box-shadow: none; }
.dash-kpi:last-child { border-right: 0; }
.dash-kpi:hover { background: var(--surface-2); transform: none; }
.dash-kpi strong { display: block; font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1.05; letter-spacing: -0.02em; }
.dash-kpi span { font-size: 0.78rem; color: var(--muted); }
.dash-kpi--alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #dc2626; }
.dash-kpi--alert { background: rgba(220, 38, 38, 0.035); }
.dash-kpi--alert strong { color: #dc2626; }
.dash-kpi--alert span { color: #dc2626; font-weight: 700; }
@media (max-width: 820px) {
  .dash-kpi:nth-child(2) { border-right: 0; }
  .dash-kpi:nth-child(1), .dash-kpi:nth-child(2) { border-bottom: 1px solid var(--line); }
}
/* 퀵 액션 배너(CTA) */
.dash-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px 18px; width: 100%; margin: -6px 0 18px; padding: 15px 20px; border: 1px solid rgba(79, 70, 229, 0.2); background: rgba(79, 70, 229, 0.06); border-radius: 13px; cursor: pointer; font-family: inherit; text-align: left; transition: transform 0.14s, box-shadow 0.14s; }
.dash-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dash-cta__t { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.dash-cta__t b { color: var(--accent); font-weight: 800; font-size: 1.05rem; margin: 0 2px; }
.dash-cta__b { flex-shrink: 0; font-size: 0.85rem; font-weight: 800; color: var(--accent); background: var(--surface); border: 1px solid rgba(79, 70, 229, 0.35); padding: 9px 16px; border-radius: 9px; white-space: nowrap; }
.dash-cta:hover .dash-cta__b { background: var(--accent); color: #fff; }
.dash-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.dash-cal { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.dcal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 800; }
.dcal-top button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 1.1rem; }
.dcal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dcal-wd span { text-align: center; font-size: 0.74rem; color: var(--faint); font-weight: 700; padding: 4px 0; }
.dcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dcal-e { aspect-ratio: 1; }
.dcal-d { position: relative; aspect-ratio: 1; border: 1px solid transparent; border-radius: 9px; background: none; cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.dcal-d:hover { background: var(--surface-2); }
.dcal-d.is-today { background: rgba(79, 70, 229, 0.12); border-color: var(--accent); color: var(--accent); font-weight: 800; }
.dcal-d.is-sel { background: var(--accent); color: #fff; }
.dcal-d.has-ev { font-weight: 800; color: var(--ink); }
.dcal-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.dcal-dot.ok { background: var(--ok); }
.dcal-dot.amber { background: #d9992f; }
.dcal-d.is-sel .dcal-dot { background: #fff; }
.dcal-d.is-blocked { background: repeating-linear-gradient(45deg, rgba(220,38,38,0.07), rgba(220,38,38,0.07) 4px, transparent 4px, transparent 8px); color: #b91c1c; }
.dcal-blk { position: absolute; top: 2px; right: 3px; font-size: 0.62rem; line-height: 1; }
.dcal-tip { margin: 10px 2px 0; font-size: 0.76rem; color: var(--muted); }
/* A-1: 날짜 관리 모달 */
.daymg-sec { margin-top: 16px; }
.daymg-sec:first-of-type { margin-top: 6px; }
.daymg-sec__h { font-size: 0.9rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.daymg-hint { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
.daymg-past { background: #fff7ed; color: #b45309; font-size: 0.8rem; padding: 8px 12px; border-radius: 8px; margin: 0 0 8px; }
.daymg-none { font-size: 0.84rem; color: var(--muted); padding: 6px 0; }
.daymg-evs { display: flex; flex-direction: column; gap: 6px; }
.daymg-ev { display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); border-radius: 8px; padding: 8px 12px; }
.daymg-ev b { font-size: 0.88rem; font-weight: 700; }
.daymg-ev span { font-size: 0.76rem; color: var(--muted); }
.daymg-sp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.daymg-sp:last-child { border-bottom: 0; }
.daymg-sp__l { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.daymg-sp__l b { font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daymg-sp__l em { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.daymg-deal-on { color: #c0432c !important; font-weight: 700; }
.daymg-tgl { flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s; }
.daymg-tgl:hover { border-color: var(--accent); }
.daymg-tgl.is-off { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.daymg-tgl:disabled { opacity: 0.5; cursor: not-allowed; }
.daymg-sp.is-hidden { opacity: 0.72; }
.daymg-sp.is-hidden .daymg-sp__l b { color: var(--muted); }
.daymg-hiddenbadge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 800; color: #6b7280; background: #eef1f5; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.daymg-deal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.daymg-deal input { width: 120px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; }
.daymg-link { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }

/* ── 파트너 상품 관리 (품목 목록) ── */
.vp-newphoto { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.vp-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line-2); }
.vp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
/*  ── 조회형 행 ──────────────────────────────────────────────────────────
    전에는 행마다 인풋 8개가 들어가 **높이 97px** 였고 25행이면 표가 2,914px(문서 4.3화면)
    였다. 지금은 읽기 전용이라 한 줄로 눕는다 — 목표 48px 안쪽.
    ⚠ 흰 배경 + 얇은 선으로 바꿨다. 회색 배경은 인풋이 있을 때 칸을 구분하려던 것인데
      인풋이 없어지면 목록 전체가 회색 덩어리로 보인다. */
.vp-row { display: grid; align-items: center; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 7px 12px; min-height: 46px; transition: border-color .14s, background .14s; }
.vp-row:hover { border-color: var(--line); background: var(--surface-2); }
.vp-row.is-off { opacity: .62; }
.vp-row.is-off .vp-nm { text-decoration: line-through; text-decoration-color: var(--faint); }
/*  품목 칸 — 이름 + 연결 배지 */
.vp-c--info { display: flex; align-items: center; gap: 7px; min-width: 0; }
.vp-nm { font-weight: 700; font-size: .885rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-taglink, .vp-tagstd { flex: none; font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft, #eef0fe); color: var(--accent); max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*  미연결 — 자동 견적에 안 들어간다는 뜻이라 눈에 걸려야 한다(경고는 아니다) */
.vp-taglink--none { background: var(--surface-2); color: var(--faint); }
.vp-tagstd { background: var(--surface-2); color: var(--muted); }
/*  단가 칸 */
/*  ⚠ 단가는 **줄바꿈하지 않는다.** 두 줄이 되면 행 높이가 46→61px 로 부푼다(실측).
    폭이 부족하면 품목명이 … 로 줄어드는 편이 낫다 — 숫자는 끝까지 보여야 한다. */
.vp-c--price { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
.vp-price { font-size: .93rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.vp-price em { font-style: normal; font-size: .76rem; font-weight: 700; margin-left: 1px; }
.vp-unit { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.vp-ref { font-size: .76rem; color: var(--faint); white-space: nowrap; }
/*  조건 칸 — 값이 있는 것만 **한 줄**로 합친다.
    ⚠ 칩을 여러 개 두었더니 같은 폭에서 행 높이가 갈렸다(실측 900px: 칩 1개 46px ·
      2개 63px). 한 화면에서 행이 들쭉날쭉한 것은 눈에 보인다. 한 줄로 합쳐 넘치면
      … 로 자른다 — 전체 내용은 title 로 남는다. */
.vp-c--cond { display: flex; align-items: center; min-width: 0; }
.vp-cond { font-size: .74rem; color: var(--ink-2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.vp-cond--none { color: var(--faint); }
/*  관리 칸 */
/*  ⚠ 간격 12px(gap-3)은 안 들어간다 — 관리 칸이 117px 이고 "수정 81 + 삭제 28 = 109" 라
      남는 폭이 8px 이다. 8px 이 현실적인 최대치다. */
.vp-c--act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/*  노출 칸 — 스위치 하나. 가운데 정렬(헤더 `노출` 도 .c 로 가운데다). */
.vp-c--vis { display: flex; align-items: center; justify-content: center; }
.vp-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--faint); cursor: pointer; }
.vp-x:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
/*  ── 좁은 화면 — 4칸을 2줄로 접는다(가로 스크롤을 만들지 않는다) ── */
/*  ⚠ 열이 5개가 되었으므로 좁은 화면 배치를 **명시 행**으로 다시 썼다.
      전에는 `order` 로 흘렸는데, 칸이 하나 늘면 자동배치가 어디로 갈지 읽기 어렵다.
      왼쪽에 품목/단가/조건(3행), 오른쪽 위에 스위치, 그 아래 관리 버튼. */
@media (max-width: 760px) {
  .vp-hd, .vp-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .vp-row { padding: 10px 12px; }
  .vp-c--info  { grid-column: 1; grid-row: 1; }
  .vp-c--price { grid-column: 1; grid-row: 2; }
  .vp-c--cond  { grid-column: 1; grid-row: 3; }
  .vp-c--vis   { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .vp-c--act   { grid-column: 2; grid-row: 2 / span 2; align-items: flex-end; }
  /*  표준 행에는 스위치가 없다(빈 칸) — 관리 버튼이 세 행을 다 쓰게 해 구멍을 없앤다. */
  .vp-row--std .vp-c--act { grid-row: 1 / span 3; }
}
.vp-row.is-off { opacity: 0.62; }
/*  플랫폼 표준 품목 행 — 아직 내 품목이 아니라는 걸 색으로 구분한다.
    단가를 넣고 저장하면 내 품목으로 승격되어 일반 행이 된다. */
.vp-row--std { background: transparent; border-style: dashed; }
.vp-stdcap { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 2px; padding: 9px 12px; background: var(--surface-2); border-radius: 9px; font-size: 0.79rem; font-weight: 600; color: var(--muted); line-height: 1.55; }
.vp-stdcap svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.vp-stdcap > span { flex: 1 1 auto; min-width: 0; word-break: keep-all; }
/*  ── 노출 스위치 (36×20) ─────────────────────────────────────────────────
    ⚠ 전에는 글자 칩(`노출`/`숨김`)이었고 `padding: 6px 0` 으로 **좌우 여백이 0** 이라
      실측 1069·390 두 폭 모두 **23×29px** 에 글자가 테두리에 붙어 있었다. 게다가
      `role="switch"` 인데 생김새는 칩이어서 보조기술과 눈이 다른 것을 말했다.
    ⚠ **히트박스를 44×44 로 벌린다**(`::before`). 보이는 크기 36×20 = 720px² 는 손가락으로
      못 맞춘다 — 채팅 닫기 버튼이 23×15 라서 44×44 로 키운 것과 같은 이유다.
      행 높이가 46px 이므로 44px 은 **행 안에 들어간다**(위아래로 12px 씩, 여유 1px).
      좌우로는 4px 씩 나가는데 열 간격이 12px 이라 옆 버튼과 겹치지 않는다.
    ⚠ 손잡이는 `::after` 다. `::before` 를 히트박스로 쓰므로 둘을 섞지 말 것. */
.vp-tg { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 0;
  border-radius: 999px; background: #e2e8f0; cursor: pointer;
  transition: background .16s ease; -webkit-tap-highlight-color: transparent; }
.vp-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .28);
  transition: transform .16s ease; }
.vp-tg.is-on { background: var(--accent); }
.vp-tg.is-on::after { transform: translateX(16px); }
.vp-tg::before { content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); }
.vp-tg:hover { background: #cbd5e1; }
.vp-tg.is-on:hover { background: #4338ca; }
.vp-tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dash-side { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.dash-h { font-size: 0.95rem; font-weight: 800; margin: 0 0 12px; }
.dash-up { display: flex; flex-direction: column; gap: 4px; }
.dash-ev { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 10px; cursor: pointer; transition: background 0.13s; }
.dash-ev:hover { background: var(--surface-2); }
.dash-ev.is-open { background: var(--surface-2); }
.dash-ev__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); margin-top: 6px; flex-shrink: 0; }
.dash-ev__dot.ok { background: var(--ok); }
.dash-ev__dot.amber { background: #d9992f; }
.dash-ev__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-ev b { display: block; font-size: 0.9rem; font-weight: 700; }
.dash-ev span { font-size: 0.8rem; color: var(--muted); }
.dash-ev__meta { font-size: 0.8rem !important; color: var(--ink-2) !important; font-weight: 600; }
.dash-ev__more { font-size: 0.72rem !important; color: var(--accent) !important; font-weight: 700; margin-top: 2px; }
/* 일정 카드 상단 뱃지 + 상태 */
.dash-ev__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.dash-ev__badge { font-size: 0.8rem !important; font-weight: 800 !important; color: var(--ink) !important; background: var(--surface-2); padding: 3px 9px; border-radius: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.dash-st { flex-shrink: 0; font-size: 0.72rem !important; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.dash-st--green { color: #047857; background: rgba(5, 150, 105, 0.13); }
.dash-st--blue { color: #2563eb; background: rgba(37, 99, 235, 0.12); }
.dash-st--amber { color: #b45309; background: rgba(217, 119, 6, 0.14); }
.dash-st--gray { color: var(--muted); background: var(--surface-2); }
/* 일정에서 이동 시 대상 카드 하이라이트 */
.mp-flash { animation: mpFlash 2.2s ease; }
@keyframes mpFlash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent), 0 8px 24px -8px rgba(79, 70, 229, 0.5); border-color: var(--accent); } 100% { box-shadow: none; } }
/* 일정 상세 모달 */
.ev-modal__top { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.ev-modal__time { font-size: 0.85rem; font-weight: 700; color: var(--ink-2); }
.ev-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ev-modal__grid > div { display: flex; flex-direction: column; gap: 2px; }
.ev-modal__grid > div:nth-last-child(-n+1) { grid-column: 1 / -1; }
.ev-modal__grid > div.ev-modal__full { grid-column: 1 / -1; }
.ev-modal__grid span { font-size: 0.74rem; color: var(--faint); }
.ev-modal__grid b { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.dash-ev__det { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 8px 0 4px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; }
.dash-ev__det > div { display: flex; flex-direction: column; gap: 1px; }
.dash-ev__det > div:last-of-type { grid-column: 1 / -1; }
.dash-ev__det span { font-size: 0.7rem !important; color: var(--faint) !important; }
.dash-ev__det b { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.dash-ev__det .btn { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
@media (max-width: 820px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } .dash-grid { grid-template-columns: 1fr; } }
.cw__badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e2402f; color: #fff; font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.cw__panel { width: 340px; max-width: calc(100vw - 40px); height: 460px; max-height: calc(100vh - 120px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 44px rgba(24,23,15,0.2); display: flex; flex-direction: column; overflow: hidden; }
.cw__panel[hidden] { display: none; }
/* 머리 — 제목이 본문 글씨와 비슷해 답답했다. 크게 키우고 여백을 넓힌다 */
.cw__head { display: flex; align-items: center; gap: 9px; padding: 16px 17px 15px;
  border-bottom: 1px solid var(--line); font-weight: 800; }
.cw__head b { flex: 1; font-size: 1.06rem; font-weight: 800; letter-spacing: -0.01em; }
/*  ⚠ 실측 23×15px 였다 — 모바일에서 **닫을 수가 없어** "뒤가 안 눌린다" 로 느껴진다.
    PC 36 · 모바일 44(권장 터치 타깃). */
.cw__x, .cw__back { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--muted);
  padding: 0; width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; }
.cw__x:hover, .cw__back:hover { background: var(--surface-2); color: var(--ink); }
.cw__back { font-size: 1.5rem; line-height: 1; }
.cw__body { flex: 1; overflow-y: auto; }
/* ⚠ 줄 사이 구분선은 .cw__threadrow 가 그린다(치우기 버튼까지 감싸므로).
   여기서 border-bottom 을 그리면 카드가 됐을 때 선이 두 겹으로 보인다 */
.cw__thread { display: block; width: 100%; text-align: left; background: none; border: none; padding: 12px 15px; cursor: pointer; }
.cw__thtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cw__thtop b { font-weight: 700; font-size: 0.92rem; }
.cw__un { font-size: 0.7rem; font-weight: 800; color: #fff; background: #e2402f; border-radius: 999px; padding: 1px 7px; }
.cw__last { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw__empty { padding: 30px 20px; text-align: center; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }

/* ── 자동 응답 입구 ────────────────────────────────────────────────
   자동 응답은 '대화' 가 아니라 '도구' 다. 예약·견적 대화와 같은 급으로 목록 한 칸을
   차지하면 정작 업체와의 대화가 밀린다 — 맨 위 전용 버튼으로 뺀다.
   ⚠ 창구는 사라져선 안 된다. 이 버튼은 로그인 상태면 '항상' 보여야 한다. */
/* 대화 카드와 같은 꼴(테두리 + 라운드)로 세운다. 다만 이쪽이 '도구' 임을 보이려고
   바탕만 은은한 브랜드색으로 남긴다 — 두 카드가 완전히 같으면 무엇이 창구인지 흐려진다 */
.cw__bot { display: flex; align-items: center; gap: 11px; width: calc(100% - 24px); text-align: left;
  margin: 12px 12px 8px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; background: var(--accent-soft); font: inherit; color: inherit;
  transition: background 0.15s, border-color 0.15s; }
.cw__bot:hover { background: rgba(79, 70, 229, 0.14); border-color: var(--accent); }
.cw__bot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cw__bot__ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: #fff; }
.cw__bot__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cw__bot__tx b { font-size: 0.9rem; font-weight: 800; color: var(--accent); }
.cw__bot__tx em { font-style: normal; font-size: 0.78rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw__bot__go { flex: none; font-size: 1.1rem; font-weight: 700; color: var(--accent); }
/* 아래 실제 대화 목록과 구분하는 작은 머리말 — 카드에 좌우 여백이 생겨 맞춘다 */
.cw__sep { padding: 6px 15px 7px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: var(--faint); }
.cw__msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cw__msg { max-width: 78%; align-self: flex-start; background: var(--surface-2); border-radius: 12px; padding: 8px 11px; }
.cw__msg.mine { align-self: flex-end; background: var(--accent-soft); }
.cw__msg span { display: block; font-size: 0.88rem; line-height: 1.4; }
.cw__msg time { font-size: 0.66rem; color: var(--faint); }
.cw__form { display: flex; gap: 7px; padding: 11px; border-top: 1px solid var(--line); }
.cw__form input { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 0.88rem; }
@media (max-width: 560px) { .cw { right: 14px; bottom: 14px; } .cw__bubble { width: 52px; height: 52px; } .cw__min { opacity: 1; width: 22px; height: 22px; font-size: 0.66rem; } }
/* 다중 카테고리 견적 폼 */
.q-cats { display: grid; gap: 10px; margin-bottom: 4px; }
.q-cat { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.q-cat:has(.q-cat__chk:not(:checked)) { opacity: 0.5; }
.q-cat__pick { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.92rem; cursor: pointer; margin-bottom: 8px; }
.q-cat__pick .ic, .q-cat .book__label .ic { vertical-align: -3px; color: var(--accent); }
.q-cat__pick input { width: auto; accent-color: var(--accent); }
.q-flow-note { background: var(--accent-soft); border-radius: 10px; padding: 11px 13px; font-size: 0.82rem; line-height: 1.6; color: var(--ink-2); margin: 10px 0 14px; }
.q-flow-note b { color: var(--accent); font-weight: 800; }
.rfp-guide { background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.28); border-radius: 11px; padding: 11px 13px; font-size: 0.82rem; line-height: 1.6; color: var(--ink-2); margin-top: 10px; }
.rfp-guide b { color: #2f6d8a; font-weight: 800; }

/* 3분할 인증 탭 · 마이페이지 헤더 액션 */
.auth-tabs--3 { grid-template-columns: repeat(3, 1fr); }
.auth-tabs--3 .auth-tab { padding: 11px 4px; font-size: 0.86rem; }
.mp__hactions { display: flex; gap: 8px; }

/* AI 한 줄 추천 */
.ai-box { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px 8px 16px; box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.ai-box__tag { font-size: 0.82rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.ai-box input { flex: 1; border: none; outline: none; background: none; font-size: 0.95rem; font-weight: 600; color: var(--ink); min-width: 0; padding: 9px 4px; }
.ai-box input::placeholder { color: var(--faint); font-weight: 500; }
.ai-box .btn { flex-shrink: 0; }

/* N빵 더치페이 */
.split-top { display: flex; gap: 12px; margin: 6px 0 16px; }
.split-top > div { flex: 1; background: var(--surface-2); border-radius: 12px; padding: 14px; text-align: center; }
.split-top b { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.split-top span { font-size: 0.78rem; color: var(--muted); }
.split-per { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--accent); }
.split-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.split-p { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 11px; cursor: pointer; }
.split-p input { position: absolute; opacity: 0; width: 0; height: 0; }
.split-p__box { width: 20px; height: 20px; border: 1.5px solid var(--line); border-radius: 6px; flex-shrink: 0; position: relative; }
.split-p input:checked + .split-p__box { background: var(--ok); border-color: var(--ok); }
.split-p input:checked + .split-p__box::after { content: "✓"; color: #fff; font-size: 0.72rem; font-weight: 800; position: absolute; top: -1px; left: 4px; }
.split-p > span:last-of-type { flex: 1; font-weight: 600; }
.split-p em { color: var(--muted); font-weight: 700; font-size: 0.9rem; }

/* 상세 위치 */
.sp-loc__addr { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: var(--ink-2); font-weight: 600; margin-bottom: 14px; }
.sp-loc__addr .ic { color: var(--accent); }

/* 지도 페이지 */
.mapp { max-width: 1120px; margin: 0 auto; padding: 26px 24px 80px; }
.mapp__head { margin-bottom: 18px; }
.mapp__title { font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 6px; }
.mapp__sub { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.mapp__canvas { width: 100%; height: 460px; border-radius: 16px; border: 1px solid var(--line-2); overflow: hidden; background: var(--surface-2); }
.mapp__fallback { margin-top: 10px; }
.mapf-group { margin-bottom: 22px; }
.mapf-group__t { font-size: 1.05rem; font-weight: 800; margin-bottom: 12px; }
.mapf-group__t span { color: var(--accent); font-size: 0.9rem; margin-left: 4px; }
.mapf-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mapf-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; }
.mapf-item__main { flex: 1; min-width: 0; cursor: pointer; }
.mapf-item__main b { display: block; font-weight: 700; font-size: 0.95rem; }
.mapf-item__main span { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.mapf-item__pin { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.mapf-item__pin:hover { background: var(--accent-soft); }

/* 문의 텍스트영역 */
.book__field textarea, #iqText { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 0.92rem; resize: vertical; outline: none; background: var(--surface); line-height: 1.5; }
.book__field textarea:focus, #iqText:focus { border-color: var(--ink); }

/* 공간 관리 */
.mg-h { font-size: 1.05rem; font-weight: 800; margin: 26px 0 12px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.mg-check { display: flex; align-items: center; gap: 9px; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); margin-bottom: 14px; cursor: pointer; }
.mg-check input { width: 17px; height: 17px; accent-color: var(--accent); }
/* 자동 수락 — 제목 + 설명 카드형 */
.mg-check--auto { align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s, background .15s; }
.mg-check--auto:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mg-check--auto input { margin-top: 2px; }
.mg-check__body { display: flex; flex-direction: column; gap: 3px; }
.mg-check__body b { font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.mg-check__body em { font-size: 0.8rem; font-weight: 500; font-style: normal; color: var(--muted); line-height: 1.5; }
#stAutoMsgWrap { margin-top: 4px; }
#stAutoMsg { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 0.9rem; line-height: 1.6; resize: vertical; outline: none; background: var(--surface); }
#stAutoMsg:focus { border-color: var(--accent); }
/* 공간 상세 — 청소 보증금 안내 */
.sp-deposit { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding: 12px 14px; background: var(--accent-soft); border: 1px solid rgba(79,70,229,0.18); border-radius: 11px; }
.sp-deposit b { font-size: 0.92rem; color: var(--ink); }
.sp-deposit span { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

/* ── 파트너 이용 주의사항 (항목형: 이용규칙·유의사항·환불/책임) ── */
.pnotes { display: flex; flex-direction: column; gap: 12px; }
.pnotes__title { display: block; font-size: 0.95rem; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.pnotes__grp { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line, #ece7dc); background: var(--card-2, #faf8f3); border-left-width: 3px; }
.pnotes__grp--rules { border-left-color: #4f46e5; }
.pnotes__grp--caution { border-left-color: #d97706; }
.pnotes__grp--refund { border-left-color: #0891b2; }
.pnotes__h { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.pnotes__h .ic { flex: none; }
.pnotes__grp--rules .pnotes__h .ic { color: #4f46e5; }
.pnotes__grp--caution .pnotes__h .ic { color: #d97706; }
.pnotes__grp--refund .pnotes__h .ic { color: #0891b2; }
.pnotes__ic { font-size: 0.95rem; line-height: 1; }
.hf-sublabel .ic, .book__label--sub .ic { flex: none; }
.hf-sublabel--rules .ic, .book__label--rules .ic { color: #4f46e5; }
.hf-sublabel--caution .ic, .book__label--caution .ic { color: #d97706; }
.hf-sublabel--refund .ic, .book__label--refund .ic { color: #0891b2; }
.pnotes__list { margin: 8px 0 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.pnotes__list li { position: relative; padding-left: 15px; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.pnotes__list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.4; }
.pnotes--compact .pnotes__grp { padding: 9px 11px; border-radius: 9px; }
.pnotes--compact .pnotes__list li { font-size: 0.82rem; }

/* 등록폼(호스트/업체) 주의사항 입력 */
.hf-notes { margin-top: 6px; padding-top: 16px; border-top: 1px dashed var(--line, #e5e0d4); }
.hf-sublabel, .book__label--sub { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ink-2, #55506a); margin: 4px 0 5px; }
.pnotes-edit textarea + .book__label--sub { margin-top: 12px; }

/* 체크아웃 결제 전 주의사항 요약 */
.co-notes { margin-top: 12px; border: 1px solid var(--line, #ece7dc); border-radius: 12px; overflow: hidden; }
.co-notes__h { display: flex; align-items: center; gap: 6px; padding: 10px 13px; font-size: 0.84rem; font-weight: 800; color: var(--ink); background: var(--card-2, #faf8f3); }
.co-notes__h span { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--accent); }
.co-notes__it { border-top: 1px solid var(--line, #ece7dc); }
.co-notes__it > summary { list-style: none; cursor: pointer; padding: 10px 13px; display: flex; align-items: center; gap: 8px; font-size: 0.86rem; }
.co-notes__it > summary::-webkit-details-marker { display: none; }
.co-notes__it > summary::after { content: "▾"; margin-left: auto; color: var(--faint, #b3ab99); transition: transform 0.2s; }
.co-notes__it[open] > summary::after { transform: rotate(180deg); }
.co-notes__it > summary b { font-weight: 800; color: var(--ink); }
.co-notes__it > summary span { font-size: 0.74rem; color: var(--muted); background: var(--chip, #f0ece2); padding: 1px 7px; border-radius: 20px; }
.co-notes__it .pnotes { padding: 0 13px 12px; }

/* 파트너 연락처 잠금 태그 */
.v-tag--lock { color: var(--faint) !important; background: var(--surface-2) !important; }
.blk-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.blk-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 13px; font-size: 0.84rem; font-weight: 600; }
.blk-chip button { width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 0.7rem; }
.blk-chip button:hover { background: var(--accent); color: #fff; }
/* 공간 관리 개편 */
.mg-sec .mg-h { margin: 0 0 4px; padding-top: 0; border-top: none; }
.mg-sec__head { margin-bottom: 14px; }
.mg-sec__desc { font-size: 0.83rem; color: var(--muted); }
.mg-subhead { display: flex; align-items: center; gap: 7px; font-size: 0.92rem; font-weight: 800; color: var(--ink); margin: 0 0 12px; }
.mg-subhead span { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.mg-sec .mg-h { display: inline-flex; align-items: center; gap: 8px; }
.mg-hic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.mg-hic--red { background: rgba(226, 64, 47, 0.12); color: #e2402f; }
.mg-hic .mgic { display: block; }
.book__label .mgic { color: var(--muted); vertical-align: -2px; margin-right: 2px; }
.promo-tab .mgic { opacity: 0.85; }
.promo-tab--flash.is-on .mgic { color: #d4a017; opacity: 1; }
.promo-tab--coupon.is-on .mgic { color: #64748b; opacity: 1; }
.mg-divider { height: 1px; background: var(--line-2); margin: 20px 0 16px; }
/* 예약 운영: 달력(좌) + 예약 규칙(우) 2단 */
/*  ⚠ `align-items: start` 였다. 그러면 오른쪽 칼럼이 내용 높이만큼만 서서 왼쪽
      **구분선이 중간에서 끊긴다**(실측: 달력 433px vs 규칙 283px → 선이 150px 짧다).
      `stretch` 로 늘려 선을 끝까지 잇는다 — 내용은 그대로 위에 붙는다
      (justify-content 를 건드리지 않는다). */
.mg-opsgrid { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: 22px 28px; align-items: stretch; }
.mg-opscol--rules { border-left: 1px solid var(--line-2); padding-left: 26px; }
.mg-opscol--rules .book__field { margin-bottom: 12px; }
/*  ⚠ 이 규칙은 오래 **죽어 있었다.** 아래쪽(7080행) `.mg-sec .mg-sec__foot { justify-content:
      flex-end }` 이 클래스 2개로 **같은 특정도**라 뒤에 오는 쪽이 이겼다 — 그래서 규칙
      칼럼의 저장 버튼이 인풋 아래가 아니라 **칼럼 오른쪽 끝**에 떠 있었다(실측 1440:
      칼럼 735~997 인데 버튼 888~997). 좁은 칼럼에서는 폼 바로 아래 왼쪽이 맞다.
      `!important` 대신 클래스를 하나 더해 특정도로 이긴다. */
.mg-sec .mg-opscol--rules .mg-sec__foot { justify-content: flex-start; border-top: none; padding-top: 4px; margin-top: 4px; }
@media (max-width: 820px) { .mg-opsgrid { grid-template-columns: 1fr; } .mg-opscol--rules { border-left: none; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 18px; } }
/*  ⚠ `align-items` 를 안 정하면 기본이 `stretch` 다 — 옆에 놓인 설명 글씨(.hf-hint)가
      버튼 높이(42px)만큼 늘어나고 **글자는 그 박스 위쪽에 붙는다.** 그래서 버튼 글자보다
      13px 위로 떠 보였다(실측 1440·1069·390 세 폭 모두). 박스 중심은 맞는데 글자가
      어긋나는 자리라 **박스만 재면 "정렬 0px 어긋남" 으로 나온다.**
   ⚠ `gap` 도 없어서 설명과 버튼이 **딱 붙었다**(실측: 힌트 오른쪽 1205 = 버튼 왼쪽 1205). */
.mg-sec__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 10px;
  justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
/*  설명 + 버튼 푸터 — 설명은 왼쪽 끝, 버튼은 오른쪽 끝. `justify-content` 를 건드리지 않고
    `margin-right:auto` 로 민다(버튼 하나뿐인 다른 푸터들이 왼쪽으로 쏠리면 안 된다). */
.mg-sec__foot--hint > .hf-hint { margin: 0 auto 0 0; }
/* 검색형 공간 선택 카드 */
.mgsel { position: relative; }
.mgsel__cur { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color 0.14s; }
.mgsel__cur:hover { border-color: var(--accent); }
.mgsel__thumb { width: 48px; height: 40px; border-radius: 9px; overflow: hidden; flex-shrink: 0; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.mgsel__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mgsel__ph { font-family: var(--serif); font-weight: 800; color: var(--muted); }
.mgsel__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mgsel__info b { font-size: 0.95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgsel__info em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 0.78rem; color: var(--faint); }
.mgsel__chev { color: var(--faint); font-size: 0.9rem; flex-shrink: 0; }
.mgsel__pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; max-height: 320px; overflow-y: auto; }
.mgsel__pop[hidden] { display: none; }
.mgsel__search { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.88rem; margin-bottom: 6px; outline: none; background: var(--surface); }
.mgsel__search:focus { border-color: var(--accent); }
.mgsel__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
.mgsel__item:hover { background: var(--surface-2); }
.mgsel__item.is-on { background: var(--accent-soft); }
.mgsel__empty { padding: 16px; text-align: center; color: var(--faint); font-size: 0.85rem; }
/* 차단 달력 */
.mgcal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mgcal-top b { font-family: var(--serif); font-size: 1.02rem; font-weight: 700; }
.mgcal-top button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.05rem; cursor: pointer; }
.mgcal-top button:hover { border-color: var(--accent); color: var(--accent); }
.mgcal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.mgcal-wd span { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--faint); }
.mgcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mgcal-e { aspect-ratio: 1; }
.mgcal-d { aspect-ratio: 1; border: 1px solid transparent; border-radius: 9px; background: var(--surface-2); cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; justify-content: center; transition: background 0.12s, transform 0.1s; }
.mgcal-d:hover:not(:disabled) { background: rgba(226, 64, 47, 0.12); transform: translateY(-1px); }
.mgcal-d.is-today { border-color: var(--accent); color: var(--accent); font-weight: 800; }
.mgcal-d.is-blocked { background: #e2402f; color: #fff; border-color: #e2402f; }
.mgcal-d.is-past { opacity: 0.32; cursor: default; }
.mgcal-hint { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
.mgcal-legend { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #ef4444, #e2402f); flex-shrink: 0; }
.mgcal-legend--p { background: none; border: 1.5px solid #e2402f; position: relative; }
.mgcal-legend--p::after { content: ""; position: absolute; inset: 0; margin: auto; width: 4px; height: 4px; border-radius: 50%; background: #e2402f; }
.mgcal-d.is-partial { border-color: #e2402f; color: var(--ink); position: relative; }
.mgcal-d.is-partial::after { content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #e2402f; }
.mgcal-d.is-sel { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 시간대 차단 편집기 */
.mg-blkslots:empty { display: none; }
.blk-edit { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--surface-2); }
.blk-edit__hd { display: flex; align-items: center; font-size: 0.92rem; margin-bottom: 10px; }
.blk-edit__hd b { margin-right: 4px; }
.blk-edit__x { margin-left: auto; width: 24px; height: 24px; border-radius: 6px; color: var(--muted); background: transparent; }
.blk-edit__x:hover { background: var(--line-2); }
.blk-allday { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; padding: 8px 0; }
.blk-allday input { width: 16px; height: 16px; accent-color: #e2402f; }
.blk-slots-hd { font-size: 0.78rem; font-weight: 700; color: var(--muted); margin: 10px 0 8px; }
.blk-slots-hd span { font-weight: 500; color: var(--faint); }
.blk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.blk-slot { padding: 7px 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 0.76rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all 0.12s; }
.blk-slot:hover:not(:disabled) { border-color: #e2402f; }
.blk-slot.is-off { background: #e2402f; border-color: #e2402f; color: #fff; text-decoration: line-through; }
.blk-slot:disabled { opacity: 0.4; cursor: not-allowed; }
/* 컴팩트·고급 달력 */
.mgcal { max-width: 400px; }
.mgcal-top b { color: var(--accent); }
.mgcal-wd { gap: 3px; margin-bottom: 3px; }
.mgcal-grid { gap: 3px; }
.mgcal-d { border-radius: 8px; font-size: 0.8rem; }
.mgcal-d.is-blocked { background: linear-gradient(135deg, #f0603f, #e2402f); border-color: #e2402f; box-shadow: 0 2px 6px -2px rgba(226, 64, 47, 0.5); }
/* 할인·프로모션 탭 카드 (금·은 포인트) */
.promo-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 9px; background: none; border: 0; font-family: inherit; font-size: 0.9rem; font-weight: 800; color: var(--muted); cursor: pointer; transition: background 0.14s, color 0.14s, box-shadow 0.14s; }
.promo-tab .ic { opacity: 0.8; }
/*  선택된 탭 — 흰 알약 + 그림자 + 메인 컬러.
    ⚠ 이 기본 규칙이 없었다. --flash / --coupon 변형에만 .is-on 스타일이 있어서, 그 변형을
      쓰지 않는 곳(지도 페이지의 공간/업체 탭)은 선택된 탭이 아무 표시도 없었다 —
      두 탭이 완전히 같아 보여 어느 쪽을 보고 있는지, 애초에 탭인지도 알 수 없었다.
    ⚠ 아래 --flash / --coupon 규칙과 명시도가 같으므로 반드시 그것들보다 위에 둔다. */
.promo-tab.is-on { background: var(--surface); color: var(--accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), 0 3px 10px -4px rgba(15, 23, 42, 0.18); }
.promo-tab.is-on .ic { color: var(--accent); opacity: 1; }
.promo-tab:not(.is-on):hover { color: var(--ink-2); }
.promo-tab--flash.is-on { background: linear-gradient(135deg, #fffaf0, #fdf1d6); color: #b7791f; box-shadow: 0 2px 8px -3px rgba(202, 138, 4, 0.4); }
.promo-tab--flash.is-on .ic { color: #d4a017; opacity: 1; }
.promo-tab--coupon.is-on { background: linear-gradient(135deg, #f8fafc, #eef2f6); color: #475569; box-shadow: 0 2px 8px -3px rgba(100, 116, 139, 0.35); }
.promo-hint { font-size: 0.83rem; color: var(--muted); margin: 0 0 12px; line-height: 1.55; }
.promo-body[hidden] { display: none; }
/*  반짝할인 — 할인율·시작일·종료일·적용을 한 줄로.
    라벨이 입력칸 위에 있으므로 baseline 이 아닌 flex-end 로 붙여 밑선을 맞춘다. */
/*  입력칸이 늘어나면 시작일·종료일 사이가 벌어져 한 줄이어도 읽기 나쁘다.
    전부 고정폭으로 왼쪽에 붙이고 버튼을 바로 옆에 둔다(flex-grow 없음). */
.flashrow { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.flashrow .book__field { margin-bottom: 0; flex: 0 0 auto; }
.flashrow .book__field:first-child { width: 108px; }
.flashrow .book__field:not(:first-child) { width: 168px; }
.flashrow .btn { flex: 0 0 auto; margin-left: 4px; padding: 12px 18px; white-space: nowrap; background: linear-gradient(100deg, #ca8a04, #eab308); border: 0; }
.flashrow .mg-unitfield input { padding-right: 34px; }
/*  쿠폰 발급 — 4줄 → 2줄. 1줄: 코드·유형·값·최소조건 / 2줄: 기간·생성 버튼 */
.couprow { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.couprow + .couprow { margin-top: 10px; }
.couprow .book__field { margin-bottom: 0; flex: 0 0 auto; }
.couprow .cp-code { width: 150px; }
.couprow .cp-type { width: 148px; }
.couprow .cp-num { width: 124px; }
.couprow .cp-date { width: 168px; }
.couprow .btn { flex: 0 0 auto; margin-left: 4px; padding: 12px 18px; white-space: nowrap; }
.couprow .mg-unitfield input { padding-right: 40px; }
/*  ⚠ '할인 유형' 만 혼자 위로 떠 보였다(신고). 실측 1440×950:
      다른 칸 69px · 이 칸만 **149px** 이고 top 이 **80px 위**였다.
      원인 둘 — ① 알약 두 개(77+4+87=168px)가 132px 폭에 못 들어가 **줄바꿈**됐다.
                ② .seg2__o span 의 세로 패딩 11px 이 알약을 60px 로 부풀렸다(입력칸 44px).
      .couprow 가 align-items:flex-end 라 키 큰 칸이 위로 삐져나온다.
    두 칸 그리드로 못 박고 알약 높이를 입력칸과 같은 44px 로 맞춘다.
    ⚠ 눈으로 "떠 보인다" 만 보면 원인을 못 찾는다 — top·height 를 재서 갈랐다.      */
.couprow .seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.couprow .seg2__o { width: 100%; height: 44px; justify-content: center; gap: 5px; padding: 0 6px; }
.couprow .seg2__o span { padding: 0; font-size: 0.84rem; }
.couprow .seg2__o input { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .couprow .cp-code, .couprow .cp-type, .couprow .cp-num, .couprow .cp-date { width: auto; flex: 1 1 118px; }
  .couprow .btn { flex: 1 1 100%; margin-left: 0; }
}
@media (max-width: 620px) {
  .flashrow .book__field, .flashrow .book__field:first-child, .flashrow .book__field:not(:first-child) { width: auto; flex: 1 1 140px; }
  .flashrow .btn { flex: 1 1 100%; margin-left: 0; }
}
.promo-body--coupon .mg-sec__foot .btn { background: linear-gradient(100deg, #64748b, #94a3b8); border: 0; }
/* 단위 Suffix 입력 필드 */
.mg-unitfield { position: relative; display: flex; align-items: center; }
.mg-unitfield input { width: 100%; padding-right: 44px; }
.mg-unit { position: absolute; right: 12px; font-size: 0.85rem; font-weight: 700; color: var(--faint); pointer-events: none; }
/* 예약 설정 아이콘 */
.mg-check .mg-lic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }
.mg-lic--gold { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
.book__label .ic { color: var(--muted); vertical-align: -2px; margin-right: 2px; }
/* 청소 버퍼 등 툴팁 */
.mg-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 3px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 0.62rem; font-weight: 800; cursor: help; vertical-align: middle; }
.mg-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 220px; max-width: 60vw; background: var(--ink); color: #fff; padding: 9px 11px; border-radius: 9px; font-size: 0.74rem; font-weight: 500; line-height: 1.5; text-align: left; opacity: 0; visibility: hidden; transition: opacity 0.15s; z-index: 60; box-shadow: var(--shadow-lg); }
.mg-tip:hover::after, .mg-tip:focus::after { opacity: 1; visibility: visible; }
/* 공간 견적요청 카드 강조 */
/* 호스트 공간 견적요청 카드 */
.hreq-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.hreq-info { min-width: 0; }
.hreq-info__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.req-ago { display: inline-flex; align-items: center; gap: 3px; font-size: 0.88rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.req-ago b { font-weight: 900; }
.req-ago--urgent { color: #dc2626; background: rgba(220, 38, 38, 0.1); animation: reqPulse 1.6s ease-in-out infinite; }
@keyframes reqPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.25); } 50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); } }
.req-ago--closed { color: var(--muted); background: var(--surface-2); }
.req-ago--none { color: var(--faint); background: var(--surface-2); font-weight: 700; }
.hreq-right { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.hreq-budget { display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding: 8px 14px; background: var(--accent-soft); border: 1px solid rgba(79, 70, 229, 0.16); border-radius: 12px; }
.hreq-budget__l { font-size: 0.68rem; font-weight: 800; color: var(--accent); opacity: 0.85; letter-spacing: 0.02em; }
.hreq-budget__v { font-family: var(--serif); font-size: 1.35rem; font-weight: 800; color: var(--accent); line-height: 1.15; white-space: nowrap; }
.hreq-budget__v em { font-size: 0.8rem; font-weight: 700; font-style: normal; margin-left: 1px; }
.hreq-budget__v--none { font-size: 1.05rem; color: var(--muted); }
.hreq-budget--none { background: var(--surface-2); border-color: var(--line); }
/*  요청 내용 — 카드 안에서 기본 펼침(<details open>). 파트너가 견적을 내려면 구성·수량·메모를
    바로 봐야 하므로 눌러서 확인하게 두지 않는다. 접기/펼치기는 브라우저 기본 동작. */
.rb { margin-top: 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; }
.rb__sum { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; user-select: none; }
.rb__sum::-webkit-details-marker { display: none; }
.rb__t { font-size: 0.79rem; font-weight: 800; color: var(--accent); }
.rb__hint { margin-left: auto; font-size: 0.72rem; font-weight: 600; color: var(--faint); }
/* 접혀 있을 때 무엇이 접혔는지 알려 주는 개수 배지 — 없으면 눌러 볼 이유를 모른다 */
.rb__n { padding: 1px 7px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: 0.7rem; font-weight: 700; }
.rb__chev { font-size: 0.7rem; color: var(--faint); transition: transform 0.16s; }
.rb[open] .rb__chev { transform: rotate(180deg); }
.rb__body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.rb-cat { background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 12px; }
.rb-cat__t { display: flex; align-items: center; gap: 6px; font-size: 0.81rem; font-weight: 800; color: var(--ink-2); }
.rb-cat__t svg { flex-shrink: 0; color: var(--accent); }
.rb-bd { margin-left: auto; font-size: 0.74rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; }
/* 담은 구성 표 — 품목 / 수량 / 금액 */
.rb-tbl { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.84rem; }
.rb-tbl td { padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.rb-tbl tbody tr:last-child td { border-bottom: 1px solid var(--line-2); }
.rb-tbl .rb-u { width: 84px; text-align: center; color: var(--muted); white-space: nowrap; }
.rb-tbl .rb-u em { font-style: normal; font-size: 0.74rem; color: var(--faint); }
.rb-tbl .rb-a { width: 104px; text-align: right; font-weight: 700; white-space: nowrap; }
.rb-tbl tfoot td { padding-top: 7px; border: 0; font-weight: 800; color: var(--ink); }
.rb-tbl tfoot em { font-style: normal; font-size: 0.74rem; font-weight: 600; color: var(--faint); }
.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rb-chip { font-size: 0.79rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; }
.rb-memo { margin-top: 8px; font-size: 0.86rem; line-height: 1.6; color: var(--ink-2); white-space: pre-line; word-break: break-word; }
@media (max-width: 560px) {
  .rb-tbl .rb-u { width: 64px; }
  .rb-tbl .rb-a { width: 88px; }
  .rb__hint { display: none; }
}
.mp-bk__act--right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.hreq-cta { font-weight: 800; box-shadow: 0 4px 12px -4px rgba(79, 70, 229, 0.5); }
.hreq-done { color: #7c3aed !important; background: rgba(124, 58, 237, 0.1) !important; border-color: rgba(124, 58, 237, 0.28) !important; }
.mp-seg--status { margin-right: auto; }
@media (max-width: 520px) { .hreq-top { flex-direction: column; } .hreq-right { flex-direction: row; align-self: stretch; justify-content: space-between; align-items: center; } }
/* 기간 날짜 필터 인풋 정돈 */
.mp-daterange input[type="date"] { min-height: 38px; box-sizing: border-box; color: var(--ink-2); }
.mp-daterange input[type="date"]:focus { border-color: var(--accent); }

/* ================= 반응형 ================= */
@media (max-width: 1024px) {
  .cats { grid-template-columns: repeat(5, 1fr); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .hero__title { font-size: 2.6rem; }
  .hero__gallery { max-width: 560px; }
  .flag__inner { grid-template-columns: 1fr; }
  .flag__media { min-height: 260px; }
  .sp-layout { grid-template-columns: 1fr; gap: 30px; }
  .book { position: static; }
  .sp-rel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .header__inner { padding: 0 18px; }
  .header__nav { display: none; }
  .hmenu { display: flex; }
  .header__nav.is-open { display: flex; position: absolute; top: 100%; right: 12px; left: 12px; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px; margin-top: 6px; }
  .header__nav.is-open .header__link, .header__nav.is-open .btn { width: 100%; padding: 12px; text-align: left; }
  .header__nav.is-open .header__sep { display: none; }
  .header__nav.is-open .auth-area { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; padding-top: 6px; border-top: 1px solid var(--line-2); margin-top: 4px; }
  .header__nav.is-open .auth-area .header__link { padding: 10px 12px; }
  .header__nav.is-open .auth-name { width: 100%; text-align: center; padding: 8px 12px; }
  .header__nav.is-open .bell-wrap { align-self: flex-start; }
  .header__sep { display: none; }
  .hero__inner { padding: 40px 20px 40px; gap: 26px; }
  .hero__title { font-size: 2.15rem; }
  .hero__br { display: none; }
  .hero__gallery img { height: 150px !important; }
  .hero__gcol:last-child { padding-top: 20px; }
  .hero__chip { display: none; }
  .searchbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .searchbar__div { display: none; }
  .searchbar__field, .searchbar__field--sm { flex: 1 1 auto; position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 9px 14px; }
  .searchbar__field:hover { background: var(--surface); }
  .searchbar__field::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--faint); font-size: 1rem; font-weight: 700; pointer-events: none; }
  .searchbar__field:has(input[type="date"])::after, .searchbar__field:has(input[type="number"])::after { display: none; }
  .searchbar__go { width: 100%; height: 50px; margin-top: 6px; }
  .hero__stats { gap: 30px; }
  .section { padding: 14px 18px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .sp-card__body { padding: 15px 6px 8px; }
  .sp-card__name { font-size: 1.02rem; }
  .sp-card__meta { font-size: 0.83rem; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .flag, .host { padding: 0 20px; }
  .flag__body { padding: 34px 26px; }
  .host__inner { padding: 46px 26px; }
  .host__title { font-size: 1.85rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .sp { padding: 20px 18px 70px; }
  /* 모바일 갤러리: 1장씩 스와이프 캐러셀 (잘림 없이 전체 노출) */
  .sp-gallery { display: flex; grid-template-columns: none; grid-template-rows: none; height: auto; aspect-ratio: 4 / 3; max-height: 62vh; gap: 0; border-radius: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: var(--surface-2); }
  .sp-gallery::-webkit-scrollbar { display: none; }
  .sp-gallery__main, .sp-gallery__sm { display: block; flex: 0 0 100%; width: 100%; height: 100%; grid-row: auto; scroll-snap-align: center; }
  .sp-gallery img { object-fit: contain; }
  .sp-gallery__nav { display: flex; justify-content: center; gap: 7px; margin: 12px 0 -8px; }
  .sp-gallery__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: width 0.2s, background 0.2s; }
  .sp-gallery__dot.is-on { width: 22px; background: var(--accent); }
  .sp-head__title { font-size: 1.7rem; }
  .sp-rel { grid-template-columns: 1fr; }
  /* 검색 */
  .srch { padding: 24px 18px 70px; }
  .filters__body.is-open { grid-template-columns: 1fr; gap: 0; padding: 4px 18px 16px; }
  /* 호스트 등록 */
  .hostreg { padding: 24px 16px 70px; }
  .hf { padding: 20px 16px; }
  .hostreg__layout { grid-template-columns: 1fr; gap: 24px; }
  .hf-preview { position: static; }
  .hf { padding: 22px; }
  /*  ⚠ 하단 여백 70px 은 **하단 내비(66px)만** 비켰다. 그 위에 **플로팅 챗봇 버튼**이
      또 있다 — 실측 390×844: 챗봇 y722~770 · 내비 y778~844. 그래서 페이지 마지막 요소가
      챗봇에 가려졌다(호스트 요금 저장 버튼 신고). 내비 66 + 챗봇 48 + 여유 12 = 126px.  */
  .mp { padding: 24px 18px 126px; }
  .mp-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .mp-tabs::-webkit-scrollbar { display: none; }
  .mp-tabs .mp-tab { flex-shrink: 0; touch-action: pan-x; }
  .auth-area { gap: 10px; }
  .bell-dd { width: calc(100vw - 32px); right: -8px; }
  .mp-req { flex-direction: column; align-items: stretch; }
  .disc-grid { grid-template-columns: 1fr; }
  .settle-kpis { grid-template-columns: repeat(2, 1fr); }
  .mapf-list { grid-template-columns: 1fr; }
  .mapp__canvas { height: 340px; }
  .ai-box { flex-wrap: wrap; padding: 12px; }
  .ai-box__tag { order: 1; }
  .ai-box input { order: 2; flex: 1 1 100%; padding: 6px 4px; }
  .ai-box .btn { order: 3; width: 100%; }
  .split-top b { font-size: 1.2rem; }
  .how-steps { grid-template-columns: 1fr; }
  .quote-row { flex-direction: column; align-items: stretch; }
  .quote-row__r { justify-content: flex-end; }
}
@media (max-width: 460px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .sp-card__body { min-height: 112px; padding: 10px 2px 2px; }
  .sp-card__name { font-size: 0.95rem; }
  .sp-card__meta { font-size: 0.76rem; gap: 6px; }
  .sp-card__price { font-size: 1rem; }
  .sp-tags--row { min-height: 20px; }
  .srch { padding: 20px 14px 70px; }
  .hero__title { font-size: 1.95rem; }
  .sp-amen { grid-template-columns: 1fr; }
  .srch-map__canvas { height: 460px; }
}
/* 모바일 공간 목록: 한 줄에 1개 (라인 460 .results .grid auto-fill 재정의) */
@media (max-width: 640px) {
  .results .grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ===== Phase 4/5 대개편: 카드·배지 표준화 + 모바일 ===== */
/* 카드 그림자·호버 일관화 */
.mp-bk, .co-order, .co-pay, .dash-cal, .dash-side, .rfp-compare { box-shadow: var(--shadow-sm); }
.v-card, .svc-card { box-shadow: var(--shadow-sm); }

/* 모바일 하단 내비게이션 */
.mnav { display: none; }
@media (max-width: 760px) {
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 480; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--line); padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px -14px rgba(15,23,42,0.18); }
  .mnav__i { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.66rem; font-weight: 700; color: var(--faint); padding: 4px 0; transition: color 0.15s; }
  .mnav__i .ic { width: 23px; height: 23px; stroke-width: 1.7; }
  .mnav__i.is-active { color: var(--accent); }
  .mnav__i.is-active::before { content: ""; position: absolute; top: -7px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  body { padding-bottom: 64px; }
  .cw { bottom: 78px; right: 14px; }
  .footer { margin-bottom: 0; }
}

/* 모바일: 모달을 하단 시트로 */
@media (max-width: 560px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal__card { max-width: 100%; width: 100%; border-radius: 4px 4px 0 0; max-height: 90vh; padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)); animation: sheetup 0.22s ease; }
  @keyframes sheetup { from { transform: translateY(30px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
  /*  ⚠ 패널이 화면을 거의 다 덮는다(실측 350×557 / 390×844). 위쪽에 여백을 남겨
      그 자리를 탭하면 닫히게 한다(js/auth.js 의 바깥 탭 처리). */
  .cw__panel { width: calc(100vw - 24px); height: 62vh; max-height: calc(100vh - 210px); }
  .cw__x, .cw__back { width: 44px; height: 44px; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 이용 안내 (help.html) ===== */
/* 아래 여백을 90 → 130px 로 한 단계 넓혔다. 푸터는 선 바로 뒤에 링크가 붙어 있어
   (padding-top 0) 여백이 좁으면 카드와 푸터가 맞붙은 것처럼 답답하게 읽혔다. */
.help { max-width: 940px; margin: 0 auto; padding: 34px 24px 130px; }
.help__head { margin-bottom: 22px; }
.help__title { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.025em; margin: 6px 0 8px; }
.help__sub { color: var(--muted); font-size: 0.96rem; line-height: 1.6; word-break: keep-all; max-width: 44em; }
.help-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.help-tabs::-webkit-scrollbar { display: none; }
/* 활성 탭은 굵기 + 색 + 밑선 세 가지로 구분한다. 색만 바꾸면 지금 어느 탭인지
   한눈에 안 잡혔다(밑선이 좌우 10px 안쪽으로 들어가 있어 더 약했다).
   ⚠ 굵기 700→800 으로 탭 폭이 0.2px 만 변한다(실측) — 줄이 밀리지 않아 보정하지 않는다. */
.help-tab { position: relative; padding: 13px 18px; font-size: 0.96rem; font-weight: 600; color: var(--muted); white-space: nowrap; flex-shrink: 0; touch-action: pan-x; transition: color 0.15s ease; }
.help-tab:hover { color: var(--ink-2); }
.help-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 8px; }
.help-tab.is-active { color: var(--accent); font-weight: 800; }
.help-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; }
.help-sec { animation: rqnDown 0.24s cubic-bezier(0.2,0.8,0.2,1); }
.help-intro { margin-bottom: 26px; }
.help-h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.help-h3 { font-size: 1.08rem; font-weight: 800; margin: 26px 0 13px; }
.help-lead { font-size: 0.98rem; color: var(--ink-2); line-height: 1.75; word-break: keep-all; }
.help-lead b { color: var(--accent); }
.help-p { font-size: 0.94rem; color: var(--ink-2); line-height: 1.7; word-break: keep-all; }
.help-p b { color: var(--ink); }
/* 이용 경로 카드 */
.hway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* 카드 전체가 링크다. 호버에 살짝 떠오르는 움직임을 줘서 '누를 수 있다' 를 알린다. */
.hway { display: flex; flex-direction: column; gap: 7px; padding: 20px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); text-align: left; color: inherit; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.hway:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(79, 70, 229, 0.35); }
.hway:active { transform: translateY(-1px); }
.hway:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hway__ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: 2px; transition: background 0.18s ease; }
.hway:hover .hway__ic { background: rgba(79, 70, 229, 0.16); }
.hway__t { font-size: 1.02rem; font-weight: 800; }
.hway__d { font-size: 0.88rem; color: var(--muted); line-height: 1.6; word-break: keep-all; flex: 1; }
.hway__cta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.88rem; font-weight: 800; color: var(--accent); margin-top: 2px; }
/* 화살표만 살짝 나아간다 — 카드가 이미 떠오르므로 여기서 더 크게 움직이면 산만해진다 */
.hway__arw { font-style: normal; transition: transform 0.18s ease; }
.hway:hover .hway__arw { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .hway, .hway__ic, .hway__arw { transition: none; }
  .hway:hover { transform: none; }
  .hway:hover .hway__arw { transform: none; }
}
/* 3단계 */
/* '이렇게 진행돼요' — 그냥 나열된 상자 3개였다. 1→2→3 이 흐름이라는 게 안 보였다.
   번호 원을 잇는 선과 화살촉을 사이에 두어 순서를 눈으로 따라가게 한다.
   ⚠ 화살표를 글자(➔)로 넣지 않는다. 글꼴에 따라 모양·크기가 달라지고 세로 정렬이
     어긋난다. 선과 화살촉은 CSS 로 그린다.
   ⚠ 번호 원의 세로 중심은 카드 위에서 33px 다(실측) — 이음선을 그 높이에 맞춘다.
     카드 여백이나 원 크기를 바꾸면 --hstep-mid 도 함께 고쳐야 한다. */
.hstep-grid { --hstep-mid: 33px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hstep { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 18px 16px; background: var(--surface-2); border-radius: 14px; }
/* 이음선 — 카드 사이 빈 곳(gap 26px)을 가로지른다 */
.hstep:not(:last-child)::before {
  content: ""; position: absolute; top: var(--hstep-mid); left: 100%; width: 26px; height: 2px;
  background: linear-gradient(to right, rgba(79, 70, 229, 0.45), rgba(79, 70, 229, 0.18));
}
/* 화살촉 — 선 끝에 얹는다 */
.hstep:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--hstep-mid) - 3px); left: calc(100% + 17px);
  width: 8px; height: 8px; border-right: 2px solid rgba(79, 70, 229, 0.5); border-top: 2px solid rgba(79, 70, 229, 0.5);
  transform: rotate(45deg);
}
.hstep__n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 0.95rem; margin-bottom: 4px; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); }
.hstep b { font-size: 0.98rem; font-weight: 800; }
.hstep__d { font-size: 0.86rem; color: var(--muted); line-height: 1.55; word-break: keep-all; }
/* 안내 노트 */
/* ── 호스트·파트너 탭 맨 아래 '지금 시작하기' ──────────────────────────
   안내 박스(.help-note)로는 '읽을 것' 처럼 보였다. 여기서 등록이 시작되는 칸이므로
   옅은 브랜드 배경 카드로 세우고 버튼에 무게를 준다.
   ⚠ 사업자 등록이 첫 걸음이다. 두 버튼을 같은 무게로 두면 무엇부터인지 안 보인다 —
     하나만 큰 솔리드로 두고 공간 등록은 그 다음 단계로 낮춘다. */
.hstart { margin-top: 30px; padding: 24px; border-radius: 18px;
  background: rgba(79, 70, 229, 0.05); border: 1px solid rgba(79, 70, 229, 0.16); }
.hstart__hd { display: flex; align-items: center; gap: 10px; }
.hstart__ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(79, 70, 229, 0.6); }
.hstart__hd b { font-family: var(--serif); font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; }
.hstart__p { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--ink-2); word-break: keep-all; }
.hstart__p b { color: var(--accent); font-weight: 800; }
.hstart__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hstart__b1 { box-shadow: 0 6px 18px -6px rgba(79, 70, 229, 0.6); }
.hstart__b1 svg { flex-shrink: 0; }
/* 공간 등록 — 두 번째 무게. 흰 바탕을 깔아 옅은 배경 위에서도 버튼으로 읽히게 한다 */
.hstart__b2 { background: var(--surface); border-color: rgba(79, 70, 229, 0.35); color: var(--accent); }
.hstart__b2:hover { border-color: var(--accent); background: var(--accent-soft); }
.hstart__note { margin: 14px 0 0; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 560px) {
  .hstart { padding: 20px 17px; }
  /* 버튼을 나란히 두면 둘 다 좁아져 글자가 접힌다 */
  .hstart__cta { flex-direction: column; }
  .hstart__cta .btn { width: 100%; }
}

.help-note { margin-top: 26px; padding: 18px 20px; border: 1px solid rgba(79,70,229,0.2); background: rgba(79,70,229,0.06); border-radius: 14px; }
.help-note > b { display: inline-flex; align-items: center; gap: 6px; font-size: 0.98rem; }
.help-note p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.7; margin: 8px 0 0; word-break: keep-all; }
.help-note p b { color: var(--accent); }
.help-note__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; }
/* 가입 버튼 — 이 칸에서 가장 무거운 것이어야 한다. 그림자로 한 단 띄운다. */
.hnote-cta { box-shadow: 0 6px 18px -6px rgba(79, 70, 229, 0.55); }
.hnote-cta svg { flex-shrink: 0; }
.hnote-or { font-size: 0.85rem; color: var(--ink-2); }
.hnote-or a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  /* 모바일에서는 가입 버튼을 한 줄 꽉 채운다 — 옆에 링크를 붙이면 둘 다 작아진다 */
  .help-note__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hnote-cta { width: 100%; }
  .hnote-or { text-align: center; }
}
/* 예약 흐름 (번호 스텝 리스트) */
/* ⚠ 번호 원은 제목과 '같은 flex 줄' 에 둔다(.hflow__hd). li 에 align-items:center 를
     걸면 원이 카드 전체(제목+본문) 중앙으로 내려가 본문이 2줄인 단계에서 제목과 더
     멀어진다. 같은 줄에 두면 보정값 없이 정확히 맞고, 제목이 두 줄로 접혀도 맞는다.
     (예전 구조에서 원 중심이 제목 중심보다 1.5px 낮았다 — 실측) */
.hflow { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 8px; }
.hflow li { display: flex; flex-direction: column; padding: 15px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.hflow__hd { display: flex; align-items: center; gap: 11px; }
.hflow__n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 0.85rem; }
.hflow b { font-size: 0.96rem; font-weight: 800; }
/* 본문은 제목 글자 시작선에 맞춰 들여쓴다(원 26 + 간격 11) */
.hflow p { font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin: 5px 0 0 37px; word-break: keep-all; }
.hflow p b { color: var(--ink-2); }
@media (max-width: 480px) {
  /* 좁은 화면에서 37px 들여쓰기는 글줄을 너무 좁힌다 */
  .hflow p { margin-left: 0; }
}
/* 안내 카드 그리드 */
/* ── 예약 안내: 방법(A·B·C) 구역과 정책 구역을 갈라 놓는다 ──────────────────
   예전에는 C 설명 바로 아래에 정책 카드 6장이 붙어 "이것도 C 이야기인가" 로 읽혔다. */
.hways { padding: 4px 0 2px; }
.hways__hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.hways__kick { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; }
.hways__hd b { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }

/* 정책 구역 — 구분선으로 위와 끊고, 제목을 세워 독립된 절로 보이게 한다.
   ⚠ 위 여백(38px)이 이 분리의 핵심이다. 줄이면 다시 섞여 보인다. */
.hpol { margin-top: 38px; padding-top: 26px; border-top: 1.5px solid var(--line); }
.hpol__h { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.hpol__h svg { color: var(--accent); flex-shrink: 0; }
.hpol__sub { font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin: 8px 0 0; word-break: keep-all; }

/* ⚠ 카드 리스트와 푸터 사이 여백은 .help 의 padding-bottom + 여기 margin-bottom 이다.
     푸터는 선 바로 뒤에 링크가 붙어 있어 여백이 좁으면 답답하게 읽힌다. */
.help-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 18px; }
.help-card { padding: 16px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.help-card > b { display: inline-flex; align-items: center; gap: 7px; font-size: 0.95rem; font-weight: 800; }
.help-card > b .ic { color: var(--accent); }
/* 본문 대비를 올렸다 — 흰 배경에서 --muted(#64748b)는 4.76:1 로 겨우 통과였다.
   #475569 는 7.58:1 이고, 제목(--ink 17.85:1)과의 층은 그대로 남는다.
   ⚠ 이 값은 계산해서 골랐다. 눈대중으로 회색을 고르면 대비가 4.5:1 아래로 내려간다. */
.help-card { --hc-body: #475569; }
.help-card p { font-size: 0.87rem; color: var(--hc-body); line-height: 1.65; margin: 7px 0 0; word-break: keep-all; }
/* 굵은 글씨가 --ink-2(연한 회색)여서 굵기 차이가 거의 안 보였다 — 본문색으로 올린다 */
.help-card p b { color: var(--ink); font-weight: 700; }
/* ⚠ 여기 --faint(2.56:1)를 썼다가 WCAG 본문 기준(4.5:1)에 미달했다. --muted 로 올린다. */
.help-card__sub { display: inline-block; margin-top: 6px; font-size: 0.82rem; color: var(--muted); }
.help-card__sub b { color: var(--ink-2); font-weight: 700; }
.help-card__link { color: var(--accent); font-weight: 700; }
.help-card__link:hover { text-decoration: underline; }

/* ── 호스트·파트너 탭의 '꼭 알아두세요' 6장 ────────────────────────────
   ⚠ --host 로 이 탭만 좁힌다. 같은 .help-card 를 예약 안내도 쓰는데 그쪽은
     이미 재서 맞춘 값이라 함께 건드리지 않는다(구역 분리 검사 28건이 그 값을 본다). */
.help-cards--host { gap: 10px; }
.help-cards--host .help-card { padding: 13px 15px; }
.help-cards--host .help-card p { margin-top: 6px; line-height: 1.6; }
/* 소제목 아이콘 — 16 → 18px + 옅은 칩. 제목보다 아이콘이 먼저 눈에 들어와야
   여섯 장을 훑을 때 무엇에 대한 칸인지 빨리 잡힌다. */
.help-card__ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.help-cards--host .help-card > b { align-items: center; gap: 9px; font-size: 0.98rem; letter-spacing: -0.01em; }

/* 핵심 규정·혜택 키워드 — 돈이 걸린 숫자만 골라 칩으로 띈다.
   ⚠ 남발하면 아무것도 강조되지 않는다. 카드당 하나가 원칙이다. */
.hl { display: inline; padding: 1px 6px; margin: 0 1px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); font-weight: 800;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* 환불 단계표 — 줄글로 이어 쓰면 어느 숫자가 어느 경우인지 안 잡혔다 */
.hrule { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hrule li { display: flex; gap: 9px; align-items: baseline; font-size: 0.84rem; line-height: 1.6; }
.hrule__k { flex: none; min-width: 68px; font-weight: 800; color: var(--ink); }
/* 카드 본문과 같은 대비를 쓴다 — 환불 단계는 돈이 걸린 숫자라 더 흐려선 안 된다 */
.hrule__v { flex: 1 1 auto; min-width: 0; color: var(--hc-body, #475569); word-break: keep-all; }
.hrule__v b { color: var(--ink-2); font-weight: 700; }
/* FAQ */
/* ── 대상 탭 (게스트 / 호스트·파트너) ──────────────────────────────────
   문항 37개가 한 목록에 2,661px 로 나열돼 있었다(실측). 먼저 누구를 위한
   질문인지로 갈라 23 / 14 로 줄인다. */
.faq-aud { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.faq-aud__b { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 12px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted);
  font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.faq-aud__b:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--ink-2); }
.faq-aud__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-aud__b.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.faq-aud__e { font-size: 1.05rem; line-height: 1; }
.faq-aud__b b { font-weight: 800; }
.faq-aud__n { flex: none; font-size: 0.76rem; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 7px; }
.faq-aud__b.is-on .faq-aud__n { color: #fff; background: var(--accent); }

/* ── 검색창 ─────────────────────────────────────────────────────── */
.faq-srch { position: relative; margin-bottom: 12px; }
.faq-srch__ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: inline-flex; }
.faq-srch__i { width: 100%; padding: 13px 40px 13px 42px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 0.92rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.faq-srch__i::placeholder { color: var(--muted); }
.faq-srch__i:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); }
/* 브라우저 기본 지우기 버튼은 우리 버튼과 겹친다 */
.faq-srch__i::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-srch__x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 0.8rem; cursor: pointer; }
.faq-srch__x:hover { background: var(--line-2); color: var(--ink); }
.faq-srch__x[hidden] { display: none; }

.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.faq-chips[hidden] { display: none; }
/* 검색 중에는 칩이 결과를 줄이지 않는다 — 흐리게 해서 그 사실을 알린다 */
.faq-chips.is-muted { opacity: 0.45; }
.faq-chip { padding: 8px 15px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line); transition: all 0.15s; }
.faq-chip:hover { border-color: var(--accent); color: var(--accent); }
.faq-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.faq-count { font-size: 0.85rem; color: var(--muted); margin: -4px 0 12px; }
.faq-count b { color: var(--accent); font-weight: 800; }
.faq-count[hidden] { display: none; }
.faq-none { text-align: center; padding: 34px 20px; color: var(--muted); font-size: 0.9rem; line-height: 1.7;
  background: var(--surface-2); border-radius: 14px; }
.faq-none[hidden] { display: none; }
.faq-none b { color: var(--ink-2); font-weight: 700; }
.faq-none__go { margin-top: 10px; display: inline-block; border: 1px solid var(--accent); border-radius: 999px;
  padding: 6px 14px; background: none; color: var(--accent); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; }
.faq-none__go:hover { background: var(--accent-soft); }

/* ── 아코디언 ────────────────────────────────────────────────────
   ⚠ <details> 를 쓰지 않는다. 열고 닫는 높이를 애니메이션할 수 없다(UA 가 내용을
     display:none 으로 감춘다). 표준 disclosure 패턴으로 바꿔 높이를 직접 다룬다. */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color 0.15s; }
.faq-item[hidden] { display: none; }
.faq-item.is-open { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.faq-sum { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 17px; border: 0;
  background: none; text-align: left; cursor: pointer; font: inherit; font-weight: 700; color: inherit; }
.faq-sum:hover { background: var(--surface-2); }
.faq-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq-q { flex: 1; min-width: 0; font-size: 0.94rem; color: var(--ink); word-break: keep-all; }
/* Q. 는 마크업이 아니라 여기서 붙인다 — 검색 대상 문자열에 섞이지 않게 */
.faq-q::before { content: "Q. "; color: var(--accent); font-weight: 800; }
.faq-cat { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; }
/* 화살촉 — 열리면 뒤집힌다 */
.faq-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.22s ease, border-color 0.15s; }
.faq-item.is-open .faq-chev { transform: rotate(225deg) translateY(-2px); border-color: var(--accent); }
.faq-item.is-open .faq-sum { border-bottom: 1px solid var(--line-2); }
.faq-a { height: 0; overflow: hidden; transition: height 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.faq-a[hidden] { display: none; }
.faq-a__in { padding: 14px 17px; font-size: 0.9rem; color: var(--ink-2); line-height: 1.75; word-break: keep-all; }
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-chev { transition: none; }
}
@media (max-width: 560px) {
  /* 좁은 화면에서는 대상 탭을 위아래로 — 나란히 두면 글자가 두 줄로 접힌다 */
  .faq-aud { grid-template-columns: 1fr; }
  .faq-aud__b { justify-content: flex-start; }
  .faq-aud__n { margin-left: auto; }
}
/* 1:1 문의 */
.hinq { margin-top: 28px; border: 1px solid var(--accent); border-radius: 16px; background: linear-gradient(180deg, var(--accent-soft), var(--surface) 45%); padding: 22px 20px; }
.hinq__head b { display: inline-flex; align-items: center; gap: 7px; font-size: 1.05rem; font-weight: 800; }
.hinq__head p { font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin: 7px 0 16px; word-break: keep-all; }
.hinq__f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hinq__f > span { font-size: 0.82rem; font-weight: 700; color: var(--ink-2); }
.hinq__f > span em { color: var(--faint); font-weight: 500; font-style: normal; }
.hinq__f input, .hinq__f select, .hinq__f textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--ink); background: var(--surface); outline: none; }
.hinq__f textarea { font-weight: 500; line-height: 1.6; resize: vertical; }
.hinq__f input:focus, .hinq__f select:focus, .hinq__f textarea:focus { border-color: var(--accent); }
.hinq__err { color: #e2402f; font-size: 0.84rem; font-weight: 600; margin: 0 0 10px; }
.hinq__hint { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 11px; }
.hinq__hint a { color: var(--accent); font-weight: 700; }
@media (max-width: 640px) {
  .help { padding: 24px 16px 112px; }
  /* 좁은 화면에서는 단계 이름을 위로 올린다 — 옆에 붙이면 값이 두 글자씩 끊긴다 */
  .hrule li { flex-direction: column; gap: 2px; }
  .hrule__k { min-width: 0; }
  /* 세로로 길어지는 화면이라 구역 사이를 조금 더 벌린다 */
  .hpol { margin-top: 32px; padding-top: 22px; }
  .hways__hd { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hway-grid, .help-cards { grid-template-columns: 1fr; }
  /* 1열이 되면 흐름도 세로다 — 이음선과 화살촉을 아래로 돌린다.
     ⚠ 가로용 규칙을 그대로 두면 선이 카드 오른쪽 화면 밖으로 뻗는다. */
  .hstep-grid { grid-template-columns: 1fr; gap: 22px; }
  .hstep:not(:last-child)::before {
    top: 100%; left: 34px; width: 2px; height: 22px;
    background: linear-gradient(to bottom, rgba(79, 70, 229, 0.45), rgba(79, 70, 229, 0.18));
  }
  .hstep:not(:last-child)::after {
    top: calc(100% + 13px); left: 30px; width: 8px; height: 8px;
    border-right: 2px solid rgba(79, 70, 229, 0.5); border-top: 2px solid rgba(79, 70, 229, 0.5);
    transform: rotate(135deg);
  }
  .faq-item summary { gap: 8px; }
  .faq-q { flex: 1; }
}

/* ===== 최근 본/찜 플로팅 퀵메뉴 ===== */
.qm { position: fixed; left: 20px; bottom: 20px; z-index: 490; }
.qm__fab { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--accent); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(24,23,15,0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; touch-action: pan-y; }
.qm__fab:hover { transform: scale(1.06); }
/* 스와이프 숨김 상태 — FAB는 왼쪽으로 사라지고, 얇은 손잡이만 남음 */
.qm__handle { display: none; position: absolute; left: 0; bottom: 4px; width: 16px; height: 44px; border: 1px solid var(--line); border-left: 0; border-radius: 0 12px 12px 0; background: var(--surface); color: var(--accent); align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(24,23,15,0.15); padding: 0; overflow: hidden; }
.qm__handle svg { width: 13px; height: 13px; opacity: 0.85; }
.qm--hidden .qm__fab { transform: translateX(-140%); opacity: 0; pointer-events: none; }
.qm--hidden .qm__count { opacity: 0; }
.qm--hidden .qm__handle { display: flex; }
/* 숨기기(×) 버튼 — 채팅 위젯과 동일 UX */
.qm__min { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.7rem; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer; }
.qm__fab:hover .qm__min { display: flex; }
@media (max-width: 1024px) { .qm__min { display: flex; } }
.qm--hidden .qm__min { display: none; }
.qm__count { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e2402f; color: #fff; font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.qm__panel { position: absolute; left: 0; bottom: 62px; width: 320px; max-width: calc(100vw - 40px); max-height: 62vh; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 44px rgba(24,23,15,0.2); display: flex; flex-direction: column; overflow: hidden; animation: qmpop 0.2s ease; }
@keyframes qmpop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qm__panel[hidden] { display: none; }
.qm__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.qm__tabs { display: flex; gap: 4px; }
.qm__tab { padding: 7px 12px; border-radius: 9px; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.qm__tab b { color: var(--faint); margin-left: 3px; }
.qm__tab.is-on { background: var(--accent-soft); color: var(--accent); }
.qm__tab.is-on b { color: var(--accent); }
.qm__x { width: 28px; height: 28px; border-radius: 8px; color: var(--muted); font-size: 0.9rem; }
.qm__x:hover { background: var(--surface-2); }
.qm__body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.qm__empty { padding: 34px 20px; text-align: center; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.qm-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; cursor: pointer; transition: background 0.13s; }
.qm-card:hover { background: var(--surface-2); }
.qm-card__thumb { flex-shrink: 0; width: 54px; height: 44px; border-radius: 9px; overflow: hidden; }
.qm-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.qm-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qm-card__body b { font-size: 0.88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-card__meta { font-size: 0.76rem; color: var(--muted); }
.qm-card__heart { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--line); }
.qm-card__heart svg { width: 18px; height: 18px; }
.qm-card__heart.is-on { color: #e2402f; }
@media (max-width: 760px) { .qm { bottom: 78px; left: 14px; } }

/* ===== 공간 비교견적 ===== */
.sp-card__thumb { position: relative; }
.sp-cmp { position: absolute; right: 8px; bottom: 8px; z-index: 2; font-size: 0.74rem; font-weight: 800; color: var(--ink); background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); border: 1px solid rgba(0,0,0,0.06); padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 8px -3px rgba(0,0,0,0.25); transition: all 0.14s; }
.sp-cmp:hover { background: #fff; }
.sp-cmp.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 하단 비교 바 */
.cmpbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 495; display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 20px; background: var(--ink); color: #fff; border-radius: 999px; box-shadow: 0 12px 34px -10px rgba(0,0,0,0.5); animation: qmpop 0.2s ease; }
.cmpbar__n { font-size: 0.9rem; font-weight: 800; white-space: nowrap; }
.cmpbar__b { display: flex; gap: 8px; }
.cmpbar .btn--soft { background: rgba(255,255,255,0.16); color: #fff; border: none; }
.cmpbar .btn--soft:hover { background: rgba(255,255,255,0.28); }
@media (max-width: 760px) { .cmpbar { bottom: 84px; width: calc(100vw - 28px); justify-content: space-between; } }
/* 비교 모달 */
.cmp-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cmp-ctl { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 96px; }
.cmp-ctl > span { font-size: 0.76rem; font-weight: 700; color: var(--ink-2); }
.cmp-ctl input, .cmp-ctl select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink); background: var(--surface); outline: none; }
.cmp-ctl input:focus, .cmp-ctl select:focus { border-color: var(--accent); }
/*  모바일에서 날짜 칸만 넘치던 것 — 세 칸을 균등 분배(flex:1)하면 111px 씩인데
    네이티브 날짜 컨트롤이 요구하는 폭은 그보다 크다(실측: 크롬 145px · iOS 133px).
    ⚠ 크롬은 넘치는 만큼을 **안에서 조용히 감추고** iOS 는 **밖으로 그린다** —
      그래서 신고 스크린샷에서는 날짜 상자가 '시작' 칸 위에 22px 겹쳐 보였고
      크롬 에뮬레이션에서는 넘침 0 으로 통과했다(칸 폭이 아니라 min/max-width 를
      걷어낸 min-content 를 재야 잡힌다).
    ⚠ min-width:0 · max-width:100% 로는 안 잡힌다(그렇게 두었는데도 넘쳤다).
      appearance:none 도 쓰지 말 것 — 넘침은 막히지만 날짜 선택기가 사라진다.
    그래서 날짜 열에는 **필요한 폭을 못 박고** 남은 폭을 두 select 가 나눈다
    (390px: 134 / 102 / 102 — 시작·이용 select 의 최소폭 84px 보다 넉넉하다).  */
@media (max-width: 760px) {
  .cmp-controls { display: grid; grid-template-columns: 134px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .cmp-ctl { min-width: 0; }
  .cmp-ctl input, .cmp-ctl select { padding: 9px 9px; }
  /*  아주 좁은 화면(320px)에서는 셋을 한 줄에 두면 select 가 84px 아래로 눌린다 —
      날짜를 윗줄 통째로 쓰고 시작·이용을 아랫줄에 나란히 둔다.                 */
  @media (max-width: 359px) {
    .cmp-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cmp-ctl:first-child { grid-column: 1 / -1; }
  }
}
.cmp-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.cmp-row:last-child { border-bottom: none; }
.cmp-row--h { background: var(--surface-2); font-size: 0.76rem; font-weight: 800; color: var(--muted); padding: 9px 14px; }
.cmp-row.is-min { background: rgba(79,70,229,0.05); }
.cmp-nm { display: flex; flex-direction: column; gap: 2px; font-size: 0.92rem; font-weight: 700; min-width: 0; }
.cmp-nm small { font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.cmp-best { align-self: flex-start; font-size: 0.66rem; font-weight: 800; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 999px; margin-bottom: 2px; }
.cmp-unit { font-size: 0.85rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; text-align: right; }
.cmp-unit i { display: block; font-style: normal; font-size: 0.68rem; font-weight: 800; color: #e2402f; }
.cmp-unit i svg.ic { vertical-align: -0.12em; }
.cmp-tot { white-space: nowrap; text-align: right; }
.cmp-tot b { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
.cmp-row.is-min .cmp-tot b { color: var(--accent); }
.cmp-act { white-space: nowrap; }
.cmp-x { font-size: 0.78rem; color: var(--faint); font-style: normal; }
.cmp-note { font-size: 0.76rem; color: var(--faint); line-height: 1.55; margin-top: 12px; }
/* 비교 요약 */
.cmp-summary { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; background: var(--accent-soft); border: 1px solid rgba(79,70,229,0.18); border-radius: 12px; }
.cmp-summary__ic { font-size: 1.1rem; line-height: 1.3; }
.cmp-summary p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; margin: 0; }
.cmp-summary p b { color: var(--accent); font-weight: 800; }
.cmp-summary__sub { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
/* 준비 물품 해시태그 */
.cmp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cmp-tags em { font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 6px; }
@media (max-width: 560px) {
  .cmp-row { grid-template-columns: 1fr auto; grid-auto-flow: row; }
  .cmp-row--h { display: none; }
  .cmp-unit { grid-column: 1; text-align: left; }
  .cmp-tot { grid-column: 2; }
  .cmp-act { grid-column: 1 / -1; }
  .cmp-act .btn { width: 100%; }
}

/* ===== 개인정보 제3자 제공 동의 ===== */
.co-consent { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); font-size: 0.83rem; line-height: 1.55; color: var(--ink-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.co-consent input { width: 18px; height: 18px; min-width: 18px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.co-consent b { color: var(--accent); font-weight: 800; }
.co-consent a { color: var(--accent); font-weight: 700; text-decoration: underline; }
.co-consent--err { border-color: #e2402f; background: rgba(226,64,47,0.06); animation: mpFlash 0.4s ease; }
/* 결제 동의 그룹 (전체 동의 + 개별 필수) */
.co-agree { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.co-agree__all { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 0.9rem; font-weight: 700; color: var(--ink); cursor: pointer; background: var(--surface); }
.co-agree__it { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--line-2); font-size: 0.82rem; line-height: 1.55; color: var(--ink-2); cursor: pointer; word-break: keep-all; }
.co-agree__all span, .co-agree__it span { word-break: keep-all; }
.co-agree input { width: 18px; height: 18px; min-width: 18px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.co-agree__all input { margin-top: 0; }
.co-agree b { color: var(--accent); font-weight: 800; }
.co-agree__all b { color: var(--ink); }
.co-agree a { color: var(--accent); font-weight: 700; text-decoration: underline; }
.co-broker { display: flex; align-items: flex-start; gap: 6px; padding: 10px 14px; margin: 0; border-top: 1px solid var(--line-2); background: var(--surface); font-size: 0.76rem; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.co-broker svg { flex-shrink: 0; margin-top: 1px; color: var(--faint); }
/* 관리자 접근 로그 */
.ad-audit { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 10px; }
.ad-audit__row { display: grid; grid-template-columns: 150px 1fr 120px; gap: 10px; padding: 9px 14px; font-size: 0.82rem; border-bottom: 1px solid var(--line-2); align-items: center; }
.ad-audit__row:last-child { border-bottom: none; }
.ad-audit__row--h { background: var(--surface-2); font-weight: 800; color: var(--muted); font-size: 0.76rem; }
.ad-audit__act { display: inline-flex; align-items: center; gap: 5px; }
.ad-audit__tag { font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.ad-audit__tag--view { color: var(--accent); background: var(--accent-soft); }
.ad-audit__tag--edit { color: #b45309; background: rgba(217,119,6,0.14); }
.ad-audit__tag--export { color: #db2777; background: rgba(219,39,119,0.12); }
.ad-audit__t { color: var(--faint); font-size: 0.76rem; text-align: right; }
@media (max-width: 560px) { .ad-audit__row { grid-template-columns: 1fr auto; } .ad-audit__row > span:nth-child(1) { grid-column: 1 / -1; } }

/* 회원 탈퇴 (개인정보 파기) */
.pf-danger { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.pf-withdraw { font-size: 0.85rem; font-weight: 700; color: #e2402f; text-decoration: underline; text-underline-offset: 2px; }
.pf-withdraw:hover { color: #b91c1c; }
.pf-danger span { display: block; font-size: 0.76rem; color: var(--faint); line-height: 1.55; margin-top: 8px; word-break: keep-all; }

/* 제3자 제공 동의 상세 표 */
.consent-tb { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.consent-tb th, .consent-tb td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; line-height: 1.55; word-break: keep-all; }
.consent-tb th { width: 34%; font-weight: 800; color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }
.consent-tb td { color: var(--ink-2); }
.consent-tb td b, .consent-tb th b { color: var(--accent); }
.consent-tb tr:last-child th, .consent-tb tr:last-child td { border-bottom: none; }

/* ===== 보안·동의 UI ===== */
.field__hint { display: block; font-size: 0.76rem; color: var(--faint); margin-top: 6px; line-height: 1.5; }
.field__hint--ok { color: var(--ok); }
.field__hint--no { color: #e2402f; }
.su-agree--opt { background: var(--surface); }
.su-req { color: #e2402f; }
.su-opt { color: var(--muted); }
/* 마케팅 수신 토글 (마이페이지) */
.mkt-toggle { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); cursor: pointer; }
.mkt-toggle__tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mkt-toggle__tx b { font-size: 0.9rem; font-weight: 700; }
.mkt-toggle__tx em { font-size: 0.78rem; font-style: normal; color: var(--muted); }
.mkt-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mkt-toggle__sw { position: relative; flex-shrink: 0; width: 44px; height: 25px; border-radius: 999px; background: var(--line); transition: background 0.18s; }
.mkt-toggle__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.18s; }
.mkt-toggle input:checked + .mkt-toggle__sw { background: var(--accent); }
.mkt-toggle input:checked + .mkt-toggle__sw::after { transform: translateX(19px); }

/* ===== 사업자 등록 — 가입 유형(다중) + 서류 드롭존 ===== */
.biz-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.biz-role { display: flex; align-items: center; gap: 11px; padding: 14px 15px; border: 1.5px solid var(--line); border-radius: 13px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.biz-role:hover { border-color: var(--accent); }
.biz-role input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
.biz-role__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--surface-2); color: var(--ink-2); flex-shrink: 0; }
.biz-role__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.biz-role__tx b { font-size: 0.95rem; font-weight: 800; }
.biz-role__tx span { font-size: 0.78rem; color: var(--muted); }
.biz-role:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.biz-role:has(input:checked) .biz-role__ic { background: var(--accent); color: #fff; }

/* ── 입점 이유 — 폼 **앞에** 근거를 둔다 ────────────────────────────────────
   ⚠ 회원가입 화면에는 좌측에 혜택(.auth-visual__pts)이 있는데 **정작 설득이 필요한
     입점 신청에는 한 줄도 없었다.** 사업자등록번호·서류·심사가 걸린 무거운 결정인데
     근거 0 · 입력칸 14개였다(실측 2026-08-21: PC 2.3화면 · 모바일 3.4화면).
   ⚠ 숫자를 여기 박지 않는다 — 수수료의 단일 진실원은 js/ops.js(OPS.fees)다.
     business.html 이 ops.js 를 불러 화면에서 계산한다.
   ⚠ `repeat(3, 1fr)` 로 쓰지 않는다. 1fr 은 minmax(auto,1fr) 이라 줄지 않는 내용이
     있으면 열이 넘쳐 카드가 잘린다(공간 카드에서 실제로 겪었다). */
.bizwhy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.bizwhy__c { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; background: var(--surface); }
.bizwhy__k { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 6px; }
.bizwhy__v { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.bizwhy__d { display: block; margin-top: 5px; font-size: 0.78rem; line-height: 1.55; color: var(--muted); }

/* 가입 유형을 폼 밖 큰 카드로 올렸다 — 이 페이지의 근본 분기인데 네이티브 사각
   체크박스로 폼 첫 줄에 묻혀 있었다. 카드를 눌러 고르는 UI 라 체크 표시를 직접 그린다. */
.biz-roles--lead { margin: 0 0 18px; gap: 12px; }
.biz-roles--lead .biz-role { padding: 16px 17px; border-radius: 15px; }
.biz-role input { appearance: none; -webkit-appearance: none; position: relative; margin: 0;
  width: 20px; height: 20px; border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--surface); cursor: pointer; transition: background .15s, border-color .15s; }
.biz-role input:checked { border-color: var(--accent); background: var(--accent); }
.biz-role input:checked::after { content: ""; position: absolute; left: 5px; top: 3px;
  width: 6px; height: 10px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(40deg); }
.biz-role input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 국세청 확인 — 이 폼에서 **제출을 막는 유일한 관문**인데 선 버튼 하나로 폼 중간에
   떠 있어 비중이 없었다. 상자로 묶어 무엇을 하는 자리인지 보이게 한다. */
.hf-nts { border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; background: var(--surface-2); }
.hf-nts .hf-label { margin-bottom: 8px; }
.hf-nts .hf-verify { margin: 0; }
.hf-nts .hf-hint { display: block; margin-top: 8px; }

/*  ⚠ 모바일에서 여백을 조인다. 카드 3장이 세로로 311px 을 먹어 진행 단계(#bzBar)가
    하단 내비 아래로 밀려 3,043px² 가려졌다(실측 390×844: 내비 top 778 · 스태퍼 751~787).
    설명 문구는 지우지 않는다 — '5% 가 무슨 5% 인지' 가 이 카드의 핵심이다. */
@media (max-width: 760px) {
  .bizwhy { grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; }
  .bizwhy__c { padding: 11px 13px; }
  .bizwhy__k { margin-bottom: 4px; }
  .bizwhy__v { font-size: 1.1rem; }
  .bizwhy__d { margin-top: 3px; font-size: 0.76rem; line-height: 1.45; }
}
/* 첨부 상자 슬림화 — 서류가 두세 개면 세로로 쌓여 폼 끝이 멀어진다.
   아이콘·제목·형식을 한 줄로 눕히고 위아래 여백을 줄인다(끌어다 놓기는 그대로 된다) */
.dropzone--sm { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px 8px; padding: 10px 14px; margin-top: 5px; border-radius: 11px; }
.dropzone--sm .dropzone__ic { font-size: 1rem; }
.dropzone--sm .dropzone__t { font-size: 0.84rem; margin-top: 0; }
.dropzone--sm .dropzone__s { margin-top: 0; }
/* 한 줄에 안 들어가면 형식 안내만 아래로 내린다 — 제목이 잘리는 것보다 낫다 */
@media (max-width: 420px) { .dropzone--sm .dropzone__s { flex-basis: 100%; } }
.bz-doc { margin-bottom: 10px; }
.bz-doc__head { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 2px; }
.bz-doc__req { font-size: 0.68rem; font-weight: 800; color: #e2402f; background: rgba(226,64,47,0.1); padding: 2px 7px; border-radius: 999px; }
.bz-doc__opt { font-size: 0.68rem; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 2px 7px; border-radius: 999px; }
@media (max-width: 560px) { .biz-roles { grid-template-columns: 1fr; } }

/* ===== 쿠폰 — 호스트 발급 유형 세그 + 게스트 적용 박스 ===== */
.seg2 { display: flex; gap: 8px; flex-wrap: wrap; }
.seg2__o { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; transition: all 0.14s; }
.seg2__o span { white-space: nowrap; }
.seg2__o input { width: 15px; height: 15px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.seg2__o:hover { border-color: var(--accent); }
.seg2__o:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.rq-couponbox { border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; margin: 4px 0 14px; background: var(--surface-2); }
.rqcp__h { font-size: 0.92rem; font-weight: 800; margin-bottom: 10px; }
.rqcp__h span { font-size: 0.76rem; font-weight: 500; color: var(--faint); margin-left: 6px; }
.rqcp__f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.rqcp__f > span { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.rqcp__f select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 0.88rem; font-weight: 600; background: var(--surface); outline: none; }
.rqcp__code { display: flex; gap: 8px; }
.rqcp__code input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 0.88rem; outline: none; background: var(--surface); }
.rqcp__code input:focus { border-color: var(--accent); }
.rqcp__msg { font-size: 0.82rem; font-weight: 600; margin: 8px 0 0; min-height: 1em; }
.rqcp__msg.ok { color: var(--ok); }
.rqcp__msg.no { color: #e2402f; }
.book__couponnote { font-size: 0.82rem; color: var(--muted); background: var(--surface-2); border-radius: 9px; padding: 9px 12px; margin: 4px 0 12px; }
.book__couponnote b { color: var(--accent); }

/* 요금: 예약 방식 토글 · 패키지 선택 · 평일/주말 표기 */
.book__modes { display: flex; gap: 6px; margin: 0 0 12px; }
.book__mode { flex: 1; padding: 9px 0; border: 1px solid var(--line); background: #fff; border-radius: 9px; font-weight: 700; font-size: 0.9rem; color: var(--muted); cursor: pointer; transition: all 0.15s; }
.book__mode.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft, #eef0ff); }
.book__pkgs { display: flex; flex-direction: column; gap: 8px; }
.book__pkg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 0.9rem; flex-wrap: nowrap; }
.book__pkg:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, #eef0ff); }
.book__pkg input { accent-color: var(--accent); flex: 0 0 auto; width: auto; margin: 0; }
.book__pkg__l { flex: 1 1 auto; min-width: 0; white-space: normal; word-break: keep-all; text-align: left; }
.book__pkg b { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
.book__pkg__l em { font-style: normal; color: var(--muted); font-size: 0.82em; margin-left: 4px; }
.book__pkg b { font-weight: 800; }
.book__wk { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.sp-card__wk { font-size: 0.78rem; color: var(--muted); font-weight: 600; }

/* 마이페이지 대시보드 — 월별 매출 그래프 */
.dash-rev { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 14px 0; }
.dash-rev__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.dash-rev__head .dash-h { margin: 0; }
.dash-rev__tot { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.dash-rev__bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; border-bottom: 2px solid var(--line); padding-bottom: 2px; }
.dash-rev__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.dash-rev__val { font-size: 0.66rem; color: var(--muted); font-weight: 700; margin-bottom: 3px; white-space: nowrap; }
.dash-rev__bar { width: 62%; min-height: 2px; background: linear-gradient(180deg, #a5b4fc, var(--accent)); border-radius: 5px 5px 0 0; transition: height 0.4s; }
.dash-rev__bar[data-peak] { background: linear-gradient(180deg, #6366f1, var(--accent)); }
.dash-rev__lbl { font-size: 0.7rem; color: var(--muted); margin-top: 5px; text-align: center; display: flex; flex-direction: column; }
.dash-rev__lbl em { font-style: normal; font-size: 0.62rem; color: var(--faint); }
@media (max-width: 560px) { .dash-rev__bars { height: 120px; gap: 4px; } .dash-rev__val { font-size: 0.58rem; } }

/* 마이페이지 세로 사이드바 — admin 스타일(맨 왼쪽 전체높이 고정 도킹) */
.mp-body { display: flex; gap: 24px; align-items: flex-start; }
.mp-body .mp-tabs { flex: 0 0 210px; flex-direction: column; align-items: stretch; gap: 4px; border-bottom: none; margin-bottom: 0; }
.mp-body .mp-tab { padding: 11px 14px; border-radius: 10px; text-align: left; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; }
/* 역할별 메뉴 숨김 보장 — display 선언이 [hidden]의 기본 display:none을 덮어써서
   파트너 계정에 호스트 메뉴(내 등록 공간·공간 관리 등)가 노출되던 문제 방지 */
.mp-tab[hidden], .mp-tabs__div[hidden], .mp-tabs__title[hidden] { display: none !important; }
/* ?req=<id> 딥링크로 이동한 견적요청 카드 강조 (알림·배지 → 해당 요청 바로 찾기) */
.mp-bk.is-focus { animation: reqFocus 2.4s ease-out; }
@keyframes reqFocus {
  0%, 60% { box-shadow: 0 0 0 3px var(--accent); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.mp-body .mp-tab:hover { background: var(--surface-2); color: var(--ink); }
.mp-body .mp-tab.is-active { background: var(--accent); color: #fff; font-weight: 700; box-shadow: var(--glow); }
.mp-body .mp-tab.is-active::after { display: none; }
.mp-body .mp-tab__badge { margin-left: auto; }
.mp-body .mp-tab.is-active .mp-tab__badge { background: #fff; color: var(--accent); }
.mp-main { flex: 1; min-width: 0; max-width: 1040px; }
/* 데스크톱: 사이드바를 화면 맨 왼쪽에 전체 높이로 고정, 콘텐츠는 넓게 */
@media (min-width: 861px) {
  .mp-body .mp-tabs { position: fixed; left: 0; top: var(--header-h, 64px); bottom: 0; width: 234px; z-index: 40; background: var(--surface); border-right: 1px solid var(--line); border-radius: 0; padding: 22px 14px; overflow-y: auto; margin: 0; }
  .mp-body { display: block; }
  .mp:has(.mp-body) { max-width: none; margin: 0; padding-left: 274px; padding-right: 46px; }
  /* 로고를 화면 맨 왼쪽으로(사이드바와 정렬) — 마이페이지 한정 */
  body:has(.mp-body) .header__inner { max-width: none; margin: 0; padding-left: 24px; }
}
/* 모바일·태블릿: 상단 가로 스크롤 메뉴 */
@media (max-width: 860px) {
  .mp-body { flex-direction: column; gap: 14px; }
  .mp-body .mp-tabs { flex: none; width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: var(--surface); }
  .mp-body .mp-tabs::-webkit-scrollbar { display: none; }
  .mp-body .mp-tab { flex-shrink: 0; }
}
/* 사이드바 타이틀·아이콘·섹션 구분 (admin 느낌) */
.mp-body .mp-tab { gap: 10px; }
.mp-body .mp-tab .ic { flex: 0 0 auto; color: var(--muted); transition: color 0.15s; }
.mp-body .mp-tab.is-active .ic { color: #fff; }
.mp-tabs__title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; padding: 2px 10px 12px; display: none; }
.mp-tabs__div { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; color: var(--faint); text-transform: uppercase; padding: 13px 10px 4px; }
@media (min-width: 861px) { .mp-tabs__title { display: block; } }
@media (max-width: 860px) { .mp-tabs__title, .mp-tabs__div { display: none; } }
/* 요금 설정 입력 (컴팩트 인라인 — 화면 비례 맞춤) */
/*  품목 추가 폼 — 라벨 있는 2열 격자. 전에는 컨트롤 6개가 한 줄 flex 밴드에 있어
    화면 폭에 따라 예측할 수 없게 접혔다(단가 칸이 65px 로 쪼그라든 이력이 있다).
    ⚠ 열은 minmax(0,1fr) 이다 — 1fr 은 minmax(auto,1fr) 이라 줄지 않는 내용이 있으면
      그 열이 min-content 만큼 넓어져 카드가 밖으로 잘린다(공간 카드에서 겪은 그것). */
.vp-addform { display: grid; gap: 14px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 14px; }
.vp-af__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vp-af__f--wide { grid-column: 1 / -1; }
.vp-af__l { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.vp-addform input, .vp-addform select { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.9rem; background: var(--surface); }
.vp-addform .mg-unitfield { width: 100%; }
.vp-af__go { margin-left: auto; }
@media (max-width: 560px) { .vp-addform { grid-template-columns: minmax(0, 1fr); } }
.mg-band { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mg-band > select, .mg-band > input { width: auto; flex: 0 0 auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.9rem; background: #fff; }
.mg-band select { min-width: 92px; }
.mg-band input[type="number"] { width: 84px; }
.mg-band input[type="text"] { flex: 1 1 150px; min-width: 130px; max-width: 260px; }
.mg-band .mg-unitfield { flex: 0 0 auto; width: auto; margin: 0; }
/* 박스 스타일·폭은 아래 '.mg-unitfield input' 통합 규칙에서 한 번에 정한다 */
.mg-band .mg-unitfield input::placeholder { font-size: 0.82rem; }
.mg-band__t { color: var(--muted); padding: 0 2px; }
.mg-pkgrow { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 9px; padding: 8px 12px; font-size: 0.88rem; }
.mg-pkgrow b { font-weight: 700; }
.mg-pkgrow span { color: var(--muted); flex: 1; }
.mg-pkgrow__x { color: var(--faint); font-weight: 700; }
.mg-sec__desc { margin-left: 8px; }

/* 공간 관리: 콘텐츠 전체 폭 제한(오른쪽 빈 공간 제거) */
#discWrap { max-width: 1000px; }
/* 공간 관리: 입력 가로폭 컴팩트화 + 좌측 정렬 */
.mg-sec .book__row { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.mg-sec .book__row > .book__field { flex: 0 0 auto; width: 190px; margin-bottom: 0; }
.mg-sec .book__field > .mg-unitfield { max-width: 190px; }
.mg-sec .book__field > input[type="date"] { max-width: 190px; }
.mg-opscol--rules .book__field > .mg-unitfield { max-width: 120px; }
/* 저장 버튼 왼쪽 끝으로 */
.mg-sec .mg-sec__foot { justify-content: flex-start; }
/* 즉시 예약 자동 수락 박스: 문구 끝까지만 */
.mg-check--auto { max-width: 520px; }
/* 반짝할인 · 쿠폰 발급 탭: 반 사이즈 */
.promo-tabs { max-width: 460px; }
/* 시간대 할인 · 패키지 시간 드롭다운 */
.mg-hsel { min-width: 100px !important; max-width: 122px; }
.mg-band > select, .mg-band > input { padding: 8px 9px; }
.mg-band .mg-unitfield { max-width: none; }
/*  단가·최소수량·보유 입력칸은 .mg-unitfield 로 감싸져 있어 `.mg-band > input` 자식 선택자에
    걸리지 않는다 → 테두리·모서리·높이를 못 받아 이름칸·셀렉트보다 납작한 사각형으로 보였다.
    이름칸과 같은 박스를 명시하고 폭도 셋 다 동일하게 통일한다. */
.mg-band .mg-unitfield input { width: 128px; padding: 8px 32px 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.9rem; background: #fff; text-align: center; }
.mg-band .mg-unitfield input:focus { border-color: var(--ink); outline: none; }
.mg-band .mg-unit { right: 10px; font-size: 0.8rem; }
.mg-band .mg-unitfield--pct input { width: 108px; }
/* 시간대 할인 스케줄러 목록 */
.mg-schedule { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.mg-schedule__empty { font-size: 0.82rem; color: var(--faint); background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px; padding: 11px 13px; }
.mg-sch-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 0.88rem; }
.mg-sch-tag { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #eef2ff; color: #4f46e5; }
.mg-sch-tag--weekday { background: #ecfdf5; color: #059669; }
.mg-sch-tag--weekend { background: #fff1f2; color: #e11d48; }
.mg-sch-time { flex: 1; font-weight: 700; color: var(--ink); }
.mg-sch-pct { flex: 0 0 auto; font-weight: 800; color: #ca8a04; }
.mg-sch-x { flex: 0 0 auto; color: var(--faint); font-weight: 700; width: 22px; height: 22px; border-radius: 6px; }
.mg-sch-x:hover { background: #fee2e2; color: #dc2626; }
/* 검색 카드: 시간대 할인 뱃지 */
.sp-card__band { display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 2px; font-size: 0.74rem; font-weight: 800; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 3px 9px; }
.sp-card__band .ic { color: #d97706; }
/* 호스트 폼: 이용 가능 시간 드롭다운 (한 줄·컴팩트) */
.hf-hours { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 460px; }
.hf-hsel { width: auto !important; min-width: 0; flex: 1 1 100px; max-width: 128px; }
.hf-hours > span { color: var(--muted); flex: 0 0 auto; }
.hf-hours #hOpen24 { flex: 0 0 auto; white-space: nowrap; }
/* 예약 위젯: hidden 속성이 명시적 display(grid/flex/inline-block)에 무시되지 않도록 강제 */
.book [hidden] { display: none !important; }
/* 예약 위젯: 이용시간 범위 + 시간대 할인 안내 */
.book__range { margin: -2px 0 8px; font-size: 0.82rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 6px 11px; display: inline-block; }
.book__bands { margin: 0 0 10px; font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.5; }
.book__bands .ic { color: #d97706; flex: 0 0 auto; }
.book__bands b { color: var(--ink-2); font-weight: 700; }
.book__bands__no { color: #dc2626; font-weight: 700; }
.book__bands__ok { color: #059669; font-weight: 700; }
@media (max-width: 560px) {
  .mg-sec .book__row > .book__field { width: calc(50% - 7px); }
  .mg-sec .book__field > .mg-unitfield, .mg-sec .book__field > input[type="date"], .mg-opscol--rules .book__field > .mg-unitfield { max-width: none; }
  .mg-band > select, .mg-band > input, .mg-hsel { flex: 1 1 46%; min-width: 0 !important; max-width: none; }
  /* 자식 선택자에 안 걸리는 단위 입력칸도 같이 접히게 — 고정 128px 이면 좁은 화면에서 넘친다 */
  .mg-band .mg-unitfield { flex: 1 1 46%; }
  .mg-band .mg-unitfield input, .mg-band .mg-unitfield--pct input { width: 100%; }
}
/* 내 후기 — 공간별 필터 칩 */
.myrev-head { font-size: 0.95rem; margin-bottom: 12px; }
.myrev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.myrev-chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); background: #fff; }
.myrev-chip.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.myrev-chip em { font-style: normal; opacity: 0.7; margin-left: 3px; }

/* AI 초안 패널 — 홈의 한 줄 입력 결과. '수정 가능한 초안'임을 분명히 보이게 한다 */
.aidraft { margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.04); text-align: left; }
.aidraft[hidden] { display: none !important; }
.aidraft__wait { color: var(--faint); font-size: .9rem; padding: 4px 0; }
.aidraft__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.aidraft__head b { font-size: .98rem; }
.aidraft__src { font-size: .76rem; color: var(--faint); }
.aidraft__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.aidraft__chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2); font-size: .84rem; font-weight: 600; }
.aidraft__chip i { font-style: normal; font-size: .72rem; color: var(--faint); font-weight: 500; }
.aidraft__svc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.aidraft__cat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.aidraft__cat > b { font-size: .84rem; min-width: 92px; color: var(--faint); font-weight: 600; }
.aidraft__items { display: flex; flex-wrap: wrap; gap: 5px; }
.aidraft__item { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); font-size: .82rem; }
.aidraft__none { color: var(--faint); font-size: .86rem; margin: 0 0 12px; }
.aidraft__foot { display: flex; gap: 8px; flex-wrap: wrap; }
.aidraft__note { margin: 10px 0 0; font-size: .78rem; color: var(--faint); }
@media (max-width: 560px) {
  .aidraft__foot .btn { width: 100%; }
  .aidraft__cat > b { min-width: 0; }
}

/* 요청서 상단 — AI 초안으로 채워졌음을 알린다 */
.rq-aidraft { display: flex; flex-direction: column; gap: 3px; margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface-2); }
.rq-aidraft b { font-size: .9rem; }
.rq-aidraft span { font-size: .82rem; color: var(--faint); }
.rq-aidraft__qty { font-weight: 600; }

/* 분야만 확인된 항목 — 품목이 아니라 카테고리라는 걸 눈으로 구분되게 한다 */
.aidraft__item--hint { border-style: dashed; color: var(--muted); }

/* AI 검색어 — 못 알아들은 낱말 후보. 빈도가 높은 것부터 별칭표에 넣는다 */
.aiq-words { display: flex; flex-wrap: wrap; gap: 6px; }
.aiq-word { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); font-size: 0.84rem; font-weight: 600; }
.aiq-word em { font-style: normal; font-size: 0.74rem; font-weight: 700; color: var(--accent); }
/* 누르면 그 낱말로 검색된다 — 손가락 표시로 눌리는 것임을 알린다 */
.aiq-word { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.aiq-word:hover { border-color: var(--accent); background: var(--accent-soft); }

/* AI 검색어 — 검색 · 정렬 · 개수 줄 */
.aiq-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 8px; }
.aiq-srch { position: relative; display: flex; align-items: center; gap: 7px; flex: 1 1 260px;
  padding: 0 12px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.aiq-srch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.aiq-srch > span { color: var(--muted); font-size: 0.9rem; }
.aiq-srch input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 0.9rem; color: inherit; }
/* 브라우저가 붙이는 기본 지우기 표시를 끈다 — 우리 ✕ 와 두 개가 나란히 보인다 */
.aiq-srch input::-webkit-search-cancel-button { display: none; }
.aiq-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 0.85rem;
  padding: 4px; line-height: 1; border-radius: 6px; }
.aiq-x:hover { background: var(--surface-2); color: var(--ink); }
.aiq-bar__r { display: flex; gap: 6px; }
.aiq-sel { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.aiq-cnt { font-size: 0.84rem; color: var(--muted); margin: 0 0 8px 2px; }
.aiq-cnt b { color: var(--ink); }
.aiq-cnt span { color: var(--faint); font-weight: 500; }

/* 쪽 나눔 */
.aiq-pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px; margin-top: 12px; }
.aiq-pg__b { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); font: inherit; font-size: 0.84rem;
  font-weight: 600; color: var(--ink); cursor: pointer; }
.aiq-pg__b:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.aiq-pg__b.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.aiq-pg__b:disabled { opacity: 0.4; cursor: default; }
.aiq-pg__gap { color: var(--faint); padding: 0 2px; }
@media (max-width: 560px) {
  .aiq-bar__r { width: 100%; }
  .aiq-sel { flex: 1; }
}

/* 공간 조건(편의시설) — '빌리는 품목' 과 눈으로 구분되게 다른 색을 쓴다 */
.aidraft__item--amen { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* ── 상담 챗봇 ──────────────────────────────────────────────────────────────
   ⚠ 우하단에 둔다. 좌하단은 찜·최근본 메뉴(.qm)가 이미 쓰고 있다. */
/*  상담 챗봇은 채팅 위젯(.cw) 안으로 합쳤다 — 별도 버튼·패널이 없으므로
    .cb-btn / .cb-panel 스타일을 제거했다. 봇 답변은 .cw__msg 로 그려진다. */

/* 예약번호 — 회원이 문의할 때 알려줄 번호. 관리자 목록과 같은 문자열이어야 한다(OPS.bkNo) */
.mp-bk__no { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0 0 8px;
  font-size: .8rem; color: var(--muted); }
.mp-bk__no b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
  color: var(--ink); letter-spacing: .02em; }
.mp-bk__no span { font-size: .74rem; color: var(--faint); }
.bk-chip--no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; }
.ad-tr__no { display: block; margin-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem; color: var(--faint); letter-spacing: .02em; }

/* 채팅 위젯 개편 — 이모지를 라인 아이콘으로 바꾸고 대화 '치우기' 를 넣었다.
   ⚠ .cw__thread 는 button 에서 div 로 바뀌었다(안에 치우기 button 을 넣어야 해서).
     클릭은 data-t 위임으로 처리되므로 동작은 같다. */
.cw__head b { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cw__head b svg, .cw__thtop b svg { flex: 0 0 auto; color: var(--accent); }
.cw__back, .cw__x { display: inline-flex; align-items: center; justify-content: center; }
/* 대화 줄을 카드로 — 전체폭 목록에 구분선만 있어서 어디까지가 한 칸인지 흐릿했다.
   테두리 + 라운드로 칸을 세우고, 올리면 배경이 바뀌어 눌리는 것임을 알린다 */
.cw__threadrow { display: flex; align-items: stretch; margin: 0 12px 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  transition: background 0.15s, border-color 0.15s; cursor: pointer; }
.cw__threadrow:hover { background: var(--surface-2); border-color: var(--line-2); }
.cw__threadrow:focus-within { border-color: var(--accent); }
.cw__threadrow .cw__thread { flex: 1; min-width: 0; border-bottom: 0; cursor: pointer; }
.cw__threadrow .cw__thread:hover { background: none; }   /* 배경은 줄(카드)이 낸다 */
.cw__thtop b { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* 치우기 — 평소엔 흐리게, 줄에 올리면 드러난다. 지우는 것이 아니라 내 목록에서만 감춘다 */
.cw__del { flex: 0 0 auto; width: 34px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--faint); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; }
.cw__threadrow:hover .cw__del { opacity: 1; }
.cw__del:hover { color: var(--ink); }
@media (max-width: 760px) { .cw__del { opacity: .6; } }

/* 자동 응답 안의 누를 수 있는 질문 — 봇 메시지는 HTML 이 살아 있어 버튼을 넣을 수 있다.
   ⚠ 방을 열었을 때 무엇을 물어볼 수 있는지 보여주는 것이 목적이다(예전엔 빈 화면이었다). */
.cw-botq { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cw-botq button { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: .76rem; font-weight: 600;
  cursor: pointer; text-align: left; line-height: 1.35; }
.cw-botq button:hover { border-color: var(--accent); color: var(--accent); }
/* 봇 메시지 안의 링크가 배경에 묻히지 않게 */
.cw__msg:not(.mine) a { color: var(--accent); font-weight: 700; }

/* 파트너 영업 지역 — 시·도를 접었다 펼치며 시·군·구를 고른다.
   ⚠ 16개 시·도 × 최대 31개 구를 한 번에 펼치면 화면이 무너진다. details 로 접어 둔다. */
.vr-areas { margin-top: 10px; }
.vr-areas__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vr-area { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 7px; }
.vr-area.is-on { border-color: var(--accent); }
.vr-area__sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.vr-area__sum::-webkit-details-marker { display: none; }
.vr-area__sum::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); margin-left: 2px; flex: none; transition: transform .15s; }
.vr-area[open] .vr-area__sum::after { transform: rotate(-135deg); }
.vr-area__chk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: .9rem; }
.vr-area__chk input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.vr-area__n { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--faint); }
.vr-area.is-on .vr-area__n { color: var(--accent); }
.vr-area__gu { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 12px; }
.vr-area__gu .rqn__opt { font-size: .79rem; padding: 5px 9px; }
.vr-area__gu input:disabled + span { opacity: .6; }
@media (max-width: 640px) { .vr-area__gu .rqn__opt { font-size: .76rem; padding: 5px 8px; } }

/* 자동 응답 방의 '새 대화' — 창구는 남기고 대화 내용만 비운다.
   관리자·예약·견적 방에는 같은 모양으로 '내역 지우기' 를 둔다. 그 방들은 대화가
   상대와 공유하는 기록이라 실제로 지우지 않고 '내 화면에서만' 감춘다. */
.cw__new { flex: none; background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; font-size: .72rem; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; }
.cw__new:hover { border-color: var(--accent); color: var(--accent); }
/* 지운 뒤 되돌리기 — 실수로 눌렀을 때 바로 복구할 길을 같은 자리에 둔다 */
.cw__undo { margin-top: 10px; background: none; border: 1px solid var(--accent); border-radius: 999px;
  padding: 5px 13px; font: inherit; font-size: .78rem; font-weight: 700; color: var(--accent); cursor: pointer; }
.cw__undo:hover { background: var(--accent-soft); }
/* 미읽음 0 인데 빨간 배지에 '0' 이 보이던 것 — hidden 을 확실히 먹인다(함정표 1번) */
.cw__badge[hidden], .cw__hdot[hidden] { display: none !important; }

/* 챗봇 메뉴 — 눌러서 파고드는 목록. 번호를 왼쪽에 두어 '몇 번을 누른다' 가 되게 한다. */
/* 메뉴 접기/펼치기 — 다섯 줄이 대화창 절반을 먹어서 앞서 받은 답을 다시 읽기 어려웠다.
   ⚠ 접힘 상태는 이 메시지 안(data-open)에 둔다. 대화를 다시 그릴 때 innerHTML 이
     통째로 바뀌므로 밖에 두면 그릴 때마다 펼쳐진 상태로 돌아간다. */
.cw-botfold { display: block; margin-top: 9px; }
.cw-botfold__t { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  padding: 2px 0; font: inherit; font-size: .76rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.cw-botfold__t:hover { color: var(--accent); }
.cw-botfold__t em { font-style: normal; font-weight: 600; color: var(--faint); }
.cw-botfold__c { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .18s ease; }
.cw-botfold[data-open="0"] .cw-botfold__c { transform: rotate(-45deg) translateX(-1px); }
.cw-botfold[data-open="0"] .cw-botmenu { display: none; }
@media (prefers-reduced-motion: reduce) { .cw-botfold__c { transition: none; } }

.cw-botmenu { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.cw-botmenu button { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); font-size: .82rem; font-weight: 700; line-height: 1.4; cursor: pointer; transition: all .12s; }
.cw-botmenu button:hover { border-color: var(--accent); background: var(--surface-2, var(--surface)); }
.cw-botmenu button > b { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: .68rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.cw-botmenu button > span { min-width: 0; }
.cw-botmenu small { display: block; margin-top: 2px; font-size: .72rem; font-weight: 500; color: var(--muted); }
/* 되돌아가는 줄 — 답이나 하위 분류에서 길이 끊기지 않게 */
.cw-botq--nav { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* 채팅창 크기 조절 — 패널은 우하단에 붙어 있어 좌상단 모서리를 끌어 키운다. */
.cw__grip { position: absolute; left: 0; top: 0; width: 20px; height: 20px; cursor: nwse-resize;
  z-index: 2; border-top-left-radius: 16px; }
.cw__grip::before { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px;
  border-left: 2px solid var(--faint); border-top: 2px solid var(--faint); border-top-left-radius: 3px; opacity: .7; }
.cw__grip:hover::before { border-color: var(--accent); opacity: 1; }
.cw__panel { position: relative; }
/* 끄는 동안 글자가 선택되지 않게 */
body.cw-resizing { user-select: none; cursor: nwse-resize; }
@media (max-width: 640px) { .cw__grip { display: none; } }   /* 모바일은 화면폭에 맞춘다 */

/* 지도 — 공간 탭 / 맞춤업체 탭 */
.mapp__tabs { margin: 12px 0 8px; }
.mapp__cats { margin-top: 10px; }
.mapp__cats .faq-chip { font-size: .78rem; padding: 5px 10px; }
#mapVlist { margin-top: 14px; }
@media (max-width: 640px) { .mapp__tabs .promo-tab { flex: 1 1 auto; } }

/* ══════════════════════════════════════════════════════════════════════
   지도 페이지 UI — 넓은 지도 · 한 줄 칩 · 카드형 말풍선 · 그리드 목록
   ⚠ 기존 .mapp__canvas 높이 선언보다 뒤에 와야 이긴다(같은 특이도).
   ══════════════════════════════════════════════════════════════════════ */

/* ① 지도 영역을 화면 높이에 맞춘다 — 답답하지 않게 */
.mapp__canvas { height: calc(100vh - 220px); min-height: 600px; }
@supports (height: 100dvh) { .mapp__canvas { height: calc(100dvh - 220px); } }
@media (max-width: 900px) { .mapp__canvas { height: calc(100dvh - 280px); min-height: 460px; } }
@media (max-width: 560px) { .mapp__canvas { height: 62dvh; min-height: 360px; } }

/* ② 카테고리 칩 — 줄바꿈 없이 가로 한 줄 스크롤. 끝을 흐리게 해 '더 있다'를 알린다. */
.mapp__cats { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  gap: 6px; padding: 2px 0 6px; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.mapp__cats::-webkit-scrollbar { display: none; }
.mapp__cats .faq-chip { flex: 0 0 auto; white-space: nowrap; }

/* ③ 말풍선(InfoWindow) 미니 카드 — 네이버가 감싸는 틀 안에 들어간다 */

/* ④ 하단 목록 — 이미지 썸네일 3컬럼 그리드 카드 */
.mapsec { margin-top: 18px; }
.mapsec__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; font-weight: 800; }
.mapsec__h span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
  height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .74rem; font-weight: 800; }
.mapg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .mapg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mapg { grid-template-columns: minmax(0, 1fr); } }
.mapg__card { display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--surface); cursor: pointer;
  transition: transform .13s, box-shadow .13s, border-color .13s; text-align: left; padding: 0; }
.mapg__card:hover { transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(24,23,15,.1); }
.mapg__thumb { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.mapg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapg__badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 6px;
  font-size: .68rem; font-weight: 700; background: rgba(255,255,255,.92); }
.mapg__body { padding: 10px 12px 12px; min-width: 0; }
.mapg__t { display: block; font-size: .9rem; font-weight: 800; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapg__meta { display: block; margin-top: 3px; font-size: .76rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapg__price { display: block; margin-top: 5px; font-size: .82rem; font-weight: 800; color: var(--accent); }
/* 사진이 없을 때 — 카테고리 색과 아이콘으로 채운다(빈 회색 칸을 만들지 않는다) */
.mapg__ph { width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; }
.mapg__ph svg { opacity: .72; }
/* 표시하지 못한 공간 안내 */
.mapsec--warn .mapsec__h span { background: var(--warn, #b5563b); }

/* ── 지도 미니 오버레이 ─────────────────────────────────────────────────
   ⚠ 예전엔 사진과 버튼이 든 큰 흰 박스여서 지도를 통째로 가렸다.
     한 줄만 띄우고, 자세한 내용은 아래 카드 목록으로 스크롤해 보여준다. */
.maptip { display: inline-flex; align-items: center; gap: 6px; max-width: 74vw;
  padding: 7px 10px 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: .82rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(24,23,15,.18); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; }
.maptip:hover { border-color: var(--accent); }
.maptip b { font-weight: 800; }
.maptip__x { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 2px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .8rem; font-weight: 800; }
.maptip__tag { flex: none; padding: 1px 6px; border-radius: 5px; background: #efece6;
  color: #7a736a; font-size: .68rem; font-weight: 700; }
/* 네이버가 감싸는 InfoWindow 틀의 흰 배경·테두리를 지운다(투명 오버레이) */
.mapp__canvas .maptip { margin: 0; }

/* ── 카테고리 칩 패널 — 지도 바로 위 ────────────────────────────────── */
.mapp__bar { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); }
.mapp__bar .mapp__cats { padding: 0; }

/* ── 스크롤 도착 강조 — 어디로 내려왔는지 알 수 있게 ──────────────────── */
.mapsec.is-hit .mapsec__h, .mapg__card.is-hit { animation: maphit 1.5s ease-out; }
.mapg__card.is-hit { border-color: var(--accent); }
@keyframes maphit {
  0% { box-shadow: 0 0 0 0 rgba(176,80,58,.42); }
  60% { box-shadow: 0 0 0 7px rgba(176,80,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(176,80,58,0); }
}
.mapsec.is-hit .mapsec__h { border-radius: 8px; }
/* 스크롤 목표가 헤더 밑에 숨지 않게 */
.mapsec { scroll-margin-top: 84px; }
.mapg__card { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  .mapsec.is-hit .mapsec__h, .mapg__card.is-hit { animation: none; }
}

/* 사진은 플레이스홀더 '위에' 얹는다 — 깨지면 remove() 되고 아래 플레이스홀더가 보인다.
   ⚠ onerror 속성 안에 SVG 를 문자열로 넣던 방식은 이스케이프가 얽혀 취약했다. */
.mapimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mapg__thumb { position: relative; }

/* ── 공급자 모집 — 공간(호스트) / 장비·서비스(파트너) 두 갈래 ─────────────
   ⚠ 예전에는 호스트만 이야기했다. 이 사이트는 두 갈래를 함께 모집한다. */
.host__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  margin: 22px auto 0; max-width: 860px; text-align: left; }
@media (max-width: 720px) { .host__two { grid-template-columns: minmax(0, 1fr); } }
.host__col { display: flex; flex-direction: column; gap: 9px; padding: 20px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.05); }
.host__ct { margin: 0; font-size: 1.02rem; font-weight: 800; }
.host__cd { margin: 0; font-size: .86rem; line-height: 1.62; opacity: .82; }
/* 버튼은 칸 가운데로. flex-start 로 두면 두 칸의 버튼이 왼쪽에 몰려 오른쪽이 비어
   보인다(칸 폭이 넓어 빈 자리가 크다). 폭은 글자만큼만 두고 자리만 가운데로 옮긴다 */
.host__col .btn { align-self: center; margin-top: 4px; }
.host__fee { max-width: 860px; margin: 18px auto 0; font-size: .82rem; line-height: 1.7; opacity: .74; }
.host__fee b { opacity: 1; }
.host__fee a { color: inherit; text-decoration: underline; }

/* 1분 가이드 버튼 — 팝업이 열린다는 걸 글로 밝힌다 */
.how-cta__hint { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--tint-soft, rgba(24,23,15,.07)); font-size: .7rem; font-weight: 700; color: var(--muted); }
/* 이용 흐름 3단계 — 접이식을 없앴으므로 항상 보인다 */
.how .section__head { margin-bottom: 16px; }

/* 공급자 모집 카드 — 두 칸의 제목·버튼 줄을 맞춘다.
   ⚠ grid 는 카드 박스 높이만 맞춰준다. 설명 길이가 다르면 버튼 높이가 어긋나므로
     설명 칸을 flex:1 로 늘려 버튼을 아래에 붙인다. */
.host__two { align-items: stretch; }
.host__col { height: 100%; }
.host__cd { flex: 1 1 auto; }
.host__col .btn { margin-top: 6px; }
/* 제목 줄도 맞춘다 — 한 줄/두 줄이 섞이면 설명 시작점이 어긋난다 */
.host__ct { min-height: 1.5em; }
/* 수수료 문구를 뺀 자리 — 짧은 안내 한 줄만 */
.host__note2 { max-width: 860px; margin: 16px auto 0; font-size: .82rem; line-height: 1.7; opacity: .7; }
.host__note2 a { color: inherit; text-decoration: underline; }

/* 부대서비스 섹션 — '여러 곳에서 한 번에' 로 가는 보조 링크
   (카드는 업체 목록으로 가고, 입찰 트랙은 이 링크로 간다) */
.svc-all { display: inline-block; margin-top: 6px; font-size: .84rem; font-weight: 700;
  color: var(--accent); text-decoration: none; }
.svc-all:hover { text-decoration: underline; }

/* ── 부대서비스 가로 스크롤을 부드럽게 ───────────────────────────────────
   ⚠ 딱딱 끊기던 원인은 scroll-snap 이다. 손을 떼는 순간 카드 경계로 끌어당겨
     흐름이 뚝 끊겼다. 끌거나 관성으로 흘러가는 동안에는 스냅을 끈다.
   ⚠ scroll-snap-type 을 통째로 지우지는 않는다 — 키보드 이동·앵커 스크롤에서는
     카드에 맞춰 서는 편이 낫다. */
.svc-grid { scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.svc-grid.is-drag, .svc-grid.is-glide { scroll-snap-type: none; }
/* 끌거나 흘러가는 중에는 브라우저의 매끄러운 스크롤이 개입하면 오히려 밀린다 */
.svc-grid.is-drag, .svc-grid.is-glide { scroll-behavior: auto; }
.svc-grid.is-glide { cursor: grabbing; }
/* 움직임 최소화 설정을 존중 — 관성 대신 즉시 멈추게 둔다(JS 는 그대로 두고 스냅만 유지) */
@media (prefers-reduced-motion: reduce) {
  .svc-grid.is-glide { scroll-snap-type: x proximity; }
}

/* ============================================================
   캘린더 연동 (마이페이지 · 호스트·파트너) — 2026-08-11
     내 예약·휴무를 구글/아이폰 캘린더에서 구독하는 링크를 다루는 칸이다.
     ⚠ 링크가 곧 자격증명이라 '복사' 와 '재발급/해제' 가 눈에 잘 띄어야 한다.
   ============================================================ */
.ical { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.ical__intro { display: flex; flex-direction: column; gap: 9px; }
.ical__h { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; margin: 0; }
.ical__h svg { color: var(--accent); flex-shrink: 0; }
.ical__p { margin: 0; font-size: 0.9rem; line-height: 1.62; color: var(--ink-2); word-break: keep-all; }
.ical__p b { color: var(--ink); font-weight: 700; }
/* 안내 박스 — 쿠폰 안내(.cpm__note)와 같은 모양을 쓴다(같은 성격의 도움말이다) */
.ical__note, .ical__warn { display: flex; align-items: flex-start; gap: 7px; font-size: 0.82rem; line-height: 1.5; border-radius: 10px; padding: 10px 13px; margin: 0; word-break: keep-all; }
.ical__note { color: var(--ink-2); background: var(--accent-soft); }
.ical__note svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.ical__note b { color: var(--accent); font-weight: 800; }
.ical__warn { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.ical__warn svg { flex-shrink: 0; margin-top: 2px; color: var(--warn); }
.ical__note > span, .ical__warn > span { flex: 1 1 auto; min-width: 0; }

.ical__box { display: flex; flex-direction: column; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 17px 18px; box-shadow: var(--shadow-sm); }
.ical__box--off { align-items: flex-start; }
.ical__lbl { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; color: var(--muted); }
.ical__urlrow { display: flex; gap: 8px; align-items: stretch; }
/* ⚠ min-width:0 이 없으면 긴 URL 이 input 을 늘려 '복사' 버튼을 화면 밖으로 밀어낸다 */
.ical__url { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; outline: none; }
.ical__url:focus { border-color: var(--accent); background: var(--surface); color: var(--ink); }
.ical__urlrow .btn { flex-shrink: 0; }

.ical__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ical__stat { font-size: 0.78rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }
.ical__stat.is-on { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.ical__hint { margin: 0; font-size: 0.79rem; line-height: 1.5; color: var(--faint); word-break: keep-all; }
.ical__hint b { color: var(--ink-2); font-weight: 700; }

.ical__chk { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--ink-2); cursor: pointer; }
.ical__chk input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.ical__chk b { color: var(--ink); font-weight: 700; }

.ical__acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 3px; border-top: 1px solid var(--line-2); margin-top: 2px; }
.ical__acts .btn { margin-top: 9px; }

/* 붙이는 방법 — 접어 둔다. 평소에는 링크와 버튼만 보이는 게 낫다 */
.ical__how { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ical__how > summary { cursor: pointer; padding: 14px 18px; font-size: 0.9rem; font-weight: 700; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.ical__how > summary::-webkit-details-marker { display: none; }
.ical__how > summary::before { content: "▸"; color: var(--accent); font-size: 0.9rem; transition: transform 0.15s; }
.ical__how[open] > summary::before { transform: rotate(90deg); }
.ical__how > summary:hover { background: var(--surface-2); }
.ical__how > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ical__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 4px 18px 18px; }
.ical__step { display: flex; flex-direction: column; gap: 7px; background: var(--surface-2); border-radius: 11px; padding: 13px 15px; }
.ical__step > b { font-size: 0.85rem; color: var(--ink); }
.ical__step ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; line-height: 1.5; color: var(--ink-2); }
.ical__step ol b { color: var(--ink); font-weight: 700; }
.ical__step > p { margin: 0; font-size: 0.77rem; line-height: 1.45; color: var(--faint); word-break: keep-all; }

@media (max-width: 560px) {
  /* 모바일에서는 URL 과 버튼을 위아래로 — 나란히 두면 URL 이 6~7자만 보인다(실측) */
  .ical__urlrow { flex-direction: column; }
  .ical__urlrow .btn { width: 100%; }
  .ical__url { font-size: 0.74rem; }
  .ical__box { padding: 15px 15px; }
  .ical__steps { grid-template-columns: 1fr; padding: 4px 15px 15px; }
  .ical__acts { flex-direction: column; }
  .ical__acts .btn { width: 100%; }
}

/* ============================================================
   모바일 정돈 — 공간찾기 · 맞춤업체 · 견적요청 (2026-08-10)
     측정으로 확인한 문제:  아이폰 13(390×844) 첫 화면에서
       · 공간찾기: 첫 카드가 798px 에서 시작 → 카드가 0.11장만 보였다
       · 맞춤업체: 첫 카드가 513px, 단가 칩이 3줄로 빽빽했다
       · 견적요청: 예산 드롭다운과 직접입력 칸이 동시에 떠 3줄을 먹었다
     아래 값은 눈대중이 아니라 재서 맞춘 것이다. 고칠 때도 재고 고칠 것.
       도구: scratchpad/measure.mjs (실제 Chrome 을 띄워 높이를 잰다)
   ============================================================ */

/*  하단 고정물들의 기준 높이 — 여기 한 곳만 고치면 챗봇·퀵메뉴·토스트가 함께 따라온다.
    ⚠ 값을 여러 곳에 흩어 적었더니 하단 내비가 생긴 뒤로 서로 겹쳤다. */
:root { --mnav-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px); }

@media (max-width: 760px) {
  /* ── 공통: 화면 폭을 카드에 쓴다 (32px 좌우 여백은 모바일에 너무 넓다) ── */
  .srch { padding: 12px 16px 76px; }
  /*  모바일은 제목까지 화면에서 감춘다 — 하단 내비에 '공간' 이 켜져 있고 검색창 안내문이
      무슨 화면인지 말해 준다. 실측: 제목 블록이 44px(첫 카드 305px 중 14%)였다.
      ⚠ display:none 이 아니다. 읽어 주는 프로그램에는 남겨야 화면 이름이 사라지지 않는다. */
  .srch__top { margin-bottom: 0; }
  .srch__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* ── 검색줄: 키워드 + [상세 필터] 한 줄 ── */
  .v-controls { gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
  .v-controls .srch-kw { flex: 1 1 auto; min-width: 0; padding: 0 12px; }
  .v-controls .srch-kw input { font-size: 0.9rem; padding: 10px 0; }
  /*  글자를 지우고 아이콘만 두면 폭은 벌지만 무엇을 누르는 버튼인지 알기 어렵다.
      '상세 필터' 는 남기고 여백만 줄인다. 재 보니 그래도 한 줄에 들어간다. */
  .v-morefilt { padding: 10px 11px; font-size: 0.82rem; gap: 5px; }
  .v-morefilt .ic { width: 14px; height: 14px; }

  /* ── 지역 + 유형 칩 한 줄 ── */
  .v-filterrow { gap: 7px; margin-bottom: 10px; }
  .v-region2 { gap: 4px; }
  .v-region2 select, .v-region2 select:last-child { width: 84px; padding: 9px 6px 9px 9px; font-size: 0.8rem; }
  .v-filterbar { margin-bottom: 0; }
  .v-filterbar .chip { padding: 7px 12px; font-size: 0.82rem; }

  /* ── 결과 수 + 정렬 ── */
  .v-listhead { gap: 8px; margin-bottom: 10px; flex-wrap: nowrap; }
  .v-listhead .results__count, .v-listhead .v-count { font-size: 0.84rem; }
  .v-listhead .results__count b, .v-listhead .v-count b { font-size: 1.02rem; }
  .results__tools { gap: 8px; }
  .results__sort > span { display: none; }       /* '정렬' 글자 없이도 뜻이 통한다 */
  .results__sort .filt__sel { width: auto; padding: 7px 8px; font-size: 0.8rem; }
  .viewtoggle__b { padding: 6px 11px; font-size: 0.8rem; }

  /* ── 즉시예약 + 태그 한 줄 ── */
  .qtag { padding: 6px 11px; font-size: 0.79rem; }
  .filtchips { margin: -4px 0 10px; }

  /*  카드 — 첫 화면에 1.5장이 걸리도록 사진을 가로로 눕힌다(4:3 → 16:9).
      ⚠ 검색 결과 그리드에만 적용한다. 다른 화면의 카드 비율은 건드리지 않는다. */
  /*  ⚠ 반경은 16px 로 둔다(공용값). 여기만 13px 이어서 같은 폭에서 메인은 16px,
      공간 찾기는 13px 로 달랐다 — "페이지끼리 톤이 안 맞는다" 의 남은 한 곳이었다.
      비율(16/9)은 목록에서 카드를 더 많이 보이게 하려는 것이라 그대로 둔다.        */
  .v-grid .sp-card__thumb { aspect-ratio: 16 / 9; }
  .v-grid .sp-card__body { padding: 9px 1px 0; gap: 3px; min-height: 0; }
  .v-grid .sp-card__foot { padding-top: 7px; }
  .v-grid .sp-tags--row { margin-top: 5px; min-height: 0; }
  .v-grid { gap: 16px; }

  /* ── 상세 필터를 하단 시트로 ──────────────────────────────────────────
     세로로 길게 쌓이던 조건들을 화면 아래에서 올라오는 시트에 담는다.
     시트가 열려 있는 동안 뒤 목록은 스크롤되지 않아야 한다(js/search.js 가 잠근다). */
  .filters__sheet.is-open {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 520;
    margin: 0; border-radius: 16px 16px 0 0; border: none;
    max-height: 82dvh; display: flex; flex-direction: column;
    box-shadow: 0 -14px 40px -12px rgba(15, 23, 42, 0.36);
    animation: fsheetUp 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes fsheetUp { from { transform: translateY(22px); opacity: 0.7; } to { transform: translateY(0); opacity: 1; } }
  .filters__sheet.is-open .filters__head { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 10px; border-bottom: 1px solid var(--line-2); flex: 0 0 auto; }
  .filters__head b { font-size: 1rem; font-weight: 800; }
  .filters__x { width: 32px; height: 32px; border-radius: 50%; color: var(--muted); font-size: 0.9rem; }
  .filters__x:hover { background: var(--surface-2); }
  .filters__sheet.is-open .filters__body { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch;
    flex: 1 1 auto; padding: 2px 18px 10px; }
  .filters__body .filt { padding: 14px 0 6px; border-bottom: 1px solid var(--line-2); }
  .filters__body .filt:last-child { border-bottom: none; }
  .filters__foot { padding: 10px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--line-2);
    background: var(--surface); flex: 0 0 auto; }
  .filters__foot .btn { flex: 1; min-width: 0; }
  .filters__backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 515;
    background: rgba(15, 23, 42, 0.42); animation: adFade 0.2s ease; }

  /* ── 맞춤업체: 상단 여백 축소 ── */
  .vbud input { width: 74px; padding: 7px 8px; font-size: 0.8rem; }
  .v-grid .v-card__body { padding: 12px 13px 13px; gap: 6px; }
  .v-card__blurb { -webkit-line-clamp: 2; min-height: 0; font-size: 0.82rem; }
  /*  품목 칩은 반드시 한 줄 — 재 보니 캡션(58px) + 긴 품목명 2개 + '+N종' 이 330px 를
      넘어 3줄(61px)이 됐다. 캡션 글자를 접고 칩 폭을 묶어 한 줄로 확정한다. */
  .v-card__rates, .v-card__items { flex-wrap: nowrap; gap: 5px; margin: 3px 0; overflow: hidden; }
  .v-card__itemcap { flex: 0 0 auto; }
  .v-cap__t { display: none; }
  .v-rate, .v-item { min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
  .v-item { max-width: 122px; text-overflow: ellipsis; }
  .v-rate { padding: 4px 8px; gap: 3px; }
  .v-rate em { max-width: 62px; }
  .v-rate--more, .v-item--more { flex: 0 0 auto; max-width: none; }

  /* ── 견적요청: 머리말·스태퍼 압축 ── */
  .hostreg { padding: 14px 16px 76px; }
  .hostreg__head { margin-bottom: 14px; }
  .hostreg__title { font-size: 1.42rem; }
  .hostreg__sub { font-size: 0.86rem; }
  .wz-bar { margin-bottom: 18px; gap: 2px; }
  .wz-i__l { font-size: 0.76rem; }
  .wz-i__line { max-width: 20px; }

  /* ── 하단 고정물 정렬 ─────────────────────────────────────────────────
     내비 위에 챗봇·퀵메뉴·토스트를 층으로 올려 서로 겹치지 않게 둔다. */
  body { padding-bottom: calc(var(--mnav-h) + var(--safe-b) + 6px); }
  .mnav { padding: 6px 4px calc(6px + var(--safe-b)); }
  .cw { right: 12px; bottom: calc(var(--mnav-h) + var(--safe-b) + 12px); }
  .qm { left: 12px; bottom: calc(var(--mnav-h) + var(--safe-b) + 12px); }
  .toast { bottom: calc(var(--mnav-h) + var(--safe-b) + 14px); width: max-content; max-width: calc(100vw - 32px); }
  /*  아래에 막대가 뜨는 화면에서는 그 위로 한 층 더 올린다 — 비교바·예약바가
      챗봇 버블에 가려 눌리지 않던 문제. :has() 로 막대가 있을 때만 올린다. */
  .cmpbar { bottom: calc(var(--mnav-h) + var(--safe-b) + 10px); }
  body:has(.cmpbar) .cw, body:has(.bk-mobar) .cw { bottom: calc(var(--mnav-h) + var(--safe-b) + 74px); }
  body:has(.cmpbar) .qm, body:has(.bk-mobar) .qm { bottom: calc(var(--mnav-h) + var(--safe-b) + 74px); }
  .bk-mobar { bottom: calc(var(--mnav-h) + var(--safe-b)); }
  /*  마지막 카드·버튼이 버블에 가리지 않도록 목록 끝에 버블만큼 자리를 준다 */
  .v-grid, .mapg { padding-bottom: 8px; }
  .wz-nav { padding-bottom: 4px; }
  .cw__bubble { width: 48px; height: 48px; }
  .cw__bubble svg { width: 23px; height: 23px; }
  /*  목록을 아래로 훑는 동안 버블이 비켜선다 (js/auth.js 의 bubbleYield).
      완전히 사라지지는 않는다 — 물어볼 창구가 안 보이면 없는 것과 같다. */
  .cw.cw--yield { transform: translateX(30%); opacity: 0.42; }
  .cw { transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s; }
}

/*  아주 좁은 화면 — 결과 줄을 **접지 않고 조여서** 한 줄을 지킨다.
    ⚠ 이 블록은 위 "모바일 정돈"(@media 760px) **뒤**에 있어야 한다. 앞에 두면
      그쪽의 .v-listhead{flex-wrap:nowrap} 이 순서로 이겨 무효다(실측으로 겪었다).
    ⚠ 접는 쪽보다 조이는 쪽을 골랐다 — 접으면 상단이 다시 4줄이 된다.
      값은 실측으로 골랐다(360px 에서 한 줄 · 잘림 0). 340px 아래는 접는다. */
@media (max-width: 400px) {
  /*  실측 부족량(2026-08-21): 390px 6px · 375px 21px · 360px 32px · 344px 48px.
      그만큼을 **여백에서** 걷어낸다 — 글자를 지우거나 아이콘만 남기지 않는다
      ("아이콘만 있는 버튼은 무엇을 하는지 모른다" 는 이 프로젝트의 함정). */
  .v-listhead { gap: 6px; }
  .v-listhead__l { gap: 5px; }
  .v-listhead .qsw { gap: 5px; }
  .v-listhead .results__tools { gap: 5px; }
  .v-listhead .viewtoggle__b { padding: 6px 7px; }
  .v-listhead .results__sort .filt__sel { padding: 7px 4px; }
}
/*  그래도 모자라는 폭(≤350px)에서는 접는다 — 잘려서 못 읽는 것보다 두 줄이 낫다. */
@media (max-width: 350px) {
  .v-listhead { flex-wrap: wrap; }
  .v-listhead__l { flex: 1 1 100%; }
  .v-listhead .results__tools { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .cw { transition: none; }
  .cw.cw--yield { transform: none; opacity: 0.55; }
}

/*  아주 좁은 화면(360px 이하) — 지역 선택이 칩을 다 밀어내지 않게 한 번 더 줄인다 */
@media (max-width: 380px) {
  .v-region2 select, .v-region2 select:last-child { width: 74px; font-size: 0.76rem; padding: 9px 4px 9px 7px; }
  .v-morefilt { padding: 10px; }
}

/* ── 품목별 단가표 — 모바일에서는 표를 카드로 눕힌다 ─────────────────────────
   ⚠ 예전 문제: .vrate__t 에 width:100% 가 걸려 있어 .vrate__tw 의 가로 스크롤이
     절대 켜지지 않았다. 5칸(품목·단위·단가·수량·금액)이 340px 안에 억지로 눌려
     품목명이 두 줄로 쪼개지고("다과·/디저트"), '최소 10인 · 최소 1,010 원' 도
     줄이 깨졌다. 수량 입력칸(74px)이 폭을 잡아먹은 것이 결정타였다.
   해결: 한 줄을 두 단으로 접는다.
     1단 — 품목명(+최소 조건)      2단 — 단위 · 단가 · 수량 · 금액
   표 구조(thead/tbody/tr/td)는 그대로 두고 display 만 바꾼다. 머리글이 숨으므로
   각 칸에는 data-l 이름표를 붙인다(js/vendors.js). */
@media (max-width: 640px) {
  .vrate__tw { overflow-x: visible; }              /* 가로로 밀지 않고 접는다 */
  .vrate__t { width: 100%; display: block; }
  .vrate__t thead { display: none; }
  .vrate__t tbody { display: block; }
  .vrate__t tr {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 2px 10px; align-items: end;
    padding: 11px 13px; border-bottom: 1px solid var(--line);
  }
  .vrate__t tbody tr:last-child { border-bottom: 0; }
  .vrate__t td { display: block; padding: 0; border: 0; }
  .vrate__nm { grid-column: 1 / -1; margin-bottom: 5px; }
  .vrate__min { display: block; margin-top: 3px; line-height: 1.4; }
  /*  작은 이름표 — 값만 늘어놓으면 단가와 금액을 구별할 수 없다 */
  .vrate__t td[data-l]::before {
    content: attr(data-l); display: block;
    font-size: 0.64rem; font-weight: 700; color: var(--faint);
    letter-spacing: 0.02em; margin-bottom: 2px; white-space: nowrap;
  }
  .vrate__u { font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; }
  .vrate__p { font-size: 0.82rem; }
  .vrate__qc { justify-self: stretch; }
  .vrate__q { width: 100%; min-width: 54px; max-width: 96px; }
  .vrate__sum { justify-self: end; text-align: right; }
  .vrate__h { padding: 10px 13px; }
  .vrate__h span { font-size: 0.72rem; }
}
/*  아주 좁은 화면 — 단위·단가를 한 덩어리로 두고 수량·금액에 폭을 넘긴다 */
@media (max-width: 380px) {
  .vrate__t tr { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; }
  .vrate__u { grid-column: 1; }
  .vrate__p { grid-column: 2; }
  .vrate__qc { grid-column: 3; }
  .vrate__sum { grid-column: 1 / -1; justify-self: end; margin-top: 4px; }
  .vrate__sum::before { display: inline; margin-right: 5px; }
}

/* ── 가로로 흐르는 줄을 마우스로 끌 때 ─────────────────────────────────────
   js/dragscroll.js 가 끄는 동안 is-drag, 관성으로 흐르는 동안 is-glide 를 붙인다. */
.v-filterbar, .filtchips { cursor: grab; }
.v-filterbar.is-drag, .filtchips.is-drag,
.v-filterbar.is-glide, .filtchips.is-glide { cursor: grabbing; }
/*  끌 수 있는 줄에서는 글자가 잡히지 않게 — 드래그가 텍스트 선택으로 새면 안 끌린다 */
.v-filterbar, .filtchips { user-select: none; -webkit-user-select: none; }
/*  마우스로 끌 것이 없으면(내용이 다 보이면) 손 모양을 주지 않는다 */
.v-filterbar:not(.is-scrollable), .filtchips:not(.is-scrollable) { cursor: default; }

/*  모달이 열려 있는 동안에는 플로팅 버튼을 감춘다.
    ⚠ 모달(.modal z-index 400)보다 챗봇 버블(.cw z-index 500)이 위라서, 업체 상세의
      품목별 단가표에서 '금액' 칸을 버블이 덮고 있었다. 모달 안에서는 그 모달을 쓰는
      중이므로 플로팅 창구를 띄워 둘 이유가 없다. 닫으면 곧 돌아온다. */
body:has(.modal:not([hidden])) .cw,
body:has(.modal:not([hidden])) .qm { opacity: 0; pointer-events: none; }

/* ── 지역 선택 시트 (js/regionpick.js) ──────────────────────────────────────
   모바일은 아래에서 올라오는 바텀시트, PC 는 가운데 대화상자.
   ⚠ 셀렉트 박스로 시·도 17개 · 시·군·구 230개를 고르게 하던 걸 대신한다.
     손가락으로 고르는 화면에서 드롭다운은 목록이 길수록 나쁘다. */
.rgs { position: fixed; z-index: 620; background: var(--surface);
  display: flex; flex-direction: column; box-shadow: 0 -14px 40px -12px rgba(15, 23, 42, 0.36); }
.rgs[hidden] { display: none; }
.rgs__back { position: fixed; inset: 0; z-index: 615; background: rgba(15, 23, 42, 0.42); animation: adFade 0.2s ease; }
.rgs__back[hidden] { display: none; }
.rgs__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 11px; border-bottom: 1px solid var(--line-2); }
.rgs__head b { font-size: 1rem; font-weight: 800; }
.rgs__x { width: 32px; height: 32px; border-radius: 50%; color: var(--muted); font-size: 0.9rem; }
.rgs__x:hover { background: var(--surface-2); }
.rgs__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 18px 12px; }
.rgs__grp { padding: 12px 0 2px; }
.rgs__grp + .rgs__grp { border-top: 1px solid var(--line-2); }
.rgs__t { display: block; font-size: 0.78rem; font-weight: 800; color: var(--muted); margin-bottom: 9px; }
/*  큼직한 버튼 — 손가락으로 눌러도 빗나가지 않게 한 칸을 넉넉히 잡는다 */
.rgs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; }
.rgs__b { min-height: 44px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--ink-2);
  cursor: pointer; transition: border-color 0.13s, background 0.13s, color 0.13s;
  word-break: keep-all; line-height: 1.3; }
.rgs__b:hover { border-color: var(--accent); color: var(--accent); }
.rgs__b.is-on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px -5px rgba(79, 70, 229, 0.5); }
.rgs__grid--gu .rgs__b { font-size: 0.84rem; min-height: 42px; }
.rgs__foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 11px 16px calc(13px + var(--safe-b, 0px));
  border-top: 1px solid var(--line-2); background: var(--surface); }
.rgs__foot .btn { flex: 1; }

@media (max-width: 760px) {
  .rgs { left: 0; right: 0; bottom: 0; max-height: 82dvh; border-radius: 16px 16px 0 0;
    animation: fsheetUp 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .rgs__grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
}
@media (min-width: 761px) {
  /*  PC 는 가운데 대화상자 — 아래에서 올라오면 데스크톱에서는 어색하다 */
  .rgs { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 48px));
    max-height: min(72vh, 640px); border-radius: 16px; box-shadow: var(--shadow-lg); }
  .rgs__foot { justify-content: flex-end; }
  .rgs__foot .btn { flex: 0 0 auto; min-width: 124px; }
}

/* ── 칩 줄을 모바일에서 더 촘촘하게 ─────────────────────────────────────────
   간격과 안쪽 여백을 줄여 첫 화면에 카테고리가 더 많이 걸리게 한다. */
@media (max-width: 760px) {
  .v-filterbar { gap: 5px; }
  .v-filterbar > .chips { gap: 5px; }
  /*  ⚠ 두 페이지의 칩 클래스가 다르다 — 맞춤업체는 .chip(버튼), 공간찾기는
      .filt__chk(라디오 라벨)이다. 한쪽만 적으면 공간찾기 칩이 그대로 커 보인다. */
  .v-filterbar .chip, .v-filterbar .filt__chk { padding: 7px 10px; font-size: 0.8rem; }
  .rgchip { padding: 7px 9px; gap: 4px; }
  .rgchip__c { font-size: 0.66rem; }
  /*  화살표에 가려 칩이 안 보이지 않도록 줄 끝에 자리를 둔다 */
  .v-filterbar > .chips { padding-right: 34px; }
  .v-more { width: 28px; height: 28px; font-size: 1rem; }
  .v-filterrow::after { width: 46px; }
}

/*  챗봇 '← 처음으로' — 되돌아가기 버튼과 같은 줄에 두면 둘이 비슷해 보여 헷갈렸다.
    아래 줄의 작은 글자 링크로 뺀다(칩처럼 보이지 않게 테두리·배경을 없앤다). */
.cw-bothome { display: block; margin-top: 6px; }
.cw-bothome button { border: 0; background: none; padding: 2px 0; font: inherit;
  font-size: 0.74rem; font-weight: 600; color: var(--faint); cursor: pointer; text-decoration: underline; }
.cw-bothome button:hover { color: var(--accent); }
/*  되돌아가기 줄에 '처음으로' 가 함께 있던 시절의 여백을 정리 */
.cw-botq--nav + .cw-bothome { margin-top: 4px; }

/* ============================================================
   지도 페이지 — 조작을 지도 위로 올린다 (2026-08-10)
     재 보니 모바일에서 제목·탭·안내문이 위쪽 210px 를 먹어 지도가 523px 뿐이었다.
     탭과 카테고리 칩을 지도 위 떠 있는 패널로 올려 지도를 그만큼 넓힌다.
     ⚠ Tailwind 가 없는 저장소다. rounded-2xl / bg-white/90 같은 클래스는 존재하지
       않으므로 같은 결과를 값으로 직접 쓴다.
   ============================================================ */
.mapp__stage { position: relative; }
/*  지도 위에 얹는 것들의 층 — 패널·GPS 가 말풍선보다 아래에 있어야 핀을 눌러 열린
    말풍선이 가려지지 않는다. 네이버 말풍선은 지도 내부에서 그려진다. */
.mapctl { position: absolute; left: 12px; top: 12px; z-index: 3; max-width: calc(100% - 96px); }
.mapctl > * { margin: 0; }
/*  떠 있는 카드 — 반투명 흰 배경 + 배경 흐림.
    ⚠ 90% 로는 도로명 위에서 글자가 흐려 보였다. 92% 로 올리고 테두리를 얇게 넣어
      지도와 경계를 만든다. backdrop-filter 미지원 브라우저에서도 읽히는 값이다. */
.mapctl .promo-tabs, .mapctl .mapp__bar {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 22px -8px rgba(15, 23, 42, 0.28);
}
.mapctl .promo-tabs { padding: 5px; margin-bottom: 8px; width: max-content; max-width: 100%; }
.mapctl .promo-tab { padding: 8px 16px; font-size: 0.86rem; white-space: nowrap; }
/*  카드 안의 회색 트랙을 없앤다 — 카드 자체가 이미 배경이다 */
.mapctl .promo-tabs { background: rgba(255, 255, 255, 0.92); }
.mapctl .promo-tab.is-on { background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px -3px rgba(79, 70, 229, 0.55); }
.mapctl .promo-tab.is-on .ic { color: #fff; }
.mapctl .mapp__bar { padding: 7px 9px; border-top: 1px solid rgba(15, 23, 42, 0.08); }
.mapctl .mapp__cats { margin: 0; }

/*  우측 상단 '내 주변' — 원형(넓으면 알약) 버튼.
    ⚠ 공간 탭에서만 뜬다(js/map.js). 업체는 시·도 원으로 그려서 '내 주변' 이 뜻이 없다.
    ⚠ display 를 주므로 hidden 규칙을 따로 둔다 — 이 저장소에서 반복된 함정이다. */

/*  상태 안내 — 지도 왼쪽 아래 한 줄 배지. 누르면 전문이 펼쳐진다.
    ⚠ 전문을 늘어놓지 않는 이유: 지오코딩이 실패하면 5~6줄이 되어(경고 + 실패 건수 +
      NAVER_GEOCODE_KEY 안내) 지도의 4분의 1을 덮었다. 문제가 생긴 바로 그 순간에
      가장 나빠지는 구조였다. 그렇다고 감추면 호스트가 자기 공간이 왜 대략 위치로
      찍혔는지 알 수 없으므로, 배지는 항상 두고 전문은 한 번 눌러 본다. */
/*  ⚠ 지도 아래쪽 띠는 네이버 것이다 — 저작권(© NAVER Corp. /OpenStreetMap)과 축척·로고가
    거기 그려진다. 이용약관상 가려서는 안 된다. 실제로 bottom:12px 에 뒀더니 저작권 글자와
    축척을 561px² 덮고 있었다(좌표로 확인). 그 띠 위로 올린다. */
.mapnote { position: absolute; left: 12px; bottom: 32px; z-index: 3; max-width: calc(100% - 24px);
  display: flex; flex-direction: column; align-items: flex-start; }
.mapnote__sum { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 7px 12px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 6px 20px -8px rgba(15, 23, 42, 0.26);
  font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; text-align: left; }
.mapnote__sum:disabled { cursor: default; }
.mapnote__ic { display: inline-flex; flex: 0 0 auto; color: var(--faint); }
.mapnote__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapnote__c { flex: 0 0 auto; color: var(--faint); font-size: 0.9rem; transition: transform 0.18s; }
.mapnote:not(.has-more) .mapnote__c { display: none; }
.mapnote__sum[aria-expanded="true"] .mapnote__c { transform: rotate(90deg); }
/*  알아야 할 것이 있으면 주황으로 — 평소 안내와 구별된다 */
.mapnote.is-warn .mapnote__sum { border-color: rgba(180, 83, 9, 0.3); background: rgba(255, 251, 240, 0.96); color: #92400e; }
.mapnote.is-warn .mapnote__ic { color: #b45309; }
.mapnote__full { margin-bottom: 7px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 13px;
  background: var(--surface); box-shadow: 0 8px 26px -8px rgba(15, 23, 42, 0.3);
  font-size: 0.8rem; line-height: 1.6; color: var(--ink-2); max-width: 420px;
  max-height: 42vh; overflow-y: auto; }
.mapnote__full[hidden] { display: none; }

/*  지도를 더 크게 — 위쪽 자리를 비웠으니 그만큼 돌려준다 */
.mapp__head { margin-bottom: 12px; }
.mapp__canvas { height: calc(100vh - 190px); min-height: 520px; }

@media (max-width: 760px) {
  .mapp { padding: 14px 16px 76px; }
  .mapp__head { margin-bottom: 10px; }
  .mapp__title { font-size: 1.32rem; margin: 0; }
  .mapctl { left: 10px; top: 10px; max-width: calc(100% - 76px); }
  .mapctl .promo-tabs { padding: 4px; margin-bottom: 6px; }
  .mapctl .promo-tab { padding: 7px 12px; font-size: 0.8rem; }
  .mapctl .mapp__bar { padding: 6px 7px; }
  /*  좁은 화면에서는 글자를 접고 아이콘만 — 칩 줄과 폭을 다투지 않게 */
  .mapnote { left: 10px; right: 10px; bottom: 30px; max-width: none; }
  .mapnote__full { max-width: none; max-height: 38vh; }
  .mapp__canvas { height: 66dvh; min-height: 380px; border-radius: 14px; }
}

/*  겹쳐서 하나로 묶은 시·도 말풍선 — 지역별로 한 줄씩 눌러 내려갈 수 있게.
    ⚠ 묶은 숫자는 '중복을 뺀 업체 수' 라서 지역별 숫자의 합과 다를 수 있다.
      그 이유를 머리말에 적어 둔다(설명 없이 숫자만 두면 없는 업체를 세게 만든다). */
.maptip-grp { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; max-width: 250px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 13px;
  box-shadow: 0 8px 26px -8px rgba(15, 23, 42, 0.34); }
.maptip-grp__h { font-size: 0.7rem; font-weight: 600; color: var(--muted); line-height: 1.45; padding: 0 2px 3px; }
.maptip-grp__h b { color: var(--ink-2); font-weight: 800; }
.maptip-grp .maptip { margin: 0; width: 100%; }

/* ── 견적요청 1단계를 한 화면에 담는다 ──────────────────────────────────────
   실측: [다음 단계] 버튼 아래끝이 790px 여서 1440×900 은 겨우 들어오고
   1440×760(흔한 노트북)에서는 30px, 모바일 390×844 에서는 106px 넘쳤다.
   ⚠ 제목 압축은 .hostreg--rq 로 가둔다. .hostreg / .hostreg__title 은 사업자 등록·
     공간 등록과 공유하는 클래스라, 공통으로 줄이면 그 페이지 제목까지 작아진다. */
.hostreg--rq { padding-top: 22px; padding-bottom: 64px; }
.hostreg--rq .hostreg__head { margin-bottom: 16px; }
.hostreg--rq .hostreg__title { font-size: 1.7rem; margin: 2px 0 5px; }
.hostreg--rq .hostreg__sub { font-size: 0.9rem; line-height: 1.5; }
.hostreg--rq .wz-bar { margin-bottom: 18px; }
/*  제목 묶음과 '1분 가이드' 를 한 줄에 — 버튼이 아래로 붙으면 그만큼 폼이 밀린다 */
.hostreg__head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.hostreg__head--row > div { min-width: 0; }
.hostreg__head--row .guide-btn { flex: 0 0 auto; margin-top: 2px; }

@media (max-width: 760px) {
  /*  모바일은 한 줄에 두기엔 좁다 — 다시 쌓되 간격만 줄인다 */
  .hostreg__head--row { display: block; }
  .hostreg__head--row .guide-btn { margin-top: 10px; }
  .hostreg--rq { padding-top: 14px; }
  .hostreg--rq .hostreg__head { margin-bottom: 12px; }
  .hostreg--rq .hostreg__title { font-size: 1.34rem; }
  .hostreg--rq .wz-bar { margin-bottom: 14px; }
  .hf { padding: 18px 16px; }
  .hf-field { margin-bottom: 12px; }
  .hf-row { gap: 10px; }
  .wz-nav { margin-top: 14px; }
}

/* ── 휴대폰 인증 모달 (js/phoneverify.js) ─────────────────────────────────
   ⚠ 페이지의 #modal 을 빼앗지 않고 전용 레이어를 쓴다. 결제·마이페이지에는 이미
     다른 내용이 들어 있을 수 있어서, 공용 모달을 쓰면 뒤 화면이 사라진다.
   ⚠ z-index 는 채팅 위젯(.cw)보다 높아야 한다 — 인증 중에 챗봇 버튼이 위로 올라오면
     누를 수 있는 것처럼 보인다. */
.pv { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 20px; }
.pv__back { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); }
.pv__card { position: relative; width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px 18px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28); }
.pv__head { display: flex; align-items: center; margin-bottom: 6px; }
.pv__head b { flex: 1; font-size: 1.06rem; font-weight: 800; }
.pv__x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1rem; padding: 2px 4px; }
.pv__x:hover { color: var(--ink); }
.pv__why { margin: 0 0 14px; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.pv__lbl { display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
/* 입력칸과 버튼 높이를 44px 로 맞춘다(사업자 등록 폼과 같은 규칙) */
.pv__row { display: flex; align-items: center; gap: 8px; }
.pv__row input { flex: 1; min-width: 0; height: 44px; padding: 0 13px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: 0.94rem; font-weight: 600; color: var(--ink);
  background: var(--surface); outline: none; transition: border-color 0.15s; }
.pv__row input:focus { border-color: var(--accent); }
.pv__row .btn { flex: 0 0 auto; height: 44px; white-space: nowrap; }
.pv__step2 { margin-top: 12px; }
.pv__timer { margin-top: 6px; font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.pv__timer.is-over { color: #c0432c; }
.pv__msg { margin: 10px 0 0; font-size: 0.82rem; font-weight: 600; line-height: 1.5; color: var(--muted); min-height: 1.2em; }
.pv__msg--ok { color: #047857; }
.pv__msg--err { color: #c0432c; }
/* 테스트 모드 안내 — 실서비스에서 보이면 안 되는 것이므로 눈에 걸리게 둔다 */
.pv__msg--test { color: #92400e; background: rgba(245, 158, 11, 0.12); border-radius: 8px; padding: 7px 9px; }
.pv__note { margin: 12px 0 0; font-size: 0.75rem; line-height: 1.55; color: var(--faint); }
@media (max-width: 420px) {
  .pv__row { flex-wrap: wrap; }
  .pv__row .btn { width: 100%; }
}

/* ── 휴대폰 인증 안내 배너 (마이페이지 대시보드 맨 위) ────────────────────────
   ⚠ 이걸 붙이기 전까지 인증할 곳이 결제 화면 한 곳뿐이었다. 가입 안내 메일은
     '인증하면 3,000P' 라고 약속하는데 갈 자리가 없었다. */
.pvb { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 13px 15px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid transparent; }
.pvb__ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: #fff; }
.pvb__tx { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.pvb__tx b { font-size: 0.92rem; font-weight: 800; color: var(--ink); }
.pvb__tx em { font-style: normal; font-size: 0.79rem; line-height: 1.5; color: var(--muted); }
.pvb__tx em b { color: var(--accent); font-weight: 800; }
.pvb .btn { flex: none; }
/*  .pvb__btns 를 지웠다 — 방식 버튼을 배너에서 없애 배너 하나·버튼 하나로 합쳤다. */
/* 인증이 끝나면 조용해진다 — 할 일이 없는 안내가 계속 눈에 걸리면 안 된다 */
.pvb--ok { background: rgba(4, 120, 87, 0.08); border-color: rgba(4, 120, 87, 0.2); padding: 10px 14px; }
.pvb--ok .pvb__ic { width: 26px; height: 26px; border-radius: 8px; background: #047857; }
.pvb--ok .pvb__tx b { font-size: 0.86rem; }
@media (max-width: 480px) { .pvb .btn { width: 100%; } }

/* ── 요청 폼 연락처 — 인증된 번호 표시 (js/request.js phoneFieldSync) ─────────
   ⚠ 이 칸이 자유 입력이라, 휴대폰 인증을 마쳐도 검증 안 된 번호가 파트너에게 갔다. */
.rqp-tag { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; font-size: 0.77rem; font-weight: 600; color: var(--muted); }
.rqp-tag--ok { color: #047857; }
.rqp-tag--ok svg { color: #047857; vertical-align: -2px; }
.rqp-tag__re, .rqp-tag__go { border: 1px solid var(--line); background: var(--surface);
  border-radius: 7px; padding: 3px 9px; font: inherit; font-size: 0.75rem; font-weight: 700;
  color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.rqp-tag__re:hover, .rqp-tag__go:hover { border-color: var(--accent); background: var(--accent-soft); }
.rqp-tag em { font-style: normal; font-weight: 500; color: var(--faint); }
/* 인증된 번호는 고칠 수 없다 — 눌러도 안 바뀌는 칸임을 눈에 보이게 한다 */
.hf input.is-locked { background: var(--surface-2); color: var(--ink-2); cursor: default; }

/* ── 로그인 상태 유지 (login.html) ─────────────────────────────────────────
   ⚠ 기본 꺼짐이다. 켜 두면 공용 PC 에서 다음 사람에게 그대로 열려 있다.
     끄면 브라우저를 닫을 때 로그아웃된다(js/auth.js SESSGUARD). */
.lg-keep { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 14px; cursor: pointer; }
.lg-keep input { width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent); }
.lg-keep span { font-size: 0.84rem; font-weight: 600; color: var(--ink-2); line-height: 1.45; }
.lg-keep em { display: block; font-style: normal; font-size: 0.75rem; font-weight: 500; color: var(--faint); }

/* ── 모달과 하단 내비 (모바일) ──────────────────────────────────────────────
   ⚠ z-index 를 올리는 것만으로는 부족하다. 반투명 내비가 모달 아래에 깔려 있어도
     그 자리를 눌러 내비로 이동해 버리고, 모달 카드의 max-height 계산에도 내비 높이가
     빠져 있어 마지막 버튼이 화면 밖으로 밀린다.
   ⚠ 모달이 열려 있는 동안은 내비를 감춘다 — 모달 안에서 내비로 갈 일이 없고,
     감추면 카드가 쓸 수 있는 높이가 60px 늘어난다.
     `:has()` 는 이 파일이 이미 쓰고 있다(.biz-role:has(input:checked)). */
@media (max-width: 760px) {
  body:has(.modal:not([hidden])) .mnav,
  body:has(.pv) .mnav { display: none !important; }
  /*  모달이 열리면 body 아래 여백(내비 자리)도 필요 없다 — 남겨 두면 빈 띠가 보인다 */
  body:has(.modal:not([hidden])) { padding-bottom: 0; }
  /*  카드 높이 — 위아래 .modal 패딩(20px×2)을 뺀 만큼까지 쓴다. 86vh 로는 긴 폼(견적
      제출·업체 상세)의 마지막 버튼이 잘렸다 */
  .modal__card { max-height: calc(100vh - 40px - var(--safe-b)); }
  /*  ⚠ 제출 버튼이 카드 맨 아래에 붙으면 스크롤 끝까지 내려야 보인다. 아래 여백을
      조금 줘서 '더 있나?' 를 없앤다 */
  .modal__card { padding-bottom: 26px; }
}

/* ── 검색 버튼 글자 ────────────────────────────────────────────────────────
   데스크톱은 56×56 사각 버튼이라 아이콘만 들어간다. 모바일은 폭 340px 한 줄이 되는데
   돋보기만 있어서 무엇을 하는 버튼인지 알기 어려웠다 — 그쪽에만 글자를 보인다. */
.searchbar__go { gap: 7px; }
.searchbar__go-tx { display: none; font-size: 0.96rem; font-weight: 800; letter-spacing: -0.01em; }
@media (max-width: 760px) {
  .searchbar__go-tx { display: inline; }
}

/* 어드민 제출 서류 — 장수 표시 (공용 첨부 뷰어로 바꾸면서 추가) */
.ad-doc__t em { font-style: normal; font-weight: 600; color: var(--faint); font-size: 0.8rem; }
/* ⚠ 첨부 뷰어(.atv)는 z-index 9000 이라 하단 내비 위에 뜬다. 그래도 모바일에서
   내비가 카드 아래를 스치므로 열려 있는 동안 감춘다(모달과 같은 규칙). */
@media (max-width: 760px) {
  body:has(.atv:not([hidden])) .mnav { display: none !important; }
  body:has(.atv:not([hidden])) { padding-bottom: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   메인 히어로 개편 (2026-08-14)
     ① .hero2      어둡게 깐 배경 + 대형 카피 + '한번에' 밑줄
     ② .qwrap      견적 받기 카드 — 히어로 아래에 걸쳐 올라온다
     ③ .subnav     서브 탐색 — 1줄 검색바(.hsearch) + 원형 카테고리(.cats2)
   ⚠ 되돌리려면: git checkout pre-hero-2026-08-14 -- index.html css/style.css js/main.js
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 히어로 ──────────────────────────────────────────────────────────
   ⚠ 배경은 --hero-art 하나만 바꾸면 사진으로 교체된다. url("…") 로 바꿔도 위에 덮인
     '어둡게 하는 층' 은 그대로 살아 글자가 계속 읽힌다.                        */
.hero2 {
  --hero-art: linear-gradient(135deg, #312e81 0%, #4f46e5 48%, #7c3aed 100%);
  background-image:
    linear-gradient(180deg, rgba(10, 14, 40, .55) 0%, rgba(10, 14, 40, .72) 100%),
    var(--hero-art);
  background-size: cover;
  background-position: center;
  /*  ⚠ 위 패딩은 **데스크톱 전용 값**이다(모바일은 아래 미디어쿼리가 8px 로 덮는다).
      60px 였을 때 1280×800 첫 화면에 공간 카드가 **127px(카드 397px 의 32%)** 만 보였다 —
      히어로·검색·카테고리가 세로 542px 를 먹어서다. 히어로 자체를 없애지 않고
      여백만 깎아 카드를 끌어올린다.  */
  padding: 36px 20px 84px;
  text-align: center;
}
.hero2__copy {
  /*  ⚠ 한국어는 낱말 가운데서 끊기면 급격히 안 읽힌다("케 / 이터링").
      그리고 폭이 좁아져도 한 줄을 유지하려고 폭에 비례시킨다.               */
  word-break: keep-all;
  white-space: nowrap;
  margin: 0 auto;
  color: #fff;
  /*  ⚠ `white-space: nowrap` 이므로 **비례계수(vw)를 함께** 줄여야 한다 —
      상한(rem)만 낮추면 좁은 폭에서 계수가 이기며 넘친다.  */
  font-size: min(2.2rem, 2.9vw + .5rem);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.038em;
  text-shadow: 0 2px 18px rgba(8, 11, 30, .45);
}
.hero2__sub {
  margin: 14px auto 0;
  max-width: 34em;
  color: rgba(255, 255, 255, .85);
  font-size: 1.02rem;
  font-weight: 500;
  text-wrap: balance;
}
/*  '한번에' 밑줄 — 형광펜 배경칠은 쓰지 않는다. 어두운 배경에 연한 색을 깔면
    강조하려던 그 단어가 가장 안 읽히게 된다.
    ⚠ 기본은 **그어진 상태**다. 애니메이션이 안 도는 판(두 번째 방문·움직임 줄이기)에서
      scaleX(0) 로 남으면 밑줄이 영영 안 보인다.                              */
.hero2__hl { position: relative; display: inline-block; }
.hero2__hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.08em;
  height: .14em;
  min-height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a5b4fc 0%, #e0e7ff 100%);
  transform: scaleX(1);
  transform-origin: left center;
}

/* ── ② 견적 받기 카드 ──────────────────────────────────────────────────
   ⚠ position:absolute 로 띄우지 않는다. 이 저장소는 겹침으로 크게 덴 적이 있다
     (.modal 400 < .mnav 480 → 하단 내비가 모달을 66px 가려 신고 세 건).
     음수 margin 으로 흐름 안에서 끌어올리면 같은 그림이면서 그 위험이 없다.   */
.qwrap {
  max-width: 960px;
  margin: -54px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.qcard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  border: 1.5px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #a78bfa 0%, #60a5fa 52%, #a78bfa 100%) border-box;
  padding: 16px 24px;
  box-shadow: 0 26px 64px -26px rgba(79, 70, 229, .38);
}
.qcard__t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.026em;
  color: var(--ink);
}
.qcard__badge {
  flex: 0 0 auto;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .02em;
  font-style: normal;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border-radius: 999px;
  padding: 3px 9px;
}
.qcard__s { font-size: .87rem; color: var(--ink-2); margin: -8px 0 0; }
.qcard__field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 50px;
  padding: 0 6px 0 20px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.qcard__field:focus-within { border-color: #c7d2fe; box-shadow: 0 0 0 4px rgba(99, 102, 241, .10); }
.qcard__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .89rem;
  color: var(--ink);
  outline: none;
}
.qcard__field input::placeholder { color: var(--faint); }
.qcard__go {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  height: 42px;
  padding: 0 22px;
  font-size: .89rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s ease;
}
.qcard__go:hover { background: #4338ca; }

/* ── ③ 서브 탐색 ──────────────────────────────────────────────────────── */
.subnav { max-width: 960px; margin: 0 auto; padding: 16px 20px 10px; }
/*  검색바 — 재방문자가 쓰러 오는 곳이라 눈에 띄어야 한다. 다만 견적 카드보다는
    약하게 둬서 위계가 뒤집히지 않게 한다(흐림 반경 견적 64 > 검색 20 > 카드 16). */
.hsearch {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid #c7d2fe;
  border-radius: 14px;
  height: 58px;
  padding: 0 8px 0 0;
  box-shadow: 0 6px 20px -8px rgba(79, 70, 229, .30);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.hsearch:hover, .hsearch:focus-within {
  border-color: var(--accent-2);
  box-shadow: 0 14px 32px -10px rgba(79, 70, 229, .42);
}
.hsearch__reg {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 100%;
  padding: 0 16px 0 18px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.hsearch__reg > svg:first-child { color: var(--accent); }
.hsearch__cv { color: var(--faint); display: inline-flex; }
.hsearch__div { width: 1px; height: 26px; background: var(--line); flex: 0 0 auto; }
.hsearch__kw { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 0 14px; }
.hsearch__ico { flex: 0 0 auto; color: var(--faint); }
.hsearch__kw input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  outline: none;
}
.hsearch__kw input::placeholder { color: var(--faint); }
.hsearch__go {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  height: 44px;
  padding: 0 22px;
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
/*  ⚠ 화면에서 뺀 유형·날짜·인원은 지우지 않고 감춘다 — js/main.js 의 제출 핸들러가
    .value 를 읽으므로 없애면 터진다. 감춘 select 를 상태 보관함으로 쓰는 방식은
    js/regionpick.js 가 이미 하는 것이다.                                     */
.hsearch__hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.cats2 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px 6px;
  margin-top: 12px;
}
.cat2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
}
.cat2__ic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cat2 > span:last-child { font-size: .79rem; font-weight: 600; color: var(--ink-2); }
.cat2:hover .cat2__ic {
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .45);
}

/* ── 애니메이션 ────────────────────────────────────────────────────────
   ⚠ 제목에는 투명도를 건드리지 않는다. 이 카피가 LCP 요소라 opacity:0 은
     '칠해진 것' 으로 세지 않아 페이드 시간이 그대로 LCP 에 더해진다.
     어절은 위치만 움직인다(감싼 상자가 잘라 준다).                          */
.hero2__w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero2__wi { display: inline-block; }
/*  ⚠ 길이는 눈에 걸리게 잡은 값이다. 처음엔 .42s + 시차 .055s(총 0.7초)였는데
    "애니메이션이 작동을 안 한다" 는 신고를 받았다 — 실측으로는 55.7px→0 이 정확히
    돌고 있었다. 너무 빨라 첫 페인트에 묻힌 것이다. 시차는 js/main.js 가 넣는다(.072s).
    이 값을 다시 줄이려면 눌러 보고 판단할 것 — 코드로는 '돈다' 로만 보인다.        */
.hero2.anim .hero2__wi { animation: hero2Word .52s cubic-bezier(.22, 1, .36, 1) both; }
.hero2.anim .hero2__hl::after { animation: hero2Draw .5s cubic-bezier(.4, 0, .2, 1) .95s both; }
.hero2.anim ~ .qwrap .qcard { animation: hero2Up .4s cubic-bezier(.4, 0, .2, 1) .68s both; }
.hero2.anim .hero2__sub { animation: hero2Up .4s cubic-bezier(.4, 0, .2, 1) .55s both; }
/*  폰트를 기다리는 동안(최대 400ms) 어절을 미리 내려 둔다 — 안 하면 '보였다가 뚝
    떨어진 뒤 올라온다' 는 깜빡임이 된다. js/main.js 가 붙이고 재생 직전에 뗀다.   */
.hero2.anim-wait .hero2__wi { transform: translateY(108%); }
.hero2.anim-wait .hero2__hl::after { transform: scaleX(0); }
@keyframes hero2Word { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes hero2Draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hero2Up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/*  ⚠ 전역 * { animation:none } 류 규칙은 가상 요소(::after)를 잡지 못한다 — 직접 끈다.
    그리고 끄기만 하면 어절이 잘린 채 남아 제목이 사라진다.                    */
@media (prefers-reduced-motion: reduce) {
  .hero2.anim .hero2__wi,
  .hero2.anim .hero2__hl::after,
  .hero2.anim .hero2__sub,
  .hero2.anim ~ .qwrap .qcard { animation: none; }
  /*  ⚠ anim-wait 도 함께 풀어야 한다 — 안 풀면 움직임을 껐을 때 제목이 내려간 채
      상자에 잘려 통째로 안 보인다(!important 는 위 규칙보다 뒤에 오게 두었다).  */
  .hero2__wi,
  .hero2.anim-wait .hero2__wi { transform: none; }
  .hero2__hl::after,
  .hero2.anim-wait .hero2__hl::after { transform: scaleX(1); }
}

/* ── 모바일 (이 파일의 기존 기준 760px 을 따른다) ──────────────────────
   ⚠ 하단 내비는 **66px** 다(60 이 아니다). 그래서 390×844 에서 쓸 수 있는 세로는
     844-66 = **778px**. 784 로 재면 카드 가격이 내비에 가린 것을 못 잡는다
     (CLAUDE.md 함정표 · 실제로 한 번 오진했다).
     첫 화면에 [카피 + 견적 카드 전체 + 목록 시작] 이 들어와야 하므로 여백을 깎는다.  */
@media (max-width: 760px) {
  .hero2 { padding: 16px 16px 34px; }
  .hero2__copy { white-space: normal; font-size: 1.3rem; line-height: 1.32; letter-spacing: -.03em; text-wrap: balance; }
  .hero2__sub { font-size: .79rem; margin-top: 5px; }
  .qwrap { margin-top: -34px; padding: 0 14px; }
  .qcard { padding: 13px 14px 14px; gap: 10px; border-radius: 20px; }
  .qcard__t { font-size: 1rem; }
  .qcard__s { font-size: .81rem; margin-top: -6px; }
  .qcard__field { height: 44px; padding: 0 5px 0 16px; gap: 8px; }
  .qcard__field input { font-size: .82rem; }
  .qcard__go { height: 36px; padding: 0 13px; font-size: .81rem; }

  .subnav { padding: 8px 16px 4px; }
  .hsearch { height: 50px; border-radius: 13px; padding-right: 6px; }
  .hsearch__reg { padding: 0 10px 0 12px; font-size: .87rem; gap: 5px; }
  .hsearch__regtx { display: none; }   /* 아이콘 + 화살표만 남긴다 */
  .hsearch__kw { padding: 0 9px; gap: 7px; }
  .hsearch__kw input { font-size: .86rem; }
  .hsearch__go { height: 40px; padding: 0 14px; font-size: .87rem; }

  /*  ⚠ 2026-08-24: 한 줄 가로 스크롤 → **2줄 4칸**. 스크롤 줄은 8종 중 4종만 보이고
      나머지 4종(케이터링·촬영장비·청소·기념품)은 **닿을 방법이 사실상 없었다** —
      스크롤바를 감췄고(scrollbar-width:none) dragscroll 대상도 아니라 마우스로도 못 끌고,
      더 있다는 표시가 아무 것도 없었다(실측 390px: scrollWidth 594 / clientWidth 358,
      4종이 화면 밖). 홈의 주 탐색인데 절반이 없는 것과 같았다.
    ⚠ 원래 주석의 걱정("2줄이 약 158px 를 먹어 목록을 화면 밖으로 밀어낸다")은 여기서는
      성립하지 않는다 — 모바일 압축 크기(아이콘 44px)로는 2줄이 +74px 이고, 목록 시작이
      y394 → 468 로 첫 화면(844) 안에 그대로 남는다. 재서 확인했다.
    ⚠ 8종이 4의 배수라 4칸 2줄이 딱 맞는다 — 종류가 늘면 다시 재야 한다.       */
  .cats2 {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 6px;
    margin-top: 10px;
  }
  .cat2 { gap: 6px; }
  .cat2__ic { width: 44px; height: 44px; }
  .cat2 > span:last-child { font-size: .7rem; }
}

/* ══ 메인 다듬기 (2026-08-18) ══════════════════════════════════════════════ */

/*  ① 유형별 그래픽 썸네일 — 사진이 없는 카드에 쓰는 '카테고리 그림'.
    ⚠ 사진처럼 보이면 안 된다. 데모 30곳은 가짜 재고라서 실내 스톡 사진을 붙이면
      진짜 매물과 구분이 안 된다. 큰 저채도 아이콘 + 사선 결로 '그림' 임을 남긴다.
    ⚠ 그림 마크업은 data/spaces.js 의 thumbArt() 한 곳에서만 만든다.
    ⚠ .sp-card__thumb 은 이미 aspect-ratio 4/3 · overflow:hidden 이라 레이아웃이
      밀리지 않는다(사진이 늦게 와도 CLS 가 없다). 그 값을 지우지 말 것.          */
.sp-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sp-art::before {
  content: ""; position: absolute; inset: -20%;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .075) 0 2px, transparent 2px 13px);
}
.sp-art__ic { position: absolute; right: -5%; bottom: -7%; color: rgba(255, 255, 255, .5); transform: rotate(-8deg); }
.sp-art__ic svg { width: 84px; height: 84px; }
/*  ⚠ 마크는 **좌하단**이다. 좌상단에 두었더니 '바로예약' 배지와 985px² 겹쳐
    배지가 위에 그려져(z-index) 워터마크가 통째로 가려졌다(실측 390px · 전 카드).
    좌상단=배지 · 우상단=찜 하트 · 우하단=유형 아이콘 이므로 남는 자리가 여기다.
    배지를 옮기거나 새 배지를 얹을 땐 겹침을 px² 로 다시 재 볼 것.               */
.sp-art__mark {
  position: absolute; left: 13px; bottom: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .92);
  letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
@media (max-width: 720px) {
  .sp-art__ic svg { width: 64px; height: 64px; }
  .sp-art__mark { left: 10px; bottom: 9px; font-size: .74rem; }
}

/*  ② 카테고리 원형 칩 호버 — 은은한 인디고 톤 + 아이콘·글자 강조.
    ⚠ 모바일에는 hover 가 없다. 여기 있는 것만으로 '누를 수 있음' 을 알리지 말 것
      (칩은 원래도 테두리·그림자로 눌리는 것처럼 보인다).
    ⚠ reduced-motion 예외를 아래에 함께 둔다 — 색은 남기고 움직임만 끈다.        */
.cat2 > span:last-child { transition: color .18s ease; }
.cat2:hover .cat2__ic,
.cat2:focus-visible .cat2__ic {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.cat2:hover > span:last-child,
.cat2:focus-visible > span:last-child { color: var(--accent); }
.cat2:focus-visible { outline: none; }
.cat2:focus-visible .cat2__ic { box-shadow: 0 0 0 3px rgba(79, 70, 229, .25); }
@media (prefers-reduced-motion: reduce) {
  .cat2__ic, .cat2 > span:last-child { transition: none; }
  .cat2:hover .cat2__ic, .cat2:focus-visible .cat2__ic { transform: none; }
}

/*  ③ 헤더 검색(.hsrch*)을 지웠다 — 사용자 지시 2026-08-21. index.html 의
    #hsrchBtn·#searchbar 와 js/main.js 의 headerSearch() 도 같은 날 함께 지웠다.
    ⚠ 되살릴 때는 셋을 같이 되살릴 것(하나만 두면 조용히 죽은 코드가 된다).
    ⚠ 아래 .header__inner{position:relative} 는 남겨 둔다 — 다른 절대배치 자식이
      이걸 기준으로 삼을 수 있어, 지웠다가 엉뚱한 것이 튀는 쪽이 더 나쁘다.  */
.header__inner { position: relative; }

/*  ④ 메인 첫 화면 — 죽은 여백만 깎는다(글자는 건드리지 않는다).
    실측 390×844(가용 778px) 기준으로 목록 시작 위치를 당긴 값이다:
      서브카피 제거 전 429px(1.06장) → 제거 후 405px(1.13장) → 여백 정리 후 아래 값
    ⚠ 여기서 더 당기려면 **글자를 줄여야 한다** — 제목(55px)이나 견적 카드(130px)를
      깎는 일이다. 그건 "견적을 첫 행동으로" 라는 우선순위와 맞바꾸는 결정이라
      임의로 하지 않는다. 값을 바꾸면 반드시 다시 재서 대조할 것.               */
@media (max-width: 760px) {
  .hero2 { padding-top: 8px; }
  .subnav { padding: 5px 16px 0; }
  .cats2 { margin-top: 6px; }
  #browse.section--browse { padding-top: 8px; }
}

/*  ⑤ 목록 카드가 화면 밖으로 잘리던 것 — 열이 벌어지는 원인을 막는다.
    ⚠ `repeat(2, 1fr)` 의 `1fr` 은 `minmax(auto, 1fr)` 이다. 그래서 **줄어들지 않는
      내용**이 있으면 그 열이 min-content 만큼 넓어진다. 실측 390×844:
        열 201px + 185px (합 396) > 목록 폭 354  →  오른쪽 카드가 화면을 24px 넘어
        카드 31장 중 **15장이 잘렸다**. body 가로 스크롤도 없어 넘친 가격·찜 버튼을
        볼 방법이 아예 없었다(그래서 눈에 '카드가 반쯤 잘려 보인다' 로만 나타났다).
    ⚠ 열 개수를 breakpoint 마다 다시 쓰지 않는다 — 그리드 항목이 줄어들 수 있게
      `min-width: 0` 만 주면 4열·3열·2열 어디서나 같은 효과다(실측으로 골랐다).
    ⚠ 이 줄을 지우면 카드가 다시 잘린다. 목록 폭을 바꿀 땐 390px 에서 다시 재 볼 것. */
.grid > * { min-width: 0; }

/* ══ 파트너·호스트 마이페이지 모바일 배열 (2026-08-18) ═══════════════════════
   신고: "글씨 밀리고 줄맞춤 하나도 안 되어 보기 흉하다 · 칸이 각각 다르고 짤린다"
   실측 390×844 (고치기 전):
     · 탭 라벨이 쪼개졌다 — `품목 · 단가` 2줄 · `출장 · 배송비` **3줄**
     · 소제목 옆 설명이 제목 옆에서 시작해 문장 중간에서 끊겼다(2줄, 휴무는 **6줄**)
     · 라벨 줄수가 제각각 — `대여 시작가 1일 기준` 3줄 vs `최소 주문금액` 1줄
       → 입력 박스 아래끝이 어긋나 줄맞춤이 깨졌다
     · `.book__field` 가 고정 190px 이라 190×2+14=394 > 316 → 2+1 로 들쭉날쭉
   ⚠ 고칠 때는 반드시 다시 재서 대조할 것(scratchpad vpmeas.mjs). 눈대중으로는
     "탭이 3줄" 같은 것을 못 잡는다.                                          */
@media (max-width: 760px) {
  /*  ① 소제목 아래 설명은 **별도 줄**이다.
      제목을 flex(블록 레벨)로 만들어 한 줄을 차지하게 하고 설명을 그 아래로 내린다.
      inline-flex + margin-left 로 옆에 붙이면 문장이 중간에서 끊긴다.          */
  .mg-sec .mg-h { display: flex; }
  .mg-sec__desc { display: block; margin-left: 0; margin-top: 3px; line-height: 1.5; }

  /*  ② 탭 라벨은 쪼개지 않는다 — 넘치면 가로로 굴린다(칩 줄과 같은 방식).      */
  .promo-tabs { overflow-x: auto; scrollbar-width: none; max-width: none; }
  .promo-tabs::-webkit-scrollbar { display: none; }
  .promo-tab { flex: 0 0 auto; white-space: nowrap; padding: 9px 13px; font-size: .84rem; gap: 5px; }

  /*  ③ 입력 칸 — 균등 2열 · 박스 아래끝 정렬.
      ⚠ minmax(0,1fr) 이어야 한다. 1fr 은 minmax(auto,1fr) 이라 줄지 않는 내용이
        열을 벌린다(메인 카드가 잘렸던 것과 같은 원인).
      ⚠ align-items:end 로 **박스 하단**을 맞춘다 — 라벨이 1줄이든 2줄이든
        입력칸이 나란히 놓인다(라벨을 잘라 내는 것보다 정보가 안 사라진다).     */
  .mg-sec .book__row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px; align-items: end;
  }
  .mg-sec .book__row > .book__field { width: auto; min-width: 0; margin-bottom: 0; }
  .mg-sec .book__field > .mg-unitfield,
  .mg-sec .book__field > input[type="date"],
  .mg-opscol--rules .book__field > .mg-unitfield { max-width: none; }

  /*  ④ 라벨 안의 부제(1일 기준 · 비우면 무제한 · 며칠 전까지 주문)를 **아랫줄**로.
      한 줄에 밀어 넣으면 3~5줄로 접혀 칸마다 높이가 달라진다.                 */
  .mg-sec .book__label { line-height: 1.35; }
  .mg-sec .book__label > span { display: block; margin-top: 1px; font-size: .71rem; font-weight: 500; }

  /*  ⑤ 날짜 입력이 테두리를 넘던 것.
      ⚠ iOS 사파리는 date 입력에 자체 최소 폭을 준다 — 크롬 에뮬레이션에서는
        재현되지 않아 실측에 안 잡혔다(신고 스크린샷으로만 보였다).
        appearance 를 끄고 폭을 못 박아야 컨테이너 안에 들어온다.               */
  /*  ⚠ appearance:none 을 주지 말 것. 넘침은 막히지만 **날짜 선택기 아이콘이 사라져**
      회원이 어떻게 고르는지 모른다(실측: 정산 화면의 첫 date 가 빈 사각형으로 보였다).
      ⚠ 아래 min-width:0 · max-width:100% 는 **넘침을 못 막는다**(여기 그렇게 적혀
        있었지만 비교견적 모달의 날짜 칸이 그 상태로 22px 넘쳤다 — 2026-08-19).
        상자만 클램프되고 iOS 는 네이티브 내용을 밖으로 그린다. 유일한 대응은
        **칸을 컨트롤이 요구하는 폭(≈134px) 이상으로 주는 것**이다.
        점검은 min/max-width 를 걷어낸 min-content 로 한다 — 칸 폭만 재면 통과로
        보인다(.cmp-controls 주석 참조).                                        */
  input[type="date"], input[type="time"] {
    width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  }

  /*  ⑥ 힌트 줄은 본문 폭을 넘지 않게(긴 안내가 옆으로 삐져나오던 자리)         */
  .mg-sec .hf-hint { display: block; line-height: 1.5; }
}

/*  ⑦ 가로로 굴리는 탭 줄이 **잘린 채 끝나** 더 있는지 모른다.
    실측: 파트너 상단 탭이 "연동 현" 에서 잘려 있었다(스크롤은 되지만 표시가 없다).
    오른쪽에 옅은 페이드를 얹어 '더 있다' 를 알린다 — 스크롤 자체는 그대로다.
    ⚠ mask 는 클릭을 막지 않는다(배경 그리기라 pointer-events 와 무관).          */
@media (max-width: 760px) {
  .mp-body .mp-tabs, .promo-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  /*  끝까지 굴렸을 때는 페이드를 지운다 — 다 봤는데 흐리면 오히려 고장으로 보인다  */
  .mp-body .mp-tabs.is-end, .promo-tabs.is-end { -webkit-mask-image: none; mask-image: none; }
}

/*  확정 취소 — 확정된 분야의 접힌 줄에 바로 둔다.
    ⚠ 전에는 펼친 뷰(quoteRow) 안에만 있어 두 단계를 펼쳐야 나왔다(회원이 못 찾는다).
      되돌리는 길은 한 번에 보여야 한다.                                        */
.rfp-cat__undo { margin-left: 6px; padding: 4px 9px; font-size: .76rem; color: var(--muted); }
.rfp-cat__undo:hover { color: var(--danger, #b5563b); border-color: currentColor; }

/*  입력 중에는 채팅 버블이 비켜선다.
    ⚠ 실측: 버블이 입력칸을 720px² 덮어 값이 가려지고, 그 자리를 누르면 채팅이 열렸다.
    ⚠ 치우지 않는다 — 흐리게 하고 클릭만 통과시킨다(창구는 늘 닿을 수 있어야 한다).
      입력에서 벗어나면 바로 돌아온다. 패널이 열려 있을 때는 건드리지 않는다.        */
/*  ⚠ pointer-events 를 끄지 말 것. 껐더니 이 상태에서 **버블을 누를 수 없었다** —
      입력 포커스를 먼저 풀어야 해서 두 번 눌러야 했다(창구는 한 번에 닿아야 한다).
      투명도만 낮추면 가려진 입력값이 비쳐 보이고 버블도 그대로 눌린다.          */
.cw.cw--away { opacity: .22; }
.cw.cw--away:has(.cw__panel:not([hidden])) { opacity: 1; }   /* 패널이 열려 있으면 흐리게 하지 않는다 */
@media (prefers-reduced-motion: reduce) { .cw.cw--away { transition: none; } }

/*  홈 목록 '더 보기' — 카드를 12장씩 끊는다.
    ⚠ 실측(2026-08-19): 34장을 통째로 그리면 문서 4,968px 중 격자가 3,428px(69%),
      모바일은 7,031px 중 5,156px(73%) 였다. 끝이 없어 보이고 바로 아래 플래그십
      섹션이 4,041px(모바일 5,551px)에 밀려 아무도 닿지 못했다.
    ⚠ 버튼은 가로로 넓게 — 목록 끝의 '쉼표' 역할이라 눈에 걸려야 한다.              */
.more-wrap { display: flex; justify-content: center; margin: 26px 0 4px; }
.more-wrap .btn { min-width: 240px; }
@media (max-width: 760px) {
  .more-wrap { margin: 18px 0 2px; }
  .more-wrap .btn { width: 100%; min-width: 0; }
}

/*  카드 위계 — 97% 에 붙는 배지는 정보가 아니라 잡음이다.
    실측(2026-08-19 · 공간 34곳):
      ★ 신규     33/34 (97%)  → 뺐다(후기가 있을 때만 별점을 보인다)
      바로예약    28/34 (82%)  → 초록 채움이 28장에 깔려 시끄러웠다 → 조용하게
      특가        2/34 ( 6%)  → 이대로 도드라져야 한다(빨강 유지)
      후기        1/34 ( 3%)  → 희소하므로 강한 신호
    ⚠ 배지를 더 붙이지 말 것. 갈리지 않는 신호를 늘리면 위계가 더 평평해진다.
    ⚠ 바로예약은 회원이 찾는 긍정 신호라 **지우지 않고** 무게만 낮춘다.            */
.sp-card__badge--now {
  background: rgba(5, 150, 105, .92); box-shadow: none;
  font-size: .7rem; padding: 5px 10px; font-weight: 700;
}
.sp-card__badge--now i { animation: none; box-shadow: none; width: 5px; height: 5px; }
/*  후기가 없으면 별점 자리가 비어 가격이 홀로 남는다 — 그게 더 읽기 쉽다.       */
.sp-card__foot { min-height: 26px; }

/*  히어로 — 견적 카드가 배너에 '걸쳐' 보이게 겹침을 맞췄다.
    ⚠ 겹침은 `.hero2` 의 padding-bottom 이 아니라 **`.qwrap` 의 음수 마진**이 정한다.
      음수 마진은 배너 하단 기준이라 padding 을 키우면 카드도 같이 내려간다
      (실측: padding-bottom 84→110 으로 키워도 겹침 32% 그대로였다).
      그래서 둘을 함께 움직여야 한다 — 겹침 = 끌기 ÷ 카드높이.
    ⚠ 실측 근거 (2026-08-19):
        데스크톱 카드 168px · 끌기 -54 → 겹침 32%(113px 가 배너 밖) — 흘러내려 보였다
                  끌기 -84 + 배너아래 118 → 겹침 50% · 제목아래 34 · 목록 581→585
        모바일   카드 130px · 끌기 -34 → 겹침 26% · 제목아래 **0**(제목이 카드에 붙었다)
                  끌기 -65 + 배너아래 79 → 겹침 50% · 제목아래 14 · 목록 380→394
    ⚠ 값을 바꾸면 반드시 다시 재서 '겹침·제목아래·목록시작' 셋을 함께 볼 것.
      하나만 보고 고치면 다른 둘이 망가진다.                                      */
/*  ⚠ 2026-08-24: 겹침을 50% → **25%** 로 낮췄다. 사용자 신고 "히어로 배경이 카드 중간에서
      끊긴다" — 정확히 반이 걸치면 **가장 애매한 위치**라 의도한 겹침이 아니라 잘린 배경으로
      읽힌다(실측 모바일: 배너 y77~219 · 카드 y154~284 → 경계가 카드 130px 의 65px 지점,
      즉 정중앙을 가로질렀다). 25% 면 "카드가 배너 아래로 걸쳐 나왔다" 로 읽힌다.
    ⚠ 반대 방향(80% 이상)은 불가능하다 — 모바일 배너가 142px 인데 카드가 130px 여서,
      카드를 배너 안으로 더 넣으면 2줄 제목 + 부제가 들어갈 자리가 38px 밖에 안 남는다.
    ⚠ 겹침은 `.qwrap` 음수 마진이, 제목아래 여백은 `.hero2` padding-bottom 이 정한다
      (둘은 서로 독립이다). 끌기를 줄이면 카드가 내려가 제목아래가 자동으로 넓어진다 —
      padding 은 그대로 두었다.  */
/*  ⚠ 아래 패딩만 줄이고 **겹침(`.qwrap` 음수 마진)은 그대로 둔다.** 위 주석대로
    겹침이 카드 높이의 절반에 가까워지면 '의도한 겹침' 이 아니라 '잘린 배경' 으로 읽힌다.
    카드가 168 -> 142px 로 줄어 -42px 는 25% -> 29.6% 가 되지만 아직 안전한 구간이다
    (-56px 로 더 끌면 39% 로 그 경고 구간에 들어간다).  */
.hero2 { padding-bottom: 94px; }
.qwrap { margin-top: -42px; }              /* 카드 142px 의 29.6% */
@media (max-width: 760px) {
  .hero2 { padding-bottom: 79px; }
  .qwrap { margin-top: -32px; }            /* 카드 130px 의 25% */
}

/*  어드민 — 회계 항등식이 어긋날 때는 색으로도 알린다.
    ⚠ 전에는 --ok(초록) 하나뿐이라 초록 박스에 '불일치' 라고 적혀 신호가 모순됐다.
      게다가 항등식에서 카드·PG 수수료가 빠져 **늘 불일치**였다(실측 871,074원 = GMV×2.7%).
      매일 보는 화면이 항상 경고면 진짜 경고를 못 알아본다.                        */
.ad-note--warn {
  background: rgba(181, 86, 59, .08); border-color: rgba(181, 86, 59, .3); color: var(--ink);
}
.ad-note--warn > svg { color: #b5563b; }
.ad-note--warn b { color: #b5563b; }

/*  어드민 공지 입력 줄 — 모바일에서 '등록' 버튼이 34px 넘쳤다(실측 390px).
    ⚠ 줄을 감싸고 버튼을 한 줄 차지하게 둔다.                                     */
@media (max-width: 760px) {
  .ad-notice-form { flex-wrap: wrap; gap: 8px; }
  .ad-notice-form > * { min-width: 0; }
  .ad-notice-form .btn, .ad-notice-form #ntAdd { width: 100%; }
}

/* ══ 공간 1:1 예약 — 단일 페이지 (book.html) ═══════════════════════════════
   ⚠ 스텝 UI 를 두지 않는다. 공간·날짜·시간·인원은 URL 로 이미 왔다.
   ⚠ 우측 요약이 **금액의 유일한 진실원**이다. 좌측에는 금액을 그리지 않는다 —
     두 곳에 그리면 회원이 본 금액과 실제 예약 금액이 갈린다(과거 사고).
   ⚠ 모바일에서는 sticky 요약을 그대로 둘 수 없다. 하단 고정 바(금액+버튼)로 바꾸고
     요약 카드는 본문 흐름에 남긴다. 하단 내비(z 480) 위로 올린다(z 500).           */
.bk2 { max-width: 1180px; margin: 0 auto; padding: 30px 22px 96px; }
.bk2__head { margin-bottom: 22px; }
.bk2__title { font-family: var(--serif); font-size: 1.72rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.bk2__sub { margin: 0; color: var(--muted); font-size: .92rem; }
.bk2__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bk2__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/*  ⚠ 상자(배경·테두리·라운드·패딩)는 **.hf 가 그린다** — 여기 다시 쓰지 말 것.
    전에는 .bk2__card 가 .hf 와 똑같은 상자를 따로 선언했고, 마크업에 .hf 가 없어서
    `.hf input` 계열 규칙(width 100% · 44px · radius 10)이 **한 줄도 안 걸렸다**.
    폼 모양의 진실원을 둘로 두면 44px 계약이 한쪽만 고쳐져 어긋난다.  */
.bk2__h { font-size: 1.02rem; font-weight: 800; margin: 0 0 14px; letter-spacing: -.01em; }
.bk2__opt { font-weight: 500; font-size: .82rem; color: var(--faint); }
.bk2__note { margin: -4px 0 14px; font-size: .84rem; line-height: 1.6; color: var(--muted); }
.bk2__note b { color: var(--ink-2); font-weight: 700; }
.bk2__svc { display: flex; flex-wrap: wrap; gap: 8px; }
.bk2__svcit { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--ink-2); background: var(--surface); }
.bk2__svcit span { display: inline-flex; align-items: center; gap: 6px; }
.bk2__svcit input { width: 16px; height: 16px; min-width: 16px; flex: 0 0 16px; margin: 0;
  accent-color: var(--accent); cursor: pointer; }
.bk2__svcit:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.bk2__pm { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; padding: 12px 14px; border-radius: 11px;
  background: var(--surface-2); font-size: .84rem; line-height: 1.6; color: var(--ink-2); }
.bk2__pm span { color: var(--muted); }
.bk2__err { margin-top: 16px; }

/* 우측 요약 — sticky */
.bk2__side { position: sticky; top: 84px; min-width: 0; }
.bk2__sum { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 20px; box-shadow: var(--shadow); }
.bk2__sumtop { display: flex; gap: 13px; align-items: center; }
.bk2__thumb { flex: 0 0 auto; width: 74px; height: 56px; border-radius: 11px; overflow: hidden; background: var(--surface-2); }
.bk2__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk2__sumsp { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk2__cat { font-size: .72rem; font-weight: 800; color: var(--accent); }
.bk2__sumsp b { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.bk2__addr { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk2__slot { display: flex; flex-direction: column; gap: 5px; margin: 15px 0; padding: 13px 14px; border-radius: 12px; background: var(--surface-2); }
.bk2__slot span { display: inline-flex; align-items: center; gap: 7px; font-size: .855rem; font-weight: 600; color: var(--ink-2); }
.bk2__lines { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.bk2__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .875rem; color: var(--ink-2); }
.bk2__line em { font-style: normal; color: var(--faint); font-size: .8rem; }
.bk2__line b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk2__line--free b { color: var(--ok); }
.bk2__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 15px 0 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.bk2__total span { font-size: .9rem; font-weight: 700; }
.bk2__total em { font-style: normal; font-weight: 500; font-size: .76rem; color: var(--faint); }
.bk2__total b { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.bk2__hint { margin: 11px 0 0; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.bk2__hint b { color: var(--ink-2); font-weight: 700; }

.bk2__mobar { display: none; }
@media (max-width: 900px) {
  .bk2 { padding: 22px 16px 108px; }
  .bk2__grid { grid-template-columns: 1fr; }
  /*  ⚠ 모바일에서는 요약을 위로 올린다 — 무엇을 예약하는지가 입력보다 먼저 보여야 한다. */
  .bk2__side { position: static; order: -1; }
  .bk2__card { padding: 17px 16px; border-radius: 14px; }
  .bk2__title { font-size: 1.44rem; }
  /*  요약 카드의 버튼은 감춘다 — 하단 고정 바가 그 역할을 한다(버튼이 둘이면 어느 것을
      눌러야 하는지 모른다). 금액 내역은 그대로 보여준다.  */
  .bk2__sum #bkGo, .bk2__sum .bk2__hint { display: none; }
  .bk2__mobar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 22px -12px rgba(15,23,42,.28); }
  .bk2__mobar__l { display: flex; flex-direction: column; min-width: 0; }
  .bk2__mobar__l b { font-size: 1.06rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .bk2__mobar__l span { font-size: .74rem; color: var(--muted); }
  .bk2__mobar .btn { flex: 0 0 auto; }
}

/*  예약 요약의 경고 줄 — 최소 이용시간을 못 맞춘 것처럼 **서버가 거절할 조건**을 미리 알린다.
    ⚠ 버튼을 disabled 로 막지 않으므로(눌러도 무반응은 고장으로 느낀다) 이 줄이 유일한
      설명이다 — 눈에 걸려야 한다.                                                     */
.bk2__warn { display: flex; gap: 6px; margin: 8px 0 0; padding: 9px 11px; border-radius: 10px;
  background: #fff5f5; border: 1px solid #f7d4d4; color: #a3403f; font-size: 12.5px; line-height: 1.5; }
.bk2__warn svg { flex: 0 0 auto; margin-top: 2px; }

/*  예약 만료 기한 안내 — 서버(Cron)가 자동 취소하는 기한을 사람에게 알려 준다.
    ⚠ 회원·호스트에게 **서로 다른 문장**이 간다(누가 움직여야 하는지가 다르다) —
      대상에게 급한 쪽만 --warn 으로 세운다. 둘 다 강조하면 둘 다 안 읽는다.  */
.mp-bk__due { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; padding: 8px 11px;
  border-radius: 9px; background: var(--surface-2, #f6f7fb); color: var(--ink-2);
  font-size: 12.3px; line-height: 1.5; }
.mp-bk__due svg { flex: 0 0 auto; margin-top: 2px; }
.mp-bk__due b { color: var(--ink); font-weight: 800; }
.mp-bk__due--warn { background: #fff6ec; color: #9a5518; }
.mp-bk__due--warn b { color: #7c3f0c; }
.mp-bk__due--off { background: #f4f4f6; color: var(--muted); }

/*  홈 카드 목록 머리 — 제목이 없어 이 격자가 무엇인지 알 수 없었다(전체인지 · 고른
    카테고리 결과인지). 개수를 함께 적어 "왜 줄었지" 를 없앤다.
    ⚠ 오른쪽 '전체 보기' 는 카테고리를 눌러 좁힌 뒤 되돌아올 길이다 — 홈에는 필터를
      떼어낼 칩이 없어 한 번 좁히면 되돌릴 방법이 없었다.                          */
.browse__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 14px; }
.browse__t { margin: 0; font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.browse__n { font-size: .92rem; font-weight: 700; color: var(--faint); letter-spacing: 0; }
.browse__all { flex: 0 0 auto; font-size: .84rem; font-weight: 700; color: var(--accent); text-decoration: none; }
.browse__all:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .browse__head { margin-bottom: 10px; }
  .browse__t { font-size: 1.1rem; }
  .browse__n { font-size: .82rem; }
  .browse__all { font-size: .78rem; }
}

/* ══ 지도 2열 · 모바일 하단 시트 ══════════════════════════════════════════════
   전에는 지도 아래에 카드 격자를 통째로 쌓았다 — 실측 390px: 목록만 10,747px
   (12.7화면) · 페이지 전체 14.2화면. 지도를 보러 온 사람이 14화면을 스크롤해야
   끝났다. PC 도 같은 모양이었다(옆에 붙는 규칙이 CSS 에 한 줄도 없었다).
   ⚠ 목록 격자(.mapg)는 3열이다 — 좁은 오른쪽 열에서는 1열로 내려야 한다.
     그리고 `min-width:0` 을 함께 걸어야 한다(1fr 은 minmax(auto,1fr) 이라
     줄지 않는 내용이 있으면 열이 넘친다 — 검색 카드가 잘렸던 것과 같은 원인).
   ══════════════════════════════════════════════════════════════════════════ */
.mapp__split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mapp__side { position: sticky; top: 84px; display: flex; flex-direction: column;
  max-height: calc(100vh - 108px); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; overflow: hidden; }
.mapp__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 12px; }
.mapp__handle { display: none; }                 /* PC 에서는 손잡이가 필요 없다 */
.mapp__side .mapg { grid-template-columns: 1fr; }
.mapp__side .mapg > * { min-width: 0; }
.mapp__side .mapsec__h { position: sticky; top: 0; z-index: 2; margin: 0 -12px 10px;
  padding: 12px 12px 10px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
/*  오른쪽 열에서는 카드를 가로로 눕힌다 — 세로 카드는 1열에서 너무 길다(34장 × 210px).  */
.mapp__side .mapg__card { flex-direction: row; align-items: stretch; }
.mapp__side .mapg__thumb { flex: 0 0 96px; aspect-ratio: auto; }
.mapp__side .mapg__body { flex: 1 1 auto; }

@media (max-width: 1024px) {
  /*  ── 모바일·태블릿: 지도는 화면을 채우고 목록은 아래에서 올라온다 ─────────
      ⚠ 시트를 하단 내비(.mnav z-index 480) **아래**(470)에 두고 bottom 을 내비
        높이만큼 띄운다. 내비를 덮으면 지도 화면에서 다른 곳으로 갈 수 없다 —
        모달을 내비 위로 올린 것과는 반대 판단이다(모달은 흐름을 끝내야 닫힌다).
      ⚠ 높이는 세 단계로만 끊는다(peek·half·full). 자유 드래그만 두면 어중간한
        높이에서 지도도 목록도 못 보는 상태가 만들어진다.                      */
  .mapp__split { display: block; }
  .mapp__side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 470;
    max-height: none; border: 0; border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px -16px rgba(15, 23, 42, .28);
    transition: height .22s cubic-bezier(.4, 0, .2, 1); }
  .mapp__side[data-snap="peek"] { height: 92px; }
  .mapp__side[data-snap="half"] { height: 46vh; }
  .mapp__side[data-snap="full"] { height: calc(100vh - 132px); }
  .mapp__side.is-drag { transition: none; }        /* 끌 때는 손가락을 따라간다 */
  /*  ⚠ 손잡이는 **손가락으로 잡는 것**이다 — 44px 규칙을 지킨다. padding 만 줬더니
      높이가 **20px** 였다(실측). 얇으면 끌기가 시작되지 않아 "안 움직인다" 가 된다.
      ⚠ position:relative 가 필요하다 — 글자를 absolute 로 왼쪽에 붙이는데 없으면
        기준이 시트가 되어 스크롤 영역까지 내려간다.                              */
  .mapp__handle { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
    width: 100%; flex: 0 0 auto; padding: 10px 12px; border: 0; background: none;
    font: inherit; font-size: .82rem; font-weight: 800; color: var(--ink-2);
    cursor: grab; touch-action: none; }
  .mapp__grip { width: 40px; height: 5px; border-radius: 999px; background: var(--line); }
  .mapp__handlet { position: absolute; left: 16px; }
  .mapp__scroll { flex: 1 1 auto; padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  /*  ⚠ 손잡이가 이미 "공간 34" 를 말한다 — 시트 안 제목("대관 가능한 공간 34")은 같은
      말을 두 번 하고 45px 를 먹는다. 모바일에서만 감춘다(PC 에는 손잡이가 없어 그
      제목이 유일한 이름이다 — 지우지 말 것).                                     */
  .mapp__side .mapsec__h { display: none; }
  /*  지도를 크게 — 시트가 아래를 덮으므로 캔버스는 화면 높이에 맞춘다.  */
  .mapp__canvas { height: calc(100vh - 210px); min-height: 320px; }
}
@media (max-width: 760px) {
  .mapp__side[data-snap="full"] { height: calc(100vh - 96px); }
  /*  ⚠ 하단 내비 높이를 눈대중(62px)했다가 **4px 겹쳤다** — 시트가 내비를 덮으면
      지도 화면에서 다른 곳으로 갈 수 없다. 실측: 390×844 · 360×740 · 430×932
      **모두 66px** 로 일정하다(내용 높이가 고정이고 safe-area 만 더해진다).
      ⚠ 겹침은 "시트 bottom > 내비 top" 으로 재야 잡힌다 — 눈으로는 안 보인다.  */
  .mapp__side { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .mapp__canvas { height: calc(100vh - 236px); min-height: 300px; }
}

/*  지도 목록 카드 — 본문은 '지도에서 보기', 오른쪽 › 는 '상세로'.
    ⚠ 두 행동이 한 카드 안에 있으므로 **눌리는 자리가 갈린다는 것이 보여야** 한다.
      › 를 따로 세우지 않으면 회원은 카드를 눌러 상세로 갈 줄 알고 지도만 움직인다.
    ⚠ 카드가 button 이었는데 안에 button(›)을 넣을 수 없다(HTML 규칙 위반 · 중첩 버튼은
      브라우저가 밖으로 끌어낸다). div[role=button] + tabindex 로 바꿨다.               */
.mapg__card--pick { position: relative; cursor: pointer; text-align: left;
  padding-right: 34px; -webkit-tap-highlight-color: transparent; }
.mapg__card--pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mapg__go { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--faint); }
.mapg__go:hover { background: var(--surface-2, #f1f3f7); color: var(--accent); }
/*  지금 지도에서 비추고 있는 카드 — 목록으로 돌아왔을 때 어디를 봤는지 알 수 있게.  */
.mapg__card--pick.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, .14); }

/*  PG 지급대행 잔액 카드 (어드민 정산) — 이 화면의 다른 숫자는 전부 우리가 계산한 값이고
    이것만 **PG 가 알려준 실제 금액**이다. 그래서 따로 세워 구분한다.
    ⚠ 값을 못 받았을 때 0원으로 그리지 않는다 — 0 은 "잔액 없음", 못 받은 것은 "모름" 이다.
    ⚠ 클래스에 `ad-` 를 붙인다. 짧은 이름(.hl 처럼)은 다른 화면 규칙과 부딪힌 이력이 있다. */
.ad-pgbal { margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); }
.ad-pgbal__h { display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 800;
  color: var(--ink); margin-bottom: 10px; }
.ad-pgbal__h span { font-weight: 600; font-size: .78rem; color: var(--faint); }
.ad-pgbal__row { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-end; }
.ad-pgbal__i { display: flex; flex-direction: column; gap: 2px; }
.ad-pgbal__i span { font-size: .75rem; font-weight: 700; color: var(--muted); }
.ad-pgbal__i b { font-size: 1.18rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ad-pgbal__i b em { font-size: .78rem; font-weight: 700; color: var(--muted); font-style: normal; margin-left: 2px; }
.ad-pgbal__i--ok b { color: var(--accent); }
.ad-pgbal__at { display: inline-block; margin-top: 8px; font-size: .74rem; color: var(--faint); }
.ad-pgbal__wait { font-size: .82rem; color: var(--faint); }
.ad-pgbal__err { display: flex; gap: 7px; align-items: flex-start; padding: 9px 11px; border-radius: 9px;
  background: #fff6ec; color: #9a5518; font-size: .8rem; line-height: 1.5; }
.ad-pgbal__err svg { flex: 0 0 auto; margin-top: 2px; }
.ad-pgbal__code { color: #b07a4a; font-weight: 700; }
.ad-pgbal__tag { display: inline-block; margin: 8px 8px 0 0; padding: 2px 8px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; font-size: .7rem; font-weight: 800; }
.ad-pgbal #adPgBalRe, .ad-pgbal .btn--sm { margin-top: 8px; }

/* ══ 견적 요청 3단계 — 2026-08-25 정돈 ═══════════════════════════════════════
   실측(1440): 카드 1016px · 맨 아래 빈 여백 **306px**(모바일 509px) · 예산 셀렉트가
   880px 통짜에 체크박스가 옆에 매달림 · 스텝 2·3 이 opacity .5 로 흐림 ·
   [다음 단계] 가 disabled(cursor:not-allowed)라 눌러도 아무 반응이 없었다.
   ⚠ 카드 폭은 **줄이지 않았다.** 1단계가 짧아서 생긴 여백이라 폭을 줄이면 아래가 더
     비고 입력칸만 좁아진다 — 대신 폼을 세로로 가운데 두어 빈 자리를 위아래로 나눈다.
   ══════════════════════════════════════════════════════════════════════════ */
/*  지역 두 칸 — 한 줄 전체를 1:1 로 채운다(원래도 1:1 이었으나 오른쪽 절반 안이었다). */
.hf-region { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hf-region > select { min-width: 0; }        /* 1fr 은 minmax(auto,1fr) — 넘침 방지 */

/*  예산 — 셀렉트를 반 폭으로 줄이고 '협의 가능' 을 그 옆에 나란히.  */
.rq-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/*  ⚠ flex-basis 200px 였더니 반 폭 칸(478px)에서 394+73+10=477 로 아슬아슬하게 넘쳐
    체크박스가 아래로 접혔다(실측). 0 으로 두고 줄어들게 한다.                   */
.rq-budget > #rqBudgetRange { flex: 1 1 0; min-width: 120px; }
.rq-flex { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.rq-flex input { width: 16px; height: 16px; min-width: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/*  스텝 — .5 는 "못 간다" 로 읽힌다. .75 로 올리고, **지나온 단계는 눌러서 돌아갈 수**
    **있다는 신호**를 준다(밑줄 + 손가락 커서). 그게 흐림보다 본질이다.              */
.wz-i.is-go { opacity: .75; }
.wz-i.is-done { opacity: 1; cursor: pointer; }
.wz-i.is-done .wz-i__l { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line); }
.wz-i.is-done:hover .wz-i__l { text-decoration-color: var(--accent); color: var(--accent); }

/*  ⚠ '다음 단계' 를 disabled 로 만들지 않는다(js/request.js 주석 참조). 덜 채워졌을 때는
    색만 낮춰 알리고 **누를 수 있게** 둔다 — 누르면 무엇이 빠졌는지 말해 준다.
    opacity 를 쓰지 않는 이유: 흐린 버튼은 '못 누른다' 로 읽힌다.                    */
.btn.is-wait { background: var(--accent-soft, #eef2ff); color: var(--accent);
  border: 1px solid #c7d2fe; box-shadow: none; }
.btn.is-wait:hover { background: #e0e7ff; }

/*  1단계가 짧아 생기는 하단 빈 공간 — 폼을 세로 가운데로 둔다.                      */
@media (min-width: 761px) {
  /*  ⚠ 선택자를 `.rq-wrap` 으로 짚었는데 이 페이지 래퍼는 **`.hostreg--rq`** 다
      (실측: 아래 여백이 306 → 337px 로 오히려 늘었다 = 규칙이 안 걸렸다).
      `.hostreg` 전체에 걸지 않는다 — host.html(공간 등록)도 같은 클래스를 쓰는데
      그쪽은 폼이 길어 중앙 정렬이 필요 없다.                                     */
  .hostreg--rq { min-height: calc(100vh - 150px); display: flex; flex-direction: column; justify-content: center; }
}

/* ══ /mypage 모바일 정돈 — 2026-08-25 ═══════════════════════════════════════
   실측(390×844): 날짜 필터 한 덩이가 **5줄 · 약 190px**(이용일 / 날짜 / ~ / 날짜 / 전체)
   이고 그 위에 탐색이 **3줄**(1차 탭 54 · 버튼 44 · 2차 탭 44) 쌓여, **첫 화면에 카드가**
   **한 장도 안 보였다**(첫 카드 y640 에서 반쯤 잘림).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /*  ⚠ 날짜칸이 330px 로 늘어난 원인은 이 파일의 모바일 공통 규칙
      `input[type="date"] { width:100% }` 다. 그래서 두 칸이 세로로 쌓였다.
    ⚠ **grid 로 두 칸을 나란히** 둔다 — 각 열이 (330-8)/2 = 161px 라 날짜 컨트롤의
      요구 폭(실측 135px)보다 넓다. 이게 핵심이다: `flex:1` 로 균등 분배하면 폭이
      135 아래로 내려갈 수 있고, 그러면 **iOS 가 내용을 칸 밖으로 그린다**
      (min-width:0·max-width:100% 로는 막히지 않는다 — 위 ⑤번 주석 참조).
    ⚠ 물결표(~)는 감춘다. 두 칸이 나란하면 범위로 읽히고, 대신 각 input 에
      aria-label(조회 시작일/종료일)을 달아 보조기술에서도 뜻이 남게 했다.        */
  /*  ⚠ **좁은 화면에서는 날짜칸을 한 줄에 하나씩** 둔다. 2열(390px 에서 163px)로 두었더니
      아이폰 13 Pro 에서 **칸이 서로 겹치고 폼 밖으로 나갔다**(사용자 신고 2026-08-25).
      크롬에서는 넘침 0 · min-content 135px 로 통과했다 — **이 결함은 크롬으로 재현되지**
      **않는다.** iOS 는 네이티브 날짜 내용을 상자 밖으로 그리고, 한글 날짜 표기의 요구
      폭이 크롬보다 클 수 있다.
    ⚠ 그래서 "요구 폭보다 넓게" 를 **여유 있게** 만족시킨다 — 한 줄에 하나면 330px 라
      어떤 표기가 와도 넘칠 수 없다. 5줄(190px) → 3줄(약 132px) 로 줄이는 데 그치지만
      겹쳐 보이는 것보다 낫다.
    ⚠ 2열 압축은 **441px 이상**(각 열 200px 이상 확보)에서만 쓴다.                   */
  .lf { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
    margin-bottom: 10px; padding: 10px; }
  .lf__t { grid-area: 1 / 1; }
  /*  (제거) 첫 판에서 물결표를 감추려 넣었던 `display:none` — 지금은 3열 가운데에 둔다. */
  .lf > .btn { grid-area: 1 / 2; justify-self: end; }
  /*  ⚠ 아이폰 사파리는 **값이 없는 date 를 완전히 빈 상자**로 그린다(크롬은
         '연도-월-일' 을 보여준다). 물결표까지 감추니 뜻 없는 흰 사각형 둘이 됐다.
      그래서 각 칸에 이름을 보여준다 — 이게 이번 신고의 진짜 원인이었다(폭이 아니었다). */
  /*  ⚠ 시작일·종료일을 **한 줄**에 둔다(사용자 요청). 3열 그리드라 라벨은 1~2열을
      차지하고 [전체]는 3열, 다음 줄에 [날짜] ~ [날짜] 가 자동 배치된다.
    ⚠ **`overflow: hidden` 이 마지막 보증이다.** iOS 는 네이티브 날짜 내용을 상자 밖으로
      그리므로(위 ⑤ 주석) 폭 계산만으로는 "폼 옆으로 나온다" 를 완전히 막을 수 없다.
      잘리는 것이 삐져나오는 것보다 낫다 — 사용자 신고가 정확히 그 증상이었다.
    ⚠ 글자와 좌우 여백을 줄여 컨트롤이 요구하는 폭 자체를 낮춘다(iOS 날짜칸의 요구 폭은
      font-size 에 비례한다). 이름표는 칸 위에 작게 둔다 — 빈 칸이 무엇인지 알아야 한다.  */
  /*  ⚠⚠ **`1fr` 이 원인이었다.** `1fr` 은 `minmax(auto, 1fr)` 이라 **줄어들지 않는 내용**이
      있으면 그 열이 min-content 만큼 넓어진다 — iOS 네이티브 날짜칸의 요구 폭이 그렇다.
      그래서 두 열이 컨테이너보다 넓어지고 오른쪽 칸이 카드 밖으로 밀렸다
      (사용자 신고 2026-08-25 · 검색 카드가 잘렸던 것과 **같은 원인**이다).
      `minmax(0, 1fr)` 로 바꿔야 열이 컨테이너 안에서 줄어든다.
    ⚠ `min-width: 0` 은 **그리드 아이템(.lf__f)과 input 둘 다** 필요하다 — 하나만 주면
      다른 쪽의 min-content 가 그대로 남는다.
    ⚠ `overflow: hidden` 은 그래도 남겨 둔다(마지막 보증). 다만 이제는 잘릴 일이 없다.  */
  .lf { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); overflow: hidden; }
  .lf__t { grid-column: 1 / 3; }
  .lf > .btn { grid-column: 3; justify-self: end; }
  /*  물결표는 **라벨이 아니라 칸의 세로 중앙**에 온다 — 라벨(약 16px)이 위에 있으므로
      아래에서 띄워 맞춘다. 라벨 기준으로 맞추면 물결표가 위로 붙어 보인다.          */
  /*  ⚠ **자동 배치에 맡기지 않는다.** 맡겼더니 열이 63.5 / 121 / 63.5 로 비대칭이 됐다
      (실측 320px: 첫 칸 64px · 둘째 칸 121px). 어느 칸이 어디 가는지 못 박는다.
      `.lf` 의 자식은 span(기간) · label · span(~) · label · button 이라 label 로 세면
      날짜 그룹만 정확히 집힌다.                                                    */
  .lf > label.lf__f:nth-of-type(1) { grid-area: 2 / 1; }
  .lf > .lf__sep { grid-area: 2 / 2; align-self: end; padding-bottom: 8px; color: var(--faint); }
  .lf > label.lf__f:nth-of-type(2) { grid-area: 2 / 3; }
  .lf__f { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
  .lf__dl { display: block; font-size: .68rem; font-weight: 800; color: var(--muted); margin-bottom: 3px; }
  .lf__d { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
    padding: 8px 6px; font-size: 13px; }

  /*  탐색 3줄 → 2줄. 버튼 줄은 목록 아래로 옮겼다(mypage.html 주석 참조).
      아래로 간 버튼은 폭을 나눠 한 줄에 둔다 — 목록 끝에서 누르는 자리다.        */
  .rfp-actions--foot { display: flex; gap: 8px; margin-top: 14px; }
  .rfp-actions--foot .btn { flex: 1 1 0; min-width: 0; }
  /*  1차 탭과 2차 탭 사이 간격을 줄인다 — 둘 다 '어디로 갈지' 라 붙어 있어야 한 묶음으로 읽힌다. */
  .mp-body .rfp-subtabs { margin-top: 8px; margin-bottom: 10px; }
}


/*  441~760px — 화면이 넉넉하면 날짜 두 칸을 나란히(각 열 200px 이상).
    ⚠ 390px 대(아이폰 13 Pro 포함)는 위 블록의 '한 줄에 하나' 를 그대로 쓴다.  */

/*  PC·태블릿 — 한 줄에 [기간] [시작] ~ [종료] [전체] 로 이미 읽힌다. 작은 이름표는
    감추고 래퍼만 흐름에 참여시켜 예전 모양을 그대로 둔다.                        */
@media (min-width: 761px) {
  .lf__dl { display: none; }
  .lf__f { display: flex; align-items: center; min-width: 0; }
}

/*  '담은 구성' — 한 줄로 붙어 나오던 문장을 품목·금액 표로 읽는다.
    ⚠ 저장값은 그대로다(파트너에게 가는 원문). 화면에서만 구조를 입힌다.
    ⚠ 품목명이 길면 이름만 줄이고 금액은 항상 보이게 — 금액이 잘리면 표의 뜻이 없다. */
.cmpo { margin: 10px 0 0; padding: 10px 12px; background: var(--surface-2, #f6f7fb);
  border: 1px solid var(--line-2); border-radius: 10px; }
.cmpo__h { font-size: .8rem; font-weight: 800; color: var(--ink-2); margin-bottom: 7px; }
.cmpo__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cmpo__l li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline; }
.cmpo__n { min-width: 0; font-size: .84rem; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmpo__a { font-size: .84rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmpo__c { grid-column: 1 / -1; font-size: .74rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.cmpo__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-2);
  font-size: .88rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.cmpo__t em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--faint); }
/* ── 취소·환불 규정 선택 (호스트 공간 등록 · 파트너 정보) ───────────────────────
   ⚠ 숫자(요율)는 JS 가 OPS.cancelPolicyText() 로 넣는다 — CSS·HTML 에 적지 않는다.
   ⚠ 라디오 하나가 반드시 켜져 있다(기본 std). 안 고른 상태를 만들지 않는다 —
      "필수 아님" 은 호스트가 신경 쓰지 않아도 된다는 뜻이고, 값이 비는 뜻이 아니다. */
/*  ⚠ 카드는 **flex column** 이다. 격자(.rtpl)가 같은 행의 카드를 stretch 로 같은 높이로
    만들고, 그 안에서 설명·목록이 순서대로 쌓인다.
  ⚠ 선택 표시로 **테두리 굵기를 바꾸지 않는다.** 굵기를 바꾸면 padding 을 같이 맞춰야
    하고 한쪽만 틀리면 카드가 1px 씩 흔들린다. 대신 안쪽 링(box-shadow inset)을 겹친다 —
    박스 크기에 영향을 주지 않는다.
  ⚠ 라디오는 흐름 안(.rtpl__h)에 있다 — absolute 로 띄우면 제목과 세로 중심이 어긋난다. */
.rtpl__o { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; cursor: pointer; background: var(--surface);
  transition: border-color .15s, background .15s, box-shadow .15s; }
.rtpl__o:hover { border-color: var(--accent); }
.rtpl__o input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); }
.rtpl__o:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, rgba(0,0,0,.03));
  box-shadow: inset 0 0 0 1px var(--accent); }
.rtpl__h { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: .95rem; }
.rtpl__h b { font-weight: 800; }
/*  ⚠ 꽉 찬 색이던 것을 연한 톤으로 낮췄다 — 배지가 제목보다 강해 시선을 뺏었다. */
.rtpl__rec { font-size: .66rem; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft, #eef0fe); color: var(--accent); letter-spacing: .01em; margin-left: auto; }
.rtpl__s { display: block; margin-top: 2px; font-size: .74rem; color: var(--muted); }
.rtpl__t { display: block; margin-top: 6px; font-size: .73rem; line-height: 1.5; color: var(--ink); font-variant-numeric: tabular-nums; }
.rtpl__note { margin-top: 9px !important; }

/* 환불 타임라인 — 규정 이름·대상 (js/checkout.js refundTimeline) */
.co-refund__tpl { font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); margin-left: 2px; }

/* 공간 상세 — 취소·환불 규정 (js/space.js) */
.sp-rf { border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; margin-top: 12px; }
.sp-rf__h { display: flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.sp-rf__tpl { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.sp-rf__tl { display: flex; gap: 6px; overflow-x: auto; }
.sp-rf__step { flex: 1 1 0; min-width: 62px; text-align: center; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; }
.sp-rf__step b { display: block; font-size: .92rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-rf__step span { display: block; margin-top: 2px; font-size: .68rem; font-weight: 700; color: var(--muted); }
.sp-rf__n { margin: 10px 0 0; font-size: .76rem; line-height: 1.6; color: var(--muted); }
.sp-rf__n a { color: var(--accent); font-weight: 700; }
.sp-rf__d { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.sp-rf__step.is-now { border-color: var(--accent); background: var(--accent-soft); }
.sp-rf__step.is-now b { color: var(--accent); }

/* 환불 타임라인 머리줄 — 규정이 둘 이상일 때 대상 이름을 아랫줄로 (js/checkout.js) */
/*  ⚠ .co-refund__h span 이 D-day 알약을 스타일링한다(margin-left:auto). 그 안에 다른
      span 을 넣으면 그 규칙을 함께 받는다 — 대상 이름은 div 로 분리했다. */
.co-refund__h { flex-wrap: wrap; row-gap: 4px; }
.co-refund__tpl { white-space: nowrap; }
.co-refund__who { margin: -4px 0 9px; font-size: .74rem; font-weight: 600; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ /host 공간 등록 — 모듈형 카드 개편 (2026-08-25) ══════════════════════════
   ⚠ `.hf` 의 카드 껍데기(배경·보더·패딩)는 business.html · request.html 이 함께 쓴다.
      전역으로 벗기면 그 두 화면이 배경 없는 폼이 된다 — host 폼에만 `hf--split` 을 붙여
      껍데기를 옮긴다(카드는 자식 `.hf-card` 가 갖는다).
   ⚠ `.hf-chk`(2열 체크박스)도 business·request·mypage 가 함께 쓴다. 편의시설 칩은
      **새 클래스** `.hf-chip` 이다 — 기존 것을 고치면 세 화면이 같이 바뀐다.
   ⚠ 색은 하드코딩하지 않고 토큰을 쓴다. 스펙의 값과 이미 거의 같다
      (indigo-600 = --accent #4f46e5 · #E2E8F0 ≈ --line · slate-50 ≈ --surface-2). */
.hf--split { background: none; border: 0; border-radius: 0; padding: 0; }
.hf-card:last-of-type { margin-bottom: 20px; }
.hf-card__h { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.hf-card__h .ic { flex: none; width: 30px; height: 30px; padding: 6.5px; box-sizing: border-box; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.hf-card__s { margin: 0 0 18px; font-size: .82rem; color: var(--faint); line-height: 1.5; word-break: keep-all; }
.hf-card > .hf-field:last-child, .hf-card > .hf-notes:last-child { margin-bottom: 0; }

/*  안내 박스 — 회색 줄글(.hf-hint) 대신. 아이콘은 SVG(iconSVG)로 넣는다. */
.hf-tip b { color: var(--ink-2); font-weight: 700; }
.hf-tip .ic { flex: none; color: var(--accent); margin-top: 2px; }

/*  드롭존 */
.dropzone { border-radius: 16px; padding: 32px 20px; }
.dropzone__ic { display: flex; justify-content: center; color: var(--faint); transition: color .15s; }
.dropzone:hover .dropzone__ic, .dropzone:focus-visible .dropzone__ic, .dropzone.is-over .dropzone__ic { color: var(--accent); }
.dropzone__t { margin-top: 9px; }
/*  URL 붙여넣기 — 드롭존 바로 아래 컴팩트한 한 줄.
    ⚠ 드롭존 **안**에 넣을 수 없다. 드롭존은 role="button" 이라 클릭이 파일 선택창을
      열어 버려 URL 을 입력할 수 없다(스펙 문구도 '하단' 이다). */
.hf-urladd { margin-top: 8px; gap: 6px; align-items: center; }
.hf-urladd input { height: 38px; min-height: 38px; font-size: .84rem; font-weight: 500; }
.hf-urladd .btn { height: 38px; padding: 0 13px; font-size: .82rem; }

/*  썸네일 — 4:3 통일 · 대표 뱃지 좌상단 · 삭제는 호버 시 우상단 */
.ph-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ph-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.ph-thumb:hover { box-shadow: 0 4px 14px -4px rgba(15, 23, 42, .22); }
.ph-thumb.is-rep { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 1px 2px rgba(15, 23, 42, .06); }
.ph-thumb.is-drag { opacity: .45; transform: scale(.97); box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .3); }
.ph-thumb__rep { top: 6px; left: 6px; right: auto; bottom: auto; font-size: .66rem; padding: 3px 8px; letter-spacing: .01em; }
/*  ⚠ 항상 보이던 [✕] 글자를 지웠다. 호버(와 키보드 포커스)에서만 드러난다 —
      터치 기기에는 호버가 없으므로 coarse 포인터에서는 항상 보이게 둔다. */
.ph-thumb__x {
  top: 6px; right: 6px; width: 26px; height: 26px;
  background: rgba(15, 23, 42, .6);
  border: 0; padding: 0; cursor: pointer;
  opacity: 0; transform: scale(.9);
  transition: opacity .14s, transform .14s, background .14s;
}
.ph-thumb:hover .ph-thumb__x, .ph-thumb__x:focus-visible { opacity: 1; transform: scale(1); }
.ph-thumb__x:hover { background: #ef4444; }
.ph-thumb__x .ic { width: 15px; height: 15px; }
@media (hover: none) { .ph-thumb__x { opacity: 1; transform: none; } }

/*  편의시설 — 가로 나열 토글 칩 (기존 .hf-chk 2열 목록 대체)
    ⚠ 숨긴 체크박스를 그대로 둔다. checkedAmen() 과 수정 로드가
      `#hAmen input` 을 읽으므로 마크업에서 input 을 빼면 저장이 통째로 빈다. */
.ui-chip__x, .hf-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin: 0 -3px 0 1px; padding: 0;
  border: 0; border-radius: 50%; background: none;
  color: var(--faint); cursor: pointer; transition: background .14s, color .14s;
}
.ui-chip__x:hover, .hf-chip__x:hover { background: #fee2e2; color: #dc2626; }
.ui-chip__x .ic, .hf-chip__x .ic { width: 12px; height: 12px; }
/*  '기타 직접 추가' — 칩 줄 오른쪽에 자연스럽게 이어지는 인라인 입력 */
.ui-chipadd, .hf-chipadd { display: inline-flex; align-items: center; gap: 5px; }
.ui-chipadd input, .hf-chipadd input {
  width: 148px; height: 36px; min-height: 36px;
  padding: 0 11px; font-size: .84rem; font-weight: 500;
  border: 1px dashed var(--line-2); border-radius: 10px; background: var(--surface);
}
.ui-chipadd input:focus, .hf-chipadd input:focus { border-style: solid; border-color: var(--accent); }
.ui-chipadd .btn, .hf-chipadd .btn { height: 36px; padding: 0 11px; }

/*  환불 규정 카드 안 — 요율을 불릿 줄로 */
/*  환불율 목록 — 왼쪽 퍼센트 배지 · 오른쪽 기간의 2열 행.
    ⚠ 퍼센트는 `min-width` + 배지로 폭을 고정한다. 공백으로만 띄우면 자릿수가 다를 때
      (100% vs 70%) 세로 축이 삐뚤어진다.
    ⚠ 목록 위에 구분선을 둬 설명과 표를 눈으로 가른다. 카드가 stretch 로 늘어날 때
      `margin-top:auto` 가 목록을 아래로 밀지 않도록 위 여백은 고정값이다. */
.rtpl__ul { list-style: none; margin: 10px 0 0; padding: 9px 0 0; border-top: 1px solid var(--line-2, var(--line)); }
.rtpl__ul li { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 3px 0; font-size: .74rem; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rtpl__ul li + li { border-top: 1px solid var(--line-2, rgba(0,0,0,.045)); }
/*  ⚠ 폭은 **가장 넓은 글자(100%)** 기준이다. 3.4em 이던 동안 100% 만 넘쳐 배지 폭이
    [47px, 40px] 두 가지가 되어 세로 축이 어긋났다(실측). em 단위라 글꼴이 바뀌어도 따라간다. */
.rtpl__ul li b { flex: none; min-width: 4.15em; text-align: center; font-weight: 800; color: var(--ink);
  background: var(--surface-2); border-radius: 6px; padding: 1px 6px; }
.rtpl__ul li span { color: var(--muted); text-align: right; }
/*  0% 환불(당일·노쇼) — 회원이 가장 놓치기 쉬운 줄이라 경고색으로 세운다.
    ⚠ `li:last-child` 로 잡지 않는다. "마지막이 항상 0%" 라는 가정에 기대면 정책표가
      바뀔 때 조용히 틀린 색이 된다 — 마크업이 `is-zero` 로 알려 준다. */
.rtpl__ul li.is-zero b { background: rgba(226,64,47,.12); color: #c2352a; }
.rtpl__ul li.is-zero span { color: #c2352a; font-weight: 700; }
/*  ⚠ 선택 시 `border-width`·`padding` 을 바꾸던 규칙을 지웠다 — 이제 안쪽 링으로 그리므로
    박스 크기가 변하지 않는다(두 값을 같이 맞추지 않으면 카드가 흔들린다). */

/*  이용 안내 3종 — 스크롤 없이 여러 줄이 보이게 */
.hf-notes .hf-ta--tall { min-height: 140px; }
/*  아이콘 자리 — host.js fillIcons() 가 SVG 를 넣는다.
    ⚠ 버튼 안에서는 span 안만 채워야 글자가 살아남는다(HTML 에 적은 글자를 innerHTML 로
      덮어 지웠던 이력이 있다). .btn 이 gap:8px 이라 간격은 이미 맞다. */
.ic-slot { display: inline-flex; align-items: center; flex: none; }
.hf-card__h .ic-slot { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); justify-content: center; }
.hf-tip .ic-slot { color: var(--accent); margin-top: 2px; }
.hf-sublabel .ic-slot { color: inherit; }

/*  모바일 — 카드 패딩을 줄여 내용 폭을 되찾는다.
    ⚠ 스펙의 p:24px 는 넓은 화면 기준이다. 390px 에서는 카드 폭 358 중 48 을 패딩이 먹어
      내용이 310px 로 좁아진다(실측). 카드 4개면 높이도 그만큼 늘어난다. */
@media (max-width: 720px) {
  .ui-card, .hf-card, .mg-sec { padding: 18px 16px; margin-bottom: 16px; border-radius: 14px; }
  .ui-card__s, .hf-card__s { margin-bottom: 14px; }
}

/*  환불 규정 카드 — 열 수를 폭에 맡긴다 + 부제 높이를 맞춘다
    ⚠ `@media (min-width:720px)` 로 3열을 못 박아 두었더니, 폼 칸이 좁은 구간에서
      3열이 억지로 들어가 **카드 높이가 502px** 까지 커졌다(실측 780px: 부제가 5줄).
      화면 폭이 아니라 **담는 칸의 폭**이 기준이어야 한다 — auto-fit 이 그것이다.
    ⚠ 부제가 한 줄인 카드와 두 줄인 카드가 섞이면 불릿 시작이 어긋난다
      (실측 1440px: 유연·표준 64px · 엄격 81px = 17px 차이). 두 줄을 미리 비워 둔다. */
/*  ⚠ 이 `min-height` 가 **카드마다 목록 시작선을 맞추는 장치**다. 안내 줄 수가 1줄인
    카드와 2줄인 카드가 섞여 있어 이게 없으면 표의 상단이 제각각이 된다. 지우지 말 것. */
.rtpl__s { min-height: 2.9em; line-height: 1.45; }

/* ══ 파트너 [가격 · 할인] 탭 개편 (2026-08-25) ═════════════════════════════════
   ⚠ `.mg-unitfield` 는 37곳이 쓰고 padding-right 를 다섯 맥락에서 따로 잡는다
      (vp-row 30 · flashrow 34 · couprow 40 · 기본 44 · mg-band 32). 전역으로
      접미사 박스로 바꾸면 그 다섯이 다 흔들린다 — **`.mg-addon` 을 붙인 것만** 바꾼다.
   ⚠ 아래 override 들은 4813~4816 의 `.mg-sec .book__row > .book__field { width:190px }`
      계열이 새 그리드를 190px 로 묶어 버리기 때문에 필요하다(그 규칙이 이 파일 뒤쪽에 있다). */
.book__opt { font-weight: 500; color: var(--faint); font-size: 0.78rem; }

/*  2열 균등 그리드 — 들쑥날쑥한 190px 고정폭 대신 */
.mg-grid2__full { grid-column: 1 / -1; }
.mg-grid2 > .book__field { width: auto !important; margin-bottom: 0; }
.mg-grid2 .book__field > .mg-unitfield { max-width: none; }
@media (max-width: 520px) { .mg-grid2 { grid-template-columns: minmax(0, 1fr); gap: 13px; } }

/*  할인율 · 시작일 · 종료일 3열 균등 */
.mg-flash3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.mg-flash3 > .book__field { width: auto !important; margin-bottom: 0; }
.mg-flash3 .book__field > .mg-unitfield { max-width: none; }
/*  ⚠ 날짜칸을 일반 인풋과 같은 높이·패딩으로 맞춘다. 네이티브 date 는 자체 요구 폭이
      있어(iOS 133px · 크롬 145px) max-width 로 묶으면 넘친다 — 폭은 그리드가 준다. */
.mg-flash3 .book__field > input[type="date"] { max-width: none; width: 100%; height: 44px; min-height: 44px; padding: 0 12px; }
@media (max-width: 520px) { .mg-flash3 { grid-template-columns: minmax(0, 1fr); gap: 11px; } }

/*  단위를 인풋 안쪽 우측 접미사 박스로 (숫자와 단위가 한 덩어리로 보이게) */
.mg-addon input { flex: 1 1 auto; min-width: 0; padding-right: 12px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.mg-addon .mg-unit {
  position: static;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 46px; padding: 0 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top-right-radius: 10px; border-bottom-right-radius: 10px;
  font-size: 0.84rem; font-weight: 700; color: var(--muted);
  pointer-events: none; white-space: nowrap;
}
.mg-addon input:focus + .mg-unit { border-color: var(--ink); }

/*  저장 버튼 — 카드 하단 우측 · 브랜드 컬러
    ⚠ 4819 의 `.mg-sec .mg-sec__foot { justify-content: flex-start }` 를 되돌린다. */
.mg-sec .mg-sec__foot { justify-content: flex-end; }
.mg-sec__foot--in { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; }

/*  ⚠ 황토색·회색 그라디언트 제거 — 세그먼트 컨트롤은 '활성 = 흰 배경 + 음영' 하나로 둔다.
      브랜드 컬러가 아닌 색을 탭마다 다르게 주면 무엇이 활성인지가 색으로 안 읽힌다. */
.promo-tab--flash.is-on, .promo-tab--coupon.is-on {
  background: var(--surface); color: var(--accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px -4px rgba(15, 23, 42, .18);
}
.promo-tab--flash.is-on .mgic, .promo-tab--coupon.is-on .mgic,
.promo-tab--flash.is-on .ic, .promo-tab--coupon.is-on .ic { color: var(--accent); opacity: 1; }
/*  반짝할인·쿠폰 적용 버튼도 상단과 같은 브랜드 컬러로 */
.mg-flash3 + .mg-sec__foot--in .btn--accent,
.promo-body--coupon .mg-sec__foot .btn { background: var(--accent); border: 0; color: #fff; }
.mg-flash3 + .mg-sec__foot--in .btn--accent:hover,
.promo-body--coupon .mg-sec__foot .btn:hover { background: #4338ca; }
/*  ⚠ 2열 균등만 두면 넓은 화면에서 칸이 **493px**, 전체너비 칸은 **1002px** 이 된다(실측
      1440px). "150000" 을 넣는 칸이 그 폭이면 어드민 폼이 아니라 빈 판처럼 보인다 —
      폼 자체의 폭을 잡고, 퍼센트처럼 짧은 값은 칸도 짧게 둔다. */
.mg-grid2, .mg-flash3 { max-width: 760px; }
.mg-grid2 .mg-grid2__full > .mg-unitfield { max-width: 240px; }
/*  ⚠ 모바일에서는 캡을 푼다. 1열로 쌓이면 다른 칸은 316px 인데 할증만 240px 로 남아
      들쑥날쑥해진다(실측 390px). 캡은 '넓어서 과한' 화면에만 필요하다. */
@media (max-width: 520px) { .mg-grid2 .mg-grid2__full > .mg-unitfield { max-width: none; } }

/*  4열 균등 — 출장·배송비(서울 · 경기·인천 · 그 외 · 현장 세팅)
    ⚠ 전에는 지역 3칸이 .book__row(190px 고정폭)였고 현장 세팅비만 **다음 줄에 혼자**
      있었다. 같은 성격의 값 넷이 두 줄로 갈려 읽기 어려웠다 — 한 줄로 모은다. */
.mg-grid4 > .book__field { width: auto !important; margin-bottom: 0; }
.mg-grid4 .book__field > .mg-unitfield { max-width: none; }
@media (max-width: 900px) { .mg-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .mg-grid4 { grid-template-columns: minmax(0, 1fr); gap: 11px; } }
/*  두 칸만 있는 그리드는 폼 폭을 더 좁게 — 760px 에 두 칸이면 칸이 372px 로 과하다 */
.mg-grid2--half { max-width: 560px; }
/*  ⚠ 운영 사이드 칼럼(.mg-opscol--rules) 안에서는 2열을 쓰지 않는다. 그 칼럼은 좁아서
      (실측 1069px 에서 262px) 2열로 쪼개면 인풋이 62px 가 되고 안내문("예: 50000")이
      잘린다. 세로로 쌓는다 — 그 칼럼의 다른 칸들이 이미 그렇게 서 있다.
      ⚠ 라벨의 부가설명(비우면 제한 없음)도 1열에서는 줄바꿈 없이 한 줄에 들어간다. */
.mg-opscol--rules .mg-grid2 { grid-template-columns: 1fr; max-width: none; }

/* ══ 마이페이지 — 푸터가 사이드바에 덮이던 버그 (2026-08-25) ═══════════════════
   ⚠ **원인은 사이드바가 `position: fixed` 였다는 것이다.** 데스크톱에서 화면 왼쪽
      234px 를 `top: header ~ bottom: 0` 으로 끝까지 덮고 있었다. 푸터는 x=0 부터
      전체 폭이라, 맨 아래로 내려도 **약관 링크가 그 레일 아래에 깔렸다.**
      실측(1440px · vendor1): 레일 bottom 1552 · 푸터 top 1401 → **150px 전부 가림.**
   ⚠ 같이 있던 문제: `@media (min-width:861px)` 안에서 `.mp-body { display: block }` 으로
      되돌려 놓아, 위쪽에 있는 `display:flex; align-items:flex-start` 가 무력했다.
   ⚠ `padding-left: 274px` 와 헤더 로고 왼쪽 정렬도 그 고정 레일에 맞춘 값이었다 —
      레일을 흐름 안으로 되돌리면서 함께 걷는다(안 걷으면 본문만 274px 밀린 채 남는다).
   ⚠ body 를 flex 컬럼으로 만드는 것은 **마이페이지에만** 건다. 전역으로 바꾸면
      모든 페이지의 쌓임·sticky 가 함께 흔들린다. */
body:has(.mp-body) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(.mp-body) .mp { flex: 1 1 auto; }
body:has(.mp-body) .footer { clear: both; width: 100%; flex: none; }

@media (min-width: 861px) {
  /*  고정 레일 → 흐름 안의 sticky 카드. 스크롤해도 따라오지만 문서 끝에서는 푸터에
      자리를 넘긴다(fixed 는 못 하는 일이다). */
  .mp-body { display: flex; gap: 24px; align-items: flex-start; }
  .mp-body .mp-tabs {
    position: sticky;
    top: calc(var(--header-h, 64px) + 18px);
    flex: 0 0 226px;
    width: 226px;
    max-height: calc(100vh - var(--header-h, 64px) - 40px);
    overflow-y: auto;
    left: auto; bottom: auto; z-index: 1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 12px;
    margin: 0;
  }
  .mp:has(.mp-body) { max-width: 1360px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  body:has(.mp-body) .header__inner { max-width: 1360px; margin: 0 auto; padding-left: 32px; }
  .mp-main { flex: 1 1 auto; min-width: 0; max-width: none; margin-bottom: 48px; }
}

/* ══ 내 품목 테이블 — 10열 → 5열 (2026-08-25) ═════════════════════════════════
   ⚠ 전에는 열이 10개였다(사진·품목명·단위·단가·최소대여·최소금액·요청연결·보유·노출·삭제).
      1440px 에서도 단가칸이 100px 이라 "150000" 이 잘려 보였다 — 값을 확인할 수 없는 표였다.
      다섯 묶음으로 접고, 한 묶음 안에서는 세로로 쌓는다.
   ⚠ 저장은 `[data-vpf]` **속성**으로 읽으므로 셀로 감싸도 안전하다(위치 기준이 아니다). */

/* ══════════════════════════════════════════════════════════════════════════════
   폼 UI 키트 — 파트너·호스트 작업 화면의 공용 부품 (2026-08-26)

   ⚠ **여기가 유일한 정의다.** 같은 속성을 다른 곳에서 다시 정하지 말 것 —
     한쪽만 고쳐져 조용히 어긋나는 사고가 이 파일에서 반복됐다.
   ⚠ 기존 이름(.hf-card · .mg-sec · .hf-tip · .hf-chip · .mg-grid2/4 · .mg-addon ·
     .rtpl · .promo-tabs)은 **같은 규칙의 선택자 목록에 넣어** 별칭으로 남긴다.
     한 번에 다 갈아치우면 지금 도는 화면 다섯이 함께 흔들린다.
   ⚠ 새 화면은 ui-* 만 쓴다. 옛 이름은 이미 있는 마크업을 위한 것이다.
   ⚠ 값은 스펙 기준: 카드 #fff · 1px var(--line) · radius 16 · padding 24 · shadow-sm,
     안내 박스 surface-2 + 좌측 4px accent, 그리드 gap 16.
   ══════════════════════════════════════════════════════════════════════════════ */

/*  ── 카드 ── */
.ui-card, .hf-card, .mg-sec {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
}
.ui-card__h, .hf-card__h { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ui-card__s, .hf-card__s { margin: 0 0 18px; font-size: .82rem; color: var(--faint); line-height: 1.5; word-break: keep-all; }
.ui-card__foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }

/*  ── 안내 박스 ── 회색 줄글 대신. 아이콘은 SVG 로 넣는다. */
.ui-tip, .hf-tip {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--surface-2);
  border-left: 4px solid var(--accent);
  border-radius: 0 9px 9px 0;
  padding: 11px 13px;
  margin: 0 0 14px;
  font-size: .8rem; line-height: 1.6; color: var(--muted); word-break: keep-all;
}
.ui-tip b, .hf-tip b { color: var(--ink-2); font-weight: 700; }
.ui-tip .ic, .hf-tip .ic { flex: none; color: var(--accent); margin-top: 2px; }
.ui-tip--after, .hf-tip--after { margin: 10px 0 0; }

/*  ── 균등 그리드 ── */
.ui-grid { display: grid; gap: 16px; }
.ui-grid--2, .mg-grid2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid--4, .mg-grid4 { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 860px; }
.ui-grid__full { grid-column: 1 / -1; }
@media (max-width: 900px) { .ui-grid--4, .mg-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ui-grid--2, .mg-grid2, .ui-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 13px; } }
@media (max-width: 460px) { .ui-grid--4, .mg-grid4 { grid-template-columns: minmax(0, 1fr); gap: 11px; } }

/*  ── 단위 접미사 (숫자와 단위를 한 덩어리로) ── */
.ui-addon, .mg-addon { display: flex; align-items: stretch; }

/*  ── 품목 툴바 — 검색 · 노출 필터 · [+ 새 품목 등록] ──────────────────────
    25품목이면 목록이 2.9화면이라 찾아 내려가야 했다. 검색과 필터를 위에 둔다.
    ⚠ 필터 칩에 **개수**를 함께 적는다. 걸러진 상태를 모르면 "왜 품목이 없지" 가 된다. */
.vp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
.vp-bar__srch { position: relative; display: flex; align-items: center; gap: 7px; flex: 1 1 220px; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); }
.vp-bar__srch svg { flex: none; color: var(--faint); }
.vp-bar__srch input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 9px 0;
  font-size: .875rem; outline: none; }
/*  ⚠ 검색 인풋의 브라우저 기본 ✕ 를 없앤다 — 우리 버튼과 겹쳐 두 개로 보인다. */
.vp-bar__srch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.vp-bar__x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 0; border-radius: 6px; background: var(--surface-2); color: var(--muted); cursor: pointer; flex: none; }
.vp-bar__x:hover { background: var(--line); color: var(--ink); }
.vp-bar__f { display: flex; align-items: center; gap: 4px; flex: none; }
.vp-fchip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px;
  padding: 7px 12px; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: border-color .14s, background .14s, color .14s; }
.vp-fchip:hover { border-color: var(--accent); }
.vp-fchip em { font-style: normal; font-weight: 800; margin-left: 3px; opacity: .75; font-variant-numeric: tabular-nums; }
.vp-fchip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
/*  새 품목 패널 — 목록 맨 위에 뜬다. 기존 행 아래가 아니므로 위 모서리도 둥글다. */
.vp-edit--new { border-top: 1px solid var(--accent); border-radius: 10px; margin-top: 0; }
.vp-edit__t { display: flex; align-items: center; gap: 6px; margin: -2px 0 11px;
  font-size: .85rem; font-weight: 800; color: var(--accent); }
@media (max-width: 640px) {
  /*  ⚠ 좁은 화면에서는 검색이 한 줄을 다 쓰고 필터·버튼이 아랫줄로 간다 —
      한 줄에 밀어넣으면 검색칸이 60px 로 쪼그라든다. */
  .vp-bar__srch { flex: 1 1 100%; }
  .vp-bar__f { flex: 1 1 auto; }
  .vp-fchip { flex: 1 1 0; text-align: center; padding: 7px 6px; }
}

/*  ── 품목 수정: 인라인 아코디언 ────────────────────────────────────────────
    ⚠ 단위 접미사는 이미 있는 관용구(.mg-unitfield.mg-addon + .mg-unit)를 쓴다 —
      새 이름을 만들면 규칙이 두 벌이 된다. */
/*  ⚠ 행 **바로 아래**에 붙는다. `.vp-list` 가 flex column 이라 래퍼가 필요 없다.
    ⚠ 펼쳐진 행과 패널이 한 덩어리로 보이게 모서리를 맞붙인다(행 아래 radius 0).
    ⚠ 높이 애니메이션은 `max-height` 로 하지 않는다 — 내용 높이를 모르면 잘리거나
      튄다. 대신 위에서 살짝 내려오며 나타나게만 한다(레이아웃은 즉시 확정된다). */
.vp-row.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-color: var(--accent); border-bottom-color: transparent; background: var(--accent-soft, #eef0fe); }
.vp-row.is-open .vp-caret { transform: rotate(180deg); }
.vp-caret { display: inline-block; width: 0; height: 0; margin-left: 5px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; transition: transform .16s; }
.vp-edit { border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 10px 10px;
  background: var(--surface-2); padding: 14px 14px 12px; margin-top: -8px;
  animation: vpedown .16s ease; }
@keyframes vpedown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vp-edit { animation: none; } }
.vp-edit__g { display: grid; gap: 12px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-ef { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vp-ef--wide { grid-column: 1 / -1; }
.vp-ef__l { font-size: .75rem; font-weight: 700; color: var(--muted); }
.vp-ef__l i { font-style: normal; font-weight: 600; color: var(--faint); margin-left: 3px; }
.vp-ef__h { font-size: .7rem; color: var(--faint); font-style: normal; }
.vp-edit input, .vp-edit select { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: .875rem; background: var(--surface); }
.vp-edit input[readonly] { background: var(--surface-2); color: var(--muted); }
.vp-edit .mg-unitfield { width: 100%; }
.vp-ef__photo { display: flex; align-items: center; gap: 9px; }
.vp-ef__photo img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line-2); }
.vp-ef__ph { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 9px; background: var(--surface); color: var(--faint); font-weight: 800; }
/*  발 — 안내는 왼쪽, 삭제·저장은 오른쪽 */
.vp-edit__foot { display: flex; align-items: center; gap: 10px; margin-top: 13px;
  padding-top: 11px; border-top: 1px solid var(--line-2); }
.vp-edit__hint { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px;
  font-size: .72rem; color: var(--faint); }
.vp-edit__hint svg { flex: none; }
.vp-edit__del { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); border-radius: 8px; padding: 6px 10px;
  font-size: .78rem; font-weight: 700; cursor: pointer; }
.vp-edit__del:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
@media (max-width: 860px) { .vp-edit__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .vp-edit__g { grid-template-columns: minmax(0, 1fr); }
  /*  ⚠ 발이 좁아지면 안내를 접는다 — 버튼이 밀려 눌리지 않는 것이 더 나쁘다. */
  .vp-edit__hint { display: none; }
}

/*  ── 접이식 섹션 (자동 견적 조건) ──
    전에는 서브탭 셋이었다. 탭은 한 번에 하나만 DOM 에 두므로 저장도 셋으로 갈렸고,
    `matchTags` 를 보낼 때 다른 탭의 값을 손으로 물려줘야 했다(한 곳만 빠뜨리면 설정이
    조용히 풀린다). 접이식은 셋이 늘 DOM 에 있어 저장을 하나로 합칠 수 있다.
    ⚠ 요약줄(summary)에 **현재 설정 개수**를 함께 둔다 — 접힌 필터가 결과를 줄여
      "왜 요청이 안 오지" 가 되는 것을 막는다(공간 찾기 필터에서 겪은 그것). */
.mg-sec--acc { padding-bottom: 4px; }
.vr-acc { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.vr-acc[open] { border-color: var(--line-2); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.vr-acc__s { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 13px 15px; cursor: pointer; list-style: none; font-size: .93rem; }
.vr-acc__s::-webkit-details-marker { display: none; }
/*  펼침 표시 — 오른쪽 끝의 v 자. `list-style:none` 으로 기본 삼각형을 없앴으니 대신 둔다. */
.vr-acc__s::after { content: ""; margin-left: 4px; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg) translateY(-2px); transition: transform .16s; }
.vr-acc[open] > .vr-acc__s::after { transform: rotate(-135deg) translateY(-2px); }
.vr-acc__s > b { font-weight: 800; }
.vr-acc__d { color: var(--muted); font-size: .8rem; font-weight: 600; }
/*  현재 설정 요약 배지 — 접혀 있어도 무엇이 걸려 있는지 보인다. margin-left:auto 로 오른쪽 끝. */
.vr-acc__n { margin-left: auto; font-size: .76rem; font-weight: 800; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.vr-acc > *:not(.vr-acc__s) { padding-left: 15px; padding-right: 15px; }
.vr-acc > *:last-child { padding-bottom: 15px; }
@media (max-width: 560px) {
  .vr-acc__s { padding: 12px 13px; gap: 7px; }
  /*  좁은 화면에서는 설명을 줄바꿈해 배지가 제목 옆에 남게 둔다 */
  .vr-acc__d { flex: 1 1 100%; order: 3; }
}

/*  ── 토글 칩 ── 숨긴 체크박스를 그대로 둔다(저장이 input 을 읽는다) */
.ui-chip, .hf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 10px;
  padding: 8px 12px; font-size: .855rem; font-weight: 600;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: border-color .14s, background .14s, color .14s;
}
.ui-chips, .hf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ui-chip:hover, .hf-chip:hover { border-color: var(--line-2); color: var(--ink-2); }
.ui-chip:has(input:checked), .hf-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: #4338ca; font-weight: 700; }
.ui-chip:focus-within, .hf-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/*  칩 하위 부품 — 새 화면은 ui-chip__x · ui-chipadd 를 쓴다(옛 이름은 별칭) */

/*  ── 세그먼트 컨트롤 ── 활성 = 흰 배경 + 음영 하나로만 읽히게 */
.ui-seg, .promo-tabs { display: flex; gap: 6px; padding: 5px; background: var(--surface-2); border-radius: 12px; margin-bottom: 14px; }

/*  ── 선택형 카드 ── 환불 규정·영업 지역이 같은 모양이다 */
.ui-pick, .rtpl { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }

/*  긴 텍스트 입력 — 스크롤 없이 여러 줄이 보이게 (키트) */
.ui-ta--tall, .hf-notes .hf-ta--tall { min-height: 140px; }
/*  파트너 사진 — 드롭존 + 썸네일. 삭제는 SVG 라 크기를 맞춘다. */
#bizDrop { display: block; margin-bottom: 10px; }
.biz-photo__x { display: flex; align-items: center; justify-content: center; }
.biz-photo__x .ic { width: 13px; height: 13px; }


/*  ⚠ **0단계 회귀 수정.** `body:has(.mp-body) { display:flex }` 로 바꾸면서 `.mp` 가 flex item
      이 됐고, flex item 의 자동 최소 크기는 **min-content** 다 — 사이드바(가로 탭 줄)의
      min-content 870px 이 `.mp` 를 906px 로 밀어 **390px 화면에서 카드가 잘렸다**(실측:
      쿠폰 인풋 7개가 x=516 까지 뻗음). html 이 `overflow-x: clip` 이라 **가로 스크롤조차 없어**
      볼 방법이 없었다 — `repeat(n,1fr)` 함정과 같은 증상이다.
    ⚠ 두 곳을 함께 고쳐야 한다:
      ① flex item 의 자동 최소 크기를 끈다(min-width:0)
      ② 세로로 쌓이는 구간에서 사이드바가 **부모 폭에 맞도록** stretch 시킨다.
         `align-items: flex-start`(가로 배치용)가 세로에서는 자식을 내용 크기로 만든다 —
         그래서 가로 탭 줄이 870px 로 부풀었다. 폭에 맞으면 자기 overflow-x:auto 로 스크롤한다. */
/*  ⚠ 원인은 `.mp { margin: 0 auto }` 였다. flex 컨테이너에서 **cross-axis 의 auto 마진은**
      **stretch 를 무력화**한다 — 그래서 `.mp` 가 부모(390px)에 맞지 않고 자기 내용 크기
      906px 를 가졌다. `width: 100%` 를 주면 stretch 에 의존하지 않는다.
      (데스크톱에서는 `.mp` 의 max-width 가 이기고 margin auto 로 가운데 정렬이 유지된다.) */
body:has(.mp-body) > * { min-width: 0; width: 100%; }
@media (max-width: 860px) { .mp-body { align-items: stretch; } }

/*  ⚠ 좁은 화면에서 품목 셀을 2열(50%)로 두면 단가 칸이 **18px** 가 된다(실측 390px).
      전에 279px 로 재였던 것은 `.mp` 가 906px 로 부풀어 있던 **잘못된 상태의 값**이었다 —
      컨테이너를 고친 뒤 다시 재서 잡았다. 진짜 모바일 폭에서는 한 셀이 한 줄을 써야 한다. */
@media (max-width: 560px) {
  /*  값이 보이려면 세로로 쌓아야 하지만, **짧은 값끼리는 묶어** 줄 수를 줄인다.
      셀 넷을 다 한 줄씩 쓰면 행이 304px 이 되어 25개 품목이 7,781px(9.2화면)이 된다. */
}

/*  ══ /request 2단계 — 서비스 선택 (견적 요청 전용) ═══════════════════════════
    ⚠ 공용 `.hf-chk` / `.hf-checks` 를 쓰지 않는다. 그 클래스는 **입점 신청(#bzSvc)과**
      **호스트 화면**이 함께 쓴다 — 카드로 바꾸면 그 두 화면이 같이 바뀐다.
    ⚠ 열은 `minmax(0, 1fr)` 이다. `1fr` 은 `minmax(auto,1fr)` 이라 줄지 않는 내용(긴 desc)이
      있으면 그 열이 min-content 만큼 넓어져 카드가 화면 밖으로 잘린다(공간 카드에서 겪은 그것).
    ⚠ 열 수는 **desc 가 몇 자까지 보이나**로 정했다(실측 · 4열 + 컴팩트 + desc 2줄 기준).
        1100~1440px  camera 36/38자   ← 잘리는 건 "촬영" 두 자. 여기까지 4열.
             1024px  camera 33/38자
              960px  camera 25/38자   ← 사진작가·영상 촬영이 잘린다. 4열을 쓰면 안 된다.
      제목(`촬영장비·카메라` 7자)은 960px 까지 한 줄이었다 — 접히는 건 desc 쪽이다.
    ⚠ 모바일 2열은 여전히 금지다(390px 에서 칸이 156px 가 되어 제목이 두 줄로 접힌다).  */
.rq-svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; }
@media (max-width: 1100px) { .rq-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rq-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rq-svc { grid-template-columns: minmax(0, 1fr); } }

/*  ⚠ 여백을 14 → 12px 로 조였다(카드 86 → 73px · 8장에서 세로 121px 절감).
      모바일 1열에도 같이 적용된다 — 지난 개편에서 늘어난 세로(+340px) 중 약 100px 을 되돌린다. */
.rq-svc__c { position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 32px 12px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); cursor: pointer; min-width: 0;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.rq-svc__c:hover { border-color: #a5b4fc; box-shadow: 0 4px 12px -2px rgba(15, 23, 42, .12); transform: translateY(-2px); }
.rq-svc__c:hover .rq-svc__ic { background: #eef2ff; color: var(--accent); }
/*  ⚠ 움직임을 줄이도록 설정한 사용자에게는 뜨는 효과를 주지 않는다(이 저장소의 원칙). */
@media (prefers-reduced-motion: reduce) {
  .rq-svc__c, .rq-hero__pick { transition: none; }
  .rq-svc__c:hover { transform: none; }
}
/*  ⚠ 체크박스는 숨기지만 **접근성은 남긴다** — display:none 이면 키보드로 못 고른다.
      투명하게 겹쳐 두고 포커스는 카드 테두리로 보여준다. */
.rq-svc__c input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; }
.rq-svc__c input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
.rq-svc__ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2, var(--muted));
  transition: background .2s, color .2s; }
.rq-svc__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rq-svc__t { font-size: .78rem; font-weight: 800; color: var(--ink); line-height: 1.35; word-break: keep-all; }
/*  ⚠ desc 는 **2줄로 자른다.** camera 만 38자로 길고 나머지는 8~13자라, 안 자르면 카드
      높이가 들쭉날쭉해진다. 데이터에서 줄이지는 않는다 — 메인 화면과 AI 가 같은 값을 쓴다. */
/*  ⚠ **2줄 최소 높이**를 준다. 클램프만 하면 상한만 정해져서 desc 가 짧은 카드는 1줄,
      camera(38자)만 2줄이 되어 카드 높이가 갈렸다(실측: 86px vs 69px · 편차 17px).
      1열에서는 한 장만 큰 것이 눈에 걸린다. 대가는 모바일 세로 +119px 다. */
/*  ⚠ **2줄을 유지한다.** 1줄(clamp-1)로 자르면 camera 가 18/38자만 보여
      "스크린 · 행사 사진작가 · 영상 촬영" 이 사라진다 — 그건 다른 어디에도 안 적혀 있다.
      2줄이면 36/38자가 보이고(잘리는 건 "촬영" 두 자) 카드당 15px 만 더 쓴다. */
.rq-svc__d { font-style: normal; font-size: .6875rem; color: var(--faint); line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: keep-all; }
/*  선택 품목 배지 — 접힌 아코디언 대신 **카드에서** 상태를 말한다.
    ⚠ 선택 전에는 자리도 차지하지 않는다(카드 높이가 갈리면 격자가 어긋난다). */
.rq-svc__badge { display: none; }
.rq-svc__badge.is-show { display: block; font-style: normal; margin-top: 4px; padding: 2px 7px;
  border-radius: 6px; font-size: .66rem; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.rq-svc__badge.is-ok { background: #eef2ff; color: var(--accent); }
.rq-svc__badge.is-warn { background: #fef2f2; color: #c0432c; }
/*  원형 체크 인디케이터 */
.rq-svc__chk { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--surface);
  transition: border-color .14s, background .14s; }
.rq-svc__chk::after { content: ""; position: absolute; top: 3px; left: 5px; width: 6px; height: 9px;
  border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(40deg) scale(.6);
  opacity: 0; transition: opacity .14s, transform .14s; }
.rq-svc__c:has(input:checked) { border-color: var(--accent); border-width: 2px;
  padding: 11px 31px 11px 11px; background: rgba(238, 242, 255, .45);
  box-shadow: 0 1px 3px rgba(79, 70, 229, .14); }
.rq-svc__c:has(input:checked) .rq-svc__ic { background: #e0e7ff; color: var(--accent); }
.rq-svc__c:has(input:checked) .rq-svc__t { color: var(--accent-ink, var(--ink)); font-weight: 800; }
.rq-svc__c:has(input:checked) .rq-svc__chk { background: var(--accent); border-color: var(--accent); }
.rq-svc__c:has(input:checked) .rq-svc__chk::after { opacity: 1; transform: rotate(40deg) scale(1); }

/*  ── 공간 대관 히어로 ─────────────────────────────────────────────────────
    고르면 아래 확장 영역(이용시간·유형)이 **일체형으로** 붙는다 — 테두리를 잇고
    위 모서리만 각지게 해서 한 덩어리로 읽히게 한다.  */
.rq-hero { margin: 4px 0 14px; }
.rq-hero__pick { position: relative; display: flex; align-items: center; gap: 13px;
  padding: 17px 48px 17px 17px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); cursor: pointer;
  transition: border-color .14s, background .14s, box-shadow .14s; }
.rq-hero__pick:hover { border-color: var(--line-2); box-shadow: 0 1px 3px rgba(15, 23, 42, .07); }
.rq-hero__pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rq-hero__pick input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
.rq-hero__ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; background: #eef2ff; color: var(--accent); }
.rq-hero__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rq-hero__t { font-size: 1rem; font-weight: 800; color: var(--ink); }
.rq-hero__d { font-style: normal; font-size: .78rem; color: var(--muted); line-height: 1.45; word-break: keep-all; }
.rq-hero__chk { position: absolute; top: 50%; right: 17px; margin-top: -11px; width: 22px; height: 22px;
  border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--surface);
  transition: border-color .14s, background .14s; }
.rq-hero__chk::after { content: ""; position: absolute; top: 5px; left: 7px; width: 6px; height: 11px;
  border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(40deg) scale(.6);
  opacity: 0; transition: opacity .14s, transform .14s; }
.rq-hero:has(input:checked) .rq-hero__pick { border-color: var(--accent); border-width: 2px;
  padding: 16px 47px 16px 16px; background: rgba(238, 242, 255, .55); }
.rq-hero:has(input:checked) .rq-hero__chk { background: var(--accent); border-color: var(--accent); }
.rq-hero:has(input:checked) .rq-hero__chk::after { opacity: 1; transform: rotate(40deg) scale(1); }
/*  확장 영역이 열리면 히어로의 아래 모서리를 펴서 한 덩어리로 만든다. */
.rq-hero:has(.rq-hero__more:not([hidden])) .rq-hero__pick { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rq-hero__more { padding: 16px 16px 14px; border: 2px solid var(--accent); border-top: 0;
  border-radius: 0 0 16px 16px; background: rgba(238, 242, 255, .3); }
.rq-hero__more[hidden] { display: none; }

/*  보조 텍스트 — 제목에서 내린 부가 설명. 굵은 제목 옆에 붙거나(inline) 아래 줄로 간다(--blk).
    ⚠ 정보를 **지우는 대신 내린다.** "모든 파트너에게 공통 전달" 은 회원이 무엇을 쓸지
      판단하는 근거다(바로 위 항목별 요청사항은 그 카테고리 파트너만 본다). */
.hf-sub2 { font-size: .72rem; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.hf-sub2--blk { display: block; margin: -2px 0 7px; line-height: 1.45; }

/*  안내 배너 — "1개 이상 필수" 를 빼지 말 것(빼면 다음으로 못 가는 이유를 모른다). */
.rq-banner { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); font-size: .77rem; color: var(--muted); line-height: 1.5; }
.rq-banner .ic { flex: none; margin-top: 1px; color: var(--accent); }
.rq-banner b { color: var(--ink-2); font-weight: 800; }
.rq-banner > span { flex: 1 1 auto; min-width: 0; word-break: keep-all; }

/*  ══ 호스트 요금 설정 — 입력폼 접기 (모바일 붕괴 수정) ═══════════════════════
    ⚠ 실측 390px(옛 상태): 시간대 할인 밴드가 **3줄 121px** · 패키지가 **4줄 163px** 로
      접히고 셀렉트 6 + 인풋 5 = **컨트롤 11개**가 기본 노출돼 카드가 **865px**(화면 900)
      이었다. 빈 목록 안내는 5줄 회색 박스(63px) · 예시 힌트가 55px 였다.
      → 목록만 보이고 [+ 추가] 를 눌렀을 때만 입력폼을 펼친다.  */
.mg-addbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  min-height: 40px; padding: 0 14px; border: 1px dashed var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--accent); font-family: inherit; font-size: .82rem;
  font-weight: 800; cursor: pointer; transition: border-color .15s, background .15s; }
.mg-addbtn:hover { border-color: var(--accent); background: #eef2ff; }
.mg-addbtn.is-open { border-style: solid; border-color: var(--accent); background: #eef2ff; }
.mg-addbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*  펼침 패널 — 규칙을 하나로 통일한다: 한 줄에 시간(from ~ to), 한 줄에 2칸, 마지막 줄에 버튼. */
.mg-addp { margin-top: 8px; padding: 12px; border: 1px solid var(--accent); border-radius: 12px;
  background: rgba(238, 242, 255, .35); display: flex; flex-direction: column; gap: 8px; }
.mg-addp[hidden] { display: none; }
.mg-addp__row { display: flex; align-items: center; gap: 8px; }
/*  ⚠ 열은 `minmax(0, 1fr)` 이다 — `1fr` 은 `minmax(auto,1fr)` 이라 셀렉트의 요구 폭 때문에
      칸이 부풀어 밖으로 넘친다(이 저장소가 반복해서 다친 자리). */
.mg-addp__row--2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mg-addp__row--time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.mg-addp__row > select, .mg-addp__row > input { width: 100%; min-width: 0; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: .9rem;
  font-family: inherit; }
.mg-addp__row .mg-unitfield { width: 100%; min-width: 0; margin: 0; }
.mg-addp__row .mg-unitfield input { width: 100%; min-width: 0; text-align: left;
  padding: 10px 34px 10px 11px; }
/*  ⚠ `.mg-hsel` 은 데스크톱 밴드용으로 max-width 122px 이 걸려 있다 — 패널에서는 푼다.
      안 풀면 그리드 칸 안에서 122px 로 쪼그라들어 오른쪽에 빈 공간이 남는다. */
.mg-addp__row .mg-hsel { min-width: 0 !important; max-width: none; }
.mg-addp__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.mg-addp__foot .btn { min-height: 40px; }

/*  ⚠ **요금 저장 버튼을 왼쪽으로 정렬한다.** 오른쪽 아래에는 플로팅 챗봇 버튼이 fixed 로
      떠 있어 그 자리와 겹친다 — 실측 1280px: 겹침 **798px²** (버튼 x1125~1223 · 챗봇도 그 근처).
      하단 여백을 늘리는 것만으로는 스크롤 중간 위치를 못 막는다. 가로로 비켜야 확실하다.
      `:has()` 로 이 카드만 고른다(다른 카드의 오른쪽 정렬은 그대로 둔다).  */
.mg-sec__foot:has(#rtSave) { justify-content: flex-start; }

/*  빈 목록 — 박스가 아니라 한 줄. "무엇을 해야 하나" 는 바로 아래 [+ 추가] 가 이미 말한다. */
.mg-none { margin: 6px 0 0; font-size: .76rem; color: var(--faint); }

@media (max-width: 760px) {
  /*  버튼을 전폭으로 — 터치 영역을 넓히고 오른쪽 아래 챗봇 버튼을 비킨다. */
  .mg-addbtn { display: flex; width: 100%; justify-content: center; }
  .mg-addp__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mg-addp__foot .btn { width: 100%; }
  /*  ⚠ 요금 저장 버튼이 오른쪽 아래에 있으면 **플로팅 챗봇 버튼(48×48)** 과 겹친다.
      실측 390×844: 챗봇이 x330~378 · y722~770(하단 내비 66px 위)다. 전폭으로 눕혀
      왼쪽부터 채우면 눌릴 자리가 남는다. */
  /*  ⚠ 전폭으로 두면 오른쪽 끝이 **챗봇 버튼과 가로로 17px 겹친다** — 실측 390px:
      챗봇 x330~378 · 버튼 x43~347. 버튼이 그 높이(y724~772)에 오는 스크롤 위치에서
      오른쪽 끝이 안 눌린다. 하단 여백만으로는 스크롤 중간을 못 막으므로 **가로로 비킨다.**
      챗봇 자리(48 + 여유 8 = 56px)를 비워 두면 어느 스크롤 위치에서도 겹치지 않는다.  */
  .mg-sec__foot .btn--accent { width: 100%; }
  /*  ⚠ `#rtSave` 만 비켜 뒀는데 `#stSave`(예약 규칙 저장)도 같은 문제였다 — 모바일에서
      전폭 버튼의 오른쪽 끝이 챗봇(x330~378)과 가로로 17px 겹친다. 카드 푸터 전부에 건다. */
  .mg-sec__foot { padding-right: 56px; }
}

/*  ══ 예약 운영 설정 · 요금 설정 — 줄맞춤 교정 ══════════════════════════════
    실측 390px(옛 상태):
      · `가용성 차단` 서브헤더가 **44px** (`예약 규칙` 은 28px) — 아이콘·제목이 2줄로
        흐르는 설명 옆에서 수직 중앙에 걸려 깨져 보였다.
      · 달력 상단 바는 배경 없이 떠 있고, 범례는 왼쪽에 붙어 있었다.
      · 규칙 인풋 세 칸이 세로로 쌓여 있고 `청소 버퍼` 라벨만 2줄(33px vs 17px)이라
        인풋 베이스라인이 어긋나 보였다(인풋·단위 자체의 중심은 0px 로 맞아 있었다 —
        **인풋만 재면 "정렬 정상" 으로 나온다**).                                     */

/*  규칙 인풋 3열 — 라벨 길이가 달라도 그리드가 행 높이를 맞춘다.
    ⚠ 열은 `minmax(0, 1fr)` 이다. `1fr` 은 `minmax(auto,1fr)` 이라 인풋의 요구 폭 때문에
      칸이 부풀어 밖으로 넘친다(이 저장소가 반복해서 다친 자리). */
.mg-st3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.mg-st3 > .book__field { margin-bottom: 0; min-width: 0; }
/*  라벨을 **한 줄로 못 박는다.** 넘치면 … 로 자르고 전체는 title 이 아니라 물음표 배지가 말한다. */
.mg-st3 .book__label { display: flex; align-items: center; gap: 3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-height: 20px; }
.mg-st3 .book__label .ic { flex: none; }
.mg-st3 .mg-unitfield { width: 100%; min-width: 0; margin: 0; }
.mg-st3 .mg-unitfield input { width: 100%; min-width: 0; padding-right: 34px; text-align: left; }

/*  달력 상단 이동 바 — 배경을 깔아 한 덩어리로 읽히게 한다(양끝 버튼 · 가운데 연월). */
.mgcal-top { padding: 5px 8px; background: var(--surface-2); border-radius: 12px; margin-bottom: 12px; }
/*  범례 — 가운데로 모으고 위에 구분선을 둔다. 좁은 화면에서는 접힌다. */
.mgcal-hint { justify-content: center; flex-wrap: wrap; row-gap: 4px; text-align: center;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2); }

@media (max-width: 760px) {
  /*  ⚠ **달력 오른쪽에 챗봇 자리를 비운다.** 실측 390×844: 달력이 x43~347 인데 챗봇이
      x330~378 이라 **토요일 열이 17px 가려졌다**(셀 41px 의 41%). 여기만은 기능이 막히는
      자리다 — 토요일 휴무를 못 지정하면 그 날 예약이 들어온다.
      ⚠ 하단 패딩으로는 못 막는다. `position: fixed` FAB 아래로는 스크롤 중간에 무엇이든
        지나간다 — 패딩은 '맨 아래까지 내렸을 때' 만 보장한다. 가로로 비켜야 확실하다.
      ⚠ **28px 이면 충분하다.** 56px(챗봇 폭+여유)로 잡았더니 셀이 43 → **33px** 로 줄어
        터치 타겟이 오히려 나빠졌다(실측). 필요한 값은 계산으로 나온다 —
          FAB 왼쪽  = 폭 − 60   (right:12 + 48px)
          달력 오른쪽 = 폭 − 43   (페이지 18 + 카드 25)
        → 25px 만 당기면 닿지 않는다. 28px 로 두면 **11px 여유** · 셀 39px 를 지킨다.
        폭이 달라져도 두 값이 같은 만큼 움직이므로 여유는 그대로다.
      ⚠ 나머지 5~17px 겹침(쿠폰 수정 · 삭제 × · + 추가)은 남겨 뒀다 — 그것까지 비키면
        카드마다 오른쪽을 버리게 되어 얻는 것보다 잃는 게 크다. */
  .mgcal { padding-right: 28px; }

  /*  ⚠ 서브헤더를 **두 줄로 쌓는다**: 첫 줄 = 아이콘 + 제목, 둘째 줄 = 설명 전폭.
      제목은 **텍스트 노드**라 익명 flex 아이템이 된다 — 설명 span 만 100% 로 밀면
      아이콘·제목은 첫 줄에 남는다. `.mg-hic`(아이콘)은 제외해야 한다.
      ⚠ 이 클래스는 **파트너 접수·매칭 카드도 쓴다**(4곳). 두 화면이 같이 정돈된다. */
  .mg-subhead { flex-wrap: wrap; align-items: center; }
  .mg-subhead > span:not(.mg-hic) { flex: 1 0 100%; margin-top: 3px; line-height: 1.45; }
  /*  ⚠ 아이콘을 숨기는 규칙을 뒀다가 지웠다 — `mgIc()` 는 `class="mgic"` 를 쓰므로
      `.ic` 선택자가 아예 안 들었고(실측: 390px 에서도 아이콘이 그대로 보였다),
      게다가 라벨이 96px 안에 20px 한 줄로 들어가 숨길 필요도 없었다. */
  .mg-st3 { gap: 8px; }
  .mg-st3 .mg-unitfield input { padding-right: 30px; }
  .mg-st3 .mg-unit { right: 8px; font-size: .72rem; }
}

/*  ══ 할인 · 프로모션 — 탭 제거 · 상/하 2단 ══════════════════════════════════
    실측(옛 상태): 탭 2개 · 반짝 3칸이 390px 에서 3줄(폼 326px · 카드 500px) ·
    쿠폰 7칸이 390px 에서 5줄(폼 516px · **카드 690px**) / 1280px 에서 2줄.
    ⚠ 2열 좌우 분할은 하지 않았다 — 폭을 반(≈460px)으로 자르면 916px 에서 2줄인 쿠폰이
      3~4줄로 늘어난다. 위/아래로 두고 폭을 온전히 쓴다.                              */
.promo-sec + .promo-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.mg-cap { margin: 8px 0 0; font-size: .74rem; color: var(--faint); line-height: 1.5; }
.mg-cap b { color: #c0432c; font-weight: 700; }

/*  반짝할인 가로 인라인 — 라벨 위 · 입력 아래이므로 `align-items: flex-end` 로 밑선을 맞춘다. */
/*  ⚠ 래퍼는 반드시 **`.book__field`** 여야 한다. 인풋의 여백·테두리·반경은 607행의
      `.book__field input, .book__field select` 하나가 준다 — 처음에 새 클래스(`.dc-f`)만
      쓰다가 그 규칙이 안 걸려 **인풋 높이가 22px**(패딩 0)이었다. 버튼은 42px 이라
      `~` 도 `적용` 도 다 어긋나 보였다. 관용구를 새로 만들지 말고 있는 것을 쓴다.  */
.dc-inline { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dc-inline .book__field { margin-bottom: 0; }
.dc-f { min-width: 0; }
.dc-f .book__label { display: block; margin-bottom: 5px; }
.dc-f--pct { flex: 0 0 auto; width: 132px; }
/*  ⚠ `.mg-addon` 은 인풋의 오른쪽 테두리를 없애고 접미사 박스를 **붙이는** 관용구다
      (7119행 `flex: 1 1 auto`). 인풋에 `width: 100%` 를 주면 접미사를 밀어내 두 박스로
      갈라져 보인다 — 통(.mg-unitfield)에만 폭을 주고 인풋은 flex 에 맡긴다. */
/*  ⚠ `input[type=date]` 는 네이티브 선택기 때문에 2px 더 높다(실측 46 vs 44) — 밑선은
      맞지만 **윗선에 2px 단차**가 보인다. 접미사 통에 같은 높이를 못 박아 맞춘다. */
.dc-f--pct .mg-unitfield { width: 100%; margin: 0; max-width: none; min-height: 46px; }
.dc-f--pct .mg-unitfield input { height: 46px; }
.dc-dates { display: flex; align-items: flex-end; gap: 8px; flex: 0 1 auto; min-width: 0; }
/*  ⚠ 날짜 칸은 **140px 이상**을 준다. `input[type=date]` 는 자체 요구 폭이 있어
      (크롬 145 · iOS 133) `min-width:0` 으로 누르면 **iOS 에서만** 내용이 칸 밖으로
      그려진다(크롬은 통과해서 못 잡는다). 지침에 박힌 실측값이다. */
/*  ⚠ 152px 는 요구 폭(실측 156~158px)보다 좁아 4~6px 넘쳤다. 넉넉히 준다 —
    칸 폭만 보면 통과로 보이므로 min-content 로 재야 잡힌다.  */
.dc-f--date { flex: 0 0 auto; width: 172px; }
.dc-f--date input { width: 100%; min-width: 0; max-width: none; }
/*  `~` 와 [적용] 은 **인풋 밑선**에 맞춘다(라벨이 없어 그냥 두면 라벨 줄까지 올라온다).
    ⚠ 인풋 높이를 하드코딩하지 않는다 — `align-self: flex-end` 로 밑선을 붙이고
      `~` 만 인풋 중앙쯤으로 12px 올린다(인풋 46px 의 절반과 2px 안에서 맞는다). */
.dc-tilde { flex: none; align-self: flex-end; margin-bottom: 12px; color: var(--muted); }
.dc-apply { flex: none; align-self: flex-end; min-height: 46px; padding: 0 18px; }

/*  쿠폰 요약 한 줄 */
.dc-sum__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.dc-sum__code { flex: none; font-family: ui-monospace, "D2Coding", monospace; font-size: .84rem;
  font-weight: 800; color: var(--accent); background: var(--accent-soft, #eef2ff);
  padding: 4px 10px; border-radius: 7px; letter-spacing: .02em; }
.dc-sum__d { flex: 1 1 auto; min-width: 0; font-size: .8rem; color: var(--muted); line-height: 1.5; word-break: keep-all; }
/*  ⚠ 만료 없는 쿠폰은 붉게 알린다 — `_hostEval` 이 기간 제한 없음으로 보고 계속 통과시킨다. */
.dc-sum__warn { font-style: normal; font-weight: 800; color: #c0432c; }

/*  쿠폰 7칸 폼 — 요금 설정에서 쓴 `.mg-addp` 를 그대로 쓴다(사본을 만들지 않는다).
    거기는 직접 자식이 input/select 였고 여기는 `.book__field`(라벨 포함)라 그만큼만 더한다. */
.mg-addp .book__field { margin-bottom: 0; min-width: 0; }
.mg-addp .book__label { display: block; margin-bottom: 5px; font-size: .76rem; }
.mg-addp .book__field > input, .mg-addp .book__field .mg-unitfield { width: 100%; min-width: 0; margin: 0; }
.mg-addp .book__field .mg-unitfield input { width: 100%; min-width: 0; text-align: left; padding-right: 36px; }
.mg-addp .seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mg-addp .seg2__o { width: 100%; min-height: 42px; justify-content: center; }
/*  ⚠ `--2` 는 원래 직접 자식 2개를 나누는 규칙이다. `.book__field` 를 담아도 같게 동작하되
      라벨 때문에 높이가 갈릴 수 있어 밑선을 맞춘다. */
.mg-addp__row--2 { align-items: end; }

@media (max-width: 760px) {
  /*  ⚠ 모바일은 **2줄**로 못 박는다: [할인율][적용] / [시작]~[종료].
      한 줄에 넣으면 304px 안에 할인율 118 + 날짜 148×2 + 버튼 ≈ 450px 로 넘쳐
      날짜 칸이 iOS 요구 폭 아래로 눌린다. flex-wrap 에 맡기면 순서가
      [할인율][시작] / [~][종료][적용] 로 흘러 보기 나쁘다 — 영역을 지정한다. */
  .dc-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "pct apply" "dates dates"; gap: 10px; }
  .dc-f--pct { grid-area: pct; width: auto; }
  .dc-apply { grid-area: apply; align-self: end; }
  .dc-dates { grid-area: dates; }
  .dc-f--date { flex: 1 1 0; width: auto; min-width: 134px; }
  .dc-f--pct { width: auto; }
}

/* ══ 날짜 입력 · 저장 버튼 정렬 — 2026-08-31 ═══════════════════════════════
   사용자 신고(아이폰): 날짜가 규격 폼 밖으로 나가고 · 정산 기간이 칸을 너무 먹고 ·
   저장 버튼이 왼쪽으로 쏠려 보인다. 셋 다 실측으로 원인을 잡았다.
   ══════════════════════════════════════════════════════════════════════ */

/*  ⚠⚠ **날짜칸에 `appearance: none` 을 걸지 말 것.** 2026-08-31 에 그렇게 했다가
    아이폰에서 날짜칸이 전부 **빈 흰 알약**이 됐다(사용자 스크린샷 5장).
    iOS 사파리는 네이티브 렌더링을 벗기면
      · 값이 빈 칸의 포맷 글자(연도-월-일)를 **아예 안 그리고**
      · 컨트롤의 **고유 최소 폭이 사라져** flex/grid 안에서 납작하게 쭈그러든다.
    크롬은 빈 칸에도 `연도-월-일` 을 그리고 폭도 유지한다 — **이 결함은 크롬으로**
    **재현되지 않는다.** 이 파일 6835 주석과 같은 함정이다.

    `.hf`(:1428)가 이걸 쓰고도 멀쩡한 이유는 그쪽이 **높이를 44px 로 못 박고** 값이
    늘 채워져 있는 자리이기 때문이다. 일반화하면 안 된다.

    ⚠ 그러면 넘침은 무엇으로 막나 — **칸을 컨트롤 요구 폭보다 넓게 주는 것뿐이다.**
      요구 폭은 글꼴에 비례하므로 좁은 자리에서는 글꼴을 줄여 요구 폭을 낮춘다
      (아래 .dc-dates). min-width:0 · max-width:100% 로는 못 막는다.

    ⚠ 내부 여백(::-webkit-datetime-edit* 의 padding/margin 0)도 걷었다. 베이스라인이
      밀려 글자가 상자 위아래로 잘린다. 값 정렬 한 줄만 남긴다 — `.hf`(:1429)가
      오래 쓰던 것과 같다.  */
input[type="date"]::-webkit-date-and-time-value { text-align: left; }

@media (max-width: 760px) {
  /*  네이티브 모양은 지키고 **높이만** 보장한다 — 터치 영역(40px 이상)을 확보하고
      좁은 칸에서 세로로 눌리는 것도 막는다.  */
  input[type="date"],
  input[type="time"] { min-height: 40px; }
  .settle-range input[type="date"] { min-height: 36px; }
}

@media (max-width: 760px) {
  /*  ② 반짝할인 시작/종료 — 실측 390px: 칸이 **139px** 인데 컨트롤 요구 폭이 **156px**
      라 17~19px 넘쳤다. 두 칸을 한 줄에 두려면 288px 자리에 312px 가 필요해
      **애초에 들어갈 수가 없다.** 한 줄에 하나씩 둔다 — 288px 면 어떤 표기가 와도 넘치지
      않는다.
      ⚠ 크롬에서 넘침 0 이라고 안심하지 말 것. 똑같은 결함이 2026-08-25 `.mp-daterange`
        에서 났고 **크롬으로는 재현되지 않았다**(이 파일 6835 주석). iOS 는 네이티브
        날짜 내용을 상자 밖으로 그리고 min-width:0 · max-width:100% 로는 막히지 않는다.
      ⚠ 그래서 '조금 넓게' 가 아니라 **여유 있게** 넓힌다.  */
  .dc-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; }
  .mg-grid2 > .dc-dates { display: grid; }
  .dc-tilde { display: none; }
  .dc-f--date { flex: none; width: auto; min-width: 0; }
  .dc-dates > .book__field { margin-bottom: 0; }

  /*  ⚠ 값은 정산 화면(.settle-range · .mp-daterange)과 **같은 컴팩트 값**이다.
      본문 크기(14.72px / 12px 14px)로 두면 요구 폭이 155px 라 2열이 안 들어간다 —
      실측: 390px 각 칸 148px · 360px 각 칸 133px. 컴팩트면 요구 폭이 135px 로 내려간다.
      ⚠ 커스텀 달력 아이콘은 넣지 않았다. 배경 아이콘을 넣으려면 오른쪽 여백이
        24px 더 필요해 요구 폭이 다시 155px 로 올라가 2열이 깨진다. 값을 눌러도
        피커는 그대로 열린다.  */
  .dc-dates > .book__field > input[type="date"] { min-height: 40px; padding: 9px 8px; font-size: .82rem; }

  /*  ③ 정산 기간 — [아이콘][시작][~][종료] 가 모바일 공통 규칙
      `input[type=date] { width: 100% }` 때문에 각자 한 줄을 먹어 **4줄 · 127px** 였다
      (실측 390px). 2열 격자로 **1줄**로 만든다: 각 칸 (354-8)/2 = 173px 로 요구 폭
      (실측 127px)보다 46px 넉넉하다 — iOS 여유까지 본 값이다.
      ⚠ 물결표와 아이콘은 감춘다. 두 칸이 나란하면 범위로 읽히고, 뜻은 각 input 의
        aria-label(시작일/종료일)이 이미 들고 있다(`.mp-daterange` 에서 같은 판단을 했다).  */
  .settle-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
  .settle-range > svg,
  .settle-range__t { display: none; }

  /*  ④ 저장 버튼이 왼쪽으로 쏠려 **보인** 이유(실측 390px: 버튼 248px · 왼여백 0 ·
      오른여백 56): 푸터에 챗봇 회피용 `padding-right: 56px` 가 걸려 있고 버튼은 그 안에서
      전폭이라, 카드 기준으로는 56px 왼쪽에 치우친다. 버튼 자체는 '왼쪽 정렬' 이 아니라
      **줄어든 칸을 꽉 채우고 있었다.**
      여백을 걷고 가운데로 두되 폭에 상한을 준다 — 260px 면 오른쪽 끝이 챗봇
      (x330~378)에 닿지 않는다. 터치 영역도 그대로 넓다.
      ⚠ `:has(#rtSave)` 규칙(:7603)은 id 가 들어가 특이도가 높다 — 같은 선택자로 다시
        써야 이긴다. 하나만 빠뜨리면 그 카드만 왼쪽에 남는다.  */
  /*  모바일에서는 버튼을 넓게(터치) 두되 폭에 상한을 준다. */
  .mg-sec__foot .btn--accent,
  .mg-sec__foot--in .btn--accent { width: 100%; max-width: 260px; }
  .mg-sec__foot { padding-right: 0; }
}

/*  ⑤ **저장 버튼은 화면 크기와 상관없이 가운데다.** 데스크톱은 오른쪽 정렬이었는데,
    실측 1280px 에서 `가격 · 할인 설정 저장` 이 플로팅 챗봇(x1204~1260)과 **가로로 19px**
    **겹쳤다** — 버튼 오른쪽 끝이 안 눌린다. 예전에 `#rtSave` 와 예약 규칙 카드만 왼쪽으로
    비켜 뒀는데(:3908 · :7603), 비켜 두지 않은 카드가 그대로 겹쳐 있었다.
    가운데로 두면 1280px 에서 챗봇까지 **357px** 떨어져 어느 카드든 겹치지 않는다.
    ⚠ 특이도가 더 높은 둘을 함께 다시 써야 이긴다 —
      `.mg-sec .mg-opscol--rules .mg-sec__foot`(0-3-0) · `:has(#rtSave)`(1-1-0).
      첫 시도에서 예약 규칙 저장만 왼쪽에 남았다(실측 왼여백 0 · 오른여백 44).
    ⚠ `--hint` 푸터의 `margin: 0 auto 0 0` 은 버튼을 오른쪽으로 밀어내므로 함께 푼다.
      안 풀면 가운데 정렬이 그 카드에서만 안 듣는다.  */
.mg-sec .mg-sec__foot,
.mg-sec__foot,
.mg-sec__foot--in,
.mg-sec .mg-opscol--rules .mg-sec__foot,
.mg-sec__foot:has(#rtSave) { justify-content: center; }
.mg-sec__foot--hint > .hf-hint { margin: 0; }

@media (max-width: 760px) {
  .mg-sec__foot--hint > .hf-hint { text-align: center; }
}

/*  파트너 [가격 및 프로모션 정책] 카드는 2열 격자다. 날짜 묶음이 한 칸에 들어가면
    두 날짜가 반칸씩 눌려 좁아진다 — **두 열을 가로지르게** 두고 그 안에서 반씩 나눈다.  */
.mg-grid2 > .dc-dates { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 10px; }
.mg-grid2 > .dc-dates > .book__field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }

/*  ⚠ 360px 에서는 칸이 134px 인데 요구 폭이 132~134px — **여유가 0** 이었다(실측).
    크롬 값이 딱 맞는다는 건 아이폰에서 넘칠 수 있다는 뜻이다(요구 폭이 브라우저마다
    다르다). 좁은 화면에서만 글꼴·여백을 한 단계 더 줄여 14px 정도 여유를 만든다.
    ⚠ appearance:none 으로 폭을 줄이려 하지 말 것 — 아이폰에서 빈 알약이 된다(위 주석).  */
@media (max-width: 380px) {
  .dc-dates { gap: 5px; }
  .dc-dates > .book__field > input[type="date"] { padding: 9px 5px; font-size: .78rem; }
  .settle-range { gap: 5px; }
  .settle-range input[type="date"] { padding: 6px 5px; font-size: .78rem; }
}