/* ---------- 디자인 토큰 (룰 13) ---------- */
:root {
  /* 브랜드 컬러 (Toss 블루 계열) */
  --blue-50:  #EEF4FF;
  --blue-100: #DCEAFE;
  --blue-500: #3182F6;
  --blue-600: #1B64DA;
  --blue-700: #164FB0;

  /* 그레이 스케일 */
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F6;
  --gray-200: #E5E8EB;
  --gray-300: #D1D6DB;
  --gray-400: #B0B8C1;
  --gray-500: #8B95A1;
  --gray-600: #6B7684;
  --gray-700: #4E5968;
  --gray-800: #333D4B;
  --gray-900: #191F28;

  --white: #FFFFFF;

  /* 의미 컬러 */
  --success: #12B886;
  --money:   #0CA678;
  --teal:    #0CA678;
  --green-50: #E6FCF5;
  --orange:  #D9480F;
  --warn:    #F59F00;
  --danger:  #FA5252;
  /* 외출 탭 (주황 계열) */
  --out:     #F76707;
  --out-50:  #FFF4EC;
  --out-100: #FFE8D6;

  /* 배경/표면 (다크모드에서 재정의됨) */
  --bg:            var(--surface);   /* 흰 바탕 (Seenby 스타일) */
  --surface:       var(--white);
  --surface-sub:   var(--gray-50);
  --border:        var(--gray-200);
  --border-light:  var(--gray-100);
  --text-strong:   var(--gray-900);
  --text:          var(--gray-700);
  --text-weak:     var(--gray-500);

  /* 간격 스케일 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 반경 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* 그림자 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);

  /* z-index 계층 (룰 15) */
  --z-dropdown: 100;
  --z-header:   200;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-loading:  3000;

  /* 레이아웃 */
  --nav-h: 64px;
  --tabbar-h: 64px;
  --content-max: 1200px;
}/* ---------- 다크모드 (룰 13, 룰 27) ---------- */

html[data-theme="dark"] {
  --blue-50:  #17263F;          /* 연한 파랑 배경(선택·활성)을 다크에서 어둡게 */
  --bg:            var(--surface);
  --surface:       #1A2028;
  --surface-sub:   #232B36;
  --border:        #2A333F;
  --border-light:  #232B36;
  --text-strong:   #E5E8EB;
  --text:          #C9CFD8;
  --text-weak:     #8B95A1;

  --gray-50:  #232B36;
  --gray-100: #1A2028;
  --gray-200: #2A333F;
  --green-50: #12352B;          /* 연한 초록·주황 배경도 다크에서 어둡게 */
  --out-50:   #3A2414;
  --out-100:  #4A2C16;
}/* ---------- 리셋 ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Noto Sans KR', -apple-system,
               BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-strong);
  /* 룰 18: 한글 단어 중간 잘림 방지 */
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  /* 룰 12: body가 직접 스크롤 (컨테이너에 가두지 않음) */
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }/* 룰 27: 모션 감소 존중 */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }}/* =========================================================
   상단 네비 (룰 15: z-header)
   ========================================================= */

.topnav {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  gap: var(--sp-8);
}
.topnav__logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.topnav__logo svg { width: 22px; height: 22px; color: var(--blue-500); }

.topnav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  gap: 4px;
}
.topnav__item {
  padding: var(--sp-2) 12px;
  font-size: 15px;
  color: var(--text-weak);
  border-radius: var(--r-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  /* 룰 20: 터치 영역 확보 */
  min-height: 44px;
}
.topnav__item svg { width: 16px; height: 16px; }
.topnav__item:hover { color: var(--text-strong); }
.topnav__item.is-active {
  color: var(--text-strong);
  font-weight: 700;
}

.topnav__right { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.topnav__icon-btn {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
}
.topnav__icon-btn:hover { background: var(--surface-sub); }
.topnav__icon-btn svg { width: 20px; height: 20px; }
.topnav__avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #A5C7F7, var(--blue-500));
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}/* =========================================================
   하단 탭바 (모바일 전용, 룰 12 safe-area)
   ========================================================= */

.tabbar {
  display: none; /* 데스크톱에선 숨김, 모바일에서 flex */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-header);
  background: var(--surface);
  border-top: 1px solid var(--border);
  /* 룰 12: 아이폰 노치 safe-area */
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
.tabbar__inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: var(--tabbar-h);
}
.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-weak);
  flex: 1;
  /* 룰 20: 터치 영역 */
  min-height: 44px;
  padding: var(--sp-2);
}
.tabbar__item svg { width: 22px; height: 22px; }
.tabbar__item.is-active { color: var(--blue-500); }/* =========================================================
   페이지 컨테이너 / section (룰 10: SPA)
   ========================================================= */

.page {
  display: none; /* 라우터가 활성 페이지만 표시 */
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-6);
}
.page.is-active { display: block; }/* 홈: 1열 컨테이너 (안쪽 그리드는 .hgrid) */

.page-home.is-active { display: block; max-width: 1120px; margin: 0 auto; }
.page-home__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }/* ── 홈 체크인 (오늘 기분 + 한 줄) ── *//* ── 홈 A: 오늘의 질문 (보라 그라데이션 히어로) ── */

.tab-home .q { background: linear-gradient(160deg, #8B6FE8, #6A48D0); border: none; border-radius: var(--r-2xl); padding: 20px; color: #fff; }/* ── 공유 유도 (기록 페이지, 간소한 버튼) ── *//* ── 공유 카드 모달 ── */

.modal.sharemodal { max-width: 360px; padding: 20px 22px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; }
.sharemodal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sharemodal__head b { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.sharemodal__cardwrap { display: flex; justify-content: center; margin-bottom: 16px; }
.sharecard-canvas { display: block; width: 280px; height: 380px; border-radius: 22px; box-shadow: 0 14px 40px rgba(20,40,80,.28); }
.sharemodal__actions { display: flex; gap: 8px; }
.sharemodal__btn { flex: 1; padding: 13px; border-radius: 13px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; }
.sharemodal__btn--save { background: var(--surface-sub); color: var(--text); border: 1px solid var(--border); }
.sharemodal__btn--share { background: var(--blue-500); color: #fff; }/* 사이드 위젯 */

.tab-home .side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}/* 일거리 탭 내부 콘텐츠를 760px로 가운데 정렬 */

.tab-work.is-active { display: block; }
.tab-work__inner { max-width: 760px; margin: 0 auto; }/* 내 지원 목록 *//* 잡보드 리스트 */

.tab-work .job {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 18px;
  width: 100%; text-align: left; color: inherit;
  transition: border-color .15s;
}
.tab-work .job:hover { border-color: var(--blue-100); }/* 재택 세부 칩 (은둔러 핵심 정보) *//* 빈 상태 (룰 24: 에러/빈 상태 공통) */

.tab-work .empty {
  text-align: center; padding: 60px 24px; color: var(--text-weak);
}
.tab-work .empty svg { width: 40px; height: 40px; margin-bottom: 12px; color: var(--gray-300); }
.tab-work .empty__text { font-size: 14px; }/* ---------- 일거리 상세 ---------- */

.tab-work .detail__back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--text-weak);
  margin-bottom: 16px; min-height: 44px; background: none; border: none;
  vertical-align: middle;
}
.tab-work .detail__back svg { width: 15px; height: 15px; }/* 상세 재택 칩 (목록과 동일 스타일 재사용) *//* 상세 본문 흰 카드 (목록의 회색배경+흰카드와 통일) *//* =========================================================
   모달 (룰 21: viewport 전체, body 직속, safe-area / 룰 15: z-modal)
   ========================================================= */

.modal-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--surface);
  width: 100%; max-width: 480px;
  max-height: 92dvh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex; flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.2s;
  overflow: hidden;
}
.modal-overlay.is-open .modal { transform: translateY(0); }/* 데스크톱에선 가운데 팝업 형태 */

@media (min-width: 600px) {
  .modal-overlay { align-items: center; }
  .modal { border-radius: var(--r-xl); }}/* 신청서 요소 */

.field { margin-bottom: 18px; }/* 룰 19: iOS 자동 줌 방지 — input/textarea 16px *//* 대화 세그먼트: 컨테이너는 다른 세그먼트와 같은 1120px(세그먼트 줄 위치 고정 → 들썩임 없음).
   채팅 split은 세그먼트 줄과 같은 왼쪽 시작점 + 전체폭 → 좌우 여백이 세그먼트 줄과 동일하게 균등 */

.tab-connect__inner { max-width: 760px; margin: 0 auto; }/* ===== 탭 2단 레이아웃 (목록 화면 + 오른쪽 사이드 위젯) ===== */

.page[data-page="board"].tab-connect--2col.is-active,
.page[data-page="buddy"].tab-connect--2col.is-active,
.page[data-page="work"].tab-work--2col.is-active {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px;
  max-width: 1120px; margin: 0 auto; align-items: start;
}
.tab-connect--2col .tab-connect__inner,
.tab-work--2col .tab-work__inner { max-width: none; margin: 0; }/* 모바일: 사이드 위젯 숨김 (가운데 컬럼만) */

@media (max-width: 900px) {
  .page[data-page="board"].tab-connect--2col.is-active,
  .page[data-page="buddy"].tab-connect--2col.is-active,
  .page[data-page="work"].tab-work--2col.is-active {
    display: block; max-width: 760px;
  }}/* 내 활동 / 내 지원 전용 페이지 상단바 (뒤로가기 + 제목) — 동행 내 신청과 동일 패턴 */

.tab-connect .mine-page__bar, .tab-work .mine-page__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.tab-connect .mine-page__back, .tab-work .mine-page__back {
  width: 36px; height: 36px; border-radius: var(--r-full); border: none; background: var(--gray-100, #F2F4F6);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); flex-shrink: 0;
}
.tab-connect .mine-page__back svg, .tab-work .mine-page__back svg { width: 20px; height: 20px; }
.tab-connect .mine-page__title, .tab-work .mine-page__title { font-size: 18px; font-weight: 700; color: var(--text-strong); }
.tab-connect .cat {
  padding: 8px 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-weak);
  display: flex; align-items: center; gap: 4px; min-height: 40px;
}
.tab-connect .cat svg { width: 12px; height: 12px; }
.tab-connect .cat.is-active { background: var(--gray-900); color: var(--white); border-color: var(--gray-900); }
html[data-theme="dark"] .tab-connect .cat.is-active { background: var(--blue-500); border-color: var(--blue-500); }/* 내 활동 미니탭 (카테고리 칩 자리에 표시되는 내 글/내 댓글/내 저장) *//* 내 댓글 카드 *//* 글 목록 */

.tab-connect .post {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px 18px; margin-bottom: 8px; width: 100%; text-align: left; color: inherit;
}
.tab-connect .post:hover { border-color: var(--blue-100); }/* 글 상세 */
.tab-connect .detail__back {
  display: flex; align-items: center; gap: 4px; font-size: 13px;
  color: var(--text-weak); margin-bottom: 18px; background: none; border: none; min-height: 40px;
  width: fit-content;
}
.tab-connect .detail__back svg { width: 15px; height: 15px; }/* 점3개(⋮) 메뉴 — 상세 우측 끝 */

