@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

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

:root {
  /* ── 팔레트 = 네이비 단색 체계(2026-07-29 운영 결정. 종전 크림+브릭 → 전면 교체.
        그 이전엔 형광 연두, 더 이전엔 보라). 지면·글자·선·스크롤바·스크림까지 **하나의 네이비
        램프**로 통일했다 — 크림/브릭/웜 뉴트럴은 코드에서 전부 걷어냈다(잔재 금지).
        · 지정색 5개(운영): 히어로 #070F54, 보조 #597AAF · #A4B4CB · #ECEDEF · #E8EAED.
        · 파생 4단계는 그 사이를 메우려고만 둔다 — #16246E(솔리드 버튼 hover)
          #33436E(중간 텍스트) #DFE2E8(헤어라인) #CBD2DD(뮤트 채움). 새 색을 늘리지 말 것.
        · 히어로가 이미 near-black이라 hover는 명도를 **올린다**(더 어둡게 가면 변화가 안 보인다).
        · 흰 글자 on --primary 대비 16.1:1. --text-500(#597AAF)은 보조·메타 텍스트 전용
          (흰 배경 4.3:1) — 본문에 쓰지 말 것.
        · 헤더 로고 'NEXA'는 계속 검정(--text-900 = 히어로 네이비) — 로고에 별색 넣지 말 것.
        · 상태색(빨강·초록·앰버·정보 파랑)은 의미색이라 팔레트 밖으로 유지한다. ── */
  --primary:        #070f54;   /* 히어로 네이비 — 유일한 브랜드색 */
  --primary-dark:   #16246e;   /* 솔리드 버튼 hover(위 주석 — 어둡게가 아니라 밝게) */
  --primary-light:  #597aaf;   /* 보조 네이비 — 어두운 면 위 액센트/화살표 */
  --primary-bg:     rgba(7,15,84,0.08);
  --shadow-primary: 0 4px 18px rgba(7,15,84,0.28);
  /* 2026-07-30 운영 지시: **그라데이션 전면 폐지**. 종전 --gradient(135deg #070f54→#597aaf)를 쓰던
     자리는 전부 var(--primary) 솔리드로 바꿨다. 토큰도 지웠다 — 남겨 두면 "이름은 gradient인데 값은
     솔리드"가 되어 다음 사람이 다시 그라데이션을 넣는다. 새 면은 --primary(진한 면) /
     --primary-soft(옅은 면)를 쓸 것. */

  /* 지면: **헤더와 같은 순백**(2026-07-29 운영 지시 — 본문 배경 전부 #ffffff). 카드도 순백이라
     면 구분은 색이 아니라 헤어라인(--border)이 진다 — 흰 면을 새로 만들 땐 테두리를 꼭 같이 줄 것.
     --bg-gray는 지면이 아니라 컴포넌트 채움(행 hover·표 헤더·뮤트 블록) 전용이다. */
  --bg-page:  #ffffff;
  --bg-white: #ffffff;
  --bg-gray:  #e8eaed;

  /* 본문 글자는 검정 램프(2026-07-30 운영 지시) — 종전엔 네이비 램프(#070f54/#33436e/#597aaf)라
     지면 전체가 파랗게 읽혔다. 글자만 중성 무채색으로 내리고 **선·채움·브랜드색은 네이비 그대로** 둔다.
     흰 글자는 '눌린/선택된 버튼처럼 진한 면 위'에만 남긴다 — 흰 배경 위 흰 글자를 새로 만들지 말 것.
     ⚠ 헤더 카테고리 바 한 곳만 이 램프에서 **의도적으로 제외**한다(바로 아래 --nav-cat 참고). */
  --text-900: #000000;   /* 제목·본문 — 검정 */
  --text-700: #3a3a3a;   /* 보조 본문 */
  --text-500: #6b7280;   /* 메타·라벨(흰 배경 4.8:1) */
  --text-400: #9ca3af;   /* 뮤트 — 비활성·플레이스홀더 */

  /* 헤더 전용 색 — 본문 램프와 끊어 둔 자리(본문 램프를 다시 손대도 여기는 흔들리지 않는다).
     ⚠ 2026-07-31 운영 지시로 --nav-link는 검정으로 내렸다 — "AI 서비스/카테고리 둘 다 색 유지"였던
     2026-07-30 지정을 절반 뒤집은 것이라, 남은 예외는 **카테고리 바 하나뿐**이다.
     토큰을 없애고 --text-900을 직접 쓰지 않는 이유: 헤더 링크는 본문 텍스트와 다른 이유(운영 지정)로
     색이 정해지는 자리라, 끊어 두어야 다음에 본문 램프가 바뀔 때 말없이 끌려가지 않는다. */
  --nav-link: var(--text-900);  /* 헤더 'AI 서비스'·'AI 개발 의뢰' — 검정(2026-07-31) */
  --nav-cat:  #597aaf;          /* 헤더 카테고리 바 항목 — 검정화 유일 예외(운영 지정) */

  --border:    #dfe2e8;   /* 헤어라인 — 흰 카드/지면(#ECEDEF) 양쪽에서 보이는 최소 단계 */
  --border-md: #a4b4cb;   /* 강조 선·포커스 링 */

  /* 보조 시맨틱 — 연한 하이라이트/선택 테두리/짙은 네이비 텍스트/뮤트 아이콘 */
  --primary-soft:    #ecedef;
  --primary-soft-bd: #a4b4cb;
  --primary-deep:    #070f54;
  --muted-ic:        #a4b4cb;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --max-w: 1200px;
  --px:    24px;

  /* 스티키 헤더 아래 오프셋 — nav.html의 syncNavOffset()이 실측으로 갱신(카테고리 바 두 줄 대응) */
  --nav-offset: 128px;

  color-scheme: light;
}

/* 다크모드는 2026-07-22 제거(운영 결정) — 라이트 단일 테마. 구조색은 전부 위 변수 경유. */

