/**
 * design-tokens.css — 광주상가클럽 공통 디자인 변수
 *
 * ⚠️ dashboard.html / search.php / index.html 세 파일이 각자 :root{}를 따로
 *    복붙해서 관리하고 있던 걸 여기 하나로 통합함. 다행히 세 파일의 실제 값은
 *    이미 완전히 일치했어서(--red:#03C75A 등), 값 충돌 없이 그대로 합칠 수 있었음.
 *
 * ⚠️ 네이밍에 대해: --red 변수의 실제 색상은 초록(#03C75A)임. 네이버 스타일로
 *    리브랜딩하면서 "이름은 그대로 두고 값만 바꾼" 이력 때문. 지금 당장 --red를
 *    쓰는 코드를 전부 --brand로 바꾸는 건 위험도가 높아서(수천 곳 참조), 대신
 *    "제대로 된 이름(--brand)"을 소스로 두고 "--red는 그걸 가리키는 별칭"으로
 *    만들어둠. 새로 작성하는 코드는 --brand를 쓰고, 기존 코드는 안 건드려도
 *    계속 정상 작동함 — 나중에 여유 있을 때 파일 하나씩 --red→--brand로
 *    점진적으로 옮기면 됨.
 *
 * 사용법 (신규 페이지):
 *   <link rel="stylesheet" href="/includes/design-tokens.css">
 */
:root{
  /* ── 진짜 이름(의미에 맞는 이름) — 새 코드는 이걸 쓰세요 ── */
  --brand:#03C75A;        /* 메인 포인트컬러(버튼/활성상태/강조) — 실제로는 네이버 그린 */
  --brand-dark:#008038;  /* [2026-09-20 접근성] 글씨·hover에 쓰이는 보조 초록 — #02A94D는 흰 배경 위 3.1:1이라 AA(4.5:1) 미달이어서 진하게(5.07:1). 메인 --brand(#03C75A)는 브랜드 색이라 그대로 둠 */
  --brand-tint:#E9F9EF;   /* 브랜드컬러의 옅은 배경톤 (기존 --green-bg) */

  --ink-navy:#222222;     /* 구조색 = 진회색/검정 (헤더텍스트, 어두운 배경) */
  --ink-navy-deep:#111111;

  --accent-amber:#D9A441; /* 보조 강조색 = 톤다운된 골드 */
  --accent-amber-dark:#A87A28;

  --neutral:#4C4C4C;      /* 파랑 대신 쓰는 중립 회색 계열 (색상 종류 최소화 목적) */
  --neutral-tint:#F0F0F0;

  --bg:#F7F8FA;
  --surface:#FFFFFF;      /* 카드/패널 배경 (기존 --card) */
  --line:#E5E5E5;
  --ink:#1A1A1A;
  --ink-muted:#6B6B6B;  /* [2026-09-20 접근성] 보조 회색 글씨 — 옅은 회색 배경(#F7F8FA) 위에서 4.27:1이라 기준 미달이어서 5.0:1로 진하게 */

  /* ── 기존 이름 별칭 — 기존 파일들이 이미 쓰고 있는 변수명, 절대 삭제하지 마세요.
       이걸 지우면 search.php/dashboard.html/index.html 전체가 스타일 깨짐 ── */
  --red: var(--brand);
  --red-dark: var(--brand-dark);
  --navy: var(--ink-navy);
  --navy-deep: var(--ink-navy-deep);
  --amber: var(--accent-amber);
  --amber-dark: var(--accent-amber-dark);
  --green: var(--brand-dark);
  --green-bg: var(--brand-tint);
  --blue: var(--neutral);
  --blue-bg: var(--neutral-tint);
  --pink: var(--ink-muted);
  --mint: var(--brand-dark);
  --card: var(--surface);
  --muted: var(--ink-muted);

  /* ── 카드/UI 리프레시용 신규 구조토큰 (2026-08, hifi 목업 참고) — 색상은 그대로 두고
       모양(둥근모서리/그림자/보조텍스트톤)만 다듬을 때 씀 ── */
  --radius:12px;
  --shadow:0 1px 2px rgba(26,26,26,.04), 0 8px 20px -12px rgba(26,26,26,.12);
  --ink-soft:#4A4A4A;
  --ink-faint:#9A9A9A;
  --line-strong:#D0D0D0;
}

/* ── [2026-09-20 접근성] 모바일 터치 영역 확대 ──
   헤더·푸터 링크가 16~19px 높이라 손가락으로 누르기 어려웠음. 링크의 눈에 보이는 크기·배치는 그대로 두고,
   투명한 클릭 영역(::after)만 위아래로 넓힘 — 손가락 기준 권장크기(약 44px)에 가깝게. */
@media (max-width:768px){
  footer .ft-links a, footer .ft-links span[onclick], .utilbar a, .block-head .more a, .profile-meta .meta-row a, .qs-detail-reset{position:relative;}
  footer .ft-links a::after, footer .ft-links span[onclick]::after, .utilbar a::after, .block-head .more a::after, .profile-meta .meta-row a::after, .qs-detail-reset::after,
  .mobile-menu-btn::after, .fav-btn::after, .cmp-btn::after{
    content:''; position:absolute; left:-6px; right:-6px; top:-10px; bottom:-10px;
  }
  .mobile-menu-btn{position:relative;} /* .fav-btn/.cmp-btn은 페이지 CSS에서 이미 absolute라 건드리지 않음(::after만 추가) */
}

/* [2026-09-21] Headings: balance line breaks so a single character never wraps alone (e.g. the last syllable of the mobile hero title). Ignored by old browsers. */
h1, h2, h3{text-wrap:balance; word-break:keep-all; overflow-wrap:break-word;} /* keep-all: break at spaces, not inside a Korean word (e.g. "sang|ga") */

/* ⚠️⚠️ [2026-09-28 추가] 공용 "주요 액션 버튼" — PC·모바일 디자인 점검(정밀)에서 발견한 문제:
   상담신청/상담문의남기기/조회하기/계산하기 등 성격이 같은 버튼인데 페이지마다(심지어 같은
   페이지 안에서도) border-radius(6~12px, 심지어 100px 알약형)·font-size(13.5~16px)가 제각각이었음.
   여기 하나로 정의해서 각 페이지가 재사용함 — 값은 기존에 가장 흔했던 조합(10px 반경/15px/800)으로
   맞춤. 헤더의 알약형 유틸리티 버튼(+매물등록 등)과 목록형↔카드형 같은 작은 토글 버튼은 성격이
   달라서 이 클래스 대상이 아님(그대로 둠). 검색창에 붙어있는 압축된 버튼(.qs-row1 button 등)도
   입력창 높이에 맞춰야 하는 별도 제약이 있어 대상에서 제외함. */
.btn-cta{
  display:inline-block; padding:12px 24px; border-radius:10px;
  font-size:15px; font-weight:800; font-family:inherit;
  background:var(--red); color:#fff; border:none; cursor:pointer;
  text-align:center; text-decoration:none; transition:background .15s; box-sizing:border-box;
}
.btn-cta:hover{background:var(--red-dark);}