.tab-connect .post-kebab-wrap { position: relative; flex-shrink: 0; }
.tab-connect .post-kebab {
  background: none; border: none; padding: 8px; margin: -8px; color: var(--text-weak);
  cursor: pointer; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center;
}
.tab-connect .post-kebab:hover { background: var(--surface-sub); color: var(--text); }
.tab-connect .post-kebab svg { width: 18px; height: 18px; }
.tab-connect .post-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12); padding: 5px; min-width: 128px;
}
.tab-connect .post-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px;
  background: none; border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
  color: var(--text); cursor: pointer; text-align: left;
}
.tab-connect .post-menu__item:hover { background: var(--surface-sub); }
.tab-connect .post-menu__item svg { width: 15px; height: 15px; color: var(--text-weak); }
.tab-connect .post-menu__item--danger { color: #E03131; }
.tab-connect .post-menu__item--danger svg { color: #E03131; }/* 같은 게시판 다른 글 목록 (댓글 아래) */

.tab-connect .sibling { margin-top: 32px; padding-top: 20px; border-top: 8px solid var(--surface-sub); }
.tab-connect .sibling__head { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 12px; }
.tab-connect .sibling__cat { color: var(--blue-500); }
.tab-connect .sibling__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 4px; background: none; border: none; border-bottom: 1px solid var(--border-light);
  cursor: pointer; text-align: left; width: 100%;
}
.tab-connect .sibling__item:hover .sibling__title { color: var(--blue-500); }
.tab-connect .sibling__item.is-current { background: var(--surface-sub); border-radius: var(--r-sm); }
.tab-connect .sibling__item.is-current .sibling__title { font-weight: 700; }
.tab-connect .sibling__title {
  font-size: 13.5px; color: var(--text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab-connect .sibling__meta { display: flex; gap: 8px; flex-shrink: 0; font-size: 11.5px; color: var(--gray-400); }
.tab-connect .sibling__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tab-connect .sibling__btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--r-sm); font-size: 13px; font-weight: 600; cursor: pointer;
}
.tab-connect .sibling__btn svg { width: 14px; height: 14px; }
.tab-connect .sibling__btn:hover { background: var(--surface-sub); }
.tab-connect .sibling__btn--write { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
.tab-connect .sibling__btn--write:hover { background: var(--blue-600); }
.tab-connect .sibling__btn--write svg { color: #fff; }/* 삭제 확인 모달 (공용) */

.confirm-modal { text-align: center; max-width: 320px; }
.confirm__icon {
  width: 48px; height: 48px; border-radius: var(--r-full); margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.confirm__icon--danger { background: #FFF0F0; color: #E03131; }
.confirm__icon svg { width: 24px; height: 24px; }
.confirm__title { font-size: 16px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }
.confirm__desc { font-size: 13px; color: var(--text-weak); margin-bottom: 20px; line-height: 1.5; }
.confirm__btns { display: flex; gap: 8px; }
.confirm__cancel, .confirm__danger {
  flex: 1; padding: 12px; border-radius: var(--r-md); font-size: 14px; font-weight: 700; cursor: pointer; border: none;
}
.confirm__cancel { background: var(--surface-sub); color: var(--text); }
.confirm__danger { background: #E03131; color: #fff; }
.confirm__danger:hover { background: #C92A2A; }/* 댓글 */
.tab-connect .comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }/* 댓글 아바타 색상 */

.avatar-1 { background: linear-gradient(135deg, #FFB088, #F76707); }
.avatar-2 { background: linear-gradient(135deg, #A5C7F7, #3182F6); }
.avatar-3 { background: linear-gradient(135deg, #B197FC, #7048E8); }
.avatar-4 { background: linear-gradient(135deg, #63E6BE, #12B886); }
.avatar-5 { background: linear-gradient(135deg, #FFD43B, #F59F00); }
.avatar-op { background: linear-gradient(135deg, #4DABF7, #1971C2); }/* 답글 (대댓글) */
.tab-connect .reply { display: flex; gap: 10px; }/* 동행 칩 (태그) *//* 동행 아바타 (보라 계열) */

.tab-connect .comp-av {
  width: 44px; height: 44px; border-radius: var(--r-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.tab-connect .comp-av--1 { background: linear-gradient(135deg,#748FFC,#4263EB); }
.tab-connect .comp-av--2 { background: linear-gradient(135deg,#63E6BE,#12B886); }
.tab-connect .comp-av--3 { background: linear-gradient(135deg,#FFA94D,#F76707); }
.tab-connect .comp-av--4 { background: linear-gradient(135deg,#B197FC,#7048E8); }
.tab-connect .comp-av--o { background: linear-gradient(135deg,#4DABF7,#1B64DA); }/* 동행 상세 */

.tab-connect .comp-detail__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.tab-connect .comp-detail__back {
  width: 36px; height: 36px; border-radius: var(--r-full); border: none; background: var(--gray-100, #F2F4F6);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.tab-connect .comp-detail__back svg { width: 20px; height: 20px; }
.tab-connect .comp-detail__bartitle { font-size: 16px; font-weight: 700; }
.tab-connect .comp-detail__mine {
  text-align: center; font-size: 13px; color: var(--text-weak);
  background: var(--gray-50, #F9FAFB); border-radius: var(--r-md); padding: 14px; font-weight: 600;
}
html[data-theme="dark"] .tab-connect .comp-detail__mine { background: #23262E; }/* 동행 신청관리 (받은/보낸) */

.tab-connect .comp-reqtabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab-connect .comp-reqtab {
  font-size: 14px; font-weight: 700; color: var(--text-weak); padding-bottom: 10px;
  background: none; border: none; cursor: pointer; position: relative;
}
.tab-connect .comp-reqtab.is-active { color: #D9480F; }
.tab-connect .comp-reqtab.is-active::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #F76707;
}
.tab-connect .comp-req { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin-bottom: 11px; }
.tab-connect .comp-req__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tab-connect .comp-req__name { font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.tab-connect .comp-req__where { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #D9480F; font-weight: 600; margin-bottom: 9px; }
.tab-connect .comp-req__where svg { width: 13px; height: 13px; }
.tab-connect .comp-req__msg {
  font-size: 12.5px; color: var(--text); background: var(--gray-50, #F9FAFB);
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 11px; line-height: 1.5;
}
html[data-theme="dark"] .tab-connect .comp-req__msg { background: #23262E; }
.tab-connect .comp-req__btns { display: flex; gap: 8px; }
.tab-connect .comp-req__btn { flex: 1; border: none; border-radius: var(--r-md); padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.tab-connect .comp-req__btn--reject { background: var(--gray-100, #F2F4F6); color: var(--text-weak); }
.tab-connect .comp-req__btn--accept { background: #F76707; color: #fff; }
.tab-connect .comp-req__btn--accept:hover { background: #E8590C; }
.tab-connect .comp-req--sent { cursor: pointer; }
.tab-connect .comp-req__status {
  font-size: 12px; font-weight: 600; text-align: center; padding: 9px;
  background: #FFF9DB; color: #846A00; border-radius: var(--r-sm);
}
html[data-theme="dark"] .tab-connect .comp-req__status { background: #33300F; color: #E6D06A; }/* 아바타 */

.tab-out .comp-av {
  border-radius: var(--r-full); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; width: 40px; height: 40px;
}
.tab-out .comp-av--1 { background: linear-gradient(135deg,#748FFC,#4263EB); }
.tab-out .comp-av--2 { background: linear-gradient(135deg,#63E6BE,#12B886); }
.tab-out .comp-av--3 { background: linear-gradient(135deg,#FFA94D,#F76707); }
.tab-out .comp-av--4 { background: linear-gradient(135deg,#B197FC,#7048E8); }
.tab-out .comp-av--o { background: linear-gradient(135deg,#4DABF7,#1B64DA); }/* 칩 *//* 동행 상세 (동행 탭) */

.tab-out .comp-detail__inner { max-width: 760px; margin: 0 auto; padding: 16px; }
.tab-out .comp-detail__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.tab-out .comp-detail__back {
  width: 36px; height: 36px; border-radius: var(--r-full); border: none; background: var(--gray-100, #F2F4F6);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.tab-out .comp-detail__back svg { width: 20px; height: 20px; }
.tab-out .comp-detail__bartitle { font-size: 16px; font-weight: 700; }
.tab-out .comp-detail__mine {
  text-align: center; font-size: 13px; color: var(--text-weak);
  background: var(--gray-50, #F9FAFB); border-radius: var(--r-md); padding: 14px; font-weight: 600;
}
html[data-theme="dark"] .tab-out .comp-detail__mine { background: #23262E; }/* 받은 신청 카드 (상세 안) */

.tab-out .comp-req { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin-bottom: 11px; }
.tab-out .comp-req__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tab-out .comp-req__name { font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.tab-out .comp-req__msg {
  font-size: 12.5px; color: var(--text); background: var(--gray-50, #F9FAFB);
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 11px; line-height: 1.5;
}
html[data-theme="dark"] .tab-out .comp-req__msg { background: #23262E; }
.tab-out .comp-req__btns { display: flex; gap: 8px; }
.tab-out .comp-req__btn { flex: 1; border: none; border-radius: var(--r-md); padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.tab-out .comp-req__btn--reject { background: var(--gray-100, #F2F4F6); color: var(--text-weak); }
.tab-out .comp-req__btn--accept { background: #F76707; color: #fff; }
.tab-out .comp-req__btn--accept:hover { background: #E8590C; }/* 동행 올리기 모달 부가 *//* 내 신청 (받은/보낸) — 동행 탭 */

.tab-out .comp-reqtabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab-out .comp-reqtab {
  font-size: 14px; font-weight: 700; color: var(--text-weak); padding-bottom: 10px;
  background: none; border: none; cursor: pointer; position: relative;
}
.tab-out .comp-reqtab.is-active { color: #D9480F; }
.tab-out .comp-reqtab.is-active::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #F76707;
}
.tab-out .comp-req__where { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #D9480F; font-weight: 600; }
.tab-out .comp-req__where svg { width: 13px; height: 13px; }
.tab-out .comp-mine__where {
  display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
  color: var(--text-strong); margin: 14px 2px 10px;
}
.tab-out .comp-mine__where svg { width: 14px; height: 14px; color: var(--out, #F76707); }
.tab-out .comp-req--sent { cursor: pointer; }
.tab-out .comp-req__status {
  font-size: 12px; font-weight: 600; text-align: center; padding: 9px;
  background: #FFF9DB; color: #846A00; border-radius: var(--r-sm);
}
html[data-theme="dark"] .tab-out .comp-req__status { background: #33300F; color: #E6D06A; }/* 동행 신청 한마디 모달 *//* 상단 메시지 아이콘 뱃지 */

.topnav__icon-btn--chat { position: relative; }
.topnav__chat-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  background: #FA5252; color: var(--white); border-radius: var(--r-full);
  font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}
.topnav__chat-badge[hidden] { display: none; }/* 채팅 페이지는 전체폭 사용 (좌우 여백 제거) */

.page[data-page="chat"].is-active { display: block; padding: 0; max-width: none; margin: 0; }/* =========================================================
   탭: 외출 (.tab-out — 데스크톱 2단 / 모바일 지도+하단시트 / 찜)
   ========================================================= */

.page[data-page="out"].is-active { display: block; padding: 0; max-width: none; margin: 0; }/* 접혔을 때 지도에 뜨는 펼치기 버튼 */

.tab-out .out-list { flex: 1; overflow-y: auto; padding: 8px; }
.tab-out .out-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px; gap: 8px; height: 100%;
}
.tab-out .out-empty svg { width: 40px; height: 40px; color: var(--gray-300); }
.tab-out .out-empty__title { font-size: 15px; font-weight: 700; color: var(--text); }
.tab-out .out-empty__sub { font-size: 13px; color: var(--text-weak); line-height: 1.5; max-width: 240px; }/* 지도 */

.tab-out .out-map { position: absolute; inset: 0; background: var(--surface-sub); z-index: 1; }
.tab-out .out-map--fallback { display: flex; align-items: center; justify-content: center; }
.tab-out .out-map--fallback::after { content: '지도를 불러올 수 없어요'; font-size: 13px; color: var(--text-weak); }
.tab-out .out-locate {
  position: absolute; bottom: 24px; right: 16px; z-index: 400;
  width: 44px; height: 44px; border-radius: var(--r-full); background: var(--surface);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;
  color: var(--text); border: none;
}
.tab-out .out-locate svg { width: 20px; height: 20px; }
.tab-out .out-locate.is-on { color: var(--blue-500); }/* 모바일 하단 시트 (위로 올라옴) */

@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }/* Leaflet 다크모드 보정 */

html[data-theme="dark"] .leaflet-tile { filter: brightness(0.85) contrast(1.05); }
.tab-out .leaflet-control-zoom { z-index: 350 !important; }/* 신고 시트 (그립바 + 아이콘 라디오 카드) */

.rp-sheet { max-width: 380px; padding: 0; overflow: hidden; }
.rp-sheet__head { padding: 22px 22px 14px; text-align: center; }
.rp-sheet__grip { width: 36px; height: 4px; background: var(--gray-200); border-radius: 99px; margin: 0 auto 16px; }
.rp-sheet__title { font-size: 18px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }
.rp-sheet__desc { font-size: 13px; color: var(--text-weak); line-height: 1.5; }
.rp-list { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.rp-item {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s; min-height: 44px;
}
.rp-item.is-sel { border-color: var(--danger); background: #FFF5F5; }
html[data-theme="dark"] .rp-item.is-sel { background: #2A1515; }
.rp-item__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-sub); color: var(--text-weak); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rp-item.is-sel .rp-item__ic { background: var(--danger); color: #fff; }
.rp-item__ic svg { width: 18px; height: 18px; }
.rp-item__txt { flex: 1; }
.rp-item__label { font-size: 14px; font-weight: 600; color: var(--text); }
.rp-item__sub { font-size: 11px; color: var(--gray-400); margin-top: 1px; }
.rp-item__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gray-300); flex-shrink: 0; position: relative; }
.rp-item.is-sel .rp-item__radio { border-color: var(--danger); }
.rp-item.is-sel .rp-item__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--danger); }
.rp-sheet__foot { padding: 14px 16px 18px; display: flex; gap: 8px; }
.sheet__btn { padding: 14px; border-radius: var(--r-md); font-size: 14px; font-weight: 700; border: none; cursor: pointer; min-height: 48px; }
.sheet__btn--ghost { background: var(--surface-sub); color: var(--text); flex: 0 0 90px; }
.sheet__btn--danger { background: var(--danger); color: #fff; flex: 1; }
.sheet__btn--danger.dis { background: #FFC9C9; cursor: not-allowed; }
html[data-theme="dark"] .sheet__btn--danger.dis { background: #5A2A2A; }/* 차단 모달 (큰 아바타 + 금지 뱃지 + 아이콘 리스트) */

.blk-modal { max-width: 340px; text-align: center; padding: 28px 22px 20px; }
.blk-modal__av {
  width: 60px; height: 60px; border-radius: 50%; margin: 6px auto 18px; position: relative;
  background: linear-gradient(135deg, #FFA8A8, #FA5252); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
}
.blk-modal__ban { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.blk-modal__ban svg { width: 16px; height: 16px; color: var(--danger); }
.blk-modal__title { font-size: 18px; font-weight: 700; color: var(--text-strong); margin-bottom: 16px; }
.blk-modal__list { text-align: left; background: var(--surface-sub); border-radius: var(--r-md); padding: 14px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.blk-modal__li { display: flex; gap: 9px; font-size: 13px; color: var(--text); line-height: 1.4; align-items: flex-start; }
.blk-modal__li svg { width: 15px; height: 15px; color: var(--gray-400); flex-shrink: 0; margin-top: 1px; }
.blk-modal__foot { display: flex; gap: 8px; }
.blk-modal__foot .sheet__btn { flex: 1; }/* 접이식 안전 안내 (기본 접힘) — saferow 스타일 재사용 *//* 지원 모달 사기 경고 (노란 강조 줄) *//* =========================================================
   게시판 글쓰기 페이지 (/connect/write)
   ========================================================= */

.tab-connect .write-page { max-width: 760px; margin: 0 auto; }/* 입력 카드 (경계 명확) *//* =========================================================
   일거리 글쓰기 페이지 (/work/write)
   - 게시판 write-page 패턴 재사용 + 일거리 전용(wwrite__)
   - 톤: 초록(--money)
   ========================================================= *//* 구인/구직 큰 카드 2개 *//* 알약 (직군 / 보수 공용) *//* 근무 조건 칩: 선택 시 상세 화면과 같은 색 계열 *//* 에디터 카드 *//* 보수 금액 입력 *//* 사기 경고 (지원 모달 apply__warn 톤) *//* 현 지도에서 검색 (네이버 방식 — 지도 옮기면 나타남). 하단 중앙 = 지도 옮기며 누르기 편함 */

.tab-out .out-research {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 450; display: none; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--surface); color: var(--blue-500); font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15); cursor: pointer; opacity: 0; transition: opacity .18s, transform .18s;
}
.tab-out .out-research.is-show { display: inline-flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.tab-out .out-research svg { width: 15px; height: 15px; }/* =========================================================
   나 탭 (/me)
   ========================================================= */

.tab-me__inner { max-width: 760px; margin: 0 auto; }/* ── 프로필 수정 (/me/edit) ── */

.tab-me .me-edit { max-width: 640px; }
.tab-me .me-edit__bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  position: sticky; top: 0; background: var(--bg); padding: 6px 0 10px; z-index: 5;
}
.tab-me .me-edit__back {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; border: none;
  background: transparent; color: var(--text-strong);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.tab-me .me-edit__back svg { width: 20px; height: 20px; }
.tab-me .me-edit__bar-title { flex: 1; font-size: 17px; font-weight: 700; color: var(--text-strong); }/* 아바타 히어로 카드 *//* 카드 그룹 *//* 설정 묶음 메뉴 */

.tab-me .me-menu2 { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-bottom: 12px; }
.tab-me .me-menu2__item { width: 100%; background: transparent; border: none; border-top: 1px solid var(--border); padding: 15px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.tab-me .me-menu2__item:first-child { border-top: none; }
.tab-me .me-menu2__item:hover { background: var(--surface-sub); }
.tab-me .me-menu2__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-sub); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tab-me .me-menu2__ic svg { width: 18px; height: 18px; }
.tab-me .me-menu2__label { flex: 1; text-align: left; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.tab-me .me-menu2__item.is-muted .me-menu2__label { color: var(--text-weak); font-weight: 500; }
.tab-me .me-menu2__arrow { color: var(--gray-400); display: flex; }
.tab-me .me-menu2__arrow svg { width: 18px; height: 18px; }/* 하위 페이지 뒤로바 우측 여백 맞춤 */

.tab-me .me-edit__bar-spacer { width: 40px; flex-shrink: 0; }/* 나 탭 카드 *//* ── 기록: 2단 레이아웃 (메인 달력 + 사이드) ── *//* ── 기록: 집콕 달력 ── */

.tab-me .rhythm { padding: 22px; }/* 히어로 (연속 집콕 큰 숫자) *//* 요약 스트립 *//* 달 네비 *//* 요일 헤더 *//* 날짜 그리드 *//* 범례 *//* 선택 날짜 상세 *//* 회고 *//* 설정 메뉴 */

.tab-me .me-menu { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-bottom: 14px; }
.tab-me .me-menu__item {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--border); text-align: left; cursor: pointer; min-height: 44px;
}
.tab-me .me-menu__item:last-child { border-bottom: none; }
.tab-me .me-menu__icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-sub); color: var(--text-weak); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tab-me .me-menu__icon svg { width: 17px; height: 17px; }
.tab-me .me-menu__label { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); }
.tab-me .me-menu__labelwrap { flex: 1; }
.tab-me .me-menu__labelwrap .me-menu__label { flex: none; }
.tab-me .me-menu__sub { font-size: 12px; color: var(--text-weak); margin-top: 2px; line-height: 1.4; }
.tab-me .me-menu__arrow { color: var(--gray-300); display: flex; }
.tab-me .me-menu__arrow svg { width: 17px; height: 17px; }
.tab-me .me-menu__toggle { width: 42px; height: 25px; background: var(--gray-300); border-radius: var(--r-full); position: relative; flex-shrink: 0; transition: background .2s; }
.tab-me .me-menu__toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #fff; border-radius: 50%; transition: left .2s; }
.tab-me .me-menu__toggle.is-on { background: var(--blue-500); }
.tab-me .me-menu__toggle.is-on::after { left: 20px; }/* 탈퇴 (맨 아래 작은 회색 링크) *//* 탈퇴 확인 모달 */

.me-modal { max-width: 340px; text-align: center; }
.me-modal__icon { width: 52px; height: 52px; border-radius: 50%; background: #FFF0F0; color: var(--danger); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.me-modal__icon svg { width: 26px; height: 26px; }
html[data-theme="dark"] .me-modal__icon { background: #3A1A1A; }
.me-modal__title { font-size: 17px; font-weight: 700; color: var(--text-strong); margin-bottom: 8px; }
.me-modal__desc { font-size: 13px; color: var(--text-weak); line-height: 1.5; margin-bottom: 18px; }
.me-modal__desc b { color: var(--danger); }
.me-modal__input {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px;
  font-size: 16px; font-family: inherit; margin-bottom: 16px; background: var(--surface); color: var(--text);
}
.me-modal__input:focus { outline: none; border-color: var(--danger); }
.me-modal__btns { display: flex; gap: 8px; }
.me-modal__btn { flex: 1; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; min-height: 44px; }
.me-modal__btn--cancel { background: var(--surface-sub); color: var(--text); }
.me-modal__btn--danger { background: var(--danger); color: #fff; }
.me-modal__btn--danger.is-disabled { background: #FFC9C9; cursor: not-allowed; }
html[data-theme="dark"] .me-modal__btn--danger.is-disabled { background: #5A2A2A; }/* =========================================================
   Skeleton UI (룰 24)
   ========================================================= */

.skeleton {
  background: linear-gradient(90deg,
    var(--surface-sub) 25%, var(--border-light) 50%, var(--surface-sub) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}/* =========================================================
   Toast (룰 25, z-toast)
   ========================================================= */

.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  width: min(92vw, 420px);
}
.toast {
  background: var(--gray-900);
  color: var(--white);
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  animation: toast-in 0.2s ease;
}
html[data-theme="dark"] .toast { background: var(--surface); border: 1px solid var(--border); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast--success svg { color: var(--success); }
.toast--error svg   { color: var(--danger); }
.toast--info svg    { color: var(--blue-500); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}/* 태블릿 이하: 홈 사이드 아래로 (1단) */

@media (max-width: 900px) {
  .page-home.is-active { max-width: 760px; }}/* 모바일: 상단 메뉴 숨기고 하단 탭바 노출 */

@media (max-width: 720px) {
  .topnav { padding: 0 var(--sp-4); gap: var(--sp-4); }
  .topnav__menu { display: none; }/* 하단 탭바로 대체 */ 

  .tabbar { display: block; }/* 하단 탭바 높이만큼 본문 여백 확보 */

  
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); }

  .page { padding: var(--sp-4); }}/* =========================================================
   알림 페이지 (/notifications)
   ========================================================= */

.tab-noti__inner { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; }
.tab-noti .noti-page__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tab-noti .noti-page__back { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--surface-sub); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); }
.tab-noti .noti-page__back svg { width: 20px; height: 20px; }
.tab-noti .noti-page__title { flex: 1; font-size: 20px; font-weight: 700; color: var(--text-strong); }
.tab-noti .noti-page__readall { font-size: 12.5px; font-weight: 600; color: var(--blue-500); background: none; border: none; cursor: pointer; }
.tab-noti .noti-page__sub { font-size: 13px; color: var(--text-weak); margin: 0 0 18px 2px; }

.tab-noti .noti-page__filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.tab-noti .noti-page__filter { padding: 7px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text-weak); cursor: pointer; }
.tab-noti .noti-page__filter.is-active { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }/* 날짜 그룹 */

.tab-noti .noti-group-label { font-size: 12px; font-weight: 700; color: var(--text-weak); margin: 0 4px 10px; }
.tab-noti .noti-group-label:not(:first-of-type) { margin-top: 24px; }/* 알림 카드 리스트 */

.tab-noti .noti-list { display: flex; flex-direction: column; gap: 8px; }
.tab-noti .noti-row { display: flex; gap: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px; position: relative; align-items: flex-start; cursor: pointer; }
.tab-noti .noti-row.is-unread { background: var(--blue-50); border-color: #D0E2FF; }
html[data-theme="dark"] .tab-noti .noti-row.is-unread { background: #141E2E; border-color: #1E3050; }
.tab-noti .noti-row.is-unread::after { content: ''; position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500); }
.tab-noti .noti-row__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tab-noti .noti-row__icon svg { width: 19px; height: 19px; }
.tab-noti .noti-row__icon--work    { background: var(--money-50, #E6F7F1); color: var(--money); }
.tab-noti .noti-row__icon--out     { background: #FFF4EC; color: #D9480F; }
.tab-noti .noti-row__icon--comment { background: #FFF0F6; color: #E64980; }
.tab-noti .noti-row__icon--system  { background: #FFF9DB; color: #F59F00; }
html[data-theme="dark"] .tab-noti .noti-row__icon--work { background: #12261E; }
html[data-theme="dark"] .tab-noti .noti-row__icon--out { background: #241C3D; }
html[data-theme="dark"] .tab-noti .noti-row__icon--comment { background: #2E1622; }
html[data-theme="dark"] .tab-noti .noti-row__icon--system { background: #2B2610; }
.tab-noti .noti-row__body { flex: 1; min-width: 0; padding-right: 14px; }
.tab-noti .noti-row__msg { font-size: 13.5px; line-height: 1.5; color: var(--text-strong); }
.tab-noti .noti-row__msg b { font-weight: 700; }
.tab-noti .noti-row__time { font-size: 11.5px; color: var(--text-weak); margin-top: 4px; }
.tab-noti .noti-row__actions { display: flex; gap: 8px; margin-top: 11px; }
.tab-noti .noti-row__btn { padding: 8px 16px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: none; }
.tab-noti .noti-row__btn--primary { background: var(--money); color: var(--white); }
.tab-noti .noti-row__btn--out { background: #F76707; color: var(--white); }
.tab-noti .noti-row__btn--ghost { background: var(--surface-sub); color: var(--text); }/* 빈 상태 */

.tab-noti .noti-empty { text-align: center; padding: 56px 24px; }
.tab-noti .noti-empty__ico { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-sub); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.tab-noti .noti-empty__ico svg { width: 28px; height: 28px; color: var(--text-weak); }
.tab-noti .noti-empty__title { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }
.tab-noti .noti-empty__desc { font-size: 13px; color: var(--text-weak); line-height: 1.55; max-width: 300px; margin: 0 auto; }/* =========================================================
   검색 페이지 (/search)
   ========================================================= */

.tab-search__inner { max-width: 640px; margin: 0 auto; padding: 8px 0 40px; }/* ===== 일거리 상세 — 점3개 메뉴 + 같은 공고 목록 (게시판과 동일 패턴) ===== */
.tab-work .post-kebab-wrap { position: relative; flex-shrink: 0; }
.tab-work .post-kebab {
  background: none; border: none; padding: 8px; margin: -8px; color: var(--text-weak);
  cursor: pointer; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center;
}
.tab-work .post-kebab:hover { background: var(--surface); color: var(--text); }
.tab-work .post-kebab svg { width: 18px; height: 18px; }
.tab-work .post-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12); padding: 5px; min-width: 128px;
}
.tab-work .post-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px;
  background: none; border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
  color: var(--text); cursor: pointer; text-align: left;
}
.tab-work .post-menu__item:hover { background: var(--surface-sub); }
.tab-work .post-menu__item svg { width: 15px; height: 15px; color: var(--text-weak); }
.tab-work .post-menu__item--danger { color: #E03131; }
.tab-work .post-menu__item--danger svg { color: #E03131; }

.tab-work .sibling { margin-top: 32px; padding-top: 20px; border-top: 8px solid var(--surface-sub); }
.tab-work .sibling__head { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 12px; }
.tab-work .sibling__cat { color: var(--money, #0CA678); }
.tab-work .sibling__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 4px; background: none; border: none; border-bottom: 1px solid var(--border-light);
  cursor: pointer; text-align: left; width: 100%;
}
.tab-work .sibling__item:hover .sibling__title { color: var(--money, #0CA678); }
.tab-work .sibling__item.is-current { background: var(--surface-sub); border-radius: var(--r-sm); }
.tab-work .sibling__item.is-current .sibling__title { font-weight: 700; }
.tab-work .sibling__title {
  font-size: 13.5px; color: var(--text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab-work .sibling__meta { display: flex; gap: 8px; flex-shrink: 0; font-size: 11.5px; color: var(--gray-400); }
.tab-work .sibling__empty { font-size: 13px; color: var(--text-weak); text-align: center; padding: 24px 0; }
.tab-work .sibling__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tab-work .sibling__btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--r-sm); font-size: 13px; font-weight: 600; cursor: pointer;
}
.tab-work .sibling__btn svg { width: 14px; height: 14px; }
.tab-work .sibling__btn:hover { background: var(--surface-sub); }
.tab-work .sibling__btn--write { background: var(--money, #0CA678); color: #fff; border-color: var(--money, #0CA678); }
.tab-work .sibling__btn--write svg { color: #fff; }/* =========================================================
   쪽지 L1 — 2단 메일함 (PC 왼쪽 목록·오른쪽 편지 / 모바일 목록→편지)
   ========================================================= */

.page.tab-note.is-active { max-width: 1200px; padding: 24px 40px; }
.nl { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100dvh - var(--nav-h) - 48px); min-height: 520px; }
.nl-list { border-right: 1px solid var(--border-light); padding: 4px 16px 16px 0; overflow-y: auto; min-height: 0; }
.nl-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); margin: 0 0 14px; }
.nl-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.nl-filter { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.nl-filter.is-on { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }
.nl-rows { display: flex; flex-direction: column; gap: 2px; }
.nl-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 10px; border-radius: 12px; border: none; background: none; text-align: left; cursor: pointer; font-family: inherit; color: inherit; }
.nl-row:hover { background: var(--surface-sub); }
.nl-row.is-on { background: #F1F8F5; }
.nl-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nl-row__top { display: flex; align-items: center; gap: 6px; }
.nl-row__top b { font-size: 15px; color: var(--text-strong); }
.nl-row__top em { font-style: normal; margin-left: auto; font-size: 12px; color: var(--text-weak); flex-shrink: 0; }
.nl-row__ctx { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-row__last { font-size: 13px; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-row__last i { font-style: normal; color: var(--money); font-weight: 700; }
.nl-row.is-unread .nl-row__last { color: var(--text-strong); font-weight: 500; }
.nl-dot { align-self: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--out); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; }
.nl-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.nl-av--work { background: #20C997; }
.nl-av--out { background: #FF922B; }
.nl-av.is-sm { width: 36px; height: 36px; font-size: 12px; }
.nl-kind { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.nl-kind--work { background: #E6F8F2; color: #087F5B; }
.nl-kind--out { background: #FFF1E8; color: #E8590C; }
.nl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 48px 12px; color: var(--text-weak); font-size: 13px; }
.nl-empty svg { width: 28px; height: 28px; margin-bottom: 4px; }
.nl-empty b { font-size: 15px; color: var(--text-strong); }
.nl-pane { min-width: 0; min-height: 0; display: flex; justify-content: center; }
.nl-none { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-weak); font-size: 14px; }
.nl-none svg { width: 32px; height: 32px; }
.nl-th { flex: 1; max-width: 760px; display: flex; flex-direction: column; min-height: 0; padding: 0 0 0 36px; }
.nl-th__h { display: flex; align-items: center; gap: 10px; padding: 4px 0 0; }
.nl-th__h > b { font-size: 17px; color: var(--text-strong); }
.nl-th__back { display: none; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--surface-sub); align-items: center; justify-content: center; cursor: pointer; color: var(--text-strong); flex-shrink: 0; }
.nl-th__back svg { width: 20px; height: 20px; }
.nl-th__more { margin-left: auto; width: 34px; height: 34px; border-radius: 8px; border: none; background: none; color: var(--text-weak); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nl-th__more svg { width: 18px; height: 18px; }
.nl-ctx { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-sub); margin: 12px 0 4px; cursor: pointer; }
.nl-ctx__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nl-ctx__ic svg { width: 18px; height: 18px; }
.nl-ctx--work .nl-ctx__ic { color: var(--money); }
.nl-ctx--out .nl-ctx__ic { color: var(--out); }
.nl-ctx__b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nl-ctx__b b { font-size: 14.5px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-ctx__b small { font-size: 12.5px; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-ctx__act { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-strong); flex-shrink: 0; cursor: pointer; font-family: inherit; }
.nl-ctx__act.is-green { background: var(--money); border-color: var(--money); color: #fff; }
.nl-th__body { flex: 1; overflow-y: auto; min-height: 0; padding: 8px 0 16px; }
.nl-day { font-size: 12px; color: var(--text-weak); text-align: center; margin: 14px 0 6px; }
.nl-lt { padding: 12px 0 12px 14px; border-left: 3px solid var(--border); margin-bottom: 6px; }
.nl-lt.is-me { border-left-color: #63E6BE; }
.nl-lt__h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-weak); margin-bottom: 3px; }
.nl-lt__h b { color: var(--text-strong); font-size: 14px; }
.nl-lt__h em { font-style: normal; margin-left: auto; font-size: 12px; color: var(--money); font-weight: 600; }
.nl-lt p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--text-strong); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.nl-cmp { display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--border); border-radius: 16px; padding: 10px 10px 10px 14px; background: var(--surface); }
.nl-cmp:focus-within { border-color: var(--text-weak); }
.nl-cmp__in { flex: 1; border: none; outline: none; background: none; resize: none; font-family: inherit; font-size: 14.5px; line-height: 1.55; color: var(--text-strong); padding: 6px 0; min-height: 34px; max-height: 140px; }
.nl-cmp__send { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px; border-radius: 10px; border: none; background: var(--money); color: #fff; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; flex-shrink: 0; }
.nl-cmp__send svg { width: 15px; height: 15px; }
.nl-cmp__send:disabled { opacity: .4; cursor: default; }
html[data-theme="dark"] .nl-row.is-on { background: #16302A; }
html[data-theme="dark"] .nl-kind--work { background: #12352B; color: #63E6BE; }
html[data-theme="dark"] .nl-kind--out { background: #3A2414; color: #FFA94D; }
@media (max-width: 720px) {
  .page.tab-note.is-active { padding: 12px 16px 0; }
  .nl { display: block; height: auto; min-height: 0; }
  .nl-list { border-right: none; padding: 0; overflow: visible; }
  .nl-title { font-size: 22px; }
  .nl-row { padding: 12px 4px; }
  .nl.has-sel .nl-list { display: none; }
  .nl:not(.has-sel) .nl-pane { display: none; }
  .nl-th { padding: 0; }
  .nl-th__back { display: flex; }
  .nl-th__body { overflow: visible; padding-bottom: 12px; }
  .nl-cmp { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); box-shadow: 0 -8px 16px var(--surface); }
  .nl-cmp__send { padding: 0 12px; }}/* =========================================================
   로그인 (더미) — 헤더 버튼 · 로그인 모달 · 로그인 필요 안내 · 나 탭 비로그인
   ========================================================= */

.topnav [hidden] { display: none !important; }
.topnav__login {
  height: 36px; padding: 0 16px; margin-left: 4px; border-radius: 10px;
  background: var(--blue-500); color: #fff; font-size: 14px; font-weight: 700;
}
.topnav__login:hover { background: var(--blue-600); }
@media (max-width: 720px) { .topnav__login { height: 32px; padding: 0 12px; font-size: 13px; }}

.auth-modal { max-width: 400px; }
.auth-gate { position: relative; padding: 30px 26px max(22px, env(safe-area-inset-bottom)); text-align: center; overflow-y: auto; }
.auth-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--gray-400); }
.auth-x svg { width: 20px; height: 20px; }
.auth-x:hover { background: var(--surface-sub); color: var(--text); }
.auth-sb { position: relative; height: 50px; border-radius: 12px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.auth-sb__mk { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.auth-sb__mk svg { width: 13px; height: 13px; }
.auth-sb--kakao { background: #FEE500; color: rgba(0,0,0,.85); }
.auth-sb--kakao .auth-sb__mk { background: rgba(0,0,0,.85); color: #FEE500; border-radius: 50%; }
.auth-sb--naver { background: #03C75A; color: #fff; }
.auth-sb--naver .auth-sb__mk { background: #fff; color: #03C75A; }
.auth-sb--google { background: #fff; color: #191F28; border: 1px solid var(--gray-300); }
.auth-sb--google .auth-sb__mk { background: var(--gray-100); color: var(--gray-600); border-radius: 50%; }
.auth-sb:hover { filter: brightness(.97); }
.auth-sb__last { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.08); }
.auth-sb--naver .auth-sb__last { background: rgba(255,255,255,.22); }

.auth-gate__ic { width: 52px; height: 52px; border-radius: 50%; margin: 4px auto 14px; background: #FFF4EC; color: var(--orange); display: flex; align-items: center; justify-content: center; }
.auth-gate__ic svg { width: 25px; height: 25px; }
.auth-gate__t { font-size: 18px; font-weight: 700; color: var(--text-strong); }
.auth-gate__s { font-size: 13.5px; color: var(--text-weak); margin: 6px 0 20px; }

.auth-btn { width: 100%; height: 48px; border-radius: 12px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.auth-btn--primary { background: var(--blue-500); color: #fff; }
.auth-btn--primary:hover { background: var(--blue-600); }
.auth-btn--ghost { height: 42px; margin-top: 4px; color: var(--text-weak); font-size: 14px; font-weight: 600; }

.tab-me .me-guest { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 26px 22px; text-align: center; margin-bottom: 12px; }
.tab-me .me-guest__ic { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; background: var(--surface-sub); color: var(--gray-400); display: flex; align-items: center; justify-content: center; }
.tab-me .me-guest__ic svg { width: 30px; height: 30px; }
.tab-me .me-guest__t { font-size: 18px; font-weight: 700; color: var(--text-strong); }
.tab-me .me-guest__s { font-size: 13px; color: var(--text-weak); margin: 6px 0 18px; }

html[data-theme="dark"] .auth-gate__ic { background: #3A2618; }
html[data-theme="dark"] .auth-sb--google { background: var(--surface); color: var(--text-strong); border-color: var(--border); }/* =========================================================
   글 본문 링크 · 유튜브 카드 (썸네일 → 누르면 홈러 안에서 재생)
   ========================================================= */

.body-link { color: var(--blue-500); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.yt-card { display: block; white-space: normal; margin: 10px 0 14px; max-width: 100%; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.yt-card__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.yt-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-card__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.25)); cursor: pointer; }
.yt-card__play::before { content: ''; width: 64px; height: 44px; border-radius: 12px; background: rgba(0,0,0,.72); transition: background .15s; }
.yt-card__play:hover::before { background: #FF0033; }
.yt-card__tri { position: absolute; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.yt-card__foot { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; line-height: 1.4; }
.yt-card__src { flex-shrink: 0; font-weight: 700; color: var(--text-strong); }
.yt-card__link { min-width: 0; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.yt-card__link:hover { color: var(--blue-500); text-decoration: underline; }/* =========================================================
   도움말 · 긴급 자원 (/me/help) + 위기 안내 시트
   ========================================================= */

.tab-me .help { display: flex; flex-direction: column; gap: 14px; }
.help-sos { background: linear-gradient(165deg, #2B5CAD 0%, #1A3A73 70%, #122A55 100%); border-radius: 20px; padding: 22px 20px 18px; color: #fff; }
.help-sos__t { font-size: 18px; font-weight: 700; }
.help-sos__s { font-size: 13.5px; opacity: .8; margin-top: 4px; line-height: 1.6; }
.help-sos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
@media (max-width: 720px) { .help-sos__grid { grid-template-columns: 1fr; }}
.help-sos__i { background: rgba(255,255,255,.1); border-radius: 14px; padding: 13px 14px; display: flex; gap: 12px; align-items: center; text-align: left; color: #fff; }
.help-sos__i:hover { background: rgba(255,255,255,.16); }
.help-sos__i .sos-ic { background: rgba(255,255,255,.14); }
.help-sos__i.is-hi { background: #fff; color: #1A3A73; }
.help-sos__i.is-hi .sos-ic { background: #EEF4FF; color: #1B64DA; }/* 흰 카드 위라 다크에서도 유지 */ 
.help-sos__i .sos-sb { opacity: .75; }
.help-sos__foot { font-size: 12px; opacity: .75; margin-top: 12px; line-height: 1.6; }
.sos-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sos-ic svg { width: 19px; height: 19px; }
.sos-lb { font-size: 14.5px; font-weight: 700; }
.sos-sb { font-size: 12px; margin-top: 1px; }

.help-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.help-card__t { font-size: 15px; font-weight: 700; color: var(--text-strong); padding: 16px 18px 6px; display: flex; align-items: center; gap: 6px; }
.help-card__t svg { width: 18px; height: 18px; color: var(--text-weak); }
.help-qa { border-top: 1px solid var(--border-light); }
.help-qa:first-of-type { border-top: none; }
.help-qa__q { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 18px; text-align: left; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.help-qa__q svg { width: 17px; height: 17px; color: var(--gray-400); margin-left: auto; flex-shrink: 0; transition: transform .15s; }
.help-qa.is-open .help-qa__q svg { transform: rotate(180deg); }
.help-qa__a { display: none; padding: 0 18px 16px; font-size: 13.5px; color: var(--text); line-height: 1.7; }
.help-qa.is-open .help-qa__a { display: block; }
.help-rules { padding: 4px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.help-rule { display: flex; gap: 12px; align-items: flex-start; }
.help-rule__ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.help-rule__ic svg { width: 16px; height: 16px; }
.help-rule__ic--purple { background: #F3F0FF; color: #7048E8; }
.help-rule__ic--green  { background: #E6FCF5; color: var(--money); }
.help-rule__ic--orange { background: #FFF4EC; color: var(--orange); }
.help-rule__ic--red    { background: #FFF5F5; color: #E03131; }
.help-rule__ic--blue   { background: var(--blue-50); color: var(--blue-500); }
.help-rule__t { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.help-rule__s { font-size: 12.5px; color: var(--text-weak); margin-top: 1px; line-height: 1.55; }
.help-contact { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 18px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.help-contact svg { width: 18px; height: 18px; color: var(--text-weak); }
.help-contact__arr { margin-left: auto; display: flex; }
.help-contact:hover { background: var(--surface-sub); }

.care { padding: 26px 22px max(18px, env(safe-area-inset-bottom)); }
.care__moon { font-size: 30px; text-align: center; }
.care__t { font-size: 18px; font-weight: 700; color: var(--text-strong); text-align: center; margin-top: 8px; }
.care__s { font-size: 13.5px; color: var(--text-weak); text-align: center; margin: 6px 0 18px; line-height: 1.6; }
.care__list { display: flex; flex-direction: column; gap: 8px; }
.care__i { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; text-align: left; color: var(--text-strong); }
.care__i:hover { background: var(--surface-sub); }
.care__i .sos-ic { background: var(--blue-50); color: var(--blue-500); }
.care__i .sos-sb { color: var(--text-weak); }
.care__ok { width: 100%; height: 44px; margin-top: 10px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--text-weak); }
.care__note { font-size: 11.5px; color: var(--gray-400); text-align: center; margin-top: 2px; }

html[data-theme="dark"] .help-rule__ic--purple, html[data-theme="dark"] .care__i .sos-ic { background: #2A2440; }
html[data-theme="dark"] .help-rule__ic--green { background: #12302A; }
html[data-theme="dark"] .help-rule__ic--orange { background: #3A2618; }
html[data-theme="dark"] .help-rule__ic--red { background: #3A1A1A; }
html[data-theme="dark"] .help-rule__ic--blue { background: #17263F; }/* =========================================================
   차단한 사용자 · 약관/방침 문서
   ========================================================= */

.doc { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px 22px 26px; }
.doc__fill { background: #FFE8A3; color: #5C3D00; border-radius: 4px; padding: 0 3px; }
.auth-login__link { color: var(--gray-500); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
html[data-theme="dark"] .doc__fill { background: #5C4A12; color: #FFE8A3; }/* =========================================================
   동행 이후 흐름 — 다녀오셨어요? · 안전 후기 · 추억 카드 · 못 갔어요
   ========================================================= */

.after-ask { background: linear-gradient(150deg, #FFF4EC, #FFE8D6); border: 1px solid #FFD8BF; border-radius: 20px; padding: 18px; margin-bottom: 14px; }
.after-ask__top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.after-ask__ic { width: 44px; height: 44px; border-radius: 13px; background: #fff; color: #F76707; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.after-ask__ic svg { width: 22px; height: 22px; }
.after-ask__t { font-size: 16px; font-weight: 700; color: var(--gray-900, #191F28); }
.after-ask__s { font-size: 13px; color: var(--gray-700, #4E5968); margin-top: 1px; }
html[data-theme="dark"] .after-ask { background: #2E2118; border-color: #4A3120; }
html[data-theme="dark"] .after-ask__ic { background: #3A2618; }
html[data-theme="dark"] .after-ask__t { color: var(--text-strong); }
html[data-theme="dark"] .after-ask__s { color: var(--text); }

.after__row { display: flex; gap: 8px; }
.after-btn { flex: 1; height: 46px; border-radius: 12px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.after-btn svg { width: 18px; height: 18px; }
.after-btn--out { background: #F76707; color: #fff; }
.after-btn--out:hover { background: #E8590C; }
.after-btn--ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.after-btn--primary { width: 100%; flex: none; background: var(--blue-500); color: #fff; }
.after-btn--primary[disabled] { opacity: .4; cursor: default; }

.after { position: relative; padding: 24px 22px max(20px, env(safe-area-inset-bottom)); }
.after__step { font-size: 12px; font-weight: 700; color: #F76707; text-align: center; }
.after__t { font-size: 19px; font-weight: 700; color: var(--text-strong); text-align: center; margin-top: 4px; }
.after__s { font-size: 13.5px; color: var(--text-weak); text-align: center; margin: 4px 0 18px; }
.after-opt { width: 100%; display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 14px; text-align: left; margin-bottom: 8px; }
.after-opt:hover { background: var(--surface-sub); }
.after-opt.is-sel { border-color: var(--blue-500); background: var(--blue-50); }
.after-opt__e { font-size: 24px; width: 32px; text-align: center; }
.after-opt__t { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.after-opt__s { font-size: 12px; color: var(--text-weak); }
.after-opt--warn .after-opt__t { color: #E03131; }
.after__lock { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12px; color: var(--gray-500); margin: 6px 0 14px; }
.after__lock svg { width: 14px; height: 14px; }
.after__card { display: flex; justify-content: center; }
.after__card .sharecard-canvas { box-shadow: 0 14px 40px rgba(120,50,80,.3); }
.after-memo { width: 100%; margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--surface-sub); color: var(--text-strong); }
.after__hint { font-size: 11.5px; color: var(--gray-400); margin: 6px 2px 14px; }
.after__cal { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12px; color: var(--text-weak); margin-top: 12px; }
.after__cal svg { width: 14px; height: 14px; color: var(--money); }
.after-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.after-chip { border: 1.5px solid var(--border); border-radius: 999px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.after-chip.is-sel { border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-600); }
.after__soft { font-size: 13px; color: var(--text); text-align: center; background: var(--surface-sub); border-radius: 12px; padding: 12px; margin-bottom: 14px; line-height: 1.6; }

.after-past { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.after-past__row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border-light); text-align: left; }
.after-past__row:first-child { border-top: none; }
.after-past__row:hover { background: var(--surface-sub); }
.after-past__ic { width: 36px; height: 36px; border-radius: 10px; background: #FFF4EC; color: #D9480F; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.after-past__ic svg { width: 17px; height: 17px; }
.after-past__main { flex: 1; min-width: 0; }
.after-past__t { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.after-past__s { font-size: 12px; color: var(--text-weak); }
.after-past__tag { flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.after-past__tag--done { background: #E6FCF5; color: var(--money); }
.after-past__tag--wait { background: #FFF4EC; color: #D9480F; }
.after-past__tag--miss { background: var(--surface-sub); color: var(--text-weak); }
html[data-theme="dark"] .after-past__ic, html[data-theme="dark"] .after-past__tag--wait { background: #3A2618; }
html[data-theme="dark"] .after-past__tag--done { background: #12302A; }/* =========================================================
   기록 달력 월 이동 · 알림 설정
   ========================================================= *//* 다크: 기록 달력 나들이 칸 *//* 모바일 헤더: 다크 모드 전환은 설정에 있으니 헤더에선 숨겨 아이콘 수 줄이기 */

@media (max-width: 720px) { #btn-theme { display: none; }}/* =========================================================
   목록 페이지 나누기 (게시판·일거리·동행)
   ========================================================= */

.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 20px 0 8px; flex-wrap: wrap; }
.pager__btn { min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.pager__btn:hover:not([disabled]):not(.is-cur) { background: var(--surface-sub); }
.pager__btn.is-cur { background: var(--gray-900, #191F28); color: #fff; cursor: default; }
html[data-theme="dark"] .pager__btn.is-cur { background: var(--text-strong); color: var(--bg); }
.pager__btn--arrow svg { width: 18px; height: 18px; }
.pager__btn[disabled] { opacity: .3; cursor: default; }
.out-list .pager { margin: 12px 0 16px; }
.out-list .pager__btn { min-width: 32px; height: 32px; font-size: 13px; }/* =========================================================
   목록 검색 (게시판·일거리) · 상세 하단 목록 페이지
   ========================================================= *//* 링크로 바뀐 버튼들 (이미지 저장·긴급 연락처) 모양 유지 */

a.sharemodal__btn, a.after-btn, a.help-sos__i, a.care__i { text-decoration: none; }
a.after-btn, a.sharemodal__btn { display: inline-flex; align-items: center; justify-content: center; }/* 개수 줄 + 검색 (돋보기 → 같은 줄에서 펼침) */

.csearch { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin: 0 2px 10px; }
.csearch__txt { font-size: 13px; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.csearch__txt b { color: var(--text-strong); font-weight: 700; }
.csearch__txt .csearch__q { color: var(--blue-500); }
.csearch__open { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.csearch__open:hover { background: var(--surface-sub); }
.csearch__open svg { width: 17px; height: 17px; }
.csearch__box { display: flex; align-items: center; gap: 6px; width: 340px; max-width: 70%; height: 40px; padding: 0 6px 0 12px; border: 1px solid var(--blue-500); border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 3px rgba(49,130,246,.12); }
.csearch__box > svg { width: 17px; height: 17px; color: var(--gray-400); flex-shrink: 0; }
.csearch__sel { flex-shrink: 0; font-size: 13px; color: var(--text-weak); background: transparent; border: 0; border-right: 1px solid var(--border); padding-right: 4px; height: 22px; font-family: inherit; }
.csearch__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 14px; color: var(--text-strong); font-family: inherit; }
.csearch__input::-webkit-search-cancel-button { display: none; }
.csearch__close { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--gray-400); flex-shrink: 0; }
.csearch__close:hover { background: var(--surface-sub); color: var(--text); }
.csearch__close svg { width: 16px; height: 16px; }
@media (max-width: 720px) {/* 모바일: 펼치면 검색창이 줄 전체를 씀 (검색 결과 문구는 검색창 아래로) */
  
  .csearch.is-open { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .csearch.is-open .csearch__box { width: 100%; max-width: none; }
  .csearch__sel { display: none; }}/* 목록 상단 A안: 탭 줄(+내 활동/내 지원) · 개수 줄(개수 | 정렬 | 검색) */

.csearch__sp { flex: 1; }
.csearch__open { border: 0; background: transparent; border-radius: 10px; }
.csearch__open:hover { background: var(--surface-sub); }/* 일거리 개수 줄 왼쪽: 전체 N | 관심 직군 N *//* =========================================================
   유튜브 영상: 게시판 카드 제목·채널 / 작은 영상 카드 / 재생 창
   ========================================================= */

.yt-card__meta { padding: 10px 12px 9px; }
.yt-card__title { font-size: 14px; font-weight: 700; color: var(--text-strong); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-card__title:empty { display: none; }
.yt-card__meta .yt-card__foot { padding: 4px 0 0; }

.vmodal { max-width: 760px; width: calc(100% - 32px); padding: 0; overflow: hidden; background: #000; position: relative; }
.vmodal__frame { aspect-ratio: 16 / 9; }
.vmodal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal__t { background: var(--surface); color: var(--text-strong); font-size: 14px; font-weight: 700; padding: 12px 16px; }
.vmodal__x { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(0,0,0,.5); color: #fff; }
.vmodal__x:hover { background: rgba(0,0,0,.7); color: #fff; }/* 영상 카드: 가로형으로 작게 (신청·지원 버튼이 너무 아래로 밀리지 않게) *//* =========================================================
   홈 — Seenby 스타일 (흰 바탕 · 큰 제목 · 선 구분 · 큰 카드)
   ========================================================= */

body[data-tab="home"] { background: var(--surface); }
.page-home.is-active { max-width: 1120px; }
.page-home__main { display: block; }
.hm-ad__tag { font-size: 10.5px; font-weight: 700; color: var(--text-weak); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }/* =========================================================
   게시판 — Seenby 스타일 A안
   ========================================================= */

body[data-tab="board"]:has(.board-sb) { background: var(--surface); }
.page[data-page="board"].board-sb.tab-connect--2col.is-active { grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; max-width: 1120px; }
.sb-mylink { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.sb-mylink svg { width: 15px; height: 15px; }
.sb-mylink:hover { color: var(--text-strong); }
.sb-write { height: 42px; padding: 0 18px; border-radius: 12px; background: var(--text-strong); color: var(--surface); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.sb-write svg { width: 17px; height: 17px; }
.sb-write:hover { opacity: .88; }
.sb-tool { display: flex; align-items: center; gap: 8px; margin: 24px 0 6px; }
.sb-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.sb-chips::-webkit-scrollbar { display: none; }
.sb-chip { flex-shrink: 0; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); background: var(--surface); }
.sb-chip:hover { border-color: var(--gray-400); }
.sb-chip.is-active { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }
.sb-tool__r { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 13px; color: var(--text-weak); }
.sb-tool__sp { display: none; }
.sb-count b { color: var(--text-strong); }
.sb-sel { height: 36px; border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; font-size: 13px; color: var(--text-strong); background: var(--surface); font-family: inherit; }
.sb-sbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text); background: var(--surface); }
.sb-sbtn svg { width: 17px; height: 17px; }
.sb-sbtn.is-on { border-color: var(--text-strong); color: var(--text-strong); }
.board-sb .csearch { margin-top: 10px; }
.sb-list { border-top: 1px solid var(--border-light); margin-top: 6px; }
.sb-post { width: 100%; display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border-light); text-align: left; }
.sb-post__main { flex: 1; min-width: 0; }
.sb-post__t { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text-strong); margin-top: 6px; }
.sb-post:hover .sb-post__t { text-decoration: underline; text-underline-offset: 3px; }
.sb-post__b { font-size: 14px; color: var(--text); margin-top: 4px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-post__m { font-size: 12.5px; color: var(--text-weak); margin-top: 8px; display: flex; gap: 10px; }
.sb-post__th { position: relative; width: 84px; flex-shrink: 0; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #1F2937; align-self: center; }
.sb-post__th img { width: 100%; height: 100%; object-fit: cover; }
.sb-post__play { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -5px; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent rgba(255,255,255,.9); }
.sb-ad { width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--border-light); font-size: 13.5px; color: var(--text-strong); text-align: left; }
.sb-ad__s { color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-side h3 { font-size: 16px; font-weight: 700; color: var(--text-strong); margin: 8px 0 6px; }
.sb-hot { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; text-align: left; color: var(--text-strong); }
.sb-hot b { color: var(--blue-500); width: 14px; flex-shrink: 0; }
.sb-hot__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-hot:hover .sb-hot__t { text-decoration: underline; text-underline-offset: 3px; }
.sb-hot small { color: var(--text-weak); font-size: 12px; }
.sb-note { margin-top: 28px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; font-size: 13px; color: var(--text); }
.sb-note b { display: block; color: var(--text-strong); font-size: 14px; margin-bottom: 2px; }
@media (max-width: 900px) {
  .page[data-page="board"].board-sb.tab-connect--2col.is-active { display: block; }
  .board-sb .sb-side { display: none; }}
@media (max-width: 720px) {
  .sb-write { height: 38px; padding: 0 14px; }
  .sb-tool { flex-direction: column; align-items: stretch; margin-top: 18px; }
  .sb-chips { margin-right: -16px; padding-right: 16px; }
  .sb-chip { height: 36px; padding: 0 14px; }
  .sb-tool__r { margin: 4px 0 0; }
  .sb-tool__sp { display: block; flex: 1; }
  .sb-post { padding: 16px 0; }
  .sb-post__t { font-size: 16px; }
  .sb-post__th { width: 64px; }
  .sb-ad__s { display: none; }}/* =========================================================
   일거리 — Seenby 스타일 A안 (게시판과 같은 틀)
   ========================================================= */

body[data-tab="work"]:has(.work-sb) { background: var(--surface); }
.page[data-page="work"].work-sb.tab-work--2col.is-active { grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; max-width: 1120px; }
.sb-mylink__n { font-size: 11px; font-weight: 700; color: #fff; background: var(--money); border-radius: 999px; padding: 0 6px; line-height: 17px; margin: 0 2px 0 4px; }
.work-sb .sb-tool__r .sb-sel { max-width: 120px; }
.sb-job { width: 100%; display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border-light); text-align: left; }
.sb-job__main { flex: 1; min-width: 0; }
.sb-jtag { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 1px 7px; background: #E6FCF5; color: #099268; }
.sb-jtag--seek { background: #EDF2FF; color: #3B5BDB; }
.sb-jtag--collab { background: #F3F0FF; color: #6741D9; }
html[data-theme="dark"] .sb-jtag { background: #12302A; color: #63E6BE; }
html[data-theme="dark"] .sb-jtag--seek { background: #1A2A44; color: #91A7FF; }
html[data-theme="dark"] .sb-jtag--collab { background: #2A2440; color: #B197FC; }
.sb-job__t { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text-strong); margin-top: 6px; }
.sb-job:hover .sb-job__t { text-decoration: underline; text-underline-offset: 3px; }
.sb-job__b { font-size: 14px; color: var(--text); margin-top: 4px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-job__p { flex-shrink: 0; text-align: right; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--text-strong); padding-top: 26px; }
.sb-job__p small { display: block; font-size: 12px; font-weight: 500; color: var(--text-weak); margin-top: 2px; }
@media (max-width: 900px) {
  .page[data-page="work"].work-sb.tab-work--2col.is-active { display: block; }
  .work-sb .sb-side { display: none; }}
@media (max-width: 720px) {
  .sb-job { gap: 12px; padding: 16px 0; }
  .sb-job__t { font-size: 16px; }
  .sb-job__p { font-size: 15px; padding-top: 24px; }
  .work-sb .sb-tool__r .sb-sel { max-width: 108px; }}/* =========================================================
   동행 — A안 (PC: 왼쪽 제목·칩·목록 / 오른쪽 지도, 모바일: 제목 → 지도 → 목록)
   ========================================================= */

body[data-tab="out"]:has(.ob) { background: var(--surface); }
.tab-out .ob { display: grid; grid-template-columns: 500px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top map" "list map"; height: calc(100dvh - var(--nav-h, 64px)); }
.tab-out .ob__top { grid-area: top; padding: 28px 28px 0; border-right: 1px solid var(--border-light); }
.tab-out .ob__top .sb-tool { flex-direction: column; align-items: stretch; margin: 18px 0 6px; }
.tab-out .ob__top .sb-tool__r { margin: 6px 0 0; }
.tab-out .ob__top .sb-tool__sp { display: block; flex: 1; }
.tab-out .ob__list { grid-area: list; overflow-y: auto; padding: 0 28px 32px; border-right: 1px solid var(--border-light); }
.tab-out .ob__map { grid-area: map; position: relative; min-height: 0; }
.sb-mylink__n--out { background: #F76707; }/* 목록 줄 */

.ob-row { display: flex; align-items: center; gap: 14px; padding: 16px 10px; margin: 0 -10px; border-bottom: 1px solid var(--border-light); cursor: pointer; border-radius: 12px; }
.ob-row:hover, .ob-row.is-active { background: var(--surface-sub); }
.ob-row:hover .ob-row__tn { text-decoration: underline; text-underline-offset: 3px; }
.ob-num { width: 24px; height: 24px; border-radius: 999px; background: var(--text-strong); color: var(--surface); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ob-row--mine .ob-num { background: var(--surface); color: var(--text-strong); box-shadow: inset 0 0 0 2px var(--text-strong); }
.ob-row:hover .ob-num, .ob-row.is-active .ob-num { background: #F76707; color: #fff; box-shadow: none; }
.ob-row__main { flex: 1; min-width: 0; }
.ob-row__t { display: flex; align-items: center; gap: 6px; }
.ob-row__tn { font-size: 16px; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ob-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text); background: var(--surface-sub); border-radius: 6px; padding: 0 6px; }
.ob-row__m { font-size: 12.5px; color: var(--text-weak); margin-top: 2px; }
.ob-row__r { flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-strong); }
.ob-row__r small { display: block; font-size: 11.5px; color: #E8590C; margin-top: 2px; }
.tab-out .ob__list .sb-ad { margin: 0; }
.tab-out .ob__top, .tab-out .ob__list { min-width: 0; }
.tab-out .ob__list .sb-ad b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tab-out .ob__list .sb-ad__s { display: none; }/* 지도 핀 */

.opin-wrap { background: none; border: 0; }
.opin { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: #111418; color: #fff; font-size: 12.5px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.25); transform: translateY(0); transition: transform .12s; }
.opin::after { content: ''; position: absolute; left: 12px; top: 100%; width: 2px; height: 6px; background: inherit; }
.opin { position: relative; }
.opin--mine { background: #fff; color: #111418; border-color: #111418; }
.opin--dot { min-width: 14px; width: 14px; height: 14px; padding: 0; }
.opin--dot::after { display: none; }
.opin.is-hl { background: #F76707; color: #fff; border-color: #fff; transform: translateY(-2px) scale(1.08); }
@media (max-width: 900px) {
  .tab-out .ob { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "top" "map" "list"; height: auto; }
  .tab-out .ob__top { padding: 22px 16px 0; border-right: 0; }
  .tab-out .ob__map { height: 280px; margin: 10px 16px 4px; border-radius: 16px; overflow: hidden; }
  .tab-out .ob__list { overflow: visible; padding: 0 16px 24px; border-right: 0; }}
@media (max-width: 720px) {
  .tab-out .ob__top .sb-chips { margin-right: -16px; padding-right: 16px; }
  .ob-row { gap: 12px; }}/* 동행: 왼쪽 목록 접기 (PC) */

.tab-out .ob { transition: grid-template-columns .2s ease; }
.tab-out .ob.is-collapsed { grid-template-columns: 68px minmax(0, 1fr); }
.tab-out .ob.is-collapsed .ob__top, .tab-out .ob.is-collapsed .ob__list { display: none; }
.ob-act { justify-content: flex-start; gap: 8px; }
.ob-act .sb-write { margin-left: auto; }
.ob-fold { width: 36px; height: 36px; margin-left: -8px; border-radius: 10px; border: none; background: none; color: var(--text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.ob-fold svg { width: 19px; height: 19px; }
.ob-fold:hover { background: var(--surface-sub); color: var(--text-strong); }
.ob-rail { display: none; }
.tab-out .ob.is-collapsed .ob-rail { grid-area: 1 / 1 / 3 / 2; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 0; border-right: 1px solid var(--border-light); background: var(--surface); min-height: 0; }
.ob-rail__b { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border: none; border-radius: 12px; background: none; color: var(--text); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.ob-rail__b:hover { background: var(--surface-sub); color: var(--text-strong); }
.ob-rail__c { position: relative; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.ob-rail__c svg { width: 19px; height: 19px; }
.ob-rail__b.is-dark .ob-rail__c { background: var(--text-strong); color: var(--surface); }
.ob-rail__b.is-dark:hover { background: none; }
.ob-rail__c em { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--out); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ob-rail__sep { width: 28px; height: 1px; background: var(--border-light); margin: 4px 0; }
.ob-rail__n { font-size: 11px; color: var(--text-weak); text-align: center; line-height: 1.35; }
.ob-rail__n b { display: block; font-size: 16px; color: var(--text-strong); }
@media (max-width: 900px) { .ob-fold, .tab-out .ob.is-collapsed .ob-rail { display: none; } .tab-out .ob.is-collapsed .ob__list { display: block; }}
/* =========================================================
   나 탭 — Seenby 스타일 A안 (한 줄로 쭉)
   ========================================================= *//* =========================================================
   하위 화면 공통 — Seenby 스타일 (흰 바탕 · 큰 제목 · 검정 주 버튼)
   ========================================================= */

body { background: var(--surface); }/* 하위 화면 제목 줄: 뒤로 + 큰 제목 */

.tab-me .me-edit__bar-title, .tab-connect .mine-page__title, .tab-work .mine-page__title, .tab-connect .comp-detail__bartitle, .tab-out .comp-detail__bartitle, .tab-noti .noti-page__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }/* 글·일거리 상세 제목 *//* 글쓰기 올리기 = 검정 (게시판·일거리의 글쓰기 버튼과 같은 색) *//* 흰 바탕 위 카드: 그림자 대신 얇은 선 */

.tab-connect .detail, .tab-work .detail, .tab-me .rhythm, .noti-row { box-shadow: none; }
.noti-row.is-unread { background: var(--surface-sub); }/* 헤더: 본문과 같은 1280 폭·40 여백에 맞춰 정렬 */

.topnav { padding: 0 max(40px, calc((100% - 1280px) / 2 + 40px)); gap: 36px; }
.topnav__logo { font-size: 18px; font-weight: 700; letter-spacing: -.3px; gap: 0; }
.topnav__item { font-size: 14px; padding: var(--sp-2) 10px; }
.topnav__item.is-active { font-weight: 600; }
@media (max-width: 720px) { .topnav { padding: 0 16px; }}/* 목록 페이지 폭: 1280 · 좌우 40 (본문 1200) */

.page-home.is-active, .page[data-page="board"].board-sb.tab-connect--2col.is-active, .page[data-page="work"].work-sb.tab-work--2col.is-active { max-width: 1280px; }
.page-home.is-active, .page[data-page="board"].board-sb.is-active, .page[data-page="work"].work-sb.is-active, .page[data-page="me"].is-active { padding: 32px 40px 48px; }
@media (max-width: 720px) {
  .page-home.is-active, .page[data-page="board"].board-sb.is-active, .page[data-page="work"].work-sb.is-active, .page[data-page="me"].is-active { padding: 20px 16px 32px; }}/* 제목 굵기 800 → 700 *//* 목록 제목 */

.sb-post__m, .ob-row__m { font-size: 13px; }
.sb-post__t, .sb-job__t { font-size: 16px; font-weight: 600; }
.sb-post__b, .sb-job__b { font-size: 14px; }
.sb-job__p { font-size: 16px; font-weight: 700; }
.ob-row__tn { font-size: 16px; font-weight: 600; }
.sb-chip { height: 40px; }
.sb-write { font-weight: 600; }
.sb-hot { font-size: 14px; }
.sb-side h3 { font-weight: 700; }/* 나 탭 숫자 *//* 하위 화면 제목 */

.tab-me .me-edit__bar-title, .tab-connect .mine-page__title, .tab-work .mine-page__title, .tab-connect .comp-detail__bartitle, .tab-out .comp-detail__bartitle, .tab-noti .noti-page__title { font-size: 20px; font-weight: 700; }
@media (max-width: 720px) {
  .sb-post__t, .sb-job__t { font-size: 15px; }}/* 기록 페이지 큰 숫자도 Seenby 지표 크기로 *//* 게시판: 카테고리 없이 "글 N개 · 정렬 · 검색" 한 줄 */

.sb-tool--plain { flex-direction: row !important; align-items: center !important; }
.sb-tool--plain .sb-tool__r { margin: 0 0 0 auto !important; }
.sb-tool--plain .sb-tool__sp { display: none !important; }/* =========================================================
   게시판 "글 | 음성 방" 전환 · 음성 방 목록 · 방 안
   ========================================================= */

.bsw { display: flex; gap: 22px; margin-top: 20px; border-bottom: 1px solid var(--border-light); }
.bsw__tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0 12px; font-size: 15px; font-weight: 600; color: var(--text-weak); }
.bsw__tab:hover { color: var(--text-strong); }
.bsw__tab.is-active { color: var(--text-strong); }
.bsw__tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text-strong); border-radius: 2px; }
.bsw__live { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #E03131; background: #FFF0F0; border-radius: 999px; padding: 1px 7px; }
.bsw__live i { width: 6px; height: 6px; border-radius: 50%; background: #E03131; display: inline-block; animation: vlive 1.6s ease-in-out infinite; }
@keyframes vlive { 50% { opacity: .35; } }
html[data-theme="dark"] .bsw__live { background: #3A1A1A; }
.vroom-page { max-width: none; }
.vl-mood { font-size: 11.5px; font-weight: 600; color: var(--text); background: var(--surface-sub); border-radius: 6px; padding: 1px 7px; }
.vl-avs { display: flex; }/* 방 만들기 · 입장 · 변조 시트 */

.vc { position: relative; padding: 24px 22px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.vc__t { font-size: 19px; font-weight: 700; color: var(--text-strong); }
.vc__s { font-size: 13.5px; color: var(--text-weak); margin: 4px 0 16px; }
.vc__s b { color: var(--text-strong); }
.vc-lb { font-size: 13px; font-weight: 600; color: var(--text); margin: 12px 0 6px; }
.vc-input { height: 46px; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; font-size: 15px; background: var(--surface); color: var(--text-strong); font-family: inherit; }
.vc-input:focus { outline: none; border-color: var(--text-strong); }
.vc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-chip { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text); }
.vc-chip.is-active { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }
.vc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--border-light); text-align: left; }
.vc-row b { display: block; font-size: 14px; color: var(--text-strong); }
.vc-row small { font-size: 12.5px; color: var(--text-weak); }
.vc-row .me-menu__toggle { width: 42px; height: 25px; background: var(--gray-300); border-radius: 999px; position: relative; flex-shrink: 0; }
.vc-row .me-menu__toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #fff; border-radius: 50%; transition: left .2s; }
.vc-row .me-menu__toggle.is-on { background: var(--blue-500); }
.vc-row .me-menu__toggle.is-on::after { left: 20px; }
.vc-ok { margin-top: 14px; justify-content: center; height: 46px; }
.vj-opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 8px; border: 1.5px solid var(--border); border-radius: 14px; text-align: left; }
.vj-opt:hover { background: var(--surface-sub); }
.vj-opt.is-sel { border-color: var(--text-strong); }
.vj-opt.is-disabled { opacity: .45; cursor: default; }
.vj-opt b { display: block; font-size: 15px; color: var(--text-strong); }
.vj-opt small { font-size: 12.5px; color: var(--text-weak); }
.vj-opt__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-sub); color: var(--text-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vj-opt__ic svg { width: 19px; height: 19px; }
.vj-opt--row { padding: 10px 12px; }
.vj-opt.is-danger b { color: #E03131; }
.vj-cancel { margin-top: 4px; }/* 음성 방 입장 시트: "들어가지 않을게요" 버튼 높이 */

.vc .vj-cancel { flex: none; width: 100%; height: 46px; margin-top: 6px; }/* =========================================================
   심부름 상세 — 글처럼 가볍게 (종류 · 제목 · 쓴 사람 · 얼마 · 내용 · 할게요)
   ========================================================= *//* 심부름 올리기 — 부담 없게 */
.tab-connect .sibling__list, .tab-work .sibling__list { display: flex; flex-direction: column; }
.sibling__paged .pager { margin: 12px 0 4px; }
.sibling__paged .pager__btn { min-width: 32px; height: 32px; font-size: 13px; }
.tab-work .sibling__btn--write, .tab-connect .sibling__btn--write { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }/* 심부름: 어디서 (온라인 / 직접) *//* 심부름 어디서: 아이콘 + 글자 */

.jwhere { display: inline-flex; align-items: center; gap: 3px; }
.jwhere svg { width: 13px; height: 13px; flex-shrink: 0; }
.jwhere.is-off { color: #C2410C; }
html[data-theme="dark"] .jwhere.is-off { color: #FFB37A; }/* 수다 피드 유튜브 썸네일: 가로 16:9 고정 (세로 영상도 양옆 검은 여백으로 같은 모양) */

.sb-post__th { width: 168px; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; align-self: flex-start; margin-top: 4px; }
.sb-post__th img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .sb-post__th { width: 112px; margin-top: 2px; }}/* 썸네일 크기: 글 세 줄(제목·본문·공감) 높이에 맞춤 */

.sb-post__th { width: 136px; }
@media (max-width: 720px) { .sb-post__th { width: 104px; }}/* 제목 줄 없이: 전환 탭 줄 오른쪽에 내 활동·글쓰기 */

.bsw { align-items: center; margin-top: 0; }
.bsw__r { margin-left: auto; display: flex; align-items: center; gap: 14px; padding-bottom: 6px; }
.bsw__r .sb-write { height: 38px; padding: 0 14px; }
.ob-act { display: flex; align-items: center; gap: 8px; }
.ob-act .sb-write { height: 38px; padding: 0 14px; }
@media (max-width: 720px) {
  .bsw { gap: 16px; }
  .bsw__r { gap: 10px; }
  .bsw__r .sb-mylink { font-size: 13px; }
  .bsw__r .sb-write { height: 34px; padding: 0 12px; font-size: 13px; }}
.sb-count { white-space: nowrap; }
.jwhere { white-space: nowrap; }
@media (max-width: 720px) {
  .sb-tool--plain { gap: 6px; }
  .sb-tool--plain .sb-tool__r { gap: 6px; }
  .sb-tool--plain .sb-sel { max-width: 92px; padding: 0 4px; font-size: 12.5px; }
  .sb-post__m { flex-wrap: wrap; row-gap: 2px; }}/* =========================================================
   홈 — 3열 정렬 (C1)
   ========================================================= */

.hx-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.hx-col { min-width: 0; }
.hx-head { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 6px; }
.hx-head h2 { display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--text-strong); margin: 0; }
.hx-n { font-size: 13px; font-weight: 600; color: var(--text-weak); }
.hx-live { width: 7px; height: 7px; border-radius: 50%; background: #E03131; display: inline-block; animation: vlive 1.6s ease-in-out infinite; }
.hx-more { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 600; color: var(--text-weak); }
.hx-more svg { width: 14px; height: 14px; }
.hx-more:hover { color: var(--text-strong); }
.hx-list { border-top: 1.5px solid var(--text-strong); }
.hx-it { width: 100%; display: flex; align-items: center; gap: 12px; height: 64px; border-bottom: 1px solid var(--border-light); padding: 0 2px; text-align: left; }
.hx-it:hover .hx-t { text-decoration: underline; text-underline-offset: 3px; }
.hx-b { flex: 1; min-width: 0; }
.hx-t { font-size: 15px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-m { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12.5px; color: var(--text-weak); white-space: nowrap; overflow: hidden; }
.hx-r { flex-shrink: 0; text-align: right; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text-strong); }
.hx-r small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-weak); }
.hx-r.is-mute { font-size: 12.5px; font-weight: 500; color: var(--text-weak); }
.hx-avs { display: flex; flex-shrink: 0; }
.hx-avs i { width: 26px; height: 26px; border-radius: 50%; background: hsl(var(--h) 55% 62%); border: 2px solid var(--surface); margin-left: -8px; }
.hx-avs i:first-child { margin-left: 0; }
.hx-empty { font-size: 13.5px; color: var(--text-weak); padding: 20px 2px; border-bottom: 1px solid var(--border-light); }
.hx-sec { margin-top: 44px; }
.hx-ogrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding-top: 10px; }
.hx-oc { min-width: 0; text-align: left; }
.hx-oc__img { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; padding: 10px; background: linear-gradient(160deg, #C8CDD6, #8A93A3); }
.hx-oc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-oc__img > svg { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; color: rgba(255,255,255,.55); stroke-width: 1.4; }
.hx-oc__ov { position: relative; display: flex; justify-content: space-between; width: 100%; font-size: 11.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.hx-oc__t { font-size: 14px; font-weight: 600; color: var(--text-strong); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-oc:hover .hx-oc__t { text-decoration: underline; text-underline-offset: 3px; }
.hx-oc__m { font-size: 12.5px; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-ad { margin-top: 44px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 12px; background: var(--surface-sub); font-size: 13.5px; color: var(--text-strong); text-decoration: none; }
.hx-ad__tag { font-size: 10.5px; font-weight: 700; color: var(--text-weak); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; background: var(--surface); }
.hx-ad__s { color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .hx-cols { grid-template-columns: 1fr 1fr; } .hx-cols .hx-col:last-child { grid-column: span 2; } .hx-ogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}
@media (max-width: 720px) {
  .hx-cols { grid-template-columns: 1fr; gap: 28px; }
  .hx-cols .hx-col:last-child { grid-column: auto; }
  .hx-sec, .hx-ad { margin-top: 30px; }
  .hx-ogrid { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; gap: 12px; }
  .hx-ogrid .hx-oc { flex: 0 0 124px; }
  .hx-ad__s { display: none; }}/* 동행 카테고리 배경 (썸네일 없을 때) */

.catbg--cafe { background: linear-gradient(160deg, #C9B79C, #8C7355) !important; }
.catbg--walk { background: linear-gradient(160deg, #9FC5A8, #4F7D5C) !important; }
.catbg--exhibit { background: linear-gradient(160deg, #B8B3D8, #6C63A6) !important; }
.catbg--library { background: linear-gradient(160deg, #A9C4DE, #4B6E93) !important; }
.catbg--food { background: linear-gradient(160deg, #E6B89A, #B0694A) !important; }
.catbg--etc { background: linear-gradient(160deg, #C9C3B6, #7D7668) !important; }
.hx-oc__ov span { white-space: nowrap; }
@media (max-width: 720px) { .hx-oc__ov { font-size: 10.5px; } .hx-oc__img { padding: 8px; }}/* 음성수다 목록 — V2 (한 줄 + 바로 듣기/말하기) */

.vl-now { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-sub); font-size: 13.5px; color: var(--text-strong); }
.vl-now span { color: var(--text-weak); }
.vl-chips { display: flex; gap: 8px; margin: 14px 0 6px; overflow-x: auto; scrollbar-width: none; }
.vl-chips::-webkit-scrollbar { display: none; }
.vl-chips .sb-chip { height: 34px; padding: 0 13px; font-size: 13px; }
.vl-list { margin-top: 6px; }
.vl-row { display: flex; align-items: center; gap: 14px; min-height: 76px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.vl-row:hover .vl-t { text-decoration: underline; text-underline-offset: 3px; }
.vl-avs { display: flex; flex-shrink: 0; }
.vl-avs i { width: 34px; height: 34px; border-radius: 50%; background: hsl(var(--h) 55% 62%); border: 2px solid var(--surface); margin-left: -10px; }
.vl-avs i:first-child { margin-left: 0; }
.vl-avs i.is-speaking { box-shadow: 0 0 0 2px #0CA678; }
.vl-b { flex: 1; min-width: 0; }
.vl-t { font-size: 15.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-m { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--text-weak); white-space: nowrap; overflow: hidden; }
.vl-mood { font-size: 11.5px; font-weight: 600; color: var(--text); background: var(--surface-sub); border-radius: 6px; padding: 1px 7px; }
.vl-act { display: flex; gap: 6px; flex-shrink: 0; }
.vl-lis, .vl-spk { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.vl-lis svg, .vl-spk svg { width: 15px; height: 15px; }
.vl-lis { border: 1px solid var(--border); color: var(--text-strong); background: var(--surface); }
.vl-lis:hover { background: var(--surface-sub); }
.vl-spk { background: var(--text-strong); color: var(--surface); }
.vl-spk:hover { opacity: .88; }
.vl-spk.is-full { background: var(--surface-sub); color: var(--text-weak); }
@media (max-width: 720px) {
  .vl-row { flex-wrap: wrap; padding: 12px 0; gap: 8px 12px; }
  .vl-avs i { width: 30px; height: 30px; }
  .vl-act { width: 100%; padding-left: 62px; }
  .vl-chips { margin-right: -16px; padding-right: 16px; }}/* 아바타 수와 상관없이 제목 줄 맞춤 */

.vl-avs { width: 78px; }
@media (max-width: 720px) { .vl-avs { width: 70px; } .vl-act { padding-left: 82px; }}/* 음성수다 사이드: 지금 가장 북적이는 방 → 조용히 들어보기 */

.vs-side h3 { display: flex; align-items: center; gap: 7px; }
.vs-quiet { margin-top: 24px; padding: 16px 18px; border-radius: 16px; background: #111418; color: #fff; }
.vs-quiet__t { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; }
.vs-quiet__t svg { width: 16px; height: 16px; }
.vs-quiet p { font-size: 13px; opacity: .72; margin-top: 4px; line-height: 1.5; }
.vs-go { margin-top: 12px; width: 100%; height: 40px; border-radius: 10px; background: #fff; color: #111418; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.vs-go svg { width: 15px; height: 15px; }
.vs-go:hover { opacity: .9; }
html[data-theme="dark"] .vs-quiet { background: #F2F4F6; color: #111418; }
html[data-theme="dark"] .vs-go { background: #111418; color: #fff; }
@media (max-width: 900px) {
  .board-sb .vs-side { display: block; margin-top: 28px; }}
.vl-lis.is-off, .vl-lis[disabled] { opacity: .35; cursor: default; }
.vj-note { font-size: 13px; color: var(--text-weak); padding: 12px 14px; border-radius: 12px; background: var(--surface-sub); margin-bottom: 8px; }/* 음성수다 버튼: 글자 수와 상관없이 같은 폭 · 같은 자리 */

.vl-act { width: 182px; justify-content: flex-end; }
.vl-lis, .vl-spk { width: 88px; justify-content: center; padding: 0; }
.vl-minetag { display: inline-block; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--text-strong); border-radius: 6px; padding: 1px 7px; margin-right: 8px; vertical-align: 2px; }
@media (max-width: 720px) { .vl-act { width: auto; justify-content: flex-start; }}/* 내 심부름 — 내 차례 / 진행 중 / 끝난 것 */
.me-err__pick { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-weak); }
.vj-opt--row .vj-opt__ic { font-weight: 700; font-size: 14px; }/* =========================================================
   동행 — PC: 정돈형 목록 + 지도 / 모바일: 지도 중심 + 위 검색바 + 아래 시트
   ========================================================= */

.ob__sheet { grid-area: list; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border-light); }
.tab-out .ob__sheet .ob__list { grid-area: auto; flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px 32px; border-right: 0; }
.tab-out .ob.is-collapsed .ob__sheet { display: none; }
@media (max-width: 900px) { .tab-out .ob.is-collapsed .ob__sheet { display: flex; }}
.ob-sheet__head, .ob-mtop, .ob-fab { display: none; }
.tab-out .ob__top { display: flex; flex-direction: column; gap: 14px; padding-bottom: 10px; }
.tab-out .ob__top .sb-chips { margin: 0; }
.ob-after { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #FFF4EC; font-size: 13.5px; color: var(--text-strong); text-align: left; }
.ob-after b { color: #D9480F; font-weight: 700; }
.ob-after__go { margin-left: auto; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: #D9480F; }
.ob-after__go svg { width: 14px; height: 14px; }
html[data-theme="dark"] .ob-after { background: #3A2618; }
.ob-tool { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-weak); }
.ob-tool .sb-count b { color: var(--text-strong); }
.ob-seg { display: flex; margin-left: auto; background: var(--surface-sub); border-radius: 10px; padding: 3px; }
.ob-seg button { padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-weak); }
.ob-seg button.is-on { background: var(--surface); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tab-out .ob__list { border-top: 1.5px solid var(--text-strong); }
.ob-row { height: 72px; padding: 0 10px; }
.ob-ci { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.ob-ci svg { width: 20px; height: 20px; }
.ob-row__m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .tab-out .ob { position: relative; display: block; height: calc(100dvh - var(--nav-h, 56px) - var(--tabbar-h) - env(safe-area-inset-bottom)); overflow: hidden; }
  .tab-out .ob__top { display: none; }
  .tab-out .ob__map { position: absolute; inset: 0; height: auto; margin: 0; border-radius: 0; }
  .ob-fold { display: none; }
  .ob-mtop { display: flex; position: absolute; top: 12px; left: 12px; right: 12px; z-index: 600; gap: 8px; }
  .ob-pill { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--surface); color: var(--text-strong); box-shadow: 0 3px 12px rgba(0,0,0,.14); display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .ob-pill svg { width: 17px; height: 17px; flex-shrink: 0; }
  .ob-pill__s { color: var(--text-weak); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
  .ob-round { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--surface); color: var(--text-strong); box-shadow: 0 3px 12px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center; }
  .ob-round svg { width: 19px; height: 19px; }
  .ob-round b { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #F76707; color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
  .tab-out .out-locate { top: 66px; bottom: auto; }
  .tab-out .out-research { top: 66px; }
  .ob__sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 600; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.12); border: 0; }
  .ob-sheet__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 16px 10px; position: relative; }
  .ob-sheet__grab { width: 36px; height: 4px; border-radius: 2px; background: #D5D9DF; flex-basis: 100%; max-width: 36px; margin: 2px auto 8px; }
  .ob-sheet__head h3 { font-size: 16px; font-weight: 700; color: var(--text-strong); margin: 0; }
  .ob-sheet__n { font-size: 13px; font-weight: 600; color: var(--text-weak); }
  .ob-sheet__sort { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--text); }
  .ob-sheet__sort svg { width: 14px; height: 14px; }
  .tab-out .ob__sheet .ob__list { padding: 0 16px 16px; }
  .ob-row { height: 68px; padding: 0 2px; margin: 0; border-radius: 0; }
  .ob-ci { width: 40px; height: 40px; }
  .ob-fab { display: flex; position: absolute; right: 14px; top: -66px; width: 52px; height: 52px; border-radius: 50%; background: var(--text-strong); color: var(--surface); align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
  .ob-fab svg { width: 22px; height: 22px; }}
@media (max-width: 900px) {
  .ob-sheet__head { flex-wrap: nowrap; padding: 18px 16px 10px; }
  .ob-sheet__grab { position: absolute; top: 7px; left: 50%; margin: 0 0 0 -18px; width: 36px; flex-basis: auto; }}/* 음성수다 빈 상태 */

.vl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 56px 16px; margin-top: 6px; }
.vl-empty__ic { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-sub); color: var(--text-weak); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.vl-empty__ic svg { width: 24px; height: 24px; }
.vl-empty__t { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.vl-empty__s { font-size: 13px; color: var(--text-weak); }
.vl-empty__btn { margin-top: 12px; height: 38px; padding: 0 16px; border-radius: 10px; background: var(--text-strong); color: var(--surface); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.vl-empty__btn svg { width: 15px; height: 15px; }/* 공용 빈 상태 (모든 탭) */

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 16px; color: var(--text-weak); font-size: 14px; }
.empty > svg { width: 40px; height: 40px; margin-bottom: 12px; color: var(--gray-300); }
.empty__text { color: var(--text-weak); }/* =========================================================
   동행 상세 — 쇼츠 커버(없으면 카테고리 그림) + 아래 고정 신청 바
   ========================================================= */

.tab-out .cd { position: relative; padding-bottom: 96px; }
.cd-cover { position: relative; height: 340px; display: flex; align-items: flex-end; overflow: hidden; border-radius: 0 0 0 0; }
.cd-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-shade { position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.58)); }
.cd-back { position: absolute; top: 16px; left: 16px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; display: flex; align-items: center; justify-content: center; }
.cd-back svg { width: 20px; height: 20px; }
.cd-main .cd-back { position: static; background: var(--surface-sub); color: var(--text-strong); }
.cd-play { position: absolute; top: 16px; right: 16px; z-index: 2; height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.95); color: #111418; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.cd-play svg { width: 14px; height: 14px; }
.cd-cover__in { position: relative; z-index: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px 24px; color: #fff; display: flex; flex-direction: column; gap: 8px; }
.cd-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; background: rgba(255,255,255,.22); }
.cd-tag svg { width: 13px; height: 13px; }
.cd-title { font-size: 28px; font-weight: 700; letter-spacing: -.5px; line-height: 1.3; margin: 0; color: #fff; }
.cd-place { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; color: rgba(255,255,255,.95); }
.cd-place > svg { width: 15px; height: 15px; }
.cd-maplink { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 2px 10px; text-decoration: none; background: transparent; font-family: inherit; cursor: pointer; }
.cd-maplink svg { width: 12px; height: 12px; }
.cd-maplink:hover { background: rgba(255,255,255,.15); }
.cd-main { max-width: 760px; margin: 0 auto; padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.cd-host { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); }
.cd-host b { display: block; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.cd-host small { font-size: 12.5px; color: var(--text-weak); }
.cd-note { font-size: 16px; line-height: 1.75; color: var(--text-strong); margin: 0; white-space: pre-wrap; }
.cd-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.cd-facts div { padding: 14px 4px; }
.cd-facts div + div { border-left: 1px solid var(--border-light); padding-left: 16px; }
.cd-facts small { display: block; font-size: 12px; color: var(--text-weak); }
.cd-facts b { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.cd-sub { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.cd-safe { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-weak); }
.cd-safe svg { width: 14px; height: 14px; color: var(--money); }
.cd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--border-light); padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); }
.cd-bar__in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.cd-bar__s { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-weak); }
.cd-bar__s b { display: block; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.cd-save { width: 48px; height: 48px; border-radius: 13px; border: 1px solid var(--border); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cd-save svg { width: 19px; height: 19px; }
.cd-cta { height: 48px; padding: 0 26px; border-radius: 13px; background: #F76707; color: #fff; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.cd-cta:hover { background: #E8590C; }
.cd-cta.is-done { background: var(--surface-sub); color: var(--text-weak); }
.cd-cta svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .cd-cover { height: 300px; }
  .cd-cover__in { padding: 0 16px 18px; }
  .cd-title { font-size: 22px; }
  .cd-main { padding: 16px 16px 24px; }
  .cd-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 10px 16px; }
  .tab-out .cd { padding-bottom: 80px; }}
.hx-oc__img .cd-art { position: absolute; inset: 0; }
.hx-oc__img::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.4)); }
.hx-oc__ov { z-index: 1; }
.hx-oc__img > svg.cd-art { top: 0; left: 0; width: 100%; height: 100%; margin: 0; color: inherit; stroke-width: 0; }/* 동행: 지도 위 미리보기 카드 (첫 클릭) */

.ob-peek { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 700; width: min(420px, calc(100% - 32px)); display: flex; gap: 14px; padding: 12px; border-radius: 18px; background: var(--surface); box-shadow: 0 10px 32px rgba(0,0,0,.2); cursor: pointer; animation: obpeek .2s ease-out; }
@keyframes obpeek { from { opacity: 0; transform: translate(-50%, 10px); } }
.ob-peek__th { position: relative; width: 76px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.ob-peek__th img, .ob-peek__th svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-peek__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 2px 22px 2px 0; }
.ob-peek__t { font-size: 16px; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-peek__m { font-size: 12.5px; color: var(--text-weak); }
.ob-peek__q { font-size: 13px; color: var(--text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ob-peek__go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: #E8590C; }
.ob-peek__go svg { width: 14px; height: 14px; }
.ob-peek__x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-weak); }
.ob-peek__x svg { width: 16px; height: 16px; }
.ob-peek__x:hover { background: var(--surface-sub); }
.ob-row.is-active { background: var(--surface-sub); }
@media (max-width: 900px) {
  .ob-peek { bottom: calc(46% + 12px); padding: 10px; gap: 12px; }
  .ob-peek__th { width: 58px; }
  .ob-peek__q { -webkit-line-clamp: 1; }}/* ===== 나 탭 M1 — 할 일 먼저 (PC: 왼쪽 프로필·기록 고정 / 오른쪽 확인할 것→내 활동→설정) ===== */

body[data-tab="me"]:has(.me-m1) { background: var(--surface); }
.tab-me .me-m1 { max-width: 1120px; }
.m1 { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items: start; }
.m1-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 24px; }
.m1-pf { display: flex; flex-direction: column; gap: 14px; }
.m1-pf__av { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #6AA5FA, #3182F6); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m1-pf__txt { min-width: 0; }
.m1-pf__name { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.m1-pf__tags { font-size: 13px; color: var(--text-weak); margin-top: 2px; }
.m1-pf__intro { font-size: 14.5px; color: var(--text); margin-top: 8px; line-height: 1.6; }
.m1-pf__edit { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; height: 40px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.m1-pf__edit svg { width: 15px; height: 15px; }
.m1-pf__edit:hover { background: var(--surface-sub); }
.m1-rec { display: block; width: 100%; text-align: left; border-radius: 16px; padding: 20px; background: linear-gradient(160deg, #1B2A55, #0E1630); color: #fff; }
.m1-rec:hover { filter: brightness(1.08); }
.m1-rec__k { font-size: 13px; color: rgba(255,255,255,.7); }
.m1-rec__n { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 2px 0 14px; }
.m1-rec__n small { font-size: 15px; font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.m1-strip { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; }
.m1-strip i { aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,.24); }
.m1-strip i.is-out { background: #FF9E5E; }
.m1-strip i.is-off { background: rgba(255,255,255,.08); }
.m1-rec__f { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.8); }
.m1-rec__f b { color: #fff; font-weight: 700; }
.m1-main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.m1-h { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); margin-bottom: 8px; }
.m1-h__n { color: #E8590C; margin-left: 5px; }
.m1-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m1-ic svg { width: 18px; height: 18px; }
.m1-ic--out { background: #FFF1E8; color: #E8590C; }
.m1-ic--green { background: #E6F8F2; color: #0CA678; }
.m1-ic--purple { background: #F0ECFE; color: #7048E8; }
.m1-ic--blue { background: #EAF3FF; color: #3182F6; }
html[data-theme="dark"] .m1-ic--out { background: #3A2618; }
html[data-theme="dark"] .m1-ic--green { background: #12332A; }
html[data-theme="dark"] .m1-ic--purple { background: #2A2347; }
html[data-theme="dark"] .m1-ic--blue { background: #16294A; }
.m1-todo { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-light); }
.m1-todo:last-child { border-bottom: 0; }
.m1-todo__txt { min-width: 0; flex: 1; }
.m1-todo__t { font-size: 15.5px; font-weight: 600; color: var(--text-strong); }
.m1-todo__s { font-size: 13px; color: var(--text-weak); margin-top: 1px; }
.m1-todo__btn { flex-shrink: 0; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--text-strong); color: var(--surface); }
.m1-todo__btn:hover { opacity: .85; }
.m1-none { display: flex; align-items: center; gap: 8px; padding: 18px 0 6px; font-size: 14px; color: var(--text-weak); }
.m1-none svg { width: 16px; height: 16px; color: #0CA678; }
.m1-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); margin-top: 14px; }
.m1-act { display: flex; align-items: center; gap: 12px; padding: 18px 16px 18px 0; position: relative; text-align: left; }
.m1-act + .m1-act { padding-left: 20px; border-left: 1px solid var(--border-light); }
.m1-act:hover { background: var(--surface-sub); }
.m1-act__n { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--text-strong); }
.m1-act__l { font-size: 13px; color: var(--text-weak); }
.m1-act__dot { position: absolute; top: 18px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: #E8590C; }
.m1-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.m1-row { display: flex; align-items: center; gap: 12px; padding: 15px 2px; border-bottom: 1px solid var(--border-light); font-size: 15px; font-weight: 500; color: var(--text-strong); width: 100%; text-align: left; }
.m1-row > svg { width: 16px; height: 16px; color: var(--text); flex-shrink: 0; }
.m1-row:hover { background: var(--surface-sub); }
.m1-row.is-muted { color: var(--text-weak); }
.m1-row__l { flex: 1; min-width: 0; }
.m1-row__r { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-400, #C4C9D1); }
.m1-row__r svg { width: 16px; height: 16px; }
.m1-row__r small { font-size: 12.5px; color: var(--text-weak); font-weight: 500; }
.m1-row__r small.is-warn { color: #E8590C; }
.m1-tg { width: 42px; height: 24px; border-radius: 999px; background: var(--border); position: relative; flex-shrink: 0; transition: background .15s; }
.m1-tg::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.m1-tg.is-on { background: #3182F6; }
.m1-tg.is-on::after { left: 21px; }
.m1-withdraw { display: inline-block; margin-top: 18px; font-size: 12.5px; color: var(--text-weak); text-decoration: underline; }
.m1-withdraw:hover { color: var(--danger); }

@media (max-width: 900px) {
  .m1 { grid-template-columns: 1fr; gap: 28px; }
  .m1-side { position: static; gap: 16px; }
  .m1-pf { flex-direction: row; align-items: center; gap: 14px; }
  .m1-pf__av { width: 56px; height: 56px; font-size: 17px; }
  .m1-pf__txt { flex: 1; }
  .m1-pf__name { font-size: 19px; }
  .m1-pf__intro { display: none; }
  .m1-pf__edit { width: 38px; height: 38px; padding: 0; flex-shrink: 0; }
  .m1-pf__edit span { display: none; }
  .m1-main { gap: 32px; }
  .m1-h { font-size: 18px; }
  .m1-todo__t { font-size: 15px; }
  .m1-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m1-act { padding: 14px 0; }
  .m1-act + .m1-act { padding-left: 16px; }
  .m1-act:nth-child(3) { padding-left: 0; border-left: 0; }
  .m1-act:nth-child(n+3) { border-top: 1px solid var(--border-light); }
  .m1-rows { grid-template-columns: 1fr; }}
html[data-theme="dark"] .m1-rec { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }/* ===== 수다 글쓰기 W1 — 노트식 ===== */

body[data-tab="board"]:has(.wn) { background: var(--surface); }
.tab-connect .write-page.wn { max-width: 740px; display: flex; flex-direction: column; min-height: calc(100dvh - var(--nav-h, 64px) - 48px); }
.wn-bar { display: flex; align-items: center; gap: 12px; }
.wn-back { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-sub); display: inline-flex; align-items: center; justify-content: center; color: var(--text-strong); flex-shrink: 0; }
.wn-back svg { width: 20px; height: 20px; }
.wn-anon { margin: 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--blue-500); background: #EEF4FF; border-radius: 999px; padding: 5px 12px; }
.wn-anon svg { width: 14px; height: 14px; }
html[data-theme="dark"] .wn-anon { background: #17263F; color: #8FB8F2; }
.wn-post { height: 38px; padding: 0 18px; border-radius: 10px; background: var(--surface-sub); color: var(--text-weak); font-size: 14px; font-weight: 600; flex-shrink: 0; transition: background .15s, color .15s; }
.wn-post.is-ready { background: var(--text-strong); color: var(--surface); }
.wn-ed { flex: 1; padding: 40px 0 24px; }
.wn-title { width: 100%; border: 0; background: none; font-family: inherit; font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; color: var(--text-strong); padding: 0; margin-bottom: 18px; }
.wn-body { width: 100%; border: 0; background: none; resize: none; font-family: inherit; font-size: 17px; line-height: 1.8; color: var(--text-strong); padding: 0; min-height: 160px; overflow: hidden; }
.wn-title:focus, .wn-body:focus { outline: none; }
.wn-title::placeholder, .wn-body::placeholder { color: var(--gray-300); }
.wn-yt__card { position: relative; margin-top: 10px; }
.wn-yt__card.is-link .wn-yt__x { top: 50%; transform: translateY(-50%); right: 10px; background: var(--surface-sub); color: var(--text); }
.wn-ed { cursor: text; }
.wn-yt__card .yt-card { margin: 0; }
.wn-yt__x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wn-yt__x svg { width: 14px; height: 14px; }
.wn-foot { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border-light); padding: 10px 0; z-index: 5; }
.wn-tools { display: flex; align-items: center; gap: 8px; }
.wn-tools.is-hidden { display: none; }
.wn-tool { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; margin-left: -12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text); }
.wn-tool:hover { background: var(--surface-sub); }
.wn-tool svg { width: 18px; height: 18px; }
.wn-count { margin-left: auto; font-size: 13px; color: var(--text-weak); }
.wn-link { display: none; align-items: center; gap: 8px; }
.wn-link.is-open { display: flex; }
.wn-link > svg { width: 18px; height: 18px; color: var(--text); flex-shrink: 0; }
.wn-link__in { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; font-family: inherit; font-size: 14px; background: var(--surface); color: var(--text-strong); }
.wn-link__in:focus { outline: none; border-color: var(--blue-500); }
.wn-link__ok { height: 38px; padding: 0 14px; border-radius: 10px; background: var(--text-strong); color: var(--surface); font-size: 14px; font-weight: 600; flex-shrink: 0; }
.wn-link__x { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-weak); flex-shrink: 0; }
.wn-link__x svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .tab-connect .write-page.wn { min-height: calc(100dvh - var(--nav-h, 56px) - var(--tabbar-h) - 40px); }
  .wn-ed { padding: 28px 0 16px; }
  .wn-title { font-size: 24px; margin-bottom: 14px; }
  .wn-body { font-size: 16px; min-height: 120px; }
  .wn-foot { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }}
.wn-ed.has-yt .wn-body { min-height: 56px; }/* 일반 링크 카드 (기사·블로그 등) — 본문 가로폭에 맞춤 */

.lnk-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-decoration: none; white-space: normal; }
.lnk-card:hover { background: var(--surface-sub); }
.lnk-card__ic { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-sub); color: var(--text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lnk-card__ic svg { width: 18px; height: 18px; }
.lnk-card__b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lnk-card__host { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.lnk-card__url { font-size: 12.5px; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lnk-card__go { color: var(--gray-400); display: inline-flex; flex-shrink: 0; }
.lnk-card__go svg { width: 16px; height: 16px; }
.wn-yt__card .lnk-card { margin: 0; padding-right: 48px; }
.wn-yt__card.is-link .lnk-card__go { display: none; }
.wn-tool:disabled { opacity: .4; cursor: default; }/* 글쓰기 카드 — 미리 보기 전용(재생·링크 이동 안 함) + 카드 전체 끌어서 순서 바꾸기 */

.wn-yt__card .yt-card, .wn-yt__card .lnk-card { pointer-events: none; }
.wn-yt__card.is-sortable { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wn-yt__card.is-sortable:hover .yt-card, .wn-yt__card.is-sortable:hover .lnk-card { border-color: var(--gray-400); }
.wn-yt__card.is-sortable:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 14px; }
.wn-yt__card.is-dragging { z-index: 10; cursor: grabbing; box-shadow: 0 12px 32px rgba(17,20,24,.18); border-radius: 14px; }
.wn-flow { position: relative; }
.wn-flow .wn-body { min-height: 30px; }
.wn-flow .wn-body:first-child { min-height: 160px; }
.wn-ed.has-yt .wn-flow .wn-body:first-child { min-height: 30px; }
.wn-flow .wn-body.is-gap { min-height: 14px; height: 14px; margin: 2px 0; border-radius: 6px; }
.wn-flow .wn-body.is-gap:focus { min-height: 30px; background: var(--surface-sub); }
.wn-flow .wn-yt__card { margin: 10px 0; }
.wn-flow.is-sorting { user-select: none; }
.wn-flow .wn-yt__card { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wn-flow .wn-yt__card:hover .yt-card, .wn-flow .wn-yt__card:hover .lnk-card { border-color: var(--gray-400); }
.wn-flow .wn-yt__card:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 14px; }
.wn-drop { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--blue-500); pointer-events: none; z-index: 11; }/* ===== 심부름 올리기 E1 — 노트식 + 조건 칩 (수다 글쓰기 wn 틀 재사용) ===== */

body[data-tab="work"]:has(.ewn) { background: var(--surface); }
.tab-work .write-page.wn { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; min-height: calc(100dvh - var(--nav-h, 64px) - 48px); }
.ewn .wn-body { min-height: 120px; }
.ewn-seg { margin: 0 auto; display: inline-flex; background: var(--surface-sub); border-radius: 999px; padding: 3px; }
.ewn-seg__b { height: 32px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-weak); }
.ewn-seg__b.is-on { background: #0CA678; color: #fff; }
.ewn-foot { position: sticky; }
.ewn-foot .wn-tools { flex-wrap: wrap; gap: 8px; }
.ewn-cond { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.ewn-cond svg { width: 16px; height: 16px; color: var(--text); }
.ewn-cond .ewn-cond__dn { width: 14px; height: 14px; color: var(--text-weak); }
.ewn-cond:hover { background: var(--surface-sub); }
.ewn-cond--money { background: #E6F8F2; border-color: transparent; color: #087F5B; }
.ewn-cond--money svg { color: #087F5B; }
.ewn-cond--money:hover { background: #D3F3E7; }
.ewn-cond--money.is-empty { background: var(--surface); border: 1px dashed #0CA678; }
html[data-theme="dark"] .ewn-cond--money { background: #12332A; color: #63E6BE; }
html[data-theme="dark"] .ewn-cond--money svg { color: #63E6BE; }
.ewn-cond.is-on { border-color: var(--text-strong); box-shadow: 0 0 0 1px var(--text-strong); }
.ewn-note { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-weak); }
.ewn-note svg { width: 13px; height: 13px; }
.ewn-pop { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; width: 360px; max-width: 100%; background: var(--surface); border: 1px solid var(--border-light); border-radius: 16px; box-shadow: 0 12px 40px rgba(17,20,24,.16); padding: 16px; z-index: 20; }
.ewn-pop.is-open { display: block; }
.ewn-pop__t { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 10px; }
.ewn-pop__hint { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12px; color: var(--text-weak); }
.ewn-pop__hint svg { width: 13px; height: 13px; flex-shrink: 0; }
.ewn-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ewn-opt { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1.5px solid var(--border); border-radius: 12px; text-align: left; }
.ewn-opt svg { width: 20px; height: 20px; color: var(--text); flex-shrink: 0; }
.ewn-opt b { display: block; font-size: 14.5px; color: var(--text-strong); }
.ewn-opt small { font-size: 12px; color: var(--text-weak); }
.ewn-opt.is-on { border-color: #0CA678; background: #F3FCF8; }
.ewn-opt.is-on svg { color: #0CA678; }
html[data-theme="dark"] .ewn-opt.is-on { background: #12332A; }
.ewn-area { width: 100%; margin-top: 10px; height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; font-family: inherit; font-size: 14.5px; background: var(--surface); color: var(--text-strong); }
.ewn-area:focus, .ewn-amt__in:focus { outline: none; }
.ewn-area:focus { border-color: #0CA678; }
.ewn-amt { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--text-strong); padding: 2px 0 4px; margin-bottom: 12px; cursor: text; }
.ewn-amt__in { flex: 0 1 auto; min-width: 1.2ch; max-width: 100%; width: 1.2ch; border: 0; background: none; font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); padding: 0; }
.ewn-amt__in::placeholder { color: var(--gray-300); }
.ewn-amt__tail { font-size: 15px; color: var(--text); white-space: nowrap; flex: 1; }
.ewn-amt.is-off { opacity: .35; }
.ewn-qk { display: flex; flex-wrap: wrap; gap: 6px; }
.ewn-qk__b { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text); }
.ewn-qk__b.is-on { border-color: var(--text-strong); color: var(--text-strong); box-shadow: 0 0 0 1px var(--text-strong); }
@media (max-width: 900px) {
  .tab-work .write-page.wn { min-height: calc(100dvh - var(--nav-h, 56px) - var(--tabbar-h) - 40px); }
  .ewn-seg__b { padding: 0 13px; }
  .ewn-note { display: none; }
  .ewn-cond { height: 34px; padding: 0 11px; font-size: 13px; }
  .ewn-pop { width: auto; right: 0; }}/* ===== 내 심부름 R1 — 숫자 탭 + 할 일 카드 ===== */

body[data-tab="work"]:has(.mr) { background: var(--surface); }
.mr-bar { display: flex; align-items: center; gap: 10px; }
.mr-add { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; background: var(--text-strong); color: var(--surface); font-size: 14px; font-weight: 600; }
.mr-add svg { width: 16px; height: 16px; }
.mr { margin-top: 18px; }
.mr-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border-light); border-radius: 16px; overflow: hidden; }
.mr-tab { position: relative; padding: 16px 18px; text-align: left; }
.mr-tab + .mr-tab { border-left: 1px solid var(--border-light); }
.mr-tab b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--text-strong); }
.mr-tab span { font-size: 13px; font-weight: 600; color: var(--text-weak); }
.mr-tab:hover { background: var(--surface-sub); }
.mr-tab.is-on { background: var(--surface-sub); }
.mr-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--text-strong); }
.mr-tab.is-hot b { color: #E8590C; }
.mr-roles { display: flex; gap: 6px; margin: 16px 0 10px; }
.mr-role { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-weak); }
.mr-role.is-on { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }
.mr-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mr-tag { font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 1px 7px; }
.mr-tag--ask { background: #E6F8F2; color: #087F5B; }
.mr-tag--do { background: #EAF3FF; color: #1C64D9; }
html[data-theme="dark"] .mr-tag--ask { background: #12332A; color: #63E6BE; }
html[data-theme="dark"] .mr-tag--do { background: #16294A; color: #8FB8F2; }
.mr-where { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--text-weak); }
.mr-where svg { width: 13px; height: 13px; }
.mr-t { font-size: 15.5px; font-weight: 600; color: var(--text-strong); line-height: 1.45; }
.mr-s { font-size: 13px; color: var(--text-weak); margin-top: 2px; }
.mr-s b { color: var(--text-strong); font-weight: 700; }
.mr-st { font-size: 12.5px; font-weight: 600; }
.mr-st.is-hot { color: #E8590C; }
.mr-st.is-ok { color: #0CA678; }
.mr-st.is-wait { color: var(--text); }
.mr-st.is-mute { color: var(--text-weak); font-weight: 500; }
.mr-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #FFF6EF; margin-bottom: 10px; cursor: pointer; }
html[data-theme="dark"] .mr-card { background: #2A1F17; }
.mr-card__b { flex: 1; min-width: 0; }
.mr-act { flex-shrink: 0; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--text-strong); color: var(--surface); font-size: 13.5px; font-weight: 600; text-align: center; }
.mr-act.is-green { background: #0CA678; color: #fff; }
.mr-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.mr-row:hover .mr-t { text-decoration: underline; text-underline-offset: 3px; }
.mr-row.is-done { opacity: .55; }
.mr-row__b { flex: 1; min-width: 0; }
.mr-row__r { text-align: right; flex-shrink: 0; }
.mr-amt { display: block; font-size: 15.5px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.mr-row__r .mr-st { display: block; margin-top: 2px; }
.mr-chev { color: var(--gray-400); display: inline-flex; flex-shrink: 0; }
.mr-chev svg { width: 18px; height: 18px; }
.mr-steps { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.mr-steps i { width: 22px; height: 4px; border-radius: 2px; background: var(--border); }
.mr-steps i.is-on { background: #0CA678; }
.mr-steps span { font-size: 12px; color: var(--text-weak); margin-left: 6px; }
.mr-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 48px 0; font-size: 14px; color: var(--text-weak); }
.mr-empty svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .mr-add { height: 34px; padding: 0 12px; font-size: 13px; }
  .mr-tab { padding: 12px 14px; }
  .mr-tab b { font-size: 22px; }
  .mr-card { flex-wrap: wrap; padding: 14px; }
  .mr-act { width: 100%; height: 40px; }
  .mr-row__r .mr-st { max-width: 120px; }}/* ===== 심부름 상세 K1 — 상자 없는 글 + 아래 고정 바(금액·버튼) ===== */

body[data-tab="work"]:has(.ek) { background: var(--surface); }
.tab-work .detail.ek { padding-bottom: 110px; }
.ek-art { padding-top: 18px; }
.ek-top { display: flex; align-items: center; gap: 8px; }
.ek-top .post-kebab-wrap { margin-left: auto; }
.ek-title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; color: var(--text-strong); margin: 10px 0 0; }
.ek-who { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--text-weak); }
.ek-who b { color: var(--text-strong); font-weight: 600; }
.ek-who__av { width: 28px; height: 28px; border-radius: 50%; background: #20C997; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ek-info { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); margin: 22px 0; }
.ek-cell { padding: 14px 0; min-width: 0; }
.ek-cell + .ek-cell { padding-left: 18px; border-left: 1px solid var(--border-light); }
.ek-cell__k { display: block; font-size: 12.5px; color: var(--text-weak); }
.ek-cell__v { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ek-cell__v svg { width: 14px; height: 14px; flex-shrink: 0; }
.ek-body { font-size: 16.5px; line-height: 1.8; color: var(--text-strong); white-space: pre-wrap; word-break: keep-all; }
.ek-safe { display: flex; gap: 6px; align-items: flex-start; margin-top: 22px; font-size: 12.5px; line-height: 1.5; color: var(--text-weak); }
.ek-safe svg { width: 14px; height: 14px; color: #0CA678; flex-shrink: 0; margin-top: 2px; }
.ek-safe b { color: var(--text); }
.ek-own { margin-top: 22px; background: var(--surface-sub); border-radius: 16px; padding: 14px 16px; }
.ek-own.is-empty { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-weak); }
.ek-own.is-empty svg { width: 16px; height: 16px; flex-shrink: 0; }
.ek-own__h { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.ek-own__h em { font-style: normal; color: #E8590C; }
.ek-cand { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.ek-cand + .ek-cand { border-top: 1px solid var(--border-light); }
.ek-cand__av { width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ek-cand__b { flex: 1; min-width: 0; }
.ek-cand__b b { display: block; font-size: 15px; color: var(--text-strong); }
.ek-cand__b small { font-size: 12.5px; color: var(--text-weak); }
.ek-own__btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--text-strong); color: var(--surface); font-size: 13px; font-weight: 600; }
.ek-own__btn svg { width: 14px; height: 14px; }
.ek-own__btn.is-line { background: var(--surface); color: var(--text-strong); border: 1px solid var(--border); }
.ek-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--border-light); }
.ek-bar__in { padding: 14px max(20px, calc((100% - 760px) / 2)); display: flex; align-items: center; gap: 12px; }
.ek-bar__amt { flex: 1; min-width: 0; }
.ek-bar__amt b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.ek-bar__amt span { font-size: 12.5px; color: var(--text-weak); }
.ek-bar__save { width: 50px; height: 50px; border-radius: 12px; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-strong); flex-shrink: 0; }
.ek-bar__save svg { width: 20px; height: 20px; }
.ek-bar__save.is-on svg { fill: currentColor; }
.ek-bar__btn { height: 50px; padding: 0 28px; border-radius: 12px; background: #0CA678; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; text-align: center; }
.ek-bar__btn:hover { background: #099268; }
.ek-bar__btn.is-line { background: var(--surface); color: var(--text-strong); border: 1px solid var(--border); }
@media (max-width: 900px) {
  .ek-title { font-size: 22px; }
  .ek-body { font-size: 15.5px; }
  .ek-cell + .ek-cell { padding-left: 12px; }
  .ek-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .ek-bar__in { padding: 10px 16px; }
  .ek-bar__amt b { font-size: 19px; }
  .ek-bar__btn { height: 46px; padding: 0 18px; font-size: 15px; }
  .ek-bar__save { width: 46px; height: 46px; }}
.ek-who__av.is-me { background: linear-gradient(135deg, #6AA5FA, #3182F6); }
.ek-own__more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 40px; margin-top: 6px; border-top: 1px solid var(--border-light); font-size: 13.5px; font-weight: 600; color: var(--text); }
.ek-own__more svg { width: 15px; height: 15px; }
.ek-own__more:hover { color: var(--text-strong); }/* 수다: 글 | 음성 + "모두 익명이에요" 칩 */

.bsw__anon { display: inline-flex; align-items: center; gap: 4px; align-self: center; margin-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--blue-500); background: #EEF4FF; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.bsw__anon svg { width: 13px; height: 13px; }
html[data-theme="dark"] .bsw__anon { background: #17263F; color: #8FB8F2; }
.bsw__anon-short { display: none; }
@media (max-width: 900px) { .bsw__anon { font-size: 11.5px; padding: 3px 8px; margin-left: 0; } .bsw__anon-full { display: none; } .bsw__anon-short { display: inline; } .bsw .sb-mylink { white-space: nowrap; }}/* 음성 방 익명 안내 · 별명 *//* 음성 방 별명 줄 (입장·방 만들기 창) */

.vnick { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 6px; }
.vnick__t { font-size: 14px; color: var(--text); text-align: center; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.vnick__t b { color: var(--text-strong); }
.vnick__tag { font-size: 11px; font-weight: 700; color: var(--blue-500); background: #EEF4FF; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
html[data-theme="dark"] .vnick__tag { background: #17263F; color: #8FB8F2; }
.vnick__btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.vnick__btn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface); }
.vnick__btn svg { width: 13px; height: 13px; }
.vnick__btn:hover { background: var(--surface-sub); }
.vnick__ed { display: flex; gap: 6px; width: 100%; }
.vnick__in { flex: 1; min-width: 0; height: 42px; border: 1.5px solid var(--text-strong); border-radius: 12px; padding: 0 12px; font-family: inherit; font-size: 15px; font-weight: 600; background: var(--surface); color: var(--text-strong); }
.vnick__in:focus { outline: none; }
.vnick__ok { height: 42px; padding: 0 16px; border-radius: 12px; background: var(--text-strong); color: var(--surface); font-size: 14px; font-weight: 600; flex-shrink: 0; }
.vnick__ed .vnick__btn { height: 42px; border-radius: 12px; }
.vnick__hint { font-size: 12px; color: var(--text-weak); text-align: center; line-height: 1.5; }
.vnick__hint.is-err { color: var(--danger); }/* 설정 > 음성 방 별명 */

.vns-radio { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; text-align: left; margin-top: 8px; }
.vns-radio i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--gray-400); flex-shrink: 0; margin-top: 1px; position: relative; }
.vns-radio.is-on { border-color: var(--text-strong); }
.vns-radio.is-on i { border-color: var(--text-strong); }
.vns-radio.is-on i::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--text-strong); }
.vns-radio b { display: block; font-size: 15px; color: var(--text-strong); }
.vns-radio small { font-size: 12.5px; color: var(--text-weak); }
.vns-fix { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vns-fix .vnick__in { width: 100%; flex: none; }
.vns-fix .vnick__hint { text-align: left; }/* ===== 프로필 수정 P1 — 노트식 한 장 ===== */

.tab-me .me-edit.pe { max-width: 640px; }
.pe-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.pe-bar__t { flex: 1; font-size: 17px; font-weight: 700; color: var(--text-strong); }
.pe-head { display: flex; justify-content: center; margin-bottom: 20px; }
.pe-av__wrap { position: relative; }
.pe-av { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #6AA5FA, #3182F6); color: #fff; font-size: 30px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pe-av__cam { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-strong); }
.pe-av__cam svg { width: 16px; height: 16px; }
.pe-name { display: flex; flex-direction: column; align-items: center; }
.pe-name__in { width: 260px; max-width: 100%; border: 0; border-bottom: 2px solid var(--text-strong); background: none; text-align: center; font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); padding: 2px 0 8px; }
.pe-name__in:focus { outline: none; border-bottom-color: var(--blue-500); }
.pe-name__in::placeholder { color: var(--gray-300); }
.pe-name__err { min-height: 18px; margin-top: 6px; font-size: 12.5px; color: var(--danger); }
.pe-intro { position: relative; max-width: 460px; margin: 6px auto 0; background: var(--surface-sub); border-radius: 14px; padding: 12px 16px 24px; }
.pe-intro__in { width: 100%; border: 0; background: none; resize: none; overflow: hidden; text-align: center; font-family: inherit; font-size: 16px; line-height: 1.7; color: var(--text-strong); padding: 0; }
.pe-intro__in:focus { outline: none; }
.pe-intro__in::placeholder { color: var(--gray-400); }
.pe-intro__cnt { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12px; color: var(--text-weak); }
.pe-sec { margin-top: 30px; }
.pe-sec__t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 12px; }
.pe-sec__t svg { width: 16px; height: 16px; color: var(--text); }
.pe-sec__t small { font-size: 12.5px; font-weight: 500; color: var(--text-weak); }
.pe-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-tag { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text); }
.pe-tag svg { width: 14px; height: 14px; stroke-width: 2.6; }
.pe-tag.is-on { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }
.pe-area { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border-light); min-height: 52px; }
.pe-area b { flex: 1; font-size: 16px; color: var(--text-strong); }
.pe-area__link { font-size: 13.5px; font-weight: 600; color: var(--blue-500); }
.pe-area__in { flex: 1; min-width: 0; height: 40px; border: 1.5px solid var(--text-strong); border-radius: 10px; padding: 0 12px; font-family: inherit; font-size: 15px; background: var(--surface); color: var(--text-strong); }
.pe-area__in:focus { outline: none; }
.pe-area__btn { height: 40px; padding: 0 14px; border-radius: 10px; background: var(--text-strong); color: var(--surface); font-size: 14px; font-weight: 600; }
.pe-who { display: flex; gap: 8px; align-items: flex-start; margin-top: 28px; padding: 14px 16px; border-radius: 14px; background: var(--surface-sub); font-size: 13px; line-height: 1.6; color: var(--text-weak); }
.pe-who svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--blue-500); }
.pe-who b { color: var(--text); }
@media (max-width: 900px) { .pe-name__in { font-size: 24px; } .pe-av { width: 84px; height: 84px; font-size: 26px; }}/* ===== 본인 인증 ===== */

.vbadge { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 7px 1px 5px; border-radius: 999px; background: #E6F8F2; color: #087F5B; font-size: 11.5px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.vbadge svg { width: 12px; height: 12px; }
.vbadge--sm { font-size: 11px; padding: 0 6px 0 4px; }
html[data-theme="dark"] .vbadge { background: #12332A; color: #63E6BE; }
.cd-host__n { display: inline-flex; align-items: center; }
.vgate__ic { background: #E6F8F2 !important; color: #0CA678 !important; }
.tab-me .vf { max-width: 480px; }
.vf-body { display: flex; flex-direction: column; padding-top: 8px; }
.vf-step { font-size: 13px; font-weight: 700; color: #0CA678; margin-bottom: 6px; }
.vf-t { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; color: var(--text-strong); }
.vf-s { font-size: 14px; color: var(--text-weak); margin-top: 6px; line-height: 1.6; }
.vf-phone { margin-top: 28px; height: 56px; border: 0; border-bottom: 2px solid var(--text-strong); background: none; font-family: inherit; font-size: 26px; font-weight: 700; letter-spacing: .02em; color: var(--text-strong); padding: 0 2px; }
.vf-phone:focus { outline: none; border-bottom-color: #0CA678; }
.vf-phone::placeholder { color: var(--gray-300); }
.vf-notes { list-style: none; margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--surface-sub); display: flex; flex-direction: column; gap: 8px; }
.vf-notes li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.vf-notes svg { width: 15px; height: 15px; color: var(--text-weak); flex-shrink: 0; }
.vf-btn { margin-top: 28px; height: 54px; border-radius: 14px; background: #0CA678; color: #fff; font-size: 16px; font-weight: 700; text-align: center; }
.vf-btn:disabled { background: var(--surface-sub); color: var(--text-weak); cursor: default; }
.vf-link { font-size: 13.5px; font-weight: 600; color: var(--blue-500); text-decoration: underline; text-underline-offset: 3px; }
.vf-codewrap { position: relative; display: block; margin-top: 28px; cursor: text; }
.vf-code { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; }
.vf-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.vf-boxes span { height: 58px; border-radius: 12px; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--text-strong); background: var(--surface); }
.vf-boxes span.is-fill { border-color: var(--text-strong); }
.vf-boxes span.is-cur { border-color: #0CA678; box-shadow: 0 0 0 3px rgba(12,166,120,.15); }
.vf-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.vf-timer { font-size: 14px; font-weight: 700; color: #E8590C; font-variant-numeric: tabular-nums; }
.vf-err { min-height: 18px; margin-top: 6px; font-size: 13px; color: var(--danger); }
.vf-demo { font-size: 12px; color: var(--text-weak); background: var(--surface-sub); border-radius: 8px; padding: 6px 10px; align-self: flex-start; }
.vf-done__ic { width: 72px; height: 72px; border-radius: 22px; background: #E6F8F2; color: #0CA678; display: flex; align-items: center; justify-content: center; margin: 12px 0 18px; }
.vf-done__ic svg { width: 36px; height: 36px; }
.vf-sub { margin-top: 28px; font-size: 13px; font-weight: 700; color: var(--text-weak); }
.vf-unlock { margin-top: 8px; border-top: 1px solid var(--border-light); }
.vf-unlock__r { display: flex; align-items: center; gap: 10px; padding: 14px 2px; border-bottom: 1px solid var(--border-light); font-size: 15px; font-weight: 600; color: var(--text-strong); }
.vf-unlock__r svg { width: 18px; height: 18px; color: #0CA678; }
@media (max-width: 900px) { .vf-t { font-size: 21px; } .vf-boxes span { height: 50px; font-size: 21px; }}/* ===== 수다 글 상세 D1 — 상자 없는 읽기 + 아래 고정 입력 ===== */

body[data-tab="board"]:has(.pd) { background: var(--surface); }
.pd { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 56px; justify-content: center; padding: 8px 0 120px; }
.pd-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pd-back { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; padding: 4px 0; }
.pd-back svg { width: 18px; height: 18px; }
.pd-title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; color: var(--text-strong); margin: 0; word-break: keep-all; }
.pd-meta { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--text-weak); }
.pd-anon { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 600; }
.pd-anon i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-sub); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--text-weak); font-weight: 700; }
.pd-body { margin-top: 22px; font-size: 17px; line-height: 1.85; color: var(--text-strong); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.pd-rx { display: flex; gap: 8px; margin-top: 26px; }
.pd-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.pd-pill svg { width: 17px; height: 17px; }
.pd-pill.is-on { border-color: #FFD8D8; background: #FFF5F5; color: #E03131; }
.pd-pill.is-on svg { fill: #E03131; stroke: #E03131; }
.pd-pill--save.is-on { border-color: #D0EBFF; background: #F1F8FF; color: var(--blue-500); }
.pd-pill--save.is-on svg { fill: var(--blue-500); stroke: var(--blue-500); }
.pd-ch { display: flex; align-items: center; gap: 10px; margin: 34px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }
.pd-ch > b { font-size: 17px; color: var(--text-strong); }
.pd-ch > b em { font-style: normal; color: var(--text-weak); font-weight: 600; margin-left: 4px; }
.pd-sort { margin-left: auto; display: flex; gap: 2px; }
.pd-sort button { border: none; background: none; font-family: inherit; font-size: 13px; color: var(--text-weak); padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.pd-sort button.is-on { color: var(--text-strong); font-weight: 700; }
.pd-empty { padding: 28px 0; text-align: center; font-size: 14px; color: var(--text-weak); }
.pd-cm { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border-light); }
.pd-cl > .pd-cm:first-child { border-top: none; }
.pd-cm.is-target { background: #F1FBF7; border-radius: 12px; margin: 0 -10px; padding: 16px 10px; border-top-color: transparent; }
.pd-cm__w { flex: 1; min-width: 0; }
.pd-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: hsl(var(--h, 210), 55%, 68%); }
.pd-av.is-op { background: var(--money); }
.pd-av.is-sm { width: 24px; height: 24px; font-size: 9.5px; }
.pd-cm__h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-weak); }
.pd-cm__h b { font-size: 13.5px; color: var(--text-strong); }
.pd-op { font-size: 11.5px; font-weight: 700; color: var(--money); background: var(--green-50); border-radius: 5px; padding: 0 6px; line-height: 19px; }
.pd-cm__t { font-size: 15px; line-height: 1.65; margin-top: 3px; color: var(--text-strong); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.pd-cm__a { display: flex; gap: 14px; margin-top: 6px; }
.pd-ca { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-weak); cursor: pointer; padding: 2px 0; }
.pd-ca svg { width: 14px; height: 14px; }
.pd-ca.is-on { color: #E03131; }
.pd-ca.is-on svg { fill: #E03131; stroke: #E03131; }
.pd-rp { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--border-light); }
.pd-cm.is-reply { padding: 10px 0; border-top: none; }
.pd-more { border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--blue-500); padding: 6px 0; cursor: pointer; }
.pd-side { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; padding-top: 4px; }
.pd-side__h { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }
.pd-sd { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 0; border: none; border-bottom: 1px solid var(--border-light); background: none; text-align: left; font-family: inherit; cursor: pointer; }
.pd-sd b { font-size: 14.5px; line-height: 1.45; color: var(--text-strong); }
.pd-sd span { font-size: 12px; color: var(--text-weak); }
.pd-sd:hover b { text-decoration: underline; }
.pd-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 22px 0 14px; background: linear-gradient(rgba(255, 255, 255, 0), var(--surface) 32%); pointer-events: none; }
.pd-dock__in { max-width: 1124px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 56px; justify-content: center; }
.pd-cmp { pointer-events: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 8px 8px 8px 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .06); }
.pd-cmp:focus-within { border-color: var(--text-weak); }
.pd-to { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); padding: 2px 0 6px; }
.pd-to svg { width: 14px; height: 14px; }
.pd-to__x { border: none; background: none; color: var(--text-weak); display: flex; cursor: pointer; padding: 2px; }
.pd-cmp__r { display: flex; align-items: flex-end; gap: 8px; }
.pd-in { flex: 1; border: none; outline: none; background: none; resize: none; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--text-strong); padding: 8px 0; min-height: 38px; max-height: 120px; }
.pd-anon-tag { font-size: 11.5px; color: var(--text-weak); background: var(--surface-sub); border-radius: 6px; padding: 2px 7px; flex-shrink: 0; margin-bottom: 9px; }
.pd-send { width: 38px; height: 38px; border-radius: 12px; border: none; background: var(--text-strong); color: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.pd-send svg { width: 16px; height: 16px; }
.pd-send:disabled { opacity: .35; cursor: default; }
html[data-theme="dark"] .pd-dock { background: linear-gradient(rgba(0, 0, 0, 0), var(--surface) 32%); }
html[data-theme="dark"] .pd-cm.is-target { background: #16302A; }
html[data-theme="dark"] .pd-pill.is-on { background: #2A1F1F; border-color: #5C2B2B; }
html[data-theme="dark"] .pd-pill--save.is-on { background: #172636; border-color: #1F3D5C; }
@media (max-width: 1000px) {
  .pd { grid-template-columns: minmax(0, 720px); gap: 0; }
  .pd-side { position: static; margin-top: 36px; }
  .pd-dock__in { grid-template-columns: minmax(0, 720px); gap: 0; }}
@media (max-width: 720px) {
  .pd { padding: 0 0 110px; }
  .pd-title { font-size: 22px; }
  .pd-body { font-size: 16px; }
  .pd-dock { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 16px 0 8px; }
  .pd-dock__in { padding: 0 12px; }}
/* ===== 음성 방 W1 — 밝은 무대 (넓은 무대 + 오른쪽 채팅 / 모바일 채팅 시트) ===== */
.page[data-page="board"].is-active:has(> .vr) { max-width: 1200px; }
@keyframes vring { 0% { box-shadow: 0 0 0 0 rgba(12, 166, 120, .45); } 100% { box-shadow: 0 0 0 12px rgba(12, 166, 120, 0); } }
@keyframes vbar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.vr { display: flex; flex-direction: column; height: calc(100dvh - var(--nav-h) - 48px); min-height: 560px; }
.vr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-shrink: 0; }
.vr-back { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--surface-sub); color: var(--text-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.vr-back svg { width: 18px; height: 18px; }
.vr-head { flex: 1; min-width: 0; }
.vr-t { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-m { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-weak); white-space: nowrap; overflow: hidden; }
.vr-live { display: inline-flex; align-items: center; gap: 4px; color: #E03131; font-weight: 700; }
.vr-live i { width: 6px; height: 6px; border-radius: 50%; background: #E03131; animation: vlive 1.6s ease-in-out infinite; }
.vr-me { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--surface-sub); font-size: 13px; color: var(--text); flex-shrink: 0; }
.vr-me svg { width: 14px; height: 14px; color: #0CA678; }
.vr-me b { color: var(--text-strong); }
.vr-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; }
.vr-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 24px; background: var(--surface-sub); overflow: hidden; }
.vr-stage { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 24px 10px; }
.vr-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 760px; }
.vr-seat { position: relative; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 14px; border: none; border-radius: 20px; background: var(--surface); color: var(--text-strong); font-family: inherit; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); transition: box-shadow .15s; }
.vr-seat.is-me { cursor: default; }
.vr-seat.is-speaking { box-shadow: 0 0 0 2px #0CA678; }
.vr-seat:not(.is-me):not(.is-empty):hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.vr-seat.is-speaking:hover { box-shadow: 0 0 0 2px #0CA678, 0 4px 14px rgba(0, 0, 0, .08); }
.vr-av { position: relative; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; background: hsl(var(--h, 220) 55% 62%); }
.vr-seat.is-speaking .vr-av { animation: vring 1.2s infinite; }
.vr-mute { position: absolute; right: -3px; bottom: -3px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: #E03131; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.vr-mute svg { width: 13px; height: 13px; }
.vr-name { font-size: 14px; font-weight: 600; text-align: center; line-height: 1.3; }
.vr-name small { font-weight: 500; color: var(--text-weak); }
.vr-role { font-size: 11.5px; font-weight: 700; color: var(--text-weak); min-height: 15px; margin-top: -4px; }
.vr-role.is-host { color: #E8590C; }
.vr-wave { display: flex; gap: 3px; height: 14px; align-items: center; }
.vr-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--gray-300); transform: scaleY(.25); }
.vr-seat.is-speaking .vr-wave i { background: #0CA678; animation: vbar .8s infinite ease-in-out; }
.vr-seat.is-speaking .vr-wave i:nth-child(2) { animation-delay: .15s; }
.vr-seat.is-speaking .vr-wave i:nth-child(3) { animation-delay: .3s; }
.vr-seat.is-empty { background: transparent; box-shadow: none; border: 2px dashed var(--border); justify-content: center; color: var(--text-weak); font-size: 13px; cursor: default; min-height: 162px; }
.vr-plus { width: 76px; height: 76px; border-radius: 50%; background: var(--surface); opacity: .7; display: flex; align-items: center; justify-content: center; color: var(--gray-400); }
.vr-plus svg { width: 22px; height: 22px; }
.vr-lis { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.vr-lis svg { width: 15px; height: 15px; color: var(--text-weak); }
.vr-lis__dots { display: flex; }
.vr-lis__dots i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface-sub); margin-left: -7px; background: hsl(var(--h) 45% 65%); }
.vr-lis__dots i:first-child { margin-left: 0; }
.vr-dock { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px 18px; flex-shrink: 0; }
.vr-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-strong); font-family: inherit; font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.vr-pill svg { width: 19px; height: 19px; flex-shrink: 0; }
.vr-pill:hover { filter: brightness(.97); }
.vr-pill.is-main { height: 52px; padding: 0 24px; font-size: 15px; background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }
.vr-pill.is-main.is-on { background: #0CA678; border-color: #0CA678; color: #fff; }
.vr-pill.is-join { height: 52px; padding: 0 26px; font-size: 15px; background: #0CA678; border-color: #0CA678; color: #fff; }
.vr-pill.is-join.is-full { background: var(--surface); border-color: #0CA678; color: #087F5B; }
.vr-pill.is-fx { border-color: #B197FC; color: #7048E8; background: #F3F0FF; }
.vr-pill.is-leave { color: #E03131; border-color: #FFD1D1; }
.vr-pill em { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #E8590C; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.vr-pill.is-chat, .vr-peek, .vr-chat__grab, .vr-chat__x { display: none; }
.vr-chat { display: flex; flex-direction: column; min-height: 0; border-radius: 24px; border: 1px solid var(--border-light); background: var(--surface); }
.vr-chat__h { display: flex; align-items: center; gap: 6px; padding: 16px 18px 12px; font-size: 15px; font-weight: 700; color: var(--text-strong); border-bottom: 1px solid var(--border-light); }
.vr-chat__h small { font-size: 12px; font-weight: 500; color: var(--text-weak); }
.vr-chat__l { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.vr-msg { font-size: 14px; line-height: 1.55; color: var(--text-strong); overflow-wrap: anywhere; }
.vr-msg b { display: block; font-size: 12px; font-weight: 600; color: var(--text-weak); margin-bottom: 1px; }
.vr-msg.is-me b { color: #0CA678; }
.vr-chat__row { display: flex; align-items: center; gap: 8px; margin: 10px 12px 12px; height: 46px; border-radius: 14px; background: var(--surface-sub); padding: 0 6px 0 14px; }
.vr-chat__in { flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--text-strong); font-family: inherit; font-size: 14px; }
.vr-chat__in::placeholder { color: var(--text-weak); }
.vr-chat__send { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--text-strong); color: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.vr-chat__send svg { width: 15px; height: 15px; }
.vr-seat:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
@media (max-width: 860px) {
  .vr-grid { grid-template-columns: minmax(0, 1fr); }
  .vr-pill.is-chat { display: inline-flex; }
  .vr-peek { display: flex; align-self: center; max-width: 92%; gap: 6px; font-size: 13px; font-family: inherit; color: var(--text-strong); background: var(--surface); border: none; border-radius: 14px; padding: 8px 12px; margin: 0 auto 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); cursor: pointer; }
  .vr-peek b { flex-shrink: 0; color: #0CA678; }
  .vr-peek span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vr-chat { position: fixed; left: 0; right: 0; bottom: 0; height: 62dvh; z-index: 60; border-radius: 22px 22px 0 0; border: none; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); transform: translateY(105%); transition: transform .25s ease; padding-bottom: env(safe-area-inset-bottom); }
  .vr-chat.is-open { transform: none; }
  .vr-chat__grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--gray-300); margin: 8px auto 0; }
  .vr-chat__h { padding: 10px 16px 10px; }
  .vr-chat__x { display: flex; margin-left: auto; border: none; background: none; color: var(--text-weak); cursor: pointer; padding: 4px; }
  .vr-chat__x svg { width: 18px; height: 18px; }}
@media (max-width: 720px) {
  .vr { height: calc(100dvh - var(--nav-h) - var(--tabbar-h) - env(safe-area-inset-bottom) - 28px); min-height: 0; }
  body:has(.vr) { padding-bottom: 0; }
  .vr-top { gap: 10px; margin-bottom: 10px; }
  .vr-t { font-size: 16px; }
  .vr-me { height: 30px; padding: 0 10px; font-size: 12px; }
  .vr-me__full { display: none; }
  .vr-main { border-radius: 20px; }
  .vr-stage { padding: 16px 10px 6px; gap: 12px; }
  .vr-seats { gap: 8px; }
  .vr-seat { width: calc(33.3% - 6px); padding: 14px 4px 10px; border-radius: 16px; }
  .vr-av, .vr-plus { width: 56px; height: 56px; font-size: 20px; }
  .vr-name { font-size: 12.5px; }
  .vr-seat.is-empty { min-height: 118px; }
  .vr-dock { gap: 6px; padding: 10px 6px 12px; flex-wrap: nowrap; }
  .vr-pill { height: 44px; padding: 0 14px; font-size: 13.5px; }
  .vr-pill.is-main, .vr-pill.is-join { height: 48px; padding: 0 18px; }
  .vr-pill:not(.is-main):not(.is-join) { width: 44px; padding: 0; justify-content: center; }
  .vr-pill:not(.is-main):not(.is-join) .vr-pill__t { display: none; }
  .vr-chat { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 0; }}
html[data-theme="dark"] .vr-pill.is-leave { border-color: rgba(255, 107, 107, .35); color: #FF8787; }
html[data-theme="dark"] .vr-pill.is-fx { background: rgba(132, 94, 247, .16); border-color: rgba(177, 151, 252, .4); color: #B197FC; }
html[data-theme="dark"] .vr-seat { box-shadow: none; }
html[data-theme="dark"] .vr-seat.is-speaking { box-shadow: 0 0 0 2px #0CA678; }
@media (prefers-reduced-motion: reduce) { .vr-seat.is-speaking .vr-av, .vr-seat.is-speaking .vr-wave i { animation: none; } .vr-chat { transition: none; }}
/* ===== 시트 창 F1 — 동행 올리기 · 동행 신청 · 심부름 할게요 ===== */

.modal.cs { max-width: 480px; }
.cs__b { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 22px 8px; }
.cs__h { display: flex; align-items: flex-start; gap: 10px; }
.cs__h b { flex: 1; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.cs-x { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface-sub); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.cs-x svg { width: 16px; height: 16px; }
.cs__s { font-size: 13.5px; color: var(--text-weak); margin-top: 2px; }
.cs-lb { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--text-strong); margin: 20px 0 8px; }
.cs-lb small { font-size: 12px; font-weight: 500; color: var(--text-weak); }
.cs-big { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--text-strong); padding: 4px 0 8px; }
.cs-big svg { width: 20px; height: 20px; color: var(--out); flex-shrink: 0; }
.cs-big__in { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: 19px; font-weight: 600; color: var(--text-strong); padding: 0; }
.cs-big__in::placeholder { color: var(--gray-400); font-weight: 500; }
.cs-sug { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cs-sug__b { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 8px; border: none; background: var(--surface-sub); font-family: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; }
.cs-sug__b svg { width: 12px; height: 12px; }
.cs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-chip { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.cs-chip svg { width: 14px; height: 14px; }
.cs-chip.is-on { color: #fff; }
.cs-chip--out.is-on { background: var(--out); border-color: var(--out); }
.cs-chip--money.is-on { background: var(--money); border-color: var(--money); }
.cs-sub2 { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cs-sub2__k { font-size: 12.5px; color: var(--text-weak); flex-shrink: 0; }/* 날짜 줄 */

.dp-quick { display: flex; gap: 6px; margin-bottom: 8px; }
.dp-q { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.dp-q.is-on { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }
.dp-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.dp-strip.is-off .dp-d { opacity: .4; }
.dp-d { flex: 0 0 48px; height: 60px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: inherit; cursor: pointer; scroll-snap-align: start; }
.dp-d small { font-size: 11px; color: var(--text-weak); font-weight: 600; }
.dp-d b { font-size: 17px; color: var(--text-strong); }
.dp-d.is-we small, .dp-d.is-we b { color: var(--out); }
.dp-d.is-on { background: var(--out); border-color: var(--out); }
.dp-d.is-on small, .dp-d.is-on b { color: #fff; }
.dp-d.is-far { flex-basis: 52px; }
.dp-more { position: relative; flex: 0 0 64px; height: 60px; border-radius: 14px; border: 1px dashed var(--gray-300); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-weak); cursor: pointer; overflow: hidden; }
.dp-more svg { width: 16px; height: 16px; }
.dp-more__in { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: none; }
.dp-more__in::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }/* 한마디 */

.cs-qp { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cs-qp:empty { display: none; }
.cs-qp__b { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--gray-300); background: var(--surface); font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.cs-qp__b.is-on { border-style: solid; border-color: var(--text-strong); color: var(--text-strong); font-weight: 600; }
.cs-ta__w { position: relative; }
.cs-ta { width: 100%; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 22px; font-family: inherit; font-size: 14.5px; line-height: 1.6; color: var(--text-strong); background: var(--surface); resize: none; outline: none; box-sizing: border-box; }
.cs-ta:focus { border-color: var(--text-weak); }
.cs-ta__n { position: absolute; right: 12px; bottom: 8px; font-size: 11.5px; color: var(--text-weak); }
.cs-safe { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text-weak); margin: 14px 0 6px; }
.cs-safe svg { width: 14px; height: 14px; color: var(--money); flex-shrink: 0; margin-top: 2px; }/* 상대·일 카드 */

.cs-card { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface-sub); margin-top: 14px; }
.cs-av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.cs-av--out { background: #FF922B; }
.cs-av--money { background: #20C997; }
.cs-card__b { flex: 1; min-width: 0; }
.cs-card__b b { display: flex; align-items: center; gap: 5px; font-size: 15px; color: var(--text-strong); }
.cs-card__b small { display: block; font-size: 12.5px; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-card__r { text-align: right; flex-shrink: 0; }
.cs-card__r b { display: block; font-size: 17px; color: var(--money); }
.cs-card__r small { font-size: 12px; color: var(--text-weak); }
.cs-pl { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); margin-top: 10px; }
.cs-pl svg { width: 14px; height: 14px; color: var(--out); flex-shrink: 0; }/* 아래 버튼 줄 */

.cs__f { display: flex; align-items: center; gap: 12px; padding: 12px 22px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border-light); background: var(--surface); }
.cs-sum { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; color: var(--text-weak); line-height: 1.4; }
.cs-sum:empty { display: none; }
.cs-sum b { font-size: 13.5px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-sum span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-go { flex: 0 0 52%; height: 52px; border-radius: 14px; border: none; color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.cs-go--out { background: var(--out); }
.cs-go--money { background: var(--money); }
.cs-go:disabled { opacity: .35; cursor: default; }
.cs-sum:empty + .cs-go, .cs-go:only-child { flex: 1 1 auto; }
@media (max-width: 599px) {
  .cs__b { padding: 18px 18px 6px; }
  .cs__f { padding: 10px 18px max(14px, env(safe-area-inset-bottom)); }}/* ===== 내 활동 A1 — 밑줄 탭 + 상자 없는 줄 목록 ===== */

.tab-connect__inner.ma { max-width: 720px; margin: 0 auto; }
.ma-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ma-bar h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.ma-back { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--surface-sub); color: var(--text-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.ma-back svg { width: 20px; height: 20px; }
.ma-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border-light); margin-bottom: 2px; }
.ma-tab { position: relative; border: none; background: none; font-family: inherit; padding: 10px 0; font-size: 15px; font-weight: 600; color: var(--text-weak); cursor: pointer; }
.ma-tab em { font-style: normal; font-size: 13px; margin-left: 4px; }
.ma-tab.is-on { color: var(--text-strong); }
.ma-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text-strong); border-radius: 2px; }
.ma-row { display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--border-light); }
.ma-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 16px 0; border: none; background: none; text-align: left; font-family: inherit; color: inherit; cursor: pointer; }
.ma-row__b:hover .ma-t { text-decoration: underline; }
.ma-t { font-size: 16px; line-height: 1.4; color: var(--text-strong); word-break: keep-all; }
.ma-p { font-size: 13.5px; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-ctx { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-weak); min-width: 0; }
.ma-ctx svg { width: 12px; height: 12px; flex-shrink: 0; }
.ma-ctx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-c { font-size: 15px; line-height: 1.55; color: var(--text-strong); word-break: keep-all; overflow-wrap: anywhere; }
.ma-m { display: flex; gap: 10px; font-size: 12.5px; color: var(--text-weak); margin-top: 3px; }
.ma-new { color: var(--out); font-weight: 700; }
.ma-kb { margin-top: 12px; }
.ma-bm { width: 36px; height: 36px; margin-top: 14px; border-radius: 50%; border: none; background: none; color: var(--text-weak); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.ma-bm svg { width: 19px; height: 19px; }
.ma-bm.is-on { color: var(--blue-500); }
.ma-bm.is-on svg { fill: var(--blue-500); }
.ma-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 12px; text-align: center; font-size: 13.5px; color: var(--text-weak); }
.ma-empty svg { width: 28px; height: 28px; margin-bottom: 4px; }
.ma-empty b { font-size: 15px; color: var(--text-strong); }
@media (max-width: 720px) { .ma-bar h1 { font-size: 20px; }}/* ===== 기록 R1 — 밤 카드 + 달력 + 그날 기록 ===== */

.rc-page { max-width: 1080px; margin: 0 auto; }
.rc-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.rc-bar h1 { margin: 0; flex: 1; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.rc-back { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--surface-sub); color: var(--text-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.rc-back svg { width: 20px; height: 20px; }
.rc-share { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.rc-share svg { width: 14px; height: 14px; }
.rc { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }
.rc-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.rc-night { border-radius: 22px; padding: 22px; background: linear-gradient(160deg, #1B2A55, #0E1630); color: #fff; }
.rc-night small { font-size: 13px; opacity: .7; }
.rc-night__big { font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 2px; }
.rc-night__big em { font-style: normal; font-size: 18px; margin-left: 4px; opacity: .85; }
.rc-night__say { font-size: 13.5px; opacity: .85; }
.rc-night__mm { display: flex; gap: 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.rc-night__mm b { display: block; font-size: 20px; color: #fff; }
.rc-night__mm .is-out b { color: #FFA94D; }
.rc-night__cmp { margin-top: 12px; font-size: 13px; font-weight: 600; color: #FFD8A8; }
.rc-night__rv { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.rc-cal-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rc-title { flex: 1; display: flex; align-items: center; gap: 8px; border: none; background: none; font-family: inherit; font-size: 17px; font-weight: 700; color: var(--text-strong); text-align: left; padding: 0; cursor: pointer; }
.rc-title span { font-size: 12px; font-weight: 600; color: var(--blue-500); background: var(--blue-50); border-radius: 999px; padding: 2px 8px; }
.rc-nav { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface-sub); color: var(--text-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rc-nav svg { width: 16px; height: 16px; }
.rc-nav:disabled { opacity: .35; cursor: default; }
.rc-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--text-weak); margin-bottom: 4px; }
.rc-dow span:first-child { color: var(--out); }
.rc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rc-d { position: relative; aspect-ratio: 1 / 1; min-width: 0; border: none; border-radius: 12px; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: inherit; font-size: 13px; color: var(--text-weak); cursor: pointer; padding: 0; }
.rc-d.is-blank { cursor: default; }
.rc-d:not(.is-blank):not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--border); }
.rc-d.is-home { background: #EEF4FF; color: #1B64DA; }
.rc-d.is-out { background: #FFF1E6; color: #D9480F; }
.rc-d.is-none { background: var(--surface-sub); color: var(--gray-400); }
.rc-d.is-future { opacity: .35; cursor: default; }
.rc-d.is-sel { box-shadow: inset 0 0 0 2px var(--text-strong) !important; }
.rc-d.is-today::after { content: '오늘'; position: absolute; top: 4px; right: 6px; font-size: 9.5px; font-weight: 700; color: var(--text-strong); }
.rc-d__e { font-size: 15px; line-height: 1; }
.rc-leg { display: flex; gap: 14px; font-size: 12px; color: var(--text-weak); margin-top: 10px; }
.rc-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.rc-leg i.is-home { background: #DCEAFE; } .rc-leg i.is-out { background: #FFD8B8; } .rc-leg i.is-none { background: var(--gray-100); }
.rc-day { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.rc-day__hint { font-size: 13.5px; color: var(--text-weak); }
.rc-day__h { display: flex; align-items: center; gap: 8px; }
.rc-day__h b { flex: 1; font-size: 15px; color: var(--text-strong); }
.rc-st { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 8px; }
.rc-st.is-home { background: #EEF4FF; color: #1B64DA; } .rc-st.is-out { background: #FFF1E6; color: #D9480F; } .rc-st.is-none { background: var(--surface-sub); color: var(--text-weak); }
.rc-day__q { font-size: 13.5px; color: var(--text-weak); margin-top: 6px; }
.rc-moods { display: flex; gap: 6px; margin-top: 10px; }
.rc-md { flex: 1; height: 58px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: inherit; font-size: 11.5px; color: var(--text); cursor: pointer; }
.rc-md span { font-size: 20px; line-height: 1.1; }
.rc-md.is-on { border-color: var(--text-strong); background: var(--surface-sub); font-weight: 700; color: var(--text-strong); }
.rc-line { display: flex; gap: 8px; margin-top: 10px; }
.rc-in { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); padding: 0 14px; font-family: inherit; font-size: 14.5px; color: var(--text-strong); outline: none; }
.rc-in:focus { border-color: var(--text-weak); }
.rc-save { height: 46px; padding: 0 16px; border-radius: 12px; border: none; background: var(--text-strong); color: var(--surface); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.rc-note { margin: 8px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--text-strong); word-break: keep-all; }
.rc-note.is-empty { color: var(--gray-400); }
.rc-note__e { font-size: 18px; margin-right: 6px; }
.rc-memo { margin-top: 10px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: none; background: #FFF6F0; font-family: inherit; font-size: 13px; color: #C2410C; text-align: left; cursor: pointer; }
.rc-memo svg { width: 15px; height: 15px; flex-shrink: 0; }
.rc-memo span { flex: 1; min-width: 0; }
.rc-memo b { font-weight: 700; flex-shrink: 0; }
html[data-theme="dark"] .rc-d.is-home { background: #172636; color: #74C0FC; }
html[data-theme="dark"] .rc-d.is-out { background: #3A2414; color: #FFA94D; }
html[data-theme="dark"] .rc-st.is-home { background: #172636; color: #74C0FC; }
html[data-theme="dark"] .rc-st.is-out { background: #3A2414; color: #FFA94D; }
html[data-theme="dark"] .rc-memo { background: #3A2414; color: #FFA94D; }
@media (max-width: 860px) {
  .rc { grid-template-columns: 1fr; gap: 20px; }
  .rc-side { position: static; }}
@media (max-width: 720px) {
  .rc-bar h1 { font-size: 20px; }
  .rc-d { border-radius: 10px; font-size: 12px; }
  .rc-d__e { font-size: 13px; }
  .rc-d.is-today::after { content: ''; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-strong); }
  .rc-md { height: 54px; }}/* ===== 알림 N1 · 차단 B1 — 줄 + 토글, 그 자리 확인 ===== */

.ns { max-width: 720px; margin: 0 auto; }
.ns-tg { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--gray-300); flex-shrink: 0; transition: background .15s; }
.ns-tg::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.ns-tg.is-on { background: var(--money); }
.ns-tg.is-on::after { left: 21px; }
.ns-pause { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: none; background: var(--surface-sub); font-family: inherit; text-align: left; cursor: pointer; color: var(--text-strong); }
.ns-pause > svg { width: 20px; height: 20px; color: var(--purple, #7048E8); flex-shrink: 0; }
.ns-pause__t { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.ns-pause__t small { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-weak); }
.ns-pause.is-on { background: #F3F0FF; }
.ns-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ns-pick__b { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.ns-pick__b:hover { border-color: var(--text-strong); }
.ns-sec { font-size: 13px; font-weight: 700; color: var(--text-weak); margin: 26px 0 2px; }
.ns-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 0; border: none; border-bottom: 1px solid var(--border-light); background: none; font-family: inherit; text-align: left; cursor: pointer; color: var(--text-strong); }
.ns-row__t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.ns-row__t small { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-weak); margin-top: 1px; }
.ns-row.is-dim { opacity: .45; }
.ns-qt { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--surface-sub); }
.ns-tm { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ns-tm small { font-size: 12px; color: var(--text-weak); }
.ns-step { display: flex; align-items: center; gap: 8px; }
.ns-step b { min-width: 84px; text-align: center; font-size: 17px; color: var(--text-strong); }
.ns-step__b { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; }
.ns-qt__arr { color: var(--text-weak); font-size: 18px; }
.ns-day { position: relative; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 10px; background: var(--gray-100); }
.ns-day i { position: absolute; top: 0; bottom: 0; background: #7048E8; opacity: .7; }
.ns-day__l { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-weak); margin-top: 4px; }
.ns-foot { font-size: 12.5px; color: var(--text-weak); margin-top: 18px; }
.bk-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--text-weak); padding: 12px 14px; border-radius: 14px; background: var(--surface-sub); margin-bottom: 8px; }
.bk-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.bk-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
.bk-av { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100); color: var(--text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.bk-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.bk-t small { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-row.is-undone .bk-av, .bk-row.is-undone .bk-t { opacity: .5; }
.bk-btn { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; flex-shrink: 0; }
.bk-ask { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12.5px; color: var(--text-weak); }
.bk-yes { height: 32px; padding: 0 12px; border-radius: 999px; border: none; background: var(--text-strong); color: var(--surface); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bk-no { height: 32px; padding: 0 8px; border: none; background: none; font-family: inherit; font-size: 12.5px; color: var(--text-weak); cursor: pointer; }
.bk-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 12px; text-align: center; font-size: 13.5px; color: var(--text-weak); }
.bk-empty svg { width: 28px; height: 28px; margin-bottom: 4px; }
.bk-empty b { font-size: 15px; color: var(--text-strong); }
html[data-theme="dark"] .ns-pause.is-on { background: #231C3D; }
@media (max-width: 720px) { .ns-step b { min-width: 70px; font-size: 15px; } .ns-qt { padding: 12px 8px; gap: 4px; }}
.ns-pick[hidden] { display: none; }
@media (min-width: 721px) { .rc-d { aspect-ratio: auto; height: 64px; }}/* 알림: 설정 바로가기 · 쉬는 중 한 줄 */

.tab-noti .noti-page__gear { width: 34px; height: 34px; border-radius: 50%; border: none; background: none; color: var(--text-weak); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-left: 4px; }
.tab-noti .noti-page__gear:hover { background: var(--surface-sub); color: var(--text-strong); }
.tab-noti .noti-page__gear svg { width: 18px; height: 18px; }
.noti-pause { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #F3F0FF; color: #5F3DC4; font-size: 13.5px; font-weight: 600; margin: 0 0 14px; }
.noti-pause svg { width: 17px; height: 17px; flex-shrink: 0; }
.noti-pause span { flex: 1; min-width: 0; }
.noti-pause__on { height: 30px; padding: 0 12px; border-radius: 999px; border: none; background: #fff; color: #5F3DC4; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
html[data-theme="dark"] .noti-pause { background: #231C3D; color: #B197FC; }
html[data-theme="dark"] .noti-pause__on { background: #2E2650; color: #D0BFFF; }/* ===== 로그인 창 G1 — 밤하늘 카드 + 소셜 버튼 ===== */

.modal.lg { max-width: 400px; padding: 0; overflow: hidden auto; }
.lg-sky { position: relative; min-height: 190px; padding: 22px 24px; background: linear-gradient(170deg, #1B2A55, #0E1630); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.lg-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .7; }
.lg-moon { position: absolute; top: 26px; right: 60px; width: 34px; height: 34px; border-radius: 50%; box-shadow: -8px 6px 0 0 #FFE8A3; }
.lg-win { position: absolute; right: 30px; bottom: -6px; width: 86px; height: 70px; background: #24345F; border-radius: 10px 10px 0 0; }
.lg-win::before { content: ''; position: absolute; left: 14px; top: 16px; width: 24px; height: 24px; border-radius: 4px; background: #FFD27A; box-shadow: 34px 0 0 #FFD27A; opacity: .9; }
.lg-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; }
.lg-x svg { width: 16px; height: 16px; }
.lg-why { position: relative; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: calc(100% - 100px); font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 5px 11px; margin-bottom: 10px; line-height: 1.4; }
.lg-why svg { width: 13px; height: 13px; flex-shrink: 0; }
.lg-t { position: relative; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.lg-s { position: relative; font-size: 13px; opacity: .75; margin-top: 2px; }
.lg-in { padding: 20px 22px max(20px, env(safe-area-inset-bottom)); }
.lg-btns { display: flex; flex-direction: column; gap: 8px; }
.lg .auth-sb { height: 52px; border-radius: 14px; font-size: 15.5px; }
.lg .auth-sb__mk { position: absolute; left: 18px; }
.lg .auth-sb__last { top: -9px; right: 12px; transform: none; background: var(--text-strong); color: var(--surface); padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.auth-sb.is-soon { opacity: .45; }
.auth-sb.is-soon:hover { opacity: .55; }
.auth-sb__soon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.12); }
.auth-sb--naver .auth-sb__soon { background: rgba(255,255,255,.25); }
.auth-sb:disabled { opacity: .6; cursor: progress; }
.lg-safe { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text-weak); margin-top: 14px; text-align: left; }
.lg-safe svg { width: 14px; height: 14px; color: var(--money); flex-shrink: 0; margin-top: 2px; }
.lg-foot { font-size: 11.5px; color: var(--text-weak); text-align: center; margin-top: 12px; line-height: 1.6; }/* ===== 약관·개인정보 D1 — 요약 3개 + 목차 + 상자 없는 본문 ===== */

.dc { max-width: 1080px; margin: 0 auto; }
.dc-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.dc-seg { display: inline-flex; background: var(--surface-sub); border-radius: 12px; padding: 3px; }
.dc-seg button { height: 34px; padding: 0 14px; border-radius: 9px; border: none; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-weak); cursor: pointer; }
.dc-seg button.is-on { background: var(--surface); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); cursor: default; }
.dc-upd { margin-left: auto; font-size: 12.5px; color: var(--text-weak); }
.dc-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 26px; }
.dc-sum__i { display: flex; gap: 10px; align-items: flex-start; border-radius: 16px; background: var(--surface-sub); padding: 14px 16px; }
.dc-sum__i svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--text-strong); }
.dc-sum__i b { display: block; font-size: 14px; color: var(--text-strong); }
.dc-sum__i small { font-size: 12.5px; color: var(--text-weak); line-height: 1.5; }
.dc-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
.dc-toc { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; display: flex; flex-direction: column; border-left: 2px solid var(--border-light); }
.dc-toc__a { text-align: left; padding: 6px 12px; margin-left: -2px; border: none; border-left: 2px solid transparent; background: none; font-family: inherit; font-size: 13px; color: var(--text-weak); cursor: pointer; }
.dc-toc__a:hover { color: var(--text-strong); }
.dc-toc__a.is-on { color: var(--text-strong); font-weight: 700; border-left-color: var(--text-strong); }
.dc-draft { font-size: 12.5px; color: #8F5D00; background: #FFF9DB; border-radius: 10px; padding: 8px 12px; margin-bottom: 18px; }
.dc-h { font-size: 16px; font-weight: 700; color: var(--text-strong); margin: 26px 0 8px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.dc-art .dc-draft + .dc-h { margin-top: 0; }
.dc-p, .dc-ul li { font-size: 15px; line-height: 1.8; color: var(--text); margin: 0 0 6px; word-break: keep-all; }
.dc-ul { padding-left: 18px; margin: 0 0 6px; }
.dc mark.doc__fill { background: #FFF3BF; color: #5C4500; border-radius: 4px; padding: 0 3px; }
html[data-theme="dark"] .dc-draft { background: #3A3214; color: #FFE066; }
html[data-theme="dark"] .dc mark.doc__fill { background: #5C4A12; color: #FFF3BF; }
@media (max-width: 860px) {
  .dc-body { grid-template-columns: 1fr; gap: 0; }
  .dc-toc { display: none; }}
@media (max-width: 720px) {
  .dc-sum { grid-template-columns: 1fr; }
  .dc-upd { display: none; }
  .dc-seg button { padding: 0 11px; font-size: 13.5px; }}
@media (max-width: 720px) { .dc-sum { gap: 6px; margin-bottom: 20px; } .dc-sum__i { padding: 10px 14px; border-radius: 12px; }}/* ===== 검색 Q1 — 큰 밑줄 입력 + 종류별 결과 ===== */

.tab-search__inner.sq { max-width: 760px; margin: 0 auto; }
.sq-bar { display: flex; align-items: center; gap: 10px; }
.sq-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--text-strong); padding: 6px 2px 10px; }
.sq-box > svg { width: 20px; height: 20px; color: var(--text); flex-shrink: 0; }
.sq-in { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: 20px; font-weight: 600; color: var(--text-strong); padding: 0; }
.sq-in::-webkit-search-cancel-button { display: none; }
.sq-in::placeholder { color: var(--gray-400); font-weight: 500; }
.sq-clr { width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--gray-300); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.sq-clr[hidden] { display: none; }
.sq-clr svg { width: 13px; height: 13px; }
.sq-lb { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text-weak); margin: 24px 0 10px; }
.sq-lb__btn { border: none; background: none; font-family: inherit; font-size: 12.5px; color: var(--text-weak); cursor: pointer; }
.sq-none { font-size: 13px; color: var(--text-weak); }
.sq-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sq-chip { display: inline-flex; align-items: center; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 13.5px; color: var(--text); }
.sq-chip.is-plain { gap: 6px; padding: 0 13px; cursor: pointer; }
.sq-chip.is-plain svg { width: 13px; height: 13px; color: var(--text-weak); }
.sq-chip__t { border: none; background: none; font-family: inherit; font-size: 13.5px; color: var(--text); padding: 0 4px 0 13px; height: 100%; cursor: pointer; }
.sq-chip__x { width: 26px; height: 26px; margin-right: 4px; border-radius: 50%; border: none; background: none; color: var(--text-weak); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sq-chip__x:hover { background: var(--surface-sub); }
.sq-chip__x svg { width: 13px; height: 13px; }
.sq-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sq-qk { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; border: none; background: var(--surface-sub); font-family: inherit; text-align: left; cursor: pointer; color: var(--text-strong); }
.sq-qk b { display: block; font-size: 14px; }
.sq-qk small { font-size: 12px; color: var(--text-weak); }
.sq-qk__ic { width: 36px; height: 36px; border-radius: 11px; background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sq-qk__ic svg { width: 18px; height: 18px; }
.sq-qk__ic.is-voice, .sq-sec__h.is-voice svg { color: #E03131; }
.sq-qk__ic.is-out, .sq-sec__h.is-out svg { color: var(--out); }
.sq-qk__ic.is-work, .sq-sec__h.is-work svg { color: var(--money); }
.sq-sec__h.is-board svg { color: #7048E8; }
.sq-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border-light); margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.sq-tab { position: relative; padding: 10px 0; border: none; background: none; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--text-weak); cursor: pointer; white-space: nowrap; }
.sq-tab em { font-style: normal; font-size: 12.5px; margin-left: 3px; }
.sq-tab.is-on { color: var(--text-strong); }
.sq-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text-strong); }
.sq-tab.is-zero { opacity: .4; cursor: default; }
.sq-sec { margin-top: 22px; }
.sq-sec__h { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.sq-sec__h svg { width: 15px; height: 15px; }
.sq-sec__h b { font-size: 14px; color: var(--text-strong); }
.sq-sec__h em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--text-weak); }
.sq-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 0; border: none; border-bottom: 1px solid var(--border-light); background: none; font-family: inherit; text-align: left; cursor: pointer; color: inherit; }
.sq-row:hover .sq-row__t { text-decoration: underline; }
.sq-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sq-row__t { font-size: 15px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-row__m { font-size: 12.5px; color: var(--text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-row__r { flex-shrink: 0; text-align: right; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.sq-row__r small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-weak); }
.sq-lead { width: 40px; height: 40px; flex-shrink: 0; }
.sq-lead--voice { border-radius: 50%; background: linear-gradient(160deg, #1B2A55, #0E1630); color: #FF8787; display: flex; align-items: center; justify-content: center; }
.sq-lead--voice svg { width: 18px; height: 18px; }
.sq-hl { background: #FFF3BF; color: inherit; border-radius: 3px; padding: 0 1px; }
.sq-more { display: block; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--blue-500); padding: 10px 0; cursor: pointer; }
.sq-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 50px 0; font-size: 14px; color: var(--text-weak); }
.sq-empty b { font-size: 16px; color: var(--text-strong); }
.sq-empty .sq-chips { justify-content: center; margin-top: 10px; }
html[data-theme="dark"] .sq-hl { background: #5C4A12; color: #FFF3BF; }
@media (max-width: 720px) {
  .sq-in { font-size: 17px; }
  .sq-quick { grid-template-columns: 1fr; }}
html[data-theme="dark"] .vf-done__ic { background: #12352B; color: #63E6BE; }
.empty__btn { margin-top: 14px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-strong); cursor: pointer; }
.empty__btn:hover { background: var(--surface-sub); }
.sb-hot-empty { font-size: 13px; color: var(--text-weak); padding: 8px 0 14px; }
/* 댓글: ⋮ 메뉴 · @이름 · 수정됨 · 삭제됨 · 고치기 */
.pd-cm__menu { margin-left: auto; }
.tab-connect .pd-cm__kebab { padding: 4px; margin: -4px -4px -4px 0; opacity: .55; }
.tab-connect .pd-cm__kebab:hover { opacity: 1; }
.tab-connect .pd-cm__kebab svg { width: 16px; height: 16px; }
.pd-at { color: var(--blue-500); font-weight: 600; }
.pd-edited { font-size: 11.5px; color: var(--text-weak); }
.pd-cm__t.is-deleted { color: var(--text-weak); font-size: 14px; padding: 2px 0 6px; }
.pd-cm.is-reply > .pd-cm__b { flex: 1; min-width: 0; }
.pd-ed { display: flex; align-items: flex-end; gap: 6px; margin-top: 6px; }
.pd-ed__in { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 7px 12px; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--text-strong); resize: none; overflow-y: hidden; height: 38px; max-height: 160px; }
.pd-ed__in:focus { outline: none; border-color: var(--blue-500); }
.pd-ed__btns { display: flex; gap: 6px; flex-shrink: 0; }
.pd-ed__btns button { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.pd-ed__btns .pd-ed__save { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }
.pd-in { overflow-y: hidden; }
.pd-in.is-scroll { overflow-y: auto; }
/* 이름 정하기 (처음 로그인) */
.ns-row { display: flex; gap: 8px; margin: 18px 0 4px; }
.ns-in { flex: 1; min-width: 0; height: 48px; border: 1.5px solid var(--border); border-radius: 12px; padding: 0 14px; font-family: inherit; font-size: 17px; font-weight: 700; color: var(--text-strong); background: var(--surface); }
.ns-in:focus { outline: none; border-color: var(--blue-500); }
.ns-re { display: inline-flex; align-items: center; gap: 5px; height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-sub); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.ns-re svg { width: 15px; height: 15px; }
.ns-err { min-height: 18px; font-size: 12.5px; color: #E03131; margin-bottom: 8px; }
.m1-pf__setname { border: none; background: none; padding: 0; font-family: inherit; color: var(--blue-500); cursor: pointer; text-align: left; }
.ek-bar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ek-bar__btn svg { width: 18px; height: 18px; }
.ek-bar__btn:disabled { opacity: .55; cursor: default; }
.ek-bar__st { font-style: normal; font-weight: 700; margin-left: 6px; color: #0CA678; }
.ek-bar__st.is-reject, .ek-bar__st.is-done { color: var(--text-weak); }
#user-initial svg, .m1-pf__av svg { width: 55%; height: 55%; }
.ek-edited { font-size: 12px; font-weight: 500; color: var(--text-weak); }
/* 카카오맵 핀: 꼬리 끝이 정확히 그 장소에 오게 */
.opin-wrap--k { transform: translate(-13px, -6px); cursor: pointer; }
.out-me-dot { width: 16px; height: 16px; border-radius: 50%; background: #3182F6; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
/* 동행 올리기 — 장소 검색 결과 */
.cs-place { position: relative; }
.cs-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; max-height: 272px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.cs-res[hidden] { display: none; }
.cs-res__b { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; border: none; border-bottom: 1px solid var(--border); background: none; font-family: inherit; text-align: left; cursor: pointer; }
.cs-res__b:last-child { border-bottom: none; }
.cs-res__b:hover, .cs-res__b:focus-visible { background: var(--surface-sub); outline: none; }
.cs-res__b b { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.cs-res__b small { font-size: 12px; color: var(--text-weak); }
.cs-res__e { padding: 12px; font-size: 12.5px; color: var(--text-weak); }
.cs-picked { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--text-weak); }
.cs-picked svg { width: 13px; height: 13px; color: var(--out); flex-shrink: 0; }
.cs-picked.is-warn svg { color: var(--gray-400); }
/* 동행 탭 모바일: 아래 시트 접기/펼치기 · 끌어내려도 새로고침 안 되게 · 현 지도에서 검색 위치 */
@media (max-width: 900px) {
  .tab-out .ob { --sheet-h: 58px; overscroll-behavior: none; }
  .tab-out .ob.is-sheet-open { --sheet-h: 46%; }
  .tab-out .ob__sheet { height: var(--sheet-h); transition: height .22s ease; overflow: visible; }
  .tab-out .ob:not(.is-sheet-open) .ob__sheet .ob__list { visibility: hidden; }
  .tab-out .ob__sheet .ob__list { overscroll-behavior: contain; }
  .ob-sheet__head { touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
  .ob-peek { bottom: calc(var(--sheet-h) + 12px); transition: bottom .22s ease; }
  .tab-out .out-research { top: auto; bottom: calc(var(--sheet-h) + 16px); transition: opacity .18s, transform .18s, bottom .22s ease; }
}

/* 모바일 지도: 확대·축소 버튼 숨김 (두 손가락 확대) */
@media (max-width: 900px) { .leaflet-control-zoom { display: none; } }

/* 수다 글|음성 탭: 누르기 쉽게 넓게 */
.bsw { gap: 4px; }
.bsw__tab { min-width: 76px; justify-content: center; padding: 11px 16px 13px; font-size: 16px; }
@media (max-width: 900px) { .bsw { gap: 2px; } .bsw__tab { min-width: 68px; padding: 11px 14px 13px; } }

/* 사람 카드 (심부름·동행에서 이름 누르면) */
.pc-trig { cursor: pointer; border-radius: 10px; }
.pc-trig:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.ek-who__p { display: inline-flex; align-items: center; gap: 6px; }
.ek-who__p:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ek-cand__p { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ek-cand__p:hover b, .comp-req__top.pc-trig:hover .comp-req__name { text-decoration: underline; text-underline-offset: 3px; }
.cd-host.pc-trig { transition: background .15s; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.cd-host.pc-trig:hover { background: var(--surface-sub); }
.cd-host__go { margin-left: auto; color: var(--text-weak); display: inline-flex; }
.cd-host__go svg { width: 18px; height: 18px; }
.pc .cs__b { padding-bottom: 22px; }
.pc__head { display: flex; align-items: center; gap: 12px; }
.pc__head .cs-x { margin-left: auto; align-self: flex-start; }
.pc-av { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 17px; }
.pc-av--1 { background: linear-gradient(135deg,#748FFC,#4263EB); }
.pc-av--2 { background: linear-gradient(135deg,#63E6BE,#12B886); }
.pc-av--3 { background: linear-gradient(135deg,#FFA94D,#F76707); }
.pc-av--4 { background: linear-gradient(135deg,#B197FC,#7048E8); }
.pc__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc__who b { display: inline-flex; align-items: center; gap: 5px; font-size: 18px; color: var(--text-strong); }
.pc__area { font-size: 13px; color: var(--text-weak); }
.pc__area:empty { display: none; }
.pc__load { display: flex; align-items: center; gap: 8px; padding: 28px 0 8px; color: var(--text-weak); font-size: 14px; }
.pc__load svg { width: 16px; height: 16px; }
.pc__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pc__stats span { font-size: 13px; color: var(--text-weak); background: var(--gray-100); border-radius: 999px; padding: 5px 11px; }
.pc__stats b { color: var(--text-strong); }
.pc__intro { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-strong); white-space: pre-line; word-break: keep-all; }
.pc__intro.is-empty { color: var(--text-weak); font-size: 14px; }
.pc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pc__tags span { font-size: 12.5px; font-weight: 600; color: var(--blue-500); background: #EEF4FF; border-radius: 999px; padding: 4px 10px; }
html[data-theme="dark"] .pc__tags span { background: #17263F; color: #8FB8F2; }
.pc__sub { margin-top: 22px; padding-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--text-weak); border-bottom: 1px solid var(--border-light); }
.pc__none { padding: 16px 0 4px; font-size: 14px; color: var(--text-weak); }
.pc__list { display: flex; flex-direction: column; }
.pc__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; text-align: left; border-bottom: 1px solid var(--border-light); color: var(--text-weak); }
.pc__row:last-child { border-bottom: 0; }
.pc__row:hover .pc__rb b { text-decoration: underline; text-underline-offset: 3px; }
.pc__row > svg { width: 16px; height: 16px; flex: none; }
.pc__ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--gray-100); color: var(--text-strong); }
.pc__ic svg { width: 16px; height: 16px; }
.pc__rb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc__rb b { font-size: 14.5px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc__rb small { font-size: 12.5px; color: var(--text-weak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc__note { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 12.5px; color: var(--text-weak); }
.pc__note svg { width: 14px; height: 14px; flex: none; }
.cs-sug[hidden] { display: none; }

/* 내 위치 찾는 중: 버튼 아이콘이 돌아요 */
.tab-out .out-locate.is-busy svg { animation: locspin 1s linear infinite; }
@keyframes locspin { to { transform: rotate(360deg); } }
/* 지도 안에 동행이 없을 때: 다른 곳 안내 */
.out-away { padding: 28px 20px 16px; display: flex; flex-direction: column; align-items: stretch; }
.out-away__t { font-size: 15px; font-weight: 700; color: var(--text-strong); text-align: center; }
.out-away__s { margin-top: 4px; font-size: 13px; color: var(--text-weak); text-align: center; }
.out-away__s b { color: var(--out); }
.out-away__fit { align-self: center; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--text-strong); color: var(--surface); font-size: 13.5px; font-weight: 600; }
.out-away__fit svg { width: 15px; height: 15px; }
.out-away__h { margin-top: 26px; padding-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-weak); border-bottom: 1px solid var(--border-light); }
.out-away__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; text-align: left; border-bottom: 1px solid var(--border-light); }
.out-away__row:last-child { border-bottom: 0; }
.out-away__row:hover .out-away__rb b { text-decoration: underline; text-underline-offset: 3px; }
.out-away__row .ob-ci { flex: none; }
.out-away__rb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.out-away__rb b { font-size: 14.5px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-away__rb small { font-size: 12.5px; color: var(--text-weak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-away__d { flex: none; font-size: 13px; font-weight: 700; color: var(--text-strong); }
/* 사람 카드: 심부름 · 동행 나눔 */
.pc__sub em { margin-left: 5px; font-style: normal; color: var(--text-strong); }
.pc__ic--work { background: #E6F7EE; color: #0E9F6E; }
.pc__ic--out { background: #FFF1E6; color: #F76707; }
html[data-theme="dark"] .pc__ic--work { background: #12302A; color: #5FD4A4; }
html[data-theme="dark"] .pc__ic--out { background: #3A2414; color: #FFA94D; }

/* ===== 동행 지도: 핀 위 카드 (PC = 정보 카드 · 모바일 = 작은 말풍선) ===== */
.opop-anchor { position: relative; width: 0; height: 0; overflow: visible; }
.leaflet-marker-icon.opop-anchor { background: none; border: 0; }
.opop { position: absolute; left: 0; bottom: 40px; transform: translateX(-50%); background: var(--surface); color: var(--text-strong); box-shadow: 0 12px 36px rgba(0,0,0,.2); text-align: left; animation: opopUp .18s ease-out; cursor: default; }
.opop::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0; }
@keyframes opopUp { from { opacity: 0; transform: translate(-50%, 8px); } }
.opop--card { width: 320px; border-radius: 16px; padding: 16px 16px 14px; }
.opop__x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--text-weak); }
.opop__x:hover { background: var(--surface-sub); }
.opop__x svg { width: 16px; height: 16px; }
.opop__t { display: flex; align-items: baseline; gap: 6px; padding-right: 28px; min-width: 0; }
.opop__t b { font-size: 16.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opop__t span { flex: none; font-size: 12px; font-weight: 700; color: var(--out); }
.opop__m { margin-top: 6px; font-size: 13px; color: var(--text); }
.opop__q { margin-top: 4px; font-size: 13px; color: var(--text-weak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opop__who { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); font-size: 13px; min-height: 39px; }
.opop__who small { color: var(--text-weak); }
.opop__av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 700; }
.opop__av.comp-av--1 { background: linear-gradient(135deg,#748FFC,#4263EB); }
.opop__av.comp-av--2 { background: linear-gradient(135deg,#63E6BE,#12B886); }
.opop__av.comp-av--3 { background: linear-gradient(135deg,#FFA94D,#F76707); }
.opop__av.comp-av--4 { background: linear-gradient(135deg,#B197FC,#7048E8); }
.opop__av.comp-av--o { background: linear-gradient(135deg,#4DABF7,#1B64DA); }
.opop__mine { font-size: 12.5px; font-weight: 700; color: var(--out); background: var(--out-50); border-radius: 6px; padding: 3px 8px; }
.opop__btns { display: flex; gap: 6px; margin-top: 12px; }
.opop__btn { flex: 1; height: 40px; border-radius: 10px; font-size: 14px; font-weight: 700; background: var(--gray-100); color: var(--text-strong); }
.opop__btn:hover { filter: brightness(.97); }
.opop__btn.is-out { background: var(--out); color: #fff; }
.opop__btn.is-dark { background: var(--text-strong); color: var(--surface); }
.opop__btn.is-done { background: var(--gray-100); color: var(--text-weak); cursor: default; }
.opop--mini { display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(280px, 78vw); padding: 8px 10px 8px 8px; border-radius: 14px; cursor: pointer; }
.opop__th { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; }
.opop__th svg { width: 18px; height: 18px; }
.opop__mb { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.opop__mb b { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opop__mb small { font-size: 12px; color: var(--text-weak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opop--mini > svg { width: 18px; height: 18px; color: var(--text-weak); flex: none; }
.ob-peek { display: none !important; }
/* 내 심부름 탭: 할 일 있으면 주황 점 */
.mr-tab__dot { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #F76707; }
.mr-tab.is-hot b { color: var(--text-strong); }
.mr-tabs { margin-bottom: 14px; }
@media (max-width: 900px) { .mr-tab span { font-size: 12px; } .mr-tab__dot { top: 10px; right: 10px; } }
/* 내 동행: 내가 올린 동행 카드 (받은 신청이 아래에 펼쳐짐) */
.tab-out .comp-reqtab { position: relative; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tab-out .comp-reqtab em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--text-weak); }
.tab-out .comp-reqtab.is-active em { color: inherit; }
.comp-reqtab__dot { width: 6px; height: 6px; border-radius: 50%; background: #F76707; margin-left: -1px; align-self: flex-start; margin-top: 10px; }
@media (max-width: 420px) { .tab-out .comp-reqtabs { gap: 12px; } .tab-out .comp-reqtab { font-size: 13.5px; } }
.cm-post { border: 1px solid var(--border-light); border-radius: 16px; margin-bottom: 12px; background: var(--surface); overflow: hidden; }
.cm-post.is-hot { border-color: #FFC9A3; box-shadow: 0 0 0 3px var(--out-50); }
.cm-post__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 14px; cursor: pointer; }
.cm-post__head:hover .cm-post__b b { text-decoration: underline; text-underline-offset: 3px; }
.cm-post__head > svg { width: 16px; height: 16px; color: var(--text-weak); flex: none; }
.cm-post__ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; }
.cm-post__ic svg { width: 18px; height: 18px; }
.cm-post__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-post__b b { font-size: 15px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-post__b small { font-size: 12.5px; color: var(--text-weak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-post__tag { flex: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 9px; }
.cm-post__tag.is-hot { background: #F76707; color: #fff; }
.cm-post__tag.is-ok { background: #E6F7EE; color: #0E9F6E; }
.cm-post__tag.is-mute { background: var(--gray-100); color: var(--text-weak); }
html[data-theme="dark"] .cm-post__tag.is-ok { background: #12302A; color: #5FD4A4; }
.cm-post__req { margin: 0 12px 12px !important; }
.cm-post__foot { padding: 0 14px 14px; }
.cm-post__note { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--gray-100); font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.cm-post__note svg { width: 15px; height: 15px; }
.cm-post__wait { padding: 0 14px 14px; font-size: 13px; color: var(--text-weak); }
.comp-mine__add { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--text-strong); color: var(--surface); font-size: 13.5px; font-weight: 700; }
.comp-mine__add svg { width: 15px; height: 15px; }
/* 동행 상세: 점 3개 메뉴 (커버 오른쪽 위) */
.cd-kebab-wrap { position: absolute; top: 16px; right: 16px; z-index: 3; }
.cd-kebab { width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; display: flex; align-items: center; justify-content: center; }
.cd-kebab svg { width: 19px; height: 19px; }
.cd-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 132px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.cd-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text); text-align: left; }
.cd-menu__item:hover { background: var(--surface-sub); }
.cd-menu__item svg { width: 15px; height: 15px; color: var(--text-weak); }
.cd-menu__item.is-danger, .cd-menu__item.is-danger svg { color: #E03131; }
/* 골라서 지우기 */
.sel-toggle { margin-left: auto; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text-strong); }
.sel-toggle.is-on { background: var(--text-strong); color: var(--surface); border-color: var(--text-strong); }
.sel-line { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.ma-bar .sel-toggle { margin-left: auto; }
.sel-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-bottom: 1px solid var(--border-light); border-radius: 10px; cursor: pointer; }
.sel-row:hover { background: var(--surface-sub); }
.sel-row.is-on { background: #F3F0FF; }
html[data-theme="dark"] .sel-row.is-on { background: #221D3A; }
.sel-row > :last-child { flex: 1; min-width: 0; pointer-events: none; }
.sel-row .ma-row__b, .sel-row .mr-row__b, .sel-row .cm-post__head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0; text-align: left; }
.sel-row .cm-post__head { flex-direction: row; align-items: center; gap: 12px; }
.sel-chk { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid #C5CAD1; display: grid; place-items: center; color: transparent; background: var(--surface); }
.sel-chk svg { width: 14px; height: 14px; stroke-width: 3; }
.sel-chk.is-on { background: #5B4BDB; border-color: #5B4BDB; color: #fff; }
.sel-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
.sel-bar__in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 20px; }
.sel-bar__all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.sel-bar__n { font-size: 13.5px; color: var(--text-weak); }
.sel-bar__n b { color: #5B4BDB; margin-right: 1px; }
.sel-bar__del { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 10px; background: #F03E3E; color: #fff; font-size: 14px; font-weight: 700; }
.sel-bar__del svg { width: 15px; height: 15px; }
.sel-bar__del:disabled { background: #FFC9C9; cursor: default; }
@media (max-width: 900px) { .sel-bar { bottom: var(--tabbar-h, 60px); } .sel-bar__in { padding: 10px 16px; } }
.page:has(.sel-bar) { padding-bottom: 90px; }

/* 확인 팝업 (삭제 · 탈퇴): 여백 넉넉하게 */
.modal.confirm-modal, .modal.me-modal { max-width: 360px; padding: 32px 24px max(22px, env(safe-area-inset-bottom)); }
.confirm__icon, .me-modal__icon { width: 56px; height: 56px; margin: 0 auto 18px; flex: none; }
.confirm__icon svg, .me-modal__icon svg { width: 26px; height: 26px; }
.confirm__title, .me-modal__title { font-size: 18px; line-height: 1.4; margin-bottom: 8px; word-break: keep-all; }
.confirm__desc, .me-modal__desc { font-size: 14px; line-height: 1.65; margin: 0 4px 26px; word-break: keep-all; }
.confirm__btns, .me-modal__btns { gap: 10px; }
.confirm__cancel, .confirm__danger, .me-modal__btn { height: 50px; padding: 0 16px; border-radius: 14px; font-size: 15px; }
.me-modal__input { margin-bottom: 18px; }
html[data-theme="dark"] .confirm__icon--danger { background: #3A1A1A; }
/* 확인 팝업은 휴대폰에서도 가운데 카드로 */
.modal-overlay:has(.confirm-modal), .modal-overlay:has(.me-modal) { align-items: center; }
.modal.confirm-modal, .modal.me-modal { border-radius: var(--r-xl); width: calc(100% - 40px); padding-bottom: 22px; }
.bar-slot { margin-left: auto; display: flex; align-items: center; }
.bar-slot:empty { display: none; }
.bar-slot .sel-toggle { margin-left: 0; }
/* 신청 취소 */
.cd-cta.is-line { background: var(--surface); color: var(--text-strong); border: 1px solid var(--border); }
.cd-cta.is-line:hover { background: var(--surface-sub); }
.ek-bar__btn.is-sub { color: var(--text-weak); }
.mr-cancel { display: inline-flex; align-items: center; margin-top: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-weak); }
.mr-cancel:hover { color: #E03131; border-color: #FFC9C9; }
.mr-row__r .mr-cancel { display: flex; margin-left: auto; }
.comp-req__cancel { margin-top: 10px; }
/* 모바일 + 버튼 (수다 · 심부름 · 음성 방 — 동행과 같은 모양) */
.m-fab { display: none; }
@media (max-width: 900px) {
  .sb-write--pc { display: none !important; }
  .m-fab { display: flex; position: fixed; right: 14px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index: 800; width: 52px; height: 52px; border-radius: 50%; background: var(--text-strong); color: var(--surface); align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
  .m-fab svg { width: 22px; height: 22px; }
  .page:has(.sel-bar) .m-fab { display: none; }
  /* 동행: 내 위치 버튼을 + 버튼 바로 위에 */
  .tab-out .out-locate { top: auto !important; right: 20px; bottom: calc(var(--sheet-h) + 78px); transition: bottom .22s ease; }
}
.sb-hot-empty { padding: 12px 0; font-size: 13px; color: var(--text-weak); }
/* 기록: 아직 안 온 날 · 오늘 집/나들이 고르기 */
.m1-strip i.is-empty { background: rgba(255,255,255,.04); outline: 1px dashed rgba(255,255,255,.12); outline-offset: -1px; }
.rc-strow { display: flex; gap: 6px; margin-top: 10px; }
.rc-stbtn { flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.rc-stbtn span { font-size: 16px; }
.rc-stbtn.is-on { border-color: var(--text-strong); background: var(--text-strong); color: var(--surface); }
.rc-stbtn.is-out.is-on { border-color: #F76707; background: #F76707; color: #fff; }
.pc__cur { flex: none; font-size: 11.5px; font-weight: 700; color: var(--blue-500); background: #EEF4FF; border-radius: 999px; padding: 3px 8px; }
html[data-theme="dark"] .pc__cur { background: #17263F; color: #8FB8F2; }
.pc__row.is-cur .pc__rb b { text-decoration: none !important; }
/* 쇼츠(세로) 영상: PC는 가운데 세로 창, 휴대폰은 화면 꽉 차게 */
.modal.vmodal--vert { max-width: none; width: auto; background: #000; border-radius: 16px; }
.vmodal--vert .vmodal__frame { aspect-ratio: 9 / 16; height: min(84vh, 760px); width: auto; }
.vmodal--vert .vmodal__t { display: none; }
@media (max-width: 600px) {
  .modal-overlay:has(.vmodal--vert) { align-items: stretch; background: #000; }
  .modal.vmodal--vert { width: 100%; max-height: none; height: 100dvh; border-radius: 0; display: flex; align-items: center; justify-content: center; }
  .vmodal--vert .vmodal__frame { width: 100%; height: auto; max-height: 100dvh; aspect-ratio: 9 / 16; }
  .vmodal--vert .vmodal__x { top: calc(10px + env(safe-area-inset-top)); right: 10px; width: 40px; height: 40px; }
}
/* 동행 신청 한마디 칩: 휴대폰에선 한 줄로 옆으로 밀기 */
@media (max-width: 900px) {
  .cs-qp { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: -18px; margin-right: -18px; padding: 0 18px 2px; scroll-snap-type: x proximity; }
  .cs-qp::-webkit-scrollbar { display: none; }
  .cs-qp__b { flex: none; white-space: nowrap; scroll-snap-align: start; }
}
/* 동행 목록 끝: 지도 밖 동행 모두 보기 */
.out-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: calc(100% - 32px); margin: 14px 16px 18px; padding: 13px 16px; border-radius: 14px; background: var(--surface-sub); font-size: 13.5px; color: var(--text); text-align: left; }
.out-more b { color: var(--out); }
.out-more__go { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.out-more__go svg { width: 15px; height: 15px; }
.out-more:hover { filter: brightness(.98); }
.cd-menu__item { white-space: nowrap; }
/* 지도 위 지역·장소 검색 */
.oms { position: absolute; z-index: 650; }
.oms--pc { top: 16px; left: 16px; width: min(340px, calc(100% - 140px)); }
.oms--m { position: relative; flex: 1; min-width: 0; }
.oms__bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 14px; border-radius: 999px; background: var(--surface); box-shadow: 0 3px 12px rgba(0,0,0,.14); color: var(--text-weak); }
.oms__bar > svg { width: 17px; height: 17px; flex: none; }
.oms__in { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: inherit; font-size: 16px; color: var(--text-strong); padding: 0; }
.oms__in::placeholder { color: var(--text-weak); font-size: 14px; }
.oms__in::-webkit-search-cancel-button { display: none; }
.oms__x { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--text-weak); flex: none; }
.oms__x svg { width: 15px; height: 15px; }
.oms__x[hidden] { display: none; }
.oms__res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.oms__res[hidden] { display: none; }
.oms__r { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border-light); }
.oms__r:last-child { border-bottom: 0; }
.oms__r:hover { background: var(--surface-sub); }
.oms__r > svg { width: 15px; height: 15px; color: var(--out); flex: none; margin-top: 2px; }
.oms__r span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oms__r b { font-size: 14px; color: var(--text-strong); }
.oms__r small { font-size: 12px; color: var(--text-weak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oms__e { padding: 12px 14px; font-size: 13px; color: var(--text-weak); }
.ob-filt.is-on { color: var(--out); }
.ob-filt .ob-pill__s { position: absolute; top: 6px; right: 9px; color: var(--out); font-size: 18px; line-height: 0; }
@media (max-width: 900px) { .oms--pc { display: none; } }
.oms__h { padding: 10px 14px 6px; font-size: 12px; font-weight: 700; color: var(--text-weak); display: flex; gap: 5px; }
.oms__h em { font-style: normal; color: var(--out); }
.oms__ci { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid !important; place-items: center; color: #fff; }
.oms__ci svg { width: 15px; height: 15px; }
.oms__r .oms__ci + span { padding-top: 0; }
@media (max-width: 900px) { .oms--m .oms__res { right: -54px; max-height: 50vh; } }

/* ===== 운영 관리 (/admin) ===== */
.adm { max-width: 860px; }
.adm-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.adm-title { font-size: 22px; font-weight: 800; color: var(--text-strong); margin: 0; flex: 1; }
.adm-reload { width: 44px; height: 44px; border: none; background: none; border-radius: 12px; color: var(--text-weak); cursor: pointer; display: grid; place-items: center; }
.adm-reload:hover { background: var(--surface-sub); color: var(--text-strong); }
.adm-reload svg { width: 18px; height: 18px; }
.adm-segrow { margin-bottom: 14px; }
.adm-n { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--danger); }
.adm-hint { font-size: 13px; color: var(--text-weak); margin: 0 0 12px; }
.adm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 16px; text-align: center; color: var(--text-weak); }
.adm-empty svg { width: 28px; height: 28px; }
.adm-empty b { font-size: 15px; color: var(--text-strong); }
.adm-empty small { font-size: 13px; }
.adm-card { border: 1px solid var(--border-light); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; background: var(--surface); }
.adm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.adm-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text-strong); }
.adm-kind svg { width: 15px; height: 15px; }
.adm-cnt { font-size: 13px; font-weight: 700; color: var(--danger); }
.adm-when { margin-left: auto; font-size: 12px; color: var(--text-weak); }
.adm-prev { background: var(--surface-sub); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; word-break: keep-all; overflow-wrap: anywhere; }
.adm-prev__t { display: block; font-size: 14px; color: var(--text-strong); margin-bottom: 4px; }
.adm-prev__x { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0; white-space: pre-wrap; }
.adm-prev__w { display: block; font-size: 12px; color: var(--text-weak); margin-top: 6px; }
.adm-prev__load, .adm-prev__gone { font-size: 13px; color: var(--text-weak); }
.adm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.adm-chip { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--surface-sub); color: var(--text); }
.adm-chip--ban { background: var(--danger); color: #fff; }
.adm-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--surface); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-strong); cursor: pointer; }
.adm-btn svg { width: 15px; height: 15px; }
.adm-btn:hover { background: var(--surface-sub); }
.adm-btn--danger { color: var(--danger); }
.adm-btn--pri { background: var(--blue-500); border-color: var(--blue-500); color: #fff; margin-top: 8px; }
.adm-card--row { display: flex; align-items: center; gap: 12px; }
.adm-ban { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-ban b { font-size: 14.5px; color: var(--text-strong); }
.adm-ban small { font-size: 12.5px; color: var(--text-weak); }
.adm-uid { font-size: 11px; color: var(--text-weak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-opts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 14px; }
.adm-opt { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--surface); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.adm-opt.is-on { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); }
@media (max-width: 600px) { .adm-btn { flex: 1 1 calc(50% - 6px); justify-content: center; } .adm-card--row { flex-direction: column; align-items: stretch; } }

.vl-search { margin: 4px 0 6px; }
.vl-search .csearch__input { flex: 1; min-width: 0; }

/* 알림 지우기 X */
.tab-noti .noti-row__body { padding-right: 34px; }
.tab-noti .noti-row__x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: none; background: none; border-radius: 12px; color: var(--text-weak); cursor: pointer; opacity: .7; }
.tab-noti .noti-row__x svg { width: 16px; height: 16px; }
.tab-noti .noti-row__x:hover { opacity: 1; color: var(--text-strong); background: var(--surface-sub); }
.tab-noti .noti-row.is-gone { opacity: 0; transform: translateX(16px); transition: opacity .16s, transform .16s; }
@media (prefers-reduced-motion: reduce) { .tab-noti .noti-row.is-gone { transition: none; } }
.tab-noti .noti-row.is-unread::after { right: auto; left: 10px; top: 10px; box-shadow: 0 0 0 2px var(--surface); }

/* 동행 검색 — PC 왼쪽 목록 맨 위 (B안) */
.oms--side { position: relative; z-index: auto; width: 100%; margin: 2px 0 2px; }
.oms--side .oms__bar { height: 44px; box-shadow: none; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.oms--side .oms__bar:focus-within { border-color: var(--text-strong); }
.oms--side .oms__res { position: static; margin-top: 6px; max-height: none; box-shadow: none; border: 0; border-radius: 12px; background: var(--surface-sub); }
.oms--side .oms__r { border-bottom-color: var(--border); }
.oms__r--go b em { font-style: normal; font-weight: 500; color: var(--text-weak); font-size: 13px; }
@media (max-width: 900px) { .oms--side { display: none; } }
.oms__r.is-act { background: var(--surface-sub); box-shadow: inset 3px 0 0 var(--out); }
.oms--side .oms__r.is-act { background: var(--surface); }

/* 토스트: 글자 길이만큼만 (가운데) */
.toast-wrap { align-items: center; }
.toast { width: fit-content; max-width: 100%; }

/* 기본 아바타 */
.is-av { display: inline-grid; place-items: center; }
.is-av svg { width: 56%; height: 56%; }
.pe-av { cursor: pointer; }
.pe-av__hint { display: block; text-align: center; font-size: 12.5px; color: var(--text-weak); margin-top: 8px; }
.avp-sub { font-size: 13px; color: var(--text-weak); margin: -4px 0 14px; line-height: 1.5; }
.avp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.avp-i { aspect-ratio: 1; min-height: 44px; border: 2px solid transparent; border-radius: 50%; padding: 3px; background: none; cursor: pointer; }
.avp-i.is-on { border-color: var(--text-strong); }
.avp-c { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sub); color: var(--text-strong); font-weight: 700; font-size: 15px; }
.avp-c svg { width: 50%; height: 50%; }

/* 문의하기 */
.ask-box { position: relative; }
.ask-ta { width: 100%; min-height: 140px; resize: vertical; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 28px; font-family: inherit; font-size: 16px; line-height: 1.6; color: var(--text-strong); background: var(--surface); }
.ask-ta:focus, .ask-mail:focus { outline: none; border-color: var(--text-strong); }
.ask-cnt { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: var(--text-weak); }
.ask-mail { width: 100%; height: 48px; margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; font-family: inherit; font-size: 16px; color: var(--text-strong); background: var(--surface); }
.ask-note { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--text-weak); line-height: 1.5; margin: 10px 0 14px; }
.ask-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.vc-ok[disabled] { opacity: .45; cursor: not-allowed; }
#user-initial.is-av { width: 100%; height: 100%; border-radius: 50%; }
.topnav__avatar:has(#user-initial.is-av) { background: none; padding: 0; overflow: hidden; }

/* 기록: 동행 다녀온 날 점 · 지우기 */
.rc-d { position: relative; }
.rc-d__c { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange, #D9480F); }
.rc-leg i.is-comp { width: 7px; height: 7px; border-radius: 50%; background: #D9480F; }
.rc-del { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; padding: 0 4px; border: none; background: none; font-family: inherit; font-size: 13px; color: var(--text-weak); cursor: pointer; }
.rc-del svg { width: 14px; height: 14px; }
.rc-del:hover { color: var(--danger); }
.help-mail { display: block; padding: 4px 16px 14px; font-size: 12.5px; color: var(--text-weak); text-decoration: none; word-break: break-all; }
.help-mail b { color: var(--text); font-weight: 600; }
.dc-art > .dc-h:first-child { margin-top: 0; }

/* 광고 배너 · 운영 관리 광고 탭 */
.ad-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.hx-ad:has(.ad-img), .sb-ad:has(.ad-img) { height: auto; min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
.adm-adtop { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.adm-adtop .adm-hint { flex: 1; margin: 0; }
.adm-adtop .adm-btn--pri { margin-top: 0; flex-shrink: 0; }
.adm-adprev { border: 1px dashed var(--border); border-radius: 12px; padding: 4px 12px; margin-bottom: 8px; }
.adm-adprev .hx-ad { margin-top: 0; }
.adm-adprev .sb-ad { border-bottom: 0; }
.adm-adlink { display: block; font-size: 12px; color: var(--text-weak); margin: 0 0 10px; word-break: break-all; }
.adm-card.is-off .adm-adprev { opacity: .45; }
button.m1-tg { border: none; padding: 0; cursor: pointer; }
.adm-aded .ask-mail { margin-top: 0; }
.adm-aded .vc-lb { margin-top: 14px; }
@media (max-width: 600px) { .adm-adtop { flex-direction: column; align-items: stretch; } }

/* 이미지 배너 광고 */
.ad-ban { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.ad-ban--home { margin-top: 44px; }
.ad-ban--list { padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.ad-ban__box { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--surface-sub); min-height: 48px; }
.ad-ban__img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; }
.ad-ban__box.is-empty { display: none; }
.ad-ban__tag { position: absolute; top: 8px; right: 8px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.45); border-radius: 5px; padding: 1px 6px; }
.adm-adprev .ad-ban--home { margin-top: 0; }
.adm-adprev .ad-ban--list { border-bottom: 0; padding: 8px 0; }
.adm-imgbox { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.adm-uprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-hint2 { font-size: 12px; color: var(--text-weak); }

/* ===== 운영 관리 A안 (왼쪽 메뉴 + 대시보드) ===== */
:root { --adm-line: #3182F6; --adm-grid: #F2F4F6; }
html[data-theme="dark"] { --adm-line: #4C94FF; --adm-grid: #232B36; }
.page[data-page="me"]:has(.adm2) { padding-top: 0; }
.adm2 { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 18px; }
.adm2-gate { grid-column: 1 / -1; }
.adm2-nav { position: sticky; top: calc(var(--nav-h, 64px) + 16px); display: flex; flex-direction: column; gap: 2px; }
.adm2-brand { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; margin-bottom: 8px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 800; color: var(--text-strong); cursor: pointer; border-radius: 10px; }
.adm2-brand svg { width: 16px; height: 16px; color: var(--text-weak); }
.adm2-nav__a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; background: none; border-radius: 12px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.adm2-nav__a svg { width: 17px; height: 17px; color: var(--text-weak); flex-shrink: 0; }
.adm2-nav__a span { flex: 1; }
.adm2-nav__a em { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: var(--danger); border-radius: 999px; padding: 1px 7px; }
.adm2-nav__a:hover { background: var(--surface-sub); }
.adm2-nav__a.is-on { background: var(--blue-50); color: var(--blue-600); font-weight: 700; }
.adm2-nav__a.is-on svg { color: var(--blue-600); }
html[data-theme="dark"] .adm2-nav__a.is-on { background: #142238; color: #74A9FF; }
.adm2-sep { height: 1px; background: var(--border-light); margin: 8px 6px; }
.adm2-main { min-width: 0; }
.adm2-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; min-height: 44px; }
.adm2-head h1 { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-strong); }
.adm2-head__sp { flex: 1; }
.adm2-seg button { height: 32px; font-size: 13px; }
.adm2-todo { display: flex; align-items: center; gap: 12px; background: #1B2A4A; color: #fff; border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.adm2-todo b { display: block; font-size: 15px; }
.adm2-todo small { color: rgba(255,255,255,.72); font-size: 12.5px; }
.adm2-todo__sp { flex: 1; }
.adm2-todo .adm-btn { background: #fff; border-color: #fff; color: #191F28; min-height: 40px; }
.adm2-todo.is-zero { background: var(--surface-sub); color: var(--text-strong); }
.adm2-todo.is-zero small { color: var(--text-weak); }
.adm2-k4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.adm2-kpi { border: 1px solid var(--border-light); background: var(--surface); border-radius: 14px; padding: 14px 16px; }
.adm2-kpi small { display: block; font-size: 12px; color: var(--text-weak); }
.adm2-kpi b { display: block; font-size: 26px; font-weight: 800; color: var(--text-strong); margin-top: 4px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.adm2-kpi em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: #03A266; margin-top: 2px; }
.adm2-kpi em.is-flat { color: var(--text-weak); font-weight: 500; }
.adm2-g2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.adm2-card { border: 1px solid var(--border-light); background: var(--surface); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.adm2-g2 .adm2-card { margin-bottom: 0; }
.adm2-card--flat { padding: 4px 16px; }
.adm2-ct { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.adm2-ct b { font-size: 14px; color: var(--text-strong); }
.adm2-ct small { font-size: 12px; color: var(--text-weak); }
.adm-hit .adm-hit__l, .adm-hit .adm-hit__c { opacity: 0; }
.adm-hit:hover .adm-hit__l, .adm-hit:hover .adm-hit__c { opacity: 1; }
.adm2-bars { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.adm2-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 12.5px; }
.adm2-bar__l { color: var(--text); white-space: nowrap; }
.adm2-bar__t { height: 14px; display: block; }
.adm2-bar__t i { display: block; height: 100%; background: var(--adm-line); border-radius: 0 4px 4px 0; min-width: 0; }
.adm2-bar b { text-align: right; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.adm2-bar:hover .adm2-bar__t i { opacity: .8; }
.adm2-tot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.adm2-tot div { background: var(--surface-sub); border-radius: 12px; padding: 12px 14px; }
.adm2-tot small { display: block; font-size: 12px; color: var(--text-weak); }
.adm2-tot b { font-size: 18px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.adm2-link { border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text-weak); cursor: pointer; min-height: 32px; }
.adm2-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-top: 1px solid var(--border-light); background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--text-strong); }
.adm2-row:first-child { border-top: 0; }
.adm2-row:hover .adm2-row__t { text-decoration: underline; }
.adm2-row__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm2-row__m { font-size: 11.5px; color: var(--text-weak); flex-shrink: 0; }
.adm2-pill { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; flex-shrink: 0; background: var(--surface-sub); color: var(--text); }
.adm2-pill.is-red { background: #FFEBEE; color: #C9303D; }
.adm2-pill.is-blue { background: #E8F3FF; color: #1B64DA; }
html[data-theme="dark"] .adm2-pill.is-red { background: #3A1A1E; color: #FF8A94; }
html[data-theme="dark"] .adm2-pill.is-blue { background: #142238; color: #74A9FF; }
.adm2-none { font-size: 13px; color: var(--text-weak); padding: 10px 0; display: block; }
.adm2-foot { font-size: 12px; color: var(--text-weak); line-height: 1.6; margin: 4px 0 10px; }
.adm2-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.adm2-chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.adm2-chip.is-on { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface); font-weight: 700; }
.adm2-h2 { font-size: 15px; font-weight: 800; color: var(--text-strong); margin: 18px 0 10px; }
.adm2-search { margin: 0 0 10px; }
.adm2-memres { margin-bottom: 6px; }
.adm2-mem { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; border-top: 1px solid var(--border-light); background: none; font: inherit; text-align: left; cursor: pointer; }
.adm2-mem:first-child { border-top: 0; }
.adm2-mem > svg { width: 16px; height: 16px; color: var(--text-weak); }
.adm2-mem__av { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-sub); color: var(--text-strong); display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.adm2-mem__av--lg { width: 52px; height: 52px; font-size: 17px; }
.adm2-mem__b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm2-mem__b b { font-size: 14px; color: var(--text-strong); }
.adm2-mem__b small { font-size: 12px; color: var(--text-weak); }
.adm2-mc__top { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.adm2-mc__top b { display: block; font-size: 18px; color: var(--text-strong); }
.adm2-mc__top small { font-size: 12.5px; color: var(--text-weak); }
.adm2-mc__intro { font-size: 13.5px; color: var(--text); line-height: 1.6; margin: 0 0 12px; }
.adm2-mc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.adm2-mc__grid div { background: var(--surface-sub); border-radius: 12px; padding: 10px 12px; }
.adm2-mc__grid small { display: block; font-size: 11.5px; color: var(--text-weak); }
.adm2-mc__grid b { font-size: 14px; color: var(--text-strong); word-break: break-all; }
.adm2-mc__ban { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #C9303D; background: #FFEBEE; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.adm2-mc__ban svg { width: 15px; height: 15px; }
.adm2-mc__sec { margin-bottom: 12px; }
.adm2-mc__sec > b { font-size: 13px; color: var(--text-strong); display: block; margin-bottom: 2px; }
.adm2-mc__uid { display: block; font-size: 11px; color: var(--text-weak); margin: 4px 0 10px; word-break: break-all; }
.adm2-crow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-light); }
.adm2-crow:first-child { border-top: 0; }
.adm2-crow__b { flex: 1; min-width: 0; }
.adm2-crow__b b { display: block; font-size: 14px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm2-crow__b small { font-size: 12px; color: var(--text-weak); }
.adm2-crow__b p { margin: 4px 0 0; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.adm2-crow__a { display: flex; gap: 6px; flex-shrink: 0; }
.adm2-ta { margin: 4px 0 10px; min-height: 90px; }
.adm2-tgrow { display: inline-flex; align-items: center; gap: 8px; }
.adm2-tgrow small { font-size: 12.5px; color: var(--text-weak); }
.adm2 .adm-card { border-color: var(--border-light); }
/* 회원 B안: 목록 + 오른쪽 패널 */
.adm2-mw { display: grid; grid-template-columns: minmax(0, 1fr) 380px; border: 1px solid var(--border-light); border-radius: 18px; background: var(--surface); overflow: hidden; height: calc(100vh - var(--nav-h, 64px) - 120px); min-height: 520px; }
.adm2-ml { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border-light); }
.adm2-ml__h { display: flex; align-items: baseline; gap: 8px; padding: 18px 20px 0; }
.adm2-ml__h b { font-size: 17px; font-weight: 800; color: var(--text-strong); }
.adm2-ml__h span { font-size: 14px; font-weight: 600; color: var(--text-weak); }
.adm2-ml__h + .adm2-ml__s { margin-top: 10px; }
.adm2-ml__s { display: flex; align-items: center; gap: 8px; height: 42px; margin: 18px 20px 0; padding: 0 12px; border-radius: 12px; background: var(--surface-sub); color: var(--text-weak); }
.adm2-ml__s svg { width: 16px; height: 16px; flex-shrink: 0; }
.adm2-ml__q { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-strong); outline: none; }
.adm2-ml__c { padding: 12px 20px 10px; margin: 0; }
.adm2-ml__c .adm2-chip { min-height: 32px; padding: 0 12px; }
.adm2-ml__rows { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.adm2-ml__empty, .adm2-ml__wait { padding: 40px 12px; text-align: center; font-size: 13.5px; color: var(--text-weak); }
.adm2-mr { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; font: inherit; text-align: left; cursor: pointer; }
.adm2-mr:hover { background: var(--surface-sub); }
.adm2-mr.is-on { background: var(--blue-50); }
html[data-theme="dark"] .adm2-mr.is-on { background: #142238; }
.adm2-mr__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adm2-mr__b b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.adm2-mr__b b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm2-mr__b b .is-none { color: var(--text-weak); font-weight: 600; }
.adm2-mr__b small { font-size: 12.5px; color: var(--text-weak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm2-mr__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.adm2-mp { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.adm2-mp__hint, .adm2-mp__load { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: var(--text-weak); font-size: 13.5px; }
.adm2-mp__hint svg { width: 28px; height: 28px; color: var(--gray-400); }
.adm2-mp__hint b { font-size: 15px; color: var(--text-strong); }
.adm2-mp__load svg { width: 18px; height: 18px; }
.adm2-mp__h { padding: 22px 22px 16px; border-bottom: 1px solid var(--border-light); }
.adm2-mp__top { display: flex; align-items: center; gap: 14px; }
.adm2-mp__nm { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm2-mp__nm b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--text-strong); }
.adm2-mp__nm b > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm2-mp__nm small { font-size: 13px; color: var(--text-weak); }
.adm2-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 9px; background: var(--surface-sub); color: var(--text-weak); flex-shrink: 0; }
.adm2-st.is-on { background: var(--green-50); color: #099268; }
.adm2-st.is-on::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.adm2-st.is-ban { background: #FFEBEE; color: #C9303D; }
html[data-theme="dark"] .adm2-st.is-on { background: #0F2E26; color: #63E6BE; }
html[data-theme="dark"] .adm2-st.is-ban { background: #3A1A1E; color: #FF8A94; }
.adm2-mp__intro { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.adm2-mp__h .adm2-mc__ban { margin: 12px 0 0; }
.adm2-mp__acts { display: flex; gap: 8px; margin-top: 14px; }
.adm2-mp__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 0; border-radius: 12px; background: var(--surface-sub); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.adm2-mp__btn svg { width: 15px; height: 15px; }
.adm2-mp__btn:hover { filter: brightness(.97); }
.adm2-mp__btn.is-danger { background: #FFF0F1; color: #E03E4C; }
html[data-theme="dark"] .adm2-mp__btn.is-danger { background: #3A1A1E; color: #FF8A94; }
.adm2-mp__body { flex: 1; overflow-y: auto; padding: 16px 22px 22px; }
.adm2-kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0 0 6px; font-size: 13.5px; }
.adm2-kv dt { color: var(--text-weak); }
.adm2-kv dd { margin: 0; text-align: right; font-weight: 600; color: var(--text-strong); }
.adm2-kv dd.is-red { color: #E03E4C; }
.adm2-mp__sec { margin-top: 20px; }
.adm2-mp__sh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.adm2-mp__sh b { font-size: 13px; font-weight: 800; color: var(--text); }
.adm2-mp__sh span { font-size: 12.5px; font-weight: 700; color: var(--text-weak); }
.adm2-mp__none { font-size: 13px; color: var(--text-weak); padding: 8px 0; }
.adm2-pill.is-out { background: var(--out-50); color: var(--out); }
html[data-theme="dark"] .adm2-pill.is-out { background: #3A2414; color: #FFA94D; }
.adm2-sheet { padding: 0 !important; overflow: hidden; }
.adm2-sheet .auth-x { z-index: 2; }
.adm2-mp--sheet { max-height: 80vh; }
.adm2-mp--sheet .adm2-mp__load { min-height: 220px; }
@media (max-width: 900px) {
  .adm2 { grid-template-columns: 1fr; gap: 12px; padding-top: 8px; }
  .adm2-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
  .adm2-nav::-webkit-scrollbar { display: none; }
  .adm2-brand { margin-bottom: 0; flex-shrink: 0; }
  .adm2-nav__a { flex-shrink: 0; padding: 0 12px; background: var(--surface-sub); border-radius: 999px; min-height: 40px; }
  .adm2-nav__a svg { display: none; }
  .adm2-sep { display: none; }
  .adm2-k4, .adm2-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm2-g2 { grid-template-columns: 1fr; }
  .adm2-crow { flex-direction: column; }
  .adm2-mw { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .adm2-ml { border-right: 0; }
  .adm2-mw > .adm2-mp { display: none; }
  .adm2-ml__rows { overflow: visible; }
}

/* 홈 맨 위 공지 */
.nb { display: flex; align-items: center; gap: 10px; background: var(--blue-50); color: var(--blue-700); border-radius: 12px; padding: 4px 4px 4px 14px; margin-bottom: 18px; font-size: 13.5px; }
.nb > svg { width: 16px; height: 16px; flex-shrink: 0; }
.nb__t { flex: 1; min-width: 0; color: inherit; text-decoration: none; line-height: 1.5; padding: 8px 0; }
.nb__t.is-link, a.nb__t { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nb__x { width: 40px; height: 40px; border: 0; background: none; color: inherit; display: grid; place-items: center; border-radius: 10px; cursor: pointer; flex-shrink: 0; }
.nb__x svg { width: 16px; height: 16px; }
html[data-theme="dark"] .nb { background: #142238; color: #A8C8FF; }
.adm2-more { display: flex; margin: 0 auto 14px; min-width: 140px; justify-content: center; }
.opop__btns.is-one .opop__btn { flex: 1; }

/* ===== 집콕러 테스트 (/test) ===== */
.qz { --qz-ink: #2B2320; --qz-sub: #7A6C64; --qz-weak: #A99C94; --qz-acc: #F07F45; --qz-accl: #FFE7D8; --qz-line: #F1E6DD; --qz-bg1: #FFF7F0; --qz-bg2: #FFF0F3; --qz-card: #fff;
  max-width: 440px; margin: 8px auto 40px; word-break: keep-all; }
html[data-theme="dark"] .qz { --qz-ink: #F3ECE7; --qz-sub: #C9BCB3; --qz-weak: #9A8D85; --qz-accl: #4A2E20; --qz-line: #3A302B; --qz-bg1: #2A221E; --qz-bg2: #2B2025; --qz-card: #1F1A17; }
.qz-card { background: linear-gradient(170deg, var(--qz-bg1) 0%, var(--qz-bg2) 100%); border-radius: 28px; padding: 22px 20px 22px; color: var(--qz-ink); }
.qz-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--qz-weak); min-height: 36px; }
.qz-back { width: 36px; height: 36px; border: 0; background: none; color: var(--qz-weak); display: grid; place-items: center; border-radius: 10px; cursor: pointer; margin-left: -8px; }
.qz-back svg { width: 20px; height: 20px; }
.qz-link { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--qz-weak); cursor: pointer; padding: 8px 0 8px 8px; }
.qz-bar { height: 6px; background: rgba(43, 35, 32, .1); border-radius: 9px; overflow: hidden; margin-top: 6px; }
html[data-theme="dark"] .qz-bar { background: rgba(255, 255, 255, .1); }
.qz-bar i { display: block; height: 100%; background: var(--qz-acc); border-radius: 9px; transition: width .25s; }
.qz-btn { height: 52px; border: 0; border-radius: 16px; background: var(--qz-ink); color: var(--qz-card); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; width: 100%; }
.qz-btn--w { background: var(--qz-card); color: var(--qz-ink); }
.qz-mini { font-size: 12px; font-weight: 800; color: #C08A5B; letter-spacing: .05em; }
.qz-title { font-size: 28px; font-weight: 900; line-height: 1.32; letter-spacing: -.03em; margin: 8px 0 0; text-wrap: balance; }
.qz-sub { font-size: 14px; color: var(--qz-sub); margin: 8px 0 0; }
.qz-intro { padding: 30px 22px 22px; }
.qz-objs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 30px 0 30px; }
.qz-objs span { aspect-ratio: 1; border-radius: 18px; background: var(--qz-card); display: grid; place-items: center; color: var(--qz-acc); }
.qz-objs svg { width: 26px; height: 26px; }
.qz-meta { text-align: center; font-size: 12.5px; color: var(--qz-weak); margin-top: 12px; }
.qz-q { padding-bottom: 26px; }
.qz-qt { font-size: 22px; font-weight: 800; line-height: 1.5; letter-spacing: -.02em; margin: 30px 0 22px; text-wrap: balance; }
.qz-qt--b { margin: 10px 0 0; }
.qz-opts { display: flex; flex-direction: column; gap: 10px; }
.qz-opt { text-align: center; background: var(--qz-card); border: 1.5px solid transparent; border-radius: 18px; padding: 26px 18px; font: inherit; font-size: 16px; font-weight: 600; color: var(--qz-ink); cursor: pointer; transition: border-color .12s, background .12s; }
.qz-opt:hover { border-color: var(--qz-line); }
.qz-opt.is-on { border-color: var(--qz-acc); background: var(--qz-accl); }
.qz-bonus { display: inline-block; margin-top: 24px; font-size: 12px; font-weight: 800; background: var(--qz-ink); color: var(--qz-card); border-radius: 99px; padding: 4px 11px; }
.qz-vs { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.qz-vs__o { background: var(--qz-card); border: 1.5px solid transparent; border-radius: 18px; padding: 24px 16px; font: inherit; font-size: 16px; font-weight: 800; color: var(--qz-ink); cursor: pointer; }
.qz-vs__o:hover { border-color: var(--qz-line); }
.qz-vs__o.is-on { border-color: var(--qz-acc); background: var(--qz-accl); }
.qz-vs__x { text-align: center; font-size: 12px; font-weight: 900; color: var(--qz-weak); }
.qz-skip { display: block; margin: 16px auto 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--qz-weak); cursor: pointer; padding: 8px; }

/* 결과 */
.qz-res { text-align: center; }
.qz-lb { font-size: 13.5px; font-weight: 700; color: var(--qz-acc); margin-top: 14px; }
.qz-av { width: 92px; height: 92px; margin: 14px auto 0; border-radius: 30px; background: var(--qz-card); display: grid; place-items: center; color: var(--qz-acc); box-shadow: 0 8px 24px rgba(240, 127, 69, .18); }
.qz-av svg { width: 44px; height: 44px; }
.qz-nm { font-size: 38px; font-weight: 900; letter-spacing: -.04em; margin-top: 14px; line-height: 1.1; }
.qz-nmsub { font-size: 14px; font-weight: 700; color: var(--qz-sub); margin-top: 8px; }
.qz-one { font-size: 15px; font-weight: 600; margin: 12px 0 0; }
.qz-tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.qz-tags span { font-size: 12px; font-weight: 700; background: var(--qz-card); color: var(--qz-sub); border-radius: 99px; padding: 5px 11px; }
.qz-trio { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; background: var(--qz-card); border-radius: 18px; padding: 12px 0; }
.qz-trio div + div { border-left: 1px solid var(--qz-line); }
.qz-trio small { display: block; font-size: 11.5px; color: var(--qz-weak); font-weight: 600; }
.qz-trio b { display: block; font-size: 16px; font-weight: 900; margin-top: 2px; white-space: nowrap; }
.qz-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.qz-acts .qz-btn { height: 50px; font-size: 14.5px; }
.qz-soft { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin-top: 12px; background: rgba(255, 255, 255, .7); border: 0; border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 12.5px; color: var(--qz-sub); text-align: left; cursor: pointer; }
html[data-theme="dark"] .qz-soft { background: rgba(255, 255, 255, .06); }
.qz-soft b { color: var(--qz-ink); white-space: nowrap; }

.qz-stats { padding: 26px 4px 0; color: var(--qz-ink); }
.qz-wait { text-align: center; font-size: 13.5px; color: var(--qz-weak); padding: 20px 10px; display: flex; flex-direction: column; gap: 4px; }
.qz-wait b { color: var(--qz-ink); font-size: 15px; }
.qz-sec { margin-bottom: 28px; }
.qz-h2 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.qz-h2 b { font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.qz-h2 span { font-size: 12px; color: var(--qz-weak); font-weight: 600; }
.qz-stack { display: flex; height: 14px; border-radius: 9px; overflow: hidden; gap: 2px; }
.qz-stack i { display: block; height: 100%; }
.qz-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 12px; }
.qz-legend div { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--qz-sub); }
.qz-legend div i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.qz-legend div em { font-style: normal; margin-left: auto; font-weight: 800; color: var(--qz-ink); }
.qz-legend div.is-me { color: var(--qz-ink); font-weight: 800; }
.qz-callout { margin-top: 12px; background: var(--qz-accl); color: #9A4A1F; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 700; }
html[data-theme="dark"] .qz-callout { color: #FFC49F; }
.qz-qa { border-top: 1px solid var(--qz-line); padding: 13px 0; }
.qz-sec .qz-qa:first-of-type { border-top: 0; padding-top: 0; }
.qz-qa__q { font-size: 13px; color: var(--qz-weak); font-weight: 600; }
.qz-qa__r { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.qz-qa__r b { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qz-qa__r em { font-style: normal; margin-left: auto; font-size: 12px; font-weight: 800; border-radius: 99px; padding: 3px 9px; white-space: nowrap; flex: none; }
.qz-qa__r em.is-maj { background: #E8F5EE; color: #138A5A; }
.qz-qa__r em.is-min { background: #FFF0E0; color: #C25A1C; }
html[data-theme="dark"] .qz-qa__r em.is-maj { background: #12301F; color: #6EE0A6; }
html[data-theme="dark"] .qz-qa__r em.is-min { background: #3A2414; color: #FFB27A; }
.qz-qa__bar { height: 6px; background: var(--g100, #F2F4F6); border-radius: 9px; margin-top: 8px; overflow: hidden; }
html[data-theme="dark"] .qz-qa__bar { background: rgba(255, 255, 255, .08); }
.qz-qa__bar i { display: block; height: 100%; background: var(--qz-acc); border-radius: 9px; }
.qz-vsr { margin-bottom: 16px; }
.qz-vsr__t { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.qz-split { display: flex; height: 34px; border-radius: 11px; overflow: hidden; gap: 3px; }
.qz-split__ls { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 13px; color: var(--qz-sub); }
.qz-split__l { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.qz-split__l:last-child { text-align: right; justify-content: flex-end; }
.qz-split__l.is-me { color: var(--qz-ink); font-weight: 800; }
.qz-split__l em { font-style: normal; font-size: 10.5px; font-weight: 800; background: var(--qz-ink); color: var(--qz-card); border-radius: 99px; padding: 1px 6px; flex: none; }
.qz-split__s { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; font-size: 12.5px; font-weight: 700; background: #F3E9E2; color: var(--qz-sub); min-width: 0; }
html[data-theme="dark"] .qz-split__s { background: #3A302B; }
.qz-split__s span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qz-split__s b { font-weight: 900; flex: none; }
.qz-split__s.is-big { background: var(--qz-acc); color: #fff; }
.qz-vsr__ty { font-size: 12.5px; color: var(--qz-sub); margin-top: 7px; }
.qz-vsr__ty b { color: var(--qz-acc); }
.qz-foot { text-align: center; font-size: 11.5px; color: var(--qz-weak); margin-top: 6px; }

/* 홈 입구 · 나 탭 칩 · 공유 카드 스위치 */
.qz-entry { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 16px; padding: 12px 14px; margin-bottom: 18px; background: linear-gradient(90deg, #FFF6EC, #FDEEF4); color: #2B2320; font: inherit; text-align: left; cursor: pointer; }
.qz-entry.is-done { background: var(--surface); border: 1px solid var(--border-light); color: var(--text-strong); }
html[data-theme="dark"] .qz-entry:not(.is-done) { background: linear-gradient(90deg, #2A221E, #2B2025); color: #F3ECE7; }
.qz-entry__ic { width: 40px; height: 40px; border-radius: 13px; background: #fff; display: grid; place-items: center; color: #F07F45; flex: none; }
.qz-entry.is-done .qz-entry__ic { background: #FFF0E3; }
html[data-theme="dark"] .qz-entry__ic { background: rgba(255, 255, 255, .08); }
.qz-entry__ic svg { width: 21px; height: 21px; }
.qz-entry__b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qz-entry__b b { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-entry__b small { font-size: 12.5px; opacity: .7; }
.qz-entry em { font-style: normal; font-size: 13px; font-weight: 800; background: #2B2320; color: #fff; border-radius: 10px; padding: 8px 12px; flex: none; }
.qz-entry.is-done em { background: var(--surface-sub); color: var(--text-strong); }
.qz-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; border: 0; border-radius: 99px; padding: 4px 10px; background: #FFF0E3; color: #B0683A; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.qz-chip svg { width: 13px; height: 13px; }
.qz-chip.is-new { background: var(--surface-sub); color: var(--text); }
html[data-theme="dark"] .qz-chip:not(.is-new) { background: #3A2414; color: #FFB27A; }
.qz-tgl { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text); background: var(--surface-sub); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.qz-sw { width: 40px; height: 22px; border-radius: 99px; border: 0; background: var(--gray-300); position: relative; cursor: pointer; flex: none; }
.qz-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.qz-sw.is-on { background: var(--blue-500); }
.qz-sw.is-on::after { left: 21px; }
@media (max-width: 480px) { .qz { margin-top: 0; } .qz-card { border-radius: 24px; } .qz-nm { font-size: 34px; } }

.qz-opts { gap: 12px; }
.qz-hint { text-align: center; font-size: 12.5px; color: var(--qz-weak); margin: 18px 0 0; }
.qz-bar.is-bonus i { background: var(--qz-ink); }
.qz-box { background: var(--qz-card); border-radius: 18px; padding: 14px 16px; margin-top: 16px; text-align: left; }
.qz-box__h { font-size: 12.5px; font-weight: 800; color: var(--qz-weak); margin-bottom: 8px; }
.qz-ax { margin: 10px 0 12px; }
.qz-ax:last-child { margin-bottom: 4px; }
.qz-ax__ls { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--qz-weak); margin-bottom: 6px; }
.qz-ax__ls span { white-space: nowrap; }
.qz-ax__ls .is-on { color: var(--qz-ink); font-weight: 800; }
.qz-ax__ls em { font-style: normal; color: var(--qz-acc); font-weight: 900; }
.qz-ax__t { height: 8px; background: #F3E9E2; border-radius: 9px; position: relative; overflow: hidden; }
html[data-theme="dark"] .qz-ax__t { background: #3A302B; }
.qz-ax__t i { position: absolute; top: 0; bottom: 0; background: var(--qz-acc); border-radius: 9px; }
.qz-ax__t i.is-l { left: 0; }
.qz-ax__t i.is-r { right: 0; }
.qz-pts { list-style: none; margin: 12px 0 0; padding: 0; text-align: left; }
.qz-pts li { position: relative; padding: 7px 0 7px 18px; font-size: 14px; font-weight: 600; color: var(--qz-ink); }
.qz-pts li::before { content: ''; position: absolute; left: 4px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--qz-acc); }
.qz-ai { background: var(--qz-card); border-radius: 18px; padding: 14px 16px; margin-top: 14px; text-align: left; }
.qz-ai .qz-box__h { display: flex; align-items: center; gap: 5px; color: var(--qz-acc); }
.qz-ai .qz-box__h svg { width: 14px; height: 14px; }
.qz-ai p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--qz-ink); }
.qz-ai__load { display: flex; gap: 5px; padding: 6px 0; }
.qz-ai__load span { width: 7px; height: 7px; border-radius: 50%; background: var(--qz-acc); opacity: .3; animation: qzDot 1s infinite; }
.qz-ai__load span:nth-child(2) { animation-delay: .15s; }
.qz-ai__load span:nth-child(3) { animation-delay: .3s; }
@keyframes qzDot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.qz-hid .qz-tags { justify-content: flex-start; margin-top: 0; }
.qz-hid .qz-tags span { background: var(--qz-accl); color: #B0683A; }
html[data-theme="dark"] .qz-hid .qz-tags span { color: #FFB27A; }
.qz-more { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; margin-top: 8px; border: 1.5px dashed var(--qz-line); background: none; border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--qz-acc); cursor: pointer; }
.qz-hid .qz-tags + .qz-more { margin-top: 10px; }
.qz-more svg { width: 16px; height: 16px; }
.qz-more--wide { margin: -8px 0 22px; background: var(--qz-card); }


/* reCAPTCHA 떠다니는 배지 숨김 — 대신 개인정보처리방침에 안내 문구 */
.grecaptcha-badge { visibility: hidden !important; }