/* ============================================================
   헤어왕 v2 — 마이페이지/프로필 리스킨 (profile.php 전용)
   - .sns-profile-layout.hwv2 스코프로 기존 sns-profile-* 를 v2 톤 오버라이드
     (JS 가 하드코딩 클래스로 DOM 을 재생성하므로 클래스명은 유지, 스타일만 교체)
   - 신규 요소: .hw-mp-stats(통계 스트립) / .hw-mp-quick(빠른 액션) / .hw-mp-tabs(탭)
   - 색/그림자/반경/폰트는 hw_v2.css :root 토큰만 사용
   ============================================================ */

.sns-profile-layout.hwv2 { font-family: var(--hw-font); color: var(--hw-ink); }

/* ============================================================
   좌측 마이페이지 메뉴 (본인)
   ============================================================ */
.hwv2 .sns-profile-side { border-color: var(--hw-line); border-radius: var(--hw-r-lg); }
.hwv2 .sns-profile-side-title { color: var(--hw-ink-3); }
.hwv2 .sns-profile-side-list a { color: var(--hw-ink-2); border-radius: 10px; }
.hwv2 .sns-profile-side-list a:hover { background: var(--hw-grape-50); color: var(--hw-grape-700); }
.hwv2 .sns-profile-side-list a.active { background: var(--hw-grape-50); color: var(--hw-grape-700); font-weight: 700; }
.hwv2 .sns-profile-side-count { color: var(--hw-ink-4); }
.hwv2 .sns-profile-side-list a.active .sns-profile-side-count { color: var(--hw-grape-500); }
@media (max-width: 1024px) {
  .hwv2 .sns-profile-side-list a { background: var(--hw-surface-2); color: var(--hw-ink-2); }
  .hwv2 .sns-profile-side-list a:hover { background: var(--hw-surface-3); }
  .hwv2 .sns-profile-side-list a.active { background: var(--hw-grape-50); color: var(--hw-grape-700); }
}

/* ============================================================
   Hero — 밝은 연보라 헤더
   ============================================================ */
.hwv2 .sns-profile-hero {
  color: var(--hw-ink);
  border: 1px solid var(--hw-grape-100);
  border-radius: var(--hw-r-lg);
  background: var(--hw-grape-50);
  margin-bottom: 0;
}
.hwv2 .sns-profile-hero-bg { background: var(--hw-grape-50); }
.hwv2 .sns-profile-hero-bg::after {
  background:
    radial-gradient(circle at 90% -14%, rgba(106,60,239,0.14) 0%, transparent 44%),
    radial-gradient(circle at 6% 8%, rgba(106,60,239,0.06) 0%, transparent 34%);
}
.hwv2 .sns-profile-hero-body {
  min-height: 0;
  padding: 26px 28px 30px;
  gap: 20px;
}
.hwv2 .sns-profile-hero-name {
  color: var(--hw-ink);
  font-size: 23px;
  letter-spacing: -0.03em;
}
.hwv2 .sns-profile-hero-edit-icon,
.hwv2 .sns-profile-hero-settings-icon { color: var(--hw-ink-4); }
.hwv2 .sns-profile-hero-edit-icon:hover,
.hwv2 .sns-profile-hero-settings-icon:hover { color: var(--hw-grape-700); }

/* 레벨/유형 뱃지 줄 */
.hw-mp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 9px 0 0; }
.hw-mp-badges .badge { height: 23px; }

/* bio (JS 재생성 클래스: sns-profile-hero-bio*) */
.hwv2 .sns-profile-hero-bio-wrap { margin: 13px 0 0; }
.hwv2 .sns-profile-hero-bio { color: var(--hw-ink-2); font-weight: 500; }
.hwv2 .sns-profile-hero-bio-text { max-width: 520px; }
.hwv2 .sns-profile-hero-bio-pen { color: var(--hw-ink-4); }
.hwv2 .sns-profile-hero-bio-filled:hover { color: var(--hw-grape-700); }
.hwv2 .sns-profile-hero-bio-filled:hover .sns-profile-hero-bio-pen { color: var(--hw-grape-700); }
.hwv2 .sns-profile-hero-bio-empty { color: var(--hw-ink-3); }
.hwv2 .sns-profile-hero-bio-empty:hover { color: var(--hw-grape-700); }
.hwv2 .sns-profile-hero-bio-empty .plus { color: var(--hw-grape-600); }

/* 경력/회사 */
.hwv2 .sns-profile-hero-company { margin: 12px 0 0; }
.hwv2 .sns-profile-hero-company-name { color: var(--hw-ink); }
.hwv2 .sns-profile-hero-company-meta { color: var(--hw-ink-3); }

