/* ============================================================
   헤어왕 v2 — Design System (prototype_v2/app/styles.css 이식)
   서버사이드 PHP 리스킨용 공유 토큰 + 컴포넌트.
   - :root 토큰은 전역(무해). 컴포넌트 유틸은 .hwv2 스코프로 한정해
     기존 테마의 .btn/.card/.chip/.badge와 충돌 방지.
   - 글로벌 크롬(헤더/탭바)은 hw- 프리픽스 클래스로 자체 완결.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* ---- Brand violet ---- */
  --hw-violet: #9B82F3;
  --hw-grape-900: #7868CA;
  --hw-grape-800: #8071D0;
  --hw-grape-700: #6A3CEF;  /* primary — 선명한 단색 보라(포인트) */
  --hw-grape-600: #7B5CEA;
  --hw-grape-500: #8E6BF2;
  --hw-grape-400: #BAA8F7;
  --hw-grape-300: #D6CBFB;
  --hw-grape-100: #EDE7FE;
  --hw-grape-50:  #F7F4FF;

  /* ---- Pop accent ---- */
  --hw-pop: #7E64F2;
  --hw-pop-soft: #ECEAFE;

  /* ---- Gold ---- */
  --hw-gold: #C99A52;
  --hw-gold-soft: #F3E7D2;

  /* ---- Ink / neutrals ---- */
  --hw-ink:   #1C1E21;
  --hw-ink-2: #585C62;
  --hw-ink-3: #939599;
  --hw-ink-4: #BFC0C6;
  --hw-line:  #ECECF1;
  --hw-line-2:#DEDEE5;

  /* ---- Surfaces ---- */
  --hw-bg:       #FFFFFF;
  --hw-card:     #FFFFFF;
  --hw-surface-2:#F4F4F8;
  --hw-surface-3:#EDEDF2;

  /* ---- Semantic ---- */
  --hw-best:     #1E9E6A;
  --hw-best-soft:#DDF3E9;
  --hw-warn:     #E08A1E;
  --hw-warn-soft:#FBEFD8;

  /* ---- Brand gradient — 선명한 보라(거의 단색) ---- */
  --hw-grad-brand: linear-gradient(135deg, #7B4EFE 0%, #5E2FE6 100%);
  --hw-grad-pop:   linear-gradient(135deg, #7B4EFE 0%, #5E2FE6 100%);

  /* ---- Radii ---- */
  --hw-r-xs: 6px;
  --hw-r-sm: 8px;
  --hw-r-md: 12px;
  --hw-r-lg: 20px;
  --hw-r-xl: 24px;
  --hw-r-pill: 999px;

  /* ---- Shadow ---- */
  --hw-sh-sm: 0 1px 2px rgba(24,26,30,0.06), 0 1px 1px rgba(24,26,30,0.04);
  --hw-sh-md: 0 2px 8px rgba(24,26,30,0.06), 0 1px 2px rgba(24,26,30,0.05);
  --hw-sh-lg: 0 10px 28px rgba(24,26,30,0.14);
  --hw-sh-brand: 0 8px 18px rgba(98,47,230,0.26);

  --hw-font: 'Pretendard Variable', 'Pretendard', -apple-system, system-ui, sans-serif;

  /* 헤더/탭바 안전영역 — 실기기 safe-area 대응 */
  --hw-safe-top: max(env(safe-area-inset-top), 8px);
  --hw-safe-bottom: max(env(safe-area-inset-bottom), 10px);
}

/* ============================================================
   공용 라인 아이콘 (.rb-icon) — 단일 base 규칙

   획/채움은 마크업이 직접 내보낸다:
     rb/rb.lib/icon.lib.php 의 rb_icon() 과 skin/board/rb.sns_feed/feed.js 가
     fill="none" stroke="currentColor" stroke-width="1.7"
     stroke-linecap="round" stroke-linejoin="round" 를 인라인 속성으로 붙인다.
   이 속성들을 덮는 전역 svg 규칙이 없으므로, CSS 에서 같은 값을 다시 선언할
   필요가 없다. 사용처는 크기(width/height)만 지정할 것.
   ============================================================ */
.rb-icon { flex-shrink: 0; }

/* ============================================================
   글로벌 크롬 — 모바일 헤더(TopBar/BackBar) + 플로팅 탭바
   (hw- 프리픽스, .hwv2 래퍼에 의존하지 않음)
   ============================================================ */

/* ---- TopBar (index 헤더: 로고 + 검색 + 알림) ---- */
.hw-topbar {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; border-bottom: 1px solid var(--hw-line);
  padding-top: var(--hw-safe-top);
}
.hw-topbar__row {
  height: 52px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.hw-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.hw-logo__mark {
  width: 28px; height: 28px; border-radius: 9px; background: var(--hw-grape-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(98,47,230,0.34); flex-shrink: 0;
}
.hw-logo__mark svg { width: 18px; height: 18px; }
.hw-logo__text {
  font-family: var(--hw-font); font-size: 20px; font-weight: 800;
  letter-spacing: -0.04em; color: var(--hw-ink); white-space: nowrap;
}
.hw-topbar__actions { display: flex; align-items: center; gap: 4px; }
.hw-iconbtn {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; position: relative;
  cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.hw-iconbtn:active { background: var(--hw-surface-2); }
.hw-iconbtn__badge {
  position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--hw-pop); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  border: 1.5px solid #fff; box-sizing: border-box;
}
.hw-iconbtn__dot {
  position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hw-pop); border: 1.5px solid #fff;
}

/* ---- BackBar (서브/상세 페이지 헤더) ---- */
.hw-backbar {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; border-bottom: 1px solid var(--hw-line);
  padding-top: var(--hw-safe-top);
}
.hw-backbar__row {
  height: 52px; padding: 0 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.hw-backbar__back {
  width: 44px; height: 44px; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hw-backbar__title {
  font-family: var(--hw-font); font-size: 16.5px; font-weight: 700; color: var(--hw-ink);
  letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; text-align: center;
}
.hw-backbar__right { min-width: 44px; display: flex; justify-content: flex-end; }

/* ---- 크몽st 플로팅 알약 탭바 ---- */
.hw-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 10px; padding-bottom: var(--hw-safe-bottom);
  pointer-events: none;
}
.hw-tabbar__pill {
  display: flex; align-items: stretch; justify-content: space-between;
  background: var(--hw-card); border-radius: 26px; padding: 6px;
  box-shadow: 0 6px 24px rgba(20,20,40,0.10), 0 2px 6px rgba(20,20,40,0.05);
  pointer-events: auto; max-width: 600px; margin: 0 auto;
}
.hw-tab {
  flex: 1; min-width: 0; margin: 0 1px; border: none; cursor: pointer; background: transparent;
  border-radius: 15px; transition: background .18s ease; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 6px;
}
.hw-tab.is-on { background: var(--hw-surface-3); }
.hw-tab__label {
  font-family: var(--hw-font); font-size: 10px; font-weight: 600; color: var(--hw-ink-2);
  letter-spacing: -0.03em; white-space: nowrap;
}
.hw-tab.is-on .hw-tab__label { font-weight: 700; color: var(--hw-ink); }

/* 탭바 높이만큼 콘텐츠 하단 여백 (콘텐츠 가림 방지) */
.hw-has-tabbar { padding-bottom: calc(76px + var(--hw-safe-bottom)) !important; }

/* 플로팅 탭바는 모바일 전용 — PC(≥1025px)는 GNB 사용 */
@media (min-width: 1025px) { .hw-tabbar { display: none; } }

/* ============================================================
   .hwv2 — 페이지 콘텐츠 스코프 (홈 및 향후 보드 리스킨)
   ============================================================ */
.hwv2 {
  font-family: var(--hw-font); color: var(--hw-ink);
  -webkit-font-smoothing: antialiased; letter-spacing: -0.02em; word-break: keep-all;
}
.hwv2 *, .hw-topbar *, .hw-backbar *, .hw-tabbar * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

/* ---- Typography ---- */
.hwv2 .t-display { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; }
.hwv2 .t-h1 { font-size: 23px; font-weight: 800; line-height: 1.22; letter-spacing: -0.035em; }
.hwv2 .t-h2 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; }
.hwv2 .t-h3 { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }
.hwv2 .t-body { font-size: 15px; font-weight: 500; line-height: 1.55; }
.hwv2 .t-sm { font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.hwv2 .t-xs { font-size: 12px; font-weight: 600; line-height: 1.4; }
.hwv2 .t-muted { color: var(--hw-ink-3); }
.hwv2 .t-2 { color: var(--hw-ink-2); }
.hwv2 .t-grape { color: var(--hw-grape-600); }

/* ---- Buttons ---- */
.hwv2 .btn {
  font-family: var(--hw-font); border: none; cursor: pointer; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--hw-r-pill); letter-spacing: -0.02em; white-space: nowrap;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none;
}
.hwv2 .btn:active { transform: scale(0.96); }
.hwv2 .btn-lg { height: 54px; font-size: 16.5px; padding: 0 24px; border-radius: var(--hw-r-md); }
.hwv2 .btn-md { height: 44px; font-size: 15px; padding: 0 18px; }
.hwv2 .btn-sm { height: 34px; font-size: 13px; padding: 0 14px; }
.hwv2 .btn-brand { background: var(--hw-grape-700); color: #fff; box-shadow: var(--hw-sh-brand); }
.hwv2 .btn-grad { background: var(--hw-grad-brand); color: #fff; box-shadow: var(--hw-sh-brand); }
.hwv2 .btn-ghost { background: var(--hw-surface-2); color: var(--hw-grape-700); }
.hwv2 .btn-outline { background: #fff; color: var(--hw-grape-700); box-shadow: inset 0 0 0 1.5px var(--hw-line-2); }
.hwv2 .btn-block { width: 100%; }

/* ---- Chips ---- */
.hwv2 .chip {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px;
  border-radius: var(--hw-r-pill); font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--hw-surface-2); color: var(--hw-ink-2); cursor: pointer;
  border: 1.5px solid transparent; transition: all .15s ease; text-decoration: none;
}
.hwv2 .chip.is-on { background: var(--hw-grape-700); color: #fff; }

/* ---- Card ---- */
.hwv2 .card {
  background: var(--hw-card); border-radius: var(--hw-r-lg);
  box-shadow: var(--hw-sh-sm); border: 1px solid var(--hw-line);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* ---- Badge ---- */
.hwv2 .badge {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px;
  border-radius: var(--hw-r-pill); font-size: 11.5px; font-weight: 700;
  letter-spacing: -0.01em; white-space: nowrap;
}
.hwv2 .badge-pro { background: var(--hw-grape-700); color: #fff; }
.hwv2 .badge-best { background: var(--hw-best); color: #fff; }
.hwv2 .badge-gold { background: var(--hw-gold-soft); color: #8A6420; }
.hwv2 .badge-cat { background: var(--hw-grape-50); color: var(--hw-grape-600); }
.hwv2 .badge-wait { background: var(--hw-warn-soft); color: var(--hw-warn); }

/* ---- Avatar ---- */
.hwv2 .ava {
  border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--hw-surface-3);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  color: var(--hw-grape-600); overflow: hidden;
}
.hwv2 .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 프로필 썸네일 공통 — 전 서비스 동일한 원형 테두리 ----
   래퍼(span/a)든 img 든 실제로 보이는 바깥 요소에만 테두리를 준다. */
.hwv2 .ava,
.hcv-av,
.sns-avatar,
.sns-cmt-avatar,
.pf_img img,
.profile_img img,
.rb-designer-card-avatar img {
  border-radius: 50%;
  border: 1px solid var(--hw-line);
  background: var(--hw-surface-3);
  box-sizing: border-box;
  overflow: hidden;
}
/* 래퍼 안쪽 이미지는 테두리 이중선 방지 */
.hwv2 .ava img,
.hcv-av img,
.sns-avatar img,
.sns-cmt-avatar img {
  border: 0;
  border-radius: 50%;
}

/* ---- Section header ---- */
.hwv2 .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.hwv2 .sec-head__more {
  border: none; background: transparent; color: var(--hw-ink-3); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px;
  text-decoration: none;
}

/* dividers */
.hwv2 .hr { height: 1px; background: var(--hw-line); border: 0; margin: 0; }
.hwv2 .hr-thick { height: 8px; background: var(--hw-surface-3); border: 0; margin: 0; }

/* utility */
.hwv2 .row { display: flex; align-items: center; }
.hwv2 .col { display: flex; flex-direction: column; }
.hwv2 .gap-4 { gap: 4px; } .hwv2 .gap-6 { gap: 6px; } .hwv2 .gap-8 { gap: 8px; }
.hwv2 .gap-10 { gap: 10px; } .hwv2 .gap-12 { gap: 12px; } .hwv2 .gap-16 { gap: 16px; }
.hwv2 .grow { flex: 1; }
.hwv2 .wrap { flex-wrap: wrap; }
.hwv2 .scroll-x { display: flex; overflow-x: auto; scrollbar-width: none; }
.hwv2 .scroll-x::-webkit-scrollbar { display: none; }
.hwv2 .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hwv2 .clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* press feedback */
.hwv2 .press { transition: transform .14s cubic-bezier(.2,.7,.3,1), background .15s ease, box-shadow .18s ease; cursor: pointer; }
.hwv2 .press:active { transform: scale(0.97); }

/* entrance */
@keyframes hwUp { from { transform: translateY(9px); opacity: .6; } to { transform: none; opacity: 1; } }
.hwv2 .anim-up { animation: hwUp .45s cubic-bezier(.2,.7,.3,1) both; }

@media (hover: hover) {
  .hwv2 .card.press:hover { box-shadow: var(--hw-sh-md); transform: translateY(-1.5px); }
  .hw-iconbtn:hover { background: var(--hw-surface-2); }
}

/* ─────────────────────────────────────────────────────────────
   v2(.hwv2) 리스킨 페이지 + 글쓰기 페이지 상단 여백 축소 — 일관 적용
   대상: 헤어상담소·헤어인사이트(.hw-board2col), 더보기/마이페이지(.hw-mypage),
   전 게시판 글쓰기(.rb_bbs_write_wrap — 공용 write 래퍼),
   프로필 답변/채택/팔로우 목록(.hw-pl-wrap — profile_list.php, hwv2 미부착 페이지).
   - 모바일(≤1024)에서 section.sub 상단 padding 이 50px 라 헤더와 콘텐츠
     사이 흰 여백이 과하게 큼 → 14px 로 통일 축소.
   - PC(≥1024)는 이미 인라인 #contents_wrap > .sub{padding-top:0} 로
     처리되어 변경 없음(현행 유지).
   - 글쓰기엔 .hwv2 를 붙이지 않음: .hwv2 .btn 등 컴포넌트 스타일이
     write 폼 버튼(.btn)에 번지는 것을 피하려 래퍼 클래스로만 매칭.
   - :has() 미지원 구형 브라우저는 기존 50px 로 자연 폴백(파손 없음).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* custom.min.css 의 .sub{padding-top:50px!important} 를 눌러야 하므로 !important 필요 */
  #contents_wrap > .sub:has(.hwv2),
  #contents_wrap > .sub:has(.rb_bbs_write_wrap),
  #contents_wrap > .sub:has(.mo-wrap),
  #contents_wrap > .sub:has(.hw-pl-wrap),
  #contents_wrap > .sub:has(.notification-list-wrap) { padding-top: 14px !important; }
  /* 요청: v2 게시판/프로필 계열(.hwv2)·알림함(.notification-list-wrap)의 숨은 프레임 좌우 15px 제거 → 스킨 자체 여백(12px)만 남겨 다른 페이지와 통일 */
  #contents_wrap > .sub:has(.hwv2),
  #contents_wrap > .sub:has(.notification-list-wrap) { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────
   전역 콘텐츠 폭 표준 (PC) — 헤더 inner 와 동일 프레임
   헤더 .gnb_wrap .inner = max-width:1180px + 좌우 padding 24px (border-box)
   → 모든 서브페이지 콘텐츠를 로고 좌측끝~'내 헤어고민 질문하기' 버튼
     우측끝(콘텐츠 스팬 1132px)에 정렬. custom.min.css 의
   .contents_wrap>.sub{width:95%;max-width:1400px} 를 대체(로드순서상 승리).
   - width:100%: grid(justify-self:center) 안에서 shrink 방지
   - body 프리픽스: .rb_sub_wide .sub{width:100%!important} 등보다 특이성 우위
   - 페이지가 자체 1180 프레임을 만들지 말 것 — 이 프레임 안에서 width:100% 로 채우고,
     좁은 피드(예: 600px 중앙)는 이 안에서 중앙 정렬하면 됨.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  body #contents_wrap > .sub {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   그누보드 get_sideview 회원 레이어팝업 전역 제거
   회원/게스트 이름 클릭 시 뜨던 팝업(미니홈·1:1 대화·쪽지·메일·자기소개·
   아이디로 검색·전체게시물). 코어 함수(common.lib get_sideview)는 건드리지 않고
   출력 마크업만 CSS로 차단 — .sv 메뉴만 숨기고 이름(.sv_member/.sv_guest)은 유지.
   ───────────────────────────────────────────────────────────── */
.sv_wrap .sv,
.sv_wrap .sv_nojs { display: none !important; }
.sv_wrap .sv_member,
.sv_wrap .sv_guest { cursor: default; }

/* ────────────────────────────────────────────────────────────
   첨부 업로드 — 제한 표기 · 자동 축소 안내 (rb.js/hw_upload.js)
   custom.css 가 아니라 여기 두는 이유: 서빙되는 건 custom.min.css 라
   custom.css 수정은 반영되지 않는다. 이 파일은 head.sub.php 가 직접 로드한다.
   ──────────────────────────────────────────────────────────── */
.hw-up-note {
  margin: 6px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8b8b96;
  word-break: keep-all;
}
.hw-up-busy {
  margin: 6px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--hw-grape-700, #622fe6);
}
.hw-up-busy::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 2px solid rgba(98, 47, 230, .25);
  border-top-color: var(--hw-grape-700, #622fe6);
  border-radius: 50%;
  animation: hw-up-spin .7s linear infinite;
}
@keyframes hw-up-spin { to { transform: rotate(360deg); } }