/* ════════════════════════════════════════════════════════════════════════
   KoAus 2.0 — Strict Monochrome Design System
   Font: Urbanist (EN) + Noto Sans KR (KO)
════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 모바일 네이티브 앱 경험 (App-like Feel) ── */
/* 1) 길게 눌러 텍스트 드래그 복사 방지 — input/textarea/contenteditable 만 예외 */
html, body {
  -webkit-user-select: none;
  -ms-user-select: none;
      user-select: none;
  /* 링크/이미지 길게 눌렀을 때 iOS 기본 콜아웃 차단 */
  -webkit-touch-callout: none;
  /* 탭 시 파란/회색 하이라이트 박스 제거 */
  -webkit-tap-highlight-color: transparent;
  /* 끝까지 스크롤 시 고무줄 바운스 차단 */
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}
/* 입력 가능한 요소는 반드시 선택 허용 — 회원가입/글쓰기/검색 동작 보장 */
input, textarea, select,
[contenteditable="true"],
[contenteditable=""] {
  -webkit-user-select: text;
  -ms-user-select: text;
      user-select: text;
  -webkit-touch-callout: default;
}
/* 의도적으로 텍스트 선택을 허용해야 하는 영역(예: 게시글 본문)에 .koaus-selectable 부여 */
.koaus-selectable, .koaus-selectable * {
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
      user-select: text !important;
  -webkit-touch-callout: default !important;
}
/* iOS Safe Area 대응 (notch / home indicator) — 기존 컨테이너에 영향 최소 */
@supports (padding: max(0px)) {
  body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}


/* ── 라이트 모드 (기본) ── */
:root {
  --bg-base:        #ffffff;
  --bg-surface:     #fafafa;
  --bg-card:        #f4f4f4;
  --bg-input:       #f8f8f8;
  --bg-elevated:    #ededed;
  --border:         #e0e0e0;
  --border-subtle:  #ebebeb;
  --border-focus:   #000000;
  --text-primary:   #000000;
  --text-secondary: #000000;
  --text-muted:     #000000;
  --accent:         #000000;
  --accent-hover:   #222222;
  --accent-dim:     rgba(0, 0, 0, 0.06);
  --accent-glow:    rgba(0, 0, 0, 0.10);
  --accent-text:    #ffffff;
  --green:          #16a34a;
  --green-bg:       rgba(22, 163, 74, 0.08);
  --red:            #dc2626;
  --gold:           #d97706;
  --gold-light:     #b45309;
  --gold-bg:        rgba(245, 158, 11, 0.08);
  --gold-border:    rgba(245, 158, 11, 0.22);
  --orange:         #ea580c;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --font: 'Urbanist', 'Noto Sans KR', system-ui, sans-serif;
}

/* ── 다크 모드 ── */
:root[data-theme="dark"] {
  --bg-base:        #000000;
  --bg-surface:     #0a0a0a;
  --bg-card:        #111111;
  --bg-input:       #141414;
  --bg-elevated:    #1a1a1a;
  --border:         #282828;
  --border-subtle:  #1e1e1e;
  --border-focus:   #ffffff;
  --text-primary:   #ffffff;
  --text-secondary: #ffffff;
  --text-muted:     #ffffff;
  --accent:         #ffffff;
  --accent-hover:   #dddddd;
  --accent-dim:     rgba(255, 255, 255, 0.08);
  --accent-glow:    rgba(255, 255, 255, 0.10);
  --accent-text:    #000000;
  --green:          #4ade80;
  --green-bg:       rgba(74, 222, 128, 0.08);
  --red:            #f87171;
  --gold:           #f59e0b;
  --gold-light:     #fbbf24;
  --gold-bg:        rgba(245, 158, 11, 0.10);
  --gold-border:    rgba(245, 158, 11, 0.25);
  --orange:         #fb923c;
}

html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  padding-top: 56px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ════════════════════════════════════════════════════════════════════════
   Topbar
════════════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: 56px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.topbar-brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.topbar-logo-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 2px solid #111; background: #fff; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
}
.logo-ks {
  display: flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; background: #111; color: #fff;
  border-radius: 2px; font-size: 8.5px; font-weight: 900; letter-spacing: -0.5px;
}
.topbar-logo-text {
  font-size: 24px; font-weight: 900; letter-spacing: -0.5px;
  color: var(--text-primary);
}
.topbar-tagline {
  display: flex; align-items: center; gap: 7px;
  margin-left: 6px; padding-left: 10px;
  border-left: 1px solid var(--border);
  font-size: 11px; font-weight: 500; color: var(--text-muted); line-height: 1.2;
  white-space: nowrap;
}
.topbar-tagline b { color: var(--text-secondary); font-weight: 700; }
.topbar-tagline-div { color: var(--border); }
@media (max-width: 720px) { .topbar-tagline { display: none; } }
.topbar-actions {
  display: flex; align-items: center; gap: 8px;
}
.topbar-login-btn {
  padding: 7px 16px;
  background: var(--accent); color: var(--accent-text);
  border: none; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.02em;
  transition: background 0.15s, opacity 0.15s;
  text-decoration: none; display: inline-flex; align-items: center;
}
.topbar-login-btn:hover { opacity: 0.8; }
.topbar-menu-btn {
  width: 38px; height: 38px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.topbar-menu-btn:hover { background: var(--bg-card); border-color: var(--accent); color: var(--accent); }
/* 헤더 테마 토글 — 햄버거 버튼과 동일한 B&W 아이콘 버튼. 라이트=달, 다크=해 */
.topbar-theme-btn {
  width: 38px; height: 38px; padding: 0;
  background: none; border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.topbar-theme-btn:hover { background: var(--bg-card); border-color: var(--accent); color: var(--accent); }
.topbar-theme-btn .ico-sun  { display: none; }
.topbar-theme-btn .ico-moon { display: block; }
[data-theme="dark"] .topbar-theme-btn .ico-sun  { display: block; }
[data-theme="dark"] .topbar-theme-btn .ico-moon { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   Sidebar Overlay
════════════════════════════════════════════════════════════════════════ */
.sidebar-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }

/* ════════════════════════════════════════════════════════════════════════
   Sidebar — 항상 다크
════════════════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 300px;
  z-index: 1100;
  background: #000000;
  border-left: 1px solid #1e1e1e;
  transform: translateX(100%);
  transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar.open { transform: translateX(0); }

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}
.sidebar-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 24px; font-weight: 900; letter-spacing: -0.5px;
  color: #ffffff;
}
.sidebar-brand .topbar-logo-icon { width: 30px; height: 30px; }
.sidebar-brand .logo-ks         { width: 20px; height: 20px; font-size: 8px; }
.sidebar-brand-text { color: #fff; font-weight: 900; line-height: 1; }
.sidebar-close-btn {
  width: 34px; height: 34px;
  background: #111; border: 1px solid #222;
  border-radius: var(--r-sm); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px;
  transition: background 0.15s, color 0.15s;
}
.sidebar-close-btn:hover { background: #1a1a1a; color: #fff; }
.sidebar-header-right { display: flex; align-items: center; gap: 10px; }
.sidebar-acct-top {
  display: inline-block; font-size: 14px; font-weight: 800; line-height: 1;
  color: #000; background: #fff; border: 1px solid #fff; border-radius: 6px;
  padding: 8px 22px; white-space: nowrap; text-decoration: none;
  letter-spacing: -0.01em; transition: opacity 0.12s;
}
.sidebar-acct-top:hover { opacity: 0.82; }

/* 사이드바 설정 (테마) */
.sidebar-settings {
  padding: 14px 20px;
  border-bottom: 1px solid #1a1a1a;
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.sidebar-setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* ── 아코디언 내비 ── */
.sidebar-nav { flex: 1; overflow-y: auto; padding-bottom: 40px; }

.accord-item { border-bottom: 1px solid #111; }

.accord-header {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: none; border: none;
  color: #fff;
  font-family: var(--font); font-size: 22px !important; font-weight: 800 !important;
  line-height: 1.2;
  cursor: pointer; text-align: left;
  transition: background 0.12s, color 0.12s;
}
.accord-header:hover { background: #0a0a0a; color: #ffffff; }
.accord-header em {
  font-style: normal; font-size: 15px !important; font-weight: 600 !important;
  color: #fff; margin-left: 8px; letter-spacing: 0.02em;
}
.accord-arrow {
  flex-shrink: 0; color: #fff;
  transition: transform 0.25s ease, color 0.15s;
}
.accord-item.open .accord-arrow { transform: rotate(180deg); color: #fff; }

.accord-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.28s ease;
  background: #050505;
}
.accord-item.open .accord-body { max-height: 1400px; }

.accord-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 8px 28px;
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700;
  line-height: 1.3;
  transition: background 0.12s, color 0.12s;
}
.accord-link:hover { background: #0a0a0a; color: #ffffff; }
.accord-link--active { color: #ffffff; font-weight: 800; }
.accord-link--soon { opacity: 0.35; pointer-events: none; }

/* Nested sub-categories (Living / Work / Visa & Migration) */
.accord-subgroup { padding: 4px 0 6px; border-bottom: 1px solid #0d0d0d; }
/* 2순위 — 대분류 카테고리(Living/Work/Visa): 주 이름보다 작고 세부메뉴보다 큼 */
/* 2순위 카테고리: 색맹 안전 + WCAG 충족 일렉트릭 블루 포인트 컬러 (크기 16px 유지) */
.accord-sublabel {
  display: block; padding: 6px 20px 3px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #3B82F6;
}
/* 3순위 — 세부 메뉴(쉐어/렌트 올리기·구하기 등): 가장 작게 */
/* 한글 + 영문 괄호 표기가 띄어쓰기 한 칸으로 자연스럽게 이어지도록
   .accord-link 의 justify-content: space-between 을 flex-start 로 override */
.accord-link--sub {
  display: flex;
  justify-content: flex-start;
  padding: 6px 20px 6px 32px; font-size: 13px; font-weight: 500; color: #fff; line-height: 1.3;
}
.accord-link--sub > em,
.accord-link--sub > * { margin-left: 0; }
.accord-link--sub em {
  font-style: normal; font-weight: 500; color: inherit;
  margin-left: 4px;
}
.accord-link--sub:hover { color: #fff; }
/* Depth 2 토글 버튼 — .accord-sublabel 폰트/크기/색은 그대로 상속, 우측 화살표만 추가 */
.sub-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none;
  font-family: var(--font); cursor: pointer; text-align: left;
}
.sub-arrow { flex-shrink: 0; transition: transform 0.25s ease; }
/* Depth 3 소분류 컨테이너 — 초기 완전 숨김(닫힘), 클릭 시에만 펼침 */
.sub-menu { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.accord-subgroup.open .sub-menu { max-height: 600px; }
.accord-subgroup.open .sub-arrow { transform: rotate(180deg); }
/* Care: 하위 메뉴 없는 단일 대분류 카테고리 — 2순위 블루 스타일 (클릭형) */
.accord-link--cat {
  padding: 9px 20px; font-size: 16px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: #3B82F6;
}
.accord-link--cat:hover { background: #0a0a0a; color: #3B82F6; }
.soon-tag {
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  background: #111; color: #fff;
  border: 1px solid #1e1e1e;
}

.sidebar-footer-nav {
  padding: 16px 20px;
  border-top: 1px solid #111;
  flex-shrink: 0;
}
/* 킬러 콘텐츠 — 파워볼: 1.5배+ 확대, 최대 굵기, 고대비 앰버로 시선 집중 */
.sidebar-exchange-link {
  display: block; font-size: 19px; font-weight: 800;
  color: #F59E0B; text-decoration: none; letter-spacing: -0.01em;
  transition: opacity 0.15s;
}
.sidebar-exchange-link:hover { opacity: 0.85; }

@media (max-width: 480px) { .sidebar { width: 100%; } }

/* ════════════════════════════════════════════════════════════════════════
   Sub-page Layout
════════════════════════════════════════════════════════════════════════ */
.page-container {
  width: 100%; max-width: 900px;
  margin: 0 auto; padding: 14px 24px 64px;     /* 게시판 상단 여백을 탭-구분선 간격(~14px) 수준으로 압축 */
  display: flex; flex-direction: column; gap: 12px;
}
.page-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.page-title { font-size: 26px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.5px; }
.page-subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.page-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-decoration: none; padding: 7px 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: color 0.15s, border-color 0.15s;
}
.page-back:hover { color: var(--accent); border-color: var(--accent); }

/* 페이지 헤더 우측 액션 그룹 — [홈으로] 위, [문의하기] 아래 세로 정렬 */
.page-header-actions {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  flex-shrink: 0;
}
/* 마이페이지용 column 변형 — [← 홈으로] 위 / [로그아웃] 아래 정갈한 세로 정렬 */
.page-header-actions--col {
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end; align-self: flex-start;
  min-width: 110px;
}
.page-header-actions--col .page-back { width: 100%; justify-content: center; box-sizing: border-box; }
.mypage-logout-btn {
  background: none; cursor: pointer;
  font-family: inherit;
}
.page-inquiry {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 800; letter-spacing: -0.01em;
  text-decoration: none; padding: 7px 14px;
  background: var(--text-primary); color: var(--bg-base);
  border: 1px solid var(--text-primary); border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.page-inquiry:hover { background: var(--bg-base); color: var(--text-primary); }

/* ── Others 섹션 page-header 정밀 그리드 정렬 ──
   · 대제목 우측에 [← 홈으로] [📩 문의하기] 가로 row
   · 그 아래 [🛡 Official 인증 받기] 가 두 버튼 폭 합과 100% 동일하게 늘어남
   · CSS Grid 로 좌우 라인 픽셀 정합 보장 */
.page-header-actions--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-self: flex-start;
  flex-shrink: 0;
  min-width: 0;
}
.page-header-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 홈/문의 동일 폭 — 두 버튼 가로 합산 = 아래 Official 폭 */
  gap: 6px;
}
.page-header-btn-row > .page-back,
.page-header-btn-row > .page-inquiry {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}
/* Official 인증 버튼 풀폭 modifier */
.trades-inquiry-btn--full {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* ── Others 헤더 정돈: 단일 [← 홈으로] 우측 끝 + 세로 중앙 ── */
.page-header-actions--flat {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  min-width: 0;
}
.page-header-actions--flat .page-header-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* ── 글로벌 검색 컴포넌트 (search-bar.js) — Black & White 톤 ──
   · 사이즈는 .board-write-btn / .board-write-btn--ghost (padding 10/20, font 14px)
     와 100% 일치 — 같은 줄에 나란히 놓아도 높이/체급 통일 */
.koaus-search-bar { width: 100%; margin: 8px 0; min-width: 0; }
.koaus-search-row {
  display: grid;
  grid-template-columns: minmax(110px, 140px) 1fr auto auto;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.koaus-search-scope,
.koaus-search-input {
  height: 40px;                /* board-write-btn 과 동일 높이 */
  padding: 0 14px;             /* 10/20 → 좌우 14px, 세로는 height 로 통제 */
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  border-radius: var(--r-md);
  font: 700 14px var(--font);  /* board-write-btn 과 동일 font-size */
  letter-spacing: -0.01em;
  min-width: 0;
  box-sizing: border-box;
}
.koaus-search-scope { cursor: pointer; }
.koaus-search-input::placeholder { color: var(--text-muted); font-weight: 500; }
.koaus-search-scope:focus,
.koaus-search-input:focus {
  outline: none; border-color: var(--text-primary);
}
.koaus-search-btn {
  height: 40px;
  padding: 0 18px;
  background: var(--text-primary);
  color: var(--bg-base);
  border: 1px solid var(--text-primary);
  border-radius: var(--r-md);
  font: 700 14px var(--font);
  letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s, background 0.12s, color 0.12s;
  box-sizing: border-box;
}
.koaus-search-btn:hover { opacity: 0.85; }
.koaus-search-clear {
  height: 40px;
  padding: 0 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: 700 13px var(--font); color: var(--text-muted); cursor: pointer;
  box-sizing: border-box;
}
.koaus-search-clear:hover { color: var(--text-primary); border-color: var(--text-primary); }
@media (max-width: 640px) {
  .koaus-search-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "scope scope" "input input" "btn clr";
    gap: 6px;
  }
  .koaus-search-scope { grid-area: scope; height: 36px; font-size: 13.5px; }
  .koaus-search-input { grid-area: input; height: 36px; font-size: 13.5px; }
  .koaus-search-btn   { grid-area: btn;   height: 36px; font-size: 13.5px; padding: 0 14px; }
  .koaus-search-clear { grid-area: clr;   height: 36px; font-size: 12.5px; padding: 0 10px; }
}

/* ── Others 카테고리(restaurants/gp/salon/trades) 페이지 간 자유 이동 nav ── */
.others-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 10px);
  margin: clamp(6px, 1.2vw, 12px) 0;
}
.others-nav.others-nav--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.others-nav-item {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: clamp(8px, 1.4vw, 12px) clamp(6px, 1.2vw, 12px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: clamp(11.5px, 1.4vw, 13.5px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  min-width: 0;
}
.others-nav-item:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.others-nav-item.is-active {
  border-color: var(--text-primary);
  background: var(--text-primary);
  color: var(--bg-base);
  cursor: default;
  pointer-events: none;
}
.others-nav-emo { font-size: 1.1em; line-height: 1; }
.others-nav-label { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .others-nav-label { font-size: 11px; }
  .others-nav-item  { padding: 8px 6px; }
}

/* ════════════════════════════════════════════════════════════════════════
   AdSense Wrap
════════════════════════════════════════════════════════════════════════ */
.adsense-wrap {
  height: 90px; min-height: 0; max-height: 90px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.adsense-wrap ins { display: block; width: 100%; height: 90px; }

/* ════════════════════════════════════════════════════════════════════════
   Home Layout — 3 Components
════════════════════════════════════════════════════════════════════════ */
.home-main {
  width: 100%; max-width: 760px;
  margin: 0 auto; padding: 36px 24px 80px;
  display: flex; flex-direction: column; gap: 20px;
  flex: 1;
}

/* 메인 단축 카드 (5:5 · 동일 타이틀 폰트 · 세로 3/5 컴팩트) */
.home-shortcuts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 22px auto 4px; width: 100%;
}
.home-shortcut {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 22px 26px; min-height: 120px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--text-primary); text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.home-shortcut:hover {
  border-color: var(--text-primary);
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
}
.home-shortcut-arrow {
  position: absolute; top: 18px; right: 22px;
  font-size: 18px; font-weight: 800; color: var(--text-muted);
  transition: color 0.15s, transform 0.15s;
}
.home-shortcut:hover .home-shortcut-arrow { color: var(--text-primary); transform: translateX(4px); }
.home-shortcut-label {
  font-size: 22px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.015em; line-height: 1.2;
}
.home-shortcut-desc {
  font-size: 13px; font-weight: 500; color: var(--text-secondary); line-height: 1.55; letter-spacing: -0.005em;
}
@media (max-width: 640px) {
  .home-shortcuts { grid-template-columns: 1fr; gap: 12px; }
  .home-shortcut { padding: 18px 22px; min-height: 96px; }
  .home-shortcut-label { font-size: 20px; }
}

/* Notice Board · 전광판(Marquee) 글로벌 롤링 배너
   ┌──────────────────────────────────────────────────────────────────┐
   │ [Notice] | [광고주] |   [광고내용 ↗ 우→좌 흐름]            [‹›]   │
   │  ↑ 좌측 고정 (배경 불투명·z-index↑)    ↑ viewport(overflow:hidden) │
   └──────────────────────────────────────────────────────────────────┘ */
.notice-section {}
.notice-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
}
.notice-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 8px;
  background: var(--accent); color: var(--accent-text);
  border-radius: 3px; flex-shrink: 0;
}
/* 좌측 고정 영역 [Notice] | [광고주] | — 절대 움직이지 않음, 흐름 영역과 시각적 분리 */
.ticker-fixed {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  background: var(--bg-base);
  position: relative;
  z-index: 2;
  padding-right: 4px;
}
.ticker-fixed .ticker-sponsor { font-weight: 800; color: var(--text-primary); }
.ticker-fixed .ticker-sep { color: var(--border); }
/* 전광판 뷰포트 — 좌측 고정 영역 우측에 위치, 우측 끝 화살표 박스 침범 방지 페이드 마스크 */
.ticker-viewport {
  flex: 1; min-width: 0;
  overflow: hidden;
  position: relative;
  height: 24px; line-height: 24px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
}
/* 흐름 트랙 — padding-left:100%로 부모 우측 끝에서 시작, translateX(-100%)로 좌측 바깥까지 */
.ticker-track {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: koaus-marquee 10s linear infinite;  /* 9s × 0.9배 = 10s (속도 ↓, 가독성 ↑) */
  will-change: transform;
}
.notice-row:hover .ticker-track { animation-play-state: paused; }
@keyframes koaus-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-secondary);
  text-decoration: none; line-height: 1;
}
.ticker-item[href] { cursor: pointer; }
.ticker-item[href]:hover { color: var(--text-primary); }
.ticker-content {}
.ticker-arrow { font-size: 11px; opacity: 0.7; }
.ticker-arrow:empty { display: none; }
/* 우측 끝 결합 화살표 박스 ‹› — 흑/백 대비 테두리 */
.ticker-nav-group {
  flex-shrink: 0;
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--text-primary);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-base);
}
.ticker-nav {
  background: transparent;
  color: var(--text-primary);
  border: none;
  font-family: 'Urbanist', sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  padding: 4px 9px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ticker-nav + .ticker-nav { border-left: 1.5px solid var(--text-primary); }
.ticker-nav:hover { background: var(--text-primary); color: var(--bg-base); }
.ticker-nav:active { transform: scale(0.94); }

/* Exchange Rate Calculator */
.calc-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.calc-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.calc-title { font-size: 20px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.4px; }
.calc-meta { display: flex; flex-direction: column; gap: 3px; }
.calc-updated { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.calc-input-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.calc-amount-wrap {
  flex: 1; min-width: 120px;
  display: flex; align-items: center;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color 0.2s;
}
.calc-amount-wrap:focus-within { border-color: var(--border-focus); }
.calc-input {
  flex: 1; padding: 14px 12px;
  background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: var(--font);
  font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 0;
}
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc-select {
  padding: 10px 32px 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text-primary);
  font-family: var(--font); font-size: 15px; font-weight: 700;
  cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color 0.2s;
}
:root[data-theme="dark"] .calc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.calc-select:focus { border-color: var(--border-focus); }
.calc-arrow { font-size: 20px; color: var(--text-muted); flex-shrink: 0; font-weight: 300; }
.calc-swap-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.2s;
}
.calc-swap-btn:hover { background: var(--bg-elevated); border-color: var(--accent); color: var(--accent); transform: rotate(180deg); }

.calc-result-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.calc-result {
  font-size: 48px; font-weight: 900;
  color: var(--text-primary); letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.calc-result-currency {
  font-size: 20px; font-weight: 700; color: var(--text-muted);
}
.calc-rate-info { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* 기준 환율 직접 입력 칸 */
.calc-rate-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--border-subtle);
}
.calc-rate-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.calc-rate-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 4px 12px; transition: border-color 0.2s;
}
.calc-rate-wrap:focus-within { border-color: var(--border-focus); }
.calc-rate-input {
  width: 120px; padding: 8px 0; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: var(--font); font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right;
}
.calc-rate-input::-webkit-outer-spin-button,
.calc-rate-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc-rate-unit { font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════════════
   Exchange Sub-page Cards
════════════════════════════════════════════════════════════════════════ */
.exchange-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
/* 계산기 페이지: 4개 어플 카드 동일 가로폭으로 한 줄 (가로 스크롤 금지) */
#exchangeGrid { grid-template-columns: repeat(4, 1fr); gap: 10px; overflow: visible; padding: 0; }
#exchangeGrid .exchange-card { padding: 14px 12px; gap: 8px; min-width: 0; }
/* API 매매기준율 + 기준 환율 입력: 한 카드 안에 좌우 정렬 (Flex space-between) */
.exchange-live-rate {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
}
.exchange-live-text {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 700; color: var(--text-secondary); letter-spacing: -0.005em;
}
.exchange-live-rate.is-live { background: var(--text-primary); border-color: var(--text-primary); }
.exchange-live-rate.is-live .exchange-live-text { color: var(--bg-card); font-weight: 800; }
.exchange-live-input-wrap {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.exchange-live-input-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; white-space: nowrap;
}
.exchange-live-input {
  width: 92px; padding: 5px 8px; background: transparent; border: none;
  font-family: var(--font); font-size: 13px; font-weight: 800; color: var(--text-primary); text-align: right;
  outline: none;
}
.exchange-live-input-unit { font-size: 11px; font-weight: 700; color: var(--text-muted); }
/* 다크/반전 시에도 입력 박스 자체는 흰 배경 유지 → 가독성 확보 */

/* 센트비 송금 방식 셀렉트 */
.exchange-speed { display: flex; flex-direction: column; gap: 4px; }
.exchange-speed-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; }
.exchange-speed-select {
  width: 100%; padding: 6px 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 11.5px; font-weight: 700; color: var(--text-primary); cursor: pointer;
}
.exchange-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.15s;
}
.exchange-card:hover { transform: translateY(-2px); }
.exchange-card--best { border: 2px solid var(--text-primary); }
.exchange-app-name { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.exchange-app-sub  { font-size: 12px; color: var(--text-muted); }
.exchange-rate-row { display: flex; align-items: baseline; gap: 6px; }
.exchange-rate     { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }
.exchange-unit     { font-size: 13px; color: var(--text-muted); }
.exchange-fee-row  { font-size: 12px; color: var(--text-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.exchange-best-badge {
  display: inline-block; font-size: 9px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text);
}
.exchange-updated { font-size: 11px; color: var(--text-muted); text-align: center; }

/* ── 환율 계산기 (양방향 한도 검증 · B&W) ── */
.exchange-calc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 16px; margin-bottom: 18px; }
.exchange-calc-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.exchange-field { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.exchange-field-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.04em; }
.exchange-field-inner { display: flex; gap: 8px; }
.exchange-cur-select {
  padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer;
}
.exchange-amount-input {
  flex: 1; min-width: 0; padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 16px; font-weight: 800; color: var(--text-primary); text-align: right;
}
.exchange-amount-input[readonly] { background: var(--bg-elevated); color: var(--text-secondary); }
.exchange-swap-btn {
  flex-shrink: 0; align-self: flex-end; padding: 10px 14px; background: var(--accent); color: var(--accent-text);
  border: none; border-radius: 999px; font-size: 16px; font-weight: 800; cursor: pointer; transition: opacity 0.15s;
}
.exchange-swap-btn:hover { opacity: 0.85; }

.exchange-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.exchange-result-row { font-size: 13px; color: var(--text-secondary); padding: 8px 10px; background: var(--bg-elevated); border-radius: var(--r-sm); }
.exchange-result-row strong { font-size: 15px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-left: 6px; }
.exchange-lim-row { font-size: 12px; font-weight: 800; color: var(--text-primary); line-height: 1.5; padding: 8px 10px; background: var(--bg-elevated); border-radius: var(--r-sm); }
/* 동적 에러 메시지: 카드 안에서 확 튀어나오는 굵은 흑백 반전 박스 */
.exchange-err {
  font-size: 14.5px; font-weight: 900; color: var(--bg-card);
  background: var(--text-primary); border: 2px solid var(--text-primary);
  border-radius: var(--r-sm); padding: 12px 14px; line-height: 1.35;
  letter-spacing: -0.01em; text-align: center;
}
.exchange-result-row strong { font-size: 17px; font-weight: 900; }
.exchange-benefits { display: flex; flex-direction: column; gap: 3px; }
.exchange-benefit-row { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.5; }
.exchange-link {
  margin-top: auto; align-self: flex-end;
  font-size: 12px; color: var(--text-primary); font-weight: 800; text-decoration: none;
  border-bottom: 1px solid var(--border); padding: 2px 0;
}
.exchange-link:hover { border-bottom-color: var(--text-primary); }

.exchange-card.is-disabled { opacity: 0.7; }
.exchange-card.is-disabled .exchange-app-name { color: var(--text-muted); }
.exchange-disabled-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--text-muted); color: var(--accent-text);
}
.exchange-unsupported { font-size: 12.5px; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; line-height: 1.5; }

