/* v31 팔레트 확장 — 앰버·민트 5단계 + 에러 변수화 (global.css 참조) */

/* ═══════════════════════════════════════════════
   동네보험 — planner-profile.css v28
   설계사 공개 프로필 페이지 전용
   v19: P1+2단 레이아웃 리디자인
   v24: Phase 1 색상 팔레트 정리 (shade 통일)
   v25: Option B 전역 팔레트 리디자인 (로고 인디고 #3730A3)
   v26: Phase 2 시안 C 적용 (아이콘 밀도) — 좌측 컬러 바 사용으로 금지사항 위반 → v27에서 폐기
   v27: Phase 2 시안 2 "Sub-card" 재적용 — CLAUDE.md 금지사항 엄수
     - 좌측 컬러 바 제거, 따옴표 장식만
     - 섹션별 연한 회색 서브 카드 (.planner-left__sub) 래퍼
     - 보험사: 2열 그리드 / 로고+이름 inline / short 이름 + ellipsis / 전속은 확대 + full
     - 전문 분야 태그: 아이콘 12px + 글자 inline-flex
     - 통계: 서브 카드 내 3분할 흰 블록 (0값 표시 → 시프트 차단)
     - empty state: 서브 카드 안 subtle 회색 1줄 (앰버 배경 배제)
   v28: 서브 타이틀 시안 C' — 3색 아이콘 + 여백 확대
     - 타이틀: 12px, text-secondary 기본 → 섹션별 3색(.planner-left__sub--ins/cat/act)
     - 아이콘: 14px (stroke=currentColor → 부모 color 상속)
     - 여백: margin 14px, padding 14·16, title mb 12px (고급감 ↑)
   ═══════════════════════════════════════════════ */

/* ── 2단 레이아웃 ── */
.planner-layout {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 0 40px;
}
@media (max-width: 767px) {
  /* 모바일: 회색 배경 → .planner-left/.content-card 풀너비 카드 적층 사이 갭 노출 */
  .planner-layout {
    background: var(--bg-secondary);
  }
}
@media (min-width: 768px) {
  .planner-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0;
    padding: 24px 24px 60px;
  }
}

/* ── 좌측 카드 (시안 E 통합형) — 1개 흰 카드 안에 디바이더로 섹션 구분 ── */
.planner-left {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 767px) {
  /* 모바일: 라운드 제거 → .content-card와 통일 + 12px 회색 갭으로 다음 섹션 분리 */
  .planner-left {
    border-radius: 0;
    margin-bottom: 12px;
  }
}
@media (min-width: 768px) {
  .planner-left {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--header-height) + 16px);
    max-height: calc(100vh - var(--header-height) - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    margin-right: 24px;
  }
  .planner-left::-webkit-scrollbar { width: 4px; }
  .planner-left::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
}

/* 프로필 헤더 */
.planner-left__profile {
  padding: 24px 20px 16px;
}
.planner-left__top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.planner-left__avatar-img,
.planner-left__avatar-ph {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.planner-left__avatar-img {
  object-fit: cover;
}
.planner-left__avatar-ph {
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-secondary);
}
.planner-left__info {
  flex: 1;
  min-width: 0;
}
.planner-left__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}
.planner-left__name span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 3px;
}
.planner-left__type-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.planner-left__type-badge--exclusive {
  background: var(--primary);
  color: #fff;
}
.planner-left__type-badge--ga {
  background: var(--accent);
  color: #fff;
}
/* 인사말 — 아바타·이름 밑 서브 카드 (좌측 컬러 바 금지, 따옴표 장식만) */
.planner-left__intro {
  display: block;
  margin: 14px 20px 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  background: var(--bg-tertiary);
  border-radius: 10px;
}
.planner-left__intro::before {
  content: '\201C';
  color: var(--text-tertiary);
  font-weight: 700;
  margin-right: 2px;
}
.planner-left__intro::after {
  content: '\201D';
  color: var(--text-tertiary);
  font-weight: 700;
  margin-left: 2px;
}
.planner-left__meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 10px 20px 0;
}
.planner-left__meta svg {
  vertical-align: -2px;
  margin-right: 2px;
}

/* ── 시안 E 통합형: 섹션은 카드가 아닌 디바이더로 구분 ── */
.planner-left__sub {
  margin: 0 20px;
  padding: 14px 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--border-light);
}
.planner-left__sub:last-of-type {
  border-bottom: none;
}
.planner-left__sub-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
}
.planner-left__sub-title svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* 서브 섹션 제목은 모두 같은 레벨 메타 정보 → 중립 회색으로 통일 (게슈탈트 유사성 원칙).
   색으로 의미를 구분할 이유가 없어 브랜드 3색 분산 배치 제거. */

/* 보험사 — 시안 2: 2열 그리드, 내부 행은 흰 배경, 로고+이름 inline */
.planner-left__insurer-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.planner-left__insurer-list--single {
  grid-template-columns: 1fr;
}
.planner-left__insurer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  min-width: 0;
}
.planner-left__insurer img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}
.planner-left__insurer-name {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 전속: 큰 로고 + full name */
.planner-left__insurer--exclusive {
  padding: 10px 12px;
}
.planner-left__insurer--exclusive img {
  width: 36px;
  height: 36px;
}
.planner-left__insurer--exclusive .planner-left__insurer-name {
  font-size: 15px;
  font-weight: 700;
}
.planner-left__insurer-role {
  font-size: 11px;
  color: var(--primary);
  font-weight: 700;
  padding: 3px 8px;
  background: var(--primary-50);
  border-radius: 4px;
  flex-shrink: 0;
}

/* 전문 분야 카드 — 보험사 카드와 동일 구조(유사성 원칙) */
.planner-left__cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.planner-left__cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
}
.planner-left__cat svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  flex-shrink: 0;
}

/* 통계 — 시안 2: 서브 카드 내 3분할 흰 블록, 0값도 표시 → 시프트 차단 */
.planner-left__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.planner-left__stat {
  background: #fff;
  padding: 12px 8px 10px;
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--primary-100);
}
.planner-left__stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.planner-left__stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* 활동 hero 카드 — 시안 D: 디바이더 → 인디고 그라데이션 카드로 분리.
   3초 법칙(1-1)·대비(1-4)에 따라 핵심 신뢰 시그널을 시각적으로 격리 */
.planner-left__sub--act {
  margin: 14px 20px 6px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--primary-50), #fff);
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  border-bottom: 1px solid #c7d2fe;
}
.planner-left__sub--act .planner-left__sub-title {
  color: var(--primary);
}