body {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  background: var(--bg-page);
  color: var(--text-900);
  font-size: 17px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ═══════════════════════════════════
   스크롤바 (2026-07-26, notefolio.net 참고)
   ═══════════════════════════════════
   레퍼런스 실측(notefolio main.chunk.css): `::-webkit-scrollbar{width:5px;height:5px}` +
   `::-webkit-scrollbar-thumb{background-color:#bfc6d2;border-radius:4px}` +
   `::-webkit-scrollbar-button{height:0;width:0}` + 태블릿 이하 숨김. 특징 네 가지를 가져왔다:
     ① 트랙을 칠하지 않는다(투명 — 지면 색이 그대로 비쳐 홈이 한 면으로 남는다)
     ② 썸은 헤어라인 + 완전 라운드(막대가 아니라 '선'으로 읽힌다)
     ③ 화살표 버튼 제거(OS 위젯 느낌을 없앤다)
     ④ 터치 기기에선 숨긴다(레퍼런스는 max-width:1024px 기준이지만 여기선 `pointer: coarse` —
        폭으로 끊으면 창을 좁힌 마우스 사용자까지 스크롤바를 잃는다)
   NEXA 적용값만 다르다: 썸 색은 팔레트의 --muted-ic(#a4b4cb), hover는 보조 네이비(#597aaf),
   누름은 #33436e — 스크롤바 선도 팔레트 안에 있어야 한다(2026-07-29 운영 지시: 실선·스크롤바선
   포함 전 테두리를 네이비 램프로). 폭은 5→6px: NEXA는 base 17px라 5px는 잡기 어렵다.
   ※ 히어로(#070f54)를 그대로 쓰지 말 것 — 스크롤바는 콘텐츠가 아니라 크롬이다. 브랜드 최강도
     색을 넣으면 '지금 눌러야 할 것'이 흐려진다(램프의 약한 단계만 쓴다).
   ※ 의도적으로 스크롤바를 숨긴 가로 트랙(.nav-cats-inner/.filter-bar-inner/.reco-track)은
     클래스 선택자라 아래 전역 규칙보다 우선한다 — 그대로 숨겨진다.
   ※ **함정(실측)**: Chromium은 `scrollbar-width`/`scrollbar-color`가 auto가 아니면 그 요소의
     `::-webkit-scrollbar` 스타일을 통째로 무시한다. 표준 속성을 전역에 그냥 쓰면 아래 6px 규칙이
     죽고 OS 기본 thin(실측 10px)이 나온다. 그래서 표준 속성은 **webkit 의사요소를 모르는 엔진
     (Firefox)에만** 적용하고, webkit 계열은 아래 세부 규칙 경로를 타게 한다. 순서 바꾸지 말 것. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; }                      /* thin은 상속되지 않아 전역 지정 */
  html { scrollbar-color: #a4b4cb transparent; }    /* 색은 상속되므로 루트 한 번 */
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #a4b4cb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #597aaf; }
::-webkit-scrollbar-thumb:active { background-color: #33436e; }
::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
::-webkit-scrollbar-corner { background: transparent; }
/* 터치 기기 — OS가 이미 오버레이 스크롤바를 띄운다. 항상 떠 있는 막대는 잉여. */
@media (pointer: coarse) {
  ::-webkit-scrollbar { width: 0; height: 0; }
}

/* ═══════════════════════════════════
   NAV
═══════════════════════════════════ */
.nav { position: sticky; top: 0; z-index: 300; background:var(--bg-white); }
.nav-top {
  border-bottom: 1px solid var(--border);
  /* 헤더도 본문·푸터와 같은 --max-w(1200) — 페이지 전체 좌우 라인 통일(2026-07-23 운영 요청,
     구 1360 확폭은 헤더만 튀어나와 로고/본문/푸터 정렬이 어긋났다). 검색창은 flex가 남는 폭을 쓴다. */
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--px); height: 70px;
  display: flex; align-items: center; gap: 16px;
}
/* 로고 텍스트 'NEXA'는 검정(2026-07-23 운영 요청) — 브랜드 컬러는 아이콘(favicon.svg)만 */
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 21px; font-weight: 900; color: var(--text-900);
  flex-shrink: 0;
}
.nav-logo-mark {
  width: 32px; height: 32px;
  background: var(--primary); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.nav-logo-mark svg { width: 18px; height: 18px; }
/* 다크모드: 로고 SVG가 검정 단색이라 어두운 헤더에서 안 보임 → 반전으로 흰 로고 */

/* 헤더 검색 — 유일한 서비스 검색 진입점이라 크몽처럼 크고 잘 보이게(필 형태 + 원형 버튼).
   폭은 래퍼(.nav-search-wrap)가 결정 — 필에 max-width를 두면 래퍼를 넓혀도 안 커진다(2026-07-21 확폭). */
.nav-search {
  display: flex; align-items: center;
  border: 2px solid var(--border-md); border-radius: 999px;
  background:var(--bg-white);
  overflow: hidden; transition: border-color .15s;
}
.nav-search:focus-within { border-color: var(--primary); }
.nav-search input {
  flex: 1; min-width: 0; border: none; outline: none;
  padding: 11px 18px; font-size: 18px;
  font-family: inherit; color: var(--text-900); background: transparent;
}
.nav-search input::placeholder { color: var(--text-400); }

/* ── 검색 드롭다운(2026-07-21) — 최근/추천 검색어 + 하단 핏매치 광고 ──
   함정: .nav-search(필)는 overflow:hidden — 드롭다운을 그 안에 두면 잘려서 안 보인다.
   래퍼(.nav-search-wrap)가 폭/기준점을 갖고, 필은 래퍼 폭을 그대로 쓴다. */
/* 2026-07-21: 540→720px 확폭 — 크몽 서비스 페이지 수준. flex:1이라 좁은 화면에선 자동 축소 */
/* 780px(2026-07-24) — 비즈 토글 라벨 'NEXA Biz'→'Biz' 축소분만큼 검색창 확장(종전 720) */
.nav-search-wrap { flex: 1; max-width: 780px; position: relative; }
.search-dd {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 350;
  background: var(--bg-white); border: 1px solid var(--border-md); border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,.14); overflow: hidden; padding: 6px 0;
}
.search-dd-sec { padding: 8px 16px 10px; }
.search-dd-sec + .search-dd-sec { border-top: 1px solid var(--border); }
.search-dd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--text-400); margin-bottom: 8px;
}
.search-dd-clear {
  background: none; border: 0; font-size: 14px; color: var(--text-400);
  cursor: pointer; padding: 0; font-family: inherit;
}
.search-dd-clear:hover { color: var(--primary); }
.search-dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: 17px; color: var(--text-700);
}
.search-dd-item:hover { background: var(--bg-gray); }
.search-dd-item > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-dd-x {
  background: none; border: 0; color: var(--text-400); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
}
.search-dd-x:hover { color: #ef4444; background: var(--bg-gray); }
.search-dd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.search-dd-chip {
  background: var(--bg-gray); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-700);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.search-dd-chip:hover { border-color: var(--primary); color: var(--primary); }
.search-dd-adsec { background: var(--bg-gray); }
.search-dd-ad {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 10px;
  text-decoration: none; position: relative;
}
.search-dd-ad:hover { background: var(--bg-white); }
/* 2026-08-01 운영 지시: 정사각(40×40) → 마켓 카드와 같은 썸네일 비율(455:180).
   이 자리에 실리는 그림은 핏매치 전용 이미지 아니면 서비스 대표 이미지인데 둘 다 2.5:1이라,
   1:1 박스에 cover로 넣으면 좌우가 크게 잘려 나갔다. 줄 높이(40px)는 그대로 두고 너비만
   비율을 따라간다 — 드롭다운의 세로 리듬을 건드리지 않으면서 그림 전체가 보인다. */
.search-dd-ad-thumb {
  width: 101px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  background: var(--primary-soft);
}
.search-dd-ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-dd-ad-info { min-width: 0; flex: 1; }
.search-dd-ad-title {
  font-size: 16px; font-weight: 700; color: var(--text-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 검색 드롭다운 광고 가격도 검정(2026-07-31) — 헤더 부품이지만 이 드롭다운은 홈에서도 열린다.
   카드 가격만 검정으로 내리면 홈 검색창에 한 글자만 쳐도 같은 화면에 남색 가격과 검정 가격이
   동시에 보인다. '메인 페이지의 가격'이라는 지시는 이 자리도 포함한다. */
.search-dd-ad-price { font-size: 15px; font-weight: 700; color: var(--text-900); margin-top: 2px; }
.nav-search-btn {
  width: 36px; height: 36px; border-radius: 50%;
  margin-right: 4px;
  background: var(--primary); border: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; transition: background .15s;
}
.nav-search-btn:hover { background: var(--primary-dark); }
.nav-search-btn svg { width: 16px; height: 16px; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.nav-links a {
  display: inline-flex; align-items: center;
  /* 2026-07-31 검정화(운영 지시) — 종전 제외 대상이었으나 --nav-link가 검정 램프로 내려갔다 */
  font-size: 17px; font-weight: 600; color: var(--nav-link);
  padding: 8px 12px; border-radius: 7px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-link-ic { font-size: 18px; margin-right: 5px; line-height: 1; }
/* hover 신호는 **배경**이 진다 — 기본색이 검정이 된 뒤로는 종전처럼 --primary(#070f54)로 바꿔 봐야
   눈에 보이는 차이가 없어(둘 다 near-black) 색은 기본값에 고정한다(2026-07-31). */
.nav-links a:hover { background: var(--bg-gray); color: var(--nav-link); }
/* 현재 섹션(AI 서비스/AI 개발 의뢰) 표시 — 네이비 솔리드 칩(2026-07-30 그라데이션 폐지).
   '눌린 상태'라 흰 글자를 유지하는 자리다(운영 지시: 흰 글자는 active 버튼에만). */
.nav-links a.active, .nav-links a.active:hover { background: var(--primary); color: #fff; }

/* 고정 폭 + 우측 정렬: 모드에 따라 찜 하트가 숨거나(buyer-only) 표시명 길이가 달라져도
   검색창(flex:1) 폭이 흔들리지 않게 우측 블록이 항상 같은 공간을 차지한다(빈 공간은 왼쪽으로 흡수).
   316px = 종전 362 − 테마 토글 제거(30+gap) − 언어 드롭다운 축소(2026-07-22) — 요소 추가 시 이 폭도 함께 키울 것. */
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; width: 316px; justify-content: flex-end; }
/* UI 언어 드롭다운(2026-07-22 — 종전 KO·EN 버튼 토글에서 공간 축소) — 프로필 오른쪽 끝 배치 */
.nav-lang-select {
  border: 1px solid var(--border); background: var(--bg-white); border-radius: 8px;
  font-size: 15px; font-weight: 700; color: var(--text-700);
  padding: 4px 6px; cursor: pointer; flex-shrink: 0; outline: none;
  /* 브라우저 기본 ▲▼ 화살표 제거(2026-07-24 운영 요청) — 텍스트(KO/EN)만 표시 */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.nav-lang-select:hover { border-color: var(--border-md); }
/* EN 헤더 폭 보정(2026-07-24, 재정정) — EN 링크 텍스트('AI Services'/'AI Project Requests')가 KO보다
   ~95px 길어 검색창(메인 요소)이 그만큼 줄던 것을 **공백만 줄여** 상쇄. 재정정: 링크 패딩·gap 축소는
   두 링크 사이가 KO보다 좁아 보여 폐지(운영 지적) — **링크 간격은 KO와 동일**하게 두고, 95px 전부를
   우측 블록 고정 폭(316→221)의 남는 공백(마지막 링크~찜/채팅 아이콘 사이 — justify-flex-end라 내용은
   잘리지 않음)에서 흡수한다. 메인 요소(로고·검색창·토글·프로필) 크기 불변 — KO/EN의 검색창 폭·각 요소
   시작/끝 라인이 동일해진다. .nav-top 자체 gap은 로그인 여부로 자식 수가 달라지므로 건드리지 않는다. */
.nav-top-en .nav-right { width: 221px; gap: 3px; }
/* 221px 안에 로그인 상태 내용이 들어가도록 **내부 공백만** 추가 축소(실측: 내용 253px → 219px):
   아이콘 버튼 히트영역 36→28(아이콘 20px 불변)·프로필 칩 좌우 패딩 8→2·gap 6→4.
   이름은 EN에서만 말줄임 상한 96→64(아주 긴 표시명이 박스를 넘어 링크를 침범하는 것 방지). */
.nav-top-en .nav-chat-btn { width: 26px; height: 26px; }
.nav-top-en .nav-user-trigger { padding-left: 1px; padding-right: 1px; }
/* EN도 이름 폭 고정(위치 불변) — 221px 예산상 64px(4글자). KO 5글자(80px) 규칙의 EN 축소판. */
.nav-top-en .nav-user-name { width: 64px; }
@media (max-width: 768px) { .nav-top-en .nav-right { width: auto; } }
.btn-login {
  font-size: 16px; color: var(--text-700);
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border); background:var(--bg-white);
  transition: border-color .15s;
}
.btn-login:hover { border-color: var(--border-md); }
.btn-signup {
  font-size: 16px; font-weight: 700;
  padding: 8px 20px; border-radius: 8px;
  background: var(--primary); color: #fff; border: none;
  box-shadow: var(--shadow-primary); transition: opacity .15s;
}
.btn-signup:hover { opacity: .88; }
.nav-user-menu { display: flex; align-items: center; }
.nav-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.nav-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* 프로필 페이지 아바타 */
.profile-avatar-wrap {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.profile-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-avatar-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.38);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s; border-radius: 50%;
}
.profile-avatar-wrap:hover .profile-avatar-overlay { opacity: 1; }
.nav-user-trigger {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; padding: 6px 8px 14px;
  margin-bottom: -8px;
}
/* 이름 폭은 한글 5글자 기준 **고정**(2026-07-24 운영 요청 — max-width는 짧은 이름에서 칩이 줄어
   하트/채팅 아이콘 위치가 이름 길이 따라 흔들렸다). 5글자 초과는 말줄임, 미만은 빈 공간(위치 불변). */
.nav-user-name { font-size: 16px; color: var(--text-700); width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-caret { font-size: 12px; color: var(--text-400); transition: transform .2s; line-height: 1; }
.nav-user-trigger:hover .nav-user-caret { transform: rotate(180deg); }
.nav-user-dropdown {
  position: absolute; top: 100%; right: 0;
  background:var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0,0,0,.1);
  min-width: 176px; z-index: 400;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
}
.nav-user-trigger:hover .nav-user-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-dropdown-section { padding: 5px 0; border-bottom: 1px solid var(--border); }
.nav-dropdown-section:last-child { border-bottom: none; }
.nav-dropdown-label {
  font-size: 13px; font-weight: 700; color: var(--text-400);
  padding: 4px 14px 2px; letter-spacing: .04em; text-transform: uppercase;
}
.nav-dropdown-item {
  display: block; padding: 8px 14px;
  font-size: 16px; color: var(--text-700);
  transition: background .1s, color .1s;
}
.nav-dropdown-item:hover { background: var(--bg-gray); color: var(--text-900); }
.nav-dropdown-btn {
  width: 100%; text-align: left; background: none; border: none;
  padding: 8px 14px; font-size: 16px; color: #ef4444;
  cursor: pointer; transition: background .1s;
}
.nav-dropdown-btn:hover { background: #fef2f2; }

.nav-cats { border-bottom: 1px solid var(--border); background:var(--bg-white); }
/* 카테고리 바(2026-07-24 재정정) — **항상 한 줄** + space-between: 첫 칩('전체' 아이콘)이 레일 좌측(x=144),
   마지막 칩 끝이 레일 우측(x=1296)에 딱 붙고 칩 사이 공백이 자동 분배된다(가장자리 칩은 바깥 패딩 0).
   EN처럼 라벨 총폭이 컨테이너를 넘치면 nav.html fitNavCats()가 --cats-fs를 줄여 한 줄에 맞춘다
   (구 EN 두 줄 고정 분할(.nav-cats-break)은 폐지). */
.nav-cats-inner {
  max-width: var(--max-w); margin: 0 auto; /* .nav-top·본문·푸터와 동일 폭(라인 통일, 2026-07-23) */
  padding: 0 var(--px);
  display: flex; flex-wrap: nowrap; justify-content: space-between;
}
.nav-cats-inner .nav-cat:first-child { padding-left: 0; }
.nav-cats-inner .nav-cat:last-child { padding-right: 0; }
@media (max-width: 768px) {
  /* 모바일은 한 줄 + 가로 스크롤 유지(세로 공간 절약) — 폰트 자동 축소 미적용(fitNavCats가 스킵) */
  .nav-cats-inner { overflow-x: auto; scrollbar-width: none; }
  .nav-cats-inner::-webkit-scrollbar { display: none; }
}
.nav-cat {
  display: flex; align-items: center; gap: 5px;
  /* 높이 고정 48px(2026-07-24) — EN은 fitNavCats()가 폰트를 줄이는데(12.5px) 세로 패딩 기준이면
     바 높이가 KO(48)보다 낮아져 끝나는 지점이 어긋난다. 고정 높이 + 세로 중앙 정렬로 KO/EN 동일. */
  padding: 0 16px; height: 48px;
  /* 검정화 유일 예외 — 운영이 색 유지를 지정한 자리(hover·active는 --primary).
     2026-07-31에 헤더 링크(--nav-link)가 검정으로 내려가면서 예외는 여기 하나만 남았다. */
  font-size: var(--cats-fs, 16px); color: var(--nav-cat);
  white-space: nowrap; flex-shrink: 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-cat:hover { color: var(--primary); }
.nav-cat.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
/* 히어로(2026-07-22 개편) — 배너 캐러셀 단독 풀와이드.
   배경 틴트 밴드는 2026-07-29 지면 순백화로 폐지 — 히어로도 본문과 같은 #ffffff다.
   (밴드를 되살리지 말 것: '본문 배경은 전부 흰색' 지시가 상위 규칙이다.) */
.hero {
  background: #ffffff;
}
.hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 28px var(--px) 34px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(7,15,84,0.09); color: var(--primary);
  font-size: 15px; font-weight: 700;
  padding: 6px 16px; border-radius: 20px; margin-bottom: 26px;
}
.eyebrow-pulse {
  width: 7px; height: 7px;
  background: var(--primary); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(.75); opacity: .55; }
}
.hero h1 {
  font-size: 45px; font-weight: 900; line-height: 1.22;
  color: var(--text-900); letter-spacing: -1.2px; margin-bottom: 16px;
}
.hero h1 em {
  /* 브랜드 액센트 — 본문 검정화(2026-07-30) 대상이 아니다(검정 제목 안 검정 강조는 강조가 아니다) */
  font-style: normal; color: var(--primary);
}
.hero-sub { font-size: 19px; color: var(--text-500); line-height: 1.75; margin-bottom: 38px; }

.hero-search-wrap {
  max-width: 560px; margin: 0 0 22px;
  display: flex; align-items: center;
  background:var(--bg-white); border: 2px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.07);
  overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.hero-search-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 10px 40px rgba(7,15,84,0.14);
}
.hero-search-wrap input {
  flex: 1; border: none; outline: none;
  padding: 18px 22px; font-size: 18px;
  font-family: inherit; color: var(--text-900); background: transparent;
}
.hero-search-wrap input::placeholder { color: var(--text-400); }
.hero-search-btn {
  margin: 7px; padding: 0 28px; height: 50px;
  background: var(--primary); border: none;
  border-radius: 11px; color: #fff;
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  transition: opacity .15s;
}
.hero-search-btn:hover { opacity: .88; }
.hero-search-btn svg { width: 16px; height: 16px; }

.hero-tags { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.hero-tags-label { font-size: 15px; color: var(--text-400); margin-right: 2px; }
.hero-tag {
  font-size: 15px; color: var(--text-700);
  background: rgba(255,255,255,0.85); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 14px;
  transition: border-color .15s, color .15s, background .15s;
}
.hero-tag:hover { border-color: var(--primary); color: var(--primary); background:var(--bg-white); }

/* ═══════════════════════════════════
   SHARED SECTION
═══════════════════════════════════ */
.section {
  max-width: var(--max-w); margin: 0 auto;
  padding: 60px var(--px);
}
.section-hd {
  display: flex; align-items: flex-end;
  justify-content: space-between; margin-bottom: 28px;
}
.section-title {
  font-size: 25px; font-weight: 900;
  color: var(--text-900); letter-spacing: -.4px; line-height: 1.3;
}
/* 구 .section-title-sub(제목 옆 부제)는 2026-07-27 제거 — 홈 인기·신규도 부제를 아랫줄(.section-body)로 통일 */
.section-body { font-size: 17px; color: var(--text-500); margin-top: 4px; }
/* 검정화(2026-07-31 운영 지시). 전 템플릿 통틀어 사용처가 홈 '전체 보기 ›' 4곳뿐이라
   클래스 전역 수정이 곧 홈 한정 수정이다 — 스코프 선택자를 따로 만들 이유가 없다.
   색을 빼도 링크 어포던스는 문구에 붙은 › 글리프와 hover 밑줄이 진다(hover는 종전부터
   색이 아니라 밑줄로 구분해 왔으므로 검정으로 내려도 상태 구분이 사라지지 않는다). */
.section-link {
  font-size: 16px; color: var(--text-900); font-weight: 600;
  white-space: nowrap; display: flex; align-items: center; gap: 3px;
}
.section-link:hover { text-decoration: underline; }

.bg-white { background:var(--bg-white); }
.bg-gray  { background: var(--bg-gray); }

/* ═══════════════════════════════════
   CATEGORY CARDS
═══════════════════════════════════ */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
  background:var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 20px 26px;
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  display: block;
}
.cat-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 6px 24px rgba(7,15,84,0.1);
  transform: translateY(-3px);
}
.cat-icon-box {
  width: 68px; height: 68px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 37px; margin: 0 auto 16px;
}
.ci-purple { background: rgba(7,15,84,0.1); }
.ci-blue   { background: #eff6ff; }
.ci-green  { background: #f0fdf4; }
.ci-orange { background: #fff7ed; }
.ci-pink   { background: #fdf2f8; }
.ci-teal   { background: #f0fdfa; }
.ci-amber  { background: #fffbeb; }
.ci-indigo { background: #eef2ff; }
.cat-name  { font-size: 17px; font-weight: 800; color: var(--text-900); margin-bottom: 6px; }
.cat-sub   { font-size: 15px; color: var(--text-400); line-height: 1.5; }

/* ═══════════════════════════════════
   SERVICE / AGENT CARDS
═══════════════════════════════════ */
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* .cards-grid-3 제거(2026-07-21) — 찜 목록도 마켓과 동일한 .list-grid(4열) 사용 */

.agent-card {
  background:var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.agent-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}
.card-thumb {
  height: 148px;
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
.ct-purple { background: var(--primary-soft); }
.ct-blue   { background: #dbeafe; }
.ct-green  { background: #dcfce7; }
.ct-orange { background: #fed7aa; }
.ct-pink   { background: #fce7f3; }
.ct-teal   { background: #ccfbf1; }
.ct-amber  { background: #fef3c7; }
.ct-indigo { background: #ecedef; }

.card-thumb-icon {
  width: 68px; height: 68px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 37px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.card-thumb-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px 12px 0 0; }
.card-badge {
  position: absolute; top: 10px; left: 12px;
  font-size: 13px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  background: rgba(255,255,255,0.9);
}
/* ── 광고 라벨 통일(2026-07-24 운영 요청) — 전 지면(마켓 카드·홈 추천·홈 1:1·검색 추천·배너) 단일
      디자인 .ad-soft 하나로: 작고 은은하게(광고 몰입을 깨지 않게), 표시광고법상 광고 식별 표기는 유지.
      구 2종(.card-badge 진한 AD / *-soft 계열)은 폐지. 시각은 공용, 위치만 지면별 변형. ── */
.ad-soft {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; line-height: 1.6;
  color: rgba(255,255,255,.92); background: rgba(7,15,84,.45);
  border-radius: 4px; padding: 1px 6px; pointer-events: none;
}
.card-thumb .ad-soft { position: absolute; top: 8px; left: 10px; z-index: 1; }
.sba-row .ad-soft { position: absolute; top: 10px; right: 12px; }
/* (구) .hsa-thumb .ad-soft — 홈 1:1 광고 카드(.home-sec-ad/.hsa-*)는 2026-07-29 홈 섹션 개편에서
   마켓 카드로 대체됐다. 그 지면의 나머지 규칙은 그때 지워졌는데 이 한 줄만 남아 있었고, 광고 센터
   미리보기가 없는 클래스로 카드를 그리고 있었다 — 2026-08-01에 마크업과 함께 정리. */
/* (구) .search-dd-ad .ad-soft — 검색 드롭다운의 카드별 AD 라벨은 2026-07-30 폐지.
   그 지면의 광고 고지는 '이런 서비스는 어때요?' 제목 줄 오른쪽 .ad-note 알약 하나가 맡는다. */

/* ── 툴팁 공용 .nexa-tip(2026-07-30 운영 지시) ────────────────────────────────
   브라우저 기본 title 툴팁을 대체한다. 기본 툴팁은 ① 0.5~1초 지나야 뜨고 ② OS 서식이라
   지면과 따로 놀며 ③ 키보드 포커스에는 아예 뜨지 않는다. data-tip 하나로 셋 다 해결.
   말풍선은 ::after(본문) + ::before(꼬리) 두 겹이라 별도 DOM이 필요 없다.
   ⚠ 기준 요소에 position(relative 이상)과 overflow:visible이 필요하다 — 잘리는 컨테이너
     (.reco-track처럼 overflow:auto) 안에는 두지 말 것. */
.nexa-tip { position: relative; }
.nexa-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 11px); right: 0;
  width: max-content; max-width: 290px;
  padding: 10px 13px; border-radius: 10px;
  background: var(--primary-deep); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: -.1px;
  /* keep-all: 없으면 한국어가 글자 단위로 끊겨 '있습니 / 다.' 같은 줄바꿈이 난다 */
  text-align: left; white-space: normal; word-break: keep-all; text-transform: none;
  box-shadow: 0 10px 28px rgba(7,15,84,.30);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none; z-index: 40;
}
.nexa-tip::before {                       /* 꼬리 — 알약 오른쪽 끝에 맞춘다 */
  content: ''; position: absolute; bottom: calc(100% + 5px); right: 15px;
  border: 6px solid transparent; border-top-color: var(--primary-deep);
  opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s;
  pointer-events: none; z-index: 41;
}
.nexa-tip:hover::after,  .nexa-tip:focus-visible::after,
.nexa-tip:hover::before, .nexa-tip:focus-visible::before { opacity: 1; visibility: visible; }
.nexa-tip:hover::after, .nexa-tip:focus-visible::after { transform: translateY(0); }
/* 왼쪽 정렬 변형 — 지면 왼편에 붙은 기준 요소는 말풍선이 화면 밖으로 나간다 */
.nexa-tip.tip-left::after  { right: auto; left: 0; }
.nexa-tip.tip-left::before { right: auto; left: 15px; }
/* 아래로 띄우는 변형 — 검색 드롭다운처럼 overflow:hidden 컨테이너의 윗부분에 놓인 기준 요소용
   (위로 띄우면 컨테이너 경계에서 잘린다). 꼬리도 위를 향하도록 뒤집는다. */
.nexa-tip.tip-below::after {
  bottom: auto; top: calc(100% + 11px); transform: translateY(-4px);
}
.nexa-tip.tip-below::before {
  bottom: auto; top: calc(100% + 5px);
  border-top-color: transparent; border-bottom-color: var(--primary-deep);
}
/* 기본 hover 규칙(translateY(0))과 특이도가 같아 뒤에 온 위 선언이 이기므로 여기서 다시 준다 */
.nexa-tip.tip-below:hover::after, .nexa-tip.tip-below:focus-visible::after { transform: translateY(0); }

/* 섹션 단위 광고 고지 알약(2026-07-30 운영 지시) — 카드 썸네일마다 붙던 .ad-soft를 대신한다.
   칩 행 오른쪽 끝(= '전체 보기' 바로 아래)에 놓이고, 칩과 같은 알약 형태로 한 줄에 어울린다. */
.ad-note {
  margin-left: auto; flex-shrink: 0; align-self: center;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-white);
  color: var(--text-400); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  line-height: 1.2; cursor: help; user-select: none; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.ad-note .ic { width: 13px; height: 13px; flex-shrink: 0; }
.ad-note:hover, .ad-note:focus-visible {
  color: var(--primary); border-color: var(--primary); background: var(--primary-bg);
}
.ad-note:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 칩 없는 추천 섹션(방금 본·최근 찾아 본)의 고지 전용 줄 — 칩 행과 같은 자리·같은 여백 */
.sec-adline { display: flex; justify-content: flex-end; margin: 4px 0 18px; }
/* 광고가 실제로 없는 섹션은 홈 스크립트가 접는다(hidden) — 알약이 inline-flex라 명시 필요 */
.ad-note[hidden], .sec-adline[hidden] { display: none; }
@media (max-width: 560px) {
  /* 좁은 화면에서는 칩이 줄바꿈되며 고지가 아래 줄 오른쪽으로 내려간다 — 그대로 두되 폭만 줄인다 */
  .nexa-tip::after { max-width: min(270px, calc(100vw - 48px)); }
}
.card-fav {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; border: none;
  transition: background .15s;
  cursor: pointer;
}
.card-fav:hover { background:var(--bg-white); }
.card-fav.active { color: #ef4444; }
/* 판매자 모드에선 구매자 전용 UI(찜 하트, 새 의뢰 등록 버튼 등)를 숨긴다 — head/applyMode가 <html>.seller-mode 토글 */
.seller-mode .card-fav,
.seller-mode .btn-fav,
.seller-mode .buyer-only { display: none !important; }
/* 판매자 모드 전용 UI(마켓 '서비스 등록' 버튼 등, 2026-07-24) — 서버는 판매자에게만 렌더하고,
   표시는 이 클래스가 담당해 비즈 토글 시 새로고침 없이 즉시 반영된다(applyMode의 seller-mode 토글과 세트) */
.seller-only { display: none !important; }
.seller-mode .seller-only { display: inline-flex !important; }
.badge-hot  { color: #ef4444; }
.badge-new  { color: #10b981; }
.badge-pick { color: var(--primary); }

.card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.card-dev { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.dev-ava {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.ava-purple { background: #070f54; }
.ava-blue   { background: #2563eb; }
.ava-green  { background: #059669; }
.ava-orange { background: #d97706; }
.ava-pink   { background: #db2777; }
.ava-teal   { background: #0d9488; }
.dev-label  { font-size: 14px; color: var(--text-400); }
.card-title {
  font-size: 16px; font-weight: 700; color: var(--text-900);
  line-height: 1.5; margin-bottom: 12px; flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--bg-gray);
}
.card-rating { display: flex; align-items: center; gap: 4px; font-size: 15px; }
.r-star { color: #f59e0b; font-size: 16px; }
.r-num  { font-weight: 700; color: var(--text-900); }
.r-cnt  { color: var(--text-400); font-size: 14px; }
/* 가격 검정화(2026-07-31 운영 지시 — '메인 페이지 가격'). 홈으로 스코프를 좁히지 않은 이유:
   .card-price는 홈·마켓 목록·찜·광고 카드·판매자 공개 프로필이 **같은 카드 부품**을 공유하고
   (마켓은 .list-wide .card-price로 글자 크기만 덮어쓸 뿐 색은 이 규칙을 상속한다), 지면마다
   가격 색이 달라지면 같은 카드가 두 색으로 읽힌다. 포트폴리오 연결 서비스(.pf-linked-price)가
   이미 --text-900이라 전역 검정이 오히려 일관성을 회복한다.
   ⚠ 서비스 상세 플랜 가격(.sidebar-price)은 카드가 아니라 구매 사이드바라 범위 밖 — 지시는 '메인 페이지'다. */
.card-price { font-size: 16px; font-weight: 800; color: var(--text-900); }
.card-price small { font-size: 13px; font-weight: 400; color: var(--text-400); }

/* ═══════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════ */
.how-wrap { background:var(--bg-white); }
.how-inner { max-width: var(--max-w); margin: 0 auto; padding: 72px var(--px); }
.how-hd { text-align: center; margin-bottom: 56px; }
.how-hd h2 { font-size: 31px; font-weight: 900; color: var(--text-900); letter-spacing: -.5px; margin-bottom: 10px; }
.how-hd p  { font-size: 18px; color: var(--text-500); }
.how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; position: relative;
}
.how-steps::before {
  content: '';
  position: absolute; top: 35px;
  left: calc(16.67% + 35px); right: calc(16.67% + 35px);
  height: 2px;
  background: var(--primary-light);
}
.how-step { text-align: center; padding: 0 28px; position: relative; }
.how-step-n {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 29px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 6px 24px rgba(7,15,84,0.3);
  position: relative; z-index: 1;
}
.how-step h3 { font-size: 19px; font-weight: 800; color: var(--text-900); margin-bottom: 10px; }
.how-step p  { font-size: 16px; color: var(--text-500); line-height: 1.7; }
.how-step-icon { font-size: 23px; margin-bottom: 6px; }

/* ═══════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════ */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card {
  background:var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px;
  transition: box-shadow .15s;
}
.review-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.review-stars { color: #f59e0b; font-size: 17px; margin-bottom: 12px; letter-spacing: 2px; }
.review-text  { font-size: 16px; color: var(--text-700); line-height: 1.7; margin-bottom: 18px; }
.review-author { display: flex; align-items: center; gap: 10px; }
.review-ava {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.review-name    { font-size: 16px; font-weight: 700; color: var(--text-900); }
.review-company { font-size: 14px; color: var(--text-400); margin-top: 1px; }

/* ═══════════════════════════════════
   CTA BANNER
═══════════════════════════════════ */
.cta-wrap { padding: 0 var(--px) 64px; }
.cta-banner {
  max-width: var(--max-w); margin: 0 auto;
  background: var(--bg-gray); border: 1px solid var(--border);
  border-radius: 22px; padding: 48px 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 36px;
}
.cta-text h2 { font-size: 25px; font-weight: 900; color: var(--text-900); letter-spacing: -.4px; margin-bottom: 10px; }
.cta-text p  { font-size: 17px; color: var(--text-500); line-height: 1.65; }
.cta-btns { display: flex; gap: 10px; flex-shrink: 0; }
.btn-cta-p {
  background: var(--primary); color: #fff; border: none;
  font-size: 17px; font-weight: 700;
  padding: 13px 26px; border-radius: 10px;
  box-shadow: var(--shadow-primary); transition: opacity .15s; white-space: nowrap;
}
.btn-cta-p:hover { opacity: .88; }
.btn-cta-s {
  background:var(--bg-white); color: var(--primary);
  border: 1.5px solid var(--primary);
  font-size: 17px; font-weight: 700;
  padding: 13px 26px; border-radius: 10px;
  transition: background .15s; white-space: nowrap;
}
.btn-cta-s:hover { background: var(--primary-bg); }

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
/* 푸터는 라이트/다크 공통 고정 다크 네이비 — 내부 텍스트가 rgba(255,255,255,*) 고정이라 배경도 변수 금지.
   좌우 패딩은 inner에(2026-07-23) — 바깥 패딩+안쪽 max-w 구조는 콘텐츠가 본문보다 24px 왼쪽으로 어긋났다(라인 통일). */
.footer { background: #070f54; padding: 56px 0 36px; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }
.footer-top {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 64px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 30px;
}
.footer-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 21px; font-weight: 900; color: #fff; margin-bottom: 16px;
}
/* 헤더(.nav-logo)와 동일한 32px 아이콘 — 브랜드 색 타일 없음(2026-07-26 운영 요청).
   favicon.svg는 검정 단색이라 어두운 푸터에서 그대로 두면 안 보인다 → 반전해 흰 로고로 쓴다. */
.footer-logo img {
  width: 32px; height: 32px; border-radius: 8px;
  display: block; flex-shrink: 0; filter: invert(1);
}
.footer-desc { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.38); margin-bottom: 20px; }
/* 링크 컬럼은 보이는 개수만큼 균등 분할(2026-07-23 우측 라인 정렬) — 고정 repeat(4,1fr)는 구매자
   모드에서 판매자 컬럼(display:none)이 빠지면 4번째 트랙이 빈 채 남아 우측 1/4이 비었다.
   열 우선 auto-flow는 보이는 컬럼 수로 트랙을 만들어 마지막 컬럼이 항상 우측 레일까지 찬다. */
.footer-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; }
.footer-col-t { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.65); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 15px; color: rgba(255,255,255,.38); margin-bottom: 10px; transition: color .15s; }
.footer-col a:hover { color: rgba(255,255,255,.75); }
.footer-bot { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: rgba(255,255,255,.28); }
.footer-sns { display: flex; gap: 10px; }
.footer-sns a {
  width: 32px; height: 32px; background: rgba(255,255,255,.07);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: rgba(255,255,255,.5); transition: background .15s;
}
.footer-sns a:hover { background: rgba(255,255,255,.14); }

/* ═══════════════════════════════════
   SERVICES LIST PAGE
═══════════════════════════════════ */
.page-header {
  background:var(--bg-white); border-bottom: 1px solid var(--border);
  padding: 20px var(--px);
}
.page-header-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.page-header h1 { font-size: 25px; font-weight: 900; color: var(--text-900); letter-spacing: -.4px; }
.page-header p  { font-size: 16px; color: var(--text-400); margin-top: 4px; }

/* 의뢰 게시판 배너형 헤더(2026-07-23, 노트폴리오 잡 배너 참고) — 큰 타이틀·가운데 정렬 + 중앙 CTA.
   마켓의 page-header 밴드는 같은 날 제거(목록이 바로 시작) — 이 배너는 의뢰 게시판 전용. */
.prj-banner {
  background: #ffffff;
  border-bottom: 1px solid var(--primary-soft-bd);
  padding: 52px var(--px) 46px;
}
.prj-banner-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.prj-banner h1 {
  font-size: 39px; font-weight: 900; color: var(--text-900); letter-spacing: -.8px; line-height: 1.3;
}
.prj-banner p { font-size: 18px; color: var(--text-500); margin-top: 10px; }
.prj-banner-btn {
  display: inline-block; margin-top: 22px;
  background: var(--primary); color: #fff; text-decoration: none;
  font-size: 18px; font-weight: 800; padding: 13px 34px; border-radius: 999px;
  box-shadow: var(--shadow-primary); transition: transform .15s, box-shadow .15s;
}
.prj-banner-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(7,15,84,.4); }
@media (max-width: 768px) {
  .prj-banner { padding: 34px var(--px) 30px; }
  .prj-banner h1 { font-size: 27px; }
  .prj-banner p { font-size: 16px; }
}

.filter-bar {
  background:var(--bg-white); border-bottom: 1px solid var(--border);
  padding: 0 var(--px);
}
.filter-bar-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none; padding: 10px 0;
}
.filter-bar-inner::-webkit-scrollbar { display: none; }
.filter-chip {
  font-size: 16px; color: var(--text-500);
  padding: 6px 16px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  border: 1.5px solid var(--border); background:var(--bg-white);
  transition: all .15s;
}
.filter-chip:hover  { border-color: var(--primary); color: var(--primary); }
.filter-chip.active { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); font-weight: 700; }

/* ── 서비스 목록 2단 레이아웃 ── */
.list-search-form {
  margin: 16px auto 0; display: flex; align-items: center; gap: 8px; max-width: 560px;
}
.list-search-form .list-search-input { flex: 1; min-width: 0; margin: 0; width: auto; }
.list-search-form .list-search-btn {
  flex-shrink: 0; width: auto; padding: 0 20px; height: 40px;
  font-size: 16px; white-space: nowrap; margin-bottom: 0; box-shadow: none;
}

/* ── 마켓 슬롯 배너(V95, 2026-07-23) — 페이지 헤더와 2단 레이아웃 사이, 슬롯 광고 1장 전폭.
      구 핏매치 카드 슬라이드(.fitmatch-inner/track/card 등)는 폐지 — 래퍼(.fitmatch-banner)만 재사용. ── */
.fitmatch-banner { max-width: var(--max-w); margin: 12px auto 0; padding: 0 var(--px); }

.services-layout {
  max-width: var(--max-w); margin: 0 auto;
  /* 상단 14px(2026-07-23, 종전 24) — 마켓 첫 화면에 카드 2줄×2장이 딱 들어오게 상단 여백 축소 */
  padding: 14px var(--px) 48px;
  display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start;
}

.services-sidebar {
  position: sticky; top: var(--nav-offset, 128px);
  background:var(--bg-white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.sidebar-cat-title {
  font-size: 14px; font-weight: 700; color: var(--text-400); letter-spacing: .6px;
  padding: 14px 16px 8px; text-transform: uppercase;
}
.sidebar-cat-item {
  display: block; padding: 9px 16px; font-size: 16px; color: var(--text-500);
  border-left: 2.5px solid transparent; transition: all .15s;
}
.sidebar-cat-item:hover  { color: var(--primary); background: var(--primary-bg); }
.sidebar-cat-item.active { color: var(--primary); font-weight: 700; border-left-color: var(--primary); background: var(--primary-bg); }

.sort-bar {
  padding: 0 0 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.sort-label { font-size: 16px; color: var(--text-400); }
.sort-select {
  font-size: 16px; color: var(--text-700); padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--border); background:var(--bg-white); cursor: pointer;
}
.sort-select:focus { outline: none; border-color: var(--primary); }
/* 정렬 + 조건 필터 묶음(2026-07-27) — 종전에는 셀렉트가 하나뿐이라 form이 display:contents로
   sort-bar의 space-between을 그대로 탔다. 여럿이 되면 그 방식은 셀렉트를 좌우로 흩어 놓으므로
   묶어서 오른쪽에 세운다. 좁은 화면에서는 줄바꿈(공간이 없으면 겹치는 대신 아래로). */
.sort-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* 목록 카드 그리드 — 기본 4열(찜 목록 등). 페이지 크기와 세트 */
.list-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
/* 마켓 목록 2열 카드(2026-07-23 확정안) — 세로형(썸네일 위 전폭, 제목·별점·가격이 그 아래).
   가로형(정보 우측) 배치는 잘못된 시도로 폐기(운영 피드백). 목표: **진입 첫 화면에 딱 2줄×2장(광고 4장)**
   — 카드 높이를 (썸네일 200px + 컴팩트 본문 ~100px)로 잡고 목록 위 여백(배너 마진·레이아웃 상단 패딩)을
   줄여 ~900px 뷰포트에서 2줄이 화면을 채우고 3줄째는 폴드 아래로 내려가게 한다.
   제목은 1줄 클램프 — 2줄 제목이 카드 높이를 흔들면 '딱 떨어지는' 2줄 배치가 깨진다.
   페이지 카드 총량 20(광고 4+게시글 16, TOTAL_CARDS_PER_PAGE와 세트). 판매자 아바타/이름 숨김.
   복합 선택자(.list-grid.list-wide)라 아래 반응형의 .list-grid 열 수 변경보다 항상 우선한다. */
.list-grid.list-wide { grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* ── 홈 구매자 섹션 = 한 화면(2026-07-27 운영 요청) ──────────────────────────────
   제목·슬라이드 버튼을 누르면 그 섹션만 보이게 스크롤이 맞춰진다(home/index.html의 focusSection).
   "섹션 위를 헤더 밑에 붙인다"만으로는 부족하다 — 실측 섹션 781px < 가용 831px(1440x950)이라
   아래가 50px 비어 다음 섹션이, 맨 끝 '신규 등록'에선 푸터가 딸려 들어온다. 그래서 섹션 자체에
   최소 높이(뷰포트 - 스티키 헤더)를 줘 딸려 오는 요소를 화면 밖으로 민다.
   --nav-h는 스크립트가 헤더를 실측해 넣는다(로케일·폰트·창 크기로 달라짐, 폴백은 한국어 실측 119px).
   dvh: 모바일 주소창이 접히면 100vh가 화면보다 커져 섹션이 넘친다 — 지원 엔진에선 dvh로 덮어쓴다. */
.home-sec { min-height: calc(100vh - var(--nav-h, 119px)); }
@supports (min-height: 100dvh) {
  .home-sec { min-height: calc(100dvh - var(--nav-h, 119px)); }
}
/* 제목이 버튼 역할(role=button, 스크립트가 부여) — 클릭 가능함이 보이게. 옆의 '전체 보기'와 같은 호버색 */
.home-sec .section-hd .section-title { cursor: pointer; }
.home-sec .section-hd .section-title:hover { color: var(--primary); }
.home-sec .section-hd .section-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }

/* 홈 구매자 섹션 개편(2026-07-29 운영 지시) — 왼쪽 슬롯(카테고리 200px·광고 2장 스택) 폐지:
   카테고리 칩은 제목·설명 아래 **가로 행**(.home-sec-cats-row), 슬라이더는 섹션 전폭 단일 트랙.
   .home-sec-grid·.home-sec-side는 판매자 홈 의뢰 섹션(#homePrjSec)이 계속 쓴다. */
.home-sec-grid { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: stretch; }
.home-sec-side {
  background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
/* 카테고리 항목이 <button>(페이지 이동 없는 섹션 필터) — a용 기본 스타일에 버튼 리셋 추가 */
.home-sec-side .sidebar-cat-item {
  display: block; width: 100%; text-align: left; background: none; cursor: pointer;
  border: 0; border-left: 2.5px solid transparent; font-family: inherit;
}
.home-sec-side .sidebar-cat-item:hover  { color: var(--primary); background: var(--primary-bg); }
.home-sec-side .sidebar-cat-item.active { color: var(--primary); font-weight: 700; border-left-color: var(--primary); background: var(--primary-bg); }
/* 가로 카테고리 칩 행(2026-07-29) — 마켓 카테고리 바와 같은 알약 칩. 좁은 폭에선 줄바꿈. */
.home-sec-cats-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.home-sec-cats-row .sidebar-cat-item {
  display: inline-block; padding: 7px 14px; font-size: 14px; color: var(--text-700);
  background: var(--bg-white); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; font-family: inherit; line-height: 1.2; white-space: nowrap;
}
.home-sec-cats-row .sidebar-cat-item:hover  { color: var(--primary); border-color: var(--primary); background: var(--primary-bg); }
.home-sec-cats-row .sidebar-cat-item.active { color: #fff; font-weight: 700; background: var(--primary); border-color: var(--primary); }
/* 판매자 홈 의뢰 섹션의 카테고리(2026-07-24 운영 요청) — ① 의뢰 페이지 사이드바처럼 스크롤을 따라오고
   (sticky, 이동 한계는 그리드 셀 = 의뢰 목록 높이) ② 박스 끝은 stretch가 아니라 **내용이 끝나는 지점**
   (align-self:start가 행 stretch를 무효화). */
#homePrjSec .home-sec-cats { align-self: start; position: sticky; top: var(--nav-offset, 128px); }
@media (max-width: 1024px) { .home-sec-grid { grid-template-columns: 180px 1fr; gap: 20px; } }
@media (max-width: 768px)  { .home-sec-grid { grid-template-columns: 1fr; } .home-sec-side { display: none; } }
/* 2026-07-29 개편: 고정 높이(180px) → 마켓(AI 서비스) 목록 카드의 실측 비율(455:180)로 고정 —
   홈 섹션 3열·반응형 축소에서도 썸네일이 같은 비율로 그대로 작아진다(왜곡·깨짐 방지). */
.list-wide .card-thumb { height: auto; aspect-ratio: 455 / 180; overflow: hidden; }
/* 썸네일 잘림 해결(2026-07-23) — 넓은 박스(≈2.5:1)에 cover는 위아래가 크게 잘린다.
   원본은 contain으로 전체가 보이게, 좌우 빈 공간은 같은 이미지를 블러 확대한 배경 레이어(.card-thumb-bg,
   마켓 목록에서만 표시)가 채운다 — 레터박스 없이 원본 보존. 배지/하트는 DOM 후순위라 그대로 위에 뜬다. */
.card-thumb-bg { display: none; }
.list-wide .card-thumb-bg {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(18px) saturate(1.05); transform: scale(1.15); opacity: .5;
}
.list-wide .card-thumb-img { position: relative; object-fit: contain; border-radius: 0; }
.list-wide .card-body { padding: 9px 14px 11px; }
.list-wide .card-title { -webkit-line-clamp: 1; margin-bottom: 5px; flex: 0 0 auto; }
.list-wide .card-dev { display: none; }
.list-wide .card-footer { flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 7px; }
.list-wide .card-price { font-size: 18px; }
@media (max-width: 640px) {
  .list-grid.list-wide { grid-template-columns: 1fr; }
}

/* 사이드바 계층 + 아코디언 */
.sidebar-cat-back {
  display: block; padding: 10px 16px 6px; font-size: 15px; color: var(--text-400);
  border-bottom: 1px solid var(--border); margin-bottom: 4px; transition: color .15s;
}
.sidebar-cat-back:hover { color: var(--primary); }
/* 뒤로가기 버튼형(2026-07-21) — 페이지 이동 없이 사이드바를 전체 대분류 목록으로 전환 */
button.sidebar-cat-back {
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--border); font-family: inherit; cursor: pointer;
  padding-bottom: 10px;
}
.sidebar-cat-top {
  display: block; padding: 10px 16px; font-size: 16px; font-weight: 700; color: var(--text-700);
  border-left: 2.5px solid transparent; transition: all .15s;
}
.sidebar-cat-top.active, .sidebar-cat-top:hover { color: var(--primary); }

/* 중분류 아코디언 행 */
.sidebar-mid-row {
  display: flex; align-items: center;
  border-left: 2.5px solid transparent; transition: all .15s;
}
.sidebar-mid-row.active { border-left-color: var(--primary); background: var(--primary-bg); }
.sidebar-mid-row:hover:not(.active) { background: var(--primary-bg); }
.sidebar-mid-link {
  flex: 1; display: block; padding: 9px 6px 9px 14px;
  font-size: 16px; color: var(--text-500); text-decoration: none; transition: color .15s;
}
.sidebar-mid-row.active .sidebar-mid-link { color: var(--primary); font-weight: 700; }
.sidebar-mid-row:hover .sidebar-mid-link { color: var(--primary); }
.sidebar-chevron {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  padding: 9px 12px; color: var(--text-400); display: flex; align-items: center;
  transition: transform .2s;
}
.sidebar-chevron.open { transform: rotate(180deg); }
.sidebar-mid-row.active .sidebar-chevron { color: var(--primary); }

/* 소분류 접기/펼치기 */
.sidebar-sub-list { display: none; padding-bottom: 4px; }
.sidebar-sub-list.open { display: block; }
.sidebar-sub-item {
  display: block; padding: 7px 16px 7px 26px;
  font-size: 15px; color: var(--text-400); text-decoration: none;
  border-left: 2.5px solid transparent; transition: all .15s;
}
.sidebar-sub-item:hover { color: var(--primary); background: var(--primary-bg); }
.sidebar-sub-item.active { color: var(--primary); font-weight: 600; border-left-color: var(--primary); background: var(--primary-bg); }

/* 페이지네이션 */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  padding: 28px 0 8px;
}
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px; border-radius: 8px;
  font-size: 16px; color: var(--text-500);
  border: 1px solid var(--border); background:var(--bg-white);
  text-decoration: none; transition: all .15s;
}
.pg-btn:hover:not(.disabled) { border-color: var(--primary); color: var(--primary); }
.pg-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.pg-btn.disabled { color: var(--border); pointer-events: none; border-color: var(--border); }
.pg-btn.pg-arrow { min-width: 40px; }

/* ═══════════════════════════════════
   SERVICE DETAIL PAGE
═══════════════════════════════════ */
/* 본문 레일 정렬(2026-07-23 재정정) — 마이페이지·판매자 센터·채팅·정산 등 .detail-wrap 계열 전 페이지의
   본문이 헤더·푸터와 같은 레이아웃 라인(--max-w 레일의 안쪽 선)에 **좌우 모두** 맞는다.
   템플릿 인라인 max-width(520~1100px)는 우측이 레일에 못 미쳐 전부 제거(운영 지적) — 폭은 레일이 정한다.
   페이지별 콘텐츠 폭(inline max-width 520~1100)은 유지하되 '가운데 정렬'을 버리고 좌측 정렬 —
   좌우 마진 = 레일 바깥 여백 + --px(뷰포트가 레일보다 좁으면 --px로 폴백). 좌우 패딩은 마진이 대신한다. */
.detail-wrap {
  max-width: var(--max-w);
  margin-left: max(var(--px), calc((100% - var(--max-w)) / 2 + var(--px)));
  margin-right: max(var(--px), calc((100% - var(--max-w)) / 2 + var(--px)));
  padding: 32px 0 64px;
}
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }

.detail-thumb {
  height: 320px; border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 28px; overflow: hidden;
}
.detail-thumb-icon {
  width: 100px; height: 100px;
  background: rgba(255,255,255,0.7); backdrop-filter: blur(8px);
  border-radius: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 55px; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.detail-badge {
  position: absolute; top: 16px; left: 16px;
  font-size: 14px; font-weight: 700; padding: 5px 12px;
  border-radius: 20px; background: rgba(255,255,255,0.92);
}

.detail-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.detail-cat {
  font-size: 15px; font-weight: 700; color: var(--primary);
  background: var(--primary-bg); padding: 4px 12px; border-radius: 20px;
}
.detail-rating { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.detail-h1 {
  font-size: 29px; font-weight: 900; color: var(--text-900);
  letter-spacing: -.5px; line-height: 1.3; margin-bottom: 12px;
}
.detail-summary { font-size: 18px; color: var(--text-500); line-height: 1.75; margin-bottom: 24px; }
.detail-seller {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--bg-gray);
  border-radius: var(--r-md); margin-bottom: 28px;
}
.seller-ava {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.seller-name { font-size: 17px; font-weight: 700; color: var(--text-900); }
.seller-stats { font-size: 15px; color: var(--text-400); margin-top: 2px; }

.detail-section { margin-bottom: 36px; }
.detail-section-title {
  font-size: 20px; font-weight: 800; color: var(--text-900);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.detail-desc { font-size: 17px; color: var(--text-700); line-height: 1.8; }

/* Plans */
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan-card {
  border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; transition: border-color .15s, box-shadow .15s;
}
.plan-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(7,15,84,0.1); }
.plan-card.featured { border-color: var(--primary); background: var(--primary-bg); }
.plan-name  { font-size: 16px; font-weight: 800; color: var(--text-900); margin-bottom: 6px; }
.plan-price {
  font-size: 25px; font-weight: 900; color: var(--primary);
  letter-spacing: -1px; margin-bottom: 4px;
}
.plan-price small { font-size: 16px; font-weight: 400; color: var(--text-400); }
.plan-desc  { font-size: 15px; color: var(--text-500); margin-bottom: 14px; line-height: 1.6; }
.plan-features { list-style: none; margin-bottom: 18px; }
.plan-features li {
  font-size: 15px; color: var(--text-700);
  padding: 4px 0; display: flex; align-items: center; gap: 6px;
}
.plan-features li::before { content: '✓'; color: var(--primary); font-weight: 700; }
.btn-plan {
  width: 100%; padding: 11px;
  font-size: 16px; font-weight: 700; border-radius: var(--r-md);
  transition: all .15s; border: none;
}
.btn-plan-primary { background: var(--primary); color: #fff; }
.btn-plan-primary:hover { opacity: .88; }
.btn-plan-outline { background:var(--bg-white); color: var(--primary); border: 1.5px solid var(--primary); }
.btn-plan-outline:hover { background: var(--primary-bg); }

/* Sticky sidebar — 기본 128px(nav-top 70 + 카테고리 바 한 줄 ~43 + 여백). 카테고리 바가 EN에서
   두 줄로 늘면 nav.html의 syncNavOffset()이 --nav-offset을 실측값으로 갱신한다(.services-sidebar와 동일).
   사이드바가 뷰포트보다 길면 sticky-sidebar.js가 스크롤 방향을 따라 top을 조절해 전체가 보이게 한다. */
.detail-sidebar {
  position: sticky; top: var(--nav-offset, 128px);
  align-self: start;
}
.sidebar-card {
  background:var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 22px;
  margin-bottom: 16px;
}
.sidebar-price {
  font-size: 31px; font-weight: 900; color: var(--primary);
  letter-spacing: -1px; margin-bottom: 4px;
}
.sidebar-price small { font-size: 17px; font-weight: 400; color: var(--text-400); }
.sidebar-title { font-size: 17px; color: var(--text-500); margin-bottom: 18px; }
.btn-primary {
  width: 100%; padding: 14px;
  background: var(--primary); color: #fff; border: none;
  font-size: 18px; font-weight: 700; border-radius: var(--r-md);
  box-shadow: var(--shadow-primary); transition: opacity .15s; margin-bottom: 10px;
}
.btn-primary:hover { opacity: .88; }
.btn-secondary {
  width: 100%; padding: 13px;
  background:var(--bg-white); color: var(--primary);
  border: 1.5px solid var(--primary);
  font-size: 17px; font-weight: 700; border-radius: var(--r-md);
  transition: background .15s; margin-bottom: 10px;
}
.btn-secondary:hover { background: var(--primary-bg); }
.btn-fav {
  width: 100%; padding: 12px;
  background:var(--bg-white); color: var(--text-500);
  border: 1px solid var(--border);
  font-size: 16px; border-radius: var(--r-md);
  transition: all .15s;
}
.btn-fav:hover { border-color: #ef4444; color: #ef4444; }
.btn-fav.active { border-color: #ef4444; color: #ef4444; background: #fff5f5; }

/* Inquiry form */
.inquiry-form { display: flex; flex-direction: column; gap: 12px; }
.form-textarea {
  width: 100%; padding: 12px; min-height: 100px; resize: none;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  font-size: 16px; font-family: inherit; color: var(--text-900);
  transition: border-color .15s; outline: none;
}
.form-textarea:focus { border-color: var(--primary); }
.form-textarea::placeholder { color: var(--text-400); }

/* Reviews */
.review-list { display: flex; flex-direction: column; gap: 16px; }
.review-item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.review-item:last-child { border-bottom: none; }

/* ═══════════════════════════════════
   AUTH PAGES
═══════════════════════════════════ */
.auth-wrap {
  min-height: calc(100vh - 140px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px var(--px);
}
.auth-box {
  background:var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: 100%; max-width: 440px;
  padding: 40px 36px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.06);
}
.auth-box-wide { max-width: 560px; }
/* 로그인·가입 카드 로고 = 헤더(.nav-logo)와 같은 표기(2026-07-26 운영 요청):
   워드마크 검정, 아이콘은 32px 원본 그대로 — 브랜드 색 타일로 감싸지 말 것. */
.auth-logo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 23px; font-weight: 900; color: var(--text-900); margin-bottom: 6px;
}
.auth-logo img {
  width: 32px; height: 32px; border-radius: 8px;
  display: block; flex-shrink: 0;
}
.auth-title { font-size: 25px; font-weight: 900; color: var(--text-900); margin-bottom: 6px; text-align: center; }
.auth-sub   { font-size: 17px; color: var(--text-400); margin-bottom: 28px; text-align: center; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--text-400); font-size: 15px;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-footer { text-align: center; font-size: 16px; color: var(--text-400); margin-top: 20px; }
.auth-footer a { color: var(--primary); font-weight: 700; }
.auth-footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════ */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 16px; font-weight: 600; color: var(--text-700); margin-bottom: 6px; }
.form-label span { color: #ef4444; margin-left: 2px; }
.form-input, .form-select {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  font-size: 17px; font-family: inherit; color: var(--text-900);
  background:var(--bg-white); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(7,15,84,0.08);
}
.form-input::placeholder { color: var(--text-400); }
.form-error { font-size: 15px; color: #ef4444; margin-top: 5px; }
.form-hint  { font-size: 15px; color: var(--text-400); margin-top: 5px; line-height: 1.5; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.form-check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--primary); flex-shrink: 0; }
.form-check label { font-size: 16px; color: var(--text-700); line-height: 1.5; }

/* ── 셀렉트 펼침(드롭다운) 커스텀 — Chromium 135+의 appearance:base-select.
   미지원 브라우저는 @supports 블록 전체가 무시돼 네이티브 드롭다운 그대로(폴백).
   multiple/size(목록형)는 제외. 색은 전부 변수라 다크 모드 자동 대응. ── */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) { appearance: base-select; }

  /* 펼침 패널 — 카드형(둥근 모서리+그림자), 열릴 때 살짝 내려오는 페이드 */
  select:not([multiple]):not([size])::picker(select) {
    background: var(--bg-white);
    border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    padding: 5px; margin-block-start: 5px;
    opacity: 0; transform: translateY(-4px);
    transition: opacity .13s ease, transform .13s ease,
                display .13s allow-discrete, overlay .13s allow-discrete;
  }
  select:not([multiple]):not([size]):open::picker(select) { opacity: 1; transform: none; }
  @starting-style {
    select:not([multiple]):not([size]):open::picker(select) { opacity: 0; transform: translateY(-4px); }
  }

  /* 옵션 — 여백 있는 행 + 호버/선택 브랜드 색.
     폰트는 셀렉트 박스와 동일하게 상속(2026-07-24 운영 요청 — 종전 13.5px 고정이 폼 셀렉트(17px)보다 작았다) */
  select:not([multiple]):not([size]) option {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 7px;
    font-size: inherit; color: var(--text-700);
    transition: background .1s;
  }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible { background: var(--primary-bg); color: var(--primary); }
  select:not([multiple]):not([size]) option:checked { font-weight: 700; color: var(--primary); }
  select:not([multiple]):not([size]) option::checkmark { color: var(--primary); }

  /* 화살표 — 열리면 회전 */
  select:not([multiple]):not([size])::picker-icon { color: var(--muted-ic); transition: rotate .15s ease; }
  select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }

  /* KO/EN 언어 셀렉트(2026-07-24 운영 요청) — 화살표 아이콘만 제거(펼침 패널은 유지).
     위 전역 select 규칙(0,2,1)보다 지려면 :not() 두 개를 그대로 붙여 특이도를 맞춰야 한다. */
  select.nav-lang-select:not([multiple]):not([size])::picker-icon { display: none; }
}
.form-check a { color: var(--primary); }

.btn-form-primary {
  width: 100%; padding: 14px;
  background: var(--primary); color: #fff; border: none;
  font-size: 18px; font-weight: 700; border-radius: var(--r-md);
  box-shadow: var(--shadow-primary); transition: opacity .15s;
}
.btn-form-primary:hover { opacity: .88; }

.alert { padding: 12px 16px; border-radius: var(--r-md); font-size: 16px; margin-bottom: 16px; }
.alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.alert-info   { background: var(--primary-bg); border: 1px solid rgba(7,15,84,0.2); color: var(--primary); }

/* ═══════════════════════════════════
   PAGINATION
═══════════════════════════════════ */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 32px 0;
}
.page-btn {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 16px; color: var(--text-500); background:var(--bg-white);
  transition: all .15s;
}
.page-btn:hover  { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.page-btn:disabled { opacity: .4; pointer-events: none; }

/* ═══════════════════════════════════
   EMPTY STATE
═══════════════════════════════════ */
.empty-state {
  text-align: center; padding: 80px var(--px);
  grid-column: 1 / -1;
}
.empty-state-icon { font-size: 51px; margin-bottom: 16px; }
.empty-state h3 { font-size: 21px; font-weight: 800; color: var(--text-900); margin-bottom: 8px; }
.empty-state p  { font-size: 17px; color: var(--text-400); }

/* ═══════════════════════════════════
   HTMX INDICATOR
═══════════════════════════════════ */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }

/* (헤더 검색창은 서비스/의뢰 섹션에서만 서버가 렌더 — nav.html th:if. 홈 숨김 CSS는 불필요해져 제거) */

/* Nav Biz toggle (home only) */
/* 비즈 토글은 로그인 사용자에게 모든 페이지에서 노출(템플릿에서 isAuthenticated로 이미 제한) */
.nav-biz-toggle { display: flex; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer; }
.nav-biz-label { font-size: 16px; font-weight: 700; color: var(--text-700); user-select: none; }
.nav-biz-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.nav-biz-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.nav-biz-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 24px; transition: background .2s; }
.nav-biz-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background:var(--bg-white); border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.nav-biz-switch input:checked + .nav-biz-slider { background: #070f54; }
.nav-biz-switch input:checked + .nav-biz-slider::before { transform: translateX(20px); }

/* Hero carousel (hero right) */
/* 히어로 배너 캐러셀(2026-07-22 개편) — hero-inner 전폭 단독. 덱(뒷장 카드) 장식은 제거 */
.hero-right { position: relative; }
.cs-carousel { position: relative; z-index: 2; border-radius: 20px; overflow: hidden; }
.cs-track { position: relative; height: 340px; }
/* 비활성 슬라이드는 visibility로 숨긴다(2026-07-27) — opacity:0 + pointer-events:none 만으로는
   **탭 순서와 접근성 트리에 그대로 남는다**: 키보드 사용자는 화면에 아무것도 없는 상태로 링크 10개에
   연속 포커스되고(포커스 링도 투명해 안 보인다) Enter를 누르면 본 적 없는 곳으로 이동했다.
   스크린리더도 11개 배너를 한 덩어리로 읽어 도트의 aria-current가 가리킬 대상이 없었다.
   transition에 visibility를 함께 넣어야 페이드아웃이 끝난 뒤 사라진다(즉시 사라지면 깜빡인다). */
.cs-slide {
  position: absolute; inset: 0;
  border-radius: 20px; padding: 28px 24px 52px;
  display: flex; flex-direction: column; text-decoration: none; color: #fff;
  overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; z-index: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.cs-slide.cs-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
.cs-arrow {
  position: absolute; z-index: 10; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.18); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cs-arrow svg { width: 18px; height: 18px; display: block; }
.cs-arrow:hover { background: rgba(255,255,255,.36); }
.cs-prev { left: 10px; }
.cs-next { right: 10px; }
.cs-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 10; }
/* 점은 6px이지만 손가락으로 누르는 대상이라 실제 히트 영역은 ::before로 24px까지 넓힌다(2026-07-27).
   보이는 크기는 그대로 두고 터치 타깃만 키운다 — 점 자체를 키우면 히어로 하단 디자인이 바뀐다. */
.cs-dot { position: relative; width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.4); cursor: pointer; transition: background .2s, width .2s; border: none; padding: 0; }
.cs-dot::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; }
.cs-dot.active { background:var(--bg-white); width: 18px; }
.cs-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cs-tag { font-size: 14px; font-weight: 700; background: rgba(255,255,255,.18); display: inline-block; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; width: fit-content; }
.cs-title { font-size: 23px; font-weight: 900; line-height: 1.35; margin-bottom: 8px; flex: 1; }
.cs-sub { font-size: 15px; opacity: .72; margin-bottom: 16px; }
.cs-link { display: inline-flex; align-items: center; justify-content: center; width: fit-content;
           min-height: 36px; padding: 8px 16px; font-size: 15px; font-weight: 700; line-height: 1;
           border: 1px solid rgba(255,255,255,.72); border-radius: var(--r-md); color: #fff; }
.cs-slide:hover .cs-link { background: #fff; border-color: #fff; color: var(--primary-deep); }
.cs-deco { position: absolute; right: 16px; top: 16px; font-size: 55px; opacity: .2; pointer-events: none; }

/* Hero mode toggle (buyer / seller) */
.hero-toggle {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.7); border: 1.5px solid var(--border);
  border-radius: 30px; padding: 4px; gap: 2px; margin-bottom: 28px;
  backdrop-filter: blur(8px);
}
.hero-toggle-btn {
  font-size: 16px; font-weight: 700; padding: 8px 22px;
  border-radius: 24px; border: none; cursor: pointer;
  background: transparent; color: var(--text-500);
  transition: background .2s, color .2s;
}
.hero-toggle-btn.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 14px rgba(7,15,84,0.28);
}

/* Seller hero panel */
.hero-seller-panel {
  max-width: 100%; margin: 0;
  background: rgba(255,255,255,0.7); border: 1.5px solid rgba(7,15,84,0.15);
  border-radius: var(--r-xl); padding: 40px 40px 36px;
  backdrop-filter: blur(10px);
}
.hero-seller-panel h2 {
  font-size: 31px; font-weight: 900; color: var(--text-900);
  letter-spacing: -.6px; margin-bottom: 10px;
}
.hero-seller-panel p { font-size: 18px; color: var(--text-500); margin-bottom: 28px; line-height: 1.7; }
.seller-perks { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 28px; }
.seller-perk {
  background:var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 12px; text-align: center;
  font-size: 15px; color: var(--text-700); font-weight: 600; line-height: 1.5;
}
.seller-perk span { display: block; font-size: 25px; margin-bottom: 6px; }
.seller-hero-btns { display: flex; gap: 12px; justify-content: center; }
.btn-hero-primary {
  padding: 14px 32px; border-radius: 12px;
  background: var(--primary); color: #fff; font-size: 18px; font-weight: 800;
  border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 20px rgba(7,15,84,0.3);
  transition: opacity .15s; display: inline-block;
}
.btn-hero-primary:hover { opacity: .88; }
.btn-hero-outline {
  padding: 14px 24px; border-radius: 12px;
  background: transparent; color: var(--primary); font-size: 18px; font-weight: 700;
  border: 2px solid var(--primary); cursor: pointer; text-decoration: none;
  transition: background .15s; display: inline-block;
}
.btn-hero-outline:hover { background: var(--primary-bg); }

/* 배너 위 광고 라벨은 공용 .ad-soft(.sba-row 변형) — 2026-07-24 통일(구 .mba-ad-soft 폐지) */

/* ── 슬롯 배너(V95, 2026-07-23) — 홈 히어로 아래 두 줄(구좌 2면)·마켓 상단 1면, 전폭 가로 배너.
      구 메인 배너 캐러셀(.mba-wrap/.mba-slider/.mba-slide)은 월 입찰제 폐지와 함께 제거. ── */
.sba-section {
  max-width: var(--max-w); margin: 0 auto;
  /* 상단 20px(2026-07-24 운영 요청) — 히어로 캐러셀과 딱 붙어 보이던 간격 확보 */
  padding: 20px var(--px) 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.sba-row {
  position: relative; display: flex; align-items: center; gap: 20px;
  min-height: 128px; padding: 22px 28px; border-radius: var(--r-lg);
  color: #fff; text-decoration: none; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.sba-row:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.sba-row-body { flex: 1; min-width: 0; }
.sba-row-title {
  font-size: 23px; font-weight: 900; line-height: 1.3; margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sba-row-sub { font-size: 16px; opacity: .85; }
/* 배너 CTA(2026-07-30 운영 지시 2차) — '자세히 보기 →' 텍스트에서 버튼으로.
   행 전체가 링크라 버튼은 눌러야 할 자리를 알려주는 표식이다(광고 센터 미리보기도 같은 부품). */
.sba-row-link { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
                min-height: 36px; padding: 8px 16px; font-size: 15px; font-weight: 700; line-height: 1;
                border: 1px solid rgba(255,255,255,.72); border-radius: var(--r-md); color: #fff; }
.sba-row:hover .sba-row-link { background: #fff; border-color: #fff; color: var(--primary-deep); }
/* 마켓 상단 변형 — 목록 위 배너라 홈보다 낮게 */
.sba-row-market { min-height: 104px; padding: 18px 24px; }
.sba-row-market .sba-row-title { font-size: 20px; }
@media (max-width: 768px) {
  .sba-row { min-height: 104px; padding: 16px 18px; }
  .sba-row-title { font-size: 19px; white-space: normal; }
  .sba-row-link { display: none; }
}

/* ── NEXA 기본(하우스) 배너 — 2026-07-26 3차 개편(레퍼런스 조사 기반 전면 재설계).
      1·2차는 어두운 캔버스에 대면적 라임 아트워크를 깔았고 두 번 다 반려됐다("AI가 딸깍한 것 같다",
      "싸구려 중국 광고 같다"). 조사 결과 그 인상은 취향이 아니라 구조였다:
        · 라임 유채색이 캔버스의 55~60%. 조사한 프리미엄 시스템(Vercel/Linear/Figma/Supabase/
          Framer/Notion/Raycast/Cursor)의 공통 상한은 액센트 10%다. Linear는 NEXA보다 더 쨍한
          애시드 라임(#e4f222)을 쓰면서도 "유일한 유채색 UI 요소"로 버튼 하나에 가둔다.
          → 문제는 라임이 아니라 라임의 '면적'이었다.
        · 라이트 모드 사이트 위의 검정 블록은 NN/g가 특정한 광고 신호(색 깔린 배경 + 상단 배치 +
          화려한 포맷)를 셋 다 충족한다. 하우스 배너가 유료 광고보다 더 광고처럼 생겼던 것.
        · '검정 + 형광'은 크립토/게이밍 카테고리의 학습된 코드다. 국내 경쟁(크몽 화이트+블루,
          숨고 실사+틸, 위시켓 #0052CC)에 없는 코드이며, 카테고리 밖이 아니라 아래로 이탈한다.
        · 리퀴드 크롬은 스타일이 아니라 스톡 판매 장르다(Adobe Stock 'liquid chrome, AI Generative').
      3차 원칙: **배경을 만들지 않는다.** 지면 단색 + 1px 헤어라인이 전부고, 시각적 무게는
      전부 타이포그래피가 진다. 유채색은 CTA 화살표 하나. 정보 단위 3개(라벨/헤드라인/CTA).
      (팔레트는 두 번 옮겼다: 2026-07-26 초록기 오프화이트+라임 → 크림+브릭, 2026-07-29 크림+브릭
       → 네이비 단색. 구조는 그대로다 — 색만 옮겼고, 위 진단과 금지 사항은 팔레트와 무관하게 유효하다.)
      근거: Vercel 브랜드 가이드 "Design in monochrome … No decorative gradients, glows, or textures",
      Supabase "the white canvas is the design", Linear "gradients are reserved for the hero floor only".
      **배경 이미지·그라디언트·글로우·그레인·호버 광택을 다시 넣지 말 것** — 넣는 순간 위 진단으로 돌아간다.
      높이(홈 128 / 마켓 104)는 유료 .sba-row와 계속 공유한다. 같은 지면에 나란히 서므로 어긋나면 안 된다. ── */
.house-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 24px;
  min-height: 128px; padding: 24px 40px; border-radius: var(--r-lg);
  text-decoration: none;
  /* 흰 지면 위 한 단계 낮춘 그레이 — 배너 경계를 색이 아니라 톤 차이로 만든다 */
  background: #e8eaed;
  border: 1px solid #cbd2dd;
  transition: background-color .15s, border-color .15s;
}
.house-row:hover { background: #dfe2e8; border-color: #a4b4cb; }

.house-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* 발행자 라벨 — 유료 소재의 우상단 'AD'와 짝을 이루는 좌측 표식(광고/자체 콘텐츠 구분).
   2차의 필(pill) 배지·유채색 배경·글로우 도트는 제거했다: 장식 레이어를 늘리지 않는다. */
.house-label {
  font-size: 11px; font-weight: 600; letter-spacing: .10em; line-height: 1.2;
  color: #597aaf;
}
/* weight 600 — 조사한 프리미엄 시스템 중 디스플레이 텍스트에 700 이상을 쓰는 곳이 없었다
   (Cursor 400 고정, Framer 500, Linear 510~600). 2차의 900은 그 상한을 넘었다. */
.house-title {
  font-size: 29px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em;
  color: var(--text-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* 모바일 줄바꿈을 어절 단위로 — 없으면 '개발자에게 맡/기거나'처럼 단어 중간이 잘린다 */
  word-break: keep-all;
}
/* 보조 문구는 기본적으로 비워 둔다(정보 단위 3개 원칙). 관리자가 콘솔에서 입력한 경우에만 렌더 */
.house-sub {
  font-size: 14px; line-height: 1.4; color: var(--text-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* CTA — 잉크 솔리드 + 유채색 화살표(2026-07-26 운영 피드백: 형광 버튼이 캔버스와 부딪혔다.
   종이 위 형광펜처럼 보이고, 나머지를 절제해 놓고 버튼만 소리치는 구조였다).
   버튼 배경을 헤드라인과 **같은 잉크값(--text-900)**으로 맞추면 화면이 한 덩어리로 묶이고,
   유채색은 화살표 하나(캔버스의 약 0.05%)만 남아 브랜드 신호는 유지하면서 대비 충돌이 사라진다.
   Vercel "Design in monochrome … use color only when it adds significant meaning"의 실행.
   (2026-07-29 네이비 전환 후: 잉크와 브랜드가 같은 #070F54라 이 규칙은 자동으로 지켜진다 —
   액센트는 화살표의 보조 네이비 하나. 별색을 새로 만들어 채움색으로 넣지 말 것.) */
.house-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 140px; height: 44px; padding: 0 22px; border-radius: 999px;
  background: #070f54;                      /* 플랫 채움 — 그라디언트 금지 */
  border: 1px solid #070f54;
  color: #ecedef; font-size: 15px; font-weight: 600;
}
/* 유일한 액센트 — 잉크(히어로 네이비) 위 보조 네이비 화살표(대비 4.1:1) */
.house-cta i { font-style: normal; color: var(--primary-light); }
.house-row:hover .house-cta { background: #16246e; border-color: #16246e; }

/* 이미지 모드 — 관리자가 콘솔에서 배경 이미지를 올린 경우에만 쓴다(기본값 아님).
   어두운 스크림을 덮는 대신 우→좌 페이드로 이미지를 캔버스에 녹여, 텍스트 영역에는
   이미지가 아예 닿지 않게 한다. 대비를 계산이 아니라 구조로 확정하는 방식. */
.house-row-img { background-size: cover; background-position: center right; }
/* 배너 이미지 위 가독 스크림. 종전엔 왼쪽 42%를 불투명하게 덮고 오른쪽으로 흐려지는 그라데이션이었다
   — 그라데이션 폐지(2026-07-30)에 따라 **균일 반투명 한 겹**으로 바꾼다.
   그냥 지우면 임의의 사진 위에 검은 제목이 얹혀 안 읽힌다. 좌측만 불투명하게 자르는 방법도 있지만
   사진 한가운데 수직 경계선이 생겨 더 나쁘다 — 전면 균일이 평면 디자인에 맞는 답이다. */
.house-row-img::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(232,234,237,0.78);
}
.house-row-img > * { position: relative; z-index: 1; }

/* 마켓 상단 변형 — .sba-row-market와 같은 높이(104) */
.house-row-market { min-height: 104px; padding: 20px 32px; gap: 20px; }
.house-row-market .house-title { font-size: 21px; }
.house-row-market .house-sub { font-size: 13px; }
.house-row-market .house-cta { min-width: 124px; height: 40px; font-size: 14px; }

@media (max-width: 768px) {
  .house-row, .house-row-market { min-height: 104px; padding: 16px; gap: 12px; }
  .house-row .house-label, .house-row-market .house-label { display: none; }
  .house-row .house-title, .house-row-market .house-title { font-size: 16.5px; white-space: normal; }
  .house-sub { display: none; }
  /* CTA는 원형 화살표로 축약하되 44x44 유지 — WCAG 2.5.5 터치 타깃 최소 크기 */
  .house-cta { min-width: 0; width: 44px; height: 44px; padding: 0; }
  .house-cta span { display: none; }
}

/* 홈 추천 섹션 슬라이더 화살표(구 메인 배너 캐러셀에서 계승).
   2026-07-29 개편: 화살표가 카드를 덮지 않는다 — .reco-wrap 좌우 패딩(46px)이 만든 거터에 상주
   (종전 left/right:-14px 오버레이 폐지). 트랙 폭 = 거터 안쪽이므로 recoScroll 스트라이드도 그대로 정확. */
.mba-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
           width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
           background: var(--bg-white); color: var(--text-700); font-size: 23px; line-height: 1;
           cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.mba-nav:hover { background: var(--bg-gray); }
.mba-prev { left: 0; }
.mba-next { right: 0; }

/* ── 홈 추천 섹션 슬라이더 — 총 18장을 6장(3×2)씩 3페이지로, 좌우 화살표는 거터에(2026-07-29).
      gap은 recoScroll()의 스크롤 스트라이드와 동기(변경 시 함께). 패딩/네거티브 마진은
      overflow 컨테이너가 agent-card의 hover 리프트(-4px)·그림자를 자르지 않게 하는 보정. */
.reco-wrap { position: relative; padding: 0 46px; }
.reco-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
              scrollbar-width: none; -webkit-overflow-scrolling: touch;
              padding: 8px 2px 26px; margin: -8px -2px -26px; }
.reco-track::-webkit-scrollbar { display: none; }
.reco-track > .agent-card { flex: 0 0 calc((100% - 54px) / 4); scroll-snap-align: start; }
/* 2026-07-29 개편 — 전 섹션 **3열×2줄(한 화면 6장)**: 18장 = 9열×2행 열 우선 그리드, 한 페이지 3열(6장) = 3페이지.
   gap(14px)은 .list-grid.list-wide와 동일 — 홈·마켓 카드 크기 일치. recoScroll 스트라이드와 gap 동기. */
.reco-track.list-wide {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(2, max-content);
  grid-auto-columns: calc((100% - 28px) / 3);
  gap: 14px;
}
@media (max-width: 1024px) { .reco-track > .agent-card { flex-basis: calc((100% - 36px) / 3); }
                             .reco-track.list-wide { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (max-width: 768px)  { .reco-track > .agent-card { flex-basis: calc((100% - 18px) / 2); }
                             .reco-wrap { padding: 0 40px; } }
@media (max-width: 480px)  { .reco-track > .agent-card { flex-basis: 100%; }
                             .reco-track.list-wide { grid-auto-columns: 100%; } }

/* 홈 섹션 대분류 칩(2026-07-23) — 기본 '전체'(서버 렌더 원본), 선택 시 그 분류 카드로 교체 */
.sec-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sec-cat {
  font-size: 15px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-white); color: var(--text-500);
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.sec-cat:hover { border-color: var(--primary); color: var(--primary); }
.sec-cat.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sec-empty { width: 100%; text-align: center; padding: 40px 0; color: var(--text-400); font-size: 16px; }

.pc-purple { background: #070f54; color: #fff; }
.pc-blue   { background: #1d4ed8; color: #fff; }
.pc-teal   { background: #0d9488; color: #fff; }

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media (max-width: 1280px) {
  .list-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .list-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  /* 모바일: 사이드바는 본문 아래로 흐름(고정 해제). sticky-sidebar.js도 이 폭에선 top을 비운다 */
  .detail-sidebar { position: static; top: auto; }
  .services-layout { grid-template-columns: 180px 1fr; gap: 20px; }
}
@media (max-width: 768px) {
  .cards-grid, .list-grid { grid-template-columns: repeat(2, 1fr); }
  .services-layout { grid-template-columns: 1fr; }
  .services-sidebar { position: static; }
  .plans-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; }
  .how-steps::before { display: none; }
  .cta-banner { flex-direction: column; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-cols { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  /* 모바일: 배너가 히어로의 유일 콘텐츠(2026-07-22) — 숨기지 않고 높이만 축소 */
  .hero-inner { padding: 16px var(--px) 20px; }
  .cs-track { height: 210px; }
  /* 모바일: 헤더 검색이 유일한 검색 진입점 — 한 줄에 우겨넣으면 폭이 안 나와,
     로고 줄 아래 전폭 줄로 내려 크게 유지(크몽 모바일 패턴). 홈은 .page-home 규칙이 계속 숨김 */
  .nav-top { height: auto; flex-wrap: wrap; padding: 8px 14px 10px; gap: 8px 10px; }
  .nav-right { width: auto; }  /* 모바일은 검색이 전폭 별도 줄이라 고정 폭 불필요 — 로고 줄 공간 확보 */
  .nav-search-wrap { order: 10; flex-basis: 100%; max-width: none; }
  .nav-search input { font-size: 17px; padding: 9px 14px; }
  .nav-biz-label { display: none; }
  .nav-user-name { display: none; }
  .nav-links { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .promo-grid { grid-template-columns: 1fr; }
  .seller-perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .cards-grid, .list-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════
   고객센터 챗봇 위젯 (2026-07-21) — 우하단 고정, 전 페이지 공통
═══════════════════════════════════ */
.cb-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(7,15,84,.4); transition: transform .15s;
}

/* 상세 페이지용 TOP 버튼(2026-07-21) — 챗봇 FAB와 같은 자리, 240px 스크롤 후 .show로 등장 */
.top-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  background: var(--bg-white); color: var(--text-700);
  border: 1px solid var(--border-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
.top-fab.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.top-fab:hover { color: var(--primary); border-color: var(--primary); }
.top-fab svg { width: 18px; height: 18px; }
.top-fab span { font-size: 13px; font-weight: 800; letter-spacing: .5px; line-height: 1; }
.cb-fab:hover { transform: scale(1.06); }
.cb-fab svg { width: 26px; height: 26px; }
.cb-fab .cb-ic-close { display: none; }
.cb-fab.open .cb-ic-chat { display: none; }
.cb-fab.open .cb-ic-close { display: block; }
.cb-panel {
  position: fixed; right: 24px; bottom: 92px; z-index: 900;
  width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 130px);
  background: var(--bg-white); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.22); display: flex; flex-direction: column; overflow: hidden;
}
.cb-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--primary); color: #fff; padding: 14px 16px;
}
.cb-head-ic {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cb-head-title { font-size: 18px; font-weight: 800; }
.cb-head-sub { font-size: 14px; opacity: .85; }
.cb-head-btn {
  background: none; border: 0; color: rgba(255,255,255,.85); cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cb-head-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.cb-body { flex: 1; overflow-y: auto; padding: 14px; background: var(--bg-page); }
.cb-msg {
  max-width: 85%; font-size: 16px; line-height: 1.65; padding: 10px 13px;
  border-radius: 14px; margin-bottom: 8px; white-space: pre-line; word-break: break-word;
}
.cb-msg.bot { background: var(--bg-white); border: 1px solid var(--border); color: var(--text-700); border-top-left-radius: 4px; }
.cb-msg.user { background: var(--primary); color: #fff; margin-left: auto; border-top-right-radius: 4px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.cb-chip {
  background: var(--bg-white); border: 1px solid var(--primary-soft-bd); color: var(--primary-deep);
  border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-align: left; transition: all .15s;
}
.cb-chip:hover { background: var(--primary-soft); border-color: var(--primary); }
/* 1:1 문의 진입 칩(2026-07-22 — 구 하단 고정 링크(.cb-foot) 대체): 일반 칩과 구분되는 강조형 */
.cb-chip-contact { background: var(--primary); border-color: var(--primary); color: #fff; }
.cb-chip-contact:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; }
@media (max-width: 768px) {
  .cb-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .top-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .cb-panel { right: 14px; bottom: 74px; height: 480px; }
}

/* ═══════════════════════════════════
   NAV CHAT ICON
═══════════════════════════════════ */
.nav-chat-btn {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-500); transition: background .15s; text-decoration: none; flex-shrink: 0;
}
.nav-chat-btn:hover { background: var(--bg-gray); color: var(--text-900); }
.nav-chat-btn svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════
   CHAT LIST
═══════════════════════════════════ */
.chat-list-item {
  display: flex; align-items: center; padding: 16px 20px;
  border-bottom: 1px solid var(--border); gap: 14px;
  text-decoration: none; transition: background .1s; color: inherit;
}
.chat-list-item:last-child { border-bottom: none; }
.chat-list-item:hover { background: var(--bg-gray); }
.chat-list-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.chat-list-meta { flex: 1; min-width: 0; }

/* 채팅 리스트 탭/검색(2026-07-26, 크몽식) — 필터는 JS(data-*), 여기선 모양만 */
.chat-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chat-tab {
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg-white); font-size: 15px; font-weight: 600;
  color: var(--text-500); cursor: pointer; transition: all .12s;
}
.chat-tab:hover { border-color: var(--primary); color: var(--text-900); }
.chat-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chat-search {
  margin-left: auto; padding: 8px 14px; border: 1.5px solid var(--border);
  border-radius: 20px; font-size: 15px; width: 220px; max-width: 100%;
  font-family: inherit; background: var(--bg-white);
}
.chat-search:focus { outline: none; border-color: var(--primary); }
/* 즐겨찾기 별 — 행(<a>) 안의 버튼이라 클릭은 JS에서 전파 차단 */
.chat-fav-btn {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 18px; line-height: 1; color: #a4b4cb; transition: color .12s;
}
.chat-fav-btn:hover { color: #f59e0b; }
.chat-fav-btn.on { color: #f59e0b; }

/* 채팅 차단/신고 버튼(2026-07-26) — 헤더 우측, 공지 버튼과 동일 톤 */
.chat-mod-btn {
  font-size: 15px; color: var(--text-400); background: none;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.chat-mod-btn:hover { color: var(--text-900); }
.chat-mod-btn.danger:hover { color: #ef4444; border-color: #fca5a5; }

/* ═══════════════════════════════════
   CHAT DETAIL PAGE
═══════════════════════════════════ */
.chat-page-wrap {
  /* 채팅방도 레일 정렬(2026-07-23 재정정) — 좌측만이 아니라 **좌우 모두** 레일 라인에 맞춘다.
     좁은 max-width는 우측이 레일에 못 미쳐 폐기(전 페이지 본문 좌우 정렬 운영 지적).
     width:100% 금지 — 마진과 겹치면 좁은 화면에서 가로 넘침(블록이 남는 폭을 자연 점유) */
  max-width: var(--max-w);
  margin-left: max(var(--px), calc((100% - var(--max-w)) / 2 + var(--px)));
  margin-right: max(var(--px), calc((100% - var(--max-w)) / 2 + var(--px)));
  display: flex; flex-direction: column;
  height: calc(100vh - 130px);
  background:var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  margin-top: 24px; margin-bottom: 24px;
}
/* ── 채팅 상세 왼쪽 방 목록(2026-07-30 운영 지시) ──────────────────────────
   .chat-shell이 레일 정렬·바깥 마진을 맡고, 그 안에서 사이드바(고정폭) + 대화창(남은 폭)으로 나눈다.
   .chat-page-wrap의 마진·max-width는 여기서 0/none으로 눌러 이중 적용을 막는다 —
   레일 계산식(margin-left: max(...))을 두 벌로 만들지 않기 위해 원본 규칙은 그대로 둔다. */
.chat-shell {
  max-width: var(--max-w);
  margin: 24px max(var(--px), calc((100% - var(--max-w)) / 2 + var(--px)));
  display: flex; gap: 16px; align-items: stretch;
}
.chat-shell > .chat-page-wrap { margin: 0; max-width: none; flex: 1; min-width: 0; }
.chat-side {
  width: 300px; flex-shrink: 0; display: flex; flex-direction: column;
  height: calc(100vh - 130px);
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.chat-side-head {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 800; color: var(--text-900); flex-shrink: 0;
}
.chat-side-list { flex: 1; overflow-y: auto; }
.chat-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: background .15s;
}
.chat-side-item:hover { background: var(--bg-gray); }
.chat-side-item.active { background: var(--primary-bg); }
.chat-side-ava { width: 34px; height: 34px; font-size: 15px; flex-shrink: 0; }
.chat-side-body { flex: 1; min-width: 0; }
.chat-side-name {
  font-size: 15px; font-weight: 700; color: var(--text-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-side-fav { color: #f59e0b; margin-right: 3px; }
.chat-side-sub {
  font-size: 13px; color: var(--text-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-side-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.chat-side-time { font-size: 12px; color: var(--text-400); white-space: nowrap; }
.chat-side-unread {
  background: #ef4444; color: #fff; border-radius: 20px;
  font-size: 12px; font-weight: 700; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
/* 좁은 화면에서는 사이드바를 접는다 — 대화창이 먼저다('← 목록'으로 돌아갈 수 있다) */
@media (max-width: 1024px) {
  .chat-side { display: none; }
  .chat-shell { display: block; }
  .chat-shell > .chat-page-wrap { margin: 0; }
}

.chat-detail-header {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background:var(--bg-white); flex-shrink: 0;
}
.chat-back { font-size: 15px; color: var(--text-400); display: block; margin-bottom: 10px; text-decoration: none; }
.chat-back:hover { color: var(--primary); }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-page);
}
.chat-date-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0; color: var(--text-400); font-size: 14px;
}
.chat-date-sep::before, .chat-date-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
/* 문의 유형(카테고리) 바 */
.chat-category-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 16px; background:var(--bg-white); border-bottom: 1px solid var(--border); }
.cat-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cat-prompt { font-size: 15px; color: var(--text-400); margin-right: 2px; }
#categoryChip { font-size: 15px; font-weight: 700; color: var(--primary); background: var(--primary-bg); border-radius: 20px; padding: 4px 12px; }
#categoryChip.cat-muted { color: var(--text-400); background: var(--bg-gray); font-weight: 600; }
/* 챗봇 인사 말풍선 아래 문의 유형 퀵리플라이(네이버 스마트스토어식) */
.cat-quickreplies { display: flex; flex-wrap: wrap; gap: 6px; max-width: 340px; }
.cat-btn { font-size: 15px; color: var(--text-500); background:var(--bg-white); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; cursor: pointer; transition: all .12s; }
.cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.cat-btn.sel { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }

/* 시스템 안내 노트(문의 유형 선택 등) — 가운데 정렬 회색 pill */
.chat-sys-note { align-self: center; max-width: 90%; text-align: center; font-size: 15px; color: var(--text-500); background: var(--bg-gray); border-radius: 14px; padding: 6px 14px; margin: 2px auto; }

.chat-bubble-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-bubble-row.me { flex-direction: row-reverse; }
.chat-bubble-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.chat-bubble {
  max-width: 480px; padding: 10px 14px;
  border-radius: 18px; font-size: 17px; line-height: 1.55; word-break: break-word;
  white-space: pre-wrap;
}
.chat-bubble-row.other .chat-bubble {
  background:var(--bg-white); color: var(--text-900);
  border: 1px solid var(--border); border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.chat-bubble-row.me .chat-bubble {
  background: var(--primary); color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 3px rgba(7,15,84,.25);
}
.chat-time { font-size: 13px; color: var(--text-400); padding: 0 2px; flex-shrink: 0; align-self: flex-end; }
.chat-read-mark { font-size: 13px; color: var(--primary); font-weight: 600; flex-shrink: 0; align-self: flex-end; }
.align-end { align-items: flex-end; }
.flex-row-reverse { flex-direction: row-reverse; }
.chat-input-wrap {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
  background:var(--bg-white); flex-shrink: 0;
}
.chat-input {
  flex: 1; border: 1.5px solid var(--border); border-radius: 20px;
  padding: 10px 16px; font-size: 17px; resize: none; outline: none;
  max-height: 120px; overflow-y: hidden; font-family: inherit; line-height: 1.5; transition: border-color .15s;
}
.chat-input:focus { border-color: var(--primary); }
.chat-send-btn {
  width: 42px; height: 42px; background: var(--primary); border: none;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: opacity .15s; cursor: pointer;
}
.chat-send-btn:hover { opacity: .85; }

/* ═══════════════════════════════════
   STATUS BADGES (projects page)
═══════════════════════════════════ */
.status-badge { font-size: 15px; padding: 4px 10px; border-radius: 8px; font-weight: 600; }
.status-open   { background: #dcfce7; color: #166534; }
.status-review { background: #fef9c3; color: #854d0e; }
.status-active { background: #dbeafe; color: #1e40af; }
.status-done   { background: var(--bg-gray); color: var(--text-500); }

/* RICH BODY (blog-style content)
   블로그형 에디터 본문 공통 표시 — 폼의 에디터 영역과 상세 페이지가 같은 모양(WYSIWYG).
   서비스 소개 · AI 의뢰 본문 · 제안 본문에서 사용. */
.rich-body { font-size: 17px; color: var(--text-700); line-height: 1.8; word-break: break-word; }
.rich-body::after { content: ""; display: block; clear: both; } /* 좌/우 배치(float) 이미지가 본문 밖으로 흐르지 않게 */
.rich-body p { margin: 0 0 10px; }
.rich-body h1, .rich-body h2, .rich-body h3 { font-size: 20px; font-weight: 800; color: var(--text-900); margin: 18px 0 8px; }
.rich-body h1:first-child, .rich-body h2:first-child, .rich-body h3:first-child { margin-top: 0; }
.rich-body h4, .rich-body h5, .rich-body h6 { font-size: 18px; font-weight: 700; color: var(--text-900); margin: 14px 0 6px; }
.rich-body img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 12px 0; }
/* 라이트박스가 걸린 본문 사진 — 누르면 확대된다는 신호(2026-08-03, 공지·이벤트).
   .lb-img가 붙은 것만 대상이라 확대를 안 붙인 지면의 본문 사진은 커서가 그대로다. */
.rich-body img.lb-img { cursor: zoom-in; }
/* 이미지 크기/배치 — 에디터의 이미지 툴바가 붙이는 화이트리스트 클래스(RichText.IMG_CLASS와 한 쌍) */
.rich-body img.re-img-w25  { width: 25%; }
.rich-body img.re-img-w50  { width: 50%; }
.rich-body img.re-img-w75  { width: 75%; }
.rich-body img.re-img-w100 { width: 100%; }
.rich-body img.re-align-left   { float: left;  margin: 4px 16px 8px 0; }   /* 글자가 오른쪽을 감싼다 */
.rich-body img.re-align-right  { float: right; margin: 4px 0 8px 16px; }   /* 글자가 왼쪽을 감싼다 */
.rich-body img.re-align-center { display: block; float: none; margin: 12px auto; }
.rich-body ul, .rich-body ol { margin: 0 0 10px; padding-left: 24px; }
.rich-body blockquote { border-left: 3px solid #a4b4cb; background: #ecedef; color: var(--text-500); margin: 10px 0; padding: 8px 14px; border-radius: 0 8px 8px 0; }
.rich-body blockquote p:last-child { margin-bottom: 0; }
.rich-body a { color: var(--primary); text-decoration: underline; }
.rich-body hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.rich-body table { border-collapse: collapse; margin: 10px 0; max-width: 100%; }
.rich-body td, .rich-body th { border: 1px solid var(--border); padding: 6px 10px; font-size: 16px; }

/* ═══════════════════════════════════
   SVG 아이콘 시스템 (fragments/icons.html — 자체 제작 세트)
   .ic = 1em × 1em + currentColor → 감싸는 요소의 font-size/color로 크기·색 제어.
   기존 이모지 아이콘을 전면 대체 (2026-07-17).
═══════════════════════════════════ */
.ic { display: inline-block; width: 1em; height: 1em; vertical-align: -0.13em; flex-shrink: 0; }
/* flex 중앙 정렬 컨테이너에선 베이스라인 보정을 끈다 */
.cat-icon-box .ic, .card-thumb-icon .ic, .detail-thumb-icon .ic, .how-step-icon .ic,
.empty-state-icon .ic, .cs-deco .ic, .seller-perk span .ic, .footer-sns a .ic,
.nav-search-btn .ic, .hero-search-btn .ic, .card-fav .ic, .nt-pin-badge .ic { vertical-align: 0; }

/* 카테고리 아이콘 박스 — 배경 틴트와 한 쌍인 아이콘 색 (이모지 시절엔 배경만 있었음) */
.ci-purple { color: #070f54; }
.ci-blue   { color: #2563eb; }
.ci-green  { color: #16a34a; }
.ci-orange { color: #ea580c; }
.ci-pink   { color: #db2777; }
.ci-teal   { color: #0d9488; }
.ci-amber  { color: #d97706; }
.ci-indigo { color: #4f46e5; }
.cat-icon-box { font-size: 33px; }          /* 스트로크 아이콘 옵티컬 사이즈 (이모지 34px 대비) */

/* 썸네일 플레이스홀더 (그라데이션 위 반투명 박스) */
.card-thumb-icon   { color: #33436e; font-size: 33px; }
.detail-thumb-icon { color: #33436e; font-size: 49px; }

/* 빈 상태 — 연한 회색 아웃라인 */
.empty-state-icon { color: var(--muted-ic); }

/* 홈 데코/스텝/판매자 퍽 */
.cs-deco { font-size: 61px; opacity: .25; }
.how-step-icon { color: var(--primary); font-size: 25px; }
.seller-perk span { color: var(--primary); }

/* 내비게이션 */
.nav-link-ic { display: inline-flex; align-items: center; }
.nav-link-ic .ic { font-size: 19px; }
.nav-cat span { display: inline-flex; align-items: center; }
.nav-cat .ic { font-size: 17px; }
.nav-user-caret .ic { font-size: 13px; display: block; }

/* 별점 — 채운 별 5개 행(부족분은 회색) */
.stars { display: inline-flex; align-items: center; gap: 1px; color: #f59e0b; }
.stars .ic { font-size: inherit; }
.stars .ic-off { color: #cbd2dd; }
.r-star .ic { vertical-align: -0.12em; }

/* 카드 뱃지(HOT/NEW/PICK) 안 아이콘 */
.card-badge .ic { font-size: 13px; vertical-align: -0.1em; margin-right: 2px; }
.detail-badge .ic { font-size: 14px; vertical-align: -0.12em; margin-right: 3px; }

/* 텍스트 앞에 붙는 아이콘 공용 여백 */
.ic-lead { margin-right: 6px; }
.ic-lead-sm { margin-right: 4px; }

/* 찜 하트 — 마크업은 채운/빈 하트를 모두 담고 active 클래스로만 토글 (htmx 부분 교체와 한 쌍: FavoriteController) */
.card-fav { color: #597aaf; font-size: 18px; }
.fav-on, .fav-off { display: inline-flex; align-items: center; justify-content: center; }
.card-fav .fav-on, .btn-fav .fav-on,
.card-fav.active .fav-off, .btn-fav.active .fav-off { display: none; }
.card-fav.active .fav-on, .btn-fav.active .fav-on { display: inline-flex; }
.btn-fav .ic { vertical-align: -0.14em; }

/* ─────────────────────────────────────────────
   에러 페이지 (error/404·4xx·business) — 헤더/푸터 없는 단독 화면(2026-07-21), 뷰포트 중앙 정렬.
   Redis/DB 장애용 자기완결형(error.html·5xx.html)은 인라인 스타일 유지 — 여기 의존 금지.
   ───────────────────────────────────────────── */
.err-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.err-box { text-align: center; max-width: 460px; }
.err-code { font-size: 67px; font-weight: 800; letter-spacing: -2px; line-height: 1;
            color: var(--primary); }
.err-icon { font-size: 57px; line-height: 1; display: inline-flex; }
.err-icon-mute { color: var(--muted-ic); }
.err-icon-warn { color: #f59e0b; }
.err-title { font-size: 25px; font-weight: 800; color: var(--text-900); margin-top: 18px; }
.err-desc { font-size: 17px; color: var(--text-400); line-height: 1.7; margin-top: 10px; }
.err-actions { display: flex; gap: 10px; justify-content: center; margin-top: 28px; }
.err-btn { display: inline-block; background: var(--primary); color: #fff; font-size: 17px; font-weight: 700;
           padding: 12px 22px; border-radius: var(--r-md); text-decoration: none; }
.err-btn:hover { opacity: .92; }
.err-btn-ghost { display: inline-block; background:var(--bg-white); color: var(--text-700); font-size: 17px; font-weight: 600;
                 padding: 12px 22px; border-radius: var(--r-md); border: 1px solid var(--border); text-decoration: none; }
.err-btn-ghost:hover { background: var(--bg-gray); }

/* 리뷰 별점 입력 — 라디오는 시각적으로 숨기되 포커스/필수 검증은 유지 (표시 별점 .stars와 톤 통일) */
.star-input { display: inline-flex; gap: 4px; margin-top: 6px; }
.star-pick { position: relative; font-size: 31px; color: #cbd2dd; cursor: pointer; display: inline-flex;
             transition: transform .1s ease, color .1s ease; }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.star-pick.on { color: #f59e0b; }
.star-pick:hover { transform: scale(1.12); }
.star-pick:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.star-val { font-size: 16px; font-weight: 700; color: var(--text-700); margin-left: 8px; align-self: center; }

/* ═══════════════════════════════════
   마이페이지 대시보드 + 좌측 nav (2026-07-24)
═══════════════════════════════════ */
/* .detail-wrap 안에서 좌측 nav(210px) + 본문 그리드 — 레일 좌우 정렬은 detail-wrap이 담당 */
.my-layout { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; }
/* 좌측 nav 없이 단일 컬럼이 필요한 화면용(2026-07-29 현재 사용처 없음 — /my/chat 판매자 모드는
   판매자 센터 nav를 쓰도록 바뀌었다. 유지: 단일 컬럼이 필요한 화면이 다시 생길 때의 공용 부품) */
.my-layout-noside { grid-template-columns: 1fr; }
.my-side { position: sticky; top: var(--nav-offset, 128px); }
.my-side-nav {
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 10px;
}
.my-side-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 16px; color: var(--text-500); text-decoration: none; transition: all .12s;
}
.my-side-nav a .ic { width: 17px; height: 17px; flex-shrink: 0; }
.my-side-nav a:hover { color: var(--text-900); background: var(--bg-gray); }
.my-side-nav a.active { color: var(--primary); background: var(--primary-bg); font-weight: 700; }
.my-side-t {
  font-size: 13px; font-weight: 700; color: var(--text-400);
  letter-spacing: .5px; padding: 12px 12px 4px; text-transform: uppercase;
}
.my-side-badge {
  margin-left: auto; background: #ef4444; color: #fff; border-radius: 20px;
  font-size: 13px; font-weight: 700; min-width: 19px; height: 19px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
/* 판매자 전환 CTA(비판매자 구매자 모드 전용) */
.my-side-cta {
  display: block; margin-top: 12px; padding: 16px;
  border-radius: var(--r-lg); text-decoration: none;
  background: var(--bg-white);
  border: 1px solid #a4b4cb; transition: box-shadow .15s;
}
.my-side-cta:hover { box-shadow: 0 6px 18px rgba(7,15,84,.18); }
.my-side-cta-ic { display: inline-flex; color: var(--primary); }
.my-side-cta-ic .ic { width: 22px; height: 22px; }
.my-side-cta-t { display: block; font-size: 17px; font-weight: 800; color: var(--text-900); margin-top: 8px; }
.my-side-cta-d { display: block; font-size: 14px; color: var(--text-500); line-height: 1.5; margin-top: 4px; }

/* 설정 화면 간 바로가기 행(2026-07-30 설정 분리) — 프로필 설정 아래의 '비밀번호 변경' 진입점.
   카드(.my-main 안의 흰 패널)와 같은 테두리·반경을 쓰되 높이는 한 줄로 낮게. */
.my-set-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 18px 22px; text-decoration: none;
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: border-color .15s, box-shadow .15s;
}
.my-set-link:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(7,15,84,.10); }
.my-set-link-t { display: block; font-size: 17px; font-weight: 700; color: var(--text-900); }
.my-set-link-d { display: block; font-size: 15px; color: var(--text-500); margin-top: 4px; }
.my-set-link-ar { font-size: 22px; color: var(--text-400); line-height: 1; }
.my-set-link:hover .my-set-link-ar { color: var(--primary); }

/* 찜 목록 카테고리 버튼 행(2026-07-29 운영 지시) — 왼쪽 카테고리 사이드바를 제목 아래 칩으로 옮겼다
   (왼쪽 칸은 다른 /my 화면과 같은 마이페이지 nav가 쓴다). 1행 대분류 → 2행 중분류 → 3행 소분류로
   선택한 만큼만 열린다. 칩 자체는 마켓 필터(.filter-chip)와 같은 부품 — 새 스타일을 만들지 않는다. */
.fav-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fav-cats .filter-chip { font-size: 15px; padding: 5px 14px; }
/* 하위 행은 상위 선택의 결과라 한 단계 들여쓰고 조금 작게 — 계층이 눈에 보이게 */
.fav-cats-sub { margin-top: 8px; padding-left: 14px; }
.fav-cats-sub .filter-chip { font-size: 14px; padding: 4px 12px; }
@media (max-width: 768px) { .fav-cats-sub { padding-left: 0; } }

/* 요약 타일 */
.my-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.my-stat {
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 18px; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.my-stat:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(7,15,84,.12); }
.my-stat-n { display: block; font-size: 25px; font-weight: 900; color: var(--text-900); }
.my-stat-l { display: block; font-size: 14px; color: var(--text-400); margin-top: 2px; }
.my-stat-hot { border-color: #a4b4cb; background: var(--primary-soft); }
.my-stat-hot .my-stat-n { color: var(--primary-deep); }

/* 대시보드 카드 공통 */
.my-card {
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 16px;
}
.my-card-hd { display: flex; justify-content: space-between; align-items: center; }
.my-card-t { font-size: 18px; font-weight: 800; color: var(--text-900); display: flex; align-items: center; gap: 7px; }
.my-card-t .ic { color: var(--primary); }
.my-card-link { font-size: 16px; color: var(--primary); text-decoration: none; }
.my-card-sub { font-size: 15px; color: var(--text-400); margin: 4px 0 6px; line-height: 1.6; }
.my-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.my-card-hd + .my-row, .my-card-sub + .my-row { border-top: none; }
.my-row-t { font-size: 17px; font-weight: 700; color: var(--text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-row-d { font-size: 15px; color: var(--text-500); margin-top: 2px; }

/* 업적 배지 — 획득은 네이비 그라디언트, 미획득은 회색+진행 바 */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.ach-item {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 12px 14px; text-align: center; background: var(--bg-white);
}
.ach-ic {
  width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 12px rgba(7,15,84,.28);
}
.ach-ic .ic { width: 24px; height: 24px; }
.ach-name { font-size: 16px; font-weight: 800; color: var(--text-900); }
.ach-desc { font-size: 13px; color: var(--text-400); margin-top: 3px; line-height: 1.45; min-height: 37px; }
.ach-earned {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 13px; font-weight: 700; color: var(--primary);
  background: var(--primary-bg); border-radius: 20px; padding: 3px 10px;
}
.ach-earned .ic { width: 13px; height: 13px; }
.ach-locked { background: var(--bg-gray); }
.ach-locked .ach-ic { background: #cbd2dd; color: #597aaf; box-shadow: none; }
.ach-locked .ach-name { color: var(--text-500); }
.ach-prog { margin-top: 9px; }
.ach-prog-bar { height: 6px; border-radius: 4px; background: #cbd2dd; overflow: hidden; }
.ach-prog-bar span { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.ach-prog-num { display: block; font-size: 13px; color: var(--text-400); margin-top: 4px; }

@media (max-width: 1024px) {
  .my-layout { grid-template-columns: 1fr; }
  .my-side { position: static; }
  .my-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════
   판매자 전환 유도 랜딩 /my/why-seller (2026-07-24)
═══════════════════════════════════ */
.ws-hero { background: #ffffff; }
.ws-hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 72px var(--px) 64px; text-align: center; }
.ws-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(7,15,84,.12); color: var(--primary-deep);
  font-size: 15px; font-weight: 800; border-radius: 20px; padding: 7px 16px; margin-bottom: 20px;
}
.ws-eyebrow .ic { width: 16px; height: 16px; }
.ws-h1 { font-size: 47px; font-weight: 900; line-height: 1.25; color: var(--text-900); letter-spacing: -1.2px; }
.ws-h1 em {
  font-style: normal; color: var(--primary);
}
.ws-sub { font-size: 19px; color: var(--text-500); line-height: 1.75; margin: 18px auto 30px; max-width: 620px; }
.ws-cta-btn {
  display: inline-block; background: var(--primary); color: #fff; text-decoration: none;
  font-size: 19px; font-weight: 800; padding: 16px 44px; border-radius: 14px;
  box-shadow: var(--shadow-primary); transition: opacity .15s, transform .15s;
}
.ws-cta-btn:hover { opacity: .9; transform: translateY(-2px); }
.ws-hero-stats { display: flex; justify-content: center; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.ws-hero-stat b { display: block; font-size: 27px; font-weight: 900; color: var(--text-900); }
.ws-hero-stat span { font-size: 15px; color: var(--text-500); }

/* 이점 행 — 텍스트 + 대형 비주얼 패널(교차 배치) */
.ws-row-wrap { padding: 72px var(--px); }
.ws-alt { background: var(--bg-white); }
.ws-row {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.ws-rev .ws-copy { order: 2; }
.ws-rev .ws-visual { order: 1; }
.ws-badge {
  display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: .5px;
  color: var(--primary-deep); background: rgba(7,15,84,.12);
  border-radius: 6px; padding: 4px 12px; margin-bottom: 14px;
}
.ws-h2 { font-size: 31px; font-weight: 900; color: var(--text-900); letter-spacing: -.6px; line-height: 1.35; }
.ws-p { font-size: 17px; color: var(--text-500); line-height: 1.8; margin-top: 14px; }
.ws-list { list-style: none; padding: 0; margin: 20px 0 0; }
.ws-list li {
  position: relative; padding-left: 28px; font-size: 17px; color: var(--text-700);
  line-height: 1.6; margin-bottom: 10px;
}
.ws-list li::before {
  content: '✓'; position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary-bg); color: var(--primary);
  font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
/* 대형 비주얼 — 그라디언트 패널 + 초대형 아이콘 + 떠 있는 예시 카드 */
.ws-visual {
  position: relative; height: 340px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
}
.ws-v1 { background: #070f54; }
.ws-v2 { background: #0d9488; }
.ws-v3 { background: #4f46e5; }
.ws-visual-ic { color: rgba(255,255,255,.9); }
.ws-visual-ic .ic { width: 120px; height: 120px; }
.ws-float {
  position: absolute; background: var(--bg-white); border-radius: 14px;
  padding: 12px 18px; box-shadow: 0 14px 34px rgba(7,15,84,.18);
}
.ws-float-l { display: block; font-size: 13px; color: var(--text-400); }
.ws-float-n { display: block; font-size: 21px; font-weight: 900; color: var(--text-900); margin-top: 2px; }
.ws-float-n small { font-size: 14px; font-weight: 600; color: var(--text-400); }
.ws-float-n .ic { width: 22px; height: 22px; color: var(--primary); }
.ws-float-1 { top: 34px; left: -18px; }
.ws-float-2 { bottom: 34px; right: -18px; }

/* 전환 3단계 */
.ws-steps-wrap { max-width: var(--max-w); margin: 0 auto; padding: 72px var(--px); }
.ws-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.ws-step {
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 28px 24px; text-align: center;
}
.ws-step-n {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 20px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.ws-step-t { font-size: 19px; font-weight: 800; color: var(--text-900); margin-bottom: 8px; }
.ws-step-d { font-size: 16px; color: var(--text-500); line-height: 1.65; }

/* 하단 대형 CTA */
.ws-final { padding: 0 var(--px) 88px; }
.ws-final-inner {
  max-width: var(--max-w); margin: 0 auto; text-align: center;
  background: var(--primary);
  border-radius: 28px; padding: 64px 40px;
}
.ws-final-t { font-size: 33px; font-weight: 900; color: #fff; letter-spacing: -.6px; }
.ws-final-d { font-size: 18px; color: rgba(255,255,255,.75); margin: 12px 0 30px; }
.ws-cta-big { font-size: 21px; padding: 18px 56px; }
.ws-final-note { font-size: 15px; color: rgba(255,255,255,.55); margin-top: 18px; }

@media (max-width: 900px) {
  .ws-row { grid-template-columns: 1fr; gap: 32px; }
  .ws-rev .ws-copy { order: 1; }
  .ws-rev .ws-visual { order: 2; }
  .ws-float-1 { left: 12px; }
  .ws-float-2 { right: 12px; }
  .ws-steps { grid-template-columns: 1fr; }
  .ws-h1 { font-size: 35px; }
}

/* ═══════════════════════════════════
   판매자 센터 좌측 nav + 광고 강조 + 정산 잠금 (2026-07-24)
═══════════════════════════════════ */
/* 사이드 nav 최상단 광고 관리 강조 카드 */
.seller-ads-cta {
  display: block; margin-bottom: 12px; padding: 16px;
  border-radius: var(--r-lg); text-decoration: none;
  background: var(--primary); box-shadow: var(--shadow-primary);
  transition: transform .15s, box-shadow .15s;
}
.seller-ads-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(7,15,84,.35); }
.seller-ads-cta-ic { display: inline-flex; color: #fff; }
.seller-ads-cta-ic .ic { width: 22px; height: 22px; }
.seller-ads-cta-t { display: block; font-size: 18px; font-weight: 900; color: #fff; margin-top: 8px; }
.seller-ads-cta-d { display: block; font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.5; margin-top: 3px; }

/* 대시보드 최상단 광고 관리 대형 배너 */
.sc-ads-hero {
  display: flex; align-items: center; gap: 18px;
  background: var(--primary); border-radius: var(--r-lg);
  padding: 20px 24px; margin-bottom: 20px; text-decoration: none;
  box-shadow: var(--shadow-primary); transition: transform .15s, box-shadow .15s;
}
.sc-ads-hero:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(7,15,84,.35); }
.sc-ads-hero-ic { display: inline-flex; color: #fff; flex-shrink: 0; }
.sc-ads-hero-ic .ic { width: 40px; height: 40px; }
.sc-ads-hero-body { flex: 1; min-width: 0; }
.sc-ads-hero-t { display: block; font-size: 20px; font-weight: 900; color: #fff; }
.sc-ads-hero-d { display: block; font-size: 15px; color: rgba(255,255,255,.85); margin-top: 3px; }
.sc-ads-hero-go {
  flex-shrink: 0; font-size: 16px; font-weight: 800; color: var(--primary-deep);
  background: #fff; border-radius: 10px; padding: 10px 18px; white-space: nowrap;
}

/* 판매자 대시보드 상태 카드(2026-07-30 운영 지시) — 종전 auto-fit 5칸에서 '등록 서비스'를 빼고
   (바로 아래 '내 서비스' 표에 개수 배지가 이미 있다) 정산 대기를 **두 칸 폭**으로 넓혔다.
   좁은 한 칸(≈128px 안쪽)에 29px 금액을 넣으면 백만 단위부터 줄이 깨졌다. */
.sc-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.sc-stat-grid > .sc-stat-wide { grid-column: span 2; }
.sc-stat-amt { font-size: 29px; font-weight: 800; color: #fff; white-space: nowrap; }
@media (max-width: 1024px) { .sc-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sc-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-stat-grid > .sc-stat-wide { grid-column: auto; }
}

/* 이동 링크 버튼(2026-07-30 운영 지시 2차) — 종전 '… →' 텍스트 링크 자리를 대신하는 작은 버튼.
   광고 센터 .adc-btn과 같은 생김새를 판매자 센터 공용으로 쓴다(어두운 카드 위에는 -on-dark). */
.link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
            padding: 7px 14px; font-size: 15px; font-weight: 700; line-height: 1;
            border: 1px solid var(--border-md); border-radius: var(--r-md);
            background: var(--bg-white); color: var(--text-700); text-decoration: none;
            white-space: nowrap; cursor: pointer; }
.link-btn:hover { background: var(--bg-gray); }
.link-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.link-btn-primary:hover { background: var(--primary-dark); }
/* 네이비 카드(정산 대기·수익금 요약) 위 — 카드가 통째로 클릭 대상이라 버튼은 흰 테두리로만 */
.link-btn-on-dark { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.link-btn-on-dark:hover { background: #fff; border-color: #fff; color: var(--primary-deep); }

/* 정산 금액 잠금 — 컨테이너(.stl-locked) 안의 금액만 블러. 선택·복사도 막는다 */
.stl-locked .stl-amt { filter: blur(8px); user-select: none; pointer-events: none; }
.stl-export-locked { opacity: .55; }
/* 금액 보기 토글 스위치 */
.stl-switch {
  position: relative; width: 46px; height: 26px; border-radius: 26px;
  border: 1px solid var(--border); background: #cbd2dd; cursor: pointer; padding: 0;
  transition: background .15s, border-color .15s;
}
.stl-switch .stl-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: left .15s;
}
.stl-switch.on { background: var(--primary); border-color: var(--primary); }
.stl-switch.on .stl-knob { left: 23px; }
.stl-pin-input { letter-spacing: 8px; font-size: 21px; text-align: center; }

/* 판매 통계 — 정산 하이라이트(수익금 부각) */
.sa-payout-hero {
  display: grid; grid-template-columns: 1fr 280px; gap: 18px;
  background: var(--primary); border-radius: var(--r-xl);
  padding: 26px 30px; margin-bottom: 24px; box-shadow: var(--shadow-primary);
}
.sa-payout-label { font-size: 16px; color: rgba(255,255,255,.85); margin-bottom: 8px; }
.sa-payout-label .ic { width: 18px; height: 18px; }
.sa-payout-big { font-size: 43px; font-weight: 900; color: #fff; letter-spacing: -.5px; }
.sa-payout-sub { font-size: 15px; color: rgba(255,255,255,.8); margin-top: 6px; }
.sa-payout-side { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.sa-payout-cell { background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 14px; }
.sa-payout-cell-l { display: block; font-size: 13px; color: rgba(255,255,255,.8); }
.sa-payout-cell-n { display: block; font-size: 19px; font-weight: 800; color: #fff; margin-top: 2px; }
@media (max-width: 768px) { .sa-payout-hero { grid-template-columns: 1fr; } }

/* ═══ 광고 센터 컴포넌트 (2026-07-27, 회의 [V]·[R])
   광고 센터 템플릿의 인라인 스타일 124곳을 전수 정리하는 대신, 실제로 반복되는 3식만 클래스로 뽑았다
   — KPI 타일 / 데이터 표 / 상태 칩. 나머지 일회성 배치 스타일은 인라인으로 둔다(억지로 클래스를 만들면
   이름만 늘고 재사용은 없다). 폼 컨트롤은 접근성 요건(터치 타깃 44px)을 여기서 한 번에 만족시킨다. */

.adc-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); }

/* KPI — 소계 그룹(CPC/배너)과 합계 바가 같은 타일 규격을 공유한다 */
.adc-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.adc-kpi-label { font-size: 13px; color: var(--text-400); }
.adc-kpi-value { font-size: 20px; font-weight: 800; color: var(--text-900); }
.adc-kpi-title { font-size: 15px; font-weight: 800; color: var(--text-900); margin-bottom: 10px; }
.adc-kpi-note  { font-size: 13px; color: var(--text-400); margin-top: 2px; }
.adc-kpi-total { font-size: 29px; font-weight: 800; color: var(--primary); }
@media (max-width: 900px) { .adc-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* 데이터 표 — 셀은 전부 가운데 정렬.
   ※ 초판(2026-07-30 오전)은 '금액·수치 열(.num)만 우측 유지'였으나 같은 날 운영이
     "표 쓰는 곳 전체 가운데, left나 right가 남지 않게"로 뒤집었다. 아래 .num 규칙 참고. */
.adc-table { width: 100%; border-collapse: collapse; }
.adc-table thead tr { background: var(--bg-gray); font-size: 15px; color: var(--text-400); }
.adc-table th { padding: 10px 16px; text-align: center; font-weight: 700; }
.adc-table td { padding: 12px 16px; font-size: 16px; color: var(--text-700); text-align: center; }
.adc-table tbody tr { border-bottom: 1px solid var(--border); }
/* 2026-07-30 운영 지시 — 표는 전부 가운데. 종전에는 `.num`(금액·수치 열)만 우측이었다
   (자릿수를 세로로 맞춰 비교하려는 의도). 두 클래스 모두 center지만 이름은 남긴다 —
   마크업 수십 곳에서 쓰고 있어 지우면 그쪽을 다 고쳐야 하고, '이 열은 수치'라는 의미 표시로는 여전히 쓸모가 있다. */
.adc-table .num { text-align: center; }
.adc-table .mid { text-align: center; }

/* ── 표 셀 기본 정렬 = 가운데 (2026-07-30 운영 지시: "table 쓰는 곳 전체, left나 right가 남지 않게")
   인라인 style로 걸린 곳은 템플릿에서 직접 걷어냈고(27곳), 이 규칙은 **정렬을 아예 지정하지 않은 셀**을
   담당한다 — 지정이 없으면 브라우저 기본이 left라 그대로 두면 지시가 미달이다(ads-cpc 등).
   앞으로 추가되는 표도 별도 지정 없이 가운데로 태어난다.
   예외 `.rich-body`: 판매자가 에디터로 쓴 본문 안의 표다. 저작자가 만든 문서 내용이라
   플랫폼 UI 규칙을 강제하지 않는다(본문 표까지 가운데로 원하면 이 두 줄을 지우면 된다). */
table th, table td { text-align: center; }
.rich-body th, .rich-body td { text-align: left; }
.adc-table .strong { font-weight: 700; color: var(--text-900); }

/* 상태 칩 — 의미 신호라 색은 팔레트 전환 대상에서 제외된 값 그대로 */
.adc-chip { display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 10px;
            border-radius: 20px; white-space: nowrap; }
.adc-chip-live { background: #d1fae5; color: #065f46; }
.adc-chip-wait { background: var(--primary-soft); color: var(--primary-deep); }
.adc-chip-warn { background: #fef3c7; color: #92400e; }
.adc-chip-stop { background: #fee2e2; color: #991b1b; }
.adc-chip-off  { background: var(--bg-gray); color: var(--text-500); }

/* 폼 컨트롤 — 터치 타깃 44px(종전 20~28px). 표 안의 소형 컨트롤(.adc-mini)만 예외적으로 36px */
.adc-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-500); }
.adc-input { min-height: 44px; padding: 10px 12px; font-size: 16px;
             border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-white); }
.adc-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.adc-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
           gap: 6px; padding: 10px 18px; font-size: 16px; font-weight: 700; border-radius: var(--r-md);
           cursor: pointer; border: 1px solid var(--border-md); background: var(--bg-white);
           color: var(--text-700); text-decoration: none;
           /* 표 안에서 폼이 좁아지면 '변경'이 '변 / 경'으로 접혔다 — 버튼 글자는 언제나 한 줄 */
           white-space: nowrap; flex-shrink: 0; }
.adc-btn:hover { background: var(--bg-gray); }
.adc-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.adc-btn-primary:hover { background: var(--primary-dark); }
.adc-btn[disabled] { opacity: .5; cursor: not-allowed; }
.adc-mini { min-height: 36px; padding: 6px 10px; font-size: 14px; }

/* 광고 센터 폼 모달(2026-08-03 — 광고 캐시 환불) ─────────────────────────────
   ⚠ 오버레이·박스·× 값은 공지 모달(.nt-modal*)·공용 확인 모달(fragments/confirm-modal)과
   **같은 값이어야 한다** — 한 세션에서 두 모달을 연달아 열었을 때 색·모서리가 갈리면
   같은 사이트로 안 읽힌다. 저쪽 값을 고치면 여기도 함께 고칠 것.
   z-index 1300인 이유: 챗봇 FAB·패널이 900으로 전 지면에 떠 있어 그보다 낮으면 오버레이 위에 남는다.
   폼 알맹이는 광고 센터 컴포넌트(.adc-field/.adc-input/.adc-btn)를 그대로 쓴다 —
   .form-input/.btn-form-primary 계열을 섞으면 같은 화면에서 입력칸 높이와 버튼 모양이 두 종류가 된다. */
.adc-modal { position: fixed; inset: 0; background: rgba(7,15,84,.5); z-index: 1300;
             align-items: center; justify-content: center; padding: 20px; }
.adc-modal-box { background: var(--bg-white); border-radius: 16px; width: 460px; max-width: 92vw;
                 max-height: 82vh; display: flex; flex-direction: column;
                 box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.adc-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 24px 26px 0; }
.adc-modal-title { flex: 1; font-size: 21px; font-weight: 800; color: var(--text-900); line-height: 1.4; }
.adc-modal-x { flex-shrink: 0; width: 32px; height: 32px; border: none; background: none;
               font-size: 26px; line-height: 1; color: var(--text-400); cursor: pointer; border-radius: 8px; }
.adc-modal-x:hover { background: var(--bg-gray); color: var(--text-900); }
/* 폼 자체가 세로 플렉스 — 가운데(.adc-modal-body)만 넘칠 때 스크롤되고 버튼줄은 바닥에 남는다 */
.adc-modal-form { display: flex; flex-direction: column; min-height: 0; }
.adc-modal-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
                  padding: 14px 26px 18px; }
.adc-modal-note { font-size: 14px; color: var(--text-500); line-height: 1.6; }
.adc-modal-foot { display: flex; gap: 10px; padding: 14px 26px 22px; border-top: 1px solid var(--border); }
.adc-modal-foot > .adc-btn { flex: 1; }

/* 목록 필터 탭(진행 중 / 전체) */
.adc-tabs { display: flex; gap: 6px; }
.adc-tab { min-height: 36px; display: inline-flex; align-items: center; padding: 6px 14px;
           font-size: 14px; font-weight: 700; border-radius: 20px; text-decoration: none;
           color: var(--text-500); background: var(--bg-gray); }
.adc-tab.active { background: var(--primary); color: #fff; }
/* 지갑 카드 안의 좁은 목록(거래 내역·환불 내역) — 같은 표 컴포넌트에 여백만 줄인 변형 */
.adc-table-compact td, .adc-table-compact th { padding: 6px 0; font-size: 15px; }
.adc-table-compact tbody tr { border-bottom: 1px solid var(--bg-gray); }

/* ── 광고 센터 줄바꿈(2026-07-27 운영 지적) ─────────────────────────────────────────
   한글의 기본 줄바꿈(word-break: normal)은 **글자 단위로** 끊는다. 그래서 칸이 조금만 좁아도
   '실시간 확인'이 '실 / 시간 확인', '700,000원부터'가 '700,000 / 원부터', '서비스'가 '서 / 비스'로
   갈렸다 — 읽는 사람에게는 오타처럼 보인다. keep-all은 공백(어절)에서만 끊는다.
   한 어절이 칸보다 길 때만 예외로 쪼개도록 overflow-wrap을 함께 둔다(없으면 칸을 넘쳐 잘린다). */
.adc-page { word-break: keep-all; overflow-wrap: break-word; }
/* 가운뎃점(·) 뒤 줄바꿈은 CSS로 막을 수 없다 — '·'는 UAX#14가 정한 줄바꿈 자리라 keep-all의
   적용 대상이 아니다(실측: line-break의 strict·anywhere도 그대로 끊었다). text-wrap: balance는
   끊는 자리를 바꾸긴 했지만 데스크톱에서 '카테고리 / ·검색'처럼 **점을 다음 줄 머리로** 보내
   더 나빠져서 되돌렸다. 병렬 항목이 갈리면 안 되는 문구는 messages*.properties에서 점 좌우에
   word-joiner(⁠)를 넣어 묶는다(escape로 적어 두므로 원문에서 눈에 보인다). */
/* 본문 칸(.my-main)은 그리드의 1fr 칸이다. 그리드 항목의 기본 min-width:auto는 '내용보다 좁아질 수
   없다'는 뜻이라, 한 줄로 편 표가 넓어지자 칸이 함께 늘어나 **페이지 전체가 가로로 밀렸다**.
   0으로 풀어야 표를 감싼 overflow-x:auto 상자가 제 몫을 한다(표만 스크롤, 페이지는 그대로). */
.adc-page .my-main { min-width: 0; }
/* 셀렉트는 선택된 항목명이 길면 Chrome이 컨트롤 안에서 줄을 바꾼다 — 폼 컨트롤은 항상 한 줄 */
.adc-page select.adc-input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 표는 칸마다 한 줄 고정 — 9개 칸이 본문 폭을 나눠 가지면서 '노출'이 '노 / 출'까지 갈렸다.
   감싸는 상자에 overflow-x:auto가 있어 넓어지면 표만 가로로 스크롤된다(페이지는 밀리지 않는다).
   .adc-table-compact(거래·환불 내역)는 스크롤 상자가 없고 메모가 길어 대상에서 뺀다. */
.adc-table-1line th, .adc-table-1line td { white-space: nowrap; padding-left: 11px; padding-right: 11px; }
/* 서비스명만은 폭 상한 + 말줄임 — nowrap만 두면 긴 이름 하나가 표 전체를 화면 밖으로 민다.
   전체 이름은 title 툴팁으로, 스크린리더에는 DOM 텍스트 그대로 남는다(잘리는 건 화면뿐). */
.adc-ellip { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 카드 그리드 — 칸 수가 인라인 style로 고정돼 있어 좁은 화면에서도 3·4칸을 유지했다. 390px에서
   4칸 그리드의 한 칸은 48px까지 좁아지는데, 그 폭엔 어떤 한글 어절도 들어가지 않아 keep-all의
   예외 규칙(overflow-wrap)이 발동해 글자가 낱자로 쪼개졌다 — 줄바꿈 규칙이 아니라 레이아웃 문제다. */
.adc-grid-2, .adc-grid-3, .adc-grid-4 { display: grid; }
.adc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.adc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.adc-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .adc-grid-3, .adc-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .adc-grid-2, .adc-grid-3 { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════
   공지/이벤트 게시판 (2026-07-30 운영 지시 — /notices)
   고정 공지만 본문까지 펼치고, 나머지는 한 줄 목록으로 접어 모달로 연다.
   종전에는 모든 공지의 본문이 카드로 전부 펼쳐져 있어 글이 쌓일수록 목록 구실을 못 했다.
═══════════════════════════════════ */
.nt-pinned {
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px 24px; margin-bottom: 12px;
}
.nt-pinned-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
/* [고정] 텍스트 → 핀 아이콘(2026-07-31 운영 지시). 글자 기준이던 padding(2px 8px)·font-weight는
   아이콘엔 잴 기준이 없어 알약이 찌그러진다 — 정사각 고정 크기 + flex 중앙 정렬로 원형 배지를 만든다.
   .ic는 1em이라 font-size가 곧 아이콘 크기: 14px는 '고정' 두 글자 시절과 같은 시각 무게다.
   글자가 사라진 만큼 의미는 role=img + aria-label/title(sup.notice.pinned)이 진다(notices.html). */
.nt-pin-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; font-size: 14px; flex-shrink: 0;
  color: #fff; background: var(--primary); border-radius: 999px;
}
.nt-pinned-title { font-size: 18px; font-weight: 700; color: var(--text-900); }
/* 2026-08-01: 본문이 리치 텍스트(HTML)가 됐다 — white-space:pre-line 제거.
   그대로 두면 태그 사이의 줄바꿈까지 빈 줄로 그려진다(줄 세우기는 이제 .rich-body의 p/br 몫이다). */
.nt-pinned-body {
  font-size: 17px; color: var(--text-700); line-height: 1.6; margin-bottom: 8px;
}
.nt-pinned-date { font-size: 15px; color: var(--text-400); }

/* 게시판 — 행이 0개면 컨테이너 높이도 0이라 빈 테두리가 남지 않는다(테두리는 행이 갖는다) */
.nt-board { display: flex; flex-direction: column; }
.nt-row {
  /* button 기본형 초기화 — 목록 행이지만 클릭·키보드 조작 대상이라 시맨틱은 button이 맞다
     (div+onclick은 Tab으로 닿지 않고 Enter/Space도 안 먹는다) */
  display: flex; align-items: center; gap: 16px; width: 100%;
  text-align: left; font-family: inherit; cursor: pointer;
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 24px; margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.nt-row:hover { border-color: var(--border-md); background: var(--primary-bg); }
.nt-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nt-row-title {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 600; color: var(--text-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nt-row-date { flex-shrink: 0; font-size: 15px; color: var(--text-400); }

/* 본문 모달 — 팝업 배너·확인 모달과 같은 오버레이 패턴 */
.nt-modal {
  position: fixed; inset: 0; background: rgba(7,15,84,.5); z-index: 1300;
  align-items: center; justify-content: center; padding: 20px;
}
.nt-modal-box {
  background: var(--bg-white); border-radius: 16px; width: 640px; max-width: 92vw;
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 24px 26px 22px;
}
.nt-modal-head { display: flex; align-items: flex-start; gap: 12px; }
.nt-modal-title { flex: 1; font-size: 21px; font-weight: 800; color: var(--text-900); line-height: 1.4; }
.nt-modal-x {
  flex-shrink: 0; width: 32px; height: 32px; border: none; background: none;
  font-size: 26px; line-height: 1; color: var(--text-400); cursor: pointer; border-radius: 8px;
}
.nt-modal-x:hover { background: var(--bg-gray); color: var(--text-900); }
.nt-modal-date { font-size: 15px; color: var(--text-400); margin-top: 6px; }
/* 2026-08-01: pre-line 제거 — 위 .nt-pinned-body와 같은 이유(본문이 HTML) */
.nt-modal-body {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 17px; color: var(--text-700); line-height: 1.7;
  overflow-y: auto;   /* 긴 공지는 박스 안에서만 스크롤 */
}
@media (max-width: 560px) {
  .nt-row { gap: 10px; padding: 14px 16px; }
  .nt-row-date { font-size: 14px; }
}

/* 영수증 모달의 작은 안내 표식(2026-07-30) — 환불일 옆 '?' 원형. 툴팁 본문은 공용 .nexa-tip이 그린다.
   이 줄은 붉은 경고 박스(#fef2f2) 안이라 표식도 같은 계열로 맞춘다(브랜드 네이비를 쓰면 혼자 튄다). */
.rcpt-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; border: 1px solid #fca5a5; background: #fff;
  font-size: 11px; font-weight: 800; line-height: 1; color: #991b1b;
  cursor: help; user-select: none; flex-shrink: 0;
}
.rcpt-info:hover, .rcpt-info:focus-visible { background: #991b1b; border-color: #991b1b; color: #fff; }
.rcpt-info:focus-visible { outline: 2px solid #991b1b; outline-offset: 2px; }

/* ═══════════════════════════════════
   판매자 포트폴리오 (2026-07-31)
   목록: /sellers/{id}/portfolios — AI 서비스 마켓과 같은 .list-grid 골격 위의 전용 카드.
   상세: 같은 화면 위의 모달 — "문서를 펼쳐 본다"는 감각이라 흰 지면 + 안쪽 스크롤로 짠다.
   관리: /seller/portfolios(표) · /seller/portfolios/new(폼 + 사진 갤러리 위젯).
═══════════════════════════════════ */

/* ── 공개 목록 머리글 ── */
.pf-pub-head { margin-bottom: 24px; }
.pf-pub-back { font-size: 16px; color: var(--text-400); text-decoration: none; }
.pf-pub-back:hover { color: var(--text-700); }
.pf-pub-idbar { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.pf-pub-ava {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--primary);
}
.pf-pub-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-pub-ava-initial {
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-weight: 800; color: #fff;
}
.pf-pub-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 25px; font-weight: 800; color: var(--text-900); margin: 0;
}
.pf-pub-verified {
  font-size: 14px; font-weight: 700; background: #eff6ff; color: #2563eb;
  border-radius: 4px; padding: 3px 8px;
}
.pf-pub-count { font-size: 16px; color: var(--text-500); margin-top: 4px; }

/* ── 목록 카드 ──
   button으로 짠다: 클릭·Tab·Enter가 다 필요한데 div+onclick은 키보드에서 닿지 않는다. */
.pf-card {
  display: flex; flex-direction: column; width: 100%; padding: 0;
  text-align: left; font-family: inherit; cursor: pointer;
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pf-card:hover { border-color: var(--border-md); box-shadow: 0 6px 18px rgba(7,15,84,.08); transform: translateY(-2px); }
.pf-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pf-card-thumb {
  position: relative; aspect-ratio: 1.6; background: var(--bg-gray);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pf-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-card-thumb-empty { color: var(--muted-ic); font-size: 31px; display: flex; }
.pf-card-photos {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  font-size: 13px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55);
  border-radius: 999px; padding: 2px 9px;
}
.pf-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.pf-card-cat { font-size: 14px; font-weight: 700; color: var(--primary); }
.pf-card-title {
  font-size: 17px; font-weight: 700; color: var(--text-900); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-card-summary {
  font-size: 15px; color: var(--text-500); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-card-foot {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
  font-size: 14px; color: var(--text-400);
}

/* ── 상세 모달 ── */
.pf-modal {
  position: fixed; inset: 0; z-index: 1300; background: rgba(7,15,84,.5);
  align-items: center; justify-content: center; padding: 24px 16px;
}
.pf-modal-box {
  position: relative; background: var(--bg-white); border-radius: 16px;
  width: 1120px; max-width: 96vw; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.pf-modal-x {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.15);
  font-size: 26px; line-height: 1; color: var(--text-500); cursor: pointer;
}
.pf-modal-x:hover { background: var(--bg-gray); color: var(--text-900); }
/* 지면 자체가 스크롤한다 — 문서를 넘겨 읽는 느낌 */
.pf-modal-scroll { overflow-y: auto; padding: 34px 40px 32px; }

.pf-doc-cat { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.pf-doc-title { font-size: 27px; font-weight: 800; color: var(--text-900); line-height: 1.35; margin: 0; }
.pf-doc-summary { font-size: 17px; color: var(--text-500); line-height: 1.6; margin: 8px 0 0; }
.pf-doc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pf-doc-sec { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.pf-doc-h3 { font-size: 18px; font-weight: 800; color: var(--text-900); margin: 0 0 12px; }
.pf-doc-date { margin-top: 26px; font-size: 14px; color: var(--text-400); text-align: right; }

.pf-chip {
  display: inline-block; font-size: 14px; font-weight: 600;
  background: var(--primary-bg); color: var(--primary);
  border-radius: 999px; padding: 3px 10px; margin: 0 4px 4px 0;
}

/* 항목/값 두 열 — 값이 있는 줄만 그려지므로 빈 라벨이 남지 않는다 */
.pf-meta { display: grid; grid-template-columns: 132px 1fr; gap: 10px 16px; margin: 0; }
.pf-meta dt { font-size: 16px; font-weight: 700; color: var(--text-500); }
.pf-meta dd { font-size: 16px; color: var(--text-900); margin: 0; line-height: 1.6; }

/* 사진 — 세로로 이어 붙여 읽고, 누르면 라이트박스로 확대 */
.pf-shots { display: flex; flex-direction: column; gap: 12px; }
.pf-shot {
  width: 100%; height: auto; display: block; cursor: zoom-in;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-gray);
}

/* 연결 서비스 카드 */
.pf-linked {
  display: flex; gap: 14px; align-items: center; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px;
  transition: border-color .15s, background .15s;
}
.pf-linked:hover { border-color: var(--border-md); background: var(--primary-bg); }
.pf-linked-thumb {
  width: 108px; height: 68px; flex-shrink: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-gray); display: flex; align-items: center; justify-content: center;
  color: var(--muted-ic);
}
.pf-linked-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-linked-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf-linked-title { font-size: 17px; font-weight: 700; color: var(--text-900); }
.pf-linked-meta { font-size: 15px; color: var(--text-500); }
.pf-linked-price { font-size: 17px; font-weight: 800; color: var(--text-900); }

@media (max-width: 720px) {
  .pf-modal-scroll { padding: 30px 20px 24px; }
  .pf-doc-title { font-size: 22px; }
  .pf-meta { grid-template-columns: 1fr; gap: 2px 0; }
  .pf-meta dd { margin-bottom: 10px; }
}

/* ── 판매자 공개 프로필의 목록 탭(2026-08-01 운영 지시) ──
   탭은 링크다(JS 없음) — 백엔드가 보고 있는 탭 하나만 한 쪽(20개) 실어 주므로 다른 탭의 내용은
   화면에 없고, 어차피 요청이 필요하니 주소가 있는 링크가 맞다. 밑줄 막대 = 지금 탭. */
.sp-tablist { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.sp-tab {
  padding: 12px 16px; font-size: 17px; font-weight: 700; color: var(--text-500);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;   /* 막대 밑줄 위에 얹는다 */
}
.sp-tab:hover { color: var(--text-900); }
.sp-tab.active { color: var(--text-900); border-bottom-color: var(--primary); }
.sp-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; border-radius: 6px; }
.sp-tab-n { font-size: 15px; font-weight: 600; color: var(--text-400); margin-left: 5px; }
.sp-tab.active .sp-tab-n { color: var(--text-500); }
/* 목록이 하나뿐이라 탭 막대를 그리지 않을 때 그 자리를 대신하는 제목 */
.sp-panel-title { font-size: 20px; font-weight: 800; color: var(--text-900); margin: 0 0 16px; }

/* ── 첨부 버튼(.img-tool-btn) ──
   2026-08-01: fragments/image-tool.html의 <style>에만 있던 규칙을 여기로 옮겼다.
   포트폴리오 등록 폼은 이미지 모달을 안 쓰기 때문에 그 프래그먼트를 안 불렀고,
   그래서 '사진 추가'가 클래스만 있고 스타일이 없는 맨 글자로 나왔다.
   버튼 모양은 화면마다 같아야 하므로 프래그먼트가 아니라 전역 CSS가 정본이다. */
.img-tool-btn {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  padding: 10px 18px; border-radius: var(--r-md); cursor: pointer;
  background: var(--primary-soft);
  border: 1.5px dashed var(--primary-soft-bd); color: var(--primary);
  font-size: 17px; font-weight: 700; text-decoration: none;
  transition: box-shadow .15s, background .15s;
}
.img-tool-btn:hover { background: var(--primary-soft-bd); box-shadow: 0 3px 10px rgba(7,15,84,.15); }
/* label로 file input을 감싸는 형태(포트폴리오 사진 추가)는 label 자신이 포커스를 못 받는다.
   input을 display:none으로 숨기면 탭 순서에서도 빠져 키보드로는 아예 닿지 못하므로,
   보이지만 않게 숨기고(.file-in-btn) 포커스는 버튼 테두리로 보여 준다. */
.img-tool-btn:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.file-in-btn { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── 판매자 센터 표의 '삭제' 글자 버튼 — 서비스 관리·포트폴리오 관리 공용 ──
   2026-08-01 운영 지시로 빨강. #ef4444가 아니라 #dc2626인 이유는 흰 배경 16px 글자에서
   앞의 것이 명암비 4.5:1에 못 미치기 때문이다(이 저장소가 필드 오류 글자에 쓰는 값과 같다).
   두 화면이 같은 인라인 스타일을 각자 들고 있었다 — 색을 통일하라는 지시가 나온 김에 규칙으로 모았다.
   font-family는 일부러 두지 않는다(버튼 기본 글꼴 그대로 — 지금 화면과 같게 유지). */
.tbl-del-btn {
  font-size: 16px; color: #dc2626; font-weight: 600;
  background: none; border: none; cursor: pointer; padding: 0; line-height: 1;
}

/* ── 태그 칩 입력(static/js/tag-input.js) — 서비스 등록·포트폴리오 등록 공용 ──
   2026-08-01: 서비스 폼 마크업에 인라인으로 박혀 있던 값을 그대로 옮긴 것이다(모양 변화 없음). */
.tag-box {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-white); min-height: 46px; cursor: text;
}
.tag-box:focus-within { border-color: var(--primary); }
.tag-box .tag-input {
  border: none; outline: none; font-size: 16px; flex: 1; min-width: 120px; background: transparent;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  background: var(--primary-bg); color: var(--primary);
  border-radius: 20px; font-size: 15px; font-weight: 600;
}
.tag-chip-x { cursor: pointer; font-size: 18px; line-height: 1; }

/* ── 판매자 센터: 관리 표의 대표 이미지 칸 ── */
.pf-cell-thumb {
  width: 96px; height: 60px; margin: 0 auto; border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-gray); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.pf-cell-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-cell-thumb-empty { color: var(--muted-ic); display: flex; }

/* ── 판매자 센터: 등록 폼 ── */
.pf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .pf-form-grid { grid-template-columns: 1fr; } }

/* 사진 갤러리 위젯(static/js/portfolio-gallery.js) */
.pf-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-gallery.is-busy { opacity: .6; }              /* 업로드 중 — 저장은 폼이 따로 막는다 */
.pf-g-item {
  position: relative; width: 148px; border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; background: var(--bg-gray);
}
.pf-g-item.is-cover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(7,15,84,.14); }
.pf-g-item img { width: 100%; height: 96px; object-fit: cover; display: block; }
.pf-g-bar { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; }
.pf-g-btn {
  border: none; cursor: pointer; font-family: inherit; line-height: 1;
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(7,15,84,.78); color: #fff; font-size: 13px; font-weight: 700;
}
.pf-g-btn:hover { background: var(--primary); }
.pf-g-btn.pf-g-del:hover { background: #991b1b; }
.pf-g-btn.pf-g-cover {
  position: static; width: 100%; height: auto; border-radius: 0;
  padding: 5px 0; font-size: 13px; background: var(--bg-white); color: var(--text-500);
  border-top: 1px solid var(--border);
}
.pf-g-btn.pf-g-cover:hover { background: var(--primary-soft); color: var(--primary-deep); }
.pf-g-item.is-cover .pf-g-cover,
.pf-g-item.is-cover .pf-g-cover:hover { background: var(--primary); color: #fff; }

/* ── 상세 모달 2단(2026-07-31 2차 운영 지시) ──
   왼쪽 = 읽는 것(프로젝트 설명·프로젝트 정보), 오른쪽 = 보는 것(사진).
   사진이 없는 글은 오른쪽 열 자체가 렌더되지 않으므로 왼쪽이 전폭을 쓴다(빈 열이 남지 않게). */
.pf-doc-head { margin-bottom: 4px; }
.pf-doc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
.pf-doc-cols > .pf-doc-side:only-child,
.pf-doc-cols > .pf-doc-main:only-child { grid-column: 1 / -1; }
.pf-doc-main, .pf-doc-side { min-width: 0; }
/* 두 열의 첫 섹션은 같은 높이에서 시작해야 한다 — 기본 .pf-doc-sec의 위 여백을 열 안에서만 맞춘다 */
.pf-doc-main > .pf-doc-sec:first-child,
.pf-doc-side > .pf-doc-sec:first-child { margin-top: 24px; padding-top: 20px; }
@media (max-width: 900px) {
  .pf-doc-cols { grid-template-columns: 1fr; gap: 0; }
}

/* 목록 페이지 나눔(판매자 정보) */
/* 포트폴리오 전용 섹션/페이저(.pf-pub-sec·.pf-sec-title·.pf-pager·.pf-page)는 2026-08-01
   판매자 정보 탭 개편으로 삭제했다 — 세 목록이 같은 껍데기(.sp-panel)와 같은 페이저(.pagination)를
   쓰게 되면서 포트폴리오만 다른 모양일 이유가 없어졌다. */

/* 서비스 상세의 관련 포트폴리오 트랙 — 사이드바가 있어 본문 폭이 좁다(≈770px): 한 화면 3장 */
.reco-track.pf-track { gap: 14px; }
.reco-track.pf-track > .pf-card { flex: 0 0 calc((100% - 28px) / 3); scroll-snap-align: start; }
@media (max-width: 900px) {
  .reco-track.pf-track > .pf-card { flex: 0 0 calc((100% - 14px) / 2); }
}

/* 다중 선택 체크박스 목록 — 포트폴리오 폼(서비스 고르기)·서비스 폼(포트폴리오 고르기) 공용 */
.pf-pick {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 6px; max-height: 260px; overflow-y: auto; background: var(--bg-white);
}
.pf-pick-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; font-size: 16px; color: var(--text-700);
}
.pf-pick-item:hover { background: var(--primary-bg); }
.pf-pick-item input { accent-color: var(--primary); flex-shrink: 0; }
.pf-pick-empty {
  border: 1px dashed var(--border-md); border-radius: var(--r-md);
  padding: 14px 16px; font-size: 16px; color: var(--text-400);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
/* 서비스 폼 쪽은 썸네일까지 — 제목만으로는 어느 작업물인지 잘 안 떠오른다 */
.pf-pick-rich .pf-pick-item { padding: 8px; }
.pf-pick-thumb {
  width: 64px; height: 40px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
  background: var(--bg-gray); border: 1px solid var(--border);
}
.pf-pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-pick-title { font-weight: 600; color: var(--text-900); }
.pf-pick-sub { font-size: 14px; color: var(--text-400); }

/* 연결 서비스 카드가 여러 장이 될 수 있다(V110) */
.pf-linked-list { display: flex; flex-direction: column; gap: 10px; }