.exchange-fallback {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 28px 24px; text-align: center;
}
.exchange-fallback-title { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
.exchange-fallback p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; margin: 0; max-width: 640px; margin-left: auto; margin-right: auto; }

.exchange-disclaimer {
  font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.6;
  margin-top: 18px; padding: 14px 16px; border-top: 1px solid var(--border);
}
.exchange-disclaimer em { font-style: normal; color: var(--text-secondary); font-weight: 700; }
/* Auto 카테고리별 하단 주의사항 — 렌트카·인스펙션·정비소·견인 (4종, JS로 텍스트 갱신) */
.auto-disclaimer {
  margin-top: 8px; padding: 10px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--text-muted); line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════════════════
   Points Calculator
════════════════════════════════════════════════════════════════════════ */
.points-form { display: flex; flex-direction: column; gap: 20px; }
.points-group {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.points-group-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  color: var(--text-secondary); background: var(--bg-surface);
}
.points-options { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }

/* Points sections as accordions */
.points-acc-hdr {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--bg-surface);
  border: none; border-bottom: 1px solid transparent;
  cursor: pointer; font-family: var(--font); text-align: left;
}
.points-acc.open .points-acc-hdr { border-bottom-color: var(--border); }
.points-acc .points-group-title { padding: 0; border: none; background: none; }
.points-acc-arrow { flex-shrink: 0; color: var(--text-muted); transition: transform 0.25s ease; }
.points-acc.open .points-acc-arrow { transform: rotate(180deg); }
.points-acc .points-options { max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: max-height 0.3s ease, padding 0.3s ease; }
.points-acc.open .points-options { max-height: 700px; padding-top: 14px; padding-bottom: 14px; }
.points-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s;
}
.points-option:hover { background: var(--bg-elevated); }
.points-option input[type="radio"],
.points-option input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.points-option-label { flex: 1; font-size: 14px; color: var(--text-primary); }
.points-option-pts { font-size: 13px; font-weight: 700; color: var(--accent); min-width: 50px; text-align: right; }
.points-total-bar {
  position: sticky; bottom: 0;
  background: var(--bg-surface); border-top: 2px solid var(--accent);
  padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.points-total-label { font-size: 14px; color: var(--text-secondary); font-weight: 600; }
.points-total-score { font-size: 36px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.points-total-status { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.points-total-status--pass { background: var(--green-bg); color: var(--green); border: 1px solid rgba(22,163,74,.3); }
.points-total-status--fail { background: rgba(220,38,38,.08); color: var(--red); border: 1px solid rgba(220,38,38,.2); }
/* 가채점 섹션 래퍼 (Visa & Migration 페이지 상단) */
.points-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px;
  margin-bottom: 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.points-section-head { display: flex; flex-direction: column; gap: 4px; }
.points-section-title { font-size: 20px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.3px; }
.points-section-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.points-total-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.points-total-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.points-disclaimer {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 12px 16px;
  font-size: 12px; color: var(--text-muted); line-height: 1.65; margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   Community Board
════════════════════════════════════════════════════════════════════════ */
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.board-count { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.board-write-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; background: var(--accent); color: var(--accent-text);
  border: none; border-radius: var(--r-md);
  font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s, transform 0.1s;
}
.board-write-btn:hover { opacity: 0.85; transform: translateY(-1px); }
/* 상세 필터 버튼 — 글쓰기와 동일 크기, 아웃라인으로 구분 */
.board-write-btn--ghost {
  background: none; color: var(--text-primary); border: 1px solid var(--border);
}
.board-write-btn--ghost:hover { opacity: 1; border-color: var(--text-primary); background: var(--bg-elevated); }
/* 최근 검색 기록 칩 */
.recent-searches { margin-top: 12px; }
.recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.recent-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.recent-clear {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-decoration: underline; transition: color 0.12s;
}
.recent-clear:hover { color: var(--text-primary); }
.recent-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recent-chip {
  display: inline-flex; align-items: center; max-width: 100%;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px;
  overflow: hidden; transition: border-color 0.12s;
}
.recent-chip:hover { border-color: var(--text-primary); }
.recent-chip-main {
  background: none; border: none; cursor: pointer; padding: 6px 4px 6px 11px;
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text-secondary);
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-chip:hover .recent-chip-main { color: var(--text-primary); }
.recent-chip-x {
  background: none; border: none; cursor: pointer; padding: 6px 10px 6px 4px;
  font-size: 11px; line-height: 1; color: var(--text-muted); transition: color 0.12s;
}
.recent-chip-x:hover { color: var(--text-primary); }

.post-list-table {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.post-list-head {
  display: grid; grid-template-columns: 50px 1fr 100px 90px;
  padding: 10px 20px;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.post-row {
  display: grid; grid-template-columns: 50px 1fr 100px 90px;
  padding: 14px 20px; border-bottom: 1px solid var(--border-subtle);
  align-items: center; transition: background 0.12s; cursor: pointer;
}
.post-row:last-child { border-bottom: none; }
.post-row:hover { background: var(--bg-card); }
.post-num    { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.post-title  { font-size: 14px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-author { font-size: 12px; color: var(--text-secondary); }
.post-date   { font-size: 11px; color: var(--text-muted); }

/* Jobs board: 5-column with bookmark */
.post-list-table--jobs .post-list-head,
.post-list-table--jobs .post-row { grid-template-columns: 44px 1fr 150px 96px 36px; }
.post-star { font-size: 11px; text-align: center; }
.post-list-table--jobs .post-row .bookmark-btn { justify-self: center; font-size: 18px; }
.post-empty  { padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* ── Write Modal ── */
.write-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.write-overlay.open { opacity: 1; pointer-events: auto; }
.write-modal {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 24px 28px;
  width: 100%; max-width: 720px;
  max-height: calc(100vh - 40px);   /* 모달 자체가 뷰포트 안에 들어오게 */
  overflow-y: auto;                  /* 폼 내부만 스크롤 — 바디 스크롤 차단 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;      /* 스크롤이 부모(body)로 전파되지 않도록 */
  display: flex; flex-direction: column; gap: 13px;
  transform: translateY(16px); transition: transform 0.2s;
}
.write-overlay.open .write-modal { transform: translateY(0); }
.write-modal-title {
  font-size: 18px; font-weight: 800; color: var(--text-primary);
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.write-field { display: flex; flex-direction: column; gap: 6px; }
.write-label { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: 0.01em; margin-bottom: 2px; }
/* 2단(좌/우) 레이아웃 — 스크롤 최소화 (모바일/방구하기 모드에서는 1단) */
.write-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.write-col { display: flex; flex-direction: column; gap: 11px; }
.write-grid--find { grid-template-columns: 1fr; }
/* 작성자 배지 — 헤더 우측(닫기 버튼 왼쪽), 기존 입력칸 테두리 스타일 유지 */
.write-author-badge {
  margin-left: auto; margin-right: 12px; white-space: nowrap;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 600; color: var(--text-primary);
}
.write-author-badge b { font-weight: 800; }
.required-mark { margin-left: 4px; font-weight: bold; color: var(--text-primary); }
.write-input, .write-textarea {
  width: 100%; display: block;
  box-sizing: border-box;   /* padding 이 width 에 포함되어 가로 스크롤 차단 */
  max-width: 100%;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text-primary);
  font-family: var(--font); font-size: 15px; line-height: 1.4; padding: 13px 15px; outline: none;
  transition: border-color 0.2s;
}
.write-input::placeholder, .write-textarea::placeholder { color: var(--text-muted); }
.write-input[readonly] { background: var(--bg-elevated); cursor: default; }
/* 면책 조항 동의 — 차분한 회색 텍스트 + 명확한 체크박스 */
.disclaimer-check {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  font-size: 12.5px; line-height: 1.6; color: #64748B;
}
.disclaimer-check input { accent-color: var(--accent); width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; cursor: pointer; }
/* ── 글쓰기 폼 하단 주의사항·공지 박스 ── */
.caution-box {
  margin-top: 6px; padding: 12px 14px; border-radius: 10px;
  background: #fff5f5; border: 1px solid #fecaca;
  font-size: 12.5px; line-height: 1.65; color: #7a2828;
}
.caution-box .caution-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; color: #b91c1c; margin-bottom: 6px; font-size: 13px;
}
.caution-box ol { margin: 0; padding-left: 20px; }
.caution-box ol li { margin: 2px 0; }
:root[data-theme="dark"] .caution-box {
  background: #2a1414; border-color: #5a2424; color: #f3c2c2;
}
:root[data-theme="dark"] .caution-box .caution-title { color: #ff8c8c; }
/* ── KoAus 미니 공용 배너 (Notice 상단 1/4 사이즈) ── */
.koaus-mini-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 600px;          /* 기존 hero(1200px)의 1/2 — 화면 좁게 */
  width: calc(100% - 24px);
  margin: 8px auto 6px;      /* 중앙 정렬 + 위·아래 콤팩트 */
  padding: 8px 14px;
  border-radius: 999px;      /* 알약 모양 */
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(15,23,42,.18);
  box-sizing: border-box;
  overflow: hidden;
}
.koaus-mini-banner .mn-ico { font-size: 14px; flex-shrink: 0; }
.koaus-mini-banner .mn-text {
  flex: 1; min-width: 0;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.koaus-mini-banner:hover { filter: brightness(1.08); transform: translateY(-1px); transition: filter .12s, transform .12s; }
:root[data-theme="dark"] .koaus-mini-banner {
  background: linear-gradient(90deg, #1e293b 0%, #334155 100%);
}
@media (max-width: 767px) {
  .koaus-mini-banner {
    max-width: calc(100% - 16px);
    margin: 4px auto;
    padding: 6px 10px;
    font-size: 11.5px;
    border-radius: 999px;
  }
}

/* ── KoAus 히어로 배너 (PC Swiper / 모바일 1:3~1:4 카드) ── */
.koaus-hero {
  /* Swiper 가로폭 계산 안정 — display:flex 절대 금지 (슬라이드 폭 0으로 계산되어 우측 치우침) */
  display: block;
  width: 100%; max-width: 1200px;
  margin: 14px auto 18px;
  padding: 0 16px;
  box-sizing: border-box;
  overflow: hidden;   /* Swiper 슬라이드가 컨테이너 폭 초과 시 클립 */
}
.koaus-hero-pc, .koaus-hero-mobile {
  width: 100%; max-width: 100%;
  margin: 0 auto;
}
.koaus-hero-pc { display: block; }
.koaus-hero-mobile { display: none !important; }  /* 단일카드 패턴 폐기 — 모바일도 PC swiper */
.koaus-hero-pc[hidden] { display: none !important; }
.koaus-hero-pc .swiper {
  width: 100%;
  aspect-ratio: 18 / 7;  /* 와이드 히어로 — 세로 1/3 증액(24/7 → 18/7) */
  max-height: 480px;     /* 360 → 480 (1/3 증가) */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .14);
  margin-left: auto; margin-right: auto;  /* 중앙 정렬 안전망 */
}
.koaus-hero-pc .swiper-slide {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  padding: 32px 48px;
  background-size: cover; background-position: center;
  text-decoration: none;                /* a 태그 underline 차단 */
  cursor: pointer;                       /* 클릭 가능 슬라이드 시각 단서 */
}
.koaus-hero-pc a.swiper-slide:hover { text-decoration: none; }
.koaus-hero-mobile a.hero-card { color: #fff; text-decoration: none; display: block; }
.koaus-hero-pc .swiper-slide::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.25) 50%, rgba(15,23,42,.55) 100%);
}
.koaus-hero-pc .hero-content {
  position: relative; z-index: 1;
  max-width: 720px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.koaus-hero-pc .hero-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.koaus-hero-pc .hero-title {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 900; line-height: 1.18;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  margin: 0;
}
.koaus-hero-pc .hero-sub {
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 500; opacity: .95; line-height: 1.5;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
  margin: 0;
}
.koaus-hero-pc .hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 9px 18px; border-radius: 999px;
  background: #fff; color: #0f172a;
  font-size: 13px; font-weight: 800; text-decoration: none;
  transition: transform .15s, background .15s;
}
.koaus-hero-pc .hero-cta:hover { background: #f1f5f9; transform: translateY(-1px); }

/* Swiper 페이지네이션·네비게이션 컬러 (히어로 한정) */
.koaus-hero-pc .swiper-pagination-bullet { background: #fff; opacity: .55; width: 8px; height: 8px; }
.koaus-hero-pc .swiper-pagination-bullet-active { opacity: 1; width: 24px; border-radius: 4px; }
.koaus-hero-pc .swiper-button-prev,
.koaus-hero-pc .swiper-button-next {
  color: #fff; opacity: .8;
  width: 32px; height: 32px;
  background: rgba(0,0,0,.25); border-radius: 50%;
  backdrop-filter: blur(6px);
  --swiper-navigation-size: 16px;
}
.koaus-hero-pc .swiper-button-prev::after,
.koaus-hero-pc .swiper-button-next::after { font-size: 14px; font-weight: 900; }
.koaus-hero-pc .swiper-button-prev:hover,
.koaus-hero-pc .swiper-button-next:hover { opacity: 1; background: rgba(0,0,0,.4); }

/* 모바일 (≤ 767): PC swiper 그대로 노출 + 컴팩트 슬라이드 + 여백 타이트 */
@media (max-width: 767px) {
  /* hero 컨테이너 — overflow 차단 + 좌우 패딩 최소화, 상하 여백 최소화 */
  .koaus-hero {
    margin: 3px auto 4px;
    padding: 0 8px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .koaus-hero-pc { display: block; }       /* 모바일에서도 PC swiper 노출 */
  .koaus-hero-mobile { display: none !important; }   /* 단일카드 폐기 */
  /* PC swiper 의 모바일 컴팩트 — 슬림 띠 + 4개 슬라이드 동일 노출 + 스와이프 */
  .koaus-hero-pc .swiper {
    aspect-ratio: unset;
    height: clamp(120px, 18vh, 180px);
    min-height: 110px;
    border-radius: 12px;
  }
  .koaus-hero-pc .swiper-slide { padding: 12px 16px; }
  .koaus-hero-pc .hero-eyebrow { font-size: 10px; padding: 2px 7px; }
  .koaus-hero-pc .hero-title   { font-size: 17px; line-height: 1.2; }
  .koaus-hero-pc .hero-sub     { font-size: 12px; line-height: 1.35; }
  .koaus-hero-pc .hero-cta     { font-size: 11.5px; padding: 6px 12px; }
  .koaus-hero-pc .swiper-button-prev,
  .koaus-hero-pc .swiper-button-next { width: 24px; height: 24px; --swiper-navigation-size: 12px; }
  .koaus-hero-pc .swiper-button-prev::after,
  .koaus-hero-pc .swiper-button-next::after { font-size: 11px; }
  .koaus-hero-pc .swiper-pagination-bullet { width: 6px; height: 6px; }
  .koaus-hero-pc .swiper-pagination-bullet-active { width: 18px; }
  /* 본문 가로 스크롤 방지 — 광고 배너 등이 화면 폭 초과 못 함 */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* 모바일 섹션 간격 초밀착 — PC 는 영향 0
     · hero ↔ notice ↔ state ↔ 섹션 제목 사이 여백 2~3px 단위로 압축
     · 홈/서브 페이지 모두 동일 룰 적용 (글로벌 미디어쿼리) */
  .notice-section { margin: 2px 0 2px; }       /* 좌우 margin 0 — 화면 폭 풀로 활용 */
  .notice-row     { padding: 8px 10px; gap: 8px; }   /* 내부 padding 20→10, gap 10→8 */
  .ticker-fixed   { padding-right: 2px; gap: 6px; }
  .notice-badge   { font-size: 9.5px; padding: 2px 6px; }
  .ticker-viewport { height: 22px; line-height: 22px; }
  .ticker-item    { font-size: 13px; }
  .ticker-nav     { width: 26px; height: 26px; font-size: 13px; }
  .home-shortcuts { gap: 6px; padding: 0 10px; margin: 2px 0 4px; }
  .state-grid     { padding: 0 10px; }           /* state quick grid 도 모바일에서 좌우 풀 활용 */
  .home-main > section { margin-block: 2px; }
  .home-main { gap: 2px; padding-top: 4px; }
  .page-container > section,
  .home-main > .koaus-hero,
  .page-container > .koaus-hero { margin-top: 2px; margin-bottom: 2px; }
  /* 주(State) 바로가기 섹션 — hero 직후 노출, 위 여백 최소 */
  [data-koaus-state-quick] { margin: 2px 0; }
  [data-koaus-state-quick] .state-section { margin: 0; }
  [data-koaus-state-quick] .state-section-head { margin-bottom: 3px; }
  /* 서브 페이지 — 헤더/공지/필터 영역도 동일 룰로 초밀착 */
  .accom-controls  { margin: 2px 10px 4px; gap: 6px; }
  .page-header     { margin: 2px 10px 4px; padding: 0; }
  .trades-notice   { margin: 2px 10px 4px; padding: 8px 10px; font-size: 12px; }
  .pinned-notice   { margin: 0 0 4px; padding: 8px 10px; font-size: 12.5px; }
  .caution-box     { margin-top: 2px; padding: 8px 10px; font-size: 12px; }
  .state-section-head { margin: 0 0 3px; padding: 0 10px; }
}
.koaus-hero-mobile .hero-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; aspect-ratio: 5 / 1;  /* 가로 5 : 세로 1 — 시원한 와이드 */
  padding: 12px 18px;
  border-radius: 14px;
  overflow: hidden;
  color: #fff; text-align: left;
  background-size: cover; background-position: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}
.koaus-hero-mobile .hero-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(15,23,42,.62) 0%, rgba(15,23,42,.28) 100%);
}
.koaus-hero-mobile .hero-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.koaus-hero-mobile .hero-eyebrow {
  display: inline-block; align-self: flex-start;
  background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.koaus-hero-mobile .hero-title {
  font-size: 17px; font-weight: 900; line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  margin: 4px 0 0;
}
.koaus-hero-mobile .hero-sub {
  font-size: 12px; font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
  opacity: .95; line-height: 1.45; margin: 0;
}

/* 페이지별 슬라이드 배경 그라데이션 (이미지 없어도 동작) */
.hero-bg--home1 { background-image: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #2563eb 100%); }
.hero-bg--home2 { background-image: linear-gradient(135deg, #134e4a 0%, #047857 60%, #10b981 100%); }
.hero-bg--home3 { background-image: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #c026d3 100%); }
.hero-bg--legal1 { background-image: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%); }
.hero-bg--legal2 { background-image: linear-gradient(135deg, #1f2937 0%, #374151 60%, #6b7280 100%); }
.hero-bg--legal3 { background-image: linear-gradient(135deg, #0c4a6e 0%, #075985 60%, #0284c7 100%); }
.hero-bg--edu1 { background-image: linear-gradient(135deg, #831843 0%, #be185d 50%, #ec4899 100%); }
.hero-bg--edu2 { background-image: linear-gradient(135deg, #14532d 0%, #15803d 60%, #22c55e 100%); }
.hero-bg--edu3 { background-image: linear-gradient(135deg, #78350f 0%, #b45309 60%, #f59e0b 100%); }

/* ── 6 섹션 공통: 유저 등록 요청 모달 ── */
.request-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.request-overlay[hidden] { display: none; }
.request-modal {
  background: var(--card-bg, #fff);
  border-radius: 16px;
  width: 100%; max-width: 540px; max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.request-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.request-title { font-size: 18px; font-weight: 800; color: var(--text, #0f172a); margin: 0; }
.request-title em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--text-muted, #64748b); margin-left: 8px; }
.request-close {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--text-muted, #64748b); padding: 0; line-height: 1;
}
.request-info {
  background: #fff5f5; border: 1px solid #fecaca; color: #7a2828;
  padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
  margin: 10px 0 16px; line-height: 1.55;
}
.request-field { margin-bottom: 12px; }
.request-field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text, #0f172a);
  margin-bottom: 4px;
}
.request-field input, .request-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px; border-radius: 8px; font-size: 14px;
  border: 1px solid var(--border, #e4e7eb);
  background: var(--input-bg, #fff); color: var(--text, #0f172a);
  font-family: inherit;
}
.request-field textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.request-field .required { color: #b91c1c; }
.request-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
}
.request-actions button {
  padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: background .12s;
}
.request-cancel-btn { background: transparent; color: var(--text-muted, #64748b); border-color: var(--border, #e4e7eb); }
.request-cancel-btn:hover { background: var(--hover-bg, #f5f7fa); }
.request-submit-btn { background: #1f2937; color: #fff; }
.request-submit-btn:hover { background: #374151; }
.request-note { font-size: 12px; margin-top: 8px; min-height: 16px; }
.request-note.is-error { color: #b91c1c; }
.request-note.is-ok    { color: #047857; }
:root[data-theme="dark"] .request-modal { background: #1d2433; color: #f1f5f9; }
:root[data-theme="dark"] .request-info { background: #2a1414; border-color: #5a2424; color: #f3c2c2; }
:root[data-theme="dark"] .request-field input,
:root[data-theme="dark"] .request-field textarea {
  background: #0f172a; border-color: #2c3346; color: #f1f5f9;
}
:root[data-theme="dark"] .request-submit-btn { background: #f1f5f9; color: #0f172a; }
:root[data-theme="dark"] .request-submit-btn:hover { background: #e2e8f0; }
.request-trigger-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.request-trigger-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: #1f2937; color: #fff; border: 1px solid #1f2937;
  font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background .12s, transform .12s;
}
.request-trigger-btn:hover { background: #374151; transform: translateY(-1px); }
:root[data-theme="dark"] .request-trigger-btn { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
:root[data-theme="dark"] .request-trigger-btn:hover { background: #e2e8f0; }

/* ── admin 통합 승인 대기열 ── */
.admin-sidenav-link--hot {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, #fff5f5, #ffe4e4);
  border: 1px solid #fca5a5; color: #b91c1c; font-weight: 700;
  margin-bottom: 6px;
}
.admin-sidenav-link--hot:hover { background: linear-gradient(90deg, #fee2e2, #fecaca); }
.admin-sidenav-link--hot.active { background: linear-gradient(90deg, #fecaca, #fca5a5); color: #7f1d1d; }
.approval-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #b91c1c; color: #fff; font-size: 11px; font-weight: 800;
  line-height: 1;
}
:root[data-theme="dark"] .admin-sidenav-link--hot {
  background: linear-gradient(90deg, #2a1414, #3a1818); border-color: #5a2424; color: #ff8c8c;
}
:root[data-theme="dark"] .admin-sidenav-link--hot.active { background: linear-gradient(90deg, #5a2424, #3a1818); color: #ffb8b8; }
:root[data-theme="dark"] .approval-badge { background: #ff6b6b; color: #1a0a0a; }

.admin-approval-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e4e7eb);
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 14px 16px; margin-bottom: 10px;
}
.admin-approval-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted, #64748b); margin-bottom: 6px;
}
.admin-approval-cat {
  font-weight: 700; color: #b45309;
  background: #fef3c7; padding: 2px 8px; border-radius: 6px;
}
.admin-approval-state { color: var(--text-muted, #64748b); font-weight: 600; }
.admin-approval-time { margin-left: auto; color: var(--text-muted, #64748b); font-size: 11px; }
.admin-approval-title {
  font-weight: 700; font-size: 15px;
  color: var(--text, #0f172a); margin-bottom: 6px;
}
.admin-approval-sub {
  font-size: 13px; color: var(--text-muted, #64748b); margin: 2px 0; line-height: 1.55;
}
.admin-approval-meta {
  font-size: 11.5px; color: #94a3b8;
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border, #e4e7eb);
}
.admin-approval-actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.admin-approve, .admin-reject {
  flex: 1; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform .12s, background .12s;
  border: 1px solid transparent;
}
.admin-approve { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.admin-approve:hover { background: #a7f3d0; transform: translateY(-1px); }
.admin-reject  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.admin-reject:hover { background: #fecaca; transform: translateY(-1px); }
:root[data-theme="dark"] .admin-approval-card { background: #1d2433; border-color: #2c3346; border-left-color: #f59e0b; }
:root[data-theme="dark"] .admin-approval-cat { background: #3a2a14; color: #fbbf24; }
:root[data-theme="dark"] .admin-approval-title { color: #f1f5f9; }
:root[data-theme="dark"] .admin-approve { background: #064e3b; color: #6ee7b7; border-color: #047857; }
:root[data-theme="dark"] .admin-reject  { background: #4c1d1d; color: #fca5a5; border-color: #7f1d1d; }

/* ── KoAus 갓모드(God Mode) — 관리자 전용 UI ── */
/* 기본 hidden, body.is-admin 인 경우에만 display 복원 */
.admin-only { display: none !important; }
body.is-admin .admin-only { display: revert !important; }
body.is-admin .koaus-admin-toolbar { display: inline-flex !important; }

.koaus-admin-toolbar {
  position: absolute; top: 6px; right: 6px;
  z-index: 5;
  display: inline-flex; gap: 4px;
  padding: 3px 5px;
  background: rgba(15, 23, 42, .85);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.koaus-admin-btn {
  appearance: none;
  width: 28px; height: 28px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #0f172a;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s, background .12s;
}
.koaus-admin-btn:hover { transform: scale(1.08); background: #fff; }
.koaus-admin-btn--approve:hover { background: #d1fae5; color: #065f46; }
.koaus-admin-btn--hold:hover    { background: #fef3c7; color: #b45309; }
.koaus-admin-btn--del:hover     { background: #fee2e2; color: #991b1b; }

/* 카드 안 액션바 위치 보정 — accom-card 는 position 기준 */
.accom-card { position: relative; }

/* ── KoAus 공식 인증 뱃지 (isOfficial === true) ── */
.koaus-official-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
  line-height: 1.2;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(37, 99, 235, .35);
}
.koaus-official-badge::before {
  content: '✓'; font-size: 11px; font-weight: 900;
}
.koaus-official-badge--lg {
  padding: 4px 11px 4px 8px;
  font-size: 12.5px;
}
.koaus-official-badge--lg::before { font-size: 13px; }
/* 카드 제목 옆에 inline, 상세 모달 제목 옆에는 lg */
.accom-card-title2 .koaus-official-badge,
.partner-card-name .koaus-official-badge { margin-left: 5px; }

/* ── 7일 영업시간 그리드 (월~일 각 행에 오픈/마감 select) ── */
.biz-hours-grid {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px;
  border: 1px solid var(--border, #e4e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-input, #fafafa);
  box-sizing: border-box;
}
.biz-hours-row {
  display: grid;
  grid-template-columns: 38px 1fr 14px 1fr;
  align-items: center;
  gap: 8px;
}
.biz-hours-day {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 32px;
  border-radius: 8px;
  background: #1f2937; color: #fff;
  font-size: 13px; font-weight: 800;
}
.biz-hours-row:nth-child(6) .biz-hours-day { background: #2563eb; }   /* 토 */
.biz-hours-row:nth-child(7) .biz-hours-day { background: #dc2626; }   /* 일 */
.biz-hours-sel {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; border: 1px solid var(--border, #e4e7eb);
  border-radius: 8px;
  background: var(--bg-card, #fff); color: var(--text-primary, #0f172a);
  font-size: 13px; cursor: pointer;
}
.biz-hours-sep {
  text-align: center; color: var(--text-muted, #64748b); font-weight: 700;
}
:root[data-theme="dark"] .biz-hours-grid { background: #0f172a; border-color: #2c3346; }
:root[data-theme="dark"] .biz-hours-sel { background: #1d2433; border-color: #2c3346; color: #f1f5f9; }
@media (max-width: 767px) {
  .biz-hours-grid { padding: 8px 10px; }
  .biz-hours-row { grid-template-columns: 32px 1fr 10px 1fr; gap: 6px; }
  .biz-hours-day { width: 32px; height: 30px; font-size: 12px; }
  .biz-hours-sel { padding: 6px 8px; font-size: 12.5px; }
}

/* ── 영업시간 7일 표 (상세 모달) ── */
.biz-hours-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}
.biz-hours-table tr + tr td { border-top: 1px solid var(--border, #eef0f4); }
.biz-hours-table td {
  padding: 10px 14px;
  vertical-align: middle;
  line-height: 1.4;
}
.biz-hours-table-day {
  width: 70px;
  font-weight: 700;
  color: var(--text, #1f2937);
  background: var(--surface-subtle, #f8fafc);
  text-align: center;
  letter-spacing: 0.5px;
}
.biz-hours-table-day--weekend { color: #2563eb; }
.biz-hours-table tr:last-child .biz-hours-table-day--weekend { color: #dc2626; }
.biz-hours-table-val {
  color: var(--text, #111827);
  font-variant-numeric: tabular-nums;
}
.biz-hours-table-val--closed { color: #dc2626; font-weight: 600; }
.biz-hours-table-val--empty  { color: var(--text-muted, #9ca3af); }
.biz-hours-note {
  margin: 0;
  padding: 10px 14px;
  background: var(--surface-subtle, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text, #1f2937);
  line-height: 1.5;
}
:root[data-theme="dark"] .biz-hours-table { background: #1d2433; border-color: #2c3346; }
:root[data-theme="dark"] .biz-hours-table tr + tr td { border-top-color: #2c3346; }
:root[data-theme="dark"] .biz-hours-table-day { background: #0f172a; color: #e5e7eb; }
:root[data-theme="dark"] .biz-hours-table-val { color: #f1f5f9; }
:root[data-theme="dark"] .biz-hours-note { background: #0f172a; border-color: #2c3346; color: #e5e7eb; }

/* ── admin 운영시간 — 요일 토글 + 시간 select (구버전, 호환 유지) ── */
.hours-day-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.hours-day-btn {
  flex: 1 1 auto; min-width: 38px;
  padding: 8px 0;
  border: 1px solid var(--border, #e4e7eb);
  background: var(--bg-input, #fff);
  color: var(--text-primary, #0f172a);
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.hours-day-btn:hover { background: var(--hover-bg, #f5f7fa); }
.hours-day-btn.is-on {
  background: #1f2937; color: #fff; border-color: #1f2937;
}
.hours-time-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.hours-time-row .hours-time {
  flex: 1; max-width: 50%;
}
.hours-tilde { font-weight: 700; color: var(--text-muted, #64748b); }
:root[data-theme="dark"] .hours-day-btn {
  background: #1d2433; border-color: #2c3346; color: #f1f5f9;
}
:root[data-theme="dark"] .hours-day-btn:hover { background: #252d3f; }
:root[data-theme="dark"] .hours-day-btn.is-on { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }

/* ── trades/restaurants 필터 칩 그리드 ── */
.trades-chip-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px 8px; margin-top: 6px;
}
.trades-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e4e7eb);
  font-size: 13px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.trades-chip:hover { background: var(--hover-bg, #f5f7fa); }
.trades-chip input { accent-color: var(--accent, #2563eb); width: 14px; height: 14px; cursor: pointer; }
:root[data-theme="dark"] .trades-chip { background: #1d2433; border-color: #2c3346; }
:root[data-theme="dark"] .trades-chip:hover { background: #252d3f; }

/* ── 비즈니스 페이지 상단 — [홈으로] + [Official 인증 받기] 우측 정렬 ── */
.page-header-left { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.page-header-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end;       /* 우측 정렬 */
  margin-top: 6px;
  margin-left: auto;               /* 추가 안전망 */
}
@media (max-width: 767px) {
  .page-header-actions { justify-content: flex-end; gap: 6px; margin-top: 4px; }
}
.trades-inquiry-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 8px;
  background: #e5f0ff; color: #1e4a8a; border: 1px solid #b8d3f5;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: background .15s, transform .12s;
}
.trades-inquiry-btn:hover { background: #d4e5fd; transform: translateY(-1px); }
:root[data-theme="dark"] .trades-inquiry-btn { background: #1a2a44; color: #9bc1f5; border-color: #2a4570; }
:root[data-theme="dark"] .trades-inquiry-btn:hover { background: #25385a; }

.trades-notice {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 14px; padding: 12px 16px; border-radius: 10px;
  background: #f0f7ff; border: 1px solid #c5dcf5; color: #1e3a5f;
  font-size: 13px; line-height: 1.6;
}
.trades-notice-ico { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.trades-notice strong { color: #0d2e57; }
.trades-notice-link { color: #1e4a8a; font-weight: 600; text-decoration: underline; }
:root[data-theme="dark"] .trades-notice { background: #15243a; border-color: #2a4570; color: #c5dcf5; }
:root[data-theme="dark"] .trades-notice strong { color: #ffd86b; }
:root[data-theme="dark"] .trades-notice-link { color: #9bc1f5; }

/* ── 게시판 리스트 최상단 핀공지 ── */
/* 관리자 고정 공지 — Black & White 톤앤매너 (노란색 → 무채색 + 좌측 강조 보더)
   · 빈 콘텐츠 시: [hidden] 또는 비어 있는 자식 → 부모 자체 hidden 으로 공간 0 처리
   · :empty / .is-empty 자동 hide (JS 가 텍스트 채울 때만 노출) */
.pinned-notice {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 12px; padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-primary);
  color: var(--text-primary);
  font-size: 13.5px; line-height: 1.55;
}
.pinned-notice[hidden],
.pinned-notice:empty,
.pinned-notice.is-empty { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.pinned-notice .pn-icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.pinned-notice .pn-body { flex: 1; min-width: 0; word-break: break-word; }
.pinned-notice .pn-body strong { color: var(--text-primary); font-weight: 800; }
:root[data-theme="dark"] .pinned-notice {
  background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary);
}
.write-input:focus, .write-textarea:focus { border-color: var(--border-focus); }
.write-textarea { resize: vertical; min-height: 72px; line-height: 1.6; }
/* select도 input과 동일한 높이 + B&W 화살표로 통일 */
select.write-input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px;
}
:root[data-theme="dark"] select.write-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.write-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.write-cancel-btn {
  padding: 10px 20px; background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text-secondary);
  font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.write-cancel-btn:hover { border-color: var(--red); color: var(--red); }
.write-submit-btn {
  padding: 10px 24px; background: var(--accent); color: var(--accent-text);
  border: none; border-radius: var(--r-md);
  font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s;
}
.write-submit-btn:hover { opacity: 0.85; }

/* ── Post Detail ── */
.post-detail-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  overflow-y: auto;
}
.post-detail-overlay.open { opacity: 1; pointer-events: auto; }
.post-detail-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px;
  width: 100%; max-width: 640px;
  display: flex; flex-direction: column; gap: 16px;
  transform: translateY(16px); transition: transform 0.2s;
}
.post-detail-overlay.open .post-detail-card { transform: translateY(0); }
.post-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.post-detail-title { font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1.3; flex: 1; min-width: 0; }
/* 작성자 우측 상단 작게 고정 (close 버튼 왼쪽) */
.post-detail-author {
  flex-shrink: 0; align-self: flex-start;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); white-space: nowrap;
}
.post-detail-close {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-muted); font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s;
}
.post-detail-close:hover { color: var(--red); }
.post-detail-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 14px; }
.post-detail-body {
  font-size: 16px; color: var(--text-primary); line-height: 1.9;
  white-space: pre-wrap; word-break: break-word; min-height: 80px;
}
/* 연락처: 박스 제거, 본문 하단 일반 텍스트 라인으로 자연스럽게 */
.post-detail-contact {
  font-size: 14px; color: var(--text-secondary); font-weight: 600;
  padding-top: 12px; border-top: 1px solid var(--border-subtle); margin-top: 4px;
}
.post-detail-contact:empty { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   상세보기 — Realestate 스타일 (B&W)
════════════════════════════════════════════════════════════════════════ */
.rea-detail {
  padding: 0; gap: 0; max-width: 480px; overflow: hidden;
  max-height: calc(100vh - 80px); display: flex; flex-direction: column;
}
.rea-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* Hero 사진 영역 (Placeholder) */
.rea-hero {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(45deg, var(--bg-elevated) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, var(--bg-card), var(--bg-elevated));
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border);
}
.rea-hero-ph { color: var(--text-muted); opacity: 0.7; }
.rea-hero-top { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 2; }
.rea-ovl-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary);
  font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background 0.12s;
}
.rea-ovl-btn:hover { background: var(--bg-elevated); }
.rea-ovl-btn.saved { color: var(--accent); }
.rea-share-wrap { position: relative; }
.rea-share-wrap .detail-share-menu { top: calc(100% + 6px); }
.rea-hero-counter {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,.6); color: #fff;
}
/* Sticky 네비 헤더 */
.rea-navbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: var(--bg-surface); border-bottom: 1px solid var(--border);
}
.rea-back {
  width: 34px; height: 34px; flex-shrink: 0; border: none; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--text-primary); border-radius: var(--r-sm);
}
.rea-back:hover { background: var(--bg-elevated); }
.rea-nav-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rea-nav-close {
  width: 34px; height: 34px; flex-shrink: 0; border: none; background: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--text-secondary); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.rea-nav-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
/* 콘텐츠 */
.rea-content { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.rea-status { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.rea-status .rea-dot { margin: 0 4px; }
.rea-price { font-size: 34px; font-weight: 900; color: var(--text-primary); line-height: 1.1; letter-spacing: -0.02em; margin: 2px 0 4px; }
.rea-price-unit { font-size: 15px; font-weight: 600; color: var(--text-muted); }
.rea-price-na { font-size: 22px; font-weight: 800; color: var(--text-secondary); }
.rea-addr-row { display: flex; align-items: center; gap: 8px; }
.rea-addr { font-size: 14px; color: var(--text-secondary); font-weight: 600; flex: 1; min-width: 0; }
.rea-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.rea-chip {
  padding: 7px 12px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-primary);
}
/* 섹션 공통 */
.rea-section { padding-top: 18px; margin-top: 16px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.rea-subtitle { font-size: 15px; font-weight: 800; color: var(--text-primary); letter-spacing: 0.01em; }
/* 미니맵 */
.rea-map-wrap { position: relative; }
.rea-map-wrap .detail-mini-map { width: 100%; height: 180px; border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; }
.rea-map-expand {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary);
  font-size: 15px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.rea-map-expand:hover { background: var(--bg-elevated); }
/* 길찾기 / 스트릿뷰 리스트 버튼 */
.rea-loc-btns { display: flex; flex-direction: column; gap: 8px; }
.rea-loc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text-primary); text-decoration: none;
  font-size: 14px; font-weight: 700; transition: border-color 0.12s, background 0.12s;
}
.rea-loc-btn em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.rea-loc-btn:hover { border-color: var(--text-primary); }
.rea-loc-arrow { color: var(--text-muted); font-size: 18px; }
/* 설명 (더보기) */
.rea-desc { font-size: 15px; color: var(--text-primary); line-height: 1.8; white-space: pre-wrap; word-break: break-word;
  max-height: 150px; overflow: hidden; }
.rea-desc.expanded { max-height: none; }
.rea-more { align-self: flex-start; background: none; border: none; cursor: pointer; padding: 4px 0;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.rea-more:hover { color: var(--text-primary); }
/* 옵션 (체크리스트) */
.rea-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rea-feat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-primary); }
.rea-feat svg { color: var(--accent); flex-shrink: 0; }
/* 본인 글 액션 + 신고 */
.rea-owner-actions { display: none; gap: 8px; margin-top: 16px; }
.rea-report { align-self: flex-start; margin-top: 14px; background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.rea-report:hover { color: var(--red); }
/* 하단 고정 액션바 */
.rea-actionbar { flex-shrink: 0; padding: 12px 16px; background: var(--bg-surface); border-top: 1px solid var(--border); }
.rea-contact-btn {
  width: 100%; padding: 15px; border-radius: var(--r-md); cursor: pointer;
  background: var(--accent); color: var(--accent-text); border: 1px solid var(--accent);
  font-family: var(--font); font-size: 15px; font-weight: 800; transition: all 0.15s;
}
.rea-contact-btn:hover:not(:disabled) { background: var(--bg-surface); color: var(--text-primary); }
.rea-contact-btn:disabled { background: var(--bg-elevated); color: var(--text-muted); border-color: var(--border); cursor: default; }
/* 모바일: 풀스크린 (쉐어 상세 .rea-detail 한정 — 렌트 등 다른 모달 영향 없음) */
@media (max-width: 768px) {
  .post-detail-overlay:has(.rea-detail) { padding: 0; align-items: stretch; }
  .rea-detail { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Footer v2
════════════════════════════════════════════════════════════════════════ */
.site-footer {
  text-align: center; padding: 20px 24px 32px;
  font-size: 12px; color: var(--text-muted);
}
.site-footer-v2 {
  border-top: 1px solid var(--border);
  padding: 32px 24px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  margin-top: auto;
}
.footer-links {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
}
.footer-links a {
  font-size: 13px; color: var(--text-muted); text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--text-primary); text-decoration: underline; }
.footer-stats {
  font-size: 12px; color: var(--text-muted);
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
}
.footer-stat-item { display: flex; align-items: center; gap: 5px; }
.footer-stat-num { font-weight: 700; color: var(--text-secondary); }
.footer-copy { font-size: 12px; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════════════
   Responsive
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .page-container { padding: 12px 16px 48px; gap: 10px; }
  .page-title { font-size: 22px; }
  .home-main { padding: 24px 16px 60px; }
  .calc-section { padding: 20px; }
  .calc-input { font-size: 22px; }
  .calc-result { font-size: 36px; }
  .post-list-head, .post-row { grid-template-columns: 40px 1fr 80px; }
  .post-list-head > *:last-child, .post-row > *:last-child { display: none; }
  /* 모바일 카드 폭 최적화 — 화면을 꽉 채우지 않고 좌우 여백 */
  .accom-grid { padding: 0 12px; gap: 10px; }
  .accom-card { max-width: 100%; margin-left: 0; margin-right: 0; }
  .post-list-table { margin-left: 12px; margin-right: 12px; }
  /* Jobs board mobile: num / title / date / star (작성자 숨김) */
  .post-list-table--jobs .post-list-head,
  .post-list-table--jobs .post-row { grid-template-columns: 34px 1fr 76px 32px; }
  .post-list-table--jobs .post-author { display: none; }
  .post-list-table--jobs .post-list-head > *:last-child,
  .post-list-table--jobs .post-row > *:last-child { display: flex; align-items: center; justify-content: center; }
  .exchange-grid { grid-template-columns: 1fr; }
  /* 계산기 4-카드: 모바일은 2x2 그리드로 폴백 (가로 스크롤 금지) */
  #exchangeGrid { grid-template-columns: repeat(2, 1fr); }
  #exchangeGrid .exchange-card { padding: 14px 14px; }
  .calc-input-row { gap: 8px; }
  .notice-date { display: none; }
}

/* ── 테마 전환 애니메이션 ── */
.topbar, .sidebar, .home-main, .calc-section,
.notice-section, .post-list-table, .write-modal, .post-detail-card,
.exchange-card, .points-group, .page-container,
.site-footer-v2 {
  transition:
    background-color 0.2s ease,
    border-color     0.2s ease,
    color            0.2s ease;
}

/* ── Care · Ad Inquiry 푸터 그룹 — 일반 대분류 카테고리(16px)와 동일 폰트로 통일 ── */
.accord-foot-group {
  margin-top: 8px;
  border-top: 1px solid #1a1a1a;
}
.accord-direct-link {
  display: flex; align-items: center;
  padding: 7px 20px;
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  font-family: var(--font); line-height: 1.3;
  transition: background 0.12s, color 0.12s;
}
.accord-direct-link:hover { background: #0a0a0a; color: #ffffff; }
.accord-direct-link em {
  font-style: normal; font-size: 11px; font-weight: 500;
  color: #fff; margin-left: 8px; letter-spacing: 0.04em; text-transform: none;
}

/* ── Sidebar Account ── */
.sidebar-account {
  padding: 12px 16px;
  border-top: 1px solid #111;
  flex-shrink: 0;
}
.sidebar-account-btn {
  width: 100%;
  padding: 10px 14px;
  background: #111; border: 1px solid #222;
  border-radius: var(--r-sm); color: #fff;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: all 0.15s;
}
.sidebar-account-btn:hover { background: #1a1a1a; color: #ccc; border-color: #444; }

/* ── Exchange Comparison ── */
.calc-compare {
  font-size: 13px; line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  flex-direction: column; gap: 8px;
}
.calc-compare-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.calc-compare-label { color: var(--text-muted); font-size: 12px; }
.calc-compare-label em { font-style: normal; font-size: 11px; color: var(--text-muted); margin-left: 5px; }
.calc-compare-value {
  font-weight: 700; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; font-size: 13px;
}
.calc-compare-row--best { background: var(--accent-dim); border-radius: var(--r-sm); padding: 6px 10px; margin: 0 -10px; }
.calc-compare-row--best .calc-compare-label { color: var(--text-primary); font-weight: 800; }
.calc-compare-row--best .calc-compare-value { color: var(--text-primary); }
.calc-compare-head {
  display: flex; justify-content: space-between; font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.calc-compare-row--blocked .calc-compare-label { color: var(--text-muted); }
.calc-compare-blocked { color: var(--red); font-size: 12px; font-weight: 600; }
.calc-compare-tip {
  font-size: 12px; font-weight: 600;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--accent-dim); color: var(--text-primary);
  border: 1px solid var(--border); line-height: 1.5;
}

/* ── Exchange link active state ── */
.sidebar-exchange-link--active { color: #ffffff; }

/* ── My Account Modal ── */
.myacct-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  z-index: 3100; display: none; align-items: center;
  justify-content: center; padding: 20px;
}
.myacct-overlay.open { display: flex; }
.myacct-card {
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--r-xl); width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
.myacct-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
}
.myacct-title {
  font-size: 15px; font-weight: 800; color: var(--text-primary);
  letter-spacing: -0.01em;
}
.myacct-title em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.myacct-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; border-radius: var(--r-sm);
  transition: color 0.12s;
}
.myacct-close:hover { color: var(--text-primary); }
.myacct-profile {
  display: flex; align-items: center; gap: 16px; padding: 24px;
  border-bottom: 1px solid var(--border);
}
.myacct-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  font-size: 20px; font-weight: 800; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.myacct-profile-info { flex: 1; min-width: 0; }
.myacct-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.myacct-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.myacct-edit-btn {
  font-size: 11px; font-weight: 700; font-family: var(--font);
  color: var(--text-muted); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 8px; cursor: pointer; transition: all 0.12s;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.myacct-edit-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.myacct-email { font-size: 13px; color: var(--text-muted); }
.myacct-sections { border-bottom: 1px solid var(--border); }
.myacct-section { border-bottom: 1px solid var(--border-subtle); }
.myacct-section:last-child { border-bottom: none; }
.myacct-section-hdr {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: none; border: none;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.myacct-section-hdr:hover { background: var(--bg-surface); }
.myacct-section-hdr span em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.myacct-arrow { transition: transform 0.2s; flex-shrink: 0; }
.myacct-section.open .myacct-arrow { transform: rotate(180deg); }
.myacct-section-body { display: none; padding: 0 24px 16px; }
.myacct-section.open .myacct-section-body { display: block; }
.myacct-empty { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
.myacct-footer { padding: 16px 24px; }
.myacct-logout-btn {
  width: 100%; padding: 11px; background: none;
  border: 1px solid rgba(220,38,38,0.3); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--red); cursor: pointer; transition: all 0.15s;
}
.myacct-logout-btn:hover { background: rgba(220,38,38,0.06); border-color: var(--red); }

/* ── Auth Modal ──
   · 모바일 회원가입 모달이 vh 보다 길어질 때 상단 'X' 가 화면 밖으로 잘리던 버그 픽스
   · align-items: flex-start + overflow-y: auto + margin: auto 패턴
   · 짧은 모달: 자식 margin auto 가 균등 분배 → 시각적 중앙 정렬 유지
   · 긴 모달:  margin 0 으로 처리되어 위부터 시작 + 컨테이너 스크롤
   · iOS safe-area-inset-top 으로 노치/상태바 아래 16px 추가 여백 확보 */
.auth-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  z-index: 3000; display: none;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  padding-top: max(20px, calc(env(safe-area-inset-top, 0px) + 16px));
  padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  opacity: 0; transition: opacity 0.22s ease;
}
.auth-overlay.open { display: flex; opacity: 1; }
/* 모달 박스: margin auto → 짧을 때 중앙, 길 때 위부터 (auto = 0) */
.auth-overlay .auth-modal,
.auth-overlay .report-card,
.auth-overlay .myacct-card { margin: auto; }
/* 모바일 보강: 노치/상태바 클리어런스 + 위쪽 16px 추가 (mt-4) */
@media (max-width: 640px) {
  .auth-overlay,
  .report-overlay {
    padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 16px));
    padding-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  }
  /* 모바일에서 모달 자체의 상단 패딩도 살짝 줄여 X 버튼 위 공간 절약 */
  .auth-overlay .auth-modal { padding-top: 28px; }
}
.auth-overlay.open .auth-modal,
.auth-overlay.open .report-card,
.auth-overlay.open .myacct-card { animation: koaus-modal-pop 0.24s cubic-bezier(.2,.7,.3,1.04); }
@keyframes koaus-modal-pop {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
/* 찾기 모달 (auth-extra koausExtraModal — .report-overlay) 도 동일 톤 */
.report-overlay { opacity: 0; transition: opacity 0.22s ease; }
.report-overlay.open { opacity: 1; }
.report-overlay.open .report-card { animation: koaus-modal-pop 0.24s cubic-bezier(.2,.7,.3,1.04); }
/* 마이페이지 모달도 동일 톤 */
.myacct-overlay { opacity: 0; transition: opacity 0.22s ease; }
.myacct-overlay.open { opacity: 1; }
.auth-modal {
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--r-xl); width: 100%; max-width: 420px;
  padding: 36px 32px 32px; position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
.auth-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; border-radius: var(--r-sm);
  transition: color 0.12s;
}
.auth-close:hover { color: var(--text-primary); }
.auth-title {
  font-size: 20px; font-weight: 800; color: var(--text-primary);
  margin-bottom: 4px; letter-spacing: -0.01em;
}
.auth-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.auth-tabs {
  display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px;
}
.auth-tab {
  flex: 1; padding: 10px 0; background: none; border: none;
  border-bottom: 2px solid transparent; font-family: var(--font);
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: all 0.15s; margin-bottom: -1px;
}
.auth-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.auth-field { margin-bottom: 14px; }
.auth-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.auth-input {
  width: 100%; padding: 10px 12px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-primary); font-family: var(--font); font-size: 14px;
  transition: border-color 0.15s;
}
.auth-input:focus { outline: none; border-color: var(--border-focus); }
.auth-error {
  font-size: 12px; color: var(--red); min-height: 18px;
  margin-bottom: 6px; line-height: 1.4;
}
.auth-submit {
  width: 100%; padding: 12px; background: var(--accent);
  color: var(--accent-text); border: none; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s; margin-top: 2px;
}
.auth-submit:hover { opacity: 0.82; }
.auth-submit:disabled { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; opacity: 1; }
/* 이용약관 동의 체크박스 */
.auth-agree {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin: 4px 0 2px;
}
.auth-agree input { accent-color: var(--accent); width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; cursor: pointer; }
.auth-agree em { font-style: normal; color: var(--red); font-weight: 700; }
.auth-tos-link {
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font);
  font-size: 12.5px; font-weight: 700; color: var(--text-primary); text-decoration: underline;
}
.auth-recaptcha { margin: 8px 0 2px; display: flex; justify-content: center; }
@media (max-width: 360px) { .auth-recaptcha { transform: scale(0.86); transform-origin: 0 0; } }
.verify-modal-msg { font-size: 14px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 16px; }
.tos-body { font-size: 13px; color: var(--text-secondary); line-height: 1.65; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.tos-body strong { color: var(--text-primary); }
.tos-note { font-size: 11.5px; color: var(--text-muted); }
/* 이메일 미인증 안내 배너 */
.verify-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 14px;
  background: var(--bg-elevated); border: 1px solid var(--accent); border-radius: var(--r-md);
  font-size: 13px; color: var(--text-primary);
}
.verify-banner-msg { font-weight: 600; flex: 1; min-width: 160px; }
.verify-resend {
  background: var(--accent); color: var(--accent-text); border: none; border-radius: var(--r-sm);
  padding: 7px 12px; font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer;
}
.verify-resend:hover { opacity: 0.85; }
.verify-dismiss { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 15px; padding: 2px 4px; }
.verify-dismiss:hover { color: var(--text-primary); }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  color: var(--text-muted); font-size: 12px; font-weight: 500;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-google {
  width: 100%; padding: 11px; background: none;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--text-primary); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-google:hover { background: var(--bg-card); border-color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════════════
   Accommodation Page
════════════════════════════════════════════════════════════════════════ */

/* ── Main Tabs ── */
.accom-main-tabs {
  display: flex; border-bottom: 2px solid var(--border);
  margin-top: 0; margin-bottom: 12px;  /* 상단은 page-container gap 만큼만, 하단도 타이트하게 */
}
.accom-tab {
  flex: 1; background: none; border: none;
  /* 사장님 요청: 시각적으로 글씨가 살짝 위로 붙도록 padding-top < padding-bottom.
     위 14 vs 아래 15(+ transparent border 3 = 18) → 위쪽 여백이 미세하게 더 작음 */
  padding: 14px 20px 15px;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--text-muted); cursor: pointer; text-align: center; transition: color 0.15s;
}
/* 한글 메인 + 영문 서브를 단단히 묶는 래퍼 — Bounding Box / margin 초기화 */
.accom-tab .tab-text {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; margin: 0; padding: 0; line-height: 1;
}
.accom-tab .tab-text em,
.accom-tab em {
  display: block; margin: 0; padding: 0; line-height: 1;
  font-style: normal; font-size: 11px; font-weight: 500;
  color: var(--text-muted); letter-spacing: 0.04em;
}
.accom-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.accom-tab.active em,
.accom-tab.active .tab-text em { color: var(--text-secondary); }

/* Visa 3단 탭 (법무·유학·가채점) — 가로 너비 유지, 세로 높이만 축소 */
.visa-tabs { margin-bottom: 14px; }
.visa-tabs .accom-tab {
  /* 폰트 키움 + column 방향(한글 위, 영문 아래). 위 9 vs 아래 12+3=15 — 살짝 위로 붙음 */
  padding: 9px 12px 12px; font-size: 15px; line-height: 1.2;
}
.visa-tabs .tab-text { flex-direction: column; gap: 2px; line-height: 1.2; }
.visa-tabs .accom-tab em,
.visa-tabs .tab-text em {
  display: block; margin: 0; padding: 0; font-size: 11px; line-height: 1.2; font-weight: 500;
}

/* ── Controls bar ── */
.accom-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.view-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  background: none; border: none; font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.view-btn + .view-btn { border-left: 1px solid var(--border); }
.view-btn.active { background: var(--accent); color: var(--accent-text); }
.accom-ctrl-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.accom-filter-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.accom-filter-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.accom-filter-btn.has-filter { border-color: var(--accent); color: var(--accent); }

/* ── 쉐어 3대 핵심 필터 바 (PC: 가로 / 모바일: 아코디언) ── */
.accom-filters { margin-bottom: 18px; }
/* '상세 필터 ▼' 토글 — 모든 화면에서 노출, 클릭 시 필터 펼침/접힘 */
.filters-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: 11px 16px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-primary); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
}
.filters-arrow { flex-shrink: 0; transition: transform 0.25s ease; }
.accom-filters.open .filters-arrow { transform: rotate(180deg); }
/* 기본은 접힘, .open일 때만 펼침 (PC=가로 / 모바일=세로) */
.filters-body {
  display: flex; gap: 12px; align-items: flex-end;
  max-height: 0; overflow: hidden; padding: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.accom-filters.open .filters-body { max-height: 200px; padding-top: 12px; }
.filter-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.filter-mini-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.filter-mini-input {
  width: 100%; padding: 9px 12px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-primary); font-family: var(--font); font-size: 14px; outline: none;
  transition: border-color 0.15s;
}
.filter-mini-input:focus { border-color: var(--border-focus); }
select.filter-mini-input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
:root[data-theme="dark"] select.filter-mini-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
@media (max-width: 768px) {
  .filters-body { flex-direction: column; align-items: stretch; gap: 10px; }
  .accom-filters.open .filters-body { max-height: 480px; padding-top: 12px; }
}
/* 상세 설명 textarea가 우측 단 남는 세로 공간을 유연하게 채움 */
.write-field--grow { flex: 1; }
.write-field--grow .write-textarea { flex: 1; min-height: 96px; }

/* ── 주소 자동완성 드롭다운 (Google Places 스타일, B&W) ── */
.addr-ac { position: relative; }
.addr-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  list-style: none; margin: 0; padding: 4px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md);
  max-height: 248px; overflow-y: auto;
  box-shadow: 0 10px 28px rgba(0,0,0,.22); display: none;
}
.addr-suggest.show { display: block; }
/* 모달 내부에서도 자동완성 드롭다운이 잘리지 않고 위로 떠야 함
   · .write-modal 자체가 overflow-y:auto (내부 스크롤) 라 absolute 자식이 잘릴 수 있음
   · z-index를 모달 위로 올리고, 모달 내부에서 부모 stacking context 안에서 최상위 */
.write-overlay .addr-suggest,
.report-overlay .addr-suggest { z-index: 9999; }
/* Google Places Autocomplete native dropdown (.pac-container) 도 모달 위로 */
.pac-container { z-index: 99999 !important; }
.addr-suggest li {
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 13px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.addr-suggest li:hover, .addr-suggest li.active { background: var(--bg-elevated); }
.addr-suggest li .addr-sub { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
@media (max-width: 768px) { .write-field--grow { flex: none; } }

/* ── 모바일 글쓰기 폼: 가로 스크롤 차단 + 코멘트 textarea 높이 축소 ── */
@media (max-width: 768px) {
  .write-modal, .write-modal--tall {
    max-width: 100%; box-sizing: border-box;
  }
  .write-input, .write-textarea, .write-checks, .toggle-group, .seg-group, .photo-upload {
    max-width: 100%; box-sizing: border-box;
  }
  .write-textarea {
    min-height: 120px; height: 130px;
  }
  .write-field--grow .write-textarea { min-height: 120px; }

  /* 가로 스크롤 박멸 보강 — 모든 폼 필드 강제 */
  .write-field, .write-grid, .write-col, .write-modal-header {
    max-width: 100%; box-sizing: border-box;
  }
  .write-modal *, .write-overlay * { max-width: 100%; box-sizing: border-box; }
  .page-container { max-width: 100%; box-sizing: border-box; }

  /* 글쓰기 모달: 모바일에서 패딩 축소 + 가로 스크롤 원천 차단 */
  .write-overlay { padding: 10px; }
  .write-modal, .write-modal--tall {
    padding: 16px 14px; gap: 10px;
    width: 100%;
    overflow-x: hidden;        /* 자식 요소가 폭 초과해도 가로 스크롤 차단 */
  }
  .write-grid { grid-template-columns: 1fr !important; gap: 0; }
  /* select 도 안전망 */
  select.write-input { max-width: 100%; box-sizing: border-box; }

  /* 모바일 지도 높이 2/3 축소 */
  #accomMap, #jobsMap { height: 360px !important; min-height: 280px !important; }
  .partner-map-wrap, .partner-map { min-height: 220px !important; }
  .rea-map-wrap .detail-mini-map { height: 140px !important; }

  /* 모바일 카드 콤팩트 — 세로 길이 2/3 축소 (썸네일 비율 보호) */
  .accom-card { padding: 10px 12px; gap: 10px; }
  .accom-card-thumb { width: 70px; height: 70px; }   /* 비율 1:1 유지 + object-fit: cover */
  .accom-card-info { gap: 2px; }
  .accom-card-title2 { font-size: 14px; line-height: 1.3; }
  .accom-card-sub { font-size: 12.5px; line-height: 1.35; }
  .accom-card-chips { gap: 4px; }
  .accom-card-chips .accom-tag { font-size: 11px; padding: 2px 7px; }
  .post-mini-actions { margin-top: 4px; }
  .post-mini-actions .mini-btn { font-size: 10.5px; padding: 2px 7px; }

  /* 페이지 헤더: 제목 + 버튼 그룹 한 줄 고정 (인스펙션 등 긴 제목 대응) */
  .page-header { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .page-header > div:first-child { min-width: 0; flex: 1; }
  .page-title { font-size: 18px; line-height: 1.25; }
  .page-subtitle { font-size: 11.5px; }
  .page-header-actions { flex-shrink: 0; align-items: stretch; }
  .page-back, .page-inquiry { font-size: 11.5px; padding: 6px 10px; white-space: nowrap; }
}

/* ── Accom Cards ── */
/* 리스트 카드 — 기본(렌트 등 공용): 세로 카드 */
.accom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.accom-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column; gap: 8px;
}
.accom-card:hover { border-color: var(--text-muted); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* 쉐어(accom) 컴팩트 — 슬림한 가로 행, 풀폭 단일 컬럼 (accom-grid--compact 한정) */
.accom-grid--compact { display: flex; flex-direction: column; gap: 10px; }
.accom-grid--compact .accom-card {
  flex-direction: row; align-items: stretch; gap: 12px; padding: 10px; border-radius: var(--r-md);
}
.accom-grid--compact .accom-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.accom-card-thumb {
  width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--bg-elevated) 0 8px, transparent 8px 16px), var(--bg-card);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.accom-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 글쓰기 모달 사진 첨부 영역 (accom·car-rent 공통) */
.photo-upload {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  padding: 8px; border: 1px dashed var(--border); border-radius: var(--r-sm); background: var(--bg-card);
}
.photo-add-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 84px; height: 84px;
  background: var(--bg-base); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.photo-add-btn:hover { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-thumb {
  position: relative; width: 84px; height: 84px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-card);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb-x {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.78); color: #fff; border: none; cursor: pointer;
  font-size: 12px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.photo-thumb-x:hover { background: #000; }

/* 마이페이지 프로필 사진 (mpAvatar 안 img + 원형 크롭) */
.mypage-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.profile-photo-input { display: none; }

/* 상세 모달 — 첨부 사진 갤러리 */
.detail-hero-gallery {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  background: var(--bg-card);
}
.detail-hero-gallery img {
  flex: 0 0 100%; height: 100%; object-fit: cover; scroll-snap-align: start;
}
/* 게시판 상세(car-rent 등) 단순 모달 갤러리 — 그리드 */
.post-detail-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.post-detail-gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--border); display: block;
  cursor: zoom-in;
}
.detail-hero-gallery img { cursor: zoom-in; }

/* rent 카드 hero — Realestate 스타일 큰 사진 (16:9) + 사진 개수 배지 */
.accom-card-hero {
  position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.accom-card-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.accom-card-hero-count {
  position: absolute; right: 10px; bottom: 10px;
  font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.75); color: #fff;
}

/* rent 상세 갤러리 — 가로 스크롤 + counter */
.rent-detail-hero {
  position: relative; margin: 0 -20px 14px; width: calc(100% + 40px);
  aspect-ratio: 16/9; max-height: 360px; background: var(--bg-card); overflow: hidden;
}
.rent-detail-gallery {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
}
.rent-detail-gallery img {
  flex: 0 0 100%; height: 100%; object-fit: cover; scroll-snap-align: start;
  cursor: zoom-in;
}
.rent-detail-counter {
  position: absolute; right: 12px; bottom: 12px;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.78); color: #fff; pointer-events: none;
}
.rent-detail-text { white-space: pre-line; line-height: 1.65; }

/* ── InfoWindow 우상단 액션(별표·연락완료) 정렬 ── */
.iw-actions { display: inline-flex; align-items: center; gap: 2px; }
.iw-star { transition: transform 0.12s ease; }
.iw-star:hover { transform: scale(1.15); }
.iw-contact { transition: color 0.12s ease, transform 0.12s ease; }
.iw-contact:hover { transform: scale(1.1); }
.iw-contact.contacted { color: #d92626 !important; }
.iw-contact.contacted svg { stroke: #d92626; }

/* ── 관리자 통합 대시보드 사이드바 (admin.html 전용) ── */
.admin-shell { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.admin-shell .page-header { grid-column: 1 / -1; }
.admin-sidenav {
  position: sticky; top: 20px; align-self: start;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 10px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md);
}
.admin-sidenav-link {
  display: block; padding: 10px 12px; font-size: 13.5px; font-weight: 700;
  color: var(--text-secondary); text-decoration: none; border-radius: var(--r-sm);
  border-left: 3px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.admin-sidenav-link:hover { background: var(--bg-card); color: var(--text-primary); }
.admin-sidenav-link.active {
  background: var(--text-primary); color: var(--bg-base);
  border-left-color: var(--accent, #000);
}
.admin-body { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (max-width: 768px) {
  .admin-shell { grid-template-columns: 1fr; gap: 14px; }
  .admin-sidenav {
    position: static; flex-direction: row; flex-wrap: wrap; padding: 8px;
  }
  .admin-sidenav-link {
    padding: 8px 10px; font-size: 12.5px; border-left: none; border-bottom: 2px solid transparent;
  }
  .admin-sidenav-link.active { border-bottom-color: var(--bg-base); }
}

/* ── 관리자 전용 컨텍스트 버튼 (admin claim 보유 시에만 표시) ── */
.admin-only { display: none !important; }
body.is-admin .admin-only { display: inline-flex !important; }
body.is-admin .admin-only.admin-only--block { display: block !important; }
.admin-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 800; letter-spacing: -0.01em;
  background: #000; color: #fff;
  border: 1.5px solid #000; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-btn:hover  { background: #fff; color: #000; }
.admin-btn:active { transform: scale(0.96); }

/* 관리자 대시보드 플로팅 버튼 (admin.html 우하단) */
.admin-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 5000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  background: #000; color: #fff; border: 2px solid #000;
  font-family: var(--font); font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, background 0.12s ease, color 0.12s ease;
}
.admin-fab:hover  { background: #fff; color: #000; transform: translateY(-2px); }
.admin-fab:active { transform: scale(0.96); }
.admin-fab svg { width: 18px; height: 18px; }

/* ── 비밀번호 입력 토글 (eye 버튼) ── */
.pw-wrap {
  position: relative; display: block; width: 100%;
}
.pw-wrap input { padding-right: 42px !important; box-sizing: border-box; }
.pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 6px;
  background: transparent; border: none; color: var(--text-muted, #777);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: color 0.12s ease, background 0.12s ease;
}
.pw-toggle:hover  { color: var(--text-primary, #000); background: var(--bg-card, #f5f5f5); }
.pw-toggle:active { transform: translateY(-50%) scale(0.92); }
.pw-toggle svg { display: block; }

/* ── Toggle Pill 그룹 (멀티 선택 segmented — 렌트 기간/옵션 등) ── */
.toggle-group {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px;
}
.toggle-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 16px;
  font-family: var(--font); font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
  background: var(--bg-base); color: var(--text-primary);
  border: 1.5px solid var(--text-primary); border-radius: var(--r-sm);
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
  user-select: none; line-height: 1;
}
.toggle-pill input { display: none; }
.toggle-pill:hover { background: var(--bg-card); }
.toggle-pill:has(input:checked) {
  background: var(--text-primary); color: var(--bg-base);
}
/* 모바일: 같은 행에 들어가지 않으면 wrap */
@media (max-width: 640px) {
  .toggle-pill { padding: 11px 12px; font-size: 13.5px; }
}

/* ── Segmented controls (Realestate.com.au 스타일 — 방/욕실/주차 등) ── */
.seg-group {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1.5px solid var(--text-primary); border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg-base);
}
.seg-btn {
  flex: 1; min-width: 52px;
  padding: 13px 14px;   /* 큼직한 터치 영역 */
  font-family: var(--font); font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
  background: var(--bg-base); color: var(--text-primary);
  border: none; border-right: 1.5px solid var(--text-primary);
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
  line-height: 1;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--bg-card); }
.seg-btn.active { background: var(--text-primary); color: var(--bg-base); }
@media (max-width: 640px) {
  .seg-btn { padding: 14px 10px; font-size: 14.5px; min-width: 44px; }
}

/* ── 가격 입력창 행 (Dual Range Slider 위 직접 입력 Min/Max) — 5:5 한 줄 배치 ── */
.price-input-row {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 12px;
}
.price-input-row .price-input-cell {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  background: var(--bg-base); border: 1.5px solid var(--border); border-radius: var(--r-sm);
}
.price-input-row .price-prefix { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.price-input-row .price-sep    {
  flex-shrink: 0; font-size: 14px; font-weight: 800; color: var(--text-muted);
  padding: 0 4px;
}
.price-input-row .price-num-input {
  flex: 1; min-width: 0; padding: 10px 0; font-size: 14px; font-weight: 700;
  text-align: right; -moz-appearance: textfield;
  background: transparent; border: none; outline: none;
}
.price-input-row .price-num-input::-webkit-outer-spin-button,
.price-input-row .price-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* ── Dual Range Slider (단일 트랙 통합 · 두꺼움 · 큰 thumb) ── */
.dual-range {
  position: relative; width: 100%; height: 44px; margin: 10px 0 6px;
}
.dual-range-label {
  margin-left: 8px; font-size: 12.5px; font-weight: 800; color: var(--text-secondary);
}
/* 외곽(미선택) 트랙 — 옅은 회색 */
.dual-range-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 6px;
  background: #e0e0e0; border-radius: 3px; transform: translateY(-50%);
}
/* 선택 구간(min~max) — 진한 흑색 */
.dual-range-fill {
  position: absolute; top: 50%; height: 6px;
  background: #000; border-radius: 3px; transform: translateY(-50%);
  pointer-events: none;
}
/* 두 range input 을 오버레이 — 트랙은 투명, thumb 만 활성 */
.dual-range-input {
  position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 44px;
  background: transparent; appearance: none; -webkit-appearance: none;
  pointer-events: none;
  margin: 0;
}
/* Thumb — 큼직한 흰 원 + 검정 보더 + 그림자 (트랙 6px 중심에 정렬: margin-top = (6 - 26) / 2 = -10) */
.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2.5px solid #000;
  margin-top: -10px;  /* thumb 수직 중심을 6px 트랙 중심에 맞추기 */
  cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.12s ease;
}
.dual-range-input::-webkit-slider-thumb:hover  { transform: scale(1.05); }
.dual-range-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.dual-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2.5px solid #000;
  cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.15);
}
.dual-range-input::-webkit-slider-runnable-track { background: transparent; height: 6px; border: none; }
.dual-range-input::-moz-range-track { background: transparent; height: 6px; border: none; }
/* 다크 모드 대응 — 외곽 트랙을 약간 진하게 (단 채워진 부분은 항상 흑색) */
[data-theme="dark"] .dual-range-track { background: #3a3a3a; }
[data-theme="dark"] .dual-range-fill  { background: #fff; }
[data-theme="dark"] .dual-range-input::-webkit-slider-thumb { background: #fff; border-color: #fff; }
[data-theme="dark"] .dual-range-input::-moz-range-thumb     { background: #fff; border-color: #fff; }

/* ── Lightbox (Swiper 갤러리 — 스와이프 + 카운터) ── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  opacity: 0; transition: opacity 0.18s ease;
}
.lightbox-overlay.open { display: block; opacity: 1; }
.lightbox-swiper {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.lightbox-swiper .swiper-slide {
  display: flex; align-items: center; justify-content: center;
  padding: 56px 50px 60px;
}
.lightbox-swiper .swiper-slide img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none;
}
.lightbox-swiper .swiper-button-prev,
.lightbox-swiper .swiper-button-next {
  color: #fff; opacity: 0.85;
}
.lightbox-swiper .swiper-button-prev:hover,
.lightbox-swiper .swiper-button-next:hover { opacity: 1; }
.lightbox-close {
  position: fixed;
  /* iOS 노치/안드로이드 상태표시줄 회피 — safe-area-inset-top + 30px 보장 */
  top: calc(env(safe-area-inset-top, 0px) + 30px);
  right: calc(env(safe-area-inset-right, 0px) + 20px);
  z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: #000; border: none;
  font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: transform 0.12s ease, background 0.12s ease;
}
.lightbox-close:hover  { background: #ddd; transform: scale(1.05); }
.lightbox-close:active { transform: scale(0.94); }
.lightbox-counter {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 10;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.94); color: #000;
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ── 지도 전체화면 버튼 (.fullscreen-btn) ── */
.fullscreen-btn {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 38px; height: 38px; border-radius: 4px;
  background: #fff; color: #000; border: 1.5px solid #000;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
  transition: background 0.12s ease, color 0.12s ease;
}
.fullscreen-btn:hover  { background: #000; color: #fff; }
.fullscreen-btn:active { transform: scale(0.94); }
.fullscreen-btn svg { width: 18px; height: 18px; display: block; }
/* 부모가 fullscreen 일 때 — 우상단 위치 유지 */
:fullscreen > .fullscreen-btn { top: 14px; right: 14px; }
/* 지도 우상단 fullscreen 버튼 — 단일 버튼 (rea-map-expand 제거 후) */
.rea-map-wrap .fullscreen-btn { right: 10px; }
:fullscreen .rea-map-wrap .fullscreen-btn,
.rea-map-wrap:fullscreen .fullscreen-btn { right: 14px; }
.accom-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.accom-card-line1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.accom-card-find { font-size: 14px; font-weight: 800; color: var(--text-secondary); }
.accom-card-title2 { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accom-card-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accom-card-chips { display: flex; gap: 5px; overflow: hidden; white-space: nowrap; margin-top: 1px; }
.accom-card-chips .accom-tag { flex-shrink: 0; }
/* ── Auto: 4 카테고리 탭 + 컴팩트 카드 텍스트 ── */
.auto-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.auto-tab {
  flex-shrink: 0; padding: 10px 16px; background: none; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.auto-tab em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-muted); margin-left: 3px; }
.auto-tab:hover { border-color: var(--text-muted); color: var(--text-primary); }
.auto-tab.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); pointer-events: none; cursor: default; }
.auto-tab.active em { color: var(--accent-text); opacity: 0.85; }
.auto-card-title { font-size: 15px; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-card-snip { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-card-meta { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Auto: 긴급출동·견인 외부 견인 서비스 안내 배너 ── */
.auto-tow-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.auto-tow-text { font-size: 13px; font-weight: 600; color: var(--text-secondary); line-height: 1.4; }
.auto-tow-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; background: var(--accent); color: var(--accent-text);
  border-radius: 999px; font-family: var(--font); font-size: 13px; font-weight: 800;
  text-decoration: none; white-space: nowrap; transition: opacity 0.15s;
}
.auto-tow-btn:hover { opacity: 0.85; }
.auto-tow-arrow { font-size: 16px; line-height: 1; }

/* ── Auto 컴팩트 카드 (인스펙션/정비소/견인 — 쉐어 카드의 약 3/5 높이) ── */
@property --koaus-prem-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.auto-li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.auto-li:hover { border-color: var(--text-muted); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.auto-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.auto-li-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.auto-li-name {
  font-size: 14.5px; font-weight: 800; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.auto-li-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.auto-li-field {
  font-size: 12px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.auto-li-btn {
  flex-shrink: 0; padding: 8px 14px; background: var(--accent); color: var(--accent-text);
  border: none; border-radius: 999px; font-family: var(--font); font-size: 12.5px; font-weight: 800;
  cursor: pointer; white-space: nowrap; transition: opacity 0.15s;
}
.auto-li-btn:hover { opacity: 0.85; }
.insp-ad-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--bg-surface); background: var(--text-primary);
  padding: 1px 6px; border-radius: 4px;
}

/* 인스펙션 글쓰기: 서비스 제공 토글 + 미제공 시 가격 비활성(회색) */
.write-svc { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; cursor: pointer; }
.write-svc input { width: 16px; height: 16px; }
.write-input:disabled { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; opacity: 0.55; }

/* 프리미엄(관리자 상단 고정): 은회색 그라데이션이 회전하는 고급 테두리 (컬러 배제, B&W) */
.auto-li.is-premium, .accom-card.is-premium { position: relative; border-color: transparent; }
.auto-li.is-premium::before, .accom-card.is-premium::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--koaus-prem-angle),
    rgba(140,140,140,0.12), #8a8a8a, #f2f2f2, #ffffff, #9a9a9a, rgba(140,140,140,0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: koaus-prem-rotate 4s linear infinite;
  pointer-events: none;
}
@keyframes koaus-prem-rotate { to { --koaus-prem-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .auto-li.is-premium::before, .accom-card.is-premium::before { animation: none; } }
.accom-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.accom-card-hd-right { display: flex; align-items: center; gap: 10px; }
.bookmark-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 20px; line-height: 1; color: var(--text-muted);
  transition: color 0.12s, transform 0.1s;
}
.bookmark-btn:hover { color: var(--text-primary); transform: scale(1.1); }
.bookmark-btn.is-saved { color: var(--accent); }

/* 본인 작성 글 강조 (List View) — 파란 테두리 */
.accom-card.my-post-highlight { border: 2px solid #007BFF !important; }
.post-row.my-post-highlight { border-left: 4px solid #007BFF !important; background: var(--bg-card); }

/* 카드 미니 액션: 수정·삭제(본인 글 한정) / 공유·신고(모든 글) — 컴팩트 흑백 테마 */
.post-mini-actions {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; flex-wrap: wrap;
}
.accom-card-info .post-mini-actions { margin-left: 0; margin-top: 8px; }
.mini-btn {
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: -0.01em;
  padding: 3px 8px; border-radius: 3px;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer; transition: all 0.12s ease;
  line-height: 1.4; white-space: nowrap;
}
.mini-btn:hover { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }
.mini-btn:active { transform: scale(0.94); }
.mini-edit:hover   { background: #007BFF; color: #fff; border-color: #007BFF; }
.mini-del:hover    { background: var(--red); color: #fff; border-color: var(--red); }
.mini-report:hover { background: var(--red); color: #fff; border-color: var(--red); }
.mini-share:hover  { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }

/* 상세 모달 필터 태그 — 리스트 카드와 동일한 정갈한 사각형 배지 */
.post-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.post-detail-tag {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
  letter-spacing: -0.01em; white-space: nowrap;
}

/* 상세 모달 수정/삭제 버튼 — B&W 테마에 녹아드는 모노톤 */
.post-detail-actions { display: none; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.detail-edit-btn, .detail-delete-btn {
  padding: 9px 20px; border-radius: var(--r-md); font-family: var(--font);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
}
.detail-edit-btn:hover { border-color: var(--text-primary); background: var(--bg-elevated); }
.detail-delete-btn { color: var(--red); }
.detail-delete-btn:hover { border-color: var(--red); background: rgba(220,38,38,0.06); }

/* ── 상세보기: 주소 행 (복사 + 길찾기 + 스트릿뷰) ── */
.post-detail-addr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.post-detail-addr:empty { display: none; }
.detail-addr-text { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.detail-addr-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; background: none;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-secondary); cursor: pointer; transition: all 0.12s;
}
.detail-addr-copy:hover { border-color: var(--text-primary); color: var(--text-primary); }
.detail-addr-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: all 0.12s;
}
.detail-addr-link:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* ── 상세보기: 신고 / 공유 툴바 ── */
.post-detail-tools { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.detail-tool-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all 0.12s;
}
.detail-tool-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
.detail-tool-btn--report:hover { border-color: var(--red); color: var(--red); }
.detail-share-wrap { position: relative; margin-left: auto; }
.detail-share-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 10px 28px rgba(0,0,0,.22); padding: 4px; min-width: 160px; display: none;
}
.detail-share-menu.show { display: block; }
.detail-share-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  background: none; border: none; border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--font); font-size: 13px; color: var(--text-primary); transition: background 0.12s;
}
.detail-share-menu button:hover { background: var(--bg-elevated); }

/* ── 신고 모달 ──
   · auth-overlay 와 동일한 안전 정렬 패턴 (top truncation 픽스) */
.report-overlay {
  position: fixed; inset: 0; z-index: 2200; background: rgba(0,0,0,.55);
  display: none;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  padding-top: max(20px, calc(env(safe-area-inset-top, 0px) + 16px));
  padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px));
}
.report-overlay.open { display: flex; }
.report-overlay .report-modal,
.report-overlay .report-card { margin: auto; }
/* 약관/개인정보 모달은 회원가입 모달(z-index 3000) 위에 떠야 함 (모달 위 모달) */
#tosOverlay, #privacyOverlay { z-index: 9999; }
/* Google Places Autocomplete dropdown 이 write-modal 위로 올라오도록 z-index 보정 */
.pac-container { z-index: 99999 !important; }
.report-modal {
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-xl);
  width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto; padding: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
}
.report-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.report-title { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.report-close { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text-muted); border-radius: var(--r-sm); }
.report-close:active { background: var(--bg-elevated); }
.report-close:hover { color: var(--text-primary); }
.report-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
.report-reasons { display: flex; flex-direction: column; gap: 10px; }
.report-reason {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 14px; color: var(--text-primary);
}
.report-reason input { accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer; }
.report-etc { margin-top: 10px; min-height: 70px; }
.report-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ── 계정 찾기 통합 탭 (아이디 찾기 | 비밀번호 찾기) ──
   · .report-modal 안에서 헤더 영역을 대체하는 탭 네비
   · 가운데 1px 세로 구분선 + 비활성 muted + 활성 underline */
.koaus-extra-tabs {
  display: flex; align-items: center;
  gap: 0; margin: -4px -4px 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.koaus-extra-tab {
  flex: 1; min-width: 0;
  background: none; border: none; cursor: pointer;
  font: 700 14.5px var(--font);
  color: var(--text-muted); letter-spacing: -0.01em;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  transition: color 0.14s ease, background 0.14s ease;
}
.koaus-extra-tab:hover { color: var(--text-secondary); background: var(--bg-elevated); }
.koaus-extra-tab.is-active {
  color: var(--text-primary);
  position: relative;
}
.koaus-extra-tab.is-active::after {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: -9px;
  height: 2px; background: var(--text-primary); border-radius: 2px;
}
.koaus-extra-tab-sep {
  width: 1px; height: 16px; background: var(--border); flex-shrink: 0;
}
.koaus-extra-tabs .report-close { margin-left: 6px; }
/* 탭 전환 시 pane fade-in — 콘텐츠가 스르륵 바뀌는 미세한 자연감 */
.koaus-extra-pane { animation: koaus-pane-fade 0.22s ease both; }
.koaus-extra-pane[hidden] { display: none; }
@keyframes koaus-pane-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── 토스트 알림 ── */
.koaus-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  z-index: 3000; background: var(--text-primary); color: var(--bg-base);
  padding: 12px 22px; border-radius: 999px; font-size: 13px; font-weight: 700;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease; max-width: 90vw; text-align: center;
}
.koaus-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 상세보기 Location 미니맵 ── */
.post-detail-location { display: flex; flex-direction: column; gap: 8px; }
.detail-loc-head { display: flex; align-items: center; justify-content: space-between; }
.detail-loc-title { font-size: 13px; font-weight: 800; color: var(--text-primary); letter-spacing: 0.02em; }
.detail-loc-expand {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all 0.12s;
}
.detail-loc-expand:hover { border-color: var(--text-primary); color: var(--text-primary); }
.detail-mini-map {
  width: 100%; height: 170px; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.map-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 13px; color: var(--text-muted); }

/* ── 지도 전체화면 확대 모달 ── */
.map-expand-overlay {
  position: fixed; inset: 0; z-index: 2400; background: var(--bg-base);
  display: none;
}
.map-expand-overlay.open { display: block; }
.map-expand-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-expand-close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary);
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.22); transition: background 0.12s;
}
.map-expand-close:hover { background: var(--bg-elevated); }
.map-fab-group {
  position: absolute; right: 16px; bottom: 24px; z-index: 5;
  display: flex; flex-direction: column; gap: 12px;
}
.map-fab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,.22); cursor: pointer; text-decoration: none;
  transition: background 0.12s, transform 0.1s;
}
.map-fab:hover { background: var(--bg-elevated); transform: translateY(-1px); }
@media (max-width: 768px) {
  .map-expand-close { top: 12px; right: 12px; }
  .map-fab-group { right: 12px; bottom: 18px; }
}

/* 마이페이지 '내가 쓴 글' 액션 버튼 — 'Living' 태그와 동일한 직사각형 박스 */
.mypage-item-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.mp-dup {
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-base); color: var(--text-primary); cursor: pointer;
  text-decoration: none; line-height: 1.4;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.mp-dup:hover { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }

/* 재업로드 시 사진 영역 빨간 안내문 */
.duplicate-notice {
  margin: 6px 0 0; padding: 8px 12px;
  background: rgba(220,38,38,0.08); border-left: 3px solid var(--red);
  color: var(--red); font-size: 12.5px; font-weight: 700; line-height: 1.5;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.mp-edit, .mp-del {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: 4px; font-family: var(--font);
  font-size: 12px; font-weight: 700; line-height: 1.3; cursor: pointer;
  text-decoration: none !important;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary) !important;
  transition: all 0.12s;
}
.mp-edit:hover { border-color: var(--text-primary); background: var(--bg-elevated); }
.mp-del { color: var(--red) !important; }
.mp-del:hover { border-color: var(--red); background: rgba(220,38,38,0.06); }

/* 리스트 뷰 카드 내 수정/삭제 (숙소) */
.card-actions { display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border-subtle); padding-top: 10px; margin-top: 2px; }

/* 리스트 뷰 행 내 수정/삭제 (구인구직) */
.post-list-table--jobs .post-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.post-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.row-actions .mp-edit, .row-actions .mp-del { padding: 3px 9px; font-size: 11px; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.pagination-btn {
  min-width: 36px; height: 36px; padding: 0 10px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all 0.12s;
}
.pagination-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.pagination-btn.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pagination-btn.pagination-nav { font-weight: 700; letter-spacing: -0.02em; }
.pagination-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pagination-btn:disabled:hover { border-color: var(--border); color: inherit; }

/* ── 법무·유학 파트너 디렉토리 (points.html — B&W) ── */
.partner-page-title {
  font-family: var(--font); font-size: 32px; font-weight: 900; letter-spacing: -0.02em;
  color: var(--text-primary);
}
@media (max-width: 640px) { .partner-page-title { font-size: 26px; } }

/* ── 관리자 등록 광고 배너 (홈 ad slot) ── */
.koaus-ad-slot {
  display: block; width: 100%; max-width: 100%; margin: 16px 0;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-card); text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.koaus-ad-slot:hover { border-color: var(--text-primary); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.koaus-ad-img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: cover; }
.partner-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--text-primary); color: var(--bg-card); border-radius: var(--r-lg);
  padding: 22px 26px; margin: 14px 0 18px;
}
.partner-cta-text { flex: 1; min-width: 220px; }
.partner-cta-title { font-size: 16px; font-weight: 900; letter-spacing: -0.01em; }
.partner-cta-sub   { font-size: 12.5px; font-weight: 500; opacity: 0.8; margin-top: 4px; line-height: 1.5; }
.partner-cta-btn {
  flex-shrink: 0; padding: 12px 22px; background: var(--bg-card); color: var(--text-primary);
  border-radius: 999px; font-size: 13.5px; font-weight: 800; text-decoration: none; transition: opacity 0.15s;
}
.partner-cta-btn:hover { opacity: 0.88; }

.partner-board { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: stretch; }
/* 지도 제거 — 리스트 전용 레이아웃 */
.partner-board--list-only { display: block; }
.partner-board--list-only .partner-list { min-height: 0; }
/* 카테고리별 하단 안내(법무팀/유학팀 문의 안내) */
.visa-cat-disclaimer {
  font-size: 12.5px; color: var(--text-muted);
  margin: 12px 0 4px; padding: 8px 14px;
  border-left: 3px solid var(--border); background: var(--bg-card);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.visa-bottom-disclaimer { font-style: normal; }
.partner-map-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; min-height: 320px; }
.partner-map { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(0.4); }
.partner-list { display: flex; flex-direction: column; gap: 10px; min-height: 320px; }

.partner-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.partner-card:hover { border-color: var(--text-muted); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.partner-card.is-premium { border-width: 2px; border-color: var(--text-primary); }
.partner-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.partner-card-name { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.partner-card-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 8px; background: var(--text-primary); color: var(--bg-card); border-radius: 999px;
}
.partner-card-sub  { font-size: 13px; color: var(--text-secondary); font-weight: 600; line-height: 1.5; }
.partner-card-meta { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.partner-card-body { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; margin-top: 4px; }

@media (max-width: 760px) {
  .partner-board { grid-template-columns: 1fr; }
  .partner-map-wrap, .partner-map { min-height: 240px; }
}
.accom-card-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.accom-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
}
.accom-type-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
}
.accom-type-badge--offering { background: var(--accent); color: var(--accent-text); }
.accom-type-badge--looking { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); }
.accom-price { font-size: 19px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.accom-price small { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.accom-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.accom-card-addr { font-size: 12px; color: var(--text-muted); }
.accom-card-meta { display: flex; gap: 10px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.accom-card-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.accom-tag {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
  letter-spacing: -0.01em; white-space: nowrap;
}
.accom-card-footer {
  display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted);
  border-top: 1px solid var(--border-subtle); padding-top: 8px; margin-top: 4px;
}

/* ── Map ── */
#mapView { width: 100%; position: relative; }
/* '이 지역 매물 검색하기' 플로팅 버튼 — 지도 상단 중앙, B&W 미니멀 */
.area-search-btn {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%) translateY(-6px);
  z-index: 5; display: none; opacity: 0;
  background: #fff; color: #000; border: 1px solid #000; border-radius: var(--r-md);
  padding: 10px 20px; font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.22); white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s, color 0.15s;
}
.area-search-btn.show { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.area-search-btn:hover { background: #000; color: #fff; }
#accomMap {
  width: 100%; height: 560px; min-height: 400px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--bg-card);
}

/* ── Filter Modal ── */
.filter-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 2500;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.filter-overlay.open { display: flex; }
.filter-modal {
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-xl);
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
.filter-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 18px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-base); z-index: 1;
}
.filter-modal-title { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; }
.filter-modal-title em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 8px; }
.filter-modal-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 20px; line-height: 1; padding: 4px; border-radius: var(--r-sm); transition: color 0.12s;
}
.filter-modal-close:hover { color: var(--text-primary); }
.filter-section { padding: 18px 24px; border-bottom: 1px solid var(--border-subtle); }
.filter-section-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill {
  padding: 7px 16px; background: none; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; transition: all 0.12s;
}
.filter-pill:hover { border-color: var(--text-muted); color: var(--text-primary); }
.filter-pill.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.filter-price-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); }
.filter-price-row input {
  width: 110px; padding: 9px 12px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-family: var(--font); font-size: 14px;
  color: var(--text-primary); outline: none; transition: border-color 0.15s;
}
.filter-price-row input:focus { border-color: var(--border-focus); }
.filter-checks { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.filter-check {
  display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
}
.filter-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.filter-modal-actions {
  display: flex; gap: 10px; padding: 18px 24px; justify-content: flex-end;
  position: sticky; bottom: 0; background: var(--bg-base); border-top: 1px solid var(--border);
}
.filter-reset-btn {
  padding: 10px 20px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.filter-reset-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.filter-apply-btn {
  padding: 10px 28px; background: var(--accent); color: var(--accent-text); border: none;
  border-radius: var(--r-md); font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s;
}
.filter-apply-btn:hover { opacity: 0.85; }

/* ── Write Modal (accom enhanced) ── */
.write-modal--tall { max-height: 88vh; overflow-y: auto; }
.write-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.write-modal-title em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 8px; }
.write-modal-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 20px; line-height: 1; padding: 4px; border-radius: var(--r-sm); transition: color 0.12s;
}
.write-modal-close:hover { color: var(--text-primary); }
.write-posttype-tabs {
  display: flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.write-posttype-tab { flex: 1; cursor: pointer; }
.write-posttype-tab input[type="radio"] { display: none; }
.write-posttype-tab span {
  display: flex; flex-direction: column; align-items: center; padding: 11px 16px;
  font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text-muted);
  transition: all 0.12s; user-select: none; border-right: 1px solid var(--border);
}
.write-posttype-tab:last-child span { border-right: none; }
.write-posttype-tab span em { font-style: normal; font-size: 11px; font-weight: 400; margin-top: 2px; }
.write-posttype-tab input:checked + span { background: var(--accent); color: var(--accent-text); }
.write-posttype-tab input:checked + span em { color: var(--accent-text); opacity: 0.75; }
.write-field--row { flex-direction: row; gap: 12px; }
.write-field--row > * { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.write-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.write-check {
  display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
}
/* 체크박스 확대 — 모바일 터치 친화 (하위 옵션 글씨는 라벨보다 한 단계 작게 유지) */
.write-check input { accent-color: var(--accent); width: 19px; height: 19px; cursor: pointer; }
/* 숙박기간·방형태·옵션 공통 — 컴팩트 인라인 칩(세로 높이 최소화, 한 줄 다닥다닥) · B&W */
.write-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.write-opt {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; color: var(--text-primary);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.write-opt:hover { border-color: var(--border-focus); }
.write-opt input { accent-color: var(--accent); width: 19px; height: 19px; cursor: pointer; flex-shrink: 0; }

/* 모바일/태블릿(≤768px): 2단 → 1단 스택 (폼 찌그러짐 방지) */
@media (max-width: 768px) {
  .write-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .write-field--row { flex-direction: column; }
  .accom-grid { grid-template-columns: 1fr; }
  .accom-tab { font-size: 13px; padding: 11px 10px 13px; line-height: 1; }  /* 모바일도 글씨 살짝 위로 (위 11 vs 아래 13+3=16) */
  .write-overlay { padding: 12px; }
  .write-modal { padding: 22px 16px; }
}

/* ── Contact (광고 문의) Page ── */
.contact-form {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.contact-field { display: flex; flex-direction: column; gap: 7px; }
.contact-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.contact-input, .contact-textarea {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-primary); font-family: var(--font); font-size: 14px; padding: 12px 14px; outline: none;
  transition: border-color 0.15s;
}
.contact-input::placeholder, .contact-textarea::placeholder { color: var(--text-muted); }
.contact-input:focus, .contact-textarea:focus { border-color: var(--border-focus); }
.contact-textarea { resize: vertical; min-height: 160px; line-height: 1.65; }
.contact-actions { display: flex; justify-content: flex-end; }
.contact-submit {
  padding: 12px 32px; background: var(--accent); color: var(--accent-text); border: none;
  border-radius: var(--r-md); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s;
}
.contact-submit:hover { opacity: 0.85; }
.contact-note { font-size: 13px; line-height: 1.6; min-height: 18px; margin: 0; }
.contact-note--ok  { color: var(--green); }
.contact-note--err { color: var(--red); }

/* ── Powerball Page ── */
.pb-official {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 24px 26px; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.pb-official-title { font-size: 16px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.pb-official-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.pb-official-btn {
  flex-shrink: 0; padding: 12px 22px; background: var(--accent); color: var(--accent-text);
  border-radius: var(--r-md); font-size: 14px; font-weight: 700; text-decoration: none;
  white-space: nowrap; transition: opacity 0.15s;
}
.pb-official-btn:hover { opacity: 0.85; }
.pb-generator {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 28px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center;
}
.pb-gen-title { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.pb-gen-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.pb-balls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  min-height: 56px; width: 100%;
}
.pb-empty { font-size: 14px; color: var(--text-muted); }
.pb-ball {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-base); border: 2px solid var(--text-primary);
  color: var(--text-primary); font-size: 18px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pb-ball--power { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pb-sep { font-size: 12px; font-weight: 800; color: var(--text-muted); letter-spacing: 0.05em; padding: 0 4px; }
.pb-gen-btn {
  padding: 13px 36px; background: var(--accent); color: var(--accent-text); border: none;
  border-radius: var(--r-md); font-family: var(--font); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s, transform 0.1s;
}
.pb-gen-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.pb-note { font-size: 11px; color: var(--text-muted); }

/* ── My Page ── */
.mypage-login-required {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 60px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.mypage-lr-icon { font-size: 40px; }
.mypage-lr-text { font-size: 15px; color: var(--text-secondary); }
.mypage-login-btn {
  padding: 11px 28px; background: var(--accent); color: var(--accent-text); border: none;
  border-radius: var(--r-md); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s;
}
.mypage-login-btn:hover { opacity: 0.85; }
.mypage-profile {
  display: flex; align-items: flex-start; gap: 18px; padding: 24px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl);
}

/* ── KoAus 계정 (카카오톡 프로필 스타일) ──
   · 대제목 + 프로필 카드(아바타·이름·이메일) + 닉네임·사진·토글 행 구분
   · B&W 톤 유지, 토글 활성 시 초록색 (사용자 예외 허용) */
.mypage-account {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.mypage-account-header { margin-bottom: 10px; }
.mypage-account-title {
  font-size: 18px; font-weight: 900; color: var(--text-primary);
  letter-spacing: -0.01em; margin: 0;
}
.mypage-account-subtitle {
  font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0;
}
.mypage-account-card {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 4px 16px;
  border-bottom: 1px solid var(--border);
}
.mypage-account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.mypage-account-row:last-child { border-bottom: none; }
.mypage-account-row-info { min-width: 0; flex: 1; }
.mypage-account-row-label {
  font-size: 13.5px; font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.01em;
}
.mypage-account-row-desc {
  font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.45;
}

/* 토글 — 비활성: 무채색(B&W), 활성: 초록 (사용자 예외 허용)
   · 슬라이딩: cubic-bezier 로 부드러운 spring 느낌
   · 활성 시 슬라이더 배경 + knob 위치가 동시에 매끄럽게 전환 */
.mp-name-toggle {
  position: relative; display: inline-block;
  width: 46px; height: 26px; cursor: pointer; flex-shrink: 0;
}
.mp-name-toggle input { opacity: 0; width: 0; height: 0; }
.mp-name-toggle-slider {
  position: absolute; inset: 0;
  background: var(--border); border-radius: 999px;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}
.mp-name-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: transform 0.28s cubic-bezier(0.34, 1.30, 0.64, 1), box-shadow 0.22s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(0,0,0,0.04);
  will-change: transform;
}
.mypage-avatar {
  width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800;
}
.mypage-profile-info { flex: 1; min-width: 0; }
.mypage-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.mypage-name { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.mypage-edit-btn, .mypage-photo-btn {
  font-size: 11px; font-weight: 700; font-family: var(--font);
  color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer; transition: all 0.12s;
}
.mypage-edit-btn:hover, .mypage-photo-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.mypage-email { font-size: 13px; color: var(--text-muted); }
.mypage-nick-note { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.mypage-nick-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.mypage-nick-edit .auth-input { width: auto; flex: 1 1 180px; min-width: 0; max-width: 260px; }
.mypage-nick-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mypage-tabs { display: flex; border-bottom: 2px solid var(--border); }
.mypage-tab {
  flex: 1; padding: 13px 12px; background: none; border: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; font-family: var(--font); font-size: 14px; font-weight: 700;
  color: var(--text-muted); cursor: pointer; transition: color 0.15s;
}
.mypage-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.mypage-list { display: flex; flex-direction: column; gap: 10px; }
.mypage-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); text-decoration: none; transition: border-color 0.12s;
}
.mypage-item:hover { border-color: var(--text-muted); }
.mypage-item-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
}
.mypage-item-title { flex: 1; min-width: 120px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.mypage-item-meta { font-size: 12px; color: var(--text-muted); }

/* ── Care · 긴급 연락처 페이지 ── */
.care-block {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 22px 24px; margin-bottom: 16px;
}
.care-block-title { font-size: 17px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.care-block-title em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.care-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 16px 0; border-bottom: 1px solid var(--border-subtle);
}
.care-card:last-child { border-bottom: none; }
.care-card-info { flex: 1; min-width: 200px; }
.care-card-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.care-card-tag { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.care-card-num { font-size: 23px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-top: 5px; letter-spacing: 0.02em; }
.care-card-addr { font-size: 12px; color: var(--text-muted); margin-top: 5px; line-height: 1.5; }
.care-card-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.care-call-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px;
  background: var(--accent); color: var(--accent-text); border-radius: var(--r-md);
  font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: opacity 0.15s;
}
.care-call-btn:hover { opacity: 0.85; }
.care-map-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px;
  background: var(--bg-base); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: all 0.15s;
}
.care-map-btn:hover { border-color: var(--text-primary); }
.care-consulate { align-items: flex-start; }
.care-consulate--gov {
  background: var(--accent-dim); border: 1px solid var(--accent); border-radius: var(--r-md);
  padding: 16px; margin: 4px 0 10px; border-bottom: 1px solid var(--accent);
}
.care-gov-badge {
  display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 3px;
  background: #3B82F6; color: #fff; margin-right: 6px; vertical-align: middle;
}

/* ── Care Page (placeholder) ── */
.care-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 80px 24px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.care-empty-icon { font-size: 48px; line-height: 1; }
.care-empty-title { font-size: 24px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; }
.care-empty-text { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.care-empty-btn {
  margin-top: 8px; padding: 11px 28px; background: var(--accent); color: var(--accent-text);
  border-radius: var(--r-md); font-size: 14px; font-weight: 700; text-decoration: none;
  transition: opacity 0.15s;
}
.care-empty-btn:hover { opacity: 0.85; }

/* ── 긴급연락처 페이지 (B&W) ── */
.emerg-section { margin-bottom: 28px; }
.emerg-section-title {
  font-size: 14px; font-weight: 800; color: var(--text-primary);
  letter-spacing: 0.02em; margin: 0 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.emerg-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.emerg-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-primary); text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.emerg-card:hover { border-color: var(--text-primary); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.emerg-card--urgent { border-width: 2px; border-color: var(--text-primary); }
.emerg-card-label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.emerg-card-num { font-size: 22px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.emerg-card-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.emerg-disclaimer {
  font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.6;
  margin-top: 18px; padding: 14px 16px; border-top: 1px solid var(--border);
}
.emerg-disclaimer strong { color: var(--text-primary); font-weight: 800; }

/* ── 약관 / 개인정보처리방침 독립 페이지 (B&W) ── */
.legal-page {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 32px 36px; max-width: 800px; margin: 0 auto;
}
.legal-article { padding: 18px 0; border-bottom: 1px solid var(--border); }
.legal-article:last-of-type { border-bottom: none; }
.legal-article-title {
  font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.005em;
  margin: 0 0 10px;
}
.legal-article p {
  font-size: 14px; font-weight: 400; color: var(--text-secondary); line-height: 1.75; letter-spacing: -0.003em;
  margin: 0;
}
.legal-meta {
  margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.legal-meta-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.legal-meta-label { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; min-width: 180px; }
.legal-meta-val { font-size: 13px; font-weight: 700; color: var(--text-primary); text-decoration: none; }
a.legal-meta-val:hover { border-bottom: 1px solid var(--text-primary); }
@media (max-width: 640px) {
  .legal-page { padding: 24px 22px; }
  .legal-meta-label { min-width: 0; }
}

/* ── 관리자 페이지 (admin.html — B&W) ── */
.admin-section {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 26px; margin-bottom: 22px;
}
.admin-section-title { font-size: 17px; font-weight: 900; color: var(--text-primary); margin: 0 0 14px; letter-spacing: -0.005em; }
.admin-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.admin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-field { display: flex; flex-direction: column; gap: 5px; }
.admin-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.02em; }
.admin-req   { color: var(--text-primary); margin-left: 4px; }
.admin-input {
  padding: 9px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.admin-input:focus { outline: none; border-color: var(--text-primary); }
.admin-textarea {
  min-height: 90px; resize: vertical;
  padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.55;
}
.admin-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer; }
.admin-actions { display: flex; justify-content: flex-end; }
.admin-submit {
  padding: 10px 22px; background: var(--accent); color: var(--accent-text); border: none; border-radius: 999px;
  font-family: var(--font); font-size: 13px; font-weight: 800; cursor: pointer; transition: opacity 0.15s;
}
.admin-submit:hover { opacity: 0.85; }
.admin-note { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--text-muted); min-height: 16px; }
.admin-note--ok  { color: var(--text-primary); }
.admin-note--err { color: var(--text-primary); background: var(--bg-elevated); padding: 6px 10px; border-radius: var(--r-sm); }

.admin-list { display: flex; flex-direction: column; gap: 6px; }
.admin-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px;
}
.admin-item-main { flex: 1; min-width: 0; color: var(--text-primary); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.admin-item-meta { font-size: 11.5px; color: var(--text-muted); }
.admin-del {
  flex-shrink: 0; padding: 4px 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font); font-size: 11.5px; font-weight: 700; color: var(--text-primary); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.admin-del:hover { border-color: var(--text-primary); background: var(--bg-elevated); }
.admin-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.admin-list-title { font-size: 13px; font-weight: 800; color: var(--text-secondary); letter-spacing: 0.04em; margin: 12px 0 8px; text-transform: uppercase; }

.admin-post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.admin-post-row {
  position: relative; padding: 12px 14px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
}
.admin-post-row.is-pinned { border: 2px solid var(--text-primary); }
.admin-post-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-post-cat { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 8px; background: var(--text-primary); color: var(--bg-card); border-radius: 999px; }
.admin-post-state { font-size: 10.5px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; }
.admin-post-pin { font-size: 10px; font-weight: 800; color: var(--text-primary); }
.admin-post-title { font-size: 14.5px; font-weight: 800; color: var(--text-primary); }
.admin-post-sub { font-size: 12px; color: var(--text-secondary); }
.admin-post-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.admin-post-time { font-size: 11px; color: var(--text-muted); }
@media (max-width: 640px) {
  .admin-section { padding: 18px 18px; }
  .admin-row { grid-template-columns: 1fr; }
}

/* ── 관리자 로그인 게이트 (Firebase Auth · B&W 풀스크린 오버레이) ── */
.admin-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-page); padding: 24px;
}
.admin-gate-card {
  width: 100%; max-width: 380px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 36px 32px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
.admin-gate-title { font-size: 22px; font-weight: 900; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; }
.admin-gate-sub   { font-size: 13px; color: var(--text-secondary); margin: 0 0 6px; line-height: 1.55; }
.admin-gate-field { display: flex; flex-direction: column; gap: 5px; }
.admin-gate-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.04em; }
.admin-gate-input {
  padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.admin-gate-input:focus { outline: none; border-color: var(--text-primary); }
.admin-gate-err { font-size: 12.5px; font-weight: 700; color: var(--text-primary); background: var(--bg-elevated); border-radius: var(--r-sm); padding: 8px 10px; min-height: 16px; line-height: 1.4; }
.admin-gate-err:empty { background: transparent; padding: 0; min-height: 0; }
.admin-gate-submit {
  padding: 12px 18px; background: var(--accent); color: var(--accent-text); border: none; border-radius: 999px;
  font-family: var(--font); font-size: 14px; font-weight: 800; cursor: pointer; transition: opacity 0.15s;
  margin-top: 4px;
}
.admin-gate-submit:hover:not(:disabled) { opacity: 0.85; }
.admin-gate-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-gate-cancel {
  text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); text-decoration: none; margin-top: 4px;
}
.admin-gate-cancel:hover { color: var(--text-primary); }

/* 관리자 헤더 우측: 로그인 정보 + 로그아웃 */
.admin-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-who { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: -0.005em; }
.admin-logout {
  padding: 6px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--text-primary); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.admin-logout:hover { border-color: var(--text-primary); background: var(--bg-elevated); }

/* ── 마이페이지 이름 공개 토글 — 활성 시 초록색 (Tailwind bg-green-500) ──
   · 비활성: var(--border) 무채색 → 활성: #22c55e 초록 (background-color transition)
   · knob: translateX(20px) + cubic-bezier 슬라이딩 (오버슈트 살짝)
   · 활성 시 slider 내부에 미세한 inset shadow 로 입체감 */
.mp-name-toggle input:checked ~ .mp-name-toggle-slider {
  background-color: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px rgba(34,197,94,0.28);
}
.mp-name-toggle input:checked ~ .mp-name-toggle-knob {
  transform: translateX(20px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.06);
}
.mp-name-toggle:hover .mp-name-toggle-slider { filter: brightness(0.97); }
.mp-name-toggle:active .mp-name-toggle-knob { transform: translateX(20px) scale(1.06); }
.mp-name-toggle input:not(:checked):active ~ .mp-name-toggle-knob { transform: scale(1.06); }
.mp-name-toggle input:focus-visible ~ .mp-name-toggle-slider {
  outline: 2px solid #22c55e; outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   KoAus 2.1 — Fluid Responsive Layout (maplescouter.com 레퍼런스)
   ════════════════════════════════════════════════════════════════════════
   · 데스크톱: 중앙 max-width 컬럼 + 넉넉한 여백
   · 태블릿/모바일: 100vw 꽉 채움 (가로 스크롤 절대 차단)
   · 폰트/간격: clamp() 으로 부드럽게 보간
   · 모든 규칙은 기존 정의보다 뒤에 와서 cascade 로 override
   ════════════════════════════════════════════════════════════════════════ */

/* 1) 글로벌 overflow-x 차단 — 어떤 자식 요소도 화면 밖으로 못 나가게 가드 */
html, body { max-width: 100vw; overflow-x: hidden; }

/* 2) page-container — 메이플 환산처럼 데스크톱 1200px, 모바일은 100vw 꽉
   · 양옆 패딩은 화면 너비에 따라 fluid (clamp)
   · padding-top 압축은 그대로 유지 */
.page-container {
  max-width: 1200px;
  padding: 14px clamp(12px, 3vw, 28px) 64px;
  gap: clamp(10px, 1.5vw, 14px);
}
@media (max-width: 480px) {
  .page-container { padding: 12px clamp(10px, 3vw, 14px) 48px; }
}

/* 3) page-header — 제목/액션 줄바꿈 + fluid 폰트 */
.page-title    { font-size: clamp(20px, 3.8vw, 28px); }
.page-subtitle { font-size: clamp(12.5px, 1.6vw, 14px); }

/* 4) home-main — 모바일에서도 좌우 여백 살짝 더 컴팩트하게 (꽉 채우기) */
.home-main {
  max-width: 1100px;
  padding: clamp(20px, 4vw, 36px) clamp(14px, 3vw, 24px) clamp(48px, 8vw, 80px);
  gap: clamp(14px, 2.2vw, 22px);
}

/* 5) 모바일 맵 뷰 — 1:5 비율 (지도 컴팩트 / 리스트 위주)
   · #mapView 가 페이지 헤더/검색바 아래에 단독으로 켜졌을 때만 적용
   · 데스크톱은 기존 동작 그대로 (560px 등) */
@media (max-width: 768px) {
  #mapView { width: 100%; }
  #accomMap {
    height: clamp(160px, 22vh, 220px) !important;
    min-height: 160px !important;
    border-radius: var(--r-md);
  }
  /* 지도 fab(확대/현위치 등) 도 좀 더 살짝 작게 */
  .map-fab-group { right: 10px; bottom: 12px; }
  /* '이 지역 검색' 버튼도 작게 */
  .area-search-btn { padding: 7px 14px; font-size: 12.5px; top: 10px; }
}
@media (max-width: 480px) {
  #accomMap {
    height: clamp(140px, 18vh, 180px) !important;
    min-height: 140px !important;
  }
}

/* 6) State(주) 바로가기 카드 — Care/Exchange/Home-shortcut 디자인 톤 통일
   · 데스크톱 4열, 태블릿 3열, 모바일 2열 (꽉 채움)
   · padding/gap fluid, 카드 자체는 home-shortcut 스타일 모방 */
.state-section {
  margin: clamp(16px, 2.5vw, 28px) 0 clamp(8px, 1.5vw, 14px);
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.5vw, 16px);
}
.state-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.state-section-title {
  font-size: clamp(15px, 2.2vw, 18px); font-weight: 900;
  letter-spacing: -0.01em; color: var(--text-primary);
}
.state-section-hint {
  font-size: clamp(11px, 1.4vw, 12.5px); font-weight: 500;
  color: var(--text-muted); letter-spacing: -0.005em;
}
.state-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 14px);
  width: 100%;
}
@media (max-width: 960px) { .state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 360px) { .state-grid { gap: 8px; } }
/* modifier — 카드 2개만 한 줄로 (홈의 Care/환율 페어 등) */
.state-grid.state-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* .home-shortcut(홈 Care/환율 카드)와 100% 동일 디자인 토큰 — 사이즈만 8개 그리드용으로 컴팩트 */
.state-card {
  position: relative; display: flex; flex-direction: column;
  gap: 4px; padding: clamp(12px, 2vw, 18px);
  min-height: clamp(74px, 11vw, 96px);
  min-width: 0;  /* grid item — 콘텐츠가 트랙 폭 못 넘게 (overflow-x 차단 안전망) */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text-primary); text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.state-card:hover {
  border-color: var(--text-primary);
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);  /* home-shortcut 과 동일값 */
}
.state-card-code {
  font-size: clamp(18px, 2.6vw, 22px); font-weight: 900;
  letter-spacing: -0.01em; line-height: 1.1;
  color: var(--text-primary);
}
.state-card-name {
  font-size: clamp(11px, 1.5vw, 12.5px); font-weight: 600;
  letter-spacing: -0.005em; color: var(--text-secondary);
  line-height: 1.3;
  overflow-wrap: anywhere;  /* "Australian Capital" 같은 긴 단어도 카드 폭 안에서 안전 wrap */
}
.state-card-arrow {
  position: absolute; top: clamp(10px, 1.6vw, 14px); right: clamp(10px, 1.6vw, 14px);
  font-size: 14px; font-weight: 800; color: var(--text-muted);
  transition: color 0.15s, transform 0.15s;
}
.state-card:hover .state-card-arrow { color: var(--text-primary); transform: translateX(3px); }

/* 7) state.html 허브 — 그 주의 카테고리 카드 그리드 (식당/미용실/숙소 등)
   · home-shortcut 과 동일 톤, 더 컴팩트 */
.state-hub-section { margin-top: clamp(18px, 2.5vw, 28px); }
.state-hub-head {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: clamp(14px, 2vw, 22px);
}
.state-hub-eyebrow {
  font-size: clamp(10.5px, 1.4vw, 12px); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.state-hub-title {
  font-size: clamp(24px, 4.5vw, 36px); font-weight: 900;
  letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.05;
}
.state-hub-sub {
  font-size: clamp(13px, 1.7vw, 15px); color: var(--text-secondary);
  line-height: 1.5; letter-spacing: -0.005em;
}
.state-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 16px);
}
@media (max-width: 768px) { .state-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .state-hub-grid { grid-template-columns: 1fr; gap: 10px; } }
/* state.html 의 카테고리 카드 — .home-shortcut(Care/환율 카드)와 100% 동일 토큰 */
.state-hub-card {
  position: relative; display: flex; flex-direction: column;
  gap: 6px; padding: clamp(18px, 2.6vw, 22px) clamp(20px, 3vw, 26px);
  min-height: clamp(110px, 13vw, 120px);
  min-width: 0;  /* grid item overflow 안전망 */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text-primary); text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.state-hub-card:hover {
  border-color: var(--text-primary);
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);  /* home-shortcut 과 동일값 */
}
.state-hub-card-emoji {
  font-size: clamp(20px, 2.6vw, 24px); line-height: 1;
}
.state-hub-card-label {
  font-size: clamp(16px, 2.2vw, 20px); font-weight: 900;
  letter-spacing: -0.015em; line-height: 1.2;
}
.state-hub-card-desc {
  font-size: clamp(12px, 1.5vw, 13px); font-weight: 500;
  color: var(--text-secondary); letter-spacing: -0.005em;
  line-height: 1.5;
}
.state-hub-card-arrow {
  position: absolute; top: 16px; right: 18px;
  font-size: 16px; font-weight: 800; color: var(--text-muted);
}
.state-hub-card:hover .state-hub-card-arrow { color: var(--text-primary); transform: translateX(3px); transition: transform 0.15s, color 0.15s; }

/* 7-A) 정책 페이지(privacy.html / terms.html) 헤더 우측 액션 + 닫기(X) 버튼 */
.legal-header-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  flex-shrink: 0;
}
.legal-close-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 16px; font-weight: 800; line-height: 1;
  color: var(--text-secondary); cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s, transform 0.12s;
  align-self: flex-end;
}
.legal-close-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--bg-elevated);
  transform: scale(1.05);
}
.legal-close-btn:active { transform: scale(0.95); }
@media (max-width: 640px) {
  .legal-close-btn { width: 34px; height: 34px; font-size: 15px; }
  .legal-header-actions { gap: 5px; }
}

/* 8) 작은 화면에서 모든 카드/이미지/iframe 이 부모 폭을 넘지 못하도록 글로벌 가드 */
img, iframe, video, canvas, svg, table { max-width: 100%; }
.accom-card, .care-card, .exchange-card, .home-shortcut, .state-card, .state-hub-card { max-width: 100%; }