/* 신뢰 시그널 empty state — 서브 카드 안 subtle 텍스트 (컬러 바·강한 배경 배제) */
.planner-left__trust-empty {
  margin-top: 8px;
  padding: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

/* CTA 액션 */
.planner-left__actions {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.planner-left__primary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.planner-left__primary-row--single {
  display: block;
}
/* 본인 프로필 진입 시 안내 (상담/톡 버튼 대체) */
.planner-left__preview-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-secondary, #f6f7fb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md);
  color: var(--text-secondary, #555);
}
.planner-left__preview-notice > svg {
  flex-shrink: 0;
  color: var(--primary);
}
.planner-left__preview-notice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.planner-left__preview-notice-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1f2937);
}
.planner-left__preview-notice-sub {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
}
.planner-left__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-radius: var(--radius-md);
  width: 100%;
  min-height: 48px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border: none;
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
}
.planner-left__cta:hover {
  background: var(--primary-dark);
}
/* 시안 A — 듀얼 동등: 메인과 같은 형태, 색만 민트 fill */
.planner-left__cta--secondary {
  background: var(--mint, #2e9e6e);
  color: #fff;
  border: none;
}
.planner-left__cta--secondary:hover {
  background: var(--mint-dark, #1f7a52);
}
/* 떠있던 작은 "톡" 라벨은 시안 A에서 인라인 텍스트로 흡수 → 숨김 */
.planner-left__cta-tip { display: none; }
.planner-left__sub-row {
  display: flex;
  gap: 8px;
}
.planner-left__sub-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.planner-left__sub-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.planner-left__sub-btn.active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-50);
}
.planner-left__sub-btn.active svg {
  fill: var(--primary);
}

/* ── 슬라이드 상담 폼 ── */
.consult-slide {
  display: none;
  background: var(--bg); border-radius: 12px;
  border: 1px solid var(--border-light);
  margin-bottom: 12px;
  scroll-margin-top: 64px;
}
.consult-slide.open { display: block; animation: slideDown 0.25s ease; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.consult-slide__inner { padding: 18px 20px; }
.consult-slide__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.consult-slide__title {
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.consult-slide__title svg { color: var(--amber); }
.consult-slide__close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-secondary); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.consult-slide__close:hover { background: var(--bg-tertiary); }

/* 신뢰 시그널 한 줄 */
.consult-slide__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 10px;
}
.consult-slide__trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.consult-slide__trust-item svg { color: var(--primary); flex-shrink: 0; }
.consult-slide__trust-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0;
  position: relative;
}
.consult-slide__trust-info:hover { color: var(--primary); }
.consult-slide__trust-info::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  background: var(--text-primary);
  border-radius: 6px;
  white-space: pre-line;
  width: max-content;
  max-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.consult-slide__trust-info:hover::after,
.consult-slide__trust-info:focus::after {
  opacity: 1;
  visibility: visible;
}

.consult-slide__toggle {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.consult-slide .consult-toggle {
  padding: 5px 12px; border-radius: 16px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-tertiary);
  cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.15s;
}
.consult-slide .consult-toggle.active {
  background: var(--primary-50); color: var(--primary); border-color: var(--primary);
}
.consult-slide__textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 14px; font-family: inherit;
  resize: none; min-height: 56px; max-height: 120px; line-height: 1.6;
  background: var(--bg-secondary); transition: border-color 0.15s, background 0.15s;
}
.consult-slide__textarea:focus {
  outline: none; border-color: var(--primary); background: var(--bg);
}
.consult-slide__textarea::placeholder { color: #bbb; }
.consult-slide__footer {
  margin-top: 8px;
}
.consult-slide__info {
  font-size: 11px; color: var(--text-tertiary); margin-bottom: 10px;
}
.consult-slide__submit {
  width: 100%; padding: 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  background: #3730A3; color: #fff; border: none; cursor: pointer;
  transition: opacity 0.15s;
}
.consult-slide__submit:disabled {
  opacity: 1; cursor: default;
  background: #ccc; color: #999;
}
.consult-slide__submit:not(:disabled):hover { opacity: 0.85; }

/* ── 전체보기 링크 ── */
.view-all-link {
  padding: 14px 16px; text-align: center;
  border-top: 1px solid var(--border-light);
}
.view-all-link a {
  font-size: 13px; font-weight: 600; color: var(--primary);
  text-decoration: none; transition: opacity 0.15s;
}
.view-all-link a:hover { opacity: 0.7; }

/* ── 답변 이메일 공개 ── */
.reply-email-box {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-top: 10px; border-radius: 8px;
  background: var(--bg-secondary); border: 1px solid var(--border-light);
}
.reply-email-box svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.reply-email-box__label { font-size: 11px; color: var(--text-tertiary); }
.reply-email-box__addr { font-size: 13px; font-weight: 500; color: var(--primary); }
.reply-form__email-check {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer;
}
.reply-form__email-check input[type="checkbox"] {
  accent-color: var(--primary); width: 15px; height: 15px;
}

/* ── 우측 콘텐츠 ── */
.planner-right {
  min-width: 0;
}
@media (max-width: 767px) {
  .planner-right {
    background: var(--bg-secondary);
  }
}

/* 우측 콘텐츠 카드 */
.content-card {
  background: var(--bg);
  padding: 20px;
  margin-bottom: 12px;
  border: 1px solid var(--border-light);
}
@media (min-width: 768px) {
  .content-card {
    border-radius: var(--radius-lg);
  }
}
@media (max-width: 767px) {
  .content-card {
    border-left: none;
    border-right: none;
    padding: 20px 16px;
  }
}
.content-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* ── 활동 세그먼티드 컨트롤 (미니 통계 + 탭 통합 · 시안 E) ── */
.activity-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 6px;
}
.activity-strip__hint {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
  margin: 0 6px 14px;
  font-weight: 500;
}
.activity-tab {
  background: transparent;
  border: none;
  padding: 12px 8px;
  min-height: 64px;
  cursor: pointer;
  text-align: center;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), box-shadow var(--transition);
}
.activity-tab:hover {
  background: rgba(255, 255, 255, 0.5);
}
.activity-tab.active {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.activity-tab__num {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-tertiary);
  line-height: 1;
  letter-spacing: -0.5px;
  transition: color var(--transition);
}
.activity-tab.active .activity-tab__num {
  color: var(--primary);
}
.activity-tab__num-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-left: 2px;
}
.activity-tab__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 5px;
  line-height: 1.2;
}
.activity-tab.active .activity-tab__label {
  color: var(--text-primary);
  font-weight: 700;
}
.activity-tab__label-sub {
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 2px;
}