/* 아바타 — ring */
.hwv2 .sns-profile-hero-avatar-wrap { width: 88px; height: 88px; align-self: flex-start; }
.hwv2 .sns-profile-hero-avatar {
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--hw-grape-300), var(--hw-sh-md);
  background: #fff;
}
.hwv2 .sns-profile-hero-avatar-fallback { color: var(--hw-grape-400); font-size: 34px; font-weight: 800; }
.hwv2 .sns-profile-avatar-box { position: relative; flex: 0 0 auto; }
/* 설정 — 액션 줄 우측 끝 아이콘 버튼 (본인 뷰) */
.hwv2 .sns-profile-header { position: relative; }
.hwv2 .sns-profile-btn-gear { width: 38px; height: 38px; padding: 0; border-radius: 50%; justify-content: center; }
.hwv2 .sns-profile-hero-avatar-cam {
  right: 0; bottom: 0; width: 28px; height: 28px;
  background: var(--hw-grape-700); border-color: #fff;
}
.hwv2 .sns-profile-hero-avatar-cam:hover { background: var(--hw-grape-800); }

/* ============================================================
   통계 스트립 — 흰 카드 (헤더 하단 오버랩)
   ============================================================ */
.hw-mp-stats {
  position: relative; z-index: 3;
  display: flex; align-items: stretch; gap: 0;
  margin: -18px 18px 14px;
  padding: 15px 0;
  background: #fff;
  border: 1px solid var(--hw-line);
  border-radius: var(--hw-r-lg);
  box-shadow: var(--hw-sh-md);
}
.hw-mp-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.hw-mp-stat + .hw-mp-stat { border-left: 1px solid var(--hw-line); }
.hw-mp-stat b { font-size: 19px; font-weight: 800; color: var(--hw-ink); letter-spacing: -0.03em; }
.hw-mp-stat span { font-size: 12px; font-weight: 600; color: var(--hw-ink-3); }
.hw-mp-stat.is-crown b { color: var(--hw-gold); }
.hw-mp-stat.is-best b { color: var(--hw-best); }
/* 지표는 각각 목록 페이지(profile_list.php)로 이동하는 링크 */
a.hw-mp-stat { text-decoration: none; color: inherit; border-radius: 10px; transition: background .12s; }
a.hw-mp-stat:hover { background: var(--hw-surface-2, #F4F4F8); }
a.hw-mp-stat:hover span { color: var(--hw-grape-700, #6A3CEF); }

/* 타인 뷰 — 헤더 카드 안에서 상단 구분선 stat strip (그림자/보더 없음) */
.hw-mp-stats.hw-mp-stats-inline {
  margin: 16px 0 0;
  padding: 16px 0 2px;
  border: 0;
  border-top: 1px solid var(--hw-line);
  border-radius: 0;
  box-shadow: none;
}

/* ============================================================
   빠른 액션 — 내 명함 / 추천하기
   ============================================================ */
.hw-mp-quick { display: flex; gap: 10px; margin: 0 0 16px; }
.hw-mp-qbtn {
  flex: 1; height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--hw-r-md); border: 1.5px solid var(--hw-line-2);
  background: #fff; color: var(--hw-grape-700);
  font-family: var(--hw-font); font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.hw-mp-qbtn:hover { background: var(--hw-grape-50); border-color: var(--hw-grape-300); }
.hw-mp-qbtn:active { transform: scale(.98); }

/* ============================================================
   탭 (소개 / 포트폴리오 앵커)
   ============================================================ */
.hw-mp-tabs { display: flex; gap: 22px; margin: 4px 0 16px; padding: 0 4px; border-bottom: 1px solid var(--hw-line); }
.hw-mp-tab {
  padding: 11px 2px; margin-bottom: -1px;
  font-size: 14.5px; font-weight: 700; color: var(--hw-ink-4);
  text-decoration: none; cursor: pointer;
  border-bottom: 2.5px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.hw-mp-tab:hover { color: var(--hw-ink-2); }
.hw-mp-tab.is-on { color: var(--hw-grape-700); border-bottom-color: var(--hw-grape-700); }

/* ============================================================
   소개 / 포트폴리오 블록 — v2 카드
   ============================================================ */
.hwv2 .sns-profile-block {
  background: #fff;
  border: 1px solid var(--hw-line);
  border-radius: var(--hw-r-lg);
  box-shadow: var(--hw-sh-sm);
  margin-bottom: 14px;
  scroll-margin-top: 80px;
}
.hwv2 .sns-profile-block-header h3 { color: var(--hw-ink); font-weight: 800; letter-spacing: -0.02em; }
.hwv2 .sns-profile-block-edit {
  color: var(--hw-grape-700); font-weight: 700;
  border-radius: var(--hw-r-sm);
}
.hwv2 .sns-profile-block-edit:hover { background: var(--hw-grape-50); }
.hwv2 .sns-profile-block-text { color: var(--hw-ink-2); }
.hwv2 .sns-profile-block-empty { color: var(--hw-ink-3); }
.hwv2 .sns-profile-block-more a { color: var(--hw-grape-700); font-weight: 700; }

/* 포트폴리오 그리드 */
.hwv2 .sns-profile-grid { gap: 8px; }
.hwv2 .sns-profile-thumb { border-radius: var(--hw-r-md); }
.hwv2 .sns-profile-thumb-text { background: var(--hw-surface-2); color: var(--hw-ink-3); }

/* actionbar (최종 업데이트) */
.hwv2 .sns-profile-actionbar-updated { color: var(--hw-ink-3); }

/* ============================================================
   타인 프로필 뷰
   ============================================================ */
.hwv2 .sns-profile-header { border-color: var(--hw-line); border-radius: var(--hw-r-lg); }
.hwv2 .sns-profile-cover { background: var(--hw-grad-brand); height: 70px; }
.hwv2 .sns-profile-avatar { border-color: #fff; box-shadow: var(--hw-sh-md); color: var(--hw-grape-400); }
.hwv2 .sns-profile-name { color: var(--hw-ink); letter-spacing: -0.02em; }
.hwv2 .sns-profile-salon { color: var(--hw-ink-3); }
.hwv2 .sns-profile-bio { color: var(--hw-ink-2); }
.hwv2 .sns-profile-stats { color: var(--hw-ink-3); }
.hwv2 .sns-profile-stats li strong { color: var(--hw-ink); }

/* 버튼 → v2 */
.hwv2 .sns-profile-btn { border-radius: var(--hw-r-md); font-weight: 700; }
.hwv2 .sns-profile-btn-primary { background: var(--hw-grad-brand); color: #fff; border: 0; box-shadow: var(--hw-sh-brand); }
.hwv2 .sns-profile-btn-primary:hover { filter: brightness(1.04); background: var(--hw-grad-brand); }
.hwv2 .sns-profile-btn-primary.is-following { background: #fff; color: var(--hw-grape-700); border: 1.5px solid var(--hw-line-2); box-shadow: none; }
.hwv2 .sns-profile-btn-secondary { background: #fff; color: var(--hw-grape-700); border-color: var(--hw-line-2); }
.hwv2 .sns-profile-btn-secondary:hover { background: var(--hw-grape-50); border-color: var(--hw-grape-300); }

/* 타인 뷰 탭 */
.hwv2 .sns-profile-tab:hover { color: var(--hw-ink); }
.hwv2 .sns-profile-tab.active { color: var(--hw-grape-700); border-bottom-color: var(--hw-grape-700); }
.hwv2 .sns-profile-content { border-color: var(--hw-line); }
.hwv2 .sns-profile-info-dl dt { color: var(--hw-ink-3); }
.hwv2 .sns-profile-info-dl dd { color: var(--hw-ink); }
.hwv2 .sns-profile-info-dl dd a { color: var(--hw-grape-700); }
.hwv2 .sns-profile-empty { color: var(--hw-ink-3); }

/* 뱃지 (디자이너/학생/기업/레벨) */
.hwv2 .sns-badge-designer,
.hwv2 .sns-badge-student { background: var(--hw-grape-100); color: var(--hw-grape-700); }
.hwv2 .sns-badge-corporate { background: var(--hw-best-soft); color: var(--hw-best); }
.hwv2 .sns-badge-level { background: var(--hw-gold-soft); color: #8A6420; }
/* 회원유형 뱃지 (관리자 회원유형 관리와 동일 톤): 인증=보라 / 일반디자이너=주황 / 일반회원=회색 */
.hwv2 .sns-badge-mtype-verified { background: #EDE7FF; color: #6A3FE6; }
.hwv2 .sns-badge-mtype-designer { background: #FFF0E6; color: #CC6600; }
.hwv2 .sns-badge-mtype-user { background: #F1F3F5; color: #495057; }
/* 닉네임 줄 뱃지 — 크라운 칩(.hw-mp-crown-chip)과 동일한 높이·필 형태 */
.hwv2 .sns-profile-name .sns-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 600px) {
  .hw-mp-stats { margin: -16px 12px 12px; padding: 13px 0; }
  .hw-mp-stat b { font-size: 17px; }
  .hwv2 .sns-profile-hero-body { padding: 22px 20px 26px; }
  .hwv2 .sns-profile-hero-name { font-size: 21px; }
}

/* ============================================================
   프로필 상단 여백 축소 (PC) — 전역 .sub 기본 padding-top(70px)이 과다해
   헤더와 커버 사이 공백이 큼. 프로필 페이지만 24px 로 축소(모바일은 hw_v2.css 14px 유지).
   ============================================================ */
/* 액션 버튼을 커버(보라) 우상단으로 — 유리효과, 전 해상도 (모바일 width:100%·flex:1 무력화) */
.hwv2 .sns-profile-header { position: relative; }
.hwv2 .sns-profile-actions { position: absolute; top: 35px; right: 14px; transform: translateY(-50%); margin: 0; width: auto; z-index: 3; }
.hwv2 .sns-profile-actions .sns-profile-btn { flex: 0 0 auto; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.42); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hwv2 .sns-profile-actions .sns-profile-btn:hover { background: rgba(255,255,255,.28); }
.hwv2 .sns-profile-actions .sns-profile-btn-primary.is-following { background: rgba(255,255,255,.92); color: var(--hw-grape-700); border-color: transparent; }

@media (min-width: 1025px) {
  #contents_wrap > .sub:has(.sns-profile-layout) { padding-top: 24px !important; }
  /* 헤더 컴팩트화 — 커버 축소 + 세로 절약 */
  .hwv2 .sns-profile-cover { height: 84px; }
  .hwv2 .sns-profile-top { margin-top: -46px; padding: 0 22px; }
  .hwv2 .sns-profile-avatar { width: 100px; height: 100px; font-size: 38px; border-width: 3px; }
  .hwv2 .sns-profile-actions { top: 42px; right: 20px; }
  .hwv2 .sns-profile-info { padding: 14px 24px 18px; }
  .hwv2 .sns-profile-name { font-size: 21px; }
}

/* ============================================================
   v2.1 폴리시 — 사이드바/스탯/블록 아이콘 정렬 (2026-07-02)
   ============================================================ */
.hwv2 .sns-profile-side-list a { display: flex; align-items: center; gap: 9px; }
.hwv2 .sns-profile-side-list a svg { flex: 0 0 auto; opacity: .72; }
.hwv2 .sns-profile-side-list a:hover svg,
.hwv2 .sns-profile-side-list a.active svg { opacity: 1; }
.hwv2 .sns-profile-side-count {
  margin-left: auto;
  background: var(--hw-surface-2); border-radius: 999px;
  padding: 2px 9px; font-size: 11.5px; font-weight: 700; color: var(--hw-ink-3);
}
.hwv2 .sns-profile-side-list a.active .sns-profile-side-count { background: var(--hw-grape-100); color: var(--hw-grape-700); }
.hwv2 .sns-profile-side-logout { color: #D6453D; }
.hwv2 .sns-profile-side-list a.sns-profile-side-logout:hover { background: #FDF0EF; color: #D6453D; }

/* 스탯 라벨 아이콘 */
.hw-mp-stat span { display: inline-flex; align-items: center; gap: 4px; }
.hw-mp-stat span svg { flex: 0 0 auto; }

/* 블록 헤더/버튼 아이콘 */
.hwv2 .sns-profile-block-header h3 { display: inline-flex; align-items: center; gap: 7px; }
.hwv2 .sns-profile-block-edit { display: inline-flex; align-items: center; gap: 5px; }

/* 빈 상태 — 중앙 정렬로 정돈 */
.hwv2 .sns-profile-block-empty {
  background: var(--hw-surface-2); border-radius: var(--hw-r-md);
  padding: 30px 18px; text-align: center; font-size: 14px; line-height: 1.6;
}

/* 최종 업데이트 캡션 — 은은하게 */
.hwv2 .sns-profile-actionbar-updated { color: var(--hw-ink-4); font-size: 12px; }

/* 회원 탈퇴 링크 — 은은하게, hover 시 경고 톤 */
.hwv2 .sns-profile-side-leave { color: var(--hw-ink-4); }
.hwv2 .sns-profile-side-list a.sns-profile-side-leave:hover { background: #FDF0EF; color: #D6453D; }

/* 레벨 배지 행의 크라운 칩 + 추천 pill — 히어로 내 컴팩트 배치 */
.hwv2 .hw-mp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hw-mp-crown-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--hw-gold-soft, #FAF1DE); color: #8A6420;
  font-size: 12px; font-weight: 700;
}
.hw-mp-crown-chip b { font-weight: 800; color: #8A6420; }
.hw-mp-refer {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px;
  border: 1.5px solid var(--hw-grape-200, #D9CBFC); border-radius: 999px;
  background: rgba(255,255,255,.75); color: var(--hw-grape-700);
  font-family: var(--hw-font); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.hw-mp-refer:hover { background: #fff; border-color: var(--hw-grape-300); }