/* 탭 패널 (활동 섹션 내부) */
.activity-panel {
  display: none;
}
.activity-panel.active {
  display: block;
  animation: tabFadeIn 0.3s ease;
}
@media (min-width: 768px) {
  /* PC: 탭 라인 ↔ 첫 카드 사이 호흡 */
  .activity-panel.active { padding-top: 18px; }
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 등장 애니메이션 ── */
.planner-left {
  animation: heroEnter 0.5s ease both;
}
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.planner-left__cta {
  animation: ctaPulse 0.4s 1.2s ease both;
}
@keyframes ctaPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ── 지역+지도 (우측 콘텐츠 카드 내) ── */
.region-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.region-text svg {
  color: var(--primary);
  flex-shrink: 0;
}
.region-map-wrap {
  position: relative;
}
.region-map {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
}
.region-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ── 상세 프로필 (우측 콘텐츠 카드 내) ── */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 480px) {
  .detail-grid { grid-template-columns: 1fr 1fr; }
}
.detail-item {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}
.detail-item--wide {
  grid-column: 1 / -1;
}
.detail-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.detail-label svg {
  flex-shrink: 0;
}
.detail-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre-line;
  word-break: keep-all;
}
.detail-text--with-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-affil-logo {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--border);
}
.detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-list li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  padding-left: 14px;
  position: relative;
}
.detail-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

/* ── 이전 히어로 호환 (deprecated, v19 제거 예정) ── */
.profile-hero { display: none; }
.profile-tabs { display: none; }
.profile-content { display: none; }

/* ── 이하 기존 스타일 유지 (소개탭 요소 등) ── */
/* 보험사 카드 (좌측 카드 내에서도 재사용 가능) */
.planner-left__stat {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  transition: background 0.15s;
}
.profile-hero__stat[data-action] {
  cursor: pointer;
}
.profile-hero__stat[data-action]:hover {
  background: var(--primary-50);
}
.profile-hero__stat[data-action]:active {
  background: var(--primary-100);
}
.profile-hero__stat:not(:last-child) {
  border-right: 1px solid var(--border);
}
.profile-hero__stat-num {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.profile-hero__stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* CTA 버튼 */
.profile-hero__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.profile-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: background var(--transition), transform 0.1s;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.profile-hero__cta:hover {
  background: var(--primary-dark);
}
.profile-hero__cta:active {
  transform: scale(0.97);
}
.profile-hero__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: background var(--transition), border-color var(--transition);
}
.profile-hero__share:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-tertiary);
}

/* 북마크 버튼 (v9) */
.profile-hero__bookmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: all var(--transition);
}
.profile-hero__bookmark:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-tertiary);
}
.profile-hero__bookmark.active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-50);
}
.profile-hero__bookmark.active svg {
  fill: var(--primary);
}

/* ── 탭 네비게이션 ── */
.profile-tabs {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.profile-tabs__inner {
  position: relative;
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.profile-tabs__inner::-webkit-scrollbar { display: none; }
.profile-tab {
  flex: 1;
  min-width: max-content;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: none;
  border: none;
  white-space: nowrap;
  transition: color var(--transition);
  position: relative;
}
.profile-tab.active {
  color: var(--primary);
}
.profile-tab:hover {
  color: var(--text-primary);
}
/* 밑줄 인디케이터 */
.profile-tab__indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transition: left 0.3s cubic-bezier(0.32, 0.72, 0, 1),
              width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── 탭 콘텐츠 ── */
.profile-content {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 40px;
  min-height: 50vh;
}
.tab-panel {
  display: none;
  animation: tabFadeIn 0.3s ease;
}
.tab-panel.active {
  display: block;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 소개 탭 ── */
.intro-section {
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--border-light);
}
.intro-section:last-child {
  border-bottom: none;
}
.intro-section__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

/* 보험사 카드 */
.intro-insurers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intro-insurer-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}
.intro-insurer-card__logo {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.intro-insurer-card__logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 0;
}
.intro-insurer-card__initial {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.intro-insurer-card__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.intro-insurer-card__role {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 전문분야 칩 */
.intro-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.intro-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--primary-100);
}
.intro-cat-chip .cat-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 활동지역 */
.intro-region__text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.intro-region__map-wrap {
  position: relative;
}
.intro-region__map {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
}
.intro-region__map-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ── 상세 프로필 ── */
.intro-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.intro-detail-item {
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}
.intro-detail-item__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.intro-detail-item__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-line;
  word-break: keep-all;
}
.intro-detail-item__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intro-detail-item__list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  padding-left: 14px;
  position: relative;
}
.intro-detail-item__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

/* ── 게시판 공통 ── */
.board-write-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  cursor: pointer;
}
.board-write-btn:hover {
  background: var(--primary-100);
}

.board-list {
  padding: 0;
}
.board-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-tertiary);
}
.board-empty svg {
  margin: 0 auto 12px;
  opacity: 0.5;
}
.board-empty p {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.board-empty__hint {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 게시글 아이템 (향후 데이터 연동 시) */
.board-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition);
}
.board-item:hover {
  background: var(--bg-secondary);
  margin: 0 -16px;
  padding: 16px;
  border-radius: var(--radius-sm);
}
.board-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}
.board-item__preview {
  font-size: 13px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
  line-height: 1.5;
}
.board-item__meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ── 1:1 상담 ── */
.consult-section {
  padding: 20px 0;
}
.consult-form-wrap {
  margin-bottom: 32px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md, 12px);
  padding: 24px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.consult-form__field {
  margin-bottom: 16px;
}
.consult-form__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* 공개/비공개 토글 */
.consult-form__toggle-group {
  display: flex;
  gap: 8px;
}
.consult-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.consult-toggle.active {
  color: var(--primary);
  background: var(--primary-50);
  border-color: var(--primary);
}

.consult-form__input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-primary);
  transition: border-color var(--transition);
  outline: none;
}
.consult-form__input:focus {
  border-color: var(--primary);
}
.consult-form__textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-primary);
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transition);
  outline: none;
  line-height: 1.5;
}
.consult-form__textarea:focus {
  border-color: var(--primary);
}
.consult-form__counter {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.consult-form__submit {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: background var(--transition), opacity var(--transition);
}
.consult-form__submit:hover:not(:disabled) {
  background: var(--primary-dark);
}
.consult-form__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.consult-form__notice {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
}
.consult-form__notice--warn {
  color: var(--accent-dark);
  background: var(--accent-50);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
}

.consult-list-wrap {
  padding-top: 0;
  position: relative;
}
/* 상담 폼과 목록 사이 장식 구분선 — 시안 E 적용으로 제거 (CLAUDE.md 금지: 의미 없는 장식) */
.consult-list__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

/* 로그인 안내 */
.consult-login-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  margin-bottom: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-secondary);
}
.consult-login-notice a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}
.consult-login-notice svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

/* 폼 에러 메시지 */
.consult-form__error {
  font-size: 13px;
  color: var(--error, var(--error));
  margin-bottom: 8px;
  display: none;
}
.consult-form__error.active {
  display: block;
}

/* 상태 필터 탭 */
.consult-filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.consult-filter-tab {
  flex-shrink: 0;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.consult-filter-tab:hover { opacity: 0.8; }
.consult-filter-tab.active {
  background: var(--primary);
  color: #fff;
}

/* 상담 카드 */
.consult-card {
  display: flex;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--border-light);
  animation: fadeInUp 0.3s ease both;
  animation-delay: calc(var(--i, 0) * 0.06s);
}
.consult-card:last-child { border-bottom: none; }

/* 좌측 상태 바 — 시안 E 적용으로 제거 (CLAUDE.md 금지: AI 좌측 컬러 바). 상태는 .consult-card__status 뱃지로만 표현 */
.consult-card__bar { display: none; }

.consult-card__main {
  flex: 1;
  min-width: 0;
}

/* 헤더 (클릭 영역) */
.consult-card__header {
  padding: 14px 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: var(--radius-sm);
}
.consult-card__header:hover {
  background: var(--bg-secondary);
}

.consult-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

/* 상태 뱃지 */
.consult-card__status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  flex-shrink: 0;
}
.consult-card__status--waiting {
  background: var(--accent-50);
  color: var(--accent-dark);
}
.consult-card__status--replied {
  background: var(--mint-50);
  color: var(--mint-dark);
}
.consult-card__status--closed {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

/* 비공개 아이콘 */
.consult-card__private {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.consult-card__meta {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

.consult-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 3px;
}

.consult-card__info {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* 상담 상세 (아코디언 본문) */
.consult-card__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.consult-card--expanded .consult-card__body {
  background: #F8F9FB;
  border-radius: 0 0 var(--radius-sm) 0;
}

.consult-card__content {
  padding: 16px 12px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.consult-card__user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 답변 스레드 */
.consult-replies {
  border-top: 1px solid var(--border-light);
  padding: 12px;
}
.consult-replies__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.consult-reply {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  animation: fadeInUp 0.2s ease both;
}
.consult-reply:last-child { margin-bottom: 0; }

.consult-reply__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.consult-reply__avatar--planner {
  background: var(--primary-50);
  color: var(--primary);
}

.consult-reply__bubble {
  flex: 1;
  min-width: 0;
}
.consult-reply__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.consult-reply__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.consult-reply__badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--primary-50);
  color: var(--primary);
}
.consult-reply__date {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
}
.consult-reply__content {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─────────── P5 비공개 답변 잠금 카드 (방식 B) ─────────── */
.consult-reply--masked .consult-reply__bubble {
  background: var(--bg-tertiary, #f3f4f6);
  border: 1px dashed var(--border, #d1d5db);
  padding: 10px 12px;
  border-radius: var(--radius-md, 10px);
}
.consult-reply--masked .consult-reply__avatar {
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--text-tertiary, #9ca3af);
}
.consult-reply--masked .consult-reply__name {
  color: var(--text-tertiary, #9ca3af);
}
.consult-reply--masked .consult-reply__content {
  color: var(--text-secondary, #4b5563);
  font-size: 13px;
  font-weight: 500;
}

.consult-reply__lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
}
.consult-reply__lock-badge svg { width: 11px; height: 11px; }
.consult-reply__lock-badge--neutral {
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--text-secondary, #4b5563);
}
.consult-reply__lock-badge--email {
  background: #FEF3C7;
  color: #92400E;
}

/* 비공개 상담 — 답변 없을 때 잠금 placeholder (답변 [비공개] 카드와 디자인 일관) */
.consult-masked-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px;
  padding: 14px 16px;
  background: var(--bg-tertiary, #f3f4f6);
  border: 1px dashed var(--border, #d1d5db);
  border-radius: var(--radius-md, 10px);
  color: var(--text-secondary, #4b5563);
  font-size: 13px;
}
.consult-masked-placeholder svg {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary, #9ca3af);
  flex-shrink: 0;
}

/* 답변 입력 폼 */
.consult-reply-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.consult-reply-form__input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
  resize: none;
  min-height: 36px;
  max-height: 100px;
  outline: none;
  line-height: 1.5;
}
.consult-reply-form__input:focus {
  border-color: var(--primary);
}
.consult-reply-form__submit {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: background 0.15s, opacity 0.15s;
  align-self: flex-end;
}
.consult-reply-form__submit:hover:not(:disabled) {
  background: var(--primary-dark);
}
.consult-reply-form__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 상담 삭제 버튼 */
.consult-card__actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 10px;
}
.consult-card__delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.consult-card__delete-btn:hover {
  background: var(--error-bg);
  color: var(--error);
  border-color: var(--error-border);
}

/* 페이지네이션 (기존 expert-pagination과 동일 패턴) */
.consult-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  padding: 8px 0;
}

/* ── 공유 토스트 ── */
.share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--text-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.share-toast.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ── PC 반응형 (v19 — 2단 레이아웃 보완) ── */
@media (min-width: 768px) {
  /* 지도 높이 확장 */
  .region-map {
    height: 200px;
  }

  /* 상담 폼 최대 너비 */
  .consult-form {
    max-width: 480px;
  }
}

/* ── Q&A 답변 탭 (v8b) ── */
.qna-tab-card {
  display: flex;
  gap: 0;
  text-decoration: none;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  transition: box-shadow 0.18s, border-color 0.18s;
  animation: fadeInUp 0.3s ease both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.qna-tab-card:hover {
  border-color: var(--primary-200, #C7D2FE);
  box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}
/* Q&A 답변 카드 좌측 상태 바 — 시안 E 적용으로 제거 (CLAUDE.md 금지: AI 좌측 컬러 바). 상태는 .qna-tab-card__status 뱃지로 표현 */
.qna-tab-card__bar { display: none; }
.qna-tab-card__main {
  flex: 1;
  padding: 12px 14px;
  min-width: 0;
}
.qna-tab-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.qna-tab-card__status {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}
.qna-tab-card__status--answered {
  color: var(--mint);
  background: var(--mint-50);
}
.qna-tab-card__status--unanswered {
  color: var(--accent);
  background: var(--accent-50);
}
.qna-tab-card__date {
  font-size: 11px;
  color: var(--text-tertiary);
}
.qna-tab-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qna-tab-card__meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Q&A 탭 페이지네이션 */
.qna-tab-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 12px 0 4px;
}

/* ── 비슷한 설계사 추천 ── */
.similar-section {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  padding: 28px 16px 40px;
}
.similar-section__inner {
  max-width: 1060px;
  margin: 0 auto;
}
.similar-section__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.similar-section__desc {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}
.similar-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .similar-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── 비슷한 설계사 카드 (메인 설계사 카드와 동일 디자인) ── */
.similar-planner-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.similar-planner-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* 아바타 (64px 뮤트톤) */
.sim-avatar-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sim-avatar-ring__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.sim-avatar-ring__img img { width: 100%; height: 100%; object-fit: cover; }

/* 카드 정보 (card-info, card-info__name-row, card-info__name, card-info__role) */
.card-info { flex: 1; min-width: 0; }
.card-info__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  row-gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.card-info__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.card-info__role {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 타입 뱃지 */
.type-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.type-badge--compare {
  background: #EEF2FF;
  color: #1E1B4B;
}
.type-badge--exclusive {
  background: var(--accent-50);
  color: var(--accent-dark);
  padding: 3px 10px 3px 4px;
  gap: 5px;
}
.type-badge__logo {
  width: 20px;
  height: 20px;
  border-radius: 0;
  object-fit: contain;
  border: none;
  background: transparent;
}
.type-badge__initial {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
}

/* 상품 태그 (배경 없음, 텍스트만) */
.product-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.product-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--mint-dark);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* 보험사 인라인 (비교전문) */
.company-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.company-inline__item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.company-inline__dot {
  color: #D1D5DB;
  margin: 0 1px;
  font-size: 11px;
}
.company-inline__logo {
  width: 20px;
  height: 20px;
  border-radius: 0;
  object-fit: contain;
  border: none;
  background: transparent;
  flex-shrink: 0;
}
.company-inline__initial {
  width: 20px;
  height: 20px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* 인사말 */
.card-info__greeting {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 화살표 */
.sim-card-arrow {
  position: absolute;
  right: 14px;
  top: 18px;
  color: var(--text-tertiary);
  opacity: 0.4;
  transition: opacity 0.2s;
}
.similar-planner-card:hover .sim-card-arrow { opacity: 0.65; }

@media (min-width: 768px) {
  .similar-section {
    padding: 36px 24px 52px;
  }
}

/* ── 등장 애니메이션 ── */
.profile-hero__content {
  animation: heroEnter 0.5s ease both;
}
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.profile-hero__stats {
  animation: heroEnter 0.5s 0.15s ease both;
}
.profile-hero__actions {
  animation: heroEnter 0.5s 0.25s ease both;
}

/* 상담하기 CTA — 진입 1초 후 1회 pulse */
.profile-hero__cta {
  animation: ctaPulse 0.4s 1.2s ease both;
}
@keyframes ctaPulse {
  0%   { transform: scale(1); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); }
  50%  { transform: scale(1.05); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4); }
  100% { transform: scale(1); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); }
}

/* ══════════════════════════════════════
   보험 칼럼 (v5 — 시안B + 컬러바 최종)
   ══════════════════════════════════════ */

/* 로딩 스피너 */
.board-loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.board-loading__spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 글 카드 — 시안B 레이아웃 (좌측 컬러바 제거, 최신은 NEW 배지로 강조) */
.expert-post {
  border-bottom: 1px solid var(--border-light);
  animation: fadeInUp 0.3s ease both;
}
/* 순차 등장 (JS에서 style로 --i 주입) */
.expert-post { animation-delay: calc(var(--i, 0) * 0.06s); }
.expert-post:last-child { border-bottom: none; }

/* 콘텐츠 영역 */
.expert-post__main {
  min-width: 0;
}

/* 헤더 (클릭 영역) */
.expert-post__header {
  padding: 14px 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: var(--radius-sm);
}
.expert-post__header:hover {
  background: var(--bg-secondary);
}
.expert-post__header:active {
  background: var(--bg-tertiary, #E5E7EB);
}

/* 상단: 카테고리 뱃지 + (최신) NEW 배지 + 메타 */
.expert-post__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.expert-post__badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  flex-shrink: 0;
  letter-spacing: -0.2px;
}
/* NEW 배지 — 24시간 이내 글 강조 (좌측 컬러바 대체) */
.expert-post__new {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.expert-post__meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* 제목 */
.expert-post__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 3px;
}

/* 미리보기 (2줄) — 펼침 시 숨김 */
.expert-post__preview {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.expert-post--expanded .expert-post__preview {
  display: none;
}

/* 본문 (아코디언 — 기본 숨김) */
.expert-post__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
/* 펼침 시 배경색으로 시각적 구분 (v7: 더 연한 배경으로 가볍게) */
.expert-post--expanded .expert-post__body {
  background: #F8F9FB;
  border-radius: 0 0 var(--radius-sm) 0;
}
.expert-post__content {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  padding: 12px 12px 10px;
}
/* 본문 높이 제한 wrapper (v6 — max-height 400px + 더 읽기) */
.expert-post__content-wrap {
  max-height: 400px;
  overflow: hidden;
  position: relative;
}
/* 하단 그라데이션 (잘린 본문 시각 표시) — JS에서 --clamped 클래스 부여 */
.expert-post__content-wrap--clamped:not(.expert-post__content-wrap--expanded)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #F8F9FB);
  pointer-events: none;
}
/* 더 읽기 확장 상태 */
.expert-post__content-wrap--expanded {
  max-height: none;
}
/* 더 읽기 버튼 */
.expert-post__read-more {
  display: none;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.expert-post__read-more:hover {
  background: rgba(37, 99, 235, 0.04);
}
.expert-post--expanded .expert-post__content {
  display: block;
  overflow: visible;
}

/* 마크다운/서식 스타일 */
.expert-post__content strong,
.expert-post__content b {
  font-weight: 700;
  color: var(--text-primary);
}
.expert-post__h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 12px 0 4px;
  line-height: 1.4;
}
.expert-post__li {
  display: block;
  padding-left: 4px;
}
/* 수정/삭제 버튼 (v6 — 아이콘+텍스트, border 라운드) */
.expert-post__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding: 0 12px 10px;
}
.expert-post__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.expert-post__action-btn svg {
  flex-shrink: 0;
}
.expert-post__action-btn--edit:hover {
  background: var(--primary-50);
  color: var(--primary);
  border-color: var(--primary-100);
}
.expert-post__action-btn--del {
  color: var(--text-tertiary);
}
.expert-post__action-btn--del:hover {
  background: var(--error-bg);
  color: var(--error);
  border-color: var(--error-border);
}

/* 더보기 버튼 */
.board-more-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}
.board-more-btn:hover {
  background: var(--bg-tertiary, #E5E7EB);
}

/* 글쓰기/수정 모달 */
.expert-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  animation: fadeIn 0.2s ease;
}

/* 모바일: 바텀시트 패턴 */
.expert-modal {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-height: 92vh;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease both;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* PC: 센터 모달 */
@media (min-width: 768px) {
  .expert-modal {
    left: 50%; right: auto; bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 64px);
    max-width: 600px;
    max-height: 85vh;
    border-radius: 16px;
    animation: fadeInCenter 0.25s ease both;
  }
  @keyframes fadeInCenter {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
}

/* ★ #9 칼럼 모달 헤더: 블루 계열 + 장식 도형 */
.expert-modal__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 24px;
  border-bottom: none;
  background: linear-gradient(135deg, #2E2A83 0%, #3730A3 50%, #6366F1 100%);
  position: relative;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.expert-modal__header::before {
  content: '';
  position: absolute;
  top: -18px;
  right: -10px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.expert-modal__header::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: 40px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}
.expert-modal__title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}
.expert-modal__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 6px;
  border-radius: 50%;
  transition: background 0.15s;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.expert-modal__close:hover {
  background: rgba(255,255,255,0.3);
}
.expert-modal__body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.expert-modal__field {
  margin-bottom: 16px;
  position: relative;
}
.expert-modal__field:last-child { margin-bottom: 0; }
/* 카테고리 field — 기본 */
.expert-modal__field:first-of-type { margin-bottom: 16px; }
/* 제목 field — 카테고리와 간격 확보 (draft-banner div 때문에 3번째) */
.expert-modal__body > div:nth-of-type(3) { margin-top: 30px !important; }
.expert-modal__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.expert-modal__label svg {
  flex-shrink: 0;
}

/* ── 카테고리 칩 (글쓰기 모달) ── */
.expert-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
.expert-cat-chip {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
/* 비활성 — 3색 체계 (코발트/민트/앰버) */
.expert-cat-chip[data-color="blue"]   { background: #E0E7FF; color: #1E1B4B; }
.expert-cat-chip[data-color="mint"]   { background: var(--mint-50); color: var(--mint-dark); }
.expert-cat-chip[data-color="amber"]  { background: var(--accent-50); color: var(--accent-dark); }
.expert-cat-chip:hover { opacity: 0.8; }
/* 선택 상태 — 진한 배경 + 흰 텍스트 */
.expert-cat-chip.active { color: #fff; }
.expert-cat-chip.active[data-color="blue"]   { background: #3730A3; }
.expert-cat-chip.active[data-color="mint"]   { background: var(--mint); }
.expert-cat-chip.active[data-color="amber"]  { background: var(--accent); }
/* 이번 주 작성 완료 칩 */
.expert-cat-chip.done {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.expert-cat-chip.done::after {
  content: ' ✓';
  font-size: 11px;
}

/* 카테고리 설명 힌트 — 텍스트만, 박스 없음 */
.expert-cat-hint {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s, opacity 0.25s, margin 0.25s;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 0;
  padding-left: 6px;
  border-left: 2px solid transparent;
}
.expert-cat-hint.show {
  max-height: 40px;
  opacity: 1;
  margin-top: 12px;
  margin-bottom: 4px;
}
/* 카테고리별 왼쪽 액센트 + 텍스트 색상 (흰 배경 가독성 확보) */
.expert-cat-hint[data-hint-color="blue"]   { border-left-color: #3730A3; color: #1E1B4B; }
.expert-cat-hint[data-hint-color="green"]  { border-left-color: var(--mint); color: var(--mint-dark); }
.expert-cat-hint[data-hint-color="purple"] { border-left-color: #7C3AED; color: #5B21B6; }
.expert-cat-hint[data-hint-color="coral"]  { border-left-color: #E8593C; color: #991B1B; }
.expert-cat-hint[data-hint-color="amber"]  { border-left-color: var(--accent); color: var(--accent-dark); }
.expert-cat-hint__desc {
  display: block;
}
/* example 줄 숨김 */
.expert-cat-hint__example {
  display: none;
}

/* ── 글 목록 카테고리 뱃지 색상 (v6 톤다운) ── */
.expert-post__badge--blue   { background: #EEF2FF; color: #1E1B4B; }
.expert-post__badge--green  { background: var(--mint-50); color: var(--mint-dark); }
.expert-post__badge--purple { background: #F5F3FF; color: #5B21B6; }
.expert-post__badge--coral  { background: var(--error-bg); color: #991B1B; }
.expert-post__badge--amber  { background: var(--accent-50); color: var(--accent-dark); }
.expert-modal__input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-primary);
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.expert-modal__input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ── 미니 에디터 (contenteditable + 툴바) ── */
/* 에디터 wrap에 배경 추가 (모달 bg-secondary 위에서 구분) */
.expert-editor-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: visible;
  transition: border-color 0.15s;
  background: #fff;
}
.expert-editor-wrap:focus-within {
  border-color: var(--primary);
}
.expert-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  border-radius: 7px 7px 0 0;
  position: relative;
}
.expert-editor__toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  transition: background 0.12s, color 0.12s;
}
.expert-editor__toolbar button:hover {
  background: var(--bg-tertiary, #E5E7EB);
  color: var(--text-primary);
}
.expert-editor__toolbar button.active {
  background: var(--primary-50);
  color: var(--primary);
}
.expert-editor__toolbar .toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}
/* 색상 버튼 */
.expert-editor__toolbar .color-btn {
  position: relative;
}
.expert-editor__toolbar .color-btn::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 8px; right: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--editor-color, var(--primary));
}
.color-picker-wrap {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  display: none;
  gap: 6px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 10;
  flex-wrap: wrap;
  width: 164px;
}
.color-picker-wrap.active {
  display: flex;
}
.color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.color-swatch:hover {
  transform: scale(1.15);
}
.color-swatch.active {
  border-color: var(--text-primary);
}

/* 에디터 본문 */
.expert-editor__content {
  min-height: 180px;
  max-height: 400px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  overflow-y: auto;
  outline: none;
  border-radius: 0 0 8px 8px;
}
/* 붙여넣기 시 외부 font-size, background 등 무시 — 일관된 크기 유지 */
.expert-editor__content *:not(img) {
  font-size: inherit !important;
  font-family: inherit !important;
  background-color: transparent !important;
  line-height: inherit !important;
}
/* 에디터/게시글 내 이미지 반응형 */
.expert-editor__content img,
.expert-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
  display: block;
}
/* 에디터 이미지 리사이즈 핸들 */
.expert-img-resize-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.expert-img-resize-wrap img {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.expert-img-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--primary);
  border: 2px solid #fff;
  border-radius: 2px;
  cursor: nwse-resize;
  z-index: 5;
  bottom: -4px;
  right: -4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
/* 게시글 표시 영역에서도 동일 제한 */
.expert-post__content *:not(img) {
  font-size: inherit !important;
  font-family: inherit !important;
  background-color: transparent !important;
}
/* font 태그 (execCommand foreColor 생성) 크기 고정 */
.expert-editor__content font,
.expert-post__content font {
  font-size: inherit !important;
  font-family: inherit !important;
}
.expert-editor__content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* auto-draft 복구 배너 */
.expert-modal__draft-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--primary);
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  border-radius: 8px;
}
.expert-modal__draft-banner.active {
  display: flex;
  animation: tabFadeIn 0.3s ease;
}
.expert-modal__draft-banner button {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.expert-modal__draft-restore {
  background: var(--primary);
  color: #fff;
}
.expert-modal__draft-restore:hover {
  background: var(--primary-dark);
}
.expert-modal__draft-dismiss {
  background: transparent;
  color: var(--text-tertiary);
}
.expert-modal__draft-dismiss:hover {
  background: var(--bg-tertiary, #E5E7EB);
}

.expert-modal__counter {
  text-align: right;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.expert-modal__footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}
.expert-modal__footer-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* 인라인 에러 메시지 */
.expert-modal__error {
  font-size: 13px;
  color: var(--error, var(--error));
  padding: 0 0 10px;
  line-height: 1.4;
  display: none;  /* JS에서 텍스트 있을 때만 표시 */
}
.expert-modal__error.active {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  animation: shakeX 0.3s ease;
}
.expert-modal__error.active::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
}
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
/* 성공 체크마크 상태 */
.expert-modal__btn--submit.success {
  background: var(--mint);
  pointer-events: none;
}
.expert-modal__btn--submit.success::before {
  content: '✓ ';
}
/* safe-area 대응 (모바일 하단) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .expert-modal__footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}
.expert-modal__btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.expert-modal__btn--cancel {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.expert-modal__btn--cancel:hover {
  background: var(--bg-tertiary, #E5E7EB);
}
.expert-modal__btn--submit {
  background: var(--primary);
  color: #fff;
}
.expert-modal__btn--submit:hover:not(:disabled) {
  background: var(--primary-hover, #2E2A83);
}
.expert-modal__btn--submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   v7: 검색 바 + 카테고리 필터 탭 + 페이지네이션
   ══════════════════════════════════════ */

/* ── 검색 바 ── */
.expert-search {
  position: relative;
  margin-bottom: 10px;
}
.expert-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}
.expert-search__input {
  width: 100%;
  padding: 9px 36px 9px 36px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-primary);
  transition: border-color 0.15s;
  outline: none;
}
.expert-search__input:focus {
  border-color: var(--primary);
}
.expert-search__input::placeholder {
  color: var(--text-tertiary);
}
.expert-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--text-tertiary);
  transition: background 0.15s, color 0.15s;
}
.expert-search__clear:hover {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* ── 카테고리 필터 탭 ── */
/* ★ #10 작은 화면에서 줄바꿈 대신 스크롤 */
.expert-filter-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.expert-filter-tabs::-webkit-scrollbar { display: none; }
.expert-filter-tabs::after {
  content: '';
  flex-shrink: 0;
  width: 16px;
  display: block;
}
.expert-filter-tab {
  flex-shrink: 0;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.expert-filter-tab:hover {
  opacity: 0.8;
}
.expert-filter-tab.active {
  background: var(--primary);
  color: #fff;
}
/* 카테고리별 활성 색상 — 3색 체계 */
.expert-filter-tab.active[data-color="blue"]   { background: #3730A3; }
.expert-filter-tab.active[data-color="mint"]   { background: var(--mint); }
.expert-filter-tab.active[data-color="amber"]  { background: var(--accent); }

/* ── 페이지네이션 ── */
.expert-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  padding: 8px 0;
}
.expert-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.expert-pagination__btn:hover:not(:disabled):not(.active) {
  background: var(--bg-secondary);
  border-color: var(--text-tertiary);
}
.expert-pagination__btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
  pointer-events: none;
}
.expert-pagination__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.expert-pagination__btn--arrow {
  padding: 0;
  width: 32px;
}
.expert-pagination__btn--arrow svg {
  width: 16px;
  height: 16px;
}
/* 검색 결과 없음 메시지 */
.board-empty--search {
  padding: 32px 20px;
}
.board-empty--search .board-empty__hint {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .expert-search__input {
    font-size: 14px;
    padding: 10px 36px;
  }
  .expert-filter-tabs {
    gap: 8px;
  }
  .expert-filter-tab {
    padding: 6px 16px;
    font-size: 13px;
  }
}

/* ── URL 파라미터로 특정 게시글 하이라이트 ── */
.post--highlighted {
  animation: postHighlight 1.5s ease;
}
@keyframes postHighlight {
  0%, 100% { background: transparent; }
  30% { background: rgba(37,99,235,0.08); }
}

/* ══════════════════════════════════════
   v15: 칼럼 작성 가이드 & 정책 안내
   ══════════════════════════════════════ */
.expert-guide {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.expert-guide__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
}
.expert-guide__header svg {
  color: #94a3b8;
  flex-shrink: 0;
}
.expert-guide__list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.expert-guide__list li {
  font-size: 11px;
  color: #64748b;
  padding-left: 12px;
  position: relative;
  line-height: 1.55;
}
.expert-guide__list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: #94a3b8;
}
.expert-guide__list li strong {
  color: #374151;
  font-weight: 600;
}
.expert-guide__disclaimer {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0;
  padding-top: 7px;
  border-top: 1px solid #e2e8f0;
}

/* ═════════════════════════════════════════════════════════
   모바일 활동 평탄화
   PC: 세그먼티드 탭 + 1개 패널 표시 (기본 동작)
   모바일: 세그먼티드는 통계 표시로 유지 (탭 동작 무력화) + 모든 패널 세로 적층
   ═════════════════════════════════════════════════════════ */
.activity-panel__mobile-header {
  display: none; /* PC에선 숨김 */
}

@media (max-width: 767px) {
  /* 모바일에서는 세그먼티드를 통계 표시로 평탄화 (모든 셀 동등) */
  .activity-strip {
    padding: 3px;
  }
  .activity-tab,
  .activity-tab.active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 10px 6px;
    min-height: 60px;
  }
  .activity-tab__num,
  .activity-tab.active .activity-tab__num {
    color: var(--primary);
    font-size: 19px;
  }
  .activity-tab__label,
  .activity-tab.active .activity-tab__label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 10.5px;
    margin-top: 4px;
  }
  /* 모든 패널 표시 */
  .activity-panel {
    display: block !important;
  }
  /* 패널 사이 시각 구분 — 풀너비 8px 회색 디바이더 (P1 카드 갭과 일관) */
  .activity-panel + .activity-panel {
    margin: 0 -16px;            /* .content-card 좌우 padding 16px 상쇄 → 풀너비 */
    padding: 24px 16px 0;
    border-top: 8px solid var(--bg-secondary);
  }
  /* 패널별 모바일 헤더 표시 */
  .activity-panel__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .activity-panel__mobile-header h3 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 0;
  }
  .activity-panel__mobile-header h3 .count {
    color: var(--text-tertiary);
    font-weight: 600;
    margin-left: 4px;
  }
}

/* ═══════════════════════════════════════════════
   v53: 모바일 :hover 가드 (터치 디바이스 hover 고착 차단)
   터치 디바이스에서 탭 후 :hover 상태가 고착되는 문제 차단.
   각 :hover 규칙이 바꾸는 속성을 base 값으로 복원 (full-restore).
   :not(:active) — 실제 탭 순간(:active)에는 hover 효과 유지.
   deprecated .profile-hero__*·.profile-tab(display:none)은 가드 제외.
   cascade 우선순위 보장 위해 파일 끝 배치.
   ═══════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .planner-left__cta:hover:not(:active):not(.planner-left__cta--secondary) { background: var(--primary); }
  .planner-left__cta--secondary:hover:not(:active) { background: var(--mint, #2e9e6e); }
  .planner-left__sub-btn:hover:not(:active):not(.active) { border-color: var(--border); color: var(--text-secondary); }
  .consult-slide__close:hover:not(:active) { background: var(--bg-secondary); }
  .consult-slide__trust-info:hover:not(:active) { color: var(--text-tertiary); }
  .consult-slide__trust-info:hover:not(:active):not(:focus)::after { opacity: 0; visibility: hidden; }
  .consult-slide__submit:not(:disabled):hover:not(:active) { opacity: 1; }
  .view-all-link a:hover:not(:active) { opacity: 1; }
  .activity-tab:hover:not(:active) { background: transparent; }
  .board-write-btn:hover:not(:active) { background: var(--primary-50); }
  .board-item:hover:not(:active) { background: transparent; margin: 0; padding: 16px 0; border-radius: 0; }
  .consult-form__submit:hover:not(:active):not(:disabled) { background: var(--primary); }
  .consult-filter-tab:hover:not(:active) { opacity: 1; }
  .consult-card__header:hover:not(:active) { background: transparent; }
  .consult-reply-form__submit:hover:not(:active):not(:disabled) { background: var(--primary); }
  .consult-card__delete-btn:hover:not(:active) { background: var(--bg); color: var(--text-tertiary); border-color: var(--border); }
  .qna-tab-card:hover:not(:active) { border-color: var(--border-light); box-shadow: none; }
  .similar-planner-card:hover:not(:active) { border-color: var(--border); box-shadow: none; }
  .similar-planner-card:hover:not(:active) .sim-card-arrow { opacity: 0.4; }
  .expert-post__header:hover:not(:active) { background: transparent; }
  .expert-post__read-more:hover:not(:active) { background: transparent; }
  .expert-post__action-btn--edit:hover:not(:active) { background: var(--bg); color: var(--text-secondary); border-color: var(--border); }
  .expert-post__action-btn--del:hover:not(:active) { background: var(--bg); color: var(--text-tertiary); border-color: var(--border); }
  .board-more-btn:hover:not(:active) { background: var(--bg-secondary); }
  .expert-modal__close:hover:not(:active) { background: rgba(255,255,255,0.15); }
  .expert-cat-chip:hover:not(:active) { opacity: 1; }
  .expert-editor__toolbar button:hover:not(:active):not(.active) { background: transparent; color: var(--text-secondary); }
  .color-swatch:hover:not(:active) { transform: none; }
  .expert-modal__draft-restore:hover:not(:active) { background: var(--primary); }
  .expert-modal__draft-dismiss:hover:not(:active) { background: transparent; }
  .expert-modal__btn--cancel:hover:not(:active) { background: var(--bg-secondary); }
  .expert-modal__btn--submit:hover:not(:active):not(:disabled) { background: var(--primary); }
  .expert-search__clear:hover:not(:active) { background: transparent; color: var(--text-tertiary); }
  .expert-filter-tab:hover:not(:active) { opacity: 1; }
  .expert-pagination__btn:hover:not(:active):not(:disabled):not(.active) { background: var(--bg); border-color: var(--border); }
}

/* .activity-tab base 배경은 ≤767px에서 @media(max-width:767px)가 #fff로 강제,
   768px+ 에서는 transparent. 메인 가드는 transparent 복원 → ≤767px 한정 #fff 재복원.
   (코드 정렬: 메인 가드 블록 뒤에 위치해 ≤767px 터치에서 우선 적용) */
@media (hover: none) and (max-width: 767px), (pointer: coarse) and (max-width: 767px) {
  .activity-tab:hover:not(:active) { background: #fff; }
}